:root{--accent-h:40;--gold:hsl(var(--accent-h) 76% 65%);--theme-bg:hsl(var(--accent-h) 22% 5%);--theme-panel:hsl(var(--accent-h) 15% 10%);--theme-raised:hsl(var(--accent-h) 15% 14%);--theme-gradient:linear-gradient(135deg,hsl(var(--accent-h) 70% 23%),hsl(calc(var(--accent-h) + 25) 40% 10%))}
body{background:var(--theme-bg)}header{background:hsl(var(--accent-h) 22% 5% / .97)}#player{background:radial-gradient(ellipse at top,hsl(var(--accent-h) 40% 12%),transparent 70%),var(--theme-bg)}
.hero,.home-discovery .hero{background:linear-gradient(135deg,hsl(var(--accent-h) 55% 14% / .85),hsl(var(--accent-h) 22% 5% / .92)),var(--hero-image,none)}
.music-tile,.queue{background:var(--theme-panel)}.music-tile:hover{background:var(--theme-raised)}
form,input,.queue input{background:var(--theme-raised)}
#mini{background:linear-gradient(115deg,hsl(var(--accent-h) 24% 17%),hsl(var(--accent-h) 16% 10%))}
#categoryNav{background:hsl(var(--accent-h) 22% 6% / .97)}
#categoryNav{border:1px solid #ffffff14;border-radius:14px;box-shadow:0 6px 20px #0003;padding:5px;gap:4px}
#categoryNav button{border:1px solid transparent;border-radius:10px;transition:background .18s,border-color .18s,color .18s}
#categoryNav button.active{background:var(--theme-gradient);border-color:hsl(var(--accent-h) 50% 55% / .3);color:var(--gold)}
#categoryNav button.active .icon{background:transparent}
#categoryNav button:focus-visible{outline:1px solid var(--gold);outline-offset:-2px}
@media(hover:hover){#categoryNav button:hover{background:var(--theme-raised);border-color:#ffffff25}}
@media(max-width:999px){
 #categoryNav{left:8px;right:8px;bottom:calc(5px + var(--safe));max-width:560px;margin-inline:auto;gap:0;padding:3px 0}
 #categoryNav button{min-height:52px;padding:4px 0}
 #categoryNav .icon{width:27px;height:27px;margin-bottom:2px;border-radius:9px}
 #categoryNav .icon svg{width:21px;height:21px}
}
@media(min-width:1000px){
 body{padding-left:164px}header{margin-left:-164px}
 #categoryNav{left:8px;top:72px;bottom:12px;width:148px;padding:6px;gap:5px}
 #categoryNav button{min-height:46px;padding:8px;gap:9px;font-size:12px}
 body.has-track #categoryNav{bottom:84px}
}
@media(min-width:1000px) and (max-height:500px){#categoryNav{top:58px;gap:2px}#categoryNav button{min-height:38px;padding:4px 8px}}
.mix-genre{background:var(--theme-gradient);border:1px solid hsl(var(--accent-h) 70% 70% / .22);box-shadow:inset 0 1px 0 #ffffff12;color:#fff}
.pill,.moods button,.moods button:nth-child(n){background:var(--theme-gradient)}
#bars i{background:linear-gradient(hsl(var(--accent-h) 12% 47%),hsl(var(--accent-h) 14% 23%))}
#bars i.played{background:linear-gradient(hsl(var(--accent-h) 90% 85%),var(--gold),hsl(var(--accent-h) 64% 32%))}
.player-main .actions #speed{background:var(--theme-panel)}
.theme-control{position:relative;flex-shrink:0}#themeToggle{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 11px;border:1px solid hsl(var(--accent-h) 50% 55% / .3);border-radius:22px;background:var(--theme-gradient);color:#f4f1ea;font-size:11px}
#themeToggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}#themeToggle>i{width:10px;height:10px;background:var(--gold);border-radius:50%;box-shadow:0 0 8px hsl(var(--accent-h) 80% 65% / .5)}
#themeOverlay{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:auto}
#themeOverlay::backdrop{background:#0008;backdrop-filter:blur(3px)}
#themePalette{position:absolute;right:16px;top:74px;width:220px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 90px);overflow:auto;padding:14px;background:var(--theme-panel);border:1px solid hsl(var(--accent-h) 35% 40% / .5);border-radius:16px;box-shadow:0 14px 35px #0008;z-index:50}
#themePalette>strong{font-size:14px}#themePalette>p{font-size:11px;color:#aaa;margin:5px 0 12px}#themePalette button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px;border-radius:9px;background:none;color:#eee;font-size:12px;text-align:left}
#themePalette button i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,hsl(var(--swatch-h) 80% 75%),hsl(var(--swatch-h) 65% 38%));border:1px solid #ffffff55}
#themePalette button b{margin-left:auto;visibility:hidden;color:var(--gold)}#themePalette button[aria-pressed=true]{background:hsl(var(--accent-h) 45% 40% / .18)}#themePalette button[aria-pressed=true] b{visibility:visible}
@media(max-width:359px){#themeToggle{gap:5px;padding:8px}.brand{font-size:20px}}
.search-suggestions,.player-main .actions button,.player-main .actions select{background:var(--theme-panel)}
.search-suggestions button:hover,.search-suggestions button:focus-visible{background:var(--theme-raised)}
.card img{background:var(--theme-raised)}
#mini #miniPlay{background:var(--gold);color:var(--theme-bg)}
#toast{background:var(--gold);color:var(--theme-bg)}
html{scrollbar-color:hsl(var(--accent-h) 24% 30%) var(--theme-bg)}

/* Shared search fields for the catalogue, queue, and Mix categories. */
#searchForm{align-items:center;gap:8px;padding:6px;border:1px solid hsl(var(--accent-h) 24% 50% / .3);border-radius:18px;background:var(--theme-panel);box-shadow:0 5px 18px #0002;transition:border-color .15s,box-shadow .15s}
#searchForm:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px hsl(var(--accent-h) 70% 60% / .12)}
#searchForm input{min-height:46px;padding:12px 8px 12px 38px;background-color:transparent;border-radius:12px;font-size:16px;outline:none}
#searchForm button{min-height:44px;padding:10px 18px;border-radius:12px;font-size:13px;box-shadow:inset 0 1px 0 #ffffff35;flex-shrink:0}
#queueSearch,#mixGenreFilter{width:100%;min-height:48px;padding:12px 16px 12px 44px;background-color:var(--theme-raised);border:1px solid hsl(var(--accent-h) 24% 50% / .3);border-radius:14px;font-size:16px;transition:border-color .15s,box-shadow .15s}
#queueSearch:focus,#mixGenreFilter:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px hsl(var(--accent-h) 70% 60% / .12)}
#search::placeholder,#queueSearch::placeholder,#mixGenreFilter::placeholder{color:#9ba4b1;opacity:1}
#searchSuggestions{border-radius:14px;border-color:hsl(var(--accent-h) 24% 50% / .3);box-shadow:0 16px 30px #0005}
#searchSuggestions button{padding:13px 16px;min-height:48px}
@media(max-width:359px){#searchForm{gap:4px}#searchForm button{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){#searchForm,#queueSearch,#mixGenreFilter{transition:none}}
#searchForm input,#queueSearch,#mixGenreFilter{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2396a3b5' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:19px;background-position:12px center}