:root { --bg:#0f1419; --panel:#171d24; --border:#2a333d; --text:#e6edf3; --muted:#8b98a5; --accent:#3b9eff; --ok:#3fb950; --warn:#d29922; --err:#f85149;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--text); }
.hidden { display:none !important; }
.screen { min-height:100%; }
#join { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; gap:14px; }
#join h1 { margin:0; font-size:28px; }
.sub { color:var(--muted); margin:0 0 10px; }
.hint { margin:6px 0; font-size:15px; line-height:1.4; }
.dim { color:var(--muted); font-size:14px; }
.lang-btn { width:100%; max-width:360px; padding:18px; font-size:22px; border-radius:14px; border:2px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; display:flex; flex-direction:column; gap:4px; align-items:center; }
.lang-btn small { font-size:13px; color:var(--muted); }
.lang-btn:active { border-color:var(--accent); }
#live { display:flex; flex-direction:column; height:100dvh; }
header { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--border); position:sticky; top:0; }
#title { flex:1; font-weight:600; font-size:15px; }
.pill { font-size:12px; padding:3px 9px; border-radius:10px; background:#232c36; color:var(--muted); white-space:nowrap; }
.pill.ok { color:var(--ok); } .pill.err { color:var(--err); } .pill.warn { color:var(--warn); } .pill.live { color:#fff; background:var(--err); }
button.icon { background:transparent; border:1px solid var(--border); color:var(--text); border-radius:8px; font-size:18px; padding:4px 8px; cursor:pointer; }
button.icon.off { opacity:.4; }
.banner { padding:10px 14px; background:#2a2416; color:var(--warn); font-size:14px; text-align:center; border-bottom:1px solid var(--border); }
.banner.info { background:#14232f; color:var(--accent); }
main { flex:1; overflow-y:auto; padding:12px 14px 80px; -webkit-overflow-scrolling:touch; }
:root { --spk0:#3b9eff; --spk1:#f0883e; }
.row { padding:10px 0 12px 12px; border-bottom:1px solid var(--border); border-left:4px solid var(--border); margin-left:-14px; padding-left:22px; }
.row.spk0 { border-left-color:var(--spk0); } .row.spk1 { border-left-color:var(--spk1); }
.row .spk { display:flex; align-items:center; gap:10px; margin-bottom:6px; font-size:12px; color:var(--muted); }
.row .spk .mic { font-weight:700; font-size:13px; padding:2px 9px; border-radius:10px; color:#fff; }
.row.spk0 .spk .mic { background:var(--spk0); } .row.spk1 .spk .mic { background:var(--spk1); }
.speaking.spk0 { border-color:var(--spk0); } .speaking.spk1 { border-color:var(--spk1); }
.speaking.spk0::before { color:var(--spk0); } .speaking.spk1::before { color:var(--spk1); }
.row .trans { font-size:22px; line-height:1.35; }
.row .trans.pending { color:var(--muted); font-style:italic; font-size:16px; }
.row .orig { color:var(--muted); font-size:13px; margin-top:6px; }
.row .meta { display:flex; gap:10px; align-items:center; margin-top:6px; font-size:12px; color:var(--muted); }
.row .meta button { background:#232c36; border:1px solid var(--border); color:var(--text); border-radius:6px; padding:3px 10px; font-size:13px; cursor:pointer; }
.row.playing .trans { color:#fff; }
.row.playing .meta button { border-color:var(--ok); color:var(--ok); }
.speaking { position:fixed; bottom:14px; left:14px; right:14px; padding:10px 14px; background:var(--panel); border:1px solid var(--border); border-radius:10px; font-size:14px; color:var(--muted); font-style:italic; box-shadow:0 4px 20px rgba(0,0,0,.4); }
.speaking::before { content:"● "; color:var(--err); }
.jump { position:fixed; right:16px; bottom:70px; width:44px; height:44px; border-radius:22px; border:none; background:var(--accent); color:#fff; font-size:22px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.4); }
.empty { color:var(--muted); text-align:center; padding:40px 10px; font-size:16px; line-height:1.5; }