:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c232d; --line:#2d3644;
  --ink:#e6edf3; --dim:#9aa7b4; --acc:#3b82f6;
  --pass:#1f9d55; --freeze:#c2410c; --fail:#b91c1c; --partial:#a16207; --unknown:#4b5563; --running:#2563eb;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
h1{font-size:22px;margin:0}
h2{font-size:18px;margin:0 0 12px}
h3{font-size:14px;margin:16px 0 6px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.sub{color:var(--dim);font-size:13px;margin-top:4px}
.hint{color:var(--dim);font-weight:400;font-size:12px}
.muted{color:var(--dim)}

.top{position:sticky;top:0;z-index:50;background:#0a0e14ee;backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);padding:12px 20px}
.top-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;max-width:1400px;margin:0 auto}
.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mutelbl{color:var(--dim);font-size:13px;display:flex;gap:6px;align-items:center}
.run-banner{max-width:1400px;margin:10px auto 0;color:var(--ink);background:#11213b;border:1px solid #1e3a63;
  padding:8px 12px;border-radius:8px;font-size:14px}

main{max-width:1400px;margin:0 auto;padding:20px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:20px}

.btn{background:#21262d;color:var(--ink);border:1px solid var(--line);border-radius:8px;
  padding:7px 12px;font-size:13px;cursor:pointer}
.btn:hover{border-color:#3d4859}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.big{font-size:16px;padding:11px 18px;font-weight:600}
.btn.ghost{background:transparent}

/* summary */
.summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px}
.srow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.slabel{font-size:13px;font-weight:600;letter-spacing:.02em}
.frame-quality-line{margin-top:12px;color:var(--dim);font-size:13px;font-family:ui-monospace,Menlo,monospace}
.legend{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:var(--dim);font-size:12px}

.badge{display:inline-block;min-width:70px;text-align:center;padding:4px 10px;border-radius:999px;
  font-weight:700;font-size:12px;letter-spacing:.04em;color:#fff;background:var(--unknown)}
.badge.pass{background:var(--pass)} .badge.freeze{background:var(--freeze)}
.badge.fail{background:var(--fail)} .badge.partial{background:var(--partial)}
.badge.unknown{background:var(--unknown)} .badge.running{background:var(--running)}
.big{font-size:15px}

/* feature tables */
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;max-width:520px}
.kv .ok{color:#3fb950;font-weight:700} .kv .bad{color:#f85149;font-weight:700}
.ftable{border-collapse:collapse;width:100%;margin-top:6px;font-size:13px}
.ftable th,.ftable td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.ftable th{background:var(--panel2);color:var(--dim);font-weight:600}
.ftable td.ok{color:#3fb950} .ftable td.bad{color:#f85149}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:16px}
.tile{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px}
.tile-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.tile-title{font-weight:700;font-size:14px}
.casetag{color:var(--dim);font-size:12px;font-weight:600}
.tile-desc{color:var(--dim);font-size:12.5px}
.tile-video{width:100%;aspect-ratio:16/9;background:#000;border-radius:6px;max-height:340px;object-fit:contain}
.tile-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tile-controls.wrap{gap:6px}
.file-note{color:var(--dim);font-size:11px;margin-left:auto;font-family:ui-monospace,monospace}
.sep{color:var(--dim);font-size:12px;margin-left:6px}

.interp{font-size:13px;background:#12171f;border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.interp .det{color:var(--dim);margin-top:4px}
.interp .metrics{margin-top:6px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#7fd1ff}
.interp .play-msg{margin-top:4px;font-size:12px;color:#c9a227}
.interp .ok{color:#3fb950;font-weight:700} .interp .bad{color:#f85149;font-weight:700}
.casebadge{background:#3a2a12;color:#e3b341;border:1px solid #5a3d16;border-radius:6px;padding:1px 6px;font-size:11px}

.tele-wrap{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#0e131a}
.telemetry{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:8px 10px;
  font-family:ui-monospace,Menlo,monospace;font-size:11.5px}
.telemetry .tk{color:var(--dim)} .telemetry .tk.hdr{color:#5a6b7d;margin-top:4px;font-weight:700}
.telemetry .tv{color:var(--ink);word-break:break-all}

details{font-size:12px;color:var(--dim)} summary{cursor:pointer;padding:2px 0}
.steplog,.eventlog{font-family:ui-monospace,Menlo,monospace;font-size:11px;max-height:150px;overflow:auto;
  background:#0e131a;border:1px solid var(--line);border-radius:6px;padding:6px 8px;margin-top:4px}
.steplog div,.eventlog div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.seek-readout{font-size:12.5px;background:#12171f;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.avail{font-family:ui-monospace,monospace;font-size:12px;color:var(--dim)}

.range-out{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.range-row{font-family:ui-monospace,Menlo,monospace;font-size:12px;padding:6px 8px;border-radius:6px;background:#0e131a;border:1px solid var(--line)}
.range-row.ok{border-color:#1f6f3f} .range-row.bad{border-color:#7d2b2b}

.netlog{font-family:ui-monospace,Menlo,monospace;font-size:12px;max-height:280px;overflow:auto;
  background:#0e131a;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.netrow{white-space:pre;color:var(--dim)}