/* MoneyBuddy final four-color beta theme
   Forest #183C35 | Gold #C9A24A | White #FFFFFF | Navy #1E2A3A */
:root {
  --mb-forest: #183C35;
  --mb-gold: #C9A24A;
  --mb-ivory: #FFFFFF; /* white neutral; variable name retained for compatibility */
  --mb-navy: #1E2A3A;

  --mb-forest-soft: color-mix(in srgb, var(--mb-forest) 6%, var(--mb-ivory));
  --mb-forest-soft-2: color-mix(in srgb, var(--mb-forest) 11%, var(--mb-ivory));
  --mb-gold-soft: color-mix(in srgb, var(--mb-gold) 10%, var(--mb-ivory));
  --mb-gold-soft-2: color-mix(in srgb, var(--mb-gold) 20%, var(--mb-ivory));
  --mb-navy-soft: color-mix(in srgb, var(--mb-navy) 5%, var(--mb-ivory));
  --mb-navy-soft-2: color-mix(in srgb, var(--mb-navy) 10%, var(--mb-ivory));
  --mb-border: color-mix(in srgb, var(--mb-navy) 13%, var(--mb-ivory));
  --mb-muted: color-mix(in srgb, var(--mb-navy) 72%, var(--mb-ivory));

  /* Re-map the generated design tokens to the final four-color system. */
  --color-on-surface-variant: var(--mb-muted);
  --color-error-container: var(--mb-gold-soft);
  --color-on-primary: var(--mb-ivory);
  --color-on-primary-fixed: var(--mb-forest);
  --color-surface: var(--mb-ivory);
  --color-error: var(--mb-navy);
  --color-on-error: var(--mb-ivory);
  --color-outline-variant: var(--mb-border);
  --color-primary-fixed-dim: var(--mb-forest-soft-2);
  --color-on-secondary-fixed-variant: var(--mb-navy);
  --color-surface-tint: var(--mb-forest);
  --color-surface-container-low: var(--mb-navy-soft);
  --color-on-surface: var(--mb-navy);
  --color-secondary: var(--mb-navy);
  --color-tertiary-container: var(--mb-gold);
  --color-primary-container: var(--mb-forest);
  --color-tertiary-fixed: var(--mb-gold-soft-2);
  --color-secondary-fixed: var(--mb-navy-soft-2);
  --color-surface-container-lowest: var(--mb-ivory);
  --color-tertiary-fixed-dim: var(--mb-gold);
  --color-on-secondary: var(--mb-ivory);
  --color-tertiary: var(--mb-navy);
  --color-surface-container: color-mix(in srgb, var(--mb-forest) 5%, var(--mb-ivory));
  --color-on-error-container: var(--mb-navy);
  --color-outline: color-mix(in srgb, var(--mb-navy) 38%, var(--mb-ivory));
  --color-surface-container-highest: color-mix(in srgb, var(--mb-navy) 14%, var(--mb-ivory));
  --color-on-primary-fixed-variant: var(--mb-forest);
  --color-primary: var(--mb-forest);
  --color-secondary-container: var(--mb-navy-soft-2);
  --color-surface-container-high: color-mix(in srgb, var(--mb-navy) 10%, var(--mb-ivory));
  --color-primary-fixed: var(--mb-forest-soft);

  /* Keep Buddy theming in the same family. */
  --buddy-accent: var(--mb-forest) !important;
  --buddy-soft: var(--mb-forest-soft) !important;
  --buddy-soft-2: var(--mb-forest-soft-2) !important;
}

html, body, main { background: var(--mb-ivory) !important; color: var(--mb-navy); }
body { min-width: 0; }
::selection { background: var(--mb-gold-soft-2); color: var(--mb-navy); }

/* Header: crisp, compact, and visually quieter than the dashboard. */
header.sticky {
  background: color-mix(in srgb, var(--mb-ivory) 94%, transparent) !important;
  border-bottom: 1px solid var(--mb-border);
  box-shadow: 0 8px 24px -24px color-mix(in srgb, var(--mb-navy) 48%, transparent) !important;
}
#mb-header-inner { max-width: 1320px !important; }
.moneybuddy-brand-title { color: var(--mb-navy) !important; }
#headerBuddyDisplay {
  background: var(--mb-forest-soft) !important;
  border-color: color-mix(in srgb, var(--mb-forest) 16%, var(--mb-ivory)) !important;
}
#headerSignInBtn {
  color: var(--mb-forest) !important;
  background: var(--mb-forest-soft) !important;
  border-color: color-mix(in srgb, var(--mb-forest) 18%, var(--mb-ivory)) !important;
}
#headerSignInBtn:hover { background: var(--mb-forest-soft-2) !important; }
#mb-header-inner button[onclick="openAddEntryModal()"] {
  background: var(--mb-forest) !important;
  color: var(--mb-ivory) !important;
  border: 1px solid var(--mb-forest) !important;
  box-shadow: 0 8px 20px -15px color-mix(in srgb, var(--mb-forest) 70%, transparent) !important;
}
#mb-header-inner button[onclick="openAddEntryModal()"] .material-symbols-outlined { color: var(--mb-gold) !important; }

/* Gold means special, not everyday. */
.bg-tertiary-fixed, .bg-tertiary-fixed-dim, .bg-tertiary-fixed\/60 { background-color: var(--mb-gold-soft-2) !important; }
.text-tertiary, .text-tertiary-fixed { color: var(--mb-navy) !important; }
.bg-surface-tint { background-color: var(--mb-forest) !important; }
.text-surface-tint { color: var(--mb-forest) !important; }

/* Dashboard shell and hierarchy. */
#mb-main-shell { max-width: 1320px !important; }
#mb-main-shell > div { gap: clamp(18px, 2vw, 28px) !important; }
#moneybuddy-brand-hero::before {
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--mb-forest) 15%, transparent),
    color-mix(in srgb, var(--mb-gold) 9%, transparent) 44%, transparent 74%) !important;
}
.moneybuddy-brand-hero-inner {
  background: linear-gradient(135deg, var(--mb-ivory), var(--mb-forest-soft)) !important;
  border-color: var(--mb-border) !important;
  box-shadow: 0 18px 42px -31px color-mix(in srgb, var(--mb-forest) 40%, transparent),
              0 4px 14px -12px color-mix(in srgb, var(--mb-gold) 42%, transparent) !important;
}

/* Supporting cards are flat; only priority moments get depth. */
.money-summary-card,
#where-it-goes-section,
#buddy-insight-card,
#daily-tip-card,
#upcoming-obligations-card,
#recent-activity-card,
#net-worth-section {
  box-shadow: none !important;
  border: 1px solid var(--mb-border) !important;
}
#flexible-money-card, #safeToSpendCard {
  background: linear-gradient(145deg, var(--mb-ivory) 0%, var(--mb-forest-soft) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--mb-forest) 18%, var(--mb-ivory)) !important;
  box-shadow: 0 20px 44px -31px color-mix(in srgb, var(--mb-forest) 48%, transparent) !important;
}
#buddyHeroCard {
  background: linear-gradient(145deg, var(--mb-ivory) 0%, var(--mb-navy-soft) 100%) !important;
  border: 1px solid var(--mb-border) !important;
  box-shadow: 0 16px 34px -30px color-mix(in srgb, var(--mb-navy) 35%, transparent) !important;
}
#money-plant-section {
  background: linear-gradient(145deg, var(--mb-ivory) 0%, var(--mb-forest-soft) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--mb-forest) 15%, var(--mb-ivory)) !important;
  box-shadow: 0 14px 30px -28px color-mix(in srgb, var(--mb-forest) 38%, transparent) !important;
}

/* Buddy identity now comes from artwork + voice, not seven unrelated card colors. */
#buddyHeroCard[data-buddy] { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-navy-soft)) !important; }
#buddyHeroCard[data-buddy="atlas"] {
  background: radial-gradient(circle at 84% 12%, var(--mb-gold-soft-2), transparent 35%),
              linear-gradient(145deg, var(--mb-ivory), var(--mb-forest-soft)) !important;
  border-color: color-mix(in srgb, var(--mb-gold) 42%, var(--mb-ivory)) !important;
}
.buddy-card[data-buddy] {
  background: var(--mb-ivory) !important;
  border: 1px solid var(--mb-border) !important;
}
.buddy-card[data-buddy="sidekick"], .buddy-card[data-buddy="flora"], .buddy-card[data-buddy="leo"] { background: var(--mb-forest-soft) !important; }
.buddy-card[data-buddy="barnaby"], .buddy-card[data-buddy="bella"] { background: var(--mb-navy-soft) !important; }
.buddy-card[data-buddy="penny"], .buddy-card[data-buddy="buzz"], .buddy-card[data-buddy="atlas"] { background: var(--mb-gold-soft) !important; }
.buddy-card:hover { filter: none !important; border-color: color-mix(in srgb, var(--mb-forest) 28%, var(--mb-ivory)) !important; }
.buddy-card[aria-pressed="true"], .buddy-card.is-active {
  border-color: var(--mb-forest) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mb-forest) 25%, transparent) !important;
}

/* Money summary cards: same palette, clearly differentiated by tone. */
.money-summary-card::after { background: color-mix(in srgb, var(--mb-ivory) 52%, transparent) !important; }
.money-summary-card.money-in-card { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-forest-soft)) !important; }
.money-summary-card.money-out-card { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-navy-soft)) !important; }
.money-summary-card.savings-card { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-gold-soft)) !important; }
#where-it-goes-section { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-gold-soft)) !important; }
#buddy-insight-card { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-forest-soft)) !important; }
#daily-tip-card { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-gold-soft)) !important; }
#upcoming-obligations-card { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-navy-soft)) !important; }
#recent-activity-card { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-forest-soft)) !important; }
#net-worth-section { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-navy-soft)) !important; }

/* Nested rows remain visually separate without introducing new colors. */
#flexible-money-card .bg-surface-container-low,
#flexible-money-card .bg-surface-container\/50,
#where-it-goes-section #whereItGoesContainer > div,
#money-plant-section .plant-status-card,
#upcoming-obligations-card #upcomingBillsContainer > div,
#recent-activity-card #recentActivityContainer > div,
#net-worth-section .bg-surface-container-low {
  background: color-mix(in srgb, var(--mb-ivory) 93%, var(--mb-navy) 7%) !important;
  border-color: var(--mb-border) !important;
  backdrop-filter: none !important;
}
#net-worth-section > div:last-child > div:nth-child(1) { background: var(--mb-forest-soft) !important; }
#net-worth-section > div:last-child > div:nth-child(2) { background: var(--mb-navy-soft) !important; }
#net-worth-section > div:last-child > div:nth-child(3) { background: var(--mb-gold-soft) !important; }

/* Plant framing uses the brand palette; the plant artwork keeps its natural colors. */
#money-plant-section .bg-surface-container-low.rounded-2xl { background: var(--mb-forest-soft) !important; border-color: var(--mb-border) !important; }
#plantVisualContainer {
  background: radial-gradient(circle at 46% 28%, var(--mb-ivory), var(--mb-forest-soft) 58%, var(--mb-forest-soft-2)) !important;
  border-color: color-mix(in srgb, var(--mb-forest) 18%, var(--mb-ivory)) !important;
}
#plantVisualContainer::before, #plantVisualContainer::after { color: var(--mb-gold) !important; }
.plant-stage-thumb-card { background: var(--mb-ivory) !important; border-color: var(--mb-border) !important; }
.plant-stage-thumb-card.is-current { background: var(--mb-gold-soft) !important; border-color: color-mix(in srgb, var(--mb-gold) 48%, var(--mb-ivory)) !important; }
.plant-stage-thumb-card.is-complete { background: var(--mb-forest-soft) !important; }
.plant-stage-current-chip, #plantCollectionPill { background: var(--mb-gold-soft-2) !important; color: var(--mb-navy) !important; border-color: color-mix(in srgb, var(--mb-gold) 34%, var(--mb-ivory)) !important; }
.pot-mini-preview { background: var(--mb-ivory) !important; border-color: var(--mb-border) !important; }

/* Personalized content stays unique through copy and artwork, with a restrained color system. */
#insightBuddyCard[class*="voice-"] { border-left-color: var(--mb-forest) !important; }
#insightBuddyCard.voice-bella, #insightBuddyCard.voice-barnaby { border-left-color: var(--mb-navy) !important; }
#insightBuddyCard.voice-penny, #insightBuddyCard.voice-buzz, #insightBuddyCard.voice-atlas { border-left-color: var(--mb-gold) !important; }
#moneyBuddyCheckIn, #returnWelcomeCard, #firstRunStarter {
  background: linear-gradient(135deg, var(--mb-ivory), var(--mb-forest-soft)) !important;
  border-color: var(--mb-border) !important;
}
#moneyBuddyCheckInIcon, #buddyNextMoveIcon, #safeToSpendPill { background: var(--mb-forest-soft-2) !important; color: var(--mb-forest) !important; }
#buddyNextMove { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-navy-soft)) !important; border-color: var(--mb-border) !important; }

/* Forms, modals, and transient UI. */
input, select, textarea {
  background: var(--mb-ivory) !important;
  color: var(--mb-navy) !important;
  border-color: var(--mb-border) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--mb-forest) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mb-forest) 14%, transparent) !important;
}
button:focus-visible, [role="button"]:focus-visible, a:focus-visible {
  outline-color: var(--mb-gold) !important;
}
#add-entry-modal-content, #edit-entry-modal-content, #buddy-modal-content,
#sign-in-modal-content, .season-modal-card, .privacy-card,
#moneyBuddyFeedbackModal > div, #atlasUnlockModal .atlas-reveal-card {
  background: var(--mb-ivory) !important;
  color: var(--mb-navy) !important;
  border: 1px solid var(--mb-border) !important;
}
#add-entry-modal, #edit-entry-modal, #buddy-modal, #afford-modal, #bill-modal,
#all-bills-modal, #plant-unlock-modal, #customize-pot-modal,
#net-worth-explainer-modal, #asset-modal, #debt-modal,
#manage-net-worth-modal, #sign-in-modal, #moneybuddyFeedbackModal,
#moneyBuddySeasonModal, #moneyBuddyPrivacyModal, #atlasUnlockModal {
  z-index: 300 !important;
}

/* Buddy picker: compact, structured, and fully contained on phones. */
#buddy-modal { padding: 12px !important; }
#buddy-modal-content {
  width: min(720px, calc(100vw - 24px)) !important;
  max-width: 720px !important;
  max-height: min(74dvh, 650px) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px -34px color-mix(in srgb, var(--mb-navy) 55%, transparent) !important;
}
.buddy-picker-header { padding: 14px 16px 11px !important; border-bottom-color: var(--mb-border) !important; }
.buddy-picker-header h3 { color: var(--mb-navy) !important; }
.buddy-picker-close { background: var(--mb-navy-soft) !important; color: var(--mb-navy) !important; border: 1px solid var(--mb-border) !important; }
.buddy-picker-scroll { padding: 10px 14px 12px !important; }
.buddy-picker-grid { gap: 8px !important; }
.buddy-picker-footer { background: var(--mb-ivory) !important; border-top-color: var(--mb-border) !important; padding: 8px 12px !important; }
.buddy-picker-done { background: var(--mb-forest) !important; color: var(--mb-ivory) !important; border: 0 !important; }

#atlasStreakBanner {
  background: linear-gradient(135deg, var(--mb-ivory), var(--mb-gold-soft)) !important;
  border-color: color-mix(in srgb, var(--mb-gold) 38%, var(--mb-ivory)) !important;
  box-shadow: none !important;
}
#atlasStreakBanner::after { color: color-mix(in srgb, var(--mb-gold) 56%, transparent) !important; }
.atlas-progress-track { background: color-mix(in srgb, var(--mb-navy) 10%, var(--mb-ivory)) !important; }
.atlas-progress-fill { background: linear-gradient(90deg, var(--mb-forest), var(--mb-gold)) !important; }
.atlas-locked { background: var(--mb-gold-soft) !important; border-color: color-mix(in srgb, var(--mb-gold) 38%, var(--mb-ivory)) !important; }
.atlas-lock-overlay { background: var(--mb-navy) !important; color: var(--mb-gold) !important; border-color: var(--mb-gold-soft-2) !important; }
.atlas-legendary-badge { background: var(--mb-gold-soft-2) !important; color: var(--mb-navy) !important; border-color: color-mix(in srgb, var(--mb-gold) 44%, var(--mb-ivory)) !important; }
#atlasUnlockModal .atlas-reveal-card {
  background: radial-gradient(circle at 50% 0%, var(--mb-gold-soft-2), transparent 36%), linear-gradient(160deg, var(--mb-ivory), var(--mb-forest-soft)) !important;
}

/* Keep seasonal art/decor, but the product chrome stays on-brand in every season. */
html[data-season] {
  --season-canvas: var(--mb-ivory) !important;
  --season-accent: var(--mb-forest) !important;
  --season-soft: var(--mb-forest-soft) !important;
  --season-glow: color-mix(in srgb, var(--mb-forest) 15%, transparent) !important;
  --season-particle: var(--mb-gold) !important;
}
html[data-season] body, html[data-season] main { background: var(--mb-ivory) !important; }
html[data-season] #money-plant-section { background: linear-gradient(145deg, var(--mb-ivory), var(--mb-forest-soft)) !important; }
html[data-season] #plantVisualContainer { background: radial-gradient(circle at 46% 28%, var(--mb-ivory), var(--mb-forest-soft) 58%, var(--mb-forest-soft-2)) !important; }
#seasonHeroBadge, .season-header-button, .season-option, .season-option-auto {
  background: var(--mb-ivory) !important;
  color: var(--mb-navy) !important;
  border-color: var(--mb-border) !important;
}
.season-header-button .material-symbols-outlined, .season-option-check { color: var(--mb-gold) !important; }

/* Undo / trust / feedback. */
#moneyBuddyUndoInner { background: var(--mb-navy) !important; color: var(--mb-ivory) !important; border-color: color-mix(in srgb, var(--mb-gold) 20%, var(--mb-navy)) !important; }
#moneyBuddyUndo button { color: var(--mb-gold) !important; background: color-mix(in srgb, var(--mb-ivory) 8%, transparent) !important; border-color: color-mix(in srgb, var(--mb-ivory) 15%, transparent) !important; }
.moneybuddy-trust-link { color: var(--mb-forest) !important; text-decoration-color: color-mix(in srgb, var(--mb-gold) 55%, transparent) !important; }

/* Mobile structure + safe areas. */
#moneyBuddyMobileNav {
  background: color-mix(in srgb, var(--mb-ivory) 96%, transparent) !important;
  border-color: var(--mb-border) !important;
  box-shadow: 0 -12px 30px -26px color-mix(in srgb, var(--mb-navy) 55%, transparent) !important;
  z-index: 70 !important;
}
#moneyBuddyMobileNav button { color: var(--mb-muted) !important; }
#moneyBuddyMobileNav button.mobile-add { background: var(--mb-forest) !important; color: var(--mb-gold) !important; }
#moneyBuddyMobileNav button[aria-current="page"], #moneyBuddyMobileNav button.is-active { color: var(--mb-forest) !important; }

@media (max-width: 767px) {
  #mb-header-inner {
    height: 64px !important;
    min-height: 64px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #mb-header-inner > div:first-child { min-width: 0; flex: 1 1 auto; }
  #mb-header-inner > div:first-child a { min-width: 0; gap: 7px !important; }
  #mb-header-inner > div:first-child a > div:first-child { width: 38px !important; height: 38px !important; }
  .moneybuddy-brand-title {
    max-width: min(42vw, 150px) !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    font-size: 12.5px !important;
    line-height: 1.05 !important;
  }
  #mb-header-inner > div:last-child { flex: 0 0 auto; gap: 6px !important; }
  #mb-header-inner button[onclick="openAddEntryModal()"] { width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important; justify-content: center; }
  #mb-header-inner button[onclick="openAddEntryModal()"] span:last-child { display: none !important; }

  #mb-main-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 14px !important;
    padding-bottom: calc(98px + env(safe-area-inset-bottom)) !important;
  }
  #mb-main-shell > div { gap: 16px !important; }
  #moneybuddy-brand-hero, .moneybuddy-brand-hero-inner { border-radius: 20px !important; }
  #buddyHeroCard, #flexible-money-card, #money-plant-section, #where-it-goes-section,
  #buddy-insight-card, #daily-tip-card, #upcoming-obligations-card,
  #recent-activity-card, #net-worth-section { border-radius: 20px !important; }

  #buddy-modal { padding: 9px !important; align-items: center !important; }
  #buddy-modal-content {
    width: calc(100vw - 18px) !important;
    max-height: min(78dvh, 620px) !important;
    border-radius: 18px !important;
  }
  .buddy-picker-header { padding: 11px 12px 9px !important; }
  .buddy-picker-header h3 { font-size: 20px !important; line-height: 1.08 !important; }
  .buddy-picker-header p { font-size: 10.5px !important; line-height: 1.3 !important; }
  .buddy-picker-scroll { padding: 8px 10px 10px !important; }
  .buddy-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; }
  .buddy-card, .atlas-locked { min-height: 132px !important; padding: 7px !important; border-radius: 14px !important; }
  .buddy-card > div[class*="w-24"], .atlas-locked > div[class*="w-24"] { width: 48px !important; height: 48px !important; }
  .buddy-picker-footer { min-height: 43px !important; padding: 6px 9px calc(6px + env(safe-area-inset-bottom)) !important; }
  .buddy-picker-done { height: 31px !important; min-width: 64px !important; border-radius: 9px !important; font-size: 11px !important; }

  #atlasStreakBanner { padding: 6px 8px !important; margin-bottom: 7px !important; border-radius: 11px !important; }
  #atlasStreakBanner .atlas-banner-layout { gap: 7px !important; }
  #atlasStreakBanner .atlas-banner-icon { width: 26px !important; height: 26px !important; }
  #atlasStreakBanner .atlas-banner-detail { font-size: 8.5px !important; line-height: 1.2 !important; }
  #atlasStreakBanner .atlas-progress-track { height: 4px !important; margin-top: 4px !important; }
  #atlasStreakBanner::after { display: none !important; }
}

@media (max-width: 360px) {
  #mb-header-inner { padding-left: 10px !important; padding-right: 10px !important; }
  .moneybuddy-brand-title { max-width: 118px !important; font-size: 11.5px !important; }
  #mb-main-shell { padding-left: 10px !important; padding-right: 10px !important; }
  #buddy-modal-content { width: calc(100vw - 14px) !important; max-height: 80dvh !important; }
  .buddy-picker-header p { display: none !important; }
  .buddy-card, .atlas-locked { min-height: 126px !important; }
}

/* Atlas micro-details stay inside the four-color system too. */
#atlasStreakBanner .atlas-banner-icon {
  background: var(--mb-gold-soft-2) !important;
  color: var(--mb-navy) !important;
  border-color: color-mix(in srgb, var(--mb-gold) 42%, var(--mb-ivory)) !important;
}
#atlasStreakBanner .atlas-banner-label { color: var(--mb-navy) !important; }
#atlasStreakBanner .atlas-banner-status {
  background: var(--mb-ivory) !important;
  color: var(--mb-navy) !important;
  border-color: color-mix(in srgb, var(--mb-gold) 34%, var(--mb-ivory)) !important;
}
#buddyCardsContainer [data-buddy="atlas"] .font-label-sm { color: var(--mb-navy) !important; }
#atlasUnlockModal .atlas-reveal-card > div:first-child { color: var(--mb-forest) !important; }

/* Final beta palette correction: white canvas, restrained gold/navy/forest accents. */
html, body, main { background: #FFFFFF !important; }
header.sticky { background: rgba(255,255,255,.96) !important; }
#mb-main-shell { background: #FFFFFF !important; }

/* Keep most dashboard surfaces white; tint only enough to create hierarchy. */
.money-summary-card,
#where-it-goes-section,
#buddy-insight-card,
#daily-tip-card,
#upcoming-obligations-card,
#recent-activity-card,
#net-worth-section {
  background: #FFFFFF !important;
  border-color: color-mix(in srgb, #1E2A3A 10%, #FFFFFF) !important;
}
.money-summary-card.money-in-card,
#buddy-insight-card,
#recent-activity-card {
  background: linear-gradient(145deg, #FFFFFF 0%, color-mix(in srgb, #183C35 5%, #FFFFFF) 100%) !important;
}
.money-summary-card.money-out-card,
#upcoming-obligations-card,
#net-worth-section {
  background: linear-gradient(145deg, #FFFFFF 0%, color-mix(in srgb, #1E2A3A 4%, #FFFFFF) 100%) !important;
}
.money-summary-card.savings-card,
#where-it-goes-section,
#daily-tip-card {
  background: linear-gradient(145deg, #FFFFFF 0%, color-mix(in srgb, #C9A24A 7%, #FFFFFF) 100%) !important;
}
#flexible-money-card, #safeToSpendCard {
  background: linear-gradient(145deg, #FFFFFF 0%, color-mix(in srgb, #183C35 6%, #FFFFFF) 100%) !important;
}
#buddyHeroCard {
  background: linear-gradient(145deg, #FFFFFF 0%, color-mix(in srgb, #1E2A3A 4%, #FFFFFF) 100%) !important;
}
#money-plant-section {
  background: linear-gradient(145deg, #FFFFFF 0%, color-mix(in srgb, #183C35 5%, #FFFFFF) 100%) !important;
}

/* Atlas is the deliberate gold exception. */
.buddy-card[data-buddy="atlas"],
.buddy-card[data-buddy="atlas"].atlas-locked {
  background: linear-gradient(150deg, #FFFCF3 0%, color-mix(in srgb, #C9A24A 31%, #FFFFFF) 100%) !important;
  border-color: color-mix(in srgb, #C9A24A 48%, #FFFFFF) !important;
}
#atlasStreakBanner {
  background: linear-gradient(135deg, #FFFFFF 0%, color-mix(in srgb, #C9A24A 16%, #FFFFFF) 100%) !important;
}

/* FINAL LAUNCH PALETTE — restrained white / forest / navy / gold.
   These explicit tints intentionally read more clearly than the earlier near-white mixes. */
:root {
  --mb-card-white: #FFFFFF;
  --mb-card-green: #F0F6F3;
  --mb-card-navy: #F2F5F8;
  --mb-card-gold: #FBF6E8;
  --mb-page: #F8FAF9;
}
html, body, main { background: var(--mb-page) !important; }

#flexible-money-card,
#safeToSpendCard {
  background: linear-gradient(145deg, #FFFFFF 0%, #EEF6F2 100%) !important;
  border-color: rgba(24,60,53,.16) !important;
}
#buddyHeroCard,
#buddyHeroCard[data-buddy] {
  background: linear-gradient(145deg, #FFFFFF 0%, #F1F4F7 100%) !important;
  border-color: rgba(30,42,58,.13) !important;
}
#buddyHeroCard[data-buddy="atlas"] {
  background: linear-gradient(145deg, #FFFFFF 0%, #FBF4DF 100%) !important;
  border-color: rgba(201,162,74,.34) !important;
}

.money-summary-card.money-in-card,
#buddy-insight-card,
#recent-activity-card {
  background: linear-gradient(145deg, #FFFFFF 0%, var(--mb-card-green) 100%) !important;
}
.money-summary-card.money-out-card,
#upcoming-obligations-card,
#net-worth-section {
  background: linear-gradient(145deg, #FFFFFF 0%, var(--mb-card-navy) 100%) !important;
}
.money-summary-card.savings-card,
#where-it-goes-section,
#daily-tip-card {
  background: linear-gradient(145deg, #FFFFFF 0%, var(--mb-card-gold) 100%) !important;
}
#money-plant-section {
  background: linear-gradient(145deg, #FFFFFF 0%, #EFF7F3 100%) !important;
}

/* Keep ordinary controls calm and white; color is reserved for grouping and emphasis. */
#flexible-money-card .bg-surface-container-low,
#flexible-money-card .bg-surface-container\/50,
#where-it-goes-section #whereItGoesContainer > div,
#money-plant-section .plant-status-card,
#upcoming-obligations-card #upcomingBillsContainer > div,
#recent-activity-card #recentActivityContainer > div {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(30,42,58,.08) !important;
}
#net-worth-section > div:last-child > div:nth-child(1) { background: #EFF6F3 !important; }
#net-worth-section > div:last-child > div:nth-child(2) { background: #F1F4F7 !important; }
#net-worth-section > div:last-child > div:nth-child(3) { background: #FBF5E5 !important; }

/* Buddy collection: quiet white cards, with Atlas as the single gold exception. */
.buddy-card[data-buddy] {
  background: #FFFFFF !important;
  border-color: rgba(30,42,58,.10) !important;
}
.buddy-card[data-buddy="sidekick"],
.buddy-card[data-buddy="flora"],
.buddy-card[data-buddy="leo"] { background: #F4F8F6 !important; }
.buddy-card[data-buddy="barnaby"],
.buddy-card[data-buddy="bella"] { background: #F4F6F8 !important; }
.buddy-card[data-buddy="penny"],
.buddy-card[data-buddy="buzz"] { background: #FBF7EC !important; }
.buddy-card[data-buddy="atlas"],
.buddy-card.atlas-locked[data-buddy="atlas"] {
  background: linear-gradient(155deg, #FFFDF8 0%, #F8EDCC 100%) !important;
  border-color: rgba(201,162,74,.56) !important;
}

@media (max-width: 767px) {
  html, body, main { background: #F8FAF9 !important; }
  /* Preserve color grouping on mobile instead of flattening all cards to the same white. */
  .money-summary-card.money-in-card,
  #buddy-insight-card,
  #recent-activity-card { background: linear-gradient(145deg, #FFFFFF, #F0F6F3) !important; }
  .money-summary-card.money-out-card,
  #upcoming-obligations-card,
  #net-worth-section { background: linear-gradient(145deg, #FFFFFF, #F2F5F8) !important; }
  .money-summary-card.savings-card,
  #where-it-goes-section,
  #daily-tip-card { background: linear-gradient(145deg, #FFFFFF, #FBF6E8) !important; }
  #money-plant-section { background: linear-gradient(145deg, #FFFFFF, #EFF7F3) !important; }
}

/* Final Buddy Picker size + Atlas teaser override. Loaded last so it wins over the older compact rules. */
#buddy-modal {
  padding: clamp(18px, 3vh, 32px) !important;
  align-items: center !important;
}
#buddy-modal-content {
  width: min(1080px, calc(100vw - 48px)) !important;
  max-width: 1080px !important;
  max-height: min(88dvh, 860px) !important;
  border-radius: 28px !important;
}
.buddy-picker-header { padding: 22px 26px 16px !important; }
.buddy-picker-header h3 { font-size: 30px !important; line-height: 1.08 !important; }
.buddy-picker-header p { font-size: 14px !important; line-height: 1.45 !important; max-width: 700px !important; }
.buddy-picker-close { width: 40px !important; height: 40px !important; border-radius: 13px !important; }
.buddy-picker-scroll { padding: 14px 22px 18px !important; }
.buddy-picker-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 226px !important;
  gap: 14px !important;
}
.buddy-card, .atlas-locked {
  height: 226px !important;
  min-height: 226px !important;
  max-height: 226px !important;
  padding: 14px !important;
  border-radius: 20px !important;
}
.buddy-card > div[class*="w-24"] { width: 96px !important; height: 96px !important; margin-bottom: 4px !important; }
.buddy-card .font-title-md { font-size: 17px !important; line-height: 1.15 !important; }
.buddy-card .font-label-sm { font-size: 11px !important; }
.buddy-card .font-body-sm { font-size: 12px !important; line-height: 1.35 !important; }
.buddy-card .line-clamp-2 { min-height: 32px !important; }
.buddy-picker-footer { min-height: 58px !important; padding: 10px 22px calc(10px + env(safe-area-inset-bottom)) !important; }
.buddy-picker-done { height: 38px !important; min-width: 90px !important; padding: 0 18px !important; border-radius: 12px !important; font-size: 13px !important; }

/* Locked Atlas: tease the character instead of hiding him completely. */
.buddy-card[data-buddy="atlas"].atlas-locked .atlas-locked-image {
  filter: blur(3px) grayscale(.42) saturate(.58) brightness(.72) contrast(.96) !important;
  opacity: .88 !important;
  transform: scale(1.06) !important;
}
.buddy-card[data-buddy="atlas"].atlas-locked .atlas-art-stage {
  width: 96px !important;
  height: 96px !important;
  flex-basis: 96px !important;
}
.buddy-card[data-buddy="atlas"].atlas-locked .atlas-art-stage::after {
  background: linear-gradient(180deg, rgba(30,42,58,.04), rgba(30,42,58,.15)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.buddy-card[data-buddy="atlas"].atlas-locked .atlas-art-stage::before { content: none !important; }

/* Earned Atlas: always crystal clear. */
.buddy-card[data-buddy="atlas"]:not(.atlas-locked) img,
.buddy-card[data-buddy="atlas"].atlas-unlocked img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 900px) and (min-width: 641px) {
  #buddy-modal-content { width: min(92vw, 880px) !important; max-height: 88dvh !important; }
  .buddy-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: 218px !important; }
  .buddy-card, .atlas-locked { height: 218px !important; min-height: 218px !important; max-height: 218px !important; }
}

@media (max-width: 640px) {
  #buddy-modal { padding: 12px !important; }
  #buddy-modal-content {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    max-height: 88dvh !important;
    border-radius: 22px !important;
  }
  .buddy-picker-header { padding: 16px 16px 12px !important; }
  .buddy-picker-header h3 { font-size: 23px !important; }
  .buddy-picker-header p { display: block !important; font-size: 11.5px !important; line-height: 1.35 !important; }
  .buddy-picker-scroll { padding: 10px 12px 14px !important; }
  .buddy-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 188px !important;
    gap: 10px !important;
  }
  .buddy-card, .atlas-locked {
    height: 188px !important;
    min-height: 188px !important;
    max-height: 188px !important;
    padding: 10px !important;
    border-radius: 17px !important;
  }
  .buddy-card > div[class*="w-24"] { width: 74px !important; height: 74px !important; }
  .buddy-card .font-title-md { font-size: 15px !important; }
  .buddy-card .font-label-sm { font-size: 9.5px !important; }
  .buddy-card .font-body-sm { font-size: 10.5px !important; }
  .buddy-card[data-buddy="atlas"].atlas-locked .atlas-art-stage {
    width: 74px !important;
    height: 74px !important;
    flex-basis: 74px !important;
  }
  .buddy-picker-footer { min-height: 52px !important; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 360px) {
  #buddy-modal-content { width: calc(100vw - 18px) !important; max-height: 89dvh !important; }
  .buddy-picker-grid { grid-auto-rows: 180px !important; gap: 8px !important; }
  .buddy-card, .atlas-locked { height: 180px !important; min-height: 180px !important; max-height: 180px !important; }
  .buddy-card > div[class*="w-24"] { width: 68px !important; height: 68px !important; }
  .buddy-card[data-buddy="atlas"].atlas-locked .atlas-art-stage { width: 68px !important; height: 68px !important; flex-basis: 68px !important; }
}