:root{--bg-base:#0a0a1a;--glass-bg:#ffffff12;--glass-bg-hover:#ffffff21;--glass-border:#ffffff26;--glass-border-glow:#8b5cf666;--primary:#8b5cf6;--primary-light:#a78bfa;--primary-glow:#8b5cf659;--accent:#f472b6;--text-primary:#f1f5f9;--text-secondary:#f1f5f999;--text-muted:#f1f5f959;--radius-card:20px;--radius-btn:14px;--transition:all .3s cubic-bezier(.4, 0, .2, 1);--spring:all .3s cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-base);color:var(--text-primary);background-image:radial-gradient(at 20% 20%,#8b5cf626 0%,#0000 50%),radial-gradient(at 80% 80%,#f472b61a 0%,#0000 50%);background-repeat:no-repeat;background-size:cover;background-attachment:fixed;justify-content:center;align-items:center;min-height:100vh;font-family:Plus Jakarta Sans,Inter,system-ui,sans-serif;display:flex;overflow-x:hidden}#root{flex-direction:column;width:100%;max-width:480px;min-height:100vh;padding:20px;display:flex}.glass-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px)saturate(180%);border:1px solid var(--glass-border);border-radius:var(--radius-card);transition:var(--transition);padding:24px;box-shadow:0 8px 32px #0006,inset 0 1px #ffffff1a}.glass-card.interactive:hover{box-shadow:0 20px 60px #00000080, 0 0 40px var(--primary-glow), 0 1px 0 #ffffff26 inset;border-color:var(--glass-border-glow);cursor:pointer;transform:translateY(-6px)perspective(1000px)rotateX(2deg)}.btn-primary{border-radius:var(--radius-btn);color:#fff;cursor:pointer;box-shadow:0 4px 20px var(--primary-glow), 0 1px 0 #fff3 inset;transition:var(--spring);background:linear-gradient(135deg,#8b5cf6,#6d28d9,#a855f7);border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 28px;font-family:inherit;font-size:1rem;font-weight:600;display:flex}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px)}.btn-primary:active{transform:scale(.97)}.btn-secondary{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-btn);color:var(--text-primary);cursor:pointer;transition:var(--transition);justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 28px;font-family:inherit;font-size:1rem;font-weight:600;display:flex}.btn-secondary:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-glow)}.glass-input{border:1px solid var(--glass-border);color:var(--text-primary);width:100%;transition:var(--transition);background:#ffffff0d;border-radius:12px;outline:none;padding:14px 16px;font-family:inherit;font-size:1rem}.glass-input::placeholder{color:var(--text-muted)}.glass-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 var(--primary-glow)}70%{box-shadow:0 0 0 12px #0000}to{box-shadow:0 0 #0000}}@keyframes bounce-dot{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.animate-fade-up{animation:.5s forwards fadeSlideUp}.animate-scale-in{animation:.3s cubic-bezier(.34,1.56,.64,1) forwards scaleIn}.gradient-text{background:linear-gradient(135deg,#a78bfa,#f472b6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.text-center{text-align:center}.mt-4{margin-top:16px}.mb-4{margin-bottom:16px}.mb-8{margin-bottom:32px}.mb-2{margin-bottom:8px}.gap-4{gap:16px}.gap-2{gap:8px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.emoji-btn{cursor:pointer;transition:var(--spring);background:0 0;border:1px solid #0000;border-radius:12px;padding:8px;font-size:2rem}.emoji-btn:hover{transform:scale(1.3)translateY(-8px)}.emoji-btn.selected{border-color:var(--primary);background:var(--glass-bg);box-shadow:0 0 0 2px var(--primary-glow)}.screen-container{flex-direction:column;flex:1;justify-content:center;animation:.5s fadeSlideUp;display:flex}