/* ============================================================
   MyNetWealth Web UI — Design System
   Based on FINANCEAPP_MASTER_SPEC.md design tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Brand */
  --c-primary:        #01014B;
  --c-primary-mid:    #1A1A6E;
  --c-primary-light:  #EEF0FF;
  --c-primary-hover:  #0d0d6b;

  /* Semantic */
  --c-success:        #22C55E;
  --c-success-light:  #DCFCE7;
  --c-error:          #EF4444;
  --c-error-light:    #FEE2E2;
  --c-warning:        #F59E0B;
  --c-warning-light:  #FEF3C7;
  --c-info:           #3B82F6;
  --c-info-light:     #DBEAFE;

  /* Neutral */
  --c-n900: #0F172A;
  --c-n700: #334155;
  --c-n600: #475569;
  --c-n400: #94A3B8;
  --c-n300: #CBD5E1;
  --c-n200: #E2E8F0;
  --c-n100: #F1F5F9;
  --c-n50:  #F8FAFC;

  /* Surfaces */
  --c-bg:   #F8FAFC;
  --c-card: #FFFFFF;
  --c-overlay: rgba(1,1,75,0.05);

  /* Text */
  --c-text:        #0F172A;
  --c-text-muted:  #475569;
  --c-text-faint:  #94A3B8;
  --c-text-inverse:#FFFFFF;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.04);

  /* Radii */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 20px;
  --r-full: 9999px;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Layout */
  --sidebar-w: 240px;
  --header-h:  64px;

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', 'Liberation Sans', system-ui, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}
ul, ol { list-style: none; }

/* ── App Shell ──────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--c-primary);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  transition: width var(--t-base);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  min-height: var(--header-h);
}
.sidebar-logo-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #3B82F6, #22C55E);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.sidebar-logo-text {
  font-size: 18px; font-weight: 700;
  color: var(--c-text-inverse);
  letter-spacing: -0.3px;
}
.sidebar-logo-sub {
  font-size: 10px; font-weight: 400;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1px; text-transform: uppercase;
  margin-top: 1px;
}

.sidebar-nav {
  flex: 1;
  padding: var(--sp-4) var(--sp-3);
  overflow-y: auto;
}
.nav-section-label {
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.35);
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-lg);
  color: rgba(255,255,255,0.65);
  font-size: 14px; font-weight: 500;
  transition: all var(--t-fast);
  cursor: pointer;
  margin-bottom: 2px;
}
.nav-item:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}
.nav-item.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.nav-item.active .nav-icon { color: #fff; }
.nav-icon {
  width: 20px; height: 20px;
  opacity: 0.8;
  flex-shrink: 0;
}
.nav-item.active .nav-icon { opacity: 1; }

.sidebar-footer {
  padding: var(--sp-4) var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-user {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-lg);
  color: rgba(255,255,255,0.75);
  font-size: 13px;
}
.user-avatar {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, #3B82F6, var(--c-primary-mid));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}

/* ── Main Content ───────────────────────────────────────────── */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-header {
  height: var(--header-h);
  background: var(--c-card);
  border-bottom: 1px solid var(--c-n200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-8);
  position: sticky; top: 0; z-index: 50;
}
.page-header-left { display: flex; align-items: center; gap: var(--sp-3); }
.breadcrumb {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; color: var(--c-text-faint);
}
.breadcrumb-sep { color: var(--c-n300); }
.breadcrumb-current { color: var(--c-text); font-weight: 600; }
.page-title {
  font-size: 20px; font-weight: 700; color: var(--c-text);
  letter-spacing: -0.3px;
}
.page-header-right { display: flex; align-items: center; gap: var(--sp-3); }

.page-body {
  flex: 1;
  padding: var(--sp-8);
  max-width: 1600px;
  width: 100%;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--c-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
  border: 1px solid var(--c-n200);
}
.card-sm { padding: var(--sp-4); }
.card-lg { padding: var(--sp-8); }

.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.card-title {
  font-size: 15px; font-weight: 600; color: var(--c-text);
}
.card-subtitle {
  font-size: 12px; color: var(--c-text-faint);
  margin-top: 2px;
}

/* Stat cards */
.stat-card {
  background: var(--c-card);
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-n200);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.stat-card.primary::before   { background: var(--c-primary); }
.stat-card.success::before   { background: var(--c-success); }
.stat-card.warning::before   { background: var(--c-warning); }
.stat-card.error::before     { background: var(--c-error); }
.stat-card.info::before      { background: var(--c-info); }

.stat-label {
  font-size: 12px; font-weight: 500;
  color: var(--c-text-faint);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: var(--sp-1);
}
.stat-value {
  font-size: 28px; font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.stat-value.lg { font-size: 36px; }
.stat-value.sm { font-size: 20px; }
.stat-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500;
  margin-top: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
}
.stat-badge.up   { background: var(--c-success-light); color: #16a34a; }
.stat-badge.down { background: var(--c-error-light);   color: #dc2626; }
.stat-badge.flat { background: var(--c-n100);           color: var(--c-n600); }
.stat-icon {
  position: absolute;
  right: var(--sp-5); top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  opacity: 0.12;
}

/* ── Grid Layouts ───────────────────────────────────────────── */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-5); }
/* Expenses: when the main grid stacks to one column, show category chart above transactions */
@media (max-width: 1280px) {
  .grid-2-1--expenses {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }
  .grid-2-1--expenses .expenses-side-stack {
    order: -1;
  }
}
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-5); }
.grid-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-5); }

/* Dashboard: compact health + corpus + weekly */
.grid-dashboard-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-5);
  align-items: stretch;
}

.card-header--tight { padding-top: var(--sp-3); padding-bottom: var(--sp-2); }
.card-title--sm { font-size: 15px; }

.health-ring--compact { width: 104px !important; height: 104px !important; max-width: 100%; }
.ring-score--compact { font-size: 22px; }

.health-score-panel--compact {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.health-score-panel--compact .health-breakdown { margin-top: 0; flex: 1; min-width: 0; }
.health-score-panel--compact .health-factor { padding: var(--sp-1) 0; gap: var(--sp-2); }
.health-score-panel--compact .health-factor-name { font-size: 11px; }
.health-score-panel--compact .health-factor-bar { flex: 1.5; }
.health-score-panel--compact .health-factor-val { font-size: 12px; min-width: 28px; }

.metrics-list--dense { gap: var(--sp-2); }

.stat-meta--stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.corpus-kpi-line { font-size: 13px; font-weight: 600; line-height: 1.35; }

/* Corpus longevity vs life expectancy (green → dark red) */
.corpus-sustain--good { color: var(--c-success); }
.corpus-sustain--warn { color: #d97706; }
.corpus-sustain--poor { color: #ea580c; }
.corpus-sustain--critical { color: #991b1b; }
.corpus-sustain--neutral { color: var(--c-text-muted); }

/* ── Investments page: KPI + charts ─────────────────────────── */
.invest-kpi-grid {
  gap: var(--sp-4);
}
@media (min-width: 1280px) {
  .invest-kpi-grid { gap: var(--sp-5); }
}
.invest-kpi-grid .stat-card {
  padding: var(--sp-4) var(--sp-5);
}
.invest-kpi-grid .stat-card-inner {
  min-width: 0;
}
.stat-card--with-deco .stat-card-inner {
  padding-right: 3rem;
}
.invest-kpi-grid .stat-label {
  font-size: 11px;
  letter-spacing: 0.06em;
}
.invest-kpi-grid .stat-value {
  font-size: 24px;
  letter-spacing: -0.03em;
}
.stat-meta--lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: var(--sp-2);
}
.stat-meta--lines .stat-meta-line {
  font-size: 11px;
  line-height: 1.4;
  color: var(--c-text-muted);
  font-weight: 500;
}
.invest-corpus-meta.stat-meta--stack {
  gap: 8px;
}
.invest-stat-corpus .corpus-kpi-line {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  display: block;
}
.invest-charts-grid .card-header {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.invest-charts-grid .card-title {
  line-height: 1.3;
}
.invest-charts-grid .card-body {
  padding-top: var(--sp-2);
}

/* Portfolio projection: line chart fills card (Chart.js needs sized parent; grid row = card height) */
.invest-charts-grid {
  align-items: stretch;
}
.invest-charts-grid > .card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.invest-charts-grid .invest-proj-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible; /* Y-axis labels not clipped beside sidebar */
}
.chart-wrap--projection {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 320px;
  overflow: visible;
}
.invest-proj-card {
  overflow: visible;
}
.chart-wrap--projection canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 768px) {
  .chart-wrap--projection {
    min-height: 260px;
  }
}

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }

.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-5);
  border-radius: var(--r-lg);
  font-size: 14px; font-weight: 600;
  cursor: pointer; border: none;
  transition: all var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--c-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--c-primary-hover); box-shadow: var(--shadow-card); }

.btn-secondary {
  background: var(--c-primary-light);
  color: var(--c-primary);
}
.btn-secondary:hover { background: #dfe3ff; }

.btn-ghost {
  background: transparent;
  color: var(--c-text-muted);
  border: 1px solid var(--c-n200);
}
.btn-ghost:hover { background: var(--c-n100); border-color: var(--c-n300); }

.btn-danger {
  background: var(--c-error-light);
  color: var(--c-error);
}
.btn-danger:hover { background: #fecaca; }

.btn-success {
  background: var(--c-success-light);
  color: #16a34a;
}
.btn-success:hover { background: #bbf7d0; }

.btn-sm { padding: 6px var(--sp-3); font-size: 12px; border-radius: var(--r-md); }
.btn-lg { padding: 14px var(--sp-6); font-size: 15px; }
.btn-icon { padding: 8px; border-radius: var(--r-md); }
.btn-full { width: 100%; }

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-4); }
.form-label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.2px;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px var(--sp-4);
  border: 1.5px solid var(--c-n200);
  border-radius: var(--r-lg);
  font-size: 14px; color: var(--c-text);
  background: var(--c-card);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(1,1,75,0.08);
}
.form-input::placeholder { color: var(--c-text-faint); }
.form-hint {
  font-size: 12px; color: var(--c-text-faint);
  margin-top: var(--sp-1);
}
.form-label-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.form-label-row--compact {
  margin-bottom: var(--sp-1);
  gap: 6px;
}
.form-label-row .form-label {
  margin-bottom: 0;
}
.form-label--compact {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.form-label-muted {
  font-weight: 500;
  color: var(--c-text-faint);
  font-size: 11px;
}
.form-hint--sm {
  font-size: 11px;
  margin-top: 0.25rem;
}
.form-info-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1.5px solid var(--c-n200);
  border-radius: var(--r-full);
  background: var(--c-card);
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  cursor: pointer;
}
.form-info-btn--sm {
  width: 18px;
  height: 18px;
  font-size: 10px;
  border-width: 1px;
}
.form-info-btn:hover,
.form-info-btn:focus-visible {
  border-color: var(--c-primary);
  color: var(--c-primary);
  outline: none;
}
.form-info-popover[popover] {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  max-width: min(300px, calc(100vw - 32px));
  border: 1px solid var(--c-n200);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-text);
  background: var(--c-card);
}
.form-info-popover--compact {
  max-width: min(260px, calc(100vw - 28px));
  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
}
.form-info-popover-p {
  margin: 0 0 var(--sp-2);
}
.form-info-popover-p:last-child {
  margin-bottom: 0;
}
.form-info-popover-muted {
  color: var(--c-text-muted);
  font-size: 11px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); }

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

/* AI recommendation tables: card-style rows on narrow screens (readable width) */
@media (max-width: 720px) {
  .table-wrap--ai-rec {
    overflow-x: visible;
  }
  .table--ai-rec-responsive thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .table--ai-rec-responsive tbody tr {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    border: 1px solid var(--c-n200);
    border-radius: var(--r-lg);
    background: var(--c-card);
    box-shadow: var(--shadow-sm);
  }
  .table--ai-rec-responsive tbody tr:last-child {
    margin-bottom: 0;
  }
  .table--ai-rec-responsive tbody td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 38%) 1fr;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) 0 !important;
    border: none !important;
    text-align: left !important;
    vertical-align: top;
    font-size: 14px;
  }
  .table--ai-rec-responsive tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
  }
}
table { width: 100%; border-collapse: collapse; }
thead th {
  font-size: 11px; font-weight: 600;
  color: var(--c-text-faint);
  text-transform: uppercase; letter-spacing: 0.8px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1.5px solid var(--c-n200);
  text-align: left;
}
tbody td {
  padding: var(--sp-3) var(--sp-4);
  font-size: 14px; color: var(--c-text);
  border-bottom: 1px solid var(--c-n100);
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--c-n50); }
.td-muted { color: var(--c-text-faint); font-size: 13px; }

/* ── Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px;
}
.badge-success { background: var(--c-success-light); color: #166534; }
.badge-error   { background: var(--c-error-light);   color: #991b1b; }
.badge-warning { background: var(--c-warning-light); color: #92400e; }
.badge-info    { background: var(--c-info-light);    color: #1e40af; }
.badge-neutral { background: var(--c-n100);          color: var(--c-n600); }
.badge-primary { background: var(--c-primary-light); color: var(--c-primary); }

/* ── Progress bars ───────────────────────────────────────────── */
.progress-wrap {
  background: var(--c-n100);
  border-radius: var(--r-full);
  height: 8px; overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c-primary), #3B82F6);
  transition: width 600ms ease;
}
.progress-bar.success { background: linear-gradient(90deg, var(--c-success), #86efac); }
.progress-bar.warning { background: linear-gradient(90deg, var(--c-warning), #fcd34d); }
.progress-bar.error   { background: linear-gradient(90deg, var(--c-error), #fca5a5); }

/* ── Health Score Gauge ──────────────────────────────────────── */
.health-gauge {
  position: relative;
  width: 140px; height: 70px;
  margin: 0 auto;
}
.health-score-num {
  font-size: 32px; font-weight: 700;
  color: var(--c-text);
  text-align: center;
  margin-top: var(--sp-2);
}

/* ── Flash messages ──────────────────────────────────────────── */
.flash-container {
  position: fixed;
  top: var(--sp-5); right: var(--sp-5);
  z-index: 1000;
  display: flex; flex-direction: column; gap: var(--sp-2);
  max-width: 380px;
}
.flash {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  font-size: 14px; font-weight: 500;
  animation: slide-in 300ms ease forwards;
}
.flash-success { background: var(--c-success-light); color: #166534; border-left: 3px solid var(--c-success); }
.flash-error   { background: var(--c-error-light);   color: #991b1b; border-left: 3px solid var(--c-error); }
.flash-warning { background: var(--c-warning-light); color: #92400e; border-left: 3px solid var(--c-warning); }
.flash-info    { background: var(--c-info-light);    color: #1e40af; border-left: 3px solid var(--c-info); }
.flash-close {
  margin-left: auto; cursor: pointer;
  opacity: 0.5; font-size: 16px;
  background: none; border: none; padding: 0;
}
.flash-close:hover { opacity: 1; }

@keyframes slide-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slide-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}


/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.5);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
  backdrop-filter: blur(2px);
  animation: fade-in 200ms ease;
}
.modal-overlay.hidden { display: none; }
.modal { display: none; }
.modal.is-open { display: block; }
.modal-dialog {
  animation: scale-in 200ms ease;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--c-n200);
}
.modal-title { font-size: 18px; font-weight: 700; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: var(--c-n100); border: none;
  cursor: pointer; font-size: 18px; color: var(--c-text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast);
}
.modal-close:hover { background: var(--c-n200); }
.modal-body { padding: var(--sp-6); }
.modal-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-n200);
  display: flex; justify-content: flex-end; gap: var(--sp-3);
}

@keyframes fade-in  { from { opacity: 0; }              to { opacity: 1; } }
@keyframes scale-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Goal Cards ──────────────────────────────────────────────── */
.goal-card {
  background: var(--c-card);
  border: 1px solid var(--c-n200);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-fast);
}
.goal-card:hover { box-shadow: var(--shadow-card); }
.goal-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-xl);
  background: var(--c-primary-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: var(--sp-3);
}
.goal-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.goal-amounts {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--c-text-muted);
  margin: var(--sp-3) 0 var(--sp-2);
}
.goal-amount-current { font-weight: 700; color: var(--c-text); font-size: 18px; }
.goal-progress-pct { font-weight: 600; color: var(--c-primary); }

/* ── Debt Cards ──────────────────────────────────────────────── */
.debt-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  padding: var(--sp-4);
  border: 1px solid var(--c-n200);
  border-radius: var(--r-lg);
  background: var(--c-card);
  gap: var(--sp-4);
  transition: border-color var(--t-fast);
}
.debt-item:hover { border-color: var(--c-n300); }
.debt-name { font-weight: 600; font-size: 15px; }
.debt-creditor { font-size: 12px; color: var(--c-text-faint); margin-top: 2px; }
.debt-balance { font-size: 20px; font-weight: 700; text-align: right; }
.debt-apr { font-size: 12px; color: var(--c-error); font-weight: 600; margin-top: 2px; text-align: right; }

/* ── Auth Pages ──────────────────────────────────────────────── */
.auth-page {
  min-height: 100vh;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
}
.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 960px;
  width: 100%;
  min-height: 600px;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.auth-split .auth-brand {
  background: var(--c-primary);
  padding: var(--sp-12);
  display: flex; flex-direction: column;
  justify-content: center;
  color: #fff;
}
.auth-brand-logo {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.15);
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
  margin-bottom: var(--sp-6);
}
.auth-brand h1 {
  font-size: 28px; font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--sp-4);
}
.auth-brand p {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}
.auth-features { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-3); }
.auth-feature {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 14px; color: rgba(255,255,255,0.8);
}
.auth-feature-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-success); flex-shrink: 0;
}

.auth-form-side {
  background: var(--c-card);
  padding: var(--sp-12);
  display: flex; flex-direction: column;
  justify-content: center;
}
.auth-form-header { margin-bottom: var(--sp-8); }
.auth-form-header h2 { font-size: 24px; font-weight: 700; }
.auth-form-header p  { font-size: 14px; color: var(--c-text-muted); margin-top: var(--sp-1); }

/* ── Onboarding ──────────────────────────────────────────────── */
.onboarding-page {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-mid) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
}
/* .onboarding-card + .onboarding-layout header: see “Onboarding” section below */
.onboarding-header {
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  background: var(--c-primary-light);
  border-bottom: 1px solid var(--c-n200);
}
.onboarding-steps {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5);
}
.step-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-n200);
  transition: all var(--t-base);
}
.step-dot.active {
  width: 24px; background: var(--c-primary);
  border-radius: var(--r-full);
}
.step-dot.done { background: var(--c-success); }
.onboarding-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Chart containers ────────────────────────────────────────── */
.chart-container { position: relative; }
.chart-container canvas { max-width: 100%; }

/* ── Health score arc ────────────────────────────────────────── */
.score-ring { position: relative; display: inline-block; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring-track { fill: none; stroke: var(--c-n200); stroke-width: 10; }
.score-ring-fill  { fill: none; stroke-width: 10; stroke-linecap: round;
                    transition: stroke-dashoffset 800ms ease; }
.score-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.score-number { font-size: 28px; font-weight: 700; line-height: 1; }
.score-label  { font-size: 11px; color: var(--c-text-faint); font-weight: 500; }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: var(--sp-10);
  color: var(--c-text-faint);
}
.empty-icon { font-size: 48px; margin-bottom: var(--sp-4); opacity: 0.4; }
.empty-title { font-size: 16px; font-weight: 600; color: var(--c-text-muted); margin-bottom: var(--sp-2); }
.empty-desc  { font-size: 14px; }

/* ── Dividers & misc ─────────────────────────────────────────── */
.divider { height: 1px; background: var(--c-n200); margin: var(--sp-5) 0; }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-muted  { color: var(--c-text-muted); }
.text-faint  { color: var(--c-text-faint); }
.text-success{ color: var(--c-success); }
.text-error  { color: var(--c-error); }
.text-warning{ color: var(--c-warning); }
.text-primary{ color: var(--c-primary); }
.font-bold   { font-weight: 700; }
.font-semi   { font-weight: 600; }
.text-sm     { font-size: 13px; }
.text-xs     { font-size: 11px; }
.text-lg     { font-size: 18px; }
.flex        { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2       { gap: var(--sp-2); }
.gap-3       { gap: var(--sp-3); }
.gap-4       { gap: var(--sp-4); }
.mt-1{ margin-top: var(--sp-1); }
.mt-2{ margin-top: var(--sp-2); }
.mt-3{ margin-top: var(--sp-3); }
.mt-4{ margin-top: var(--sp-4); }
.mb-1{ margin-bottom: var(--sp-1); }
.mb-2{ margin-bottom: var(--sp-2); }
.mb-3{ margin-bottom: var(--sp-3); }
.mb-4{ margin-bottom: var(--sp-4); }
.p-4 { padding: var(--sp-4); }
.p-6 { padding: var(--sp-6); }

/* ── Summary insight box ──────────────────────────────────────── */
.insight-box {
  background: var(--c-primary-light);
  border: 1px solid rgba(1,1,75,0.12);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  font-size: 13px;
  color: var(--c-primary);
  display: flex; gap: var(--sp-3);
}
.insight-box.success { background: var(--c-success-light); border-color: rgba(34,197,94,0.2); color: #166534; }
.insight-box.warning { background: var(--c-warning-light); border-color: rgba(245,158,11,0.2); color: #92400e; }
.insight-box.error   { background: var(--c-error-light);   border-color: rgba(239,68,68,0.2);  color: #991b1b; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2-1 { grid-template-columns: 1fr; }
  .grid-3-2 { grid-template-columns: 1fr; }
  .grid-dashboard-metrics { grid-template-columns: 1fr; }
  .app-content {
    padding: var(--sp-5) var(--sp-6);
  }
}
/* Equal two-column pages (e.g. profile): stack before cards get squeezed side-by-side */
@media (max-width: 1180px) {
  .grid-2 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }
  .grid-2 > * {
    min-width: 0;
  }
  .card-stack {
    min-width: 0;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .grid-2 { grid-template-columns: 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .page-body { padding: var(--sp-4); }
  .page-header { padding: 0 var(--sp-4); }

  /* Numeric displays: scale down on narrow viewports to avoid overflow */
  .stat-value {
    font-size: clamp(1.05rem, 4.8vw, 1.65rem);
    letter-spacing: -0.04em;
  }
  .stat-value.lg { font-size: clamp(1.2rem, 5.5vw, 1.85rem); }
  .stat-card-inner { min-width: 0; }
  .metric-value {
    font-size: clamp(0.8125rem, 3.4vw, 0.9375rem);
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 0;
    word-break: break-word;
  }
  .metric-row { gap: var(--sp-2); align-items: flex-start; }
  .metric-highlight-val {
    font-size: clamp(1.2rem, 5.5vw, 1.65rem);
  }
  .ret-stat-value {
    font-size: clamp(1rem, 4vw, 1.2rem);
  }
  .invest-kpi-grid .stat-value {
    font-size: clamp(1rem, 4.2vw, 1.35rem);
  }
  .debt-balance { font-size: clamp(1rem, 3.8vw, 1.15rem); }
  .goal-amount-current { font-size: clamp(1rem, 3.8vw, 1.1rem); }
  .ring-score--compact { font-size: clamp(1rem, 3.5vw, 1.2rem); }
  .score-number { font-size: clamp(1.15rem, 4.5vw, 1.5rem); }
}

@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Feature gate — lock overlay
   ══════════════════════════════════════════════════════════════════════════════ */

.feature-gate {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 220px;
}

.feature-gate-blur {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
  opacity: 0.45;
  padding: var(--sp-6);
}

.feature-gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bg-card-rgb, 255,255,255), 0.72);
  backdrop-filter: blur(2px);
  z-index: 10;
}

.feature-gate-content {
  text-align: center;
  padding: var(--sp-8);
  max-width: 340px;
}

.feature-gate-content .lock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-primary-light);
  color: var(--c-primary);
  margin: 0 auto var(--sp-4);
}

.feature-gate-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--sp-2);
  color: var(--c-text);
}

.feature-gate-content p {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-4);
}

.blur-text { color: transparent; text-shadow: 0 0 8px rgba(0,0,0,0.35); }

/* ══════════════════════════════════════════════════════════════════════════════
   AI Stock Recommendations
   ══════════════════════════════════════════════════════════════════════════════ */

.ai-stocks-form { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.form-actions--inline { margin-top: 0; align-self: flex-end; }

.ai-insight-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-primary-light);
  border-left: 3px solid var(--c-primary);
  border-radius: var(--r-md);
  font-size: 0.875rem;
  color: var(--c-text);
}

.ai-insight-banner--sm { font-size: 0.8125rem; }
.ai-insight-banner .insight-icon { flex-shrink: 0; color: var(--c-primary); margin-top: 2px; }
.ai-insight-banner > span:last-child {
  min-width: 0;
  flex: 1;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.stock-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.stock-categories-grid--preview { opacity: 0.7; }

.stock-category-card {
  border: 1px solid var(--c-n200);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  background: var(--c-card);
}

.stock-cat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.stock-cat-name { font-weight: 600; font-size: 0.9375rem; color: var(--c-text); }
.stock-cat-desc { font-size: 0.8125rem; margin-top: 2px; }
.stock-cat-meta { text-align: right; flex-shrink: 0; }
.stock-cat-return { font-size: 1rem; font-weight: 700; }
.stock-cat-alloc { font-size: 0.75rem; }

.stock-picks-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.stock-pick-row {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-n50);
}

.stock-pick-info { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: 2px; }
.stock-pick-name { font-weight: 500; font-size: 0.875rem; color: var(--c-text); }
.stock-pick-why { font-size: 0.8125rem; }

.disclaimer { font-style: italic; opacity: 0.7; }

/* ══════════════════════════════════════════════════════════════════════════════
   Subscription page
   ══════════════════════════════════════════════════════════════════════════════ */

.plan-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.plan-card {
  position: relative;
  border: 1px solid var(--c-n200);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  background: var(--c-card);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: box-shadow 0.2s;
}

.plan-card:hover { box-shadow: var(--shadow-card); }

.plan-card--highlighted {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px var(--c-primary-light);
}

.plan-card--current { border-color: var(--c-success); }

.plan-card--ultra:not(.plan-card--current) {
  border-color: #d8b4fe;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.15);
}
.plan-card--ultra .plan-price {
  color: #7c3aed;
}

.btn-plan-ultra {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  color: #fff !important;
  border: none !important;
  font-weight: 600;
}
.btn-plan-ultra:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.plan-popular-badge,
.plan-current-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px var(--sp-3);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.plan-popular-badge { background: var(--c-primary); color: #fff; }
.plan-current-badge { background: var(--c-success); color: #fff; }

.plan-header { display: flex; align-items: center; gap: var(--sp-3); }

.plan-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.plan-icon--basic  { background: #f1f5f9; color: #64748b; }
.plan-icon--pro    { background: #eef2ff; color: var(--c-primary); }
.plan-icon--ultra  { background: #fdf4ff; color: #a855f7; }

.plan-name { font-size: 1.125rem; font-weight: 700; color: var(--c-text); }
.plan-price { font-size: 1.5rem; font-weight: 800; color: var(--c-primary); line-height: 1.2; }
.plan-price-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.plan-price--strike {
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: line-through;
}
.plan-price--promo { font-size: 1.5rem; font-weight: 800; }
.plan-trial-note { font-size: 0.6875rem; color: var(--c-text-faint); line-height: 1.35; max-width: 14rem; }
.plan-desc { font-size: 0.875rem; color: var(--c-text-muted); line-height: 1.5; }

.plan-features-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }

.plan-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 0.875rem;
  color: var(--c-text-muted);
}

.plan-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-success-light);
  color: var(--c-success);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.plan-footer { margin-top: auto; }

.section-heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-text);
}

/* Feature checklist */
.feature-checklist { display: flex; flex-direction: column; gap: var(--sp-3); }

.feature-check-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: 0.9rem;
}

.feature-check-row.enabled { background: var(--c-success-light); color: var(--c-text); }
.feature-check-row.disabled { background: var(--c-n100); color: var(--c-text-muted); opacity: 0.7; }

.check-icon {
  font-size: 1rem;
  font-weight: 700;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.feature-check-row.enabled .check-icon { color: var(--c-success); }
.feature-check-row.disabled .check-icon { color: var(--c-text-muted); }

/* Comparison table */
.comparison-table-wrap { overflow-x: auto; }

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.comparison-table th,
.comparison-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--c-n200);
}

.comparison-table thead th {
  font-weight: 600;
  color: var(--c-text);
  background: var(--c-n50);
}

.comparison-table .plan-col--highlight {
  background: var(--c-primary-light);
  color: var(--c-primary);
}

.comparison-table .check { color: var(--c-success); font-weight: 700; }
.comparison-table .cross { color: var(--c-text-muted); }

.badge--purple { background: #ede9fe; color: #7c3aed; }
.badge--amber  { background: #fef3c7; color: #d97706; }
.badge--danger { background: #fee2e2; color: #dc2626; }

.card-header-left  { display: flex; align-items: center; gap: var(--sp-2); }
.card-header-right { display: flex; align-items: center; gap: var(--sp-2); }
.ml-2 { margin-left: var(--sp-2); }
.mr-1 { margin-right: var(--sp-1); }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-3 { gap: var(--sp-3); }
.w-full { width: 100%; }

@media (max-width: 1100px) {
  .plan-cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .plan-cards-grid { grid-template-columns: 1fr; }
  .stock-categories-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ADDENDUM — All missing classes to match template class names
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Core App Layout Aliases ────────────────────────────────── */
/* Templates use app-sidebar, app-main, app-topbar, app-content  */

.app-sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--c-primary);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: width var(--t-base);
  /* Stay pinned to the viewport when the page scrolls (incl. iOS) */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  max-height: 100dvh;
  overflow: hidden;
}
.app-sidebar .sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.app-sidebar .sidebar-footer {
  flex-shrink: 0;
}
.sidebar-logo-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  text-decoration: none;
}
.logo-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo-text {
  font-size: 16px; font-weight: 700;
  color: var(--c-text-inverse);
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-collapse-btn {
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: var(--r-md);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.15); }

.app-sidebar.collapsed { width: 72px; }
.app-sidebar.collapsed ~ .app-main { margin-left: 72px; }
.app-sidebar.collapsed .logo-text,
.app-sidebar.collapsed .nav-item span,
.app-sidebar.collapsed .nav-section-label,
.app-sidebar.collapsed .user-info { display: none; }
.app-sidebar.collapsed .nav-item { justify-content: center; }
/*
 * Collapsed rail: logo + chevron in a row was ~full width, so the mark sat left.
 * Stack vertically so the logo icon shares the same horizontal center as nav icons.
 */
.app-sidebar.collapsed .sidebar-logo {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
}
.app-sidebar.collapsed .sidebar-logo-link {
  flex: 0 0 auto;
  width: 100%;
  justify-content: center;
  min-width: 0;
}
.app-sidebar.collapsed .sidebar-user { justify-content: center; }
.app-sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }

.nav-section { margin-bottom: var(--sp-1); }

.user-info { display: flex; flex-direction: column; overflow: hidden; flex: 1; }
.user-name  { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role  { font-size: 11px; color: rgba(255,255,255,0.45); white-space: nowrap; }

.logout-form { display: flex; justify-content: center; margin-top: var(--sp-2); }
.logout-btn  { color: rgba(255,255,255,0.5); }
.logout-btn:hover { color: #fff; background: rgba(255,255,255,0.1); }

.app-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.app-topbar {
  height: var(--header-h);
  background: var(--c-card);
  border-bottom: 1px solid var(--c-n200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-8);
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}
.topbar-left  { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; }
.topbar-titles { display: flex; flex-direction: column; min-width: 0; flex: 1; justify-content: center; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.topbar-subtitle { font-size: 13px; color: var(--c-text-faint); }
.topbar-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--r-md);
  background: var(--c-n100);
  color: var(--c-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.topbar-menu-btn:hover {
  background: var(--c-n200);
  color: var(--c-primary);
}
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-backdrop.is-active {
  display: block;
}
body.sidebar-open {
  overflow: hidden;
  touch-action: none;
}
body.sidebar-open .scroll-top-btn {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Fixed “back to top” (shown after ~½ viewport scroll) */
.scroll-top-btn {
  position: fixed;
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-full);
  border: 1px solid var(--c-n200);
  background: var(--c-card);
  color: var(--c-primary);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  background: var(--c-n50);
  border-color: var(--c-n300);
  color: var(--c-primary);
}
.scroll-top-btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-top-btn {
    transition: none;
    transform: none;
  }
  .scroll-top-btn.is-visible {
    transform: none;
  }
}

.topbar-actions-row { display: flex; align-items: center; gap: var(--sp-3); }
.header-actions { display: flex; align-items: center; gap: var(--sp-3); }

.app-content {
  flex: 1;
  padding: var(--sp-8);
  max-width: 1600px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Flash Messages ──────────────────────────────────────────── */
.flash-msg {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  font-size: 14px; font-weight: 500;
  animation: slide-in 300ms ease forwards;
}
.flash-msg.flash-out { animation: slide-out 300ms ease forwards; }
.flash-text { flex: 1; }
.flash-success, .flash-msg.flash-success { background: var(--c-success-light); color: #166534; border-left: 3px solid var(--c-success); }
.flash-error,   .flash-msg.flash-error   { background: var(--c-error-light);   color: #991b1b; border-left: 3px solid var(--c-error); }
.flash-warning, .flash-msg.flash-warning { background: var(--c-warning-light); color: #92400e; border-left: 3px solid var(--c-warning); }
.flash-info,    .flash-msg.flash-info    { background: var(--c-info-light);    color: #1e40af; border-left: 3px solid var(--c-info); }

/* ── Badge Variants ──────────────────────────────────────────── */
.badge--sm      { font-size: 10px; padding: 2px 6px; }
.badge--primary { background: var(--c-primary-light); color: var(--c-primary); }
.badge--success { background: var(--c-success-light); color: #166534; }
.badge--warning { background: var(--c-warning-light); color: #92400e; }
.badge--danger  { background: var(--c-error-light);   color: #991b1b; }
.badge--up      { background: var(--c-success-light); color: #16a34a; }
.badge--down    { background: var(--c-error-light);   color: #dc2626; }
.badge--flat    { background: var(--c-n100);           color: var(--c-n600); }
.badge--category{ background: var(--c-info-light);    color: #1e40af; }

/* ── Stat Card Colour Variants ───────────────────────────────── */
.stat-card-inner { display: flex; flex-direction: column; gap: var(--sp-2); }
.stat-meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }

.stat-card--green::before  { background: var(--c-success); }
.stat-card--red::before    { background: var(--c-error); }
.stat-card--amber::before  { background: var(--c-warning); }
.stat-card--blue::before   { background: var(--c-info); }
.stat-card--purple::before { background: #8b5cf6; }

/* ── Utility classes ─────────────────────────────────────────── */
.d-block    { display: block; }
.block      { display: block; }
.flex-1     { flex: 1; }
.flex-2     { flex: 2; }
.mb-0       { margin-bottom: 0 !important; }
.mb-6       { margin-bottom: var(--sp-6); }
.ml-1       { margin-left: var(--sp-1); }
.mx-2       { margin-left: var(--sp-2); margin-right: var(--sp-2); }
.p-0        { padding: 0 !important; }
.pct        { color: var(--c-text-muted); font-size: 13px; }
.text-danger  { color: var(--c-error); }
.text-link    { color: var(--c-primary); text-decoration: underline; cursor: pointer; }
/* Plain <button> + .text-link keeps OS button chrome; reset for inline actions (e.g. login). */
button.text-link {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text-muted);
  text-decoration: none;
  line-height: inherit;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
button.text-link:hover {
  color: var(--c-primary);
  text-decoration: underline;
}
button.text-link:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
.text-purple  { color: #7c3aed; }
.text-weight-500 { font-weight: 500; }
.text-weight-600 { font-weight: 600; }
.variance   { font-size: 13px; font-weight: 500; }

/* ── Button Extras ───────────────────────────────────────────── */
.btn-block  { width: 100%; display: flex; }
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary);
}
.btn-outline:hover { background: var(--c-primary-light); }

/* ── Card Extras ─────────────────────────────────────────────── */
.card-body  { padding: var(--sp-6); }
.card-stack { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ── Form Extras ─────────────────────────────────────────────── */
.form-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.form-row-inline { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.form-input--sm, .form-select--sm {
  padding: 7px var(--sp-3);
  font-size: 13px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-n200);
  background: var(--c-card);
  color: var(--c-text);
  outline: none;
}
.form-input--sm:focus, .form-select--sm:focus { border-color: var(--c-primary); }
.form-checkbox {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 14px; cursor: pointer;
}
.form-checkbox input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* ── Input with prefix/suffix ────────────────────────────────── */
.input-prefix-group, .input-suffix-group {
  display: flex; align-items: center;
  border: 1.5px solid var(--c-n200);
  border-radius: var(--r-lg);
  background: var(--c-card);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.input-prefix-group:focus-within, .input-suffix-group:focus-within { border-color: var(--c-primary); }
.input-prefix, .input-suffix {
  padding: 10px var(--sp-3);
  background: var(--c-n100);
  color: var(--c-text-muted);
  font-size: 14px; font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
}
.input-prefix-group .form-input,
.input-suffix-group .form-input {
  border: none; border-radius: 0; flex: 1;
}

/* ── Month navigation ────────────────────────────────────────── */
.month-nav { display: flex; align-items: center; gap: var(--sp-2); }
.month-nav-label { font-size: 15px; font-weight: 600; min-width: 120px; text-align: center; }

/* ── Expense transactions table ──────────────────────────────── */
/* Never use display:flex on <tr> — it breaks column alignment with <thead>. */
#expense-table thead th {
  padding: var(--sp-3) var(--sp-4);
  vertical-align: middle;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-n200);
}
#expense-table tbody tr.expense-row {
  display: table-row;
  transition: background var(--t-fast);
}
#expense-table tbody tr.expense-row td {
  padding: var(--sp-3) var(--sp-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--c-n100);
}
#expense-table tbody tr.expense-row:last-child td {
  border-bottom: none;
}
#expense-table tbody tr.expense-row:hover td {
  background: var(--c-n50);
}
/* Date + amount: keep on one line where possible */
#expense-table tbody tr.expense-row td:nth-child(3) {
  white-space: nowrap;
}
#expense-table td form {
  display: inline;
  margin: 0;
}
.expense-title { font-size: 14px; font-weight: 500; }

/* ── Goal Page ───────────────────────────────────────────────── */
.goals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-5); }
.goal-card-header { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.goal-card-title  { font-size: 15px; font-weight: 600; }
.goal-card-actions{ display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.goal-meta        { font-size: 12px; color: var(--c-text-faint); margin-top: 2px; }
.goal-deadline    { font-size: 12px; color: var(--c-text-muted); }
.goal-progress-wrap { margin: var(--sp-3) 0; }
.goal-pct-label   { display: flex; justify-content: space-between; font-size: 12px; color: var(--c-text-muted); margin-bottom: var(--sp-1); }
.goal-saved       { font-size: 13px; color: var(--c-text-muted); }
.goal-target      { font-size: 13px; color: var(--c-text-muted); }
.goal-monthly     { font-size: 13px; color: var(--c-text-muted); margin-top: var(--sp-2); }
.goal-mini { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-n100); }
.goal-mini:last-child { border-bottom: none; }
.goal-mini-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-1); }
.goal-mini-name   { font-size: 13px; font-weight: 600; }
.goal-mini-pct    { font-size: 12px; color: var(--c-primary); font-weight: 600; }
.goal-mini-amounts{ display: flex; justify-content: space-between; font-size: 11px; color: var(--c-text-faint); }
.goals-mini-list  { }

/* ── Debt Page ───────────────────────────────────────────────── */
.debt-cards-list  { display: flex; flex-direction: column; gap: var(--sp-4); }
.debt-card        { background: var(--c-card); border: 1px solid var(--c-n200); border-radius: var(--r-xl); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
.debt-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.debt-card-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2); }
.debt-card-actions{ display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.debt-amounts     { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin: var(--sp-3) 0; }
.debt-progress    { margin-top: var(--sp-3); }
.debt-progress-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--c-text-faint); margin-bottom: var(--sp-1); }

.debts-mini-list  { }
.debt-mini        { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-n100); }
.debt-mini:last-child { border-bottom: none; }
.debt-mini-header { display: flex; justify-content: space-between; align-items: center; }
.debt-mini-name   { font-size: 13px; font-weight: 600; }
.debt-mini-apr    { font-size: 11px; color: var(--c-error); font-weight: 600; }

/* ── Progress fill (named alias for .progress-bar) ───────────── */
.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c-primary), #3B82F6);
  transition: width 600ms ease;
}
.progress-fill--primary { background: linear-gradient(90deg, var(--c-primary), #3B82F6); }
.progress-fill--success { background: linear-gradient(90deg, var(--c-success), #86efac); }
.progress-fill--warning { background: linear-gradient(90deg, var(--c-warning), #fcd34d); }
.progress-fill--danger  { background: linear-gradient(90deg, var(--c-error), #fca5a5); }

.progress-bar--lg   { height: 12px; }
.progress-bar--thin { height: 4px; }

/* ── Health Score Panel ──────────────────────────────────────── */
.health-score-panel { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.health-ring-wrap   { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.health-ring        { }
.ring-track         { fill: none; stroke: var(--c-n200); stroke-width: 10; }
.ring-fill          { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 800ms ease; }
.ring-fill--green   { stroke: var(--c-success); }
.ring-fill--amber   { stroke: var(--c-warning); }
.ring-fill--red     { stroke: var(--c-error); }
.ring-score         { position: absolute; text-align: center; }
.ring-label         { font-size: 11px; color: var(--c-text-faint); font-weight: 500; }

.health-breakdown   { margin-top: var(--sp-4); width: 100%; }
.health-factor      { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-n100); }
.health-factor:last-child { border-bottom: none; }
.health-factor-name { font-size: 13px; color: var(--c-text-muted); flex: 1; }
.health-factor-bar  { flex: 2; height: 6px; background: var(--c-n100); border-radius: var(--r-full); overflow: hidden; }
.health-factor-fill { height: 100%; border-radius: var(--r-full); background: var(--c-success); }
.health-factor-val  { font-size: 13px; font-weight: 600; min-width: 36px; text-align: right; }

/* ── Dashboard allocation legend ─────────────────────────────── */
.alloc-row    { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-n100); }
.alloc-row:last-child { border-bottom: none; }
.alloc-legend { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.alloc-name   { font-size: 13px; flex: 1; color: var(--c-text-muted); }
.alloc-pct    { font-size: 13px; font-weight: 600; }

/* ── Category legend (expenses) ──────────────────────────────── */
.cat-legend     { display: flex; flex-direction: column; gap: var(--sp-1); }
.cat-legend-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; }
.cat-legend-name{ font-size: 13px; flex: 1; color: var(--c-text-muted); }
.cat-legend-val { font-size: 13px; font-weight: 600; }

/* ── Chart wrappers ──────────────────────────────────────────── */
.chart-wrap       { position: relative; width: 100%; }
.chart-wrap--sm   { max-height: 180px; }
.chart-wrap--md   { max-height: 240px; }
.chart-wrap--lg   { max-height: 320px; }
.chart-doughnut-layout { display: flex; align-items: center; gap: var(--sp-6); }

/* Asset allocation (investments): chart + single breakdown list */
.alloc-card .card-header {
  align-items: center;
}
.alloc-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-n700);
  background: var(--c-n100);
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--c-n200);
  white-space: nowrap;
}
.alloc-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding-bottom: var(--sp-2);
}
.invest-charts-grid .alloc-card-body {
  padding-bottom: var(--sp-4);
}
.alloc-chart-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.chart-wrap--alloc {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 220px;
  margin: 0 auto;
}
.alloc-breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-n200);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-card);
}
.alloc-breakdown-row {
  display: grid;
  grid-template-columns: 14px 1fr minmax(3.5rem, auto);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-n100);
  font-size: 13px;
}
.alloc-breakdown-row:last-child {
  border-bottom: none;
}
.alloc-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.alloc-breakdown-name {
  color: var(--c-text);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alloc-breakdown-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--c-text);
}

/* Expenses “By Category”: wider value column for “amount (%)” */
.alloc-breakdown--expense .alloc-breakdown-row {
  grid-template-columns: 14px 1fr minmax(10rem, auto);
}
.alloc-breakdown--expense .alloc-breakdown-pct .text-muted {
  font-weight: 500;
}

/* Dashboard Spending by Category: chart only on phones; chart + list row from tablet up */
.dash-spend-cat-split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
}
.dash-spend-cat-breakdown {
  display: none;
}
@media (min-width: 768px) {
  .dash-spend-cat-split {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-6);
  }
  /* Override .alloc-chart-stage { width: 100% } so the row doesn’t stack */
  .dash-spend-cat-split .dash-spend-cat-chart {
    flex: 0 0 auto;
    width: auto;
    max-width: 220px;
  }
  .dash-spend-cat-split .chart-wrap--alloc {
    margin: 0;
  }
  .dash-spend-cat-breakdown {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ── Metrics list ────────────────────────────────────────────── */
.corpus-dash-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-5);
}

/* Dashboard: Corpus Outlook locked (Basic plan) */
.corpus-dash-locked {
  text-align: center;
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.lock-icon--corpus-dash {
  width: 52px;
  height: 52px;
  font-size: 0;
  margin: 0 auto;
}
.corpus-dash-locked-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: var(--c-text);
}
.corpus-dash-locked-text {
  margin: 0;
  line-height: 1.45;
  max-width: 260px;
}
.metrics-list    { display: flex; flex-direction: column; gap: var(--sp-3); }
.metric-row      { display: flex; align-items: center; gap: var(--sp-3); }
.metric-label    { font-size: 13px; color: var(--c-text-muted); flex: 1; }
.metric-value    { font-size: 15px; font-weight: 700; }
.metric-highlight     { background: var(--c-primary-light); border-radius: var(--r-lg); padding: var(--sp-4); text-align: center; }
.metric-highlight-val { font-size: 28px; font-weight: 800; color: var(--c-primary); }

/* ── Insights ────────────────────────────────────────────────── */
.insight-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--c-n50);
  border: 1px solid var(--c-n200);
  font-size: 13px;
}
.insight-icon { flex-shrink: 0; }

/* ── Info rows (profile / settings) ─────────────────────────── */
.info-list  { display: flex; flex-direction: column; gap: 0; }
.info-row   { display: flex; gap: var(--sp-6); padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-n100); }
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 13px; color: var(--c-text-muted); min-width: 160px; }
.info-value { font-size: 14px; font-weight: 500; }

/* ── Settings rows ───────────────────────────────────────────── */
.settings-list    { display: flex; flex-direction: column; gap: 0; }
.settings-row     { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-n100); }
.settings-row:last-child { border-bottom: none; }
.settings-row-info { flex: 1; }
.settings-row-label{ font-size: 14px; font-weight: 600; margin-bottom: 2px; }

/* ── Toggle switch ───────────────────────────────────────────── */
.toggle { position: relative; width: 44px; height: 24px; cursor: pointer; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--c-n300);
  border-radius: var(--r-full);
  transition: background var(--t-fast);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--t-fast);
  box-shadow: var(--shadow-sm);
}
.toggle input:checked + .toggle-slider { background: var(--c-success); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ── Modal dialog aliases ────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.5);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
  backdrop-filter: blur(2px);
}
.modal-dialog    { background: var(--c-card); border-radius: var(--r-2xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; }
.modal-dialog--sm{ max-width: 400px; }
.modal-dialog--auth-narrow { max-width: 420px; }
.modal-dialog--lg{ max-width: min(960px, 96vw); width: 100%; }

/* ── Auth layout (login / register) ────────────────────────────
   Grid must live on .auth-layout (two columns), not on <body>.
   Previously .auth-body was a 2-col grid while children were wrapped
   in .auth-layout — the second column became the <script> tag. */
.auth-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--c-bg);
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  background: var(--c-card);
}
.auth-brand {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.auth-brand-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--c-primary);
  padding: clamp(var(--sp-8), 5vw, var(--sp-12));
  color: #fff;
}
/* Logo row: icon + wordmark (do not constrain both to a 56×56 box) */
.auth-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.auth-logo svg {
  flex-shrink: 0;
  border-radius: var(--r-xl);
}
.auth-brand-name {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.auth-brand-copy { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.6; }
.auth-brand-copy h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: var(--sp-4);
}
.auth-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-8);
}
/* Stack title + subtext (spans default to inline and were sitting on one line) */
.auth-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  flex: 1 1 0;
  min-width: min(140px, 100%);
}
.auth-stat-value {
  display: block;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.auth-stat-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}
.auth-features   { margin-top: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
.auth-feature strong { display: block; color: #fff; margin-bottom: 2px; }
.auth-feature span   { display: block; font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.4; }
.auth-feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.auth-feature-icon svg { width: 18px; height: 18px; }
.auth-form-panel {
  background: var(--c-card);
  padding: clamp(var(--sp-8), 5vw, var(--sp-12));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}
.auth-form-inner {
  width: 100%;
  max-width: 400px;
}
.auth-form       { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-form--readonly-pending .form-input,
.auth-form--readonly-pending .form-select {
  background: var(--c-n50);
  color: var(--c-text-muted);
  cursor: not-allowed;
}
.auth-form-header { margin-bottom: var(--sp-8); }
.auth-form-header h1,
.auth-form-header h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.auth-form-header p  { font-size: 14px; color: var(--c-text-muted); margin-top: var(--sp-2); }
.auth-switch     { text-align: center; margin-top: var(--sp-5); font-size: 14px; color: var(--c-text-muted); }

/* ── Profile ─────────────────────────────────────────────────── */
.profile-avatar-row { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--c-primary), #6366f1);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}

/* ── Onboarding ────────────────────────────────────────────────
   Layout must be a single column. Default flex-direction is row,
   which placed header, stepper, and card side-by-side and caused overlap. */
.onboarding-layout {
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-mid) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--sp-8) var(--sp-6);
  gap: var(--sp-6);
  box-sizing: border-box;
}
.onboarding-layout > .onboarding-header,
.onboarding-layout > .flash-container,
.onboarding-layout > .ob-steps,
.onboarding-layout > .onboarding-card {
  width: 100%;
  max-width: 520px;
}
.onboarding-layout > .onboarding-header {
  background: var(--c-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5) var(--sp-6);
  border: none;
  border-bottom: none;
  flex-shrink: 0;
}
.onboarding-layout > .onboarding-header .auth-logo {
  margin-bottom: 0;
}
.onboarding-layout > .onboarding-header .onboarding-progress-bar {
  margin-bottom: 0;
  margin-top: var(--sp-4);
}
.onboarding-card {
  background: var(--c-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: visible;
  padding: var(--sp-8) var(--sp-8);
  flex-shrink: 0;
}
.onboarding-progress-bar {
  height: 4px;
  background: var(--c-n200);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.ob-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, var(--c-primary));
  border-radius: var(--r-full);
  transition: width 400ms ease;
}
/* Horizontal stepper: dot — line — dot — line — … */
.ob-steps {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  flex-shrink: 0;
}
.ob-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  padding: 0;
  border: none;
  text-align: center;
  max-width: 4.5rem;
}
.ob-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-n200);
  color: var(--c-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.ob-step.active .ob-step-dot {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}
.ob-step.done .ob-step-dot {
  background: var(--c-success);
  color: #fff;
}
.ob-step-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.2;
}
.ob-step.active .ob-step-label { color: #fff; font-weight: 700; }
.ob-step.done .ob-step-label { color: rgba(255, 255, 255, 0.9); }
.ob-step-connector {
  flex: 1 1 0;
  min-width: var(--sp-2);
  height: 2px;
  background: var(--c-n300);
  border-radius: var(--r-full);
  margin-top: 15px;
  align-self: flex-start;
  opacity: 0.9;
}
.ob-step-connector.done {
  background: var(--c-success);
  opacity: 1;
}
.ob-step-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-primary-light);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ob-step-icon svg {
  width: 22px;
  height: 22px;
}
/* Matches input prefix: decorative circle uses same symbol as country/currency, not a fixed $. */
.ob-step-icon--currency {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.ob-step-icon--success {
  background: var(--c-success-light);
  color: #166534;
}
.onboarding-layout .ob-step-content {
  flex: unset;
}
.ob-step-content > .ob-step-icon {
  margin-bottom: var(--sp-5);
}
.ob-step-content > h2 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--sp-3);
  color: var(--c-text);
}
.ob-step-content > .ob-step-desc {
  font-size: 14px;
  color: var(--c-text-muted);
  line-height: 1.55;
  margin-bottom: var(--sp-6);
}
.ob-step-content form .form-group:first-of-type {
  margin-top: 0;
}
.ob-actions       { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.ob-actions--center { justify-content: center; }
.ob-expense-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }
.ob-expense-full  { grid-column: 1 / -1; }
.ob-review-grid   { display: flex; flex-direction: column; gap: var(--sp-3); }
.ob-review-card   { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-n200); border-radius: var(--r-lg); }
.ob-review-label  { font-size: 13px; color: var(--c-text-muted); }
.ob-review-value  { font-size: 15px; font-weight: 700; }

/* ── Retirement / Investments ────────────────────────────────── */
.invest-retirement-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: stretch;
}
.invest-retirement-planner-card,
.invest-retirement-summary-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.invest-retirement-planner-card .card-body,
.invest-retirement-summary-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1023px) {
  .invest-retirement-layout {
    grid-template-columns: 1fr;
  }
}

.ret-projection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.ret-stat       { text-align: center; padding: var(--sp-4); background: var(--c-n50); border-radius: var(--r-lg); }
.ret-stat-label { font-size: 12px; color: var(--c-text-faint); margin-bottom: var(--sp-1); }
.ret-stat-value { font-size: 22px; font-weight: 700; }
.ret-insights   { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-8); }

/* ── Debt Strategy ───────────────────────────────────────────── */
.strategy       { }
.strategy-tabs  { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.payoff-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-5); }
.payoff-stat      { text-align: center; padding: var(--sp-4); background: var(--c-n50); border-radius: var(--r-lg); }
.payoff-stat-label{ font-size: 12px; color: var(--c-text-faint); margin-bottom: var(--sp-1); }
.payoff-stat-value{ font-size: 20px; font-weight: 700; }
.payoff-order   { display: flex; flex-direction: column; gap: var(--sp-3); }
.step           { display: flex; gap: var(--sp-3); align-items: flex-start; }

/* ── Emergency Fund targets ──────────────────────────────────── */
.ef-targets  { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.ef-target   { background: var(--c-n50); border: 1px solid var(--c-n200); border-radius: var(--r-lg); padding: var(--sp-4); text-align: center; }
.ef-months   { font-size: 22px; font-weight: 800; color: var(--c-primary); }
.ef-amount   { font-size: 16px; font-weight: 700; margin-top: var(--sp-1); }
.ef-current  { font-size: 12px; color: var(--c-text-faint); margin-top: 2px; }

/* ── Accounts list ───────────────────────────────────────────── */
.accounts-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.account-item  { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-n200); border-radius: var(--r-lg); }
.account-icon  { width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--c-primary-light); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.account-info  { flex: 1; }
.account-name  { font-size: 14px; font-weight: 600; }

/* ── Tables ──────────────────────────────────────────────────── */
.table          { width: 100%; border-collapse: collapse; }
.table-container{ overflow-x: auto; }
.table-sm th, .table-sm td { padding: var(--sp-2) var(--sp-3); font-size: 13px; }

/* ── Empty state variants ────────────────────────────────────── */
.empty-state--sm   { padding: var(--sp-6); }
.empty-state--full { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ── Lock overlay (feature gate) ─────────────────────────────── */
.lock-icon {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-primary-light);
  color: var(--c-primary);
  font-size: 28px;
  margin: 0 auto var(--sp-4);
}
/* Non–feature-gate .locked: dim + block interaction */
.locked:not(.feature-gate) {
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}
.feature-gate { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 220px; }
/* Gate shell stays interactive so “Upgrade” links work; only the blurred preview is inert */
.feature-gate.locked {
  opacity: 1;
  pointer-events: auto;
  user-select: none;
}
.feature-gate.locked .feature-gate-blur {
  pointer-events: none;
  user-select: none;
}
.feature-gate.locked .feature-gate-overlay {
  pointer-events: auto;
}
.feature-gate-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(2px); z-index: 10;
}
.feature-gate-content { text-align: center; padding: var(--sp-8); max-width: 340px; }
.feature-gate-content h4 { margin: 0 0 var(--sp-2); font-size: 16px; font-weight: 700; color: var(--c-text); }
.feature-gate-content p { margin: 0 0 var(--sp-5); font-size: 14px; line-height: 1.5; color: var(--c-text-muted); }
.feature-gate-blur    { filter: blur(4px); pointer-events: none; user-select: none; opacity: 0.45; padding: var(--sp-6); }

/* Laptop: retirement planner promo gate — enough height for lock + copy + CTA */
@media (min-width: 768px) {
  .feature-gate--retirement-promo {
    min-height: 300px;
  }
  .invest-retirement-gate-card .feature-gate--retirement-promo {
    min-height: 320px;
  }
  .feature-gate--retirement-promo .feature-gate-overlay {
    padding: var(--sp-6) var(--sp-4);
    box-sizing: border-box;
  }
  .feature-gate--retirement-promo .feature-gate-content {
    padding: var(--sp-8) var(--sp-6) var(--sp-7);
    max-width: 380px;
  }
}

/* Mobile: AI stock gate — hide tall fake preview; show compact lock + message only */
@media (max-width: 767px) {
  .card--invest-ai .feature-gate {
    min-height: 0;
    overflow: visible;
  }
  .card--invest-ai .feature-gate-blur {
    display: none;
  }
  .card--invest-ai .feature-gate-overlay {
    position: relative;
    inset: auto;
    background: transparent;
    backdrop-filter: none;
    padding: var(--sp-4) var(--sp-3) var(--sp-5);
    align-items: flex-start;
  }
  .card--invest-ai .feature-gate-content {
    padding: 0;
    max-width: none;
    width: 100%;
  }
  .card--invest-ai .feature-gate-content p {
    margin-bottom: var(--sp-4);
  }
}

/* ── AI stock panel ──────────────────────────────────────────── */
.ai-stock-panel { }

/* ── Responsive additions ────────────────────────────────────── */
/*
 * Tablet / small laptop (769px–1280px): slightly narrower expanded rail.
 * Collapse control stays visible; collapsed state uses the same 72px icon rail as desktop.
 */
@media (min-width: 769px) and (max-width: 1280px) {
  :root {
    --sidebar-w: 220px;
  }
  .app-main {
    margin-left: var(--sidebar-w);
  }
  .app-sidebar:not(.collapsed) .nav-item {
    justify-content: flex-start;
  }
  .app-sidebar:not(.collapsed) .sidebar-user {
    justify-content: flex-start;
    gap: var(--sp-3);
  }
  .app-sidebar:not(.collapsed) .sidebar-logo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4);
    gap: var(--sp-2);
  }
  .app-sidebar:not(.collapsed) .sidebar-logo-link {
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
  }
}

/* iPad portrait: single column for KPI rows so cards use full width */
@media (min-width: 769px) and (max-width: 900px) and (orientation: portrait) {
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  /* Off-canvas nav: main full-width; sidebar slides in from left */
  :root {
    --sidebar-w: 0px;
  }
  .app-main {
    margin-left: 0 !important;
  }
  .app-sidebar {
    width: min(300px, 88vw);
    transform: translate3d(-100%, 0, 0);
    transition: transform var(--t-base);
    will-change: transform;
    box-shadow: none;
  }
  .app-sidebar.is-open {
    transform: translate3d(0, 0, 0);
    box-shadow: 8px 0 40px rgba(15, 23, 42, 0.2);
  }
  .topbar-menu-btn {
    display: inline-flex;
  }
  /* Drawer shows full labels (overrides narrow-rail rules from 1024px) */
  .app-sidebar .logo-text {
    display: inline !important;
  }
  .app-sidebar .nav-item > span {
    display: inline !important;
  }
  .app-sidebar .nav-section-label {
    display: block !important;
  }
  .app-sidebar .sidebar-user .user-info span {
    display: block !important;
  }
  .app-sidebar .nav-item {
    justify-content: flex-start;
  }
  .app-sidebar .sidebar-logo {
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-4);
  }
  .app-sidebar .sidebar-logo-link {
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
  }
  .app-sidebar .sidebar-user {
    justify-content: flex-start;
    gap: var(--sp-3);
  }
  .app-sidebar .user-info {
    display: flex !important;
  }
  .app-topbar {
    min-height: 52px;
    height: auto;
    padding: var(--sp-2) var(--sp-3);
    align-items: flex-start;
    gap: var(--sp-2);
    flex-wrap: wrap;
  }
  /* Second row: actions full-width so month nav / buttons never overlap the menu button */
  .topbar-right {
    flex: 1 1 100%;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
  }
  .app-topbar .page-title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .app-topbar .topbar-subtitle {
    font-size: 11px;
    line-height: 1.25;
    margin-top: 2px;
    color: var(--c-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .topbar-left {
    align-items: center;
    gap: var(--sp-2);
  }
  .topbar-right .btn-sm {
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Fill viewport with white panel (form column); avoid min-height:auto gap above/below */
  .auth-layout {
    grid-template-columns: 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    align-content: stretch;
  }
  .auth-brand { display: none; }
  .auth-form-panel {
    flex: 1 1 auto;
    min-height: 100vh;
    min-height: 100dvh;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
  }

  /* Register: balanced spacing — readable, fills the panel, still compact vs desktop */
  .auth-body--register .auth-form-panel {
    padding: var(--sp-5) var(--sp-5);
    padding-top: max(var(--sp-5), env(safe-area-inset-top, 0px));
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom, 0px));
    justify-content: center;
  }
  .auth-body--register .auth-form-inner {
    max-width: 100%;
  }
  .auth-body--register .auth-form-header {
    margin-bottom: var(--sp-5);
  }
  .auth-body--register .auth-form-header h1 {
    font-size: 1.5rem;
    line-height: 1.25;
  }
  .auth-body--register .auth-form-header p {
    font-size: 13px;
    margin-top: var(--sp-2);
    line-height: 1.45;
  }
  .auth-body--register .auth-form {
    gap: var(--sp-3);
  }
  .auth-body--register .auth-form .form-group {
    margin-bottom: 0;
  }
  .auth-body--register .auth-form .form-row {
    gap: var(--sp-3);
  }
  .auth-body--register .auth-form .form-label {
    font-size: 13px;
    margin-bottom: var(--sp-2);
  }
  .auth-body--register .auth-form .form-input,
  .auth-body--register .auth-form .form-select {
    padding: 9px var(--sp-4);
    font-size: 16px; /* iOS: avoid zoom on focus */
  }
  .auth-body--register .auth-form .btn-block {
    padding: 12px var(--sp-5);
    margin-top: var(--sp-1);
  }
  .auth-body--register .auth-switch {
    margin-top: var(--sp-4);
    font-size: 13px;
    line-height: 1.45;
  }

  .onboarding-layout {
    padding: var(--sp-5) var(--sp-4);
    gap: var(--sp-5);
  }
  .onboarding-layout > .onboarding-header,
  .onboarding-layout > .flash-container,
  .onboarding-layout > .ob-steps,
  .onboarding-layout > .onboarding-card {
    max-width: 100%;
  }
  .onboarding-card {
    padding: var(--sp-6) var(--sp-5);
  }
  .ob-step { max-width: 3.25rem; }
  .ob-step-label { font-size: 10px; }
  .ret-projection-grid { grid-template-columns: 1fr; }
  .payoff-summary { grid-template-columns: 1fr; }
  .ef-targets { grid-template-columns: 1fr; }

  /* ── Mobile: denser cards, grids → one column ──
     Do NOT use overflow-x: hidden on .app-main / .app-content — it clips card
     box-shadows and rounded corners (right edge looks “cut”). Contain width with min-width: 0. */
  html {
    overflow-x: hidden;
  }
  .app-main {
    max-width: 100%;
    min-width: 0;
  }
  .app-content {
    padding: var(--sp-3);
    padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom, 0px));
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Grid/flex children default min-width:auto causes horizontal overflow on narrow screens */
  .grid-2-1 > *,
  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > *,
  .grid-3-2 > *,
  .grid-1-2 > *,
  .grid-dashboard-metrics > * {
    min-width: 0;
  }
  .card {
    padding: var(--sp-4);
    border-radius: var(--r-lg);
    min-width: 0;
  }
  .card-header {
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    align-items: flex-start;
  }
  .card-title {
    font-size: 14px;
    line-height: 1.3;
    min-width: 0;
    flex: 1 1 auto;
  }
  .card-body:not(.p-0) {
    padding: var(--sp-4);
  }
  .stat-card {
    min-height: 0;
    max-height: none;
    padding: var(--sp-3) var(--sp-4);
    min-width: 0;
  }
  .stat-card-inner {
    min-width: 0;
    padding-right: 2.75rem;
  }
  .stat-card--with-deco .stat-card-inner {
    padding-right: 2.75rem;
  }
  .stat-icon {
    width: 40px;
    height: 40px;
    right: var(--sp-3);
    opacity: 0.09;
  }
  .stat-label {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .stat-meta {
    min-width: 0;
  }
  .stat-badge,
  .badge {
    max-width: 100%;
  }
  .stat-meta .badge {
    white-space: normal;
    line-height: 1.35;
    text-align: left;
    overflow: visible;
    text-overflow: unset;
  }
  .grid-3 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }
  .grid-4 {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }
  .grid-2,
  .grid-2-1,
  .grid-3-2,
  .grid-1-2,
  .grid-dashboard-metrics {
    gap: var(--sp-3);
  }
  .mb-6 {
    margin-bottom: var(--sp-4) !important;
  }
  .card-stack {
    gap: var(--sp-3);
    min-width: 0;
    max-width: 100%;
  }
  .alloc-badge {
    font-size: 11px;
    padding: 4px 10px;
  }
  .alloc-breakdown-row {
    padding: var(--sp-2) var(--sp-3);
    font-size: 12px;
    gap: var(--sp-2);
  }
  .alloc-breakdown--expense .alloc-breakdown-row {
    grid-template-columns: 12px 1fr minmax(0, 1fr);
  }
  .alloc-breakdown-pct {
    font-size: 12px;
    white-space: normal;
    text-align: right;
    word-break: break-word;
  }
  .topbar-actions-row {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
    max-width: 100%;
  }
  .month-nav-label {
    font-size: 12px;
    min-width: 0;
    flex: 1;
    text-align: center;
  }
  .header-actions {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
  }
  .header-actions .form-select {
    max-width: 100%;
    min-width: 0;
  }
  .goals-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }
  .chart-wrap--projection {
    min-height: 220px;
  }
  .chart-wrap--lg {
    max-height: 260px;
  }
  .chart-wrap--md {
    max-height: 200px;
  }
  .chart-wrap--alloc {
    max-width: 200px;
    height: 200px;
  }
  .table {
    font-size: 13px;
  }
  .table th,
  .table td {
    padding: var(--sp-2) var(--sp-3);
  }
  .table-container {
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .invest-kpi-grid .stat-card {
    padding: var(--sp-3) var(--sp-4);
  }
  .card-header-right {
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: flex-end;
    max-width: 100%;
  }

  /* Expenses / debts: tables use horizontal scroll inside card, not clipped */
  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .debt-card-header {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .debt-card-badges {
    width: 100%;
    justify-content: flex-start;
  }
  .debt-amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
  }
  .debt-card-actions {
    flex-wrap: wrap;
    gap: var(--sp-2);
  }
  .debt-card-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  /* Debt AI recommendation card */
  .card--debt-ai .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }
  .card--debt-ai .card-header-left {
    flex-wrap: wrap;
    min-width: 0;
  }
  .debt-ai-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    width: 100%;
    justify-content: flex-start;
  }
  .debt-ai-header-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  .debt-ai-footer-form {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: var(--sp-3) !important;
  }
  .debt-ai-footer-form .form-group {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 0;
  }
  .debt-ai-footer-form .btn {
    width: 100%;
  }

  /* Investments — AI stock panel */
  .card--invest-ai .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }
  .card--invest-ai .card-header-left,
  .card--invest-ai .card-header-right {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    min-width: 0;
  }
  .card--invest-ai .card-header-right {
    justify-content: flex-start;
  }
  .ai-stocks-form .flex.items-center.gap-3 {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
    gap: var(--sp-3) !important;
  }
  .ai-stocks-form .form-group {
    width: 100%;
    margin-bottom: 0;
  }
  .ai-stocks-form .form-actions--inline {
    align-self: stretch;
    width: 100%;
  }
  .ai-stocks-form .form-actions--inline .btn {
    width: 100%;
    justify-content: center;
  }
  .stock-categories-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .stock-cat-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }
  .stock-cat-meta {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
  }
  .stock-category-card {
    min-width: 0;
    padding: var(--sp-3);
  }
  .stock-pick-row {
    min-width: 0;
  }
  /* Debt KPI: strategy dropdown fits narrow stat cards */
  select.form-select--stat {
    font-size: 15px !important;
    max-width: 100%;
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Scrollable card content — fixed-height lists inside dashboard/page cards
   ══════════════════════════════════════════════════════════════════════════════ */

/* Dashboard mini-lists: cap height and scroll */
.goals-mini-list,
.debts-mini-list {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-n300) transparent;
}
.goals-mini-list::-webkit-scrollbar,
.debts-mini-list::-webkit-scrollbar { width: 4px; }
.goals-mini-list::-webkit-scrollbar-thumb,
.debts-mini-list::-webkit-scrollbar-thumb { background: var(--c-n300); border-radius: 4px; }

/* Expenses table inside card */
.expense-list-scroll {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-n300) transparent;
}
.expense-list-scroll::-webkit-scrollbar { width: 4px; }
.expense-list-scroll::-webkit-scrollbar-thumb { background: var(--c-n300); border-radius: 4px; }

/* Investments allocation list */
.alloc-scroll {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-n300) transparent;
}

/* Debt cards list — capped so page doesn't grow unboundedly */
.debt-cards-list {
  max-height: none; /* full height, but inner card body scrolls */
}
.debt-card-body-scroll {
  max-height: 160px;
  overflow-y: auto;
}

/* Goals grid — cap grid height and scroll */
.goals-grid-scroll {
  max-height: 640px;
  overflow-y: auto;
  padding-right: var(--sp-2);
  scrollbar-width: thin;
  scrollbar-color: var(--c-n300) transparent;
}
.goals-grid-scroll::-webkit-scrollbar { width: 4px; }
.goals-grid-scroll::-webkit-scrollbar-thumb { background: var(--c-n300); border-radius: 4px; }

/* Stat card — fixed band on desktop; mobile uses auto height (see max-width: 768px rules) */
@media (min-width: 769px) {
  .stat-card {
    min-height: 120px;
    max-height: 160px;
  }
}

/* Insight items scroll */
.ret-insights {
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Dashboard: constrain card heights consistently */
.card {
  min-height: unset;
  overflow: visible;
}
/* Avoid clipping table edges / shadows (was overflow:hidden → “cut” boxes on mobile) */
.card .card-body {
  overflow: visible;
}
.card > .card-body.p-0 > .table-container {
  width: 100%;
  max-width: 100%;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* Payoff order list */
.payoff-order {
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-n300) transparent;
  padding-right: var(--sp-2);
}

/* Metrics list */
.metrics-list {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Accounts list */
.accounts-list {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Stock picks list per category */
.stock-picks-list {
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-n300) transparent;
}

/* ── Expense table scrollable container ───────────────────────────────────── */
/* Inside the expense card, constrain height so page doesn't grow infinitely */
.card .table-container {
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-n300) transparent;
}
.card .table-container::-webkit-scrollbar { width: 4px; }
.card .table-container::-webkit-scrollbar-thumb { background: var(--c-n300); border-radius: 4px; }

/* Keep thead sticky inside scrollable table */
.card .table-container thead th {
  position: sticky;
  top: 0;
  background: var(--c-card);
  z-index: 1;
}

/* ── Oops / error page (sad teddy) ─────────────────────────────────────────── */
.oops-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(165deg, var(--c-n100) 0%, var(--c-n50) 45%, #eef0ff 100%);
  font-family: "DM Sans", system-ui, sans-serif;
}
.oops-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  box-sizing: border-box;
}
.oops-card {
  width: 100%;
  max-width: 420px;
  background: var(--c-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--sp-10) var(--sp-8);
  text-align: center;
  border: 1px solid var(--c-n200);
}
.oops-bear {
  margin: 0 auto var(--sp-5);
  filter: drop-shadow(0 8px 20px rgba(1, 1, 75, 0.08));
}
.oops-title {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
}
.oops-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0 0 var(--sp-5);
}
.oops-hint {
  font-size: 13px;
  line-height: 1.45;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-5);
}
.oops-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}
@media (max-width: 480px) {
  .oops-actions .btn { flex: 1 1 auto; min-width: 6rem; }
}