:root{
  --fs:1;
  --bg:#0f0f11; --panel:#17171a; --panel-2:#1f1f23; --line:#2a2a2f;
  --text:#ececf0; --muted:#9a9aa3; --accent:#f5a623; --accent-2:#ffd27a; --accent-deep:#7a3d00; --accent-dark:#b8650a; --accent-pale:#ffe2a8;
  /* the same accents as r,g,b for rgba(); Settings → Theme colour overrides all of these from app.js (applyTheme) */
  --acc-rgb:245,166,35; --acc2-rgb:255,210,122;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --player-h:calc(100px + var(--safe-b));
  --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--accent-2);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* Everything the browser draws itself (scrollbars, form controls, date pickers…) uses its dark version */
:root{color-scheme:dark}
/* Scrollbars: thin, dark track, warm thumb, on every scrolling box */
*{scrollbar-width:thin;scrollbar-color:#4a4038 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#3d3630;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#6b5a44;background-clip:padding-box}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
body{background:var(--bg);color:var(--text);font:calc(15px*var(--fs))/1.5 var(--f-ui);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;overflow:hidden}
@supports (height:100dvh){ html,body{height:100dvh} }
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--accent-2)}
[hidden]{display:none!important}
svg{width:18px;height:18px;fill:currentColor;flex:none}
:focus{outline:none}
:focus-visible{box-shadow:var(--focus);border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--on-accent,#1a1200);padding:8px 14px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.app{display:grid;grid-template-columns:260px 1fr;height:calc(100% - var(--player-h))}

/* Sidebar */
.side{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:24px 14px;display:flex;flex-direction:column}
/* ---------- ERP brand (shapes live once in the inline sprite at the top of <body>) ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.brand{display:flex;flex-direction:column;gap:10px;padding:2px 10px 24px;text-decoration:none;color:inherit;border-radius:10px}
.brand .logo-full{width:100%;max-width:214px;height:auto;display:block}
/* Sidebar logo is one image (assets/img/brand/sidebar-logo.png, source: sidebar-logo.psd), 1130x299 with a
   30 px transparent margin for effects; the margin is pulled back so the artwork lines up with the text. */
.brand .logo-img{width:calc(100% + 12px);max-width:226px;margin:-6px}
.brand .logo-full .w{fill:var(--text)}
.brand .logo-sym{display:none}
.brand-live{display:flex;align-items:center;gap:8px;padding-left:1px}
.live-tag{font-size:calc(10.5px*var(--fs));font-weight:700;letter-spacing:.18em;color:var(--on-accent,#1a1200);background:linear-gradient(135deg,var(--accent-2),var(--accent));padding:2px 7px 2px 9px;border-radius:4px}
.brand small{color:var(--muted);font-size:calc(12px*var(--fs));letter-spacing:.02em}
/* Home button under the logo, on the gear's line (replaces the old "LIVE · Concert recordings" tagline) */
.home-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 11px;margin:-10px 10px 20px;border-radius:999px;border:1px solid var(--line);background:rgba(23,23,26,.6);color:var(--muted);font-weight:600;font-size:calc(13px*var(--fs));text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.home-btn svg{width:16px;height:16px;fill:currentColor}
.home-btn:hover{color:var(--accent);border-color:var(--accent)}
.home-btn[aria-current="page"]{color:var(--accent-2);border-color:rgba(var(--acc-rgb),.55);background:rgba(var(--acc-rgb),.12)}
/* Hero: a large detail of the spiral, cut off by the hero's edge */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero > :not(.hero-cut){position:relative;z-index:1}
.hero-cut{position:absolute;z-index:0;right:-14%;top:-38%;width:min(780px,72%);height:auto;transform:rotate(-9deg);pointer-events:none}
.hero-cut .f{opacity:.05}
.hero-cut .s{opacity:.28}
/* Player bar: the spiral as "artwork" for the current recording */
.art{flex:none;width:52px;height:52px;border-radius:11px;background:radial-gradient(circle at 35% 30%,#2b241d,#141416 72%);border:1px solid rgba(255,255,255,.07);display:grid;place-items:center;transition:border-color .3s,box-shadow .3s}
.art svg{width:38px;height:auto}
.player.is-playing .art{border-color:rgba(var(--acc-rgb),.45);box-shadow:0 0 18px rgba(var(--acc-rgb),.18)}
.side h2{font-size:calc(11px*var(--fs));font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:6px 10px 10px}
.cats{display:flex;flex-direction:column}
.cat{display:flex;justify-content:space-between;align-items:center;width:100%;padding:9px 12px;border-radius:8px;text-align:left;color:#cfcfd6;transition:background .15s,color .15s}
.cat:hover{background:var(--panel-2);color:#fff}
.cat.active{background:rgba(var(--acc-rgb),.12);color:var(--accent)}
.cat .n{font-size:calc(12px*var(--fs));color:var(--muted)}
.cat.active .n{color:var(--accent)}
.searching .cat.active{background:none;color:#cfcfd6}
.searching .cat.active .n{color:var(--muted)}
/* ERP Radio station card: shows what's actually on air, with the concert's progress */
.side > *{flex-shrink:0}
.station{position:relative;display:flex;flex-direction:column;gap:7px;width:100%;margin:0 0 20px;padding:12px 14px 13px;border-radius:12px;overflow:hidden;text-align:left;isolation:isolate;
  background:linear-gradient(155deg,rgba(var(--acc-rgb),.14),rgba(var(--acc-rgb),.025) 58%),var(--panel-2);border:1px solid rgba(var(--acc-rgb),.2);transition:border-color .2s,box-shadow .2s}
.station::after{content:"";position:absolute;z-index:-1;right:-38px;top:-22px;width:128px;aspect-ratio:558/290;background:url(../img/brand/erp-mark.svg) no-repeat center/contain;opacity:.13;transform:rotate(-9deg);pointer-events:none}
.station:hover{border-color:rgba(var(--acc-rgb),.45)}
.station.active{border-color:rgba(var(--acc-rgb),.75);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.2)}
.st-top{display:flex;align-items:center;justify-content:center;gap:10px}
.st-name{font:var(--fw-d) calc(21px*var(--fs))/1 var(--f-display);letter-spacing:var(--ls-d);color:var(--text)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px;flex:none}
.eq i{width:3px;height:35%;border-radius:1px;background:var(--accent);opacity:.8}
.eq i:nth-child(2){height:75%}.eq i:nth-child(3){height:50%}.eq i:nth-child(4){height:90%}
.station.listening .eq i{animation:eq .9s ease-in-out infinite alternate}
.station.listening .eq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
.station.listening .eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.6s}
.station.listening .eq i:nth-child(4){animation-duration:.8s;animation-delay:-.2s}
@keyframes eq{from{height:18%}to{height:100%}}
.st-now{display:flex;flex-direction:column;gap:1px;min-width:0}
.st-label{font-size:calc(10px*var(--fs));font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.st-title{font-size:calc(13px*var(--fs));color:#d4d4da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-bar{display:block;height:2px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.st-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width 1s linear}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(var(--acc-rgb),.55);animation:livepulse 2.4s infinite}
@keyframes livepulse{70%{box-shadow:0 0 0 6px rgba(var(--acc-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),0)}}
.side-foot{margin-top:auto;padding:22px 10px 0;display:flex;flex-direction:column;gap:12px;font-size:calc(13px*var(--fs));color:var(--muted)}
.lang{display:flex;gap:4px}
.lang button{padding:3px 10px;border-radius:999px;border:1px solid var(--line);font-size:calc(12px*var(--fs));color:var(--muted)}
.lang button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#1a1200);font-weight:600}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;line-height:1.3}
.switch input{appearance:none;-webkit-appearance:none;width:32px;height:18px;border-radius:999px;background:#3a3a40;position:relative;flex:none;cursor:pointer;transition:background .15s}
.switch input::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#ddd;transition:transform .15s}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{transform:translateX(14px);background:#1a1200}
.side-foot a{color:var(--muted)}

/* Main */
.main{overflow-y:auto}
.hero{padding:52px 40px 30px;background:
  linear-gradient(160deg,rgba(var(--acc-rgb),.22),transparent 55%),
  linear-gradient(20deg,#1b1b1f,#0f0f11)}
.hero small{display:block;color:var(--accent);text-transform:uppercase;letter-spacing:.14em;font-size:calc(12px*var(--fs));font-weight:600}
.hero h1{font:var(--fw-d) calc(clamp(38px,6vw,68px)*var(--fs))/1 var(--f-display);letter-spacing:var(--ls-d);margin:10px 0 12px;overflow-wrap:anywhere}
.hero p{color:var(--muted);max-width:640px}
.hero-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;align-items:center}
.btn-play{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent,#1a1200);font-weight:600;padding:11px 22px;border-radius:999px;transition:transform .15s,background .15s}
.btn-play:hover{background:var(--accent-2);transform:scale(1.03)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);color:#d8d8de;font-weight:500;transition:border-color .15s,color .15s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.search-wrap{position:relative;flex:1;min-width:200px;max-width:380px}
.search-wrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);width:16px;height:16px}
.search{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);padding:10px 16px 10px 38px;border-radius:999px;font:inherit;outline:none}
.search:focus{border-color:var(--accent);background:rgba(255,255,255,.09)}
kbd{font:calc(11px*var(--fs)) var(--f-mono);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

.list{padding:12px 28px 40px;list-style:none}
.track{position:relative;display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:start;padding:16px 12px;border-radius:10px;cursor:pointer;border-bottom:1px solid var(--line);transition:background .15s}
.track:hover,.track:focus-within{background:var(--panel)}
.track.playing{background:rgba(var(--acc-rgb),.08)}
.num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:calc(13px*var(--fs));background:var(--panel-2)}
.num:focus-visible{border-radius:50%}
.track:hover .num,.track.playing .num,.num:focus-visible{background:var(--accent);color:var(--on-accent,#1a1200)}
.num .ic{display:none}
.track:hover .num .ix,.track.playing .num .ix,.num:focus-visible .ix{display:none}
.track:hover .num .ic,.track.playing .num .ic,.num:focus-visible .ic{display:block}
.t-title{font-weight:560;font-size:calc(16px*var(--fs));letter-spacing:-.005em}
.track.playing .t-title{color:var(--accent)}
.t-line{color:#c4c4cc;font-size:calc(13.5px*var(--fs));margin-top:3px}
.t-note{color:var(--muted);font-size:calc(12.5px*var(--fs));margin-top:6px}
.t-dur{color:var(--muted);font-size:calc(13px*var(--fs));white-space:nowrap;padding-top:2px;text-align:right}
.t-dur .res{display:block;color:var(--accent);font-size:calc(11.5px*var(--fs));margin-top:2px}
.t-more{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.track.open .t-more{-webkit-line-clamp:unset}
.toggle{color:var(--accent);font-size:calc(12px*var(--fs));margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-size:calc(11.5px*var(--fs));padding:2px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.track.na{opacity:.5;cursor:default}
.track.na .num{background:var(--panel-2)!important;color:var(--muted)!important}
.empty{padding:60px 20px;text-align:center;color:var(--muted)}

/* Player bar */
.player{position:fixed;left:0;right:0;bottom:0;height:var(--player-h);padding:0 28px var(--safe-b);z-index:20;background:linear-gradient(180deg,rgba(28,26,24,.97),rgba(16,16,18,.985));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -14px 40px rgba(0,0,0,.35);display:grid;grid-template-columns:minmax(0,1fr) min(560px,44vw) minmax(0,1fr);align-items:center;gap:36px}
/* Title column: title may wrap to two lines, the subtitle stays on one; both end in "…" instead of running into the controls */
/* Now-playing card: visibly a button at all times (soft card + "open" chevron), lifts on hover */
.now:hover{background:rgba(255,255,255,.06);border-color:rgba(var(--acc-rgb),.35)}
.now-text{display:block;min-width:0;flex:1}
.now-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:calc(14.5px*var(--fs));line-height:1.3;overflow-wrap:anywhere;color:var(--text)}
.now-sub{display:block;color:var(--muted);font-size:calc(12.5px*var(--fs));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.center{display:flex;flex-direction:column;align-items:center;gap:8px}
.ctrls{display:flex;align-items:center;gap:18px}
.ctrl{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#cfcfd6;transition:background .15s,color .15s}
.ctrl:hover{color:#fff;background:var(--panel-2)}
.ctrl:focus-visible{border-radius:50%}
.ctrl:disabled{opacity:.35;cursor:default;background:none}
.ctrl.big{width:46px;height:46px;background:var(--text);color:#111;position:relative}
.ctrl.big:hover{background:#fff;transform:scale(1.05)}
/* Play button: exactly in the middle of the screen (equal side columns); in Now Playing it grows and wears a progress ring */
.ctrl.big .ring{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);transform:rotate(-90deg);opacity:0;transition:opacity .3s;pointer-events:none}
.ring circle{fill:none;stroke-width:2}
.ring .rt{stroke:rgba(255,255,255,.12)}
.ring .rp{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:100}
body.np-open .ctrl.big .ring{opacity:1}
body.np-open .ctrl.big{width:54px;height:54px;background:linear-gradient(145deg,#fff,#e9e3d6);box-shadow:0 6px 26px rgba(var(--acc-rgb),.22)}
body.np-open .player{background:rgba(11,11,13,.78);border-top-color:rgba(var(--acc-rgb),.18)}
.ctrl.big.loading::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ctrl.on,.ctrl[aria-pressed=true]{color:var(--accent)}
.ctrl.jump{width:auto;padding:0 8px;display:inline-flex;gap:4px;border-radius:999px}
.ctrl.jump:focus-visible{border-radius:999px}
.sec{font-size:calc(11.5px*var(--fs));font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted)}
.ctrl.jump:hover .sec{color:inherit}
.fs-btn,.pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(23,23,26,.7);font-size:calc(13px*var(--fs));font-weight:500;color:#d8d8de;transition:border-color .15s,color .15s}
.fs-btn:hover,.pill:hover{border-color:var(--accent);color:var(--accent)}
.seek{position:relative;display:flex;align-items:center;gap:10px;width:100%;font-size:calc(12px*var(--fs));color:var(--muted)}
.seek span{width:56px;text-align:center;font-variant-numeric:tabular-nums}
.seek .live-badge{width:auto;display:none;align-items:center;gap:6px;font-weight:600;letter-spacing:.1em;color:var(--accent)}
.radio-mode .seek .live-badge{display:inline-flex}
.radio-mode #seek{pointer-events:none}
.tip{position:absolute;bottom:18px;transform:translateX(-50%);background:#000;color:#fff;font-size:calc(11.5px*var(--fs));padding:3px 7px;border-radius:5px;pointer-events:none;white-space:nowrap;width:auto!important}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:4px;cursor:pointer;
  background:linear-gradient(to right,var(--accent) 0 var(--p,0%),#5c5c63 var(--p,0%) var(--b,0%),#36363c var(--b,0%) 100%)}
input[type=range]:hover{height:6px}
input[type=range]:focus-visible{border-radius:4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;opacity:0;transition:opacity .15s}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:focus-visible::-webkit-slider-thumb{opacity:1}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}
.right{display:flex;justify-content:flex-end;align-items:center;gap:20px;min-width:0}
.vol input{width:110px;max-width:110px}
#vizMini{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .3s}
.status{position:fixed;left:50%;bottom:calc(var(--player-h) + 16px);transform:translate(-50%,10px);background:#2b2b31;color:var(--text);font-size:calc(13px*var(--fs));padding:8px 16px;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:40}
.status.show{opacity:1;transform:translate(-50%,0)}

/* Now playing view */
.np{position:fixed;left:0;right:0;top:0;bottom:var(--player-h);z-index:15;display:grid;grid-template-rows:auto auto 1fr auto;
  background:radial-gradient(ellipse at 50% 35%,rgba(var(--acc-rgb),.14),transparent 60%),#0b0b0d;animation:up .25s ease}
@keyframes up{from{transform:translateY(24px);opacity:0}}
.np-head{display:flex;align-items:center;gap:12px;padding:16px 24px;flex-wrap:wrap}
.np-head .lbl{flex:1;min-width:120px;color:var(--muted);font-size:calc(12px*var(--fs));letter-spacing:.12em;text-transform:uppercase}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{padding:5px 12px;border-radius:999px;font-size:calc(12.5px*var(--fs));color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent,#1a1200);font-weight:600}
.np-head{position:relative;z-index:2}
.np-head .lbl a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
.np-head .lbl a:hover{color:var(--accent);text-decoration-color:currentColor}
.stage{min-height:0}
/* Now Playing: the spiral as a watermark behind everything, breathing very slightly with the music (--lvl) */
/* Centred in the area under the header (padding-top), but clipped only at the edges of the view, so the spiral
   isn't cut off along the header's line when it grows past it (e.g. in the clean full-screen view) */
.np-mark{position:absolute;inset:0;padding-top:64px;display:grid;place-items:center;pointer-events:none;overflow:hidden}
.np-mark svg{width:min(88%,1250px);height:auto;transform:scale(calc(1 + var(--lvl,0) * .06)) rotate(calc(var(--lvl,0) * -2deg));transition:transform .35s ease-out}
.np-mark .f{opacity:.045}
.np-mark .s{opacity:.16}
/* Progress art "trace": the spiral's outline draws itself in glowing gold as the concert plays,
   led by a small bright point. Other styles can hang off .np[data-progress=...] later. */
.np-mark .pt{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 100;stroke-dashoffset:100;opacity:.85;transition:stroke-dashoffset .6s linear}
.np-mark .head{fill:#fff1d2;fill:color-mix(in srgb,var(--accent-pale) 45%,#fff);transition:transform .6s linear}
.np[data-progress="off"] .np-mark .prog{display:none}
.np.viz-off .np-mark .f{opacity:.07}
.np.viz-off .np-mark .s{opacity:.22}
/* The canvas spans from under the header to the bottom of the view, so the bars rise from behind the text */
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(var(--viz-glow,255,196,120),.32),transparent 62%);opacity:var(--pulse,0);pointer-events:none}
#vizBig,#vizFade{--pad:clamp(20px,7vw,140px);position:absolute;top:64px;bottom:0;left:var(--pad);width:calc(100% - 2*var(--pad));height:calc(100% - 64px)}
#vizFade{opacity:0;pointer-events:none}
.np-info{position:relative;z-index:1;padding:0 24px clamp(28px,9vh,110px);max-width:900px;margin:0 auto;width:100%;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 24px rgba(0,0,0,.85)}
.np-info::before{content:"";position:absolute;z-index:-1;inset:0 -10% 0;background:radial-gradient(ellipse at 50% 55%,rgba(11,11,13,.82),rgba(11,11,13,.5) 55%,transparent 75%);pointer-events:none}
/* Landscape: the bars stand on the text's top edge, so the dark halo starts there too (covers only the reflection) */
/* Visualizer off: no stage, text centred in the view */
.np.viz-off{grid-template-rows:auto auto 1fr}
.np.viz-off .np-info{grid-row:3}
.np.viz-off .stage{display:none}
.np.viz-off .np-info{align-self:center;padding-bottom:64px}
.np.viz-off .np-info::before{display:none}
.np.viz-off .np-info .d{max-height:none}
/* ERP Radio programme ticker: a strip under the header, scrolling right to left like a station crawl.
   The live "next in" countdown stays put on the left; the programme glides past and fades at both edges. */
.np-head{grid-row:1}
.ticker{grid-row:2;position:relative;z-index:2;display:flex;align-items:stretch;min-height:96px;margin:0 24px;border-top:1px solid rgba(var(--acc-rgb),.22);border-bottom:1px solid rgba(var(--acc-rgb),.22);font-size:calc(12.5px*var(--fs));letter-spacing:.01em;overflow:hidden;background:linear-gradient(90deg,rgba(11,11,13,.88),rgba(11,11,13,.4) 50%,rgba(11,11,13,.88))}
.ticker .now-tag{flex:none;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 18px 0 2px;margin-right:4px;border-right:1px solid rgba(var(--acc-rgb),.22);white-space:nowrap}
.ticker .nt-a{display:inline-flex;align-items:center;gap:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:calc(11px*var(--fs));color:var(--accent)}
.ticker .nt-b{font:500 calc(13px*var(--fs)) var(--f-mono);color:var(--accent-2);padding-left:15px}
.ticker .crawl{flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ticker .track-in{display:flex;animation:crawl var(--crawl,60s) linear infinite;will-change:transform}
.ticker .copy{display:flex}
.ticker:hover .track-in{animation-play-state:paused}
/* One programme item: a fixed-width card of up to five short lines */
.ticker .item{flex:none;display:flex;flex-direction:column;gap:2px;width:min(460px,78vw);padding:10px 26px;border-left:1px solid rgba(var(--acc-rgb),.16);color:#d8d8de;white-space:normal;line-height:1.35}
.ticker .i-top{display:flex;align-items:baseline;gap:7px;font-size:calc(11.5px*var(--fs));color:var(--muted)}
.ticker .i-top i{font-style:normal;color:rgba(var(--acc-rgb),.5)}
.ticker .item time{color:var(--accent-2);font-size:calc(12.5px*var(--fs))}
.ticker .i-top .ann{color:var(--accent)}
.ticker .i-title{font:var(--fw-d) calc(19px*var(--fs))/1.15 var(--f-display);letter-spacing:var(--ls-d);color:var(--text);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ticker .i-who,.ticker .i-prog{color:#bdbdc4;font-size:calc(12px*var(--fs));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ticker .i-prog{color:var(--muted);-webkit-line-clamp:1}
.ticker .i-gen{font-size:calc(10.5px*var(--fs));letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--acc-rgb),.75);margin-top:1px}
@keyframes crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.stage{grid-row:3}
.np-info{grid-row:4}
.np-info h2{font:var(--fw-d) calc(clamp(28px,4.2vw,48px)*var(--fs))/1.08 var(--f-display);letter-spacing:var(--ls-d);margin:8px 0 10px}
.np-info .d{color:#c4c4cc;font-size:calc(14px*var(--fs));max-height:4.6em;overflow:auto}
.np-info .nt{color:var(--muted);font-size:calc(12.5px*var(--fs));margin-top:8px}
.np-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:10px;font-size:calc(12.5px*var(--fs))}
.np-links a{color:var(--muted);text-decoration-color:rgba(255,255,255,.25)}
.np-links a:hover{color:var(--accent)}
.np-actions{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}

/* Radio view */
.radio{padding:12px 28px 40px}
.onair{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.onair h3{font:var(--fw-d) calc(30px*var(--fs))/1.12 var(--f-display);letter-spacing:var(--ls-d);margin:6px 0}
.onair .meta{color:var(--muted);font-size:calc(13px*var(--fs))}
.onair .bar{height:4px;background:#36363c;border-radius:4px;margin-top:14px;overflow:hidden}
.onair .bar i{display:block;height:100%;background:var(--accent);width:var(--p,0%)}
/* The storyline under the on-air card: the season, the month, the week and today. Each tier is a bar of its parts
   (filled up to now), and a wedge opens from the part we're in to the tier below, down to today's topic */
.r-story{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);column-gap:26px;margin-top:14px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(115deg,rgba(var(--acc-rgb),.08),rgba(var(--acc-rgb),0) 55%),var(--panel)}
.sl-lab{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;cursor:default}
.sl-lab span{font-size:calc(10.5px*var(--fs));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.sl-lab b{font-weight:600;font-size:calc(14px*var(--fs));line-height:1.25;color:var(--text)}
.sl-lab small{font-size:calc(11.5px*var(--fs));color:var(--muted)}
.sl-lab.ahead span{color:var(--muted)}
.sl-lab.day{justify-content:flex-start;padding-top:16px}
.sl-track{display:flex;min-width:0;margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel-2)}
.sl-track li{position:relative;isolation:isolate;flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 10px;cursor:default}
.sl-track li+li{box-shadow:inset 1px 0 0 var(--line)}
.sl-track li > i{position:absolute;inset:0 auto 0 0;z-index:-1;background:rgba(var(--acc-rgb),.1)}
.sl-track li.now{background:rgba(var(--acc-rgb),.05);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.75);border-radius:8px}
.sl-track li.now > i{background:linear-gradient(90deg,rgba(var(--acc-rgb),.1),rgba(var(--acc-rgb),.3));border-right:2px solid var(--accent)}
.sl-k{max-width:100%;font-size:calc(10.5px*var(--fs));font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-t{font-size:calc(12.5px*var(--fs));line-height:1.3;color:#a9a9b1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sl-track li.past .sl-t{color:#85858e}
.sl-track li.now .sl-k{color:var(--accent)}
.sl-track li.now .sl-t{color:#fff}
.sl-track.ahead{border-style:dashed;background:transparent}
.sl-zoom{display:block;width:100%;height:20px}
.sl-zoom polygon{fill:rgba(var(--acc-rgb),.08)}
.sl-zoom path{fill:none;stroke:rgba(var(--acc-rgb),.45);stroke-width:1}
.sl-gap{height:14px}
.sl-today{padding:14px 18px 15px;border:1px solid rgba(var(--acc-rgb),.4);border-radius:10px;background:linear-gradient(115deg,rgba(var(--acc-rgb),.13),rgba(var(--acc-rgb),.03))}
.sl-today h4{margin:0 0 5px;font:var(--fw-d) calc(24px*var(--fs))/1.15 var(--f-display);letter-spacing:var(--ls-d);color:var(--text)}
.sl-today p{margin:0;max-width:78ch;color:#c4c0b8;font-size:calc(14px*var(--fs));line-height:1.55}
.sl-today .sl-talk{margin-top:9px;color:var(--text);font-size:calc(13px*var(--fs))}
.sl-talk span{margin-right:10px;font-size:calc(10.5px*var(--fs));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
@media (max-width:820px){
  .r-story{grid-template-columns:minmax(0,1fr);padding:16px}
  .sl-zoom,.sl-gap,.r-story > span:empty{display:none}
  .sl-lab{margin:14px 0 7px}
  .r-story > .sl-lab:first-child{margin-top:0}
  .sl-lab.day{padding-top:0}
  .sl-track li{padding:7px 4px;align-items:center}
  .sl-t{display:none}
  .sl-today h4{font-size:calc(20px*var(--fs))}
}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:calc(11.5px*var(--fs));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.sched{margin-top:30px}
.sched ol{list-style:none;position:relative}
.sched h3{font-size:calc(11px*var(--fs));font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 6px}
/* A show: its name as a heading, then its items on a timeline (a thin rail through the times, a dot per item) */
.show-row{display:flex;flex-direction:column;gap:3px;padding:22px 16px 10px 0;margin-top:6px;border-top:1px solid var(--line)}
.sched ol > .show-row:first-child{border-top:0;margin-top:0;padding-top:10px}
.show-row b{font:var(--fw-d) calc(19px*var(--fs))/1.2 var(--f-display);letter-spacing:var(--ls-d);color:#f3efe8}
.show-row span{color:var(--muted);font-size:calc(12.5px*var(--fs))}
.slot{position:relative;display:grid;grid-template-columns:80px 1fr auto;gap:18px;padding:12px 14px 12px 8px;border-radius:12px;align-items:baseline;transition:background .15s}
.slot:hover{background:rgba(255,255,255,.03)}
.slot::before{content:"";position:absolute;left:97px;top:0;bottom:0;width:1px;background:var(--line)}
.slot::after{content:"";position:absolute;left:94px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--panel-2);box-shadow:0 0 0 1px #45454c}
.slot > div{padding-left:6px;min-width:0}
.slot time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:calc(12.5px*var(--fs))}
.slot .st{font-weight:600;line-height:1.35}
.slot .ss{color:var(--muted);font-size:calc(12.5px*var(--fs));line-height:1.45;margin-top:2px}
.slot > .ss{white-space:nowrap;font-variant-numeric:tabular-nums}
/* A countdown under each coming start time, the length labelled, and the row on air's progress and time left */
.slot .when{display:flex;flex-direction:column;gap:3px}
.slot .cd{font:500 calc(10.5px*var(--fs))/1.3 var(--f-mono);color:rgba(var(--acc-rgb),.8);font-variant-numeric:tabular-nums}
.slot > .dur{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.dur small{font-size:calc(9.5px*var(--fs));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6f6f78}
.slot-prog{display:flex;align-items:center;gap:12px;max-width:560px;margin-top:10px}
.slot-prog .bar{flex:1;height:3px;border-radius:3px;background:#36363c;overflow:hidden}
.slot-prog .bar i{display:block;height:100%;width:0;background:var(--accent)}
#rSlotLeft{font:calc(11.5px*var(--fs)) var(--f-mono);color:var(--muted);white-space:nowrap}
.onair #rTime{text-align:right;font-variant-numeric:tabular-nums}
/* Now on air: a lit card with a glowing dot, an accent edge and a moving equalizer */
.slot.now-on{background:linear-gradient(100deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-rgb),.04) 55%,transparent);box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.28);padding-top:14px;padding-bottom:14px}
.slot.now-on::after{background:var(--accent);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.22),0 0 14px rgba(var(--acc-rgb),.7);top:21px}
.slot.now-on time{color:var(--accent);font-weight:600}
.slot.now-on .st{color:#fff;font-size:calc(15.5px*var(--fs))}
.now-badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:6px;padding:3px 10px 3px 8px;border-radius:999px;background:rgba(var(--acc-rgb),.14);color:var(--accent-2);font-size:calc(10.5px*var(--fs));font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.now-badge .eq{height:11px}
.now-badge .eq i{width:2px;background:var(--accent);animation:eq .9s ease-in-out infinite alternate}
.now-badge .eq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
.now-badge .eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.6s}
.now-badge .eq i:nth-child(4){animation-duration:.8s;animation-delay:-.2s}
@media (prefers-reduced-motion:reduce){ .now-badge .eq i{animation:none} }
@media (max-width:640px){
  .slot{grid-template-columns:72px 1fr;gap:12px;padding-right:10px}
  .slot time{font-size:calc(11.5px*var(--fs));white-space:nowrap}
  .slot::before{left:86px} .slot::after{left:83px}
  .slot > .ss{grid-column:2;margin-top:-4px}
  .slot > .dur{flex-direction:row;align-items:baseline;gap:6px;margin-top:2px}
}
.slot.anniv .st::before,.slot.anniversary .st::before,.slot.pinned .st::before{content:"★ ";color:var(--accent)}
.slot.interval .st{font-weight:500;color:var(--muted)}

/* Companion (AI) panel */
.ask{position:fixed;top:0;right:0;bottom:var(--player-h);width:min(420px,100%);z-index:30;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-20px 0 40px rgba(0,0,0,.35);animation:slidein .2s ease}
@keyframes slidein{from{transform:translateX(30px);opacity:0}}
.ask-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.ask-head h2{flex:1;font:var(--fw-d) calc(24px*var(--fs)) var(--f-display);letter-spacing:var(--ls-d)}
.ask-log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:92%;font-size:calc(14px*var(--fs));line-height:1.55}
.msg.me{align-self:flex-end;background:var(--panel-2);padding:9px 13px;border-radius:14px 14px 4px 14px}
.msg.ai p+p{margin-top:8px}
.msg.ai.err{color:#ff9a9a}
.msg .rec{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;text-align:left;width:100%}
.msg .rec:hover{border-color:var(--accent)}
.msg .rec b{display:block;font-weight:600}
.msg .rec small{color:var(--muted)}
.typing{color:var(--muted);font-size:calc(13px*var(--fs))}
.ask-hint{color:var(--muted);font-size:calc(13px*var(--fs))}
.ask-sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ask-sugg button{font-size:calc(12.5px*var(--fs));padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:#d8d8de}
.ask-sugg button:hover{border-color:var(--accent);color:var(--accent)}
.ask-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.ask-form textarea{flex:1;resize:none;height:42px;max-height:120px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:12px;font:inherit;font-size:calc(14px*var(--fs))}
.ask-form textarea:focus{border-color:var(--accent);outline:none}
.ask-foot{padding:0 16px 10px;color:var(--muted);font-size:calc(11px*var(--fs))}

@media (max-width:1250px){ .viz-label{display:none} .viz-pill{padding:0 12px} .vol input{width:80px} .player{gap:24px} }
@media (max-width:1000px){ .fs-btn span,.pill span{display:none} .fs-btn,.pill{padding:0 10px} }

/* ---------- Player bar: now-playing card, visualizer pill, volume ---------- */
.now{display:flex;align-items:center;gap:12px;min-width:0;max-width:440px;width:100%;justify-self:start;padding:7px 12px 7px 7px;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.025);text-align:left;transition:background .15s,border-color .15s}
.now-open{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:var(--muted);background:rgba(255,255,255,.05);transition:color .15s,background .15s}
.now-open svg{width:16px;height:16px}
.now:hover .now-open{color:var(--accent);background:rgba(var(--acc-rgb),.12)}
body.np-open .now-open svg{transform:rotate(180deg)}
.viz-pill{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 5px;border-radius:999px;border:1px solid var(--line);color:#d8d8de;font-size:calc(13px*var(--fs));font-weight:500;transition:border-color .15s,color .15s}
.viz-pill:hover{border-color:var(--accent);color:var(--accent)}
.viz-box{position:relative;width:46px;height:28px;border-radius:999px;background:rgba(255,255,255,.045);display:grid;place-items:center;overflow:hidden}
.viz-icon{transition:opacity .3s}
.player.is-playing .viz-pill.on #vizMini{opacity:1}
.player.is-playing .viz-pill.on .viz-icon{opacity:0}
.vol{display:flex;align-items:center;gap:6px}
.vol-ic .w1,.vol-ic .w2,.vol-ic .w3,.vol-ic .x{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;display:none}
#mute[data-lv="0"] .x,#mute[data-lv="1"] .w1,#mute[data-lv="2"] :is(.w1,.w2),#mute[data-lv="3"] :is(.w1,.w2,.w3){display:inline}
.seek span,#npCur,#npDur{font-family:var(--f-mono);font-size:calc(11.5px*var(--fs));letter-spacing:-.01em}
.slot time,.ticker .item time{font-family:var(--f-mono);font-weight:500}
.ticker .item time{font-weight:600}

/* ---------- ERP Radio card while you're listening: unmistakable ---------- */
.st-you{display:none}
.station.tuned{border-color:rgba(var(--acc-rgb),.85);background:linear-gradient(155deg,rgba(var(--acc-rgb),.3),rgba(var(--acc-rgb),.06) 62%),var(--panel-2)}
.station.tuned .st-on{display:none}
.station.tuned .st-you{display:inline-flex;align-items:center;gap:7px}
.station.tuned .st-you::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 0 rgba(var(--acc2-rgb),.6)}
.station.listening .st-you::before{animation:livepulse 1.8s infinite}
.station.listening{box-shadow:0 0 0 1px rgba(var(--acc2-rgb),.45),0 8px 34px rgba(var(--acc-rgb),.28);animation:stationGlow 3.2s ease-in-out infinite}
.station.listening .st-name{color:var(--accent-2)}
.station.listening .st-label{color:var(--accent-2)}
.station.listening .st-title{color:#fff}
.station.listening .eq i{background:var(--accent-2);opacity:1}
.station.listening::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 35%,rgba(255,214,140,.16) 50%,transparent 65%);background-size:260% 100%;animation:sweep 4.5s linear infinite;pointer-events:none}
.station.listening::after{opacity:.24}
@keyframes stationGlow{50%{box-shadow:0 0 0 1px rgba(var(--acc2-rgb),.7),0 8px 44px rgba(var(--acc-rgb),.42)}}
@keyframes sweep{from{background-position:130% 0}to{background-position:-130% 0}}
body.radio-listening .art{border-color:rgba(var(--acc2-rgb),.7);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.15),0 0 22px rgba(var(--acc-rgb),.3)}

/* ---------- Hero: layout switch, playlist actions ---------- */
.hero-actions .layout-seg{margin-left:auto}
.seg button{display:inline-flex;align-items:center;gap:6px}
.layout-seg button svg{width:15px;height:15px}
.layout-seg button{padding:6px 12px 6px 10px}
.pl-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-ghost svg{width:16px;height:16px}
.btn-ghost.sm{padding:8px 14px 8px 12px;font-size:calc(13px*var(--fs))}
.btn-ghost.danger:hover{border-color:#e0705f;color:#ff9585}
.hero h1 .rename{font:inherit;letter-spacing:inherit;color:inherit;background:transparent;border:0;border-bottom:1px dashed rgba(var(--acc-rgb),.7);width:100%;outline:none;padding:0 0 2px}
#catDesc{font-size:calc(14px*var(--fs))}

/* ---------- Recording rows: shared parts ---------- */
.t-body{min-width:0}
.t-who{display:none}
.t-extra{display:none}
.t-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.acts{display:flex;gap:4px}
.act{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--muted);opacity:.55;transition:opacity .15s,background .15s,color .15s}
.act svg{width:17px;height:17px}
.act:focus-visible{border-radius:50%;opacity:1}
.act:disabled{opacity:.15!important;cursor:default;background:none!important}
.track:hover .act,.track:focus-within .act,.act[aria-expanded=true]{opacity:1}
.act:hover,.act[aria-expanded=true]{background:var(--panel-2);color:var(--accent)}
.act.rm:hover{color:#ff9585}
.track[draggable=true]{cursor:grab}
.track.dragging{opacity:.35}
.track.drop-a{box-shadow:inset 0 2px 0 var(--accent)}
.track.drop-b{box-shadow:inset 0 -2px 0 var(--accent)}

/* List: one line per recording */
.v-list{padding-top:8px}
.v-list .track{grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:14px;padding:6px 10px;border-radius:8px}
.v-list .num{width:28px;height:28px;font-size:calc(11.5px*var(--fs))}
.v-list .num svg{width:14px;height:14px}
.v-list .t-body{display:flex;align-items:baseline;gap:16px}
.v-list .t-title{flex:0 1 auto;max-width:58%;font-size:calc(14.5px*var(--fs));font-weight:540;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-list .t-who{display:block;flex:1 1 0;min-width:0;color:var(--muted);font-size:calc(13px*var(--fs));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-list .t-lines,.v-list .toggle,.v-list .t-note,.v-list .chips{display:none}
.v-list .t-side{flex-direction:row;align-items:center;gap:6px}
.v-list .t-dur{padding:0;font-size:calc(12.5px*var(--fs));font-variant-numeric:tabular-nums}
.v-list .t-dur .res{display:inline;margin-left:8px;font-size:calc(11.5px*var(--fs))}
.v-list .act{width:28px;height:28px}

/* Detailed: everything visible at once, larger type */
.v-detailed .track{grid-template-columns:52px 1fr auto;gap:22px;padding:26px 16px}
.v-detailed .num{width:46px;height:46px;font-size:calc(14px*var(--fs))}
.v-detailed .t-title{font:var(--fw-d) calc(28px*var(--fs))/1.12 var(--f-display);letter-spacing:var(--ls-d);margin-bottom:8px}
.v-detailed .track.playing .t-title{color:var(--accent-2)}
.v-detailed .t-line{font-size:calc(15.5px*var(--fs));line-height:1.55;color:#d6d6dc;margin-top:4px}
.v-detailed .t-note{font-size:calc(13.5px*var(--fs));margin-top:10px}
.v-detailed .t-extra{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:10px;font-size:calc(13.5px*var(--fs))}
.v-detailed .t-extra a{color:var(--accent-2);text-decoration-color:rgba(var(--acc2-rgb),.35);text-underline-offset:3px}
.v-detailed .t-date{font:500 calc(12px*var(--fs)) var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding:3px 9px;border:1px solid rgba(var(--acc-rgb),.35);border-radius:999px}
.v-detailed .chips{margin-top:12px}
.v-detailed .chip{font-size:calc(12.5px*var(--fs));padding:3px 12px}
.v-detailed .t-dur{font-size:calc(14.5px*var(--fs))}

/* ---------- Sidebar: your playlists ---------- */
.pl-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:8px}
.pls{margin-bottom:18px}
.pl-head h2{padding-bottom:6px}
.pl-new{display:inline-flex;align-items:center;gap:4px;font-size:calc(12px*var(--fs));color:var(--muted);padding:3px 10px 3px 6px;border-radius:999px;border:1px solid var(--line);transition:border-color .15s,color .15s}
.pl-new svg{width:14px;height:14px}
.pl-new:hover{border-color:var(--accent);color:var(--accent)}
a.cat{text-decoration:none}
.cat.pl span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-empty{padding:2px 12px 6px;font-size:calc(12.5px*var(--fs));color:var(--muted);line-height:1.45}

/* ---------- "Add to playlist" menu ---------- */
.menu{position:fixed;z-index:60;width:290px;max-width:calc(100vw - 16px);padding:8px;border-radius:14px;background:#1c1b1e;border:1px solid #38322b;box-shadow:0 18px 50px rgba(0,0,0,.6);animation:menuIn .14s ease}
@keyframes menuIn{from{opacity:0;transform:translateY(-4px)}}
.menu-h{padding:6px 10px 8px;font-size:calc(10.5px*var(--fs));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.menu-h small{display:block;margin-top:3px;font-size:calc(12.5px*var(--fs));font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-list{max-height:250px;overflow-y:auto}
.menu-list button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;text-align:left;font-size:calc(14px*var(--fs))}
.menu-list button:hover,.menu-list button:focus-visible{background:var(--panel-2);box-shadow:none}
.menu .ck{flex:none;width:16px;color:var(--accent);font-weight:700}
.menu .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu .n{color:var(--muted);font:calc(12px*var(--fs)) var(--f-mono)}
.menu-new{display:flex;gap:6px;margin-top:6px;padding:8px 2px 2px;border-top:1px solid var(--line)}
.menu-new input{flex:1;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);font:inherit;font-size:calc(13.5px*var(--fs))}
.menu-new input:focus{border-color:var(--accent);outline:none}
.menu-new button{padding:0 14px;border-radius:8px;background:var(--accent);color:var(--on-accent,#1a1200);font-weight:600;font-size:calc(13px*var(--fs))}
.menu-new button:hover{background:var(--accent-2)}

/* Toast with an action ("Undo", "Open") */
.status.has-action{display:flex;align-items:center;gap:12px;padding-right:6px}
.status.has-action.show{pointer-events:auto}
.status button{color:var(--accent-2);font-weight:600;font-size:calc(13px*var(--fs));padding:3px 12px;border-radius:999px;background:rgba(var(--acc-rgb),.12)}
.status button:hover{background:rgba(var(--acc-rgb),.25)}

/* ---------- Now Playing progress ---------- */
.np-mark .pt{stroke-width:1.1;opacity:.95}
.np-mark .head{fill:#fff4dc;fill:color-mix(in srgb,var(--accent-pale) 35%,#fff)}
.np.snap .np-mark .pt,.np.snap .np-mark .head,.np.snap .np-progress i{transition:none}
.np-progress{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:14px;padding:0 28px calc(18px + var(--safe-b));color:rgba(236,236,240,.62);opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
body.zen .np-progress{opacity:1;transform:none}
.np-progress .bar{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.np-progress .bar i{display:block;height:100%;width:var(--f,0%);background:linear-gradient(90deg,var(--accent-deep),var(--accent),var(--accent-2));box-shadow:0 0 10px rgba(var(--acc-rgb),.8);transition:width .6s linear}

@media (max-width:1250px){ .layout-seg button span{display:none} .layout-seg button{padding:6px 9px} }
@media (max-width:820px){
  .pl-head{margin:0;padding:0}
  .pl-head h2,.pl-empty{display:none}
  .pls{flex-direction:row;gap:8px;margin:0}
  .pl-new{padding:7px 12px 7px 9px;font-size:calc(13px*var(--fs))}
  .hero-actions .layout-seg{margin-left:0}
  .v-list .t-body{flex-direction:column;gap:0}
  .v-list .t-title{max-width:100%}
  .v-list .t-side{grid-column:auto}
  .v-list .track{grid-template-columns:30px minmax(0,1fr) auto}
  .v-detailed .track{grid-template-columns:40px 1fr;gap:14px;padding:20px 8px}
  .v-detailed .num{width:38px;height:38px}
  .v-detailed .t-title{font-size:calc(24px*var(--fs))}
  .act{opacity:1}
  .np-progress{padding:0 16px calc(14px + var(--safe-b))}
}
@media (prefers-reduced-motion:reduce){ .station.listening,.station.listening::before,.station.listening .st-you::before{animation:none} .menu{animation:none} }

/* Mobile */
@media (max-width:820px){
  :root{--player-h:calc(150px + var(--safe-b))}
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{flex-direction:row;align-items:center;gap:8px;border-right:0;border-bottom:1px solid var(--line);padding:12px 16px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side h2,.brand .logo-full,.brand-live,.home-btn{display:none}
  .brand{flex:none;padding:0 4px 0 0}
  .brand .logo-sym{display:block;width:44px;height:auto}
  .hero-cut{right:-40%;top:-20%;width:115%}
  .art{width:44px;height:44px}
  .art svg{width:32px}
  .cats{flex-direction:row;gap:8px}
  .cat{width:auto;padding:7px 14px;border:1px solid var(--line);border-radius:999px;gap:8px}
  .station{flex-direction:row;align-items:center;width:auto;margin:0;padding:7px 14px;border-radius:999px;gap:9px}
  .station::after,.st-now,.st-bar{display:none}
  .st-name{font-size:calc(14px*var(--fs))}
  .side-foot{margin:0;padding:0 0 0 8px;flex-direction:row;align-items:center}
  .side-foot .switch,.side-foot .about{display:none}
  .hero{padding:26px 16px 20px}
  .hero kbd{display:none}
  .list,.radio{padding:8px 8px 24px}
  .track{grid-template-columns:36px 1fr;gap:12px;padding:14px 8px}
  .t-side{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}
  .t-dur{padding:0;text-align:left}
  .t-dur .res{display:inline;margin-left:8px}
  .player{grid-template-columns:1fr;grid-template-rows:auto auto;gap:8px;padding:10px 14px calc(10px + var(--safe-b))}
  .now-title{-webkit-line-clamp:1}
  .ctrls{gap:8px}
  #vizBig,#vizFade{top:96px;height:calc(100% - 96px)}
  .right{display:none}
  .np-head{padding:12px 16px}
  .ticker{margin:0 16px;min-height:88px}
  .ticker .now-tag{padding-right:12px}
  .ticker .nt-a{font-size:calc(10px*var(--fs))}
  .np-info{padding:0 16px 24px}
  .onair{grid-template-columns:1fr}
  .ask{bottom:var(--player-h)}
}
/* Clean listening mode: chrome fades away after a quiet spell in Now Playing */
.player,.np-head{transition:opacity .6s ease,transform .6s ease}
.np{transition:bottom .6s ease}
body.zen{cursor:none}
body.zen .player{opacity:0;transform:translateY(100%);pointer-events:none}
body.zen .np{bottom:0}
body.zen .np-head{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){ .np,.ask{animation:none} .player,.np-head,.np{transition:none} .live-dot,.ticker .track-in,.station .eq i{animation:none} .np-mark svg{transform:none;transition:none} }

/* ---------- Custom visualizer: tweak panel ---------- */
.pill.tweak[aria-expanded=true]{border-color:var(--accent);color:var(--accent);background:rgba(var(--acc-rgb),.1)}
.cv-panel{position:absolute;z-index:4;top:64px;right:20px;bottom:16px;width:min(360px,calc(100% - 40px));display:flex;flex-direction:column;border-radius:16px;background:rgba(18,17,20,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(var(--acc-rgb),.22);box-shadow:0 20px 60px rgba(0,0,0,.55);animation:slidein .2s ease;text-shadow:none}
.cv-head{display:flex;align-items:center;justify-content:space-between;padding:12px 10px 0 18px}
.cv-head h2{font:var(--fw-d) calc(24px*var(--fs))/1.1 var(--f-display);letter-spacing:var(--ls-d)}
.cv-hint{padding:2px 18px 10px;font-size:calc(11.5px*var(--fs));color:var(--muted);border-bottom:1px solid var(--line)}
.cv-body{flex:1;overflow-y:auto;padding:12px 18px 18px;display:flex;flex-direction:column;gap:14px}
.cv-l{font-size:calc(10.5px*var(--fs));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cv-row,.cv-presets{display:flex;flex-direction:column;gap:7px}
.cv-chips{display:flex;flex-wrap:wrap;gap:5px}
.cv-chips button{padding:5px 11px;border-radius:999px;border:1px solid var(--line);font-size:calc(12.5px*var(--fs));color:#cfcfd6;transition:border-color .15s,color .15s,background .15s}
.cv-chips button:hover{border-color:var(--accent);color:var(--accent)}
.cv-chips button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#1a1200);font-weight:600}
.cv-presets button.rnd{border-style:dashed}
.cv-presets button.rst{color:var(--muted)}
.cv-chips.swatch button{width:30px;height:30px;padding:0;border-radius:50%;border:2px solid transparent}
.cv-chips.swatch button[aria-pressed=true]{border-color:#fff;background-clip:padding-box;box-shadow:0 0 0 2px var(--bg) inset}
.sw-sunset{background:linear-gradient(135deg,#b8327a,#f0553a,#f5a623,#ffe08a)!important}
.sw-gold{background:linear-gradient(135deg,#9a5a0b,#f5a623,#ffe7b0)!important}
.sw-ember{background:linear-gradient(135deg,#8a1d0e,#e0571b,#ffc36b,#fff1d8)!important}
.sw-ocean{background:linear-gradient(135deg,#0b3a8f,#1592c9,#31c4b8,#a6f0c9)!important}
.sw-aurora{background:linear-gradient(135deg,#17a35b,#2bc7c0,#5f7cf0,#c45ad9)!important}
.sw-ivory{background:linear-gradient(135deg,#7d7464,#cdbf9f,#fbf3e2)!important}
.sw-rainbow{background:conic-gradient(#ff4d4d,#ffb84d,#f5ff4d,#4dff88,#4dc9ff,#8f4dff,#ff4dd2,#ff4d4d)!important}
/* Knobs: a ring that fills clockwise from 7 o'clock, with a pointer */
.knobs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 4px;padding:4px 0}
.knob{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;--v:.5}
.knob input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.dial{position:relative;width:56px;height:56px;border-radius:50%;cursor:ns-resize;touch-action:none;
  background:conic-gradient(from -135deg,var(--accent-2),var(--accent) calc(var(--v)*270deg),rgba(255,255,255,.1) calc(var(--v)*270deg) 270deg,transparent 270deg)}
.dial::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a332b,#18171a 70%);box-shadow:0 3px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.dial i{position:absolute;left:50%;top:9px;width:2px;height:13px;margin-left:-1px;border-radius:2px;background:var(--accent-2);transform-origin:50% 19px;transform:rotate(calc(-135deg + var(--v)*270deg));box-shadow:0 0 6px rgba(var(--acc2-rgb),.8)}
.knob:focus-within .dial{box-shadow:var(--focus)}
.knob .cv-l{font-size:calc(10px*var(--fs));letter-spacing:.08em;text-align:center}
.knob output,.fader output{font:500 calc(11px*var(--fs)) var(--f-mono);color:var(--accent-2)}
/* Faders: label · bar · value */
.faders{display:flex;flex-direction:column;gap:10px}
.fader{display:grid;grid-template-columns:92px 1fr 52px;align-items:center;gap:10px;--v:.5}
.fader input{height:4px;background:linear-gradient(to right,var(--accent) 0 calc(var(--v)*100%),#3a3a40 calc(var(--v)*100%) 100%)}
.fader input::-webkit-slider-thumb{opacity:1;width:14px;height:14px}
.fader output{text-align:right}
.cv-toggles{display:flex;flex-direction:column;gap:9px;font-size:calc(13px*var(--fs));color:#cfcfd6}
.cv-panel .na{opacity:.35}
@media (max-width:820px){
  .cv-panel{top:auto;left:8px;right:8px;width:auto;bottom:8px;max-height:62%}
  .dial{width:44px;height:44px}
  .dial i{top:7px;height:10px;transform-origin:50% 15px}
}
@media (prefers-reduced-motion:reduce){ .cv-panel{animation:none} }

/* ---------- Text size: "Auto" grows the type a little on big screens; Settings can fix it ---------- */
@media (min-width:1600px){ :root:not(.ts-normal){--fs:1.08} }
@media (min-width:2000px){ :root:not(.ts-normal){--fs:1.16} }
@media (min-width:2600px){ :root:not(.ts-normal){--fs:1.28} }
:root.ts-large{--fs:1.14}
:root.ts-larger{--fs:1.28}
/* Wide screens: the player-bar title card may grow almost to the transport buttons; Now Playing text gets wider */
@media (min-width:1300px){ .now{max-width:none} }
@media (min-width:1600px){ .np-info{max-width:1180px} .app{grid-template-columns:290px 1fr} }

/* ---------- Settings ---------- */
.side{position:relative}
.gear{position:absolute;top:84px;right:16px;z-index:2;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--muted);border:1px solid var(--line);background:rgba(23,23,26,.6);transition:color .15s,border-color .15s,transform .4s ease}
.gear:hover{color:var(--accent);border-color:var(--accent);transform:rotate(45deg)}
.gear:focus-visible{border-radius:50%}
.settings{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px;background:rgba(5,5,7,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}}
/* height capped by the viewport itself: a % max-height doesn't resolve inside the overlay's grid, so on short
   laptop screens the card used to grow to its full height and run off the bottom */
.set-card{width:min(680px,100%);max-height:min(860px,calc(100vh - 48px));max-height:min(860px,calc(100dvh - 48px));min-height:0;display:flex;flex-direction:column;border-radius:18px;background:#18171a;border:1px solid #34302b;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:up .2s ease}
.set-head{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 12px 26px;border-bottom:1px solid var(--line)}
.set-head h2{font:var(--fw-d) calc(30px*var(--fs))/1.1 var(--f-display);letter-spacing:var(--ls-d)}
.set-body{overflow-y:auto;padding:8px 26px 26px}
.set-body section{padding:18px 0 6px;border-bottom:1px solid var(--line)}
.set-body section:last-child{border-bottom:0}
.set-body h3{font-size:calc(11px*var(--fs));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.set-l{font-size:calc(14px*var(--fs));color:#d8d8de}
.set-l small{display:block;font-size:calc(12px*var(--fs));color:var(--muted);margin-top:2px;max-width:280px}
.set-seg{flex-wrap:wrap}
.set-seg button{padding:6px 13px}
.tf-prev-sleek{font-family:"Outfit",sans-serif!important;font-weight:400}
.tf-prev-editorial{font-family:"Instrument Serif",serif!important;font-size:calc(15px*var(--fs))!important}
.tf-prev-neutral{font-family:"Geist",sans-serif!important}
.tf-prev-digital{font-family:"Doto",monospace!important;font-weight:800!important;font-size:calc(14px*var(--fs))!important}
.tf-prev-futuristic{font-family:"Michroma",sans-serif!important;font-size:calc(11px*var(--fs))!important}
.tf-prev-modern{font-family:"Unbounded",sans-serif!important;font-weight:400!important;font-size:calc(12px*var(--fs))!important}
.set-sw{margin-bottom:14px;font-size:calc(14px*var(--fs));color:#d8d8de}
.set-hint{font-size:calc(12.5px*var(--fs));color:var(--muted);margin-bottom:12px;max-width:520px}
.set-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.btn-ghost.file{position:relative;cursor:pointer}
.btn-ghost.file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.btn-ghost.file:focus-within{box-shadow:var(--focus)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;align-items:center;font-size:calc(13.5px*var(--fs));color:#cfcfd6;margin-bottom:10px}
.keys kbd{font-size:calc(12px*var(--fs));padding:2px 8px;color:var(--text)}
@media (max-width:820px){
  .gear{position:static;flex:none;order:-1}
  .settings{padding:0;place-items:end stretch}
  .set-card{max-height:92vh;max-height:92dvh;border-radius:18px 18px 0 0}
  .set-body{padding:4px 18px 22px}
}
@media (prefers-reduced-motion:reduce){ .settings,.set-card{animation:none} .gear{transition:none} }

/* ---------- Custom visualizer: looks, randomize, auto-change ---------- */
.cv-chips button[aria-pressed=true][data-preset]{background:rgba(var(--acc-rgb),.16);color:var(--accent-2);border-color:var(--accent);font-weight:500}
.cv-chips .look{display:inline-flex;align-items:stretch}
.cv-chips .look button:first-child{border-radius:999px 0 0 999px;border-right:0;padding-right:8px}
.cv-chips .look .x{border-radius:0 999px 999px 0;padding:0 9px 0 6px;color:var(--muted)}
.cv-chips .look .x:hover{color:#ff9585}
.cv-chips button.save{border-style:dashed;color:var(--accent-2)}
.cv-chips.rnds button span{color:var(--accent);margin-right:2px}
.cv-chips.swatch{gap:7px}
.cv-chips.swatch button{width:26px;height:26px}
/* Numbered sections, in the order you'd tweak a look */
.cv-sec{display:flex;flex-direction:column;gap:12px}
.cv-sec + .cv-sec{padding-top:14px;border-top:1px solid var(--line)}
.cv-sec h3{display:flex;align-items:center;gap:9px;font:var(--fw-d) calc(18px*var(--fs))/1.1 var(--f-display);letter-spacing:var(--ls-d)}
.cv-sec h3 b{flex:none;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:rgba(var(--acc-rgb),.16);border:1px solid rgba(var(--acc-rgb),.45);color:var(--accent-2);font:600 calc(11px*var(--fs))/1 var(--f-ui);letter-spacing:0}
.cv-cycle{display:flex;flex-direction:column;gap:10px}
.cv-cycle + .cv-cycle{padding-top:12px;border-top:1px dashed var(--line)}
.cv-cycle h4{font-size:calc(10.5px*var(--fs));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cv-cycle.off > :not(h4):not(.cv-sw):not(.cv-hint2){opacity:.45}
/* Transition picker: one dropdown instead of fifteen chips */
.cv-inline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cv-sel{appearance:none;-webkit-appearance:none;min-width:150px;padding:5px 30px 5px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a8a39b' d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat right 9px center/16px;color:var(--text);font:inherit;font-size:calc(12.5px*var(--fs));color-scheme:dark;cursor:pointer}
.cv-sel:hover{border-color:var(--accent)}
.cv-sel option{background:#18171a;color:#e8e3da}
.cyc-len{grid-template-columns:92px 1fr 64px 12px}
.cyc-len input[type=number]{width:64px;padding:4px 6px;border-radius:7px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);font:500 calc(12px*var(--fs)) var(--f-mono);text-align:right}
.cyc-len .unit{font:calc(11px*var(--fs)) var(--f-mono);color:var(--muted)}
.cyc-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:calc(13px*var(--fs));color:#cfcfd6}
.cyc-list label{display:flex;align-items:center;gap:7px;cursor:pointer;min-width:0}
.cyc-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cyc-list input{accent-color:var(--accent);width:15px;height:15px;flex:none}
.cyc-n{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.cv-hint2{font-size:calc(11.5px*var(--fs));color:var(--muted);line-height:1.45}

/* ---------- Player bar, redone: quieter, more like a record sleeve and a real transport ---------- */
@media (min-width:821px) and (min-height:820px){ :root{--player-h:calc(112px + var(--safe-b))} }
@media (min-width:821px) and (min-height:1000px){ :root{--player-h:calc(124px + var(--safe-b))} }
.player{background:#121113;box-shadow:none;border-top:1px solid rgba(255,255,255,.06)}
.player::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--acc-rgb),.35) 30%,rgba(var(--acc-rgb),.35) 70%,transparent);pointer-events:none}
/* Title area: sleeve, small genre/year line, title, performers. No box. */
.now{gap:16px;padding:6px 10px 6px 0;border:0;background:none;border-radius:6px}
.now:hover{background:none;border:0}
.art{width:64px;height:64px;border-radius:4px;background:#1d1a17;border:0;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 16px rgba(0,0,0,.45);position:relative;overflow:hidden}
.art::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.art svg{width:46px}
.player.is-playing .art{border:0;box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 16px rgba(0,0,0,.45)}
body.radio-listening .art{box-shadow:0 0 0 1.5px var(--accent),0 6px 16px rgba(0,0,0,.45)}
.now-kick{display:block;font-size:calc(10.5px*var(--fs));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-kick:empty{display:none}
.now-title{font:var(--fw-d) calc(18px*var(--fs))/1.2 var(--f-display);letter-spacing:var(--ls-d);color:#f3efe8;-webkit-line-clamp:1}
.now-sub{font-size:calc(13px*var(--fs));color:#a8a39b;margin-top:3px}
.now:hover .now-title{text-decoration:underline;text-decoration-color:rgba(var(--acc-rgb),.6);text-underline-offset:4px;text-decoration-thickness:1px}
.now-open{background:none;opacity:0;transition:opacity .2s}
.now:hover .now-open,.now:focus-visible .now-open{opacity:1;background:none}
@media (min-width:1300px){ .now-title{-webkit-line-clamp:2} }
/* Transport: clear, solid icons in warm ivory; play is a plain ivory disc */
.ctrls{gap:22px}
.ctrl{width:40px;height:40px;color:#e8e3da}
.ctrl svg{width:22px;height:22px}
.ctrl:hover{background:none;color:var(--accent-2)}
.ctrl:active{transform:scale(.94)}
.ctrl.jump{padding:0;width:40px}
.ctrl.jump .sec{display:none}
.ico-jump{width:28px!important;height:28px!important}
.ico-jump text{font:700 7.4px var(--f-ui);fill:currentColor;letter-spacing:-.03em}
.ctrl.big{width:52px;height:52px;background:#f1ebdf;color:#141210;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.ctrl.big:hover{background:#fff;color:#000;transform:none}
.ctrl.big svg{width:24px;height:24px}
body.np-open .ctrl.big{width:56px;height:56px;background:#f1ebdf;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.ctrl:disabled{color:#e8e3da}
/* Seek: a little thicker, solid gold, times in quiet mono */
.seek{gap:12px}
.seek span{color:#b4aea4}
#seek{height:5px;background:linear-gradient(to right,var(--accent) 0 var(--p,0%),#57524b var(--p,0%) var(--b,0%),#34312d var(--b,0%) 100%)}
#seek:hover{height:7px}
#seek::-webkit-slider-thumb{width:14px;height:14px;background:#f1ebdf;box-shadow:0 1px 4px rgba(0,0,0,.5)}
/* Right side: same ivory icons, plain visualizer button */
.right .ctrl{color:#d9d4cb}
.viz-pill{border:0;background:rgba(255,255,255,.045);border-radius:8px;height:40px;padding:0 14px 0 6px;color:#d9d4cb}
.viz-pill:hover{background:rgba(255,255,255,.08);color:var(--accent-2)}
.viz-box{border-radius:5px;background:rgba(0,0,0,.35)}
#vol{height:5px}
@media (max-width:820px){ :root{--player-h:calc(168px + var(--safe-b))} .now{padding:2px 0} .art{width:48px;height:48px} .art svg{width:34px} .now-title{font-size:calc(16px*var(--fs))} .ctrls{gap:10px} .ctrl.big{width:48px;height:48px} }

/* With a visualizer on, progress and times live on its floor line (drawn on the canvas), so the
   full-width line at the bottom of the clean view is only used when the visualizer is off */
.np.has-zero .np-progress{display:none}
.np-progress span{color:var(--accent)}

/* ---------- Custom panel: three columns on wide screens, so everything fits without scrolling ---------- */
.cv-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.rp-rows{display:flex;flex-direction:column;gap:6px}
.rp-row{position:relative;display:grid;grid-template-columns:auto 1fr auto 58px 10px 26px;align-items:center;gap:8px;font-size:calc(13px*var(--fs));color:#cfcfd6;padding-bottom:5px;cursor:pointer}
.rp-row input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}
.rp-row input[type=number]{width:58px;padding:3px 6px;border-radius:7px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);font:500 calc(12px*var(--fs)) var(--f-mono);text-align:right}
.rp-row .rp-every{font-size:calc(11.5px*var(--fs));color:var(--muted)}
.rp-row .unit{font:calc(11px*var(--fs)) var(--f-mono);color:var(--muted)}
.rp-row.dim .rp-n,.rp-row.dim .rp-every{opacity:.5}
.rp-bar{position:absolute;left:23px;right:0;bottom:0;height:2px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.rp-bar b{display:block;height:100%;width:0;background:var(--accent);transition:width .25s linear}
@media (min-width:1280px){
  .cv-panel{width:min(1180px,calc(100% - 40px));left:auto}
  .cv-body{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:22px;overflow:hidden;padding-top:14px}
  .cv-col{overflow-y:auto;padding-right:4px;scrollbar-width:thin}
  .cv-col + .cv-col{border-left:1px solid var(--line);padding-left:20px}
  .knobs{gap:8px 4px}
  .dial{width:48px;height:48px}
  .dial i{top:7px;height:11px;transform-origin:50% 17px}
  .faders{gap:8px}
  .cv-chips button{padding:4px 10px}
  .cv-chips.swatch button{width:24px;height:24px}
  .cyc-list{grid-template-columns:1fr 1fr}
}

/* ---------- Drift toggle ---------- */
.pill.icon-only{padding:0;width:36px;justify-content:center}
#driftBtn .i-drift{display:none}
#driftBtn[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:rgba(var(--acc-rgb),.1)}
#driftBtn[aria-pressed=true] .i-drift{display:block}
#driftBtn[aria-pressed=true] .i-still{display:none}
.np.drifting .np-info > *{will-change:transform}
.np.drifting .np-info::before{opacity:.7}

/* ---------- Browse menu (Now Playing header) ---------- */
.npm-wrap{position:relative}
.pill.browse{gap:7px}
.npm{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:min(400px,calc(100vw - 32px));max-height:min(72vh,640px);display:flex;flex-direction:column;border-radius:14px;background:rgba(20,19,22,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(var(--acc-rgb),.22);box-shadow:0 22px 60px rgba(0,0,0,.6);animation:menuIn .14s ease;text-shadow:none}
.npm-search{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.npm-search svg{color:var(--muted);width:16px;height:16px}
.npm-search input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;font-size:calc(14px*var(--fs));outline:none}
.npm-body{overflow-y:auto;padding:6px 6px 10px}
.npm-h{padding:10px 10px 4px;font-size:calc(10.5px*var(--fs));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.npm-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:9px;text-align:left;color:#dcdbe0}
.npm-item:hover,.npm-item:focus-visible{background:rgba(255,255,255,.06);box-shadow:none;color:#fff}
.npm-item:disabled{opacity:.4;cursor:default}
.npm-item.rec .ix,.npm-item.radio .ix{flex:none;width:22px;text-align:center;font:500 calc(11px*var(--fs)) var(--f-mono);color:var(--muted)}
.npm-item.radio .ix{color:var(--accent)}
.npm-item .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.npm-item .tx b{font-weight:600;font-size:calc(13.5px*var(--fs));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npm-item .tx small{font-size:calc(12px*var(--fs));color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npm-item .len{flex:none;font:calc(11.5px*var(--fs)) var(--f-mono);color:var(--muted)}
.npm-item.on{background:rgba(var(--acc-rgb),.1)}
.npm-item.on .tx b,.npm-item.on .ix{color:var(--accent-2)}
.npm-chips{display:flex;flex-wrap:wrap;gap:5px;padding:4px 6px}
.npm-item.chip{width:auto;padding:5px 11px;border:1px solid var(--line);border-radius:999px;font-size:calc(12.5px*var(--fs));gap:7px}
.npm-item.chip i{font-style:normal;font:calc(10.5px*var(--fs)) var(--f-mono);color:var(--muted)}
.npm-item.chip:hover{border-color:var(--accent)}
.npm-bar{display:flex;align-items:center;gap:8px;padding:4px 4px 6px;position:sticky;top:-6px;background:rgba(20,19,22,.98);z-index:1}
.npm-bar b{flex:1;min-width:0;font:var(--fw-d) calc(17px*var(--fs))/1.2 var(--f-display);letter-spacing:var(--ls-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npm-item.back,.npm-item.playall{width:auto;flex:none;font-size:calc(12.5px*var(--fs));color:var(--accent-2)}
.npm-item.more{justify-content:center;color:var(--muted);font-size:calc(12.5px*var(--fs));margin-top:6px}
.npm-empty{padding:14px 10px;color:var(--muted);font-size:calc(13px*var(--fs))}
@media (max-width:820px){ .pill.browse span{display:none} .pill.browse{padding:0 10px} }

/* Two-step delete: the armed button turns red and asks to be clicked again */
.armed{border-color:#e0705f!important;color:#ffb3a8!important;background:rgba(224,112,95,.14)!important;animation:armed 1s ease-in-out infinite alternate}
@keyframes armed{to{box-shadow:0 0 0 3px rgba(224,112,95,.18)}}
.cv-chips .look .x.armed{width:auto;padding:0 10px 0 8px;font-size:calc(11.5px*var(--fs));font-weight:600}
@media (prefers-reduced-motion:reduce){ .armed{animation:none} }

/* Colour range switch: palettes outside "Classic colours" stay visible but faded and crossed */
.cv-chips.swatch button.out{opacity:.28;filter:saturate(.4);position:relative}
.cv-chips.swatch button.out::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1.5px;background:rgba(255,255,255,.7);transform:rotate(45deg)}

/* Theme colour (Settings): nine colours and a free colour picker (the ＋ circle) */
.set-theme{justify-content:flex-end;max-width:360px}
/* The theme colour also tints the gold artwork: the logo picture, the small spiral on the radio card and the
   gold gradients the inline SVG logo shapes use (--acc-rot / --acc-sat are set with the theme) */
.logo-img{filter:hue-rotate(var(--acc-rot,0deg)) saturate(var(--acc-sat,1))}
.station::after{filter:hue-rotate(var(--acc-rot,0deg)) saturate(var(--acc-sat,1))}
#erpGold stop:nth-child(1){stop-color:var(--accent-2)} #erpGold stop:nth-child(2){stop-color:var(--accent)} #erpGold stop:nth-child(3){stop-color:var(--accent-dark)}
#erpGoldSoft stop:nth-child(1){stop-color:var(--accent-pale)} #erpGoldSoft stop:nth-child(2){stop-color:var(--accent)}
.cv-chips.base .sw-own{position:relative;width:26px;height:26px;border-radius:50%;border:2px dashed rgba(255,255,255,.35);display:grid;place-items:center;color:var(--muted);font-size:13px;cursor:pointer;background-clip:padding-box}
.cv-chips.base .sw-own:hover{border-color:var(--accent);color:var(--accent)}
.cv-chips.base .sw-own.on{border:2px solid #fff;box-shadow:0 0 0 2px var(--bg) inset;color:transparent}
.cv-chips.base .sw-own input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.cv-chips.base .sw-own:has(input:focus-visible){box-shadow:var(--focus)}
@media (min-width:1280px){ .cv-chips.base .sw-own{width:24px;height:24px} }
@media (min-width:1280px) and (max-height:1000px){ .cv-chips.base .sw-own{width:21px;height:21px} }
@media (min-width:1280px){
  .cv-cycle.rp .cv-hint2{display:none}
  .cv-cycle.rp{gap:9px}
  .rp-rows{gap:3px}
}

/* Total length in the clean view's bottom line: only peeks in now and then (see totalAlpha in app.js) */
#npDur{opacity:0;transition:opacity .8s ease}
#npDur.peek{opacity:1}

/* Knob and fader readouts keep a fixed width, so a changing value can't push the controls around */
.knob output{display:block;width:100%;text-align:center;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.fader output{white-space:nowrap;font-variant-numeric:tabular-nums}
.knobs > .knob{min-width:0}

.rp-go{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:var(--accent-2);border:1px solid var(--line);background:rgba(var(--acc-rgb),.06)}
.rp-go:hover{border-color:var(--accent);background:rgba(var(--acc-rgb),.18)}
.rp-go:active{transform:scale(.9)}
.rp-go:focus-visible{border-radius:50%}

/* ERP Radio: no skipping on a live broadcast, so only play/pause stays. It's a station, not a file: no seek line,
   no elapsed or total time, no progress ring or spiral trace; just ERP LIVE and the time of day, like a radio dial */
.radio-mode #back15,.radio-mode #prev,.radio-mode #next,.radio-mode #fwd30{display:none}
.radio-mode #cur,.radio-mode #seek,.radio-mode #dur{display:none}
.radio-mode .seek{justify-content:center}
.seek .live-badge span{width:auto;white-space:nowrap}
.seek .live-badge{white-space:nowrap;font-size:calc(11px*var(--fs));letter-spacing:.12em;text-transform:uppercase}
.seek .live-badge,.seek .live-badge span{font-family:var(--f-ui);font-weight:700;color:var(--accent)}
.seek .live-badge .live-clock{margin-left:6px;font-family:var(--f-mono);font-weight:500;letter-spacing:0;color:#b4aea4}
.seek .live-badge .live-clock:empty{display:none}
.radio-mode .ring .rp,.radio-mode .np-mark .prog{display:none}
.np-live{display:none;align-items:center;gap:8px;font:700 calc(11px*var(--fs)) var(--f-ui);letter-spacing:.12em;text-transform:uppercase}
.np-live b{font:500 calc(11.5px*var(--fs)) var(--f-mono);letter-spacing:0;color:rgba(236,236,240,.62)}
.radio-mode .np-progress{justify-content:center}
.radio-mode .np-progress > :not(.np-live){display:none}
.radio-mode .np-live{display:inline-flex}
/* The header (and the Browse menu that opens from it) sits above the radio ticker, the Tweak panel and drifting text */
.np-head{z-index:6}

.cv-fixed-note{font-size:calc(11.5px*var(--fs));color:var(--accent-2);background:rgba(var(--acc-rgb),.08);border:1px solid rgba(var(--acc-rgb),.25);border-radius:8px;padding:6px 10px;line-height:1.4}

/* Effects (Sparkle, Embers): a switch and a level per row */
.cv-fx{display:flex;flex-direction:column;gap:8px}
.fx-row{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:10px}
.fx-amt{grid-template-columns:44px minmax(0,1fr) 44px}
.fader input{min-width:0}

/* Shorter wide screens: a tighter Custom panel so its three columns still fit */
@media (min-width:1280px) and (max-height:1000px){
  .cv-panel{top:58px;bottom:10px}
  .cv-head{padding-top:8px}
  .cv-head h2{font-size:calc(20px*var(--fs))}
  .cv-hint{padding-bottom:6px}
  .cv-body{padding-top:10px;gap:18px}
  .cv-col{gap:9px}
  .cv-sec{gap:9px}
  .cv-sec + .cv-sec{padding-top:10px}
  .cv-sec h3{font-size:calc(16px*var(--fs))}
  .cv-cycle{gap:6px}
  .cv-cycle + .cv-cycle{padding-top:10px}
  .cv-row,.cv-presets{gap:5px}
  .cv-chips button{padding:3px 9px;font-size:calc(12px*var(--fs))}
  .cv-chips.swatch button{width:21px;height:21px}
  .dial{width:40px;height:40px}
  .dial i{top:6px;height:9px;transform-origin:50% 14px}
  .faders{gap:5px}
  .cv-cycle .cv-hint2{display:none}
  .cyc-list{gap:2px 8px}
  .rp-rows{gap:1px}
}
@media (min-width:1280px) and (max-height:1000px){
  .cv-hint{display:none}
  .cv-head{padding-bottom:6px;border-bottom:1px solid var(--line)}
  .knobs{gap:4px}
  .cv-presets .cv-chips,.cv-row .cv-chips{gap:4px}
}

/* "Next · …" line under the title in the player bar */
.now-next{display:block;margin-top:3px;font-size:calc(11.5px*var(--fs));color:#8f8a82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-next b{color:var(--accent);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.92em}
@media (max-width:820px){ .now-next{display:none} }
@media (max-height:820px) and (min-width:821px){ .now-kick{display:none} }

/* A clear Back button in Now Playing */
.np-back{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 11px;border-radius:999px;border:1px solid rgba(var(--acc-rgb),.55);background:rgba(var(--acc-rgb),.12);color:var(--accent-2);font-weight:600;font-size:calc(14px*var(--fs));transition:background .15s,border-color .15s,color .15s}
.np-back svg{width:20px;height:20px}
.np-back kbd{font:calc(10.5px*var(--fs)) var(--f-mono);color:rgba(var(--acc2-rgb),.7);border:1px solid rgba(var(--acc-rgb),.35);border-radius:4px;padding:0 5px;margin-left:2px}
.np-back:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#1a1200)}
.np-back:hover kbd{color:var(--on-accent,#1a1200);border-color:rgba(26,18,0,.4)}
.np-back:focus-visible{border-radius:999px}
@media (max-width:820px){ .np-back kbd,.np-back span{display:none} .np-back{padding:0 10px} }

/* ---------- Radio card: the card opens the radio page, "Listen now" tunes in on the spot ---------- */
.station{gap:9px;text-align:center}
.st-open{display:flex;flex-direction:column;gap:7px;width:100%;padding:0;text-align:center;color:inherit;background:none;border:0;font:inherit;border-radius:8px}
.st-listen{align-self:center;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 13px 0 9px;border-radius:999px;background:var(--accent);color:var(--on-accent,#1a1200);font-weight:700;font-size:calc(11px*var(--fs));letter-spacing:.12em;text-transform:uppercase;transition:background .15s,transform .15s}
.st-listen svg{width:15px;height:15px;fill:currentColor}
.st-listen:hover{background:var(--accent-2);transform:scale(1.04)}
.st-listen[hidden]{display:none}
.radio .onair .r-viz{margin-top:10px}
.radio .onair > div:nth-child(2){display:flex;flex-direction:column;align-items:stretch;gap:10px}
.radio .onair > div:nth-child(2) [hidden]{display:none}
.r-viz svg{width:18px;height:18px;fill:currentColor}

/* Settings gear in Now Playing, top right */
.np-gear svg{width:18px;height:18px;fill:currentColor;transition:transform .4s ease}
.np-gear:hover svg{transform:rotate(45deg)}

/* Home logo: shows where you are */
.brand[aria-current="page"] .logo-img{filter:hue-rotate(var(--acc-rot,0deg)) saturate(var(--acc-sat,1)) drop-shadow(0 0 10px rgba(var(--acc-rgb),.28))}

/* ---------- Home ---------- */
.home{padding:8px 28px 48px}
.home-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}
.home-h h2{font:var(--fw-d) calc(26px*var(--fs))/1.1 var(--f-display);letter-spacing:var(--ls-d);display:flex;align-items:baseline;gap:10px}
.home-h h2 .n{font-size:.55em;color:var(--muted);font-weight:500}
.btn-play.sm{padding:9px 18px 9px 14px;font-size:calc(14px*var(--fs))}
.btn-play svg{width:18px;height:18px;fill:currentColor}
.hp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,370px),1fr));gap:16px}
.hp{display:flex;flex-direction:column;gap:12px;padding:16px 16px 14px;border-radius:14px;background:linear-gradient(160deg,rgba(var(--acc-rgb),.07),transparent 55%),var(--panel);border:1px solid var(--line);transition:border-color .15s}
.hp:hover,.hp:focus-within{border-color:rgba(var(--acc-rgb),.4)}
.hp-top{display:flex;align-items:center;gap:12px;min-width:0}
.hp-play{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent,#1a1200);transition:transform .15s,background .15s}
.hp-play svg{width:22px;height:22px;fill:currentColor}
.hp-play:hover:not(:disabled){background:var(--accent-2);transform:scale(1.06)}
.hp-play:disabled{background:#2c2c31;color:#66666e;cursor:default}
.hp-name{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.hp-open{font:var(--fw-d) calc(19px*var(--fs))/1.2 var(--f-display);letter-spacing:var(--ls-d);color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-open:hover{color:var(--accent)}
.hp-name small{color:var(--muted);font-size:calc(12px*var(--fs))}
.hp-name .rename{font:var(--fw-d) calc(19px*var(--fs))/1.2 var(--f-display);color:var(--text);background:transparent;border:0;border-bottom:1px dashed rgba(var(--acc-rgb),.7);outline:none;padding:0 0 2px;width:100%}
.hp-list{margin:0;padding:0 0 0 2px;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:calc(13px*var(--fs));color:#c4c4cc;counter-reset:hp}
.hp-list li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;counter-increment:hp}
.hp-list li::before{content:counter(hp) ".";display:inline-block;min-width:20px;color:var(--muted);font-variant-numeric:tabular-nums}
.hp-list li.more{color:var(--muted);font-style:italic}
.hp-list li.more::before{content:""}
.hp-hint{margin:0;color:var(--muted);font-size:calc(13px*var(--fs))}
.hp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;padding-top:4px}
.hp-acts .btn-ghost.sm{padding:6px 12px;font-size:calc(12px*var(--fs))}
.hp-acts .btn-ghost:disabled{opacity:.4;pointer-events:none}
.hp-move{display:inline-flex;flex:none;align-self:flex-start;margin:-4px -6px 0 0}
.hp-acts .danger{margin-left:auto}
.hp-move .act{opacity:.75}
.hp-move .act svg{width:18px;height:18px;fill:currentColor}
.hp:first-child [data-hact=up],.hp:last-child [data-hact=down]{visibility:hidden}
.hp-acts .danger.armed{border-color:#e0705f;color:#ff9585}
.home-empty{padding:28px;border:1px dashed var(--line);border-radius:14px;color:#cfcfd6}
.home-empty p{margin:0 0 6px}
.home-empty .muted{color:var(--muted);font-size:calc(14px*var(--fs))}
.home-sec{margin:0 0 38px}
.home-h .btn-play.sm{flex:none;white-space:nowrap}
.home-hint{margin:5px 0 0;color:var(--muted);font-size:calc(13px*var(--fs))}

/* Home: ERP Live Radio card */
.hm-radio{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:end;margin:6px 0 38px;padding:22px 26px 24px;border-radius:16px;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,rgba(var(--acc-rgb),.17),rgba(var(--acc-rgb),.03) 62%),var(--panel);border:1px solid rgba(var(--acc-rgb),.3)}
.hm-radio::after{content:"";position:absolute;z-index:-1;right:-70px;top:-60px;width:340px;aspect-ratio:558/290;background:url(../img/brand/erp-mark.svg) no-repeat center/contain;opacity:.07;transform:rotate(-9deg);pointer-events:none}
.hm-r-main{min-width:0}
.hm-r-k{display:flex;align-items:center;gap:9px;margin:0;font-size:calc(11.5px*var(--fs));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hm-r-title{margin:8px 0 4px;font:var(--fw-d) calc(clamp(24px,3vw,34px)*var(--fs))/1.12 var(--f-display);letter-spacing:var(--ls-d);overflow-wrap:anywhere}
.hm-r-meta{margin:0;color:var(--muted);font-size:calc(13.5px*var(--fs));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-r-prog{display:flex;align-items:center;gap:12px;margin:14px 0 10px;max-width:560px}
.hm-r-prog .bar{flex:1;height:4px;background:#36363c;border-radius:4px;overflow:hidden}
.hm-r-prog .bar i{display:block;height:100%;width:0;background:var(--accent)}
.hm-r-time{font:calc(12px*var(--fs)) var(--f-mono);color:var(--muted);white-space:nowrap}
.hm-r-next{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 8px;align-items:baseline;color:#c9c9d0;font-size:calc(13px*var(--fs))}
.hm-r-next p{display:flex;align-items:baseline;gap:10px;margin:0;min-width:0;white-space:nowrap}
.hm-r-what,.hm-r-next p b{min-width:0;overflow:hidden;text-overflow:ellipsis}
.hm-r-what{flex:none;max-width:100%}
.hm-r-what:not(:only-child){max-width:calc(100% - 9em - 10px)}
.hm-r-next b{color:var(--accent);font-weight:600;font-size:calc(11px*var(--fs));letter-spacing:.1em;text-transform:uppercase}
.hm-r-acts{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.hm-r-acts .btn-play svg{width:18px;height:18px;fill:currentColor}
.hm-r-acts .btn-ghost{justify-content:center;text-decoration:none}
/* The storyline along the card's foot: season, month, week and today, each with a bar of its parts filled up to now */
.hm-r-story{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 24px;padding-top:16px;border-top:1px solid rgba(var(--acc-rgb),.2);color:inherit;text-decoration:none}
.hs{display:flex;flex-direction:column;gap:3px;min-width:0}
.hs small{font-size:calc(10.5px*var(--fs));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs.ahead small{color:var(--muted)}
.hs b{font-weight:600;font-size:calc(14px*var(--fs));color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
a.hm-r-story:hover b{color:var(--accent-2)}
.hs-bar{display:flex;gap:3px;height:4px;margin-top:6px}
.hs-bar > i{position:relative;flex:1 1 0;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.1)}
.hs-bar > i > i{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.hs-bar > i.past > i{background:rgba(var(--acc-rgb),.5)}
.hs.ahead .hs-bar > i{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* Home: recording cards (continue listening, this week, picks) */
.hr-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.hr{display:flex;align-items:flex-start;gap:13px;padding:14px 16px 14px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line);transition:border-color .15s,background .15s;min-width:0}
.hr:hover,.hr:focus-within{border-color:rgba(var(--acc-rgb),.4)}
.hr.playing{border-color:rgba(var(--acc-rgb),.7);background:linear-gradient(160deg,rgba(var(--acc-rgb),.1),transparent 60%),var(--panel)}
.hr-play{flex:none;width:40px;height:40px;margin-top:2px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);color:var(--text);transition:background .15s,color .15s,transform .15s}
.hr-play svg{width:20px;height:20px;fill:currentColor}
.hr:hover .hr-play,.hr.playing .hr-play,.hr-play:focus-visible{background:var(--accent);color:var(--on-accent,#1a1200)}
.hr-play:hover{transform:scale(1.06)}
.hr-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.hr-kick{color:var(--accent);font-size:calc(11px*var(--fs));font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-title{color:var(--text);text-decoration:none;font-weight:600;font-size:calc(15px*var(--fs));line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hr-title:hover{color:var(--accent)}
.hr-who{color:var(--muted);font-size:calc(13px*var(--fs));line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hr-len{color:var(--muted);font:calc(11.5px*var(--fs)) var(--f-mono);margin-top:3px}

/* Home: genre tiles */
.hg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:10px}
.hg{display:flex;flex-direction:column;gap:4px;height:100%;padding:16px 16px 15px;border-radius:12px;background:linear-gradient(150deg,rgba(var(--acc-rgb),.08),transparent 60%),var(--panel);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s}
.hg:hover,.hg:focus-visible{border-color:rgba(var(--acc-rgb),.55);transform:translateY(-1px)}
.hg b{font:var(--fw-d) calc(19px*var(--fs))/1.15 var(--f-display);letter-spacing:var(--ls-d)}
.hg small{color:var(--muted);font-size:calc(12.5px*var(--fs))}
@media (prefers-reduced-motion:reduce){ .hg:hover,.hg:focus-visible,.hr-play:hover{transform:none} }

@media (max-width:820px){
  .home{padding:8px 12px 32px}
  .hp-grid{grid-template-columns:1fr}
  .hm-radio{grid-template-columns:1fr;padding:18px 18px 20px;margin-bottom:30px}
  .hm-r-acts{flex-direction:row;flex-wrap:wrap}
  .hm-r-acts .btn-play{flex:1;justify-content:center}
  .hm-r-story{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-open{flex-direction:row;align-items:center;gap:9px;width:auto}
  .station{gap:8px}
  .st-listen{align-self:center;height:26px;padding:0 8px}
  .st-listen span{display:none}
}

/* ---------- Sidebar: Home and Browse side by side ---------- */
.side-nav{display:flex;gap:6px;margin:-10px 40px 20px 4px}
.side-nav .home-btn{margin:0;padding:0 11px 0 9px}
/* "All" heads Genres & styles, set apart by a hairline */
.cat.cat-all{margin-bottom:6px;position:relative}
.cat.cat-all::after{content:"";position:absolute;left:12px;right:12px;bottom:-4px;height:1px;background:var(--line)}
/* The playlist the music comes from: gold, with bars that move while it plays */
.cat.pl .eq{display:none;margin:0 8px 0 auto}
.cat.pl.pl-on{color:var(--accent-2)}
.cat.pl.pl-on .eq{display:inline-flex}
.cat.pl.pl-playing .eq i{animation:eq .9s ease-in-out infinite alternate}
.cat.pl.pl-playing .eq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
.cat.pl.pl-playing .eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.6s}
.cat.pl.pl-playing .eq i:nth-child(4){animation-duration:.8s;animation-delay:-.2s}
.hp.pl-on{border-color:rgba(var(--acc-rgb),.7);background:linear-gradient(160deg,rgba(var(--acc-rgb),.16),transparent 60%),var(--panel)}
.hp.pl-playing .hp-play{box-shadow:0 0 0 4px rgba(var(--acc-rgb),.22),0 0 18px rgba(var(--acc-rgb),.45)}
.hp-desc{color:#c4c0b8;font-size:calc(12.5px*var(--fs));line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#playAll.is-on{box-shadow:0 0 0 4px rgba(var(--acc-rgb),.18)}
@media (prefers-reduced-motion:reduce){ .cat.pl .eq i{animation:none !important} }

/* ---------- Playlist editor ---------- */
.pl-edit .set-card{width:min(620px,100%)}
.pl-edit .set-body{display:flex;flex-direction:column;gap:14px;padding-top:16px}
.pe-field{display:flex;flex-direction:column;gap:6px;font-size:calc(11px*var(--fs));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pe-field input,.pe-field textarea{font:500 calc(15px*var(--fs))/1.4 var(--f-ui);letter-spacing:0;text-transform:none;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;resize:vertical}
.pe-field input:focus,.pe-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.18)}
.pe-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;color:var(--muted);font-size:calc(12.5px*var(--fs));margin-top:4px}
.pe-h span{color:var(--text);font-weight:600}
.pe-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pe-list li{display:flex;align-items:center;gap:10px;padding:7px 6px 7px 10px;border-radius:10px;background:var(--panel-2);border:1px solid transparent;cursor:grab}
.pe-list li:hover{border-color:var(--line)}
.pe-list li.dragging{opacity:.45}
.pe-list li.drop-a{box-shadow:inset 0 2px 0 var(--accent)}
.pe-list li.drop-b{box-shadow:inset 0 -2px 0 var(--accent)}
.pe-list li.pe-empty{cursor:default;color:var(--muted);font-size:calc(13px*var(--fs));padding:14px}
.pe-n{flex:none;width:22px;text-align:right;font:calc(11.5px*var(--fs)) var(--f-mono);color:var(--muted)}
.pe-t{flex:1;min-width:0;display:flex;flex-direction:column}
.pe-t b{font-weight:600;font-size:calc(14px*var(--fs));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-t small{color:var(--muted);font-size:calc(12px*var(--fs));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-list .act{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--muted)}
.pe-list .act svg{width:18px;height:18px;fill:currentColor}
.pe-list .act:hover:not(:disabled){color:var(--accent);background:rgba(var(--acc-rgb),.1)}
.pe-list .act.rm:hover{color:#ff9585;background:rgba(224,112,95,.12)}
.pe-list .act:disabled{opacity:.25;cursor:default}
.pe-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 26px 18px;border-top:1px solid var(--line)}

/* ---------- Browse ---------- */
.browse-bar{display:flex;flex-direction:column;gap:10px;margin:22px 40px 6px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.browse-bar[hidden]{display:none}
.bb-row{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:baseline}
.bb-row:last-child{display:flex;align-items:center;gap:10px}
.bb-row:last-child .bb-k{width:84px;flex:none}
.bb-k{font-size:calc(10.5px*var(--fs));font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bb-chips{display:flex;flex-wrap:wrap;gap:6px}
.browse-bar .chip{display:inline-flex;align-items:baseline;gap:6px;padding:4px 12px;font-size:calc(12.5px*var(--fs));color:#cfcfd6}
.browse-bar .chip small{color:var(--muted);font-size:.85em}
.browse-bar .chip.on{background:rgba(var(--acc-rgb),.16);border-color:rgba(var(--acc-rgb),.7);color:var(--accent-2)}
.browse-bar .chip.on small{color:var(--accent)}
.browse-bar select{font:500 calc(13px*var(--fs)) var(--f-ui);color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
@media (max-width:820px){ .bb-row{grid-template-columns:1fr;gap:6px} .browse-bar{padding:12px;margin:14px 12px 4px} }
.hg.hg-all{background:linear-gradient(150deg,rgba(var(--acc-rgb),.2),transparent 70%),var(--panel);border-color:rgba(var(--acc-rgb),.35)}
.home-h a.btn-ghost{text-decoration:none;white-space:nowrap}

/* ---------- Radio cards: "ERP Live presents" and the show ---------- */
.kicker .show-name,.hm-r-k .show-name{color:var(--accent-2);font-weight:700}
.kicker .show-name::before,.hm-r-k .show-name::before{content:"·";margin-right:8px;color:rgba(var(--acc-rgb),.6)}
/* Thinner storyline bars (season · month · week · day) */
.hs-bar{height:2px;gap:2px;margin-top:7px}
.hs-bar > i{border-radius:1px}
/* The segment we're in has the class "now", which also styles the player bar's Now button (.now): undo that here */
.hs-bar > i{display:block;padding:0;border:0;max-width:none;width:auto;min-width:0;box-shadow:none}
/* Home: Today's programme reads as a proper button; hovering fills it */
.hm-r-acts .hm-r-today{border-color:var(--accent);color:var(--accent)}
.hm-r-acts .hm-r-today:hover,.hm-r-acts .hm-r-today:focus-visible{background:rgba(var(--acc-rgb),.16);border-color:var(--accent-2);color:var(--accent-2)}
/* Radio page: both buttons stand out */
.radio .onair .r-join{justify-content:center;padding:14px 28px;font-size:calc(15.5px*var(--fs));font-weight:700;box-shadow:0 0 0 4px rgba(var(--acc-rgb),.16),0 8px 24px rgba(var(--acc-rgb),.28)}
.radio .onair .r-join svg{width:20px;height:20px;fill:currentColor}
.radio .onair .r-viz,.radio .onair #rLive{justify-content:center;margin-top:0;border-color:var(--accent);color:var(--accent);font-weight:600;background:rgba(var(--acc-rgb),.06)}
.radio .onair .r-viz:hover,.radio .onair #rLive:hover{background:rgba(var(--acc-rgb),.18);border-color:var(--accent-2);color:var(--accent-2)}
/* Today's programme: what already played today, folded away */
.sched-past{margin:0 0 6px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.015)}
.sched-past > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--muted);font-size:calc(13px*var(--fs));font-weight:600}
.sched-past > summary::-webkit-details-marker{display:none}
.sched-past > summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.sched-past[open] > summary::before{transform:rotate(45deg)}
.sched-past > summary:hover{color:var(--accent)}
.sched-past > ol{padding:0 0 8px}
.slot.past{opacity:.62}
.slot.past:hover{opacity:1}

/* ---------- Estonian Record Productions ---------- */
.erp-foot{display:flex;align-items:center;justify-content:center;gap:12px 28px;flex-wrap:wrap;margin:46px 0 8px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:calc(13px*var(--fs));text-align:center}
.erp-foot img{display:block;width:150px;height:auto;opacity:.55;transition:opacity .2s}
.erp-foot a:hover img{opacity:.9}
.erp-foot p{margin:0}
.erp-foot-url{color:var(--accent)}
.side-foot .about{display:flex;align-items:center;gap:10px;text-decoration:none;line-height:1.25}
.side-foot .about-logo{width:30px;height:auto;flex:none;object-fit:cover;object-position:left;aspect-ratio:558/290;opacity:.5;transition:opacity .2s}
.side-foot .about:hover .about-logo{opacity:.95}
.side-foot .about span{display:flex;flex-direction:column}
.side-foot .about small{color:var(--accent);opacity:.8;font-size:.92em}
@media (max-width:820px){ .side-nav{display:none} }
.hm-r-acts > *{white-space:nowrap}
/* Shuffle: beside Play all, and on Home's playlist cards */
#shuffleBtn svg,.hp-shuffle svg{width:18px;height:18px;fill:currentColor}
#shuffleBtn.is-on,.hp-shuffle.is-on{border-color:var(--accent);color:var(--accent-2);background:rgba(var(--acc-rgb),.14)}
.hp-shuffle{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:#cfcfd6;transition:color .15s,border-color .15s}
.hp-shuffle:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.hp-shuffle:disabled{opacity:.35;cursor:default}

/* The radio's playback log (?radiolog): what the player did, to copy and send when a phone stopped the radio */
.radiolog{position:fixed;inset:12px;z-index:9999;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.radiolog header{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.radiolog header b{flex:1;min-width:10em}
.radiolog pre{flex:1;margin:0;overflow:auto;font:12px/1.45 var(--f-mono);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}