:root{--bg: #0e0f12;--surface: #181a20;--surface-2: #1f222a;--border: #2a2e38;--text: #e9eaef;--text-muted: #9098a8;--text-dim: #5d6472;--accent: #1d9e75;--accent-soft: rgba(29, 158, 117, .18);--warning: #ba7517;--danger: #e24b4a;--good: #1d9e75;--cosmic: #7f77dd}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}a{color:var(--accent)}select,input,button{font-family:inherit;font-size:13px}select{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 28px 6px 10px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239098a8' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.app{min-height:100%;padding:20px;max-width:1400px;margin:0 auto}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}.header-title{display:flex;align-items:center;gap:10px;font-weight:500;font-size:16px}.dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}.header-meta{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:12px;flex-wrap:wrap}.live-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--accent-soft);color:var(--accent);border-radius:999px;font-size:12px;font-weight:500}.live-pill .dot{width:7px;height:7px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.45}}.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.kpi{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px}.kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:4px}.kpi-value{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums}.kpi-sub{font-size:11px;color:var(--text-muted);margin-top:2px}.kpi-delta{display:inline-block;font-size:12px;margin-left:6px;font-variant-numeric:tabular-nums}.kpi-delta.up{color:var(--good)}.kpi-delta.down{color:var(--danger)}.kpi-delta.flat{color:var(--text-muted)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}@media (max-width: 1100px){.grid-3{grid-template-columns:1fr 1fr}}@media (max-width: 720px){.grid-3,.grid-2,.kpi-strip{grid-template-columns:1fr}}.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;min-height:100px}.panel-title{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin:0 0 10px;display:flex;justify-content:space-between}.panel-title .panel-sub{text-transform:none;letter-spacing:0;font-size:11px}table.lb{width:100%;border-collapse:collapse;font-size:13px}table.lb td{padding:4px 0;font-variant-numeric:tabular-nums}table.lb td.rank{width:22px;color:var(--text-dim)}table.lb td.val{text-align:right;white-space:nowrap}table.lb td.muted{color:var(--text-muted);font-size:12px}.value-good{color:var(--good);font-weight:500}.value-warn{color:var(--warning)}.value-bad{color:var(--danger)}.value-cosmic{color:var(--cosmic);font-weight:500}.bar-row{display:grid;grid-template-columns:minmax(0,220px) minmax(60px,1fr) 44px;gap:10px;align-items:center;font-size:12px;margin:5px 0}.bar-row>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.bar-row.with-count{grid-template-columns:minmax(0,180px) 36px minmax(60px,1fr) 44px}.bar-row .count{font-size:11px;color:var(--text-dim);text-align:right;font-variant-numeric:tabular-nums}.bar-track{background:var(--surface-2);height:8px;border-radius:4px;overflow:hidden}.bar-fill{height:100%;border-radius:4px}.bar-row .val{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-muted)}.empty{color:var(--text-dim);font-size:13px;padding:20px 0;text-align:center}.error{color:var(--danger);background:#e24b4a14;border:1px solid rgba(226,75,74,.3);padding:10px 14px;border-radius:8px;margin:10px 0}.skeleton{background:var(--surface-2);border-radius:4px;height:13px;margin:6px 0;animation:shimmer 1.4s ease-in-out infinite}@keyframes shimmer{0%,to{opacity:.5}50%{opacity:.8}}
