/* Dashboard Styles for get-gifted.com — Glass-inspired minimal dark UI */

:root {
  /* Dashboard v5 palette — slate-950 base + warm orange→pink→violet brand gradient.
     Update these tokens together; individual dashboard components reference them.
     New token names (--panel*, --grad, --gold*, --violet*, --text2, --muted, --soft)
     are the canonical set per design_handoff_dashboard/README.md.
     Legacy aliases (--card, --surface, --accent*, --gradient-*, --text-secondary,
     --text-muted, --radius-md/lg/xl, --shadow*, --border-hover, --border-accent)
     are retained so the existing 951-line stylesheet keeps rendering while the
     redesign rolls out in stages. */

  /* Base surfaces (slate-950 family) */
  --bg: #020617;
  --panel: #0f172a;
  --panel2: #111827;
  --panel3: #111a30;
  --panel4: #1e293b;
  --bg-raised: #0b1220;

  /* Borders */
  --border: rgba(148, 163, 184, 0.12);
  --border2: rgba(148, 163, 184, 0.28);

  /* Brand gradient — matches app icon (warm orange → pink → purple) */
  --grad: linear-gradient(135deg, #fbbf24 0%, #fb923c 30%, #ec4899 65%, #a855f7 100%);

  /* Gradient stop colors */
  --gold: #f97316;
  --gold2: #fb923c;
  --goldfade: rgba(249, 115, 22, 0.13);
  --goldfade2: rgba(249, 115, 22, 0.28);
  --violet: #8b5cf6;
  --violet2: #a78bfa;

  /* Text */
  --text: #f9fafb;
  --text2: #cbd5e1;
  --muted: #94a3b8;
  --soft: #64748b;

  /* Status */
  --rescue: #ef4444;
  --status: #4ade80;

  /* Radius */
  --radius: 18px;
  --radius-sm: 10px;

  /* Legacy aliases — still consumed by unmigrated surfaces
     (recommendations/show, btn-auth, product-card, etc). */
  --card: var(--panel);
  --surface: var(--panel2);
  --accent: var(--gold);
  --gradient-primary: var(--grad);
  --gradient-primary-soft: radial-gradient(circle at 20% 0%, #fde68a, #fb923c 40%, #a855f7 100%);
  --gradient-heading: var(--grad);
  --text-secondary: var(--text2);
  --text-muted: var(--muted);
  --border-hover: var(--border2);
  --border-accent: var(--goldfade2);
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-lg: 0 8px 32px rgba(2, 6, 23, 0.7);
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.35);

  /* Import-icon palette (v6 mock) */
  --fb: #4a9eff;
  --fbfade: rgba(74, 158, 255, 0.14);
  --sage: #6db38a;
  --sagefade: rgba(109, 179, 138, 0.14);
}

* { box-sizing: border-box; }

.dashboard-body {
  margin: 0;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at top left, #111827 0, #020617 55%, #000 100%);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Fixed backdrop on larger viewports only — mobile/iOS gets scroll jank
   and partial support with background-attachment: fixed. */
@media (min-width: 900px) and (hover: hover) {
  .dashboard-body { background-attachment: fixed; }
}

button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

/* ==================== TOP BAR ==================== */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  margin: 0 -24px 24px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.statusPill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

.statusPill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--status);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.85);
  animation: sglow 2.5s ease-in-out infinite;
}

@keyframes sglow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 8px;
}

.brand-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-shadow:
    0 4px 20px rgba(236, 72, 153, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Shared brand-mark image — fills any logo container with rounded corners. */
.brand-mark-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.brand-text { line-height: 1.15; }
.brand-text .name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }
.brand-text .tag { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted); margin-top: 1px; }

.tabs {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1;
  margin-left: 12px;
}

.tab {
  padding: 8px 16px;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  border: none;
  transition: color 0.15s, background 0.15s;
}

.tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }

.tab.active {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  border: 1px solid var(--border);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  height: 36px;
  min-width: 36px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: border-color 0.15s, color 0.15s;
}

.icon-btn:hover { border-color: var(--border-hover); color: var(--text); }

.avatar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.15s;
}

.avatar-btn:hover { border-color: var(--border-hover); }

.avatar-label { display: flex; flex-direction: column; line-height: 1.1; }
.avatar-label .user { font-size: 12px; font-weight: 600; color: var(--text); }
.avatar-label .email { font-size: 11px; color: var(--text-muted); }

.avatar-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gradient-primary-soft);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: #020617;
  flex: 0 0 auto;
}

/* Guest auth buttons in header */
.btn-auth {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-auth:hover { border-color: var(--border-hover); color: var(--text); }
.btn-auth.primary {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #020617;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.3);
}
.btn-auth.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .statusPill::before { animation: none; }
}

/* ==================== LAYOUT ==================== */
.top-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  margin-bottom: 24px;
  align-items: stretch;
}

/* When rail is absent (guest), concierge goes full-width */
.top-row:has(> :only-child) {
  grid-template-columns: 1fr;
}

/* ==================== CONCIERGE PANEL (v6 orange-tinted feature card) ==================== */
.panel {
  background: linear-gradient(160deg, #16120a 0%, #120e1a 100%);
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.06), 0 8px 40px rgba(249, 115, 22, 0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 20% -10%, rgba(249, 115, 22, 0.09), transparent);
}

.panel > * { position: relative; }

.panelHead { margin-bottom: 14px; }

.panelHead h2 {
  margin: 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.panelHead h2 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.panelSub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

/* ==================== CHAT (flex column, composer pinned inside frame) ==================== */
.chat {
  margin-top: 0;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  overflow: hidden;
  flex: 1;
}

.chatMessages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
}

.chatMessages::-webkit-scrollbar { width: 5px; }
.chatMessages::-webkit-scrollbar-track { background: transparent; }
.chatMessages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.06); border-radius: 3px; }

.chatComposer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--panel2);
  flex-shrink: 0;
}

.chatComposer input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
  padding: 8px 0;
  font-family: inherit;
}

.chatComposer input::placeholder { color: var(--soft); }

.sendBtn {
  background: var(--grad);
  color: #020617;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  box-shadow: 0 3px 12px rgba(249, 115, 22, 0.3);
  transition: opacity 0.14s;
}

.sendBtn:hover { opacity: 0.9; }
.sendBtn:disabled { opacity: 0.5; cursor: not-allowed; }

.chatGAvatar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 2px;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(249, 115, 22, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.msg {
  display: flex;
  margin: 10px 0;
  gap: 10px;
  align-items: flex-start;
}

.msg.user { justify-content: flex-end; }

.bubble {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: 13px;
  background: var(--panel3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 14px;
  line-height: 1.5;
}

.bubble strong { color: var(--text); }

.msg.user .bubble {
  background: var(--goldfade);
  border-color: var(--goldfade2);
  color: var(--text);
}

.msg.typing .bubble {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
}

.typing-dots { display: inline-flex; gap: 4px; align-items: center; }

.typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  animation: dotPulse 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dotPulse {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-3px); opacity: 0.95; }
}

/* ==================== CHIPS (below chat, rescue first) ==================== */
.chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  background: var(--panel3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.14s;
}

.chip:hover { border-color: var(--goldfade2); color: var(--text); }

.chip .chipIcon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
  background: var(--panel);
}

.chip .cd {
  font-size: 11px;
  font-feature-settings: "tnum" 1;
  margin-left: 2px;
  color: var(--muted);
}

.chip .cd.soon {
  color: var(--rescue);
  font-weight: 700;
}

.chipRescue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #fca5a5;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.14s;
}

.chipRescue:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
}

.hint {
  font-size: 12px;
  color: var(--soft);
  margin-top: 11px;
  line-height: 1.5;
}

/* ==================== PRODUCT RECOMMENDATION CARDS ==================== */
.product-recs {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

.product-recs::-webkit-scrollbar { height: 6px; }
.product-recs::-webkit-scrollbar-track { background: transparent; }
.product-recs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }

.product-card {
  flex: 0 0 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
}

.product-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
}

.product-card-img {
  width: 100%;
  height: 120px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.product-card-img .placeholder-icon { font-size: 48px; }

.product-card-body { padding: 14px; }

.product-card-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}

.product-card-cta {
  display: inline-block;
  background: var(--gradient-primary);
  color: #020617;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
  width: 100%;
  text-align: center;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.25);
}

.product-card-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.35);
}

/* Legacy .rail-card* — retained for recommendations/show.html.erb until that
   view is migrated to the v6 vocabulary. Dashboard's rail uses .railCard. */
.rail-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.rail-card-title { font-weight: 600; font-size: 14px; }

.rail-note { color: var(--text-muted); font-size: 12px; line-height: 1.45; margin-top: 10px; }

/* ==================== RIGHT RAIL (v6) ==================== */
.rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.railCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.railCard h3 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}

.railCard h3 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.railSub {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 10px;
}

.railNote {
  font-size: 11px;
  color: var(--soft);
  line-height: 1.5;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.statRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}

.statRow:first-of-type {
  border-top: none;
  padding-top: 0;
}

.statRow .k { font-size: 12px; color: var(--text2); }

.statRow .v {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 17px;
  color: var(--gold2);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}

.statRow .v.plain { color: var(--text); font-size: 14px; }

/* Year stats grid */
.yearStats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.yStat {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 10px;
}

.yStat .yn {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  color: var(--gold2);
  line-height: 1;
  margin-bottom: 2px;
}

.yStat .yl { font-size: 11px; color: var(--muted); }

/* Coming Up list + shared dot/days utility tokens (reused on My People card dates in PR 5) */
.occList {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.occItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 10px;
  transition: background 0.12s;
}

.occItem:hover { background: var(--panel2); }

.occDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dot-hot  { background: var(--rescue); box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); }
.dot-warm { background: var(--gold2);  box-shadow: 0 0 5px rgba(251, 146, 60, 0.4); }
.dot-cool { background: var(--status); }

.occInfo { flex: 1; min-width: 0; }
.occName { font-size: 13px; font-weight: 600; color: var(--text2); }
.occMeta { font-size: 11px; color: var(--muted); margin-top: 1px; }

.occDays {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.days-hot  { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
.days-warm { background: var(--goldfade); color: var(--gold2); }
.days-cool { background: rgba(74, 222, 128, 0.12); color: var(--status); }

.occCalBtn {
  padding: 3px 7px;
  border-radius: 7px;
  font-size: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--soft);
  flex-shrink: 0;
  transition: all 0.14s;
  cursor: pointer;
  font-family: inherit;
}

.occCalBtn:hover { border-color: var(--goldfade2); color: var(--gold2); }

/* SMS toggle (also reused in alerts rows) */
.smsToggle {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--panel3);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.smsToggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: all 0.18s;
}

.smsToggle.on {
  background: var(--grad);
  border-color: transparent;
}

.smsToggle.on::after {
  left: 21px;
  background: #020617;
}

/* History rows (recent gifts + wishlists share shell) */
.historyList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.historyItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--panel2);
  border: 1px solid var(--border);
}

.historyAv {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.historyInfo { flex: 1; min-width: 0; }

.historyName {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historyMeta { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Group gifting */
.groupExample {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px;
}

.groupExName { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.groupExMeta { font-size: 11.5px; color: var(--muted); margin-bottom: 9px; }

.groupStartBtn {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12.5px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  transition: all 0.14s;
  font-family: inherit;
  cursor: pointer;
}

.groupStartBtn:hover:not([disabled]) {
  border-color: var(--goldfade2);
  color: var(--gold2);
}

/* Expandable 2-col quick-access grid */
.expandGridLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--soft);
  font-weight: 600;
  margin-top: 4px;
  margin-bottom: 8px;
}

.expandGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.expandCard {
  background: var(--panel2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
  cursor: pointer;
}

.expandCard:hover {
  border-color: rgba(249, 115, 22, 0.35);
  background: var(--panel3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.expandCard.open {
  border-color: rgba(249, 115, 22, 0.4);
  background: var(--panel3);
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.08);
}

.expandHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  user-select: none;
}

.expandHeader:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: -2px;
}

.expandIcon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.14s;
}

.expandCard:hover .expandIcon,
.expandCard.open .expandIcon { transform: scale(1.06); }

.expandLabel {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.expandMeta { font-size: 11px; color: var(--muted); margin-top: 1px; }

.expandChev {
  font-size: 10px;
  color: var(--soft);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: auto;
}

.expandCard.open .expandChev {
  transform: rotate(180deg);
  color: var(--gold2);
}

.expandBody {
  display: none;
  padding: 0 13px 13px;
  border-top: 1px solid var(--border);
}

.expandCard.open .expandBody { display: block; }

.expandBody .railSub {
  margin-bottom: 10px;
  margin-top: 10px;
}

/* ==================== UPCOMING OCCASIONS SECTION ==================== */
.section {
  margin-top: 28px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.section-head h3 {
  margin: 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.section-head h3 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.section-head .sub {
  font-size: 13px;
  color: var(--text2);
  margin-top: 4px;
}

.rangePill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel2);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text2);
  font-feature-settings: "tnum" 1;
}

/* ==================== EVENT CARD ==================== */
.event {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 20px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 14px;
  transition: border-color 0.15s;
}

.event:hover { border-color: var(--border2); }
.event:last-child { margin-bottom: 0; }

.rxAv {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 18px;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.rxAv.c1 { background: linear-gradient(135deg, #fed7aa, #fb923c); color: #431407; }
.rxAv.c2 { background: linear-gradient(135deg, #fdba74, #ea580c); color: #431407; }
.rxAv.c3 { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #451a03; }
.rxAv.c4 { background: linear-gradient(135deg, #c4b5fd, #8b5cf6); color: #2e1065; }

.rxMain { min-width: 0; }

.rxHead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.rxName {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.rxName em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 18px;
  margin-left: 2px;
}

.rxRel {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel3);
}

.rxOcc { font-size: 13px; color: var(--text2); }

.rxOcc .dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--soft);
  margin: 0 8px 2px;
  vertical-align: middle;
}

.rxActions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rxCount {
  text-align: right;
  min-width: 84px;
}

/* v6 countdown badge — colored rounded square replaces the plain serif number. */
.rxBadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  margin-left: auto;
  font-family: "DM Serif Display", Georgia, serif;
}

.rxBadge .num {
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

.rxBadge .lbl {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

.rxBadge.hot {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.rxBadge.hot .num { color: var(--rescue); }

.rxBadge.warm {
  background: var(--goldfade);
  border: 1px solid rgba(249, 115, 22, 0.3);
  color: var(--gold2);
}

.rxBadge.cool {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: var(--violet2);
}

.rxBadge.cool .num {
  font-size: 16px;
  font-style: italic;
}

.rxBadge.neutral {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all 0.15s;
}

.btn:hover { border-color: var(--border-hover); color: var(--text); }

.btn.primary {
  background: var(--gradient-primary);
  color: #020617;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.25);
}

.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.35);
}

/* ==================== SUGGESTED GIFT PICKS ==================== */
.picks {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
}

.picksTitle {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.picksLayout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}

@media (max-width: 780px) {
  .picksLayout { grid-template-columns: 1fr; }
}

/* Pick hero card (left column of picksLayout) */
.pickHero {
  background: var(--panel3);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.14s;
}

.pickHero:hover { border-color: var(--border2); }

.pickHero .ph-img {
  aspect-ratio: 16 / 10;
  position: relative;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(249, 115, 22, 0.08) 0 10px,
      rgba(139, 92, 246, 0.04) 10px 20px
    ),
    var(--panel4);
  border-bottom: 1px solid var(--border);
  display: grid;
  place-items: center;
}

.pickHero .ph-img::after {
  content: attr(data-label);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 5px 11px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.7);
  backdrop-filter: blur(6px);
}

.pickHero .ph-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.pickHero .ph-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 2px;
}

.pickHero .ph-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--text);
}

.pickHero .ph-meta { font-size: 12px; color: var(--text2); }

.pickHero .ph-price {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px;
  color: var(--gold2);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}

.pickHero .ph-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.pickHero .ph-actions .btn { flex: 1; }

/* Pick alternates list (right column of picksLayout) */
.pickAlts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pickAlt {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--panel3);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.14s;
}

.pickAlt:hover { border-color: var(--border2); }

.pickAlt .pa-sw {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(249, 115, 22, 0.12) 0 6px,
      rgba(139, 92, 246, 0.04) 6px 12px
    ),
    var(--panel4);
}

.pickAlt .pa-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pickAlt .pa-meta { font-size: 11px; color: var(--text2); margin-top: 2px; }

.pickAlt .pa-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.pickAlt .pa-price {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 16px;
  color: var(--gold2);
  font-feature-settings: "tnum" 1;
}

/* Source provenance badge (maker vs affiliate wired in PR3) */
.srcBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.srcBadge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.srcBadge.maker {
  background: rgba(139, 92, 246, 0.14);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.32);
}

.srcBadge.maker::before {
  background: #a78bfa;
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.8);
}

.srcBadge.affiliate {
  background: rgba(148, 163, 184, 0.08);
  color: var(--text2);
  border: 1px solid var(--border);
}

.srcBadge.affiliate::before { background: #94a3b8; }

/* ==================== AUTH-ADAPTIVE PROVENANCE ==================== */
.provBanner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin-top: 14px;
  background: rgba(249, 115, 22, 0.10);
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: 12px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.45;
}

.provBanner .icn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(249, 115, 22, 0.22);
  color: var(--gold2);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

.provBanner strong { color: var(--text); font-weight: 600; }

.provBanner a {
  color: var(--gold2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Green success variant — reused for approved / purchased confirmations
   on recommendations/show. */
.provBanner.success {
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.28);
}

.provBanner.success .icn {
  background: rgba(74, 222, 128, 0.22);
  color: var(--status);
}

/* Grid of recommendation tiles — each item renders as a .pickHero card.
   Auto-fill keeps the v5 behaviour of flowing into multiple columns on wide
   screens and collapsing to a single column on mobile. */
.picksGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* button_to forms inside .ph-actions need to sit flat + share width so the
   approve / dismiss buttons align with plain <a> siblings. */
.ph-actions form { flex: 1; margin: 0; }
.ph-actions form .btn { width: 100%; }

/* Vendor emoji placement inside the striped .ph-img banner. The label chip
   (rendered via .ph-img::after from content: attr(data-label)) moves to the
   bottom-right corner so the emoji owns the centre. */
.pickHero .ph-img { position: relative; }

.pickHero .ph-img::after {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.pickHero .ph-emoji {
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Tertiary "ghost" variant of .btn — used for destructive/dismiss actions
   where the affordance should feel lighter than the default bordered btn. */
.btn.ghost {
  border-color: transparent;
  color: var(--soft);
}

.btn.ghost:hover {
  border-color: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}

/* Status-panel variant — constrains the pending/failed/empty .panel blocks
   so they don't stretch the full 1440px page when used alone. */
.panel.status {
  max-width: 560px;
}

/* Legacy pick grid — retained for recommendations/show.html.erb */
.picks-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pick-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  transition: border-color 0.15s;
}

.pick-card:hover { border-color: var(--border-hover); }

.pick-img {
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 8px;
}

.pick-name { font-weight: 600; font-size: 13px; line-height: 1.25; margin-bottom: 6px; }
.pick-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; }

.pick-actions { display: flex; gap: 8px; }

.btn.small { padding: 7px 10px; font-size: 12px; border-radius: var(--radius-sm); }
.pick-actions .btn { flex: 1; }

/* ==================== SETTINGS MODAL ==================== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

.overlay.open { display: flex; }

/* ==================== RESCUE OVERLAY (v6 PR6) ==================== */
/* Stacks above the settings overlay if both ever open simultaneously. */
#rescueOverlay { z-index: 60; padding: 20px; }

.rescueModal {
  background: var(--panel);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.rescueModal h3 {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 26px;
  color: #fca5a5;
  margin: 0 0 6px;
  font-weight: 400;
}

.rescueModal p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
  line-height: 1.6;
}

.rescueOpts {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rescueOpt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 13px;
  cursor: pointer;
  transition: all 0.14s;
  text-align: left;
  width: 100%;
  font-family: inherit;
  color: inherit;
}

.rescueOpt:hover,
.rescueOpt:focus-visible {
  border-color: rgba(239, 68, 68, 0.3);
  background: var(--panel3);
  outline: none;
}

.rescueOptIcon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.12);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}

.rescueOptText strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.rescueOptText span {
  font-size: 12px;
  color: var(--muted);
}

.rescueClose {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all 0.14s;
  font-family: inherit;
  cursor: pointer;
}

.rescueClose:hover,
.rescueClose:focus-visible {
  color: var(--text);
  border-color: var(--border2);
  outline: none;
}

/* ==================== SETTINGS MODAL ==================== */
.settings-modal {
  width: min(820px, 96vw);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-head .title { font-weight: 600; font-size: 15px; }

.close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  height: 32px;
  min-width: 32px;
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
  transition: all 0.15s;
}

.close:hover { border-color: var(--border-hover); color: var(--text); }

.modal-body { padding: 20px; }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.set-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.set-card .h { font-weight: 600; font-size: 14px; margin: 0 0 6px 0; }
.set-card .d { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin: 0 0 12px 0; }

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.set-row-label { font-size: 12px; color: var(--text-secondary); }

.toggle {
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all .18s ease;
}

.toggle.on {
  background: var(--gradient-primary);
  border-color: transparent;
}

.toggle.on::after { left: 19px; background: #020617; }

.linkbtn {
  font-weight: 600;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.linkbtn:hover { border-color: var(--border-hover); color: var(--text); }

.settings-note {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 12px;
}

/* ==================== WISHLIST VIEW ==================== */
.wishlist-view { padding: 24px 0; }
.wishlist-view h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: var(--gradient-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.wishlist-view p { margin: 0 0 20px; color: var(--text-secondary); font-size: 14px; }

.wishlist-form {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.wishlist-form input {
  flex: 2;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}

.wishlist-form input:focus { border-color: var(--border-accent); }

.wishlist-form button {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--gradient-primary);
  border: none;
  color: #020617;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 16px rgba(249, 115, 22, 0.25);
}

.wishlist-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.35);
}

.wishlist-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 13px;
}

.wishlist-table th,
.wishlist-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.wishlist-table th {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wishlist-table td { color: var(--text); }
.wishlist-table tr:hover { background: rgba(255, 255, 255, 0.02); }

/* ==================== MY PEOPLE (v6 PR5) ==================== */
.pageHead {
  margin-bottom: 22px;
}

.pageHead h1 {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--text);
}

.pageHead h1 em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pageHead p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.peopleGrid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.personCard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.14s;
}

.personCard:hover { border-color: var(--border2); }

.personCardTop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}

.personCardTop:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: -2px;
}

.personAv {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.personInfo { flex: 1; min-width: 0; }

.personName {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.personRel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--panel2);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 6px;
}

.personBudget { font-size: 11.5px; color: var(--muted); }

.personQuickActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.personQuickActions form { margin: 0; }

.personCardChev {
  font-size: 11px;
  color: var(--soft);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.personCard.open .personCardChev {
  transform: rotate(180deg);
  color: var(--gold2);
}

.personCardBody {
  display: none;
  border-top: 1px solid var(--border);
}

.personCard.open .personCardBody { display: block; }

.personDates {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.personDatesLabel {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--soft);
  font-weight: 600;
  margin-bottom: 10px;
}

.dateRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.dateRow:last-of-type { border-bottom: none; }

.dateIcon {
  font-size: 16px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.dateInfo { flex: 1; min-width: 0; }
.dateName { font-size: 13px; font-weight: 600; color: var(--text2); }
.dateVal  { font-size: 12px; color: var(--muted); margin-top: 1px; }

.dateBadge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  /* color variants reuse .days-hot/.days-warm/.days-cool from the rail */
}

.dateEdit {
  font-size: 11px;
  color: var(--soft);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.14s;
  font-family: inherit;
}

.dateEdit:hover { border-color: var(--goldfade2); color: var(--gold2); }

.addDateRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 2px;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  transition: color 0.14s;
}

.addDateRow:hover { color: var(--gold2); }

.addDatePlus {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px dashed var(--border2);
  display: grid;
  place-items: center;
  font-size: 16px;
  transition: all 0.14s;
  flex-shrink: 0;
}

.addDateRow:hover .addDatePlus {
  border-color: rgba(249, 115, 22, 0.4);
  color: var(--gold2);
}

.personPrefs {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.prefBox {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.prefLabel {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--soft);
  font-weight: 600;
  margin-bottom: 5px;
}

.prefVal {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.45;
}

.prefInput {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text2);
  font-size: 12.5px;
  font-family: inherit;
  resize: none;
  line-height: 1.45;
}

.personFooter {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border);
}

.personFooter form { margin: 0; }

/* Dashed "add someone new" tile at the end of the grid */
.addPersonCard {
  background: transparent;
  border: 1.5px dashed var(--border2);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all 0.14s;
  text-decoration: none;
  color: inherit;
}

.addPersonCard:hover {
  border-color: rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.04);
}

.addPersonIcon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px dashed rgba(249, 115, 22, 0.3);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: rgba(249, 115, 22, 0.4);
  flex-shrink: 0;
}

.addPersonCard p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

.addPersonCard p strong {
  color: var(--text2);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

@media (max-width: 600px) {
  .personPrefs { grid-template-columns: 1fr; }
  .personCardTop { flex-wrap: wrap; }
  .personQuickActions { margin-left: auto; }
  .pageHead h1 { font-size: 26px; }
}

/* Keep gradient-clipped headings visible in forced-colors/high-contrast modes
   (where backgrounds are suppressed) and when background-clip: text isn't
   supported. */
@media (forced-colors: active) {
  .panelHead h2,
  .wishlist-view h2,
  .pageHead h1 em {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }
}

/* ==================== HERO (v6 mock) ====================
   Rolling-word hero ported from design_handoff_dashboard/reference_gifted_dashboard_v6_ceo.html.
   Class names use the project's existing convention (.hero, .heroEye, etc.)
   rather than the mock's .heroHook / .hookEye; visual values lifted from
   the mock's .heroHook block. CSS vars substitute the mock's green-gold
   palette with the project's orange-gradient palette (--gold, --goldfade,
   etc.) so the hero sits coherently with the rest of the dashboard.
*/
.hero {
  text-align: center;
  padding: 56px 24px 48px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(249, 115, 22, 0.08), transparent);
}

.heroEye {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
}

.heroH1 {
  margin: 0 auto 28px;
  max-width: 760px;
  position: relative;
  font-family: "DM Serif Display", serif;
  font-size: clamp(32px, 5.5vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text);
}

.heroH1Pre { margin-right: 10px; }
.heroH1Suf { margin-left: 8px; }

.heroH1SR {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rollingSlot {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
  line-height: 1.12;
}

.rollingInner {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.rollingWord {
  font-style: italic;
  white-space: nowrap;
  display: block;
  line-height: 1.12;
  padding-right: 6px;
  background: var(--grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.heroFootRow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
}

.howSteps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.howStep {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 13px;
  background: var(--panel2);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text2);
  font-weight: 500;
}

.howN {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--goldfade2);
  border: 1px solid var(--goldfade2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
}

.howArr {
  font-size: 16px;
  color: var(--soft);
  padding: 0 6px;
  flex-shrink: 0;
}

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

.proofAvatars { display: flex; }

.proofAv {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-left: -10px;
  flex-shrink: 0;
}

.proofAv:first-child { margin-left: 0; }

.av1 { background: #4a7c6a; color: #c8e8d8; }
.av2 { background: #6a5a2a; color: #eacd7a; }
.av3 { background: #5a3a4a; color: #e8b8d0; }
.av4 { background: #3a5a7a; color: #a8d0f0; }
.av5 { background: #5a6a3a; color: #c8d8a8; }

.proofText {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.proofText strong {
  color: var(--text2);
  font-weight: 600;
}

@media (max-width: 760px) {
  .hero { padding: 32px 14px 28px; }
  .howSteps { flex-direction: column; align-items: center; gap: 8px; }
  .howArr { transform: rotate(90deg); }
  .heroProof { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .rollingInner { transition: none !important; }
  .rollingSlot  { transition: none !important; }
}

/* ==================== EMPTY STATE (v6 mock) ====================
   First-run users see this inside #peopleSection instead of the populated
   event cards. Ghost avatars + import buttons + ghost preview cards.
*/
.emptyState {
  border: 1.5px dashed rgba(180, 215, 195, 0.12);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
}

.emptyIll {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.ghostAv {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  border: 2px dashed var(--goldfade2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--goldfade2);
}

.emptyState h4 {
  font-family: "DM Serif Display", serif;
  font-size: 22px;
  color: var(--text2);
  margin-bottom: 8px;
}

.emptyState p {
  font-size: 14px;
  color: var(--muted);
  max-width: 400px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.importGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

.importBtn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 600;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text2);
  transition: all 0.14s;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.importBtn:hover {
  border-color: var(--goldfade2);
  color: var(--text);
  background: var(--panel3);
}

.iIcon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

.i-fb   { background: var(--fbfade);              color: var(--fb); }
.i-g    { background: rgba(66, 133, 244, 0.15);   color: #6ab0ff; }
.i-o    { background: rgba(0, 120, 212, 0.15);    color: #5ab0ff; }
.i-csv  { background: var(--sagefade);            color: var(--sage); }
.i-plus { background: var(--goldfade);            color: var(--gold); }

.previewDiv {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}

.previewDiv::before,
.previewDiv::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.previewDiv span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--soft);
  white-space: nowrap;
}

.ghostCards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ghostCard {
  border: 1px dashed rgba(180, 215, 195, 0.09);
  border-radius: 15px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  pointer-events: none;
}

.ghostCard:nth-child(1) { opacity: 0.38; }
.ghostCard:nth-child(2) { opacity: 0.22; }

.ghostCardAv {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--panel3);
}

.ghostLines {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ghostLine {
  height: 9px;
  border-radius: 5px;
  background: var(--panel3);
}

.ghostRight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.ghostTag {
  width: 58px;
  height: 20px;
  border-radius: 999px;
  background: var(--panel3);
}

.ghostBtns {
  display: flex;
  gap: 6px;
}

.ghostBtn {
  height: 26px;
  border-radius: 999px;
  background: var(--panel3);
}

@media (max-width: 760px) { .importGrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .importGrid { grid-template-columns: 1fr; } }

/* Guest CTA strip — only renders inside .emptyState when the dashboard is
   shown to a logged-out visitor. Reuses existing .btn / .btn.primary /
   .btn.ghost vocabulary; no new colors. */
.guestCta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--goldfade2);
  background: var(--goldfade);
  text-align: left;
}

.guestCtaCopy {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}

.guestCtaCopy strong { color: var(--text); }

.guestCtaActions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .guestCta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .guestCtaActions { justify-content: center; }
}

/* First-run single-column layout. Rail is conditionally unrendered in the
   view so this rule only governs the hero and optional body reflow. */
#viewDashboard.is-first-run .top-row { grid-template-columns: 1fr; }

/* ==================== TOAST (import stubs) ==================== */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel3);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 13px;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 1;
}

.toast.is-leaving {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

/* ==================== FOOTER ==================== */
.dashboard-footer {
  text-align: center;
  margin-top: 32px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

/* ==================== RESPONSIVE ==================== */

/* Large desktop */
@media (min-width: 1200px) {
  .top-row { grid-template-columns: 1fr 340px; }
}

/* Default desktop: handled by base styles */

/* Tablet landscape / small desktop */
@media (max-width: 1024px) {
  .top-row { grid-template-columns: 1fr 280px; gap: 16px; }
  .panel { padding: 20px; }
  .panelHead h2 { font-size: 22px; }
  .chat { min-height: 220px; }}

/* Tablet portrait */
@media (max-width: 860px) {
  .top-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Rail keeps its v6 stacked flex layout when it reflows below the concierge. */
  .chat { min-height: 200px; max-height: 360px; }
  .settings-grid { grid-template-columns: 1fr; }
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 600px) {
  .wrap { padding: 0 16px 32px; }
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; margin: 0 -16px 16px; }
  .brand { min-width: auto; }
  .tabs { margin-left: 0; order: 3; width: 100%; }
  .tab { padding: 8px 12px; font-size: 12px; }
  .top-actions { margin-left: auto; }

  .top-row { gap: 12px; }
  .panel { padding: 16px; }
  .panelHead h2 { font-size: 20px; }
  .chat { min-height: 200px; max-height: 360px; }

  .expandGrid { grid-template-columns: 1fr; }
  .bottom { padding: 16px; }
  .pick-grid { grid-template-columns: 1fr; }
  .product-card { flex: 0 0 180px; }

  .avatar-label { display: none; }
}