:root {
  --needs: #4b5f73;
  --wants: #a9695c;
  --invest: #3c7a5c;
  --buffer: #b98a3e;
  --good: #3c7a5c;
  --bad: #8c4a3f;
  --warn: #8a6423;
  --surface: #fff;
  --surface-soft: #faf9f6;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
}

.budget-hero { background: var(--forest-pale); padding: 148px 0 4rem; }
.budget-hero-copy { display: grid; gap: 1.4rem; max-width: 760px; }
.budget-hero h1 { margin: 0; font-family: var(--serif); font-size: clamp(2.6rem, 5.5vw, 4.4rem); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.budget-hero p { margin: 0; color: var(--muted); font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.6; max-width: 640px; }
.budget-hero .proof-rail { margin-top: 2.2rem; background: rgba(255, 255, 255, .5); border-radius: var(--radius-md); border: 1px solid rgba(60, 122, 92, .18); }
.budget-hero .proof-rail > div + div { border-left: 1px solid rgba(60, 122, 92, .18); }

.budget-section { background: var(--cream); padding: 3.5rem 0 6rem; }
.budget-shell { width: min(1320px, calc(100% - 40px)); margin: 0 auto; }

* { box-sizing: border-box; }

.budget-shell button,
.budget-shell input,
.budget-shell select { font: inherit; color: inherit; }

.budget-shell button,
.budget-shell select { cursor: pointer; }

.budget-shell button:focus-visible,
.budget-shell input:focus-visible,
.budget-shell select:focus-visible {
  outline: 3px solid rgba(60, 122, 92, .3);
  outline-offset: 2px;
}

.tool-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.tool-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.tool-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 720;
  font-size: .82rem;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}

.tool-button:hover { border-color: var(--forest); background: var(--forest-pale); transform: translateY(-1px); }

.tool-button.primary { border-color: var(--forest); background: var(--forest); color: var(--white); }
.tool-button.primary:hover { background: var(--forest-deep); }

.tool-button.ghost-danger:hover { border-color: rgba(140, 74, 63, .5); background: rgba(140, 74, 63, .08); color: var(--bad); }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 18px 46px rgba(28, 28, 26, .06);
}

.control-deck { padding: 26px; }

.deck-head,
.section-heading,
.bucket-head,
.mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.deck-head { margin-bottom: 22px; }

.deck-head h2,
.section-heading h2,
.mini-head h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }

.deck-head h2,
.section-heading h2 { font-size: 1.5rem; }

.save-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: var(--faint);
  font-size: .78rem;
}

.save-state::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  content: "";
}

.mode-switch {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
}

.mode-button {
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  background: transparent;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 760;
}

.mode-button.active { background: var(--forest); color: var(--white); }

.input-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 14px;
}

.field { min-width: 0; }

.field label,
.field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--faint);
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.money-input { position: relative; }

.money-input .currency-mark {
  position: absolute;
  top: 50%;
  left: 13px;
  color: var(--faint);
  transform: translateY(-50%);
  pointer-events: none;
}

.budget-shell input,
.budget-shell select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 9px 11px;
}

input[type="number"] { font-variant-numeric: tabular-nums; }

.money-input input { padding-left: 30px; }

.budget-shell input:hover,
.budget-shell select:hover { border-color: var(--forest); }

.income-foot {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.inline-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .82rem;
}

.inline-stat strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.kpi {
  min-height: 128px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.kpi-label {
  margin-bottom: 11px;
  color: var(--faint);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.kpi-value {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.kpi-note { margin-top: 8px; color: var(--faint); font-size: .74rem; }

.positive { color: var(--good) !important; }
.negative { color: var(--bad) !important; }
.warning { color: var(--warn) !important; }

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .72fr);
  gap: 18px;
  align-items: start;
}

.budget-column,
.insight-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.section-card { padding: 24px; }

.section-heading { margin-bottom: 18px; }

.section-heading p { margin: 4px 0 0; color: var(--muted); font-size: .84rem; }

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

.target-field {
  position: relative;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.target-field label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 750;
}

.target-dot { width: 8px; height: 8px; border-radius: 50%; }

.target-number { position: relative; }

.target-number input { min-height: 40px; padding-right: 28px; font-weight: 700; }

.target-number span {
  position: absolute;
  top: 50%;
  right: 11px;
  color: var(--faint);
  transform: translateY(-50%);
}

.target-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--forest-pale);
  color: var(--forest-deep);
  font-size: .8rem;
}

.target-status.invalid { background: rgba(140, 74, 63, .1); color: var(--bad); }

.bucket {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-left-width: 4px;
}

.bucket.needs { border-left-color: var(--needs); }
.bucket.wants { border-left-color: var(--wants); }
.bucket.invest { border-left-color: var(--invest); }
.bucket.buffer { border-left-color: var(--buffer); }

.bucket-head { align-items: flex-start; margin-bottom: 15px; }

.bucket-title-wrap { min-width: 0; }

.bucket-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }

.bucket-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -.01em;
}

.rule-badge {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--faint);
  font-size: .62rem;
  font-weight: 820;
  letter-spacing: .08em;
}

.bucket-subtitle { margin: 4px 0 0; color: var(--faint); font-size: .78rem; }

.bucket-metrics { text-align: right; font-size: .77rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.bucket-metrics strong { display: block; margin-bottom: 3px; color: var(--ink); font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }

.variance-pill {
  display: inline-flex;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--forest-pale);
  color: var(--forest-deep);
  font-size: .68rem;
  font-weight: 760;
}

.variance-pill.bad { background: rgba(140, 74, 63, .1); color: var(--bad); }
.variance-pill.neutral { background: var(--surface-soft); color: var(--muted); border: 1px solid var(--line); }

.progress {
  height: 9px;
  margin-bottom: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.progress-fill { width: 0; height: 100%; border-radius: inherit; transition: width 180ms ease, background 180ms ease; }

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

.expense-row,
.expense-head {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) 145px 130px 38px;
  gap: 9px;
  align-items: center;
}

.expense-head {
  padding: 0 2px;
  color: var(--faint);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.expense-row input,
.expense-row select { min-height: 40px; font-size: .84rem; }

.expense-row .money-input input { padding-left: 28px; }

.remove-button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--faint);
  font-size: 1.25rem;
  line-height: 1;
}

.remove-button:hover { background: rgba(140, 74, 63, .1); color: var(--bad); }

.add-button {
  width: 100%;
  min-height: 42px;
  margin-top: 11px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 720;
  font-size: .84rem;
}

.add-button:hover { border-color: var(--forest); background: var(--forest-pale); color: var(--forest-deep); }

.sticky-stack { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 18px; }

.allocation-visual { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; }

.donut {
  position: relative;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--line) 0 100%);
}

.donut::after {
  position: absolute;
  inset: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  content: "";
}

.donut-center { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; pointer-events: none; }

.donut-center strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; font-variant-numeric: tabular-nums; }

.donut-center span { color: var(--faint); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }

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

.legend-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; color: var(--muted); font-size: .8rem; }

.legend-label { display: flex; align-items: center; gap: 8px; }

.legend-dot { width: 9px; height: 9px; border-radius: 50%; }

.legend-row strong { color: var(--ink); font-variant-numeric: tabular-nums; }

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

.recommendation {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.recommendation strong { display: block; margin-bottom: 3px; font-size: .83rem; color: var(--ink); }

.recommendation p { margin: 0; color: var(--muted); font-size: .77rem; }

.recommendation.good { border-color: rgba(60, 122, 92, .35); background: var(--forest-pale); }
.recommendation.alert { border-color: rgba(140, 74, 63, .32); background: rgba(140, 74, 63, .06); }

.funding-table { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; font-size: .8rem; }

.funding-table span { color: var(--muted); }

.funding-table strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.funding-divider { grid-column: 1 / -1; height: 1px; background: var(--line); }

.small-note { margin: 12px 0 0; color: var(--faint); font-size: .72rem; }

.runway-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }

.runway-callout {
  padding: 13px;
  border-radius: var(--radius-sm);
  background: var(--forest-pale);
  color: var(--forest-deep);
  font-size: .8rem;
}

.runway-callout strong { display: block; margin-bottom: 2px; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; font-variant-numeric: tabular-nums; }

.trend-chart { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.trend-svg { width: 100%; height: 56px; overflow: visible; }
.trend-stats { display: grid; gap: 10px; }
.trend-stats > div { display: grid; gap: 2px; }
.trend-stats span { color: var(--faint); font-size: .62rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.trend-stats strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

.footer-note { margin-top: 20px; color: var(--faint); font-size: .74rem; text-align: center; }

.budget-cta { background: var(--charcoal); color: var(--cream); padding-bottom: 4rem; margin-top: -2px; }
.budget-cta .page-shell { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; padding: clamp(2.4rem, 5vw, 3.5rem); border-radius: 32px; background: rgba(255, 255, 255, .04); }
.budget-cta h2 { margin: 0; font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 400; letter-spacing: -.03em; }
.budget-cta p { margin: .6rem 0 0; color: #aaa89f; max-width: 480px; }
.budget-cta .agency-list { margin-top: 1.3rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1160px) {
  .input-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .main-grid { grid-template-columns: 1fr; }
  .sticky-stack { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .budget-shell { width: min(100% - 24px, 1320px); }
  .tool-topbar, .deck-head, .bucket-head { align-items: stretch; flex-direction: column; }
  .tool-actions { justify-content: flex-start; }
  .input-grid, .income-foot, .kpi-grid, .target-editor, .sticky-stack { grid-template-columns: 1fr 1fr; }
  .expense-head { display: none; }
  .expense-row { grid-template-columns: 1fr 112px 38px; }
  .expense-row select { grid-column: 1 / -1; grid-row: 2; }
  .bucket-metrics { text-align: left; }
  .budget-cta .page-shell { grid-template-columns: 1fr; justify-items: start; }
}

@media (max-width: 560px) {
  .input-grid, .income-foot, .kpi-grid, .target-editor, .sticky-stack, .allocation-visual, .runway-grid { grid-template-columns: 1fr; }
  .mode-switch { width: 100%; }
  .expense-row { grid-template-columns: 1fr 38px; }
  .expense-row .money-input { grid-column: 1; }
  .expense-row select { grid-column: 1; grid-row: auto; }
  .remove-button { grid-column: 2; grid-row: 1 / span 3; }
  .donut { margin: 0 auto; }
}

@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .site-header, .site-footer, .skip-link, .budget-cta, #sidebar-cta,
  .tool-actions, .tool-button, .mode-switch, .add-button,
  .remove-button, .save-state, .footer-note,
  .budget-hero .proof-rail { display: none !important; }

  .budget-hero { padding: 0 0 1.5rem; background: none; }
  .budget-hero-copy { max-width: none; }

  .budget-section { padding: 0; background: #fff; }
  .budget-shell { width: 100%; }

  .panel { box-shadow: none; break-inside: avoid; }
  .kpi { break-inside: avoid; }
  .section-heading { break-after: avoid; }

  .main-grid { grid-template-columns: 1fr; }
  .sticky-stack { position: static; display: grid; grid-template-columns: repeat(2, 1fr); }
}