:root { color-scheme: dark; --bg:#14161a; --card:#1e2127; --line:#2c313a; --fg:#e6e8eb; --mute:#8b93a1; --acc:#e0a526; --up:#4cc38a; --down:#ef6a6a; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:14px/1.45 system-ui, sans-serif; }
header { display:flex; gap:12px; align-items:center; padding:10px 16px; border-bottom:1px solid var(--line); }
h1 { font-size:18px; margin:0; flex:1; color:var(--acc); }
h2 { font-size:15px; margin:18px 0 8px; }
nav { display:flex; gap:4px; padding:8px 16px 0; flex-wrap:wrap; }
nav button { background:none; border:0; color:var(--mute); padding:8px 12px; border-bottom:2px solid transparent; cursor:pointer; font-size:14px; }
nav button.on { color:var(--fg); border-color:var(--acc); }
main { padding:12px 16px 40px; max-width:1100px; }
button, select, input { background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:6px; padding:6px 10px; font:inherit; }
button { cursor:pointer; }
button.ghost { background:none; }
form { display:flex; gap:8px; margin-bottom:12px; }
input { flex:1; min-width:0; }
table { border-collapse:collapse; width:100%; background:var(--card); border-radius:8px; overflow:hidden; }
th, td { padding:6px 10px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
th:first-child, td:first-child { text-align:left; }
th { color:var(--mute); font-weight:500; font-size:12px; }
tr.link td:first-child { cursor:pointer; text-decoration:underline dotted; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.card .k { color:var(--mute); font-size:12px; }
.card .v { font-size:20px; margin-top:2px; }
.up { color:var(--up); } .down { color:var(--down); } .mute { color:var(--mute); }
.g { color:#f2c94c; } .s { color:#c0c6cf; } .c { color:#d08a52; }
.q0 { color:#9d9d9d; } .q1 { color:#fff; } .q2 { color:#1eff00; } .q3 { color:#0070dd; } .q4 { color:#a335ee; } .q5 { color:#ff8000; }
#msg { color:var(--down); margin:6px 0; min-height:1px; }
svg.chart { width:100%; height:220px; background:var(--card); border-radius:8px; }
.wrap { overflow-x:auto; }
.row { display:flex; gap:16px; flex-wrap:wrap; }
.row > div { flex:1; min-width:300px; }