:root{--bg: #0f1314;--surface: #191c1d;--surface-alt: #222627;--border: #2d3132;--text: #f6f7f8;--text-dim: #9aa3a5;--accent: #EEFF5E;--accent-ink: #191c1d;--good: #55e77b;--warn: #ffb547;--bad: #ff6b6b}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Manrope,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:var(--accent)}.app-shell{display:flex;flex-direction:column;min-height:100vh}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:#0f1314d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.5px}.brand-name{font-weight:800;letter-spacing:-.3px;font-size:16px}.brand-sub{color:var(--text-dim);font-size:12px;margin-left:4px}.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.token-input,.range-select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:13px;outline:none;min-width:180px;transition:border-color .15s ease,box-shadow .15s ease}.token-input:focus,.range-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #eeff5e2e}.btn{border:0;border-radius:10px;padding:10px 14px;font-weight:700;font-size:13px;cursor:pointer;transition:transform .08s ease,opacity .15s ease}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:var(--accent-ink)}.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}.content{flex:1;padding:24px 28px 48px;max-width:1440px;width:100%;margin:0 auto}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--surface-alt);border:1px solid var(--border);font-size:12px;color:var(--text-dim)}.status-dot{width:8px;height:8px;border-radius:999px;background:var(--bad)}.status-dot.ok{background:var(--good)}.page-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:22px}.page-title{font-size:22px;font-weight:800;letter-spacing:-.4px;margin:0 0 2px}.page-sub{color:var(--text-dim);font-size:13px}.grid-kpis{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-bottom:22px}.kpi{grid-column:span 3;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px}@media (max-width: 1100px){.kpi{grid-column:span 6}}@media (max-width: 620px){.kpi{grid-column:span 12}}.kpi-label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}.kpi-value{font-size:26px;font-weight:800;letter-spacing:-.4px}.kpi-sub{font-size:12px;color:var(--text-dim);margin-top:6px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:22px}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-title{font-size:15px;font-weight:700;letter-spacing:-.2px}.panel-hint{color:var(--text-dim);font-size:12px}.grid-two{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}@media (max-width: 900px){.grid-two{grid-template-columns:1fr}}table.data{width:100%;border-collapse:collapse;font-size:13px}table.data th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);padding:10px 12px;border-bottom:1px solid var(--border)}table.data td{padding:12px;border-bottom:1px solid rgba(45,49,50,.5);vertical-align:middle}table.data tr:last-child td{border-bottom:0}table.data .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;background:var(--surface-alt);color:var(--text-dim);border:1px solid var(--border)}.badge-accent{background:#eeff5e26;color:var(--accent);border-color:#eeff5e59}.badge-good{background:#55e77b1f;color:var(--good);border-color:#55e77b4d}.badge-bad{background:#ff6b6b1f;color:var(--bad);border-color:#ff6b6b4d}.chart-wrap{display:flex;flex-direction:column;gap:8px}.chart-bars{display:flex;align-items:flex-end;gap:6px;height:180px;padding:6px 2px 0;border-bottom:1px solid var(--border)}.bar{flex:1 1 auto;min-width:8px;background:linear-gradient(180deg,var(--accent),#c7d95b);border-radius:6px 6px 0 0;position:relative;opacity:.9;transition:opacity .15s ease}.bar:hover{opacity:1}.bar:hover:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--surface-alt);color:var(--text);padding:4px 8px;border-radius:6px;font-size:11px;white-space:nowrap;border:1px solid var(--border)}.bar.dim{background:linear-gradient(180deg,#4e6e61,#2b4039)}.bar.warm{background:linear-gradient(180deg,#ffb547,#d08a22)}.chart-axis{display:flex;justify-content:space-between;color:var(--text-dim);font-size:11px;padding:6px 2px 0}.empty{text-align:center;padding:40px 20px;color:var(--text-dim)}.tabs{display:inline-flex;padding:4px;background:var(--surface-alt);border:1px solid var(--border);border-radius:12px;gap:2px;margin-bottom:14px}.tab{background:transparent;border:0;color:var(--text-dim);padding:7px 12px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer}.tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px #0003}.pagination{display:flex;align-items:center;justify-content:space-between;padding-top:10px;color:var(--text-dim);font-size:12px}.alert{padding:14px 16px;border-radius:12px;border:1px solid var(--border);background:var(--surface);margin-bottom:22px}.alert-warn{border-color:#ffb54766;background:#ffb5470f}.alert-warn .alert-title{color:var(--warn)}.alert-title{font-weight:700;margin-bottom:4px}.alert-body{color:var(--text-dim);font-size:13px}.legend{display:inline-flex;gap:14px;font-size:12px;color:var(--text-dim)}.legend-swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}.footer-note{color:var(--text-dim);font-size:12px;text-align:center;padding:18px}