:root { color-scheme: dark; --bg:#111418; --card:#1b2027; --fg:#e6e9ee; --mut:#8b95a3; --acc:#3b82f6; --err:#f87171; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,sans-serif; }
header { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--card); }
header h1 { font-size:18px; margin:0; flex:1; }
main { max-width:900px; margin:0 auto; padding:16px; }
[hidden] { display:none !important; }
input, button { font:inherit; padding:8px 12px; border-radius:6px; border:1px solid #333b46; background:#232932; color:var(--fg); }
button { cursor:pointer; background:var(--acc); border-color:var(--acc); }
header button, #stop { background:#232932; border-color:#333b46; }
#login { display:grid; gap:10px; max-width:320px; margin:40px auto; }
#ver { color:var(--mut); font-size:12px; font-weight:normal; }
.muted { color:var(--mut); font-size:13px; margin:0 0 8px; }
.err { color:var(--err); margin:0; min-height:1.4em; }
video { width:100%; background:#000; border-radius:8px; max-height:60vh; }
.bar { display:flex; align-items:center; gap:12px; padding:8px 0; color:var(--mut); }
.bar #now { flex:1; }
#cast, #cast.on { background:#232932; border-color:#333b46; }
#cast.on { color:var(--acc); border-color:var(--acc); }
#channels { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; }
#channels button { width:100%; text-align:left; background:var(--card); border-color:#2a313b; display:flex; gap:8px; }
#channels button:hover, #channels button.on { border-color:var(--acc); }
.num { color:var(--mut); min-width:3.2em; }
.hd { margin-left:auto; color:var(--acc); font-size:12px; align-self:center; }