:root{
  --bg:#f6f7f9; --card:#fff; --text:#1d2430; --muted:#667085; --line:#e3e6eb;
  --accent:#1f6feb; --accent-text:#fff; --danger:#c0362c; --ok:#1a7f37; --warn:#9a6700;
  --input:#fff;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14171c; --card:#1c2027; --text:#e6e9ee; --muted:#98a2b3; --line:#2c323c;
    --accent:#4c8df6; --accent-text:#fff; --danger:#f0675c; --ok:#4cc26b; --warn:#e0b341; --input:#151920; }
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; } /* else any display rule (.cards, label, .row) beats the hidden attribute */
body{ margin:0; background:var(--bg); color:var(--text); font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
h1{ font-size:1.5rem; margin:0 0 1rem; }
h2{ font-size:1.2rem; margin:0; }
.muted{ color:var(--muted); }
.msg{ min-height:1.2em; margin:.5rem 0; }
.msg.err{ color:var(--danger); } .msg.ok{ color:var(--ok); }
.row{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
label{ display:block; margin:.6rem 0; }
label > input, label > select, label > .row{ display:flex; width:100%; margin-top:.25rem; }
label > .row input{ flex:1; }
input, select{ font:inherit; color:var(--text); background:var(--input); border:1px solid var(--line); border-radius:6px; padding:.45rem .55rem; }
button{ font:inherit; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:6px; padding:.45rem .9rem; cursor:pointer; }
button.primary{ background:var(--accent); color:var(--accent-text); border-color:var(--accent); }
button.danger{ color:var(--danger); }
button.link{ border:none; background:none; color:var(--accent); padding:.3rem 0; }
button:disabled{ opacity:.5; cursor:default; }
.banner{ position:fixed; top:0; left:0; right:0; background:var(--warn); color:#000; text-align:center; padding:.4rem; z-index:10; }
.center-card{ max-width:380px; margin:12vh auto; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.5rem; }
.center-card button.primary{ margin-top:.5rem; }
.topbar{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
.brand{ font-weight:600; } .ver{ font-weight:400; font-size:.8rem; color:var(--muted); }
nav{ display:flex; gap:.25rem; flex-wrap:wrap; }
nav .nav{ border-color:transparent; background:none; }
nav .nav.active{ border-color:var(--line); background:var(--bg); }
#whoami{ margin-left:auto; }
main{ padding:1rem; max-width:1200px; margin:0 auto; }
.pane > .row{ justify-content:space-between; margin-bottom:.5rem; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.75rem; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem; cursor:pointer; text-align:left; }
.card h3{ margin:0 0 .3rem; font-size:1.05rem; }
.controls{ display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; margin:.75rem 0; }
.controls label{ margin:0; }
#reportParams{ margin:0; }
.table-wrap{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; background:var(--card); }
th, td{ border-bottom:1px solid var(--line); padding:.4rem .6rem; text-align:left; vertical-align:top; }
th{ font-weight:600; font-size:.9rem; color:var(--muted); }
td.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.grid td, table.grid th{ text-align:center; }
table.grid td:first-child, table.grid th:first-child{ text-align:left; }
.badge{ white-space:nowrap; font-size:.8rem; padding:.05rem .45rem; border-radius:10px; border:1px solid var(--line); }
.badge.off{ color:var(--danger); } .badge.warn{ color:var(--warn); }
dialog{ border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--text); width:min(560px,calc(100vw - 32px)); }
dialog::backdrop{ background:rgba(0,0,0,.35); }
.lbl{ margin:.6rem 0 .25rem; }
@media (max-width:600px){ main{ padding:.75rem 16px; } #whoami{ margin-left:0; } }
/* report building blocks */
.kpis{ display:flex; flex-wrap:wrap; gap:.75rem; margin:1rem 0 1.25rem; }
.kpi{ flex:1; min-width:210px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.9rem 1rem; }
.kpi-t{ color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.kpi-v{ font-size:1.35rem; font-weight:600; margin:.3rem 0; font-variant-numeric:tabular-nums; }
.kpi-s{ color:var(--muted); font-size:.82rem; }
.note{ border-left:3px solid var(--warn); background:var(--card); padding:.6rem .9rem; border-radius:4px; margin:.75rem 0; }
.note.err{ border-left-color:var(--danger); }
.tbl-title{ font-size:1.05rem; margin:1.25rem 0 .4rem; }
.small{ font-size:.85rem; }
tr.dim td{ opacity:.55; }
.warn-mark{ color:var(--warn); }