:root{--bg: #000;--bg-elev: #121212;--bg-elev-2: #1a1a1a;--bg-hover: #1f1f1f;--sidebar: #000;--card: #181818;--card-hover: #282828;--border: #282828;--text: #ffffff;--text-dim: #b3b3b3;--text-dim-2: #6a6a6a;--accent: #1db954;--accent-hover: #1ed760;--danger: #e22134;--sidebar-w: 0px;--playerbar-h: 64px;--mobnav-h: 56px;--topbar-h: 56px;--radius: 8px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Roboto", "Circular", sans-serif}*{box-sizing:border-box}html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}html,body,#root{height:100%}body{overflow:hidden;overscroll-behavior-y:none}a{color:inherit;text-decoration:none}button{background:none;border:0;color:inherit;font-family:inherit;cursor:pointer;padding:0;touch-action:manipulation}input,select,textarea{font-family:inherit}img{display:block;max-width:100%}svg{width:20px;height:20px;display:block}@media (hover: none) and (pointer: coarse){html{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}input,textarea,[contenteditable=true],[contenteditable=""]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}}.dim{color:var(--text-dim)}.small{font-size:12px}.accent{color:var(--accent)}.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.min0{min-width:0;overflow:hidden}.pill{background:var(--bg-elev-2);color:var(--text-dim);border-radius:999px;padding:2px 8px;font-size:11px}.app{display:grid;grid-template-columns:1fr;grid-template-rows:1fr var(--playerbar-h) calc(var(--mobnav-h) + var(--safe-bottom));grid-template-areas:"main" "player" "mobnav";height:100vh;height:100dvh;background:var(--bg);overflow:hidden}.sidebar{display:none}.main{grid-area:main;background:linear-gradient(180deg,#2a2a2a 0%,var(--bg-elev) 220px);overflow:hidden;display:grid;grid-template-rows:1fr;min-height:0}.main>*{overflow-y:auto;-webkit-overflow-scrolling:touch}.main>*::-webkit-scrollbar{width:8px}.main>*::-webkit-scrollbar-thumb{background:var(--bg-elev-2);border-radius:4px}.page-title{font-size:22px;font-weight:800;margin:16px 16px 8px;letter-spacing:-.3px}.section{margin:16px 0}.section-title{font-size:17px;font-weight:700;margin:16px 16px 10px;letter-spacing:-.2px}.state{padding:32px 16px;color:var(--text-dim);display:flex;align-items:center;gap:12px;font-size:14px}.spinner{width:16px;height:16px;border:2px solid var(--text-dim-2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.topbar{position:sticky;top:0;z-index:5;min-height:var(--topbar-h);padding-top:var(--safe-top);display:flex;align-items:center;gap:12px;padding-left:12px;padding-right:12px;background:transparent}.topbar-search{display:flex;align-items:center;gap:8px;background:var(--bg-elev-2);border-radius:999px;padding:10px 14px;width:100%}.topbar-search svg{color:var(--text-dim);width:18px;height:18px;flex-shrink:0}.topbar-search input{flex:1;background:transparent;border:0;color:var(--text);outline:none;font-size:16px;min-width:0}.topbar-search input::placeholder{color:var(--text-dim)}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:0 12px 8px}.card{background:var(--card);border-radius:var(--radius);padding:10px;transition:background .2s;cursor:pointer;position:relative}.card:active{background:var(--card-hover)}.card-cover{position:relative;margin-bottom:10px;aspect-ratio:1}.card-cover img{width:100%;height:100%;object-fit:cover;border-radius:4px;background:#333;box-shadow:0 4px 12px #00000080}.card-play{position:absolute;right:6px;bottom:6px;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#000;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px #00000080}.card-play:active{background:var(--accent-hover)}.card-play svg{width:20px;height:20px}.card-title{font-weight:700;font-size:14px;margin-bottom:2px}.card-sub{font-size:12px}.track-list{margin:0 8px 16px;display:flex;flex-direction:column}.track-row{display:grid;grid-template-columns:32px 1fr 32px 50px;align-items:center;gap:8px;padding:8px;border-radius:4px;min-width:0}.track-row:active{background:var(--bg-hover)}.track-row.is-current{background:#1db95424}.track-head{border-bottom:1px solid var(--border);border-radius:0;padding-bottom:8px;margin-bottom:6px;color:var(--text-dim);display:none}.track-head:active{background:transparent}.track-index{position:relative;width:32px;text-align:center;color:var(--text-dim);font-size:14px}.track-index .idx{display:none}.idx-play{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--text)}.idx-play svg{width:18px;height:18px}.track-title-wrap{display:flex;align-items:center;gap:10px;min-width:0}.track-thumb{width:44px;height:44px;border-radius:4px;object-fit:cover;flex-shrink:0;background:#333}.track-title{font-size:14px}.track-album{display:none}.track-heart,.track-queue{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);border-radius:50%}.track-heart.on{color:var(--accent)}.track-queue{display:none}.track-duration{font-size:13px;text-align:right;color:var(--text-dim);font-variant-numeric:tabular-nums}.lib-hero{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:20px 16px;background:linear-gradient(180deg,#4a1c66 0%,transparent 100%)}.lib-hero-cover{width:140px;height:140px;background:linear-gradient(135deg,#6f14d0,#ff87b7);border-radius:4px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #00000080;flex-shrink:0}.lib-hero .page-title{margin:4px 0;font-size:28px}.lib-actions{padding:12px 16px 8px;display:flex;gap:10px}.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#000;padding:12px 22px;border-radius:999px;font-weight:700;font-size:14px;transition:transform .1s,background .15s}.btn-primary:active:not(:disabled){background:var(--accent-hover);transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-primary svg{width:20px;height:20px}.btn-ghost{display:inline-flex;align-items:center;gap:6px;color:var(--text-dim);padding:8px 14px;border-radius:999px;border:1px solid var(--border);font-weight:600;font-size:13px}.btn-ghost:active{color:var(--text);border-color:var(--text-dim)}.q-head-row{display:flex;align-items:center;justify-content:space-between;padding-right:12px;gap:8px;flex-wrap:wrap}.q-head-row .section-title{flex:1;margin-right:0}.playerbar{grid-area:player;background:#101010;border-top:1px solid var(--border);display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr;align-items:center;gap:10px;padding:0 12px;min-height:0;position:relative}.playerbar>.pb-center>.pb-seek{position:absolute;top:0;left:0;right:0;padding:0;z-index:1}.pb-now{display:flex;align-items:center;gap:10px;min-width:0;cursor:pointer}.pb-now:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.pb-art{width:40px;height:40px;border-radius:4px;object-fit:cover;background:#333;flex-shrink:0}.pb-title{font-size:13px;font-weight:600}.pb-heart{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--text-dim);flex-shrink:0}.pb-heart.on{color:var(--accent)}.pb-heart svg{width:20px;height:20px}.pb-center{display:contents}.pb-controls{display:flex;align-items:center;gap:4px;justify-content:flex-end}.pb-btn{color:var(--text-dim);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%}.pb-btn:active:not(:disabled){color:var(--text);background:var(--bg-hover)}.pb-btn:disabled{opacity:.35;cursor:default}.pb-btn.on{color:var(--accent)}.pb-btn.small svg{width:16px;height:16px}.pb-btn svg{width:22px;height:22px}.pb-controls>.pb-btn:nth-child(1),.pb-controls>.pb-btn:nth-child(5){display:none}.pb-play{width:44px;height:44px;border-radius:50%;background:#fff;color:#000!important;transition:transform .1s}.pb-play:active:not(:disabled){transform:scale(.94)}.pb-play:disabled{background:#444}.pb-play svg{width:22px;height:22px}.pb-seek{display:grid;grid-template-columns:1fr;gap:0;align-items:center;width:100%}.pb-seek .pb-time{display:none}.pb-range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:3px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--pct, 0%),#4d4d4d var(--pct, 0%),#4d4d4d 100%);border-radius:0;outline:none;cursor:pointer;display:block}.pb-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#fff;border-radius:50%;opacity:0}.pb-range::-moz-range-thumb{width:14px;height:14px;background:#fff;border-radius:50%;border:0;opacity:0}.pb-range:disabled{opacity:.5;cursor:default}.pb-right{display:flex;align-items:center;justify-content:flex-end;gap:6px}.pb-mute-btn,.pb-vol{display:none}.pb-expand{color:var(--text-dim)}.pb-expand:active{color:var(--text)}.pb-expand.on{color:var(--accent)}.pb-error{color:var(--danger);position:absolute;left:12px;bottom:2px;z-index:2}.pb-loading{display:none}.mobnav{grid-area:mobnav;display:flex;justify-content:space-around;align-items:stretch;background:#050505;border-top:1px solid var(--border);padding-bottom:var(--safe-bottom)}.mob-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;color:var(--text-dim);font-size:10px;font-weight:600;text-decoration:none;transition:color .15s}.mob-link.active{color:var(--text)}.mob-link svg{width:22px;height:22px}.mob-link:active{color:var(--text)}@media (min-width: 900px){:root{--sidebar-w: 260px;--playerbar-h: 90px;--topbar-h: 64px}.app{grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr var(--playerbar-h);grid-template-areas:"sidebar main" "player  player";gap:8px;padding:8px;height:100vh}.sidebar{grid-area:sidebar;background:var(--sidebar);border-radius:var(--radius);overflow:hidden;display:grid;grid-template-rows:auto auto 1fr;min-height:0}.sidebar-brand{display:flex;align-items:center;gap:10px;padding:20px 20px 8px;font-weight:700;font-size:18px}.sidebar-nav{padding:12px;background:var(--bg-elev);border-radius:var(--radius);margin:8px;display:flex;flex-direction:column;gap:4px}.nav-link{display:flex;align-items:center;gap:16px;padding:10px 12px;border-radius:4px;color:var(--text-dim);font-weight:700;font-size:14px;transition:color .15s}.nav-link:hover,.nav-link.active{color:var(--text)}.nav-link svg{width:24px;height:24px}.sidebar-lib{margin:0 8px 8px;background:var(--bg-elev);border-radius:var(--radius);display:grid;grid-template-rows:auto 1fr;min-height:0;padding:8px 0}.sidebar-lib-head{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 12px;font-weight:700;font-size:14px;color:var(--text-dim)}.sidebar-lib-list{overflow-y:auto;padding:0 8px 8px;display:flex;flex-direction:column;gap:2px}.sidebar-lib-list::-webkit-scrollbar{width:8px}.sidebar-lib-list::-webkit-scrollbar-thumb{background:var(--bg-elev-2);border-radius:4px}.sidebar-lib-empty{padding:12px 8px;color:var(--text-dim-2);font-size:12px;line-height:1.5}.sidebar-lib-item{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:4px;text-align:left;transition:background .15s}.sidebar-lib-item:hover{background:var(--bg-elev-2)}.sidebar-lib-item img{width:40px;height:40px;border-radius:4px;object-fit:cover;flex-shrink:0;background:#333}.main{background:linear-gradient(180deg,#2a2a2a 0%,var(--bg-elev) 260px);border-radius:var(--radius)}.main>*::-webkit-scrollbar{width:12px}.main>*::-webkit-scrollbar-thumb{background:var(--bg-elev-2);border-radius:6px;border:3px solid transparent;background-clip:padding-box}.page-title{font-size:32px;margin:24px 32px 16px;letter-spacing:-.5px}.section{margin:24px 32px}.section-title{font-size:22px;margin:24px 32px 12px;letter-spacing:-.3px}.state{padding:40px 32px}.topbar{padding:0 32px}.topbar-search{max-width:360px;padding:8px 14px}.topbar-search input{font-size:14px}.cards{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;padding:0 32px 8px}.card{padding:16px}.card:hover{background:var(--card-hover)}.card-cover{margin-bottom:12px}.card-cover img{box-shadow:0 8px 24px #00000080}.card-play{right:8px;bottom:8px;width:48px;height:48px;opacity:0;transform:translateY(8px);transition:all .2s}.card:hover .card-play{opacity:1;transform:translateY(0)}.card-play:hover{background:var(--accent-hover);transform:scale(1.05)}.card-play svg{width:22px;height:22px}.card-title{font-size:15px;margin-bottom:4px}.card-sub{font-size:13px}.track-list{margin:0 32px 24px}.track-row{grid-template-columns:40px 1fr 1fr 32px 60px 32px;gap:16px;padding:8px 12px;transition:background .15s}.track-row:hover{background:var(--bg-hover)}.track-head{display:grid}.track-index{width:40px}.track-index .idx{display:block}.track-row:hover .idx{visibility:hidden}.idx-play{width:24px;height:24px;opacity:0;transition:opacity .15s}.track-row:hover .idx-play{opacity:1}.track-thumb{width:40px;height:40px}.track-title{font-size:15px}.track-album{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim)}.track-heart,.track-queue{opacity:0;transition:color .15s,opacity .15s}.track-heart.on{opacity:1}.track-queue{display:flex}.track-row:hover .track-heart,.track-row:hover .track-queue{opacity:1}.track-heart:hover,.track-queue:hover{color:var(--text)}.track-duration{font-size:14px}.lib-hero{flex-direction:row;align-items:end;gap:24px;padding:32px}.lib-hero>div:last-child{padding-bottom:12px}.lib-hero-cover{width:200px;height:200px}.lib-hero .page-title{font-size:48px;margin:8px 0}.lib-actions{padding:16px 32px 8px;gap:12px}.btn-primary{padding:12px 24px}.btn-primary:hover:not(:disabled){background:var(--accent-hover);transform:scale(1.04)}.btn-ghost:hover{color:var(--text);border-color:var(--text-dim)}.q-head-row{padding-right:32px}.playerbar{background:var(--bg);grid-template-columns:minmax(180px,30%) 1fr minmax(180px,30%);padding:0 16px;gap:16px}.playerbar>.pb-center>.pb-seek{position:static}.pb-now{gap:14px}.pb-art{width:56px;height:56px}.pb-title{font-size:14px;font-weight:500}.pb-heart{width:32px;height:32px}.pb-heart:hover{color:var(--text)}.pb-center{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.pb-controls{justify-content:center;gap:16px}.pb-controls>.pb-btn:nth-child(1),.pb-controls>.pb-btn:nth-child(5){display:flex}.pb-btn{width:auto;height:auto;border-radius:0}.pb-btn:hover:not(:disabled){color:var(--text);background:transparent}.pb-btn svg{width:20px;height:20px}.pb-play{width:32px;height:32px}.pb-play:hover:not(:disabled){transform:scale(1.06)}.pb-play svg{width:16px;height:16px}.pb-seek{grid-template-columns:auto 1fr auto;gap:8px;max-width:720px}.pb-seek .pb-time{display:block;font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:40px;text-align:center}.pb-range{height:4px;background:linear-gradient(to right,var(--text) 0%,var(--text) var(--pct, 0%),#4d4d4d var(--pct, 0%),#4d4d4d 100%);border-radius:2px}.pb-range::-webkit-slider-thumb{transition:opacity .15s}.pb-range:hover{background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--pct, 0%),#4d4d4d var(--pct, 0%),#4d4d4d 100%)}.pb-range:hover::-webkit-slider-thumb{opacity:1}.pb-range:hover::-moz-range-thumb{opacity:1}.pb-right{gap:10px}.pb-mute-btn{display:flex}.pb-vol{display:block;max-width:100px}.pb-error{position:static}.pb-loading{display:block;min-height:14px}.mobnav{display:none}.section-subtitle{margin:12px 32px;font-size:16px}.hscroll{padding:0 32px 12px;gap:20px}.hscroll::-webkit-scrollbar{height:10px}.artist-card{width:180px;padding:16px}.artist-card:hover{background:var(--card-hover)}.artist-avatar{width:148px;height:148px;margin-bottom:14px;box-shadow:0 8px 24px #00000080}.artist-name{font-size:15px}.artist-hero{flex-direction:row;align-items:flex-end;gap:24px;padding:32px;text-align:left}.artist-back{display:none}.artist-hero-cover{width:200px;height:200px}.artist-hero-meta{align-items:flex-start;padding-bottom:12px}.artist-hero-name{font-size:56px;letter-spacing:-.8px}.artist-actions{padding:16px 32px}}.login-wrap{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:24px;padding-top:calc(24px + var(--safe-top));padding-bottom:calc(24px + var(--safe-bottom));background:radial-gradient(circle at 50% 0%,#1f1f1f,#000 60%);overflow:auto}.login-card{width:100%;max-width:380px;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;padding:28px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 60px #0009}.login-brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px;margin-bottom:4px}.login-title{margin:0 0 8px;font-size:22px;font-weight:800;letter-spacing:-.3px}.login-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-dim)}.login-field input{background:var(--bg-elev-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:12px 14px;font-size:16px;outline:none;transition:border-color .15s}.login-field input:focus{border-color:var(--accent)}.login-error{background:#e221341f;color:var(--danger);border-radius:6px;padding:10px 12px;font-size:13px}.login-btn{justify-content:center;margin-top:4px;padding:12px 22px}.nav-link-btn{background:none;border:0;width:100%;text-align:left;font:inherit;cursor:pointer}.section-subtitle{font-size:15px;font-weight:700;margin:8px 16px 10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px}.hscroll{display:flex;gap:12px;padding:0 12px 8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}.hscroll::-webkit-scrollbar{height:6px}.hscroll::-webkit-scrollbar-thumb{background:var(--bg-elev-2);border-radius:3px}.hscroll>*{scroll-snap-align:start;flex-shrink:0}.artist-card{width:130px;padding:10px;border-radius:var(--radius);background:var(--card);display:block;text-align:center;transition:background .2s;cursor:pointer;color:inherit;text-decoration:none}.artist-card:active{background:var(--card-hover)}.artist-avatar{width:110px;height:110px;border-radius:50%;overflow:hidden;margin:0 auto 10px;background:#333;box-shadow:0 4px 12px #00000080}.artist-avatar img{width:100%;height:100%;object-fit:cover}.artist-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-dim)}.artist-avatar-fallback svg{width:40%;height:40%}.artist-name{font-weight:700;font-size:14px;margin-bottom:2px}.artist-sub{font-size:12px}.artist-page{position:relative}.artist-hero{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 16px 12px;background:linear-gradient(180deg,#333 0%,transparent 100%);text-align:center;position:relative}.artist-back{position:absolute;top:8px;left:8px;width:36px;height:36px;border-radius:50%;background:#0000008c;color:var(--text);display:flex;align-items:center;justify-content:center;z-index:2}.artist-back:active{background:#000000bf}.artist-hero-cover{width:160px;height:160px;border-radius:50%;object-fit:cover;box-shadow:0 8px 24px #0009;background:#333}.artist-hero-meta{display:flex;flex-direction:column;align-items:center;gap:4px}.artist-hero-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim)}.artist-hero-name{font-size:28px;font-weight:800;margin:0;letter-spacing:-.4px;line-height:1.1}.artist-hero-count{margin-top:2px}.artist-actions{padding:12px 16px;display:flex;gap:10px}.queue-panel{position:fixed;top:0;left:0;right:0;bottom:calc(var(--playerbar-h) + var(--mobnav-h) + var(--safe-bottom));background:linear-gradient(180deg,#1f1f1f 0%,var(--bg-elev) 260px);z-index:20;display:flex;flex-direction:column;transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.7,.2,1);visibility:hidden;padding-top:var(--safe-top);box-shadow:0 -8px 24px #00000080}.queue-panel.open{transform:translateY(0);visibility:visible}.queue-panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}.queue-panel-title{font-size:15px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--text-dim)}.queue-panel-head .pb-btn{width:40px;height:40px;border-radius:50%;color:var(--text)}.queue-panel-head .pb-btn:active{background:var(--bg-hover)}.queue-panel-body{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0;padding-bottom:16px}.queue-panel-body::-webkit-scrollbar{width:8px}.queue-panel-body::-webkit-scrollbar-thumb{background:var(--bg-elev-2);border-radius:4px}@media (min-width: 900px){.queue-panel{bottom:calc(var(--playerbar-h) + 8px);left:calc(var(--sidebar-w) + 8px);right:8px;top:8px;border-radius:var(--radius);overflow:hidden}.queue-panel-head{padding:20px 32px}.queue-panel-body::-webkit-scrollbar{width:12px}.queue-panel-body::-webkit-scrollbar-thumb{background:var(--bg-elev-2);border-radius:6px;border:3px solid transparent;background-clip:padding-box}}