/* ═══════════════════════════════════════════════════════════════════
   Family Finance — Visual Upgrade v1.0
   Drop-in replacement for app/css/app.css
   All layout, structure and class names unchanged.
   Adds: gradients, animations, depth, glow, polish.
═══════════════════════════════════════════════════════════════════ */

@keyframes fade-up   { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes bar-grow  { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes bar-fill  { from { width:0; } to { width:var(--bar-w,100%); } }
@keyframes pulse-glow{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,200,151,.22);} 50%{ box-shadow:0 0 0 8px rgba(0,200,151,0);} }
@keyframes toast-in  { from { opacity:0; transform:translateY(8px); } }
@keyframes spin      { to { transform:rotate(360deg); } }

:root {
  /* ── Core palette — Spendee-inspired fresh palette ── */
  --ink:       #0f172a;
  --ink-2:     #334155;
  --muted:     #64748b;
  --paper:     #ffffff;
  --canvas:    #f7f8fa;
  --line:      #e8ecf0;
  /* Dark enough for white button text (WCAG AA); lighter mint stays decorative. */
  --accent:    #007a5c;
  --accent-2:  #00664d;
  --accent-soft: #e6faf5;
  --blue:      #4e9af1;
  --blue-2:    #2b7fd4;
  --amber:     #f6a623;
  --amber-2:   #d4861a;
  --pink:      #e85d8a;
  --pink-2:    #c43d6e;
  --good:      #16a34a;
  --warn:      #d4861a;
  --bad:       #dc2626;

  /* Gradients */
  --grad-sidebar: #ffffff;
  --grad-accent:  linear-gradient(135deg, #007a5c 0%, #00664d 100%);
  --grad-canvas:  #f7f8fa;
  --grad-card:    #ffffff;

  /* Shadows */
  --shadow:      0 4px 24px rgba(15,23,42,.08), 0 1px 4px rgba(15,23,42,.04);
  --shadow-lg:   0 12px 40px rgba(15,23,42,.12), 0 2px 8px rgba(15,23,42,.06);
  --shadow-card: 0 1px 3px rgba(15,23,42,.08), 0 4px 16px rgba(15,23,42,.06);
  --shadow-accent: 0 4px 20px rgba(0,200,151,.25);

  --radius: 18px;
  --font-display: 'Satoshi', Inter, ui-sans-serif, -apple-system, sans-serif;
  --font-body:    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font-body);
  font-feature-settings: 'kern' 1;
  color: var(--ink);
  background: var(--canvas);
}

/* Keep the seven-column Spending analysis ledger out of the final four-column
   transaction-list overrides. Horizontal scrolling is preferable here to
   collapsing names and property labels into one-character columns. */
.analysis-transactions-card .table-wrap { overflow-x:auto; }
.analysis-transactions-card .transaction-table {
  display:table;
  width:100%;
  min-width:1430px;
  table-layout:fixed;
}
.analysis-transactions-card .transaction-table thead { display:table-header-group; }
.analysis-transactions-card .transaction-table tbody { display:table-row-group; }
.analysis-transactions-card .transaction-table tr { display:table-row; }
.analysis-transactions-card .transaction-table th,
.analysis-transactions-card .transaction-table td { display:table-cell; min-width:0 !important; }
.analysis-transactions-card .transaction-table th:nth-child(1),
.analysis-transactions-card .transaction-table td:nth-child(1) { width:130px; min-width:130px !important; }
.analysis-transactions-card .transaction-table th:nth-child(2),
.analysis-transactions-card .transaction-table td:nth-child(2) { width:350px; min-width:350px !important; }
.analysis-transactions-card .transaction-table th:nth-child(3),
.analysis-transactions-card .transaction-table td:nth-child(3) { width:210px; min-width:210px !important; }
.analysis-transactions-card .transaction-table th:nth-child(4),
.analysis-transactions-card .transaction-table td:nth-child(4) { width:230px; min-width:230px !important; }
.analysis-transactions-card .transaction-table th:nth-child(5),
.analysis-transactions-card .transaction-table td:nth-child(5) { width:190px; min-width:190px !important; }
.analysis-transactions-card .transaction-table th:nth-child(6),
.analysis-transactions-card .transaction-table td:nth-child(6) { width:140px; min-width:140px !important; }
.analysis-transactions-card .transaction-table th:nth-child(7),
.analysis-transactions-card .transaction-table td:nth-child(7) { width:180px; min-width:180px !important; }
.analysis-transactions-card .analysis-transaction-copy strong,
.analysis-transactions-card .analysis-transaction-copy small { overflow-wrap:normal; word-break:normal; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--grad-canvas); }
body { min-height: 100vh; }
button, input, select, textarea { font: inherit; }

/* ── Satoshi: headings, numbers, nav, buttons, chips ─────────────── */
h1, h2, h3, h4,
.title-block h1,
.kpi-value,
.brand strong,
.login-card h1,
.debt-payment-total,
.nav-button,
.nav-child,
.sidebar-footer strong,
.btn,
.chip, .status-chip,
.section-tabs button,
.kpi-label,
.home-kpi-link,
.account-balance strong,
.plan-version strong,
.spending-bar-value strong,
.debt-payment-total {
  font-family: var(--font-display);
  font-feature-settings: 'kern' 1, 'liga' 1;
}

/* ── Tabular numerals for all money amounts ───────────────────────── */
.kpi-value,
.amount,
.amount.negative,
.amount.positive,
.amount.neutral,
.transaction-amount-cell,
.account-balance strong,
.reconciliation-metrics strong,
.statement-metrics strong,
.spending-bar-value strong,
.sms-result-grid strong,
td .amount,
.debt-payment-total {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

/* ── Lucide icon sizing ───────────────────────────────────────────── */
.lucide {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
  flex-shrink: 0;
}
.nav-button .lucide { width: 20px; height: 20px; }
.nav-child-icon .lucide { width: 16px; height: 16px; stroke-width: 1.6; }
.mobile-menu-button .lucide { width: 22px; height: 22px; }
button { cursor: pointer; }

/* ── Sidebar ──────────────────────────────────────────────────────── */
.app-shell { min-height:100vh; display:grid; grid-template-columns:270px 1fr; transition:grid-template-columns .22s ease; }
.app-shell.sidebar-collapsed { grid-template-columns:82px 1fr; }

.sidebar {
  background: #ffffff;
  color: var(--ink);
  padding: 20px 16px 0;
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  box-shadow: 2px 0 12px rgba(15,23,42,.06);
  overflow: hidden;
}

.brand { display:flex; align-items:center; gap:12px; padding:0 0 16px; flex-shrink:0; }
.brand-mark { flex-shrink:0; }
.brand-mark svg { display:block; }
.brand strong { font-size:1.1rem; display:block; letter-spacing:-.02em; color:var(--ink); font-family:var(--font-display); font-weight:800; }
.brand span { display:inline-block; color:white; font-size:.65rem; margin-top:4px; font-weight:700; letter-spacing:.04em; background:var(--accent); border-radius:4px; padding:1px 6px; text-transform:lowercase; }

.nav-list { display:flex; flex-direction:column; gap:2px; overflow-y:auto; overflow-x:hidden; flex:1; min-height:0; padding-bottom:8px; }
.nav-group { display:flex; flex-direction:column; gap:2px; }

.nav-button {
  width:100%; border:0; background:transparent; color:var(--ink-2); text-align:left;
  padding:8px 14px; border-radius:10px; display:flex; align-items:center; gap:10px;
  white-space:nowrap; transition:background .15s ease, color .15s ease, box-shadow .15s ease;
  font-size:.88rem; font-weight:500;
}
.nav-button:hover { background:rgba(0,200,151,.08); color:var(--accent-2); }
.nav-button.active {
  background: rgba(0,200,151,.1);
  color: var(--accent-2);
  border-left: 3px solid var(--accent);
  padding-left: 11px;
  font-weight: 700;
}
.nav-button .icon { width:20px; flex:0 0 20px; text-align:center; }
.nav-label { overflow:hidden; text-overflow:ellipsis; }
.nav-chevron { margin-left:auto; transition:transform .2s ease; opacity:.5; color:var(--muted); }
.nav-group.expanded .nav-chevron { transform:rotate(180deg); }
.nav-children { display:none; gap:2px; padding:0 0 4px 34px; }
.nav-group.expanded .nav-children { display:grid; }

.nav-child {
  border:0; background:transparent; color:var(--muted); text-align:left;
  padding:5px 10px; font-size:.8rem; border-radius:8px; display:flex; align-items:center; gap:9px;
  transition:background .12s ease, color .12s ease;
}
.nav-child:hover { color:var(--accent-2); background:rgba(0,200,151,.07); }
.nav-child.active { color:var(--accent-2); background:rgba(0,200,151,.1); font-weight:600; }
.nav-child-icon { width:18px; flex:0 0 18px; text-align:center; color:var(--accent); font-size:.85rem; }

.sidebar-toggle {
  position:absolute; top:75px; right:-13px; width:28px; height:28px;
  border-radius:50%; border:1px solid var(--line); background:white; color:var(--ink);
  z-index:3; box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.sidebar-toggle:hover { transform:scale(1.12); box-shadow:var(--shadow-lg); }

.sidebar-backdrop, .mobile-menu-button { display:none; }
.sidebar-collapsed .sidebar { padding-inline:12px; }
.sidebar-collapsed .nav-list { padding:0; }
.sidebar-collapsed .brand { padding:0 0 16px; justify-content:center; }
.sidebar-collapsed .sidebar-footer { justify-content:center; }
.sidebar-collapsed .brand { justify-content:center; padding:0; }
.sidebar-collapsed .brand > div, .sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-chevron, .sidebar-collapsed .nav-children,
.sidebar-collapsed .sidebar-user-info, .sidebar-collapsed .sidebar-settings-icon { display:none; }
.sidebar-collapsed .sidebar-footer { justify-content:center; padding:8px 0 16px; }
.sidebar-collapsed .sidebar-footer .sidebar-avatar { margin:0 auto; }
.sidebar-collapsed .nav-button { justify-content:center; padding-inline:10px; }

.sidebar-footer {
  margin-top:auto; padding:12px 14px;
  background:rgba(0,200,151,.06);
  border:1px solid rgba(0,200,151,.15);
  border-radius:14px;
  display:flex; align-items:center; gap:12px;
}
.sidebar-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--accent); color:white;
  font-size:.9rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-family:var(--font-display);
}
.sidebar-user-info { min-width:0; }
.sidebar-footer strong { color:var(--ink); font-size:.88rem; display:block; font-family:var(--font-display); font-weight:700; }
.sidebar-footer small { color:var(--muted); display:block; font-size:.72rem; margin-top:1px; }

/* ── Main content ─────────────────────────────────────────────────── */
.main { min-width:0; padding:28px 34px 110px; animation:fade-up .3s ease; }
.topbar { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:26px; }
.title-block h1 { margin:0; font-size:clamp(1.65rem,2.4vw,2.4rem); letter-spacing:-.04em; font-weight:800; }
.title-block p { margin:6px 0 0; color:var(--muted); font-size:.92rem; }
.top-actions { display:flex; align-items:center; gap:10px; }

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  background: var(--grad-card);
  border:1px solid rgba(223,229,233,.8);
  border-radius:var(--radius);
  box-shadow: var(--shadow-card);
  padding:22px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:not(button):hover { box-shadow:var(--shadow); }
.card h2, .card h3 { margin:0; }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.card-header p { margin:5px 0 0; color:var(--muted); font-size:.88rem; }

/* ── KPI cards ────────────────────────────────────────────────────── */
.kpi-label { color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-family:var(--font-body); }
.kpi-value { font-size:clamp(1.5rem,2.2vw,2.1rem); margin-top:10px; font-weight:800; letter-spacing:-.04em; font-family:var(--font-display); }
.kpi-note { margin-top:8px; font-size:.78rem; color:var(--muted); }

.home-kpi-card {
  appearance:none; width:100%; font:inherit; text-align:left; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  border-color:rgba(223,229,233,.7);
  position:relative; overflow:hidden;
}
.home-kpi-card::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,200,151,.04) 0%, transparent 60%);
  pointer-events:none;
}
.home-kpi-card:hover, .home-kpi-card:focus-visible {
  transform:translateY(-3px);
  border-color:rgba(0,200,151,.4);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,200,151,.15);
  outline:0;
}
.home-kpi-card .kpi-label,
.home-kpi-card .kpi-value,
.home-kpi-card .kpi-note { display:block; }
.home-kpi-link { display:block; margin-top:12px; color:var(--accent-2); font-size:.78rem; font-weight:700; }

/* ── Status chips ─────────────────────────────────────────────────── */
.chip, .status-chip {
  border-radius:999px; padding:6px 12px; font-size:.77rem; font-weight:650;
  border:1px solid var(--line); background:var(--paper);
  display:inline-flex; align-items:center; gap:5px;
}
.status-chip.good {
  color:#155e42; background:linear-gradient(135deg,#e6f7f0,#d8f2e7); border-color:#b2dfc9;
}
.status-chip.warn {
  color:#7d4f10; background:linear-gradient(135deg,#fff3e0,#ffe8c0); border-color:#e8c278;
}
.status-chip.bad {
  color:#8b2020; background:linear-gradient(135deg,#fff0f0,#ffe0e0); border-color:#e8a8a8;
}
.status-chip.neutral { color:var(--ink-2); background:linear-gradient(135deg,#f5f6f8,#eff1f3); border-color:var(--line); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  padding:10px 16px; border-radius:11px; font-weight:650;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  position:relative; overflow:hidden;
}
.btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(19,42,58,.1); }
.btn:active { transform:translateY(0); box-shadow:none; }

.btn.primary {
  background:var(--grad-accent); color:white; border-color:transparent;
  box-shadow:0 2px 10px rgba(0,200,151,.25);
}
.btn.primary:hover { box-shadow:0 6px 20px rgba(0,200,151,.4); }

.btn.gold {
  background:var(--grad-accent); color:#fff; border-color:transparent;
  box-shadow:var(--shadow-accent);
  font-weight:700;
}
.btn.gold:hover { box-shadow:0 6px 24px rgba(0,200,151,.35); }

.btn.danger { color:var(--bad); border-color:rgba(183,70,70,.25); }
.btn.danger:hover { background:#fff0f0; }
.btn.small { padding:7px 11px; font-size:.82rem; }
.btn:disabled { cursor:not-allowed; opacity:.5; transform:none; box-shadow:none; }

/* ── Grid layouts ─────────────────────────────────────────────────── */
.grid { display:grid; gap:18px; }
.kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.two-col { grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); }

/* ── Progress bars ────────────────────────────────────────────────── */
.progress { background:#e8ecf0; height:8px; border-radius:999px; overflow:hidden; }
.progress > span {
  display:block; height:100%;
  background:var(--grad-gold);
  border-radius:inherit;
  animation:bar-fill .6s ease-out;
}

/* ── Lists ────────────────────────────────────────────────────────── */
.list { display:grid; gap:8px; }
.list-row {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:12px; align-items:center; padding:11px 0;
  border-bottom:1px solid rgba(223,229,233,.7);
  transition:background .12s ease;
}
.list-row:last-child { border-bottom:0; }
.list-row strong { display:block; }
.list-row small { color:var(--muted); display:block; margin-top:3px; }
.amount.negative, .amount.expense { color:#dc2626; font-weight:700; }
.amount.positive, .amount.income  { color:#16a34a; font-weight:700; }
.amount.neutral { color:var(--ink-2); }

/* ── Tables ───────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:12px; }
table { width:100%; border-collapse:collapse; min-width:720px; }
th {
  color:var(--muted); font-size:.73rem; text-transform:uppercase;
  letter-spacing:.06em; text-align:left; padding:11px 14px;
  border-bottom:2px solid var(--line);
  background:linear-gradient(to bottom,#fafbfc,#f6f8fa);
}
td { padding:13px 14px; border-bottom:1px solid rgba(223,229,233,.6); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tbody tr { transition:background .1s ease; }
tbody tr:hover td { background:rgba(0,200,151,.04); }

/* ── Forms ────────────────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1 / -1; }
label { font-size:.82rem; color:var(--ink-2); font-weight:650; }
input, select, textarea {
  width:100%; border:1.5px solid var(--line); background:white; color:var(--ink);
  border-radius:11px; padding:11px 13px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,200,151,.2);
}
textarea { min-height:94px; resize:vertical; }
.form-actions { grid-column:1 / -1; display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
.field-note { color:var(--muted); font-size:.76rem; line-height:1.35; margin-top:6px; }

/* ── Notices ──────────────────────────────────────────────────────── */
.notice {
  padding:13px 16px; border-radius:12px;
  background:linear-gradient(135deg,#eef5f8,#e8f1f5);
  border:1px solid #c8dde6; color:var(--ink-2); margin-bottom:16px;
}
.notice strong { color:var(--ink); }
.notice.compact { margin:10px 0; padding:10px 12px; font-size:.84rem; }
.empty { color:var(--muted); text-align:center; padding:34px 10px; }

/* ── Home trend chart ─────────────────────────────────────────────── */
.home-dashboard-toolbar { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.home-dashboard-toolbar h2 { margin:0 0 4px; }
.home-dashboard-toolbar p { margin:0; color:var(--muted); }
.home-dashboard-toolbar label { display:grid; gap:6px; min-width:190px; color:var(--muted); font-size:.8rem; }

.home-trend {
  min-height:250px; display:grid;
  grid-template-columns:repeat(6,minmax(54px,1fr));
  gap:12px; align-items:end;
}
.home-trend-item {
  height:220px; display:grid; grid-template-rows:auto 1fr auto;
  gap:8px; text-align:center; min-width:0;
  animation:fade-up .4s ease both;
}
.home-trend-item:nth-child(1){ animation-delay:.05s; }
.home-trend-item:nth-child(2){ animation-delay:.1s; }
.home-trend-item:nth-child(3){ animation-delay:.15s; }
.home-trend-item:nth-child(4){ animation-delay:.2s; }
.home-trend-item:nth-child(5){ animation-delay:.25s; }
.home-trend-item:nth-child(6){ animation-delay:.3s; }

.home-trend-item strong { font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.home-trend-item small { color:var(--muted); font-weight:700; font-size:.72rem; }

.home-trend-track {
  height:100%; min-height:120px; display:flex; align-items:end; justify-content:center;
  border-radius:10px; background:rgba(223,229,233,.5); overflow:hidden;
  border:1px solid rgba(223,229,233,.8);
}
.home-trend-track span {
  display:block; width:70%; min-height:3px;
  border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,#d4a85e 0%,#8b5e1a 100%);
  transform-origin:bottom;
  animation:bar-grow .5s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:inherit;
  box-shadow:0 -2px 8px rgba(0,200,151,.3);
}

/* ── Home category list ───────────────────────────────────────────── */
.home-category-list { display:grid; gap:8px; }
.home-category-row {
  appearance:none; display:grid; gap:7px; width:100%; padding:10px 12px;
  border:0; border-radius:12px; background:transparent; color:inherit;
  font:inherit; text-align:left; cursor:pointer;
  transition:background .12s ease;
}
.home-category-row:hover, .home-category-row:focus-visible {
  background:rgba(0,200,151,.06); outline:0;
}
.home-category-row > span:first-child { display:flex; justify-content:space-between; gap:12px; }
.home-category-row small { color:var(--muted); white-space:nowrap; }
.home-category-track {
  display:block; height:7px; overflow:hidden;
  border-radius:999px; background:rgba(223,229,233,.8);
}
.home-category-track i {
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#00c897,#00a87e);
  animation:bar-fill .6s ease-out both;
}

.home-activity-row {
  appearance:none; width:100%; border:0; background:transparent;
  color:inherit; font:inherit; text-align:left; cursor:pointer;
  border-radius:10px; transition:background .12s ease;
}
.home-activity-row:hover, .home-activity-row:focus-visible {
  background:rgba(0,200,151,.04); outline:0;
}

/* ── Section tabs ─────────────────────────────────────────────────── */
.section-tabs {
  display:inline-flex; gap:3px; padding:4px; margin-bottom:18px;
  background:rgba(223,229,233,.6);
  border:1px solid var(--line); border-radius:13px;
  backdrop-filter:blur(4px);
}
.section-tabs button {
  border:0; background:transparent; color:var(--muted); padding:9px 15px;
  border-radius:9px; font-weight:700; font-size:.88rem;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.section-tabs button.active {
  background:var(--paper); color:var(--ink);
  box-shadow:0 2px 10px rgba(19,42,58,.1);
}

/* ── Login ────────────────────────────────────────────────────────── */
.login-page {
  min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(ellipse at 20% 20%,rgba(0,200,151,.1) 0%,transparent 50%),
             radial-gradient(ellipse at 80% 80%,rgba(19,42,58,.08) 0%,transparent 50%),
             var(--grad-canvas);
}
.login-card {
  width:min(460px,100%); background:white;
  border:1px solid rgba(223,229,233,.9); border-radius:24px; padding:36px;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(0,200,151,.06);
  animation:fade-up .35s ease;
}
.login-brand { display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.login-brand img { width:54px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.15)); }
.login-card h1 { margin:0; letter-spacing:-.02em; }
.login-card p { color:var(--muted); }
.login-card .stack { display:grid; gap:13px; }

/* ── Toast ────────────────────────────────────────────────────────── */
.toast {
  position:fixed; right:24px; bottom:24px; max-width:min(620px,calc(100vw - 32px));
  background:linear-gradient(135deg,#1e293b,#0f172a);
  color:white; padding:14px 18px; border-radius:14px;
  box-shadow:var(--shadow-lg); z-index:2000;
  animation:toast-in .2s ease-out; overflow-wrap:anywhere;
  border:1px solid rgba(255,255,255,.1);
}

/* ── Spending bars ────────────────────────────────────────────────── */
.spending-bar-track {
  display:block; height:12px; border-radius:999px;
  background:rgba(223,229,233,.7); overflow:hidden;
  border:1px solid rgba(223,229,233,.9);
}
.spending-bar-fill {
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#00c897,#00a87e);
  transition: width .4s ease-out;
}
.spending-bar-fill.near { background:linear-gradient(90deg,#f6a623,#d4861a); }
.spending-bar-fill.over { background:linear-gradient(90deg,#e85d8a,#c43d6e); }

/* ── Statement ────────────────────────────────────────────────────── */
.statement-valid   { background:linear-gradient(135deg,#edf8f3,#e0f5ea); border-color:#b2dfc9; }
.statement-warning { background:linear-gradient(135deg,#fff7e0,#fff0c4); border-color:#e8c278; }
.statement-error   { background:linear-gradient(135deg,#fff0f0,#ffe4e4); border-color:#e8a8a8; }

.statement-file-row {
  min-height:46px; display:flex; align-items:center; gap:12px;
  border:1.5px dashed rgba(0,200,151,.4);
  border-radius:12px; padding:8px 12px;
  background:linear-gradient(135deg,rgba(0,200,151,.04),transparent);
  transition:border-color .15s ease, background .15s ease;
}
.statement-file-row:hover { border-color:var(--accent); background:rgba(0,200,151,.06); }
.statement-file-row span { min-width:0; color:var(--muted); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Account items ────────────────────────────────────────────────── */
.account-item {
  border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(160deg,#fdfefe,#f9fafb); overflow:hidden;
  transition:box-shadow .2s ease;
}
.account-item[open] {
  background:var(--paper); box-shadow:var(--shadow);
  border-color:rgba(0,200,151,.2);
}
.account-summary {
  display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(160px,.8fr) minmax(170px,.9fr) minmax(170px,.9fr) 28px;
  gap:16px; align-items:center; padding:16px 18px; cursor:pointer; list-style:none;
  transition:background .12s ease;
}
.account-summary:hover { background:rgba(0,200,151,.03); }
.account-summary::-webkit-details-marker { display:none; }
.account-summary::after {
  content:'⌄'; justify-self:end; color:var(--muted); font-size:1.1rem;
  transition:transform .2s ease; grid-column:5;
}
.account-item[open] .account-summary::after { transform:rotate(180deg); }
.account-identity strong { display:block; }
.account-identity small, .account-balance small, .account-verification small { display:block; color:var(--muted); margin-top:4px; font-size:.77rem; }
.account-tags { display:flex; flex-wrap:wrap; gap:6px; }
.chip.compact { padding:4px 9px; font-size:.7rem; }
.account-balance span { display:block; color:var(--muted); font-size:.74rem; }
.account-balance strong { display:block; margin-top:4px; font-size:1.05rem; }
.account-verification { justify-self:start; }
.account-detail-body { border-top:1px solid var(--line); padding:16px 18px 18px; }
.account-detail-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.account-detail-grid > div {
  padding:12px; border-radius:11px;
  background:linear-gradient(135deg,#f7f9fb,#f2f5f7); min-width:0;
  border:1px solid rgba(223,229,233,.7);
}
.account-detail-grid span { display:block; color:var(--muted); font-size:.72rem; margin-bottom:5px; }
.account-detail-grid strong { display:block; font-size:.86rem; overflow-wrap:anywhere; }
.account-alert { background:linear-gradient(135deg,#fff7e0,#fff0c4); border-color:#e8c278; }
.account-fx-note { background:linear-gradient(135deg,#eef5f8,#e4eff4); border-color:#c8dde6; }
.account-empty-filter { padding-top:22px; }
.account-kpis { margin-bottom:18px; }
.account-register { padding-bottom:14px; }
.account-count { color:var(--muted); font-size:.82rem; font-weight:700; white-space:nowrap; }
.account-toolbar {
  display:grid; grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(130px,1fr)) auto;
  gap:12px; align-items:end; margin:18px 0;
}
.account-clear { margin-bottom:1px; white-space:nowrap; }
.account-list { display:grid; gap:10px; }

/* ── Transaction rows ─────────────────────────────────────────────── */
.transaction-row { cursor:pointer; transition:background .1s ease; }
.transaction-row:hover td { background:rgba(0,200,151,.04); }
.transaction-row:focus-visible { outline:3px solid rgba(0,200,151,.3); outline-offset:-3px; }
.transaction-detail-row td { background:linear-gradient(to bottom,#f5f7f9,#f0f3f6); border-bottom:1px solid var(--line); padding:0 14px 16px; }
.transaction-detail-panel {
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 4px 16px rgba(19,42,58,.06); padding:16px;
  background:white;
}

/* ── Plan / budget ────────────────────────────────────────────────── */
.plan-version {
  align-items:center; background:linear-gradient(160deg,#fdfefe,#f7f9fb);
  border:1px solid var(--line); border-radius:14px;
  display:grid; grid-template-columns:minmax(260px,1.6fr) minmax(170px,.8fr) minmax(190px,1fr);
  gap:18px; padding:15px 16px;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.plan-version:hover { box-shadow:var(--shadow); border-color:rgba(0,200,151,.15); }
.plan-version.active {
  border-color:rgba(0,200,151,.4);
  background:linear-gradient(160deg,#f0fdf9,#e6faf5);
  box-shadow:0 4px 16px rgba(0,200,151,.1);
}

/* ── Merchant mapping dialog ──────────────────────────────────────── */
.merchant-mapping-dialog { width:min(620px,calc(100vw - 32px)); max-height:calc(100vh - 32px); margin:auto; padding:0; border:0; border-radius:20px; background:transparent; overflow:auto; }
.merchant-mapping-dialog::backdrop { background:rgba(10,25,36,.6); backdrop-filter:blur(4px); }
.merchant-mapping-card {
  width:100%; padding:26px; border-radius:20px; background:var(--paper);
  box-shadow:0 28px 80px rgba(10,25,36,.35), 0 0 0 1px rgba(0,200,151,.12);
  display:grid; gap:16px;
}
body:has(.merchant-mapping-dialog[open]) { overflow:hidden; }
.setup-edit-modal {
  position:fixed; z-index:1200; inset:50% auto auto 50%; transform:translate(-50%,-50%);
  width:min(820px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto;
  box-shadow:0 0 0 100vmax rgba(10,25,36,.6),0 22px 60px rgba(10,25,36,.3);
  border-radius:var(--radius);
}
body:has(.setup-edit-modal) { overflow:hidden; }

/* ── Goal cards ───────────────────────────────────────────────────── */
.goal-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.goal-card .goal-line { display:flex; justify-content:space-between; margin:15px 0 9px; font-size:.85rem; }
.goal-card .goal-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:.78rem; margin-top:10px; }
.goal-section-card > .goal-grid { margin-top:12px; }

/* ── Misc components ──────────────────────────────────────────────── */
.mobile-nav { display:none; }
.role-select { min-width:165px; }
.screen-reader { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.amount-currency-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,.36fr); gap:10px; }
.amount-currency-row select { font-weight:700; }
.muted { color:var(--muted); }
.text-button { appearance:none; background:transparent; border:0; color:var(--muted); cursor:pointer; font:inherit; font-size:.8rem; font-weight:700; padding:0; transition:color .12s ease; }
.text-button:hover { color:var(--ink); }
.danger-text { color:#a33b3b; }

/* ── Transaction entry ────────────────────────────────────────────── */
.transaction-entry-card { max-width:1040px; }
.transaction-entry-card .form-grid { align-items:start; }
.compact-notice { margin-bottom:18px; }
.transaction-review {
  background:linear-gradient(135deg,rgba(0,200,151,.06),rgba(0,200,151,.02));
  border:1px solid rgba(0,200,151,.2);
  border-radius:16px; display:grid; gap:12px;
  grid-template-columns:repeat(4,minmax(0,1fr)); padding:16px;
}
.transaction-review > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.transaction-review span { color:var(--muted); font-size:.78rem; overflow-wrap:anywhere; }
.table-actions { min-width:92px; text-align:right; }

/* ── Statement import ─────────────────────────────────────────────── */
.statement-import-card { margin-bottom:18px; }
.statement-import-controls { display:grid; grid-template-columns:minmax(280px,1fr) minmax(280px,1fr); gap:16px; align-items:start; }
.statement-preview { margin-top:20px; padding-top:20px; border-top:1px solid var(--line); }
.statement-preview-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:15px; }
.statement-preview-header h3 { margin:0; }
.statement-preview-header p { margin:5px 0 0; color:var(--muted); font-size:.82rem; }
.statement-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:16px; }
.statement-metrics > div { background:linear-gradient(135deg,#f7f9fb,#f2f5f7); border:1px solid var(--line); border-radius:12px; padding:13px; }
.statement-metrics span { display:block; color:var(--muted); font-size:.72rem; }
.statement-metrics strong { display:block; margin-top:5px; font-size:.98rem; }
.statement-valid ul, .statement-warning ul, .statement-error ul { margin:8px 0 0 20px; padding:0; }
.statement-hash { color:var(--muted); font-size:.72rem; margin:12px 0; overflow-wrap:anywhere; }
.statement-hash code { color:var(--ink-2); }
.statement-preview-table table { min-width:980px; }
.statement-preview-table td small { color:var(--muted); }
.statement-preview-note { color:var(--muted); font-size:.76rem; margin:10px 0 0; }
.statement-import-confirm {
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-top:18px;
  padding:16px; border:1px solid rgba(0,200,151,.25);
  background:linear-gradient(135deg,rgba(0,200,151,.07),rgba(0,200,151,.02));
  border-radius:14px;
}
.statement-import-confirm strong { display:block; }
.statement-import-confirm span { display:block; color:var(--muted); font-size:.78rem; margin-top:4px; }
.statement-confirm-copy { display:flex; flex:1 1 420px; flex-direction:column; gap:7px; min-width:0; }
.statement-import-confirm .btn { flex:0 0 auto; margin-top:2px; }
.statement-empty { padding:44px 10px 28px; }
.statement-history-card table { min-width:920px; }
.statement-history-card td small { color:var(--muted); }
.statement-history-card td { vertical-align:top; }
.statement-history-card td .status-stack { padding-top:1px; }
.statement-review-card { margin-bottom:18px; }
.statement-review-heading { align-items:flex-start; }
.statement-review-heading h2 { margin-top:8px; }
.historical-notice { margin:16px 0; }
.reconciliation-metrics { grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:16px; }
.reconciliation-metrics > div { background:linear-gradient(135deg,#f7f9fb,#f2f5f7); border:1px solid var(--line); border-radius:12px; padding:13px; }
.reconciliation-metrics span { display:block; color:var(--muted); font-size:.72rem; }
.reconciliation-metrics strong { display:block; font-size:1.05rem; margin-top:5px; }
.reconciliation-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.statement-lines-card .card-header { align-items:flex-end; }
.statement-filter-wrap { align-items:center; display:flex; gap:8px; }
.statement-filter-wrap label { color:var(--muted); font-size:.78rem; font-weight:700; }
.statement-filter-wrap select { min-width:150px; }
.statement-review-table { min-width:1220px; }
.statement-review-table td { vertical-align:top; }
.match-copy { display:flex; flex-direction:column; gap:5px; max-width:330px; min-width:190px; }
.match-copy small { color:var(--muted); line-height:1.35; }
.review-actions { display:flex; flex-wrap:wrap; gap:7px; }

/* ── Status stack ─────────────────────────────────────────────────── */
.status-stack { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.status-stack .status-chip { line-height:1.2; }
.status-stack small { display:block; line-height:1.35; }
.account-verification { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.account-verification .status-chip { line-height:1.2; }
.account-verification small { line-height:1.35; }

/* ── Persistent alert ─────────────────────────────────────────────── */
.persistent-alert { align-items:flex-start; display:flex; justify-content:space-between; gap:18px; margin-bottom:18px; }
.persistent-alert > div { display:flex; flex-direction:column; gap:5px; }
.persistent-alert span { color:var(--ink-2); line-height:1.45; }

/* ── Transaction table ────────────────────────────────────────────── */
.transaction-table { min-width:1180px; }
.transaction-table th:first-child, .transaction-table td:first-child { min-width:138px; }
.transaction-table th:nth-child(3), .transaction-table td:nth-child(3),
.transaction-table th:nth-child(5), .transaction-table td:nth-child(5) { min-width:170px; }
.transaction-date-cell strong { display:block; }
.transaction-date { color:var(--muted); display:block; font-size:.78rem; margin-top:5px; white-space:nowrap; }
.transaction-cell-stack { align-items:flex-start; display:flex; flex-direction:column; gap:8px; min-width:0; }
.transaction-cell-stack .chip, .transaction-cell-stack .status-chip { line-height:1.2; max-width:100%; }
.transaction-cell-stack small { color:var(--muted); display:block; line-height:1.4; }
.transaction-description { max-width:330px; }
.transaction-description strong, .transaction-description small { overflow-wrap:anywhere; }
.transaction-amount-cell { white-space:nowrap; }
.transaction-action-stack { align-items:center; display:flex; justify-content:flex-end; gap:7px; position:relative; }
.transaction-action-menu { position:relative; }
.transaction-action-menu > summary { list-style:none; min-width:38px; padding-inline:10px; }
.transaction-action-menu > summary::-webkit-details-marker { display:none; }
.transaction-action-popover {
  position:absolute; z-index:20; top:calc(100% + 6px); right:0; min-width:180px;
  display:grid; padding:6px; border:1px solid var(--line); border-radius:12px;
  background:var(--paper); box-shadow:var(--shadow-lg); text-align:left;
}
.transaction-menu-action {
  border:0; border-radius:8px; background:transparent; color:var(--ink); text-align:left;
  padding:9px 10px; font-weight:650; white-space:nowrap;
}
.transaction-menu-action:hover, .transaction-menu-action:focus-visible { background:var(--accent-soft); outline:0; }
.transaction-menu-action.danger { color:var(--bad); }
.transaction-menu-action.danger:hover, .transaction-menu-action.danger:focus-visible { background:#fff0f0; }
.transaction-detail-toggle { min-width:34px; }
.transaction-detail-heading { align-items:flex-start; display:flex; justify-content:space-between; gap:16px; margin-bottom:14px; }
.transaction-detail-heading strong { display:block; }
.transaction-detail-heading small { color:var(--muted); display:block; margin-top:4px; }
.transaction-detail-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }

/* Keep transaction controls reachable on standard laptop widths. */
@media (max-width: 1200px) {
  .transaction-table { min-width:0; width:100%; table-layout:fixed; }
  .transaction-table th, .transaction-table td { min-width:0 !important; }
  .transaction-table th:nth-child(1), .transaction-table td:nth-child(1) { width:43%; }
  .transaction-table th:nth-child(2), .transaction-table td:nth-child(2) { width:22%; }
  .transaction-table th:nth-child(3), .transaction-table td:nth-child(3) { width:16%; }
  .transaction-table th:nth-child(4), .transaction-table td:nth-child(4) { width:19%; }
  .transaction-table .tx-main,
  .transaction-table .tx-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .transaction-table .tx-cat-cell .chip { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .transaction-table .table-actions { background:var(--paper); }
}

/* Mobile transactions become compact cards instead of a horizontally scrolling table. */
@media (max-width: 1600px) {
  .transaction-table, .transaction-table tbody { display:block; width:100%; }
  .transaction-table thead { display:none; }
  .transaction-table .tx-date-group-header { display:block; margin:14px 0 7px; }
  .transaction-table .tx-date-group-header:first-child { margin-top:0; }
  .transaction-table .tx-date-cell { display:flex; width:100% !important; align-items:center; justify-content:space-between; padding:8px 4px; border:0; }
  .transaction-table .transaction-row {
    display:grid; width:100%; grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"description amount" "category actions";
    gap:10px 14px; margin-bottom:9px; padding:14px;
    border:1px solid var(--line); border-radius:14px; background:var(--paper);
  }
  .transaction-table .transaction-row > td { display:block; width:auto !important; padding:0; border:0; min-width:0 !important; }
  .transaction-table .tx-desc-cell { grid-area:description; }
  .transaction-table .tx-cat-cell { grid-area:category; display:flex; align-items:center; gap:7px; min-width:0; }
  .transaction-table .transaction-amount-cell { grid-area:amount; align-self:start; text-align:right; }
  .transaction-table .table-actions { grid-area:actions; align-self:center; background:transparent; }
  .transaction-table .transaction-action-stack { min-width:0; gap:6px; }
  .transaction-table .transaction-action-menu > summary,
  .transaction-table .transaction-detail-toggle { display:inline-grid; place-items:center; width:38px; min-width:38px; height:34px; padding:0; }
  .transaction-table .transaction-action-popover { position:fixed; z-index:100; top:auto; right:16px; bottom:88px; left:16px; min-width:0; }
  .transaction-table .transaction-detail-row:not([hidden]) { display:block; margin:-2px 0 10px; }
  .transaction-table .transaction-detail-row:not([hidden]) > td { display:block; width:100% !important; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
}

.transaction-detail-grid > div { background:linear-gradient(135deg,#f7f9fb,#f2f5f7); border:1px solid rgba(223,229,233,.8); border-radius:10px; min-width:0; padding:10px; }
.transaction-detail-grid span { color:var(--muted); display:block; font-size:.7rem; margin-bottom:5px; }
.transaction-detail-grid strong { display:block; font-size:.8rem; overflow-wrap:anywhere; }
.transaction-table-note { color:var(--muted); font-size:.75rem; margin:12px 0 0; }

/* ── Plan / forecast ──────────────────────────────────────────────── */
.plan-toolbar { margin-bottom:18px; }
.plan-filter-heading, .plan-section-heading { align-items:flex-start; display:flex; justify-content:space-between; gap:16px; }
.plan-filter-heading h2, .plan-section-heading h2 { margin:0; }
.plan-filter-heading p, .plan-section-heading p { color:var(--muted); margin:5px 0 0; }
.plan-filters { align-items:end; display:grid; grid-template-columns:minmax(100px,.55fr) minmax(130px,.75fr) minmax(150px,.9fr) minmax(190px,1.25fr) auto; gap:12px; margin-top:18px; }
.plan-clear { margin-bottom:1px; white-space:nowrap; }
.plan-kpis { margin-bottom:18px; }
.plan-table-card, .plan-versions-card { margin-top:18px; }
.plan-monthly-table { min-width:1180px; }
.plan-category-table { min-width:940px; }
.plan-monthly-table td:not(:first-child), .plan-category-table td:nth-child(n+4):nth-child(-n+6) { white-space:nowrap; }
.plan-month strong { display:block; }
.plan-month small, .plan-monthly-table td small, .plan-category-table td small { color:var(--muted); display:block; font-size:.72rem; margin-top:4px; }
.plan-footnote { color:var(--muted); font-size:.76rem; margin:14px 0 0; }
.plan-version-list { display:grid; gap:10px; }
.plan-version > div { min-width:0; }
.plan-version > div:first-child { align-items:flex-start; display:grid; gap:5px; }
.plan-version > div:first-child .status-chip { justify-self:start; margin-bottom:2px; }
.plan-version span:not(.status-chip), .plan-version small { color:var(--muted); display:block; font-size:.73rem; }
.plan-version strong { display:block; margin:4px 0; overflow-wrap:anywhere; }
.plan-section-heading { margin:26px 2px 14px; }
.plan-actions, .plan-version-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.plan-version-actions { margin-top:12px; }
.plan-draft-editor { margin-top:18px; }
.plan-draft-editor .notice { margin-bottom:16px; }
.plan-draft-table { min-width:860px; }
.plan-draft-table td small { display:block; color:var(--muted); margin-top:3px; }
.plan-line-edit { display:grid; grid-template-columns:minmax(130px,1fr) auto; align-items:center; gap:8px; }
.plan-line-edit input { width:100%; min-width:130px; }
.plan-line-edit span { color:var(--muted); font-size:.82rem; }
.plan-display-controls { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin:10px 0 14px; }
.section-header-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.collapsible-card .collapsible-content { display:block; }
.collapsible-card.is-collapsed .collapsible-content { display:none; }
.collapsible-card.is-collapsed { padding-bottom:16px; }
.section-toggle { white-space:nowrap; }
.plan-line-edit span { color:var(--muted); font-size:.82rem; }

/* ── Category variance ────────────────────────────────────────────── */
.category-variance-controls { align-items:end; display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(130px,.7fr) minmax(190px,1fr) minmax(90px,.45fr) auto; gap:12px; margin:16px 0; }
.category-variance-controls input, .category-variance-controls select { width:100%; }
.plan-category-table th:last-child, .plan-category-table td:last-child { min-width:128px; text-align:center; vertical-align:middle; }
.plan-category-table td:last-child .status-chip { display:inline-flex; align-items:center; justify-content:center; min-width:102px; min-height:34px; line-height:1; white-space:nowrap; }

/* ── Cashflow ─────────────────────────────────────────────────────── */
.cashflow-table{min-width:980px}.cashflow-table td:not(:first-child){white-space:nowrap}.cashflow-table td small,.obligation-table td small{display:block;color:var(--muted);font-size:.72rem;margin-top:4px}.obligation-table{min-width:720px}.cashflow-kpis .kpi-value{font-size:1.65rem}
.obligation-controls { align-items:end; display:grid; grid-template-columns:minmax(150px,.8fr) minmax(220px,1.2fr) minmax(90px,.45fr) auto; gap:12px; margin:8px 0 16px; }
.obligation-controls select { width:100%; }

/* ── Spending analysis ────────────────────────────────────────────── */
.spending-filter-grid { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); align-items:end; }
.spending-filter-grid label { display:grid; gap:6px; font-size:.82rem; color:var(--muted); }
.spending-filter-grid input, .spending-filter-grid select { width:100%; }
.spending-kpis { margin-top:16px; }
.spending-filter-grid input, .spending-filter-grid select, .spending-filter-grid option { font:inherit; font-family:inherit; }
.spending-kpis .spending-metric { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.spending-kpis .spending-metric span { display:block; line-height:1.25; }
.spending-kpis .spending-metric strong { display:block; line-height:1.1; overflow-wrap:anywhere; }
.spending-kpis .spending-metric small { display:block; line-height:1.3; }
.spending-filter-grid select { min-height:44px; appearance:auto; padding:10px 12px; }
.spending-date-row { display:grid; grid-template-columns:minmax(145px,190px) minmax(145px,190px) auto auto; gap:10px; align-items:end; margin-bottom:14px; }
.spending-date-row label { display:grid; gap:6px; font-size:.82rem; color:var(--muted); }
.spending-date-row input { width:100%; min-height:44px; }
.spending-date-row .btn { min-height:44px; }
.metric-heading { display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px; }
.info-button { width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:linear-gradient(135deg,#f5f6f8,#eff1f3); color:var(--ink-2); font:700 .8rem/1 inherit; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; transition:background .12s ease; }
.info-button:hover { background:linear-gradient(135deg,#eff1f3,#e8ecef); }
.info-popover { position:fixed; right:22px; bottom:22px; z-index:1000; width:min(360px,calc(100vw - 32px)); background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg); padding:18px 42px 16px 18px; }
.info-popover[hidden] { display:none; }
.info-popover strong { display:block; margin-bottom:6px; }
.info-popover p { margin:0; color:var(--muted); line-height:1.45; }
.info-close { position:absolute; right:10px; top:8px; border:0; background:transparent; font-size:1.4rem; cursor:pointer; color:var(--muted); }
.coa-code { display:block; font-style:italic; color:var(--muted); margin-top:3px; }
.spending-bars { display:grid; gap:12px; }
.spending-bar-row { display:grid; grid-template-columns:minmax(180px,1.25fr) minmax(220px,3fr) minmax(120px,.9fr); align-items:center; gap:14px; width:100%; border:0; background:transparent; text-align:left; padding:7px 0; cursor:pointer; transition:background .12s ease; border-radius:8px; }
.spending-bar-row:hover { background:rgba(0,200,151,.04); }
.spending-bar-label strong, .spending-bar-label em { display:block; }
.spending-bar-label em { color:var(--muted); font-size:.78rem; margin-top:2px; }
.spending-bar-value { text-align:right; }
.spending-bar-value strong, .spending-bar-value small { display:block; }
.spending-bar-value small { color:var(--muted); margin-top:2px; }
.spending-bar-value em { display:block; color:var(--muted); font-size:.68rem; font-style:normal; margin-top:2px; }
.date-input-combo { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; gap:6px; }
.analysis-native-date { width:44px !important; min-width:44px; padding:7px 5px !important; color:transparent; background:var(--paper); cursor:pointer; }
.analysis-native-date::-webkit-datetime-edit { display:none; }
.analysis-native-date::-webkit-calendar-picker-indicator { opacity:1; margin:0 auto; cursor:pointer; }
.spending-main-group { border:1px solid var(--line); border-radius:14px; background:var(--paper); overflow:hidden; transition:box-shadow .2s ease; }
.spending-main-group:hover { box-shadow:var(--shadow); }
.spending-main-group + .spending-main-group { margin-top:10px; }
.spending-main-group summary { cursor:pointer; list-style:none; padding:12px 14px; transition:background .12s ease; }
.spending-main-group summary::-webkit-details-marker { display:none; }
.spending-main-group summary::before { content:'▸'; display:inline-block; margin-right:8px; color:var(--muted); transition:transform .15s ease; }
.spending-main-group[open] summary::before { transform:rotate(90deg); }
.spending-main-group[open] summary { border-bottom:1px solid var(--line); background:rgba(0,200,151,.03); }
.spending-main-group .spending-bar-row { display:grid; }
.subcategory-bars { display:grid; gap:8px; padding:10px 14px 14px 30px; }
.subcategory-jump { border:0; padding:0; background:transparent; text-align:inherit; font:inherit; cursor:pointer; }
.subcategory-jump:hover .spending-bar-row { background:rgba(0,200,151,.04); }
.main-category-bar { font-weight:600; }
.subcategory-bar { padding:8px; border-radius:10px; }
.summary-value, .summary-note { display:block; }
.summary-value { font-weight:700; line-height:1.2; white-space:nowrap; }
.summary-note { margin-top:4px; color:var(--muted); line-height:1.25; }
.spending-dashboard-card .spending-bars { display:block; }
.spending-filter-groups { display:grid; gap:14px; }
.spending-filter-group { padding:14px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,rgba(245,246,248,.7),rgba(240,243,246,.5)); }
.spending-period-row { display:grid; grid-template-columns:minmax(180px,1.15fr) minmax(210px,1fr) minmax(210px,1fr) auto; gap:12px; align-items:end; margin-bottom:16px; }
.spending-period-row > label, .app-select-field, .date-field { display:grid; gap:6px; font-size:.82rem; color:var(--muted); min-width:0; }
.spending-date-actions { display:flex; gap:8px; align-items:center; padding-bottom:1px; }
.spending-category-filters { display:grid; grid-template-columns:minmax(180px,1fr) minmax(240px,1.45fr) minmax(180px,1fr) minmax(240px,1.35fr); gap:12px; align-items:end; }
.spending-scope-filters { display:grid; grid-template-columns:repeat(5,minmax(145px,1fr)); gap:12px; align-items:end; }
.date-field { cursor:pointer; }
.date-input-combo { min-height:44px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); gap:0; overflow:hidden; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
.date-input-combo:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,200,151,.18); }
.date-input-combo > input[type="text"] { min-width:0; height:42px; border:0; border-radius:0; background:transparent; box-shadow:none; }
.date-picker-button { width:44px; height:42px; border:0; border-left:1px solid var(--line); border-radius:0; background:transparent; transition:background .12s ease; }
.date-picker-button:hover { background:rgba(0,200,151,.07); }
.app-select { position:relative; min-width:0; font-family:inherit; }
.app-select-trigger { width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font-family:inherit; font-size:.95rem; line-height:1.25; text-align:left; transition:border-color .15s ease, box-shadow .15s ease; }
.app-select-trigger:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,200,151,.18); outline:0; }
.app-select-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-select-chevron { flex:0 0 auto; font-size:1rem; color:var(--muted); }
.app-select-menu { position:absolute; z-index:80; top:calc(100% + 6px); left:0; right:0; max-height:280px; overflow:auto; padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--paper); box-shadow:var(--shadow-lg); font-family:inherit; }
.app-select-menu[hidden] { display:none !important; }
.app-select-option { display:block; width:100%; padding:10px 11px; border:0; border-radius:8px; background:transparent; color:var(--ink); font-family:inherit; font-size:.93rem; line-height:1.3; text-align:left; transition:background .1s ease; }
.app-select-option:hover, .app-select-option:focus, .app-select-option.selected { background:var(--accent-soft); outline:0; }
.app-select-option[hidden] { display:none !important; }
.analysis-native-select { width:100%; min-height:44px; padding:10px 38px 10px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); font-family:inherit; font-size:.95rem; line-height:1.25; appearance:auto; transition:border-color .15s ease, box-shadow .15s ease; }
.analysis-native-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,200,151,.18); outline:0; }
.analysis-native-select option { font:inherit; }
.spending-filter-grid input, .spending-filter-grid select, .spending-filter-grid option, .spending-date-row input { font-family:inherit !important; font-size:.92rem; line-height:1.25; }
.analysis-transactions-card .transaction-table { table-layout:fixed; width:100%; min-width:1240px; }
.analysis-transactions-card .transaction-table th:nth-child(1){width:130px}.analysis-transactions-card .transaction-table th:nth-child(2){width:350px}.analysis-transactions-card .transaction-table th:nth-child(3){width:210px}.analysis-transactions-card .transaction-table th:nth-child(4){width:230px}.analysis-transactions-card .transaction-table th:nth-child(5){width:190px}.analysis-transactions-card .transaction-table th:nth-child(6){width:140px}.analysis-transactions-card .transaction-table th:nth-child(7){width:180px}
.analysis-transactions-card .table-wrap { position:relative; }
.analysis-transactions-card .transaction-table th:first-child, .analysis-transactions-card .transaction-table td:first-child { position:sticky; left:0; z-index:2; background:var(--paper); }
.analysis-transactions-card .transaction-table th:first-child { z-index:3; }
.analysis-transaction-copy { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.analysis-transaction-copy strong,.analysis-transaction-copy small { display:block; width:100%; overflow-wrap:anywhere; }
.analysis-merchant-copy small { color:var(--muted); line-height:1.35; }
.analysis-amount,.analysis-amount span { white-space:nowrap; }

/* ── Auth / security ──────────────────────────────────────────────── */
.auth-message { margin-bottom:16px; padding:11px 13px; border:1px solid #e2c978; border-radius:10px; background:linear-gradient(135deg,#fffdf0,#fff8df); color:var(--ink); font-size:.88rem; line-height:1.4; }
.auth-message.good { border-color:#9fd2bd; background:linear-gradient(135deg,#f0fdf7,#eefaf5); }
.auth-link { justify-self:center; font-size:.88rem; }
.security-note { margin:0; color:var(--muted); font-size:.8rem; line-height:1.45; }
.security-form { display:grid; gap:12px; margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--canvas); }
.security-form[hidden] { display:none; }
.security-actions { display:flex; flex-wrap:wrap; gap:9px; }

/* ── Favourites / quick entry ─────────────────────────────────────── */
.favourite-field { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:7px; align-items:center; }
.favourite-field > select, .favourite-field > input { width:100%; min-width:0; }
.favourite-toggle { width:44px; height:44px; display:grid; place-items:center; border:1.5px solid var(--line); border-radius:10px; background:var(--paper); color:#9aa4aa; font-size:1.25rem; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.favourite-toggle:hover, .favourite-toggle:focus-visible { border-color:var(--accent); outline:0; }
.favourite-toggle.active { color:var(--accent-2); background:var(--accent-soft); border-color:var(--accent); box-shadow:0 2px 8px rgba(0,200,151,.2); }
.quick-entry-panel { display:grid; gap:10px; margin:14px 0 18px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,#f7f9fb,#f2f5f7); }
.quick-entry-panel strong, .quick-entry-panel small { display:block; }
.quick-entry-panel small { margin-top:3px; color:var(--muted); }
.quick-entry-list { display:flex; flex-wrap:wrap; gap:8px; }
.quick-entry-item { display:inline-flex; align-items:stretch; }
.quick-entry-button, .quick-entry-remove { border:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; cursor:pointer; transition:background .12s ease; }
.quick-entry-button { padding:8px 10px; border-radius:9px 0 0 9px; }
.quick-entry-remove { width:32px; border-left:0; border-radius:0 9px 9px 0; color:var(--muted); }
.quick-entry-button:hover, .quick-entry-remove:hover { background:var(--accent-soft); }
.show-password-control { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.84rem; cursor:pointer; }
.show-password-control input { width:auto; }
.category-entry-hierarchy { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(260px,1.2fr); gap:14px; padding:14px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,#f7f9fb,#f2f5f7); }
.category-entry-hierarchy.single-category { grid-template-columns:1fr; }
.category-entry-hierarchy > .field { min-width:0; }

/* ── Merchant recognition ─────────────────────────────────────────── */
.merchant-recognition-suggestion { margin-top:8px; padding:8px 12px; border:1px solid #b8dfcf; border-radius:10px; background:linear-gradient(135deg,#e6faf5,#d0f5eb); display:grid; gap:2px; }
.merchant-recognition-suggestion strong { color:var(--accent-2); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; }
.merchant-recognition-suggestion span { font-weight:700; }
.merchant-recognition-suggestion small { color:var(--muted); }
.mapping-inline-actions { display:flex; gap:12px; margin-top:4px; }
.refund-modal { width:min(980px,calc(100vw - 32px)); }
.refund-review { grid-template-columns:repeat(2,minmax(0,1fr)); }
.refund-review > div { min-width:0; }

/* ── v0.25.33 searchable, date-grouped Activity ─────────────────── */
.transaction-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
.transaction-toolbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; }
.transaction-search-field { display:flex; align-items:center; gap:9px; width:min(620px,100%); min-height:44px; padding:0 13px; border:1.5px solid var(--line); border-radius:14px; background:var(--paper); transition:border-color .15s ease,box-shadow .15s ease; }
.transaction-search-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,200,151,.16); }
.transaction-search-icon { color:var(--muted); font-size:1.25rem; line-height:1; }
.transaction-search-field input { width:100%; min-width:0; height:42px; padding:0; border:0; border-radius:0; outline:0; background:transparent; box-shadow:none; font:inherit; }
.transaction-search-status { min-height:18px; margin:0 0 4px; color:var(--muted); font-size:.78rem; }
.tx-date-cell { padding:12px 8px 6px !important; }
.tx-date-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:9px 11px; border:0; border-radius:12px; background:var(--canvas); color:var(--ink); font:inherit; text-align:left; cursor:pointer; transition:background .15s ease; }
.tx-date-toggle:hover { background:var(--accent-soft); }
.tx-date-toggle:focus-visible { outline:3px solid rgba(0,200,151,.24); }
.tx-date-heading { display:flex; align-items:baseline; gap:9px; min-width:0; }
.tx-date-count { color:var(--muted); font-size:.74rem; font-weight:600; }
.tx-date-summary { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.tx-date-chevron { display:inline-block; color:var(--muted); font-size:1.15rem; transform:rotate(-90deg); transition:transform .15s ease; }
.tx-date-group.expanded .tx-date-chevron,.tx-date-group.search-expanded .tx-date-chevron { transform:rotate(0); }
.tx-date-group:not(.expanded):not(.search-expanded) .transaction-row,
.tx-date-group:not(.expanded):not(.search-expanded) .transaction-detail-row { display:none; }
.transaction-row.search-hidden,.transaction-detail-row.search-hidden { display:none !important; }
.currency-badge { display:grid; place-items:center; min-width:96px; min-height:44px; padding:10px 13px; border:1.5px solid var(--line); border-radius:11px; background:var(--canvas); color:var(--ink); font-weight:800; }
.transaction-entry-card input[type="date"],.refund-modal input[type="date"] { min-width:0; min-height:46px; font:inherit; }
.transaction-date-field input[type="date"] { width:100%; min-height:48px; padding:10px 13px; border-radius:12px; text-align:left; color:var(--ink); background:var(--paper); }
.transaction-date-field input[type="date"]::-webkit-date-and-time-value { min-height:24px; margin:0; text-align:left; }
.transaction-date-field input[type="date"]::-webkit-calendar-picker-indicator { width:20px; height:20px; margin:0; cursor:pointer; opacity:.72; }
.transaction-date-control { position:relative; display:flex; width:100%; min-height:48px; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px; overflow:hidden; border:1.5px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); cursor:pointer; }
.transaction-date-control:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,200,151,.16); }
.transaction-date-control > #transactionDateDisplay { min-width:0; font-weight:600; line-height:1.25; text-align:left; }
.transaction-date-icon { display:grid; flex:0 0 auto; place-items:center; color:var(--muted); }
.transaction-date-icon svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.transaction-date-control > input[type="date"] { position:absolute; inset:0; z-index:1; width:100%; height:100%; min-height:0; margin:0; padding:0; border:0; opacity:0; cursor:pointer; }
.transaction-date-control > input[type="date"]::-webkit-calendar-picker-indicator { position:absolute; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.modern-file-field input[type="file"] { min-height:48px; padding:5px 7px; border-radius:14px; color:var(--muted); background:var(--canvas); cursor:pointer; }
.modern-file-field input[type="file"]::file-selector-button { min-height:36px; margin-right:10px; padding:8px 14px; border:0; border-radius:10px; background:var(--accent-soft); color:var(--accent-2); font:700 .82rem/1 inherit; cursor:pointer; transition:background .15s ease,color .15s ease; }
.modern-file-field input[type="file"]:hover::file-selector-button { background:var(--accent); color:#fff; }
.spending-kpis { gap:16px; margin:18px 0 20px; }
.spending-kpis .spending-metric { position:relative; overflow:hidden; min-height:150px; padding-top:22px; border-top:4px solid transparent; }
.spending-metric-actual { border-top-color:#00b98d !important; background:linear-gradient(145deg,#fff 62%,rgba(0,185,141,.07)); }
.spending-metric-average { border-top-color:#4c95e8 !important; background:linear-gradient(145deg,#fff 62%,rgba(76,149,232,.07)); }
.spending-metric-budget { border-top-color:#f4a21b !important; background:linear-gradient(145deg,#fff 62%,rgba(244,162,27,.08)); }
.spending-metric-variance.favourable { border-top-color:#22a35a !important; background:linear-gradient(145deg,#fff 62%,rgba(34,163,90,.08)); }
.spending-metric-variance.adverse { border-top-color:#e5537f !important; background:linear-gradient(145deg,#fff 62%,rgba(229,83,127,.08)); }
.date-picker-button { position:relative; display:grid; place-items:center; overflow:hidden; color:var(--muted); cursor:pointer; }
.date-picker-button > svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.date-picker-button > input[type="date"] { position:absolute; inset:0; width:100% !important; height:100%; min-width:0; padding:0; border:0; opacity:0; cursor:pointer; }
.date-picker-button > input[type="date"]::-webkit-calendar-picker-indicator { position:absolute; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.spending-more-toggle { width:max-content; padding:9px 13px; border-radius:999px; color:var(--accent-2); font-weight:750; }
.spending-more-toggle:hover { background:var(--accent-soft); }
.plan-kpis,.cashflow-kpis { gap:16px; margin-bottom:20px; }
.plan-kpis > .card,.cashflow-kpis > .card { min-width:0; min-height:148px; }
.plan-kpis > .card { position:relative; overflow:hidden; border-top-width:4px; }
.plan-kpis > .kpi-card-0 { background:linear-gradient(145deg,#fff 62%,rgba(0,185,141,.08)); }
.plan-kpis > .kpi-card-1 { background:linear-gradient(145deg,#fff 62%,rgba(76,149,232,.08)); }
.plan-kpis > .kpi-card-2 { background:linear-gradient(145deg,#fff 62%,rgba(244,162,27,.09)); }
.plan-kpis > .kpi-card-3 { background:linear-gradient(145deg,#fff 62%,rgba(229,83,127,.08)); }
.finance-report-card { margin:18px 0; overflow:hidden; }
.finance-chart-wrap { width:100%; overflow-x:auto; padding:4px 0 0; }
.finance-report-chart { display:block; width:100%; min-width:680px; height:auto; }
.finance-chart-grid { stroke:#e5eaee; stroke-width:1; stroke-dasharray:4 5; }
.finance-chart-axis { stroke:#cbd5dc; stroke-width:1.2; }
.finance-chart-axis-label { fill:#748293; font-size:12px; font-family:inherit; }
.finance-chart-legend { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; margin:2px 0 10px; color:var(--muted); font-size:.78rem; font-weight:700; }
.finance-chart-legend span { display:inline-flex; align-items:center; gap:7px; }
.finance-chart-legend i { width:22px; height:3px; border-radius:999px; background:var(--legend-color); }
.cashflow-report-card { margin-top:14px; }
.more-page-household { grid-template-columns:1fr; }
.household-invite-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; align-items:end; gap:12px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--canvas); }
.household-invite-form .btn { min-height:44px; white-space:nowrap; }
.household-role-help { grid-column:1 / -1; color:var(--muted); font-size:.78rem; }
.household-user-list { display:grid; gap:10px; margin-top:18px; }
.household-user-row { display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(190px,1fr) auto auto; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.household-user-identity { display:flex; align-items:center; gap:11px; min-width:0; }
.household-user-identity strong,.household-user-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.household-user-identity small { margin-top:3px; color:var(--muted); font-size:.75rem; }
.household-role-select { min-height:40px; padding:8px 10px; font-size:.82rem; }
.household-user-actions { min-width:82px; text-align:right; }

@media (max-width:760px) {
  .transaction-toolbar { display:grid; gap:10px; }
  .transaction-search-field { width:100%; border-radius:12px; }
  .transaction-toolbar-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .transaction-toolbar-actions .btn { width:100%; min-height:42px; }
  .transaction-table tbody { display:block; width:100%; }
  .transaction-table .tx-date-group-header { margin:10px 0 7px; }
  .transaction-table .tx-date-cell { display:block; padding:4px 0 !important; }
  .tx-date-toggle { min-height:48px; padding:10px 12px; }
  .tx-date-heading { display:grid; gap:2px; }
  .tx-date-count { font-size:.7rem; }
  .transaction-entry-card { padding:18px 16px; }
  .transaction-entry-card .form-grid { grid-template-columns:1fr; gap:17px; }
  .transaction-entry-card .field,.transaction-entry-card .field.full { grid-column:1; min-width:0; }
  .transaction-entry-card input,.transaction-entry-card select,.transaction-entry-card textarea { min-width:0; }
  .transaction-entry-card .form-actions { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"review review" "quick cancel"; gap:9px; position:static; }
  .transaction-entry-card .form-actions .btn { width:100%; min-width:0; min-height:48px; white-space:normal; }
  .transaction-entry-card .form-actions #saveQuickEntry { grid-area:quick; }
  .transaction-entry-card .form-actions #cancelTransactionEntry { grid-area:cancel; }
  .transaction-entry-card .form-actions #transactionSubmit { grid-area:review; }
  .transaction-date-control { min-height:50px; padding:11px 13px; }
  .modern-file-field input[type="file"] { width:100%; min-height:54px; padding:7px; border:1.5px dashed rgba(0,185,141,.34); border-radius:14px; font-size:.78rem; background:rgba(0,185,141,.035); }
  .modern-file-field input[type="file"]::file-selector-button { min-height:38px; border-radius:10px; }
  .spending-period-row,.spending-primary-filters,.spending-category-filters,.spending-scope-filters { grid-template-columns:1fr !important; }
  .spending-filter-groups { gap:12px; }
  .spending-filter-group { padding:14px; border-radius:16px; overflow:visible; }
  .spending-period-row { gap:15px; margin-bottom:12px; }
  .spending-primary-filters,.spending-scope-filters { gap:14px; }
  .spending-filter-group .app-select-trigger,
  .spending-filter-group .date-input-combo { min-height:48px; border-radius:12px; }
  .spending-filter-group .date-input-combo > input[type="text"] { height:46px; padding-inline:13px; }
  .spending-filter-group .date-picker-button { width:48px; height:46px; }
  .spending-filter-group .app-select-menu { position:relative; top:6px; margin-bottom:6px; max-height:240px; }
  .spending-date-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .spending-date-actions .btn { width:100%; min-height:48px; }
  .spending-more-toggle { min-height:44px; padding:10px 2px; }
  .spending-kpis { grid-template-columns:1fr; gap:12px; margin-bottom:18px; }
  .spending-kpis .spending-metric { min-height:132px; }
  .plan-kpis,.cashflow-kpis { grid-template-columns:1fr; gap:12px; }
  .plan-kpis > .card,.cashflow-kpis > .card { min-height:128px; }
  .finance-report-card { padding:18px 14px; }
  .finance-report-card .card-header { align-items:flex-start; }
  .finance-report-chart { min-width:620px; }
  .finance-chart-wrap { margin-right:-8px; padding-bottom:6px; }
  .household-invite-form { grid-template-columns:1fr; }
  .household-role-help { grid-column:1; }
  .household-user-row { grid-template-columns:1fr auto; }
  .household-user-role { grid-column:1 / -1; }
  .household-user-actions { min-width:0; }
}

/* ── Wealth / assets ──────────────────────────────────────────────── */
.wealth-overview-row, .wealth-register { margin-top:18px; }
.wealth-allocation { display:grid; gap:16px; }
.wealth-allocation > div { display:grid; gap:8px; }
.wealth-allocation span { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.wealth-allocation small, .wealth-assets-table small { display:block; color:var(--muted); margin-top:5px; }
.wealth-assets-table { min-width:1200px; }
.wealth-assets-table td { vertical-align:top; }
.wealth-assets-table .table-actions { white-space:nowrap; }
.wealth-asset-modal { width:min(980px,calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto; }

/* ── Budget upload ────────────────────────────────────────────────── */
.budget-upload-card{display:grid;gap:18px}
.budget-preview{display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,#fafbfc,#f5f7f9)}
.budget-preview small{display:block;color:var(--muted);margin-top:4px}
.budget-preview-totals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.budget-preview-totals span{padding:12px;border-radius:12px;background:linear-gradient(135deg,#f7f9fb,#f0f3f6);font-weight:700;border:1px solid rgba(223,229,233,.7)}
.budget-preview ul{margin:8px 0 0;padding-left:22px}
.budget-upload-card table{min-width:760px;table-layout:fixed}
.budget-upload-card th:nth-child(1){width:42%}.budget-upload-card th:nth-child(2){width:22%}.budget-upload-card th:nth-child(3){width:8%}.budget-upload-card th:nth-child(4){width:10%}.budget-upload-card th:nth-child(5){width:18%}
.budget-version-cell strong,.budget-version-cell small{display:block;overflow-wrap:anywhere}.budget-version-cell small{margin-top:5px;color:var(--muted)}

/* ── KPI expandable ───────────────────────────────────────────────── */
.kpi-expandable{padding:0;overflow:hidden}
.kpi-expandable summary{position:relative;display:block;cursor:pointer;list-style:none;padding:22px 48px 22px 22px;transition:background .12s ease}
.kpi-expandable summary:hover{background:rgba(0,200,151,.03)}
.kpi-expandable summary::-webkit-details-marker{display:none}
.kpi-expandable summary::after{content:"⌄";position:absolute;right:22px;top:22px;color:var(--muted);font-size:1.25rem;transition:transform .2s ease}
.kpi-expandable[open] summary::after{transform:rotate(180deg)}
.kpi-expandable summary:focus-visible{outline:3px solid rgba(0,200,151,.35);outline-offset:-3px}
.kpi-explanation{border-top:1px solid var(--line);padding:16px 22px 20px;color:var(--muted);line-height:1.5;background:linear-gradient(135deg,#f7f9fb,#f2f5f7)}

/* ── SMS inbox ────────────────────────────────────────────────────── */
.sms-preview-card{margin-top:18px}
.sms-result-grid{grid-template-columns:repeat(4,minmax(150px,1fr));margin:16px 0}
.sms-result-grid > div{padding:14px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,#f7f9fb,#f2f5f7);display:grid;gap:5px}
.sms-result-grid span{color:var(--muted);font-size:.8rem}
.sms-result-grid strong{overflow-wrap:anywhere}
#smsMessageText{width:100%;resize:vertical;min-height:150px;font:inherit;line-height:1.5}

/* ── Finance setup ────────────────────────────────────────────────── */
.finance-setup-tabs,.grouped-sidebar .finance-setup-tabs{display:flex;margin-bottom:16px}
.finance-setup-safety{margin-bottom:18px}
.finance-setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}
.setup-form-card,.setup-list-card{margin-bottom:18px}
.setup-form{display:grid;gap:13px}
.setup-form-wide{max-width:1100px}
.setup-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.setup-form-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.setup-checks{display:flex;flex-wrap:wrap;gap:18px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(135deg,#f7f9fb,#f2f5f7)}
.setup-checks label{display:flex;align-items:center;gap:7px;color:var(--ink);font-size:.86rem}
.setup-checks input{width:auto}
.setup-list-card td small{display:block;margin-top:4px;color:var(--muted)}
.setup-list-card table{min-width:780px}

/* ── Debt payment ─────────────────────────────────────────────────── */
.debt-payment-total{display:flex;align-items:center;min-height:54px;padding:12px 16px;border:1px solid rgba(0,200,151,.2);border-radius:14px;background:linear-gradient(135deg,rgba(0,200,151,.07),rgba(0,200,151,.02));font-size:1.3rem;font-weight:800;color:var(--ink)}

/* ── Invoice intake ───────────────────────────────────────────────── */
.invoice-intake-card{display:grid;gap:18px}
.invoice-upload-panel{display:flex;align-items:center;gap:16px;padding:18px;border:2px dashed rgba(0,200,151,.35);border-radius:16px;background:linear-gradient(135deg,rgba(0,200,151,.04),transparent);transition:border-color .15s ease,background .15s ease}
.invoice-upload-panel:hover{border-color:var(--accent);background:rgba(0,200,151,.07)}
.invoice-upload-panel > div{min-width:0;display:grid;gap:4px}
.invoice-upload-panel strong{overflow-wrap:anywhere}
.invoice-upload-panel small,.invoice-confidence small,.invoice-source-summary small{color:var(--muted)}
.invoice-confidence{grid-column:1/-1;display:flex;align-items:center;gap:12px}
.invoice-source-summary{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;padding:15px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(135deg,#f7f9fb,#f2f5f7)}
.invoice-source-summary small{grid-column:2;overflow-wrap:anywhere}
.invoice-empty{padding:44px 20px;text-align:center}

/* ── More page ────────────────────────────────────────────────────── */
.grouped-sidebar .section-tabs:not(.settings-tabs):not(.money-subnav) { display:none; }
.more-page-security > :not(.more-security),
.more-page-household > :not(.more-household),
.more-page-data > :not(.more-data),
.more-page-environment > :not(.more-environment) { display:none; }
.more-page > article { grid-column:1 / -1; max-width:1100px; }

/* ── Utility ──────────────────────────────────────────────────────── */
[hidden], .is-hidden { display:none !important; }
.draft-review-modal { width:min(820px,calc(100vw - 32px)); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width:1180px) {
  .account-toolbar { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .account-search { grid-column:span 2; }
  .account-summary { grid-template-columns:minmax(220px,1.4fr) minmax(150px,.7fr) minmax(170px,.9fr) minmax(160px,.8fr) 28px; }
  .account-detail-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1100px) {
  .spending-category-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spending-scope-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .spending-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plan-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plan-clear { justify-self:start; }
  .plan-version { grid-template-columns:1fr 1fr; }
  .plan-version > div:first-child { grid-column:1 / -1; }
}
@media (max-width:1060px) {
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .two-col { grid-template-columns:1fr; }
  .goal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .account-summary { grid-template-columns:minmax(220px,1.3fr) minmax(160px,.8fr) minmax(160px,.8fr) 28px; }
  .account-tags { display:none; }
  .account-summary::after { grid-column:4; }
}
@media (max-width:1000px) { .finance-setup-grid { grid-template-columns:1fr; } }
@media (max-width:980px) { .reconciliation-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) {
  .app-shell, .app-shell.sidebar-collapsed { display:block; }
  .sidebar, .sidebar-collapsed .sidebar {
    display:flex; position:fixed; z-index:70; left:0; top:0; width:min(300px,86vw); padding:24px 16px;
    background:#ffffff !important;
    transform:translateX(-105%); transition:transform .22s ease; box-shadow:var(--shadow-lg);
  }
  .sidebar-open .sidebar { transform:translateX(0); }
  .sidebar-collapsed .brand { justify-content:flex-start; padding:0 10px; }
  .sidebar-collapsed .brand > div, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-chevron, .sidebar-collapsed .sidebar-footer { display:block; }
  .sidebar-collapsed .nav-button { justify-content:flex-start; padding-inline:14px; }
  .sidebar-collapsed .nav-group.expanded .nav-children { display:grid; }
  .sidebar-toggle { display:none; }
  .sidebar-backdrop { position:fixed; inset:0; z-index:60; border:0; background:rgba(15,23,42,.45); backdrop-filter:blur(3px); }
  .sidebar-open .sidebar-backdrop { display:block; }
  .mobile-menu-button { display:inline-grid; place-items:center; flex:0 0 42px; height:42px; border:1px solid var(--line); border-radius:11px; background:white; color:var(--ink); }
  .main { padding:20px 16px 96px; }
  .topbar { align-items:flex-start; }
  .top-actions .chip { display:none; }
  .kpi-grid, .goal-grid, .form-grid { grid-template-columns:1fr; }
  .section-tabs { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .account-toolbar { grid-template-columns:1fr; }
  .account-search { grid-column:auto; }
  .account-clear { width:100%; }
  .account-summary { grid-template-columns:1fr auto; gap:10px; padding:15px; }
  .account-summary::after { grid-column:2; grid-row:1; }
  .account-balance { grid-column:1; }
  .account-verification { grid-column:1 / -1; }
  .account-detail-body { padding:14px; }
  .account-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .toast { right:14px; left:14px; bottom:86px; text-align:center; }
  .role-select { min-width:130px; }
  .statement-import-controls { grid-template-columns:1fr; }
  .statement-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spending-period-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spending-date-actions { grid-column:1 / -1; }
  .obligation-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-dashboard-toolbar { align-items:stretch; flex-direction:column; }
  .home-dashboard-toolbar label { min-width:0; }
  .home-trend { gap:7px; overflow-x:auto; }
  .home-trend-item { min-width:62px; }
  .sms-result-grid { grid-template-columns:repeat(2,minmax(140px,1fr)); }
}
@media (max-width:850px) { .obligation-controls { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px) {
  .spending-date-row { grid-template-columns:1fr 1fr; }
  .spending-date-row .btn { width:100%; }
  .spending-bar-row { grid-template-columns:1fr; gap:7px; }
  .spending-bar-value { text-align:left; }
}
@media (max-width:780px) {
  .transaction-review { grid-template-columns:1fr 1fr; }
  .table-actions { min-width:auto; }
  .wealth-asset-modal { width:calc(100vw - 20px); max-height:calc(100vh - 20px); }
  .wealth-allocation span { align-items:flex-start; }
}
@media (max-width:760px) {
  .transaction-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .transaction-action-stack { min-width:92px; }
  .subcategory-bars { padding-left:14px; }
  .refund-review { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .plan-actions { align-items:stretch; width:100%; }
  .plan-actions .btn { width:100%; }
  .invoice-upload-panel { align-items:stretch; flex-direction:column; }
  .invoice-upload-panel .btn { width:100%; }
  .amount-currency-row { grid-template-columns:1fr; }
  .invoice-source-summary { grid-template-columns:1fr; }
  .invoice-source-summary small { grid-column:auto; }
}
@media (max-width:680px) {
  .category-variance-controls { grid-template-columns:1fr; }
  .category-variance-controls .plan-clear { width:100%; }
  .plan-display-controls .btn, .obligation-controls .btn { width:100%; }
  .obligation-controls { grid-template-columns:1fr; }
  .section-header-actions { width:100%; justify-content:flex-start; }
  .plan-category-table th:last-child, .plan-category-table td:last-child { min-width:116px; }
  .plan-filter-heading, .plan-section-heading { flex-direction:column; }
  .plan-filters { grid-template-columns:1fr; }
  .plan-clear { width:100%; }
  .plan-version { grid-template-columns:1fr; }
  .plan-version > div:first-child { grid-column:auto; }
  .setup-form-row, .setup-form-row.three { grid-template-columns:1fr; }
  .finance-setup-tabs { overflow-x:auto; justify-content:flex-start; }
  .finance-setup-tabs button { white-space:nowrap; }
  .category-entry-hierarchy { grid-template-columns:1fr; }
  .spending-filter-group { padding:12px; }
  .spending-category-filters, .spending-scope-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .statement-file-row { align-items:stretch; flex-direction:column; }
  .statement-file-row span { white-space:normal; overflow-wrap:anywhere; padding:3px 6px 6px; }
}
@media (max-width:620px) {
  .spending-period-row { grid-template-columns:1fr; }
  .spending-date-actions { grid-column:auto; }
}
@media (max-width:600px) {
  .statement-preview-header, .statement-import-confirm { align-items:stretch; flex-direction:column; }
  .statement-import-confirm .btn { width:100%; }
  .statement-metrics { grid-template-columns:1fr; }
  .persistent-alert { align-items:stretch; flex-direction:column; }
  .persistent-alert .btn { width:100%; }
  .statement-import-confirm { gap:14px; }
  .statement-confirm-copy { flex-basis:auto; }
  .reconciliation-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reconciliation-actions { display:grid; grid-template-columns:1fr; }
  .reconciliation-actions .btn { width:100%; }
  .statement-lines-card .card-header { align-items:stretch; flex-direction:column; }
  .statement-filter-wrap { justify-content:space-between; width:100%; }
}
@media (max-width:560px) {
  .spending-kpis { grid-template-columns:1fr; }
  .budget-preview-totals { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .amount-currency-row { grid-template-columns:minmax(0,1fr) 105px; }
  .transaction-detail-heading { flex-direction:column; }
  .transaction-detail-grid { grid-template-columns:1fr; }
  .quick-entry-list { display:grid; grid-template-columns:1fr; }
  .quick-entry-item { width:100%; }
  .quick-entry-button { flex:1; text-align:left; }
  .login-card { padding:24px 20px; border-radius:18px; }
  .security-actions { display:grid; grid-template-columns:1fr; }
  .security-actions .btn { width:100%; }
  .sms-result-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .spending-filter-grid, .spending-kpis { grid-template-columns:1fr; }
  .spending-date-row { grid-template-columns:1fr; }
  .spending-period-row, .spending-category-filters, .spending-scope-filters { grid-template-columns:1fr; }
}
@media (max-width:460px) { .account-detail-grid { grid-template-columns:1fr; } }
@media (max-width:900px) {
  .budget-preview-totals { grid-template-columns:1fr 1fr; }
  .budget-upload-card .card-header { align-items:flex-start; flex-direction:column; }
}
@media (max-width:1200px) { .transaction-detail-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1050px) { .category-variance-controls { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ═══════════════════════════════════════════════════════════════════
   v0.23.0 — Home Dashboard Upgrade
═══════════════════════════════════════════════════════════════════ */

/* ── KPI cards — Style I (Spendee palette, white + top stripe + coloured number) */
.kpi-card-0 {
  background: #fff;
  border: 1.5px solid #e8ecf0;
  border-top: 3px solid #00c897;
  color: var(--ink);
}
.kpi-card-0 .kpi-label { color: var(--muted); }
.kpi-card-0 .kpi-value { color: #00a87e; }
.kpi-card-0 .kpi-note  { color: var(--muted); }
.kpi-card-0 .home-kpi-link { color: #00a87e; }

.kpi-card-1 {
  background: #fff;
  border: 1.5px solid #e8ecf0;
  border-top: 3px solid #4e9af1;
  color: var(--ink);
}
.kpi-card-1 .kpi-label { color: var(--muted); }
.kpi-card-1 .kpi-value { color: #2b7fd4; }
.kpi-card-1 .kpi-note  { color: var(--muted); }
.kpi-card-1 .home-kpi-link { color: #2b7fd4; }

.kpi-card-2 {
  background: #fff;
  border: 1.5px solid #e8ecf0;
  border-top: 3px solid #f6a623;
  color: var(--ink);
}
.kpi-card-2 .kpi-label { color: var(--muted); }
.kpi-card-2 .kpi-value { color: #d4861a; }
.kpi-card-2 .kpi-note  { color: var(--muted); }
.kpi-card-2 .home-kpi-link { color: #d4861a; }

.kpi-card-3 {
  background: #fff;
  border: 1.5px solid #e8ecf0;
  border-top: 3px solid #e85d8a;
  color: var(--ink);
}
.kpi-card-3 .kpi-label { color: var(--muted); }
.kpi-card-3 .kpi-value { color: #c43d6e; }
.kpi-card-3 .kpi-note  { color: var(--muted); }
.kpi-card-3 .home-kpi-link { color: #c43d6e; }

/* Financial meaning overrides decorative card position on the home dashboard. */
.home-kpi-card.tone-cash { border-top-color:var(--accent); }
.home-kpi-card.tone-cash .kpi-value,
.home-kpi-card.tone-cash .home-kpi-link { color:var(--accent); }
.home-kpi-card.tone-income,
.home-kpi-card.tone-positive { border-top-color:var(--good); }
.home-kpi-card.tone-income .kpi-value,
.home-kpi-card.tone-income .home-kpi-link,
.home-kpi-card.tone-positive .kpi-value,
.home-kpi-card.tone-positive .home-kpi-link { color:#15803d; }
.home-kpi-card.tone-spending { border-top-color:var(--warn); }
.home-kpi-card.tone-spending .kpi-value,
.home-kpi-card.tone-spending .home-kpi-link { color:#a16207; }
.home-kpi-card.tone-negative { border-top-color:var(--bad); }
.home-kpi-card.tone-negative .kpi-value,
.home-kpi-card.tone-negative .home-kpi-link { color:#b91c1c; }

.wealth-kpi.liability { border-top:3px solid var(--bad); }
.wealth-kpi.liability .kpi-value { color:#b91c1c; }
.wealth-kpi.net-worth.positive { border-top:3px solid var(--good); }
.wealth-kpi.net-worth.positive .kpi-value { color:#15803d; }
.wealth-kpi.net-worth.negative { border-top:3px solid var(--bad); background:#fffafa; }
.wealth-kpi.net-worth.negative .kpi-value { color:#b91c1c; }
.net-worth-warning { margin-top:14px; }

/* Hover — lift with coloured top glow */
.kpi-card-0:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,200,151,.15); border-color:#00c897; }
.kpi-card-1:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(78,154,241,.15); border-color:#4e9af1; }
.kpi-card-2:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(246,166,35,.15); border-color:#f6a623; }
.kpi-card-3:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(232,93,138,.15); border-color:#e85d8a; }

/* ── SVG bar chart ────────────────────────────────────────────────── */
.home-chart-card {
  background: #ffffff;
  border-top: 3px solid var(--accent);
  border-color: var(--line);
}
.home-chart-card h2 { color: var(--ink); }
.home-chart-card p  { color: var(--muted); }
.home-card-action {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:38px; padding:8px 14px;
  border:1px solid rgba(0,168,126,.24); border-radius:999px;
  background:linear-gradient(135deg,#e9faf4,#f6fffb); color:var(--accent-2);
  box-shadow:0 3px 10px rgba(0,168,126,.08);
  font:700 .82rem/1 inherit; white-space:nowrap; cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
}
.home-card-action span { font-size:1.05rem; transition:transform .15s ease; }
.home-card-action:hover,.home-card-action:focus-visible {
  background:var(--grad-accent); color:#fff; outline:0;
  box-shadow:0 7px 18px rgba(0,168,126,.2); transform:translateY(-1px);
}
.home-card-action:hover span,.home-card-action:focus-visible span { transform:translateX(2px); }
.home-svg-chart {
  margin-top: 8px;
  overflow: visible;
}
.home-chart-grid-line { stroke:#dfe5e9; stroke-width:1; }
.home-chart-axis-label,.home-chart-month-label,.home-chart-value-label {
  fill:#657487; font-family:inherit;
}
.home-chart-axis-label { font-size:10px; }
.home-chart-month-label { font-size:11px; font-weight:600; }
.home-chart-value-label { font-size:10px; font-weight:600; }
.home-chart-value-label.active { fill:var(--accent-2); font-weight:800; }
.home-svg-bar {
  transition: opacity .15s ease;
}
.home-svg-bar:hover { opacity: .85; }

/* ── Donut chart card ─────────────────────────────────────────────── */
.home-donut-card {
  display: flex;
  flex-direction: column;
  padding-bottom: 18px;
}
.home-donut-layout {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  min-height: 330px;
}
.home-donut-chart {
  display: block;
  width: min(230px, 58%);
  height: auto;
  flex-shrink: 0;
}
.home-cat-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  min-width: 0;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.home-category-row {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.home-category-row:hover { background: rgba(0,200,151,.07); }
.home-cat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.home-cat-name {
  flex: 1;
  font-size: .88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-cat-amount {
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .home-donut-layout { min-height: 300px; }
  .home-donut-chart { width: min(210px, 64%); }
  .home-cat-list { grid-template-columns: 1fr; }
}

/* ── Home overview card ───────────────────────────────────────────── */
.home-overview-card {
  border-top: 3px solid var(--accent);
  background: #ffffff;
}
.home-overview-card h2 { color: var(--ink); }

/* ── Page title sizing — utility screens smaller ──────────────────── */
.main .topbar .title-block h1 {
  font-size: clamp(1.3rem, 1.8vw, 1.75rem);
  font-weight: 800;
}

/* ── Table row padding — more breathing room ─────────────────────── */
td { padding: 16px 14px; border-bottom: 1px solid rgba(223,229,233,.5); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }

/* ── Status chips — consistent sizing ────────────────────────────── */
.status-chip {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.status-chip.good {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
}
.status-chip.warn {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
}
.status-chip.bad {
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fca5a5;
}
.status-chip.neutral {
  color: var(--ink-2);
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

/* ── Recent activity amounts — clear income vs expense ────────────── */
.home-activity-row .amount.positive { color: #16a34a; font-weight: 700; }
.home-activity-row .amount.negative { color: #dc2626; font-weight: 700; }

/* ── Spending analysis — primary filters + more filters toggle ─────── */
.spending-primary-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  align-items: end;
}
.spending-more-filters {
  margin-top: 10px;
}
.spending-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent-2);
  cursor: pointer;
  list-style: none;
  padding: 6px 0;
  user-select: none;
}
.spending-more-toggle::-webkit-details-marker { display: none; }
.spending-more-toggle::before {
  content: '+';
  width: 18px; height: 18px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 800; color: var(--accent);
  transition: transform .2s ease;
}
.spending-more-filters[open] .spending-more-toggle::before {
  content: '−';
}
.spending-more-filters .spending-scope-filters {
  margin-top: 10px;
}

/* ── Account list — left accent by type ──────────────────────────────── */
.account-item[data-type="Current Account"] { border-left: 3px solid #16a34a; }
.account-item[data-type="Savings Account"] { border-left: 3px solid #4e9af1; }
.account-item[data-type="Credit Facility"],
.account-item[data-type="Credit Card Account"] { border-left: 3px solid #f6a623; }
.account-item[data-type="Investment Custody"],
.account-item[data-type="Investment Account"] { border-left: 3px solid #a78bfa; }
.account-item[data-type="Mortgage"],
.account-item[data-type="Loan"] { border-left: 3px solid #dc2626; }
.account-item[data-type="Digital Asset Custody"] { border-left: 3px solid #f59e0b; }

/* ═══════════════════════════════════════════════════════════════════
   v0.24.0 — New 5-tab navigation
═══════════════════════════════════════════════════════════════════ */

/* ── Sidebar: 5 items, cleaner ─────────────────────────────────── */
.nav-action-group .nav-button { display:none; }
.nav-action-group { display:none; }

.sidebar-footer {
  appearance:none;
  font:inherit;
  cursor:pointer;
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  margin-bottom:16px;
  flex-shrink:0;
  transition:background .15s ease;
}
.sidebar-footer:hover { background:rgba(0,200,151,.1); border-color:rgba(0,200,151,.25); }
.sidebar-settings-icon {
  margin-left:auto;
  color:var(--muted);
  opacity:.6;
  flex-shrink:0;
}

/* ── Bottom tab bar — mobile primary nav ───────────────────────── */
.bottom-nav {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  height:68px;
  background:#ffffff;
  border-top:1px solid var(--line);
  z-index:100;
  padding:0 8px env(safe-area-inset-bottom, 0px);
  justify-content:space-around;
  align-items:center;
  box-shadow:0 -4px 20px rgba(15,23,42,.08);
}

.bottom-tab {
  flex:1;
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:8px 4px;
  cursor:pointer;
  border-radius:12px;
  transition:background .12s ease;
  color:var(--muted);
  max-width:80px;
}
.bottom-tab:hover { background:rgba(0,200,151,.06); }
.bottom-tab.active { color:var(--accent-2); }
.bottom-tab-icon { font-size:0; line-height:0; }
.bottom-tab-icon .lucide { width:22px; height:22px; stroke-width:1.75; }
.bottom-tab.active .bottom-tab-icon .lucide { stroke:var(--accent); }
.bottom-tab-label { font-size:10px; font-weight:700; font-family:var(--font-display); letter-spacing:.01em; }

/* Add button — centre tab, floating */
.bottom-tab-action {
  flex:0 0 64px;
  width:64px; height:64px;
  border-radius:50%;
  border:0;
  background:var(--accent);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,200,151,.35);
  transition:transform .15s ease, box-shadow .15s ease;
  margin-top:-20px;
}
.bottom-tab-action:hover { transform:scale(1.06); box-shadow:0 6px 24px rgba(0,200,151,.45); }
.bottom-tab-action:active { transform:scale(.96); }
.bottom-tab-action-icon .lucide { width:26px; height:26px; stroke-width:2; stroke:white; }

/* ── Mobile layout with bottom nav ────────────────────────────── */
@media (max-width:900px) {
  .bottom-nav { display:flex; }
  .main { padding-bottom:88px !important; }
  /* Hide sidebar on mobile entirely — bottom nav takes over */
  .sidebar { display:none !important; }
  .app-shell { display:block; }
  .mobile-menu-button { display:none; }
  /* Show brand in top bar on mobile */
  .topbar { padding:16px 16px 0; }
}

/* ── Desktop: sidebar simplified to 5 items ───────────────────── */
@media (min-width:901px) {
  .bottom-nav { display:none !important; }
  .nav-action-group { display:flex !important; flex-direction:column; }
  .nav-action-group .nav-button {
    display:flex !important;
    background:var(--accent) !important;
    color:white !important;
    border-radius:10px !important;
    margin:2px 0;
    font-weight:700;
    box-shadow:0 2px 8px rgba(0,200,151,.2);
    transition:transform .15s ease, box-shadow .15s ease !important;
  }
  .nav-action-group .nav-button:hover {
    transform:translateY(-1px) !important;
    box-shadow:0 4px 16px rgba(0,200,151,.35) !important;
    background:var(--accent) !important;
    color:white !important;
  }
  .nav-action-group .nav-button .icon .lucide { stroke:white; }
}

/* ── v0.24.1 fixes: collapsed sidebar, brand, spacing ─────────── */
.sidebar-collapsed .brand-mark svg { width:32px; height:32px; }
.sidebar-collapsed .brand { justify-content:center; padding:0; }
.sidebar-collapsed .sidebar-settings-icon { display:none; }
.sidebar-collapsed .nav-action-group .nav-button {
  justify-content:center;
  padding-inline:10px;
  border-radius:12px !important;
}


/* ── v0.24.8 — adverse variance red, favourable green ─────────── */
.kpi-value.negative, .amount.negative, .amount.expense { color:#dc2626; font-weight:700; }
.kpi-value.positive, .amount.positive, .amount.income  { color:#16a34a; font-weight:700; }

/* ═══════════════════════════════════════════════════════════════════
   v0.25.0 — Financial Health Dashboard
═══════════════════════════════════════════════════════════════════ */

/* ── Hero card ───────────────────────────────────────────────── */
.health-hero { margin-bottom:14px; }
.health-hero-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.health-balance-label { display:block; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.health-balance-value { display:block; font-size:2rem; font-weight:800; letter-spacing:-.04em; font-family:var(--font-display); color:var(--ink); font-variant-numeric:tabular-nums; }
.health-period-picker { font-size:.78rem; border:1.5px solid var(--line); border-radius:8px; padding:5px 8px; background:var(--paper); color:var(--ink); }

/* ── Budget ring row ─────────────────────────────────────────── */
.health-ring-row { display:flex; align-items:center; gap:14px; }
.health-ring-svg { flex-shrink:0; }
.health-ring-main { font-size:.95rem; font-weight:700; color:var(--ink); font-family:var(--font-display); margin-bottom:3px; }
.health-ring-sub { font-size:.78rem; color:var(--muted); }

/* ── Alerts ──────────────────────────────────────────────────── */
.health-alerts { display:grid; gap:8px; margin-bottom:14px; }
.health-alert { display:flex; align-items:start; gap:10px; padding:11px 14px; border-radius:12px; }
.health-alert-good { background:#e6faf5; border:1px solid #b2e8d9; }
.health-alert-warn { background:#fff8e6; border:1px solid #fcd34d; }
.health-alert-bad  { background:#fff0f0; border:1px solid #fca5a5; }
.health-alert-icon { font-size:14px; flex-shrink:0; margin-top:1px; }
.health-alert strong { display:block; font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:2px; }
.health-alert small { display:block; font-size:.75rem; color:var(--muted); line-height:1.4; }

/* ── KPI row (mobile) ────────────────────────────────────────── */
.health-kpis { margin-bottom:14px; }
.health-kpi-card { padding:12px 14px; }
.health-kpi-card .kpi-label { font-size:.7rem; }
.health-kpi-card .kpi-value { font-size:1.2rem; }
.health-kpi-card .kpi-note { font-size:.7rem; }

/* ── Category bars ───────────────────────────────────────────── */
.health-categories { margin-bottom:14px; }
.health-cat-list { display:grid; gap:10px; margin-top:4px; }
.health-cat-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
.health-cat-info { display:flex; align-items:center; gap:7px; min-width:120px; }
.health-cat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.health-cat-name { font-size:.8rem; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.health-cat-bar-wrap { height:6px; background:var(--line); border-radius:99px; overflow:hidden; min-width:60px; }
.health-cat-bar { height:100%; border-radius:99px; transition:width .4s ease-out; }
.health-cat-amount { font-size:.8rem; font-weight:700; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; min-width:70px; text-align:right; }

/* ── Recent transactions (compact) ──────────────────────────── */
.health-recent { margin-bottom:14px; }
.health-tx-row { width:100%; border:0; background:transparent; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:.5px solid var(--line); cursor:pointer; font:inherit; text-align:left; transition:background .1s ease; border-radius:8px; }
.health-tx-row:last-child { border-bottom:none; }
.health-tx-row:hover { background:rgba(0,200,151,.04); }
.health-tx-info strong { display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:2px; }
.health-tx-info small { display:block; font-size:.75rem; color:var(--muted); }
.health-tx-amount { font-size:.9rem; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.health-tx-amount.income { color:#16a34a; }
.health-tx-amount.expense { color:#dc2626; }

/* ── Desktop health ring row ─────────────────────────────────── */
.health-desktop-hero { margin-bottom:18px; }
.health-desktop-ring { display:flex; align-items:center; gap:20px; padding:20px 22px; border-top:3px solid var(--accent); }
.health-desktop-ring svg { flex-shrink:0; }
.health-desktop-ring .health-ring-main { font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.health-desktop-ring .health-alert { margin-top:8px; }
.health-desktop-ring .health-alerts { margin-bottom:0; gap:6px; }

/* ═══════════════════════════════════════════════════════════════════
   v0.25.8 — Transaction table: 3 columns + date grouping
═══════════════════════════════════════════════════════════════════ */

/* ── Date group header ────────────────────────────────────────────── */
.tx-date-group-header td {
  background: var(--canvas);
  padding: 8px 14px 4px;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.tx-date-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tx-date-total {
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  padding-left: 12px;
}
.tx-date-total.income  { color: #16a34a; }
.tx-date-total.expense { color: #dc2626; }

/* ── Description cell ─────────────────────────────────────────────── */
.tx-desc-cell { min-width: 200px; }
.tx-main {
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.tx-sub {
  font-size: .75rem;
  color: var(--muted);
}

/* ── Category + status cell ───────────────────────────────────────── */
.tx-cat-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tx-status-chip {
  font-size: .7rem;
  padding: 2px 6px;
}

/* ── Amount cell ──────────────────────────────────────────────────── */
.transaction-amount-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 700;
  font-size: .9rem;
}

/* ── Expand button ────────────────────────────────────────────────── */
.table-actions .btn.small:last-child {
  min-width: 32px;
  padding: 4px 8px;
}

/* ── Row padding — generous ───────────────────────────────────────── */
.transaction-table td { padding: 14px 14px; vertical-align: middle; }
.transaction-table th { padding: 10px 14px; }
.transaction-table .tx-date-group-header td { padding: 10px 14px 4px; }

/* ── Remove old 6-column widths ──────────────────────────────────── */
.transaction-table { table-layout: auto; width: 100%; }

/* ── v0.25.10 — Tx date header total no-wrap ──────────────────── */
.tx-date-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-date-group-header td { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
   v0.25.15 — Financial Health Dashboard (mobile)
═══════════════════════════════════════════════════════════════════ */
.health-hero { margin-bottom:14px; }
.health-hero-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.health-balance-label { display:block; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.health-balance-value { display:block; font-size:2rem; font-weight:800; letter-spacing:-.04em; font-family:var(--font-display); color:var(--ink); font-variant-numeric:tabular-nums; }
.health-period-picker { font-size:.78rem; border:1.5px solid var(--line); border-radius:8px; padding:5px 8px; background:var(--paper); color:var(--ink); }
.health-ring-row { display:flex; align-items:center; gap:14px; }
.health-ring-main { font-size:.95rem; font-weight:700; color:var(--ink); font-family:var(--font-display); margin-bottom:3px; }
.health-ring-sub { font-size:.78rem; color:var(--muted); }
.health-alerts { display:grid; gap:8px; margin-bottom:14px; }
.health-alert { display:flex; align-items:start; gap:10px; padding:11px 14px; border-radius:12px; }
.health-alert-good { background:#e6faf5; border:1px solid #b2e8d9; }
.health-alert-warn { background:#fff8e6; border:1px solid #fcd34d; }
.health-alert-bad { background:#fff0f0; border:1px solid #fca5a5; }
.health-alert-icon { font-size:14px; flex-shrink:0; margin-top:1px; }
.health-alert strong { display:block; font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:2px; }
.health-alert small { display:block; font-size:.75rem; color:var(--muted); line-height:1.4; }
.health-kpis { margin-bottom:14px; }
.health-kpi-card { padding:12px 14px; }
.health-kpi-card .kpi-value { font-size:1.2rem; }
.health-categories { margin-bottom:14px; }
.health-cat-list { display:grid; gap:10px; margin-top:4px; }
.health-cat-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
.health-cat-info { display:flex; align-items:center; gap:7px; min-width:100px; overflow:hidden; }
.health-cat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.health-cat-name { font-size:.8rem; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.health-cat-bar-wrap { height:6px; background:var(--line); border-radius:99px; overflow:hidden; }
.health-cat-bar { height:100%; border-radius:99px; transition:width .4s ease-out; }
.health-cat-amount { font-size:.8rem; font-weight:700; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; }
.health-recent { margin-bottom:14px; }
.health-tx-row { width:100%; border:0; background:transparent; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:.5px solid var(--line); cursor:pointer; font:inherit; text-align:left; border-radius:8px; transition:background .1s; }
.health-tx-row:last-child { border-bottom:none; }
.health-tx-row:hover { background:rgba(0,200,151,.04); }
.health-tx-info strong { display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:2px; }
.health-tx-info small { display:block; font-size:.75rem; color:var(--muted); }
.health-tx-amount { font-size:.9rem; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.health-tx-amount.income { color:#16a34a; }
.health-tx-amount.expense { color:#dc2626; }

/* ── v0.25.21 Mobile: hide Reverse/Refund/Post buttons on narrow screens ── */
@media (max-width: 900px) {
  .transaction-action-stack .btn.primary { display:none; }
  .transaction-action-stack .transaction-action-menu { display:block; }
  .transaction-action-stack .transaction-detail-toggle {
    min-width: 32px; 
    padding: 4px 10px;
    font-size: .8rem;
  }
}


/* v0.25.25 — mobile-first navigation and quick capture */
.bottom-tab-action {
  position: relative;
  overflow: visible;
}
.bottom-tab-action-label {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  color: #475569;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.mobile-add-hub {
  max-width: 680px;
  margin: 0 auto;
}
.mobile-add-heading {
  margin-bottom: 18px;
}
.mobile-add-heading h2 {
  margin: 4px 0 6px;
}
.mobile-add-heading p {
  margin: 0;
  color: var(--muted, #64748b);
}
.mobile-add-grid {
  display: grid;
  gap: 12px;
}
.mobile-add-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid #dbe3ec;
  border-radius: 16px;
  background: #fff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.mobile-add-card:hover,
.mobile-add-card:focus-visible {
  border-color: #00a87e;
  box-shadow: 0 8px 24px rgba(0, 168, 126, 0.12);
  outline: none;
}
.mobile-add-card.primary {
  border-color: #00a87e;
  background: linear-gradient(135deg, #ecfdf8 0%, #ffffff 100%);
}
.mobile-add-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #008f6b;
  background: #dffaf1;
}
.mobile-add-card-icon .lucide {
  width: 23px;
  height: 23px;
}
.mobile-add-card span:last-child {
  display: grid;
  gap: 3px;
}
.mobile-add-card strong {
  font-size: 0.96rem;
}
.mobile-add-card small {
  color: #64748b;
  font-size: 0.79rem;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .bottom-nav {
    height: calc(70px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-tab {
    min-width: 0;
  }
  .bottom-tab-action {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    margin-top: -18px;
  }
  .bottom-tab-action-icon .lucide {
    width: 27px;
    height: 27px;
  }
  .mobile-add-hub {
    padding-bottom: 12px;
  }
  .mobile-add-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) {
  .mobile-add-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mobile-add-card.primary {
    grid-column: 1 / -1;
  }
}

/* v0.25.33 - account controls and mobile Home hierarchy */
.sidebar-account {
  margin-top: auto;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: stretch;
  flex-shrink: 0;
}
.sidebar-account .sidebar-footer {
  margin: 0;
  padding: 10px 12px;
  min-width: 0;
}
.sidebar-sign-out {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.sidebar-sign-out:hover,
.sidebar-sign-out:focus-visible {
  color: #b42318;
  border-color: rgba(180, 35, 24, .28);
  background: #fff5f4;
  outline: none;
}
.sidebar-sign-out .lucide { width: 18px; height: 18px; }
.sidebar-collapsed .sidebar-account { grid-template-columns: 1fr; }
.sidebar-collapsed .sidebar-sign-out { height: 40px; }

@media (max-width: 900px) {
  .health-budget-hero { padding: 18px; }
  .health-budget-hero .health-hero-top {
    align-items: center;
    margin-bottom: 14px;
  }
  .health-budget-title {
    display: block;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.025em;
  }
  .health-period-picker {
    min-height: 44px;
    padding: 8px 34px 8px 12px;
    border-radius: 12px;
    font-size: .86rem;
  }
  .health-kpis {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .health-kpi-card {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 5px;
    min-height: 112px;
    padding: 17px 18px;
  }
  .health-kpi-card .kpi-label {
    display: block;
    line-height: 1.25;
  }
  .health-kpi-card .kpi-value {
    display: block;
    margin: 0;
    font-size: clamp(1.55rem, 8vw, 2rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }
  .health-kpi-card .kpi-note {
    display: block;
    font-size: .78rem;
    line-height: 1.35;
  }
}


/* v0.25.25 — focused mobile cash-flow and More hubs */
.mobile-cashflow,
.mobile-more-hub {
  max-width: 680px;
  margin: 0 auto;
}
.cash-safety-hero {
  display: grid;
  gap: 16px;
  border-top: 4px solid #00a87e;
}
.cash-safety-hero.watch { border-top-color: #f59e0b; }
.cash-safety-hero.over { border-top-color: #dc2626; }
.cash-safety-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.cash-safety-title h2 {
  margin: 0 0 4px;
}
.cash-safety-title p {
  margin: 0;
  color: #64748b;
}
.cash-safety-title > strong {
  display: grid;
  text-align: right;
  font-size: 1.12rem;
}
.cash-safety-title > strong small {
  color: #64748b;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
}
.cash-safety-progress,
.cash-safety-meter {
  overflow: hidden;
  display: block;
  background: #e8eef3;
  border-radius: 999px;
}
.cash-safety-progress { height: 10px; }
.cash-safety-meter { height: 7px; }
.cash-safety-progress > span,
.cash-safety-meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #00a87e;
}
.cash-safety-hero.watch .cash-safety-progress > span { background: #f59e0b; }
.cash-safety-hero.over .cash-safety-progress > span { background: #dc2626; }
.cash-safety-summary {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.cash-safety-summary span {
  display: grid;
  gap: 3px;
}
.cash-safety-summary small {
  color: #64748b;
  font-size: .7rem;
}
.cash-safety-summary strong {
  font-size: .88rem;
}
.cash-safety-categories {
  margin-top: 14px;
}
.cash-safety-list {
  display: grid;
  gap: 4px;
}
.cash-safety-row {
  display: grid;
  grid-template-columns: minmax(120px,1.4fr) minmax(70px,1fr) 58px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  background: transparent;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}
.cash-safety-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.cash-safety-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .84rem;
}
.cash-safety-main small {
  color: #64748b;
  font-size: .7rem;
}
.cash-safety-status {
  justify-self: end;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 800;
}
.cash-safety-status.safe { color: #047857; background: #d1fae5; }
.cash-safety-status.watch { color: #a16207; background: #fef3c7; }
.cash-safety-status.over { color: #b91c1c; background: #fee2e2; }
.mobile-hub-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.mobile-hub-grid {
  display: grid;
  gap: 10px;
}
.mobile-hub-card {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid #dbe3ec;
  border-radius: 15px;
  background: #fff;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
}
.mobile-hub-card:hover,
.mobile-hub-card:focus-visible {
  border-color: #00a87e;
  outline: none;
}
.mobile-hub-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #008f6b;
  background: #e5faf3;
}
.mobile-hub-icon .lucide {
  width: 21px;
  height: 21px;
}
.mobile-hub-card > span:nth-child(2) {
  display: grid;
  gap: 2px;
}
.mobile-hub-card strong { font-size: .9rem; }
.mobile-hub-card small { color: #64748b; font-size: .72rem; }
.mobile-hub-chevron { color: #94a3b8; font-size: 1.4rem; }

@media (max-width: 520px) {
  .cash-safety-summary {
    grid-template-columns: 1fr 1fr;
  }
  .cash-safety-summary span:last-child {
    grid-column: 1 / -1;
  }
  .cash-safety-row {
    grid-template-columns: minmax(110px,1.35fr) minmax(55px,.8fr) 52px;
    gap: 7px;
  }
  .mobile-hub-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* The main four-column ledger follows its content container at every desktop width. */
.transaction-table { min-width:0; width:100%; table-layout:fixed; }
.transaction-table th, .transaction-table td { min-width:0 !important; }
.transaction-table th:nth-child(1), .transaction-table td:nth-child(1) { width:43%; }
.transaction-table th:nth-child(2), .transaction-table td:nth-child(2) { width:22%; }
.transaction-table th:nth-child(3), .transaction-table td:nth-child(3) { width:16%; }
.transaction-table th:nth-child(4), .transaction-table td:nth-child(4) { width:19%; }

/* v0.25.32: final responsive transaction overrides must follow legacy table rules. */
@media (max-width: 1200px) {
  .transaction-table { min-width:0; width:100%; table-layout:fixed; }
  .transaction-table th, .transaction-table td { min-width:0 !important; }
  .transaction-table th:nth-child(1), .transaction-table td:nth-child(1) { width:43%; }
  .transaction-table th:nth-child(2), .transaction-table td:nth-child(2) { width:22%; }
  .transaction-table th:nth-child(3), .transaction-table td:nth-child(3) { width:16%; }
  .transaction-table th:nth-child(4), .transaction-table td:nth-child(4) { width:19%; }
}

@media (max-width: 1600px) {
  .transaction-table, .transaction-table tbody { display:block; width:100%; }
  .transaction-table thead { display:none; }
  .transaction-table .tx-date-group-header { display:block; margin:14px 0 7px; }
  .transaction-table .tx-date-group-header:first-child { margin-top:0; }
  .transaction-table .tx-date-cell { display:flex; width:100% !important; align-items:center; justify-content:space-between; padding:8px 4px; border:0; }
  .transaction-table .transaction-row {
    display:grid; width:100%; grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"description amount" "category actions";
    gap:10px 14px; margin-bottom:9px; padding:14px;
    border:1px solid var(--line); border-radius:14px; background:var(--paper);
  }
  .transaction-table .transaction-row > td { display:block; width:auto !important; padding:0; border:0; min-width:0 !important; }
  .transaction-table .tx-desc-cell { grid-area:description; }
  .transaction-table .tx-cat-cell { grid-area:category; display:flex; align-items:center; gap:7px; min-width:0; }
  .transaction-table .transaction-amount-cell { grid-area:amount; align-self:start; text-align:right; }
  .transaction-table .table-actions { grid-area:actions; align-self:center; background:transparent; }
  .transaction-table .transaction-action-stack { min-width:0; gap:6px; }
  .transaction-table .transaction-action-menu > summary,
  .transaction-table .transaction-detail-toggle { display:inline-grid; place-items:center; width:38px; min-width:38px; height:34px; padding:0; }
  .transaction-table .transaction-action-popover { position:fixed; z-index:100; top:auto; right:16px; bottom:88px; left:16px; min-width:0; }
  .transaction-table .transaction-detail-row:not([hidden]) { display:block; margin:-2px 0 10px; }
  .transaction-table .transaction-detail-row:not([hidden]) > td { display:block; width:100% !important; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
}