/* Station brand accents: charcoal surfaces with restrained pink, teal and gold. */
:root{--pink:#c34379;--brand-pink:#ec438d;--brand-teal:#26c9bd;--brand-gold:#f1cc45;--surface-color:#222829}
body,body.home-page,body.history-page,body.request-page,body.register-page,body.profile-page,body.settings-page,body.song-page,body.apps-page{background:radial-gradient(ellipse at 4% 0%,rgba(25,169,161,.12),transparent 46%),radial-gradient(ellipse at 98% 8%,rgba(214,54,127,.10),transparent 45%),#222829}
.site-header,.home-page .site-header{background:linear-gradient(110deg,rgba(38,201,189,.055),transparent 35%,rgba(236,67,141,.045)),var(--surface-color);box-shadow:inset 0 1px rgba(255,255,255,.06)}
.site-header nav a.active::after{background:var(--brand-teal)}
.site-header nav a:hover{color:#8de5df}
.account-toggle{background:#b83e72;border-color:rgba(245,132,177,.24)}
.account-toggle:hover,.account-toggle[aria-expanded=true]{background:#ca4980}
.support-link{background:#28746b;border-color:rgba(100,228,207,.2)}
.support-link:hover{background:#30887d;border-color:rgba(100,228,207,.35)}
.compact-now-panel{border-top-color:rgba(236,67,141,.6)}
.playlist-panel{border-top-color:rgba(38,201,189,.5)}
.queue-panel{border-top-color:rgba(241,204,69,.5)}
.chat-panel{border-top-color:rgba(190,133,234,.5)}
.now-status strong{color:#f28db7}
.playlist-panel .panel-heading h2{color:#83ddd5}
.queue-panel .panel-heading h2{color:#e4cd83}
.chat-panel .panel-heading h2{color:#cbb0e4}
.panel-heading a{color:#83ddd5}.panel-heading a:hover{color:#b8f4ee}
.mini-track .requested-pill{background:rgba(194,62,115,.3);color:#ffc4df;border:1px solid rgba(235,91,154,.26)}
.track-rating.own-rating button,.now-rating-display.own-rating>button,.song-page-heart-button.own-rating{color:#ee629e}
.own-rating svg{fill:#e75695;stroke:#e75695}
.track-rating button:hover,.now-rating-display>button:hover{color:#f28ab8}
.bottom-player{background:linear-gradient(100deg,rgba(38,201,189,.045),transparent 45%,rgba(236,67,141,.045)),var(--surface-color);border-top-color:rgba(87,149,145,.35)}
.bottom-player .dock-play{background:#fff;color:#111718;box-shadow:0 0 0 4px rgba(38,201,189,.09)}
.bottom-player .dock-play:hover{background:#fff;box-shadow:0 0 0 5px rgba(38,201,189,.17)}
.chat-avatar-initials{background:linear-gradient(135deg,#386c70,#665273)}
.chat-access .primary,.auth-submit{background:#b83e72;border-color:#c94c84}
.chat-compose-row:focus-within{border-color:rgba(87,207,194,.65)}
.request-song button:not(:disabled){border-color:rgba(70,197,182,.45);color:#97e7de;background:rgba(31,136,121,.12)}
.song-detail-heading h2,.song-comments-heading h2{color:#d8e5e4}
@media(max-width:920px){.site-header nav a.active{color:#a0e8e0;background:rgba(38,201,189,.10)}}
/* One site-wide frame, navigation, player and surface treatment. */
:root{--frame:min(1460px,calc(100% - 76px))}
.site-header,.home-page .site-header{width:var(--frame);height:74px;margin:0 auto;padding:0 24px;gap:16px;border-radius:9px;border:0;display:flex;align-items:center;flex-shrink:0}
.brand{width:252px;flex:0 0 252px;height:74px;display:flex;align-items:center;overflow:hidden}
.brand img{width:230px;height:80px;max-width:none;object-fit:cover;object-position:center;margin-left:18px}
.site-header nav{margin-left:0;display:flex;align-items:center;justify-content:center;gap:36px;flex:1}
.site-header nav a{font-size:16px;line-height:24px;font-weight:400;padding:20px 0;white-space:nowrap}
.account-control{margin-left:auto}
.account-toggle,.support-link{height:44px;min-width:112px;padding:0 20px;border-radius:8px;font-size:16px;font-weight:400;text-transform:none;letter-spacing:0}
.support-link{min-width:132px;margin:0}.account-toggle.has-avatar{width:44px;min-width:44px;height:44px;padding:0;border-radius:50%}
.history-section,.request-section,.song-page-section,.apps-section,.register-section,.account-page-section{width:var(--frame);margin-inline:auto}
.history-page-main,.request-page-main,.song-page-main,.apps-page-main,.register-page-main,.account-page-main{background:none}
.player-panel,.compact-now-panel,.song-page-hero,.song-rating-panel,.song-detail-panel,.song-comments-panel,.app-showcase,.register-card,.profile-card,.settings-card,.request-auth-gate,.request-browser{background:var(--surface-color);border-radius:9px;border-color:#373d3f;box-shadow:none}
.song-page-hero,.register-card,.profile-card,.settings-card{border-top:1px solid rgba(236,67,141,.6)}
.song-rating-panel,.request-browser,.app-showcase{border-top:1px solid rgba(38,201,189,.5)}
.song-detail-panel{border-top:1px solid rgba(241,204,69,.5)}
.song-comments-panel{border-top:1px solid rgba(190,133,234,.5)}
.history-page-main .section-heading h1,.request-page-main .section-heading h1,.apps-heading h1,.register-heading h1,.account-page-heading h1{font-size:36px;line-height:1.2;font-weight:700;letter-spacing:-.025em;color:#f5f6f6;text-shadow:none}
.history-row,.request-song{border-color:rgba(255,255,255,.07);background:rgba(0,0,0,.10)}
.history-row:nth-child(even),.request-song:nth-child(even){background:rgba(0,0,0,.06)}
.history-row:hover,.request-song:hover{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.12);box-shadow:none}
.bottom-player{height:78px;padding:8px max(42px,calc((100vw - 1452px)/2));grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:28px}
.dock-track{gap:16px}.dock-track>img{width:54px;height:54px;border:0;border-radius:5px}
.dock-meta strong{font-size:15px;font-weight:500}.dock-meta small{font-size:13px;margin-top:4px;color:#e1e4e5}
.bottom-player .dock-play{width:48px;height:48px}
.dock-tools{width:100%;padding-left:40px;justify-content:space-between;gap:20px}.dock-rating{order:-1;width:auto;min-height:0}.dock-rating .track-rating{flex-direction:row;gap:14px}.dock-rating .track-rating button{width:40px;height:40px}.dock-rating .track-rating small{font-size:16px}
.dock-volume{min-width:0;gap:12px}.dock-volume input{width:180px}
@media(max-width:1380px){.brand{flex-basis:215px;width:215px}.site-header nav{gap:24px}.account-toggle{min-width:90px}.support-link{min-width:100px}.dock-tools{padding-left:18px}.dock-volume input{width:140px}}
@media(max-width:1180px){:root{--frame:calc(100% - 40px)}.site-header,.home-page .site-header{padding:0 14px;gap:10px}.brand{flex-basis:185px;width:185px}.brand img{width:185px;height:64px}.site-header nav{gap:18px}.site-header nav a{font-size:14px}.account-toggle,.support-link{min-width:78px;padding:0 12px;font-size:14px}}
@media(max-width:920px){
 :root{--frame:calc(100% - 24px)}
 .site-header,.home-page .site-header{height:72px;padding:0 10px;gap:8px}.brand{flex:1;min-width:0;max-width:230px;height:66px}.brand img{margin-left:0;max-width:100%}
 .menu-button{margin-left:auto;width:38px;flex-basis:38px}
 .account-control{margin-left:0}
 .site-header nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 7px);width:100%;margin:0;padding:10px 14px;background:#202627;border:1px solid #373d3f;border-radius:8px;flex-direction:column;align-items:stretch;gap:0}
 .site-header nav.open{display:flex}.site-header nav a{padding:13px;font-size:16px}.site-header nav a.active::after{display:none}
 .bottom-player{height:66px;padding:7px 16px;grid-template-columns:minmax(0,1fr) 48px 40px;gap:12px}
 .dock-track{gap:10px}.dock-track>img{width:44px;height:44px}.dock-meta strong{font-size:14px}.dock-meta small{font-size:13px}
 .bottom-player .dock-play{width:42px;height:42px}.dock-tools{padding:0;gap:0;justify-content:center}.bottom-player .dock-volume{display:none}
 .dock-rating .track-rating{flex-direction:column;gap:0}.dock-rating .track-rating button{width:32px;height:30px}.dock-rating .track-rating small{font-size:12px}
}
@media(max-width:560px){.site-header,.home-page .site-header{height:68px;padding:0 8px;gap:4px}.brand img{width:150px;height:55px}.account-toggle,.support-link{min-width:56px;height:38px;padding:0 8px;font-size:13px}.menu-button{width:34px;flex-basis:34px}.history-page-main .section-heading h1,.request-page-main .section-heading h1,.apps-heading h1,.register-heading h1,.account-page-heading h1{font-size:30px}}

/* Refined Classic: preserve the complete mark at every header size. */
.brand img{width:205px;height:auto;max-height:none;object-fit:contain;flex-shrink:0;margin-left:18px}
@media(max-width:1380px){.brand img{width:190px;margin-left:8px}}
@media(max-width:1180px){.brand img{width:175px;margin-left:0}}
@media(max-width:920px){.brand img{width:175px;max-width:100%}}
@media(max-width:560px){.brand img{width:150px}}

/* Playlist archive shares the station panel surface, including its list shell. */
.history-page-main .history-section{background:transparent}
.history-page-main .history-columns,.history-page-main .history-list{background:var(--surface-color);border-color:#373d3f;box-shadow:none}
.history-page-main .history-columns{border-top-color:rgba(38,201,189,.5);color:#b8d7d3}
.history-page-main .history-row{background:rgba(0,0,0,.10);border-color:rgba(255,255,255,.07)}
.history-page-main .history-row:nth-child(even){background:rgba(0,0,0,.06)}
.history-page-main .history-row:hover{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.12);box-shadow:none}
.history-page-main .history-tools select,.history-page-main .load-more,.history-page-main .empty-state{background:var(--surface-color);border-color:#465052;box-shadow:none}
.history-page-main .eyebrow{color:#83ddd5}

/* A quiet loading indicator over the existing page background. */
.song-page-loading{background:transparent;border:0;border-radius:0;box-shadow:none;padding:24px;min-height:240px;display:grid;place-items:center}
.song-page-loading[hidden]{display:none}
.song-loading-spinner{display:block;width:36px;height:36px;border:3px solid rgba(255,255,255,.15);border-top-color:#fff;border-radius:50%;animation:song-loading-spin .8s linear infinite}
@keyframes song-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.song-loading-spinner{animation-duration:2.4s}}

/* Compact account dialogs float over the current page. */
#auth-modal{background:transparent;padding:16px;z-index:220;backdrop-filter:none}
#auth-modal[hidden],#auth-modal [hidden]{display:none}
#auth-modal .auth-backdrop{background:rgba(0,0,0,.28);backdrop-filter:none}
#auth-modal .auth-dialog{width:min(390px,100%);padding:24px;max-height:calc(100dvh - 32px);overflow-y:auto;background:#222829;border:1px solid #465052;border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,.3)}
#auth-modal h2{font-size:25px;padding-right:28px;line-height:1.2}
#auth-modal .auth-form{margin-top:16px}
#auth-modal .auth-form label{display:block;margin:10px 0 5px;font-size:12px;font-weight:600}
#auth-modal .auth-form input{width:100%;height:39px;padding:0 10px;border:1px solid #4b5657;border-radius:6px;background:rgba(0,0,0,.12);color:#fff;font-size:16px}
#auth-modal .auth-form small{display:block;margin:4px 0 8px;font-size:11px;line-height:1.4;color:#b9c4c5}
#auth-modal .auth-submit{width:100%;height:40px;min-height:40px;margin-top:14px;border-radius:6px;font-size:14px}
#auth-modal .auth-switch{margin:14px 0 0;font-size:12px}
#auth-modal .turnstile-shell{margin-top:12px;min-width:0}
#auth-modal .auth-close{top:10px;right:10px}

/* Comments use the same quiet charcoal surfaces as the rest of the site. */
.song-comments-panel .song-comment-form textarea{background:#2c3334;border:1px solid #4b5657;min-height:88px;padding:11px 12px;color:#f5f6f6;box-shadow:none;font:inherit;font-size:14px}
.song-comments-panel .song-comment-form textarea::placeholder{color:#b0bdbd}
.song-comments-panel .song-comment-form textarea:focus{border-color:#add5c7;box-shadow:0 0 0 2px rgba(173,213,199,.1)}
.song-comment-access{background:transparent;border-color:#414b4c;box-shadow:none}
.song-comment-access a{background:#2c3334;border-color:#566364}
.song-comment-list{background:transparent;scrollbar-color:#667473 transparent}
.song-comment-form{flex-shrink:0}
.song-comment-form button{min-height:38px;box-shadow:none;font-weight:600}
#song-comment-feedback{color:#d5dedf;line-height:1.45}

/* Homepage panel accents: match the thin colored top edges used on Song Info. */
.home-page .compact-now-panel{border-top:1px solid rgba(236,67,141,.82)}
.home-page .playlist-panel{border-top:1px solid rgba(38,201,189,.76)}
.home-page .queue-panel{border-top:1px solid rgba(241,204,69,.72)}
.home-page .chat-panel{border-top:1px solid rgba(190,133,234,.76)}