html[data-theme=green]{--gold:#00a58a;--theme-bg:#06231d;--theme-panel:#073d35;--theme-raised:#0d5044;--theme-gradient:linear-gradient(135deg,#007d67,#073d35)}
html[data-theme=blue]{--gold:#69dfed;--theme-bg:#081b23;--theme-panel:#12333f;--theme-raised:#174653;--theme-gradient:linear-gradient(135deg,#236f86,#12333f)}
html[data-theme=red]{--gold:#ff6c7c;--theme-bg:#210a12;--theme-panel:#35121e;--theme-raised:#4b1d2c;--theme-gradient:linear-gradient(135deg,#e32c50,#902d60)}
html[data-theme=pure-red]{--gold:#ff0000;--theme-bg:#190000;--theme-panel:#300000;--theme-raised:#470000;--theme-gradient:linear-gradient(135deg,#d90000,#680000)}
html[data-theme=pure-red] body header,html[data-theme=pure-red] #categoryNav{background:var(--theme-bg)}
html[data-theme=pure-red] .hero,html[data-theme=pure-red] #mini{background:var(--theme-gradient)}
#themePalette button[data-theme=pure-red] i,#paletteSwatches button[data-palette=pure-red] i{background:linear-gradient(135deg,#ff0000,#850000)}
html[data-theme=green] body header,html[data-theme=blue] body header,html[data-theme=red] body header,html[data-theme=green] #categoryNav,html[data-theme=blue] #categoryNav,html[data-theme=red] #categoryNav{background:var(--theme-bg)}
html[data-theme=green] .hero,html[data-theme=blue] .hero,html[data-theme=red] .hero,html[data-theme=green] #mini,html[data-theme=blue] #mini,html[data-theme=red] #mini{background:var(--theme-gradient)}
#themePalette .appearance-options{display:flex;gap:6px;margin:12px 0;border-bottom:1px solid #8884;padding-bottom:12px}
#themePalette .appearance-options button{justify-content:center;text-align:center;border:1px solid #8885}
#themePalette .appearance-options button[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
html[data-mode=light]{--gold:hsl(var(--accent-h) 80% 30%);--theme-bg:#f5f4ed;--theme-panel:#fff;--theme-raised:#e9ede8;--theme-gradient:linear-gradient(135deg,hsl(var(--accent-h) 65% 91%),hsl(calc(var(--accent-h) + 25) 45% 96%))}
html[data-mode=light][data-theme=green]{--gold:#007d67}
html[data-mode=light][data-theme=blue]{--gold:#166680}
html[data-mode=light][data-theme=red]{--gold:#ae2046;--theme-gradient:linear-gradient(135deg,#ffe0e6,#f3deed)}
html[data-mode=light][data-theme=pure-red]{--gold:#d00000;--theme-gradient:linear-gradient(135deg,#fff,#fff4f0)}
html[data-mode=light] body{background:var(--theme-bg);color:#132c28}
html[data-mode=light] body header,html[data-mode=light] body #categoryNav{background:var(--theme-bg);border-color:#132c2826;box-shadow:0 4px 16px #132c2814}
html[data-mode=light] body .hero,html[data-mode=light] body #mini{background:var(--theme-gradient);color:#132c28}
html[data-mode=light] body #player{background:var(--theme-bg);color:#132c28}
html[data-mode=light] body :is(h1,h2,h3,strong,label,.brand,.card-title,.queue-title){color:inherit}
html[data-mode=light] body :is(input,select,.queue,.music-tile,.search-suggestions,#themePalette,#profilePopup,.notification-panel,.inbox-panel){background:var(--theme-panel);color:#132c28;border-color:#132c2833}
html[data-mode=light] body :is(button,.actions button,.profile-close){color:var(--gold)}
html[data-mode=light] body :is(p,small,.hint,#count,.times,.profile-subtitle,.profile-setup,.profile-account-help,.profile-scan-help){color:#52665f}
html[data-mode=light] body :is(.card p,.queue-item p,#miniArtist,#artist){color:#52665f}
html[data-mode=light] body :is(.pill,.moods button,.mix-genre,.profile-tabs button[aria-pressed=true],#themeToggle){background:var(--theme-gradient);color:var(--gold)}
html[data-mode=light] body :is(.profile-tabs,.profile-setup,.profile-scan-card){background:var(--theme-raised);border-color:#132c2826}
html[data-mode=light] body #themePalette button{color:#132c28}
html[data-mode=light] body :is(#miniPlay,#playPause,#toast){background:var(--gold);color:#fff}
html[data-mode=light] body input::placeholder{color:#65736f}
html[data-mode=light] body :is(#searchForm,#playerSearchForm){background:var(--theme-panel);border-color:#132c2833;box-shadow:0 4px 16px #132c2814}
html[data-mode=light] body #searchForm #search,html[data-mode=light] body #player #playerSearchForm #playerSongQuery{color:#132c28}
html[data-mode=light] body :is(#searchForm,#playerSearchForm)>button:not(.header-donate){background:var(--gold);color:#fff}
html[data-mode=light] body #launchSplash{background:var(--theme-bg);color:#132c28}
html[data-mode=light] body .card img{background:var(--theme-raised)}
html[data-mode=light] body #categoryNav button.active{color:var(--gold)}
html[data-mode=light] body #player .waveform.spectrum-panel{background:var(--cover-light,var(--theme-panel));border-color:#a5b3ab;box-shadow:none}
html[data-mode=light] body #player .spectrum-canvas{opacity:1}
html[data-mode=light] body #player .spectrum-panel #seek::-webkit-slider-thumb{background:#17211f;box-shadow:none}
html[data-mode=light] body #player .spectrum-panel #seek::-moz-range-thumb{background:#17211f;box-shadow:none}
body #player #playPause,body #player #playerSearchForm>button{background:var(--cover-control,var(--gold));color:var(--cover-control-text,#111)}
body #player .player-main .actions button,body #player .player-artist-button{border-color:var(--cover-scrollbar,#ffffff24)}
html[data-mode=light] body #player{background:radial-gradient(ellipse at top,var(--cover-tint,transparent),transparent 70%),var(--cover-light,var(--theme-bg))}
html[data-mode=light] body #player .player-collapse-bar,html[data-mode=light] body #player .player-artist-button{background:var(--theme-panel);color:#132c28;border-color:#132c2833}
html[data-mode=light] body #player .player-collapse-bar>span,html[data-mode=light] body #player #closePlayer{color:#132c28}
html[data-theme=pure-red] body #searchForm>button:not(.header-donate){background:linear-gradient(135deg,#ff0000,#a00000);color:#fff}
html[data-theme=pure-red] body .saved-links button,html[data-theme=pure-red] body .card .meta{color:#ff0000}
/* Keep light appearance readable throughout the catalogue and overlays. */
html[data-mode=light]{--text:#17211f;--muted:#33443e;--line:#b9c4bf}
html[data-mode=light] body{color:var(--text)}
html[data-mode=light] body :is(p,small,label,legend,output,.hint,.times,.meta,.mix-note,.mix-intro p,.heading span,.heading small,.page-loading){color:#33443e}
html[data-mode=light] body :is(.card strong,.artists span,.mix-dj span,.mix-genre strong,.search-artist-buttons strong){color:#17211f}
html[data-mode=light] body :is(.campaign-dialog,.download-widget,.equalizer-dialog,.device-scanner-dialog,#profilePopup,#themePalette){background:var(--theme-panel);color:#17211f;border-color:#b9c4bf}
html[data-mode=light] body :is(.campaign-dialog,.download-widget,.equalizer-dialog,.device-scanner-dialog,#profilePopup) :is(h1,h2,h3,strong,span,label,legend,output,p,small,summary){color:#17211f}
html[data-mode=light] body :is(.profile-social-link,.profile-tabs button,.profile-native-google,.profile-link-device button,.profile-close,.download-widget-close,.equalizer-close,.equalizer-presets button,.equalizer-footer button,.campaign-close){color:#17211f}
html[data-mode=light] body :is(.profile-scan-help,.profile-account-help,.profile-setup,.profile-user-email,.profile-subtitle,#count,#status,#playerStatus,#miniArtist,#artist,.spectrum-note){color:#33443e}
html[data-mode=light] body #player .player-main .actions button,html[data-mode=light] body #player .player-main .actions select{color:#17211f;background:var(--theme-panel);border-color:#b9c4bf}
html[data-mode=light] body :is(#queueSearch,#mixGenreFilter){color:#17211f;background-color:var(--theme-panel)}
html[data-mode=light] body input::placeholder{color:#44564e;opacity:1}
html[data-mode=light] body :is(.saved-links button,.african-country-buttons button){color:#17211f}
html[data-mode=light] body :is(.campaign-dialog a,.campaign-dialog article button,.campaign-banner a){background:var(--gold);color:#fff}
html[data-mode=light] body :is(#toast,.download-app){background:var(--gold);color:#fff}
html[data-mode=light] body #player #playPause{background:var(--cover-control,var(--gold));color:var(--cover-control-text,#fff)}
html[data-mode=light][data-theme=pure-red] body #searchForm>button:not(.header-donate){background:#c40000;color:#fff}
html[data-mode=light] body #searchForm #search::placeholder,html[data-mode=light] body #player #playerSearchForm #playerSongQuery::placeholder,html[data-mode=light] body #queueSearch::placeholder,html[data-mode=light] body #mixGenreFilter::placeholder{color:#44564e;opacity:1}
html[data-mode=light] body #categoryNav button{color:#33443e}
html[data-mode=light] body #categoryNav button.active{color:var(--gold)}

html[data-mode=light] body #player #playerSearchForm>button{background:var(--cover-control,var(--gold));color:var(--cover-control-text,#fff)}

/* Soft, continuous palette blends in light appearance. */
html[data-mode=light]{--theme-bg:hsl(var(--accent-h) 28% 97%);--theme-panel:hsl(var(--accent-h) 35% 99%);--theme-raised:hsl(var(--accent-h) 35% 94%);--theme-gradient:linear-gradient(135deg,hsl(var(--accent-h) 62% 88%) 0%,hsl(var(--accent-h) 48% 94%) 48%,hsl(calc(var(--accent-h) + 12) 42% 97%) 100%)}
html[data-mode=light][data-theme=red]{--theme-gradient:linear-gradient(135deg,#ffdce5 0%,#f9e5ed 48%,#f7edf2 100%)}
html[data-mode=light][data-theme=pure-red]{--theme-gradient:linear-gradient(135deg,#ffdada 0%,#ffeaea 48%,#fff6f3 100%)}
html[data-mode=light] body{background:radial-gradient(ellipse at 15% 0%,hsl(var(--accent-h) 48% 94% / .65),transparent 55%),var(--theme-bg)}
html[data-mode=light] body .music-tile{background:linear-gradient(145deg,var(--theme-panel),var(--theme-raised));border-color:hsl(var(--accent-h) 24% 82%)}
html[data-mode=light] body #player{background:var(--cover-light-gradient,var(--theme-gradient))}
html[data-mode=light] body #player .waveform.spectrum-panel{background:linear-gradient(135deg,var(--cover-light,var(--theme-panel)),var(--cover-light-secondary,var(--theme-raised)))}

/* Raised Home control for mobile web and Android. */
@media(max-width:999px){
 body #categoryNav button[data-category="Home"] .icon{width:34px;height:34px;border-radius:11px;color:#fff;background:linear-gradient(145deg,hsl(var(--accent-h) 70% 65%),hsl(var(--accent-h) 66% 32%));border:1px solid hsl(var(--accent-h) 58% 76%);box-shadow:inset 0 2px 2px #ffffff70,inset 0 -2px 3px #0004,0 3px 0 hsl(var(--accent-h) 58% 22%),0 5px 7px #0005;margin-top:0;margin-bottom:5px;transform:translateY(-2px)}
 body #categoryNav button[data-category="Home"] .icon svg{width:23px;height:23px;stroke:currentColor;stroke-width:2.4;filter:drop-shadow(0 1px 1px #0005)}
 html[data-mode=light] body #categoryNav button[data-category="Home"] .icon{background:linear-gradient(145deg,hsl(var(--accent-h) 65% 45%),hsl(var(--accent-h) 75% 27%));color:#fff;border-color:hsl(var(--accent-h) 55% 58%)}
 body #categoryNav button[data-category="Home"].active .icon{outline:2px solid hsl(var(--accent-h) 60% 70% / .5);outline-offset:2px}
 body #categoryNav button[data-category="Home"]:active .icon{transform:translateY(1px);box-shadow:inset 0 1px 3px #0004,0 1px 0 hsl(var(--accent-h) 58% 22%)}
}

/* More saturated light palettes, with a quiet surface behind the spectrum. */
html[data-mode=light]{--theme-bg:hsl(var(--accent-h) 42% 96%);--theme-panel:hsl(var(--accent-h) 48% 98%);--theme-raised:hsl(var(--accent-h) 52% 91%);--theme-gradient:linear-gradient(135deg,hsl(var(--accent-h) 74% 79%) 0%,hsl(var(--accent-h) 66% 88%) 48%,hsl(calc(var(--accent-h) + 12) 56% 94%) 100%)}
html[data-mode=light][data-theme=red]{--theme-gradient:linear-gradient(135deg,#ffc0d3 0%,#f5d1e2 48%,#f7e6f0 100%)}
html[data-mode=light][data-theme=pure-red]{--theme-gradient:linear-gradient(135deg,#ffbdbd 0%,#ffd7d2 48%,#ffede7 100%)}
html[data-mode=light] body{background:radial-gradient(ellipse at 15% 0%,hsl(var(--accent-h) 65% 87% / .65),transparent 65%),var(--theme-bg)}
html[data-mode=light] body .music-tile{background:linear-gradient(145deg,var(--theme-panel),hsl(var(--accent-h) 56% 91%))}
html[data-mode=light] body #player .waveform.spectrum-panel{background:linear-gradient(135deg,#fff,var(--cover-light,#f4f7f8));border-color:var(--cover-ink,#33443e);box-shadow:inset 0 1px 0 #fff,0 3px 10px #0000000d}
html[data-mode=light] body #player .spectrum-canvas{opacity:1;mix-blend-mode:normal;filter:none}
html[data-mode=light] body #player .spectrum-panel:after{display:none}

html[data-theme=pure-red][data-mode=dark] body .saved-links button{color:#fff;background:#33000080;border-color:#ffffff80}
html[data-theme=pure-red][data-mode=light] body .saved-links button{color:#870000;background:#ffffffb3;border-color:#bd3838}
.profile-check-updates{display:block;width:100%;margin-top:16px;padding:12px;border-radius:12px;background:var(--theme-raised);color:var(--gold);border:1px solid #8885}
/* The open player extends the song palette to the site chrome. */
html body.player-open{background:var(--cover-dark,var(--theme-bg));color:#f5f5f7}
html body.player-open :is(header,#categoryNav){background:radial-gradient(ellipse at top,var(--cover-glow,transparent),transparent 85%),var(--cover-dark,var(--theme-bg));border-color:var(--cover-scrollbar,#ffffff25)}
html body.player-open #categoryNav button{color:#dedee7}
html body.player-open #categoryNav button.active{color:var(--cover-spectrum,var(--gold));background:var(--theme-gradient)}
html[data-mode=light] body.player-open{background:var(--cover-light-gradient,var(--theme-gradient));color:#132c28}
html[data-mode=light] body.player-open :is(header,#categoryNav){background:var(--cover-light-gradient,var(--theme-gradient));border-color:var(--cover-scrollbar,#132c2833)}
html[data-mode=light] body.player-open #categoryNav button{color:#26362f}
html[data-mode=light] body.player-open #categoryNav button.active{color:var(--cover-ink,var(--gold));background:var(--cover-light-secondary,var(--theme-panel))}
/* One continuous cover background across the desktop player view. */
@media(min-width:1000px){
 html body.player-open{background:radial-gradient(ellipse at 20% 4%,var(--cover-glow,transparent),transparent 65%),radial-gradient(ellipse at 100% 50%,var(--cover-glow-secondary,transparent),transparent 70%),var(--cover-dark,var(--theme-bg));background-attachment:fixed}
 html[data-mode=light] body.player-open{background:var(--cover-light-gradient,var(--theme-gradient));background-attachment:fixed}
 html body.player-open #browse{visibility:hidden}
 html[data-mode] body.player-open :is(header,#categoryNav,#player),html[data-mode] body.player-open #player :is(.queue,.music-tile,.spectrum-panel){background:transparent;box-shadow:none}
 html body.player-open header{border-bottom:1px solid #ffffff26}
 html body.player-open #categoryNav,html body.player-open #player .queue{border:1px solid #ffffff26}
 html[data-mode=light] body.player-open header,html[data-mode=light] body.player-open #categoryNav,html[data-mode=light] body.player-open #player .queue{border-color:#132c2826}
}
/* Light outlines separate playlist cards without changing their palette. */
html body #player .queue :is(.music-list-item,.music-tile){border:1px solid #ffffff26;border-radius:10px;padding:8px;margin-block:6px}
html[data-mode=light] body #player .queue :is(.music-list-item,.music-tile){border-color:#132c2826}
/* Published banner images sit directly on the page without a colored frame. */
html[data-mode] body .campaign-banner{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none}
html[data-mode] body .campaign-banner .campaign-banner-content{background:transparent;border:0;padding:0;box-shadow:none}
