:root { --bg:#0f1419; --panel:#182029; --line:#2a3542; --fg:#e8edf2; --mut:#8b98a8;
  --dl:#e50914; --ul:#3ea6ff; --plan:#f5c542; --ok:#3ecf8e; --bad:#ff6b6b; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",Arial,Helvetica,sans-serif; background:var(--bg); color:var(--fg);
  max-width:1200px; margin-inline:auto; padding:16px; line-height:1.5; }
h1 { margin:0 0 4px; font-size:28px; }
h2 { font-size:18px; margin:0 0 8px; }
.sub,.hint,footer { color:var(--mut); font-size:14px; }
.controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:16px 0; }
button { background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:6px 12px;
  cursor:pointer; font:inherit; }
button.on { background:var(--dl); border-color:var(--dl); }
.range button { margin-inline-end:4px; }
input { background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:6px; width:110px; font:inherit; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px; }
.card .v { font-size:26px; font-weight:700; }
.card .l { color:var(--mut); font-size:13px; }
.card.bad .v { color:var(--bad); } .card.ok .v { color:var(--ok); }
.notes { margin:12px 0; }
.note { background:#2a2312; border:1px solid #5c4a14; border-radius:10px; padding:10px 12px; margin:8px 0; font-size:14px; }
.note.info { background:#132233; border-color:#1f4a73; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; margin:14px 0; }
.chart svg { width:100%; height:auto; display:block; direction:ltr; }
.legend { font-size:13px; color:var(--mut); }
.k { display:inline-block; width:14px; height:4px; margin:0 4px 3px 10px; vertical-align:middle; }
.k.dl { background:var(--dl); } .k.ul { background:var(--ul); } .k.plan { background:var(--plan); }
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
th { color:var(--mut); font-weight:600; }
.hd { font-weight:700; font-size:15px; }
.gd { color:var(--mut); font-size:12px; font-weight:400; margin-inline-start:6px; }
td.err { color:var(--bad); }
@media print { body { background:#fff; color:#000; } .controls { display:none; }
  .panel,.card { background:#fff; border-color:#ccc; } .gd,.sub,.hint,footer,.card .l,th { color:#555; } }