:root{--color-primary: #1db954;--color-primary-light: #1ed760;--color-primary-dark: #169c46;--color-primary-glow: rgba(29, 185, 84, .4);--color-bg-primary: #0a0a0a;--color-bg-secondary: #121212;--color-bg-tertiary: #181818;--color-bg-elevated: #242424;--color-bg-hover: rgba(255, 255, 255, .1);--color-text-primary: #ffffff;--color-text-secondary: #b3b3b3;--color-text-muted: #727272;--color-accent-blue: #3b82f6;--color-accent-purple: #a855f7;--color-accent-pink: #ec4899;--color-accent-orange: #f97316;--color-accent-red: #ef4444;--gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, #15803d 100%);--gradient-purple: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);--gradient-blue: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);--gradient-sunset: linear-gradient(135deg, #f97316 0%, #ec4899 100%);--gradient-dark: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--color-bg-primary) 100%);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, .7);--shadow-glow: 0 0 30px var(--color-primary-glow);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: .5s cubic-bezier(.34, 1.56, .64, 1);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--radius-full: 9999px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);background:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.5}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:5px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#fff3;border:3px solid transparent;background-clip:padding-box}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}@media(max-width:768px){::-webkit-scrollbar{width:0;height:0}}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.pt-safe{padding-top:env(safe-area-inset-top,0)}.pb-safe{padding-bottom:env(safe-area-inset-bottom,0)}.pl-safe{padding-left:env(safe-area-inset-left,0)}.pr-safe{padding-right:env(safe-area-inset-right,0)}.touch-pan-y{touch-action:pan-y}.touch-pan-x{touch-action:pan-x}.touch-manipulation{touch-action:manipulation}.select-none{-webkit-user-select:none;user-select:none}button,a,[role=button]{-webkit-tap-highlight-color:transparent}@keyframes pulse-glow{0%,to{box-shadow:0 0 0 0 var(--color-primary-glow)}50%{box-shadow:0 0 0 12px transparent}}.animate-pulse-glow{animation:pulse-glow 2s infinite}@keyframes waveform{0%,to{height:20%}50%{height:100%}}.waveform-bar{animation:waveform 1s ease-in-out infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fadeIn .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.animate-slide-up{animation:slideUp .4s ease-out}@keyframes slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.animate-slide-down{animation:slideDown .4s ease-out}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.animate-scale-in{animation:scaleIn .2s ease-out}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{transform:scale(1);opacity:1}}.animate-bounce-in{animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1)}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-shimmer{background:linear-gradient(90deg,var(--color-bg-tertiary) 25%,var(--color-bg-elevated) 50%,var(--color-bg-tertiary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin-slow{animation:spin-slow 3s linear infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.animate-float{animation:float 3s ease-in-out infinite}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px var(--color-primary-glow),0 0 40px #1db95433}50%{box-shadow:0 0 30px var(--color-primary-glow),0 0 60px #1db9544d}}.animate-glow-pulse{animation:glow-pulse 2s ease-in-out infinite}@keyframes playing-bar-1{0%,to{height:30%}25%{height:100%}50%{height:60%}75%{height:80%}}@keyframes playing-bar-2{0%,to{height:70%}25%{height:40%}50%{height:100%}75%{height:50%}}@keyframes playing-bar-3{0%,to{height:50%}25%{height:80%}50%{height:30%}75%{height:100%}}@keyframes playing-bar-4{0%,to{height:80%}25%{height:50%}50%{height:70%}75%{height:30%}}.playing-bars{display:flex;align-items:flex-end;gap:2px;height:16px}.playing-bars span{width:3px;background:var(--color-primary);border-radius:2px}.playing-bars span:nth-child(1){animation:playing-bar-1 .8s ease-in-out infinite}.playing-bars span:nth-child(2){animation:playing-bar-2 .8s ease-in-out infinite}.playing-bars span:nth-child(3){animation:playing-bar-3 .8s ease-in-out infinite}.playing-bars span:nth-child(4){animation:playing-bar-4 .8s ease-in-out infinite}.transition-smooth{transition:all var(--transition-slow)}.transition-fast{transition:all var(--transition-fast)}.glass{background:#121212b8;backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2)}.glass-light{background:#ffffff0d;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #1db95426}.btn-glow:hover{box-shadow:var(--shadow-glow)}.btn-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.tabular-nums{font-variant-numeric:tabular-nums}.text-gradient-primary{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-gradient-purple{background:var(--gradient-purple);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.card-hover{transition:all var(--transition-slow)}.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.img-hover-zoom{overflow:hidden}.img-hover-zoom img{transition:transform var(--transition-slow)}.img-hover-zoom:hover img{transform:scale(1.05)}.overlay-gradient{position:relative}.overlay-gradient:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 60%);pointer-events:none}.toast-success{background:var(--gradient-primary)!important}.toast-error{background:linear-gradient(135deg,var(--color-accent-red) 0%,#dc2626 100%)!important}.toast-info{background:var(--gradient-blue)!important}.skeleton{background:linear-gradient(90deg,var(--color-bg-tertiary) 0%,var(--color-bg-elevated) 20%,var(--color-bg-elevated) 40%,var(--color-bg-tertiary) 100%);background-size:400% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md)}.skeleton-text{height:16px;border-radius:var(--radius-sm)}.skeleton-avatar{border-radius:var(--radius-full)}.premium-badge{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;font-size:10px;font-weight:700;padding:2px 6px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.5px}.lyrics-container{font-size:clamp(1.25rem,3vw,2rem);line-height:1.6}.lyrics-line{transition:all var(--transition-normal);cursor:pointer;padding:.25rem 0}.lyrics-line:hover{color:var(--color-text-primary)}.lyrics-line.active{color:var(--color-primary);transform:scale(1.02);font-weight:600}.lyrics-line.past{color:var(--color-text-muted)}@keyframes like-pop{0%{transform:scale(1)}25%{transform:scale(1.3)}50%{transform:scale(.95)}to{transform:scale(1)}}.like-animate{animation:like-pop .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes heart-burst{0%{transform:scale(0);opacity:1}to{transform:scale(2);opacity:0}}.heart-burst:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border:2px solid var(--color-primary);border-radius:50%;animation:heart-burst .4s ease-out forwards}.lyrics-scroll-panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.lyrics-line-row{transition:color .25s ease,opacity .25s ease,transform .25s ease,text-shadow .25s ease;transform-origin:left center;will-change:auto}.lyrics-line-row.is-active{transform:scale(1.03)}.lyrics-line-row.is-past{color:#ffffff47;opacity:1}.lyrics-line-row.is-upcoming{color:#ffffff7a}.lyrics-line-row.is-flash{outline:1px solid rgba(255,255,255,.2);border-radius:8px;padding-left:4px;padding-right:4px;margin-left:-4px;margin-right:-4px}@media(prefers-reduced-motion:reduce){.lyrics-line-row{transition:none}.lyrics-line-row.is-active{transform:none}}@keyframes lyrics-glow{0%,to{text-shadow:0 0 20px rgba(34,197,94,.3)}50%{text-shadow:0 0 40px rgba(34,197,94,.5),0 0 60px rgba(34,197,94,.3)}}.lyrics-active-glow{animation:lyrics-glow 2s ease-in-out infinite}.progress-bar{height:4px;background:var(--color-bg-elevated);border-radius:var(--radius-full);cursor:pointer;position:relative}.progress-bar:hover{height:6px}.progress-bar:hover .progress-thumb{opacity:1;transform:scale(1)}.progress-fill{height:100%;background:var(--color-text-secondary);border-radius:var(--radius-full);transition:width .1s linear}.progress-bar:hover .progress-fill{background:var(--color-primary)}.progress-thumb{position:absolute;width:12px;height:12px;background:var(--color-text-primary);border-radius:var(--radius-full);top:50%;transform:translate(-50%,-50%) scale(0);opacity:0;transition:all var(--transition-fast);box-shadow:var(--shadow-md);pointer-events:none}.progress-bar:hover .progress-thumb,.progress-bar:active .progress-thumb{opacity:1;transform:translate(-50%,-50%) scale(1)}.volume-slider{width:100px;height:4px;background:var(--color-bg-elevated);border-radius:var(--radius-full);cursor:pointer}.volume-slider:hover{background:var(--color-bg-hover)}@media(max-width:768px){button:not(.btn-sm),a:not(.link-sm),[role=button]:not(.btn-sm){min-height:44px;min-width:44px}input,select,textarea{font-size:16px}*{-webkit-overflow-scrolling:touch}.mobile-no-scrollbar::-webkit-scrollbar{display:none}.mobile-no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}}@media(hover:none){.hover\:bg-white\/10:active{background-color:#ffffff1a}.hover\:bg-white\/5:active{background-color:#ffffff0d}.hover\:text-white:active{color:#fff}.hover\:scale-105:active{transform:scale(1.02)}}@media(max-height:500px){.fixed.bottom-0{position:relative}}@media(prefers-color-scheme:dark){::selection{background:var(--color-primary);color:#000}}.eq-bar{width:4px;background:var(--color-primary);border-radius:2px;transform-origin:bottom}.vinyl-spin{animation:spin-slow 8s linear infinite}.vinyl-spin.paused{animation-play-state:paused}@keyframes radio-wave{0%{transform:scale(1);opacity:.8}to{transform:scale(2.5);opacity:0}}.radio-waves span{position:absolute;border:2px solid var(--color-primary);border-radius:50%;animation:radio-wave 2s cubic-bezier(0,0,.2,1) infinite}.radio-waves span:nth-child(2){animation-delay:.5s}.radio-waves span:nth-child(3){animation-delay:1s}.gradient-border{position:relative;background:var(--color-bg-secondary)}.gradient-border:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;padding:2px;background:var(--gradient-primary);border-radius:inherit;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;pointer-events:none}.hover-glow{transition:all var(--transition-slow)}.hover-glow:hover{box-shadow:0 0 40px #1db95426,0 0 80px #1db9541a}.counter{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.grid-auto-fill{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}@media(min-width:768px){.grid-auto-fill{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}}@keyframes page-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-transition-enter{animation:page-enter .3s ease-out}@keyframes list-item-enter{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}.list-item-animate{animation:list-item-enter .25s ease-out backwards}.track-card{transition:transform .2s ease,box-shadow .2s ease,background-color .15s ease}.track-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px -5px #0006}.track-card:active{transform:translateY(0);transition-duration:.1s}@keyframes play-button-pop{0%{transform:scale(1)}50%{transform:scale(.92)}to{transform:scale(1)}}.play-button-click{animation:play-button-pop .2s ease-out}.cover-hover{overflow:hidden;border-radius:var(--radius-lg)}.cover-hover img{transition:transform .4s cubic-bezier(.16,1,.3,1)}.cover-hover:hover img{transform:scale(1.06)}.icon-transition{transition:transform .15s ease,color .15s ease,opacity .15s ease}.icon-transition:hover{transform:scale(1.1)}.icon-transition:active{transform:scale(.95)}.lyrics-line-smooth{transition:color .25s ease,opacity .25s ease,transform .25s ease;transform-origin:left center}.lyrics-line-smooth.active{transform:scale(1.03)}.lyrics-line-smooth.past{opacity:.4}@keyframes scroll-indicator-pulse{0%,to{opacity:.6}50%{opacity:1}}.scroll-indicator{animation:scroll-indicator-pulse 2s ease-in-out infinite}@keyframes player-slide-up{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.player-enter{animation:player-slide-up .35s cubic-bezier(.16,1,.3,1)}.volume-control{transition:transform .1s ease}.volume-control:active{transform:scale(.98)}.progress-thumb-smooth{transition:left .1s linear,transform .15s ease,opacity .15s ease}.control-button-active{position:relative}.control-button-active:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%);width:4px;height:4px;background:var(--color-primary);border-radius:50%}.touch-feedback{transition:background-color .1s ease,transform .1s ease}.touch-feedback:active{background-color:#ffffff1a;transform:scale(.98)}@keyframes swipe-hint{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(-8px);opacity:1}}.swipe-hint{animation:swipe-hint 2s ease-in-out infinite}@keyframes haptic-press{0%{transform:scale(1)}50%{transform:scale(.96)}to{transform:scale(1)}}.haptic-press:active{animation:haptic-press .15s ease-out}@keyframes queue-item-enter{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.queue-item-animate{animation:queue-item-enter .2s ease-out backwards}@keyframes now-playing-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}.now-playing-indicator{animation:now-playing-bounce 1s ease-in-out infinite}@keyframes skeleton-pulse{0%{opacity:.6}50%{opacity:.4}to{opacity:.6}}.skeleton-improved{animation:skeleton-pulse 1.5s ease-in-out infinite;background:linear-gradient(110deg,var(--color-bg-tertiary) 8%,var(--color-bg-elevated) 18%,var(--color-bg-tertiary) 33%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}@keyframes content-fade-in{0%{opacity:0}to{opacity:1}}.content-loaded{animation:content-fade-in .3s ease-out}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.playing-bars span{animation:none!important;height:60%!important}}.focus-ring:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@keyframes toast-slide-in{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast-animate-in{animation:toast-slide-in .3s cubic-bezier(.16,1,.3,1)}@keyframes checkmark-draw{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}.checkmark-animate{stroke-dasharray:100;animation:checkmark-draw .4s ease-out forwards}