@import url(https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap);*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}button{cursor:pointer}button,input,select,textarea{font-family:inherit}a{color:inherit;text-decoration:none}.app-container{display:flex;flex-direction:column;min-height:100vh}.header{align-items:center;background-color:#fff;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:space-between;padding:1rem 2rem}.header h1{font-size:1.5rem;font-weight:600}.header-nav{align-items:center;display:flex;gap:1rem}.nav-button{border:none;border-radius:6px;font-size:.95rem;font-weight:500;padding:.5rem 1.25rem;transition:all .2s}.nav-button.primary{background-color:#5cb85c;color:#fff}.nav-button.primary:hover{background-color:#4cae4c}.nav-button.secondary{background-color:#f0f0f0;color:#333}.nav-button.secondary:hover{background-color:#e0e0e0}.nav-button.logout{background-color:#d9534f;color:#fff}.nav-button.logout:hover{background-color:#c9302c}.main-content{flex:1 1;margin:0 auto;max-width:1400px;padding:2rem;width:100%}.hero-banner{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;display:flex;height:200px;justify-content:center;margin-bottom:2rem;overflow:hidden;position:relative;width:100%}.hero-banner:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath fill='%23ffffff10' d='M0 100q300-50 600 0t600 0v100H0Z'/%3E%3C/svg%3E");background-size:cover;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.section-header{flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}.badge{border:none;border-radius:20px;font-size:.9rem;font-weight:500;padding:.5rem 1.25rem}.badge.primary{background-color:#5cb85c;color:#fff}.badge.secondary{background-color:#f0f0f0;color:#666}.section-description{color:#666;font-size:.95rem;margin-bottom:2rem}:root{--color-primary-50:#f8fafc;--color-primary-100:#f1f5f9;--color-primary-200:#e2e8f0;--color-primary-300:#cbd5e1;--color-primary-400:#94a3b8;--color-primary-500:#64748b;--color-primary-600:#475569;--color-primary-700:#334155;--color-primary-800:#1e293b;--color-primary-900:#0f172a;--color-secondary-50:#ecfeff;--color-secondary-100:#cffafe;--color-secondary-200:#a5f3fc;--color-secondary-300:#67e8f9;--color-secondary-400:#22d3ee;--color-secondary-500:#06b6d4;--color-secondary-600:#0891b2;--color-secondary-700:#0e7490;--color-secondary-800:#155e75;--color-secondary-900:#164e63;--color-accent-gold:#3b82f6;--color-accent-gold-light:#60a5fa;--color-accent-gold-dark:#2563eb;--color-success:#22c55e;--color-success-light:#dcfce7;--color-warning:#f59e0b;--color-warning-light:#fef3c7;--color-error:#ef4444;--color-error-light:#fee2e2;--color-info:#0ea5e9;--color-info-light:#e0f2fe;--color-white:#fff;--color-neutral-25:#fafbfc;--color-neutral-50:#f8fafc;--color-neutral-100:#f1f5f9;--color-neutral-200:#e2e8f0;--color-neutral-300:#cbd5e1;--color-neutral-400:#94a3b8;--color-neutral-500:#64748b;--color-neutral-600:#475569;--color-neutral-700:#334155;--color-neutral-800:#1e293b;--color-neutral-900:#0f172a;--color-surface-dark:#18181b;--color-surface-dark-elevated:#27272a;--color-surface-dark-overlay:#0009;--font-family-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;--font-family-body:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-family-mono:"JetBrains Mono","SF Mono","Monaco",monospace;--font-size-2xs:0.625rem;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--font-size-4xl:2.5rem;--font-size-5xl:3rem;--font-size-6xl:4rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-none:1;--line-height-tight:1.2;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--spacing-0:0;--spacing-px:1px;--spacing-0-5:0.125rem;--spacing-1:0.25rem;--spacing-1-5:0.375rem;--spacing-2:0.5rem;--spacing-2-5:0.625rem;--spacing-3:0.75rem;--spacing-3-5:0.875rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-7:1.75rem;--spacing-8:2rem;--spacing-9:2.25rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-14:3.5rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-32:8rem;--radius-none:0;--radius-sm:0.25rem;--radius-base:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.25rem;--radius-3xl:1.5rem;--radius-full:9999px;--shadow-xs:0 1px 2px #1c19170a;--shadow-sm:0 1px 3px #1c191714,0 1px 2px #1c19170a;--shadow-base:0 4px 6px -1px #1c191714,0 2px 4px -2px #1c19170a;--shadow-md:0 8px 16px -4px #1c19171a,0 4px 6px -2px #1c19170d;--shadow-lg:0 16px 32px -8px #1c19171f,0 8px 16px -4px #1c19170f;--shadow-xl:0 24px 48px -12px #1c19172e;--shadow-2xl:0 32px 64px -16px #1c191740;--shadow-inner:inset 0 2px 4px #1c19170f;--shadow-primary:0 8px 24px -4px #06b6d459;--shadow-primary-lg:0 16px 40px -8px #06b6d466;--shadow-secondary:0 8px 24px -4px #22d3ee59;--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-base:200ms cubic-bezier(0.4,0,0.2,1);--transition-slow:300ms cubic-bezier(0.4,0,0.2,1);--transition-slower:500ms cubic-bezier(0.4,0,0.2,1);--transition-bounce:500ms cubic-bezier(0.34,1.56,0.64,1);--transition-spring:600ms cubic-bezier(0.175,0.885,0.32,1.275);--z-base:0;--z-docked:10;--z-dropdown:1000;--z-sticky:1100;--z-banner:1200;--z-overlay:1300;--z-modal:1400;--z-popover:1500;--z-skipLink:1600;--z-toast:1700;--z-tooltip:1800;--gradient-brand:linear-gradient(135deg,var(--color-secondary-500) 0%,var(--color-secondary-600) 50%,#0891b2 100%);--gradient-brand-vibrant:linear-gradient(135deg,#22d3ee 0%,var(--color-secondary-500) 50%,#0e7490 100%);--gradient-sunset:linear-gradient(135deg,var(--color-secondary-400) 0%,var(--color-secondary-500) 35%,var(--color-primary-800) 100%);--gradient-dark:linear-gradient(180deg,var(--color-primary-900) 0%,#020617 100%);--gradient-mesh:radial-gradient(at 40% 20%,var(--color-secondary-500) 0px,#0000 50%),radial-gradient(at 80% 0%,var(--color-secondary-400) 0px,#0000 50%),radial-gradient(at 0% 50%,var(--color-primary-700) 0px,#0000 50%);--glass-bg:#fffc;--glass-bg-dark:#18181bcc;--glass-border:#fff3;--glass-blur:blur(12px)}*,:after,:before{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}body{background:#f8fafc;background:var(--color-neutral-50);color:#0f172a;color:var(--color-neutral-900);font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-family:var(--font-family-body);font-size:1rem;font-size:var(--font-size-base);line-height:1.5;line-height:var(--line-height-normal);margin:0;padding:0}:focus{outline:none}:focus-visible{border-radius:.25rem;border-radius:var(--radius-sm);outline:2px solid #64748b;outline:2px solid var(--color-primary-500);outline-offset:2px}::selection{background:#e2e8f0;background:var(--color-primary-200);color:#0f172a;color:var(--color-primary-900)}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#f1f5f9;background:var(--color-neutral-100)}::-webkit-scrollbar-thumb,::-webkit-scrollbar-track{border-radius:9999px;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb{background:#cbd5e1;background:var(--color-neutral-300);border:2px solid #f1f5f9;border:2px solid var(--color-neutral-100)}::-webkit-scrollbar-thumb:hover{background:#94a3b8;background:var(--color-neutral-400)}.dark ::-webkit-scrollbar-track,[data-theme=dark] ::-webkit-scrollbar-track{background:#1e293b;background:var(--color-neutral-800)}.dark ::-webkit-scrollbar-thumb,[data-theme=dark] ::-webkit-scrollbar-thumb{background:#475569;background:var(--color-neutral-600);border-color:#1e293b;border-color:var(--color-neutral-800)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-25%)}}@keyframes soundWave{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@keyframes vinylSpin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes glow{0%,to{box-shadow:0 0 20px #64748b;box-shadow:0 0 20px var(--color-primary-500)}50%{box-shadow:0 0 40px #94a3b8,0 0 60px #cbd5e1;box-shadow:0 0 40px var(--color-primary-400),0 0 60px var(--color-primary-300)}}.animate-fadeIn{animation:fadeIn ease-out .2s cubic-bezier(.4,0,.2,1);animation:fadeIn var(--transition-base) ease-out}.animate-fadeInUp{animation:fadeInUp ease-out .3s cubic-bezier(.4,0,.2,1);animation:fadeInUp var(--transition-slow) ease-out}.animate-fadeInDown{animation:fadeInDown ease-out .3s cubic-bezier(.4,0,.2,1);animation:fadeInDown var(--transition-slow) ease-out}.animate-scaleIn{animation:scaleIn ease-out .2s cubic-bezier(.4,0,.2,1);animation:scaleIn var(--transition-base) ease-out}.animate-slideInRight{animation:slideInRight ease-out .3s cubic-bezier(.4,0,.2,1);animation:slideInRight var(--transition-slow) ease-out}.animate-pulse{animation:pulse 2s ease-in-out infinite}.animate-shimmer{animation:shimmer 2s linear infinite}.animate-float{animation:float 3s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.animate-bounce{animation:bounce 1s ease-in-out infinite}.animate-glow{animation:glow 2s ease-in-out infinite}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-display{font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-family-display)}.font-body{font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-family:var(--font-family-body)}.font-mono{font-family:JetBrains Mono,SF Mono,Monaco,monospace;font-family:var(--font-family-mono)}.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)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-2,.line-clamp-3{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3}.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}.glass{background:#fffc;background:var(--glass-bg);border:1px solid #fff3;border:1px solid var(--glass-border)}.glass,.glass-dark{backdrop-filter:blur(12px);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:blur(12px);-webkit-backdrop-filter:var(--glass-blur)}.glass-dark{background:#18181bcc;background:var(--glass-bg-dark);border:1px solid #ffffff1a}.gradient-text{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#06b6d4,#0891b2 50%,#0891b2);background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text}.login-page{background:var(--color-neutral-900);display:flex;min-height:100vh;overflow:hidden;position:relative}.login-page:before{animation:meshShift 20s ease-in-out infinite;background:radial-gradient(ellipse 80% 50% at 20% -20%,#06b6d440 0,#0000 50%),radial-gradient(ellipse 60% 40% at 80% 0,#22d3ee33 0,#0000 50%),radial-gradient(ellipse 50% 80% at 0 100%,#0e749033 0,#0000 50%),radial-gradient(ellipse 40% 60% at 100% 80%,#06b6d426 0,#0000 50%);content:"";inset:0;pointer-events:none;position:absolute}@keyframes meshShift{0%,to{transform:translate(0) rotate(0deg)}25%{transform:translate(2%,-2%) rotate(1deg)}50%{transform:translate(-1%,3%) rotate(-1deg)}75%{transform:translate(3%,1%) rotate(.5deg)}}.login-page:after{animation:float 8s ease-in-out infinite,spin 60s linear infinite;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='rgba(6,182,212,0.15)' stroke-width='2'/%3E%3Ccircle cx='100' cy='100' r='60' fill='none' stroke='rgba(34,211,238,0.1)' stroke-width='2'/%3E%3Ccircle cx='100' cy='100' r='40' fill='none' stroke='rgba(6,182,212,0.08)' stroke-width='2'/%3E%3C/svg%3E") 50%/contain no-repeat;content:"";height:600px;opacity:.6;pointer-events:none;position:absolute;right:-200px;top:50%;transform:translateY(-50%);width:600px}.login-brand{display:flex;flex:1 1;flex-direction:column;justify-content:center;padding:var(--spacing-16);position:relative;z-index:1}.login-brand__content{max-width:480px}.login-brand__logo{align-items:center;display:flex;gap:var(--spacing-4);margin-bottom:var(--spacing-8)}.login-brand__icon{align-items:center;background:var(--gradient-brand);border-radius:var(--radius-2xl);box-shadow:var(--shadow-primary);display:flex;height:64px;justify-content:center;width:64px}.login-brand__icon svg{color:#fff;height:36px;width:36px}.login-brand__name{font-family:var(--font-family-display);font-size:var(--font-size-3xl)}.login-brand__name,.login-brand__tagline{color:#fff;font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight)}.login-brand__tagline{font-size:var(--font-size-4xl);line-height:var(--line-height-tight);margin-bottom:var(--spacing-6)}.login-brand__tagline span{-webkit-text-fill-color:#0000;background:var(--gradient-sunset);-webkit-background-clip:text;background-clip:text}.login-brand__description{color:var(--color-neutral-400);font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);max-width:400px}.login-brand__waves{align-items:flex-end;display:flex;gap:4px;height:40px;margin-top:var(--spacing-12)}.login-brand__wave{animation:soundWave 1s ease-in-out infinite;background:var(--gradient-sunset);border-radius:var(--radius-full);width:4px}.login-brand__wave:first-child{animation-delay:0s;height:20%}.login-brand__wave:nth-child(2){animation-delay:.1s;height:60%}.login-brand__wave:nth-child(3){animation-delay:.2s;height:40%}.login-brand__wave:nth-child(4){animation-delay:.3s;height:80%}.login-brand__wave:nth-child(5){animation-delay:.4s;height:30%}.login-brand__wave:nth-child(6){animation-delay:.5s;height:90%}.login-brand__wave:nth-child(7){animation-delay:.6s;height:50%}.login-brand__wave:nth-child(8){animation-delay:.7s;height:70%}.login-brand__wave:nth-child(9){animation-delay:.8s;height:35%}.login-brand__wave:nth-child(10){animation-delay:.9s;height:55%}.login-form-section{align-items:center;display:flex;justify-content:center;max-width:480px;padding:var(--spacing-8);position:relative;width:100%;z-index:1}.login-card{animation:fadeInUp .6s ease-out;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff08;border:1px solid #ffffff14;border-radius:var(--radius-3xl);padding:var(--spacing-10);width:100%}.login-card__header{margin-bottom:var(--spacing-8);text-align:center}.login-card__title{color:#fff;font-family:var(--font-family-display);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-2) 0}.login-card__subtitle{color:var(--color-neutral-400);font-size:var(--font-size-base);margin:0}.login-alert{align-items:center;animation:fadeIn .3s ease-out;border-radius:var(--radius-xl);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3);margin-bottom:var(--spacing-6);padding:var(--spacing-4)}.login-alert--error{background:#ef444426;border:1px solid #ef44444d;color:#fca5a5}.login-alert--success{background:#22c55e26;border:1px solid #22c55e4d;color:#86efac}.login-alert svg{flex-shrink:0}.btn-microsoft{align-items:center;background:#fff;border:none;border-radius:var(--radius-xl);color:var(--color-neutral-800);cursor:pointer;display:flex;font-family:var(--font-family-body);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);gap:var(--spacing-3);justify-content:center;overflow:hidden;padding:var(--spacing-4) var(--spacing-6);position:relative;transition:all var(--transition-base);width:100%}.btn-microsoft:before{background:var(--gradient-brand);content:"";inset:0;opacity:0;position:absolute;transition:opacity var(--transition-base)}.btn-microsoft:hover{box-shadow:0 8px 24px #fff3;transform:translateY(-2px)}.btn-microsoft:hover:before{opacity:.05}.btn-microsoft:active{transform:translateY(0)}.btn-microsoft:disabled{cursor:not-allowed;opacity:.6;transform:none}.btn-microsoft svg{flex-shrink:0}.btn-microsoft span{position:relative;z-index:1}.login-divider{align-items:center;display:flex;gap:var(--spacing-4);margin:var(--spacing-8) 0}.login-divider:after,.login-divider:before{background:linear-gradient(90deg,#0000,#ffffff26,#0000);content:"";flex:1 1;height:1px}.login-divider span{color:var(--color-neutral-500);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase}.login-signup{border-top:1px solid #ffffff14;margin-top:var(--spacing-8);padding-top:var(--spacing-6);text-align:center}.login-signup p{color:var(--color-neutral-400);font-size:var(--font-size-sm);margin:0}.login-signup button{background:none;border:none;color:var(--color-primary-400);cursor:pointer;font-weight:var(--font-weight-semibold);margin-left:var(--spacing-1);padding:0;transition:color var(--transition-fast)}.login-signup button:hover{color:var(--color-primary-300);text-decoration:underline}.login-features{margin-top:var(--spacing-8)}.login-features__item{align-items:center;color:var(--color-neutral-400);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-3);padding:var(--spacing-3) 0}.login-features__icon{align-items:center;background:#ff6b4a1a;border-radius:var(--radius-lg);color:var(--color-primary-400);display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}@media (max-width:1024px){.login-page{flex-direction:column}.login-brand{padding:var(--spacing-8) var(--spacing-6);text-align:center}.login-brand__content{margin:0 auto;max-width:100%}.login-brand__logo{justify-content:center}.login-brand__tagline{font-size:var(--font-size-3xl)}.login-brand__description{margin:0 auto;max-width:100%}.login-brand__waves{justify-content:center;margin-top:var(--spacing-6)}.login-form-section{max-width:100%;padding:var(--spacing-6)}.login-card{padding:var(--spacing-8)}.login-page:after{display:none}}@media (max-width:640px){.login-brand{padding:var(--spacing-6) var(--spacing-4)}.login-brand__tagline{font-size:var(--font-size-2xl)}.login-brand__description{font-size:var(--font-size-base)}.login-form-section{padding:var(--spacing-4)}.login-card{border-radius:var(--radius-2xl);padding:var(--spacing-6)}}.btn-microsoft.loading{pointer-events:none}.btn-microsoft.loading span{opacity:0}.btn-microsoft.loading:after{animation:spin .8s linear infinite;border:2px solid var(--color-neutral-300);border-radius:50%;border-top-color:var(--color-primary-500);content:"";height:20px;position:absolute;width:20px}.top-bar{background:var(--color-white);border-bottom:1px solid var(--color-neutral-200);position:-webkit-sticky;position:sticky;top:0;transition:all var(--transition-base);z-index:var(--z-sticky)}.top-bar--scrolled{box-shadow:var(--shadow-md)}.top-bar__container{align-items:center;display:flex;gap:var(--spacing-8);height:72px;justify-content:space-between;margin:0 auto;max-width:1600px;padding:0 var(--spacing-6)}.top-bar__left{gap:var(--spacing-4)}.top-bar__left,.top-bar__logo{align-items:center;display:flex}.top-bar__logo{cursor:pointer;gap:var(--spacing-3);text-decoration:none;transition:opacity var(--transition-fast)}.top-bar__logo:hover{opacity:.8}.top-bar__icon{align-items:center;background:var(--gradient-brand);border-radius:var(--radius-xl);box-shadow:var(--shadow-primary);display:flex;height:44px;justify-content:center;transition:transform var(--transition-bounce);width:44px}.top-bar__logo:hover .top-bar__icon{transform:scale(1.05) rotate(-3deg)}.top-bar__icon svg{color:#fff;height:24px;width:24px}.top-bar__title{color:var(--color-neutral-900);font-family:var(--font-family-display);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight);margin:0}.top-bar__mode-switcher{align-items:center;background:var(--color-neutral-100);border-radius:var(--radius-full);display:flex;padding:4px;position:relative}.top-bar__mode-switcher:before{background:var(--color-white);border-radius:var(--radius-full);bottom:4px;box-shadow:var(--shadow-sm);content:"";position:absolute;top:4px;transition:transform var(--transition-bounce);width:calc(50% - 4px);z-index:0}.top-bar__mode-switcher[data-mode=player]:before{transform:translateX(100%)}.top-bar__mode-btn{align-items:center;background:#0000;border:none;border-radius:var(--radius-full);color:var(--color-neutral-500);cursor:pointer;display:flex;font-family:var(--font-family-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);gap:var(--spacing-2);padding:var(--spacing-2-5) var(--spacing-5);position:relative;transition:color var(--transition-fast);z-index:1}.top-bar__mode-btn:hover{color:var(--color-neutral-700)}.top-bar__mode-btn.active{color:var(--color-primary-600)}.top-bar__mode-btn svg{height:18px;transition:transform var(--transition-bounce);width:18px}.top-bar__mode-btn.active svg{transform:scale(1.1)}.top-bar__actions{align-items:center;display:flex;gap:var(--spacing-3)}.top-bar__btn{align-items:center;border:none;border-radius:var(--radius-xl);cursor:pointer;display:inline-flex;font-family:var(--font-family-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);padding:var(--spacing-2-5) var(--spacing-4);transition:all var(--transition-base);white-space:nowrap}.top-bar__btn svg{height:18px;width:18px}.top-bar__btn--primary{background:var(--gradient-brand);box-shadow:var(--shadow-primary);color:#fff;font-weight:var(--font-weight-semibold)}.top-bar__btn--primary:hover{box-shadow:var(--shadow-primary-lg);transform:translateY(-2px)}.top-bar__btn--primary:active{transform:translateY(0)}.top-bar__btn--secondary{background:var(--color-neutral-100);border:1px solid var(--color-neutral-200);color:var(--color-neutral-700)}.top-bar__btn--secondary:hover{background:var(--color-neutral-200);color:var(--color-neutral-900)}.top-bar__btn--ghost{background:#0000;color:var(--color-neutral-500);padding:var(--spacing-2)}.top-bar__btn--ghost:hover{background:var(--color-neutral-100);color:var(--color-neutral-700)}.top-bar__divider{background:var(--color-neutral-200);height:24px;margin:0 var(--spacing-1);width:1px}.top-bar__user{align-items:center;border-radius:var(--radius-full);cursor:pointer;display:flex;gap:var(--spacing-2);padding:var(--spacing-1-5);transition:background var(--transition-fast)}.top-bar__user:hover{background:var(--color-neutral-100)}.top-bar__avatar{align-items:center;background:var(--gradient-sunset);border-radius:var(--radius-full);color:#fff;display:flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);height:32px;justify-content:center;width:32px}@media (max-width:768px){.top-bar__container{gap:var(--spacing-4);height:64px;padding:0 var(--spacing-4)}.top-bar__title{font-size:var(--font-size-lg)}.top-bar__mode-btn span{display:none}.top-bar__mode-btn{padding:var(--spacing-2) var(--spacing-3)}.top-bar__btn span{display:none}.top-bar__btn{padding:var(--spacing-2)}.top-bar__btn--primary span{display:inline}.top-bar__btn--primary{padding:var(--spacing-2) var(--spacing-4)}.top-bar__divider{display:none}}@media (max-width:480px){.top-bar__title{display:none}.top-bar__icon{height:40px;width:40px}.top-bar__btn--primary span{display:none}.top-bar__btn--primary{padding:var(--spacing-2)}}.top-bar__btn:focus-visible,.top-bar__logo:focus-visible,.top-bar__mode-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@keyframes logoEntrance{0%{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}.top-bar__logo{animation:logoEntrance .4s ease-out}.top-bar__badge{align-items:center;background:var(--color-error);border:2px solid var(--color-white);border-radius:var(--radius-full);color:#fff;display:flex;font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);height:18px;justify-content:center;position:absolute;right:-4px;top:-4px;width:18px}.studio-stats{margin-bottom:var(--spacing-6)}.studio-stats__chip{align-items:center;background:var(--color-neutral-100);border-radius:var(--radius-full);display:inline-flex;font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4)}.studio-stats__value{align-items:center;color:var(--color-neutral-900);display:flex;font-weight:var(--font-weight-semibold);gap:var(--spacing-2)}.studio-stats__label{color:var(--color-neutral-600);font-weight:var(--font-weight-normal)}.studio-stats__chip--generating{background:#4ade801a}.studio-stats__chip--generating .studio-stats__label,.studio-stats__chip--generating .studio-stats__value{color:var(--color-accent-mint)}.studio-stats__pulse{animation:gentlePulse 3s ease-in-out infinite;background:var(--color-accent-mint);border-radius:var(--radius-full);display:inline-block;height:6px;width:6px}@keyframes gentlePulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width:768px){.studio-stats{gap:var(--spacing-2);margin-bottom:var(--spacing-4)}.studio-stats__chip{font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-3)}}.control-bar-premium{margin-bottom:var(--spacing-6)}.control-bar-premium__main{align-items:center;display:flex;gap:var(--spacing-3)}.control-bar-premium__search{flex:1 1;max-width:480px;position:relative}.search-icon{color:var(--color-neutral-400);left:var(--spacing-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.control-bar-premium__input{background:var(--color-white);border:1px solid var(--color-neutral-300);border-radius:var(--radius-lg);font-size:var(--font-size-base);padding:var(--spacing-3) var(--spacing-10);transition:all var(--transition-fast);width:100%}.control-bar-premium__input:hover{border-color:var(--color-neutral-400)}.control-bar-premium__input:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #667eea1a;outline:none}.clear-btn{align-items:center;background:#0000;border:none;border-radius:var(--radius-base);color:var(--color-neutral-500);cursor:pointer;display:flex;height:28px;justify-content:center;padding:0;position:absolute;right:var(--spacing-2);top:50%;transform:translateY(-50%);transition:all var(--transition-fast);width:28px}.clear-btn:hover{background:var(--color-neutral-200);color:var(--color-neutral-700)}.control-bar-premium__filters--desktop{align-items:center;display:flex;gap:var(--spacing-2)}.control-bar-premium__select{background:var(--color-white);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);color:var(--color-neutral-700);cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-2) var(--spacing-4);transition:all var(--transition-fast)}.control-bar-premium__select:hover{border-color:var(--color-neutral-400)}.control-bar-premium__select:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px #667eea1a;outline:none}.control-bar-premium__checkbox{align-items:center;cursor:pointer;display:flex;gap:var(--spacing-2);-webkit-user-select:none;user-select:none}.control-bar-premium__checkbox input{height:0;opacity:0;position:absolute;width:0}.checkbox-box{border:2px solid var(--color-neutral-400);border-radius:var(--radius-sm);flex-shrink:0;height:18px;position:relative;transition:all var(--transition-fast);width:18px}.control-bar-premium__checkbox input:checked+.checkbox-box{background:var(--color-primary-500);border-color:var(--color-primary-500)}.control-bar-premium__checkbox input:checked+.checkbox-box:after{border:solid #fff;border-width:0 2px 2px 0;content:"";height:8px;left:4px;position:absolute;top:1px;transform:rotate(45deg);width:4px}.checkbox-label{color:var(--color-neutral-700);font-size:var(--font-size-sm)}.control-bar-premium__clear{background:#0000;border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);color:var(--color-neutral-600);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-2) var(--spacing-4);transition:all var(--transition-fast)}.control-bar-premium__clear:hover{background:var(--color-neutral-100);border-color:var(--color-neutral-400);color:var(--color-neutral-800)}.control-bar-premium__mobile-toggle{align-items:center;background:var(--color-white);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);color:var(--color-neutral-700);cursor:pointer;display:none;height:40px;justify-content:center;padding:0;position:relative;transition:all var(--transition-fast);width:40px}.control-bar-premium__mobile-toggle:hover{background:var(--color-neutral-100);border-color:var(--color-neutral-400)}.filter-badge{align-items:center;background:var(--color-primary-500);border-radius:var(--radius-full);color:var(--color-white);display:flex;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);height:18px;justify-content:center;min-width:18px;padding:0 4px;position:absolute;right:-4px;top:-4px}.control-bar-premium__mobile-panel{animation:slideDown var(--transition-base) ease-out;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--spacing-4);margin-top:var(--spacing-4);padding:var(--spacing-4)}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.mobile-filter-group{display:flex;flex-direction:column;gap:var(--spacing-2)}.mobile-filter-label{color:var(--color-neutral-700);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.control-bar-premium__clear--mobile{width:100%}@media (max-width:768px){.control-bar-premium__main{gap:var(--spacing-2)}.control-bar-premium__search{max-width:none}.control-bar-premium__filters--desktop{display:none}.control-bar-premium__mobile-toggle{display:flex}}@media (max-width:480px){.control-bar-premium__input{font-size:var(--font-size-sm)}}.track-grid{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));width:100%}@media (max-width:768px){.track-grid{gap:var(--spacing-4);grid-template-columns:1fr}}@media (min-width:769px) and (max-width:1024px){.track-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}@media (min-width:1440px){.track-grid{gap:var(--spacing-6);grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}}@media (min-width:1920px){.track-grid{gap:var(--spacing-8);grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}}@media (min-width:2560px){.track-grid{gap:var(--spacing-8);grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}}.skeleton-grid{grid-gap:var(--spacing-6);display:grid;gap:var(--spacing-6);grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}@media (max-width:768px){.skeleton-grid{grid-template-columns:1fr}}.skeleton-card{animation:fadeIn var(--transition-base) ease-in;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-base);overflow:hidden}.skeleton-card__header{align-items:center;background:linear-gradient(135deg,#667eea1a,#764ba21a);display:flex;justify-content:space-between;padding:var(--spacing-4) var(--spacing-5)}.skeleton-icon{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background:var(--color-neutral-200);border-radius:var(--radius-full);height:32px;width:32px}.skeleton-actions{display:flex;gap:var(--spacing-2)}.skeleton-btn{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background:var(--color-neutral-200);border-radius:var(--radius-base);height:32px;width:32px}.skeleton-card__body{padding:var(--spacing-5)}.skeleton-title{height:24px;margin-bottom:var(--spacing-3);width:70%}.skeleton-text,.skeleton-title{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background:var(--color-neutral-200);border-radius:var(--radius-base)}.skeleton-text{height:16px;margin-bottom:var(--spacing-2);width:100%}.skeleton-text--short{width:80%}.skeleton-meta{border-top:1px solid var(--color-neutral-200);display:flex;gap:var(--spacing-4);margin-top:var(--spacing-4);padding-top:var(--spacing-4)}.skeleton-meta-item{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;background:var(--color-neutral-200);border-radius:var(--radius-base);height:14px;width:100px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.empty-state{animation:fadeIn var(--transition-base) ease-in}.empty-state__icon{background:linear-gradient(135deg,var(--color-primary-50) 0,var(--color-primary-100) 100%);color:var(--color-primary-500)}.empty-state__icon--search{background:linear-gradient(135deg,var(--color-neutral-100) 0,var(--color-neutral-200) 100%);color:var(--color-neutral-500)}.empty-state__title{color:var(--color-neutral-800);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-3) 0}.empty-state__description{color:var(--color-neutral-600);line-height:var(--line-height-relaxed);margin:0 0 var(--spacing-8) 0;max-width:480px}.empty-state__cta{align-items:center;background:linear-gradient(135deg,var(--color-primary-500) 0,var(--color-primary-700) 100%);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);color:var(--color-white);cursor:pointer;display:inline-flex;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);gap:var(--spacing-2);padding:var(--spacing-4) var(--spacing-6);transition:all var(--transition-base)}.empty-state__cta:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.empty-state__cta:active{transform:translateY(0)}@media (max-width:768px){.empty-state{padding:var(--spacing-12) var(--spacing-4)}.empty-state__icon{height:100px;width:100px}.empty-state__title{font-size:var(--font-size-xl)}.empty-state__description{font-size:var(--font-size-sm)}}.track-card{background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-2xl);cursor:pointer;overflow:hidden;padding:var(--spacing-5);position:relative;transition:all var(--transition-base)}.track-card:before{background:var(--gradient-brand);content:"";height:4px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity var(--transition-base)}.track-card:hover{border-color:var(--color-neutral-300);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.track-card:hover:before{opacity:1}.track-card--playing{border-color:var(--color-primary-400);box-shadow:0 0 0 1px var(--color-primary-400),var(--shadow-primary)}.track-card--playing:before{animation:gradientFlow 3s ease infinite;opacity:1}@keyframes gradientFlow{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.track-card__header{align-items:flex-start;display:flex;gap:var(--spacing-3);justify-content:space-between;margin-bottom:var(--spacing-3)}.track-card__title-section{display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-1);min-width:0}.track-card__title-row{align-items:center;display:flex;gap:var(--spacing-2)}.track-card__title{color:var(--color-neutral-900);font-family:var(--font-family-display);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-card__version{background:var(--color-primary-100);border-radius:var(--radius-md);color:var(--color-primary-700);flex-shrink:0;padding:2px var(--spacing-2)}.track-card__status,.track-card__version{align-items:center;display:inline-flex;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}.track-card__status{border-radius:var(--radius-full);gap:var(--spacing-1);letter-spacing:var(--letter-spacing-wide);padding:var(--spacing-1) var(--spacing-2-5);text-transform:uppercase}.status-ready{background:var(--color-success-light);color:var(--color-success)}.status-generating{background:var(--color-warning-light);color:var(--color-warning)}.status-draft{background:var(--color-info-light);color:var(--color-info)}.status-failed{background:var(--color-error-light);color:var(--color-error)}.status-pulse{animation:pulseGlow 1.5s ease-in-out infinite;background:currentColor;border-radius:var(--radius-full);display:inline-block;height:6px;width:6px}@keyframes pulseGlow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.track-card__actions{flex-shrink:0;gap:var(--spacing-2)}.action-btn,.track-card__actions,.track-card__rating{align-items:center;display:flex}.action-btn{background:var(--color-neutral-100);border:none;border-radius:var(--radius-lg);color:var(--color-neutral-500);cursor:pointer;height:32px;justify-content:center;padding:0;transition:all var(--transition-fast);width:32px}.action-btn:hover{background:var(--color-neutral-200);color:var(--color-neutral-700)}.menu-container{position:relative}.menu-dropdown{animation:dropdownSlide .2s ease-out;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);min-width:180px;padding:var(--spacing-2);position:absolute;right:0;top:calc(100% + 4px);z-index:var(--z-dropdown)}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.menu-item{align-items:center;background:#0000;border:none;border-radius:var(--radius-lg);color:var(--color-neutral-700);cursor:pointer;display:flex;font-family:var(--font-family-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-3);padding:var(--spacing-2-5) var(--spacing-3);text-align:left;transition:all var(--transition-fast);width:100%}.menu-item svg{flex-shrink:0;height:16px;width:16px}.menu-item:hover{background:var(--color-neutral-100);color:var(--color-neutral-900)}.menu-item--danger{color:var(--color-error)}.menu-item--danger:hover{background:var(--color-error-light);color:var(--color-error)}.track-card__meta{align-items:center;color:var(--color-neutral-500);display:flex;font-size:var(--font-size-sm);gap:var(--spacing-2);margin-bottom:var(--spacing-2)}.track-card__meta:before{background:var(--gradient-sunset);border-radius:var(--radius-sm);content:"";flex-shrink:0;height:12px;width:12px}.track-card__lyrics{-webkit-line-clamp:2;-webkit-box-orient:vertical;background:var(--color-neutral-50);border-left:3px solid var(--color-primary-300);border-radius:var(--radius-lg);color:var(--color-neutral-600);display:-webkit-box;font-size:var(--font-size-sm);font-style:italic;line-height:var(--line-height-relaxed);margin:0 0 var(--spacing-4) 0;overflow:hidden;padding:var(--spacing-3);white-space:pre-wrap}.track-card__tracks{border-top:1px solid var(--color-neutral-100);display:flex;flex-direction:column;gap:var(--spacing-2);margin-top:var(--spacing-3);padding-top:var(--spacing-3)}.track-row{align-items:center;border-radius:var(--radius-lg);display:flex;gap:var(--spacing-3);padding:var(--spacing-2);transition:background var(--transition-fast)}.track-row:hover{background:var(--color-neutral-50)}.track-row__play{align-items:center;background:var(--color-neutral-100);border:none;border-radius:var(--radius-full);color:var(--color-neutral-700);cursor:pointer;display:flex;flex-shrink:0;height:36px;justify-content:center;padding:0;transition:all var(--transition-base);width:36px}.track-row__play:hover{background:var(--color-primary-100);color:var(--color-primary-600);transform:scale(1.1)}.track-row__play.playing{animation:playPulse 2s ease-in-out infinite;background:var(--gradient-brand);box-shadow:var(--shadow-primary);color:#fff}@keyframes playPulse{0%,to{box-shadow:var(--shadow-primary)}50%{box-shadow:var(--shadow-primary-lg)}}.track-row__play.playing:hover{transform:scale(1.05)}.track-row__play svg{height:16px;width:16px}.track-row__name{color:var(--color-neutral-800);flex:1 1;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.track-row__playlist{align-items:center;background:#0000;border:none;border-radius:var(--radius-md);color:var(--color-neutral-500);cursor:pointer;display:flex;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);transition:all var(--transition-fast)}.track-row__playlist svg{height:14px;width:14px}.track-row__playlist:hover{background:var(--color-neutral-100);color:var(--color-neutral-700)}.track-row__playlist.in-list{background:var(--color-secondary-50);color:var(--color-secondary-600);font-weight:var(--font-weight-semibold)}.track-row__playlist.in-list:hover{background:var(--color-secondary-100)}.track-row__download{align-items:center;background:#0000;border:none;border-radius:var(--radius-md);color:var(--color-neutral-400);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;padding:0;transition:all var(--transition-fast);width:32px}.track-row__download svg{height:16px;width:16px}.track-row__download:hover{background:var(--color-neutral-100);color:var(--color-neutral-600)}.track-row__download.not-downloaded{color:var(--color-accent-gold);position:relative}.track-row__download.not-downloaded:after{background:var(--color-accent-gold);border:2px solid var(--color-white);border-radius:var(--radius-full);content:"";height:6px;position:absolute;right:4px;top:4px;width:6px}.track-row__download.not-downloaded:hover{background:#f59e0b1a;color:var(--color-accent-gold-dark)}@media (max-width:768px){.track-card{border-radius:var(--radius-xl);padding:var(--spacing-4)}.track-card__title{font-size:var(--font-size-base)}.track-row{gap:var(--spacing-2);padding:var(--spacing-1-5)}.track-row__play{height:32px;width:32px}.track-row__playlist span{display:none}.track-card__lyrics{padding:var(--spacing-2)}}.track-card:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.action-btn:focus-visible,.menu-item:focus-visible,.track-row__download:focus-visible,.track-row__play:focus-visible,.track-row__playlist:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.track-card{animation:cardEntrance .3s ease-out;animation-fill-mode:both}@keyframes cardEntrance{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.track-card:first-child{animation-delay:0ms}.track-card:nth-child(2){animation-delay:50ms}.track-card:nth-child(3){animation-delay:.1s}.track-card:nth-child(4){animation-delay:.15s}.track-card:nth-child(5){animation-delay:.2s}.track-card:nth-child(6){animation-delay:.25s}.track-card:nth-child(n+7){animation-delay:.3s}.star-rating{align-items:center;display:flex;gap:var(--spacing-1)}.star-rating__star{align-items:center;background:none;border:none;color:var(--color-neutral-300);cursor:pointer;display:flex;justify-content:center;padding:0;transition:all var(--transition-fast)}.star-rating__star:hover:not(:disabled){transform:scale(1.1)}.star-rating__star--filled{color:#ffc107}.star-rating--readonly .star-rating__star{cursor:default}.star-rating--readonly .star-rating__star:hover{transform:none}.star-rating--small .star-rating__star{height:14px;width:14px}.star-rating--medium .star-rating__star{height:18px;width:18px}.star-rating--large .star-rating__star{height:24px;width:24px}.star-rating__star:active:not(:disabled){transform:scale(.95)}@media (max-width:768px){.star-rating--small .star-rating__star{height:12px;width:12px}.star-rating--medium .star-rating__star{height:16px;width:16px}.star-rating--large .star-rating__star{height:20px;width:20px}}.modal-overlay{align-items:center;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:1000}.modal-content{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0000004d;max-height:90vh;max-width:700px;overflow-y:auto;width:100%}.modal-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;padding:1.5rem}.modal-header h2{color:#333;font-size:1.5rem;margin:0}.modal-close{align-items:center;background:none;border:none;color:#999;cursor:pointer;display:flex;font-size:2rem;height:2rem;justify-content:center;line-height:1;padding:0;transition:color .2s;width:2rem}.modal-close:hover{color:#333}.modal-content form{padding:1.5rem}.form-row{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr}.form-group{margin-bottom:1.5rem}.form-group label{color:#333;display:block;font-size:.9rem;font-weight:500;margin-bottom:.5rem}.form-group input,.form-group select,.form-group textarea{border:1px solid #ddd;border-radius:6px;font-family:inherit;font-size:.95rem;padding:.75rem;transition:border-color .2s;width:100%}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#667eea;outline:none}.form-group textarea{min-height:80px;resize:vertical}.modal-footer{border-top:1px solid #eee;display:flex;gap:1rem;justify-content:flex-end;padding:1.5rem}.btn{border:none;border-radius:6px;cursor:pointer;font-size:.95rem;font-weight:500;padding:.75rem 1.5rem;transition:all .2s}.btn:disabled{cursor:not-allowed;opacity:.6}.btn-primary{background-color:#667eea;color:#fff}.btn-primary:hover:not(:disabled){background-color:#5568d3}.btn-secondary{background-color:#f0f0f0;color:#333}.btn-secondary:hover:not(:disabled){background-color:#e0e0e0}.alert{border-radius:6px;font-size:.9rem;margin:0 1.5rem 1rem;padding:.75rem 1.5rem}.alert-error{background-color:#fee;border:1px solid #fcc;color:#c33}@media (max-width:768px){.form-row{grid-template-columns:1fr}.modal-content{max-height:95vh}}.view-modal{max-width:700px}.view-modal .modal-header h2{align-items:center;display:flex;flex-wrap:wrap;gap:.75rem}.song-version-badge{align-items:center;background:linear-gradient(135deg,#667eea1a,#764ba21a);border:1px solid #667eea33;border-radius:20px;color:#667eea;display:inline-flex;font-size:.875rem;font-weight:600;padding:4px 12px}.view-modal-body{max-height:60vh;overflow-y:auto;padding:1.5rem}.view-section{margin-bottom:1.5rem}.view-section:last-child{margin-bottom:0}.view-label{color:#667eea;display:block;font-size:.9rem;font-weight:600;letter-spacing:.5px;margin-bottom:.5rem;text-transform:uppercase}.view-value{background-color:#f9f9f9;border-left:3px solid #667eea;border-radius:6px;color:#333;font-size:1rem;line-height:1.6;padding:.75rem}.lyrics-content{font-family:Georgia,serif;font-style:italic;white-space:pre-wrap}.view-row{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:1.5rem}.audio-players{display:flex;flex-direction:column;gap:1rem}.audio-track{background-color:#f9f9f9;border-left:3px solid #667eea;border-radius:8px;padding:1rem}.audio-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:.75rem}.track-label{color:#667eea;font-size:.875rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.download-link-icon{align-items:center;background-color:#667eea;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;justify-content:center;padding:.375rem;text-decoration:none;transition:all .2s}.download-link-icon:hover{background-color:#5568d3;transform:translateY(-1px)}.download-link-icon svg{display:block}.audio-player{border-radius:6px;height:40px;width:100%}@media (max-width:768px){.view-row{grid-template-columns:1fr}.view-modal{max-width:95%}}.assign-playlist-modal{max-width:450px}.assign-playlist-body{padding:1.5rem}.song-title-label{border-bottom:1px solid #eee;color:#333;margin:0 0 1rem;padding-bottom:1rem}.playlist-checkbox-list{margin-bottom:1rem;max-height:300px;overflow-y:auto}.playlist-checkbox-item{align-items:center;border-radius:6px;cursor:pointer;display:flex;gap:.75rem;padding:.75rem;transition:background-color .2s}.playlist-checkbox-item:hover{background-color:#f5f5f5}.playlist-checkbox-item input[type=checkbox]{cursor:pointer;height:18px;width:18px}.playlist-name{color:#333;flex:1 1;font-weight:500}.playlist-count{color:#888;font-size:.85rem}.new-playlist-section{border-top:1px solid #eee;padding-top:1rem}.new-playlist-form{align-items:center;display:flex;gap:.5rem}.new-playlist-form input{border:1px solid #ddd;border-radius:6px;flex:1 1;font-size:.9rem;padding:.5rem .75rem}.new-playlist-form input:focus{border-color:#667eea;outline:none}.btn-small{font-size:.85rem;padding:.5rem .75rem}.btn-link{background:none;border:none;color:#667eea;cursor:pointer;font-size:.9rem;font-weight:500;padding:.5rem 0}.btn-link:hover{text-decoration:underline}.create-playlist-btn{display:block;text-align:left;width:100%}.empty-state,.loading-state{color:#666;padding:2rem;text-align:center}.empty-state p{margin:0}.home-premium{background:var(--color-neutral-50);display:flex;flex-direction:column;min-height:100vh}.home-premium:before{background:radial-gradient(ellipse 100% 100% at 0 0,#ff6b4a0a 0,#0000 50%),radial-gradient(ellipse 60% 60% at 100% 0,#14b8a608 0,#0000 50%);content:"";height:400px;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:0}.home-premium__content{flex:1 1;padding:var(--spacing-8) var(--spacing-6);position:relative;z-index:1}.home-premium__container{margin:0 auto;max-width:1600px;width:100%}.home-premium__header{align-items:center;display:flex;gap:var(--spacing-4);justify-content:space-between;margin-bottom:var(--spacing-6)}.home-premium__title{color:var(--color-neutral-900);font-family:var(--font-family-display);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight);margin:0}.home-premium__title span{-webkit-text-fill-color:#0000;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text}.studio-stats{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.studio-stat{align-items:center;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-full);color:var(--color-neutral-600);display:inline-flex;font-size:var(--font-size-sm);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);transition:all var(--transition-fast)}.studio-stat:hover{border-color:var(--color-neutral-300);box-shadow:var(--shadow-sm)}.studio-stat__value{color:var(--color-neutral-900);font-weight:var(--font-weight-bold)}.studio-stat__icon{height:16px;width:16px}.studio-stat--generating{background:var(--color-warning-light);border-color:#0000}.studio-stat--generating .studio-stat__value{color:var(--color-warning)}.studio-stat--completed{background:var(--color-success-light);border-color:#0000}.studio-stat--completed .studio-stat__value{color:var(--color-success)}.control-bar{align-items:center;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-2xl);display:flex;flex-wrap:wrap;gap:var(--spacing-4);margin-bottom:var(--spacing-6);padding:var(--spacing-4)}.control-bar__search{flex:1 1;min-width:200px;position:relative}.control-bar__search-icon{color:var(--color-neutral-400);height:18px;left:var(--spacing-3);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:18px}.control-bar__search input{background:var(--color-neutral-50);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);color:var(--color-neutral-900);font-family:var(--font-family-body);font-size:var(--font-size-sm);padding:var(--spacing-2-5) var(--spacing-4) var(--spacing-2-5) var(--spacing-10);transition:all var(--transition-fast);width:100%}.control-bar__search input::placeholder{color:var(--color-neutral-400)}.control-bar__search input:focus{background:var(--color-white);border-color:var(--color-primary-400);box-shadow:0 0 0 3px var(--color-primary-100);outline:none}.control-bar__filters{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-3)}.control-bar__select{-webkit-appearance:none;appearance:none;background:var(--color-neutral-50);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right var(--spacing-3) center;background-repeat:no-repeat;border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);color:var(--color-neutral-700);cursor:pointer;font-family:var(--font-family-body);font-size:var(--font-size-sm);padding:var(--spacing-2-5) var(--spacing-4);padding-right:var(--spacing-8);transition:all var(--transition-fast)}.control-bar__select:hover{border-color:var(--color-neutral-300)}.control-bar__select:focus{border-color:var(--color-primary-400);box-shadow:0 0 0 3px var(--color-primary-100);outline:none}.control-bar__clear{align-items:center;background:#0000;border:none;border-radius:var(--radius-lg);color:var(--color-neutral-500);cursor:pointer;display:inline-flex;font-family:var(--font-family-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);transition:all var(--transition-fast)}.control-bar__clear:hover{background:var(--color-neutral-100);color:var(--color-neutral-700)}.control-bar__clear svg{height:16px;width:16px}.control-bar__toggle{align-items:center;background:var(--color-neutral-100);border:none;border-radius:var(--radius-lg);color:var(--color-neutral-600);cursor:pointer;display:none;font-family:var(--font-family-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3)}.track-grid{grid-gap:var(--spacing-5);display:grid;gap:var(--spacing-5);grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}.empty-state{animation:fadeInUp .4s ease-out;border:2px dashed var(--color-neutral-200);border-radius:var(--radius-3xl);flex-direction:column;grid-column:1/-1;padding:var(--spacing-16) var(--spacing-6)}.empty-state,.empty-state__icon{align-items:center;display:flex;justify-content:center}.empty-state__icon{animation:float 4s ease-in-out infinite;background:var(--gradient-brand);border-radius:var(--radius-full);box-shadow:var(--shadow-primary-lg);height:120px;margin-bottom:var(--spacing-6);width:120px}.empty-state__icon svg{color:#fff;height:56px;width:56px}.empty-state__title{color:var(--color-neutral-900);font-family:var(--font-family-display);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight);margin:0 0 var(--spacing-2) 0}.empty-state__description{color:var(--color-neutral-500);font-size:var(--font-size-base);margin:0 0 var(--spacing-6) 0;max-width:400px}.empty-state__btn{align-items:center;background:var(--gradient-brand);border:none;border-radius:var(--radius-xl);box-shadow:var(--shadow-primary);color:#fff;cursor:pointer;display:inline-flex;font-family:var(--font-family-body);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-6);transition:all var(--transition-base)}.empty-state__btn:hover{box-shadow:var(--shadow-primary-lg);transform:translateY(-2px)}.empty-state__btn:active{transform:translateY(0)}.empty-state__btn svg{height:20px;width:20px}.loading-skeleton{animation:shimmer 1.5s infinite;background:linear-gradient(90deg,var(--color-neutral-100) 25%,var(--color-neutral-200) 50%,var(--color-neutral-100) 75%);background-size:200% 100%;border-radius:var(--radius-2xl);min-height:200px}@media (max-width:1200px){.track-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}}@media (max-width:768px){.home-premium__content{padding:var(--spacing-5) var(--spacing-4)}.home-premium__header{align-items:flex-start;flex-direction:column;margin-bottom:var(--spacing-4)}.studio-stats{width:100%}.control-bar{align-items:stretch;border-radius:var(--radius-xl);flex-direction:column;gap:var(--spacing-3);padding:var(--spacing-3)}.control-bar__search{min-width:100%}.control-bar__filters{justify-content:space-between;width:100%}.control-bar__select{flex:1 1;min-width:0}.control-bar__toggle{display:flex;justify-content:center}.control-bar__filters--hidden{display:none}.track-grid{gap:var(--spacing-4);grid-template-columns:1fr}.empty-state{padding:var(--spacing-10) var(--spacing-4)}.empty-state__icon{height:100px;width:100px}.empty-state__icon svg{height:48px;width:48px}.empty-state__title{font-size:var(--font-size-xl)}}@media (max-width:480px){.home-premium__content{padding:var(--spacing-4) var(--spacing-3)}.studio-stats{gap:var(--spacing-2)}.studio-stat{font-size:var(--font-size-xs);padding:var(--spacing-1-5) var(--spacing-3)}}@media (min-width:1440px){.home-premium__content{padding:var(--spacing-10) var(--spacing-8)}.track-grid{gap:var(--spacing-6);grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}}@media (min-width:1920px){.home-premium__container{max-width:1800px}}.control-bar__clear:focus-visible,.control-bar__search input:focus-visible,.control-bar__select:focus-visible,.control-bar__toggle:focus-visible,.empty-state__btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.manage-styles{background:var(--color-neutral-50);display:flex;flex-direction:column;min-height:100vh}.manage-styles__content{flex:1 1;padding:var(--spacing-6)}.manage-styles__container{margin:0 auto;padding:0 var(--spacing-6);width:100%}@media (min-width:1920px){.manage-styles__container{padding:0 var(--spacing-8)}}.section-header{align-items:center;display:flex;gap:var(--spacing-3);justify-content:space-between;margin-bottom:var(--spacing-5)}.filter-toggle{background:var(--color-white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);display:flex;gap:var(--spacing-2);padding:var(--spacing-1)}.filter-btn{background:#0000;border:none;border-radius:var(--radius-base);color:var(--color-neutral-600);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-2) var(--spacing-4);transition:all var(--transition-fast)}.filter-btn:hover{background:var(--color-neutral-100);color:var(--color-neutral-900)}.filter-btn.active{background:linear-gradient(135deg,var(--color-primary-500) 0,var(--color-primary-700) 100%);box-shadow:0 2px 4px #667eea4d;color:var(--color-white)}.badge{align-items:center;border-radius:var(--radius-full);display:inline-flex;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) var(--spacing-4)}.badge.primary{background:linear-gradient(135deg,var(--color-primary-500) 0,var(--color-primary-700) 100%);color:var(--color-white)}.badge.secondary{background:var(--color-neutral-200);color:var(--color-neutral-700)}.section-description{color:var(--color-neutral-600);font-size:var(--font-size-base);line-height:var(--line-height-relaxed);margin:0 0 var(--spacing-6) 0}.empty-state{background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--spacing-8);text-align:center}.empty-state p{color:var(--color-neutral-600);font-size:var(--font-size-lg);margin:0 0 var(--spacing-6) 0}.styles-layout{grid-gap:var(--spacing-6);display:grid;gap:var(--spacing-6);grid-template-columns:350px 1fr;min-height:500px}.styles-sidebar{background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--spacing-5)}.styles-sidebar h3{color:var(--color-neutral-900);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-4) 0}.styles-list{display:flex;flex-direction:column;gap:var(--spacing-2)}.style-item{align-items:center;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);cursor:pointer;display:flex;justify-content:space-between;padding:var(--spacing-3);transition:all var(--transition-fast)}.style-item:hover{background:var(--color-neutral-50);box-shadow:var(--shadow-sm);transform:translateY(-1px)}.style-item.active,.style-item:hover{border-color:var(--color-primary-500)}.style-item.active{background:linear-gradient(135deg,var(--color-primary-500) 0,var(--color-primary-700) 100%);box-shadow:0 2px 8px #667eea4d;color:var(--color-white)}.style-item-name{flex:1 1;font-weight:var(--font-weight-medium)}.style-item-actions{display:flex;gap:var(--spacing-2);opacity:0;transition:opacity var(--transition-fast)}.style-item.active .style-item-actions,.style-item:hover .style-item-actions{opacity:1}.icon-btn{align-items:center;background:#ffffffe6;border:1px solid var(--color-neutral-300);border-radius:var(--radius-base);cursor:pointer;display:flex;font-size:var(--font-size-sm);height:28px;justify-content:center;min-width:28px;padding:var(--spacing-1) var(--spacing-2);transition:all var(--transition-fast)}.icon-btn:hover{box-shadow:var(--shadow-sm);transform:scale(1.1)}.style-item.active .icon-btn{background:#fffffff2;border-color:#ffffff4d}.style-details{background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--spacing-6)}.details-header{align-items:center;border-bottom:2px solid var(--color-neutral-200);display:flex;justify-content:space-between;margin-bottom:var(--spacing-6);padding-bottom:var(--spacing-4)}.details-header h2{color:var(--color-neutral-900);font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);margin:0}.details-content{display:flex;flex-direction:column;gap:var(--spacing-5)}.detail-section h4{color:var(--color-primary-600);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:.05em;margin:0 0 var(--spacing-2) 0;text-transform:uppercase}.detail-section p{color:var(--color-neutral-600);font-size:var(--font-size-base);line-height:var(--line-height-relaxed);margin:0;white-space:pre-wrap}.detail-section.meta{border-top:1px solid var(--color-neutral-200);padding-top:var(--spacing-4)}.detail-section.meta small{color:var(--color-neutral-500)}.no-selection{color:var(--color-neutral-500)}.loading,.no-selection{align-items:center;display:flex;font-size:var(--font-size-lg);height:300px;justify-content:center}.loading{color:var(--color-neutral-600)}@media (max-width:1024px){.styles-layout{grid-template-columns:1fr}.styles-sidebar{max-height:300px;overflow-y:auto}}@media (max-width:768px){.manage-styles__content{padding:var(--spacing-4)}.section-header{align-items:flex-start;flex-direction:column}.styles-layout{gap:var(--spacing-4)}.style-details,.styles-sidebar{padding:var(--spacing-4)}}.playlist-creator{color:var(--color-neutral-500);font-size:var(--font-size-sm);margin:var(--spacing-1) 0 0 0}.readonly-badge{background:var(--color-neutral-200);border-radius:var(--radius-full);color:var(--color-neutral-600);display:inline-block;font-size:.7rem;font-weight:var(--font-weight-medium);margin-left:var(--spacing-2);padding:2px 6px;vertical-align:middle}.style-item.active .readonly-badge{background:#ffffff4d;color:var(--color-white)}.playlist-songs{display:flex;flex-direction:column;gap:var(--spacing-2)}.playlist-song-item{align-items:center;background:var(--color-neutral-50);border:1px solid var(--color-neutral-200);border-radius:var(--radius-md);display:flex;gap:var(--spacing-3);padding:var(--spacing-3);transition:all var(--transition-fast)}.playlist-song-item:hover{background:var(--color-white);border-color:var(--color-primary-300);box-shadow:var(--shadow-sm)}.song-number{align-items:center;background:var(--color-neutral-200);border-radius:var(--radius-full);color:var(--color-neutral-600);display:flex;flex-shrink:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);height:24px;justify-content:center;width:24px}.song-info{flex:1 1;min-width:0}.song-title{color:var(--color-neutral-900);font-weight:var(--font-weight-medium)}.song-meta,.song-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-meta{color:var(--color-neutral-500);font-size:var(--font-size-sm)}.song-status{border-radius:var(--radius-full);flex-shrink:0;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2)}.song-status.ready{background:var(--color-success-100);color:var(--color-success-700)}.btn-icon{align-items:center;display:flex;flex-shrink:0;font-size:1.25rem;height:28px;justify-content:center;line-height:1;padding:0;width:28px}.btn-remove{background:var(--color-neutral-100);border:1px solid var(--color-neutral-300);border-radius:var(--radius-base);color:var(--color-neutral-600);cursor:pointer;transition:all var(--transition-fast)}.btn-remove:hover{background:var(--color-error-100);border-color:var(--color-error-300);color:var(--color-error-600)}.btn-danger{background:var(--color-error-500);border:none;border-radius:var(--radius-md);color:var(--color-white);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);padding:var(--spacing-2) var(--spacing-4);transition:all var(--transition-fast)}.btn-danger:hover{background:var(--color-error-600)}.empty-songs{color:var(--color-neutral-500);font-style:italic;padding:var(--spacing-6);text-align:center}.alert{align-items:center;border-radius:var(--radius-md);display:flex;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4)}.alert-error{background:var(--color-error-100);border:1px solid var(--color-error-200);color:var(--color-error-700)}.music-player-page{background:var(--color-neutral-900);display:flex;flex-direction:column;min-height:100vh;overflow:hidden;position:relative}.music-player-page:before{animation:playerGradient 30s ease-in-out infinite;background:radial-gradient(ellipse 80% 60% at 10% 20%,#06b6d426 0,#0000 50%),radial-gradient(ellipse 60% 80% at 90% 80%,#22d3ee1f 0,#0000 50%),radial-gradient(ellipse 50% 50% at 50% 50%,#0e749014 0,#0000 60%);content:"";inset:0;pointer-events:none;position:fixed}@keyframes playerGradient{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.music-player-page:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");content:"";inset:0;opacity:.02;pointer-events:none;position:fixed}.player-content{flex:1 1;margin:0 auto;max-width:1400px;padding:var(--spacing-8) var(--spacing-6);position:relative;width:100%;z-index:1}.player-header{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-4);justify-content:space-between;margin-bottom:var(--spacing-8)}.player-header h1{color:#fff;font-family:var(--font-family-display);font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight);margin:0}.playlist-selector{-webkit-appearance:none;appearance:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff1a;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right var(--spacing-4) center;background-repeat:no-repeat;border:1px solid #ffffff26;border-radius:var(--radius-xl);color:#fff;cursor:pointer;font-family:var(--font-family-body);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);min-width:280px;padding:var(--spacing-3) var(--spacing-5);padding-right:var(--spacing-10);transition:all var(--transition-fast)}.playlist-selector:hover{background-color:#ffffff26;border-color:#ffffff40}.playlist-selector:focus{border-color:var(--color-primary-400);box-shadow:0 0 0 3px #06b6d433;outline:none}.playlist-selector option{background:var(--color-neutral-800);color:#fff;padding:var(--spacing-2)}.player-empty,.player-loading{color:#ffffff80;flex-direction:column;min-height:500px;text-align:center}.empty-icon,.player-empty,.player-loading{align-items:center;display:flex;justify-content:center}.empty-icon{animation:float 4s ease-in-out infinite;background:#ffffff1a;border-radius:var(--radius-full);height:100px;margin-bottom:var(--spacing-6);width:100px}.empty-icon svg{color:var(--color-primary-400)}.player-empty p{font-size:var(--font-size-lg);margin:0}.player-layout{grid-gap:var(--spacing-8);animation:fadeInUp .5s ease-out;display:grid;gap:var(--spacing-8);grid-template-columns:1fr 420px}.now-playing-section{align-items:flex-start;display:flex;justify-content:center}.now-playing-card{align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:var(--radius-3xl);display:flex;flex-direction:column;gap:var(--spacing-6);max-width:540px;padding:var(--spacing-10);width:100%}.album-art{height:240px;position:relative;width:240px}.album-art__vinyl{background:conic-gradient(from 0deg,#1c1917 0deg,#292524 45deg,#1c1917 90deg,#292524 135deg,#1c1917 180deg,#292524 225deg,#1c1917 270deg,#292524 315deg,#1c1917 1turn);border-radius:var(--radius-full);inset:-20px;opacity:0;position:absolute;transition:opacity var(--transition-slow)}.now-playing-card.is-playing .album-art__vinyl{animation:vinylSpin 4s linear infinite;opacity:1}.album-art__cover{align-items:center;background:var(--gradient-sunset);border-radius:var(--radius-2xl);box-shadow:0 20px 60px -10px #06b6d466;display:flex;height:100%;justify-content:center;overflow:hidden;position:relative;width:100%;z-index:1}.album-art__cover svg{color:#ffffffe6;height:80px;width:80px}.now-playing-card.is-playing .album-art__cover{animation:albumGlow 2s ease-in-out infinite}@keyframes albumGlow{0%,to{box-shadow:0 20px 60px -10px #06b6d466}50%{box-shadow:0 20px 80px -5px #06b6d499}}.song-details{text-align:center;width:100%}.song-details .song-title{color:#fff;font-family:var(--font-family-display);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight);margin:0 0 var(--spacing-2) 0}.song-details .song-artist{color:#fff9;font-size:var(--font-size-base);margin:0}.track-toggle{background:#0000004d;border-radius:var(--radius-full);display:flex;gap:4px;padding:4px}.track-btn{background:#0000;border:none;border-radius:var(--radius-full);color:#fff9;cursor:pointer;font-family:var(--font-family-body);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);padding:var(--spacing-2) var(--spacing-5);transition:all var(--transition-fast)}.track-btn:hover:not(.disabled){color:#fff}.track-btn.active{background:var(--gradient-brand);box-shadow:var(--shadow-primary);color:#fff}.track-btn.disabled{cursor:not-allowed;opacity:.3}.progress-section{align-items:center;display:flex;gap:var(--spacing-4);width:100%}.progress-section .time{color:#ffffff80;font-family:var(--font-family-mono);font-size:var(--font-size-sm);min-width:45px;text-align:center}.progress-bar{-webkit-appearance:none;appearance:none;background:#ffffff26;border-radius:var(--radius-full);cursor:pointer;flex:1 1;height:6px;position:relative}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-primary-500);border-radius:var(--radius-full);box-shadow:0 2px 8px #06b6d480;cursor:pointer;height:16px;-webkit-transition:transform var(--transition-fast);transition:transform var(--transition-fast);width:16px}.progress-bar::-webkit-slider-thumb:hover{transform:scale(1.2)}.progress-bar::-webkit-slider-runnable-track{border-radius:var(--radius-full);height:6px}.player-controls{gap:var(--spacing-6)}.control-btn,.player-controls{align-items:center;display:flex;justify-content:center}.control-btn{background:none;border:none;border-radius:var(--radius-full);color:#fffc;cursor:pointer;padding:var(--spacing-2);transition:all var(--transition-fast)}.control-btn:hover:not(:disabled){color:#fff;transform:scale(1.1)}.control-btn:disabled{cursor:not-allowed;opacity:.3}.control-btn.play-btn{background:var(--gradient-brand);box-shadow:var(--shadow-primary-lg);color:#fff;height:72px;width:72px}.control-btn.play-btn:hover:not(:disabled){box-shadow:0 20px 50px -10px #06b6d480;transform:scale(1.08)}.control-btn.play-btn:active{transform:scale(1)}.volume-section{align-items:center;color:#ffffff80;display:flex;gap:var(--spacing-3);max-width:200px;width:100%}.volume-slider{-webkit-appearance:none;appearance:none;background:#fff3;border-radius:var(--radius-full);cursor:pointer;flex:1 1;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:var(--radius-full);cursor:pointer;height:12px;-webkit-transition:transform var(--transition-fast);transition:transform var(--transition-fast);width:12px}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.lyrics-preview{background:#0003;border:1px solid #ffffff0d;border-radius:var(--radius-xl);max-height:160px;overflow-y:auto;padding:var(--spacing-5);width:100%}.lyrics-preview h4{color:#fff6;font-family:var(--font-family-display);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-widest);margin:0 0 var(--spacing-3) 0;text-transform:uppercase}.lyrics-preview p{color:#ffffffb3;font-size:var(--font-size-sm);font-style:italic;line-height:var(--line-height-relaxed);margin:0;white-space:pre-wrap}.playlist-section{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff08;border:1px solid #ffffff14;border-radius:var(--radius-2xl);display:flex;flex-direction:column;max-height:650px;padding:var(--spacing-6)}.playlist-section h3{border-bottom:1px solid #ffffff1a;color:#fff;font-family:var(--font-family-display);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-5) 0;padding-bottom:var(--spacing-4)}.playlist-tracks{display:flex;flex:1 1;flex-direction:column;gap:var(--spacing-1);margin:0 calc(var(--spacing-2)*-1);overflow-y:auto;padding:0 var(--spacing-2)}.playlist-tracks::-webkit-scrollbar{width:6px}.playlist-tracks::-webkit-scrollbar-track{background:#ffffff0d;border-radius:var(--radius-full)}.playlist-tracks::-webkit-scrollbar-thumb{background:#fff3;border-radius:var(--radius-full)}.playlist-tracks::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.playlist-track{align-items:center;border-radius:var(--radius-xl);cursor:pointer;display:flex;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);transition:all var(--transition-fast)}.playlist-track:hover:not(.unavailable){background:#ffffff14}.playlist-track.active{background:#06b6d426;border:1px solid #06b6d44d}.playlist-track.unavailable{cursor:not-allowed;opacity:.4}.track-number{align-items:center;color:#fff6;display:flex;flex-shrink:0;font-family:var(--font-family-mono);font-size:var(--font-size-sm);height:28px;justify-content:center;width:28px}.playlist-track.active .track-number{color:var(--color-primary-400)}.playing-indicator{align-items:flex-end;display:flex;gap:2px;height:14px}.playing-indicator .bar{animation:soundWave .6s ease-in-out infinite;background:var(--color-primary-400);border-radius:1px;width:3px}.playing-indicator .bar:first-child{animation-delay:0s}.playing-indicator .bar:nth-child(2){animation-delay:.2s}.playing-indicator .bar:nth-child(3){animation-delay:.4s}.playlist-track .track-info{flex:1 1;min-width:0}.playlist-track .track-title{color:#fff;display:block;font-weight:var(--font-weight-medium);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-track .track-artist{color:#ffffff80;display:block;font-size:var(--font-size-sm)}.playlist-track .track-status{background:#ffffff14;border-radius:var(--radius-full);color:#ffffff4d;font-size:var(--font-size-xs);padding:var(--spacing-1) var(--spacing-2)}@media (max-width:1024px){.player-layout{gap:var(--spacing-6);grid-template-columns:1fr}.now-playing-card{max-width:100%}.playlist-section{max-height:400px}}@media (max-width:768px){.player-content{padding:var(--spacing-5) var(--spacing-4)}.player-header{align-items:stretch;flex-direction:column;gap:var(--spacing-4)}.player-header h1{font-size:var(--font-size-2xl);text-align:center}.playlist-selector{min-width:auto;width:100%}.now-playing-card{padding:var(--spacing-6)}.album-art{height:180px;width:180px}.album-art__vinyl{inset:-15px}.album-art__cover svg{height:60px;width:60px}.song-details .song-title{font-size:var(--font-size-xl)}.control-btn.play-btn{height:64px;width:64px}.player-controls{gap:var(--spacing-4)}.volume-section{max-width:160px}}@media (max-width:480px){.album-art{height:150px;width:150px}.control-btn.play-btn{height:56px;width:56px}}.control-btn:focus-visible,.playlist-selector:focus-visible,.playlist-track:focus-visible,.progress-bar:focus-visible,.track-btn:focus-visible,.volume-slider:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}
/*# sourceMappingURL=main.319314cd.css.map*/