:root {
  --bg:#0f1115; --panel:#181b22; --ink:#e6e8ee; --muted:#9aa3b2;
  --accent:#3bd67a; --base:#e0533d; --pq:#3a7bff; --line:#2a2f3a;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); }
header { padding:24px 28px 8px; }
h1 { margin:0; font-size:22px; }
h1 .sub, h2 .sub { color:var(--muted); font-weight:400; font-size:0.7em; }
.framing { color:var(--muted); max-width:760px; }
h2 { margin:30px 28px 8px; border-bottom:1px solid var(--line); padding-bottom:6px; }

#controls { display:flex; flex-wrap:wrap; gap:18px; align-items:center;
  padding:12px 28px; background:var(--panel); margin:8px 0; }
#controls label { color:var(--muted); font-size:14px; }
#controls .hint { font-size:12px; opacity:.7; }
select, input[type=file] { color:var(--ink); background:#0c0e12;
  border:1px solid var(--line); border-radius:6px; padding:4px 6px; }

#quality-banner { margin:8px 28px; padding:12px 16px; border-radius:8px; font-weight:600; }
.banner-good { background:#12331f; border:1px solid #1f7a44; color:#7df0a8; }
.banner-warn { background:#3a2410; border:1px solid #aa6a1f; color:#ffce8a; }
.banner-warn ul { font-weight:400; margin:6px 0 0; color:#ffd9a8; }

#env-summary { margin:0 28px 8px; color:var(--muted); font-size:13px;
  display:flex; flex-wrap:wrap; gap:6px 18px; }
#env-summary b { color:var(--ink); }
#env-summary .chip { background:var(--panel); padding:3px 9px; border-radius:20px;
  border:1px solid var(--line); }

#runChips { display:flex; flex-wrap:wrap; gap:8px; }
.runchip { display:inline-flex; align-items:center; gap:7px; background:#0c0e12;
  border:1px solid var(--line); border-radius:20px; padding:5px 12px; cursor:pointer;
  color:var(--ink); font-size:13px; user-select:none; }
.runchip input { margin:0; }
.runchip .dot { width:10px; height:10px; border-radius:5px; display:inline-block; }
.runchip.off { opacity:.4; }

.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
  gap:18px; padding:14px 28px; }
figure { margin:0; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:12px; min-height:320px; }
canvas { max-height:340px; }
/* bar charts set an explicit figure height from their row count */
figure.tall { min-height:0; }
figure.tall canvas { max-height:none; }

footer { color:var(--muted); font-size:12px; padding:18px 28px 40px; max-width:820px; }
code { background:#0c0e12; padding:1px 5px; border-radius:4px; }
.empty { color:var(--muted); padding:30px; text-align:center; }