: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); }

.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; }

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; }

/* ---- multi-implementation / phase views (stage-6 dashboard) ---------------- */
h3 { margin:22px 28px 4px; color:var(--ink); font-size:16px; }
h3 .sub { color:var(--muted); font-weight:400; font-size:0.8em; }

#run-cards { display:flex; flex-wrap:wrap; gap:12px; padding:10px 28px; }
.run-card { flex:1 1 380px; background:var(--panel); border-radius:10px;
  padding:12px 16px; font-size:13px; color:var(--muted); }
.run-card.good { border:1px solid #1f7a44; }
.run-card.ref  { border:1px solid #aa6a1f; }
.run-card b { color:var(--ink); }
.run-card .tag { display:inline-block; padding:2px 9px; border-radius:20px;
  font-weight:600; margin-bottom:6px; }
.run-card.good .tag { background:#12331f; color:#7df0a8; }
.run-card.ref  .tag { background:#3a2410; color:#ffce8a; }
.run-card details { margin-top:6px; }
.run-card summary { cursor:pointer; color:#ffce8a; }
.run-card .chips { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:6px; }
.run-card .chip { background:#0c0e12; padding:2px 8px; border-radius:14px;
  border:1px solid var(--line); }

.viewbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  margin:6px 28px 0; color:var(--muted); font-size:13px; }
.pills { display:inline-flex; flex-wrap:wrap; gap:6px; }
.pill { cursor:pointer; padding:3px 12px; border-radius:20px; font-size:13px;
  border:1px solid var(--line); background:var(--panel); color:var(--muted); }
.pill.on { background:#1d3a6e; border-color:var(--pq); color:var(--ink); }
.toggle { color:var(--muted); font-size:13px; }

.note { color:var(--muted); font-size:12.5px; margin:2px 28px 8px; max-width:900px; }
.note b { color:var(--ink); }

figure.tall { min-height:640px; }
figure.tall canvas { max-height:660px; }

#accel-table { margin:6px 28px 10px; overflow-x:auto; }
#accel-table table { border-collapse:collapse; font-size:12.5px; width:100%; }
#accel-table th, #accel-table td { text-align:left; padding:5px 12px;
  border-bottom:1px solid var(--line); color:var(--muted); }
#accel-table th { color:var(--ink); position:sticky; top:0; background:var(--bg); }
#accel-table td.alg { color:var(--ink); }
#accel-table .asm { color:#7df0a8; }
#accel-table .portable { color:#ffce8a; }

#absences { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:12px; padding:12px 28px; }
.absence { background:var(--panel); border:1px dashed #aa6a1f; border-radius:10px;
  padding:12px 14px; font-size:13px; color:var(--muted); }
.absence b { color:#ffce8a; }
.absence .impl { font-size:11.5px; color:var(--ink); background:#0c0e12;
  border-radius:12px; padding:1px 8px; margin-right:6px; }