:root{--bg-primary:#0a0a0c;--bg-secondary:#121214;--bg-tertiary:#1a1a1d;--bg-elevated:#ffffff0d;--bg-elevated-hover:#ffffff14;--text-primary:#fff;--text-secondary:#ffffffb3;--text-tertiary:#ffffff80;--text-muted:#fff6;--accent-primary:#667eea;--accent-secondary:#764ba2;--accent-gradient:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--success:#10b981;--success-bg:#10b98133;--success-border:#10b9814d;--warning:#d97706;--warning-bg:#d9770633;--warning-border:#d977064d;--error:#ef4444;--error-bg:#ef444433;--error-border:#ef44444d;--info:#3b82f6;--info-bg:#3b82f633;--info-border:#3b82f64d;--border-primary:#ffffff1a;--border-secondary:#ffffff0d;--border-accent:#667eea4d;--glass-bg:#ffffff0d;--glass-border:#ffffff1a;--glass-blur:blur(10px);--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-full:9999px;--shadow-sm:0 2px 4px #0000001a;--shadow-md:0 4px 8px #0003;--shadow-lg:0 8px 16px #0000004d;--shadow-xl:0 20px 40px #0000004d;--shadow-glow:0 0 0 3px #667eea33;--font-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, 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:2rem;--text-4xl:2.5rem;--text-5xl:3rem;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--transition-fast:.15s ease;--transition-normal:.3s ease;--transition-slow:.5s ease;--z-dropdown:100;--z-sticky:50;--z-modal:200;--z-tooltip:300}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}.glass{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur)}.glass-hover:hover{background:var(--bg-elevated-hover)}.card{background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all var(--transition-normal)}.card:hover{box-shadow:var(--shadow-xl);border-color:var(--border-accent);transform:translateY(-4px)}.btn-primary{background:var(--accent-gradient);border-radius:var(--radius-md);color:var(--text-primary);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-normal);border:none;padding:.75rem 1.5rem}.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}.badge{border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);align-items:center;padding:.25rem .75rem;display:inline-flex}.badge-success{background:var(--success-bg);border:1px solid var(--success-border);color:var(--success)}.badge-warning{background:var(--warning-bg);border:1px solid var(--warning-border);color:var(--warning)}.badge-error{background:var(--error-bg);border:1px solid var(--error-border);color:var(--error)}.badge-info{background:var(--info-bg);border:1px solid var(--info-border);color:var(--info)}.gradient-text{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--border-accent)}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6}*{box-sizing:border-box;margin:0;padding:0}a{text-decoration:none}.public-page{background-color:var(--bg-primary);min-height:100vh;color:var(--text-primary);padding:var(--spacing-xl)}.public-container{max-width:1200px;margin:0 auto}.welcome-container{max-width:1400px;padding:var(--spacing-2xl);margin:0 auto}.public-header{margin-bottom:var(--spacing-xl)}.public-header .badge{padding:var(--spacing-sm) var(--spacing-lg);background:var(--accent-gradient);border-radius:var(--radius-full);color:var(--text-primary);font-size:var(--text-sm);font-weight:var(--font-semibold);margin-bottom:var(--spacing-lg);display:inline-block}.public-header h1{font-size:var(--text-4xl);font-weight:var(--font-bold);margin-bottom:var(--spacing-md);line-height:1.2}.public-header h2{font-size:var(--text-3xl);font-weight:var(--font-bold);margin-bottom:var(--spacing-md)}.public-header p{color:var(--text-secondary);font-size:var(--text-lg);line-height:1.8}.public-header.welcome h1{font-size:var(--text-5xl)}.public-header.welcome p{font-size:var(--text-xl)}.public-header .gradient-text{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.public-header .highlight{color:var(--accent-primary);font-weight:var(--font-semibold)}.public-header .small{font-size:var(--text-sm)}.public-grid{gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.public-grid.welcome{gap:var(--spacing-2xl);margin-top:var(--spacing-2xl);grid-template-columns:repeat(auto-fit,minmax(350px,1fr))}.public-card{background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-xl);padding:var(--spacing-xl);transition:all var(--transition-normal);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.public-card:hover{box-shadow:var(--shadow-xl);border-color:var(--border-accent);transform:translateY(-4px)}.public-card .icon{border-radius:var(--radius-lg);width:60px;height:60px;margin-bottom:var(--spacing-lg);justify-content:center;align-items:center;display:flex}.public-card .icon.blue{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.public-card .icon.amber{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}.public-card .icon.purple{background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%)}.public-card .icon svg{width:32px;height:32px}.public-card h3{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--spacing-sm)}.public-card p{color:var(--text-secondary);font-size:var(--text-base);line-height:1.6}.public-prose{max-width:800px;margin:0 auto}.public-prose h2{font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--text-primary);margin-top:var(--spacing-2xl);margin-bottom:var(--spacing-lg)}.public-prose p{color:var(--text-secondary);font-size:var(--text-base);margin-bottom:var(--spacing-lg);line-height:1.8}.public-footer{margin-top:var(--spacing-3xl);padding-top:var(--spacing-xl);border-top:1px solid var(--border-primary)}.public-footer .links{gap:var(--spacing-xl);justify-content:center;display:flex}.public-footer .links a{color:var(--text-tertiary);transition:color var(--transition-normal);text-decoration:none}.public-footer .links a:hover{color:var(--accent-primary)}.section{margin-bottom:var(--spacing-2xl)}.section-title{font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--spacing-lg)}.card-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(200px,1fr));display:grid}.track-list{gap:var(--spacing-md);flex-direction:column;display:flex}.track-item{align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-md);transition:all var(--transition-normal);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);display:flex}.track-item:hover{background:var(--bg-elevated-hover);border-color:var(--border-accent)}.track-number{color:var(--text-muted);font-size:var(--text-sm);font-weight:var(--font-semibold);min-width:2rem}.track-info{gap:var(--spacing-xs);flex-direction:column;flex:1;display:flex}.track-name{color:var(--text-primary);font-weight:var(--font-medium);font-size:var(--text-sm)}.track-album,.track-choir{color:var(--text-tertiary);font-size:var(--text-xs)}.track-duration{color:var(--text-tertiary);font-size:var(--text-sm)}.verified-badge{padding:var(--spacing-xs) var(--spacing-md);background:var(--success-bg);border:1px solid var(--success-border);border-radius:var(--radius-md);color:var(--success);font-size:var(--text-xs);font-weight:var(--font-semibold);align-items:center;display:inline-flex}.premium-badge{padding:var(--spacing-xs) var(--spacing-md);background:var(--warning-bg);border:1px solid var(--warning-border);border-radius:var(--radius-md);color:var(--warning);font-size:var(--text-xs);font-weight:var(--font-semibold);align-items:center;display:inline-flex}.album-cover{aspect-ratio:1;background:var(--accent-gradient);border-radius:var(--radius-lg);width:100%;font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--text-primary);margin-bottom:var(--spacing-md);justify-content:center;align-items:center;display:flex}.album-name{color:var(--text-primary);font-weight:var(--font-semibold);font-size:var(--text-base);margin-bottom:var(--spacing-xs)}.album-year{color:var(--text-tertiary);font-size:var(--text-sm)}.premium-banner{padding:var(--spacing-xl);background:linear-gradient(135deg, var(--warning-bg) 0%, #d977061a 100%);border:1px solid var(--warning-border);border-radius:var(--radius-lg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.premium-banner h3{font-size:var(--text-xl);font-weight:var(--font-semibold);margin-bottom:var(--spacing-sm);color:var(--warning)}.premium-banner p{color:var(--text-secondary);margin-bottom:var(--spacing-md)}.primary-button{padding:var(--spacing-md) var(--spacing-xl);background:var(--accent-gradient);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-sm);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-normal);border:none;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.primary-button:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}.empty-state{text-align:center;padding:var(--spacing-3xl);color:var(--text-muted)}@media (width<=768px){.public-page{padding:var(--spacing-lg)}.welcome-container{padding:var(--spacing-xl)}.public-header h1{font-size:var(--text-3xl)}.public-header.welcome h1{font-size:var(--text-4xl)}.public-grid,.public-grid.welcome{grid-template-columns:1fr}.card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
