:root{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 48px;--fs-xs: 12px;--fs-sm: 13px;--fs-md: 14.5px;--fs-lg: 16px;--fs-xl: 19px;--fs-2xl: 22px;--fs-3xl: 28px;--radius-sm: 10px;--radius-md: 12px;--radius-lg: 18px;--radius-full: 999px;--dur-fast: .15s;--dur-base: .2s;--dur-exit: .14s;--ease-standard: cubic-bezier(.23, 1, .32, 1);--ease-entrance: cubic-bezier(.16, 1, .3, 1);--z-sticky: 1100;--z-playerbar: 1150;--z-tabbar: 1200;--z-overlay: 1300;--z-sheet: 1350;--z-toast: 1400;--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "MiSans", "HarmonyOS Sans SC", "Microsoft YaHei UI", sans-serif;--bg: #F6F5F2;--card: #FFFFFF;--recessed: #EFEDE8;--text: #1E1B18;--muted: #8E8A83;--strong: #45403A;--track: #E7E4DE;--accent: #C20C0C;--accent-strong: #A80A0A;--accent-soft: rgba(194, 12, 12, .1);--on-accent: #FFFFFF;--success: #3E7D46;--success-bg: #EAF2EA;--danger: #C0423C;--danger-bg: #F7E9E8;--glass: var(--card);--glass-blur: 0px;--shadow-card: 0 1px 2px rgba(30, 27, 24, .05), 0 4px 14px rgba(30, 27, 24, .06);--shadow-float: 0 2px 6px rgba(30, 27, 24, .08), 0 14px 34px rgba(30, 27, 24, .14);--shadow-gel: inset 0 1.5px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(30, 27, 24, .1), 0 4px 10px rgba(30, 27, 24, .12);--vinyl-glow: none;color-scheme:light}[data-theme=vinyl]{--bg: #141414;--card: #201F1E;--recessed: #0E0E0D;--text: #F0EDE8;--muted: #938E86;--strong: #D9D4CC;--track: rgba(255, 255, 255, .08);--accent: #F0594E;--accent-strong: #F77167;--accent-soft: rgba(240, 89, 78, .14);--on-accent: #2A0705;--success: #7FBF7F;--success-bg: rgba(127, 191, 127, .14);--danger: #E57368;--danger-bg: rgba(229, 115, 104, .14);--shadow-card: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .35);--shadow-float: 0 2px 6px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .55);--shadow-gel: inset 0 1.5px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .5), 0 5px 12px rgba(0, 0, 0, .45);--vinyl-glow: 0 0 60px rgba(240, 89, 78, .14);color-scheme:dark}[data-theme=mist]{--bg: #F2EEEA;--card: #FAF8F4;--recessed: #ECE7E1;--text: #1D1916;--muted: #97918A;--strong: #3A3632;--track: #E6E1DB;--accent: #3D5BC4;--accent-strong: #33509F;--accent-soft: rgba(61, 91, 196, .1);--on-accent: #FFFFFF;--shadow-card: 0 1px 2px rgba(28, 25, 20, .05), 0 4px 12px rgba(28, 25, 20, .06);--shadow-float: 0 2px 4px rgba(28, 25, 20, .08), 0 12px 28px rgba(28, 25, 20, .12)}[data-theme=cyber]{--bg: #0A0E1A;--card: #131B30;--recessed: #070B14;--text: #E9EEF9;--muted: #8A93AC;--strong: #C9D2E8;--track: rgba(255, 255, 255, .08);--accent: #5B9BFF;--accent-strong: #7FB0FF;--accent-soft: rgba(91, 155, 255, .14);--on-accent: #06101F;--success: #58C08A;--success-bg: rgba(88, 192, 138, .13);--danger: #F07568;--danger-bg: rgba(240, 117, 104, .13);--glass: rgba(19, 27, 48, .72);--glass-blur: 18px;--shadow-card: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(2, 6, 18, .5);--shadow-float: 0 2px 8px rgba(0, 0, 0, .5), 0 18px 48px rgba(2, 6, 18, .6);--shadow-gel: inset 0 1.5px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(31, 84, 199, .28);--vinyl-glow: 0 0 70px rgba(91, 155, 255, .18);color-scheme:dark}[data-theme=tape]{--bg: #F4EFE4;--card: #FBF8F0;--recessed: #EAE3D1;--text: #2B2620;--muted: #938A78;--strong: #4C4436;--track: #E3DAC6;--accent: #0E7C6E;--accent-strong: #0A6357;--accent-soft: rgba(14, 124, 110, .11);--on-accent: #FFFFFF;--shadow-card: 0 1px 2px rgba(43, 38, 32, .06), 0 4px 12px rgba(43, 38, 32, .07);--shadow-float: 0 2px 4px rgba(43, 38, 32, .09), 0 12px 28px rgba(43, 38, 32, .13);--shadow-gel: inset 0 1.5px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(43, 38, 32, .12), 0 4px 10px rgba(43, 38, 32, .14)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-body);font-size:var(--fs-md);line-height:18px;letter-spacing:.3px;color:var(--text);background:var(--bg);transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard);overscroll-behavior-y:none}h1,h2,h3,h4,p,ul,ol,figure{margin:0}ul,ol{padding:0;list-style:none}button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}input,textarea,select{font:inherit;color:inherit}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}::selection{background:var(--accent-soft)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--track);border-radius:var(--radius-full);border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-track{background:transparent}.app{display:flex;min-height:100dvh}.sidebar{display:none;width:232px;flex-shrink:0;position:sticky;top:0;height:100dvh;padding:var(--space-6) var(--space-4) var(--space-5);background:var(--card);box-shadow:var(--shadow-card);flex-direction:column;gap:var(--space-5);z-index:var(--z-sticky)}.content-col{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);min-height:56px;background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:var(--shadow-card)}.page{flex:1;width:100%;max-width:1064px;margin:0 auto;padding:var(--space-5) var(--space-5) calc(176px + env(safe-area-inset-bottom));animation:page-enter var(--dur-base) var(--ease-entrance)}@keyframes page-enter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);display:flex;justify-content:space-around;padding:var(--space-1) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:var(--shadow-float)}.tab{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;min-height:48px;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);color:var(--muted);font-size:var(--fs-xs);transition:color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}.tab svg{width:22px;height:22px}.tab.active{color:var(--accent)}.tab:active{transform:scale(.94)}@media(min-width:900px){.sidebar{display:flex}.topbar{padding:var(--space-3) var(--space-6);min-height:64px}.page{padding:var(--space-6) var(--space-7) 120px}.tabbar{display:none}}.sidebar-logo{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-2)}.sidebar-logo .logo-mark{width:38px;height:38px;border-radius:12px}.sidebar-logo .logo-name{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.5px}.sidebar-logo .logo-sub{font-size:var(--fs-xs);color:var(--muted);letter-spacing:.6px}.side-nav{display:flex;flex-direction:column;gap:2px}.side-link{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--muted);font-weight:600;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}.side-link svg{width:20px;height:20px;flex-shrink:0}.side-link:hover{background:var(--recessed);color:var(--text)}.side-link.active{background:var(--accent-soft);color:var(--accent)}.side-divider{height:1px;background:var(--track);margin:var(--space-3) var(--space-2)}.side-caption{padding:0 var(--space-3);font-size:var(--fs-xs);color:var(--muted);letter-spacing:.6px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin:var(--space-6) 0 var(--space-4)}.section-head:first-child{margin-top:0}.section-title{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.7px;line-height:28px}.section-more{color:var(--muted);font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:2px;min-height:32px;white-space:nowrap;flex-shrink:0}.section-more:hover{color:var(--accent)}.hscroll{display:flex;gap:var(--space-3);overflow-x:auto;padding:2px var(--space-5) var(--space-3);margin:0 calc(var(--space-5) * -1);scroll-snap-type:x proximity;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}.hscroll>*{scroll-snap-align:start;flex-shrink:0}@media(min-width:900px){.hscroll{padding:2px var(--space-6) var(--space-3);margin:0 calc(var(--space-6) * -1)}}.muted{color:var(--muted)}.tabular{font-variant-numeric:tabular-nums}.hidden{display:none!important}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--strong);background:var(--card);box-shadow:var(--shadow-gel);transition:transform var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard)}.icon-btn svg{width:20px;height:20px}.icon-btn:hover{color:var(--accent);transform:translateY(-1px)}.icon-btn:active{transform:scale(.95)}.icon-btn.plain{background:transparent;box-shadow:none}.icon-btn.plain:hover{background:var(--recessed);color:var(--text);transform:none}.icon-btn.accent{background:var(--accent);color:var(--on-accent)}.icon-btn.accent:hover{background:var(--accent-strong);color:var(--on-accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-5);border-radius:var(--radius-full);font-weight:700;white-space:nowrap;background:var(--card);box-shadow:var(--shadow-gel);transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard),opacity var(--dur-fast)}.btn svg{width:18px;height:18px}.btn:active{transform:scale(.97)}.btn.primary{background:var(--accent);color:var(--on-accent)}.btn.primary:hover{background:var(--accent-strong)}.btn.ghost{background:transparent;box-shadow:none;color:var(--strong)}.btn.ghost:hover{background:var(--recessed)}.btn:disabled{opacity:.55;pointer-events:none}.search-field{flex:1;display:flex;align-items:center;gap:var(--space-2);min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-full);background:var(--recessed);color:var(--muted);transition:box-shadow var(--dur-fast) var(--ease-standard)}.search-field:focus-within{box-shadow:0 0 0 2px var(--accent-soft),var(--shadow-card);color:var(--accent)}.search-field svg{width:18px;height:18px;flex-shrink:0}.search-field input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);letter-spacing:.3px}.search-field input::placeholder{color:var(--muted)}.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:var(--space-4)}.pl-grid .pl-card{width:auto}@media(min-width:900px){.pl-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}}.pl-card{width:128px;cursor:pointer}.pl-card:active{transform:scale(.97);transition:transform var(--dur-fast) var(--ease-standard)}.pl-cover{position:relative;width:128px;height:128px;border-radius:var(--radius-md);overflow:hidden;background:var(--recessed);box-shadow:var(--shadow-card)}.pl-cover img{width:100%;height:100%;object-fit:cover}.pl-cover .pl-count{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:var(--radius-full);background:#00000073;backdrop-filter:blur(6px);color:#fff;font-size:11px;font-variant-numeric:tabular-nums}.pl-cover .pl-count svg{width:11px;height:11px}.pl-name{margin-top:var(--space-2);font-size:var(--fs-sm);line-height:17px;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pl-sub{margin-top:2px;font-size:11px;line-height:15px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:900px){.pl-card,.pl-cover{width:148px;height:auto}.pl-cover{height:148px}}.track-list{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}.track-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);min-height:60px;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard);animation:row-in .32s var(--ease-entrance) backwards;animation-delay:calc(min(var(--index, 0),8)*45ms)}@keyframes row-in{0%{opacity:0;transform:translateY(8px)}}.track-row:hover{background:var(--recessed)}.track-row.playing .tr-title{color:var(--accent)}.track-row+.track-row{box-shadow:0 -1px 0 var(--track)}.tr-index{width:28px;text-align:center;color:var(--muted);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;flex-shrink:0}.tr-index.top1{color:var(--accent);font-weight:800}.tr-index.top2{color:#e06a1f;font-weight:800}.tr-index.top3{color:#c99a2e;font-weight:800}.tr-art{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover;background:var(--recessed);flex-shrink:0;box-shadow:var(--shadow-card)}.tr-art-fallback{width:44px;height:44px;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--accent-soft),var(--recessed));display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}.tr-art-fallback svg{width:20px;height:20px}.tr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.tr-title{font-size:var(--fs-md);font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tr-sub{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}.tr-tag{padding:1px 6px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:10px;flex-shrink:0}.tr-actions{display:flex;align-items:center;gap:var(--space-1);flex-shrink:0}.tr-like{color:var(--muted)}.tr-like.liked{color:var(--accent)}.tr-duration{color:var(--muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;width:40px;text-align:right}.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.chip{min-height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 var(--space-4);border-radius:var(--radius-full);background:var(--card);box-shadow:var(--shadow-card);color:var(--strong);font-size:var(--fs-sm);transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast) var(--ease-standard)}.chip svg{width:14px;height:14px}.chip:hover{transform:translateY(-1px)}.chip:active{transform:scale(.96)}.chip.active{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-gel)}.chip.small{min-height:30px;padding:0 var(--space-3);font-size:var(--fs-xs)}.segmented{display:inline-flex;gap:2px;padding:3px;border-radius:var(--radius-full);background:var(--recessed)}.segmented button{min-height:34px;padding:0 var(--space-4);border-radius:var(--radius-full);color:var(--muted);font-size:var(--fs-sm);font-weight:600;transition:background var(--dur-fast),color var(--dur-fast)}.segmented button.active{background:var(--card);color:var(--text);box-shadow:var(--shadow-card)}.skeleton{position:relative;overflow:hidden;background:var(--recessed);border-radius:var(--radius-md)}.skeleton:after{content:"";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);animation:shimmer 1.6s ease-in-out infinite}[data-theme=netease] .skeleton:after,[data-theme=mist] .skeleton:after,[data-theme=tape] .skeleton:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent)}@keyframes shimmer{to{transform:translate(100%)}}.skel-track{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4)}.skel-art{width:44px;height:44px;border-radius:var(--radius-sm);flex-shrink:0}.skel-lines{flex:1;display:flex;flex-direction:column;gap:8px}.skel-line{height:12px;border-radius:6px}.state-block{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);text-align:center;color:var(--muted)}.state-block svg{width:44px;height:44px;opacity:.6}.state-block .state-title{color:var(--text);font-weight:700;font-size:var(--fs-lg);letter-spacing:-.2px}.state-block .state-desc{font-size:var(--fs-sm);max-width:280px}.toast-root{position:fixed;left:50%;bottom:calc(190px + env(safe-area-inset-bottom));transform:translate(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);pointer-events:none}@media(min-width:900px){.toast-root{bottom:96px}}.toast{display:inline-flex;align-items:center;gap:var(--space-2);max-width:min(86vw,360px);padding:10px var(--space-4);border-radius:var(--radius-full);background:var(--glass);backdrop-filter:blur(var(--glass-blur));color:var(--text);font-size:var(--fs-sm);box-shadow:var(--shadow-float);animation:toast-in .24s var(--ease-entrance)}.toast svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}.toast.leaving{animation:toast-out var(--dur-exit) var(--ease-standard) forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(10px) scale(.92)}}@keyframes toast-out{to{opacity:0;transform:translateY(6px) scale(.95)}}.sheet-mask{position:fixed;inset:0;z-index:var(--z-sheet);background:#0006;animation:fade-in var(--dur-base) var(--ease-standard)}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sheet);max-height:78dvh;display:flex;flex-direction:column;padding:var(--space-3) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:var(--card);box-shadow:var(--shadow-float);animation:sheet-up .26s var(--ease-entrance)}@media(min-width:900px){.sheet{inset:50% auto auto 50%;width:460px;border-radius:var(--radius-lg);transform:translate(-50%,-50%);animation:sheet-pop .22s var(--ease-entrance)}}.sheet-grip{width:40px;height:4px;border-radius:2px;background:var(--track);margin:0 auto var(--space-3)}.sheet-title{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.5px;margin-bottom:var(--space-4)}@keyframes fade-in{0%{opacity:0}}@keyframes sheet-up{0%{transform:translateY(60%);opacity:.6}}@keyframes sheet-pop{0%{transform:translate(-50%,-46%);opacity:0}}.menu{min-width:168px;padding:var(--space-2);border-radius:var(--radius-md);background:var(--card);box-shadow:var(--shadow-float);display:flex;flex-direction:column;gap:2px;animation:menu-in .16s var(--ease-entrance);transform-origin:top right}@keyframes menu-in{0%{opacity:0;transform:scale(.94) translateY(-4px)}}.menu-item{display:flex;align-items:center;gap:var(--space-3);min-height:42px;padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--text);font-size:var(--fs-sm);white-space:nowrap}.menu-item svg{width:17px;height:17px;color:var(--muted)}.menu-item:hover{background:var(--recessed)}.menu-item.danger,.menu-item.danger svg{color:var(--danger)}.menu-item.danger:hover{background:var(--danger-bg)}.menu-item .swatch{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px #00000014;flex-shrink:0}.menu-item .check{margin-left:auto;color:var(--accent)}.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.field label{font-size:var(--fs-sm);font-weight:600;color:var(--strong)}.field textarea,.field input[type=text],.field input[type=password]{min-height:44px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--recessed);border:0;outline:none;resize:vertical;transition:box-shadow var(--dur-fast)}.field textarea:focus,.field input:focus{box-shadow:0 0 0 2px var(--accent-soft)}.field .hint{font-size:var(--fs-xs);color:var(--muted)}.progress-thin{height:4px;border-radius:2px;background:var(--recessed);overflow:hidden}.progress-thin>i{display:block;height:100%;border-radius:2px;background:var(--accent);transition:width .2s var(--ease-standard)}.playerbar{position:fixed;left:var(--space-3);right:var(--space-3);bottom:calc(64px + env(safe-area-inset-bottom));z-index:var(--z-playerbar);border-radius:var(--radius-lg);background:var(--glass);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));box-shadow:var(--shadow-float);overflow:hidden;transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-entrance)}.playerbar.empty{opacity:0;transform:translateY(16px);pointer-events:none}.pb-inner{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);cursor:pointer}.pb-art{width:44px;height:44px;border-radius:var(--radius-md);object-fit:cover;background:var(--recessed);flex-shrink:0}.pb-meta{flex:1;min-width:0}.pb-title{font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pb-artist{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pb-controls{display:flex;align-items:center;gap:2px;flex-shrink:0}.pb-progress{height:3px;background:var(--track)}.pb-progress>i{display:block;height:100%;width:0;background:var(--accent);border-radius:0 2px 2px 0;transition:width .2s linear}@media(min-width:900px){.playerbar{left:var(--space-4);right:var(--space-4);bottom:var(--space-3);max-width:1148px;margin:0 auto}.pb-art{width:48px;height:48px}}.player-overlay{position:fixed;inset:0;z-index:var(--z-overlay);display:flex;flex-direction:column;background:var(--bg);opacity:0;transform:translateY(100%);pointer-events:none;transition:transform .32s var(--ease-entrance),opacity .24s var(--ease-standard)}.player-overlay.open{opacity:1;transform:translateY(0);pointer-events:auto}.player-overlay:before{content:"";position:absolute;inset:-20%;background:radial-gradient(60% 50% at 50% 8%,var(--accent-soft),transparent 70%);pointer-events:none}.po-panel{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}.po-top{position:relative;display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);padding-top:calc(var(--space-3) + env(safe-area-inset-top));min-height:56px}.po-top-title{text-align:center;min-width:0}.po-top-title .t1{font-size:var(--fs-md);font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.po-top-title .t2{font-size:var(--fs-xs);color:var(--muted)}.po-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-4);min-height:0}.vinyl{position:relative;width:min(72vw,300px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,transparent 30.5%,rgba(0,0,0,.9) 31%,#191919 100%);box-shadow:var(--shadow-float),var(--vinyl-glow);display:flex;align-items:center;justify-content:center;animation:vinyl-spin 24s linear infinite;animation-play-state:paused}.vinyl.spinning{animation-play-state:running}@keyframes vinyl-spin{to{transform:rotate(360deg)}}.vinyl:before{content:"";position:absolute;inset:6%;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.045) 0 1px,transparent 1px 5px);opacity:.8}.vinyl .vinyl-art{position:relative;width:62%;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 5px #000000d9;background:var(--recessed)}.vinyl .vinyl-hole{position:absolute;width:11%;aspect-ratio:1;border-radius:50%;background:var(--bg);box-shadow:0 1px 4px #0009}.vinyl-fallback{width:62%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ddd;background:linear-gradient(140deg,#3a3a3a,#222)}.vinyl-fallback svg{width:34%;height:34%;opacity:.9}.po-lyrics{position:absolute;left:0;right:0;bottom:4%;text-align:center;padding:0 var(--space-6);color:var(--muted);font-size:var(--fs-sm);line-height:21px;max-height:84px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}.po-lyrics .lrc-active{color:var(--text);font-weight:600}.po-body{position:relative;padding:0 var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom))}.po-title-row{display:flex;align-items:center;gap:var(--space-3)}.po-name{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.7px;line-height:28px}.po-artist{color:var(--muted);font-size:var(--fs-sm);margin-top:4px;display:flex;align-items:center;gap:8px}.po-artist .follow{color:var(--accent);font-size:var(--fs-xs)}.seek{display:flex;flex-direction:column;gap:6px;touch-action:none}.seek-rail{position:relative;height:22px;display:flex;align-items:center;cursor:pointer}.seek-rail .rail{height:4px;width:100%;border-radius:2px;background:var(--track);overflow:hidden}.seek-rail .fill{height:100%;width:0;background:var(--accent);border-radius:2px}.seek-rail .thumb{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 1px 4px #0000004d;transform:translate(-50%,-50%);left:0;transition:transform var(--dur-fast) var(--ease-standard)}.seek.ragging .thumb{transform:translate(-50%,-50%) scale(1.35)}.seek-times{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}.po-controls{display:flex;align-items:center;justify-content:space-between}.po-side{display:flex;align-items:center;gap:var(--space-2)}.play-fab{width:62px;height:62px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-gel);transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-fast)}.play-fab svg{width:26px;height:26px}.play-fab:active{transform:scale(.94)}.play-fab.loading svg{animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}.po-mid{display:flex;align-items:center;justify-content:center;gap:var(--space-6)}.po-mid .icon-btn{width:52px;height:52px}.po-mid .icon-btn svg{width:24px;height:24px}@media(min-width:900px){.player-overlay{background:#0000008c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:none;transition:opacity .24s var(--ease-standard)}.player-overlay.open{opacity:1}.player-overlay:before{inset:0;background:none}.po-panel{position:absolute;left:50%;top:50%;width:min(920px,94vw);height:min(640px,90vh);transform:translate(-50%,-50%) translateY(24px) scale(.96);border-radius:var(--radius-lg);background:var(--bg);box-shadow:var(--shadow-float);overflow:hidden;transition:transform .28s var(--ease-entrance)}.player-overlay.open .po-panel{transform:translate(-50%,-50%) translateY(0) scale(1)}.vinyl{width:min(34vh,280px)}.po-body{padding:0 var(--space-8) var(--space-6)}}.queue-row{display:flex;align-items:center;gap:var(--space-3);min-height:52px;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);cursor:pointer}.queue-row:hover{background:var(--recessed)}.queue-row.playing .q-title{color:var(--accent)}.queue-row .q-idx{width:20px;color:var(--muted);font-size:var(--fs-xs);text-align:center;font-variant-numeric:tabular-nums}.queue-row .q-title{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-row .q-artist{color:var(--muted);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}.discover-hero{position:relative;display:flex;align-items:flex-end;gap:var(--space-4);min-height:168px;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-card);overflow:hidden;cursor:pointer;animation:row-in .4s var(--ease-entrance) backwards}.discover-hero .hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .4s var(--ease-standard)}.discover-hero:hover .hero-art{transform:scale(1.03)}.discover-hero .hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0806040d 20%,#080604b8)}.discover-hero .hero-text{position:relative;color:#fff;min-width:0}.discover-hero .hero-eyebrow{font-size:var(--fs-xs);opacity:.85;letter-spacing:.8px;display:inline-flex;align-items:center;gap:6px}.discover-hero .hero-eyebrow svg{width:13px;height:13px}.discover-hero .hero-title{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.4px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78vw}.discover-hero .hero-sub{font-size:var(--fs-xs);opacity:.85;margin-top:4px}.stat-grid{display:flex;gap:var(--space-3);margin-top:var(--space-4)}.stat-card{flex:1;display:flex;flex-direction:column;gap:4px;padding:var(--space-4);border-radius:var(--radius-md);background:var(--card);box-shadow:var(--shadow-card);cursor:pointer;transition:transform var(--dur-fast) var(--ease-standard)}.stat-card:hover{transform:translateY(-2px)}.stat-card .sc-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}.stat-card .sc-icon svg{width:18px;height:18px}.stat-card .sc-title{font-weight:700;font-size:var(--fs-sm);margin-top:2px}.stat-card .sc-sub{font-size:var(--fs-xs);color:var(--muted)}.chart-entry{width:132px;padding:var(--space-3);border-radius:var(--radius-md);background:var(--card);box-shadow:var(--shadow-card);cursor:pointer;display:flex;flex-direction:column;gap:var(--space-2);transition:transform var(--dur-fast) var(--ease-standard)}.chart-entry:hover{transform:translateY(-2px)}.chart-entry:active{transform:scale(.97)}.chart-entry .ce-name{font-weight:700;font-size:var(--fs-sm);letter-spacing:-.2px}.chart-entry .ce-songs{display:flex;flex-direction:column;gap:3px;font-size:var(--fs-xs);color:var(--muted);min-width:0}.chart-entry .ce-songs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-entry .ce-songs span b{color:var(--accent);font-weight:700;margin-right:4px}.pl-head{display:flex;gap:var(--space-4);align-items:flex-end}.pl-head .plh-cover{width:116px;height:116px;border-radius:var(--radius-md);object-fit:cover;background:var(--recessed);box-shadow:var(--shadow-float);flex-shrink:0}.pl-head .plh-fallback{width:116px;height:116px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--accent-soft),var(--recessed));display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;box-shadow:var(--shadow-float)}.pl-head .plh-fallback svg{width:40px;height:40px}.plh-info{flex:1;min-width:0;padding-bottom:2px}.plh-name{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.7px;line-height:26px}.plh-meta{margin-top:var(--space-2);font-size:var(--fs-xs);color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px}.plh-actions{display:flex;gap:var(--space-2);margin-top:var(--space-4)}.ai-panel{padding:var(--space-5);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-card)}.ai-presets{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}.ai-params{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.ai-param-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:40px}.ai-param-row .label{font-size:var(--fs-sm);font-weight:600;color:var(--strong)}.ai-param-row .value{color:var(--accent);font-variant-numeric:tabular-nums;font-size:var(--fs-sm);font-weight:700}input[type=range].slider{-webkit-appearance:none;appearance:none;flex:1;height:22px;background:transparent;max-width:220px}input[type=range].slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--track)}input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);margin-top:-7px;box-shadow:var(--shadow-gel)}input[type=range].slider::-moz-range-track{height:4px;border-radius:2px;background:var(--track)}input[type=range].slider::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--accent)}.ai-result{margin-top:var(--space-5);padding:var(--space-4);border-radius:var(--radius-md);background:var(--recessed);display:flex;flex-direction:column;gap:var(--space-3);animation:row-in .32s var(--ease-entrance)}.ai-result .air-head{display:flex;align-items:center;gap:var(--space-3)}.ai-result .air-cover{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-strong));box-shadow:var(--shadow-gel);flex-shrink:0}.ai-result .air-cover svg{width:24px;height:24px}.ai-result .air-title{font-weight:700;font-size:var(--fs-lg);letter-spacing:-.2px}.ai-result .air-meta{font-size:var(--fs-xs);color:var(--muted);margin-top:3px}.ai-result .air-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.ai-engine-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-full);background:var(--success-bg);color:var(--success);font-size:10.5px;font-weight:700}.ai-history{display:flex;flex-direction:column;gap:var(--space-2)}.ai-hist-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);background:var(--card);box-shadow:var(--shadow-card);cursor:pointer}.ai-hist-row:active{transform:scale(.99)}.ai-hist-row .aih-title{font-weight:600;font-size:var(--fs-sm)}.ai-hist-row .aih-meta{font-size:var(--fs-xs);color:var(--muted);margin-top:2px}.upload-drop{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-4);border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--shadow-card);text-align:center;color:var(--muted);font-size:var(--fs-sm);cursor:pointer;transition:transform var(--dur-fast) var(--ease-standard)}.upload-drop:hover{transform:translateY(-2px)}.upload-drop .ud-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-gel)}.upload-drop .ud-icon svg{width:24px;height:24px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:52px;padding:var(--space-2) 0}.settings-row+.settings-row{box-shadow:0 -1px 0 var(--track)}.settings-row .s-label{font-weight:600;font-size:var(--fs-sm)}.settings-row .s-desc{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;max-width:220px}.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}.theme-card{padding:var(--space-3);border-radius:var(--radius-md);background:var(--recessed);text-align:center;cursor:pointer;transition:transform var(--dur-fast) var(--ease-standard)}.theme-card:hover{transform:translateY(-2px)}.theme-card.active{box-shadow:0 0 0 2px var(--accent)}.theme-card .tc-preview{display:flex;height:44px;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-card)}.theme-card .tc-preview i{flex:1}.theme-card .tc-name{margin-top:var(--space-2);font-size:var(--fs-xs);font-weight:600}.page-nav{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}.page-nav .back-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);background:var(--card);box-shadow:var(--shadow-gel)}.page-nav .back-btn:active{transform:scale(.94)}.page-nav .back-btn svg{width:18px;height:18px}
