:root{--bg:#0d0f12;--panel:#151920;--panel2:#1b2029;--line:#262c37;--text:#e8e6e1;--muted:#8d95a3;--accent:#ff6a3d;--accent2:#ffb347;--live:#ff3b3b;--ok:#3ddc97;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1200px 600px at 20% -10%,#1d2430 0%,var(--bg) 60%) fixed,var(--bg);color:var(--text);min-height:100%}
a{color:var(--accent2)}
button{font:inherit;color:inherit;cursor:pointer}
.radio{max-width:760px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 18px 28px;display:flex;flex-direction:column;gap:18px}
.top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:44px;height:44px;border-radius:12px;background:url(/icon.svg) center/cover;box-shadow:0 0 0 1px var(--line),0 6px 20px #ff6a3d33}
h1{font-size:20px;margin:0;letter-spacing:.3px}
.tagline{margin:2px 0 0;color:var(--muted);font-size:13px}
.modes{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px}
.tab{background:none;border:0;padding:8px 14px;border-radius:999px;color:var(--muted);font-weight:600;font-size:14px;display:flex;align-items:center;gap:7px}
.tab.active{background:var(--panel2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.tab .dot{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}
.deck{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 20px 60px #0008}
.status-row{display:flex;justify-content:space-between;align-items:center}
.badge{font-size:11px;font-weight:800;letter-spacing:1.5px;padding:4px 9px;border-radius:6px;border:1px solid}
.badge.live{color:var(--live);border-color:#ff3b3b66;background:#ff3b3b14}
.badge.behind{color:var(--accent2);border-color:#ffb34766;background:#ffb34714}
.badge.random{color:var(--ok);border-color:#3ddc9766;background:#3ddc9714}
.clock{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}
.ep-num{margin-top:16px;font:800 54px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--accent);text-shadow:0 0 24px #ff6a3d44;letter-spacing:-1px}
.ep-title{margin:8px 0 6px;font-size:26px;line-height:1.2}
.ep-meta{display:flex;gap:14px;align-items:center;color:var(--muted);font-size:14px;flex-wrap:wrap}
.notes{text-decoration:none;border:1px solid var(--line);padding:3px 10px;border-radius:999px;font-size:13px}
.notes:hover{border-color:var(--accent2)}
.transport{display:flex;gap:16px;align-items:center;margin-top:22px}
.play{flex:none;width:68px;height:68px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;box-shadow:0 8px 24px #ff6a3d55;position:relative}
.play:disabled{opacity:.5;cursor:default}
.play svg{width:30px;height:30px;fill:#1a0d06;grid-area:1/1}
.play .i-pause,.play.playing .i-play{display:none}.play.playing .i-pause{display:block}
.play .spinner{grid-area:1/1;width:76px;height:76px;border-radius:50%;border:3px solid transparent;border-top-color:var(--accent2);position:absolute;inset:-4px;animation:spin 1s linear infinite;display:none}
.play.loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{flex:1;min-width:0}
input[type=range]{width:100%;accent-color:var(--accent);height:22px;background:transparent}
.times{display:flex;justify-content:space-between;color:var(--muted);font:13px ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.pill{border:1px solid var(--line);background:var(--panel);padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px}
.pill.accent{border-color:#ff6a3d88;background:#ff6a3d1c;color:#ffd2c2}
.pill.accent:hover{background:#ff6a3d33}
.pill.ghost{color:var(--muted)}
.pill.big{font-size:17px;padding:12px 22px}
.vol{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--muted);width:150px}
.hint{color:var(--muted);font-size:13px;margin:12px 0 0;min-height:1em}
.next,.random-cta{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 20px}
.next h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted)}
.next ol{list-style:none;margin:0;padding:0}
.next li{display:grid;grid-template-columns:62px 1fr auto;gap:10px;padding:9px 0;border-top:1px solid var(--line);align-items:baseline}
.next li:first-child{border-top:0}
.next .n{font-family:ui-monospace,Menlo,monospace;color:var(--accent)}
.next .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.next .w{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.random-cta p{color:var(--muted);margin:0 0 12px}
.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px;padding:0 4px}
[hidden]{display:none!important}
@media (max-width:560px){.ep-num{font-size:42px}.ep-title{font-size:21px}.deck{padding:18px}.vol{width:100%;margin-left:0}.top{flex-direction:column;align-items:stretch}.modes{justify-content:stretch}.tab{flex:1;justify-content:center}}