/* Shared controls: the same material, corners and accent as the music player. */
:root{--scroll-thumb:#bdbbb4;--scroll-hover:#94968f;--control-shadow:0 8px 28px #24242017;--muted:#71736f}
html[data-theme=dark]{--scroll-thumb:#515356;--scroll-hover:#797c81;--control-shadow:0 10px 35px #0005}
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent;margin:7px;border-radius:8px}
*::-webkit-scrollbar-thumb{border-radius:10px;background:var(--scroll-thumb);border:1px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover)}
*::-webkit-scrollbar-corner{background:transparent}
.shelf,.hero-grid,.song-grid,.lyrics-lines{scrollbar-width:none}
.shelf::-webkit-scrollbar,.hero-grid::-webkit-scrollbar,.lyrics-lines::-webkit-scrollbar{display:none}
#topbar{position:sticky;top:0;z-index:20;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
#topbar .icon-btn:hover{color:var(--accent);background:var(--accent-soft)}
.top-right .icon-btn{box-shadow:0 1px 3px #00000003;border-color:color-mix(in srgb,var(--line) 80%,transparent)}
.select-wrap{position:relative;flex-shrink:0;min-width:126px}
.custom-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:15px;min-width:126px;min-height:38px;border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:var(--bg);font-size:12px;text-align:left;box-shadow:0 1px 2px #00000003}
.custom-select-trigger:hover{background:var(--hover);border-color:var(--scroll-thumb)}
.custom-select-trigger[aria-expanded=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.custom-select-trigger .icon{width:14px;height:14px;color:var(--muted);transition:transform .16s}
.custom-select-trigger[aria-expanded=true]>.icon{transform:rotate(180deg)}
.custom-select-list{position:absolute;top:calc(100% + 7px);right:0;min-width:170px;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--control-shadow);z-index:10;animation:control-in .16s cubic-bezier(.2,.7,.3,1);transform-origin:top right}
.custom-select-option{display:flex;width:100%;align-items:center;justify-content:space-between;gap:15px;text-align:left;min-height:37px;padding:9px 11px;border-radius:7px;font-size:12px}
.custom-select-option:hover,.custom-select-option:focus-visible{background:var(--hover);outline:0}
.custom-select-option[aria-selected=true]{color:var(--accent);background:var(--accent-soft);font-weight:600}
.custom-select-option .icon,.check-space{width:15px;height:15px;flex-shrink:0}
@keyframes control-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.context-menu{max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.menu-item:focus-visible{outline:0;background:var(--accent-soft);color:var(--accent)}
.context-menu{width:272px;min-width:0;padding:8px;border-radius:17px;background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:0 20px 65px #141d2626,0 3px 12px #141d2610;backdrop-filter:none;-webkit-backdrop-filter:none;transform-origin:top right;animation:menu-reveal .18s cubic-bezier(.2,.75,.3,1) both}
.context-menu[data-state=closing]{pointer-events:none;animation:menu-dismiss .16s ease-in both}
.context-menu[data-player=true]{--surface:#202b32;--text:#eff3f1;--muted:#b2bfc4;--line:#ffffff17;--hover:#ffffff0d;--accent:#fa8a9d;--accent-soft:#ffffff12}
.context-menu .menu-label{max-width:none;padding:9px 6px 13px;gap:10px;white-space:normal;margin-bottom:5px;border-bottom:1px solid var(--line)}
.menu-track-art{width:39px;height:39px;border-radius:8px;flex-shrink:0;object-fit:cover}
.context-menu .menu-label>span{flex:1;min-width:0}.menu-label strong,.menu-label small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.menu-label strong{font-size:12px;font-weight:650;color:var(--text);line-height:1.5}.menu-label small{font-size:10px;color:var(--muted);margin-top:3px}
.context-menu .menu-label .icon-btn{width:28px;height:28px;min-width:28px;min-height:28px;padding:0;border-radius:50%;background:var(--hover)}
.context-menu .menu-item{min-height:38px;padding:9px 12px;gap:12px;font-size:12px;font-weight:500;line-height:1.4;border-radius:9px;transition:background .14s,color .14s}
.context-menu .menu-item .icon{width:17px;height:17px;color:var(--muted)}
.context-menu .menu-item:hover,.context-menu .menu-item:focus-visible{background:var(--accent-soft);color:var(--accent)}
.context-menu .menu-item:hover .icon,.context-menu .menu-item:focus-visible .icon,.context-menu .is-selected .icon{color:var(--accent)}
.menu-divider{height:1px;background:var(--line);margin:6px 9px}
@keyframes menu-reveal{from{opacity:0;transform:translateY(-5px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes menu-dismiss{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-4px) scale(.98)}}
.nav-item{border-radius:9px}.nav-item.selected{box-shadow:inset 2px 0 var(--accent)}
.hero{border-radius:15px}.hero-caption{line-height:1.5}.hero p{font-size:11px;line-height:1.7}
.cover-button{aspect-ratio:1}.cover-button img{height:auto;aspect-ratio:1;object-fit:cover}.artist-card .cover-button{border-radius:50%}
.song-row .track-title{font-weight:600}.song-row .track-artist{font-size:11px}
.player-bar{border:1px solid var(--line);box-shadow:0 14px 45px #242b3412,0 2px 6px #242b3407}
.player-center .play-btn{width:34px;height:34px;background:var(--accent);color:#fff;border-radius:50%}.player-center .play-btn .icon{width:19px;height:19px}
.avatar,.person-monogram{flex-shrink:0;aspect-ratio:1}.top-left>.icon-btn{height:28px;padding:0}
@media(min-width:801px){.page-heading{margin-bottom:32px}.song-row{min-height:67px}.song-row .track-title{font-size:13px}.song-row>.icon-btn{width:30px;height:30px}.top-search,.breadcrumb{font-size:12px}.card-title{font-size:13px}}
@media(max-width:600px){.context-menu{width:min(288px,calc(100vw - 24px))}.context-menu .menu-item{min-height:43px}.hero p{font-size:11px}.top-left>.icon-btn{width:36px;height:36px}.song-row>.icon-btn{width:36px;height:36px}.mobile-transport .icon-btn{height:33px}.avatar{padding:0}}
.modal-title{gap:10px}.modal-title .icon-btn:hover{color:var(--accent)}
.setting-row{position:relative}.setting-row:has(.custom-select-trigger[aria-expanded=true]){z-index:3}
.full-top{touch-action:none}.full-artwork{touch-action:pan-y}.full-cover{will-change:auto}
.lyrics-lines{overscroll-behavior:contain}.queue-panel,.full-mode-panel{overscroll-behavior:contain}
.full-mode-panel .secondary-button{background:#ffffff12;border-color:#ffffff30;color:#fff}
.full-mode-panel .secondary-button:hover{background:#ffffff24}
.player-open img{flex-shrink:0}
@media(pointer:coarse){input[type=range]{height:24px;background-size:100% 4px;background-repeat:no-repeat;background-position:center}.full-player input[type=range]{height:24px}input[type=range]::-webkit-slider-thumb{width:15px;height:15px;opacity:1}input[type=range]::-moz-range-thumb{width:15px;height:15px}.menu-item{min-height:44px}.queue-move button{width:32px;height:28px}.queue-row>.icon-btn{height:44px;min-width:36px}.toggle{min-width:36px;width:36px;height:22px}.toggle:before{width:16px;height:16px}.toggle:checked:before{transform:translateX(14px)}}
@media(max-width:600px){.full-top{padding-top:calc(14px + env(safe-area-inset-top));height:calc(67px + env(safe-area-inset-top))}.full-layout{padding-bottom:calc(35px + env(safe-area-inset-bottom))}.full-player .empty-state{min-height:0}.full-layout.mode-lyrics .full-mode-panel{max-height:none}.full-layout.mode-lyrics .lyrics-lines{max-height:max(110px,calc(100dvh - 330px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}.custom-select-list{max-width:calc(100vw - 60px)}.setting-row>span{min-width:0}.setting-row>.secondary-button{flex-shrink:0}dialog{padding:22px}.queue-controls{gap:5px}}
html[data-reduce-transparency=true] #topbar{background:var(--bg);backdrop-filter:none}
@media(prefers-reduced-motion:reduce){.custom-select-list{animation:none}.custom-select-trigger .icon{transition:none}}
@media(max-width:600px){.custom-select-trigger,.custom-select-option{min-height:44px}.select-wrap,.custom-select-trigger{min-width:119px}.custom-select-list{min-width:154px}.icon-btn{min-width:36px}#mobile-nav{border-color:var(--line)}.player-bar{border-color:var(--line)}.full-player .full-top .icon-btn{width:44px;height:44px}.full-player .full-transport .icon-btn{min-width:55px}.player-bar .mobile-transport .icon-btn{min-width:33px}html[data-large-text=true] .setting-row{flex-wrap:wrap}html[data-large-text=true] .setting-row small{font-size:12px}}