:root{--bg:#000;--surface:#121212;--surface-2:#1f1f1f;--surface-3:#2a2a2a;--hover:#ffffff12;--hover-strong:#ffffff1f;--text:#fff;--text-2:#b3b3b3;--text-3:#7a7a7a;--accent:#f50;--accent-hover:#ff7433;--radius:8px;--sidebar-w:300px;--queue-w:340px;--font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;user-select:none;cursor:default;font-size:14px;overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}input{font:inherit;color:inherit}img{display:block}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-thumb{background:padding-box padding-box;border:3px solid #0000;border-radius:8px}:hover::-webkit-scrollbar-thumb{background-color:#ffffff40}::-webkit-scrollbar-thumb:hover{background-color:#ffffff73!important}.app{grid-template-rows:64px minmax(0,1fr) 80px;grid-template-columns:var(--sidebar-w) minmax(0, 1fr) auto;grid-template-areas:"top top top""side main right""player player player";column-gap:8px;height:100%;padding:0 8px;display:grid}.app.no-queue{grid-template-columns:var(--sidebar-w) minmax(0, 1fr);grid-template-areas:"top top""side main""player player"}.panel{background:var(--surface);border-radius:var(--radius);min-height:0;overflow:hidden}.topbar{-webkit-app-region:drag;grid-area:top;align-items:center;gap:8px;padding-left:86px;display:flex}.topbar>*{-webkit-app-region:no-drag}.topbar .logo{color:var(--accent);place-items:center;width:32px;height:32px;margin-right:4px;display:grid}.nav-arrows{gap:6px;display:flex}.round-btn{width:32px;height:32px;color:var(--text);background:#0009;border-radius:50%;place-items:center;transition:transform .1s,background .15s;display:grid}.topbar .round-btn{background:var(--surface)}.round-btn:hover:not(:disabled){transform:scale(1.06)}.round-btn:disabled{opacity:.4;cursor:not-allowed}.topbar-center{-webkit-app-region:drag;flex:1;justify-content:center;gap:8px;display:flex}.topbar-center>*{-webkit-app-region:no-drag}.home-btn{background:var(--surface-2);width:48px;height:48px;color:var(--text-2);border-radius:50%;place-items:center;transition:transform .1s,color .15s;display:grid}.home-btn:hover{color:var(--text);transform:scale(1.04)}.home-btn.active{color:var(--text)}.search-box{background:var(--surface-2);width:min(480px,100%);height:48px;color:var(--text-2);border:1px solid #0000;border-radius:500px;align-items:center;gap:10px;padding:0 14px;transition:background .15s,border-color .15s;display:flex}.search-box:hover{background:var(--surface-3);border-color:#333}.search-box:focus-within{color:var(--text);border-color:#fff}.search-box input{background:0 0;border:0;outline:none;flex:1;font-size:16px}.search-box input::placeholder{color:var(--text-3)}.search-box kbd{font-family:var(--font);color:var(--text-3);border:1px solid #3a3a3a;border-radius:4px;padding:1px 5px;font-size:11px}.topbar-right{align-items:center;gap:8px;padding-right:8px;display:flex;position:relative}.avatar-btn{background:var(--surface-2);border-radius:50%;place-items:center;width:48px;height:48px;transition:transform .1s;display:grid}.avatar-btn:hover{transform:scale(1.04)}.avatar-btn img{object-fit:cover;border-radius:50%;width:32px;height:32px}.sidebar{flex-direction:column;grid-area:side;display:flex}.sidebar-head{color:var(--text-2);justify-content:space-between;align-items:center;padding:16px 16px 8px 24px;display:flex}.sidebar-head h2{color:var(--text);align-items:center;gap:12px;margin:0;font-size:16px;font-weight:700;display:flex}.chips{flex-wrap:wrap;gap:8px;padding:8px 16px;display:flex}.chip{background:var(--surface-3);white-space:nowrap;border-radius:500px;height:32px;padding:0 12px;font-size:14px;transition:background .15s}.chip:hover{background:#333}.chip.active{color:#000;background:#fff}.lib-filter{height:32px;color:var(--text-2);border-radius:4px;align-items:center;gap:8px;margin:4px 16px;padding:0 8px;display:flex}.lib-filter:focus-within{background:var(--surface-3)}.lib-filter input{background:0 0;border:0;outline:none;flex:1;font-size:13px}.lib-list{flex:1;padding:0 8px 8px;overflow-y:auto}.lib-item{border-radius:6px;align-items:center;gap:12px;padding:8px;transition:background .1s;display:flex}.lib-item:hover{background:var(--hover)}.lib-item.active{background:var(--hover-strong)}.lib-item .cover{flex:none;width:48px;height:48px}.lib-item .meta{flex:1;min-width:0}.lib-item .title{white-space:nowrap;text-overflow:ellipsis;font-size:15px;overflow:hidden}.lib-item.playing .title{color:var(--accent)}.lib-item .sub{color:var(--text-2);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:13px;overflow:hidden}.lib-item .now{color:var(--accent);flex:none}.main{grid-area:main;position:relative}.main-scroll{height:100%;position:relative;overflow:hidden auto}.page{min-height:100%;padding:0 24px 32px;position:relative}.page-pad-top{padding-top:24px}.bg-gradient{pointer-events:none;height:340px;transition:background .6s;position:absolute;inset:0 0 auto}.page>:where(:not(.bg-gradient)){position:relative}.sticky-bar{z-index:5;opacity:0;pointer-events:none;align-items:center;gap:12px;height:64px;margin:0 -24px -64px;padding:0 24px;transition:opacity .2s;display:flex;position:sticky;top:0}.sticky-bar.show{opacity:1;pointer-events:auto}.sticky-bar h3{white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:22px;font-weight:700;overflow:hidden}.cover{background:var(--surface-3);color:var(--text-3);border-radius:4px;flex:none;place-items:center;display:grid;position:relative;overflow:hidden}.cover img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .25s}.cover img.loaded{opacity:1}.cover.round{border-radius:50%}.cover>svg{position:absolute}.liked-art{color:#fff;background:linear-gradient(135deg,#f50 0%,#ff8a3d 55%,#ffc48c 100%)}.page-header{align-items:flex-end;gap:24px;min-height:340px;padding:72px 0 24px;display:flex}.page-header .cover{width:clamp(160px,18vw,232px);height:clamp(160px,18vw,232px);box-shadow:0 8px 40px #00000080}.page-header .info{flex:1;min-width:0}.page-header .type{align-items:center;gap:6px;font-size:14px;font-weight:500;display:flex}.page-header h1{letter-spacing:-.04em;-webkit-line-clamp:2;word-break:break-word;user-select:text;-webkit-box-orient:vertical;margin:4px 0 12px;font-size:clamp(32px,5.6vw,96px);font-weight:800;line-height:1.02;display:-webkit-box;overflow:hidden}.page-header h1.long{font-size:clamp(28px,3.6vw,56px)}.page-header .meta{color:#ffffffbf;flex-wrap:wrap;align-items:center;gap:4px;font-size:14px;display:flex}.page-header .meta .owner{color:#fff;align-items:center;gap:6px;font-weight:700;display:inline-flex}.page-header .meta .owner:hover{text-decoration:underline}.page-header .meta img{border-radius:50%;width:24px;height:24px}.dot:before{content:"•";margin:0 2px}.header-shade{pointer-events:none;height:240px;position:absolute;inset:340px 0 auto}.action-bar{align-items:center;gap:24px;padding:24px 0;display:flex}.play-big{background:var(--accent);color:#000;border-radius:50%;flex:none;place-items:center;width:56px;height:56px;transition:transform .1s,background .15s;display:grid}.play-big:hover{background:var(--accent-hover);transform:scale(1.05)}.play-big.sm{width:48px;height:48px}.icon-btn{color:var(--text-2);place-items:center;transition:color .15s,transform .1s;display:grid;position:relative}.icon-btn:hover{color:var(--text);transform:scale(1.04)}.icon-btn.on{color:var(--accent)}.icon-btn.on:after{content:"";background:var(--accent);border-radius:50%;width:4px;height:4px;margin-left:-2px;position:absolute;bottom:-8px;left:50%}.icon-btn.liked{color:var(--accent)}.outline-btn{border:1px solid #7c7c7c;border-radius:500px;height:32px;padding:0 16px;font-size:14px;font-weight:700;transition:border-color .1s,transform .1s}.outline-btn:hover{border-color:#fff;transform:scale(1.04)}.tracklist{--cols:16px minmax(120px, 6fr) minmax(90px, 2fr) minmax(90px, 2fr) 120px}.tracklist.no-album{--cols:16px minmax(120px, 6fr) minmax(90px, 2fr) 120px}.tracklist.compact{--cols:minmax(120px, 1fr) 120px}.tl-head,.tl-row{grid-template-columns:var(--cols);align-items:center;gap:16px;padding:0 16px;display:grid}.tl-head{height:36px;color:var(--text-2);z-index:4;border-bottom:1px solid #ffffff1a;margin-bottom:8px;font-size:14px;position:sticky;top:64px}.tl-head.stuck{background:var(--surface-2);margin:0 -24px 8px;padding:0 40px}.tl-head .end,.tl-row .end{justify-self:end;align-items:center;gap:16px;display:flex}.tl-row{height:56px;color:var(--text-2);content-visibility:auto;contain-intrinsic-size:auto 56px;border-radius:4px}.tl-row:hover{background:var(--hover)}.tl-row.selected{background:#ffffff2e}.tl-row.unplayable{opacity:.45}.tl-num{font-variant-numeric:tabular-nums;justify-self:end;place-items:center;width:16px;font-size:16px;display:grid;position:relative}.tl-num .play{color:#fff;display:none}.tl-row:hover .tl-num .n,.tl-row:hover .tl-num .eq{display:none}.tl-row:hover .tl-num .play{display:grid}.tl-title{align-items:center;gap:12px;min-width:0;display:flex}.tl-title .cover{width:40px;height:40px}.tl-title .text{min-width:0}.tl-title .name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;font-size:16px;display:flex;overflow:hidden}.tl-row.current .tl-title .name{color:var(--accent)}.tl-title .artist{white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.tl-title .artist a:hover,.tl-cell a:hover{color:var(--text);text-decoration:underline}.tl-row:hover .tl-title .artist,.tl-row:hover .tl-cell{color:var(--text)}.tl-cell{white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.tl-row .heart{opacity:0}.tl-row:hover .heart,.tl-row .heart.liked{opacity:1}.tl-row .duration{font-variant-numeric:tabular-nums;text-align:right;min-width:40px}.tl-row .more{opacity:0}.tl-row:hover .more{opacity:1}.badge{text-transform:uppercase;letter-spacing:.04em;background:var(--text-3);color:#000;border-radius:3px;flex:none;padding:2px 5px;font-size:10px;font-weight:700}.badge.preview{background:#b3b3b3}.eq{align-items:flex-end;gap:2px;height:14px;display: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}.eq.paused i{animation-play-state:paused}@keyframes eq{0%,to{height:3px}50%{height:14px}}.section{margin-top:32px}.section-head{justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.section-head h2{letter-spacing:-.01em;margin:0;font-size:24px;font-weight:700}.section-head h2 a:hover,.section-head .all:hover{text-decoration:underline}.section-head .all{color:var(--text-2);font-size:14px;font-weight:700}.shelf{grid-template-rows:auto;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));grid-auto-rows:0;margin:0 -12px;display:grid;overflow:hidden}.grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));margin:0 -12px;display:grid}.card{border-radius:8px;min-width:0;padding:12px;transition:background .2s;position:relative}.card:hover{background:var(--surface-2)}.card .art{margin-bottom:8px;position:relative}.card .cover{aspect-ratio:1;border-radius:6px;width:100%;box-shadow:0 8px 24px #00000080}.card .cover.round{border-radius:50%}.card .fab{background:var(--accent);color:#000;opacity:0;border-radius:50%;place-items:center;width:48px;height:48px;transition:opacity .25s,transform .25s,background .15s;display:grid;position:absolute;bottom:8px;right:8px;transform:translateY(8px);box-shadow:0 8px 8px #0000004d}.card:hover .fab,.card .fab.playing{opacity:1;transform:none}.card .fab:hover{background:var(--accent-hover);transform:scale(1.05)}.card .title{white-space:nowrap;text-overflow:ellipsis;padding-top:4px;font-size:16px;overflow:hidden}.card .sub{color:var(--text-2);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:4px;font-size:14px;line-height:1.35;display:-webkit-box;overflow:hidden}.quick-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin-top:16px;display:grid}.quick{background:#ffffff14;border-radius:4px;align-items:center;gap:12px;height:64px;padding-right:8px;transition:background .2s;display:flex;position:relative;overflow:hidden}.quick:hover{background:#ffffff2e}.quick .cover{border-radius:0;width:64px;height:64px;box-shadow:0 8px 24px #00000080}.quick .title{-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;font-size:15px;font-weight:700;display:-webkit-box;overflow:hidden}.quick .fab{background:var(--accent);color:#000;opacity:0;border-radius:50%;flex:none;place-items:center;width:32px;height:32px;transition:opacity .2s,transform .1s;display:grid;box-shadow:0 8px 8px #0000004d}.quick:hover .fab,.quick .fab.playing{opacity:1}.quick .fab:hover{transform:scale(1.05)}.greeting{letter-spacing:-.02em;margin:8px 0 0;font-size:32px;font-weight:800}.browse-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:24px;margin-top:16px;display:grid}.genre{aspect-ratio:1.6;letter-spacing:-.01em;text-align:left;border-radius:8px;padding:16px;font-size:22px;font-weight:800;transition:transform .15s;position:relative;overflow:hidden}.genre:hover{transform:scale(1.02)}.genre:after{content:"";background:#00000040;border-radius:6px;width:90px;height:90px;position:absolute;bottom:-6px;right:-14px;transform:rotate(25deg);box-shadow:0 4px 18px #0006}.search-top{grid-template-columns:minmax(280px,2fr) 3fr;gap:24px;margin-top:8px;display:grid}.top-result{background:var(--surface-2);border-radius:8px;min-width:0;padding:20px;transition:background .2s;display:block;position:relative}.top-result:hover{background:var(--surface-3)}.top-result .cover{width:92px;height:92px;box-shadow:0 8px 24px #00000080}.top-result h3{letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis;margin:20px 0 6px;font-size:32px;font-weight:800;overflow:hidden}.top-result .sub{color:var(--text-2);align-items:center;gap:8px;display:flex}.top-result .pill{color:#fff;background:#0006;border-radius:500px;padding:4px 12px;font-size:13px;font-weight:700}.top-result .fab{background:var(--accent);color:#000;opacity:0;border-radius:50%;place-items:center;width:48px;height:48px;transition:opacity .25s,transform .25s;display:grid;position:absolute;bottom:20px;right:20px;transform:translateY(8px);box-shadow:0 8px 8px #0000004d}.top-result:hover .fab{opacity:1;transform:none}.sticky-chips{z-index:4;background:var(--surface);margin:0 -24px;padding:12px 24px;position:sticky;top:0}.player{grid-area:player;grid-template-columns:minmax(180px,3fr) minmax(320px,4fr) minmax(180px,3fr);align-items:center;gap:8px;padding:0 8px;display:grid}.np{align-items:center;gap:14px;min-width:0;display:flex}.np .cover{width:56px;height:56px}.np .text{min-width:0}.np .title{white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.np .title:hover,.np .artist a:hover{text-decoration:underline}.np .artist{color:var(--text-2);white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-size:12px;overflow:hidden}.np .artist a:hover{color:var(--text)}.controls{flex-direction:column;justify-self:center;align-items:center;gap:6px;width:100%;max-width:722px;display:flex}.controls .buttons{align-items:center;gap:20px;display:flex}.play-btn{color:#000;background:#fff;border-radius:50%;place-items:center;width:34px;height:34px;transition:transform .1s;display:grid}.play-btn:hover{transform:scale(1.06)}.play-btn:disabled,.icon-btn:disabled{opacity:.4;cursor:default;transform:none}.progress{width:100%;color:var(--text-2);font-variant-numeric:tabular-nums;align-items:center;gap:8px;font-size:12px;display:flex}.progress>span{min-width:40px}.progress>span:first-child{text-align:right}.player-right{justify-content:flex-end;align-items:center;gap:14px;padding-right:8px;display:flex}.volume{width:100px}.slider{touch-action:none;flex:1;align-items:center;height:16px;display:flex;position:relative}.slider .track{background:#4d4d4d;border-radius:2px;width:100%;height:4px;overflow:hidden}.slider .fill{background:#fff;border-radius:2px;height:100%}.slider:hover .fill,.slider.dragging .fill{background:var(--accent)}.slider .knob{background:#fff;border-radius:50%;width:12px;height:12px;margin-left:-6px;display:none;position:absolute;box-shadow:0 2px 4px #00000080}.slider:hover .knob,.slider.dragging .knob{display:block}.spinner{animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.queue{width:var(--queue-w);flex-direction:column;grid-area:right;display:flex}.queue-head{justify-content:space-between;align-items:center;padding:16px 16px 8px;display:flex}.queue-head h2{margin:0;font-size:16px}.queue-body{flex:1;padding:0 8px 16px;overflow-y:auto}.queue h4{margin:16px 8px 8px;font-size:16px}.queue-item{border-radius:6px;align-items:center;gap:12px;padding:8px;display:flex}.queue-item:hover{background:var(--hover)}.queue-item .cover{width:48px;height:48px}.queue-item .text{flex:1;min-width:0}.queue-item .name{white-space:nowrap;text-overflow:ellipsis;font-size:15px;overflow:hidden}.queue-item.current .name{color:var(--accent)}.queue-item .artist{color:var(--text-2);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:13px;overflow:hidden}.queue-item .remove{opacity:0}.queue-item:hover .remove{opacity:1}.np-big{padding:8px}.np-big .cover{aspect-ratio:1;border-radius:8px;width:100%}.np-big h3{margin:14px 0 2px;font-size:22px;font-weight:800}.np-big .artist{color:var(--text-2)}.menu{z-index:100;background:#282828;border-radius:6px;min-width:220px;padding:4px;animation:.12s ease-out pop;position:fixed;box-shadow:0 16px 24px #00000080,0 6px 8px #0003}.menu button{color:#ffffffe6;text-align:left;border-radius:3px;align-items:center;gap:12px;width:100%;height:40px;padding:0 12px;font-size:14px;display:flex}.menu button:hover{color:#fff;background:#3e3e3e}.menu hr{border:0;border-top:1px solid #3e3e3e;margin:4px 0}@keyframes pop{0%{opacity:0;transform:scale(.97)}}.toast{color:#000;z-index:200;background:#fff;border-radius:8px;max-width:560px;padding:12px 16px;font-weight:500;animation:.2s ease-out toast;position:fixed;bottom:104px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #00000080}@keyframes toast{0%{opacity:0;transform:translate(-50%,8px)}}.empty{color:var(--text-2);text-align:center;padding:48px 0;font-size:15px}.empty h2{color:var(--text);margin:0 0 8px;font-size:24px}.skeleton{background:linear-gradient(90deg,#1f1f1f 0%,#2a2a2a 50%,#1f1f1f 100%) 0 0/200% 100%;border-radius:4px;animation:1.2s infinite shimmer}@keyframes shimmer{to{background-position:-200% 0}}.sentinel{height:1px}.loading-more{color:var(--text-2);place-items:center;padding:24px;display:grid}.description{color:var(--text-2);white-space:pre-line;user-select:text;max-width:720px;margin:0 0 8px;font-size:14px;line-height:1.5}.login{-webkit-app-region:drag;background:radial-gradient(at 30% 0,#5a1f00 0%,#160700 45%,#000 80%);place-items:center;height:100%;display:grid}.login-card{text-align:center;-webkit-app-region:no-drag;max-width:440px;padding:24px}.login-card .logo{color:var(--accent);margin-bottom:16px}.login-card h1{letter-spacing:-.03em;margin:0 0 12px;font-size:44px;font-weight:800;line-height:1.05}.login-card p{color:var(--text-2);margin:0 0 32px;font-size:16px;line-height:1.5}.login-card .cta{background:var(--accent);color:#000;border-radius:500px;height:52px;padding:0 36px;font-size:16px;font-weight:700;transition:transform .1s,background .15s}.login-card .cta:hover{background:var(--accent-hover);transform:scale(1.04)}.login-card .cta:disabled{opacity:.6;transform:none}.login-card small{color:var(--text-3);margin-top:20px;font-size:12px;line-height:1.5;display:block}@media (width<=1180px){:root{--sidebar-w:260px;--queue-w:300px}.tracklist{--cols:16px minmax(120px, 6fr) minmax(90px, 2fr) 120px}.tracklist .hide-md{display:none}}.modal-backdrop{z-index:150;background:#000000b3;place-items:center;animation:.15s ease-out toast;display:grid;position:fixed;inset:0}.modal{text-align:center;background:#282828;border-radius:12px;width:min(440px,100% - 32px);padding:28px;position:relative;box-shadow:0 24px 48px #0009}.modal h2{margin:0 0 8px;font-size:24px}.modal p,.modal small{color:var(--text-2);line-height:1.5}.modal small{margin-top:16px;font-size:12px;display:block}.modal-close{position:absolute;top:16px;right:16px}.field{text-align:left;margin:16px 0;display:block}.field span{color:var(--text-2);font-size:12px;font-weight:700}.field input,.token-form input{background:#121212;border:1px solid #555;border-radius:6px;outline:none;width:100%;height:44px;margin-top:6px;padding:0 12px;font-size:15px}.field input:focus,.token-form input:focus{border-color:#fff}.qr{color:#555;background:#fff;border-radius:8px;place-items:center;width:240px;height:240px;margin:8px auto 16px;display:grid;overflow:hidden}.qr img{width:100%;height:100%;image-rendering:pixelated}.login-steps{text-align:left;color:var(--text-2);max-width:340px;margin:0 auto 28px;padding-left:22px;font-size:16px;line-height:1.6}.login-steps li::marker{color:var(--accent);font-weight:700}.token-form{flex-direction:column;gap:12px;display:flex}.link-btn{color:var(--text-2);font-size:14px;text-decoration:underline}.link-btn:hover{color:#fff}.m-avatar{display:none}.home-head{align-items:center;gap:12px;display:flex}.m-app{--tabbar-h:calc(64px + env(safe-area-inset-bottom));--mini-h:0px;--sat:env(safe-area-inset-top);background:var(--surface);position:fixed;inset:0;overflow:hidden}.m-app.has-mini{--mini-h:64px}.m-main{height:100%}.m-main .main-scroll{padding-bottom:calc(var(--tabbar-h) + var(--mini-h) + 16px);overscroll-behavior-y:contain}.m-app .page{padding:var(--sat) 16px 24px}.m-app .page-pad-top{padding-top:calc(var(--sat) + 16px)}.m-statusbar{z-index:25;height:var(--sat);opacity:0;pointer-events:none;background:#121212f0;transition:opacity .2s;position:absolute;top:0;left:0;right:0}.m-app.scrolled .m-statusbar{opacity:1}.m-app .m-avatar{border-radius:50%;flex:none;width:36px;height:36px;display:block;overflow:hidden}.m-avatar img{object-fit:cover;width:100%;height:100%}.m-page-head{align-items:center;gap:12px;padding:16px 0 8px;display:flex}.m-page-head h1{margin:0;font-size:24px;font-weight:800}.m-app .greeting{margin:0;font-size:24px}.m-app .home-head{padding:4px 0 0}.m-back{z-index:20;top:calc(env(safe-area-inset-top) + 12px);-webkit-backdrop-filter:blur(8px);background:#0000008c;border-radius:50%;place-items:center;width:36px;height:36px;display:grid;position:fixed;left:12px}.m-app .sticky-bar{margin:calc(-1 * var(--sat)) -16px -56px;padding:var(--sat) 16px 0 60px;height:calc(56px + var(--sat));top:0}.m-app .sticky-bar h3{flex:1;font-size:17px}.m-app .sticky-bar .play-big{order:2;width:40px;height:40px}.m-app .page-header{flex-direction:column;align-items:stretch;gap:16px;min-height:0;padding:56px 0 8px}.m-app .page-header .cover{align-self:center;width:min(60vw,260px);height:min(60vw,260px)}.m-app .page-header .cover.round{width:min(45vw,200px);height:min(45vw,200px)}.m-app .page-header h1,.m-app .page-header h1.long{letter-spacing:-.02em;margin:2px 0 8px;font-size:26px}.m-app .page-header .type{color:var(--text-2);font-size:12px}.m-app .page-header .meta{font-size:13px}.m-app .bg-gradient{height:420px}.m-app .header-shade{top:420px}.m-app .action-bar{gap:20px;padding:8px 0 16px}.m-app .action-bar .play-big{order:9;margin-left:auto}.m-app .description{max-height:4.5em;font-size:13px;overflow:hidden}.m-app .tracklist,.m-app .tracklist.no-album,.m-app .tracklist.compact{--cols:minmax(0, 1fr) auto}.m-app .tl-head,.m-app .tl-num,.m-app .tl-cell,.m-app .tl-row .heart,.m-app .tl-row .duration{display:none}.m-app .tl-row{gap:8px;height:60px;padding:0}.m-app .tl-row:hover{background:0 0}.m-app .tl-row:active{background:var(--hover)}.m-app .tl-title .cover{width:48px;height:48px}.m-app .tl-title .name{font-size:15px}.m-app .tl-title .artist{font-size:13px}.m-app .tl-row .more{opacity:1;padding:8px}.m-app .shelf{scroll-snap-type:x mandatory;scrollbar-width:none;grid-template-columns:none;grid-auto-rows:auto;grid-auto-columns:140px;grid-auto-flow:column;margin:0 -16px;padding:0 4px;overflow-x:auto}.m-app .shelf::-webkit-scrollbar{display:none}.m-app .shelf .card{scroll-snap-align:start;padding:8px}.m-app .card:hover{background:0 0}.m-app .card .fab{display:none}.m-app .card .title{font-size:13px;font-weight:600}.m-app .card .sub{font-size:12px}.m-app .grid{grid-template-columns:repeat(2,1fr);margin:0 -8px}.m-app .section{margin-top:24px}.m-app .section-head h2{font-size:20px}.m-app .quick-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.m-app .quick{gap:8px;height:56px}.m-app .quick .cover{width:56px;height:56px}.m-app .quick .title{font-size:13px}.m-app .quick .fab{display:none}.m-app .search-top{grid-template-columns:1fr}.m-app .top-result h3{font-size:24px}.m-app .browse-grid{grid-template-columns:1fr 1fr;gap:12px}.m-app .genre{padding:12px;font-size:16px}.m-app .genre:after{width:60px;height:60px}.m-app .sticky-chips{top:var(--sat);scrollbar-width:none;flex-wrap:nowrap;margin:0 -16px;padding:8px 16px;overflow-x:auto}.m-app .sticky-chips::-webkit-scrollbar{display:none}.m-search-box{color:#000;background:#fff;border-radius:6px;align-items:center;gap:10px;height:48px;margin:8px 0 16px;padding:0 12px;display:flex}.m-search-box input{color:#000;background:0 0;border:0;outline:none;flex:1;font-size:16px;font-weight:500}.m-search-box input::placeholder{color:#555}.m-search-box button{color:#000;display:grid}.m-library .chips{padding:8px 0}.m-library .lib-filter{margin:0 0 4px}.m-library .lib-list{margin:0 -8px;padding:0}.m-bottom{z-index:30;background:linear-gradient(#0000 0,#000000d9 40%,#000 70%);padding:0 8px;position:absolute;bottom:0;left:0;right:0}.m-tabbar{height:var(--tabbar-h);padding-bottom:env(safe-area-inset-bottom);display:flex}.m-tab{color:var(--text-2);-webkit-tap-highlight-color:transparent;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;font-size:11px;display:flex}.m-tab.active{color:#fff}.m-mini{-webkit-tap-highlight-color:transparent;border-radius:6px;align-items:center;gap:10px;height:56px;margin-bottom:4px;padding:0 8px;transition:background .4s;display:flex;position:relative;overflow:hidden}.m-mini .cover{width:40px;height:40px}.m-mini .text{flex:1;min-width:0}.m-mini .title,.m-mini .artist{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.m-mini .title{font-size:13px;font-weight:600}.m-mini .artist{color:#ffffffb3;font-size:12px}.m-mini .icon-btn{color:#fff;padding:6px}.m-mini .icon-btn.liked{color:var(--accent)}.m-mini-play{place-items:center;width:40px;height:40px;display:grid}.m-mini-progress{background:#ffffff40;border-radius:1px;height:2px;position:absolute;bottom:0;left:8px;right:8px}.m-mini-progress div{background:#fff;border-radius:1px;height:100%}.m-np{z-index:60;padding:calc(env(safe-area-inset-top) + 8px) 24px calc(env(safe-area-inset-bottom) + 16px);visibility:hidden;flex-direction:column;transition:transform .32s cubic-bezier(.2,.8,.2,1);display:flex;position:fixed;inset:0;transform:translateY(100%)}.m-np.open{visibility:visible;transform:none}.m-np-head{justify-content:space-between;align-items:center;height:48px;display:flex}.m-np-head .icon-btn{color:#fff}.m-np-head .ctx{text-align:center;flex:1;min-width:0;padding:0 12px}.m-np-head small{letter-spacing:.08em;text-transform:uppercase;color:#ffffffb3;font-size:10px;display:block}.m-np-head b{white-space:nowrap;text-overflow:ellipsis;font-size:13px;display:block;overflow:hidden}.m-np-art{flex:1;place-items:center;min-height:0;padding:16px 0;display:grid}.m-np-art .cover{aspect-ratio:1;border-radius:8px;width:100%;max-width:min(100%,52vh);box-shadow:0 16px 48px #00000080}.np-queue{flex:1;margin:8px -16px;padding:0 8px;overflow-y:auto}.np-queue h4{margin:16px 8px 8px}.np-queue .queue-item .artist{color:#ffffffb3}.m-np-info{align-items:center;gap:16px;margin-top:8px;display:flex}.m-np-info .text{flex:1;min-width:0}.m-np-info .title{white-space:nowrap;text-overflow:ellipsis;font-size:22px;font-weight:800;overflow:hidden}.m-np-info .artist{color:#ffffffb3;margin-top:2px;font-size:15px}.m-np-info .icon-btn{color:#fff}.m-np-info .icon-btn.liked{color:var(--accent)}.m-np-progress{margin-top:16px}.m-np-progress .slider{height:24px}.m-np-progress .slider .knob{display:block}.m-np-progress .slider .fill,.m-np-progress .slider:hover .fill{background:#fff}.m-np-progress .slider .track{background:#ffffff4d}.m-np-progress .times{color:#ffffffb3;font-variant-numeric:tabular-nums;justify-content:space-between;font-size:11px;display:flex}.m-np-controls{justify-content:space-between;align-items:center;margin-top:12px;display:flex}.m-np-controls .icon-btn{color:#fff}.m-np-controls .icon-btn.on{color:var(--accent)}.m-np-play{color:#000;background:#fff;border-radius:50%;place-items:center;width:68px;height:68px;display:grid}.m-np-play:active{transform:scale(.96)}.m-np-foot{justify-content:space-between;margin-top:20px;display:flex}.m-np-foot .icon-btn{color:#fff}.m-app .menu{right:8px;bottom:calc(env(safe-area-inset-bottom) + 8px);z-index:120;border-radius:12px;min-width:0;padding:8px;animation:.2s ease-out sheet;box-shadow:0 -8px 40px #000000b3,0 0 0 100vmax #0000008c;top:auto!important;left:8px!important}.m-app .menu button{height:52px;font-size:16px}@keyframes sheet{0%{opacity:0;transform:translateY(40px)}}.m-app .toast{bottom:calc(var(--tabbar-h) + var(--mini-h) + 12px);width:max-content;max-width:calc(100% - 32px);font-size:14px}@media (width<=760px){.login-card h1{font-size:32px}.login{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}}.m-app ::-webkit-scrollbar{display:none}.debug-info{gap:6px;margin-top:8px;font-size:13px;display:grid}.debug-info b{min-width:110px;color:var(--text-2);font-weight:600;display:inline-block}.debug-info span{user-select:text;word-break:break-all}.debug-log{white-space:pre-wrap;word-break:break-all;user-select:text;color:#9fe29f;background:#000;border-radius:8px;min-height:200px;padding:12px;font-size:11px;line-height:1.5}.card-remove{color:#fff;opacity:0;background:#000000b3;border-radius:50%;place-items:center;width:28px;height:28px;transition:opacity .15s;display:grid;position:absolute;top:6px;right:6px}.card:hover .card-remove{opacity:1}.section-head button.all{cursor:pointer}.recent-item{cursor:pointer;padding:8px 0}.recent-item .cover{width:56px;height:56px}.recent-clear{margin:16px auto 8px;display:block}.m-app .recent{margin-top:4px}.m-app .recent .section-head h2{font-size:17px}