:root {
  color-scheme: dark;
  --surface: #1a1a19; --page: #0d0d0d; --ink: #fff; --ink-2: #c3c2b7; --muted: #898781;
  --grid: #2c2c2a; --line: rgba(255,255,255,.10);
  --s1: #3987e5; --s2: #d95926;
  --good: #0ca30c; --warning: #fab219; --critical: #d03b3b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.4 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
header { display: flex; gap: 16px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
header nav { display: flex; gap: 4px; flex: 1; }
header form { margin: 0; }
button, select, input, textarea { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
button { cursor: pointer; }
button.on, button.primary { background: var(--s1); border-color: var(--s1); color: #fff; }
button.ghost { background: none; }
button:disabled { opacity: .5; cursor: default; }
main { padding: 16px; display: grid; gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-width: 0; }
.card h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tile .v { font-size: 24px; font-weight: 600; }
.tile .s { color: var(--muted); font-size: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .grid2 { grid-template-columns: 1fr; } }
.chart { position: relative; height: 240px; }
.scroll { max-height: 420px; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: var(--surface); }
td.n, th.n { text-align: right; }
tr.click { cursor: pointer; }
tr.click:hover td { background: rgba(255,255,255,.04); }
.badge { padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.badge.down { background: rgba(208,59,59,.2); color: #ff8a8a; }
.badge.warn { background: rgba(250,178,25,.18); color: var(--warning); }
.muted { color: var(--muted); }
.err { color: #ff8a8a; }
.ok { color: var(--good); }
form.stack { display: grid; gap: 10px; max-width: 520px; }
form.stack label, .auth-card label { display: grid; gap: 4px; color: var(--ink-2); }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.pack { text-align: left; padding: 14px; }
.pack .v { font-size: 20px; font-weight: 600; display: block; }
body.auth { display: grid; place-items: center; min-height: 100vh; }
.auth-card { width: min(380px, 92vw); display: grid; gap: 12px; }
.auth-card form { display: grid; gap: 12px; }