/* Category colors stay local to Home tiles and their matching workspace hero. */
.home-hub .purpose-card[data-action="spending"],
.spending-balance,
.spending-breakdown,
.allocation-row-heading > .badge.orange {
  --category-color: #b44708;
  --category-card-end: #9a3805;
  --category-soft: #fdf0e0;
  --category-card-text: #fff0e5;
}
.home-hub .purpose-card[data-action="bills"],
.bills-balance-card,
.allocation-row-heading > .badge.blue {
  --category-color: #245fbd;
  --category-card-end: #194991;
  --category-soft: #e8f0fd;
  --category-card-text: #e9f2ff;
}
.home-hub .purpose-card[data-action="savings"],
.savings-balance,
.allocation-row-heading > .badge.green {
  --category-color: #177548;
  --category-card-end: #105c37;
  --category-soft: #e9f6ea;
  --category-card-text: #e6f5ec;
}
.home-hub .purpose-card[data-action="portfolio"],
.portfolio-balance,
.allocation-row-heading > .badge.purple {
  --category-color: #393735;
  --category-card-end: #202020;
  --category-soft: #efedeb;
  --category-card-text: #f5f3f0;
}

.home-hub .purpose-card .tile,
.spending-breakdown .tile,
.allocation-row-heading > .badge:is(.orange, .blue, .green, .purple) {
  background: var(--category-soft);
  color: var(--category-color);
}

.balance-card:is(.spending-balance, .bills-balance-card, .savings-balance, .portfolio-balance) {
  background: linear-gradient(180deg, var(--category-color) 0%, var(--category-card-end) 100%);
  color: #fff;
}
.balance-card:is(.spending-balance, .bills-balance-card, .savings-balance, .portfolio-balance) .balance-value {
  color: #fff;
}
.balance-card:is(.spending-balance, .bills-balance-card, .savings-balance, .portfolio-balance) :is(.balance-label, .balance-note, .balance-foot, .bills-summary-period) {
  color: var(--category-card-text);
}
.balance-card:is(.bills-balance-card, .portfolio-balance) .cardnum .pill {
  background: #ffffff1a;
  color: #fff;
}
.portfolio-balance .cardnum .pill svg:first-child {
  color: var(--category-card-text);
}

/* Matching spacers keep workspace titles centered with a comfortable back target. */
.subpage-nav .icon-button { width: 44px; height: 44px; flex: none; }
.subpage-nav-spacer { width: 44px; height: 44px; flex: none; }