:root{
  --bg:#0b0f16; --panel:#121926; --panel2:#18233a; --line:#233049;
  --txt:#e8eefc; --muted:#93a1bd; --acc:#ff5c8a; --acc2:#37d2ff; --ok:#35d07f;
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 80% -10%,#1b2b4d 0%,transparent 60%),var(--bg);
  color:var(--txt); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
}
a{color:var(--acc2)}
.top{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;max-width:1050px;margin:0 auto;gap:12px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.logo-img{width:42px;height:42px;border-radius:11px;box-shadow:0 0 18px rgba(255,92,138,.5);flex:none}
.logo{font-size:34px}
h1{font-size:22px;margin:0;letter-spacing:.5px}
.tag{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:2px}
.nav{display:flex;align-items:center;gap:10px}
.navlink{background:var(--panel);border:1px solid var(--line);color:var(--txt);text-decoration:none;font-size:14px;padding:9px 14px;border-radius:999px;cursor:pointer}
.navlink:hover{border-color:var(--acc2)}
.navlink.install{background:linear-gradient(135deg,var(--acc2),#5ee0ff);color:#04222c;font-weight:700;border:none}
.live{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);padding:9px 13px;border-radius:999px;font-size:14px;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:#5b6b88}
.dot.on{background:var(--ok);box-shadow:0 0 0 0 rgba(53,208,127,.7);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(53,208,127,.6)}70%{box-shadow:0 0 0 10px rgba(53,208,127,0)}100%{box-shadow:0 0 0 0 rgba(53,208,127,0)}}

main{max-width:1050px;margin:0 auto;padding:0 22px 40px;display:flex;flex-direction:column;gap:18px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
h2{font-size:15px;margin:0 0 14px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);display:flex;align-items:center;gap:10px}
.count{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:1px 9px;font-size:12px;color:var(--txt)}

/* player */
.player{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cover{width:86px;height:86px;flex:none;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0b1420;display:grid;place-items:center}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .ph-mini{font-size:30px;opacity:.45}
.play{width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--acc),#ff8bb0);color:#1a0a12;display:grid;place-items:center;flex:none;box-shadow:0 8px 24px rgba(255,92,138,.45);transition:transform .15s}
.play:hover{transform:scale(1.05)}
.play svg{fill:#1a0a12}
.play .ic-pause{display:none}
.play.playing .ic-play{display:none}
.play.playing .ic-pause{display:block}
.np{flex:1;min-width:0}
.lbl2{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--acc2)}
.np-title{font-size:20px;font-weight:700;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.np-artist{color:var(--muted);font-size:14px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:5px;background:#0d1420;border-radius:99px;margin-top:12px;overflow:hidden}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width .5s linear}
.times{font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.times .sep{margin:0 5px;opacity:.6}
.times .live{color:var(--acc2)}
.vol{display:flex;align-items:center;gap:8px;flex:none}
.vol svg{fill:var(--muted)}
.vol input{accent-color:var(--acc2);width:110px}

/* listen section */
.urlrow{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.urlrow .lbl{flex:none;color:var(--muted);font-size:13px;width:78px}
.urlrow input{flex:1;min-width:0;background:#0d1420;border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--txt);font-size:14px;font-family:ui-monospace,Menlo,Consolas,monospace}
.copy{flex:none;background:#0d1420;border:1px solid var(--line);color:var(--acc2);border-radius:10px;padding:11px 14px;cursor:pointer;font-size:14px;font-weight:600}
.copy:hover{border-color:var(--acc2)}
.copy.done{color:var(--ok);border-color:#175b3c}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:#0d1420;border:1px solid var(--line);color:var(--txt);text-decoration:none;border-radius:12px;padding:11px 15px;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{border-color:var(--acc2)}
.btn b{color:var(--acc2)}

/* forms */
.row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
input[type=text],input[type=search]{flex:1;min-width:180px;background:#0d1420;border:1px solid var(--line);border-radius:10px;padding:13px 14px;color:var(--txt);font-size:16px;outline:none}
input:focus{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(55,210,255,.15)}
.results{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow:auto}
.res{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#0d1420;border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;min-width:0}
.res:hover{border-color:var(--acc2);background:#101a2c}
.res>div:first-child{flex:1;min-width:0}
.res .t{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.res .a{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res .add{color:var(--acc2);font-size:13px;flex:none}
.res .dur{color:var(--muted);font-size:12px;flex:none;margin-left:auto}
.reqform{margin-top:12px;border-top:1px dashed var(--line);padding-top:14px}
.chosen{margin-bottom:10px;color:var(--muted);font-size:14px}
.chosen strong{color:var(--txt)}
.linkbtn{background:none;border:none;color:var(--acc2);cursor:pointer;text-decoration:underline;font-size:13px}
.send{background:linear-gradient(135deg,var(--acc2),#5ee0ff);color:#04222c;border:none;border-radius:10px;padding:13px 20px;font-size:16px;font-weight:700;cursor:pointer;width:100%}
@media(min-width:520px){.send{width:auto}}
.send:hover{filter:brightness(1.08)}
.send:disabled{opacity:.5;cursor:not-allowed}
.msg{margin-top:10px;font-size:14px;min-height:18px}
.msg.ok{color:var(--ok)} .msg.err{color:var(--acc)}

/* lists */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid>*{min-width:0}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.list li{display:flex;align-items:center;gap:10px;padding:9px 11px;background:#0d1420;border:1px solid var(--line);border-radius:10px}
.list li .idx{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px;width:40px;text-align:right;flex:none}
.list li .info{min-width:0;flex:1}
.list li .t{font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list li .a{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list li .s{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;background:#0b2a1d;color:var(--ok);border:1px solid #175b3c;flex:none}
.empty{color:var(--muted);font-size:14px;padding:6px 2px}
footer{max-width:1050px;margin:0 auto;padding:0 22px 30px;color:var(--muted);font-size:13px}
footer a{color:var(--acc2)}

@media(max-width:760px){
  .grid{grid-template-columns:1fr}
  .top{padding:12px 14px;flex-wrap:wrap}
  main{padding:0 14px 30px}
  .card{padding:16px 15px}
  h1{font-size:19px}
  .tag{display:none}
  .navlink{padding:10px 13px}
  .vol input{width:74px}
  .np-title{font-size:17px}
  /* player blijft bovenaan plakken op mobiel */
  .player{position:sticky;top:6px;z-index:30;backdrop-filter:blur(6px);gap:12px}
  .player .play{width:58px;height:58px}
  .cover{width:64px;height:64px}
  .vbtns .vol{margin-left:0}
  .btn{padding:12px 14px}
  .res{padding:13px 12px}
  .urlrow .lbl{width:auto}
}
@media(max-width:430px){.urlrow{flex-wrap:wrap}.urlrow .lbl{width:100%}}
/* smalle schermen: artiestregel verbergen om ruimte te sparen */
@media(max-width:560px){.list li .a{display:none}}
@media(hover:none){.res:hover{border-color:var(--line);background:#0d1420}}

/* stemmen op het huidige nummer (onderste regel van de speler) */
.vbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex-basis:100%;margin-top:2px}
.vbtns .vol{margin-left:auto}
.play.loading{opacity:.55;pointer-events:none}
.vbtn{background:#0d1420;border:1px solid var(--line);color:var(--txt);border-radius:999px;padding:6px 12px;cursor:pointer;font-size:14px}
.vbtn:hover{border-color:var(--acc2)}
.vbtn.on{border-color:var(--ok);color:var(--ok)}
.vbtn.on.dis{border-color:var(--acc);color:var(--acc)}

/* eigen verzoekje */
.myreq{background:#101a2c;border:1px solid var(--line);border-left:3px solid var(--acc2);border-radius:8px;padding:9px 12px;margin-bottom:10px;font-size:14px}
.myreq.playing{border-left-color:var(--ok)}

/* chat */
.chatlist{list-style:none;margin:0 0 12px;padding:0;max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.chatlist li{background:#0d1420;border:1px solid var(--line);border-radius:10px;padding:8px 11px}
.chatlist .who{font-weight:700;color:var(--acc2);margin-right:6px}
.chatlist .tm{color:var(--muted);font-size:11px;float:right}
.chatlist .tx{color:#c7d3ea;font-size:14px;word-break:break-word}
.chatlist li.mine{border-color:#175b3c}
.chatform{display:flex;gap:8px}
.chatform input{flex:1}
@media(max-width:560px){.chatform{flex-wrap:wrap}.chatform .send{width:100%}}

/* meldingen */
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:100;max-width:min(92vw,360px)}
.toast{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-left:3px solid var(--acc2);border-radius:12px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.45);font-size:14px;animation:slidein .25s ease}
.toast.ok{border-left-color:var(--ok)}
@keyframes slidein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* chat-reacties */
.rrow{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:6px}
.rchip{background:#0b1420;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:12px;cursor:pointer;color:var(--txt)}
.rchip.on{border-color:var(--acc2);background:#10202e}
.radd{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0 4px}
.radd:hover{color:var(--acc2)}
.rpick{display:none;gap:2px}
.rrow.open .rpick{display:inline-flex}
.rbtn{background:none;border:none;cursor:pointer;font-size:15px;padding:0 2px;filter:grayscale(.3);transition:transform .1s}
.rbtn:hover{filter:none;transform:scale(1.2)}

/* skip-knop */
.vbtn.skip{border-color:#2b3a55}
.vbtn.skip:hover{border-color:var(--acc2);color:var(--acc2)}
.vbtn.skip.on{border-color:var(--acc2);color:var(--acc2);background:#10202e}
.vbtn:disabled{opacity:.45;cursor:not-allowed}

/* streamkwaliteit-keuze */
.qsel{background:#0d1420;border:1px solid var(--line);color:var(--txt);border-radius:999px;padding:7px 10px;font-size:13px;cursor:pointer}
.qsel:hover{border-color:var(--acc2)}

/* taal-schakelaar */
.lang{display:flex;gap:6px;align-items:center}
.lang button{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:5px 11px;font-size:13px;cursor:pointer}
.lang button.on{background:linear-gradient(135deg,var(--acc2),#5ee0ff);color:#04222c;border:none;font-weight:700}

/* casten (Chromecast / AirPlay) */.vbtn.cast{display:inline-flex;align-items:center;gap:6px}
.vbtn.cast svg{fill:currentColor}
.vbtn.cast .castlbl{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbtn.cast:hover{border-color:var(--acc2);color:var(--acc2)}
.vbtn.cast.on{border-color:var(--ok);color:var(--ok)}
.castlist{margin:0;padding-left:20px;line-height:1.7;font-size:14px;color:var(--muted)}
.castlist li{margin-bottom:4px}
.castlist b{color:var(--txt)}

.castmsg{color:var(--acc2);font-size:13px;line-height:1.5;margin:0 0 10px}
.castmsg:empty{display:none}

/* ---- kerstthema (body.xmas) ---- */
body.xmas{
  --bg:#12080c; --panel:#241016; --panel2:#31141c; --line:#4a1f2a;
  --txt:#fff2e8; --muted:#c9a3ab; --acc:#e2374a; --acc2:#ffcf5c; --ok:#35d07f;
  background:radial-gradient(1000px 520px at 78% -10%,#5e1a26 0%,transparent 60%),
             radial-gradient(800px 420px at 10% 110%,#123a26 0%,transparent 62%),var(--bg);
}
body.xmas .tag{color:var(--acc2)}
body.xmas .bar-fill{background:linear-gradient(90deg,var(--acc2),var(--acc))}
body.xmas .play{background:linear-gradient(135deg,var(--acc),#ff8b6f);box-shadow:0 8px 24px rgba(226,55,74,.5)}
body.xmas .play svg{fill:#2a0409}

/* ---- kerst-schakelaar ---- */
.xmasbtn{display:inline-flex;align-items:center;gap:6px;border-color:#2b3a55}
.xmasbtn .xmason2{display:none}
.xmasbtn:hover{border-color:var(--acc2);color:var(--acc2)}
.xmasbtn.on{border-color:var(--acc2);color:var(--acc2);background:#2a1017}
.xmasbtn.on .xmason{display:none}
.xmasbtn.on .xmason2{display:inline}

/* ---- zenderschakelaar ---- */
.stations{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.sbtn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 14px;font-size:14px;cursor:pointer}
.sbtn:hover{border-color:var(--acc2);color:var(--txt)}
.sbtn.on{background:linear-gradient(135deg,var(--acc2),#5ee0ff);color:#04222c;border:none;font-weight:700}
body.xmas .sbtn.on{background:linear-gradient(135deg,var(--acc2),var(--acc));color:#2a0409}
body.sinterklaas .sbtn.on{background:linear-gradient(135deg,#f5a623,#e2374a);color:#2a1500}
body.piraten .sbtn.on{background:linear-gradient(135deg,#35d07f,#1f7a4d);color:#04220f}

/* ---- voettekst ---- */
footer{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
footer .copy{color:var(--muted);font-size:13px}

/* ---- Sinterklaas-thema ---- */
body.sinterklaas{
  --bg:#140d05; --panel:#241705; --panel2:#33210a; --line:#5a3d12;
  --txt:#fff6e6; --muted:#d8b57e; --acc:#e2374a; --acc2:#f5a623; --ok:#35d07f;
  background:radial-gradient(1000px 520px at 78% -10%,#5e3a10 0%,transparent 60%),
             radial-gradient(800px 420px at 10% 110%,#2a1405 0%,transparent 62%),var(--bg);
}
body.sinterklaas .tag{color:var(--acc2)}
body.sinterklaas .bar-fill{background:linear-gradient(90deg,var(--acc2),var(--acc))}
body.sinterklaas .play{background:linear-gradient(135deg,#f5a623,#e2374a);box-shadow:0 8px 24px rgba(245,166,35,.5)}
body.sinterklaas .play svg{fill:#2a1500}

/* ---- Piraten-thema ---- */
body.piraten{
  --bg:#04120e; --panel:#08201a; --panel2:#0b2a22; --line:#12463a;
  --txt:#eafff5; --muted:#8fc9b6; --acc:#35d07f; --acc2:#3fd6c7; --ok:#35d07f;
  background:radial-gradient(1000px 520px at 78% -10%,#0c3b2e 0%,transparent 60%),
             radial-gradient(800px 420px at 10% 110%,#06231c 0%,transparent 62%),var(--bg);
}
body.piraten .tag{color:var(--acc2)}
body.piraten .bar-fill{background:linear-gradient(90deg,var(--acc2),var(--acc))}
body.piraten .play{background:linear-gradient(135deg,#35d07f,#3fd6c7);box-shadow:0 8px 24px rgba(53,208,127,.5)}
body.piraten .play svg{fill:#04220f}