:root { --ink:#1d2733; --muted:#5b6673; --line:#dfe4ea; --bg:#f4f6f8; --card:#fff; --good:#1b7f4a; --warn:#9a6700; --bad:#b42318; }
* { box-sizing:border-box; } body { margin:0; font:14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); }
.wrap { max-width:1240px; margin:0 auto; padding:0 16px; } header { background:#fff; border-bottom:1px solid var(--line); padding:14px 0; margin-bottom:16px; }
h1 { font-size:22px; margin:0 0 4px; } h2 { font-size:17px; margin:0 0 10px; } h3 { font-size:14px; margin:14px 0 6px; } .sub { font-weight:normal; color:var(--muted); font-size:13px; }
.meta { margin:0; color:var(--muted); } code { background:#eef1f4; padding:1px 4px; border-radius:3px; font-size:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:16px; }
.status { font-weight:600; margin:0 0 8px; } .status.good { color:var(--good); } .status.warn { color:var(--warn); } .status.bad { color:var(--bad); }
ul.findings { list-style:none; padding:0; margin:0 0 6px; } ul.findings li { padding:6px 8px; border-left:4px solid #ccc; background:#fafbfc; margin-bottom:6px; }
li.sev-high { border-color:#d92d20; } li.sev-medium { border-color:#f79009; } li.sev-low { border-color:#98a2b3; }
.badge { display:inline-block; font-size:11px; text-transform:uppercase; padding:1px 6px; border-radius:3px; background:#e3e3e3; } li.sev-high .badge { background:#f4b6b6; } li.sev-medium .badge { background:#fbe1a6; }
.rule { color:var(--muted); } .action { color:var(--muted); font-size:13px; margin-top:2px; }
.gridwrap { overflow-x:auto; } table.grid { border-collapse:collapse; font-size:12px; } table.grid th { font-weight:normal; color:var(--muted); padding:2px 3px; text-align:center; }
table.grid td { width:18px; height:16px; border:1px solid #fff; } table.grid td.src, table.grid td.last { width:auto; padding:0 8px 0 0; white-space:nowrap; color:var(--ink); } table.grid td.last { padding-left:8px; color:var(--muted); }
.st-loaded { background:#bfe3bf; } .st-low { background:#fbe1a6; } .st-high { background:#f7c59f; } .st-missing { background:#f4b6b6; } .st-zero { background:#e8f3e8; } .st-ended, .st-future { background:#e3e3e3; } .st-pending { background:#f1f3f5; }
.legend { color:var(--muted); font-size:12px; } .legend span { display:inline-block; width:12px; height:12px; vertical-align:middle; margin:0 2px 0 8px; border:1px solid #ddd; }
details { margin-top:8px; } summary { cursor:pointer; color:var(--muted); } table.plain { border-collapse:collapse; font-size:12px; margin-top:6px; } table.plain th, table.plain td { padding:2px 8px 2px 0; text-align:left; border-bottom:1px solid var(--line); }
.controls { display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .controls label { color:var(--muted); } select { font:inherit; padding:4px 6px; border:1px solid var(--line); border-radius:4px; background:#fff; }
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); gap:10px; margin:12px 0 4px; }
.kpi { background:#f8fafc; border:1px solid var(--line); border-radius:6px; padding:8px 10px; } .kpi .l { color:var(--muted); font-size:12px; } .kpi .v { font-size:20px; font-weight:600; } .kpi .d { font-size:12px; } .up { color:var(--good); } .down { color:var(--bad); }
.charts { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:16px; } .chart { position:relative; height:300px; } .chart.tall { height:360px; } .span2 { grid-column:1 / -1; }
.nochart { display:none; position:absolute; inset:0; padding:20px; color:var(--muted); background:#fafbfc; border:1px dashed var(--line); }
table.data { border-collapse:collapse; width:100%; font-size:13px; margin-top:8px; } table.data th, table.data td { padding:4px 8px; border-bottom:1px solid var(--line); text-align:right; white-space:nowrap; }
table.data th:first-child, table.data td:first-child, table.data th:nth-child(2), table.data td:nth-child(2), table.data th:nth-child(3), table.data td:nth-child(3) { text-align:left; }
table.data tr.total td { font-weight:600; border-top:2px solid var(--ink); } .tablewrap { overflow-x:auto; } .note { color:var(--muted); font-size:12px; margin:6px 0 0; }
footer { color:var(--muted); font-size:12px; padding:10px 16px 30px; }
@media print { header, .controls, .nochart { display:none; } .card { break-inside:avoid; border:none; } .chart { height:260px; } }