:root{color-scheme:dark;--bg:#100d23;--line:#ffffff25;--pink:#f633a6;--purple:#a558f4;--text:#fcf9ff;--muted:#b7a6d9;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}html{background:#0d0c20}body{overflow-x:hidden;color:var(--text);background:radial-gradient(ellipse at 5% 5%,#62184475,transparent 36%),radial-gradient(ellipse at 90% 32%,#34236c76,transparent 45%),radial-gradient(ellipse at 50% 75%,#55217a35,transparent 45%),linear-gradient(155deg,#1d1136,#151331 53%,#0e0f24);background-attachment:fixed;-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #f59fe7;outline-offset:3px}
.station{width:100%;min-height:100svh;padding:calc(env(safe-area-inset-top,0px) + 18px) 17px calc(138px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;position:relative}
.station-inner{width:min(100%,570px);margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.app-head{width:100%;display:flex;flex-direction:column;align-items:center}.brand-line{width:100%;display:flex;justify-content:center;gap:clamp(10px,4vw,24px);align-items:center}.wordmark{display:flex;align-items:baseline;gap:9px;white-space:nowrap}.wordmark strong{font-style:italic;font-size:clamp(30px,8vw,50px);letter-spacing:-2.5px;font-weight:950}.wordmark span{font-size:clamp(18px,5.2vw,30px);letter-spacing:clamp(3px,1.6vw,9px);font-weight:350;color:#f8eafc}.brand-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:29px;flex-shrink:0}.brand-wave i{width:4px;height:var(--h);border-radius:5px;background:linear-gradient(180deg,#ba60ff,#f33da9)}.brand-wave i:nth-child(1),.brand-wave i:nth-child(5){--h:12px}.brand-wave i:nth-child(2),.brand-wave i:nth-child(4){--h:22px}.brand-wave i:nth-child(3){--h:31px}
.tagline{margin:10px 0 0;font-size:clamp(8px,2.3vw,13px);letter-spacing:clamp(1.5px,.9vw,4.6px);font-weight:800;color:#cbb6e8}.live-pill{display:inline-flex;margin-top:25px;align-items:center;gap:11px;white-space:nowrap;border:1.5px solid #f283d3a6;border-radius:60px;padding:10px 21px;background:#52244655;box-shadow:0 0 20px #f443ab25;font-size:12px;font-weight:850;letter-spacing:2.3px}.live-dot{width:9px;height:9px;background:#fc397f;border-radius:50%;box-shadow:0 0 12px #fc397fbf;animation:breath 1.7s ease-in-out infinite}
.vinyl-stage{width:100%;height:clamp(245px,38svh,400px);display:grid;place-items:center;position:relative;margin-top:6px}.vinyl-glow{width:min(82vw,392px,100%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#e139ae5f 0%,#86297e32 48%,#693cb324 63%,transparent 75%);filter:blur(14px);position:absolute}.vinyl{width:min(78vw,370px,100%);max-height:95%;aspect-ratio:1;border-radius:50%;padding:11px;position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#292b54,#10152f 70%,#624c86);box-shadow:0 0 0 2px #8c66ab18,0 16px 36px #0008,0 0 52px #c044bc35;will-change:transform}.vinyl-disk{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;border:3px solid #7770a444;background:repeating-radial-gradient(circle at 50% 50%,#222242 0px,#232342 6px,#151a36 8px,#161831 14px,#282749 16px,#15162e 21px);box-shadow:inset 0 0 24px #000c,0 2px 4px #141124}.vinyl-center{width:36%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%;background:linear-gradient(125deg,#f53ba8,#963de9);border:4px solid #f3a4df66;box-shadow:0 0 30px #eb4dbd75,0 0 0 7px #130a2d70;transform:rotate(-4deg)}.vinyl-center strong{font-size:clamp(20px,5vw,33px);font-style:italic;letter-spacing:-1px;font-weight:1000}.vinyl-center small{font-size:clamp(8px,2.1vw,12px);letter-spacing:5px;font-weight:900;margin-top:4px}
.equalizer{height:32px;margin-top:2px;display:flex;gap:5px;justify-content:center;align-items:center}.equalizer i{width:5px;border-radius:5px;background:linear-gradient(to top,#f236a8,#7d66ff);height:var(--height);transform-origin:center;opacity:.9}.equalizer i:nth-child(1),.equalizer i:nth-child(13){--height:9px}.equalizer i:nth-child(2),.equalizer i:nth-child(12){--height:18px}.equalizer i:nth-child(3),.equalizer i:nth-child(11){--height:12px}.equalizer i:nth-child(4),.equalizer i:nth-child(10){--height:26px}.equalizer i:nth-child(5),.equalizer i:nth-child(9){--height:15px}.equalizer i:nth-child(6),.equalizer i:nth-child(8){--height:29px}.equalizer i:nth-child(7){--height:24px}
body.is-playing .equalizer i{animation:equalize 1.2s ease-in-out infinite;animation-delay:calc(var(--n,1) * -.11s)}body.is-playing .vinyl{animation:vinyl-turn 35s linear infinite}
.nowplaying{width:100%;max-width:560px;margin-top:18px;text-align:center}.overline{font-weight:900;letter-spacing:5px;font-size:clamp(10px,2.8vw,13px);color:#cbb2e4}.nowplaying h1{font-weight:880;letter-spacing:-.9px;font-size:clamp(20px,5.9vw,29px);line-height:1.27;margin:15px auto 8px;max-width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.song-artist{font-size:clamp(14px,4vw,20px);margin:0;color:#cbbbe8;line-height:1.36;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.music-chip{margin:22px auto 4px;display:inline-flex;gap:12px;align-items:center;border:1px solid #d095ee55;border-radius:50px;padding:10px 22px;background:#32214f70;font-size:12px;font-weight:900;letter-spacing:3px}.music-chip svg{width:18px;height:18px}
.live-info{width:100%;margin-top:auto;padding-top:27px}.signal-line{width:100%;height:7px;background:#554a7766;border-radius:99px;overflow:hidden}.signal-value{height:100%;width:35%;border-radius:99px;background:linear-gradient(90deg,#fa3998,#aa5afa);transition:width 1s ease}.live-info-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:clamp(9px,2.5vw,13px);letter-spacing:2px;font-weight:850;color:#c6b6e5}.live-info-row>span:first-child{display:inline-flex;gap:9px;align-items:center}.live-info-row svg{width:20px;height:20px;color:#f63fa9}
.bottom-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom,0px));width:min(calc(100% - 18px),650px);min-height:80px;z-index:12;border:1px solid #ad83df45;background:linear-gradient(130deg,#2b204dF5,#17182FF5);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-radius:30px;box-shadow:0 18px 45px #050614b5,0 0 12px #b34cc827;display:grid;grid-template-columns:1fr 1fr 1.16fr 1fr 1fr;align-items:center;padding:7px 6px}
.nav-item{color:#e5d8fd;background:transparent;border:0;min-height:58px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;position:relative;padding:7px 1px 6px}.nav-item svg{width:23px;height:23px;stroke:#e3d7ff}.nav-item span{font-size:clamp(9px,2.4vw,12px);font-weight:750;white-space:nowrap}.nav-item.active:after{content:"";width:25px;height:3px;background:linear-gradient(90deg,#ff42a5,#9757ef);border-radius:99px;position:absolute;bottom:0}.main-play{border:none;border-radius:50%;aspect-ratio:1;width:clamp(64px,18vw,83px);margin:-35px auto 0;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#fa43b0,#8740df);border:4px solid #f1a3ed77;box-shadow:0 0 0 12px #8e34ce18,0 6px 28px #cc35cc77;transition:transform .15s,box-shadow .15s}.main-play:active{transform:scale(.95)}.main-play svg{height:31px;width:31px}
.top-buttons{position:fixed;right:12px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:15}.top-buttons button{font-size:10px;color:#e9d8fd;background:#251739b7;border:1px solid #ad81d050;padding:6px 8px;border-radius:10px;font-weight:800}
.autoplay-notice{position:fixed;z-index:16;bottom:calc(101px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);border:1px solid #ffb6f1b5;border-radius:16px;box-shadow:0 10px 45px #0008;background:linear-gradient(115deg,#b437a2,#6a49c8);color:white;font-size:13px;font-weight:800;white-space:nowrap;padding:13px 18px;display:flex;align-items:center;gap:10px}.autoplay-notice[hidden]{display:none}.notice-ico{background:white;color:#d841ad;border-radius:50%;display:grid;place-items:center;width:25px;height:25px}
.sheet-overlay{position:fixed;inset:0;background:#000b;z-index:25;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.sheet-overlay[hidden],.sheet[hidden]{display:none!important}.sheet{position:fixed;z-index:26;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,640px);max-height:90svh;overflow:auto;background:linear-gradient(135deg,#292047,#16162d);border:1px solid #ffffff24;border-bottom:0;border-radius:28px 28px 0 0;box-shadow:0 8px 70px #000c;padding:12px 23px calc(20px + env(safe-area-inset-bottom,0px));color:white}.sheet-handle{width:40px;height:5px;background:#ffffff4a;border-radius:99px;margin:0 auto 12px}.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 10px}.sheet-head h2{font-size:23px;margin:0;letter-spacing:-.5px}.close-sheet{border:0;color:#fff;background:#ffffff1a;border-radius:50%;font-size:27px;width:36px;height:36px;line-height:1}.sheet-help{color:#c3b8dd;font-size:13px;line-height:1.6;margin:10px 0 20px}.form-grid{display:grid;gap:13px}.form-grid label{font-size:12px;color:#e3d3f6;font-weight:750}.form-grid input,.form-grid textarea{display:block;width:100%;margin-top:6px;background:#0d1128c9;color:#fff;border:1px solid #ffffff30;border-radius:12px;padding:13px;font-size:14px}.form-grid textarea{resize:vertical;min-height:95px}.sheet-submit{border:0;background:linear-gradient(110deg,#f63b9c,#a252e8);color:white;font-size:14px;font-weight:850;border-radius:13px;padding:15px 18px;width:100%;margin-top:5px}.sheet-submit:disabled{opacity:.65}.status-msg{margin:12px 0;color:#b9ffcc;font-size:13px}.status-msg.err{color:#ffc0ce}.history-row{padding:12px 0;border-bottom:1px solid #ffffff1f;color:#eee6fa;font-size:13px;overflow-wrap:anywhere}.stat-row{display:flex;gap:10px;justify-content:space-between;margin:10px 0;border-bottom:1px solid #ffffff1a;padding-bottom:10px}.stat-row b{color:#fff}.stat-row span{color:#b5aed0}.pwa-action{background:#ffffff14;border:1px solid #ffffff31;color:white;padding:11px 14px;border-radius:12px;display:inline-flex;gap:8px;margin:14px 0}
@keyframes breath{50%{opacity:.4;transform:scale(.8)}}@keyframes equalize{0%,100%{transform:scaleY(.62)}50%{transform:scaleY(1.2)}}@keyframes vinyl-turn{to{transform:rotate(360deg)}}
@media(min-width:700px){.station{padding-top:35px;padding-bottom:155px}.vinyl-stage{height:390px}.equalizer{margin-top:16px}.nowplaying{margin-top:27px}.live-info{padding-top:40px}.bottom-dock{bottom:18px}.top-buttons{right:calc(50% - 300px)}}
@media(max-height:760px){.station{padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:120px}.live-pill{margin-top:12px;padding:7px 17px}.vinyl-stage{height:clamp(185px,34svh,310px)}.vinyl{width:min(67vw,310px,100%)}.equalizer{margin-top:0;height:22px}.nowplaying{margin-top:9px}.nowplaying h1{margin:8px auto 4px;font-size:clamp(17px,5.1vw,25px)}.music-chip{margin-top:10px;padding:7px 16px}.live-info{padding-top:18px}.bottom-dock{min-height:73px}.main-play{width:clamp(60px,16vw,76px);margin-top:-26px}}
@media(max-width:360px){.brand-wave{gap:2px}.brand-wave i{width:3px}.wordmark{gap:5px}.wordmark strong{font-size:28px}.wordmark span{font-size:18px}.tagline{font-size:8px;letter-spacing:1px}.nav-item span{font-size:9px}.sheet{padding-left:15px;padding-right:15px}}
@media(prefers-reduced-motion:reduce){.live-dot,body.is-playing .equalizer i,body.is-playing .vinyl{animation:none!important}*{scroll-behavior:auto!important}}



/* MIXIA fullscreen PWA: viewport-fitted player, dock and safe areas. */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100%;height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none;background-attachment:scroll}
.station{
  height:100%;height:100dvh;min-height:0;max-height:100dvh;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 15px calc(100px + env(safe-area-inset-bottom,0px));
  overflow:hidden;display:flex;flex-direction:column;align-items:center;
}
.station-inner{flex:1;min-height:0;height:100%;width:min(100%,570px);
  display:flex;flex-direction:column;align-items:center;overflow:hidden}
.app-head{flex:0 0 auto}
.brand-line{min-height:32px}
.tagline{margin-top:4px}
.live-pill{flex:0 0 auto;margin-top:13px;padding:8px 17px}
.vinyl-stage{
  flex:1 1 auto;min-height:95px;max-height:none;height:auto;
  margin-top:5px;margin-bottom:0;overflow:visible;
}
.vinyl{width:min(75vw,350px,100%);height:auto;max-width:100%;max-height:99%;
  aspect-ratio:1;flex-shrink:0}
.vinyl-glow{width:min(80vw,375px,100%);max-height:100%}
.equalizer{flex:0 0 24px;height:24px;margin-top:0}
.nowplaying{flex:0 0 auto;min-height:0;margin-top:8px}
.nowplaying h1{
  font-size:clamp(18px,5.2vw,27px);line-height:1.23;margin:8px auto 4px;
  -webkit-line-clamp:2;
}
.song-artist{font-size:clamp(12px,3.5vw,18px);line-height:1.3;-webkit-line-clamp:1}
.music-chip{margin:9px auto 0;padding:7px 15px;font-size:11px}
.live-info{flex:0 0 auto;margin-top:0;padding-top:13px}
.live-info-row{margin-top:9px}
.bottom-dock{
  bottom:max(7px,env(safe-area-inset-bottom,0px));
  min-height:72px;border-radius:25px;padding:5px 6px;
}
.nav-item{min-height:51px}
.main-play{width:clamp(59px,16vw,78px);margin-top:-23px}
.main-play svg{width:27px;height:27px}
.autoplay-notice{bottom:calc(87px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 25px)}
@media(min-width:700px){
  .station{padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:calc(105px + env(safe-area-inset-bottom,0px))}
  .vinyl-stage{height:auto;max-height:none}
  .vinyl{width:min(45vw,370px,100%);max-height:99%}
  .equalizer{margin-top:3px}
  .nowplaying{margin-top:11px}
  .live-info{padding-top:18px}
  .bottom-dock{bottom:14px}
}
@media(max-height:740px){
  .station{padding-top:calc(env(safe-area-inset-top,0px) + 5px);padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .app-head .tagline{margin-top:2px}
  .live-pill{margin-top:6px;padding:6px 13px;font-size:11px}
  .vinyl-stage{min-height:70px;margin-top:0}
  .vinyl{width:min(64vw,265px,100%);max-height:97%}
  .equalizer{flex-basis:17px;height:17px}
  .equalizer i{max-height:20px}
  .nowplaying{margin-top:3px}
  .nowplaying h1{font-size:clamp(15px,4.65vw,23px);margin:5px auto 3px;-webkit-line-clamp:2}
  .overline{font-size:9px;letter-spacing:3px}
  .song-artist{font-size:12px}
  .music-chip{margin-top:5px;padding:5px 12px;font-size:10px}
  .live-info{padding-top:7px}
  .live-info-row{margin-top:6px}
  .bottom-dock{min-height:66px;border-radius:23px}
  .nav-item{min-height:45px;padding:3px 1px}
  .nav-item svg{width:21px;height:21px}
  .main-play{width:clamp(55px,16vw,70px);margin-top:-18px}
  .autoplay-notice{bottom:calc(77px + env(safe-area-inset-bottom,0px))}
}
@media(max-height:600px){
  .tagline{display:none}
  .live-pill{margin-top:4px;padding:4px 12px}
  .vinyl{width:min(55vw,215px,100%)}
  .music-chip{display:none}
  .station{padding-bottom:calc(75px + env(safe-area-inset-bottom,0px))}
  .bottom-dock{min-height:62px}
}
@supports not (height:100dvh){
  body,.station{height:100svh;max-height:100svh}
}


/* Live spectrum bars: Web Audio AnalyserNode drives actual heights. */
body.is-playing .equalizer i{animation:none!important}
.equalizer i{min-height:4px;max-height:32px;transition:height 56ms ease-out;will-change:height}
@media(prefers-reduced-motion:reduce){.equalizer i{transition:none;will-change:auto}}

/* Accessible default waveform when mobile WebAudio analysis is unavailable. */
.equalizer[data-spectrum="unavailable"] i{height:var(--height)!important;min-height:9px}

/* Full-height live bands even at very low signal, never tiny dots. */
.equalizer i{min-height:9px}

/* Real 13-band Icecast FFT spectrum supplied by /api/spectrum.json.
   When connectivity fails, visibly animated fallback replaces static dots. */
#equalizer{min-height:28px;align-items:center}
#equalizer i{width:6px;min-height:9px;max-height:34px;border-radius:7px;
  transition:height 340ms cubic-bezier(.2,.8,.4,1)}
body.is-playing #equalizer[data-spectrum="audio"] i{
  animation:none!important;transform:none!important
}
body.is-playing #equalizer:not([data-spectrum="audio"]) i{
  height:var(--height)!important;
  animation:equalize 0.88s ease-in-out infinite alternate!important;
}
body.is-playing #equalizer:not([data-spectrum="audio"]) i:nth-child(3n+1){animation-duration:.72s!important;animation-delay:-.32s!important}
body.is-playing #equalizer:not([data-spectrum="audio"]) i:nth-child(3n+2){animation-duration:1.07s!important;animation-delay:-.62s!important}
body.is-playing #equalizer:not([data-spectrum="audio"]) i:nth-child(4n){animation-duration:.93s!important;animation-delay:-.17s!important}
@media(prefers-reduced-motion:reduce){
 body.is-playing #equalizer i{animation:none!important;transition:none!important}
}

/* Two-cultural station identity rotating between both FR/TR slogans. */
.tagline{min-height:1.8em;transition:opacity .2s ease,transform .2s ease;
  text-align:center;white-space:normal;line-height:1.5;display:flex;
  align-items:center;justify-content:center}
.tagline.changing{opacity:0;transform:translateY(-3px)}
@media(max-height:600px){
 .tagline{display:flex;font-size:7px;min-height:1.2em;line-height:1.1}
}
@media(prefers-reduced-motion:reduce){.tagline{transition:none}}

/* Dynamic sound-driven radial pink aura around the record. No lower equalizer. */
.vinyl-stage{isolation:isolate}
.vinyl-glow{z-index:0}
.vinyl-aura{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible;
 --ring-radius:145px;--pulse:.24}
.vinyl{z-index:2}
.vinyl-aura i{
 position:absolute;left:50%;top:50%;height:9px;width:5px;
 transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(0px - var(--ring-radius)));
 border-radius:99px;
 background:linear-gradient(180deg,#ffa0ed,#ff45b5 60%,#c765f7);
 box-shadow:0 0 10px #ff3baa,0 0 18px #ed37b960;
 opacity:.30;
 transition:height .50s cubic-bezier(.22,.61,.36,1),opacity .45s ease;
}
body.is-playing .vinyl-aura i{opacity:.75}
body.is-playing .vinyl-aura[data-spectrum="audio"] i{filter:brightness(1.12)}
.vinyl-aura[data-spectrum="fallback"] i{height:11px!important;opacity:.36}
body:not(.is-playing) .vinyl-aura i{height:6px!important;opacity:.18!important}
@media(max-height:740px){.vinyl-aura i{width:4px}}
@media(prefers-reduced-motion:reduce){.vinyl-aura i{transition:none}}


/* MIXIA vinyl size v13 — slightly smaller on all screens.
   Ring radius is measured from the vinyl by ResizeObserver in app.js. */
.vinyl{width:min(68vw,315px,100%);max-height:96%}
@media(min-width:700px){
  .vinyl{width:min(41vw,330px,100%);max-height:96%}
}
@media(max-height:740px){
  .vinyl{width:min(58vw,240px,100%);max-height:96%}
}
@media(max-height:600px){
  .vinyl{width:min(51vw,200px,100%);max-height:96%}
}

/* v14: radial waveform is anchored to the static disc, never the rotated box.
   Clip all spikes at the stage edge so text and LIVE badge stay unobstructed. */
.vinyl-stage{overflow:hidden;isolation:isolate}
.vinyl-aura i{max-height:30px;width:4px;box-shadow:0 0 7px #ff3baa,0 0 13px #ed37b970}
.nowplaying,.live-pill{position:relative;z-index:4}

/* v15: snare/kick onset pulse from the actual live station FFT.
   Only brightness/glow moves: the ring never expands into text or the LIVE pill. */
.vinyl-stage .vinyl-glow{transition:filter .15s ease-out,opacity .15s ease-out}
.vinyl-aura{transition:filter .16s ease-out}
.vinyl-stage.beat-hit .vinyl-aura{filter:brightness(1.40) saturate(1.38)}
.vinyl-stage.beat-hit .vinyl-glow{filter:blur(14px) brightness(1.45);opacity:1}
@media(prefers-reduced-motion:reduce){
 .vinyl-stage .vinyl-glow,.vinyl-aura{transition:none}
 .vinyl-stage.beat-hit .vinyl-aura,.vinyl-stage.beat-hit .vinyl-glow{filter:none}
}

/* Neon Pulse 2.0: two light layers orbit the existing vinyl without layout shifts.
   Brightness uses actual Icecast spectrum; beat-ripple uses real onset events. */
.vinyl-stage{--vinyl-diameter:245px;--track-energy:.25;--beat-intensity:.4}
.vinyl-stage::before,.vinyl-stage::after{
 content:"";position:absolute;top:50%;left:50%;pointer-events:none;
 width:calc(var(--vinyl-diameter) + 20px);
 height:calc(var(--vinyl-diameter) + 20px);
 border-radius:50%;z-index:1;
}
.vinyl-stage::before{
 background:conic-gradient(from 0deg,#ff3bb4 0deg,transparent 35deg,#8d4ff9 70deg,transparent 100deg,#f869bf 140deg,transparent 180deg,#713de2 220deg,transparent 260deg,#fb5dc4 290deg,transparent 332deg,#ff3bb4 360deg);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
 mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
 opacity:calc(.2 + var(--track-energy) * .75);
 filter:drop-shadow(0 0 7px #f440b9);
 transform:translate(-50%,-50%);
}
body.is-playing .vinyl-stage::before{animation:mixia-neon-orbit 9s linear infinite}
.vinyl-stage::after{
 width:calc(var(--vinyl-diameter) + 22px);
 height:calc(var(--vinyl-diameter) + 22px);
 border:2px solid #ff68cb;
 box-shadow:0 0 10px #f74cbba6,inset 0 0 6px #dc57ca66;
 opacity:0;transform:translate(-50%,-50%) scale(.98)
}
body.is-playing .vinyl-stage.beat-hit::after{animation:mixia-neon-impact .34s ease-out 1}
body.is-playing .vinyl-stage.beat-hit .vinyl-aura{filter:brightness(1.8) saturate(1.5)}
@keyframes mixia-neon-orbit{
 from{transform:translate(-50%,-50%) rotate(0deg)}
 to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes mixia-neon-impact{
 0%{opacity:calc(.55 + var(--beat-intensity) * .45);transform:translate(-50%,-50%) scale(.97)}
 100%{opacity:0;transform:translate(-50%,-50%) scale(1.13)}
}
/* Accessible song picker, dedication and My Requests navigation in sheet. */
.request-search{margin:0 0 14px}
.request-search label{font-size:12px;font-weight:800;color:#e3d3f6}
.request-search input{display:block;margin-top:8px;width:100%;padding:13px;background:#0d1128c9;border:1px solid #ffffff38;border-radius:12px;color:white;outline-color:#f584d3}
.request-results{display:grid;gap:6px}
.request-result{display:flex;flex-direction:column;align-items:start;gap:4px;width:100%;background:#ffffff0b;color:white;border:1px solid #b776d94b;border-radius:12px;padding:11px;text-align:left}
.request-result strong{font-size:13px}.request-result small{color:#c2afdf;font-size:11px}
.request-hint{color:#bba5d9;font-size:11px;margin:10px 0 5px}
.request-picked{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#b9ffd8;background:#204e4155;border:1px solid #77c6a16c;border-radius:12px;padding:10px;font-size:12px}
.request-picked button{background:none;border:none;color:#fff;font-size:19px}
.my-requests-link{display:flex;justify-content:center;gap:12px;align-items:center;text-decoration:none;color:#f8dbf6;background:#ffffff12;border:1px solid #eb90d58c;border-radius:13px;padding:15px;margin-top:20px;font-weight:850;font-size:14px}
.my-requests-link.highlight{box-shadow:0 0 19px #df419e88}
.request-count{background:#e441a5;color:white;padding:3px 8px;border-radius:99px}
@media(prefers-reduced-motion:reduce){
 body.is-playing .vinyl-stage::before{animation:none}
 body.is-playing .vinyl-stage.beat-hit::after{animation:none}
}


/* v17 Safari radial-ring fix:
   A full 360deg circumference, pinned 44 spokes and solid neon border.
   No conic mask or hidden right half from stacking/compositing. */
.vinyl-stage{isolation:isolate;overflow:hidden}
.vinyl-aura{z-index:5!important;overflow:visible;filter:none}
.vinyl-aura i{
 z-index:5;max-height:29px;width:4px;
 box-shadow:0 0 7px #ff3baa,0 0 12px #e854d077;
}
.vinyl-stage::before{
 z-index:3!important;
 background:none!important;
 -webkit-mask:none!important;mask:none!important;
 border:2px solid #e25ac6;
 border-top-color:#ffa3e7;
 border-right-color:#ab70f0;
 border-bottom-color:#f76ecf;
 border-left-color:#ff50b9;
 box-shadow:0 0 10px #ff56c4ad,inset 0 0 5px #cf5bdc55;
 opacity:calc(.38 + var(--track-energy) * .55)!important;
}
.vinyl-stage::after{z-index:4}
body.is-playing .vinyl-stage.beat-hit .vinyl-aura{
 filter:brightness(1.5) saturate(1.4)
}
@media(prefers-reduced-motion:reduce){
 .vinyl-stage::before{animation:none!important}
 .vinyl-aura{transition:none}
}

/* MIXIA v19 / NeON TURNTABLE — deliberately hardware-like circular vinyl.
   The 44 spectrum LEDs still use true AzuraCast stream FFT, not fake audio. */
.vinyl-stage{--vinyl-diameter:265px;--track-energy:.28;--beat-intensity:.4;isolation:isolate;overflow:hidden}
.vinyl-stage .vinyl{
  border:8px solid #171b30;
  padding:8px;
  background:
   radial-gradient(circle at 31% 24%,#ffffff2d 0,transparent 38%),
   conic-gradient(from 24deg,#0c1122 0deg,#383151 38deg,#0f1228 100deg,#6b4b8a 156deg,#15162f 201deg,#51466b 265deg,#0c1122 360deg);
  box-shadow:0 0 0 1px #b379d19b,0 0 0 4px #100b24,0 0 0 5px #df78b044,
             0 9px 32px #04010fc9,0 0 43px #ae399e64;
  max-height:calc(100% - 46px);
}
.vinyl-stage .vinyl-disk{
  background:
    radial-gradient(circle at 30% 18%,#ffffff1d,transparent 34%),
    repeating-radial-gradient(circle at 50% 50%,#0e1024 0px,#1e203b 2px,#090c1a 3px,#161a30 5px,#26253c 6px,#0a0f1d 7px);
  border:1px solid #f1b9ef4b;
  box-shadow:inset 0 0 32px #000b,inset 0 0 4px 2px #ecb9e323;
}
.vinyl-stage .vinyl-disk::before{
  content:"";position:absolute;inset:13px;border-radius:50%;
  background:conic-gradient(from 11deg,transparent 0deg,#ffffff00 24deg,#ffffff15 34deg,
   #ffffff03 56deg,transparent 73deg,#ffffff12 129deg,transparent 145deg,#ffffff14 291deg,transparent 308deg);
  pointer-events:none;
}
.vinyl-stage .vinyl-center{
  background:radial-gradient(circle at 26% 20%,#ffb5e8 0,#ff5fbd 19%,#e12f99 51%,#7628bd 100%);
  border:3px solid #fbaddfff;
  box-shadow:0 0 0 2px #29123d,0 0 18px #fc58b8a0,inset 0 -9px 18px #3d0d70ad;
  position:relative;
}
.vinyl-stage .vinyl-center::after{
  content:"";width:7px;height:7px;border:1.5px solid #13091f;
  background:#ece5f4;border-radius:50%;position:absolute;bottom:13%;left:50%;transform:translateX(-50%);
  box-shadow:0 0 5px #fff;
}
.vinyl-stage .vinyl-center strong{text-shadow:0 2px 5px #6c1f86}
.vinyl-stage .vinyl-glow{
  background:radial-gradient(circle,#d72c9d5b 9%,#6728ac35 48%,transparent 73%);
  filter:blur(18px);opacity:.75;
}
.vinyl-stage .vinyl-aura{z-index:5!important}
.vinyl-stage .vinyl-aura i{
  width:4px!important;max-height:34px;
  background:linear-gradient(180deg,#ffd5f6,#ff52bd 52%,#ab55f8);
  box-shadow:0 0 4px #f7e2ff,0 0 10px #ff3cba,0 0 17px #a64af1a1;
  transition:height 175ms cubic-bezier(.18,.8,.32,1),opacity 185ms ease-out;
}
.vinyl-stage::before{
  width:calc(var(--vinyl-diameter) + 17px);height:calc(var(--vinyl-diameter) + 17px);
  border:2px solid #ff6ac6;border-top-color:#f9b9f0;border-right-color:#804bdf;
  border-bottom-color:#a266ff;border-left-color:#ff44aa;
  box-shadow:0 0 8px #ff6ecaeb,0 0 20px #a23ded6a,inset 0 0 6px #ac39cd65;
  background:none!important;opacity:calc(.45 + var(--track-energy) * .42)!important;
}
.vinyl-stage::after{
  width:calc(var(--vinyl-diameter) + 24px);height:calc(var(--vinyl-diameter) + 24px);
  border:3px solid #ffb6ee;box-shadow:0 0 10px #ff54b8a8,0 0 17px #9149f44d;
}
body.is-playing .vinyl-stage::before{animation:mixia-neon-orbit 8s linear infinite}
body.is-playing .vinyl-stage.beat-hit::after{animation:mixia-neon-impact .38s ease-out 1}
body.is-playing .vinyl-stage.beat-hit .vinyl{filter:brightness(1.13)}
body:not(.is-playing) .vinyl-stage::before{opacity:.22!important}

/* AzuraCast-inspired request dialog: browser, 10 results per page,
   distinct request actions, and persistent My Requests tracking. */
.native-request-head{display:flex;flex-direction:column;gap:10px}
.native-request-head .sheet-help{margin:0;line-height:1.55}
.native-request-head .my-requests-link{margin:0;gap:9px;padding:11px 13px;font-size:13px;justify-content:center;border-color:#f191c48a}
.native-request-head .my-requests-icon{font-size:17px;color:#fc7ec7}
.native-search{margin:17px 0 10px;text-align:left}
.native-search>label{display:block;color:#d8bdea;font-size:12px;font-weight:800;margin-bottom:8px}
.native-search-field{height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;background:#111227;border:1px solid #79588d8c;border-radius:12px}
.native-search-field svg{width:17px;height:17px;fill:none;stroke:#deafea;stroke-width:2;stroke-linecap:round}
.native-search-field input{flex:1;min-width:0;outline:none!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;font-size:13px}
.native-search-field:focus-within{border-color:#ff95d8;box-shadow:0 0 0 2px #f766af39}
.native-request-summary{display:flex;justify-content:space-between;align-items:center;gap:9px;margin:9px 0;color:#c9b2db;font-size:11px;flex-wrap:wrap}
.native-auto{color:#b3f4d6;font-size:10px;font-weight:700}
.native-song-list{display:grid;gap:0;border:1px solid #b681db50;border-radius:14px;overflow:hidden;background:#0c1025cc}
.native-song-columns{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;background:#74458a43;border-bottom:1px solid #b681db5a;color:#d6bfed;font-size:10px;text-transform:uppercase;font-weight:900;letter-spacing:1px;padding:12px 13px}
.native-song-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 11px;border-bottom:1px solid #ffffff16;min-width:0}
.native-song-row:last-child{border-bottom:0}
.native-song-row:nth-child(2n+1){background:#ffffff05}
.native-song-info{min-width:0;display:flex;align-items:center;gap:10px;text-align:left}
.native-song-icon{flex:none;width:37px;height:37px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(150deg,#9b428e,#513080);border:1px solid #d469b377;color:#ffd1f4;font-size:18px}
.native-song-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.native-song-meta strong{font-size:12px;line-height:1.3;color:#fff;font-weight:750;overflow-wrap:anywhere}
.native-song-meta small{font-size:11px;line-height:1.2;color:#b0a5c4;overflow-wrap:anywhere}
.native-request-btn{
  flex:none;min-width:63px;max-width:92px;border:1px solid #ef94cf99;border-radius:9px;
  background:#e33d9b28;color:#ffbcdf;font-size:10px;font-weight:950;letter-spacing:.3px;
  padding:10px 8px;transition:background .16s,color .16s
}
.native-request-btn:active:not(:disabled){background:#ed4bae;color:#fff}
.native-request-btn:disabled{opacity:.57}
.native-request-btn.sent{background:#2088673a;border-color:#5adca076;color:#cbffe9}
.native-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 5px;font-size:12px;color:#e2c9f1}
.native-page-button,.native-reload{padding:10px 12px;border:1px solid #ba8bd372;background:#ffffff0f;color:#f4d7fc;border-radius:10px;font-size:12px}
.native-page-button:disabled{opacity:.36}
.native-empty{padding:26px 12px;font-size:13px;text-align:center;color:#c3aed9}
.native-request-feedback{font-size:12px;line-height:1.5;color:#aaf1ca;margin:12px 0}
.native-request-feedback.err{color:#ffc5cf}
@media(max-width:375px){
 .native-song-row{padding:10px 8px;gap:6px}
 .native-song-info{gap:7px}
 .native-song-icon{width:31px;height:31px}
 .native-request-btn{min-width:59px;padding:9px 6px;font-size:9px}
 .native-song-meta strong{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 body.is-playing .vinyl-stage::before,body.is-playing .vinyl-stage.beat-hit::after{animation:none!important}
 .vinyl-stage .vinyl-aura i{transition:none}
}


/* v20 MIXIA LIQUID HALO — modern, continuous spectrum instead of LED spikes. */
.vinyl-stage .vinyl-aura{opacity:0!important;visibility:hidden!important}
.vinyl-stage::before,.vinyl-stage::after{display:none!important;animation:none!important}
.vinyl-stage .mixia-wave{
 position:absolute;inset:0;display:block;z-index:5;pointer-events:none;
 width:100%;height:100%;max-width:none;max-height:none;
 opacity:.97;filter:none;transform:translateZ(0)
}
.vinyl-stage .vinyl{
 border-width:7px;
 box-shadow:0 0 0 1px #b379d171,0 0 0 4px #100b24,0 10px 34px #04010fbb,0 0 25px #b94b9563;
}
.vinyl-stage .vinyl-glow{
 opacity:.67;
 background:radial-gradient(circle,#bd379238 0%,#703fa624 42%,#373c8d12 66%,transparent 75%);
 filter:blur(15px);
}
body.is-playing .vinyl-stage.beat-hit .vinyl{filter:brightness(1.06)}
body:not(.is-playing) .vinyl-stage .mixia-wave{opacity:.48}
@media(prefers-reduced-motion:reduce){
 .vinyl-stage .mixia-wave{opacity:.55!important}
}


/* v21 — exact MIXIA neon circular spectrum: fixed black center, vivid 160 rays.
   Overwrites vinyl rotation and v20 liquid-wave styling, requests untouched. */
.vinyl-stage{
 --visual-core-size:220px;
 isolation:isolate;
 overflow:hidden;
 height:clamp(295px,47svh,440px);
}
.vinyl-stage .vinyl{
 z-index:2;
 position:relative;
 width:var(--visual-core-size)!important;
 height:var(--visual-core-size)!important;
 max-height:none!important;
 aspect-ratio:1!important;
 border:0!important;
 padding:0!important;
 border-radius:50%;
 display:flex;
 justify-content:center;
 align-items:center;
 transform:none!important;
 animation:none!important;
 transition:none!important;
 background:#020206!important;
 box-shadow:0 0 0 5px #020208,0 12px 28px #03030ab8!important;
 will-change:auto!important;
 filter:none!important;
}
body.is-playing .vinyl-stage .vinyl{
 animation:none!important;transform:none!important;filter:none!important;
}
.vinyl-stage .vinyl-disk,
.vinyl-stage .vinyl-center{display:none!important}
.vinyl-stage .visualizer-core{
 width:100%;height:100%;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:13px;
 border-radius:50%;
 background:#020205;
 position:relative;
 overflow:hidden;
 user-select:none;-webkit-user-select:none;
}
.vinyl-stage .visualizer-core strong{
 color:#fafaff;
 font-weight:330;
 font-size:clamp(18px,4.9vw,30px);
 letter-spacing:.045em;
 line-height:1.15;
 white-space:nowrap;
 text-shadow:0 0 12px #ffffff19;
}
.vinyl-stage .visualizer-core span{
 display:flex;align-items:center;justify-content:center;gap:10px;
 color:#d6cedd;font-size:clamp(9px,2.8vw,13px);
 font-weight:450;
 letter-spacing:.3em;
 white-space:nowrap;
}
.vinyl-stage .visualizer-core span i{
 display:block;width:clamp(12px,4vw,24px);height:2px;
 background:#e63ed1;box-shadow:0 0 8px #e63ed15c;
}
.vinyl-stage .visualizer-core span i:last-child{
 background:#1bc9f0;box-shadow:0 0 8px #1bc9f05c;
}
.vinyl-stage .vinyl-glow{display:none!important}
.vinyl-stage .mixia-wave{
 position:absolute;inset:0;z-index:5;
 display:block;width:100%;height:100%;opacity:1!important;
 transform:none!important;filter:none!important;
 pointer-events:none;
}
.vinyl-stage::before,.vinyl-stage::after{display:none!important}
.vinyl-stage .vinyl-aura{display:none!important}
body:not(.is-playing) .vinyl-stage .mixia-wave{opacity:1!important}
@media(max-height:740px){
 .vinyl-stage{height:clamp(280px,49svh,345px)!important}
}
@media(max-width:360px){
 .vinyl-stage .visualizer-core strong{font-size:clamp(16px,5.2vw,20px);letter-spacing:.027em}
 .vinyl-stage .visualizer-core span{gap:7px;font-size:9px;letter-spacing:.22em}
}
@media(prefers-reduced-motion:reduce){
 .vinyl-stage .vinyl{animation:none!important}
}


/* v24 MIXIA • One-screen minimal listening interface.
   Keep familiar station identity and fixed MIXIA RADIO core, remove repeated metadata. */
.station{padding-top:calc(env(safe-area-inset-top,0px) + 14px)}
.station-inner{min-height:calc(100svh - 168px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));justify-content:space-between}
.app-head{align-self:flex-start;width:auto;align-items:flex-start;flex:none}
.app-head .brand-line{width:auto;justify-content:flex-start;gap:10px}
.app-head .wordmark strong{font-size:clamp(22px,6vw,27px);letter-spacing:-1.5px}
.app-head .wordmark span{display:none}
.app-head .brand-wave{height:23px;gap:2px}
.app-head .brand-wave i{width:3px}
.app-head .brand-wave i:nth-child(1),.app-head .brand-wave i:nth-child(5){height:8px}
.app-head .brand-wave i:nth-child(2),.app-head .brand-wave i:nth-child(4){height:15px}
.app-head .brand-wave i:nth-child(3){height:23px}
.app-head .brand-wave:last-child{display:none}
.tagline,.overline,.music-chip,.live-info,.vinyl-stage .visualizer-core span{display:none!important}
.vinyl-stage{margin:10px 0 0;height:clamp(295px,43svh,420px);flex:none}
.nowplaying{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:7px auto 8px;gap:8px;flex:none}
.nowplaying .live-pill{display:inline-flex;align-items:center;gap:7px;margin:0 0 3px;padding:6px 11px;border:1px solid #f4a1dc55;background:#f24aa413;border-radius:100px;box-shadow:none;font-size:10px;letter-spacing:1.4px;font-weight:750;color:#f6badf}
.nowplaying .live-dot{height:6px;width:6px}
.nowplaying .live-pill.offline .live-dot{background:#888;box-shadow:none;animation:none}
.nowplaying h1{margin:0;max-width:min(100%,550px);line-height:1.25;font-size:clamp(19px,5.7vw,26px);letter-spacing:-.5px;-webkit-line-clamp:2}
.nowplaying .song-artist{font-size:clamp(12px,3.4vw,16px);opacity:.8;margin:0;line-height:1.25}
.nowplaying .song-artist[hidden]{display:none!important}
.vinyl-stage .visualizer-core{gap:0}
.vinyl-stage .visualizer-core strong{font-weight:370;letter-spacing:.04em}
.main-play{position:relative}
body.is-loading .main-play::after{
 content:"";position:absolute;inset:-8px;pointer-events:none;border-radius:50%;
 border:2px solid transparent;border-top-color:#fff;border-right-color:#f39de8;
 animation:mixia-buffering .7s linear infinite;
 box-shadow:0 0 10px #f14fac50;
}
@keyframes mixia-buffering{to{transform:rotate(360deg)}}
.bottom-dock .nav-item span{font-size:clamp(9px,2.25vw,11px)}
@media(max-height:670px){
 .station{padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
 .station-inner{min-height:calc(100svh - 136px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
 .vinyl-stage{height:clamp(270px,48svh,330px)!important;margin:0}
 .nowplaying{gap:5px}
 .nowplaying h1{font-size:clamp(17px,5vw,22px)}
}
@media(min-width:700px){
 .station{padding-top:calc(env(safe-area-inset-top,0px) + 30px)}
 .station-inner{min-height:calc(100svh - 195px)}
 .vinyl-stage{height:clamp(410px,48svh,540px)}
}
@media(prefers-reduced-motion:reduce){
 body.is-loading .main-play::after{animation:none;border-color:#f39de8}
}


/* v24.1: keep player and song together rather than opposite ends of screen. */
.station-inner{position:relative;justify-content:center}
.app-head{position:absolute;top:0;left:0}
.vinyl-stage{margin:0 0 4px}
.nowplaying{margin:5px auto 0}
@media(max-height:670px){
 .vinyl-stage{margin:11px 0 4px}
 .nowplaying{margin:2px auto 0}
}


/* v26 slogan */
.app-head .tagline{display:block!important;margin:8px 0 0;font-size:10px;line-height:1.4;letter-spacing:2px;text-align:left;color:#d1bee5}

.song-timeline{display:block;width:min(92%,390px);margin:12px auto 0;text-align:center}.song-timeline[hidden]{display:none!important}.song-timeline-track{height:5px;background:#65537e70;border-radius:20px;overflow:hidden}.song-timeline-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,#f03b9f,#c247d6,#55ceeb);transition:width .9s linear}

.song-timeline-times{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font-variant-numeric:tabular-nums}.song-timeline-times>span{display:flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap}.song-timeline-times small{font-size:10px;color:#a998c5}.song-timeline-times time{font-weight:750;color:#f4e9ff}@media(max-width:350px){.song-timeline-times small{font-size:9px}.song-timeline-times>span{font-size:10px}}

/* MIXIA guest profile and device favorites — no false AzuraCast login claim. */
.mixia-account{display:flex;flex-direction:column;gap:15px;padding-bottom:15px}
.account-person{display:flex;align-items:center;gap:13px;padding:4px 0}
.account-avatar{width:57px;height:57px;border-radius:18px;background:linear-gradient(145deg,#ea42b4,#7a41db);display:grid;place-items:center;color:#fff;box-shadow:0 6px 20px #e34cb348;font-size:28px;flex:none}
.account-person strong{font-size:18px;color:#fff;display:block;font-weight:800}
.account-person p{margin:5px 0 0;color:#c6b4db;font-size:12px;line-height:1.4}
.account-note{margin:0;padding:12px 13px;border-radius:12px;border:1px solid #9179be5c;background:#a76de312;font-size:12px;color:#d9c8e9;line-height:1.5}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#13132b;padding:4px;border:1px solid #5f47764d;border-radius:13px}
.account-tabs button{background:transparent;color:#b7a8cb;border:0;border-radius:10px;padding:11px 5px;font-size:12px;font-weight:800;cursor:pointer}
.account-tabs button.selected{background:linear-gradient(125deg,#d944af,#7948d6);color:white;box-shadow:0 3px 12px #9942bf3b}
.account-tabs button span{padding:1px 6px;border-radius:10px;background:#ffffff29;font-size:10px}
.account-search input{width:100%;border:1px solid #815eaa99;border-radius:12px;padding:12px 14px;background:#141127;color:#fff;font-size:13px;outline:none}
.account-search input:focus{border-color:#ed71c7;box-shadow:0 0 0 2px #ed71c73c}
.account-tracks{display:flex;flex-direction:column;gap:0;border:1px solid #5f477678;border-radius:12px;overflow:hidden;background:#0d1021b6;max-height:350px;overflow-y:auto}
.account-song{display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid #ffffff16}
.account-song:last-child{border-bottom:none}
.account-song-note{height:35px;width:35px;border-radius:9px;flex:none;background:#a344ad42;color:#ffc8ed;display:grid;place-items:center;font-size:17px}
.account-song-meta{display:flex;flex-direction:column;min-width:0;gap:3px;flex:1}
.account-song-meta strong{color:#f5efff;font-size:12px;font-weight:780;line-height:1.25;overflow-wrap:anywhere}
.account-song-meta small{color:#b6a5ce;font-size:11px;overflow-wrap:anywhere}
.account-heart{border:1px solid #c563a16b;background:#dd4fa818;color:#ffd2ef;font-size:22px;line-height:1;height:36px;width:36px;flex:none;border-radius:10px}
.account-heart.active{color:#fff;background:#db47996b;border-color:#f07cbb}
.account-empty{margin:0;padding:34px 12px;color:#bfb0cf;text-align:center;font-size:13px}
.account-retry{margin:8px auto 14px;padding:8px 14px;border-radius:10px;background:#b53a99;color:#fff}
.account-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.account-foot small{color:#a998c4;line-height:1.4;font-size:10px;flex:1}
.account-foot button{border:1px solid #a366bc88;background:#6e368e39;border-radius:10px;color:#f6d7f5;padding:10px 13px;font-size:11px;font-weight:700;flex:none}
@media(max-width:370px){.account-person strong{font-size:16px}.account-avatar{width:46px;height:46px;font-size:23px}.account-person p{font-size:11px}.account-tabs button{font-size:11px}}


.account-profile-edit{margin:0;border:1px solid #7862a25c;border-radius:12px;background:#6a4b9320;overflow:hidden}
.account-profile-edit summary{cursor:pointer;padding:11px 13px;color:#f0daf8;font-size:12px;font-weight:750;list-style-position:inside}
.account-profile-edit form{padding:0 12px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:9px}
.account-profile-edit label{min-width:0;display:flex;flex-direction:column;gap:6px;font-size:11px;color:#c6b6db}
.account-profile-edit input{background:#15142b;border:1px solid #8767a8;color:white;padding:10px 11px;border-radius:9px;min-width:0;font-size:12px}
.account-profile-edit button{background:linear-gradient(125deg,#dd46b5,#834bd7);color:white;border:0;border-radius:9px;padding:11px 12px;font-size:11px;font-weight:750}
.account-profile-edit small{grid-column:1/-1;color:#9ee1bb;font-size:11px}


/* MIXIA registered listener forms */
.mixia-auth-panel{display:flex;flex-direction:column;gap:10px;background:#17102d96;border:1px solid #80609c63;border-radius:13px;padding:13px}
.auth-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#100b20;border-radius:10px;padding:4px}
.auth-mode-tabs button{border:0;background:transparent;color:#c7b4db;border-radius:8px;padding:10px 6px;font-size:12px;font-weight:700}
.auth-mode-tabs button.active{background:linear-gradient(110deg,#e042ae,#8250d7);color:#fff}
.mixia-auth-form{display:flex;flex-direction:column;gap:10px;margin:0}
.auth-field{display:flex;flex-direction:column;gap:5px;color:#d8c5eb;font-size:11px;font-weight:650;min-width:0}
.auth-field input{min-width:0;width:100%;background:#0b0c1d;border:1px solid #786194;border-radius:9px;padding:11px 12px;color:#fff;outline:0;font-size:13px}
.auth-field input:focus{border-color:#f56dca;box-shadow:0 0 0 2px #f56dca2d}
.auth-primary{background:linear-gradient(110deg,#e042ae,#8250d7);border:0;border-radius:10px;color:#fff;font-size:12px;font-weight:800;padding:12px 15px}
.auth-primary:disabled{opacity:.52}
.auth-secondary,.auth-forgot,.auth-logout{background:none;color:#dfbfed;border:0;font-size:12px;padding:7px;align-self:center}
.auth-logout{border:1px solid #9560b5;border-radius:9px;align-self:flex-start;padding:9px 14px}
.auth-feedback{margin:0;color:#a9ecbb;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.auth-feedback.error{color:#ffb7c5}
.auth-heading{font-size:16px;font-weight:750;color:#fff;margin:0}
.auth-user-info{display:flex;flex-direction:column;gap:4px;padding:7px 0}
.auth-user-info strong{font-size:16px;color:#fff;overflow-wrap:anywhere}
.auth-user-info small{font-size:11px;color:#c5a9d7;overflow-wrap:anywhere}
.auth-profile-form{margin:0}
@media(max-width:360px){.mixia-auth-panel{padding:10px}.auth-field input{padding:10px}}

/* MIXIA daily schedule: compact, accessible live-program teaser */
.program-peek{width:100%;max-width:620px;display:flex;align-items:center;gap:10px;margin:13px auto 4px;
  padding:11px 14px;border:1px solid #ffffff20;border-radius:16px;color:#f8f4ff;
  background:linear-gradient(120deg,#3423468a,#191d39c7);font:inherit;text-align:left;cursor:pointer}
.program-peek:focus-visible,.program-favorite:focus-visible{outline:2px solid #ff89c8;outline-offset:3px}
.program-indicator{color:#ef86b8;font-size:12px}
.program-peek.is-france .program-indicator{color:#7bd6ff}
.program-peek-copy{min-width:0;display:grid;gap:3px}
.program-peek-copy>span{font-size:9px;font-weight:750;letter-spacing:1.25px;color:#b9aacc}
.program-peek-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.program-peek-next{margin-left:auto;font-size:11px;color:#c7bdd7;text-align:right;max-width:46%}
.program-peek-arrow{font-size:20px;color:#edb8d3}
.program-schedule-title{font-size:15px;margin:20px 0 9px}
.program-schedule-list{display:grid;gap:5px}
.program-schedule-list>div{padding:11px 12px;border:1px solid #ffffff13;border-radius:11px;
 background:#ffffff07;display:flex;gap:10px;align-items:center;justify-content:space-between}
.program-schedule-list time{font-size:12px;font-variant-numeric:tabular-nums;color:#aaa9c8}
.program-schedule-list span{font-size:12px;text-align:right;color:#f1ebff;font-weight:650}
.program-schedule-list .fr-slot{background:#31243a;border-color:#ff7aaf54}
.program-schedule-note{font-size:11px;line-height:1.5;color:#aaa7ba}
.program-favorite{display:block;width:100%;margin:14px 0 10px;padding:12px;background:#36253f;
 border:1px solid #e885bc66;border-radius:11px;color:#ffe3f0;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
@media(max-width:400px){.program-peek{gap:8px;padding:10px}.program-peek-next{font-size:10px;max-width:41%}}

/* Small, optional like control, distinct from favorites */
.song-like{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;margin:9px auto 0;
 border:1px solid #ffffff21;border-radius:30px;background:#ffffff09;color:#efc3dc;
 font:700 12px/1 system-ui,sans-serif;cursor:pointer}
.song-like #songLikeIcon{font-size:17px;line-height:1}
.song-like.liked{background:#ff4d9440;border-color:#f971ad9c;color:#ffe2f0}
.song-like:disabled{opacity:.58;cursor:wait}
.song-like[hidden]{display:none!important}
.song-like:focus-visible{outline:2px solid #f8a3d3;outline-offset:2px}

/* MIXIA PWA v36: original station icon replaces center words.
   Large circular spectrum is unchanged; stage layout stays below header.
   No clipping of the dynamic 160-ray halo on compact displays. */
.vinyl-stage .visualizer-core{
  background:#020205!important;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vinyl-stage .mixia-center-logo{
  display:block;
  width:min(55%,176px);
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:22%;
  box-shadow:0 0 27px rgba(229,54,181,.18);
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
/* The absolute header does not consume layout space; reserve it explicitly. */
.station-inner{
  padding-top:clamp(79px,10svh,105px);
  justify-content:center;
}
.vinyl-stage{
  flex:0 0 auto;
  height:clamp(260px,42svh,390px)!important;
  min-height:0;
  margin:0 0 6px!important;
}
@media(max-height:750px){
  .station-inner{padding-top:67px}
  .vinyl-stage{height:clamp(218px,37svh,280px)!important}
  .nowplaying{gap:4px;margin:3px auto 0}
  .program-peek{margin:9px auto 2px}
}
@media(max-height:610px){
  .station-inner{padding-top:59px}
  .vinyl-stage{height:clamp(165px,31svh,200px)!important}
  .nowplaying{gap:3px}
  .program-peek{margin:7px auto 1px}
}
@media(max-width:340px){
  .station-inner{padding-top:clamp(54px,9svh,62px)}
  .vinyl-stage{height:clamp(158px,30svh,186px)!important}
  .nowplaying{gap:3px}
  .nowplaying h1{font-size:clamp(16px,5vw,20px)}
}

/* Ultra-short PWA screens: preserve clear logo/ring and controls.
   Programme remains accessible under the "Yayın" navigation item. */
@media(max-height:520px){
  .program-peek{display:none!important}
  .station-inner{padding-top:68px}
}


/* v46: smaller, well-contained circular player on tall iPhone screens.
   393x852: 358px -> 302px; disk/logo shrink together via canvas geometry.
   Compact phones <=750px height and desktop keep their existing layouts. */
@media (min-width:341px) and (max-width:699px) and (min-height:751px){
  .vinyl-stage{
    height:clamp(252px,35.5svh,336px)!important;
    margin-bottom:4px!important;
  }
  .vinyl-stage .mixia-center-logo{
    width:min(52%,118px);
    box-shadow:0 0 20px rgba(229,54,181,.16);
  }
}


/* v47: keep official icon legible inside a smaller neon orbit.
   The canvas now reserves actual dynamic headroom for the audio bars. */
.vinyl-stage .mixia-center-logo{
  width:min(64%,120px);
}

/* v50 — incoming listener messages replace programme preview, without moving the player. */
.listener-message-slot{
 width:100%;max-width:620px;min-height:75px;flex:none;
 margin:8px auto 2px;display:grid;align-items:center;
}
.listener-message-card{
 display:flex;align-items:center;gap:12px;
 width:100%;padding:12px 15px;border-radius:16px;
 background:linear-gradient(115deg,rgba(57,28,78,.94),rgba(32,26,66,.95));
 border:1px solid rgba(244,123,210,.46);
 box-shadow:0 10px 28px rgba(7,5,25,.23);
 animation:mixia-message-in .25s ease-out;
}
.listener-message-card[hidden]{display:none!important}
.listener-message-card.leaving{animation:none;opacity:0;filter:blur(3px);transform:translateY(-7px);transition:opacity .85s ease-in-out,filter .85s ease-in-out,transform .85s ease-in-out}
.listener-message-icon{width:33px;height:33px;border-radius:12px;display:grid;place-items:center;flex:none;
 background:linear-gradient(130deg,#e347a0,#7657d6);color:white;font-weight:900;font-size:17px}
.listener-message-content{min-width:0;flex:1}
.listener-message-content strong{display:block;color:#f8c8ea;font-size:11px;font-weight:850;line-height:1.3;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listener-message-content p{font-size:12px;color:#fff;margin:3px 0 0;line-height:1.35;
 max-height:3.2em;overflow-wrap:anywhere;overflow:hidden}
@keyframes mixia-message-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.listener-form{display:grid;gap:14px}
.listener-form .sheet-help{margin:0;line-height:1.6}
.listener-form label{display:grid;gap:7px;font-size:12px;color:#dec3f2;font-weight:750}
.listener-form input,.listener-form textarea{width:100%;min-width:0;border:1px solid #8966b3;
 background:#141029;border-radius:12px;padding:12px 13px;color:white;font:inherit;font-size:14px;outline:none}
.listener-form textarea{min-height:104px;resize:vertical}
.listener-form input:focus,.listener-form textarea:focus{border-color:#f07aca;box-shadow:0 0 0 2px #f07aca38}
.listener-form small{font-size:11px;color:#bfaad9;line-height:1.55}
.listener-form .sheet-submit:disabled{opacity:.55;cursor:not-allowed}
.listener-form-status{font-size:12px;color:#aef0ca;line-height:1.5;min-height:18px}
.listener-form-status.error{color:#ffc5d5}
@media(max-width:530px){
 .listener-message-slot{min-height:69px;margin-top:5px}
 .listener-message-card{padding:10px 12px;gap:9px;border-radius:14px}
 .listener-message-icon{width:29px;height:29px;border-radius:10px}
 .listener-message-content p{font-size:11px}
}
@media(max-height:520px){.listener-message-slot{min-height:50px}.listener-message-card{padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.listener-message-card{animation:none}.listener-message-card.leaving{transition:none}}



/* v51: exact MIXIA RADIO icon lettering (no vinyl or frame), centered header. */
.app-head{
 position:absolute!important;top:0!important;left:0!important;right:0!important;
 width:100%!important;max-width:100%!important;
 display:flex!important;flex-direction:column!important;
 align-items:center!important;justify-content:flex-start!important;
 text-align:center!important;
 z-index:7;
}
.app-head .brand-line{
 width:100%!important;min-height:0!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 gap:0!important;
}
.app-wordmark{
 display:block;object-fit:contain;
 width:clamp(150px,48vw,205px);
 max-width:calc(100% - 80px);
 height:auto;aspect-ratio:398/160;
 filter:drop-shadow(0 3px 8px rgba(217,49,164,.13));
 pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.app-head .tagline{
 display:block!important;
 width:100%!important;max-width:min(100%,360px);
 margin:0 auto!important;padding:0 4px;
 min-height:1.5em!important;text-align:center!important;
 font-weight:800;font-size:clamp(8px,2.3vw,11px)!important;
 line-height:1.35!important;letter-spacing:clamp(.9px,.48vw,2px)!important;
 color:#dcd0f0;white-space:normal;
}

/* v51: navigation flush with device bottom and safe-area inset. */
@media(max-width:699px){
 html,body{width:100%}
 .bottom-dock{
  position:fixed!important;
  left:0!important;right:0!important;top:auto!important;bottom:0!important;
  transform:none!important;
  width:100%!important;max-width:none!important;
  height:auto!important;
  min-height:calc(69px + env(safe-area-inset-bottom,0px))!important;
  margin:0!important;
  padding:5px max(8px,env(safe-area-inset-right,0px))
         calc(7px + env(safe-area-inset-bottom,0px))
         max(8px,env(safe-area-inset-left,0px))!important;
  border-radius:22px 22px 0 0!important;
  border-bottom:0!important;
  box-shadow:0 -10px 40px rgba(6,3,23,.49)!important;
  z-index:22!important;
 }
 .station{padding-bottom:calc(91px + env(safe-area-inset-bottom,0px))!important}
 .station-inner{padding-top:clamp(106px,13svh,125px)!important}
 .top-buttons{z-index:24}
 .autoplay-notice{bottom:calc(89px + env(safe-area-inset-bottom,0px))!important}
}
@media(max-width:699px) and (max-height:740px){
 .app-wordmark{width:clamp(128px,41vw,168px)}
 .app-head .tagline{font-size:8px!important;letter-spacing:1.15px!important}
 .station-inner{padding-top:clamp(79px,13svh,94px)!important}
 .station{padding-bottom:calc(79px + env(safe-area-inset-bottom,0px))!important}
 .bottom-dock{min-height:calc(62px + env(safe-area-inset-bottom,0px))!important}
 .autoplay-notice{bottom:calc(80px + env(safe-area-inset-bottom,0px))!important}
}
@media(max-width:340px) and (max-height:610px){
 .app-wordmark{width:130px}
 .app-head .tagline{font-size:7px!important}
 .station-inner{padding-top:77px!important}
}
@media(min-width:700px){
 .app-head{max-width:100%!important}
 .app-wordmark{width:205px}
 .station-inner{padding-top:112px}
}


/* v52: prevent iPhone Safari auto-zoom when focusing listener message
   fields. Keep viewport user-scalable; do not disable accessibility zoom. */
.listener-form input:not([name="website"]),
.listener-form textarea {
  font-size:16px!important;
  line-height:1.45;
}


/* v53: the nav icons AND the center play button now sit inside the dock,
   aligned on one lower baseline. Previous negative play margin raised the
   play control outside the bar after the bar moved to the screen bottom. */
@media(max-width:699px){
 .bottom-dock{
  align-items:end!important;
  min-height:calc(77px + env(safe-area-inset-bottom,0px))!important;
  padding-top:6px!important;
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
  grid-auto-rows:minmax(0,1fr)!important;
 }
 .bottom-dock .nav-item{
  min-height:54px!important;
  height:54px!important;
  align-self:end!important;
  justify-self:stretch!important;
  margin:0!important;
  padding:4px 1px 3px!important;
  gap:4px!important;
 }
 .bottom-dock .main-play{
  align-self:end!important;
  justify-self:center!important;
  margin:0 auto!important;
  width:clamp(60px,16vw,70px)!important;
 }
 .station{padding-bottom:calc(97px + env(safe-area-inset-bottom,0px))!important}
}
@media(max-width:699px) and (max-height:740px){
 .bottom-dock{min-height:calc(70px + env(safe-area-inset-bottom,0px))!important;
  padding-top:5px!important;padding-bottom:calc(7px + env(safe-area-inset-bottom,0px))!important}
 .bottom-dock .nav-item{height:49px!important;min-height:49px!important}
 .bottom-dock .main-play{width:clamp(56px,16vw,62px)!important}
 .station{padding-bottom:calc(87px + env(safe-area-inset-bottom,0px))!important}
}


/* v54 — iOS PWA: the webview already leaves its gesture/home-indicator
   area outside the page. The old dock additionally applied that inset
   *inside* its own bar, lifting all five controls much too high.
   Give the buttons a real bottom row; keep gestures in the native area. */
@media (max-width:699px){
 .bottom-dock{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:auto!important;
  bottom:0!important;
  transform:none!important;
  height:76px!important;
  min-height:76px!important;
  max-height:76px!important;
  padding:5px 8px 7px!important;
  align-items:end!important;
  grid-auto-rows:minmax(0,1fr)!important;
 }
 .bottom-dock .nav-item{
  align-self:end!important;
  height:54px!important;
  min-height:54px!important;
  margin:0!important;
  padding:4px 1px 3px!important;
 }
 .bottom-dock .main-play{
  align-self:end!important;
  margin:0 auto!important;
  width:clamp(60px,16vw,70px)!important;
 }
 .station{
  padding-bottom:91px!important;
 }
 .autoplay-notice{
  bottom:89px!important;
 }
}
@media(max-width:699px) and (max-height:740px){
 .bottom-dock{
  height:70px!important;
  min-height:70px!important;
  max-height:70px!important;
  padding:4px 8px 7px!important;
 }
 .bottom-dock .nav-item{
  height:49px!important;
  min-height:49px!important;
 }
 .bottom-dock .main-play{
  width:clamp(56px,16vw,62px)!important;
 }
 .station{
  padding-bottom:84px!important;
 }
 .autoplay-notice{
  bottom:80px!important;
 }
}
/* Native home-indicator background uses the same palette as the dock. */
html{background:#19152f}


/* MIXIA PWA v55 — premium, compact account bottom sheet.
   Style only the Account tab; all radio audio, messaging and program UI
   are untouched. */
.sheet.account-sheet{
 width:min(100%,640px);
 max-height:91dvh;
 padding:12px 16px calc(20px + env(safe-area-inset-bottom,0px));
 border:1px solid rgba(204,145,244,.30);
 border-bottom:0;
 border-radius:29px 29px 0 0;
 background:
  radial-gradient(ellipse 75% 38% at 9% 3%,rgba(174,66,186,.18),transparent 70%),
  linear-gradient(155deg,#28203f 0%,#1c1935 50%,#13142b 100%);
 box-shadow:0 -18px 65px rgba(2,3,17,.48);
 scrollbar-width:thin;
 overscroll-behavior:contain;
}
.sheet.account-sheet .sheet-handle{
 width:42px;height:5px;margin:0 auto 12px;background:#a898bb99;
}
.sheet.account-sheet .sheet-head{
 position:sticky;top:-12px;z-index:3;
 display:flex;align-items:center;justify-content:space-between;
 margin:0 -2px 14px;padding:8px 2px 10px;
 background:linear-gradient(180deg,#2a2140 60%,rgba(42,33,64,.96));
 border-radius:0 0 16px 16px;
}
.sheet.account-sheet .sheet-head h2{
 font-size:clamp(22px,5.4vw,28px);
 font-weight:850;letter-spacing:-.8px;
}
.sheet.account-sheet .close-sheet{
 background:rgba(255,255,255,.10);
 border:1px solid rgba(255,255,255,.12);
 width:38px;height:38px;
 font-size:26px;
}
.sheet.account-sheet #sheetContent{min-width:0}
.sheet.account-sheet .mixia-account{
 display:flex;flex-direction:column;gap:14px;padding:0 0 8px;
}
.account-hero{
 position:relative;isolation:isolate;overflow:hidden;
 display:grid;gap:13px;
 border:1px solid rgba(223,150,255,.28);
 border-radius:21px;
 padding:19px 18px 17px;
 background:linear-gradient(132deg,#42234d 0%,#322245 48%,#222443 100%);
 box-shadow:0 9px 28px rgba(8,6,24,.17),inset 0 1px rgba(255,255,255,.06);
}
.account-hero-glow{
 position:absolute;z-index:-1;pointer-events:none;
 right:-85px;top:-115px;width:270px;height:265px;
 background:radial-gradient(circle,#e65ba34d,rgba(134,78,210,.16) 45%,transparent 72%);
}
.account-hero-top{
 display:flex;align-items:center;justify-content:space-between;
 flex-wrap:wrap;gap:8px;
}
.account-hero-eyebrow{
 display:inline-flex;align-items:center;gap:3px;
 color:#e6cbe9;font-size:10px;letter-spacing:1.6px;
 font-weight:850;
}
.account-hero-eyebrow span{color:#ff70c7}
.account-membership{
 display:inline-flex;align-items:center;gap:6px;
 border:1px solid rgba(230,188,255,.23);
 background:rgba(255,255,255,.075);
 padding:6px 9px;border-radius:100px;
 color:#e1d2e9;font-size:9px;font-weight:800;
 letter-spacing:.48px;white-space:nowrap;
}
.account-member-dot{
 width:7px;height:7px;border-radius:50%;background:#b49baa;
 box-shadow:0 0 0 3px #b49baa24;
}
.account-membership.is-member{
 background:#43bf9322;border-color:#6ddbb854;color:#b4ffde;
}
.account-membership.is-member .account-member-dot{
 background:#63edb3;box-shadow:0 0 0 3px #63edb325;
}
.account-person{display:flex;align-items:center;gap:13px;padding:2px 0;min-width:0}
.account-avatar{
 position:relative;
 width:63px;height:63px;border-radius:19px;flex:none;
 display:grid;place-items:center;
 color:white;font-size:32px;
 background:linear-gradient(135deg,#fa52af,#a23cd7);
 border:1px solid #ffb8f06e;
 box-shadow:0 8px 22px #c641a257,inset 0 1px #ffffff50;
}
.account-identity{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.account-person strong{
 display:block;
 font-size:clamp(19px,5vw,24px);font-weight:860;letter-spacing:-.6px;
 line-height:1.22;overflow-wrap:anywhere;
}
.account-person p{
 margin:0;color:#d3c3df;font-size:12px;line-height:1.4;
 overflow-wrap:anywhere;max-width:100%;
}
.account-hero .account-note{
 display:flex;align-items:center;min-height:32px;
 margin:0;padding:10px 11px 10px 30px;
 border:1px solid rgba(241,196,252,.13);
 border-radius:11px;
 background:rgba(16,14,41,.32);
 color:#ded0ed;font-size:11px;line-height:1.5;
 position:relative;
}
.account-hero .account-note:before{
 content:"✓";position:absolute;left:11px;top:11px;
 color:#e9aad9;font-size:12px;font-weight:850;
}
.account-profile-controls{display:grid;gap:9px}
#accountAuthMount{min-width:0}
#accountAuthMount:empty{display:none}
#accountAuthMount .mixia-auth-panel{
 margin:0;border:0;background:none;padding:0;border-radius:0;gap:9px;
}
.account-profile-edit,.account-settings{
 margin:0;background:rgba(15,13,36,.34);
 border:1px solid rgba(163,129,201,.31);
 border-radius:15px;overflow:hidden;
}
.account-profile-edit[hidden]{display:none!important}
.account-profile-edit summary,.account-settings summary{
 list-style:none;display:flex;align-items:center;gap:11px;
 min-height:51px;padding:10px 13px;
 color:#f2e8fd;cursor:pointer;
 font-weight:760;font-size:13px;
}
.account-profile-edit summary::-webkit-details-marker,
.account-settings summary::-webkit-details-marker{display:none}
.account-settings-icon{
 display:grid;place-items:center;
 width:31px;height:31px;flex:none;
 border:1px solid #c578da4a;border-radius:10px;
 background:linear-gradient(135deg,#bc519f31,#7866cd2c);
 color:#ffc4ec;font-size:17px;
}
.account-settings-copy{min-width:0;display:grid;gap:3px}
.account-settings-copy strong{font-size:13px}
.account-settings-copy small{font-size:10px;color:#bba9cb;font-weight:500}
.account-settings-arrow{margin-left:auto;color:#d4b8e8;font-size:17px;transition:transform .2s}
.account-profile-edit summary .account-settings-arrow{margin-left:auto}
.account-settings[open] .account-settings-arrow,.account-profile-edit[open] .account-settings-arrow{
 transform:rotate(180deg);
}
.account-settings-body{
 display:grid;gap:12px;padding:0 14px 14px;
 border-top:1px solid rgba(255,255,255,.065);
}
.account-settings-body .auth-profile-form{padding-top:14px}
.account-profile-edit form{padding:3px 14px 14px;gap:10px;grid-template-columns:minmax(0,1fr) auto}
.account-profile-edit label{font-size:11px}
.account-profile-edit input{font-size:16px;padding:11px 12px}
.account-profile-edit button{font-size:12px;padding:12px 14px}
.account-profile-edit small{font-size:11px}
.account-settings-body .auth-logout{
 align-self:flex-start;
 padding:8px 0;border:0;background:none;color:#f3bad2;
 text-decoration:none;font-weight:730;
}
.account-settings-body .auth-logout:before{content:"↪";margin-right:7px;font-size:16px}
.account-library{display:grid;gap:12px;min-width:0;padding:4px 1px}
.account-section-heading{
 display:flex;align-items:end;justify-content:space-between;
 gap:10px;min-width:0;
}
.account-section-overline{
 font-size:10px;letter-spacing:1.6px;font-weight:850;color:#ed8cc9;
}
.account-section-heading h3{
 margin:6px 0 0;font-size:clamp(17px,4.5vw,20px);
 font-weight:810;color:#fff;letter-spacing:-.4px;
}
.account-count-chip{
 flex:none;padding:7px 10px;border-radius:30px;
 font-size:10px;font-weight:800;color:#dfcceb;
 border:1px solid #ffffff20;background:#ffffff0a;
}
.account-tabs{
 display:grid;grid-template-columns:1fr 1fr;gap:5px;
 background:#0c1128ab;border:1px solid #75619f46;
 border-radius:15px;padding:5px;
}
.account-tabs button{
 display:flex;gap:7px;align-items:center;justify-content:center;
 min-width:0;padding:12px 4px;border-radius:11px;
 font-size:12px;font-weight:780;color:#b6a7cc;
 background:transparent;border:0;
}
.account-tabs button.selected{
 color:white;background:linear-gradient(120deg,#e04aa5,#8950d8);
 box-shadow:0 5px 16px #aa36a643;
}
.account-tab-icon{font-size:17px;line-height:1;color:inherit}
.account-tabs button span#accountFavoriteCount{
 padding:2px 7px;margin-left:0;
 background:rgba(255,255,255,.21);font-size:10px;color:#fff;
 border-radius:50px;
}
.account-search input{
 font-size:16px;border-radius:13px;
 min-height:44px;
 background:#0b0e22a8;
}
.account-tracks{
 border:1px solid rgba(154,126,201,.28);
 border-radius:16px;
 background:#0c1025b0;
 max-height:min(42dvh,410px);
 overscroll-behavior:contain;
}
.account-song{padding:10px 12px;gap:11px}
.account-song-note{
 height:38px;width:38px;border-radius:12px;
 background:linear-gradient(130deg,#e64caa36,#9b5eef2c);
}
.account-song-meta strong{font-size:13px}
.account-song-meta small{font-size:11px}
.account-empty-state{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 text-align:center;gap:10px;
 padding:25px 18px 24px;min-height:205px;
}
.account-empty-icon{
 display:grid;place-items:center;
 width:52px;height:52px;border-radius:16px;
 color:#fa95d8;font-size:30px;
 background:linear-gradient(145deg,#e1449f1f,#7958d03c);
 border:1px solid #ce70d84c;
}
.account-empty-state strong{font-size:14px;font-weight:780}
.account-empty-state p{
 margin:0;max-width:280px;color:#bfb5d5;font-size:11px;line-height:1.65;
}
.account-empty-action{
 border:1px solid #ec84cc60;background:#d74ba826;color:#ffd1ee;
 padding:9px 14px;border-radius:11px;font-size:12px;font-weight:770;
 margin-top:1px;
}
.account-empty{padding:30px 12px;font-size:12px}
.account-foot{
 display:flex;align-items:center;justify-content:space-between;
 gap:11px;border-top:1px solid #ffffff18;
 margin-top:1px;padding:12px 1px 0;
}
.account-foot small{font-size:10px;max-width:75%;line-height:1.55;color:#b9abc9}
.account-foot button{
 border:1px solid #a36eb750;background:#ffffff0b;
 color:#f6d4f5;border-radius:11px;
 padding:10px 12px;font-size:11px;
}
#accountAuthMount .auth-mode-tabs{border:1px solid #7b5fa358;border-radius:13px}
#accountAuthMount .auth-profile-form .auth-field{font-size:12px}
#accountAuthMount .auth-field input{font-size:16px;min-height:44px;border-radius:11px}
#accountAuthMount .auth-primary{font-size:13px;padding:12px 15px;border-radius:11px}
#accountAuthMount .auth-forgot{padding:12px 5px}
#accountAuthMount .auth-feedback{font-size:11px}
#accountAuthMount .auth-mode-tabs button{font-size:13px}
.sheet.account-sheet .mixia-account button:focus-visible,
.sheet.account-sheet .mixia-account summary:focus-visible{
 outline:2px solid #ff84d8;outline-offset:2px;
}
@media(max-width:390px){
 .sheet.account-sheet{padding:10px 13px calc(17px + env(safe-area-inset-bottom,0px))}
 .account-hero{padding:16px 14px 15px;gap:12px}
 .account-hero-eyebrow{font-size:9px;letter-spacing:1px}
 .account-membership{font-size:8px;padding:5px 8px}
 .account-person{gap:11px}
 .account-avatar{width:54px;height:54px;border-radius:17px;font-size:27px}
 .account-tabs button{font-size:11px;gap:5px}
 .account-tab-icon{font-size:16px}
 .account-section-heading h3{font-size:17px}
}
@media(max-height:700px){
 .sheet.account-sheet{max-height:94dvh}
 .account-hero{padding-top:13px;padding-bottom:13px;gap:9px}
 .account-empty-state{min-height:170px;padding:18px 10px}
 .account-empty-icon{width:44px;height:44px}
}