:root {
  --navy: #123047;
  --navy-2: #1a405b;
  --teal: #0e7c73;
  --teal-dark: #09655e;
  --mint: #ddf5ee;
  --coral: #e56b6f;
  --coral-soft: #fce8e6;
  --cream: #f6f3ea;
  --paper: #ffffff;
  --canvas: #edf3f3;
  --ink: #17252f;
  --muted: #60727e;
  --line: #d8e1e5;
  --shadow: 0 14px 34px rgba(18, 48, 71, .08);
}

* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 80% 0, rgba(14,124,115,.08), transparent 31rem), var(--canvas); font-family: "Segoe UI", Aptos, system-ui, sans-serif; }
a { color: var(--teal-dark); text-decoration: none; }
button, input, select { font: inherit; }
button, .primary-button, .secondary-button, .file-picker { min-height: 42px; }

.topbar { position: sticky; top: 0; z-index: 50; min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 10px clamp(18px, 4vw, 58px); color: white; background: var(--navy); box-shadow: 0 4px 20px rgba(18,48,71,.16); }
.brand { display: flex; align-items: center; gap: 11px; color: white; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; color: var(--navy); background: var(--mint); font-weight: 800; font-size: 21px; }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: .01em; }
.brand small { margin-top: 2px; color: #bed0d9; font-size: 11px; }
.menu-toggle { min-height: 46px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 13px; padding: 8px 13px; color: white; background: var(--navy-2); cursor: pointer; font-weight: 750; }
.menu-toggle:hover { border-color: rgba(255,255,255,.48); background: #24506d; }
.menu-toggle:focus-visible, .menu-close:focus-visible, .drawer-nav a:focus-visible, .drawer-logout:focus-visible { outline: 3px solid rgba(14,124,115,.28); outline-offset: 2px; }
.menu-toggle-icon { width: 23px; display: grid; gap: 4px; }
.menu-toggle-icon i { display: block; height: 2px; border-radius: 999px; background: currentColor; }
.menu-backdrop { position: fixed; inset: 0; z-index: 80; width: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; padding: 0; background: rgba(8,26,38,.52); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s ease, visibility 0s linear .24s; }
.app-menu { position: fixed; top: 0; right: 0; z-index: 90; width: min(390px, calc(100vw - 24px)); height: 100vh; height: 100dvh; display: flex; flex-direction: column; color: var(--ink); background: white; box-shadow: -18px 0 46px rgba(8,26,38,.24); transform: translateX(105%); visibility: hidden; transition: transform .24s ease, visibility 0s linear .24s; }
body.menu-open { overflow: hidden; }
body.menu-open .menu-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
body.menu-open .app-menu { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.app-menu-head { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding: 15px 18px 14px 22px; }
.app-menu-head > div { display: grid; gap: 3px; }
.app-menu-head strong { color: var(--navy); font-size: 20px; }
.menu-close { width: 44px; min-height: 44px; border: 0; border-radius: 13px; color: var(--navy); background: var(--canvas); cursor: pointer; font-size: 30px; line-height: 1; }
.drawer-household { border-bottom: 1px solid var(--line); padding: 17px 22px; background: #f5f9f8; }
.drawer-household form { margin: 0 0 9px; }
.drawer-household select { margin-top: 7px; }
.drawer-manage-link { display: inline-flex; border-radius: 8px; padding: 4px 0; font-size: 11px; font-weight: 750; }
.drawer-nav { min-height: 0; display: grid; align-content: start; gap: 5px; padding: 16px 14px; overflow-y: auto; }
.drawer-nav a { display: flex; align-items: center; min-height: 44px; border-radius: 12px; padding: 10px 13px; color: var(--navy); font-size: 14px; font-weight: 720; }
.drawer-nav a:hover { color: var(--teal-dark); background: #eef7f5; }
.drawer-nav a[aria-current="page"] { color: var(--teal-dark); background: var(--mint); }
.drawer-nav a[aria-current="page"]::before { content: ""; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--teal); }
.app-menu-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 16px 22px max(18px, env(safe-area-inset-bottom)); background: var(--cream); }
.app-menu-foot > span { display: block; margin-bottom: 11px; color: var(--muted); font-size: 11px; }
.app-menu-foot form { margin: 0; }
.drawer-logout { width: 100%; border: 1px solid #9fb6bf; border-radius: 11px; padding: 10px 17px; color: var(--navy); background: white; cursor: pointer; font-weight: 750; }

.shell { width: min(1460px, calc(100% - 34px)); margin: 0 auto; padding: 38px 0 70px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.hero.compact { margin-bottom: 18px; }
.hero h1 { margin: 3px 0 7px; color: var(--navy); font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -.035em; }
.hero.compact h1 { font-size: 38px; }
.hero p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--teal); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
.hero-actions { display: flex; gap: 10px; }

.card { border: 1px solid rgba(216,225,229,.9); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 16px 18px; margin-bottom: 18px; }
.filter-form, .upload-form, .rule-form { display: flex; align-items: end; gap: 12px; }
label { color: var(--muted); font-size: 12px; font-weight: 700; }
input, select { display: block; width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; color: var(--ink); background: white; outline: none; }
input:focus, select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(14,124,115,.12); }
.file-picker { display: inline-flex; align-items: center; border: 1px dashed #8eb4b0; border-radius: 11px; padding: 9px 14px; color: var(--teal-dark); background: #f3fbf8; cursor: pointer; }
.file-picker input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; }
.primary-button, .secondary-button, .small-button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 11px; padding: 10px 17px; cursor: pointer; font-weight: 750; transition: transform .15s ease, background .15s ease; }
.primary-button { color: white; background: var(--teal); }
.primary-button:hover { background: var(--teal-dark); transform: translateY(-1px); }
.secondary-button { border: 1px solid #9fb6bf; color: var(--navy); background: white; }
.small-button { min-height: 34px; padding: 7px 11px; color: white; background: var(--navy); font-size: 12px; }
.text-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; color: var(--muted); background: white; cursor: pointer; font-size: 12px; font-weight: 750; }
.text-button:hover { color: var(--navy); background: #f5f9f8; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 18px; }
.kpi { min-height: 135px; border: 1px solid var(--line); border-radius: 20px; padding: 23px; background: white; box-shadow: var(--shadow); }
.kpi-income { background: linear-gradient(140deg, #e8faf4, white 82%); }
.kpi-expense { background: linear-gradient(140deg, #fff0ef, white 82%); }
.kpi-net { background: linear-gradient(140deg, #faf7ec, white 82%); }
.kpi-fees { color: var(--ink); background: linear-gradient(140deg, #fff3da, white 82%); transition: transform .15s ease, border-color .15s ease; }
.kpi-fees:hover { border-color: #e1b45c; transform: translateY(-2px); }
.kpi span, .kpi small { display: block; color: var(--muted); }
.kpi span { font-size: 13px; font-weight: 700; }
.kpi strong { display: block; margin: 12px 0 5px; color: var(--navy); font-size: clamp(23px, 2.5vw, 33px); letter-spacing: -.03em; }
.kpi small { font-size: 11px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .8fr); gap: 18px; margin-bottom: 18px; }
.lower-grid { grid-template-columns: 1fr 1fr; }
.panel { padding: 22px; overflow: hidden; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.panel-heading h2 { margin: 3px 0 0; color: var(--navy); font-size: 21px; letter-spacing: -.02em; }
.legend { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.income { background: var(--teal); }
.dot.expense { margin-left: 8px; background: var(--coral); }
.chart-heading-tools { display: grid; justify-items: end; gap: 9px; }
.chart-switcher { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 11px; padding: 3px; background: #f4f8f8; }
.chart-switcher button { min-height: 30px; border: 0; border-radius: 8px; padding: 5px 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; }
.chart-switcher button:hover { color: var(--teal-dark); background: white; }
.chart-switcher button.is-active { color: white; background: var(--teal); box-shadow: 0 2px 7px rgba(14,124,115,.2); }
.chart-view[hidden] { display: none !important; }

.month-chart { display: flex; align-items: stretch; gap: clamp(5px, 1.3vw, 16px); height: 255px; padding: 20px 6px 0; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 62px, rgba(216,225,229,.62) 63px); }
.month-column { flex: 1; min-width: 22px; display: flex; flex-direction: column; align-items: center; }
.bars { flex: 1; width: 100%; display: flex; align-items: end; justify-content: center; gap: 3px; }
.bar { width: min(14px, 42%); min-height: 1px; border-radius: 5px 5px 1px 1px; }
.bar.income { background: var(--teal); }
.bar.expense { background: var(--coral); }
.month-column > span { margin: 8px 0 7px; color: var(--muted); font-size: 10px; }
.line-chart { min-height: 255px; }
.line-chart svg { display: block; width: 100%; height: 225px; overflow: visible; }
.line-grid { stroke: #dfe7e9; stroke-width: 1; }
.line-series { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.line-series.income { stroke: var(--teal); }
.line-series.expenses { stroke: var(--coral); }
.line-point { stroke: white; stroke-width: 2; }
.line-point.income { fill: var(--teal); }
.line-point.expenses { fill: var(--coral); }
.line-chart-labels { display: flex; justify-content: space-between; gap: 2px; border-top: 1px solid var(--line); padding: 8px 2px 0; color: var(--muted); font-size: 10px; }
.line-chart-labels span { flex: 1; text-align: center; }
.category-bars { display: grid; gap: 16px; }
.category-link { display: block; margin: -7px; padding: 7px; border-radius: 12px; color: var(--ink); transition: background .15s ease, transform .15s ease; }
.category-link:hover { background: #f1f8f6; transform: translateX(2px); }
.category-row > div:first-child { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 7px; font-size: 12px; }
.category-row strong { color: var(--navy); }
.category-fee { display: block; margin-top: 6px; color: #a55e12; font-size: 10px; font-weight: 750; }
.track { height: 8px; border-radius: 999px; background: #eaf0f1; overflow: hidden; }
.track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), #42a99f); }
.category-columns { min-height: 300px; display: flex; align-items: stretch; gap: 8px; padding: 7px 2px 2px; overflow-x: auto; }
.category-column-link { min-width: 66px; flex: 1; display: grid; grid-template-rows: auto 1fr 38px; gap: 6px; color: var(--ink); text-align: center; }
.category-column-link:hover .category-column-track i { background: var(--teal-dark); }
.category-column-value { color: var(--navy); font-size: 9px; font-weight: 750; white-space: nowrap; }
.category-column-track { min-height: 190px; display: flex; align-items: end; justify-content: center; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 46px, rgba(216,225,229,.58) 47px); }
.category-column-track i { width: min(30px, 66%); min-height: 2px; border-radius: 6px 6px 1px 1px; background: linear-gradient(180deg, #42a99f, var(--teal)); transition: background .15s ease; }
.category-column-label { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.category-pie-layout { min-height: 300px; display: grid; grid-template-columns: minmax(145px, .8fr) minmax(170px, 1.2fr); align-items: center; gap: 20px; }
.category-pie { width: min(190px, 100%); aspect-ratio: 1; justify-self: center; border: 8px solid white; border-radius: 50%; background: #eaf0f1; box-shadow: 0 0 0 1px var(--line), 0 12px 28px rgba(18,48,71,.1); }
.category-pie.is-empty { background: #eaf0f1; }
.category-pie-legend { display: grid; gap: 7px; }
.category-pie-legend a { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 7px; border-radius: 8px; padding: 5px 6px; color: var(--ink); font-size: 9px; }
.category-pie-legend a:hover { background: #f1f8f6; }
.category-pie-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.category-pie-legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-pie-legend strong { color: var(--navy); white-space: nowrap; }

.summary-panel, .review-panel { margin-bottom: 18px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); background: #f7faf9; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
td.money { text-align: right; font-variant-numeric: tabular-nums; }
.positive { color: var(--teal-dark); }
.negative { color: #c45156; }

.review-list { display: grid; }
.review-item { display: grid; grid-template-columns: minmax(260px, 1.5fr) 120px minmax(210px, .8fr) auto auto auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.review-item.bulk-row { grid-template-columns: 32px minmax(260px, 1.5fr) 120px minmax(210px, .8fr) auto auto auto; }
.review-item:first-child { border-top: 0; }
.review-item select { margin: 0; }
.bulk-select-cell { display: grid; place-items: center; align-self: stretch; min-height: 38px; cursor: pointer; }
.bulk-select-cell input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); cursor: pointer; }
.transaction-copy { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.transaction-copy > span { color: var(--muted); font-size: 11px; }
.transaction-copy strong, .purpose-details summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-copy strong { color: var(--navy); font-size: 13px; }
.purpose-details { min-width: 0; color: var(--muted); font-size: 11px; }
.purpose-details summary { cursor: pointer; list-style-position: inside; }
.purpose-details summary::marker { color: var(--teal); }
.purpose-close { display: none; color: var(--teal-dark); font-weight: 750; }
.purpose-details[open] .purpose-preview { display: none; }
.purpose-details[open] .purpose-close { display: inline; }
.purpose-details[open] { grid-column: 1; overflow: visible; }
.purpose-details[open] summary { white-space: normal; }
.purpose-details p { margin: 7px 0 2px; border-left: 3px solid var(--mint); padding: 8px 10px; color: var(--ink); background: #f7fbfa; line-height: 1.45; overflow-wrap: anywhere; }
.transaction-amount { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.fee-badge { display: block; margin-top: 5px; border-radius: 999px; padding: 4px 7px; color: #9b4d0c; background: #fff0d2; font-size: 10px; white-space: nowrap; }
.check { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.check input { width: auto; margin: 0; }
.empty { color: var(--muted); }

.rule-form { display: grid; grid-template-columns: 1fr 1fr; }
.rule-form .primary-button { align-self: end; }
.import-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 12px; }
.import-list > div:first-child { border-top: 0; }
.import-list > div > span { min-width: 0; }
.import-list > div > span:last-child { text-align: right; white-space: nowrap; }
.import-list strong, .import-list small { display: block; }
.import-list strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--navy); }
.import-list small { margin-top: 3px; color: var(--muted); }
.filter-form.wide { width: 100%; }
.filter-form .grow { flex: 1; }
.filter-check { align-self: center; margin-top: 20px; }
.transactions-card { padding-top: 8px; }
.bulk-category-form { display: grid; grid-template-columns: auto minmax(90px, .25fr) minmax(260px, 1fr) minmax(250px, 1fr); align-items: end; gap: 12px; margin: 10px 0 8px; border: 1px solid var(--line); border-radius: 15px; padding: 13px; background: #f5f9f8; }
.bulk-category-form > * { min-width: 0; }
.bulk-category-form .bulk-select-all { align-self: center; color: var(--navy); }
.bulk-category-form .bulk-select-all input { width: 18px; height: 18px; accent-color: var(--teal); }
.bulk-category-form .check { align-items: flex-start; line-height: 1.35; white-space: normal; }
.bulk-selection-count { min-height: 42px; display: flex; align-items: center; color: var(--teal-dark); font-size: 12px; white-space: nowrap; }
.bulk-selection-help { grid-column: 1 / -1; margin: -3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.bulk-selection-help[hidden] { display: none; }
.bulk-category-label select { min-width: 190px; }
.bulk-primary-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: stretch; gap: 9px; }
.bulk-contract-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 9px; }
.bulk-category-form button:disabled { color: #eff4f4; background: #91aaa9; cursor: not-allowed; transform: none; }

.research-search-card { margin-bottom: 18px; padding: 20px; }
.research-form { display: grid; grid-template-columns: minmax(260px, 1fr) 120px 150px minmax(180px, .7fr) auto auto; align-items: end; gap: 12px; }
.research-query input { min-height: 48px; font-size: 16px; }
.research-examples { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 11px; }
.research-examples a { border-radius: 999px; padding: 6px 11px; color: var(--teal-dark); background: var(--mint); font-weight: 750; }
.shortcut-manager { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 13px; }
.shortcut-manager > summary { color: var(--teal-dark); cursor: pointer; font-size: 12px; font-weight: 750; }
.shortcut-manager-body { display: grid; gap: 15px; margin-top: 13px; border-radius: 15px; padding: 15px; background: #f5f9f8; }
.shortcut-create-form, .shortcut-update-form { display: grid; grid-template-columns: minmax(140px, .65fr) minmax(220px, 1fr) auto; align-items: end; gap: 10px; }
.shortcut-admin-list { display: grid; }
.shortcut-admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; border-top: 1px solid var(--line); padding: 11px 0; }
.shortcut-admin-row:last-child { padding-bottom: 0; }
.shortcut-admin-row .danger-button { min-height: 42px; }
.research-kpis .kpi { min-height: 122px; }
.research-results { margin-bottom: 18px; }
.research-list { display: grid; }
.research-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) 130px; align-items: start; gap: 15px; padding: 16px 0; border-top: 1px solid var(--line); }
.research-item.has-selection { grid-template-columns: 32px 64px minmax(0, 1fr) 130px; }
.research-item:first-child { border-top: 0; }
.research-item time { display: grid; color: var(--muted); font-size: 11px; }
.research-item time strong { color: var(--navy); font-size: 13px; }
.research-copy { min-width: 0; }
.research-copy > strong, .research-copy > span { display: block; }
.research-copy > strong { overflow: hidden; color: var(--navy); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.research-copy > span { margin: 3px 0 6px; color: var(--teal-dark); font-size: 10px; }
.research-copy .purpose-details summary { white-space: normal; }
.transaction-title-link { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
.transaction-title-link:hover { color: var(--teal-dark); text-decoration-color: currentColor; }
.research-edit-link { display: block; margin-top: 8px; color: var(--teal-dark); font-size: 10px; font-weight: 750; white-space: nowrap; }
.research-hint { margin-bottom: 18px; }

.transaction-detail-card { margin-bottom: 18px; padding: clamp(20px, 4vw, 38px); }
.transaction-detail-head { display: flex; align-items: start; justify-content: space-between; gap: 22px; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
.transaction-detail-head span, .transaction-detail-head small { color: var(--muted); }
.transaction-detail-head h2 { margin: 5px 0; color: var(--navy); font-size: clamp(23px, 4vw, 34px); }
.transaction-detail-amount { font-size: clamp(24px, 4vw, 34px); text-align: right; white-space: nowrap; }
.transaction-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.transaction-facts div { border-radius: 13px; padding: 13px; background: #f5f9f8; }
.transaction-facts dt { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.transaction-facts dd { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--navy); font-size: 12px; }
.transaction-purpose-full { border-left: 4px solid var(--mint); padding: 12px 16px; background: #f8fbfa; }
.transaction-purpose-full > span { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.transaction-purpose-full p { margin: 8px 0 0; line-height: 1.55; overflow-wrap: anywhere; }
.transaction-detail-form { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) auto; align-items: end; gap: 16px; margin-top: 24px; }
.transaction-detail-options { display: grid; gap: 9px; padding-bottom: 4px; }
.transfer-badge { color: var(--teal-dark); font-weight: 800; text-decoration: none; }
.transfer-badge:hover { text-decoration: underline; }
.transfer-difference { display: block; margin-top: 4px; color: #9b4d0c; font-size: 10px; font-weight: 800; }
.transaction-transfer-box { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-top: 18px; border: 1px solid #9ed4c8; border-left: 5px solid var(--teal); border-radius: 14px; padding: 17px 18px; background: #edf9f5; }
.transaction-transfer-box > div { min-width: 0; }
.transaction-transfer-box strong, .transaction-transfer-box p, .transaction-transfer-box small { display: block; }
.transaction-transfer-box > div > strong { margin-top: 5px; color: var(--navy); font-size: 17px; }
.transaction-transfer-box p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.transaction-transfer-box small { margin-top: 5px; overflow-wrap: anywhere; color: var(--teal-dark); font-size: 10px; }
.transfer-difference-callout { display: grid; gap: 3px; margin-top: 12px; border-radius: 11px; padding: 10px 12px; color: #75420d; background: #fff2d8; }
.transfer-difference-callout strong { font-size: 13px; }
.transfer-difference-callout span { font-size: 10px; line-height: 1.45; }
.transfer-overview { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(360px, 1.15fr) auto; align-items: center; gap: 22px; margin-bottom: 18px; padding: 20px 22px; border-left: 5px solid var(--teal); }
.transfer-overview h2 { margin: 4px 0; color: var(--navy); font-size: 22px; }
.transfer-overview p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.transfer-overview-values { display: grid; grid-template-columns: repeat(3, minmax(95px, 1fr)); gap: 8px; }
.transfer-overview-values span { border-radius: 11px; padding: 10px 12px; background: #f5f9f8; }
.transfer-overview-values small, .transfer-overview-values strong { display: block; }
.transfer-overview-values small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.transfer-overview-values strong { margin-top: 3px; color: var(--navy); font-size: 14px; }
.transfer-overview-values .has-difference { background: #fff2d8; }
.transfer-overview-values .has-difference strong { color: #8b4b0a; }

.savings-toolbar { justify-content: flex-start; }
.savings-kpis .kpi { min-height: 125px; }
.savings-overview-grid { grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); }
.savings-method { display: grid; align-content: start; gap: 10px; }
.savings-signal { border-radius: 13px; padding: 13px 15px; }
.savings-signal strong, .savings-signal span, .savings-signal a { display: block; }
.savings-signal span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.savings-signal a { margin-top: 7px; font-size: 11px; font-weight: 750; }
.savings-signal.safe { border-left: 4px solid var(--teal); background: #edf9f5; }
.savings-signal.avoidable { border-left: 4px solid #d06b37; background: #fff1e8; }
.savings-signal.review { border-left: 4px solid #e1b45c; background: #fff8e9; }
.savings-results { margin-bottom: 18px; }
.savings-fee-amount { display: grid; justify-items: end; gap: 5px; text-align: right; white-space: nowrap; }
.savings-fee-amount span { color: var(--muted); font-size: 10px; }
.savings-fee-amount strong { color: #9b4d0c; font-size: 14px; }
.savings-fee-amount a { color: var(--teal-dark); font-size: 10px; font-weight: 750; }

.import-drop-card { margin-bottom: 18px; padding: clamp(22px, 4vw, 38px); }
.import-copy { display: flex; align-items: center; gap: 18px; }
.import-copy h2 { margin: 0 0 6px; color: var(--navy); font-size: 24px; }
.import-copy p { max-width: 800px; margin: 0; color: var(--muted); line-height: 1.5; }
.import-icon { display: grid; place-items: center; flex: 0 0 auto; width: 66px; height: 66px; border-radius: 20px; color: var(--teal-dark); background: var(--mint); font-size: 15px; font-weight: 850; letter-spacing: .08em; }
.import-main-form { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(240px, 1fr) auto; align-items: end; gap: 12px; margin: 28px 0 22px; }
.account-hint-field small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.35; }
.import-picker { justify-content: center; min-height: 54px; }
.import-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.import-facts span { border-radius: 13px; padding: 12px 14px; color: var(--muted); background: #f5f9f8; font-size: 11px; line-height: 1.4; }
.import-facts strong { display: block; margin-bottom: 3px; color: var(--navy); }
.import-history-panel { margin-bottom: 18px; }
.year-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.year-chips a, .year-chips span { border-radius: 999px; padding: 6px 10px; color: var(--teal-dark); background: var(--mint); font-size: 11px; font-weight: 750; }
.import-history-list { display: grid; }
.import-history-list article { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(180px, auto) auto; align-items: center; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.import-history-list article:first-child { border-top: 0; }
.import-history-list article > * { min-width: 0; }
.import-history-list strong, .import-history-list small, .import-history-list span { display: block; }
.import-history-list article > div:first-child strong { overflow: hidden; color: var(--navy); text-overflow: ellipsis; white-space: nowrap; }
.import-history-list small, .import-history-list span { margin-top: 4px; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.import-numbers { text-align: right; }
.import-history-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.import-history-actions form { margin: 0; }

.household-import-notice { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; border-left: 4px solid var(--teal); border-radius: 12px; padding: 12px 15px; color: var(--navy); background: var(--mint); }
.household-import-notice span { color: var(--muted); font-size: 11px; text-align: right; }
.household-create-panel { margin-bottom: 18px; }
.household-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.household-card { padding: 22px; }
.household-card.is-active { border-color: #74bdb4; box-shadow: 0 14px 36px rgba(14,124,115,.13); }
.household-card.is-demo { border-color: #d4b45f; background: linear-gradient(145deg, #fffdf6 0%, #ffffff 58%); }
.household-card-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.household-card-head h2 { margin: 5px 0 0; color: var(--navy); font-size: 23px; }
.household-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.household-actions form { margin: 0; }
.active-household-badge { display: inline-block; border-radius: 999px; padding: 5px 9px; color: var(--teal-dark); background: var(--mint); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.demo-household-badge { display: inline-block; border-radius: 999px; padding: 5px 9px; color: #624915; background: #fff0c9; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.household-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 20px 0 15px; }
.household-stats div { border-radius: 13px; padding: 12px; background: #f5f9f8; }
.household-stats strong, .household-stats span { display: block; }
.household-stats strong { color: var(--navy); font-size: 17px; }
.household-stats span { margin-top: 3px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.household-editor { border-top: 1px solid var(--line); padding-top: 13px; }
.household-editor > summary { color: var(--teal-dark); cursor: pointer; font-size: 11px; font-weight: 750; }
.household-editor-body { display: grid; gap: 13px; margin-top: 13px; border-radius: 13px; padding: 14px; background: #f5f9f8; }
.household-editor-body small { color: var(--muted); line-height: 1.4; }
.household-rename-form { display: flex; align-items: end; gap: 10px; }
.household-access-label { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.household-member-note { border-top: 1px solid var(--line); padding-top: 13px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.demo-household-note { display: grid; gap: 4px; color: #65572f; }
.demo-household-note strong { color: var(--navy); }

.account-card { max-width: 980px; }
.account-password-form { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)) auto; align-items: end; gap: 12px; }
.user-create-panel { margin-bottom: 18px; }
.role-matrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.role-matrix article { padding: 17px; }
.role-matrix strong, .role-matrix small { display: block; }
.role-matrix strong { margin: 5px 0; color: var(--navy); }
.role-matrix small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.user-create-form { display: grid; grid-template-columns: minmax(135px, .7fr) minmax(180px, 1fr) minmax(150px, .8fr) 145px minmax(165px, 1fr) minmax(165px, 1fr) auto; align-items: end; gap: 11px; }
.user-admin-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.user-admin-card { padding: 22px; }
.user-admin-card.is-inactive { opacity: .7; }
.user-card-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.user-card-head h2 { margin: 4px 0 3px; color: var(--navy); font-size: 22px; }
.user-card-head small { color: var(--muted); }
.user-status { border-radius: 999px; padding: 6px 10px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.user-status.active { color: var(--teal-dark); background: var(--mint); }
.user-status.inactive { color: #8b3b40; background: var(--coral-soft); }
.user-editor { margin-top: 17px; border-top: 1px solid var(--line); padding-top: 13px; }
.user-editor > summary { color: var(--teal-dark); cursor: pointer; font-size: 11px; font-weight: 750; }
.user-editor-body { display: grid; gap: 14px; margin-top: 12px; border-radius: 14px; padding: 14px; background: #f5f9f8; }
.user-settings-form { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10px; }
.user-settings-form .secondary-button { grid-column: 1 / -1; justify-self: start; }
.user-active-check { align-self: center; margin-top: 20px; }
.user-password-form { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.user-password-form .secondary-button { grid-column: 1 / -1; justify-self: start; }
.membership-form { display: grid; gap: 9px; margin-top: 12px; }
.membership-form label { display: grid; grid-template-columns: minmax(150px, 1fr) 150px; align-items: center; gap: 12px; }
.membership-form label select { margin: 0; }
.membership-form small { color: var(--muted); line-height: 1.4; }
.membership-form .demo-membership-row { border-radius: 11px; padding: 9px 11px; background: #fff8e8; }
.demo-membership-row span small { display: block; margin-top: 3px; font-size: 9px; font-weight: 500; }
.demo-membership-row select:disabled { color: #624915; opacity: 1; background: #fffdf7; }

.panel-note { color: var(--muted); }
.recurring-panel { margin-bottom: 18px; }
.recurring-list { display: grid; }
.recurring-item { display: grid; grid-template-columns: minmax(250px, 1.45fr) minmax(115px, .55fr) minmax(120px, .62fr) minmax(150px, .7fr) auto; align-items: center; gap: 18px; padding: 17px 0; border-top: 1px solid var(--line); }
.recurring-item:first-child { border-top: 0; }
.recurring-item.is-inactive { background: linear-gradient(90deg, rgba(237,243,243,.62), transparent 72%); }
.recurring-main { min-width: 0; }
.recurring-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.recurring-title > div { min-width: 0; }
.recurring-title strong, .recurring-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recurring-title strong { color: var(--navy); font-size: 14px; }
.recurring-title small { margin-top: 3px; color: var(--teal-dark); font-size: 11px; }
.recurring-main p { margin: 8px 0 0 22px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.recurring-state-note { margin: 10px 0 0 22px; border-left: 3px solid #d5a53e; border-radius: 8px; padding: 8px 10px; color: #715212; background: #fff7e5; font-size: 10px; line-height: 1.4; }
.recurring-state-note strong, .recurring-state-note span { display: block; }
.recurring-state-note span { margin-top: 2px; }
.recurring-price-change { margin: 10px 0 0 22px; border-left: 3px solid var(--teal); border-radius: 8px; padding: 8px 10px; color: var(--teal-dark); background: #edf9f5; font-size: 10px; line-height: 1.4; }
.recurring-price-change strong, .recurring-price-change span { display: block; }
.recurring-price-change span { margin-top: 2px; }
.contract-review-panel { border-color: #efd79f; background: linear-gradient(135deg, #fffdf7, #ffffff 70%); }
.contract-review-list { display: grid; }
.contract-review-item { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(155px, auto) auto; align-items: center; gap: 18px; border-top: 1px solid #eee1c5; padding: 17px 0; }
.contract-review-item:first-child { border-top: 0; }
.contract-review-main { min-width: 0; }
.contract-review-main > strong { display: block; color: var(--navy); font-size: 14px; }
.contract-review-main > p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.contract-review-main > small { display: block; margin-top: 8px; color: #805f18; }
.contract-review-main .recurring-price-change { margin-left: 0; }
.contract-review-metric span, .contract-review-metric small { display: block; color: var(--muted); font-size: 10px; }
.contract-review-metric strong { display: block; margin: 4px 0 3px; color: var(--navy); font-size: 15px; }
.contract-review-footnote { margin: 12px 0 0; border-top: 1px solid #eee1c5; padding-top: 12px; color: #805f18; font-size: 10px; line-height: 1.45; }
.status-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
.status-dot.active { background: var(--teal); box-shadow: 0 0 0 4px rgba(14,124,115,.11); }
.status-dot.inactive { background: #9ba8ae; }
.recurring-metric span, .recurring-metric small { display: block; color: var(--muted); font-size: 10px; }
.recurring-metric strong { display: block; margin: 4px 0 3px; color: var(--navy); font-size: 13px; }
.recurring-actions { display: grid; justify-items: end; gap: 7px; }
.confidence { color: var(--muted); font-size: 10px; white-space: nowrap; }
.hint-card { padding: 18px 22px; color: var(--muted); }
.hint-card strong { color: var(--navy); }
.hint-card p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; }

.category-create-panel { margin-bottom: 18px; }
.inline-create-form, .category-action-form { display: flex; align-items: end; gap: 12px; }
.inline-create-form { max-width: 720px; }
.grow { flex: 1; }
.category-admin-list { display: grid; }
.category-admin-item { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(140px, auto) auto; align-items: center; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); }
.category-admin-item:first-child { border-top: 0; }
.category-admin-summary strong, .category-admin-summary span, .category-admin-summary small { display: block; }
.category-admin-summary strong { color: var(--navy); }
.category-admin-summary span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.category-admin-summary small { margin-top: 3px; color: var(--teal-dark); font-size: 11px; }
.system-badge { justify-self: end; border-radius: 999px; padding: 6px 10px; color: var(--muted); background: #edf2f3; font-size: 10px; font-weight: 750; }
.category-editor { justify-self: stretch; min-width: 150px; }
.category-editor summary { color: var(--teal-dark); cursor: pointer; font-size: 12px; font-weight: 750; text-align: right; }
.category-editor-body { display: grid; gap: 10px; margin-top: 12px; border-radius: 14px; padding: 14px; background: #f6f9f9; }
.category-action-form { min-width: min(650px, 62vw); }
.danger-zone { border-top: 1px solid var(--line); padding-top: 10px; }
.card.danger-zone { margin-bottom: 18px; padding: 22px; }
.card.danger-zone h2 { margin: 5px 0 8px; color: var(--navy); }
.card.danger-zone p { margin: 0; line-height: 1.5; }
.card.danger-zone > form, .card.danger-zone > .danger-button { margin-top: 16px; }
.danger-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 1px solid #e6a8aa; border-radius: 10px; padding: 7px 11px; color: #a7393f; background: #fff5f4; cursor: pointer; font-size: 12px; font-weight: 750; }

.permission-note { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; border-left: 4px solid #e1b45c; padding: 15px 18px; color: var(--muted); }
.permission-note strong { flex: 0 0 auto; color: var(--navy); }
.permission-note span { font-size: 12px; line-height: 1.45; }
.inline-permission { margin: 22px 0; background: #fffaf0; }
.demo-import-lock { border-left-color: #d09a23; }
.rule-kpis { grid-template-columns: repeat(4, 1fr); }
.rule-create-panel { margin-bottom: 18px; }
.rule-create-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, .75fr) minmax(220px, 1fr) minmax(170px, .7fr) auto; align-items: end; gap: 11px; }
.rule-toolbar { margin-bottom: 18px; }
.rule-toolbar .filter-form { width: 100%; }
.rules-panel { margin-bottom: 18px; }
.rule-admin-list { display: grid; }
.rule-admin-item { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(140px, auto); align-items: center; gap: 18px; border-top: 1px solid var(--line); padding: 15px 0; }
.rule-admin-item:first-child { border-top: 0; }
.rule-admin-item.is-inactive { opacity: .67; }
.rule-admin-summary { min-width: 0; }
.rule-admin-summary > strong, .rule-admin-summary > span, .rule-admin-summary > small { display: block; }
.rule-admin-summary > strong { margin-top: 7px; overflow-wrap: anywhere; color: var(--navy); font-size: 14px; }
.rule-admin-summary > span { margin-top: 4px; color: var(--teal-dark); font-size: 12px; font-weight: 750; }
.rule-admin-summary > small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.rule-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.rule-origin, .rule-state { border-radius: 999px; padding: 4px 8px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.rule-origin.system { color: #405a69; background: #e8f0f4; }
.rule-origin.learned { color: var(--teal-dark); background: var(--mint); }
.rule-origin.manual { color: #725216; background: #fff0cf; }
.rule-origin.imported { color: #654b7b; background: #f1e9f7; }
.rule-state.active { color: var(--teal-dark); background: #edf9f5; }
.rule-state.inactive { color: #7a8589; background: #edf1f2; }
.rule-editor { justify-self: stretch; min-width: 145px; }
.rule-editor > summary { color: var(--teal-dark); cursor: pointer; font-size: 12px; font-weight: 750; text-align: right; }
.rule-editor-body { display: grid; gap: 11px; margin-top: 12px; border-radius: 14px; padding: 14px; background: #f6f9f9; }
.rule-update-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(145px, .7fr) minmax(210px, 1fr) minmax(125px, .55fr) auto auto; align-items: end; gap: 10px; min-width: min(980px, 76vw); }
.rule-system-note { grid-column: 1 / span 4; max-width: 650px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.rule-enabled { align-self: center; margin-top: 20px; }
.rule-delete-form { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 10px; }

.flash-stack { display: grid; gap: 8px; margin-bottom: 16px; }
.flash { border-radius: 12px; padding: 11px 14px; font-size: 13px; }
.flash-success { color: #075d56; background: var(--mint); }
.flash-error { color: #9d2c32; background: var(--coral-soft); }
.flash-info, .flash-detail { color: var(--navy); background: #e8f0f4; }
.flash-detail { padding: 7px 12px; font-size: 11px; }

.demo-notice { display: flex; align-items: center; gap: 15px; margin-bottom: 18px; border: 1px solid #e6c873; border-left: 5px solid #d09a23; border-radius: 15px; padding: 15px 18px; color: #5e532f; background: #fffaf0; box-shadow: 0 8px 24px rgba(93,73,21,.07); }
.demo-notice-badge { flex: 0 0 auto; border-radius: 999px; padding: 7px 10px; color: #fff; background: #9b7117; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.demo-notice div { display: grid; gap: 3px; }
.demo-notice strong { color: var(--navy); font-size: 13px; }
.demo-notice div span { font-size: 11px; line-height: 1.5; }

.login-shell { display: grid; place-items: center; min-height: calc(100vh - 74px); padding: 28px 0; }
.login-card { width: min(500px, 100%); border: 1px solid var(--line); border-radius: 28px; padding: clamp(30px, 7vw, 58px); background: white; box-shadow: 0 30px 70px rgba(18,48,71,.13); }
.login-card h1 { margin: 9px 0 18px; color: var(--navy); font-size: clamp(37px, 7vw, 55px); line-height: .98; letter-spacing: -.05em; }
.login-card p { color: var(--muted); line-height: 1.55; }
.login-form { display: grid; gap: 13px; margin: 30px 0 17px; }
.login-card > small { color: var(--muted); line-height: 1.5; }
code { color: var(--navy); background: var(--cream); }

@media (max-width: 1040px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .review-item { grid-template-columns: minmax(220px, 1fr) 110px minmax(200px, .8fr); }
  .review-item.bulk-row { grid-template-columns: 32px minmax(220px, 1fr) 110px; }
  .bulk-category-form { grid-template-columns: 1fr 1fr; }
  .bulk-primary-actions, .bulk-contract-actions { grid-column: 1 / -1; }
  .bulk-row > select { grid-column: 2 / -1; }
  .review-item .check, .review-item .small-button { justify-self: stretch; }
  .recurring-item { grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(105px, .6fr)); }
  .recurring-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; }
  .research-form { grid-template-columns: minmax(240px, 1fr) 130px 160px; }
  .research-form .primary-button, .research-form .secondary-button { grid-row: 2; }
  .transaction-facts { grid-template-columns: 1fr 1fr; }
  .transaction-detail-form { grid-template-columns: 1fr 1fr; }
  .transaction-detail-form .primary-button { grid-column: 1 / -1; }
  .transfer-overview { grid-template-columns: 1fr; }
  .savings-overview-grid { grid-template-columns: 1fr; }
  .user-create-form { grid-template-columns: 1fr 1fr 1fr; }
  .user-create-form .primary-button { grid-column: 1 / -1; }
  .user-settings-form { grid-template-columns: 1fr 1fr; }
  .user-settings-form .secondary-button { grid-column: 1 / -1; }
  .import-facts { grid-template-columns: 1fr 1fr; }
  .user-admin-list { grid-template-columns: 1fr; }
  .role-matrix { grid-template-columns: 1fr; }
  .account-password-form { grid-template-columns: 1fr 1fr; }
  .account-password-form .primary-button { grid-column: 1 / -1; }
  .rule-create-form { grid-template-columns: 1fr 1fr; }
  .rule-create-form .primary-button { grid-column: 1 / -1; }
  .rule-update-form { grid-template-columns: 1fr 1fr; min-width: min(720px, 70vw); }
  .rule-system-note { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .topbar { min-height: 68px; padding: 10px 14px; }
  .menu-toggle { width: 46px; padding: 10px; justify-content: center; }
  .menu-toggle > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .app-menu-head { min-height: 68px; }
  .shell { width: min(100% - 22px, 1460px); padding-top: 24px; }
  .hero { align-items: start; flex-direction: column; }
  .hero-actions { width: 100%; }
  .hero-actions > * { flex: 1; }
  .toolbar, .filter-form, .upload-form { align-items: stretch; flex-direction: column; }
  .toolbar > *, .filter-form > *, .upload-form > * { width: 100%; }
  .kpis { gap: 10px; }
  .kpi { min-height: 116px; padding: 17px; }
  .kpi strong { font-size: 22px; }
  .panel { padding: 17px; }
  .panel-heading { align-items: start; flex-direction: column; }
  .chart-panel-heading { gap: 12px; }
  .chart-heading-tools { width: 100%; justify-items: start; }
  .chart-switcher { max-width: 100%; }
  .category-pie-layout { grid-template-columns: 1fr; gap: 16px; }
  .category-pie { width: min(210px, 72vw); }
  .month-chart { height: 215px; gap: 4px; }
  .review-item { grid-template-columns: 1fr auto; gap: 9px; }
  .review-item.bulk-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .bulk-row .bulk-select-cell { grid-column: 1; grid-row: 1; }
  .bulk-row .transaction-copy { grid-column: 2; }
  .bulk-row .transaction-amount { grid-column: 3; }
  .bulk-row > .check { grid-column: 2 / -1; }
  .bulk-row > .small-button { grid-column: 2 / -1; justify-self: stretch; }
  .transaction-copy { grid-column: 1; }
  .transaction-amount { grid-column: 2; grid-row: 1; }
  .review-item select { grid-column: 1 / -1; }
  .review-item .check { justify-self: start; }
  .review-item .small-button { justify-self: end; }
  .bulk-category-form { grid-template-columns: 1fr; align-items: stretch; }
  .bulk-primary-actions, .bulk-contract-actions { grid-column: 1; grid-template-columns: 1fr; }
  .bulk-primary-actions { display: grid; }
  .bulk-category-form > *, .bulk-category-label select { width: 100%; }
  .bulk-primary-actions button, .bulk-contract-actions button { width: 100%; min-width: 0; padding-inline: 10px; line-height: 1.3; white-space: normal; }
  .bulk-selection-count { min-height: auto; }
  .rule-form { grid-template-columns: 1fr; }
  .lower-grid { grid-template-columns: 1fr; }
  .recurring-item { grid-template-columns: 1fr 1fr; gap: 12px; }
  .recurring-main { grid-column: 1 / -1; }
  .recurring-actions { grid-column: 1 / -1; justify-content: space-between; }
  .category-admin-item { grid-template-columns: 1fr; }
  .system-badge { justify-self: start; }
  .category-editor summary { text-align: left; }
  .category-action-form, .inline-create-form { min-width: 0; align-items: stretch; flex-direction: column; }
  .category-action-form > *, .inline-create-form > * { width: 100%; }
  .permission-note { align-items: flex-start; flex-direction: column; }
  .demo-notice { align-items: flex-start; }
  .rule-kpis { grid-template-columns: 1fr 1fr; }
  .rule-create-form, .rule-admin-item, .rule-update-form { grid-template-columns: 1fr; }
  .rule-create-form .primary-button, .rule-system-note { grid-column: auto; }
  .rule-editor { min-width: 0; }
  .rule-editor > summary { text-align: left; }
  .rule-update-form { min-width: 0; }
  .rule-enabled { margin-top: 0; }
  .rule-delete-form, .rule-delete-form .danger-button { width: 100%; }
  .import-main-form { grid-template-columns: 1fr; }
  .import-facts { grid-template-columns: 1fr; }
  .import-history-list article { grid-template-columns: 1fr; gap: 9px; }
  .import-history-list article > div:first-child strong { white-space: normal; overflow-wrap: anywhere; }
  .import-numbers { text-align: left; }
  .household-import-notice { align-items: start; flex-direction: column; }
  .household-import-notice span { text-align: left; }
  .household-grid { grid-template-columns: 1fr; }
  .household-card-head { flex-direction: column; }
  .household-actions { width: 100%; justify-content: flex-start; }
  .household-rename-form { align-items: stretch; flex-direction: column; }
  .user-create-form, .user-settings-form, .user-password-form, .account-password-form { grid-template-columns: 1fr; }
  .user-create-form .primary-button, .account-password-form .primary-button { grid-column: auto; }
  .membership-form label { grid-template-columns: 1fr; gap: 2px; }
  .user-active-check { margin-top: 0; }
  .research-form { grid-template-columns: 1fr; }
  .research-form > *, .research-form .primary-button, .research-form .secondary-button { width: 100%; grid-row: auto; }
  .shortcut-create-form, .shortcut-update-form, .shortcut-admin-row { grid-template-columns: 1fr; }
  .shortcut-admin-row > form:last-child, .shortcut-admin-row .danger-button { width: 100%; }
  .research-item { grid-template-columns: 52px minmax(0, 1fr); gap: 11px; }
  .research-item .transaction-amount { grid-column: 2; grid-row: auto; justify-self: start; text-align: left; }
  .research-item.has-selection { grid-template-columns: 28px 52px minmax(0, 1fr); }
  .research-item.has-selection .transaction-amount { grid-column: 3; }
  .transaction-detail-head { flex-direction: column; }
  .transaction-detail-amount { text-align: left; }
  .transaction-facts, .transaction-detail-form { grid-template-columns: 1fr; }
  .transaction-detail-form .primary-button { grid-column: auto; }
  .transaction-transfer-box { align-items: stretch; flex-direction: column; }
  .transfer-overview-values { grid-template-columns: 1fr; }
  .transfer-overview .secondary-button { width: 100%; }
  .savings-fee-amount { grid-column: 2; justify-items: start; text-align: left; }
  .import-list > div { gap: 12px; }
  .import-list strong { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 430px) {
  .brand small { display: none; }
  .kpis { grid-template-columns: 1fr; }
  .kpi { min-height: 105px; }
  .hero h1 { font-size: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-menu, .menu-backdrop { transition: none; }
}

.login-links, .login-back { display: flex; justify-content: space-between; gap: 14px; margin-top: 16px; font-size: 14px; }
.register-card { width: min(100%, 620px); }
.terms-check { align-items: flex-start; line-height: 1.45; }
.contract-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 4px 24px 24px; }
.contract-form label, .vault-form label, .vault-search-row label { display: grid; gap: 7px; font-weight: 750; color: var(--ink-soft); }
.contract-form .contract-notes { grid-column: 1 / -1; }
.contract-form .primary-button, .contract-form .secondary-button { align-self: end; }
.suggestion-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.suggestion-actions form { margin: 0; }
.collapsible-heading { cursor: pointer; }
.collapsible-heading::marker { color: var(--teal); }
.details-toggle { flex: 0 0 auto; border-radius: 9px; padding: 7px 10px; color: var(--teal-dark); background: var(--mint); font-size: 11px; font-weight: 800; }
.details-toggle-close { display: none; }
details[open] > .collapsible-heading .details-toggle-open { display: none; }
details[open] > .collapsible-heading .details-toggle-close { display: inline; }
details:not([open]) > .collapsible-heading { margin-bottom: 0; }
.transaction-contract-box { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 20px; }
.transaction-contract-box form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.transaction-contract-box label { display: grid; gap: 6px; min-width: min(100%, 300px); }
.transaction-delete-box { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; border: 1px solid #efc6c8; border-radius: 14px; padding: 15px 17px; background: #fff8f7; }
.transaction-delete-box > div { min-width: 0; }
.transaction-delete-box strong, .transaction-delete-box span { display: block; }
.transaction-delete-box strong { color: #8d3035; }
.transaction-delete-box span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.transaction-delete-box form { flex: 0 0 auto; margin: 0; }
.split-bookings { max-height: 320px; overflow: auto; display: grid; gap: 8px; padding: 0 24px 16px; }
.split-bookings .check { align-items: flex-start; overflow-wrap: anywhere; line-height: 1.4; white-space: normal; }
.contract-merge-form .check { align-items: flex-start; overflow-wrap: anywhere; line-height: 1.4; white-space: normal; }
.contract-merge-form .secondary-button { width: 100%; white-space: normal; }
.contract-split-form { padding-bottom: 20px; }
.compact-transactions { padding: 0 20px 20px; }
.bulk-toolbar { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto; align-items: center; gap: 12px; padding: 0 20px 14px; }
.bulk-toolbar .check { color: var(--navy); }
.bulk-toolbar .bulk-selection-help { grid-column: 1 / -1; }
.transaction-list { display: grid; }
.transaction-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 13px 0; }
.transaction-row:first-child { border-top: 0; }
.transaction-select { display: grid; place-items: center; cursor: pointer; }
.transaction-select input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal); }
.transaction-click { min-width: 0; display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 14px; color: var(--ink); }
.transaction-click time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.transaction-click > span { min-width: 0; }
.transaction-click strong, .transaction-click small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-click strong { color: var(--navy); font-size: 13px; }
.transaction-click small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.transaction-click b { text-align: right; white-space: nowrap; }

.vault-security-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.vault-security-grid article { display: grid; gap: 8px; padding: 22px; }
.vault-security-grid strong { font-size: 20px; }
.vault-security-grid small { line-height: 1.5; color: var(--muted); }
.vault-warning { margin: 0 24px 18px; padding: 14px 16px; border-radius: 14px; background: #fff4d8; color: #6d4b00; }
.vault-form { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; padding: 0 24px 24px; }
.vault-form label { flex: 1 1 240px; }
.vault-lock-state { border-radius: 999px; background: #eef5ff; color: #24518a; padding: 8px 12px; font-size: 13px; font-weight: 800; }
.vault-progress p, .vault-recovery p { padding: 0 24px 20px; }
.vault-recovery code { display: block; margin: 0 24px 18px; padding: 16px; overflow-wrap: anywhere; border-radius: 12px; background: #152135; color: #f4f8ff; font-size: 15px; }
.vault-recovery button { margin: 0 24px 24px; }
.vault-recovery-unlock { margin: 0 24px 22px; }
.vault-recovery-unlock summary { cursor: pointer; font-weight: 750; }
.vault-recovery-unlock .vault-form { padding: 15px 0 0; }
.vault-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.vault-search-row { display: grid; grid-template-columns: minmax(240px, 2fr) 1fr 1fr; gap: 12px; padding: 0 24px 20px; }
.vault-results { display: grid; padding: 0 24px 24px; }
.vault-transaction { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 240px) auto; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--line); }
.vault-transaction div { min-width: 0; }
.vault-transaction p { margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.vault-transaction b { white-space: nowrap; }
.vault-import-row { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 24px 24px; align-items: center; }
.vault-finalize { margin-top: 20px; }

@media (max-width: 720px) {
  .import-history-actions { justify-content: flex-start; }
  .transaction-delete-box { align-items: stretch; flex-direction: column; }
  .transaction-delete-box .danger-button { width: 100%; }
  .recurring-item.is-inactive { border-radius: 12px; padding-inline: 10px; }
  .recurring-state-note { margin-left: 0; }
  .recurring-price-change { margin-left: 0; }
  .contract-review-item { grid-template-columns: 1fr; gap: 11px; }
  .contract-review-item .small-button { width: 100%; }
  .collapsible-heading { flex-direction: row; align-items: center; }
  .compact-transactions { padding: 0; }
  .bulk-toolbar { grid-template-columns: 1fr auto; padding-inline: 0; }
  .bulk-toolbar .secondary-button, .bulk-toolbar .bulk-selection-help { grid-column: 1 / -1; width: 100%; }
  .transaction-click { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .transaction-click time { grid-column: 1; }
  .transaction-click > span { grid-column: 1; }
  .transaction-click b { grid-column: 2; grid-row: 1 / 3; }
  .transaction-click small { display: -webkit-box; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .card.danger-zone { padding: 18px; }
}

@media (max-width: 820px) {
  .contract-form, .vault-security-grid, .vault-search-row { grid-template-columns: 1fr; }
  .contract-form .contract-notes { grid-column: auto; }
  .vault-transaction { grid-template-columns: minmax(0, 1fr) auto; }
  .vault-transaction select { grid-column: 1 / -1; grid-row: 2; }
}

@media print {
  .topbar, .app-menu, .menu-backdrop, .vault-actions, .vault-import-row, .vault-finalize, [data-vault-unlock], [data-vault-setup] { display: none !important; }
  .vault-transaction { break-inside: avoid; }
}