#radio{padding-bottom:28px;color:#eee}#radioApp{max-width:760px;margin:0 auto}.radioHeading{display:flex;justify-content:space-between;align-items:center;padding:14px 0 20px}.radioHeading small{color:var(--hub-color-ff9d00,#ff9d00);font-size:12px;letter-spacing:2px}.radioHeading h1{margin:6px 0;font-size:30px}.radioHeading>span{font-size:12px;color:#a5a5a5}.radioNow,.radioPanel,.radioComments,#radioProfiles{background:#101112;border:0;border-radius:22px;padding:20px;margin-bottom:16px}.radioCover{width:120px;height:120px;border-radius:18px;background:#191919;display:grid;place-items:center;margin:0 auto 20px;color:var(--hub-color-ffa000,#ffa000);font-size:55px;overflow:hidden}.radioCover img{width:100%;height:100%;object-fit:cover}.radioNow>small{display:block;text-align:center;color:#aaa;font-size:10px;letter-spacing:2px}.radioNow h2{font-size:24px;line-height:1.25;text-align:center;margin:12px 0 6px;overflow-wrap:anywhere}.radioNow>p{text-align:center;color:#aaa;margin:0 0 20px}.radioProgress{height:3px;background:#292929;border-radius:9px;overflow:hidden;margin-top:24px}.radioProgress span{display:block;height:100%;background:var(--hub-color-ff9d00,#ff9d00);transition:width 1s linear}.radioTimes{display:flex;justify-content:space-between;font-size:12px;color:#888;margin:8px 0 20px}.radioActions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0}.radioActions .btn,#radio .btn,#radioProfiles .btn,.radioDialog .btn{background:#202020;border:0;color:#eee;border-radius:12px;padding:10px 14px;font-size:13px;min-height:42px}.radioActions .primary,#radio .primary{background:var(--hub-color-ff9d00,#ff9d00);color:#111}.radioVolume{display:flex;gap:12px;align-items:center;font-size:12px;color:#aaa}.radioVolume input{flex:1;min-width:0;accent-color:var(--hub-color-ff9d00,#ff9d00)}#radio input[type=range]{accent-color:var(--hub-color-ff9d00,#ff9d00)}.radioPanel summary{cursor:pointer;font-weight:650;padding:5px 0}.radioAdmin{padding-top:16px}.radioAdmin form{display:grid;gap:10px}.radioAdmin label{font-size:13px;color:#aaa}.radioAdmin .field,#radioProfiles .field,#radioCommentForm .field{background:#1c1d1e;border:0;color:#eee;border-radius:12px;min-width:0;width:100%;box-sizing:border-box;padding:12px;font:inherit}.radioAdmin .muted{font-size:12px;line-height:1.5}.radioListRow{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #232323;font-size:13px}.radioListRow>div{min-width:0}.radioListRow b{overflow-wrap:anywhere}.radioListRow small{display:block;color:#999;margin-top:5px}.radioListRow .btn{padding:8px!important;font-size:11px!important}.radioComment{padding:12px 0;border-bottom:1px solid #222}.radioComment b{font-size:12px;color:var(--hub-color-ffab27,#ffab27)}.radioComment p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;margin:7px 0}.radioComment .btn{font-size:10px!important;min-height:28px!important}#radioCommentsList{max-height:400px;overflow:auto}#radioCommentForm{display:flex;gap:8px;margin-top:14px}#radioProfileCreate{display:flex;gap:8px}#radioProfiles h3{font-size:17px;margin:0 0 12px}#radioProfiles .muted{font-size:12px}.radioDialog{background:#151515;color:#eee;border:0;border-radius:20px;width:min(90vw,500px);box-sizing:border-box;padding:24px}.radioDialog::backdrop{background:#000b}.radioDialog pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:50vh;overflow:auto;font:14px/1.6 system-ui}.radioDialog h3{overflow-wrap:anywhere}.radioDialog .btn{margin:5px}.radioNow [hidden],#radio [hidden]{display:none!important}@media(max-width:350px){.radioNow,.radioPanel,.radioComments{padding:14px}.radioActions .btn{padding:9px;font-size:12px}.radioHeading h1{font-size:26px}.radioHeading>span{max-width:110px;text-align:right}.radioListRow{flex-wrap:wrap}}@media(min-width:800px){.radioCover{width:160px;height:160px}.radioNow{padding:28px}}@media(prefers-reduced-motion:reduce){.radioProgress span{transition:none}}

/* Borderless player, with amber waves behind the cover driven by the music signal. */
#radio .radioNow{position:relative;isolation:isolate;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none}
#radio .radioPanel,#radio .radioComments{background:#090909}
#radio .radioNow .btn:not(.primary){background:#161616}
#radio .radioCover{background:#0b0b0b;box-shadow:0 14px 40px #0009,0 0 26px var(--hub-color-ff980014,#ff980014)}
#radio .radioLight{position:absolute;z-index:-1;pointer-events:none;top:-100px;left:-10px;right:-10px;height:500px;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 40%,#000 0%,#000 28%,transparent 100%);mask-image:radial-gradient(ellipse closest-side at 50% 40%,#000 0%,#000 28%,transparent 100%)}
#radio .radioLight::before,#radio .radioLight::after{content:"";position:absolute;pointer-events:none;opacity:var(--radio-light-opacity,.44);transition:transform .16s ease-out,opacity .35s ease-out}
#radio .radioLight::before{top:65px;left:-14%;width:128%;height:330px;border-radius:55% 40% 64% 48%;background:radial-gradient(ellipse at 42% 42%,var(--hub-color-ff9d00d0,#ff9d00d0) 0%,var(--hub-color-ff72006b,#ff72006b) 24%,transparent 58%),radial-gradient(ellipse at 76% 28%,var(--hub-color-ffbd5680,#ffbd5680) 0%,transparent 42%),radial-gradient(ellipse at 22% 66%,var(--hub-color-df480055,#df480055) 0%,transparent 43%);filter:blur(26px);transform:translate3d(var(--radio-light-x,0px),var(--radio-light-y,0px),0) rotate(var(--radio-light-turn,0deg)) scale(var(--radio-light-scale,1))}
#radio .radioLight::after{top:60px;left:18%;width:76%;height:290px;border-radius:43% 62% 40% 68%;background:radial-gradient(ellipse at 65% 35%,var(--hub-color-ffd170b0,#ffd170b0) 0%,var(--hub-color-ff7d006b,#ff7d006b) 25%,transparent 62%);filter:blur(32px);transform:translate3d(var(--radio-wave-x,0px),var(--radio-wave-y,0px),0) rotate(var(--radio-wave-turn,-22deg)) scale(var(--radio-wave-scale,1))}
#radio .radioPlaying .radioLight::before,#radio .radioPlaying .radioLight::after{will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){#radio .radioLight::before,#radio .radioLight::after{transform:none;transition:none;will-change:auto}}

/* Restore the shared amber header while keeping the cover light independent. */
body.radioActive{background:var(--hub-page-background)!important;background-attachment:fixed!important}
#radio .radioControls{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin:14px 0 20px;min-width:0}
#radio .radioPlaybackActions{display:flex;align-items:center;gap:4px;flex:none}
#radio .radioIconButton{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:9px;border:0;border-radius:0;background:transparent;color:#bdbdbd;cursor:pointer}
#radio .radioIconButton svg,#radio .radioVolume>svg{width:20px;height:20px;flex:none}
#radio .radioIconButton:hover,#radio .radioIconButton:active{background:transparent;color:var(--hub-color-ff9d00,#ff9d00)}
#radio .radioIconButton:focus-visible{outline:1px solid var(--hub-color-ff9d00,#ff9d00);outline-offset:2px;border-radius:6px}
#radio .radioVolume{flex:1;min-width:0;gap:10px;color:#a5a5a5}
#radio .radioVolume input{appearance:none;-webkit-appearance:none;width:100%;height:32px;margin:0;padding:0;background:transparent;cursor:pointer;outline:none}
#radio .radioVolume input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--hub-color-ff9d00,#ff9d00) 0 var(--radio-volume-fill,80%),#292929 var(--radio-volume-fill,80%) 100%)}
#radio .radioVolume input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;border:0;border-radius:50%;background:var(--hub-color-ff9d00,#ff9d00);margin-top:-4px;box-shadow:none}
#radio .radioVolume input::-moz-range-track{height:3px;border:0;border-radius:3px;background:#292929}
#radio .radioVolume input::-moz-range-progress{height:3px;border-radius:3px;background:var(--hub-color-ff9d00,#ff9d00)}
#radio .radioVolume input::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--hub-color-ff9d00,#ff9d00);box-shadow:none}
#radio .radioVolume input:focus-visible{outline:none}
#radio .radioVolume input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--hub-color-ff9d0033,#ff9d0033)}
#radio .radioVolume input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--hub-color-ff9d0033,#ff9d0033)}

/* Volume expands inline: the speaker moves left, other icons stay at the right. */
#radio .radioVolumeControl{display:flex;align-items:center;gap:8px;flex:none}
#radio .radioVolumePanel{display:flex;align-items:center;position:static;width:clamp(80px,26vw,160px);min-width:0;box-sizing:border-box;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
#radio .radioVolumePanel .radioVolume{width:100%;margin:0}

/* Speaker retains the neutral icon colour while controlling volume. */
#radio #radioVolumeButton,#radio #radioVolumeButton:hover,#radio #radioVolumeButton:active{color:#bdbdbd}

/* Owner controls live in the admin page, never inside the listener player. */
#radioAdminRoot [hidden]{display:none!important}
#radioAdminRoot .btn{background:#202020;border:0;color:#eee;border-radius:12px;padding:10px 14px;font-size:13px;min-height:42px}
#radioAdminRoot .primary{background:var(--hub-color-ff9d00,#ff9d00);color:#111}

/* Keep the radio heading near the header and use free space above the player. */
body.radioActive .app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding-bottom:calc(86px + env(safe-area-inset-bottom));background:transparent!important}
body.radioActive .top{flex:none;background:var(--hub-top-fade)!important}
body.radioActive #radio.on{display:flex;flex:1;min-width:0;padding-bottom:0}
body.radioActive #radioApp{display:flex;flex-direction:column;flex:1;width:100%;min-width:0}
#radio .radioHeading{flex:none}
#radio .radioNow{flex:none;margin-top:auto;margin-bottom:0}
#radio #radioUpcoming,#radio #radioComments{flex:none}

/* Give the desktop WebView a clear gap above the cover and remove unused player space. */
#radio .radioHeading{margin-bottom:48px}
#radio .radioNow{padding-bottom:16px}
#radio .radioControls{margin-bottom:0}
#radio .radioNow>.radioActions:not(:has(>button:not([hidden]))){display:none}
#radio #radioCallStatus:empty{display:none}

/* Admin work picker: individual tracks with native seek/play controls. */
#admin .radioLibraryCount{color:#999;margin:20px 0 8px;font-size:13px}#admin .radioLibraryCount b{color:var(--hub-color-ff9d00,#ff9d00)}#radioWorkPicker{margin-top:16px}.radioWorkPickerHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.radioWorkCard{border:1px solid #242424;border-radius:18px;padding:14px;margin:12px 0;background:#080808;min-width:0}.radioWorkMeta{display:flex;gap:12px;align-items:center;margin-bottom:12px}.radioWorkMeta img{width:48px;height:48px;border-radius:12px;object-fit:cover}.radioWorkMeta>div{min-width:0;flex:1}.radioWorkMeta b{display:block;overflow-wrap:anywhere;font-size:14px}.radioWorkMeta small{display:block;color:#888;margin-top:4px;font-size:12px}.radioWorkStatus{display:block;color:#999;font-size:11px;margin-top:6px}.radioWorkStatus.added{color:var(--hub-color-ff9d00,#ff9d00)}.radioWorkCard audio{width:100%;height:36px;display:block;max-width:100%;color-scheme:dark;margin-bottom:10px}.radioWorkCard>.btn{width:100%}.radioWorkCard>.btn:disabled{opacity:.5;cursor:default}