:root{--bg:#0f0f12;--panel:#17171c;--elev:#212128;--hover:#2a2a33;--line:#2c2c35;--text:#f4f4f6;--muted:#a3a3ad;--accent:#00c860;--accent-glow:#00c86059;--accent-ink:#03140a;--radius:10px;--player-h:84px;--sidebar-w:232px;--queue-w:340px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}h1,h2,h3{margin:0;line-height:1.15}code{background:var(--elev);border-radius:4px;padding:2px 6px}.muted{color:var(--muted)}.link:hover{text-decoration:underline}.strong{color:var(--text);font-weight:700}.splash{height:100%;color:var(--muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px;font-size:16px;display:flex}.splash img{filter:drop-shadow(0 0 24px var(--accent-glow))}.splash.loading img{animation:1.4s ease-in-out infinite pulse}.splash.error p{color:#ff8a8a}.app{grid-template-columns:var(--sidebar-w) minmax(0, 1fr) auto;grid-template-rows:minmax(0, 1fr) var(--player-h);gap:8px;height:100dvh;padding:8px 8px 0;display:grid}.sidebar{background:var(--panel);border-radius:var(--radius);flex-direction:column;grid-area:1/1;gap:18px;padding:20px 12px;display:flex}.logo{padding:0 8px}.brand{align-items:center;gap:10px;display:inline-flex}.brand img{filter:drop-shadow(0 0 10px var(--accent-glow))}.brand-text{letter-spacing:-.02em;font-size:22px;font-weight:800}.brand-text span{color:var(--accent)}.topbar-logo{display:none}.sidebar nav{flex-direction:column;gap:2px;display:flex}.sidebar nav a{color:var(--muted);border-radius:8px;align-items:center;gap:14px;padding:10px 12px;font-weight:600;transition:color .15s,background .15s;display:flex}.sidebar nav a:hover{color:var(--text)}.sidebar nav a.active{color:var(--text);background:var(--elev)}.lib-stats-wrap{flex-direction:column;gap:6px;margin-top:auto;display:flex}.lib-stats-toggle{width:100%;color:var(--muted);border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-size:12.5px;font-weight:600;transition:color .15s,background .15s;display:flex}.lib-stats-toggle:hover{color:var(--text);background:var(--elev)}.lib-stats-toggle .chev{margin-left:auto;transition:transform .2s;transform:rotate(180deg)}.lib-stats-toggle.open .chev{transform:none}.lib-stats{background:var(--elev);color:var(--muted);border-radius:8px;padding:14px;font-size:12px;animation:.18s ease-out stats-in}@keyframes stats-in{0%{opacity:0;transform:translateY(6px)}}.lib-stats-label{text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;font-size:11px;font-weight:700}.lib-stats-row{flex-wrap:wrap;gap:4px 12px;display:flex}.lib-stats-row b{color:var(--text);margin-right:3px;font-size:15px;font-weight:700}.lib-stats-updated{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}.content{background:var(--panel);border-radius:var(--radius);flex-direction:column;grid-area:1/2;min-height:0;display:flex;overflow:hidden}main{flex:1;min-height:0;overflow-y:auto}.topbar{align-items:center;gap:10px;padding:14px 24px;display:flex}.topbar .search{flex:1}.search{background:var(--elev);max-width:440px;height:44px;color:var(--muted);border:1px solid #0000;border-radius:999px;align-items:center;gap:10px;padding:0 14px;transition:border-color .15s,background .15s;display:flex}.search:focus-within{border-color:var(--muted);background:var(--hover)}.search input{min-width:0;color:var(--text);font:inherit;background:0 0;border:0;outline:none;flex:1;font-size:15px}.page{padding:8px 24px 40px}.empty{text-align:center;padding:80px 24px}.empty h1{margin-bottom:12px;font-size:26px}.home-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin:12px 0 8px;display:flex}.home-head h1{letter-spacing:-.02em;margin-bottom:6px;font-size:30px}.btn-pill{background:var(--accent);color:var(--accent-ink);border-radius:999px;align-items:center;gap:8px;padding:10px 18px;font-weight:700;transition:transform .1s,filter .15s;display:inline-flex}.btn-pill:hover{filter:brightness(1.08);transform:scale(1.02)}.section{margin-top:28px}.section-head{justify-content:space-between;align-items:baseline;margin-bottom:14px;display:flex}.section-head h2{letter-spacing:-.01em;font-size:22px}.page-header{align-items:flex-end;gap:24px;padding:20px 0 24px;display:flex}.page-art{border-radius:8px;flex:none;width:220px;overflow:hidden;box-shadow:0 8px 40px #00000080}.page-art .round{border-radius:50%;overflow:hidden}:is(.page-art:has(.round),.page-art:has(.artist-placeholder)){border-radius:50%}.artist-placeholder{aspect-ratio:1;background:var(--elev);color:var(--muted);place-items:center;display:grid}.page-info{min-width:0}.page-label{font-size:13px;font-weight:600}.page-info h1{letter-spacing:-.03em;overflow-wrap:anywhere;margin:6px 0 12px;font-size:clamp(32px,5vw,64px);font-weight:900}.page-info h1.long{font-size:clamp(26px,3.4vw,44px)}.page-meta{color:var(--muted)}.play-buttons{align-items:center;gap:18px;margin-top:20px;display:flex}.btn-play{background:var(--accent);width:56px;height:56px;color:var(--accent-ink);border-radius:50%;place-items:center;transition:transform .1s,filter .15s;display:grid}.btn-play:hover{filter:brightness(1.08);transform:scale(1.05)}.btn-icon{color:var(--muted);place-items:center;width:40px;height:40px;display:grid}.btn-icon:hover{color:var(--text)}.toolbar{justify-content:flex-end;margin-bottom:8px;display:flex}.select{color:var(--muted);align-items:center;gap:8px;display:flex}.select select{background:var(--elev);color:var(--text);border:1px solid var(--line);font:inherit;border-radius:6px;padding:6px 8px}.grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;display:grid}.card{border-radius:var(--radius);min-width:0;padding:12px;transition:background .2s}.card:hover{background:var(--elev)}.card-cover{border-radius:8px;margin-bottom:10px;position:relative;overflow:hidden;box-shadow:0 6px 20px #00000059}.card-cover.round{border-radius:50%}.card-play{background:var(--accent);width:46px;height:46px;color:var(--accent-ink);opacity:0;border-radius:50%;place-items:center;transition:opacity .2s,transform .2s;display:grid;position:absolute;bottom:8px;right:8px;transform:translateY(8px);box-shadow:0 6px 16px #0006}.card:hover .card-play,.card-play:focus-visible{opacity:1;transform:none}.card-title{white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.card-sub{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:13px;overflow:hidden}.artist-card{text-align:center}.cover{aspect-ratio:1;object-fit:cover;background:var(--elev);width:100%;display:block}.cover-empty{color:#ffffff8c;place-items:center;display:grid}.tracks{flex-direction:column;display:flex}.track{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;grid-template-columns:36px minmax(0,1fr) auto 52px;align-items:center;gap:12px;padding:6px 12px;display:grid}.tracks.with-album .track{grid-template-columns:36px minmax(0,3fr) minmax(0,2fr) auto 52px}.track:hover{background:var(--hover)}.track.current .track-title{color:var(--accent)}.track-num{color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;place-items:center;display:grid}.track-num .p{color:var(--text);display:none}.track:hover .track-num .n{display:none}.track:hover .track-num .p{display:grid}.track-main{align-items:center;gap:12px;min-width:0;display:flex}.track-cover{border-radius:4px;flex:none}.track-text{min-width:0}.track-title,.track-artist,.track-album{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.track-title{font-size:15px}.track-artist,.track-album{color:var(--muted);font-size:13px}.track:hover .track-artist,.track:hover .track-album{color:var(--text)}.track-actions{opacity:0;gap:4px;transition:opacity .15s;display:flex}.track:hover .track-actions{opacity:1}.track-actions button{width:32px;height:32px;color:var(--muted);border-radius:50%;place-items:center;display:grid}.track-actions button:hover{color:var(--text);background:var(--elev)}.track-dur{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}.eq{align-items:flex-end;gap:2px;height:14px;display:inline-flex}.eq i{background:var(--accent);border-radius:1px;width:3px;animation:.9s ease-in-out infinite eq}.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}@keyframes eq{0%,to{height:4px}50%{height:14px}}.queue{width:var(--queue-w);background:var(--panel);border-radius:var(--radius);flex-direction:column;grid-area:1/3;min-height:0;display:flex}.queue-head{justify-content:space-between;align-items:center;padding:18px 16px 10px;display:flex}.queue-head h2{font-size:18px}.queue-body{padding:0 8px 16px;overflow-y:auto}.queue-body h3{padding:14px 8px 8px;font-size:14px}.queue-sub{justify-content:space-between;align-items:baseline;padding-right:8px;display:flex}.queue-sub .link{color:var(--muted);font-size:13px}.q-row{cursor:pointer;border-radius:6px;align-items:center;gap:12px;padding:6px 8px;display:flex}.q-row .cover{border-radius:4px;flex:none}.q-row:hover{background:var(--hover)}.q-row.current{cursor:default}.q-row.current .q-title{color:var(--accent)}.q-text{flex:1;min-width:0}.q-title,.q-artist{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.q-artist{color:var(--muted);font-size:13px}.q-remove{color:var(--muted);opacity:0;border-radius:50%;place-items:center;width:28px;height:28px;display:grid}.q-row:hover .q-remove{opacity:1}.q-remove:hover{color:var(--text);background:var(--elev)}.player{grid-area:2/1/auto/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);align-items:center;gap:16px;padding:0 8px;display:grid;position:relative}.mini-progress,.mobile-ctl{display:none}.now{align-items:center;gap:12px;min-width:0;display:flex}.now-cover .cover{border-radius:6px}.now-text{min-width:0}.now-title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.now-artist{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;overflow:hidden}.center{flex-direction:column;align-items:center;gap:4px;display:flex}.controls{align-items:center;gap:18px;display:flex}.ctl{color:var(--muted);border-radius:50%;place-items:center;width:34px;height:34px;transition:color .15s;display:grid;position:relative}.ctl:hover{color:var(--text)}.ctl.on{color:var(--accent)}.ctl.on:after{content:"";background:currentColor;border-radius:50%;width:4px;height:4px;position:absolute;bottom:0}.ctl-main{background:var(--text);color:#000;border-radius:50%;place-items:center;width:38px;height:38px;transition:transform .1s;display:grid}.ctl-main:hover{transform:scale(1.06)}.ctl-main.loading{animation:1s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.55}}.controls.big{justify-content:center;gap:22px}.controls.big .ctl-main{width:68px;height:68px}.controls.big .ctl{width:48px;height:48px}.seek{align-items:center;gap:8px;width:100%;max-width:620px;display:flex}.seek .slider{flex:1}.time{color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;min-width:38px;font-size:12px}.right{justify-content:flex-end;align-items:center;gap:8px;display:flex}.volume{align-items:center;gap:4px;width:150px;display:flex}.volume .slider{flex:1}.slider{appearance:none;cursor:pointer;--fill:var(--text);background:0 0;height:14px;margin:0}.slider:hover{--fill:var(--accent)}.slider::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--fill) var(--p), #4a4a55 var(--p));border-radius:2px;height:4px}.slider::-moz-range-track{background:linear-gradient(to right, var(--fill) var(--p), #4a4a55 var(--p));border-radius:2px;height:4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;opacity:0;background:#fff;border-radius:50%;width:12px;height:12px;margin-top:-4px;transition:opacity .15s}.slider::-moz-range-thumb{opacity:0;background:#fff;border:0;border-radius:50%;width:12px;height:12px}.slider:hover::-webkit-slider-thumb{opacity:1}.slider:focus-visible::-webkit-slider-thumb{opacity:1}.slider:hover::-moz-range-thumb{opacity:1}.slider:focus-visible::-moz-range-thumb{opacity:1}.toast{left:50%;bottom:calc(var(--player-h) + 16px);color:#fff;z-index:50;background:#e5484d;border-radius:8px;max-width:calc(100vw - 32px);padding:10px 16px;font-weight:600;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #0006}.mobile-nav{display:none}.nowplaying{z-index:40;background:linear-gradient(180deg, #2b2b36 0%, var(--bg) 70%);padding:max(16px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));flex-direction:column;gap:20px;animation:.25s ease-out slideup;display:flex;position:fixed;inset:0}@keyframes slideup{0%{opacity:0;transform:translateY(40px)}}.np-top{justify-content:space-between;align-items:center;display:flex}.np-from{text-align:center;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;padding:0 8px;font-size:12px;font-weight:600;overflow:hidden}.np-cover{flex:1;place-items:center;min-height:0;display:grid}.np-cover .cover{border-radius:10px;width:min(100%,52vh,480px);box-shadow:0 16px 60px #0000008c}.np-title{letter-spacing:-.01em;font-size:24px;font-weight:800}.np-artist{color:var(--muted);margin-top:4px;font-size:16px}.np-seek{max-width:none}@media (width<=860px){:root{--player-h:64px}.app{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0, 1fr) var(--player-h) auto;gap:0;padding:0}.sidebar{display:none}.content{border-radius:0;grid-column:1}.topbar{padding:10px 16px}.topbar-logo{flex:none;display:block}.topbar-logo img{filter:drop-shadow(0 0 8px var(--accent-glow));display:block}.search{max-width:none}.page{padding:4px 16px 24px}.queue{inset:0 0 calc(var(--player-h) + 60px) 0;z-index:30;border-radius:0;width:auto;position:fixed}.player{background:#26262f;border-radius:8px;grid-column:1;grid-template-columns:minmax(0,1fr) auto;align-self:center;height:56px;margin:0 8px;padding:0 6px;overflow:hidden}.player .center,.player .right{display:none}.mini-progress{background:var(--text);height:2px;display:block;position:absolute;bottom:0;left:0}.now{cursor:pointer}.now-cover{pointer-events:none}.now-cover .cover{border-radius:4px;width:42px!important;height:42px!important}.mobile-ctl{align-items:center;display:flex}.mobile-ctl .ctl{color:var(--text);width:42px;height:42px}.mobile-nav{padding:6px 0 max(6px, env(safe-area-inset-bottom));background:linear-gradient(#000000d9,#000 60%);grid-template-columns:repeat(4,1fr);display:grid}.mobile-nav a,.mobile-nav button{color:var(--muted);flex-direction:column;align-items:center;gap:2px;padding:4px 0;font-size:11px;display:flex}.mobile-nav .active{color:var(--text)}.toast{bottom:calc(var(--player-h) + 72px)}.page-header{flex-direction:column;align-items:flex-start;gap:16px}.page-art{align-self:center;width:min(62vw,240px)}.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:4px}.card{padding:8px}.card-play{display:none}.tracks.with-album .track,.track{grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:6px 4px}.track-album,.track-dur{display:none}.track-actions{opacity:1}.track:hover{background:0 0}.track:hover .track-num .n{display:grid}.track:hover .track-num .p{display:none}}:root{--scroll-thumb:#ffffff24;--scroll-thumb-hover:#ffffff52}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar-track{margin:8px 0}::-webkit-scrollbar-button{width:0;height:0;display:none}::-webkit-scrollbar-thumb{background-color:var(--scroll-thumb);background-clip:padding-box;border:3px solid #0000;border-radius:999px;min-height:40px}:hover::-webkit-scrollbar-thumb{background-color:var(--scroll-thumb-hover)}::-webkit-scrollbar-thumb:active{background-color:#ffffff80}@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}main:hover,.queue-body:hover,.nowplaying:hover{scrollbar-color:var(--scroll-thumb-hover) transparent}}.login{background:radial-gradient(ellipse at 50% 30%, #00c8601f, transparent 60%), var(--bg);place-items:center;min-height:100%;padding:24px 16px;display:grid}.login-card{text-align:center;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:360px;display:flex}.login-card img{filter:drop-shadow(0 0 24px var(--accent-glow))}.login-card h1{font-size:32px}.login-card p{margin:0 0 8px}.login-card input{border:1px solid var(--line);background:var(--elev);width:100%;height:48px;color:var(--text);font:inherit;border-radius:10px;outline:none;padding:0 16px;font-size:16px;transition:border-color .15s}.login-card input:focus{border-color:var(--accent)}.login-card .btn-pill{justify-content:center;width:100%;height:48px;font-size:15px}.login-card .btn-pill:disabled{opacity:.5;cursor:default;transform:none}.login-error{color:#ff8a8a;text-align:left;width:100%;font-size:13px}.login-hint{font-size:12.5px;margin-top:4px!important}.avatar{background:var(--accent);width:32px;height:32px;color:var(--accent-ink);border-radius:50%;flex:none;place-items:center;font-size:14px;font-weight:800;display:grid}.account{border-top:1px solid var(--line);align-items:center;gap:10px;padding:10px 6px 0 10px;display:flex}.account-text{flex:1;min-width:0}.account-name{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;overflow:hidden}.account-user{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.account-menu{flex:none;display:none;position:relative}.account-menu>.avatar{width:36px;height:36px}.account-backdrop{z-index:60;position:fixed;inset:0}.account-pop{z-index:61;background:var(--elev);border:1px solid var(--line);border-radius:10px;min-width:200px;padding:12px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 12px 32px #00000080}.account-logout{width:100%;color:var(--text);border-radius:6px;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;font-weight:600;display:flex}.account-logout:hover{background:var(--hover)}@media (width<=860px){.account-menu{display:block}}.like{width:32px;height:32px;color:var(--muted);border-radius:50%;flex:none;place-items:center;transition:color .15s,transform .1s;display:grid}.like:hover{color:var(--text)}.like.on{color:var(--accent)}.like:active{transform:scale(.85)}.track-actions{opacity:1}.track-actions .like:not(.on),.track-actions .more{opacity:0}.track:hover .track-actions .like,.track:hover .track-actions .more,.track-actions .like:focus-visible,.track-actions .more:focus-visible{opacity:1}.track-actions .more{width:32px;height:32px;color:var(--muted);border-radius:50%;place-items:center;display:grid}.track-actions .more:hover{color:var(--text);background:var(--elev)}.track-note{color:var(--muted)}.track.dragging{opacity:.4}.track.drop-above{box-shadow:inset 0 2px 0 var(--accent)}.track.drop-below{box-shadow:inset 0 -2px 0 var(--accent)}.hint{margin-top:16px;padding:0 12px;font-size:12px}.now-like{margin-left:4px}.np-info{align-items:center;gap:12px;display:flex}.np-info-text{flex:1;min-width:0}.page-info h1.editable{cursor:pointer}.page-info h1.editable:hover{text-underline-offset:6px;text-decoration:underline;text-decoration-thickness:2px}.empty.small{padding:40px 12px}.empty.small p{margin:0 0 8px}.empty.small .btn-pill{margin-top:12px}.menu-backdrop{z-index:90;position:fixed;inset:0}.menu{background:#2a2a33;border:1px solid #3a3a45;border-radius:8px;min-width:230px;max-width:min(320px,100vw - 16px);max-height:min(420px,100vh - 16px);padding:4px;animation:.12s ease-out menu-in;position:fixed;overflow-y:auto;box-shadow:0 16px 40px #0000008c}@keyframes menu-in{0%{opacity:0;transform:scale(.97)}}.menu-item{text-align:left;width:100%;color:var(--text);border-radius:4px;align-items:center;gap:12px;padding:9px 10px;font-size:14px;display:flex}.menu-item:hover,.menu-item:focus-visible{background:#3a3a45;outline:none}.menu-item.danger{color:#ff8a8a}.menu-icon{width:16px;color:var(--muted);flex:none;place-items:center;display:grid}.menu-item.danger .menu-icon{color:inherit}.menu-label{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.menu-back{color:var(--muted);border-bottom:1px solid #3a3a45;border-radius:4px 4px 0 0;margin-bottom:4px;font-size:13px;font-weight:600}.menu-divider{background:#3a3a45;height:1px;margin:4px 6px}.modal-backdrop{z-index:95;background:#0009;place-items:center;padding:16px;animation:.15s ease-out fade-in;display:grid;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}}.modal{background:#24242c;border-radius:12px;width:100%;max-width:400px;padding:24px;box-shadow:0 24px 60px #0009}.modal h2{margin-bottom:16px;font-size:20px}.modal p{margin:0}.modal input{border:1px solid var(--line);background:var(--elev);width:100%;height:44px;color:var(--text);font:inherit;border-radius:8px;outline:none;padding:0 14px;font-size:15px}.modal input:focus{border-color:var(--accent)}.modal-actions{justify-content:flex-end;gap:10px;margin-top:22px;display:flex}.btn-ghost{color:var(--muted);border-radius:999px;padding:10px 18px;font-weight:700}.btn-ghost:hover{color:var(--text)}.btn-danger{color:#fff;background:#e5484d;border-radius:999px;padding:10px 18px;font-weight:700}.btn-danger:hover{filter:brightness(1.1)}.modal .btn-pill:disabled{opacity:.5;cursor:default}.toaster{left:50%;bottom:calc(var(--player-h) + 16px);z-index:80;pointer-events:none;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);display:flex;position:fixed;transform:translate(-50%)}.toaster .toast{animation:.2s ease-out toast-in;position:static;transform:none}.toaster .toast.info{color:#111;background:#f4f4f6}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}}.side-lib{border-top:1px solid var(--line);flex-direction:column;flex:1;min-height:0;padding-top:12px;display:flex}.side-lib-head{justify-content:space-between;align-items:center;padding:0 4px 6px 12px;display:flex}.side-lib-title{color:var(--muted);align-items:center;gap:12px;font-weight:700;display:flex}.side-lib-title:hover,.side-lib-title.active{color:var(--text)}.side-lib-list{flex-direction:column;flex:1;gap:2px;min-height:0;display:flex;overflow-y:auto}.side-item{border-radius:6px;align-items:center;gap:10px;padding:6px 8px;display:flex}.side-item:hover{background:var(--elev)}.side-item.active{background:var(--hover)}.side-item .cover{border-radius:4px;flex:none}.side-item-text{flex-direction:column;min-width:0;display:flex}.side-item-name,.side-item-sub{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.side-item-name{font-size:13.5px;font-weight:600}.side-item.active .side-item-name{color:var(--accent)}.side-item-sub{color:var(--muted);font-size:12px}.mosaic{grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.mosaic .cover{border-radius:0!important}.liked-cover{color:#fff;background:linear-gradient(135deg,#4b2bd6,#8fd3c9);place-items:center;display:grid}.playlist-empty{color:var(--muted);background:#2a2a33}.recent{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;display:grid}.recent-item{text-align:left;background:#ffffff0f;border-radius:6px;align-items:center;gap:12px;padding-right:12px;transition:background .15s;display:flex;overflow:hidden}.recent-item:hover{background:#ffffff1f}.recent-item .cover{flex:none}.recent-text{flex-direction:column;min-width:0;display:flex}.recent-title,.recent-artist{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.recent-title{font-size:13.5px;font-weight:700}.recent-artist{color:var(--muted);font-size:12px}@media (width<=860px){.mobile-nav{grid-template-columns:repeat(5,1fr)}.recent{grid-template-columns:1fr 1fr}.track-actions .like:not(.on){display:none}.track-actions .more{opacity:1}.now-like{display:none}}.tracks.reorderable .track{grid-template-columns:24px 28px minmax(0,1fr) auto 52px}.tracks.reorderable.with-album .track{grid-template-columns:24px 28px minmax(0,3fr) minmax(0,2fr) auto 52px}.drag-handle{width:24px;height:36px;color:var(--muted);opacity:.45;cursor:grab;touch-action:none;border-radius:4px;place-items:center;transition:opacity .15s,color .15s;display:grid}.drag-handle *{pointer-events:none;touch-action:none}.track:hover .drag-handle,.drag-handle:focus-visible{opacity:1}.drag-handle:hover{color:var(--text)}.tracks.is-dragging,.tracks.is-dragging *{-webkit-user-select:none;user-select:none;cursor:grabbing!important}.tracks.is-dragging .track:hover{background:0 0}.track.dragging{opacity:1;outline:1px solid var(--accent);background:var(--hover)!important}@media (width<=860px){.tracks.reorderable .track,.tracks.reorderable.with-album .track{grid-template-columns:28px 24px minmax(0,1fr) auto}.drag-handle{opacity:.8;width:28px;height:44px}}.nav-live{background:var(--accent);width:8px;height:8px;box-shadow:0 0 0 3px var(--accent-glow);border-radius:50%;margin-left:auto;animation:1.6s ease-in-out infinite pulse}.join-code{gap:10px;max-width:420px;margin:4px 0 8px;display:flex}.join-code input{border:1px solid var(--line);background:var(--elev);min-width:0;height:44px;color:var(--text);font:inherit;letter-spacing:.12em;text-transform:uppercase;border-radius:8px;outline:none;flex:1;padding:0 14px;font-size:15px}.join-code input:focus{border-color:var(--accent)}.join-code input::placeholder{letter-spacing:normal;text-transform:none}.btn-ghost-border{color:var(--text);white-space:nowrap;border:1px solid #5a5a66;border-radius:999px;align-items:center;gap:8px;padding:10px 18px;font-weight:700;transition:border-color .15s,transform .1s;display:inline-flex}.btn-ghost-border:hover:not(:disabled){border-color:var(--text);transform:scale(1.02)}.btn-ghost-border:disabled{opacity:.45;cursor:default}.room-cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;display:grid}.room-card{border-radius:var(--radius);background:#ffffff0a;align-items:center;gap:14px;min-width:0;padding:12px;transition:background .15s;display:flex}.room-card:hover{background:var(--elev)}.room-card .cover{border-radius:6px;flex:none}.room-card-text{min-width:0}.room-card-name{white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:800;overflow:hidden}.room-card-sub,.room-card-np{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:12.5px;overflow:hidden}.live-dot{color:var(--accent);font-weight:700}.live-dot:before{content:"";background:var(--accent);vertical-align:1px;border-radius:50%;width:7px;height:7px;margin-right:6px;animation:1.6s ease-in-out infinite pulse;display:inline-block}.room-banner{color:#ffd27a;background:#4a3a10;border-radius:8px;margin:8px 0;padding:8px 14px;font-weight:600}.room-members{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.member{background:var(--elev);border-radius:999px;align-items:center;gap:8px;padding:4px 12px 4px 4px;font-size:13px;font-weight:600;display:inline-flex}.member .avatar{width:26px;height:26px;font-size:12px}.member.me{outline:1px solid var(--accent)}.member .crown{color:#f5c542}.room-mode{color:var(--muted);align-items:center;gap:10px;margin-bottom:18px;font-size:13.5px;display:flex}.switch{cursor:pointer;color:var(--text);align-items:center;gap:10px;display:inline-flex}.switch input{appearance:none;cursor:pointer;background:#4a4a55;border-radius:999px;flex:none;width:38px;height:22px;transition:background .15s;position:relative}.switch input:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:3px;left:3px}.switch input:checked{background:var(--accent)}.switch input:checked:after{transform:translate(16px)}.room-grid{grid-template-columns:minmax(0,2fr) minmax(240px,1fr);align-items:start;gap:24px;display:grid}.room-queue h3,.room-activity h3{margin:10px 0 8px;font-size:15px}.rq-row{border-radius:6px;align-items:center;gap:12px;padding:6px 8px;display:flex}.rq-row.clickable{cursor:pointer}.rq-row:hover{background:var(--hover)}.rq-row.current{background:#00c8601a}.rq-row.current .rq-title{color:var(--accent)}.rq-row .cover{border-radius:4px;flex:none}.rq-text{flex:1;min-width:0}.rq-title,.rq-sub{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.rq-title{font-weight:600}.rq-sub{color:var(--muted);font-size:12.5px}.rq-remove,.rq-more{width:30px;height:30px;color:var(--muted);opacity:0;border-radius:50%;flex:none;place-items:center;display:grid}.rq-row:hover .rq-remove,.rq-row:hover .rq-more{opacity:1}.rq-remove:hover,.rq-more:hover{color:var(--text);background:var(--elev)}.rq-empty{padding:4px 8px 8px;font-size:13px}.room-activity{border-radius:var(--radius);background:#ffffff08;max-height:460px;padding:4px 14px 12px;overflow-y:auto}.activity{border-bottom:1px solid #ffffff0a;gap:10px;padding:5px 0;font-size:13px;display:flex}.activity-time{color:var(--muted);font-variant-numeric:tabular-nums;flex:none}.room-chip{background:var(--accent);color:var(--accent-ink);white-space:nowrap;z-index:5;text-overflow:ellipsis;border-radius:999px;align-items:center;gap:6px;max-width:calc(100% - 24px);padding:3px 12px;font-size:12px;font-weight:700;display:inline-flex;position:absolute;top:-12px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 4px 14px #0006}.room-chip.offline{background:#d9a52b}.controls.locked .ctl:disabled,.controls.locked .ctl-main:disabled,.mobile-ctl .ctl:disabled{opacity:.35;cursor:not-allowed}.controls.locked .ctl-main:disabled{transform:none}.seek.locked .slider{pointer-events:none;opacity:.5}.gesture-gate{z-index:70;background:#0000008c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.gesture-gate .btn-pill{padding:14px 22px;font-size:16px}@media (width<=860px){.room-grid{grid-template-columns:minmax(0,1fr)}.rq-remove,.rq-more{opacity:1}.room-chip{top:-10px}.player{overflow:visible}}.room-chat{border-radius:var(--radius);background:#ffffff08;flex-direction:column;height:min(560px,70vh);padding:4px 12px 12px;display:flex}.room-chat h3{margin:10px 2px 8px;font-size:15px}.chat-list{flex-direction:column;flex:1;gap:2px;min-height:0;padding-right:4px;display:flex;overflow-y:auto}.chat-empty{text-align:center;margin:auto;font-size:13px}.chat-event{color:var(--muted);text-align:center;justify-content:center;gap:8px;padding:4px 2px;font-size:12px;display:flex}.chat-event b{color:var(--text);font-weight:600}.chat-time{color:var(--muted);font-variant-numeric:tabular-nums;flex:none;font-size:11px}.chat-msg{flex-direction:column;align-items:flex-start;max-width:85%;margin-top:8px;display:flex}.chat-msg.grouped{margin-top:2px}.chat-msg.mine{align-self:flex-end;align-items:flex-end}.chat-meta{align-items:baseline;gap:8px;margin:0 4px 2px;display:flex}.chat-name{font-size:12px;font-weight:700}.chat-bubble{background:var(--elev);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:14px;padding:7px 12px;font-size:14px;line-height:1.4}.chat-msg.mine .chat-bubble{background:var(--accent);color:var(--accent-ink)}.chat-input{gap:8px;margin-top:10px;display:flex}.chat-input input{border:1px solid var(--line);background:var(--elev);min-width:0;height:42px;color:var(--text);font:inherit;border-radius:999px;outline:none;flex:1;padding:0 14px;font-size:15px}.chat-input input:focus{border-color:var(--accent)}.chat-send{background:var(--accent);width:42px;height:42px;color:var(--accent-ink);border-radius:50%;flex:none;place-items:center;display:grid}.chat-send:disabled{opacity:.4;cursor:default}.react-bar{flex-wrap:wrap;gap:6px;display:flex}.room-reactions{margin:-6px 0 16px}.np-reactions{justify-content:center}.react-btn{background:var(--elev);border-radius:50%;place-items:center;width:42px;height:42px;font-size:21px;line-height:1;transition:transform .12s,background .15s;display:grid}.react-btn:hover{background:var(--hover);transform:scale(1.12)}.react-btn:active{transform:scale(.9)}.react-layer{right:24px;bottom:calc(var(--player-h) + 20px);pointer-events:none;z-index:60;width:180px;height:55vh;position:fixed}.react-float{flex-direction:column;align-items:center;animation:2.8s cubic-bezier(.2,.6,.35,1) forwards react-up;display:flex;position:absolute;bottom:0}.react-emoji{filter:drop-shadow(0 4px 10px #0006);font-size:34px;line-height:1}.react-name{color:#fff;white-space:nowrap;background:#0009;border-radius:999px;margin-top:2px;padding:1px 6px;font-size:11px;font-weight:700}@keyframes react-up{0%{opacity:0;transform:translate(0)scale(.6)}10%{opacity:1;transform:translateY(-6vh)scale(1.1)}70%{opacity:1}to{transform:translate(var(--drift), -50vh) scale(1);opacity:0}}@media (prefers-reduced-motion:reduce){.react-float{animation:2.4s ease-out forwards react-fade}@keyframes react-fade{0%,70%{opacity:1}to{opacity:0}}}.chip-unread{background:var(--accent-ink);color:var(--accent);border-radius:999px;margin-left:4px;padding:0 7px;font-size:11px}.room-tabs{display:none}.tab-badge{background:var(--accent);color:var(--accent-ink);border-radius:999px;margin-left:6px;padding:0 6px;font-size:11px}@media (width<=860px){.room-tabs{gap:6px;margin-bottom:12px;display:flex}.room-tabs button{background:var(--elev);color:var(--muted);border-radius:999px;flex:1;justify-content:center;align-items:center;gap:6px;padding:9px 12px;font-weight:700;display:inline-flex}.room-tabs button.active{background:var(--text);color:#000}.room-grid .tab-hidden{display:none}.room-chat{height:min(520px,100dvh - 260px)}.react-layer{width:140px;right:8px;bottom:calc(var(--player-h) + 70px)}.react-btn{width:46px;height:46px}.room-page .page-header{flex-direction:row;align-items:flex-start;gap:14px;padding:12px 0 14px}.room-page .page-art{border-radius:8px;align-self:flex-start;width:92px}.room-page .page-info h1,.room-page .page-info h1.long{margin:4px 0 6px;font-size:26px}.room-page .page-label,.room-page .page-meta{font-size:12px}.room-page .play-buttons{flex-wrap:wrap;gap:8px;margin-top:12px}.room-page .play-buttons .btn-pill,.room-page .play-buttons .btn-ghost-border{padding:8px 14px;font-size:13px}.room-page .room-members{margin-bottom:10px}.room-page .room-mode{margin-bottom:12px}.room-page .room-reactions{justify-content:space-between;margin:0 0 12px}.room-page .react-btn{width:44px;height:44px;font-size:20px}}