:root{--pink:#FF6FAE;--pink2:#F59BD0;--ink:#2B2F4A;--sub:#6B7194;--lav:#E6E0FF;--blue:#DCE8FF;--cyan:#CFF4FA}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;font-family:'Nunito',sans-serif;color:var(--ink);background:linear-gradient(160deg,#CFF4FA 0%,#DCE8FF 45%,#E6E0FF 100%);min-height:100vh}
.phone{max-width:430px;margin:0 auto;min-height:100vh;position:relative;overflow-x:hidden;background:linear-gradient(170deg,rgba(207,244,250,.9),rgba(220,232,255,.85) 50%,rgba(236,226,255,.95))}
@media(min-width:500px){.phone{box-shadow:0 20px 60px rgba(120,130,200,.25);border-radius:28px;margin:20px auto;min-height:calc(100vh - 40px)}}
.card{background:#fff;border-radius:24px;box-shadow:0 8px 28px rgba(120,130,200,.14)}
.btn-pink{background:linear-gradient(90deg,#FF6FAE,#F59BD0);color:#fff;font-weight:800;border-radius:999px;padding:14px 20px;box-shadow:0 8px 20px rgba(255,111,174,.35);transition:transform .15s}
.btn-pink:active{transform:scale(.97)}.btn-pink:disabled{opacity:.45;box-shadow:none}
.btn-ghost{background:#fff;color:#C2468A;border:2px solid #F7C6DF;font-weight:800;border-radius:999px;padding:12px 20px}
.inp{width:100%;background:#F6F7FF;border:2px solid #E6E8FA;border-radius:16px;padding:12px 14px;font-weight:600;color:var(--ink);outline:none}
.inp:focus{border-color:#F59BD0;background:#fff}
.lbl{font-size:13px;font-weight:800;color:var(--sub);margin:12px 0 6px;display:block}
.screen{animation:fadeUp .35s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.bob{animation:bob 3s ease-in-out infinite}
@keyframes drift{from{transform:translateX(-30px)}to{transform:translateX(30px)}}
.cloudbg{position:absolute;opacity:.7;animation:drift 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.pulse{animation:pulse 1.2s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
.ring{animation:ring .5s ease-in-out infinite}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.confetti{position:fixed;top:-20px;width:10px;height:14px;border-radius:3px;animation:fall 2.6s linear forwards;z-index:80}
.chip{padding:7px 14px;border-radius:999px;font-weight:800;font-size:13px;white-space:nowrap;background:#fff;color:var(--sub);border:2px solid #ECEBFA}
.chip.on{background:linear-gradient(90deg,#FF6FAE,#F59BD0);color:#fff;border-color:transparent}
.noscroll::-webkit-scrollbar{display:none}
.sparkle{position:absolute;color:#fff;font-size:14px;pointer-events:none;text-shadow:0 0 8px #c9d4ff}
.sheet{animation:up .3s ease both}@keyframes up{from{transform:translateY(100%)}to{transform:none}}