/* Public HDC page (/) and /admin/hdc — E2b. Tokens come from app.css. */
.controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: var(--gap); }
.controls label { margin: 0 0 4px; }
.controls select { width: auto; min-width: 140px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: var(--gap); }
.kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); }
.kpi .v { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .l { font-size: .85rem; color: var(--muted); }
.kpi.r4 .v { color: var(--accent); }
.chart-box { position: relative; width: 100%; height: 340px; }
.chart-box.tall { height: 1500px; }
table.data tr.total td { font-weight: 700; border-top: 2px solid var(--line); background: #f1f5f9; }
table.data tr.r4row td { color: var(--accent); font-weight: 600; }
.muted-cell { color: var(--muted); }
.status-ok { color: var(--ok); } .status-error { color: var(--bad); } .status-empty { color: var(--warn); }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.inline-form input { width: 140px; }
.msg { margin-top: 8px; }
@media (max-width: 600px) { .chart-box { height: 300px; } table.data { font-size: .88rem; } }