:root { color-scheme: dark; --bg:#0b1120; --card:#131c31; --line:#25324f; --text:#e6ebf5; --sub:#93a0bb; --orange:#ff8a3d; --teal:#2dd4bf; --red:#f0655a; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); }
h1 { margin:0; font-size:20px; letter-spacing:.3px; }
h1::before { content:""; display:inline-block; width:10px; height:10px; margin-right:10px; border-radius:2px; background:var(--orange); }
h2 { margin:0 0 10px; font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--sub); }
h3 { margin:14px 0 8px; font-size:13px; color:var(--sub); }
main { max-width:760px; margin:0 auto; padding:16px; display:grid; gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
.title { margin:0; font-size:20px; font-weight:600; overflow-wrap:anywhere; }
.sub { margin:4px 0 0; color:var(--sub); font-size:14px; overflow-wrap:anywhere; }
.error { color:var(--red); }
.banner { margin:0; padding:10px 14px; border-radius:10px; background:#3a2a12; border:1px solid #6b4a1a; color:#ffd9a3; }
.row { display:flex; align-items:center; gap:10px; margin-top:12px; }
.row.wrap { flex-wrap:wrap; }
button { font:inherit; padding:8px 14px; border-radius:8px; border:1px solid var(--line); background:#1b2745; color:var(--text); cursor:pointer; }
button:hover { border-color:var(--teal); }
button:focus-visible, input:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
button.danger { border-color:#6b2f2a; }
button.danger:hover { border-color:var(--red); }
button.quiet { background:transparent; }
button[type=submit] { background:var(--orange); border-color:var(--orange); color:#1a0f05; font-weight:600; }
input[type=text] { flex:1; min-width:0; font:inherit; padding:9px 12px; border-radius:8px; border:1px solid var(--line); background:#0d1528; color:var(--text); }
input[type=range] { flex:1; accent-color:var(--teal); }
label { color:var(--sub); font-size:14px; }
#login-form { display:grid; gap:10px; max-width:320px; }
#code { text-transform:uppercase; letter-spacing:.2em; font-size:20px; text-align:center; }
.progress { height:6px; margin-top:12px; border-radius:3px; background:#0d1528; overflow:hidden; }
.progress > div { height:100%; width:0; background:var(--teal); }
ol, ul { margin:0; padding:0; list-style:none; }
#queue li, #playlists li { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
#queue li:first-child, #playlists li:first-child { border-top:0; }
#queue .n { color:var(--sub); width:2em; text-align:right; flex:none; }
#queue .t, #playlists .t { flex:1; min-width:0; overflow-wrap:anywhere; }
.log { max-height:200px; overflow:auto; font-size:14px; color:var(--sub); }
.log li { padding:3px 0; }
.tabs { display:flex; gap:8px; }
.tab { background:transparent; }
.tab.active { border-color:var(--orange); color:var(--orange); }
.tab-body { display:grid; gap:14px; }
select { font:inherit; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:#0d1528; color:var(--text); }
pre.output, pre.logs { margin:12px 0 0; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background:#0d1528; color:var(--text); font:12.5px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space:pre-wrap; overflow-wrap:anywhere; overflow:auto; }
pre.output { max-height:220px; }
pre.logs { max-height:380px; }
#cogs li, #channels li { display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
#cogs li:first-child, #channels li:first-child { border-top:0; }
#cogs .t, #channels .t { flex:1; min-width:0; overflow-wrap:anywhere; }
#station-editor li { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line); }
#station-editor li:first-child { border-top:0; }
#station-editor .n { color:var(--sub); width:2em; text-align:right; flex:none; }
#station-editor .st-name { flex:1 1 160px; }
#station-editor .st-url { flex:3 1 260px; }
button:disabled { opacity:.5; cursor:default; }
button:disabled:hover { border-color:var(--line); }
[hidden] { display:none !important; }
@media (max-width:520px) { .row { flex-wrap:wrap; } }