@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500;1,700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ── Premium palette for a 25-year-old girl ── */
  --bg:           #FDF8F5;
  --surface:      #FFFFFF;
  --surface-2:    #FEF4F0;

  --blush:        #F2C4B8;   /* soft warm peach-pink */
  --blush-deep:   #E8967F;   /* terracotta */
  --mauve:        #C9829A;   /* dusty rose mauve */
  --mauve-deep:   #9D5070;   /* deep plum-rose */
  --lilac:        #C5ACDB;   /* soft lilac */
  --gold:         #C9973B;
  --gold-soft:    #EDD9A0;
  --gold-pale:    #FBF3DE;

  --ink:          #2D1F2A;
  --ink-2:        #6B4E60;
  --ink-3:        #A98CA0;
  --line:         rgba(45,31,42,0.10);

  /* ── WhatsApp Specific styles ── */
  --wa-bg:        #E5DDD5;
  --wa-header:    #075E54;   /* Real WhatsApp Green */
  --wa-header-light: #128C7E;
  --wa-sent:      #E2F9C3;   /* Real WhatsApp outgoing bubble */
  --wa-received:  #FFFFFF;   /* Real WhatsApp incoming bubble */
  --wa-check:     #34B7F1;   /* Real WhatsApp blue check */

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', 'Segoe UI', sans-serif;

  --r-xl: 32px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  --shadow-card: 0 8px 32px -8px rgba(45,31,42,0.14);
  --shadow-lift: 0 20px 48px -16px rgba(45,31,42,0.25);
  --shadow-btn:  0 12px 28px -10px rgba(157,80,112,0.50);
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: linear-gradient(135deg, #FDF8F5 0%, #E8D9D3 100%);
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

img { max-width: 100%; display: block; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
:focus-visible { outline: 3px solid var(--mauve); outline-offset: 3px; }
svg { display: block; }
.icon, svg.lucide {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.55 !important; stroke-linecap: round; stroke-linejoin: round;
}
.hidden { display: none !important; }

/* ── Desktop backdrop decoration ── */
.desk-backdrop {
  position: fixed; inset: 0; z-index: 0; display: block;
  pointer-events: none;
}
.desk-backdrop .ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(45,31,42,0.04);
}
.desk-backdrop .ring.r1 { width: 980px; height: 980px; top: -320px; left: -340px; }
.desk-backdrop .ring.r2 { width: 660px; height: 660px; bottom: -240px; right: -220px; }

/* ── Premium Website Container ── */
.app-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 580px;
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  background: var(--bg);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Generic Screen Wrapper ── */
.screen {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

/* ═══════════════════════════════════════
   SPLIT LOGIN CARD
═══════════════════════════════════════ */
.split-login {
  padding: 0 !important;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
}
.login-hero {
  position: relative;
  flex: 0.45;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 48px;
}
.login-hero-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.login-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.login-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(45,31,42,0) 0%, rgba(45,31,42,0.65) 100%);
}
.login-hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
}
.login-hero-text h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.login-hero-text p {
  font-family: var(--font-body);
  font-size: 15px;
  margin: 0;
  opacity: 0.95;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
  letter-spacing: 0.3px;
}
.login-form-side {
  flex: 0.55;
  width: 100%;
  background: var(--surface);
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
  margin-top: -36px;
  z-index: 10;
  padding: 48px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.new-login-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.login-header-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 8px 16px rgba(157, 80, 112, 0.08);
}
.login-header-icon .icon {
  width: 32px;
  height: 32px;
  color: var(--mauve);
}
.new-login-card h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px; 
  font-weight: 700;
  margin: 0 0 12px; 
  line-height: 1.25;
  color: var(--mauve-deep);
}
.new-login-card .login-desc {
  font-size: 15px; color: var(--ink-2);
  line-height: 1.65; margin: 0 0 36px;
}
.input-group {
  text-align: left;
  width: 100%;
  margin-bottom: 24px;
}
.field-label {
  display: block; font-size: 12.5px;
  color: var(--ink-3); margin-bottom: 10px;
  letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700;
}
#login-input {
  width: 100%; padding: 16px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  font-size: 24px; letter-spacing: 12px;
  text-align: center; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  font-family: monospace;
}
#login-input:focus {
  border-color: var(--mauve);
  box-shadow: 0 0 0 4px rgba(201,130,154,0.15);
  background: var(--surface);
  outline: none;
}
.login-message {
  min-height: 22px; font-size: 13.5px;
  color: #d13d5a; margin-bottom: 12px;
  font-weight: 500;
}

/* ── Buttons ── */
.btn-primary {
  width: 100%; padding: 15px 22px; border-radius: 999px;
  background: linear-gradient(135deg, var(--mauve-deep) 0%, var(--mauve) 60%, var(--blush-deep) 100%);
  color: #fff; font-weight: 600; font-size: 15.5px;
  box-shadow: var(--shadow-btn);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(157,80,112,0.60); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.55; transform: none; }
.btn-primary .icon { width: 17px; height: 17px; stroke: #fff; }

.btn-ghost {
  padding: 12px 20px; border-radius: 999px;
  border: 1.5px solid var(--line); color: var(--ink-2);
  font-weight: 600; font-size: 14px;
  transition: background 0.2s, border-color 0.2s;
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--blush); }

/* ═══════════════════════════════════════
   LOADING SCREEN
═══════════════════════════════════════ */
.loading-screen { flex-direction: column; gap: 24px; text-align: center; }
.heartbeat-icon {
  width: 60px; height: 60px; color: var(--mauve);
  animation: heartbeat 1.2s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.22); }
  28%       { transform: scale(0.95); }
  42%       { transform: scale(1.16); }
  60%       { transform: scale(1); }
}
.loading-text {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--ink-2);
}

/* ═══════════════════════════════════════
   SLIDES
═══════════════════════════════════════ */
.slides-viewport {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slides-viewport::-webkit-scrollbar {
  display: none;
}
.app-slide {
  display: none;
  flex: 1;
  flex-direction: column;
  padding: 24px 20px 30px;
  animation: slide-in 0.42s cubic-bezier(0.23, 1, 0.32, 1);
  box-sizing: border-box;
}
.app-slide.active { display: flex; }
@keyframes slide-in {
  from { opacity: 0; transform: translateY(4px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.slide-inner {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.eyebrow-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; color: var(--blush-deep);
}
.eyebrow-row .icon { width: 17px; height: 17px; }
.eyebrow {
  font-family: var(--font-display); font-style: italic;
  font-size: 16.5px; color: var(--blush-deep);
}

.slide-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 7vw, 36px);
  margin: 0 0 14px; line-height: 1.2;
  color: var(--mauve-deep);
}
.slide-text {
  font-size: 15px; line-height: 1.75;
  color: var(--ink-2); margin: 0 0 12px;
}

/* ── Welcome slide ── */
.welcome-screen {
  flex-direction: column; text-align: center; gap: 8px;
  background: var(--bg);
}
.welcome-title {
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: clamp(48px, 14vw, 68px);
  margin: 12px 0 0; line-height: 1.05;
  background: linear-gradient(135deg, var(--mauve-deep), var(--blush-deep));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.welcome-sub {
  font-family: var(--font-display); font-style: italic;
  font-size: 20px; color: var(--ink-3); margin: 8px 0 28px;
}
.welcome-flourish {
  display: flex; justify-content: center; gap: 24px;
  color: var(--gold); margin-bottom: 20px;
}
.welcome-flourish .icon { width: 28px; height: 28px; }

/* ── Memory card ── */
.memory-card {
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--surface);
  border: 1px solid rgba(45,31,42,0.05);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.memory-card:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: 0 16px 32px rgba(45,31,42,0.09);
}
.memory-card img { width: 100%; height: auto; display: block; }
.memory-caption {
  padding: 20px;
  font-family: var(--font-display); font-style: italic;
  font-size: 19px; color: var(--mauve-deep); text-align: center;
  font-weight: 600;
}
/* ── Whispered little moment (replaces the "special note" look) ── */
.memory-whisper {
  position: relative;
  margin-top: 22px;
  padding: 26px 30px 22px;
  text-align: center;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid rgba(201,130,154,0.18);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 34px -16px rgba(157,80,112,0.28);
  overflow: hidden;
}
.memory-whisper::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 80px at 12% 0%, rgba(242,196,184,0.35), transparent 70%),
    radial-gradient(140px 90px at 100% 100%, rgba(197,172,219,0.30), transparent 70%);
  pointer-events: none;
}
.whisper-icon {
  position: relative;
  width: 30px; height: 30px;
  color: var(--mauve-deep);
  margin-bottom: 10px;
  opacity: 0.9;
}
.whisper-text {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.75;
  color: var(--mauve-deep);
  letter-spacing: 0.2px;
}
.whisper-dots {
  position: relative;
  display: inline-flex;
  gap: 7px;
  margin-top: 16px;
}
.whisper-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blush-deep);
  opacity: 0.55;
}
.whisper-dots i:nth-child(2) { background: var(--mauve); }
.whisper-dots i:nth-child(3) { background: var(--lilac); }

/* ═══════════════════════════════════════
   REAL SMARTPHONE CONTAINER (ONLY FOR WHATSAPP)
═══════════════════════════════════════ */
.wa-phone-container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 375px;
  height: 640px;
  margin: 0 auto;
  border: 11px solid #1E1A22; /* Realistic dark phone bezel */
  border-radius: 40px;
  background: #000;
  box-shadow: 
    0 25px 50px -12px rgba(45,31,42,0.45),
    0 0 0 1px rgba(255,255,255,0.06);
  overflow: hidden;
}

/* Phone Screen Notch / Speaker */
.wa-phone-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 25px;
  background: #1E1A22;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  z-index: 99;
}
.wa-phone-notch::before { /* Notch speaker */
  content: '';
  position: absolute;
  top: 5px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
}

/* Simulated mini phone clock icon widget */
.wa-phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 24px 6px;
  background: var(--wa-header);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.2px;
  height: 38px;
  z-index: 10;
}
.wa-phone-status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wa-phone-status-icons .icon {
  width: 13px; height: 13px;
  color: #fff;
}

/* Home Gesture Indicator Bar at bottom of screen */
.wa-phone-home-indicator {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  z-index: 99;
  pointer-events: none;
}

/* WhatsApp Frame Inside Simulated Phone */
.wa-frame {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
  background-color: var(--wa-bg);
}

/* WhatsApp Header block */
.wa-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--wa-header);
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 5;
}
.wa-header .back-icon { 
  width: 20px; height: 20px; 
  stroke: #fff; 
  stroke-width: 2.2;
  margin-right: -4px; 
}
/* Single contact avatar inside header (Adhil's pic, since it's her phone) */
.wa-header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}
.wa-header .wa-who { flex: 1; min-width: 0; }
.wa-header .wa-name { font-weight: 700; font-size: 15px; }
.wa-header .wa-status { font-size: 11px; opacity: 0.85; }
.wa-header .wa-icons { display: flex; gap: 14px; align-items: center; }
.wa-header .wa-icons svg { 
  width: 18px; height: 18px; 
  stroke: #fff;
  fill: none;
}

/* ───────────────────────────────────────────────
   Couple Avatar — large, displayed OUTSIDE phone
   Adhil's pic behind (right-shifted), her pic front
─────────────────────────────────────────────── */
.wa-couple-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 128px;
  height: 76px;
  margin: 0 auto 18px;
}
.wa-couple-avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 2px;
  box-shadow: 0 6px 20px rgba(45,31,42,0.18);
}
/* His pic: behind, shifted right */
.wa-couple-him {
  left: 46px;
  z-index: 1;
  border: 4px solid #f9f0f4;
  opacity: 0.9;
}
/* Her pic: in front, left */
.wa-couple-her {
  left: 0;
  z-index: 2;
  border: 4px solid #fff;
}

/* WhatsApp Chat Body */
.wa-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
  background-color: #efeae2;
  background-image: url("../images/gistfile1.png");
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wa-body::-webkit-scrollbar { display: none; }

.wa-date-divider { text-align: center; margin: 8px 0 10px; }
.wa-date-divider span {
  display: inline-block;
  background: rgba(225, 238, 246, 0.9);
  color: #54656f;
  font-size: 11px; font-weight: 500;
  padding: 5px 12px; border-radius: 7.5px;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.08);
}

.wa-row { display: flex; width: 100%; margin: 1px 0; align-items: flex-end; }
.wa-row.me  { justify-content: flex-end; }
.wa-row.her { justify-content: flex-start; gap: 6px; }

/* Small avatar thumbnail next to received (Adhil's) bubbles */
.wa-bubble-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
  border: 1.5px solid rgba(255,255,255,0.5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.wa-bubble {
  max-width: 82%;
  padding: 8px 10px 8px 12px;
  border-radius: 8px;
  font-size: 13.5px; line-height: 1.45;
  position: relative;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
  word-wrap: break-word;
}

/* me = sent (outgoing) */
.wa-bubble.me {
  background: var(--wa-sent);
  color: #111b21;
  border-top-right-radius: 0;
}
/* her = received (incoming) */
.wa-bubble.her {
  background: var(--wa-received);
  color: #111b21;
  border-top-left-radius: 0;
}

/* reply widget */
.wa-bubble .wa-reply {
  display: block; font-size: 11.5px; color: #54656f;
  background: rgba(0,0,0,0.038);
  border-left: 3px solid #06cf9c;
  padding: 4px 6px; border-radius: 4px;
  margin-bottom: 5px; opacity: 0.95;
}
.wa-meta {
  display: inline-flex; align-items: center; gap: 3.5px;
  float: right; margin: 4px -2px -2px 10px;
  font-size: 10px; color: #667781;
}
.wa-meta svg { width: 15px; height: 15px; }
.wa-meta .checks { color: var(--wa-check); }

/* Real Phone WhatsApp Keyboard/Input bottom area styling */
.wa-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 24px; /* extra padding to account for home widget */
  background: #efeae2;
  z-index: 10;
}
.wa-input-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border-radius: 24px;
  padding: 8px 14px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
.wa-input-left .icon {
  width: 20px; height: 20px;
  color: #54656f;
}
.wa-placeholder {
  flex: 1;
  font-size: 14.5px;
  color: #8696a0;
  user-select: none;
}
.wa-input-left .attachment-icon { transform: rotate(45deg); }
.wa-input-left .camera-icon { margin-left: 2px; }

.wa-mic-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #00a884;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
}
.wa-mic-btn .icon {
  width: 18px; height: 18px;
  stroke: none;
  fill: #fff;
}

/* wishes/love custom styling */
.list-cards {
  list-style: none; padding: 0; margin: 18px 0 0;
  display: flex; flex-direction: column; gap: 12px;
}
.list-cards li {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--surface); border-radius: var(--r-md);
  padding: 16px; box-shadow: var(--shadow-card);
  font-size: 15px; line-height: 1.6;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}
.list-cards li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(45,31,42,0.06);
}
.icon-wrap {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--surface-2), var(--blush));
  display: flex; align-items: center; justify-content: center;
  color: var(--mauve-deep);
}
.icon-wrap .icon { width: 18px; height: 18px; }
/* Birthday Card Module (Slide 4) — looks like a real greeting card */
.birthday-card {
  position: relative;
  margin: 18px auto 0;
  max-width: 460px;
  width: 100%;
  background: var(--surface);
  border-radius: 18px;
  padding: 4px;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(22px) rotate(-1.2deg);
}
.app-slide.active .birthday-card {
  animation: cardArrive 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes cardArrive {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

/* decorative envelope flap lines on the card edge */
.birthday-card-lines {
  position: absolute;
  inset: 4px;
  border-radius: 15px;
  border: 1px solid rgba(157, 80, 112, 0.18);
  pointer-events: none;
}
.birthday-card-lines::before,
.birthday-card-lines::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 26px;
  border-bottom: 1px solid rgba(157, 80, 112, 0.18);
}
.birthday-card-lines::before {
  left: 0;
  border-right: 1px solid rgba(157, 80, 112, 0.18);
  border-bottom-right-radius: 60px;
}
.birthday-card-lines::after {
  right: 0;
  border-left: 1px solid rgba(157, 80, 112, 0.18);
  border-bottom-left-radius: 60px;
}

.birthday-card-inner {
  position: relative;
  background:
    radial-gradient(circle at 12% 8%, rgba(242, 196, 184, 0.18), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(197, 172, 219, 0.18), transparent 42%),
    linear-gradient(160deg, #FFFDFB, #FDF3EF);
  border-radius: 14px;
  padding: 30px 26px 26px;
  overflow: hidden;
}

.birthday-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.birthday-card-to {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--mauve-deep);
}
.birthday-card-monogram {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--mauve-deep), var(--blush-deep));
  box-shadow: 0 4px 12px rgba(157, 80, 112, 0.3);
}
.app-slide.active .birthday-card-monogram {
  animation: monoPop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s both;
}
@keyframes monoPop {
  0% { transform: scale(0) rotate(-30deg); }
  100% { transform: scale(1) rotate(0); }
}

.birthday-card-text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 14px;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
}
.birthday-card-text:last-of-type { margin-bottom: 0; }
.app-slide.active .birthday-card-text {
  animation: cardTextIn 0.6s ease forwards;
}
.app-slide.active .birthday-card-text:nth-of-type(1) { animation-delay: 0.5s; }
.app-slide.active .birthday-card-text:nth-of-type(2) { animation-delay: 0.75s; }
@keyframes cardTextIn {
  to { opacity: 1; transform: translateY(0); }
}

.birthday-card-sign {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(157, 80, 112, 0.14);
  opacity: 0;
}
.app-slide.active .birthday-card-sign {
  animation: cardTextIn 0.6s ease 1s forwards;
}
.birthday-card-sign-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 21px;
  color: var(--mauve-deep);
}
.birthday-card-heart {
  width: 18px; height: 18px;
  color: var(--blush-deep);
  animation: heartbeat 1.4s ease-in-out infinite;
}

/* Love Letter Module */
.love-letter-wrap {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 32px 24px 28px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  margin-top: 24px;
}
.love-letter-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blush), var(--mauve));
}
.love-letter-text {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
}
.love-letter-text:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  font-style: italic;
  color: var(--mauve-deep);
  float: left;
  line-height: 0.8;
  margin-right: 8px;
  margin-top: 6px;
}
.love-letter-divider {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 22px 0;
}
.love-letter-divider .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blush-deep);
  opacity: 0.5;
}

/* ═══════════════════════════════════════
   3-D GIFT BOXES SECTION
═══════════════════════════════════════ */
.gift-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 24px;
}
.gift-box {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.5s ease, opacity 0.5s ease;
  position: relative;
}
.gift-box:hover:not(.locked-out) { transform: translateY(-6px) scale(1.04); }
.gift-box.locked-out {
  opacity: 0.4;
  filter: grayscale(1);
  cursor: pointer;
  transform: scale(0.9);
  transition: all 0.5s ease;
}
.gift-box.locked-out:hover { opacity: 0.6; transform: scale(0.93); }

.box-subtitle {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  text-align: center;
  line-height: 1.4;
}

/* ═══ Advanced Ribbon Untie Animation ═══ */
/* Vertical bands (slide up and fade) */
.gift-box.selected .gift-svg > rect:nth-of-type(2),
.gift-box.selected .lid-group > rect:nth-of-type(2) {
  animation: ribbonBandFly 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  transform-origin: center;
}

/* Left Loop */
.gift-box.selected .lid-group > path:nth-of-type(1) {
  animation: bowLoopLeft 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s forwards;
  transform-origin: center;
}

/* Right Loop */
.gift-box.selected .lid-group > path:nth-of-type(2) {
  animation: bowLoopRight 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s forwards;
  transform-origin: center;
}

/* Tails */
.gift-box.selected .lid-group > path:nth-of-type(3) {
  animation: bowTails 1.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s forwards;
  transform-origin: center;
}

/* Knot */
.gift-box.selected .lid-group > circle {
  animation: bowKnot 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  transform-origin: center;
}

@keyframes ribbonBandFly {
  0% { transform: translateY(0); opacity: 1; }
  60% { opacity: 0.8; }
  100% { transform: translateY(-40px); opacity: 0; pointer-events: none; }
}

@keyframes bowLoopLeft {
  0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  40% { transform: translate(-8px, -15px) rotate(-45deg) scale(1.15); opacity: 1; }
  100% { transform: translate(-25px, -35px) rotate(-90deg) scale(0.6); opacity: 0; pointer-events: none; }
}

@keyframes bowLoopRight {
  0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
  40% { transform: translate(8px, -15px) rotate(45deg) scale(1.15); opacity: 1; }
  100% { transform: translate(25px, -35px) rotate(90deg) scale(0.6); opacity: 0; pointer-events: none; }
}

@keyframes bowTails {
  0% { transform: translate(0,0) rotate(0deg); opacity: 1; }
  40% { transform: translate(0, -10px) rotate(8deg); opacity: 0.9; }
  100% { transform: translate(0, -30px) rotate(-15deg); opacity: 0; pointer-events: none; }
}

@keyframes bowKnot {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  40% { transform: translateY(-20px) scale(1.3); opacity: 1; }
  100% { transform: translateY(-40px) scale(0); opacity: 0; pointer-events: none; }
}

.box-scene {
  width: 90px; height: 95px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.gift-svg {
  width: 100%; height: 100%;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.lid-group {
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.2);
  transform-origin: 50px 37px;
}
.gift-box:hover:not(.locked-out) .gift-svg {
  transform: translateY(-4px) scale(1.08);
}
.gift-box:hover:not(.locked-out) .lid-group {
  transform: translateY(-5px) rotate(-1.5deg);
}
/* Inside showcase target, the box gets its own big animation — no static transform needed */
.gift-box.selected .gift-svg {
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.18));
}
.gift-box.selected .lid-group {
  animation: lidFloatSelected 2.2s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes lidFloatSelected {
  0%   { transform: translateY(-8px) rotate(-2deg); }
  100% { transform: translateY(-16px) rotate(-5deg); }
}

.box-mystery {
  /* removed - now drawn as a neat vector text inside the SVG */
}
.box-label { margin-top: 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.box-pick-btn {
  margin-top: 8px; font-size: 12px; font-weight: 700; color: #fff;
  padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(135deg, var(--mauve-deep), var(--mauve));
  box-shadow: 0 4px 10px -4px rgba(157,80,112,0.4);
  transition: transform 0.2s; white-space: nowrap;
}
.gift-box.selected .box-pick-btn {
  background: linear-gradient(135deg, var(--mauve-deep), var(--blush-deep));
  box-shadow: 0 4px 12px rgba(157, 80, 112, 0.3);
}

/* ═══════════════════════════════════════
   CINEMATIC SHOWCASE OVERLAY
═══════════════════════════════════════ */

/* The gift slide needs to be a positioning context */
.app-slide[data-slide="gift"] {
  position: relative;
  overflow: hidden;
}

.gift-showcase-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(254, 251, 252, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 20px;
  /* entrance */
  animation: overlayFadeIn 0.3s ease-out;
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.gift-showcase-overlay.hidden { display: none; }

.showcase-content {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

#showcase-box-target {
  width: 160px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

/* Box inside showcase: hide label/subtitle/button, show big */
#showcase-box-target .gift-box {
  pointer-events: none;
  transform: none !important;
  animation: none !important;
}
#showcase-box-target .gift-box .box-label,
#showcase-box-target .gift-box .box-subtitle,
#showcase-box-target .gift-box .box-pick-btn {
  display: none !important;
}
#showcase-box-target .gift-box .box-scene {
  width: 140px;
  height: 150px;
}
#showcase-box-target .gift-box.cinematic-spin {
  animation: cinematicEntrance 1.1s cubic-bezier(0.19, 1, 0.22, 1) forwards !important;
  transform-origin: center bottom;
}
#showcase-box-target .gift-box.cinematic-spin ~ * { opacity: 0; }
#showcase-box-target .gift-box.floatInShowcase {
  animation: showcaseFloat 3.5s ease-in-out infinite alternate !important;
}

@keyframes cinematicEntrance {
  0% {
    opacity: 0;
    transform: scale(0.2) rotateY(-160deg) rotateX(30deg) translateY(120px);
  }
  70% {
    opacity: 1;
    transform: scale(1.08) rotateY(12deg) rotateX(-4deg) translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0deg) rotateX(0deg) translateY(0);
  }
}

@keyframes showcaseFloat {
  0%   { transform: translateY(0px) rotate(-1deg); }
  100% { transform: translateY(-12px) rotate(1.5deg); }
}

.showcase-details {
  text-align: center;
  width: 100%;
}
#showcase-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 26px;
  color: var(--mauve-deep);
  margin: 0 0 6px;
}
#showcase-subtitle {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0 0 18px;
  font-style: italic;
  line-height: 1.5;
}
.showcase-inner-content {
  width: 100%;
}
.showcase-inner-content.hidden { display: none; }
#showcase-choice-msg {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: var(--mauve-deep);
  margin-bottom: 14px;
}
.showcase-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
  margin-top: 16px;
  padding: 0;
}
.showcase-back-btn:hover {
  opacity: 1;
  transform: translateX(-3px);
}
.address-form { margin-top: 16px; text-align: left; display: flex; flex-direction: column; gap: 12px; }
.address-form label { font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; }
.address-form input, .address-form textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--surface-2);
  font-family: var(--font-body); font-size: 14px; color: var(--ink);
}
.address-form input:focus, .address-form textarea:focus {
  border-color: var(--mauve); box-shadow: 0 0 0 3px rgba(201,130,154,0.15); background: var(--surface);
}
.address-actions { display: flex; gap: 10px; margin-top: 4px; }
.address-actions .btn-primary { flex: 1; }

.confirm-note {
  font-size: 13.5px; color: var(--ink-2); margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--gold-pale); border-radius: var(--r-md); padding: 12px 16px;
}
.confirm-note .icon { width: 16px; height: 16px; color: var(--gold); }

/* ═══════════════════════════════════════
   FINAL SLIDE
═══════════════════════════════════════ */
.final-screen { flex-direction: column; text-align: center; gap: 12px; }
.final-title {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  font-size: clamp(34px, 8vw, 48px); margin: 10px 0;
  background: linear-gradient(135deg, var(--mauve-deep), var(--blush-deep));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.final-flourish { color: var(--gold); margin-top: 12px; display: flex; justify-content: center; gap: 14px; }
.final-flourish .icon { width: 24px; height: 24px; }
.confetti-container { display: flex; justify-content: center; gap: 10px; font-size: 28px; margin: 18px 0; }
.restart-btn {
  margin: 20px auto 0; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--ink-3); padding: 10px 20px; border-radius: 999px;
  border: 1.5px solid var(--line); transition: color 0.2s, border-color 0.2s;
}
.restart-btn:hover { color: var(--mauve-deep); border-color: var(--mauve); }
.restart-btn .icon { width: 14px; height: 14px; }

/* ═══════════════════════════════════════
   BOTTOM NAVIGATION BAR
═══════════════════════════════════════ */
.bottom-nav {
  position: relative;
  margin-top: auto;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 24px;
  background: transparent;
}
.nav-btn-back {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); flex-shrink: 0;
  border: 1px solid rgba(45,31,42,0.05);
}
.nav-btn-back:disabled { opacity: 0.3; }
.progress-dots { display: flex; gap: 6px; flex: 1; justify-content: center; }
.progress-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blush); transition: all 0.28s ease; }
.progress-dots .dot.active { width: 20px; background: linear-gradient(90deg, var(--mauve-deep), var(--mauve)); }

.nav-btn-next {
  flex-shrink: 0; padding: 13px 22px; border-radius: 999px;
  background: linear-gradient(135deg, var(--mauve-deep) 0%, var(--mauve) 60%, var(--blush-deep) 100%);
  color: #fff; font-weight: 600; font-size: 14.5px;
  box-shadow: var(--shadow-btn); display: inline-flex; align-items: center; gap: 6px;
}
.nav-btn-next .icon { width: 15px; height: 15px; stroke: #fff; }

/* ═══════════════════════════════════════
   MOBILE COMPAT RULE FOR SIDEBARS
   (Ensures they remain hidden on mobile)
═══════════════════════════════════════ */
.desktop-sidebar {
  display: none !important;
}
.wa-desktop-sidebar {
  display: none !important;
}
.wa-chat-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ═══════════════════════════════════════
   DESKTOP SCREEN LAYOUTS (1024px+)
═══════════════════════════════════════ */
@media (min-width: 1024px) {
  body {
    background: linear-gradient(135deg, #FDF8F5 0%, #E2D0C6 100%);
  }

  /* Transition for card expansion after login */
  .app-shell {
    max-width: 840px;
    height: 600px;
    border-radius: 24px;
    transition: max-width 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                height 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.8s ease;
    align-self: center;
  }
  
  /* Split login Desktop adjustments */
  .split-login {
    flex-direction: row;
    height: 100%;
  }
  
  .login-hero {
    flex: 0.45;
    height: 100%;
    padding-bottom: 60px;
    align-items: center;
  }
  
  .login-hero-overlay {
    background: linear-gradient(180deg, rgba(45,31,42,0.1) 0%, rgba(45,31,42,0.5) 100%);
  }
  
  .login-hero-text {
    transform: translateY(120px);
  }
  
  .login-hero-text h2 {
    font-size: 32px;
  }
  
  .login-form-side {
    flex: 0.55;
    height: 100%;
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    justify-content: center;
    padding: 60px 48px;
  }

  /* When main experience is active, expand shell into a full screen layout! */
  .app-shell:has(#main-experience:not(.hidden)) {
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* Make #main-experience the grid container */
  #main-experience {
    display: grid !important;
    grid-template-columns: 310px 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "sidebar viewport"
      "sidebar bottomnav";
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
  }

  /* Sidebar display */
  .desktop-sidebar {
    grid-area: sidebar;
    display: flex !important; /* overrides mobile hidden state */
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 24px;
    background: linear-gradient(180deg, rgba(254, 244, 240, 0.5) 0%, rgba(253, 248, 245, 0.85) 100%);
    border-right: 1px solid var(--line);
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
  }

  .sidebar-header {
    text-align: center;
    margin-bottom: 24px;
  }
  .sidebar-crown {
    width: 24px;
    height: 24px;
    color: var(--gold);
    margin: 0 auto 6px;
  }
  .sidebar-eyebrow {
    display: block;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
  }
  .sidebar-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    font-size: 24px;
    color: var(--mauve-deep);
    margin: 4px 0 0;
  }

  .sidebar-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0;
  }
  .timeline-line {
    position: absolute;
    left: 17px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: var(--line);
    z-index: 0;
  }

  .timeline-step {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    padding: 6px 0;
    width: 100%;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s ease;
  }

  .step-indicator {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 700;
    transition: all 0.25s ease;
    flex-shrink: 0;
  }
  .step-indicator .step-icon {
    width: 16px;
    height: 16px;
    display: none;
  }

  .step-label {
    font-size: 13.5px;
    font-weight: 550;
    color: var(--ink-3);
    transition: all 0.25s ease;
  }

  /* States of step buttons */
  .timeline-step.unlocked:hover .step-indicator,
  .timeline-step.completed:hover .step-indicator {
    border-color: var(--mauve);
    color: var(--mauve-deep);
    transform: scale(1.05);
  }
  .timeline-step.unlocked:hover .step-label,
  .timeline-step.completed:hover .step-label {
    color: var(--mauve-deep);
  }

  .timeline-step.active .step-indicator {
    background: linear-gradient(135deg, var(--mauve-deep), var(--mauve));
    border-color: var(--mauve-deep);
    color: #fff;
    box-shadow: 0 4px 12px rgba(157, 80, 112, 0.25);
    transform: scale(1.1);
  }
  .timeline-step.active .step-indicator .step-number {
    display: none;
  }
  .timeline-step.active .step-indicator .step-icon {
    display: block;
    stroke: #fff;
  }
  .timeline-step.active .step-label {
    font-weight: 700;
    color: var(--mauve-deep);
    font-size: 14px;
  }

  .timeline-step.completed .step-indicator {
    background: var(--surface-2);
    border-color: var(--blush-deep);
    color: var(--blush-deep);
  }
  .timeline-step.completed .step-label {
    color: var(--ink);
  }

  .timeline-step.locked {
    cursor: not-allowed;
  }
  .timeline-step.locked .step-indicator {
    background: rgba(45,31,42,0.02);
    border-color: rgba(45,31,42,0.06);
    opacity: 0.6;
  }
  .timeline-step.locked .step-label {
    color: var(--ink-3);
    opacity: 0.5;
  }

  /* Teaser step — one peek ahead, mysterious shimmer */
  .timeline-step.teaser {
    cursor: default;
    pointer-events: none;
  }
  .timeline-step.teaser .step-indicator {
    background: linear-gradient(135deg, var(--surface-2), var(--blush));
    border-color: var(--blush-deep);
    border-style: dashed;
    opacity: 0.7;
    animation: teaser-pulse 2.2s ease-in-out infinite;
  }
  .timeline-step.teaser .step-number {
    display: none;
  }
  @keyframes teaser-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 0.9; transform: scale(1.06); }
  }

  .sidebar-footer {
    text-align: center;
    border-top: 1px dashed var(--line);
    padding-top: 16px;
    margin-top: 12px;
  }
  .sidebar-footer p {
    font-size: 11px;
    color: var(--ink-3);
    margin: 0;
  }

  /* Viewport and navigation placements */
  .slides-viewport {
    grid-area: viewport;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  .bottom-nav {
    grid-area: bottomnav;
    border-top: 1px solid var(--line);
    background: rgba(253, 248, 245, 0.95);
    padding: 16px 48px 20px;
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
  }

  /* Individual Slide Enhancements */
  .app-slide {
    padding: 30px 48px 24px;
    min-height: 0;
    flex: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    /* TOP-ANCHORED: content scrolls from top, never gets clipped */
    justify-content: flex-start;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--blush-deep) transparent;
  }
  .app-slide::-webkit-scrollbar { width: 4px; }
  .app-slide::-webkit-scrollbar-track { background: transparent; }
  .app-slide::-webkit-scrollbar-thumb {
    background: var(--blush-deep);
    border-radius: 2px;
    opacity: 0.5;
  }
  .app-slide.active {
    display: flex;
  }

  .slide-inner {
    padding: 20px 0 32px;
    max-width: 960px;
    margin: auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Allow it to grow — don't shrink — so tall content scrolls, not clips */
    flex-shrink: 0;
  }

  /* Slide 0: Welcome — always centred */
  .welcome-screen {
    flex: 1;
    padding: 40px 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .welcome-title {
    font-size: clamp(48px, 6vw, 76px);
    line-height: 1.05;
    margin: 20px 0;
  }
  .welcome-sub {
    font-size: clamp(18px, 2vw, 24px);
    margin-bottom: 24px;
  }

  /* Slide 1 & 2: Memories Polaroid Tilt Style */
  .app-slide[data-slide^="memory-"] .slide-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas:
      "text photo"
      "note photo";
    gap: 40px;
    align-items: center;
    padding: 10px 0;
  }
  .app-slide[data-slide^="memory-"] .eyebrow-row {
    grid-column: 1;
  }
  .app-slide[data-slide^="memory-"] .slide-title {
    grid-column: 1;
    font-size: clamp(28px, 3.5vw, 42px);
    margin-bottom: 20px;
  }
  .app-slide[data-slide^="memory-"] .memory-card {
    grid-area: photo;
    width: 440px;
    justify-self: center;
    border: 12px solid #fff;
    border-bottom: 30px solid #fff;
    box-shadow: 0 15px 30px rgba(45,31,42,0.12);
    border-radius: 4px;
    transform: rotate(2.5deg);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
  }
  .app-slide[data-slide^="memory-"] .memory-card:hover {
    transform: rotate(0deg) scale(1.04);
    box-shadow: 0 25px 45px rgba(45,31,42,0.18);
  }
  .app-slide[data-slide^="memory-"] .memory-caption {
    font-size: 16px;
    padding: 14px 6px 0;
  }
  .app-slide[data-slide^="memory-"] .memory-whisper {
    grid-area: note;
    margin-top: 0;
    padding: 22px 24px 18px;
  }
  .app-slide[data-slide^="memory-"] .whisper-text {
    font-size: 16.5px;
    line-height: 1.65;
  }

  /* Tablet / small laptop: keep the polaroid but relax the grid so the
     description never gets squished or clipped beside the photo. */
  @media (max-width: 1100px) and (min-width: 768px) {
    .app-slide[data-slide^="memory-"] .slide-inner {
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }
    .app-slide[data-slide^="memory-"] .memory-card { width: 100%; }
  }

  /* Mobile: single clean column — photo on top, then title + readable note. */
  @media (max-width: 767px) {
    .app-slide[data-slide^="memory-"] .slide-inner {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 8px 0 24px;
    }
    .app-slide[data-slide^="memory-"] .memory-card {
      width: 100%;
      border-width: 10px;
      border-bottom-width: 26px;
      transform: rotate(-1.5deg);
    }
    .app-slide[data-slide^="memory-"] .slide-title { margin-bottom: 6px; }
    .app-slide[data-slide^="memory-"] .memory-whisper { margin-top: 4px; padding: 22px 20px 18px; }
    .app-slide[data-slide^="memory-"] .whisper-text { font-size: 16px; }
  }

  /* Slide 3: Conversations Tablet/Web Layout */
  .app-slide[data-slide="chat"] .slide-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
  }
  
  .wa-phone-container {
    width: 100%;
    max-width: 960px;
    height: 520px;
    border: 1px solid rgba(45,31,42,0.1);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-card);
    align-self: center;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .wa-phone-notch,
  .wa-phone-status-bar,
  .wa-phone-home-indicator {
    display: none !important;
  }
  .wa-frame {
    display: grid !important;
    grid-template-columns: 260px 1fr;
    height: 100%;
    margin: 0;
    padding: 0;
    min-height: 0;
  }

  /* WhatsApp Desktop Sidebar styling */
  .wa-desktop-sidebar {
    display: flex !important;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid rgba(45,31,42,0.08);
    height: 100%;
    min-height: 0;
  }
  .wa-search-bar {
    padding: 12px;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(45,31,42,0.06);
  }
  .wa-search-bar input {
    background: #e9e9e9;
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    flex: 1;
    pointer-events: none;
    outline: none;
  }
  .wa-search-bar .icon {
    width: 14px;
    height: 14px;
    color: #888;
  }
  .wa-chat-list {
    flex: 1;
    overflow-y: auto;
  }
  .wa-chat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(45,31,42,0.03);
    cursor: default;
    transition: background 0.2s;
  }
  .wa-chat-item.active {
    background: #eaeaea;
  }
  .wa-chat-item.active .last-msg {
    color: #00a884;
    font-weight: 500;
  }
  .wa-chat-item img.wa-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
  }
  .wa-chat-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--blush);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
    flex-shrink: 0;
  }
  .wa-chat-item-details {
    flex: 1;
    min-width: 0;
  }
  .wa-chat-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
  }
  .wa-chat-info .name {
    font-size: 13px;
    font-weight: 600;
    color: #111;
  }
  .wa-chat-info .time {
    font-size: 10px;
    color: #777;
  }
  .wa-chat-item-details .last-msg {
    font-size: 11.5px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .wa-chat-main {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    flex: 1;
  }
  .wa-input-bar {
    padding: 8px 12px 12px; /* remove mobile home offset spacing */
  }

  /* Slide 4 & 5: Lists as Grids */
  .list-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
    width: 100%;
  }
  .list-cards li, .love-item {
    margin: 0 !important;
    padding: 16px 18px;
    height: 100%;
    box-sizing: border-box;
  }
  .app-slide[data-slide="love"] .list-cards {
    grid-template-columns: repeat(3, 1fr); /* 3 cards side-by-side */
  }

  /* Slide 6: Gift — single column until gift chosen, then split */
  .app-slide[data-slide="gift"] .slide-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: all 0.5s ease;
  }
  .app-slide[data-slide="gift"] .slide-inner.has-chosen {
    grid-template-columns: 1fr 1.25fr;
    max-width: 960px;
    margin: 0 auto;
  }
  .app-slide[data-slide="gift"] .slide-inner.has-chosen .gift-box .box-scene {
    width: 80px;
    height: 85px;
  }
  .gift-grid {
    margin-top: 16px;
    gap: 12px;
  }
  .gift-box .box-scene {
    width: 100px;
    height: 105px;
  }
  .gift-result {
    margin-top: 0;
    padding: 20px;
    border: 1px solid var(--blush);
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(45,31,42,0.06);
    border-radius: var(--r-lg);
  }
  .address-form {
    gap: 8px;
  }
  .address-form input, .address-form textarea {
    padding: 10px 12px;
  }
}