/* ══════════════════════════════════════════════════════════════
   GENNXT — Design System 2.0
   Fonts: Cormorant Garamond (headings) + Inter (body)
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg: #f6f0e4;
  --surface: #fffdf8;
  --surface-2: #f3ead8;
  --line: #decfb1;
  --text: #3d2718;
  --text-soft: #7d6656;
  --primary: #a9621c;
  --primary-dark: #874d14;
  --green: #5f8b4c;
  --green-dark: #43703a;
  --gold: #d2b06a;
  --danger: #c84d3c;
  --shadow: 0 14px 35px rgba(84, 55, 24, 0.08);
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(circle at top, #fbf7ef 0%, var(--bg) 50%, #efe6d5 100%);
  color: var(--text);
  line-height: 1.55;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.25), transparent 20%),
    radial-gradient(circle at 80% 0%, rgba(255,255,255,0.18), transparent 18%);
}
h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", serif;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
}
p { margin: 0; color: var(--text-soft); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.topbar, .hero, .stepper, .workspace {
  width: min(1380px, calc(100% - 32px));
  margin-inline: auto;
}

/* ── Top bar ─────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 14px;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand-mark {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: linear-gradient(180deg, #f5e6bf, #ecd294);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.brand-name { font-weight: 700; font-size: 1.02rem; }
.brand-tag { color: var(--text-soft); font-size: 0.82rem; }
.topnav {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center;
  padding: 8px 12px; background: rgba(139,77,34,0.05); border: 1px solid rgba(139,77,34,0.10);
  border-radius: 999px;
}
.topnav-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topnav-label {
  font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-soft); padding: 0 2px 0 4px;
}
.topnav-separator { width: 1px; align-self: stretch; background: rgba(188,168,146,0.36); }
.nav-pill,
.topnav a,
.topnav button {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: rgba(255,255,255,0.70); border: 1px solid rgba(188,168,146,0.38); cursor: pointer; padding: 9px 14px;
  color: var(--text-soft); font-size: .84rem; font-weight: 700;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration: none; position: relative; border-radius: 999px; box-shadow: 0 4px 10px rgba(58,37,18,.04);
}
.nav-pill-icon { font-size: .95rem; line-height: 1; }
.nav-pill-text { white-space: nowrap; }
.nav-pill-accent { background: linear-gradient(135deg, rgba(139,77,34,0.10), rgba(201,154,77,0.10)); }
.topnav a:hover, .topnav button:hover {
  background: rgba(139,77,34,0.12); color: var(--text); border-color: rgba(139,77,34,0.18);
  box-shadow: 0 10px 20px rgba(58, 37, 18, 0.08); transform: translateY(-1px);
}
.topnav a.active, .topnav button.active {
  background: linear-gradient(135deg, rgba(139,77,34,0.22), rgba(201,154,77,0.24));
  color: var(--primary-dark); border-color: rgba(139,77,34,0.22);
  box-shadow: 0 12px 24px rgba(58, 37, 18, 0.10), inset 0 0 0 1px rgba(255,255,255,0.35);
}
.nav-pill.active {
  background: linear-gradient(135deg, rgba(139,77,34,0.24), rgba(201,154,77,0.28));
  color: var(--primary-dark); border-color: rgba(139,77,34,0.30);
  box-shadow: 0 14px 28px rgba(58, 37, 18, 0.12), inset 0 1px 0 rgba(255,255,255,0.45);
  transform: translateY(-1px);
}
.nav-pill-accent.active { background: linear-gradient(135deg, rgba(139,77,34,0.30), rgba(95,125,75,0.18)); border-color: rgba(139,77,34,0.34); }
.nav-pill.active .nav-pill-icon { transform: scale(1.06); }
.topnav a.active::after, .topnav button.active::after { display: none; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }

/* ── Sticky topbar: subtle shadow once scrolled ──────────────────────────── */
.topbar { transition: box-shadow .25s ease, background .25s ease; }
.topbar.is-scrolled {
  background: rgba(255, 253, 248, 0.86);
  box-shadow: 0 8px 24px -14px rgba(58, 37, 18, 0.28);
}

/* ── Mobile hamburger (hidden on desktop) ────────────────────────────────── */
.mobile-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; border: 1px solid rgba(188,168,146,0.38);
  background: rgba(255,255,255,0.7); border-radius: 12px; cursor: pointer;
  padding: 0; margin: 0 4px 0 0; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(58,37,18,.04);
  transition: background .15s ease, border-color .15s ease;
}
.mobile-hamburger span {
  display: block; width: 18px; height: 2px; margin: 0 auto;
  background: var(--primary-dark); border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.mobile-hamburger:hover { background: rgba(139,77,34,0.10); }
.mobile-hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-hamburger.open span:nth-child(2) { opacity: 0; }
.mobile-hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Nav dropdowns: Discover / Family ────────────────────────────────────── */
.nav-dd { position: relative; }
.nav-dd-trigger {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  background: rgba(255,255,255,0.70); border: 1px solid rgba(188,168,146,0.38);
  cursor: pointer; padding: 10px 17px; color: var(--text-soft);
  font-size: .97rem; font-weight: 700; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(58,37,18,.04);
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nav-dd-trigger:hover {
  background: rgba(139,77,34,0.12); color: var(--text); border-color: rgba(139,77,34,0.18);
  box-shadow: 0 10px 20px rgba(58, 37, 18, 0.08); transform: translateY(-1px);
}
.nav-dd-trigger[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(139,77,34,0.22), rgba(201,154,77,0.24));
  color: var(--primary-dark); border-color: rgba(139,77,34,0.22);
}
.nav-dd:has(.nav-pill.active) .nav-dd-trigger {
  background: linear-gradient(135deg, rgba(139,77,34,0.16), rgba(201,154,77,0.18));
  color: var(--primary-dark); border-color: rgba(139,77,34,0.20);
}
.nav-dd-caret { font-size: .7rem; opacity: .7; transition: transform .2s ease; }
.nav-dd-trigger[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-panel {
  display: none; flex-direction: column; gap: 4px;
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 8px; box-shadow: 0 20px 44px -16px rgba(58, 37, 18, 0.32);
  z-index: 60; animation: navDdFadeIn .16s ease-out;
}
.nav-dd-panel.open { display: flex; }
@keyframes navDdFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-dd-panel .nav-pill { justify-content: flex-start; width: 100%; }

/* ── Notification bell ───────────────────────────────────────────────────── */
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.70); border: 1px solid rgba(188,168,146,0.38);
  font-size: 1.05rem; cursor: pointer;
  box-shadow: 0 4px 10px rgba(58,37,18,.04);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.icon-btn:hover {
  background: rgba(139,77,34,0.12); border-color: rgba(139,77,34,0.18);
  box-shadow: 0 10px 20px rgba(58, 37, 18, 0.08); transform: translateY(-1px);
}

/* ── Profile menu ─────────────────────────────────────────────────────────── */
.profile-dd { position: relative; }
.profile-dd-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.70); border: 1px solid rgba(188,168,146,0.38);
  border-radius: 999px; padding: 5px 10px 5px 5px; cursor: pointer;
  box-shadow: 0 4px 10px rgba(58,37,18,.04);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.profile-dd-trigger:hover {
  background: rgba(139,77,34,0.12); border-color: rgba(139,77,34,0.18);
  box-shadow: 0 10px 20px rgba(58, 37, 18, 0.08); transform: translateY(-1px);
}
.profile-dd-trigger[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(139,77,34,0.22), rgba(201,154,77,0.24));
  border-color: rgba(139,77,34,0.22);
}
.profile-dd-trigger[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); }
.profile-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff8ec; font-size: .82rem; font-weight: 800; line-height: 1;
}
.profile-dd-dot {
  position: absolute; top: 2px; right: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 2px var(--surface);
}
.profile-dd-panel {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 8px; box-shadow: 0 20px 44px -16px rgba(58, 37, 18, 0.32);
  z-index: 60; animation: navDdFadeIn .16s ease-out;
}
.profile-dd-panel.open { display: flex; }
.profile-dd-email {
  font-size: .78rem; font-weight: 700; color: var(--text-soft);
  padding: 8px 12px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-dd-sep { height: 1px; background: rgba(188,168,146,0.3); margin: 6px 4px; }
.profile-dd-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; font-size: .86rem; font-weight: 600;
  color: var(--text); text-decoration: none;
  transition: background .15s ease;
}
.profile-dd-item:hover { background: rgba(139,77,34,0.08); }
.profile-dd-item-danger { color: var(--danger); }
.profile-dd-item-danger:hover { background: rgba(200,77,60,0.08); }
.profile-dd-badge {
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(135deg, var(--gold), var(--primary));
  color: #fff8ec; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.profile-dd-badge-warn { background: linear-gradient(135deg, #d95f4e, var(--danger)); }

/* ── Mobile drawer ────────────────────────────────────────────────────────── */
/* On desktop this wrapper is transparent to layout — .topnav sits directly
   in the .topbar flex row exactly as before. */
#topbar-collapsible { display: contents; }
#mobile-drawer-backdrop {
  display: none; position: fixed; inset: 0; z-index: 55;
  background: rgba(40, 26, 12, 0.32); backdrop-filter: blur(2px);
}
#mobile-drawer-backdrop.open { display: block; }
body.mobile-drawer-locked { overflow: hidden; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  border: 0; cursor: pointer; border-radius: 999px; padding: 11px 18px; font-weight: 600;
  transition: 0.18s ease; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn-primary { color: #fff; background: linear-gradient(180deg, #be7630, var(--primary)); box-shadow: 0 8px 20px rgba(169,98,28,0.22); }
.btn-secondary { color: var(--text); background: #f6edde; border: 1px solid var(--line); }
.btn-ghost { background: transparent; color: var(--primary-dark); border: 1px solid rgba(169,98,28,0.28); }
.btn-danger { background: linear-gradient(180deg, #d95f4e, var(--danger)); color: #fff; }
.btn-timeline { color: #fff; background: linear-gradient(180deg, #7eb45d, var(--green)); }
.btn-tribute { color: #fff; background: linear-gradient(180deg, #d49a39, #c27d17); }
.btn-small { padding: 9px 14px; font-size: 0.88rem; }
.btn-large { min-width: 220px; }

/* ── Card ────────────────────────────────────────────────────── */
.card {
  background: rgba(255,253,248,0.88);
  border: 1px solid rgba(222,207,177,0.8);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 5%, var(--gold) 35%, var(--primary) 65%, transparent 95%);
  opacity: .55;
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 18px; padding: 20px;
  background:
    radial-gradient(circle at 86% 16%, rgba(255,255,255,0.55), transparent 20%),
    linear-gradient(180deg, rgba(255,252,245,0.98), rgba(244,234,214,0.92));
  border: 1px solid rgba(222,207,177,0.9); border-radius: 34px;
  box-shadow: 0 24px 60px rgba(63, 40, 18, 0.10); margin-bottom: 18px;
  overflow: hidden;
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(139,77,34,0.08), transparent 22%),
    radial-gradient(circle at 90% 12%, rgba(201,154,77,0.14), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent 36%);
}
.hero-copy { padding: 12px 10px 12px 12px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
.eyebrow { text-transform: uppercase; letter-spacing: .20em; font-size: .67rem; font-weight: 800; color: #8c5a31; margin-bottom: 10px; }
.hero h1 { font-size: clamp(1.55rem, 2.9vw, 2.9rem); margin-bottom: 12px; line-height: 1.02; }
.hero h1 em { color: var(--primary); font-style: italic; }
.hero p { max-width: 760px; font-size: .95rem; line-height: 1.6; color: var(--text-soft); }
.hero-features {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.hero-features li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .82rem; line-height: 1.45; color: var(--text-soft);
  padding: 8px 10px; border-radius: 16px; background: rgba(255,255,255,0.42);
  border: 1px solid rgba(188,168,146,0.18);
}
.hero-features li strong { color: var(--text); }
.hf-icon {
  flex-shrink: 0; font-size: .86rem; line-height: 1.4; width: 20px; height: 20px;
  display: inline-grid; place-items: center; border-radius: 999px; background: rgba(139,77,34,0.10);
  box-shadow: inset 0 0 0 1px rgba(139,77,34,0.08);
}
/* ── Hero: health-records callout ─────────────────────────────────────────
   A frosted-glass card matching the invitation designer's glass panel
   (rgba surface + backdrop-filter + soft golden border), tinted sage-green
   (--green) to read as its own thing without leaving the brand palette. */
.hero-health-card {
  margin: 16px 0 0; padding: 14px 16px 16px; border-radius: var(--radius-lg);
  background: rgba(255, 253, 248, .58);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(95, 139, 76, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 14px 30px -16px rgba(40, 60, 22, .22);
}
.hero-health-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.hero-health-icon {
  flex-shrink: 0; font-size: 1rem; line-height: 1; width: 28px; height: 28px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: rgba(95, 139, 76, .14); box-shadow: inset 0 0 0 1px rgba(95, 139, 76, .18);
}
.hero-health-title { font-weight: 800; font-size: .92rem; color: var(--green-dark); letter-spacing: -.01em; }
.hero-health-copy { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--text-soft); }
.hero-health-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
/* ── Family dashboard (beside/below the photo) ────────────────────────────── */
.fam-dash {
  margin-top: 14px; padding: 16px 18px;
  background: rgba(255, 253, 248, .6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(214, 174, 106, .38); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 12px 28px -18px rgba(58,37,18,.3);
  animation: famDashIn .4s ease-out;
}
@keyframes famDashIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fam-dash-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.fam-dash-title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem;
  font-weight: 700; color: var(--primary-dark);
}
.fam-dash-sub { font-size: .78rem; color: var(--text-soft); }
.fam-dash-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.fam-dash-stats:empty { display: none; }
.fam-stat {
  display: flex; align-items: center; gap: 6px; padding: 7px 12px;
  background: rgba(255,255,255,.75); border: 1px solid rgba(188,168,146,.3);
  border-radius: 999px; font-size: .8rem;
}
.fam-stat-icon { font-size: .9rem; }
.fam-stat-num { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.fam-stat-label { color: var(--text-soft); }
.fam-dash-block { margin-top: 14px; }
.fam-dash-label { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8c5a31; margin-bottom: 8px; }
.fam-dash-upcoming { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fam-dash-upcoming li {
  display: flex; align-items: center; gap: 8px; font-size: .84rem;
  background: rgba(255,255,255,.55); border-radius: 10px; padding: 7px 10px;
}
.fdu-icon { font-size: .95rem; }
.fdu-text { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdu-when { font-weight: 700; color: var(--primary); font-size: .76rem; white-space: nowrap; }
.fam-dash-insight {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(139,77,34,.08), rgba(201,154,77,.1));
  font-size: .82rem; color: var(--text); line-height: 1.5;
}
.fam-dash-pct { color: var(--primary); font-weight: 800; }
.fam-dash-bar { height: 7px; border-radius: 999px; background: rgba(188,168,146,.28); overflow: hidden; }
.fam-dash-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--primary)); border-radius: 999px; transition: width .5s ease; }
.fam-dash-todo { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fam-dash-todo li { font-size: .78rem; color: var(--text-soft); padding-left: 16px; position: relative; }
.fam-dash-todo li::before { content: "○"; position: absolute; left: 0; color: var(--gold); }
.fam-dash-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.fam-dash-btn {
  flex: 1; min-width: 90px; border: 1px solid rgba(139,77,34,.22); background: rgba(255,255,255,.7);
  color: var(--primary-dark); font-size: .76rem; font-weight: 700; padding: 8px 10px;
  border-radius: 999px; cursor: pointer; transition: all .15s;
}
.fam-dash-btn:hover { background: rgba(139,77,34,.12); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .fam-dash { animation: none; }
  .fam-dash-btn:hover { transform: none; }
}

/* ── Bulk bill import (.xlsx) ─────────────────────────────────────────────── */
.bill-import-box {
  border: 1px solid #edd9bd; background: #fdf9f2; border-radius: 12px;
  padding: 14px 16px; margin: 4px 0 16px;
}
.bill-import-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bill-import-head strong { font-size: .9rem; color: #6b4a2e; }
.bill-import-close {
  border: none; background: none; cursor: pointer; color: #9a8672;
  font-size: .85rem; padding: 2px 6px; border-radius: 6px;
}
.bill-import-close:hover { background: rgba(139,77,34,.1); color: #3d2718; }
.bill-import-hint { font-size: .78rem; color: #7d6656; line-height: 1.5; margin: 6px 0 12px; }
.bill-import-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.bill-import-filename { font-size: .78rem; color: #6b4a2e; font-weight: 600; }
.bill-import-result:empty { display: none; }
.bill-import-summary { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; font-weight: 700; margin-top: 8px; }
.bill-import-summary .bi-ok { color: #2d6a3a; }
.bill-import-summary .bi-skip { color: #8a6d1c; }
.bill-import-summary .bi-err { color: #8f3b3b; }
.bill-import-errors {
  margin: 8px 0 0; padding: 8px 10px 8px 26px; max-height: 180px; overflow-y: auto;
  background: #fff5f5; border: 1px solid #f0d2d2; border-radius: 8px;
  font-size: .78rem; color: #8f3b3b; line-height: 1.55;
}
.bill-import-note { font-size: .78rem; color: #5a4a38; margin-top: 8px; }
.bill-import-err { font-size: .8rem; color: #8f3b3b; font-weight: 600; margin-top: 8px; }

/* ── "Your Family" intro cards (Groups / Occasions discoverability) ──────── */
.fam-intro {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-bottom: 18px;
}
.fam-intro-card {
  background: rgba(255, 253, 248, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(188,168,146,.34); border-radius: var(--radius-lg);
  padding: 20px 22px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 26px -16px rgba(58,37,18,.28);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fam-intro-card:hover {
  transform: translateY(-2px); border-color: rgba(139,77,34,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 34px -18px rgba(58,37,18,.35);
}
.fam-intro-icon { font-size: 1.6rem; line-height: 1; margin-bottom: 8px; }
.fam-intro-title {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem;
  font-weight: 700; color: var(--primary-dark); margin: 0 0 6px;
}
.fam-intro-copy { font-size: .85rem; line-height: 1.55; color: var(--text-soft); margin: 0 0 14px; }
.fam-intro-btn { margin: 0; }
@media (max-width: 720px) { .fam-intro { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .fam-intro-card, .fam-intro-card:hover { transition: none; transform: none; }
}

.hero-health-note { margin: 10px 0 0; font-size: .7rem; line-height: 1.45; color: #9a8672; }
.hero-health-note a { color: #7d8f6d; font-weight: 700; text-decoration: none; }
.hero-health-note a:hover { text-decoration: underline; }
.ask-disclaimer { margin: 10px 2px 0; font-size: .7rem; line-height: 1.45; color: #9a8672; text-align: center; }
.ask-disclaimer a { color: #a9621c; font-weight: 700; text-decoration: none; }
.ask-disclaimer a:hover { text-decoration: underline; }
.hero-health-chip {
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--green-dark);
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(223,235,214,.75));
  border: 1px solid rgba(95, 139, 76, .22); border-radius: 999px; padding: 4px 10px;
  white-space: nowrap;
  opacity: 0; transform: translateY(4px);
  animation: heroHealthChipIn .45s ease-out forwards;
}
.hero-health-chips .hero-health-chip:nth-child(1) { animation-delay: .05s; }
.hero-health-chips .hero-health-chip:nth-child(2) { animation-delay: .12s; }
.hero-health-chips .hero-health-chip:nth-child(3) { animation-delay: .19s; }
.hero-health-chips .hero-health-chip:nth-child(4) { animation-delay: .26s; }
.hero-health-chips .hero-health-chip:nth-child(5) { animation-delay: .33s; }
@keyframes heroHealthChipIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-health-chip { animation: none; opacity: 1; transform: none; }
}
.hero-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.hero-actions .btn { padding: 12px 18px; box-shadow: 0 12px 24px rgba(58, 37, 18, 0.10); }
.hero-actions .btn-primary { background: linear-gradient(135deg, #b36a33, var(--primary)); }
.hero-actions .btn-ghost { background: rgba(255,255,255,0.68); }
.proof-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.proof-chip {
  font-size: 0.7rem; font-weight: 700; letter-spacing: .05em; color: #7a5030;
  background: linear-gradient(135deg, rgba(255,255,255,.84), rgba(246,230,207,.8));
  border: 1px solid rgba(139,77,34,.16); border-radius: 999px; padding: 4px 10px;
  box-shadow: 0 6px 12px rgba(58, 37, 18, 0.04);
}
.hero-art {
  position: relative;
  border-radius: 28px;
  background:
    radial-gradient(circle at 22% 12%, rgba(255,255,255,0.36), transparent 20%),
    linear-gradient(180deg, #f6ecd1 0%, #efdfb5 100%);
  box-shadow: inset 0 0 0 1px rgba(188,168,146,0.28);
  overflow: hidden;
}

/* ── Family photo frame ──────────────────────────────────────── */
.family-photo-frame { position: relative; height: 100%; }
.fph-svg-wrap { display: block; }
.fph-photo-wrap {
  padding: 10px;
  height: 100%;
  min-height: 420px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fph-photo-wrap img {
  display: block;
  max-width: 100%;
  width: auto;
  height: 400px;
  object-fit: contain;
  border-radius: 18px; border: 2.5px solid #b8880c;
  box-shadow: 0 18px 36px rgba(74,47,20,.18);
}
.fph-caption {
  text-align: center; font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: .9rem; color: #8b5215; margin-top: 6px; opacity: .8;
}
.fph-upload-btn {
  position: absolute; bottom: 12px; left: 12px; transform: none;
  background: rgba(169,98,28,.85); color: #fff; border-radius: 20px;
  padding: 6px 18px; font-size: .78rem; cursor: pointer;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  backdrop-filter: blur(4px); transition: background .2s, opacity .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.fph-upload-btn:hover { background: rgba(140,70,10,.95); }
.fph-upload-icon { font-size: .95rem; }
.fph-remove-btn {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(90,30,10,.72); color: #ffe8d6; border: none; border-radius: 20px;
  padding: 6px 14px; font-size: .75rem; cursor: pointer; white-space: nowrap;
  backdrop-filter: blur(4px); transition: background .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.fph-remove-btn:hover { background: rgba(120,30,10,.92); }

.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.28), transparent 16%),
    radial-gradient(circle at 88% 10%, rgba(255,255,255,0.20), transparent 14%);
  pointer-events: none;
}

/* ── Hero quote strip ────────────────────────────────────────── */
.hero-quote-strip {
  padding: 6px 22px 50px;
  text-align: center;
}
.hero-quote-mark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 3.6rem;
  color: #c8a030;
  opacity: .38;
  line-height: .5;
  margin-bottom: 6px;
}
.hero-quote-strip .hero-quote-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.6rem;
  color: #7a4a1c;
  line-height: 1.7;
  margin: 0;
  min-height: 3.4em;
  transition: opacity .5s ease;
}

/* ── Stepper ─────────────────────────────────────────────────── */
.stepper-wrap { position: relative; margin-top: 18px; margin-bottom: 18px; }
.stepper {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 10px 52px 10px 12px;
  background: rgba(255,253,248,0.88);
  border: 1px solid rgba(222,207,177,0.8); border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.step { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; min-height: 54px; }
.step-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-weight: 700; flex: 0 0 auto; font-size: .8rem;
}
.step-num.step-done { background: var(--green); }
.step strong { display: block; font-size: .88rem; }
.step p { font-size: 0.78rem; margin-top: 2px; color: var(--text-soft); }
.stepper-toggle-btn {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; font-size: .7rem;
  color: var(--text-soft); padding: 4px 8px; border-radius: 8px;
  transition: all .15s; white-space: nowrap; font-family: inherit;
}
.stepper-toggle-btn:hover { background: var(--surface-2); color: var(--text); }
.stepper-pill {
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 52px 10px 16px;
  background: rgba(255,253,248,0.88); border: 1px solid rgba(222,207,177,0.8);
  border-radius: var(--radius-xl); box-shadow: var(--shadow); font-size: .82rem;
}
.stepper-pill .pill-step { display: flex; align-items: center; gap: 5px; color: var(--text-soft); font-weight: 600; }
.stepper-pill .pill-num {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-weight: 700; font-size: .65rem;
}
.stepper-pill .pill-num.done { background: var(--green); }
.stepper-pill .sep { color: #c8b898; }
.stepper-wrap.collapsed .stepper { display: none; }
.stepper-wrap.collapsed .stepper-pill { display: flex; }

/* ── Workspace ───────────────────────────────────────────────── */
.workspace {
  display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 18px;
  margin-top: 18px; padding-bottom: 36px; align-items: start;
}
.sidebar, .canvas { min-height: 400px; }
.sidebar {
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 86px; max-height: calc(100vh - 102px); overflow: auto;
}
.sidebar-header {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.sidebar-badge {
  font-size: .62rem; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; padding: 3px 9px; border-radius: 10px; font-weight: 700; letter-spacing: .05em;
}
.card-badge {
  font-size: .62rem; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; padding: 3px 9px; border-radius: 10px; font-weight: 700; letter-spacing: .05em; margin-left: auto;
}
.upload-zone { display: grid; gap: 10px; }

/* ── Form inputs ─────────────────────────────────────────────── */
label {
  display: block; margin-bottom: 5px; margin-top: 10px;
  font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: #8a735c;
}
.field-label { display: block; margin: 16px 0 8px; font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; color: #8a735c; }
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea {
  width: 100%; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-md);
  padding: 10px 14px; color: var(--text); outline: none;
  transition: border-color .18s, box-shadow .18s; margin-bottom: 8px;
}
input[type="file"] {
  width: 100%; padding: 7px 10px; font-size: .82rem; margin-bottom: 4px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(169,98,28,.12); outline: none;
}
textarea { resize: vertical; min-height: 80px; }
.search {
  width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 14px;
  padding: 10px 14px; color: var(--text); outline: none;
  transition: border-color .18s; margin: 0; font-size: .88rem;
}
.search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(169,98,28,.12); }

/* ── Storage card ────────────────────────────────────────────── */
.storage-card { padding: 8px 12px; background: var(--surface-2); border-radius: 12px; }
.storage-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; }
.progress { height: 5px; background: rgba(60,40,16,.08); border-radius: 999px; overflow: hidden; margin-top: 6px; }

/* ── URL expander ────────────────────────────────────────────── */
.url-expander {
  margin-top: 4px; border: 1px solid rgba(222,207,177,.5); border-radius: 10px;
}
.url-expander > summary {
  list-style: none; cursor: pointer; padding: 8px 12px;
  font-size: .78rem; font-weight: 600; color: var(--text-soft);
  display: flex; align-items: center; gap: 6px; border-radius: 10px; transition: color .12s;
}
.url-expander > summary::-webkit-details-marker { display: none; }
.url-expander > summary::before { content: '▶'; font-size: .54rem; transition: transform .15s; display: inline-block; }
.url-expander[open] > summary::before { transform: rotate(90deg); }
.url-expander > summary:hover { color: var(--primary); }
.url-expander .url-inner { padding: 0 10px 10px; display: grid; gap: 6px; }
.url-expander .url-inner input { margin: 0; font-size: .82rem; padding: 8px 11px; }
.url-expander .url-inner .btn { margin: 0; }
.progress > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--primary)); }

/* ── Chips & filters ─────────────────────────────────────────── */
.sidebar-tools { display: grid; gap: 10px; }
.filters, .prompt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: #fff;
  color: var(--text-soft); cursor: pointer; font-size: .8rem; font-weight: 600;
  transition: all .15s; display: inline-flex; align-items: center; white-space: nowrap;
}
.chip:hover { background: #f5ede0; border-color: #c9a870; color: var(--text); }
.chip.active { background: #f1e5d0; color: var(--text); border-color: #d3b889; }
.filters .chip { font-size: .58rem; padding: 2px 6px; font-weight: 600; }
/* chips-label above suggestion chips */
.chips-label {
  font-size: .72rem; font-weight: 700; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 8px;
}

/* ── File list ───────────────────────────────────────────────── */
.file-list {
  display: grid; gap: 8px; max-height: 340px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #c9a96e #f5edda;
  -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
}
.file-list::-webkit-scrollbar { width: 5px; }
.file-list::-webkit-scrollbar-track { background: #f5edda; border-radius: 6px; }
.file-list::-webkit-scrollbar-thumb { background: #c9a96e; border-radius: 6px; }
.file-row {
  display: grid; grid-template-columns: 26px minmax(0,1fr) 30px; gap: 10px; align-items: center;
  background: #fff; border: 1px solid rgba(222,207,177,0.9); border-radius: var(--radius-md);
  padding: 10px 12px; transition: box-shadow .15s, border-color .15s;
}
.file-row:hover { box-shadow: 0 2px 10px rgba(100,60,20,.08); border-color: #d3b889; }
.file-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; color: var(--text); }
.file-meta { color: var(--text-soft); font-size: 0.78rem; margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.asset-num { color: var(--text-soft); font-weight: 700; font-size: .72rem; display: flex; align-items: center; justify-content: center; }
.icon-btn {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; color: var(--text-soft); cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center; padding: 0; transition: all .15s;
}
.icon-btn:hover { background: #fff0ee; border-color: #e8a898; color: var(--danger); }
.icon-btn.share-btn:hover { background: #e8f0fd; border-color: #b4cef5; color: #2c5fa8; }

/* ── Canvas & cards ──────────────────────────────────────────── */
.canvas { display: grid; gap: 18px; }
.ask-card, .answer-card { padding: 22px; }
.ask-card h2, .answer-card h2 {
  font-size: 1.5rem; border-bottom: 1px solid var(--line); padding-bottom: 9px;
  margin-bottom: 18px; display: flex; align-items: center; gap: 8px;
}

/* ── Prompt chips ────────────────────────────────────────────── */
.prompt-chips { margin-bottom: 14px; margin-top: -4px; }
.prompt-chips .chip { font-size: .76rem; padding: 5px 12px; background: linear-gradient(135deg,#fefcf5,#f5edd8); border-color: #d8ccb4; color: #5a3a1a; }
.prompt-chips .chip:hover { background: #f0e4cc; border-color: var(--gold); color: var(--primary-dark); }

/* ── Ask form ────────────────────────────────────────────────── */
.ask-grid { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 14px; margin-top: 16px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.form-row-2 > div > label { margin-top: 0; }
.question-box {
  width: 100%; resize: vertical; min-height: 100px; border: 1px solid var(--line);
  border-radius: 18px; padding: 14px 16px; background: #fff; color: var(--text);
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.05rem; line-height: 1.6; margin-bottom: 0;
}
.question-box:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(169,98,28,.12); }
/* Context panel — replaces hidden accordion, always visible */
.context-panel {
  margin-top: 12px;
  border: 1px solid rgba(222,207,177,.8); border-radius: 14px;
  background: #fcf8f0; padding: 12px 16px 16px;
}
.context-panel-header {
  display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap;
}
.context-panel-icon { font-size: .9rem; line-height: 1; }
.context-panel-title { font-size: .82rem; font-weight: 700; color: var(--primary); }
.context-panel-opt {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: #fff; background: #c8a060; padding: 2px 8px; border-radius: 10px;
}
.context-panel-desc { font-size: .72rem; color: var(--text-soft); font-style: italic; }
.hint-field-label { font-size: .72rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; letter-spacing: .04em; text-transform: uppercase; }
.hint-text { font-size: .73rem; color: var(--text-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Generate CTA */
.generate-cta { margin-top: 16px; display: flex; justify-content: center; }
.btn-generate {
  width: auto; min-width: min(320px, 100%); padding: 11px 36px;
  font-size: .88rem; font-weight: 800; font-family: 'Lato', sans-serif;
  letter-spacing: .09em; text-transform: uppercase;
  color: #fff8ec;
  background: linear-gradient(135deg, #8b3c10 0%, #b96a24 45%, #d99a3e 100%);
  background-size: 200% 100%; background-position: 0% 0%;
  border: none; border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 26px -8px rgba(139,60,16,.55);
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: background-position .45s ease, box-shadow .2s ease, transform .12s ease, filter .15s;
}
.btn-generate::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: skewX(-20deg); transition: left .5s ease; pointer-events: none;
}
.btn-generate:hover {
  background-position: 100% 0; transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 14px 30px -8px rgba(139,60,16,.62);
}
.btn-generate:hover::after { left: 120%; }
.btn-generate:active { transform: scale(.96); filter: brightness(.95); }
.btn-generate:disabled { opacity: .65; cursor: not-allowed; transform: none; }
@media (max-width: 480px) { .btn-generate { width: 100%; } }
/* Timeline feature card */
.timeline-feature {
  margin-top: 14px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e5d9c4; border-radius: 16px;
  background: linear-gradient(180deg, #fbf7ee 0%, #f7f1e3 100%);
  box-shadow: 0 10px 26px -20px rgba(120, 78, 30, .4);
}
.timeline-feature-icon {
  flex-shrink: 0; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; border-radius: 12px;
  background: rgba(201, 154, 77, .16); border: 1px solid rgba(201, 154, 77, .3);
}
.timeline-feature-body { flex: 1; min-width: 0; }
.timeline-feature-title {
  display: flex; align-items: center; gap: 6px;
  font-size: .92rem; font-weight: 700; color: #3d2718;
}
.timeline-feature-sub { font-size: .78rem; color: #8a7860; line-height: 1.5; margin-top: 2px; }
.timeline-feature-btn {
  flex-shrink: 0;
  background: transparent; color: #8b4d22;
  border: 1.5px solid rgba(169, 98, 28, .45); border-radius: 999px;
  padding: 9px 20px; font-size: .8rem; font-weight: 700; font-family: 'Lato', sans-serif;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.timeline-feature-btn:hover {
  background: linear-gradient(135deg, #c99a4d, #a9621c); color: #fff;
  border-color: transparent; transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(169, 98, 28, .3);
}
.timeline-feature-btn:active { transform: scale(.96); }
.timeline-feature-btn:disabled { opacity: .6; cursor: wait; transform: none; }
@media (max-width: 640px) {
  .timeline-feature { flex-wrap: wrap; }
  .timeline-feature-btn { width: 100%; padding: 11px 20px; }
}
/* Settings row: timeline only */
.form-settings-row { margin-top: 10px; }
.settings-timeline { display: flex; }
.action-row, .actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn-quiet {
  background: none; border: none; color: var(--text-soft); font-size: .8rem;
  cursor: pointer; padding: 4px 2px; font-weight: 600; transition: color .15s;
  font-family: inherit; display: inline-flex; align-items: center; gap: 4px;
}
.btn-quiet:hover { color: var(--danger); }
.btn-secondary-action {
  background: none; border: 1px solid rgba(210,176,106,.5); border-radius: 999px;
  padding: 8px 15px; font-size: .82rem; color: var(--text-soft); cursor: pointer;
  transition: all .15s; font-weight: 600; display: inline-flex; align-items: center;
  gap: 6px; font-family: inherit;
}
.btn-secondary-action:hover { background: var(--surface-2); color: var(--text); border-color: #c9a870; }

/* ── Glossy blue action buttons ──────────────────────────────── */
.btn-blue-gloss {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 999px; font-size: .84rem; font-weight: 700;
  font-family: inherit; cursor: pointer; border: none;
  background: linear-gradient(160deg, #5b9cf6 0%, #2563eb 55%, #1d4ed8 100%);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 3px 10px rgba(37,99,235,.35);
  transition: filter .15s, box-shadow .15s, transform .1s;
}
.btn-blue-gloss:hover {
  filter: brightness(1.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 5px 16px rgba(37,99,235,.45);
  transform: translateY(-1px);
}
.btn-blue-gloss:active { filter: brightness(.96); transform: translateY(0); }

.btn-blue-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  font-family: inherit; cursor: pointer;
  background: rgba(37,99,235,.06); border: 1.5px solid rgba(37,99,235,.28);
  color: #2563eb; transition: all .15s;
}
.btn-blue-ghost:hover {
  background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.5);
  box-shadow: 0 2px 8px rgba(37,99,235,.18);
}

.btn-action-hint {
  display: block; font-size: .71rem; color: var(--text-soft); margin-top: 4px;
  font-style: italic; line-height: 1.3;
}

.answer-panel-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: nowrap;
}
.answer-panel-actions-row { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; flex-shrink: 0; }
.answer-panel-actions { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }

.sidebar-util-row {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}

/* ── Answer panel ────────────────────────────────────────────── */
.answer-question {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 11px 16px;
  background: linear-gradient(135deg, #f8f2e4, #f4ede0);
  border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0;
}
.answer-q-icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.answer-question > span:last-child { font-family: "Cormorant Garamond", Georgia, serif; font-size: .94rem; color: #3a2a14; font-style: italic; line-height: 1.5; }
.answer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.answer-meta:empty { display: none; margin: 0; }
.trust-badge { font-size: .72rem; font-weight: 700; padding: 4px 11px; border-radius: 20px; letter-spacing: .04em; white-space: nowrap; }
.source-chips-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.source-label { font-size: .68rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.source-chip { font-size: .72rem; background: #e8f0fd; color: #2c5fa8; border: 1px solid #b4cef5; border-radius: 10px; padding: 3px 9px; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.answer-body { line-height: 1.82; }
#result { min-height: 80px; line-height: 1.82; font-size: .95rem; color: var(--text); }
.answer-section-heading { font-family: "Cormorant Garamond", serif; font-size: 1.12rem; font-weight: 700; color: var(--primary); margin: 1.2rem 0 0.4rem; border-bottom: 1px solid #d4b483; padding-bottom: 2px; }
.next-questions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.next-q-heading {
  font-size: .7rem; font-weight: 700; color: var(--text-soft); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 8px;
}
.next-q-btn {
  display: flex; align-items: flex-start; gap: 8px; text-align: left;
  background: #fefcf5; border: 1px solid rgba(210,176,106,.35);
  border-radius: 10px; padding: 9px 13px; font-size: .84rem; color: #4a2e10;
  cursor: pointer; transition: all .15s; font-family: inherit; line-height: 1.4;
  width: 100%; margin-bottom: 5px;
}
.next-q-btn::before { content: '›'; color: var(--primary); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.next-q-btn:hover { background: #f7eedd; border-color: var(--gold); color: var(--text); }
.evidence-excerpt {
  background: #faf6ec; border-left: 2px solid var(--gold);
  border-radius: 0 8px 8px 0; padding: 8px 12px; margin-bottom: 6px;
}
.evidence-source-label {
  font-size: .68rem; font-weight: 700; color: #9a7850; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 3px; overflow-wrap: break-word; word-break: break-word;
}
.evidence-excerpt-text { font-size: .83rem; color: #4a3020; font-style: italic; line-height: 1.55; }
.name-list { list-style: none; padding: 0; margin: 0 0 0.8rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 1px 12px; }
.name-list li { padding: 2px 0; font-size: 0.9rem; color: var(--text); }

/* ── Badges & tags ───────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: #f5ecdb; color: #7b5d3f; font-size: .84rem; border: 1px solid rgba(210,176,106,.34); }
.badge-high { background: #e7f2e0; color: var(--green-dark); border-color: rgba(95,139,76,.25); }
.badge-trust { background: #fff7df; color: #8a6427; }
.tag { font-size: .68rem; color: var(--text-soft); background: rgba(255,255,255,.8); padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); white-space: nowrap; }
.tag-ok { background: #e8f4e0 !important; color: #4a7a38 !important; border-color: #b8d8a0 !important; }
.shared-badge { font-size:.72rem; background:#e8f0fd; color:#2c5fa8; border:1px solid #b4cef5; border-radius:10px; padding:1px 8px; white-space:nowrap; }
.share-entry { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid rgba(222,207,177,.6); font-size:.87rem; }
.share-entry:last-child { border-bottom:none; }
.share-entry .share-email { flex:1; color:var(--text); font-weight:600; }
.share-entry .share-date { font-size:.75rem; color:var(--text-soft); white-space:nowrap; }
.btn-revoke { background:#fdf0f0; color:#a83030; border:1px solid #e8b4b4; border-radius:5px; padding:3px 10px; font-size:.78rem; cursor:pointer; white-space:nowrap; }
.btn-revoke:hover { background:#a83030; color:#fff; }
.btn-share-asset { background:#e8f0fd; color:#2c5fa8; border:1px solid #b4cef5; border-radius:5px; padding:3px 9px; font-size:.78rem; cursor:pointer; white-space:nowrap; }
.btn-share-asset:hover { background:#2c5fa8; color:#fff; }

/* ── Empty states ────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 32px 16px 24px; }
.empty-icon  { font-size: 2.2rem; margin-bottom: 12px; opacity: .45; }
.empty-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.05rem; color: #c8b898; font-style: italic; margin-bottom: 6px; }
.empty-sub { font-size: .83rem; color: #b0a090; }
.empty-archive { text-align: center; padding: 28px 12px 20px; }
.empty-arch-icon { font-size: 2rem; margin-bottom: 10px; opacity: .4; }
.empty-arch-msg { font-family: "Cormorant Garamond", Georgia, serif; font-size: .9rem; color: #b8a888; font-style: italic; margin-bottom: 5px; line-height: 1.45; }
.empty-arch-sub { font-size: .76rem; color: #c0b0a0; }

/* ── Loading spinner ─────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.loading-ring { display: inline-block; width: 28px; height: 28px; border: 3px solid #e8dfd0; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: middle; }
.loading-state { display: flex; align-items: center; gap: 14px; padding: 20px 4px; }
.loading-dots span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); margin: 0 2px; animation: bounce .9s infinite ease-in-out both; }
.loading-dots span:nth-child(2) { animation-delay: .15s; }
.loading-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity:.4; }
  40% { transform: scale(1); opacity:1; }
}
#query-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Modals ──────────────────────────────────────────────────── */
#auth-modal, #dup-modal, #share-modal, #tribute-modal, #feedback-modal {
  display: none; position: fixed; inset: 0; background: rgba(20,12,5,.60);
  z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(2px);
}
#auth-modal.open, #dup-modal.open, #share-modal.open, #feedback-modal.open { display: flex; }
.modal-box { background: var(--surface); border-radius: var(--radius-lg); padding: 32px 34px; width: 390px; box-shadow: 0 12px 50px rgba(40,20,5,.30); border: 1px solid var(--line); }
.modal-box h3 { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; margin: 0 0 20px; color: var(--text); }
.modal-box input { display: block; width: 100%; margin-bottom: 10px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: .9rem; background: #fff; outline: none; transition: border-color .18s, box-shadow .18s; }
.modal-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(169,98,28,.12); }
.modal-box button { width: 100%; padding: 11px; margin-top: 6px; border-radius: var(--radius-sm); font-weight: 700; font-size: .9rem; border: none; cursor: pointer; }
.modal-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.modal-tabs button { flex: 1; background: var(--surface-2); color: var(--text-soft); border: 1.5px solid var(--line); padding: 8px; border-radius: 8px; font-weight: 700; font-size: .85rem; cursor: pointer; margin: 0; transition: all .15s; }
.modal-tabs button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
#auth-submit { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; }
#auth-submit:hover { opacity: .92; }
.err { color: var(--danger); font-size: .83rem; margin-top: 8px; }
.dup-info { background: #fdf6e0; border: 1px solid #dcc060; border-radius: 9px; padding: 11px 14px; font-size: .87rem; margin-bottom: 16px; color: #4a3a10; }
.dup-actions { display: flex; flex-direction: column; gap: 8px; }
.dup-actions button { padding: 10px 14px; border: none; border-radius: 8px; cursor: pointer; font-size: .88rem; text-align: left; font-weight: 700; width: 100%; margin: 0; }
.btn-replace  { background: #fdf0f0; color: #a83030; border: 1.5px solid #e8b4b4 !important; }
.btn-replace:hover  { background: #a83030; color: #fff; }
.btn-keepboth { background: #e6f2e8; color: #3a6b40; border: 1.5px solid #a8d5af !important; }
.btn-keepboth:hover { background: #3a6b40; color: #fff; }
.btn-rename   { background: #f5ede2; color: var(--primary-dark); border: 1.5px solid #d4b49a !important; }
.btn-rename:hover   { background: var(--primary-dark); color: #fff; }
.btn-skip     { background: var(--surface-2); color: var(--text-soft); border: 1.5px solid var(--line) !important; }
.btn-skip:hover     { background: var(--line); }
.rename-row { display: none; margin-top: 4px; }
.rename-row input { margin-bottom: 0; width: 100%; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .88rem; }
.rename-row button { margin-top: 6px; background: var(--primary); color: #fff; border: none; }

/* ── Mobile nav ──────────────────────────────────────────────── */
.mobile-nav {
  position: sticky; bottom: 12px; width: min(96%, 420px); margin: 0 auto 14px;
  display: none; justify-content: space-between; gap: 8px; padding: 8px; z-index: 30;
  background: rgba(255,253,248,.94); border: 1px solid rgba(222,207,177,.8);
  border-radius: 999px; box-shadow: var(--shadow);
}
.mobile-nav button { flex: 1; padding: 10px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mobile-nav button.active { background: rgba(169,98,28,.1); color: var(--primary); }
.mob-tab-icon { font-size: 1.2rem; line-height: 1; }
.mob-tab-label { font-size: .6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ── Responsive ──────────────────────────────────────────────── */
/* Nav/topbar mobile behavior lives with the nav-dropdown/drawer CSS above —
   see the @media (max-width: 980px) block near the mobile drawer rules. */
@media (max-width: 1200px) { .workspace { grid-template-columns: 320px minmax(0,1fr); } }
@media (max-width: 640px) {
  .topbar, .hero, .stepper, .workspace { width: calc(100% - 20px); }
  .topbar { padding: 12px 0; }
  .hero { padding: 16px; border-radius: 26px; }
  .hero h1 { font-size: 1.55rem; }
  .proof-chips { gap: 5px; }
  .proof-chip { font-size: 0.72rem; padding: 2px 8px; }
  .stepper { grid-template-columns: 1fr; }
  .step { min-height: auto; }
  .sidebar, .ask-card, .answer-card { padding: 16px; }
  .form-row-2 { grid-template-columns: 1fr; }
}

/* ── Weekly Memory Prompt ─────────────────────────────────────── */
.weekly-prompt-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, #fffbf0 0%, #fef3d8 100%);
  border: 1px solid #e8c96c; border-radius: 12px;
  padding: 11px 14px; margin-bottom: 12px;
}
.weekly-prompt-icon { font-size: 1.35rem; flex-shrink: 0; line-height: 1.3; }
.weekly-prompt-body { flex: 1; min-width: 0; }
.weekly-prompt-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #9c7010; margin-bottom: 3px;
}
.weekly-prompt-text {
  font-size: .87rem; color: #5a3a08; line-height: 1.4; font-style: italic;
}
.weekly-prompt-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.weekly-prompt-ask {
  font-size: .78rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #d4942a, #b87018);
  border: none; border-radius: 20px; padding: 4px 14px; cursor: pointer;
}
.weekly-prompt-dismiss {
  font-size: .74rem; color: #a08040; background: none; border: none; cursor: pointer; padding: 0;
}

/* ── On This Day banner ───────────────────────────────────────── */
.on-this-day-banner {
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, #f0faf4 0%, #d8f0e4 100%);
  border: 1px solid #7dc49a; border-left: 4px solid #3c9e68;
  border-radius: 10px; padding: 12px 16px; margin-bottom: 16px;
}
.otd-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1.2; }
.otd-body { flex: 1; min-width: 0; }
.otd-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #2a7050; margin-bottom: 3px;
}
.otd-memory { font-size: .9rem; color: #1a4030; line-height: 1.5; font-style: italic; }
.otd-date { font-size: .72rem; color: #4a8060; font-weight: 600; margin-top: 4px; }

/* ── Share Card trigger + modal ───────────────────────────────── */
.share-card-trigger {
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed #d8c8a0;
  display: flex; align-items: center;
}
.share-card-trigger-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 700; letter-spacing: .01em;
  color: #5a2508;
  background: linear-gradient(135deg, #fef8ec 0%, #fdecc4 100%);
  border: 1.5px solid #d4a030; border-radius: 999px;
  padding: 8px 20px; cursor: pointer;
  transition: background .18s, box-shadow .18s;
}
.share-card-trigger-btn:hover {
  background: linear-gradient(135deg, #fdecc4, #fad88a);
  box-shadow: 0 2px 10px rgba(180,120,20,.2);
}
.share-card-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(20,8,0,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.share-card-modal.hidden { display: none; }
.share-card-inner {
  background: #fffdf4; border-radius: 18px; max-width: 540px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
  max-height: 90vh;
}
.share-card-header {
  background: linear-gradient(135deg, #5a2508 0%, #8b3c10 100%);
  padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.share-card-header-left { display: flex; align-items: center; gap: 9px; }
.share-card-header-icon { font-size: 1.2rem; }
.share-card-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #ffe8a0; font-size: 1.1rem; font-weight: 700; letter-spacing: .03em;
}
.share-card-close {
  color: #ffd070; background: rgba(255,255,255,.12); border: none;
  font-size: 1rem; line-height: 1; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.share-card-close:hover { background: rgba(255,255,255,.25); }
.share-card-preview {
  padding: 20px 24px 16px;
  background: linear-gradient(180deg, #fffdf4 0%, #fef6e0 100%);
  overflow-y: auto; flex: 1;
  border-bottom: 1px solid #e8d8a8;
}
.share-card-section-label {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .13em; color: #9c6a20; margin-bottom: 5px;
}
.share-card-q-section { margin-bottom: 0; }
.share-card-q {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem; font-style: italic; color: #4a2010;
  line-height: 1.45; font-weight: 600;
}
.share-card-rule {
  height: 1px; background: linear-gradient(90deg, transparent, #d4b060, transparent);
  margin: 14px 0;
}
.share-card-a-section { margin-bottom: 14px; }
.share-card-answer {
  font-size: .88rem; color: #3d2718; line-height: 1.68;
}
.share-card-answer p { margin: 0 0 .5rem; }
.share-card-answer p:last-child { margin-bottom: 0; }
.share-card-answer ul, .share-card-answer ol { margin: .35rem 0 .5rem 1.4rem; padding: 0; }
.share-card-answer li { margin-bottom: .25rem; }
.share-card-answer h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .92rem; font-weight: 700; color: #5a2508;
  text-transform: uppercase; letter-spacing: .06em;
  margin: .9rem 0 .35rem; border-bottom: 1px solid #e8c878; padding-bottom: 2px;
}
.share-card-answer strong { font-weight: 700; color: #4a2010; }
.share-card-answer em { font-style: italic; }
.share-card-watermark {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px dashed #e0c888;
}
.share-card-wm-logo {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .8rem; font-weight: 700; color: #8b5e20;
}
.share-card-wm-date { font-size: .72rem; color: #a08040; font-style: italic; }
.share-card-actions {
  display: flex; gap: 10px; padding: 14px 20px; flex-shrink: 0;
  background: #fdf8ee;
}
.share-card-copy-btn {
  flex: 1; padding: 11px 0; border-radius: 999px; font-size: .84rem; font-weight: 700;
  background: linear-gradient(135deg, #5f8b4c, #3a6030); color: #fff;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: filter .15s;
}
.share-card-copy-btn:hover { filter: brightness(1.1); }
.share-card-print-btn {
  flex: 1; padding: 11px 0; border-radius: 999px; font-size: .84rem; font-weight: 700;
  background: linear-gradient(135deg, #4a90d9, #1d6abf); color: #fff;
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: filter .15s;
}
.share-card-print-btn:hover { filter: brightness(1.1); }
.share-card-btn-icon { font-size: .95rem; }

/* ── Notifications panel ──────────────────────────────────────────── */
.notif-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(20,8,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.notif-overlay.hidden { display: none; }
.notif-panel {
  background: #fffdf4; border-radius: 20px; max-width: 480px; width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,.32);
  overflow: hidden; display: flex; flex-direction: column;
}
.notif-header {
  background: linear-gradient(135deg, #3a5a20 0%, #5f8b4c 100%);
  padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.notif-header-left { display: flex; align-items: center; gap: 9px; }
.notif-header-icon { font-size: 1.2rem; }
.notif-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #e8f8d8; font-size: 1.1rem; font-weight: 700; letter-spacing: .03em;
}
.notif-close {
  color: #c8e8a0; background: rgba(255,255,255,.15); border: none;
  font-size: 1rem; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.notif-close:hover { background: rgba(255,255,255,.28); }
.notif-body { padding: 22px 24px; }
.notif-intro {
  font-size: .88rem; color: #5a4a38; line-height: 1.55; margin-bottom: 18px;
}
.notif-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid #e8d8b0;
}
.notif-row-info { flex: 1; min-width: 0; }
.notif-row-title {
  font-size: .9rem; font-weight: 700; color: #3d2718; margin-bottom: 4px;
}
.notif-row-desc {
  font-size: .78rem; color: #7a6f65; line-height: 1.5;
}
.notif-digest-day {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.notif-day-label { font-size: .76rem; font-weight: 700; color: #9c6a20; }
.notif-day-select {
  font-size: .8rem; color: #3d2718; border: 1.5px solid #e0d0a0;
  border-radius: 7px; padding: 4px 8px; background: #fffdf4; outline: none;
  cursor: pointer;
}
/* Digest options block */
.notif-digest-options { margin-top: 12px; }
.notif-digest-freq { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.notif-freq-btns { display: flex; gap: 6px; }
.notif-freq-btn {
  padding: 4px 13px; border-radius: 999px; font-size: .75rem; font-weight: 700;
  border: 1.5px solid #c8a860; background: #fffdf4; color: #9c6a20;
  cursor: pointer; transition: background .15s, color .15s;
}
.notif-freq-btn.active, .notif-freq-btn:hover {
  background: #5f8b4c; border-color: #5f8b4c; color: #fff;
}
/* Advance notice row */
.notif-advance-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 4px; margin-bottom: 2px;
}
/* Section labels */
.notif-section-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #a9621c;
  padding: 14px 0 4px; border-top: 1px solid #e8d8b0; margin-top: 4px;
}
.notif-section-label:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
/* Toggle switch */
.notif-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.notif-toggle input { opacity: 0; width: 0; height: 0; }
.notif-toggle-track {
  position: absolute; inset: 0; background: #d8cdb8; border-radius: 999px;
  cursor: pointer; transition: background .2s;
}
.notif-toggle input:checked + .notif-toggle-track { background: #5f8b4c; }
.notif-toggle-thumb {
  position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.notif-toggle input:checked + .notif-toggle-track .notif-toggle-thumb { transform: translateX(20px); }
/* Save row */
.notif-save-row {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid #e8d8b0;
}
.notif-save-btn {
  padding: 10px 24px; border-radius: 999px; font-size: .85rem; font-weight: 700;
  background: linear-gradient(135deg, #5f8b4c, #3a6030); color: #fff;
  border: none; cursor: pointer; transition: filter .15s;
}
.notif-save-btn:hover:not(:disabled) { filter: brightness(1.1); }
.notif-save-btn:disabled { opacity: .5; cursor: not-allowed; }
.notif-save-status { font-size: .82rem; font-weight: 600; }
.notif-smtp-note {
  margin-top: 12px; padding: 10px 14px; background: #fff8e8;
  border: 1px solid #e8c060; border-radius: 8px;
  font-size: .76rem; color: #7a5010; line-height: 1.5;
}
.notif-smtp-note code { font-size: .75rem; background: #f0e8c8; padding: 1px 4px; border-radius: 3px; }

/* ── Occasions panel ──────────────────────────────────────────── */
.occasions-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(20,8,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.occasions-overlay.hidden { display: none; }
.occasions-panel {
  background: #fffdf4; border-radius: 20px; max-width: 600px; width: 100%;
  max-height: 80vh; box-shadow: 0 24px 64px rgba(0,0,0,.32);
  overflow: hidden; display: flex; flex-direction: column;
}
.occasions-header {
  background: linear-gradient(135deg, #c76e3a 0%, #e89856 100%);
  padding: 15px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.occasions-header-left { display: flex; align-items: center; gap: 9px; }
.occasions-header-icon { font-size: 1.2rem; }
.occasions-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #fff8e8; font-size: 1.1rem; font-weight: 700; letter-spacing: .03em;
}
.occasions-close {
  color: #ffe8c8; background: rgba(255,255,255,.15); border: none;
  font-size: 1rem; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.occasions-close:hover { background: rgba(255,255,255,.28); }
.occasions-body {
  padding: 22px 24px; overflow-y: auto; flex: 1;
}
.occasions-intro {
  font-size: .88rem; color: #5a4a38; line-height: 1.55; margin-bottom: 18px;
}

/* ── Hero Birthday Banner ──────────────────────────────────────────────────── */
#hero-birthday-banner {
  background: linear-gradient(135deg, #fff3d6 0%, #fde8a8 100%);
  border-top: 3px solid #e8b040;
  border-bottom: 3px solid #e8b040;
  padding: 14px 24px;
  animation: hbb-slide-in .5s ease;
}
@keyframes hbb-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hbb-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
}
.hbb-icon {
  font-size: 1.8rem; flex-shrink: 0; line-height: 1;
  animation: hbb-bounce .8s ease infinite alternate;
}
@keyframes hbb-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}
#hbb-text {
  flex: 1; margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem; font-style: italic;
  color: #6b3a08; line-height: 1.45;
}
.hbb-dismiss {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: #a07030; opacity: .65;
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
  transition: opacity .15s;
}
.hbb-dismiss:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   Family Groups UI
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Inbox badge on topbar button ─────────────────────────────────────────── */
.inbox-badge {
  position: absolute; top: -3px; right: -3px;
  background: #c0392b; color: #fff;
  font-size: .62rem; font-weight: 700;
  min-width: 16px; height: 16px; line-height: 16px;
  border-radius: 8px; text-align: center; padding: 0 4px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--surface, #fdf8f0);
}

/* ── Groups overlay + panel ───────────────────────────────────────────────── */
.groups-overlay {
  position: fixed; inset: 0;
  background: rgba(30,18,10,.45);
  z-index: 1200;
  display: flex; align-items: stretch; justify-content: flex-end;
  transition: opacity .2s;
}
.groups-overlay.hidden { display: none; }
.groups-panel {
  width: min(680px, 100vw);
  background: var(--surface, #fffdf8);
  border-left: 2px solid #e8dcc8;
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 0 0 40px;
}
.groups-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1.5px solid #ede5d5;
  position: sticky; top: 0;
  background: var(--surface, #fffdf8);
  z-index: 2;
}
.groups-panel-title-row { display: flex; align-items: center; gap: 10px; }
.groups-panel-icon { font-size: 1.35rem; }
.groups-panel-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem; font-weight: 700;
  color: var(--text, #3d2718);
}
.groups-close {
  background: none; border: none; cursor: pointer;
  font-size: 1.1rem; color: #8b7060; padding: 4px 8px; border-radius: 4px;
  transition: color .15s;
}
.groups-close:hover { color: #3d2718; }

/* ── Groups list ──────────────────────────────────────────────────────────── */
.groups-intro {
  font-size: .85rem; color: #8b7060; line-height: 1.55;
  padding: 16px 22px 8px; margin: 0;
}
.groups-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 12px 22px 22px;
}
.group-card {
  background: #fdf8f2; border: 1.5px solid #e8dcc8; border-radius: 12px;
  padding: 16px 18px; cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
}
.group-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.09); border-color: #c8a878; }
.group-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem; font-weight: 700; color: #3d2718;
  margin-bottom: 4px;
}
.group-card-desc { font-size: .8rem; color: #8b7060; margin-bottom: 10px; min-height: 18px; }
.group-card-meta { font-size: .76rem; color: #7a6656; display: flex; flex-direction: column; gap: 3px; }

.group-card-occ-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e6d7bb;
  font-size: .74rem; font-weight: 700; color: #6b4a1a;
  letter-spacing: .02em;
}
.group-card-occ-badge {
  background: #f4ede0; color: #8b5e3c;
  font-size: .68rem; font-weight: 700;
  border-radius: 999px; padding: 2px 8px;
}
.group-card-occ-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px;
}
.group-card-occ {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  color: #4a3524;
  padding: 4px 8px;
  border-radius: 8px;
  background: #fbf5e9;
  border: 1px solid #f0e4cd;
}
.group-card-occ--soon {
  background: #fef3e0;
  border-color: #f0d6a5;
}
.group-card-occ-icon { font-size: .95rem; line-height: 1; }
.group-card-occ-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.group-card-occ-when {
  font-size: .68rem; font-weight: 700;
  color: #8b5e3c; letter-spacing: .02em;
  white-space: nowrap;
}
.group-card-occ--soon .group-card-occ-when { color: #a9621c; }
.group-card-occ-more {
  font-size: .7rem; color: #8b7060; font-weight: 600;
  text-align: center; padding: 2px 0;
}
.group-card-empty-occ {
  font-size: .74rem; color: #9a8975; font-style: italic;
  padding: 6px 4px; line-height: 1.4;
}
.group-card-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dashed #e6d7bb;
}
.group-card-act {
  flex: 1 1 auto;
  background: #fff8ec; color: #6b4a1a;
  border: 1px solid #ead9b8;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: .7rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.group-card-act:hover {
  background: #f5e5c4; border-color: #c8a878;
}
.group-card-act:active { transform: translateY(1px); }
/* Destructive action — owner-only Delete. */
.group-card-act--danger { background: #fdf1f0; color: #8a2b22; border-color: #eccac5; }
.group-card-act--danger:hover { background: #f8ddda; border-color: #d99a92; }

/* ── Group detail ─────────────────────────────────────────────────────────── */
.groups-back-btn {
  background: none; border: none; cursor: pointer;
  font-size: .85rem; color: #8b5e3c; font-weight: 600;
  padding: 14px 22px 6px; text-align: left;
  display: block; transition: color .15s;
}
.groups-back-btn:hover { color: #3d2718; }
.groups-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 8px 22px 14px;
  border-bottom: 1.5px solid #ede5d5;
}
.groups-detail-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem; font-weight: 700; color: #3d2718;
}
.groups-detail-desc { font-size: .82rem; color: #8b7060; margin-top: 3px; }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.groups-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid #ede5d5;
  padding: 0 22px; margin-top: 4px;
  overflow-x: auto;
}
.groups-tab {
  background: none; border: none; cursor: pointer;
  font-size: .83rem; font-weight: 600; color: #8b7060;
  padding: 10px 16px; border-bottom: 2.5px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.groups-tab.active { color: #a9621c; border-bottom-color: #a9621c; }
.groups-tab-content { display: none; padding: 18px 22px; }
.groups-tab-content.active { display: block; }

/* ── Generic items list ───────────────────────────────────────────────────── */
.groups-item-list { display: flex; flex-direction: column; gap: 8px; }
.grp-item {
  display: flex; align-items: center; justify-content: space-between;
  background: #fdf8f2; border: 1px solid #ede5d5; border-radius: 9px;
  padding: 10px 14px;
}
.grp-item-main { flex: 1; min-width: 0; }
.grp-item-name { font-size: .88rem; font-weight: 600; color: #3d2718; }
.grp-item-sub { font-size: .77rem; color: #8b7060; margin-top: 2px; }
.grp-item-actions { display: flex; gap: 6px; flex-shrink: 0; margin-left: 10px; }
.grp-act-btn {
  background: none; border: 1.5px solid #d8ccb4; cursor: pointer;
  border-radius: 6px; padding: 3px 7px; font-size: .82rem;
  color: #7a6656; transition: background .12s;
}
.grp-act-btn:hover { background: #f0ebe4; }
.grp-act-del:hover { background: #fde8e0; border-color: #e08070; color: #c0392b; }

/* Occasion rows: stack the info above a full-width, labeled action bar so
   every action reads as icon + text (clearer than icon-only for all ages). */
.grp-item--occ { flex-direction: column; align-items: stretch; gap: 10px; }
.grp-item--occ .grp-item-main { flex: none; }
.occ-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.occ-act {
  display: inline-flex; align-items: center; gap: 7px; line-height: 1;
  font-family: inherit; font-size: .82rem; font-weight: 600; white-space: nowrap;
  color: #6b4a2e; background: #fff; border: 1px solid #e2d3b8; border-radius: 999px;
  padding: 8px 15px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.occ-act .occ-ic { font-size: .95rem; }
.occ-act:hover { background: #f7edda; border-color: #d6ae6a; color: #4b2f14; }
.occ-act:active { transform: scale(.97); }
.occ-act:focus-visible { outline: 2px solid #b0842e; outline-offset: 2px; }
.occ-act--primary { background: #a9621c; border-color: #a9621c; color: #fff; }
.occ-act--primary:hover { background: #be7630; border-color: #be7630; color: #fff; }
.occ-act--danger { color: #9a3b3b; border-color: #e7b7b7; }
.occ-act--danger:hover { background: #fdeeee; border-color: #d98a8a; color: #7a2b2b; }
@media (max-width: 640px) {
  .occ-actions { gap: 7px; }
  .occ-act { flex: 1 1 calc(50% - 4px); justify-content: center; font-size: .8rem; padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) { .occ-act:active { transform: none; } }
.grp-role-sel {
  font-size: .78rem; padding: 3px 6px; border: 1.5px solid #d8ccb4;
  border-radius: 6px; background: #fffdf8; color: #5a4a38; cursor: pointer;
  outline: none;
}
.grp-role-sel:focus { border-color: #a9621c; }
.grp-empty {
  font-size: .82rem; color: #a09080; text-align: center;
  padding: 20px 0; margin: 0;
}
.occ-today { font-weight: 700; color: #c0392b; background: #fde8e0; padding: 1px 6px; border-radius: 4px; }
.occ-soon  { font-weight: 700; color: #a9621c; background: #fef3e0; padding: 1px 6px; border-radius: 4px; }
.occ-days  { font-size: .76rem; color: #8b7060; }

/* ── Reminder pref form ───────────────────────────────────────────────────── */
.reminder-pref-form { display: flex; flex-direction: column; gap: 16px; }
.rpf-row { display: flex; flex-direction: column; gap: 8px; }
.rpf-label { font-size: .82rem; font-weight: 600; color: #5a4a38; }
.rpf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rpf-chip {
  display: flex; align-items: center; gap: 5px;
  font-size: .8rem; color: #5a4a38;
  background: #f0ebe4; border: 1px solid #d8ccb4; border-radius: 20px;
  padding: 4px 12px; cursor: pointer; transition: background .12s;
}
.rpf-chip:hover { background: #e8dcc8; }
.rpf-chip input { width: auto; margin: 0; accent-color: #a9621c; }

/* ── Groups modals ────────────────────────────────────────────────────────── */
.grp-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(30,18,10,.55);
  z-index: 9200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.grp-modal-overlay.hidden { display: none; }
.grp-modal-box {
  background: var(--surface, #fffdf8);
  border-radius: 14px; width: min(460px, 100%);
  max-height: 90vh; overflow-y: auto;
  padding: 26px 24px 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,.2);
}
.grp-modal-box h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem; font-weight: 700; color: #3d2718;
  margin: 0 0 16px;
}
/* ── Guest Management dashboard ──────────────────────────────────────────── */
.gm-box { width: min(760px, 100%); position: relative; }
.gm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gm-head h3 { margin: 0; }
.gm-sub { font-size: .82rem; color: #7d6656; margin: 4px 0 0; }
.gm-close {
  flex-shrink: 0; border: none; background: rgba(139,77,34,.08); color: #6b4a2e;
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer; font-size: .85rem;
  transition: background .15s;
}
.gm-close:hover { background: rgba(139,77,34,.18); }
.gm-stats {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
  margin-bottom: 14px;
}
.gm-stat {
  border-radius: 14px; padding: 10px 6px; text-align: center;
  background: rgba(255, 253, 248, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(188,168,146,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 18px -12px rgba(58,37,18,.25);
}
.gm-stat-num { font-size: 1.3rem; font-weight: 800; line-height: 1.15; color: #3d2718; font-variant-numeric: tabular-nums; }
.gm-stat-label { font-size: .66rem; font-weight: 700; letter-spacing: .03em; color: #7d6656; margin-top: 2px; white-space: nowrap; }
.gm-stat--yes { border-color: rgba(95,139,76,.35); background: rgba(234,247,237,.65); }
.gm-stat--yes .gm-stat-num { color: #2d6a3a; }
.gm-stat--no { border-color: rgba(200,77,60,.3); background: rgba(255,245,245,.65); }
.gm-stat--no .gm-stat-num { color: #8f3b3b; }
.gm-stat--maybe { border-color: rgba(210,176,106,.42); background: rgba(255,249,232,.7); }
.gm-stat--maybe .gm-stat-num { color: #8a6d1c; }
.gm-stat--pending { border-color: rgba(169,98,28,.3); background: rgba(253,244,231,.7); }
.gm-stat--pending .gm-stat-num { color: #a9621c; }
.gm-stat--heads { border-color: rgba(109,74,140,.28); background: rgba(248,242,255,.7); }
.gm-stat--heads .gm-stat-num { color: #6d4a8c; }
.gm-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.gm-search { flex: 1; min-width: 180px; }
.gm-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.gm-filter {
  border: 1px solid rgba(188,168,146,.4); background: rgba(255,255,255,.6);
  color: #7d6656; font-size: .74rem; font-weight: 700; padding: 5px 11px;
  border-radius: 999px; cursor: pointer; transition: all .15s;
}
.gm-filter:hover { border-color: rgba(139,77,34,.3); color: #3d2718; }
.gm-filter.is-active {
  background: linear-gradient(135deg, rgba(139,77,34,.18), rgba(201,154,77,.2));
  border-color: rgba(139,77,34,.3); color: #633515;
}
.gm-table-wrap {
  border: 1px solid #eadfce; border-radius: 12px; background: #fffcf6;
  max-height: 300px; overflow: auto; margin-bottom: 12px;
}
.gm-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.gm-table thead th {
  position: sticky; top: 0; z-index: 1; background: #f6efe3;
  text-align: left; font-size: .7rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #7d6656; padding: 8px 10px;
  border-bottom: 1px solid #eadfce;
}
.gm-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.gm-th-sort:hover { color: #3d2718; }
.gm-sort-arrow { font-size: .6rem; }
.gm-th-num, .gm-td-num { text-align: right; }
.gm-th-check, .gm-td-check { width: 30px; text-align: center; }
.gm-row { cursor: pointer; transition: background .12s; }
.gm-row:hover { background: rgba(139,77,34,.05); }
.gm-row td { padding: 8px 10px; border-bottom: 1px solid #f2ead9; vertical-align: top; }
.gm-cell-sub { font-size: .72rem; color: #9a8672; }
.gm-rel {
  font-size: .68rem; color: #6d4a8c; background: rgba(248,242,255,.9);
  border: 1px solid rgba(109,74,140,.2); border-radius: 999px; padding: 1px 7px; margin-left: 4px;
}
.gm-td-date { white-space: nowrap; font-size: .78rem; color: #7d6656; }
.gm-badge {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.gm-badge--yes { background: #eaf7ed; color: #2d6a3a; border: 1px solid #cde8d3; }
.gm-badge--no { background: #fff0f0; color: #8f3b3b; border: 1px solid #f0d2d2; }
.gm-badge--maybe { background: #fff9e8; color: #8a6d1c; border: 1px solid #f0e3be; }
.gm-badge--pending { background: #fdf4e7; color: #a9621c; border: 1px solid #edd9bd; }
.gm-empty { padding: 22px; text-align: center; font-size: .84rem; color: #9a8672; }
.gm-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gm-action-note { font-size: .78rem; color: #2d6a3a; font-weight: 600; }
.gm-detail {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 90vw);
  background: var(--surface, #fffdf8); z-index: 9300;
  box-shadow: -18px 0 44px -18px rgba(58,37,18,.4);
  border-left: 1px solid #eadfce;
  transform: translateX(105%); transition: transform .24s ease;
  display: flex; flex-direction: column;
}
.gm-detail.open { transform: none; }
.gm-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 12px; border-bottom: 1px solid #f2ead9;
}
.gm-detail-head h4 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem;
  font-weight: 700; color: #3d2718; margin: 0;
}
.gm-detail-body { padding: 14px 18px; overflow-y: auto; }
.gm-detail-row { margin-bottom: 12px; }
.gm-detail-k { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a8672; margin-bottom: 2px; }
.gm-detail-v { font-size: .86rem; color: #3d2718; line-height: 1.4; word-break: break-word; }
@media (max-width: 640px) {
  .gm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gm-table thead th:nth-child(5), .gm-row td:nth-child(5) { display: none; }
}

.grp-label {
  display: block; font-size: .82rem; font-weight: 600;
  color: #5a4a38; margin-bottom: 5px;
}
.req { color: #c0392b; }
.grp-input {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px;
  border: 1.5px solid #d8ccb4; border-radius: 8px;
  font-family: 'Lato', sans-serif; font-size: .88rem;
  background: #fdf8f2; color: #3d2718;
  outline: none; transition: border-color .15s;
}
.grp-input:focus { border-color: #a9621c; }
.grp-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px;
}
.grp-err { font-size: .8rem; color: #c0392b; margin-top: 8px; min-height: 1em; }

/* ── Delete-group confirmation ─────────────────────────────────────────────
   Destructive and irreversible, so it reads red rather than reusing the
   warm group-modal palette. ── */
.gdm-box { border-top: 4px solid #c0392b; max-width: 480px; }
.gdm-head { display: flex; align-items: center; gap: 10px; }
.gdm-head h3 { margin: 0; color: #8a2b22; }
.gdm-icon { font-size: 1.5rem; line-height: 1; }
.gdm-lede { font-size: .9rem; color: #4a3a2c; margin: 14px 0 12px; line-height: 1.5; }
.gdm-lede strong { color: #8a2b22; }
.gdm-panel {
  background: #fdf1f0;
  border: 1px solid #eccac5;
  border-radius: 10px;
  padding: 12px 14px;
}
.gdm-panel-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #8a2b22; margin-bottom: 8px;
}
.gdm-list { list-style: none; margin: 0; padding: 0; }
.gdm-list li {
  font-size: .86rem; color: #4a3a2c;
  padding: 3px 0 3px 18px; position: relative;
}
.gdm-list li::before {
  content: "×"; position: absolute; left: 2px;
  color: #c0392b; font-weight: 700;
}
.gdm-list li strong { color: #8a2b22; }
.gdm-warn {
  font-size: .84rem; font-weight: 700; color: #8a2b22;
  margin: 12px 0 16px; line-height: 1.45;
}
.gdm-delete-btn {
  background: #c0392b; color: #fff; border: 1px solid #a5301f;
}
.gdm-delete-btn:not(:disabled):hover { background: #a5301f; }
.gdm-delete-btn:disabled { background: #e3d9d4; color: #9c8d86; border-color: #d9cdc7; cursor: not-allowed; }

/* ── Inbox panel ──────────────────────────────────────────────────────────── */
.inbox-overlay {
  position: fixed; inset: 0;
  background: rgba(30,18,10,.45);
  z-index: 1200;
  display: flex; align-items: stretch; justify-content: flex-end;
}
.inbox-overlay.hidden { display: none; }
.inbox-panel {
  width: min(380px, 100vw);
  background: var(--surface, #fffdf8);
  border-left: 2px solid #e8dcc8;
  display: flex; flex-direction: column;
}
.inbox-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1.5px solid #ede5d5;
  position: sticky; top: 0;
  background: var(--surface, #fffdf8); z-index: 2;
}
.inbox-close {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: #8b7060; padding: 3px 6px;
}
.inbox-list { flex: 1; overflow-y: auto; }
.inbox-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid #f0ebe4;
  transition: background .12s;
}
.inbox-item.unread { background: #fffbf0; }
.inbox-item-body { flex: 1; min-width: 0; }
.inbox-item-title { font-size: .85rem; font-weight: 600; color: #3d2718; margin-bottom: 2px; }
.inbox-item-text { font-size: .8rem; color: #7d6656; line-height: 1.4; }
.inbox-item-time { font-size: .72rem; color: #a09080; margin-top: 4px; }
.inbox-read-btn {
  background: #f0ebe4; border: 1px solid #d8ccb4;
  border-radius: 5px; cursor: pointer; padding: 3px 7px;
  font-size: .78rem; color: #5f8b4c; flex-shrink: 0;
  align-self: center;
}
.inbox-read-btn:hover { background: #e0d8c0; }

/* ── Occasion reminder popup (bottom-right toast) ────────────────── */
.occ-popup {
  position: fixed; bottom: 28px; right: 28px; z-index: 1400;
  width: min(360px, calc(100vw - 32px));
  background: var(--surface, #fffdf8);
  border: 2px solid #d4a425;
  border-radius: 18px;
  box-shadow: 0 8px 36px rgba(60,30,5,.22);
  transform: translateY(24px);
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.occ-popup.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.occ-popup.hidden { display: none; }
.occ-popup-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1.5px solid #ede5d5;
}
.occ-popup-icon { font-size: 1.3rem; }
.occ-popup-title { flex: 1; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem; font-weight: 700; color: #3d2718; }
.occ-popup-close { background: none; border: none; cursor: pointer; font-size: .95rem; color: #8b7060; padding: 2px 6px; }
.occ-popup-close:hover { color: #3d2718; }
.occ-popup-list { list-style: none; margin: 0; padding: 10px 16px; max-height: 200px; overflow-y: auto; }
.occ-popup-item { padding: 8px 0; border-bottom: 1px solid #f0ebe4; }
.occ-popup-item:last-child { border-bottom: none; }
.occ-popup-item-title { display: block; font-size: .87rem; font-weight: 600; color: #3d2718; }
.occ-popup-item-body { display: block; font-size: .8rem; color: #7d6656; margin-top: 2px; line-height: 1.4; }
.occ-popup-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 10px 16px 14px;
  border-top: 1.5px solid #ede5d5;
}
.occ-popup-view-btn {
  background: none; border: 1.5px solid #a9621c; color: #a9621c;
  border-radius: 20px; padding: 5px 14px; font-size: .78rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.occ-popup-view-btn:hover { background: #a9621c; color: #fff; }
.occ-popup-dismiss {
  background: #a9621c; color: #fff; border: none;
  border-radius: 20px; padding: 5px 14px; font-size: .78rem; cursor: pointer;
  transition: background .15s;
}
.occ-popup-dismiss:hover { background: #8b4e18; }
@media (max-width: 480px) {
  .occ-popup { bottom: 12px; right: 12px; left: 12px; width: auto; }
}

/* ── Nani chatbot ─────────────────────────────────────────────────────────── */
#nani-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 1400;
  width: 62px; height: 76px; border-radius: 31px;
  background: linear-gradient(160deg, #1a0a3d 0%, #4a1f9e 55%, #2a0f6e 100%);
  border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(26,10,61,.55), inset 0 1px 0 rgba(255,215,80,.18);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding-bottom: 2px;
  transition: transform .2s, box-shadow .2s;
}
#nani-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 7px 26px rgba(26,10,61,.7), inset 0 1px 0 rgba(255,215,80,.28);
}
#nani-fab:hover .nani-label {
  background-position: 0% 50%;
}

/* Nani text label */
.nani-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  /* shimmer: animate gradient across text */
  background: linear-gradient(90deg, #ffe8a0 0%, #fff4c2 40%, #f0b860 60%, #ffe8a0 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nani-label-shimmer 3s ease-in-out infinite;
}
@keyframes nani-label-shimmer {
  0%   { background-position: 100% 50%; }
  50%  { background-position: 0%   50%; }
  100% { background-position: 100% 50%; }
}

#nani-panel {
  position: fixed; bottom: 96px; right: 28px; z-index: 1400;
  width: 360px; max-width: calc(100vw - 32px);
  background: #fffdf4; border: 1.5px solid #e0c888;
  border-radius: 18px; box-shadow: 0 8px 36px rgba(90,37,8,.22);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(20px) scale(.97); opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
#nani-panel.open {
  transform: translateY(0) scale(1); opacity: 1; pointer-events: auto;
}

.nani-header {
  background: linear-gradient(135deg, #1a0a3d, #4a1f9e);
  padding: 14px 18px; display: flex; align-items: center; gap: 12px;
}
.nani-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: #ffe8a0; display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.nani-header-text { flex: 1; }
.nani-header-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem; font-weight: 700; color: #ffe8a0; line-height: 1.2;
}
.nani-header-tag { font-size: .72rem; color: #f0c878; opacity: .85; }
#nani-close-btn {
  background: none; border: none; color: #f0c878; font-size: 1.2rem;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
#nani-close-btn:hover { color: #fff; }

.nani-messages {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  max-height: 320px; min-height: 120px;
  display: flex; flex-direction: column; gap: 10px;
}
.nani-bubble {
  max-width: 88%; padding: 9px 13px; border-radius: 14px;
  font-size: .87rem; line-height: 1.55; word-break: break-word;
}
.nani-bubble.nani { /* Nani's reply */
  background: #fdf0d0; border: 1px solid #e8d0a0;
  color: #3d2718; align-self: flex-start; border-bottom-left-radius: 4px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: .95rem;
}
.nani-bubble.user {
  background: #3d1a82; color: #ffd700;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.nani-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 9px 13px; background: #fdf0d0; border: 1px solid #e8d0a0;
  border-radius: 14px; border-bottom-left-radius: 4px;
  align-self: flex-start; width: fit-content;
}
.nani-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: #4a1f9e;
  animation: naniDot 1.2s ease-in-out infinite;
}
.nani-typing span:nth-child(2) { animation-delay: .2s; }
.nani-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes naniDot {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%            { transform: scale(1);  opacity: 1;   }
}

.nani-chips {
  padding: 0 16px 10px; display: flex; flex-wrap: wrap; gap: 6px;
}
.nani-chip {
  background: #fdf0d0; border: 1px solid #d4a86a; color: #7a3a10;
  border-radius: 999px; padding: 5px 12px; font-size: .77rem;
  cursor: pointer; transition: background .15s, color .15s;
  white-space: nowrap;
}
.nani-chip:hover { background: #3d1a82; color: #ffd700; border-color: #3d1a82; }

.nani-input-row {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid #e8d8b0; background: #fdf8ec;
}
#nani-input {
  flex: 1; border: 1.5px solid #d4b87a; border-radius: 999px;
  padding: 8px 14px; font-size: .85rem; background: #fffdf4;
  color: #3d2718; outline: none;
}
#nani-input:focus { border-color: #4a1f9e; }
#nani-send-btn {
  background: linear-gradient(135deg, #1a0a3d, #4a1f9e);
  color: #ffd700; border: none; border-radius: 999px;
  padding: 8px 16px; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
#nani-send-btn:hover { opacity: .88; }
#nani-send-btn:disabled { opacity: .45; cursor: default; }

@media (max-width: 480px) {
  /* Vertical offsets are set with the mobile tab bar rules further down, which
     lift both clear of it; only the horizontal inset differs here. */
  #nani-panel { right: 12px; left: 12px; width: auto; }
  #nani-fab   { right: 16px; }
}

/* ── Feedback system ─────────────────────────────────────────────────────────── */

/* Star rating */
.star-rating {
  display: flex;
  gap: 8px;
  font-size: 1.8rem;
  cursor: pointer;
  margin-top: 6px;
}
.star-rating .star { color: #d8c8a8; transition: color .1s; }
.star-rating .star.active,
.star-rating .star:hover,
.star-rating .star:hover ~ .star { color: #c8900a; }
/* pure CSS hover highlight (right-to-left trick doesn't work without flex-row-reverse) */
.star-rating { flex-direction: row; }

/* Feedback form label */
.fb-label {
  display: block;
  font-size: .83rem;
  font-weight: 600;
  color: #5a4a38;
  margin-bottom: 6px;
}

/* Thumbs row on AI answers */
.query-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e8ddc8;
}
.query-rating-label {
  font-size: .82rem;
  color: #7a6f65;
  flex: 1;
}
.query-thumb-btn {
  background: none;
  border: 1.5px solid #e0d8cc;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  line-height: 1;
  width: auto;
  margin: 0;
}
.query-thumb-btn:hover { background: #f0e8d8; border-color: #c8a870; }
.query-thumb-btn:disabled { opacity: .45; cursor: default; }
.query-thumb-thanks {
  font-size: .8rem;
  color: #3a7d44;
  font-weight: 600;
}

/* ── Nani face / eye-blink ───────────────────────────────────────────────── */
.nani-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  /* soft halo behind eyes */
  padding: 4px 6px;
  border-radius: 50%;
  background: rgba(255,232,160,.08);
}
.nani-eye {
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #ffd700;
  box-shadow: 0 0 7px rgba(255,215,0,.95), 0 0 14px rgba(255,215,0,.45);
  transition: transform .07s;
}
/* Wink: squish scaleY to near-zero then back */
@keyframes nani-wink {
  0%          { transform: scaleY(1); }
  40%         { transform: scaleY(0.05); }
  70%         { transform: scaleY(1.2); }
  100%        { transform: scaleY(1); }
}
.nani-eye.winking {
  animation: nani-wink .4s cubic-bezier(.4,0,.2,1);
}

/* ── Thumbs slide-up on render ───────────────────────────────────────────── */
@keyframes thumbs-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.query-rating-row {
  animation: thumbs-in .4s ease-out both;
}

/* ── Right-edge vertical Feedback tab ───────────────────────────────────── */
#fb-edge-tab {
  position: fixed;
  right: -28px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  z-index: 7500;
  background: linear-gradient(135deg, #5a2508, #8b3c10);
  color: #ffe8a0;
  border: none;
  border-radius: 8px 8px 0 0;
  padding: 8px 18px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: -2px 0 12px rgba(90,37,8,.3);
  transition: right .2s, background .15s;
  white-space: nowrap;
}
#fb-edge-tab:hover {
  right: -18px;
  background: linear-gradient(135deg, #7a3010, #a84810);
}

/* ── Live Chat edge tab — brown to match Feedback, positioned above it ────── */
#lc-edge-tab {
  position: fixed;
  right: -28px;
  top: calc(50% - 120px);
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  z-index: 7501;
  background: linear-gradient(135deg, #5a2508, #8b3c10);
  color: #ffe8a0;
  border: none;
  border-radius: 8px 8px 0 0;
  padding: 8px 18px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: -2px 0 12px rgba(90,37,8,.3);
  transition: right .2s, background .15s;
  white-space: nowrap;
}
#lc-edge-tab:hover {
  right: -18px;
  background: linear-gradient(135deg, #7a3010, #a84810);
}

/* ── Live Chat panel ──────────────────────────────────────────────────────── */
#lc-panel {
  position: fixed; bottom: 28px; left: 28px; z-index: 9050;
  width: 360px; max-width: calc(100vw - 32px);
  background: #fffdf4; border: 1.5px solid #e0c888;
  border-radius: 18px; box-shadow: 0 8px 36px rgba(26,10,61,.22);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(20px) scale(.97); opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
#lc-panel.open {
  transform: translateY(0) scale(1); opacity: 1; pointer-events: auto;
}
.lc-header {
  background: linear-gradient(135deg, #5a2508, #8b3c10);
  padding: 14px 18px; display: flex; align-items: center; justify-content: space-between;
}
.lc-header-left { display: flex; align-items: center; gap: 10px; }
.lc-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #c8901c; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(200,144,28,.5);
}
.lc-status-dot.online {
  background: #4ddd6a;
  box-shadow: 0 0 8px rgba(77,221,106,.7);
}
.lc-header-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem; font-weight: 700; color: #ffe8a0; }
.lc-header-tag  { font-size: .7rem; color: #f0c878; margin-top: 2px; opacity: .85; }
.lc-close-btn   { background: none; border: none; color: #f0c878; font-size: 1.1rem; cursor: pointer; }
.lc-close-btn:hover { color: #ffe8a0; }
.lc-messages {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  max-height: 320px; min-height: 120px;
  display: flex; flex-direction: column; gap: 10px;
  background: #fdfaf6;
}
.lc-bubble {
  max-width: 88%; padding: 9px 13px; border-radius: 14px;
  font-size: .87rem; line-height: 1.55; word-break: break-word; position: relative;
}
.lc-bubble.agent {
  background: #fdf0d0; border: 1px solid #e8d0a0;
  color: #3d2718; align-self: flex-start; border-bottom-left-radius: 4px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: .95rem;
}
.lc-bubble.user {
  background: #8b3c10; color: #ffe8a0;
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.lc-ts {
  display: block; font-size: .65rem; opacity: .55; margin-top: 4px; text-align: right;
}
.lc-input-row {
  display: flex; gap: 8px; padding: 12px 14px;
  border-top: 1px solid #e0d4f0; background: #fdf8f6;
}
#lc-input {
  flex: 1; border: 1.5px solid #d4b87a; border-radius: 999px;
  padding: 8px 14px; font-size: .85rem; background: #fffdf4;
  color: #3d2718; outline: none;
}
#lc-input:focus { border-color: #a8521c; }
#lc-send-btn {
  background: linear-gradient(135deg, #5a2508, #a8521c);
  color: #ffe8a0; border: none; border-radius: 999px;
  padding: 8px 16px; font-size: .82rem; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
#lc-send-btn:hover { opacity: .88; }
#lc-send-btn:disabled { opacity: .45; cursor: default; }

@media (max-width: 480px) {
  #lc-panel { bottom: 80px; left: 12px; right: 12px; width: auto; }
  #lc-edge-tab, #fb-edge-tab { display: none; }
}

/* ── Upgraded feedback modal ─────────────────────────────────────────────── */
.fb-modal-box {
  max-width: 500px;
  width: 95vw;
  padding: 28px 28px 24px;
}
.fb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.fb-modal-header h3 { margin: 0; }
.fb-close-x {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #9c6a42;
  cursor: pointer;
  width: auto;
  margin: 0;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .12s;
}
.fb-close-x:hover { background: #f0e8d8; }

/* Category chips */
.fb-category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.fb-chip {
  padding: 6px 13px;
  border: 1.5px solid #e0d0b0;
  border-radius: 999px;
  background: #fffdf8;
  color: #5a4a38;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  width: auto;
  margin: 0;
}
.fb-chip:hover  { background: #f0e8d8; border-color: #c8a870; }
.fb-chip.active { background: linear-gradient(135deg,#5a2508,#8b3c10); color: #ffe8a0; border-color: #8b3c10; }

/* Screenshot upload zone */
.fb-upload-zone {
  border: 2px dashed #d8c8a8;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  background: #fffdf8;
  color: #9c6a42;
  font-size: .83rem;
  transition: border-color .15s, background .15s;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.fb-upload-zone:hover, .fb-upload-zone.drag-over {
  border-color: #a86030;
  background: #fdf4e8;
}

/* Submit / cancel buttons */
.fb-submit-btn {
  flex: 1;
  background: linear-gradient(135deg,#5a2508,#8b3c10);
  color: #ffe8a0;
  border: none;
  border-radius: 8px;
  padding: 11px 0;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  transition: opacity .15s;
}
.fb-submit-btn:hover { opacity: .9; }
.fb-submit-btn:disabled { opacity: .5; cursor: default; }
.fb-cancel-btn {
  width: auto;
  background: #f0ebe4;
  color: #7a6f65;
  border: 1.5px solid #e0d8cc;
  border-radius: 8px;
  padding: 11px 18px;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}
.fb-cancel-btn:hover { background: #e8e0d8; }

/* ── Nani quick-action row ───────────────────────────────────────────────── */
.nani-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 4px;
  border-top: 1px solid #f0e4cc;
}
.nani-qa-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1.5px solid #e8d8b8;
  border-radius: 999px;
  background: #fffdf4;
  color: #5a3a18;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .12s, border-color .12s;
  width: auto;
  margin: 0;
}
.nani-qa-btn:hover { background: #f5e8d0; border-color: #c8a060; }

@media (max-width: 480px) {
  #fb-edge-tab { display: none; } /* too cramped on mobile, FAB is enough */
  .fb-category-chips { gap: 6px; }
  .fb-chip { font-size: .75rem; padding: 5px 10px; }
}

/* ── Visual refresh 2026 ─────────────────────────────────────── */
:root {
  --bg: #f3efe7;
  --surface: rgba(255, 252, 247, 0.94);
  --surface-2: #f3eadf;
  --line: rgba(188, 168, 146, 0.5);
  --text: #2f241d;
  --text-soft: #726357;
  --primary: #8b4d22;
  --primary-dark: #633515;
  --green: #537d4b;
  --green-dark: #355b34;
  --gold: #c99a4d;
  --danger: #b94e42;
  --shadow: 0 18px 48px rgba(58, 37, 18, 0.10);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.72), transparent 24%),
    radial-gradient(circle at top right, rgba(236, 214, 178, 0.22), transparent 20%),
    linear-gradient(180deg, #fbf7f1 0%, #f4ede3 42%, #efe5d7 100%);
}

body::before {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.42), transparent 18%),
    radial-gradient(circle at 82% 0%, rgba(255,255,255,0.28), transparent 16%),
    linear-gradient(120deg, rgba(255,255,255,0.06), transparent 30%, rgba(139,77,34,0.03));
  opacity: 1;
}

.topbar,
.hero,
.stepper,
.workspace {
  width: min(1440px, calc(100% - 40px));
}

.topbar {
  padding: 16px 18px;
  margin-top: 12px;
  background: rgba(255, 252, 247, 0.74);
  border: 1px solid rgba(188, 168, 146, 0.32);
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(68, 44, 20, 0.08);
  backdrop-filter: blur(16px);
}

.brand-mark {
  width: 48px; height: 48px;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(71, 45, 20, 0.14);
}

.brand-name {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}

.brand-tag,
#auth-status,
.topnav a,
.topnav button {
  color: var(--text-soft);
}

.topnav {
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: rgba(139,77,34,0.05);
  border: 1px solid rgba(139,77,34,0.10);
  border-radius: 999px;
}

.topnav-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topnav-label {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-soft);
  padding: 0 2px 0 4px;
}

.topnav-separator {
  width: 1px;
  align-self: stretch;
  background: rgba(188,168,146,0.36);
}

.nav-pill,
.topnav a,
.topnav button {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(188,168,146,0.38);
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 4px 10px rgba(58, 37, 18, 0.04);
  font-weight: 700;
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .84rem;
  line-height: 1;
}

.nav-pill-icon {
  font-size: .95rem;
  line-height: 1;
}

.nav-pill-text {
  white-space: nowrap;
}

/* Top-level nav sizing. These need more specificity than they look: the
   `.nav-pill, .topnav a, .topnav button` rule above sets .84rem, and
   `.topnav button` (0-1-1) outranks a bare `.nav-dd-trigger` (0-1-0), so the
   triggers must be qualified with .topnav to win. #nav-pricing is an id and
   already outranks it. Dropdown entries keep .84rem — only the top row grows. */
.topnav .nav-dd-trigger { font-size: .97rem; }
#nav-pricing { font-size: .97rem; }
#nav-pricing .nav-pill-icon { font-size: 1.05rem; }

.nav-pill-accent {
  background: linear-gradient(135deg, rgba(139,77,34,0.10), rgba(201,154,77,0.10));
}

.topnav a:hover,
.topnav button:hover {
  background: rgba(139,77,34,0.12);
  color: var(--text);
  border-color: rgba(139,77,34,0.18);
  box-shadow: 0 10px 20px rgba(58, 37, 18, 0.08);
}

.topnav a.active,
.topnav button.active {
  background: linear-gradient(135deg, rgba(139,77,34,0.18), rgba(201,154,77,0.20));
  color: var(--primary-dark);
  border-color: rgba(139,77,34,0.22);
  box-shadow: 0 12px 24px rgba(58, 37, 18, 0.10);
}

.topnav a.active::after,
.topnav button.active::after {
  display: none;
}

.topbar-actions {
  gap: 12px;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-blue-gloss,
.btn-blue-ghost,
.btn-secondary-action,
.btn-generate,
.chip,
.share-card-trigger-btn,
.mobile-nav button,
.modal-tabs button,
.weekly-prompt-ask,
.weekly-prompt-dismiss,
.btn-revoke,
.btn-share-asset,
.nani-chip,
.next-q-btn,
.occ-popup-view-btn,
.occ-popup-dismiss {
  border-radius: 999px;
}

.btn {
  box-shadow: 0 8px 20px rgba(68, 44, 20, 0.08);
}

.btn:hover,
.btn-blue-gloss:hover,
.btn-generate:hover,
.chip:hover,
.share-card-trigger-btn:hover,
.weekly-prompt-ask:hover,
.nani-chip:hover,
.next-q-btn:hover,
.occ-popup-view-btn:hover,
.occ-popup-dismiss:hover {
  transform: translateY(-1px);
}

.btn:focus-visible,
.topnav a:focus-visible,
.topnav button:focus-visible,
.chip:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.mobile-nav button:focus-visible,
.share-card-trigger-btn:focus-visible,
.btn-blue-gloss:focus-visible,
.btn-blue-ghost:focus-visible,
.btn-secondary-action:focus-visible,
.weekly-prompt-ask:focus-visible,
.nani-chip:focus-visible,
.next-q-btn:focus-visible,
.occ-popup-view-btn:focus-visible,
.occ-popup-dismiss:focus-visible {
  outline: 3px solid rgba(201, 154, 77, 0.35);
  outline-offset: 2px;
}

.card,
.modal-box,
.share-card-inner,
.occasions-panel,
.groups-panel,
#nani-panel,
#auth-modal .modal-box,
#share-modal .modal-box,
#dup-modal .modal-box,
#tribute-modal .modal-box {
  background: var(--surface);
  border-color: rgba(188, 168, 146, 0.42);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.card:hover {
  box-shadow: 0 24px 58px rgba(58, 37, 18, 0.12);
}

.card::before {
  height: 4px;
  background: linear-gradient(90deg, rgba(139,77,34,0.08), var(--gold) 28%, var(--primary) 58%, rgba(95,125,75,0.66) 86%, rgba(139,77,34,0.08));
  opacity: .85;
}

.hero {
  position: relative;
  border-radius: 34px;
  border: 1px solid rgba(188, 168, 146, 0.35);
  box-shadow: 0 24px 60px rgba(63, 40, 18, 0.10);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 85% 18%, rgba(255,255,255,0.22), transparent 18%),
    radial-gradient(circle at 12% 10%, rgba(139,77,34,0.06), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent 38%);
}

.hero-copy {
  padding: 12px;
}

.eyebrow {
  color: #8c5a31;
}

.hero h1 {
  font-size: clamp(1.55rem, 3vw, 2.9rem);
  line-height: 1.02;
}

.hero p {
  font-size: .93rem;
  max-width: 760px;
}

.hero-features {
  gap: 8px;
  margin-top: 14px;
}

.hero-features li {
  gap: 10px;
  font-size: .84rem;
  color: #67584f;
}

.hf-icon {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(139,77,34,0.10);
  box-shadow: inset 0 0 0 1px rgba(139,77,34,0.08);
}

.proof-chips {
  gap: 8px;
  margin-top: 12px;
}

.proof-chip,
.badge,
.tag,
.shared-badge,
.sidebar-badge,
.card-badge,
.trust-badge,
.context-panel-opt,
.source-chip,
.inbox-badge {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.proof-chip {
  background: rgba(139,77,34,0.08);
  color: #7a5030;
  border-color: rgba(139,77,34,0.18);
  font-size: .72rem;
}

.hero-art {
  border-radius: 28px;
  background: linear-gradient(180deg, #f7eedc 0%, #ebd8b4 100%);
  box-shadow: inset 0 0 0 1px rgba(188,168,146,0.28);
  overflow: hidden;
}

.family-photo-frame {
  overflow: hidden;
  border-radius: 28px;
}

.fph-photo-wrap img {
  border-radius: 18px;
  border-color: rgba(139,77,34,0.75);
  box-shadow: 0 18px 35px rgba(74, 47, 20, 0.18);
}

.hero-quote-strip {
  padding: 8px 20px 46px;
}

.hero-quote-mark {
  color: rgba(139,77,34,0.42);
}

.hero-quote-strip .hero-quote-text {
  color: #6f4420;
  font-size: 1.4rem;
}

.stepper,
.stepper-pill {
  border-radius: 28px;
  border: 1px solid rgba(188,168,146,0.34);
  box-shadow: 0 18px 42px rgba(63, 40, 18, 0.08);
}

.step {
  background: rgba(255,255,255,0.40);
  border: 1px solid rgba(188,168,146,0.18);
}

.step-num {
  background: linear-gradient(180deg, var(--gold), var(--primary));
  box-shadow: 0 8px 16px rgba(139,77,34,0.18);
}

.workspace {
  gap: 20px;
}

.sidebar,
.canvas {
  min-height: 420px;
}

.sidebar {
  top: 96px;
  padding: 20px;
  border: 1px solid rgba(188, 168, 146, 0.32);
  border-radius: 28px;
  background: rgba(255, 252, 247, 0.70);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(63, 40, 18, 0.08);
}

.sidebar-header,
.sidebar-util-row {
  border-color: rgba(188, 168, 146, 0.35);
}

.sidebar-badge,
.card-badge {
  background: linear-gradient(135deg, #8b4d22, #b36a33);
  letter-spacing: .08em;
}

.search,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea,
input[type="file"] {
  background: rgba(255,255,255,0.9);
  border-color: rgba(188,168,146,0.55);
}

.search,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea,
input[type="file"] {
  box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset;
}

.search:focus,
input:focus,
select:focus,
textarea:focus,
.question-box:focus {
  box-shadow: 0 0 0 4px rgba(139,77,34,0.10);
}

.filters,
.prompt-chips {
  gap: 10px;
}

.chip {
  background: rgba(255,255,255,0.88);
  color: var(--text-soft);
  border: 1px solid rgba(188,168,146,0.45);
}

.chip.active,
.prompt-chips .chip {
  background: linear-gradient(135deg, #fff9ef, #f6e6cf);
  color: #5d3817;
  border-color: rgba(139,77,34,0.18);
}

.file-row {
  background: rgba(255,255,255,0.88);
  border-color: rgba(188,168,146,0.45);
}

.file-row:hover {
  box-shadow: 0 12px 28px rgba(63, 40, 18, 0.08);
  border-color: rgba(139,77,34,0.24);
}

.icon-btn {
  background: rgba(255,255,255,0.92);
  border-color: rgba(188,168,146,0.55);
}

.icon-btn:hover {
  background: rgba(139,77,34,0.08);
  border-color: rgba(139,77,34,0.24);
  color: var(--primary-dark);
}

.canvas {
  gap: 20px;
}

.ask-card,
.answer-card {
  padding: 24px;
  border: 1px solid rgba(188,168,146,0.30);
  border-radius: 28px;
}

.ask-card h2,
.answer-card h2 {
  font-size: 1.45rem;
  border-color: rgba(188,168,146,0.32);
}

.weekly-prompt-card,
.on-this-day-banner,
.context-panel,
.answer-question,
.evidence-excerpt,
.storage-card {
  border-color: rgba(188,168,146,0.40);
  box-shadow: 0 10px 24px rgba(63, 40, 18, 0.05);
}

.weekly-prompt-card {
  background: linear-gradient(135deg, #fff8ea, #f6e1b7);
}

.context-panel {
  background: linear-gradient(180deg, rgba(252,247,239,0.96), rgba(246,238,225,0.94));
}

.question-box {
  background: rgba(255,255,255,0.96);
  border-color: rgba(188,168,146,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.answer-question {
  background: linear-gradient(135deg, #fff8ec, #f5ead9);
  border-left-color: var(--primary);
}

.answer-section-heading {
  color: var(--primary-dark);
  border-color: rgba(188,168,146,0.50);
}

.answer-body,
#result,
.narrative {
  color: var(--text);
}

.trust-badge,
.badge-trust {
  background: #fff5d9;
  color: #855f28;
}

.badge-high,
.tag-ok {
  background: #e6f1df !important;
  color: #356233 !important;
}

.modal-box {
  border-radius: 28px;
  padding: 30px 32px;
}

.modal-tabs button {
  background: rgba(243, 234, 223, 0.9);
  border-color: rgba(188,168,146,0.35);
}

.modal-tabs button.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.err {
  color: var(--danger);
}

.mobile-nav {
  position: sticky; bottom: 12px; width: min(96%, 420px); margin: 0 auto 14px;
  display: none; justify-content: space-between; gap: 8px; padding: 10px; z-index: 30;
  background: rgba(255,252,247,.92); border: 1px solid rgba(188,168,146,.45);
  border-radius: 26px; box-shadow: 0 16px 34px rgba(58, 37, 18, 0.12), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
}

.mobile-nav button {
  flex: 1; padding: 11px 7px; border: 1px solid transparent; border-radius: 20px;
  background: rgba(255,255,255,.72); color: var(--text-soft); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  box-shadow: 0 4px 10px rgba(58, 37, 18, 0.04);
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mobile-nav button:hover { background: rgba(139,77,34,.08); color: var(--text); }
.mobile-nav button.active {
  background: linear-gradient(135deg, rgba(139,77,34,.18), rgba(201,154,77,.18));
  color: var(--primary-dark); border-color: rgba(139,77,34,.20);
  box-shadow: 0 10px 18px rgba(58, 37, 18, 0.10); transform: translateY(-1px);
}

.mob-tab-icon { font-size: 1.15rem; line-height: 1; }
.mob-tab-label { font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.inbox-badge { background: linear-gradient(135deg, #b94e42, #8f322a); }

.share-card-trigger-btn,
.share-card-inner,
.share-card-header,
.share-card-preview {
  border-color: rgba(188,168,146,0.40);
}

.share-card-trigger-btn {
  color: #6f3918;
  background: linear-gradient(135deg, #fff8ec, #f6e2b7);
}

.share-card-header,
.occasions-header,
.groups-panel-header,
.nani-header {
  background: linear-gradient(135deg, #7b441d, #a96a35);
}

.share-card-header-title,
.occasions-header-title,
.groups-panel-title,
.nani-header-name {
  color: #fff7ea;
}

.share-card-preview,
.occasions-body,
.groups-panel,
#nani-panel,
.groups-card,
.group-card {
  background: rgba(255,252,247,0.94);
}

.groups-panel,
.occasions-panel {
  border-left-color: rgba(188,168,146,0.30);
}

.groups-panel-header,
.occasions-header {
  position: sticky;
  top: 0;
}

@media (max-width: 980px) {
  .topbar {
    gap: 10px;
    flex-wrap: wrap;
  }

  .topnav {
    width: 100%;
    justify-content: flex-start;
  }

  .mobile-nav {
    display: flex;
  }

  .workspace {
    gap: 16px;
  }

  .sidebar,
  .ask-card,
  .answer-card {
    border-radius: 24px;
  }

  /* Compact hero illustration on stacked layout to avoid huge empty space */
  .hero { gap: 12px; }
  .hero-art {
    padding: 8px 10px 4px;
    border-radius: 24px;
  }
  .family-photo-frame,
  .fph-svg-wrap { max-width: 460px; margin: 0 auto; }
  .fph-svg-wrap > svg {
    max-height: 260px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
  }
  .fph-photo-wrap { min-height: 0; padding: 4px; }
  .fph-photo-wrap img { height: auto; max-height: 260px; }
  .hero-quote-strip { padding: 6px 16px 14px; }
  .hero-quote-strip .hero-quote-text { font-size: 1.15rem; min-height: 2.6em; }
  .hero-quote-mark { font-size: 2.6rem; margin-bottom: 2px; }
}

@media (max-width: 640px) {
  .hero,
  .stepper,
  .workspace {
    width: calc(100% - 18px);
  }

  .topbar {
    padding: 14px;
    border-radius: 22px;
  }

  .topnav {
    padding: 10px;
    gap: 10px;
  }

  .topnav-group {
    width: 100%;
  }

  .topnav-separator {
    display: none;
  }

  .hero {
    border-radius: 26px;
  }

  .hero h1 {
    font-size: 1.55rem;
  }

  .sidebar,
  .ask-card,
  .answer-card,
  .modal-box {
    padding: 18px;
  }
}

@media (max-width: 380px) {
  .mobile-nav { width: calc(100% - 14px); gap: 6px; }
  .mob-tab-label { letter-spacing: .05em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   Landing polish pass — refreshed visual language
   ───────────────────────────────────────────────────────────── */

/* Gradient-accent word — used inside headings for emphasis */
.gradient-word {
  background: linear-gradient(90deg, #d68a3a 0%, #b8580a 45%, #7a4a1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: italic;
}
.gradient-word-cool {
  background: linear-gradient(90deg, #b18a4a 0%, #8b4d22 50%, #4a2c14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Hero H1 — bigger, chunkier, tighter tracking */
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 4.2rem);
  letter-spacing: -0.012em;
  line-height: 1.02;
}
.hero h1 em,
.hero h1 .gradient-word {
  font-style: italic;
}

/* Announcement ribbon — thin gradient bar above the topbar */
.announcement-bar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 44px 8px 16px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  color: #fff5df;
  background: linear-gradient(90deg, #6f3918 0%, #a96a35 50%, #c99a4d 100%);
  box-shadow: 0 6px 20px rgba(58, 37, 18, 0.14);
  text-align: center;
}
.announcement-bar a {
  color: #fff8e8; text-decoration: underline; text-underline-offset: 3px;
  font-weight: 700;
}
.announcement-bar a:hover { color: #fff; }
.announcement-bar .announcement-dismiss {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.14); color: #fff5df; border: 0;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s ease;
}
.announcement-bar .announcement-dismiss:hover { background: rgba(255,255,255,0.28); }
.announcement-bar.is-hidden { display: none; }

/* Pill CTA polish — stronger radius, deeper hover lift */
.hero-actions .btn,
.btn-primary,
.btn-ghost,
.btn-secondary {
  border-radius: 999px;
  transition: transform 0.2s cubic-bezier(.2,.7,.2,1),
              box-shadow 0.25s ease,
              background 0.18s ease,
              color 0.18s ease;
}
.hero-actions .btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(58, 37, 18, 0.18);
}
.hero-actions .btn:active,
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(58, 37, 18, 0.14);
}

/* Sticky topbar — shrink on scroll (JS toggles .is-scrolled on body) */
.topbar {
  position: sticky; top: 0; z-index: 40;
  transition: padding 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
body.has-announcement .topbar { top: 38px; }
body.is-scrolled .topbar {
  padding-top: 8px;
  padding-bottom: 8px;
  box-shadow: 0 10px 24px rgba(58, 37, 18, 0.12);
  background: rgba(255, 252, 245, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.is-scrolled .brand-mark {
  transform: scale(0.86);
  transition: transform 0.22s ease;
}
body.is-scrolled .brand-tag {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.18s ease, max-height 0.22s ease;
}

/* Section eyebrow — small-cap label used above panel headings */
.section-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-size: 0.66rem;
  font-weight: 800;
  color: #8c5a31;
  background: linear-gradient(135deg, rgba(255,255,255,0.72), rgba(246,230,207,0.72));
  border: 1px solid rgba(139,77,34,0.18);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 10px;
}

/* ─────────────────────────────────────────────────────────────
   Landing sections — feature grid, live preview, FAQ
   ───────────────────────────────────────────────────────────── */
.landing-section {
  width: min(1180px, calc(100% - 40px));
  margin: 72px auto;
  padding: 0;
  position: relative;
}
.landing-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.landing-section-head h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 12px 0 14px;
  color: #3d2718;
}
.landing-section-head p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #6b4a2a;
  max-width: 560px;
  margin: 0 auto;
}

/* ── Feature grid (3-col cards with icon box) ─────────────── */
.landing-features .feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  position: relative;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid rgba(188, 168, 146, 0.35);
  border-radius: 22px;
  padding: 26px 22px 24px;
  box-shadow: 0 8px 22px rgba(63, 40, 18, 0.05);
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1),
              box-shadow 0.25s ease,
              border-color 0.25s ease;
}
.feature-card:hover,
.feature-card:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 22px 44px rgba(63, 40, 18, 0.10);
  border-color: rgba(139, 77, 34, 0.35);
}
.feature-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
/* Directional cue that fades in on hover/focus */
.feature-card-arrow {
  position: absolute;
  right: 18px; bottom: 16px;
  font-size: 1.05rem; font-weight: 700; color: var(--primary);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.feature-card:hover .feature-card-arrow,
.feature-card:focus-visible .feature-card-arrow {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card:hover, .feature-card:focus-visible { transform: none; }
  .feature-card-arrow { transition: none; }
}
.feature-icon-box {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fff4e0, #f0d9a8);
  border: 1px solid rgba(139, 77, 34, 0.22);
  border-radius: 16px;
  font-size: 1.55rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
              0 6px 14px rgba(139, 77, 34, 0.10);
  margin-bottom: 16px;
}
.feature-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #3d2718;
  margin: 0 0 8px;
  line-height: 1.2;
}
.feature-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #6b4a2a;
  margin: 0;
}

/* ── Live preview rotator ─────────────────────────────────── */
.landing-preview .preview-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(180deg, #fffdf8, #f9ecd0);
  border: 1px solid rgba(188, 168, 146, 0.45);
  border-radius: 28px;
  padding: 30px 32px;
  box-shadow: 0 22px 60px rgba(63, 40, 18, 0.10);
  min-height: 240px;
  position: relative;
  overflow: hidden;
}
.preview-slide {
  display: none;
  animation: previewFadeIn 0.55s ease both;
}
.preview-slide.is-active { display: block; }
@keyframes previewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.preview-slide-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8c5a31;
  margin-bottom: 12px;
  padding: 3px 10px;
  background: rgba(139, 77, 34, 0.10);
  border-radius: 999px;
}
.preview-q {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #4a2c14;
  margin: 0 0 14px;
  line-height: 1.4;
}
.preview-a {
  background: #fff;
  border: 1px solid rgba(188, 168, 146, 0.4);
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #3d2718;
  box-shadow: 0 4px 12px rgba(63, 40, 18, 0.05);
}
.preview-a .preview-cursor {
  display: inline-block;
  width: 8px; height: 1em;
  vertical-align: text-bottom;
  background: #b8580a;
  animation: previewBlink 1s steps(2) infinite;
  margin-left: 2px;
}
@keyframes previewBlink { 50% { opacity: 0; } }
.preview-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.76rem;
  color: #7a5030;
  background: #fff8e8;
  border: 1px solid rgba(139, 77, 34, 0.20);
  border-radius: 999px;
  padding: 3px 12px;
}
.preview-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.preview-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(139, 77, 34, 0.22);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.preview-dot.is-active {
  background: #8b4d22;
  transform: scale(1.35);
}

/* Compact timeline snippet inside preview */
.preview-timeline {
  display: flex; flex-direction: column; gap: 10px;
}
.preview-timeline-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid rgba(188, 168, 146, 0.35);
  border-radius: 14px;
}
.preview-timeline-year {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  color: #8b4d22;
  font-size: 1.05rem;
  min-width: 56px;
}
.preview-timeline-text {
  font-size: 0.9rem;
  color: #4a2c14;
  line-height: 1.5;
}

/* ── FAQ accordion ────────────────────────────────────────── */
.landing-faq .faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: #ffffff;
  border: 1px solid rgba(188, 168, 146, 0.40);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.faq-item[open] {
  box-shadow: 0 14px 32px rgba(63, 40, 18, 0.08);
  border-color: rgba(139, 77, 34, 0.35);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #3d2718;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #8b4d22;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(139, 77, 34, 0.08);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.22s ease, background 0.22s ease;
}
.faq-item[open] summary::after {
  content: "−";
  background: rgba(139, 77, 34, 0.18);
  transform: rotate(180deg);
}
.faq-item .faq-answer {
  padding: 0 22px 20px;
  font-size: 0.94rem;
  line-height: 1.65;
  color: #5a4028;
}
.faq-item .faq-answer p { margin: 0 0 10px; }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }

/* Responsive tweaks for landing sections */
@media (max-width: 980px) {
  .landing-section { margin: 56px auto; }
  .landing-section-head { margin-bottom: 32px; }
  .landing-features .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .landing-preview .preview-wrap { padding: 22px; }
}
@media (max-width: 640px) {
  .landing-section { width: calc(100% - 24px); margin: 40px auto; }
  .landing-features .feature-grid { grid-template-columns: 1fr; }
  .feature-card { padding: 22px 18px; }
  .feature-icon-box { width: 46px; height: 46px; font-size: 1.35rem; border-radius: 14px; }
  .faq-item summary { font-size: 1.05rem; padding: 16px 18px; }
  .faq-item .faq-answer { padding: 0 18px 16px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Optional filters — collapsible card with searchable dropdown fields.
   ══════════════════════════════════════════════════════════════════════════ */
.ask-card { overflow: visible; }   /* let filter dropdown lists escape the card */
.filters-card {
  margin: 14px 0 4px;
  border: 1px solid #e5d9c4; border-radius: 16px;
  background: linear-gradient(180deg, #fbf7ee 0%, #f7f1e3 100%);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.filters-card[open] { box-shadow: 0 10px 28px -20px rgba(120, 78, 30, .4); border-color: #d9c79f; }
.filters-summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: 16px;
  font-size: .86rem; color: #6b5a44;
  transition: background .15s ease;
}
.filters-summary::-webkit-details-marker { display: none; }
.filters-summary:hover { background: rgba(201, 154, 77, .06); }
.filters-summary:focus-visible { outline: 2px solid #c99a4d; outline-offset: 2px; }
.filters-summary-lead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.filters-icon { font-size: 1rem; line-height: 1; }
.filters-title { font-weight: 700; color: #3d2718; }
.filters-hint { font-size: .76rem; color: #9c8a72; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filters-summary-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.filters-badge {
  background: linear-gradient(135deg, #c99a4d, #a9621c); color: #fff;
  font-size: .68rem; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.filters-toggle-word { font-size: .74rem; font-weight: 700; color: #8b4d22; text-transform: uppercase; letter-spacing: .06em; }
.filters-toggle-word .filters-word-close { display: none; }
.filters-card[open] .filters-toggle-word .filters-word-open { display: none; }
.filters-card[open] .filters-toggle-word .filters-word-close { display: inline; }
.filters-caret { font-size: .7rem; transition: transform .2s ease; }
.filters-card[open] .filters-caret { transform: rotate(180deg); }
.filters-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px;
  padding: 6px 16px 12px;
  border-top: 1px dashed rgba(139, 77, 34, .15);
  animation: fltFadeIn .22s ease-out;
}
@keyframes fltFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.flt-label {
  display: flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 700; color: var(--primary);
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px;
}
.flt-info { color: #b09a7c; cursor: help; font-size: .78rem; font-weight: 400; text-transform: none; }
.flt-info:focus-visible { outline: 2px solid #c99a4d; outline-offset: 1px; border-radius: 50%; }
.flt-combo { position: relative; }
.flt-combo input, .flt-combo select {
  width: 100%; margin: 0; box-sizing: border-box;
  font-size: .85rem; font-family: 'Lato', sans-serif; color: #3d2718;
  background: #fffdf8; border: 1px solid #e0d2b6; border-radius: 12px;
  padding: 9px 56px 9px 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.flt-combo select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
.flt-combo input:focus, .flt-combo select:focus {
  outline: none; border-color: #c99a4d; background: #fff;
  box-shadow: 0 0 0 3px rgba(201, 154, 77, .18);
}
.flt-combo input::placeholder { color: #b6a68c; }
.flt-combo.has-value input { border-color: #cfae72; background: #fffcf3; }
.flt-caret {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: .62rem; color: #a08a68; pointer-events: none;
  transition: transform .18s ease;
}
.flt-combo.is-open .flt-caret { transform: translateY(-50%) rotate(180deg); }
.flt-clear {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(169, 98, 28, .12); color: #8b4d22;
  font-size: .85rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.flt-clear:hover { background: rgba(169, 98, 28, .25); }
.flt-list {
  position: absolute; z-index: 80; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 4px; list-style: none;
  background: #fffdf8; border: 1px solid #e0d2b6; border-radius: 12px;
  box-shadow: 0 16px 38px -14px rgba(80, 50, 20, .35);
  max-height: 210px; overflow-y: auto;
  animation: fltFadeIn .16s ease-out;
}
.flt-list [role="option"] {
  padding: 8px 10px; border-radius: 8px; font-size: .84rem;
  color: #4a3620; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flt-list [role="option"]:hover, .flt-list [role="option"].is-hl { background: rgba(201, 154, 77, .16); }
.flt-empty { padding: 9px 10px; font-size: .8rem; color: #9c8a72; font-style: italic; }
/* Keywords chips field — spans the full grid width for room to breathe */
.flt-field-chips { grid-column: 1 / -1; }
.flt-help { font-size: .72rem; color: #9c8a72; line-height: 1.45; margin-top: 5px; }
.flt-combo-chips .chips-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 42px; padding: 6px 8px;
  background: #fffdf8; border: 1px solid #e0d2b6; border-radius: 12px;
  cursor: text; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.flt-combo-chips.is-focus .chips-input {
  border-color: #c99a4d; background: #fff; box-shadow: 0 0 0 3px rgba(201, 154, 77, .18);
}
.flt-combo-chips.has-value .chips-input { border-color: #cfae72; }
.chip-token {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  background: linear-gradient(135deg, #c99a4d, #a9621c); color: #fff;
  border-radius: 999px; padding: 3px 5px 3px 11px;
  font-size: .78rem; font-weight: 600;
}
.chip-token > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-token button {
  flex-shrink: 0; border: none; cursor: pointer;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(255, 255, 255, .25); color: #fff;
  font-size: .72rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.chip-token button:hover { background: rgba(255, 255, 255, .5); }
.chips-search {
  flex: 1; min-width: 100px;
  border: none !important; outline: none;
  background: transparent !important; box-shadow: none !important;
  margin: 0; padding: 4px 2px !important;
  font-size: .85rem; font-family: 'Lato', sans-serif; color: #3d2718;
}
.chips-search::placeholder { color: #b6a68c; }
.filters-foot { display: flex; justify-content: flex-end; padding: 0 16px 12px; }
.filters-clear-all {
  background: transparent; border: none; color: #a9621c;
  font-size: .76rem; font-weight: 700; cursor: pointer;
  padding: 6px 10px; border-radius: 999px; transition: background .15s ease;
}
.filters-clear-all:hover { background: rgba(169, 98, 28, .08); }
@media (max-width: 640px) {
  .filters-grid { grid-template-columns: 1fr; }
  .filters-hint { display: none; }
}
/* Ask AI button internals */
.btn-generate { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn-gen-icon { font-size: 1.05rem; line-height: 1; }
.btn-spinner {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2.5px solid rgba(255, 248, 236, .35); border-top-color: #fff8ec;
  animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   Digital Invitations — landing showcase
   ══════════════════════════════════════════════════════════════════════════ */
.landing-invitations .inv-studio {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 34px;
}
.inv-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.inv-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 26px -16px rgba(60, 34, 12, .35);
  transition: transform .22s ease, box-shadow .22s ease;
  text-align: center;
  display: block;
}
.inv-thumb:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(60, 34, 12, .45); }
.inv-thumb:focus-visible { outline: 3px solid #c99a4d; outline-offset: 3px; }
.inv-thumb-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 14px 18px;
}
.inv-thumb-motif { font-size: 1.8rem; line-height: 1; }
.inv-thumb-scene {
  width: 66%;
  max-width: 150px;
  height: auto;
  color: currentColor;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .08));
}
.inv-thumb--gold .inv-thumb-scene { filter: drop-shadow(0 1px 2px rgba(122, 83, 16, .35)); }
.inv-thumb--minimal .inv-thumb-scene { filter: none; }
.inv-thumb-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; }
.inv-thumb-sub { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }

/* Mini invitation card thumbnails (Pixivite-style card previews) */
.inv-thumb-card {
  position: absolute;
  inset: 10px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 12px;
  text-align: center;
  color: inherit;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.inv-thumb--minimal .inv-thumb-card { background: rgba(255, 255, 255, .55); border-color: rgba(180, 145, 90, .35); }
.inv-thumb--gold .inv-thumb-card { background: rgba(255, 245, 210, .18); border-color: rgba(58, 31, 8, .35); box-shadow: inset 0 0 0 1px rgba(122, 83, 16, .18); }
.inv-thumb--memorial .inv-thumb-card { background: rgba(252, 250, 244, .45); }

.inv-thumb-corner {
  width: 78%;
  max-width: 130px;
  height: auto;
  color: currentColor;
  flex-shrink: 0;
  opacity: .95;
}
.inv-thumb-corner--top { margin-bottom: 2px; }
.inv-thumb-corner--bot { margin-top: 2px; transform: none; }

.inv-thumb-eyebrow {
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .78;
  margin-top: 2px;
}
.inv-thumb-couple {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 4px 0 2px;
}
.inv-thumb-couple--memorial { font-size: 1.2rem; font-style: italic; font-weight: 600; }
.inv-thumb-and {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  opacity: .75;
  margin: 0 3px;
}
.inv-thumb-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: .015em;
}
.inv-thumb-rule {
  width: 30%;
  height: 1px;
  background: currentColor;
  opacity: .45;
  margin: 3px auto 4px;
}
.inv-thumb-when {
  font-size: .62rem;
  letter-spacing: .1em;
  font-weight: 600;
  opacity: .85;
}
.inv-thumb-where {
  font-size: .58rem;
  letter-spacing: .06em;
  opacity: .7;
  margin-top: 2px;
  padding: 0 4px;
  line-height: 1.25;
}
.inv-thumb-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .82);
  color: #6b4a1a;
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}
.inv-thumb--elegant  { background: radial-gradient(120% 100% at 50% 0%, #fbf5e6 0%, #f0e6cc 60%, #d9c79f 100%); color: #3d2718; }
.inv-thumb--floral   { background: radial-gradient(120% 100% at 50% 0%, #fff1f2 0%, #fde2e4 45%, #f8c5c9 100%); color: #7a2a34; }
.inv-thumb--festive  { background: radial-gradient(120% 100% at 50% 0%, #ffedc9 0%, #f6b23c 50%, #b6541f 100%); color: #40260a; }
.inv-thumb--memorial { background: radial-gradient(120% 100% at 50% 0%, #f4f2ec 0%, #dcd6c6 55%, #a9a294 100%); color: #3a352b; }
.inv-thumb--minimal  { background: linear-gradient(180deg, #ffffff 0%, #f4f0e6 100%); color: #2a2018; border: 1px solid #ead9b8; }
.inv-thumb--gold     { background: radial-gradient(120% 90% at 22% 12%, rgba(255,248,210,.55) 0%, transparent 45%), linear-gradient(135deg, #b8862b 0%, #e8c866 22%, #f4dc8a 44%, #d4a832 62%, #a5731a 82%, #7a5310 100%); color: #2a1a08; }
.inv-thumb--gold .inv-thumb-badge { background: rgba(58, 31, 8, .22); color: #2a1a08; }
.inv-hero-side { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.inv-hero-cta { text-align: center; }
.inv-hero-btn-row {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.inv-hero-btn { padding: 14px 32px !important; font-size: 1.05rem !important; }
.inv-hero-note { margin-top: 10px; font-size: .82rem; color: #7a6f65; font-style: italic; }

/* ══════════════════════════════════════════════════════════════════════════
   Invitation card — themed presentation used in landing + designer + preview
   ══════════════════════════════════════════════════════════════════════════ */
.inv-card {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(30, 18, 8, .55), 0 8px 20px -14px rgba(60, 34, 12, .3);
  position: relative;
  isolation: isolate;
  transition: transform .3s ease;
}
.inv-card:hover { transform: translateY(-2px); }
.inv-card-inner {
  position: absolute;
  inset: 22px;
  border-radius: 16px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  z-index: 2;
}
.inv-card-motif { font-size: 2rem; line-height: 1; margin-bottom: 4px; }
.inv-card-motif--svg { display: flex; align-items: center; justify-content: center; margin: 6px 0 14px; }
.inv-card-motif--svg svg { width: 180px; height: 180px; max-width: 62%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.inv-card-eyebrow { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; opacity: .8; }
.inv-card-names {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 4.8vw, 2.8rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 4px 0 2px;
  letter-spacing: .01em;
}
.inv-card-and { font-style: italic; font-weight: 400; opacity: .7; margin: 0 6px; }
.inv-card-rule { width: 60px; height: 1px; background: currentColor; opacity: .35; margin: 8px 0; }
/* When an AI SVG divider is placed inside the rule, expand it and hide the plain background. */
.inv-card-rule.has-svg { width: 78%; max-width: 260px; height: 14px; background: none; opacity: .85; margin: 10px 0 12px; display: flex; align-items: center; justify-content: center; }
.inv-card-rule.has-svg svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }

/* AI-generated corner flourishes (top-left, top-right, bottom-left, bottom-right). */
.inv-card-corner { position: absolute; width: 68px; height: 68px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.inv-card-corner.has-svg { opacity: .72; }
.inv-card-corner svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.inv-card-corner--tl { top: 14px; left: 14px; }
.inv-card-corner--tr { top: 14px; right: 14px; transform: scaleX(-1); }
.inv-card-corner--bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
.inv-card-corner--br { bottom: 14px; right: 14px; transform: scale(-1, -1); }

/* ── Hero photo layout ────────────────────────────────────────────────────
   When a photo is active it becomes the centrepiece: a full-width hero band
   across the upper half of the card, with the invitation text floating below
   in a frosted-glass panel (semi-transparent white, backdrop blur, golden
   border) — instead of the old faint full-card watermark. */
.inv-card-photo { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; opacity: 0; transition: opacity .4s ease; }
.inv-card-photo.has-photo { opacity: 1; }
.inv-card[data-ai-photo="1"] .inv-card-photo { inset: 0 0 auto 0; height: 56%; }
/* Soft fade where the hero meets the card body, plus gentle top vignette. */
.inv-card[data-ai-photo="1"] .inv-card-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,10,0,.16) 0%, transparent 22%),
    linear-gradient(180deg, transparent 62%, rgba(253,248,240,.55) 88%, rgba(253,248,240,.92) 100%);
}
/* Frosted-glass text panel over the lower half, overlapping the hero edge. */
.inv-card[data-ai-photo="1"] .inv-card-inner {
  inset: 46% 20px 20px;
  padding: 22px 24px 18px;
  gap: 7px;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255, 253, 248, .58);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(214, 174, 106, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    0 18px 40px -18px rgba(40, 22, 6, .45);
}
/* Keep the glass panel airy: hide the large centrepiece ornament and tighten type. */
.inv-card[data-ai-photo="1"] .inv-card-motif,
.inv-card[data-ai-photo="1"] .inv-card-motif--svg { display: none; }
.inv-card[data-ai-photo="1"] .inv-card-names { font-size: clamp(1.5rem, 4vw, 2.2rem); }
.inv-card[data-ai-photo="1"] .inv-card-invite { font-size: .86rem; }
/* Top corner flourishes would sit on the photo — let the hero breathe instead. */
.inv-card[data-ai-photo="1"] .inv-card-corner--tl,
.inv-card[data-ai-photo="1"] .inv-card-corner--tr { opacity: 0; }
/* Cinematic layout opts out of the hero band: it keeps a full-bleed photo with
   a dark scrim and white text (see .inv-card--cinematic rules further down). */
.inv-card--cinematic[data-ai-photo="1"] .inv-card-photo { inset: 0; height: auto; }
.inv-card--cinematic[data-ai-photo="1"] .inv-card-photo::after {
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.55) 100%);
}
.inv-card--cinematic[data-ai-photo="1"] .inv-card-inner {
  inset: 22px; padding: 46px 30px 34px; gap: 0;
  justify-content: space-between;
  background: none; border: none; box-shadow: none; border-radius: 16px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.inv-card--cinematic[data-ai-photo="1"] .inv-card-names { font-size: clamp(2.4rem, 6.4vw, 3.6rem); }
.inv-card--cinematic[data-ai-photo="1"] .inv-card-invite { font-size: .8rem; }

/* ── Cinematic layout: hero title with gradient fill, bottom-anchored date ── */
.inv-card--cinematic .inv-card-inner {
  justify-content: space-between;
  padding: 46px 30px 34px;
  gap: 0;
}
.inv-card--cinematic .inv-card-eyebrow {
  font-size: .62rem;
  letter-spacing: .32em;
  opacity: .55;
  margin-bottom: 0;
}
.inv-card--cinematic .inv-card-rule { display: none; }
.inv-card--cinematic .inv-card-motif { display: none; }
.inv-card--cinematic .inv-card-motif--svg { display: none; }
.inv-card--cinematic .inv-card-names {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6.4vw, 3.6rem);
  line-height: .95;
  margin: 6px 0 6px;
  letter-spacing: .01em;
  text-align: center;
  /* Gradient text fill from AI palette (fallback to warm gold). */
  background: linear-gradient(160deg,
    var(--inv-c0, #8B4D22) 0%,
    var(--inv-c1, #C48A3E) 42%,
    var(--inv-c2, #E8C866) 72%,
    var(--inv-c3, #F4DC8A) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 2px 6px rgba(0,0,0,.14);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}
.inv-card--cinematic .inv-card-and {
  display: block;
  font-size: .55em;
  opacity: .78;
  margin: 4px 0;
}
.inv-card--cinematic .inv-card-invite {
  font-size: .78rem;
  font-style: italic;
  opacity: .68;
  max-width: 32ch;
  margin: 10px auto 0;
  text-align: center;
}
.inv-card--cinematic .inv-card-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1 1 auto;
}
.inv-card--cinematic .inv-card-when {
  gap: 4px;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.12);
  align-items: center;
}
.inv-card--cinematic .inv-card-date {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.inv-card--cinematic .inv-card-day,
.inv-card--cinematic .inv-card-time { font-size: .72rem; letter-spacing: .16em; opacity: .8; }
.inv-card--cinematic .inv-card-where { font-size: .78rem; margin-top: 4px; opacity: .78; }
.inv-card--cinematic .inv-card-foot { font-size: .58rem; letter-spacing: .22em; opacity: .5; margin-top: 6px; }
.inv-card--cinematic .inv-card-corner { width: 78px; height: 78px; opacity: .55; }
.inv-card--cinematic .inv-card-corner.has-svg { opacity: .55; }
/* Photo + cinematic: the dark scrim lives on .inv-card-photo::after (see the
   hero-photo block above); here we only keep the white-text treatment. */
.inv-card--cinematic[data-ai-photo="1"] .inv-card-inner {
  color: #fff;
}
.inv-card--cinematic[data-ai-photo="1"] .inv-card-eyebrow,
.inv-card--cinematic[data-ai-photo="1"] .inv-card-invite,
.inv-card--cinematic[data-ai-photo="1"] .inv-card-when,
.inv-card--cinematic[data-ai-photo="1"] .inv-card-where,
.inv-card--cinematic[data-ai-photo="1"] .inv-card-foot { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.inv-card--cinematic[data-ai-photo="1"] .inv-card-when { border-top-color: rgba(255,255,255,.35); }

/* "Use my own photo" row inside the AI block */
.inv-photo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ead9b8; }
.inv-photo-btn {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  background: #fff8e8; color: #7a5310;
  border: 1.5px dashed #c99a4d;
  font-size: .74rem; font-weight: 700;
  transition: background .15s ease, border-color .15s ease;
}
.inv-photo-btn:hover { background: #fef4d8; border-color: #8b4d22; border-style: solid; }
.inv-photo-clear {
  border: none; background: transparent; cursor: pointer;
  color: #a04c4c; font-size: .72rem; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
}
.inv-photo-clear:hover { background: #fdecec; }
.inv-photo-hint { flex: 1 1 100%; font-size: .7rem; color: #7d6656; font-style: italic; }

.inv-card-invite {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.4;
  opacity: .88;
  max-width: 28ch;
}
.inv-card-when { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.inv-card-day { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.inv-card-date { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.4rem; font-weight: 600; letter-spacing: .04em; }
.inv-card-time { font-size: .82rem; font-style: italic; opacity: .82; }
.inv-card-where { font-size: .9rem; font-weight: 500; margin-top: 6px; opacity: .9; }
.inv-card-foot { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .58; margin-top: 10px; }
.inv-card-host { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin-top: 4px; }

.inv-card--elegant {
  background: radial-gradient(140% 100% at 50% 0%, #fbf5e6 0%, #f0e6cc 70%, #d9c79f 100%);
  color: #3d2718;
}
.inv-card--elegant .inv-card-inner { border: 1px solid rgba(139, 77, 34, .22); }
.inv-card--floral {
  background: radial-gradient(140% 100% at 50% 0%, #fff1f2 0%, #fde2e4 40%, #f8c5c9 100%);
  color: #7a2a34;
}
.inv-card--floral .inv-card-inner {
  border: 1px solid rgba(122, 42, 52, .18);
  background: radial-gradient(circle at 20% 10%, rgba(248, 197, 201, .3), transparent 40%),
              radial-gradient(circle at 80% 90%, rgba(248, 197, 201, .3), transparent 40%);
}
.inv-card--festive {
  background: radial-gradient(140% 100% at 50% 0%, #ffedc9 0%, #f6b23c 55%, #b6541f 100%);
  color: #3a1f08;
}
.inv-card--festive .inv-card-inner { border: 2px solid rgba(58, 31, 8, .3); box-shadow: inset 0 0 0 4px rgba(255, 245, 217, .5); }
.inv-card--memorial {
  background: radial-gradient(140% 100% at 50% 0%, #f4f2ec 0%, #dcd6c6 60%, #a9a294 100%);
  color: #3a352b;
}
.inv-card--memorial .inv-card-inner { border: 1px solid rgba(58, 53, 43, .2); }
.inv-card--memorial .inv-card-names { font-style: italic; font-weight: 500; }
.inv-card--minimal {
  background: #fdf9f0;
  color: #2a2018;
  box-shadow: 0 30px 60px -30px rgba(30, 18, 8, .3), inset 0 0 0 1px #ecdcb6;
}
.inv-card--minimal .inv-card-inner { border: 1px solid #e2d1a8; }
.inv-card--minimal .inv-card-rule { background: #a9621c; opacity: .9; width: 40px; }

/* Theme: 24k Gold — foil-stamped luxury. Rich metallic gold leaf background,
   deep espresso ink lettering, with a subtle brushed sheen. */
.inv-card--gold {
  background:
    /* soft top-left highlight for foil sheen */
    radial-gradient(120% 90% at 22% 12%, rgba(255, 248, 210, .55) 0%, transparent 45%),
    /* diagonal brushed-gold band */
    linear-gradient(135deg, #b8862b 0%, #e8c866 22%, #f4dc8a 44%, #d4a832 62%, #a5731a 82%, #7a5310 100%);
  color: #2a1a08;
  box-shadow:
    0 30px 60px -28px rgba(60, 34, 6, .65),
    0 8px 22px -12px rgba(140, 90, 20, .45),
    inset 0 0 0 1px rgba(255, 248, 210, .35);
}
.inv-card--gold .inv-card-inner {
  border: 1px solid rgba(74, 46, 8, .45);
  background:
    radial-gradient(120% 90% at 78% 88%, rgba(255, 248, 210, .28) 0%, transparent 40%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 210, .28),
    inset 0 0 60px rgba(140, 90, 20, .18);
}
.inv-card--gold .inv-card-motif { color: #3a1f08; text-shadow: 0 1px 0 rgba(255, 248, 210, .5); }
.inv-card--gold .inv-card-eyebrow { color: #4a2e10; }
.inv-card--gold .inv-card-names {
  background: linear-gradient(180deg, #2a1a08 0%, #4a2e10 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255, 248, 210, .35);
}
.inv-card--gold .inv-card-and { color: #6b4a1a; opacity: .75; }
.inv-card--gold .inv-card-rule { background: #3a1f08; opacity: .55; width: 80px; }
.inv-card--gold .inv-card-invite { color: #3a1f08; opacity: .95; }
.inv-card--gold .inv-card-day { color: #4a2e10; opacity: .75; }
.inv-card--gold .inv-card-date { color: #2a1a08; }
.inv-card--gold .inv-card-time { color: #4a2e10; opacity: .85; }
.inv-card--gold .inv-card-where { color: #2a1a08; }
.inv-card--gold .inv-card-foot { color: #4a2e10; opacity: .7; }

/* ══════════════════════════════════════════════════════════════════════════
   Invitation Designer modal
   ══════════════════════════════════════════════════════════════════════════ */
.inv-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(30, 18, 8, .55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  animation: invOverlayIn .22s ease-out;
}
.inv-modal-overlay.hidden { display: none; }
@keyframes invOverlayIn { from { opacity: 0; } to { opacity: 1; } }
body.inv-modal-open { overflow: hidden; }
.inv-modal {
  background: #fbf7ee;
  border-radius: 22px;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .55);
  width: min(1180px, 100%);
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: invModalIn .28s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes invModalIn { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.inv-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 28px 16px;
  border-bottom: 1px solid #ead9b8;
  background: linear-gradient(180deg, #ffffff 0%, #fbf7ee 100%);
}
.inv-modal-eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a9621c;
  margin-bottom: 4px;
}
.inv-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: #3d2718;
  margin: 0;
  line-height: 1.15;
}
.inv-modal-close {
  background: transparent;
  border: 1px solid #e2d1a8;
  color: #6b5a44;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}
.inv-modal-close:hover { background: #f4ead0; transform: rotate(90deg); }
.inv-modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.inv-form {
  padding: 22px 28px;
  overflow-y: auto;
  border-right: 1px solid #ead9b8;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inv-form-block { display: flex; flex-direction: column; gap: 6px; }
.inv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inv-form-block-label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b4a1a;
}
.inv-form-optional {
  font-weight: 500;
  color: #a09080;
  text-transform: none;
  letter-spacing: 0;
  font-size: .68rem;
  margin-left: 4px;
}
.inv-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e2d1a8;
  border-radius: 10px;
  background: #fffcf5;
  font-size: .9rem;
  color: #3d2718;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.inv-input:focus {
  outline: none;
  border-color: #c99a4d;
  box-shadow: 0 0 0 3px rgba(201, 154, 77, .18);
}
.inv-textarea { resize: vertical; min-height: 60px; }
.inv-theme-row { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-theme-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1.5px solid #e2d1a8;
  border-radius: 999px;
  background: #fffcf5;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: #6b4a1a;
  transition: all .15s ease;
}
.inv-theme-pill input { display: none; }
.inv-theme-pill:hover { border-color: #c99a4d; background: #fdf3d9; }
.inv-theme-pill.is-active {
  background: linear-gradient(135deg, #a9621c, #8b4d22);
  color: #fff;
  border-color: #8b4d22;
  box-shadow: 0 4px 12px -6px rgba(139, 77, 34, .5);
}

/* ── Theme swatches — mini card previews instead of text pills.
   Same six themes as the landing gallery, so the picker inside the designer
   reads the way the thumbnails on the home page do. The themed gradient lives
   on .inv-sw-face (via the shared .inv-thumb--* classes); the label around it
   stays neutral chrome so the selected ring is legible on every theme. ── */
.inv-theme-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.inv-theme-pill.inv-theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 7px 7px 6px;
  border-radius: 12px;
  background: #fffcf5;
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.inv-theme-pill.inv-theme-swatch:hover {
  transform: translateY(-2px);
  border-color: #c99a4d;
  box-shadow: 0 10px 20px -12px rgba(60, 34, 12, .5);
}
/* Neutralise the solid-brown active fill inherited from .inv-theme-pill.is-active
   so the theme's own colours stay visible when selected. */
.inv-theme-pill.inv-theme-swatch.is-active {
  background: #fff8ea;
  color: #6b4a1a;
  border-color: #8b4d22;
  box-shadow: 0 0 0 2px #c99a4d, 0 10px 20px -12px rgba(60, 34, 12, .55);
}
.inv-theme-pill.inv-theme-swatch.is-active::after {
  content: "✓";
  position: absolute;
  top: 5px; right: 6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #8b4d22;
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.inv-sw-face {
  aspect-ratio: 3 / 4;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 5px;
}
.inv-sw-motif { font-size: .82rem; line-height: 1; }
.inv-sw-bar { width: 58%; height: 3px; border-radius: 2px; background: currentColor; opacity: .5; }
.inv-sw-bar--name { width: 74%; height: 5px; opacity: .78; }
.inv-sw-rule { width: 28%; height: 1px; background: currentColor; opacity: .42; }
.inv-sw-name {
  margin-top: 5px;
  text-align: center;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .85;
}
@media (max-width: 560px) {
  .inv-theme-swatches { gap: 8px; }
  .inv-sw-name { font-size: .6rem; }
}

/* ── AI style generation block ─────────────────────────────────────────────── */
.inv-ai-block {
  background: linear-gradient(135deg, rgba(201,154,77,0.10), rgba(139,77,34,0.06));
  border: 1px solid #ead9b8;
  border-radius: 14px;
  padding: 12px;
}
.inv-ai-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.inv-ai-btn {
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #a9621c, #8b4d22);
  color: #fff; font-weight: 700; font-size: .78rem;
  padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 6px 14px -8px rgba(139, 77, 34, .6);
  transition: transform .12s ease, filter .15s ease;
}
.inv-ai-btn:hover { filter: brightness(1.06); }
.inv-ai-btn:active { transform: translateY(1px); }
.inv-ai-btn:disabled { opacity: .6; cursor: default; }
.inv-ai-status { font-size: .74rem; color: #7d6656; margin-top: 8px; min-height: 14px; }
.inv-ai-variants {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.inv-ai-variants:empty { display: none; }
.inv-ai-variant {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; cursor: pointer; text-align: left;
  border: 1.5px solid #e2d1a8; border-radius: 12px;
  background: #fffcf5; transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.inv-ai-variant:hover { border-color: #c99a4d; box-shadow: 0 6px 16px -10px rgba(139,77,34,.5); }
.inv-ai-variant:active { transform: translateY(1px); }
.inv-ai-variant.is-active { border-color: #8b4d22; box-shadow: 0 0 0 2px rgba(139,77,34,.25); }
.inv-ai-thumb { position: relative; display: block; height: 44px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); overflow: hidden; }
.inv-ai-thumb-svg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .78; pointer-events: none; }
.inv-ai-thumb-svg svg { width: 70%; height: 70%; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.inv-ai-variant-name {
  font-size: .74rem; font-weight: 700; color: #5a4326;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-ai-swatches { display: flex; gap: 4px; }
.inv-ai-sw { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* AI message copywriter — Suggest button + 3 suggestion chips under the textarea */
.inv-form-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.inv-msg-ai-btn {
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #7a5310, #b8862b);
  color: #fff8e8; font-weight: 700; font-size: .72rem;
  padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 4px 10px -6px rgba(122, 83, 16, .6);
  transition: transform .12s ease, filter .15s ease;
}
.inv-msg-ai-btn:hover { filter: brightness(1.08); }
.inv-msg-ai-btn:active { transform: translateY(1px); }
.inv-msg-ai-btn:disabled { opacity: .6; cursor: default; }
.inv-msg-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.inv-msg-head { font-size: .72rem; color: #7d6656; padding: 0 2px; }
.inv-msg-loading { font-size: .78rem; color: #7d6656; font-style: italic; padding: 6px 4px; }
.inv-msg-error { color: #b34747; }
.inv-msg-suggestion {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; text-align: left; cursor: pointer;
  border: 1.5px solid #e6d9be; border-radius: 10px;
  background: #fffcf5; color: #3d2718;
  font-size: .82rem; line-height: 1.35;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.inv-msg-suggestion:hover { border-color: #b8862b; background: #fff8e8; box-shadow: 0 4px 12px -8px rgba(122, 83, 16, .45); }
.inv-msg-suggestion.is-active { border-color: #7a5310; background: #fef4d8; box-shadow: 0 0 0 2px rgba(122, 83, 16, .22); }
.inv-msg-suggestion-num {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  background: #b8862b; color: #fff; font-size: .68rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.inv-msg-suggestion-text { flex: 1 1 auto; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: .92rem; }

.inv-form-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed #ead9b8;
  margin-top: 8px;
  flex-wrap: wrap;
}
.inv-form-actions .btn.inv-action-btn {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 9px 12px;
  font-size: .82rem;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-form-actions .btn.inv-action-btn.btn-primary { flex-basis: 46%; }
.inv-form-actions .btn.inv-action-btn.btn-secondary,
.inv-form-actions .btn.inv-action-btn.btn-ghost { flex-basis: 26%; }
.inv-form-hint {
  font-size: .78rem;
  color: #6b5a44;
  background: #fdf3d9;
  border-left: 3px solid #c99a4d;
  padding: 10px 14px;
  border-radius: 6px;
  line-height: 1.45;
}
.inv-preview-rail {
  padding: 22px 28px;
  background: linear-gradient(180deg, #f4ead0 0%, #ead9b8 100%);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.inv-preview-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8b4d22;
  align-self: flex-start;
}
.inv-preview-frame {
  width: 100%;
  max-width: 380px;
  display: flex;
  justify-content: center;
}
.inv-preview-frame .inv-card { max-width: 380px; }
.inv-preview-frame.is-full { max-width: 460px; }
.inv-preview-frame.is-full .inv-card { max-width: 460px; }
.inv-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  padding-top: 8px;
  border-top: 1px dashed rgba(139, 77, 34, .28);
}
.inv-preview-toolbar-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6b5a44;
}
.inv-preview-toolbar-btns { display: inline-flex; gap: 6px; }
.inv-preview-size-btn {
  border: 1px solid #d9c79f;
  background: #fffcf5;
  color: #6b4a1a;
  font-size: .74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s ease;
}
.inv-preview-size-btn:hover { background: #fdf3d9; }
.inv-preview-size-btn.is-active {
  background: #8b4d22;
  color: #fff;
  border-color: #8b4d22;
}

@media (max-width: 980px) {
  .landing-invitations .inv-studio { grid-template-columns: 1fr; gap: 28px; }
  .inv-hero-side { order: -1; }
  .inv-modal { max-height: calc(100vh - 32px); }
  .inv-modal-overlay { padding: 16px; }
  .inv-modal-body { grid-template-columns: 1fr; }
  .inv-form { border-right: none; border-bottom: 1px solid #ead9b8; }
  .inv-preview-rail { padding: 18px 20px 28px; }
}
@media (max-width: 640px) {
  .inv-theme-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .inv-thumb-title { font-size: 1.25rem; }
  .inv-modal-head { padding: 16px 18px 12px; }
  .inv-modal-title { font-size: 1.35rem; }
  .inv-form { padding: 16px 18px; }
  .inv-form-grid { grid-template-columns: 1fr; }
  .inv-form-actions .btn { min-width: 100%; }
  .inv-card-inner { padding: 26px 22px; inset: 16px; }
  .inv-card-names { font-size: clamp(1.6rem, 8vw, 2.4rem); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Bill reminders panel
   ══════════════════════════════════════════════════════════════════════════ */
.bills-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(20,8,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.bills-overlay.hidden { display: none; }
.bills-panel {
  background: #fffdf4; border-radius: 20px; max-width: 640px; width: 100%;
  max-height: 88vh; box-shadow: 0 24px 64px rgba(0,0,0,.32);
  overflow: hidden; display: flex; flex-direction: column;
}
.bills-header {
  background: linear-gradient(135deg, #8b4d22 0%, #c99a4d 100%);
  padding: 15px 20px; display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.bills-header-left { display: flex; align-items: center; gap: 9px; }
.bills-header-icon { font-size: 1.2rem; }
.bills-header-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #fff3d8; font-size: 1.1rem; font-weight: 700; letter-spacing: .03em;
}
.bills-close {
  color: #ffe8b8; background: rgba(255,255,255,.15); border: none;
  font-size: 1rem; width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bills-close:hover { background: rgba(255,255,255,.28); }
.bills-body { padding: 22px 24px; overflow-y: auto; }
.bills-intro { font-size: .86rem; color: #5a4a38; line-height: 1.55; margin-bottom: 16px; }

.bills-locked.hidden, .bills-content.hidden { display: none; }
.bills-locked { text-align: center; padding: 32px 16px; }
.bills-locked-icon { font-size: 2.2rem; margin-bottom: 8px; }
.bills-locked-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-weight: 700; color: #3d2718; margin-bottom: 6px; }
.bills-locked-msg { font-size: .88rem; color: #7a6a58; max-width: 340px; margin: 0 auto 18px; line-height: 1.5; }
.bills-upsell-btn {
  display: inline-block; background: linear-gradient(135deg, #c99a4d, #a9621c); color: #fff;
  text-decoration: none; font-weight: 700; font-size: .88rem;
  padding: 10px 22px; border-radius: 999px; border: none; cursor: pointer;
  box-shadow: 0 6px 16px rgba(169,98,28,.28);
}

.bill-form { border: 1px solid #e5d9c4; border-radius: 14px; padding: 16px; background: #fbf7ee; margin-bottom: 20px; }
.bill-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.bill-field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .03em; }
.bill-field em { text-transform: none; font-weight: 400; font-style: italic; color: #9c8a72; }
.bill-field-wide { grid-column: 1 / -1; }
.bill-field input, .bill-field select {
  font-family: 'Lato', sans-serif; font-size: .88rem; font-weight: 400; color: #3d2718;
  text-transform: none; letter-spacing: 0;
  border: 1px solid #e0d2b6; border-radius: 10px; padding: 8px 10px; background: #fffdf8;
}
.bill-field input:focus, .bill-field select:focus {
  outline: none; border-color: #c99a4d; box-shadow: 0 0 0 3px rgba(201,154,77,.18);
}
.bill-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.bill-cancel-btn.hidden { display: none; }
.bill-cancel-btn {
  background: transparent; border: 1px solid rgba(169,98,28,.3); color: #8b4d22;
  font-size: .82rem; font-weight: 700; padding: 9px 18px; border-radius: 999px; cursor: pointer;
}
.bill-cancel-btn:hover { background: rgba(169,98,28,.08); }
.bill-save-btn {
  background: linear-gradient(135deg, #c99a4d, #a9621c); color: #fff; border: none;
  font-size: .82rem; font-weight: 800; padding: 9px 22px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(169,98,28,.25);
}
.bill-save-btn:hover { filter: brightness(1.06); }
.bill-save-btn:disabled { opacity: .6; cursor: not-allowed; }

.bills-list-label { font-size: .78rem; font-weight: 800; color: #8b4d22; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.bills-list { display: flex; flex-direction: column; gap: 8px; }
.bills-empty { text-align: center; color: #9c8a72; font-size: .86rem; font-style: italic; padding: 20px 0; }
.bill-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid #e8dcc4; border-radius: 12px; padding: 10px 12px; background: #fff;
}
.bill-row-off { opacity: .55; }
.bill-row-icon { font-size: 1.3rem; flex-shrink: 0; }
.bill-row-main { flex: 1; min-width: 0; }
.bill-row-name { font-weight: 700; color: #3d2718; font-size: .92rem; }
.bill-row-amt { font-weight: 400; color: #7a6a58; }
.bill-row-meta { font-size: .78rem; color: #9c8a72; margin-top: 2px; }
.bill-row-notes { font-size: .76rem; color: #a89878; font-style: italic; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.bill-badge { font-size: .7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.bill-badge-due { background: #fce1e1; color: #a12b2b; }
.bill-badge-soon { background: #ffe8c2; color: #9a5c0a; }
.bill-badge-near { background: #fff3d6; color: #8a6a1a; }
.bill-badge-far { background: #eef3e4; color: #4a6b2c; }
.bill-badge-off { background: #efe9df; color: #948468; }
.bill-row-actions { display: flex; gap: 4px; }
.bill-row-actions button {
  border: none; background: rgba(169,98,28,.08); color: #8b4d22;
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: .82rem;
}
.bill-row-actions button:hover { background: rgba(169,98,28,.18); }

@media (max-width: 560px) {
  .bill-form-grid { grid-template-columns: 1fr; }
  .bill-row { flex-wrap: wrap; }
  .bill-row-right { flex-direction: row; align-items: center; margin-left: auto; }
}

/* ── Mobile topbar drawer + hero/workspace responsive overrides ──────────────
   Kept at the very end of the file (rather than up near the mobile-drawer
   base rules) so these overrides win the cascade against every later
   same-specificity rule for .hero / .workspace / .ask-grid / .stepper —
   several of those selectors are redefined further up the file, and an
   earlier position here was silently losing to those on tablet/mobile. */
@media (max-width: 980px) {
  .mobile-hamburger { display: flex; }
  /* The wrapper becomes a real, initially-hidden slide-down panel. */
  #topbar-collapsible {
    display: block;
    position: fixed; top: 0; left: 0; right: 0; z-index: 56;
    max-height: 0; overflow: hidden;
    background: var(--surface);
    box-shadow: 0 20px 44px -16px rgba(58, 37, 18, 0.32);
    border-radius: 0 0 22px 22px;
    transition: max-height .28s ease, padding-top .28s ease;
    /* padding-top lives on .open only: max-height can't clamp below the
       padding, so a closed padding of 76px painted a fixed white strip
       over the brand and hamburger. */
    padding-top: 0;
  }
  #topbar-collapsible.open { max-height: 80vh; overflow-y: auto; padding-top: 76px; /* clears the fixed topbar row */ }
  #topbar-collapsible .topnav {
    display: flex; flex-direction: column; gap: 4px;
    background: none; border: none; border-radius: 0;
    padding: 10px 16px 22px;
  }
  #topbar-collapsible .topnav-separator { display: none; }
  #topbar-collapsible .nav-dd { width: 100%; }
  /* Inside the drawer, groups are always expanded — no nested toggle. */
  #topbar-collapsible .nav-dd-trigger {
    width: 100%; justify-content: flex-start; cursor: default;
    background: none; border: none; box-shadow: none;
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-soft); padding: 14px 6px 4px;
  }
  #topbar-collapsible .nav-dd-trigger:hover { background: none; transform: none; box-shadow: none; }
  #topbar-collapsible .nav-dd-caret { display: none; }
  #topbar-collapsible .nav-dd-panel {
    display: flex; position: static; box-shadow: none; border: none;
    background: none; padding: 0; min-width: 0; animation: none;
  }
  .mobile-nav { display: flex; }

  /* The Nani launcher is fixed bottom-right and was landing on top of the
     mobile tab bar, covering the TIMELINE tab entirely. Lift both the button
     and its panel above the bar (bar is 82px tall, sitting 12px off the
     bottom). The panel is capped by viewport height so it still fits on short
     phones once raised. */
  #nani-fab { bottom: 108px; }
  #nani-panel { bottom: 192px; }
  #nani-panel .nani-messages { max-height: min(320px, 30vh); }
  .hero { grid-template-columns: 1fr; }
  .stepper { grid-template-columns: repeat(2, 1fr); }
  .workspace { grid-template-columns: 1fr; }
  .sidebar { position: relative; top: auto; max-height: none; overflow: visible; }
  .ask-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .profile-dd-panel { position: fixed; top: auto; right: 10px; left: 10px; }
  .btn-secondary#btn-open-auth { padding: 9px 14px; }
}

/* ── Write-a-Tribute: style picker + personalization form ─────────────────── */
.trib-step-label { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: #a06a2e; margin: 0 0 8px; }
.trib-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: #a0907e; font-size: .8rem; }
.trib-input { width: 100%; margin-bottom: 10px; padding: 8px 12px; border: 1.5px solid #d8c8b0;
  border-radius: 8px; font-family: 'Lato', sans-serif; font-size: .88rem; background: #fdf8f2;
  box-sizing: border-box; color: #3a2410; }
.trib-input:focus { outline: 2px solid #c8a050; outline-offset: 1px; border-color: #c8a050; }
.trib-ta { min-height: 42px; resize: vertical; line-height: 1.5; margin-bottom: 0; }
.trib-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 9px; }
.trib-style-loading { color: #a0907e; font-size: .85rem; font-style: italic; grid-column: 1 / -1; }
.trib-style-card { text-align: left; background: #fffdf8; border: 1.5px solid #e5d8c0; border-radius: 12px;
  padding: 11px 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s;
  font-family: inherit; display: flex; flex-direction: column; gap: 3px; }
.trib-style-card:hover { border-color: #d0a860; box-shadow: 0 4px 14px rgba(150,100,30,.12); }
.trib-style-card:focus-visible { outline: 2px solid #b0842e; outline-offset: 2px; }
.trib-style-card.selected { border-color: #a9621c; background: #fdf3e2; box-shadow: 0 4px 16px rgba(169,98,28,.18); }
.trib-style-card .tsc-top { display: flex; align-items: center; gap: 7px; }
.trib-style-card .tsc-icon { font-size: 1.1rem; line-height: 1; }
.trib-style-card .tsc-title { font-weight: 700; color: #5a3010; font-size: .86rem; }
.trib-style-card .tsc-prev { font-size: .74rem; color: #8b7060; line-height: 1.35; }
.trib-style-card.selected .tsc-title { color: #8a3d10; }
.trib-details-toggle { margin: 14px 0 0; background: none; border: none; color: #a06a2e; font-weight: 700;
  font-size: .82rem; cursor: pointer; padding: 4px 0; font-family: inherit; }
.trib-details-toggle:hover { color: #7a4a12; }
.trib-details-panel { margin-top: 10px; }
.trib-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 520px) { .trib-grid2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .trib-style-card { transition: none; } }

/* ── Guest save prompt ──────────────────────────────────────────────────────
   Shown once a guest has made something worth losing. Never blocks: a guest
   can dismiss it and carry on without an account. ── */
#guest-save-prompt {
  position: fixed; inset: 0; z-index: 1500;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(40, 26, 12, .34);
  padding: 18px;
}
#guest-save-prompt.open { display: flex; }
.gsp-box {
  position: relative;
  background: #fffdf7;
  border: 1px solid #e7d6ba;
  border-radius: 20px;
  padding: 26px 28px 22px;
  max-width: 460px; width: 100%;
  box-shadow: 0 24px 60px -20px rgba(60, 34, 12, .45);
  animation: gsp-rise .28s ease;
}
@keyframes gsp-rise { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gsp-box { animation: none; } }
.gsp-icon { font-size: 1.9rem; line-height: 1; margin-bottom: 8px; }
.gsp-box h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.42rem; color: #4b2f14; margin: 0 0 10px; line-height: 1.25;
}
.gsp-box p { font-size: .9rem; line-height: 1.6; color: #5a4a38; margin: 0 0 10px; }
.gsp-sub { font-weight: 600; color: #6b4a1a !important; }
.gsp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.gsp-actions .btn { flex: 1 1 auto; min-width: 150px; margin: 0; }
.gsp-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: #a89878; line-height: 1;
}
.gsp-close:hover { color: #6b4a1a; }
@media (min-width: 640px) { #guest-save-prompt { align-items: center; } }