:root{
  --bg:#f6f7f9; --card:#fff; --ink:#1a1d21; --muted:#5b6470; --line:#e3e7ec;
  --accent:#2d6cdf; --accent-soft:#eaf1fd; --good:#1f9d55; --good-soft:#e7f6ee;
  --warn:#b7791f; --warn-soft:#fbf3e2; --danger:#c0392b; --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14171a; --card:#1d2126; --ink:#e9edf2; --muted:#9aa4b0; --line:#2b3138;
    --accent:#5b93f5; --accent-soft:#1c2941; --good:#4ac47e; --good-soft:#12301f;
    --warn:#e0a94a; --warn-soft:#332711; --danger:#e57368;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:20px 16px;}
.wrap{max-width:760px;margin:0 auto}
h1{font-size:1.4rem;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}
select,button{font:inherit}
select{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
button{cursor:pointer;border:none;border-radius:10px;padding:12px 18px;font-weight:600}
.btn-primary{background:var(--accent);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
button:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{display:inline-block;font-size:.72rem;padding:2px 8px;border-radius:999px;font-weight:600}
.tA{background:var(--good-soft);color:var(--good)} .tB{background:var(--good-soft);color:var(--good)}
.tC{background:var(--warn-soft);color:var(--warn)} .tD{background:var(--warn-soft);color:var(--warn)}
.tE{background:var(--warn-soft);color:var(--warn)} .tX{background:var(--warn-soft);color:var(--warn)}
.beta{background:var(--warn-soft);color:var(--warn);font-size:.72rem;padding:2px 8px;border-radius:999px;margin-left:6px}
.roomcode{font-size:2rem;font-weight:800;letter-spacing:.15em;font-family:ui-monospace,Menlo,monospace}
.stat{font-variant-numeric:tabular-nums}
#qr{margin-top:10px}
.sub-orig{color:var(--muted);font-size:.85rem}
.seg{padding:10px 0;border-bottom:1px solid var(--line)}
.seg .t{font-size:1.15rem}
.transcript{max-height:40vh;overflow:auto}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--danger)}
.dot.live{background:var(--good);animation:p 1.4s infinite}
@keyframes p{0%,100%{opacity:1}50%{opacity:.3}}
.banner{background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn);border-radius:10px;padding:8px 12px;font-size:.82rem;margin-bottom:14px}
a{color:var(--accent)}