:root{--bg:#0b0a14;--card:#16142a;--txt:#f3f2f8;--mut:#9a98ad;--g:#5ab8ff;--k:#ff6b9a;--acc:#ff5a7a;--sb:env(safe-area-inset-bottom)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:var(--bg);color:var(--txt);font-family:-apple-system,system-ui,"Segoe UI","PingFang SC","Noto Sans CJK SC",sans-serif;line-height:1.45}
a{color:#9ad0ff}button{font:inherit;color:inherit}#app{max-width:1000px;margin:0 auto;padding-bottom:calc(110px + var(--sb))}
.hero{text-align:center;padding:calc(28px + env(safe-area-inset-top)) 20px 14px;background:radial-gradient(circle at 15% 0,#3a1d6e,transparent 60%),radial-gradient(circle at 85% 0,#6e1d3a,transparent 60%)}
.badge{display:inline-block;padding:3px 12px;border:1px solid #fff3;border-radius:99px;font-size:.78rem;letter-spacing:.06em}
h1{font-size:clamp(2.2rem,9vw,4rem);margin:.2em 0;letter-spacing:-.02em}h1 small{font-size:.4em;color:var(--mut)}.g{color:var(--g)}.k{color:var(--k)}
.tag{max-width:640px;margin:0 auto;font-size:1rem;font-style:italic;color:#d8d6e6}
.score{display:flex;gap:12px;justify-content:center;margin:18px 0 4px}.score div{background:#ffffff0f;border-radius:14px;padding:8px 22px;min-width:110px}.score b{display:block;font-size:1.6rem}.sg b{color:var(--g)}.sk b{color:var(--k)}.score span{font-size:.8rem;color:var(--mut)}
.filters{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;position:sticky;top:0;z-index:5;background:#0b0a14e6;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);scrollbar-width:none}
.filters button{flex:none;background:#ffffff12;border:0;border-radius:99px;padding:7px 15px;font-size:.88rem;cursor:pointer}.filters .on{background:var(--txt);color:#111;font-weight:600}
.sec{padding:6px 16px}.sec h2,.about h2{font-size:1.35rem;margin:14px 0 10px;letter-spacing:-.01em}.sechead{display:flex;align-items:center;gap:8px}.sechead h2{flex:1}
.pill-btn{border:0;background:var(--acc);color:#fff;border-radius:99px;padding:6px 14px;font-weight:600;font-size:.85rem;cursor:pointer}.pill-btn.alt{background:#ffffff18}
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:44%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
@media(min-width:700px){.shelf{grid-auto-columns:22%}}
.tile{scroll-snap-align:start;cursor:pointer}.tile img{width:100%;aspect-ratio:1;border-radius:10px;display:block;box-shadow:0 8px 24px #0007}.tile b{display:block;font-size:.9rem;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile span{font-size:.8rem;color:var(--mut)}
.list{list-style:none;margin:0;padding:0}.row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #ffffff10;cursor:pointer}
.row img{width:52px;height:52px;border-radius:7px;flex:none}.row .t{flex:1;min-width:0}.row .t b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .t span{font-size:.8rem;color:var(--mut);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.cur .t b{color:var(--acc)}.dur{font-size:.8rem;color:var(--mut)}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}

.about{padding:6px 16px;color:#d8d6e6}.hint{font-size:.82rem;color:var(--mut)}footer{text-align:center;padding:24px 16px;font-size:.8rem;color:var(--mut)}
.mini{position:fixed;left:8px;right:8px;bottom:calc(8px + var(--sb));max-width:984px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:#26233ee0;backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 10px 30px #000a;z-index:10;cursor:pointer;overflow:hidden}
.mini.hidden{transform:translateY(150%)}.mini img{width:44px;height:44px;border-radius:7px}.mtxt{flex:1;min-width:0}.mtxt b{display:block;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mtxt span{font-size:.78rem;color:var(--mut)}
.mprog{position:absolute;left:0;bottom:0;height:2px;background:var(--acc);width:0}
.ic{background:none;border:0;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;padding:0}.ic svg{width:60%;height:60%;fill:currentColor}
.ic.sm{font-size:1.25rem;color:var(--mut);width:44px}.ic.sm.on{color:var(--acc)}.ic.lg{width:56px;height:56px}.ic.xl{width:76px;height:76px}
.np{position:fixed;inset:0;z-index:20;transform:translateY(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1);overflow:hidden;background:#111}.np.open{transform:none}
.npbg{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(50px) saturate(1.4) brightness(.55);transform:scale(1.2)}
.npin{position:relative;height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;padding:calc(10px + env(safe-area-inset-top)) 26px calc(18px + var(--sb))}
.grab{align-self:center;width:44px;height:5px;border-radius:3px;background:#fff6;border:0;margin:6px 0 18px;cursor:pointer;padding:0}
.npmain{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.npcover{width:100%;max-width:440px;aspect-ratio:1;border-radius:14px;box-shadow:0 24px 60px #000b;transition:transform .35s}.np.paused .npcover{transform:scale(.86)}
.nplyrics{width:100%;height:100%;overflow:auto;margin:0;white-space:pre-wrap;font-family:inherit;font-size:1.15rem;font-weight:600;line-height:1.6;color:#fffd}
.hidden{display:none!important}.npmeta{display:flex;align-items:center;margin:20px 0 6px}.npmeta div{flex:1;min-width:0}.npmeta h3{margin:0;font-size:1.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.npmeta p{margin:2px 0 0;color:#fffa}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;background:linear-gradient(#fff,#fff) 0/var(--p,0%) no-repeat #ffffff40;outline:none;margin:12px 0 4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0}
.times{display:flex;justify-content:space-between;font-size:.75rem;color:#fff9}.ctrls{display:flex;justify-content:space-between;align-items:center;margin:14px 0}
.npfoot{display:flex;justify-content:center;gap:12px}.tog{background:#ffffff18;border:0;border-radius:99px;padding:7px 16px;font-size:.85rem;cursor:pointer}.tog.on{background:#fff;color:#111}
.npqueue{list-style:none;padding:0;margin:12px 0 0;max-height:30vh;overflow:auto}.npqueue li{display:flex;gap:10px;align-items:center;padding:6px 0;font-size:.9rem;cursor:pointer}.npqueue img{width:36px;height:36px;border-radius:5px}.npqueue li.cur{color:var(--acc)}

.heart,.share{background:none;border:0;cursor:pointer;padding:6px;width:44px;height:44px;display:grid;place-items:center;flex:none;color:#fff}
.heart svg,.share svg{width:28px;height:28px}.heart svg path{fill:none;stroke:#fffb;stroke-width:2;transition:fill .2s,stroke .2s}
.heart.on svg path{fill:#ff2d55;stroke:#ff2d55}.heart.big svg{width:34px;height:34px}.share svg{fill:none;stroke:#fffc;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.heart.pop svg{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.row .heart,.row .share{width:42px;height:42px}.mini .heart{width:38px;height:38px}.mini .heart svg{width:26px;height:26px}.mini .ic{width:38px}
.ctrls .ic.lg{width:68px;height:68px}.ctrls .ic.lg svg{width:72%;height:72%}
.toast{position:fixed;left:50%;bottom:calc(90px + var(--sb));transform:translate(-50%,20px);background:#fff;color:#111;padding:9px 18px;border-radius:99px;font-size:.88rem;font-weight:600;opacity:0;transition:.25s;z-index:40;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
.mtxt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.times{align-items:center;gap:8px}.times .sp{flex:1}.j15{background:none;border:0;width:34px;height:34px;padding:0;cursor:pointer;color:#fffc}.j15 svg{width:100%;height:100%}svg.j path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}svg.j text{font:700 6.5px system-ui,sans-serif;fill:currentColor;text-anchor:middle}
.nptop{display:flex;align-items:center;margin-bottom:12px}.nptop .grab{margin:0}.npback,.npsp{flex:1}.npback{display:flex;align-items:center;gap:4px;background:none;border:0;padding:8px 0;cursor:pointer;font-weight:600;color:#fff;justify-self:start}.npback svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.nplyrics{position:relative;padding:40vh 0;scroll-behavior:auto;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent)}.ll{font-size:1.45rem;font-weight:700;line-height:1.3;margin:0 0 16px;color:#ffffff59;cursor:pointer;transition:color .3s,transform .3s;transform-origin:left}.ll.past{color:#ffffff80}.ll.on{color:#fff;transform:scale(1.04)}.lsec{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#ffffff55;margin:22px 0 8px}
.npmain{overflow:hidden}.nplyrics{box-sizing:border-box;height:100%;max-height:100%;padding:35% 0;overflow-y:auto}