:root { --bg:#0f1720; --panel:#17212d; --line:#2a3846; --text:#e6edf3; --muted:#8b9db0;
  --blue:#4aa3ff; --ok:#3fb950; --warn:#d29922; --bad:#f85149; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 system-ui,sans-serif; }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
nav { display:flex; gap:4px; align-items:center; padding:8px 16px; background:var(--panel);
  border-bottom:1px solid var(--line); flex-wrap:wrap; }
nav a { color:var(--text); padding:6px 10px; border-radius:6px; }
nav a.on { background:var(--line); }
nav .brand { font-weight:600; margin-right:12px; } nav form { margin-left:auto; }
main { max-width:1200px; margin:0 auto; padding:16px; }
h1 { font-size:20px; margin:8px 0 14px; } h2 { font-size:16px; margin:20px 0 8px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.card .v { font-size:22px; font-weight:600; } .card .l { color:var(--muted); font-size:12px; }
table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; }
th,td { padding:6px 10px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:500; font-size:12px; white-space:nowrap; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; }
tr:last-child td { border-bottom:0; }
.tag { display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; margin-right:3px;
  background:var(--line); color:var(--text); }
.tag.unverified { background:#5b4a14; } .tag.persistence { background:#4b2d5e; }
.tag.regulated { background:#14465b; } .tag.exclude { background:#5e2d2d; }
.ok { color:var(--ok); } .warn { color:var(--warn); } .bad { color:var(--bad); }
.muted { color:var(--muted); }
form.inline { display:inline; } input,select,textarea,button { font:inherit; color:var(--text);
  background:#0b121a; border:1px solid var(--line); border-radius:6px; padding:6px 9px; }
button { background:var(--blue); color:#04121f; border:0; cursor:pointer; font-weight:600; }
button.quiet { background:var(--line); color:var(--text); }
textarea { width:100%; min-height:420px; font-family:ui-monospace,monospace; font-size:13px; }
pre { background:#0b121a; border:1px solid var(--line); border-radius:8px; padding:10px;
  overflow:auto; max-height:640px; font-size:12px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.box { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px; }
.chart { width:100%; max-width:820px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.chart .grid { stroke:var(--line); stroke-width:1; } .chart .axis { fill:var(--muted); font-size:10px; }
.chart .main { fill:none; stroke:var(--blue); stroke-width:2; }
.chart .shadow { fill:none; stroke:var(--muted); stroke-width:1.5; stroke-dasharray:4 3; }
.chart .stage { stroke:var(--warn); stroke-width:1; stroke-dasharray:2 3; }
.chart .pick { fill:var(--bad); }
.login { max-width:340px; margin:12vh auto; } .login label { display:block; margin:10px 0 3px; color:var(--muted); }
.login input { width:100%; } .login button { width:100%; margin-top:16px; }
.qr img { display:block; background:#fff; border-radius:6px; image-rendering:pixelated; }
.error { color:var(--bad); margin:8px 0; }
.chart .band { fill:rgba(74,163,255,0.10); }
.chart .line1 { fill:none; stroke:var(--blue); stroke-width:1.6; }
.chart .line2 { fill:none; stroke:var(--warn); stroke-width:1.6; }
.chart .line3 { fill:none; stroke:var(--muted); stroke-width:1.2; stroke-dasharray:4 3; }
.legend { margin:4px 0 14px; font-size:12px; color:var(--muted); }
.key::before { content:""; display:inline-block; width:14px; height:3px; margin-right:5px; vertical-align:middle; background:var(--blue); }
.key.line2::before { background:var(--warn); } .key.line3::before { background:var(--muted); }
.chart .obs { fill:none; stroke:var(--ok); stroke-width:2; }
.chart .now { stroke:var(--muted); stroke-width:1; }
.chart .range { fill:rgba(74,163,255,0.16); stroke:none; }