/* ==========================================================
   SWEET PASTEL SURPRISE — DESIGN SYSTEM & STYLES
   Colors: bg #FFE4EC, cream #FFF8F3, pink #FF8FB1,
   lavender #D9C8FF, mint #CFF2E3, butter #FFF1B8, text #5A3E4B.
   ========================================================== */

:root {
  --bg: #FFE4EC;
  --cream: #FFF8F3;
  --pink: #FF8FB1;
  --pink-dark: #F06292;
  --lavender: #D9C8FF;
  --mint: #CFF2E3;
  --mint-dark: #A5E4C8;
  --butter: #FFF1B8;
  --peach: #FFD9C2;
  --text: #5A3E4B;
  --text-muted: #8E6A7A;
  --card-border: #FFD2DF;
  --white: #FFFFFF;
  
  --font-head: 'Fredoka', cursive, sans-serif;
  --font-body: 'Quicksand', sans-serif;
  --font-hand: 'Caveat', cursive;

  --radius-xl: 28px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px rgba(255, 143, 177, 0.22);
  --shadow-card: 0 16px 40px rgba(142, 106, 122, 0.12);
  --shadow-float: 0 14px 28px rgba(90, 62, 75, 0.1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Global Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

*, html, body, main, section, div, p, span, h1, h2, h3, ul, li, img {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF8FB1' stroke='%23FFFFFF' stroke-width='2' stroke-linejoin='round' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") 4 4, auto;
}

button, a, label, input, textarea, select, [role="button"], .polaroid-card, .masonry-card, .btn-pill, .btn-primary, .digit-box {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24'%3E%3Cpath fill='%23F06292' stroke='%23FFFFFF' stroke-width='2' stroke-linejoin='round' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3Ccircle cx='18' cy='5' r='2.5' fill='%23FFF1B8' stroke='%23FFFFFF' stroke-width='1'/%3E%3C/svg%3E") 6 6, pointer !important;
}

body {
  background-color: var(--bg);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 241, 184, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(207, 242, 227, 0.45) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(217, 200, 255, 0.35) 0%, transparent 60%);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(16px, var(--safe-top)) 14px max(24px, var(--safe-bottom));
  overflow-x: hidden;
  position: relative;
}

/* Floating Background Stickers */
.bg-stickers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.float-sticker {
  position: absolute;
  font-size: clamp(24px, 4vw, 36px);
  opacity: 0.75;
  filter: drop-shadow(0 4px 10px rgba(255, 143, 177, 0.25));
  animation: floatBob 6s ease-in-out infinite alternate;
}

@keyframes floatBob {
  0% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-16px) rotate(6deg) scale(1.06); }
  100% { transform: translateY(8px) rotate(-6deg) scale(0.96); }
}

/* Cursor Heart Trail Particle */
.cursor-heart-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  font-size: 16px;
  transform: translate(-50%, -50%);
  animation: heartFade 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes heartFade {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.6) translateY(-28px);
  }
}

/* App Container */
.app-container {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Cards */
.card {
  background: var(--cream);
  border-radius: var(--radius-xl);
  border: 3px solid var(--card-border);
  box-shadow: var(--shadow-card);
  padding: 26px 22px 32px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Cute Scalloped Top Wave Overlay */
.scallop-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: radial-gradient(circle, var(--pink) 4px, transparent 5px) repeat-x;
  background-size: 16px 8px;
  opacity: 0.65;
}

/* Screens */
.screen {
  display: none;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.screen.active {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Typography */
.title {
  font-family: var(--font-head);
  font-size: clamp(24px, 5.5vw, 32px);
  font-weight: 700;
  text-align: center;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 8px;
}

.subtitle {
  text-align: center;
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 22px;
  padding: 0 8px;
}

.hand-text {
  font-family: var(--font-hand);
  font-size: clamp(26px, 6vw, 36px);
  color: var(--pink-dark);
  line-height: 1.2;
}

.header-badge {
  display: inline-block;
  margin: 0 auto 12px;
  padding: 6px 18px;
  background: var(--butter);
  border: 2px dashed #F5CE68;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 600;
  color: #795548;
  text-align: center;
  width: 100%;
}

/* Rainbow Title Effect */
.rainbow-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.rainbow-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.rainbow-word {
  display: inline-flex;
  white-space: nowrap;
  gap: 3px;
}

.rainbow-char {
  font-family: var(--font-head);
  font-size: clamp(24px, 6vw, 36px);
  font-weight: 700;
  display: inline-block;
  animation: rainbowBounce 1.4s ease-in-out infinite alternate;
}

.rainbow-char.day-char {
  font-size: clamp(34px, 8.5vw, 48px);
}

@keyframes rainbowBounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px) scale(1.06); }
}

/* Form Controls */
.input-group {
  margin-bottom: 16px;
}

.field-label {
  display: block;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.custom-input, .custom-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  border: 2px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  outline: none;
  transition: all 0.2s ease;
  min-height: 48px;
}

.custom-input:focus, .custom-textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255, 143, 177, 0.25);
  background: #FFFDFE;
}

.custom-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

/* Buttons */
button {
  cursor: pointer;
  border: none;
  font-family: var(--font-head);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: var(--radius-pill);
  touch-action: manipulation;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
}

.btn-primary {
  width: 100%;
  background: linear-gradient(135deg, #FFA0BC 0%, #FF6F96 100%);
  color: var(--white);
  font-size: 16.5px;
  font-weight: 700;
  padding: 15px 26px;
  box-shadow: 0 8px 24px rgba(255, 111, 150, 0.38);
}

.btn-bounce:hover {
  transform: translateY(-3px) scale(1.025);
  box-shadow: 0 14px 28px rgba(255, 111, 150, 0.45);
}

.btn-bounce:active {
  transform: translateY(1px) scale(0.97);
}

.btn-pill {
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
}

.btn-mint {
  background: linear-gradient(135deg, #D6F6E9 0%, #AEEFD3 100%);
  color: #14593C;
  border: 2px solid #8CE3BA;
}
.btn-mint:hover {
  background: #9EE9C7;
}

.btn-lavender {
  background: linear-gradient(135deg, #EBE3FF 0%, #D4C4FC 100%);
  color: #4A328C;
  border: 2px solid #BCACF5;
}

.btn-secondary {
  background: #FFF5F8;
  color: var(--text);
  border: 2px solid #FFD0DD;
  padding: 12px 20px;
}

.btn-secondary:hover {
  background: #FFE8F1;
  border-color: var(--pink);
}

.top-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 10px;
}

.nav-btn {
  background: #FFF8FA;
  color: #6A3A4E;
  border: 2px solid #FFD0DD;
  padding: 8px 18px;
  min-height: 40px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(255, 143, 177, 0.18);
}

.nav-btn:hover {
  background: #FFE8F1;
  border-color: var(--pink);
  transform: translateY(-2px);
}

.status-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  background: var(--lavender);
  color: #553C9A;
  border-radius: var(--radius-pill);
}

/* Photo Section in Maker */
.photo-section {
  background: #FFF0F5;
  border: 2px dashed #FFB6CB;
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  margin-bottom: 20px;
  transition: all 0.2s;
}

.photo-section.drag-over {
  background: #FFE0EB;
  border-color: var(--pink-dark);
}

.photo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
  flex-wrap: wrap;
}

.photo-counter {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--peach);
  color: #8D4323;
  margin-left: 6px;
}

.photo-counter.ready {
  background: var(--mint);
  color: #1B5E43;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.photo-card-item {
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 2px solid var(--card-border);
  padding: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(90, 62, 75, 0.05);
}

.photo-thumb-wrap {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #FFE8EF;
  position: relative;
}

.photo-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-slot-num {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(90, 62, 75, 0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
}

.photo-caption-input {
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  padding: 5px 8px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  outline: none;
  width: 100%;
}

.photo-actions-row {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  gap: 4px;
}

.mini-action-btn {
  min-height: 28px;
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 6px;
  background: #F3EEF1;
  color: var(--text);
}
.mini-action-btn:hover { background: var(--pink); color: #fff; }
.mini-action-btn.del-btn:hover { background: #FF5252; color: #fff; }

.add-more-card {
  width: 100%;
  background: var(--white);
  border: 2px dashed var(--pink);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--pink-dark);
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s;
}
.add-more-card:hover {
  background: #FFF0F5;
  transform: translateY(-2px);
  border-color: var(--pink-dark);
}

.validation-msg {
  color: #E53935;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  min-height: 20px;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #4A2837;
  color: #FFF;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  z-index: 100000;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* ==========================================================
   VIEWER SCREENS
   ========================================================== */

/* 1. Passcode Screen */
.heart-frame-wrap {
  display: flex;
  justify-content: center;
  margin: 12px 0 20px;
}

.heart-frame {
  width: 170px;
  height: 170px;
  position: relative;
  background: var(--pink);
  clip-path: path('M 85,155 C 20,105 0,65 0,35 C 0,15 15,0 38,0 C 58,0 75,15 85,32 C 95,15 112,0 132,0 C 155,0 170,15 170,35 C 170,65 150,105 85,155 Z');
  padding: 6px;
  box-shadow: 0 8px 20px rgba(255, 143, 177, 0.4);
  animation: pulseHeart 2s ease-in-out infinite;
}

@keyframes pulseHeart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.heart-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: path('M 80,147 C 18,99 0,61 0,33 C 0,14 14,0 36,0 C 55,0 71,14 80,30 C 89,14 105,0 124,0 C 146,0 160,14 160,33 C 160,61 142,99 80,147 Z');
}

.passcode-container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 14px;
}

.digit-box {
  width: 48px;
  height: 56px;
  border: 2.5px solid var(--card-border);
  border-radius: 14px;
  background: var(--white);
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--text);
  outline: none;
  transition: all 0.2s;
}

.digit-box:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255, 143, 177, 0.28);
  transform: translateY(-2px);
}

.passcode-hint {
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
}

.shake {
  animation: shakeAnim 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shakeAnim {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* 2. Question / Playful Screen */
.choice-card {
  text-align: center;
}

.choice-icon {
  font-size: 64px;
  margin-bottom: 12px;
  animation: floatBob 3s ease-in-out infinite;
}

.choice-btn-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.btn-yes {
  flex: 1.2;
  background: linear-gradient(135deg, #FFA0BC 0%, #FF6F96 100%);
  color: #fff;
  font-size: 18px;
  padding: 16px 24px;
}

.btn-no {
  flex: 0.8;
  background: #FFF0F4;
  color: #9C526F;
  border: 2px solid #FFCCD9;
  font-size: 15px;
  transition: all 0.25s;
}

/* Angry Page */
.angry-card {
  background: #FFE8ED !important;
  border-color: #FFA5BA !important;
  text-align: center;
}

.angry-emoji {
  font-size: 72px;
  margin-bottom: 12px;
  animation: shakeAnim 0.8s infinite;
}

/* 3. Boyfriend's Day Celebration Screen */
.celebrate-card {
  text-align: center;
}

.sticker-frame-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 16px auto 24px;
  border-radius: 24px;
  padding: 10px;
  background: linear-gradient(135deg, #FFF1B8, #FFD9C2, #D9C8FF);
  box-shadow: 0 12px 30px rgba(255, 143, 177, 0.3);
}

.sticker-frame-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  border: 3px solid #fff;
}

.corner-sticker {
  position: absolute;
  font-size: 32px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.cs-tl { top: -14px; left: -14px; }
.cs-tr { top: -14px; right: -14px; }
.cs-bl { bottom: -14px; left: -14px; }
.cs-br { bottom: -14px; right: -14px; }

/* 4. "It's Your Day — 3rd October" */
.dual-photos-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 260px;
  margin: 18px 0;
}

.tilt-photo-left, .tilt-photo-right {
  position: absolute;
  width: 180px;
  height: 220px;
  background: #fff;
  padding: 8px 8px 24px;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(90, 62, 75, 0.15);
  border: 1px solid #FFD2DF;
}

.tilt-photo-left {
  left: calc(50% - 150px);
  transform: rotate(-7deg);
  z-index: 1;
}

.tilt-photo-right {
  right: calc(50% - 150px);
  transform: rotate(6deg);
  z-index: 2;
}

.tilt-photo-left img, .tilt-photo-right img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
}

/* 5. Museum of Us */
.museum-gallery {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 20px 0;
}

.polaroid-card {
  background: #fff;
  padding: 12px 12px 20px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(90, 62, 75, 0.12);
  border: 1px solid #FFD8E4;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.polaroid-card:hover {
  transform: scale(1.025) translateY(-4px);
  box-shadow: 0 14px 28px rgba(255, 143, 177, 0.25);
}

.polaroid-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  background: #FFE8EF;
}

.polaroid-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.polaroid-caption {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--text);
  text-align: center;
  margin-top: 10px;
  padding: 0 4px;
}

/* 6. Letter Screen */
.letter-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 20px;
}

.letter-carousel {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #FFE8EF;
  box-shadow: 0 8px 20px rgba(90, 62, 75, 0.1);
}

.letter-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.letter-carousel-nav {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
}

.letter-paper {
  background: #FFFAF5;
  border: 2px solid #F5E2D0;
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  position: relative;
  box-shadow: inset 0 0 20px rgba(255, 235, 220, 0.5);
  font-family: var(--font-hand);
  font-size: 24px;
  line-height: 1.55;
  color: #4A333E;
  min-height: 160px;
}

.letter-paper::before {
  content: "💌";
  position: absolute;
  top: -14px;
  right: 18px;
  font-size: 26px;
}

.typewriter-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px);
  animation: wordReveal 0.25s forwards;
}

@keyframes wordReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.letter-sign {
  text-align: right;
  margin-top: 16px;
  font-size: 26px;
  color: var(--pink-dark);
}

/* 7. Certificate Screen */
.clauses-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0;
}

.clause-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid #FFDEE7;
  font-size: 14.5px;
  font-weight: 600;
  transition: all 0.2s;
}

.clause-item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--pink-dark);
  cursor: pointer;
}

.clause-item.checked {
  background: #FFF2F6;
  border-color: var(--pink);
}

.cert-preview-card {
  width: 100%;
  aspect-ratio: 1600 / 1130;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(90, 62, 75, 0.15);
  border: 3px solid #F5CE68;
  margin-bottom: 16px;
  position: relative;
}

.cert-preview-card canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* 8. Memory Board */
.masonry-grid {
  column-count: 2;
  column-gap: 12px;
  margin: 18px 0;
}

.masonry-card {
  break-inside: avoid;
  background: #fff;
  padding: 8px 8px 14px;
  border-radius: 12px;
  border: 1px solid #FFD8E4;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(90, 62, 75, 0.08);
  transition: transform 0.2s;
}

.masonry-card:hover {
  transform: translateY(-3px);
}

.masonry-card img {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.masonry-caption {
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--text);
  margin-top: 6px;
  text-align: center;
}

.reasons-box {
  background: #FFF3F7;
  border: 2px dashed #FFB6CB;
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  margin: 20px 0;
}

.reason-item {
  font-family: var(--font-hand);
  font-size: 22px;
  color: #5A3E4B;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  inset: 0;
  background: rgba(45, 25, 35, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.lightbox-modal.active {
  display: flex;
}

.lightbox-content {
  max-width: 500px;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  padding: 14px 14px 20px;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.lightbox-img-wrap {
  width: 100%;
  max-height: 60vh;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.lightbox-img-wrap img {
  width: 100%;
  height: 100%;
  max-height: 60vh;
  object-fit: contain;
}

.lightbox-close-btn {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pink-dark);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

/* Share & QR Code Area */
.qr-card-box {
  background: #fff;
  border: 2px solid #FFD2DF;
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  margin: 18px 0;
}

.qr-code-img {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

.qr-code-img img, .qr-code-img canvas {
  border-radius: 12px;
  border: 4px solid var(--cream);
}

.share-link-input-row {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* Viewer Loader */
.viewer-loader {
  text-align: center;
  padding: 60px 20px;
}

.bouncing-gift {
  font-size: 64px;
  animation: floatBob 2s infinite ease-in-out;
  margin-bottom: 16px;
}

/* Progress Bar */
.progress-bar-wrap {
  width: 100%;
  height: 14px;
  background: #FFE8EF;
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin: 12px 0;
  border: 1px solid #FFCCD9;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #FF8FB1, #D9C8FF, #CFF2E3);
  transition: width 0.2s ease;
}