:root{--zoom: 1;--bg-primary: #050505;--bg-secondary: #0f0f0f;--bg-tertiary: #181818;--bg-elevated: #222222;--bg-hover: #2c2c2c;--bg-active: #3a3a3a;--accent: #1ed760;--accent-hover: #1fdf64;--accent-dim: rgba(30, 215, 96, .12);--accent-glow: rgba(30, 215, 96, .4);--accent-gradient: linear-gradient(135deg, #1ed760, #1db954);--text-primary: #ffffff;--text-secondary: #b3b3b3;--text-tertiary: #727272;--text-on-accent: #000000;--surface: rgba(255, 255, 255, .05);--surface-glass: rgba(255, 255, 255, .06);--surface-glass-hover: rgba(255, 255, 255, .1);--surface-glass-thick: rgba(255, 255, 255, .14);--surface-border: rgba(255, 255, 255, .1);--surface-border-bright: rgba(255, 255, 255, .18);--glass-blur: blur(40px);--glass-blur-heavy: blur(60px);--glass-blur-light: blur(20px);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-2xl: 32px;--space-3xl: 48px;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 18px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 4px 16px rgba(0, 0, 0, .4);--shadow-md: 0 8px 32px rgba(0, 0, 0, .5);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .6);--shadow-glow: 0 0 40px rgba(30, 215, 96, .25);--shadow-inner: inset 0 1px 0 rgba(255, 255, 255, .06);--shadow-glass: 0 8px 32px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);--transition-fast: .15s cubic-bezier(.25, .46, .45, .94);--transition-normal: .3s cubic-bezier(.25, .46, .45, .94);--transition-slow: .5s cubic-bezier(.16, 1, .3, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1);--font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-xs: .7rem;--font-sm: .8rem;--font-base: .9rem;--font-md: 1rem;--font-lg: 1.25rem;--font-xl: 1.5rem;--font-2xl: 2rem;--font-3xl: 2.5rem;--nav-height: 64px;--miniplayer-height: 60px;--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-top: env(safe-area-inset-top, 0px);--sidebar-width: 0px;--content-max-width: 100%}[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-tertiary: #ebebeb;--bg-elevated: #fafafa;--bg-hover: #e0e0e0;--bg-active: #d5d5d5;--text-primary: #121212;--text-secondary: #555555;--text-tertiary: #888888;--text-on-accent: #ffffff;--surface: rgba(0, 0, 0, .05);--surface-glass: rgba(255, 255, 255, .7);--surface-glass-hover: rgba(255, 255, 255, .9);--surface-glass-thick: rgba(255, 255, 255, .95);--surface-border: rgba(0, 0, 0, .1);--surface-border-bright: rgba(0, 0, 0, .15);--shadow-sm: 0 4px 16px rgba(0, 0, 0, .08);--shadow-md: 0 8px 32px rgba(0, 0, 0, .12);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .16);--shadow-glass: 0 8px 32px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .4)}[data-theme=classic]{--bg-primary: #121212;--bg-secondary: #181818;--bg-tertiary: #1f1f1f;--bg-elevated: #242424;--bg-hover: #2a2a2a;--bg-active: #313131;--accent: #1ed760;--accent-hover: #20e066;--accent-dim: rgba(30, 215, 96, .16);--accent-glow: rgba(30, 215, 96, .12);--accent-gradient: linear-gradient(135deg, #1ed760, #1db954);--text-primary: #ffffff;--text-secondary: #b3b3b3;--text-tertiary: #8a8a8a;--text-on-accent: #000000;--surface: #1b1b1b;--surface-glass: #1f1f1f;--surface-glass-hover: #272727;--surface-glass-thick: #2c2c2c;--surface-border: rgba(255, 255, 255, .08);--surface-border-bright: rgba(255, 255, 255, .12);--glass-blur: none;--glass-blur-heavy: none;--glass-blur-light: none;--shadow-sm: 0 4px 14px rgba(0, 0, 0, .22);--shadow-md: 0 8px 20px rgba(0, 0, 0, .24);--shadow-lg: 0 12px 28px rgba(0, 0, 0, .28);--shadow-glow: none;--shadow-inner: none;--shadow-glass: none}@media(min-width:768px){:root{--font-xs: .7rem;--font-sm: .8rem;--font-base: .875rem;--font-md: .95rem;--font-lg: 1.1rem;--font-xl: 1.3rem;--font-2xl: 1.6rem;--content-max-width: 100%;--space-xl: 24px;--space-2xl: 32px}}@media(min-width:1024px){:root{--content-max-width: 100%;--miniplayer-height: 64px;--font-2xl: 1.7rem;--font-xl: 1.35rem}}@media(min-width:768px){.page{padding:var(--space-xl) var(--space-2xl);padding-bottom:calc(var(--nav-height) + var(--miniplayer-height) + var(--safe-bottom) + 48px)}.track-card.vertical{width:140px}.track-card-art{width:140px;height:140px}.grid{grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}.search-input{padding:var(--space-md) var(--space-xl);padding-left:52px}.horizontal-scroll{gap:var(--space-lg);padding-left:var(--space-2xl);padding-right:var(--space-2xl)}}@media(min-width:1024px){.page{padding:var(--space-xl) var(--space-2xl);padding-bottom:calc(var(--nav-height) + var(--miniplayer-height) + var(--safe-bottom) + 48px)}.track-card.vertical{width:180px}.track-card-art{width:180px;height:180px}.grid{grid-template-columns:repeat(4,1fr)}.nowplaying-page .np-body{flex-direction:row;align-items:center;gap:var(--space-2xl);max-width:1000px;margin:0 auto}.nowplaying-page .np-art-lyrics-col{flex:0 0 400px}.nowplaying-page .np-info{flex:1}.horizontal-scroll{gap:var(--space-xl)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:var(--font-family);color:var(--text-primary);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior-y:contain;background-color:var(--bg-primary)}#app{min-height:100dvh;min-height:100vh;display:flex;flex-direction:column;position:relative;padding-top:var(--safe-top)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bg-active);border-radius:var(--radius-full)}.page{flex:1;padding:var(--space-xl);padding-bottom:calc(var(--nav-height) + var(--miniplayer-height) + var(--safe-bottom) + var(--space-xl));animation:pageIn .5s var(--transition-slow);overflow-y:auto;-webkit-overflow-scrolling:touch}.page-ambient{position:relative}.page-ambient:before,.page-ambient:after{content:"";position:fixed;border-radius:50%;opacity:.15;pointer-events:none;z-index:-1;animation:ambientFloat 20s ease-in-out infinite alternate;will-change:transform}.page-ambient:before{width:350px;height:350px;background:radial-gradient(circle,#1ed760 0%,#0ea5e9 50%,transparent 70%);top:-50px;right:-80px}.page-ambient:after{width:300px;height:300px;background:radial-gradient(circle,#7c4dff 0%,#e040fb 50%,transparent 70%);bottom:100px;left:-60px;animation-delay:-10s;animation-direction:alternate-reverse}.page-ambient.ambient-library:before{background:radial-gradient(circle,#1ed760 0%,#00c9ff 50%,transparent 70%)}.page-ambient.ambient-library:after{background:radial-gradient(circle,#ff6b6b 0%,#ffa726 50%,transparent 70%)}.page-ambient.ambient-settings:before{background:radial-gradient(circle,#7c4dff 0%,#448aff 50%,transparent 70%)}.page-ambient.ambient-settings:after{background:radial-gradient(circle,#1ed760 0%,#00e676 50%,transparent 70%)}.page-ambient.ambient-search:before{background:radial-gradient(circle,#ff4081 0%,#f50057 50%,transparent 70%)}.page-ambient.ambient-search:after{background:radial-gradient(circle,#00bcd4 0%,#1ed760 50%,transparent 70%)}[data-theme=classic] .page-ambient:before,[data-theme=classic] .page-ambient:after{display:none;animation:none;opacity:0}[data-theme=classic] .page{animation:none}@keyframes ambientFloat{0%{transform:translate(0) scale(1)}33%{transform:translate(30px,-20px) scale(1.1)}66%{transform:translate(-20px,30px) scale(.95)}to{transform:translate(10px,-10px) scale(1.05)}}@keyframes pageIn{0%{opacity:0;transform:scale(.98) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes toastIn{0%{transform:translate(100%) scale(.9);opacity:0}to{transform:translate(0) scale(1);opacity:1}}@keyframes skeleton{0%{background-position:-200% 0}to{background-position:200% 0}}.text-greeting{font-size:var(--font-2xl);font-weight:700;letter-spacing:-.02em;line-height:1.2}.text-section-title{font-size:var(--font-lg);font-weight:600;letter-spacing:-.01em;color:var(--text-primary)}.text-subtitle{font-size:var(--font-sm);color:var(--text-secondary);font-weight:400}.text-tiny{font-size:var(--font-xs);color:var(--text-tertiary)}.section{margin-bottom:var(--space-2xl)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.horizontal-scroll{display:flex;gap:var(--space-md);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-sm);scrollbar-width:none;will-change:transform,scroll-position;transform:translateZ(0)}.horizontal-scroll::-webkit-scrollbar{display:none}.horizontal-scroll>*{scroll-snap-align:start;flex-shrink:0}.material-symbols-rounded{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24;vertical-align:middle}.chip{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);background:var(--surface-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:var(--text-primary);font-size:var(--font-sm);font-weight:500;cursor:pointer;transition:all var(--transition-normal);white-space:nowrap;border:1px solid var(--surface-border);box-shadow:var(--shadow-inner)}.chip:hover{background:var(--surface-glass-hover);border-color:var(--surface-border-bright);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.chip.active{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent);box-shadow:0 0 20px #1ed7604d}.chip:active{transform:scale(.93)}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:var(--surface-glass);backdrop-filter:var(--glass-blur-light);-webkit-backdrop-filter:var(--glass-blur-light);color:var(--text-primary);cursor:pointer;border-radius:var(--radius-full);transition:all var(--transition-normal);-webkit-tap-highlight-color:transparent;border:1px solid transparent}.btn-icon:hover{background:var(--surface-glass-hover);border-color:var(--surface-border);box-shadow:var(--shadow-sm)}.btn-icon:active{transform:scale(.88);background:var(--surface-glass-thick)}.btn-icon .material-symbols-rounded{font-size:24px}.btn-play{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:none;background:var(--accent);color:var(--text-on-accent);cursor:pointer;border-radius:var(--radius-full);transition:all var(--transition-spring);box-shadow:var(--shadow-glow),0 4px 20px #1ed7604d}.btn-play:hover{transform:scale(1.08);box-shadow:0 0 60px #1ed76059,0 8px 30px #1ed76033}[data-theme=classic] .chip,[data-theme=classic] .btn-icon,[data-theme=classic] .glass,[data-theme=classic] .glass-thick,[data-theme=classic] .np-menu-modal{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}[data-theme=classic] .btn-play{box-shadow:none}[data-theme=classic] .btn-play:hover,[data-theme=classic] .chip:hover,[data-theme=classic] .btn-icon:hover{transform:none;box-shadow:none}.btn-play:active{transform:scale(.92)}.btn-play .material-symbols-rounded{font-size:28px}.track-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);-webkit-tap-highlight-color:transparent;border:1px solid transparent}.track-item:hover{background:var(--surface-glass);backdrop-filter:var(--glass-blur-light);-webkit-backdrop-filter:var(--glass-blur-light);border-color:var(--surface-border);box-shadow:var(--shadow-inner)}.track-item:active{background:var(--surface-glass-hover);transform:scale(.98)}.track-item.playing{background:var(--accent-dim);border-color:#1ed76026;box-shadow:0 0 20px #1ed76014}.track-item-art{width:48px;height:48px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;background:var(--bg-tertiary)}.track-item-info{flex:1;min-width:0}.track-item-title{font-size:var(--font-base);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-primary)}.track-item.playing .track-item-title{color:var(--accent)}.track-item-artist{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-item-duration{font-size:var(--font-sm);color:var(--text-tertiary);flex-shrink:0}.glass{background:var(--surface-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--surface-border);box-shadow:var(--shadow-glass)}.glass-thick{background:var(--surface-glass-thick);backdrop-filter:var(--glass-blur-heavy);-webkit-backdrop-filter:var(--glass-blur-heavy);border:1px solid var(--surface-border-bright);box-shadow:var(--shadow-glass)}.skeleton{background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-hover) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;animation:skeleton 1.5s infinite}.search-input-wrapper{position:relative;margin-bottom:var(--space-xl)}.search-input-wrapper .material-symbols-rounded{position:absolute;left:var(--space-lg);top:50%;transform:translateY(-50%);color:var(--text-tertiary);font-size:20px}.search-input{width:100%;padding:var(--space-md) var(--space-lg);padding-left:48px;border:1px solid var(--surface-border);border-radius:var(--radius-full);background:var(--surface-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-base);outline:none;transition:all var(--transition-normal);box-shadow:var(--shadow-inner)}.search-input::placeholder{color:var(--text-tertiary)}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim),var(--shadow-md);background:var(--surface-glass-hover)}img{display:block}img[src=""],img:not([src]){visibility:hidden}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-3xl) var(--space-xl);text-align:center;gap:var(--space-md);color:var(--text-tertiary)}.empty-state .material-symbols-rounded{font-size:48px;opacity:.5}.empty-state p{color:var(--text-secondary);font-size:var(--font-md)}.page{animation:pageIn .3s cubic-bezier(.16,1,.3,1) forwards}.page.fade-out{animation:pageOut .25s cubic-bezier(.16,1,.3,1) forwards}@keyframes pageIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes pageOut{to{opacity:0;transform:translateY(10px)}}.np-art.vinyl-mode{border-radius:50%!important;box-shadow:0 0 0 8px #000c,0 0 20px #00000080;animation:vinylSpin 4s linear infinite;object-fit:cover}.np-art.vinyl-mode.paused{animation-play-state:paused}@keyframes vinylSpin{0%{transform:rotate(0)}}.skeleton{background:linear-gradient(90deg,#ffffff0d,#ffffff26,#ffffff0d);background-size:200% 100%;animation:shimmer 1.5s infinite linear;border-radius:var(--radius-md)}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-card{display:flex;flex-direction:column;gap:8px;width:140px;flex-shrink:0}.skeleton-img{width:140px;height:140px;border-radius:var(--radius-md)}.skeleton-text{height:14px;width:80%;border-radius:4px}.skeleton-text.short{width:50%}