:root {
  --paper: #f6f5f0;
  --card: #fffefb;
  --ink: #283d33;
  --muted: #667264;
  --green: #244d3d;
  --green-dark: #1a3b2d;
  --green-light: #eaf0e4;
  --line: #e9e9df;
  --sand: #f5eedb;
  --amber: #886726;
  --danger: #ab5345;
  --danger-bg: #faeee9;
  --radius: 20px;
  --shadow: 0 5px 24px #263d3104;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; scrollbar-gutter: stable; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, select { cursor: pointer; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
button:disabled, fieldset:disabled button, fieldset:disabled input { cursor: not-allowed; opacity: .48; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #aec797; outline-offset: 3px; }
input, select { min-width: 0; }
fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 29px; line-height: 1.35; font-weight: 650; letter-spacing: -.8px; }
h2 { font-size: 16px; font-weight: 620; letter-spacing: -.3px; }
ul { padding: 0; margin: 0; list-style: none; }
svg.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.muted { color: var(--muted); }
.full-width { grid-column: 1 / -1; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; width: 224px; padding: 37px 22px 27px; background: #f0f1e9; border-right: 1px solid #e7e8dd; display: flex; flex-direction: column; }
.brand { display: flex; gap: 11px; align-items: center; margin: 0 3px; }
.brand img { flex: 0 0 auto; width: 42px; height: 42px; }
.brand strong { display: block; font-size: 20px; font-weight: 650; letter-spacing: .5px; }
.brand small { display: block; font-size: 12px; margin-top: 1px; color: #868b7e; letter-spacing: .4px; white-space: nowrap; }
.main-nav { display: flex; flex-direction: column; gap: 8px; margin-top: 57px; }
.nav-link { display: flex; position: relative; align-items: center; min-height: 49px; gap: 14px; padding: 12px 19px; border-radius: 12px; color: #7a8274; font-size: 14px; font-weight: 550; transition: background .16s, color .16s; }
.nav-link:hover { background: #e8ebdf; color: var(--green); }
.nav-link.is-active { background: var(--green); color: #fff; box-shadow: 0 4px 10px #254d3d12; }
.nav-link .icon { width: 18px; height: 18px; }
.nav-count { margin-left: auto; padding: 0 6px; min-width: 19px; height: 19px; border-radius: 7px; text-align: center; background: #dedbbd; color: #605e33; font-size: 12px; line-height: 19px; }
.nav-link.is-active .nav-count { background: #f0edc7; }
.sidebar-footer { margin-top: auto; padding: 48px 16px 0; font-size: 12px; color: #8b9386; }
.sidebar-footer p { font-size: 12px; margin-bottom: 4px; color: #777f70; }
.little-garden { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid #dce1cd; border-radius: 50%; margin-bottom: 15px; color: #96a779; transform: rotate(-13deg); }
.main { margin-left: 224px; max-width: 1600px; padding: 35px 42px 35px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 32px; min-height: 62px; }
.eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; color: #87917e; font-size: 12px; letter-spacing: 1.5px; font-weight: 550; }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #9fae82; }
.topbar-actions { display: flex; gap: 14px; align-items: center; }
.month-control { display: flex; gap: 2px; align-items: center; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 3px; }
.month-control input { background: transparent; border: 0; padding: 3px 1px; width: 129px; font-size: 13px; font-weight: 550; }
.month-control input::-webkit-calendar-picker-indicator { opacity: .38; cursor: pointer; margin-left: 0; width: 13px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 7px; background: transparent; border-radius: 8px; color: #7d8777; flex-shrink: 0; transition: background .16s; }
.icon-button:hover { color: var(--green); background: var(--green-light); }
.icon-button .icon { width: 16px; height: 16px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 10px 17px; border-radius: 11px; border: 1px solid transparent; font-size: 12px; font-weight: 570; line-height: 1.5; white-space: nowrap; transition: background .16s, border-color .16s, transform .16s; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button .icon { width: 16px; height: 16px; }
.button-primary { background: var(--green); color: #fff; }
.button-primary:hover:not(:disabled) { background: var(--green-dark); }
.button-secondary { background: var(--card); border-color: #dedfd4; color: #5a6755; }
.button-secondary:hover:not(:disabled) { background: var(--green-light); border-color: #cdd6c2; }
.button-small { min-height: 35px; padding: 7px 12px; font-size: 12px; }
.text-button { display: inline-flex; align-items: center; gap: 6px; background: transparent; padding: 4px 0; color: #607657; font-size: 12px; font-weight: 550; white-space: nowrap; }
.text-button .icon { width: 14px; height: 14px; }
.text-button:hover { color: var(--green-dark); }
.sync-button.is-loading .icon { animation: spin 1.6s linear infinite; }
.section-kicker { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; min-height: 26px; }
.section-kicker > p { font-size: 13px; color: #697462; }
.section-kicker > span { font-size: 12px; color: #949b8c; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.overview-metrics { display: grid; grid-template-columns: 1.48fr 1fr 1fr; gap: 17px; }
.spending-card { position: relative; overflow: hidden; border-radius: var(--radius); padding: 23px 27px 19px; background: var(--green); color: #f8f7ee; min-height: 218px; }
.metric-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: #84907d; }
.spending-card .metric-heading { color: #c9d3be; }
.spending-card .metric-heading .icon { opacity: .6; }
.hero-amount { position: relative; z-index: 1; font-size: clamp(31px, 3.4vw, 46px); line-height: 1.25; font-weight: 540; letter-spacing: -1.6px; margin: 21px 0 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hero-budget-line { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; font-size: 12px; color: #c2cfb8; min-height: 16px; }
.hero-budget-line strong { font-size: 12px; font-weight: 450; white-space: nowrap; }
.progress { display: block; width: 100%; height: 5px; background: #eeefe5; border-radius: 5px; overflow: hidden; }
.progress > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: #92ac75; transition: width .45s ease; }
.hero-progress { position: relative; z-index: 1; margin-top: 9px; background: #54705a; height: 4px; }
.hero-progress > span { background: #c7d8a4; }
.hero-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #6d886833; margin-top: 15px; padding-top: 10px; color: #a7b99b; font-size: 12px; }
.hero-leaf { position: absolute; width: 118px; height: 118px; right: -10px; bottom: 34px; transform: rotate(10deg); fill: none; stroke: #7c9d66; stroke-width: .7px; stroke-linecap: round; stroke-linejoin: round; opacity: .2; pointer-events: none; }
.metric-card { padding: 24px 22px 17px; display: flex; flex-direction: column; }
.metric-symbol { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; }
.metric-symbol .icon { width: 15px; height: 15px; }
.mint { background: #edf2e8; color: #789268; }
.sand { background: #f3edda; color: #ac9764; }
.metric-amount { font-size: clamp(26px, 2.45vw, 34px); font-weight: 520; font-variant-numeric: tabular-nums; letter-spacing: -1px; margin-top: 21px; line-height: 1.3; overflow-wrap: anywhere; }
.metric-amount.is-unset { font-size: 25px; letter-spacing: -.4px; color: #6e7c66; }
.metric-description { color: #9a9e90; font-size: 12px; margin-top: 9px; }
.metric-action { margin-top: auto; padding-top: 19px; }
.pending-card { background: #fcfbf5; }
.income-card { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 15px 25px; border-radius: 13px; background: #f0f2e8; border-color: #e7eadd; box-shadow: none; }
.income-card > div { display: flex; align-items: center; gap: 19px; }
.income-card span { font-size: 12px; }
.income-card strong { font-size: 19px; font-weight: 560; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.income-card p { font-size: 12px; color: #97a089; }
.overview-columns { margin-top: 23px; display: grid; grid-template-columns: 1fr 1.65fr; gap: 22px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
.card-heading p { font-size: 12px; color: #a0a395; margin-top: 5px; }
.category-overview, .recent-card { padding: 24px; }
.category-chart-list { display: grid; gap: 22px; }
.category-bar-heading { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 8px; }
.category-bar-heading strong { margin-left: auto; font-size: 12px; font-weight: 570; font-variant-numeric: tabular-nums; }
.category-dot { width: 7px; height: 7px; background: #8ca17b; border-radius: 50%; flex-shrink: 0; }
.category-bar .progress { height: 5px; }
.category-chart-caption { font-size: 12px; color: #a2a795; margin-top: 21px; }
.transaction-list > li + li { border-top: 1px solid #f0f0e9; }
.transaction-row { width: 100%; display: grid; align-items: center; grid-template-columns: minmax(160px, 1fr) 95px 110px 130px; gap: 15px; padding: 17px 24px; background: transparent; text-align: left; border-radius: 9px; transition: background .15s; }
.transaction-row:hover { background: #f6f7ef; }
.merchant-cell { display: flex; min-width: 0; align-items: center; gap: 12px; }
.merchant-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; border-radius: 11px; font-size: 12px; font-weight: 570; background: #ecf1e5; color: #738e60; }
.merchant-text { min-width: 0; display: block; }
.merchant-name { display: block; font-size: 12px; font-weight: 570; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.merchant-meta { display: block; color: #9b9f92; font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-cell { font-size: 12px; color: #969e8e; }
.category-cell { font-size: 12px; color: #78856c; }
.category-label { display: inline-block; padding: 3px 8px; background: #f1f3e9; border-radius: 7px; font-size: 12px; }
.category-label.needs-review { background: #f7efd9; color: #ad8f4a; }
.amount-cell { min-width: 0; text-align: right; }
.transaction-amount { display: block; color: var(--ink); font-size: 12px; font-weight: 590; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.transaction-amount.inflow { color: #718e52; }
.transaction-status { display: block; color: #a7ac9d; font-size: 12px; margin-top: 5px; font-weight: 420; }
.transaction-status.pending { color: #b09457; }
.transaction-status.excluded { color: #8f9687; }
.transaction-row.compact { grid-template-columns: minmax(80px, 1fr) minmax(80px, max-content); gap: 12px; padding: 13px 0; }
.transaction-row.compact:hover { background: transparent; }
.transaction-row.compact .date-cell, .transaction-row.compact .category-cell { display: none; }
.transaction-row.compact .merchant-avatar { width: 34px; height: 34px; border-radius: 10px; }
.transaction-row.compact .merchant-name { font-size: 12px; }
.transaction-row.compact .transaction-amount { font-size: 12px; }
.transaction-row.compact .merchant-meta { font-size: 12px; }
.review-note { display: flex; align-items: center; gap: 10px; margin-top: 19px; padding: 12px 17px; border: 1px solid #e7e4d2; background: #f5f1e4; border-radius: 12px; color: #9b8b5e; font-size: 12px; }
.review-note .text-button { margin-left: auto; color: #948148; font-size: 12px; }
.review-dot { width: 6px; height: 6px; background: #cbb479; border-radius: 50%; flex-shrink: 0; }
.data-footnote { text-align: center; margin-top: 23px; font-size: 12px; color: #a3a99b; }
.empty-state { text-align: center; padding: 34px 18px; max-width: 420px; margin: 0 auto; }
.empty-icon { width: 49px; height: 49px; display: grid; place-items: center; border-radius: 16px; background: #f0f3e8; color: #92a67b; margin: 0 auto 16px; }
.empty-icon .icon { width: 24px; height: 24px; stroke-width: 1.4; }
.empty-state h3, .fatal-state h2 { font-size: 14px; font-weight: 560; margin-bottom: 8px; }
.empty-state p { font-size: 12px; color: #929b86; line-height: 1.8; }
.empty-state .button, .fatal-state .button { margin-top: 20px; }
.empty-state.compact { padding: 22px 3px 31px; }
.transactions-toolbar { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 22px 24px 15px; }
.search-field { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 130px; max-width: 340px; background: #f5f6ef; border: 1px solid #edefe5; border-radius: 10px; padding: 8px 12px; }
.search-field .icon { width: 16px; height: 16px; color: #9ca68f; }
.search-field input { width: 100%; background: transparent; outline: 0; border: 0; font-size: 12px; padding: 2px 0; }
.search-field input:focus-visible { outline: 0; }
.search-field:focus-within { border-color: #aec397; box-shadow: 0 0 0 2px #aec39720; }
input::placeholder { color: #aeb3a4; opacity: 1; }
.select-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-width: 0; }
.select-filters select { min-width: 0; }
select { appearance: auto; border: 1px solid var(--line); padding: 9px 10px; background: var(--card); border-radius: 9px; font-size: 12px; max-width: 190px; }
.transactions-subbar { display: flex; align-items: center; justify-content: space-between; padding: 0 24px 17px; gap: 12px; border-bottom: 1px solid var(--line); }
.filter-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.filter-tab { padding: 6px 11px; border-radius: 8px; color: #97a08b; background: transparent; font-size: 12px; }
.filter-tab:hover { background: #f3f5eb; }
.filter-tab.is-active { background: #edf2e4; color: #688053; font-weight: 570; }
.result-count { color: #a2aa97; font-size: 12px; white-space: nowrap; }
.transaction-table-heading { display: grid; grid-template-columns: minmax(160px, 1fr) 95px 110px 130px; gap: 15px; padding: 13px 24px 9px; font-size: 12px; color: #a4ab99; }
.transaction-table-heading > span:last-child { text-align: right; }
.transactions-card .transaction-list { padding: 0 9px 8px; }
.transactions-card .transaction-row { padding-left: 15px; padding-right: 15px; }
.transactions-card .empty-state { padding-top: 50px; padding-bottom: 60px; }
.accounting-note { display: flex; gap: 9px; align-items: flex-start; margin: 18px 2px 0; color: #9aa38f; font-size: 12px; max-width: 820px; line-height: 1.85; }
.accounting-note .icon { width: 14px; height: 14px; margin-top: 2px; opacity: .9; }
.budget-summary { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; padding: 25px 27px; gap: 20px; align-items: center; }
.budget-summary > div > span { font-size: 12px; color: #909c84; }
.budget-summary strong { display: block; font-size: 27px; letter-spacing: -.8px; margin-top: 8px; line-height: 1.3; font-weight: 520; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.budget-summary-note { display: flex; align-items: center; gap: 12px; border-left: 1px solid var(--line); padding-left: 23px; }
.budget-summary-note .icon { width: 30px; height: 30px; color: #a2b78a; stroke-width: 1.1; }
.budget-summary-note p { color: #97a386; font-size: 12px; line-height: 1.9; }
.budget-explainer { color: #94a087; font-size: 12px; margin: 20px 3px 17px; }
.budget-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.budget-card { text-align: left; padding: 21px; transition: border-color .16s; width: 100%; }
.budget-card:hover, .budget-card:focus-within { border-color: #c9d7b9; }
.budget-card-open { display: block; width: 100%; padding: 0; border: 0; text-align: left; color: inherit; background: transparent; cursor: pointer; }
.budget-card-detail-link { display: block; margin-top: 12px; color: var(--green); font-size: 12px; }
.budget-edit { margin-top: 12px; min-height: 36px; border-top: 1px solid var(--line); padding-top: 12px; width: 100%; justify-content: flex-start; }
.category-drilldown { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 5px 0; color: inherit; cursor: pointer; }
.category-drilldown .icon { width: 14px; height: 14px; color: var(--muted); }
.category-drilldown:hover .category-bar-heading, .category-drilldown:focus-visible .category-bar-heading { color: var(--green); }
.category-detail-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.category-detail-heading p { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.category-detail-heading h2 { font-size: 20px; }
.category-quick-switch { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.category-switch-button { background: #f6f7f0; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 12px; min-height: 38px; }
.category-switch-button:hover { border-color: #aebfa1; color: var(--green); }
.category-switch-button.is-active { background: #e8efdf; color: var(--green); border-color: #bacbac; font-weight: 600; }
.detail-month-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.detail-month-toolbar strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.detail-month-toolbar > .text-button { margin-left: auto; }
.month-quick-switch { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.month-switch-button { border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); padding: 7px 11px; min-height: 38px; font-size: 12px; font-variant-numeric: tabular-nums; }
.month-switch-button.is-active { border-color: #bacbac; background: #e8efdf; color: var(--green); font-weight: 600; }
.purpose-review { padding: 20px; margin-bottom: 20px; }
.purpose-review > summary { cursor: pointer; font-size: 15px; font-weight: 600; }
.purpose-review .field-help { margin: 12px 0; }
.purpose-review .transaction-row { padding-left: 0; padding-right: 0; }
.cash-plan-section { padding: 26px; margin-bottom: 22px; }
.cash-month-switch { margin: 20px 0; }
.cash-totals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.cash-total { display: flex; flex-direction: column; gap: 10px; padding: 18px 12px; background: #fafbf7; min-width: 0; }
.cash-total > span { font-size: 12px; color: var(--muted); }
.cash-total > strong { font-size: clamp(17px, 2.2vw, 24px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cash-closing { background: #eaf0e1; }
.cash-negative { color: #a15f4b; }
.cash-gap { margin-bottom: 14px; }
.cash-unknown { font-size: 12px; line-height: 1.8; color: #8a7955; margin: 10px 0 24px; }
.cash-plan-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 34px; }
.cash-plan-columns h3 { font-size: 17px; margin: 0 0 18px; }
.cash-entry-group { margin-bottom: 20px; }
.cash-entry-group h4, .cash-budget-group { font-size: 12px; color: var(--muted); font-weight: 500; margin: 18px 0 5px; }
.cash-entry { border-bottom: 1px solid var(--line); }
.cash-entry-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; list-style: none; }
details.cash-entry > summary { cursor: pointer; }
details.cash-entry > summary::-webkit-details-marker { display: none; }
details.cash-entry > summary .cash-entry-label > strong::after { content: " ⌄"; color: var(--muted); font-size: 12px; }
.cash-entry-label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cash-entry-label > strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.cash-entry-label small { font-size: 11px; line-height: 1.6; color: var(--muted); }
.cash-entry-amount { flex-shrink: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.cash-entry-note { margin: 0 0 14px; overflow-wrap: anywhere; }
.cash-budget-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cash-budget-heading .text-button { font-size: 12px; }
.cash-budget-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
.cash-budget-line > strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.cash-budget-total { margin-top: 12px; border-top: 1px solid var(--line); font-weight: 600; }
.cash-comparison { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.cash-comparison > summary, .legacy-plan > summary, .cash-plan-start > summary { cursor: pointer; color: var(--green); font-size: 13px; padding: 8px 0; }
.dialog.cash-plan-dialog { width: min(780px, calc(100vw - 30px)); max-width: 780px; }
.cash-edit-entry { position: relative; min-width: 0; border: 1px solid var(--line); padding: 16px; border-radius: 12px; margin: 22px 0; }
.cash-edit-entry > legend { font-size: 12px; padding: 0 6px; color: var(--muted); }
.cash-edit-entry > button { display: block; margin: 0 0 12px auto; font-size: 12px; }
.cash-edit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cash-edit-fields > .form-field { min-width: 0; margin-bottom: 0; }
.cash-edit-fields label { font-size: 12px; }
.cash-field-note { grid-column: 1 / -1; }
.cash-plan-start { margin: 22px 0; }
@media (max-width: 950px) {
  .cash-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cash-plan-columns { gap: 24px; }
}
@media (max-width: 700px) {
  .cash-plan-section { padding: 18px 16px; }
  .cash-plan-section > .card-heading { flex-wrap: wrap; }
  .cash-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cash-closing { grid-column: 1 / -1; }
  .cash-total { padding: 15px 12px; }
  .cash-total > strong { font-size: 22px; }
  .cash-plan-columns { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cash-edit-fields { grid-template-columns: minmax(0, 1fr); }
  .cash-field-note { grid-column: auto; }
  .cash-edit-entry { padding: 12px; }
}
.projection-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.projection-metric { display: flex; flex-direction: column; gap: 10px; padding: 22px; min-width: 0; }
.projection-metric > span { font-size: 13px; color: var(--muted); }
.projection-metric > strong { font-size: clamp(20px, 3.4vw, 30px); line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.projection-metric > small { font-size: 12px; color: var(--muted); }
.projection-milestone { background: #edf2e6; border-color: #d5dfc8; }
.projection-schedule { padding: 24px; margin-bottom: 22px; }
.projection-table-wrap { max-width: 100%; overflow-x: auto; }
.projection-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; }
.projection-table th, .projection-table td { text-align: right; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.projection-table th:first-child, .projection-table td:first-child { text-align: left; }
.projection-table th { font-weight: 500; color: var(--muted); }
.projection-table .debt-cleared { background: #f0f5e9; }
.settings-link { flex-shrink: 0; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; }
.settings-link:hover, .settings-link.is-active { background: #e8efdf; color: var(--green); }
.topbar { position: relative; }
.planning-overview { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 24px; margin: 22px 0; }
.planning-overview h2 { font-size: 17px; margin-bottom: 4px; }
.planning-overview p { font-size: 13px; color: var(--muted); }
.future-budget-section { padding: 24px; }
.future-budget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; margin: 14px 0; }
.future-budget-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; border: 1px solid var(--line); border-radius: 14px; padding: 19px; background: #f7f8f2; }
.future-budget-card:hover { border-color: #aebfa1; }
.future-budget-card > span { font-size: 13px; }
.future-budget-card strong { font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; }
.future-budget-card small { font-size: 12px; color: var(--muted); }
.future-budget-card .future-budget-action { color: var(--green); margin-top: 6px; }
@media (max-width: 760px) {
  .projection-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .projection-metric { padding: 16px; }
    .projection-controls .card-heading { flex-wrap: wrap; }
  .settings-link { position: absolute; top: 4px; right: 0; }
  .page-heading { padding-right: 48px; }
}
.usd-filter { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.usd-filter input { width: 16px; height: 16px; accent-color: var(--green); }
.merchant-item-note { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 3px; }
.transaction-edit-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; margin: 18px 0; }
.form-field textarea { width: 100%; border: 1px solid #e3e8d9; border-radius: 10px; background: #fcfdf8; padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.6; resize: vertical; }
.form-field textarea:focus { border-color: #b3c69d; }
.budget-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.budget-card-name { font-size: 12px; font-weight: 570; }
.budget-card-top .icon { margin-left: auto; color: #a5af98; width: 15px; height: 15px; }
.budget-card .merchant-avatar { width: 31px; height: 31px; border-radius: 10px; font-size: 12px; }
.budget-card-amount { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; }
.budget-card-amount strong { font-size: 21px; letter-spacing: -.5px; font-weight: 540; font-variant-numeric: tabular-nums; }
.budget-card-amount > span { font-size: 12px; color: #a1aa96; }
.budget-card .progress { height: 4px; }
.budget-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 11px; color: #93a083; font-size: 12px; min-height: 17px; }
.budget-card-pending { display: block; font-size: 12px; color: #b09b6f; margin-top: 7px; min-height: 15px; }
.budget-card.unset { background: #fafaf4; border-style: dashed; }
.budget-card.unset .budget-card-amount strong { color: #7e8b70; }
.budget-card.unset .progress { background: #eeefe6; }
.budget-card.over .progress > span { background: #c58b75; }
.is-negative, .budget-card.over .budget-card-footer > span:first-child { color: var(--danger) !important; }
.local-badge { display: inline-flex; align-items: center; gap: 5px; }
.local-badge .icon { width: 13px; height: 13px; }
.connected-section { padding: 24px; margin-bottom: 21px; }
.pill { background: #eff3e7; color: #8a9b76; border-radius: 20px; padding: 5px 9px; font-size: 12px; white-space: nowrap; }
.connection-list { display: grid; gap: 12px; }
.connection-item { display: flex; align-items: flex-start; gap: 13px; padding: 15px 17px; border: 1px solid #e9ede1; border-radius: 13px; background: #fafbf5; }
.bank-mark { width: 38px; height: 38px; display: grid; place-items: center; background: #edf2e4; color: #879d6d; border-radius: 12px; flex-shrink: 0; }
.bank-mark .icon { width: 19px; height: 19px; }
.connection-main { flex: 1; min-width: 0; }
.connection-main strong { display: block; font-size: 12px; font-weight: 570; overflow-wrap: anywhere; }
.connection-meta { display: block; color: #97a487; font-size: 12px; margin-top: 4px; }
.connection-error { margin-top: 6px; color: var(--danger); font-size: 12px; overflow-wrap: anywhere; }
.connection-state { display: flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 12px; color: #8da174; padding-top: 2px; }
.connection-state .icon { width: 12px; height: 12px; }
.connection-state.error { color: var(--danger); }
.account-details { margin-top: 17px; color: #8a997d; font-size: 12px; border-top: 1px solid #edf0e4; padding-top: 13px; }
.account-details summary { cursor: pointer; }
.account-details summary span { color: #abb39e; margin-left: 7px; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 1px 4px; font-size: 12px; }
.account-row span:last-child { color: #a2ad96; font-size: 12px; }
.connections-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 21px; }
.connection-card { padding: 25px; }
.step-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.step-number { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; background: #eff3e5; color: #8fa775; font-size: 12px; flex-shrink: 0; }
.step-heading p { color: #a0ab92; font-size: 12px; margin-top: 5px; }
.configuration-status { color: #88a06c; font-size: 12px; margin: -7px 0 15px; }
.configuration-status:empty { display: none; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 12px; color: #6d7e5f; font-weight: 550; margin-bottom: 7px; }
.form-field input, .form-field select { width: 100%; max-width: none; border: 1px solid #e3e8d9; border-radius: 10px; background: #fcfdf8; padding: 10px 12px; font-size: 12px; transition: border-color .15s; }
.form-field input:focus, .form-field select:focus { border-color: #b3c69d; }
.optional { font-size: 12px; color: #a9b49c; font-weight: 400; margin-left: 5px; }
.field-help { color: #a4ae98; font-size: 12px; margin: 0 0 18px; line-height: 1.8; }
.form-field .field-help { margin-top: 8px; margin-bottom: 0; }
.form-error { background: var(--danger-bg); color: var(--danger); border-radius: 8px; padding: 10px 12px; font-size: 12px; margin: 0 0 15px; overflow-wrap: anywhere; }
.hosted-link-card { display: grid; grid-template-columns: 1fr auto; gap: 15px 30px; align-items: center; margin-top: 21px; padding: 23px 25px; background: #f6f8ee; border-color: #e6ecdc; }
.hosted-link-card h2 { font-size: 14px; }
.hosted-link-card > div > p { color: #98a587; font-size: 12px; margin-top: 7px; max-width: 600px; }
.hosted-session { padding-top: 17px; border-top: 1px solid #e4ead8; }
.hosted-session > p { margin-bottom: 15px; }
.button-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.connection-footnotes { margin: 23px 3px 0; max-width: 900px; display: grid; gap: 10px; color: #a2ad96; font-size: 12px; }
.connection-footnotes > p { display: flex; gap: 9px; align-items: flex-start; line-height: 1.85; }
.connection-footnotes .icon { width: 13px; height: 13px; margin-top: 3px; }
.demo-banner { display: flex; align-items: center; gap: 15px; padding: 15px 19px; margin: -2px 0 23px; border: 1px solid #e5d2a5; border-radius: 13px; background: #fbf2dd; color: #98772e; }
.demo-badge { flex-shrink: 0; border: 1px solid #d9bf88; padding: 3px 8px; font-size: 12px; font-weight: 600; border-radius: 6px; background: #f5e7c8; }
.demo-banner strong { font-size: 12px; font-weight: 550; }
.demo-banner p { margin-top: 2px; font-size: 12px; color: #ab914d; }
.notice { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; margin-bottom: 20px; padding: 12px 15px 12px 19px; border: 1px solid #dce6ce; background: #eff5e6; border-radius: 12px; font-size: 12px; color: #718858; }
.notice.warning { background: #fbf1e7; border-color: #edd9c3; color: #a27b4e; }
.notice .icon-button { width: 24px; height: 24px; padding: 4px; margin-top: -2px; }
.notice ul { margin-top: 7px; font-size: 12px; }
.notice li + li { margin-top: 3px; }
.boot-state { padding: 90px 20px; text-align: center; color: #93a084; font-size: 12px; }
.loader { display: block; border: 2px solid #e1e8d5; border-top-color: #8fa475; width: 24px; height: 24px; border-radius: 50%; margin: 0 auto 20px; animation: spin 1s linear infinite; }
.fatal-state { padding: 60px 30px; text-align: center; margin: 30px auto; max-width: 580px; }
.fatal-state p { color: #99a48d; font-size: 12px; max-width: 380px; margin: 0 auto; }
.dialog { background: var(--card); color: var(--ink); border: 1px solid #e6eadc; width: min(480px, calc(100vw - 32px)); border-radius: 23px; padding: 29px; box-shadow: 0 25px 90px #1d322926; max-height: calc(100dvh - 50px); overflow-y: auto; }
.dialog::backdrop { background: #14281b5c; backdrop-filter: blur(3px); }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog-header h2 { font-size: 21px; line-height: 1.4; overflow-wrap: anywhere; }
.dialog-header .icon-button { margin: -6px -6px 0 0; }
.dialog .eyebrow { font-size: 12px; margin-bottom: 8px; }
.dialog-amount { margin-top: 19px; font-size: 34px; font-weight: 550; letter-spacing: -1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dialog-amount.inflow { color: #7b955c; }
.transaction-details { display: grid; grid-template-columns: 72px 1fr; gap: 7px 12px; margin: 19px 0; font-size: 12px; }
.transaction-details dt { color: #a2ac95; }
.transaction-details dd { margin: 0; color: #7e8e70; overflow-wrap: anywhere; }
.dialog-notice { background: #f2f5e9; padding: 11px 13px; border-radius: 10px; color: #8a9e72; font-size: 12px; margin-bottom: 23px; line-height: 1.8; }
.dialog-notice.pending { color: #aa945d; background: #f8f1df; }
.checkbox-field { display: flex; align-items: flex-start; gap: 8px; color: #768b64; font-size: 12px; margin: 6px 0 22px; cursor: pointer; }
.checkbox-field input { accent-color: var(--green); margin: 3px 0 0; width: 14px; height: 14px; flex-shrink: 0; }
.checkbox-field small { display: block; font-size: 12px; color: #a9b49b; margin-top: 4px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.budget-dialog-copy { font-size: 12px; margin: 15px 0 23px; }
.amount-input { display: flex; gap: 11px; align-items: center; padding-left: 14px; border: 1px solid #e1e8d5; border-radius: 11px; background: #fcfdf8; }
.amount-input > span { font-size: 12px; color: #97a882; white-space: nowrap; }
.amount-input input { border: 0; background: transparent; padding-left: 0; font-size: 24px; font-variant-numeric: tabular-nums; }
.amount-input:focus-within { border-color: #aec398; }
.amount-input input:focus-visible { outline: 0; }
.toast-container { position: fixed; z-index: 100; right: 26px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; width: min(390px, calc(100vw - 36px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 14px 17px; border-radius: 12px; background: #2a4d36; color: #f3f7ec; box-shadow: 0 7px 30px #192e3126; font-size: 12px; line-height: 1.7; animation: toast-in .2s ease-out; overflow-wrap: anywhere; }
.toast.error { background: #80584a; }
.toast .icon { width: 15px; height: 15px; margin-top: 1px; }
.setup-guide { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 23px 25px; margin-bottom: 24px; border-color: #cfdbc3; background: #eef3e6; }
.date-basis-note { color: var(--muted); font-size: 12px; margin: -7px 0 18px; }
.setup-guide h2 { font-size: 18px; }
.setup-guide > div > p:last-child { max-width: 620px; margin-top: 7px; color: var(--muted); font-size: 12px; }
.filter-results { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.filtered-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 17px 24px; background: #f3f5ed; border-bottom: 1px solid var(--line); }
.filtered-summary > div { min-width: 0; }
.filtered-summary span { display: block; font-size: 12px; color: var(--muted); }
.filtered-summary strong { display: block; margin-top: 3px; font-size: 18px; font-weight: 550; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.filtered-summary > p { margin-left: auto; font-size: 12px; color: var(--muted); }
.budget-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 20px 0 10px; }
.budget-toolbar .budget-explainer { margin: 0; }
.rules-section { margin-top: 25px; padding: 20px 24px; }
.rules-section summary { cursor: pointer; font-weight: 600; }
.rules-section summary .pill { margin-left: 8px; font-weight: 400; }
.rules-help, .rules-empty { margin-top: 15px; font-size: 12px; color: var(--muted); }
.merchant-rule { display: flex; align-items: center; gap: 12px; width: 100%; padding: 17px 0; text-align: left; background: transparent; border-top: 1px solid var(--line); }
.merchant-rule:first-child { margin-top: 17px; }
.merchant-rule:hover { background: #f3f5ed; }
.rule-merchant { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rule-merchant strong { display: block; font-size: 13px; font-weight: 550; }
.rule-merchant small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.rule-category { font-size: 12px; }
.merchant-rule > .icon { width: 15px; height: 15px; }
.rule-notice { margin-top: 20px; }
.danger-action { color: var(--danger); margin-right: auto; }
.section-kicker > span, .metric-description, .income-card p, .card-heading p,
.category-chart-caption, .merchant-meta, .transaction-status, .result-count,
.transaction-table-heading, .accounting-note, .budget-summary > div > span,
.budget-summary-note p, .budget-explainer, .budget-card-amount > span,
.budget-card-footer, .connection-meta, .account-row span:last-child,
.step-heading p, .field-help, .optional, .hosted-link-card > div > p,
.connection-footnotes, .transaction-details dt, .checkbox-field small,
.data-footnote { color: var(--muted); }
.filter-tab { color: #66775d; }
.demo-banner { color: #74551e; }
.demo-banner p { color: #80662e; }
.dialog-notice { color: #5d734a; }
.transaction-details dd { color: #586b50; }
.reimbursement-help { color: var(--muted); font-size: 12px; line-height: 1.85; margin: 0 0 18px; }
.reimbursement-entry { width: 100%; margin-bottom: 21px; }
.personal-amount { display: block; color: var(--green); font-size: 12px; margin-top: 3px; }
.reimbursement-dialog { width: min(700px, calc(100vw - 32px)); }
.reimbursement-dialog .reimbursement-help { margin-top: 18px; }
.reimbursement-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; background: #eef3e6; border-radius: 13px; padding: 18px; margin: 20px 0; }
.reimbursement-totals span { display: block; color: var(--muted); font-size: 12px; }
.reimbursement-totals strong { display: block; font-size: 21px; font-weight: 550; margin-top: 5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.allocation-row { display: grid; grid-template-columns: minmax(0, 1fr) 135px 32px; align-items: start; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; }
.allocation-row .form-field { margin: 0; }
.allocation-row > .icon-button { margin-top: 25px; }
.allocation-issue { color: var(--danger); font-size: 12px; margin-top: 5px; }
.reimbursement-candidate { display: block; width: 100%; text-align: left; border: 1px solid #d9e2ce; background: #f2f6eb; border-radius: 10px; padding: 11px 13px; font-size: 12px; margin-bottom: 8px; overflow-wrap: anywhere; }
.reimbursement-candidate:hover { background: #e7efdd; }
#reimbursement-suggestions { margin-bottom: 16px; }
#reimbursement-suggestions .field-help { margin-bottom: 10px; }
.reimbursement-refund-note { margin: 20px 0 0; }
.reimbursement-dialog .dialog-actions { flex-wrap: wrap; }
.reimbursement-dialog .form-error { margin-top: 16px; }
.reimbursement-review-button { display: block; text-align: left; white-space: normal; margin-top: 8px; }
.repayment-overview, .balance-overview { margin-top: 23px; padding: 24px; }
.repayment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.repayment-grid span, .balance-grid span { display: block; color: var(--muted); font-size: 12px; }
.repayment-grid strong, .balance-grid strong { display: block; font-size: 25px; font-weight: 550; font-variant-numeric: tabular-nums; margin-top: 7px; overflow-wrap: anywhere; }
.repayment-grid small { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; }
.repayment-overview > .field-help, .balance-overview > .field-help { margin: 18px 0 0; }
.balance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.balance-net { padding-left: 20px; border-left: 1px solid var(--line); }
.balance-completeness { font-size: 12px; color: var(--muted); margin-top: 18px; padding: 11px 13px; border-radius: 10px; background: #edf3e7; }
.balance-completeness.needs-review { color: var(--amber); background: var(--sand); }
.balance-account { align-items: flex-start; border-bottom: 1px solid var(--line); padding: 12px 0; }
.balance-account-value { text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.balance-account-value small { display: block; font-size: 11px; margin-top: 3px; color: var(--muted); }
.debt-plans { display: grid; gap: 13px; margin-top: 20px; }
.debt-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 17px; }
.debt-plan strong { font-weight: 550; font-size: 13px; }
.debt-plan p, .debt-plan-amount > span { color: var(--muted); font-size: 12px; margin-top: 5px; }
.debt-plan-amount { text-align: right; }
.debt-plan-amount strong { display: block; font-size: 19px; margin-top: 4px; }
.manual-liabilities-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 25px; }
.manual-liabilities-heading h3 { font-size: 14px; font-weight: 600; }
.manual-liabilities-list { display: grid; gap: 12px; margin-top: 13px; }
.debt-plan > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.debt-plan .liability-target { color: var(--green); font-weight: 550; }
.school-coverage-note { font-size: 12px; line-height: 1.85; }
.school-statement-summary { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.school-statement-summary .statement-past-due { color: var(--danger); }
.history-coverage-note { margin-bottom: 0; }
@media (max-width: 950px) {
  .balance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .balance-net { padding-left: 0; border-left: 0; }
  .repayment-grid { gap: 16px; }
}
@media (max-width: 700px) {
  .repayment-overview, .balance-overview { padding: 21px; }
  .repayment-grid { grid-template-columns: 1fr; gap: 17px; }
  .repayment-grid > div + div { border-top: 1px solid var(--line); padding-top: 15px; }
  .repayment-grid strong, .balance-grid strong { font-size: 23px; }
  .balance-overview .card-heading { align-items: flex-start; }
  .balance-overview .local-badge { font-size: 11px; white-space: normal; max-width: 70px; }
  .debt-plan { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .debt-plan .button { justify-self: start; }
}
@media (max-width: 600px) {
  .reimbursement-dialog { padding: 22px; }
  .reimbursement-totals { padding: 14px; gap: 9px; }
  .reimbursement-totals strong { font-size: 18px; }
  .allocation-row { grid-template-columns: minmax(0, 1fr) 32px; padding: 12px; }
  .allocation-receipt { grid-column: 1 / -1; }
  .reimbursement-dialog .dialog-actions { gap: 8px; }
  .reimbursement-dialog .danger-action { flex-basis: 100%; margin-bottom: 8px; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1600px) {
  .main { padding-right: 60px; padding-left: 60px; }
}
@media (max-width: 1190px) {
  .sidebar { width: 190px; padding-left: 15px; padding-right: 15px; }
  .brand { gap: 8px; }
  .brand strong { font-size: 18px; }
  .brand small { font-size: 12px; letter-spacing: 0; }
  .brand img { width: 37px; height: 37px; }
  .main { margin-left: 190px; padding: 30px 28px; }
  .overview-metrics { gap: 13px; grid-template-columns: 1.3fr 1fr 1fr; }
  .spending-card { padding: 22px; }
  .metric-card { padding: 22px 18px 17px; }
  .overview-columns { gap: 17px; grid-template-columns: 1fr 1.4fr; }
  .category-overview, .recent-card { padding: 21px; }
  .transaction-row, .transaction-table-heading { grid-template-columns: minmax(130px, 1fr) 80px 86px 115px; gap: 10px; }
  .budget-summary { grid-template-columns: repeat(3, 1fr); }
  .budget-summary-note { display: none; }
  .budget-grid { gap: 13px; }
  .budget-card { padding: 18px; }
}
@media (max-width: 950px) {
  .sidebar { width: 164px; padding: 33px 12px 25px; }
  .brand { margin: 0; gap: 7px; }
  .brand img { width: 33px; height: 33px; }
  .brand strong { font-size: 16px; }
  .brand small { font-size: 12px; }
  .nav-link { padding: 11px 14px; gap: 12px; font-size: 13px; }
  .sidebar-footer { padding-left: 9px; padding-right: 0; }
  .main { margin-left: 164px; padding: 28px 22px; }
  h1 { font-size: 26px; }
  .topbar { gap: 15px; }
  .topbar-actions { gap: 9px; }
  .month-control { gap: 0; }
  .month-control .icon-button { width: 27px; }
  .month-control input { width: 117px; font-size: 12px; }
  .sync-button { padding: 10px 12px; min-height: 42px; gap: 6px; font-size: 12px; }
  .overview-metrics { grid-template-columns: 1fr 1fr; }
  .spending-card { grid-column: 1 / -1; min-height: auto; padding: 24px 27px 19px; }
  .hero-amount { font-size: 43px; margin: 17px 0 14px; }
  .hero-progress { max-width: 75%; }
  .hero-budget-line { max-width: 75%; }
  .hero-bottom { margin-top: 13px; }
  .hero-leaf { width: 172px; height: 172px; bottom: 40px; right: 2px; }
  .metric-card { min-height: 188px; padding: 22px; }
  .metric-amount { font-size: 31px; margin-top: 16px; }
  .income-card { padding: 14px 21px; }
  .income-card p { max-width: 210px; text-align: right; }
  .overview-columns { grid-template-columns: 1fr; }
  .category-chart-list { grid-template-columns: 1fr 1fr; gap: 18px 25px; }
  .category-chart-caption { margin-top: 19px; }
  .transaction-row.compact { padding-top: 14px; padding-bottom: 14px; }
  .transaction-row.compact .merchant-name, .transaction-row.compact .transaction-amount { font-size: 12px; }
  .transaction-row, .transaction-table-heading { grid-template-columns: minmax(130px, 1fr) 80px 80px 110px; gap: 9px; }
  .transaction-row .merchant-avatar { display: none; }
  .transaction-row.compact .merchant-avatar { display: grid; }
  .transactions-toolbar { flex-wrap: wrap; padding: 20px 19px 14px; gap: 12px; }
  .search-field { flex-basis: 100%; max-width: none; }
  .select-filters { width: 100%; }
  .select-filters select { flex: 1; max-width: none; }
  .transactions-subbar { padding: 0 19px 15px; }
  .filter-tab { padding: 6px 8px; }
  .transactions-card .transaction-list { padding-left: 4px; padding-right: 4px; }
  .transaction-table-heading { padding-left: 19px; padding-right: 19px; }
  .budget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .connections-grid { grid-template-columns: 1fr; gap: 18px; }
  .connected-section, .connection-card { padding: 22px; }
  .hosted-link-card { padding: 22px; grid-template-columns: 1fr; }
  .hosted-link-card > .button { justify-self: start; }
}
@media (max-width: 700px) {
  html { scrollbar-gutter: auto; }
  .sidebar { top: auto; right: 0; width: 100%; height: calc(65px + env(safe-area-inset-bottom)); padding: 4px 13px env(safe-area-inset-bottom); border-top: 1px solid #e0e5d4; border-right: 0; background: #f8f9f0f7; backdrop-filter: blur(16px); z-index: 30; }
  .brand, .sidebar-footer { display: none; }
  .main-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; width: 100%; }
  .nav-link { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px 4px 5px; min-height: 56px; font-size: 12px; border-radius: 11px; color: #98a38a; }
  .nav-link .icon { width: 19px; height: 19px; }
  .nav-link.is-active { background: transparent; color: var(--green); box-shadow: none; }
  .nav-link.is-active::before { content: ""; position: absolute; width: 33px; height: 28px; top: 4px; border-radius: 9px; background: #e6edd9; z-index: -1; }
  .nav-count { position: absolute; top: 4px; right: calc(50% - 25px); margin: 0; min-width: 14px; height: 14px; line-height: 14px; font-size: 12px; border-radius: 5px; padding: 0 3px; }
  .main { margin-left: 0; padding: 25px 21px calc(96px + env(safe-area-inset-bottom)); }
  .topbar { margin-bottom: 26px; align-items: flex-start; gap: 15px; flex-wrap: wrap; }
  .page-heading { flex-basis: 100%; }
  .eyebrow { font-size: 12px; letter-spacing: 1px; margin-bottom: 4px; }
  h1 { font-size: 27px; }
  .topbar-actions { width: 100%; justify-content: space-between; gap: 12px; }
  .month-control { padding: 2px 3px; }
  .month-control input { width: 133px; font-size: 12px; }
  .month-control .icon-button { width: 30px; }
  .sync-button { padding: 9px 14px; min-height: 40px; font-size: 12px; }
  .section-kicker { gap: 12px; margin-bottom: 15px; }
  .section-kicker > p { font-size: 12px; }
  .section-kicker > span { font-size: 12px; }
  .overview-metrics { gap: 12px; }
  .spending-card { border-radius: 18px; padding: 23px 23px 17px; }
  .hero-amount { font-size: 42px; }
  .hero-progress, .hero-budget-line { max-width: 100%; }
  .hero-leaf { width: 135px; height: 135px; bottom: 45px; right: -8px; opacity: .16; }
  .metric-card { min-height: 187px; padding: 18px 16px; border-radius: 16px; }
  .metric-heading { font-size: 12px; gap: 6px; }
  .metric-symbol { width: 25px; height: 25px; border-radius: 8px; }
  .metric-symbol .icon { width: 13px; height: 13px; }
  .metric-amount { font-size: 29px; margin-top: 16px; }
  .metric-amount.is-unset { font-size: 22px; }
  .metric-description { font-size: 12px; margin-top: 8px; line-height: 1.8; }
  .metric-action { font-size: 12px; padding-top: 15px; }
  .metric-action .icon { width: 12px; height: 12px; }
  .income-card { display: block; padding: 15px 18px; }
  .income-card > div { justify-content: space-between; gap: 10px; }
  .income-card strong { font-size: 19px; }
  .income-card span { font-size: 12px; }
  .income-card p { max-width: none; font-size: 12px; margin-top: 5px; text-align: left; }
  .income-card > div + div { margin-top: 8px; }
  .category-detail-heading { align-items: flex-start; flex-wrap: wrap; }
  .overview-columns { margin-top: 19px; gap: 19px; }
  .category-overview, .recent-card { padding: 21px; }
  .card-heading { margin-bottom: 21px; }
  .card-heading h2 { font-size: 15px; }
  .card-heading p { font-size: 12px; }
  .category-chart-list { grid-template-columns: 1fr; gap: 20px; }
  .category-chart-caption { font-size: 12px; }
  .review-note { align-items: flex-start; font-size: 12px; padding: 12px 13px; gap: 8px; }
  .review-dot { margin-top: 5px; }
  .review-note .text-button { padding-top: 0; }
  .transactions-toolbar { padding: 19px 17px 14px; }
  .transactions-subbar { padding: 0 17px 15px; gap: 8px; flex-wrap: wrap; }
  .filter-tabs { gap: 2px; }
  .filter-tab { padding: 6px 8px; font-size: 12px; }
  .result-count { font-size: 12px; margin-left: auto; }
  .setup-guide { align-items: flex-start; flex-direction: column; padding: 20px; }
  .filtered-summary { gap: 12px; padding: 16px 17px; flex-wrap: wrap; }
  .filtered-summary > div { flex: 1; }
  .filtered-summary strong { font-size: 17px; }
  .filtered-summary > p { flex-basis: 100%; margin: 0; }
  .budget-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .rules-section { padding: 18px; }
  .rule-category { max-width: 95px; text-align: right; }
  .transaction-table-heading { grid-template-columns: minmax(100px, 1fr) 110px; padding-left: 19px; padding-right: 19px; }
  .transaction-table-heading > span:nth-child(2), .transaction-table-heading > span:nth-child(3) { display: none; }
  .transaction-row { grid-template-columns: minmax(100px, 1fr) 110px; padding-top: 17px; padding-bottom: 17px; gap: 9px; }
  .transaction-row .date-cell, .transaction-row .category-cell { display: none; }
  .transaction-row .merchant-name { font-size: 12px; }
  .transaction-row .merchant-meta { font-size: 12px; }
  .transaction-row .transaction-amount { font-size: 12px; }
  .transaction-row.compact .merchant-name, .transaction-row.compact .transaction-amount { font-size: 12px; }
  .transactions-card { border-radius: 17px; }
  .accounting-note { font-size: 12px; margin-top: 17px; }
  .budget-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 17px; gap: 14px; border-radius: 17px; }
  .budget-summary > div > span { font-size: 12px; }
  .budget-summary strong { font-size: 20px; margin-top: 8px; letter-spacing: -.7px; }
  .budget-explainer { font-size: 12px; margin-top: 17px; }
  .budget-grid { gap: 12px; }
  .budget-card { padding: 17px 15px; border-radius: 15px; }
  .budget-card-top { gap: 8px; margin-bottom: 19px; }
  .budget-card-name { font-size: 12px; }
  .budget-card .merchant-avatar { width: 27px; height: 27px; border-radius: 8px; font-size: 12px; }
  .budget-card-top .icon { width: 12px; height: 12px; }
  .budget-card-amount { gap: 3px 5px; }
  .budget-card-amount strong { font-size: 20px; }
  .budget-card-amount > span { font-size: 12px; }
  .budget-card-footer { font-size: 12px; gap: 4px; flex-wrap: wrap; }
  .budget-card-pending { font-size: 12px; }
  .connected-section, .connection-card { padding: 20px; border-radius: 17px; }
  .connected-section .card-heading { gap: 9px; align-items: flex-start; }
  .connected-section .card-heading p { max-width: 225px; }
  .pill { padding: 4px 7px; font-size: 12px; }
  .connection-item { padding: 13px; gap: 10px; flex-wrap: wrap; }
  .connection-state { margin-left: 48px; margin-top: -2px; }
  .connection-main { min-width: calc(100% - 49px); }
  .connection-main strong { font-size: 12px; }
  .connection-meta { font-size: 12px; }
  .connection-card .button { width: 100%; }
  .step-heading { gap: 10px; }
  .step-heading h2 { font-size: 15px; }
  .step-heading p { font-size: 12px; }
  .form-field label { font-size: 12px; }
  .form-field input, .form-field select { font-size: 16px; padding: 10px 12px; }
  .field-help { font-size: 12px; }
  .hosted-link-card { padding: 20px; border-radius: 17px; }
  .hosted-link-card > div > p { font-size: 12px; }
  .connection-footnotes { font-size: 12px; }
  .account-row { gap: 10px; flex-wrap: wrap; font-size: 12px; }
  .account-row span:last-child { font-size: 12px; }
  .demo-banner { margin-top: -4px; padding: 13px 15px; align-items: flex-start; gap: 11px; }
  .demo-badge { font-size: 12px; padding: 3px 6px; margin-top: 1px; }
  .demo-banner strong { font-size: 12px; }
  .demo-banner p { font-size: 12px; line-height: 1.8; margin-top: 4px; }
  .dialog { padding: 25px 23px; width: calc(100vw - 30px); border-radius: 21px; max-height: calc(100dvh - 35px); }
  .dialog-header h2 { font-size: 21px; }
  .dialog-actions .button { flex: 1; }
  .dialog-amount { font-size: 32px; }
  .checkbox-field input { width: 16px; height: 16px; margin-top: 1px; }
  .amount-input input { font-size: 25px; }
  .toast-container { right: 18px; bottom: calc(79px + env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) {
  .main { padding-left: 15px; padding-right: 15px; }
  .metric-card { padding-left: 13px; padding-right: 13px; }
  .metric-amount { font-size: 25px; }
  .metric-symbol { display: none; }
  .section-kicker > span { font-size: 12px; }
  .budget-grid { gap: 10px; }
  .budget-card { padding: 15px 12px; }
  .budget-summary { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .budget-summary strong { font-size: 18px; }
  .transaction-row, .transaction-table-heading { grid-template-columns: minmax(95px, 1fr) 97px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Keep financial information readable at every breakpoint. */
.brand small { font-size: 11px; letter-spacing: 0; }
.button, .sync-button, .button-small, .text-button, .filter-tab,
.search-field input, .select-filters select, .form-field label,
.form-field input, .form-field select, .merchant-name,
.transaction-row .merchant-name, .transaction-row.compact .merchant-name,
.transaction-amount, .transaction-row .transaction-amount,
.transaction-row.compact .transaction-amount, .budget-card-name,
.connection-main strong, .account-row, .checkbox-field {
  font-size: 14px;
}
.button { min-height: 44px; }
.button-small { min-height: 40px; }
.form-field input, .form-field select { min-height: 44px; }
.metric-heading, .income-card span, .category-bar-heading,
.category-bar-heading strong { font-size: 13px; }
.metric-description, .merchant-meta, .transaction-row .merchant-meta,
.transaction-row.compact .merchant-meta, .transaction-status,
.category-label, .date-cell, .card-heading p, .field-help,
.connection-meta, .connection-state, .configuration-status,
.accounting-note, .connection-footnotes, .budget-explainer,
.budget-card-amount > span, .budget-card-footer, .budget-card-pending,
.checkbox-field small, .dialog-notice, .transaction-details, .toast,
.review-note, .review-note .text-button, .dialog .eyebrow,
.section-kicker > span, .section-kicker > p,
.demo-banner strong, .demo-banner p, .demo-badge,
.income-card p, .step-heading p, .hosted-link-card > div > p,
.account-row span:last-child { font-size: 12px; }
.metric-description, .merchant-meta, .field-help, .card-heading p,
.transaction-status, .date-cell, .data-footnote, .accounting-note,
.connection-footnotes, .budget-explainer { color: #7c8773; }
.transaction-row { padding-top: 18px; padding-bottom: 18px; }
.transaction-row.compact { padding-top: 15px; padding-bottom: 15px; }
.budget-card-pending { color: #958259; line-height: 1.7; }
.category-label { padding: 4px 8px; }
.spending-card .hero-budget-line, .spending-card .hero-bottom { font-size: 12px; }
.hero-budget-line strong { font-size: 12px; }
.spending-card { min-height: 239px; }
.hero-amount { margin-top: 17px; margin-bottom: 18px; }
.metric-card { min-height: 239px; }
.category-chart-caption { color: #859176; }
.transactions-toolbar { flex-wrap: wrap; }
.filter-tabs { row-gap: 8px; }
.filter-tab { padding: 7px 10px; }
.budget-card-name { overflow-wrap: anywhere; }
.budget-card-top .icon { flex-shrink: 0; }
.budget-summary-note p { font-size: 12px; }
.connected-section .card-heading p { line-height: 1.8; }
.notice, .form-error { font-size: 13px; }
.notice li { line-height: 1.8; }
.transaction-details { grid-template-columns: 74px 1fr; }
@media (max-width: 1190px) {
  .brand small { font-size: 10px; }
}
@media (max-width: 950px) {
  .brand small { display: none; }
  .overview-metrics .spending-card { min-height: auto; }
  .metric-card { min-height: 220px; }
  .transactions-subbar { flex-wrap: wrap; }
  .result-count { margin-left: auto; }
  .transaction-row, .transaction-table-heading { grid-template-columns: minmax(140px, 1fr) 88px 89px 119px; }
  .merchant-meta { max-width: 100%; }
}
@media (max-width: 700px) {
  .button, .text-button, .sync-button { font-size: 14px; }
  .form-field input, .form-field select { font-size: 16px; }
  .month-control input { width: 155px; font-size: 14px; }
  .month-control { flex-shrink: 0; }
  .topbar-actions { flex-wrap: wrap; }
  .month-control .icon-button { width: 28px; }
  .metric-card { min-height: 225px; padding-left: 16px; padding-right: 16px; }
  .metric-heading { font-size: 12px; }
  .metric-symbol { display: none; }
  .metric-action { gap: 5px; }
  .metric-amount { font-size: 28px; }
  .income-card { padding: 16px 18px; }
  .income-card p { margin-top: 8px; line-height: 1.8; }
  .section-kicker { align-items: flex-start; flex-wrap: wrap; gap: 9px; }
  .section-kicker > span { font-size: 12px; }
  .transaction-row, .transaction-table-heading { grid-template-columns: minmax(100px, 1fr) 126px; }
  .transaction-row.compact { grid-template-columns: minmax(90px, 1fr) minmax(91px, max-content); }
  .transaction-row .merchant-name, .transaction-row.compact .merchant-name,
  .transaction-row .transaction-amount, .transaction-row.compact .transaction-amount { font-size: 14px; }
  .merchant-cell { gap: 9px; }
  .transaction-row.compact .merchant-avatar { width: 31px; height: 31px; }
  .merchant-meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .transactions-subbar { gap: 10px; }
  .filter-tab { font-size: 12px; padding: 7px 9px; }
  .result-count { font-size: 12px; }
  .budget-card { padding: 17px 14px; }
  .budget-card-top { flex-wrap: wrap; gap: 7px; }
  .budget-card-name { font-size: 14px; }
  .budget-card-amount { flex-direction: column; align-items: flex-start; gap: 3px; }
  .budget-card-footer { display: block; }
  .budget-card-footer > span { display: block; }
  .budget-card-footer > span + span { margin-top: 3px; }
  .budget-card-pending { min-height: 40px; }
  .budget-card-top .icon { margin-left: auto; }
  .budget-summary { padding-left: 16px; padding-right: 16px; }
  .budget-summary > div > span { font-size: 12px; }
  .connection-main strong { font-size: 14px; }
  .account-row { font-size: 14px; }
  .review-note .text-button { font-size: 12px; }
  .notice { font-size: 12px; }
  .demo-banner { flex-wrap: wrap; gap: 8px; }
  .demo-banner strong { font-weight: 600; font-size: 13px; }
  .demo-banner > div { flex-basis: 100%; }
  .demo-banner p { color: #957a39; }
  .hosted-session .button { white-space: normal; }
  .amount-input input { font-size: 25px; }
}
@media (max-width: 370px) {
  .sync-button { padding-left: 10px; padding-right: 10px; }
  .sync-button .icon { display: none; }
  .topbar-actions { gap: 8px; }
  .month-control input { width: 155px; }
  .metric-card { padding-left: 13px; padding-right: 13px; }
  .metric-amount { font-size: 25px; }
  .transaction-row, .transaction-table-heading { grid-template-columns: minmax(100px, 1fr) 108px; }
  .transaction-row.compact .merchant-avatar { display: none; }
  .budget-card { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 400px) {
  .sync-button { padding-left: 10px; padding-right: 10px; }
  .sync-button .icon { display: none; }
}

/* Overview: what is left to spend this month */
.spendable-card { padding: 22px; margin-bottom: 18px; }
.spendable-total { font-size: clamp(30px, 5vw, 42px); font-weight: 600; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }
.spendable-food { font-size: 15px; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: #edf2e6; }
.spendable-food.is-negative { background: var(--danger-bg); }
.spendable-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.spendable-item { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fcfdf8; font: inherit; font-size: 13px; cursor: pointer; min-width: 0; }
.spendable-item > strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.registration-checks { margin: 18px 0; }
.registration-line > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.registration-line.is-warning { background: var(--danger-bg); padding-left: 8px; padding-right: 8px; }
.payoff-section .projection-metrics { margin-bottom: 16px; }
.legacy-plan { margin: 8px 0 24px; }
.legacy-plan-body { white-space: pre-wrap; font: inherit; font-size: 13px; color: var(--muted); }

/* Login page */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 380px; padding: 32px 28px 22px; }
.login-icon { display: block; margin-bottom: 14px; }
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-intro { color: var(--muted); margin: 0 0 22px; }
.login-card .form-field input { font-size: 16px; min-height: 44px; }
.login-submit { width: 100%; }
.login-note { margin: 16px 0 0; }