:root{--plum:#4A1D5C;--purple:#7B2D8E;--mag:#E0218A;--pink:#FCE7F3;--bg:#FFF9FC}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--plum);
background-image:radial-gradient(circle at 10% 0%,#fce7f3 0,transparent 40%),radial-gradient(circle at 100% 30%,#f3e1fa 0,transparent 35%);background-attachment:fixed}
.serif{font-family:'Fraunces',serif}
.grad{background:linear-gradient(135deg,#4A1D5C 0%,#7B2D8E 45%,#E0218A 100%)}
.gradtext{background:linear-gradient(90deg,#7B2D8E,#E0218A);-webkit-background-clip:text;color:transparent}
.card{background:#fff;border-radius:1.4rem;box-shadow:0 8px 30px -12px rgba(224,33,138,.25);border:1px solid #f6d7e9}
.btn{border-radius:999px;font-weight:800;padding:.75rem 1.4rem;transition:transform .15s,box-shadow .15s}
.btn:active{transform:scale(.96)}
.btn-p{background:linear-gradient(90deg,#7B2D8E,#E0218A);color:#fff;box-shadow:0 8px 20px -8px #E0218A}
.btn-o{background:#fff;border:2px solid #E0218A;color:#E0218A}
.chip{border-radius:999px;padding:.45rem .9rem;border:2px solid #f0c6de;font-weight:700;font-size:.85rem;background:#fff}
.chip.on{background:#E0218A;color:#fff;border-color:#E0218A}
.rise{animation:rise .5s both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pulse{animation:pl 1.2s infinite}
@keyframes pl{50%{transform:scale(1.12);opacity:.6}}
.spark{display:inline-block;color:#E0218A}
.confetti{position:fixed;top:-10px;width:10px;height:14px;z-index:99;animation:fall 2.4s linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid #fbcfe8;box-shadow:0 -6px 20px -10px rgba(224,33,138,.3);padding-bottom:env(safe-area-inset-bottom,0px);-webkit-transform:translateZ(0);transform:translateZ(0)}
.bnav button{padding:.5rem 0;display:flex;flex-direction:column;align-items:center;font-size:11px;font-weight:700;background:none;border:0}
.tnav{display:none}
.sosb{bottom:calc(5.5rem + env(safe-area-inset-bottom,0px))}
.padb{padding-bottom:calc(7rem + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){.bnav{display:none}.tnav{display:flex}.sosb{bottom:1.5rem}.padb{padding-bottom:2.5rem}}
@media (max-width:1023px){body{background-attachment:scroll}}
.hex{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
textarea:focus,input:focus{outline:3px solid #f9a8d4}