.onboarding{position:fixed;inset:0;z-index:100;background:#070605f5;display:grid;place-items:center;padding:18px}.onboarding-card{width:min(100%,470px);max-height:calc(100vh - 36px);overflow:auto;border:1px solid #65472f;border-radius:25px;background:linear-gradient(145deg,#251a12,#0d0a08);padding:22px;box-shadow:0 25px 70px #000}.onboarding-card h2{margin:0;font-size:27px}.onboarding-card>p{color:#aaa095;line-height:1.4}.onboarding-card label{display:block;color:#dcc8ae;font-size:10px;font-weight:900;letter-spacing:1.4px;margin:18px 0 8px}.onboarding-card input{width:100%;border:1px solid #51473f;border-radius:14px;background:#111016;color:#fff;padding:14px;font-size:16px}.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.avatar-grid button{aspect-ratio:1;border:2px solid transparent;border-radius:16px;padding:3px;background:#18151a;overflow:hidden}.avatar-grid button.selected{border-color:#f0a34e;box-shadow:0 0 0 3px #f0a34e2e}.avatar-grid img{width:100%;height:100%;object-fit:cover;border-radius:11px}.onboarding-save{width:100%;border:1px solid #ffc06a;border-radius:15px;background:linear-gradient(145deg,#efa849,#b95224);color:white;padding:15px;font-weight:900;font-size:16px;margin-top:20px}.reaction-bar{display:flex;align-items:center;gap:6px;margin:-13px 0 18px;padding:8px;border:1px solid #3c3027;border-radius:15px;background:#100d0b}.reaction-bar span{color:#a79d91;font-size:9px;font-weight:900;letter-spacing:1px;margin-right:auto}.reaction-bar button{width:38px;height:38px;border:1px solid #3d3838;border-radius:11px;background:#1a171b;font-size:19px}.reaction-pop{position:fixed;left:50%;top:45%;z-index:90;font-size:70px;pointer-events:none;animation:reactionFly 1.5s ease-out forwards}@keyframes reactionFly{0%{opacity:0;transform:translate(-50%,30px) scale(.5)}25%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,-100px) scale(1)}}@media(max-width:390px){.reaction-bar{gap:3px}.reaction-bar button{width:34px;height:34px;font-size:17px}.reaction-bar span{display:none}.avatar-grid{grid-template-columns:repeat(3,1fr)}}
