:root { --ink:#1B2430; --muted:#5B6774; --paper:#F2F5F8; --surface:#FFF; --line:#D9E0E7; --accent:#35597B;
        --bad:#AE4B44; --bad-bg:#FBEDEC; --warn:#9A6B12; --warn-bg:#FCF4E2; --ok:#2E7D57; --ok-bg:#E8F4EE; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:14px/1.45 -apple-system,"Segoe UI",Roboto,sans-serif; }
header { background:var(--surface); border-bottom:1px solid var(--line); padding:10px 16px; display:flex; gap:16px;
         align-items:center; flex-wrap:wrap; position:sticky; top:0; z-index:5; }
header .brand { font-weight:700; }
nav { display:flex; gap:4px; flex-wrap:wrap; }
nav button { background:none; border:none; padding:7px 12px; border-radius:7px; cursor:pointer; color:var(--muted); font:inherit; }
nav button.on { background:var(--paper); color:var(--ink); font-weight:600; }
header .right { margin-left:auto; display:flex; gap:10px; align-items:center; color:var(--muted); }
main { padding:16px; max-width:1400px; margin:0 auto; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; }
.card h2 { font-size:1.05rem; margin:0 0 4px; }
.hint { color:var(--muted); font-size:.85rem; margin:0 0 12px; }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
select, input { padding:7px 9px; border:1px solid var(--line); border-radius:7px; font:inherit; background:#fff; color:var(--ink); }
button.btn { background:var(--accent); color:#fff; border:none; border-radius:7px; padding:7px 14px; cursor:pointer; font:inherit; }
button.btn.ghost { background:none; color:var(--accent); border:1px solid var(--line); }
button.btn:disabled { opacity:.5; cursor:default; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px; }
.kpi { border:1px solid var(--line); border-radius:9px; padding:10px 12px; }
.kpi .v { font-size:1.35rem; font-weight:700; font-variant-numeric:tabular-nums; }
.kpi .l { color:var(--muted); font-size:.82rem; }
.kpi.bad { background:var(--bad-bg); border-color:#F0CFCB; } .kpi.bad .v { color:var(--bad); }
.tbl-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
th, td { padding:7px 9px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; vertical-align:top; }
th { color:var(--muted); font-weight:600; font-size:.82rem; background:var(--paper); position:sticky; top:0; }
td.n, th.n { text-align:right; }
td.wrap { white-space:normal; min-width:220px; }
tr.click { cursor:pointer; } tr.click:hover td { background:#F7F9FB; }
tr.sub td { background:#FAFBFC; }
.tag { display:inline-block; padding:1px 8px; border-radius:20px; font-size:.78rem; font-weight:600; }
.tag.bad { background:var(--bad-bg); color:var(--bad); } .tag.warn { background:var(--warn-bg); color:var(--warn); }
.tag.ok { background:var(--ok-bg); color:var(--ok); } .tag.mute { background:var(--paper); color:var(--muted); }
.bad-t { color:var(--bad); font-weight:600; } .mute { color:var(--muted); }
.empty { color:var(--muted); padding:20px 0; text-align:center; }
.row-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.msg { color:var(--bad); min-height:1.2em; font-size:.85rem; }
[hidden] { display:none !important; }
@media (max-width:640px) { main { padding:12px; } header { padding:8px 12px; } .card { padding:12px; } }