/* Shen Radio — console (direction A). One compact centered console at every size; sheets for the rest. */
:root{
  --bg:#08090b; --bg2:#0f1115; --bg3:#15181d;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --fg:#f3f4f6; --mid:#b9bfca; --dim:#9198a6;
  --acc:#3ee9ff; --acc-ink:#031317; --err:#ff7a5f;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,"Hiragino Sans","Noto Sans CJK JP","Noto Sans Arabic",sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --pad:18px; --ctl:64px; --play:76px; --dockh:56px; --gap:14px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.38}
a{color:inherit}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:12px}
/* Capitals with wide tracking only make sense in Latin/Cyrillic */
:lang(ja) .caps,:lang(zh) .caps,:lang(ko) .caps{letter-spacing:.04em!important}
/* Arabic: no letter-spacing (it breaks joining) and sans instead of mono */
[lang=ar] *:not([dir=ltr]):not([lang=en]):not(bdi){letter-spacing:0!important}
[lang=ar] .pill,[lang=ar] .kicker,[lang=ar] .vlbl,[lang=ar] .bn-k,[lang=ar] .bn-u,[lang=ar] .sh-head p,[lang=ar] .sh-body h3,[lang=ar] .notice strong,[lang=ar] .spec span,[lang=ar] .dbtn,[lang=ar] .kick{font-family:var(--sans)}

/* Material: grazing light, fine techwear grid, grain. Fixed, under the content, never animated. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 60% at 100% 0%,rgba(var(--accent-rgb,62,233,255),.075),transparent 60%),
    radial-gradient(90% 50% at 0% 100%,rgba(255,255,255,.035),transparent 70%);}
.tex{position:fixed;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(130% 70% at 85% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 80%);mask-image:radial-gradient(130% 70% at 85% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 80%)}
.tex::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px);
  -webkit-mask-image:radial-gradient(60% 38% at 0% 100%,#000,transparent 70%);mask-image:radial-gradient(60% 38% at 0% 100%,#000,transparent 70%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
@media (prefers-contrast:more){.tex,body::after{display:none}:root{--dim:#b9bfca;--mid:#d8dce3;--line2:rgba(255,255,255,.3)}}

/* The console. If browser zoom or large text leaves no room, it scrolls instead of clipping. */
.app{position:relative;z-index:1;height:100vh;height:100dvh;max-width:520px;margin:0 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto;gap:var(--gap);
  padding:max(env(safe-area-inset-top),14px) var(--pad) max(env(safe-area-inset-bottom),12px);scrollbar-width:thin}

/* Desktop keeps the compact A console and uses the remaining width for real live details/history. */
.desktop-rail{display:none}
@media (min-width:1100px) and (min-height:600px){
  .app{max-width:1100px;grid-template-columns:minmax(0,520px) minmax(0,1fr);column-gap:56px;padding-block:28px}
  .app > :not(.desktop-rail){grid-column:1}
  .desktop-rail{display:flex;flex-direction:column;gap:28px;grid-column:2;grid-row:1 / 8;min-height:0;min-width:0;overflow-y:auto;border-inline-start:1px solid var(--line2);padding-inline-start:32px}
  .desktop-rail h2{font:500 13px/1.4 var(--mono);color:var(--mid);margin:0 0 18px}
  .desktop-title{font-size:30px;line-height:1.2;font-weight:650;overflow-wrap:anywhere;margin:0 0 10px}
  .desktop-artist{color:var(--mid);margin:0 0 20px;overflow-wrap:anywhere}
  .desktop-history{min-width:0;border-top:1px solid var(--line2);padding-top:24px}
  .desktop-rail .hist li{padding-block:14px}
}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand svg{flex:none}
.wm{margin:0;font-weight:650;letter-spacing:.2em;font-size:13px;white-space:nowrap}
.wm b{font-weight:400;color:var(--mid)}
.model{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--dim);border-inline-start:1px solid var(--line2);padding-inline-start:10px}
.tools{display:flex;gap:8px;flex:none}
.hbtn{min-width:44px;height:44px;padding:0 12px;border-radius:22px;border:1px solid var(--line2);background:var(--bg2);
  display:flex;align-items:center;justify-content:center;gap:7px;font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--mid)}
.hbtn svg{width:18px;height:18px;flex:none}
.hbtn.ico{padding:0;width:44px}

/* Status line: stream state from the API */
.status{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mid);min-height:24px;min-width:0}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex:none;transition:background .3s}
.pill{color:var(--fg);min-width:0;line-height:1.2}
.status .sp{flex:1 1 0;min-width:6px;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
[dir=rtl] .status .sp{background:linear-gradient(270deg,var(--line2),transparent)}
.car-badge{display:none;border:1px solid var(--line2);border-radius:6px;padding:4px 6px;color:var(--mid);flex:none}
.car-badge svg{width:13px;height:13px;display:block}

/* Title block + banner: only the banner gives up height */
.now{min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;position:relative}
.now>:not(.banner){flex-shrink:0}
.now.tight{gap:8px}
.tight .notice{padding:8px 12px;font-size:13px;line-height:1.35}
.tight .notice strong{display:none}
.now.tighter .kicker .caps{display:none}
.banner{--bnh:96px;flex:1 1 var(--bnh);min-height:min(var(--bnh),var(--bnmin,65px));max-height:640px;margin:auto 0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);padding:8px;
  container:une/size;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}
.bn-in{position:relative;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;
  --nav:94px;--A:max(var(--amin,48px),min(100cqh,100cqw - var(--nav) - 138px))}
.bn-in.solo{grid-template-columns:minmax(0,1fr);--nav:0px}
.bn-track{display:flex;min-width:0;min-height:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:12px}
.bn-track::-webkit-scrollbar{display:none}
.bn-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.bn-card{height:100%;width:100%;display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none;border-radius:12px;border:0;background:none;padding:0;text-align:start}
.bn-card:focus-visible{outline-offset:-2px}
.bn-art{width:var(--A);height:var(--A);flex:none;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px var(--line2);background:var(--bg3)}
.bn-ph{display:grid;place-items:center;color:var(--acc)}
.bn-ph svg{width:40%;height:40%}
.bn-txt{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;min-width:0;flex:1}
.bn-k{font:500 11px/1.1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-t{font-weight:620;font-size:17px;overflow-wrap:break-word;hyphens:auto;line-height:1.12;letter-spacing:-.015em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bn-d{display:none;font-size:13px;line-height:1.25;color:var(--mid);overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.bn-u{font:500 11px/1.15 var(--mono);letter-spacing:.04em;color:var(--mid);white-space:normal;overflow-wrap:anywhere}
.bn-u svg{width:12px;height:12px;margin-inline-start:6px;vertical-align:-1px;color:var(--acc)}
[dir=rtl] .bn-u svg,[dir=rtl] .flip{transform:scaleX(-1)}
.bn-nav{display:flex;flex-direction:column;justify-content:space-between}
.bn-btns{display:flex;gap:6px}
.bn-b{width:44px;height:44px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(180deg,#16191e,#0e1014);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);display:grid;place-items:center;padding:0}
.bn-b svg{width:18px;height:18px}
.bn-b:active{transform:translateY(1px);background:#121418}
.bn-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--dim);padding:0 2px}
.bn-segs{display:flex;gap:3px}
.bn-segs i{width:8px;height:3px;border-radius:1px;background:rgba(255,255,255,.16);transition:background .2s}
.bn-segs i.on{background:var(--mid)}
[data-play=playing] .bn-segs i.on{background:var(--acc)}
@container une (max-width:329px) and (min-height:92px){
  .bn-in{--nav:44px}
  .bn-in.solo{--nav:0px}
  .bn-btns{flex-direction:column;gap:4px}
  .bn-nav{justify-content:center}
  .bn-meta{position:absolute;inset-inline-start:5px;bottom:calc((100cqh - var(--A)) / 2 + 5px);padding:4px 6px;border-radius:6px;background:rgba(8,9,11,.88);color:var(--mid);gap:6px;font-size:10.5px}
  .bn-card{gap:10px}
}
@container une (max-width:329px){
  .bn-card{gap:8px}
  .bn-btns{gap:4px}
  .bn-k{display:none}
  .bn-t{font-size:15px}
  .bn-u{letter-spacing:0}
}
@container une (max-width:329px) and (max-height:91px){.bn-u svg{display:none}}
@container une (max-height:63px){.bn-meta{display:none}.bn-nav{justify-content:center}}
@container une (min-width:330px){.bn-in{--A:max(var(--amin,48px),min(100cqh,100cqw - var(--nav) - 184px))}}
@container une (min-width:330px) and (min-height:150px){
  .bn-k{white-space:normal;line-height:1.3}
  .bn-t{font-size:20px}
  .bn-d{display:-webkit-box}
  .bn-txt{gap:9px}
}
@container une (min-height:190px){
  .bn-in{display:block;--S:min(100cqh - 54px,100cqw - 156px);--top:max(0px,(100cqh - var(--S) - 54px) / 2)}
  .bn-in.solo{--S:min(100cqh,100cqw - 156px);--top:max(0px,(100cqh - var(--S)) / 2)}
  .bn-track{height:100%}
  .bn-slide{padding-top:var(--top)}
  .bn-card{height:var(--S);display:grid;grid-template-columns:var(--S) minmax(0,1fr);gap:0 14px;align-items:stretch}
  .bn-art{width:var(--S);height:var(--S)}
  .bn-txt{display:flex;flex-direction:column;gap:9px;padding:6px 0 4px}
  .bn-k{display:block;white-space:normal;line-height:1.25}
  .bn-t{font-size:22px;line-height:1.1;-webkit-line-clamp:3}
  .bn-d{display:-webkit-box;-webkit-line-clamp:2}
  .bn-u{margin-top:auto;letter-spacing:.04em}
  .bn-nav{position:absolute;inset-inline:0;top:calc(var(--top) + var(--S) + 10px);height:44px;flex-direction:row-reverse;align-items:center}
  .bn-meta{gap:12px;padding:0;padding-inline-start:2px}
}
@container une (min-height:190px) and (max-aspect-ratio:11/10){
  .bn-in{--S:min(100cqw - 56px,100cqh - 92px);--top:max(0px,(100cqh - var(--S) - 92px) / 2)}
  .bn-in.solo{--S:min(100cqw,100cqh - 92px)}
  .bn-card{height:auto;grid-template-columns:var(--S) minmax(0,1fr);grid-template-rows:var(--S) auto;row-gap:14px}
  .bn-txt{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k k" "t t" "d u";gap:9px 12px;padding:0 2px}
  .bn-k{grid-area:k}.bn-t{grid-area:t;font-size:28px;-webkit-line-clamp:1}.bn-d{grid-area:d;align-self:end;-webkit-line-clamp:1}.bn-u{grid-area:u;margin:0;align-self:end}
  .bn-nav{inset-inline-start:auto;inset-inline-end:0;width:44px;top:var(--top);height:var(--S);flex-direction:column;align-items:stretch}
  .bn-btns{flex-direction:column}
  .bn-meta{flex-direction:column;align-items:center;gap:10px;padding:2px 0 0}
  .bn-segs{flex-direction:column}
  .bn-segs i{width:3px;height:8px}
}
.kicker{font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;gap:8px;align-items:center;justify-content:space-between;min-width:0;min-height:16px}
.dbtn{flex:none;display:flex;align-items:center;gap:6px;height:44px;margin:-14px 0;margin-inline-end:-6px;padding:0 6px;border:0;background:transparent;border-radius:10px;
  font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:none;color:var(--mid);max-width:65%;min-width:44px;justify-content:flex-end}
.dbtn .dl{white-space:nowrap;overflow:hidden}
.dbtn.icon-only .dl{display:none}
.dbtn svg{width:18px;height:18px;flex:none;color:var(--acc)}
.dbtn:focus-visible{outline-offset:0}
.title{margin:0;font-weight:640;letter-spacing:-.028em;line-height:1.02;
  font-size:clamp(32px,10.5vw,56px);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  padding-inline-start:16px;border-inline-start:2px solid var(--line2);transition:border-color .4s}
:lang(ja) .title,:lang(zh) .title,:lang(ko) .title{letter-spacing:0;line-height:1.12}
.artist{margin:0;padding-inline-start:18px;font-size:17px;line-height:1.3;color:var(--mid);font-weight:450;overflow-wrap:anywhere;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:4px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec div{padding:9px 0 8px;min-width:0}
.spec div+div{border-inline-start:1px solid var(--line);padding-inline-start:12px}
.spec span{display:block;font:500 13px/1.2 var(--mono);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notice{display:none;padding:11px 14px;border-radius:12px;border:1px solid rgba(255,122,95,.4);background:rgba(255,122,95,.07);color:#ffe1d9;font-size:14px;line-height:1.38}
.notice strong{color:var(--err);font:600 12px/1.1 var(--mono);letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:5px}
.notice strong:empty{display:none}
[data-err] .notice{display:block}
[data-err] .spec{display:none}

/* Progress of the current track (station side) */
.timeline{display:grid;gap:8px}
.ruler{position:relative;height:18px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 10%) bottom/100% 7px no-repeat,
    repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0 1px,transparent 1px 2%) bottom/100% 4px no-repeat;}
.ruler::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--line2)}
.fill{position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;background:var(--dim);transition:width .5s linear,background .3s}
.head{position:absolute;bottom:-3px;width:2px;height:21px;inset-inline-start:0;background:var(--fg);margin-inline-start:-1px;transition:inset-inline-start .5s linear}
.tc{display:flex;justify-content:space-between;font:500 12px/1 var(--mono);color:var(--mid);letter-spacing:.06em}

/* Controls */
.controls{display:grid;grid-template-columns:var(--ctl) minmax(0,1fr) var(--ctl);gap:12px;align-items:center}
.vbtn{height:var(--ctl);min-height:44px;border-radius:20px;border:1px solid var(--line2);background:linear-gradient(180deg,#16191e,#0e1014);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px -10px rgba(0,0,0,.8);display:grid;place-items:center;padding:0}
.vbtn svg{width:22px;height:22px}
.vbtn:active{transform:translateY(1px);background:#121418}
.play{min-width:0;height:var(--play);border-radius:calc(var(--play)/2);border:0;padding:0 14px;position:relative;display:flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(180deg,#f5f7f9,#d9dde3);color:#07090b;font-weight:620;font-size:19px;letter-spacing:-.01em;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),inset 0 1px 0 #fff,0 10px 24px -12px rgba(0,0,0,.9);
  transition:background .3s,color .3s,box-shadow .4s}
.play:focus-visible{outline-offset:4px}
.play:active{transform:translateY(1px) scale(.995)}
.play .pico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#07090b;color:#f3f4f6;flex:none}
.play .pico svg{width:18px;height:18px}
.play.noico .pico{display:none}
#playLabel{min-width:0;white-space:nowrap;overflow:hidden}
.volrow{display:flex;align-items:center;gap:10px;min-width:0}
.ib{flex:none;width:44px;height:44px;border-radius:14px;border:1px solid var(--line2);background:var(--bg2);display:grid;place-items:center;padding:0;color:var(--mid)}
.ib svg{width:18px;height:18px}
.ib[aria-pressed=true]{color:var(--err);border-color:rgba(255,122,95,.5)}
.vlbl{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
/* Continuous 0–100 range (1 % steps) drawn as ten segments that fill progressively */
.slider{flex:1;min-width:60px;height:44px;position:relative;display:grid;align-items:center}
.segs{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;pointer-events:none;grid-area:1/1}
[dir=rtl] .segs{transform:scaleX(-1)}
.segs i{--f:0;height:5px;border-radius:1px;background:linear-gradient(90deg,var(--seg-on,var(--mid)) calc(var(--f) * 100%),rgba(255,255,255,.12) 0)}
[data-play=playing] .segs i{--seg-on:var(--acc)}
[data-muted] .segs i{--seg-on:rgba(255,255,255,.3)}
#vol{grid-area:1/1;-webkit-appearance:none;appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;touch-action:none;border-radius:10px}
#vol::-webkit-slider-runnable-track{height:44px;background:transparent}
#vol::-moz-range-track{height:44px;background:transparent}
#vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:4px;height:22px;margin-top:11px;border-radius:2px;background:var(--fg);box-shadow:0 0 0 3px rgba(8,9,11,.85)}
#vol::-moz-range-thumb{width:4px;height:22px;border:0;border-radius:2px;background:var(--fg);box-shadow:0 0 0 3px rgba(8,9,11,.85)}
[data-muted] #vol::-webkit-slider-thumb{background:var(--dim)}
.volval{font:500 12px/1 var(--mono);color:var(--fg);min-width:4ch;text-align:end}

/* Dock to sheets */
.dock{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dock button{min-width:0;height:var(--dockh);border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);padding:0 6px;
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--mid);font-weight:500}
.dock button svg{width:18px;height:18px;opacity:.9;flex:none}
.dock .dl{min-width:0;white-space:nowrap;overflow:hidden}
.dock button:active{background:rgba(255,255,255,.07)}

/* Short message (share copied, playback started…) */
.toast{position:fixed;z-index:5;inset-inline:0;bottom:calc(max(env(safe-area-inset-bottom),12px) + var(--dockh) + 14px);margin:0 auto;width:max-content;max-width:min(480px,calc(100% - 36px));
  padding:10px 14px;border-radius:12px;background:rgba(21,24,29,.96);border:1px solid var(--line2);color:var(--fg);font-size:14px;line-height:1.35;
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.on{opacity:1;transform:none}
.sheet-live{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:rgba(21,24,29,.96);border:1px solid var(--line2);color:var(--fg);font-size:14px;line-height:1.35}
.sheet-live:empty{display:none}

/* States (data-play: idle|connecting|playing|paused; data-pill: connecting|live|onAir|offline) */
[data-pill=live] .status .dot,[data-pill=onAir] .status .dot{background:var(--acc);box-shadow:0 0 0 4px rgba(var(--accent-rgb,62,233,255),.12)}
[data-pill=connecting] .status .dot{background:var(--acc);animation:connection-fade 2.4s ease-in-out infinite}
@keyframes connection-fade{0%,100%{opacity:.55}50%{opacity:1}}
[data-pill=offline] .status .dot{background:var(--err)}
[data-play=playing] .title{border-color:var(--acc)}
[data-play=playing] .fill{background:var(--acc)}
[data-play=playing] .play{background:linear-gradient(180deg,#1a1e24,#101317);color:var(--fg);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb,62,233,255),.38),inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px -18px rgba(var(--accent-rgb,62,233,255),.55)}
[data-play=playing] .play .pico{background:var(--acc);color:var(--acc-ink)}
[data-play=connecting] .play .pico{background:var(--bg3);color:var(--acc)}
[data-err] .title{border-color:var(--err)}
[data-err] .play .pico{background:var(--err);color:#1a0703}
@keyframes blink{50%{opacity:.25}}

/* Sheets */
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:520px;max-height:min(82dvh,680px);padding:0;border:0;border-radius:22px 22px 0 0;
  background:rgba(18,20,25,.96);-webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);
  color:var(--fg);box-shadow:0 -1px 0 rgba(255,255,255,.1),0 -30px 60px -20px rgba(0,0,0,.8);overflow:hidden;
  display:none;flex-direction:column}
dialog.sheet[open]{display:flex;animation:up .32s var(--ease)}
dialog.sheet::backdrop{background:rgba(3,4,6,.66)}
@keyframes up{from{transform:translateY(24px);opacity:0}}
.sh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px var(--pad) 12px;border-bottom:1px solid var(--line);flex:none}
.sh-head h2{margin:0;font-size:20px;font-weight:620;letter-spacing:-.015em}
.sh-head p{margin:5px 0 0;font:500 11px/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.sh-head .acts{display:flex;gap:8px;flex:none}
.close{width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:var(--bg3);display:grid;place-items:center;flex:none;padding:0}
.close svg{width:18px;height:18px}
.pbtn{min-height:48px;padding:0 14px;border-radius:24px;border:1px solid var(--line2);background:var(--bg3);display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg)}
.pbtn svg{width:16px;height:16px}
.sh-body{overflow:auto;padding:8px var(--pad) max(env(safe-area-inset-bottom),20px);overscroll-behavior:contain}
.hist{list-style:none;margin:0;padding:0}
.hist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
.hist b{display:block;font-weight:560;font-size:16px;overflow-wrap:anywhere}
.hist .ha{color:var(--mid);font-size:14px;overflow-wrap:anywhere}
.hist time{font:500 12px/1 var(--mono);color:var(--dim);grid-column:2;grid-row:1}
.note{margin:14px 0 4px;color:var(--dim);font-size:13px;line-height:1.45}
.warn{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line2);font-size:14px;line-height:1.4;color:var(--mid);margin:10px 0 6px}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);min-height:72px}
.row .lbl{min-width:0}
.row .lbl b{display:block;font-weight:560;font-size:16px}
.row .lbl span{color:var(--dim);font-size:13px}
.sw{flex:none;width:68px;height:44px;border-radius:22px;border:1px solid var(--line2);background:var(--bg3);position:relative;transition:background .2s;padding:0}
.sw::after{content:"";position:absolute;top:5px;inset-inline-start:5px;width:32px;height:32px;border-radius:50%;background:#cfd4dc;transition:transform .25s var(--ease)}
.sw[aria-checked=true]{background:rgba(var(--accent-rgb,62,233,255),.22);border-color:rgba(var(--accent-rgb,62,233,255),.5)}
.sw[aria-checked=true]::after{transform:translateX(24px);background:var(--acc)}
[dir=rtl] .sw[aria-checked=true]::after{transform:translateX(-24px)}
.seg{display:flex;border:1px solid var(--line2);border-radius:14px;overflow:hidden;flex:none}
.seg button{min-width:72px;height:48px;border:0;background:transparent;color:var(--mid);font-size:14px;padding:0 10px}
.seg button[aria-pressed=true]{background:var(--fg);color:#07090b;font-weight:600}
.list{display:grid;gap:8px;margin:10px 0}
.item{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:14px;border:1px solid var(--line2);background:var(--bg3);
  color:var(--fg);text-decoration:none;font-size:15px;text-align:start;width:100%}
.item .ii{flex:none;width:22px;text-align:center;color:var(--mid);font-family:var(--mono)}
.item span.t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.item em{font-style:normal;color:var(--dim);font-size:13px;overflow-wrap:anywhere}
.item[aria-pressed=true]{border-color:var(--acc)}
.item.accent{border-color:rgba(var(--accent-rgb,62,233,255),.35)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.grid2 .item{min-height:60px}
.sh-body h3{margin:18px 0 6px;font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sh-body p{color:var(--mid);line-height:1.5;font-size:15px;margin:6px 0}
.foot{margin-top:18px;color:var(--dim);font-size:13px}
/* Legal documents (original HTML from app.js) */
.legal-doc{display:flex;flex-direction:column;gap:6px}
.legal-doc h3{font:600 15px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--fg);margin:18px 0 6px}
.legal-doc ul{color:var(--mid);padding-inline-start:20px;line-height:1.5;font-size:15px;margin:6px 0}
.legal-doc a{color:var(--acc)}
.legal-callout{padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.035);margin:8px 0}
.legal-callout strong{display:block;margin-bottom:4px}
.legal-meta{font:500 12px/1.2 var(--mono);color:var(--dim);margin:10px 0 6px}
#legalContent:focus{outline:none}
/* Live details */
.np-full{display:grid;grid-template-columns:minmax(96px,38%) minmax(0,1fr);gap:16px;align-items:start;padding:10px 0 4px}
.np-art{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--bg3);box-shadow:0 0 0 1px var(--line2)}
.np-art img{width:100%;height:100%;object-fit:cover;display:block}
.np-art-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--acc)}
.np-art-empty svg{width:36%;height:36%}
.np-full-meta{min-width:0;display:grid;gap:6px}
.sh-body .kick{margin:0;font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.sh-body .np-full-title{margin:0;color:var(--fg);font-size:22px;font-weight:640;line-height:1.15;letter-spacing:-.015em;overflow-wrap:anywhere}
.sh-body .np-full-artist{margin:0;color:var(--mid);font-size:16px;line-height:1.35;overflow-wrap:anywhere}
.facts{list-style:none;margin:12px 0 4px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.facts li{display:flex;align-items:center;gap:8px;min-width:0;padding:10px 0;border-bottom:1px solid var(--line);font:500 13px/1.3 var(--mono);color:var(--fg);overflow-wrap:anywhere}
.facts li:nth-child(even){padding-inline-start:12px;border-inline-start:1px solid var(--line)}
.facts li > span:first-child:not(.dot){color:var(--fg)}
.facts [data-a=localTime]{color:var(--dim)}
[data-pill=live] .facts .dot,[data-pill=onAir] .facts .dot{background:var(--acc)}
[data-pill=offline] .facts .dot{background:var(--err)}
.sh-body .hint{margin:12px 0 4px;padding:10px 12px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.035);color:var(--mid);font-size:14px;line-height:1.45}

/* Vehicle mode (set while parked) */
.car{--ctl:84px;--play:96px;--dockh:64px}
.car .bn-k,.car .spec,.car .vlbl,.car .model{display:none}
.car .title{font-size:clamp(32px,10vw,50px);-webkit-line-clamp:2}
.car .artist{font-size:19px}
.car .play{font-size:21px;gap:10px}
.car .controls{gap:10px}
.car .car-badge{display:block}

/* Large text */
.big .artist{font-size:19px}
.big .dock button{font-size:16px}
.big .dbtn,.big .kicker{font-size:12.5px}
.big .status,.big .tc,.big .volval{font-size:13.5px}
.big-sheets .sh-body p,.big-sheets .hist b,.big-sheets .item,.big-sheets .legal-doc ul{font-size:17px}

/* Narrow screens */
@media (max-width:370px){
  .model,.vlbl{display:none}
  .wm{letter-spacing:.14em}
  .dock button{flex-direction:column;gap:4px;font-size:13px}
  .status{gap:8px}
  .controls{--ctl:56px;gap:10px}
  .play{padding:0 10px;gap:9px}
  .play .pico{width:36px;height:36px}
  .car{--ctl:60px;--play:84px}
  .car .title{font-size:clamp(28px,9vw,36px)}
  .np-full{grid-template-columns:minmax(0,1fr)}
  .np-art{max-width:200px}
}
@media (max-height:760px){.banner{--bnh:84px}}
@media (max-height:700px){
  :root{--gap:10px;--play:68px;--ctl:60px;--dockh:52px}
  .title{font-size:clamp(30px,9.5vw,44px)}
  .spec div{padding:7px 0 6px}
}
@media (max-height:620px){
  .spec{display:none}
  .title{-webkit-line-clamp:2;font-size:clamp(26px,8.6vw,38px)}
  .artist{font-size:15px}
  :root{--gap:8px;--play:62px;--ctl:56px;--dockh:50px}
  .banner{--bnh:72px;padding:6px;border-radius:16px}
  .bn-txt{gap:5px}
  .volrow .ib,.slider,#vol{height:44px}
  .tc{font-size:11.5px}
  .timeline{gap:6px}
  .ruler{height:14px}
  .now{gap:8px}
  .notice{padding:8px 12px;font-size:13px;line-height:1.35}
  .notice strong{display:none}
  [data-err] .title{-webkit-line-clamp:1}
  .car{--play:76px;--dockh:54px}
  .car .now{gap:6px}
  .car .title{font-size:clamp(26px,8.6vw,32px)}
}
/* Landscape phone (or 200 % zoom): the same console split in two columns, still centered */
@media (orientation:landscape) and (max-height:520px) and (min-width:540px){
  .app{max-width:900px;grid-template-columns:1.15fr 1fr;grid-template-rows:auto minmax(0,1fr) auto auto auto auto;column-gap:28px;row-gap:10px;
    padding-inline:max(env(safe-area-inset-left),24px) max(env(safe-area-inset-right),24px)}
  .top{grid-column:1/-1}
  .status{grid-column:2;grid-row:2;align-self:start}
  .now{grid-column:1;grid-row:2/7;justify-content:center}
  .timeline{grid-column:2;grid-row:3}
  .controls{grid-column:2;grid-row:4}
  .volrow{grid-column:2;grid-row:5}
  .dock{grid-column:2;grid-row:6}
  .dock button{flex-direction:column;gap:3px;font-size:13px;padding:0 4px}
  .vlbl{display:none}
  .dock button svg{width:16px;height:16px}
  .spec{display:none}
  .banner{--bnh:76px;--bnmin:76px;margin:0 0 8px;padding:6px}
  .bn-in{--amin:62px}
  .now::after{content:"";flex:1 1 0;margin-top:-12px}
  .title{font-size:clamp(26px,5.6vw,46px);-webkit-line-clamp:2}
  :root{--play:60px;--ctl:56px;--dockh:48px}
  .car{--ctl:58px;--play:84px;--dockh:54px}
  dialog.sheet{max-height:94dvh}
  .toast{bottom:12px}
}

/* Reduced motion: system or setting; .init suppresses the first-paint transitions */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.rm *,.rm *::before,.rm *::after,.init *,.init *::before,.init *::after{animation:none!important;transition:none!important}