:root { color-scheme: light dark; --bg:#eceff1; --panel:#fff; --fg:#1f2328; --muted:#6b7280; --line:#d0d7de; --live:#c62828; }
@media (prefers-color-scheme: dark) { :root { --bg:#16181b; --panel:#212429; --fg:#e8e8ea; --muted:#9aa0a6; --line:#34383e; } }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:13px/1.4 system-ui, sans-serif; }
#app { display:flex; flex-direction:column; height:100%; }
.bar { display:flex; align-items:center; gap:12px; padding:6px 12px; background:var(--panel); border-bottom:1px solid var(--line); min-height:32px; flex-wrap:wrap; }
.pill { font-size:12px; padding:2px 10px; border-radius:999px; background:var(--line); white-space:nowrap; }
.pill.live { background:var(--live); color:#fff; }
.pill.live::before { content:"● "; }
.pill.reconnecting, .pill.connecting, .pill.waiting, .pill.paused { background:#fbbf24; color:#111; }
.pill.offline { background:#9e9e9e; color:#fff; }
.pill.ended { background:#455a64; color:#fff; }
.pill.error { background:#6d4c41; color:#fff; }
.url { flex:1; min-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:inherit; }
.meta { color:var(--muted); white-space:nowrap; }
#latency.warn { color:#b26a00; } #latency.bad { color:#c62828; font-weight:600; }
.tag { font-size:11px; padding:1px 6px; border-radius:4px; background:#fbbf24; color:#111; }
button, select { font:inherit; background:transparent; color:inherit; border:1px solid var(--line); border-radius:6px; padding:3px 8px; cursor:pointer; }
.warn-btn { color:#b26a00; border-color:#b26a00; }
.zoom { display:flex; align-items:center; gap:6px; color:var(--muted); }
.limits { background:#fff8e1; color:#5d4037; padding:8px 16px; border-bottom:1px solid var(--line); }
.limits ul { margin:4px 0 0; padding-left:18px; }
#stage-wrap { position:relative; flex:1; overflow:auto; padding:8px; }
#sizer { position:relative; margin:0 auto; }
#stage { position:absolute; left:0; top:0; transform-origin:0 0; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.25); overflow:hidden; }
#stage .replayer-wrapper { position:relative; }
#stage iframe { border:0; display:block; pointer-events:none; }
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; font-size:16px; background:var(--bg); z-index:5; }
.overlay.soft { background:rgba(0,0,0,.45); color:#fff; }
.overlay[hidden] { display:none; }
.toast { position:absolute; left:50%; top:16px; transform:translateX(-50%); background:rgba(0,0,0,.75); color:#fff; padding:6px 14px; border-radius:6px; z-index:6; max-width:80%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:fullscreen .bar { opacity:.9; }
.sound-btn.off { background:#fbbf24; color:#111; border-color:#f59e0b; font-weight:600; }