:root{--mobile:320px;--tablet:768px;--desktop:1024px;--large-desktop:1440px;--sidebar-width:240px;--sidebar-width-collapsed:60px;--header-height:64px;--z-sidebar:100;--z-header:200;--z-modal:1000;--z-tooltip:1100;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-xxl:3rem}@media (min-width:768px){:root{--is-tablet-up:1}}@media (min-width:1024px){:root{--is-desktop-up:1}}@media (min-width:1440px){:root{--is-large-desktop-up:1}}.container{max-width:1440px;max-width:var(--large-desktop);padding:0 1rem;width:100%}@media (min-width:768px){.container{padding:0 1.5rem;padding:0 var(--spacing-lg)}}@media (min-width:1024px){.container{padding:0 2rem;padding:0 var(--spacing-xl)}}.grid{grid-gap:1rem;grid-gap:var(--spacing-md);gap:1rem;gap:var(--spacing-md)}.grid-cols-1{grid-template-columns:1fr}@media (min-width:768px){.grid-cols-2-tablet{grid-template-columns:repeat(2,1fr)}.grid-cols-3-tablet{grid-template-columns:repeat(3,1fr)}}@media (min-width:1024px){.grid-cols-2-desktop{grid-template-columns:repeat(2,1fr)}.grid-cols-3-desktop{grid-template-columns:repeat(3,1fr)}.grid-cols-4-desktop{grid-template-columns:repeat(4,1fr)}}.mobile-only{display:block}.desktop-up,.tablet-up{display:none}@media (min-width:768px){.mobile-only{display:none}.tablet-up{display:block}}@media (min-width:1024px){.desktop-up{display:block}}@media (min-width:768px){.text-lg{font-size:1.25rem}.text-xl{font-size:1.5rem}.text-2xl{font-size:1.875rem}}@media (min-width:1024px){.text-xl{font-size:1.75rem}.text-2xl{font-size:2.25rem}}:focus,[tabindex]:focus,a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:2px solid #1db954;outline:2px solid var(--color-focus,#1db954);outline-offset:2px}[tabindex]:focus,a:focus,button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px #1db95433}a:focus,button:focus{outline-style:solid}@media (prefers-contrast:high){:focus,[tabindex]:focus,a:focus,button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 6px #fffc;outline:3px solid currentColor;outline-offset:2px}}:root{--color-primary:#1db954;--color-primary-hover:#1ed760;--color-primary-dark:#169c46;--color-background:#121212;--color-background-elevated:#181818;--color-background-card:#282828;--color-text-primary:#fff;--color-text-secondary:#b3b3b3;--color-text-muted:#6a6a6a;--color-focus:#1db954;--color-error:#e22134;--color-warning:orange;--color-success:#1db954;--color-border:#404040;--color-border-light:#535353}@media (prefers-contrast:high){:root{--color-background:#000;--color-background-elevated:#1a1a1a;--color-background-card:#333;--color-text-primary:#fff;--color-text-secondary:#ccc;--color-text-muted:#999;--color-border:#666;--color-border-light:#888}.PlaylistCard,.Track,.header,.player,.search-bar,.sidebar{border:1px solid #404040;border:1px solid var(--color-border)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.PlaylistCard:hover,.Track:hover,.player__loading-spinner,.player__progress-fill,.search-bar__dropdown,.sidebar,button:hover{transform:none!important}}body{font-size:16px}@media (min-width:768px){body{font-size:18px}}@media (prefers-contrast:high){body{font-size:18px;line-height:1.6}.PlaylistCard h3,.Track h3,.search-results__title{font-size:1.25em;font-weight:600}}.Track-action,.player__control-btn,.search-results__tab,.sidebar__nav-link,a,button,input[type=button],input[type=reset],input[type=submit]{min-height:44px;min-width:44px;padding:8px 12px}@media (max-width:767px){.Track-action,.player__control-btn,.sidebar__nav-link,a,button{min-height:48px;min-width:48px;padding:12px 16px}}.player--loading,.search-results--loading{opacity:.7}.player__loading-spinner{animation:spin 1s linear infinite}@media (prefers-reduced-motion:reduce){.player__loading-spinner{animation:none}.player__loading-spinner:after{color:#b3b3b3;color:var(--color-text-secondary);content:"Loading...";font-size:12px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}}.Track-no-preview,.error-message{background-color:#e221341a;border:1px solid #e22134;border:1px solid var(--color-error);border-radius:4px;color:#e22134;color:var(--color-error);padding:8px 12px}.success-message{background-color:#1db9541a;border:1px solid #1db954;border:1px solid var(--color-success);border-radius:4px;color:#1db954;color:var(--color-success);padding:8px 12px}.skip-links__link:focus{clip:auto!important;height:auto!important;left:0!important;overflow:visible!important;position:fixed!important;top:0!important;width:auto!important;z-index:10000!important}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sr-only:focus{clip:auto;background-color:#1db954;background-color:var(--color-primary);border-radius:4px;color:#fff;color:var(--color-text-primary);height:auto;margin:0;overflow:visible;padding:4px 8px;position:static;white-space:normal;width:auto}@media (prefers-color-scheme:dark){:root{--color-background:#000;--color-background-elevated:#121212;--color-background-card:#1a1a1a;--color-text-primary:#fff;--color-text-secondary:#ccc;--color-border:#333}}@media print{.header__nav,.player,.sidebar,.skip-links{display:none!important}body{background:#fff!important;color:#000!important}a[href]:after{content:" (" attr(href) ")"}}:root{--font-primary:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--font-mono:"SF Mono","Monaco","Inconsolata","Roboto Mono","Consolas","Courier New",monospace;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--leading-none:1;--leading-tight:1.25;--leading-snug:1.375;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--tracking-tighter:-0.05em;--tracking-tight:-0.025em;--tracking-normal:0em;--tracking-wide:0.025em;--tracking-wider:0.05em;--tracking-widest:0.1em;--space-0:0;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem}@media (min-width:768px){:root{--text-lg:1.25rem;--text-xl:1.375rem;--text-2xl:1.625rem;--text-3xl:2.125rem;--text-4xl:2.75rem;--text-5xl:3.5rem;--text-6xl:4.5rem}}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:1rem;font-weight:400;letter-spacing:0;letter-spacing:var(--tracking-normal);line-height:1.5}.heading-1,h1{font-size:2.25rem;font-size:var(--text-4xl);font-weight:700;font-weight:var(--font-weight-bold);margin-bottom:1.5rem;margin-bottom:var(--space-6)}.heading-1,.heading-2,h1,h2{letter-spacing:-.025em;letter-spacing:var(--tracking-tight);line-height:1.25;line-height:var(--leading-tight)}.heading-2,h2{font-size:1.875rem;font-size:var(--text-3xl);margin-bottom:1.25rem;margin-bottom:var(--space-5)}.heading-2,.heading-3,h2,h3{font-weight:600;font-weight:var(--font-weight-semibold)}.heading-3,h3{font-size:1.5rem;font-size:var(--text-2xl);line-height:1.375;line-height:var(--leading-snug);margin-bottom:1rem;margin-bottom:var(--space-4)}.heading-4,h4{font-size:1.25rem;font-size:var(--text-xl);line-height:1.375;line-height:var(--leading-snug)}.heading-4,.heading-5,h4,h5{font-weight:500;font-weight:var(--font-weight-medium);margin-bottom:.75rem;margin-bottom:var(--space-3)}.heading-5,h5{font-size:1.125rem;font-size:var(--text-lg)}.heading-5,.heading-6,h5,h6{line-height:1.5;line-height:var(--leading-normal)}.heading-6,h6{font-size:1rem;font-size:var(--text-base);font-weight:500;font-weight:var(--font-weight-medium);margin-bottom:.5rem;margin-bottom:var(--space-2)}.text-xs{font-size:.75rem;font-size:var(--text-xs)}.text-sm,.text-xs{line-height:1.5;line-height:var(--leading-normal)}.text-sm{font-size:.875rem;font-size:var(--text-sm)}.text-base{font-size:1rem;font-size:var(--text-base)}.text-base,.text-lg{line-height:1.5;line-height:var(--leading-normal)}.text-lg{font-size:1.125rem;font-size:var(--text-lg)}.text-xl{font-size:1.25rem;font-size:var(--text-xl)}.text-2xl,.text-xl{line-height:1.375;line-height:var(--leading-snug)}.text-2xl{font-size:1.5rem;font-size:var(--text-2xl)}.text-3xl{font-size:1.875rem;font-size:var(--text-3xl);line-height:1.25;line-height:var(--leading-tight)}.font-light{font-weight:300;font-weight:var(--font-weight-light)}.font-normal{font-weight:400;font-weight:var(--font-weight-normal)}.font-medium{font-weight:500;font-weight:var(--font-weight-medium)}.font-semibold{font-weight:600;font-weight:var(--font-weight-semibold)}.font-bold{font-weight:700;font-weight:var(--font-weight-bold)}.font-extrabold{font-weight:800;font-weight:var(--font-weight-extrabold)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent-color)}.text-success{color:var(--success-color)}.text-warning{color:var(--warning-color)}.text-error{color:var(--error-color)}.text-left{text-align:left}.text-right{text-align:right}.text-underline{text-decoration:underline}.text-no-underline{text-decoration:none}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-truncate{white-space:nowrap}.text-ellipsis,.text-truncate{overflow:hidden;text-overflow:ellipsis}.text-ellipsis{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box}.m-0{margin:0;margin:var(--space-0)}.m-1{margin:.25rem;margin:var(--space-1)}.m-2{margin:.5rem;margin:var(--space-2)}.m-3{margin:.75rem;margin:var(--space-3)}.m-4{margin:1rem;margin:var(--space-4)}.m-5{margin:1.25rem;margin:var(--space-5)}.m-6{margin:1.5rem;margin:var(--space-6)}.m-8{margin:2rem;margin:var(--space-8)}.mt-0{margin-top:0;margin-top:var(--space-0)}.mt-1{margin-top:.25rem;margin-top:var(--space-1)}.mt-2{margin-top:.5rem;margin-top:var(--space-2)}.mt-3{margin-top:.75rem;margin-top:var(--space-3)}.mt-4{margin-top:1rem;margin-top:var(--space-4)}.mt-6{margin-top:1.5rem;margin-top:var(--space-6)}.mt-8{margin-top:2rem;margin-top:var(--space-8)}.mb-0{margin-bottom:0;margin-bottom:var(--space-0)}.mb-1{margin-bottom:.25rem;margin-bottom:var(--space-1)}.mb-2{margin-bottom:.5rem;margin-bottom:var(--space-2)}.mb-3{margin-bottom:.75rem;margin-bottom:var(--space-3)}.mb-4{margin-bottom:1rem;margin-bottom:var(--space-4)}.mb-6{margin-bottom:1.5rem;margin-bottom:var(--space-6)}.mb-8{margin-bottom:2rem;margin-bottom:var(--space-8)}.p-0{padding:0;padding:var(--space-0)}.p-1{padding:.25rem;padding:var(--space-1)}.p-2{padding:.5rem;padding:var(--space-2)}.p-3{padding:.75rem;padding:var(--space-3)}.p-4{padding:1rem;padding:var(--space-4)}.p-5{padding:1.25rem;padding:var(--space-5)}.p-6{padding:1.5rem;padding:var(--space-6)}.p-8{padding:2rem;padding:var(--space-8)}.px-2{padding-left:.5rem;padding-left:var(--space-2);padding-right:.5rem;padding-right:var(--space-2)}.px-3{padding-left:.75rem;padding-left:var(--space-3);padding-right:.75rem;padding-right:var(--space-3)}.px-4{padding-left:1rem;padding-left:var(--space-4);padding-right:1rem;padding-right:var(--space-4)}.px-6{padding-left:1.5rem;padding-left:var(--space-6);padding-right:1.5rem;padding-right:var(--space-6)}.py-2{padding-bottom:.5rem;padding-bottom:var(--space-2);padding-top:.5rem;padding-top:var(--space-2)}.py-3{padding-bottom:.75rem;padding-bottom:var(--space-3);padding-top:.75rem;padding-top:var(--space-3)}.py-4{padding-bottom:1rem;padding-bottom:var(--space-4);padding-top:1rem;padding-top:var(--space-4)}.py-6{padding-bottom:1.5rem;padding-bottom:var(--space-6);padding-top:1.5rem;padding-top:var(--space-6)}.text-gradient{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-background-clip:text;background-clip:text}.text-shadow{text-shadow:0 2px 4px #0000001a}.text-shadow-lg{text-shadow:0 4px 8px #0003}@media (max-width:767px){.heading-1,h1{font-size:1.875rem;font-size:var(--text-3xl)}.heading-2,h2{font-size:1.5rem;font-size:var(--text-2xl)}.heading-3,h3{font-size:1.25rem;font-size:var(--text-xl)}}@media (prefers-reduced-motion:no-preference){.text-gradient{animation:gradientShift 3s ease-in-out infinite alternate}}@keyframes gradientShift{0%{background-position:0 50%}to{background-position:100% 50%}}:root{--animation-fast:0.15s;--animation-normal:0.25s;--animation-slow:0.35s;--animation-slower:0.5s;--ease-out-cubic:cubic-bezier(0.215,0.61,0.355,1);--ease-in-out-cubic:cubic-bezier(0.645,0.045,0.355,1);--ease-out-quart:cubic-bezier(0.25,1,0.5,1);--ease-spring:cubic-bezier(0.68,-0.55,0.265,1.55);--delay-short:0.1s;--delay-medium:0.2s;--delay-long:0.3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes scaleUp{0%{transform:scale(1)}to{transform:scale(1.05)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes slideInLeft{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes slideInRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes wiggle{0%,7%{transform:rotate(0)}15%{transform:rotate(-15deg)}20%{transform:rotate(10deg)}25%{transform:rotate(-10deg)}30%{transform:rotate(6deg)}35%{transform:rotate(-4deg)}40%,to{transform:rotate(0)}}@keyframes progressFill{0%{width:0}to{width:0;width:var(--progress-width,0)}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.animate-fade-in{animation:fadeIn .25s cubic-bezier(.215,.61,.355,1) forwards;animation:fadeIn var(--animation-normal) var(--ease-out-cubic) forwards}.animate-fade-in-up{animation:fadeInUp .25s cubic-bezier(.215,.61,.355,1) forwards;animation:fadeInUp var(--animation-normal) var(--ease-out-cubic) forwards}.animate-fade-in-down{animation:fadeInDown .25s cubic-bezier(.215,.61,.355,1) forwards;animation:fadeInDown var(--animation-normal) var(--ease-out-cubic) forwards}.animate-fade-in-left{animation:fadeInLeft .25s cubic-bezier(.215,.61,.355,1) forwards;animation:fadeInLeft var(--animation-normal) var(--ease-out-cubic) forwards}.animate-fade-in-right{animation:fadeInRight .25s cubic-bezier(.215,.61,.355,1) forwards;animation:fadeInRight var(--animation-normal) var(--ease-out-cubic) forwards}.animate-scale-in{animation:scaleIn .25s cubic-bezier(.215,.61,.355,1) forwards;animation:scaleIn var(--animation-normal) var(--ease-out-cubic) forwards}.animate-pulse{animation:pulse 2s cubic-bezier(.645,.045,.355,1) infinite;animation:pulse 2s var(--ease-in-out-cubic) infinite}.animate-slide-in-left{animation:slideInLeft .25s cubic-bezier(.215,.61,.355,1) forwards;animation:slideInLeft var(--animation-normal) var(--ease-out-cubic) forwards}.animate-slide-in-right{animation:slideInRight .25s cubic-bezier(.215,.61,.355,1) forwards;animation:slideInRight var(--animation-normal) var(--ease-out-cubic) forwards}.animate-slide-up{animation:slideUp .25s cubic-bezier(.215,.61,.355,1) forwards;animation:slideUp var(--animation-normal) var(--ease-out-cubic) forwards}.animate-wiggle{animation:wiggle .5s cubic-bezier(.215,.61,.355,1);animation:wiggle .5s var(--ease-out-cubic)}.transition-all{transition:all .25s cubic-bezier(.215,.61,.355,1);transition:all var(--animation-normal) var(--ease-out-cubic)}.transition-colors{transition:color .15s cubic-bezier(.215,.61,.355,1),background-color .15s cubic-bezier(.215,.61,.355,1),border-color .15s cubic-bezier(.215,.61,.355,1);transition:color var(--animation-fast) var(--ease-out-cubic),background-color var(--animation-fast) var(--ease-out-cubic),border-color var(--animation-fast) var(--ease-out-cubic)}.transition-transform{transition:transform .25s cubic-bezier(.215,.61,.355,1);transition:transform var(--animation-normal) var(--ease-out-cubic)}.transition-opacity{transition:opacity .15s cubic-bezier(.215,.61,.355,1);transition:opacity var(--animation-fast) var(--ease-out-cubic)}.transition-shadow{transition:box-shadow .25s cubic-bezier(.215,.61,.355,1);transition:box-shadow var(--animation-normal) var(--ease-out-cubic)}.hover-lift{transition:transform .25s cubic-bezier(.215,.61,.355,1),box-shadow .25s cubic-bezier(.215,.61,.355,1);transition:transform var(--animation-normal) var(--ease-out-cubic),box-shadow var(--animation-normal) var(--ease-out-cubic)}.hover-lift:hover{box-shadow:0 8px 25px #00000026;transform:translateY(-2px)}.hover-scale{transition:transform .25s cubic-bezier(.215,.61,.355,1);transition:transform var(--animation-normal) var(--ease-out-cubic)}.hover-scale:hover{transform:scale(1.05)}.hover-glow{transition:box-shadow .25s cubic-bezier(.215,.61,.355,1);transition:box-shadow var(--animation-normal) var(--ease-out-cubic)}.hover-glow:hover{box-shadow:0 0 20px rgba(var(--primary-rgb),.3)}.loading-shimmer{animation:shimmer 1.5s ease-in-out infinite;background:linear-gradient(90deg,#ffffff1a,#fff3 50%,#ffffff1a);background-size:200px 100%}.loading-dots:after{animation:loadingDots 1.5s steps(4) infinite;content:""}@keyframes loadingDots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}.stagger-children>*{animation-delay:0s;animation-delay:calc(var(--stagger-delay, .1s)*var(--index, 0))}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.animate-pulse,.animate-spin,.animate-wiggle{animation:none!important}}.focus-ring{transition:box-shadow .15s cubic-bezier(.215,.61,.355,1);transition:box-shadow var(--animation-fast) var(--ease-out-cubic)}.focus-ring:focus-visible{box-shadow:0 0 0 2px var(--primary-color);outline:none}.page-enter{opacity:0;transform:translateY(20px)}.page-enter-active{transition:opacity .25s cubic-bezier(.215,.61,.355,1),transform .25s cubic-bezier(.215,.61,.355,1);transition:opacity var(--animation-normal) var(--ease-out-cubic),transform var(--animation-normal) var(--ease-out-cubic)}.page-enter-active,.page-exit{opacity:1;transform:translateY(0)}.page-exit-active{opacity:0;transform:translateY(-20px);transition:opacity .15s cubic-bezier(.215,.61,.355,1),transform .15s cubic-bezier(.215,.61,.355,1);transition:opacity var(--animation-fast) var(--ease-out-cubic),transform var(--animation-fast) var(--ease-out-cubic)}.btn{border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-weight-medium);gap:var(--space-2);line-height:1;overflow:hidden;padding:var(--space-3) var(--space-4);position:relative;transition:all var(--animation-fast) var(--ease-out-cubic)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.btn--primary{background-color:var(--primary-color);color:var(--text-inverse)}.btn--primary:hover:not(:disabled){background-color:var(--primary-dark);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.btn--secondary{background-color:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary)}.btn--secondary:hover:not(:disabled){background-color:var(--bg-surface);border-color:var(--border-light);transform:translateY(-1px)}.btn--ghost{background-color:initial;color:var(--text-secondary)}.btn--ghost:hover:not(:disabled){background-color:var(--bg-tertiary);color:var(--text-primary)}.btn--danger{background-color:var(--error-color);color:var(--text-primary)}.btn--danger:hover:not(:disabled){background-color:#d32f2f;transform:translateY(-1px)}.btn--sm{font-size:var(--text-xs);padding:var(--space-2) var(--space-3)}.btn--lg{font-size:var(--text-base);padding:var(--space-4) var(--space-6)}.btn--xl{font-size:var(--text-lg);padding:var(--space-5) var(--space-8)}.btn--icon{border-radius:var(--radius-full);padding:var(--space-3)}.btn--icon-sm{padding:var(--space-2)}.btn--icon-lg{padding:var(--space-4)}.btn--loading{pointer-events:none}.btn--loading:before{animation:spin 1s linear infinite;border:2px solid #0000;border-radius:50%;border-top-color:initial;content:"";height:16px;left:50%;margin:-8px 0 0 -8px;position:absolute;top:50%;width:16px}.btn--loading>*{opacity:0}.card{background-color:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-6);transition:all var(--animation-normal) var(--ease-out-cubic)}.card:hover{border-color:var(--border-light)}.card--interactive{cursor:pointer}.card--interactive:hover{background-color:var(--bg-tertiary)}.card--compact{padding:var(--space-4)}.card--large{padding:var(--space-8)}.input{background-color:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-base);padding:var(--space-3) var(--space-4);transition:all var(--animation-fast) var(--ease-out-cubic);width:100%}.input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.1);outline:none}.input::placeholder{color:var(--text-muted)}.input--error{border-color:var(--error-color)}.input--error:focus{box-shadow:0 0 0 3px #f443361a}.input-group{position:relative}.input-group__icon{color:var(--text-muted);left:var(--space-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.input-group__input{padding-left:var(--space-10)}.badge{align-items:center;border-radius:var(--radius-full);display:inline-flex;font-size:var(--text-xs);font-weight:var(--font-weight-medium);letter-spacing:var(--tracking-wide);padding:var(--space-1) var(--space-2);text-transform:uppercase}.badge--primary{background-color:rgba(var(--primary-rgb),.1);color:var(--primary-color)}.badge--success{background-color:#1db9541a;color:var(--success-color)}.badge--warning{background-color:#ffa7261a;color:var(--warning-color)}.badge--error{background-color:#f443361a;color:var(--error-color)}.badge--neutral{color:var(--text-secondary)}.badge--neutral,.progress{background-color:var(--bg-tertiary)}.progress{height:4px;overflow:hidden;width:100%}.progress,.progress__bar{border-radius:var(--radius-full)}.progress__bar{background-color:var(--primary-color);height:100%;position:relative;transition:width var(--animation-normal) var(--ease-out-cubic)}.progress__bar:after{animation:shimmer 2s infinite;background:linear-gradient(90deg,#0000,#fff3,#0000);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.progress--thick{height:8px}.progress--thin{height:2px}.tooltip{display:inline-block;position:relative}.tooltip__content{background-color:var(--bg-surface);border-radius:var(--radius-md);bottom:100%;color:var(--text-primary);font-size:var(--text-xs);margin-bottom:var(--space-2);opacity:0;padding:var(--space-2) var(--space-3);transition:all var(--animation-fast) var(--ease-out-cubic);visibility:hidden;white-space:nowrap;z-index:var(--z-tooltip)}.tooltip__content,.tooltip__content:after{left:50%;position:absolute;transform:translateX(-50%)}.tooltip__content:after{border:4px solid #0000;border-top:4px solid var(--bg-surface);content:"";top:100%}.tooltip:hover .tooltip__content{opacity:1;visibility:visible}.modal-overlay{align-items:center;animation:fadeIn var(--animation-normal) var(--ease-out-cubic);background-color:var(--bg-overlay);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:var(--z-modal)}.modal{animation:scaleIn var(--animation-normal) var(--ease-out-cubic);background-color:var(--bg-secondary);border-radius:var(--radius-lg);max-height:90vh;max-width:90vw;overflow-y:auto;padding:var(--space-6)}.modal__header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-4)}.modal__title{font-size:var(--text-xl);font-weight:var(--font-weight-semibold)}.modal__close{border-radius:var(--radius-full);padding:var(--space-2);transition:background-color var(--animation-fast) var(--ease-out-cubic)}.modal__close:hover{background-color:var(--bg-tertiary)}.loading-spinner{animation:spin 1s linear infinite;border:2px solid var(--border-color);border-radius:50%;border-top-color:var(--primary-color);display:inline-block;height:20px;width:20px}.loading-spinner--sm{height:16px;width:16px}.loading-spinner--lg{border-width:3px;height:32px;width:32px}.loading-dots{display:inline-flex;gap:var(--space-1)}.loading-dots__dot{animation:pulse 1.4s ease-in-out infinite both;background-color:var(--primary-color);border-radius:50%;height:6px;width:6px}.loading-dots__dot:first-child{animation-delay:-.32s}.loading-dots__dot:nth-child(2){animation-delay:-.16s}.loading-dots__dot:nth-child(3){animation-delay:0s}@media (max-width:767px){.btn{font-size:var(--text-sm);padding:var(--space-3) var(--space-4)}.btn--lg{padding:var(--space-4) var(--space-5)}.card,.modal{padding:var(--space-4)}.modal{margin:var(--space-4)}}@media (prefers-reduced-motion:reduce){.btn,.card,.input,.progress__bar,.tooltip__content{transition:none}.loading-dots__dot,.loading-spinner{animation:none}}.glow-on-hover{position:relative;transition:all var(--animation-normal) var(--ease-out-cubic)}.glow-on-hover:before{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border-radius:inherit;bottom:0;content:"";left:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;padding:1px;position:absolute;right:0;top:0;transition:opacity var(--animation-normal) var(--ease-out-cubic)}.glow-on-hover:hover:before{opacity:1}.ripple-effect{overflow:hidden;position:relative}.ripple-effect:after{background:#ffffff4d;border-radius:50%;content:"";height:0;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s;width:0}.ripple-effect:active:after{height:300px;width:300px}.card-interactive{overflow:hidden;position:relative}.card-interactive:before{background:linear-gradient(90deg,#0000,#ffffff0d,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.card-interactive:hover:before{left:100%}.focus-enhanced:focus-visible{box-shadow:0 0 0 2px var(--bg-primary),0 0 0 4px var(--primary-color),0 0 20px rgba(var(--primary-rgb),.3);outline:none;transform:translateY(-1px)}.skeleton{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-surface) 50%,var(--bg-tertiary) 75%);background-size:200% 100%}.skeleton-text{border-radius:var(--radius-sm);height:1em}.skeleton-avatar{border-radius:var(--radius-full)}.skeleton-card{border-radius:var(--radius-lg)}.custom-scrollbar::-webkit-scrollbar{height:6px;width:6px}.custom-scrollbar::-webkit-scrollbar-track{background:#0000}.custom-scrollbar::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-full);-webkit-transition:background-color var(--animation-fast) var(--ease-out-cubic);transition:background-color var(--animation-fast) var(--ease-out-cubic)}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}.text-shimmer{-webkit-text-fill-color:#0000;animation:textShimmer 3s ease-in-out infinite;background:linear-gradient(135deg,var(--text-primary) 0,var(--primary-color) 50%,var(--text-primary) 100%);-webkit-background-clip:text;background-clip:text;background-size:200% 200%}@keyframes textShimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.progress-enhanced{background:var(--bg-tertiary);border-radius:var(--radius-full);overflow:hidden;position:relative}.progress-enhanced:before{background:linear-gradient(90deg,var(--primary-color),var(--accent-color));border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;transition:width var(--animation-normal) var(--ease-out-cubic);width:0;width:var(--progress,0)}.progress-enhanced:after{animation:progressShine 2s infinite;background:linear-gradient(90deg,#0000 30%,#fff3 50%,#0000 70%);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0}.progress-enhanced:hover:after{opacity:1}@keyframes progressShine{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}.modal-enhanced{animation:modalSlideUp var(--animation-normal) var(--ease-out-cubic)}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(50px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-overlay-enhanced{animation:overlayFadeIn var(--animation-normal) var(--ease-out-cubic)}@keyframes overlayFadeIn{0%{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);opacity:0}to{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);opacity:1}}.nav-item-enhanced{position:relative;transition:all var(--animation-fast) var(--ease-out-cubic)}.nav-item-enhanced:before{background:var(--primary-color);border-radius:0 var(--radius-sm) var(--radius-sm) 0;content:"";height:0;left:0;position:absolute;top:50%;transform:translateY(-50%);transition:height var(--animation-normal) var(--ease-out-cubic);width:3px}.nav-item-enhanced--active:before,.nav-item-enhanced:hover:before{height:60%}.search-result-item{border-radius:var(--radius-md);position:relative;transition:all var(--animation-fast) var(--ease-out-cubic)}.search-result-item:hover{background:var(--bg-tertiary);transform:translateX(4px)}.search-result-item:before{background:var(--primary-color);border-radius:var(--radius-sm);bottom:0;content:"";left:0;position:absolute;top:0;transform:scaleY(0);transition:transform var(--animation-fast) var(--ease-out-cubic);width:2px}.search-result-item:hover:before{transform:scaleY(1)}.audio-visualizer{align-items:flex-end;display:flex;gap:2px;height:20px}.audio-visualizer__bar{animation:audioWave 1s ease-in-out infinite alternate;background:var(--primary-color);border-radius:var(--radius-sm);width:3px}.audio-visualizer__bar:first-child{animation-delay:0s}.audio-visualizer__bar:nth-child(2){animation-delay:.1s}.audio-visualizer__bar:nth-child(3){animation-delay:.2s}.audio-visualizer__bar:nth-child(4){animation-delay:.3s}.audio-visualizer__bar:nth-child(5){animation-delay:.4s}@keyframes audioWave{0%{height:4px}to{height:20px}}@media (max-width:767px){.card-interactive:before,.glow-on-hover:before,.ripple-effect:after{display:none}}@media (prefers-reduced-motion:reduce){.audio-visualizer__bar,.progress-enhanced:after,.skeleton,.text-shimmer{animation:none}.card-interactive:before,.glow-on-hover:before,.ripple-effect:after{display:none}}@media (prefers-contrast:high){.audio-visualizer__bar,.glow-on-hover:before,.progress-enhanced:before{background:var(--text-primary)}}@media print{.audio-visualizer,.card-interactive:before,.glow-on-hover:before,.ripple-effect:after{display:none}*{animation:none!important;transition:none!important}}:root{--primary-color:#1db954;--primary-rgb:29,185,84;--primary-dark:#1ed760;--primary-light:#1db954;--secondary-color:#191414;--secondary-rgb:25,20,20;--accent-color:#ff6b35;--accent-rgb:255,107,53;--bg-primary:#0a0a0a;--bg-secondary:#121212;--bg-tertiary:#181818;--bg-surface:#1e1e1e;--bg-overlay:#000c;--text-inverse:#000;--border-light:#404040;--border-focus:var(--primary-color);--success-color:#1db954;--warning-color:#ffa726;--error-color:#f44336;--info-color:#2196f3;--shadow-sm:0 1px 2px #0003;--shadow-md:0 4px 6px #0003;--shadow-lg:0 10px 15px #0000004d;--shadow-xl:0 20px 25px #0006;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px}html{scroll-behavior:smooth}body{background-color:#0a0a0a;background-color:var(--bg-primary);font-family:var(--font-primary);font-size:var(--text-base);font-weight:var(--font-weight-normal);line-height:var(--leading-normal);margin:0;overflow-x:hidden;padding:0}#root{display:flex;flex-direction:column;min-height:100vh}h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0}ol,ul{list-style:none;padding:0}a{color:inherit;transition:color var(--animation-fast) var(--ease-out-cubic)}a:hover{color:#1db954;color:var(--primary-color)}button{background:none;border:none;cursor:pointer;font-family:inherit;font-size:inherit;margin:0;padding:0;transition:all var(--animation-fast) var(--ease-out-cubic)}button:disabled{cursor:not-allowed;opacity:.6}input,select,textarea{background-color:#1e1e1e;background-color:var(--bg-surface);border:1px solid #333;border:1px solid var(--border-color);border-radius:8px;border-radius:var(--radius-md);color:#fff;color:var(--text-primary);font-family:inherit;font-size:inherit;padding:var(--space-3);transition:border-color var(--animation-fast) var(--ease-out-cubic)}input:focus,select:focus,textarea:focus{border-color:#1db954;border-color:var(--primary-color);box-shadow:0 0 0 2px #1db95433;box-shadow:0 0 0 2px rgba(var(--primary-rgb),.2);outline:none}img{display:block;height:auto;max-width:100%}code{background-color:#181818;background-color:var(--bg-tertiary);border-radius:4px;border-radius:var(--radius-sm);color:#1db954;color:var(--primary-color);font-family:var(--font-mono);font-size:.875em;padding:.125em .25em}.hidden{display:none!important}.block{display:block}.grid{display:grid}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.flex-1{flex:1 1}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.w-full{width:100%}.h-full{height:100%}.rounded{border-radius:8px;border-radius:var(--radius-md)}.rounded-lg{border-radius:12px;border-radius:var(--radius-lg)}.rounded-full{border-radius:9999px;border-radius:var(--radius-full)}.shadow{box-shadow:0 4px 6px #0003;box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:0 10px 15px #0000004d;box-shadow:var(--shadow-lg)}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#121212;background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:#333;background:var(--border-color);border-radius:9999px;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#1db954;background:var(--primary-color)}*{scrollbar-color:#333 #121212;scrollbar-color:var(--border-color) var(--bg-secondary);scrollbar-width:thin}:focus-visible{outline:2px solid #1db954;outline:2px solid var(--primary-color);outline-offset:2px}::selection{background-color:#1db9544d;background-color:rgba(var(--primary-rgb),.3);color:#fff;color:var(--text-primary)}::-moz-selection{background-color:#1db9544d;background-color:rgba(var(--primary-rgb),.3);color:#fff;color:var(--text-primary)}:root{--primary-bg:#0a0a0a;--secondary-bg:#1a1a1a;--tertiary-bg:#2a2a2a;--accent-color:#1db954;--accent-hover:#1ed760;--text-primary:#fff;--text-secondary:#b3b3b3;--text-muted:#6a6a6a;--border-color:#333;--error-color:#e22134;--warning-color:orange;--gradient-primary:linear-gradient(135deg,#1db954,#1ed760);--gradient-background:linear-gradient(180deg,#0a0a0a,#1a1a1a);--gradient-card:linear-gradient(145deg,#1a1a1a,#2a2a2a);--font-family-primary:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto",sans-serif;--font-size-xs:1.2rem;--font-size-sm:1.4rem;--font-size-base:1.6rem;--font-size-lg:1.8rem;--font-size-xl:2.4rem;--font-size-2xl:3.2rem;--spacing-xs:0.4rem;--spacing-sm:0.8rem;--spacing-md:1.6rem;--spacing-lg:2.4rem;--spacing-xl:3.2rem;--spacing-2xl:4.8rem;--border-radius-sm:0.4rem;--border-radius-md:0.8rem;--border-radius-lg:1.2rem;--border-radius-full:50%;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 6px #0006;--shadow-lg:0 10px 15px #00000080;--transition-fast:0.15s ease-in-out;--transition-normal:0.3s ease-in-out;--transition-slow:0.5s ease-in-out;--breakpoint-mobile:768px;--breakpoint-tablet:1024px;--breakpoint-desktop:1440px}*,:after,:before{box-sizing:border-box}#root,body,html{height:100%;margin:0;padding:0}html{font-size:10px}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(180deg,#0a0a0a,#1a1a1a);background:var(--gradient-background);font-size:1.6rem;font-size:var(--font-size-base);line-height:1.6}body,h1{color:#fff;color:var(--text-primary);font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-family-primary)}h1{background:linear-gradient(135deg,#1db954,#1ed760);background:var(--gradient-primary);border-radius:.8rem;border-radius:var(--border-radius-md);font-size:2.4rem;font-size:var(--font-size-xl);font-weight:600;margin:0;padding:.8rem 0;padding:var(--spacing-sm) 0;text-align:center}h1.highlight{color:#1db954;color:var(--accent-color)}h2{font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-family-primary);font-size:1.8rem;font-size:var(--font-size-lg);font-weight:500;margin:1.6rem 0;margin:var(--spacing-md) 0}a,h2{color:#fff;color:var(--text-primary)}a{text-decoration:none;transition:color .15s ease-in-out;transition:color var(--transition-fast)}a:hover{color:#1ed760;color:var(--accent-hover)}.App{background:linear-gradient(180deg,#0a0a0a,#1a1a1a);background:var(--gradient-background);color:#fff;color:var(--text-primary);font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-family-primary);font-weight:400;min-height:100vh;padding:0;position:relative}.App-playlist{background:#1a1a1a;background:var(--secondary-bg);border-radius:1.2rem;border-radius:var(--border-radius-lg);box-shadow:0 4px 6px #0006;box-shadow:var(--shadow-md);display:flex;gap:2.4rem;gap:var(--spacing-lg);justify-content:space-between;margin:1.6rem;margin:var(--spacing-md);padding:2.4rem;padding:var(--spacing-lg)}@media only screen and (max-width:1020px){.App-playlist{align-items:center;flex-direction:column;gap:1.6rem;gap:var(--spacing-md);margin:.8rem;margin:var(--spacing-sm);padding:1.6rem;padding:var(--spacing-md)}}@media only screen and (max-width:768px){.App{padding:0}.App-playlist{border-radius:.8rem;border-radius:var(--border-radius-md);margin:.4rem;margin:var(--spacing-xs);padding:.8rem;padding:var(--spacing-sm)}h1{font-size:1.8rem;font-size:var(--font-size-lg);padding:.4rem 0;padding:var(--spacing-xs) 0}h2{font-size:1.6rem;font-size:var(--font-size-base)}}.container{margin:0 auto;max-width:1200px;padding:0 1.6rem;padding:0 var(--spacing-md)}.flex{display:flex}.flex-column{flex-direction:column}.justify-center{justify-content:center}.align-center{align-items:center}.text-center{text-align:center}.mb-sm{margin-bottom:.8rem;margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:1.6rem;margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:2.4rem;margin-bottom:var(--spacing-lg)}.p-sm{padding:.8rem;padding:var(--spacing-sm)}.p-md{padding:1.6rem;padding:var(--spacing-md)}.p-lg{padding:2.4rem;padding:var(--spacing-lg)}.btn{align-items:center;border:none;border-radius:.8rem;border-radius:var(--border-radius-md);cursor:pointer;display:inline-flex;font-family:Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-family-primary);font-size:1.4rem;font-size:var(--font-size-sm);font-weight:500;justify-content:center;outline:none;padding:.8rem 1.6rem;padding:var(--spacing-sm) var(--spacing-md);text-decoration:none;transition:all .15s ease-in-out;transition:all var(--transition-fast)}.btn:focus{box-shadow:0 0 0 2px #1db954;box-shadow:0 0 0 2px var(--accent-color)}.btn-primary{background:linear-gradient(135deg,#1db954,#1ed760);background:var(--gradient-primary);color:#fff;color:var(--text-primary)}.btn-primary:hover{box-shadow:0 10px 15px #00000080;box-shadow:var(--shadow-lg);transform:translateY(-1px)}.btn-secondary{background:#1a1a1a;background:var(--secondary-bg);border:1px solid #333;border:1px solid var(--border-color);color:#fff;color:var(--text-primary)}.btn-secondary:hover{background:#2a2a2a;background:var(--tertiary-bg);border-color:#1db954;border-color:var(--accent-color)}.card{background:linear-gradient(145deg,#1a1a1a,#2a2a2a);background:var(--gradient-card);border:1px solid #333;border:1px solid var(--border-color);border-radius:1.2rem;border-radius:var(--border-radius-lg);box-shadow:0 4px 6px #0006;box-shadow:var(--shadow-md);padding:2.4rem;padding:var(--spacing-lg);transition:transform .15s ease-in-out;transition:transform var(--transition-fast)}.card:hover{box-shadow:0 10px 15px #00000080;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.legacy-app{margin:0 auto;max-width:1200px}.legacy-app,.legacy-app__header{padding:2.4rem;padding:var(--spacing-lg)}.legacy-app__header{background:#ffffff0d;border:1px solid #1db9544d;border-radius:12px;margin-bottom:3.2rem;margin-bottom:var(--spacing-xl);text-align:center}.legacy-app__header h2{color:#1db954;font-size:1.5rem;margin:0 0 .8rem;margin:0 0 var(--spacing-sm) 0}.legacy-app__header p{color:#b3b3b3;font-size:.875rem;margin:0}.App-playlist{grid-gap:3.2rem;grid-gap:var(--spacing-xl);display:grid;gap:3.2rem;gap:var(--spacing-xl);grid-template-columns:1fr 1fr;margin-top:3.2rem;margin-top:var(--spacing-xl)}@media (max-width:767px){.App-playlist{gap:2.4rem;gap:var(--spacing-lg);grid-template-columns:1fr}}.error-boundary{align-items:center;background-color:#121212;background-color:var(--background-color,#121212);color:#fff;color:var(--text-color,#fff);display:flex;justify-content:center;min-height:400px;padding:2rem}.error-boundary__content{max-width:500px;text-align:center;width:100%}.error-boundary__icon{color:#ff6b6b;color:var(--error-color,#ff6b6b);margin-bottom:1.5rem}.error-boundary__icon svg{height:48px;width:48px}.error-boundary__title{color:#fff;color:var(--text-color,#fff);font-size:1.5rem;font-weight:600;margin:0 0 1rem}.error-boundary__message{color:#b3b3b3;color:var(--text-secondary,#b3b3b3);font-size:1rem;line-height:1.5;margin:0 0 2rem}.error-boundary__actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.error-boundary__button{border:none;border-radius:.5rem;cursor:pointer;font-size:.875rem;font-weight:500;min-width:120px;padding:.75rem 1.5rem;transition:all .2s ease}.error-boundary__button--primary{background-color:#1db954;background-color:var(--primary-color,#1db954);color:#fff}.error-boundary__button--primary:hover{background-color:#1ed760;background-color:var(--primary-hover,#1ed760);transform:translateY(-1px)}.error-boundary__button--secondary{background-color:initial;border:1px solid #333;border:1px solid var(--border-color,#333);color:#fff;color:var(--text-color,#fff)}.error-boundary__button--secondary:hover{background-color:#282828;background-color:var(--hover-color,#282828);border-color:#535353;border-color:var(--border-hover,#535353)}.error-boundary__button:focus{outline:2px solid #1db954;outline:2px solid var(--focus-color,#1db954);outline-offset:2px}.error-boundary__details{background-color:#181818;background-color:var(--surface-color,#181818);border-radius:.5rem;margin-top:2rem;padding:1rem;text-align:left}.error-boundary__details summary{color:#fff;color:var(--text-color,#fff);cursor:pointer;font-weight:500;margin-bottom:.5rem}.error-boundary__stack{background-color:#000;background-color:var(--code-background,#000);border-radius:.25rem;color:#ff6b6b;color:var(--code-color,#ff6b6b);font-family:Courier New,monospace;font-size:.75rem;line-height:1.4;overflow-x:auto;padding:1rem;white-space:pre-wrap;word-break:break-word}@media (max-width:768px){.error-boundary{min-height:300px;padding:1rem}.error-boundary__title{font-size:1.25rem}.error-boundary__message{font-size:.875rem}.error-boundary__actions{align-items:center;flex-direction:column}.error-boundary__button{max-width:200px;width:100%}}.layout{background:var(--bg-primary);display:flex;flex-direction:column;min-height:100vh;position:relative}.layout__main{display:flex;flex:1 1;flex-direction:column;margin-top:64px;width:100%}.layout__content{flex:1 1;max-width:100%;min-height:calc(100vh - 64px);overflow-x:hidden;padding:var(--space-4)}@media (min-width:768px){.layout__content{padding:var(--space-6)}}@media (min-width:1024px){.layout__content{padding:var(--space-8)}}.layout__overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background-color:#00000080;bottom:0;top:0;z-index:999}.header,.layout__overlay{left:0;position:fixed;right:0}.header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0a0af2;border-bottom:1px solid #ffffff1a;height:var(--header-height);justify-content:space-between;padding:0 var(--spacing-md);top:3rem;z-index:var(--z-header)}.header,.header__left{align-items:center;display:flex}.header__left{flex:1 1;gap:var(--spacing-md)}.header__center{align-items:center;display:flex;flex:2 1;justify-content:center;max-width:600px;padding:0 var(--space-4)}.header__right{display:flex;flex:1 1;justify-content:flex-end}.header__menu-button{align-items:center;background:none;border:none;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;height:40px;justify-content:center;padding:8px;transition:background-color .2s ease;width:40px}.header__menu-button:hover{background-color:#ffffff1a}.header__menu-icon{background-color:#fff;border-radius:1px;height:2px;margin:2px 0;transition:.3s;width:20px}.header__brand{flex-shrink:0}.header__logo{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#1db954,#1ed760);-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700;margin:0}.header__logo-link{color:inherit;text-decoration:none;transition:all .2s ease}.header__logo-link:hover{opacity:1}.header__logo-link:hover .header__logo{-webkit-text-fill-color:#1ed760;background:none;color:#1ed760;transform:scale(1.02)}.header__search{max-width:500px;width:100%}.header__nav,.header__search{align-items:center;display:flex}.header__nav{gap:var(--space-3)}.header__nav-button{align-items:center;background:none;border:none;border-radius:var(--radius-full);color:var(--text-primary);cursor:pointer;display:flex;height:40px;justify-content:center;transition:all var(--animation-fast) var(--ease-out-cubic);width:40px}.header__nav-button:hover{background-color:var(--bg-tertiary);color:var(--primary-color);transform:scale(1.05)}.header__nav-button svg{height:20px;width:20px}@media (max-width:767px){.header{padding:0 var(--space-3);top:0}.header__center{display:none}.header__right{flex:0 1}.header__logo{font-size:var(--text-xl)}}@media (min-width:768px) and (max-width:1023px){.header{padding:0 var(--space-6);top:0}.header__center{padding:0 var(--space-3)}.header__search{max-width:400px}}@media (min-width:1024px){.header{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0000;border-bottom:none;padding:0 var(--space-8);position:relative}.header__center{padding:0 var(--space-6)}.header__menu-button{display:none}.header__logo{font-size:var(--text-3xl)}}.header__logo-link:focus,.header__menu-button:focus,.header__nav-button:focus{outline:2px solid #1db954;outline-offset:2px}.search-bar{align-items:center;display:flex;gap:var(--space-3);max-width:600px;position:relative;width:100%}.search-bar__input-container{flex:1 1;position:relative}.search-bar__input-wrapper{align-items:center;display:flex;position:relative}.search-bar__icon{color:#b3b3b3;left:var(--space-4);pointer-events:none;position:absolute;z-index:1}.search-bar__input{background:#ffffff1a;border:2px solid #0000;border-radius:24px;box-sizing:border-box;color:#fff;font-family:inherit;font-size:var(--text-base);height:48px;padding:var(--space-3) var(--space-5) var(--space-3) 48px;transition:all .2s ease;width:100%}.search-bar__input::placeholder{color:#b3b3b3}.search-bar__input:focus{background:#ffffff26;border-color:#1db954;outline:none}.search-bar__clear{align-items:center;background:none;border:none;border-radius:50%;color:#b3b3b3;cursor:pointer;display:flex;justify-content:center;padding:var(--space-2);position:absolute;right:var(--space-3);transition:all .2s ease}.search-bar__clear:hover{background:#ffffff1a;color:#fff}.search-bar__button{align-items:center;background:#1db954;border:none;border-radius:24px;color:#fff;cursor:pointer;display:flex;font-size:var(--text-base);font-weight:var(--font-weight-semibold);height:48px;justify-content:center;min-width:80px;padding:var(--space-3) var(--space-5);transition:all .2s ease;white-space:nowrap}.search-bar__button:hover:not(:disabled){background:#1ed760;transform:translateY(-1px)}.search-bar__button:disabled{background:#ffffff1a;color:#b3b3b3;cursor:not-allowed}.search-bar__dropdown{background:#282828;border-radius:var(--radius-md);box-shadow:var(--shadow-xl);left:0;margin-top:var(--space-2);max-height:400px;overflow-y:auto;position:absolute;right:0;top:100%;z-index:1000}.search-bar__section{padding:var(--space-3) 0}.search-bar__section:not(:last-child){border-bottom:1px solid #ffffff1a}.search-bar__section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-2);padding:0 var(--space-4)}.search-bar__section-title{color:#b3b3b3;font-size:var(--text-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase}.search-bar__clear-history{background:none;border:none;border-radius:var(--radius-sm);color:#b3b3b3;cursor:pointer;font-size:var(--text-sm);padding:var(--space-2);transition:all .2s ease}.search-bar__clear-history:hover{background:#ffffff1a;color:#fff}.search-bar__item{align-items:center;background:none;border:none;color:#fff;cursor:pointer;display:flex;font-size:var(--text-base);gap:var(--space-3);padding:var(--space-3) var(--space-4);text-align:left;transition:all .2s ease;width:100%}.search-bar__item--selected,.search-bar__item:hover{background:#ffffff1a}.search-bar__item-icon{color:#b3b3b3;flex-shrink:0}.search-bar__item-text{flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:767px){.search-bar{flex-direction:column;gap:var(--space-2)}.search-bar__input{font-size:var(--text-sm);height:44px;padding:var(--space-3) var(--space-4) var(--space-3) 40px}.search-bar__icon{height:16px;left:var(--space-3);width:16px}.search-bar__clear{right:var(--space-3)}.search-bar__button{font-size:var(--text-sm);height:44px;min-width:70px;padding:var(--space-3) var(--space-4)}.search-bar__dropdown{max-height:300px}}@media (min-width:768px) and (max-width:1023px){.search-bar{gap:var(--space-3)}.search-bar__input{font-size:var(--text-base);height:46px;padding:var(--space-3) var(--space-4) var(--space-3) 44px}.search-bar__icon{height:18px;left:var(--space-3);width:18px}.search-bar__button{height:46px;min-width:75px;padding:var(--space-3) var(--space-4)}}.search-bar--header{gap:var(--space-2);max-width:400px}.search-bar--header .search-bar__input{border-radius:20px;font-size:var(--text-sm);height:40px;padding:var(--space-2) var(--space-4) var(--space-2) 36px}.search-bar--header .search-bar__icon{height:16px;left:var(--space-3);width:16px}.search-bar--header .search-bar__clear{right:var(--space-2)}.search-bar--header .search-bar__button{border-radius:20px;font-size:var(--text-sm);height:40px;min-width:70px;padding:var(--space-2) var(--space-4)}.search-bar--page{gap:var(--space-3);max-width:600px}.search-bar--page .search-bar__input{border-radius:24px;font-size:var(--text-base);height:48px;padding:var(--space-3) var(--space-5) var(--space-3) 48px}.search-bar--page .search-bar__icon{height:20px;left:var(--space-4);width:20px}.search-bar--page .search-bar__clear{right:var(--space-3)}.search-bar--page .search-bar__button{border-radius:24px;font-size:var(--text-base);height:48px;min-width:80px;padding:var(--space-3) var(--space-5)}@media (max-width:767px){.search-bar--header{gap:var(--space-2);max-width:100%}.search-bar--header .search-bar__input{font-size:var(--text-xs);height:36px;padding:var(--space-2) var(--space-3) var(--space-2) 32px}.search-bar--header .search-bar__icon{height:14px;left:var(--space-2);width:14px}.search-bar--header .search-bar__clear{right:var(--space-2)}.search-bar--header .search-bar__button{font-size:var(--text-xs);height:36px;min-width:60px;padding:var(--space-2) var(--space-3)}}.search-bar__loading{align-items:center;display:flex;justify-content:center}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.search-bar__input--loading{cursor:wait;opacity:.7}.search-bar__input--loading::placeholder{color:#1db954}.profile-modal-overlay{align-items:center;animation:fadeIn var(--animation-normal) var(--ease-out-cubic);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1050}.profile-modal{animation:scaleIn var(--animation-normal) var(--ease-out-cubic);background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-height:90vh;max-width:400px;overflow-y:auto;width:90%}.profile-modal__header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:var(--space-6)}.profile-modal__title{color:var(--text-primary);font-size:var(--text-xl);font-weight:var(--font-weight-semibold);margin:0}.profile-modal__close{align-items:center;background:none;border:none;border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;transition:all var(--animation-fast) var(--ease-out-cubic);width:32px}.profile-modal__close:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.profile-modal__content{padding:var(--space-6);text-align:center}.profile-modal__avatar{margin-bottom:var(--space-6)}.profile-modal__avatar-placeholder{align-items:center;background-color:var(--bg-tertiary);border-radius:var(--radius-full);color:var(--text-secondary);display:flex;height:80px;justify-content:center;margin:0 auto;width:80px}.profile-modal__info{margin-bottom:var(--space-6)}.profile-modal__name{color:var(--text-primary);font-size:var(--text-2xl);font-weight:var(--font-weight-bold);margin:0 0 var(--space-2) 0}.profile-modal__email{color:var(--text-secondary);font-size:var(--text-base);margin:0}.profile-modal__stats{border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color);display:flex;justify-content:space-around;margin-bottom:var(--space-8);padding:var(--space-4) 0}.profile-modal__stat{align-items:center;display:flex;flex-direction:column;gap:var(--space-1)}.profile-modal__stat-number{color:var(--text-primary);font-size:var(--text-xl);font-weight:var(--font-weight-bold)}.profile-modal__stat-label{color:var(--text-secondary);font-size:var(--text-sm);letter-spacing:var(--tracking-wide);text-transform:uppercase}.profile-modal__actions{display:flex;flex-direction:column;gap:var(--space-3)}.profile-modal__button{border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-base);font-weight:var(--font-weight-medium);padding:var(--space-3) var(--space-6);transition:all var(--animation-fast) var(--ease-out-cubic)}.profile-modal__button--primary{background-color:var(--primary-color);color:var(--text-inverse)}.profile-modal__button--primary:hover{background-color:var(--primary-dark);transform:translateY(-1px)}.profile-modal__button--secondary{background-color:initial;border:1px solid var(--border-color);color:var(--text-primary)}.profile-modal__button--secondary:hover{background-color:var(--bg-tertiary);border-color:var(--border-light)}@media (max-width:767px){.profile-modal{margin:var(--space-4);width:95%}.profile-modal__content,.profile-modal__header{padding:var(--space-4)}.profile-modal__actions{gap:var(--space-2)}}.settings-modal-overlay{align-items:center;animation:fadeIn var(--animation-normal) var(--ease-out-cubic);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1050}.settings-modal{animation:scaleIn var(--animation-normal) var(--ease-out-cubic);background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);max-height:90vh;max-width:500px;overflow-y:auto;width:90%}.settings-modal__header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:var(--space-6)}.settings-modal__title{color:var(--text-primary);font-size:var(--text-xl);font-weight:var(--font-weight-semibold);margin:0}.settings-modal__close{align-items:center;background:none;border:none;border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;transition:all var(--animation-fast) var(--ease-out-cubic);width:32px}.settings-modal__close:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.settings-modal__content{padding:var(--space-6)}.settings-modal__section{margin-bottom:var(--space-8)}.settings-modal__section:last-child{margin-bottom:0}.settings-modal__section-title{border-bottom:1px solid var(--border-color);color:var(--text-primary);font-size:var(--text-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--space-4) 0;padding-bottom:var(--space-2)}.settings-modal__setting{margin-bottom:var(--space-4)}.settings-modal__setting:last-child{margin-bottom:0}.settings-modal__label{align-items:center;display:flex;gap:var(--space-4);justify-content:space-between}.settings-modal__label-text{color:var(--text-primary);font-size:var(--text-base);font-weight:var(--font-weight-medium)}.settings-modal__select{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;font-size:var(--text-sm);min-width:120px;padding:var(--space-2) var(--space-3);transition:all var(--animation-fast) var(--ease-out-cubic)}.settings-modal__select:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(var(--primary-rgb),.2);outline:none}.settings-modal__checkbox{accent-color:var(--primary-color);cursor:pointer;height:20px;width:20px}.settings-modal__range{accent-color:var(--primary-color);cursor:pointer;flex:1 1;margin:0 var(--space-3)}.settings-modal__range-value{color:var(--text-secondary);font-size:var(--text-sm);min-width:40px;text-align:right}.settings-modal__footer{border-top:1px solid var(--border-color);display:flex;gap:var(--space-3);justify-content:flex-end;padding:var(--space-6)}.settings-modal__button{border:none;border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-base);font-weight:var(--font-weight-medium);padding:var(--space-3) var(--space-6);transition:all var(--animation-fast) var(--ease-out-cubic)}.settings-modal__button--primary{background-color:var(--primary-color);color:var(--text-inverse)}.settings-modal__button--primary:hover{background-color:var(--primary-dark);transform:translateY(-1px)}.settings-modal__button--secondary{background-color:initial;border:1px solid var(--border-color);color:var(--text-primary)}.settings-modal__button--secondary:hover{background-color:var(--bg-tertiary);border-color:var(--border-light)}.settings-modal::-webkit-scrollbar{width:6px}.settings-modal::-webkit-scrollbar-track{background:var(--bg-tertiary)}.settings-modal::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-full)}.settings-modal::-webkit-scrollbar-thumb:hover{background:var(--primary-color)}@media (max-width:767px){.settings-modal{margin:var(--space-4);width:95%}.settings-modal__content,.settings-modal__footer,.settings-modal__header{padding:var(--space-4)}.settings-modal__label{align-items:flex-start;flex-direction:column;gap:var(--space-2)}.settings-modal__select{width:100%}.settings-modal__footer{flex-direction:column}.settings-modal__button{width:100%}}.sidebar{background:var(--bg-secondary);border-right:1px solid var(--border-color);height:calc(100vh - 64px);left:0;overflow-y:auto;position:fixed;top:64px;transform:translateX(-100%);transition:transform var(--animation-normal) var(--ease-out-cubic);width:280px;z-index:1000}.sidebar--open{transform:translateX(0)}.sidebar__content{display:flex;flex-direction:column;height:100%;padding:var(--space-6) 0}.sidebar__nav{padding:0 var(--space-4)}.sidebar__nav-list{list-style:none;margin:0;padding:0}.sidebar__nav-item{margin-bottom:var(--space-1)}.sidebar__nav-link{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;font-size:var(--text-base);font-weight:var(--font-weight-medium);padding:var(--space-4);text-decoration:none;transition:all var(--animation-fast) var(--ease-out-cubic);width:100%}.sidebar__nav-link:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.sidebar__nav-link:focus{outline:2px solid var(--primary-color);outline-offset:2px}.sidebar__nav-icon{align-items:center;display:flex;flex-shrink:0;margin-right:var(--space-4)}.sidebar__nav-text{flex:1 1;text-align:left}.sidebar__divider{background:var(--border-color);height:1px;margin:var(--space-6) var(--space-4)}.sidebar__section{flex:1 1;overflow-y:auto;padding:0 var(--space-4)}.sidebar__section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:var(--space-4);padding:0 var(--space-4)}.sidebar__section-title{color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--tracking-wide);margin:0;text-transform:uppercase}.sidebar__create-button{align-items:center;background:none;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:flex;height:24px;justify-content:center;transition:all var(--animation-fast) var(--ease-out-cubic);width:24px}.sidebar__create-button:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.sidebar__playlist-list{list-style:none;margin:0;padding:0}.sidebar__playlist-item{margin-bottom:var(--space-1)}.sidebar__playlist-link{align-items:center;background:none;border:none;border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;font-size:var(--text-sm);padding:var(--space-3) var(--space-4);text-decoration:none;transition:all var(--animation-fast) var(--ease-out-cubic);width:100%}.sidebar__playlist-link:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.sidebar__playlist-icon{align-items:center;display:flex;flex-shrink:0;margin-right:var(--space-3);opacity:.7}.sidebar__playlist-text{flex:1 1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:#0000}.sidebar::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.sidebar__nav-link--active,.sidebar__playlist-link--active{background-color:rgba(var(--primary-rgb),.1);color:var(--primary-color)}.skip-links{left:0;position:absolute;top:-100vh;width:100%;z-index:9999}.skip-links__list{display:flex;flex-direction:column;gap:0;list-style:none}.skip-links__item,.skip-links__list{margin:0;padding:0}.skip-links__link{background-color:#1db954;background-color:var(--color-primary,#1db954);border:2px solid #0000;color:#fff;color:var(--color-text-primary,#fff);display:block;font-size:14px;font-weight:600;padding:12px 16px;text-decoration:none;transition:all .2s ease}.skip-links__link:focus{border-color:#fff;border-color:var(--color-focus,#fff);box-shadow:0 2px 8px #0000004d;outline:none;position:relative;top:100vh}.skip-links__link:focus,.skip-links__link:hover{background-color:#1ed760;background-color:var(--color-primary-hover,#1ed760);text-decoration:underline}@media (prefers-contrast:high){.skip-links__link{border:2px solid}.skip-links__link:focus{background-color:#000;background-color:var(--color-background,#000);border-color:#fff;border-color:var(--color-text-primary,#fff);color:#fff;color:var(--color-text-primary,#fff)}}@media (prefers-reduced-motion:reduce){.skip-links__link{transition:none}}.loading{align-items:center;display:flex;flex-direction:column;gap:1rem;justify-content:center}.loading--overlay{background-color:#00000080;bottom:0;left:0;position:fixed;right:0;top:0;z-index:1000}.loading--small{gap:.5rem}.loading--medium{gap:1rem}.loading--large{gap:1.5rem}.loading__spinner{display:flex;gap:.25rem}.loading__spinner-circle{animation:loading-bounce 1.4s ease-in-out infinite both;background-color:#1db954;background-color:var(--primary-color,#1db954);border-radius:50%;height:8px;width:8px}.loading--small .loading__spinner-circle{height:6px;width:6px}.loading--large .loading__spinner-circle{height:12px;width:12px}.loading__spinner-circle:first-child{animation-delay:-.32s}.loading__spinner-circle:nth-child(2){animation-delay:-.16s}.loading__text{color:#fff;color:var(--text-color,#fff);font-size:.875rem;margin:0;text-align:center}.loading--small .loading__text{font-size:.75rem}.loading--large .loading__text{font-size:1rem}@keyframes loading-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@media (prefers-contrast:high){.loading__spinner-circle{background-color:currentColor}}@media (prefers-reduced-motion:reduce){.loading__spinner-circle{animation:loading-pulse 2s ease-in-out infinite}@keyframes loading-pulse{0%,to{opacity:.3}50%{opacity:1}}}.Playlist{background:linear-gradient(135deg,#121212f2,#282828f2);border-radius:var(--border-radius-lg);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.playlist__header{background:#ffffff05;border-bottom:1px solid var(--border-color);padding:var(--spacing-lg)}.playlist__title-section{margin-bottom:var(--spacing-md)}.playlist__name-input{background:#0000;border:0;border-bottom:2px solid #0000;color:var(--text-primary);font-family:var(--font-family);font-size:var(--font-size-xl);font-weight:700;outline:0;padding:var(--spacing-sm) 0;transition:border-color var(--transition-fast);width:100%}.playlist__name-input:focus{border-bottom-color:var(--accent-color)}.playlist__name-input::placeholder{color:var(--text-muted)}.playlist__description-input{background:#0000;border:0;border-bottom:1px solid #0000;color:var(--text-secondary);font-family:var(--font-family);font-size:var(--font-size-sm);margin-top:var(--spacing-sm);outline:0;padding:var(--spacing-xs) 0;resize:none;transition:border-color var(--transition-fast);width:100%}.playlist__description-input:focus{border-bottom-color:var(--border-color)}.playlist__description-input::placeholder{color:var(--text-muted)}.playlist__metadata{align-items:center;color:var(--text-secondary);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.playlist__separator{color:var(--text-muted)}.playlist__bulk-actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.playlist__bulk-remove,.playlist__bulk-select{background:#0000;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);color:var(--text-secondary);cursor:pointer;font-size:var(--font-size-xs);padding:var(--spacing-xs) var(--spacing-sm);transition:all var(--transition-fast)}.playlist__bulk-select:hover{background:#ffffff0d;color:var(--text-primary)}.playlist__bulk-remove{border-color:var(--error-color);color:var(--error-color)}.playlist__bulk-remove:hover{background:var(--error-color);color:var(--text-primary)}.playlist__content{flex:1 1;overflow-y:auto;padding:var(--spacing-md)}.playlist__empty{align-items:center;color:var(--text-muted);display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-xl) var(--spacing-lg);text-align:center}.playlist__empty-icon{margin-bottom:var(--spacing-md);opacity:.5}.playlist__empty h3{color:var(--text-secondary);font-size:var(--font-size-lg);margin:0 0 var(--spacing-sm) 0}.playlist__empty p{font-size:var(--font-size-sm);margin:0}.playlist__track-list{display:flex;flex-direction:column;gap:var(--spacing-xs)}.playlist__track-item{align-items:center;border:1px solid #0000;border-radius:var(--border-radius-sm);cursor:pointer;display:flex;padding:var(--spacing-sm);transition:all var(--transition-fast)}.playlist__track-item:hover{background:#ffffff0d}.playlist__track-item--selected{background:#1db9541a;border-color:var(--accent-color)}.playlist__track-item--dragging{opacity:.5;transform:rotate(2deg)}.playlist__track-checkbox{margin-right:var(--spacing-sm)}.playlist__track-checkbox input[type=checkbox]{cursor:pointer;height:16px;width:16px}.playlist__track-index{color:var(--text-muted);font-size:var(--font-size-sm);margin-right:var(--spacing-sm);text-align:center;width:24px}.playlist__track-content{flex:1 1;min-width:0}.playlist__actions{background:#ffffff05;border-top:1px solid var(--border-color);padding:var(--spacing-lg)}.Playlist-save{align-items:center;background:var(--accent-color);border:none;border-radius:var(--border-radius-full);color:var(--text-primary);cursor:pointer;display:flex;font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:600;gap:var(--spacing-sm);justify-content:center;max-width:200px;padding:var(--spacing-md) var(--spacing-lg);transition:all var(--transition-fast);width:100%}.Playlist-save:hover{background:var(--accent-hover);transform:translateY(-1px)}.Playlist-save:active{transform:translateY(0)}.playlist__content::-webkit-scrollbar{width:8px}.playlist__content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:var(--border-radius-sm)}.playlist__content::-webkit-scrollbar-thumb{background:#fff3;border-radius:var(--border-radius-sm)}.playlist__content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width:768px){.playlist__header{padding:var(--spacing-md)}.playlist__content{padding:var(--spacing-sm)}.playlist__name-input{font-size:var(--font-size-lg)}.playlist__bulk-actions{align-items:stretch;flex-direction:column}.playlist__bulk-remove,.playlist__bulk-select{text-align:center;width:100%}.playlist__track-item{padding:var(--spacing-xs)}.playlist__track-checkbox,.playlist__track-index{margin-right:var(--spacing-xs)}.playlist__track-index{width:20px}}@media (max-width:480px){.playlist__header{padding:var(--spacing-sm)}.playlist__metadata{align-items:flex-start;flex-direction:column;gap:var(--spacing-xs)}.playlist__separator{display:none}}.Track{align-items:center;border-bottom:1px solid var(--border-color);border-radius:var(--border-radius-sm);display:flex;justify-content:space-between;margin-bottom:var(--spacing-xs);padding:var(--spacing-md);transition:background-color var(--transition-fast)}.Track:hover{background-color:#ffffff0d}.Track--current{background-color:#1db9541a;border-color:var(--accent-color)}.Track-information{display:flex;flex:1 1;flex-direction:column;justify-content:center;min-width:0}.Track-information h3{color:var(--text-primary);font-size:var(--font-size-base);font-weight:500;margin:0 0 var(--spacing-xs) 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Track--current .Track-information h3{color:var(--accent-color)}.Track-information p{color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:300;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Track-no-preview{color:var(--text-muted)!important}.Track-actions{flex-shrink:0;gap:var(--spacing-sm)}.Track-action,.Track-actions{align-items:center;display:flex}.Track-action{background-color:initial;border:none;border-radius:var(--border-radius-full);color:var(--text-secondary);cursor:pointer;height:32px;justify-content:center;padding:0;transition:all var(--transition-fast);width:32px}.Track-action:hover{background-color:#ffffff1a;color:var(--text-primary);transform:scale(1.1)}.Track-action:focus{outline:2px solid var(--accent-color);outline-offset:2px}.Track-action--play{background-color:var(--accent-color);color:var(--text-primary)}.Track-action--play:hover{background-color:var(--accent-hover);color:var(--text-primary)}.Track-action--current{background-color:var(--accent-color)}.Track-action--add:hover{color:var(--accent-color)}.Track-action--remove:hover{color:var(--error-color)}.Track-action svg{height:16px;width:16px}@media (max-width:768px){.Track{padding:var(--spacing-sm)}.Track-information h3{font-size:var(--font-size-sm)}.Track-information p{font-size:var(--font-size-xs)}.Track-action{height:28px;width:28px}.Track-action svg{height:14px;width:14px}}@media (max-width:480px){.Track{padding:var(--spacing-xs) var(--spacing-sm)}.Track-actions{gap:var(--spacing-xs)}}.Track--playable{cursor:pointer;transition:all var(--transition-fast)}.Track--playable:hover{background-color:#ffffff14;box-shadow:0 2px 8px #0003;transform:translateY(-1px)}.Track--playable:active{transform:translateY(0)}.Track-no-preview{font-style:italic}.Track-action--no-preview{background-color:var(--text-secondary);opacity:.6}.Track-action--no-preview:hover{background-color:var(--text-primary);opacity:.8}.Track-no-preview{color:var(--text-tertiary);font-size:var(--font-size-xs);line-height:1.3;margin-top:var(--spacing-xs)}.search-results{margin:0 auto;max-width:1200px;width:100%}.search-results__header{align-items:flex-start;display:flex;gap:var(--spacing-lg);justify-content:space-between;margin-bottom:var(--spacing-lg)}.search-results__info{flex:1 1}.search-results__title{color:#fff;font-size:1.5rem;font-weight:700;margin:0 0 var(--spacing-xs) 0}.search-results__count{color:#b3b3b3;font-size:.875rem;margin:0}.search-results__controls{align-items:center;display:flex;gap:var(--spacing-md)}.search-results__sort{position:relative}.search-results__sort-button{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:20px;color:#fff;cursor:pointer;display:flex;font-size:.875rem;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);transition:all .2s ease}.search-results__sort-button:hover{background:#ffffff26}.search-results__sort-icon{transition:transform .2s ease}.search-results__sort-icon--open{transform:rotate(180deg)}.search-results__sort-dropdown{background:#282828;border-radius:8px;box-shadow:0 8px 32px #0000004d;margin-top:var(--spacing-xs);min-width:150px;position:absolute;right:0;top:100%;z-index:100}.search-results__sort-option{background:none;border:none;color:#fff;cursor:pointer;font-size:.875rem;padding:var(--spacing-sm) var(--spacing-md);text-align:left;transition:all .2s ease;width:100%}.search-results__sort-option:hover{background:#ffffff1a}.search-results__sort-option--active{background:#1db95433;color:#1db954}.search-results__sort-option:first-child{border-radius:8px 8px 0 0}.search-results__sort-option:last-child{border-radius:0 0 8px 8px}.search-results__tabs{-ms-overflow-style:none;border-bottom:1px solid #ffffff1a;display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-xl);overflow-x:auto;scrollbar-width:none}.search-results__tabs::-webkit-scrollbar{display:none}.search-results__tab{align-items:center;background:none;border:none;border-bottom:2px solid #0000;color:#b3b3b3;cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:var(--spacing-xs);padding:var(--spacing-md) var(--spacing-lg);position:relative;transition:all .2s ease;white-space:nowrap}.search-results__tab:hover:not(:disabled){color:#fff}.search-results__tab--active{border-bottom-color:#1db954;color:#fff}.search-results__tab:disabled{color:#535353;cursor:not-allowed}.search-results__tab-count{background:#ffffff1a;border-radius:10px;font-size:.75rem;font-weight:500;padding:2px 6px}.search-results__tab--active .search-results__tab-count{background:#1db95433;color:#1db954}.search-results__content{min-height:200px}.search-results__section{margin-bottom:var(--spacing-xxl)}.search-results__section-title{color:#fff;font-size:1.25rem;font-weight:700;margin:0 0 var(--spacing-lg) 0}.search-results__show-more{background:#ffffff1a;border:1px solid #fff3;border-radius:20px;color:#fff;cursor:pointer;display:block;font-size:.875rem;font-weight:600;margin:var(--spacing-lg) auto 0;padding:var(--spacing-sm) var(--spacing-lg);transition:all .2s ease}.search-results__show-more:hover{background:#ffffff26;transform:translateY(-1px)}.search-results__artists{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.search-results__artists--full{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.search-results__artist-card{background:#ffffff0d;border-radius:12px;cursor:pointer;padding:var(--spacing-lg);text-align:center;transition:all .3s ease}.search-results__artist-card:hover{background:#ffffff1a;transform:translateY(-4px)}.search-results__artist-image{align-items:center;background:#ffffff1a;border-radius:50%;display:flex;height:120px;justify-content:center;margin:0 auto var(--spacing-md);overflow:hidden;width:120px}.search-results__artist-image img{height:100%;object-fit:cover;width:100%}.search-results__artist-placeholder{color:#b3b3b3}.search-results__artist-name{color:#fff;font-size:1rem;font-weight:600;margin:0 0 var(--spacing-xs) 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-results__artist-type{color:#b3b3b3;font-size:.875rem;margin:0}.search-results__albums{grid-gap:var(--spacing-lg);display:grid;gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.search-results__albums--full{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.search-results__album-card{background:#ffffff0d;border-radius:12px;cursor:pointer;padding:var(--spacing-lg);transition:all .3s ease}.search-results__album-card:hover{background:#ffffff1a;transform:translateY(-4px)}.search-results__album-image{align-items:center;aspect-ratio:1;background:#ffffff1a;border-radius:8px;display:flex;justify-content:center;margin-bottom:var(--spacing-md);overflow:hidden;width:100%}.search-results__album-image img{height:100%;object-fit:cover;width:100%}.search-results__album-placeholder{color:#b3b3b3}.search-results__album-name{color:#fff;font-size:1rem;font-weight:600;margin:0 0 var(--spacing-xs) 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-results__album-artist{color:#b3b3b3;font-size:.875rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-results__empty{align-items:center;color:#b3b3b3;display:flex;flex-direction:column;justify-content:center;padding:var(--spacing-xxl) 0;text-align:center}.search-results__empty-icon{margin-bottom:var(--spacing-lg);opacity:.5}.search-results__empty h3{color:#fff;font-size:1.25rem;font-weight:600;margin:0 0 var(--spacing-sm) 0}.search-results__empty p{font-size:1rem;margin:0;max-width:400px}@media (max-width:767px){.search-results__header{flex-direction:column;gap:var(--spacing-md)}.search-results__title{font-size:1.25rem}.search-results__tabs{gap:0}.search-results__tab{font-size:.8125rem;padding:var(--spacing-sm) var(--spacing-md)}.search-results__albums,.search-results__artists{gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.search-results__artist-image{height:100px;width:100px}.search-results__album-card,.search-results__artist-card{padding:var(--spacing-md)}}@media (min-width:768px) and (max-width:1023px){.search-results__albums,.search-results__artists{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}.TrackList{width:100%}.TrackList--virtualized{height:100%;overflow:hidden}.TrackList__virtualized-container{height:100%;width:100%}.virtualized-list{overflow-x:hidden;overflow-y:auto}.virtualized-list,.virtualized-list__spacer{position:relative;width:100%}.virtualized-list__content{left:0;position:absolute;right:0;top:0;will-change:transform}.virtualized-list__item{align-items:center;display:flex;width:100%}.virtualized-list{scroll-behavior:smooth}.virtualized-list::-webkit-scrollbar{width:8px}.virtualized-list::-webkit-scrollbar-track{background:#181818;background:var(--surface-color,#181818)}.virtualized-list::-webkit-scrollbar-thumb{background:#333;background:var(--border-color,#333);border-radius:4px}.virtualized-list::-webkit-scrollbar-thumb:hover{background:#535353;background:var(--border-hover,#535353)}.virtualized-list:focus{outline:2px solid #1db954;outline:2px solid var(--focus-color,#1db954);outline-offset:-2px}.virtualized-list--loading{pointer-events:none}.virtualized-list--loading .virtualized-list__item{opacity:.6}.virtualized-list--empty{align-items:center;color:#b3b3b3;color:var(--text-secondary,#b3b3b3);display:flex;font-size:.875rem;justify-content:center}.virtualized-list__content,.virtualized-list__item{contain:layout style paint}@media (prefers-reduced-motion:reduce){.virtualized-list{scroll-behavior:auto}.virtualized-list__content{transition:none}}@media (max-width:768px){.virtualized-list::-webkit-scrollbar{width:4px}.virtualized-list{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}}
/*# sourceMappingURL=main.6f13c1e0.css.map*/