/* 320 FM 4.14.4 — Footer readability & authoritative weekday-color polish
   Loaded after frontend.css so the dynamic --theme-accent/--theme-rgb values win. */

:root{
  --fm-accent:var(--theme-accent,#16d5df);
  --fm-accent-rgb:var(--theme-rgb,22,213,223);
}

/* Footer player: never ellipsize artist or title. Give metadata enough room and wrap cleanly. */
.player.player-shot{
  grid-template-columns:110px 46px minmax(300px,420px) minmax(220px,1fr) 42px 132px 64px 38px!important;
  min-height:100px!important;
  height:auto!important;
  padding-top:8px!important;
  padding-bottom:8px!important;
}
.player-shot-info{min-width:0!important;align-self:stretch!important}
.player-shot-info .pmeta{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:3px!important;
  overflow:visible!important;
}
.player-shot-info .pmeta strong,
.player-shot-info .pmeta span,
.player-shot-info [data-player-title],
.player-shot-info [data-player-artist]{
  max-width:none!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.player-shot-info .pmeta strong,
.player-shot-info [data-player-title]{
  display:block!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
}
.player-shot-info .pmeta span{
  display:block!important;
  font-size:10px!important;
  line-height:1.3!important;
}
.player-shot-info [data-player-artist]{color:#d7e0e2!important}

/* Waveform: subtle weekday tint for the idle waveform, full accent only for played progress. */
.player-shot-wave .player-wave-bars i{
  background:rgba(var(--fm-accent-rgb),.30)!important;
}
.player-shot-wave .player-wave-played .player-wave-bars i{
  background:var(--fm-accent)!important;
  box-shadow:0 0 7px rgba(var(--fm-accent-rgb),.18)!important;
}
.player-shot-wave{
  filter:drop-shadow(0 0 9px rgba(var(--fm-accent-rgb),.05));
}

/* Remove legacy fixed-cyan accents and bind them to the active weekday color. */
body{
  background:radial-gradient(circle at 70% -10%,rgba(var(--fm-accent-rgb),.045),transparent 28%),var(--bg)!important;
}
.discover-menu a:hover{background:rgba(var(--fm-accent-rgb),.07)!important;color:var(--fm-accent)!important}
.btn.primary{
  border-color:var(--fm-accent)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fm-accent) 86%,white),var(--fm-accent))!important;
  box-shadow:0 7px 24px rgba(var(--fm-accent-rgb),.14)!important;
}
.btn.primary:hover{box-shadow:0 9px 30px rgba(var(--fm-accent-rgb),.22)!important}
.cover{
  background:radial-gradient(circle at 58% 35%,rgba(var(--fm-accent-rgb),.25),transparent 29%),linear-gradient(140deg,#122328,#05090b)!important;
  background-size:cover!important;background-position:center!important;
}
.cover[style*="background-image"],.cover:has(img){background-color:#111!important}
.live-stage-art:before{
  background:radial-gradient(circle at 40% 35%,rgba(var(--fm-accent-rgb),.30),transparent 34%),linear-gradient(145deg,#0f262d,#030708)!important;
}
.stage-progress i{
  background:linear-gradient(90deg,var(--fm-accent),color-mix(in srgb,var(--fm-accent) 58%,white))!important;
  box-shadow:0 0 12px rgba(var(--fm-accent-rgb),.48)!important;
}
.timeline-item:hover{background:rgba(var(--fm-accent-rgb),.035)!important}
.track-row:hover{background:linear-gradient(90deg,rgba(var(--fm-accent-rgb),.035),transparent)!important}
.featured-art{
  background:radial-gradient(circle at 65% 40%,rgba(var(--fm-accent-rgb),.25),transparent 30%),linear-gradient(135deg,#11272d,#030708)!important;
  background-size:cover!important;background-position:center!important;
}
.my320-preview{background:linear-gradient(90deg,rgba(var(--fm-accent-rgb),.035),transparent 56%)!important}
.sound-line:before{background:radial-gradient(circle at 75% 50%,rgba(var(--fm-accent-rgb),.09),transparent 28%)!important}
.filter.on{border-color:rgba(var(--fm-accent-rgb),.48)!important;color:var(--fm-accent)!important;background:rgba(var(--fm-accent-rgb),.06)!important}
.genre{background:radial-gradient(circle at 50% 50%,rgba(var(--fm-accent-rgb),.09),transparent 45%),#060b0d!important}
.play,
.popup-main-controls>[data-player-popup-toggle],
.popup-controls [data-popup-toggle]{
  background:linear-gradient(180deg,color-mix(in srgb,var(--fm-accent) 82%,white),var(--fm-accent))!important;
  border-color:color-mix(in srgb,var(--fm-accent) 70%,white)!important;
  box-shadow:0 0 0 4px rgba(var(--fm-accent-rgb),.08)!important;
}
.player-quality button.active,
.player-quality button:hover,
.popup-quality-inline button.active{
  border-color:var(--fm-accent)!important;
  color:var(--fm-accent)!important;
  background:rgba(var(--fm-accent-rgb),.07)!important;
}
.popup-artwork{
  background:radial-gradient(circle at 55% 35%,rgba(var(--fm-accent-rgb),.28),transparent 30%),linear-gradient(145deg,#11282e,#030809)!important;
}

/* Common accent surfaces that already use --cyan remain dynamically linked as well. */
:root,html,body{--cyan:var(--theme-accent,#16d5df)!important;--cyan-soft:rgba(var(--fm-accent-rgb),.12)!important}

@media(max-width:1100px){
  .player.player-shot{grid-template-columns:92px 42px minmax(250px,340px) minmax(160px,1fr) 110px 58px 34px!important;gap:9px!important;padding-left:18px!important;padding-right:18px!important}
  .player-shot-like{display:none!important}
}
@media(max-width:820px){
  .player.player-shot{grid-template-columns:42px minmax(0,1fr) 38px 34px!important;min-height:88px!important;padding:8px 14px!important}
  .player-shot-brand,.player-shot-wave,.player-shot-like,.player-shot .compact-quality,.player-volume-line{display:none!important}
  .player-shot-info{grid-template-columns:48px minmax(0,1fr)!important}
  .player-shot-info .cover{width:48px!important;height:48px!important}
  .player-shot-info .pmeta strong{font-size:11px!important;line-height:1.2!important}
  .player-shot-info .pmeta span{font-size:9px!important;line-height:1.2!important}
}

/* 4.14.4 Player state UX — authoritative final layer */
[data-duration-wrap][hidden],
[data-player-popup-duration][hidden],
[data-player-popup-elapsed][hidden]{display:none!important}

/* Footer: play control and LIVE brand are separate grid cells and may never overlap. */
.player.player-shot{isolation:isolate!important}
.player-shot-brand{position:relative!important;z-index:1!important;min-width:0!important;padding-right:8px!important}
.player-shot-brand b{position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:34px!important;height:21px!important;padding:0 7px!important;border:1px solid rgba(255,72,82,.52)!important;border-radius:999px!important;color:#ff626c!important;background:rgba(255,54,65,.08)!important;font-size:9px!important;line-height:1!important;letter-spacing:.09em!important}
.player-shot-toggle{position:relative!important;z-index:3!important;align-self:center!important;justify-self:center!important;margin:0!important;overflow:hidden!important;flex:none!important}
.player-shot-toggle .player-control-symbol{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;line-height:1!important}
.player-shot-toggle.is-loading,
.shot-listen.is-loading,
.popup-main-controls>[data-player-popup-toggle].is-loading{cursor:progress!important}

/* One reusable lightweight loading ring for all stream play controls. */
.player-control-symbol.is-loading{position:relative!important;font-size:0!important;color:transparent!important}
.player-control-symbol.is-loading::after{content:"";display:block;width:17px;height:17px;border:2px solid rgba(255,255,255,.28);border-top-color:currentColor;border-right-color:var(--fm-accent);border-radius:50%;animation:fmPlayerSpin .72s linear infinite}
.player-shot-toggle .player-control-symbol.is-loading::after{width:18px;height:18px}
.shot-listen .player-control-symbol.is-loading::after{width:15px;height:15px}
@keyframes fmPlayerSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.player-control-symbol.is-loading::after{animation-duration:1.5s}}

/* Hero listen action is a real play/pause control, kept away from the LIVE badge. */
.shot-live-actions{position:relative!important;z-index:2!important;align-items:center!important;flex-wrap:wrap!important}
.shot-listen{appearance:none!important;-webkit-appearance:none!important;position:relative!important;border:1px solid rgba(var(--fm-accent-rgb),.38)!important;color:#fff!important;cursor:pointer!important;padding:0 17px!important;font-family:inherit!important;line-height:1!important}
.shot-listen:hover{border-color:var(--fm-accent)!important;background:rgba(var(--fm-accent-rgb),.08)!important}
.shot-listen[aria-pressed="true"]{border-color:var(--fm-accent)!important;background:rgba(var(--fm-accent-rgb),.12)!important}
.shot-listen .player-control-symbol{display:inline-grid!important;place-items:center!important;width:18px!important;height:18px!important;flex:0 0 18px!important}
.shot-live-label{position:relative!important;z-index:1!important}

/* Metadata remains complete but does not intrude into the separate play/LIVE cells. */
.player-shot-info{position:relative!important;z-index:1!important;overflow:visible!important}
.player-shot-info .pmeta{padding-right:4px!important}

@media(max-width:820px){
  .player.player-shot{grid-template-columns:44px minmax(0,1fr) 38px 34px!important;column-gap:10px!important}
  .player-shot-toggle{grid-column:1!important}
  .player-shot-info{grid-column:2!important}
}


/* 4.14.4 Footer Player v3 — single authoritative desktop layout + direct weekday theme binding */
.player.player-shot{
  grid-template-columns:96px 46px minmax(300px,430px) minmax(260px,1fr) 40px 118px 64px 38px!important;
  gap:14px!important;
  min-height:84px!important;
  height:84px!important;
  padding:0 max(24px,calc((100vw - 1320px)/2))!important;
  align-items:center!important;
  overflow:visible!important;
  border-top-color:rgba(var(--theme-rgb),.20)!important;
  box-shadow:0 -14px 44px rgba(0,0,0,.38),0 -1px 0 rgba(var(--theme-rgb),.06)!important;
}
.player-shot-brand{
  width:96px!important;
  min-width:96px!important;
  max-width:96px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
}
.player-shot-brand .player-shot-logo{display:block!important;width:82px!important;max-width:82px!important;height:auto!important;object-fit:contain!important}
.player-shot-brand b{display:none!important}
.player-shot-toggle{
  width:42px!important;height:42px!important;min-width:42px!important;
  border-color:rgba(var(--theme-rgb),.55)!important;
  background:rgba(var(--theme-rgb),.06)!important;
  color:#fff!important;
  box-shadow:0 0 0 4px rgba(var(--theme-rgb),.045)!important;
}
.player-shot-toggle:hover,.player.is-playing .player-shot-toggle{
  border-color:var(--theme-accent)!important;
  color:var(--theme-accent)!important;
  background:rgba(var(--theme-rgb),.11)!important;
  box-shadow:0 0 0 5px rgba(var(--theme-rgb),.07)!important;
}
.player-shot-info{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  min-width:0!important;
  overflow:visible!important;
}
.player-shot-info .cover{width:52px!important;height:52px!important;min-width:52px!important;border-color:rgba(var(--theme-rgb),.18)!important}
.player-shot-info .pmeta{min-width:0!important;padding:0!important;gap:2px!important}
.player-shot-info .pmeta strong{font-size:12px!important;line-height:1.22!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere!important}
.player-shot-info .pmeta span{font-size:9.5px!important;line-height:1.25!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
.player-shot-info [data-player-artist]{color:#dce4e6!important}
.player-shot-wave{height:42px!important;min-width:180px!important;overflow:hidden!important;filter:none!important}
.player-shot-wave .player-wave-bars i{
  background:rgba(var(--theme-rgb),.34)!important;
  box-shadow:none!important;
}
.player-shot-wave .player-wave-played .player-wave-bars i{
  background:var(--theme-accent)!important;
  box-shadow:0 0 6px rgba(var(--theme-rgb),.24)!important;
}
.player-shot-times{color:rgba(225,235,237,.58)!important}
.player-shot-like{color:#f4f7f8!important;font-size:24px!important;transition:color .18s ease,transform .18s ease!important}
.player-shot-like:hover{color:var(--theme-accent)!important;transform:scale(1.08)!important}
.player-shot .mute{color:#f4f7f8!important}
.player-shot .mute:hover{color:var(--theme-accent)!important}
.player-volume-line{background:rgba(255,255,255,.28)!important}
.player-volume-line i{background:var(--theme-accent)!important;box-shadow:0 0 0 3px rgba(var(--theme-rgb),.08)!important}
.player-shot .compact-quality{
  border-color:rgba(var(--theme-rgb),.34)!important;
  background:rgba(var(--theme-rgb),.035)!important;
}
.player-shot .compact-quality button,
.player-shot .compact-quality button.active{color:var(--theme-accent)!important}
.player-shot .compact-quality span{color:#cbd4d6!important}
.player-shot .player-pop{color:#f3f6f7!important}
.player-shot .player-pop:hover{color:var(--theme-accent)!important}
.player-shot .player-live-state{
  display:none!important;
}
/* Ensure no legacy fixed shot color survives in player controls. */
.player.player-shot{--shot-red:var(--theme-accent)!important;--cyan:var(--theme-accent)!important}
.player.player-shot *{accent-color:var(--theme-accent)}

/* Frontend accents that are still visibly cyan/blue in the current screenshot. */
.top nav>a.on,.top nav>a:hover,.nav-discover>button.on,.nav-discover>button:hover,
.profile a,.profile-meta a,.detail a,.card a:hover,.section-head a,
.player-quality button,.compact-quality button,
[data-player-status][data-state="playing"]{
  color:var(--theme-accent)!important;
}
.top nav>a.on:after,.nav-discover>button.on:after{background:var(--theme-accent)!important}
.cover,.featured-thumb,.show-art,.resident-art,.profile-art{
  --cyan:var(--theme-accent)!important;
}

@media(max-width:1180px){
  .player.player-shot{grid-template-columns:82px 44px minmax(260px,360px) minmax(190px,1fr) 36px 102px 58px 34px!important;gap:10px!important;padding-left:18px!important;padding-right:18px!important}
  .player-shot-brand{width:82px!important;min-width:82px!important;max-width:82px!important}.player-shot-brand .player-shot-logo{width:72px!important;max-width:72px!important}
}
@media(max-width:900px){
  .player.player-shot{grid-template-columns:44px minmax(0,1fr) 36px 58px 34px!important;height:78px!important;min-height:78px!important;gap:10px!important;padding:0 14px!important}
  .player-shot-brand,.player-shot-wave,.player-shot-like,.player-volume-line{display:none!important}
  .player-shot .pctrl{display:flex!important;justify-content:center!important}
  .player-shot .compact-quality{display:flex!important}
  .player-shot-info{grid-template-columns:46px minmax(0,1fr)!important;gap:9px!important}
  .player-shot-info .cover{width:46px!important;height:46px!important;min-width:46px!important}
}
@media(max-width:620px){
  .player.player-shot{grid-template-columns:42px minmax(0,1fr) 34px!important;height:74px!important;min-height:74px!important;padding:0 10px!important}
  .player-shot .pctrl,.player-shot .compact-quality{display:none!important}
  .player-shot-info .pmeta strong{font-size:10.5px!important}.player-shot-info .pmeta span{font-size:8.5px!important}
}


/* 4.14.4 Popup Player + weekday theme — authoritative final layer */
.player.player-shot{cursor:pointer!important}
.player.player-shot button,
.player.player-shot a,
.player.player-shot input,
.player.player-shot select{cursor:pointer!important}
.player-shot-info,.player-shot-wave,.player-shot-brand{cursor:zoom-in!important}

/* Inline dialog and standalone /player share the exact active weekday accent. */
.player-popup-card,
.popup-player-standalone{
  --popup-accent:var(--theme-accent,#16d5df);
  --popup-rgb:var(--theme-rgb,22,213,223);
  border-color:rgba(var(--popup-rgb),.28)!important;
  box-shadow:0 28px 90px rgba(0,0,0,.58),0 0 0 1px rgba(var(--popup-rgb),.035),0 0 54px rgba(var(--popup-rgb),.08)!important;
}
.player-popup-card>header{border-bottom-color:rgba(var(--popup-rgb),.17)!important}
.player-popup-card>header b span,
.popup-brand span,
.popup-copy h3,
.popup-now h2,
.popup-quality button.active,
.popup-quality-inline button.active,
.player-popup-card a{color:var(--popup-accent)!important}
.popup-copy>small,.popup-now>small,.popup-status{color:var(--popup-accent)!important}
.popup-artwork{
  background:
   radial-gradient(circle at 55% 35%,rgba(var(--popup-rgb),.24),transparent 31%),
   radial-gradient(circle at 28% 78%,rgba(var(--popup-rgb),.10),transparent 34%),
   linear-gradient(145deg,#102126,#030809)!important;
  box-shadow:inset 0 0 0 1px rgba(var(--popup-rgb),.12),0 18px 50px rgba(0,0,0,.28)!important;
}
.popup-player-page{
  background:
   radial-gradient(circle at 50% 16%,rgba(var(--theme-rgb),.18),transparent 32%),
   radial-gradient(circle at 82% 76%,rgba(var(--theme-rgb),.08),transparent 28%),
   #010405!important;
}
.popup-progress-track{background:rgba(var(--popup-rgb),.14)!important}
.popup-progress-track i{background:var(--popup-accent)!important;box-shadow:0 0 16px rgba(var(--popup-rgb),.38)!important}
.popup-main-controls>[data-player-popup-toggle],
.popup-controls [data-popup-toggle]{
  border-color:rgba(var(--popup-rgb),.72)!important;
  background:linear-gradient(145deg,rgba(var(--popup-rgb),.98),rgba(var(--popup-rgb),.66))!important;
  color:#020708!important;
  box-shadow:0 0 0 5px rgba(var(--popup-rgb),.08),0 12px 30px rgba(var(--popup-rgb),.18)!important;
}
.popup-main-controls>[data-player-popup-toggle]:hover,
.popup-controls [data-popup-toggle]:hover{box-shadow:0 0 0 7px rgba(var(--popup-rgb),.11),0 15px 36px rgba(var(--popup-rgb),.24)!important}
.popup-quality button,
.popup-quality-inline button{
  border-color:rgba(var(--popup-rgb),.22)!important;
  background:rgba(var(--popup-rgb),.035)!important;
}
.popup-quality button:hover,
.popup-quality-inline button:hover,
.popup-quality button.active,
.popup-quality-inline button.active{
  border-color:rgba(var(--popup-rgb),.68)!important;
  background:rgba(var(--popup-rgb),.10)!important;
  color:var(--popup-accent)!important;
}
.player-popup-backdrop{background:rgba(0,3,5,.78)!important;backdrop-filter:blur(14px) saturate(1.08)!important}
.player-popup-card>header button:hover{color:var(--popup-accent)!important}


/* 320 FM 4.14.4 · R23 footer player geometry repair */
.player.player-shot{
 position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;
 width:100%!important;max-width:none!important;margin:0!important;transform:none!important;z-index:12000!important;
 box-sizing:border-box!important;
}
body{padding-bottom:84px!important}
@media(max-width:820px){body{padding-bottom:78px!important}.player.player-shot{bottom:0!important}}

/* Beats-radio-inspired interaction model, independently styled for 320 FM. */
.fm-has-mega{position:relative}
.fm-has-mega:after{content:'⌄';display:inline-block;margin-left:5px;font-size:8px;opacity:.55;transition:transform .22s ease,opacity .22s ease}
.fm-has-mega[aria-expanded="true"]:after{transform:rotate(180deg);opacity:1;color:var(--theme-accent,#16d5df)}
.fm-mega-menu{position:fixed;left:0;right:0;z-index:11950;padding:12px max(24px,calc((100vw - 1260px)/2)) 18px;background:linear-gradient(180deg,rgba(3,10,14,.985),rgba(5,14,19,.97));border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(var(--theme-rgb,22,213,223),.18);box-shadow:0 28px 65px rgba(0,0,0,.42);backdrop-filter:blur(22px) saturate(1.08);opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .24s cubic-bezier(.22,.78,.2,1)}
.fm-mega-menu[hidden]{display:none!important}.fm-mega-menu.is-open{opacity:1;transform:none}
.fm-mega-inner{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:stretch}
.fm-mega-intro{display:flex;flex-direction:column;justify-content:center;padding:19px 21px;border-right:1px solid rgba(255,255,255,.08)}
.fm-mega-intro small{color:var(--theme-accent,#16d5df);font-size:9px;font-weight:900;letter-spacing:.14em}.fm-mega-intro strong{margin-top:8px;font-size:27px;line-height:1;letter-spacing:-.04em}.fm-mega-intro span{margin-top:8px;color:#71848b;font-size:10px}
.fm-mega-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fm-mega-links>a{position:relative;display:flex;min-height:96px;flex-direction:column;justify-content:flex-end;padding:16px 17px;border:1px solid rgba(255,255,255,.07);background:rgba(7,18,24,.72);color:#fff;text-decoration:none;overflow:hidden;transition:transform .28s cubic-bezier(.22,.78,.2,1),border-color .25s ease,background .25s ease}
.fm-mega-links>a:before{content:'';position:absolute;inset:auto 0 0;height:2px;background:var(--theme-accent,#16d5df);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.fm-mega-links>a:hover{transform:translateY(-3px);border-color:rgba(var(--theme-rgb,22,213,223),.35);background:rgba(var(--theme-rgb,22,213,223),.06)}.fm-mega-links>a:hover:before{transform:scaleX(1)}
.fm-mega-links b{font-size:12px}.fm-mega-links span{margin-top:5px;color:#788c94;font-size:9px;line-height:1.4}.fm-mega-links i{position:absolute;right:12px;top:10px;color:#41545c;font-style:normal;font-size:8px;font-weight:800;letter-spacing:.08em}
@media(max-width:900px){.fm-mega-menu{display:none!important}.fm-has-mega:after{display:none}}