:root{--bg-deep: #070B14;--bg-surface: #0F1625;--bg-elevated: #172035;--bg-card: #1C2740;--amber: #FFB800;--amber-dim: #CC9400;--amber-glow: rgba(255, 184, 0, .15);--coral: #FF4D6D;--coral-dim: #CC3D57;--teal: #00CDB8;--teal-dim: #009E8E;--text-primary: #F2F4F8;--text-secondary:#8892A4;--text-dim: #4A5568;--border: rgba(255, 255, 255, .07);--border-accent: rgba(255, 184, 0, .3);--font-display: "Bebas Neue", "Arial Narrow", sans-serif;--font-body: "Outfit", "Segoe UI", sans-serif;--font-mono: "Space Mono", monospace;--shadow-amber: 0 0 20px rgba(255, 184, 0, .2), 0 4px 16px rgba(0,0,0,.4);--shadow-coral: 0 0 20px rgba(255, 77, 109, .2), 0 4px 16px rgba(0,0,0,.4);--shadow-card: 0 4px 24px rgba(0,0,0,.5);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px}[data-theme=light]{--bg-deep: #F5F0E8;--bg-surface: #EDE7DB;--bg-elevated: #E4DCCE;--bg-card: #FFFFFF;--amber-glow: rgba(180, 120, 0, .12);--text-primary: #16192A;--text-secondary:#52566E;--text-dim: #9498AE;--border: rgba(0, 0, 0, .08);--border-accent: rgba(180, 120, 0, .35);--shadow-amber: 0 0 20px rgba(180, 120, 0, .15), 0 4px 16px rgba(0,0,0,.12);--shadow-coral: 0 0 20px rgba(200, 50, 80, .15), 0 4px 16px rgba(0,0,0,.12);--shadow-card: 0 4px 24px rgba(0,0,0,.1)}[data-theme=light] body{background-image:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(180,120,0,.05) 0%,transparent 60%)}[data-theme=light] .primary-button{background:#c98000;box-shadow:var(--shadow-amber)}[data-theme=light] .primary-button:hover:not(:disabled){background:#b36e00;box-shadow:0 0 24px #b478004d,0 4px 16px #00000026}*,*:before,*:after{box-sizing:border-box}html{font-size:16px}body{margin:0;font-family:var(--font-body);font-weight:400;background-color:var(--bg-deep);color:var(--text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;background-image:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(255,184,0,.06) 0%,transparent 60%)}#root{min-height:100vh;overflow-x:hidden}h1,h2,h3{font-family:var(--font-display);letter-spacing:.03em;margin:0;line-height:1}h1{font-size:clamp(2.5rem,6vw,5rem)}h2{font-size:clamp(1.6rem,4vw,2.8rem)}h3{font-size:clamp(1.1rem,2.5vw,1.6rem)}p{margin:0}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-card)}.card--elevated{background:var(--bg-elevated);border-color:var(--border-accent)}button{cursor:pointer;border:none;border-radius:var(--radius-md);padding:12px 24px;font-family:var(--font-body);font-size:15px;font-weight:600;transition:all .18s ease;outline:none}button:active{transform:scale(.97)}.btn-primary{background:var(--amber);color:#070b14;font-weight:700;letter-spacing:.04em;box-shadow:var(--shadow-amber)}.btn-primary:hover:not(:disabled){background:#ffc833;box-shadow:0 0 32px #ffb80066,0 4px 16px #0006;transform:translateY(-1px)}.btn-primary:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}.btn-ghost:hover{background:var(--bg-elevated);color:var(--text-primary);border-color:#ffffff26}.primary-button{background:var(--amber);color:#070b14;font-weight:700;letter-spacing:.04em;box-shadow:var(--shadow-amber);border:none;border-radius:var(--radius-md);padding:14px 40px;font-family:var(--font-body);font-size:16px;cursor:pointer;transition:all .18s ease}.primary-button:hover:not(:disabled){background:#ffc833;box-shadow:0 0 32px #ffb80066,0 4px 16px #0006;transform:translateY(-2px)}.primary-button:disabled{opacity:.35;cursor:not-allowed}input[type=text],input[type=number]{background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:15px;padding:10px 14px;width:100%;transition:border-color .15s;outline:none}input[type=text]:focus,input[type=number]:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-glow)}input::placeholder{color:var(--text-dim)}.section-label{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:16px}.select-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;cursor:pointer;transition:all .18s ease}.select-card:hover{border-color:#ffb80066;background:var(--bg-elevated)}.select-card.active{border-color:var(--amber);background:var(--bg-elevated);box-shadow:0 0 0 1px var(--amber),inset 0 0 24px var(--amber-glow)}.select-card.active-coral{border-color:var(--coral);background:var(--bg-elevated);box-shadow:0 0 0 1px var(--coral),inset 0 0 24px #ff4d6d1a}.divider{height:1px;background:var(--border);margin:24px 0}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}.song-set-grid{display:grid;gap:8px;grid-template-columns:1fr}@media (min-width: 480px){.song-set-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 640px){.song-set-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.card{padding:20px 16px}button{padding:10px 16px;font-size:14px}}@media (max-width: 480px){button{padding:8px 12px;font-size:13px}}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #ffb80033}50%{box-shadow:0 0 32px #ffb80080}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-up{animation:fadeUp .4s ease both}