/* Personal Finance — base styles
 * Phase 0.1: dark theme tokens, reset, basic shell layout only.
 * Component styles arrive in later phases (review queue, dashboard, etc).
 *
 * Visual direction (DECISIONS-13): dark, sleek, Revolut-inspired — original.
 * Mobile-first (DECISIONS-13): layouts designed for iPhone first, scaled up.
 */

:root {
  /* Surface */
  --color-bg: #0a0a0c;
  --color-bg-elevated: #131318;
  --color-bg-card: #1a1a21;
  --color-border: #26262e;
  --color-border-strong: #353540;

  /* Text */
  --color-fg: #f4f4f6;
  --color-fg-muted: #9a9aa6;
  --color-fg-faint: #65656f;

  /* Accent + status */
  --color-accent: #7c5cff;
  --color-accent-hover: #8e72ff;
  --color-success: #34d399;
  --color-danger: #f87171;
  --color-warning: #fbbf24;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--color-bg);
  color: var(--color-fg);
  color-scheme: dark;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
}

code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  background: var(--color-bg-card);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-fg-muted);
}

/* Shell layout */
.shell {
  max-width: 720px;
  margin: 0 auto;
}

.shell__header {
  margin-bottom: var(--space-6);
}

.shell__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.shell__subtitle {
  color: var(--color-fg-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--space-1);
}

.shell__body {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.shell__hint {
  color: var(--color-fg);
}

.shell__hint + .shell__hint {
  margin-top: var(--space-3);
}

.shell__hint--muted {
  color: var(--color-fg-muted);
  font-size: var(--font-size-sm);
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}
.muted { color: var(--color-fg-muted); font-size: var(--font-size-sm); }

/* ---------- Buttons ---------- */
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.btn {
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn--primary {
  background: var(--color-accent);
  color: white;
}
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--ghost {
  background: transparent;
  color: var(--color-fg-muted);
  border-color: var(--color-border);
}
.btn--ghost:hover { color: var(--color-fg); border-color: var(--color-border-strong); }

/* ---------- Status banner ---------- */
.status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
}
.status--info    { background: rgba(124, 92, 255, 0.08); border-color: rgba(124, 92, 255, 0.3); color: var(--color-fg); }
.status--success { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.3); color: var(--color-fg); }
.status--warn    { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); color: var(--color-fg); }
.status--fail    { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.3); color: var(--color-fg); }

/* ---------- Source files list ---------- */
.sources { list-style: none; margin-top: var(--space-3); }
.source {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.source:first-child { border-top: none; }
.source__head {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.source__name {
  font-weight: var(--font-weight-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.source__meta { color: var(--color-fg-muted); font-size: var(--font-size-xs); }

/* ---------- Bank badges ---------- */
.badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.badge--hsbc    { background: rgba(220, 38, 38, 0.15); color: #fca5a5; }
.badge--revolut { background: rgba(124, 92, 255, 0.15); color: #c4b5fd; }
.badge--lloyds  { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.badge--amex    { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.badge--ibkr    { background: rgba(234, 179, 8, 0.15); color: #fde047; }
.badge--unknown { background: rgba(154, 154, 166, 0.15); color: var(--color-fg-muted); }

/* ---------- Card head (with right-aligned counter) ---------- */
.card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); gap: var(--space-3); }

/* ---------- Review queue ---------- */
.rqueue__global {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.rgroup {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  overflow: hidden;
}
.rgroup__head {
  background: var(--color-bg-card);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
}
.rgroup__head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rgroup__head-actions .btn { padding: 6px 12px; font-size: var(--font-size-sm); }
.rgroup__txs { padding: 0; }

.rtx { border-bottom: 1px solid var(--color-border); padding: var(--space-4); }
.rtx:last-child { border-bottom: none; }
.rtx:hover { background: rgba(255, 255, 255, 0.015); }

.rtx__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.rtx__primary { flex: 1; min-width: 0; }
.rtx__merchant {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  word-break: break-word;
}
.rtx__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-fg-muted);
}
.rtx__date { font-family: var(--font-family-mono); }
.rtx__sep  { opacity: 0.5; }
.rtx__type { text-transform: capitalize; }
.rtx__cat  { color: #c4b5fd; }

.rtx__amounts { text-align: right; flex-shrink: 0; }
.rtx__amount {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  white-space: nowrap;
}
.rtx__amount.in  { color: var(--color-success); }
.rtx__amount.out { color: var(--color-fg); }
.rtx__balance {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-fg-faint);
  margin-top: 2px;
}

.rtx__details {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
}
.rtx__details summary {
  cursor: pointer;
  color: var(--color-fg-muted);
  user-select: none;
  padding: 4px 0;
  list-style: none;
}
.rtx__details summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform var(--transition-fast);
}
.rtx__details[open] summary::before { transform: rotate(90deg); }
.rtx__details summary::-webkit-details-marker { display: none; }
.rtx__details summary:hover { color: var(--color-fg); }

.rtx__details-list {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.rtx__details-list dt { color: var(--color-fg-muted); }
.rtx__details-list dd { font-family: var(--font-family-mono); word-break: break-word; }

@media (max-width: 540px) {
  .rtx__details-list { grid-template-columns: 1fr; gap: 2px var(--space-2); }
  .rtx__details-list dt { margin-top: 6px; font-size: 11px; }
  .rtx__details-list dt:first-child { margin-top: 0; }
}

/* ---------- Dashboard ---------- */
.dash__net {
  text-align: center;
  padding: var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.dash__net-label { font-size: var(--font-size-xs); color: var(--color-fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.dash__net-value { font-size: 36px; font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; margin-top: var(--space-1); font-family: var(--font-family-mono); }
.dash__net-sub   { font-size: var(--font-size-xs); color: var(--color-fg-muted); margin-top: var(--space-1); }

.dash__tiles, .dash-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.dash-tiles--3 { grid-template-columns: repeat(3, 1fr); }
.dash-tile {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.dash-tile__label { font-size: var(--font-size-xs); color: var(--color-fg-muted); }
.dash-tile__value { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); margin-top: 2px; font-family: var(--font-family-mono); }
.dash-tile__value--in  { color: var(--color-success); }
.dash-tile__value--out { color: var(--color-danger); }
.dash-tile__sub  { font-size: 11px; color: var(--color-fg-faint); margin-top: 2px; }

.dash__month { margin-bottom: var(--space-4); }
.dash__month-head { font-size: var(--font-size-sm); color: var(--color-fg-muted); margin-bottom: var(--space-2); }

.dash__period { margin-bottom: var(--space-4); }
.dash__period-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.dash__period-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); flex: 1; min-width: 140px; }
.dash__period-btn { padding: 6px 12px !important; font-size: var(--font-size-sm); }
.dash__period-btn--alt { font-size: var(--font-size-xs); }
.dash__period-meta { font-size: var(--font-size-xs); color: var(--color-fg-muted); margin-bottom: var(--space-3); }

.dash__cats { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.dash__cats-head { font-size: var(--font-size-sm); color: var(--color-fg-muted); margin-bottom: var(--space-2); }
.dash__cat-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--font-size-sm); }
.dash__cat-amt { font-family: var(--font-family-mono); color: var(--color-fg-muted); }

@media (max-width: 540px) {
  .dash__tiles { grid-template-columns: repeat(2, 1fr); }
  .dash-tiles--3 { grid-template-columns: 1fr; }
  .dash__net-value { font-size: 30px; }
}

/* ---------- Financial statements ---------- */
.fin { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 900px) { .fin { grid-template-columns: 1fr; } }
.fin-stmt { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); }
.fin-stmt:last-child { grid-column: 1 / -1; }
.fin-stmt__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.fin-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.fin-table tr td { padding: 6px 4px; }
.fin-table .num { text-align: right; font-family: var(--font-family-mono); white-space: nowrap; }
.fin-table .fin-section td { padding-top: var(--space-3); color: var(--color-fg-muted); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--font-weight-medium); border-top: 1px solid var(--color-border); }
.fin-table .fin-section:first-child td { padding-top: 0; border-top: none; }
.fin-table .fin-total td { border-top: 1px solid var(--color-border); font-weight: var(--font-weight-medium); padding-top: 8px; }
.fin-table .fin-grand td { border-top: 2px solid var(--color-fg); font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.fin-table .fin-grand--pos .num { color: var(--color-success); }
.fin-table .fin-grand--neg .num { color: var(--color-danger); }
.fin-note { margin-top: var(--space-3); font-size: var(--font-size-xs); }

/* ---------- Diagnostics ---------- */
.diag__h { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); margin-top: var(--space-4); margin-bottom: var(--space-2); }
.diag-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.diag-table th, .diag-table td { padding: 8px 10px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.diag-table th { color: var(--color-fg-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-align: left; }
.diag-table .num { text-align: right; font-family: var(--font-family-mono); white-space: nowrap; }
.diag__top { font-size: var(--font-size-xs); }
.diag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.diag-kind { font-size: 10px; padding: 2px 6px; border-radius: 4px; text-transform: capitalize; }
.diag-kind--income   { background: rgba(34,197,94,.15);   color: var(--color-success); }
.diag-kind--expense  { background: rgba(248,113,113,.15); color: var(--color-danger); }
.diag-kind--transfer { background: rgba(154,154,166,.15); color: var(--color-fg-muted); }
.diag__flags { list-style: none; padding: 0; }
.diag__flags li { padding: 8px 10px; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }

.diag__inout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-3); }
@media (max-width: 720px) { .diag__inout { grid-template-columns: 1fr; } }
.diag__inout-col { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); }
.diag__inout-list { list-style: none; padding: 0; margin: 0; max-height: 360px; overflow: auto; }
.diag__inout-list li { display: flex; justify-content: space-between; padding: 6px 4px; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); gap: var(--space-3); }
.diag__inout-list li:last-child { border-bottom: none; }
.diag__inout-list .num { font-family: var(--font-family-mono); white-space: nowrap; }

/* ---------- Trend charts ---------- */
.trend-block { margin-bottom: var(--space-5); }
.trend-block:last-child { margin-bottom: 0; }
.trend-block__head { font-size: var(--font-size-sm); color: var(--color-fg-muted); margin-bottom: var(--space-2); }
.chart-svg { width: 100%; height: auto; max-height: 260px; display: block; }

.chart-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-fg-muted);
}
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }

/* ---------- Recurring expenses ---------- */
.recurring-summary { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-3); background: var(--color-bg-card); border-radius: var(--radius-md); margin-bottom: var(--space-3); border: 1px solid var(--color-border); }
.recurring-summary strong { font-family: var(--font-family-mono); }
.recurring-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.recurring-table th, .recurring-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.recurring-table th { color: var(--color-fg-muted); font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); }
.recurring-table td.num { text-align: right; font-family: var(--font-family-mono); white-space: nowrap; }
.recurring-table td:nth-child(2) { text-transform: capitalize; }   /* Cadence: "monthly" -> "Monthly" */
.recurring-table .muted { color: var(--color-fg-muted); }

/* ---------- Duplicate badge in review queue ---------- */
.rtx__dupe-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(251, 191, 36, 0.15);
  color: var(--color-warning);
  margin-left: 6px;
  vertical-align: middle;
}

/* ---------- Manual entry ---------- */
.me__head .actions { margin-top: var(--space-3); }
.me-form {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-4);
}
.me-form__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}
.me-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.me-form__grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-fg-muted);
}
.me-form__grid label.span-2 { grid-column: 1 / -1; }
.me-form__grid input,
.me-form__grid select {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--color-fg);
  font-family: inherit;
  font-size: var(--font-size-base);
}
.me-form__grid input:focus,
.me-form__grid select:focus { outline: 1px solid var(--color-accent); outline-offset: -1px; }
.me-form__actions { display: flex; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }

@media (max-width: 540px) {
  .me-form__grid { grid-template-columns: 1fr; }
  .me-form__grid label.span-2 { grid-column: 1; }
}

.rtx__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.rtx__btn {
  font-family: inherit;
  font-size: var(--font-size-sm);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-fg);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.rtx__btn:hover { border-color: var(--color-border-strong); }
.rtx__btn--approve { color: var(--color-success); border-color: rgba(52, 211, 153, 0.3); }
.rtx__btn--approve:hover { background: rgba(52, 211, 153, 0.08); }
.rtx__btn--reject  { color: var(--color-danger);  border-color: rgba(248, 113, 113, 0.3); }
.rtx__btn--reject:hover  { background: rgba(248, 113, 113, 0.08); }

/* Confidence highlighting */
.conf-low {
  background: rgba(251, 191, 36, 0.08);
  border-radius: var(--radius-sm);
  padding: 1px 4px;
  margin: -1px -4px;
}

/* Inline edit form */
.rtx__edit {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-2);
}
.rtx__edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.rtx__edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-fg-muted);
}
.rtx__edit-grid label.span-2 { grid-column: 1 / -1; }
.rtx__edit-grid input,
.rtx__edit-grid select {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--color-fg);
  font-family: inherit;
  font-size: var(--font-size-base);
}
.rtx__edit-grid input:focus,
.rtx__edit-grid select:focus { outline: 1px solid var(--color-accent); outline-offset: -1px; }
.rtx__edit-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.rtx__edit-actions .btn { padding: 8px 16px; }

@media (max-width: 540px) {
  .rtx__edit-grid { grid-template-columns: 1fr; }
  .rtx__edit-grid label.span-2 { grid-column: 1; }
}

/* ---------- Import hero card ---------------------------------------------- */
.card--import {
  background:
    radial-gradient(ellipse at top left, rgba(124, 92, 255, 0.12), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(212, 175, 55, 0.06), transparent 60%),
    var(--color-bg-card);
  border: 1px solid rgba(212, 175, 55, 0.18);
}
.import-hero {
  text-align: center;
  padding: var(--space-5) var(--space-3);
}
.import-hero__eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--space-2);
}
.import-hero__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
}
.import-hero__sub {
  color: var(--color-fg-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}
.import-hero__cta {
  font-size: var(--font-size-base);
  padding: 12px 28px;
  font-weight: var(--font-weight-medium);
  box-shadow: 0 4px 18px rgba(124, 92, 255, 0.28);
}
.import-hero__hint {
  font-size: 11px;
  margin-top: var(--space-3);
}
.import-hero__advanced {
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}
.import-hero__advanced summary {
  cursor: pointer;
  font-size: var(--font-size-sm);
  user-select: none;
  list-style: none;
}
.import-hero__advanced summary::-webkit-details-marker { display: none; }
.import-hero__advanced summary::before {
  content: "▸ ";
  color: var(--color-fg-faint);
}
.import-hero__advanced[open] summary::before { content: "▾ "; }
.import-hero__advanced > * + * { margin-top: var(--space-3); }

/* Drag-and-drop affordance */
.import-hero--dropzone {
  border: 2px dashed transparent;
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.import-hero--dropzone.is-dragover {
  border-color: var(--color-accent);
  background: rgba(124, 92, 255, 0.08);
}
.import-hero--dropzone.is-dragover::before {
  content: "Drop to import";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  color: var(--color-accent);
  background: rgba(124, 92, 255, 0.10);
  border-radius: var(--radius-md);
  pointer-events: none;
}

/* PWA install prompt chip */
.install-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 10px 14px;
  background: rgba(124, 92, 255, 0.10);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}
.install-prompt span:first-child { flex: 1; }
.install-prompt .btn { padding: 6px 14px; }

/* ---------- Data tabs (Add manually / Backup & restore / Advanced) -------- */
.data-tabs {
  display: flex;
  gap: 2px;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  flex-wrap: wrap;
}
.data-tabs__btn {
  font-family: inherit;
  font-size: var(--font-size-sm);
  background: transparent;
  color: var(--color-fg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.data-tabs__btn:hover { color: var(--color-fg); border-color: var(--color-border-strong); }
.data-tabs__btn.is-active {
  color: var(--color-fg);
  border-color: var(--color-accent);
  background: rgba(124, 92, 255, 0.10);
}
.data-tabs__panel {
  margin-top: var(--space-4);
}

/* ---------- Active period button ----------------------------------------- */
.dash__period-btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-fg);
  background: rgba(124, 92, 255, 0.12);
}

/* ---------- Diagnostics inline edit ---------------------------------------- */
.diag-table--edit td {
  vertical-align: middle;
}
.diag-recat {
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
  min-width: 180px;
}
.diag-recat:hover { border-color: var(--color-border-strong); }
.diag-recat:focus { outline: 1px solid var(--color-accent); outline-offset: -1px; }
.diag-recat:disabled { cursor: progress; }
/* Force the dropdown's option list to use the dark theme (otherwise the
 * browser draws the popup with default light styling, hence the "white box"
 * the user reported). color-scheme tells the OS to render in dark; explicit
 * background/color on <option> covers Chromium reliably. */
.diag-recat,
.diag-recat option { color-scheme: dark; }
.diag-recat option {
  background: var(--color-bg-card);
  color: var(--color-fg);
  padding: 4px 8px;
}
.diag-recat option:checked,
.diag-recat option:hover {
  background: rgba(124, 92, 255, 0.18);
  color: var(--color-fg);
}

/* Compact merchant rows inside the per-category breakdown */
.diag__top { padding: 8px 12px; }
.diag__top-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin: 2px 0;
  padding: 3px 0;
}
.diag__top-row + .diag__top-row { border-top: 1px solid rgba(255,255,255,0.04); }
.diag__top-name { font-size: var(--font-size-sm); }
.diag__top-amt { font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.diag-recat--mini {
  min-width: 0;
  width: 32px;
  padding: 4px 6px;
  font-size: 11px;
  background: var(--color-bg-card);
}
.diag-recat--mini:hover { width: auto; min-width: 140px; }
.diag-recat--mini:focus { width: auto; min-width: 140px; }

/* ---------- Drill-down (transactions inside a category) ----------------- */
.diag-table--drill .diag-cat-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}
.diag-table--drill .diag-cat-row:hover {
  background: rgba(124, 92, 255, 0.04);
}
.diag-table--drill .diag-cat-row.is-expanded {
  background: rgba(124, 92, 255, 0.06);
}
.diag__chev {
  width: 24px;
  text-align: center;
  color: var(--color-fg-faint);
}
.diag__chev-icon {
  display: inline-block;
  font-size: 11px;
  transition: transform var(--transition-fast);
}
.diag-cat-detail > td {
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.18);
}
.diag-detail {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.diag-detail__hint {
  margin-bottom: var(--space-3);
  font-size: 12px;
}
.diag-detail__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.diag-detail__table thead th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  font-weight: var(--font-weight-medium);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.diag-detail__table thead th.num,
.diag-detail__table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.diag-detail__table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.diag-detail__table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

/* ---------- Recurring / Subscriptions subheaders ------------------------- */
.recurring-subhead {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: var(--space-5) 0 var(--space-3);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.recurring-subhead:first-of-type { margin-top: 0; }
.recurring-subhead .muted { font-size: 11px; text-transform: none; letter-spacing: normal; }

/* ---------- Transaction detail modal ------------------------------------- */
.tx-modal-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh var(--space-4);
  overflow-y: auto;
  animation: tx-modal-fade 140ms ease;
}
/* CRITICAL: explicit display:none when [hidden]. Without this, our
 * `display: flex` rule above silently overrides the UA-default
 * `[hidden] { display: none }`, so the blurred backdrop stayed painted
 * across the whole page even after the modal was "closed". */
.tx-modal-root[hidden] {
  display: none !important;
}
@keyframes tx-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tx-modal {
  width: 100%;
  max-width: 640px;
  background:
    radial-gradient(ellipse at top right, rgba(124, 92, 255, 0.10), transparent 55%),
    var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  padding: var(--space-5);
  animation: tx-modal-rise 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes tx-modal-rise {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.tx-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.tx-modal__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}
.tx-modal__sub { font-size: 12px; margin-top: 4px; }
.tx-modal__amount {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tx-modal__amount--pos { color: var(--color-success); }
.tx-modal__amount--neg { color: var(--color-fg); }

.tx-modal__form { display: block; }
.tx-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.tx-modal__grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-fg-muted);
  font-weight: var(--font-weight-medium);
}
.tx-modal__grid label.span-2 { grid-column: span 2; }
.tx-modal__grid input,
.tx-modal__grid select {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--color-fg);
  font-family: inherit;
  font-size: var(--font-size-base);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--font-weight-regular);
}
.tx-modal__grid input:focus,
.tx-modal__grid select:focus { outline: 1px solid var(--color-accent); outline-offset: -1px; }

.tx-modal__meta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.tx-modal__meta summary {
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  list-style: none;
  user-select: none;
}
.tx-modal__meta summary::-webkit-details-marker { display: none; }
.tx-modal__meta summary::before {
  content: "▸ ";
  color: var(--color-fg-faint);
}
.tx-modal__meta[open] summary::before { content: "▾ "; }
.tx-modal__dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--space-3);
  margin-top: var(--space-3);
  font-size: 12px;
}
.tx-modal__dl dt { color: var(--color-fg-muted); font-weight: var(--font-weight-medium); }
.tx-modal__dl dd { color: var(--color-fg); font-variant-numeric: tabular-nums; }
.tx-modal__dl code { font-family: var(--font-family-mono); font-size: 11px; word-break: break-all; }

.tx-modal__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.tx-modal__spacer { flex: 1; }
.tx-modal__actions .btn { padding: 9px 16px; }

@media (max-width: 540px) {
  .tx-modal__grid { grid-template-columns: 1fr; }
  .tx-modal__grid label.span-2 { grid-column: 1; }
}

/* Transaction-detail-clickable rows: subtle hover lift */
[data-tx-id], [data-merchant-key] {
  cursor: pointer;
  transition: background var(--transition-fast);
}
[data-tx-id]:hover, [data-merchant-key]:hover {
  background: rgba(124, 92, 255, 0.06);
}

/* ---------- Transfers tiles ---------------------------------------------- */
.transfers-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.transfers-tile {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.transfers-tile__label {
  font-size: 11px;
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.transfers-tile__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.transfers-tile__value--in { color: var(--color-success); }
.transfers-tile__value--out { color: var(--color-danger); }
@media (max-width: 540px) {
  .transfers-summary { grid-template-columns: 1fr; }
}

/* ---------- Polished card formatting ------------------------------------- */
/* Subtle radial gradients + soft inner highlight so every card looks
 * elevated without being noisy. The accent direction varies by section so
 * the eye gets oriented (top-left tint = "data input", etc.). */
.card {
  position: relative;
  background:
    radial-gradient(ellipse at top right, rgba(124, 92, 255, 0.05), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(212, 175, 55, 0.025), transparent 55%),
    var(--color-bg-elevated);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 8px 32px rgba(0, 0, 0, 0.18);
  transition: border-color var(--transition-base);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 40%);
  mix-blend-mode: overlay;
}
/* Section-specific accent bleeds — keeps cards visually distinct without
 * being garish. Each is layered ON TOP of the base gradient. */
.card--import {
  background:
    radial-gradient(ellipse at top left, rgba(124, 92, 255, 0.16), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(212, 175, 55, 0.10), transparent 60%),
    var(--color-bg-card);
  border-color: rgba(212, 175, 55, 0.22);
}
.card--recurring {
  background:
    radial-gradient(ellipse at top right, rgba(244, 114, 182, 0.06), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(124, 92, 255, 0.05), transparent 55%),
    var(--color-bg-elevated);
}

/* ---------- Tabs badge --------------------------------------------------- */
.data-tabs__badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--color-fg-muted);
  font-weight: normal;
}
.data-tabs__btn.is-active .data-tabs__badge { color: var(--color-accent); }

/* ---------- Chart polish ------------------------------------------------- */
.chart-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.25));
}
.chart-grid line {
  stroke: var(--color-border);
  stroke-dasharray: 2 4;
  opacity: 0.55;
}
.chart-axis-text {
  fill: var(--color-fg-muted);
  font-size: 11px;
  font-family: var(--font-family);
  letter-spacing: 0.02em;
}
.chart-tooltip {
  fill: var(--color-bg-card);
  stroke: var(--color-border-strong);
}
.trend-block {
  margin-bottom: var(--space-5);
}
.trend-block__head {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.chart-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  justify-content: center;
}
.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-legend__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* ---------- Chart hover tooltip ----------------------------------------- */
.chart-tip {
  position: absolute;
  z-index: 1100;
  pointer-events: none;
  background:
    radial-gradient(ellipse at top right, rgba(124, 92, 255, 0.12), transparent 60%),
    var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: var(--font-family);
  font-size: 12px;
  color: var(--color-fg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  min-width: 160px;
  font-variant-numeric: tabular-nums;
}
.chart-tip__head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-muted);
  margin-bottom: 6px;
}
.chart-tip__val {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}
.chart-tip__sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-fg-muted);
}
.chart-tip__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  padding: 2px 0;
}
.chart-tip__row strong { color: var(--color-fg); margin-left: auto; }
.chart-tip__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

/* ---------- Snapshot click-throughs ------------------------------------- */
.dash-tile--clickable {
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  position: relative;
}
.dash-tile--clickable:hover {
  border-color: var(--color-accent);
  background: rgba(124, 92, 255, 0.06);
  transform: translateY(-1px);
}
.dash-tile--clickable::after {
  content: "↗";
  position: absolute;
  top: 8px;
  right: 10px;
  color: var(--color-fg-faint);
  font-size: 11px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.dash-tile--clickable:hover::after { opacity: 1; }

.dash__cat-row--clickable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin: 0 -10px;
  transition: background var(--transition-fast);
}
.dash__cat-row--clickable:hover {
  background: rgba(124, 92, 255, 0.08);
}
.dash__cats-head .muted { font-size: 11px; margin-left: var(--space-2); font-weight: var(--font-weight-regular); }

/* ---------- Scope popup (per-tx reclassify confirm) -------------------- */
.scope-popup {
  position: absolute;
  z-index: 1100;
  background:
    radial-gradient(ellipse at top right, rgba(124, 92, 255, 0.10), transparent 55%),
    var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: 10px;
  min-width: 220px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}
.scope-popup__head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-muted);
  margin-bottom: 8px;
}
.scope-popup__btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  font-family: inherit;
  font-size: var(--font-size-sm);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  margin-bottom: 6px;
}
.scope-popup__btn:last-child { margin-bottom: 0; }
.scope-popup__btn:hover { border-color: var(--color-border-strong); background: rgba(255, 255, 255, 0.03); }
.scope-popup__btn--primary { border-color: var(--color-accent); background: rgba(124, 92, 255, 0.10); }
.scope-popup__btn--primary:hover { background: rgba(124, 92, 255, 0.18); }
.scope-popup__btn strong { font-weight: var(--font-weight-semibold); }

/* ---------- Sticky period nav ------------------------------------------- */
/* Pin the period selector to the top of the viewport so the user can change
 * Q1/Q2/YTD from anywhere on the page. The card pseudo-element is removed for
 * the sticky child so the gradient overlay doesn't clip it. */
.dash__period {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: var(--space-3) calc(-1 * var(--space-5)) 0;
  padding: var(--space-3) var(--space-5);
  background:
    radial-gradient(ellipse at top right, rgba(124, 92, 255, 0.08), transparent 55%),
    rgba(19, 19, 24, 0.92);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- Big-ticket review banner ------------------------------------ */
.big-ticket {
  background:
    radial-gradient(ellipse at top right, rgba(212, 175, 55, 0.10), transparent 55%),
    var(--color-bg-card);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.big-ticket__head { margin-bottom: var(--space-3); }
.big-ticket__title { font-weight: var(--font-weight-semibold); }
.big-ticket__sub { font-size: 12px; margin-top: 2px; }
.big-ticket__list { list-style: none; padding: 0; margin: 0; }
.big-ticket__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}
.big-ticket__row:first-child { border-top: 0; }
.big-ticket__row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.big-ticket__merchant { font-weight: var(--font-weight-medium); }
.big-ticket__row-amount {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.big-ticket__row-amount--pos { color: var(--color-success); }
.big-ticket__row-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.big-ticket__btn {
  font-family: inherit;
  font-size: var(--font-size-sm);
  background: transparent;
  color: var(--color-fg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.big-ticket__btn:hover { border-color: var(--color-accent); background: rgba(124, 92, 255, 0.08); }
.big-ticket__btn--approve { border-color: rgba(52, 211, 153, 0.35); color: var(--color-success); }
.big-ticket__btn--approve:hover { background: rgba(52, 211, 153, 0.10); }
.big-ticket__btn--edit { color: var(--color-fg-muted); }

/* ---------- Checkpoints (snapshot save slots) -------------------------- */
.snaps__create {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}
.snaps__input {
  flex: 1;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--color-fg);
  font-family: inherit;
  font-size: var(--font-size-base);
}
.snaps__input:focus { outline: 1px solid var(--color-accent); outline-offset: -1px; }
.snaps__list-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: var(--space-3) 0 var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.snaps__list-head .muted { font-size: 12px; }
.snaps__empty { padding: var(--space-4) 0; }
.snaps__list { list-style: none; padding: 0; margin: 0; }
.snap {
  background:
    radial-gradient(ellipse at top right, rgba(124, 92, 255, 0.04), transparent 60%),
    var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}
.snap__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 4px;
}
.snap__name {
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.snap__name:hover { color: var(--color-accent); }
.snap__kind {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.snap__kind--manual { background: rgba(124, 92, 255, 0.16); color: #c4b5fd; }
.snap__kind--auto   { background: rgba(154, 154, 166, 0.16); color: var(--color-fg-muted); }
.snap__meta { font-size: 12px; line-height: 1.6; }
.snap__actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.snap__actions .btn { padding: 5px 12px; font-size: var(--font-size-sm); }

/* ---------- Profile switcher (header) ---------------------------------- */
.shell__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shell__brand { min-width: 0; }
.profile-switcher { position: relative; }
.profile-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-fg);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.profile-switcher__btn:hover { border-color: var(--color-accent); }
.profile-switcher__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.profile-switcher__name {
  font-weight: var(--font-weight-medium);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-switcher__chev {
  font-size: 10px;
  color: var(--color-fg-faint);
}
.profile-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 200;
  min-width: 220px;
  background:
    radial-gradient(ellipse at top right, rgba(124, 92, 255, 0.10), transparent 55%),
    var(--color-bg-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  padding: 8px;
}
.profile-switcher__head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-muted);
  padding: 4px 8px 8px;
}
.profile-switcher__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-fg);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.profile-switcher__item:hover { background: rgba(124, 92, 255, 0.10); }
.profile-switcher__item.is-active { background: rgba(124, 92, 255, 0.15); }
.profile-switcher__item--add { color: var(--color-accent); padding-left: 18px; }
.profile-switcher__current { font-size: 11px; margin-left: auto; }
.profile-switcher__divider {
  height: 1px;
  background: var(--color-border);
  margin: 6px 4px;
}

/* ---------- Reconciliation panel --------------------------------------- */
.recon__head { margin-bottom: var(--space-3); }
.recon__status {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  display: inline-block;
}
.recon__status--ok   { background: rgba(52, 211, 153, 0.10); color: var(--color-success); border: 1px solid rgba(52, 211, 153, 0.3); }
.recon__status--warn { background: rgba(251, 191, 36, 0.10); color: var(--color-warning); border: 1px solid rgba(251, 191, 36, 0.3); }
.recon__sub { margin-top: var(--space-2); font-size: 12px; line-height: 1.5; }
.recon__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-top: var(--space-3);
}
.recon__table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-fg-muted);
  font-weight: var(--font-weight-medium);
  border-bottom: 1px solid var(--color-border);
}
.recon__table thead th.num,
.recon__table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.recon__table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
}
.recon__row--drift { background: rgba(251, 191, 36, 0.04); }
.recon__drift { color: var(--color-warning); font-weight: var(--font-weight-medium); }
.recon__ok { color: var(--color-success); }
.recon__note { margin-top: var(--space-3); font-size: 11px; }

/* ---------- Insights / pattern recognition ---------------------------- */
.insights__group { margin-bottom: var(--space-5); }
.insights__group:last-child { margin-bottom: 0; }
.insights__h {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-fg);
  margin-bottom: var(--space-3);
}
.insights__h .muted { font-size: 11px; text-transform: none; letter-spacing: normal; margin-left: var(--space-2); font-weight: var(--font-weight-regular); }
.insights__list { list-style: none; padding: 0; margin: 0; }
.insights__row {
  display: grid;
  grid-template-columns: 12px 1fr 80px 90px 60px;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: var(--font-size-sm);
}
.insights__row:last-child { border-bottom: 0; }
.insights__dot { width: 10px; height: 10px; border-radius: 50%; }
.insights__name { font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insights__bar { background: var(--color-bg-elevated); height: 6px; border-radius: 3px; overflow: hidden; position: relative; }
.insights__bar-fill { display: block; height: 100%; transition: width var(--transition-base); }
.insights__bar-fill--up   { background: linear-gradient(90deg, #fb7185, #9f1239); }
.insights__bar-fill--down { background: linear-gradient(90deg, #34d399, #0f766e); }
.insights__delta { font-variant-numeric: tabular-nums; text-align: right; font-weight: var(--font-weight-medium); }
.insights__delta--up   { color: var(--color-danger); }
.insights__delta--down { color: var(--color-success); }
.insights__pct { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.insights__row--anomaly {
  grid-template-columns: 12px 1fr auto auto;
  background: rgba(251, 191, 36, 0.04);
  padding: 10px 12px;
  margin-bottom: 4px;
  border-radius: var(--radius-sm);
  border-bottom: 0;
}
.insights__row--down  { background: rgba(52, 211, 153, 0.05); }
.insights__msg { font-size: 12px; color: var(--color-warning); }
.insights__row--down .insights__msg { color: var(--color-success); }
.insights__detail { font-size: 11px; }
.insights__big {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.insights__big:hover { border-color: var(--color-accent); }
.insights__big strong { display: block; }
.insights__big .muted { font-size: 12px; }
.insights__big-amount {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg);
  white-space: nowrap;
}
.insights__traj {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}
.insights__traj-cell {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.insights__traj-cell--pos { border-color: rgba(52, 211, 153, 0.30); }
.insights__traj-cell--neg { border-color: rgba(248, 113, 113, 0.30); }
.insights__traj-month { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.insights__traj-rate { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin: 4px 0; font-variant-numeric: tabular-nums; }
.insights__traj-cell--pos .insights__traj-rate { color: var(--color-success); }
.insights__traj-cell--neg .insights__traj-rate { color: var(--color-danger); }
.insights__traj-detail { font-size: 11px; }

@media (max-width: 540px) {
  .insights__row { grid-template-columns: 10px 1fr 70px 60px; }
  .insights__pct { display: none; }
}

/* ---------- Mobile pass --------------------------------------------------- */
@media (max-width: 720px) {
  /* Tighter card padding */
  .card { padding: var(--space-4); }
  /* Header wraps cleanly + profile switcher takes its own row when narrow */
  .shell__header { flex-direction: column; align-items: stretch; }
  .profile-switcher { align-self: flex-end; }
  /* Snapshot tiles to single column on narrow phones */
  .dash__tiles { grid-template-columns: repeat(2, 1fr); }
  .dash-tiles--3 { grid-template-columns: 1fr; }
  /* Period nav wraps to multiple rows on small screens */
  .dash__period-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .dash__period-btn { padding: 6px 10px; font-size: 12px; }
  /* Sticky period nav: tighter on mobile so it doesn't eat too much screen */
  .dash__period {
    margin: var(--space-2) calc(-1 * var(--space-4)) 0;
    padding: var(--space-2) var(--space-4);
  }
  /* Diagnostics & transfers tables: hide the % column on narrow screens */
  .diag-table th:nth-child(5), .diag-table td:nth-child(5) { display: none; }
  /* Drill-down tables: hide the dropdown column on narrow */
  .diag-detail__table th:last-child, .diag-detail__table td:last-child { font-size: 11px; }
  /* Tx-modal grid collapses to 1 col */
  .tx-modal { padding: var(--space-4); }
  .tx-modal__head { flex-direction: column; gap: var(--space-2); }
  /* Big-ticket actions stack */
  .big-ticket__row-actions { gap: 4px; }
  .big-ticket__btn { padding: 4px 10px; font-size: 11px; }
  /* Trajectory cells smaller */
  .insights__traj-cell { padding: 10px; }
  .insights__traj-rate { font-size: var(--font-size-lg); }
  /* Recurring/diagnostics scroll horizontally rather than wrap weird */
  .recurring-table { font-size: 12px; }
  .diag-table--edit .diag__top-row { grid-template-columns: 1fr auto auto; gap: 4px; }
  .diag__top-name { font-size: 12px; }
  /* Backup buttons stack vertically */
  .actions { flex-direction: column; align-items: stretch; }
  /* Profile switcher menu pinned to right edge */
  .profile-switcher__menu { right: 0; left: auto; min-width: 240px; }
}

/* ---------- Iphone-safe-area + viewport-fit ----------------------------- */
@supports (padding: max(0px)) {
  body { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
  .shell { padding-left: max(env(safe-area-inset-left), 0px); padding-right: max(env(safe-area-inset-right), 0px); }
}

/* ---------- Empty states ----------------------------------------------- */
.dash-empty {
  text-align: center;
  padding: var(--space-6) var(--space-3);
}
.dash-empty__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-3);
}
.dash-empty__hint { font-size: 12px; margin-top: var(--space-2); }

/* ---------- Global search --------------------------------------------- */
.search__form {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1.2fr auto auto;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.search__input {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--color-fg);
  font-family: inherit;
  font-size: var(--font-size-sm);
}
.search__input:focus { outline: 1px solid var(--color-accent); outline-offset: -1px; }
.search__form .btn { padding: 7px 12px; font-size: var(--font-size-sm); }
.search__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 4px;
  margin-bottom: var(--space-2);
}
.search__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.search__table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-fg-muted);
  border-bottom: 1px solid var(--color-border);
}
.search__table thead th.num,
.search__table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.search__table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.search__amt--pos { color: var(--color-success); }
.search__pending {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(251, 191, 36, 0.10);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
}
.search__truncated { padding: 12px 10px !important; text-align: center; font-size: 12px; }
.search__empty { padding: var(--space-4) 0; }
@media (max-width: 720px) {
  .search__form { grid-template-columns: 1fr 1fr; }
  .search__form .search__input { font-size: var(--font-size-base); }
  .search__form .btn { grid-column: span 1; }
}
.search__bulk {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 10px;
  margin-bottom: var(--space-3);
  background: rgba(124, 92, 255, 0.05);
  border: 1px dashed rgba(124, 92, 255, 0.30);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
}
.search__bulk select { flex: 0 0 200px; }
.search__bulk .btn { padding: 6px 14px; }

/* ---------- Budgets card --------------------------------------------- */
.budgets__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.budgets__period { font-size: 12px; }
.budgets__list { list-style: none; padding: 0; margin: 0; }
.budgets__row {
  display: grid;
  grid-template-columns: 12px 1fr 1.5fr auto auto;
  gap: var(--space-3);
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: var(--font-size-sm);
}
.budgets__row:last-child { border-bottom: 0; }
.budgets__dot { width: 10px; height: 10px; border-radius: 50%; }
.budgets__name { font-weight: var(--font-weight-medium); }
.budgets__bar { background: var(--color-bg-elevated); height: 8px; border-radius: 4px; overflow: hidden; position: relative; }
.budgets__bar-fill { display: block; height: 100%; transition: width var(--transition-base); }
.budgets__bar-fill--ok    { background: linear-gradient(90deg, #34d399, #0f766e); }
.budgets__bar-fill--warn  { background: linear-gradient(90deg, #fbbf24, #b45309); }
.budgets__bar-fill--over  { background: linear-gradient(90deg, #fb7185, #9f1239); }
.budgets__bar-fill--unset { background: var(--color-border); width: 0 !important; }
.budgets__actual {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
}
.budgets__limit {
  font-variant-numeric: tabular-nums;
  color: var(--color-fg-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  white-space: nowrap;
}
.budgets__limit:hover { background: rgba(124, 92, 255, 0.10); color: var(--color-fg); }
.budgets__limit:focus { outline: 1px solid var(--color-accent); outline-offset: -1px; }
@media (max-width: 720px) {
  .budgets__row { grid-template-columns: 10px 1fr auto; }
  .budgets__bar { display: none; }
}

/* ====================================================================== */
/* PHASE A POLISH — typography, motion, skeleton, bottom-sheet, touch     */
/* ====================================================================== */

/* ---------- Skeleton loaders ----------------------------------------- */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-bg-elevated) 0%,
    rgba(124, 92, 255, 0.06) 50%,
    var(--color-bg-elevated) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: inline-block;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton--text { height: 1em; width: 80%; }
.skeleton--num  { height: 1em; width: 60px; }
.skeleton--block { display: block; height: 60px; width: 100%; margin-bottom: var(--space-2); }

/* ---------- Smoother card entrance ------------------------------------ */
.card {
  animation: card-rise 320ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 30ms; }
.card:nth-child(3) { animation-delay: 60ms; }
.card:nth-child(4) { animation-delay: 90ms; }
.card:nth-child(5) { animation-delay: 110ms; }
@keyframes card-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
  .skeleton { animation: none; }
}

/* ---------- Refined typography scale --------------------------------- */
.shell__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #f4f4f6 0%, #d4af37 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.shell__subtitle {
  color: var(--color-fg-muted);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.dash__net-value {
  font-size: 40px;
  letter-spacing: -0.025em;
  font-weight: 700;
}
@media (max-width: 720px) {
  .dash__net-value { font-size: 32px; }
}
.card__title {
  letter-spacing: -0.015em;
}

/* ---------- Bottom-sheet modal on phones ----------------------------- */
@media (max-width: 540px) {
  .tx-modal-root {
    align-items: flex-end;
    padding: 0;
  }
  .tx-modal {
    max-width: 100%;
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh;
    overflow-y: auto;
    animation: tx-modal-sheet-up 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  /* Drag handle hint */
  .tx-modal::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-border-strong);
    border-radius: 2px;
    margin: 0 auto var(--space-3);
  }
}
@keyframes tx-modal-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ---------- Touch targets ≥44px on mobile ---------------------------- */
@media (max-width: 720px) {
  .btn,
  .dash__period-btn,
  .data-tabs__btn,
  .profile-switcher__btn,
  .profile-switcher__item,
  .scope-popup__btn,
  .snap__actions .btn,
  .big-ticket__btn,
  .recon__table tbody tr,
  .diag-recat,
  .diag-recat--mini {
    min-height: 44px;
  }
  .diag-recat--mini { width: 44px; min-width: 44px; }
}

/* ---------- Hover/focus refinement ---------------------------------- */
.card { transition: border-color var(--transition-base), box-shadow var(--transition-base); }
.card:hover {
  border-color: var(--color-border-strong);
}
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Better divider styling ---------------------------------- */
.card + .card { margin-top: 0; }   /* gap is on .card itself */
.shell > .card:first-child { margin-top: 0; }

/* ---------- Sticky period bar polish -------------------------------- */
.dash__period {
  /* tighter glassmorphism on scroll */
  transition: padding var(--transition-base), backdrop-filter var(--transition-base);
}
@supports (backdrop-filter: blur(10px)) {
  .dash__period {
    background:
      radial-gradient(ellipse at top right, rgba(124, 92, 255, 0.08), transparent 55%),
      rgba(19, 19, 24, 0.78);
  }
}

/* ---------- Number tabular-nums everywhere ---------------------------- */
.dash-tile__value, .dash__net-value, .dash__cat-amt, .num,
.snap__meta, .insights__delta, .insights__pct,
.budgets__actual, .budgets__limit { font-variant-numeric: tabular-nums; }

/* ---------- Loading-state copy --------------------------------------- */
.loading-state {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  color: var(--color-fg-muted);
  font-size: var(--font-size-sm);
}

/* ---------- Balances tab ---------------------------------------------- */
.balances__total {
  text-align: center;
  padding: var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.balances__total-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.balances__total-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
}
.balances__total-sub { font-size: 12px; }
.balances__h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-muted);
  margin: var(--space-4) 0 var(--space-2);
  font-weight: var(--font-weight-medium);
}
.balances__list { list-style: none; padding: 0; margin: 0; }
.balances__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.balances__row:last-child { border-bottom: 0; }
.balances__row--account {
  grid-template-columns: 1fr 90px auto;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 0 -12px;
  transition: background var(--transition-fast);
}
.balances__row--account:hover { background: rgba(124, 92, 255, 0.06); }
.balances__row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.balances__name { font-weight: var(--font-weight-medium); }
.balances__sub { font-size: 11px; }
.balances__row-sparkline { display: flex; align-items: center; }
.balances__spark { width: 80px; height: 22px; }
.balances__row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.balances__amount { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); }
.balances__amount--neg { color: var(--color-danger); }
.balances__delta { font-size: 11px; font-variant-numeric: tabular-nums; }
.balances__delta--pos { color: var(--color-success); }
.balances__delta--neg { color: var(--color-danger); }
.balances__empty { padding: var(--space-3) 0; }
@media (max-width: 540px) {
  .balances__row--account { grid-template-columns: 1fr auto; }
  .balances__row-sparkline { display: none; }
}

/* ---------- Investments tab ------------------------------------------- */
.invest__totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.invest__tile {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.invest__tile-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-muted);
  margin-bottom: 4px;
}
.invest__tile-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.invest__tile-value--in  { color: var(--color-success); }
.invest__tile-value--out { color: var(--color-danger); }
.invest__tile-sub { font-size: 11px; margin-top: 2px; }
.invest__h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg-muted);
  margin: var(--space-4) 0 var(--space-2);
  font-weight: var(--font-weight-medium);
}
.invest__chart { margin: var(--space-3) 0; }
.invest__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}
.invest__table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-fg-muted); }
.invest__table th.num, .invest__table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.invest__table td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.invest__note { font-size: 12px; margin-top: var(--space-3); }
@media (max-width: 540px) {
  .invest__totals { grid-template-columns: 1fr; }
}

/* ---------- Profile-creation wizard ----------------------------------- */
.wizard__colors {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.wizard__color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  padding: 0;
}
.wizard__color:hover { transform: scale(1.08); }
.wizard__color.is-selected {
  border-color: var(--color-fg);
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.20);
}
.wizard__radios {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: 6px;
}
.wizard__radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--font-weight-regular);
  color: var(--color-fg);
}
.wizard__radio:hover { border-color: var(--color-border-strong); }
.wizard__radio input[type="radio"]:checked ~ span { color: var(--color-accent); font-weight: var(--font-weight-medium); }
.wizard__radio input[type="radio"] { accent-color: var(--color-accent); }

/* ---------- Goals card ------------------------------------------------ */
.goals__list { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.goal {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  transition: border-color var(--transition-fast);
}
.goal--done { border-color: rgba(52, 211, 153, 0.40); }
.goal--overdue { border-color: rgba(248, 113, 113, 0.40); }
.goal__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.goal__name { font-weight: var(--font-weight-medium); }
.goal__type {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: var(--space-2);
}
.goal__amount {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.goal__bar {
  height: 8px;
  background: var(--color-bg-card);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}
.goal__bar-fill {
  display: block;
  height: 100%;
  transition: width var(--transition-base);
  background: linear-gradient(90deg, #7c5cff, #a78bfa);
}
.goal__bar-fill--done    { background: linear-gradient(90deg, #34d399, #0f766e); }
.goal__bar-fill--overdue { background: linear-gradient(90deg, #fb7185, #9f1239); }
.goal__meta { font-size: 11px; }
.goal__actions {
  display: flex;
  gap: 8px;
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.goal__btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.goal__btn:hover { border-color: var(--color-accent); }

.goals__form-wrap { margin-top: var(--space-3); }
.goals__add-toggle {
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-accent);
  user-select: none;
  list-style: none;
}
.goals__add-toggle::-webkit-details-marker { display: none; }
.goals__add-toggle::before {
  content: "▸ ";
  font-size: 10px;
}
.goals__form-wrap[open] .goals__add-toggle::before { content: "▾ "; }
.goals__form { padding-top: var(--space-3); }
.goals__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.goals__form-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-fg-muted);
  font-weight: var(--font-weight-medium);
}
.goals__form-grid label.span-2 { grid-column: span 2; }
.goals__form-grid input,
.goals__form-grid select {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--color-fg);
  font-family: inherit;
  font-size: var(--font-size-base);
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--font-weight-regular);
}
.goals__form-actions { display: flex; gap: var(--space-2); }
@media (max-width: 540px) {
  .goals__form-grid { grid-template-columns: 1fr; }
  .goals__form-grid label.span-2 { grid-column: 1; }
}

/* ---------- Card render error fallback -------------------------------- */
.card-error {
  padding: var(--space-4);
  background: rgba(248, 113, 113, 0.04);
  border: 1px dashed rgba(248, 113, 113, 0.30);
  border-radius: var(--radius-md);
  text-align: center;
}
.card-error p { margin: var(--space-2) 0; font-size: 12px; }
.card-error .btn { padding: 6px 14px; }

/* ---------- Casual PIN lock ----------------------------------------- */
.pin-lock {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in 200ms ease;
}
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }
.pin-lock__inner { text-align: center; padding: var(--space-5); max-width: 320px; }
.pin-lock__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #f4f4f6 0%, #d4af37 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--space-2);
}
.pin-lock__sub { margin-bottom: var(--space-3); }
.pin-lock__warn {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-warning);
  margin-bottom: var(--space-5);
  opacity: 0.8;
}
.pin-lock__digits {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-5);
}
.pin-lock__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.pin-lock__dot.is-filled {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.pin-lock__keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  max-width: 240px;
  margin: 0 auto;
}
.pin-lock__key {
  aspect-ratio: 1;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-fg);
  font-family: inherit;
  font-size: 22px;
  font-weight: var(--font-weight-medium);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.pin-lock__key:hover { background: rgba(124, 92, 255, 0.15); }
.pin-lock__key:active { transform: scale(0.92); background: rgba(124, 92, 255, 0.25); }
.pin-lock__key--del { font-size: 18px; }
.pin-lock__error {
  margin-top: var(--space-4);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

/* ---------- Advanced settings ---------------------------------------- */
.advanced__h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-fg);
  margin: var(--space-4) 0 var(--space-2);
  font-weight: var(--font-weight-medium);
}
.advanced__h:first-child { margin-top: 0; }
.advanced__status { font-size: 12px; margin-top: var(--space-2); }
.advanced__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 0;
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.advanced__toggle input[type="checkbox"] { accent-color: var(--color-accent); width: 18px; height: 18px; }

/* ---------- Joint-mode visual indicators ----------------------------- */
body.is-joint-mode .card--import,
body.is-joint-mode #review-container,
body.is-joint-mode #manual-entry,
body.is-joint-mode #budgets-container,
body.is-joint-mode #goals-container,
body.is-joint-mode .diag-recat,
body.is-joint-mode [data-action="recat-merchant"],
body.is-joint-mode [data-action="recat-tx"],
body.is-joint-mode [data-action="apply-merchant"],
body.is-joint-mode .scope-popup__btn {
  /* Read-only badge over write surfaces — they still render but actions show
   * the joint-mode write block when the user tries them. */
  position: relative;
}
body.is-joint-mode [data-tab-panel="manual"]::after,
body.is-joint-mode [data-tab-panel="advanced"]::after {
  content: "Joint view is read-only — switch to a single profile to make changes.";
  display: block;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(212, 175, 55, 0.08);
  border: 1px dashed rgba(212, 175, 55, 0.40);
  border-radius: var(--radius-md);
  color: var(--color-warning);
  font-size: var(--font-size-sm);
  text-align: center;
}
/* ---------- Bottom-tab nav (mobile) --------------------------------- */
.bottom-nav {
  display: none;
}
@media (max-width: 720px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background:
      radial-gradient(ellipse at top, rgba(124, 92, 255, 0.06), transparent 65%),
      rgba(10, 10, 12, 0.92);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-top: 1px solid var(--color-border);
    z-index: 100;
    padding: 8px 6px max(env(safe-area-inset-bottom), 8px);
    gap: 2px;
  }
  .bottom-nav__btn {
    background: transparent;
    border: 0;
    color: var(--color-fg-muted);
    font-family: inherit;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: color var(--transition-fast), background var(--transition-fast);
  }
  .bottom-nav__btn.is-active {
    color: var(--color-accent);
    background: rgba(124, 92, 255, 0.10);
  }
  .bottom-nav__icon { font-size: 18px; line-height: 1; }
  .bottom-nav__label { font-size: 9px; }
  /* Body offset for bottom-nav so the last card isn't covered */
  body { padding-bottom: 80px; }
  /* On mobile, only the active section's cards show */
  body[data-active-section="money"]        .card[data-section]:not([data-section="money"]),
  body[data-active-section="transactions"] .card[data-section]:not([data-section="transactions"]),
  body[data-active-section="investments"]  .card[data-section]:not([data-section="investments"]),
  body[data-active-section="reports"]      .card[data-section]:not([data-section="reports"]) {
    display: none;
  }
}

/* ---------- Header icon button (feedback) --------------------------- */
.header__right { display: flex; align-items: center; gap: var(--space-2); }
.header-icon-btn {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg-muted);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.header-icon-btn:hover { border-color: var(--color-accent); color: var(--color-fg); }

/* ---------- Feedback log + toast ------------------------------------ */
.fb-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-card);
  border: 1px solid var(--color-accent);
  color: var(--color-fg);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  z-index: 1500;
  animation: fb-toast-up 200ms ease;
}
.fb-toast.is-hiding { opacity: 0; transition: opacity 400ms ease; }
@keyframes fb-toast-up {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.fb-meta { font-size: 11px; margin: var(--space-2) 0; }
.fb-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.fb-list-head .btn { padding: 5px 12px; font-size: var(--font-size-sm); }
.fb-list { list-style: none; padding: 0; margin: 0; }
.fb-entry {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.fb-entry__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
  gap: 4px;
}
.fb-entry__del {
  background: transparent;
  border: 0;
  color: var(--color-fg-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 0 6px;
}
.fb-entry__del:hover { color: var(--color-danger); }
.fb-entry__body {
  font-size: var(--font-size-sm);
  white-space: pre-wrap;
}

body.is-joint-mode .shell::before {
  content: "JOINT HOUSEHOLD VIEW · Read-only · Aggregating across all profiles";
  display: block;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-warning);
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: var(--space-3);
}