:root{color-scheme:dark;--bg:#0b1019;--surface:#151e2a;--line:#2a3546;--ink:#f1f5fb;--muted:#a5b3c8;--blue:#76a6ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}.wrap{width:min(1080px,calc(100% - 36px));margin-inline:auto}.header{border-bottom:1px solid var(--line);background:#101722}.nav{display:flex;justify-content:space-between;align-items:center;min-height:76px;gap:20px}.logo{font-size:1.35rem;font-weight:800;letter-spacing:-.04em;color:#fff}.logo span{color:var(--blue)}.logo small{margin-left:5px;color:var(--muted);font-size:.6rem;letter-spacing:.14em}.nav-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.nav-links form{margin:0}.link-btn{background:transparent;border:0;color:var(--blue);font:inherit;cursor:pointer;padding:0}.page{min-height:65vh;padding-block:56px 90px}.hero{padding-block:52px 72px;max-width:720px}.eyebrow{color:var(--blue);font-size:.75rem;font-weight:800;letter-spacing:.15em}.hero h1{font-size:clamp(3.2rem,9vw,6.5rem);line-height:1.03;letter-spacing:-.065em;margin:24px 0}.hero h1 span{color:var(--blue)}.hero p{color:var(--muted);font-size:1.2rem;max-width:590px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{background:var(--blue);color:#0b1019;display:inline-block;padding:12px 18px;border-radius:10px;border:1px solid var(--blue);font-weight:750;font:inherit;cursor:pointer;text-align:center}.button:hover{text-decoration:none;filter:brightness(1.08)}.button.outline{background:transparent;color:var(--ink);border-color:var(--line)}.button.small{padding:8px 12px}.columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.panel{border:1px solid var(--line);background:var(--surface);border-radius:15px;padding:22px}.panel h2,.panel h3{margin:0 0 8px}.panel p{margin:0}.muted{color:var(--muted)}h1{font-size:clamp(2rem,6vw,3rem);letter-spacing:-.045em;line-height:1.13;margin:12px 0}h2{letter-spacing:-.025em}.narrow{max-width:510px;margin:20px auto}.form{margin-top:26px}.form p{margin:0 0 18px}.form label{display:block;font-weight:650;margin-bottom:6px}.form input{display:block;width:100%;background:#0c131d;border:1px solid #40516a;border-radius:9px;padding:12px;color:#fff;font:inherit}.form .helptext,.form ul{display:block;font-size:.85rem;color:var(--muted);padding-left:16px}.errorlist{color:#ff9c9c!important}.heading-row,.station,.request-row{display:flex;justify-content:space-between;align-items:center;gap:15px}.stack{display:grid;gap:14px}.section-title{margin-top:40px}.request-row+.request-row{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}.pill{font-size:.8rem;background:#2a3750;padding:5px 10px;border-radius:99px}.notice{padding:14px;border-radius:10px;background:#173e36;border:1px solid #286356;margin-bottom:20px}.footer{padding:26px 0 40px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}@media(max-width:760px){.columns{grid-template-columns:1fr}.heading-row,.station{align-items:start;flex-direction:column}.nav{flex-wrap:wrap;padding-block:16px}.nav-links{gap:12px}.page{padding-top:32px}}

.station-main{min-width:0}.station-main h2{margin:4px 0 4px}.status-line{margin:12px 0 4px!important}.current-song{color:var(--ink)}.refresh-note{font-size:.85rem;margin:12px 0 0}

/* Phase 2.3: accessible, no-JavaScript language choice. */
.lang-picker{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:10px;padding:5px 7px;color:var(--muted);white-space:nowrap}
.lang-picker button{appearance:none;border:0;background:transparent;padding:3px 5px;color:var(--muted);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;border-radius:6px}
.lang-picker button[aria-current="true"]{background:#273753;color:#fff}
.lang-picker button:hover{color:var(--ink)}
.lang-picker button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Phase 2.4 control panel */
.station-actions{display:flex;align-items:flex-end;flex-direction:column;gap:10px;max-width:380px}
.control-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.control-actions .button{font-size:.83rem;padding:7px 10px}
.control-hint{font-size:.75rem;text-align:right}
.control-warning{margin:16px 0!important}
@media(max-width:760px){.station-actions{align-items:flex-start}.control-actions{justify-content:flex-start}.control-hint{text-align:left}}

/* Phase 2.4.1: identical alignment in Dutch and English, even with long labels. */
.station { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,380px); align-items:start; column-gap:28px; row-gap:20px; }
.station-main { min-width:0; overflow-wrap:anywhere; }
.station-main .current-song { overflow-wrap:anywhere; }
.station-actions { width:100%; max-width:none; min-width:0; justify-self:end; align-items:stretch; gap:12px; }
.station-actions .player-link { align-self:end; }
.control-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
.control-actions .button { display:flex; align-items:center; justify-content:center; padding:10px 7px; min-height:48px; font-size:.80rem; line-height:1.3; white-space:normal; overflow-wrap:normal; hyphens:auto; }
.control-hint { width:100%; line-height:1.45; margin:0!important; }
.lang-picker { flex-shrink:0; }
.lang-picker button { min-width:31px; text-align:center; }
.nav-links { row-gap:10px; }
.heading-row { align-items:center; }
@media (max-width:900px) {
  .station { grid-template-columns:minmax(0,1fr); }
  .station-actions { justify-self:stretch; align-items:stretch; }
  .station-actions .player-link { align-self:start; }
  .control-hint { text-align:left; }
  .heading-row { gap:20px; }
}
@media (max-width:480px) {
  .control-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .control-actions .button:last-child { grid-column:1 / -1; }
  .lang-picker { margin-block:3px; }
  .station { padding:18px; }
  .heading-row { flex-direction:column; align-items:start; }
}

/* Phase 2.6: station onboarding without changing the Phase 2.4 responsive controls. */
.primary-station-links{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.management-hint{font-size:.8rem;text-align:right;line-height:1.45}
.setup-panel{margin-top:18px;max-width:850px}
.setup-panel p+p{margin-top:12px}
.setup-steps{margin:16px 0 0;padding-left:26px}
.setup-steps li{padding:4px 0}
@media(max-width:900px){.primary-station-links{justify-content:flex-start}.management-hint{text-align:left}}

/* Phase 2.7: playlist management follows the same responsive station-card design. */
.playlist-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:25px}
.playlist-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;overflow-wrap:anywhere}
.playlist-item+.playlist-item{border-top:1px solid var(--line)}
.playlist-item .muted{font-size:.84rem}
.playlist-item .pill{flex-shrink:0}
.playlist-note{font-size:.82rem;margin-top:16px!important}
@media(max-width:800px){.playlist-grid{grid-template-columns:1fr}}