@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--bg-deep:#050505;--bg-primary:#0a0a0a;--bg-surface:#121212;--bg-card:#0f0f1499;--bg-glass:#ffffff08;--neon-purple:#a855f7;--neon-purple-glow:#a855f74d;--neon-purple-dim:#a855f726;--neon-cyan:#06b6d4;--neon-pink:#ec4899;--neon-green:#22c55e;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#475569;--text-accent:#c084fc;--border-subtle:#ffffff0f;--border-glow:#a855f74d;--glow-sm:0 0 10px var(--neon-purple-glow);--glow-lg:0 0 30px var(--neon-purple-glow), 0 0 60px #a855f726;--shadow-card:0 4px 24px #0006;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--duration-normal:.25s;--ease-out:cubic-bezier(.32, .72, 0, 1);--spring:cubic-bezier(.32, .72, 0, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{background:var(--bg-deep);font-size:16px}body{background-color:var(--bg-deep);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;font-family:Outfit,sans-serif;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{display:none}*,.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}#root{flex-direction:column;min-height:100dvh;display:flex}.app-bg{z-index:-1;background:var(--bg-deep);position:fixed;inset:0;overflow:hidden}.app-bg:before,.app-bg:after{content:"";border-radius:50%;animation:15s ease-in-out infinite ambientFloat;position:absolute}.app-bg:before{background:radial-gradient(circle,#a855f714 0%,#0000 70%);width:70%;height:70%;top:-30%;left:-20%}.app-bg:after{background:radial-gradient(circle,#06b6d40f 0%,#0000 70%);width:60%;height:60%;animation-direction:reverse;bottom:-20%;right:-20%}@keyframes ambientFloat{0%,to{transform:translate(0)scale(1)}50%{transform:translate(4%,2%)scale(1.05)}}.page{flex-direction:column;flex:1;align-items:center;width:100%;max-width:480px;margin:0 auto;display:flex;position:relative}.page-header{text-align:center;margin-bottom:var(--space-sm);margin-top:var(--space-sm);width:100%}.page-header h1{letter-spacing:-.02em;background:linear-gradient(135deg, var(--neon-purple), var(--neon-cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.75rem;font-weight:800}.page-header .subtitle{color:var(--text-secondary);font-size:.85rem}.glass-shell{background:#ffffff08;border:1px solid #ffffff14;border-radius:28px;width:100%;padding:4px;box-shadow:0 10px 40px #00000080}.glass-core{-webkit-backdrop-filter:blur(40px);background:#0a0a0fcc;border-radius:24px;width:100%;padding:32px 24px;box-shadow:inset 0 1px 1px #ffffff0f}.glass-card{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);width:100%;box-shadow:var(--shadow-card);border-radius:24px;padding:16px}.wizard-wrapper{flex:1;justify-content:center;align-items:center;width:100%;min-height:400px;display:flex;position:relative;overflow:hidden}.wizard-step{flex-direction:column;align-items:center;width:100%;display:flex}.nav-arrow{border:1.5px solid var(--border-subtle);color:#fff;z-index:10;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:44px;height:44px;transition:all .2s;transition:all .5s var(--spring);background:#1e1e32cc;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.nav-arrow:active{transform:translateY(-50%)scale(.92)}.nav-arrow.left{left:-5px}.nav-arrow.right{right:-5px}.nav-arrow:disabled{opacity:0;pointer-events:none}.step-indicator{justify-content:center;gap:8px;margin-top:16px;margin-bottom:24px;display:flex}.step-dot{width:24px;height:4px;transition:all .5s var(--spring);background:#ffffff1a;border-radius:4px}.step-dot.active{background:var(--neon-cyan);width:48px;box-shadow:var(--glow-sm)}.search-input-wrapper{margin-bottom:24px;position:relative}.search-icon{position:absolute;top:50%;left:16px;transform:translateY(-50%)}.search-input{background:var(--bg-surface);border:1.5px solid var(--border-subtle);border-radius:var(--radius-md);color:#fff;width:100%;transition:all var(--duration-normal);outline:none;padding:18px 16px 18px 48px;font-size:1.05rem;font-weight:600}.search-input::placeholder{color:#94a3b8;font-weight:400}.search-input:focus{border-color:var(--neon-purple);box-shadow:var(--glow-sm)}.donation-label{color:var(--text-secondary);margin-bottom:12px;font-size:.85rem;font-weight:500;display:block}.donation-options{gap:8px;display:grid}.donation-btn{background:var(--bg-surface);border:2px solid var(--border-subtle);border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--duration-normal);transition:all .5s var(--spring);padding:14px 8px;font-size:1.25rem;font-weight:700;position:relative}.donation-btn:active{transform:scale(.96)}.donation-btn.selected{border-color:var(--neon-purple);background:var(--neon-purple-dim);transform:scale(1.02)}.popular-tag{background:var(--neon-purple);border-radius:0 var(--radius-md) 0 var(--radius-sm);padding:2px 8px;font-size:.55rem;position:absolute;top:-1px;right:-1px}.charity-banner{border-radius:var(--radius-md);background:linear-gradient(135deg,#22c55e14,#a855f714);border:1px solid #22c55e33;gap:12px;margin-top:12px;padding:12px;display:flex}.charity-banner .charity-text{color:var(--text-secondary);font-size:.8rem;line-height:1.4}.charity-banner strong{color:var(--neon-green)}.charity-name{color:var(--text-accent);font-weight:600}.submit-btn{border-radius:var(--radius-md);cursor:pointer;width:100%;transition:all var(--duration-normal);border:none;justify-content:center;align-items:center;gap:12px;padding:14px;font-size:1.1rem;font-weight:700;display:flex}.wallet-btn{color:#fff;background:#000;border:1px solid #fff3}.venmo-btn{color:#fff;background:#008cff}.free-btn{background:var(--bg-surface);border:1.5px solid var(--neon-purple);color:#fff}.submit-btn{transition:all .5s var(--spring)}.submit-btn:hover{filter:brightness(1.15);transform:translateY(-2px)}.submit-btn:active{transform:scale(.97)}.confirmation{text-align:center}.success-icon{animation:bounceIn .6s var(--ease-out), partyPop 2s infinite .6s ease-in-out;margin-bottom:16px;font-size:4rem;display:inline-block}.song-detail{color:var(--text-accent);margin-top:16px;margin-bottom:32px;font-size:1.1rem}.optional-input{border-radius:var(--radius-md);border:1.5px solid var(--border-subtle);background:var(--bg-surface);color:#fff;outline:none;width:100%;margin-bottom:12px;padding:14px 16px;transition:border-color .2s}.optional-input:focus{border-color:var(--neon-cyan)}.save-btn{background:var(--bg-surface);border:1.5px solid var(--neon-cyan);width:100%;color:var(--neon-cyan);border-radius:var(--radius-md);cursor:pointer;margin-top:8px;padding:14px;font-weight:600}.done-btn{width:100%;color:var(--text-muted);cursor:pointer;background:0 0;border:none;margin-top:8px;padding:14px;text-decoration:underline}@keyframes bounceIn{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes partyPop{0%{transform:scale(1)rotate(0)}15%{transform:scale(1.15)rotate(8deg)}30%{transform:scale(1.15)rotate(-8deg)}45%{transform:scale(1)rotate(0)}to{transform:scale(1)rotate(0)}}@media (height<=750px){.page-header h1{font-size:2.2rem!important}.subtitle{margin-bottom:8px!important;font-size:.85rem!important}.glass-core{padding:12px!important}.glass-shell{margin-bottom:12px!important}.wizard-wrapper{flex-direction:column;justify-content:center;display:flex;padding:0 16px 8px!important}.donation-btn{padding:10px 4px!important;font-size:1.1rem!important}.donation-label{margin-bottom:8px!important}.submit-btn{padding:12px!important;font-size:1rem!important}.charity-banner{margin-top:8px!important;padding:8px!important}.search-input{padding:12px 12px 12px 40px!important}.nav-arrow{width:36px!important;height:36px!important}}
