:root{--color-primary: #E63946;--color-primary-hover: #D32F3D;--color-primary-light: #FFB5C2;--color-primary-soft: rgba(230, 57, 70, .1);--color-bg-main: #FFFFFF;--color-bg-subtle: #F8F9FA;--color-bg-card: #FFFFFF;--color-bg-overlay: rgba(0, 0, 0, .5);--color-border: #E5E7EB;--color-border-light: #F3F4F6;--color-border-focus: #E63946;--color-text-primary: #111827;--color-text-secondary: #6B7280;--color-text-muted: #9CA3AF;--color-text-inverse: #FFFFFF;--color-success: #10B981;--color-warning: #F59E0B;--color-error: #EF4444;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .04);--shadow-md: 0 4px 12px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .08);--shadow-xl: 0 12px 32px rgba(0, 0, 0, .12);--shadow-cta: 0 10px 30px rgba(230, 57, 70, .25);--shadow-cta-hover: 0 14px 40px rgba(230, 57, 70, .35);--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--font-body: "Inter", "Figtree", system-ui, -apple-system, sans-serif;--font-display: "Figtree", "Inter", system-ui, sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--transition-spring: .3s cubic-bezier(.34, 1.56, .64, 1);--color-dark-bg: #1A1A1A;--color-dark-bg-elevated: #2A2A2A;--color-dark-surface: #121212;--color-dark-surface-hover: #1F1F1F;--color-dark-border: #333333;--color-dark-border-subtle: #252525;--color-spotify-green: #1DB954;--color-spotify-green-hover: #1ED760;--shadow-sticky-footer: 0 -10px 30px rgba(0, 0, 0, .05);--shadow-dark-lg: 0 8px 24px rgba(0, 0, 0, .4);--shadow-glow-primary: 0 0 20px rgba(230, 57, 70, .3);--shadow-glow-white: 0 0 20px rgba(255, 255, 255, .1)}[data-theme=dark]{--color-bg-main: #111111;--color-bg-subtle: #1A1A1A;--color-bg-card: #222222;--color-border: #333333;--color-border-light: #2A2A2A;--color-text-primary: #FFFFFF;--color-text-secondary: #A1A1AA;--color-text-muted: #71717A}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.card-elevated{background:var(--color-bg-card);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.card-interactive{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-base);cursor:pointer}.card-interactive:hover{border-color:var(--color-border-focus);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-primary{background:var(--color-primary);color:var(--color-text-inverse);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-6);font-weight:600;box-shadow:var(--shadow-cta);transition:all var(--transition-base)}.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-cta-hover);transform:scale(1.02)}.btn-primary:active{transform:scale(.98)}.btn-secondary{background:var(--color-bg-subtle);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-5);font-weight:500;transition:all var(--transition-base)}.btn-secondary:hover{background:var(--color-bg-card);border-color:var(--color-primary);color:var(--color-primary)}.section-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.section-header-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--color-primary-soft);border-radius:var(--radius-md);color:var(--color-primary)}.section-header-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--color-text-primary)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.animate-shake{animation:shake .4s ease-in-out}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.animate-shimmer{animation:shimmer 3s infinite}