:root {
  --green-950: #0F3D28;
  --green-900: #14532D;
  --green-800: #166534;
  --green-700: #15803D;
  --green-500: #22C55E;
  --green-100: #DCFCE7;
  --green-50:  #F0FDF4;
  --white:     #FFFFFF;
  --ink:       #0B1F14;
  --ink-2:     #1F2937;
  --muted:     #6B7280;
  --border:    #E5E7EB;
  --danger:    #B91C1C;
  --danger-bg: #FEF2F2;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 1px 2px rgba(15, 61, 40, .06), 0 4px 12px rgba(15, 61, 40, .08);
  --shadow-lg: 0 12px 40px rgba(15, 61, 40, .14);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green-800); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }

/* ── Auth pages ───────────────────────────────────────────────────────────── */
.auth-body {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--green-100), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, var(--green-100), transparent 60%),
    var(--white);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 2.25rem 2rem 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  color: var(--green-900);
  font-weight: 700;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--green-900);
  color: var(--white);
  font-size: .875rem;
}
.brand-name { font-size: 1rem; letter-spacing: .01em; }

.auth-card h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .25rem;
}
.subtitle { color: var(--muted); margin-bottom: 1.5rem; }
.hint { color: var(--muted); font-weight: 400; font-size: .8125rem; }

form label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: 1rem 0 .375rem;
}
form input {
  width: 100%;
  padding: .75rem .875rem;
  font-size: .9375rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
form input:focus {
  outline: none;
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(22, 101, 52, .15);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1rem 0 0 0;
  font-size: .875rem;
  color: var(--gray-700, #374151);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--green-700, #15803d);
}

.btn-primary {
  width: 100%;
  margin-top: 1.5rem;
  padding: .8125rem 1rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--white);
  background: var(--green-900);
  border: 1px solid var(--green-900);
  border-radius: var(--radius-sm);
  transition: background .15s, transform .05s;
}
.btn-primary:hover { background: var(--green-800); }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  padding: .5rem .875rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--green-900);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: var(--green-50); border-color: var(--green-700); }

.alert {
  padding: .75rem .875rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  margin-bottom: .5rem;
}
.alert-error {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid #FECACA;
}

.foot {
  margin-top: 1.5rem;
  font-size: .875rem;
  color: var(--muted);
  text-align: center;
}

/* ── App (dashboard) ─────────────────────────────────────────────────────── */
.app-body {
  min-height: 100%;
  background: var(--green-50);
}
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.logout-form { margin: 0; }
.app-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
}
.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
}
.panel h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-900);
  margin-bottom: .375rem;
}
.panel + .panel { margin-top: 1.5rem; }
.panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--green-900);
  margin-bottom: 1rem;
  letter-spacing: .01em;
}
.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.btn-inline {
  width: auto;
  margin-top: 0;
  white-space: nowrap;
  padding: .625rem 1rem;
  font-size: .875rem;
}
.btn-inline:disabled { opacity: .6; cursor: not-allowed; }

.alert.alert-info {
  color: var(--green-900);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  margin-top: 1rem;
}

.empty {
  color: var(--muted);
  font-size: .9375rem;
  padding: .25rem 0;
}

/* ── Branded error pages (404 / 500 / 403) ─────────────────────────── */
.app-main-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 5rem);
}
.error-panel {
  max-width: 520px;
  text-align: center;
}
.error-emoji {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.error-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-900);
  margin: 0 0 .75rem;
}
.error-body {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
.error-suggest {
  margin: 1rem 0 0;
  font-size: .9375rem;
  color: var(--ink);
}
.error-suggest a { color: var(--green-700); margin: 0 .25rem; }
.error-ref {
  margin-top: 2rem;
  font-size: .8125rem;
  color: var(--muted);
}
.error-ref code {
  background: var(--green-50);
  padding: .125rem .375rem;
  border-radius: 4px;
  color: var(--green-900);
}
.brand-link {
  text-decoration: none;
  color: inherit;
}

/* ── First-run welcome banner (dashboard) ──────────────────────────── */
.welcome-hero {
  background: linear-gradient(135deg, var(--green-50) 0%, var(--white) 100%);
  border: 1px solid var(--green-100);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.welcome-hero h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--green-900);
  margin: 0 0 .5rem;
}
.welcome-hero p {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto 1.5rem;
}
.welcome-hero .btn-primary {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  padding: .875rem 1.75rem;
  font-size: 1rem;
}
.welcome-hero .welcome-foot {
  margin: 1.25rem 0 0;
  font-size: .8125rem;
  color: var(--muted);
}

/* ── Site-wide footer (privacy anchor) ─────────────────────────────── */
/* Two contexts to render in: inside .app-body (full-width app pages —
   sits below the main content with breathing room) and inside .auth-card
   (login/register narrow card — the footer sits OUTSIDE the card via the
   placement in the EJS, so we add a top margin and center it). */
.app-footer {
  text-align: center;
  color: var(--muted);
  font-size: .8125rem;
  padding: 2rem 1rem 1.5rem;
  margin-top: auto;
}
.app-footer a {
  color: var(--muted);
  text-decoration: underline;
}
.app-footer a:hover { color: var(--green-900); }
/* Make .app-body a column so margin-top:auto in the footer pins it
   to the viewport bottom on short pages without overlapping content. */
.app-body { display: flex; flex-direction: column; min-height: 100vh; }
/* Auth pages center their card — the footer needs to escape the grid
   placement. Easiest: make the body a grid with two rows (card, footer)
   and let the existing place-items only apply to the card via :first-child. */
.auth-body { grid-template-rows: 1fr auto; }
.auth-body > .auth-card { align-self: center; justify-self: center; }
.auth-body > .app-footer { margin-top: 0; }

/* ── Settings page (Account section + danger affordances) ─────────── */
.settings-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--border);
}
.settings-row:first-of-type { border-top: 0; padding-top: 0; }
.settings-label { font-weight: 600; color: var(--ink); margin-bottom: .25rem; }
.settings-help { color: var(--muted); font-size: .875rem; line-height: 1.45; max-width: 480px; }

/* Subdued "Delete my account" affordance — small, muted, NOT a primary
   button. The destructive intent only surfaces inside the modal. */
.btn-danger-link {
  background: transparent;
  border: 0;
  padding: .5rem 0;
  color: #9B2C2C;
  font-size: .875rem;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.btn-danger-link:hover { color: #7B1D1D; }

/* Confirmation modal — uses native <dialog>. Matches the auth-card
   look (white card, soft shadow) so it doesn't feel out-of-system. */
.confirm-modal {
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  background: transparent;
  max-width: 460px;
  width: calc(100vw - 2rem);
}
.confirm-modal::backdrop {
  background: rgba(11, 31, 20, .55);
}
.confirm-modal form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: var(--shadow-lg);
}
.confirm-modal-title {
  font-size: 1.25rem;
  color: #7F1D1D;
  margin: 0 0 .5rem;
}
.confirm-modal-warn {
  color: var(--ink);
  font-size: .9375rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.confirm-modal code {
  background: #FEF2F2;
  color: #7F1D1D;
  padding: .0625rem .25rem;
  border-radius: 3px;
  font-size: .9em;
}
.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 1.25rem;
}
.btn-danger {
  width: auto;
  padding: .625rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  background: #B91C1C;
  border: 1px solid #B91C1C;
  color: var(--white);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-danger:hover { background: #991B1B; }
.btn-danger:disabled { opacity: .5; cursor: not-allowed; }

/* Reusable "no accounts yet" empty-state CTA used inside .panel on /budgets,
   /alerts, /subscriptions, /net-worth, /insights, /transactions. */
.empty-cta {
  text-align: center;
  padding: 2rem 1rem;
}
.empty-cta-emoji { font-size: 2rem; margin-bottom: .75rem; }
.empty-cta-text  { color: var(--ink); font-size: 1rem; margin: 0 0 1.25rem; }
.empty-cta-btn   { display: inline-block; }

.institution-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.institution {
  padding: .875rem 1rem;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-sm);
}
.institution-name {
  font-weight: 600;
  color: var(--green-900);
  margin-bottom: .125rem;
}
.institution-meta {
  font-size: .8125rem;
  color: var(--muted);
}

.txn-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.txn {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9375rem;
}
.txn:last-child { border-bottom: 0; }
.txn-date {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
}
.txn-name {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.txn-pending {
  display: inline-block;
  margin-left: .375rem;
  padding: .0625rem .375rem;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--green-50);
  border: 1px solid var(--border);
  border-radius: 9999px;
  vertical-align: 1px;
}
.txn-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.txn-amount.txn-out { color: var(--danger); }
.txn-amount.txn-in  { color: var(--green-800); }

/* ── header actions (Dashboard ↔ Transactions nav) ────────────────────── */
.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── Net Position panel ───────────────────────────────────────────────── */
.net-panel {
  text-align: center;
  padding: 1.75rem 2rem;
}
.net-label {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .375rem;
}
.net-amount {
  font-size: 2.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.net-amount.net-positive { color: var(--green-800); }
.net-amount.net-negative { color: var(--danger); }

/* ── sync controls + last-synced ──────────────────────────────────────── */
.sync-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.last-synced {
  font-size: .8125rem;
  color: var(--muted);
}

/* ── grouped institution accounts ─────────────────────────────────────── */
.institution-group + .institution-group { margin-top: 1.25rem; }
.institution-name {
  font-weight: 700;
  color: var(--green-900);
  font-size: 1rem;
  margin-bottom: .5rem;
}
.account-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
}
.account-card {
  padding: .875rem 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.acct-row1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
}
.acct-row2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
}
.acct-name {
  font-weight: 600;
  color: var(--ink);
  font-size: .9375rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acct-mask {
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.acct-type {
  font-size: .75rem;
  color: var(--muted);
}
.acct-balance {
  font-weight: 700;
  color: var(--green-900);
  font-variant-numeric: tabular-nums;
}
.acct-available {
  font-size: .75rem;
  color: var(--muted);
  text-align: right;
}

/* ── transactions page ────────────────────────────────────────────────── */
.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--green-900);
  margin-bottom: 1rem;
}
.filters {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 1rem;
}
.filter { display: flex; flex-direction: column; gap: .375rem; }
.filter-grow { min-width: 0; }
.filter label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.filter select,
.filter input[type="search"] {
  padding: .625rem .75rem;
  font-size: .9375rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.filter select:focus,
.filter input[type="search"]:focus {
  outline: none;
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(22, 101, 52, .15);
}

/* transaction row layout for the /transactions page */
.txn-row {
  grid-template-columns: 100px 1fr 200px 110px;
}
.txn-primary { display: block; }
.txn-secondary {
  display: block;
  font-size: .8125rem;
  color: var(--muted);
  margin-top: .125rem;
}
.txn-account {
  font-size: .8125rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.txn-amount.txn-in { color: var(--green-800); }
.txn-amount.txn-out { color: var(--danger); }
.txn-pending {
  display: inline-block;
  margin-left: .375rem;
  padding: .0625rem .375rem;
  font-size: .6875rem;
  font-weight: 600;
  font-style: italic;
  color: var(--muted);
  background: var(--green-50);
  border: 1px solid var(--border);
  border-radius: 9999px;
  vertical-align: 1px;
}

.txn-info {
  font-size: .8125rem;
  color: var(--muted);
  margin-bottom: .75rem;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.pagination button {
  padding: .5rem .875rem;
  font-size: .875rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--green-900);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.pagination button:hover:not(:disabled) {
  background: var(--green-50);
  border-color: var(--green-700);
}
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.page-indicator {
  font-size: .8125rem;
  color: var(--muted);
}

/* ── spinner (text-based to avoid an asset) ──────────────────────────── */
.spinner-inline {
  display: inline-block;
  width: 1em;
  text-align: center;
  animation: pulse 1.2s ease-in-out infinite;
  color: var(--green-700);
  font-weight: 700;
  letter-spacing: .15em;
}
@keyframes pulse { 0%,100% { opacity: .3 } 50% { opacity: 1 } }

/* ── Category palette (5 distinct, accessible-on-white hues) ───────────
   Order matches the default display_order: 1 Eating Out, 2 Gas,
   3 Groceries, 4 Other, 5 Shopping. The text-on-pill remains var(--ink)
   so contrast stays > 4.5:1 against these soft fills. */
.cat-color-1 { --cat-bg: #FED7D7; --cat-bd: #FEB2B2; --cat-fg: #9B2C2C; } /* coral */
.cat-color-2 { --cat-bg: #FEEBC8; --cat-bd: #FBD38D; --cat-fg: #9C4221; } /* amber */
.cat-color-3 { --cat-bg: #C6F6D5; --cat-bd: #9AE6B4; --cat-fg: #22543D; } /* leaf  */
.cat-color-4 { --cat-bg: #E2E8F0; --cat-bd: #CBD5E0; --cat-fg: #2D3748; } /* slate */
.cat-color-5 { --cat-bg: #E9D8FD; --cat-bd: #D6BCFA; --cat-fg: #44337A; } /* violet*/

.cat-color {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--cat-bg);
  border: 1px solid var(--cat-bd);
  margin-right: .5rem;
  vertical-align: 1px;
}
.cat-fill-1 { background: #FC8181; }
.cat-fill-2 { background: #F6AD55; }
.cat-fill-3 { background: #68D391; }
.cat-fill-4 { background: #A0AEC0; }
.cat-fill-5 { background: #B794F4; }

/* ── category badge on transaction rows ──────────────────────────────── */
.cat-badge {
  display: inline-block;
  padding: .125rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--cat-fg, var(--ink));
  background: var(--cat-bg, var(--green-50));
  border: 1px solid var(--cat-bd, var(--border));
  border-radius: 9999px;
  white-space: nowrap;
}
.cat-badge.cat-override::after {
  content: '✱';
  margin-left: .25rem;
  opacity: .7;
}
.cat-badge-none {
  --cat-bg: var(--white);
  --cat-bd: var(--border);
  --cat-fg: var(--muted);
  font-style: italic;
}
.cat-badge-button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

/* ── inline category picker (popover) ────────────────────────────────── */
.txn-cat-cell { position: relative; }
.cat-picker {
  position: absolute;
  top: 100%; left: 0;
  z-index: 50;
  margin-top: .25rem;
  min-width: 180px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: .25rem;
  display: flex;
  flex-direction: column;
}
.cat-picker-option {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem .625rem;
  font-size: .875rem;
  font-family: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink);
}
.cat-picker-option:hover { background: var(--green-50); }

/* ── transaction grid layout (now includes category column + expand) ─── */
.txn-grid {
  display: grid;
  grid-template-columns: 24px 100px 1fr 130px 200px 110px;
  gap: .75rem;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .9375rem;
}
.txn-grid:last-child { border-bottom: 0; }
.txn-grid > .txn-detail {
  grid-column: 2 / -1;
  padding: .5rem .75rem;
  margin-top: .375rem;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  color: var(--ink-2);
}
.txn-detail-label { color: var(--muted); margin-bottom: .125rem; }
.txn-expand {
  background: none;
  border: 0;
  font-size: .75rem;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.txn-expand:hover { color: var(--green-800); }

/* ── /categories page ────────────────────────────────────────────────── */
.cat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.cat-row {
  display: grid;
  grid-template-columns: 24px 1fr 100px 120px;
  gap: .75rem;
  align-items: center;
  padding: .875rem .25rem;
  border-bottom: 1px solid var(--border);
  font-size: .9375rem;
}
.cat-row:last-child { border-bottom: 0; }
.cat-name {
  cursor: text;
  color: var(--ink);
  font-weight: 600;
  outline: none;
  border-radius: 4px;
  padding: .125rem .25rem;
}
.cat-name:hover { background: var(--green-50); }
.cat-name:focus { box-shadow: 0 0 0 2px rgba(22, 101, 52, .2); }
.cat-edit {
  width: 100%;
  padding: .375rem .5rem;
  font-size: .9375rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--green-700);
  border-radius: var(--radius-sm);
  outline: none;
}
.cat-count { color: var(--muted); font-size: .8125rem; }
.cat-total {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green-900);
}
.cat-empty {
  /* Spans both the count and total columns so a brand-new category row
     reads as a single "No transactions yet" line, not split awkwardly. */
  grid-column: 3 / 5;
  text-align: right;
  color: var(--muted);
  font-size: .8125rem;
  font-style: italic;
}

/* ── dashboard spending chart ────────────────────────────────────────── */
.spending-list { display: flex; flex-direction: column; gap: .625rem; }
.spending-row {
  display: grid;
  grid-template-columns: 140px 1fr 100px;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
}
.spending-name {
  display: flex;
  align-items: center;
  color: var(--ink);
  font-weight: 600;
}
.spending-bar {
  display: block;
  height: 12px;
  background: var(--green-50);
  border-radius: 9999px;
  overflow: hidden;
}
.spending-fill {
  display: block;
  height: 100%;
  border-radius: 9999px;
  transition: width .3s ease;
}
.spending-amount {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ── /budgets list ────────────────────────────────────────────────────── */
.budget-list { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; }
.budget-row {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.budget-row:last-child { border-bottom: 0; padding-bottom: 0; }
.budget-row-top, .budget-row-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.budget-name { font-weight: 600; color: var(--ink); }
.budget-spend {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}
.budget-bar {
  display: block;
  height: 10px;
  background: var(--green-50);
  border-radius: 9999px;
  overflow: hidden;
}
.budget-fill {
  display: block;
  height: 100%;
  border-radius: 9999px;
  transition: width .3s ease;
}
.budget-status-ok      { background: var(--green-500); }
.budget-status-warning { background: #F6AD55; } /* amber */
.budget-status-over    { background: var(--danger); }
.budget-status-none    { background: var(--border); }
.budget-pct {
  font-size: .8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.budget-no-limit { font-style: italic; }
.budget-limit-input {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .8125rem;
  color: var(--muted);
}
.budget-limit-field {
  width: 90px;
  padding: .25rem .5rem;
  font-family: inherit;
  font-size: .875rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.budget-save { padding: .25rem .625rem; font-size: .75rem; }
.budget-drill {
  font-size: .8125rem;
  color: var(--green-800);
  font-weight: 500;
  white-space: nowrap;
}

/* ── /alerts list ─────────────────────────────────────────────────────── */
.alert-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.alert-row {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.alert-row:last-child { border-bottom: 0; padding-bottom: 0; }
.alert-row-top, .alert-row-bot {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.alert-name { font-weight: 600; color: var(--ink); }
.alert-balance {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-left: auto;
}
.alert-tag {
  display: inline-block;
  padding: .125rem .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #9B2C2C;
  background: #FED7D7;
  border: 1px solid #FEB2B2;
  border-radius: 9999px;
}
.alert-thr-field {
  width: 90px;
  padding: .25rem .5rem;
  font-family: inherit;
  font-size: .875rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.alert-toggle {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: var(--muted);
}

/* ── dashboard top-of-page alerts panel ───────────────────────────────── */
.alerts-panel {
  background: #FFFBEB;
  border: 1px solid #FBD38D;
}
.alerts-panel .panel-title { color: #9C4221; }
.alerts-panel ul { list-style: none; }
.alerts-panel li { padding: .375rem 0; font-size: .9375rem; color: var(--ink); }
.alert-item.alert-over { color: #9B2C2C; }
.alert-icon { margin-right: .25rem; }
.alert-link { margin-left: .375rem; font-size: .8125rem; }

/* ── /subscriptions ───────────────────────────────────────────────────── */
.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: 1rem;
}
.sub-totals {
  display: flex;
  gap: 2rem;
  padding: 1.25rem 1.75rem;
}
.sub-total-cell { flex: 1; }
.sub-total-label {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.sub-total-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--green-900);
  font-variant-numeric: tabular-nums;
  margin-top: .25rem;
}

.sub-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.sub-row {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .375rem;
}
.sub-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sub-row-top, .sub-row-mid {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.sub-name { font-weight: 600; color: var(--ink); }
.sub-cadence {
  font-size: .75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sub-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.sub-monthly { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sub-next { font-size: .8125rem; color: var(--muted); }
.sub-conf {
  font-size: .6875rem;
  color: var(--muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.sub-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.sub-action { padding: .25rem .625rem; font-size: .75rem; }

.price-tag {
  display: inline-block;
  margin-left: .5rem;
  padding: .0625rem .375rem;
  font-size: .6875rem;
  font-weight: 700;
  color: #9C4221;
  background: #FEEBC8;
  border: 1px solid #FBD38D;
  border-radius: 9999px;
}

.dupe-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.dupe-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: #FFFBEB;
  border: 1px solid #FBD38D;
  border-radius: var(--radius-sm);
}
.dupe-side {
  display: flex; flex-direction: column; gap: .125rem;
}
.dupe-vs {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.dupe-reason {
  grid-column: 1 / -1;
  font-size: .8125rem;
  color: #9C4221;
}

.ended-toggle {
  font-weight: 700;
  color: var(--green-900);
  letter-spacing: .01em;
}

/* ── Net Worth headline / chart ───────────────────────────────────────── */
.net-headline {
  padding: 1.5rem 1.75rem;
}
.net-headline-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.net-sub-row {
  margin-top: .25rem;
  font-size: .8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.net-sub-row .net-positive { color: var(--green-800); font-weight: 600; }
.net-sub-row .net-negative { color: var(--danger);    font-weight: 600; }
.net-sub-label { color: var(--muted); }
.net-sub {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.net-split {
  display: flex;
  gap: 2rem;
}
.net-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-end;
}

.nw-chart-mini {
  margin-top: .75rem;
  height: 80px;
}
.line-svg-mini { width: 100%; height: 80px; display: block; }

.nw-chart {
  position: relative;
  min-height: 220px;
}
.line-svg { width: 100%; height: 220px; display: block; }
.line-svg circle { fill: var(--green-800); cursor: crosshair; }
.line-svg circle:hover { fill: var(--green-900); r: 5; }
.chart-meta {
  display: flex;
  gap: 1rem;
  font-size: .75rem;
  color: var(--muted);
  margin-top: .375rem;
  font-variant-numeric: tabular-nums;
}
.chart-tip {
  position: absolute;
  background: var(--ink);
  color: var(--white);
  font-size: .75rem;
  padding: .25rem .5rem;
  border-radius: 4px;
  pointer-events: none;
  z-index: 5;
}

/* ── /net-worth account table ────────────────────────────────────────── */
.acct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
.acct-table th, .acct-table td {
  text-align: left;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--border);
}
.acct-table th { font-size: .75rem; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; font-weight: 700; }
.acct-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.acct-table td.mask { font-variant-numeric: tabular-nums; color: var(--muted); }
.class-badge {
  display: inline-block;
  padding: .125rem .5rem;
  font-size: .6875rem;
  font-weight: 700;
  border-radius: 9999px;
  letter-spacing: .04em;
}
.class-badge.class-asset    { color: var(--green-800); background: var(--green-50); border: 1px solid var(--green-100); }
.class-badge.class-liability { color: #9B2C2C; background: #FED7D7; border: 1px solid #FEB2B2; }
.class-badge.class-excluded { color: var(--muted); background: var(--white); border: 1px solid var(--border); }
.class-override {
  font-size: .625rem;
  color: var(--muted);
  font-style: italic;
  margin-left: .25rem;
}
.class-select {
  padding: .25rem .375rem;
  font-size: .8125rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
}

/* ── /insights month-over-month ──────────────────────────────────────── */
.mom-legend {
  display: flex;
  gap: 1.5rem;
  font-size: .8125rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.mom-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: .375rem;
  vertical-align: 1px;
}
.mom-swatch.mom-prev { background: #A0AEC0; }
.mom-swatch.mom-curr { background: var(--green-700); }
.mom-rows { display: flex; flex-direction: column; gap: .75rem; }
.mom-row {
  display: grid;
  grid-template-columns: 140px 1fr 160px;
  align-items: center;
  gap: 1rem;
}
.mom-name { font-weight: 600; color: var(--ink); font-size: .9375rem; }
.mom-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mom-bar { height: 10px; border-radius: 9999px; }
.mom-bar.mom-prev { background: #A0AEC0; }
.mom-bar.mom-curr { background: var(--green-700); }
.mom-vals {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.delta-list { list-style: none; display: flex; flex-direction: column; gap: .375rem; margin-top: 1rem; }
.delta { font-size: .875rem; padding: .375rem .5rem; border-radius: var(--radius-sm); }
.delta-more { background: #FED7D7; color: #9B2C2C; }
.delta-less { background: var(--green-50); color: var(--green-900); }

/* ── /insights savings rate ──────────────────────────────────────────── */
.savings-headline {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.savings-current {
  font-size: 2.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: .25rem;
}
.savings-current.sr-on   { color: var(--green-800); }
.savings-current.sr-near { color: #B7791F; }
.savings-current.sr-off  { color: var(--danger); }
.savings-current.sr-na   { color: var(--muted); }

.savings-target-block { display: flex; flex-direction: column; gap: .25rem; }
.savings-target-input { display: flex; gap: .5rem; align-items: center; }
.savings-target-input input {
  width: 80px;
  padding: .375rem .5rem;
  font-family: inherit;
  font-size: .9375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.savings-status { font-size: .8125rem; color: var(--muted); }

.sr-chart { position: relative; min-height: 180px; }

/* ── Findings ────────────────────────────────────────────────────────── */
.findings-panel { padding: 1rem 1.25rem; }
.findings-new-badge {
  display: inline-block;
  margin-left: .375rem;
  padding: .0625rem .375rem;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--white);
  background: var(--green-700);
  border-radius: 9999px;
  vertical-align: 2px;
}

.f-section + .f-section { margin-top: 1.5rem; }
.f-section-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: .5rem;
}
.f-section-critical .f-section-title { color: #9B2C2C; }
.f-section-important .f-section-title { color: #9C4221; }
.f-section-tip       .f-section-title { color: var(--muted); }
.f-section-positive  .f-section-title { color: var(--green-800); }

.f-card {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: .75rem;
  align-items: start;
  padding: .75rem 1rem .75rem 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: .5rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.f-card:hover {
  background: var(--green-50);
  border-color: var(--green-700);
}
.f-card-dismissed { opacity: .55; }

.f-stripe { width: 4px; height: 100%; border-radius: 4px 0 0 4px; }
.f-tier-critical  .f-stripe { background: #C53030; }
.f-tier-important .f-stripe { background: #DD6B20; }
.f-tier-tip       .f-stripe { background: #A0AEC0; }
.f-tier-positive  .f-stripe { background: var(--green-700); }

.f-body { min-width: 0; padding: .25rem 0; }
.f-title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .125rem;
}
.f-text { font-size: .875rem; color: var(--ink-2); }
.f-meta {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .25rem;
}
.f-dismiss {
  background: none;
  border: 0;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  padding: 0 .375rem;
  line-height: 1;
  font-family: inherit;
  align-self: start;
}
.f-dismiss:hover { color: var(--danger); }
.f-dismissed-tag {
  font-size: .6875rem;
  color: var(--muted);
  font-style: italic;
  align-self: start;
  padding: .25rem .375rem;
}

/* ── Email-verification banner on /dashboard ─────────────────────────── */
.banner-verify {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  background: #FFFBEB;
  border: 1px solid #FBD38D;
  border-radius: var(--radius-sm);
  color: #9C4221;
  font-size: .9375rem;
}
.banner-verify .btn-ghost {
  border-color: #FBD38D;
  color: #9C4221;
}
.banner-verify-msg {
  font-size: .8125rem;
  font-style: italic;
  color: #9C4221;
}