/* ============================================
   LEMON — Pregnancy Tracker
   Visual redesign 2026-05-14
   Design tokens: DESIGN_TOKENS.md
============================================ */

:root {
  /* ── Surfaces ──────────────────────────────── */
  --lemon-cream:    #FBF5EA;
  --lemon-cream-2:  #F5ECDA;
  --lemon-cream-3:  #EFE4CC;
  --lemon-card:     #FFFFFF;
  --lemon-paper:    #FFFCF4;

  /* ── Ink ───────────────────────────────────── */
  --lemon-ink:       #2A2218;
  --lemon-ink-soft:  #564B3D;
  --lemon-ink-mute:  #8A8071;
  --lemon-ink-faint: #C8BFAE;

  /* ── Hairlines ─────────────────────────────── */
  --lemon-hair:      rgba(42, 34, 24, 0.08);
  --lemon-hair-soft: rgba(42, 34, 24, 0.05);

  /* ── Accents ───────────────────────────────── */
  --lemon-rose:       #E8907E;
  --lemon-rose-deep:  #D4715D;
  --lemon-rose-soft:  #FCE0D6;

  --lemon-lavender:      #C7B6E0;
  --lemon-lavender-soft: #EFE6F8;

  --lemon-mint:      #9FCFB1;
  --lemon-mint-soft: #DAEDDF;

  --lemon-butter:      #F5D880;
  --lemon-butter-soft: #FAEFC8;

  --lemon-peach: #F5C3A1;

  /* ── Hero gradients ────────────────────────── */
  --lemon-hero-gradient:
    linear-gradient(135deg, #FCE4DC 0%, #F4DFE8 35%, #E8DCF0 65%, #D9EBE0 100%);
  --lemon-hero-gradient-milestone:
    linear-gradient(135deg, #FCE4DC 0%, #F5D5E0 30%, #E0CBF0 60%, #C9DCEC 100%);

  /* ── Typography ────────────────────────────── */
  --lemon-serif: 'Instrument Serif', Georgia, serif;
  --lemon-sans:  'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;

  /* ── Type scale ────────────────────────────── */
  --lemon-fs-display: 72px;
  --lemon-fs-h1:      48px;
  --lemon-fs-h2:      36px;
  --lemon-fs-h3:      24px;
  --lemon-fs-card-h:  20px;
  --lemon-fs-body:    16px;
  --lemon-fs-body-sm: 14px;
  --lemon-fs-meta:    13px;
  --lemon-fs-kicker:  11px;
  --lemon-fs-tiny:    10px;

  /* ── Spacing ───────────────────────────────── */
  --lemon-sp-1:  4px;
  --lemon-sp-2:  8px;
  --lemon-sp-3:  12px;
  --lemon-sp-4:  16px;
  --lemon-sp-5:  20px;
  --lemon-sp-6:  24px;
  --lemon-sp-8:  32px;
  --lemon-sp-10: 40px;
  --lemon-sp-12: 48px;
  --lemon-sp-16: 64px;

  /* ── Radii ─────────────────────────────────── */
  --lemon-r-sm:   10px;
  --lemon-r-md:   16px;
  --lemon-r-lg:   22px;
  --lemon-r-xl:   28px;
  --lemon-r-pill: 9999px;

  /* ── Shadows ───────────────────────────────── */
  --lemon-shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(42, 34, 24, 0.03);
  --lemon-shadow-card-hover:
    0 8px 24px rgba(42, 34, 24, 0.08);

  /* ── Layout ────────────────────────────────── */
  --nav-height:    72px;
  --topbar-height: 60px;

  /* ── Legacy aliases (preserve for JS compat) ── */
  --rose:        #E8907E;
  --rose-light:  #FCE0D6;
  --rose-mid:    #FCE0D6;
  --lavender:    #C7B6E0;
  --lavender-light: #EFE6F8;
  --lavender-mid:   #EFE6F8;
  --mint:        #9FCFB1;
  --mint-light:  #DAEDDF;
  --mint-mid:    #DAEDDF;
  --yellow:      #F5D880;
  --yellow-light:#FAEFC8;
  --yellow-mid:  #FAEFC8;
  --peach:       #F5C3A1;
  --peach-light: #FEF0E8;
  --text-dark:   #2A2218;
  --text-mid:    #564B3D;
  --text-soft:   #8A8071;
  --bg:          #FBF5EA;
  --white:       #FFFFFF;
  --border:      rgba(42, 34, 24, 0.08);
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   28px;
  --shadow-sm:   0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 2px rgba(42,34,24,0.03);
  --shadow-md:   0 4px 16px rgba(42,34,24,0.06), 0 1px 3px rgba(42,34,24,0.04);
  --shadow-lg:   0 8px 32px rgba(42,34,24,0.10), 0 2px 8px rgba(42,34,24,0.05);
}

/* ─────────────────────────────────────────────
   RESET + BASE
───────────────────────────────────────────── */

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

html, body {
  height: 100%;
  font-family: var(--lemon-sans);
  background: var(--lemon-cream);
  color: var(--lemon-ink);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

.hidden { display: none !important; }

/* ─────────────────────────────────────────────
   TYPOGRAPHY UTILITIES
───────────────────────────────────────────── */

.kicker {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lemon-rose-deep);
}

/* ─────────────────────────────────────────────
   CHIP COMPONENTS
───────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--lemon-r-pill);
  font-family: var(--lemon-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip-cream  { background: var(--lemon-cream-3);   color: var(--lemon-ink-soft); }
.chip-rose   { background: var(--lemon-rose-soft);  color: var(--lemon-rose-deep); }
.chip-mint   { background: var(--lemon-mint-soft);  color: #3F7E55; }
.chip-butter { background: var(--lemon-butter-soft);color: #8A6A1A; }
.chip-lav    { background: var(--lemon-lavender-soft); color: #6A4FA0; }

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */

.btn-primary,
.btn-rose,
.btn-secondary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lemon-sp-2);
  border: none;
  border-radius: var(--lemon-r-pill);
  font-family: var(--lemon-sans);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--lemon-ink);
  color: var(--lemon-cream);
  padding: 14px 22px;
  font-size: var(--lemon-fs-body-sm);
}

.btn-rose {
  background: var(--lemon-rose-deep);
  color: #FFFFFF;
  padding: 14px 22px;
  font-size: var(--lemon-fs-body-sm);
}

.btn-secondary {
  background: var(--lemon-cream);
  color: var(--lemon-ink);
  border: 1px solid var(--lemon-hair);
  padding: 14px 22px;
  font-size: var(--lemon-fs-body-sm);
}

.btn-ghost {
  background: transparent;
  color: var(--lemon-ink-soft);
  border: 1px solid var(--lemon-hair);
  padding: 14px 22px;
  font-size: var(--lemon-fs-body-sm);
}

.btn-danger {
  background: transparent;
  color: #B0463A;
  border: 1px solid rgba(176, 70, 58, 0.28);
  padding: 14px 22px;
  font-size: var(--lemon-fs-body-sm);
}

.btn-sm {
  padding: 10px 16px;
  font-size: 13px;
}

.btn-md {
  padding: 14px 22px;
  font-size: var(--lemon-fs-body-sm);
}

.btn-lg {
  padding: 16px 28px;
  font-size: 15px;
}

.btn-full { width: 100%; }

.btn-primary:hover,
.btn-rose:hover   { transform: translateY(-1px); opacity: 0.92; }
.btn-secondary:hover,
.btn-ghost:hover  { box-shadow: var(--lemon-shadow-card-hover); }
.btn-primary:active,
.btn-rose:active,
.btn-secondary:active,
.btn-ghost:active { transform: translateY(0); opacity: 1; }

/* ─────────────────────────────────────────────
   CARD
───────────────────────────────────────────── */

.card {
  background: var(--lemon-card);
  border-radius: var(--lemon-r-lg);
  box-shadow: var(--lemon-shadow-card);
  border: 1px solid var(--lemon-hair);
}

.card--interactive {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--lemon-shadow-card-hover);
}

/* ─────────────────────────────────────────────
   DOTTED DIVIDER
───────────────────────────────────────────── */

.dotted-divider {
  border: none;
  border-top: 1.5px dashed var(--lemon-hair);
  margin: var(--lemon-sp-5) 0;
}

/* ─────────────────────────────────────────────
   TOP BAR
───────────────────────────────────────────── */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  background: rgba(251, 245, 234, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lemon-hair-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--lemon-sp-5);
  z-index: 200;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--lemon-sp-2);
}

.app-logo {
  display: flex;
  align-items: center;
  font-size: 22px;
  line-height: 1;
}

.app-logo-svg {
  display: block;
  flex-shrink: 0;
}

.app-name,
.wordmark {
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--lemon-ink);
  letter-spacing: -0.01em;
}

.app-name em,
.wordmark em,
.setup-title em,
.hero-title em {
  font-style: italic;
}

/* ── Wordmark lemon-face 'o' ─────────────────── */
.wordmark-o {
  display: inline-block;
  vertical-align: -0.18em;
  line-height: 0;
}
.wordmark-o svg {
  height: 1.15em;
  width: auto;
}

/* Week pill in topbar */
.week-pill,
.week-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--lemon-sp-1);
  background: var(--lemon-rose-soft);
  color: var(--lemon-rose-deep);
  font-family: var(--lemon-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--lemon-r-pill);
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   PAGE LAYOUT
───────────────────────────────────────────── */

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.page {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  bottom: var(--nav-height);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.page-content {
  max-width: 460px;
  margin: 0 auto;
  padding: var(--lemon-sp-5) var(--lemon-sp-4) var(--lemon-sp-12);
}

.page-header {
  margin-bottom: var(--lemon-sp-5);
}

.page-kicker {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lemon-rose-deep);
  margin-bottom: var(--lemon-sp-1);
}

.page-heading {
  font-family: var(--lemon-serif);
  font-size: var(--lemon-fs-h2);
  font-weight: 400;
  color: var(--lemon-ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.page-heading em {
  font-style: italic;
  color: var(--lemon-rose-deep);
}

/* ─────────────────────────────────────────────
   HOME PAGE — HERO CARD
───────────────────────────────────────────── */

.hero-card {
  background: var(--lemon-hero-gradient);
  border-radius: var(--lemon-r-xl);
  padding: var(--lemon-sp-8) var(--lemon-sp-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lemon-sp-4);
  margin-bottom: var(--lemon-sp-4);
  min-height: auto;
  overflow: hidden;
  position: relative;
}

.hero-text-col {
  flex: 1.1;
  min-width: 0;
  width: 100%;
  text-align: center;
}

.hero-fruit-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  order: -1;
}

/* Hero character is the focal point: large and fluid (was intrinsic ~120px). */
.hero-fruit-col .fruit-char {
  width: clamp(150px, 38vw, 200px);
  height: auto;
}

/* Onboarding greeter: live preview of the week's fruit on the setup screen. */
.setup-fruit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lemon-sp-1);
  margin: var(--lemon-sp-1) 0 var(--lemon-sp-4);
}
.setup-fruit .fruit-char {
  width: 120px;
  height: auto;
}
.setup-fruit-caption {
  font-family: var(--lemon-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lemon-rose-deep);
  margin: 0;
}

/* Due-date countdown line in the hero. */
.hero-countdown {
  margin-top: var(--lemon-sp-3);
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--lemon-rose-deep);
}

/* "Share this fact" button on the fun-fact card. */
.fact-share-btn {
  margin-top: var(--lemon-sp-3);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--lemon-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lemon-rose-deep);
  cursor: pointer;
}
.fact-share-btn:hover { text-decoration: underline; }

/* "Baby has arrived" graduation share button (shown in the final weeks). */
.graduation-btn {
  width: 100%;
  margin-bottom: var(--lemon-sp-4);
}

/* "Make it move" animated-GIF button inside the share panel. */
.share-gif-btn {
  display: block;
  width: 100%;
  margin: 0 0 var(--lemon-sp-3);
  padding: 10px 16px;
  border: 1px solid var(--lemon-rose);
  border-radius: var(--lemon-r-pill);
  background: var(--lemon-rose-soft);
  color: var(--lemon-rose-deep);
  font-family: var(--lemon-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.share-gif-btn:disabled { opacity: 0.6; cursor: default; }

.hero-nickname {
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--lemon-rose);
  margin: 0 0 2px;
  min-height: 0;
}

.hero-kicker,
.hero-week {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lemon-rose-deep);
  margin-bottom: var(--lemon-sp-2);
}

.hero-display,
.hero-title {
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 400;
  color: var(--lemon-ink);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: var(--lemon-sp-3);
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lemon-sp-2);
  margin-top: var(--lemon-sp-2);
  justify-content: center;
}

.hero-size,
.hero-weight {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--lemon-r-pill);
  font-family: var(--lemon-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.hero-size   { background: var(--lemon-rose-soft);   color: var(--lemon-rose-deep); }
.hero-weight { background: var(--lemon-cream-3);     color: var(--lemon-ink-soft); }

.hero-fruit {
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-info {
  flex: 1;
  min-width: 0;
}

/* ─────────────────────────────────────────────
   HOME — JOURNAL CTA CARD
───────────────────────────────────────────── */

.journal-cta-card {
  background: var(--lemon-card);
  border-radius: var(--lemon-r-lg);
  border: 1px solid var(--lemon-hair);
  box-shadow: var(--lemon-shadow-card);
  padding: var(--lemon-sp-5) var(--lemon-sp-6);
  display: flex;
  align-items: center;
  gap: var(--lemon-sp-4);
  margin-bottom: var(--lemon-sp-4);
  flex-wrap: wrap;
}

.journal-cta-content {
  flex: 1;
  min-width: 160px;
}

.journal-cta-date {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-meta);
  color: var(--lemon-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--lemon-sp-1);
}

.journal-cta-heading {
  font-family: var(--lemon-serif);
  font-size: var(--lemon-fs-card-h);
  font-weight: 400;
  color: var(--lemon-ink);
  line-height: 1.2;
}

/* ─────────────────────────────────────────────
   HOME — BUTTON ROW
───────────────────────────────────────────── */

.home-btn-row {
  display: flex;
  gap: var(--lemon-sp-3);
  margin-bottom: var(--lemon-sp-4);
  flex-wrap: wrap;
}

.home-btn-row .btn-secondary,
.home-btn-row .btn-ghost {
  flex: 1;
  min-width: 120px;
}

/* ─────────────────────────────────────────────
   SHARE PROGRESS BUTTON (LEGACY ID SUPPORT)
───────────────────────────────────────────── */

.share-progress-btn,
#share-progress-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lemon-sp-2);
  background: var(--lemon-cream);
  color: var(--lemon-ink);
  border: 1px solid var(--lemon-hair);
  border-radius: var(--lemon-r-pill);
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.15s;
  padding: 14px 22px;
}

.share-progress-btn:hover,
#share-progress-btn:hover {
  box-shadow: var(--lemon-shadow-card-hover);
}

.share-progress-btn svg,
#share-progress-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   SECTION CARDS
───────────────────────────────────────────── */

.section-card {
  background: var(--lemon-card);
  border-radius: var(--lemon-r-lg);
  padding: var(--lemon-sp-5) var(--lemon-sp-6);
  margin-bottom: var(--lemon-sp-3);
  box-shadow: var(--lemon-shadow-card);
  border: 1px solid var(--lemon-hair);
}

.section-card--lav   { background: var(--lemon-lavender-soft); border-color: rgba(199,182,224,0.3); }
.section-card--mint  { background: var(--lemon-mint-soft);     border-color: rgba(159,207,177,0.3); }
.section-card--butter { background: var(--lemon-butter-soft);  border-color: rgba(245,216,128,0.4); }
.section-card--milestone {
  background: var(--lemon-rose-soft);
  border-color: rgba(212,113,93,0.2);
}

.section-card .chip {
  margin-bottom: var(--lemon-sp-3);
}

.section-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: var(--lemon-r-pill);
  margin-bottom: var(--lemon-sp-3);
}

.tag-milestone { background: var(--lemon-rose-soft);    color: var(--lemon-rose-deep); }
.tag-week      { background: var(--lemon-lavender-soft); color: #6A4FA0; }
.tag-dev       { background: var(--lemon-mint-soft);     color: #3F7E55; }
.tag-fun       { background: var(--lemon-butter-soft);   color: #8A6A1A; }

.section-text {
  font-size: var(--lemon-fs-body);
  color: var(--lemon-ink-soft);
  line-height: 1.65;
}

.dev-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--lemon-sp-2);
}

.dev-list li {
  font-size: var(--lemon-fs-body);
  color: var(--lemon-ink-soft);
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
}

.dev-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--lemon-mint);
  font-size: 10px;
  top: 5px;
}

/* Fun fact card tap target */
.fun-card {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.fun-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lemon-shadow-card-hover);
}
.fun-card:active { transform: translateY(0); }

/* ─────────────────────────────────────────────
   DISCLAIMER
───────────────────────────────────────────── */

.inline-disclaimer {
  font-size: 11px;
  color: var(--lemon-ink-mute);
  text-align: center;
  margin-top: var(--lemon-sp-2);
  margin-bottom: var(--lemon-sp-4);
  line-height: 1.5;
}

.inline-disclaimer a {
  color: var(--lemon-ink-mute);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────
   MOOD PICKER
───────────────────────────────────────────── */

.mood-picker-card,
.mood-picker-section {
  background: var(--lemon-card);
  border-radius: var(--lemon-r-lg);
  border: 1px solid var(--lemon-hair);
  box-shadow: var(--lemon-shadow-card);
  padding: var(--lemon-sp-5) var(--lemon-sp-3) var(--lemon-sp-4);
  margin-bottom: var(--lemon-sp-4);
  overflow: hidden;
}

.mood-picker-label {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-kicker);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lemon-ink-mute);
  margin-bottom: var(--lemon-sp-3);
  text-align: center;
}

.mood-row {
  display: flex;
  justify-content: space-between;
  gap: var(--lemon-sp-1);
}

.mood-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--lemon-r-md);
  padding: var(--lemon-sp-2) var(--lemon-sp-1) var(--lemon-sp-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}

.mood-btn:hover {
  background: var(--lemon-cream-2);
  transform: scale(1.04);
}

.mood-btn.selected {
  background: linear-gradient(135deg, var(--lemon-rose-soft), var(--lemon-lavender-soft));
  border-color: var(--lemon-rose);
  transform: scale(1.08);
}

.mood-mini-fruit {
  width: 48px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mood-mini-fruit .fruit-char {
  width: 48px !important;
  height: 58px !important;
}

.mood-btn-label {
  font-family: var(--lemon-sans);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--lemon-ink-mute);
  letter-spacing: 0.02em;
}

.mood-btn.selected .mood-btn-label {
  color: var(--lemon-rose-deep);
  font-weight: 700;
}

.mood-badge {
  font-size: 14px;
  line-height: 1;
}

/* ─────────────────────────────────────────────
   JOURNAL PAGE — DIARY PAGE DESIGN
───────────────────────────────────────────── */

.diary-page {
  background: var(--lemon-paper);
  border-radius: var(--lemon-r-lg);
  border: 1px solid var(--lemon-hair);
  box-shadow: var(--lemon-shadow-card);
  overflow: hidden;
  margin-bottom: var(--lemon-sp-5);
}

.diary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--lemon-sp-5) var(--lemon-sp-6) var(--lemon-sp-4);
  border-bottom: 1px solid var(--lemon-hair-soft);
}

.diary-header-left {
  flex: 1;
}

.diary-date,
.journal-date-label {
  display: block;
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--lemon-ink);
  line-height: 1.3;
  margin-bottom: 2px;
}

.diary-meta {
  display: block;
  font-family: var(--lemon-sans);
  font-size: 12px;
  color: var(--lemon-ink-mute);
  letter-spacing: 0.04em;
}

.diary-header-fruit {
  width: 48px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: var(--lemon-sp-3);
}

.diary-ruled {
  position: relative;
  padding: var(--lemon-sp-4) var(--lemon-sp-6);
}

.diary-ruled::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent,
    transparent 31px,
    var(--lemon-hair-soft) 31px,
    var(--lemon-hair-soft) 32px
  );
  pointer-events: none;
  opacity: 0.6;
}

.diary-textarea,
.journal-textarea {
  width: 100%;
  min-height: 140px;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--lemon-serif);
  font-size: 17px;
  color: var(--lemon-ink);
  line-height: 32px;
  background: transparent;
  position: relative;
  z-index: 1;
  padding: var(--lemon-sp-4) var(--lemon-sp-6);
}

.diary-textarea::placeholder,
.journal-textarea::placeholder {
  color: var(--lemon-ink-faint);
  font-style: italic;
}

.diary-footer,
.journal-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--lemon-sp-3) var(--lemon-sp-6) var(--lemon-sp-4);
  border-top: 1px dashed var(--lemon-hair);
  gap: var(--lemon-sp-3);
}

.diary-autosave,
.journal-date-label-meta {
  font-size: 12px;
  color: var(--lemon-ink-mute);
  font-family: var(--lemon-sans);
}

.diary-footer-actions {
  display: flex;
  gap: var(--lemon-sp-2);
}

/* Legacy journal compose wrapper (keeps layout working) */
.journal-compose {
  background: var(--lemon-paper);
  border-radius: var(--lemon-r-lg);
  border: 1px solid var(--lemon-hair);
  box-shadow: var(--lemon-shadow-card);
  margin-bottom: var(--lemon-sp-5);
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   JOURNAL ENTRIES LIST
───────────────────────────────────────────── */

.journal-entries-list {
  display: flex;
  flex-direction: column;
  gap: var(--lemon-sp-3);
}

.journal-entry {
  background: var(--lemon-paper);
  border-radius: var(--lemon-r-md);
  padding: var(--lemon-sp-4) var(--lemon-sp-5);
  box-shadow: var(--lemon-shadow-card);
  border: 1px solid var(--lemon-hair);
}

.journal-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--lemon-sp-3);
}

.journal-entry-date {
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: var(--lemon-fs-meta);
  color: var(--lemon-ink-mute);
}

.journal-entry-week {
  font-family: var(--lemon-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--lemon-lavender-soft);
  color: #6A4FA0;
  padding: 3px 10px;
  border-radius: var(--lemon-r-pill);
}

.journal-entry-text {
  font-family: var(--lemon-serif);
  font-size: 16px;
  color: var(--lemon-ink-soft);
  line-height: 1.65;
  white-space: pre-wrap;
}

.journal-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--lemon-ink-faint);
  font-size: 13px;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.15s;
  margin-left: var(--lemon-sp-2);
}

.journal-delete-btn:hover { color: #B0463A; }

.journal-delete-btn--confirm {
  color: #B0463A;
  font-size: 11px;
  font-weight: 600;
  width: auto;
  padding: 0 6px;
}

.empty-state {
  text-align: center;
  padding: var(--lemon-sp-10) var(--lemon-sp-5);
  color: var(--lemon-ink-mute);
  font-size: var(--lemon-fs-body);
  line-height: 1.7;
}

.empty-state-icon {
  font-size: 40px;
  margin-bottom: var(--lemon-sp-3);
}

/* ─────────────────────────────────────────────
   LOOK BACK PAGE — Album view
───────────────────────────────────────────── */

/* ── Album header ─────────────────────────────── */
.lb-album-header {
  margin-bottom: var(--lemon-sp-4);
}

.lb-album-title {
  font-family: var(--lemon-serif);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 400;
  color: var(--lemon-ink);
  margin: var(--lemon-sp-1) 0 var(--lemon-sp-2);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.lb-album-title em {
  font-style: italic;
  color: var(--lemon-rose-deep);
}

.lb-album-subtitle {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-meta);
  color: var(--lemon-ink-mute);
}

/* ── Stats bar ────────────────────────────────── */
.lb-stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--lemon-sp-3);
  flex-wrap: wrap;
  background: var(--lemon-cream-2);
  border: 1px solid var(--lemon-hair);
  border-radius: var(--lemon-r-lg);
  padding: 18px 20px;
  margin-bottom: 28px;
}

.lb-stat {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.lb-stat-big {
  font-family: var(--lemon-serif);
  font-size: 26px;
  font-style: italic;
  color: var(--lemon-ink);
  line-height: 1;
  margin-bottom: 4px;
}

.lb-stat-label {
  font-family: var(--lemon-sans);
  font-size: 9.5px;
  color: var(--lemon-ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Chapters ─────────────────────────────────── */
.lb-chapter {
  margin-bottom: 28px;
}

.lb-chapter-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: var(--lemon-sp-3);
  flex-wrap: nowrap;
}

.lb-chapter-title {
  font-family: var(--lemon-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--lemon-ink);
  margin: 0;
  white-space: nowrap;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.lb-chapter-title em {
  font-style: italic;
}

.lb-chapter-rule {
  flex: 1;
  height: 1px;
  border-top: 1px dashed var(--lemon-hair);
  min-width: 8px;
  align-self: center;
}

.lb-chapter-chip {
  font-family: var(--lemon-sans);
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.lb-chip-rose { background: var(--lemon-rose-soft);      color: var(--lemon-rose-deep); }
.lb-chip-lav  { background: var(--lemon-lavender-soft);  color: #7B5EA7; }
.lb-chip-mint { background: var(--lemon-mint-soft);      color: #3A7D55; }

/* ── Tile grid ────────────────────────────────── */
.lb-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 8px;
}

/* ── Week tile ────────────────────────────────── */
.lb-tile {
  position: relative;
  border-radius: 12px;
  padding: 8px 4px 6px;
  background: var(--lemon-card);
  border: 1px solid var(--lemon-hair-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  transition: transform 0.12s, background 0.12s, border-color 0.12s;
  box-shadow: var(--lemon-shadow-card);
}

.lb-tile:hover:not(.lb-tile--future) {
  background: var(--lemon-butter-soft);
  transform: translateY(-2px);
  box-shadow: var(--lemon-shadow-card-hover);
}

.lb-tile--current {
  background: linear-gradient(180deg, #FCE4DC 0%, #F4DFE8 100%);
  border: 1.5px solid rgba(212, 113, 93, 0.5);
}

.lb-tile--future {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
  filter: grayscale(0.5);
  box-shadow: none;
}

.lb-tile-fruit {
  width: 40px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.lb-tile-fruit .fruit-char {
  width: 40px !important;
  height: 48px !important;
}

.lb-tile-placeholder {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lemon-cream-3);
}

.lb-tile-num {
  font-family: var(--lemon-sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--lemon-ink-mute);
  letter-spacing: 0.04em;
}

.lb-tile--current .lb-tile-num {
  color: var(--lemon-rose-deep);
  font-weight: 700;
}

.lb-tile-now {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--lemon-rose-deep);
  color: #fff;
  font-family: var(--lemon-sans);
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Look Back detail */
.back-btn {
  background: none;
  border: none;
  color: var(--lemon-ink-mute);
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-body-sm);
  font-weight: 500;
  cursor: pointer;
  padding: var(--lemon-sp-2) 0;
  margin-bottom: var(--lemon-sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--lemon-sp-1);
  transition: color 0.15s;
}
.back-btn:hover { color: var(--lemon-ink); }

.lookback-detail {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lb-journal-section {
  margin-top: var(--lemon-sp-3);
  margin-bottom: var(--lemon-sp-4);
}

.lb-journal-title {
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: var(--lemon-fs-card-h);
  font-weight: 400;
  color: var(--lemon-ink);
  margin-bottom: var(--lemon-sp-3);
}

/* Look back detail hero chip container */
.lb-chips {
  display: flex;
  gap: var(--lemon-sp-2);
  margin-top: var(--lemon-sp-2);
}

/* ─────────────────────────────────────────────
   SETTINGS PAGE
───────────────────────────────────────────── */

.settings-card {
  background: var(--lemon-card);
  border-radius: var(--lemon-r-lg);
  padding: var(--lemon-sp-6) var(--lemon-sp-5);
  margin-bottom: var(--lemon-sp-4);
  box-shadow: var(--lemon-shadow-card);
  border: 1px solid var(--lemon-hair);
}

.settings-label {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-card-h);
  font-weight: 600;
  color: var(--lemon-ink);
  margin-bottom: var(--lemon-sp-1);
}

.settings-hint {
  font-size: var(--lemon-fs-meta);
  color: var(--lemon-ink-mute);
  margin-bottom: var(--lemon-sp-4);
  line-height: 1.6;
}

.settings-danger-zone {
  border-color: rgba(176, 70, 58, 0.2);
  background: #FFF5F4;
}

.btn-feedback {
  display: block;
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--lemon-r-pill);
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-body-sm);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: var(--lemon-sp-3);
  border: none;
}

.btn-feedback:hover { opacity: 0.8; }

.btn-feedback-bug {
  background: var(--lemon-rose-soft);
  color: var(--lemon-rose-deep);
}

.btn-feedback-feature {
  background: transparent;
  border: 1px solid var(--lemon-hair);
  color: var(--lemon-ink);
}

/* ─────────────────────────────────────────────
   WEEK SELECTOR (setup + settings)
───────────────────────────────────────────── */

.week-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lemon-sp-5);
  margin: var(--lemon-sp-4) 0;
}

.week-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--lemon-hair);
  background: var(--lemon-cream-2);
  color: var(--lemon-ink);
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.week-btn:hover  { background: var(--lemon-cream-3); transform: scale(1.06); }
.week-btn:active { transform: scale(0.95); }

.week-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
}

.week-display span:first-child {
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: 44px;
  line-height: 1;
  color: var(--lemon-ink);
}

.week-label {
  font-family: var(--lemon-sans);
  font-size: 11px;
  color: var(--lemon-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: var(--lemon-sp-1);
}

/* ─────────────────────────────────────────────
   BOTTOM NAV
───────────────────────────────────────────── */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(251, 245, 234, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--lemon-hair-soft);
  display: flex;
  align-items: stretch;
  z-index: 200;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--lemon-sp-2) var(--lemon-sp-1);
  transition: all 0.15s;
  position: relative;
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lemon-ink-mute);
  transition: color 0.15s;
}

.nav-icon svg {
  width: 20px;
  height: 20px;
}

.nav-label {
  font-family: var(--lemon-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--lemon-ink-mute);
  transition: color 0.15s;
  letter-spacing: 0.04em;
}

a.nav-btn { text-decoration: none; color: inherit; }

.nav-btn.active .nav-icon { color: var(--lemon-rose-deep); }
.nav-btn.active .nav-label {
  color: var(--lemon-rose-deep);
  font-weight: 700;
}

.nav-btn.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--lemon-rose-deep);
  border-radius: 0 0 2px 2px;
}

/* ─────────────────────────────────────────────
   TOAST
───────────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--lemon-ink);
  color: var(--lemon-cream);
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-body-sm);
  font-weight: 500;
  padding: 12px 22px;
  border-radius: var(--lemon-r-pill);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  opacity: 0;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─────────────────────────────────────────────
   SETUP SCREEN
───────────────────────────────────────────── */

#setup-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lemon-hero-gradient);
  padding: var(--lemon-sp-6);
}

.setup-container {
  width: 100%;
  max-width: 440px;
  text-align: center;
}

.setup-logo {
  font-size: 56px;
  margin-bottom: var(--lemon-sp-3);
}

.setup-title {
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: 48px;
  color: var(--lemon-ink);
  margin-bottom: var(--lemon-sp-2);
  letter-spacing: -0.02em;
}

.setup-subtitle {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-body);
  color: var(--lemon-ink-soft);
  margin-bottom: var(--lemon-sp-8);
  line-height: 1.6;
}

.setup-card {
  background: var(--lemon-card);
  border-radius: var(--lemon-r-xl);
  padding: var(--lemon-sp-8) var(--lemon-sp-6);
  box-shadow: var(--shadow-lg);
}

.setup-label {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-body-sm);
  font-weight: 600;
  color: var(--lemon-ink-soft);
  margin-bottom: var(--lemon-sp-5);
  text-align: left;
}

.setup-hint {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-meta);
  color: var(--lemon-ink-mute);
  margin-top: var(--lemon-sp-3);
  margin-bottom: var(--lemon-sp-5);
  line-height: 1.6;
  text-align: left;
}

.setup-disclaimer {
  font-family: var(--lemon-sans);
  font-size: 11px;
  color: var(--lemon-ink-mute);
  text-align: center;
  margin-top: var(--lemon-sp-4);
  line-height: 1.5;
}

/* Setup mode tabs */
.setup-mode-tabs {
  display: flex;
  background: var(--lemon-cream-2);
  border-radius: var(--lemon-r-md);
  padding: 4px;
  margin-bottom: var(--lemon-sp-6);
  gap: 4px;
}

.mode-tab {
  flex: 1;
  padding: 10px var(--lemon-sp-2);
  border: none;
  border-radius: var(--lemon-r-sm);
  background: transparent;
  font-family: var(--lemon-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--lemon-ink-mute);
  cursor: pointer;
  transition: all 0.15s;
}

.mode-tab.active {
  background: var(--lemon-card);
  color: var(--lemon-ink);
  font-weight: 600;
  box-shadow: var(--lemon-shadow-card);
}

/* Date input */
.date-input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 4px;
}

.date-display {
  display: block;
  width: 100%;
  padding: 14px var(--lemon-sp-4);
  border: 1px solid var(--lemon-hair);
  border-radius: var(--lemon-r-md);
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--lemon-ink);
  background: var(--lemon-card);
  text-align: center;
  box-sizing: border-box;
  transition: border-color 0.15s;
  cursor: pointer;
}

.date-input-hidden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  box-sizing: border-box;
  border: none;
  background: none;
}

.date-input {
  width: 100%;
  padding: 14px var(--lemon-sp-4);
  border: 1px solid var(--lemon-hair);
  border-radius: var(--lemon-r-md);
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--lemon-ink);
  background: var(--lemon-card);
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: 4px;
  text-align: center;
  box-sizing: border-box;
}

.date-input:focus { border-color: var(--lemon-rose); }

.setup-nickname-row {
  margin-top: var(--lemon-sp-5);
  margin-bottom: 4px;
}

.setup-optional {
  font-size: 13px;
  color: var(--lemon-muted);
  font-style: normal;
  font-family: var(--lemon-sans);
}

.nickname-input {
  width: 100%;
  padding: 14px var(--lemon-sp-4);
  border: 1px solid var(--lemon-hair);
  border-radius: var(--lemon-r-md);
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--lemon-ink);
  background: var(--lemon-card);
  outline: none;
  transition: border-color 0.15s;
  text-align: center;
  box-sizing: border-box;
}

.nickname-input:focus { border-color: var(--lemon-rose); }

/* ─────────────────────────────────────────────
   EMAIL GATE MODAL
───────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 34, 24, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 500;
}

@media (min-width: 600px) {
  .modal-overlay { align-items: center; }
}

.modal-card {
  position: relative;
  background: var(--lemon-card);
  border-radius: var(--lemon-r-xl) var(--lemon-r-xl) 0 0;
  padding: var(--lemon-sp-8) var(--lemon-sp-6) var(--lemon-sp-10);
  width: 100%;
  max-width: 480px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.28s ease;
}

@media (min-width: 600px) {
  .modal-card { border-radius: var(--lemon-r-xl); }
}

@keyframes slideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-close-btn {
  position: absolute;
  top: var(--lemon-sp-4);
  right: var(--lemon-sp-4);
  background: var(--lemon-cream-2);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 13px;
  color: var(--lemon-ink-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.modal-close-btn:hover { background: var(--lemon-cream-3); }

.modal-icon {
  font-size: 48px;
  margin-bottom: var(--lemon-sp-3);
}

.modal-title {
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--lemon-ink);
  margin-bottom: var(--lemon-sp-2);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.modal-body {
  font-size: var(--lemon-fs-body);
  color: var(--lemon-ink-soft);
  line-height: 1.6;
  margin-bottom: var(--lemon-sp-6);
}

.email-input {
  width: 100%;
  padding: 14px var(--lemon-sp-4);
  border: 1px solid var(--lemon-hair);
  border-radius: var(--lemon-r-md);
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-body);
  color: var(--lemon-ink);
  background: var(--lemon-cream-2);
  outline: none;
  transition: border-color 0.15s;
  margin-bottom: var(--lemon-sp-3);
  text-align: center;
}

.email-input:focus {
  border-color: var(--lemon-rose);
  background: var(--lemon-card);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--lemon-sp-3);
  font-size: var(--lemon-fs-body-sm);
  color: var(--lemon-ink-soft);
  margin-bottom: var(--lemon-sp-5);
  text-align: left;
  cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--lemon-rose-deep);
  cursor: pointer;
}

.gate-note {
  font-size: 12px;
  color: var(--lemon-ink-mute);
  margin-top: var(--lemon-sp-3);
  line-height: 1.5;
}

.gate-privacy {
  font-size: 11px;
  color: var(--lemon-ink-mute);
  margin-top: var(--lemon-sp-2);
  line-height: 1.5;
  text-align: center;
}

.gate-privacy a {
  color: var(--lemon-ink-mute);
  text-decoration: underline;
}

.gate-skip-btn {
  background: none;
  border: none;
  font-family: var(--lemon-sans);
  font-size: 13px;
  color: var(--lemon-ink-mute);
  cursor: pointer;
  margin-top: var(--lemon-sp-4);
  padding: var(--lemon-sp-2);
  display: block;
  width: 100%;
  text-align: center;
  transition: color 0.15s;
}

.gate-skip-btn:hover { color: var(--lemon-ink-soft); }

.gate-sent-icon { font-size: 48px; margin-bottom: var(--lemon-sp-4); }
.gate-sent-text {
  font-size: var(--lemon-fs-body);
  color: var(--lemon-ink-soft);
  line-height: 1.7;
}

/* ─────────────────────────────────────────────
   SHARE PANEL
───────────────────────────────────────────── */

.share-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.share-panel-overlay.hidden { display: none; }

.share-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 34, 24, 0.45);
  backdrop-filter: blur(2px);
}

.share-panel-card {
  position: relative;
  background: var(--lemon-card);
  border-radius: var(--lemon-r-xl) var(--lemon-r-xl) 0 0;
  padding: var(--lemon-sp-6) var(--lemon-sp-5) var(--lemon-sp-10);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  animation: slideUp 0.25s ease;
}

.share-panel-close {
  position: absolute;
  top: var(--lemon-sp-4);
  right: var(--lemon-sp-4);
  background: var(--lemon-cream-2);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 13px;
  color: var(--lemon-ink-mute);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-panel-title {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-body);
  font-weight: 600;
  color: var(--lemon-ink);
  text-align: center;
  margin-bottom: var(--lemon-sp-4);
}

.share-panel-preview {
  display: flex;
  justify-content: center;
  margin-bottom: var(--lemon-sp-5);
}

.share-panel-preview img {
  width: 160px;
  height: 160px;
  border-radius: var(--lemon-r-md);
  object-fit: cover;
  box-shadow: var(--shadow-md);
}

.share-panel-actions {
  display: flex;
  gap: var(--lemon-sp-3);
  margin-bottom: var(--lemon-sp-3);
}

.share-social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lemon-sp-2);
  padding: 14px var(--lemon-sp-3);
  border: none;
  border-radius: var(--lemon-r-md);
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-body-sm);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.share-social-btn:hover  { opacity: 0.88; }
.share-social-btn:active { transform: scale(0.97); }
.share-social-btn svg    { width: 20px; height: 20px; flex-shrink: 0; }

.share-ig-btn {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
}

.share-x-btn { background: #000; color: #fff; }

.share-panel-secondary {
  display: flex;
  gap: var(--lemon-sp-3);
}

.share-secondary-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lemon-sp-1);
  padding: 11px var(--lemon-sp-2);
  background: transparent;
  border: 1px solid var(--lemon-hair);
  border-radius: var(--lemon-r-sm);
  font-family: var(--lemon-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--lemon-ink-soft);
  cursor: pointer;
  transition: background 0.15s;
}

.share-secondary-btn:hover { background: var(--lemon-cream-2); }
.share-secondary-btn svg   { width: 15px; height: 15px; flex-shrink: 0; }

/* ─────────────────────────────────────────────
   AUTH BANNER
───────────────────────────────────────────── */

.auth-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--lemon-rose) 0%, var(--lemon-lavender) 100%);
  color: #fff;
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-body-sm);
  font-weight: 500;
  padding: 14px var(--lemon-sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 600;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

.auth-banner button {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.7;
  padding: 4px var(--lemon-sp-2);
}

.auth-banner button:hover { opacity: 1; }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */

.app-footer {
  text-align: center;
  font-family: var(--lemon-sans);
  font-size: 12px;
  color: var(--lemon-ink-mute);
  margin-top: var(--lemon-sp-6);
  padding: var(--lemon-sp-3) 0 var(--lemon-sp-2);
}

.app-footer a {
  color: var(--lemon-ink-mute);
  text-decoration: none;
}

.app-footer a:hover { color: var(--lemon-ink-soft); }

.footer-divider {
  margin: 0 var(--lemon-sp-2);
  color: var(--lemon-ink-faint);
}

.footer-disclaimer {
  margin-top: var(--lemon-sp-1);
  font-size: 11px;
  color: var(--lemon-ink-faint);
  line-height: 1.5;
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */

@media (min-width: 600px) {
  .page-content { padding: var(--lemon-sp-8) var(--lemon-sp-6) var(--lemon-sp-12); }
  .hero-card { min-height: 280px; padding: var(--lemon-sp-10) var(--lemon-sp-8); }
  .hero-display, .hero-title { font-size: 56px; }
}

@media (min-width: 900px) {
  .topbar    { padding: 0 var(--lemon-sp-10); }
  .bottom-nav {
    left: 50%;
    transform: translateX(-50%);
    max-width: 480px;
    border-radius: var(--lemon-r-xl) var(--lemon-r-xl) 0 0;
    border: 1px solid var(--lemon-hair-soft);
    border-bottom: none;
  }
}

@media (max-width: 480px) {
  .hero-card { flex-direction: column; align-items: center; min-height: auto; gap: var(--lemon-sp-4); }
  .hero-text-col { width: 100%; }
  .hero-fruit-col { width: 100%; justify-content: center; order: -1; }
  .journal-cta-card { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────
   LOOKBACK DETAIL HERO (reuses hero-card styles)
───────────────────────────────────────────── */

#lookback-detail .hero-card {
  margin-bottom: var(--lemon-sp-4);
}

/* ─────────────────────────────────────────────
   SCREEN CLASS (for setup)
───────────────────────────────────────────── */

.screen {
  min-height: 100vh;
  width: 100%;
}

/* ─────────────────────────────────────────────
   LOOKBACK WEEK-GRID (legacy class kept for JS compat)
───────────────────────────────────────────── */

.lookback-week-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--lemon-sp-2);
  margin-bottom: var(--lemon-sp-6);
}

.lb-week-chip {
  aspect-ratio: 1;
  border-radius: var(--lemon-r-sm);
  border: 1px solid var(--lemon-hair);
  background: var(--lemon-card);
  font-size: 13px;
  font-weight: 600;
  color: var(--lemon-ink-soft);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--lemon-shadow-card);
}

.lb-week-chip:hover          { border-color: var(--lemon-rose); background: var(--lemon-rose-soft); }
.lb-week-chip.is-current     { background: var(--lemon-rose-soft); border-color: var(--lemon-rose-deep); }
.lb-week-chip.is-future      { opacity: 0.32; cursor: not-allowed; }
.lb-week-chip.is-future:hover{ background: var(--lemon-card); border-color: var(--lemon-hair); transform: none; }

/* ─────────────────────────────────────────────
   ════════════════════════════════════════════
   PRESERVED ANIMATION SYSTEM
   25 fruit-char keyframes + arm animations
   DO NOT MODIFY OR DELETE
   ════════════════════════════════════════════
───────────────────────────────────────────── */

/* Base: idle bounce loop (always playing) */
.fruit-char {
  animation: fruit-idle 2s ease-in-out infinite;
  cursor: pointer;
  display: block;
}

/* One-shot body animations */
.fruit-char.fruit-wiggle       { animation: fruit-wiggle       0.65s ease-in-out; }
.fruit-char.fruit-hiccup       { animation: fruit-hiccup       0.85s ease-in-out; }
.fruit-char.fruit-strut        { animation: fruit-strut        1.1s  ease-in-out; }
.fruit-char.fruit-spin         { animation: fruit-spin         0.7s  ease-in-out; }
.fruit-char.fruit-bounce-happy { animation: fruit-bounce-happy 1s    ease-in-out; }
.fruit-char.fruit-hop-off      { animation: fruit-hop-off      2.4s  ease-in     forwards; }
.fruit-char.fruit-hop-in       { animation: fruit-hop-in       2.2s  ease-out    forwards; }
.fruit-char.fruit-nod          { animation: fruit-nod          0.8s  ease-in-out; }
.fruit-char.fruit-shiver       { animation: fruit-shiver       0.6s  ease-in-out; }
.fruit-char.fruit-peek         { animation: fruit-peek         1.0s  ease-in-out; }
.fruit-char.fruit-tippy        { animation: fruit-tippy        1.0s  ease-in-out; }
.fruit-char.fruit-inflate      { animation: fruit-inflate      1.3s  ease-in-out; }
.fruit-char.fruit-stomp        { animation: fruit-stomp        0.75s ease-in-out; }
.fruit-char.fruit-sway         { animation: fruit-sway         1.6s  ease-in-out; }
.fruit-char.fruit-sneeze       { animation: fruit-sneeze       0.65s ease-in-out; }
.fruit-char.fruit-dizzy        { animation: fruit-dizzy        1.1s  ease-in-out; }
.fruit-char.fruit-pop          { animation: fruit-pop          0.55s ease-in-out; }
.fruit-char.fruit-shimmy       { animation: fruit-shimmy       0.65s ease-in-out; }
.fruit-char.fruit-telescope    { animation: fruit-telescope    1.0s  ease-in-out; }
.fruit-char.fruit-flop         { animation: fruit-flop         1.3s  ease-in-out; }
.fruit-char.fruit-skip         { animation: fruit-skip         0.9s  ease-in-out; }
.fruit-char.fruit-twitch       { animation: fruit-twitch       0.45s ease-in-out; }
.fruit-char.fruit-bow          { animation: fruit-bow          1.4s  ease-in-out; }

/* Arm animations */
.fruit-arm-r.arm-wave      { animation: arm-wave      0.85s ease-in-out 2; }
.fruit-arm-r.arm-high-five { animation: arm-high-five 0.6s  ease-in-out forwards; }
.fruit-arm-r.arm-salute    { animation: arm-salute    0.95s ease-in-out; }
.fruit-arm-r.arm-point     { animation: arm-point     1.1s  ease-in-out; }
.fruit-arm-r.arm-flex      { animation: arm-flex      1.2s  ease-in-out; }

@keyframes fruit-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes fruit-wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-12deg); }
  40%      { transform: rotate(12deg); }
  60%      { transform: rotate(-7deg); }
  80%      { transform: rotate(7deg); }
}

@keyframes fruit-hiccup {
  0%   { transform: translateY(0) scale(1); }
  15%  { transform: translateY(-22px) scale(0.95, 1.08); }
  30%  { transform: translateY(0) scale(1.07, 0.92); }
  45%  { transform: translateY(-10px) scale(0.97, 1.05); }
  60%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes fruit-strut {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); }
  20%  { transform: translateY(-6px) translateX(-8px) rotate(-4deg); }
  40%  { transform: translateY(0) translateX(0) rotate(0deg); }
  60%  { transform: translateY(-6px) translateX(8px) rotate(4deg); }
  80%  { transform: translateY(0) translateX(0) rotate(0deg); }
  100% { transform: translateY(0) translateX(0) rotate(0deg); }
}

@keyframes fruit-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes fruit-bounce-happy {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-22px) scale(0.92, 1.1); }
  50%  { transform: translateY(0) scale(1.1, 0.9); }
  68%  { transform: translateY(-12px) scale(0.95, 1.06); }
  84%  { transform: translateY(0) scale(1.04, 0.97); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes fruit-hop-off {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
  25%  { transform: translateX(-15px) translateY(-20px) rotate(-10deg); opacity: 1; }
  100% { transform: translateX(-240px) translateY(0) rotate(-25deg); opacity: 0; }
}

@keyframes fruit-hop-in {
  0%   { transform: translateX(240px) translateY(0); opacity: 0; }
  40%  { transform: translateX(10px) translateY(-18px); opacity: 1; }
  65%  { transform: translateX(-4px) translateY(0); }
  100% { transform: translateX(0) translateY(0); opacity: 1; }
}

@keyframes arm-wave {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(35deg); }
  70%      { transform: rotate(-12deg); }
}

@keyframes arm-high-five {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-45deg) translateY(-10px); }
  60%      { transform: rotate(-45deg) translateY(-10px); }
  80%      { transform: rotate(0deg); }
}

@keyframes fruit-nod {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%      { transform: rotate(18deg) translateY(5px); }
  50%      { transform: rotate(0deg) translateY(0); }
  70%      { transform: rotate(10deg) translateY(3px); }
  85%      { transform: rotate(0deg); }
}

@keyframes fruit-shiver {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  10%      { transform: translateX(-5px) rotate(-4deg); }
  20%      { transform: translateX(5px) rotate(4deg); }
  30%      { transform: translateX(-4px) rotate(-3deg); }
  40%      { transform: translateX(4px) rotate(3deg); }
  50%      { transform: translateX(-3px) rotate(-2deg); }
  60%      { transform: translateX(3px) rotate(2deg); }
  70%      { transform: translateX(-2px) rotate(-1deg); }
  80%      { transform: translateX(2px) rotate(1deg); }
  90%      { transform: translateX(-1px); }
}

@keyframes fruit-peek {
  0%, 100% { transform: translateY(0) scale(1); }
  25%      { transform: translateY(16px) scale(1.05, 0.85); }
  55%      { transform: translateY(16px) scale(1.05, 0.85); }
  75%      { transform: translateY(-5px) scale(0.97, 1.04); }
  90%      { transform: translateY(0) scale(1); }
}

@keyframes fruit-tippy {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  25%      { transform: rotate(25deg) translateX(8px); }
  55%      { transform: rotate(25deg) translateX(8px); }
  80%      { transform: rotate(-6deg) translateX(-2px); }
}

@keyframes fruit-inflate {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.28, 1.22); }
  65%      { transform: scale(1.28, 1.22); }
  85%      { transform: scale(0.95, 0.97); }
}

@keyframes fruit-stomp {
  0%   { transform: translateY(0) scale(1); }
  15%  { transform: translateY(-10px) scale(0.95, 1.08); }
  30%  { transform: translateY(14px) scale(1.2, 0.78); }
  48%  { transform: translateY(-6px) scale(0.92, 1.1); }
  65%  { transform: translateY(4px) scale(1.08, 0.92); }
  80%  { transform: translateY(-2px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes fruit-sway {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-12deg); }
  75%      { transform: rotate(12deg); }
}

@keyframes fruit-sneeze {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  15%      { transform: rotate(15deg) translateY(8px); }
  30%      { transform: rotate(-10deg) translateY(-10px); }
  50%      { transform: rotate(5deg) translateY(4px); }
  65%      { transform: rotate(-3deg) translateY(-2px); }
  80%      { transform: rotate(0deg) translateY(0); }
}

@keyframes fruit-dizzy {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  12%      { transform: rotate(10deg) translateX(6px); }
  24%      { transform: rotate(-12deg) translateX(-7px); }
  36%      { transform: rotate(8deg) translateX(5px); }
  48%      { transform: rotate(-9deg) translateX(-4px); }
  60%      { transform: rotate(5deg) translateX(3px); }
  72%      { transform: rotate(-4deg) translateX(-2px); }
  84%      { transform: rotate(2deg) translateX(1px); }
}

@keyframes fruit-pop {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.4, 1.35); }
  45%  { transform: scale(0.88, 0.92); }
  65%  { transform: scale(1.1, 1.08); }
  82%  { transform: scale(0.97, 0.98); }
  100% { transform: scale(1); }
}

@keyframes fruit-shimmy {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  12%      { transform: translateX(-7px) rotate(-4deg); }
  25%      { transform: translateX(7px) rotate(4deg); }
  37%      { transform: translateX(-6px) rotate(-3deg); }
  50%      { transform: translateX(6px) rotate(3deg); }
  62%      { transform: translateX(-4px) rotate(-2deg); }
  75%      { transform: translateX(4px) rotate(2deg); }
  87%      { transform: translateX(-2px) rotate(-1deg); }
}

@keyframes fruit-telescope {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  20%      { transform: scaleY(0.65) scaleX(1.3); }
  45%      { transform: scaleY(1.45) scaleX(0.8); }
  65%      { transform: scaleY(0.92) scaleX(1.05); }
  82%      { transform: scaleY(1.04) scaleX(0.98); }
}

@keyframes fruit-flop {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  28%      { transform: rotate(38deg) translateX(14px); }
  55%      { transform: rotate(38deg) translateX(14px); }
  75%      { transform: rotate(-10deg) translateX(-4px); }
  88%      { transform: rotate(4deg) translateX(1px); }
}

@keyframes fruit-skip {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  20%      { transform: translateX(-12px) translateY(-14px) rotate(-6deg); }
  40%      { transform: translateX(0) translateY(0) rotate(0deg); }
  60%      { transform: translateX(12px) translateY(-14px) rotate(6deg); }
  80%      { transform: translateX(0) translateY(0) rotate(0deg); }
}

@keyframes fruit-twitch {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  15%      { transform: rotate(-18deg) translateX(-6px) translateY(-3px); }
  28%      { transform: rotate(12deg) translateX(4px) translateY(1px); }
  40%      { transform: rotate(-6deg) translateX(-2px); }
  52%      { transform: rotate(3deg) translateX(1px); }
  65%      { transform: rotate(0deg) translateX(0); }
}

@keyframes fruit-bow {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  28%      { transform: rotate(22deg) translateY(7px); }
  62%      { transform: rotate(22deg) translateY(7px); }
  82%      { transform: rotate(-4deg) translateY(-1px); }
}

@keyframes arm-salute {
  0%, 100% { transform: rotate(0deg); }
  18%      { transform: rotate(-75deg) translateY(-8px); }
  68%      { transform: rotate(-75deg) translateY(-8px); }
  85%      { transform: rotate(5deg); }
}

@keyframes arm-point {
  0%, 100% { transform: rotate(0deg); }
  22%      { transform: rotate(-55deg) translateX(4px); }
  70%      { transform: rotate(-55deg) translateX(4px); }
  88%      { transform: rotate(0deg); }
}

@keyframes arm-flex {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-110deg) scaleX(1.1); }
  65%      { transform: rotate(-110deg) scaleX(1.1); }
  85%      { transform: rotate(0deg); }
}

/* ─── New Body Animations — Gentle / Idle ─── */
.fruit-char.fruit-bob        { animation: fruit-bob        1.0s ease-in-out; }
.fruit-char.fruit-float      { animation: fruit-float      1.4s ease-in-out; }
.fruit-char.fruit-breathe    { animation: fruit-breathe    1.2s ease-in-out; }
.fruit-char.fruit-drift      { animation: fruit-drift      1.6s ease-in-out; }
.fruit-char.fruit-wobble     { animation: fruit-wobble     0.8s ease-in-out; }

@keyframes fruit-bob {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-12px); }
  70%      { transform: translateY(-6px); }
}

@keyframes fruit-float {
  0%, 100% { transform: translateY(0) translateX(0); }
  30%      { transform: translateY(-10px) translateX(6px); }
  65%      { transform: translateY(-8px) translateX(-5px); }
  85%      { transform: translateY(-4px) translateX(2px); }
}

@keyframes fruit-breathe {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.09, 1.07); }
  65%      { transform: scale(0.97, 0.99); }
  85%      { transform: scale(1.03, 1.02); }
}

@keyframes fruit-drift {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(14px) rotate(3deg); }
  60%      { transform: translateX(-14px) rotate(-3deg); }
  80%      { transform: translateX(5px) rotate(1deg); }
}

@keyframes fruit-wobble {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  15%      { transform: rotate(-20deg) translateX(-6px); }
  35%      { transform: rotate(18deg) translateX(6px); }
  55%      { transform: rotate(-12deg) translateX(-4px); }
  75%      { transform: rotate(10deg) translateX(3px); }
  90%      { transform: rotate(-4deg) translateX(-1px); }
}

/* ─── New Body Animations — Happy / Energy ─── */
.fruit-char.fruit-cheer       { animation: fruit-cheer       0.9s ease-in-out; }
.fruit-char.fruit-dance       { animation: fruit-dance        1.2s ease-in-out; }
.fruit-char.fruit-tumble      { animation: fruit-tumble       0.7s ease-in-out; }
.fruit-char.fruit-cartwheel   { animation: fruit-cartwheel    0.8s ease-in-out; }
.fruit-char.fruit-little-spin { animation: fruit-little-spin  0.4s ease-in-out; }
.fruit-char.fruit-boing       { animation: fruit-boing        1.0s ease-in-out; }
.fruit-char.fruit-dive        { animation: fruit-dive         1.0s ease-in-out; }
.fruit-char.fruit-moonwalk    { animation: fruit-moonwalk     1.6s ease-in-out; }

@keyframes fruit-cheer {
  0%   { transform: translateY(0) scale(1); }
  20%  { transform: translateY(-28px) scale(0.9, 1.14); }
  42%  { transform: translateY(5px) scale(1.16, 0.83); }
  58%  { transform: translateY(-14px) scale(0.94, 1.09); }
  72%  { transform: translateY(2px) scale(1.07, 0.94); }
  86%  { transform: translateY(-5px) scale(0.98, 1.02); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes fruit-dance {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  18%      { transform: translateX(-11px) translateY(-9px) rotate(-9deg); }
  35%      { transform: translateX(0) translateY(-5px) rotate(0deg); }
  52%      { transform: translateX(11px) translateY(-9px) rotate(9deg); }
  68%      { transform: translateX(0) translateY(-4px) rotate(0deg); }
  82%      { transform: translateX(-6px) translateY(-3px) rotate(-4deg); }
}

@keyframes fruit-tumble {
  0%   { transform: rotate(0deg) scale(1); }
  33%  { transform: rotate(130deg) scale(1.08) translateY(-6px); }
  66%  { transform: rotate(260deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes fruit-cartwheel {
  0%   { transform: rotate(0deg) translateX(0); }
  50%  { transform: rotate(180deg) translateX(10px) translateY(-4px); }
  100% { transform: rotate(360deg) translateX(0); }
}

@keyframes fruit-little-spin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes fruit-boing {
  0%   { transform: translateY(0) scale(1); }
  18%  { transform: translateY(-28px) scale(0.88, 1.16); }
  36%  { transform: translateY(7px) scale(1.22, 0.78); }
  52%  { transform: translateY(-16px) scale(0.92, 1.11); }
  66%  { transform: translateY(3px) scale(1.11, 0.91); }
  78%  { transform: translateY(-8px) scale(0.96, 1.05); }
  88%  { transform: translateY(1px) scale(1.04, 0.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes fruit-dive {
  0%, 100% { transform: rotate(0deg) translateY(0) translateX(0); }
  22%      { transform: rotate(-32deg) translateY(-10px) translateX(-6px); }
  48%      { transform: rotate(52deg) translateY(10px) translateX(9px); }
  68%      { transform: rotate(-10deg) translateY(-4px) translateX(-2px); }
  84%      { transform: rotate(5deg) translateY(2px); }
}

@keyframes fruit-moonwalk {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  18%      { transform: translateX(-15px) translateY(0) rotate(-4deg); }
  36%      { transform: translateX(-30px) translateY(0) rotate(-4deg); }
  38%      { transform: translateX(-30px) translateY(-5px) rotate(0deg); }
  55%      { transform: translateX(-15px) translateY(0) rotate(4deg); }
  72%      { transform: translateX(0) translateY(0) rotate(4deg); }
  74%      { transform: translateX(0) translateY(-5px) rotate(0deg); }
}

/* ─── New Body Animations — Emotion-specific ─── */
.fruit-char.fruit-belly-laugh { animation: fruit-belly-laugh 0.8s ease-in-out; }
.fruit-char.fruit-sigh        { animation: fruit-sigh        1.5s ease-in-out; }
.fruit-char.fruit-tiptoe      { animation: fruit-tiptoe      1.1s ease-in-out; }
.fruit-char.fruit-gasp        { animation: fruit-gasp        0.9s ease-in-out; }
.fruit-char.fruit-shrug       { animation: fruit-shrug       0.9s ease-in-out; }

@keyframes fruit-belly-laugh {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
  14%      { transform: translateY(-5px) scale(1.09, 0.93) rotate(-5deg); }
  28%      { transform: translateY(2px) scale(0.95, 1.07) rotate(5deg); }
  42%      { transform: translateY(-7px) scale(1.11, 0.91) rotate(-6deg); }
  57%      { transform: translateY(3px) scale(0.94, 1.08) rotate(6deg); }
  72%      { transform: translateY(-4px) scale(1.06, 0.95) rotate(-3deg); }
  86%      { transform: translateY(1px) scale(0.99, 1.02) rotate(2deg); }
}

@keyframes fruit-sigh {
  0%, 100% { transform: scale(1) translateY(0); }
  18%      { transform: scaleX(1.11) scaleY(1.07) translateY(-5px); }
  42%      { transform: scaleX(1.11) scaleY(1.07) translateY(-5px); }
  70%      { transform: scaleX(0.96) scaleY(0.97) translateY(3px); }
  88%      { transform: scale(1) translateY(0); }
}

@keyframes fruit-tiptoe {
  0%, 100% { transform: translateY(0) scaleY(1) rotate(0deg); }
  20%      { transform: translateY(-9px) scaleY(1.06) rotate(-3deg); }
  40%      { transform: translateY(-7px) scaleY(1.05) rotate(2deg); }
  60%      { transform: translateY(-9px) scaleY(1.06) rotate(-2deg); }
  80%      { transform: translateY(-4px) scaleY(1.02) rotate(1deg); }
}

@keyframes fruit-gasp {
  0%, 100% { transform: scale(1) translateY(0); }
  15%      { transform: scale(1.24, 1.20) translateY(-9px); }
  32%      { transform: scale(1.24, 1.20) translateY(-9px); }
  56%      { transform: scale(0.93, 0.96) translateY(4px); }
  76%      { transform: scale(1.06, 1.03) translateY(-2px); }
}

@keyframes fruit-shrug {
  0%, 100% { transform: rotate(0deg) translateY(0) scaleX(1); }
  25%      { transform: rotate(-7deg) translateY(-9px) scaleX(1.12); }
  50%      { transform: rotate(7deg) translateY(-9px) scaleX(1.12); }
  75%      { transform: rotate(-2deg) translateY(-3px) scaleX(1.05); }
}

/* ─── Both-Arm Animations (body-level — whole SVG moves) ─── */
.fruit-char.fruit-wave-both { animation: fruit-wave-both 1.1s ease-in-out; }
.fruit-char.fruit-clap      { animation: fruit-clap      0.7s ease-in-out; }
.fruit-char.fruit-arms-up   { animation: fruit-arms-up   1.0s ease-in-out; }
.fruit-char.fruit-arm-hug   { animation: fruit-arm-hug   1.2s ease-in-out; }

@keyframes fruit-wave-both {
  0%, 100% { transform: translateY(0) scaleX(1); }
  20%      { transform: translateY(-7px) scaleX(1.14); }
  45%      { transform: translateY(-12px) scaleX(1.10); }
  65%      { transform: translateY(-8px) scaleX(1.13); }
  82%      { transform: translateY(-3px) scaleX(1.05); }
}

@keyframes fruit-clap {
  0%, 100% { transform: scaleX(1) translateY(0); }
  22%      { transform: scaleX(0.87) translateY(-3px); }
  44%      { transform: scaleX(1.14) translateY(-5px); }
  66%      { transform: scaleX(0.91) translateY(-3px); }
  84%      { transform: scaleX(1.05) translateY(-1px); }
}

@keyframes fruit-arms-up {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
  30%      { transform: translateY(-13px) scaleY(1.11) scaleX(0.91); }
  58%      { transform: translateY(-16px) scaleY(1.13) scaleX(0.89); }
  78%      { transform: translateY(-7px) scaleY(1.06) scaleX(0.96); }
}

@keyframes fruit-arm-hug {
  0%, 100% { transform: scaleX(1) scaleY(1) rotate(0deg); }
  30%      { transform: scaleX(0.82) scaleY(1.13) rotate(-4deg); }
  58%      { transform: scaleX(0.82) scaleY(1.13) rotate(4deg); }
  80%      { transform: scaleX(0.93) scaleY(1.06) rotate(-1deg); }
}

/* ─── Leg Animations (body-level — whole SVG simulates leg motion) ─── */
.fruit-char.fruit-march        { animation: fruit-march        0.8s ease-in-out; }
.fruit-char.fruit-kick         { animation: fruit-kick         0.9s ease-in-out; }
.fruit-char.fruit-tap-foot     { animation: fruit-tap-foot     0.6s ease-in-out; }
.fruit-char.fruit-run-in-place { animation: fruit-run-in-place 0.5s ease-in-out; }
.fruit-char.fruit-wiggle-toes  { animation: fruit-wiggle-toes  0.8s ease-in-out; }

@keyframes fruit-march {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-7px) rotate(-5deg); }
  50%      { transform: translateY(2px) rotate(0deg); }
  75%      { transform: translateY(-7px) rotate(5deg); }
}

@keyframes fruit-kick {
  0%, 100% { transform: translateY(0) rotate(0deg) translateX(0); }
  22%      { transform: translateY(-6px) rotate(-12deg) translateX(-4px); }
  45%      { transform: translateY(5px) rotate(22deg) translateX(8px); }
  65%      { transform: translateY(-3px) rotate(-5deg) translateX(-2px); }
  82%      { transform: translateY(2px) rotate(5deg); }
}

@keyframes fruit-tap-foot {
  0%, 100% { transform: translateY(0) scaleY(1); }
  40%      { transform: translateY(5px) scaleY(0.95); }
  70%      { transform: translateY(1px) scaleY(0.99); }
}

@keyframes fruit-run-in-place {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-11px) rotate(-6deg) scaleY(1.06); }
  50%      { transform: translateY(3px) scaleY(0.94); }
  75%      { transform: translateY(-11px) rotate(6deg) scaleY(1.06); }
}

@keyframes fruit-wiggle-toes {
  0%, 100% { transform: scaleX(1) translateY(0); }
  18%      { transform: scaleX(1.06) translateY(3px); }
  36%      { transform: scaleX(0.96) translateY(0); }
  55%      { transform: scaleX(1.05) translateY(3px); }
  72%      { transform: scaleX(0.98) translateY(0); }
  88%      { transform: scaleX(1.03) translateY(1px); }
}

/* ─── New Move Sets: Yoga, Hop One Foot, Jump Side, Hop Back-Forth, Pirouette ─── */
.fruit-char.fruit-yoga           { animation: fruit-yoga           2.2s ease-in-out; }
.fruit-char.fruit-hop-one-foot   { animation: fruit-hop-one-foot   1.6s ease-in-out; }
.fruit-char.fruit-jump-side      { animation: fruit-jump-side      1.5s ease-in-out; }
.fruit-char.fruit-hop-back-forth { animation: fruit-hop-back-forth 1.5s ease-in-out; }
.fruit-char.fruit-pirouette      { animation: fruit-pirouette      1.8s ease-in-out; }

/* yoga: warrior lean, stretch tall, hold the pose, return */
@keyframes fruit-yoga {
  0%, 100% { transform: rotate(0deg) scaleY(1) translateY(0); }
  18%      { transform: rotate(-11deg) scaleY(1.10) translateY(-5px) translateX(-3px); }
  42%      { transform: rotate(-14deg) scaleY(1.15) translateY(-8px) translateX(-4px); }
  62%      { transform: rotate(-14deg) scaleY(1.15) translateY(-8px) translateX(-4px); }
  78%      { transform: rotate(4deg) scaleY(0.97) translateY(2px); }
  90%      { transform: rotate(-2deg) scaleY(1.02) translateY(-1px); }
}

/* hop-one-foot: body tilts to planted side, 3 hops with squash landings */
@keyframes fruit-hop-one-foot {
  0%, 100% { transform: translateY(0) rotate(0deg) scaleY(1); }
  10%      { transform: translateY(-15px) rotate(-9deg) scaleY(1.06); }
  20%      { transform: translateY(4px)  rotate(-6deg) scaleY(0.93); }
  33%      { transform: translateY(-13px) rotate(-8deg) scaleY(1.05); }
  44%      { transform: translateY(3px)  rotate(-5deg) scaleY(0.94); }
  57%      { transform: translateY(-11px) rotate(-7deg) scaleY(1.04); }
  68%      { transform: translateY(2px)  rotate(-4deg) scaleY(0.96); }
  80%      { transform: translateY(-5px) rotate(-3deg) scaleY(1.02); }
  91%      { transform: translateY(1px)  rotate(-1deg) scaleY(0.99); }
}

/* jump-side: hop left with squash land, hop right with squash land, settle */
@keyframes fruit-jump-side {
  0%, 100% { transform: translateX(0)    translateY(0)   scaleX(1)    scaleY(1); }
  12%      { transform: translateX(-16px) translateY(-14px) scaleX(0.92) scaleY(1.10); }
  23%      { transform: translateX(-20px) translateY(4px)   scaleX(1.14) scaleY(0.86); }
  35%      { transform: translateX(-16px) translateY(0)    scaleX(1)    scaleY(1); }
  47%      { transform: translateX(16px)  translateY(-14px) scaleX(0.92) scaleY(1.10); }
  58%      { transform: translateX(20px)  translateY(4px)   scaleX(1.14) scaleY(0.86); }
  70%      { transform: translateX(16px)  translateY(0)    scaleX(1)    scaleY(1); }
  82%      { transform: translateX(4px)   translateY(-5px)  scaleX(0.97) scaleY(1.04); }
  92%      { transform: translateX(0)    translateY(1px)   scaleX(1.02) scaleY(0.99); }
}

/* hop-back-forth: alternates forward stomp and back lift, feet implied by tilt */
@keyframes fruit-hop-back-forth {
  0%, 100% { transform: translateY(0)    scaleY(1)    scaleX(1)    rotate(0deg); }
  12%      { transform: translateY(-14px) scaleY(1.08) scaleX(0.93) rotate(-4deg); }
  22%      { transform: translateY(4px)   scaleY(0.88) scaleX(1.14) rotate(-3deg); }
  35%      { transform: translateY(-12px) scaleY(1.07) scaleX(0.94) rotate(4deg); }
  47%      { transform: translateY(4px)   scaleY(0.89) scaleX(1.13) rotate(3deg); }
  60%      { transform: translateY(-9px)  scaleY(1.05) scaleX(0.96) rotate(-3deg); }
  72%      { transform: translateY(2px)   scaleY(0.94) scaleX(1.07) rotate(-2deg); }
  84%      { transform: translateY(-4px)  scaleY(1.02) scaleX(0.99) rotate(1deg); }
  93%      { transform: translateY(1px)   scaleY(0.99) scaleX(1.01) rotate(0deg); }
}

/* pirouette: windup lean, fast 1.5-spin rise, overshoot and settle */
@keyframes fruit-pirouette {
  0%   { transform: rotate(0deg)   scale(1)    translateY(0); }
  10%  { transform: rotate(-20deg) scale(0.94) translateY(0); }
  40%  { transform: rotate(210deg) scale(1.12) translateY(-8px); }
  68%  { transform: rotate(390deg) scale(1.10) translateY(-5px); }
  82%  { transform: rotate(345deg) scale(1.02) translateY(-1px); }
  92%  { transform: rotate(362deg) scale(1.01) translateY(0); }
  100% { transform: rotate(360deg) scale(1)    translateY(0); }
}

/* ═══════════════════════════════════════════════
   PHASE 3 — BEHAVIORAL LAYER STYLES
═══════════════════════════════════════════════ */

/* ─── Toggle Switch ──────────────────────────── */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lemon-sp-4);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--lemon-hair);
  border-radius: 28px;
  cursor: pointer;
  transition: background 200ms;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: var(--lemon-white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 200ms;
}

.toggle-switch input:checked + .toggle-slider { background: var(--lemon-rose-deep); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ─── Streak Indicator ───────────────────────── */
.streak-indicator {
  display: flex;
  align-items: center;
  gap: var(--lemon-sp-2);
  padding: var(--lemon-sp-2) var(--lemon-sp-3);
  margin-bottom: var(--lemon-sp-4);
}

.streak-leaf { font-size: 18px; line-height: 1; transition: filter 300ms; }
.streak-leaf--active { filter: drop-shadow(0 0 4px rgba(123,184,127,0.6)); }

.streak-text {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-sm);
  color: var(--lemon-ink-soft);
}

/* ─── Milestone Overlay ──────────────────────── */
.milestone-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: milestone-fade-in 300ms ease forwards;
}

.milestone-overlay.hidden { display: none; }

.milestone-overlay.milestone-fade-out {
  animation: milestone-fade-out 300ms ease forwards;
}

@keyframes milestone-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes milestone-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.milestone-overlay-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--lemon-sp-8) var(--lemon-sp-6);
  text-align: center;
  max-width: 380px;
  width: 100%;
}

.milestone-fruit-wrap {
  width: 160px;
  height: 160px;
  margin-bottom: var(--lemon-sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: milestone-fruit-enter 500ms cubic-bezier(0.34,1.56,0.64,1) 200ms both;
}

@keyframes milestone-fruit-enter {
  from { transform: translateY(40px) scale(0.6); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.milestone-title {
  font-family: var(--lemon-serif);
  font-size: clamp(28px, 7vw, 40px);
  color: var(--lemon-ink);
  margin-bottom: var(--lemon-sp-3);
  letter-spacing: -0.02em;
  animation: milestone-text-enter 400ms ease 500ms both;
}

.milestone-subtitle {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-body);
  color: var(--lemon-ink-soft);
  margin-bottom: var(--lemon-sp-2);
  animation: milestone-text-enter 400ms ease 650ms both;
}

.milestone-callout {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-sm);
  color: var(--lemon-ink-xsoft);
  margin-bottom: var(--lemon-sp-6);
  animation: milestone-text-enter 400ms ease 800ms both;
}

@keyframes milestone-text-enter {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ─── Confetti ───────────────────────────────── */
.milestone-confetti-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  animation: confetti-fall linear both;
}

@keyframes confetti-fall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ─── Done-State Overlay ─────────────────────── */
.done-state-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(251,245,234,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: done-fade-in 200ms ease forwards;
}

.done-state-overlay.hidden { display: none; }

.done-state-overlay.done-state-fade-out {
  animation: done-fade-out 400ms ease forwards;
}

@keyframes done-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes done-fade-out { from { opacity: 1; } to { opacity: 0; } }

.done-state-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--lemon-sp-8) var(--lemon-sp-6);
}

.done-state-fruit {
  width: 120px;
  height: 120px;
  margin-bottom: var(--lemon-sp-6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.done-state-title {
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--lemon-ink);
  margin-bottom: var(--lemon-sp-2);
  letter-spacing: -0.01em;
}

.done-state-subtitle {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-sm);
  color: var(--lemon-ink-xsoft);
}

/* ─── Week Advance Afterglow Card ───────────────── */
.week-afterglow {
  position: fixed;
  bottom: calc(var(--nav-height) + 12px);
  left: 12px;
  right: 12px;
  background: var(--lemon-card);
  border-radius: var(--lemon-r-xl);
  box-shadow: 0 8px 40px rgba(42, 34, 24, 0.18), 0 2px 8px rgba(42, 34, 24, 0.08);
  z-index: 130;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease;
  pointer-events: none;
}
.week-afterglow.hidden { display: none; }
.week-afterglow.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.week-afterglow-inner { padding: 20px 20px 16px; }
.week-afterglow-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.week-afterglow-fruit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.week-afterglow-kicker {
  font-family: var(--lemon-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lemon-rose-deep);
  margin-bottom: 2px;
}
.week-afterglow-name {
  font-family: var(--lemon-serif);
  font-size: 26px;
  font-style: italic;
  color: var(--lemon-ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.week-afterglow-stats {
  font-family: var(--lemon-sans);
  font-size: 13px;
  color: var(--lemon-ink-mute);
}
.week-afterglow-teaser {
  font-family: var(--lemon-sans);
  font-size: 14px;
  color: var(--lemon-ink-soft);
  line-height: 1.55;
  margin-bottom: 14px;
  border-left: 2px solid var(--lemon-rose-soft);
  padding-left: 10px;
}
.week-afterglow-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── Notification Card ──────────────────────── */
.notif-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 34, 24, 0.22);
  z-index: 119;
}
.notif-backdrop.hidden { display: none !important; }

.notif-card {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--lemon-sp-8));
  max-width: 480px;
  z-index: 120;
  background: var(--lemon-white);
  border: 1px solid var(--lemon-hair);
  border-radius: var(--lemon-r-xl);
  box-shadow: var(--lemon-shadow-card-hover);
  padding: var(--lemon-sp-5);
  animation: notif-card-enter 300ms cubic-bezier(0.34,1.56,0.64,1) forwards;
}

.notif-card.hidden { display: none; }

@keyframes notif-card-enter {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.notif-card-title {
  font-family: var(--lemon-sans);
  font-weight: 600;
  font-size: var(--lemon-fs-body);
  color: var(--lemon-ink);
  margin-bottom: var(--lemon-sp-1);
}

.notif-card-sub {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-sm);
  color: var(--lemon-ink-soft);
  margin-bottom: var(--lemon-sp-4);
  line-height: 1.5;
}

.notif-card-actions { display: flex; gap: var(--lemon-sp-3); }

/* ─── PWA Banner ─────────────────────────────── */
.pwa-banner {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--lemon-sp-8));
  max-width: 480px;
  z-index: 110;
  background: var(--lemon-ink);
  border-radius: var(--lemon-r-xl);
  padding: var(--lemon-sp-4) var(--lemon-sp-5);
  display: flex;
  align-items: center;
  gap: var(--lemon-sp-4);
  box-shadow: var(--lemon-shadow-card-hover);
  animation: notif-card-enter 300ms ease forwards;
}

.pwa-banner.hidden { display: none; }

.pwa-banner-text {
  font-family: var(--lemon-sans);
  font-size: var(--lemon-fs-sm);
  color: var(--lemon-cream);
  flex: 1;
  line-height: 1.4;
}

.pwa-banner-actions { display: flex; gap: var(--lemon-sp-2); flex-shrink: 0; }

/* ─── Look Back Insight Card ─────────────────── */
.lb-insight-card {
  background: linear-gradient(135deg, var(--lemon-butter-soft), var(--lemon-mint-soft));
  border: 1px solid rgba(245,216,128,0.3);
  border-radius: var(--lemon-r-lg);
  padding: var(--lemon-sp-4) var(--lemon-sp-5);
  margin-bottom: var(--lemon-sp-5);
  font-family: var(--lemon-serif);
  font-style: italic;
  font-size: var(--lemon-fs-body);
  color: var(--lemon-ink);
  line-height: 1.6;
}

/* ─── Trimester Summary (chapter footer) ────────── */
.lb-trimester-summary {
  font-family: var(--lemon-sans);
  font-size: 12px;
  color: var(--lemon-ink-mute);
  text-align: center;
  padding: 8px 12px 4px;
  letter-spacing: 0.02em;
}

/* ─── Trimester Summary Card in LB strip ─────── */
.lb-trimester-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 80px;
  background: var(--lemon-rose-soft);
  border: 2px solid var(--lemon-rose-mid);
  border-radius: var(--lemon-r-lg);
  padding: var(--lemon-sp-2);
  text-align: center;
  flex-shrink: 0;
}

.lb-trimester-label {
  font-family: var(--lemon-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lemon-rose-deep);
}

/* ─── Mood micro-interaction ─────────────────── */
.mood-btn { transition: transform 120ms cubic-bezier(0.34,1.56,0.64,1), opacity 120ms; }
.mood-btn.mood-dimmed { opacity: 0.4; }

@keyframes mood-tap-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.mood-btn.mood-tapped { animation: mood-tap-pop 120ms ease; }

/* ─── Save button ripple ─────────────────────── */
@keyframes btn-ripple {
  from { box-shadow: 0 0 0 0 rgba(212,113,93,0.4); }
  to   { box-shadow: 0 0 0 10px rgba(212,113,93,0); }
}

.btn-ripple { animation: btn-ripple 150ms ease forwards; }

/* ─── Journal thinking (nod on save) ─────────── */
@keyframes fruit-thinking {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  20%       { transform: rotate(-7deg) translateY(-4px); }
  40%       { transform: rotate(2deg) translateY(-1px); }
  60%       { transform: rotate(-5deg) translateY(-3px); }
  80%       { transform: rotate(2deg) translateY(0); }
}

.fruit-char.fruit-thinking,
.mood-mini-fruit.fruit-thinking { animation: fruit-thinking 750ms ease; transform-origin: center bottom; }

/* ─── Settings tap row ───────────────────────── */
.settings-card-tap { cursor: pointer; transition: background 0.15s; }
.settings-card-tap:hover { background: var(--lemon-cream); }
.settings-card-tap:active { background: var(--lemon-cream-2); }

.settings-tap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-tap-row .settings-hint { margin-bottom: 0; }

.settings-chevron {
  font-size: 24px;
  color: var(--lemon-ink-faint);
  line-height: 1;
}

/* ─── Theme sub-screen ───────────────────────── */
.sub-screen {
  position: fixed;
  inset: 0;
  background: var(--lemon-cream);
  z-index: 400;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sub-screen:not(.hidden) { transform: translateX(0); }
.sub-screen.hidden { transform: translateX(100%); pointer-events: none; }

.sub-screen-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--lemon-cream);
  border-bottom: 1px solid var(--lemon-hair);
  flex-shrink: 0;
}

.sub-screen-back {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--lemon-ink);
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: background 0.15s;
}
.sub-screen-back:hover { background: var(--lemon-cream-2); }

.sub-screen-title {
  font-family: var(--lemon-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--lemon-ink);
}

.sub-screen-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px 40px;
}

/* ─── Theme grid ─────────────────────────────── */
.theme-section-label {
  font-family: var(--lemon-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--lemon-ink-mute);
  text-transform: uppercase;
  margin: 0 4px 12px;
}

.theme-card {
  background: var(--lemon-card);
  border-radius: 18px;
  border: 2px solid var(--lemon-hair);
  padding: 20px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  position: relative;
  overflow: hidden;
}
.theme-card:active { transform: scale(0.98); }

.theme-card.active {
  border-color: var(--lemon-rose);
  box-shadow: 0 0 0 3px var(--lemon-rose-soft);
}

.theme-card.locked {
  opacity: 0.9;
}

.theme-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.theme-card-info { flex: 1; }

.theme-card-name {
  font-family: var(--lemon-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--lemon-ink);
  margin-bottom: 3px;
}

.theme-card-tagline {
  font-size: 13px;
  color: var(--lemon-ink-mute);
  line-height: 1.4;
}

.theme-card-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--lemon-butter);
  color: var(--lemon-ink-soft);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: 8px;
  white-space: nowrap;
}

.theme-card-previews {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.theme-preview-char {
  width: 72px;
  height: 86px;
  background: var(--lemon-cream);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.theme-preview-char svg {
  width: 60px;
  height: 72px;
  transform: scale(0.5);
  transform-origin: center center;
}

.theme-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.theme-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lemon-rose-deep);
  background: var(--lemon-rose-soft);
  padding: 5px 12px;
  border-radius: 999px;
}

.theme-price-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--lemon-ink-soft);
}

.theme-card-btn {
  font-family: var(--lemon-sans);
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.theme-card-btn:active { opacity: 0.75; }

.theme-card-btn.btn-apply {
  background: var(--lemon-ink);
  color: #fff;
}

.theme-card-btn.btn-buy {
  background: var(--lemon-rose);
  color: #fff;
}

.theme-card-btn.btn-current {
  background: var(--lemon-rose-soft);
  color: var(--lemon-rose-deep);
  cursor: default;
}

/* ─── Theme detail modal (bottom sheet) ─────── */
.modal-sheet {
  position: relative;
  background: var(--lemon-card);
  border-radius: var(--lemon-r-xl) var(--lemon-r-xl) 0 0;
  padding: 32px 24px 48px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.28s ease;
}

@media (min-width: 600px) {
  .modal-sheet { border-radius: var(--lemon-r-xl); max-height: 80vh; }
}

.theme-detail-emoji {
  font-size: 36px;
  margin-bottom: 8px;
  display: block;
  text-align: center;
}

.theme-detail-name {
  font-family: var(--lemon-serif);
  font-size: 28px;
  font-style: italic;
  color: var(--lemon-ink);
  text-align: center;
  margin-bottom: 4px;
}

.theme-detail-tagline {
  font-size: 14px;
  color: var(--lemon-ink-mute);
  text-align: center;
  margin-bottom: 24px;
}

.theme-detail-previews {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}

.theme-detail-char {
  width: 120px;
  height: 144px;
  background: var(--lemon-cream);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.theme-detail-desc {
  font-size: 14px;
  color: var(--lemon-ink-soft);
  line-height: 1.6;
  text-align: center;
  margin-bottom: 28px;
}

.theme-detail-price {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--lemon-ink);
  margin-bottom: 4px;
}

.theme-detail-price-note {
  text-align: center;
  font-size: 12px;
  color: var(--lemon-ink-mute);
  margin-bottom: 20px;
}

.theme-detail-buy-btn {
  width: 100%;
  font-family: var(--lemon-sans);
  font-size: 16px;
  font-weight: 700;
  background: var(--lemon-rose);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.theme-detail-buy-btn:active { opacity: 0.8; }
.theme-detail-buy-btn:disabled {
  background: var(--lemon-cream-3);
  color: var(--lemon-ink-mute);
  cursor: not-allowed;
}

.theme-detail-coming-soon {
  text-align: center;
  font-size: 12px;
  color: var(--lemon-ink-mute);
  margin-top: 10px;
}