:root { --bg: #f6f8fb; --bg-elevated: rgba(255,255,255,0.92); --bg-subtle: rgba(15, 23, 42, 0.045); --border-default: rgba(15, 23, 42, 0.09); --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #64748b; --accent: #3b82f6; --radius-lg: 22px; --radius-full: 999px; --shadow-soft: 0 14px 35px rgba(15, 23, 42, 0.08);} html[data-theme="dark"] { --bg: #020617; --bg-elevated: rgba(15, 23, 42, 0.84); --bg-subtle: rgba(148, 163, 184, 0.08); --border-default: rgba(148, 163, 184, 0.18); --text-primary: #e5eef9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --accent: #60a5fa; --shadow-soft: 0 18px 42px rgba(2, 6, 23, 0.5);} body { background: radial-gradient(circle at top, rgba(59,130,246,0.08), transparent 35%), var(--bg); color: var(--text-primary); font-family: Inter, system-ui, sans-serif; } .card-hub, .sticky-glass-header { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); backdrop-filter: blur(20px);} .sticky-glass-header { position: sticky; top: 1rem; z-index: 10; padding: 1.25rem 1.4rem;} .section-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-tertiary);} .section-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem;} .genre-stat,.catalog-count { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; border-radius:var(--radius-full); background:var(--bg-subtle); border:1px solid var(--border-default); color:var(--text-secondary); font-size:.82rem; font-weight:700;} .genre-card { min-height:180px; } .theme-toggle { position:fixed; bottom:1rem; right:1rem; z-index:20;} .btn-primary { background: linear-gradient(135deg, #3b82f6, #6366f1); border:none;} .btn-primary:hover { filter: brightness(1.03);} .mi-press { transform: scale(.98);} .text-secondary { color: var(--text-secondary) !important; }