:root {
  --ink: #17221b;
  --muted: #68746c;
  --paper: #f5f3ed;
  --surface: #fffefa;
  --line: #deded5;
  --green: #176b45;
  --green-dark: #0d5033;
  --green-soft: #e3f0e8;
  --lime: #d7e87b;
  --red: #ad352f;
  --red-soft: #fae8e4;
  --shadow: 0 2px 8px rgba(24, 45, 32, .05);
  --radius: 6px;
}

* { box-sizing: border-box; }
html { color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { margin: 0; min-height: 100vh; background: var(--paper); }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }
button, input, select { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .3rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
h2 { font-size: 1.1rem; }

.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(222, 222, 213, .9); background: rgba(245, 243, 237, .92); backdrop-filter: blur(14px); }
.nav-shell { position: relative; display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 1.25rem)); min-height: 52px; margin: auto; }
.brand, .auth-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; }
.brand-mark { display: inline-grid; width: 30px; height: 30px; place-items: center; border-radius: 4px; color: white; background: var(--green); font: 700 .9rem/1 Georgia, serif; }
.main-nav { display: flex; margin-left: auto; align-items: center; gap: 1.1rem; font-size: .86rem; font-weight: 650; }
.main-nav a { color: #47534b; }
.main-nav form { margin: 0; }
.nav-logout { padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 4px; color: #47534b; background: var(--surface); cursor: pointer; }
.header-actions { display: flex; margin-left: .75rem; align-items: center; gap: .45rem; }
.theme-toggle { display: inline-grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 4px; color: #47534b; background: var(--surface); cursor: pointer; }
.theme-toggle:hover { color: var(--green); border-color: #8eb19b; }
.theme-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { fill: currentColor; stroke: none; }
.theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
.menu-button { display: none; padding: .45rem .65rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }

.page-shell { width: min(1180px, calc(100% - 1.25rem)); margin: 0 auto; padding: 1.35rem 0 2.5rem; }
.auth-shell { display: grid; width: 100%; min-height: 100vh; padding: 2rem; place-items: center; background: #e8eee9; }
.page-heading { margin-bottom: 1.2rem; }
.heading-with-action, .budget-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.budget-heading { margin-bottom: .9rem; }
.eyebrow, .section-label { margin-bottom: .35rem; color: var(--green); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.muted { color: var(--muted); }
.back-link { display: inline-block; margin-bottom: .65rem; color: var(--muted); font-size: .84rem; font-weight: 650; }
.narrow-page { width: min(590px, 100%); margin: auto; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.settings-panel { padding: .9rem; }
.settings-divider { display: grid; margin-top: .25rem; padding-top: .75rem; gap: .15rem; border-top: 1px solid var(--line); }
.settings-divider strong { font-size: .88rem; }
.settings-divider span { color: var(--muted); font-size: .75rem; }
.heading-actions { display: flex; gap: .5rem; }
.heading-actions form { margin: 0; }

.button { display: inline-flex; min-height: 34px; padding: .4rem .65rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 4px; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .15s ease; }
.button:hover { transform: none; }
.button-primary { color: white; background: var(--green); }
.button-primary:hover { color: white; background: var(--green-dark); }
.button-secondary { border-color: var(--line); color: var(--ink); background: white; }
.button-full { width: 100%; }
.button-large { padding-inline: 1rem; }
.text-link { font-size: .88rem; font-weight: 750; }

.flash { margin-bottom: 1.3rem; padding: .75rem .9rem; border: 1px solid; border-radius: 4px; }
.flash-notice { border-color: #b5d5c1; color: var(--green-dark); background: var(--green-soft); }
.flash-alert, .error-panel { border-color: #edc4bd; color: #7d211c; background: var(--red-soft); }
.error-panel { margin-bottom: 1rem; padding: .75rem .9rem; border: 1px solid #edc4bd; border-radius: 4px; font-size: .9rem; }
.error-panel ul { margin-bottom: 0; padding-left: 1.2rem; }

.auth-card { width: min(440px, 100%); padding: 1.75rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--shadow); }
.auth-card-wide { width: min(680px, 100%); }
.auth-brand { margin-bottom: 2.3rem; }
.auth-card h1 { font-size: 1.9rem; }
.auth-links { display: flex; margin: 1.2rem 0 0; flex-wrap: wrap; justify-content: space-between; gap: .75rem; color: var(--muted); font-size: .88rem; }

.stack-form { display: grid; gap: .75rem; }
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.field { display: grid; gap: .42rem; }
.field label { color: #3e4a42; font-size: .83rem; font-weight: 750; }
.field input, .field select, .inline-edit-form input:not([type="submit"]):not([type="checkbox"]), .inline-edit-form select, .envelope-edit-form input:not([type="submit"]):not([type="checkbox"]), .envelope-edit-form select { width: 100%; min-height: 36px; padding: .45rem .55rem; border: 1px solid #cfd2ca; border-radius: 4px; color: var(--ink); background: white; outline: none; }
.field input:focus, .field select:focus, .inline-edit-form input:not([type="submit"]):not([type="checkbox"]):focus, .inline-edit-form select:focus, .envelope-edit-form input:not([type="submit"]):not([type="checkbox"]):focus, .envelope-edit-form select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 107, 69, .12); }
.field-hint { margin: -.1rem 0 0; color: var(--muted); font-size: .78rem; }
.money-input, .percent-input { display: flex; align-items: center; border: 1px solid #cfd2ca; border-radius: 4px; background: white; overflow: hidden; }
.money-input:focus-within, .percent-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23, 107, 69, .12); }
.money-input span, .percent-input span { padding-left: .85rem; color: var(--muted); font-size: .84rem; font-weight: 800; }
.money-input input, .percent-input input { min-width: 0; width: 100%; min-height: 36px; padding: .45rem .55rem; border: 0; outline: 0; text-align: right; background: transparent; }
.percent-input span { order: 2; padding: 0 .8rem 0 0; }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.budget-card { padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: var(--shadow); transition: border .15s ease; }
.budget-card:hover { transform: none; border-color: #8eb19b; color: var(--ink); }
.card-topline { display: flex; align-items: center; justify-content: space-between; }
.budget-badge { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 4px; color: var(--green-dark); background: var(--green-soft); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.arrow { color: var(--green); font-size: 1.25rem; }
.budget-card h2 { margin: 1rem 0; font-family: Georgia, serif; font-size: 1.55rem; }
.budget-dates { min-height: 1.2rem; margin: -.55rem 0 1rem; color: var(--muted); font-size: .78rem; }
.empty-state { padding: 4rem 2rem; text-align: center; }
.empty-icon { display: grid; width: 50px; height: 50px; margin: 0 auto 1rem; place-items: center; border-radius: 4px; color: var(--green-dark); background: var(--lime); font-weight: 900; }

.budget-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(270px, .75fr); gap: .75rem; align-items: start; }
.comparison-toolbar { display: flex; margin-bottom: .65rem; padding: .5rem .65rem; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.comparison-toolbar form { display: flex; align-items: center; gap: .4rem; }
.comparison-toolbar label { color: var(--muted); font-size: .75rem; font-weight: 750; }
.comparison-toolbar select { min-height: 32px; padding: .3rem .45rem; border: 1px solid #cfd2ca; border-radius: 4px; background: white; }
.comparison-toolbar > span { color: var(--muted); font-size: .72rem; }
.comparison-toolbar .text-link { margin-left: auto; font-size: .72rem; }
.budget-main, .budget-sidebar, .targets-section { display: grid; gap: .65rem; }
.budget-date-range { margin: .25rem 0 0; font-size: .88rem; }
.budget-date-actions { display: flex; align-items: baseline; gap: .5rem; }
.budget-details-button { padding: 0; border: 0; color: var(--green); background: transparent; font-size: .72rem; font-weight: 750; text-decoration: underline; cursor: pointer; }
.envelope-panel { overflow: hidden; }
.section-heading { display: flex; padding: .75rem .9rem .6rem; align-items: center; justify-content: space-between; gap: .75rem; }
.section-heading h2, .section-heading p { margin-bottom: 0; }
.compact-heading { padding: .2rem .2rem 0; }
.budget-envelope-tools { display: grid; padding: .65rem .9rem; gap: .45rem; border-top: 1px solid var(--line); background: #fafaf6; }
.budget-tool-row, .quick-create-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
.budget-tool-row select, .quick-create-row input, .quick-create-row select { min-width: 0; width: 100%; min-height: 34px; padding: .4rem .5rem; border: 1px solid #cfd2ca; border-radius: 4px; background: white; }
.budget-create-tools summary { width: max-content; color: var(--green); font-size: .8rem; font-weight: 750; cursor: pointer; }
.quick-create-grid { display: grid; margin-top: .55rem; gap: .45rem; }
.quick-create-row { grid-template-columns: minmax(130px, 1fr) minmax(130px, .8fr) auto; }
.category-create-row { grid-template-columns: minmax(0, 1fr) auto; }
.budget-tool-status { min-height: 1em; margin: 0; color: var(--green-dark); font-size: .72rem; }
.envelope-list { border-top: 1px solid var(--line); }
.envelope-category-group + .envelope-category-group { border-top: 1px solid var(--line); }
.envelope-category-heading { margin: 0; padding: .38rem .9rem; color: #4d5a52; background: #f0f1ec; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.envelope-row { display: grid; min-height: 52px; padding: .45rem .9rem; grid-template-columns: minmax(0, 1fr) 185px auto; align-items: center; gap: .75rem; border-bottom: 1px solid #ecece6; }
.envelope-list.comparing .envelope-row { grid-template-columns: minmax(0, 1fr) 279px auto; }
.envelope-row:last-child { border-bottom: 0; }
.envelope-name { display: grid; gap: .2rem; font-weight: 720; }
.envelope-name small { color: var(--green); font-size: .75rem; font-weight: 600; }
.envelope-name-line { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: .25rem .4rem; }
.sinking-fund-envelope-row { background: #f6f9fb; box-shadow: inset 3px 0 #6287a2; }
.sinking-fund-marker { display: inline-flex; flex: 0 0 auto; color: #426d8c; }
.sinking-fund-marker.funded { color: var(--green); }
.sinking-fund-icon { width: 15px; height: 14px; }
.sinking-fund-row-message:empty { display: none; }
.allocation-input { width: 100%; }
.allocation-input input { font-weight: 750; }
.allocation-cell { min-width: 0; }
.allocation-cell.comparing { display: grid; grid-template-columns: 185px 88px; align-items: center; gap: .35rem; }
.allocation-cell .allocation-input { min-width: 0; flex: 1; }
.comparison-delta { font-size: .68rem; font-weight: 800; white-space: nowrap; }
.allocation-cell .comparison-delta { width: 88px; text-align: right; }
.comparison-positive { color: var(--green); }
.comparison-negative { color: var(--red); }
.comparison-equal { color: var(--ink); }
.allocation-input input:disabled { color: #566159; background: #f1f2ee; cursor: not-allowed; }
.remove-envelope-button { padding: .2rem 0; border: 0; color: var(--muted); background: transparent; font-size: .72rem; font-weight: 700; cursor: pointer; }
.remove-envelope-button:hover { color: var(--red); }
.remove-envelope-button:disabled { color: #a5aaa5; cursor: not-allowed; }
.envelope-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.sinking-fund-funding-button { min-height: 23px; padding: .12rem .38rem; border: 1px solid #9bb4c7; border-radius: 4px; color: #315d7b; background: #edf4f8; font-size: .65rem; font-weight: 750; white-space: nowrap; cursor: pointer; }
.sinking-fund-funding-button:hover { border-color: #6287a2; background: #e2edf3; }
.sinking-fund-funding-button.funded { border-color: #9bc1ab; color: var(--green-dark); background: var(--green-soft); }
.funded-envelope-row { background: #fafbf8; }
.save-bar { position: sticky; bottom: .5rem; display: flex; padding: .5rem .65rem; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid #b9d2c2; border-radius: 6px; background: rgba(250, 255, 251, .98); box-shadow: var(--shadow); }
.save-bar p { margin: 0; color: var(--muted); font-size: .83rem; }
.summary-panel { padding: .8rem; }
.summary-list { display: grid; margin: 0; gap: .4rem; font-size: .9rem; }
.summary-list > div { display: flex; justify-content: space-between; gap: 1rem; }
.summary-list dt { color: var(--muted); }
.summary-list dd { margin: 0; font-weight: 750; }
.summary-list.compact { font-size: .86rem; }
.summary-total { margin-top: .25rem; padding-top: .55rem; border-top: 1px solid var(--line); font-size: .95rem; }
.income-summary-row { align-items: flex-start; flex-wrap: wrap; }
.income-summary-value { display: flex; min-width: 150px; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .3rem; }
.summary-edit-button { padding: 0; border: 0; color: var(--green); background: transparent; font-size: .75rem; font-weight: 750; cursor: pointer; text-decoration: underline; }
.income-summary-editor { display: flex; width: 140px; align-items: stretch; flex-direction: column; gap: .3rem; }
.income-summary-editor > .comparison-delta { align-self: flex-end; }
.summary-income-input { width: 140px; }
.summary-income-input input { min-height: 32px; padding-block: .3rem; }
.positive dd { color: var(--green); }
.negative dd, .negative { color: var(--red); }
.budget-warning { margin-top: .6rem; padding: .55rem; border-radius: 4px; color: #81251f; background: var(--red-soft); font-size: .78rem; line-height: 1.35; }
.hidden { display: none !important; }
.target-card { display: grid; padding: .5rem .6rem; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .6rem; box-shadow: none; }
.target-title { min-width: 0; }
.target-title h3 { margin: 0; overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.target-title span { color: var(--muted); font-size: .66rem; }
.target-amounts { margin: 0; align-self: center; text-align: right; white-space: nowrap; }
.target-amounts strong { font-size: .95rem; }
.target-amounts span { color: var(--muted); font-size: .7rem; }
progress { grid-column: 1 / -1; width: 100%; height: 5px; border: 0; border-radius: 99px; overflow: hidden; background: #e5e8e1; }
progress::-webkit-progress-bar { background: #e5e8e1; }
progress::-webkit-progress-value { border-radius: 99px; background: var(--green); }
progress::-moz-progress-bar { border-radius: 99px; background: var(--green); }
.target-foot { display: flex; grid-column: 1 / -1; margin-top: 0; align-items: center; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .66rem; }
.target-foot [data-role="percent"] { color: var(--green); font-weight: 850; }
.target-list { display: grid; gap: .65rem; }
.target-create-tool { display: grid; padding: .5rem .6rem; gap: .25rem; box-shadow: none; }
.target-create-row { display: grid; grid-template-columns: minmax(90px, 1fr) 72px auto; align-items: center; gap: .35rem; }
.target-create-row > select { min-width: 0; width: 100%; min-height: 32px; padding: .35rem .4rem; border: 1px solid #cfd2ca; border-radius: 4px; background: white; font-size: .76rem; }
.target-percentage-input input { min-height: 30px; padding: .3rem; font-size: .76rem; }
.target-percentage-input span { padding-right: .45rem; font-size: .72rem; }
.target-tool-status { min-height: 1em; margin: 0; color: var(--green-dark); font-size: .68rem; }
.sinking-funds-section { display: grid; gap: .65rem; }
.sinking-fund-list { display: grid; gap: .65rem; }
.sinking-fund-card { display: grid; padding: .55rem .6rem; gap: .45rem; box-shadow: none; }
.sinking-fund-title { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.sinking-fund-title h3 { margin: 0; font-size: .86rem; }
.sinking-fund-title span { color: var(--muted); font-size: .65rem; }
.sinking-fund-title strong { color: var(--green-dark); font-size: .9rem; white-space: nowrap; }
.sinking-fund-budget-line { display: grid; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.sinking-fund-budget-line > div { display: grid; gap: .1rem; }
.sinking-fund-budget-line dt { color: var(--muted); font-size: .63rem; }
.sinking-fund-budget-line dd { margin: 0; font-size: .76rem; font-weight: 750; }
.sinking-fund-card-goal { display: grid; gap: .25rem; color: var(--muted); font-size: .65rem; }
.sinking-fund-card-status { color: var(--muted); font-size: .68rem; }
.inline-empty { padding: 1.4rem; color: var(--muted); text-align: center; }
.inline-empty p:last-child { margin-bottom: 0; }
.status-pill, .role-pill, .target-chip { padding: .3rem .5rem; border-radius: 4px; color: #47534b; background: #e9ebe6; font-size: .72rem; font-weight: 700; }

.management-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.create-panel { position: sticky; top: 90px; padding: 1.3rem; }
.management-list { display: grid; gap: .75rem; }
.management-category-group { display: grid; gap: .45rem; }
.management-category-heading { display: flex; margin: .2rem 0 0; align-items: baseline; justify-content: space-between; color: #445047; font-size: .9rem; }
.management-category-heading span { color: var(--muted); font-size: .7rem; font-weight: 500; }
.management-card { padding: 1rem; }
.inline-edit-form { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 1fr) auto auto; align-items: center; gap: .75rem; }
.inline-edit-form .field { display: block; min-width: 0; }
.inline-edit-form .button { width: auto; white-space: nowrap; }
.envelope-edit-form { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(130px, .9fr) auto; align-items: center; gap: .55rem; }
.envelope-edit-form > .button { grid-column: 3; grid-row: 1; }
.envelope-options { display: flex; grid-column: 1 / -1; align-items: center; flex-wrap: wrap; gap: .55rem 1rem; }
.compact-money-field { display: flex; align-items: center; gap: .4rem; }
.compact-money-field > label { color: var(--muted); font-size: .75rem; font-weight: 700; }
.compact-money-field .money-input { width: 145px; }
.envelope-edit-form .money-input input:not([type="submit"]):not([type="checkbox"]),
.envelope-edit-form .money-input input:not([type="submit"]):not([type="checkbox"]):focus { border: 0; border-radius: 0; box-shadow: none; }
.sinking-fund-management { display: grid; margin-top: .65rem; padding-top: .65rem; gap: .5rem; border-top: 1px solid var(--line); }
.sinking-fund-balance-line { display: flex; align-items: end; justify-content: space-between; gap: .75rem; }
.sinking-fund-balance-line > div { display: grid; gap: .1rem; }
.sinking-fund-balance-line span, .sinking-fund-balance-line small { color: var(--muted); font-size: .7rem; }
.sinking-fund-balance-line strong { color: var(--green-dark); font-size: 1.05rem; }
.sinking-fund-goal-line { display: grid; gap: .2rem; color: var(--muted); font-size: .7rem; }
.sinking-fund-adjustment-form { display: grid; grid-template-columns: 150px minmax(120px, 1fr) auto; gap: .45rem; }
.sinking-fund-adjustment-form > input[type="text"] { min-width: 0; width: 100%; min-height: 34px; padding: .4rem .5rem; border: 1px solid #cfd2ca; border-radius: 4px; }
.category-edit-form { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; align-items: center; gap: .75rem; }
.category-management-form { grid-template-columns: minmax(180px, 1fr) auto; }
.category-edit-form .field { min-width: 0; }
.grow { min-width: 0; }
.toggle-field { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .8rem; white-space: nowrap; }
.toggle-field input { width: 17px; height: 17px; accent-color: var(--green); }
.percent-input.small { width: 115px; }
.usage-count { margin: .45rem 0 0; color: var(--muted); font-size: .72rem; }
.management-card-footer { display: flex; min-height: 30px; margin-top: .45rem; align-items: center; justify-content: space-between; gap: .6rem; }
.management-card-footer .usage-count { margin: 0; }
.management-card-footer form { margin: 0; }
.deletion-note { color: var(--muted); font-size: .68rem; text-align: right; }
.button-compact { padding: .35rem .55rem; font-size: .7rem; }
.budget-dialog { width: min(420px, calc(100% - 1rem)); padding: 1rem; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--surface); box-shadow: 0 12px 40px rgba(24, 45, 32, .18); }
.budget-dialog::backdrop { background: rgba(23, 34, 27, .35); }
.budget-dialog h2 { margin-bottom: .25rem; }
.budget-dialog p { margin-bottom: 0; font-size: .78rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .45rem; }
.target-management-card { display: flex; align-items: center; gap: .75rem; }
.target-management-card .category-edit-form { flex: 1; }
.target-management-card > form:last-child { margin: 0; }
.button-danger { border-color: #e3b8b3; color: #8a2923; background: #fff8f7; }
.button-danger:hover { color: #6f1e19; background: var(--red-soft); }

.net-calculator-layout { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: .8rem; align-items: start; }
.calculator-input-panel, .calculator-results { padding: .9rem; }
.calculator-input-panel { display: grid; gap: .85rem; }
.calculator-gross-input input { min-height: 42px; font-size: 1.1rem; font-weight: 750; }
.calculator-adjustments { padding-top: .7rem; border-top: 1px solid var(--line); }
.calculator-adjustments summary, .tax-reference-panel summary { color: var(--green); font-size: .82rem; font-weight: 750; cursor: pointer; }
.calculator-adjustments .field { margin-top: .65rem; }
.calculator-assumptions { display: grid; padding: .65rem; gap: .2rem; border-radius: 4px; color: var(--muted); background: #f0f1ec; font-size: .75rem; }
.calculator-assumptions strong { margin-bottom: .15rem; color: var(--ink); }
.calculator-results { display: grid; gap: .85rem; }
.net-income-result { display: flex; padding: .75rem; align-items: center; justify-content: space-between; gap: 1rem; border-left: 4px solid var(--green); background: var(--green-soft); }
.net-income-result span { color: var(--green-dark); font-size: .8rem; font-weight: 700; }
.net-income-result strong { color: var(--green-dark); font-size: clamp(1.35rem, 4vw, 1.8rem); white-space: nowrap; }
.calculator-breakdown { display: grid; margin: 0; gap: .45rem; }
.calculator-breakdown > div { display: flex; justify-content: space-between; gap: 1rem; }
.calculator-breakdown dt { color: var(--muted); font-size: .83rem; }
.calculator-breakdown dd { margin: 0; font-size: .86rem; font-weight: 750; text-align: right; }
.calculator-breakdown.compact { gap: .3rem; }
.calculator-breakdown.compact dt, .calculator-breakdown.compact dd { font-size: .78rem; }
.annual-tax-summary { padding-top: .75rem; border-top: 1px solid var(--line); }
.tax-reference-panel { margin-top: .8rem; padding: .8rem .9rem; }
.tax-table-wrap { margin-top: .65rem; overflow-x: auto; }
.tax-rate-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.tax-rate-table th, .tax-rate-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
.tax-rate-table th:last-child, .tax-rate-table td:last-child { text-align: right; }
.calculator-disclaimer { margin: .75rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }

.family-list { display: grid; gap: 1.1rem; }
.family-member { overflow: hidden; }
.member-heading { display: flex; padding: 1.2rem 1.3rem; align-items: center; gap: .8rem; }
.member-heading h2, .member-heading p { margin: 0; }
.member-heading p { color: var(--muted); font-size: .78rem; }
.avatar { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: var(--green-dark); background: var(--lime); font-weight: 850; }
.family-budget-list { border-top: 1px solid var(--line); }
.family-budget-row { display: grid; grid-template-columns: minmax(180px, 1fr) 1fr auto; padding: 1rem 1.3rem; align-items: center; gap: 1rem; border-bottom: 1px solid #ecece6; color: var(--ink); }
.family-budget-row:last-child { border: 0; }
.family-budget-row > div:first-child { display: grid; gap: .25rem; }
.family-budget-row > div:first-child span { color: var(--muted); font-size: .77rem; }
.family-targets { display: flex; flex-wrap: wrap; gap: .35rem; }
.target-chip.reached { color: var(--green-dark); background: var(--green-soft); }
.member-empty { padding: 0 1.3rem 1.2rem; }
.member-table { overflow: hidden; }
.member-row { display: flex; padding: 1rem 1.2rem; align-items: center; gap: .85rem; border-bottom: 1px solid var(--line); }
.member-row:last-child { border: 0; }
.member-row > form { margin: 0; }
.member-identity { display: grid; flex: 1; gap: .2rem; }
.member-identity span { color: var(--muted); font-size: .8rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

html[data-theme="dark"] {
  --ink: #e5ede7;
  --muted: #a4b1a8;
  --paper: #101612;
  --surface: #19211c;
  --line: #354139;
  --green: #6ed19b;
  --green-dark: #9bdfb8;
  --green-soft: #1d3a2b;
  --lime: #71853c;
  --red: #ff887f;
  --red-soft: #472522;
  --shadow: 0 2px 10px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .site-header { border-bottom-color: rgba(53, 65, 57, .92); background: rgba(16, 22, 18, .92); }
html[data-theme="dark"] .brand-mark { background: #28754f; }
html[data-theme="dark"] .main-nav a,
html[data-theme="dark"] .nav-logout,
html[data-theme="dark"] .menu-button,
html[data-theme="dark"] .theme-toggle { color: #c3cec6; }
html[data-theme="dark"] .nav-logout,
html[data-theme="dark"] .menu-button,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .button-secondary { border-color: var(--line); background: #202a24; }
html[data-theme="dark"] .theme-toggle:hover { color: var(--green); border-color: #53866a; }
html[data-theme="dark"] .auth-shell { background: #131b16; }
html[data-theme="dark"] .field label { color: #c3cec6; }
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .inline-edit-form input:not([type="submit"]):not([type="checkbox"]),
html[data-theme="dark"] .inline-edit-form select,
html[data-theme="dark"] .envelope-edit-form input:not([type="submit"]):not([type="checkbox"]),
html[data-theme="dark"] .envelope-edit-form select,
html[data-theme="dark"] .money-input,
html[data-theme="dark"] .percent-input,
html[data-theme="dark"] .comparison-toolbar select,
html[data-theme="dark"] .budget-tool-row select,
html[data-theme="dark"] .quick-create-row input,
html[data-theme="dark"] .quick-create-row select,
html[data-theme="dark"] .target-create-row > select,
html[data-theme="dark"] .sinking-fund-adjustment-form > input[type="text"] { border-color: #46544b; color: var(--ink); background: #111814; }
html[data-theme="dark"] input::placeholder { color: #7f8d84; }
html[data-theme="dark"] select option { color: var(--ink); background: #111814; }
html[data-theme="dark"] .button-primary { color: white; background: #28754f; }
html[data-theme="dark"] .button-primary:hover { background: #329061; }
html[data-theme="dark"] .flash-notice { border-color: #35694c; }
html[data-theme="dark"] .flash-alert,
html[data-theme="dark"] .error-panel { border-color: #77423d; color: #ffb1aa; }
html[data-theme="dark"] .budget-card:hover { border-color: #53866a; }
html[data-theme="dark"] .budget-envelope-tools { background: #151d18; }
html[data-theme="dark"] .envelope-category-heading { color: #bac6be; background: #242e28; }
html[data-theme="dark"] .envelope-row,
html[data-theme="dark"] .family-budget-row { border-bottom-color: #2d3831; }
html[data-theme="dark"] .sinking-fund-envelope-row { background: #172329; box-shadow: inset 3px 0 #6287a2; }
html[data-theme="dark"] .funded-envelope-row { background: #18251d; }
html[data-theme="dark"] .allocation-input input:disabled { color: #9ca8a0; background: #252e28; }
html[data-theme="dark"] .sinking-fund-funding-button { border-color: #52758e; color: #b6d6ec; background: #20323e; }
html[data-theme="dark"] .sinking-fund-funding-button:hover { border-color: #6e96b2; background: #294453; }
html[data-theme="dark"] .sinking-fund-funding-button.funded { border-color: #47765b; color: var(--green-dark); background: var(--green-soft); }
html[data-theme="dark"] .save-bar { border-color: #38654b; background: rgba(24, 33, 28, .98); }
html[data-theme="dark"] .budget-warning { color: #ffc0ba; }
html[data-theme="dark"] progress,
html[data-theme="dark"] progress::-webkit-progress-bar { background: #303b34; }
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .role-pill,
html[data-theme="dark"] .target-chip { color: #c1ccc4; background: #2a342e; }
html[data-theme="dark"] .management-category-heading { color: #c2cec5; }
html[data-theme="dark"] .budget-dialog::backdrop { background: rgba(0, 0, 0, .62); }
html[data-theme="dark"] .button-danger { border-color: #71433f; color: #ffaaa3; background: #2b1c1b; }
html[data-theme="dark"] .button-danger:hover { color: #ffc3bd; }
html[data-theme="dark"] .calculator-assumptions { background: #242e28; }
html[data-theme="dark"] .net-income-result { background: var(--green-soft); }
html[data-theme="dark"] .avatar { color: #e7f0d0; }

@media (max-width: 860px) {
  .menu-button { display: block; }
  .main-nav { display: none; position: absolute; top: 54px; right: 0; width: min(290px, 90vw); padding: .75rem; align-items: stretch; flex-direction: column; gap: .15rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); box-shadow: var(--shadow); }
  .main-nav a, .nav-logout { display: block; width: 100%; padding: .75rem; text-align: left; }
  .nav-open .main-nav { display: flex; }
  .budget-layout { grid-template-columns: 1fr; }
  .net-calculator-layout { grid-template-columns: 1fr; }
  .budget-sidebar { grid-row: 1; }
  .targets-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .targets-section .compact-heading { grid-column: 1 / -1; }
  .target-create-tool, .target-list, .targets-section > .inline-empty { grid-column: 1 / -1; }
  .target-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sinking-fund-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .management-layout { grid-template-columns: 1fr; }
  .create-panel { position: static; }
}

@media (max-width: 600px) {
  .page-shell { width: min(100% - .7rem, 1180px); padding-top: .85rem; }
  .auth-shell { padding: .75rem; }
  .auth-card { padding: 1rem; }
  .field-grid, .card-grid, .targets-section { grid-template-columns: 1fr; }
  .target-list { grid-template-columns: 1fr; }
  .sinking-fund-list { grid-template-columns: 1fr; }
  .heading-with-action, .budget-heading { align-items: flex-start; flex-direction: column; }
  .heading-with-action .button { width: 100%; }
  .heading-actions { width: 100%; }
  .heading-actions .button { flex: 1; }
  .heading-actions form { display: flex; flex: 1; }
  .heading-actions form .button { width: 100%; }
  .budget-heading { gap: .5rem; }
  .budget-date-range { margin-bottom: 0; }
  .envelope-row { grid-template-columns: minmax(0, 1fr) 112px auto; align-items: center; }
  .envelope-list.comparing .envelope-row { grid-template-columns: minmax(0, 1fr) 112px auto; }
  .envelope-name { min-width: 0; }
  .budget-tool-row, .quick-create-row, .category-create-row { grid-template-columns: 1fr; }
  .budget-tool-row .button, .quick-create-row .button { width: 100%; }
  .envelope-row { gap: .45rem; }
  .allocation-cell.comparing { display: flex; align-items: stretch; flex-direction: column; gap: .1rem; }
  .allocation-cell .comparison-delta { width: auto; min-height: .8rem; text-align: right; }
  .comparison-toolbar { align-items: stretch; flex-direction: column; }
  .comparison-toolbar form { align-items: stretch; flex-direction: column; }
  .comparison-toolbar .text-link { margin-left: 0; }
  .net-income-result { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .save-bar { bottom: .25rem; }
  .save-bar p { display: none; }
  .save-bar .button { width: 100%; }
  .inline-edit-form { grid-template-columns: 1fr; align-items: stretch; }
  .inline-edit-form .field, .inline-edit-form .percent-input, .inline-edit-form .button, .category-edit-form .field, .category-edit-form .button { width: 100%; }
  .envelope-edit-form { grid-template-columns: 1fr; align-items: stretch; }
  .envelope-edit-form > .button, .envelope-options { width: 100%; grid-column: 1; grid-row: auto; }
  .compact-money-field { width: 100%; margin-left: 0; }
  .compact-money-field .money-input { flex: 1; width: auto; }
  .sinking-fund-balance-line { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .sinking-fund-adjustment-form { grid-template-columns: 1fr; }
  .category-edit-form { grid-template-columns: 1fr; align-items: stretch; }
  .target-management-card { align-items: stretch; flex-direction: column; }
  .target-management-card .category-edit-form, .target-management-card > form:last-child, .target-management-card .button-danger { width: 100%; }
  .toggle-field { padding: .35rem 0; }
  .family-budget-row { grid-template-columns: 1fr auto; }
  .family-targets { grid-column: 1 / -1; grid-row: 2; }
  .member-row { align-items: flex-start; flex-wrap: wrap; }
  .role-pill { margin-left: 52px; }
}