/* ── CSS Variables ─────────────────────────────────────────────────────────── */
:root {
  --pink:#ff69b4;
  --hot-pink:#e91e8c;
  --purple:#9b59b6;
  --deep-purple:#6a0572;
  --gold:#f9c74f;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

/* ── Body ───────────────────────────────────────────────────────────────────── */
body{
  font-family:'Nunito',sans-serif;
  background:linear-gradient(135deg,#2d0036 0%,#6a0572 30%,#c2185b 65%,#ff69b4 100%);
  min-height:100vh;padding:16px;
  display:flex;flex-direction:column;align-items:center;
}

/* ── Animations ─────────────────────────────────────────────────────────────── */
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1) rotate(0deg)}50%{opacity:.4;transform:scale(.6) rotate(180deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes bounce-in{0%{transform:scale(0) rotate(-10deg);opacity:0}60%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(255,105,180,.5),0 0 40px rgba(155,89,182,.3)}50%{box-shadow:0 0 30px rgba(255,105,180,.9),0 0 60px rgba(155,89,182,.6)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
@keyframes confetti-fly{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-130px) scale(.4) rotate(360deg)}}
@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}

/* ── Toast ──────────────────────────────────────────────────────────────────── */
#toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);
  background:linear-gradient(135deg,#6a0572,#c2185b);
  color:white;padding:10px 24px;border-radius:30px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.3);transition:transform .3s ease;
  z-index:2000;white-space:nowrap;
}
#toast.show{transform:translateX(-50%) translateY(0)}

/* ── Spinner ─────────────────────────────────────────────────────────────────── */
.spinner{
  width:56px;height:56px;border:5px solid rgba(255,255,255,.3);
  border-top-color:white;border-radius:50%;animation:spin 1s linear infinite;
}
.loading-text{font-family:'Pacifico',cursive;font-size:22px;color:white}

/* ── Emoji picker (shared) ──────────────────────────────────────────────────── */
.emoji-picker-wrap{grid-column:1/-1}
.selected-emoji-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.selected-emoji-display{
  width:52px;height:52px;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,214,235,.8),rgba(232,213,245,.8));
  border:3px solid var(--pink);display:flex;align-items:center;
  justify-content:center;font-size:28px;flex-shrink:0;
}
.selected-emoji-label{font-size:13px;font-weight:800;color:var(--deep-purple)}
.emoji-categories{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.emoji-cat-btn{
  padding:5px 12px;border:2px solid rgba(155,89,182,.3);border-radius:20px;
  background:rgba(255,255,255,.7);font-size:12px;font-weight:800;
  color:var(--deep-purple);cursor:pointer;transition:all .2s;font-family:'Nunito',sans-serif;
}
.emoji-cat-btn:hover{border-color:var(--pink);background:rgba(255,214,235,.5)}
.emoji-cat-btn.active{background:linear-gradient(135deg,var(--pink),var(--purple));color:white;border-color:transparent}
.emoji-grid{display:flex;flex-wrap:wrap;gap:6px;max-height:130px;overflow-y:auto;padding:4px}
.emoji-btn{
  width:38px;height:38px;border-radius:10px;border:2px solid transparent;
  background:rgba(255,255,255,.7);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;
}
.emoji-btn:hover{background:rgba(255,214,235,.8);border-color:var(--pink);transform:scale(1.15)}
.emoji-btn.selected{background:linear-gradient(135deg,rgba(255,214,235,.9),rgba(232,213,245,.9));border-color:var(--purple);transform:scale(1.1)}