/* shucky.io /radio — the same instrument panel as the terminal, one page, one job.
   Palettes are copied from the terminal's theme blocks so the switcher matches.
   No inline styles: /radio ships under style-src 'self'. */
:root{
  --bg:#0a0b0e; --bg2:#0c0e12; --panel:#101319; --panel-hd:#0d1016;
  --line:#2c303b; --line2:#3a3f4c; --edge:#4e5566; --silver:#aeb4bf; --silver-dim:#858b95;
  --fg:#d7dbe2; --muted:#787e88; --red:#e23b30; --red-dim:#7a201b;
  --red-glow:rgba(226,59,48,.55); --ok:#54b394; --warn:#d6a23f;
  --grid:rgba(255,255,255,.022); --radius:3px; --glow:none; --on-accent:#06070a;
  --mono:'IBM Plex Mono','Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
[data-theme="neo"]{ --bg:#000600; --bg2:#001004; --panel:#00140a; --panel-hd:#001108; --line:#0b3d1c; --line2:#14602e; --edge:#1c7a3c; --silver:#5eff8a; --silver-dim:#2ab857; --fg:#a6ffbe; --muted:#3a9760; --red:#00ff41; --red-dim:#0a7a2e; --red-glow:rgba(0,255,65,.6); --ok:#00ff41; --warn:#b6ff2a; --grid:rgba(0,255,65,.04); --glow:0 0 6px rgba(0,255,65,.4); --on-accent:#000600 }
[data-theme="retro"]{ --bg:#071417; --bg2:#09191d; --panel:#0e2329; --panel-hd:#0c1e23; --line:#1d4d55; --line2:#2a6f79; --edge:#2f8591; --silver:#f0d3a8; --silver-dim:#c49a6c; --fg:#fdf0dc; --muted:#a58f72; --red:#ff5f0f; --red-dim:#8a2f02; --red-glow:rgba(255,95,15,.6); --ok:#12dcc0; --warn:#ffc233; --grid:rgba(18,220,192,.045); --glow:0 0 8px var(--red-glow); --on-accent:#071417 }
[data-theme="moon"]{ --bg:#dce3ef; --bg2:#f1f4f9; --panel:#ffffff; --panel-hd:#f5f7fd; --line:#d7dfea; --line2:#c3ccda; --edge:#aab5c6; --silver:#2b3546; --silver-dim:#475369; --fg:#111827; --muted:#556071; --red:#4f46e5; --red-dim:#818cf8; --red-glow:rgba(79,70,229,.22); --ok:#047857; --warn:#b45309; --grid:rgba(49,46,129,.09); --radius:6px; --glow:none; --on-accent:#ffffff }
[data-theme="8bit"]{ --bg:#c8a877; --bg2:#e3cb98; --panel:#f7e6bf; --panel-hd:#e8cf9b; --line:#a9793f; --line2:#6f4520; --edge:#5a3616; --silver:#4d2f16; --silver-dim:#5e3f1e; --fg:#3a2312; --muted:#6e4f2a; --red:#b3332b; --red-dim:#8c2a22; --red-glow:rgba(179,51,43,.18); --ok:#1a5a1f; --warn:#874509; --grid:rgba(74,45,20,.10); --radius:0; --glow:none; --on-accent:#f7e6bf }
[data-theme="moon"] body{font-weight:500} [data-theme="8bit"] body{font-weight:700}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg) linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 28px;
  color:var(--fg);font:13px/1.55 var(--mono);min-height:100vh;padding:24px 18px 48px;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.noscript{padding:12px;background:var(--red-dim);color:#fff;text-align:center;margin-bottom:16px}
.wrap{max-width:860px;margin:0 auto}

/* header / footer (mirrors terms/privacy) */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{width:34px;height:34px;display:block;filter:drop-shadow(0 0 10px rgba(226,58,48,.35))}
.brand .t{font-size:15px;letter-spacing:.16em;font-weight:700;color:var(--silver)}
.brand .t b{color:var(--red)}
.brand .sub{font-size:10px;letter-spacing:.24em;color:var(--silver-dim);margin-top:3px}
.back{font-size:11px;letter-spacing:.12em;color:var(--silver-dim);border:1px solid var(--line2);border-radius:var(--radius);padding:7px 11px;white-space:nowrap;transition:color .15s,border-color .15s}
.back:hover{color:var(--red);border-color:var(--red-dim)}
.foot{margin-top:18px;padding:12px 6px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:10.5px;letter-spacing:.14em;color:var(--silver-dim)}
/* Three equal columns, like the terminal's footer, so the centre line is centred on
   the page rather than in whatever is left over between the links and the keys. */
.foot .fl,.foot .fc,.foot .fr{flex:1 1 0;min-width:0}
.foot .fl{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.foot .fl a{border-bottom:1px solid var(--line2)} .foot .fl a:hover{color:var(--fg)}
.foot .fc{text-align:center}
.foot .fr{display:flex;justify-content:flex-end}
@media (max-width:640px){.foot{flex-direction:column;align-items:center;text-align:center}.foot .fl{justify-content:center}.foot .fr{justify-content:center}.foot .fl,.foot .fc,.foot .fr{flex:none;width:100%}}
.themes{display:flex;gap:4px}
.themes button{width:22px;height:22px;border:1px solid var(--line2);background:var(--bg2);color:var(--silver-dim);font-size:10px;font-weight:700;cursor:pointer;border-radius:var(--radius)}
.themes button:hover{border-color:var(--silver)} .themes button.on{color:var(--on-accent);background:var(--red);border-color:var(--red)}

/* module card */
main{display:grid;gap:14px}
.mod{background:var(--panel);border:2px solid var(--edge);border-radius:var(--radius);box-shadow:inset 0 1px 0 rgba(255,255,255,.045);overflow:hidden}
.mod-hd{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--line2);background:var(--panel-hd)}
.mod-no{font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:2px 6px;border-radius:2px;background:var(--red);color:var(--on-accent);min-width:28px;text-align:center}
.mod-title{font-size:12.5px;font-weight:700;letter-spacing:.13em;flex:1}
.mod-status{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted);display:inline-block}
.dot.ok{background:var(--ok);box-shadow:0 0 6px var(--ok)} .dot.warn{background:var(--warn)} .dot.err{background:var(--red);box-shadow:0 0 6px var(--red-glow)} .dot.busy{background:var(--warn);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}
.mod-body{padding:14px} .mod-body.nopad{padding:0}

/* now playing */
.np{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.np-art{width:88px;height:88px;flex:0 0 88px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--bg2);display:flex;align-items:flex-end;justify-content:center;padding:14px 18px}
.eq{display:flex;gap:4px;align-items:flex-end;height:100%;width:100%}
.eq i{flex:1;background:var(--red);height:12%;border-radius:1px;box-shadow:var(--glow);transition:height .2s}
.eq.live i{animation:bar 1.1s ease-in-out infinite}
.eq.live i:nth-child(2){animation-delay:-.2s} .eq.live i:nth-child(3){animation-delay:-.45s} .eq.live i:nth-child(4){animation-delay:-.7s} .eq.live i:nth-child(5){animation-delay:-.9s}
@keyframes bar{0%,100%{height:15%}30%{height:90%}60%{height:40%}80%{height:70%}}
.np-meta{min-width:0;flex:1}
.np-station{font-size:10px;letter-spacing:.24em;color:var(--red);font-weight:700;margin-bottom:4px}
.np-title{font-size:18px;font-weight:700;letter-spacing:.04em;line-height:1.25;word-break:break-word}
.np-artist{color:var(--silver-dim);font-size:12px;margin-top:2px}
.np-notes{color:var(--muted);font-size:11.5px;margin-top:6px;white-space:pre-line}

/* seek + transport */
.seek{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.time{font-size:11px;color:var(--silver-dim);min-width:38px;text-align:center;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:22px;background:transparent;cursor:pointer;min-width:0}
input[type=range]:disabled{cursor:default;opacity:.5}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--line2);border-radius:2px}
input[type=range]::-moz-range-track{height:4px;background:var(--line2);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:var(--red);border:2px solid var(--panel);box-shadow:var(--glow)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid var(--panel)}
#vol{width:90px;flex:0 0 90px}
.transport{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tp-left,.tp-right{display:flex;align-items:center;gap:8px}
.tbtn{width:40px;height:40px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--bg2);color:var(--silver);cursor:pointer;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.tbtn:hover{border-color:var(--silver);color:var(--fg)}
.tbtn:disabled{opacity:.4;cursor:default}
.tbtn.big{width:56px;height:56px;font-size:22px;background:var(--red);color:var(--on-accent);border-color:var(--red);box-shadow:var(--glow)}
.tbtn.big:hover{filter:brightness(1.1);color:var(--on-accent)}
.tbtn.sm{width:32px;height:32px;font-size:14px}
.tbtn[aria-pressed="true"]{color:var(--red);border-color:var(--red)}
.keys{font-size:10px;letter-spacing:.1em;color:var(--muted);margin-top:12px;text-transform:uppercase}
@media (max-width:520px){.keys{display:none}.np-art{width:64px;height:64px;flex-basis:64px;padding:10px 12px}.np-title{font-size:15px}}

/* off air */
.offair{margin-top:14px;padding:14px;border:1px dashed var(--line2);border-radius:var(--radius);text-align:center}
.offair-l{font-size:12px;letter-spacing:.3em;color:var(--red);font-weight:700;margin-bottom:6px}
.offair p{color:var(--silver-dim);font-size:12px}

/* track list */
.tracks{list-style:none}
.tracks li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.tracks li:last-child{border-bottom:0}
.tracks li:hover{background:rgba(255,255,255,.025)}
[data-theme="moon"] .tracks li:hover,[data-theme="8bit"] .tracks li:hover{background:rgba(0,0,0,.04)}
.tracks li.on{background:rgba(226,59,48,.07)} .tracks li.on .tr-title{color:var(--red)}
.tr-no{width:26px;text-align:right;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;flex:0 0 26px}
.tr-main{flex:1;min-width:0}
.tr-title{font-weight:700;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-artist{color:var(--silver-dim);font-size:11px}
.tr-dur{color:var(--silver-dim);font-size:11px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.tr-eq{display:none;gap:2px;align-items:flex-end;height:12px;width:14px;flex:0 0 14px}
.tr-eq i{flex:1;background:var(--red);height:30%}
li.on .tr-eq{display:flex} li.on.playing .tr-eq i{animation:bar 1.1s ease-in-out infinite} li.on.playing .tr-eq i:nth-child(2){animation-delay:-.4s} li.on.playing .tr-eq i:nth-child(3){animation-delay:-.7s}
.tracks .empty{padding:18px 14px;color:var(--muted);text-align:center;cursor:default}
.tracks .empty:hover{background:transparent}