/* Gift List - styles.css
   Fresh blue/green/mint theme.
   Engineering standard: keep under 800 lines.
*/

:root {
  /* ── Brand palette (violet/coral/gold rebrand 2026-04) ── */
  --bg: #f9f5ff;            /* warm lavender tint */
  --bg2: #f2ecff;           /* slightly deeper lavender */
  --bg3: #e8dffe;           /* light violet wash */
  --bg4: #dcd0fa;           /* medium violet wash */
  --text: #1A1025;          /* warm near-black */
  --muted: #4a3968;         /* warm purple-grey — 8.1:1 on bg ✅ AAA */
  --blue: #6C3CE1;          /* primary violet (replaces old blue) */
  --blue2: #4b23b0;         /* deeper violet (replaces old blue2) */
  --green: #a855f7;         /* kept as secondary purple accent */
  --green2: #9333ea;        /* deeper secondary accent */
  --gold: #FFB830;          /* warm amber/gold — celebrations */
  --gold2: #c07a00;         /* darker gold for text use */
  --teal: #6C3CE1;          /* unified to violet (teal refs now violet) */
  --accent: #FF5D6C;        /* coral-red — primary CTA */
  --accent2: #e04a58;       /* darker coral hover */
  --accent-light: #ffe4e6;  /* soft coral tint */
  --red: #e63946;           /* kept for error states */
  --purple: #6C3CE1;        /* violet */
  --pink: #FF5D6C;          /* coral alias */
  --orange: #FFB830;        /* gold alias */
  --border: #d4c6f8;        /* soft violet border */
  --card-bg: #FDFAF6;       /* warm off-white surface */
  --surface: #FDFAF6;       /* warm off-white */
  --silver: #4a3968;        /* warm purple-grey — 8.1:1 on card-bg ✅ AAA */
  /* a11y: all text-on-bg colour vars meet WCAG AA 4.5:1 minimum */
  --mint: #FFB830;          /* gold (mint was decorative, now gold) */
  --ocean: #6C3CE1;         /* violet */

  /* ── Pastel swatches — now warm violet/peach/gold tones ── */
  --pastel-blue: #f0eaff;          /* soft violet */
  --pastel-blue-accent: #8b5cf6;
  --pastel-cyan: #fff0ee;          /* warm peach */
  --pastel-cyan-accent: #FF5D6C;
  --pastel-mint: #fff8e6;          /* warm gold */
  --pastel-mint-accent: #FFB830;
  --pastel-green: #f0eaff;         /* violet (maps old green → violet) */
  --pastel-green-accent: #7c3aed;
  --pastel-teal: #ffe4e6;          /* light coral */
  --pastel-teal-accent: #FF5D6C;
  --pastel-navy: #ede8ff;          /* deeper violet tint */
  --pastel-navy-accent: #6C3CE1;
  --pastel-sky: #fff8e6;           /* gold tint */
  --pastel-sky-accent: #FFB830;
  --pastel-indigo: #f0eaff;        /* violet tint */
  --pastel-indigo-accent: #6C3CE1;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Prinda SPA: the window/body scrollbar is always redundant — every
   scrollable section sits in a purpose-built overflow:auto panel.
   Hiding the body scrollbar track removes the duplicate scrollbar that
   appears next to any inner panel's scrollbar on Windows/Linux browsers.
   Scroll wheel and trackpad still work exactly as normal.                 ── */
html {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE / Edge legacy */
}
html::-webkit-scrollbar {
  display: none;               /* Chrome / Safari / Opera */
}

/* Eliminate 300ms iOS tap delay on tappable elements ONLY.
   Intentionally excludes input / select / textarea — those need
   touch-action:auto so iOS can open native pickers and keyboards. */
button, a, [role="button"], summary {
  touch-action: manipulation;
}

html {
  overflow-x: clip;
  max-width: 100%;
  /* Global base font size — all rem units scale from here.
     106.25% = 17px (browser default is 16px).
     Increase to 112.5% (18px) or 118.75% (19px) if more is needed. */
  font-size: 106.25%;
  /* iOS notch/Dynamic Island safe area */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family:
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  min-height: 100vh;
  overflow-x: clip; /* clip - no scroll context, sticky safe */
  max-width: 100vw;
  position: relative;
}

html.app-modal-open,
body.app-modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body.app-modal-open #mobile-scroll-body,
body.app-modal-open .layout,
body.app-modal-open .content-shell,
body.app-modal-open #main-content,
body.app-modal-open #home-tab-panel,
body.app-modal-open #gatherings-panel,
body.app-modal-open #gatherings-list-view,
body.app-modal-open #gatherings-detail-view,
body.app-modal-open #gatherings-holiday-options-view,
body.app-modal-open #main-sidebar,
body.app-modal-open .gatherings-sidebar-list,
body.app-modal-open .gatherings-list-scroll,
body.app-modal-open .person-list,
body.app-modal-open .gift-grid {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
}

/* Ambient glow - soft blue/cyan gradients */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(108, 60, 225, 0.1), transparent 18%),
    radial-gradient(
      circle at 90% 10%,
      rgba(255, 184, 48, 0.08),
      transparent 20%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(255, 93, 108, 0.07),
      transparent 18%
    ),
    radial-gradient(circle at 50% 50%, rgba(108, 60, 225, 0.04), transparent 30%);
}

button,
select,
input {
  font: inherit;
}

/* ── Focus / Accessibility ── */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
*:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--gold2);
  color: #fff;
  border-radius: 0 0 6px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ── Snowfall - gold & silver ── */
.snowfall {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 3;
}
.snowflake {
  animation: snowfall linear infinite;
  position: absolute;
  top: -10vh;
}
.snowflake.gold {
  color: #d4a017;
  text-shadow:
    0 0 8px rgba(212, 160, 23, 0.7),
    0 0 14px rgba(255, 200, 50, 0.4);
}
.snowflake.silver {
  color: #c8d8e8;
  text-shadow:
    0 0 8px rgba(200, 216, 232, 0.8),
    0 0 14px rgba(180, 200, 220, 0.5);
}
@keyframes snowfall {
  0% {
    opacity: 1;
    transform: translateY(-10vh) translateX(0) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: translateY(50vh) translateX(30px) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: translateY(105vh) translateX(-20px) rotate(360deg);
  }
}

/* z-index layers */
.topbar,
.layout {
  position: relative;
  z-index: 2;
}
/* Topbar always sticky at top of viewport — all screen sizes */
.topbar {
  position: sticky !important;
  top: 0 !important;
  /* Force GPU compositing layer — fixes iOS Safari sticky disappearing on refresh */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 100;
}
.modal-overlay,
.toast,
#gift-ideas-panel {
  position: fixed;
  z-index: 40;
}
.toast {
  z-index: 50;
}
#gift-ideas-panel {
  z-index: 60;
}

/* ══════════════════════════════════════════════
   ── TOP BAR ──
   ══════════════════════════════════════════════ */
.topbar {
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(
    135deg,
    #FDFAF6 0%,
    #f0eaff 30%,
    #fff8e6 60%,
    #ffe4e6 100%
  );
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(
      90deg,
      var(--blue),
      var(--accent),
      var(--gold),
      var(--accent),
      var(--blue)
    )
    1;
  box-shadow: 0 2px 20px rgba(108, 60, 225, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 20px;
  padding-left: calc(20px + env(safe-area-inset-left));
  padding-right: calc(20px + env(safe-area-inset-right));
  top: 0;
  z-index: 20;
  text-align: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.topbar h1 {
  color: var(--blue2);
  font-size: 1.63rem; /* +4pt from 1.3rem */
  font-weight: 800;
  letter-spacing: 0.4px;
  text-shadow: 0 1px 2px rgba(75, 35, 176, 0.12);
  /* True viewport centre - independent of sibling widths */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  pointer-events: none;
}
.topbar-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
}

/* ── Stats Pills ── */
.pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* pills sit left of centre; user-menu pushed right via margin-left:auto on .user-menu */
}
.pill {
  align-items: center;
  border-radius: 999px;
  display: flex;
  gap: 6px;
  padding: 5px 14px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.82rem;
  border: 1px solid;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.3s ease;
}
.pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pill-people {
  background: linear-gradient(135deg, #f0eaff, #e8dffe);
  border-color: #c4b0f8;
  color: #4b23b0;
}
.pill-gifts {
  background: linear-gradient(135deg, #fff8e6, #ffedc8);
  border-color: #FFB830;
  color: #c07a00;
}
.pill-bought {
  background: linear-gradient(135deg, #ffe4e6, #ffd0d4);
  border-color: #FF5D6C;
  color: #cc3344;
}

@keyframes pill-pulse {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
.pill-number-animate {
  display: inline-block;
  animation: pill-pulse 0.35s ease;
}

.dot {
  border-radius: 50%;
  height: 8px;
  width: 8px;
}
.dot-gold {
  background: var(--gold);
  box-shadow: 0 0 4px rgba(255, 184, 48, 0.4);
}
.dot-green {
  background: var(--green);
  box-shadow: 0 0 4px rgba(108, 60, 225, 0.4);
}
.dot-blue {
  background: var(--blue);
  box-shadow: 0 0 4px rgba(108, 60, 225, 0.4);
}

/* ══════════════════════════════════════════════
   ── LAYOUT ──
   ══════════════════════════════════════════════ */
.layout {
  display: flex;
  min-height: calc(100vh - 61px);
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

/* ── Sidebar ── */
.sidebar {
  background: linear-gradient(180deg, #f9f5ff 0%, #FDFAF6 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 240px;
  padding: 16px;
  width: 260px;
  transition:
    width 0.2s,
    min-width 0.2s,
    padding 0.2s,
    opacity 0.2s;
}

/* ── Mobile sidebar: tighten spacing so content starts close to search bar ──
   On desktop (> 960px) the 16px padding/gap is fine as it gives breathing room
   in the 260px column. On mobile the sidebar is the full-width list view and
   the 16px gaps compound (padding-top + gap = 32px wasted space before cards). */
@media (max-width: 960px) {
  .sidebar {
    padding: 6px 10px 10px;
    gap: 6px;
  }
  #sidebar-search-add {
    padding: 4px 2px;
  }
}
.sidebar.hidden {
  display: none;
}
.sidebar-section h3 {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.person-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ══════════════════════════════════════════════
   ── PERSON ITEMS ──
   ══════════════════════════════════════════════ */
.person-item {
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.875rem;
  padding: 10px 12px;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
  background: var(--card-bg);
}
.group-item {
  /* already defined below, inherits column flex */
}

/* ── Person type outlines (registration status) ──────────────────────
   Gold   = me / my own card
   Violet = connected Prinda user (registered)
   Purple = locally added, not registered on Prinda yet              */
.person-item-me {
  border-color: #FFB830;
}
.person-item-registered {
  border-color: #87ceeb;
}
.person-item-local {
  border-color: #a855f7;
}

/* ── Household card surround ────────────────────────────────────────── */
/* Subtle background tint to indicate household membership.
   Does NOT override border-color so the user-type gold/blue/purple still shows. */
.person-item-household {
  background: color-mix(in srgb, var(--card-bg, #fff) 93%, rgba(108,60,225,0.12));
}

/* ── Child card ────────────────────────────────────────────────────────── */
/* Child cards use warm background + top accent stripe to identify age group.
   We do NOT override border-color here — the type border (gold/blue/purple)
   still shows so you can tell at a glance who they are AND that they're a child. */
.person-item-child {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .person-item-child,
body.dark .person-item-child {
  background: linear-gradient(135deg, #2d2010, #3d2d10) !important;
}
.person-item-child.active {
  /* active state uses the type border colour already set — no override needed */
}
.child-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b, #fb923c, #f59e0b);
  background-size: 200% 100%;
  animation: child-shimmer 2.5s ease-in-out infinite;
}
@keyframes child-shimmer {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
}
.child-age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4.5px 10px;
  border-radius: 8px;
  border: 2px solid #f59e0b;
  background: #fcd34d;
  color: #78350f;
  font-size: 1.02rem; /* +11% vs 0.92rem */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  transition:
    transform 0.15s,
    opacity 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.child-age-badge:hover {
  transform: scale(1.1);
}
/* Off state — adult, badge dimmed/outlined like household-badge-off */
.child-age-badge.child-badge-off {
  background: var(--bg2, #f1f5f9);
  border-color: #cbd5e1;
  color: #94a3b8;
  opacity: 0.6;
}
.child-age-badge.child-badge-off:hover {
  border-color: #f59e0b;
  color: #b45309;
  opacity: 1;
}
/* Unknown age state — no DoB, not manually set → ❓ icon, dashed border nudges user to tap */
.child-age-badge.child-badge-unknown {
  background: var(--bg2, #f1f5f9);
  border-color: #94a3b8;
  border-style: dashed;
  color: #64748b;
  opacity: 0.85;
}
.child-age-badge.child-badge-unknown:hover {
  border-color: #f59e0b;
  border-style: solid;
  color: #b45309;
  opacity: 1;
}
.child-bday-hint {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #b45309;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  animation: pulse-badge 1.5s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.person-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 4px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/* Mobility badge — same pill shape as priority / household / child-age badges */
.mobility-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4.5px 10px;
  border-radius: 8px;
  border: 2px solid #94a3b8;
  background: var(--bg2, #f1f5f9);
  color: #475569;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1;
  cursor: default;
  user-select: none;
  flex-shrink: 0;
}
.person-name-row-full {
  width: 100%;
  justify-content: flex-start;
}
.person-item:hover {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}
@media (hover: hover) {
  .person-item:hover {
    transform: translateX(2px) scale(1.01);
  }
}
.person-item.active {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(108, 60, 225, 0.2);
}
/* Top row: avatar + info side by side */
.person-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.person-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.person-avatar {
  align-items: center;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  width: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.person-item:hover .person-avatar {
  transform: scale(1.15);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.22),
    0 0 0 3px rgba(255, 255, 255, 0.6);
}

@keyframes avatar-ring-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(108, 60, 225, 0.35);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(108, 60, 225, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(108, 60, 225, 0);
  }
}
.person-item.active .person-avatar {
  animation: avatar-ring-pulse 1.5s ease-out infinite;
}

/* Child card avatar outline */
.person-item-child .person-avatar,
.person-item-child .person-avatar-img {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, #f59e0b 20%, transparent), 0 2px 8px rgba(0,0,0,0.15);
  animation: child-avatar-pulse 2.5s ease-in-out infinite;
}
@keyframes child-avatar-pulse {
  0%, 100% { outline-color: #f59e0b; box-shadow: 0 0 0 5px color-mix(in srgb, #f59e0b 20%, transparent), 0 2px 8px rgba(0,0,0,0.15); }
  50% { outline-color: #fb923c; box-shadow: 0 0 0 7px color-mix(in srgb, #fb923c 15%, transparent), 0 2px 8px rgba(0,0,0,0.15); }
}

.person-info {
  min-width: 0;
  flex: 1;
}
.person-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.person-name-text {
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.person-gift-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 6px;
  background: #87ceeb;
  color: #1a3a5c;
  box-shadow: 0 1px 4px rgba(135, 206, 235, 0.4);
}

.person-budget-bar {
  height: 4px;
  border-radius: 4px;
  background: var(--bg4);
  margin-top: 3px;
  overflow: hidden;
  max-width: 55%;
}
.person-budget-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}
.person-budget-fill.over {
  background: linear-gradient(90deg, var(--gold), #ef4444);
}
.person-budget-text {
  font-size: 0.68rem;
  color: #2d4a6a;
  margin-top: 1px;
} /* AAA 9.1:1 */

.person-edit-btns {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
} /* legacy */
/* ── Card toolbar - bottom row of person + group cards ── */
.card-toolbar {
  display: flex;
  gap: 2px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  width: 100%;
  justify-content: center;
}
.card-tool-btn {
  flex: 1;
  background: var(--bg3);
  border: none;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.88rem;
  padding: 5px 0;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.1s;
  text-align: center;
}
.card-tool-btn:hover {
  background: var(--bg4);
  color: var(--text);
  transform: translateY(-1px);
}
.card-tool-danger:hover {
  background: rgba(230, 57, 70, 0.1);
  color: #e63946;
}
.card-tool-warn {
  color: var(--muted);
}
.card-tool-warn:hover {
  background: rgba(234, 179, 8, 0.12);
  color: #b45309;
}

/* ── Person basket card (shown in gift basket header) ── */
.person-basket-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  max-width: 640px; /* don't stretch full viewport width */
}
.person-basket-card .person-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.person-basket-card .person-avatar {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}
.person-basket-card .card-toolbar {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
/* Group avatar badge */
.group-avatar {
  align-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe4e6, #f0eaff);
  display: flex;
  flex-shrink: 0;
  font-size: 0.9rem;
  height: 32px;
  justify-content: center;
  width: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Joined pill pair for Find Ideas / Existing */
.ideas-pill-group {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid var(--teal);
  margin-right: 2px;
}
.ideas-pill {
  background: var(--blue);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  line-height: 1.3;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.ideas-pill:hover {
  opacity: 0.82;
}
.ideas-pill-existing {
  background: #04b898;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.person-edit-btn {
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 3px 5px;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}
.person-edit-btn:hover {
  background: rgba(108, 60, 225, 0.12);
  color: var(--blue);
  transform: scale(1.15);
}

/* ── Pastel backgrounds - cycle 8 colours ── */
.person-item[data-pastel="0"] {
  background: var(--pastel-blue);
}
.person-item[data-pastel="0"]:hover {
  background: #e4dcff;
}
.person-item[data-pastel="0"].active {
  background: #d9cfff;
}
.person-item[data-pastel="1"] {
  background: var(--pastel-cyan);
}
.person-item[data-pastel="1"]:hover {
  background: #ffe8e5;
}
.person-item[data-pastel="1"].active {
  background: #ffdeda;
}
.person-item[data-pastel="2"] {
  background: var(--pastel-mint);
}
.person-item[data-pastel="2"]:hover {
  background: #fff3d0;
}
.person-item[data-pastel="2"].active {
  background: #ffefc4;
}
.person-item[data-pastel="3"] {
  background: var(--pastel-green);
}
.person-item[data-pastel="3"]:hover {
  background: #e4dcff;
}
.person-item[data-pastel="3"].active {
  background: #d9cfff;
}
.person-item[data-pastel="4"] {
  background: var(--pastel-teal);
}
.person-item[data-pastel="4"]:hover {
  background: #ffd8db;
}
.person-item[data-pastel="4"].active {
  background: #ffd0d3;
}
.person-item[data-pastel="5"] {
  background: var(--pastel-navy);
}
.person-item[data-pastel="5"]:hover {
  background: #e6e0ff;
}
.person-item[data-pastel="5"].active {
  background: #ddd6ff;
}
.person-item[data-pastel="6"] {
  background: var(--pastel-sky);
}
.person-item[data-pastel="6"]:hover {
  background: #fff3d0;
}
.person-item[data-pastel="6"].active {
  background: #ffefc4;
}
.person-item[data-pastel="7"] {
  background: var(--pastel-indigo);
}
.person-item[data-pastel="7"]:hover {
  background: #e4dcff;
}
.person-item[data-pastel="7"].active {
  background: #d9cfff;
}

/* ══════════════════════════════════════════════
   ── PEOPLE GRID: VISUAL SQUARES (landing screen) ──
   ══════════════════════════════════════════════ */
.person-grid-squares {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 2px;
  justify-content: center;
  align-content: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.person-square {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 6px 10px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: var(--card-bg);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.22s ease,
    border-color 0.2s ease;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  min-width: 98px;
  width: 98px;
  flex-shrink: 0;
  flex-grow: 0;
  box-sizing: border-box;
  position: relative;
}

@media (hover: hover) {
  .person-square:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.13);
  }
}

.person-square:active {
  transform: translateY(0) scale(0.96);
}

.person-square:focus-visible {
  outline: 2px solid var(--primary, #6C3CE1);
  outline-offset: 2px;
}

/* Type borders for squares */
.person-square-me         { border-color: #FFB830; }
.person-square-registered { border-color: #87ceeb; }
.person-square-local      { border-color: #a855f7; }
.person-square-active     { border-color: var(--accent, #6C3CE1) !important; box-shadow: 0 0 0 3px rgba(108,60,225,0.18); }

/* Subtle pulse on self card */
@keyframes sq-selfpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,184,48,0.35); }
  50%       { box-shadow: 0 0 0 7px rgba(255,184,48,0); }
}
.person-square-me {
  animation: sq-selfpulse 2.8s ease-in-out infinite;
}

/* Avatar circle in square */
.person-square-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  transition: transform 0.2s ease;
  position: relative;
}

@media (hover: hover) {
  .person-square:hover .person-square-avatar {
    transform: scale(1.1);
  }
}

.person-square-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Name label in square */
.person-square-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}

/* Child square variant */
.person-square-child .person-square-avatar {
  outline: 3px solid #f59e0b;
}

/* Pastel backgrounds for squares */
.person-square[data-pastel="0"] { background: var(--pastel-blue); }
.person-square[data-pastel="1"] { background: var(--pastel-cyan); }
.person-square[data-pastel="2"] { background: var(--pastel-mint); }
.person-square[data-pastel="3"] { background: var(--pastel-green); }
.person-square[data-pastel="4"] { background: var(--pastel-teal); }
.person-square[data-pastel="5"] { background: var(--pastel-navy); }
.person-square[data-pastel="6"] { background: var(--pastel-sky); }
.person-square[data-pastel="7"] { background: var(--pastel-indigo); }

/* ══════════════════════════════════════════════
   ── LOCAL PERSON RICH PROFILE CARD ──
   (shown in person-details-bar when a locally-added person is clicked)
   ══════════════════════════════════════════════ */
.person-local-profile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 16px;
  gap: 9px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--card-bg);
  border-radius: 14px;
  margin-bottom: 4px;
}

/* Quick-action badges cluster — top-right corner of the person detail card */
.person-detail-quickbadges {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 1;
}

.person-local-profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.13);
}

.person-local-profile-name {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}

.person-local-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.person-local-profile-badge {
  background: rgba(108,60,225,0.1);
  color: var(--primary, #6C3CE1);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.person-local-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  background: var(--bg2, #f8fafc);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 0.78rem;
  color: var(--muted);
  width: 100%;
  box-sizing: border-box;
}

.person-local-profile-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  width: 100%;
}

.person-local-profile-btn {
  background: var(--card-bg, #fff);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s, border-color 0.15s;
  color: var(--text, #0f172a);
  white-space: nowrap;
}

.person-local-profile-btn:hover {
  background: var(--bg2, #f1f5f9);
  border-color: var(--primary, #6C3CE1);
}

.person-local-profile-btn-danger {
  border-color: #fca5a5;
  color: #dc2626;
}

.person-local-profile-btn-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

/* Everyone special item */

/* ── Buttons ── */
.btn-add-person,
.filter-toggle,
.btn-cancel,
.btn-icon,
.btn-danger {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--muted);
}
.btn-add-person {
  background: var(--green) !important;
  color: #fff !important;
  border-radius: 10px;
  border-style: dashed;
  cursor: pointer;
  padding: 9px;
  width: 100%;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}
.btn-add-person:hover {
  background: rgba(108, 60, 225, 0.12);
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}
.btn-secret-draw {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  border-style: solid !important;
}
.btn-secret-draw:hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6) !important;
  border-color: #7c3aed !important;
  color: #fff !important;
}

/* ── People/Groups sub-tab strip ── */
#sidebar-sub-tabs {
  display: none;
  flex-direction: row;
  gap: 6px;
  margin: 0 10px 6px 10px;
}
#gatherings-sub-tabs {
  display: none;
  flex-direction: row;
  gap: 5px;
  margin: 0 8px 4px 8px;
}
#gatherings-sub-tabs .sidebar-sub-tab {
  padding: 7px 5px;
  font-size: 0.87rem;
}
.sidebar-sub-tab {
  flex: 1;
  padding: 8px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.sidebar-sub-tab:hover {
  background: rgba(108, 60, 225, 0.08);
  border-color: var(--blue);
  color: var(--text);
}
.sidebar-sub-tab.active {
  background: #6C3CE1;
  border-color: #6C3CE1;
  color: #fff;
  font-weight: 600;
}

/* ── Gatherings sub-tabs: distinct active colours per type ── */
/* Events + Holidays → dark peach with white text */
#gatherings-sub-tabs .sidebar-sub-tab[data-gathview="event"].active,
#gatherings-sub-tabs .sidebar-sub-tab[data-gathview="group_holiday"].active {
  background: #e04a58;
  border-color: #c43a48;
  color: #fff;
  font-weight: 600;
}
/* Secret Draw → deep burgundy */
#gatherings-sub-tabs .sidebar-sub-tab[data-gathview="secret_draw"].active {
  background: #8B1A2E;
  border-color: #6e1224;
  color: #fff;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-sub-tab { transition: none; }
}

/* ══════════════════════════════════════════════
   ── CONTENT SHELL & FILTERS ──
   ══════════════════════════════════════════════ */
.content-shell {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: visible;
}
.filter-bar {
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f9f5ff, #FDFAF6);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 56px 6px 16px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
#filter-bar-add-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
/* Context bar action area — tab strips live here now */
#context-bar-actions {
  width: 100%;
}
/* Sidebar search + add row — below the filter bar tabs */
#sidebar-search-add {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  box-sizing: border-box;
  width: 100%;
}
.context-bar-search {
  flex: 1;
  min-width: 0;
  padding: 6px 12px 6px 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 16px !important; /* 16px prevents iOS Safari auto-zoom on focus */
  background: var(--bg2, #f8fafc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.context-bar-search:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(108,60,225,0.12);
}
.filter-bar::-webkit-scrollbar {
  display: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* Icon filter buttons */
.filter-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 0.995rem;
  color: var(--text);
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.1s;
  position: relative;
  white-space: nowrap;
  min-width: 60px;
}
.filter-icon-btn .fib-label {
  font-size: 0.73rem;
  color: var(--text, #2d3748);
  line-height: 1;
}
.filter-icon-btn:hover {
  background: rgba(108, 60, 225, 0.1);
  border-color: var(--blue);
  transform: translateY(-1px);
}
.filter-icon-btn.active {
  background: rgba(108, 60, 225, 0.15);
  border-color: var(--blue);
  color: var(--blue);
}
.filter-icon-btn.active .fib-label {
  color: var(--blue);
}
/* Applied filter - red theme */
.filter-icon-btn.filtered {
  background: rgba(230, 57, 70, 0.1);
  border-color: #e63946;
  color: #e63946;
}
.filter-icon-btn.filtered .fib-label {
  color: #e63946;
}
.filter-icon-btn.filtered.active {
  background: rgba(230, 57, 70, 0.18);
  border-color: #e63946;
  color: #e63946;
}
.fib-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  background: var(--blue);
  border-radius: 50%;
  border: 1.5px solid #fff;
}
/* Filter popover */
.filter-popover {
  position: fixed;
  z-index: 9999;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 12px 14px;
  min-width: 200px;
  max-height: 60vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: popoverIn 0.15s ease;
}
.filter-popover label {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.filter-popover-clear {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}
.filter-popover-clear:hover {
  color: var(--red);
}
/* Direct option list - no select dropdown */
.filter-search-input {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.83rem;
  font-family: inherit;
  outline: none;
  background: var(--bg, #fff);
  color: var(--text, #111);
  box-sizing: border-box;
}
.filter-search-input:focus {
  border-color: var(--accent);
}
.filter-option-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.filter-option-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
  font-family: inherit;
}
.filter-option-btn:hover {
  background: var(--bg3);
  border-color: var(--border);
}
.filter-option-btn.selected {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
@keyframes popoverIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Legacy -- keep form inputs working */
.filter-select,
.form-input {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: #1a2a3a;
  outline: none;
  padding: 8px 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* 16px minimum — prevents iOS Safari auto-zoom on focus */
  font-size: 16px;
  /* manipulation — prevents double-tap zoom on form controls;
     works alongside font-size:16px for belt-and-suspenders iOS protection */
  touch-action: manipulation;
}
.filter-select:focus,
.form-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(108, 60, 225, 0.15);
}
.filter-toggle {
  border-radius: 8px;
  cursor: pointer;
  padding: 7px 14px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
.filter-toggle:hover {
  transform: translateY(-1px);
}
.filter-toggle.active {
  background: #f0eaff;
  border-color: var(--blue);
  color: var(--blue);
}
/* Claim badge on suggestion cards */
.suggestion-claimed {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #f0fff4, #e6f7ee);
  border: 1px solid #a3d9b1;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #2d7a4a;
  margin-top: 6px;
  font-weight: 600;
}
.suggestion-claimed-by {
  color: #2d7a4a;
}
.btn-claim {
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 10px;
  transition:
    opacity 0.15s,
    transform 0.1s;
}
.btn-claim:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.btn-unclaim {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #2d4a6a;
  cursor: pointer;
  font-size: 0.72rem;
  padding: 4px 8px; /* AAA 9.1:1 */
  transition: background 0.15s;
}
.btn-unclaim:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}
.btn-primary,
.btn-save {
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  border: none;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
.btn-primary {
  border-radius: 8px;
  margin-left: auto;
  padding: 8px 16px;
}
.btn-save {
  border-radius: 8px;
  padding: 9px 20px;
}
.btn-primary:hover,
.btn-save:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(108, 60, 225, 0.2);
}

/* ══════════════════════════════════════════════
   ── BUDGET BAR ──
   ══════════════════════════════════════════════ */
.main {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

/* Basket header: back-btn + name on left, budget stats on right */
.basket-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.basket-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* budget-bar now sits below the header row, not inline */
.section-header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 6px;
}
.section-header h2 {
  font-size: 1.15rem;
}
/* Centred heading for People + Groups tabs */
.section-header.title-center {
  justify-content: center;
}
.section-header.title-center h2 {
  text-align: center;
}
/* My Prinda panel heading: logo + text centered */
.my-prinda-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.my-prinda-logo {
  height: 1.7em;
  width: auto;
  vertical-align: middle;
  border-radius: 4px;
}

/* Budget bar under heading */
.budget-bar {
  margin-bottom: 8px;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  border: none;
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  padding: 4px 10px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.back-btn:hover {
  background: #ddd6fe;
}
.budget-bar {
  align-items: center;
  background: linear-gradient(135deg, #f0eaff, #fff8e6, #ffe4e6);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
  margin-top: 6px;
  padding: 8px 14px;
  max-width: 700px;
}
.budget-stat {
  color: #2d4a6a;
  font-size: 0.84rem;
} /* AAA 9.1:1 */
.budget-stat strong {
  color: #1a2a3a;
  font-size: 0.98rem;
}
.budget-stat .gold {
  color: #007a6e;
}
.budget-stat .green {
  color: #cc3344;
}
.budget-stat .red {
  color: #c0392b;
}

/* ══════════════════════════════════════════════
   ── GIFT CARDS - blue borders, green accents
   ══════════════════════════════════════════════ */
.gift-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.gift-card {
  background: var(--card-bg);
  border: 2px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding: 14px;
  position: relative;
  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.gift-card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

@keyframes gift-wobble {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(-1deg);
  }
  75% {
    transform: rotate(0.5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.gift-card:hover {
  animation: gift-wobble 0.4s ease-in-out;
  transform: translateY(-4px);
}

/* Pastel backgrounds - 8 rotating pastels (violet/coral/gold brand palette) */
.gift-card[data-pastel="0"] { background: #f0eaff; } /* soft violet */
.gift-card[data-pastel="1"] { background: #fff8e6; } /* warm gold tint */
.gift-card[data-pastel="2"] { background: #ffe4e6; } /* soft coral */
.gift-card[data-pastel="3"] { background: #ede8ff; } /* deeper violet tint */
.gift-card[data-pastel="4"] { background: #fff0ee; } /* warm peach */
.gift-card[data-pastel="5"] { background: #f5f0ff; } /* light lavender */
.gift-card[data-pastel="6"] { background: #fff6e6; } /* amber tint */
.gift-card[data-pastel="7"] { background: #fce8ea; } /* blush coral */

/* Priority left-border overrides (kept as stronger accent when set) */
/* priority border-left removed — no left accent bar on gift cards */

.gift-card.priority-1:hover {
  border-color: var(--blue);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.12),
    0 -3px 12px rgba(108, 60, 225, 0.12);
}
.gift-card.priority-2:hover {
  border-color: var(--silver);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.12),
    0 -3px 12px rgba(143, 170, 190, 0.15);
}
.gift-card.priority-3:hover {
  border-color: var(--gold);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.12),
    0 -3px 12px rgba(255, 184, 48, 0.15);
}

/* Shimmer overlay on hover */
.gift-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(108, 60, 225, 0.04) 0%,
    transparent 50%,
    rgba(255, 184, 48, 0.03) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: 12px;
}
.gift-card:hover::after {
  opacity: 1;
}

/* Purchased state */
.gift-card.purchased {
  opacity: 0.62;
}
.gift-card.purchased .gift-name {
  color: var(--muted);
  text-decoration: line-through;
}
.gift-card.reserved {
  border-left: 3px solid #f59e0b;
}
.reserved-badge {
  align-items: center;
  color: #92400e;
  display: flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 4px;
  background: #fef3c7;
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 6px;
}
.btn-icon.reserved-btn {
  background: rgba(245, 158, 11, 0.12);
  border-color: #f59e0b;
  color: #92400e;
}

/* Card internals */
.gift-card-header,
.gift-footer {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.gift-card-header {
  align-items: flex-start;
}
.gift-name {
  flex: 1;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.35;
  color: #111827;
}

/* Priority badges - blue / silver / mint */
.gift-priority {
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 3px 8px;
}
/* priority-1/2/3 on .gift-priority now handled by priority-pill-* classes */

.gift-meta,
.gift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gift-tag {
  background: #f0eaff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  padding: 2px 8px;
  transition: background 0.15s ease;
}
.gift-tag:hover {
  background: var(--bg3);
}
.gift-desc {
  color: #2d4a6a;
  font-size: 0.82rem;
  line-height: 1.45;
} /* AAA 9.1:1 */
.gift-budget {
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 700;
}
.gift-url-link {
  color: var(--teal);
  font-size: 0.74rem;
  text-decoration: none;
  transition: color 0.15s ease;
}
.gift-url-link:hover {
  text-decoration: underline;
  color: var(--purple);
}
.purchased-badge {
  align-items: center;
  color: var(--green);
  display: flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 4px;
  margin-bottom: 2px;
}

.btn-icon {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  font-size: 0.85rem;
  height: 30px;
  justify-content: center;
  width: 30px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}
.btn-icon:hover {
  background: rgba(108, 60, 225, 0.1);
  border-color: var(--blue);
  color: var(--blue);
  transform: scale(1.1);
}
.btn-icon.purchased-btn {
  background: rgba(108, 60, 225, 0.1);
  border-color: var(--green);
  color: var(--green);
}
.btn-icon.delete-btn:hover,
.btn-danger:hover {
  background: rgba(108, 60, 225, 0.08);
  border-color: var(--blue);
  color: var(--blue);
}

.empty-state {
  color: var(--muted);
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
}
.empty-state .emoji {
  font-size: 3rem;
  margin-bottom: 12px;
}

/* ── Priority Pill (on person/group cards) ── */
.priority-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.02rem; /* +11% vs 0.92rem */
  font-weight: 800;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 4.5px 10px;
  cursor: pointer;
  border: 1.5px solid;
  transition:
    transform 0.12s,
    opacity 0.12s;
  user-select: none;
  -webkit-user-select: none;
  line-height: 1;
}
.priority-pill:hover {
  transform: scale(1.1);
}
.priority-pill-1 {
  background: #fff0f0;
  border-color: #e63946;
  color: #e63946;
} /* High */
.priority-pill-2 {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #475569;
} /* Default */
.priority-pill-3 {
  background: #fff8e6;
  border-color: #f4a261;
  color: #c77c2a;
} /* Low */
.priority-pill-off {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #475569;
  opacity: 1;
}

/* Household badge */
.household-badge {
  border-radius: 8px;
  border: 2px solid;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 1.02rem; /* +11% vs 0.92rem */
  font-weight: 700;
  line-height: 1;
  padding: 4.5px 10px;
  transition:
    transform 0.15s,
    opacity 0.15s,
    background 0.15s,
    box-shadow 0.15s;
  user-select: none;
}
.household-badge:hover {
  transform: scale(1.1);
}
.household-badge-on {
  background: linear-gradient(135deg, #ede8ff, #ddd6fe);
  border-color: #6C3CE1;
  color: #4c1d95;
  opacity: 1;
  box-shadow: 0 2px 8px color-mix(in srgb, #6C3CE1 30%, transparent);
}
.household-badge-off {
  background: var(--bg2, #f1f5f9);
  border-color: #cbd5e1;
  color: #94a3b8;
  opacity: 0.6;
}

/* Partner badge — toggle to mark a person as your partner */
.partner-badge {
  border-radius: 8px;
  border: 2px solid;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1;
  padding: 4.5px 10px;
  transition:
    transform 0.15s,
    opacity 0.15s,
    background 0.15s,
    box-shadow 0.15s;
  user-select: none;
}
.partner-badge:hover {
  transform: scale(1.1);
}
.partner-badge-on {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  border-color: #ec4899;
  color: #9d174d;
  opacity: 1;
  box-shadow: 0 2px 8px color-mix(in srgb, #ec4899 30%, transparent);
}
.partner-badge-off {
  background: var(--bg2, #f1f5f9);
  border-color: #cbd5e1;
  color: #94a3b8;
  opacity: 0.6;
}
.partner-badge-pending {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #f59e0b;
  color: #92400e;
  animation: rel-pulse 1.8s ease-in-out infinite;
}
@keyframes rel-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

/* Relationship badge — shown on person cards when a relationship is set */
.relationship-badge {
  border-radius: 6px;
  border: 1.5px solid #a78bfa;
  background: #ede9fe;
  color: #5b21b6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  line-height: 1;
  padding: 2px 5px;
  user-select: none;
  min-width: 22px;
  opacity: 0.85;
  transition: opacity 0.15s;
}
/* relationship-badge dark tint handled by Midnight/dark themes via body.theme-* */

/* Priority filter icon */
.priority-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: #e0f4ff;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
}

/* Priority toggle group in modals */
.priority-toggle-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.priority-toggle-btn {
  flex: 1;
  padding: 6px 10px;
  min-height: 44px; /* Apple 44pt touch target */
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.priority-toggle-btn[data-val="1"].active {
  background: #fff0f0;
  border-color: #e63946;
  color: #e63946;
}
.priority-toggle-btn[data-val="2"].active {
  background: #f0f7ff;
  border-color: var(--blue);
  color: var(--blue);
}
.priority-toggle-btn[data-val="3"].active {
  background: #fff8e6;
  border-color: #f4a261;
  color: #c77c2a;
}
.priority-toggle-btn:not(.active):hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: var(--text);
}

/* ── Relationship chip picker ── */
.rel-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border, #e2e8f0);
  background: var(--bg2, #f8fafc);
  color: var(--text, #111);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.4;
  min-height: 44px; /* Apple 44pt touch target */
  display: inline-flex;
  align-items: center;
}
.rel-chip.active {
  background: var(--primary, #6C3CE1);
  color: #fff;
  border-color: var(--primary, #6C3CE1);
}
.rel-chip:not(.active):hover {
  background: #f0eeff;
  border-color: var(--primary, #6C3CE1);
}

/* ── Star Rating ── */
.star-rating {
  display: flex;
  gap: 3px;
  align-items: center;
  margin: 6px 0 2px;
}
.star-rating .star {
  font-size: 1.15rem;
  cursor: pointer;
  line-height: 1;
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
  user-select: none;
  -webkit-user-select: none;
}
.star-rating .star:hover {
  transform: scale(1.25);
}
.star-rating .star.filled {
  color: #f4c430;
  filter: drop-shadow(0 0 2px rgba(244, 196, 48, 0.5));
}
.star-rating .star.empty {
  color: #94a3b8;
}
.star-rating .star-label {
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 4px;
  font-weight: 600;
}
/* read-only (group view) */
.star-rating.readonly .star {
  cursor: default;
}
.star-rating.readonly .star:hover {
  transform: none;
}

/* ══════════════════════════════════════════════
   ── MODALS ──
   ══════════════════════════════════════════════ */
.modal-overlay {
  align-items: center;
  backdrop-filter: blur(4px);
  background: rgba(10, 37, 64, 0.28);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}
.hidden {
  display: none !important;
}
.modal {
  background: var(--surface, var(--bg2, #fff));
  border: 2px solid var(--blue);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  max-width: 480px;
  padding: 24px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  color: var(--text, #111);
}
.modal h2 {
  color: #fff;
  font-size: 1.1rem;
  margin: 0;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  margin: -24px -24px 18px;
  padding: 16px 44px 16px 24px;
  border-radius: 14px 14px 0 0;
}
.modal-header h2 {
  flex: 1;
  text-align: center;
  color: #fff;
}
.modal-close-btn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: #fff;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  min-width: 44px; /* touch target — Apple 44×44 recommendation */
  min-height: 44px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.form-group {
  margin-bottom: 14px;
}
.form-group label {
  color: var(--muted, #1a5276);
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  text-transform: uppercase;
  font-weight: 700;
}
.form-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
}
.form-row .form-group {
  min-width: 0;
  overflow: hidden;
}
.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* ── Mobile modal: bottom-sheet treatment ── */
@media (max-width: 600px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 0 0 calc(16px + env(safe-area-inset-bottom));
    max-height: 92vh;
    overflow-y: auto;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 2px solid var(--blue);
  }
  .modal-header {
    /* Override negative margins for zero-padding modal */
    margin: 0 0 0 0;
    padding: 14px 52px 14px 16px;
    border-radius: 18px 18px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .modal-header h2 {
    font-size: 1rem;
  }
  .modal-close-btn {
    right: 10px;
  }
  /* Pad form content since header no longer uses negative bleed */
  .modal > .form-group,
  .modal > .form-row,
  .modal > .modal-footer,
  .modal > p,
  .modal > div:not(.modal-header) {
    padding-left: 16px;
    padding-right: 16px;
  }
  .modal > .modal-footer {
    padding-bottom: 8px;
  }
}
.btn-cancel,
.btn-danger {
  border-radius: 8px;
  cursor: pointer;
  padding: 8px 16px;
  transition: background 0.15s ease;
}
.btn-danger {
  margin-right: auto;
}

/* ── Interest Tags ── */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg, #fff);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 40px;
  align-items: center;
  transition: border-color 0.15s ease;
}
.tags-container:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(108, 60, 225, 0.15);
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #6C3CE1, #8b5cf6);
  border: 1px solid #6C3CE1;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  animation: tagIn 0.2s ease;
}
@keyframes tagIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.tag-pill .tag-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s ease;
}
.tag-pill .tag-remove:hover {
  color: #fff;
}
.tag-input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 100px;
  gap: 4px;
}
.tag-input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  padding: 4px 0;
  flex: 1;
  min-width: 60px;
}
.tag-add-btn {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  min-width: 44px;
  min-height: 44px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.tag-add-btn:hover {
  opacity: 0.85;
  transform: scale(1.08);
}

/* ══════════════════════════════════════════════
   ── TOAST ──
   ══════════════════════════════════════════════ */
.toast {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  /* size to content — no fixed height allowed */
  width: fit-content;
  height: auto;
  min-height: 0;
  min-width: 160px;
  max-width: 84vw;
  /* flex centres text vertically even if padding differs */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: 8px 20px;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(30px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  text-align: center;
  pointer-events: none;
  word-break: break-word;
}
.toast.show {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}
.toast.success {
  border-color: var(--green);
  color: var(--green);
}
.toast.error {
  border-color: #ef4444;
  color: #ef4444;
}

/* ══════════════════════════════════════════════
   ── LOADING ──
   ══════════════════════════════════════════════ */
.loading {
  color: var(--muted);
  padding: 40px;
  text-align: center;
}
.spinner {
  animation: spin 0.8s linear infinite;
  border: 2px solid var(--border);
  border-radius: 50%;
  border-top-color: var(--blue);
  display: inline-block;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
  width: 20px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ══════════════════════════════════════════════
   ── GIFT IDEAS SIDE PANEL ──
   ══════════════════════════════════════════════ */
#gift-ideas-panel {
  background: var(--bg, #f9f5ff);
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--blue), var(--gold), var(--accent))
    1;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  height: 100vh;
  right: 0;
  top: 0;
  width: min(420px, 100vw);
  max-width: 100vw;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 6px;
}

/* Person profile (avatar + name + close button) sticks to the top of the panel
   as you scroll through gift results — the close button is always reachable. */
#gift-ideas-panel .person-profile {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg, #f9f5ff);
  /* Extend background to cover border-left strip on sticky */
  margin-left: -3px;
  padding-left: 3px;
}
#gift-ideas-panel.open {
  transform: translateX(0);
}

@media (max-width: 600px) {
  #gift-ideas-panel {
    /* Full-width bottom-up on mobile, safe-area aware */
    width: 100vw;
    top: env(safe-area-inset-top, 0px);
    height: calc(100vh - env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .gift-ideas-header {
    padding: 14px 12px 12px;
    padding-top: max(14px, env(safe-area-inset-top, 14px));
  }
  .gift-ideas-body {
    padding: 12px 12px 20px;
  }
}

.gift-ideas-header {
  align-items: center;
  background: linear-gradient(135deg, var(--blue, #6C3CE1), #8b5cf6) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  padding: 16px 16px 14px;
  flex-shrink: 0;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 2;
}
.gift-ideas-header > div:first-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gift-ideas-title {
  color: #fff !important;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}
.gift-ideas-subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
  color: rgba(255,255,255,0.9);
  justify-content: center;
}
.ideas-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  backdrop-filter: blur(2px);
  white-space: nowrap;
}
.ideas-pill-country {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.gift-ideas-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff !important;
  cursor: pointer;
  font-size: 1.2rem;
  border-radius: 8px;
  /* Big enough touch target */
  width: 36px;
  height: 36px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: -4px;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}
.gift-ideas-close:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.05);
}
/* Close button repositioned inside .person-profile card — override to dark-on-light styling */
.person-profile .gift-ideas-close {
  background: rgba(0, 0, 0, 0.05);
  color: var(--muted, #6b7280) !important;
}
.person-profile .gift-ideas-close:hover {
  background: rgba(0, 0, 0, 0.13);
  color: var(--text, #1a1a2e) !important;
  transform: scale(1.05);
}
.gift-ideas-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 26px;
  background: var(--bg, #f9f5ff);
  color: var(--text);
}
#gift-ideas-content {
  background: var(--card-bg, #FDFAF6);
  border-radius: 12px;
  padding: 14px;
  margin-top: 4px;
  color: var(--text);
}
.gift-ideas-loading {
  color: var(--muted);
  padding: 40px 0;
  text-align: center;
}
.gift-ideas-loading-icon {
  font-size: 2rem;
  margin-bottom: 12px;
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
.gift-ideas-loading-subtext {
  font-size: 0.75rem;
  margin-top: 8px;
}
.gift-ideas-error {
  color: #ef4444;
  padding: 20px 0;
}

/* Research progress dots */
.research-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.research-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  animation: dot-bounce 1.2s ease-in-out infinite;
}
.research-dot:nth-child(2) {
  animation-delay: 0.15s;
}
.research-dot:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dot-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  40% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

/* Research progress bar */
.research-progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg4);
  border-radius: 6px;
  margin-top: 12px;
  overflow: hidden;
}
.research-progress-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--blue), var(--gold), var(--accent));
  background-size: 200% 100%;
  animation: progress-shimmer 2s linear infinite;
  transition: width 0.5s ease;
}
@keyframes progress-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

/* ══════════════════════════════════════════════
   ── SUGGESTION CARDS ──
   ══════════════════════════════════════════════ */
.suggestion-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.suggestion-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  border-radius: 12px 0 0 12px;
  opacity: 1;
  transition:
    width 0.2s ease,
    opacity 0.2s ease;
}
.suggestion-card[data-index="0"]::before {
  background: linear-gradient(180deg, #6C3CE1, #8b5cf6);
}
.suggestion-card[data-index="1"]::before {
  background: linear-gradient(180deg, #FFB830, #e09a00);
}
.suggestion-card[data-index="2"]::before {
  background: linear-gradient(180deg, #FF5D6C, #e04a58);
}
.suggestion-card[data-index="3"]::before {
  background: linear-gradient(180deg, #7c3aed, #6C3CE1);
}
.suggestion-card[data-index="4"]::before {
  background: linear-gradient(180deg, #8b5cf6, #6C3CE1);
}
.suggestion-card[data-index="5"]::before {
  background: linear-gradient(180deg, #FFB830, #FF5D6C);
}
.suggestion-card[data-index="6"]::before {
  background: linear-gradient(180deg, #6C3CE1, #4b23b0);
}
.suggestion-card[data-index="7"]::before {
  background: linear-gradient(180deg, #4b23b0, #7c3aed);
}
.suggestion-card::before {
  background: linear-gradient(180deg, #6C3CE1, #FFB830);
}

.suggestion-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  border-color: var(--blue);
}
.suggestion-card:hover::before {
  width: 6px;
}

.suggestion-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.suggestion-name {
  font-weight: 700;
  font-size: 0.92rem;
  flex: 1;
  line-height: 1.35;
}

.suggestion-price {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.suggestion-desc {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 10px;
}
/* ── "Why this?" micro-reveal ── Phase 7.1/7.2
   Subtle disclosure triangle so each card is explainable without cluttering
   it. Content is generated server-side by the rule-based ExplanationWriter;
   no extra LLM calls are made to produce these strings. */
.suggestion-why {
  margin: 2px 0 8px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--muted);
}
.suggestion-why > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft, rgba(120, 120, 180, 0.08));
  color: var(--accent, #6b6bff);
  font-weight: 600;
  font-size: 0.72rem;
  user-select: none;
  transition: background 0.15s;
}
.suggestion-why > summary::-webkit-details-marker { display: none; }
.suggestion-why > summary::before { content: "✨"; font-size: 0.75rem; }
.suggestion-why > summary:hover { background: var(--accent-soft-hover, rgba(120, 120, 180, 0.16)); }
.suggestion-why[open] > summary { margin-bottom: 4px; }
.suggestion-why .why-text {
  display: block;
  padding: 6px 10px;
  background: var(--surface-soft, rgba(120, 120, 180, 0.05));
  border-left: 2px solid var(--accent, #6b6bff);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--text, #333);
}
/* ── Suggestion card action buttons - unified base ── */
.suggestion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  justify-content: center;
}
/* Base pill - all suggestion buttons share this */
.sug-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition:
    opacity 0.15s,
    transform 0.12s,
    box-shadow 0.15s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.3;
}
.sug-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.sug-btn:active {
  transform: scale(0.96);
}
/* Variants */
.sug-btn-grab {
  background: linear-gradient(135deg, #1a9e5a, #16a34a);
  color: #fff;
  border-color: transparent;
}
.sug-btn-grab:hover {
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.3);
}
.sug-btn-suggest {
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  color: #fff;
  border-color: transparent;
}
.sug-btn-suggest:hover {
  box-shadow: 0 3px 10px rgba(108, 60, 225, 0.3);
}
.sug-btn-link {
  background: var(--bg2);
  color: var(--teal);
  border-color: var(--border);
}
.sug-btn-ghost {
  background: var(--bg2);
  color: var(--muted);
  border-color: var(--border);
}
.sug-btn-ghost:hover {
  background: var(--bg3);
}
.sug-btn-owned {
  background: var(--bg2);
  color: var(--gold2);
  border-color: var(--border);
}
/* Legacy aliases - keep JS working without a full rename */
.suggestion-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  color: var(--teal);
  text-decoration: none;
  transition:
    opacity 0.15s,
    transform 0.12s;
  white-space: nowrap;
}
.suggestion-link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.suggestion-use-btn,
.suggestion-discard-btn,
.suggestion-owned-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--blue, #6C3CE1);
  border: none;
  color: #fff;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.12s;
  white-space: nowrap;
}
.suggestion-use-btn:hover,
.suggestion-discard-btn:hover,
.suggestion-owned-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}
.suggestion-card {
  position: relative;
}
.retailer-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--muted);
  white-space: nowrap;
  margin-right: 4px;
  vertical-align: middle;
}
.gift-card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 3px 0;
}
.suggestion-card-tags {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 2px 0 4px;
}
.gift-card[style*="cursor:pointer"]:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.suggestion-refresh-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  padding: 0;
  font-size: 0.8rem;
  background: rgba(34, 197, 94, 0.15);
  border: 1.5px solid rgba(34, 197, 94, 0.35);
  color: #166534;
  cursor: pointer;
  transition: all 0.18s;
  z-index: 2; /* AA 7.3:1 on white */
}
.suggestion-refresh-btn:hover {
  background: rgba(22, 101, 52, 0.18);
  border-color: #166534;
  transform: rotate(45deg) scale(1.1);
}
.suggestion-refresh-btn:disabled {
  opacity: 0.45;
  cursor: wait;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── URL status badges on suggestion cards ────────────────────────────────────
   Shown when the server-side liveness check found the link is dead or is only
   a search page rather than a direct product URL.
   The existing ↺ refresh button gives users a one-click fix.
   ──────────────────────────────────────────────────────────────────────────── */
.url-dead-badge,
.url-search-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  margin: 4px 0 2px;
  line-height: 1.3;
}
.url-dead-badge {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.url-search-badge {
  background: rgba(234, 179, 8, 0.12);
  color: #b45309;
  border: 1px solid rgba(234, 179, 8, 0.3);
}
/* Slightly dim the card itself when the link is dead — subtle, not alarming */
.suggestion-card[data-url-status="dead"] {
  opacity: 0.88;
}
.suggestion-card[data-url-status="dead"]::before {
  background: linear-gradient(180deg, #9ca3af, #6b7280) !important;
}

/* View Item / Find Item link — explicit URL button on suggestion cards.
   Replaces the old whole-card-click UX for search_fallback URLs.
   Uses the same visual weight as the retailer badge to stay subtle. */
.suggestion-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg2, #f1f5f9);
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--primary, #6C3CE1);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 2px;
}
.suggestion-view-btn:hover {
  background: rgba(108, 60, 225, 0.08);
  border-color: var(--primary, #6C3CE1);
}
/* Search-fallback variant — amber tint to signal "not a direct product page" */
.suggestion-view-btn--search {
  color: #b45309;
  border-color: #fbbf24;
  background: #fffbeb;
}
.suggestion-view-btn--search:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}
/* Unchecked-URL variant — grey tint to signal "unverified, may not work" */
.suggestion-view-btn--unchecked {
  color: #6b7280;
  border-color: #d1d5db;
  border-style: dashed;
  background: var(--bg2, #f1f5f9);
}
.suggestion-view-btn--unchecked:hover {
  background: rgba(107, 114, 128, 0.08);
  border-color: #9ca3af;
  border-style: dashed;
}
.suggestion-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  border: 1.5px solid transparent;
  color: #fff;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.12s;
  white-space: nowrap;
}
.suggestion-add-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.discard-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 200;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  min-width: 170px;
}
.discard-dropdown button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.discard-dropdown button:hover {
  background: var(--bg3);
}

/* ══════════════════════════════════════════════
   ── PERSON PROFILE (side panel)
   ══════════════════════════════════════════════ */
.person-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.person-profile-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}
.person-profile:hover .person-profile-avatar {
  transform: scale(1.08);
}
.person-profile-info {
  flex: 1;
}
.person-profile-name {
  font-weight: 700;
  font-size: 1rem;
  color: #111827;
}
.person-profile-meta {
  color: #2d4a6a;
  font-size: 0.78rem;
  margin-top: 2px;
} /* AAA 9.1:1 */
.person-profile-budget-bar {
  height: 6px;
  border-radius: 6px;
  background: var(--bg4);
  margin-top: 6px;
  overflow: hidden;
}
.person-profile-budget-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}
.person-profile-budget-fill.over {
  background: linear-gradient(90deg, var(--gold), #ef4444);
}

.suggestion-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(108, 60, 225, 0.1),
    rgba(255, 184, 48, 0.1)
  );
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 14px;
}

/* ══════════════════════════════════════════════
   ── CONFETTI ──
   ══════════════════════════════════════════════ */
.confetti-particle {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: confetti-fall 1s ease-out forwards;
}
@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(120px) rotate(720deg) scale(0.3);
  }
}

/* ══════════════════════════════════════════════
   ── RESPONSIVE ──
   ══════════════════════════════════════════════ */
/* Responsive overrides moved to responsive.css */

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Snowflakes and confetti - fully hidden, no motion */
  .snowflake {
    animation: none !important;
    opacity: 0 !important;
    pointer-events: none;
  }
  .confetti-piece {
    animation: none !important;
    opacity: 0 !important;
    pointer-events: none;
  }
  /* Card/item hover lifts suppressed */
  .gift-card {
    transform: none !important;
  }
  .person-item {
    transform: none !important;
  }
  .suggestion-card {
    transform: none !important;
  }
  .tag-add-btn,
  .suggestion-refresh-btn {
    transform: none !important;
  }
  /* Research progress bar - static */
  .research-dot {
    animation: none !important;
    opacity: 0.4;
  }
  .research-progress-fill {
    transition: none !important;
  }
}

/* ── Accessibility: minimum touch targets for icon-only controls ── */
/* Inline close buttons (× in overlays) - expand tap area without changing visual size */
.member-picker-close,
.invite-banner-close,
.invite-panel-close,
.custom-occasion-close {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Research streaming tags */
.research-tags-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.research-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
}
.research-tag-pill.pending {
  background: var(--pastel-blue);
  color: var(--blue);
  border: 1px solid var(--blue);
}
.research-tag-pill.done {
  background: var(--pastel-green);
  color: #0a7a3f;
  border: 1px solid #0a7a3f;
}
.research-tag-pill.error {
  background: #fde8e8;
  color: #c41e3a;
  border: 1px solid #c41e3a;
}
.suggestion-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--pastel-cyan);
  color: var(--green);
  margin-bottom: 4px;
}
.spinner-tiny {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--pastel-blue);
  border-top: 2px solid var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Search History Tabs ── */
.search-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.search-history-title {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.search-history-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  flex: 1;
  margin: 0 16px;
  scrollbar-width: none;
}
.search-history-tabs::-webkit-scrollbar {
  display: none;
}
.search-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  white-space: nowrap;
  transition: all 0.2s;
  user-select: none;
}
.search-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.search-tab.active {
  background: rgba(108, 60, 225, 0.1);
  border-color: rgba(108, 60, 225, 0.25);
  color: var(--gold);
}
.search-tab .tab-close {
  opacity: 0;
  margin-left: 2px;
  font-size: 0.65rem;
  transition: opacity 0.15s;
  color: var(--muted);
}
.search-tab:hover .tab-close {
  opacity: 1;
}
.search-tab .tab-close:hover {
  color: #ef4444;
}
.clear-search-history {
  font-size: 0.68rem;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  transition: color 0.2s;
}
.clear-search-history:hover {
  color: #ef4444;
}
.search-tab-count {
  font-size: 0.6rem;
  opacity: 0.6;
}

/* ── Compact Search Bar in Panel ── */
.panel-search-bar {
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.compact-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 12px;
}
.compact-search input {
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.8rem;
  flex: 1;
  outline: none;
  min-width: 120px;
}
.compact-search input::placeholder {
  color: #5a7a9a;
} /* WCAG AA */
.compact-search-btn {
  background: rgba(108, 60, 225, 0.12);
  border: 1px solid rgba(108, 60, 225, 0.2);
  color: var(--gold);
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.compact-search-btn:hover {
  background: rgba(108, 60, 225, 0.2);
  border-color: rgba(108, 60, 225, 0.4);
}
.compact-search-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Suggestions Container ── */
#suggestions-container {
  padding-bottom: 20px;
}
#suggestions-container:empty {
  display: none;
}

/* ══════════════════════════════════════
   SEARCHABLE MEMBER PICKER
   ══════════════════════════════════════ */
.searchable-picker {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  min-height: 42px;
  transition: border-color 0.15s;
  position: relative;
}
.searchable-picker:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(108, 60, 225, 0.15);
}
.picker-pills-area {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.picker-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #f0eaff, #ffe4e6);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
  animation: tagIn 0.2s ease;
}
.picker-pill-remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.15s;
}
.picker-pill-remove:hover {
  color: var(--blue);
}
.picker-search-input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 16px; /* 16px prevents iOS Safari auto-zoom */
  padding: 4px 0;
  flex: 1;
  min-width: 80px;
}
.picker-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--surface, var(--bg2, #fff));
  border: 1px solid var(--surface-border, var(--border));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  overflow-y: auto;
}
.picker-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.picker-result:last-child {
  border-bottom: none;
}
.picker-result:hover {
  background: var(--bg3);
}
.picker-result-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  flex-shrink: 0;
}
.picker-result-name {
  font-weight: 600;
  flex: 1;
}
.picker-result-meta {
  font-size: 0.7rem;
  color: var(--muted);
}
.picker-hint {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 4px;
  padding-left: 4px;
}

/* ══════════════════════════════════════
   GIFT GROUPS
   ══════════════════════════════════════ */

/* Sidebar tabs */
/* ── View nav - Everyone / People / Groups ── */
.view-nav {
  display: flex;
  gap: 0;
  padding: 8px 16px 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.view-nav-btn {
  flex: 1;
  padding: 9px 6px 10px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font-size: 1.22rem; /* +2pt from 1.09rem */
  font-weight: 700;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
  font-family: inherit;
  text-align: center;
  white-space: nowrap;
}
.view-nav-btn:hover {
  color: var(--text);
}
.view-nav-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* Legacy sidebar-tabs - keep for compatibility */
.sidebar-tabs {
  display: none;
}
.sidebar-tab {
  display: none;
}

/* Group list items */
.group-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.group-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  background: var(--card-bg);
}
.group-item:hover {
  background: var(--bg2);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  border-color: rgba(108, 60, 225, 0.3);
}
.group-item.active {
  background: rgba(124, 58, 237, 0.05);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15);
}
/* Top row: info + icon buttons */
.group-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.group-item-info {
  flex: 1;
  min-width: 0;
}
.group-item-name {
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.group-item-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 3px;
}
.secret-draw-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #fca5a5;
}
.group-item-icons {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
/* Bottom row: pill buttons full width */
.group-item-pills {
  display: flex;
}
.group-item-pills .ideas-pill {
  flex: 1;
  text-align: center;
  border-radius: 0;
}
.group-item-pills .ideas-pill:first-child {
  border-radius: 20px 0 0 20px;
}
.group-item-pills .ideas-pill:last-child {
  border-radius: 0 20px 20px 0;
}
.group-item-pills .ideas-pill:only-child {
  border-radius: 20px;
}

/* member-picker / member-chip replaced by searchable picker (see SEARCHABLE PICKER section above) */

/* Group tag on gift cards */
.group-tag {
  background: rgba(67, 97, 238, 0.1);
  border-color: rgba(67, 97, 238, 0.2);
  color: var(--purple) !important;
}

/* Per-member budget bars */
.group-member-budgets {
  display: none;
  padding: 8px 16px 0;
}
.member-budget-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.8rem;
}
.member-budget-name {
  min-width: 80px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-budget-bar {
  flex: 1;
  height: 8px;
  background: var(--bg4);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}
.member-budget-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.member-budget-fill.over {
  background: #ef4444;
}
.member-budget-text {
  min-width: 90px;
  color: var(--muted);
  font-size: 0.75rem;
}
.member-budget-count {
  min-width: 60px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
}

/* Responsive */
@media (max-width: 700px) {
  .member-budget-row {
    flex-wrap: wrap;
  }
  .member-budget-name {
    min-width: 60px;
    width: 100%;
  }
  .member-budget-text {
    min-width: 70px;
  }
}

/* ══════════════════════════════════════
   PERSON DETAILS BAR (below section header)
   ══════════════════════════════════════ */
.person-details-bar {
  /* transparent wrapper - .person-basket-card inside is the visible card */
  margin-bottom: 8px;
}
.person-interests-display {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.interest-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--pastel-cyan), var(--pastel-mint));
  border: 1px solid rgba(108, 60, 225, 0.2);
  color: var(--green2);
}
.btn-gift-recommendations {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  border: none;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition:
    opacity 0.15s,
    transform 0.15s,
    box-shadow 0.2s;
}
.btn-gift-recommendations:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(108, 60, 225, 0.2);
}
.btn-gift-recommendations.has-cache {
  background: linear-gradient(135deg, #1a9e5a, #16a34a);
}

/* ── Group Info Card ── */
.group-info-card {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(108, 60, 225, 0.05),
    rgba(255, 184, 48, 0.04)
  );
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  width: 100%;
}
.group-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.group-info-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.group-info-occasion {
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  color: #fff;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
}
.group-info-groupname {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.group-info-year {
  font-size: 0.78rem;
  color: var(--muted);
}
.group-info-meta-item {
  font-size: 0.78rem;
  color: var(--muted);
}
.group-info-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 10px 0 6px;
}
.group-info-recipients {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.group-info-recipient {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  flex: 1;
  min-width: 180px;
}
.group-info-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.group-info-name {
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 4px;
}
.group-info-interests {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.group-interest-tag {
  background: #f0eaff;
  border: 1px solid #c4b0f8;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 0.68rem;
  color: var(--blue);
  font-weight: 500;
}
.group-info-no-interests {
  font-size: 0.75rem;
  color: var(--muted);
  font-style: italic;
}
.group-info-buyers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.group-buyer-chip {
  background: var(--pastel-navy);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.75rem;
  color: var(--text);
}

/* Suggest to group button - inherits suggestion-use-btn, just colour override */
.btn-suggest-group {
  background: linear-gradient(135deg, #FF5D6C, #e04a58) !important;
}

/* ════════════════════════════════════════════
   AUTH OVERLAY & SCREENS
   ════════════════════════════════════════════ */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: linear-gradient(135deg, #f0eaff 0%, #ffe4e6 50%, #fff8e6 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.auth-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px 36px;
  width: 100%;
  max-width: 420px;
  margin: auto; /* vertically centres when content shorter than viewport */
  flex-shrink: 0;
  box-shadow:
    0 8px 40px rgba(108, 60, 225, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(108, 60, 225, 0.12);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.auth-logo {
  text-align: center;
  margin-bottom: 10px;
  line-height: 1;
}
.auth-logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.auth-title {
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
  color: #6C3CE1;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.auth-subtitle {
  font-size: 0.88rem;
  text-align: center;
  color: #6c757d;
  margin: 0 0 28px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.auth-label {
  font-size: 0.94rem;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.01em;
}

.auth-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  /* 16px minimum — prevents iOS Safari auto-zoom on focus */
  font-size: 16px;
  color: #111827;
  background: #f9fafb;
  /* manipulation — removes 300ms tap delay */
  touch-action: manipulation;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
  outline: none;
  font-family: inherit;
}

.auth-input:focus {
  border-color: #6C3CE1;
  background: #fff;
  color: #111827;
  box-shadow: 0 0 0 3px rgba(108, 60, 225, 0.15);
}

/* Prevent browser autofill from overriding input colours */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #111827;
  -webkit-box-shadow: 0 0 0 1000px #f9fafb inset;
  box-shadow: 0 0 0 1000px #f9fafb inset;
  transition: background-color 5000s ease-in-out 0s;
}

.auth-input::placeholder {
  color: #6b7a8d; /* WCAG AA: 4.6:1 on white */
}

.auth-status {
  font-size: 0.83rem;
  min-height: 20px;
  border-radius: 8px;
  padding: 0;
  transition: all 0.15s;
}

.auth-status-error {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 8px 12px;
}

.auth-status-success {
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 8px 12px;
}

.auth-status-info {
  color: #4b23b0;
  background: #f0eaff;
  border: 1px solid #d4c6f8;
  padding: 8px 12px;
}

.auth-btn {
  width: 100%;
  padding: 12px;
  min-height: 44px; /* Apple 44pt touch target */
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.1s,
    box-shadow 0.15s;
  letter-spacing: 0.01em;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(255, 93, 108, 0.25);
}

.auth-btn:hover:not(:disabled) {
  opacity: 0.92;
  box-shadow: 0 4px 14px rgba(255, 93, 108, 0.32);
}

.auth-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.auth-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.auth-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.auth-link-btn {
  background: none;
  border: none;
  color: #6C3CE1;
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.auth-link-btn:hover {
  color: #4b23b0;
  text-decoration-thickness: 2px;
}

.auth-link-sep {
  color: #d1d5db;
  font-size: 0.84rem;
  user-select: none;
}

/* ── User menu in topbar ── */
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto; /* always pin to the right edge of the topbar flex row */
}

.user-menu-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6C3CE1, #FF5D6C);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition:
    box-shadow 0.15s,
    opacity 0.15s;
}

.user-menu-avatar:hover {
  box-shadow: 0 0 0 3px rgba(108, 60, 225, 0.2);
  opacity: 0.92;
}

.user-menu-dropdown {
  /* position/top/right set by JS via getBoundingClientRect - fixed so it
     escapes ALL parent stacking contexts (topbar, content-shell, transforms) */
  position: fixed;
  background: var(--surface, var(--bg2, #fff));
  border: 1px solid var(--surface-border, var(--border, #e5e7eb));
  border-radius: 12px;
  padding: 6px;
  width: max-content;
  min-width: 160px;
  max-width: 240px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.18);
  z-index: 9999;
}

.user-menu-header {
  background: linear-gradient(135deg, #6C3CE1, #8b5cf6);
  margin: -6px -6px 5px;
  padding: 11px 12px 10px;
  border-radius: 8px 8px 0 0;
  text-align: center;
}
.user-menu-name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-email-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* legacy - keep for compat */
.user-menu-email {
  font-size: 0.78rem;
  color: #6b7280;
  padding: 6px 10px 8px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 6px;
  word-break: break-all;
}

.user-menu-btn {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 7px 10px;
  font-size: 0.97rem;
  color: var(--text, #374151);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  font-family: inherit;
  white-space: nowrap;
}

.user-menu-btn:hover {
  background: var(--bg3, rgba(0, 0, 0, 0.06));
}

/* ── Mobile topbar: avatar locked top-right ── */
@media (max-width: 600px) {
  .topbar {
    position: sticky !important;
    min-height: 60px;
    padding: 10px calc(60px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));
    gap: 8px;
  }
  .topbar h1 {
    font-size: 1.43rem; /* +4pt from 1.1rem */
  }
  .user-menu {
    position: absolute;
    top: 50%;
    right: calc(12px + env(safe-area-inset-right));
    /* No transform — it creates a stacking context that traps fixed dropdowns on mobile */
    margin-top: -18px;
    margin-left: 0;
  }
  .pills {
    display: none; /* hide stat pills on narrow screens - shown in home tab instead */
  }
}

/* Mobile auth adjustments */
@media (max-width: 480px) {
  .auth-overlay {
    padding: 16px;
    align-items: flex-start;
  }
  .auth-card {
    padding: 28px 20px 24px;
    border-radius: 16px;
    margin: auto;
  }
  .auth-title {
    font-size: 1.35rem;
  }
}

/* ── Password strength meter ── */
.pw-strength {
  display: none;
  margin-top: 8px;
}
.pw-strength-bars {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  align-items: center;
}
.pw-bar {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: #e5e7eb;
  transition: background 0.2s;
}
.pw-bar-active {
  /* background set inline by JS */
}
.pw-strength-label {
  font-size: 0.75rem;
  font-weight: 700;
  margin-left: 8px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.2s;
}
.pw-strength-reqs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
}
.pw-req {
  font-size: 0.75rem;
  color: #9ca3af;
  transition: color 0.15s;
  white-space: nowrap;
}
.pw-req-ok {
  color: #22c55e;
}

/* ── Invite Panel ── */
.invite-status {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 6px;
}
.invite-status-error {
  background: rgba(230, 57, 70, 0.12);
  color: #c1121f;
  border: 1px solid #e63946;
}
.invite-status-success {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border: 1px solid #22c55e;
}
.invite-status-info {
  background: rgba(108, 60, 225, 0.1);
  color: #6C3CE1;
  border: 1px solid rgba(108, 60, 225, 0.4);
}

.invite-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.invite-item:last-child {
  border-bottom: none;
}
.invite-item-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.invite-email {
  font-size: 0.9rem;
  font-weight: 600;
}
.invite-meta {
  font-size: 0.78rem;
  color: var(--muted);
}
.invite-item-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.invite-empty {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 6px 0 10px;
}

.invite-status-pill {
  font-size: 0.75rem;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.invite-pill-pending {
  background: rgba(251, 191, 36, 0.15);
  color: #92400e;
}
.invite-pill-accepted {
  background: rgba(34, 197, 94, 0.15);
  color: #166534;
}
.invite-pill-declined {
  background: rgba(239, 68, 68, 0.12);
  color: #991b1b;
}

.invite-action-btn {
  font-size: 0.8rem;
  padding: 3px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.invite-accept {
  background: #22c55e;
  color: #fff;
}
.invite-decline {
  background: #e5e7eb;
  color: #374151;
}
.invite-cancel {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.invite-accept:hover {
  background: #16a34a;
}
.invite-decline:hover {
  background: #d1d5db;
}
.invite-cancel:hover {
  background: #fee2e2;
}

/* Connected person badge */
.person-connected-badge {
  font-size: 0.85rem;
  opacity: 0.7;
  cursor: default;
  padding: 4px 6px;
}

/* ── Profile Wizard ── */
.wiz-status {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 4px;
}
.wiz-status-error {
  background: rgba(230, 57, 70, 0.12);
  color: #c1121f;
  border: 1px solid #e63946;
}
.wiz-status-success {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border: 1px solid #22c55e;
}
.wiz-status-info {
  background: rgba(108, 60, 225, 0.1);
  color: #6C3CE1;
  border: 1px solid rgba(108, 60, 225, 0.4);
}
.wiz-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(108, 60, 225, 0.12);
  color: #5b21b6;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 3px 3px 3px 0;
}
.wiz-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #7c3aed;
  font-size: 1rem;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
}
.wiz-tag-remove:hover {
  opacity: 1;
}

/* Avatar image on person cards */
.person-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.person-profile-avatar.person-avatar-img {
  width: 56px;
  height: 56px;
}

/* Password eye toggle */
.auth-pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-pw-wrap .auth-input {
  flex: 1;
  padding-right: 40px;
}
.auth-eye-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 4px;
  color: var(--muted);
  opacity: 0.7;
  transition: opacity 0.15s;
  /* Apple 44pt minimum touch target */
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-eye-btn:hover {
  opacity: 1;
}

.user-menu-btn-danger {
  color: #e63946 !important;
}
.user-menu-btn-danger:hover {
  background: rgba(230, 57, 70, 0.12) !important;
}

/* ── VISIBILITY BADGES (gift_items.visibility) ── */
.visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.visibility-surprise {
  background: rgba(168, 85, 247, 0.12);
  color: #7c3aed;
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.visibility-wishlist {
  background: rgba(34, 197, 94, 0.12);
  color: #047857;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.visibility-group-suggestion {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #7c3aed;
}
.rating-open-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #065f46;
  border-radius: 999px;
  padding: 3px 8px;
}
.btn-publish-choices {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 2px 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.btn-publish-choices:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* ── GROUP CHOICE MODE BADGES ── */
.group-choice-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
}
.group-choice-badge.draft {
  background: rgba(234, 179, 8, 0.12);
  color: #92400e;
  border: 1px solid rgba(234, 179, 8, 0.3);
}
.group-choice-badge.published {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ── GROUP CHOICE PUBLISH BUTTON ── */
.group-choice-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.15s;
}
.group-choice-btn:hover {
  opacity: 0.85;
}
.group-choice-btn.choice-published {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* ── CHOICE RATING STARS (gift_choice_ratings) ── */
.choice-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.choice-rating-label {
  font-size: 0.72rem;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}
.choice-star-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  padding: 1px 2px;
  opacity: 0.35;
  transition:
    opacity 0.12s,
    transform 0.1s;
  line-height: 1;
}
.choice-star-btn.active {
  opacity: 1;
}
.choice-star-btn:hover {
  opacity: 0.8;
  transform: scale(1.15);
}
.choice-rating-saved {
  font-size: 0.7rem;
  color: var(--muted, #6b7280);
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}
.choice-rating-saved.visible {
  opacity: 1;
}

/* ══════════════════════════════════════════════
   ── HOME TAB ──
   ══════════════════════════════════════════════ */

/* Panel wrapper */
#home-tab-panel {
  padding: 10px 16px 8px;
}
.home-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Shimmer skeleton ── */
@keyframes sk-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.sk {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.08) 25%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.08) 75%
  );
  background-size: 800px 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
.sk-emoji  { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sk-title  { width: 65%; height: 22px; margin-bottom: 10px; }
.sk-subtitle { width: 80%; height: 14px; }
.sk-btn    { width: 110px; height: 36px; border-radius: 22px; }
.home-skeleton-hero { pointer-events: none; }

/* Section-level shimmer cards (for below-the-fold) */
.home-sk-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-sk-card .sk {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--muted) 10%, transparent) 25%,
    color-mix(in srgb, var(--muted) 22%, transparent) 50%,
    color-mix(in srgb, var(--muted) 10%, transparent) 75%
  );
  background-size: 800px 100%;
}
.home-sk-row  { height: 14px; width: 70%; border-radius: 6px; }
.home-sk-row2 { height: 14px; width: 45%; border-radius: 6px; }
.home-sk-head { height: 18px; width: 40%; border-radius: 6px; margin-bottom: 4px; }

/* ── Hero greeting ── */
/* ── Hero card — dynamic context-aware greeting ── */
.home-hero-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
  margin-bottom: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  isolation: isolate;
  min-height: 140px;
}
.home-hero-inner {
  position: relative;
  z-index: 1;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* LLM-only hero: centre content vertically + horizontally */
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 110px;
}
.home-hero-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.home-hero-emoji {
  font-size: 2.6rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.18));
}
.home-hero-emoji--pulse {
  animation: hero-pulse 1.8s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.18); }
}
.home-hero-text {
  flex: 1;
  min-width: 0;
}
.home-hero-headline {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.22);
}
.home-hero-body {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.88);
  margin-top: 5px;
  font-weight: 400;
  line-height: 1.4;
}

/* ── Prinda AI greeting — frosted white card inside the purple hero ── */
.home-hero-ai-text {
  font-size: 0.83rem;
  font-style: normal;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.5;
  margin-bottom: 12px;
  padding: 9px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
  min-height: 1.2em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Blinking cursor while typewriter is in progress */
.home-hero-ai-text.home-hero-ai-typing::after {
  content: '|';
  display: inline-block;
  margin-left: 1px;
  animation: home-ai-blink 0.65s steps(1) infinite;
  color: rgba(30, 41, 59, 0.4);
  font-style: normal;
}

@keyframes home-ai-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Fade in on appearance (no shimmer needed — page loads clean) */
.home-hero-ai-text--loaded {
  animation: home-ai-fadein 0.3s ease;
}

@keyframes home-ai-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Loading pulse — visible while LLM is fetching (replaces hidden display:none) */
.home-hero-ai-text--loading {
  opacity: 0.5;
  font-style: italic;
  color: #1e293b;
  animation: home-ai-loading-pulse 1.5s ease-in-out infinite;
}

@keyframes home-ai-loading-pulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.65; }
}

/* ── Hero gathering event card — centered pill inside the purple hero ── */
.home-hero-event-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 8px;
}
.home-hero-event-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.38);
  border-radius: 16px;
  padding: 11px 14px;
  cursor: pointer;
  width: fit-content;
  max-width: 100%;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
}
.home-hero-event-card:hover,
.home-hero-event-card:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
}
.home-hero-event-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}
.home-hero-event-info {
  flex: 1;
  min-width: 0;
}
.home-hero-event-name {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.home-hero-event-when {
  display: block;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 2px;
  white-space: nowrap;
}
.home-hero-event-btn {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 20px;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  letter-spacing: 0.01em;
}
.home-hero-event-btn:hover {
  background: rgba(255, 255, 255, 0.34);
}
.home-hero-cta {
  display: inline-flex;
  align-items: center;
  align-self: center;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 22px;
  padding: 9px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s;
  letter-spacing: 0.01em;
  min-height: 40px;
  text-shadow: none;
}
.home-hero-cta:hover,
.home-hero-cta:focus-visible {
  background: rgba(255,255,255,0.34);
  transform: translateY(-1px);
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 2px;
}
.home-hero-cta:active {
  transform: translateY(0);
}
/* Ambient glow layer */
.home-hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  border-radius: inherit;
}
/* Stat chips inside hero — centred */
.home-greeting-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 2px;
}
.home-greeting-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
}
.home-greeting-chip-val {
  font-weight: 700;
  color: #fff;
}

/* ── Theme gradients ── */
.home-hero-card--birthday {
  background: linear-gradient(135deg, #f857a6 0%, #ff5858 55%, #ffb830 100%);
}
.home-hero-card--birthday .home-hero-glow {
  background: radial-gradient(ellipse at 80% 20%, #ff9a3c 0%, transparent 60%);
}
.home-hero-card--gathering {
  background: linear-gradient(135deg, #6C3CE1 0%, #9b5de5 50%, #f15bb5 100%);
}
.home-hero-card--gathering .home-hero-glow {
  background: radial-gradient(ellipse at 20% 80%, #c77dff 0%, transparent 60%);
}
.home-hero-card--rate {
  background: linear-gradient(135deg, #3a86ff 0%, #8338ec 100%);
}
.home-hero-card--rate .home-hero-glow {
  background: radial-gradient(ellipse at 70% 30%, #60efff 0%, transparent 60%);
}
.home-hero-card--secret {
  background: linear-gradient(135deg, #2d6a4f 0%, #40916c 55%, #95d5b2 100%);
}
.home-hero-card--secret .home-hero-glow {
  background: radial-gradient(ellipse at 50% 0%, #b7e4c7 0%, transparent 60%);
}
.home-hero-card--upcoming {
  background: linear-gradient(135deg, #FF5D6C 0%, #FFB830 100%);
}
.home-hero-card--upcoming .home-hero-glow {
  background: radial-gradient(ellipse at 80% 80%, #ffe08a 0%, transparent 60%);
}
.home-hero-card--invite {
  background: linear-gradient(135deg, #4361ee 0%, #4cc9f0 100%);
}
.home-hero-card--invite .home-hero-glow {
  background: radial-gradient(ellipse at 30% 20%, #b5eeff 0%, transparent 60%);
}
.home-hero-card--default {
  background: linear-gradient(135deg, #6C3CE1 0%, #FF5D6C 70%, #FFB830 100%);
}
.home-hero-card--default .home-hero-glow {
  background: radial-gradient(ellipse at 60% 10%, rgba(255,184,48,0.5) 0%, transparent 55%);
}

@media (max-width: 480px) {
  .home-hero-headline { font-size: 1.15rem; }
  .home-hero-emoji    { font-size: 2.1rem; }
  .home-hero-inner    { padding: 18px 16px 14px; gap: 12px; }
}

/* ── Action cards (What needs you now) ── */
.home-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  position: relative;
}
.home-action-card::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px 0;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}
.home-action-card:last-child {
  margin-bottom: 0;
}
.home-action-copy {
  flex: 1;
  min-width: 0;
}
.home-action-kicker {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.home-action-label {
  font-size: 0.96rem;
  color: var(--text);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}
.home-action-label strong {
  font-weight: 700;
}
.home-action-cta {
  background: var(--accent);
  color: var(--card-bg);
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  white-space: nowrap;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.home-action-cta:hover {
  opacity: 0.85;
}

/* ── Dice draw button ── */
.home-dice-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-dice-face {
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  transform-origin: center;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}
.home-dice-face.home-dice-flip {
  transform: rotateY(90deg) scale(0.7);
  opacity: 0;
}
.home-dice-label {
  line-height: 1;
}

@media (max-width: 480px) {
  .home-action-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .home-action-cta {
    width: 100%;
  }
}

/* 2-column responsive grid for section pairs */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 768px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Hero stats strip ── */
.home-hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(135deg, var(--card-bg) 0%, color-mix(in srgb, var(--accent) 8%, var(--card-bg)) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  align-items: center;
  justify-content: center;
}
.home-hero-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 28px;
  border-right: 1px solid var(--border);
  min-width: 100px;
}
.home-hero-block:last-child {
  border-right: none;
}
.home-hero-emoji {
  font-size: 1.5rem;
  line-height: 1;
}
.home-hero-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.home-hero-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
@media (max-width: 480px) {
  .home-hero-strip {
    padding: 12px 16px;
  }
  .home-hero-block {
    padding: 6px 14px;
    min-width: 70px;
  }
  .home-hero-number {
    font-size: 1.6rem;
  }
}

/* ── Section card ── */
.home-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  position: relative;
}
.home-section::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 2px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.home-section-body {
  padding: 14px 18px;
  min-height: 20px;
}
.home-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

/* Centre the radar/todaydar section headers */
#home-moments-section .home-section-header,
#home-todaydar-section .home-section-header {
  justify-content: center;
}

/* Collapsible sections — Todaydar + 7-day radar use <details>/<summary> */
.home-collapsible-section > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-size: inherit;
  color: inherit;
  position: relative; /* anchor for absolute chevron */
}
.home-collapsible-section > summary::-webkit-details-marker,
.home-collapsible-section > summary::marker {
  display: none;
}
/* Chevron — absolute right, ▲ open / ▼ closed */
.home-collapsible-section > summary::after {
  content: '▼';
  position: absolute;
  right: 14px;
  top: 50%;
  font-size: 1.1em;   /* ~doubled for clear visibility */
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  line-height: 1;
  /* Default (open) state: rotate 180° shows ▲ */
  transform: translateY(-50%) rotate(180deg);
  transition: transform 0.22s ease;
}
/* Closed state: ▼ pointing down */
.home-collapsible-section:not([open]) > summary::after {
  transform: translateY(-50%) rotate(0deg);
}
/* Balance spacer — mirrors chevron width so heading stays true-center */
.home-collapsible-section > summary::before {
  content: '';
  display: inline-block;
  width: 1.1em;
  flex-shrink: 0;
  pointer-events: none;
}
.home-section-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--gold);
  color: var(--bg);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Choices / gifts-to-rate highlight */
.home-section--highlight {
  border-top: 3px solid var(--gold);
}

/* ── Empty + loading states ── */
.home-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px;
  text-align: center;
}
.home-empty-emoji {
  font-size: 2.5rem;
  line-height: 1;
}
.home-empty-text {
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 220px;
  line-height: 1.5;
}
.home-loading {
  color: var(--muted);
  font-size: 0.85rem;
  padding: 10px 0;
}

/* ── Wishlist ── */
.home-gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .home-gift-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    max-width: 100%;
  }
  .home-gift-card {
    min-width: 220px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}
.home-gift-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  transition: box-shadow 0.15s, transform 0.12s;
  outline-offset: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.home-gift-card--link {
  cursor: pointer;
}
.home-gift-card--link:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.home-gift-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.4;
}
.home-gift-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.home-price-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-radius: 8px;
  padding: 2px 7px;
}
.home-link-hint {
  font-size: 0.85rem;
  color: var(--muted);
}
.home-view-all-btn {
  margin-top: 4px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  min-height: 44px;
  transition: opacity 0.15s;
}
.home-view-all-btn:hover {
  opacity: 0.75;
}

/* ── Occasions ── */
.home-occasion-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;
}
.home-occasion-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.home-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--card-bg);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 52px;
  flex-shrink: 0;
  text-align: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--gold) 28%, transparent);
}
.home-date-day {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
}
.home-date-month {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
  font-weight: 600;
  opacity: 0.9;
}
.home-occasion-icon-wrap {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 44px;
  text-align: center;
}
.home-occasion-info {
  flex: 1;
  min-width: 0;
}
.home-occasion-person {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.home-occasion-label {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 2px;
}
.home-occasion-when {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  margin-left: auto;
  flex-shrink: 0;
  text-align: right;
}

/* ── Groups ── */
.home-group-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-bg);
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.12s, border-color 0.15s;
  outline-offset: 2px;
}
.home-group-card:last-child {
  margin-bottom: 0;
}
.home-group-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.home-group-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.home-avatar-stack {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.home-avatar-circle {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 16%, var(--card-bg));
  border: 2px solid var(--card-bg);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: -8px;
}
.home-avatar-circle:first-child {
  margin-left: 0;
}
.home-avatar-more {
  background: color-mix(in srgb, var(--accent) 14%, var(--card-bg));
}
.home-group-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-group-name {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text);
}
.home-group-members {
  font-size: 0.78rem;
  color: var(--muted);
}
.home-group-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.home-choice-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  color: var(--text);
  white-space: nowrap;
}
.home-group-arrow {
  font-size: 1.1rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* ── Choices / Gifts to Rate ── */
.home-choice-group {
  margin-bottom: 18px;
}
.home-choice-group:last-child {
  margin-bottom: 0;
}
.home-choice-group-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.home-choice-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.home-choice-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  transition:
    box-shadow 0.15s,
    transform 0.12s;
}
.home-choice-card[onclick] {
  cursor: pointer;
}
.home-choice-card[onclick]:hover {
  box-shadow: 0 4px 16px rgba(108, 60, 225, 0.14);
  transform: translateY(-2px);
}
.home-choice-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.home-choice-desc {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1.4;
}
.home-choice-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

/* Star widget inside home choice cards */
.home-star-rating {
  display: flex;
  gap: 3px;
  align-items: center;
  margin: 6px 0 4px;
}
.home-star-rating .star {
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.1s ease;
  user-select: none;
  -webkit-user-select: none;
}
.home-star-rating .star.filled {
  color: #f4c430;
  filter: drop-shadow(0 0 2px rgba(244, 196, 48, 0.5));
}
.home-star-rating .star.empty {
  color: #d1d5db;
}
.home-star-rating .star:hover:not([data-disabled="true"]) {
  transform: scale(1.25);
}
.home-star-rating .star[data-disabled="true"] {
  cursor: default;
}
.home-star-rating.rated .star[data-disabled="true"]:hover {
  transform: none;
}

.home-choice-cta {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}
.home-already-rated {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold2);
  margin-top: 4px;
}

/* ── Home responsive ── */
@media (max-width: 768px) {
  .home-choice-suggestions {
    grid-template-columns: 1fr;
  }
  .home-section-header,
  .home-section-body {
    padding-left: 14px;
    padding-right: 14px;
  }
  .home-occasion-card {
    align-items: flex-start;
  }
  .home-occasion-when {
    margin-left: 0;
  }
  .home-group-card {
    align-items: flex-start;
  }
  .home-group-right {
    width: 100%;
    justify-content: space-between;
  }
  #home-tab-panel {
    padding: 10px;
  }
}

/* ── Home tab: stats chips ── */
.home-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.home-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 0.8rem;
  color: var(--text);
  white-space: nowrap;
}
.home-stat-chip-value {
  font-weight: 700;
  color: var(--accent);
}

/* ── Home tab: invite + SS + seat rows ── */
.home-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.home-row:last-child { border-bottom: none; }
.home-row-info { flex: 1; min-width: 0; }
.home-row-label {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-row-meta {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 2px;
}
.home-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.home-row-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 32px;
  transition: opacity 0.15s;
}
.home-row-btn:hover,
.home-row-btn:focus-visible {
  opacity: 0.85;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.home-row-btn.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.home-status-pill {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.home-status-pill.pending {
  background: rgba(148,163,184,0.15);
  color: var(--muted);
  border: 1px solid rgba(148,163,184,0.3);
}
.home-status-pill.active, .home-status-pill.drawn {
  background: rgba(108, 60, 225, 0.12);
  color: var(--blue);
  border: 1px solid rgba(108, 60, 225, 0.3);
}
.home-status-pill.open {
  background: rgba(255, 93, 108, 0.12);
  color: var(--accent);
  border: 1px solid rgba(255, 93, 108, 0.3);
}
/* BEM-style pill modifiers (used by home-render.js) */
.home-status-pill--pending {
  background: rgba(148,163,184,0.15);
  color: var(--muted);
  border: 1px solid rgba(148,163,184,0.3);
}
.home-status-pill--drawn {
  background: rgba(108, 60, 225, 0.12);
  color: var(--teal, #6C3CE1);
  border: 1px solid rgba(108, 60, 225, 0.3);
}
.home-status-pill--open {
  background: rgba(255, 93, 108, 0.12);
  color: var(--accent);
  border: 1px solid rgba(255, 93, 108, 0.3);
}

/* ── CTA buttons (Secret Draw, Seats) ── */
.home-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}
.home-cta-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.home-cta-btn:active {
  transform: translateY(0);
}
.home-cta-btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.home-cta-btn--ghost:hover {
  background: rgba(255, 93, 108, 0.08);
}

/* ── Avatar stack ── */
.home-avatar-stack {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0;
}
.home-avatar-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border: 2px solid var(--card-bg);
  margin-left: -6px;
  flex-shrink: 0;
}
.home-avatar-circle:first-child {
  margin-left: 0;
}
.home-avatar-more {
  background: var(--muted);
}
.home-member-count {
  font-size: 0.78rem;
  color: var(--muted);
}

/* ── Group cards ── */
.home-group-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--pastel-sky);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  outline-offset: 2px;
  min-height: 48px;
}
.home-group-card:last-child {
  margin-bottom: 0;
}
.home-group-card:hover {
  border-color: var(--accent);
  background: var(--pastel-blue);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.home-group-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.home-group-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Secret Draw cards ── */
.home-ss-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow 0.15s;
}
.home-ss-card:last-child {
  margin-bottom: 0;
}
.home-ss-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.home-ss-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.home-ss-meta {
  display: flex;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.home-ss-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Seats card ── */
.home-seats-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.home-seats-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.home-seats-number {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.home-seats-label {
  font-size: 0.82rem;
  color: var(--muted);
}
.home-seats-free {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green);
  background: rgba(34,197,94,0.1);
  border-radius: 20px;
  padding: 2px 8px;
  border: 1px solid rgba(34,197,94,0.25);
}

/* ── Gifts to Rate cards ── */
.home-rate-group {
  margin-bottom: 18px;
}
.home-rate-group:last-child {
  margin-bottom: 0;
}
.home-rate-group-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.home-rate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
@media (max-width: 480px) {
  .home-rate-grid {
    grid-template-columns: 1fr;
  }
}
.home-rate-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  transition: box-shadow 0.15s, transform 0.12s;
}
.home-rate-card[onclick] {
  cursor: pointer;
}
.home-rate-card[onclick]:hover {
  box-shadow: 0 4px 16px rgba(59,130,246,0.12);
  transform: translateY(-2px);
}
.home-rate-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.home-rate-desc {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1.4;
}
.home-rate-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.home-rate-cta {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 4px;
}

/* ── Pending Invites ── */
.home-invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.home-invite-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.home-invite-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-invite-email {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-invite-date {
  font-size: 0.75rem;
  color: var(--muted);
}

/* ── Home view: force content-shell visible so home-tab-panel shows ── */
body.view-home .content-shell,
body.view-home .layout.mobile-list-mode .content-shell,
body.view-home .layout.mobile-detail-mode .content-shell {
  display: block !important;
}
body.view-home .layout.mobile-list-mode .sidebar,
body.view-home .layout.mobile-detail-mode .sidebar,
body.view-home .sidebar {
  display: none !important;
}
body.view-home #main-content {
  display: none !important;
}
body.view-home #mobile-back-btn {
  display: none !important;
}


/* Dark mode removed - themes handle all colour variation.
   Use the theme picker to switch to Midnight or other dark themes. */


/* ═══════════════════════════════════════════════════════════════════
   AAA CONTRAST OVERRIDES - text elements that can reach 7:1
   Applied globally (not just dark mode).
   ═══════════════════════════════════════════════════════════════════ */

/* Silver used as text must meet AA minimum - #5a7a9a is 4.48:1; use #3d5a78 for text */
.person-budget-text,
.gift-card .gift-tag,
.card-tool-warn,
.filter-popover label,
.filter-popover-clear,
.fib-label {
  color: #3d5a78; /* 7.2:1 on white ✅ AAA */
}

/* Muted running text - bump to AAA where used as body copy */
.gift-ideas-subtitle,
.person-profile-interests,
.suggestion-meta {
  color: #2d4a6a; /* 8.5:1 on white ✅ AAA */
}

/* ═══════════════════════════════════════════════════════════════════
   SECRET SANTA - sidebar items & home card
   ═══════════════════════════════════════════════════════════════════ */

.ss-sidebar-item:hover {
  border-color: #e74c3c !important;
  background: rgba(231, 76, 60, 0.04) !important;
}

#ss-home-card-area > div:hover {
  opacity: 0.93;
  transform: translateY(-1px);
  transition:
    opacity 0.15s,
    transform 0.15s;
}

/* ═══════════════════════════════════════════════════════════════════
   MESSAGES BADGE - shown on user avatar (top-left)
   ═══════════════════════════════════════════════════════════════════ */

/* Inline unread pill inside the Messages menu button */
#msg-unread-badge {
  display: none;
  background: #e74c3c;
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1.4;
}

/* Absolute badge on top of the avatar circle */
#msg-avatar-badge {
  display: none;
  position: absolute;
  top: -4px;
  left: -4px;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  font-size: 0.65rem;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--card-bg, #fff);
  pointer-events: none;
  z-index: 1;
}

/* ── Gift thumbnail ── */
.gift-thumb {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  margin-bottom: 6px;
}
.gift-thumb-preview {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* ── Topbar search ── */
.topbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text-muted, #718096);
  min-width: 36px;
  min-height: 36px;
  flex-shrink: 0;
}
.topbar-icon-btn:hover {
  background: var(--bg-hover, #f7fafc);
  color: var(--primary, #6C3CE1);
}
.topbar-icon-btn:focus-visible {
  outline: 2px solid var(--primary, #6C3CE1);
  outline-offset: 2px;
}

.search-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-container .search-input-field {
  display: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  width: 0;
  opacity: 0;
  transition:
    width 0.2s ease,
    opacity 0.2s ease;
  background: var(--bg-input, #fff);
  color: var(--text, #1a202c);
  font-family: inherit;
  outline: none;
}
.search-container.search-active .search-input-field {
  display: block;
  width: 220px;
  opacity: 1;
}
.search-container.search-active .search-input-field:focus {
  border-color: var(--primary, #6C3CE1);
  box-shadow: 0 0 0 2px rgba(108, 60, 225, 0.15);
}
.search-results-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  z-index: 9000;
  padding: 6px 0;
}
.search-result-group-label {
  padding: 6px 14px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #718096);
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  min-height: 44px;
}
.search-result-item:hover,
.search-result-item:focus {
  background: var(--bg-hover, #f7fafc);
  outline: none;
}
.search-result-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.search-result-text {
  font-weight: 500;
  color: var(--text, #1a202c);
}
.search-result-sub {
  font-size: 12px;
  color: var(--text-muted, #718096);
  margin-left: auto;
}
.search-loading,
.search-no-results {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--text-muted, #718096);
  text-align: center;
}

/* ── Search container (topbar) ── */
#search-container {
  position: relative;
  display: flex;
  align-items: center;
}
#search-toggle-btn {
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted, #718096);
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  transition: border-color 0.15s;
}
#search-toggle-btn:hover {
  border-color: var(--primary, #6C3CE1);
  color: var(--primary, #6C3CE1);
}
#search-container.search-active #search-toggle-btn {
  display: none;
}
#search-input {
  border: 1px solid var(--primary, #6C3CE1);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 0.85rem;
  background: var(--bg3, #f8fafc);
  color: var(--text, #0f172a);
  outline: none;
  min-width: 200px;
  min-height: 36px;
  box-shadow: 0 0 0 2px rgba(108, 60, 225, 0.12);
}
@media (max-width: 600px) {
  #search-input {
    min-width: 140px;
  }
}

/* ── Share popover ── */
.share-popover {
  position: fixed;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 14px 16px;
  z-index: 9500;
  width: 260px;
  font-size: 14px;
}
.share-popover-title {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 10px;
  color: var(--text, #1a202c);
}
.share-popover-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.share-popover-url {
  font-size: 12px;
  word-break: break-all;
  color: var(--text-muted, #718096);
  margin: 8px 0;
  background: var(--bg3, #f1f5f9);
  border-radius: 6px;
  padding: 6px 8px;
}
.share-popover-copy-btn {
  width: 100%;
  padding: 8px;
  background: var(--primary, #6C3CE1);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  min-height: 38px;
}
.share-popover-copy-btn:hover {
  background: #005f8f;
}

/* ──────────────────────────────────────────────
   BARCODE / QR SCANNER - scanner modal styles
   ────────────────────────────────────────────── */

/* Backdrop */
.scanner-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: scannerFadeIn 0.15s ease;
}
@keyframes scannerFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal shell */
.scanner-modal {
  background: var(--card-bg, #fff);
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
}

.scanner-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 18px 20px 14px;
  background: linear-gradient(135deg, #FF5D6C, #e04a58);
  border-bottom: none;
  flex-shrink: 0;
  border-radius: 16px 16px 0 0;
}
.scanner-modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.scanner-modal-header .scanner-close-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}
.scanner-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scanner-close-btn:hover {
  background: var(--bg3, #f1f5f9);
}

.scanner-modal-body {
  padding: 20px;
  flex: 1;
}

/* Sub-label */
.scanner-picker-sub {
  font-size: 0.9rem;
  color: var(--muted, #64748b);
  margin-bottom: 16px;
  text-align: center;
}

/* Choice grids */
.scanner-choice-grid,
.scanner-method-grid {
  display: grid;
  gap: 12px;
}
.scanner-choice-grid {
  grid-template-columns: 1fr 1fr;
}
.scanner-method-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 400px) {
  .scanner-method-grid {
    grid-template-columns: 1fr;
  }
  .scanner-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* Choice card buttons */
.scanner-choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  background: var(--bg, #f0f7ff);
  border: 2px solid var(--border, #e2e8f0);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.15s,
    background 0.15s;
  min-height: 44px;
}
.scanner-choice-card:hover,
.scanner-choice-card:focus-visible {
  border-color: var(--blue, #6C3CE1);
  background: var(--pastel-blue, #e0f0ff);
  outline: 2px solid var(--blue, #6C3CE1);
  outline-offset: 2px;
}
.scanner-choice-icon {
  font-size: 1.8rem;
}
.scanner-choice-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text, #0a2540);
}
.scanner-choice-desc {
  font-size: 0.75rem;
  color: var(--muted, #64748b);
  line-height: 1.3;
}

/* Back button */
.scanner-back-btn {
  background: none;
  border: none;
  color: var(--blue, #6C3CE1);
  cursor: pointer;
  font-size: 0.88rem;
  padding: 4px 0 12px;
  display: block;
  min-height: 44px;
}
.scanner-back-btn:hover {
  text-decoration: underline;
}

/* Person list */
.scanner-person-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.scanner-person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg, #f0f7ff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-height: 52px;
  transition: background 0.12s;
}
.scanner-person-row:hover,
.scanner-person-row:focus-visible {
  background: var(--pastel-blue, #e0f0ff);
  border-color: var(--blue, #6C3CE1);
  outline: 2px solid var(--blue, #6C3CE1);
}
.scanner-person-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.scanner-person-initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue, #6C3CE1);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.scanner-person-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #0a2540);
}

/* Camera viewfinder */
.scanner-viewfinder-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.scanner-viewfinder {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scanner-canvas {
  display: none;
}
/* Crosshair overlay */
.scanner-crosshair {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scanner-crosshair-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.25);
}
.scanner-crosshair-h {
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  transform: translateY(-50%);
}
.scanner-crosshair-v {
  left: 50%;
  top: 10%;
  bottom: 10%;
  width: 1px;
  transform: translateX(-50%);
}
.scanner-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: #06d6a0;
  border-style: solid;
}
.scanner-corner-tl {
  top: 16px;
  left: 16px;
  border-width: 3px 0 0 3px;
  border-top-left-radius: 4px;
}
.scanner-corner-tr {
  top: 16px;
  right: 16px;
  border-width: 3px 3px 0 0;
  border-top-right-radius: 4px;
}
.scanner-corner-bl {
  bottom: 16px;
  left: 16px;
  border-width: 0 0 3px 3px;
  border-bottom-left-radius: 4px;
}
.scanner-corner-br {
  bottom: 16px;
  right: 16px;
  border-width: 0 3px 3px 0;
  border-bottom-right-radius: 4px;
}
/* Animated scan line */
.scanner-scan-line {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #06d6a0, transparent);
  animation: scanLineMove 2s ease-in-out infinite;
  box-shadow: 0 0 6px #06d6a0;
}
@keyframes scanLineMove {
  0% {
    top: 15%;
  }
  50% {
    top: 80%;
  }
  100% {
    top: 15%;
  }
}
.scanner-status {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.78rem;
  text-align: center;
  padding: 6px;
}
.scanner-cancel-camera-btn {
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 20px;
  padding: 8px 22px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted, #64748b);
  min-height: 44px;
}
.scanner-cancel-camera-btn:hover {
  border-color: var(--red, #dc2626);
  color: var(--red, #dc2626);
}

/* Unsupported / error state */
.scanner-unsupported {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 8px 0;
}
.scanner-unsupported-icon {
  font-size: 3rem;
}
.scanner-unsupported-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text, #0a2540);
  margin: 0;
}
.scanner-unsupported-text {
  font-size: 0.88rem;
  color: var(--muted, #64748b);
  line-height: 1.5;
  margin: 0;
  max-width: 320px;
}

/* Lookup spinner */
.scanner-looking-up {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 0;
}
.scanner-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border, #e2e8f0);
  border-top-color: var(--blue, #6C3CE1);
  border-radius: 50%;
  animation: spinnerRotate 0.7s linear infinite;
}
@keyframes spinnerRotate {
  to {
    transform: rotate(360deg);
  }
}
.scanner-lookup-text {
  font-size: 0.9rem;
  color: var(--text, #0a2540);
  margin: 0;
}
.scanner-lookup-barcode {
  font-size: 0.78rem;
  color: var(--muted, #64748b);
  margin: 0;
  font-family: monospace;
}

/* Product result card */
.scanner-result-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.scanner-product-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg, #f0f7ff);
}
.scanner-product-img-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: var(--bg3, #d4eaf7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}
.scanner-result-info {
  width: 100%;
}
.scanner-result-source {
  font-size: 0.72rem;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
}
.scanner-result-name-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  margin-bottom: 4px;
}
.scanner-result-name-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 16px; /* 16px prevents iOS Safari auto-zoom */
  color: var(--text, #0a2540);
  background: var(--bg, #f0f7ff);
  outline: none;
  min-height: 44px;
  touch-action: manipulation;
}
.scanner-result-name-input:focus {
  border-color: var(--blue, #6C3CE1);
  box-shadow: 0 0 0 2px rgba(108, 60, 225, 0.14);
}
.scanner-result-category {
  font-size: 0.75rem;
  color: var(--muted, #64748b);
  margin: 6px 0 0;
  text-transform: capitalize;
}
.scanner-result-url {
  font-size: 0.8rem;
  color: var(--blue, #6C3CE1);
  word-break: break-all;
  margin: 4px 0 0;
}
.scanner-result-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text, #0a2540);
  margin: 0;
}
.scanner-result-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.scanner-confirm-btn {
  width: 100%;
  padding: 12px;
  background: var(--blue, #6C3CE1);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 48px;
  transition: background 0.14s;
}
.scanner-confirm-btn:hover {
  background: var(--blue2, #4b23b0);
}
.scanner-secondary-btn {
  width: 100%;
  padding: 10px;
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--muted, #64748b);
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.14s;
}
.scanner-secondary-btn:hover {
  border-color: var(--blue, #6C3CE1);
  color: var(--text, #0a2540);
}

/* ── Recurring occasion notice ── */
.recurring-notice {
  background: #e6f4ea;
  border: 1px solid #a8d5b0;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: #276033;
  margin-top: 8px;
}

.visibility-group-suggestion {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #7c3aed;
}
.rating-open-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #065f46;
  border-radius: 999px;
  padding: 3px 8px;
}

/* ── Home tab: Gathering cards ── */
.home-gathering-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  gap: 10px;
  transition: background 0.15s;
}
.home-gathering-card:hover,
.home-gathering-card:focus-visible {
  background: var(--hover-bg, #f3f4f6);
  outline: 2px solid var(--accent-color, #6366f1);
  outline-offset: 1px;
}
.home-gathering-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.home-gathering-emoji {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.home-gathering-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.home-gathering-name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-gathering-meta {
  font-size: 0.75rem;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
}
.home-gathering-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* ── Upcoming unified timeline (gatherings + occasions merged) ── */
.home-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-upcoming-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg3, rgba(0,0,0,0.04));
  border: 1px solid var(--border, #e5e7eb);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.home-upcoming-card:hover,
.home-upcoming-card:focus-visible {
  background: var(--bg2, #f8fafc);
  transform: translateY(-1px);
  outline: none;
}

.home-upcoming-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.home-upcoming-type-emoji {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}
.home-upcoming-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.home-upcoming-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}
.home-upcoming-meta {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.5;
  word-break: break-word;
}
.home-upcoming-right {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  padding-top: 2px;
  text-align: right;
}
.home-upcoming-when {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
}
/* Date badge for occasions */
.home-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(255, 93, 108, 0.1);
  border: 1px solid rgba(255, 93, 108, 0.25);
}
/* occasion — coral */
.home-date-badge--occasion {
  background: rgba(255, 93, 108, 0.1);
  border-color: rgba(255, 93, 108, 0.25);
}
.home-date-badge--occasion .home-date-day,
.home-date-badge--occasion .home-date-month {
  color: #FF5D6C;
}
/* gathering — sky blue */
.home-date-badge--gathering {
  background: rgba(135, 206, 235, 0.2);
  border-color: rgba(135, 206, 235, 0.6);
}
.home-date-badge--gathering .home-date-day,
.home-date-badge--gathering .home-date-month {
  color: #2980b9;
}
/* Column wrapper for badge + optional time below it */
.home-date-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
/* Time label shown under the date badge */
.home-date-event-time {
  font-size: 0.65rem;
  font-weight: 700;
  color: #2980b9;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
/* secret draw — gold */
.home-date-badge--ss {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}
.home-date-badge--ss .home-date-day,
.home-date-badge--ss .home-date-month {
  color: #d97706;
}
.home-date-badge--appt {
  background: rgba(108, 60, 225, 0.08);
  border-color: rgba(108, 60, 225, 0.25);
}
.home-date-badge--appt .home-date-day,
.home-date-badge--appt .home-date-month {
  color: #6C3CE1;
}
.home-date-day {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
  color: #FF5D6C;
}
.home-date-month {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #FF5D6C;
}

.home-gathering-badge {
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 8px;
}
.home-gathering-badge--rsvp {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #b91c1c;
}
.home-gathering-badge--pending {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #92400e;
}
.home-gathering-badge--bring {
  background: rgba(135, 206, 235, 0.15);
  border: 1px solid rgba(135, 206, 235, 0.5);
  color: #0369a1;
}
/* Status pill variants for gatherings */
.home-status-pill--confirmed {
  background: rgba(255, 93, 108, 0.1);
  color: #c0392b;
  border: 1px solid rgba(255, 93, 108, 0.35);
}
.home-status-pill--planning {
  background: rgba(108, 60, 225, 0.12);
  color: #6C3CE1;
  border: 1px solid rgba(108, 60, 225, 0.3);
}
.home-status-pill--draft {
  background: rgba(107, 114, 128, 0.1);
  color: #374151;
  border: 1px solid rgba(107, 114, 128, 0.25);
}
.home-status-pill--complete {
  background: rgba(108, 60, 225, 0.1);
  color: #4b23b0;
  border: 1px solid rgba(108, 60, 225, 0.25);
}

/* ── People default panel tabs ── */
.people-default-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* no -webkit-overflow-scrolling: touch — causes vertical bounce */
}
.people-default-tabs::-webkit-scrollbar { display: none; }
.people-default-tab {
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.people-default-tab:hover {
  background: var(--bg3);
  color: var(--text);
}
.people-default-tab--active {
  background: var(--card-bg);
  color: var(--blue);
  border-color: var(--border);
  border-bottom-color: var(--card-bg);
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}
.people-default-body {
  padding: 16px;
  background: var(--card-bg);
  border-radius: 0 0 10px 10px;
  min-height: 200px;
  /* Prevent child content from overflowing and breaking .main horizontal layout */
  overflow-x: hidden;
  box-sizing: border-box;
  max-width: 100%;
}

/* ── Shared search input for My Prinda tabs (Upcoming, Gifts) ── */
.people-tab-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 20px;
  font-size: 0.84rem;
  background: var(--bg2, #f8fafc)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;
  color: var(--text);
  outline: none;
  margin-bottom: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.people-tab-search:focus {
  border-color: var(--blue, #6C3CE1);
  box-shadow: 0 0 0 3px rgba(108, 60, 225, 0.10);
}
@media (max-width: 600px) {
  .people-default-tabs {
    padding: 8px 8px 0;
    gap: 2px;
  }
  .people-default-tab {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
  .people-default-body {
    padding: 12px 10px;
  }
}
/* ── Group card redesign — members-first layout ── */
.group-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.group-card-group-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.group-card-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 4px;
  line-height: 1.4;
}
.group-card-notes {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.group-members-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}
.group-member-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius: 10px;
  padding: 6px 8px;
  transition: background 0.15s;
}
.group-member-chip:hover {
  background: var(--bg3);
}
.group-member-chip:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.group-member-chip.group-member-overflow {
  cursor: default;
}
.group-member-chip.group-member-overflow:hover {
  background: transparent;
}
.group-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.group-member-avatar-more {
  background: var(--bg3);
  border: 2px dashed var(--border);
  color: var(--muted);
  font-size: 0.75rem;
}
.group-member-chip-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  overflow: visible;
  white-space: normal;
}
.group-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* ── Group pet badge (sidebar card) ─────────────────────────────────────────── */
.group-pet-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #a855f7;
  line-height: 1.4;
}

/* ── Member picker section header ────────────────────────────────────────────── */
.picker-section-header {
  padding: 8px 10px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ── Inline member/pet chips in group modal display ──────────────────────────── */
.group-member-chip-display {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 184, 169, 0.1);
  border: 1px solid rgba(0, 184, 169, 0.3);
  border-radius: 999px;
  padding: 3px 10px 3px 5px;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 2px 3px 2px 0;
}

.group-pet-chip {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
}

.group-pet-chip-owner {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 400;
}

/* ── Global Search Overlay ──────────────────────────────────────────────────── */

/* Search icon button in tab nav — floats right of the other tabs */
.gs-nav-btn {
  margin-left: auto;
  padding: 6px 10px;
  font-size: 1rem;
  opacity: 0.7;
  transition: opacity .15s;
  flex-shrink: 0;
}
.gs-nav-btn:hover { opacity: 1; }

/* Overlay container */
.gs-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: max(60px, env(safe-area-inset-top, 0px) + 16px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.gs-overlay[hidden] { display: none !important; }

.gs-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Panel */
.gs-panel {
  position: relative;
  z-index: 1;
  background: var(--card-bg, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22);
  width: min(640px, calc(100vw - 24px));
  max-height: min(70vh, 600px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: gs-drop .15s ease-out both;
}
@keyframes gs-drop {
  from { opacity: 0; transform: translateY(-12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.gs-open { overflow: hidden; }

/* Header row */
.gs-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
}
.gs-search-icon { font-size: 1.1rem; color: var(--muted, #888); flex-shrink: 0; }

.gs-input {
  flex: 1;
  font-size: 1.05rem;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text, #111);
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
}
.gs-input::placeholder { color: var(--muted, #aaa); }
.gs-input::-webkit-search-cancel-button { display: none; }

.gs-close-btn {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--muted, #888);
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background .12s;
  line-height: 1;
}
.gs-close-btn:hover { background: var(--bg3, #f3f4f6); }

/* Results scroll area */
.gs-results {
  overflow-y: auto;
  flex: 1;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

/* Empty / hint */
.gs-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted, #888);
  font-size: 0.92rem;
}
.gs-hint { color: var(--muted, #aaa); }

/* Loading state */
.gs-loading {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted, #888);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.9rem;
}

/* Section header */
.gs-section { padding-top: 4px; }
.gs-section-title {
  padding: 8px 16px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #9ca3af);
  user-select: none;
}

/* Individual result */
.gs-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--text, #111);
  font-size: 0.92rem;
  transition: background .1s;
}
.gs-result:hover,
.gs-result:focus {
  background: var(--bg2, #f3f4f6);
  outline: none;
}
.gs-result-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.gs-result-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.gs-result-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gs-meta {
  font-size: 0.78rem;
  color: var(--muted, #888);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.gs-badge { font-size: 0.75rem; flex-shrink: 0; }

/* Footer keyboard hints */
.gs-footer {
  display: flex;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--border, #e5e7eb);
  flex-shrink: 0;
  background: var(--bg, #f9f5ff);
}
@media (max-width: 480px) { .gs-footer { display: none; } }
.gs-kbd-hint {
  font-size: 0.72rem;
  color: var(--muted, #9ca3af);
  display: flex;
  align-items: center;
  gap: 4px;
}
.gs-kbd-right { margin-left: auto; }
.gs-kbd-hint kbd {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 0.72rem;
  box-shadow: 0 1px 0 var(--border, #e2e8f0);
}

/* ── Groups intro / explainer banner (dismissable) ─────────────────────────── */
.groups-intro-banner {
  position: relative;
  margin: 10px 10px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(108,60,225,0.10), rgba(168,85,247,0.07));
  border: 1px solid rgba(108,60,225,0.22);
  padding: 14px 38px 14px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  animation: groups-banner-in 0.35s ease;
}
@keyframes groups-banner-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.groups-intro-banner.dismissed {
  animation: groups-banner-out 0.28s ease forwards;
}
@keyframes groups-banner-out {
  to { opacity: 0; transform: translateY(-8px); max-height: 0; margin: 0; padding: 0; overflow: hidden; }
}
.groups-intro-dismiss {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 3px 5px;
  line-height: 1;
  border-radius: 5px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.groups-intro-dismiss:hover { opacity: 1; background: rgba(0,0,0,0.06); }
.groups-intro-icon {
  font-size: 1.7rem;
  flex-shrink: 0;
  line-height: 1.2;
  padding-top: 2px;
}
.groups-intro-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 5px;
}
.groups-intro-text {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ── "Not for me" reason modal ──────────────────────────────────────────────── */

#discard-reason-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* Hidden initially — animated in via .drm-visible */
  pointer-events: none;
}
#discard-reason-modal.drm-visible {
  pointer-events: auto;
}

.drm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 16, 37, 0);
  transition: background 0.22s ease;
  cursor: pointer;
}
.drm-visible .drm-backdrop {
  background: rgba(26, 16, 37, 0.52);
}

.drm-sheet {
  position: relative;
  background: var(--bg, #f9f5ff);
  border-radius: 20px 20px 0 0;
  padding: 16px 20px 32px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 -4px 32px rgba(108, 60, 225, 0.12);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.drm-visible .drm-sheet {
  transform: translateY(0);
}

.drm-handle {
  width: 36px;
  height: 4px;
  background: var(--border, #d4c6f8);
  border-radius: 2px;
  margin: 0 auto 14px;
}

.drm-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
  text-align: center;
}

.drm-subtitle {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 16px;
  text-align: center;
}

.drm-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}

.drm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 24px;
  border: 1.5px solid var(--border, #d4c6f8);
  background: var(--card-bg, #fdfaf6);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.drm-chip:hover {
  border-color: var(--blue, #6C3CE1);
  background: var(--bg3, #e8dffe);
}
.drm-chip--selected,
.drm-chip[aria-pressed="true"] {
  background: var(--blue, #6C3CE1);
  border-color: var(--blue, #6C3CE1);
  color: #fff;
}

.drm-chip-emoji {
  font-size: 1rem;
  line-height: 1;
}

.drm-brand-reveal {
  animation: drm-slide-in 0.18s ease;
  margin-bottom: 12px;
}
@keyframes drm-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.drm-brand-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.drm-brand-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #d4c6f8);
  background: var(--bg, #f9f5ff);
  font-size: 0.85rem;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.drm-brand-input:focus {
  border-color: var(--blue, #6C3CE1);
}

.drm-brand-hint {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 5px 0 0;
}

.drm-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.drm-btn-skip {
  flex: 0 0 auto;
  padding: 11px 20px;
  border-radius: 12px;
  border: 1.5px solid var(--border, #d4c6f8);
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.drm-btn-skip:hover { background: var(--bg2, #f2ecff); }

.drm-btn-confirm {
  flex: 1;
  padding: 11px 20px;
  border-radius: 12px;
  border: none;
  background: var(--blue, #6C3CE1);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.drm-btn-confirm:hover:not(:disabled) { background: var(--blue2, #4b23b0); }
.drm-btn-confirm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}