/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ========== BRAND — "Apple 1998 × Porsche 1975" ==========
     Cream editorial base. Near-black ink. Deep navy as accent.
     Cognac for warmth. Muted jewel supporting tones.
     One hero per surface, confident serif headlines, generous whitespace. */

  /* Surfaces — legacy aliases now point at v3 tokens */
  --brand-cream: var(--page);
  --brand-paper: var(--card);
  --brand-ink:   var(--ink);
  --brand-ink-2: #3d3a36;         /* softer ink for body copy */
  --brand-mute:  var(--ink-muted);
  --brand-line:  var(--hairline);

  /* Accents — legacy aliases now point at v3 tokens */
  --brand-navy:    var(--secondary);
  --brand-navy-2:  #2a4268;
  --brand-cognac:  var(--primary);
  --brand-emerald: #234a37;       /* Grand Palais emerald — growth */
  --brand-burgundy:#5a1e23;       /* pool-table burgundy — intimacy */
  --brand-peach:   #f0c8a8;       /* pastel hero card */
  --brand-sage:    #c8d2bb;
  --brand-sky:     #b8c4d4;

  /* Typography */
  --font-display: 'Fraunces', 'Playfair Display', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;

  /* Radii & elevation */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-soft: 0 2px 10px rgba(26,26,26,0.04), 0 8px 28px rgba(26,26,26,0.05);
  --shadow-hero: 0 10px 40px rgba(26,26,26,0.10);

  /* ===== DESIGN-V2 ===== */
  /* Refined palette: softer cream, paper white, ink (less harsh than navy),
     muted warm grey, surface-elevated. Lower-saturation accents. */
  --v2-cream:            #faf6ee;
  --v2-paper:            #ffffff;
  --v2-surface-elevated: #fcfaf6;
  --v2-ink:              #1a1d24;
  --v2-ink-soft:         #2c303a;
  --v2-muted:            #7c7a78;
  --v2-hairline:         rgba(0,0,0,0.06);
  --v2-cognac:           #b8632c;        /* slightly desaturated */
  --v2-cognac-soft:      #c87842;
  --v2-navy:             #1f2d44;
  --v2-emerald:          #2a4f3c;

  /* Spacing scale (4 / 8 / 16 / 24 / 40) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* Standardized radii (V2) — override legacy values */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* Softer, layered shadow */
  --shadow-card: 0 1px 2px rgba(20,20,30,0.04), 0 8px 24px rgba(20,20,30,0.06);
  --shadow-card-hover: 0 2px 4px rgba(20,20,30,0.05), 0 14px 32px rgba(20,20,30,0.08);

  /* Subtle 2-stop gradients (replace garish ones where used globally) */
  --gradient-warm: linear-gradient(160deg, #faf6ee 0%, #f3ecdf 100%);
  --gradient-ink:  linear-gradient(160deg, #1f2d44 0%, #1a1d24 100%);
  /* ===== /DESIGN-V2 ===== */

  /* Legacy aliases — keep existing component styles working while we migrate */
  --bg: var(--brand-cream);
  --sidebar-bg: linear-gradient(180deg, #141210 0%, #1f1c18 100%);
  --card-bg: var(--brand-paper);
  --primary: var(--brand-navy);
  --primary-hover: var(--brand-navy-2);
  --primary-light: rgba(31,58,95,0.08);
  --danger: #a33c3c;
  --success: #3f7a5a;
  --warning: #b5822a;
  --text: var(--brand-ink);
  --text-secondary: var(--brand-ink-2);
  --text-light: var(--brand-mute);
  --border: var(--brand-line);
  --radius: var(--radius-md);    /* v3 alias */
  --shadow: var(--shadow-rest);   /* v3 alias */
  --shadow-lg: var(--shadow-hero);
  --glass: rgba(251,248,242,0.85);
  --glass-border: rgba(231,224,211,0.6);
}

/* ===== DESIGN-V3 TOKENS ===== */
/* Authoritative design system — placed after legacy :root so v3 values win
   for shared names (--primary, --radius-sm/md/lg/xl, --success, --warning, etc.).
   Legacy variables remain defined above so existing components continue to work. */
:root {
  /* Surfaces */
  --page: #FAF6EE;
  --card: #FFFFFF;
  --card-tinted: #F1EEE7;
  --hairline: rgba(20, 20, 20, 0.08);
  --hairline-strong: rgba(20, 20, 20, 0.14);

  /* Ink */
  --ink: #1A1A18;
  --ink-muted: #6B6B66;
  --ink-faint: #A6A39B;

  /* Accent */
  --primary: #C36A2D;
  --primary-ink: #FFFFFF;
  --primary-tint: rgba(195, 106, 45, 0.10);
  --secondary: #234A37;

  /* Semantic */
  --success: #1F8A4C;
  --warning: #C97A14;
  --error: #C0392B;

  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;

  /* Sizes (4 only) */
  --fs-display: clamp(36px, 6vw, 56px);
  --fs-title: 22px;
  --fs-body: 16px;
  --fs-caption: 13px;

  /* Spacing scale (TIGHTENED) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Radii (TIGHTENED) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows (very subtle, hairlines do most of the work) */
  --shadow-rest: 0 1px 2px rgba(20,20,20,0.04);
  --shadow-hover: 0 6px 16px rgba(20,20,20,0.06), 0 1px 2px rgba(20,20,20,0.04);
  --shadow-modal: 0 20px 48px rgba(20,20,20,0.16), 0 2px 6px rgba(20,20,20,0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
}

/* Editorial headline treatment — applies to section titles & hero numbers */
.section-title,
.family-header .fh-greeting,
.big-number,
h1.section-title,
.brand-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* ===== DESIGN-V2: tighter body rhythm ===== */
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  /* ===== /DESIGN-V2 ===== */
}

/* ===== DESIGN-V2: base display + eyebrow rhythm (global) ===== */
.section-title,
h1.section-title,
.brand-display,
.section-hero-title {
  line-height: 1.1;
}
.section-hero-eyebrow,
.eyebrow,
[data-eyebrow] {
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* ===== /DESIGN-V2 ===== */

/* ========== SIDEBAR ========== */
#sidebar {
  width: 260px;
  background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%);
  padding: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  overflow-y: auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 20px 20px;
  cursor: pointer;
  position: relative;
}

.logo-icon {
  font-size: 32px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.logo-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 14px;
  display: block;
}

.logo-text {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, #b8e986 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.sidebar-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  margin: 0 20px 12px;
}

.nav-links { list-style: none; padding: 0 12px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s ease;
  border-radius: 14px;
  margin-bottom: 2px;
  border-left: none;
  position: relative;
}

.nav-link:hover {
  color: var(--brand-cream);
  background: rgba(232,207,166,0.06);
}

.nav-link.active {
  color: var(--brand-cream);
  background: rgba(232,207,166,0.08);
  box-shadow: inset 0 0 0 1px rgba(232,207,166,0.15);
}

.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-cognac);
}

/* Editorial label typography */
.nav-label {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nav-link.active .nav-label { font-weight: 600; }
/* Thinner, more refined icon strokes on the sidebar */
#sidebar .nav-icon svg {
  stroke-width: 1.6 !important;
  opacity: 0.88;
}
#sidebar .nav-link.active .nav-icon svg { opacity: 1; }

.nav-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

/* Logo upload */
.logo-upload-input { display: none; }

/* Logo click goes to dashboard */

/* ========== MAIN CONTENT ========== */
#main-content {
  margin-left: 260px;
  flex: 1;
  padding: 32px 40px;
  max-width: 1200px;
}

.section { display: none; }
.section.active { display: block; animation: fadeIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

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

.section-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 28px;
  letter-spacing: -0.025em;
  color: var(--brand-ink);
  line-height: 1.05;
}
@media (max-width: 640px) {
  .section-title { font-size: 30px; }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.section-header .section-title { margin-bottom: 0; }

/* ========== BUTTONS ========== */
/* ===== DESIGN-V2: tuned button system — solid cognac primary,
   hairline secondary, 44px touch target, 12px radius, 14/600. ===== */
.btn {
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  font-family: var(--font-body);
  letter-spacing: 0.005em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary {
  background: var(--v2-cognac);
  color: #ffffff;
  border-radius: 12px;
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: 0 1px 2px rgba(20,20,30,0.06), 0 6px 16px rgba(184,99,44,0.22);
  border: 1px solid var(--v2-cognac);
  min-height: 44px;
}
.btn-primary:hover {
  transform: translateY(-1px);
  background: var(--v2-cognac-soft);
  border-color: var(--v2-cognac-soft);
  box-shadow: 0 2px 4px rgba(20,20,30,0.08), 0 10px 22px rgba(184,99,44,0.28);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(20,20,30,0.08);
}

.btn-secondary {
  background: transparent;
  color: var(--v2-ink);
  border: 1px solid var(--v2-hairline);
  border-radius: 12px;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
}
.btn-secondary:hover {
  border-color: rgba(0,0,0,0.14);
  background: var(--v2-surface-elevated);
}
/* ===== /DESIGN-V2 ===== */

.btn-danger {
  background: transparent;
  color: var(--danger);
  padding: 6px 10px;
}
.btn-danger:hover { background: rgba(255,59,48,0.08); }

.btn-small {
  padding: 7px 16px;
  font-size: 13px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  border-radius: 10px;
  font-weight: 600;
}
.btn-small:hover { border-color: var(--primary); color: var(--primary); }
.btn-small.active {
  background: var(--brand-ink);
  color: var(--brand-cream);
  border-color: var(--brand-ink);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(94,92,230,0.25);
}

.btn-full { width: 100%; margin-top: 12px; padding: 14px; font-size: 15px; }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px 9px;
  border-radius: 8px;
  transition: all 0.2s;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.btn-icon:hover { background: rgba(0,0,0,0.06); color: var(--text); }
.btn-icon svg { display: block; flex-shrink: 0; }

/* ========== DASHBOARD ========== */
.dash-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.dash-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.chart-card { max-height: 340px; }
.chart-card canvas { max-height: 260px; }

.dash-card {
  background: var(--brand-paper);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--brand-line);
  position: relative;
  overflow: hidden;
}

.dash-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-cognac);
  opacity: 0;
  transition: opacity 0.3s;
}

.dash-card.clickable:hover::before, .dash-section-card.clickable:hover::before { opacity: 1; }

.dash-card.clickable, .dash-section-card.clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dash-card.clickable:hover, .dash-section-card.clickable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.dash-card h3 {
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--brand-cognac);
  margin-bottom: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.big-number {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 600;
  color: var(--brand-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  letter-spacing: -0.035em;
  line-height: 1.0;
}

.sub-text {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 4px;
}

.dash-mini-list {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dash-mini-cat {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
  color: var(--brand-cognac);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.dash-list {
  list-style: none;
  max-height: 200px;
  overflow-y: auto;
}

.dash-list li:last-child { border-bottom: none; }
.dash-list .empty-state { color: var(--text-light); border: none; padding: 20px 0; }

/* Section Summary Cards */
.dash-sections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.dash-sections-grid::before {
  content: 'Section Overview';
  grid-column: 1 / -1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-light);
  font-weight: 700;
  padding-bottom: 4px;
}

.dash-section-card {
  background: var(--brand-paper);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 4px 14px rgba(26,26,26,0.04);
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--brand-line);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.dash-section-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,26,26,0.08); border-color: rgba(195,106,45,0.3); }

.dash-section-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-cognac);
  opacity: 0;
  transition: opacity 0.3s;
}
.dash-section-card:hover::before { opacity: 1; }

.dash-section-icon {
  font-size: 22px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
}

.dash-section-card:nth-child(6n+1) .dash-section-icon { background: rgba(195,106,45,0.10); }
.dash-section-card:nth-child(6n+2) .dash-section-icon { background: rgba(31,58,95,0.08); }
.dash-section-card:nth-child(6n+3) .dash-section-icon { background: rgba(107,42,47,0.08); }
.dash-section-card:nth-child(6n+4) .dash-section-icon { background: rgba(48,90,71,0.08); }
.dash-section-card:nth-child(6n+5) .dash-section-icon { background: rgba(138,147,120,0.14); }
.dash-section-card:nth-child(6n+6) .dash-section-icon { background: rgba(26,26,26,0.06); }

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

.dash-section-info h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
  text-transform: none;
}

.dash-section-stat {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-cognac);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.dash-section-detail {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
}

.dash-section-visual {
  flex-shrink: 0;
}

/* Mini progress ring for dashboard */
.mini-progress-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--success) 0%, var(--border) 0%);
  position: relative;
}

.mini-progress-ring::after {
  content: '';
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card-bg);
}

.mini-progress-text {
  font-size: 12px;
  font-weight: 700;
  z-index: 1;
  color: var(--text);
}

.mini-workout-rings {
  display: flex;
  gap: 4px;
}

.mini-ring-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: transform 0.2s;
}

.mini-ring-dot.done { background: linear-gradient(135deg, #30d158, #34c759); box-shadow: 0 1px 4px rgba(48,209,88,0.3); }
.mini-ring-dot.empty { background: var(--border); }

/* ========== TABLES ========== */
.table-wrapper { overflow-x: auto; border-radius: 20px; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

thead {
  background: linear-gradient(135deg, #f8f7ff 0%, #faf5ff 100%);
}

th {
  text-align: left;
  padding: 14px 18px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
  font-weight: 700;
}

td {
  padding: 16px 18px;
  font-size: 14px;
  border-top: 1px solid var(--border);
  font-weight: 500;
}

tbody tr { transition: background 0.15s; }
tbody tr:hover { background: #f8f7ff; }
tr.expandable-row { cursor: pointer; }
.expense-notes-detail { display: none; font-size: 12px; color: var(--text-light); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
tr.expandable-row.expanded .expense-notes-detail { display: block; }

.receipt-upload-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 14px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.receipt-upload-zone:hover { border-color: var(--primary); background: rgba(94,92,230,0.04); }
.receipt-upload-zone.has-image { border-color: var(--primary); border-style: solid; padding: 10px; }

.receipt-remove-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  border: none;
  background: rgba(255,55,95,0.1);
  color: #ff375f;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
}

.receipt-icon {
  font-size: 11px;
  background: rgba(94,92,230,0.1);
  color: var(--primary);
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
}

.expense-receipt-img {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  margin-top: 10px;
  border: 1px solid var(--border);
}

.filters {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.filters select, .todo-filters select {
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--card-bg);
  cursor: pointer;
  font-weight: 500;
  transition: border-color 0.2s;
}

.filters select:focus { border-color: var(--primary); outline: none; }

.expense-summary-bar {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--brand-ink);
  border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-cream);
  border-bottom: none;
}

.category-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(94,92,230,0.1), rgba(191,90,242,0.1));
  color: var(--primary);
}

/* ========== MEAL PLANNER ========== */
#section-meals .section-header {
  background: linear-gradient(135deg, #141f33 0%, var(--brand-navy) 52%, #1a2410 100%);
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--brand-cognac);
  box-shadow: 0 14px 40px rgba(15,22,38,0.28);
}
#section-meals .section-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(500px 200px at 85% -15%, rgba(195,106,45,0.2), transparent 60%);
  pointer-events: none;
}
#section-meals .section-title {
  color: var(--brand-cream);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  position: relative;
}
#section-meals .section-header .week-nav { position: relative; }
#section-meals #meal-week-label { color: rgba(246,241,232,0.9); }
#section-meals .meal-week-stats { color: rgba(246,241,232,0.55); }
#section-meals .section-header .btn {
  background: rgba(246,241,232,0.12);
  color: var(--brand-cream);
  border: 1px solid rgba(246,241,232,0.22);
}
#section-meals .section-header .btn:hover {
  background: rgba(246,241,232,0.2);
}

.week-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.week-nav-center { text-align: center; min-width: 200px; }

#meal-week-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  min-width: 180px;
  text-align: center;
  color: var(--text-secondary);
}

.meal-week-stats {
  font-size: 11px;
  color: var(--text-light);
  text-align: center;
  font-weight: 500;
  margin-top: 2px;
}

/* ========== MEAL PLANNER v2 — editorial + pastel blocks ==========
   Per-meal color palette (fitness-app pastels):
   Breakfast = peach · Lunch = sage · Dinner = navy · Snack = cognac */
:root {
  --meal-breakfast-bg:  #f5d3b6;   --meal-breakfast-ink: #7a3e14;
  --meal-lunch-bg:      #d4dec5;   --meal-lunch-ink:     #2f4a22;
  --meal-dinner-bg:     #c5cfe0;   --meal-dinner-ink:    #1f3a5f;
  --meal-snack-bg:      #e8cdb0;   --meal-snack-ink:     #6b3b14;
}

.meal-hero {
  background: var(--brand-ink);
  color: var(--brand-cream);
  border: none;
  border-radius: var(--radius-lg);
  padding: 18px 22px 14px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-hero);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (max-width: 720px) {
  .meal-hero { padding: 18px 18px 16px; }
}
.meal-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 55%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(240,200,168,0.22), transparent 70%);
  pointer-events: none;
}
.meal-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--brand-peach);
  margin-bottom: 12px;
  position: relative; z-index: 1;
}
.meal-hero-date {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--brand-cream);
  line-height: 1.1;
  margin: 0 0 4px;
  position: relative; z-index: 1;
}
@media (max-width: 720px) {
  .meal-hero-date { font-size: 24px; }
}
.meal-hero-return {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-peach);
  background: rgba(240,200,168,0.15);
  border: 1px solid rgba(240,200,168,0.3);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.meal-hero-return:hover { background: rgba(240,200,168,0.25); }

.meal-hero-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.meal-hero-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mhf-chip {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(246,241,232,0.55);
  background: transparent;
  border: 1px solid rgba(246,241,232,0.12);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}
.mhf-chip:hover { color: var(--brand-cream); border-color: rgba(246,241,232,0.3); }
.mhf-chip.active {
  color: var(--brand-ink);
  background: var(--brand-peach);
  border-color: var(--brand-peach);
}

.meal-hero-slot-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.meal-hero-persons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.meal-hero-person-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(246,241,232,0.07);
  border: 1px solid rgba(246,241,232,0.12);
  color: rgba(246,241,232,0.85);
  max-width: 100%;
  overflow: hidden;
}
.mhpc-name {
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-peach);
}
.mhpc-text {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meal-hero-rule {
  height: 1px;
  background: rgba(246,241,232,0.15);
  margin: 28px 0 4px;
  position: relative; z-index: 1;
}
.meal-hero-slots {
  display: flex;
  flex-direction: column;
  position: relative; z-index: 1;
}
.meal-hero-slot {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(246,241,232,0.12);
  cursor: pointer;
  transition: padding-left 0.25s ease;
}
.meal-hero-slot:last-child { border-bottom: none; }
.meal-hero-slot:hover { padding-left: 8px; }
.meal-hero-slot-type {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  justify-self: start;
}
.meal-hero-slot[data-meal="breakfast"] .meal-hero-slot-type { background: var(--meal-breakfast-bg); color: var(--meal-breakfast-ink); }
.meal-hero-slot[data-meal="lunch"]     .meal-hero-slot-type { background: var(--meal-lunch-bg);     color: var(--meal-lunch-ink); }
.meal-hero-slot[data-meal="dinner"]    .meal-hero-slot-type { background: var(--meal-dinner-bg);    color: var(--meal-dinner-ink); }
.meal-hero-slot[data-meal="snack"]     .meal-hero-slot-type { background: var(--meal-snack-bg);     color: var(--meal-snack-ink); }

.meal-hero-slot-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--brand-cream);
  line-height: 1.2;
}
.meal-hero-slot-name.empty {
  font-style: italic;
  color: rgba(246,241,232,0.4);
  font-weight: 400;
}
.meal-hero-slot-edit {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-peach);
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.meal-hero-slot:hover .meal-hero-slot-edit { opacity: 1; }

.meal-hero-recipe-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  color: var(--brand-cream);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.meal-hero-recipe-btn:hover { background: rgba(255,255,255,0.18); }
.meal-hero-recipe-btn.has-recipe {
  background: var(--brand-cognac);
  border-color: var(--brand-cognac);
  color: #fff;
}

@media (max-width: 720px) {
  .meal-hero { padding: 14px 16px 12px; border-radius: var(--radius-md); }
  .meal-hero-date { font-size: 22px; }
  .meal-hero-slot { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .meal-hero-slot-edit { display: none; }
  .meal-hero-slot-name { font-size: 17px; }
}
@media (max-width: 640px) {
  .meal-hero { padding: 12px; }
  .meal-hero-date { font-size: 20px; }
  .meal-hero-eyebrow { font-size: 10px; margin-bottom: 8px; }
  .meal-hero-slot { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
  .meal-hero-slot-type { font-size: 9px; padding: 5px 10px; }
  .meal-hero-slot-name { font-size: 14px; }
  .meal-hero-slot-edit { display: none; }
}

/* Rest of the week — pastel color blocks (fitness-app inspired) */
.meal-strip-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--brand-mute);
  margin-bottom: 16px;
}
.meal-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
}
@media (max-width: 700px) {
  .meal-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .meal-strip { grid-template-columns: 1fr; }
}
.meal-strip-card {
  --card-bg: var(--brand-peach);
  --card-ink: #5a3010;
  background: var(--card-bg);
  color: var(--card-ink);
  border: none;
  border-radius: var(--radius-md);
  padding: 18px 18px 14px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.meal-strip-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% auto;
  width: 80%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.45), transparent 70%);
  pointer-events: none;
}
.meal-strip-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hero);
}
/* Luxury palette — Porsche navy, burgundy, emerald, cognac orange, sage, ink */
.meal-strip-card:nth-child(6n+1) { --card-bg: #1d2e4a; --card-ink: #e8cfa6; } /* porsche navy */
.meal-strip-card:nth-child(6n+2) { --card-bg: #5a1e23; --card-ink: #e8cfa6; } /* burgundy */
.meal-strip-card:nth-child(6n+3) { --card-bg: #234a37; --card-ink: #e8d6a8; } /* emerald */
.meal-strip-card:nth-child(6n+4) { --card-bg: #c36a2d; --card-ink: #fdf5e8; } /* cognac orange */
.meal-strip-card:nth-child(6n+5) { --card-bg: #8a9378; --card-ink: #1e2a18; } /* sage */
.meal-strip-card:nth-child(6n+6) { --card-bg: #1a1a1a; --card-ink: #e8cfa6; } /* ink */

.meal-strip-card.is-today {
  --card-bg: #c36a2d;
  --card-ink: #fdf5e8;
  box-shadow: 0 0 0 3px var(--brand-cream), 0 12px 32px rgba(195,106,45,0.35);
}
.meal-strip-card.is-past { opacity: 0.5; }

.meal-strip-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  position: relative; z-index: 1;
}
.meal-strip-day {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  opacity: 0.7;
  text-transform: uppercase;
  white-space: nowrap;
}
.meal-strip-card.is-today .meal-strip-day { opacity: 1; color: var(--brand-peach); }
.meal-strip-num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.meal-strip-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-height: 0;
  position: relative; z-index: 1;
}
.meal-strip-line {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 10px;
  align-items: baseline;
  overflow: hidden;
}
.meal-strip-line-type {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.55;
  text-transform: uppercase;
  white-space: nowrap;
}
.meal-strip-line-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}
.meal-strip-line.empty .meal-strip-line-text { opacity: 0.35; }
.meal-strip-foot {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.65;
  padding-top: 8px;
  border-top: 1px solid currentColor;
  border-top-color: rgba(0,0,0,0.12);
  position: relative; z-index: 1;
}
.meal-strip-card.is-today .meal-strip-foot { border-top-color: rgba(246,241,232,0.15); }

@media (max-width: 560px) {
  .meal-strip-card { min-height: 170px; padding: 14px; }
  .meal-strip-num { font-size: 32px; }
}

/* Legacy rules kept below for modal + old hooks; unused in new layout */
/* Today's Spotlight — editorial, one-hero */
.meal-today-spotlight {
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  padding: 28px 28px 22px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-soft);
  position: relative;
}
/* removed stray ::before "TODAY" — real eyebrow now lives inside .meal-hero */

.meal-spotlight-label {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
  text-transform: none;
  margin-bottom: 18px;
  line-height: 1.1;
}

.meal-spotlight-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.meal-spotlight-slot {
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  box-shadow: none;
}

.meal-spotlight-slot:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: var(--brand-cognac);
}

.meal-spotlight-type {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand-cognac);
  margin-bottom: 8px;
}

.meal-spotlight-content {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
  line-height: 1.25;
}

.meal-spotlight-content.empty {
  color: var(--brand-mute);
  font-weight: 400;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 15px;
}

/* Week Grid */
.meal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 10px;
  overflow-x: auto;
}

.meal-day {
  background: var(--brand-paper);
  border-radius: var(--radius-md);
  box-shadow: none;
  overflow: hidden;
  border: 1px solid var(--brand-line);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.meal-day.today {
  border-color: var(--brand-cognac);
  box-shadow: 0 0 0 1px var(--brand-cognac) inset, var(--shadow-soft);
}

.meal-day.past { opacity: 0.55; }

.meal-day:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: var(--brand-ink-2);
}

.meal-day-header {
  background: var(--brand-ink);
  color: var(--brand-cream);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.meal-day.today .meal-day-header {
  background: var(--brand-cognac);
  color: var(--brand-cream);
}

.meal-day-num {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.meal-day-name {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}

.meal-day-num {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
}

.meal-day-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
}

.meal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.meal-slot {
  padding: 7px 10px;
  border-top: 1px solid var(--border);
  min-height: 52px;
  cursor: pointer;
  transition: background 0.15s;
}

.meal-slot:hover { background: rgba(94,92,230,0.04); }

.meal-slot-type {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
}

.meal-slot-text {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  line-height: 1.5;
}

.meal-slot-text.empty .meal-add-hint {
  color: var(--text-light);
  font-style: italic;
}

.meal-person-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 6px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  margin: 1px 2px 1px 0;
}

.meal-person-chip .chip-name {
  font-weight: 800;
  font-size: 9px;
  text-transform: uppercase;
}

.meal-item-everyone {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Meal Modal — luxury */
.meal-modal-tabs {
  display: flex;
  gap: 4px;
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 24px;
}

.meal-modal-tab {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-mute);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
  letter-spacing: 0.03em;
}

.meal-modal-tab.active {
  background: var(--brand-ink);
  color: var(--brand-cream);
  box-shadow: 0 2px 10px rgba(26,26,26,0.2);
}

.meal-person-label {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
  background: var(--brand-cream) !important;
  color: var(--brand-ink) !important;
  border: 1px solid var(--brand-line);
}

.meal-person-fields {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
}

.meal-person-fields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

/* ========== CARD LIST (Vacations, Activities, Ideas, Date Nights) ========== */
.card-list {
  display: grid;
  gap: 14px;
}

.card-item {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 22px 26px;
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}

.card-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.clickable-card {
  cursor: pointer;
}

.clickable-row {
  cursor: pointer;
}

tr.clickable-row:hover td {
  background: var(--card-hover);
}

.card-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #34c759, #ffd60a);
  opacity: 0;
  transition: opacity 0.2s;
}

.card-item:hover::before { opacity: 1; }

.card-item-info { flex: 1; min-width: 0; overflow: hidden; }

.card-item-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: break-word;
}

.card-item-meta {
  font-size: 13px;
  color: var(--text-light);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
  font-weight: 500;
}

.card-item-notes {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

/* Expandable card items */
.card-item.expandable { cursor: pointer; }
.card-item.expandable .card-item-detail { display: none; }
.card-item.expandable.expanded .card-item-detail { display: block; }
.card-item.expandable .expand-hint {
  font-size: 11px;
  color: var(--primary);
  font-weight: 600;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-item.expandable.expanded .expand-hint { display: none; }

.card-item-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* ========== KIDS HUB ========== */
.kids-hub-section {
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: 22px;
  padding: 32px;
  margin: -16px 0 0;
  padding: 36px 40px;
}

.kids-hub-header { margin-bottom: 28px; }

.kids-hub-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kids-hub-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kids-hub-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
  color: var(--brand-cognac);
}

.kids-hub-subtitle {
  font-size: 14px;
  color: var(--text-light);
  margin-top: 4px;
  font-weight: 500;
}

.kids-hub-add-btn {
  background: var(--brand-ink);
  color: var(--brand-cream);
  border: none;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(26,26,26,0.2);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.kids-hub-add-btn:hover {
  transform: translateY(-2px);
  background: var(--brand-cognac);
  box-shadow: 0 10px 22px rgba(163,108,58,0.35);
}

/* Kid Profile Cards */
.kids-profiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.kid-profile-card {
  border-radius: 22px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kid-profile-card:hover {
  transform: translateY(-3px);
}

.lera-card {
  background: var(--brand-burgundy);
  box-shadow: 0 10px 26px rgba(107,42,47,0.22);
  position: relative;
  overflow: hidden;
}
.lera-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(246,241,232,0.18), transparent 55%);
  pointer-events: none;
}

.lebari-card {
  background: var(--brand-emerald);
  box-shadow: 0 10px 26px rgba(48,90,71,0.22);
  position: relative;
  overflow: hidden;
}
.lebari-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(246,241,232,0.16), transparent 55%);
  pointer-events: none;
}
.lera-card > *, .lebari-card > * { position: relative; z-index: 1; }

.kid-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.lera-avatar { background: rgba(255,255,255,0.35); }
.lebari-avatar { background: rgba(255,255,255,0.35); }

.kid-profile-info h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--brand-cream);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.kid-age-badge {
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}

.kid-profile-stats {
  margin-left: auto;
  display: flex;
  gap: 16px;
}

.kid-stat {
  text-align: center;
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  font-weight: 500;
}

.kid-stat-num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}

/* Kids Tabs */
.kids-hub-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.kids-tab {
  padding: 10px 22px;
  border-radius: 50px;
  border: 2px solid #e8eaed;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  color: var(--text);
}

.kids-tab {
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}
.kids-tab:hover { border-color: var(--brand-cognac); color: var(--brand-cognac); }

.kids-tab.active {
  background: var(--brand-ink);
  color: var(--brand-cream);
  border-color: var(--brand-ink);
  box-shadow: 0 4px 12px rgba(26,26,26,0.18);
}

/* Category Legend */
.kids-cat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.kids-cat-pill {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.kids-cat-pill { text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; border: 1px solid var(--brand-line); background: var(--brand-cream); }
.kids-cat-pill.academic    { color: var(--brand-navy); }
.kids-cat-pill.life-skills { color: var(--brand-cognac); }
.kids-cat-pill.social      { color: var(--brand-burgundy); }
.kids-cat-pill.physical    { color: var(--brand-emerald); }
.kids-cat-pill.creative    { color: var(--brand-ink); }
.kids-cat-pill.milestone   { color: var(--brand-cognac); }

/* Goal Cards */
.kids-goal-list {
  display: grid;
  gap: 12px;
}

.kid-goal-card {
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.2s, box-shadow 0.2s;
  border-left: 4px solid transparent;
}

.kid-goal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.kid-goal-card.Academic { border-left-color: #3b82f6; }
.kid-goal-card.Life-Skills { border-left-color: #f59e0b; }
.kid-goal-card.Social { border-left-color: #ec4899; }
.kid-goal-card.Physical { border-left-color: #10b981; }
.kid-goal-card.Creative { border-left-color: #8b5cf6; }
.kid-goal-card.Milestone { border-left-color: #f97316; }

.kid-goal-emoji {
  font-size: 28px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kid-goal-emoji.Academic { background: #eff6ff; }
.kid-goal-emoji.Life-Skills { background: #fffbeb; }
.kid-goal-emoji.Social { background: #fdf2f8; }
.kid-goal-emoji.Physical { background: #ecfdf5; }
.kid-goal-emoji.Creative { background: #f5f3ff; }
.kid-goal-emoji.Milestone { background: #fff7ed; }

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

.kid-goal-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kid-name-pill {
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.kid-name-pill.older {
  background: var(--brand-burgundy);
  color: var(--brand-cream);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.kid-name-pill.younger {
  background: var(--brand-emerald);
  color: var(--brand-cream);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.kid-goal-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

.kid-goal-notes {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
}

.kid-status-btn {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.25s;
}

.kid-status-btn.not-started {
  background: #f3f4f6;
  color: #6b7280;
}

.kid-status-btn.in-progress {
  background: var(--brand-cognac);
  color: var(--brand-cream);
  box-shadow: 0 2px 8px rgba(163,108,58,0.25);
}

.kid-status-btn.completed {
  background: var(--brand-emerald);
  color: var(--brand-cream);
  box-shadow: 0 2px 8px rgba(48,90,71,0.25);
}

.kid-goal-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

/* ========== LERA'S DAILY STATION ========== */
.lera-station {
  margin-top: 10px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15,22,38,0.22);
  background: var(--brand-cream);
}
@media (max-width: 640px) {
  .lera-station, .lebari-station {
    border-radius: 16px;
    margin-top: 8px;
  }
}
.station-hero {
  padding: 18px 22px 16px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 720px) {
  .station-hero { padding: 14px 16px 12px; }
}
.station-hero--lera {
  background: linear-gradient(135deg, #1d2e4a 0%, #36131a 55%, var(--brand-burgundy) 100%);
}
.station-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(420px 180px at 95% -20%, rgba(195,106,45,0.28), transparent 65%),
    radial-gradient(380px 160px at -5% 110%, rgba(29,46,74,0.50), transparent 55%);
  pointer-events: none;
}
.station-hero::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--brand-cognac), #7a3c10);
}
.station-hero-inner { position: relative; z-index: 1; }

.lera-station-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  gap: 12px;
  flex-wrap: wrap;
}

.lera-station-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--brand-cream);
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.12;
}

.lera-station-subtitle {
  font-size: 11px;
  color: var(--brand-cognac);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-top: 4px;
}
@media (max-width: 720px) {
  .lera-station-title { font-size: 22px; }
  .lera-station-subtitle { font-size: 9px; letter-spacing: 0.18em; }
}

/* Lera Completion Rings */
.lera-rings-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin: 0 20px 20px;
}
@media (max-width: 640px) {
  .lera-rings-row { margin: 0 14px 16px; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
}

.lera-ring-card {
  background: var(--brand-ink);
  border-radius: 20px;
  padding: 22px 14px;
  text-align: center;
  color: var(--brand-cream);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(246,241,232,0.06);
}

.lera-ring-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -40%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  opacity: 0.18;
}

.lera-ring-card.week::before    { background: var(--brand-cognac); }
.lera-ring-card.month::before   { background: var(--brand-burgundy); }
.lera-ring-card.quarter::before { background: var(--brand-emerald); }
.lera-ring-card.year::before    { background: var(--brand-navy); }

.lera-ring-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  opacity: 0.5;
  margin-bottom: 14px;
  font-weight: 700;
}

.lera-ring-svg {
  width: 100px;
  height: 100px;
  margin: 0 auto 10px;
  display: block;
}

.lera-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.1);
  stroke-width: 10;
}

.lera-ring-fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}

.lera-ring-fill.week-ring    { stroke: var(--brand-cognac);   filter: drop-shadow(0 0 6px rgba(195,106,45,0.65)); }
.lera-ring-fill.month-ring   { stroke: #c9595f;               filter: drop-shadow(0 0 6px rgba(201,89,95,0.65)); }
.lera-ring-fill.quarter-ring { stroke: #4d9e72;               filter: drop-shadow(0 0 6px rgba(77,158,114,0.65)); }
.lera-ring-fill.year-ring    { stroke: #8ca6cf;               filter: drop-shadow(0 0 6px rgba(140,166,207,0.65)); }

.lera-ring-count {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
}

.lera-ring-goal {
  font-size: 11px;
  opacity: 0.4;
  margin-top: 2px;
  font-weight: 500;
}

.lera-ring-pct {
  font-size: 13px;
  font-weight: 800;
  margin-top: 3px;
  color: var(--brand-cream);
}

/* Mini (cute) rings variant — used when rings sit under the task list */
.lera-rings-row.lera-rings-mini {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 8px;
}
.lera-rings-row.lera-rings-mini .lera-ring-card {
  padding: 12px 8px;
  border-radius: 16px;
}
.lera-rings-row.lera-rings-mini .lera-ring-label {
  font-size: 9px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.lera-rings-row.lera-rings-mini .lera-ring-svg {
  width: 56px;
  height: 56px;
  margin: 0 auto 6px;
}
.lera-rings-row.lera-rings-mini .lera-ring-bg { stroke-width: 9; }
.lera-rings-row.lera-rings-mini .lera-ring-fill { stroke-width: 9; }
.lera-rings-row.lera-rings-mini .lera-ring-pct {
  font-size: 12px;
  margin-top: 2px;
}

/* Points chip on a to-do item */
.todo-pts-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 159, 10, 0.14);
  color: #c87a0a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.4;
}

/* Per-task points chip shown next to Lera's task names */
.lera-task-pts {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(161, 140, 209, 0.16);
  color: #6b4ea8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  vertical-align: middle;
  line-height: 1.4;
}

/* Lera Week View */
.lera-week-card {
  background: var(--brand-paper);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15,22,38,0.06);
  padding: 14px;
  margin: 16px 28px 22px;
  border: 1px solid var(--brand-line);
  overflow-x: auto;
}
@media (max-width: 640px) {
  .lera-week-card { margin: 12px 16px 16px; }
}
@media (max-width: 640px) {
  .lera-week-card {
    padding: 12px;
    margin: 12px 14px 16px;
    border-radius: 14px;
  }
}

.lera-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

#lera-week-label {
  font-size: 15px;
  font-weight: 800;
  text-align: center;
}

.lera-week-grid {
  overflow-x: auto;
}

.lera-week-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.lera-week-table th {
  padding: 10px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid var(--border);
}

.lera-week-table th:first-child {
  text-align: left;
  min-width: 140px;
}

.lera-week-table th.today-col {
  color: #845ec2;
  background: rgba(161,140,209,0.06);
  border-radius: 12px 12px 0 0;
}

.lera-week-table td {
  padding: 8px 6px;
  text-align: center;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.lera-week-table td:first-child {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
}

.lera-week-table td.today-col {
  background: rgba(195,106,45,0.06);
}

.lera-week-table tr:last-child td { border-bottom: none; }

/* Task row footer with stats */
.lera-day-footer {
  font-weight: 700 !important;
  color: var(--brand-cognac) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-top: 1px solid var(--brand-line) !important;
}

.lera-check {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1.5px solid var(--brand-line);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  font-size: 13px;
  color: transparent;
  background: var(--brand-paper);
}

.lera-check:hover { border-color: var(--brand-cognac); background: rgba(195,106,45,0.08); }

.lera-check.done {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: var(--brand-cream);
  box-shadow: 0 2px 8px rgba(26,26,26,0.2);
}

.lera-check.future {
  border: 1.5px dashed var(--brand-line);
  opacity: 0.5;
  cursor: default;
}

.lera-task-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lera-task-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lera-task-cat-dot.Spiritual    { background: var(--brand-cognac); }
.lera-task-cat-dot.Intellectual { background: var(--brand-navy); }
.lera-task-cat-dot.Health       { background: var(--brand-emerald); }
.lera-task-cat-dot.Family       { background: var(--brand-burgundy); }
.lera-task-cat-dot.Academic     { background: var(--brand-ink); }
.lera-task-cat-dot.Financial    { background: var(--brand-sage); }

.lera-task-actions {
  opacity: 0;
  transition: opacity 0.2s;
}

.lera-week-table tr:hover .lera-task-actions { opacity: 1; }

/* Lera Stats Row */
.lera-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.lera-stat-card {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  text-align: center;
  border: 1px solid rgba(0,0,0,0.04);
}

.lera-stat-icon { font-size: 24px; margin-bottom: 6px; }

.lera-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}

.lera-stat-value.missed { color: #ff375f; }

.lera-stat-label {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 3px;
  font-weight: 600;
}

/* Lera 2026 Goals */
.lera-goals-section {
  margin-top: 8px;
}

.lera-goals-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
}

.lera-goals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.lera-goal-card {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow);
  border-top: 4px solid transparent;
}

.lera-goal-card.Spiritual    { border-top-color: var(--brand-cognac); }
.lera-goal-card.Intellectual { border-top-color: var(--brand-navy); }
.lera-goal-card.Health       { border-top-color: var(--brand-emerald); }
.lera-goal-card.Family       { border-top-color: var(--brand-burgundy); }
.lera-goal-card.Academic     { border-top-color: var(--brand-ink); }
.lera-goal-card.Financial    { border-top-color: var(--brand-sage); }

.lera-goal-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.lera-goal-card-icon {
  font-size: 22px;
}

.lera-goal-card-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.lera-goal-list {
  list-style: none;
}

.lera-goal-list li {
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  color: var(--text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.lera-goal-list li:last-child { border-bottom: none; }

.lera-goal-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-cognac);
  flex-shrink: 0;
}

/* Legacy badges */
.kid-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.kid-badge.older { background: #e8f4fd; color: #2980b9; }
.kid-badge.younger { background: #fdecea; color: #c0392b; }

.learning-cat-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: #f0e6ff;
  color: #7c3aed;
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.status-badge.in-progress { background: #fef3c7; color: #92400e; }
.status-badge.completed { background: #d1fae5; color: #065f46; }
.status-badge.not-started { background: #f3f4f6; color: #6b7280; }

.recurring-badge {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
  color: var(--brand-cognac);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ========== COMBINED FILTER ROW ========== */
.combined-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 16px;
}
.filter-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 6px;
  flex-shrink: 0;
  align-self: center;
}
.filter-select,
#expense-category-filter {
  appearance: none;
  -webkit-appearance: none;
  height: 34px;
  padding: 0 32px 0 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.filter-select:focus,
#expense-category-filter:focus { border-color: var(--primary); outline: none; }
.filter-select:hover,
#expense-category-filter:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 600px) {
  .filter-sep { display: none; }
  .combined-filters { gap: 5px; }
}

/* ========== TO-DO LIST ========== */
.todo-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.todo-list {
  list-style: none;
  background: var(--card-bg);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.todo-item:last-child { border-bottom: none; }
.todo-item:hover { background: #f8f7ff; }

.todo-item.done .todo-text {
  text-decoration: line-through;
  color: var(--text-light);
}

.todo-checkbox {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 2.5px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s;
  font-size: 12px;
  color: transparent;
}

.todo-checkbox:hover { border-color: var(--primary); background: var(--primary-light); }

.todo-item.done .todo-checkbox {
  background: linear-gradient(135deg, #34c759, #30d158);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 6px rgba(48,209,88,0.3);
}

.todo-text { flex: 1; font-size: 14px; font-weight: 500; }

.todo-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--text-light);
  font-weight: 500;
}

.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.priority-dot.high { background: var(--danger); box-shadow: 0 0 6px rgba(255,59,48,0.4); }
.priority-dot.medium { background: var(--warning); }
.priority-dot.low { background: var(--success); }

/* ========== TO-DO PERSON FILTERS & EXPANDABLE ========== */
.todo-person-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.expandable-todo { cursor: pointer; }
.todo-notes-detail { display: none; font-size: 12px; color: var(--text-secondary); margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); line-height: 1.5; }
.expandable-todo.expanded-todo .todo-notes-detail { display: block; }
.todo-main { flex: 1; min-width: 0; }
.todo-person-tag {
  background: rgba(94,92,230,0.12);
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ========== SHOPPING EXPANDABLE & PRICE TAG ========== */
.expandable-shop { cursor: pointer; }
.shop-notes-detail { display: none; font-size: 12px; color: var(--text-secondary); margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.expandable-shop.expanded-shop .shop-notes-detail { display: block; }
.shop-price-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(94,92,230,0.08);
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 6px;
}

/* ========== MODALS ========== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  padding: 36px 36px 32px;
  width: 480px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(26,26,26,0.25);
  animation: modalIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.modal-header h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
  line-height: 1.15;
}

.modal-close {
  background: rgba(0,0,0,0.05);
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-light);
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.modal-close:hover { background: rgba(0,0,0,0.1); color: var(--text); }

.modal label {
  display: block;
  margin-bottom: 18px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.modal input, .modal select, .modal textarea {
  display: block;
  width: 100%;
  padding: 14px 16px;
  margin-top: 8px;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  font-weight: 500;
  background: var(--brand-cream);
  color: var(--brand-ink);
  letter-spacing: 0;
  text-transform: none;
}

.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none;
  border-color: var(--brand-cognac);
  box-shadow: 0 0 0 3px rgba(195,106,45,0.12);
  background: var(--brand-paper);
}

.modal-close {
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
}
.modal-close:hover { background: var(--brand-ink); color: var(--brand-cream); border-color: var(--brand-ink); }

/* ========== SHOPPING LIST ========== */
.shopping-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.shopping-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--card-bg);
  border-radius: 20px 20px 0 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-light);
}

.shop-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.shop-item-name {
  font-size: 14px;
  font-weight: 600;
}

.shop-item-detail {
  font-size: 12px;
  color: var(--text-light);
  display: flex;
  gap: 10px;
  align-items: center;
}

.shop-cat-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.shop-cat-badge.Groceries { background: #d1fae5; color: #065f46; }
.shop-cat-badge.Household { background: #dbeafe; color: #1e40af; }
.shop-cat-badge.Baby { background: #fce7f3; color: #9d174d; }
.shop-cat-badge.Baby-Infant { background: #fce7f3; color: #9d174d; }
.shop-cat-badge.Personal-Care { background: #ede9fe; color: #6d28d9; }
.shop-cat-badge.Clothing { background: #fef3c7; color: #92400e; }
.shop-cat-badge.Electronics { background: #dbeafe; color: #1e40af; }
.shop-cat-badge.Pharmacy { background: #fee2e2; color: #991b1b; }
.shop-cat-badge.School { background: #ecfdf5; color: #065f46; }
.shop-cat-badge.Sports { background: #d1fae5; color: #065f46; }
.shop-cat-badge.Pet { background: #fef3c7; color: #92400e; }
.shop-cat-badge.Gifts { background: #fce7f3; color: #9d174d; }
.shop-cat-badge.Other { background: #f3f4f6; color: #6b7280; }

.urgency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.urgency-dot.urgent { background: var(--danger); box-shadow: 0 0 6px rgba(255,59,48,0.4); }
.urgency-dot.normal { background: var(--warning); }
.urgency-dot.low { background: var(--text-light); }

/* ========== WORKOUT TRACKER (Apple Fitness Style) ========== */
/* Dark hero slab for workout section header */
#section-workouts .section-header {
  background: linear-gradient(135deg, #141f33 0%, var(--brand-navy) 55%, #0f2318 100%);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--brand-emerald);
  box-shadow: 0 16px 48px rgba(15,22,38,0.3);
}
#section-workouts .section-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(560px 240px at 90% -20%, rgba(35,74,55,0.28), transparent 60%);
  pointer-events: none;
}
#section-workouts .section-title {
  color: var(--brand-cream);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  position: relative;
}
#section-workouts .section-header .btn {
  position: relative;
  background: rgba(246,241,232,0.12);
  color: var(--brand-cream);
  border: 1px solid rgba(246,241,232,0.22);
  backdrop-filter: blur(10px);
}
#section-workouts .section-header .btn:hover {
  background: rgba(246,241,232,0.2);
}

.workout-person-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.workout-person-tab.active {
  background: var(--brand-ink);
  color: var(--brand-cream);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(26,26,26,0.22);
}

/* Activity Rings Row */
.fitness-rings-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.fitness-ring-card {
  background: var(--brand-ink);
  border-radius: 20px;
  padding: 24px 16px;
  text-align: center;
  color: var(--brand-cream);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(246,241,232,0.06);
}

.fitness-ring-card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -40%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  opacity: 0.08;
}

.fitness-ring-card.week::before    { background: var(--brand-cognac); }
.fitness-ring-card.month::before   { background: var(--brand-burgundy); }
.fitness-ring-card.quarter::before { background: var(--brand-emerald); }
.fitness-ring-card.year::before    { background: var(--brand-navy); }

.fitness-ring-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  opacity: 0.5;
  margin-bottom: 16px;
  font-weight: 700;
}

.fitness-ring-svg {
  width: 110px;
  height: 110px;
  margin: 0 auto 12px;
  display: block;
}

.fitness-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.1);
  stroke-width: 10;
}

.fitness-ring-fill {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}

.fitness-ring-fill.week-ring    { stroke: #c36a2d; filter: drop-shadow(0 0 6px rgba(195,106,45,0.5)); }
.fitness-ring-fill.month-ring   { stroke: #8a3338; filter: drop-shadow(0 0 6px rgba(138,51,56,0.5)); }
.fitness-ring-fill.quarter-ring { stroke: #3d7054; filter: drop-shadow(0 0 6px rgba(61,112,84,0.5)); }
.fitness-ring-fill.year-ring    { stroke: #2f4e76; filter: drop-shadow(0 0 6px rgba(47,78,118,0.5)); }

.fitness-ring-count {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
}

.fitness-ring-goal {
  font-size: 12px;
  opacity: 0.4;
  margin-top: 2px;
  font-weight: 500;
}

.fitness-ring-pct {
  font-size: 14px;
  font-weight: 800;
  margin-top: 4px;
}

.fitness-ring-pct.green  { color: #c36a2d; }
.fitness-ring-pct.orange { color: #d89565; }
.fitness-ring-pct.purple { color: #5a7a68; }
.fitness-ring-pct.blue   { color: #7e96b5; }

/* Week Grid */
.fitness-week-card {
  background: var(--card-bg);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid rgba(0,0,0,0.04);
}

.fitness-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

#workout-week-label {
  font-size: 15px;
  font-weight: 800;
  min-width: 180px;
  text-align: center;
}

.fitness-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.fitness-day {
  text-align: center;
  padding: 10px 4px;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
}

.fitness-day:hover { background: #f0f0ff; }
.fitness-day.locked { cursor: not-allowed; opacity: 0.85; }
.fitness-day.locked:hover { background: transparent; }
.fitness-day.unlocked { background: rgba(94, 92, 230, 0.06); }

.fitness-day-plan {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 12px;
  opacity: 0.9;
}

.workout-lock-btn { margin-left: auto; }
.workout-lock-btn.unlocked {
  background: var(--brand-cognac);
  color: var(--brand-cream);
  border-color: transparent;
}
.workout-lock-hint {
  margin-top: 10px;
  padding: 8px 12px;
  background: #fff8e6;
  border-radius: 10px;
  font-size: 12px;
  color: #8a6400;
  text-align: center;
}

.workout-plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}
.workout-plan-row:last-child { border-bottom: none; }
.workout-plan-row:hover { background: #f8f8fa; }
.workout-plan-row.today { background: rgba(195,106,45,0.08); }
.workout-plan-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.workout-plan-content { flex: 1; min-width: 0; }
.workout-plan-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: rgba(195,106,45,0.12);
  color: var(--brand-cognac);
}
.workout-plan-notes {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fitness-day-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.fitness-day-num {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.fitness-day.today .fitness-day-num {
  background: var(--brand-ink);
  color: var(--brand-cream);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 2px 8px rgba(26,26,26,0.25);
}

.fitness-day-ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.fitness-day-ring.empty {
  border: 3px solid var(--border);
}

.fitness-day-ring.done {
  background: var(--brand-emerald);
  border: 3px solid transparent;
  color: var(--brand-cream);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(48,90,71,0.3);
}

.fitness-day-ring.future {
  border: 3px dashed #e0e0e0;
}

/* Stats Row */
.fitness-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.fitness-stat-card {
  background: var(--card-bg);
  border-radius: 20px;
  padding: 22px;
  box-shadow: var(--shadow);
  text-align: center;
  border: 1px solid rgba(0,0,0,0.04);
  transition: transform 0.2s;
}

.fitness-stat-card:hover { transform: translateY(-2px); }

.fitness-stat-icon {
  font-size: 26px;
  margin-bottom: 8px;
}

.fitness-stat-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--brand-ink);
}

.fitness-stat-label {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
  font-weight: 600;
}

/* ========== IDEAS ========== */
.idea-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.idea-cat-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}

.idea-cat-badge.Recipe { background: #fef3c7; color: #92400e; }
.idea-cat-badge.Place { background: #dbeafe; color: #1e40af; }
.idea-cat-badge.Activity { background: #d1fae5; color: #065f46; }
.idea-cat-badge.Product { background: #ede9fe; color: #6d28d9; }
.idea-cat-badge.Other { background: #f3f4f6; color: #6b7280; }

.idea-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(94,92,230,0.08);
  transition: all 0.2s;
}

.idea-link:hover { background: rgba(94,92,230,0.15); }

.idea-by {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 500;
}

/* ========== DATE NIGHTS ========== */
.datenight-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.datenight-summary .dash-card {
  text-align: center;
  background: var(--card-bg);
  border-radius: 20px;
  padding: 24px;
  border: 1px solid rgba(0,0,0,0.04);
}

.datenight-summary .big-number {
  color: var(--brand-burgundy);
  font-family: var(--font-display);
}

.stars {
  color: var(--brand-cognac);
  font-size: 16px;
  letter-spacing: 2px;
}

.dn-streak-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: rgba(107,42,47,0.08);
  color: var(--brand-burgundy);
}

/* ========== EMPTY STATES ========== */
.empty-state {
  text-align: center;
  padding: 52px 24px;
  color: var(--text-light);
  font-size: 14px;
  font-weight: 500;
}

.empty-state-icon {
  font-size: 52px;
  margin-bottom: 14px;
  display: block;
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* Upcoming tabs */
.upcoming-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.upcoming-tab {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-light);
  font-family: inherit;
  transition: all 0.2s;
}

.upcoming-tab.active {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
}

.dash-list li {
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 500;
  align-items: center;
}

.upcoming-date-badge {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 600;
  white-space: nowrap;
}

.upcoming-today-badge {
  font-size: 9px;
  font-weight: 600;
  background: var(--brand-ink);
  color: var(--brand-cream);
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* Date Night Planner */
.datenight-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.dn-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.dn-badge.planned { background: #dbeafe; color: #1e40af; }
.dn-badge.idea { background: #fef3c7; color: #92400e; }
.dn-badge.done { background: #d1fae5; color: #065f46; }
.dn-card { cursor: pointer; }

/* Idea reorder buttons */
.idea-reorder-btns { display: flex; flex-direction: column; gap: 1px; margin-right: 2px; }
.reorder-btn { padding: 3px 6px; opacity: 0.4; border-radius: 6px; }
.reorder-btn:hover:not(:disabled) { opacity: 1; background: rgba(0,0,0,0.06); }
.reorder-btn:disabled { opacity: 0.15; cursor: default; }

/* Expense period tabs */
/* Shopify-style segmented date range control (shared by expenses + goals) */
.expense-period-tabs,
.goal-period-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  padding: 4px;
  background: rgba(29,46,74,0.06);
  border: 1px solid rgba(29,46,74,0.12);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.expense-period-tabs .btn-small,
.expense-period-tabs .expense-period-btn,
.goal-period-tabs .btn-small,
.goal-period-tabs .goal-period-btn {
  flex-shrink: 0;
  background: transparent;
  color: var(--brand-navy);
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.expense-period-tabs .btn-small:hover,
.expense-period-tabs .expense-period-btn:hover,
.goal-period-tabs .btn-small:hover,
.goal-period-tabs .goal-period-btn:hover {
  background: rgba(29,46,74,0.08);
}
.expense-period-tabs .btn-small.active,
.expense-period-tabs .expense-period-btn.active,
.goal-period-tabs .btn-small.active,
.goal-period-tabs .goal-period-btn.active {
  background: var(--brand-navy);
  color: var(--brand-cream);
  box-shadow: 0 2px 8px rgba(29,46,74,0.22);
}
@media (max-width: 640px) {
  .expense-period-tabs .btn-small,
  .expense-period-tabs .expense-period-btn,
  .goal-period-tabs .btn-small,
  .goal-period-tabs .goal-period-btn { padding: 6px 11px; font-size: 11px; }
}
.expense-period-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.expense-period-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  min-width: 180px;
  text-align: center;
}
.expense-nav-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card-bg);
  cursor: pointer;
  font-size: 16px;
  color: var(--text);
}
.expense-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
.expense-today-btn { margin-left: 4px; }
.expense-period-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.expense-cat-chart-wrap {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

/* Ideas person filters */
.idea-person-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ========== GOALS ========== */
.goal-period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.goal-progress-wrap {
  background: var(--border);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
  margin-top: 8px;
}

.goal-progress-bar {
  height: 100%;
  background: var(--brand-cognac);
  border-radius: 99px;
  transition: width 0.4s ease;
  min-width: 4px;
}

.goal-cat-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.goal-card.goal-done .card-item-title {
  opacity: 0.5;
  text-decoration: line-through;
}

.goal-card.goal-done .goal-progress-bar {
  background: linear-gradient(90deg, #34c759, #34c759);
}

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

/* Large desktop */
@media (max-width: 1100px) {
  .dash-sections-grid { grid-template-columns: repeat(2, 1fr); }
  .lera-goals-grid { grid-template-columns: repeat(2, 1fr); }
  .meal-grid { grid-template-columns: repeat(4, 1fr); }
  .meal-spotlight-slots { grid-template-columns: repeat(2, 1fr); }
}

/* iPad Pro 12.9" / large tablet (1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
  #sidebar { width: 200px; }
  #main-content { margin-left: 200px; padding: 24px 20px; max-width: calc(100vw - 200px); overflow-x: hidden; }
  .dash-sections-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-top-row { grid-template-columns: 1fr 1fr; }
  .dash-charts-row { grid-template-columns: 1fr 1fr; }
  .meal-grid { grid-template-columns: repeat(3, 1fr); }
  .section-title { font-size: 26px; }
  .kids-profiles { grid-template-columns: 1fr 1fr; }
  .lera-rings-row { grid-template-columns: repeat(4, 1fr); }
  .fitness-rings-row { grid-template-columns: repeat(2, 1fr); }
  .card-item { min-width: 0; }
  .card-item-title { word-break: break-word; }
  .table-wrapper { overflow-x: auto; }
  .dash-section-card { min-width: 0; overflow: hidden; }
}

/* iPad Pro 11" / tablet portrait (769px–900px) */
@media (max-width: 900px) and (min-width: 641px) {
  #sidebar { width: 68px; overflow: hidden; }
  .logo-text { display: none; }
  .nav-label { display: none; }
  .logo { padding: 14px 0; justify-content: center; }
  .logo-icon { width: 40px; height: 40px; font-size: 24px; border-radius: 12px; }
  .logo-icon img { width: 40px; height: 40px; }
  .nav-link { justify-content: center; padding: 12px 0; margin: 2px 6px; border-radius: 12px; gap: 0; }
  .nav-link.active::before { display: none; }
  .nav-links { padding: 0 4px; }
  #main-content { margin-left: 68px; padding: 20px 18px; max-width: calc(100vw - 68px); overflow-x: hidden; }
  .sidebar-divider { margin: 0 10px 12px; }
  .section-title { font-size: 22px; }
  .fitness-rings-row, .lera-rings-row { grid-template-columns: repeat(2, 1fr); }
  .fitness-stats-row, .lera-stats-row { grid-template-columns: repeat(2, 1fr); }
  .datenight-summary { grid-template-columns: repeat(3, 1fr); }
  .dash-top-row { grid-template-columns: 1fr 1fr; }
  .dash-charts-row { grid-template-columns: 1fr; }
  .meal-grid { grid-template-columns: repeat(3, 1fr); }
  .meal-spotlight-slots { grid-template-columns: repeat(2, 1fr); }
  .kids-profiles { grid-template-columns: 1fr 1fr; }
  .kids-hub-section { margin: -20px -18px; padding: 24px 18px; }
  .kids-hub-title { font-size: 24px; }
  .dash-sections-grid { grid-template-columns: repeat(2, 1fr); }
  .lera-goals-grid { grid-template-columns: repeat(2, 1fr); }
  .datenight-tabs { flex-wrap: wrap; }
}

/* Mobile — iPhone 17 Pro / Air and all phones (≤640px) */
@media (max-width: 640px) {
  body { flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0); }

  /* Bottom nav */
  #sidebar {
    width: 100%;
    height: 56px;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    flex-direction: row;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    z-index: 200;
    background: linear-gradient(180deg, #0d0d0d 0%, #111 100%);
    border-top: 1px solid rgba(255,255,255,0.08);
    overflow: visible;
  }

  .logo { display: none; }
  .sidebar-divider { display: none; }

  .nav-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 0 2px;
    height: 56px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }

  .nav-links li { flex-shrink: 0; }

  .nav-link {
    flex-direction: column;
    padding: 5px 6px 4px;
    margin: 0;
    gap: 2px;
    border-radius: 10px;
    min-width: 52px;
    text-align: center;
    font-size: 9px;
    line-height: 1.2;
    color: rgba(255,255,255,0.45);
  }

  .nav-link.active { color: #fff; }
  .nav-link.active::before { display: none; }
  .nav-link.active { background: rgba(232,207,166,0.1); color: var(--brand-cream); }
  .nav-icon { width: 22px; height: 22px; }
  .nav-icon svg { width: 20px; height: 20px; }

  /* Main content */
  #main-content {
    margin-left: 0;
    padding: max(env(safe-area-inset-top, 16px), 16px) 14px calc(64px + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
    background: #f8f8f8;
  }

  body { background: #f8f8f8; }

  .section-title { font-size: 18px; margin-bottom: 10px; font-weight: 800; letter-spacing: -0.3px; }
  .section-header { margin-bottom: 10px; gap: 8px; align-items: center; }
  .section-header .btn-primary { padding: 8px 13px; font-size: 12px; border-radius: 10px; }

  /* Cards tighter on mobile */
  .card-item { padding: 12px 14px; border-radius: 14px; gap: 10px; }
  .card-item-title { font-size: 14px; margin-bottom: 4px; }
  .card-item-meta { font-size: 11px; gap: 8px; }
  .dash-card { padding: 14px 16px; border-radius: 16px; }

  /* Dashboard */
  .dash-top-row, .dash-charts-row { grid-template-columns: 1fr; gap: 10px; }
  .dash-sections-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dash-card { padding: 14px 16px; border-radius: 14px; }
  .big-number { font-size: 26px; }
  .dash-section-card { padding: 12px 14px; border-radius: 14px; }
  .dash-section-icon svg { width: 20px; height: 20px; }
  .dash-section-info h3 { font-size: 13px; }
  .dash-section-stat { font-size: 12px; }
  .dash-section-detail { font-size: 11px; }

  /* Meal Planner */
  .meal-grid { grid-template-columns: 1fr; gap: 8px; }
  .meal-day { border-radius: 14px; }
  .week-nav { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .meal-spotlight-slots { grid-template-columns: repeat(2, 1fr); }

  /* Cards */
  .card-item { padding: 13px 15px; border-radius: 14px; flex-direction: column; }
  .card-item-actions { align-self: flex-end; }
  .card-item-title { font-size: 14px; }
  .card-item-meta { font-size: 12px; }

  /* Kids Hub */
  .kids-hub-section { margin: -16px -14px; padding: 18px 14px; border-radius: 18px; }
  .kids-hub-title { font-size: 22px; }
  .kids-hub-title-row { flex-direction: column; gap: 10px; align-items: flex-start; }
  .kids-profiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kid-profile-card { padding: 14px; border-radius: 16px; }
  .kid-avatar { width: 36px; height: 36px; font-size: 16px; }
  .kid-profile-info h3 { font-size: 14px; }
  .kids-hub-tabs { flex-wrap: wrap; gap: 6px; }
  .kids-cat-legend { flex-wrap: wrap; gap: 5px; }
  .kids-cat-pill { font-size: 11px; padding: 3px 8px; }
  .kid-goal-card { padding: 12px 14px; border-radius: 12px; }

  /* Lera Station */
  .lera-rings-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lera-ring-card { padding: 14px 8px; border-radius: 16px; }
  .lera-ring-svg { width: 72px; height: 72px; }
  .lera-ring-count { font-size: 20px; }
  .lera-ring-label { font-size: 9px; }
  .lera-week-card { padding: 12px; border-radius: 14px; }
  .lera-week-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lera-week-table { min-width: 540px; font-size: 12px; }
  .lera-stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lera-stat-card { padding: 12px; border-radius: 12px; }
  .lera-stat-value { font-size: 18px; }
  .lera-goals-grid { grid-template-columns: 1fr; gap: 8px; }
  .lera-goal-card { padding: 14px; border-radius: 12px; }
  .lera-station-title { font-size: 20px; }
  .lera-station-header { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .lera-station-subtitle { font-size: 12px; }

  /* Workouts */
  .fitness-rings-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fitness-ring-card { padding: 14px 8px; border-radius: 16px; }
  .fitness-ring-svg { width: 80px; height: 80px; }
  .fitness-ring-count { font-size: 22px; }
  .fitness-week-card { padding: 12px; border-radius: 14px; }
  .fitness-day-ring { width: 34px; height: 34px; font-size: 13px; }
  .fitness-stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .fitness-stat-card { padding: 14px; border-radius: 14px; }
  .fitness-stat-value { font-size: 20px; }

  /* Shopping / Todos */
  .todo-item { padding: 11px 13px; gap: 10px; }
  .todo-meta { flex-wrap: wrap; gap: 4px; }
  .shopping-filters { gap: 5px; }

  /* Date nights */
  .datenight-summary { grid-template-columns: 1fr; gap: 8px; }
  .datenight-summary .dash-card { padding: 14px 16px; }

  /* Table */
  .table-wrapper { border-radius: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  td, th { padding: 8px 8px; font-size: 12px; white-space: nowrap; }
  td:nth-child(2), th:nth-child(2) { white-space: normal; max-width: 120px; }
  .expense-summary-bar { border-radius: 14px 14px 0 0; font-size: 12px; padding: 10px 14px; }

  /* Period tabs on mobile — scroll horizontally */
  .expense-period-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 2px; }
  .expense-period-tabs .btn-small { flex-shrink: 0; }

  /* Filters */
  .filters { flex-wrap: wrap; gap: 6px; }
  .btn-small { padding: 5px 10px; font-size: 11px; }
  .combined-filters { gap: 5px; flex-wrap: wrap; }

  /* Modals */
  .modal { padding: 20px 16px; border-radius: 20px; width: 96vw; max-height: 88vh; overflow-y: auto; }
  .modal-header h2 { font-size: 17px; }
  label { font-size: 13px; }
  input, select, textarea { font-size: 14px !important; padding: 10px 12px; }
}

/* ========== DETAIL POPUP MODAL ========== */
.detail-modal {
  max-width: 520px;
  width: 94vw;
}

.detail-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin: 0;
}

.detail-field .detail-value {
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
}

.detail-field .detail-value.big {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.detail-field .detail-value.notes-text {
  background: var(--card-hover);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-img {
  width: 100%;
  border-radius: 14px;
  margin-top: 4px;
  object-fit: cover;
  max-height: 260px;
}

.detail-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,122,255,0.12);
  color: #007aff;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}
.detail-link-btn:hover { background: rgba(0,122,255,0.2); }

.detail-modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.detail-modal-actions .btn {
  flex: 1;
  min-width: 100px;
  text-align: center;
}

.detail-stars {
  font-size: 20px;
  letter-spacing: 2px;
}

.detail-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* Small phones (SE, older iPhones) */
@media (max-width: 390px) {
  .nav-link { min-width: 44px; padding: 5px 3px 4px; font-size: 8px; }
  .nav-icon svg { width: 18px; height: 18px; }
  #main-content { padding: 14px 12px calc(62px + env(safe-area-inset-bottom, 0px)); }
  .section-title { font-size: 19px; }
  .dash-sections-grid { grid-template-columns: 1fr; }
  .kids-profiles { grid-template-columns: 1fr; }
}

/* ========== MOBILE SIDEBAR DRAWER ========== */

/* Hide non-primary items on mobile, show More button */
@media (max-width: 640px) {
  /* Hide all nav li that don't have data-mobile-primary and aren't the More btn */
  .nav-links li:not([data-mobile-primary]):not(.nav-more-li) {
    display: none;
  }

  /* More (hamburger) button in bottom nav */
  .nav-more-li {
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .nav-more-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.45);
    padding: 6px 4px 4px;
    border-radius: 10px;
    min-width: 48px;
    font-size: 8px;
    font-family: inherit;
    line-height: 1.2;
    transition: color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-more-btn.active,
  .nav-more-btn:active {
    color: #fff;
    background: rgba(255,255,255,0.1);
  }

  .nav-more-label {
    font-size: 8px;
    font-weight: 500;
  }

  /* Backdrop overlay */
  .mobile-more-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 290;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.28s ease;
  }
  .mobile-more-overlay.open {
    display: block;
    opacity: 1;
  }

  /* Sidebar panel — slides in from the LEFT */
  .mobile-more-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 78vw;
    max-width: 300px;
    background: linear-gradient(180deg, #0d0d0d 0%, #111 100%);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 6px 0 40px rgba(0,0,0,0.7);
    border-right: 1px solid rgba(255,255,255,0.07);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    padding: 0 0 100px; /* pad for bottom nav */
  }
  .mobile-more-drawer.open {
    transform: translateX(0);
  }

  /* Sidebar header inside drawer */
  .mobile-more-handle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    margin-bottom: 8px;
  }

  /* Title text inside sidebar header */
  .mobile-more-heading {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    letter-spacing: -0.01em;
    margin: 0;
  }

  /* Grid → vertical list of nav rows */
  .mobile-more-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 10px;
  }

  .mobile-more-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: transparent;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-more-item:active {
    background: rgba(195,106,45,0.14);
    color: #e8b88a;
  }

  .mobile-more-item.active-section {
    background: rgba(195,106,45,0.22);
    color: var(--brand-cream);
    border-left: 2px solid var(--brand-cognac);
  }

  .mobile-more-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: inherit;
  }

  .mobile-more-item.active-section .mobile-more-icon {
    color: var(--brand-cognac);
  }

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

  .goal-period-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .goal-period-tabs .btn-small { flex-shrink: 0; }
}

/* Sidebar never shows on desktop/tablet */
@media (min-width: 641px) {
  .mobile-more-drawer,
  .mobile-more-overlay,
  .nav-more-li { display: none !important; }
}

/* ================================================================= */
/* ============ FAMFORGE PHASE 1: WARMTH + POINTS + REWARDS ======== */
/* ================================================================= */

/* Warm ambient background gradient behind the whole app */
body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(195,106,45,0.07), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(31,58,95,0.06), transparent 55%),
    radial-gradient(1000px 700px at 50% 110%, rgba(48,90,71,0.05), transparent 55%),
    var(--brand-paper);
}

/* Hide global header on Home section — home has its own greeting hero */
.on-home-section .family-header { display: none !important; }

/* ========== FAMILY HEADER (Emotional Heart) ========== */
.family-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 28px 32px;
  margin-bottom: 22px;
  background: linear-gradient(135deg, #141f33 0%, var(--brand-navy) 58%, #3a1518 100%);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15,22,38,0.35), 0 1px 0 rgba(255,255,255,0.04) inset;
  border: 1px solid rgba(246,241,232,0.08);
  position: relative;
  overflow: hidden;
  color: var(--brand-cream);
}
.family-header::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-cognac), #8a4a1f);
}
.family-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 260px at 92% -30%, rgba(195,106,45,0.22), transparent 65%),
    radial-gradient(500px 220px at -10% 110%, rgba(90,30,35,0.45), transparent 60%);
  pointer-events: none;
}
.fh-left { flex: 1; min-width: 0; position: relative; z-index: 1; }
.fh-greeting {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  color: var(--brand-cream);
  letter-spacing: -0.02em;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
  line-height: 1.1;
}
.fh-subtitle {
  font-size: 12px;
  color: var(--brand-cognac);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 600;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.fh-avatars {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.fh-avatar {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  background: linear-gradient(135deg, #fff, #f6f3ef);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08), inset 0 0 0 2px rgba(255,255,255,0.9);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 2px solid transparent;
}
.fh-avatar:hover, .fh-avatar:active {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(124,110,240,0.25);
}
.fh-avatar[data-member="Abs"]   { background: rgba(246,241,232,0.10); box-shadow: inset 0 0 0 1px var(--brand-navy), inset 0 0 0 3px rgba(246,241,232,0.08); }
.fh-avatar[data-member="Anne"]  { background: rgba(246,241,232,0.10); box-shadow: inset 0 0 0 1px var(--brand-burgundy), inset 0 0 0 3px rgba(246,241,232,0.08); }
.fh-avatar[data-member="Lera"]  { background: rgba(246,241,232,0.10); box-shadow: inset 0 0 0 1px var(--brand-cognac), inset 0 0 0 3px rgba(246,241,232,0.08); }
.fh-avatar[data-member="Lebari"]{ background: rgba(246,241,232,0.10); box-shadow: inset 0 0 0 1px var(--brand-emerald), inset 0 0 0 3px rgba(246,241,232,0.08); }
.fh-avatar .fh-avatar-mood {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.fh-avatar .fh-avatar-name {
  position: absolute;
  bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--brand-cream);
  text-transform: uppercase; letter-spacing: 0.14em;
  white-space: nowrap;
}
.fh-avatars { padding-bottom: 18px; }

/* Right side: progress ring + points chip */
.fh-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; position: relative; z-index: 1; }

.fh-progress {
  position: relative;
  width: 92px; height: 92px;
}
.fh-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.fh-ring-track { fill: none; stroke: rgba(246,241,232,0.12); stroke-width: 10; }
.fh-ring-fill {
  fill: none;
  stroke: url(#fh-ring-grad);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.fh-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.fh-points-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  background: var(--brand-cognac);
  border: 1px solid rgba(246,241,232,0.18);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(26,26,26,0.22);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  border: 1px solid rgba(246,241,232,0.08);
}
.fh-points-chip:hover, .fh-points-chip:active {
  transform: translateY(-2px);
  background: var(--brand-cognac);
  box-shadow: 0 10px 24px rgba(163,108,58,0.45);
}
.fh-points-icon { font-size: 15px; color: var(--brand-cream); }
.fh-points-chip:hover .fh-points-icon { color: var(--brand-cream); }
.fh-points-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--brand-cream); letter-spacing: -0.3px; }
.fh-points-label { font-size: 10px; font-weight: 600; color: rgba(246,241,232,0.82); text-transform: uppercase; letter-spacing: 0.18em; }
.fh-ring-pct { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--brand-cream); letter-spacing: -0.5px; }
.fh-ring-label { font-size: 9px; color: var(--brand-cognac); font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; }

/* Lift-on-tap for cards (micro-animation) */
.clickable, .dash-card, .dash-section-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.clickable:active, .dash-section-card:active {
  transform: scale(0.98);
}

/* Generic title glyph — line-art icon tile adjacent to serif title */
.title-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  margin-right: 12px;
  border-radius: 10px;
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
  color: var(--brand-cognac);
  vertical-align: -7px;
}
.rh-sparkle {
  font-family: var(--font-display);
  color: var(--brand-cognac);
  font-size: 0.55em;
  vertical-align: 0.35em;
  margin-left: 8px;
  font-weight: 400;
}

/* ========== REWARDS VAULT ========== */
.rewards-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 36px 40px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #0f1626 0%, var(--brand-navy) 55%, #2a1012 100%);
  color: var(--brand-cream);
  border-radius: 22px;
  border: 1px solid rgba(246,241,232,0.08);
  box-shadow: 0 24px 60px rgba(15,22,38,0.32);
  position: relative;
  overflow: hidden;
}
.rewards-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 220px at 95% -20%, rgba(195,106,45,0.22), transparent 65%),
    radial-gradient(420px 200px at -5% 110%, rgba(90,30,35,0.4), transparent 60%);
  pointer-events: none;
}
.rewards-hero::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand-cognac), #8a4a1f);
}
.rewards-hero > * { position: relative; z-index: 1; }
.rewards-hero-label { font-size: 11px; font-weight: 700; color: var(--brand-cognac); text-transform: uppercase; letter-spacing: 0.28em; }
.rewards-hero-value { font-family: var(--font-display); font-size: 64px; font-weight: 700; color: var(--brand-cream); letter-spacing: -0.035em; margin: 8px 0; line-height: 0.95; }
.rewards-hero-hint { font-size: 13px; color: rgba(246,241,232,0.7); max-width: 360px; line-height: 1.5; }
.rewards-hero-right { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rewards-leader {
  background: rgba(246,241,232,0.08);
  border: 1px solid rgba(246,241,232,0.18);
  border-radius: 14px;
  padding: 12px 16px;
  min-width: 88px;
  text-align: center;
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}
.rewards-leader::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
}
.rewards-leader:nth-child(4n+1)::before { background: var(--brand-cognac); }
.rewards-leader:nth-child(4n+2)::before { background: var(--brand-emerald); }
.rewards-leader:nth-child(4n+3)::before { background: #8ca6cf; }
.rewards-leader:nth-child(4n+4)::before { background: #c9595f; }
.rewards-leader-avatar { font-size: 22px; }
.rewards-leader-name { font-size: 10px; font-weight: 700; color: rgba(246,241,232,0.7); text-transform: uppercase; letter-spacing: 0.18em; margin-top: 4px; }
.rewards-leader-pts { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--brand-cream); letter-spacing: -0.3px; margin-top: 2px; }

.rewards-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 14px;
}
.reward-card {
  background: var(--brand-navy);
  color: var(--brand-cream);
  border-radius: 16px;
  padding: 14px 14px 14px;
  border: 1px solid rgba(246,241,232,0.10);
  box-shadow: 0 10px 26px rgba(15,22,38,0.20);
  display: flex; flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 0;
}
.reward-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  opacity: 0;
  transition: opacity 0.2s;
}
.reward-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(15,22,38,0.32); }
.reward-card:hover::before { opacity: 1; }
/* Cornerstone fills cycle across the grid — bold & color-forward */
.reward-card:nth-child(4n+1) { background: linear-gradient(160deg, #d4762e 0%, var(--brand-cognac) 50%, #8a4a1f 100%); }
.reward-card:nth-child(4n+2) { background: linear-gradient(160deg, #2e5a44 0%, var(--brand-emerald) 55%, #152e22 100%); }
.reward-card:nth-child(4n+3) { background: linear-gradient(160deg, #2a4268 0%, var(--brand-navy) 55%, #0f1626 100%); }
.reward-card:nth-child(4n+4) { background: linear-gradient(160deg, #7a2a30 0%, var(--brand-burgundy) 55%, #36131a 100%); }
.reward-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px 140px at 100% -10%, rgba(246,241,232,0.14), transparent 60%);
  pointer-events: none;
}
.reward-card > * { position: relative; z-index: 1; }
.reward-card .reward-emoji { font-size: 28px; margin-bottom: 4px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); }
.reward-card .reward-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--brand-cream); letter-spacing: -0.015em; margin-bottom: 2px; line-height: 1.2; }
.reward-card .reward-desc { font-size: 11px; color: rgba(246,241,232,0.72); min-height: 0; margin-bottom: 8px; line-height: 1.4; }
.reward-emoji { font-size: 42px; margin-bottom: 10px; line-height: 1; }
.reward-name { font-size: 15px; font-weight: 800; color: var(--brand-cream); margin-bottom: 4px; letter-spacing: -0.3px; }
.reward-desc { font-size: 12px; color: rgba(246,241,232,0.72); margin-bottom: 12px; min-height: 16px; }
.reward-cost {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(246,241,232,0.14);
  color: var(--brand-cream);
  border: 1px solid rgba(246,241,232,0.22);
  padding: 5px 13px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 12px;
  align-self: flex-start;
}
.reward-actions { display: flex; gap: 6px; margin-top: auto; }
.reward-actions .btn { flex: 1; padding: 8px 10px; font-size: 12px; }
.reward-redeem-btn {
  background: var(--brand-cream);
  color: var(--brand-ink);
  border: 1px solid var(--brand-cream);
  border-radius: 999px;
  font-weight: 700; font-size: 10px;
  padding: 7px 14px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.14em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: flex-start;
}
@media (max-width: 640px) {
  .reward-redeem-btn { padding: 6px 12px; font-size: 9px; letter-spacing: 0.12em; }
}
.reward-redeem-btn:hover:not(:disabled) { background: var(--brand-ink); color: var(--brand-cream); border-color: var(--brand-ink); transform: translateY(-1px); }
.reward-redeem-btn:disabled { opacity: 0.45; cursor: not-allowed; background: rgba(246,241,232,0.18); color: rgba(246,241,232,0.6); border-color: rgba(246,241,232,0.14); box-shadow: none; }
.reward-edit-btn, .reward-del-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-light);
  border-radius: 10px; padding: 8px 10px; font-size: 12px; cursor: pointer;
}

/* Pending proposals / Recent wins */
.rewards-pending, .rewards-wins { display: flex; flex-direction: column; gap: 10px; }
.pending-card, .win-card {
  background: #fff; border-radius: 16px; padding: 14px 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.05);
  display: flex; align-items: center; gap: 14px;
}
.pending-card .pc-emoji, .win-card .wc-emoji { font-size: 32px; flex-shrink: 0; }
.pending-card .pc-main, .win-card .wc-main { flex: 1; min-width: 0; }
.pending-card .pc-title, .win-card .wc-title { font-weight: 800; color: var(--text); margin-bottom: 2px; }
.pending-card .pc-sub, .win-card .wc-sub { font-size: 12px; color: var(--text-light); }
.win-card .wc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.win-card.reverted { opacity: 0.6; }
.win-card.reverted .wc-title { text-decoration: line-through; }
/* Redemption cost chip — clearly shows points spent */
.wc-cost-chip {
  display: inline-flex; align-items: center;
  background: rgba(90,30,35,0.13);
  color: var(--brand-burgundy);
  border: 1px solid rgba(90,30,35,0.22);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Refund chip — shows points returned after undo */
.wc-refund-chip {
  display: inline-flex; align-items: center;
  background: rgba(35,74,55,0.12);
  color: var(--brand-emerald);
  border: 1px solid rgba(35,74,55,0.22);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.wc-reverted-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,59,48,0.12);
  color: #c4302b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
}
.wc-undo-btn {
  background: rgba(94, 92, 230, 0.1);
  color: #5e5ce6;
  border: 1px solid rgba(94, 92, 230, 0.25);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
}
.wc-undo-btn:hover { background: rgba(94, 92, 230, 0.18); }
.wc-undo-btn:active { transform: scale(0.96); }

.vote-clear-btn {
  background: transparent;
  color: var(--text-light, #888);
  border: 1px solid rgba(0,0,0,0.12);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  margin-left: 2px;
  transition: background 0.15s, color 0.15s;
}
.vote-clear-btn:hover { background: rgba(255,59,48,0.1); color: #c4302b; }

/* ========== DAILY VERSE / QUOTE CARD ========== */
.daily-verse-card {
  margin: 18px 0 14px;
  padding: 24px 28px;
  border-radius: 18px;
  background: var(--brand-ink);
  color: var(--brand-cream);
  box-shadow: 0 14px 36px rgba(26,26,26,0.22);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(246,241,232,0.08);
}
.daily-verse-card::before {
  content: '❝';
  position: absolute;
  top: -30px;
  left: 14px;
  font-size: 120px;
  opacity: 0.14;
  color: var(--brand-cognac);
  font-family: var(--font-display);
  line-height: 1;
}
.dv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; }
.dv-ribbon { background: rgba(195,106,45,0.18); color: var(--brand-cognac); padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(195,106,45,0.3); }
.dv-date { color: rgba(246,241,232,0.55); }
.dv-text {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.4;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
  color: var(--brand-cream);
}
.dv-source { font-size: 11px; font-weight: 600; text-align: right; color: var(--brand-cognac); text-transform: uppercase; letter-spacing: 0.16em; }

/* ========== HOME FUN STRIP ========== */
.home-fun-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.fun-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-radius: 18px;
  color: var(--brand-cream);
  background: var(--brand-ink);
  border: 1px solid rgba(246,241,232,0.10);
  box-shadow: 0 14px 36px rgba(15,22,38,0.20);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
}
.fun-tile.streak { background: linear-gradient(135deg, #d4762e 0%, var(--brand-cognac) 55%, #8a4a1f 100%); }
.fun-tile.wins   { background: linear-gradient(135deg, #2e5a44 0%, var(--brand-emerald) 55%, #152e22 100%); }
.fun-tile.top    { background: linear-gradient(135deg, #7a2a30 0%, var(--brand-burgundy) 55%, #36131a 100%); }
.fun-tile:hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(15,22,38,0.30); }
/* Subtle light wash */
.fun-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(300px 120px at 100% -10%, rgba(246,241,232,0.14), transparent 60%);
  pointer-events: none;
}
.fun-tile > * { position: relative; z-index: 1; }
/* Accent color bar on the left edge — visible, not loud */
.fun-tile::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: rgba(246,241,232,0.35);
  z-index: 2;
}
.fun-tile.streak::before { background: var(--brand-cognac); }
.fun-tile.wins::before   { background: var(--brand-emerald); }
.fun-tile.top::before    { background: var(--brand-navy); }
.fun-tile.streak:hover { border-color: var(--brand-cognac); }
.fun-tile.wins:hover   { border-color: var(--brand-emerald); }
.fun-tile.top:hover    { border-color: var(--brand-navy); }
.fun-emoji { font-size: 26px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.28)); }
.fun-main { min-width: 0; }
.fun-value { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--brand-cream); letter-spacing: -0.025em; line-height: 1; }
.fun-label { font-size: 10px; color: rgba(246,241,232,0.75); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-top: 5px; }

@media (max-width: 640px) {
  .home-fun-strip { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .fun-tile { padding: 10px; gap: 8px; border-radius: 14px; }
  .fun-emoji { font-size: 22px; }
  .fun-value { font-size: 18px; }
  .fun-label { font-size: 10px; }
  .daily-verse-card { padding: 14px 16px; }
  .dv-text { font-size: 15px; }
}

/* ========== HOME AGGREGATOR ========== */
.home-greeting-hero {
  background: linear-gradient(135deg, #141f33 0%, var(--brand-navy) 55%, #3a1518 100%);
  border-radius: 22px;
  padding: 32px 36px;
  margin-bottom: 22px;
  position: relative; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15,22,38,0.32);
  border: 1px solid rgba(246,241,232,0.08);
}
.home-greeting-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(560px 220px at 90% -20%, rgba(195,106,45,0.22), transparent 65%),
    radial-gradient(440px 180px at -5% 110%, rgba(90,30,35,0.4), transparent 55%);
  pointer-events: none;
}
.home-greeting-hero::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--brand-cognac), #8a4a1f);
}
.hgh-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.hgh-greeting { font-family: var(--font-display); font-size: 36px; font-weight: 600; color: var(--brand-cream); letter-spacing: -0.025em; line-height: 1.05; }
.hgh-date { font-size: 11px; font-weight: 700; color: var(--brand-cognac); text-transform: uppercase; letter-spacing: 0.26em; margin-bottom: 6px; }
.hgh-avatars { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.hgh-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(246,241,232,0.10);
  border: 1px solid rgba(246,241,232,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  cursor: pointer; transition: transform 0.15s;
}
.hgh-avatar:hover { transform: scale(1.08); }
.hgh-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hgh-pts-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--brand-cognac);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
}
.hgh-pts-num { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--brand-cream); letter-spacing: -0.3px; }
.hgh-pts-label { font-size: 10px; font-weight: 700; color: rgba(246,241,232,0.82); text-transform: uppercase; letter-spacing: 0.18em; }

/* Per-member points chip row (cornerstone mini-cards) */
.hgh-pts-row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 18px;
}
.hgh-pts-member {
  display: flex; align-items: center; gap: 8px;
  background: rgba(246,241,232,0.06);
  border: 1px solid rgba(246,241,232,0.14);
  border-left: 3px solid var(--brand-cognac);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  min-width: 0;
}
.hgh-pts-member:hover { background: rgba(246,241,232,0.11); transform: translateY(-1px); }
.hgh-pts-member-coin { font-size: 18px; line-height: 1; flex-shrink: 0; }
.hgh-pts-member-body { display: flex; flex-direction: column; min-width: 0; }
.hgh-pts-member-name {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(246,241,232,0.72);
}
.hgh-pts-member-num {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--brand-cream); letter-spacing: -0.3px; line-height: 1.1;
}
@media (max-width: 640px) {
  .hgh-pts-row { gap: 6px; margin-top: 14px; }
  .hgh-pts-member { padding: 8px 9px; gap: 6px; border-left-width: 2px; }
  .hgh-pts-member-coin { font-size: 15px; }
  .hgh-pts-member-name { font-size: 9px; letter-spacing: 0.12em; }
  .hgh-pts-member-num { font-size: 15px; }
}

/* Today's Reveal / Memory Prompt card (lifted from old streak-hero) */
.home-reveal-card {
  background: linear-gradient(135deg, #141f33 0%, var(--brand-navy) 70%, #0f1a2e 100%);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 16px;
  position: relative; overflow: hidden;
  box-shadow: 0 16px 40px rgba(15,22,38,0.28);
  border: 1px solid rgba(246,241,232,0.08);
  border-left: 4px solid var(--brand-cognac);
}
.home-reveal-card .streak-reveal {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(246,241,232,0.05); border: 1px solid rgba(246,241,232,0.10);
}
.home-reveal-card .streak-reveal-emoji { font-size: 26px; line-height: 1; }
.home-reveal-card .streak-reveal-body { min-width: 0; flex: 1; }
.home-reveal-card .streak-reveal-kind {
  font-size: 10px; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brand-cognac); margin-bottom: 4px;
}
.home-reveal-card .streak-reveal-text {
  font-family: var(--font-display); font-size: 15px; font-weight: 500;
  color: var(--brand-cream); line-height: 1.35;
}
@media (max-width: 480px) {
  .home-reveal-card { padding: 12px; }
  .home-reveal-card .streak-reveal-text { font-size: 14px; }
}

/* Blocks */
.home-section-block {
  background: var(--brand-paper);
  border-radius: 18px;
  border: 1px solid var(--brand-line);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(15,22,38,0.06);
}
.home-block-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--brand-line);
}
.home-block-title {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--brand-ink);
}
.home-block-action {
  font-size: 11px; font-weight: 600;
  color: var(--brand-cognac);
  background: none; border: none; cursor: pointer;
  padding: 0; text-transform: uppercase; letter-spacing: 0.12em;
}
.home-block-action:hover { text-decoration: underline; }

/* Two-column layout */
.home-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 600px) { .home-two-col { grid-template-columns: 1fr; } }
.home-two-col .home-section-block { margin-bottom: 0; }

/* Announcements */
.home-announcements { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.home-ann-empty { font-size: 13px; color: var(--brand-mute); text-align: center; padding: 12px 0; }
.home-ann-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  position: relative;
}
.home-ann-card:nth-child(4n+1) { background: rgba(195,106,45,0.10); border-left: 3px solid var(--brand-cognac); }
.home-ann-card:nth-child(4n+2) { background: rgba(35,74,55,0.10); border-left: 3px solid var(--brand-emerald); }
.home-ann-card:nth-child(4n+3) { background: rgba(29,46,74,0.10); border-left: 3px solid var(--brand-navy); }
.home-ann-card:nth-child(4n+4) { background: rgba(90,30,35,0.10); border-left: 3px solid var(--brand-burgundy); }
.home-ann-emoji { font-size: 22px; flex-shrink: 0; }
.home-ann-body { flex: 1; min-width: 0; }
.home-ann-text { font-size: 14px; color: var(--brand-ink); font-weight: 500; line-height: 1.45; }
.home-ann-meta { font-size: 10px; color: var(--brand-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; margin-top: 4px; }
.home-ann-del { background: rgba(90,30,35,0.08); border: 1px solid rgba(90,30,35,0.18); cursor: pointer; color: var(--brand-burgundy); font-size: 13px; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
.home-ann-del:hover { background: var(--brand-burgundy); color: var(--brand-cream); }

/* Meals */
.home-meals-list { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.home-meal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
  min-width: 0;
}
.home-meal-icon { font-size: 18px; flex-shrink: 0; }
.home-meal-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--brand-mute); min-width: 60px; flex-shrink: 0; }
.home-meal-name {
  font-size: 13px; font-weight: 600; color: var(--brand-ink);
  flex: 1; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  word-break: break-word;
}
@media (max-width: 480px) {
  .home-meal-row { padding: 10px 10px; gap: 8px; }
  .home-meal-type { min-width: 52px; font-size: 9px; letter-spacing: 0.14em; }
  .home-meal-name { font-size: 12.5px; }
}
.home-meal-empty { font-size: 13px; color: var(--brand-mute); padding: 14px; text-align: center; }

/* Upcoming events */
.home-upcoming-list { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.home-event-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--brand-cream); border: 1px solid var(--brand-line);
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.home-event-row:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15,22,38,0.1); }
.home-event-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.home-event-dot.ev-cognac   { background: var(--brand-cognac); }
.home-event-dot.ev-emerald  { background: var(--brand-emerald); }
.home-event-dot.ev-navy     { background: var(--brand-navy); }
.home-event-dot.ev-burgundy { background: var(--brand-burgundy); }
.home-event-name { font-size: 13px; font-weight: 600; color: var(--brand-ink); flex: 1; }
.home-event-date { font-size: 10px; font-weight: 700; color: var(--brand-cognac); text-transform: uppercase; letter-spacing: 0.14em; white-space: nowrap; }
.home-empty { font-size: 13px; color: var(--brand-mute); padding: 14px; text-align: center; }

/* Goals list */
.home-goals-list { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.home-goal-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--brand-cream); border: 1px solid var(--brand-line);
}
.home-goal-row:nth-child(4n+1) { border-left: 3px solid var(--brand-cognac); }
.home-goal-row:nth-child(4n+2) { border-left: 3px solid var(--brand-emerald); }
.home-goal-row:nth-child(4n+3) { border-left: 3px solid var(--brand-navy); }
.home-goal-row:nth-child(4n+4) { border-left: 3px solid var(--brand-burgundy); }
.home-goal-info { flex: 1; min-width: 0; }
.home-goal-title { font-size: 13px; font-weight: 600; color: var(--brand-ink); }
.home-goal-meta { font-size: 10px; font-weight: 600; color: var(--brand-mute); text-transform: uppercase; letter-spacing: 0.14em; margin-top: 2px; }
.home-goal-status {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  padding: 3px 9px; border-radius: 999px;
}
.home-goal-status.in-progress { background: rgba(195,106,45,0.14); color: var(--brand-cognac); }
.home-goal-status.not-started { background: rgba(29,46,74,0.10); color: var(--brand-navy); }

/* Redeemed list */
.home-redeemed-list { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.home-redeem-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--brand-cream); border: 1px solid var(--brand-line);
}
.home-redeem-emoji { font-size: 20px; }
.home-redeem-name { font-size: 13px; font-weight: 600; color: var(--brand-ink); flex: 1; }
.home-redeem-who { font-size: 10px; font-weight: 700; color: var(--brand-mute); text-transform: uppercase; letter-spacing: 0.14em; }
.home-redeem-cost { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--brand-cognac); }

/* ========== OFFLINE BANNER ========== */
body.is-offline::before {
  content: 'OFFLINE — CHANGES SAVED LOCALLY · WILL SYNC WHEN RECONNECTED';
  display: block;
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--brand-ink);
  color: var(--brand-cream);
  border-bottom: 1px solid rgba(246,241,232,0.08);
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-align: center;
}

/* ========== WHO BAR (compact switch-user chip) ========== */
#who-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 0 6px;
}
#who-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(26,26,26,0.04);
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink);
  line-height: 1;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
}
#who-bar-btn:hover { transform: translateY(-1px); background: var(--brand-ink); color: var(--brand-cream); border-color: var(--brand-ink); box-shadow: 0 8px 18px rgba(26,26,26,0.18); }
#who-bar-btn:active { transform: translateY(0); }
#who-bar-avatar { font-size: 18px; }
.who-bar-label-text { letter-spacing: -0.1px; }

@media (max-width: 900px) {
  #who-bar { padding: 6px 0 4px; }
  #who-bar-btn { padding: 6px 12px 6px 8px; font-size: 12px; gap: 6px; }
  #who-bar-avatar { font-size: 16px; }
  /* Only show on Home/Dashboard on small screens */
  body:not(.show-who-bar) #who-bar { display: none; }
}

/* ========== ADMIN HUB — LUXURY REDESIGN ========== */
/* design-audit: Admin Hub now uses unified .section-hero pattern; gradient defined under
   .section-hero--adminhub below. Legacy custom styles removed. */
.adminhub-body { margin-top: 6px; }
.ah-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.ah-card {
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
  border-left: 4px solid var(--brand-cognac);
  position: relative;
  overflow: hidden;
}
.ah-title { margin: 0 0 10px; font-size: 14px; }
.ah-card:nth-child(4n+1) { border-left-color: var(--brand-cognac); }
.ah-card:nth-child(4n+2) { border-left-color: var(--brand-emerald); }
.ah-card:nth-child(4n+3) { border-left-color: var(--brand-navy); }
.ah-card:nth-child(4n+4) { border-left-color: var(--brand-burgundy); }
.ah-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
}
.ah-members { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ah-member {
  padding: 14px;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  background: var(--brand-cream);
}
.ah-member-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ah-member-avatar { font-size: 28px; }
.ah-member-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ah-member-actions .btn { min-height: 36px; padding: 6px 4px; font-size: 12px; }
@media (max-width: 480px) {
  .ah-member-actions { grid-template-columns: repeat(2, 1fr); }
  .ah-member-actions .btn { min-height: 40px; font-size: 13px; }
}

/* Minimum tap targets per Apple HIG (44pt) */
@media (max-width: 900px) {
  .btn-icon, .mt-del, .upcoming-tab, .plans-tab, .datenight-tab, .filter-select { min-height: 36px; min-width: 36px; }
}
.ah-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--brand-line); border-radius: 12px;
  margin-bottom: 8px; background: var(--brand-cream);
}

/* Login password step */
#login-step-password input[type="password"]:focus {
  outline: none; border-color: var(--brand-cognac);
}

/* Station lock row spacing (parent headers) */
.lera-station-header, .lebari-station-header, .anne-station-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}

/* ========== STATION LOCK ========== */
.station-lock-btn {
  background: rgba(255,59,48,0.08) !important;
  color: #c4302b !important;
  border: 1px solid rgba(255,59,48,0.22) !important;
}
.station-lock-btn.unlocked {
  background: rgba(52,199,89,0.12) !important;
  color: #0a8c3e !important;
  border: 1px solid rgba(52,199,89,0.3) !important;
}

/* ========== WORKOUT MINI RINGS & CLEANER WEEK ========== */
.fitness-rings-row.fitness-rings-mini {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.fitness-rings-row.fitness-rings-mini .fitness-ring-card {
  padding: 12px 8px;
  border-radius: 16px;
}
.fitness-rings-row.fitness-rings-mini .fitness-ring-svg {
  width: 60px !important;
  height: 60px !important;
  margin-bottom: 6px;
}
.fitness-rings-row.fitness-rings-mini .fitness-ring-count {
  font-size: 18px;
}
.fitness-rings-row.fitness-rings-mini .fitness-ring-label {
  font-size: 9px;
  margin-bottom: 6px;
}

/* ========== MEAL PLANNER POLISH ========== */
.meal-grid {
  gap: 10px;
}
.meal-card {
  border-radius: 16px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  transition: transform 0.15s, box-shadow 0.15s;
}
.meal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}
.meal-today-spotlight {
  border-radius: 18px !important;
  border: 1px solid rgba(94,92,230,0.15) !important;
}

/* ========== LOGIN / PROFILE PICKER ========== */
.login-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.25s ease;
}
.login-card {
  background: #fff;
  border-radius: 24px;
  padding: 28px 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.login-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 4px;
  text-align: center;
  letter-spacing: -0.3px;
}
.login-sub { color: var(--text-light, #6b7280); text-align: center; margin: 0 0 20px; font-size: 13px; }
.login-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.login-avatar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  background: #f8fafc;
  border: 2px solid transparent;
  border-radius: 18px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.login-avatar-btn:hover {
  border-color: #5e5ce6;
  background: #eef2ff;
  transform: translateY(-2px);
}
.login-avatar { font-size: 44px; line-height: 1; }
.login-name { font-weight: 800; font-size: 14px; color: #1e293b; }
.login-badge { font-size: 10px; color: var(--text-light,#6b7280); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.who-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #1f2937);
  cursor: pointer;
  transition: background 0.15s;
}
.who-badge:hover { background: rgba(0,0,0,0.08); }
.who-badge-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
}
.pending-votes { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pending-vote-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f6f3ef;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.pending-vote-chip.yes { background: rgba(52,199,89,0.15); color: #1a7431; }
.pending-vote-chip.no { background: rgba(255,59,48,0.12); color: #a1261d; }
.pending-actions { display: flex; gap: 6px; flex-shrink: 0; }
.vote-btn {
  border: none; border-radius: 999px;
  width: 38px; height: 38px;
  font-size: 18px; cursor: pointer;
  background: #f6f3ef;
  transition: all 0.15s ease;
}
.vote-btn:hover { transform: scale(1.1); }
.vote-btn.yes { background: rgba(52,199,89,0.15); color: #1a7431; }
.vote-btn.no { background: rgba(255,59,48,0.12); color: #a1261d; }

/* Mood picker modal */
.mood-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 0; }
.mood-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 8px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: #fff;
  font-size: 32px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.mood-opt:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 6px 18px rgba(94,92,230,0.15); }
.mood-opt span { font-size: 11px; font-weight: 700; color: var(--text-secondary); }

/* Confetti canvas overlay */
.confetti-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  display: none;
}
.confetti-canvas.active { display: block; }

/* Toast for point awards */
.points-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 12px 22px;
  background: var(--brand-ink);
  color: var(--brand-cream); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(246,241,232,0.1);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(26,26,26,0.3);
  z-index: 9998;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s;
  pointer-events: none;
}
.points-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* Mobile adjustments for family header */
@media (max-width: 640px) {
  .family-header {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    border-radius: 18px;
    margin-bottom: 14px;
    gap: 10px;
  }
  .fh-greeting { font-size: 17px; }
  .fh-subtitle { font-size: 12px; }
  .fh-right { justify-content: space-between; gap: 10px; }
  .fh-progress { width: 64px; height: 64px; }
  .fh-ring-pct { font-size: 15px; }
  .fh-ring-label { font-size: 8px; }
  .fh-avatar { width: 42px; height: 42px; font-size: 20px; }
  .fh-points-pill { padding: 10px 14px !important; }
  .fh-points-value { font-size: 20px !important; }

  .rewards-hero { flex-direction: column; align-items: stretch; padding: 16px; }
  .rewards-hero-value { font-size: 30px; }
  .rewards-hero-right {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    justify-content: stretch !important;
    width: 100%;
  }
  .rewards-leader { min-width: 0; padding: 8px 10px; }
  .rewards-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .reward-card { padding: 16px 14px; border-radius: 16px; }
  .reward-card .reward-name { font-size: 17px; }
  .reward-emoji { font-size: 32px; }
  .section-header { flex-wrap: wrap; gap: 8px; }
  .section-title { font-size: 20px; }
}
@media (max-width: 380px) {
  .rewards-grid { grid-template-columns: 1fr; }
}

/* ============ PROPOSE MODAL & VOTE ROWS (v21.1) ============ */
.propose-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.propose-picker-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
}
.propose-picker-btn:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(94,92,230,0.15);
}
.propose-avatar { font-size: 34px; line-height: 1; }
.propose-name { font-size: 13px; font-weight: 700; color: var(--text); }

/* Expanded pending cards with clear vote rows */
.pending-card-expanded { display: block; padding: 16px 18px; }
.pending-card-expanded .pc-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.pending-card-expanded .pc-main { flex: 1; min-width: 0; }

.vote-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vote-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #faf8f4;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.vote-row-avatar { font-size: 26px; line-height: 1; }
.vote-row-name { flex: 1; font-weight: 700; font-size: 14px; color: var(--text); }
.vote-row-status { font-size: 16px; }
.vote-row-btns { display: flex; gap: 6px; }
.vote-row .vote-btn { width: 40px; height: 40px; font-size: 20px; }
.vote-btn.voted {
  box-shadow: 0 0 0 3px rgba(94,92,230,0.25);
  transform: scale(1.05);
}
.vote-btn.yes.voted { box-shadow: 0 0 0 3px rgba(52,199,89,0.35); }
.vote-btn.no.voted { box-shadow: 0 0 0 3px rgba(255,59,48,0.35); }

@media (max-width: 640px) {
  .propose-picker { grid-template-columns: repeat(2, 1fr); }
  .vote-row { padding: 6px 10px; }
  .vote-row-avatar { font-size: 22px; }
  .vote-row .vote-btn { width: 36px; height: 36px; font-size: 18px; }
}

/* ============ REWARD CARD CLEANUP (v22) ============ */
.reward-card { position: relative; }
.reward-card-menu {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  gap: 4px;
  opacity: 1;
  transition: opacity 0.2s ease;
  z-index: 3;
}
.reward-menu-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: var(--text-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: all 0.15s ease;
}
.reward-menu-btn:hover {
  background: #fff;
  color: var(--text);
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Full-width redeem button replaces old actions row */
.reward-card .reward-redeem-btn {
  width: 100%;
  margin-top: auto;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
/* Hide old .reward-actions wrapper if any legacy renders */
.reward-card .reward-actions { display: none; }

/* ========== PLANS UNIFIED HEADER (v24) ========== */
.plans-sub .plans-header {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  box-shadow: 0 8px 24px rgba(26,26,26,0.04);
  margin-bottom: 4px;
}
.plans-sub .plans-header .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}
.plans-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--brand-cream);
  padding: 5px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
}
.plans-tab {
  flex: 1 1 auto;
  min-width: 110px;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-ink);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.18s ease;
}
.plans-tab:hover {
  color: var(--brand-cognac);
}
.plans-tab.active {
  background: var(--brand-ink);
  color: var(--brand-cream);
  box-shadow: 0 4px 12px rgba(26,26,26,0.18);
}
@media (max-width: 640px) {
  .plans-sub .plans-header { padding: 16px 14px; }
  .plans-sub .plans-header .section-title { font-size: 22px; }
  .plans-tab { min-width: 0; padding: 8px 10px; font-size: 12px; }
}

/* ========== LEBARI BABY CARE STATION (v25) ========== */
.lebari-station {
  margin-top: 24px;
  padding: 24px 26px;
  border-radius: 22px;
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  box-shadow: 0 8px 24px rgba(26,26,26,0.04);
  border-top: 3px solid var(--brand-emerald);
}
.lebari-station-header { margin-bottom: 14px; }
.lebari-station-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}
.lebari-station-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--brand-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.lebari-care-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.lebari-care-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  background: var(--brand-paper);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
}
.lebari-care-btn:hover {
  transform: translateY(-2px);
  border-color: var(--brand-emerald);
  box-shadow: 0 8px 18px rgba(48,90,71,0.12);
}
.lebari-care-btn.done {
  background: var(--brand-emerald);
  border-color: var(--brand-emerald);
  color: var(--brand-cream);
}
.lebari-care-btn.done::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-cream);
}
.lebari-care-emoji { font-size: 26px; }
.lebari-care-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-ink);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lebari-care-btn.done .lebari-care-label { color: var(--brand-cream); }
.lebari-care-pts {
  font-size: 9px;
  font-weight: 600;
  color: var(--brand-cognac);
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lebari-care-btn.done .lebari-care-pts {
  background: rgba(246,241,232,0.18);
  border-color: rgba(246,241,232,0.25);
  color: var(--brand-cream);
}
.lebari-week-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(34,197,94,0.12);
}

/* Lera today quick-check grid — purple theme */
.lera-care-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
  padding: 22px 28px 0 !important;
}
@media (max-width: 640px) {
  .lera-care-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 8px;
    padding: 14px 16px 0 !important;
  }
  .lera-care-btn { padding: 14px 8px !important; border-radius: 12px; }
  .lera-care-btn .lera-care-icon { font-size: 26px; }
  .lera-care-btn .lera-care-label { font-size: 11px; letter-spacing: 0.08em; }
}
.lera-care-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, filter 0.2s;
  font-family: var(--font-body);
  border: 1px solid rgba(246,241,232,0.12);
  color: var(--brand-cream);
  overflow: hidden;
}
/* Cornerstone fills per slot */
.lera-care-btn:nth-child(4n+1) { background: linear-gradient(150deg, #d4762e, var(--brand-cognac) 60%, #7a3c10); }
.lera-care-btn:nth-child(4n+2) { background: linear-gradient(150deg, #2e5a44, var(--brand-emerald) 60%, #132a1e); }
.lera-care-btn:nth-child(4n+3) { background: linear-gradient(150deg, #2a4268, var(--brand-navy) 60%, #0f1826); }
.lera-care-btn:nth-child(4n+4) { background: linear-gradient(150deg, #7a2a30, var(--brand-burgundy) 60%, #2e1015); }
.lera-care-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(260px 100px at 100% -10%, rgba(246,241,232,0.16), transparent 60%);
  pointer-events: none;
}
.lera-care-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(15,22,38,0.28); }
/* Done = desaturated with checkmark overlay */
.lera-care-btn.done { filter: saturate(0.35) brightness(0.72); }
.lera-care-btn.done::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-cream);
  opacity: 0.9;
}
.lera-care-emoji { font-size: 28px; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.28)); position: relative; z-index: 1; }
.lera-care-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-cream);
  text-align: center;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  position: relative; z-index: 1;
}
.lera-care-pts {
  font-size: 9px;
  font-weight: 700;
  color: var(--brand-cream);
  background: rgba(246,241,232,0.18);
  border: 1px solid rgba(246,241,232,0.28);
  padding: 2px 9px;
  border-radius: 999px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative; z-index: 1;
}
.lebari-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #166534;
}
.lebari-week-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.lebari-week-table th {
  padding: 6px 4px;
  font-weight: 700;
  color: #166534;
  text-align: center;
}
.lebari-week-table th.today-col { color: #16a34a; }
.lebari-week-table td {
  padding: 4px;
  text-align: center;
}
.lebari-task-name-cell {
  font-weight: 600;
  color: #14532d;
  text-align: left;
  white-space: nowrap;
  padding-right: 10px;
}
.lebari-week-cell {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid rgba(34,197,94,0.25);
  background: #f0fdf4;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  color: transparent;
  transition: all 0.15s ease;
}
.lebari-week-cell:hover { background: #dcfce7; }
.lebari-week-cell.checked {
  background: var(--brand-emerald);
  border-color: var(--brand-emerald);
  color: var(--brand-cream);
}
.lebari-week-cell.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ========== ANNE'S DAILY STATION (v26) ========== */
.anne-station {
  margin-top: 10px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15,22,38,0.22);
}
.anne-station-hero {
  padding: 28px 28px 22px;
  background: linear-gradient(135deg, #36131a 0%, var(--brand-burgundy) 50%, #1d2e4a 100%);
  position: relative;
  overflow: hidden;
}
.anne-station-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(420px 180px at 95% -20%, rgba(195,106,45,0.25), transparent 65%),
    radial-gradient(380px 160px at -5% 110%, rgba(29,46,74,0.5), transparent 55%);
  pointer-events: none;
}
.anne-station-hero::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #c9595f, var(--brand-burgundy));
}
.anne-station-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  gap: 12px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.anne-station-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--brand-cream);
}
.anne-station-subtitle {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--brand-cognac);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-weight: 700;
  position: relative; z-index: 1;
}
.anne-station-body {
  padding: 22px 28px 28px;
  background: var(--brand-cream);
}
.anne-manage-btn {
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.anne-care-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.anne-care-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, filter 0.2s;
  font-family: var(--font-body);
  border: 1px solid rgba(246,241,232,0.12);
  color: var(--brand-cream);
  overflow: hidden;
}
.anne-care-btn:nth-child(4n+1) { background: linear-gradient(150deg, #7a2a30, var(--brand-burgundy) 60%, #2e1015); }
.anne-care-btn:nth-child(4n+2) { background: linear-gradient(150deg, #d4762e, var(--brand-cognac) 60%, #7a3c10); }
.anne-care-btn:nth-child(4n+3) { background: linear-gradient(150deg, #2a4268, var(--brand-navy) 60%, #0f1826); }
.anne-care-btn:nth-child(4n+4) { background: linear-gradient(150deg, #2e5a44, var(--brand-emerald) 60%, #132a1e); }
.anne-care-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(260px 100px at 100% -10%, rgba(246,241,232,0.16), transparent 60%);
  pointer-events: none;
}
.anne-care-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(15,22,38,0.28); }
.anne-care-btn.done { filter: saturate(0.35) brightness(0.72); }
.anne-care-btn.done::after {
  content: '✓';
  position: absolute; top: 8px; right: 10px;
  font-size: 13px; font-weight: 800; color: var(--brand-cream); opacity: 0.9;
}
.anne-care-emoji { font-size: 28px; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.28)); position: relative; z-index: 1; }
.anne-care-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-cream);
  text-align: center;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  position: relative; z-index: 1;
}
.anne-care-pts {
  font-size: 9px; font-weight: 700;
  color: var(--brand-cream);
  background: rgba(246,241,232,0.18);
  border: 1px solid rgba(246,241,232,0.28);
  padding: 2px 9px; border-radius: 999px;
  letter-spacing: 0.16em; text-transform: uppercase;
  position: relative; z-index: 1;
}
.anne-week-card {
  background: var(--brand-paper);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--brand-line);
  overflow-x: auto;
  margin-top: 8px;
}
.anne-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-burgundy);
}
.anne-week-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.anne-week-table th {
  padding: 6px 4px;
  font-weight: 700;
  color: var(--brand-burgundy);
  text-align: center;
}
.anne-week-table th.today-col { color: var(--brand-cognac); }
.anne-week-table td { padding: 4px; text-align: center; }
.anne-task-name-cell {
  font-weight: 600;
  color: var(--brand-navy);
  text-align: left;
  white-space: nowrap;
  padding-right: 10px;
}
.anne-week-cell {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid rgba(236, 72, 153, 0.25);
  background: #fdf2f8;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  color: transparent;
  transition: all 0.15s ease;
}
.anne-week-cell:hover { background: #fce7f3; }
.anne-week-cell.checked {
  background: var(--brand-burgundy);
  border-color: var(--brand-burgundy);
  color: var(--brand-cream);
}
.anne-week-cell.disabled { opacity: 0.35; cursor: not-allowed; }
.anne-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.anne-stat-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  border: 1px solid rgba(236, 72, 153, 0.12);
}
.anne-stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.5px;
}
.anne-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--brand-cognac);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 4px;
}

/* Manage Tasks modal rows */
.manage-task-row {
  display: grid;
  grid-template-columns: 46px 1fr 72px 34px;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border, #eee);
}
.manage-task-row input {
  padding: 8px 10px;
  border: 1px solid var(--border, #ddd);
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  font-family: inherit;
}
.manage-task-row .mt-emoji { text-align: center; font-size: 18px; }
.manage-task-row .mt-del {
  width: 30px; height: 30px;
  border: 0;
  background: #fee2e2;
  color: #dc2626;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
}
.manage-task-row .mt-del:hover { background: #fecaca; }

/* ========== PLANS MOBILE OPTIMIZATION (v26) ========== */
@media (max-width: 640px) {
  .plans-sub .plans-header {
    padding: 14px 12px;
    gap: 10px;
    border-radius: 16px;
  }
  .plans-sub .plans-header .section-title {
    font-size: 18px;
    letter-spacing: -0.3px;
  }
  .plans-tabs {
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .plans-tabs::-webkit-scrollbar { display: none; }
  .plans-tab {
    flex: 0 0 auto;
    min-width: 0;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
    border-radius: 8px;
  }
  .plans-tab.active {
    box-shadow: 0 1px 6px rgba(180, 83, 9, 0.18);
  }
  /* Tighter section header under the tabs */
  .plans-sub .section-header {
    margin-top: 14px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .plans-sub .section-header h2 {
    font-size: 17px !important;
  }
  .plans-sub .section-header .btn-primary {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ========== LERA WISDOM BLOCK IN GOALS (v29) ========== */
.lera-wisdom-block {
  margin-top: 24px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #faf5ff, #ede9fe);
  border: 1px solid rgba(139, 92, 246, 0.18);
}
.lera-wisdom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}
.lera-wisdom-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
}

/* ========== REDEMPTION ROLE PILLS (v57) ========== */
.vote-role-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: 999px;
  border: 1px solid var(--brand-line);
  background: var(--brand-cream);
  color: var(--brand-cognac);
  vertical-align: middle;
}
.vote-role-pill.proposer { background: var(--brand-cognac); color: var(--brand-cream); border-color: var(--brand-cognac); }
.vote-role-pill.admin    { background: var(--brand-ink); color: var(--brand-cream); border-color: var(--brand-ink); }
.vote-role-pill.support  { background: var(--brand-paper); color: var(--brand-ink); }

.vote-you-tag {
  font-size: 9px;
  color: var(--brand-cognac);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-left: 4px;
}

.propose-picker-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  background: var(--brand-paper);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-body);
  margin-bottom: 8px;
}
.propose-picker-btn:hover:not(:disabled) {
  border-color: var(--brand-cognac);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(26,26,26,0.08);
}
.propose-picker-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.propose-picker-btn .propose-avatar { font-size: 24px; }
.propose-picker-btn .propose-name {
  flex: 1;
  text-align: left;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--brand-ink);
}
.propose-picker-btn .propose-balance {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-cognac);
  background: var(--brand-cream);
  border: 1px solid var(--brand-line);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ========== LERA SCHOOL CARD ========== */
.lera-school-card {
  background: var(--brand-cream);
  border-radius: 14px;
  padding: 16px 18px 14px;
  margin: 16px 28px 18px;
  border: 1px solid var(--brand-line);
  border-left: 4px solid var(--brand-cognac);
  box-shadow: 0 6px 20px rgba(15,22,38,0.05);
}
@media (max-width: 640px) {
  .lera-school-card { margin: 12px 14px 16px; padding: 14px 14px 12px; }
}
.lera-school-card .school-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.lera-school-card .school-header h3 {
  margin: 0; font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 18px; color: var(--brand-navy);
}
.lera-school-card .school-header button {
  background: var(--brand-cognac); color: var(--brand-cream);
  border: none; border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.lera-school-card .school-header button:hover { filter: brightness(1.08); }
.school-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(29,46,74,0.08);
  padding-bottom: 8px;
}
.school-tabs button {
  background: transparent; border: 1px solid rgba(29,46,74,0.12);
  color: var(--brand-navy); padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.school-tabs button.active {
  background: var(--brand-navy); color: var(--brand-cream);
  border-color: var(--brand-navy);
}
.school-list { display: flex; flex-direction: column; gap: 8px; }
.school-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid var(--brand-line);
  border-left: 3px solid var(--brand-cognac);
  border-radius: 10px; padding: 10px 12px;
}
.school-item.done { opacity: 0.6; }
.school-item.done .school-title { text-decoration: line-through; }
.school-item-main { flex: 1; min-width: 0; }
.school-title {
  font-weight: 600; font-size: 14px; color: var(--brand-navy);
  line-height: 1.3;
}
.school-meta {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; font-size: 12px; color: var(--text-light, #6b6b6b);
}
.school-countdown, .school-countdown-lg {
  color: var(--brand-emerald); font-weight: 600;
}
.school-countdown.overdue, .school-countdown-lg.overdue { color: #dc2626; }
.school-countdown-lg { font-size: 13px; white-space: nowrap; }
.school-notes {
  font-size: 12px; color: var(--text-light, #6b6b6b);
  margin-top: 4px; line-height: 1.35;
}
.school-item-actions { display: flex; align-items: center; gap: 6px; }
.school-check {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--brand-cognac); background: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--brand-cream); padding: 0;
}
.school-check.done { background: var(--brand-emerald); border-color: var(--brand-emerald); }
.school-check.done svg { width: 14px; height: 14px; }


/* ===== How to Earn Points ===== */
.earn-points-card { background: var(--brand-navy); color: var(--brand-cream); border-radius: 16px; padding: 14px 18px; margin: 14px 0; border-left: 4px solid var(--brand-cognac); box-shadow: 0 8px 20px rgba(15,22,38,0.18); }
.earn-points-card summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-family: 'Fraunces', serif; }
.earn-points-card summary::-webkit-details-marker { display: none; }
.earn-points-title { font-size: 18px; font-weight: 600; }
.earn-points-hint { font-size: 12px; opacity: 0.7; }
.earn-points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; }
.earn-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(246,241,232,0.06); border-radius: 10px; border-left: 3px solid var(--brand-cognac); }
.earn-row .earn-icon { font-size: 20px; }
.earn-row b { display: block; font-size: 13px; font-weight: 600; color: var(--brand-cream); }
.earn-row span:not(.earn-icon) { font-size: 11px; opacity: 0.75; color: var(--brand-cream); }

/* ===== Announcement Comments & Polls ===== */
.home-ann-card { flex-direction: column; align-items: stretch !important; }
.home-ann-main { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.home-ann-actions-row { display: flex; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(29,46,74,0.1); }
.home-ann-action-btn { background: transparent; border: none; color: var(--brand-navy); font-size: 12px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.home-ann-action-btn:hover { background: rgba(29,46,74,0.08); }
.home-ann-comments { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(29,46,74,0.1); display: none; }
.home-ann-comments.open { display: block; }
.home-ann-comment { padding: 6px 10px; background: rgba(29,46,74,0.05); border-radius: 8px; margin-bottom: 6px; font-size: 13px; border-left: 3px solid var(--brand-cognac); }
.home-ann-comment-author { font-weight: 600; color: var(--brand-navy); font-size: 11px; margin-right: 6px; }
.home-ann-comment-time { font-size: 10px; opacity: 0.6; }
.home-ann-comment-del { float: right; background: transparent; border: none; color: var(--brand-burgundy); cursor: pointer; font-size: 11px; }
.home-ann-comment-input { display: flex; gap: 6px; margin-top: 6px; }
.home-ann-comment-input input { flex: 1; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(29,46,74,0.2); font-size: 13px; }
.home-ann-comment-input button { padding: 6px 12px; border-radius: 8px; background: var(--brand-cognac); color: var(--brand-cream); border: none; cursor: pointer; font-size: 12px; }
.home-ann-poll { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(29,46,74,0.1); }
.home-ann-poll-q { font-weight: 600; color: var(--brand-navy); margin-bottom: 8px; font-size: 13px; }
.home-ann-poll-opt { position: relative; display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; background: rgba(29,46,74,0.05); border: 1px solid rgba(29,46,74,0.1); margin-bottom: 5px; cursor: pointer; font-size: 12px; overflow: hidden; }
.home-ann-poll-opt:hover { background: rgba(29,46,74,0.1); }
.home-ann-poll-opt.voted { border-color: var(--brand-cognac); }
.home-ann-poll-bar { position: absolute; top: 0; left: 0; bottom: 0; background: rgba(195,106,45,0.18); transition: width 0.3s; z-index: 0; }
.home-ann-poll-opt > span { position: relative; z-index: 1; }
.home-ann-poll-count { float: right; font-weight: 600; color: var(--brand-cognac); }

/* ===== Meal Planner Tabs ===== */
.meals-tabs { display: inline-flex; gap: 4px; padding: 4px; background: rgba(29,46,74,0.06); border: 1px solid rgba(29,46,74,0.12); border-radius: 12px; margin: 0 0 16px; }
.meals-tab { background: transparent; border: none; color: var(--brand-navy); padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: 9px; cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.15s; }
.meals-tab:hover { background: rgba(29,46,74,0.08); }
.meals-tab.active { background: var(--brand-navy); color: var(--brand-cream); }

/* ===== Recipe Library ===== */
.recipes-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.recipes-toolbar input { flex: 1; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(29,46,74,0.15); font-size: 14px; background: var(--brand-paper); }
.recipe-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.recipe-card { background: var(--brand-navy); color: var(--brand-cream); border-radius: 16px; padding: 16px 18px; border-left: 4px solid var(--brand-cognac); box-shadow: 0 8px 20px rgba(15,22,38,0.2); display: flex; flex-direction: column; gap: 8px; transition: transform 0.15s, box-shadow 0.2s; }
.recipe-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,22,38,0.28); }
.recipe-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.recipe-card-title { margin: 0; font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600; color: var(--brand-cream); line-height: 1.25; flex: 1; }
.recipe-card-actions { display: flex; gap: 2px; flex-shrink: 0; }
.recipe-card-actions .btn-icon { background: rgba(246,241,232,0.1); border: none; color: var(--brand-cream); width: 26px; height: 26px; border-radius: 7px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.recipe-card-actions .btn-icon:hover:not([disabled]) { background: var(--brand-cognac); }
.recipe-card-actions .btn-icon[disabled] { opacity: 0.3; cursor: not-allowed; }
.recipe-card-meta { font-size: 11px; opacity: 0.75; }
.recipe-card-ing { font-size: 12px; color: var(--brand-cognac); font-weight: 600; }
.recipe-card-excerpt { margin: 4px 0 0; font-size: 12px; opacity: 0.8; line-height: 1.45; }
.recipe-card-view { margin-top: auto; background: var(--brand-cognac); color: var(--brand-cream); border: none; border-radius: 9px; padding: 8px 12px; font-size: 12px; font-weight: 600; cursor: pointer; align-self: flex-start; }
.recipe-card-view:hover { background: #a85820; }
@media (max-width: 640px) {
  .recipe-library-grid { grid-template-columns: 1fr; }
  .recipe-card { padding: 14px 16px; }
  .recipe-card-title { font-size: 16px; }
}

/* ===== Today card meal plan (tighter & responsive) ===== */
.meal-today-spotlight .meal-hero { padding: 18px 22px 20px !important; }
@media (max-width: 900px) {
  .meal-today-spotlight .meal-hero { padding: 14px 16px 16px !important; }
  .meal-today-spotlight .meal-hero-date { font-size: 22px !important; line-height: 1.15 !important; }
  .meal-today-spotlight .meal-hero-slots { gap: 8px !important; }
  .meal-today-spotlight .meal-hero-slot { padding: 10px 12px !important; }
  .meal-today-spotlight .meal-hero-slot-name { font-size: 14px !important; }
}
@media (max-width: 640px) {
  .meal-today-spotlight .meal-hero { padding: 12px 14px 14px !important; }
  .meal-today-spotlight .meal-hero-date { font-size: 19px !important; }
  .meal-today-spotlight .meal-hero-slot { padding: 8px 10px !important; grid-template-columns: 70px 1fr auto !important; }
  .meal-today-spotlight .meal-hero-slot-type { font-size: 10px !important; }
}

/* ===== Debt progress ===== */
.debt-progress-wrap { padding: 10px 16px 14px; }
.debt-progress-bar { height: 8px; border-radius: 4px; background: rgba(90,30,35,0.12); overflow: hidden; }
.debt-progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand-emerald), #2a8765); border-radius: 4px; transition: width 0.5s; }
.debt-progress-label { font-size: 11px; color: var(--brand-navy); opacity: 0.75; margin-top: 6px; }
.debt-card { padding: 0 !important; overflow: hidden; }
.debt-head { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.debt-head-main { flex: 1; min-width: 0; }
.debt-creditor { font-weight: 700; font-size: 15px; color: var(--brand-navy); }
.debt-amounts { font-size: 13px; margin-top: 3px; }
.debt-remain { color: var(--brand-burgundy); font-weight: 700; }
.debt-of { opacity: 0.55; }
.debt-plan { margin-left: 8px; font-size: 11px; opacity: 0.7; background: rgba(29,46,74,0.08); padding: 2px 6px; border-radius: 5px; }
.debt-head-actions { display: flex; gap: 4px; flex-shrink: 0; }
.debt-history { padding: 10px 16px 14px; background: rgba(29,46,74,0.04); border-top: 1px solid rgba(29,46,74,0.08); }
.debt-history-title { font-weight: 600; font-size: 12px; color: var(--brand-navy); margin-bottom: 6px; }
.debt-history-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed rgba(29,46,74,0.08); }
.debt-history-row:last-child { border-bottom: none; }
.debt-history-empty { font-size: 12px; opacity: 0.55; padding: 6px 0; }

/* Plans sub-sections: ensure .section display is driven by .active only when inside plans flow */
#section-goals.section.active,
#section-vacations.section.active,
#section-activities.section.active,
#section-ideas.section.active,
#section-datenights.section.active { display: block !important; }

/* Goals cards — match ideas card compactness */
#section-goals .goal-card,
#section-goals .card-item.goal-card,
#goals-list .card-item.goal-card {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  gap: 10px !important;
  font-size: 13px !important;
}
#section-goals .goal-card .card-item-title,
#goals-list .goal-card .card-item-title { font-size: 14px !important; }

/* ========== v75 ROUND 4 FIXES ========== */

/* 1. Points chips only on home: hide family-header points chip everywhere (home uses its own hgh-pts-chip) */
.fh-points-chip { display: none !important; }

/* 2. Today meal card: widen to full width, remove white borders, tighten long text */
.meal-today-spotlight {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  width: 100% !important;
}
.meal-today-spotlight .meal-hero {
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 18px !important;
  box-sizing: border-box !important;
}
.meal-today-spotlight .meal-hero-slot-name,
.meal-today-spotlight .meal-hero-name {
  font-size: 14px !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
}
.meal-today-spotlight .meal-hero-slot { padding: 8px 10px !important; gap: 6px !important; }
.meal-today-spotlight .meal-hero-slot-label { font-size: 10px !important; letter-spacing: 0.5px !important; }
@media (max-width: 900px) {
  .meal-today-spotlight .meal-hero { padding: 12px 14px !important; }
  .meal-today-spotlight .meal-hero-slot-name,
  .meal-today-spotlight .meal-hero-name { font-size: 13px !important; }
}

/* 3. Debt owner chip */
.debt-owner-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: rgba(195,106,45,0.14);
  color: var(--brand-cognac);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

/* 4. Recipe card redesign — warm cream card with cognac accents */
.recipe-library-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 16px !important; }
.recipe-card {
  background: linear-gradient(180deg, #fefcf8 0%, var(--brand-paper) 100%) !important;
  color: var(--brand-ink) !important;
  border: 1px solid rgba(29,46,74,0.08) !important;
  border-left: none !important;
  border-radius: 18px !important;
  padding: 0 !important;
  box-shadow: 0 4px 14px rgba(29,46,74,0.08) !important;
  overflow: hidden !important;
  position: relative !important;
}
.recipe-card::before {
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--brand-cognac), #d98a4a);
}
.recipe-card > * { padding-left: 18px; padding-right: 18px; }
.recipe-card-head { padding-top: 16px !important; padding-bottom: 6px !important; }
.recipe-card-title {
  color: var(--brand-navy) !important;
  font-family: 'Fraunces', serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
.recipe-card-actions .btn-icon {
  background: rgba(29,46,74,0.06) !important;
  color: var(--brand-navy) !important;
}
.recipe-card-actions .btn-icon:hover:not([disabled]) {
  background: var(--brand-cognac) !important;
  color: var(--brand-cream) !important;
}
.recipe-card-meta {
  color: var(--brand-navy) !important;
  opacity: 0.55 !important;
  font-size: 11px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  padding-top: 0 !important;
  padding-bottom: 2px !important;
}
.recipe-card-ing {
  color: var(--brand-cognac) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding-bottom: 2px !important;
}
.recipe-card-excerpt {
  color: var(--brand-ink) !important;
  opacity: 0.72 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  padding-bottom: 14px !important;
}
.recipe-card-view {
  background: var(--brand-navy) !important;
  color: var(--brand-cream) !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  margin: 0 18px 16px !important;
  align-self: flex-start !important;
  transition: background 0.15s !important;
}
.recipe-card-view:hover { background: var(--brand-cognac) !important; }

/* 5. Goals — responsive grid with color variety like ideas */
#goals-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 14px !important;
  flex-direction: unset !important;
}
@media (max-width: 640px) {
  #goals-list { grid-template-columns: 1fr !important; }
}
#section-goals .goal-card,
#section-goals .card-item.goal-card,
#goals-list .card-item.goal-card {
  color: var(--brand-cream) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 6px 18px rgba(15,22,38,0.2) !important;
  min-height: 0 !important;
}
#section-goals .goal-card .card-item-title,
#section-goals .goal-card .goal-title,
#goals-list .goal-card .card-item-title {
  color: var(--brand-cream) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
#section-goals .goal-card .card-item-meta,
#section-goals .goal-card .goal-meta,
#section-goals .goal-card .card-item-sub {
  color: rgba(246,241,232,0.78) !important;
  font-size: 11px !important;
}
#section-goals .goal-card .progress-bar,
#section-goals .goal-card .goal-progress { height: 5px !important; border-radius: 3px !important; background: rgba(246,241,232,0.22) !important; }
#section-goals .goal-card .progress-fill,
#section-goals .goal-card .goal-progress-fill { background: var(--brand-cream) !important; opacity: 0.95 !important; }
#section-goals .goal-card .btn,
#section-goals .goal-card .btn-icon { font-size: 11px !important; padding: 4px 8px !important; }

/* Family Goals header chrome — keep emerald gradient but compact */
#plans-goals-panel .section-header { padding: 18px 24px !important; margin-top: 14px !important; border-radius: 18px !important; }
#plans-goals-panel .section-header .btn-primary {
  background: var(--brand-cognac) !important;
  color: var(--brand-cream) !important;
  border: none !important;
}

/* 6. Debt cards — responsive grid with warm color */
#debt-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 14px !important;
}
@media (max-width: 640px) { #debt-list { grid-template-columns: 1fr !important; } }
.debt-card {
  background: linear-gradient(160deg, #7a2a30 0%, var(--brand-burgundy) 55%, #36131a 100%) !important;
  color: var(--brand-cream) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  box-shadow: 0 8px 22px rgba(90,30,35,0.22) !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}
.debt-card:nth-child(4n+1) { background: linear-gradient(160deg, #7a2a30 0%, var(--brand-burgundy) 55%, #36131a 100%) !important; }
.debt-card:nth-child(4n+2) { background: linear-gradient(160deg, #d4762e 0%, var(--brand-cognac) 55%, #8a4a1f 100%) !important; }
.debt-card:nth-child(4n+3) { background: linear-gradient(160deg, #2a4268 0%, var(--brand-navy) 55%, #0f1626 100%) !important; }
.debt-card:nth-child(4n+4) { background: linear-gradient(160deg, #2e5a44 0%, var(--brand-emerald) 55%, #152e22 100%) !important; }
.debt-card .debt-creditor { color: var(--brand-cream) !important; font-family: 'Fraunces', serif !important; font-size: 17px !important; font-weight: 600 !important; }
.debt-card .debt-owner-chip {
  background: rgba(246,241,232,0.18) !important;
  color: var(--brand-cream) !important;
}
.debt-card .debt-remain { color: var(--brand-cream) !important; font-size: 20px !important; font-weight: 700 !important; }
.debt-card .debt-of, .debt-card .debt-plan { color: rgba(246,241,232,0.72) !important; }
.debt-card .debt-progress-bar { background: rgba(246,241,232,0.2) !important; }
.debt-card .debt-progress-fill { background: var(--brand-cream) !important; opacity: 0.95 !important; }
.debt-card .debt-progress-label { color: rgba(246,241,232,0.78) !important; }
.debt-card .btn-icon { background: rgba(246,241,232,0.14) !important; color: var(--brand-cream) !important; }
.debt-card .btn-icon:hover { background: rgba(246,241,232,0.28) !important; }
.debt-card .btn.btn-primary { background: rgba(246,241,232,0.94) !important; color: var(--brand-ink) !important; }
.debt-card .debt-history { background: rgba(0,0,0,0.18) !important; border-radius: 10px !important; padding: 10px 12px !important; margin-top: 10px !important; }
.debt-card .debt-history-title { color: var(--brand-cream) !important; opacity: 0.9 !important; }
.debt-card .debt-history-row { color: rgba(246,241,232,0.9) !important; }

/* 7. Hide global family-header everywhere (home has its own hgh) */
.family-header { display: none !important; }

/* 8. Recipe cards — warm cognac-emerald color variety */
.recipe-card { color: var(--brand-cream) !important; border: none !important; }
.recipe-card::before { display: none !important; }
.recipe-card:nth-child(4n+1) { background: linear-gradient(160deg, #d4762e 0%, var(--brand-cognac) 55%, #8a4a1f 100%) !important; }
.recipe-card:nth-child(4n+2) { background: linear-gradient(160deg, #2e5a44 0%, var(--brand-emerald) 55%, #152e22 100%) !important; }
.recipe-card:nth-child(4n+3) { background: linear-gradient(160deg, #2a4268 0%, var(--brand-navy) 55%, #0f1626 100%) !important; }
.recipe-card:nth-child(4n+4) { background: linear-gradient(160deg, #7a2a30 0%, var(--brand-burgundy) 55%, #36131a 100%) !important; }
.recipe-card > * { padding-left: 18px !important; padding-right: 18px !important; }
.recipe-card-head { padding-top: 16px !important; padding-bottom: 4px !important; }
.recipe-card-title { color: var(--brand-cream) !important; }
.recipe-card-meta { color: rgba(246,241,232,0.7) !important; opacity: 1 !important; }
.recipe-card-ing { color: rgba(246,241,232,0.88) !important; }
.recipe-card-excerpt { color: rgba(246,241,232,0.82) !important; opacity: 1 !important; }
.recipe-card-actions .btn-icon { background: rgba(246,241,232,0.14) !important; color: var(--brand-cream) !important; }
.recipe-card-actions .btn-icon:hover:not([disabled]) { background: rgba(246,241,232,0.28) !important; color: var(--brand-cream) !important; }
.recipe-card-view { background: rgba(246,241,232,0.94) !important; color: var(--brand-ink) !important; margin: 0 18px 16px !important; }
.recipe-card-view:hover { background: var(--brand-cream) !important; color: var(--brand-navy) !important; }

/* 9. Announcements/Polls tabs */
.home-ann-tabs { display: inline-flex; gap: 4px; background: rgba(29,46,74,0.06); border-radius: 999px; padding: 3px; }
.home-ann-tab { background: transparent; border: none; color: var(--brand-navy); font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; letter-spacing: 0.3px; }
.home-ann-tab.active { background: var(--brand-navy); color: var(--brand-cream); box-shadow: 0 2px 6px rgba(29,46,74,0.18); }
.home-poll-card { background: var(--brand-paper); border: 1px solid rgba(29,46,74,0.08); border-left: 4px solid var(--brand-cognac); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; }
.home-poll-head { margin-bottom: 10px; }
.home-poll-title { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 600; color: var(--brand-navy); line-height: 1.25; }
.home-poll-meta { font-size: 11px; color: var(--brand-ink); opacity: 0.6; margin-top: 2px; letter-spacing: 0.3px; }

/* 10. Lebari's Day — warm rose gradient like other stations */
#lebari-station .anne-day-hero,
#lebari-station .lera-hero,
#lebari-station .kid-hero,
#lebari-station .station-hero {
  background: linear-gradient(135deg, #f8d7c2 0%, #e8a17f 50%, var(--brand-cognac) 100%) !important;
  color: var(--brand-ink) !important;
  border-radius: 20px !important;
  padding: 22px 26px !important;
  position: relative !important;
  overflow: hidden !important;
}
#lebari-station .anne-day-hero *,
#lebari-station .lera-hero *,
#lebari-station .kid-hero *,
#lebari-station .station-hero * { color: var(--brand-ink) !important; }
#lebari-station .care-btn,
#lebari-station .lebari-care-btn {
  color: var(--brand-cream) !important;
  border: none !important;
}
#lebari-station .care-btn:nth-child(4n+1),
#lebari-station .lebari-care-btn:nth-child(4n+1) { background: linear-gradient(150deg, #d4762e, var(--brand-cognac) 60%, #8a4a1f) !important; }
#lebari-station .care-btn:nth-child(4n+2),
#lebari-station .lebari-care-btn:nth-child(4n+2) { background: linear-gradient(150deg, #2e5a44, var(--brand-emerald) 60%, #132a1e) !important; }
#lebari-station .care-btn:nth-child(4n+3),
#lebari-station .lebari-care-btn:nth-child(4n+3) { background: linear-gradient(150deg, #2a4268, var(--brand-navy) 60%, #0f1626) !important; }
#lebari-station .care-btn:nth-child(4n+4),
#lebari-station .lebari-care-btn:nth-child(4n+4) { background: linear-gradient(150deg, #7a2a30, var(--brand-burgundy) 60%, #36131a) !important; }
#lebari-station .care-btn .care-btn-label,
#lebari-station .care-btn .pts-pill,
#lebari-station .lebari-care-btn .care-btn-label,
#lebari-station .lebari-care-btn .pts-pill { color: var(--brand-cream) !important; }

/* 11. Workout weekly plan refresh */
#section-workouts .workout-plan-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  background: var(--brand-paper) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(29,46,74,0.08) !important;
  box-shadow: 0 4px 14px rgba(29,46,74,0.06) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}
#section-workouts .workout-plan-row:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(29,46,74,0.12) !important;
}
#section-workouts .workout-plan-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--brand-cognac);
}
#section-workouts .workout-plan-row:nth-child(7n+1)::before { background: var(--brand-cognac); }
#section-workouts .workout-plan-row:nth-child(7n+2)::before { background: var(--brand-emerald); }
#section-workouts .workout-plan-row:nth-child(7n+3)::before { background: var(--brand-navy); }
#section-workouts .workout-plan-row:nth-child(7n+4)::before { background: #d4762e; }
#section-workouts .workout-plan-row:nth-child(7n+5)::before { background: var(--brand-burgundy); }
#section-workouts .workout-plan-row:nth-child(7n+6)::before { background: #2e5a44; }
#section-workouts .workout-plan-row:nth-child(7n+7)::before { background: #2a4268; }
#section-workouts .workout-plan-row.today {
  background: linear-gradient(135deg, #fdf2e5 0%, var(--brand-paper) 60%) !important;
  border-color: var(--brand-cognac) !important;
  box-shadow: 0 6px 20px rgba(195,106,45,0.18) !important;
}
#section-workouts .workout-plan-day {
  min-width: 56px !important;
  text-align: center !important;
  font-family: 'Fraunces', serif !important;
  line-height: 1.1 !important;
  padding-left: 4px !important;
}
#section-workouts .workout-plan-day strong,
#section-workouts .workout-plan-day b,
#section-workouts .workout-plan-day > :first-child {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--brand-navy) !important;
  display: block !important;
}
#section-workouts .workout-plan-day > :last-child {
  font-size: 12px !important;
  color: var(--brand-navy) !important;
  opacity: 0.55 !important;
  font-weight: 500 !important;
}
#section-workouts .workout-plan-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: rgba(29,46,74,0.08) !important;
  color: var(--brand-navy) !important;
}
#section-workouts .workout-plan-row:nth-child(7n+1) .workout-plan-chip { background: rgba(195,106,45,0.14) !important; color: var(--brand-cognac) !important; }
#section-workouts .workout-plan-row:nth-child(7n+2) .workout-plan-chip { background: rgba(35,74,55,0.14) !important; color: var(--brand-emerald) !important; }
#section-workouts .workout-plan-row:nth-child(7n+3) .workout-plan-chip { background: rgba(29,46,74,0.10) !important; color: var(--brand-navy) !important; }
#section-workouts .workout-plan-row:nth-child(7n+4) .workout-plan-chip { background: rgba(212,118,46,0.16) !important; color: #9e5a23 !important; }
#section-workouts .workout-plan-row:nth-child(7n+5) .workout-plan-chip { background: rgba(90,30,35,0.14) !important; color: var(--brand-burgundy) !important; }
#section-workouts .workout-plan-row:nth-child(7n+6) .workout-plan-chip { background: rgba(46,90,68,0.16) !important; color: #2e5a44 !important; }
#section-workouts .workout-plan-row:nth-child(7n+7) .workout-plan-chip { background: rgba(42,66,104,0.14) !important; color: #2a4268 !important; }
#section-workouts .workout-plan-content { flex: 1 !important; }

/* ========== v78 ROUND 6 FIXES ========== */

/* 1. Goals Plans header — add emerald/navy gradient so cream title is visible */
#section-goals .plans-header {
  background: linear-gradient(135deg, #132a1e 0%, var(--brand-emerald) 50%, #2a4268 100%) !important;
}
#section-goals .plans-header .section-title { color: var(--brand-cream) !important; }
#section-goals .plans-header .plans-tab {
  color: rgba(246,241,232,0.78) !important;
  background: rgba(246,241,232,0.08) !important;
  border: 1px solid rgba(246,241,232,0.16) !important;
}
#section-goals .plans-header .plans-tab.active {
  background: rgba(246,241,232,0.96) !important;
  color: var(--brand-navy) !important;
  border-color: transparent !important;
}

/* 2. Lebari's Day — mirror Lera station design */
#lebari-station .station-hero.station-hero--lebari,
#lebari-station .station-hero--lebari {
  background: linear-gradient(135deg, #7a3c10 0%, var(--brand-cognac) 45%, #d4762e 100%) !important;
  color: var(--brand-cream) !important;
  border-radius: 22px !important;
  padding: 28px 30px !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
  box-shadow: 0 12px 32px rgba(195,106,45,0.28) !important;
}
#lebari-station .lebari-eyebrow,
#lebari-station .lebari-station-title,
#lebari-station .lebari-station-subtitle { color: var(--brand-cream) !important; }
#lebari-station .lebari-eyebrow { opacity: 0.85 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; font-size: 10px !important; font-weight: 700 !important; margin: 0 0 4px !important; }
#lebari-station .lebari-station-title { font-family: 'Fraunces', serif !important; font-size: 36px !important; font-weight: 600 !important; letter-spacing: -0.025em !important; margin: 0 !important; }
#lebari-station .lebari-station-subtitle { opacity: 0.85 !important; font-size: 13px !important; margin: 6px 0 0 !important; }

.lebari-care-btn {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 18px 12px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: transform 0.18s, box-shadow 0.18s, filter 0.2s !important;
  font-family: var(--font-body) !important;
  border: 1px solid rgba(246,241,232,0.12) !important;
  color: var(--brand-cream) !important;
  overflow: hidden !important;
  background: var(--brand-navy) !important;
}
.lebari-care-btn:nth-child(4n+1) { background: linear-gradient(150deg, #d4762e, var(--brand-cognac) 60%, #7a3c10) !important; }
.lebari-care-btn:nth-child(4n+2) { background: linear-gradient(150deg, #2e5a44, var(--brand-emerald) 60%, #132a1e) !important; }
.lebari-care-btn:nth-child(4n+3) { background: linear-gradient(150deg, #2a4268, var(--brand-navy) 60%, #0f1826) !important; }
.lebari-care-btn:nth-child(4n+4) { background: linear-gradient(150deg, #7a2a30, var(--brand-burgundy) 60%, #2e1015) !important; }
.lebari-care-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(260px 100px at 100% -10%, rgba(246,241,232,0.16), transparent 60%);
  pointer-events: none;
}
.lebari-care-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 16px 32px rgba(15,22,38,0.28) !important; }
.lebari-care-btn.done { filter: saturate(0.35) brightness(0.72) !important; background: var(--brand-navy) !important; border-color: rgba(246,241,232,0.12) !important; }
.lebari-care-btn.done::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-cream);
  opacity: 0.9;
}
.lebari-care-btn .lebari-care-emoji { font-size: 28px !important; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.28)) !important; position: relative !important; z-index: 1 !important; color: var(--brand-cream) !important; }
.lebari-care-btn .lebari-care-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--brand-cream) !important;
  text-align: center !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  position: relative !important;
  z-index: 1 !important;
}
.lebari-care-btn.done .lebari-care-label { color: var(--brand-cream) !important; }
.lebari-care-btn .lebari-care-pts {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--brand-cream) !important;
  background: rgba(246,241,232,0.18) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* 3. Rewards Vault hero header (Money Pulse style) */
.rewards-hero-header {
  background: linear-gradient(135deg, #5a1e23 0%, #7a2a30 40%, var(--brand-cognac) 100%) !important;
  margin-bottom: 14px !important;
}
.rewards-section-header {
  display: flex !important;
  justify-content: flex-end !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 14px !important;
}
.rewards-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   ROUND 8 — Unified section heroes, sidebar user, plans cards
   ============================================================ */

/* Unified hero banner — luxe, colorful, Fraunces display */
/* ===== DESIGN-V2: section-hero — softer, smaller, more whitespace ===== */
.section-hero {
  position: relative;
  border-radius: 20px;
  padding: 26px 28px;
  margin: 4px 0 24px;
  overflow: hidden;
  color: var(--brand-cream);
  box-shadow: 0 1px 2px rgba(20,20,30,0.04), 0 12px 28px -16px rgba(20,20,30,0.35), inset 0 0 0 1px rgba(250,246,238,0.06);
  background: linear-gradient(160deg, #1f2d44 0%, #2a3d5c 100%);
}
/* ===== /DESIGN-V2 ===== */
.section-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 20%, rgba(246,241,232,0.18), transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(195,106,45,0.25), transparent 50%);
  pointer-events: none;
}
.section-hero-inner { position: relative; z-index: 1; max-width: 820px; }
.section-hero-eyebrow {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,241,232,0.72);
  margin-bottom: 10px;
}
.section-hero-title {
  /* ===== DESIGN-V2: smaller hero title, tighter leading ===== */
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 12px;
  color: var(--brand-cream);
  letter-spacing: -0.015em;
  /* ===== /DESIGN-V2 ===== */
}
.section-hero-sub {
  /* ===== DESIGN-V2: more whitespace below sub ===== */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(250,246,238,0.82);
  margin: 0 0 4px;
  max-width: 560px;
  /* ===== /DESIGN-V2 ===== */
}
@media (max-width: 640px) {
  /* ===== DESIGN-V2: mobile-first hero (~20% less padding) ===== */
  .section-hero { padding: 20px 18px; border-radius: 18px; margin-bottom: 20px; }
  .section-hero-title { font-size: clamp(24px, 7vw, 30px); }
  .section-hero-sub { font-size: 14px; }
  /* ===== /DESIGN-V2 ===== */
}

/* ===== DESIGN-V2: global input baseline (12px radius, hairline, cognac focus ring) ===== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
  border-radius: 12px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--v2-cognac);
  outline-offset: 1px;
}
/* ===== /DESIGN-V2 ===== */

/* Section-specific gradients */
.section-hero--meals {
  background: linear-gradient(135deg, #5a2a14 0%, var(--brand-cognac) 48%, #e0a46a 100%);
}
.section-hero--todos {
  background: linear-gradient(135deg, #132a1e 0%, var(--brand-emerald) 55%, #4a7a5c 100%);
}
.section-hero--shopping {
  background: linear-gradient(135deg, #5a1e23 0%, #7a2a30 45%, #c36a2d 100%);
}
.section-hero--workouts {
  background: linear-gradient(135deg, #1d2e4a 0%, #2a4268 50%, #5a1e23 100%);
}
.section-hero--daily {
  background: linear-gradient(135deg, #1d2e4a 0%, #2a4268 40%, var(--brand-cognac) 100%);
}
.section-hero--plans {
  background: linear-gradient(135deg, #1d2e4a 0%, #3a4f78 50%, #c36a2d 100%);
}
.section-hero--goals {
  background: linear-gradient(135deg, #132a1e 0%, var(--brand-emerald) 55%, #1d2e4a 100%);
}
.section-hero--explore {
  background: linear-gradient(135deg, #1d2e4a 0%, #234a37 50%, #c36a2d 100%);
}
.section-hero--ideas {
  background: linear-gradient(135deg, #5a2a14 0%, var(--brand-cognac) 50%, #1d2e4a 100%);
}
.section-hero--datenights {
  background: linear-gradient(135deg, #5a1e23 0%, #7a2a30 50%, #c36a2d 100%);
}
/* design-audit: admin hub variant — navy + burgundy + cognac for "control center" feel */
.section-hero--adminhub {
  background: linear-gradient(135deg, #141f33 0%, var(--brand-navy) 55%, #3a1518 100%);
}

/* Unify Lebari & Lera station heroes with the main section-hero pattern */
#lebari-station .station-hero--lebari,
#lera-station .station-hero--lera {
  border-radius: 24px !important;
  padding: 32px 36px !important;
  margin-bottom: 18px !important;
  color: var(--brand-cream) !important;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(246,241,232,0.08) !important;
  position: relative;
  overflow: hidden;
}
#lebari-station .station-hero.station-hero--lebari,
#lebari-station .station-hero--lebari {
  background: linear-gradient(135deg, #1a1410 0%, #3a1f1a 40%, #2a1410 100%) !important;
}
#lebari-station .station-hero.station-hero--lebari .lebari-eyebrow,
#lebari-station .lebari-eyebrow {
  color: var(--brand-cognac) !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
}
#lera-station .station-hero--lera {
  background: linear-gradient(135deg, #1d2e4a 0%, #2a4268 50%, var(--brand-cognac) 100%) !important;
}
.lebari-eyebrow, .lera-station-header .lera-eyebrow {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,241,232,0.72);
  margin: 0 0 8px;
}
.lebari-station-title, .lera-station-title {
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-size: clamp(28px, 3.6vw, 40px) !important;
  font-weight: 600 !important;
  color: var(--brand-cream) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.01em !important;
}
.lebari-station-subtitle, .lera-station-subtitle {
  color: rgba(246,241,232,0.85) !important;
  font-size: 15px !important;
  margin: 0 !important;
}
@media (max-width: 640px) {
  #lebari-station .station-hero--lebari,
  #lera-station .station-hero--lera {
    padding: 24px 22px !important;
    border-radius: 20px !important;
  }
}

/* Hide the old plans-header title row (hero replaces it) but keep the tabs */
.plans-sub .plans-header {
  background: transparent !important;
  padding: 0 0 6px !important;
  box-shadow: none !important;
  border: none !important;
  margin-bottom: 6px !important;
}
.plans-sub .plans-header .plans-tabs {
  justify-content: flex-start;
}

/* Make plans-sub cards colorful like goals/ideas */
.plans-sub .card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.plans-sub .card-list .card-item {
  border-radius: 20px !important;
  padding: 20px !important;
  color: var(--brand-cream) !important;
  border: none !important;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(246,241,232,0.1) !important;
  position: relative;
  background: linear-gradient(135deg, #1d2e4a 0%, #2a4268 100%);
}
.plans-sub .card-list .card-item:nth-child(4n+1) {
  background: linear-gradient(135deg, #1d2e4a 0%, #2a4268 100%) !important;
}
.plans-sub .card-list .card-item:nth-child(4n+2) {
  background: linear-gradient(135deg, #5a2a14 0%, var(--brand-cognac) 100%) !important;
}
.plans-sub .card-list .card-item:nth-child(4n+3) {
  background: linear-gradient(135deg, #132a1e 0%, var(--brand-emerald) 100%) !important;
}
.plans-sub .card-list .card-item:nth-child(4n+4) {
  background: linear-gradient(135deg, #5a1e23 0%, #7a2a30 100%) !important;
}
.plans-sub .card-list .card-item .card-item-title {
  color: var(--brand-cream) !important;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 600;
}
.plans-sub .card-list .card-item .card-item-meta,
.plans-sub .card-list .card-item .card-item-meta span {
  color: rgba(246,241,232,0.82) !important;
}
.plans-sub .card-list .card-item .btn-icon {
  color: var(--brand-cream) !important;
  background: rgba(246,241,232,0.12) !important;
  border: 1px solid rgba(246,241,232,0.18) !important;
}

/* Sidebar user chip (replaces top-right who-bar) */
#who-bar { display: none !important; }
.sidebar-user-li {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(246,241,232,0.08);
  margin-bottom: 6px;
  list-style: none;
}
.sidebar-user-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(195,106,45,0.15), rgba(29,46,74,0.25));
  border: 1px solid rgba(246,241,232,0.12);
  border-radius: 14px;
  color: var(--brand-cream);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.sidebar-user-btn:hover {
  background: linear-gradient(135deg, rgba(195,106,45,0.28), rgba(29,46,74,0.4));
  border-color: rgba(246,241,232,0.22);
  transform: translateY(-1px);
}
.sidebar-user-avatar {
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(246,241,232,0.08);
  border-radius: 10px;
  flex-shrink: 0;
}
.sidebar-user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.sidebar-user-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-sub {
  font-size: 11px;
  color: rgba(246,241,232,0.55);
  letter-spacing: 0.04em;
}
/* On mobile More drawer, sidebar-user-li hides (handled by nav-more-li logic) */
@media (max-width: 768px) {
  .sidebar-user-li { display: none; }
}

/* Home: Lera school card block */
.home-school-block {
  background: linear-gradient(135deg, #1d2e4a 0%, #2a4268 50%, var(--brand-cognac) 100%);
  border-radius: 20px;
  padding: 20px 22px;
  color: var(--brand-cream);
  margin: 14px 0;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,0.45);
}
.home-school-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.home-school-block h3 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--brand-cream);
}
.home-school-items { display: grid; gap: 8px; }
.home-school-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(246,241,232,0.1);
  border: 1px solid rgba(246,241,232,0.14);
  border-radius: 12px;
  font-size: 14px;
}
.home-school-item-type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(246,241,232,0.7);
  padding: 3px 8px;
  background: rgba(246,241,232,0.08);
  border-radius: 6px;
}
.home-school-empty {
  font-size: 13px;
  color: rgba(246,241,232,0.7);
  text-align: center;
  padding: 10px;
}

/* ROUND 8 follow-up fixes */

/* 1. Daily Stations — remove the paper-card wrapper so hero stands free like other menus */
.kids-hub-section {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 2. Lebari station — use Anne/Abs pattern with cognac-toned dark gradient */
#lebari-station.anne-station {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15,22,38,0.22);
  margin-bottom: 18px;
}
#lebari-station .lebari-station-hero {
  background: linear-gradient(135deg, #2a1410 0%, #5a2a14 50%, #1d2e4a 100%) !important;
}
#lebari-station .lebari-station-hero::after {
  background: linear-gradient(180deg, var(--brand-cognac), #7a3c10) !important;
}
/* Fix lock button visibility on dark hero — was black */
#lebari-station .station-lock-btn,
#anne-station-wrap .station-lock-btn,
#abs-station .station-lock-btn {
  color: var(--brand-cream) !important;
  background: rgba(246,241,232,0.14) !important;
  border: 1px solid rgba(246,241,232,0.28) !important;
}
#lebari-station .station-lock-btn svg,
#anne-station-wrap .station-lock-btn svg,
#abs-station .station-lock-btn svg { color: var(--brand-cream) !important; }

/* Hide any legacy station-hero--lebari blocks if present */
#lebari-station .station-hero--lebari { display: none !important; }

/* 3. To-Do filters live inside the section-header card, alongside +Add Task */
.section-header-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
  background: linear-gradient(135deg, #132a1e 0%, var(--brand-emerald) 55%, #1d2e4a 100%);
  border-radius: 18px;
  border: none;
  box-shadow: 0 12px 28px -18px rgba(0,0,0,0.45);
  margin-bottom: 14px;
}
.section-header-filters .combined-filters {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  flex: 1 1 auto;
}
.section-header-filters .btn-small {
  background: rgba(246,241,232,0.14) !important;
  color: var(--brand-cream) !important;
  border: 1px solid rgba(246,241,232,0.2) !important;
}
.section-header-filters .btn-small.active {
  background: var(--brand-cognac) !important;
  border-color: transparent !important;
  color: var(--brand-cream) !important;
}
.section-header-filters .filter-select {
  background: rgba(246,241,232,0.14) !important;
  color: var(--brand-cream) !important;
  border: 1px solid rgba(246,241,232,0.2) !important;
}
.section-header-filters .filter-select option { color: var(--brand-ink); }
.section-header-filters .filter-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(246,241,232,0.2);
  margin: 0 6px;
}
.section-header-filters .btn-primary {
  background: var(--brand-cognac) !important;
  border: none !important;
  color: var(--brand-cream) !important;
}

/* Colorful to-do rows — cycling gradients */
#todo-list.todo-list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: grid;
  gap: 10px;
}
#todo-list.todo-list .todo-item {
  border-radius: 16px !important;
  border: none !important;
  padding: 14px 18px !important;
  color: var(--brand-cream) !important;
  box-shadow: 0 10px 24px -16px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(246,241,232,0.08) !important;
}
#todo-list.todo-list .todo-item:nth-child(4n+1) {
  background: linear-gradient(135deg, #1d2e4a 0%, #2a4268 100%) !important;
}
#todo-list.todo-list .todo-item:nth-child(4n+2) {
  background: linear-gradient(135deg, #5a2a14 0%, var(--brand-cognac) 100%) !important;
}
#todo-list.todo-list .todo-item:nth-child(4n+3) {
  background: linear-gradient(135deg, #132a1e 0%, var(--brand-emerald) 100%) !important;
}
#todo-list.todo-list .todo-item:nth-child(4n+4) {
  background: linear-gradient(135deg, #5a1e23 0%, #7a2a30 100%) !important;
}
#todo-list.todo-list .todo-item:hover {
  filter: brightness(1.08);
  background-color: inherit !important;
}
#todo-list.todo-list .todo-text {
  color: var(--brand-cream) !important;
  font-weight: 600;
}
#todo-list.todo-list .todo-meta,
#todo-list.todo-list .todo-meta * {
  color: rgba(246,241,232,0.82) !important;
}
#todo-list.todo-list .todo-checkbox {
  border-color: rgba(246,241,232,0.5) !important;
  background: rgba(246,241,232,0.1) !important;
}
#todo-list.todo-list .todo-item.done {
  opacity: 0.7;
}
#todo-list.todo-list .todo-item.done .todo-text {
  color: rgba(246,241,232,0.6) !important;
}
#todo-list.todo-list .btn-icon {
  color: var(--brand-cream) !important;
  background: rgba(246,241,232,0.14) !important;
  border: 1px solid rgba(246,241,232,0.22) !important;
}

/* 4. Plans sub-section inner section-header (🎯 Family Goals style) for Explore/Ideas/Vacation/DateNights */
.plans-sub .section-header {
  background: linear-gradient(135deg, #132a1e 0%, var(--brand-emerald) 55%, #1d2e4a 100%) !important;
  border-radius: 18px !important;
  border: none !important;
  padding: 18px 22px !important;
  color: var(--brand-cream) !important;
  box-shadow: 0 12px 28px -18px rgba(0,0,0,0.45) !important;
  margin-top: 8px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
.plans-sub .section-header h2,
.plans-sub .section-header h1 {
  color: var(--brand-cream) !important;
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
.plans-sub .section-header .btn-primary {
  background: var(--brand-cognac) !important;
  border: none !important;
  color: var(--brand-cream) !important;
}
/* Section-specific header tints */
#section-activities .section-header {
  background: linear-gradient(135deg, #1d2e4a 0%, #234a37 55%, var(--brand-cognac) 100%) !important;
}
#section-ideas .section-header {
  background: linear-gradient(135deg, #5a2a14 0%, var(--brand-cognac) 55%, #1d2e4a 100%) !important;
}
#section-vacations .section-header {
  background: linear-gradient(135deg, #1d2e4a 0%, #3a4f78 55%, var(--brand-cognac) 100%) !important;
}
#section-datenights .section-header {
  background: linear-gradient(135deg, #5a1e23 0%, #7a2a30 55%, var(--brand-cognac) 100%) !important;
}

/* ROUND 8b — icon/card size + muted todos + profile page */

/* Reward card icons — smaller, subtler */
.reward-card-menu { top: 8px !important; right: 8px !important; gap: 3px !important; }
.reward-menu-btn {
  width: 22px !important;
  height: 22px !important;
  background: rgba(255,255,255,0.6) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.reward-menu-btn svg { width: 11px !important; height: 11px !important; }
.reward-card:hover .reward-menu-btn { opacity: 1; }
.reward-menu-btn:hover { transform: none !important; background: #fff !important; opacity: 1; }

/* Recipe cards — more compact so more fit on screen */
.recipe-library-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}
.recipe-card { border-radius: 14px !important; }
.recipe-card > * { padding-left: 14px !important; padding-right: 14px !important; }
.recipe-card-head { padding-top: 12px !important; padding-bottom: 2px !important; }
.recipe-card-title { font-size: 15px !important; }
.recipe-card-meta { font-size: 10px !important; }
.recipe-card-ing { font-size: 11px !important; padding-bottom: 2px !important; }
.recipe-card-excerpt { font-size: 12px !important; padding-bottom: 10px !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.recipe-card-view {
  padding: 6px 11px !important;
  font-size: 11px !important;
  margin: 0 14px 12px !important;
  border-radius: 8px !important;
}
.recipe-card-actions .btn-icon { width: 22px !important; height: 22px !important; }
.recipe-card-actions .btn-icon svg { width: 11px !important; height: 11px !important; }

/* To-Do rows — softer, muted backgrounds (less saturation) */
#todo-list.todo-list .todo-item:nth-child(4n+1) {
  background: linear-gradient(135deg, #233048 0%, #2a384f 100%) !important;
}
#todo-list.todo-list .todo-item:nth-child(4n+2) {
  background: linear-gradient(135deg, #3a2a1f 0%, #4a3428 100%) !important;
}
#todo-list.todo-list .todo-item:nth-child(4n+3) {
  background: linear-gradient(135deg, #1e2e23 0%, #263d2e 100%) !important;
}
#todo-list.todo-list .todo-item:nth-child(4n+4) {
  background: linear-gradient(135deg, #3a262a 0%, #4a2e34 100%) !important;
}

/* Profile page */
.section-hero--profile {
  background: linear-gradient(135deg, #1d2e4a 0%, #3a4f78 45%, var(--brand-cognac) 100%);
}
.profile-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.profile-card.profile-hero-card,
.profile-hero-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1d2e4a 0%, #2a4268 100%) !important;
  color: var(--brand-cream) !important;
  border: none !important;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,0.45) !important;
}
.profile-avatar-big {
  font-size: 52px;
  line-height: 1;
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(246,241,232,0.1);
  border: 1px solid rgba(246,241,232,0.18);
  border-radius: 22px;
  flex-shrink: 0;
}
.profile-hero-meta { flex: 1; min-width: 0; }
.profile-hero-name {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--brand-cream);
  letter-spacing: -0.01em;
}
.profile-hero-sub {
  font-size: 13px;
  color: rgba(246,241,232,0.72);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.profile-switch {
  background: rgba(246,241,232,0.14) !important;
  color: var(--brand-cream) !important;
  border: 1px solid rgba(246,241,232,0.22) !important;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.profile-card {
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(29,46,74,0.05);
}
.profile-card-wide { grid-column: 1 / -1; }
.profile-label {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-navy);
  opacity: 0.72;
}
.profile-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--brand-ink);
  transition: border-color 0.15s;
}
.profile-input:focus {
  outline: none;
  border-color: var(--brand-cognac);
  box-shadow: 0 0 0 3px rgba(195,106,45,0.12);
}
.profile-input-emoji { font-size: 24px; padding: 10px 14px; }
.profile-hint { font-size: 11px; color: var(--brand-ink); opacity: 0.55; }
.profile-save {
  align-self: flex-start;
  background: var(--brand-cognac) !important;
  color: var(--brand-cream) !important;
  border: none !important;
}
.profile-color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-color-chip {
  padding: 10px 16px;
  border-radius: 12px;
  border: 2px solid transparent;
  color: var(--brand-cream);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.profile-color-chip:hover { transform: translateY(-1px); }
.profile-color-chip.active { border-color: var(--brand-cognac); box-shadow: 0 0 0 3px rgba(195,106,45,0.25); }
.profile-quick-links { display: flex; gap: 8px; flex-wrap: wrap; }


/* ================================================================= */
/* ========== RESPONSIVE AUDIT FIXES v29 ========================== */
/* ================================================================= */

/* Global safety: prevent accidental horizontal scroll from descendants */
html, body { max-width: 100vw; overflow-x: hidden; }
#main-content { min-width: 0; }
.section { min-width: 0; }

/* Word-wrap guard for long strings on small screens (URLs, long titles) */
@media (max-width: 640px) {
  .card-item-title, .todo-text, .detail-value,
  .home-ann-text, .hgh-greeting, .fh-greeting,
  .section-title, .sp-hero-title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Keep tables scrollable horizontally on all screens */
  .table-wrapper, .lera-week-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Home points row: 4 family members crunched on small mobile → 2 cols */
@media (max-width: 480px) {
  .hgh-pts-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Home fun strip: 3 tiles with 32px numbers too tight on small phones */
@media (max-width: 420px) {
  .home-fun-strip { grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
  .fun-tile { padding: 8px 9px; gap: 6px; border-radius: 12px; }
  .fun-emoji { font-size: 18px; }
  .fun-value { font-size: 15px; }
  .fun-label { font-size: 8px; letter-spacing: 0.12em; }
}

/* Home greeting hero: prevent overflow on small screens */
@media (max-width: 480px) {
  .home-greeting-hero { padding: 20px 18px; border-radius: 18px; }
  .hgh-greeting { font-size: 22px; }
  .hgh-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  .hgh-right { justify-content: flex-start; }
  .hgh-avatars { margin-top: 10px; gap: 6px; }
  .hgh-avatar { width: 38px; height: 38px; font-size: 18px; }
}

/* Tablet range 901–1024: some 4-col grids still too tight */
@media (max-width: 1024px) and (min-width: 769px) {
  .hgh-pts-row { grid-template-columns: repeat(4, 1fr); }
  .ah-member-actions { grid-template-columns: repeat(2, 1fr); }
  .home-fun-strip { gap: 8px; }
  .fun-value { font-size: 24px; }
  /* Family/home hero title size */
  .hgh-greeting, .fh-greeting, .sp-hero-title { font-size: 26px; }
  /* Reduce modal width overhead */
  .detail-modal { max-width: 480px; }
}

/* iPad portrait 769–900: 4-col rows become 2-col to breathe */
@media (max-width: 900px) and (min-width: 641px) {
  .hgh-pts-row { grid-template-columns: repeat(2, 1fr); }
  .home-fun-strip { grid-template-columns: 1fr; }
  .ah-member-actions { grid-template-columns: repeat(2, 1fr); }
  .hgh-inner { gap: 12px; }
  .hgh-greeting { font-size: 24px; }
  .fh-greeting { font-size: 22px; }
  .section-header { gap: 10px; }
}

/* Ensure minimum 44px touch targets on mobile across key controls */
@media (max-width: 640px) {
  .nav-more-btn { min-width: 48px; min-height: 48px; }
  .btn-primary { min-height: 40px; }
  .reward-menu-btn { width: 32px; height: 32px; }
  .vote-row .vote-btn { width: 40px; height: 40px; }
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
  /* Sticky modal close button should be easy to hit */
  .modal-header button, .modal .close-btn { min-width: 40px; min-height: 40px; }
}

/* PWA install banner shouldn't break on narrow screens */
@media (max-width: 480px) {
  #pwa-install-banner { font-size: 12px; padding: 10px 12px; gap: 8px; }
  #pwa-install-banner span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
}

/* Mobile: clamp large hero numbers so they don't overflow parent */
@media (max-width: 480px) {
  .big-number, .dash-hero-value, .rewards-hero-value {
    font-size: clamp(22px, 7vw, 32px);
    overflow-wrap: anywhere;
  }
}

/* Keep filter rows scrollable (pills) rather than wrapping awkwardly */
@media (max-width: 640px) {
  .datenight-tabs, .plans-tabs, .upcoming-tabs, .kids-hub-tabs, .goal-period-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .datenight-tabs::-webkit-scrollbar,
  .plans-tabs::-webkit-scrollbar,
  .upcoming-tabs::-webkit-scrollbar,
  .kids-hub-tabs::-webkit-scrollbar,
  .goal-period-tabs::-webkit-scrollbar { display: none; }
  .datenight-tab, .plans-tab, .upcoming-tab, .kids-hub-tab, .goal-period-btn {
    flex-shrink: 0;
  }
}

/* Very small phones (≤360px): final crunch safety */
@media (max-width: 360px) {
  .section-title { font-size: 17px; }
  .home-fun-strip { grid-template-columns: 1fr 1fr; }
  .home-fun-strip .fun-tile:nth-child(3) { grid-column: span 2; }
  .kids-profiles, .dash-sections-grid { grid-template-columns: 1fr; }
  .rewards-grid { grid-template-columns: 1fr; }
  .propose-picker { grid-template-columns: 1fr; }
  .nav-link { min-width: 40px; }
}

/* Desktop wide (≥1400px): allow content to breathe rather than clamp at 1200 */
@media (min-width: 1400px) {
  #main-content { max-width: 1320px; margin-left: 260px; padding-left: 48px; padding-right: 48px; }
}

/* Prevent long unbroken words (email/url) inside cards from pushing layout */
.card-item, .todo-item, .dash-card, .sp-card, .home-section-block,
.ah-card, .reward-card, .modal { min-width: 0; }
.card-item *, .todo-item *, .modal * { max-width: 100%; }
img { max-width: 100%; height: auto; }

/* ========== QUICK CAPTURE FAB ========== */
.quick-capture-fab {
  position: fixed;
  right: 24px;
  bottom: 88px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--brand-cognac) 0%, #a3571f 100%);
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(195, 106, 45, 0.4), 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.quick-capture-fab:hover,
.quick-capture-fab:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 24px rgba(195, 106, 45, 0.5), 0 3px 8px rgba(0,0,0,0.2);
  outline: none;
}
.quick-capture-fab:active { transform: translateY(0) scale(0.98); }
.quick-capture-fab span { display: block; margin-top: -2px; }

@media (min-width: 900px) {
  .quick-capture-fab { bottom: 24px; right: 32px; }
}

#quick-capture-modal .modal-header h2 {
  font-family: 'Fraunces', Georgia, serif;
}
#quick-capture-modal #qc-text {
  width: 100%;
  font-size: 16px;
  padding: 12px 14px;
}
.qc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.qc-pill {
  border: 1px solid var(--border, #e3e3e3);
  background: #fff;
  color: var(--text, #333);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.qc-pill:hover { border-color: var(--brand-cognac); }
.qc-pill.active {
  background: var(--brand-cognac);
  border-color: var(--brand-cognac);
  color: #fff;
}
.qc-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

/* Quick Capture per-type field groups */
#quick-capture-modal .modal {
  max-height: 90vh;
  overflow-y: auto;
}
.qc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-bottom: 12px;
}
.qc-fields > label {
  display: block;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12px;
  color: var(--brand-mute);
  font-weight: 500;
  margin: 0;
}
.qc-fields > label:has(textarea) {
  grid-column: 1 / -1;
}
.qc-fields input[type="text"],
.qc-fields input[type="number"],
.qc-fields input[type="date"],
.qc-fields select,
.qc-fields textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--brand-line);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--brand-ink);
  margin-top: 3px;
  background: #fff;
}
.qc-fields textarea { resize: vertical; }

.qc-help {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 12px;
  color: var(--brand-mute);
  margin: -6px 0 8px;
  grid-column: 1 / -1;
}

.home-ann-author-avatar {
  display: inline-block;
  font-size: 13px;
  margin-right: 2px;
}
.home-ann-card {
  border-left: 3px solid var(--brand-cognac, #c36a2d);
}
.profile-notes-card {
  border-left: 3px solid var(--brand-navy, #1d2e4a);
  margin-top: 12px;
}

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

/* Home Quick Notes card */
.home-quick-notes {
  padding: 16px 18px;
}
.qn-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.qn-title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--brand-ink);
}
.qn-sub {
  font-size: 12px;
  color: var(--brand-mute);
  font-weight: 500;
}
.qn-empty {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  color: var(--brand-mute);
  padding: 10px 2px;
}
.qn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qn-item {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qn-text {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 14px;
  color: var(--brand-ink);
  line-height: 1.4;
  word-break: break-word;
}
.qn-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--brand-cognac);
  background: #fff6ec;
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 4px;
}
.qn-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--brand-mute);
}
.qn-del {
  background: transparent;
  border: none;
  color: var(--brand-mute);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.qn-del:hover { background: #fff5f3; color: #b83a3a; }

/* ========== ACTIVITY STREAKS + WEEKLY SUMMARY (Home) ========== */
.home-activity-streaks,
.home-weekly-summary {
  padding: 16px 18px;
}
.streak-row-head,
.week-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.streak-row-head-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.streak-row-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.streak-row-title,
.week-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--brand-ink);
}
.streak-row-subtitle {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 11px;
  color: var(--brand-mute);
  font-weight: 500;
}
.streak-row-sub,
.week-sub {
  font-size: 12px;
  color: var(--brand-mute);
  font-weight: 500;
}
.streak-info-btn {
  appearance: none;
  background: var(--brand-paper, #fff);
  border: 1px solid var(--brand-line);
  color: var(--brand-mute);
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 12px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.streak-info-btn:hover {
  color: var(--brand-cognac);
  border-color: rgba(195, 106, 45, 0.45);
  background: #fff6ec;
}
.streak-info-btn:focus-visible {
  outline: 2px solid var(--brand-cognac);
  outline-offset: 2px;
}
.streak-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.streak-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px 12px;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.streak-tile.active {
  background: linear-gradient(180deg, #fff 0%, #fff6ec 100%);
  border-color: rgba(195, 106, 45, 0.45);
}
@media (hover: hover) {
  .streak-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(195, 106, 45, 0.55);
    box-shadow: 0 8px 20px rgba(15, 22, 38, 0.10);
  }
}
.streak-tile:active { transform: translateY(0); }
.streak-tile:focus-visible {
  outline: 2px solid var(--brand-cognac);
  outline-offset: 2px;
}
.streak-tile-emoji { font-size: 22px; line-height: 1; margin-bottom: 4px; }
.streak-tile-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--brand-ink);
  margin-bottom: 2px;
}
.streak-tile.active .streak-tile-num { color: var(--brand-cognac); }
.streak-tile-label {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--brand-mute);
  text-transform: uppercase;
}
.week-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.week-tile {
  padding: 14px 12px;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
}
.week-tile-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  color: var(--brand-ink);
  margin-bottom: 4px;
}
.week-tile-label {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-weight: 500;
  font-size: 12px;
  color: var(--brand-mute);
}
.week-tile.under { border-color: rgba(46, 139, 87, 0.4); background: #f4fbf6; }
.week-tile.over  { border-color: rgba(184, 58, 58, 0.4); background: #fff5f3; }
.week-tile.under .week-tile-num { color: #2e8b57; }
.week-tile.over  .week-tile-num { color: #b83a3a; }
@media (max-width: 540px) {
  .streak-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========== v76 MOBILE FIXES ========== */

/* 1. Home "Today" meal card — prevent pill/name overlap on mobile.
   Earlier rule (line 6054) forced grid-template-columns: 70px 1fr auto at <=640px,
   but the BREAKFAST pill is wider than 70px so it overflowed into the name column.
   Restore the stacked single-column layout from line 1021 and reset pill sizing. */
@media (max-width: 640px) {
  .meal-today-spotlight .meal-hero-slot {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    align-items: start !important;
  }
  .meal-today-spotlight .meal-hero-slot-type {
    justify-self: start !important;
    font-size: 10px !important;
    padding: 4px 10px !important;
    letter-spacing: 0.16em !important;
    flex-shrink: 0 !important;
    max-width: max-content !important;
  }
  .meal-today-spotlight .meal-hero-slot-body {
    min-width: 0 !important;
    gap: 6px !important;
  }
  .meal-today-spotlight .meal-hero-slot-name,
  .meal-today-spotlight .meal-hero-name {
    font-size: 14px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }
  /* "Everyone" per-person chips — stack, don't overlap */
  .meal-today-spotlight .meal-hero-persons {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }
  .meal-today-spotlight .meal-hero-person-chip {
    max-width: 100% !important;
    font-size: 10px !important;
    padding: 3px 9px !important;
  }
}

/* Also fix the Home card version using .home-meal-row (same component, different class) */
@media (max-width: 480px) {
  .home-meal-row { gap: 10px !important; }
  .home-meal-type {
    font-size: 10px !important;
    padding: 4px 10px !important;
    min-width: 0 !important;
    letter-spacing: 0.14em !important;
    flex-shrink: 0 !important;
  }
  .home-meal-name { font-size: 14px !important; line-height: 1.3 !important; }
}

/* 2. Daily Station tiles — prevent long-text overflow, add FAB clearance */
@media (max-width: 480px) {
  .lera-care-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .lera-care-btn {
    padding: 12px 8px 34px !important;
    min-height: 110px !important;
    overflow: hidden !important;
    word-break: break-word !important;
    hyphens: auto !important;
    justify-content: flex-start !important;
  }
  .lera-care-btn .lera-care-label {
    font-size: 11px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.06em !important;
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lera-care-btn .lera-care-pts {
    position: absolute !important;
    bottom: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
  }
  /* FAB clearance: FAB is bottom:88px + 56px tall; add room so last tile row isn't covered */
  #lera-station { padding-bottom: 72px !important; }
}

/* 3. Plans sub-section headers — ensure cream text on dark gradient
   (strengthen over inline styles and later utility rules) */
.plans-sub .section-header,
.plans-sub .section-header * {
  color: var(--brand-cream) !important;
}
.plans-sub .section-header h1,
.plans-sub .section-header h2,
.plans-sub .section-header .section-title {
  color: var(--brand-cream) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.plans-sub .section-header p,
.plans-sub .section-header .section-sub,
.plans-sub .section-header small {
  color: rgba(246,241,232,0.72) !important;
}
.plans-sub .section-header .btn-primary,
.plans-sub .section-header .btn-primary * {
  background: var(--brand-cognac) !important;
  color: var(--brand-cream) !important;
  border: none !important;
}



/* ============================================================
   DESIGN-V3 — family.co aesthetic override
   White cards on cream, hairlines, serif numbers, pill buttons,
   row-pattern lists, decorative emoji strips. Loaded last so
   selectors with equal specificity win over legacy rules.
   ============================================================ */

:root {
  --v3-cream:    #faf6ee;
  --v3-paper:    #ffffff;
  --v3-ink:      #1a1d24;
  --v3-ink-soft: #2c303a;
  --v3-muted:    #7c7a78;
  --v3-hairline: rgba(20,25,40,0.07);
  --v3-hairline-strong: rgba(20,25,40,0.12);
  --v3-cognac:   #c36a2d;
  --v3-cognac-soft: #d68750;
  --v3-teal:     #3a6b6b;
  --v3-success:  #2e7d57;
  --v3-warn:     #c97a2b;
  --v3-negative: #a3413f;
}

/* Page surface */
body { background: var(--v3-cream) !important; color: var(--v3-ink) !important; }

/* ============================================================
   1. SECTION HEROES — white card on cream, centered, emoji strip
   ============================================================ */
.section-hero,
.section-hero[class*="section-hero--"] {
  background: var(--v3-paper) !important;
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-hairline) !important;
  border-radius: 20px !important;
  padding: 28px 24px 22px !important;
  margin: 4px 0 22px !important;
  box-shadow: none !important;
  text-align: center;
  overflow: hidden;
}
.section-hero::before { display: none !important; }
.section-hero-inner {
  max-width: 640px;
  margin: 0 auto !important;
  text-align: center;
}
.section-hero-eyebrow {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--v3-muted) !important;
  margin-bottom: 14px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-hero-eyebrow::before,
.section-hero-eyebrow::after {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--v3-cognac);
  display: inline-block;
}
.section-hero-title {
  font-family: var(--font-display) !important;
  font-size: clamp(30px, 6vw, 40px) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--v3-ink) !important;
  margin: 0 0 10px !important;
  text-shadow: none !important;
}
.section-hero-sub {
  font-size: 15px !important;
  color: var(--v3-muted) !important;
  line-height: 1.5 !important;
  max-width: 480px;
  margin: 0 auto 16px !important;
}

/* Decorative emoji strip — used inside heroes & above empty states */
.emoji-strip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 20px;
  background: var(--v3-cream);
  border-radius: 999px;
  font-size: 18px;
  letter-spacing: 0.04em;
  opacity: 0.92;
  margin: 6px auto 0;
}
.emoji-strip > span { line-height: 1; }
.emoji-strip > span + span::before {
  content: "·";
  color: var(--v3-muted);
  margin-right: 14px;
  margin-left: -8px;
  font-weight: 700;
  opacity: 0.5;
}

@media (max-width: 640px) {
  .section-hero { padding: 22px 16px 18px !important; border-radius: 18px !important; }
  .emoji-strip { gap: 10px; font-size: 16px; padding: 8px 14px; }
  .emoji-strip > span + span::before { margin-right: 10px; margin-left: -6px; }
}

/* ============================================================
   2. FAMILY HEADER (home greeting) — white card, hairline, big serif
   ============================================================ */
.family-header,
#family-header {
  background: var(--v3-paper) !important;
  border: 1px solid var(--v3-hairline) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  padding: 22px 22px 20px !important;
  margin-bottom: 18px !important;
  position: relative;
}
.family-header::after {
  content: "";
  position: absolute; left: 22px; right: 22px; bottom: 0;
  height: 1px;
  background: var(--v3-hairline);
}
.fh-greeting {
  font-family: var(--font-display) !important;
  font-size: clamp(26px, 5.4vw, 34px) !important;
  font-weight: 600 !important;
  color: var(--v3-ink) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  background: none !important;
  -webkit-text-fill-color: var(--v3-ink) !important;
}
.fh-subtitle {
  color: var(--v3-muted) !important;
  font-size: 14px !important;
}
.fh-points-chip {
  background: var(--v3-cream) !important;
  border: 1px solid var(--v3-hairline) !important;
  color: var(--v3-ink) !important;
  border-radius: 999px !important;
}
.fh-points-num {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--v3-cognac) !important;
}

/* ============================================================
   3. DASH CARDS — white on cream, hairline, big serif numbers
   ============================================================ */
.dash-card {
  background: var(--v3-paper) !important;
  border: 1px solid var(--v3-hairline) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  padding: 20px !important;
}
.dash-card h3 {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--v3-muted) !important;
  margin-bottom: 10px !important;
}
.big-number,
#dash-total-spending,
.dash-card .big-number {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(40px, 7vw, 54px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--v3-ink) !important;
  margin: 4px 0 6px !important;
}

/* Streak / weekly summary tiles → white squares */
.streak-card, .streak-tile,
.weekly-summary-tile,
.home-stat-tile,
.summary-tile {
  background: var(--v3-paper) !important;
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-hairline) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.streak-card .streak-num,
.streak-tile-num,
.summary-tile-num,
.home-stat-tile-num {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--v3-ink) !important;
  letter-spacing: -0.02em !important;
}
.streak-tile-label,
.summary-tile-label,
.home-stat-tile-label {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--v3-muted) !important;
}

/* Today's meal card — off-white not navy */
.todays-meal,
.todays-meal-hero,
.dash-todays-meal {
  background: var(--v3-paper) !important;
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-hairline) !important;
  box-shadow: none !important;
}
.todays-meal-type, .meal-type-pill {
  background: transparent !important;
  color: var(--v3-muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  border: none !important;
}
.todays-meal-name, .meal-name {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--v3-ink) !important;
}

/* Finance hero too */
.finance-hero {
  background: var(--v3-paper) !important;
  border: 1px solid var(--v3-hairline) !important;
  color: var(--v3-ink) !important;
  box-shadow: none !important;
  text-align: center;
  padding: 26px 22px !important;
  border-radius: 20px !important;
}
.finance-hero-eyebrow {
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  color: var(--v3-muted) !important;
  text-transform: uppercase !important;
}
.finance-hero-title {
  font-family: var(--font-display) !important;
  color: var(--v3-ink) !important;
  font-size: clamp(28px, 5.5vw, 38px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
.finance-hero-sub { color: var(--v3-muted) !important; }

/* ============================================================
   4. ROW PATTERN — universal list utility
   ============================================================ */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--v3-hairline);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}
.row:last-child { border-bottom: none; }
.row:hover { background: rgba(195,106,45,0.04); }
.row-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--v3-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border: 1px solid var(--v3-hairline);
  color: var(--v3-ink);
}
.row-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.row-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--v3-ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-title.is-done {
  text-decoration: line-through;
  color: var(--v3-muted);
}
.row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--v3-muted);
}
.row-meta .row-tag {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--v3-muted);
  font-weight: 600;
}
.row-meta .row-tag--accent { color: var(--v3-cognac); }
.row-meta .row-tag--teal { color: var(--v3-teal); }
.row-trailing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.row-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--v3-ink);
  letter-spacing: -0.01em;
}
.row-amount--negative { color: var(--v3-negative); }
.row-amount--positive { color: var(--v3-success); }
.row-checkbox {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--v3-hairline-strong);
  background: var(--v3-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  color: transparent;
  transition: all 0.15s ease;
}
.row-checkbox:hover { border-color: var(--v3-cognac); }
.row.is-done .row-checkbox {
  background: var(--v3-success);
  border-color: var(--v3-success);
  color: #fff;
}
.row-list {
  background: var(--v3-paper);
  border: 1px solid var(--v3-hairline);
  border-radius: 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  overflow: hidden;
}

/* ============================================================
   5. BUTTONS — pill shape, cognac primary
   ============================================================ */
.btn,
.btn-primary,
.btn-secondary {
  border-radius: 999px !important;
}
.btn-primary {
  background: var(--v3-cognac) !important;
  border: 1px solid var(--v3-cognac) !important;
  color: #fff !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  min-height: 44px !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: var(--v3-cognac-soft) !important;
  border-color: var(--v3-cognac-soft) !important;
  transform: none !important;
}
.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--v3-hairline-strong) !important;
  color: var(--v3-ink) !important;
  padding: 12px 22px !important;
  font-size: 14px !important;
  min-height: 44px !important;
}
.btn-secondary:hover {
  border-color: var(--v3-ink) !important;
  background: transparent !important;
}
.btn-icon {
  width: 32px; height: 32px;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--v3-ink) !important;
  opacity: 0.6;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-icon:hover {
  opacity: 1;
  background: var(--v3-cream) !important;
}

/* ============================================================
   6. SIDEBAR — keep dark for contrast, but refine
   ============================================================ */
#sidebar .nav-item,
#sidebar .sidebar-nav a {
  opacity: 0.7;
  position: relative;
}
#sidebar .nav-item.active,
#sidebar .sidebar-nav a.active {
  opacity: 1;
  background: transparent !important;
}
#sidebar .nav-item.active::before,
#sidebar .sidebar-nav a.active::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v3-cognac);
}

/* ============================================================
   7. LEGACY HERO GRADIENT NUKE — kill all section-hero variants
   ============================================================ */
.section-hero--meals,
.section-hero--todos,
.section-hero--shopping,
.section-hero--workouts,
.section-hero--daily,
.section-hero--plans,
.section-hero--goals,
.section-hero--explore,
.section-hero--ideas,
.section-hero--datenights,
.section-hero--adminhub,
.section-hero--profile {
  background: var(--v3-paper) !important;
}

/* Lebari & Lera station heroes — same treatment */
#lebari-station .station-hero--lebari,
#lera-station .station-hero--lera {
  background: var(--v3-paper) !important;
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-hairline) !important;
  box-shadow: none !important;
  text-align: center;
}
#lebari-station .lebari-eyebrow,
#lera-station .lera-eyebrow,
.lebari-eyebrow, .lera-eyebrow {
  color: var(--v3-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
}
.lebari-station-title, .lera-station-title {
  color: var(--v3-ink) !important;
  text-shadow: none !important;
}
.lebari-station-subtitle, .lera-station-subtitle {
  color: var(--v3-muted) !important;
}

/* Plans-sub colored cards: convert to white */
.plans-sub .card-list .card-item {
  background: var(--v3-paper) !important;
  color: var(--v3-ink) !important;
  border: 1px solid var(--v3-hairline) !important;
  box-shadow: none !important;
}
.plans-sub .section-header,
.plans-sub .section-header * { color: var(--v3-ink) !important; }
.plans-sub .section-header h1,
.plans-sub .section-header h2,
.plans-sub .section-header .section-title { color: var(--v3-ink) !important; text-shadow: none !important; }
.plans-sub .section-header p,
.plans-sub .section-header .section-sub,
.plans-sub .section-header small { color: var(--v3-muted) !important; }

/* Big-number elements site-wide get serif treatment */
.points-balance,
.savings-total,
.investments-total,
.streak-counter {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: clamp(36px, 6vw, 50px) !important;
  line-height: 1 !important;
  color: var(--v3-ink) !important;
  letter-spacing: -0.02em !important;
}

/* Existing todo/shopping cards: soften — apply hairline border, white bg, no internal colored fill */
.todo-item, li.todo-item {
  background: var(--v3-paper) !important;
  border: none !important;
  border-bottom: 1px solid var(--v3-hairline) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  margin: 0 !important;
}
.todo-list, ul.todo-list, #todo-list, #shopping-list {
  background: var(--v3-paper) !important;
  border: 1px solid var(--v3-hairline) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.todo-item:last-child { border-bottom: none !important; }

/* Recipe cards become white */
.recipe-card {
  background: var(--v3-paper) !important;
  border: 1px solid var(--v3-hairline) !important;
  box-shadow: none !important;
  border-radius: 16px !important;
}
.recipe-card-title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--v3-ink) !important;
  letter-spacing: -0.01em !important;
}

/* Expense table: hairline rows, big serif amounts */
#expense-tbody td { border-color: var(--v3-hairline) !important; }
#expense-tbody td strong {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* End DESIGN-V3 */

/* ===== DESIGN-V3 PRIMITIVES ===== */
/* Phase 1 foundation. All classes are .v3-* prefixed and additive — they do
   not touch existing markup. Phase 2/3 will swap markup over to these. */

/* Motion keyframes */
@keyframes v3-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes v3-slide-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v3-spring-in {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Button — base */
.v3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.v3-btn:hover { border-color: var(--hairline-strong); }
.v3-btn:active { transform: translateY(1px); }
.v3-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(195, 106, 45, 0.30);
}

/* Button — primary */
.v3-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}
.v3-btn--primary:hover { background: #b35e23; border-color: #b35e23; }

/* Button — secondary */
.v3-btn--secondary {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--primary-ink);
}
.v3-btn--secondary:hover { background: #1c3c2c; border-color: #1c3c2c; }

/* Button — ghost */
.v3-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}
.v3-btn--ghost:hover { background: var(--card-tinted); }

/* Button — icon-only */
.v3-btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
}

/* Card */
.v3-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-rest);
  padding: var(--space-5);
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.v3-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--hairline-strong);
}

/* Row — list item */
.v3-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
}
.v3-row:last-child { border-bottom: none; }
.v3-row__leading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: var(--ink-muted);
}
.v3-row__body {
  flex: 1 1 auto;
  min-width: 0;
}
.v3-row__trailing {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: var(--fs-caption);
}

/* Input */
.v3-input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.v3-input::placeholder { color: var(--ink-faint); }
.v3-input:hover { border-color: var(--hairline-strong); }
.v3-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(195, 106, 45, 0.30);
}

/* Pill — small uppercase caption */
.v3-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--primary-tint);
  color: var(--primary);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* Toast */
.v3-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  padding: var(--space-3) var(--space-5);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  z-index: 9999;
  animation: v3-slide-up var(--dur-base) var(--ease-out) both;
}

/* Modal */
.v3-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.45);
  z-index: 9998;
  animation: v3-fade-in var(--dur-base) var(--ease-out) both;
}
.v3-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - var(--space-6) * 2));
  max-height: calc(100vh - var(--space-7) * 2);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  padding: var(--space-6);
  z-index: 9999;
  animation: v3-slide-up var(--dur-slow) var(--ease-out) both;
}

/* Sheet — bottom sheet */
.v3-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  padding: var(--space-3) var(--space-5) var(--space-7);
  z-index: 9999;
  animation: v3-spring-in var(--dur-slow) var(--ease-spring) both;
}
.v3-sheet::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  background: var(--hairline-strong);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v3-toast,
  .v3-modal,
  .v3-modal-overlay,
  .v3-sheet,
  .v3-btn,
  .v3-card,
  .v3-input {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* ===== /DESIGN-V3 PRIMITIVES ===== */

/* ===== TAB-SHELLS-V3 ===== */
/* Sub-tab pill row used inside Meals, Money, Stations, Rewards (Phase 2C). */
.subtab-row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 16px;
  margin: 0 -16px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.06));
}
.subtab-row::-webkit-scrollbar { display: none; }

.subtab-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-height: 44px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink-muted, #6B6B66);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
  scroll-snap-align: start;
}
.subtab-pill:hover { color: var(--ink, #1f1f1d); }
.subtab-pill:focus-visible {
  outline: 2px solid var(--primary, #C36A2D);
  outline-offset: 2px;
}
.subtab-pill.is-active {
  color: var(--ink-bold, #111);
  font-weight: 700;
  background: var(--primary-tint, rgba(195, 106, 45, 0.10));
}
.subtab-pill.is-active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -9px;
  height: 2px;
  background: var(--primary, #C36A2D);
  border-radius: 2px 2px 0 0;
}
/* ===== /TAB-SHELLS-V3 ===== */

/* ===== HOME-V3 ===== */
/* Phase 2B Home rebuild — uses v3 tokens only. Scoped to #section-home.home-v3 */
.section.home-v3 { display: none; }
.section.home-v3.active {
  padding: 20px 16px 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .section.home-v3.active { padding: 32px 24px 120px; gap: 20px; }
}

.home-v3-card {
  padding: 20px;
  border-radius: 14px;
}
@media (min-width: 768px) {
  .home-v3-card { padding: 24px; }
}

/* Greeting */
.home-v3-greeting {
  padding: 12px 4px 4px;
}
.home-v3-hello {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 40px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
@media (min-width: 768px) {
  .home-v3-hello { font-size: 56px; }
}
.home-v3-sub {
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0;
}

/* Eyebrow + card head */
.home-v3-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.home-v3-spark { font-size: 12px; opacity: 0.85; }
.home-v3-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.home-v3-link {
  background: transparent;
  border: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  font-weight: 500;
}
.home-v3-link:hover { background: var(--primary-tint); }

/* Daily Verse */
.home-v3-verse { cursor: pointer; }
.home-v3-verse-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.home-v3-verse-attr {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-muted);
}
.home-v3-verse-cycle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--ink-faint);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.home-v3-verse:hover .home-v3-verse-cycle { background: var(--primary-tint); color: var(--primary); }

/* Today's Reveal */
.home-v3-reveal-text {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.home-v3-reveal-kind {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-muted);
}

/* Announcements & Polls */
.home-v3-ap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.home-v3-add-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.home-v3-add-btn:hover { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); }
.home-v3-add-btn:active { transform: scale(0.94); }

.home-v3-polls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.home-v3-anns { display: flex; flex-direction: column; }

.home-v3-empty {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-faint);
  padding: 8px 0;
}

/* Poll sub-card */
.home-v3-poll-card {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 14px;
  background: var(--card-tinted);
}
.home-v3-poll-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.home-v3-poll-q {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 10px;
}
.home-v3-poll-opt {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--hairline);
  background: var(--card);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: border-color var(--dur-base) var(--ease-out);
}
.home-v3-poll-bar {
  position: absolute;
  inset: 0;
  background: var(--primary-tint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms var(--ease-out);
  z-index: 0;
}
.home-v3-poll-opt.voted { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.home-v3-poll-opt.voted .home-v3-poll-bar { background: rgba(195, 106, 45, 0.18); }
.home-v3-poll-opt-text { position: relative; z-index: 1; flex: 1; }
.home-v3-poll-pct {
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-muted);
  margin-left: 10px;
}
.home-v3-poll-opt.voted .home-v3-poll-pct { color: var(--primary); }
.home-v3-poll-foot {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 6px;
}
.home-v3-poll-foot a { color: var(--primary); }

/* Announcement item */
.home-v3-ann + .home-v3-ann { border-top: 1px solid var(--hairline); margin-top: 12px; padding-top: 12px; }
.home-v3-ann-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.home-v3-ann-emoji { font-size: 22px; line-height: 1; padding-top: 2px; }
.home-v3-ann-body { flex: 1; min-width: 0; }
.home-v3-ann-text {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}
.home-v3-ann-meta {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 4px;
}
.home-v3-ann-del {
  background: transparent;
  border: 0;
  color: var(--ink-faint);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.home-v3-ann-del:hover { color: var(--error); background: rgba(192, 57, 43, 0.06); }
.home-v3-ann-cmts-toggle {
  background: transparent;
  border: 0;
  color: var(--ink-muted);
  font-family: var(--font-ui);
  font-size: 12px;
  cursor: pointer;
  padding: 6px 0 0;
  margin-top: 4px;
}
.home-v3-ann-cmts-toggle:hover { color: var(--primary); }
.home-v3-ann-cmts { display: none; padding-top: 8px; }
.home-v3-ann-cmts.open { display: block; }
.home-v3-ann-cmt {
  border-top: 1px solid var(--hairline);
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink);
  font-family: var(--font-ui);
}
.home-v3-ann-cmt-author { font-weight: 600; margin-right: 6px; }
.home-v3-ann-cmt-time { color: var(--ink-faint); font-size: 11px; }
.home-v3-ann-cmt-del {
  background: transparent; border: 0; color: var(--ink-faint);
  cursor: pointer; font-size: 14px; float: right;
}
.home-v3-ann-cmt-text { margin-top: 2px; }
.home-v3-ann-cmt-input {
  display: flex; gap: 6px; padding-top: 8px;
}
.home-v3-ann-cmt-input input {
  flex: 1;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-ui);
  font-size: 13px;
  background: var(--card);
}
.home-v3-ann-cmt-input button {
  border: 0; background: var(--primary); color: var(--primary-ink);
  border-radius: 8px; padding: 8px 12px; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
}

/* Generic v3 row inside Home cards */
.home-v3-rows { display: flex; flex-direction: column; }
.home-v3-rows > .v3-row {
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-ui);
  font-size: 16px;
  color: var(--ink);
  cursor: inherit;
}
.home-v3-rows > .v3-row:first-child { border-top: 0; padding-top: 4px; }
.home-v3-rows > .v3-row:last-child { padding-bottom: 4px; }

.home-v3-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-v3-row-meta { font-size: 12px; color: var(--ink-faint); }
.home-v3-row-trail {
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.home-v3-row-faint { color: var(--ink-faint); }
.home-v3-row-icon { color: var(--ink-muted); flex-shrink: 0; display: inline-flex; align-items: center; }
.home-v3-row-avatars {
  display: inline-flex;
  gap: 2px;
  font-size: 16px;
  flex-shrink: 0;
}
.home-v3-row-avatar { font-size: 22px; flex-shrink: 0; line-height: 1; }

/* Meal type pill */
.home-v3-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--card-tinted);
  border-radius: 999px;
  padding: 4px 10px;
  min-width: 78px;
  flex-shrink: 0;
}
.home-v3-meal-pill[data-meal="Breakfast"] { color: #b5822a; background: rgba(181, 130, 42, 0.10); }
.home-v3-meal-pill[data-meal="Lunch"]     { color: #3f7a5a; background: rgba(63, 122, 90, 0.10); }
.home-v3-meal-pill[data-meal="Dinner"]    { color: #234A37; background: rgba(35, 74, 55, 0.10); }
.home-v3-meal-pill[data-meal="Snack"]     { color: var(--primary); background: var(--primary-tint); }

/* Goal status chip */
.home-v3-goal-status {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--card-tinted);
  color: var(--ink-muted);
}
.home-v3-goal-status.in-progress { color: var(--primary); background: var(--primary-tint); }
.home-v3-goal-status.done { color: var(--success); background: rgba(31, 138, 76, 0.10); }

/* Redeemed Today */
.home-v3-cost {
  color: var(--primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Hover/press feedback for clickable cards */
.home-v3-card[role="button"] { cursor: pointer; }
.home-v3-card[role="button"]:hover .home-v3-link { background: var(--primary-tint); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .home-v3-poll-bar { transition: none !important; }
  .home-v3-card, .home-v3-greeting { transition: none !important; transform: none !important; opacity: 1 !important; }
}
/* ===== /HOME-V3 ===== */

/* ===== PHASE 2D: Streak chips, inline workouts, school toggle ===== */
.station-streak-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px 0;
}
.station-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(0,0,0,0.10));
  color: var(--ink-muted, #6B6B66);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.station-streak-chip .ssc-icon { display: inline-flex; opacity: 0.85; }
.station-streak-chip .ssc-num {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.station-streak-chip .ssc-cap { opacity: 0.85; }
.station-streak-chip.is-active {
  color: var(--brand-cognac, #c36a2d);
  border-color: rgba(195,106,45,0.30);
  background: rgba(195,106,45,0.08);
}

/* Inline workouts (Abs/Anne) */
.station-workouts-inline {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, rgba(0,0,0,0.08));
}
.station-workouts-inline .swi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.station-workouts-inline .swi-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink, #2a2a28);
}
.station-workouts-inline .swi-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.station-workouts-inline .swi-empty {
  padding: 14px;
  text-align: center;
  color: var(--text-light, #6B6B66);
  font-size: 13px;
  font-style: italic;
}
.station-workouts-inline .swi-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.station-workouts-inline .swi-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-soft, #fbf8f2);
  border: 1px solid transparent;
}
.station-workouts-inline .swi-row.is-today {
  border-color: rgba(195,106,45,0.35);
  background: rgba(195,106,45,0.06);
}
.station-workouts-inline .swi-emoji { font-size: 20px; line-height: 1; }
.station-workouts-inline .swi-main { flex: 1; min-width: 0; }
.station-workouts-inline .swi-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink, #2a2a28);
}
.station-workouts-inline .swi-today-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-cognac, #c36a2d);
}
.station-workouts-inline .swi-meta {
  font-size: 11px;
  color: var(--text-light, #6B6B66);
  margin-top: 2px;
}
.station-workouts-inline .swi-trail { flex-shrink: 0; }

/* Kid school card sits cleanly inside station panels */
.kid-school-card { margin: 12px 0; }
/* ===== /PHASE 2D ===== */

/* ===== ADMIN-HUB-V3 =====
   Premium reorg of #section-adminhub. v3 tokens only:
   --page, --card, --ink, --ink-muted, --primary, --hairline, --space-*, --radius-*.
   Owns: .ahv3-* selectors. Does not modify other sections. */

#section-adminhub .section-hero { display: none; }

.ahv3-hero {
  padding: var(--space-6, 32px) var(--space-4, 16px) var(--space-4, 16px);
  max-width: 920px;
  margin: 0 auto;
}
.ahv3-hero-inner { position: relative; }
.ahv3-hero-title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 500;
  font-size: clamp(34px, 6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
.ahv3-hero-sub {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 14px;
  max-width: 56ch;
}
.ahv3-hero-accent {
  width: 48px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  opacity: 0.85;
}

/* Locked state */
.ahv3-locked {
  max-width: 420px;
  margin: 32px auto;
  padding: var(--space-5, 24px);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg, 20px);
  box-shadow: 0 1px 2px rgba(20,20,20,0.04);
  text-align: center;
}
.ahv3-locked-icon { color: var(--ink-muted); display: inline-flex; margin-bottom: 8px; }
.ahv3-locked-title { font-family: var(--font-ui, 'Inter', sans-serif); font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.ahv3-locked-sub { font-size: 14px; color: var(--ink-muted); margin: 0 0 14px; }

/* Grid */
.ahv3-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4, 16px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4, 16px) var(--space-6, 32px);
}
@media (min-width: 760px) {
  .ahv3-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--space-5, 24px);
  }
}

/* Card */
.ahv3-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg, 20px);
  box-shadow: 0 1px 2px rgba(20,20,20,0.04);
  padding: 22px;
  transition: box-shadow 220ms ease, border-color 220ms ease;
}
.ahv3-card:hover { box-shadow: 0 6px 22px rgba(20,20,20,0.06); }

.ahv3-card-eyebrow {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ahv3-card-eyebrow > span:last-child {
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  opacity: 0.9;
}
.ahv3-card-title {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.ahv3-card-meta {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 14px;
  line-height: 1.45;
}
.ahv3-subhead {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 16px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.ahv3-rows:first-of-type ~ .ahv3-subhead:first-of-type,
.ahv3-card > .ahv3-subhead:first-of-type {
  /* keep top spacing for first subhead too — base rules above already handle it */
}
.ahv3-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

/* Rows */
.ahv3-rows { display: flex; flex-direction: column; }
.ahv3-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.ahv3-row:last-child { border-bottom: none; }
.ahv3-row--stack { flex-direction: column; align-items: stretch; gap: 10px; }
.ahv3-row--stack-sm { flex-wrap: wrap; }
.ahv3-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--page);
  border: 1px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: 0 0 auto;
}
.ahv3-row-avatar--icon { color: var(--ink-muted); font-size: 0; }
.ahv3-row-body { flex: 1 1 auto; min-width: 0; }
.ahv3-row-title {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ahv3-row-caption {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.35;
}
.ahv3-row-trail { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.ahv3-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ahv3-row-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--page);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px 8px;
}
.ahv3-row-tag--warn { color: #b45309; background: rgba(180, 83, 9, 0.08); border-color: rgba(180,83,9,0.2); }

/* Badges */
.ahv3-badge {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--page);
  color: var(--ink-muted);
}
.ahv3-badge--admin { color: var(--primary); background: var(--primary-tint, rgba(195,106,45,0.10)); border-color: rgba(195,106,45,0.25); }
.ahv3-badge--member { color: var(--ink); }
.ahv3-badge--kid { color: #2563eb; background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.18); }

/* Buttons */
.ahv3-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 14px;
  border-radius: var(--radius-md, 14px);
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
  white-space: nowrap;
}
.ahv3-btn:hover { background: var(--page); border-color: var(--hairline-strong, rgba(20,20,20,0.14)); }
.ahv3-btn:active { transform: translateY(1px); }
.ahv3-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ahv3-btn svg { display: inline-block; }
.ahv3-btn--primary { background: var(--primary); color: var(--primary-ink, #fff); border-color: var(--primary); }
.ahv3-btn--primary:hover { background: var(--primary); filter: brightness(1.05); border-color: var(--primary); }
.ahv3-btn--ghost { background: transparent; }
.ahv3-btn--small { font-size: 12px; padding: 7px 10px; border-radius: 10px; }
.ahv3-btn--icon { padding: 7px; }
.ahv3-btn--danger { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.ahv3-btn--danger:hover { background: #991b1b; border-color: #991b1b; }

/* Inputs */
.ahv3-input {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 14px);
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink);
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.ahv3-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint, rgba(195,106,45,0.18)); }
.ahv3-input--num { width: 80px; text-align: right; }

.ahv3-cat-input {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 6px;
  width: 100%;
  transition: background 160ms ease, border-color 160ms ease;
}
.ahv3-cat-input:hover { background: var(--page); }
.ahv3-cat-input:focus { outline: none; background: var(--card); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint, rgba(195,106,45,0.18)); }

.ahv3-cat-add { align-items: center; }
.ahv3-cat-add .ahv3-input { flex: 1 1 auto; }

/* iOS-style toggle */
.ahv3-toggle { position: relative; display: inline-block; cursor: pointer; user-select: none; }
.ahv3-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ahv3-toggle-track {
  display: inline-block;
  width: 44px;
  height: 26px;
  background: rgba(20,20,20,0.16);
  border-radius: 999px;
  position: relative;
  transition: background 220ms ease;
}
.ahv3-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 220ms ease;
}
.ahv3-toggle input:checked + .ahv3-toggle-track { background: var(--primary); }
.ahv3-toggle input:checked + .ahv3-toggle-track .ahv3-toggle-knob { transform: translateX(18px); }
.ahv3-toggle.is-locked,
.ahv3-toggle input:disabled + .ahv3-toggle-track { opacity: 0.55; cursor: not-allowed; }

/* Points trail (rewards card) */
.ahv3-points-trail { flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ahv3-points-trail .ahv3-input--num { width: 72px; }

/* Amount */
.ahv3-amt { font-family: var(--font-ui, 'Inter', sans-serif); font-weight: 700; font-size: 13px; }
.ahv3-amt.is-pos { color: #16a34a; }
.ahv3-amt.is-neg { color: #c0392b; }

/* Empty state */
.ahv3-empty { font-size: 13px; color: var(--ink-muted); padding: 10px 0; }

/* Danger zone */
.ahv3-danger {
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed rgba(185, 28, 28, 0.3);
  border-radius: var(--radius-md, 14px);
  background: rgba(185, 28, 28, 0.03);
}
.ahv3-danger-label {
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b91c1c;
  margin-bottom: 4px;
}
.ahv3-danger-text { font-size: 12px; color: var(--ink-muted); margin: 0 0 10px; line-height: 1.4; }

/* Mobile tweaks */
@media (max-width: 480px) {
  .ahv3-hero { padding: 20px 16px 12px; }
  .ahv3-card { padding: 18px; border-radius: 18px; }
  .ahv3-row { gap: 10px; }
  .ahv3-row-avatar { width: 32px; height: 32px; font-size: 18px; }
  .ahv3-points-trail { width: 100%; padding-left: 46px; }
}
/* ===== /ADMIN-HUB-V3 ===== */

/* ===== STATIONS-V3 ===== */
/* Hero above sub-pills */
.stations-v3-hero {
  padding: 22px 22px 20px;
  margin-bottom: 14px;
  text-align: left;
}
.stations-v3-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-cognac);
  font-weight: 700;
  margin-bottom: 6px;
}
.stations-v3-hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--ink, #1f1f1d);
  letter-spacing: -0.01em;
}
.stations-v3-hero-sub {
  margin: 0;
  color: var(--text-light, #6b6557);
  font-size: 14px;
  line-height: 1.45;
}

/* Sub-pill row refinement: emoji avatar inside pill */
.subtab-row [data-station-sub]::before {
  content: attr(data-emoji);
  margin-right: 6px;
  font-size: 16px;
}

/* Member panel base */
.station-v3 { animation: none; }
.station-v3-enter {
  animation: stationV3Enter 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes stationV3Enter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .station-v3-enter { animation: none; }
}

/* Hero card per member */
.station-v3-hero {
  background: var(--card-tinted, #F1EEE7);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius-xl, 16px);
  padding: 18px 18px 14px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.station-v3-hero-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.station-v3-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(195,106,45,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(195,106,45,0.18);
}
.station-v3-avatar--xl { font-size: 42px; }
.station-v3-hero-text {
  flex: 1;
  min-width: 0;
}
.station-v3-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink, #1f1f1d);
  letter-spacing: -0.005em;
  animation: v3NameFade 360ms ease-out;
}
@keyframes v3NameFade { 0% { opacity:0; transform: translateY(4px);} 100% { opacity:1; transform: none;} }
@media (prefers-reduced-motion: reduce) { .station-v3-name { animation: none; } }
.station-v3-role {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-light, #6b6557);
}
.station-v3-hero-actions {
  display: flex;
  gap: 6px;
  align-self: flex-start;
}
.station-v3-iconbtn {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.7);
  color: var(--ink, #1f1f1d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 150ms ease, transform 150ms ease;
}
.station-v3-iconbtn:hover { background: #fff; transform: translateY(-1px); }
.station-v3-iconbtn:active { transform: translateY(0); }
.station-v3-iconbtn.unlocked {
  background: var(--brand-cognac);
  color: #fff;
  border-color: transparent;
}

/* Streak chips inside hero */
.station-v3-streaks {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Accent stripe */
.station-v3-accent-stripe {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--brand-cognac);
  opacity: 0.55;
}
.station-v3-accent-stripe[data-accent="abs"] { background: #1f3a68; }
.station-v3-accent-stripe[data-accent="anne"] { background: #2f7a5f; }
.station-v3-accent-stripe[data-accent="lera"] { background: var(--brand-cognac); }
.station-v3-accent-stripe[data-accent="lebari"] { background: #d8b893; }

/* Personality tints on hero bg */
.station-v3--lebari .station-v3-hero { background: #F4EEE2; }
.station-v3--anne .station-v3-hero { background: #ECEFE8; }
.station-v3--abs .station-v3-hero { background: #ECEDF1; }

/* Cards inside body */
.station-v3-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.station-v3-card {
  border-radius: var(--radius-lg, 14px);
  padding: 16px;
}
.station-v3-card-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light, #6b6557);
  font-weight: 700;
  margin-bottom: 10px;
}

/* Ritual rows feel — keep existing care-btn but tame to v3 grid */
.station-v3-rituals {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.station-v3-rituals .anne-care-btn,
.station-v3-rituals .lera-care-btn,
.station-v3-rituals .lebari-care-btn {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), background 180ms ease, border-color 180ms ease;
}
.station-v3-rituals .anne-care-btn.done,
.station-v3-rituals .lera-care-btn.done,
.station-v3-rituals .lebari-care-btn.done {
  background: rgba(195,106,45,0.10);
  border-color: rgba(195,106,45,0.45);
  transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .station-v3-rituals .anne-care-btn,
  .station-v3-rituals .lera-care-btn,
  .station-v3-rituals .lebari-care-btn { transition: none; transform: none !important; }
}

/* Workouts inline card */
.station-v3 .station-workouts-inline { margin-top: 0; }

/* Hero compact on mobile */
@media (max-width: 540px) {
  .station-v3-hero { padding: 16px 14px 12px; }
  .station-v3-avatar { width: 56px; height: 56px; font-size: 32px; }
  .station-v3-name { font-size: 24px; }
  .station-v3-iconbtn { width: 32px; height: 32px; }
  .stations-v3-hero { padding: 18px 16px 16px; }
}
/* ===== /STATIONS-V3 ===== */

/* ===== WORKOUT CHECK-IN ===== */
.swi-checklist {
  background: var(--card-tinted, #F1EEE7);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl, 16px);
  padding: 18px 20px;
  margin-bottom: 16px;
  transition: background 220ms var(--ease-out, ease);
}
.swi-checklist.is-done { background: rgba(31,138,76,.08); border-color: rgba(31,138,76,.2); }
.swi-checklist-eyebrow {
  font: 500 11px/1 var(--font-ui, Inter);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint, #A6A39B);
  margin-bottom: 12px;
}
.swi-checklist-row { display: flex; align-items: center; gap: 14px; }
.swi-checklist-emoji {
  font-size: 28px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card, #fff);
  border-radius: 999px;
  flex-shrink: 0;
}
.swi-checklist-main { flex: 1; min-width: 0; }
.swi-checklist-title {
  font: 600 18px/1.2 var(--font-display, Fraunces), serif;
  color: var(--ink, #1A1A18);
  letter-spacing: -0.01em;
}
.swi-checklist-meta {
  font: 400 13px/1.4 var(--font-ui, Inter);
  color: var(--ink-muted, #6B6B66);
  margin-top: 4px;
}
.swi-checklist-btn { flex-shrink: 0; min-height: 44px; }
@media (max-width: 480px) {
  .swi-checklist { padding: 16px; }
  .swi-checklist-row { flex-wrap: wrap; }
  .swi-checklist-btn { width: 100%; margin-top: 8px; }
}

/* ===== STATIONS-V3 RITUAL ROWS (Phase 3 patch) ===== */
/* Replaces the 3-up colored grid with clean Linear/Things-style hairline rows.
   Applies to Lera, Anne, Abs, Lebari per-member station ritual lists. */

.lera-care-grid,
.anne-care-grid,
.abs-care-grid,
.lebari-care-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: var(--card, #fff);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  padding: 0 !important;
  box-shadow: var(--shadow-rest, 0 1px 2px rgba(20,20,20,0.04));
}

.lera-care-btn,
.anne-care-btn,
.abs-care-btn,
.lebari-care-btn {
  all: unset;
  display: grid !important;
  grid-template-columns: 28px 44px 1fr auto !important;
  align-items: center;
  gap: 14px !important;
  padding: 16px 18px !important;
  width: 100%;
  min-height: 64px;
  cursor: pointer;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--hairline) !important;
  border-radius: 0 !important;
  text-align: left !important;
  position: relative;
  transition: background 150ms var(--ease-out, ease);
  box-shadow: none !important;
  box-sizing: border-box;
}
.lera-care-btn:first-child,
.anne-care-btn:first-child,
.abs-care-btn:first-child,
.lebari-care-btn:first-child { border-top: 0 !important; }

.lera-care-btn:hover,
.anne-care-btn:hover,
.abs-care-btn:hover,
.lebari-care-btn:hover { background: var(--card-tinted, #F1EEE7) !important; }

/* Circular checkbox — synthesized via ::before so we don't touch the JS markup */
.lera-care-btn::before,
.anne-care-btn::before,
.abs-care-btn::before,
.lebari-care-btn::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid var(--ink-faint, #A6A39B);
  background: var(--card, #fff);
  transition: all 220ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  flex-shrink: 0;
}
.lera-care-btn.done::before,
.anne-care-btn.done::before,
.abs-care-btn.done::before,
.lebari-care-btn.done::before {
  background: var(--primary, #C36A2D);
  border-color: var(--primary, #C36A2D);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.lera-care-emoji,
.anne-care-emoji,
.abs-care-emoji,
.lebari-care-emoji {
  font-size: 22px !important;
  width: 44px;
  height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--card-tinted, #F1EEE7) !important;
  border-radius: 999px;
  flex-shrink: 0;
  box-shadow: none !important;
  transition: transform 220ms var(--ease-out, ease);
}
.lera-care-btn.done .lera-care-emoji,
.anne-care-btn.done .anne-care-emoji,
.abs-care-btn.done .abs-care-emoji,
.lebari-care-btn.done .lebari-care-emoji { transform: scale(0.92); opacity: .6; }

.lera-care-label,
.anne-care-label,
.abs-care-label,
.lebari-care-label {
  font: 500 15px/1.3 var(--font-ui, Inter), sans-serif !important;
  color: var(--ink, #1A1A18) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  min-width: 0;
  word-break: break-word;
  white-space: normal !important;
}
.lera-care-btn.done .lera-care-label,
.anne-care-btn.done .anne-care-label,
.abs-care-btn.done .abs-care-label,
.lebari-care-btn.done .lebari-care-label {
  text-decoration: line-through;
  color: var(--ink-muted, #6B6B66) !important;
}

.lera-care-pts,
.anne-care-pts,
.abs-care-pts,
.lebari-care-pts {
  font: 500 13px/1 var(--font-ui, Inter) !important;
  color: var(--ink-muted, #6B6B66) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lera-care-btn.done .lera-care-pts,
.anne-care-btn.done .anne-care-pts,
.abs-care-btn.done .abs-care-pts,
.lebari-care-btn.done .lebari-care-pts { color: var(--success, #1F8A4C) !important; }

/* ============================================================
   Hide orphaned workouts section (Phase 2D redirect target).
   The contents live inside #shared-workouts-host which is moved
   into Abs/Anne station panes by switchStationView().
   ============================================================ */
#section-workouts { display: none !important; }

/* Station sub-tab pill row (Rituals / Workouts inside Abs & Anne stations) */
.station-subtab-row {
  display: flex;
  gap: 8px;
  background: var(--card, #fff);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px;
  margin: 0 0 16px;
  width: fit-content;
}
.station-subtab {
  background: transparent;
  border: 0;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font: 500 14px/1 var(--font-ui);
  color: var(--ink-muted);
  min-height: 40px;
  transition: all 220ms var(--ease-out);
}
.station-subtab.is-active {
  background: var(--ink);
  color: var(--card);
}

/* ============================================================
   FINAL Lebari ritual override — neutralize legacy colored bands.
   Earlier rules in style.css (lines ~6512, ~6663) used
   nth-child(4n+1..4) gradients with !important. These cascade
   AFTER the v3 station-v3-rituals overrides because they appear
   later in the source. Pin them down here at the bottom.
   ============================================================ */
#lebari-station .lebari-care-grid .lebari-care-btn,
#lebari-station .lebari-care-grid .lebari-care-btn:nth-child(4n+1),
#lebari-station .lebari-care-grid .lebari-care-btn:nth-child(4n+2),
#lebari-station .lebari-care-grid .lebari-care-btn:nth-child(4n+3),
#lebari-station .lebari-care-grid .lebari-care-btn:nth-child(4n+4),
.station-v3-rituals.lebari-care-grid .lebari-care-btn,
.station-v3-rituals.lebari-care-grid .lebari-care-btn:nth-child(n) {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border-color: var(--hairline) !important;
}
#lebari-station .lebari-care-grid .lebari-care-btn::before,
.station-v3-rituals.lebari-care-grid .lebari-care-btn::before {
  background: transparent !important;
  background-image: none !important;
}
#lebari-station .lebari-care-grid .lebari-care-btn .lebari-care-emoji,
#lebari-station .lebari-care-grid .lebari-care-btn .lebari-care-label,
.station-v3-rituals.lebari-care-grid .lebari-care-btn .lebari-care-emoji,
.station-v3-rituals.lebari-care-grid .lebari-care-btn .lebari-care-label {
  color: var(--ink, #1B1A17) !important;
  filter: none !important;
}
#lebari-station .lebari-care-grid .lebari-care-btn.done,
.station-v3-rituals.lebari-care-grid .lebari-care-btn.done {
  background: var(--card-tinted, #F1EEE7) !important;
  filter: none !important;
}

/* Section eyebrow above each grid — try to suppress legacy "TODAY" headers
   that were colored boxes; let our v3 hero do the heading work. */

/* ============================================================
   KID PANEL — Duolingo-style adventure path
   Append-only. Lera + Lebari kids stations.
   ============================================================ */

.kp-shell {
  position: relative;
  margin: 12px auto 24px;
  max-width: 480px;
  padding: 16px 12px 56px;
  font-family: var(--font-ui, Inter, system-ui, sans-serif);
  color: var(--ink, #2A2826);
}

/* topbar -------------------------------------------------- */
.kp-topbar {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 12px;
}
.kp-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-radius: 12px;
  padding: 10px 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.kp-stat:disabled, .kp-stat[disabled] { cursor: default; }
.kp-stat-icon { font-size: 18px; line-height: 1; }
.kp-stat-num  {
  font-family: var(--font-display, Fraunces, serif);
  font-feature-settings: "tnum" 1;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
}
.kp-stat-lbl {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint, #8E8B85);
  margin-top: 2px;
  text-align: center;
}
.kp-mute {
  flex: 0 0 44px;
  background: #fff;
  border: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-radius: 12px;
  font-size: 18px;
  cursor: pointer;
}

/* daily quest -------------------------------------------- */
.kp-quest {
  background: #fff;
  border: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.kp-quest-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.kp-quest-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.kp-quest-meta {
  font-size: 11px;
  color: var(--ink-faint, #8E8B85);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kp-quest-bar {
  height: 10px;
  background: #EFEDE7;
  border-radius: 999px;
  overflow: hidden;
}
.kp-quest-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFC93C, #5CC65A);
  border-radius: 999px;
  transition: width 320ms ease;
}
.kp-quest-reward {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-faint, #8E8B85);
}

/* path ---------------------------------------------------- */
.kp-path {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  padding: 8px 0 0;
}
@media (min-width: 540px) {
  .kp-path { max-width: 360px; }
}

/* sections ----------------------------------------------- */
.kp-section {
  align-self: stretch;
  margin: 8px 0 4px;
  padding: 12px 16px;
  border-radius: 14px;
  color: #fff;
  text-align: center;
  background: var(--tone, #5A5752);
  box-shadow: 0 4px 0 0 var(--tone-shadow, #333);
}
.kp-section[data-tone="morning"]   { --tone:#FFC93C; --tone-shadow:#C8970F; color:#3a2a00; }
.kp-section[data-tone="school"]    { --tone:#3CA5FF; --tone-shadow:#0B6FBF; }
.kp-section[data-tone="afternoon"] { --tone:#5CC65A; --tone-shadow:#2F9430; }
.kp-section[data-tone="bedtime"]   { --tone:#A879FF; --tone-shadow:#6F3CC4; }
.kp-section-eyebrow {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .85;
}
.kp-section-title {
  font-family: var(--font-display, Fraunces, serif);
  font-size: 20px;
  font-weight: 700;
  margin-top: 2px;
}

/* nodes -------------------------------------------------- */
.kp-node {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: var(--tone, var(--ink-faint, #A6A39B));
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #fff;
  font: 700 11px/1.1 var(--font-ui, Inter, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  position: relative;
  text-align: center;
  box-shadow: 0 6px 0 0 var(--tone-shadow, #555);
  transition: transform 80ms ease, box-shadow 80ms ease, filter 220ms ease;
  margin: 0 6px;
}
.kp-node[data-tone="morning"]   { --tone:#FFC93C; --tone-shadow:#C8970F; color:#3a2a00; }
.kp-node[data-tone="school"]    { --tone:#3CA5FF; --tone-shadow:#0B6FBF; }
.kp-node[data-tone="afternoon"] { --tone:#5CC65A; --tone-shadow:#2F9430; }
.kp-node[data-tone="bedtime"]   { --tone:#A879FF; --tone-shadow:#6F3CC4; }
.kp-node.legendary              { --tone:#FFD700; --tone-shadow:#B58900; color:#3a2a00; }

.kp-node:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 0 var(--tone-shadow);
}
.kp-node.locked {
  --tone:#D9D7D2; --tone-shadow:#A6A39B;
  filter: grayscale(.9) opacity(.7);
  cursor: not-allowed;
}
.kp-node-emoji { font-size: 30px; line-height: 1; position: relative; }
.kp-node-label {
  font-size: 10px;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 84px;
}
.kp-node.done .kp-node-emoji::after {
  content: '✓';
  position: absolute;
  top: -4px; right: -10px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--tone-shadow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  box-shadow: 0 2px 0 var(--tone-shadow);
}
.kp-node.available { animation: kp-bob 1.4s ease-in-out infinite; }
@keyframes kp-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* serpentine positioning */
.kp-node[data-pos="left"]   { align-self: flex-start; }
.kp-node[data-pos="center"] { align-self: center; }
.kp-node[data-pos="right"]  { align-self: flex-end; }

/* chest -------------------------------------------------- */
.kp-chest {
  width: 120px; height: 96px;
  border-radius: 16px;
  background: linear-gradient(180deg, #C97A14, #8C5106);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 0 #6B3D04;
  margin: 24px auto 0;
  cursor: pointer;
  position: relative;
  font: 600 12px/1 var(--font-ui, Inter, system-ui, sans-serif);
  color: #FFF8DD;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.kp-chest-icon  { font-size: 36px; margin-bottom: 4px; }
.kp-chest-label { padding: 0 6px; }
.kp-chest.locked   { filter: grayscale(.6) opacity(.7); cursor: default; }
.kp-chest.unlocked {
  animation: kp-bob 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 4px rgba(255,215,0,.45), 0 6px 0 #6B3D04;
}
.kp-chest.opened {
  background: linear-gradient(180deg, #6B6B66, #3A3A38);
  cursor: default;
  box-shadow: 0 4px 0 #2a2a28;
}

/* mascot ------------------------------------------------- */
.kp-mascot {
  position: absolute;
  right: 12px;
  bottom: 8px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
  z-index: 5;
}
.kp-mascot-emoji {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--cream, #FBF7EE);
  border: 2px solid var(--cognac, #C97A14);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
  pointer-events: auto;
}
.kp-mascot-bubble {
  position: absolute;
  bottom: 70px;
  right: 0;
  max-width: 200px;
  background: #fff;
  border: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink, #2A2826);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.kp-mascot-bubble::after {
  content: '';
  position: absolute;
  right: 22px;
  bottom: -6px;
  width: 12px; height: 12px;
  background: #fff;
  border-right: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.08));
  transform: rotate(45deg);
}
.kp-shell .kp-mascot-bubble,
.kp-shell .kp-mascot-bubble.kp-bubble-show {
  opacity: 1;
  transform: translateY(0);
  animation: kp-bubble-dwell 3.4s ease forwards;
}
@keyframes kp-bubble-dwell {
  0%   { opacity: 0; transform: translateY(4px); }
  10%  { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}

/* +N particle -------------------------------------------- */
.kp-particle {
  position: fixed;
  pointer-events: none;
  font: 700 18px/1 var(--font-display, Fraunces, serif);
  color: var(--success, #1F8A4C);
  z-index: 9999;
  animation: kp-float 700ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes kp-float {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  20%  { opacity: 1; transform: translateY(-12px) scale(1.1); }
  100% { transform: translateY(-60px) scale(1); opacity: 0; }
}

/* confetti ----------------------------------------------- */
.kp-confetti {
  position: fixed;
  width: 8px; height: 12px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 9999;
  animation: kp-confetti-fly 1.3s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes kp-confetti-fly {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx,0), var(--dy,-200px)) rotate(540deg); opacity: 0; }
}

/* reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kp-node.available,
  .kp-chest.unlocked { animation: none; }
  .kp-particle, .kp-confetti { display: none; }
  .kp-mascot-bubble { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   KID PANEL v2 — Duolingo-style polish (overrides above .kp-*)
   ============================================================ */

/* Vibrant Duolingo-style tone palette ---------------------- */
.kp-shell .kp-node[data-tone="morning"],
.kp-shell .kp-node-wrap[data-tone="morning"],
.kp-shell .kp-section-banner[data-tone="morning"]   { --tone:#FFC83C; --tone-shadow:#C28D04; --tone-ink:#3a2a00; }
.kp-shell .kp-node[data-tone="school"],
.kp-shell .kp-node-wrap[data-tone="school"],
.kp-shell .kp-section-banner[data-tone="school"]    { --tone:#1CB0F6; --tone-shadow:#0C7DB5; --tone-ink:#fff; }
.kp-shell .kp-node[data-tone="afternoon"],
.kp-shell .kp-node-wrap[data-tone="afternoon"],
.kp-shell .kp-section-banner[data-tone="afternoon"] { --tone:#58CC02; --tone-shadow:#3F8E00; --tone-ink:#fff; }
.kp-shell .kp-node[data-tone="bedtime"],
.kp-shell .kp-node-wrap[data-tone="bedtime"],
.kp-shell .kp-section-banner[data-tone="bedtime"]   { --tone:#A560E8; --tone-shadow:#6E2BB5; --tone-ink:#fff; }
.kp-shell .kp-node.legendary                        { --tone:#FFC107; --tone-shadow:#A07000; --tone-ink:#3a2a00; }

/* Topbar — compact Duo-style stat pills -------------------- */
.kp-shell .kp-topbar { gap: 8px; align-items: center; }
.kp-shell .kp-stat {
  flex: 1 1 0;
  min-width: 80px;
  flex-direction: row;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--hairline, rgba(0,0,0,0.08));
  background: #fff;
  align-items: center;
  justify-content: flex-start;
}
.kp-shell .kp-stat-icon { font-size: 20px; }
.kp-shell .kp-stat-num {
  font-family: var(--font-display, Fraunces, serif);
  font-size: 24px;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  line-height: 1;
  margin: 0;
  flex: 0 0 auto;
}
.kp-shell .kp-stat-lbl {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint, #8E8B85);
  margin: 0;
  text-align: left;
  line-height: 1;
}
.kp-shell .kp-streak  .kp-stat-icon { color: #FF7A00; }
.kp-shell .kp-points  .kp-stat-icon { color: #C97A14; }
.kp-shell .kp-hearts  .kp-stat-icon { color: #FFC107; }
.kp-shell .kp-mute {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--hairline, rgba(0,0,0,0.08));
  font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Daily quest — encouraging copy --------------------------- */
.kp-shell .kp-quest { padding: 14px 16px; border-radius: 16px; }
.kp-shell .kp-quest-head { align-items: center; margin-bottom: 4px; }
.kp-shell .kp-quest-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint, #8E8B85);
  font-weight: 700;
}
.kp-shell .kp-quest-title {
  font-family: var(--font-display, Fraunces, serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #2A2826);
  margin: 2px 0 10px;
  line-height: 1.2;
}
.kp-shell .kp-quest-meta {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink, #2A2826);
  text-transform: none;
  font-weight: 700;
  font-feature-settings: "tnum" 1;
}
.kp-shell .kp-quest-fill { background: linear-gradient(90deg, #FFC83C, #58CC02); }
.kp-shell .kp-quest-reward { margin-top: 10px; font-size: 12px; }

/* Path container — relative for SVG layer ------------------ */
.kp-shell .kp-path {
  position: relative;
  display: block;
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  gap: 0;
}
.kp-shell .kp-path-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.kp-shell .kp-path-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  padding: 8px 0 0;
}

/* Section banner — bold dramatic header -------------------- */
.kp-shell .kp-section-banner {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 80px;
  padding: 14px 18px;
  margin: 16px 0 8px;
  border-radius: 18px;
  background: var(--page-paper, #FBF7EE);
  border: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-left: 8px solid var(--tone, #1CB0F6);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  color: var(--ink, #2A2826);
}
.kp-shell .kp-section-banner:first-child { margin-top: 4px; }
.kp-shell .kp-section-banner-text { flex: 1 1 auto; min-width: 0; }
.kp-shell .kp-section-banner .kp-section-eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tone-shadow, #555);
  font-weight: 700;
  opacity: 1;
}
.kp-shell .kp-section-banner .kp-section-title {
  font-family: var(--font-display, Fraunces, serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink, #2A2826);
  margin-top: 2px;
}
.kp-shell .kp-section-banner-mascot {
  flex: 0 0 60px;
  width: 60px; height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  line-height: 1;
}

/* Node-wrap — node + caption below ------------------------- */
.kp-shell .kp-node-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  width: max-content;
  max-width: 100%;
}
.kp-shell .kp-node-wrap[data-pos="left"]   { align-self: flex-start; margin-left: 12px; }
.kp-shell .kp-node-wrap[data-pos="center"] { align-self: center; }
.kp-shell .kp-node-wrap[data-pos="right"]  { align-self: flex-end; margin-right: 12px; }

/* Bigger nodes — icon only, no text inside ----------------- */
.kp-shell .kp-node {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: var(--tone, #A6A39B);
  color: var(--tone-ink, #fff);
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  box-shadow: 0 8px 0 0 var(--tone-shadow, #555);
  transition: transform 80ms ease, box-shadow 80ms ease, filter 220ms ease;
}
@media (min-width: 540px) {
  .kp-shell .kp-node { width: 112px; height: 112px; }
  .kp-shell .kp-node-emoji { font-size: 52px; }
}
.kp-shell .kp-node-emoji {
  font-size: 44px;
  line-height: 1;
  position: relative;
}
.kp-shell .kp-node-caption {
  display: -webkit-box;
  max-width: 130px;
  text-align: center;
  font: 600 12px/1.2 var(--font-ui, Inter, system-ui, sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint, #8E8B85);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  hyphens: auto;
}
.kp-shell .kp-node:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 0 var(--tone-shadow);
}
.kp-shell .kp-node.done {
  box-shadow: inset 0 0 0 3px #fff, 0 8px 0 0 var(--tone-shadow);
}
.kp-shell .kp-node.done::after {
  content: '✓';
  position: absolute;
  top: -6px; right: -6px;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--tone-shadow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
  box-shadow: 0 2px 0 var(--tone-shadow);
  z-index: 2;
}
.kp-shell .kp-node.locked {
  --tone:#D9D7D2; --tone-shadow:#A6A39B;
  filter: grayscale(.85) opacity(.75);
  cursor: not-allowed;
  animation: kp-bob-slow 2.6s ease-in-out infinite;
}
.kp-shell .kp-node.locked::before {
  content: '🔒';
  position: absolute;
  top: -4px; right: -4px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 var(--tone-shadow);
  z-index: 2;
}
@keyframes kp-bob-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Hide v1 label artifact if any leaks through -------------- */
.kp-shell .kp-node .kp-node-label { display: none; }

/* Mascot upgrade — bigger, slower bob, sticky -------------- */
.kp-shell .kp-mascot {
  position: sticky;
  bottom: 16px;
  align-self: flex-end;
  margin-left: auto;
  margin-top: -64px;
  margin-right: 8px;
  right: auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  gap: 10px;
  z-index: 5;
  pointer-events: none;
}
.kp-shell .kp-mascot-emoji {
  width: 96px;
  height: 96px;
  font-size: 56px;
  background: var(--cream, #FBF7EE);
  border: 3px solid var(--cognac, #C97A14);
  box-shadow: 0 4px 0 rgba(0,0,0,0.10);
  pointer-events: auto;
  animation: kp-bob-mascot 3s ease-in-out infinite;
}
@keyframes kp-bob-mascot {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.kp-shell .kp-mascot-bubble {
  position: relative;
  bottom: auto;
  right: auto;
  min-width: 220px;
  max-width: 240px;
  margin-bottom: 24px;
  pointer-events: auto;
}
/* Caret pointing TO the mascot (right side of bubble) */
.kp-shell .kp-mascot-bubble::after {
  right: -6px;
  bottom: 16px;
  left: auto;
  border-right: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.08));
  border-top: 0;
  border-left: 0;
  transform: rotate(-45deg);
  background: #fff;
}

/* Reduced motion — snap transitions ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .kp-shell .kp-node,
  .kp-shell .kp-node.available,
  .kp-shell .kp-node.locked,
  .kp-shell .kp-mascot-emoji,
  .kp-shell .kp-chest.unlocked { animation: none !important; }
  .kp-shell .kp-node,
  .kp-shell .kp-quest-fill,
  .kp-shell .kp-mascot-bubble { transition-duration: 80ms !important; }
}

/* ============================================================
   WORKOUTS PANE v3 — Ladder/iFit/Go-Club polish
   Hosted inside Abs and Anne stations (also section-workouts).
   ============================================================ */

/* Person-tabs hidden when host is locked to a single station owner */
.shared-workouts-host.kp-host-locked-mr  .workout-person-tabs,
#shared-workouts-host.kp-host-locked-mr  .workout-person-tabs,
.shared-workouts-host.kp-host-locked-mrs .workout-person-tabs,
#shared-workouts-host.kp-host-locked-mrs .workout-person-tabs { display: none !important; }
/* Also hide the legacy "Set Goals" header bar inside locked stations */
#shared-workouts-host.kp-host-locked-mr  > .section-header,
#shared-workouts-host.kp-host-locked-mrs > .section-header { display: none !important; }

#shared-workouts-host { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Shared card chrome ---------- */
.wk-card {
  background: var(--card, #fff);
  border: 1px solid var(--hairline, rgba(20,20,20,0.08));
  border-radius: 14px;
  box-shadow: var(--shadow-rest, 0 1px 2px rgba(20,20,20,0.04));
  padding: 18px;
}
.wk-card-eyebrow {
  font: 500 11px/1 var(--font-ui, 'Inter', system-ui, sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted, #6B6B66);
  margin-bottom: 12px;
}

/* ---------- 1. Hero (dark, dramatic) ---------- */
.wk-hero {
  position: relative;
  border-radius: 14px;
  padding: 28px 22px 22px;
  color: #F4EFE6;
  overflow: hidden;
  background: linear-gradient(135deg, #1d2e4a 0%, #2a4061 100%);
  box-shadow: 0 10px 28px -16px rgba(20,30,55,0.55), 0 1px 2px rgba(20,20,20,0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wk-hero--abs  { background: linear-gradient(135deg, #1d2e4a 0%, #5a3320 100%); }
.wk-hero--anne { background: linear-gradient(135deg, #1d2e4a 0%, #1f4a3c 100%); }
.wk-hero-eyebrow {
  font: 500 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.78);
}
.wk-hero-stat { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 4px; }
.wk-hero-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(72px, 14vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #F4EFE6;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.wk-hero-cap {
  font: 500 12px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,239,230,0.7);
}
.wk-hero-bar { display: flex; flex-direction: column; gap: 8px; }
.wk-bar { display: flex; gap: 6px; }
.wk-bar-seg {
  flex: 1 1 0;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  display: block;
}
.wk-bar-seg.on { background: var(--brand-cognac, #C46A3F); }
.wk-bar-label {
  font: 500 12px/1 'Inter', system-ui, sans-serif;
  color: rgba(244,239,230,0.78);
  font-variant-numeric: tabular-nums;
}
.wk-hero-cta {
  margin-top: 4px;
  min-height: 56px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font: 600 15px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
  background: var(--brand-cognac, #C46A3F);
  color: #fff;
  transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 6px 18px -8px rgba(196,106,63,0.5);
}
.wk-hero-cta:hover { background: #B25D34; }
.wk-hero-cta:active { transform: scale(0.98); }
.wk-hero-cta.is-done {
  background: rgba(255,255,255,0.14);
  color: #F4EFE6;
  box-shadow: none;
}

/* ---------- 3. Weekly grid ---------- */
.wk-week-card { position: relative; }
.wk-week-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.wk-week-label {
  text-align: center;
  font: 600 14px/1 'Inter', system-ui, sans-serif;
  color: var(--ink, #1A1A18);
  font-variant-numeric: tabular-nums;
}
.wk-iconbtn {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--hairline, rgba(20,20,20,0.08));
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink, #1A1A18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease, border-color 120ms ease;
}
.wk-iconbtn:hover { background: #FAF7F2; border-color: var(--hairline-strong, rgba(20,20,20,0.14)); }
.wk-iconbtn.unlocked { border-color: var(--brand-cognac, #C46A3F); color: var(--brand-cognac, #C46A3F); }

.wk-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.wk-day {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 2px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-radius: 12px;
  min-height: 88px;
  transition: background 120ms ease;
}
.wk-day:hover { background: rgba(196,106,63,0.05); }
.wk-day-name {
  font: 500 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted, #6B6B66);
}
.wk-day-circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #1A1A18);
  border: 1px solid var(--hairline-strong, rgba(20,20,20,0.14));
  background: #fff;
  font-variant-numeric: tabular-nums;
  transition: transform 120ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.wk-day.is-done .wk-day-circle {
  background: var(--brand-cognac, #C46A3F);
  border-color: var(--brand-cognac, #C46A3F);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 22px;
}
.wk-day.is-today .wk-day-circle {
  outline: 2px dotted var(--brand-cognac, #C46A3F);
  outline-offset: 3px;
}
.wk-day.is-future { opacity: 0.3; }
.wk-day.is-future:hover { background: transparent; cursor: default; }
.wk-day-plan { font-size: 14px; line-height: 1; }
.wk-day-plan-placeholder { display: block; height: 14px; }
.wk-day:active .wk-day-circle { transform: scale(0.94); }
.wk-lock-hint {
  margin-top: 10px;
  font: 500 12px/1.4 'Inter', system-ui, sans-serif;
  color: var(--brand-cognac, #C46A3F);
  text-align: center;
}
@media (max-width: 480px) {
  .wk-day-circle { width: 44px; height: 44px; font-size: 16px; }
  .wk-day.is-done .wk-day-circle { font-size: 19px; }
  .wk-day { min-height: 78px; }
  .wk-hero { padding: 24px 18px 18px; }
}

/* ---------- 4. Heatmap ---------- */
.wk-heatmap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.wk-heat-cell {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--hairline-strong, rgba(20,20,20,0.14));
  transition: transform 120ms ease;
  display: block;
  cursor: default;
}
.wk-heat-cell.is-done {
  background: var(--brand-cognac, #C46A3F);
  border-color: var(--brand-cognac, #C46A3F);
}
.wk-heat-cell.is-today {
  outline: 2px solid rgba(196,106,63,0.4);
  outline-offset: 2px;
}
.wk-heat-cell:hover { transform: scale(1.18); }

/* ---------- 5. Achievement badges ---------- */
.wk-badges {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wk-badges::-webkit-scrollbar { display: none; }
.wk-badge {
  flex: 0 0 auto;
  width: 76px;
  min-height: 88px;
  padding: 10px 6px 8px;
  border: 1px solid var(--hairline, rgba(20,20,20,0.08));
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  text-align: center;
  transition: transform 160ms ease, border-color 160ms ease;
}
.wk-badge.is-locked { filter: grayscale(1); opacity: 0.5; }
.wk-badge.is-earned { border-color: rgba(196,106,63,0.35); }
.wk-badge.is-earned:hover { transform: translateY(-1px); }
.wk-badge-emoji { font-size: 26px; line-height: 1; }
.wk-badge-label {
  font: 500 11px/1.2 'Inter', system-ui, sans-serif;
  color: var(--ink, #1A1A18);
  letter-spacing: 0.02em;
}
.wk-badge-pill {
  margin-top: 2px;
  font: 600 9px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b3a1f;
  background: #FAF1E8;
  border: 1px solid rgba(196,106,63,0.25);
  padding: 3px 6px;
  border-radius: 999px;
}

/* ---------- 6. Plan list ---------- */
.wk-plan-list { display: flex; flex-direction: column; }
.wk-plan-row {
  appearance: none;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline, rgba(20,20,20,0.08));
  display: grid;
  grid-template-columns: 64px 1fr 24px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 4px;
  cursor: pointer;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink, #1A1A18);
  transition: background 120ms ease;
}
.wk-plan-row:last-child { border-bottom: 0; }
.wk-plan-row:hover { background: rgba(196,106,63,0.04); }
.wk-plan-row.is-today::before {
  content: "";
  position: absolute;
  left: -4px; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--brand-cognac, #C46A3F);
}
.wk-plan-day {
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  color: var(--ink, #1A1A18);
  letter-spacing: 0.04em;
}
.wk-plan-mid { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wk-plan-emoji { font-size: 18px; line-height: 1; }
.wk-plan-name { font: 500 14px/1.2 'Inter', system-ui, sans-serif; color: var(--ink, #1A1A18); }
.wk-plan-empty {
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  color: var(--brand-cognac, #C46A3F);
  opacity: 0.7;
}
.wk-plan-edit {
  font-size: 18px;
  color: var(--ink-faint, #A6A39B);
  text-align: right;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .wk-hero-cta, .wk-day, .wk-day-circle, .wk-heat-cell, .wk-badge, .wk-plan-row, .wk-iconbtn {
    transition: none !important;
  }
  .wk-hero-cta:active, .wk-day:active .wk-day-circle { transform: none !important; }
}

/* ===== STATIONS POLISH PATCH ===== */

/* 1. Mascot — fix to viewport on mobile so it doesn't float weirdly inside the shell */
@media (max-width: 768px) {
  .kp-mascot {
    position: fixed;
    right: 12px;
    bottom: 80px;        /* clears the bottom tab bar */
    z-index: 50;
  }
  .kp-mascot-emoji { width: 56px; height: 56px; font-size: 30px; }
  .kp-mascot-bubble { bottom: 64px; right: 8px; max-width: 180px; font-size: 13px; }
}

/* 2. Ritual rows — fix mobile column wrapping (Anne and others). The previous
   grid 28px / 44px / 1fr / auto squeezed the label too tight, forcing the
   text to wrap one letter per line. Switch to flex with min-width:0 on label. */
.station-v3-rituals .anne-care-btn,
.station-v3-rituals .lera-care-btn,
.station-v3-rituals .abs-care-btn,
.station-v3-rituals .lebari-care-btn,
.lera-care-grid .lera-care-btn,
.anne-care-grid .anne-care-btn,
.abs-care-grid .abs-care-btn,
.lebari-care-grid .lebari-care-btn {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  grid-template-columns: none !important;
  padding: 14px 16px !important;
  min-height: 60px;
}
.lera-care-emoji,
.anne-care-emoji,
.abs-care-emoji,
.lebari-care-emoji {
  width: 36px !important;
  height: 36px !important;
  font-size: 18px !important;
  flex-shrink: 0;
}
.lera-care-label,
.anne-care-label,
.abs-care-label,
.lebari-care-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  font-size: 14px !important;
  line-height: 1.35 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lera-care-pts,
.anne-care-pts,
.abs-care-pts,
.lebari-care-pts {
  flex-shrink: 0 !important;
  font-size: 12px !important;
}

/* 3. Page bg — slightly cooler off-white so white cards lift more */
:root {
  --page-v3-tinted: #F2EEE5;
}
#section-learning .v3-card,
#section-learning .station-v3-rituals,
#section-learning .lera-care-grid,
#section-learning .anne-care-grid,
#section-learning .abs-care-grid,
#section-learning .lebari-care-grid {
  background: #FFFFFF !important;
}
#section-learning {
  background: var(--page-v3-tinted) !important;
}

/* 4. Double scroller — kp-shell should not have its own scroll on mobile */
.kp-shell { overflow: visible !important; max-height: none !important; }

/* 5. Workout heatmap — smaller dots on mobile, week start Sunday */
.wk-heatmap-grid {
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 6px !important;
}
.wk-heat-cell {
  width: auto !important;
  height: 0 !important;
  padding-bottom: 100% !important; /* square via aspect ratio */
  position: relative;
  border-radius: 999px !important;
  max-width: 36px;
  margin: 0 auto !important;
}
@media (max-width: 480px) {
  .wk-heat-cell { max-width: 28px; }
  .wk-heatmap-grid { gap: 4px !important; }
}

/* 6. Achievement badges — clearer state */
.wk-badge {
  position: relative;
}
.wk-badge.locked {
  filter: grayscale(0.85) opacity(0.55) !important;
}
.wk-badge.locked::after {
  content: '🔒';
  position: absolute;
  top: 4px; right: 4px;
  font-size: 12px;
}
.wk-badge.earned::after {
  content: '✓';
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px; line-height: 16px;
  background: var(--success, #1F8A4C);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.wk-badge .wk-badge-progress {
  font-size: 10px;
  color: var(--ink-muted);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* 7. Kid path on mobile — make caption stay readable, prevent overflow */
@media (max-width: 480px) {
  .kp-shell { max-width: 100%; padding: 12px 8px 80px; }
  .kp-node { width: 88px; height: 88px; }
  .kp-node-emoji { font-size: 38px; }
  .kp-node-caption {
    max-width: 110px;
    font-size: 11px;
  }
  .kp-section-banner-mascot { font-size: 44px; }
  .kp-section-title { font-size: 22px; }
  /* tighten topbar pills so 3 fit on iPhone width */
  .kp-stat { padding: 8px 10px; min-width: 0; flex: 1 1 0; }
  .kp-stat-num { font-size: 20px; }
  .kp-stat-lbl { font-size: 9px; }
}

/* heatmap day-of-week header + grid wrapper */
.wk-heat-dows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
  font: 500 10px/1 var(--font-ui, Inter);
  letter-spacing: .08em;
  color: var(--ink-faint, #A6A39B);
  text-transform: uppercase;
  text-align: center;
}
.wk-heat-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
@media (max-width: 480px) {
  .wk-heat-dows, .wk-heat-grid { gap: 4px; }
}
.wk-heat-cell.is-future {
  background: transparent !important;
  border: 1px dashed rgba(20,20,20,.08) !important;
  opacity: .5;
}
.wk-heat-cell.is-done { background: var(--primary, #C36A2D) !important; border-color: var(--primary, #C36A2D) !important; }
.wk-heat-cell.is-today {
  outline: 2px solid var(--primary, #C36A2D);
  outline-offset: 2px;
}

/* ===== STATIONS FINAL POLISH — full-width, color, responsive ===== */

/* 1. Section is full-width on mobile, no horizontal overflow */
#section-learning {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 14px 100px !important;
  overflow-x: hidden;
  box-sizing: border-box;
}
@media (min-width: 769px) {
  #section-learning { max-width: 880px; padding: 28px 24px 80px !important; }
}

/* 2. Station body containers — full width, no awkward gaps */
#abs-station, #anne-station-wrap, #lera-station, #lebari-station {
  width: 100%;
  margin: 0;
}
.station-body, .anne-station-body, .lera-station-body, .lebari-station-body {
  width: 100%;
  padding: 0 !important;
}

/* 3. Hero — let icon buttons be visible (no overflow:hidden cropping) */
.station-v3-hero { overflow: visible !important; padding: 16px 14px 14px !important; }
.station-v3-hero-top { gap: 12px; }
.station-v3-hero-actions {
  align-self: flex-start;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.station-v3-iconbtn { width: 36px !important; height: 36px !important; }
@media (max-width: 380px) {
  .station-v3-avatar { width: 52px !important; height: 52px !important; font-size: 28px !important; }
  .station-v3-name { font-size: 22px !important; }
  .station-v3-role { font-size: 12px; }
  .station-v3-iconbtn { width: 32px !important; height: 32px !important; }
  .station-v3-iconbtn svg { width: 14px; height: 14px; }
}

/* 4. Per-member hero color — give each station its own warmth */
#abs-station .station-v3-hero {
  background: linear-gradient(135deg, #f4ebd9 0%, #e8d4b3 100%) !important;
  border-color: rgba(195,106,45,0.22) !important;
}
#anne-station-wrap .station-v3-hero {
  background: linear-gradient(135deg, #e8efe0 0%, #d4e0c8 100%) !important;
  border-color: rgba(47,122,95,0.22) !important;
}
#lera-station .station-v3-hero {
  background: linear-gradient(135deg, #fbeed7 0%, #f4d9ad 100%) !important;
  border-color: rgba(195,106,45,0.30) !important;
}
#lebari-station .station-v3-hero {
  background: linear-gradient(135deg, #fde7e0 0%, #fad6c3 100%) !important;
  border-color: rgba(212,118,46,0.22) !important;
}
.station-v3-avatar {
  background: rgba(255,255,255,0.65) !important;
  box-shadow: inset 0 0 0 1.5px rgba(195,106,45,0.28) !important;
}

/* 5. Heatmap dots — sweet spot size */
.wk-heat-cell {
  max-width: 40px !important;
  background: var(--card, #fff);
  border: 1.5px solid rgba(195,106,45,0.22);
  display: block;
}
@media (max-width: 480px) { .wk-heat-cell { max-width: 36px !important; } }
@media (min-width: 700px) { .wk-heat-cell { max-width: 48px !important; } }

/* 6. Weekly fitness day circles — cap size on mobile so 7 fit comfortably */
@media (max-width: 480px) {
  .fitness-day { padding: 8px 2px; }
  .fitness-day-ring { width: 36px !important; height: 36px !important; font-size: 12px !important; }
  .fitness-day-name { font-size: 11px; }
  .fitness-day-num { font-size: 11px; }
}
@media (max-width: 380px) {
  .fitness-day-ring { width: 32px !important; height: 32px !important; }
}
.fitness-week-grid { gap: 4px !important; }
@media (min-width: 481px) { .fitness-week-grid { gap: 8px !important; } }

/* 7. Workout hero — readable on narrow phones */
.wk-hero { padding: 18px 16px !important; }
.wk-hero-num { font-size: clamp(48px, 14vw, 88px) !important; line-height: 1 !important; }
.wk-week-bar { gap: 4px !important; }

/* ===== STATIONS POLISH PATCH 2 ===== */

/* Fix: heatmap container was a 7-col grid, but we now wrap children in
   .wk-heat-dows + .wk-heat-grid which each have their own 7-col grid.
   Reset the parent to block flow so the two stack vertically. */
#workout-heatmap.wk-heatmap,
.wk-heatmap-card #workout-heatmap {
  display: block !important;
  grid-template-columns: none !important;
}

/* Bigger heatmap dots — visually present */
.wk-heat-grid { gap: 8px !important; }
.wk-heat-cell {
  max-width: 100% !important;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 999px;
}
.wk-heat-grid .wk-heat-cell {
  background: transparent;
  border: 1.5px solid rgba(195,106,45,0.30);
}
.wk-heat-grid .wk-heat-cell.is-done {
  background: var(--brand-cognac, #C36A2D);
  border-color: var(--brand-cognac, #C36A2D);
}
.wk-heat-grid .wk-heat-cell.is-future {
  background: transparent;
  border-style: dashed;
  border-color: rgba(20,20,20,0.10);
  opacity: 0.6;
}
@media (max-width: 480px) { .wk-heat-grid { gap: 6px !important; } }

/* Lera school card — separate it visually from rituals with proper spacing
   and make it look like its own subsection */
#lera-school-host,
#lebari-school-host {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
#lera-school-host:empty,
#lebari-school-host:empty {
  display: none;
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* School host now lives inside its own pane — no divider needed */
#lera-pane-school #lera-school-host,
#lebari-pane-school #lebari-school-host {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Sub-tab row spacing inside kid panels */
#lera-station .station-subtab-row,
#lebari-station .station-subtab-row {
  margin: 12px 0 16px;
}

/* ===== HEATMAP — Apple-rings compact size ===== */
/* Cap each dot to ~24-28px, center the grid so dots don't stretch full-width.
   Apple's weekly ring strip uses small concentric rings; mimic the compact feel. */
.wk-heatmap-card .wk-heat-dows,
.wk-heatmap-card .wk-heat-grid {
  max-width: 280px;
  margin-left: 0;
  gap: 6px !important;
}
.wk-heatmap-card .wk-heat-cell {
  max-width: 28px !important;
  width: 100%;
  margin: 0 auto !important;
}
@media (min-width: 480px) {
  .wk-heatmap-card .wk-heat-dows,
  .wk-heatmap-card .wk-heat-grid { max-width: 320px; gap: 8px !important; }
  .wk-heatmap-card .wk-heat-cell { max-width: 32px !important; }
}

/* Slightly thicker stroke on empty cells so they read as rings, not just borders */
.wk-heatmap-card .wk-heat-grid .wk-heat-cell:not(.is-done):not(.is-future) {
  border-width: 2px;
  border-color: rgba(195,106,45,0.35);
}

/* ===== HEATMAP — Apple Activity Ring style (final) =====
   Force perfect circles, donut-style filled rings (cognac stroke, hollow center),
   tight spacing, centered container. Override the broken padding-bottom hack. */

.wk-heatmap-card .wk-heat-dows {
  display: grid !important;
  grid-template-columns: repeat(7, 28px) !important;
  justify-content: start;
  gap: 8px !important;
  margin-bottom: 8px !important;
  text-align: center;
}
.wk-heatmap-card .wk-heat-grid {
  display: grid !important;
  grid-template-columns: repeat(7, 28px) !important;
  justify-content: start;
  gap: 8px !important;
}
@media (min-width: 480px) {
  .wk-heatmap-card .wk-heat-dows,
  .wk-heatmap-card .wk-heat-grid {
    grid-template-columns: repeat(7, 32px) !important;
    gap: 10px !important;
  }
}

/* Hard-reset the cell: force perfect circle, kill the padding-bottom hack */
.wk-heatmap-card .wk-heat-cell {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  border: 2.5px solid rgba(195,106,45,0.20) !important;
  box-sizing: border-box;
  position: relative;
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (min-width: 480px) {
  .wk-heatmap-card .wk-heat-cell {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    border-width: 3px !important;
  }
}

/* Done = Apple ring: thick cognac stroke, hollow center */
.wk-heatmap-card .wk-heat-cell.is-done {
  background: transparent !important;
  border-color: var(--brand-cognac, #C36A2D) !important;
  border-width: 5px !important;
  box-shadow: 0 0 0 1px rgba(195,106,45,0.10);
}
@media (min-width: 480px) {
  .wk-heatmap-card .wk-heat-cell.is-done { border-width: 6px !important; }
}

/* Today: pulse + cognac dotted ring */
.wk-heatmap-card .wk-heat-cell.is-today {
  outline: 2px dashed var(--brand-cognac, #C36A2D);
  outline-offset: 3px;
  animation: wk-today-pulse 2s ease-in-out infinite;
}
@keyframes wk-today-pulse {
  0%, 100% { outline-color: rgba(195,106,45,0.55); }
  50% { outline-color: rgba(195,106,45,1); }
}
@media (prefers-reduced-motion: reduce) {
  .wk-heatmap-card .wk-heat-cell.is-today { animation: none; }
}

/* Future: faint dashed ring */
.wk-heatmap-card .wk-heat-cell.is-future {
  border-style: dashed !important;
  border-color: rgba(20,20,20,0.10) !important;
  border-width: 1.5px !important;
  opacity: 0.6;
}

/* Hover: subtle pop */
.wk-heatmap-card .wk-heat-cell:not(.is-future):hover {
  transform: scale(1.15);
}

/* DOW headers: ink-faint, smaller, tighter tracking */
.wk-heatmap-card .wk-heat-dows span {
  font: 600 10px/1 var(--font-ui, Inter);
  letter-spacing: 0.06em;
  color: var(--ink-faint, #A6A39B);
  text-align: center;
  text-transform: uppercase;
}

/* ===== REWARDS-V3 ===== */
#section-rewards .rwv3-hero {
  position: relative;
  border-radius: 16px;
  padding: 24px 22px 20px;
  margin: 0 0 14px;
  color: var(--v3-cream, #faf6ee);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1f3f 100%);
}
#section-rewards .rwv3-hero-bg {
  position: absolute;
  inset: -20% -20% auto auto;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle at 70% 30%, rgba(195,106,45,0.30), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
#section-rewards .rwv3-hero-inner {
  position: relative;
  z-index: 1;
}
#section-rewards .rwv3-hero-eyebrow {
  font: 600 11px/1.2 var(--font-ui, Inter);
  letter-spacing: 0.14em;
  color: rgba(250,246,238,0.62);
  text-transform: uppercase;
  margin-bottom: 6px;
}
#section-rewards .rwv3-hero-num {
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-weight: 600;
  line-height: 0.9;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
  margin: 0;
}
#section-rewards .rwv3-hero-num-val {
  font-size: clamp(64px, 16vw, 96px);
}
#section-rewards .rwv3-hero-sub {
  font: 600 11px/1 var(--font-ui, Inter);
  letter-spacing: 0.14em;
  color: rgba(250,246,238,0.55);
  text-transform: uppercase;
  margin: 6px 0 0;
}
#section-rewards .rwv3-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
}
#section-rewards .rwv3-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 5px 10px;
  font: 500 12px/1 var(--font-ui, Inter);
  font-feature-settings: "tnum" 1;
  color: rgba(250,246,238,0.92);
}
#section-rewards .rwv3-hero-pill-avatar { font-size: 13px; }
#section-rewards .rwv3-hero-pill-name { color: rgba(250,246,238,0.7); }
#section-rewards .rwv3-hero-pill b { color: var(--v3-cream); }

#section-rewards .rwv3-hero-progress {
  margin: 16px 0 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
}
#section-rewards .rwv3-hero-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--v3-cognac, #c36a2d), #d68750);
  transition: width 360ms ease;
}
#section-rewards .rwv3-hero-progress-label {
  font: 500 12px/1.3 var(--font-ui, Inter);
  font-feature-settings: "tnum" 1;
  color: rgba(250,246,238,0.78);
  margin-top: 6px;
}
#section-rewards .rwv3-hero-activity {
  font: 500 11px/1.3 var(--font-ui, Inter);
  font-feature-settings: "tnum" 1;
  color: rgba(250,246,238,0.5);
  margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) {
  #section-rewards .rwv3-hero-progress-fill { transition: none; }
}

/* Sub-tab pill row v3 */
#section-rewards .rwv3-subtab-row {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
#section-rewards .rwv3-pill {
  background: transparent;
  color: var(--v3-ink, #1a1d24);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 8px 14px;
  font: 600 13px/1 var(--font-ui, Inter);
  letter-spacing: 0.01em;
  cursor: pointer;
  min-height: 36px;
  transition: background 180ms ease, color 180ms ease;
}
#section-rewards .rwv3-pill:not(.is-active):hover {
  background: rgba(20,25,40,0.06);
}
#section-rewards .rwv3-pill.is-active {
  background: var(--v3-ink, #1a1d24);
  color: var(--v3-cream, #faf6ee);
}
@media (prefers-reduced-motion: reduce) {
  #section-rewards .rwv3-pill { transition: none; }
}

/* Vault tiles */
#section-rewards .rwv3-vault-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
#section-rewards .rwv3-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--v3-paper, #fff);
  color: var(--v3-ink, #1a1d24);
  border: 1px solid var(--v3-hairline-strong, rgba(20,25,40,0.12));
  border-radius: 999px;
  padding: 8px 14px;
  font: 600 13px/1 var(--font-ui, Inter);
  cursor: pointer;
  min-height: 36px;
}
#section-rewards .rwv3-mini-btn--primary {
  background: var(--v3-ink, #1a1d24);
  color: var(--v3-cream, #faf6ee);
  border-color: var(--v3-ink, #1a1d24);
}
#section-rewards .rwv3-mini-btn:hover { transform: translateY(-1px); }

#section-rewards .rwv3-vault-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 380px) {
  #section-rewards .rwv3-vault-grid { grid-template-columns: 1fr; }
}
#section-rewards .rwv3-tile {
  position: relative;
  background: var(--v3-paper, #fff);
  border: 1px solid var(--v3-hairline, rgba(20,25,40,0.07));
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 1px 3px rgba(20,25,40,0.04), 0 4px 16px rgba(20,25,40,0.04);
  transition: transform 180ms ease, box-shadow 180ms ease;
  min-height: 168px;
}
#section-rewards .rwv3-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20,25,40,0.08), 0 12px 28px rgba(20,25,40,0.10);
}
#section-rewards .rwv3-tile--locked {
  opacity: 0.6;
}
#section-rewards .rwv3-tile-emoji {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 8px;
}
#section-rewards .rwv3-tile-name {
  font: 600 16px/1.2 var(--font-ui, Inter);
  color: var(--v3-ink, #1a1d24);
  margin-bottom: 2px;
}
#section-rewards .rwv3-tile-desc {
  font: 500 12px/1.3 var(--font-ui, Inter);
  color: var(--v3-muted, #7c7a78);
  margin-bottom: 10px;
  flex: 1;
}
#section-rewards .rwv3-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
#section-rewards .rwv3-cost-pill {
  display: inline-flex;
  align-items: center;
  background: var(--v3-cognac, #c36a2d);
  color: var(--v3-cream, #faf6ee);
  border-radius: 999px;
  padding: 5px 12px;
  font: 700 12px/1 var(--font-ui, Inter);
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
}
#section-rewards .rwv3-cost-pill--need {
  background: rgba(20,25,40,0.06);
  color: var(--v3-muted, #7c7a78);
}
#section-rewards .rwv3-redeem-btn {
  background: var(--v3-ink, #1a1d24);
  color: var(--v3-cream, #faf6ee);
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font: 700 12px/1 var(--font-ui, Inter);
  cursor: pointer;
  min-height: 36px;
}
#section-rewards .rwv3-redeem-btn:hover { background: #000; }

#section-rewards .rwv3-tile-menu {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 180ms ease;
}
#section-rewards .rwv3-tile:hover .rwv3-tile-menu { opacity: 1; }
#section-rewards .rwv3-tile-menu-btn {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(20,25,40,0.06);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--v3-ink, #1a1d24);
}
#section-rewards .rwv3-tile-menu-btn:hover { background: rgba(20,25,40,0.12); }

/* Earn cards */
#section-rewards .rwv3-earn-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#section-rewards .rwv3-earn-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--v3-paper, #fff);
  border: 1px solid var(--v3-hairline, rgba(20,25,40,0.07));
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  min-height: 64px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
#section-rewards .rwv3-earn-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20,25,40,0.06);
}
#section-rewards .rwv3-earn-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(195,106,45,0.10);
  color: var(--v3-cognac, #c36a2d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#section-rewards .rwv3-earn-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
#section-rewards .rwv3-earn-title { font: 600 14px/1.3 var(--font-ui, Inter); color: var(--v3-ink); }
#section-rewards .rwv3-earn-sub   { font: 500 12px/1.3 var(--font-ui, Inter); color: var(--v3-muted, #7c7a78); font-feature-settings: "tnum" 1; }
#section-rewards .rwv3-earn-arrow { font-size: 18px; color: var(--v3-muted, #7c7a78); }

/* Pending / History rows */
#section-rewards .rwv3-section-eyebrow {
  font: 600 11px/1.2 var(--font-ui, Inter);
  letter-spacing: 0.12em;
  color: var(--v3-muted, #7c7a78);
  text-transform: uppercase;
  margin: 0 0 8px;
}
#section-rewards .rwv3-section-eyebrow--gap { margin-top: 18px; }
#section-rewards .rwv3-rows {
  display: flex; flex-direction: column; gap: 8px;
}
#section-rewards .rwv3-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--v3-paper, #fff);
  border: 1px solid var(--v3-hairline, rgba(20,25,40,0.07));
  border-radius: 12px;
  min-height: 56px;
}
#section-rewards .rwv3-row-emoji {
  font-size: 22px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(20,25,40,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#section-rewards .rwv3-row-body { flex: 1; min-width: 0; }
#section-rewards .rwv3-row-title { font: 600 14px/1.3 var(--font-ui, Inter); color: var(--v3-ink); }
#section-rewards .rwv3-row-sub   { font: 500 12px/1.3 var(--font-ui, Inter); color: var(--v3-muted, #7c7a78); font-feature-settings: "tnum" 1; margin-top: 2px; }
#section-rewards .rwv3-row-cost  { color: var(--v3-muted, #7c7a78); font-weight: 500; }
#section-rewards .rwv3-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
#section-rewards .rwv3-status-pill {
  background: rgba(195,106,45,0.10);
  color: var(--v3-cognac, #c36a2d);
  border-radius: 999px;
  padding: 5px 10px;
  font: 600 11px/1 var(--font-ui, Inter);
  letter-spacing: 0.02em;
}
#section-rewards .rwv3-tag {
  background: rgba(20,25,40,0.08);
  color: var(--v3-muted, #7c7a78);
  border-radius: 999px;
  padding: 2px 8px;
  font: 600 10px/1.4 var(--font-ui, Inter);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 6px;
}
#section-rewards .rwv3-amt {
  font: 700 14px/1 var(--font-ui, Inter);
  font-feature-settings: "tnum" 1;
}
#section-rewards .rwv3-amt--pos { color: var(--v3-success, #2e7d57); }
#section-rewards .rwv3-amt--neg { color: var(--v3-negative, #a3413f); }
#section-rewards .rwv3-empty {
  padding: 18px 16px;
  text-align: center;
  font: 500 13px/1.5 var(--font-ui, Inter);
  color: var(--v3-muted, #7c7a78);
  background: var(--v3-paper, #fff);
  border: 1px dashed var(--v3-hairline-strong, rgba(20,25,40,0.12));
  border-radius: 12px;
}

/* Surprise approval modal options */
#surprise-approve-modal .rwv3-surprise-options {
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 0;
}
#surprise-approve-modal .rwv3-surprise-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--v3-paper, #fff);
  border: 1px solid var(--v3-hairline-strong, rgba(20,25,40,0.12));
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  min-height: 56px;
}
#surprise-approve-modal .rwv3-surprise-opt:hover {
  background: rgba(20,25,40,0.03);
}
#surprise-approve-modal .rwv3-surprise-opt--ghost {
  background: transparent;
  border-style: dashed;
}
#surprise-approve-modal .rwv3-surprise-opt-emoji {
  font-size: 22px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(20,25,40,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#surprise-approve-modal .rwv3-surprise-opt-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
#surprise-approve-modal .rwv3-surprise-opt-title { font: 600 14px/1.3 var(--font-ui, Inter); color: var(--v3-ink); }
#surprise-approve-modal .rwv3-surprise-opt-sub   { font: 500 12px/1.3 var(--font-ui, Inter); color: var(--v3-muted, #7c7a78); }

/* ===== MEALS-V3 ===== */
/* Tokens reused: --page, --card, --ink, --ink-muted, --ink-faint, --hairline, --primary, --space-*, --radius-* */

.meals-v3 { background: var(--page); }

/* --- Hero --- */
.meals-v3 .mv3-hero {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 24px;
}
.meals-v3 .section-hero-eyebrow {
  font: 600 11px/1.2 var(--font-ui, Inter, sans-serif);
  letter-spacing: 0.14em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.meals-v3 .section-hero-title {
  font-family: 'Fraunces', 'Lyon Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(36px, 6vw, 48px);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.meals-v3 .mv3-hero-emoji {
  font-size: 18px;
  letter-spacing: 0.18em;
  opacity: 0.85;
}
.meals-v3 .section-hero-sub {
  font: 400 16px/1.5 var(--font-ui, Inter, sans-serif);
  color: var(--ink-muted);
  margin: 0;
  max-width: 560px;
}

/* --- Sub-tab row spacing tweak --- */
.meals-v3 .mv3-subtabs {
  max-width: 680px;
  margin: 0 auto 24px;
}

/* --- Panels --- */
.meals-v3 .mv3-panel {
  max-width: 680px;
  margin: 0 auto;
}

/* --- Week nav (Planner) --- */
.meals-v3 .mv3-week-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 20px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 24px;
}
.meals-v3 .mv3-iconbtn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.meals-v3 .mv3-iconbtn:hover { background: var(--card); color: var(--ink); border-color: rgba(20,20,20,0.18); }
.meals-v3 .mv3-week-label {
  flex: 1;
  text-align: center;
  font: 500 14px/1.2 var(--font-ui, Inter, sans-serif);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.meals-v3 .mv3-today-btn {
  font: 500 13px/1 var(--font-ui, Inter, sans-serif);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.meals-v3 .mv3-today-btn:hover { background: var(--card); border-color: rgba(20,20,20,0.18); }

/* --- Week grid: stack of day-cards --- */
.meals-v3 .mv3-week-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.meals-v3 .mv3-day-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 20px;
  position: relative;
}
.meals-v3 .mv3-day-card.is-today {
  border-left: 2px solid var(--primary);
  padding-left: 19px;
}
.meals-v3 .mv3-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.meals-v3 .mv3-day-caption {
  font: 600 11px/1 var(--font-ui, Inter, sans-serif);
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.meals-v3 .mv3-today-badge {
  font: 600 10px/1 var(--font-ui, Inter, sans-serif);
  letter-spacing: 0.12em;
  color: var(--primary);
  background: rgba(160, 95, 50, 0.08);
  padding: 4px 7px;
  border-radius: 4px;
}
.meals-v3 .mv3-day-slots {
  display: flex;
  flex-direction: column;
}
.meals-v3 .mv3-slot {
  display: grid;
  grid-template-columns: 22px 110px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  background: transparent;
  border-left: none; border-right: none; border-bottom: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: inherit;
}
.meals-v3 .mv3-slot:first-child { border-top: none; }
.meals-v3 .mv3-slot:hover { background: rgba(20,20,20,0.02); }
.meals-v3 .mv3-slot-emoji { font-size: 16px; line-height: 1; }
.meals-v3 .mv3-slot-label {
  font: 600 11px/1 var(--font-ui, Inter, sans-serif);
  letter-spacing: 0.10em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.meals-v3 .mv3-slot-name {
  font: 400 16px/1.3 var(--font-ui, Inter, sans-serif);
  color: var(--ink);
}
.meals-v3 .mv3-slot.is-empty .mv3-slot-name {
  color: var(--ink-faint, var(--ink-muted));
  font-style: italic;
}
.meals-v3 .mv3-slot-pill {
  font: 500 11px/1 var(--font-ui, Inter, sans-serif);
  color: var(--primary);
  background: rgba(160, 95, 50, 0.08);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.meals-v3 .mv3-slot-chev {
  color: var(--ink-faint, var(--ink-muted));
  display: inline-flex; align-items: center;
  opacity: 0.6;
}
.meals-v3 .mv3-slot:hover .mv3-slot-chev { opacity: 1; color: var(--ink-muted); }

/* --- Recipes toolbar --- */
.meals-v3 .mv3-recipes-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 14px;
}
.meals-v3 .mv3-search {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.meals-v3 .mv3-search-icon {
  position: absolute;
  left: 12px;
  display: inline-flex; align-items: center;
  color: var(--ink-muted);
  pointer-events: none;
}
.meals-v3 .mv3-search input {
  width: 100%;
  border: 1px solid var(--hairline);
  background: var(--card);
  border-radius: 10px;
  padding: 10px 12px 10px 36px;
  font: 400 14px/1.3 var(--font-ui, Inter, sans-serif);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.meals-v3 .mv3-search input::placeholder { color: var(--ink-muted); }
.meals-v3 .mv3-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(160, 95, 50, 0.10);
}
.meals-v3 .mv3-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font: 600 13px/1 var(--font-ui, Inter, sans-serif);
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.meals-v3 .mv3-primary-btn:hover { filter: brightness(1.05); }
.meals-v3 .mv3-primary-btn:active { transform: translateY(1px); }
.meals-v3 .mv3-btn-icon { display: inline-flex; align-items: center; }

/* --- Filter chips --- */
.meals-v3 .mv3-filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 16px;
}
.meals-v3 .mv3-chip {
  font: 500 13px/1 var(--font-ui, Inter, sans-serif);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.meals-v3 .mv3-chip:hover { color: var(--ink); border-color: rgba(20,20,20,0.18); }
.meals-v3 .mv3-chip.is-active {
  background: var(--ink);
  color: var(--page);
  border-color: var(--ink);
}

/* --- Recipe grid (masonry-ish 2-col) --- */
.meals-v3 .mv3-recipe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.meals-v3 .mv3-recipe-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 18px 18px 14px;
  cursor: pointer;
  transition: box-shadow .2s, transform .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meals-v3 .mv3-recipe-card:hover {
  box-shadow: 0 6px 20px rgba(20, 20, 20, 0.06);
  border-color: rgba(20,20,20,0.12);
}
.meals-v3 .mv3-recipe-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.meals-v3 .mv3-recipe-emoji { font-size: 32px; line-height: 1; }
.meals-v3 .mv3-recipe-title {
  font-family: 'Fraunces', 'Lyon Display', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.meals-v3 .mv3-recipe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font: 500 12px/1 var(--font-ui, Inter, sans-serif);
  color: var(--ink-muted);
}
.meals-v3 .mv3-recipe-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.meals-v3 .mv3-recipe-tag {
  background: rgba(160, 95, 50, 0.08);
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.meals-v3 .mv3-recipe-ing {
  font: 400 13px/1.5 var(--font-ui, Inter, sans-serif);
  color: var(--ink-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.meals-v3 .mv3-recipe-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
}
.meals-v3 .mv3-recipe-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 12px/1 var(--font-ui, Inter, sans-serif);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.meals-v3 .mv3-recipe-action:hover { background: rgba(20,20,20,0.04); color: var(--ink); }
.meals-v3 .mv3-recipe-action--danger:hover { color: #b00020; }

/* --- Empty state --- */
.meals-v3 .mv3-empty {
  text-align: center;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.meals-v3 .mv3-empty-emoji { font-size: 36px; }
.meals-v3 .mv3-empty-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  color: var(--ink);
}
.meals-v3 .mv3-empty-sub {
  font: 400 14px/1.5 var(--font-ui, Inter, sans-serif);
  color: var(--ink-muted);
  max-width: 320px;
  margin-bottom: 8px;
}

/* --- Shopping pane: scope existing list to the meals host for v3 polish --- */
#meals-shopping-panel { max-width: 680px; margin: 0 auto; }
#meals-shopping-panel #section-shopping > .section-hero { display: none; }
#meals-shopping-panel #section-shopping > .section-header { padding: 8px 0 16px; }
#meals-shopping-panel .combined-filters { gap: 6px; padding: 6px 0; }
#meals-shopping-panel .shopping-actions-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 10px;
  font: 500 13px/1 var(--font-ui, Inter, sans-serif);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
#meals-shopping-panel #shopping-list { padding: 0; margin: 0; list-style: none; }

/* Tabular nums utility */
.meals-v3 .tnum { font-variant-numeric: tabular-nums; }

/* --- Mobile --- */
@media (max-width: 720px) {
  .meals-v3 .mv3-hero { padding: 24px 16px 16px; margin-bottom: 20px; }
  .meals-v3 .mv3-subtabs,
  .meals-v3 .mv3-panel { padding-left: 16px; padding-right: 16px; }
  .meals-v3 .mv3-day-card { padding: 14px 16px; }
  .meals-v3 .mv3-day-card.is-today { padding-left: 15px; }
  .meals-v3 .mv3-slot {
    grid-template-columns: 22px 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    padding: 12px 0;
    min-height: 56px;
  }
  .meals-v3 .mv3-slot-emoji { grid-row: 1 / span 2; align-self: center; }
  .meals-v3 .mv3-slot-label { grid-column: 2; grid-row: 1; }
  .meals-v3 .mv3-slot-name { grid-column: 2; grid-row: 2; font-size: 15px; }
  .meals-v3 .mv3-slot-pill { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
  .meals-v3 .mv3-slot-chev { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .meals-v3 .mv3-recipe-grid { grid-template-columns: 1fr; gap: 16px; }
  .meals-v3 .mv3-recipes-toolbar { flex-wrap: wrap; }
  .meals-v3 .mv3-primary-btn { width: 100%; justify-content: center; }
  .meals-v3 .mv3-week-nav { gap: 8px; }
}

/* ===== MEALS-V3-POLISH ===== */
/* Hero deco strip — replaces inline emoji */
.meals-v3 .mv3-hero-emoji { display: none !important; }
.meals-v3 .mv3-hero-deco {
  margin-top: 14px;
  font-size: 22px;
  letter-spacing: 16px;
  opacity: 0.85;
  line-height: 1;
  user-select: none;
}
@media (max-width: 480px) {
  .meals-v3 .mv3-hero-deco { font-size: 18px; letter-spacing: 10px; margin-top: 10px; }
}

/* Today spotlight */
.meals-v3 .mv3-spotlight {
  background: #fff;
  border: 1px solid var(--v3-hairline, rgba(0,0,0,0.08));
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px -16px rgba(0,0,0,0.08);
}
.meals-v3 .mv3-spot-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--v3-cognac, #a05a2c);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.meals-v3 .mv3-spot-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--v3-ink, #1a1a1a);
  margin: 0 0 18px 0;
  line-height: 1.1;
}
.meals-v3 .mv3-spot-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.meals-v3 .mv3-spot-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--v3-hairline, rgba(0,0,0,0.08));
  border-radius: 14px;
  padding: 14px 8px;
  min-height: 96px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  font: inherit;
  text-align: center;
}
.meals-v3 .mv3-spot-slot:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.14);
}
.meals-v3 .mv3-spot-slot-emoji { font-size: 26px; line-height: 1; }
.meals-v3 .mv3-spot-slot-label {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--v3-muted, #777);
}
.meals-v3 .mv3-spot-slot-name {
  font-size: 13px;
  color: var(--v3-ink, #1a1a1a);
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.meals-v3 .mv3-spot-slot.is-empty .mv3-spot-slot-name { color: var(--v3-muted, #888); font-style: italic; }
@media (max-width: 480px) {
  .meals-v3 .mv3-spotlight { padding: 18px; border-radius: 14px; }
  .meals-v3 .mv3-spot-title { font-size: 24px; margin-bottom: 14px; }
  .meals-v3 .mv3-spot-slots { grid-template-columns: 1fr 1fr; gap: 8px; }
  .meals-v3 .mv3-spot-slot { min-height: 84px; padding: 12px 6px; }
  .meals-v3 .mv3-spot-slot-emoji { font-size: 22px; }
}

/* Rest-of-week compact day rows */
.meals-v3 #meal-grid { display: flex; flex-direction: column; gap: 0; }
.meals-v3 .mv3-rest-day {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--v3-hairline, rgba(0,0,0,0.07));
  padding: 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meals-v3 .mv3-rest-day:last-child { border-bottom: none; }
.meals-v3 .mv3-rest-caption {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--v3-muted, #888);
  text-transform: uppercase;
}
.meals-v3 .mv3-rest-day.is-today .mv3-rest-caption { color: var(--v3-cognac, #a05a2c); }
.meals-v3 .mv3-rest-today {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--v3-cognac, #a05a2c);
  color: #fff;
  letter-spacing: 1px;
}
.meals-v3 .mv3-rest-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.meals-v3 .mv3-rest-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--v3-hairline, rgba(0,0,0,0.08));
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: border-color .15s ease, background .15s ease;
}
.meals-v3 .mv3-rest-chip:hover { border-color: rgba(0,0,0,0.16); }
.meals-v3 .mv3-rest-chip-emoji { font-size: 14px; flex: 0 0 auto; }
.meals-v3 .mv3-rest-chip-name {
  font-size: 12px;
  color: var(--v3-ink, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.meals-v3 .mv3-rest-chip.is-empty .mv3-rest-chip-name { color: var(--v3-muted, #aaa); }
@media (max-width: 480px) {
  .meals-v3 .mv3-rest-chips { grid-template-columns: 1fr 1fr; }
  .meals-v3 .mv3-rest-chip-name { font-size: 12px; }
}

/* In-Meals shopping pane: strip the navy gradient hero, soften */
.meals-v3 #meals-shopping-panel #section-shopping .section-hero,
#section-shopping.in-meals-pane .section-hero { display: none !important; }
.meals-v3 #meals-shopping-panel #section-shopping { background: transparent; padding: 0; }
.meals-v3 #meals-shopping-panel #section-shopping .section-header { padding: 0; margin: 8px 0 12px; }

/* Biweekly grocery hero card */
.meals-v3 .mv3-grocery-hero {
  background: #fff;
  border: 1px solid var(--v3-hairline, rgba(0,0,0,0.08));
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px -16px rgba(0,0,0,0.08);
}
.meals-v3 .mv3-gh-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--v3-cognac, #a05a2c);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.meals-v3 .mv3-gh-date {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--v3-ink, #1a1a1a);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.meals-v3 .mv3-gh-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--v3-muted, #888);
  letter-spacing: 0.2px;
}
.meals-v3 .mv3-gh-cost {
  margin-top: 18px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--v3-ink, #1a1a1a);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.meals-v3 .mv3-gh-peso { font-size: 24px; color: var(--v3-muted, #888); }
.meals-v3 .mv3-gh-cost-cap {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--v3-muted, #888);
  font-weight: 600;
  margin-top: 2px;
}
.meals-v3 .mv3-gh-meta {
  margin-top: 14px;
  font-size: 13px;
  color: var(--v3-muted, #777);
}
.meals-v3 .mv3-gh-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px;
  background: var(--v3-cognac, #a05a2c);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}
.meals-v3 .mv3-gh-cta:hover { filter: brightness(1.08); }
.meals-v3 .mv3-gh-cta:active { transform: translateY(1px); }
@media (max-width: 480px) {
  .meals-v3 .mv3-grocery-hero { padding: 18px; border-radius: 14px; }
  .meals-v3 .mv3-gh-date { font-size: 28px; }
  .meals-v3 .mv3-gh-cost { font-size: 26px; }
}

/* ===== MEALS V3 POLISH 2 ===== */

/* Hide the V3-flat spotlight the user disliked — old colorful planner is back */
.mv3-spotlight, .mv3-rest-day, .mv3-rest-chips, .mv3-rest-day-card { display: none !important; }
#meal-grid > .mv3-rest-day { display: none !important; }

/* Hide the navy gradient hero + person/category pills inside Meals shopping pane */
#section-shopping.in-meals-pane .section-hero,
#section-shopping.in-meals-pane .section-hero--shopping,
#section-shopping.in-meals-pane .person-filters,
#section-shopping.in-meals-pane .shop-person-filters,
#section-shopping.in-meals-pane .shopping-filters,
#section-shopping.in-meals-pane #shop-cat-filters,
#section-shopping.in-meals-pane #shop-cat-toggle,
#section-shopping.in-meals-pane .shopping-stats,
#section-shopping.in-meals-pane #shopping-count,
#section-shopping.in-meals-pane > h2 {
  display: none !important;
}
#section-shopping.in-meals-pane { padding: 0 !important; background: transparent !important; }
#section-shopping.in-meals-pane .section-header { display: none !important; }

/* Two grocery run cards stacked */
.mv3-runs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 8px 0 24px;
}
@media (min-width: 768px) {
  .mv3-runs { grid-template-columns: 1fr 1fr; gap: 20px; }
}
.mv3-run-card {
  background: var(--card, #fff);
  border: 1px solid var(--hairline, rgba(20,20,20,0.08));
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(20,20,20,0.04);
  position: relative;
}
.mv3-run-card.is-next {
  border-color: rgba(195,106,45,0.45);
  box-shadow: 0 6px 20px rgba(195,106,45,0.10);
}
.mv3-run-eyebrow {
  font: 500 11px/1 var(--font-ui, Inter);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-cognac, #C36A2D);
  margin-bottom: 8px;
}
.mv3-run-card:not(.is-next) .mv3-run-eyebrow { color: var(--ink-faint, #A6A39B); }
.mv3-run-date {
  font-family: var(--font-display, Fraunces), Georgia, serif;
  font-weight: 500;
  font-size: clamp(22px, 4.5vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink, #1A1A18);
}
.mv3-run-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-muted, #6B6B66);
}
.mv3-run-stats {
  margin: 14px 0;
  padding: 12px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.mv3-run-cost {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.mv3-run-peso { color: var(--ink-muted); font-weight: 500; font-size: 14px; }
.mv3-run-cost .tnum {
  font-family: var(--font-display, Fraunces), serif;
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.mv3-run-cost-cap {
  margin-left: 6px;
  font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mv3-run-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-muted);
}
.mv3-run-list {
  display: flex;
  flex-direction: column;
}
.mv3-run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.mv3-run-row:last-child { border-bottom: 0; }
.mv3-run-row.is-bought .mv3-run-name { text-decoration: line-through; color: var(--ink-faint); }
.mv3-run-check {
  width: 22px; height: 22px;
  border: 1.5px solid var(--ink-faint, #A6A39B);
  border-radius: 999px;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: all 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mv3-run-check.is-checked {
  background: var(--brand-cognac, #C36A2D);
  border-color: var(--brand-cognac, #C36A2D);
}
.mv3-run-check.is-checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.mv3-run-body { flex: 1; min-width: 0; }
.mv3-run-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.mv3-run-meta { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.mv3-run-trail { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mv3-run-qty { font-size: 12px; color: var(--ink-muted); }
.mv3-run-price { font-size: 12px; color: var(--ink-muted); }
.mv3-run-x {
  width: 28px; height: 28px;
  background: transparent;
  border: 0; cursor: pointer;
  border-radius: 999px;
  color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms ease, color 150ms ease;
}
.mv3-run-x:hover { background: rgba(192,57,43,0.10); color: var(--error, #C0392B); }
.mv3-run-empty {
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
  padding: 12px 0;
}
.mv3-run-cta {
  margin-top: 16px;
  width: 100%;
  background: var(--brand-cognac, #C36A2D);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  transition: background 150ms ease;
}
.mv3-run-cta:hover { background: #a05522; }
.mv3-run-card:not(.is-next) .mv3-run-cta {
  background: transparent;
  color: var(--brand-cognac, #C36A2D);
  border: 1px solid var(--brand-cognac, #C36A2D);
}

/* ===== MEALS POLISH 3 ===== */

/* White background for the whole Meals section (was tinted) */
/* (removed forced white bg — VIVID-V4 drives the page tint per section) */
#section-meals .section-hero { background: transparent !important; }

/* Day-meals popup modal */
.dmm-modal { max-width: 480px; padding: 0 !important; }
.dmm-modal .modal-header {
  padding: 20px 20px 8px;
  border-bottom: 1px solid var(--hairline, rgba(20,20,20,.08));
  display: flex; justify-content: space-between; align-items: flex-start;
}
.dmm-eyebrow {
  font: 500 11px/1 var(--font-ui, Inter);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-cognac, #C36A2D);
  margin-bottom: 6px;
}
.dmm-title {
  font-family: var(--font-display, Fraunces), Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink, #1A1A18);
  margin: 0;
}
.dmm-body { padding: 16px 20px 24px; }
.dmm-slots { display: flex; flex-direction: column; gap: 0; }
.dmm-slot {
  display: grid;
  grid-template-columns: 32px 80px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--hairline);
  cursor: pointer; text-align: left;
  transition: background 150ms ease;
}
.dmm-slot:hover { background: rgba(195,106,45,.04); }
.dmm-slot:last-child { border-bottom: 0; }
.dmm-slot-emoji { font-size: 22px; }
.dmm-slot-label {
  font: 500 10px/1 var(--font-ui);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint, #A6A39B);
}
.dmm-slot-name { font-size: 15px; color: var(--ink); font-weight: 500; }
.dmm-slot.is-empty .dmm-slot-name { color: var(--ink-faint); font-weight: 400; }
.dmm-slot.is-empty em { font-style: normal; }

/* Needs page hint chip */
#section-shopping.needs-mode .section-hero-eyebrow::after { content: ' · NEEDS'; color: var(--ink-faint); }

/* ===== POLISH 4 ===== */

/* 1. Day-meals modal inherits the clicked card's color */
.dmm-modal[data-tone] {
  background: var(--dmm-bg, #1d2e4a) !important;
  color: var(--dmm-ink, #e8cfa6);
  border-radius: 16px;
  overflow: hidden;
}
.dmm-modal[data-tone="navy"]     { --dmm-bg: #1d2e4a; --dmm-ink: #e8cfa6; --dmm-line: rgba(232,207,166,.18); }
.dmm-modal[data-tone="burgundy"] { --dmm-bg: #5a1e23; --dmm-ink: #e8cfa6; --dmm-line: rgba(232,207,166,.18); }
.dmm-modal[data-tone="emerald"]  { --dmm-bg: #234a37; --dmm-ink: #e8d6a8; --dmm-line: rgba(232,214,168,.20); }
.dmm-modal[data-tone="cognac"]   { --dmm-bg: #c36a2d; --dmm-ink: #fdf5e8; --dmm-line: rgba(255,255,255,.22); }
.dmm-modal[data-tone="sage"]     { --dmm-bg: #8a9378; --dmm-ink: #1e2a18; --dmm-line: rgba(30,42,24,.20); }
.dmm-modal[data-tone="ink"]      { --dmm-bg: #1a1a1a; --dmm-ink: #e8cfa6; --dmm-line: rgba(232,207,166,.18); }

.dmm-modal[data-tone] .modal-header,
.dmm-modal[data-tone] .dmm-header {
  background: transparent !important;
  border-bottom-color: var(--dmm-line) !important;
  color: var(--dmm-ink);
}
.dmm-modal[data-tone] .dmm-eyebrow {
  color: var(--dmm-ink);
  opacity: 0.65;
}
.dmm-modal[data-tone] .dmm-title { color: var(--dmm-ink); font-family: var(--font-display, Fraunces), serif; }
.dmm-modal[data-tone] .dmm-close,
.dmm-modal[data-tone] .modal-close {
  color: var(--dmm-ink) !important;
  background: rgba(255,255,255,0.10) !important;
}
.dmm-modal[data-tone] .dmm-slot { border-bottom-color: var(--dmm-line); }
.dmm-modal[data-tone] .dmm-slot:hover { background: rgba(255,255,255,0.06); }
.dmm-modal[data-tone] .dmm-slot-emoji { filter: none; }
.dmm-modal[data-tone] .dmm-slot-label { color: var(--dmm-ink); opacity: 0.55; }
.dmm-modal[data-tone] .dmm-slot-name { color: var(--dmm-ink); }
.dmm-modal[data-tone] .dmm-slot.is-empty .dmm-slot-name { color: var(--dmm-ink); opacity: 0.55; }
.dmm-modal[data-tone] .dmm-slot:hover { background: rgba(255,255,255,0.08); }
/* Sage tone uses dark ink, so hover should darken instead of lighten */
.dmm-modal[data-tone="sage"] .dmm-slot:hover { background: rgba(0,0,0,0.06); }
.dmm-modal[data-tone="cognac"] .dmm-close,
.dmm-modal[data-tone="cognac"] .modal-close { background: rgba(0,0,0,.16) !important; }

/* 2. Announcements / Polls tabs */
.home-ap-tabs {
  display: flex;
  gap: 4px;
  background: rgba(20,20,20,0.04);
  border-radius: 999px;
  padding: 4px;
  flex: 1;
}
.home-ap-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font: 500 13px/1 var(--font-ui, Inter);
  color: var(--ink-muted, #6B6B66);
  cursor: pointer;
  border-radius: 999px;
  min-height: 36px;
  white-space: nowrap;
  transition: all 150ms ease;
}
.home-ap-tab.is-active {
  background: var(--card, #fff);
  color: var(--ink, #1A1A18);
  box-shadow: 0 1px 2px rgba(20,20,20,.06);
}
.home-v3-ap-head { display: flex; align-items: center; gap: 8px; }
@media (max-width: 480px) {
  .home-ap-tab { padding: 8px 10px; font-size: 12px; }
}

/* 3. Kill any leftover flat list inside the grocery list pane */
#section-shopping.in-meals-pane #shopping-list,
#section-shopping.in-meals-pane #shopping-count { display: none !important; }


/* ===== VIVID-V4 ===== */
/* Family.co-style warmth: tinted section backgrounds, bold playful color,
   oversized decorative emoji, gradient moments — layered on top of v3
   without regressing typography or hairline structure. */

:root {
  --vivid-cream:      #FBF6EC;
  --vivid-peach:      #FCF1E7;
  --vivid-sage:       #F0F4EE;
  --vivid-sand:       #F4EBE0;
  --vivid-gold-cream: #F8F0DD;
  --vivid-linen:      #F5EFE8;
  --vivid-navy-mist:  #EEF1F6;
  --vivid-burgundy-mist: #F8EFEF;
  --vivid-lavender:   #F1EEF6;
  --vivid-mint:       #E9F2EC;

  --vivid-cognac:     #C36A2D;
  --vivid-cognac-2:   #B25420;
  --vivid-cognac-3:   #D67F3F;
  --vivid-coral:      #E97444;
  --vivid-coral-2:    #D45C2E;
  --vivid-emerald:    #2F7A5F;
  --vivid-gold:       #D4A437;
  --vivid-navy:       #2D3E5A;
  --vivid-burgundy:   #8C3A40;

  /* per-section RGB tuples for soft glows */
  --vivid-cognac-rgb:   195,106,45;
  --vivid-coral-rgb:    233,116,68;
  --vivid-emerald-rgb:  47,122,95;
  --vivid-gold-rgb:     212,164,55;
  --vivid-navy-rgb:     45,62,90;
  --vivid-burgundy-rgb: 140,58,64;
}

/* ---------- 1. Per-section body / page tint ---------- */
/* Active section sets the page color via #section-X.active background.
   We also tint via body[data-section] for any chrome that reads it. */
#section-home.active,
body[data-section="home"]            { --vivid-section-bg: var(--vivid-cream); --vivid-section-accent: var(--vivid-cognac); --vivid-section-rgb: var(--vivid-cognac-rgb); }
#section-meals.active,
body[data-section="meals"]           { --vivid-section-bg: var(--vivid-peach); --vivid-section-accent: var(--vivid-coral);  --vivid-section-rgb: var(--vivid-coral-rgb); }
#section-dashboard.active,
body[data-section="dashboard"],
#section-expenses,
body[data-section="expenses"]        { --vivid-section-bg: var(--vivid-sage);  --vivid-section-accent: var(--vivid-emerald); --vivid-section-rgb: var(--vivid-emerald-rgb); }
#section-learning.active,
body[data-section="learning"]        { --vivid-section-bg: var(--vivid-sand);  --vivid-section-accent: var(--vivid-cognac);  --vivid-section-rgb: var(--vivid-cognac-rgb); }
#section-rewards.active,
body[data-section="rewards"]         { --vivid-section-bg: var(--vivid-gold-cream); --vivid-section-accent: var(--vivid-gold); --vivid-section-rgb: var(--vivid-gold-rgb); }
#section-profile.active,
body[data-section="profile"]         { --vivid-section-bg: var(--vivid-linen); --vivid-section-accent: var(--vivid-navy); --vivid-section-rgb: var(--vivid-navy-rgb); }
#section-todos.active,
body[data-section="todos"]           { --vivid-section-bg: var(--vivid-mint); --vivid-section-accent: var(--vivid-emerald); --vivid-section-rgb: var(--vivid-emerald-rgb); }
#section-goals.active,
body[data-section="goals"]           { --vivid-section-bg: var(--vivid-navy-mist); --vivid-section-accent: var(--vivid-navy); --vivid-section-rgb: var(--vivid-navy-rgb); }
#section-vacations.active,
body[data-section="vacations"]       { --vivid-section-bg: var(--vivid-lavender); --vivid-section-accent: var(--vivid-burgundy); --vivid-section-rgb: var(--vivid-burgundy-rgb); }
#section-datenights.active,
body[data-section="datenights"]      { --vivid-section-bg: var(--vivid-burgundy-mist); --vivid-section-accent: var(--vivid-burgundy); --vivid-section-rgb: var(--vivid-burgundy-rgb); }
#section-ideas.active,
body[data-section="ideas"]           { --vivid-section-bg: var(--vivid-peach); --vivid-section-accent: var(--vivid-cognac); --vivid-section-rgb: var(--vivid-cognac-rgb); }
#section-activities.active,
body[data-section="activities"]      { --vivid-section-bg: var(--vivid-mint); --vivid-section-accent: var(--vivid-emerald); --vivid-section-rgb: var(--vivid-emerald-rgb); }
#section-shopping.active,
body[data-section="shopping"]        { --vivid-section-bg: var(--vivid-peach); --vivid-section-accent: var(--vivid-coral); --vivid-section-rgb: var(--vivid-coral-rgb); }
#section-workouts.active,
body[data-section="workouts"]        { --vivid-section-bg: var(--vivid-mint); --vivid-section-accent: var(--vivid-emerald); --vivid-section-rgb: var(--vivid-emerald-rgb); }

/* Repaint the page itself */
body { background: var(--vivid-section-bg, var(--vivid-cream)) !important; }
.section.active { background: transparent !important; }

/* ---------- 2. Vivid hero strip behind white hero card ---------- */
/* The v3 hero is a white card on cream — we keep that, but place a soft
   gradient halo behind the active section's hero so it reads as a
   "color band" without losing the editorial hero. */
.section.active .section-hero {
  position: relative;
  isolation: isolate;
  background: var(--v3-paper, #fff) !important;
}
.section.active .section-hero::after {
  content: "";
  position: absolute;
  inset: -28px -24px auto -24px;
  height: 140px;
  background: linear-gradient(135deg,
    rgba(var(--vivid-section-rgb, 195,106,45), 0.22) 0%,
    rgba(var(--vivid-section-rgb, 195,106,45), 0.06) 55%,
    transparent 80%);
  border-radius: 28px 28px 50% 50% / 28px 28px 36px 36px;
  z-index: -1;
  filter: blur(2px);
  pointer-events: none;
  opacity: 0.95;
}
/* Section-hero title underline accent */
.section.active .section-hero .section-hero-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--vivid-section-accent, var(--vivid-cognac));
  margin: 14px auto 4px;
  box-shadow: 0 1px 2px rgba(var(--vivid-section-rgb, 195,106,45), 0.25);
}

/* ---------- 3. Big decorative emoji ---------- */
.section.active .section-hero .emoji-strip {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: clamp(28px, 4.5vw, 40px) !important;
  gap: 16px !important;
  padding: 12px 22px !important;
  border: 1px solid rgba(var(--vivid-section-rgb, 195,106,45), 0.18);
  box-shadow: 0 4px 14px rgba(var(--vivid-section-rgb, 195,106,45), 0.08);
}
.section.active .section-hero .emoji-strip > span {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.10));
  transform: translateZ(0);
}
.section.active .section-hero .emoji-strip > span + span::before {
  font-size: 14px;
  opacity: 0.4;
}
@media (max-width: 640px) {
  .section.active .section-hero .emoji-strip {
    font-size: clamp(22px, 6vw, 30px) !important;
    gap: 10px !important;
    padding: 8px 14px !important;
  }
  .section.active .section-hero::after { height: 110px; inset: -22px -16px auto -16px; }
}

/* ---------- 4. Eyebrow & pill warmth ---------- */
.section.active .section-hero-eyebrow {
  color: var(--vivid-section-accent, var(--vivid-cognac)) !important;
  background: rgba(var(--vivid-section-rgb, 195,106,45), 0.10);
  padding: 5px 12px;
  border-radius: 999px;
  display: inline-flex !important;
}
.section.active .section-hero-eyebrow::before,
.section.active .section-hero-eyebrow::after {
  background: var(--vivid-section-accent, var(--vivid-cognac)) !important;
}
.section.active .v3-pill {
  background: rgba(var(--vivid-section-rgb, 195,106,45), 0.10);
  color: var(--vivid-section-accent, var(--vivid-cognac));
  border-color: rgba(var(--vivid-section-rgb, 195,106,45), 0.22);
}

/* ---------- 5. Card warmth — tinted edges & hover glow ---------- */
.section.active .v3-card,
.section.active .home-v3-card,
.section.active .dash-card,
.section.active .mv3-recipe-card,
.section.active .mv3-day-card,
.section.active .ahv3-card {
  position: relative;
}
.section.active .v3-card:hover,
.section.active .home-v3-card:hover,
.section.active .dash-card:hover,
.section.active .mv3-recipe-card:hover,
.section.active .mv3-day-card:hover,
.section.active .ahv3-card:hover {
  box-shadow:
    0 10px 28px rgba(var(--vivid-section-rgb, 195,106,45), 0.12),
    0 1px 2px rgba(0,0,0,0.04) !important;
  border-color: rgba(var(--vivid-section-rgb, 195,106,45), 0.30) !important;
}

/* Home: cognac eyebrow accent rail on cards */
#section-home.active .home-v3-card::before,
#section-home.active .v3-card::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--vivid-cognac) 0%, transparent 90%);
  opacity: 0.55;
  pointer-events: none;
}

/* Meals: peach hover wash */
#section-meals.active .mv3-recipe-card:hover,
#section-meals.active .mv3-day-card:hover,
#section-meals.active .v3-card:hover {
  background: linear-gradient(180deg, #FFF5EC 0%, #FFFFFF 60%) !important;
}

/* Money: emerald top edge, coral accent for spend rows */
#section-dashboard.active .dash-card,
#section-expenses .dash-card,
body[data-section="expenses"] .dash-card {
  border-top: 2px solid rgba(var(--vivid-emerald-rgb), 0.28) !important;
}
#section-dashboard.active .dash-card[data-kind="spend"],
#section-expenses .dash-card[data-kind="spend"] {
  border-top-color: rgba(var(--vivid-coral-rgb), 0.45) !important;
}

/* Rewards: gold gradient top edge on cards */
#section-rewards.active .v3-card,
#section-rewards.active .ahv3-card {
  background: linear-gradient(180deg, rgba(212,164,55,0.10) 0%, #FFFFFF 14%) !important;
}

/* ---------- 6. Primary button gradient ---------- */
.btn-primary,
.v3-btn--primary {
  background: linear-gradient(135deg, var(--vivid-cognac-3) 0%, var(--vivid-cognac-2) 100%) !important;
  border-color: var(--vivid-cognac-2) !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 14px -6px rgba(195,106,45,0.55);
}
.btn-primary:hover,
.v3-btn--primary:hover {
  background: linear-gradient(135deg, #E08C4D 0%, #C36A2D 100%) !important;
  border-color: #C36A2D !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 8px 18px -6px rgba(195,106,45,0.65);
}
/* Per-section primary button repaint */
#section-meals.active .btn-primary,
#section-meals.active .v3-btn--primary,
#section-shopping.active .btn-primary,
#section-shopping.active .v3-btn--primary {
  background: linear-gradient(135deg, #F38659 0%, var(--vivid-coral-2) 100%) !important;
  border-color: var(--vivid-coral-2) !important;
  box-shadow: 0 6px 14px -6px rgba(233,116,68,0.55);
}
#section-dashboard.active .btn-primary,
#section-dashboard.active .v3-btn--primary,
#section-todos.active .btn-primary,
#section-todos.active .v3-btn--primary,
#section-activities.active .btn-primary,
#section-activities.active .v3-btn--primary,
#section-workouts.active .btn-primary,
#section-workouts.active .v3-btn--primary {
  background: linear-gradient(135deg, #3F9374 0%, #246046 100%) !important;
  border-color: #246046 !important;
  box-shadow: 0 6px 14px -6px rgba(47,122,95,0.55);
}
#section-rewards.active .btn-primary,
#section-rewards.active .v3-btn--primary {
  background: linear-gradient(135deg, #E2B647 0%, #B68A28 100%) !important;
  border-color: #B68A28 !important;
  box-shadow: 0 6px 14px -6px rgba(212,164,55,0.55);
}

/* ---------- 7. Sub-tab pill row colored active state ---------- */
.section.active .home-ap-tab.is-active,
.section.active .v3-tab.is-active,
.section.active [role="tab"][aria-selected="true"] {
  background: rgba(var(--vivid-section-rgb, 195,106,45), 0.12) !important;
  color: var(--vivid-section-accent, var(--vivid-cognac)) !important;
  box-shadow: 0 1px 2px rgba(var(--vivid-section-rgb, 195,106,45), 0.18) !important;
}

/* ---------- 8. Mobile bottom-tab bar gradient under active ---------- */
.bottom-tab-bar .tab-btn.active,
.mobile-nav .nav-tab.active,
[class*="bottom-nav"] .active,
[class*="tabbar"] .active {
  position: relative;
}
.bottom-tab-bar .tab-btn.active::before,
.mobile-nav .nav-tab.active::before,
[class*="bottom-nav"] .active::before,
[class*="tabbar"] .active::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  transform: translateX(-50%);
  width: 70%;
  height: 28px;
  background: radial-gradient(ellipse at center bottom,
    rgba(195,106,45,0.22) 0%,
    rgba(195,106,45,0.05) 55%,
    transparent 75%);
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

/* ---------- 9. Preserve dark hero treatments where wanted ---------- */
/* Money's dark hero & Rewards' dark gradient hero stay dark — but get a
   colored glow edge instead of a tinted halo. */
#section-dashboard.active .section-hero[data-dark="true"],
#section-dashboard.active .section-hero--money,
#section-rewards.active .section-hero--rewards {
  background: linear-gradient(160deg, #1f2d44 0%, #2a3d5c 100%) !important;
  color: var(--brand-cream, #FAF6EE) !important;
}
#section-dashboard.active .section-hero[data-dark="true"]::after,
#section-dashboard.active .section-hero--money::after,
#section-rewards.active .section-hero--rewards::after {
  display: none !important;
}

/* ---------- 10. Reduced motion: disable any new transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  body { transition: none !important; }
  .section.active .section-hero .emoji-strip > span { filter: none !important; }
}

/* ---------- 11. Safety: keep text contrast on tinted bodies ---------- */
/* All vivid-* tints are >= L 92, so default ink (#1A1A18) maintains AA+. */
/* ===== /VIVID-V4 ===== */

/* ===== VIVID-V4 FORCED CASCADE ===== */
/* Higher specificity + !important to beat any later body rules. */
html body[data-section="home"]      { background: var(--vivid-cream)      !important; }
html body[data-section="meals"]     { background: var(--vivid-peach)      !important; }
html body[data-section="dashboard"],
html body[data-section="expenses"]  { background: var(--vivid-sage)       !important; }
html body[data-section="learning"]  { background: var(--vivid-sand)       !important; }
html body[data-section="rewards"]   { background: var(--vivid-gold-cream) !important; }
html body[data-section="profile"]   { background: var(--vivid-linen)      !important; }
html body[data-section="todos"]     { background: var(--vivid-mint)       !important; }
html body[data-section="goals"]     { background: var(--vivid-navy-mist)  !important; }
html body[data-section="vacations"] { background: var(--vivid-lavender)   !important; }
html body[data-section="datenights"]{ background: var(--vivid-burgundy-mist) !important; }
html body[data-section="ideas"]     { background: var(--vivid-peach)      !important; }
html body[data-section="activities"]{ background: var(--vivid-mint)       !important; }
html body[data-section="shopping"]  { background: var(--vivid-peach)      !important; }
html body[data-section="workouts"]  { background: var(--vivid-mint)       !important; }

/* Kill the leftover Shopping List hero inside the Meals → Grocery list pane */
#section-shopping.in-meals-pane .section-hero,
#section-shopping.in-meals-pane .section-hero--shopping,
#section-shopping.in-meals-pane > .section-hero {
  display: none !important;
}

/* Hide remaining shopping chrome inside Meals → Grocery list */
#section-shopping.in-meals-pane .combined-filters,
#section-shopping.in-meals-pane .shopping-stats-row,
#section-shopping.in-meals-pane .shop-stats-row,
#section-shopping.in-meals-pane .shop-clear-row { display: none !important; }
#section-shopping.in-meals-pane .btn.btn-small {
  /* Catch-all: any "Clear bought items" type chip outside the run cards */
}
#section-shopping.in-meals-pane > * > .btn-small,
#section-shopping.in-meals-pane > .btn-small { display: none !important; }

/* ===== VIVID-V5 CARDS ===== */
/* Per-section warmth on cards, accent stripe + colored hover glow.
   Page tints already live on body[data-section]; this brings the same
   warmth INTO each card so we lose the "white slab on tinted page" look. */

/* ---------- Home: cream-on-cream tint ---------- */
body[data-section="home"] .v3-card,
body[data-section="home"] .home-v3-card,
body[data-section="home"] .ahv3-card,
body[data-section="home"] .station-v3-card {
  background: #FCF9F1 !important;
  border-color: rgba(195,106,45,0.10) !important;
}

/* ---------- Meals: peach tint ---------- */
body[data-section="meals"] .v3-card,
body[data-section="meals"] .mv3-day-card,
body[data-section="meals"] .mv3-recipe-card,
body[data-section="meals"] .mv3-run-card,
body[data-section="meals"] .ahv3-card {
  background: #FFFBF6 !important;
  border-color: rgba(233,116,68,0.10) !important;
}

/* ---------- Money: sage tint on primary cards.
   Transaction list rows stay pure white so amounts read clean. ---------- */
body[data-section="dashboard"] .v3-card,
body[data-section="dashboard"] .dash-card,
body[data-section="dashboard"] .ahv3-card,
body[data-section="expenses"] .v3-card,
body[data-section="expenses"] .dash-card,
body[data-section="expenses"] .ahv3-card {
  background: #F8FBF7 !important;
  border-color: rgba(47,122,95,0.10) !important;
}
/* Keep transaction rows / receipt tables on pure white */
body[data-section="dashboard"] .tx-row,
body[data-section="dashboard"] tr.expandable-row,
body[data-section="dashboard"] .expense-row,
body[data-section="expenses"] .tx-row,
body[data-section="expenses"] tr.expandable-row,
body[data-section="expenses"] .expense-row,
body[data-section="dashboard"] table.expenses-table,
body[data-section="expenses"] table.expenses-table,
body[data-section="dashboard"] table.expenses-table tbody td,
body[data-section="expenses"] table.expenses-table tbody td {
  background: #FFFFFF !important;
}

/* ---------- Stations: sand tint ---------- */
body[data-section="learning"] .v3-card,
body[data-section="learning"] .station-v3-card,
body[data-section="learning"] .ahv3-card {
  background: #FBF7EF !important;
  border-color: rgba(154,124,73,0.12) !important;
}

/* ---------- Rewards: gold-cream tint ---------- */
body[data-section="rewards"] .v3-card,
body[data-section="rewards"] .ahv3-card {
  background: #FCF8EC !important;
  border-color: rgba(212,164,55,0.16) !important;
}

/* ---------- Accent stripe on top of every tinted card ---------- */
body[data-section="home"] .v3-card,
body[data-section="home"] .home-v3-card,
body[data-section="meals"] .mv3-day-card,
body[data-section="meals"] .mv3-recipe-card,
body[data-section="meals"] .mv3-run-card,
body[data-section="meals"] .v3-card,
body[data-section="dashboard"] .v3-card,
body[data-section="dashboard"] .dash-card,
body[data-section="expenses"] .v3-card,
body[data-section="expenses"] .dash-card,
body[data-section="learning"] .v3-card,
body[data-section="learning"] .station-v3-card,
body[data-section="rewards"] .v3-card {
  position: relative;
  overflow: hidden;
}
body[data-section="home"] .v3-card::before,
body[data-section="home"] .home-v3-card::before,
body[data-section="meals"] .mv3-day-card::before,
body[data-section="meals"] .mv3-recipe-card::before,
body[data-section="meals"] .mv3-run-card::before,
body[data-section="meals"] .v3-card::before,
body[data-section="dashboard"] .v3-card::before,
body[data-section="dashboard"] .dash-card::before,
body[data-section="expenses"] .v3-card::before,
body[data-section="expenses"] .dash-card::before,
body[data-section="learning"] .v3-card::before,
body[data-section="learning"] .station-v3-card::before,
body[data-section="rewards"] .v3-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  pointer-events: none;
  z-index: 1;
}
body[data-section="home"] .v3-card::before,
body[data-section="home"] .home-v3-card::before {
  background: linear-gradient(90deg, #C36A2D 0%, #E08C4D 100%);
}
body[data-section="meals"] .mv3-day-card::before,
body[data-section="meals"] .mv3-recipe-card::before,
body[data-section="meals"] .mv3-run-card::before,
body[data-section="meals"] .v3-card::before {
  background: linear-gradient(90deg, #E97444 0%, #F38659 100%);
}
body[data-section="dashboard"] .v3-card::before,
body[data-section="dashboard"] .dash-card::before,
body[data-section="expenses"] .v3-card::before,
body[data-section="expenses"] .dash-card::before {
  background: linear-gradient(90deg, #246046 0%, #3F9374 100%);
}
body[data-section="learning"] .v3-card::before,
body[data-section="learning"] .station-v3-card::before {
  background: linear-gradient(90deg, #9A7C49 0%, #C9A75E 100%);
}
body[data-section="rewards"] .v3-card::before {
  background: linear-gradient(90deg, #B68A28 0%, #E2B647 100%);
}

/* ---------- Dramatic colored hover glow per section ---------- */
body[data-section="home"] .v3-card:hover,
body[data-section="home"] .home-v3-card:hover {
  box-shadow:
    0 14px 36px -10px rgba(195,106,45,0.32),
    0 2px 6px rgba(195,106,45,0.10) !important;
  border-color: rgba(195,106,45,0.32) !important;
}
body[data-section="meals"] .v3-card:hover,
body[data-section="meals"] .mv3-day-card:hover,
body[data-section="meals"] .mv3-recipe-card:hover,
body[data-section="meals"] .mv3-run-card:hover {
  box-shadow:
    0 14px 36px -10px rgba(233,116,68,0.34),
    0 2px 6px rgba(233,116,68,0.10) !important;
  border-color: rgba(233,116,68,0.32) !important;
}
body[data-section="dashboard"] .v3-card:hover,
body[data-section="dashboard"] .dash-card:hover,
body[data-section="expenses"] .v3-card:hover,
body[data-section="expenses"] .dash-card:hover {
  box-shadow:
    0 14px 36px -10px rgba(47,122,95,0.32),
    0 2px 6px rgba(47,122,95,0.10) !important;
  border-color: rgba(47,122,95,0.32) !important;
}
body[data-section="learning"] .v3-card:hover,
body[data-section="learning"] .station-v3-card:hover {
  box-shadow:
    0 14px 36px -10px rgba(154,124,73,0.30),
    0 2px 6px rgba(154,124,73,0.10) !important;
  border-color: rgba(154,124,73,0.32) !important;
}
body[data-section="rewards"] .v3-card:hover {
  box-shadow:
    0 14px 36px -10px rgba(212,164,55,0.36),
    0 2px 6px rgba(212,164,55,0.12) !important;
  border-color: rgba(212,164,55,0.36) !important;
}

/* ---------- Preserve dark heroes (Money hero, Rewards hero, Today spotlight) ---------- */
body[data-section="dashboard"] .section-hero[data-dark="true"],
body[data-section="dashboard"] .section-hero--money,
body[data-section="rewards"] .section-hero--rewards,
body[data-section="meals"] .meal-hero,
body[data-section="meals"] .meal-strip-card.is-today {
  background: revert !important;
  border-color: revert !important;
}
body[data-section="dashboard"] .section-hero[data-dark="true"]::before,
body[data-section="dashboard"] .section-hero--money::before,
body[data-section="rewards"] .section-hero--rewards::before,
body[data-section="meals"] .meal-hero::before,
body[data-section="meals"] .meal-strip-card.is-today::before {
  display: none !important;
}

/* ---------- Past-day meal cards: visible & tappable, just muted ---------- */
.meal-strip-card.is-past {
  opacity: 0.7 !important;
  filter: saturate(0.85);
}
.meal-strip-card.is-past::before {
  /* small "done" badge in the corner — additive, doesn't fight existing ::after wash */
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: var(--card-ink, #fff);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.meal-strip-card.is-past:hover {
  opacity: 1 !important;
  filter: none;
}

/* ===== /VIVID-V5 CARDS ===== */

/* ===== NOTIFICATIONS BELL ===== */
.mh-bell-btn { position: relative; }
.mh-bell-dot {
  position: absolute;
  top: 6px; right: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #E54848;
  border: 2px solid var(--brand-cream, #FAF6EE);
  display: none;
  pointer-events: none;
}
.mh-bell-btn.has-unread .mh-bell-dot { display: block; }

#notif-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(20,20,18,0.42);
  z-index: 9998;
  display: none;
  opacity: 0;
  transition: opacity 0.22s ease;
}
#notif-sheet-backdrop.is-open { display: block; opacity: 1; }

#notif-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: var(--card, #fff);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  max-height: 78vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
  box-shadow: 0 -12px 40px rgba(0,0,0,0.18);
  padding: 10px 16px 28px;
  display: none;
}
#notif-sheet.is-open { display: block; transform: translateY(0); }
#notif-sheet .notif-grab {
  width: 38px; height: 4px; border-radius: 4px;
  background: rgba(0,0,0,0.14);
  margin: 8px auto 12px;
}
#notif-sheet .notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 12px;
  border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.06));
}
#notif-sheet .notif-head h3 {
  margin: 0; font-size: 17px; font-weight: 700;
  color: var(--ink, #1A1A18);
}
#notif-sheet .notif-head button {
  background: none; border: none; padding: 6px 10px;
  font-size: 13px; color: var(--ink-faint, #6b6b66);
  cursor: pointer; border-radius: 8px;
}
#notif-sheet .notif-head button:hover { background: rgba(0,0,0,0.04); }
#notif-sheet .notif-list { padding: 4px 0; }
#notif-sheet .notif-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
#notif-sheet .notif-row:last-child { border-bottom: none; }
#notif-sheet .notif-row.is-unread { background: rgba(195,106,45,0.05); border-radius: 10px; padding-left: 10px; padding-right: 10px; }
#notif-sheet .notif-emoji {
  font-size: 22px; line-height: 1; flex-shrink: 0;
  width: 32px; text-align: center;
}
#notif-sheet .notif-body { flex: 1; min-width: 0; }
#notif-sheet .notif-text {
  font-size: 14px; line-height: 1.4; color: var(--ink, #1A1A18);
  word-wrap: break-word;
}
#notif-sheet .notif-time {
  font-size: 12px; color: var(--ink-faint, #8a8780);
  margin-top: 3px;
}
#notif-sheet .notif-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--ink-faint, #8a8780);
  font-size: 14px;
}
@media (min-width: 760px) {
  #notif-sheet {
    left: auto; right: 16px; bottom: auto; top: 64px;
    width: 360px; max-height: 70vh;
    border-radius: 18px;
    transform: translateY(-12px);
    opacity: 0;
  }
  #notif-sheet.is-open { transform: translateY(0); opacity: 1; }
}
/* ===== /NOTIFICATIONS BELL ===== */

/* ===== Multi-fix pass: titles, debt, admin polish ===== */

/* Member title surfaces */
.profile-hero-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #b88a4a);
  letter-spacing: 0.02em;
  margin: 2px 0 0;
}
.msd-sub {
  display: block;
  font-size: 11px;
  color: var(--ink-muted, #888);
  font-weight: 500;
  margin-top: 2px;
}

/* Admin Hub: editable title input on member rows */
.ahv3-title-edit {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}
.ahv3-title-input {
  width: 100%;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--hairline, #e6e2da);
  border-radius: 8px;
  background: var(--card, #fff);
  color: var(--ink, #111);
}
.ahv3-title-input:focus {
  outline: none;
  border-color: var(--accent, #b88a4a);
  box-shadow: 0 0 0 3px rgba(184,138,74,0.15);
}

/* Admin Hub: Categories card collapsible */
.ahv3-card--collapsible { padding: 0; overflow: hidden; }
.ahv3-collapse-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: 22px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
  font: inherit;
}
.ahv3-collapse-toggle:hover { background: rgba(0,0,0,0.02); }
.ahv3-collapse-head { flex: 1; min-width: 0; }
.ahv3-collapse-head .ahv3-card-eyebrow,
.ahv3-collapse-head .ahv3-card-title,
.ahv3-collapse-head .ahv3-card-meta { margin: 0 0 4px; }
.ahv3-collapse-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms ease;
  color: var(--ink-muted, #888);
  flex-shrink: 0;
}
.ahv3-card--collapsible.is-expanded .ahv3-collapse-chev {
  transform: rotate(90deg);
}
.ahv3-collapse-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease;
}
.ahv3-card--collapsible.is-expanded .ahv3-collapse-body {
  max-height: 4000px;
}
.ahv3-collapse-inner { padding: 0 22px 22px; }

/* Admin Hub grid: Pinterest-style fit-content layout */
@media (min-width: 760px) {
  .ahv3-grid {
    display: block;
    column-count: 2;
    column-gap: var(--space-5, 24px);
    grid-template-columns: none;
  }
  .ahv3-grid > .ahv3-card {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--space-5, 24px);
  }
}
@media (min-width: 1180px) {
  .ahv3-grid { column-count: 3; }
}

/* Debt payoff caption */
.debt-payoff-caption {
  font-size: 12px;
  color: var(--ink-muted, #888);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.debt-payoff-caption.is-paid {
  color: #2f8a4d;
  font-weight: 600;
}
.debt-payoff-caption.is-empty {
  color: var(--ink-muted, #888);
  font-style: italic;
}
.debt-payoff-caption.is-empty .btn {
  font-style: normal;
}
/* ===== /Multi-fix pass ===== */

/* ===== VIVID-V6 LOUD ===== */
/* Goal: family.co-style saturated color. Job 1 fixes meal-hero washout
   from V5 .v3-card bleed. Job 2 turns hero cards into full-color
   gradients per section, loud CTAs, vibrant sub-tab pills, and
   stronger page background tints. */

/* ---- Job 1: Meal "Today" spotlight — force dark navy gradient ---- */
body[data-section="meals"] .meal-hero,
.meal-hero {
  background: linear-gradient(135deg, #1d2e4a 0%, #1a1a1a 100%) !important;
  color: var(--brand-cream, #FAF6EE) !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 24px !important;
}
body[data-section="meals"] .meal-hero::before,
.meal-hero::before { display: none !important; }
.meal-hero-eyebrow,
.meal-hero-date,
.meal-hero-slot-type,
.meal-hero-slot-name { color: inherit !important; }
.meal-hero .mhf-chip {
  background: rgba(255,255,255,.08) !important;
  color: var(--brand-cream, #FAF6EE) !important;
  border: 0 !important;
}
.meal-hero .mhf-chip.active {
  background: var(--brand-cognac, #C36A2D) !important;
  color: #fff !important;
}
.meal-hero-slot {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: inherit !important;
}
.meal-hero-slot:hover { background: rgba(255,255,255,.08) !important; }

/* ---- Job 2A: Per-section colored hero cards ---- */

/* Home greeting -> warm cognac/coral gradient */
body[data-section="home"] #home-greeting,
body[data-section="home"] .home-v3-greeting,
body[data-section="home"] .v3-card:first-of-type {
  background: linear-gradient(135deg, #E97444 0%, #C36A2D 60%, #8C3A40 100%) !important;
  color: #FFF7E8 !important;
  border: 0 !important;
}
body[data-section="home"] .v3-card:first-of-type .home-v3-hello,
body[data-section="home"] .v3-card:first-of-type * { color: inherit !important; }
body[data-section="home"] .v3-card:first-of-type::before {
  background: rgba(255,255,255,.4) !important;
}

/* Meals recipes toolbar -> coral gradient */
body[data-section="meals"] .mv3-recipes-toolbar {
  background: linear-gradient(135deg, #E97444 0%, #D45C2E 100%) !important;
  padding: 24px !important;
  border-radius: 16px !important;
  color: #FFF !important;
}
body[data-section="meals"] .mv3-recipes-toolbar input,
body[data-section="meals"] .mv3-recipes-toolbar button { color: #1A1A1A; }
body[data-section="meals"] .mv3-recipes-toolbar #recipe-search {
  background: rgba(255,255,255,.92) !important;
}

/* Money stat cards -> 4 vivid gradients */
body[data-section="dashboard"] .v3-money-stats > div:nth-child(1) {
  background: linear-gradient(135deg, #2F7A5F, #1F5142) !important;
  color: #E8F1EC !important;
}
body[data-section="dashboard"] .v3-money-stats > div:nth-child(2) {
  background: linear-gradient(135deg, #2D3E5A, #1A2640) !important;
  color: #DCE3F0 !important;
}
body[data-section="dashboard"] .v3-money-stats > div:nth-child(3) {
  background: linear-gradient(135deg, #C36A2D, #8C4818) !important;
  color: #FFF1E0 !important;
}
body[data-section="dashboard"] .v3-money-stats > div:nth-child(4) {
  background: linear-gradient(135deg, #8C3A40, #5A1E23) !important;
  color: #F8E8E9 !important;
}
body[data-section="dashboard"] .v3-money-stats > div * { color: inherit !important; }
body[data-section="dashboard"] .v3-money-stats > div::before { display: none !important; }

/* Stations — bold per-member hero */
#lera-station .station-v3-hero {
  background: linear-gradient(135deg, #FFC93C 0%, #E97444 100%) !important;
  color: #2A1810 !important;
  border: 0 !important;
}
#lebari-station .station-v3-hero {
  background: linear-gradient(135deg, #FFB7C5 0%, #E97444 100%) !important;
  color: #2A1810 !important;
  border: 0 !important;
}
#abs-station .station-v3-hero {
  background: linear-gradient(135deg, #2D3E5A 0%, #1A2640 100%) !important;
  color: #DCE3F0 !important;
  border: 0 !important;
}
#anne-station-wrap .station-v3-hero {
  background: linear-gradient(135deg, #2F7A5F 0%, #1F5142 100%) !important;
  color: #E8F1EC !important;
  border: 0 !important;
}
.station-v3-hero * { color: inherit !important; }
.station-v3-name,
.station-v3-role { color: inherit !important; }
.station-v3-hero .station-v3-iconbtn {
  background: rgba(255,255,255,.18) !important;
  color: inherit !important;
  border: 0 !important;
}

/* Profile hero -> navy→cognac gradient */
body[data-section="profile"] .profile-hero-card {
  background: linear-gradient(135deg, #2D3E5A 0%, #C36A2D 100%) !important;
  color: #FFF7E8 !important;
}
body[data-section="profile"] .profile-hero-card * { color: inherit !important; }

/* ---- Job 2B: Loud CTA buttons ---- */
.btn-primary,
.v3-btn--primary,
.mv3-run-cta,
.mv3-recipe-add,
.home-v3-cta,
.ahv3-btn--primary {
  background: linear-gradient(135deg, #E97444 0%, #C36A2D 60%, #8C4818 100%) !important;
  color: #FFF !important;
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(195,106,45,.35), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.btn-primary:hover,
.v3-btn--primary:hover,
.mv3-run-cta:hover,
.mv3-recipe-add:hover,
.home-v3-cta:hover,
.ahv3-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(195,106,45,.45) !important;
}

/* ---- Job 2C: Decorative emoji strips on colored pills ---- */
.section-hero .emoji-strip {
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.7)) !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  gap: 12px !important;
  font-size: clamp(28px, 5vw, 40px) !important;
  box-shadow: 0 4px 16px rgba(195,106,45,.18) !important;
  margin-top: 16px !important;
}
.section-hero .emoji-strip span {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

/* ---- Job 2D: Vibrant sub-tab pill active states per section ---- */
body[data-section="meals"] .subtab-pill.is-active {
  background: linear-gradient(135deg, #E97444, #C36A2D) !important;
  color: #FFF !important;
}
body[data-section="dashboard"] .subtab-pill.is-active {
  background: linear-gradient(135deg, #2F7A5F, #1F5142) !important;
  color: #FFF !important;
}
body[data-section="rewards"] .subtab-pill.is-active {
  background: linear-gradient(135deg, #D4A437, #B58900) !important;
  color: #FFF !important;
}
body[data-section="learning"] .subtab-pill.is-active {
  background: linear-gradient(135deg, #C36A2D, #8C4818) !important;
  color: #FFF !important;
}

/* ---- Job 2E: Stronger page background tints ---- */
html body[data-section="home"]      { background: #FDEFDD !important; }
html body[data-section="meals"]     { background: #FCE8D6 !important; }
html body[data-section="dashboard"],
html body[data-section="expenses"]  { background: #E5EFE7 !important; }
html body[data-section="learning"]  { background: #FBE6CB !important; }
html body[data-section="rewards"]   { background: #F8E5C2 !important; }
html body[data-section="profile"]   { background: #EAE3D7 !important; }

/* ===== /VIVID-V6 LOUD ===== */

/* ===== REWARDS-V4 BASE ===== */
/* Coinbase/Base wallet inspired: gradient hero with glow, glassmorphic
   gradient asset tiles, vibrant earn cards. Pending/History stay white.
   Scoped to #section-rewards so other sections aren't affected. */

#section-rewards .rwv4-hero {
  position: relative;
  border-radius: 24px;
  padding: 28px 22px 24px;
  margin: 6px 0 18px;
  overflow: hidden;
  background: linear-gradient(150deg, #1A1A2E 0%, #2D1F3F 55%, #3A2547 100%) !important;
  box-shadow:
    0 30px 80px rgba(212, 164, 55, 0.30),
    0 12px 36px rgba(20, 16, 40, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  isolation: isolate;
}
#section-rewards .rwv4-hero::after {
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(212,164,55,0.45), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}
#section-rewards .rwv4-hero-bg { display: none; }
#section-rewards .rwv4-hero-inner {
  position: relative;
  z-index: 1;
}
#section-rewards .rwv4-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: rgba(250, 246, 238, 0.62);
  margin-bottom: 6px;
}
#section-rewards .rwv4-hero-num {
  font-family: 'Fraunces', Georgia, serif !important;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-weight: 600;
  font-size: clamp(80px, 18vw, 120px) !important;
  line-height: 0.95;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin: 4px 0 6px;
}
#section-rewards .rwv4-hero-num-val { color: #FFFFFF !important; }
#section-rewards .rwv4-hero-sub {
  font-size: 12px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: #D4A437 !important;
  margin-bottom: 14px;
}
#section-rewards .rwv4-hero-activity {
  font-size: 13px;
  color: rgba(250, 246, 238, 0.78);
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}

/* Sub-pill active state — ink with cream + gold glow */
#section-rewards .rwv3-pill.is-active {
  background: #1A1A2E !important;
  color: #FAF6EE !important;
  box-shadow: 0 0 0 1px rgba(212,164,55,0.45), 0 8px 22px rgba(212,164,55,0.30) !important;
}

/* ----- Vault grid ----- */
#section-rewards .rwv4-vault-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 12px;
}
@media (min-width: 720px) {
  #section-rewards .rwv4-vault-grid { grid-template-columns: 1fr 1fr; }
}

/* ----- Glassmorphic gradient tiles (override flat white v3) ----- */
#section-rewards .rwv4-tile {
  position: relative;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 18px !important;
  padding: 20px !important;
  overflow: hidden;
  background: linear-gradient(135deg, #E97444, #C36A2D);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    0 4px 14px rgba(233, 116, 68, 0.25);
  min-height: 168px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
@supports (backdrop-filter: blur(8px)) {
  #section-rewards .rwv4-tile { backdrop-filter: blur(8px); }
}
#section-rewards .rwv4-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 0%, rgba(255,255,255,0.18), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
#section-rewards .rwv4-tile > * { position: relative; z-index: 1; }

/* Tone cycle */
#section-rewards .rwv4-tile--tone1 {
  background: linear-gradient(135deg, #E97444, #C36A2D);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 6px 18px rgba(233,116,68,0.32);
}
#section-rewards .rwv4-tile--tone2 {
  background: linear-gradient(135deg, #3B6FB8, #1F4174);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 6px 18px rgba(59,111,184,0.32);
}
#section-rewards .rwv4-tile--tone3 {
  background: linear-gradient(135deg, #2F7A5F, #1F5142);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 6px 18px rgba(47,122,95,0.32);
}
#section-rewards .rwv4-tile--tone4 {
  background: linear-gradient(135deg, #8C3A40, #5A1E23);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 6px 18px rgba(140,58,64,0.32);
}
#section-rewards .rwv4-tile--tone5 {
  background: linear-gradient(135deg, #7A4DC9, #4A2987);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 6px 18px rgba(122,77,201,0.32);
}
#section-rewards .rwv4-tile--tone6 {
  background: linear-gradient(135deg, #1A1A2E, #2D1F3F);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 6px 18px rgba(45,31,63,0.45);
}

#section-rewards .rwv4-tile--locked { opacity: 0.78; }

#section-rewards .rwv4-tile-emoji {
  font-size: 48px !important;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
#section-rewards .rwv4-tile-name {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 600;
  color: #FFFFFF !important;
  margin: 2px 0 4px;
  letter-spacing: -0.01em;
}
#section-rewards .rwv4-tile-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78) !important;
  line-height: 1.4;
  margin-bottom: 14px;
  flex: 1;
}
#section-rewards .rwv4-tile-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}

#section-rewards .rwv4-cost-pill {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #E8B94A, #C99220) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(212,164,55,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  letter-spacing: 0.01em;
}
#section-rewards .rwv4-cost-pill--need {
  background: rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

#section-rewards .rwv4-redeem-btn {
  background: #FAF6EE !important;
  color: #1A1A2E !important;
  border: none !important;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  min-height: 40px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
#section-rewards .rwv4-redeem-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
  background: #FFFFFF !important;
}
#section-rewards .rwv4-redeem-btn:active { transform: translateY(0); }

#section-rewards .rwv4-tile-menu { z-index: 2; }
#section-rewards .rwv4-tile-menu-btn {
  background: rgba(255,255,255,0.18) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  backdrop-filter: blur(6px);
}
#section-rewards .rwv4-tile-menu-btn:hover {
  background: rgba(255,255,255,0.28) !important;
}

/* ----- Earn pane gradient cards ----- */
#section-rewards .rwv4-earn-caption {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--brand-navy, #1F3A5F);
  letter-spacing: -0.01em;
  margin: 4px 2px 10px;
}
#section-rewards .rwv4-earn-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.22);
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.20);
}
#section-rewards .rwv4-earn-card--static {
  cursor: default;
}
#section-rewards .rwv4-earn-card--static:hover {
  transform: none;
}
#section-rewards .rwv4-earn-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 6px;
}
@media (min-width: 720px) {
  #section-rewards .rwv4-earn-list { grid-template-columns: 1fr 1fr; }
}
#section-rewards .rwv4-earn-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #FFFFFF !important;
  min-height: 76px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(135deg, #E97444, #C36A2D);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10), 0 4px 14px rgba(0,0,0,0.06);
  isolation: isolate;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
#section-rewards .rwv4-earn-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 0%, rgba(255,255,255,0.20), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
#section-rewards .rwv4-earn-card > * { position: relative; z-index: 1; }
#section-rewards .rwv4-earn-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.14);
}
#section-rewards .rwv4-earn-card--coral {
  background: linear-gradient(135deg, #E97444, #C36A2D);
  box-shadow: 0 10px 26px rgba(233,116,68,0.32);
}
#section-rewards .rwv4-earn-card--emerald {
  background: linear-gradient(135deg, #2F7A5F, #1F5142);
  box-shadow: 0 10px 26px rgba(47,122,95,0.32);
}
#section-rewards .rwv4-earn-card--cognac {
  background: linear-gradient(135deg, #C36A2D, #8C4818);
  box-shadow: 0 10px 26px rgba(195,106,45,0.32);
}
#section-rewards .rwv4-earn-card--gold {
  background: linear-gradient(135deg, #E8B94A, #B58900);
  box-shadow: 0 10px 26px rgba(212,164,55,0.40);
}
#section-rewards .rwv4-earn-card--royal {
  background: linear-gradient(135deg, #7A4DC9, #4A2987);
  box-shadow: 0 10px 26px rgba(122,77,201,0.32);
}
#section-rewards .rwv4-earn-card--ocean {
  background: linear-gradient(135deg, #3B6FB8, #1F4174);
  box-shadow: 0 10px 26px rgba(59,111,184,0.32);
}
#section-rewards .rwv4-earn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.20);
  color: #FFFFFF !important;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.18);
}
#section-rewards .rwv4-earn-icon svg { stroke: #FFFFFF !important; }
#section-rewards .rwv4-earn-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
#section-rewards .rwv4-earn-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 600;
  color: #FFFFFF !important;
  letter-spacing: -0.01em;
}
#section-rewards .rwv4-earn-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.82) !important;
  font-variant-numeric: tabular-nums;
}
#section-rewards .rwv4-earn-arrow {
  font-size: 20px;
  color: rgba(255,255,255,0.85) !important;
  flex-shrink: 0;
  margin-left: 6px;
}

/* Pending and History keep white v3-cards — only ensure rows have 56px touch */
#section-rewards #rwv3-pane-pending .rwv3-row,
#section-rewards #rwv3-pane-history .rwv3-row {
  min-height: 56px;
}

/* ===== /REWARDS-V4 BASE ===== */

/* ===== HOME-V4 EDITORIAL ===== */
#section-home.home-v4 { display: none; }
#section-home.home-v4.active {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 16px 96px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: "tnum" 1;
}

/* HERO -------------------------------------------------------------- */
#section-home .home-v4-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, #E97444 0%, #C36A2D 60%, #8C3A40 100%);
  color: #FBEEDD;
  box-shadow: 0 12px 40px -16px rgba(140, 58, 64, 0.45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
#section-home .home-v4-hero:focus-visible {
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 3px;
}

#section-home .home-v4-caption {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  font-weight: 600;
}

#section-home .home-v4-hello {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(56px, 13vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #FFF6E8;
}
#section-home .home-v4-hello-line {
  display: block;
}
#section-home .home-v4-hello-name {
  color: #1A0E0B;
}

#section-home .home-v4-verse {
  margin-top: 4px;
  max-width: 540px;
}
#section-home .home-v4-verse-text {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.45;
  color: #FBEEDD;
  opacity: 0.95;
}
#section-home .home-v4-verse-attr {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.65;
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
}

#section-home .home-v4-reveal-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  background: rgba(255, 246, 232, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 246, 232, 0.28);
  border-radius: 999px;
  font-size: 13px;
  color: #FFF6E8;
  max-width: 100%;
}
#section-home .home-v4-reveal-kind {
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.9;
  flex-shrink: 0;
}
#section-home .home-v4-reveal-text {
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* STATS STRIP ------------------------------------------------------- */
#section-home .home-v4-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 12px;
  font-size: 12px;
  color: var(--brand-ink-soft, #6B5C50);
  border-bottom: 1px solid var(--brand-line, rgba(0,0,0,0.08));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#section-home .home-v4-stat-lead {
  font-weight: 700;
  color: var(--brand-ink, #1A0E0B);
  letter-spacing: 0.12em;
}
#section-home .home-v4-stat-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-ink, #1A0E0B);
}
#section-home .home-v4-stat-sep {
  opacity: 0.5;
}

/* BLOCK / EYEBROW --------------------------------------------------- */
#section-home .home-v4-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#section-home .home-v4-eyebrow,
#section-home .home-v4-eyebrow-row .home-v4-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-ink-soft, #6B5C50);
  padding-left: 4px;
}
#section-home .home-v4-eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-right: 4px;
}
#section-home .home-v4-link {
  background: transparent;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 13px;
  color: var(--brand-cognac, #C36A2D);
  cursor: pointer;
  font-weight: 500;
}
#section-home .home-v4-link:hover { text-decoration: underline; }

/* CARD (white) ------------------------------------------------------- */
#section-home .home-v4-card {
  background: var(--brand-cream, #FFFCF6);
  border: 1px solid var(--brand-line, rgba(0,0,0,0.08));
  border-radius: 16px;
  padding: 18px;
}

/* NEXT UP ----------------------------------------------------------- */
#section-home .home-v4-nextup {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#section-home .home-v4-nextup-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
#section-home .home-v4-nextup-emoji {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
#section-home .home-v4-nextup-body {
  flex: 1;
  min-width: 0;
}
#section-home .home-v4-nextup-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--brand-ink, #1A0E0B);
  letter-spacing: -0.01em;
}
#section-home .home-v4-nextup-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--brand-ink-soft, #6B5C50);
  font-variant-numeric: tabular-nums;
}
#section-home .home-v4-nextup-link {
  align-self: flex-end;
  margin-top: -4px;
}
#section-home .home-v4-nextup-empty .home-v4-nextup-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--brand-ink-soft, #6B5C50);
}

/* TODAY'S WINDOW (4 meal pills) ------------------------------------- */
#section-home .home-v4-meals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
#section-home .home-v4-meal-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 10px;
  background: var(--brand-cream, #FFFCF6);
  border: 1px solid var(--brand-line, rgba(0,0,0,0.08));
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.12s var(--ease-out, ease-out), box-shadow 0.12s;
  min-height: 72px;
}
#section-home .home-v4-meal-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -8px rgba(0,0,0,0.2);
}
#section-home .home-v4-meal-emoji {
  font-size: 18px;
  line-height: 1;
}
#section-home .home-v4-meal-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-ink-soft, #6B5C50);
}
#section-home .home-v4-meal-name {
  font-size: 13px;
  color: var(--brand-ink, #1A0E0B);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

@media (max-width: 520px) {
  #section-home .home-v4-meals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* UPCOMING list ---------------------------------------------------- */
#section-home .home-v4-upcoming {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
}
#section-home .home-v4-up-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 12px 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--brand-line, rgba(0,0,0,0.06));
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--brand-ink, #1A0E0B);
  font-size: 14px;
  line-height: 1.35;
}
#section-home .home-v4-up-row:last-child { border-bottom: 0; }
#section-home .home-v4-up-row:hover { background: rgba(0,0,0,0.02); }
#section-home .home-v4-up-day {
  font-weight: 700;
  letter-spacing: 0.04em;
  width: 56px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--brand-ink, #1A0E0B);
}
#section-home .home-v4-up-sep {
  opacity: 0.4;
  flex-shrink: 0;
}
#section-home .home-v4-up-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#section-home .home-v4-empty {
  padding: 16px;
  font-size: 14px;
  color: var(--brand-ink-soft, #6B5C50);
  text-align: center;
}

/* ANNOUNCEMENTS / POLLS strip --------------------------------------- */
#section-home .home-v4-ap-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  background: var(--brand-cream, #FFFCF6);
  border: 1px solid var(--brand-line, rgba(0,0,0,0.08));
  border-radius: 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-ink, #1A0E0B);
  cursor: pointer;
  text-align: left;
}
#section-home .home-v4-ap-strip-caret {
  font-size: 18px;
  color: var(--brand-ink-soft, #6B5C50);
  transition: transform 0.18s var(--ease-out, ease-out);
}
#section-home .home-v4-ap-strip.is-open .home-v4-ap-strip-caret {
  transform: rotate(90deg);
}
#section-home .home-v4-ap-panel {
  margin-top: 10px;
  background: var(--brand-cream, #FFFCF6);
  border: 1px solid var(--brand-line, rgba(0,0,0,0.08));
  border-radius: 14px;
  padding: 14px;
}
#section-home .home-v4-ap-panel[hidden] { display: none; }

/* DESKTOP padding bump --------------------------------------------- */
@media (min-width: 768px) {
  #section-home.home-v4 { padding: 24px 24px 120px; }
  #section-home .home-v4-hero { padding: 32px; gap: 22px; }
}

/* ===== /HOME-V4 EDITORIAL ===== */

/* ===== TODOS-V3 LINEAR ===== */
/* Single-panel, hairline-only, Linear/Things 3 minimal todos.
   Scope: only #section-todos. Reuses v3 tokens. */

#section-todos .td-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 10px;
  max-width: 880px;
  margin: 0 auto;
}
#section-todos .td-filters {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
#section-todos .td-filters::-webkit-scrollbar { display: none; }
#section-todos .td-pill {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--v3-hairline-strong);
  color: var(--v3-ink-soft);
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  min-height: 34px;
}
#section-todos .td-pill:hover { background: var(--v3-cream); }
#section-todos .td-pill.is-active {
  background: var(--v3-cognac);
  color: #fff;
  border-color: var(--v3-cognac);
}
#section-todos .td-add {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  background: var(--v3-ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 34px;
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, transform .1s ease;
}
#section-todos .td-add:hover { background: var(--v3-ink-soft); }
#section-todos .td-add:active { transform: scale(0.97); }

/* The single white panel */
#section-todos .td-panel {
  background: var(--v3-paper);
  border: 1px solid var(--v3-hairline);
  border-radius: 16px;
  margin: 0 auto 24px;
  max-width: 880px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(20,25,40,0.02);
  list-style: none;
  padding: 0;
}

#section-todos .td-group + .td-group {
  border-top: 1px solid var(--v3-hairline-strong);
}
#section-todos .td-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
}
#section-todos .td-group-head--toggle { cursor: pointer; font: inherit; }
#section-todos .td-group-label {
  font: 600 11px/1 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--v3-muted);
}
#section-todos .td-group-count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--v3-muted);
  margin-left: 4px;
}
#section-todos .td-chev { font-size: 12px; color: var(--v3-muted); line-height: 1; }

/* Row */
#section-todos .td-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 20px 10px 16px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--v3-hairline);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--v3-ink);
  transition: background .12s ease;
}
#section-todos .td-group-body > .td-row:first-child { border-top: 1px solid var(--v3-hairline); }
#section-todos .td-row:hover { background: var(--v3-cream); }
#section-todos .td-row:focus-visible {
  outline: 2px solid var(--v3-cognac);
  outline-offset: -2px;
}

/* Checkbox */
#section-todos .td-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint, #A6A39B);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent;
  background: transparent;
  flex: 0 0 auto;
  margin-left: 8px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
  cursor: pointer;
}
#section-todos .td-check:hover { border-color: var(--v3-cognac); }
#section-todos .td-row.is-done .td-check {
  background: var(--v3-cognac);
  border-color: var(--v3-cognac);
  color: #fff;
  animation: tdCheckPop 220ms cubic-bezier(.34,1.56,.64,1);
}
@keyframes tdCheckPop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Body */
#section-todos .td-body {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
#section-todos .td-title {
  font: 500 15px/1.35 'Inter', system-ui, sans-serif;
  color: var(--v3-ink);
  letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#section-todos .td-meta {
  font: 400 12px/1.3 'Inter', system-ui, sans-serif;
  color: var(--v3-muted);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
#section-todos .td-sep { color: var(--v3-hairline-strong); font-weight: 400; }
#section-todos .td-assignee { display: inline-flex; align-items: center; gap: 5px; }
#section-todos .td-assignee-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--td-dot, var(--v3-muted)); flex: 0 0 auto;
}
#section-todos .td-due,
#section-todos .td-recurring { font-variant-numeric: tabular-nums; }
#section-todos .td-recurring::before { content: "↻ "; margin-right: 1px; }

/* Done state */
#section-todos .td-row.is-done { opacity: 0.55; }
#section-todos .td-row.is-done .td-title {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--v3-muted);
}

/* Trail */
#section-todos .td-trail {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--v3-muted);
}
#section-todos .td-prio {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--v3-muted); display: inline-block;
}
#section-todos .td-prio--high   { background: var(--v3-negative); }
#section-todos .td-prio--medium { background: var(--v3-warn); }
#section-todos .td-prio--low    { background: var(--v3-teal); }
#section-todos .td-points {
  font: 500 11px/1 'Inter', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--v3-muted);
  background: var(--v3-cream);
  padding: 4px 7px;
  border-radius: 999px;
}
#section-todos .td-actions {
  display: inline-flex; align-items: center; gap: 2px;
  opacity: 0; transition: opacity .15s ease;
}
#section-todos .td-row:hover .td-actions,
#section-todos .td-row:focus-within .td-actions { opacity: 1; }
#section-todos .td-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  color: var(--v3-muted);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
#section-todos .td-iconbtn:hover { background: var(--v3-hairline); color: var(--v3-ink); }

/* Empty states */
#section-todos .td-empty {
  font: italic 400 14px/1.4 'Inter', system-ui, sans-serif;
  color: var(--v3-muted);
  padding: 14px 20px 18px;
}
#section-todos .td-empty--all { text-align: center; padding: 40px 20px; font-style: normal; }

/* Mobile tightening */
@media (max-width: 540px) {
  #section-todos .td-toolbar { padding: 12px 12px 8px; }
  #section-todos .td-row {
    grid-template-columns: 36px 1fr auto;
    padding: 10px 14px 10px 10px;
    gap: 10px;
  }
  #section-todos .td-group-head { padding: 14px 16px 6px; }
  #section-todos .td-actions { opacity: 1; }
  #section-todos .td-points { display: none; }
}

/* Hide legacy filter chrome that no longer renders */
#section-todos .section-header-filters { display: none !important; }

/* ===== /TODOS-V3 LINEAR ===== */


/* ===== MEAL HERO POLISH — kill borders, vivid section hero ===== */

/* Remove the hairline boxes around each meal slot inside the dark Today hero */
.meal-hero-slot,
body[data-section="meals"] .meal-hero-slot {
  border: 0 !important;
  background: transparent !important;
  padding: 14px 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.meal-hero-slot:last-child {
  border-bottom: 0 !important;
}
.meal-hero-slot:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* Make the section hero above the Today card POP — vivid gradient instead of flat cream */

/* ===== MEALS HERO POLISH (final) ===== */
body[data-section="meals"] #section-meals > .mv3-hero {
  background: linear-gradient(135deg, #FFE0BD 0%, #FCC79A 60%, #E97444 100%) !important;
  border-radius: 18px !important;
  padding: 24px 22px !important;
  margin-bottom: 16px !important;
  border: 0 !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(233,116,68,0.18) !important;
}
body[data-section="meals"] #section-meals > .mv3-hero::before { display: none !important; }
body[data-section="meals"] #section-meals > .mv3-hero .mv3-hero-eyebrow {
  background: rgba(255,255,255,0.55) !important;
  color: #8C3A0E !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}
body[data-section="meals"] #section-meals > .mv3-hero .mv3-hero-title {
  color: #2A1810 !important;
}
body[data-section="meals"] #section-meals > .mv3-hero .mv3-hero-sub {
  color: rgba(42,24,16,0.78) !important;
}
body[data-section="meals"] #section-meals > .mv3-hero .mv3-hero-deco {
  background: rgba(255,255,255,0.85) !important;
  font-size: clamp(34px, 5.5vw, 44px) !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(140,58,14,0.18) !important;
  margin-top: 14px !important;
  display: inline-flex !important;
  gap: 12px !important;
  width: fit-content;
}
body[data-section="meals"] #section-meals > .mv3-hero .mv3-hero-deco span {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)) !important;
}

/* ===== HOME V4.1 POLISH — match Family Kitchen pill style ===== */

/* Eyebrow becomes a cream pill (matches Meals hero) */
body[data-section="home"] .home-v41-hero-eyebrow {
  background: rgba(255,255,255,0.55) !important;
  color: #6E2A0A !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  font: 700 11px/1 var(--font-ui, Inter) !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 14px !important;
}

/* Title and sub: dark ink on warm gradient */
body[data-section="home"] .home-v41-hero-title {
  color: #FFFFFF !important;
  font-family: var(--font-display, Fraunces), Georgia, serif !important;
  font-size: clamp(36px, 8vw, 52px) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px !important;
}
body[data-section="home"] .home-v41-hero-sub {
  color: rgba(255,255,255,0.85) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  margin: 0 0 16px !important;
}

/* Emoji strip becomes a big white pill with shadow + drop-shadow per emoji */
body[data-section="home"] .home-v41-hero-deco {
  background: rgba(255,255,255,0.85) !important;
  font-size: clamp(34px, 5.5vw, 44px) !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(140,58,14,0.18) !important;
  margin-top: 14px !important;
  display: inline-flex !important;
  gap: 12px !important;
  width: fit-content;
  letter-spacing: 0 !important;
}
body[data-section="home"] .home-v41-hero-deco span {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15)) !important;
}

/* Verse + Reveal cards get cognac eyebrow pills */
body[data-section="home"] .home-v41-eyebrow-pill {
  background: rgba(195,106,45,0.12) !important;
  color: var(--brand-cognac, #C36A2D) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  font: 700 11px/1 var(--font-ui, Inter) !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 12px !important;
}

/* ===== MONEY STAT TILES — Family Wallet style ===== */
/* Smaller, always 2-col, saturated solid colors, clean iconographic feel */

body[data-section="dashboard"] #money-pane-overview .v3-money-stats,
body[data-section="dashboard"] .mv4-stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 24px !important;
}
@media (min-width: 720px) {
  body[data-section="dashboard"] #money-pane-overview .v3-money-stats,
  body[data-section="dashboard"] .mv4-stats { gap: 14px !important; }
}

body[data-section="dashboard"] .mv4-stat,
body[data-section="dashboard"] .v3-money-stats > div {
  border-radius: 20px !important;
  padding: 18px 18px 16px !important;
  min-height: 132px !important;
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 1px 3px rgba(20,20,30,0.04), 0 8px 20px rgba(20,20,30,0.04);
}
body[data-section="dashboard"] .mv4-stat:hover,
body[data-section="dashboard"] .v3-money-stats > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(20,20,30,0.10), 0 12px 28px rgba(20,20,30,0.08);
}

/* Solid saturated colors per tile (NOT gradients) */
body[data-section="dashboard"] .mv4-stat--spent,
body[data-section="dashboard"] .v3-money-stats > div:nth-child(1) {
  background: #C36A2D !important; /* cognac */
  color: #FFFFFF !important;
}
body[data-section="dashboard"] .mv4-stat--income,
body[data-section="dashboard"] .v3-money-stats > div:nth-child(2) {
  background: #2F7A5F !important; /* emerald */
  color: #FFFFFF !important;
}
body[data-section="dashboard"] .mv4-stat--net,
body[data-section="dashboard"] .v3-money-stats > div:nth-child(3) {
  background: #2D3E5A !important; /* navy */
  color: #FFFFFF !important;
}
body[data-section="dashboard"] .mv4-stat--subs,
body[data-section="dashboard"] .v3-money-stats > div:nth-child(4) {
  background: #8C3A40 !important; /* burgundy */
  color: #FFFFFF !important;
}

/* All inner text inherits */
body[data-section="dashboard"] .mv4-stat *,
body[data-section="dashboard"] .v3-money-stats > div * {
  color: inherit !important;
}

/* Decorative emoji top-left in a soft white-tint circle */
body[data-section="dashboard"] .mv4-stat-emoji {
  position: static !important;
  width: 36px !important; height: 36px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  margin-bottom: 8px !important;
}

/* Hide the conversational caption to match Family Wallet's terse style */
body[data-section="dashboard"] .mv4-stat-caption,
body[data-section="dashboard"] .mv4-stat-cap {
  display: none !important;
}

/* Big tile title */
body[data-section="dashboard"] .mv4-stat-title,
body[data-section="dashboard"] .mv4-stat-label {
  font: 600 17px/1.2 var(--font-ui, Inter), sans-serif !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  margin: 0 0 4px !important;
  color: inherit !important;
  display: block !important;
}

/* Compact value under title — like the "1.03 ETH" caption */
body[data-section="dashboard"] .mv4-stat-num,
body[data-section="dashboard"] .v3-money-stats > div [id^="v3-stat-"] {
  font: 600 22px/1.1 var(--font-display, Fraunces), Georgia, serif !important;
  font-feature-settings: "tnum" 1 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
  color: inherit !important;
  margin: 0 !important;
}
body[data-section="dashboard"] .mv4-stat-unit {
  font: 400 13px/1 var(--font-ui, Inter), sans-serif !important;
  opacity: 0.8 !important;
  margin-left: 2px !important;
}

/* Sub line / meta caption smaller */
body[data-section="dashboard"] .mv4-stat-meta,
body[data-section="dashboard"] .mv4-stat-sub {
  font: 500 12px/1.3 var(--font-ui, Inter), sans-serif !important;
  opacity: 0.75 !important;
  margin-top: 4px !important;
}

/* Optional ⋯ menu top-right */
body[data-section="dashboard"] .mv4-stat::after {
  content: '⋯';
  position: absolute;
  top: 12px; right: 14px;
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1px;
  pointer-events: none;
}

/* Kill old shadows / inner highlights from previous V4 */
body[data-section="dashboard"] .mv4-stat::before {
  display: none !important;
}

/* ===== CARD-HERO-V5 ===== */
/* Premium credit-card aesthetic for Money + Rewards heroes,
   plus warmth-injected secondary cards on Home. */

/* ---------- Job 1: Money "This Month" hero ---------- */
#money-pane-overview .v3-money-hero {
  background: linear-gradient(135deg, #0E1B2D 0%, #1D2E4A 45%, #2A3F62 100%) !important;
  color: #F4EBD8 !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 24px 24px 28px !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 24px 48px rgba(15, 27, 45, 0.30),
    0 4px 14px rgba(15, 27, 45, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.20) !important;
}

/* Holographic shimmer */
#money-pane-overview .v3-money-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,0.04) 38%,
      rgba(212,164,55,0.10) 50%,
      rgba(255,255,255,0.04) 62%,
      transparent 100%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.015) 0 2px,
      transparent 2px 6px);
  pointer-events: none;
  z-index: 0;
}

/* Decorative gold band */
#money-pane-overview .v3-money-hero::after {
  content: '';
  position: absolute;
  top: 50%; left: -10%;
  width: 120%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,164,55,0.30), transparent);
  pointer-events: none;
  z-index: 0;
}

/* Member caption top-right */
#money-pane-overview .v3-money-hero .v3-money-hero-top::after {
  content: 'AFAMILY \00B7 MEMBER';
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 9px;
  letter-spacing: 1.6px;
  font-weight: 600;
  color: rgba(244,235,216,0.55);
  pointer-events: none;
  z-index: 2;
}

/* Embossed gold chip top-left */
#money-pane-overview .v3-money-hero .v3-money-hero-top::before {
  content: '';
  position: absolute;
  top: 16px;
  left: 20px;
  width: 28px;
  height: 20px;
  border-radius: 4px;
  background:
    linear-gradient(135deg, #E5BB4A 0%, #D4A437 50%, #B58900 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 1px 2px rgba(0,0,0,0.30);
  pointer-events: none;
  z-index: 2;
}

#money-pane-overview .v3-money-hero .v3-money-hero-top {
  position: relative;
  padding-top: 32px !important;
  z-index: 1;
}

/* Stack everything above the shimmer */
#money-pane-overview .v3-money-hero > * { position: relative; z-index: 1; }

/* Force cream text inside hero */
#money-pane-overview .v3-money-hero,
#money-pane-overview .v3-money-hero * { color: #F4EBD8 !important; }

#money-pane-overview .v3-money-hero #dash-total-spending,
#money-pane-overview .v3-money-hero .v3-money-hero-amount,
#money-pane-overview .v3-money-hero .v3-money-num,
#money-pane-overview .v3-money-hero strong,
#money-pane-overview .v3-money-hero #v3-money-delta,
#money-pane-overview .v3-money-hero .v3-money-month-pick {
  color: #F4EBD8 !important;
}

/* Eyebrow tracked tiny */
#money-pane-overview .v3-money-hero .v3-money-hero-eyebrow {
  font-size: 11px !important;
  letter-spacing: 1.8px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(244,235,216,0.70) !important;
}

/* Huge Fraunces total */
#money-pane-overview .v3-money-hero .v3-money-hero-amount,
#money-pane-overview .v3-money-hero #dash-total-spending {
  font-family: 'Fraunces', Georgia, serif !important;
  font-feature-settings: 'tnum' 1, 'lnum' 1 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-weight: 500 !important;
  font-size: clamp(48px, 14vw, 88px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.02em !important;
  margin-top: 6px !important;
}

#money-pane-overview .v3-money-hero .v3-money-hero-delta,
#money-pane-overview .v3-money-hero .v3-money-hero-caption {
  font-size: 14px !important;
  color: rgba(244,235,216,0.78) !important;
}

/* Sparkline cream */
#money-pane-overview .v3-money-hero .v3-money-spark path,
#money-pane-overview .v3-money-hero #v3-money-spark-path {
  stroke: rgba(244,235,216,0.70) !important;
}

/* Glassy month picker */
#money-pane-overview .v3-money-hero #dash-month-select,
#money-pane-overview .v3-money-hero .v3-money-month-pick {
  background: rgba(255,255,255,0.10) !important;
  color: #F4EBD8 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
  padding: 6px 10px !important;
}
#money-pane-overview .v3-money-hero #dash-month-select option {
  color: #0E1B2D !important;
  background: #F4EBD8 !important;
}

/* ---------- Job 2: Rewards family balance hero ---------- */
#section-rewards .rwv4-hero,
#section-rewards .rwv3-hero,
.rewards-hero {
  position: relative;
  overflow: hidden;
}

/* Holographic shimmer */
#section-rewards .rwv4-hero::before,
#section-rewards .rwv3-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,0.05) 38%,
      rgba(212,164,55,0.14) 50%,
      rgba(255,255,255,0.05) 62%,
      transparent 100%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.018) 0 2px,
      transparent 2px 6px);
  pointer-events: none;
  z-index: 0;
}

/* Boost gold radial bloom in upper right */
#section-rewards .rwv4-hero::after,
#section-rewards .rwv3-hero::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 80%;
  height: 140%;
  background: radial-gradient(ellipse at center,
    rgba(212,164,55,0.32) 0%,
    rgba(212,164,55,0.12) 35%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Member caption top-right */
#section-rewards .rwv4-hero .rwv3-hero-inner::after,
#section-rewards .rwv3-hero .rwv3-hero-inner::after {
  content: 'AFAMILY MEMBER';
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 9px;
  letter-spacing: 1.6px;
  font-weight: 600;
  color: rgba(244,235,216,0.60);
  pointer-events: none;
  z-index: 3;
}

/* Embossed gold EMV chip top-left */
#section-rewards .rwv4-hero .rwv3-hero-inner::before,
#section-rewards .rwv3-hero .rwv3-hero-inner::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 20px;
  width: 26px;
  height: 19px;
  border-radius: 4px;
  background:
    linear-gradient(135deg, #E5BB4A 0%, #D4A437 50%, #B58900 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 1px 2px rgba(0,0,0,0.30);
  pointer-events: none;
  z-index: 3;
  /* faint chip line detail */
  background-image:
    linear-gradient(135deg, #E5BB4A 0%, #D4A437 50%, #B58900 100%),
    linear-gradient(0deg, transparent 30%, rgba(0,0,0,0.18) 30% 32%, transparent 32% 60%, rgba(0,0,0,0.18) 60% 62%, transparent 62%);
}

#section-rewards .rwv4-hero .rwv3-hero-inner,
#section-rewards .rwv3-hero .rwv3-hero-inner {
  position: relative;
  padding-top: 38px !important;
  z-index: 1;
}

#section-rewards .rwv4-hero > *,
#section-rewards .rwv3-hero > * { position: relative; z-index: 1; }

/* ---------- Job 3: Home secondary cards — warmth injection ---------- */
body[data-section="home"] .home-v41-verse-card,
body[data-section="home"] .home-v41-reveal-card,
body[data-section="home"] .home-v4-block,
body[data-section="home"] .home-v4-ap-panel,
body[data-section="home"] #home-v4-ap-panel {
  position: relative;
  overflow: hidden;
}

/* Daily Verse */
body[data-section="home"] .home-v41-verse-card {
  background: linear-gradient(135deg, #FFF6E6 0%, #FFEACE 100%) !important;
  border: 1px solid rgba(212,164,55,0.18) !important;
}
body[data-section="home"] .home-v41-verse-card::after {
  content: '\2728';
  position: absolute;
  top: 10px; right: 14px;
  font-size: 36px;
  opacity: 0.55;
  pointer-events: none;
}

/* Today's Reveal */
body[data-section="home"] .home-v41-reveal-card {
  background: linear-gradient(135deg, #F4E9E4 0%, #E8CFC4 100%) !important;
  border: 1px solid rgba(140,58,64,0.18) !important;
}
body[data-section="home"] .home-v41-reveal-card::after {
  content: '\1F9E0';
  position: absolute;
  top: 10px; right: 14px;
  font-size: 36px;
  opacity: 0.6;
  pointer-events: none;
}

/* Next Up */
body[data-section="home"] [data-home-block="next-up"],
body[data-section="home"] #home-next-up {
  background: linear-gradient(135deg, #E5EFE7 0%, #BAD9C3 100%) !important;
  border: 1px solid rgba(47,122,95,0.18) !important;
}
body[data-section="home"] [data-home-block="next-up"]::after,
body[data-section="home"] #home-next-up::after {
  content: '\1F3AF';
  position: absolute;
  top: 10px; right: 14px;
  font-size: 36px;
  opacity: 0.55;
  pointer-events: none;
}

/* Today's Window (meals) */
body[data-section="home"] [data-home-block="today"],
body[data-section="home"] #home-meals,
body[data-section="home"] .home-v4-meals {
  background: linear-gradient(135deg, #FBE8D8 0%, #F5C8A0 100%) !important;
  border: 1px solid rgba(195,106,45,0.16) !important;
}

/* Meal pills — slot-specific warm tints */
body[data-section="home"] .home-v4-meals [data-slot="breakfast"],
body[data-section="home"] #home-meals [data-slot="breakfast"] {
  background: linear-gradient(135deg, #FFD9B8 0%, #F5B07A 100%) !important;
  color: #5A2E10 !important;
}
body[data-section="home"] .home-v4-meals [data-slot="lunch"],
body[data-section="home"] #home-meals [data-slot="lunch"] {
  background: linear-gradient(135deg, #D7E4D2 0%, #A9C29C 100%) !important;
  color: #2D4A2A !important;
}
body[data-section="home"] .home-v4-meals [data-slot="dinner"],
body[data-section="home"] #home-meals [data-slot="dinner"] {
  background: linear-gradient(135deg, #2A3F62 0%, #1D2E4A 100%) !important;
  color: #F4EBD8 !important;
}
body[data-section="home"] .home-v4-meals [data-slot="snack"],
body[data-section="home"] #home-meals [data-slot="snack"] {
  background: linear-gradient(135deg, #FFF6E6 0%, #F5E2B8 100%) !important;
  color: #5C4A1A !important;
}

/* Upcoming */
body[data-section="home"] [data-home-block="upcoming"],
body[data-section="home"] #home-upcoming,
body[data-section="home"] .home-v4-upcoming {
  background: linear-gradient(135deg, #ECE0F5 0%, #C8B0E5 100%) !important;
  border: 1px solid rgba(138,77,201,0.18) !important;
}
body[data-section="home"] [data-home-block="upcoming"]::after,
body[data-section="home"] #home-upcoming::after,
body[data-section="home"] .home-v4-upcoming::after {
  content: '\1F4C5';
  position: absolute;
  top: 10px; right: 14px;
  font-size: 36px;
  opacity: 0.55;
  pointer-events: none;
}

/* Announcements / Polls */
body[data-section="home"] .home-v4-ap-panel,
body[data-section="home"] #home-v4-ap-panel {
  background: linear-gradient(135deg, #FFF1E0 0%, #FBE0BD 100%) !important;
  border: 1px solid rgba(195,106,45,0.18) !important;
}
body[data-section="home"] .home-v4-ap-panel::after,
body[data-section="home"] #home-v4-ap-panel::after {
  content: '\1F4E3';
  position: absolute;
  top: 10px; right: 14px;
  font-size: 36px;
  opacity: 0.6;
  pointer-events: none;
}

/* Eyebrow pills inherit accent tint via card border-color */
body[data-section="home"] .home-v41-verse-card .home-v4-eyebrow,
body[data-section="home"] .home-v41-reveal-card .home-v4-eyebrow,
body[data-section="home"] .home-v4-block .home-v4-eyebrow,
body[data-section="home"] .home-v4-ap-panel .home-v4-eyebrow {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(4px);
}

/* ===== CARD-HERO V5.1 — Home + Money sub-tabs ===== */

/* 1. Remove the faint horizontal gold line under the currency in money hero */
#money-pane-overview .v3-money-hero::after {
  display: none !important;
}

/* 2. Home "Good morning" hero — premium WARM credit-card treatment
      (keep cognac gradient family.co warmth, add chip + caption + shimmer) */
body[data-section="home"] .home-v41-hero,
body[data-section="home"] .home-v4-hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px !important;
  box-shadow:
    0 24px 48px rgba(140,58,14,0.20),
    0 4px 14px rgba(140,58,14,0.10),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.10) !important;
}
/* Holographic shimmer overlay */
body[data-section="home"] .home-v41-hero::before,
body[data-section="home"] .home-v4-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.18) 50%, transparent 65%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 12px) !important;
  pointer-events: none !important;
  display: block !important;
  z-index: 0 !important;
}
body[data-section="home"] .home-v41-hero > *,
body[data-section="home"] .home-v4-hero > * {
  position: relative;
  z-index: 1;
}
/* EMV chip top-left */
body[data-section="home"] .home-v41-hero::after {
  content: '';
  position: absolute;
  top: 22px; left: 22px;
  width: 28px; height: 22px;
  border-radius: 4px;
  background: linear-gradient(135deg, #E8C455 0%, #B58900 60%, #8C6700 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.18);
  z-index: 2;
}
/* "AFAMILY · MEMBER" caption top-right */
body[data-section="home"] .home-v41-hero {
  padding-top: 60px !important;
}
body[data-section="home"] .home-v41-hero-eyebrow {
  position: relative;
  margin-top: 0 !important;
}
body[data-section="home"] .home-v41-hero-eyebrow::after {
  content: 'AFAMILY · MEMBER';
  position: absolute;
  top: -42px; right: 0;
  font: 600 10px/1 var(--font-ui, Inter);
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.62);
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* 3. Money sub-tab hero cards — each gets a credit-card hero matching its color */

/* Expenses pane: same dark navy treatment as Overview */
body[data-section="dashboard"] #money-pane-expenses .section-hero,
body[data-section="dashboard"] #section-expenses > .section-hero {
  background: linear-gradient(135deg, #0E1B2D 0%, #1D2E4A 45%, #2A3F62 100%) !important;
  color: #F4EBD8 !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 24px 24px 28px !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 24px 48px rgba(15,27,45,0.30),
    0 4px 14px rgba(15,27,45,0.18),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
body[data-section="dashboard"] #money-pane-expenses .section-hero *,
body[data-section="dashboard"] #section-expenses > .section-hero * { color: inherit !important; }

/* Subscriptions: emerald credit card */
body[data-section="dashboard"] #money-pane-subs .section-hero,
body[data-section="dashboard"] #money-pane-subs > h2:first-child,
body[data-section="dashboard"] #subscription-monthly-total {
  background: linear-gradient(135deg, #1A4A35 0%, #2F7A5F 50%, #3F8E72 100%) !important;
  color: #E8F5EC !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 24px 48px rgba(31,82,66,0.25),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* Caps: cognac credit card */
body[data-section="dashboard"] #money-pane-caps .section-hero,
body[data-section="dashboard"] #money-pane-caps > h2:first-child {
  background: linear-gradient(135deg, #6E2A0A 0%, #8C4818 45%, #C36A2D 100%) !important;
  color: #FFF1E0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  position: relative;
  overflow: hidden;
}

/* Debts: burgundy credit card */
body[data-section="dashboard"] #money-pane-debt .section-hero,
body[data-section="dashboard"] #money-pane-debt > h2:first-child,
body[data-section="dashboard"] #debt-total-remaining {
  background: linear-gradient(135deg, #4A1418 0%, #6E2329 45%, #8C3A40 100%) !important;
  color: #F8E8E9 !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  position: relative;
  overflow: hidden;
}

/* Savings: gold credit card (admin-only pane) */
body[data-section="dashboard"] #money-pane-savings .section-hero,
body[data-section="dashboard"] #money-pane-savings > h2:first-child,
body[data-section="dashboard"] #savings-total {
  background: linear-gradient(135deg, #6E5404 0%, #A07B0A 45%, #D4A437 100%) !important;
  color: #FFF7E0 !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  position: relative;
  overflow: hidden;
}

/* Add holographic shimmer + chip + caption to all Money sub-tab heroes */
body[data-section="dashboard"] #money-pane-subs .section-hero::before,
body[data-section="dashboard"] #money-pane-caps .section-hero::before,
body[data-section="dashboard"] #money-pane-debt .section-hero::before,
body[data-section="dashboard"] #money-pane-savings .section-hero::before,
body[data-section="dashboard"] #money-pane-expenses .section-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 12px);
  pointer-events: none;
}
body[data-section="dashboard"] #money-pane-subs .section-hero::after,
body[data-section="dashboard"] #money-pane-caps .section-hero::after,
body[data-section="dashboard"] #money-pane-debt .section-hero::after,
body[data-section="dashboard"] #money-pane-savings .section-hero::after,
body[data-section="dashboard"] #money-pane-expenses .section-hero::after {
  content: 'AFAMILY · MEMBER';
  position: absolute;
  top: 18px; right: 22px;
  font: 600 10px/1 var(--font-ui, Inter);
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  z-index: 2;
}

/* ===== DRAWER-PAGES-V5 =====
   Premium credit-card hero treatment for all drawer pages.
   Mirrors the Money Overview v3-money-hero gold-standard:
   saturated gradient, cream text, layered shadow + holographic shimmer,
   AFAMILY MEMBER caption. One block per section so styles never bleed. */

/* Shared base — applied per-section via the selector list below */
body[data-section="profile"]     #section-profile     > .section-hero,
body[data-section="todos"]       #section-todos       > .section-hero,
body[data-section="shopping"]    #section-shopping    > .section-hero,
body[data-section="needs"]       #section-shopping    > .section-hero,
body[data-section="goals"]       #section-goals       > .section-hero,
body[data-section="vacations"]   #section-vacations   > .section-hero,
body[data-section="datenights"]  #section-datenights  > .section-hero,
body[data-section="ideas"]       #section-ideas       > .section-hero,
body[data-section="activities"]  #section-activities  > .section-hero,
body[data-section="explore"]     #section-activities  > .section-hero {
  color: #F4EBD8 !important;
  border: 0 !important;
  border-radius: 22px !important;
  padding: 60px 24px 28px !important;
  margin: 12px 14px 18px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.20),
    0 4px 14px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.18) !important;
}

/* Force cream on every descendant of these heroes */
body[data-section="profile"]     #section-profile     > .section-hero *,
body[data-section="todos"]       #section-todos       > .section-hero *,
body[data-section="shopping"]    #section-shopping    > .section-hero *,
body[data-section="needs"]       #section-shopping    > .section-hero *,
body[data-section="goals"]       #section-goals       > .section-hero *,
body[data-section="vacations"]   #section-vacations   > .section-hero *,
body[data-section="datenights"]  #section-datenights  > .section-hero *,
body[data-section="ideas"]       #section-ideas       > .section-hero *,
body[data-section="activities"]  #section-activities  > .section-hero *,
body[data-section="explore"]     #section-activities  > .section-hero * {
  color: inherit !important;
}

/* Holographic shimmer + microfiber via ::before */
body[data-section="profile"]     #section-profile     > .section-hero::before,
body[data-section="todos"]       #section-todos       > .section-hero::before,
body[data-section="shopping"]    #section-shopping    > .section-hero::before,
body[data-section="needs"]       #section-shopping    > .section-hero::before,
body[data-section="goals"]       #section-goals       > .section-hero::before,
body[data-section="vacations"]   #section-vacations   > .section-hero::before,
body[data-section="datenights"]  #section-datenights  > .section-hero::before,
body[data-section="ideas"]       #section-ideas       > .section-hero::before,
body[data-section="activities"]  #section-activities  > .section-hero::before,
body[data-section="explore"]     #section-activities  > .section-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 12px);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* AFAMILY MEMBER caption via ::after */
body[data-section="profile"]     #section-profile     > .section-hero::after,
body[data-section="todos"]       #section-todos       > .section-hero::after,
body[data-section="shopping"]    #section-shopping    > .section-hero::after,
body[data-section="needs"]       #section-shopping    > .section-hero::after,
body[data-section="goals"]       #section-goals       > .section-hero::after,
body[data-section="vacations"]   #section-vacations   > .section-hero::after,
body[data-section="datenights"]  #section-datenights  > .section-hero::after,
body[data-section="ideas"]       #section-ideas       > .section-hero::after,
body[data-section="activities"]  #section-activities  > .section-hero::after,
body[data-section="explore"]     #section-activities  > .section-hero::after {
  content: 'AFAMILY · MEMBER';
  position: absolute;
  top: 18px; right: 22px;
  font: 600 10px/1 var(--font-ui, 'Inter', sans-serif);
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55) !important;
  pointer-events: none;
  z-index: 2;
}

/* Lift inner content above shimmer */
body[data-section="profile"]     #section-profile     > .section-hero > *,
body[data-section="todos"]       #section-todos       > .section-hero > *,
body[data-section="shopping"]    #section-shopping    > .section-hero > *,
body[data-section="needs"]       #section-shopping    > .section-hero > *,
body[data-section="goals"]       #section-goals       > .section-hero > *,
body[data-section="vacations"]   #section-vacations   > .section-hero > *,
body[data-section="datenights"]  #section-datenights  > .section-hero > *,
body[data-section="ideas"]       #section-ideas       > .section-hero > *,
body[data-section="activities"]  #section-activities  > .section-hero > *,
body[data-section="explore"]     #section-activities  > .section-hero > * {
  position: relative;
  z-index: 1;
}

/* Eyebrow becomes translucent white pill */
body[data-section="profile"]     #section-profile     > .section-hero .section-hero-eyebrow,
body[data-section="todos"]       #section-todos       > .section-hero .section-hero-eyebrow,
body[data-section="shopping"]    #section-shopping    > .section-hero .section-hero-eyebrow,
body[data-section="needs"]       #section-shopping    > .section-hero .section-hero-eyebrow,
body[data-section="goals"]       #section-goals       > .section-hero .section-hero-eyebrow,
body[data-section="vacations"]   #section-vacations   > .section-hero .section-hero-eyebrow,
body[data-section="datenights"]  #section-datenights  > .section-hero .section-hero-eyebrow,
body[data-section="ideas"]       #section-ideas       > .section-hero .section-hero-eyebrow,
body[data-section="activities"]  #section-activities  > .section-hero .section-hero-eyebrow,
body[data-section="explore"]     #section-activities  > .section-hero .section-hero-eyebrow {
  background: rgba(255,255,255,0.14) !important;
  color: #F4EBD8 !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  margin-bottom: 12px !important;
}

/* Title — Fraunces serif, large, cream */
body[data-section="profile"]     #section-profile     > .section-hero .section-hero-title,
body[data-section="todos"]       #section-todos       > .section-hero .section-hero-title,
body[data-section="shopping"]    #section-shopping    > .section-hero .section-hero-title,
body[data-section="needs"]       #section-shopping    > .section-hero .section-hero-title,
body[data-section="goals"]       #section-goals       > .section-hero .section-hero-title,
body[data-section="vacations"]   #section-vacations   > .section-hero .section-hero-title,
body[data-section="datenights"]  #section-datenights  > .section-hero .section-hero-title,
body[data-section="ideas"]       #section-ideas       > .section-hero .section-hero-title,
body[data-section="activities"]  #section-activities  > .section-hero .section-hero-title,
body[data-section="explore"]     #section-activities  > .section-hero .section-hero-title {
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-weight: 500 !important;
  font-size: clamp(30px, 6vw, 44px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: #F4EBD8 !important;
  margin: 0 0 10px !important;
}

/* Sub copy — cream at 75% */
body[data-section="profile"]     #section-profile     > .section-hero .section-hero-sub,
body[data-section="todos"]       #section-todos       > .section-hero .section-hero-sub,
body[data-section="shopping"]    #section-shopping    > .section-hero .section-hero-sub,
body[data-section="needs"]       #section-shopping    > .section-hero .section-hero-sub,
body[data-section="goals"]       #section-goals       > .section-hero .section-hero-sub,
body[data-section="vacations"]   #section-vacations   > .section-hero .section-hero-sub,
body[data-section="datenights"]  #section-datenights  > .section-hero .section-hero-sub,
body[data-section="ideas"]       #section-ideas       > .section-hero .section-hero-sub,
body[data-section="activities"]  #section-activities  > .section-hero .section-hero-sub,
body[data-section="explore"]     #section-activities  > .section-hero .section-hero-sub {
  color: rgba(244,235,216,0.78) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  max-width: 56ch !important;
}

/* ----- Per-section gradients ----- */
/* Profile — navy */
body[data-section="profile"] #section-profile > .section-hero {
  background: linear-gradient(135deg, #0E1B2D 0%, #1B2C4A 45%, #2A3F62 100%) !important;
}
/* To-Dos — emerald */
body[data-section="todos"] #section-todos > .section-hero {
  background: linear-gradient(135deg, #1A4A35 0%, #2C6A52 45%, #3F8E72 100%) !important;
}
/* Shopping (Needs) — peach/coral */
body[data-section="shopping"] #section-shopping > .section-hero,
body[data-section="needs"]    #section-shopping > .section-hero {
  background: linear-gradient(135deg, #6E2A0A 0%, #97481A 45%, #C36A2D 100%) !important;
}
/* Goals — navy */
body[data-section="goals"] #section-goals > .section-hero {
  background: linear-gradient(135deg, #0E1B2D 0%, #1B2C4A 45%, #2A3F62 100%) !important;
}
/* Vacations — burgundy */
body[data-section="vacations"] #section-vacations > .section-hero {
  background: linear-gradient(135deg, #4A1418 0%, #6A262C 45%, #8C3A40 100%) !important;
}
/* Date Nights — burgundy */
body[data-section="datenights"] #section-datenights > .section-hero {
  background: linear-gradient(135deg, #4A1418 0%, #6A262C 45%, #8C3A40 100%) !important;
}
/* Ideas — cognac */
body[data-section="ideas"] #section-ideas > .section-hero {
  background: linear-gradient(135deg, #6E2A0A 0%, #97481A 45%, #C36A2D 100%) !important;
}
/* Family Explore (Activities) — emerald */
body[data-section="activities"] #section-activities > .section-hero,
body[data-section="explore"]    #section-activities > .section-hero {
  background: linear-gradient(135deg, #1A4A35 0%, #2C6A52 45%, #3F8E72 100%) !important;
}

/* ----- Decorative corner accent emoji ----- */
body[data-section="profile"]     #section-profile     > .section-hero .section-hero-inner::before,
body[data-section="todos"]       #section-todos       > .section-hero .section-hero-inner::before,
body[data-section="shopping"]    #section-shopping    > .section-hero .section-hero-inner::before,
body[data-section="needs"]       #section-shopping    > .section-hero .section-hero-inner::before,
body[data-section="goals"]       #section-goals       > .section-hero .section-hero-inner::before,
body[data-section="vacations"]   #section-vacations   > .section-hero .section-hero-inner::before,
body[data-section="datenights"]  #section-datenights  > .section-hero .section-hero-inner::before,
body[data-section="ideas"]       #section-ideas       > .section-hero .section-hero-inner::before,
body[data-section="activities"]  #section-activities  > .section-hero .section-hero-inner::before,
body[data-section="explore"]     #section-activities  > .section-hero .section-hero-inner::before {
  position: absolute;
  right: 12px;
  bottom: -8px;
  font-size: 78px;
  line-height: 1;
  opacity: 0.18;
  pointer-events: none;
  filter: saturate(0.6);
  z-index: 0;
}
body[data-section="profile"]    #section-profile    > .section-hero .section-hero-inner::before { content: '👤'; }
body[data-section="todos"]      #section-todos      > .section-hero .section-hero-inner::before { content: '✅'; }
body[data-section="shopping"]   #section-shopping   > .section-hero .section-hero-inner::before,
body[data-section="needs"]      #section-shopping   > .section-hero .section-hero-inner::before { content: '🛒'; }
body[data-section="goals"]      #section-goals      > .section-hero .section-hero-inner::before { content: '🎯'; }
body[data-section="vacations"]  #section-vacations  > .section-hero .section-hero-inner::before { content: '✈️'; }
body[data-section="datenights"] #section-datenights > .section-hero .section-hero-inner::before { content: '💝'; }
body[data-section="ideas"]      #section-ideas      > .section-hero .section-hero-inner::before { content: '💡'; }
body[data-section="activities"] #section-activities > .section-hero .section-hero-inner::before,
body[data-section="explore"]    #section-activities > .section-hero .section-hero-inner::before { content: '🧭'; }

body[data-section="profile"]    #section-profile    > .section-hero .section-hero-inner,
body[data-section="todos"]      #section-todos      > .section-hero .section-hero-inner,
body[data-section="shopping"]   #section-shopping   > .section-hero .section-hero-inner,
body[data-section="needs"]      #section-shopping   > .section-hero .section-hero-inner,
body[data-section="goals"]      #section-goals      > .section-hero .section-hero-inner,
body[data-section="vacations"]  #section-vacations  > .section-hero .section-hero-inner,
body[data-section="datenights"] #section-datenights > .section-hero .section-hero-inner,
body[data-section="ideas"]      #section-ideas      > .section-hero .section-hero-inner,
body[data-section="activities"] #section-activities > .section-hero .section-hero-inner,
body[data-section="explore"]    #section-activities > .section-hero .section-hero-inner {
  position: relative;
}

/* ----- Admin Hub: restyle .ahv3-hero to match credit-card pattern ----- */
body[data-section="adminhub"] #section-adminhub .ahv3-hero {
  background: linear-gradient(135deg, #0B1426 0%, #1A2845 45%, #2C3F66 100%) !important;
  color: #F4EBD8 !important;
  border-radius: 22px !important;
  padding: 60px 24px 28px !important;
  margin: 12px 14px 18px !important;
  max-width: none !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.22),
    0 4px 14px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.18) !important;
}
body[data-section="adminhub"] #section-adminhub .ahv3-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 12px);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
body[data-section="adminhub"] #section-adminhub .ahv3-hero::after {
  content: 'AFAMILY · MEMBER';
  position: absolute;
  top: 18px; right: 22px;
  font: 600 10px/1 var(--font-ui, 'Inter', sans-serif);
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  z-index: 2;
}
body[data-section="adminhub"] #section-adminhub .ahv3-hero-inner {
  position: relative;
  z-index: 1;
}
body[data-section="adminhub"] #section-adminhub .ahv3-hero-inner::before {
  content: '🛡';
  position: absolute;
  right: 4px;
  bottom: -16px;
  font-size: 78px;
  line-height: 1;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
body[data-section="adminhub"] #section-adminhub .ahv3-hero-title {
  color: #F4EBD8 !important;
  font-family: var(--font-display, 'Fraunces', serif) !important;
  font-weight: 500 !important;
  font-size: clamp(30px, 6vw, 44px) !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 10px !important;
  position: relative;
  z-index: 1;
}
body[data-section="adminhub"] #section-adminhub .ahv3-hero-sub {
  color: rgba(244,235,216,0.78) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}
body[data-section="adminhub"] #section-adminhub .ahv3-hero-accent {
  background: rgba(255,255,255,0.55) !important;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}

/* Mobile tightening */
@media (max-width: 480px) {
  body[data-section="profile"]     #section-profile     > .section-hero,
  body[data-section="todos"]       #section-todos       > .section-hero,
  body[data-section="shopping"]    #section-shopping    > .section-hero,
  body[data-section="needs"]       #section-shopping    > .section-hero,
  body[data-section="goals"]       #section-goals       > .section-hero,
  body[data-section="vacations"]   #section-vacations   > .section-hero,
  body[data-section="datenights"]  #section-datenights  > .section-hero,
  body[data-section="ideas"]       #section-ideas       > .section-hero,
  body[data-section="activities"]  #section-activities  > .section-hero,
  body[data-section="explore"]     #section-activities  > .section-hero,
  body[data-section="adminhub"]    #section-adminhub .ahv3-hero {
    padding: 54px 18px 22px !important;
    margin: 10px 10px 14px !important;
    border-radius: 20px !important;
  }
}
/* ===== /DRAWER-PAGES-V5 ===== */


/* ===== PLANS SUB-NAV REFRESH — Money-style clean pills ===== */
/* The legacy .plans-header gradient + colorful pill nav clashes with the new
   credit-card heroes. Restyle to match the Money sub-pill pattern. */

.plans-sub .plans-header {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 16px 0 20px !important;
  box-shadow: none !important;
  position: static !important;
}
.plans-sub .plans-header::before,
.plans-sub .plans-header::after { display: none !important; }
.plans-sub .plans-header .section-title {
  display: none !important;
}

/* Tab strip — horizontal scroll row of pills, ink-black active */
.plans-sub .plans-header .plans-tabs {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  background: transparent !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hairline, rgba(20,20,20,0.08)) !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.plans-sub .plans-header .plans-tabs::-webkit-scrollbar { display: none !important; }

.plans-sub .plans-header .plans-tab {
  background: transparent !important;
  color: var(--ink-muted, #6B6B66) !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font: 500 13px/1 var(--font-ui, Inter), sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-height: 40px !important;
  flex-shrink: 0 !important;
  transition: all 150ms ease !important;
  box-shadow: none !important;
  position: relative !important;
}
.plans-sub .plans-header .plans-tab:hover {
  background: var(--card-tinted, rgba(20,20,20,0.05)) !important;
  color: var(--ink, #1A1A18) !important;
  transform: none !important;
}
.plans-sub .plans-header .plans-tab.active {
  background: var(--ink, #1A1A18) !important;
  color: #FFF !important;
  box-shadow: none !important;
}
.plans-sub .plans-header .plans-tab.active::after {
  display: none !important;
}

/* Add Goal/Idea/Date/etc primary buttons inside plans-sub — match cognac primary */
.plans-sub .section-header .btn-primary,
.plans-sub .plans-section-toolbar .btn-primary {
  background: linear-gradient(135deg, #E97444 0%, #C36A2D 60%, #8C4818 100%) !important;
  color: #FFF !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font-weight: 500 !important;
  box-shadow: 0 4px 14px rgba(195,106,45,0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* Section-header inside plans-sub: clean caption + button row, no card chrome */
.plans-sub .section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 12px 0 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.plans-sub .section-header h2 {
  font: 600 18px/1.2 var(--font-display, Fraunces), Georgia, serif !important;
  letter-spacing: -0.01em !important;
  color: var(--ink, #1A1A18) !important;
  margin: 0 !important;
}

/* Mobile — nudge tab row to be tappable & padded inside viewport */
@media (max-width: 480px) {
  .plans-sub .plans-header .plans-tabs {
    gap: 4px !important;
    padding: 4px 2px !important;
  }
  .plans-sub .plans-header .plans-tab {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }
}

/* ===== PLANS-THEMATIC-V2 ===== */
/* Thematic hero replacements for the 5 Plans sub-sections.
   JS (renderPlansThematicHeros) injects bespoke markup; we just style it. */

/* Outer shell — same shape for all. High specificity to override earlier
   body[data-section="..."] #section-... > .section-hero rules. */
body #section-vacations  > .section-hero[data-thematic],
body #section-activities > .section-hero[data-thematic],
body #section-ideas      > .section-hero[data-thematic],
body #section-goals      > .section-hero[data-thematic],
body #section-datenights > .section-hero[data-thematic] {
  border: 0 !important;
  border-radius: 22px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.18), 0 4px 14px rgba(0,0,0,0.10) !important;
  position: relative !important;
  margin-bottom: 16px !important;
}
/* Neutralize the earlier ::before / ::after decorations on these heroes */
body #section-vacations  > .section-hero[data-thematic]::before,
body #section-activities > .section-hero[data-thematic]::before,
body #section-ideas      > .section-hero[data-thematic]::before,
body #section-goals      > .section-hero[data-thematic]::before,
body #section-datenights > .section-hero[data-thematic]::before,
body #section-vacations  > .section-hero[data-thematic]::after,
body #section-activities > .section-hero[data-thematic]::after,
body #section-ideas      > .section-hero[data-thematic]::after,
body #section-goals      > .section-hero[data-thematic]::after,
body #section-datenights > .section-hero[data-thematic]::after {
  content: none !important;
  display: none !important;
}
.thematic-hero { position: relative; padding: 24px; }

/* === BOARDING PASS (Vacations) === */
body #section-vacations > .section-hero[data-thematic="boardingpass"] {
  background: #F8F0E1 !important;
  background-image:
    linear-gradient(135deg, #F8F0E1 0%, #F1E4CC 100%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 2px, transparent 2px 14px) !important;
  background-blend-mode: overlay;
  color: #0E2549 !important;
}
.th-boardingpass {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  padding: 0;
}
.th-bp-main { padding: 24px 26px; }
.th-bp-airline { font: 700 11px/1 'Inter', sans-serif; letter-spacing: 0.18em; color: #0E2549; }
.th-bp-label { font: 600 10px/1 'Inter', sans-serif; letter-spacing: 0.14em; color: rgba(14,37,73,0.55); margin-top: 4px; }
.th-bp-title { font: 500 clamp(28px, 6vw, 38px)/1.05 'Fraunces', serif; color: #0E2549; margin: 14px 0 16px; letter-spacing: -0.02em; }
.th-bp-meta { display: flex; align-items: center; gap: 10px; font: 600 13px/1.2 'Inter', sans-serif; }
.th-bp-meta b { color: rgba(14,37,73,0.55); font-weight: 600; letter-spacing: 0.08em; font-size: 10px; display: block; }
.th-bp-arrow { color: #C36A2D; font-size: 18px; }
.th-bp-row { display: flex; gap: 20px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(14,37,73,0.25); }
.th-bp-row > div { display: flex; flex-direction: column; gap: 2px; }
.th-bp-k { font: 600 9px/1 'Inter', sans-serif; letter-spacing: 0.14em; color: rgba(14,37,73,0.55); }
.th-bp-v { font: 600 13px/1 'Fraunces', serif; color: #0E2549; }
.th-bp-stub {
  border-left: 2px dashed rgba(14,37,73,0.30);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 100px;
  max-width: 130px;
  background: rgba(14,37,73,0.04);
}
.th-bp-stub-label { font: 600 9px/1 'Inter', sans-serif; letter-spacing: 0.14em; color: rgba(14,37,73,0.55); writing-mode: horizontal-tb; }
.th-bp-stub-dest { font: 500 22px/1 'Fraunces', serif; color: #0E2549; letter-spacing: -0.02em; }
.th-bp-barcode {
  width: 100%;
  height: 28px;
  background: repeating-linear-gradient(90deg, #0E2549 0 2px, transparent 2px 4px, #0E2549 4px 7px, transparent 7px 11px);
  margin-top: 4px;
}
@media (max-width: 540px) {
  .th-boardingpass { grid-template-columns: 1fr; }
  .th-bp-stub { border-left: 0; border-top: 2px dashed rgba(14,37,73,0.30); flex-direction: row; padding: 14px 18px; max-width: none; }
  .th-bp-barcode { width: auto; flex: 1; }
}
body #section-vacations > .section-hero[data-thematic="boardingpass"] .th-boardingpass::before {
  content: '\2708\FE0F' !important;
  display: block !important;
  position: absolute;
  top: 16px; right: 24px;
  font-size: 56px;
  opacity: 0.45;
  transform: rotate(-15deg);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.10));
}

/* === PARK PASS (Activities / Family Explore) === */
body #section-activities > .section-hero[data-thematic="parkpass"] {
  background: linear-gradient(135deg, #3F5A3A 0%, #2A4028 100%) !important;
  color: #F4E9CE !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(244,233,206,0.04) 0 1px, transparent 1px 8px),
    linear-gradient(135deg, #3F5A3A 0%, #2A4028 100%) !important;
}
.th-parkpass {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  padding: 24px;
}
.th-pp-stamp {
  width: 84px; height: 84px;
  border: 3px solid #F4E9CE;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1.1 'Inter', sans-serif;
  letter-spacing: 0.10em;
  text-align: center;
  color: #F4E9CE;
  transform: rotate(-6deg);
  flex-shrink: 0;
  position: relative;
}
.th-pp-stamp::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(244,233,206,0.45);
  border-radius: 999px;
}
.th-pp-content { color: inherit; }
.th-pp-eyebrow { font: 700 11px/1 'Inter', sans-serif; letter-spacing: 0.16em; color: rgba(244,233,206,0.7); margin-bottom: 8px; }
.th-pp-title { font: 500 clamp(26px, 5.5vw, 36px)/1.05 'Fraunces', serif; margin: 0 0 6px; letter-spacing: -0.01em; color: inherit; }
.th-pp-sub { font: 400 14px/1.4 'Inter', sans-serif; opacity: 0.78; margin: 0 0 10px; }
.th-pp-perks { font: 600 10px/1 'Inter', sans-serif; letter-spacing: 0.10em; color: rgba(244,233,206,0.55); }
.th-pp-mountain {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  background: linear-gradient(180deg, transparent 50%, rgba(244,233,206,0.06) 50%);
  clip-path: polygon(0% 100%, 12% 50%, 22% 75%, 35% 30%, 48% 70%, 60% 25%, 72% 60%, 85% 40%, 100% 80%, 100% 100%);
  pointer-events: none;
}
@media (max-width: 540px) {
  .th-parkpass { grid-template-columns: 64px 1fr; }
  .th-pp-stamp { width: 60px; height: 60px; font-size: 9px; border-width: 2px; }
}

/* === SPARK / IDEAS === */
body #section-ideas > .section-hero[data-thematic="spark"] {
  background: linear-gradient(135deg, #F4D061 0%, #F2A467 100%) !important;
  color: #2A1A08 !important;
  transform: rotate(-0.5deg);
}
.th-spark { padding: 26px 28px; position: relative; }
.th-spark-bulb {
  position: absolute;
  top: 18px; right: 22px;
  font-size: 64px;
  filter: drop-shadow(0 0 20px rgba(255,224,80,0.6)) drop-shadow(0 4px 8px rgba(0,0,0,0.12));
  transform: rotate(-12deg);
  z-index: 2;
}
.th-spark-eyebrow {
  background: rgba(255,255,255,0.45);
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  color: #6E2A0A;
  margin-bottom: 14px;
}
.th-spark-title { font: 500 clamp(28px, 6vw, 38px)/1.05 'Fraunces', serif; margin: 0 0 8px; letter-spacing: -0.02em; color: inherit; }
.th-spark-sub { font: 400 15px/1.4 'Inter', sans-serif; color: rgba(42,26,8,0.72); }
.th-spark-stars { position: absolute; inset: 0; pointer-events: none; }
.th-spark-star { position: absolute; opacity: 0.55; }
.th-spark-star-1 { top: 22px; left: 50%; font-size: 14px; transform: rotate(15deg); }
.th-spark-star-2 { top: 60%; left: 40%; font-size: 18px; transform: rotate(-20deg); }
.th-spark-star-3 { bottom: 18px; right: 40%; font-size: 12px; }
.th-spark-star-4 { top: 40%; left: 70%; font-size: 16px; transform: rotate(8deg); opacity: 0.4; }

/* === BULLSEYE / GOALS === */
body #section-goals > .section-hero[data-thematic="bullseye"] {
  background: linear-gradient(135deg, #0E1B2D 0%, #1A3A6B 100%) !important;
  color: #F4EBD8 !important;
}
.th-bullseye {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 16px;
  align-items: center;
  padding: 26px;
}
.th-be-target {
  position: relative;
  width: 110px; height: 110px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}
.th-be-ring {
  position: absolute;
  border-radius: 999px;
  border: 2px solid rgba(244,235,216,0.30);
}
.th-be-r1 { width: 110px; height: 110px; }
.th-be-r2 { width: 78px; height: 78px; border-color: rgba(244,235,216,0.45); }
.th-be-r3 { width: 46px; height: 46px; border-color: rgba(244,235,216,0.65); }
.th-be-bull { font-size: 32px; position: relative; z-index: 2; }
.th-be-content { color: inherit; }
.th-be-eyebrow { background: rgba(255,255,255,0.12); display: inline-block; padding: 5px 14px; border-radius: 999px; font: 700 11px/1 'Inter', sans-serif; letter-spacing: 0.14em; margin-bottom: 12px; color: inherit; }
.th-be-title { font: 500 clamp(28px, 6vw, 40px)/1.05 'Fraunces', serif; margin: 0 0 8px; letter-spacing: -0.02em; color: inherit; }
.th-be-sub { font: 400 15px/1.4 'Inter', sans-serif; opacity: 0.78; margin-bottom: 12px; }
.th-be-arrows { font: 600 16px/1 'Inter', sans-serif; letter-spacing: 0.4em; color: rgba(244,235,216,0.55); }
@media (max-width: 540px) {
  .th-bullseye { grid-template-columns: 1fr 80px; }
  .th-be-target { width: 76px; height: 76px; }
  .th-be-r1 { width: 76px; height: 76px; }
  .th-be-r2 { width: 54px; height: 54px; }
  .th-be-r3 { width: 32px; height: 32px; }
  .th-be-bull { font-size: 22px; }
}

/* === THEATRE / DATE NIGHTS === */
body #section-datenights > .section-hero[data-thematic="theatre"] {
  background: linear-gradient(135deg, #4A1418 0%, #7E2730 100%) !important;
  color: #F4E9CE !important;
  background-image:
    repeating-linear-gradient(90deg, rgba(244,233,206,0.03) 0 1px, transparent 1px 8px),
    linear-gradient(135deg, #4A1418 0%, #7E2730 100%) !important;
}
.th-theatre { padding: 22px 24px 24px; position: relative; }
.th-tr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.th-tr-eyebrow { font: 700 11px/1 'Inter', sans-serif; letter-spacing: 0.14em; color: rgba(244,233,206,0.7); }
.th-tr-admit {
  background: rgba(244,233,206,0.18);
  padding: 4px 12px;
  border-radius: 4px;
  font: 700 10px/1 'Inter', sans-serif;
  letter-spacing: 0.10em;
  color: #F4E9CE;
}
.th-tr-title { font: 500 clamp(28px, 6vw, 40px)/1.05 'Fraunces', serif; margin: 14px 0 6px; letter-spacing: -0.02em; color: inherit; }
.th-tr-sub { font: 400 15px/1.4 'Inter', sans-serif; opacity: 0.78; margin: 0 0 14px; }
.th-tr-perforation {
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(244,233,206,0.40) 0 4px, transparent 4px 8px);
  margin: 14px 0;
}
.th-tr-stub, .th-tr-no { font: 600 11px/1 'Inter', sans-serif; letter-spacing: 0.10em; color: rgba(244,233,206,0.55); }
.th-tr-icon { position: absolute; top: 18px; right: 24px; font-size: 56px; opacity: 0.55; transform: rotate(-8deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18)); pointer-events: none; }

/* ===== PLANS-ITEM-CARDS ===== */
.plan-card--vacation {
  background: #F8F0E1;
  background-image:
    linear-gradient(135deg, #F8F0E1 0%, #F1E4CC 100%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 12px);
  border-radius: 14px;
  padding: 16px 18px 14px;
  border: 1px solid rgba(14,37,73,0.08);
  position: relative;
  color: #0E2549;
}
.plan-card--vacation::before {
  content: '\2708\FE0F';
  position: absolute; top: 8px; right: 12px;
  font-size: 22px; opacity: 0.5; transform: rotate(-15deg);
  pointer-events: none;
}
.plan-card--vacation .pcv-title { font: 500 18px/1.2 'Fraunces', serif; letter-spacing: -0.01em; color: inherit; }
.plan-card--vacation .pcv-sub { font: 600 10px/1 'Inter', sans-serif; letter-spacing: 0.14em; color: rgba(14,37,73,0.6); margin-top: 6px; }
.plan-card--vacation .pcv-stub { font: 600 10px/1 'Inter', sans-serif; letter-spacing: 0.10em; color: rgba(14,37,73,0.5); margin-top: 10px; }
.plan-card--vacation .pcv-barcode {
  height: 14px; margin-top: 6px; width: 100%;
  background: repeating-linear-gradient(90deg, #0E2549 0 2px, transparent 2px 4px, #0E2549 4px 7px, transparent 7px 11px);
  opacity: 0.5;
}
.plan-card--vacation .card-item-meta { color: rgba(14,37,73,0.7); }

.plan-card--idea {
  background: linear-gradient(135deg, #FFF1B4 0%, #F5DC75 100%);
  border-radius: 12px;
  padding: 14px 18px 16px;
  position: relative;
  color: #2A1A08;
  box-shadow: 0 4px 12px rgba(140,108,8,0.18);
  transform: rotate(-0.6deg);
  border: none;
}
.plan-card--idea:nth-child(2n) { transform: rotate(0.5deg); }
.plan-card--idea:nth-child(3n) { transform: rotate(-0.3deg); }
.plan-card--idea::after {
  content: '\1F4A1';
  position: absolute; top: 8px; right: 12px;
  font-size: 18px; opacity: 0.55; pointer-events: none;
}
.plan-card--idea .pci-title { font: 500 17px/1.25 'Fraunces', serif; color: inherit; }
.plan-card--idea .pci-sub { font: 400 13px/1.4 'Inter', sans-serif; opacity: 0.78; margin-top: 4px; color: inherit; }

.plan-card--goal {
  background: linear-gradient(135deg, #0E1B2D 0%, #1A3A6B 100%);
  color: #F4EBD8;
  border-radius: 14px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  border: none;
}
.plan-card--goal::before {
  content: '';
  position: absolute; top: 8px; right: 12px;
  width: 44px; height: 44px;
  background:
    repeating-radial-gradient(circle at center, transparent 0 6px, rgba(244,235,216,0.20) 6px 7px);
  border-radius: 50%;
  opacity: 0.7;
  pointer-events: none;
}
.plan-card--goal::after {
  content: '\1F3AF';
  position: absolute; top: 18px; right: 22px;
  font-size: 18px; pointer-events: none;
}
.plan-card--goal .pcg-title { font: 500 18px/1.2 'Fraunces', serif; color: inherit; }
.plan-card--goal .pcg-sub { font: 400 13px/1.4 'Inter', sans-serif; opacity: 0.78; margin-top: 4px; color: inherit; }
.plan-card--goal .pcg-bar {
  height: 6px; background: rgba(244,235,216,0.18);
  border-radius: 999px; margin-top: 12px; overflow: hidden;
}
.plan-card--goal .pcg-bar-fill { height: 100%; background: linear-gradient(90deg, #C36A2D, #E97444); border-radius: 999px; }
.plan-card--goal .goal-cat-badge { background: rgba(244,235,216,0.14) !important; color: #F4EBD8 !important; }

.plan-card--datenight {
  background: linear-gradient(135deg, #4A1418 0%, #7E2730 100%);
  color: #F4E9CE;
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  border: none;
}
.plan-card--datenight::after {
  content: '\1F377';
  position: absolute; top: 12px; right: 12px;
  font-size: 18px; opacity: 0.6; transform: rotate(-8deg); pointer-events: none;
}
.plan-card--datenight .pcd-admit {
  display: inline-block;
  background: rgba(244,233,206,0.18);
  padding: 3px 10px; border-radius: 4px;
  font: 700 9px/1 'Inter', sans-serif; letter-spacing: 0.12em;
  color: #F4E9CE;
  margin-bottom: 8px;
}
.plan-card--datenight .pcd-title { font: 500 17px/1.2 'Fraunces', serif; color: inherit; }
.plan-card--datenight .pcd-perf {
  height: 1px; margin: 10px 0;
  background: repeating-linear-gradient(90deg, rgba(244,233,206,0.40) 0 4px, transparent 4px 8px);
}
.plan-card--datenight .pcd-stub { font: 600 10px/1.3 'Inter', sans-serif; letter-spacing: 0.06em; color: rgba(244,233,206,0.7); }
.plan-card--datenight .pcd-stub .stars { color: #F4E9CE; letter-spacing: 0; }

.plan-card--activity {
  background: linear-gradient(135deg, #3F5A3A 0%, #2A4028 100%);
  color: #F4E9CE;
  border-radius: 12px;
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
  border: none;
}
.plan-card--activity::before {
  content: 'AFAMILY';
  position: absolute; top: 12px; right: 14px;
  width: 40px; height: 40px;
  border: 2px solid rgba(244,233,206,0.55);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 700 8px/1 'Inter', sans-serif;
  color: rgba(244,233,206,0.7);
  transform: rotate(-8deg);
  pointer-events: none;
}
.plan-card--activity .pca-title { font: 500 17px/1.2 'Fraunces', serif; color: inherit; padding-right: 50px; }
.plan-card--activity .pca-sub { font: 400 13px/1.4 'Inter', sans-serif; opacity: 0.78; margin-top: 4px; padding-right: 50px; color: inherit; }

/* Action button overrides for dark themed cards */
.plan-card--goal .btn-icon,
.plan-card--datenight .btn-icon,
.plan-card--activity .btn-icon { color: rgba(244,233,206,0.85); }
.plan-card--goal .btn-icon:hover,
.plan-card--datenight .btn-icon:hover,
.plan-card--activity .btn-icon:hover { background: rgba(244,233,206,0.14); }

@media (max-width: 640px) {
  .plan-card--vacation, .plan-card--idea, .plan-card--goal,
  .plan-card--datenight, .plan-card--activity { width: 100%; }
}

/* ===== PLANS-ITEM-CARDS — specificity overrides for .plans-sub .card-list .card-item:nth-child(...) !important rules ===== */
.plans-sub .card-list .card-item.plan-card--vacation,
.plans-sub .card-list .card-item.plan-card--vacation:nth-child(4n+1),
.plans-sub .card-list .card-item.plan-card--vacation:nth-child(4n+2),
.plans-sub .card-list .card-item.plan-card--vacation:nth-child(4n+3),
.plans-sub .card-list .card-item.plan-card--vacation:nth-child(4n+4) {
  background:
    linear-gradient(135deg, #F8F0E1 0%, #F1E4CC 100%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 12px) !important;
  color: #0E2549 !important;
  border: 1px solid rgba(14,37,73,0.08) !important;
}
.plans-sub .card-list .card-item.plan-card--vacation .card-item-title,
.plans-sub .card-list .card-item.plan-card--vacation .pcv-title { color: #0E2549 !important; }
.plans-sub .card-list .card-item.plan-card--vacation .card-item-meta,
.plans-sub .card-list .card-item.plan-card--vacation .card-item-meta span,
.plans-sub .card-list .card-item.plan-card--vacation .pcv-sub,
.plans-sub .card-list .card-item.plan-card--vacation .pcv-stub { color: rgba(14,37,73,0.7) !important; }
.plans-sub .card-list .card-item.plan-card--vacation .btn-icon {
  color: rgba(14,37,73,0.85) !important;
  background: rgba(14,37,73,0.08) !important;
  border: 1px solid rgba(14,37,73,0.15) !important;
}

.plans-sub .card-list .card-item.plan-card--idea,
.plans-sub .card-list .card-item.plan-card--idea:nth-child(4n+1),
.plans-sub .card-list .card-item.plan-card--idea:nth-child(4n+2),
.plans-sub .card-list .card-item.plan-card--idea:nth-child(4n+3),
.plans-sub .card-list .card-item.plan-card--idea:nth-child(4n+4) {
  background: linear-gradient(135deg, #FFF1B4 0%, #F5DC75 100%) !important;
  color: #2A1A08 !important;
  border: none !important;
}
.plans-sub .card-list .card-item.plan-card--idea .card-item-title,
.plans-sub .card-list .card-item.plan-card--idea .pci-title { color: #2A1A08 !important; }
.plans-sub .card-list .card-item.plan-card--idea .card-item-meta,
.plans-sub .card-list .card-item.plan-card--idea .card-item-meta span,
.plans-sub .card-list .card-item.plan-card--idea .pci-sub { color: rgba(42,26,8,0.75) !important; }
.plans-sub .card-list .card-item.plan-card--idea .btn-icon {
  color: rgba(42,26,8,0.85) !important;
  background: rgba(42,26,8,0.08) !important;
  border: 1px solid rgba(42,26,8,0.15) !important;
}

#goals-list .card-item.goal-card.plan-card--goal,
#section-goals #goals-list .goal-card.plan-card--goal:nth-child(4n+1),
#section-goals #goals-list .goal-card.plan-card--goal:nth-child(4n+2),
#section-goals #goals-list .goal-card.plan-card--goal:nth-child(4n+3),
#section-goals #goals-list .goal-card.plan-card--goal:nth-child(4n+4),
.plans-sub .card-list .card-item.plan-card--goal,
.plans-sub .card-list .card-item.plan-card--goal:nth-child(4n+1),
.plans-sub .card-list .card-item.plan-card--goal:nth-child(4n+2),
.plans-sub .card-list .card-item.plan-card--goal:nth-child(4n+3),
.plans-sub .card-list .card-item.plan-card--goal:nth-child(4n+4) {
  background: linear-gradient(135deg, #0E1B2D 0%, #1A3A6B 100%) !important;
  color: #F4EBD8 !important;
  border: none !important;
  overflow: hidden !important;
}

.plans-sub .card-list .card-item.plan-card--datenight,
.plans-sub .card-list .card-item.plan-card--datenight:nth-child(4n+1),
.plans-sub .card-list .card-item.plan-card--datenight:nth-child(4n+2),
.plans-sub .card-list .card-item.plan-card--datenight:nth-child(4n+3),
.plans-sub .card-list .card-item.plan-card--datenight:nth-child(4n+4) {
  background: linear-gradient(135deg, #4A1418 0%, #7E2730 100%) !important;
  color: #F4E9CE !important;
  border: none !important;
  overflow: hidden !important;
}

.plans-sub .card-list .card-item.plan-card--activity,
.plans-sub .card-list .card-item.plan-card--activity:nth-child(4n+1),
.plans-sub .card-list .card-item.plan-card--activity:nth-child(4n+2),
.plans-sub .card-list .card-item.plan-card--activity:nth-child(4n+3),
.plans-sub .card-list .card-item.plan-card--activity:nth-child(4n+4) {
  background: linear-gradient(135deg, #3F5A3A 0%, #2A4028 100%) !important;
  color: #F4E9CE !important;
  border: none !important;
  overflow: hidden !important;
}

/* ===== PLANS-ITEM-CARDS — ID-scoped overrides (defeats #vacation-list .card-item:nth-child rules in style-shopping-plans.css) ===== */
#vacation-list .card-item.plan-card--vacation,
#vacation-list .card-item.plan-card--vacation:nth-child(4n+1),
#vacation-list .card-item.plan-card--vacation:nth-child(4n+2),
#vacation-list .card-item.plan-card--vacation:nth-child(4n+3),
#vacation-list .card-item.plan-card--vacation:nth-child(4n+4) {
  background: linear-gradient(135deg, #F8F0E1 0%, #F1E4CC 100%) !important;
  color: #0E2549 !important;
  border: 1px solid rgba(14,37,73,0.08) !important;
}
#vacation-list .card-item.plan-card--vacation .card-item-title,
#vacation-list .card-item.plan-card--vacation .pcv-title { color: #0E2549 !important; }
#vacation-list .card-item.plan-card--vacation .card-item-meta,
#vacation-list .card-item.plan-card--vacation .card-item-meta span,
#vacation-list .card-item.plan-card--vacation .pcv-sub,
#vacation-list .card-item.plan-card--vacation .pcv-stub { color: rgba(14,37,73,0.7) !important; }
#vacation-list .card-item.plan-card--vacation .btn-icon {
  color: rgba(14,37,73,0.85) !important;
  background: rgba(14,37,73,0.08) !important;
  border: 1px solid rgba(14,37,73,0.15) !important;
}

#ideas-list .card-item.plan-card--idea,
#ideas-list .card-item.plan-card--idea:nth-child(4n+1),
#ideas-list .card-item.plan-card--idea:nth-child(4n+2),
#ideas-list .card-item.plan-card--idea:nth-child(4n+3),
#ideas-list .card-item.plan-card--idea:nth-child(4n+4) {
  background: linear-gradient(135deg, #FFF1B4 0%, #F5DC75 100%) !important;
  color: #2A1A08 !important;
  border: none !important;
}
#ideas-list .card-item.plan-card--idea .card-item-title,
#ideas-list .card-item.plan-card--idea .pci-title { color: #2A1A08 !important; }
#ideas-list .card-item.plan-card--idea .card-item-meta,
#ideas-list .card-item.plan-card--idea .card-item-meta span,
#ideas-list .card-item.plan-card--idea .pci-sub { color: rgba(42,26,8,0.78) !important; }
#ideas-list .card-item.plan-card--idea .btn-icon {
  color: rgba(42,26,8,0.85) !important;
  background: rgba(42,26,8,0.08) !important;
  border: 1px solid rgba(42,26,8,0.15) !important;
}

#datenight-list .card-item.plan-card--datenight,
#datenight-list .card-item.plan-card--datenight:nth-child(4n+1),
#datenight-list .card-item.plan-card--datenight:nth-child(4n+2),
#datenight-list .card-item.plan-card--datenight:nth-child(4n+3),
#datenight-list .card-item.plan-card--datenight:nth-child(4n+4) {
  background: linear-gradient(135deg, #4A1418 0%, #7E2730 100%) !important;
  color: #F4E9CE !important;
  border: none !important;
}

#activity-list .card-item.plan-card--activity,
#activity-list .card-item.plan-card--activity:nth-child(4n+1),
#activity-list .card-item.plan-card--activity:nth-child(4n+2),
#activity-list .card-item.plan-card--activity:nth-child(4n+3),
#activity-list .card-item.plan-card--activity:nth-child(4n+4) {
  background: linear-gradient(135deg, #3F5A3A 0%, #2A4028 100%) !important;
  color: #F4E9CE !important;
  border: none !important;
}

/* ===== PLANS HEADERS REFINEMENT ===== */
/* Tighten the secondary headings inside each Discover sub-page (the page name
   that shows below the thematic hero). They were inheriting oversized fonts.
   Make them small, muted captions to match the cleaner design language. */

.plans-sub .section-header h2,
.plans-sub .section-header h3,
.plans-sub .plans-section-toolbar h2,
.plans-sub .plans-section-toolbar h3,
.plans-sub h2.section-title,
#section-vacations h2:not(.thematic-hero h2):not(.th-bp-title),
#section-datenights h2:not(.thematic-hero h2):not(.th-tr-title),
#section-ideas h2:not(.thematic-hero h2):not(.th-spark-title),
#section-goals h2:not(.thematic-hero h2):not(.th-be-title),
#section-activities h2:not(.thematic-hero h2):not(.th-pp-title) {
  font-family: var(--font-ui, Inter), -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted, #6B6B66) !important;
  margin: 0 !important;
}

/* "Next Date · Sunset rooftop dinner" style sub-headings inside cards/sections */
.plans-sub .section-header,
.plans-sub .plans-section-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 16px 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hairline, rgba(20,20,20,0.08)) !important;
  padding-bottom: 12px !important;
}

/* Specific known headings that user called out — force consistent style */
#section-vacations h1.section-title,
#section-vacations .vacation-list-title,
#section-datenights .next-date-title,
#section-ideas .ideas-list-title,
#section-goals .goals-list-title {
  font-family: var(--font-ui, Inter), sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--ink-muted, #6B6B66) !important;
}

/* The "Next Date / Sunset rooftop dinner" header inside Date Nights — tone down */
#section-datenights .next-date-card-title,
#section-datenights .upcoming-date-title {
  font-family: var(--font-display, Fraunces), Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink, #1A1A18) !important;
}


/* ===== PLANS HEADER REFINEMENT v2 — kill the heavy duplicate title bar ===== */
/* The boarding pass / target / sticky-note hero already shows the page title.
   The redundant "VACATION PLANNER" navy bar below the tab strip is too heavy. */

/* Replace the heavy section header card with a clean inline row */
#section-vacations .section-header,
#section-datenights .section-header,
#section-ideas .section-header,
#section-goals .section-header,
#section-activities .section-header,
.plans-sub .section-header {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 16px 0 14px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

/* HIDE the duplicate page title in the header (already shown in thematic hero) */
#section-vacations .section-header > h1,
#section-vacations .section-header > h2,
#section-vacations .section-header > h3,
#section-datenights .section-header > h1,
#section-datenights .section-header > h2,
#section-datenights .section-header > h3,
#section-ideas .section-header > h1,
#section-ideas .section-header > h2,
#section-ideas .section-header > h3,
#section-goals .section-header > h1,
#section-goals .section-header > h2,
#section-goals .section-header > h3,
#section-activities .section-header > h1,
#section-activities .section-header > h2,
#section-activities .section-header > h3,
.plans-sub .section-header > h1,
.plans-sub .section-header > h2.section-title {
  display: none !important;
}

/* Style the "+ Plan Vacation" / "+ Add" button cleaner — pill cognac, inline */
.plans-sub .section-header .btn-primary,
.plans-sub .section-header .btn,
#section-vacations .section-header .btn-primary,
#section-datenights .section-header .btn-primary,
#section-ideas .section-header .btn-primary,
#section-goals .section-header .btn-primary,
#section-activities .section-header .btn-primary {
  background: linear-gradient(135deg, #E97444 0%, #C36A2D 60%, #8C4818 100%) !important;
  color: #FFF !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  font: 500 13px/1 var(--font-ui, Inter), sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 4px 14px rgba(195,106,45,0.32), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  min-height: 40px !important;
  transition: transform 150ms ease, box-shadow 150ms ease !important;
}
.plans-sub .section-header .btn-primary:hover,
#section-vacations .section-header .btn-primary:hover,
#section-datenights .section-header .btn-primary:hover,
#section-ideas .section-header .btn-primary:hover,
#section-goals .section-header .btn-primary:hover,
#section-activities .section-header .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(195,106,45,0.42), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* ===== HIDE IDEAS CATEGORIES FILTER ===== */
/* User asked to remove the All/Recipes/Places/Activities/Products/Other category
   filter row in Ideas. Hide entire .combined-filters block in this section. */
#section-ideas > .combined-filters {
  display: none !important;
}

/* ===== GOALS — fix +Add Goal button stretching full-width ===== */
#section-goals .section-header,
.plans-sub .section-header {
  flex-wrap: nowrap !important;
}
#section-goals .section-header .btn-primary,
.plans-sub .section-header .btn-primary {
  width: auto !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  min-width: 0 !important;
  max-width: max-content !important;
}

/* ===== GOALS SECTION-HEADER FINAL CLEANUP ===== */
#section-goals .section-header,
.plans-sub .section-header {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 14px 0 12px !important;
  justify-content: flex-end !important;
}
#section-goals .section-header::before,
#section-goals .section-header::after,
.plans-sub .section-header::before,
.plans-sub .section-header::after {
  display: none !important;
  content: none !important;
}

/* ===== DISCOVER SUMMARY (small caption inside section-header) ===== */
#section-goals .section-header,
#section-vacations .section-header,
#section-activities .section-header,
#section-ideas .section-header,
#section-datenights .section-header {
  justify-content: space-between !important;
}
.discover-summary {
  flex: 1 1 auto;
  text-align: right;
  margin-right: 12px;
  font: 600 12px/1.2 'Inter', sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted, rgba(14,37,73,0.55));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .discover-summary {
    font-size: 11px;
    letter-spacing: 0.06em;
    margin-right: 8px;
  }
}

/* ===== STRENGTHENED THEMED CARDS (override the basic versions earlier) ===== */

/* --- GOAL CARDS: bullseye target drama --- */
.plan-card--goal {
  background: linear-gradient(135deg, #0E1B2D 0%, #1A3A6B 100%);
  color: #F4EBD8;
  border-radius: 16px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  border: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.plan-card--goal::before {
  content: '';
  position: absolute;
  top: 50%; right: -20px;
  transform: translateY(-50%);
  width: 110px; height: 110px;
  background:
    repeating-radial-gradient(circle at center, transparent 0 11px, rgba(244,235,216,0.18) 11px 13px);
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
}
.plan-card--goal::after {
  content: '🎯';
  position: absolute;
  top: 50%; right: 22px;
  transform: translateY(-50%);
  font-size: 36px;
  opacity: 0.7;
  pointer-events: none;
}
.plan-card--goal .pcg-content { min-width: 0; padding-right: 70px; }
.plan-card--goal .pcg-tag {
  display: inline-block;
  background: rgba(244,235,216,0.18);
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 9px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
  color: #F4EBD8;
}
.plan-card--goal .pcg-title {
  font: 500 18px/1.25 'Fraunces', serif;
  letter-spacing: -0.01em;
  margin: 0;
  color: inherit;
}
.plan-card--goal .pcg-pct {
  font: 500 28px/1 'Fraunces', serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #FFC93C;
  margin: 6px 0 8px;
}
.plan-card--goal .pcg-bar {
  height: 8px;
  background: rgba(244,235,216,0.18);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.plan-card--goal .pcg-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFC93C, #E97444, #C36A2D);
  border-radius: 999px;
}
.plan-card--goal .pcg-sub {
  margin-top: 10px;
  opacity: 0.85;
}
@media (max-width: 480px) {
  .plan-card--goal { padding: 16px 18px; grid-template-columns: 1fr; }
  .plan-card--goal::before { width: 80px; height: 80px; right: -28px; opacity: 0.5; }
  .plan-card--goal::after { font-size: 28px; right: 14px; opacity: 0.5; }
  .plan-card--goal .pcg-content { padding-right: 50px; }
  .plan-card--goal .pcg-pct { font-size: 24px; }
}

/* --- EXPLORE / ACTIVITY CARDS: trail stamp + mountain ridge --- */
.plan-card--activity {
  background: linear-gradient(135deg, #3F5A3A 0%, #2A4028 100%);
  color: #F4E9CE;
  border-radius: 16px;
  padding: 20px 22px 28px;
  position: relative;
  overflow: hidden;
  border: none;
}
.plan-card--activity::before {
  content: 'AFAMILY · 2026';
  position: absolute;
  top: 14px; right: 16px;
  width: 64px; height: 64px;
  border: 2px solid rgba(244,233,206,0.55);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font: 700 8px/1.1 'Inter', sans-serif;
  letter-spacing: 0.10em;
  color: rgba(244,233,206,0.7);
  transform: rotate(-4deg);
  padding: 6px;
  pointer-events: none;
}
.plan-card--activity::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 14px;
  background: linear-gradient(180deg, transparent 50%, rgba(244,233,206,0.10) 50%);
  clip-path: polygon(0% 100%, 12% 50%, 22% 75%, 35% 30%, 48% 70%, 60% 25%, 72% 60%, 85% 40%, 100% 80%, 100% 100%);
  pointer-events: none;
}
.plan-card--activity .pca-tag {
  display: inline-block;
  background: rgba(244,233,206,0.18);
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 9px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  color: #F4E9CE;
}
.plan-card--activity .pca-title {
  font: 500 18px/1.25 'Fraunces', serif;
  letter-spacing: -0.01em;
  padding-right: 80px;
  color: inherit;
}
.plan-card--activity .pca-sub {
  font: 400 13px/1.4 'Inter', sans-serif;
  opacity: 0.78;
  padding-right: 80px;
  margin-top: 6px;
  color: inherit;
}
@media (max-width: 480px) {
  .plan-card--activity { padding: 16px 18px 24px; }
  .plan-card--activity::before { width: 52px; height: 52px; font-size: 7px; }
  .plan-card--activity .pca-title,
  .plan-card--activity .pca-sub { padding-right: 60px; }
}

/* --- IDEA CARDS: sticky-note with torn corner + glowy bulb --- */
.plan-card--idea {
  background: linear-gradient(135deg, #FFF1B4 0%, #F5DC75 100%);
  color: #2A1A08;
  border-radius: 12px;
  padding: 18px 22px 18px 20px;
  position: relative;
  border: none;
  box-shadow:
    0 6px 18px rgba(140,108,8,0.20),
    inset 0 -2px 0 rgba(255,255,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.6);
  transform: rotate(-1.2deg);
}
.plan-card--idea:nth-child(2n) { transform: rotate(0.8deg); }
.plan-card--idea:nth-child(3n) { transform: rotate(-0.5deg); }
.plan-card--idea:nth-child(4n) { transform: rotate(1deg); }
.plan-card--idea::before {
  content: '💡';
  position: absolute;
  top: 14px; right: 16px;
  font-size: 28px;
  filter:
    drop-shadow(0 0 14px rgba(255,224,80,0.65))
    drop-shadow(0 4px 6px rgba(0,0,0,0.10));
  transform: rotate(-12deg);
  pointer-events: none;
}
.plan-card--idea::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 16px; height: 16px;
  background: linear-gradient(225deg, transparent 50%, rgba(0,0,0,0.05) 50%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-bottom-left-radius: 4px;
  font-size: 0;
  opacity: 1;
  pointer-events: none;
}
.plan-card--idea .pci-tag {
  display: inline-block;
  background: rgba(140,72,8,0.12);
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 9px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  color: #6E2A0A;
  margin-bottom: 8px;
}
.plan-card--idea .pci-title {
  font: 500 17px/1.3 'Fraunces', serif;
  letter-spacing: -0.01em;
  padding-right: 50px;
  margin: 0;
  color: inherit;
}
.plan-card--idea .pci-sub {
  font: 400 13px/1.4 'Inter', sans-serif;
  color: rgba(42,26,8,0.72);
  padding-right: 50px;
  margin-top: 4px;
}
@media (max-width: 480px) {
  .plan-card--idea {
    transform: rotate(0deg) !important;
    padding: 16px 18px;
  }
  .plan-card--idea::before { font-size: 22px; }
  .plan-card--idea .pci-title,
  .plan-card--idea .pci-sub { padding-right: 40px; }
}

/* ===== STRENGTHENED CARDS — high-specificity overrides for ID-prefixed legacy rules ===== */

/* Kill the legacy radial-glow overlay on goal cards so our new ::after (target emoji) can show. */
#section-goals .goal-card.plan-card--goal::after,
#goals-list .goal-card.plan-card--goal::after {
  content: '\1F3AF' !important; /* 🎯 */
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  right: 22px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  height: auto !important;
  font-size: 36px !important;
  opacity: 0.7 !important;
  background: none !important;
  border-radius: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#section-goals .goal-card.plan-card--goal::before,
#goals-list .goal-card.plan-card--goal::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: -20px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 110px !important;
  height: 110px !important;
  background:
    repeating-radial-gradient(circle at center, transparent 0 11px, rgba(244,235,216,0.18) 11px 13px) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

/* Override legacy padding/layout for goal cards so the new themed proportions take effect. */
#section-goals .card-item.goal-card.plan-card--goal,
#goals-list .card-item.goal-card.plan-card--goal {
  padding: 20px 22px !important;
  border-radius: 16px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 16px !important;
  align-items: center !important;
  overflow: hidden !important;
}
#section-goals .card-item.goal-card.plan-card--goal .pcg-content,
#goals-list .card-item.goal-card.plan-card--goal .pcg-content {
  min-width: 0;
  padding-right: 70px;
  position: relative;
  z-index: 1;
}
#section-goals .card-item.goal-card.plan-card--goal .pcg-tag,
#goals-list .card-item.goal-card.plan-card--goal .pcg-tag {
  display: inline-block !important;
  background: rgba(244,235,216,0.18) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font: 600 9px/1 'Inter', sans-serif !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 8px !important;
  color: #F4EBD8 !important;
  text-transform: none !important;
}
#section-goals .card-item.goal-card.plan-card--goal .pcg-title,
#goals-list .card-item.goal-card.plan-card--goal .pcg-title,
#section-goals .card-item.goal-card.plan-card--goal .card-item-title,
#goals-list .card-item.goal-card.plan-card--goal .card-item-title {
  font: 500 18px/1.25 'Fraunces', serif !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  color: #F4EBD8 !important;
}
#section-goals .card-item.goal-card.plan-card--goal .pcg-pct,
#goals-list .card-item.goal-card.plan-card--goal .pcg-pct {
  font: 500 28px/1 'Fraunces', serif !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
  color: #FFC93C !important;
  margin: 6px 0 8px !important;
  display: block !important;
}
#section-goals .card-item.goal-card.plan-card--goal .pcg-bar,
#goals-list .card-item.goal-card.plan-card--goal .pcg-bar {
  height: 8px !important;
  background: rgba(244,235,216,0.18) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin-top: 6px !important;
}
#section-goals .card-item.goal-card.plan-card--goal .pcg-bar-fill,
#goals-list .card-item.goal-card.plan-card--goal .pcg-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #FFC93C, #E97444, #C36A2D) !important;
  border-radius: 999px !important;
}
#section-goals .card-item.goal-card.plan-card--goal .pcg-sub,
#goals-list .card-item.goal-card.plan-card--goal .pcg-sub {
  margin-top: 10px !important;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}
#section-goals .card-item.goal-card.plan-card--goal .card-item-actions,
#goals-list .card-item.goal-card.plan-card--goal .card-item-actions {
  position: relative;
  z-index: 2;
}

@media (max-width: 480px) {
  #section-goals .card-item.goal-card.plan-card--goal,
  #goals-list .card-item.goal-card.plan-card--goal {
    padding: 16px 18px !important;
  }
  #section-goals .goal-card.plan-card--goal::before,
  #goals-list .goal-card.plan-card--goal::before {
    width: 80px !important; height: 80px !important; right: -28px !important; opacity: 0.5 !important;
  }
  #section-goals .goal-card.plan-card--goal::after,
  #goals-list .goal-card.plan-card--goal::after {
    font-size: 28px !important; right: 14px !important; opacity: 0.5 !important;
  }
  #section-goals .card-item.goal-card.plan-card--goal .pcg-content,
  #goals-list .card-item.goal-card.plan-card--goal .pcg-content {
    padding-right: 50px;
  }
  #section-goals .card-item.goal-card.plan-card--goal .pcg-pct,
  #goals-list .card-item.goal-card.plan-card--goal .pcg-pct {
    font-size: 24px !important;
  }
}

/* --- Activity cards: high-spec overrides --- */
#activity-list .card-item.plan-card--activity {
  padding: 20px 22px 28px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
#activity-list .card-item.plan-card--activity::before {
  content: 'AFAMILY · 2026' !important;
  position: absolute !important;
  top: 14px !important; right: 16px !important;
  left: auto !important; bottom: auto !important;
  width: 64px !important; height: 64px !important;
  border: 2px solid rgba(244,233,206,0.55) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  text-align: center !important;
  font: 700 8px/1.1 'Inter', sans-serif !important;
  letter-spacing: 0.10em !important;
  color: rgba(244,233,206,0.7) !important;
  transform: rotate(-4deg) !important;
  padding: 6px !important;
  pointer-events: none !important;
  background: none !important;
}
#activity-list .card-item.plan-card--activity::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
  width: auto !important;
  height: 14px !important;
  background: linear-gradient(180deg, transparent 50%, rgba(244,233,206,0.10) 50%) !important;
  clip-path: polygon(0% 100%, 12% 50%, 22% 75%, 35% 30%, 48% 70%, 60% 25%, 72% 60%, 85% 40%, 100% 80%, 100% 100%) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  transform: none !important;
  border-radius: 0 !important;
  font-size: 0 !important;
}
#activity-list .card-item.plan-card--activity .pca-tag {
  display: inline-block !important;
  background: rgba(244,233,206,0.18) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font: 600 9px/1 'Inter', sans-serif !important;
  letter-spacing: 0.14em !important;
  margin-bottom: 10px !important;
  color: #F4E9CE !important;
}
#activity-list .card-item.plan-card--activity .pca-title,
#activity-list .card-item.plan-card--activity .card-item-title {
  font: 500 18px/1.25 'Fraunces', serif !important;
  letter-spacing: -0.01em !important;
  padding-right: 80px !important;
  color: #F4E9CE !important;
}
#activity-list .card-item.plan-card--activity .pca-sub {
  font: 400 13px/1.4 'Inter', sans-serif !important;
  opacity: 0.78;
  padding-right: 80px !important;
  margin-top: 6px !important;
  color: inherit !important;
}

/* --- Idea cards: high-spec overrides --- */
#ideas-list .card-item.plan-card--idea {
  padding: 18px 22px 18px 20px !important;
  border-radius: 12px !important;
  box-shadow:
    0 6px 18px rgba(140,108,8,0.20),
    inset 0 -2px 0 rgba(255,255,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
  transform: rotate(-1.2deg) !important;
}
#ideas-list .card-item.plan-card--idea:nth-child(2n) { transform: rotate(0.8deg) !important; }
#ideas-list .card-item.plan-card--idea:nth-child(3n) { transform: rotate(-0.5deg) !important; }
#ideas-list .card-item.plan-card--idea:nth-child(4n) { transform: rotate(1deg) !important; }
#ideas-list .card-item.plan-card--idea::before {
  content: '\1F4A1' !important; /* 💡 */
  position: absolute !important;
  top: 14px !important; right: 16px !important;
  left: auto !important; bottom: auto !important;
  width: auto !important; height: auto !important;
  font-size: 28px !important;
  filter:
    drop-shadow(0 0 14px rgba(255,224,80,0.65))
    drop-shadow(0 4px 6px rgba(0,0,0,0.10)) !important;
  transform: rotate(-12deg) !important;
  pointer-events: none !important;
  background: none !important;
  opacity: 1 !important;
}
#ideas-list .card-item.plan-card--idea::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important; left: auto !important; bottom: auto !important;
  width: 16px !important; height: 16px !important;
  background: linear-gradient(225deg, transparent 50%, rgba(0,0,0,0.05) 50%) !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%) !important;
  border-bottom-left-radius: 4px !important;
  font-size: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}
#ideas-list .card-item.plan-card--idea .pci-tag {
  display: inline-block !important;
  background: rgba(140,72,8,0.12) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font: 600 9px/1 'Inter', sans-serif !important;
  letter-spacing: 0.14em !important;
  color: #6E2A0A !important;
  margin-bottom: 8px !important;
  text-transform: none !important;
}
#ideas-list .card-item.plan-card--idea .pci-title,
#ideas-list .card-item.plan-card--idea .card-item-title {
  font: 500 17px/1.3 'Fraunces', serif !important;
  letter-spacing: -0.01em !important;
  padding-right: 50px !important;
  margin: 0 !important;
  color: #2A1A08 !important;
}
#ideas-list .card-item.plan-card--idea .pci-sub {
  font: 400 13px/1.4 'Inter', sans-serif !important;
  color: rgba(42,26,8,0.72) !important;
  padding-right: 50px !important;
  margin-top: 4px !important;
}
@media (max-width: 480px) {
  #ideas-list .card-item.plan-card--idea {
    transform: rotate(0deg) !important;
    padding: 16px 18px !important;
  }
  #ideas-list .card-item.plan-card--idea::before { font-size: 22px !important; }
  #ideas-list .card-item.plan-card--idea .pci-title,
  #ideas-list .card-item.plan-card--idea .pci-sub { padding-right: 40px !important; }
}

/* Force pseudo-elements visible (override generic .card-item::before opacity:0) */
#activity-list .card-item.plan-card--activity::before,
#activity-list .card-item.plan-card--activity::after,
#ideas-list .card-item.plan-card--idea::before,
#ideas-list .card-item.plan-card--idea::after,
#goals-list .card-item.goal-card.plan-card--goal::before {
  opacity: 1 !important;
  transition: none !important;
}
#goals-list .card-item.goal-card.plan-card--goal::after {
  opacity: 0.7 !important;
}

/* ===== GOALS SECTION-HEADER FIT ON ONE LINE ===== */
/* Keep summary + button on the same row even on narrow phones. */
#section-goals .section-header,
.plans-sub .section-header {
  flex-wrap: nowrap !important;
}
#section-goals .section-header .discover-summary,
.plans-sub .section-header .discover-summary {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}
@media (max-width: 480px) {
  #section-goals .section-header .discover-summary,
  .plans-sub .section-header .discover-summary {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }
  #section-goals .section-header .btn-primary,
  .plans-sub .section-header .btn-primary {
    padding: 9px 14px !important;
    font-size: 12px !important;
  }
}

/* ===== HOME-WOW + TAB-ICONS ===== */

/* ---- shared: corner emoji & eyebrow pills ---- */
body[data-section="home"] .hwow-corner-emoji {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  font-size: 60px !important;
  line-height: 1 !important;
  opacity: 0.32 !important;
  transform: rotate(-10deg) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.08)) !important;
}
body[data-section="home"] .hwow-eyebrow {
  display: inline-block !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ===== A. NEXT UP CARD — sage→mint ===== */
body[data-section="home"] [data-home-block="next-up"],
body[data-section="home"] #home-v4-nextup,
body[data-section="home"] .hwow-nextup {
  position: relative !important;
  background: linear-gradient(135deg, #DDF0D9 0%, #B8E0AE 100%) !important;
  border: 1px solid rgba(26, 74, 53, 0.12) !important;
  border-radius: 22px !important;
  padding: 18px 18px 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px -12px rgba(26, 74, 53, 0.25) !important;
}
body[data-section="home"] .hwow-nextup .hwow-eyebrow {
  background: rgba(26, 74, 53, 0.12) !important;
  color: #1A4A35 !important;
}
body[data-section="home"] .hwow-nextup-row {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 4px !important;
}
body[data-section="home"] .hwow-nextup-emoji {
  font-size: 36px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 2px 4px rgba(26, 74, 53, 0.18)) !important;
}
body[data-section="home"] .hwow-nextup-title {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #1A4A35 !important;
  letter-spacing: -0.01em !important;
}
body[data-section="home"] .hwow-nextup-sub {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  color: rgba(26, 74, 53, 0.7) !important;
  margin-top: 3px !important;
}
body[data-section="home"] .hwow-countdown-chip {
  flex: 0 0 auto !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  background: #1A4A35 !important;
  color: #DDF0D9 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}
body[data-section="home"] .hwow-nextup-link {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 10px !important;
  background: rgba(255,255,255,0.55) !important;
  color: #1A4A35 !important;
  border: 1px solid rgba(26, 74, 53, 0.18) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
body[data-section="home"] .hwow-nextup-empty .hwow-nextup-title {
  font-size: 24px !important;
}
body[data-section="home"] .hwow-empty-emoji {
  font-size: 22px !important;
  margin-left: 4px !important;
  vertical-align: -2px !important;
}

/* ===== B. TODAY'S WINDOW — meal pills ===== */
body[data-section="home"] [data-home-block="meals"],
body[data-section="home"] #home-today-meals.hwow-meals {
  background: #FCF1E7 !important;
  border-radius: 16px !important;
  padding: 14px !important;
  border: 1px solid rgba(193, 116, 67, 0.12) !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
body[data-section="home"] .hwow-meal-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 12px 12px 11px !important;
  border-radius: 14px !important;
  border: none !important;
  text-align: left !important;
  min-height: 96px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,0.18) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
body[data-section="home"] .hwow-meal-pill:active { transform: scale(0.98) !important; }
body[data-section="home"] .hwow-meal-emoji {
  font-size: 28px !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}
body[data-section="home"] .hwow-meal-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 0.8 !important;
}
body[data-section="home"] .hwow-meal-name {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
body[data-section="home"] .hwow-meal-name em {
  font-style: italic !important;
  opacity: 0.75 !important;
  font-weight: 500 !important;
}
/* Per-slot color identities */
body[data-section="home"] .hwow-meal-breakfast {
  background: linear-gradient(135deg, #FFD9B8, #F5A66D) !important;
  color: #5C2E0F !important;
}
body[data-section="home"] .hwow-meal-lunch {
  background: linear-gradient(135deg, #DDF0D9, #B8E0AE) !important;
  color: #1A4A35 !important;
}
body[data-section="home"] .hwow-meal-dinner {
  background: linear-gradient(135deg, #2D3E5A, #4A5F82) !important;
  color: #FCF1E7 !important;
}
body[data-section="home"] .hwow-meal-dinner .hwow-meal-label { opacity: 0.95 !important; }
body[data-section="home"] .hwow-meal-snack {
  background: linear-gradient(135deg, #F5C8A0, #E97444) !important;
  color: #3A1A0A !important;
}

/* ===== C. UPCOMING THIS WEEK — lavender timeline ===== */
body[data-section="home"] [data-home-block="upcoming"],
body[data-section="home"] #home-upcoming.hwow-upcoming {
  position: relative !important;
  background: linear-gradient(135deg, #ECE0F5 0%, #C8B0E5 100%) !important;
  border: 1px solid rgba(96, 60, 140, 0.14) !important;
  border-radius: 20px !important;
  padding: 16px 14px 10px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px -14px rgba(96, 60, 140, 0.3) !important;
}
body[data-section="home"] .hwow-upcoming .hwow-corner-emoji {
  font-size: 40px !important;
  opacity: 0.35 !important;
}
body[data-section="home"] .hwow-up-row {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: 44px 22px 1fr !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 8px 4px !important;
  text-align: left !important;
  cursor: pointer !important;
}
body[data-section="home"] .hwow-up-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: #FCF1E7 !important;
  color: #4A2E78 !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  min-width: 40px !important;
}
body[data-section="home"] .hwow-up-rail {
  position: relative !important;
  width: 22px !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body[data-section="home"] .hwow-up-rail::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 2px !important;
  background: rgba(74, 46, 120, 0.22) !important;
  transform: translateX(-50%) !important;
}
body[data-section="home"] .hwow-up-row.is-last .hwow-up-rail::before {
  bottom: 50% !important;
}
body[data-section="home"] .hwow-up-row:first-child .hwow-up-rail::before {
  top: 50% !important;
}
body[data-section="home"] .hwow-up-dot {
  position: relative !important;
  z-index: 1 !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #4A2E78 !important;
  box-shadow: 0 0 0 3px #FCF1E7 !important;
}
body[data-section="home"] .hwow-up-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
body[data-section="home"] .hwow-up-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #2A1A4A !important;
  line-height: 1.3 !important;
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body[data-section="home"] .hwow-up-icon {
  font-size: 14px !important;
  opacity: 0.7 !important;
  flex: 0 0 auto !important;
}
body[data-section="home"] .hwow-up-empty {
  font-family: 'Inter', system-ui, sans-serif !important;
  color: #4A2E78 !important;
  font-style: italic !important;
  padding: 8px 4px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ===== D. ANNOUNCEMENTS / POLLS ===== */
body[data-section="home"] .home-v4-ap-panel {
  background: linear-gradient(135deg, #FFF1E0 0%, #FBE0BD 100%) !important;
  border: 1px solid rgba(193, 116, 67, 0.16) !important;
  border-radius: 22px !important;
  padding: 16px !important;
  box-shadow: 0 8px 24px -14px rgba(193, 116, 67, 0.3) !important;
}
body[data-section="home"] .home-ap-tabs {
  display: flex !important;
  gap: 8px !important;
}
body[data-section="home"] .home-ap-tab {
  border: none !important;
  background: rgba(255,255,255,0.55) !important;
  color: rgba(60, 30, 10, 0.55) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
body[data-section="home"] .home-ap-tab.is-active[data-ap-tab="ann"] {
  background: linear-gradient(135deg, #C77545, #A85829) !important;
  color: #FFF1E0 !important;
  box-shadow: 0 4px 12px -4px rgba(168, 88, 41, 0.5) !important;
}
body[data-section="home"] .home-ap-tab.is-active[data-ap-tab="poll"] {
  background: linear-gradient(135deg, #2E6B4F, #1A4A35) !important;
  color: #DDF0D9 !important;
  box-shadow: 0 4px 12px -4px rgba(26, 74, 53, 0.5) !important;
}
body[data-section="home"] .home-v3-poll-q {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #2D1A0A !important;
  line-height: 1.3 !important;
  margin-bottom: 10px !important;
}
body[data-section="home"] .home-v3-poll-opt {
  border-radius: 12px !important;
  overflow: hidden !important;
}
body[data-section="home"] .home-v3-poll-bar {
  background: linear-gradient(90deg, rgba(46, 107, 79, 0.18), rgba(26, 74, 53, 0.28)) !important;
  border-radius: 12px !important;
}
body[data-section="home"] .home-v3-poll-opt.voted .home-v3-poll-bar {
  background: linear-gradient(90deg, #2E6B4F, #1A4A35) !important;
  opacity: 0.85 !important;
}
body[data-section="home"] .home-v3-poll-opt.voted .home-v3-poll-opt-text,
body[data-section="home"] .home-v3-poll-opt.voted .home-v3-poll-pct {
  color: #FCF1E7 !important;
}
body[data-section="home"] .home-v3-poll-pct {
  font-size: 15px !important;
  font-weight: 700 !important;
}
body[data-section="home"] .home-v3-poll-foot a {
  font-size: 11px !important;
  opacity: 0.5 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
body[data-section="home"] .home-v3-poll-foot a:hover { opacity: 0.8 !important; }

/* ===== E. VERSE + REVEAL polish ===== */
body[data-section="home"] .home-v41-verse-card,
body[data-section="home"] .home-v41-reveal-card {
  position: relative !important;
}
body[data-section="home"] .home-v41-verse-card::before,
body[data-section="home"] .home-v41-reveal-card::before {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  font-size: 40px !important;
  line-height: 1 !important;
  opacity: 0.4 !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12)) !important;
  pointer-events: none !important;
}
body[data-section="home"] .home-v41-verse-card::before { content: '✨' !important; }
body[data-section="home"] .home-v41-reveal-card::before { content: '🧠' !important; }

/* ===== JOB 2: BOTTOM-TAB + DRAWER ICONS ===== */
.bottom-tabs .btab .btab-icon {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.75 !important;
  transition: transform 0.18s ease !important;
}
.bottom-tabs .btab.is-active .btab-icon,
.bottom-tabs .btab[aria-current="page"] .btab-icon,
.bottom-tabs .btab.active .btab-icon {
  transform: scale(1.05) !important;
  filter: drop-shadow(0 0 14px rgba(193, 116, 67, 0.55))
          drop-shadow(0 0 6px rgba(193, 116, 67, 0.35)) !important;
}
.bottom-tabs .btab.is-active .btab-label,
.bottom-tabs .btab[aria-current="page"] .btab-label,
.bottom-tabs .btab.active .btab-label {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #C17443 !important;
  letter-spacing: 0 !important;
}
/* Drawer (sidebar) msd-icon match */
#sidebar .msd-icon svg {
  stroke-width: 1.75 !important;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  body[data-section="home"] .hwow-meal-pill,
  .bottom-tabs .btab .btab-icon {
    transition: none !important;
  }
  body[data-section="home"] .hwow-meal-pill:active {
    transform: none !important;
  }
  .bottom-tabs .btab.is-active .btab-icon,
  .bottom-tabs .btab[aria-current="page"] .btab-icon,
  .bottom-tabs .btab.active .btab-icon {
    transform: none !important;
  }
}

/* ===== MEALS WEEK NAV — tighter row + visible chevrons ===== */
#section-meals .mv3-week-nav {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 12px 0 14px !important;
  background: transparent !important;
  border: 0 !important;
  min-height: 44px !important;
}
#section-meals .mv3-week-nav .mv3-iconbtn {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: var(--card, #FFF) !important;
  border: 1px solid var(--hairline, rgba(20,20,20,0.10)) !important;
  color: var(--ink, #1A1A18) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  flex-shrink: 0 !important;
}
#section-meals .mv3-week-nav .mv3-iconbtn:hover {
  background: var(--card-tinted, #F5EFE8) !important;
  transform: translateY(-1px);
}
#section-meals .mv3-week-nav .mv3-week-label {
  flex: 1 1 auto !important;
  text-align: center !important;
  font: 500 14px/1 var(--font-ui, Inter), sans-serif !important;
  color: var(--ink, #1A1A18) !important;
  letter-spacing: -0.005em !important;
}
#section-meals .mv3-week-nav .mv3-today-btn {
  background: var(--card, #FFF) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font: 500 13px/1 var(--font-ui, Inter), sans-serif !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  min-height: 36px !important;
  transition: all 150ms ease !important;
}
#section-meals .mv3-week-nav .mv3-today-btn:hover {
  background: var(--card-tinted) !important;
}

/* ===== HOME REDEEMED TODAY — celebratory gold tile ===== */
body[data-section="home"] #home-redeemed-block {
  display: block !important;
}
body[data-section="home"] #home-redeemed-block:empty,
body[data-section="home"] #home-redeemed-block:has(#home-redeemed:empty) {
  display: none !important;
}
.hwow-redeem-card {
  background: linear-gradient(135deg, #FFE9A8 0%, #F5C842 50%, #D4A437 100%);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(212,164,55,0.20), inset 0 1px 0 rgba(255,255,255,0.4);
  color: #4A2E04;
}
.hwow-redeem-card::before {
  content: '🎁';
  position: absolute;
  top: 14px; right: 16px;
  font-size: 38px;
  opacity: 0.55;
  transform: rotate(-10deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.10));
  pointer-events: none;
}
.hwow-redeem-eyebrow {
  font: 700 11px/1 var(--font-ui, Inter), sans-serif;
  letter-spacing: 0.14em;
  color: #6B4404;
  background: rgba(255,255,255,0.45);
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 14px;
}
.hwow-redeem-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hwow-redeem-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(74,46,4,0.10);
}
.hwow-redeem-row:last-child { border-bottom: 0; }
.hwow-redeem-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.hwow-redeem-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hwow-redeem-name {
  font: 600 15px/1.2 var(--font-display, Fraunces), Georgia, serif;
  color: #2A1810;
  letter-spacing: -0.01em;
}
.hwow-redeem-by {
  font: 500 11px/1 var(--font-ui, Inter);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B4404;
}
.hwow-redeem-cost {
  font: 600 14px/1 var(--font-display, Fraunces), serif;
  font-variant-numeric: tabular-nums;
  color: #8C3A0E;
  background: rgba(255,255,255,0.55);
  padding: 6px 12px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* ===== GOALS SECTION-HEADER — force one row ===== */
#section-goals .section-header,
#section-vacations .section-header,
#section-datenights .section-header,
#section-ideas .section-header,
#section-activities .section-header,
.plans-sub .section-header {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
}

/* ===== NEEDS-PAGE ===== */
#section-shopping.needs-mode .combined-filters,
#section-shopping.needs-mode .shop-person-filters,
#section-shopping.needs-mode #shop-cat-filters,
#section-shopping.needs-mode #shop-cat-toggle,
#section-shopping.needs-mode .shopping-stats,
#section-shopping.needs-mode #shopping-count {
  display: none !important;
}

#section-shopping.needs-mode #shopping-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.needs-card {
  background: linear-gradient(135deg, #FFF1E0 0%, #F5DCB8 100%);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(195,106,45,0.15);
  position: relative;
  cursor: pointer;
  list-style: none;
}
.needs-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.needs-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.needs-card-title {
  font: 500 15px/1.3 var(--font-display, Fraunces), Georgia, serif;
  color: #2A1810;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.needs-card-meta {
  font: 500 11px/1 'Inter', system-ui, sans-serif;
  color: rgba(110,42,10,0.7);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 4px;
}
.needs-card.is-done {
  background: rgba(255,241,224,0.5);
  opacity: 0.65;
}
.needs-card.is-done .needs-card-title {
  text-decoration: line-through;
}
.needs-card-actions {
  display: flex;
  gap: 4px;
}
.needs-card-actions .btn-icon {
  background: rgba(255,255,255,0.5);
  color: #6E2A0A;
}

/* ===== MEAL-TILES-POLISH ===== */
.meal-hero .meal-hero-slot {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  transition: background 150ms ease;
}
.meal-hero .meal-hero-slot:hover {
  background: rgba(255,255,255,0.10) !important;
}
.meal-hero .meal-hero-slot:last-child {
  margin-bottom: 0 !important;
}
.meal-hero-slot-name {
  font-style: italic !important;
  font-family: var(--font-display, Fraunces), serif !important;
  font-size: 15px !important;
}

.meal-strip-card .meal-strip-line {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  margin-bottom: 4px !important;
}
.meal-strip-card .meal-strip-line:last-child {
  margin-bottom: 0 !important;
}
.meal-strip-card .meal-strip-line-type {
  font: 600 9px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  opacity: 0.75 !important;
  display: inline-block;
  margin-right: 6px;
}
.meal-strip-card .meal-strip-line-text {
  font: 500 12px/1.2 'Inter', system-ui, sans-serif !important;
}
.meal-strip-card .meal-strip-line.empty {
  opacity: 0.4;
}

/* ===== STATIONS-CARDS + TODOS-CARDS themed ===== */

/* Per-member ritual card themes */
.station-card-themed {
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  display: grid !important;
  grid-template-columns: 22px 36px 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
  text-align: left !important;
  cursor: pointer !important;
  border: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 150ms ease, box-shadow 150ms ease !important;
}
.station-card-themed:hover { transform: translateY(-1px); }

/* Lera — sunset cream */
.scard--lera {
  background: linear-gradient(135deg, #FFF1B4 0%, #FFD180 100%) !important;
  color: #4A2E04 !important;
  box-shadow: 0 4px 14px rgba(212,164,55,0.18), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.scard--lera::before { content: '☀'; position: absolute; top: 8px; right: 12px; font-size: 18px; opacity: 0.45; }

/* Lebari — soft pink */
.scard--lebari {
  background: linear-gradient(135deg, #FFE4E4 0%, #FFB7C5 100%) !important;
  color: #4A1530 !important;
  box-shadow: 0 4px 14px rgba(255,183,197,0.30), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.scard--lebari::before { content: '🍼'; position: absolute; top: 8px; right: 12px; font-size: 18px; opacity: 0.55; }

/* Abs — navy (uses Anne's btn class but with override on #abs-station scope) */
#abs-station .station-card-themed,
#abs-station .anne-care-btn.station-card-themed {
  background: linear-gradient(135deg, #2D3E5A 0%, #1A2640 100%) !important;
  color: #DCE3F0 !important;
  box-shadow: 0 4px 14px rgba(45,62,90,0.30), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
#abs-station .station-card-themed::before,
#abs-station .anne-care-btn.station-card-themed::before {
  content: '⚡'; position: absolute; top: 8px; right: 12px; font-size: 16px; opacity: 0.55;
}

/* Anne — emerald */
.scard--anne {
  background: linear-gradient(135deg, #2F7A5F 0%, #1F5142 100%) !important;
  color: #E8F5EC !important;
  box-shadow: 0 4px 14px rgba(31,82,66,0.25), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
.scard--anne::before { content: '🌿'; position: absolute; top: 8px; right: 12px; font-size: 16px; opacity: 0.55; }

/* Inner elements inherit color */
.station-card-themed * { color: inherit !important; }

/* Done state */
.station-card-themed.is-done,
.station-card-themed.done {
  filter: saturate(0.6) brightness(0.92);
  opacity: 0.78;
}
.station-card-themed.is-done::after,
.station-card-themed.done::after {
  content: '✓';
  position: absolute;
  bottom: 10px; right: 14px;
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.4);
  color: inherit;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font: 700 13px/1 Inter;
}

/* Existing label/emoji/pts inherit */
.station-card-themed .lera-care-emoji,
.station-card-themed .anne-care-emoji,
.station-card-themed .lebari-care-emoji {
  background: rgba(255,255,255,0.35) !important;
  color: inherit !important;
}
#abs-station .station-card-themed .anne-care-emoji,
.scard--anne .anne-care-emoji {
  background: rgba(255,255,255,0.18) !important;
}
.station-card-themed .lera-care-pts,
.station-card-themed .anne-care-pts,
.station-card-themed .lebari-care-pts {
  background: rgba(255,255,255,0.40) !important;
  color: inherit !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
#abs-station .station-card-themed .anne-care-pts,
.scard--anne .anne-care-pts {
  background: rgba(255,255,255,0.18) !important;
}

/* ===== TO-DO CARDS — themed mint tile with priority rail ===== */
#section-todos .td-row,
#section-todos .todo-item,
#section-todos .row.todo-item {
  background: linear-gradient(135deg, #F4F9F0 0%, #E0EFDB 100%) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(31,138,76,0.12) !important;
  padding: 14px 16px 14px 22px !important;
  margin-bottom: 8px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 2px 6px rgba(31,138,76,0.06) !important;
  transition: transform 150ms ease !important;
}
#section-todos .td-row:hover,
#section-todos .todo-item:hover { transform: translateY(-1px); }
#section-todos .td-row::before,
#section-todos .todo-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--ink-faint, #A6A39B);
}
#section-todos .td-row[data-priority="high"]::before,
#section-todos .todo-item[data-priority="high"]::before { background: #C0392B !important; }
#section-todos .td-row[data-priority="medium"]::before,
#section-todos .todo-item[data-priority="medium"]::before { background: #C97A14 !important; }
#section-todos .td-row[data-priority="low"]::before,
#section-todos .todo-item[data-priority="low"]::before { background: #2F7A5F !important; }
#section-todos .td-row.is-done,
#section-todos .todo-item.is-done {
  background: linear-gradient(135deg, #F0F0F0 0%, #E0E0E0 100%) !important;
  opacity: 0.65 !important;
}

/* ===== STATION HERO — credit-card treatment to match Money/Discover ===== */
#lera-station .station-v3-hero,
#lebari-station .station-v3-hero,
#abs-station .station-v3-hero,
#anne-station-wrap .station-v3-hero {
  border-radius: 22px !important;
  padding: 56px 22px 22px !important;
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.18),
    0 4px 14px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
/* Holographic shimmer overlay */
#lera-station .station-v3-hero::before,
#lebari-station .station-v3-hero::before,
#abs-station .station-v3-hero::before,
#anne-station-wrap .station-v3-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.10) 50%, transparent 65%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 12px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
/* "AFAMILY · MEMBER" caption top-right */
#lera-station .station-v3-hero::after,
#lebari-station .station-v3-hero::after,
#abs-station .station-v3-hero::after,
#anne-station-wrap .station-v3-hero::after {
  content: 'AFAMILY · MEMBER' !important;
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;
  font: 600 10px/1 var(--font-ui, Inter) !important;
  letter-spacing: 0.18em !important;
  color: rgba(255,255,255,0.55) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* Inner content above shimmer */
#lera-station .station-v3-hero > *,
#lebari-station .station-v3-hero > *,
#abs-station .station-v3-hero > *,
#anne-station-wrap .station-v3-hero > * {
  position: relative !important;
  z-index: 1 !important;
}
/* Gold EMV chip top-left via station-v3-hero-top */
#lera-station .station-v3-hero-top,
#lebari-station .station-v3-hero-top,
#abs-station .station-v3-hero-top,
#anne-station-wrap .station-v3-hero-top {
  position: relative;
}
#lera-station .station-v3-hero-top::before,
#lebari-station .station-v3-hero-top::before,
#abs-station .station-v3-hero-top::before,
#anne-station-wrap .station-v3-hero-top::before {
  content: '' !important;
  position: absolute !important;
  top: -36px !important;
  left: 0 !important;
  width: 28px !important;
  height: 22px !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, #E8C455 0%, #B58900 60%, #8C6700 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 1px 2px rgba(0,0,0,0.18) !important;
  z-index: 2 !important;
}

/* Home content stays visible by default (no JS-locked opacity).
   The stagger reveal in _homeV3StaggerReveal handles fade-in for users
   without reduced-motion; if JS fails, content is still visible. */