:root{color-scheme:dark;font-family:Segoe UI,Roboto,Arial,sans-serif;background:#111827;color:#e5e7eb}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;padding:22px 32px;background:linear-gradient(135deg,#1f2937,#111827);border-bottom:1px solid #374151}.header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.on-air-time{font-weight:700;background:#111827;border:1px solid #2f3b52;border-radius:10px;padding:10px 12px;color:#dbeafe;white-space:nowrap}h1{margin:0;font-size:30px}p{margin:6px 0 0;color:#9ca3af}button,input{border-radius:10px;border:1px solid #4b5563;padding:10px 12px;background:#1f2937;color:#f9fafb;font-size:15px}button{cursor:pointer}button:hover{background:#374151}main{padding:24px 32px;max-width:1180px;margin:auto}.panel{background:#172033;border:1px solid #374151;border-radius:18px;padding:18px;margin-bottom:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}h2,h3{margin-top:0}.player-panel audio{display:none}.custom-player{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}.custom-player button{min-width:120px}.custom-player #streamClock{font-weight:700;background:#111827;border:1px solid #2f3b52;border-radius:10px;padding:10px 12px}#nowPlaying{font-size:18px;font-weight:600}.player-buttons{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.search-row{display:flex;gap:10px;margin-bottom:18px}.search-row input{flex:1}.layout{display:grid;grid-template-columns:280px 1fr;gap:18px}.list{display:grid;gap:8px}.item{padding:11px 12px;border:1px solid #2f3b52;border-radius:12px;background:#111827;-webkit-tap-highlight-color:transparent}.item:hover{background:#1f2937}.track{cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.title{font-weight:700}.meta{color:#9ca3af;font-size:13px;margin-top:3px}.small-list{max-height:560px;overflow:auto}.artist{cursor:pointer}footer{color:#9ca3af;text-align:center;padding:18px}code{background:#1f2937;padding:2px 6px;border-radius:6px}.station-info,.hint{margin-top:8px;color:#9ca3af;font-size:.95rem}.cue-list{max-height:360px;overflow:auto}.cue-item{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}.cue-number{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:#263247;color:#e5e7eb;font-weight:700}.request-btn{white-space:nowrap}@media(max-width:800px){header{display:block}.header-actions{justify-content:flex-start;margin-top:14px}.header-actions button{margin-top:0}header button{margin-top:14px}main{padding:16px}.layout{grid-template-columns:1fr}.track{grid-template-columns:1fr}}

.remove-btn{margin-left:auto;background:#7b2222}.cue-track{flex:1}.history-list{margin-top:12px}.history-list .item{display:flex;gap:12px;align-items:center}

.history-item{cursor:pointer;display:flex;align-items:center;gap:12px}
.history-track{flex:1}
.history-item:hover{filter:brightness(1.05)}

.now-wrap{display:flex;gap:16px;align-items:center;margin:10px 0 6px}
.now-art{width:120px;height:120px;object-fit:cover;border-radius:14px;background:#243044;box-shadow:0 8px 22px rgba(0,0,0,.25)}
.cover{width:48px;height:48px;object-fit:cover;border-radius:8px;background:#243044;flex:0 0 auto}
.cover.missing,.now-art.missing{background:linear-gradient(135deg,#243044,#141b29);position:relative}
.track-main{display:flex;gap:12px;align-items:center;min-width:0}
.track-text{min-width:0}
.lyrics-box{margin-top:12px;background:#101827;border:1px solid #334155;border-radius:12px;padding:12px;max-height:360px;overflow:auto}
.lyrics-box pre{white-space:pre-wrap;font-family:inherit;line-height:1.45;margin:0}

/* Library view buttons: force all three buttons onto one row, even on narrow phones. */
.view-buttons{display:flex;flex-wrap:nowrap;gap:6px;margin:0 0 12px;width:100%}
.view-buttons button{flex:1 1 0;min-width:0;white-space:nowrap;padding:8px 3px;font-size:clamp(10px,3.1vw,15px);line-height:1.1;text-align:center}
.view-buttons button.active{background:#374151;border-color:#93c5fd}
@media(max-width:380px){.view-buttons{gap:4px}.view-buttons button{font-size:10px;padding:7px 2px}}
.view-label{color:#d1d5db;font-weight:700;margin:4px 0 12px}.browser-row{cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.open-btn{white-space:nowrap}

/* V17.9: make Play History easier to read on vertical phones. */
.history-list{margin-top:12px;max-height:70vh;overflow:auto}
.history-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center}
.history-track.track-main{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;min-width:0}
.history-track .cover{grid-row:1 / span 2}
.history-track .track-text{min-width:0;overflow-wrap:anywhere}
.history-track>.meta{grid-column:2;color:#9ca3af;font-size:13px;margin-top:0;line-height:1.3}
.history-item .request-btn{white-space:nowrap}
@media(max-width:560px){
  .history-item{grid-template-columns:30px minmax(0,1fr);align-items:start;padding:10px;gap:8px}
  .history-item .cue-number{width:26px;height:26px;font-size:13px}
  .history-track.track-main{grid-template-columns:44px minmax(0,1fr);gap:9px;line-height:1.25}
  .history-track .cover{width:44px;height:44px}
  .history-track .title{font-size:14px;line-height:1.25}
  .history-track .meta{font-size:12px;line-height:1.3}
  .history-item .request-btn{grid-column:2;justify-self:start;margin-top:4px;padding:7px 10px;font-size:13px}
}

/* V17.12: large-library Load More controls. */
.load-more-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;flex-wrap:wrap;color:#9ca3af}
.load-more-row button{min-width:130px;font-weight:700}
#loadMoreInfo{font-size:14px;color:#9ca3af}
@media(max-width:560px){.load-more-row{align-items:stretch}.load-more-row button{width:100%}#loadMoreInfo{width:100%;text-align:center}}

/* V17.13: default cover art + Play All actions in Folder/Artist views. */
.browser-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}
.play-all-btn{background:#1f3b2e;border-color:#2f7a4f;white-space:nowrap}
.play-all-btn:hover{background:#28543f}
@media(max-width:560px){
  .browser-row{grid-template-columns:1fr;gap:10px}
  .browser-actions{justify-content:stretch;width:100%}
  .browser-actions button{flex:1 1 0;min-width:0;padding:9px 8px}
}


/* V17.14: real-time listener counter and IP/location list. */
#listenersBtn{white-space:nowrap}
.listener-box{margin-top:12px;background:#101827;border:1px solid #334155;border-radius:12px;padding:12px;max-height:300px;overflow:auto}
.listener-header,.listener-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.9fr) minmax(0,1.2fr) .8fr;gap:10px;align-items:center}
.listener-header{color:#9ca3af;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:0 10px 6px}
.listener-row{font-size:14px}
.listener-field,.listener-value{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.listener-ip{font-family:Consolas,Monaco,monospace}
.listener-location,.listener-isp,.listener-time{color:#d1d5db}
.listener-label{display:none;color:#9ca3af;font-family:Segoe UI,Roboto,Arial,sans-serif;font-weight:700}
@media(max-width:800px){
  .listener-box{max-height:360px}
  .listener-header{display:none}
  .listener-row{grid-template-columns:1fr;gap:6px;align-items:start;padding:10px 12px}
  .listener-field{display:block}
  .listener-label{display:inline;margin-right:4px}
}


/* V17.15: active/toggled highlight for Now Playing panel buttons. */
.player-buttons button.active{background:#14532d!important;border-color:#22c55e!important;color:#dcfce7!important;box-shadow:0 0 0 1px rgba(34,197,94,.28) inset!important}
.player-buttons button.active:hover{background:#166534!important}


/* V17.16: make library Add to Queue buttons smaller and less thumb-catchy on phones. */
#library .track .request-btn{justify-self:end;align-self:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(max-width:800px){
  #library .track{grid-template-columns:1fr;gap:7px;align-items:start}
  #library .track .request-btn{justify-self:start;width:auto;max-width:max-content;min-width:0;padding:6px 9px;font-size:12px;line-height:1.15;border-radius:8px;margin-left:60px}
}
@media(max-width:430px){
  #library .track .request-btn{margin-left:56px;padding:6px 8px;font-size:12px}
}

/* V17.18: stream connection/buffering status display. */
.stream-status{font-weight:700;border:1px solid #2f3b52;border-radius:10px;padding:10px 12px;background:#111827;color:#d1d5db;min-width:92px;text-align:center}
.stream-status.connecting,.stream-status.buffering,.stream-status.reconnecting{border-color:#f59e0b;color:#fde68a;background:#302612}
.stream-status.tuned-in{border-color:#22c55e;color:#bbf7d0;background:#102719}
.stream-status.tuned-out{border-color:#7f1d1d;color:#fecaca;background:#2b1f1f}
.stream-status.error{border-color:#ef4444;color:#fecaca;background:#321818}
@media(max-width:560px){.custom-player{gap:8px}.stream-status{padding:8px 10px;font-size:13px;min-width:auto}}


/* V17.19: make stream status more obvious and reliable on phones. */
.stream-status{display:inline-flex;align-items:center;justify-content:center}
.stream-status::before{content:'Status: ';font-weight:600;color:#9ca3af;margin-right:4px}
@media(max-width:480px){.custom-player{align-items:stretch}.stream-status{flex:1 1 100%;justify-content:flex-start}}


/* V17.21: hierarchical file-explorer style Folder View. */
.folder-nav{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#101827;border-color:#40506a}
.folder-row .title{font-size:16px}
.folder-section-label{color:#9ca3af;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin:10px 2px 2px;padding:4px 2px}
.up-btn{background:#263247;border-color:#4b617f;white-space:nowrap}
.current-folder-play{white-space:nowrap}
@media(max-width:560px){
  .folder-nav{grid-template-columns:1fr;gap:10px}
  .folder-nav .browser-actions{justify-content:stretch;width:100%}
  .folder-nav .browser-actions button{flex:1 1 0;min-width:0;padding:9px 8px}
  .folder-section-label{font-size:12px;line-height:1.25}
}


/* V17.23: restore Artist View, speed up folder browsing, and give Up button press feedback. */
.up-btn.pressed,.up-btn:active{background:#3b82f6;border-color:#bfdbfe;color:#ffffff;box-shadow:0 0 0 2px rgba(147,197,253,.35) inset}
.artist-row{cursor:pointer}


/* V17.24: scan-complete library update notice and clean version footer. */
.scan-notice{display:none;margin:-4px 0 12px;padding:9px 12px;border:1px solid #2f7a4f;border-radius:10px;background:#102719;color:#bbf7d0;font-size:14px;font-weight:600}
footer{font-size:13px;letter-spacing:.02em}


/* V17.25: per-device Keep Screen On button and compact status row. */
.wake-lock-btn{min-width:auto;white-space:nowrap;font-weight:700;border-color:#4b617f;background:#1f2937}
.wake-lock-btn.active{background:#1f3b2e;border-color:#22c55e;color:#bbf7d0;box-shadow:0 0 0 1px rgba(34,197,94,.25) inset}
.wake-lock-btn:disabled{opacity:.65;cursor:wait}
@media(max-width:560px){
  .custom-player{gap:7px;align-items:center}
  .custom-player button{min-width:auto}
  .custom-player #playToggleBtn{min-width:92px;flex:0 0 auto;padding:8px 10px}
  .custom-player #streamClock{padding:8px 9px;font-size:13px}
  .stream-status{padding:8px 9px;font-size:12px;min-width:68px;flex:0 1 auto;justify-content:center}
  .stream-status::before{content:'';margin-right:0}
  .wake-lock-btn{padding:8px 9px;font-size:12px;flex:0 0 auto}
}
@media(max-width:380px){
  .custom-player{gap:6px}
  .custom-player #playToggleBtn{min-width:86px;padding:7px 8px;font-size:13px}
  .custom-player #streamClock{padding:7px 7px;font-size:12px}
  .stream-status{padding:7px 7px;font-size:11px;min-width:60px}
  .wake-lock-btn{padding:7px 7px;font-size:11px}
}

/* V17.26: cleaner Play History cards on vertical phone screens. */
.history-track .history-source{font-size:12px;color:#7dd3fc;margin-top:2px}
@media(max-width:560px){
  .history-list .item{border-radius:14px}
  .history-item{display:grid;grid-template-columns:1fr;gap:8px;padding:11px 12px}
  .history-item .cue-number{display:none}
  .history-track.track-main{display:grid;grid-template-columns:50px minmax(0,1fr);gap:10px;align-items:center}
  .history-track .cover{width:50px;height:50px;border-radius:10px}
  .history-track .title{font-size:15px;line-height:1.2;overflow-wrap:anywhere}
  .history-track .meta{font-size:12px;line-height:1.25;margin-top:2px}
  .history-track .history-album{display:none}
  .history-track .history-source{font-size:11px;letter-spacing:.02em;text-transform:uppercase;color:#7dd3fc}
  .history-item .request-btn{grid-column:1;justify-self:start;margin:0 0 0 60px;padding:6px 9px;font-size:12px;border-radius:8px;width:auto;max-width:max-content}
}


/* V17.27: Add-to-Queue feedback and Clear Queue control. */
.queue-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.queue-header h2{margin:0}
.clear-queue-btn{white-space:nowrap;background:#2a2235;border-color:#5b426f;color:#f5e8ff}
.clear-queue-btn.has-items{background:#4b1f1f;border-color:#9b3333;color:#fee2e2}
.clear-queue-btn.has-items:hover{background:#622727}
.clear-queue-btn.cleared{background:#14532d!important;border-color:#22c55e!important;color:#dcfce7!important}
.request-btn.queued{background:#14532d;border-color:#22c55e;color:#dcfce7}
.request-btn.queued:hover{background:#14532d}
.request-btn.queued:disabled{opacity:1;cursor:default}
@media(max-width:560px){.queue-header{align-items:flex-start}.clear-queue-btn{padding:7px 9px;font-size:12px;border-radius:8px}}


/* V17.28: Add Again state, clearer Open labels, and touch highlight cleanup. */
.request-btn.just-added{background:#14532d!important;border-color:#22c55e!important;color:#dcfce7!important;opacity:1;cursor:default}
.request-btn.add-again{background:#5f450f;border-color:#d97706;color:#fff7d6}
.request-btn.add-again:hover{background:#75550f}
.request-btn.queued:not(.just-added):not(.add-again){background:#5f450f;border-color:#d97706;color:#fff7d6}
.request-btn.queued:not(.just-added):not(.add-again):hover{background:#75550f}
.browser-row,.track,.history-item,.cue-item{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.browser-row:active,.track:active,.history-item:active,.cue-item:active{background:#111827}
.folder-nav:active{background:#101827}
button{-webkit-tap-highlight-color:rgba(147,197,253,.25);touch-action:manipulation}
button:active{filter:brightness(1.12)}
.open-btn{min-width:max-content}
@media (hover:none), (pointer:coarse){
  .item:hover{background:#111827}
  .folder-nav:hover{background:#101827}
  .browser-row:hover,.track:hover,.history-item:hover{filter:none;background:#111827}
}
@media(max-width:560px){
  .open-btn{font-size:12px;padding:7px 8px;white-space:nowrap}
  .browser-actions{gap:6px}
}

/* V17.29: Artist detail back navigation. */
.artist-back-nav{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#101827;border-color:#40506a}
.back-artists-btn{background:#263247;border-color:#4b617f;white-space:nowrap}
.back-artists-btn.pressed,.back-artists-btn:active{background:#3b82f6;border-color:#bfdbfe;color:#ffffff;box-shadow:0 0 0 2px rgba(147,197,253,.35) inset}
@media(max-width:560px){.artist-back-nav{grid-template-columns:1fr;gap:10px}.artist-back-nav .browser-actions{justify-content:stretch;width:100%}.artist-back-nav .browser-actions button{flex:1 1 0;min-width:0;padding:9px 8px}}


/* V17.30: bitrate display support, restored folder scroll, and consistent green button feedback. */
button.pressed,
button:active,
.open-btn.pressed,
.up-btn.pressed,
.back-artists-btn.pressed{
  background:#16a34a!important;
  border-color:#86efac!important;
  color:#ffffff!important;
  box-shadow:0 0 0 2px rgba(134,239,172,.35) inset!important;
  filter:none!important;
}
.request-btn.just-added,
.play-all-btn.just-added{
  background:#16a34a!important;
  border-color:#86efac!important;
  color:#ffffff!important;
  box-shadow:0 0 0 2px rgba(134,239,172,.25) inset!important;
  opacity:1;
  cursor:default;
}
.play-all-btn.add-again,
.play-all-btn.queued:not(.just-added){
  background:#5f450f!important;
  border-color:#d97706!important;
  color:#fff7d6!important;
}
.play-all-btn.add-again:hover,
.play-all-btn.queued:not(.just-added):hover{
  background:#75550f!important;
}
.open-btn,.up-btn,.back-artists-btn,.play-all-btn,button{transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease}

/* v17.31: independent local Song Time/progress line. Display-only; not clickable/scrubbable. */
.exp-song-progress{margin:10px 0 2px;max-width:520px;user-select:none;pointer-events:none}
.exp-song-progress-top{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;color:#d1d5db;margin-bottom:6px}
.exp-song-progress-track{height:4px;background:rgba(255,255,255,.14);border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.exp-song-progress-fill{height:100%;width:0%;background:#f9fafb;border-radius:999px;transition:width .8s linear;min-width:4px;box-shadow:0 0 10px rgba(255,255,255,.35)}
.exp-song-progress[data-state="empty"] .exp-song-progress-fill{width:4px;opacity:.7}
.exp-song-progress[data-state="buffering"] .exp-song-progress-top span:first-child::after{content:" • Buffering";color:#facc15}
@media(max-width:800px){.exp-song-progress{max-width:100%}}


/* v17.31: reliable 4-second progress-line return + phone control cleanup. */
#streamClock.hidden-original-timer{display:none!important}
#wakeLockBtn.hidden-wake-lock{display:none!important}
.custom-player.exp-control-layout{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:12px}
.control-row{display:flex;gap:10px;align-items:center;flex-wrap:nowrap;width:100%}
.tune-status-row #playToggleBtn,.tune-status-row .stream-status{flex:1 1 0;min-width:0;justify-content:center;text-align:center}
.exp-button-groups{display:flex;flex-direction:column;gap:10px;margin-top:12px;flex-wrap:nowrap}
.exp-button-groups .control-row{display:flex;gap:10px;flex-wrap:nowrap;width:100%}
.exp-button-groups button{flex:1 1 0;min-width:0}
.panel-action-row button{font-size:14px;white-space:nowrap}
.exp-song-progress-fill.resetting{transition:width 4s ease-in-out}
@media(max-width:560px){
  .custom-player.exp-control-layout{gap:9px;align-items:stretch}
  .control-row{gap:8px}
  .tune-status-row #playToggleBtn{min-width:0;flex:1 1 0;padding:10px 9px;font-size:14px}
  .tune-status-row .stream-status{flex:1 1 0!important;justify-content:center!important;min-width:0;padding:10px 8px;font-size:13px}
  .stream-status::before{content:''!important;margin-right:0!important}
  .station-action-row button{font-size:14px;padding:10px 8px}
  .panel-action-row button{font-size:12px;padding:9px 6px;white-space:nowrap}
  #listenersBtn{font-size:12px}
}
@media(max-width:380px){
  .control-row{gap:6px}
  .tune-status-row #playToggleBtn,.tune-status-row .stream-status{font-size:12px;padding:8px 6px}
  .station-action-row button{font-size:12px;padding:8px 6px}
  .panel-action-row button{font-size:11px;padding:8px 4px}
  #listenersBtn{font-size:11px}
}


/* v17.31: keep the complete request count together on its own phone line. */
.station-request-count::before{content:' • '}
@media(max-width:560px){
  .station-request-count{display:block;white-space:nowrap;margin-top:2px}
  .station-request-count::before{content:''}
}

/* FlynnStream v1.0.0 RC1: phone-safe folder paths in Now Playing and Play History. */
.now-details{flex:1 1 auto;min-width:0}
.now-folder,.history-folder{color:#9ca3af;font-size:13px;line-height:1.35;margin-top:5px;overflow-wrap:anywhere;word-break:break-word}
.now-folder[hidden]{display:none!important}
.history-folder{color:#aeb8c8}
@media(max-width:560px){
  .now-wrap{align-items:flex-start;gap:12px}
  .now-art{width:92px;height:92px;flex:0 0 92px;border-radius:12px}
  #nowPlaying{font-size:16px;line-height:1.3;overflow-wrap:anywhere}
  .now-folder,.history-folder{font-size:11px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}
@media(max-width:380px){
  .now-art{width:80px;height:80px;flex-basis:80px}
  .now-wrap{gap:10px}
  #nowPlaying{font-size:15px}
}


/* v1.0.0 RC1: keep History cards and the search row inside narrow phone screens. */
@media(max-width:560px){
  .history-list .history-item{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:11px 12px;align-items:start}
  .history-list .history-track.track-main{width:100%;grid-template-columns:50px minmax(0,1fr);gap:10px;align-items:start}
  .history-list .history-item .request-btn{grid-column:1;justify-self:start;margin:0 0 0 60px;width:auto;max-width:max-content}
  .history-list .history-folder{max-width:100%;min-width:0}
  .search-row{min-width:0}
  .search-row input{min-width:0}
  .search-row button{flex:0 0 auto}
}


/* FlynnStream v1.0.0 RC next-build: Next Track buffer-drain feedback. */
#nextBtn.next-drain{position:relative;overflow:hidden;border-color:#22c55e;color:transparent!important;background:#1f2937;opacity:1;cursor:wait}
#nextBtn.next-drain::before{content:'';position:absolute;inset:0;background:#16a34a;transform-origin:left center;transform:scaleX(var(--next-fill,1));transition:transform var(--next-fill-transition,0ms) linear;z-index:0}
#nextBtn.next-drain::after{content:attr(data-label);position:relative;z-index:1;color:#f9fafb;font-weight:700}
#nextBtn.next-drain:disabled{opacity:1}

/* V1.0.0 RC search cleanup: search count and Play Search Results button. */
.search-summary{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:#101827;border-color:#40506a}
.search-summary .browser-actions{justify-content:flex-end}
.search-play-all{font-weight:700}
@media(max-width:560px){.search-summary{grid-template-columns:1fr;gap:10px}.search-summary .browser-actions{justify-content:stretch;width:100%}.search-summary .browser-actions button{width:100%}}

/* V1.0.0 RC UI polish: title-row neon logo, phone-safe queue feedback, and bottom controls. */
.header-brand{min-width:0}
.brand-row{display:flex;align-items:center;gap:8px}
.on-air-wrap{display:flex;align-items:center;gap:14px;min-width:0;flex-wrap:nowrap}
.fs-logo-badge{--logo-size:36px;position:relative;width:var(--logo-size);height:var(--logo-size);flex:0 0 var(--logo-size);pointer-events:none;user-select:none;-webkit-user-select:none;perspective:900px;perspective-origin:center center;overflow:visible}
.fs-logo-static,.fs-logo-spin{position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:contain}
.fs-logo-static{background-image:url('/static/flynnstream_logo_static.svg');animation:fsLogoNeonCycle 8s linear infinite;transform:translateZ(0)}
.fs-logo-rotator{position:absolute;inset:0;transform-style:preserve-3d}
.fs-logo-spin{background-image:url('/static/flynnstream_logo_spin.svg');transform-style:preserve-3d;backface-visibility:visible;-webkit-backface-visibility:visible;animation:fsLogoSignSpin 4s linear infinite;will-change:transform;filter:drop-shadow(0 0 1px rgba(255,255,255,.35))}
@keyframes fsLogoSignSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes fsLogoNeonCycle{
  0%{filter:saturate(1.4) brightness(1.08) hue-rotate(0deg) drop-shadow(0 0 2px rgba(79,209,255,.95)) drop-shadow(0 0 5px rgba(79,209,255,.75));}
  25%{filter:saturate(1.45) brightness(1.08) hue-rotate(75deg) drop-shadow(0 0 2px rgba(92,255,187,.95)) drop-shadow(0 0 5px rgba(92,255,187,.72));}
  50%{filter:saturate(1.45) brightness(1.08) hue-rotate(150deg) drop-shadow(0 0 2px rgba(197,118,255,.95)) drop-shadow(0 0 5px rgba(197,118,255,.72));}
  75%{filter:saturate(1.45) brightness(1.08) hue-rotate(220deg) drop-shadow(0 0 2px rgba(255,110,211,.95)) drop-shadow(0 0 5px rgba(255,110,211,.72));}
  100%{filter:saturate(1.4) brightness(1.08) hue-rotate(360deg) drop-shadow(0 0 2px rgba(79,209,255,.95)) drop-shadow(0 0 5px rgba(79,209,255,.75));}
}
.bottom-view-actions{display:none;align-items:center;justify-content:flex-end;margin-top:14px}
.bottom-actions-row{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:nowrap;width:100%}
.bottom-actions-row button{white-space:nowrap}
@media(min-width:801px){
  .header-actions{gap:16px}
  .on-air-wrap{gap:16px}
}
@media(max-width:800px){
  .header-actions{justify-content:flex-start;margin-top:14px;gap:14px}
  .on-air-wrap{gap:12px}
}
@media(max-width:560px){
  .bottom-view-actions{margin-top:12px}
  .bottom-actions-row{justify-content:stretch}
  .bottom-actions-row button{flex:1 1 0;min-width:0;padding:9px 8px}
  .bottom-actions-row .play-all-btn{font-size:13px}
}
@media(max-width:380px){
  .bottom-actions-row{gap:6px}
  .bottom-actions-row button{font-size:11px;padding:8px 4px}
  .on-air-wrap{gap:10px}
}

/* V1.0.0 RC spectrum analyzer: 12-segment LED bars, shared analyzer toggle, mobile header cleanup, and rectangular LED fit. */
.fs-logo-badge{--logo-size:36px}
.player-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 12px}
.player-title-row h2{margin:0;flex:0 0 auto}
.player-title-spectrum{display:none;align-items:center;justify-content:flex-end;gap:10px;min-width:0;flex:1 1 auto}
.now-spectrum-desktop{display:flex;align-items:center;justify-content:flex-end;margin-left:auto;flex:0 0 380px;min-width:0;padding:10px 4px 0 18px;align-self:stretch}
.progress-spectrum-row{display:block;margin:10px 0 2px}
.progress-spectrum-row .exp-song-progress{margin:0;max-width:520px}
.spectrum-shell{position:relative;overflow:hidden;border:1px solid rgba(34,197,94,.28);border-radius:12px;background:linear-gradient(180deg,rgba(15,23,42,.78),rgba(17,24,39,.20));box-shadow:inset 0 0 18px rgba(34,197,94,.08),0 0 10px rgba(34,197,94,.06);pointer-events:none;user-select:none;-webkit-user-select:none;opacity:0;transition:opacity .75s ease,filter .75s ease;filter:saturate(.72) brightness(.78)}
.spectrum-shell.spectrum-active{opacity:1;filter:saturate(1.02) brightness(.98)}
.spectrum-shell.spectrum-fading{opacity:0;filter:saturate(.72) brightness(.66)}
.spectrum-shell.spectrum-disabled{opacity:0!important;filter:saturate(.5) brightness(.55)}
.spectrum-shell::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.035),transparent 16%,transparent 84%,rgba(255,255,255,.025));opacity:.30;pointer-events:none}
.spectrum-canvas{display:block;width:100%;height:100%}
.spectrum-mobile-canvas{position:absolute;right:0;bottom:0;width:112px;height:40px}
.spectrum-desktop{display:block;width:360px;height:120px;flex:0 0 360px}
.spectrum-mobile{display:none;width:112px;height:40px;flex:0 0 112px;border-radius:9px;overflow:hidden;margin-top:-3px;margin-bottom:-3px}
.spectrum-toggle-btn{font-weight:700;white-space:nowrap;background:#123322;border-color:#237346;color:#d1fae5;box-shadow:0 0 10px rgba(34,197,94,.08)}
.spectrum-toggle-btn:hover{background:#17452d}
.spectrum-toggle-btn[aria-pressed="false"]{background:#2b1f1f;border-color:#7f1d1d;color:#fecaca;box-shadow:none}
.spectrum-toggle-btn[aria-pressed="false"]:hover{background:#3b2424}
@media(min-width:801px) and (max-width:1040px){.spectrum-desktop{width:320px;height:112px;flex-basis:320px}.now-spectrum-desktop{display:flex;align-items:center;justify-content:flex-end;margin-left:auto;flex:0 0 380px;min-width:0;padding:10px 4px 0 18px;align-self:stretch}}
@media(max-width:800px){
  .player-title-row{margin-bottom:10px}
  .player-title-spectrum{display:flex}
  .now-spectrum-desktop{display:none}
  .progress-spectrum-row{display:block;margin:10px 0 2px}
  .progress-spectrum-row .exp-song-progress{max-width:100%}
  .spectrum-desktop{display:none}
  .spectrum-mobile{display:block}
}
@media(max-width:560px){.spectrum-mobile{width:108px;height:40px;flex-basis:108px;margin-top:-4px;margin-bottom:-4px;overflow:hidden}.spectrum-mobile-canvas{right:0;bottom:0;width:108px;height:40px}.player-title-row{gap:10px}.station-action-row #spectrumToggleBtn{font-size:13px;padding:10px 6px}}
@media(max-width:380px){.spectrum-mobile{width:94px;height:38px;flex-basis:94px;margin-top:-4px;margin-bottom:-4px;overflow:hidden}.spectrum-mobile-canvas{width:94px;height:38px;bottom:0}.player-title-row{gap:8px}.station-action-row #spectrumToggleBtn{font-size:11px;padding:8px 4px}}

/* Mobile header compacting: top row title/logo + On Air; second row tracks + Scan Changes. */
@media(max-width:800px){
  header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:6px;padding:16px}
  .header-brand{display:contents;min-width:0}
  .brand-row{grid-column:1;grid-row:1;min-width:0;gap:8px}
  .header-actions{display:contents}
  .on-air-wrap{grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0;gap:8px}
  #stats{grid-column:1;grid-row:2;margin:0;align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;line-height:1.2;color:#9ca3af;min-width:0}
  #scanBtn{grid-column:2;grid-row:2;justify-self:end;align-self:center;margin:0;padding:8px 10px;white-space:nowrap;font-size:13px;line-height:1.1}
  .brand-row h1{min-width:0;white-space:nowrap}
}
@media(max-width:380px){
  header{column-gap:8px;padding:14px}
  .on-air-time{font-size:13px;padding:8px 9px}
  #scanBtn{font-size:12px;padding:8px 8px}
  #stats{font-size:12px}
}


/* RC1.15 / RC3.15 header stats, analyzer color polish, and small Changing label. */
#stats{max-width:100%;min-width:0;overflow:hidden}
#stats .stats-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nextBtn.next-drain::after{font-size:13px;white-space:nowrap;letter-spacing:-.01em}
.spectrum-shell{border-color:rgba(147,197,253,.32);box-shadow:inset 0 0 18px rgba(147,197,253,.08),0 0 10px rgba(56,189,248,.06)}
@media(max-width:800px){
  #stats{grid-column:1;grid-row:2 / span 2;display:block;margin:0;align-self:center;white-space:normal;overflow:visible;text-overflow:clip;font-size:12.5px;line-height:1.22;color:#9ca3af;min-width:0}
  #stats .stats-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #scanBtn{grid-column:2;grid-row:2 / span 2;justify-self:end;align-self:center;margin:0;padding:8px 10px;white-space:nowrap;font-size:13px;line-height:1.1}
}
@media(max-width:560px){#nextBtn.next-drain::after{font-size:11px;letter-spacing:-.03em}}
@media(max-width:380px){#stats{font-size:11.5px}#nextBtn.next-drain::after{font-size:10px}}

.now-main-column{flex:1 1 auto;min-width:0}
.now-mobile-spectrum{display:none}
/* RC1.17 / RC3.17: mobile stats layout, neon pill analyzer, and mobile spacing polish. */
@media(max-width:800px){
  header{grid-template-rows:auto auto auto;row-gap:5px}
  #stats{grid-column:1 / -1;grid-row:2 / span 2;display:block;margin:0;align-self:center;white-space:normal;overflow:visible;text-overflow:clip;font-size:12.5px;line-height:1.22;color:#9ca3af;min-width:0;width:100%}
  #scanBtn{grid-column:2;grid-row:3;justify-self:end;align-self:center;margin:0;padding:7px 10px;white-space:nowrap;font-size:13px;line-height:1.1}
  #stats .stats-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #stats .stats-mobile-line1{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;overflow:visible;text-overflow:clip}
  #stats .stats-folder-part{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #stats .stats-scan-part{flex:0 0 auto;white-space:nowrap;text-align:right;color:#d1d5db}
  #stats .stats-mobile-line2{display:block;grid-column:1;grid-row:3;padding-top:1px;padding-right:96px;color:#9ca3af}
  .player-title-row{margin-bottom:8px}
  .player-title-spectrum{display:none!important}
  .now-wrap{align-items:flex-start;gap:12px}
  .now-main-column{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:stretch}
  .now-mobile-spectrum{display:flex;justify-content:flex-end;align-items:flex-start;margin:-2px 0 8px 0;min-height:58px;width:100%}
  .now-details{width:100%;min-width:0}
  .spectrum-mobile{display:block;width:clamp(170px,56vw,210px);height:58px;flex:0 0 auto;border-radius:12px;overflow:hidden;margin:0}
  .spectrum-mobile-canvas{position:static;width:100%;height:100%}
  main{padding:14px 16px 16px}
  .panel{padding:15px;margin-bottom:15px}
  .cue-panel .hint{margin-top:4px;margin-bottom:8px;font-size:13px;line-height:1.25}
  .queue-header{margin-bottom:4px}
}
@media(max-width:560px){
  .spectrum-mobile{width:clamp(160px,54vw,200px);height:56px}
  .now-mobile-spectrum{min-height:56px;margin-top:-2px;margin-bottom:8px}
  #stats .stats-mobile-line2{padding-right:92px}
}
@media(max-width:380px){
  #stats{font-size:11.5px}
  #stats .stats-mobile-line1{gap:8px}
  #stats .stats-mobile-line2{padding-right:84px}
  .spectrum-mobile{width:150px;height:52px}
  .now-mobile-spectrum{min-height:52px}
  main{padding:12px 14px 14px}
  .panel{padding:14px;margin-bottom:14px}
}


/* RC1.18 / RC3.18: taller right-anchored mobile analyzer and neon glass analyzer polish. */
.spectrum-shell{
  border-color:rgba(125,211,252,.30);
  background:linear-gradient(180deg,rgba(7,16,30,.92),rgba(15,23,42,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 24px rgba(56,189,248,.10),0 0 18px rgba(168,85,247,.08);
  border-radius:14px;
}
.spectrum-shell::before{content:'';position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 26%,rgba(255,255,255,.02) 70%,rgba(0,0,0,.10));pointer-events:none;opacity:.95}
.spectrum-shell::after{background:linear-gradient(90deg,rgba(255,255,255,.045),transparent 18%,transparent 82%,rgba(255,255,255,.028));opacity:.36}
.spectrum-shell.spectrum-active{filter:saturate(1.12) brightness(1.02)}
.spectrum-shell.spectrum-fading{filter:saturate(.74) brightness(.66)}
.spectrum-mobile{border-radius:16px}
@media(max-width:800px){
  .now-main-column{position:relative}
  .now-mobile-spectrum{display:flex;justify-content:flex-end;align-items:flex-start;width:100%;min-height:96px;margin:-42px 0 8px auto;position:relative;z-index:1;pointer-events:none}
  .spectrum-mobile{width:clamp(134px,40vw,148px);height:92px;flex:0 0 auto;margin-left:auto}
  .spectrum-mobile-canvas{position:static;width:100%;height:100%}
}
@media(max-width:560px){
  .now-mobile-spectrum{min-height:92px;margin-top:-38px;margin-bottom:8px}
  .spectrum-mobile{width:clamp(130px,39vw,144px);height:88px}
}
@media(max-width:380px){
  .now-mobile-spectrum{min-height:86px;margin-top:-32px}
  .spectrum-mobile{width:126px;height:82px}
}


/* RC1.20 / RC3.20: separate Now Playing title/artist and move folder into the station summary row. */
#nowPlaying{font-weight:600}
#nowPlaying .now-title{font-weight:700;line-height:1.22;overflow-wrap:anywhere}
#nowPlaying .now-artist{font-size:.88em;font-weight:500;line-height:1.22;margin-top:3px;color:#cbd5e1;overflow-wrap:anywhere}
.station-summary{display:inline-block;max-width:100%;white-space:nowrap;vertical-align:middle}
@media(max-width:560px){
  #nowPlaying .now-title{line-height:1.24}
  #nowPlaying .now-artist{font-size:.86em;line-height:1.2;margin-top:3px}
  .station-summary{font-size:13px}
}
@media(max-width:380px){
  .station-summary{font-size:12px}
}


/* RC1.21 / RC3.21: mobile Now Playing folder/status layout and vertical-phone logo spacing. */
.station-mobile-meta{display:none}
@media(max-width:800px){
  .now-folder{display:none}
  .now-folder:not([hidden]){display:block;margin:8px 0 0;color:#9ca3af;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:clip;word-break:normal;overflow-wrap:normal}
  .station-desktop-summary,.station-desktop-request{display:none!important}
  .station-mobile-meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:clip;color:#9ca3af;font-size:12px;line-height:1.25}
  .station-info{margin-top:4px}
}
@media(max-width:560px){
  .brand-row{gap:12px}
  .now-folder:not([hidden]),.station-mobile-meta{font-size:11.5px}
}
@media(max-width:380px){
  .brand-row{gap:10px}
  .now-folder:not([hidden]),.station-mobile-meta{font-size:11px}
}
/* RC1.21 / RC3.21 correction: folder row is mobile-only; desktop keeps folder in the inline metadata row. */
.now-folder{display:none}
@media(max-width:800px){.now-folder:not([hidden]){display:block}}


/* RC1.22 / RC3.22: mobile 10-band analyzer fit. */
@media(max-width:800px){
  .spectrum-mobile{width:clamp(144px,43vw,162px)}
}
@media(max-width:560px){
  .spectrum-mobile{width:clamp(140px,42vw,158px)}
}
@media(max-width:380px){
  .spectrum-mobile{width:136px}
}

/* RC1.25 / RC3.25: stable portrait-mobile title/logo spacing without changing the On Air clock itself. */
@media(max-width:560px) and (orientation:portrait){
  header{grid-template-columns:max-content minmax(0,1fr);column-gap:18px;padding-left:12px;padding-right:12px}
  .brand-row{width:max-content;min-width:max-content;flex:0 0 auto}
  .brand-row h1{flex:0 0 auto;min-width:max-content}
  .fs-logo-badge{flex:0 0 var(--logo-size);margin-left:2px}
  .on-air-wrap{min-width:0;justify-self:end;margin-left:0}
  .on-air-time{font-variant-numeric:tabular-nums}
}
@media(max-width:380px) and (orientation:portrait){
  header{column-gap:16px;padding-left:10px;padding-right:10px}
}


/* RC1.26 / RC3.26: locked portrait header, 15-band desktop analyzer, and analyzer output-sync controls. */
.spectrum-shell{pointer-events:auto}
.spectrum-canvas{pointer-events:none}
.spectrum-settings-btn{position:absolute;top:5px;right:5px;z-index:4;width:25px;height:25px;min-width:0;padding:0;border-radius:999px;border:1px solid rgba(147,197,253,.32);background:rgba(7,16,30,.74);color:#dbeafe;font-size:15px;line-height:23px;text-align:center;opacity:.72;box-shadow:0 0 10px rgba(56,189,248,.12);pointer-events:auto}
.spectrum-settings-btn:hover,.spectrum-settings-btn:focus-visible{opacity:1;background:rgba(24,38,61,.95);border-color:rgba(125,211,252,.62);outline:none}
.spectrum-settings-overlay[hidden]{display:none!important}
.spectrum-settings-overlay{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,23,.72);backdrop-filter:blur(5px)}
.spectrum-settings-card{width:min(430px,calc(100vw - 32px));background:linear-gradient(180deg,#172033,#101827);border:1px solid #40506a;border-radius:18px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.spectrum-settings-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.spectrum-settings-header h3{margin:0}
.spectrum-settings-close{width:34px;height:34px;min-width:34px;padding:0;border-radius:999px;font-size:22px;line-height:30px}
.spectrum-latency-status,.spectrum-settings-note{margin:8px 0;color:#cbd5e1;font-size:13px;line-height:1.4}
.spectrum-delay-mode-row{display:flex;gap:8px;margin:14px 0}
.spectrum-delay-mode-row button{flex:1 1 0}
.spectrum-delay-mode-row button.active{background:#164e63;border-color:#22d3ee;color:#cffafe;box-shadow:0 0 12px rgba(34,211,238,.12)}
.spectrum-delay-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700;margin-top:12px}
.spectrum-delay-label output{font-variant-numeric:tabular-nums;color:#67e8f9}
.spectrum-delay-range{width:100%;margin:12px 0 8px;accent-color:#22d3ee}
.spectrum-delay-mode-status{font-size:13px;font-weight:700;color:#e0f2fe}
body.spectrum-settings-open{overflow:hidden}
@media(max-width:560px){
  .spectrum-settings-btn{width:23px;height:23px;line-height:21px;font-size:14px;top:4px;right:4px}
  .spectrum-settings-overlay{align-items:flex-end;padding:0}
  .spectrum-settings-card{width:100%;max-width:none;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-sizing:border-box}
}
@media(max-width:560px) and (orientation:portrait){
  header{grid-template-columns:max-content minmax(12px,1fr) max-content;column-gap:0;padding-left:12px;padding-right:12px}
  .brand-row{grid-column:1;grid-row:1;gap:.58em;width:max-content;min-width:max-content;max-width:none;flex:0 0 auto}
  .brand-row h1{flex:0 0 auto;min-width:max-content;max-width:none}
  .fs-logo-badge{flex:0 0 var(--logo-size);margin-left:0}
  .on-air-wrap{grid-column:3;grid-row:1;justify-self:end;min-width:max-content;margin-left:0}
  .on-air-time{min-width:max-content;font-variant-numeric:tabular-nums;white-space:nowrap}
  #stats{grid-column:1 / -1}
  #scanBtn{grid-column:3}
}
@media(max-width:380px) and (orientation:portrait){
  header{grid-template-columns:max-content minmax(10px,1fr) max-content;padding-left:10px;padding-right:10px}
  .brand-row{gap:.52em}
}

/* RC1.27 / RC3.27: equal action buttons, centered Changing label, portrait logo spacing, landscape mobile analyzer, and shinier analyzer glow. */
.station-action-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch;width:100%}
.station-action-row button{width:100%;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap}
#nextBtn.next-drain{position:relative;overflow:hidden}
#nextBtn.next-drain::after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:14px;letter-spacing:0;line-height:1;text-align:center;transform:translateY(-.5px)}
@media(max-width:560px){
  .station-action-row{gap:8px}
  .station-action-row button{font-size:13px;padding:10px 6px}
  #nextBtn.next-drain::after{font-size:13px;padding:0 6px}
}
@media(max-width:380px){
  .station-action-row{gap:6px}
  .station-action-row button{font-size:12px;padding:8px 4px}
  #nextBtn.next-drain::after{font-size:12px;padding:0 4px}
}

.spectrum-shell{border-color:rgba(176,221,255,.34)!important;background:linear-gradient(180deg,rgba(7,15,29,.95),rgba(11,18,33,.74) 56%,rgba(10,14,27,.88))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 22px rgba(56,189,248,.10),inset 0 -10px 28px rgba(168,85,247,.08),0 0 14px rgba(56,189,248,.10),0 0 22px rgba(168,85,247,.08)!important}
.spectrum-shell::before{content:'';position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 18%,rgba(255,255,255,0) 34%,rgba(125,211,252,.05) 70%,rgba(0,0,0,.08));pointer-events:none;opacity:.98}
.spectrum-shell::after{background:linear-gradient(90deg,rgba(255,255,255,.05),transparent 18%,transparent 82%,rgba(255,255,255,.03))!important;opacity:.42!important}
.spectrum-shell.spectrum-active{animation:fsSpectrumAura 9s linear infinite;filter:saturate(1.16) brightness(1.03)!important}
@keyframes fsSpectrumAura{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 22px rgba(56,189,248,.10),inset 0 -10px 28px rgba(168,85,247,.08),0 0 14px rgba(56,189,248,.10),0 0 22px rgba(168,85,247,.08)}
  25%{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 22px rgba(59,130,246,.11),inset 0 -10px 28px rgba(34,211,238,.07),0 0 14px rgba(59,130,246,.10),0 0 22px rgba(34,211,238,.08)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 22px rgba(168,85,247,.11),inset 0 -10px 28px rgba(236,72,153,.08),0 0 14px rgba(168,85,247,.10),0 0 22px rgba(236,72,153,.08)}
  75%{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 22px rgba(45,212,191,.10),inset 0 -10px 28px rgba(59,130,246,.08),0 0 14px rgba(45,212,191,.09),0 0 22px rgba(59,130,246,.08)}
}

@media(max-width:560px) and (orientation:portrait){
  header{grid-template-columns:max-content minmax(12px,1fr) max-content;column-gap:10px;align-items:center}
  .brand-row{grid-column:1;grid-row:1;width:max-content;min-width:max-content;gap:4px;flex-wrap:nowrap}
  .brand-row h1{flex:0 0 auto;min-width:max-content;white-space:nowrap}
  .fs-logo-badge{flex:0 0 var(--logo-size);margin:0}
  .header-actions{display:contents}
  .on-air-wrap{grid-column:3;grid-row:1;justify-self:end;align-self:center;min-width:max-content;gap:0;flex-wrap:nowrap}
  .on-air-time{font-variant-numeric:tabular-nums;white-space:nowrap}
  #stats{grid-column:1 / -1;grid-row:2}
  #scanBtn{grid-column:3;grid-row:3;justify-self:end}
}

@media(max-width:800px) and (orientation:landscape){
  .now-mobile-spectrum{display:flex;justify-content:flex-end;align-items:flex-start;width:100%}
  .spectrum-mobile{display:block;width:clamp(190px,36vw,240px);height:92px;flex:0 0 auto;margin-left:auto}
  .spectrum-mobile-canvas{position:static;width:100%;height:100%}
}
@media(max-width:560px) and (orientation:landscape){
  .spectrum-mobile{width:clamp(176px,40vw,228px);height:88px}
}

/* RC1.28 / RC3.28: measured portrait-header fit without changing the normal layout. */
@media(max-width:560px) and (orientation:portrait){
  html,body{max-width:100%;overflow-x:hidden}
  header{box-sizing:border-box;width:100%;max-width:100vw;grid-template-columns:max-content minmax(8px,1fr) max-content;column-gap:0;padding-left:10px;padding-right:10px;overflow-x:clip}
  .brand-row{grid-column:1;grid-row:1;gap:4px;width:max-content;min-width:max-content;max-width:none;flex-wrap:nowrap}
  .brand-row h1{flex:0 0 auto;min-width:max-content;max-width:none;white-space:nowrap}
  .fs-logo-badge{flex:0 0 var(--logo-size);margin:0}
  .on-air-wrap{grid-column:3;grid-row:1;justify-self:end;align-self:center;min-width:max-content;max-width:none;margin:0;gap:0;flex-wrap:nowrap}
  .on-air-time{min-width:max-content;max-width:none;font-variant-numeric:tabular-nums;white-space:nowrap}
  #stats{grid-column:1 / -1;grid-row:2;width:100%;max-width:100%;min-width:0;box-sizing:border-box;overflow:visible}
  #stats .stats-mobile-line1{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:8px;width:100%;max-width:100%;min-width:0;overflow:hidden}
  #stats .stats-folder-part{min-width:0;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:clip}
  #stats .stats-scan-part{min-width:max-content;max-width:none;white-space:nowrap;text-align:right}
  #stats .stats-mobile-line2{max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}
  #scanBtn{grid-column:3;grid-row:3;justify-self:end;max-width:100%}
  header.mobile-header-compact{grid-template-columns:max-content minmax(4px,1fr) max-content;padding-left:7px;padding-right:7px}
  header.mobile-header-compact .on-air-time{padding-left:7px;padding-right:7px}
  header.mobile-header-compact #stats .stats-mobile-line1{gap:6px}
  header.mobile-header-tight{grid-template-columns:max-content minmax(2px,1fr) max-content;padding-left:5px;padding-right:5px}
  header.mobile-header-tight .on-air-time{padding-left:5px;padding-right:5px;font-size:12.5px}
  header.mobile-header-tight .brand-row h1{font-size:29px}
  header.mobile-header-tight .fs-logo-badge{--logo-size:35px}
  header.mobile-header-tight #stats{font-size:11.5px}
  header.mobile-header-tight #stats .stats-mobile-line1{gap:4px}
  header.mobile-header-ultra{grid-template-columns:max-content minmax(1px,1fr) max-content;padding-left:4px;padding-right:4px}
  header.mobile-header-ultra .brand-row h1{font-size:27px}
  header.mobile-header-ultra .fs-logo-badge{--logo-size:32px}
  header.mobile-header-ultra .on-air-time{padding-left:4px;padding-right:4px;font-size:11.5px}
  header.mobile-header-ultra #stats{font-size:10.75px}
  header.mobile-header-ultra #stats .stats-mobile-line1{gap:3px}
  header.mobile-header-ultra #scanBtn{font-size:11px;padding-left:5px;padding-right:5px}
}

/* RC1.31 / RC3.32: clean native fast scrolling with floating Home and Up controls. */
.page-section-start{scroll-margin-top:8px}
.quick-nav[hidden]{display:none!important}
.quick-nav{
  position:fixed;
  z-index:1150;
  right:max(14px,env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap:8px;
}
.quick-nav button{
  min-width:68px;
  padding:9px 12px;
  border-color:rgba(96,165,250,.42);
  background:rgba(15,23,42,.92);
  color:#e0f2fe;
  font-weight:700;
  box-shadow:0 8px 25px rgba(0,0,0,.36),0 0 12px rgba(56,189,248,.10);
  backdrop-filter:blur(7px);
}
.quick-nav #quickHomeBtn{border-color:#4b617f;background:rgba(38,50,71,.94)}
.quick-nav #quickHomeBtn:hover{background:rgba(51,68,94,.96)}
.quick-nav #quickUpBtn:hover{background:rgba(30,58,95,.96)}
.load-more-row #listTopBtn,.load-more-row #libraryHomeBtn{font-weight:700}
.load-more-row #libraryHomeBtn{border-color:#4b617f;background:#263247}
.load-more-row #libraryHomeBtn:hover{background:#33445e}
@media(max-width:800px){
  .quick-nav{right:max(12px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));gap:7px}
  .quick-nav button{min-width:64px;padding:9px 10px;font-size:13px}
}
@media(max-width:380px){
  .quick-nav{gap:6px}
  .quick-nav button{min-width:58px;padding:8px 8px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .spectrum-shell,.spectrum-shell.spectrum-active{animation:none}
  .quick-nav button{transition:none}
}

/* RC1.32 / RC3.33: context-aware Select/Home/Up/play navigation without in-list alphabet labels. */
.fs-context-nav{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;background:#101827;border-color:#40506a;scroll-margin-top:8px}
.fs-context-nav-info{min-width:0}
.fs-context-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(92px,max-content);gap:8px;align-items:stretch;justify-content:end}
.fs-context-actions button{min-width:0;min-height:40px;white-space:normal;line-height:1.15;font-weight:700}
.select-btn{border-color:#4b72a5;background:#172c49;color:#dbeafe}
.select-btn:hover{background:#203d63}
.quick-nav{max-width:calc(100vw - 24px);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(68px,max-content);gap:8px;align-items:stretch}
.quick-nav button{min-height:42px;white-space:normal;line-height:1.15}
.quick-nav .play-all-btn{border-color:#2f7a4f;background:rgba(31,59,46,.96);color:#dcfce7}
.quick-nav .back-artists-btn{border-color:#4b617f;background:rgba(38,50,71,.96)}
.quick-nav .select-btn{border-color:#4b72a5;background:rgba(23,44,73,.96)}
.quick-nav[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;width:min(620px,calc(100vw - 24px))}
.quick-nav[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;width:min(360px,calc(100vw - 24px))}
.quick-nav[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;width:min(230px,calc(100vw - 24px))}
.letter-select-overlay[hidden]{display:none!important}
.letter-select-overlay{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,8,18,.72);backdrop-filter:blur(6px)}
.letter-select-card{width:min(520px,100%);background:linear-gradient(180deg,#172033,#101827);border:1px solid #40506a;border-radius:18px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 24px rgba(56,189,248,.10)}
.letter-select-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.letter-select-header h3{margin:0}
.letter-select-close{width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1}
.letter-select-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.letter-select-choice{min-width:0;padding:11px 5px;font-size:16px;font-weight:800;border-color:#4b72a5;background:#172c49;color:#e0f2fe}
.letter-select-choice:hover:not(:disabled){background:#24466e;box-shadow:0 0 12px rgba(56,189,248,.16)}
.letter-select-choice:disabled{opacity:.25;cursor:default;background:#111827;border-color:#2f3b52}
.letter-select-loading{grid-column:1 / -1;text-align:center;color:#9ca3af;padding:18px}
body.letter-select-open{overflow:hidden}
.load-more-row #listTopBtn,.load-more-row #libraryHomeBtn{display:none!important}
.bottom-view-actions{display:none!important}
@media(max-width:800px){
  .fs-context-nav{grid-template-columns:1fr;gap:10px}
  .fs-context-actions{width:100%;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}
  .fs-context-actions[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quick-nav{right:max(12px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom))}
}
@media(max-width:560px){
  .fs-context-actions[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fs-context-actions[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fs-context-actions button{font-size:13px;padding:9px 7px}
  .quick-nav[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr));width:min(340px,calc(100vw - 24px))}
  .quick-nav[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr));width:min(300px,calc(100vw - 24px))}
  .quick-nav button{font-size:13px;padding:9px 7px}
  .letter-select-overlay{align-items:flex-end;padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .letter-select-card{border-radius:18px 18px 14px 14px;padding:14px}
  .letter-select-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
  .letter-select-choice{padding:10px 4px;font-size:15px}
}
@media(max-width:380px){
  .fs-context-actions[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-nav[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr));width:min(260px,calc(100vw - 20px))}
  .letter-select-grid{gap:6px}
  .letter-select-choice{font-size:14px;padding:9px 3px}
}

/* RC1.33 / RC3.34: standardized song cards across library, queue, and history. */
.song-card-core{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;width:100%;min-width:0}
.song-card-core .cover{grid-column:1;grid-row:1;width:56px;height:56px;border-radius:10px}
.song-card-text{grid-column:2;min-width:0;display:grid;row-gap:3px;align-content:center}
.song-card-title-row{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:12px;align-items:start;min-width:0}
.song-card-title{min-width:0;line-height:1.25;overflow-wrap:anywhere}
.song-card-duration{align-self:start;color:#dbeafe;font-size:13px;font-weight:700;line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums}
.song-card-artist{margin:0;color:#cbd5e1;font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.song-card-folder{margin:0;width:100%;min-width:0;color:#94a3b8;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:clip}
.track-main,.cue-track,.history-track{min-width:0}
.track-main>.song-card-core,.cue-track>.song-card-core,.history-track>.song-card-core{width:100%}
.history-track.track-main{display:block;min-width:0}
.cue-item{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center}
.cue-item .remove-btn{margin-left:0;white-space:nowrap}
.history-item{grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center}
.history-actions{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:8px;min-width:max-content}
.history-source{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;border:1px solid rgba(125,211,252,.26);border-radius:999px;background:rgba(14,41,61,.55);color:#7dd3fc;font-size:11px;font-weight:700;line-height:1;white-space:nowrap;text-transform:none;letter-spacing:.01em}
.history-actions .request-btn{margin:0;white-space:nowrap}
@media(max-width:800px){
  .song-card-core{align-items:start}
}
@media(max-width:560px){
  .song-card-core{grid-template-columns:52px minmax(0,1fr);gap:10px}
  .song-card-core .cover{width:52px;height:52px;border-radius:9px}
  .song-card-text{row-gap:2px}
  .song-card-title-row{gap:8px}
  .song-card-title{font-size:14px;line-height:1.24}
  .song-card-duration{font-size:12px;line-height:1.24}
  .song-card-artist,.song-card-folder{font-size:12px;line-height:1.22}
  #library .track .request-btn{margin-left:62px}
  .cue-item{grid-template-columns:32px minmax(0,1fr);gap:9px;align-items:start}
  .cue-item .cue-number{width:26px;height:26px;font-size:12px}
  .cue-item .remove-btn{grid-column:2;justify-self:start;margin:5px 0 0;padding:7px 10px;font-size:12px}
  .history-list .history-item{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:11px 12px;align-items:start}
  .history-list .history-item .cue-number{display:none}
  .history-list .history-track.track-main{display:block;width:100%;min-width:0}
  .history-actions{margin-left:62px;min-width:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap}
  .history-actions .request-btn{margin:0;padding:6px 9px;font-size:12px;border-radius:8px;width:auto;max-width:max-content}
}
@media(max-width:380px){
  .song-card-core{grid-template-columns:48px minmax(0,1fr);gap:9px}
  .song-card-core .cover{width:48px;height:48px}
  #library .track .request-btn{margin-left:57px}
  .history-actions{margin-left:57px}
}

@media(max-width:560px){
  .history-list .history-item .history-actions .request-btn{grid-column:auto;justify-self:auto;margin:0;padding:6px 9px;font-size:12px;border-radius:8px;width:auto;max-width:max-content}
}

/* RC1.34 / RC3.35: closed Folder View landing state and bidirectional paged navigation. */
.folder-landing-nav{min-height:58px}
.folder-landing-nav .fs-context-actions{grid-template-columns:minmax(120px,max-content)}
.close-folder-btn{border-color:#4b617f;background:#263247;color:#e5e7eb}
.close-folder-btn:hover{background:#33445e}
@media(max-width:560px){
  .folder-landing-nav .fs-context-actions{grid-template-columns:1fr;width:100%}
}

/* RC1.36 / RC3.37: unified initial view headers, subtle alphabet sections, clearer Parent/Previous navigation, and desktop duration spacing. */
.fs-primary-view-nav{min-height:64px;box-sizing:border-box}
.fs-primary-view-nav .fs-context-nav-info{min-height:38px;display:flex;flex-direction:column;justify-content:center}
.fs-primary-view-nav .fs-context-actions{grid-template-columns:minmax(120px,max-content)}
.fs-alpha-section-letter{font-size:16px;font-weight:700;line-height:1.2;color:#cbd5e1;padding:3px 2px 0;margin:4px 0 -2px;letter-spacing:.01em}
.parent-btn,.previous-btn{border-color:#4b617f;background:#263247;color:#e5e7eb}
.parent-btn:hover,.previous-btn:hover{background:#33445e}
@media(min-width:801px){
  .song-card-title-row{width:min(100%,560px)}
}
@media(max-width:800px){
  .fs-primary-view-nav .fs-context-actions{width:100%;grid-template-columns:1fr}
}
@media(max-width:560px){
  .fs-alpha-section-letter{font-size:15px;padding-top:2px;margin-top:3px}
}

/* RC1.37 / RC3.38: long-folder/artist sections, Previous navigation, Random Track, desktop inline duration, and frequency scale. */
.fs-context-actions[data-count="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.quick-nav[data-count="5"]{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:row;width:min(680px,calc(100vw - 24px))}
#shuffleBtn{font-size:14px}
.spectrum-frequency-scale{display:none}
@media(min-width:801px){
  .song-card-title-row{display:flex;align-items:baseline;justify-content:flex-start;gap:12px;width:max-content;max-width:100%}
  .song-card-title{flex:0 1 auto;min-width:0}
  .song-card-duration{flex:0 0 auto;align-self:baseline}
  .now-spectrum-desktop{align-items:flex-start;padding:4px 4px 0 18px}
  .spectrum-desktop{display:flex;flex-direction:column;width:360px;height:150px;flex:0 0 360px}
  .spectrum-desktop .spectrum-desktop-canvas{display:block;width:100%;height:120px;flex:0 0 120px}
  .spectrum-frequency-scale{display:flex;flex:1 0 30px;min-height:30px;width:100%;box-sizing:border-box;flex-direction:column;justify-content:flex-start;padding:1px 8px 2px;position:relative;z-index:2;color:#93a9c2;font-variant-numeric:tabular-nums;pointer-events:none}
  .spectrum-frequency-labels{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));align-items:center;width:100%;font-size:7.5px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
  .spectrum-frequency-labels span{text-align:center;white-space:nowrap;min-width:0}
  .spectrum-frequency-caption{text-align:center;margin-top:2px;font-size:8px;font-weight:600;line-height:1;color:#7f95ad;letter-spacing:.02em;white-space:nowrap}
}
@media(min-width:801px) and (max-width:1040px){
  .now-spectrum-desktop{padding:4px 4px 0 18px}
  .spectrum-desktop{width:320px;height:142px;flex-basis:320px}
  .spectrum-desktop .spectrum-desktop-canvas{height:112px;flex-basis:112px}
  .spectrum-frequency-labels{font-size:7px}
  .spectrum-frequency-caption{font-size:7.5px}
}
@media(max-width:800px){
  .fs-context-actions[data-count="5"]{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .quick-nav[data-count="5"]{grid-template-columns:repeat(3,minmax(0,1fr));width:min(390px,calc(100vw - 24px))}
}
@media(max-width:560px){
  #shuffleBtn{font-size:12.5px;letter-spacing:-.01em}
}
@media(max-width:380px){
  #shuffleBtn{font-size:11px;letter-spacing:-.02em}
}

/* RC1.38 / RC3.39: taller desktop analyzer, balanced top/right inset, and endpoint frequency units. */
@media(min-width:801px){
  .player-panel{position:relative}
  .now-wrap{box-sizing:border-box;width:100%;padding-right:378px}
  .now-spectrum-desktop{position:absolute;top:18px;right:18px;display:block;width:360px;min-width:0;height:auto;padding:0;margin:0;align-self:auto;flex:none}
  .spectrum-desktop{display:flex;flex-direction:column;width:360px;height:166px;flex:0 0 360px}
  .spectrum-desktop .spectrum-desktop-canvas{display:block;width:100%;height:142px;flex:0 0 142px}
  .spectrum-frequency-scale{display:flex;flex:0 0 24px;min-height:24px;width:100%;box-sizing:border-box;flex-direction:column;justify-content:center;padding:3px 7px 2px;position:relative;z-index:2;color:#93a9c2;font-variant-numeric:tabular-nums;pointer-events:none}
  .spectrum-frequency-labels{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));align-items:center;width:100%;font-size:7.5px;font-weight:700;line-height:1;letter-spacing:-.035em}
  .spectrum-frequency-labels span{text-align:center;white-space:nowrap;min-width:0}
  .spectrum-frequency-labels span:first-child{text-align:left}
  .spectrum-frequency-labels span:last-child{text-align:right}
  .spectrum-frequency-caption{display:none!important}
}
@media(min-width:801px) and (max-width:1040px){
  .now-wrap{padding-right:338px}
  .now-spectrum-desktop{width:320px}
  .spectrum-desktop{width:320px;height:158px;flex-basis:320px}
  .spectrum-desktop .spectrum-desktop-canvas{height:136px;flex-basis:136px}
  .spectrum-frequency-scale{flex-basis:22px;min-height:22px;padding:3px 5px 2px}
  .spectrum-frequency-labels{font-size:7px;letter-spacing:-.05em}
}

/* RC1.39 / RC3.40: deterministic alphabet landing room. */
.fs-alpha-landing-space{grid-column:1 / -1;width:100%;min-height:0;visibility:hidden;pointer-events:none;user-select:none}

/* Remote password-protected library rescan footer. */
.site-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#9ca3af;text-align:center;padding:14px 18px 20px}
.site-footer .footer-version{font-size:13px;letter-spacing:.02em}
.site-footer #scanBtn{position:static!important;display:inline-flex!important;align-items:center;justify-content:center;grid-column:auto!important;grid-row:auto!important;justify-self:auto!important;align-self:auto!important;margin:0!important;max-width:none!important;min-width:190px;padding:10px 16px;font-size:14px;line-height:1.2;white-space:nowrap}
.site-footer #scanBtn:disabled{cursor:wait;opacity:.72}
.scan-password-overlay{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,7,18,.76);backdrop-filter:blur(4px)}
.scan-password-overlay[hidden]{display:none!important}
.scan-password-card{width:min(420px,100%);background:linear-gradient(180deg,#1d2940,#111827);border:1px solid #4b617f;border-radius:16px;padding:18px;box-shadow:0 22px 70px rgba(0,0,0,.58)}
.scan-password-card h3{margin:0 0 14px;font-size:20px}
.scan-password-label{display:grid;gap:7px;color:#d1d5db;font-weight:700}
.scan-password-label input{width:100%;box-sizing:border-box;background:#0f172a;border-color:#4b617f}
.scan-password-message{min-height:20px;margin:10px 0 0;color:#fca5a5;font-size:13px;line-height:1.35}
.scan-password-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
.scan-password-actions button{min-width:110px}
body.scan-dialog-open{overflow:hidden}
@media(max-width:800px){
  header{grid-template-rows:auto auto!important}
  #stats{grid-row:2!important}
  #stats .stats-mobile-line2{padding-right:0!important}
}
@media(max-width:480px){
  .site-footer #scanBtn{width:min(100%,260px);min-width:0}
  .scan-password-actions{display:grid;grid-template-columns:1fr 1fr}
  .scan-password-actions button{min-width:0}
}

/* RC1.42 / RC3.43: communication state, analyzer themes, favicon logo interaction, Easter egg, and compact mobile rescan. */
.stream-status.tuned-out{border-color:#7f1d1d!important;color:#fecaca!important;background:#2b1f1f!important}
.fs-logo-badge{appearance:none!important;-webkit-appearance:none!important;border:0!important;background:transparent!important;padding:0!important;margin:0;min-width:0!important;cursor:pointer;box-shadow:none!important;line-height:0;pointer-events:auto!important}
.fs-logo-badge:hover{background:transparent!important;filter:brightness(1.08)}
.fs-logo-badge:focus-visible{outline:2px solid rgba(125,211,252,.75);outline-offset:3px;border-radius:999px}
.fs-logo-static,.fs-logo-spin{transition:opacity .35s ease,filter .35s ease}
.server-communication-lost .fs-logo-static{animation-play-state:paused!important;filter:grayscale(1) brightness(.22)!important;opacity:.16}
.server-communication-lost .fs-logo-spin{animation-play-state:paused!important;filter:grayscale(.85) brightness(.58)!important;opacity:.68}
.server-communication-lost .on-air-time{opacity:.72}
.spectrum-settings-card{max-height:calc(100vh - 40px);overflow:auto}
.spectrum-color-section{margin-top:16px;padding-top:14px;border-top:1px solid rgba(75,97,127,.65)}
.spectrum-color-section h4{margin:0 0 10px;font-size:15px;color:#e5e7eb}
.spectrum-theme-label{display:grid;grid-template-columns:1fr minmax(155px,auto);align-items:center;gap:12px;color:#d1d5db;font-weight:700;font-size:13px}
.spectrum-theme-label select{width:100%;box-sizing:border-box;background:#0f172a;border:1px solid #4b617f;border-radius:10px;padding:9px 10px;color:#f9fafb;font:inherit}
.spectrum-custom-colors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.spectrum-custom-colors[hidden]{display:none!important}
.spectrum-custom-colors label{display:grid;gap:5px;text-align:center;color:#cbd5e1;font-size:11px;font-weight:700}
.spectrum-custom-colors input[type="color"]{width:100%;height:36px;padding:2px;border-radius:9px;background:#0f172a;border:1px solid #4b617f;cursor:pointer}
.spectrum-theme-note{margin:9px 0 0;color:#94a3b8;font-size:12px;line-height:1.35}
.easter-egg-toast[hidden]{display:none!important}
.easter-egg-toast{position:fixed;inset:0;z-index:1700;display:flex;align-items:center;justify-content:center;padding:20px;pointer-events:none;background:rgba(2,6,23,.12)}
.easter-egg-card{position:relative;width:min(520px,calc(100vw - 36px));padding:22px 48px 22px 22px;border:1px solid rgba(125,211,252,.48);border-radius:18px;background:linear-gradient(180deg,rgba(23,32,51,.98),rgba(10,18,32,.98));box-shadow:0 18px 60px rgba(0,0,0,.58),0 0 24px rgba(56,189,248,.15),inset 0 1px 0 rgba(255,255,255,.08);pointer-events:auto}
.easter-egg-text{color:#eefaff;font-size:18px;line-height:1.5;font-weight:600;text-align:center;text-shadow:0 0 12px rgba(56,189,248,.22)}
.easter-egg-close{position:absolute;top:8px;right:8px;width:32px;height:32px;min-width:32px;padding:0;border-radius:999px;font-size:21px;line-height:28px;background:rgba(15,23,42,.82)}
@media(max-width:560px){
  .spectrum-settings-card{max-height:calc(100vh - 18px)}
  .spectrum-theme-label{grid-template-columns:1fr;gap:6px}
  .spectrum-custom-colors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer #scanBtn{width:auto!important;min-width:0!important;max-width:190px!important;padding:8px 12px!important;font-size:13px!important;min-height:38px;line-height:1.1}
  .easter-egg-text{font-size:16px}
  .easter-egg-card{padding:20px 44px 20px 18px}
}

/* RC1.43 / RC3.44: glass On Air panel and smoother holdable Lyrics scrolling. */
.on-air-time{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg,rgba(20,34,54,.94),rgba(8,16,30,.88) 58%,rgba(8,13,25,.96))!important;
  border-color:rgba(125,211,252,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 16px rgba(56,189,248,.10),0 0 12px rgba(56,189,248,.09)!important;
  color:#e6f6ff!important;
  text-shadow:0 0 10px rgba(125,211,252,.28);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.on-air-time::before{
  content:'';
  position:absolute;
  inset:1px 1px auto 1px;
  height:44%;
  border-radius:8px 8px 50% 50%;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 58%,transparent);
  pointer-events:none;
  z-index:0;
}
.server-communication-lost .on-air-time{
  opacity:.72;
  border-color:rgba(100,116,139,.45)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 0 12px rgba(71,85,105,.08)!important;
  text-shadow:none;
  filter:saturate(.45) brightness(.72);
}
.lyrics-box{scroll-behavior:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-gutter:stable}
@media(hover:hover) and (pointer:fine){.lyrics-box{cursor:grab}}
.lyrics-box.lyrics-manual-hold{cursor:grabbing;user-select:none;-webkit-user-select:none}

/* RC1.44 / RC3.45: landscape analyzer expansion, punchier bass visuals, folder shortcuts, and Clear Queue confirmation. */
.spectrum-mobile-frequency-scale{display:none}
.folder-shortcut,.song-card-folder-link,.now-folder-link,.station-folder-link{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;padding:0;margin:0;min-width:0;
  color:inherit;font:inherit;line-height:inherit;text-align:left;cursor:pointer;border-radius:4px;box-shadow:none;
}
.song-card-folder-link{display:block;width:100%}
.folder-shortcut:hover,.song-card-folder-link:hover,.now-folder-link:hover,.station-folder-link:hover{color:#cceeff;text-decoration:underline;text-underline-offset:2px;background:transparent}
.folder-shortcut:focus-visible,.song-card-folder-link:focus-visible,.now-folder-link:focus-visible,.station-folder-link:focus-visible{outline:1px solid rgba(125,211,252,.75);outline-offset:2px;background:transparent}
.station-folder-link{display:inline;white-space:nowrap;color:#a9bfd4}
.station-summary{white-space:nowrap}
.now-folder-link{width:100%;color:#9ca3af}

.clear-queue-overlay[hidden]{display:none!important}
.clear-queue-overlay{position:fixed;inset:0;z-index:1650;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,7,18,.76);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.clear-queue-card{width:min(430px,100%);box-sizing:border-box;background:linear-gradient(180deg,#1d2940,#111827);border:1px solid #6b4a57;border-radius:16px;padding:19px;box-shadow:0 22px 70px rgba(0,0,0,.60),0 0 22px rgba(239,68,68,.08)}
.clear-queue-card h3{margin:0 0 10px;font-size:20px;color:#f8fafc}
.clear-queue-card p{margin:7px 0;color:#d1d5db;line-height:1.4}
.clear-queue-note{font-size:13px;color:#9ca3af!important}
.clear-queue-message{min-height:18px;font-size:13px;color:#fca5a5!important}
.clear-queue-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:15px}
.clear-queue-actions button{min-width:118px}
.clear-queue-confirm{background:#4b1f1f!important;border-color:#b43b3b!important;color:#fee2e2!important;font-weight:700}
.clear-queue-confirm:hover{background:#672727!important}
.clear-queue-confirm:disabled{opacity:.68;cursor:wait}
body.clear-queue-dialog-open{overflow:hidden}

@media(max-width:560px){
  .clear-queue-overlay{align-items:flex-end;padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .clear-queue-card{border-radius:18px;padding:17px}
  .clear-queue-actions{display:grid;grid-template-columns:1fr 1fr}
  .clear-queue-actions button{min-width:0}
}

/* A landscape phone uses the larger 10-band mobile analyzer, not the 15-band desktop analyzer. */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  .player-panel{position:relative}
  .now-spectrum-desktop{display:none!important}
  .now-main-column{position:static!important}
  .now-wrap{box-sizing:border-box;width:100%;min-height:178px;padding-right:clamp(318px,49vw,438px)!important;align-items:flex-start}
  .now-mobile-spectrum{display:block!important;position:absolute;top:18px;right:18px;width:clamp(300px,47vw,420px);height:auto;min-height:0;margin:0;z-index:5;pointer-events:none}
  .spectrum-mobile{display:flex!important;flex-direction:column;width:100%!important;height:166px!important;max-width:none;flex:0 0 auto;margin:0!important;border-radius:14px;overflow:hidden;box-sizing:border-box}
  .spectrum-mobile-canvas{position:static!important;display:block;width:100%!important;height:140px!important;min-height:0;flex:0 0 140px}
  .spectrum-mobile-frequency-scale{display:flex;flex:0 0 26px;min-height:26px;box-sizing:border-box;width:100%;align-items:center;padding:3px 8px 4px;color:#93a9c2;font-variant-numeric:tabular-nums;pointer-events:none;z-index:2}
  .spectrum-mobile-frequency-labels{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));align-items:center;width:100%;font-size:8px;font-weight:700;line-height:1;letter-spacing:-.035em}
  .spectrum-mobile-frequency-labels span{text-align:center;white-space:nowrap;min-width:0}
  .spectrum-mobile-frequency-labels span:first-child{text-align:left}
  .spectrum-mobile-frequency-labels span:last-child{text-align:right}
  .spectrum-mobile .spectrum-settings-btn{top:6px;right:6px}
}
@media (orientation:landscape) and (max-height:430px) and (pointer:coarse){
  .now-wrap{min-height:162px;padding-right:clamp(292px,47vw,390px)!important}
  .now-mobile-spectrum{top:16px;right:16px;width:clamp(280px,45vw,374px)}
  .spectrum-mobile{height:150px!important}
  .spectrum-mobile-canvas{height:126px!important;flex-basis:126px}
  .spectrum-mobile-frequency-scale{flex-basis:24px;min-height:24px;padding:3px 7px}
  .spectrum-mobile-frequency-labels{font-size:7.5px}
}

/* RC1.45 / RC3.46: quieter Queue folder text and tighter landscape Now Playing layout. */
.now-layout{display:contents}
.cue-item .song-card-folder,
.cue-item .song-card-folder-link{
  font-size:11px;
  line-height:1.16;
  color:#8290a3;
}
@media(max-width:560px){
  .cue-item .song-card-folder,
  .cue-item .song-card-folder-link{
    font-size:10.5px;
    line-height:1.14;
  }
}

/* On a landscape phone, use the empty space beneath the cover/title before the analyzer ends. */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  .now-layout{
    display:grid;
    grid-template-columns:120px minmax(0,1fr) clamp(300px,47vw,420px);
    grid-template-areas:
      "title title analyzer"
      "art details analyzer"
      "folder folder analyzer"
      "station station analyzer";
    column-gap:16px;
    row-gap:0;
    width:100%;
    min-width:0;
    align-items:start;
  }
  .now-layout>.player-title-row{
    grid-area:title;
    margin:0 0 10px;
    min-width:0;
  }
  .now-layout>.now-wrap{
    display:contents!important;
    width:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }
  .now-layout .now-art{
    grid-area:art;
    margin:0;
    align-self:start;
  }
  .now-layout .now-main-column{
    display:contents!important;
    position:static!important;
  }
  .now-layout .now-details{
    grid-area:details;
    min-width:0;
    align-self:center;
    padding-right:4px;
  }
  .now-layout .now-mobile-spectrum{
    grid-area:analyzer;
    display:block!important;
    position:static!important;
    top:auto!important;
    right:auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    z-index:5;
    pointer-events:none;
    align-self:start;
  }
  .now-layout .spectrum-mobile{box-sizing:border-box}
  .now-layout .now-spectrum-desktop{display:none!important}
  .now-layout>.now-folder:not([hidden]){
    grid-area:folder;
    display:block!important;
    width:100%;
    min-width:0;
    margin:5px 0 0!important;
    padding:0;
    font-size:12px;
    line-height:1.22;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
  }
  .now-layout>.station-info{
    grid-area:station;
    min-width:0;
    margin:3px 0 0!important;
    font-size:12px;
    line-height:1.22;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
  }
  .now-layout .station-desktop-summary,
  .now-layout .station-desktop-request{display:none!important}
  .now-layout .station-mobile-meta{
    display:block!important;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
    font-size:12px;
    line-height:1.22;
  }
  .progress-spectrum-row{margin-top:8px!important}
}
@media (orientation:landscape) and (max-height:430px) and (pointer:coarse){
  .now-layout{
    grid-template-columns:120px minmax(0,1fr) clamp(280px,45vw,374px);
    column-gap:12px;
  }
  .now-layout>.player-title-row{margin-bottom:8px}
  .now-layout>.now-folder:not([hidden]),
  .now-layout>.station-info,
  .now-layout .station-mobile-meta{font-size:11px;line-height:1.18}
  .now-layout>.now-folder:not([hidden]){margin-top:4px!important}
  .now-layout>.station-info{margin-top:2px!important}
  .progress-spectrum-row{margin-top:6px!important}
}
@media (orientation:landscape) and (max-height:430px) and (max-width:650px) and (pointer:coarse){
  .now-layout{
    grid-template-columns:92px minmax(0,1fr) clamp(220px,44vw,280px);
    column-gap:10px;
  }
  .now-layout .now-art{width:92px;height:92px;flex-basis:92px}
}

/* RC1.46 / RC3.47: Play Again, Spectrum/Stereo VU display modes, and playback-driven Next feedback. */
.station-info.has-play-again{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  flex-wrap:nowrap;
}
.station-info.has-play-again .station-summary,
.station-info.has-play-again .station-mobile-meta{min-width:0;overflow:hidden;text-overflow:clip}
.play-again-btn{
  flex:0 0 auto;
  min-width:0;
  width:auto;
  height:25px;
  padding:3px 8px;
  margin:0 0 0 1px;
  border-radius:8px;
  border-color:rgba(96,165,250,.48);
  background:rgba(24,38,61,.88);
  color:#dbeafe;
  font-size:11px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  vertical-align:middle;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 10px rgba(56,189,248,.06);
}
.play-again-btn:hover{background:rgba(36,56,87,.96);border-color:rgba(125,211,252,.68)}
.play-again-btn.queued-next{background:#14532d;border-color:#22c55e;color:#dcfce7}
.play-again-btn:disabled{cursor:wait;opacity:.78}
@media(max-width:800px){
  .station-info.has-play-again .station-mobile-meta{display:block;flex:1 1 auto}
  .play-again-btn{height:23px;padding:3px 7px;font-size:10.5px}
}
@media(max-width:380px){.play-again-btn{padding:3px 6px;font-size:10px}}

/* The green fill is driven by actual local playback progress instead of a fixed six-second CSS clock. */
#nextBtn.next-drain::before{
  transition:transform var(--next-fill-transition,0ms) linear!important;
}

.spectrum-display-section{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid rgba(75,97,127,.65)}
.spectrum-display-section h4{margin:0 0 10px;font-size:15px;color:#e5e7eb}
.spectrum-display-mode-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.spectrum-display-mode-row button{min-width:0;font-weight:700}
.spectrum-display-mode-row button.active,
.spectrum-display-mode-row button[aria-pressed="true"]{
  background:#164e63;
  border-color:#38bdf8;
  color:#e0f2fe;
  box-shadow:0 0 0 1px rgba(56,189,248,.22) inset,0 0 12px rgba(56,189,248,.08);
}
.spectrum-display-note{margin:8px 0 0;color:#94a3b8;font-size:11.5px;line-height:1.35}

.spectrum-shell.visualizer-mode-vu .spectrum-frequency-scale,
.spectrum-shell.visualizer-mode-vu .spectrum-mobile-frequency-scale{display:none!important}
@media(min-width:801px){
  .spectrum-desktop.visualizer-mode-vu .spectrum-desktop-canvas{height:166px!important;flex-basis:166px!important}
}
@media(min-width:801px) and (max-width:1040px){
  .spectrum-desktop.visualizer-mode-vu .spectrum-desktop-canvas{height:158px!important;flex-basis:158px!important}
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
  .spectrum-mobile.visualizer-mode-vu .spectrum-mobile-canvas{height:166px!important;flex-basis:166px!important}
}
@media (orientation:landscape) and (max-height:430px) and (pointer:coarse){
  .spectrum-mobile.visualizer-mode-vu .spectrum-mobile-canvas{height:150px!important;flex-basis:150px!important}
}

@media(max-width:340px) and (orientation:portrait){
  .spectrum-mobile.visualizer-mode-vu{width:122px!important}
}

/* Portrait-mobile VU: keep the gear in the L/R gutter, not the dB scale.
   Spectrum, landscape phone, and desktop keep their original upper-right gear. */
@media (max-width:800px) and (orientation:portrait){
  .spectrum-mobile.visualizer-mode-vu .spectrum-settings-btn{
    left:0;
    right:auto;
    top:0;
    width:30px;
    height:30px;
    min-width:0;
    padding:0;
    display:grid;
    place-items:center;
    font-size:14px;
    line-height:1;
    border-color:transparent;
    background:transparent;
    box-shadow:none;
    opacity:.58;
    touch-action:manipulation;
  }
  .spectrum-mobile.visualizer-mode-vu .spectrum-settings-btn:hover,
  .spectrum-mobile.visualizer-mode-vu .spectrum-settings-btn:focus-visible,
  .spectrum-mobile.visualizer-mode-vu .spectrum-settings-btn:active{
    opacity:1;
    background:rgba(24,38,61,.22);
    border-color:rgba(125,211,252,.32);
  }
  .spectrum-mobile.visualizer-mode-vu .spectrum-settings-btn:focus-visible{
    outline:1px solid rgba(125,211,252,.8);
    outline-offset:-3px;
  }
}