:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f5f3f8;background:#101014;font-synthesis:none;--accent:#dd9bff;--muted:#a6a0b1;--border:#2c2934;--surface:#19171f;--player-height:110px;color-scheme:dark}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}button,input,textarea,select,summary{outline-offset:4px}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent)}button{border:0;color:inherit;background:none}input,textarea,select{border:1px solid #3b3547;border-radius:8px;padding:.72rem .85rem;background:#121016;color:inherit;width:100%}input::placeholder,textarea::placeholder{color:#797282}textarea{resize:vertical}select{cursor:pointer}h1,h2,p{margin-top:0}h1{font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.1;letter-spacing:-.05em;margin-bottom:.6rem}h2{font-size:1.1rem;letter-spacing:-.02em}svg{flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.hint{font-size:.88rem;line-height:1.6;color:var(--muted)}.eyebrow{font-size:.66rem;letter-spacing:.17em;font-weight:750;color:#c4a9d5;margin-bottom:.7rem}.brand{font-weight:850;font-size:1.7rem;letter-spacing:-.065em;white-space:nowrap}.brand span{color:var(--accent)}.primary,.secondary,.subtle{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1rem;border-radius:8px;font-size:.85rem;font-weight:650}.primary{background:var(--accent);color:#291334}.primary:hover:not(:disabled){background:#e8b8ff}.secondary{background:#2b2634;color:#eee7f4}.secondary:hover:not(:disabled){background:#3a3148}.subtle{color:var(--muted)}.subtle:hover{color:#fff;background:#25212d}.danger{color:#f6a2b1}.wide{width:100%}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;color:#b7afc3;flex-shrink:0;padding:0}.icon-button:hover:not(:disabled){color:#fff;background:#342c40}.icon-button.active{color:var(--accent)}.field{display:grid;gap:.5rem;font-size:.84rem;font-weight:600;margin:1rem 0}.field .hint{font-size:.78rem;font-weight:400}.error{color:#ffa6b7;font-size:.84rem;line-height:1.5}.error:empty{display:none}.auth-panel{width:calc(100% - 2rem);max-width:520px;margin:7vh auto;padding:2.2rem;border-radius:20px;background:linear-gradient(150deg,#25202d,#17141d);border:1px solid #3a2f47;box-shadow:0 25px 80px #0006}.auth-panel .brand{display:block;margin-bottom:2.3rem}.auth-panel details{margin:1rem 0;background:#17121e;border-radius:10px;padding:1rem}.auth-panel summary{font-size:.86rem;color:#d7c3e3;cursor:pointer}.auth-panel button{margin-top:.5rem}.auth-panel>p.hint{margin-bottom:1.6rem}.shell{min-height:100vh;padding-bottom:var(--player-height)}.topbar{height:84px;display:flex;align-items:center;gap:3rem;padding:0 2rem;border-bottom:1px solid var(--border);background:#111015;position:sticky;top:0;z-index:3}.search-box{position:relative;display:flex;align-items:center;gap:.7rem;width:100%;max-width:580px;flex:1;color:#938b9f}.search-box input{padding:.7rem 2.5rem .7rem 2.5rem;background:#1b1721;border-color:#2f2937;border-radius:10px;font-size:.85rem}.search-box>svg{position:absolute;left:.8rem;width:18px}.search-box kbd{position:absolute;right:.8rem;padding:.05rem .35rem;font-size:.7rem;border:1px solid #4a4156;border-radius:4px;color:#8e8399;pointer-events:none}.account{display:flex;align-items:center;gap:1rem;margin-left:auto;font-size:.83rem;color:#c0b7c9;white-space:nowrap}.workspace{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:calc(100vh - 84px - var(--player-height))}.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--border);padding:1.8rem 1rem;position:sticky;top:84px;height:calc(100vh - 84px - var(--player-height));overflow-y:auto}.nav-heading{font-size:.65rem;letter-spacing:.13em;color:#82788f;font-weight:700;margin:.4rem .8rem .8rem}.nav-link{display:flex;align-items:center;width:100%;gap:.85rem;text-align:left;padding:.82rem .8rem;color:#afa5bb;border-radius:9px;font-size:.85rem;margin:.15rem 0}.nav-link svg{width:18px;height:18px}.nav-link:hover{background:#231e2a;color:#efe6f7}.nav-link.selected{color:#e6bbff;background:#32223f}.nav-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-link small{margin-left:auto;color:#81758b;font-size:.7rem}.playlist-heading{display:flex;justify-content:space-between;margin-top:2.3rem}.playlist-empty{padding:.25rem .8rem;font-size:.77rem}.sidebar-foot{margin-top:auto;padding:2rem .8rem .3rem;display:flex;align-items:center;gap:.5rem;font-size:.69rem;line-height:1.5;color:#797083}.connection-dot{width:6px;height:6px;border-radius:100%;background:#99c7a4;box-shadow:0 0 8px #80ce9655;flex-shrink:0}.main-content{padding:2.2rem clamp(1.2rem,3vw,3rem) 3rem;min-width:0;background:radial-gradient(ellipse at 80% 0%,#261a323a,transparent 650px)}.content-header{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:1.6rem}.content-header .hint{margin-bottom:0}.header-controls{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.source-filter select{max-width:190px;font-size:.78rem;padding:.6rem .75rem;background:#1c1723}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:1.75rem 1.2rem}.album-card{min-width:0;display:block;text-align:left;padding:.5rem;border-radius:12px;transition:background .15s}.album-card:hover{background:#211b29}.cover{display:grid;place-items:center;position:relative;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:linear-gradient(140deg,hsl(var(--cover-hue) 26% 33%),hsl(calc(var(--cover-hue) + 35) 30% 15%));box-shadow:0 12px 20px #0002}.cover>span{display:grid;place-items:center;position:absolute;inset:0;color:#ffffff40}.cover>span svg{width:36%;height:36%;stroke-width:.7}.cover:before{content:"";position:absolute;width:80%;height:80%;border-radius:50%;border:1px solid #ffffff13;box-shadow:0 0 0 13px #ffffff04,0 0 0 26px #ffffff03}.cover img{position:relative;width:100%;height:100%;object-fit:cover;z-index:1}.album-card strong,.album-card>span,.album-card>small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.album-card strong{font-size:.9rem;margin:.85rem 0 .35rem;font-weight:650}.album-card>span{font-size:.79rem;color:#b4a7be}.album-card>small{font-size:.7rem;color:#817489;margin-top:.35rem}.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem}.artist-card{display:flex;align-items:center;gap:1rem;text-align:left;padding:1rem;border-radius:12px;background:#1b1720}.artist-card:hover{background:#282030}.artist-cover{width:64px;min-width:64px;border-radius:50%}.artist-card>div:not(.cover){min-width:0}.artist-card strong,.artist-card span{display:block}.artist-card strong{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.artist-card span{font-size:.75rem;color:var(--muted);margin-top:.4rem}.album-detail{display:flex;gap:1.5rem;align-items:center;margin-bottom:1.6rem}.detail-cover{width:130px;min-width:130px}.album-detail h2{font-size:1.75rem;line-height:1.1;margin-bottom:.5rem}.album-detail .hint{margin-bottom:0}.collection-actions{display:flex;gap:.65rem;margin-bottom:1.5rem}.collection-actions svg{width:16px;height:16px}.track-columns,.track-row{display:grid;grid-template-columns:32px minmax(160px,1.5fr) minmax(90px,1fr) 45px auto;align-items:center;gap:1rem}.track-columns{font-size:.65rem;color:#82758f;letter-spacing:.06em;padding:.7rem .6rem;border-bottom:1px solid var(--border);text-transform:uppercase}.track-row{border-radius:8px;padding:.5rem .6rem;min-height:66px;border-bottom:1px solid #ffffff04}.track-row:hover{background:#211a29}.track-number{font-size:.76rem;color:#887b92;text-align:center}.track-title{display:block;text-align:left;padding:.25rem 0;min-width:0;width:100%;line-height:1.5}.track-title strong,.track-title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-title strong{font-size:.85rem;font-weight:550;color:#f0e9f5}.track-title small{font-size:.74rem;font-weight:400;color:#9d8baa;margin-top:.2rem}.track-title:hover strong{color:var(--accent)}.track-album{font-size:.8rem;color:#a297ac;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.duration{font-size:.75rem;color:#9b8ba7;font-variant-numeric:tabular-nums;text-align:right}.track-actions{display:flex;justify-content:flex-end}.track-actions .icon-button{width:30px;height:30px}.track-actions svg{width:17px;height:17px}.current-track .track-title strong{color:var(--accent)}.equalizer{display:flex;align-items:flex-end;gap:2px;height:13px;width:14px;margin:auto}.equalizer i{width:3px;background:var(--accent);height:8px;animation:equalize .8s ease-in-out infinite alternate}.equalizer i:nth-child(2){animation-delay:.25s;height:13px}.equalizer i:nth-child(3){animation-delay:.5s;height:5px}@keyframes equalize{to{height:3px}}.empty-state{padding:4rem 1rem;text-align:center;color:#b7a3c5}.empty-state>svg{width:48px;height:48px;margin-bottom:1rem;color:#674c7b}.empty-state h2{font-size:1.15rem}.notice{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#292030;border:1px solid #4d345d;padding:.6rem 1rem;border-radius:10px;margin-bottom:1.5rem;font-size:.83rem;line-height:1.5}.notice.error{background:#2e1b23;border-color:#643546;color:#ffb5c5}.notice .icon-button{width:26px;height:26px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;align-items:start}.settings-card{padding:1.6rem;border:1px solid var(--border);border-radius:14px;background:#19151e}.settings-card h2{margin-bottom:.55rem}.settings-card>.hint{margin-bottom:1.2rem;font-size:.8rem}.settings-card .field{font-size:.8rem}.settings-list{padding:0;margin:1.2rem 0;list-style:none}.settings-list li{display:flex;gap:.8rem;align-items:center;padding:.75rem 0;border-bottom:1px solid #332838;min-width:0}.settings-list li>div{flex:1;min-width:0}.settings-list strong,.settings-list small{display:block;overflow-wrap:anywhere}.settings-list strong{font-size:.82rem;font-weight:550}.settings-list small{font-size:.72rem;line-height:1.5;color:#95879e;margin-top:.3rem}.source-error{font-size:.77rem;line-height:1.6;color:#efacbb;border-left:2px solid #965065;padding-left:.8rem}.source-error strong{font-size:.8rem}.sharing-card{grid-column:1/-1}.token-secret{padding:1.2rem;background:#282035;border:1px solid #785289;border-radius:10px;margin:1.2rem 0}.token-secret>strong{font-size:.85rem}.token-secret .hint{margin:.5rem 0}.token-secret input{font-family:ui-monospace,monospace;font-size:.77rem}.inline-buttons{display:flex;gap:.5rem;margin-top:.8rem}.inline-form{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.8rem 0}.inline-form input{width:auto;flex:1;min-width:150px}.inline-form .error{flex-basis:100%}.playlist-tools{padding:1rem 1.2rem;background:#1b1522;border-radius:9px;margin-bottom:1.4rem}.playlist-tools summary{cursor:pointer;font-size:.83rem;color:#c3afd1}.playlist-tools>.hint{margin:.8rem 0 0;font-size:.77rem}.player{position:fixed;bottom:0;left:0;right:0;z-index:6;height:var(--player-height);background:#19131fea;border-top:1px solid #493151;backdrop-filter:blur(22px);display:grid;grid-template-columns:minmax(180px,1fr) minmax(300px,1.2fr) minmax(170px,1fr);align-items:center;gap:2rem;padding:.8rem 2rem}.now-track{display:flex;align-items:center;gap:.85rem;min-width:0}.now-cover{width:54px;min-width:54px;border-radius:8px}.now-track>div:not(.cover){min-width:0}.now-track strong,.now-track>div>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-track strong{font-size:.84rem;font-weight:600}.now-track>div>span{font-size:.73rem;color:#a594b1;margin-top:.4rem}.transport{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-bottom:.35rem}.transport .play-toggle{background:#e8c7fb;color:#271131;border-radius:50%;width:36px;height:36px;margin:0 .4rem}.transport .play-toggle:hover:not(:disabled){background:#f2e0fc}.transport .play-toggle svg{width:19px;height:19px}.transport .repeat-one:after{content:"1";position:absolute;font-size:8px;margin-top:0;line-height:1}.seek-control{display:flex;gap:.65rem;align-items:center}.seek-control span{font-size:.64rem;color:#a89ab3;min-width:32px;font-variant-numeric:tabular-nums}.seek-control span:last-child{text-align:right}.seek-control input,.player-extra input{padding:0;height:4px;border:0;appearance:none;background:#493851;border-radius:10px;cursor:pointer}.seek-control input{background:linear-gradient(to right,#dba0f9 var(--progress,0%),#493851 var(--progress,0%))}input[type="range"]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:#eac8fa}input[type="range"]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#eac8fa}.player-extra{display:flex;justify-content:flex-end;align-items:center;gap:.65rem}.player-extra input{width:85px}.player-extra .muted{color:#6b5b77}.queue-count{font-size:.64rem;color:#93819f;margin-left:-.8rem;align-self:flex-start;margin-top:.15rem}.queue-panel{position:fixed;right:1rem;top:95px;bottom:calc(var(--player-height) + 12px);z-index:5;width:400px;max-width:calc(100vw - 2rem);display:flex;flex-direction:column;background:#211928f5;border:1px solid #5b4068;border-radius:15px;box-shadow:0 15px 80px #0009;backdrop-filter:blur(20px)}.queue-heading{display:flex;justify-content:space-between;align-items:center;padding:1.3rem 1.2rem;border-bottom:1px solid #44304e}.queue-heading .eyebrow{margin-bottom:.35rem}.queue-heading h2{margin:0}.queue-heading h2 span{color:#ae8cbe;font-size:.85rem;font-weight:400;margin-left:.35rem}.queue-items{overflow-y:auto;flex:1;min-height:80px;padding:.5rem}.queue-item{display:grid;grid-template-columns:20px minmax(0,1fr) 88px;gap:.4rem;align-items:center;padding:.55rem .5rem;border-bottom:1px solid #ffffff06}.queue-item.current-track{background:#35213f;border-radius:8px}.queue-index{font-size:.7rem;color:#9b83ad}.queue-item .track-title strong{font-size:.77rem}.queue-item .track-title small{font-size:.67rem}.queue-item-actions{display:flex;align-items:center}.queue-item-actions .icon-button{width:28px;height:30px}.queue-item-actions svg{width:15px;height:15px}.queue-footer{padding:.6rem 1.2rem 1rem;border-top:1px solid #44304e;max-height:47%;overflow-y:auto}.queue-footer .field{margin:.5rem 0 .8rem;font-size:.76rem}.queue-footer input{font-size:.78rem;padding:.6rem .7rem}.queue-footer .primary,.queue-footer .secondary,.queue-footer .subtle{font-size:.77rem}.queue-footer .secondary{margin-top:.6rem}.queue-footer>.hint{font-size:.65rem;margin:.5rem 0 0}.queue-empty{padding:1.5rem 1rem}
@media(min-width:1450px){.album-grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr))}.main-content{max-width:1600px;width:100%;margin:auto}}
@media(max-width:1080px){.topbar{gap:1.5rem;padding:0 1.4rem}.workspace{grid-template-columns:195px minmax(0,1fr)}.sidebar{padding:1.4rem .65rem}.main-content{padding:1.7rem 1.4rem}.player{grid-template-columns:minmax(150px,1fr) minmax(250px,1.4fr) 100px;gap:1rem;padding:.8rem 1.4rem}.player-extra input,.player-extra [data-action="mute"]{display:none}.settings-grid{grid-template-columns:1fr}.sharing-card{grid-column:auto}.album-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1.2rem .7rem}.account>span{display:none}}
@media(max-width:760px){:root{--player-height:138px}.topbar{height:72px;gap:1rem;padding:0 1rem}.brand{font-size:1.35rem}.search-box input{font-size:.78rem;padding-right:.65rem}.search-box kbd{display:none}.account{gap:0}.account .subtle{font-size:.7rem;padding:.4rem .2rem}.workspace{display:block}.sidebar{position:static;height:auto;padding:.65rem 1rem .2rem;border-right:0;border-bottom:1px solid var(--border);display:block;overflow:visible}.sidebar nav{display:flex;gap:.3rem;overflow-x:auto}.nav-heading,.sidebar-foot{display:none}.nav-link{width:auto;flex-shrink:0;padding:.55rem .65rem;font-size:.75rem;gap:.45rem}.nav-link svg{width:16px;height:16px}.sidebar #playlist-navigation{display:flex;overflow:auto;gap:.3rem;max-width:100%;padding:.4rem 0}.playlist-link{font-size:.72rem}.playlist-link small{margin-left:.2rem}.playlist-empty{margin:.25rem 0;padding:0;font-size:.7rem}.main-content{padding:1.6rem 1rem 2rem}.content-header{align-items:flex-start;gap:1rem;margin-bottom:1.4rem}.content-header h1{font-size:1.8rem}.content-header .eyebrow{font-size:.56rem}.content-header .hint{font-size:.73rem}.source-filter select{max-width:130px;font-size:.7rem;padding:.55rem}.content-header .secondary{font-size:.7rem;padding:.6rem}.content-header .secondary svg{width:14px;height:14px}.album-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:1rem .5rem}.album-card{padding:.2rem}.album-card strong{font-size:.8rem}.album-card>span{font-size:.73rem}.album-card>small{font-size:.64rem}.track-columns,.track-row{grid-template-columns:24px minmax(0,1fr) 34px 32px;gap:.65rem}.track-columns>span:nth-child(3),.track-album{display:none}.track-row{padding:.4rem .3rem}.track-title strong{font-size:.8rem}.track-title small{font-size:.69rem}.track-actions{flex-wrap:wrap}.duration{font-size:.67rem}.artist-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.detail-cover{width:95px;min-width:95px}.album-detail{gap:1rem}.album-detail h2{font-size:1.3rem}.settings-card{padding:1.2rem}.player{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px 58px;gap:.3rem 1rem;padding:.6rem 1rem .8rem}.now-cover{width:40px;min-width:40px}.now-track{gap:.65rem}.now-track strong{font-size:.78rem}.now-track>div>span{font-size:.65rem;margin-top:.2rem}.playback-controls{grid-row:2;grid-column:1/-1}.transport{margin-bottom:.25rem;gap:.9rem}.transport .icon-button{width:29px;height:29px}.transport .play-toggle{width:30px;height:30px}.transport svg{width:17px;height:17px}.player-extra{grid-row:1;grid-column:2;gap:.3rem}.player-extra .queue-count{margin-left:-.5rem}.seek-control span{font-size:.6rem}.seek-control{gap:.5rem}.queue-panel{top:85px;right:.5rem;max-width:calc(100vw - 1rem);bottom:calc(var(--player-height) + 6px)}.queue-footer{max-height:43%}.auth-panel{padding:1.5rem;margin:4vh auto}.auth-panel h1{font-size:1.85rem}}
/* Keep volume available in small desktop windows and on touch devices. */
@media(min-width:761px) and (max-width:1080px){.player{grid-template-columns:minmax(150px,1fr) minmax(250px,1.4fr) 170px}.player-extra input{display:block;width:62px}.player-extra [data-action="mute"]{display:inline-flex}}
@media(max-width:760px){.player-extra input{display:block;width:46px}.player-extra [data-action="mute"]{display:inline-flex}.player-extra .icon-button{width:28px;height:28px}.search-box{min-width:0}.topbar>.brand{font-size:1.25rem}.topbar{gap:.65rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}