:root { font-family: Manrope, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
.mark { width: 32px; height: 32px; display: grid; place-items: center; background: #91d6b5; color: #09100d; font-weight: 800; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; color: #849197; font-size: 12px; font-weight: 700; text-decoration: none; border-left: 2px solid transparent; }
.nav-item:hover, .nav-item.active { color: #edf5f0; background: #151c1f; border-left-color: #91d6b5; }
.nav-icon { width: 22px; color: #526066; font-size: 10px; font-weight: 800; }
.nav-item.active .nav-icon { color: #91d6b5; }
.status-dot { width: 6px; height: 6px; display: inline-block; background: #91d6b5; }
.avatar { width: 29px; height: 29px; display: grid; place-items: center; background: #23362f; color: #91d6b5; font-size: 11px; font-weight: 800; }
.eyebrow, .metric-label { color: #738086; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.metric { min-height: 147px; border: 1px solid #222a2e; background: #0c1013; padding: 18px; }
.metric-value { margin-top: 16px; font-size: 27px; font-weight: 800; letter-spacing: -.05em; }
.metric-symbol { float: right; color: #91d6b5; font-size: 16px; }
.metric-foot { margin-top: 12px; color: #68757b; font-size: 11px; }.metric-foot span { color: #68757b; }.metric-foot.positive { color: #91d6b5; }
.panel { border: 1px solid #222a2e; background: #0c1013; }.section-title { margin-top: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.select, input { border: 1px solid #2b3539; background: #11171a; color: #cbd5d8; padding: 9px 11px; font: inherit; font-size: 11px; outline: none; }.select:focus, input:focus { border-color: #91d6b5; }
.icon-btn { border: 1px solid #2b3539; background: #11171a; color: #91d6b5; padding: 7px 12px; font-size: 17px; }.primary-btn { display: inline-flex; align-items: center; gap: 9px; border: 0; background: #91d6b5; color: #09100d; padding: 11px 15px; font-size: 11px; font-weight: 800; cursor: pointer; }.primary-btn:hover { background: #b1e4c9; }
.chart { position: relative; height: 175px; overflow: hidden; }.chart-grid { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 42px, #1d272b 43px); }.chart-line { position: absolute; inset: 0; border-bottom: 1px solid #91d6b5; transform: skewY(-7deg); opacity: .7; }.chart-line span { position: absolute; width: 6px; height: 6px; background: #91d6b5; }
.donut { width: 128px; height: 128px; display: grid; place-items: center; background: conic-gradient(#92d3b2 0 81%, #697780 81% 100%); }.donut::before { content: ''; position: absolute; width: 88px; height: 88px; background: #0c1013; }.donut div { position: relative; text-align: center; }.donut strong, .donut small { display: block; }.donut strong { font-size: 18px; }.donut small { margin-top: 3px; color: #738086; font-size: 9px; }
.legend { display: inline-block; width: 7px; height: 7px; }
th { border-bottom: 1px solid #222a2e; color: #68757b; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.keys td, td { border-bottom: 1px solid #1b2326; padding: 17px 20px; color: #aeb9bd; font-size: 12px; }th { padding: 14px 20px; }.key-name { color: #e9eef0; font-weight: 700; }.mono { color: #829096; font-family: ui-monospace, monospace; font-size: 11px; }.usage-bar { width: 110px; height: 4px; background: #202b2e; }.usage-fill { height: 100%; background: #91d6b5; }.badge { padding: 5px 8px; background: #172b25; color: #91d6b5; font-size: 10px; font-weight: 800; }.delete-btn { border: 0; background: transparent; color: #68757b; cursor: pointer; font-size: 17px; }.delete-btn:hover { color: #e89292; }
.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.72); padding: 20px; }.modal { position: relative; width: min(100%, 440px); border: 1px solid #334044; background: #0c1013; padding: 28px; }.modal-close { position: absolute; top: 12px; right: 16px; border: 0; background: transparent; color: #78858b; font-size: 24px; cursor: pointer; }.modal label { display: block; color: #819096; font-size: 11px; font-weight: 700; }.modal input { display: block; width: 100%; margin-top: 8px; }.secret-box { border: 1px solid #657d71; background: #13221c; padding: 13px; color: #b9e4ca; font-family: ui-monospace, monospace; font-size: 11px; word-break: break-all; }
@media (max-width: 640px) { .metric-value { font-size: 24px; } .chart { height: 145px; } }