@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap";:root{--bg-dark:#07060f;--bg-darker:#040307;--glass-bg:#0d0b1aa6;--glass-bg-hover:#16132ccc;--glass-border:#ffffff0f;--glass-border-focus:#ffffff26;--text-primary:#f3f1f9;--text-secondary:#9a95b0;--text-muted:#645f7a;--accent-ambient-1:#8b5cf6;--accent-ambient-2:#6366f1;--accent-lofi-1:#f59e0b;--accent-lofi-2:#ec4899;--accent-postrock-1:#14b8a6;--accent-postrock-2:#06b6d4;--accent-postmetal-1:#ef4444;--accent-postmetal-2:#1e1b4b;--accent-mathrock-1:#84cc16;--accent-mathrock-2:#eab308;--accent-1:var(--accent-ambient-1);--accent-2:var(--accent-ambient-2);--accent-glow:#8b5cf626;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-primary);-webkit-font-smoothing:antialiased;background-image:radial-gradient(at 0 0,#160f3480 0,#0000 50%),radial-gradient(at 100% 0,#0e123080 0,#0000 50%),radial-gradient(at 50% 100%,#1a0c2c99 0,#0000 50%);min-height:100vh;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-darker)}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px #0000005e}.glass-panel-hover:hover{background:var(--glass-bg-hover);border-color:#ffffff1f;transform:translateY(-2px);box-shadow:0 12px 40px #00000080}.bg-gradient-accent{background:linear-gradient(135deg, var(--accent-1), var(--accent-2))}.text-gradient-accent{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.border-gradient-active{box-shadow:0 0 15px var(--accent-glow);border-color:var(--accent-1)!important}input,select,button{font-family:inherit}select{border:1px solid var(--glass-border);color:var(--text-primary);cursor:pointer;background:#0000004d;border-radius:8px;outline:none;padding:8px 12px;transition:all .25s}select:focus{border-color:var(--accent-1);box-shadow:0 0 8px var(--accent-glow)}.btn{cursor:pointer;border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:.95rem;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent-1), var(--accent-2));color:#fff;box-shadow:0 4px 15px var(--accent-glow)}.btn-primary:hover{opacity:.95;box-shadow:0 6px 20px var(--accent-glow);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{border:1px solid var(--glass-border);color:var(--text-primary);background:#ffffff0d}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3}.btn-secondary:active{transform:translateY(0)}.btn-icon{border-radius:50%;width:40px;height:40px;padding:0}.app-container{max-width:1400px;margin:0 auto;padding:40px 20px}.grid-layout{grid-template-columns:350px 1fr;gap:30px;margin-top:30px;display:grid}@media (width<=1024px){.grid-layout{grid-template-columns:1fr}}@keyframes pulseGlow{0%{box-shadow:0 0 15px #8b5cf626}50%{box-shadow:0 0 25px #8b5cf659}to{box-shadow:0 0 15px #8b5cf626}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.floating{animation:6s ease-in-out infinite float}.text-h1{letter-spacing:-.03em;margin-bottom:8px;font-family:Outfit,sans-serif;font-size:3rem;font-weight:800}.text-h2{letter-spacing:-.02em;font-family:Outfit,sans-serif;font-size:1.8rem;font-weight:700}.genre-card{cursor:pointer;border:1px solid var(--glass-border);position:relative;overflow:hidden}.genre-card:before{content:"";background:0 0;width:100%;height:4px;transition:background .3s;position:absolute;top:0;left:0}.genre-card.active:before{background:linear-gradient(90deg, var(--accent-1), var(--accent-2))}.progress-bar-container{background:#ffffff0d;border-radius:3px;height:6px;position:relative;overflow:hidden}.progress-bar-fill{border-radius:3px;height:100%;transition:width .1s linear}