/* ==========================================================================
   FCC Budget Blueprint Redesign
   Scope: Budget page only
   Visual source: budget-redesign-blueprint.png

   Rules:
   - Scope everything under body.fcc-app-shell-v1 #budget.
   - Do not style unrelated pages.
   - Do not depend on fake data.
   - This file loads after expenses.css and fcc-app-modules-v1.css and wins
     over legacy CSS by source order + the #budget id specificity.

   Note: the hero stat cards (#budgetHeroMount), the Finance Intelligence card,
   Household Context, Upcoming Household Outlook, Budget Coaching, and the
   Category Forecasts grid are injected into #budgetAiPanel by budget.js as
   .budget-, .fcc-household- and .fcc-predictive- elements; the Budget Charts
   band is injected into #fcc-budget-dashboard-root-host by the charts module as
   .fcc-bc- elements (styled dark-navy/blue by budget-charts.css). We do NOT
   touch that JS; we re-skin those elements to the lavender/pink blueprint
   palette here with higher-specificity scoped overrides so they survive the
   innerHTML re-renders and the page reads as one cohesive design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens + containment
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget {
  --fcc-budget-violet: #7c3aed;
  --fcc-budget-violet-strong: #6d28d9;
  --fcc-budget-violet-2: #8b5cf6;
  --fcc-budget-pink: #ec4899;
  --fcc-budget-rose: #fce7f3;
  --fcc-budget-lavender: #f4ebff;
  --fcc-budget-ink: #17132f;
  --fcc-budget-ink-soft: #5b5570;
  --fcc-budget-muted: #6f6a8a;
  --fcc-budget-border: rgba(124, 58, 237, 0.14);
  --fcc-budget-border-strong: rgba(168, 85, 247, 0.24);
  --fcc-budget-card: rgba(255, 255, 255, 0.92);
  --fcc-budget-shadow: 0 20px 60px rgba(83, 45, 128, 0.10), 0 3px 12px rgba(17, 12, 46, 0.05);
  --fcc-budget-shadow-soft: 0 10px 28px rgba(74, 31, 122, 0.07);
  --fcc-budget-ok: #1f9d57;
  --fcc-budget-watch: #b07a08;
  --fcc-budget-risk: #d0291a;

  min-width: 0;
  overflow-x: hidden;
  color: var(--fcc-budget-ink);
}

body.fcc-app-shell-v1 #budget,
body.fcc-app-shell-v1 #budget * {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Hero header band — fcc-app-modules already paints the lavender/pink gradient
   card; here we sharpen the title, copy and the action pills to the blueprint.
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget .budget-header-row {
  /* Override the fcc-app-modules flex with a full-width finance-dashboard hero.
     The app caps page content at ~1180px (minus sidebar), so three in-flow
     columns would starve the title. Instead: a wide left column holds the copy
     (row 1) and the action pills (row 2), and the decorative art spans the
     right column. Title stays prominent; art stays on the right. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 168px);
  grid-template-areas:
    "copy    art"
    "actions art";
  align-items: start;
  gap: clamp(12px, 1.4vw, 18px) clamp(16px, 2vw, 28px);
  padding: clamp(22px, 2.4vw, 30px);
  position: relative;
  overflow: hidden;
}
body.fcc-app-shell-v1 #budget .budget-header-copy {
  grid-area: copy;
  min-width: 0;
  text-align: left;
}
body.fcc-app-shell-v1 #budget .budget-header-copy > * {
  text-align: left;
}
body.fcc-app-shell-v1 #budget .budget-header-actions-toolbar {
  grid-area: actions;
  justify-content: flex-start;
  align-content: flex-start;
}

/* --------------------------------------------------------------------------
   Decorative soft finance illustration (right of hero). Pure CSS + emoji,
   aria-hidden, pointer-events none so it can never block the action pills.
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget .fcc-budget-hero-art {
  grid-area: art;
  position: relative;
  align-self: center;
  justify-self: end;
  min-height: 130px;
  width: 100%;
  max-width: 168px;
  pointer-events: none;
  user-select: none;
}
body.fcc-app-shell-v1 #budget .fcc-budget-hero-art > * {
  position: absolute;
  pointer-events: none;
}
body.fcc-app-shell-v1 #budget .fcc-budget-art-orb-a {
  top: -6px;
  right: 6px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(236, 72, 153, 0.34), rgba(236, 72, 153, 0.06) 70%);
  filter: blur(2px);
}
body.fcc-app-shell-v1 #budget .fcc-budget-art-orb-b {
  bottom: -10px;
  right: 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(139, 92, 246, 0.32), rgba(124, 58, 237, 0.05) 70%);
  filter: blur(1px);
}
body.fcc-app-shell-v1 #budget .fcc-budget-art-card {
  top: 26px;
  right: 28px;
  display: grid;
  place-items: center;
  width: 84px;
  height: 58px;
  font-size: 30px;
  line-height: 1;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 235, 255, 0.92));
  border: 1px solid var(--fcc-budget-border-strong);
  box-shadow: 0 12px 26px rgba(124, 58, 237, 0.20);
  transform: rotate(-7deg);
}
body.fcc-app-shell-v1 #budget .fcc-budget-art-coin {
  bottom: 8px;
  right: 96px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 16px;
  color: var(--fcc-budget-violet-2);
  border-radius: 50%;
  background: linear-gradient(135deg, #fff7fb, #fbe9ff);
  border: 1px solid var(--fcc-budget-border-strong);
  box-shadow: 0 8px 16px rgba(236, 72, 153, 0.18);
}

/* Keep the full page shell wide (no narrow centered modal). */
body.fcc-app-shell-v1 #budget .budget-page-shell {
  width: min(100%, 1560px);
  max-width: 1560px;
  margin-inline: auto;
  min-width: 0;
}
body.fcc-app-shell-v1 #budget .budget-page-title {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
body.fcc-app-shell-v1 #budget .budget-page-subtitle {
  margin: 8px 0 0;
  color: var(--fcc-budget-ink-soft);
  font-size: 0.97rem;
  line-height: 1.5;
}
body.fcc-app-shell-v1 #budget .budget-header-month {
  margin: 6px 0 0;
  color: var(--fcc-budget-muted);
  font-weight: 700;
}

/* Header / workspace action pills (secondary = white pill). */
body.fcc-app-shell-v1 #budget .budget-header-actions-toolbar .btn-secondary,
body.fcc-app-shell-v1 #budget .budget-lines-workspace-actions .btn-secondary,
body.fcc-app-shell-v1 #budget .budget-category-header .btn-secondary {
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.22);
  background: rgba(255, 255, 255, 0.88);
  color: var(--fcc-budget-violet-strong);
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.08);
}
body.fcc-app-shell-v1 #budget .budget-header-actions-toolbar .btn-secondary:hover,
body.fcc-app-shell-v1 #budget .budget-lines-workspace-actions .btn-secondary:hover,
body.fcc-app-shell-v1 #budget .budget-category-header .btn-secondary:hover {
  background: rgba(124, 58, 237, 0.08);
}

/* Add Budget Line is the prominent action → violet→pink gradient pill.
   Listed after the white-pill rule so it wins on equal specificity. */
body.fcc-app-shell-v1 #budget .budget-header-actions-toolbar .fcc-budget-line-add-btn,
body.fcc-app-shell-v1 #budget .budget-lines-workspace-actions .fcc-budget-line-add-btn,
body.fcc-app-shell-v1 #budget .fcc-budget-lines-footer-actions .fcc-budget-line-add-btn {
  border: 0;
  color: #ffffff;
  font-weight: 800;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--fcc-budget-violet), var(--fcc-budget-pink));
  box-shadow: 0 12px 24px rgba(124, 58, 237, 0.24);
}

/* --------------------------------------------------------------------------
   Hero stat band (JS #budgetHeroMount) — household label + 4 stat tiles
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget .budget-hero-card {
  background: var(--fcc-budget-card);
  border: 1px solid var(--fcc-budget-border);
  border-radius: 26px;
  box-shadow: var(--fcc-budget-shadow);
  backdrop-filter: blur(16px);
  padding: clamp(18px, 2vw, 24px);
}
body.fcc-app-shell-v1 #budget .budget-hero-household {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fcc-budget-muted);
}
body.fcc-app-shell-v1 #budget .budget-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
body.fcc-app-shell-v1 #budget .budget-hero-stat {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--fcc-budget-border);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(244, 235, 255, 0.62), rgba(252, 231, 243, 0.42));
  box-shadow: var(--fcc-budget-shadow-soft);
}
body.fcc-app-shell-v1 #budget .budget-hero-stat-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fcc-budget-muted);
}
body.fcc-app-shell-v1 #budget .budget-hero-stat-value {
  margin-top: 8px;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fcc-budget-ink);
}
body.fcc-app-shell-v1 #budget .budget-hero-stat-value.is-negative {
  color: var(--fcc-budget-risk);
}

/* --------------------------------------------------------------------------
   Shared card chrome — JS intelligence cards + static section cards
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget .budget-intelligence-card,
body.fcc-app-shell-v1 #budget .fcc-household-context-card,
body.fcc-app-shell-v1 #budget .fcc-predictive-outlook-card,
body.fcc-app-shell-v1 #budget .budget-coaching-card,
body.fcc-app-shell-v1 #budget #budgetLinesCard,
body.fcc-app-shell-v1 #budget #budgetManageCard,
body.fcc-app-shell-v1 #budget .budget-page-shell > .section-card {
  background: var(--fcc-budget-card);
  border: 1px solid var(--fcc-budget-border);
  border-radius: 26px;
  box-shadow: var(--fcc-budget-shadow);
  backdrop-filter: blur(16px);
  padding: clamp(20px, 2vw, 26px);
}

body.fcc-app-shell-v1 #budget .section-title,
body.fcc-app-shell-v1 #budget .budget-section-title,
body.fcc-app-shell-v1 #budget .budget-intelligence-title,
body.fcc-app-shell-v1 #budget .fcc-household-context-title,
body.fcc-app-shell-v1 #budget .fcc-predictive-outlook-title,
body.fcc-app-shell-v1 #budget .budget-coaching-title {
  margin-top: 0;
  color: var(--fcc-budget-ink);
  font-weight: 850;
  letter-spacing: -0.02em;
}
body.fcc-app-shell-v1 #budget .muted {
  color: var(--fcc-budget-muted);
}

/* --------------------------------------------------------------------------
   Analytics stack — pair Household Context + Upcoming Outlook side by side.
   Everything else in the stack spans the full width. Robust against missing
   cards (auto-flow), unlike nth-child, since context/outlook can be absent.
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget .budget-analytics-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
body.fcc-app-shell-v1 #budget .budget-analytics-stack > * {
  grid-column: 1 / -1;
  min-width: 0;
}
body.fcc-app-shell-v1 #budget .budget-analytics-stack > .fcc-household-context-card,
body.fcc-app-shell-v1 #budget .budget-analytics-stack > .fcc-predictive-outlook-card {
  grid-column: span 1;
}

/* --------------------------------------------------------------------------
   Finance Intelligence card
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget .budget-intelligence-head,
body.fcc-app-shell-v1 #budget .fcc-household-context-head,
body.fcc-app-shell-v1 #budget .fcc-predictive-outlook-head,
body.fcc-app-shell-v1 #budget .budget-coaching-head,
body.fcc-app-shell-v1 #budget .budget-section-header,
body.fcc-app-shell-v1 #budget .budget-lines-workspace-head,
body.fcc-app-shell-v1 #budget .budget-category-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
body.fcc-app-shell-v1 #budget .budget-intelligence-title {
  font-size: 1.18rem;
}
body.fcc-app-shell-v1 #budget .budget-intelligence-subtitle,
body.fcc-app-shell-v1 #budget .fcc-household-context-sub,
body.fcc-app-shell-v1 #budget .fcc-predictive-outlook-sub,
body.fcc-app-shell-v1 #budget .budget-coaching-sub,
body.fcc-app-shell-v1 #budget .budget-section-subtitle {
  margin: 4px 0 0;
  color: var(--fcc-budget-muted);
}
body.fcc-app-shell-v1 #budget .budget-intelligence-summary {
  margin: 0 0 6px;
  color: var(--fcc-budget-ink-soft);
  font-size: 0.97rem;
  line-height: 1.55;
}

/* Text buttons (View all forecasts / Details / Not now) → violet pill links. */
body.fcc-app-shell-v1 #budget .budget-text-button {
  background: none;
  border: 0;
  color: var(--fcc-budget-violet-strong);
  font-weight: 800;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
}
body.fcc-app-shell-v1 #budget .budget-text-button:hover {
  background: rgba(124, 58, 237, 0.08);
}

/* Spending-pressure list. */
body.fcc-app-shell-v1 #budget .budget-finance-intel-pressure-list {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
body.fcc-app-shell-v1 #budget .budget-finance-intel-pressure-item {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--fcc-budget-border);
  background: rgba(244, 235, 255, 0.4);
  border-left: 4px solid var(--fcc-budget-ok);
}
body.fcc-app-shell-v1 #budget .budget-finance-intel-pressure-item.tone-medium {
  border-left-color: var(--fcc-budget-watch);
}
body.fcc-app-shell-v1 #budget .budget-finance-intel-pressure-item.tone-high {
  border-left-color: var(--fcc-budget-risk);
}
body.fcc-app-shell-v1 #budget .budget-finance-intel-pressure-top {
  font-weight: 800;
  color: var(--fcc-budget-ink);
}
body.fcc-app-shell-v1 #budget .budget-finance-intel-pressure-metrics {
  margin-top: 4px;
  color: var(--fcc-budget-muted);
}

/* Status chips (Stable / Watch / At Risk / Seasonal / Avg. confidence) + the
   per-card chip rows (Confidence / Volatility / entries) + context chips. */
body.fcc-app-shell-v1 #budget .budget-intelligence-chips,
body.fcc-app-shell-v1 #budget .budget-chip-row,
body.fcc-app-shell-v1 #budget .fcc-household-context-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
body.fcc-app-shell-v1 #budget .budget-chip,
body.fcc-app-shell-v1 #budget .fcc-context-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  background: rgba(124, 58, 237, 0.08);
  color: var(--fcc-budget-violet-strong);
  border: 1px solid rgba(124, 58, 237, 0.14);
}

/* Finance-intelligence quick-action tabs (Review Expenses / Monthly categories
   / Budget lines / Alerts & thresholds) → rounded pill row. */
body.fcc-app-shell-v1 #budget .budget-finance-intel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
body.fcc-app-shell-v1 #budget .budget-finance-intel-action {
  border-radius: 999px;
  border: 1px solid rgba(124, 58, 237, 0.2);
  background: rgba(255, 255, 255, 0.86);
  color: var(--fcc-budget-violet-strong);
  font-weight: 800;
}
body.fcc-app-shell-v1 #budget .budget-finance-intel-action:hover {
  background: rgba(124, 58, 237, 0.08);
}

/* --------------------------------------------------------------------------
   Household Context + Upcoming Household Outlook — confidence / risk badges
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget .fcc-household-context-lead,
body.fcc-app-shell-v1 #budget .fcc-predictive-outlook-lead {
  margin: 0 0 6px;
  color: var(--fcc-budget-ink-soft);
  line-height: 1.55;
}
body.fcc-app-shell-v1 #budget .fcc-context-confidence,
body.fcc-app-shell-v1 #budget .fcc-predictive-risk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
body.fcc-app-shell-v1 #budget .fcc-context-confidence--low,
body.fcc-app-shell-v1 #budget .fcc-predictive-risk--low {
  background: rgba(52, 199, 89, 0.14);
  color: var(--fcc-budget-ok);
}
body.fcc-app-shell-v1 #budget .fcc-context-confidence--medium,
body.fcc-app-shell-v1 #budget .fcc-predictive-risk--medium {
  background: rgba(255, 204, 0, 0.18);
  color: var(--fcc-budget-watch);
}
body.fcc-app-shell-v1 #budget .fcc-context-confidence--high,
body.fcc-app-shell-v1 #budget .fcc-predictive-risk--high {
  background: rgba(255, 59, 48, 0.12);
  color: var(--fcc-budget-risk);
}
body.fcc-app-shell-v1 #budget .fcc-household-context-bullets {
  margin: 12px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
body.fcc-app-shell-v1 #budget .fcc-household-context-li {
  color: var(--fcc-budget-ink-soft);
}
body.fcc-app-shell-v1 #budget .fcc-household-context-details,
body.fcc-app-shell-v1 #budget .fcc-predictive-outlook-details {
  margin-top: 12px;
  border-top: 1px solid var(--fcc-budget-border);
  padding-top: 10px;
}
body.fcc-app-shell-v1 #budget .fcc-household-context-summary,
body.fcc-app-shell-v1 #budget .fcc-predictive-outlook-summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--fcc-budget-violet-strong);
}
body.fcc-app-shell-v1 #budget .fcc-household-context-actions,
body.fcc-app-shell-v1 #budget .fcc-predictive-outlook-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.fcc-app-shell-v1 #budget .fcc-predictive-tl {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

/* --------------------------------------------------------------------------
   Budget Coaching band — subtle lavender accent
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget .budget-coaching-card {
  background: linear-gradient(135deg, rgba(250, 245, 255, 0.96), rgba(252, 231, 243, 0.9));
  border-color: rgba(236, 72, 153, 0.16);
}
body.fcc-app-shell-v1 #budget .budget-coaching-empty {
  margin: 4px 0 0;
  color: var(--fcc-budget-muted);
}

/* --------------------------------------------------------------------------
   Category Forecasts — plain section header + responsive card grid
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget #budgetForecastSection {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
body.fcc-app-shell-v1 #budget .budget-section-title {
  font-size: 1.18rem;
}
body.fcc-app-shell-v1 #budget .budget-forecast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
body.fcc-app-shell-v1 #budget .budget-forecast-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--fcc-budget-border);
  border-radius: 22px;
  background: var(--fcc-budget-card);
  box-shadow: var(--fcc-budget-shadow-soft);
  border-top: 4px solid var(--fcc-budget-ok);
}
body.fcc-app-shell-v1 #budget .budget-forecast-card.tone-medium {
  border-top-color: var(--fcc-budget-watch);
}
body.fcc-app-shell-v1 #budget .budget-forecast-card.tone-high {
  border-top-color: var(--fcc-budget-risk);
}
body.fcc-app-shell-v1 #budget .budget-forecast-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.fcc-app-shell-v1 #budget .budget-forecast-title {
  font-weight: 850;
  font-size: 1.05rem;
  color: var(--fcc-budget-ink);
}
body.fcc-app-shell-v1 #budget .budget-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
body.fcc-app-shell-v1 #budget .budget-status-pill.risk-low {
  background: rgba(52, 199, 89, 0.14);
  color: var(--fcc-budget-ok);
}
body.fcc-app-shell-v1 #budget .budget-status-pill.risk-medium {
  background: rgba(255, 204, 0, 0.18);
  color: var(--fcc-budget-watch);
}
body.fcc-app-shell-v1 #budget .budget-status-pill.risk-high {
  background: rgba(255, 59, 48, 0.12);
  color: var(--fcc-budget-risk);
}
body.fcc-app-shell-v1 #budget .budget-trend-label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--fcc-budget-muted);
}
body.fcc-app-shell-v1 #budget .budget-metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
body.fcc-app-shell-v1 #budget .budget-metric-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(244, 235, 255, 0.45);
}
body.fcc-app-shell-v1 #budget .budget-metric-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fcc-budget-muted);
}
body.fcc-app-shell-v1 #budget .budget-metric-value {
  font-size: 1.02rem;
  font-weight: 850;
  color: var(--fcc-budget-ink);
}
body.fcc-app-shell-v1 #budget .budget-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.1);
  overflow: hidden;
}
body.fcc-app-shell-v1 #budget .budget-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--fcc-budget-violet), var(--fcc-budget-pink));
}
body.fcc-app-shell-v1 #budget .budget-card-footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
body.fcc-app-shell-v1 #budget .budget-show-all-wrap {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Budget Lines + Manage Budget Categories
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget .fcc-budget-lines-footer-actions {
  margin-top: 14px;
}
body.fcc-app-shell-v1 #budget #budgetManageCard .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
body.fcc-app-shell-v1 #budget .inline-field-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
body.fcc-app-shell-v1 #budget .inline-field-group .fcc-ios-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Inputs / selects */
body.fcc-app-shell-v1 #budget label,
body.fcc-app-shell-v1 #budget .fcc-ios-label {
  color: rgba(23, 19, 47, 0.74);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.01em;
}
body.fcc-app-shell-v1 #budget input,
body.fcc-app-shell-v1 #budget select,
body.fcc-app-shell-v1 #budget textarea {
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--fcc-budget-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
body.fcc-app-shell-v1 #budget input:focus,
body.fcc-app-shell-v1 #budget select:focus,
body.fcc-app-shell-v1 #budget textarea:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.52);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.12);
}

/* --------------------------------------------------------------------------
   Monthly Budget by Category table
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
body.fcc-app-shell-v1 #budget thead th {
  color: var(--fcc-budget-violet);
  background: rgba(124, 58, 237, 0.07);
  font-size: 12px;
  text-align: left;
  letter-spacing: 0.01em;
}
body.fcc-app-shell-v1 #budget tbody td {
  border-top: 1px solid rgba(124, 58, 237, 0.1);
}
body.fcc-app-shell-v1 #budget .table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   Budget Charts band (JS .fcc-bc-*) — re-skin dark navy → light lavender/pink
   -------------------------------------------------------------------------- */
body.fcc-app-shell-v1 #budget .fcc-bc-hero {
  background: linear-gradient(135deg, rgba(250, 245, 255, 0.98), rgba(252, 231, 243, 0.94));
  border: 1px solid rgba(236, 72, 153, 0.16);
  box-shadow: var(--fcc-budget-shadow);
}
body.fcc-app-shell-v1 #budget .fcc-bc-hero-glow {
  background: radial-gradient(ellipse at 80% 16%, rgba(236, 72, 153, 0.16) 0%, transparent 58%);
}
body.fcc-app-shell-v1 #budget .fcc-bc-hero-label,
body.fcc-app-shell-v1 #budget .fcc-bc-hero-meta,
body.fcc-app-shell-v1 #budget .fcc-bc-hero-budget-copy {
  color: var(--fcc-budget-muted);
}
body.fcc-app-shell-v1 #budget .fcc-bc-hero-amount {
  color: var(--fcc-budget-ink);
}
body.fcc-app-shell-v1 #budget .fcc-bc-insight-card,
body.fcc-app-shell-v1 #budget .fcc-bc-card {
  border: 1px solid var(--fcc-budget-border);
  box-shadow: var(--fcc-budget-shadow-soft);
}
body.fcc-app-shell-v1 #budget .fcc-bc-insight-label {
  color: var(--fcc-budget-violet);
}
body.fcc-app-shell-v1 #budget .fcc-bc-insight-value,
body.fcc-app-shell-v1 #budget .fcc-bc-card-title {
  color: var(--fcc-budget-ink);
}
body.fcc-app-shell-v1 #budget .fcc-bc-delta--up {
  background: rgba(255, 59, 48, 0.12);
  color: var(--fcc-budget-risk);
}
body.fcc-app-shell-v1 #budget .fcc-bc-delta--down {
  background: rgba(52, 199, 89, 0.14);
  color: var(--fcc-budget-ok);
}
body.fcc-app-shell-v1 #budget .fcc-bc-retry-btn {
  background: linear-gradient(135deg, var(--fcc-budget-violet), var(--fcc-budget-pink));
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  body.fcc-app-shell-v1 #budget .budget-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.fcc-app-shell-v1 #budget .budget-analytics-stack {
    grid-template-columns: 1fr;
  }
  body.fcc-app-shell-v1 #budget .budget-analytics-stack > .fcc-household-context-card,
  body.fcc-app-shell-v1 #budget .budget-analytics-stack > .fcc-predictive-outlook-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body.fcc-app-shell-v1 #budget #budgetManageCard .form-grid {
    grid-template-columns: 1fr;
  }
  body.fcc-app-shell-v1 #budget .budget-lines-workspace-actions,
  body.fcc-app-shell-v1 #budget .budget-lines-workspace-actions .btn-secondary {
    width: 100%;
  }
  /* Collapse the hero to a single column (copy over actions) and float the art
     as a faded top-right decoration so it never squeezes the title or blocks
     the action pills. */
  body.fcc-app-shell-v1 #budget .budget-header-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "actions";
  }
  body.fcc-app-shell-v1 #budget .fcc-budget-hero-art {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 138px;
    max-width: 138px;
    min-height: 0;
    height: 88px;
    opacity: 0.5;
  }
}

@media (max-width: 520px) {
  body.fcc-app-shell-v1 #budget .fcc-budget-hero-art {
    display: none;
  }
  body.fcc-app-shell-v1 #budget .budget-hero-stats {
    grid-template-columns: 1fr;
  }
  body.fcc-app-shell-v1 #budget .budget-metric-row {
    grid-template-columns: 1fr;
  }
  body.fcc-app-shell-v1 #budget .budget-intelligence-card,
  body.fcc-app-shell-v1 #budget .fcc-household-context-card,
  body.fcc-app-shell-v1 #budget .fcc-predictive-outlook-card,
  body.fcc-app-shell-v1 #budget .budget-coaching-card,
  body.fcc-app-shell-v1 #budget #budgetLinesCard,
  body.fcc-app-shell-v1 #budget #budgetManageCard,
  body.fcc-app-shell-v1 #budget .budget-page-shell > .section-card {
    border-radius: 20px;
    padding: 18px;
  }
}