/* ═══════════════════════════════════════════
   FlowVista — Main Styles
   ═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ═══════════════════════════════════════════
   DESIGN TOKENS
   Color Semantics (v4 — strict):
   green  = money IN / assets / positive change
   red    = money OUT / liabilities / overdue
   amber  = upcoming / warning / attention needed
   blue   = neutral transfers between own accounts
   purple = investments (TFSA / RRSP / brokerage)
   ═══════════════════════════════════════════ */
:root, [data-theme="light"] {
  --surface:        #f6f8fb;
  --surface-low:    #eef1f6;
  --surface-card:   #ffffff;
  --surface-hover:  #f0fdf7;
  --on-surface:     #0d1117;
  --on-surface-sec: #4b5563;
  --on-surface-muted: #9ca3af;
  --border:         rgba(0,0,0,0.07);

  /* Primary brand */
  --primary:        #059669;
  --primary-dark:   #047857;
  --primary-light:  #ecfdf5;
  --primary-glow:   rgba(5,150,105,0.06);
  --on-primary:     #ffffff;

  /* Semantic — Income / Assets / Positive */
  --green:          #059669;
  --green-bg:       rgba(5,150,105,0.09);
  --green-text:     #047857;

  /* Semantic — Expenses / Liabilities / Overdue */
  --red:            #dc2626;
  --red-bg:         rgba(220,38,38,0.08);
  --red-text:       #b91c1c;

  /* Semantic — Upcoming / Warning */
  --amber:          #d97706;
  --amber-bg:       rgba(217,119,6,0.09);
  --amber-text:     #b45309;

  /* Semantic — Neutral transfers / Scheduled */
  --blue:           #2563eb;
  --blue-bg:        rgba(37,99,235,0.08);
  --blue-text:      #1d4ed8;

  /* Semantic — Investments */
  --purple:         #7c3aed;
  --purple-bg:      rgba(124,58,237,0.08);
  --purple-text:    #6d28d9;

  --shadow-sm:      0 1px 3px rgba(13,17,23,0.05), 0 4px 16px -2px rgba(13,17,23,0.04);
  --shadow-md:      0 2px 8px rgba(13,17,23,0.07), 0 12px 32px -4px rgba(13,17,23,0.06);
  --topbar-bg:      rgba(255,255,255,0.9);
  --chart-text:     #6b7280;
  --chart-grid:     rgba(0,0,0,0.05);
}

[data-theme="dark"] {
  --surface:        #0b0f1a;
  --surface-low:    #111827;
  --surface-card:   #1a2035;
  --surface-hover:  #1e2d3d;
  --on-surface:     #f3f4f6;
  --on-surface-sec: #9ca3af;
  --on-surface-muted: #6b7280;
  --border:         rgba(255,255,255,0.07);
  --primary:        #34d399;
  --primary-dark:   #10b981;
  --primary-light:  rgba(52,211,153,0.09);
  --primary-glow:   rgba(52,211,153,0.05);
  --on-primary:     #0b0f1a;
  --green:          #34d399;
  --green-bg:       rgba(52,211,153,0.11);
  --green-text:     #34d399;
  --red:            #f87171;
  --red-bg:         rgba(248,113,113,0.11);
  --red-text:       #f87171;
  --amber:          #fbbf24;
  --amber-bg:       rgba(251,191,36,0.11);
  --amber-text:     #fbbf24;
  --blue:           #60a5fa;
  --blue-bg:        rgba(96,165,250,0.11);
  --blue-text:      #60a5fa;
  --purple:         #a78bfa;
  --purple-bg:      rgba(167,139,250,0.11);
  --purple-text:    #a78bfa;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.25), 0 4px 16px -2px rgba(0,0,0,0.2);
  --shadow-md:      0 2px 8px rgba(0,0,0,0.3), 0 12px 32px -4px rgba(0,0,0,0.25);
  --topbar-bg:      rgba(11,15,26,0.9);
  --chart-text:     #9ca3af;
  --chart-grid:     rgba(255,255,255,0.06);
}

/* System preference fallback — prevents flash before JS sets data-theme */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --surface:#0b0f1a;--surface-low:#111827;--surface-card:#1a2035;--surface-hover:#1e2d3d;
    --on-surface:#f3f4f6;--on-surface-sec:#9ca3af;--on-surface-muted:#6b7280;
    --border:rgba(255,255,255,0.07);--primary:#34d399;--primary-dark:#10b981;
    --primary-light:rgba(52,211,153,0.09);--primary-glow:rgba(52,211,153,0.05);
    --on-primary:#0b0f1a;
  }
}

/* ─── Reduced motion (WCAG 2.3.3) ─── */
/* Users who set prefers-reduced-motion: reduce get near-instant transitions
   and a single animation cycle. We don't set duration to 0 — some logic
   depends on transitionend firing, so use 0.01ms to keep the event flow. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Reset ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--surface);
  color: var(--on-surface);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
  font-size: 14px;
  line-height: 1.5;
}
h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; }
.mono { font-family: 'IBM Plex Mono', monospace; }
button { font-family: 'Inter', sans-serif; }
input, select { font-family: 'Inter', sans-serif; }

/* ═══ LAYOUT ═══ */
.sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 240px;
  background: var(--surface-card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
  z-index: 100;
  transition: background 0.3s, border-color 0.3s;
}

.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border);
}
.logo-mark {
  width: 34px; height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}
.sidebar-logo h1 { font-size: 16px; font-weight: 700; letter-spacing: -0.3px; }
.logo-tagline { font-size: 10px; color: var(--on-surface-muted); letter-spacing: 0.5px; }

/* Net worth pill in sidebar */
.nw-pill {
  margin: 12px 20px;
  background: var(--surface-low);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
}
.nw-pill-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--on-surface-muted); margin-bottom: 5px; }
.nw-pill-val { font-family: 'IBM Plex Mono'; font-size: 19px; font-weight: 700; letter-spacing: -0.5px; }
.nw-pill-sub { font-size: 11px; color: var(--green-text); margin-top: 3px; font-weight: 500; }

/* Nav */
.sidebar-nav { padding: 8px 12px; flex: 1; overflow-y: auto; }
.nav-section-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--on-surface-muted);
  padding: 12px 8px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  cursor: pointer; transition: all 0.18s;
  font-size: 13px; font-weight: 500;
  color: var(--on-surface-sec);
  margin-bottom: 1px;
  position: relative;
}
.nav-item:hover { background: var(--primary-glow); color: var(--on-surface); }
.nav-item.active { background: var(--primary-glow); color: var(--primary); font-weight: 600; }
.nav-item .ni-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-badge {
  margin-left: auto;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 20px;
}
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 12px 12px 16px;
}
.theme-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  font-size: 13px; color: var(--on-surface-sec); transition: background 0.18s;
}
.theme-toggle:hover { background: var(--primary-glow); }
.toggle-track {
  width: 36px; height: 20px;
  background: var(--surface-low); border-radius: 10px;
  position: relative; border: 1px solid var(--border);
  transition: background 0.3s; flex-shrink: 0;
}
.toggle-track::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--on-surface-muted); transition: all 0.3s;
}
[data-theme="dark"] .toggle-track { background: var(--primary); border-color: var(--primary); }
[data-theme="dark"] .toggle-track::after { left: 19px; background: var(--on-primary); }

/* Main content */
.main { margin-left: 240px; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--topbar-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 14px 36px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background 0.3s;
}
.topbar-left h2 { font-size: 17px; font-weight: 600; }
.topbar-left p { font-size: 11px; color: var(--on-surface-muted); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.btn {
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--on-surface-sec);
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.18s;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--on-primary); border: none;
}
.btn-primary:hover { opacity: 0.9; }
.avatar {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--on-primary);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ═══ AVATAR DROPDOWN MENU ═══ */
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface-card); border-radius: 12px; padding: 6px;
  display: none; flex-direction: column; gap: 2px; z-index: 300;
  box-shadow: var(--shadow-md); min-width: 220px; border: 1px solid var(--border);
}
.avatar-menu.open { display: flex; animation: fadeUp 0.18s ease; }
.am-header {
  padding: 10px 12px 8px; font-size: 12px; color: var(--on-surface-muted);
  border-bottom: 1px solid var(--border); margin-bottom: 2px;
  line-height: 1.4;
}
.am-header strong { display: block; font-size: 13px; font-weight: 600; color: var(--on-surface); }
.am-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--on-surface-sec);
  cursor: pointer; transition: all 0.15s;
}
.am-item:hover { background: var(--primary-glow); color: var(--on-surface); }
.am-icon { font-size: 15px; width: 20px; text-align: center; }
.am-divider { height: 1px; background: var(--border); margin: 4px 6px; }
.am-signout { color: var(--red); }
.am-signout:hover { background: rgba(239,68,68,0.08); color: var(--red); }
.am-mobile-only { display: none; }
@media (max-width: 820px) { .am-mobile-only { display: flex; } }

/* ═══ PAGES ═══ */
.page { display: none; padding: 32px 36px 80px; max-width: 1180px; }
.page.active { display: block; animation: fadeUp 0.28s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ─── Section structure ─── */
.section { margin-bottom: 36px; }
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: -0.1px;
  color: var(--on-surface);
}
.section-action { font-size: 12px; font-weight: 500; color: var(--primary); cursor: pointer; }
.section-action:hover { opacity: 0.7; }

/* ── Collapsible card toggle ── */
.card-collapse-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: var(--surface-low); cursor: pointer; flex-shrink: 0;
  color: var(--on-surface-sec); transition: background 0.15s, transform 0.2s;
}
.card-collapse-btn:hover { background: var(--primary-light); color: var(--primary); }
.card-collapse-btn.collapsed { transform: rotate(-90deg); }
.card-collapse-body {
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease;
  max-height: 4000px; opacity: 1;
}
.card-collapse-body.collapsed { max-height: 0 !important; opacity: 0; }

/* ═══ HERO — CASHFLOW (v4 lead element) ═══ */
.cf-hero {
  background: var(--surface-card);
  border-radius: 16px;
  padding: 32px 36px;
  box-shadow: var(--shadow-md);
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}
.cf-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: 16px 16px 0 0;
}
.cf-period-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-light); color: var(--primary);
  font-size: 11px; font-weight: 600; padding: 4px 12px;
  border-radius: 20px; margin-bottom: 16px; letter-spacing: 0.3px;
  cursor: pointer; user-select: none; transition: background 0.15s;
}
.cf-period-badge:hover { background: var(--primary); color: #fff; }
.cf-period-badge:hover .pd { background: #fff; }
.cf-period-badge .pd { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: pulse 2s infinite; }
.cf-period-badge .badge-chevron { font-size: 9px; margin-left: 2px; opacity: 0.7; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Period switcher dropdown */
.cf-period-wrap { position: relative; display: inline-block; margin-bottom: 16px; }
.cf-period-wrap .cf-period-badge { margin-bottom: 0; }
.cf-period-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 500;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-md);
  min-width: 220px; overflow: hidden;
}
.cf-period-dropdown.open { display: block; }
.cf-period-dropdown-header {
  padding: 10px 14px 6px; font-size: 10px; font-weight: 700;
  color: var(--on-surface-sec); letter-spacing: 0.6px; text-transform: uppercase;
}
.cf-period-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; font-size: 12px; font-weight: 500; cursor: pointer;
  color: var(--on-surface); transition: background 0.1s;
}
.cf-period-option:hover { background: var(--surface-low); }
.cf-period-option.active { color: var(--primary); font-weight: 700; background: var(--primary-light); }
.cf-period-option .opt-badge {
  font-size: 10px; background: var(--red); color: #fff;
  border-radius: 10px; padding: 1px 6px; font-weight: 600;
}

.cf-metrics { display: flex; gap: 0; align-items: stretch; }
.cf-metric {
  flex: 1; padding: 0 24px;
  border-right: 1px solid var(--border);
}
.cf-metric:first-child { padding-left: 0; }
.cf-metric:last-child { border-right: none; }
.cf-metric-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--on-surface-muted); margin-bottom: 8px; }
.cf-metric-val { font-family: 'IBM Plex Mono'; font-size: 36px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; }
.cf-metric-sub { font-size: 12px; font-weight: 500; margin-top: 7px; display: flex; align-items: center; gap: 5px; }

.cf-progress { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.cf-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cf-progress-header span { font-size: 12px; color: var(--on-surface-muted); }
.cf-progress-header strong { font-family: 'IBM Plex Mono'; font-size: 12px; color: var(--on-surface-sec); }
.progress-track {
  height: 8px; background: var(--surface-low);
  border-radius: 4px; overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  transition: width 0.6s ease;
  position: relative;
}

/* ═══ UPLOAD PROGRESS BAR ═══ */
.upload-progress-wrap {
  margin-top: 10px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: none;
  animation: fadeIn 0.2s ease;
}
.upload-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.upload-progress-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--on-surface-sec);
}
.upload-progress-pct {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
}
.upload-progress-track {
  height: 5px;
  background: var(--surface-low);
  border-radius: 3px;
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  transition: width 0.35s cubic-bezier(0.4,0,0.2,1);
  width: 0%;
}
.upload-progress-steps {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.upload-step {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--surface-low);
  color: var(--on-surface-muted);
  border: 1px solid var(--border);
  transition: background 0.2s, color 0.2s;
}
.upload-step.active {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}
.upload-step.done {
  background: var(--green-bg);
  color: var(--green-text);
  border-color: transparent;
}

/* ═══ CLEAR DATA BUTTON ═══ */
.btn-clear-data {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--red-text);
  background: var(--red-bg);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  white-space: nowrap;
}
.btn-clear-data:hover {
  background: var(--red-text);
  color: #fff;
  border-color: var(--red-text);
}
.btn-clear-data:active { transform: scale(0.97); }

/* ═══ CONFIRM MODAL ═══ */
.confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}
.confirm-box {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 30px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: slideUp 0.2s ease;
}
.confirm-box-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--on-surface-primary);
  margin-bottom: 8px;
}
.confirm-box-body {
  font-size: 13px;
  color: var(--on-surface-sec);
  line-height: 1.55;
  margin-bottom: 20px;
}
.confirm-box-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.confirm-btn-cancel {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface-low);
  color: var(--on-surface-sec);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.confirm-btn-cancel:hover { background: var(--border); }
.confirm-btn-danger {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: #dc2626;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.confirm-btn-danger:hover { background: #b91c1c; }
.confirm-btn-danger:active { transform: scale(0.97); }
/* Primary (non-destructive) confirm button */
.confirm-btn-primary {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--on-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.confirm-btn-primary:hover { opacity: 0.88; }
.confirm-btn-primary:active { transform: scale(0.97); }
/* JS-driven version: fades in/out via class instead of CSS animation */
#fv-confirm-modal.confirm-overlay {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
#fv-confirm-modal.confirm-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}
#fv-confirm-modal .confirm-box {
  transform: translateY(12px) scale(0.98);
  transition: transform 0.2s cubic-bezier(0.23,1,0.32,1), opacity 0.2s ease;
  opacity: 0;
}
#fv-confirm-modal.confirm-overlay--visible .confirm-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}
@keyframes slideUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.cf-days {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
}
.cf-days span { font-size: 11px; color: var(--on-surface-muted); }
.cf-days strong { font-size: 11px; font-weight: 600; color: var(--on-surface-sec); }

/* Empty-state hint — shown on Home when the active pay period has no data
   yet. Kept visually lightweight (not an alert) so returning users between
   pay cycles don't see it as a warning. */
.cf-empty-hint {
  display: flex; align-items: center; gap: 14px;
  background: var(--primary-light);
  border: 1px solid rgba(5, 150, 105, 0.25);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 16px 0 0;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cf-empty-hint:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.cf-empty-hint:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cf-empty-hint-icon { font-size: 24px; flex-shrink: 0; line-height: 1; }
.cf-empty-hint-body { flex: 1; min-width: 0; }
.cf-empty-hint-title { font-weight: 700; font-size: 14px; color: var(--on-surface); }
.cf-empty-hint-sub { font-size: 12px; color: var(--on-surface-sec); margin-top: 2px; line-height: 1.45; }
.cf-empty-hint-cta { font-weight: 600; color: var(--primary); font-size: 13px; flex-shrink: 0; white-space: nowrap; }

/* ═══ CARDS ═══ */
.card {
  background: var(--surface-card);
  border-radius: 13px;
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-title { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: var(--on-surface-sec); margin-bottom: 18px; letter-spacing: -0.1px; }

/* ═══ KPI GRID (max 3 across, breathable) ═══ */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kpi-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi {
  background: var(--surface-card);
  border-radius: 13px;
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid transparent;
  transition: all 0.22s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.kpi.kpi-clickable { cursor: pointer; }
.kpi.kpi-clickable:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.kpi.kpi-clickable .kpi-drill-hint {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--on-surface-muted); margin-top: 6px; opacity: 0;
  transition: opacity 0.18s;
}
.kpi.kpi-clickable:hover .kpi-drill-hint { opacity: 1; }
.kpi.k-green { border-top-color: var(--green); }
.kpi.k-red   { border-top-color: var(--red); }
.kpi.k-blue  { border-top-color: var(--blue); }
.kpi.k-amber { border-top-color: var(--amber); }
.kpi.k-purple{ border-top-color: var(--purple); }
.kpi.k-primary{ border-top-color: var(--primary); }
.kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--on-surface-muted); margin-bottom: 10px; }
.kpi-value { font-family: 'IBM Plex Mono'; font-size: 26px; font-weight: 700; letter-spacing: -0.8px; line-height: 1; }
.kpi-change { font-size: 11px; font-weight: 500; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.kpi-spark { height: 32px; margin-top: 10px; opacity: 0.65; position: relative; }
.kpi-spark canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* ═══ GRIDS ═══ */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.g-60-40 { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; }

/* ═══ URGENT BILLS BAND (uses unified bill-row style) ═══ */
.bills-band {
  background: var(--surface-card);
  border-radius: 13px;
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.bills-band-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 0; padding-bottom: 0;
  border-bottom: none;
}
/* Only show divider when bill items are visible below */
.bills-band-header:has(+ .bills-band-items:not([style*="display:none"]):not(:empty)) {
  margin-bottom: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.bills-band-icon { font-size: 20px; flex-shrink: 0; }
.bills-band-info { flex: 1; }
.bills-band-title { font-size: 13px; font-weight: 600; color: var(--red-text); }
.bills-band-sub { font-size: 11px; color: var(--on-surface-muted); margin-top: 2px; }
.bills-band-items { display: flex; flex-direction: column; }
/* Urgent bill rows reuse .bill-row styling but with a red left accent */
.bills-band .bill-row { border-left: 3px solid var(--red); padding-left: 12px; border-radius: 6px; }
.bills-band .bill-row:last-child { border-bottom: none; }
/* Legacy chip styles kept for fallback */
.bill-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--red-bg); border-radius: 8px;
  padding: 8px 14px; font-size: 12px;
}
.bill-chip-name { font-weight: 600; color: var(--red-text); }
.bill-chip-meta { color: var(--on-surface-muted); font-size: 11px; }
.bill-chip-amt { font-family: 'IBM Plex Mono'; font-size: 13px; font-weight: 700; color: var(--red-text); }

/* ═══ BILL ROWS (home preview + bills page) ═══ */
.bill-list { display: flex; flex-direction: column; }
.bill-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.bill-row:last-child { border-bottom: none; padding-bottom: 0; }
.bill-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.bill-info { flex: 1; min-width: 0; }
.bill-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-meta { font-size: 11px; color: var(--on-surface-muted); margin-top: 2px; }
.bill-right { text-align: right; flex-shrink: 0; }
.bill-amt { font-family: 'IBM Plex Mono'; font-size: 14px; font-weight: 600; }
.badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.3px; margin-top: 3px;
}
.badge.paid    { background: var(--green-bg);  color: var(--green-text); }
.badge.due     { background: var(--red-bg);    color: var(--red-text); }
.badge.pending { background: var(--amber-bg);  color: var(--amber-text); }
.badge.sched   { background: var(--blue-bg);   color: var(--blue-text); }
.badge.invest  { background: var(--purple-bg); color: var(--purple-text); }

/* ═══ COLOR LEGEND (collapsible) ═══ */
.color-legend-wrap { position: relative; margin-bottom: 24px; }
.color-legend-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--surface-low); border: 1px solid var(--border);
  cursor: pointer; font-size: 11px; font-weight: 600;
  color: var(--on-surface-muted); transition: all 0.18s;
  user-select: none;
}
.color-legend-toggle:hover { background: var(--surface-card); color: var(--on-surface-sec); }
.color-legend-toggle .cl-caret { transition: transform 0.2s; font-size: 9px; }
.color-legend-wrap.open .cl-caret { transform: rotate(180deg); }
.color-legend {
  display: none; flex-wrap: wrap; gap: 12px 20px;
  padding: 12px 16px; margin-top: 8px;
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-sm);
}
.color-legend-wrap.open .color-legend { display: flex; }
.cl-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--on-surface-sec); }
.cl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ═══ DONUT LEGEND CHIPS ═══ */
.donut-legend {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.donut-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 16px;
  background: var(--surface-low); font-size: 11px;
  color: var(--on-surface-sec); cursor: default;
  transition: background 0.15s, transform 0.1s;
}
.donut-chip:hover { background: var(--surface-hover); transform: scale(1.03); }
.donut-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.donut-chip-val { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 10px; color: var(--on-surface-muted); }

/* ═══ ANALYTICS NARRATIVE ═══ */
.analytics-narrative {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--on-surface-sec);
}
.an-narr-icon { font-size: 14px; line-height: 1.5; flex-shrink: 0; }
.an-narr-text { flex: 1; }
.an-narr-text strong { color: var(--on-surface); font-weight: 600; }
.an-narr-text .mono { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }

/* ═══ INSIGHTS ═══ */
.insights {
  background: var(--primary-light);
  border-radius: 13px; padding: 22px 26px;
}
.insights-title { font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 14px; }
.insight-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; font-size: 13px; color: var(--on-surface-sec); line-height: 1.55;
}
.insight-row + .insight-row { border-top: 1px solid rgba(0,0,0,0.05); }
.insight-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.insight-row strong { color: var(--on-surface); }

/* ═══ ANALYTICS TABS ═══ */
.time-filter {
  display: inline-flex; background: var(--surface-low);
  border-radius: 9px; padding: 3px; gap: 2px;
}
.tf-btn {
  padding: 6px 16px; border-radius: 7px; border: none;
  background: transparent; font-size: 12px; font-weight: 600;
  color: var(--on-surface-muted); cursor: pointer; transition: all 0.18s;
}
.tf-btn.active {
  background: var(--surface-card); color: var(--on-surface);
  box-shadow: var(--shadow-sm);
}
.tf-date-input {
  padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface-low); font-size: 12px; color: var(--on-surface);
  outline: none; cursor: pointer;
}
.tf-date-input:focus { border-color: var(--primary); }
.tf-apply-btn {
  padding: 5px 12px; border-radius: 7px; border: none;
  background: var(--primary); color: var(--on-primary);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
}
.tf-apply-btn:hover { opacity: 0.85; }

/* ═══ UPLOAD ZONE ═══ */
.upload-zone {
  background: var(--surface-card);
  border: 2px dashed var(--border);
  border-radius: 13px; padding: 14px 20px;
  display: flex; align-items: center; gap: 14px;
  cursor: pointer;
  transition: all 0.25s; box-shadow: var(--shadow-sm);
}
.upload-zone:hover { border-color: var(--primary); background: var(--primary-glow); }
.upload-icon { font-size: 22px; opacity: 0.55; flex-shrink: 0; margin-bottom: 0; }
.upload-zone h3 { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.upload-zone p { font-size: 12px; color: var(--on-surface-muted); max-width: none; margin: 0; }

/* ═══ TRANSACTION TABLE ═══ */
.tx-table { width: 100%; border-collapse: collapse; }
.tx-table thead th {
  text-align: left; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--on-surface-muted); padding: 12px 16px;
  background: var(--surface-low); border-bottom: 1px solid var(--border);
}
.tx-table thead th:first-child { border-radius: 8px 0 0 0; }
.tx-table thead th:last-child { border-radius: 0 8px 0 0; }
.tx-table tbody td { padding: 13px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
.tx-table tbody tr:last-child td { border-bottom: none; }
.tx-table tbody tr:hover td { background: var(--surface-hover); }
.tx-desc-cell.tx-desc-expanded { white-space:normal!important; overflow:visible!important; text-overflow:unset!important; word-break:break-word; }
.tx-th-sort { cursor:pointer; user-select:none; white-space:nowrap; }
.tx-th-sort:hover { color:var(--primary); }
.tx-sort-arrow { font-size:10px; opacity:0.5; margin-left:2px; transition:opacity .15s; }
.tx-th-sort.sort-active .tx-sort-arrow { opacity:1; color:var(--primary); }
.tx-cat-label { display: none; }
.tx-cat-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; }

/* ── Bulk Recategorize Popover ─────────────────────────── */
#bulk-recat-popover {
  position: fixed; z-index: 9500;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
#bulk-recat-popover.bulk-recat-visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.bulk-recat-inner {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; width: 320px; max-width: 92vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.bulk-recat-msg { font-size: 13px; color: var(--on-surface); margin: 0 0 14px; line-height: 1.5; }
.bulk-recat-kw { font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.bulk-recat-cat {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.bulk-recat-actions { display: flex; gap: 8px; }
.bulk-recat-apply {
  flex: 1; font-size: 12px !important; padding: 8px 14px !important;
  border-radius: 10px !important; font-weight: 600 !important;
}
.bulk-recat-dismiss {
  font-size: 12px !important; padding: 8px 14px !important;
  border-radius: 10px !important; background: var(--surface-low) !important;
  color: var(--on-surface-muted) !important; border: 1px solid var(--border) !important;
}

/* ── Category Rules Manager (Settings) ─────────────────── */
.cat-rule-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.cat-rule-row:last-child { border-bottom: none; }
.cat-rule-kw {
  font-weight: 600; font-family: 'IBM Plex Mono', monospace;
  color: var(--on-surface); min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.cat-rule-arrow { color: var(--on-surface-muted); font-size: 11px; flex-shrink: 0; }
.cat-rule-cat {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 10px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}
.cat-rule-count {
  font-size: 10px; color: var(--on-surface-muted); white-space: nowrap; flex-shrink: 0;
}
.cat-rule-del {
  background: none; border: none; cursor: pointer; font-size: 13px;
  color: var(--on-surface-muted); line-height: 1; padding: 2px;
  opacity: 0.5; transition: opacity .15s;
}
.cat-rule-del:hover { opacity: 1; color: var(--red-text); }

/* ── Settings Modal — Redesigned ────────────────────────── */

/* Overlay backdrop */
.settings-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  opacity: 0; transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.settings-overlay.is-visible { opacity: 1; }
.settings-overlay.is-hidden { pointer-events: none; }

/* Modal card */
.settings-card {
  background: var(--surface-card);
  border-radius: 16px;
  width: 540px; max-width: 95vw; max-height: 90vh;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: scale(0.97); opacity: 0;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
              opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.settings-overlay.is-visible .settings-card {
  transform: scale(1); opacity: 1;
}

/* Header */
.settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 0;
}
.settings-title {
  font-size: 16px; font-weight: 700; margin: 0; color: var(--on-surface);
}
.settings-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--on-surface-muted); line-height: 1;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  transition: background 150ms ease, transform 160ms ease-out;
}
.settings-close:hover { background: var(--surface-low); }
.settings-close:active { transform: scale(0.93); }

/* Tab bar */
.settings-tabs {
  display: flex; gap: 0; padding: 16px 24px 0; border-bottom: 1px solid var(--border);
}
.settings-tab {
  padding: 8px 16px 12px; font-size: 13px; font-weight: 500;
  color: var(--on-surface-muted); cursor: pointer;
  border: none; background: none;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease, transform 160ms ease-out;
  white-space: nowrap;
}
.settings-tab:hover { color: var(--on-surface); }
.settings-tab:active { transform: scale(0.97); }
.settings-tab.is-active {
  color: var(--primary); border-bottom-color: var(--primary); font-weight: 600;
}
.settings-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary);
  border-radius: 4px 4px 0 0;
}

/* Tab panels */
.settings-body {
  flex: 1; overflow-y: auto; padding: 20px 24px 24px;
}
.settings-panel {
  display: none;
  animation: settingsFadeIn 200ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.settings-panel.is-active { display: block; }
@keyframes settingsFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Section blocks */
.settings-section {
  margin-bottom: 24px;
}
.settings-section:last-child { margin-bottom: 0; }
.settings-section + .settings-section {
  padding-top: 20px; border-top: 1px solid var(--border);
}
.settings-label {
  font-size: 13px; font-weight: 600; color: var(--on-surface);
  display: block; margin-bottom: 6px;
}
.settings-desc {
  font-size: 12px; color: var(--on-surface-muted);
  margin: 0 0 12px; line-height: 1.5;
}

/* Shared input styles */
.settings-input {
  width: 100%; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-low);
  font-size: 13px; color: var(--on-surface); outline: none;
  box-sizing: border-box; display: block;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
/* Responsive input rows inside settings */
.settings-section > div[style*="display:flex"] { flex-wrap: wrap; }
.settings-input { min-width: 0; }

.settings-input:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.15);
}
.settings-input::placeholder { color: var(--on-surface-muted); }

/* Shared button polish */
.settings-btn {
  font-size: 12px; padding: 8px 14px; white-space: nowrap;
  transition: transform 160ms ease-out, opacity 150ms ease;
}
.settings-btn:active { transform: scale(0.97); }
.settings-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.25);
}

/* Transfer name chips */
.transfer-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--surface-low);
  border-radius: 8px; border: 1px solid var(--border);
  transition: opacity 300ms ease, transform 300ms ease;
}
.transfer-chip.is-removing {
  opacity: 0; transform: translateX(-8px);
}
.transfer-chip-name {
  flex: 1; font-size: 13px; color: var(--on-surface); font-weight: 500;
}
.transfer-chip-del {
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--on-surface-muted); line-height: 1;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: background 150ms ease, color 150ms ease, transform 160ms ease-out;
}
.transfer-chip-del:hover { background: rgba(239,68,68,0.1); color: var(--red-text); }
.transfer-chip-del:active { transform: scale(0.93); }
.transfer-chip-del:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--red-text);
}

/* Profile card inside settings */
.settings-profile-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--surface-low);
  border-radius: 10px; border: 1px solid var(--border);
}
.settings-avatar-wrap {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--on-primary);
  flex-shrink: 0; overflow: hidden; cursor: pointer; position: relative;
  transition: transform 160ms ease-out;
}
.settings-avatar-wrap:hover { transform: scale(1.05); }
.settings-avatar-wrap:active { transform: scale(0.97); }

/* Undo toast */
.undo-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--surface-2); color: var(--on-surface);
  padding: 10px 20px; border-radius: 12px;
  font-size: 13px; font-weight: 500; z-index: 9999;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  display: flex; align-items: center; gap: 12px;
  opacity: 0; transition: opacity 300ms ease;
  pointer-events: auto;
}
.undo-toast.is-visible { opacity: 1; }
.undo-toast-btn {
  background: none; border: none; cursor: pointer;
  color: var(--primary); font-size: 13px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
  transition: background 150ms ease, transform 160ms ease-out;
}
.undo-toast-btn:hover { background: rgba(var(--primary-rgb, 59, 130, 246), 0.1); }
.undo-toast-btn:active { transform: scale(0.95); }

/* ── Global button active states ─────────────────────────── */
.btn:active { transform: scale(0.97); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 59, 130, 246), 0.25);
}

.tx-amt { font-family: 'IBM Plex Mono'; font-weight: 600; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
}

/* ═══ BILLS PAGE ═══ */
.period-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.period-tab {
  padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.2s;
  background: var(--surface-card); color: var(--on-surface-sec);
  box-shadow: var(--shadow-sm); position: relative;
}
.period-tab:hover { color: var(--on-surface); }
.period-tab.active { background: var(--on-surface); color: var(--surface-card); font-weight: 600; }
.period-tab .dot { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; }
.period-tab-add {
  padding: 8px 16px; border-radius: 20px;
  border: 2px dashed var(--border);
  background: transparent; color: var(--on-surface-muted);
  font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.period-tab-add:hover { border-color: var(--primary); color: var(--primary); }

/* Period tab — delete × button (shown on hover) */
.period-tab-del {
  display: none; position: absolute; top: -5px; right: -5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); color: #fff; border: none;
  font-size: 9px; line-height: 16px; text-align: center;
  cursor: pointer; padding: 0; font-weight: 800;
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
  z-index: 2;
}
.period-tab:hover .period-tab-del { display: block; }
.period-tab.active .period-tab-del { display: block; background: var(--red); }

/* Period tab — edit ✏ button (shown on hover, left side) */
.period-tab-edit {
  display: none; position: absolute; top: -5px; left: -5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); color: #fff; border: none;
  font-size: 8px; line-height: 16px; text-align: center;
  cursor: pointer; padding: 0; font-weight: 800;
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
  z-index: 2;
}
.period-tab:hover .period-tab-edit { display: block; }

/* Older periods dropdown */
.period-older-wrap { position: relative; display: inline-block; }
.period-older-btn {
  padding: 8px 16px; border-radius: 20px;
  background: var(--surface-card); color: var(--on-surface-sec);
  box-shadow: var(--shadow-sm); font-size: 13px; font-weight: 500;
  cursor: pointer; border: none; transition: all 0.2s; white-space: nowrap;
}
.period-older-btn:hover { color: var(--on-surface); }
.period-older-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--surface-card); border-radius: 14px;
  box-shadow: var(--shadow-md); border: 1px solid var(--border);
  min-width: 210px; z-index: 600; overflow: hidden; padding: 6px 0;
}
.period-older-dropdown.open { display: block; }
.period-older-year {
  padding: 8px 16px 4px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--on-surface-muted);
}
.period-older-item {
  padding: 9px 16px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; transition: background 0.15s;
}
.period-older-item:hover { background: var(--surface-hover); }
.period-older-item.active { font-weight: 700; color: var(--primary); }

.period-summary {
  background: var(--surface-card); border-radius: 13px;
  padding: 22px 28px; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
}
.ps-item .ps-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--on-surface-muted); margin-bottom: 4px; }
.ps-item .ps-val { font-family: 'IBM Plex Mono'; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.ps-item .ps-pct { font-size: 11px; font-weight: 600; margin-top: 3px; color: var(--on-surface-muted); letter-spacing: 0.2px; }
.ps-days { background: var(--primary-light); color: var(--primary); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 20px; font-family: 'IBM Plex Mono'; white-space: nowrap; }

/* Bills table */
.bt { width: 100%; border-collapse: collapse; }
.bt thead th {
  text-align: left; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--on-surface-muted); padding: 12px 16px;
  background: var(--surface-low);
}
.bt thead th.sortable {
  cursor: pointer; user-select: none;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.bt thead th.sortable:hover { color: var(--on-surface); background: var(--surface-hover); }
.bt thead th.sortable.active { color: var(--primary); }
.bt thead th.sortable .sort-arrow {
  display: inline-block; margin-left: 5px;
  font-size: 9px; opacity: 0.35; transition: opacity 0.15s;
}
.bt thead th.sortable:hover .sort-arrow { opacity: 0.7; }
.bt thead th.sortable.active .sort-arrow { opacity: 1; }
.bt tbody td { padding: 14px 16px; font-size: 13px; border-top: 1px solid var(--border); }
.bt tbody tr:hover td { background: var(--surface-hover); }
.bt .mono { font-family: 'IBM Plex Mono'; font-weight: 600; }
.status-select {
  appearance: none; border: none; background: transparent;
  font-size: 10px; font-weight: 700; padding: 3px 10px;
  border-radius: 20px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.status-select.paid    { background: var(--green-bg);  color: var(--green-text); }
.status-select.due     { background: var(--red-bg);    color: var(--red-text); }
.status-select.pending { background: var(--amber-bg);  color: var(--amber-text); }
.status-select.sched   { background: var(--blue-bg);   color: var(--blue-text); }
.cat-select {
  appearance: none; border: none;
  background: var(--surface-low); color: var(--on-surface-sec);
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; cursor: pointer; letter-spacing: 0.2px;
  transition: background 0.15s, color 0.15s;
}
.cat-select:hover  { background: var(--primary-glow); color: var(--primary); }
.cat-select:focus  { outline: none; background: var(--primary-glow); color: var(--primary); }

/* ═══ NET WORTH PAGE ═══ */
.nw-hero {
  background: var(--surface-card);
  border-radius: 16px; padding: 40px;
  text-align: center; margin-bottom: 28px;
  box-shadow: var(--shadow-md);
}
.nw-hero-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--on-surface-muted); margin-bottom: 12px; }
.nw-hero-val { font-family: 'IBM Plex Mono'; font-size: 52px; font-weight: 700; letter-spacing: -2px; line-height: 1; }
.nw-hero-change {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'IBM Plex Mono'; font-size: 13px; font-weight: 600;
  color: var(--green-text); background: var(--green-bg);
  padding: 5px 14px; border-radius: 20px; margin-top: 12px;
}
.nw-hero-note { font-size: 12px; color: var(--on-surface-muted); margin-top: 8px; }
.nw-breakdown {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border);
}
.nw-bd-item { text-align: center; padding: 0 20px; border-right: 1px solid var(--border); }
.nw-bd-item:last-child { border-right: none; }
.nw-bd-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--on-surface-muted); margin-bottom: 6px; }
.nw-bd-val { font-family: 'IBM Plex Mono'; font-size: 22px; font-weight: 700; }

/* Asset / Liability sections */
.acc-section { margin-bottom: 28px; }
.acc-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.acc-section-head h3 { font-size: 14px; font-weight: 600; }
.acc-section-head .total { font-family: 'IBM Plex Mono'; font-size: 15px; font-weight: 600; }
.acc-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; gap: 2px; margin-bottom: 12px; background: var(--surface-low); }
.acc-bar-seg { height: 100%; border-radius: 3px; }
.acc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: var(--surface-card);
  border-radius: 11px; margin-bottom: 6px;
  box-shadow: var(--shadow-sm); transition: all 0.2s;
}
.acc-row:hover { transform: translateX(2px); box-shadow: var(--shadow-md); }
.acc-icon { width: 36px; height: 36px; background: var(--surface-low); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.acc-label { flex: 1; font-size: 14px; font-weight: 500; }
.acc-val { font-family: 'IBM Plex Mono'; font-size: 15px; font-weight: 600; }
.acc-row-add { border: 1px dashed var(--border); background: transparent; box-shadow: none; cursor: pointer; }
.acc-row-add:hover { background: var(--primary-glow); }

/* ═══ MONEY FLOW SVG ═══ */
.flow-container { position: relative; height: 340px; width: 100%; }
.flow-container svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fl-card {
  position: absolute; z-index: 2;
  background: var(--surface-low); border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.fl-card.income-card { background: var(--green-bg); border: 1px solid rgba(5,150,105,0.15); }
.fl-card.hub-card { background: var(--primary-light); border: 1px solid rgba(5,150,105,0.2); min-width: 120px; }
.fl-card-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--on-surface-muted); margin-bottom: 4px; }
.fl-card-name { font-size: 13px; font-weight: 700; }
.fl-card-amt { font-family: 'IBM Plex Mono'; font-size: 14px; font-weight: 700; margin-top: 5px; }
.fl-destinations { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 7px; z-index: 2; }
.fl-dest {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface-card); border-radius: 10px;
  padding: 7px 12px; box-shadow: var(--shadow-sm); min-width: 152px;
}
.fl-dest-ic { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; background: var(--surface-low); flex-shrink: 0; }
.fl-dest-name { font-size: 11.5px; font-weight: 600; line-height: 1.2; }
.fl-dest-val { font-family: 'IBM Plex Mono'; font-size: 10.5px; margin-top: 2px; }

/* ═══ NET WORTH TABLE ═══ */
.nw-table { width: 100%; border-collapse: collapse; }
.nw-table th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--on-surface-muted); padding: 10px 16px; }
.nw-table td { padding: 12px 16px; font-size: 13px; border-top: 1px solid var(--border); }
.nw-table .mono { font-family: 'IBM Plex Mono'; font-weight: 600; }

/* ═══ FAB ═══ */
/* FAB removed — actions moved to avatar menu */
.fab { display: none; }
.fab:hover { display: none; }
.fab-menu {
  position: fixed; bottom: 88px; right: 28px;
  background: var(--surface-card); border-radius: 13px; padding: 8px;
  display: none; flex-direction: column; gap: 2px; z-index: 200;
  box-shadow: var(--shadow-md); min-width: 210px; border: 1px solid var(--border);
}
.fab-menu.open { display: flex; animation: fadeUp 0.2s ease; }
.fm-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 500; color: var(--on-surface-sec);
  cursor: pointer; transition: all 0.15s;
}
.fm-item:hover { background: var(--primary-glow); color: var(--on-surface); }
.fm-mobile-only { display: none; }
@media (max-width: 768px) { .fm-mobile-only { display: flex; } }

/* ═══ CALCULATOR MODAL ═══ */
/* ═══ ALERTS PANEL ═══ */
.alerts-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 500;
}
.alerts-panel {
  position: fixed; top: 0; right: 0;
  width: 380px; max-width: 100vw; height: 100vh;
  background: var(--surface-card);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 501;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.23,1,0.32,1);
}
.alerts-panel.open { transform: translateX(0); }
.alerts-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.alerts-title { font-size: 16px; font-weight: 700; color: var(--on-surface); }
.alerts-subtitle { font-size: 12px; color: var(--on-surface-muted); margin-top: 2px; }
.alerts-list {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.alert-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  border-left: 3px solid transparent;
  background: var(--surface-low);
}
.alert-item.alert-red { border-left-color: var(--red); }
.alert-item.alert-amber { border-left-color: var(--amber); }
.alert-item.alert-blue { border-left-color: var(--primary); }
.alert-item.alert-green { border-left-color: var(--green); }
.alert-icon { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
.alert-title { font-size: 13px; font-weight: 600; color: var(--on-surface); margin-bottom: 2px; }
.alert-body { font-size: 12px; color: var(--on-surface-muted); line-height: 1.4; }
.alert-item {
  transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.3s ease 0.1s, padding 0.3s ease 0.1s, margin 0.3s ease 0.1s;
  max-height: 300px; overflow: hidden;
}
.alert-item.alert-dismissing {
  opacity: 0; transform: translateX(40px);
  max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0;
  border-left-width: 0;
}
.alert-dismiss {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--on-surface-muted); font-size: 14px; line-height: 1;
  padding: 2px 4px; border-radius: 4px; opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.alert-item:hover .alert-dismiss { opacity: 1; }
.alert-dismiss:hover { background: var(--surface-low); color: var(--on-surface); }
.alert-review-link {
  display: inline-block; margin-top: 4px;
  font-size: 11px; font-weight: 600; color: var(--primary);
  text-decoration: none; cursor: pointer;
}
.alert-review-link:hover { text-decoration: underline; }
.alert-item {
  transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.3s ease 0.1s, padding 0.3s ease 0.1s, margin 0.3s ease 0.1s;
  max-height: 300px; overflow: hidden;
}
.alert-item.alert-dismissing {
  opacity: 0; transform: translateX(40px);
  max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0;
  border-left-width: 0;
}
.alert-dismiss {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--on-surface-muted); font-size: 14px; line-height: 1;
  padding: 2px 4px; border-radius: 4px; opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.alert-item:hover .alert-dismiss { opacity: 1; }
.alert-dismiss:hover { background: var(--surface-low); color: var(--on-surface); }
.alert-review-link {
  display: inline-block; margin-top: 4px;
  font-size: 11px; font-weight: 600; color: var(--primary);
  text-decoration: none; cursor: pointer;
}
.alert-review-link:hover { text-decoration: underline; }

.calc-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 9999; display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.15s ease;
}
@media (min-width: 769px) {
  .calc-overlay { align-items: center; }
}
.calc-modal {
  background: var(--surface-card); border-radius: 18px 18px 0 0;
  width: 100%; max-width: 360px; padding: 16px 16px 20px;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
  animation: slideUp 0.25s ease;
  -webkit-user-select: none; user-select: none;
}
@media (min-width: 769px) {
  .calc-modal { border-radius: 18px; animation: fadeUp 0.2s ease; }
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.calc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding: 0 4px;
}
.calc-header span { font-size: 15px; font-weight: 600; color: var(--on-surface); }
.calc-close {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--surface-hover); color: var(--on-surface-muted);
  font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.calc-display {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px; text-align: right;
  min-height: 64px; display: flex; flex-direction: column; justify-content: flex-end;
}
.calc-expr {
  font-size: 13px; color: var(--on-surface-muted); min-height: 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calc-result {
  font-size: 32px; font-weight: 700; color: var(--on-surface);
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; line-height: 1.2;
}
.calc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.calc-btn {
  height: 56px; border-radius: 12px; border: none; font-size: 18px;
  font-weight: 600; cursor: pointer; transition: all 0.1s;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--on-surface);
  -webkit-tap-highlight-color: transparent;
}
.calc-btn:active { transform: scale(0.93); opacity: 0.8; }
.calc-btn.calc-op {
  background: var(--primary-glow); color: var(--primary);
}
.calc-btn.calc-eq {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
}
.calc-btn.calc-clear {
  background: var(--surface-hover); color: var(--danger, #dc2626);
}
.calc-btn.calc-wide { grid-column: span 2; }
.calc-copy-row {
  display: flex; gap: 8px; margin-top: 8px;
}
.calc-copy-btn {
  flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--on-surface-sec); font-size: 12px;
  font-weight: 500; cursor: pointer; transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.calc-copy-btn:hover { background: var(--primary-glow); color: var(--primary); border-color: var(--primary); }
.calc-copy-btn:active { transform: scale(0.96); }

/* ═══ TOUCH-FRIENDLY GLOBAL DEFAULTS ═══ */
@media (pointer: coarse) {
  /* Ensure minimum 44px touch targets on touch devices */
  .btn, .btn-primary, .nav-item, .mn-item, .period-tab, .period-tab-add,
  .fm-item, .theme-toggle, .card-collapse-btn, .acc-row, .acc-row-add,
  .cf-period-badge, .cf-period-option, .period-older-item, .status-select,
  .cat-select, .tx-cat-select, .section-action, .fab {
    min-height: 44px;
  }
  /* Remove hover states on touch — they stick and confuse */
  .btn:hover, .nav-item:hover, .acc-row:hover, .fm-item:hover,
  .cf-period-option:hover, .period-tab:hover, .period-older-item:hover,
  .bt tbody tr:hover td, .tx-table tbody tr:hover td { background: inherit; }
  .acc-row:hover { transform: none; box-shadow: var(--shadow-sm); }
  /* Active feedback for touch */
  .btn:active, .nav-item:active, .mn-item:active, .period-tab:active,
  .fm-item:active, .acc-row:active, .cf-period-option:active {
    transform: scale(0.97); opacity: 0.85;
    transition: transform 0.08s, opacity 0.08s;
  }
  /* Prevent 300ms tap delay */
  * { touch-action: manipulation; }
  /* Slightly larger scrollbar thumb for easier grab */
  ::-webkit-scrollbar { width: 8px; }
  ::-webkit-scrollbar-thumb { min-height: 44px; }
}

/* ═══ MOBILE BOTTOM NAV ═══ */
.mobile-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface-card);
  border-top: 1px solid var(--border);
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  z-index: 110;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.mobile-nav-inner { display: flex; justify-content: space-around; }
.mn-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px; border-radius: 12px; cursor: pointer;
  transition: all 0.18s; position: relative; min-width: 64px;
  min-height: 48px; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.mn-item .mn-icon { font-size: 22px; transition: transform 0.18s; }
.mn-item .mn-label { font-size: 10px; font-weight: 500; color: var(--on-surface-muted); }
.mn-item.active .mn-label { color: var(--primary); font-weight: 600; }
.mn-item.active .mn-icon { transform: scale(1.15); }
.mn-badge {
  position: absolute; top: 2px; right: 6px;
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ═══ RESPONSIVE BREAKPOINTS ═══ */
@media (max-width: 1200px) {
  .kpi-row-4 { grid-template-columns: repeat(2, 1fr); }
  .cf-metric-val { font-size: 28px; }
}
@media (max-width: 1024px) {
  .g2, .g-60-40 { grid-template-columns: 1fr; }
  .nw-breakdown { grid-template-columns: 1fr 1fr; }
  .nw-breakdown .nw-bd-item:nth-child(2) { border-right: none; }
  .cf-metrics { flex-wrap: wrap; gap: 20px; }
  .cf-metric { border-right: none; padding: 0; flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 820px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .topbar { padding: 12px 16px; }
  .topbar-right { gap: 6px; }
  .topbar-right .btn { font-size: 12px; padding: 8px 12px; min-height: 40px; display: inline-flex; align-items: center; }
  .topbar-right .btn-primary { font-size: 12px; padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; }
  .topbar-left h2 { font-size: 16px; }
  .topbar-left p { font-size: 11px; }
  .page { padding: 20px 16px 110px; }
  .kpi-row, .kpi-row-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cf-hero { padding: 24px 20px; }
  .cf-metric-val { font-size: 26px; }
  .mobile-nav { display: block; }
  .fab { bottom: 90px; width: 56px; height: 56px; font-size: 22px; }
  .fab-menu { bottom: 156px; }
  .cf-metrics { flex-direction: column; gap: 16px; }
  .cf-metric { padding: 0; border: none; }
  .nw-hero { padding: 28px 20px; }
  .nw-hero-val { font-size: 38px; }
  .nw-breakdown { grid-template-columns: 1fr; }
  .nw-bd-item { border-right: none; border-bottom: 1px solid var(--border); padding: 14px 0; }
  .nw-bd-item:last-child { border-bottom: none; }
  .bills-band { flex-direction: column; align-items: flex-start; gap: 14px; }
  .color-legend-wrap { display: none; }
  .bt-hide-sm { display: none; }
  .period-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .period-tab { scroll-snap-align: start; min-height: 44px; display: inline-flex; align-items: center; }
  .period-tab-add { min-height: 44px; display: inline-flex; align-items: center; }
  .g3 { grid-template-columns: 1fr 1fr; }
  /* Touch-friendly FAB menu items */
  .fm-item { padding: 14px 16px; min-height: 48px; font-size: 14px; }
  /* Larger account rows for touch */
  .acc-row { padding: 16px 18px; gap: 14px; min-height: 56px; }
  .acc-icon { width: 40px; height: 40px; font-size: 19px; }
  /* Bills table: touch-friendly rows */
  .bt tbody td { padding: 16px 16px; }
  .status-select { min-height: 36px; padding: 6px 12px; font-size: 11px; }
  .cat-select { min-height: 36px; padding: 6px 12px; font-size: 12px; }
  /* Section action links: bigger tap target */
  .section-action { padding: 8px 4px; font-size: 13px; }
  /* Period delete/edit buttons: bigger on touch */
  .period-tab-del, .period-tab-edit { width: 24px; height: 24px; font-size: 12px; line-height: 24px; top: -8px; }
  .period-tab-del { right: -8px; }
  .period-tab-edit { left: -8px; }
  /* Always show edit/delete on mobile (no hover) */
  .period-tab.active .period-tab-del,
  .period-tab.active .period-tab-edit { display: block; }
  /* Fix #3: Force 2-col on money flow summary grid at tablet */
  #home-flow-summary { grid-template-columns: repeat(2, 1fr) !important; }
  /* Fix #4: Net worth table horizontal scroll */
  .nw-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Fix #5: Flow diagram scrollable at tablet, not just phone */
  .flow-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Fix #6: Hide command palette button (desktop shortcut) on tablet/mobile */
  .btn-cmd-palette { display: none !important; }
}
@media (max-width: 540px) {
  .kpi-row, .kpi-row-4 { grid-template-columns: 1fr; gap: 10px; }
  .kpi-value { font-size: 28px; }
  .g3 { grid-template-columns: 1fr; }
  /* Topbar: still readable, but compact */
  .topbar { padding: 10px 14px; }
  .topbar-right { gap: 5px; }
  .topbar-right .btn { font-size: 11px; padding: 7px 10px; min-height: 38px; }
  .topbar-right .btn-primary { font-size: 11px; padding: 7px 12px; min-height: 38px; white-space: nowrap; }
  .topbar-left h2 { font-size: 15px; }
  .topbar-left p { display: none; }
  .avatar { width: 32px !important; height: 32px !important; font-size: 11px !important; }
  /* Transaction table: card-style layout on phones */
  .tx-table thead { display: none; }
  .tx-table tbody tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--border); position: relative; }
  .tx-table tbody td { display: block; padding: 3px 0; border-bottom: none; }
  .tx-table tbody td:first-child { padding-top: 0; font-weight: 600; }
  .tx-table tbody td:last-child { padding-bottom: 0; }
  /* Swipeable transaction row hint */
  .tx-table tbody tr { overflow: hidden; transition: transform 0.2s ease; }
  /* Mobile category: readable chip in card layout */
  .tx-cat-select { max-width: 180px !important; font-size: 12px !important; padding: 6px 12px !important; min-height: 36px; border-radius: 20px; appearance: none; -webkit-appearance: none; }
  .tx-cat-select option { font-size: 13px; }
  .tx-cat-label { display: none; }
  .tx-cat-wrap { display: inline-block; }
  /* Compact transaction filter controls — still finger-friendly */
  #tx-search { width: 140px !important; font-size: 13px !important; padding: 8px 12px !important; min-height: 40px; border-radius: 10px; }
  #tx-cat-filter, #tx-sort, #tx-month-jump { font-size: 12px !important; padding: 8px 10px !important; min-height: 40px; }
  #tx-page-size { font-size: 11px !important; padding: 6px 8px !important; min-height: 36px; }
  .cf-period-badge { font-size: 11px; min-height: 36px; display: inline-flex; align-items: center; padding: 6px 14px; }
  .bt thead th { font-size: 10px; padding: 10px 10px; }
  .bt tbody td { padding: 14px 12px; font-size: 13px; }
  .bt-hide-sm { display: none; }
  .cat-select  { font-size: 11px; padding: 6px 10px; min-height: 36px; }
  .status-select { font-size: 10px; padding: 6px 10px; min-height: 36px; }
  /* Net worth hero: phone */
  .nw-hero-val { font-size: 32px; }
  .nw-bd-val { font-size: 20px; }
  /* Upload zone: bigger target */
  .upload-zone { padding: 18px 20px; min-height: 64px; }
  /* Card collapse: bigger button */
  .card-collapse-btn { width: 36px; height: 36px; border-radius: 10px; }
  /* Page spacing */
  .page { padding: 16px 14px 110px; }
  .section { margin-bottom: 28px; }
  .cf-hero { padding: 20px 16px; }
  /* Modals: full-width on small phones */
  #export-modal > div, #settings-modal > div, #add-account-modal > div {
    width: 100% !important; max-width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    margin-top: auto;
  }
  #export-modal, #settings-modal, #add-account-modal {
    align-items: flex-end !important;
  }
  /* Money flow summary grid: stack on small phones */
  #home-flow-summary { grid-template-columns: 1fr 1fr !important; }
  /* Report card: smaller grid */
  #report-card-container > div:last-child { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; }
  /* Flow diagram: scrollable on small screens */
  .flow-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Settings tabs: scrollable */
  .settings-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .settings-tab { white-space: nowrap; flex-shrink: 0; }
}
/* Flow diagram: stacked vertical layout on small phones — SVG curves don't translate
   to a narrow viewport, so we show the cards in reading order (Income → Hub → Destinations)
   and hide the diagram itself. */
@media (max-width: 480px) {
  .flow-container {
    position: static;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
  }
  .flow-container svg { display: none; }
  .fl-card {
    position: static;
    transform: none !important;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
  }
  .fl-card.hub-card { min-width: 0; }
  .fl-destinations {
    position: static;
    transform: none;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    right: auto;
    top: auto;
  }
  .fl-dest { min-width: 0; width: 100%; box-sizing: border-box; padding: 10px 12px; }
}

/* ═══ SWIPE HINT INDICATOR ═══ */
.swipe-indicator {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 60px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff;
  pointer-events: none; opacity: 0; transition: opacity 0.15s;
  border-radius: 0 11px 11px 0;
}
.swipe-indicator.delete { background: var(--red); }
.swipe-indicator.visible { opacity: 1; }

/* ═══ PULL-TO-REFRESH ═══ */
.ptr-indicator {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-60px);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-card); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; z-index: 9999; transition: transform 0.25s ease;
  border: 1px solid var(--border);
}
.ptr-indicator.pulling { transform: translateX(-50%) translateY(16px); }
.ptr-indicator.refreshing { transform: translateX(-50%) translateY(16px); animation: ptr-spin 0.8s linear infinite; }
@keyframes ptr-spin { from { transform: translateX(-50%) translateY(16px) rotate(0deg); } to { transform: translateX(-50%) translateY(16px) rotate(360deg); } }

/* ─── scrollbar ─── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--on-surface-muted); border-radius: 3px; opacity: 0.3; }

/* ═══ COMMAND PALETTE (⌘K) ═══ */
#cmd-overlay {
  display: none; position: fixed; inset: 0; z-index: 20000;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
  align-items: flex-start; justify-content: center;
  padding-top: clamp(60px, 12vh, 130px);
}
#cmd-overlay.open { display: flex; }
#cmd-box {
  background: var(--surface-card);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22), 0 0 0 1px var(--border);
  width: min(620px, 92vw);
  overflow: hidden;
  animation: cmdSlideIn 0.18s cubic-bezier(0.34,1.36,0.64,1);
}
@keyframes cmdSlideIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#cmd-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
#cmd-input-wrap .cmd-icon {
  font-size: 16px; color: var(--on-surface-muted); flex-shrink: 0;
}
#cmd-input {
  flex: 1; border: none; background: none; font-size: 15px;
  color: var(--on-surface); outline: none;
  font-family: 'Space Grotesk', sans-serif;
}
#cmd-input::placeholder { color: var(--on-surface-muted); }
#cmd-kbd-hint {
  font-size: 10px; color: var(--on-surface-muted);
  background: var(--surface-low); border-radius: 5px;
  padding: 3px 7px; font-family: 'IBM Plex Mono'; white-space: nowrap;
}
#cmd-results {
  max-height: 400px; overflow-y: auto; padding: 8px 0;
}
.cmd-section-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--on-surface-muted);
  padding: 10px 20px 4px;
}
.cmd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; cursor: pointer;
  transition: background 0.1s;
  font-size: 13px; color: var(--on-surface);
}
.cmd-item:hover, .cmd-item.focused {
  background: var(--primary-light);
}
.cmd-item .cmd-item-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface-low); display: flex;
  align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.cmd-item .cmd-item-label { flex: 1; font-weight: 500; }
.cmd-item .cmd-item-meta {
  font-size: 11px; color: var(--on-surface-muted);
  font-family: 'IBM Plex Mono';
}
.cmd-item .cmd-item-action {
  font-size: 10px; color: var(--primary); font-weight: 700;
  background: var(--primary-light); border-radius: 5px;
  padding: 2px 7px;
}
#cmd-empty {
  text-align: center; padding: 32px 20px;
  color: var(--on-surface-muted); font-size: 13px;
}
#cmd-footer {
  border-top: 1px solid var(--border);
  padding: 10px 20px;
  display: flex; gap: 16px; align-items: center;
  font-size: 11px; color: var(--on-surface-muted);
}
.cmd-footer-hint { display: flex; align-items: center; gap: 5px; }
.cmd-footer-hint kbd {
  background: var(--surface-low); border-radius: 4px;
  padding: 2px 6px; font-size: 10px;
  font-family: 'IBM Plex Mono'; color: var(--on-surface-sec);
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════
   ONBOARDING WIZARD STYLES
   ═══════════════════════════════════════════ */
    .ob-card{background:var(--surface-card);border-radius:24px;padding:40px 36px;width:min(520px,92vw);box-shadow:0 24px 64px rgba(0,0,0,.22);position:relative;animation:ob-in .28s cubic-bezier(.22,1,.36,1)}
    @keyframes ob-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
    .ob-step-dots{display:flex;gap:7px;justify-content:center;margin-bottom:28px}
    .ob-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .2s,transform .2s}
    .ob-dot.active{background:var(--primary);transform:scale(1.25)}
    .ob-emoji{font-size:42px;margin-bottom:14px;display:block;text-align:center}
    .ob-title{font-size:22px;font-weight:800;color:var(--on-surface);text-align:center;margin-bottom:8px;letter-spacing:-.3px}
    .ob-sub{font-size:14px;color:var(--on-surface-sec);text-align:center;line-height:1.6;margin-bottom:24px}
    .ob-features{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
    .ob-feat{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:12px;background:var(--surface-low);border:1px solid var(--border)}
    .ob-feat-icon{font-size:20px;flex-shrink:0;margin-top:1px}
    .ob-feat-text{font-size:13px;color:var(--on-surface-sec);line-height:1.5}
    .ob-feat-text strong{color:var(--on-surface);display:block;margin-bottom:2px;font-size:13.5px}
    .ob-actions{display:flex;gap:10px;margin-top:4px}
    .ob-btn-primary{flex:1;padding:13px;border-radius:12px;border:none;background:var(--primary);color:var(--on-primary);font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.1px;transition:opacity .15s}
    .ob-btn-primary:hover{opacity:.88}
    .ob-btn-primary:disabled{opacity:.5;cursor:not-allowed}
    .ob-btn-ghost{flex:1;padding:13px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--on-surface-sec);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s}
    .ob-btn-ghost:hover{background:var(--surface-low)}
    .ob-form-row{display:flex;gap:12px;margin-bottom:14px}
    .ob-form-col{display:flex;flex-direction:column;gap:5px;flex:1}
    .ob-label{font-size:12px;font-weight:600;color:var(--on-surface-sec);letter-spacing:.3px;text-transform:uppercase}
    .ob-input{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-low);color:var(--on-surface);font-size:14px;font-family:inherit;outline:none;transition:border-color .15s}
    .ob-input:focus{border-color:var(--primary)}
    .ob-error{font-size:13px;color:#e03e3e;margin-bottom:10px;display:none;padding:10px 12px;background:rgba(224,62,62,.08);border-radius:8px}
    .ob-bank-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
    .ob-chip{padding:5px 11px;border-radius:20px;font-size:12px;font-weight:600;background:var(--surface-low);border:1px solid var(--border);color:var(--on-surface-sec)}
    .ob-upload-hint{border:2px dashed var(--border);border-radius:14px;padding:20px;text-align:center;margin-bottom:20px;background:var(--surface-low)}
    .ob-upload-hint-icon{font-size:28px;display:block;margin-bottom:6px}
    .ob-upload-hint-text{font-size:13px;color:var(--on-surface-sec);line-height:1.5}
    .ob-close-x{position:absolute;top:18px;right:20px;background:none;border:none;font-size:20px;color:var(--on-surface-sec);cursor:pointer;line-height:1;padding:4px 6px;border-radius:6px}
    .ob-close-x:hover{background:var(--surface-low)}

/* ═══════════════════════════════════════════════════════════
   PLAN TAB — Phase 1 Styles
   ═══════════════════════════════════════════════════════════ */

/* Grid layout */
.plan-grid { display: flex; flex-direction: column; gap: 16px; }

/* Investment Analysis hero is always first */
#plan-invest   { order: 1; }
#plan-compound { order: 2; }
#plan-debt     { order: 3; }
#plan-loan     { order: 4; }

/* ── Investment Analysis Hero (always visible, no toggle) ── */
.invest-hero {
  background: var(--surface-card);
  border: 1.5px solid var(--primary);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 4px;
}
.invest-hero-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.invest-hero-left { display: flex; align-items: center; gap: 14px; }
.invest-hero-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 18px;
  font-weight: 700; color: var(--on-surface); letter-spacing: -0.3px;
}
.invest-hero-sub { font-size: 13px; color: var(--on-surface-muted); margin-top: 2px; }

@media (max-width: 768px) {
  .invest-hero { padding: 16px 14px; }
  .invest-hero-header { gap: 10px; }
  .invest-hero-left { flex: 1; min-width: 0; }
  .invest-hero-left .plan-card-icon { font-size: 24px; }
  .invest-hero-title { font-size: 16px; }
  .invest-hero-sub { font-size: 12px; }
  .invest-section-header { flex-wrap: wrap; gap: 8px; }
}

/* ── Quick Insights Banner ── */
.plan-insights-banner {
  background: linear-gradient(135deg, var(--surface-card) 0%, var(--surface-low) 100%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 13px;
  padding: 18px 22px 14px;
  margin-bottom: 8px;
  transition: box-shadow 0.2s ease-out;
}
.plan-insights-banner:hover { box-shadow: var(--shadow-md); }
.plan-insights-inner { display: flex; align-items: flex-start; gap: 14px; }
.plan-insights-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.plan-insights-content { flex: 1; min-width: 0; }
.plan-insights-text { font-size: 14px; line-height: 1.55; color: var(--on-surface); font-weight: 500; }
.plan-insights-link {
  display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600;
  color: var(--primary); text-decoration: none; transition: opacity 0.15s;
}
.plan-insights-link:hover { opacity: 0.75; }
.plan-insights-nav {
  background: none; border: none; font-size: 24px; color: var(--on-surface-muted);
  cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: background 0.15s, color 0.15s;
  line-height: 1; flex-shrink: 0;
}
.plan-insights-nav:hover { background: var(--surface-low); color: var(--on-surface); }
.plan-insights-dots {
  display: flex; justify-content: center; gap: 6px; margin-top: 10px;
}
.plan-insights-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--on-surface-muted); opacity: 0.3;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.plan-insights-dot.active { opacity: 1; transform: scale(1.3); background: var(--primary); }

/* ── Plan Cards ── */
.plan-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 13px;
  overflow: hidden;
  transition: box-shadow 0.2s ease-out;
}
.plan-card:hover { box-shadow: var(--shadow-md); }

.plan-card-header {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px; cursor: pointer;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.plan-card-header:hover { background: var(--surface-low); }
.plan-card-header:active { transform: scale(0.995); }

.plan-card-icon { font-size: 28px; flex-shrink: 0; }
.plan-card-info { flex: 1; min-width: 0; }
.plan-card-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 16px;
  font-weight: 700; color: var(--on-surface); letter-spacing: -0.2px;
}
.plan-card-desc { font-size: 13px; color: var(--on-surface-muted); margin-top: 2px; }

.plan-card-chevron {
  font-size: 22px; color: var(--on-surface-muted); flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  transform: rotate(-90deg);
  font-weight: 300; line-height: 1;
}
.plan-card.expanded .plan-card-chevron { transform: rotate(90deg); }

.plan-card-body {
  padding: 0 24px 24px;
  animation: planCardReveal 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes planCardReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Pre-fill Callout ── */
.plan-prefill {
  background: var(--green-bg, #f0fdf4); border: 1px solid var(--green, #22c55e);
  border-left: 3px solid var(--green, #22c55e);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 18px;
  font-size: 13px; color: var(--on-surface-sec); line-height: 1.5;
}
.plan-prefill::before { content: '📎 '; }
.plan-prefill strong { color: var(--on-surface); font-weight: 600; }

/* ── Inputs ── */
.plan-inputs { display: flex; flex-direction: column; gap: 18px; }
.plan-field label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--on-surface-sec); margin-bottom: 8px;
}
.plan-input-wrap {
  display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-low); overflow: hidden;
  transition: border-color 0.15s ease;
}
.plan-input-wrap:focus-within { border-color: var(--primary); }
.plan-input-prefix {
  padding: 10px 0 10px 14px; font-size: 14px; color: var(--on-surface-muted);
  font-family: 'IBM Plex Mono', monospace; font-weight: 500;
}
.plan-input-wrap input {
  flex: 1; border: none; background: transparent; padding: 10px 14px 10px 6px;
  font-size: 14px; color: var(--on-surface); font-family: 'IBM Plex Mono', monospace;
  outline: none; min-width: 0;
}

/* ── Slider ── */
.plan-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 3px; background: var(--border); outline: none;
  transition: background 0.15s;
}
.plan-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--primary); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.15s cubic-bezier(0.23, 1, 0.32, 1);
}
.plan-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.plan-slider::-webkit-slider-thumb:active { transform: scale(0.95); }
.plan-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: var(--primary); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.plan-rate-display {
  font-family: 'IBM Plex Mono', monospace; font-weight: 600;
  color: var(--primary); font-size: 12px;
}

/* ── Toggle Group ── */
.plan-toggle-group { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-toggle {
  padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-low); color: var(--on-surface-sec);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.18s cubic-bezier(0.23, 1, 0.32, 1);
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.plan-toggle:hover { border-color: var(--primary); color: var(--on-surface); }
.plan-toggle:active { transform: scale(0.97); }
.plan-toggle.active {
  background: var(--primary); color: var(--on-primary);
  border-color: var(--primary); box-shadow: 0 2px 8px rgba(5,150,105,0.25);
}

/* ── Results ── */
.plan-result {
  background: var(--surface-low); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px; margin-top: 20px;
}
.plan-result-hero { text-align: center; margin-bottom: 16px; }
.plan-result-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--on-surface-muted); margin-bottom: 4px;
}
.plan-result-value {
  font-size: 32px; font-weight: 700; color: var(--primary);
  font-family: 'IBM Plex Mono', monospace; letter-spacing: -1px;
}
.plan-result-sub { font-size: 12px; color: var(--on-surface-muted); margin-top: 2px; }

.plan-result-breakdown {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.plan-result-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--on-surface-sec);
}
.plan-result-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.plan-result-num { margin-left: auto; font-weight: 600; color: var(--on-surface); }

.plan-result-summary {
  margin-top: 14px; font-size: 13px; line-height: 1.6;
  color: var(--on-surface-sec); padding: 12px 14px;
  background: var(--surface-card); border-radius: 8px;
  border: 1px solid var(--border);
}

/* ── Chart wrap ── */
.plan-chart-wrap {
  margin-top: 20px; padding: 16px;
  background: var(--surface-low); border: 1px solid var(--border);
  border-radius: 12px;
}

/* ── Collapsible Table ── */
.plan-details {
  margin-top: 16px;
}
.plan-details summary {
  font-size: 13px; font-weight: 600; color: var(--primary);
  cursor: pointer; padding: 10px 0;
  transition: color 0.15s;
  list-style: none;
}
.plan-details summary::before { content: '▸ '; transition: transform 0.15s; }
.plan-details[open] summary::before { content: '▾ '; }
.plan-details summary:hover { color: var(--on-surface); }

.plan-table-wrap { overflow-x: auto; margin-top: 8px; border-radius: 10px; border: 1px solid var(--border); }
.plan-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.plan-table th {
  background: var(--surface-low); padding: 10px 14px;
  text-align: left; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--on-surface-muted); font-size: 11px;
  position: sticky; top: 0;
}
.plan-table td {
  padding: 8px 14px; border-top: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace; color: var(--on-surface-sec);
}
.plan-table tr:hover td { background: var(--surface-low); }

/* ── Debt Planner Specifics ── */
.plan-debt-row {
  display: grid; grid-template-columns: 1fr 100px 80px 80px 32px;
  gap: 8px; align-items: end; margin-bottom: 10px;
}
.plan-debt-row input {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-low); color: var(--on-surface); font-size: 13px;
  outline: none; font-family: 'IBM Plex Mono', monospace; min-width: 0;
  transition: border-color 0.15s;
}
.plan-debt-row input:focus { border-color: var(--primary); }
.plan-debt-row input[type="text"] { font-family: 'Inter', sans-serif; }
.plan-debt-remove {
  background: none; border: none; color: var(--on-surface-muted);
  cursor: pointer; font-size: 18px; padding: 6px; border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.plan-debt-remove:hover { color: var(--red-text, #ef4444); background: var(--surface-low); }

.plan-debt-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;
}
.plan-debt-strategy-card {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.plan-debt-strategy-card.winner {
  border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary);
}
.plan-debt-strategy-card .strat-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--on-surface-muted); margin-bottom: 8px;
}
.plan-debt-strategy-card .strat-value {
  font-size: 20px; font-weight: 700; color: var(--on-surface);
  font-family: 'IBM Plex Mono', monospace;
}
.plan-debt-strategy-card .strat-sub {
  font-size: 12px; color: var(--on-surface-sec); margin-top: 4px;
}

.plan-add-debt {
  background: var(--surface-low); border: 1px dashed var(--border);
  border-radius: 10px; padding: 10px 18px; font-size: 13px;
  font-weight: 600; color: var(--primary); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.plan-add-debt:hover { background: var(--surface-card); border-color: var(--primary); }

/* ── Investment Analysis ── */
.plan-invest-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.plan-invest-kpi {
  background: var(--surface-low); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; text-align: center;
}
.plan-invest-kpi-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--on-surface-muted); margin-bottom: 4px;
}
.plan-invest-kpi-value {
  font-size: 18px; font-weight: 700; font-family: 'IBM Plex Mono', monospace;
  color: var(--on-surface);
}
.plan-invest-source {
  grid-column: 1 / -1;
  font-size: 11px; color: var(--on-surface-muted);
  padding: 6px 12px; text-align: center;
  border-top: 1px solid var(--border);
  margin-top: -4px;
}

/* Disclaimer banner */
.invest-disclaimer {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-low); border: 1px solid var(--border);
  border-left: 3px solid var(--amber-text, #d97706);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 20px;
  font-size: 12px; line-height: 1.55; color: var(--on-surface-muted);
}
.invest-disclaimer svg { margin-top: 1px; color: var(--amber-text, #d97706); }
.invest-disclaimer-inline {
  margin-top: 12px; margin-bottom: 0; border-left-color: var(--border);
  font-size: 11px;
}

/* Sections */
.invest-section {
  border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px;
}
.invest-section:first-child, .invest-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.invest-section-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.invest-section-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 14px;
  font-weight: 700; color: var(--on-surface); letter-spacing: -0.2px;
}
.invest-section-action {
  padding: 6px 14px !important; font-size: 12px !important; font-weight: 600 !important;
  border-radius: 8px !important; border: 1px solid var(--primary) !important;
  background: transparent !important; color: var(--primary) !important;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.invest-section-action:hover { background: var(--primary) !important; color: #fff !important; }
.invest-section-hint {
  font-size: 13px; color: var(--on-surface-muted); line-height: 1.55;
  padding: 8px 0;
}

/* Risk Profile */
.invest-risk-result {
  background: var(--surface-low); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px;
}
.invest-risk-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.3px; margin-bottom: 10px;
}
.invest-risk-badge.conservative { background: rgba(59,130,246,0.12); color: #3b82f6; }
.invest-risk-badge.moderate { background: rgba(5,150,105,0.12); color: var(--primary); }
.invest-risk-badge.growth { background: rgba(139,92,246,0.12); color: var(--purple); }
.invest-risk-badge.aggressive { background: rgba(239,68,68,0.12); color: var(--red-text, #ef4444); }
.invest-risk-desc { font-size: 13px; color: var(--on-surface-sec); line-height: 1.55; }
.invest-risk-alloc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px; margin-top: 14px;
}
.invest-risk-alloc-item {
  text-align: center; padding: 10px 8px;
  background: var(--surface-card); border: 1px solid var(--border); border-radius: 8px;
}
.invest-risk-alloc-pct {
  font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 700;
  color: var(--on-surface); margin-bottom: 2px;
}
.invest-risk-alloc-label { font-size: 10px; color: var(--on-surface-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }

/* Holdings table */
.invest-holding-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.invest-holding-row:last-child { border-bottom: none; }
.invest-holding-ticker {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 700;
  color: var(--on-surface); min-width: 60px;
}
.invest-holding-name {
  flex: 1; font-size: 13px; color: var(--on-surface-sec);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.invest-holding-value {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600;
  color: var(--on-surface); text-align: right; min-width: 80px;
}
.invest-holding-gain {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600;
  text-align: right; min-width: 70px;
}
.invest-holding-gain.up { color: var(--green-text); }
.invest-holding-gain.down { color: var(--red-text, #ef4444); }
.invest-holding-remove {
  background: none; border: none; color: var(--on-surface-muted); cursor: pointer;
  font-size: 16px; padding: 2px 6px; border-radius: 6px; transition: color 0.15s, background 0.15s;
}
.invest-holding-remove:hover { color: var(--red-text, #ef4444); background: rgba(239,68,68,0.08); }

/* Benchmark */
.invest-benchmark-legend {
  display: flex; gap: 14px; font-size: 11px; color: var(--on-surface-muted);
}
.invest-benchmark-legend-item { display: flex; align-items: center; gap: 5px; }
.invest-benchmark-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.invest-benchmark-table {
  display: grid; grid-template-columns: 1fr repeat(3, auto);
  gap: 0; margin-top: 14px; font-size: 12px;
}
.invest-benchmark-table > div {
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.invest-benchmark-table > div:nth-child(-n+4) {
  font-weight: 700; color: var(--on-surface-muted); text-transform: uppercase;
  letter-spacing: 0.4px; font-size: 10px;
}
.invest-benchmark-cell-name { font-weight: 600; color: var(--on-surface); }
.invest-benchmark-cell-val { font-family: 'IBM Plex Mono', monospace; text-align: right; }
.invest-benchmark-note {
  font-size: 11px; color: var(--on-surface-muted); margin-top: 10px;
  padding: 8px 12px; background: var(--surface-low); border-radius: 8px;
  line-height: 1.5;
}

/* Metrics comparison table */
.invest-metrics-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 14px;
  border-radius: 10px; border: 1px solid var(--border);
}
.invest-metrics-table {
  display: grid; gap: 0; font-size: 12px; min-width: 480px;
}
.invest-metrics-table > div {
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.invest-metrics-table > div:last-child,
.invest-metrics-table > div:nth-last-child(-n+1) { border-bottom: none; }
.invest-metrics-header {
  font-weight: 700; color: var(--on-surface-muted); text-transform: uppercase;
  letter-spacing: 0.4px; font-size: 10px; background: var(--surface-low);
}
.invest-metrics-label {
  font-weight: 600; color: var(--on-surface); font-size: 11px;
}
.invest-metrics-val {
  font-family: 'IBM Plex Mono', monospace; text-align: right; font-size: 11px;
}
.invest-metrics-row-alt > div {
  background: var(--surface-low);
}

/* Portfolio Alignment */
.invest-alignment-score {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700;
}
.invest-alignment-score-ring {
  width: 48px; height: 48px; position: relative;
}
.invest-alignment-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.invest-alignment-score-ring circle {
  fill: none; stroke-width: 4; cx: 24; cy: 24; r: 20;
}
.invest-alignment-score-ring .ring-bg { stroke: var(--border); }
.invest-alignment-score-ring .ring-fg {
  stroke-linecap: round; transition: stroke-dashoffset 0.6s ease;
}
.invest-alignment-score-val {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700;
  font-family: 'IBM Plex Mono', monospace; color: var(--on-surface);
}
.invest-alignment-table {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 0; margin-top: 10px; font-size: 12px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
}
.invest-alignment-table > div {
  padding: 7px 12px; border-bottom: 1px solid var(--border);
}
.invest-alignment-table > div:nth-child(-n+4) {
  font-weight: 700; color: var(--on-surface-muted); text-transform: uppercase;
  letter-spacing: 0.4px; font-size: 10px; background: var(--surface-low);
}
.invest-alignment-row-even > div { background: var(--surface-low); }
.invest-alignment-status { font-size: 12px; text-align: center; }

@media (max-width: 600px) {
  .invest-metrics-table { font-size: 10px; }
  .invest-metrics-table > div { padding: 6px 8px; }
  .invest-alignment-table { font-size: 10px; }
  .invest-alignment-table > div { padding: 5px 8px; }
}

/* Recommendation cards */
.invest-rec-card {
  background: var(--surface-low); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 10px;
}
.invest-rec-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.invest-rec-icon { font-size: 18px; flex-shrink: 0; }
.invest-rec-title { font-size: 14px; font-weight: 700; color: var(--on-surface); }
.invest-rec-body { font-size: 13px; color: var(--on-surface-sec); line-height: 1.55; }
.invest-rec-body strong { color: var(--on-surface); }
.invest-rec-cta {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.invest-rec-cta button {
  background: none; border: none; color: var(--primary); font-size: 12px;
  font-weight: 600; cursor: pointer; padding: 0;
}
.invest-rec-cta button:hover { text-decoration: underline; }

/* Account type badge on holdings */
.invest-holding-acct {
  display: inline-block; font-size: 9px; font-weight: 600; padding: 1px 5px;
  border-radius: 4px; margin-left: 6px; vertical-align: middle;
  background: var(--primary-bg, rgba(5,150,105,0.1)); color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.3px;
}

/* Select element for plan fields (account type, etc.) */
.plan-select {
  flex: 1; border: none; background: transparent; padding: 10px 14px;
  font-size: 14px; color: var(--on-surface); outline: none; min-width: 0;
  font-family: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}

/* Risk Quiz Modal */
.risk-quiz-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
  animation: fadeIn 0.2s ease-out;
}
.risk-quiz-modal {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 16px; width: 100%; max-width: 520px;
  max-height: 85vh; overflow-y: auto; padding: 28px 32px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.3);
}
.risk-quiz-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 20px;
  font-weight: 700; color: var(--on-surface); margin-bottom: 6px;
}
.risk-quiz-sub { font-size: 13px; color: var(--on-surface-muted); margin-bottom: 24px; line-height: 1.5; }
.risk-quiz-progress {
  height: 4px; border-radius: 2px; background: var(--border);
  margin-bottom: 24px; overflow: hidden;
}
.risk-quiz-progress-fill {
  height: 100%; border-radius: 2px; background: var(--primary);
  transition: width 0.3s ease;
}
.risk-quiz-question { font-size: 15px; font-weight: 600; color: var(--on-surface); margin-bottom: 16px; line-height: 1.5; }
.risk-quiz-options { display: flex; flex-direction: column; gap: 10px; }
.risk-quiz-option {
  display: block; width: 100%; text-align: left;
  background: var(--surface-low); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 14px 18px; cursor: pointer;
  font-size: 14px; color: var(--on-surface); line-height: 1.45;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.risk-quiz-option:hover { border-color: var(--primary); background: var(--surface-card); transform: translateX(4px); }
.risk-quiz-option.selected { border-color: var(--primary); background: rgba(5,150,105,0.06); }
.risk-quiz-footer { display: flex; justify-content: space-between; margin-top: 24px; gap: 12px; }
.risk-quiz-btn {
  padding: 10px 24px; border-radius: 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, opacity 0.15s;
}
.risk-quiz-btn-secondary { background: var(--surface-low); border: 1px solid var(--border); color: var(--on-surface-sec); }
.risk-quiz-btn-secondary:hover { background: var(--surface-card); }
.risk-quiz-btn-primary { background: var(--primary); border: none; color: #fff; }
.risk-quiz-btn-primary:hover { opacity: 0.9; }
.risk-quiz-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Add Holding Modal */
.holding-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
  animation: fadeIn 0.2s ease-out;
}
.holding-modal {
  background: var(--surface-card); border: 1px solid var(--border);
  border-radius: 16px; width: 100%; max-width: 440px;
  padding: 28px 32px; box-shadow: 0 24px 48px rgba(0,0,0,0.3);
}
.holding-modal-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 18px;
  font-weight: 700; color: var(--on-surface); margin-bottom: 20px;
}

@media (max-width: 768px) {
  .risk-quiz-modal { padding: 20px 18px; }
  .holding-modal { padding: 20px 18px; }
  .invest-holding-name { display: none; }
  .invest-risk-alloc { grid-template-columns: repeat(2, 1fr); }
}

/* ── Savings Goals ── */
.plan-goal-card {
  background: var(--surface-low); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 10px;
}
.plan-goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.plan-goal-name { font-weight: 700; font-size: 14px; color: var(--on-surface); }
.plan-goal-status {
  font-size: 11px; font-weight: 700; padding: 3px 10px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px;
}
.plan-goal-status.on-track { background: rgba(5,150,105,0.12); color: var(--primary); }
.plan-goal-status.behind { background: rgba(239,68,68,0.12); color: var(--red-text, #ef4444); }
.plan-goal-status.ahead { background: rgba(139,92,246,0.12); color: var(--purple); }

.plan-goal-progress {
  height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; margin-bottom: 8px;
}
.plan-goal-progress-fill {
  height: 100%; border-radius: 4px; background: var(--primary);
  transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.plan-goal-meta {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--on-surface-muted);
}
.plan-goal-meta .mono { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--on-surface-sec); }

/* ── Empty State ── */
.plan-empty {
  text-align: center; padding: 32px 20px;
}
.plan-empty-icon { font-size: 40px; margin-bottom: 12px; }
.plan-empty-title { font-family: 'Space Grotesk'; font-weight: 700; font-size: 16px; color: var(--on-surface); margin-bottom: 6px; }
.plan-empty-desc { font-size: 13px; color: var(--on-surface-muted); line-height: 1.5; max-width: 340px; margin: 0 auto; }

/* ── Market Pulse ── */

/* Search bar */
.market-search-wrap {
  position: relative;
  margin-bottom: 14px;
}
.market-search-box {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-low);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.market-search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.market-search-box input {
  flex: 1; border: none; background: transparent;
  font-size: 14px; color: var(--on-surface);
  outline: none; font-family: inherit;
}
.market-search-box input::placeholder {
  color: var(--on-surface-muted);
}

/* Search results dropdown */
.market-search-results {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 90;
  margin-top: 4px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.market-search-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border);
}
.market-search-item:last-child { border-bottom: none; }
.market-search-item:hover, .market-search-item.mkt-highlighted {
  background: var(--surface-low);
}
.market-search-item-left { min-width: 0; }
.market-search-item-symbol {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700; font-size: 13px; color: var(--on-surface);
}
.market-search-item-name {
  font-size: 12px; color: var(--on-surface-sec);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 240px; margin-top: 1px;
}
.market-search-item-type {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 8px; border-radius: 6px;
  background: var(--surface-low); color: var(--on-surface-muted);
  flex-shrink: 0;
}
.market-search-loading {
  padding: 16px; text-align: center;
  font-size: 12px; color: var(--on-surface-muted);
}

/* Watchlist pills */
.market-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.market-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px 4px 10px;
  border-radius: 8px;
  background: var(--surface-low);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 600;
  color: var(--on-surface);
  transition: background 0.1s;
}
.market-pill:hover {
  background: var(--surface-card);
}
.market-pill-x {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--on-surface-muted);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.market-pill-x:hover {
  background: var(--red-bg, rgba(239,68,68,0.12));
  color: var(--red-text, #ef4444);
}

/* Ticker rows */
.market-row {
  display: grid;
  grid-template-columns: 1fr 72px 96px;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.market-row:last-child { border-bottom: none; }
.market-row-loading { opacity: 0.55; }
.market-row-error   { opacity: 0.45; }

.market-row-left { min-width: 0; }
.market-row-symbol {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700; font-size: 14px; color: var(--on-surface);
  letter-spacing: 0.02em;
}
.market-row-name {
  font-size: 11px; color: var(--on-surface-muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.market-row-date {
  font-size: 11px; color: var(--on-surface-muted); margin-top: 2px;
}
.market-row-na {
  font-size: 12px; color: var(--on-surface-muted);
  text-align: right;
}

.market-row-sparkline {
  display: flex; align-items: center; justify-content: center;
}

.market-row-right { text-align: right; min-width: 0; }
.market-row-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px; font-weight: 600; color: var(--on-surface);
  white-space: nowrap;
}
.market-row-change {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 600; margin-top: 2px;
  white-space: nowrap;
}
.market-change-up   { color: #16a34a; }
.market-change-down { color: #dc2626; }

[data-theme="dark"] .market-change-up   { color: #4ade80; }
[data-theme="dark"] .market-change-down { color: #f87171; }

.market-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.market-footer-note { font-size: 11px; color: var(--on-surface-muted); }

.market-status {
  font-size: 12px; color: var(--on-surface-muted);
  margin-top: 8px; min-height: 16px;
}

.market-empty {
  text-align: center; padding: 28px 16px;
  font-size: 13px; color: var(--on-surface-muted);
}

/* Skeleton loading shimmer */
.market-skeleton {
  border-radius: 4px; background: var(--surface-low);
  animation: mktSkeletonPulse 1.4s ease infinite;
}
.market-sk-date   { height: 10px; width: 44px; margin-top: 4px; }
.market-sk-spark  { height: 28px; width: 72px; border-radius: 4px;
  background: var(--surface-low); animation: mktSkeletonPulse 1.4s ease infinite; }
.market-sk-price  { height: 14px; width: 64px; margin-left: auto; margin-bottom: 5px; }
.market-sk-change { height: 11px; width: 44px; margin-left: auto; }
@keyframes mktSkeletonPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .plan-card-header { padding: 16px 18px; }
  .plan-card-body { padding: 0 18px 18px; }
  .plan-debt-row { grid-template-columns: 1fr 1fr; }
  .plan-debt-compare { grid-template-columns: 1fr; }
  .plan-result-value { font-size: 26px; }
  .plan-toggle { padding: 7px 12px; font-size: 12px; }
  .market-row { grid-template-columns: 1fr 56px 80px; gap: 10px; }
  .market-row-price { font-size: 13px; }
  .market-row-change { font-size: 11px; }
}

/* ═══════════════════════════════════════════
   BUDGET VS ACTUAL PROGRESS BARS
   ═══════════════════════════════════════════ */
.budget-bars { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.budget-bar { display: flex; flex-direction: column; gap: 5px; }
.budget-bar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.budget-bar-label { font-size: 13px; font-weight: 600; color: var(--on-surface); display: flex; align-items: center; gap: 6px; }
.budget-bar-vals { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; white-space: nowrap; }
.budget-bar-track { height: 10px; border-radius: 6px; background: var(--border); position: relative; overflow: visible; }
.budget-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; min-width: 4px; }
.budget-bar-marker { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: var(--on-surface); opacity: 0.7; }
.budget-bar-pct { font-size: 11px; font-weight: 700; font-family: 'IBM Plex Mono', monospace; text-align: right; }
.budget-bar-pct.under { color: var(--green-text); }
.budget-bar-pct.warn { color: var(--amber-text, #d97706); }
.budget-bar-pct.over { color: var(--red-text); }
.budget-bar-row { padding: 8px 0; }
.budget-bar-row + .budget-bar-row { border-top: 1px solid var(--border); }

/* ═══════════════════════════════════════════
   CASH RUNWAY
   ═══════════════════════════════════════════ */
.cf-runway { display: flex; align-items: center; gap: 10px; padding: 10px 0 0; font-size: 13px; color: var(--on-surface-sec); flex-wrap: wrap; }
.cf-runway-icon { font-size: 16px; }
.cf-runway strong { font-family: 'IBM Plex Mono', monospace; }
.cf-runway-bar { flex: 1; min-width: 120px; height: 6px; border-radius: 4px; background: var(--border); position: relative; overflow: visible; }
.cf-runway-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.cf-runway-fill.safe { background: var(--green); }
.cf-runway-fill.warn { background: var(--amber, #d97706); }
.cf-runway-fill.danger { background: var(--red); }
.cf-runway-marker { position: absolute; top: -6px; font-size: 12px; transform: translateX(-50%); }
.chart-type-toggle {
  display: flex; gap: 4px; background: var(--surface-low); border-radius: 8px; padding: 2px;
}
.chart-toggle-btn {
  border: none; background: none; padding: 4px 10px; border-radius: 6px;
  font-size: 11px; cursor: pointer; color: var(--on-surface-muted);
  transition: all .15s ease;
}
.chart-toggle-btn.active {
  background: var(--surface); color: var(--on-surface); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ═══════════════════════════════════════════
   INLINE BUDGET TARGET SETTING
   ═══════════════════════════════════════════ */
.inline-target-form { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.inline-target-input {
  width: 72px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--primary); background: var(--surface-low);
  color: var(--on-surface); font-size: 12px; font-family: 'IBM Plex Mono', monospace;
  outline: none; text-align: right;
}
.inline-target-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.inline-target-save {
  padding: 3px 8px; border-radius: 6px; border: none;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.inline-target-cancel {
  padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--on-surface-muted); font-size: 11px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════
   SPENDING HEATMAP
   ═══════════════════════════════════════════ */
.heatmap-wrap { padding: 4px 0; }
.heatmap-grid { display: grid; grid-template-columns: 28px repeat(7, 1fr); gap: 3px; }
.heatmap-header { font-size: 10px; font-weight: 600; color: var(--on-surface-muted); text-align: center; padding: 2px 0; }
.heatmap-week-label { font-size: 9px; color: var(--on-surface-muted); display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; }
.heatmap-cell {
  aspect-ratio: 1; border-radius: 3px; min-height: 16px;
  background: var(--surface-low); cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.heatmap-cell:hover { transform: scale(1.3); z-index: 1; box-shadow: var(--shadow-sm); }
.heatmap-cell[title] { position: relative; }

/* ═══════════════════════════════════════════
   BILL TIMELINE
   ═══════════════════════════════════════════ */
.bill-timeline { padding: 12px 0; }
.bt-day { flex: 1; min-width: 44px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 8px; transition: background 0.15s; }
.bt-day.today { background: var(--primary-light); }
.bt-day-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--on-surface-muted); }
.bt-day-num { font-size: 13px; font-weight: 700; color: var(--on-surface); font-family: 'IBM Plex Mono', monospace; }
.bt-dots { display: flex; flex-direction: column; gap: 3px; min-height: 20px; }
.bt-dot { width: 10px; height: 10px; border-radius: 50%; cursor: pointer; transition: transform 0.1s; }
.bt-dot:hover { transform: scale(1.4); }
.bt-dot.paid { background: var(--green); }
.bt-dot.due { background: var(--amber, #d97706); }
.bt-dot.overdue { background: var(--red); animation: pulse-dot 1.5s ease infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.bill-timeline-track { position: relative; height: 12px; background: var(--surface-alt); border-radius: 6px; margin: 8px 0; }
.bill-timeline-today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--primary); border-radius: 1px; z-index: 2; }
.bill-timeline-today::after { content: '▼'; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 8px; color: var(--primary); }
.bill-timeline-dot { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--amber, #d97706); border: 2px solid var(--surface-card); z-index: 1; cursor: pointer; transition: transform 0.15s; }
.bill-timeline-dot:hover { transform: translate(-50%, -50%) scale(1.5); }
.bill-timeline-dot.paid { background: var(--green); }
.bill-timeline-dot.overdue { background: var(--red); animation: pulse-dot 1.5s ease infinite; }
.bill-timeline-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.bill-timeline-label { font-size: 11px; color: var(--on-surface-muted); }
.bill-timeline-label.paid { text-decoration: line-through; opacity: 0.6; }

/* ═══════════════════════════════════════════
   PLAN INSIGHTS HERO
   ═══════════════════════════════════════════ */
.plan-hero-insights {
  background: var(--surface-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.plan-hero-title { font-size: 15px; font-weight: 700; color: var(--on-surface); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.plan-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.plan-hero-item {
  background: var(--surface-low); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.plan-hero-item:hover { border-color: var(--primary); transform: translateY(-2px); }
.plan-hero-item-icon { font-size: 20px; margin-bottom: 8px; }
.plan-hero-item-val { font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.plan-hero-item-desc { font-size: 12px; color: var(--on-surface-sec); line-height: 1.5; }
.plan-hero-stat {
  background: var(--surface-low); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; text-align: center;
}
.plan-hero-stat-val { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 700; color: var(--on-surface); margin-bottom: 4px; }
.plan-hero-stat-label { font-size: 12px; color: var(--on-surface-muted); font-weight: 500; }

/* ═══════════════════════════════════════════
   RECURRING TRANSACTIONS CARD
   ═══════════════════════════════════════════ */
.recurring-list { display: flex; flex-direction: column; gap: 0; }
.recurring-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.recurring-row:last-child { border-bottom: none; }
.recurring-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--surface-low); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.recurring-info { flex: 1; min-width: 0; }
.recurring-name { font-size: 13px; font-weight: 600; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recurring-freq { font-size: 11px; color: var(--on-surface-muted); }
.recurring-amt { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 700; color: var(--red-text); white-space: nowrap; }
.recurring-action { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--primary); background: transparent; color: var(--primary); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.recurring-action:hover { background: var(--primary); color: #fff; }

/* ═══════════════════════════════════════════
   SAVINGS RATE BADGE (inline in line chart)
   ═══════════════════════════════════════════ */
.savings-rate-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  background: var(--purple-bg, rgba(124,58,237,0.1));
  color: var(--purple-text, #7c3aed);
  font-size: 11px; font-weight: 700; font-family: 'IBM Plex Mono', monospace;
  margin-left: 12px;
}

/* Responsive for new components */
@media (max-width: 768px) {
  .plan-hero-grid { grid-template-columns: 1fr; }
  .heatmap-grid { gap: 2px; }
  .heatmap-cell { min-height: 12px; }
  .bill-timeline { gap: 1px; }
  .bt-day { min-width: 36px; padding: 6px 1px; }
  .bt-day-num { font-size: 11px; }
  .budget-bar-header { flex-wrap: wrap; }
  .cf-runway-bar { min-width: 80px; }
}

/* ═══════════════════════════════════════════
   ASK — SMART FINANCIAL SEARCH
   ═══════════════════════════════════════════ */

/* Container: vertically centered hero → top-anchored on answer */
.ask-container {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 140px);
  padding: 24px 0;
  transition: justify-content 0.2s;
}
.ask-container.has-answer {
  justify-content: flex-start;
  min-height: auto;
}

/* Hero branding (hidden after answer) */
.ask-hero {
  text-align: center;
  margin-bottom: 28px;
  transition: opacity 0.2s, margin 0.2s;
}
.ask-container.has-answer .ask-hero { display: none; }
.ask-hero-icon { font-size: 36px; margin-bottom: 8px; }
.ask-hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--on-surface);
  margin: 0 0 6px;
}
.ask-hero-sub {
  font-size: 14px;
  color: var(--on-surface-muted);
  margin: 0;
  font-weight: 400;
}

/* Search bar */
.ask-search-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  background: var(--surface-card);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 4px 6px 4px 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
  gap: 8px;
  box-sizing: border-box;
}
.ask-search-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.ask-search-icon {
  flex-shrink: 0;
  color: var(--on-surface-muted);
  opacity: 0.5;
}
#ask-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--on-surface);
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  outline: none;
  padding: 12px 4px;
  min-width: 0;
}
#ask-input::placeholder { color: var(--on-surface-muted); }
#ask-submit {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, opacity 0.15s;
}
#ask-submit:hover { opacity: 0.88; transform: scale(1.04); }
#ask-submit:active { transform: scale(0.95); }

/* Suggested chips */
.ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  justify-content: center;
  width: 100%;
}
.ask-container.has-answer .ask-chips { justify-content: flex-start; }
.ask-chip {
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--on-surface-sec);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.35;
}
.ask-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--surface-low);
}
.ask-chip:active { transform: scale(0.97); }

/* Quick financial stats strip */
.ask-stats {
  width: 100%;
  margin-top: 24px;
}
.ask-container.has-answer .ask-stats { display: none !important; }
.ask-stats-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  margin-bottom: 10px;
  text-align: center;
}
.ask-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.ask-stat-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.ask-stat-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 3px;
}
.ask-stat-label {
  font-size: 11px;
  color: var(--on-surface-muted);
  font-weight: 500;
}

/* History thread */
.ask-history { width: 100%; }
.ask-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 4px;
  padding: 0 4px;
}
.ask-history-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--on-surface-muted);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ask-history-clear {
  font-size: 11px;
  font-weight: 600;
  color: var(--red-text, #dc2626);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.ask-history-clear:hover {
  background: rgba(220,38,38,0.08);
}

/* Answer card */
.ask-answer {
  width: 100%;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-top: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ask-answer-new {
  animation: askFadeIn 0.3s ease;
}
@keyframes askFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ask-answer-error {
  border-color: rgba(220,38,38,0.2);
}
.ask-answer-time {
  font-weight: 400;
  color: var(--on-surface-muted);
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.2px;
  text-transform: none;
}
.ask-answer-section {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.ask-answer-section:last-of-type { border-bottom: none; }
.ask-answer-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--on-surface-muted);
  margin-bottom: 8px;
}
.ask-answer-question {
  font-size: 15px;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.45;
}
.ask-answer-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--on-surface);
}

/* Math breakdown */
.ask-math-table { display: flex; flex-direction: column; gap: 2px; }
.ask-math-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 13px;
}
.ask-math-row.ask-math-total {
  border-top: 2px solid var(--border);
  padding-top: 11px;
  margin-top: 4px;
  font-weight: 700;
}
.ask-math-label { color: var(--on-surface-sec); }
.ask-math-value { color: var(--on-surface); font-weight: 600; }

/* Tool link */
.ask-answer-tool { padding: 14px 22px; border-top: 1px solid var(--border); }
.ask-answer-tool a {
  color: var(--primary); font-size: 13px; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  transition: opacity 0.15s;
}
.ask-answer-tool a:hover { opacity: 0.75; }

/* Confidence + disclaimer */
.ask-answer-meta {
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.ask-confidence { font-size: 12px; font-weight: 600; }
.ask-disclaimer { font-size: 11px; color: var(--on-surface-muted); font-style: italic; }

/* Loading — shimmer skeleton shaped like the answer card so the page
   doesn't jump when the response arrives. The old bare spinner was
   centered at 48px height, which caused a ~400px layout shift the
   moment the answer rendered. */
.ask-loading {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 16px; padding: 24px 0 32px; width: 100%;
}
.ask-skel {
  width: 100%;
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
}
.ask-skel-label {
  width: 84px; height: 10px;
  background: var(--border);
  border-radius: 4px;
  margin-bottom: 10px;
}
.ask-skel-line {
  height: 14px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: linear-gradient(
    90deg,
    var(--border) 0%,
    var(--surface-mid) 50%,
    var(--border) 100%
  );
  background-size: 200% 100%;
  animation: askShimmer 1.4s ease-in-out infinite;
}
.ask-skel-line-q    { width: 65%; height: 18px; margin-bottom: 4px; }
.ask-skel-line-full { width: 100%; }
.ask-skel-line-85   { width: 85%; }
.ask-skel-line-60   { width: 60%; }
@keyframes askShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}
.ask-loading-text {
  font-size: 13px;
  color: var(--on-surface-muted);
  font-weight: 500;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .ask-skel-line { animation: none; }
}

/* No-data nudge (compact inline, not a big empty state) */
.ask-empty {
  width: 100%;
  text-align: center;
  margin-top: 16px;
}
.ask-empty-nudge {
  font-size: 13px;
  color: var(--on-surface-muted);
  background: var(--surface-low);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  display: inline-block;
}
.ask-empty-nudge a { color: var(--primary); font-weight: 600; text-decoration: none; }
.ask-empty-nudge a:hover { text-decoration: underline; }

/* Rate limit */
.ask-rate-limit {
  text-align: center; padding: 20px;
  color: var(--on-surface-muted); font-size: 14px;
  background: var(--surface-card); border-radius: 12px;
  border: 1px solid var(--border); margin-top: 16px; width: 100%;
  box-sizing: border-box;
}

/* ── Ask FAB (mobile only) ── */
.ask-fab {
  display: none;
  position: fixed; bottom: 78px; right: 16px;
  width: 50px; height: 50px;
  border-radius: 50%; border: none;
  background: var(--primary); color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  cursor: pointer; z-index: 100;
  transition: transform 0.2s, box-shadow 0.2s;
  align-items: center; justify-content: center;
}
.ask-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,0,0,0.22); }
.ask-fab:active { transform: scale(0.94); }
.ask-fab-hidden { display: none !important; }

/* ── Ask responsive ── */
@media (max-width: 768px) {
  .ask-fab { display: flex; }
  .ask-container { min-height: calc(100vh - 180px); padding: 16px 0; }
  .ask-hero { margin-bottom: 20px; }
  .ask-hero-icon { font-size: 28px; }
  .ask-hero-title { font-size: 20px; }
  .ask-hero-sub { font-size: 13px; }

  .ask-search-wrap { padding: 3px 4px 3px 14px; }
  #ask-input { font-size: 14px; padding: 10px 4px; }
  #ask-submit { width: 38px; height: 38px; border-radius: 10px; }

  .ask-chips {
    flex-wrap: nowrap; overflow-x: auto;
    padding: 2px 24px 6px 2px;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-snap-type: x proximity;
    /* Subtle fade on the right edge hints at more content */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .ask-chips::-webkit-scrollbar { display: none; }
  .ask-chip { flex-shrink: 0; font-size: 12px; padding: 8px 14px; scroll-snap-align: start; }

  .ask-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ask-stat-card { padding: 10px 12px; }
  .ask-stat-val { font-size: 15px; }

  .ask-answer-section { padding: 14px 16px; }
  .ask-answer-meta { padding: 10px 16px; }
  .ask-answer-tool { padding: 12px 16px; }
  .ask-math-row { font-size: 12px; }
}

@media (max-width: 480px) {
  .ask-hero-title { font-size: 18px; }
  .ask-answer-question { font-size: 14px; }
  .ask-answer-text { font-size: 13px; }
  .ask-answer-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ask-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .ask-container { max-width: 600px; }
}

/* ═══════════════════════════════════════════
   TOUCH TARGETS — WCAG 2.5.5 re-enforcement
   ═══════════════════════════════════════════
   Earlier responsive blocks (820px, 540px, 480px) intentionally shrink
   some controls below 44px for visual density. That's fine on a mouse,
   but on touch devices it fails WCAG 2.5.5. This block runs last in
   source order and re-forces the 44px minimum on elements people tap
   most often. Scoped to (hover: none) AND (pointer: coarse) so it
   only fires on genuine touch devices, not small-window desktops. */
@media (hover: none) and (pointer: coarse) {
  .settings-close,
  .topbar-right .btn,
  .topbar-right .btn-primary,
  .status-select,
  .cat-select,
  .tx-cat-select,
  #tx-search,
  #tx-cat-filter,
  #tx-sort,
  #tx-month-jump,
  #tx-page-size,
  .cf-period-badge,
  .ask-chip,
  #ask-submit {
    min-height: 44px;
    min-width: 44px;
  }
  /* Settings close-× button: square 44×44 (was 36×36) */
  .settings-close { width: 44px; height: 44px; }
  /* Ask submit button: square 44×44 (was 38×38 on mobile) */
  #ask-submit { width: 44px; height: 44px; }
  /* Period tab edit/delete are hover-revealed secondary controls.
     Bump from 24px → 32px so they're at least AAA-close without
     visually dominating the tab. Paired with an inset hit-zone. */
  .period-tab-del,
  .period-tab-edit {
    width: 32px; height: 32px; font-size: 14px; line-height: 32px;
  }
  .period-tab-del { right: -12px; top: -12px; }
  .period-tab-edit { left: -12px; top: -12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PRINT / SAVE-AS-PDF
   Triggered by Export → Print / Save as PDF (exportPdfReport()).
   Goal: produce a clean, full-width, black-on-white "report" of whatever
   page the user is currently viewing. Not every interactive affordance
   makes sense on paper — nav, modals, FAB, inline edit buttons, etc.
   are hidden; the core content (hero cards, KPIs, tables, charts) stays.
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  /* Force light background + black text regardless of theme. Charts
     and other canvas elements still render with their on-screen colors. */
  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Hide interactive chrome that doesn't belong in a printed report. */
  .sidebar,
  .mobile-nav,
  .ask-fab,
  .fab,
  .fab-menu,
  .topbar-right,
  .period-tab-edit,
  .period-tab-del,
  .section-action,
  #export-modal,
  .settings-overlay,
  #login-overlay,
  .demo-banner,
  .ptr-indicator,
  .toast,
  .modal-backdrop,
  [onclick*="openSettings"],
  button.btn-primary,
  button.btn-secondary {
    display: none !important;
  }

  /* Let content flow edge-to-edge — no sidebar offset. */
  main, .main-content, .page, .view, .content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Keep cards / sections from being split across pages when possible. */
  .card, .kpi-card, .cf-card, .acc-row, .bill-row,
  .plan-hero-stat, .nw-pill, canvas {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Shadow and gradient chrome reads as fuzzy noise on paper. */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Page margins — modest, readable. */
  @page {
    size: auto;
    margin: 12mm 10mm;
  }

  /* Show full URL after links so a printed report is self-contained. */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 10px;
    color: #555;
  }
  /* but not for internal anchors, JS handlers, or mailto */
  a[href^="#"]:after,
  a[href^="javascript:"]:after,
  a[href^="mailto:"]:after { content: ""; }
}