:root {
  /* SpendBeacon 3.0 authoritative design tokens */
  --color-bg: #050814;
  --color-bg-raised: #081126;
  --color-surface: rgba(14, 25, 51, 0.9);
  --color-surface-strong: rgba(18, 32, 61, 0.98);
  --color-surface-soft: rgba(255, 255, 255, 0.045);
  --color-border: rgba(174, 202, 232, 0.14);
  --color-border-strong: rgba(174, 202, 232, 0.24);
  --color-text: #f7faff;
  --color-text-muted: #a5b3c5;
  --color-text-subtle: #7f90a7;
  --color-primary: #4f8cff;
  --color-primary-strong: #2f6fe4;
  --color-success: #2fd29a;
  --color-warning: #f2b84b;
  --color-error: #f06d78;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-control: 12px;
  --radius-card: 20px;
  --radius-modal: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.32);
  --shadow-card-hover: 0 22px 56px rgba(0, 0, 0, 0.38);
  --shadow-modal: 0 28px 80px rgba(0, 0, 0, 0.52);
  --shadow-focus: 0 0 0 3px rgba(79, 140, 255, 0.28);
  --inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  --duration-fast: 160ms;
  --duration-standard: 240ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-standard: var(--duration-standard) var(--ease-standard);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", ui-monospace, monospace;
  --text-hero: clamp(42px, 12vw, 60px);
  --text-page-title: clamp(28px, 7vw, 36px);
  --text-section-title: 20px;
  --text-card-title: 16px;
  --text-body: 14px;
  --text-caption: 12px;
  --text-tab: 11px;
  --weight-regular: 500;
  --weight-medium: 650;
  --weight-bold: 800;
  --weight-black: 900;

  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Compatibility aliases for every historical presentation layer */
  --bg: var(--color-bg);
  --bg2: var(--color-bg-raised);
  --card: var(--color-surface);
  --card-glass: var(--color-surface);
  --surface-elevated: var(--color-surface-soft);
  --surface-soft: var(--color-surface-soft);
  --line: var(--color-border);
  --line-hover: var(--color-border-strong);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --muted2: var(--color-text-subtle);
  --accent: var(--color-primary);
  --accent-strong: var(--color-primary-strong);
  --accent-glow: rgba(79, 140, 255, 0.24);
  --success: var(--color-success);
  --success-glow: rgba(47, 210, 154, 0.22);
  --warn: var(--color-warning);
  --warn-glow: rgba(242, 184, 75, 0.22);
  --danger: var(--color-error);
  --danger-glow: rgba(240, 109, 120, 0.22);
  --gold: var(--color-warning);
  --purple: var(--color-primary);
  --shadow: var(--shadow-card);
  --shadow-lg: var(--shadow-modal);
  --radius: var(--radius-card);
  --radius-sm: var(--radius-control);
  --transition: var(--transition-standard);
  --premium-edge: var(--color-border);
  --premium-edge-strong: var(--color-border-strong);
  --premium-surface: var(--color-surface);
  --premium-focus: var(--color-primary);
  --conversion-bg: var(--color-bg);
  --conversion-bg-soft: var(--color-bg-raised);
  --conversion-card: var(--color-surface);
  --conversion-card-strong: var(--color-surface-strong);
  --conversion-line: var(--color-border);
  --conversion-line-strong: var(--color-border-strong);
  --conversion-text: var(--color-text);
  --conversion-muted: var(--color-text-muted);
  --conversion-green: var(--color-success);
  --conversion-blue: var(--color-primary);
  --conversion-cyan: var(--color-primary);
  --conversion-amber: var(--color-warning);
  --conversion-red: var(--color-error);
  --wow-glass: var(--color-surface);
  --wow-glass-strong: var(--color-surface-strong);
  --wow-border: var(--color-border);
  --wow-border-hot: rgba(47, 210, 154, 0.34);
  --wow-shadow: var(--shadow-modal);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color: var(--text); min-height: 100vh; min-height: 100dvh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.hidden { display: none !important; }

.continuous-ledger-dashboard { margin-bottom: 14px; }
.card.continuous-ledger-hero {
  border-color: rgba(61, 214, 166, 0.24) !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(61, 214, 166, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(13, 29, 34, 0.98), rgba(15, 23, 31, 0.98)) !important;
}
.continuous-ledger-heading,
.continuous-ledger-equation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.continuous-ledger-heading h2 { margin: 4px 0 0; max-width: 620px; }
.continuous-ledger-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.continuous-ledger-metric {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.continuous-ledger-metric span,
.continuous-ledger-metric small { display: block; color: var(--muted); }
.continuous-ledger-metric strong {
  display: block;
  margin: 6px 0 4px;
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.continuous-ledger-metric-primary { border-color: rgba(61, 214, 166, 0.2); }
.continuous-ledger-account-negative { color: #fecdd3 !important; }
.continuous-ledger-breakdown { margin-top: 12px; }
.continuous-ledger-equation-row {
  padding: 10px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.continuous-ledger-equation-row strong { font-variant-numeric: tabular-nums; }
.continuous-ledger-equation-result { margin-top: 4px; border-top: 1px solid rgba(61, 214, 166, 0.22); }
.continuous-ledger-equation-final { color: #a7f3d0; border-bottom: 0; font-size: 1.05rem; }
.financial-coaching-card {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 16px;
  background: rgba(30, 64, 175, 0.08);
}
.financial-coaching-rule { border-radius: 999px; background: linear-gradient(180deg, #60a5fa, #34d399); }
.financial-coaching-card p { margin-top: 6px; color: #e2e8f0; line-height: 1.55; }
.financial-coaching-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.financial-coaching-setting-row h2 { margin-bottom: 4px; }
.toggle-switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.toggle-switch input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-switch span { position: absolute; inset: 0; border-radius: 999px; background: #334155; transition: var(--transition); }
.toggle-switch span::after { content: ''; position: absolute; width: 22px; height: 22px; top: 3px; left: 3px; border-radius: 50%; background: #f8fafc; transition: var(--transition); }
.toggle-switch input:checked + span { background: #059669; }
.toggle-switch input:checked + span::after { transform: translateX(20px); }
.toggle-switch input:focus-visible + span { outline: 2px solid #93c5fd; outline-offset: 3px; }

body.continuous-ledger-dashboard-enabled #continuousLedgerDashboard { display: block !important; }
body.continuous-ledger-dashboard-enabled .conversion-safe-card,
body.continuous-ledger-dashboard-enabled #overspendRecoveryPanel,
body.continuous-ledger-dashboard-enabled #homeNextMoveCard,
body.continuous-ledger-dashboard-enabled .money-control-centre-card,
body.continuous-ledger-dashboard-enabled #homeMoreDetailDetails,
body.continuous-ledger-dashboard-enabled #homeForecastDetails,
body.continuous-ledger-dashboard-enabled .legacy-cycle-breakdown { display: none !important; }

@media (max-width: 680px) {
  .continuous-ledger-grid { grid-template-columns: 1fr; }
  .continuous-ledger-heading { align-items: flex-start; }
}
.mono { font-family: 'SF Mono', 'Fira Code', monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.app {
  max-width: 620px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  padding: 16px 16px calc(100px + var(--safe-bottom));
}

.hero, .card, details.collapse {
  background: var(--card-glass); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 16px;
  box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: all var(--transition);
}
.hero:hover, .card:hover { border-color: var(--line-hover); background: rgba(20,30,63,0.92); }
.hero { padding: 24px; }
.card { padding: 20px; }

.logoRow { display: flex; gap: 14px; align-items: center; }
.logo {
  width: 60px; height: 60px; border-radius: 18px;
  background: linear-gradient(135deg, #1e293b, #334155);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,0.5); flex-shrink: 0;
  transition: all var(--transition);
}
.logo:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.6); }
.logo img { width: 100%; height: 100%; object-fit: cover; }
.title { font-size: 28px; font-weight: 900; letter-spacing: -0.8px; line-height: 1.1; }
.sub { font-size: 13px; color: var(--muted); margin-top: 2px; letter-spacing: 0.2px; }

.notice {
  margin-top: 12px; border-radius: 18px; padding: 14px 18px;
  font-size: 13px; line-height: 1.5; font-weight: 500;
  display: flex; align-items: center; gap: 12px;
  transition: all var(--transition);
  backdrop-filter: blur(8px);
}
.notice::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.ok { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); color: #bbf7d0; }
.ok::before { background: var(--success); box-shadow: 0 0 8px var(--success-glow); }
.warnBox { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); color: #fde68a; }
.warnBox::before { background: var(--warn); box-shadow: 0 0 8px var(--warn-glow); }
.dangerBox { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: #fecaca; }
.dangerBox::before { background: var(--danger); box-shadow: 0 0 8px var(--danger-glow); }
.sync { background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.25); color: #bae6fd; }
.sync::before { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.cycleLock { background: rgba(148,163,184,0.1); border: 1px solid rgba(148,163,184,0.2); color: #dbeafe; }
.cycleLock::before { background: #94a3b8; }

.label { font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.big { font-size: 48px; font-weight: 900; margin-top: 8px; letter-spacing: -1.2px; line-height: 1.05; }
.value { font-size: 28px; font-weight: 800; margin-top: 8px; letter-spacing: -0.6px; }
h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
h3 { margin: 0 0 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
h4 { margin: 0; font-size: 15px; font-weight: 700; }
.small { font-size: 13px; color: var(--muted); line-height: 1.5; }
.tiny { font-size: 12px; color: var(--muted); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
.between { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.mt-2 { margin-top: 2px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.my-join-copy { margin: 12px 0 8px; }
.flush-card { margin: 0; }
.flush-card-spaced { margin: 0 0 12px; }
.inset-copy { padding: 0 16px 10px; }
.inset-feed { margin: 0 12px 12px; }
.score-layout { display: flex; align-items: center; gap: 20px; }
.flex-1 { flex: 1; }
.w-auto { width: auto; }
.full-width { width: 100%; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.join-shared-budget-card {
  border-color: rgba(16, 185, 129, 0.28);
}
.join-invite-input {
  min-height: 56px;
  font-size: 18px;
  letter-spacing: 0.04em;
}
.join-invite-actions {
  align-items: stretch;
}
.join-invite-actions button {
  min-height: 48px;
}
.paywall-title { font-size: 28px; font-weight: 900; letter-spacing: -0.6px; margin-bottom: 6px; }
.paywall-feature-card { margin-bottom: 18px; padding: 16px; text-align: left; }
.skeleton-text,
.skeleton-block:empty {
  display: block;
  min-height: 1.1em;
  border-radius: 999px;
  color: transparent !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.055), rgba(255,255,255,0.11), rgba(255,255,255,0.055));
  background-size: 220% 100%;
  animation: skeletonSheen 1.4s ease-in-out infinite;
}
.skeleton-block:empty {
  min-height: 72px;
  border-radius: 16px;
}
@keyframes skeletonSheen {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

.stat {
  background: rgba(255,255,255,0.02); border: 1px solid var(--line);
  border-radius: 20px; padding: 16px; transition: all var(--transition);
  position: relative; overflow: hidden;
}
.stat:hover { border-color: var(--line-hover); background: rgba(255,255,255,0.04); }
.stat::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 18px 18px 0 0; opacity: 0; transition: opacity 0.3s ease;
}
.stat.good { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.25); }
.stat.good::after { background: var(--success); opacity: 1; }
.stat.good .value { color: #4ade80; }
.stat.caution { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); }
.stat.caution::after { background: var(--warn); opacity: 1; }
.stat.caution .value { color: #fbbf24; }
.stat.bad { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); }
.stat.bad::after { background: var(--danger); opacity: 1; }
.stat.bad .value { color: #f87171; }

input, select, button, summary { width: 100%; border: none; outline: none; border-radius: var(--radius-sm); font-size: 16px; font-family: inherit; }
input, select {
  padding: 14px 18px; background: rgba(255,255,255,0.03); color: #fff;
  border: 1px solid var(--line); transition: all var(--transition);
  font-size: 15px;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); background: rgba(255,255,255,0.05); }
input::placeholder { color: rgba(148,163,184,0.6); }
button {
  padding: 14px 18px; background: var(--accent); color: #fff;
  font-weight: 700; cursor: pointer; transition: all var(--transition);
  position: relative; overflow: hidden; font-size: 15px;
}
button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(59,130,246,0.3); }
button:active { transform: scale(0.98); }
button.secondary { background: rgba(255,255,255,0.08); color: #fff; }
button.secondary:hover { background: rgba(255,255,255,0.12); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
button.success { background: var(--success); }
button.success:hover { background: #059669; box-shadow: 0 8px 20px var(--success-glow); }
button.warn { background: var(--warn); color: #1c1917; }
button.warn:hover { background: #d97706; box-shadow: 0 8px 20px var(--warn-glow); }
button.danger { background: var(--danger); }
button.danger:hover { background: #dc2626; box-shadow: 0 8px 20px var(--danger-glow); }
button.slim { padding: 10px 12px; font-size: 14px; border-radius: 12px; }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
button .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; margin-right: 6px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

.item {
  background: rgba(255,255,255,0.02); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px; margin-top: 12px;
  transition: all var(--transition);
}
.item:hover { border-color: var(--line-hover); background: rgba(255,255,255,0.04); transform: translateY(-1px); }
.summaryRow {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.summaryRow:last-child { border-bottom: none; }

.pill {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.06); color: #cbd5e1; font-size: 12px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.08);
}
.shared-sync-chip {
  background: rgba(226,232,240,0.07) !important;
  border-color: rgba(226,232,240,0.13) !important;
  color: rgba(226,232,240,0.82) !important;
}

.tabs {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + var(--safe-bottom));
  width: min(620px, calc(100% - 28px));
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  background: rgba(10,14,39,0.92); border: 1px solid var(--line);
  border-radius: 24px; padding: 8px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 50;
  box-shadow: var(--shadow);
}
.tab {
  background: transparent; color: #64748b; border-radius: 16px;
  padding: 10px 4px; font-size: 11px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: all var(--transition);
}
.tab svg { width: 20px; height: 20px; }
.tab.active { background: rgba(59,130,246,0.15); color: #fff; border: 1px solid rgba(59,130,246,0.2); }
.tab:hover:not(.active) { color: #94a3b8; background: rgba(255,255,255,0.03); }

.fab {
  position: fixed; right: 20px; bottom: calc(94px + var(--safe-bottom));
  width: 62px; height: 62px; border-radius: 22px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px var(--accent-glow);
  cursor: pointer; z-index: 40; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.fab:hover { transform: scale(1.1) rotate(90deg); }
.fab svg { width: 28px; height: 28px; }

.overlay { position: fixed; inset: 0; background: rgba(2,6,23,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); }
.rebrand-welcome-modal { max-width: 560px; max-height: min(88vh, 760px); overflow-y: auto; }
.rebrand-welcome-modal h3 { margin: 6px 0 14px; }
.rebrand-welcome-copy { line-height: 1.55; }
.rebrand-welcome-copy p { margin: 0 0 12px; }
.rebrand-welcome-copy ul { margin: 0 0 16px; padding-left: 20px; }
.rebrand-welcome-copy li { margin: 6px 0; }
.rebrand-welcome-modal button { width: 100%; }

.onboarding-overlay {
  align-items: stretch;
  background:
    radial-gradient(circle at 50% 0%, rgba(16,185,129,0.13), transparent 34%),
    rgba(2,6,23,0.88);
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(14px + var(--safe-bottom));
}
.onboarding-modal {
  max-width: 520px;
  min-height: min(720px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(20,30,63,0.96), rgba(10,14,39,0.98));
  overflow: hidden;
}
.onboarding-topbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 4px 2px 14px;
}
.onboarding-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.onboarding-progress span {
  display: block;
  width: 16%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--success), #67e8f9);
  transition: width 0.35s ease;
}
button.onboarding-skip {
  width: auto;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-size: 13px;
}
.onboarding-step {
  flex: 1;
  min-height: 0;
  outline: none;
  display: flex;
}
.onboarding-card-inner {
  position: relative;
  width: 100%;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 28px 18px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)),
    rgba(255,255,255,0.02);
  overflow: hidden;
  animation: onboardingSlideIn 0.32s ease both;
}
.onboarding-orbit {
  position: absolute;
  inset: auto -84px -100px auto;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  border: 1px solid rgba(103,232,249,0.12);
  background: radial-gradient(circle, rgba(16,185,129,0.12), transparent 62%);
  pointer-events: none;
}
.onboarding-card-inner h3 {
  position: relative;
  margin: 0;
  max-width: 12ch;
  font-size: clamp(32px, 10vw, 48px);
  line-height: 0.98;
  letter-spacing: -1px;
}
.onboarding-copy {
  position: relative;
  max-width: 34ch;
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.55;
}
.onboarding-visual-wrap {
  position: relative;
  margin-top: 8px;
}
.onboarding-flow-visual {
  display: grid;
  grid-template-columns: 1fr 20px 1fr 20px 1.2fr;
  gap: 8px;
  align-items: center;
}
.onboarding-flow-visual span,
.onboarding-flow-visual strong {
  min-height: 64px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: #dbeafe;
}
.onboarding-flow-visual strong {
  background: rgba(16,185,129,0.16);
  color: #bbf7d0;
  border-color: rgba(16,185,129,0.28);
}
.onboarding-flow-visual i {
  height: 1px;
  background: rgba(148,163,184,0.5);
  position: relative;
}
.onboarding-flow-visual i::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(148,163,184,0.6);
  border-top: 1px solid rgba(148,163,184,0.6);
  transform: rotate(45deg);
}
.onboarding-example {
  display: grid;
  gap: 9px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(2,6,23,0.24);
  border: 1px solid rgba(255,255,255,0.07);
}
.onboarding-example div,
.onboarding-note {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #cbd5e1;
}
.onboarding-example div:last-child { border-bottom: 0; }
.onboarding-example strong { color: #fff; font-size: 18px; }
.onboarding-example .onboarding-total {
  margin-top: 4px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(16,185,129,0.14);
  border: 1px solid rgba(16,185,129,0.24);
}
.onboarding-example .onboarding-total strong { color: #bbf7d0; }
.onboarding-protection-grid,
.onboarding-choice-grid {
  display: grid;
  gap: 10px;
}
.onboarding-protection-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.onboarding-protection-grid div,
.onboarding-choice-card {
  min-height: 82px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e2e8f0;
  font-weight: 700;
}
.onboarding-choice-card {
  display: grid;
  gap: 7px;
  min-height: 104px;
}
.onboarding-choice-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
}
.onboarding-choice-card.is-protected {
  border-color: rgba(16,185,129,0.25);
  background: rgba(16,185,129,0.10);
}
.onboarding-note {
  display: block;
  border: 1px solid rgba(56,189,248,0.18);
  border-radius: 20px;
  padding: 16px;
  background: rgba(56,189,248,0.08);
  line-height: 1.5;
}
.onboarding-ready-mark {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(16,185,129,0.13);
  border: 1px solid rgba(16,185,129,0.28);
  box-shadow: 0 24px 70px rgba(16,185,129,0.16);
}
.onboarding-ready-mark span {
  width: 44px;
  height: 24px;
  border-left: 4px solid #bbf7d0;
  border-bottom: 4px solid #bbf7d0;
  transform: rotate(-45deg) translate(3px, -4px);
}
.onboarding-actions {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
  padding-top: 14px;
}
@keyframes onboardingSlideIn {
  from { opacity: 0; transform: translateX(18px) scale(0.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-card-inner { animation: none; }
}

.toast-container { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; width: min(400px, calc(100% - 40px)); }
.toast { background: var(--card-glass); border: 1px solid var(--line); border-radius: 20px; padding: 14px 20px; color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; gap: 12px; animation: toast-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.toast-success { border-left: 4px solid var(--success); }
.toast-error { border-left: 4px solid var(--danger); }
@keyframes toast-in { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast-out { transform: translateY(-20px); opacity: 0; transition: all 0.3s ease; }

.progressWrap { width: 100%; height: 10px; background: rgba(255,255,255,0.05); border-radius: 10px; margin: 12px 0; overflow: hidden; border: 1px solid var(--line); }
.progressBar { height: 100%; background: var(--accent); transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

.score-ring { position: relative; width: 80px; height: 80px; }
.ring-bg { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 6; }
.ring-fg { fill: none; stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s ease; }
.ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 900; }

.empty-state { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.3; }
.empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.empty-desc { font-size: 14px; line-height: 1.5; }

.linkish { color: var(--accent); font-weight: 700; cursor: pointer; text-decoration: none; }
.linkish:hover { text-decoration: underline; }
.linkish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  padding: 8px;
}

button:focus-visible,
.linkish:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}

.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bill-grid input.full, .bill-grid select.full, .bill-grid button.full { grid-column: span 2; }

.codebox { background: rgba(0,0,0,0.3); border: 1px solid var(--line); border-radius: 12px; padding: 14px; font-family: 'SF Mono', monospace; font-size: 14px; color: var(--accent); word-break: break-all; margin: 8px 0; }

.auth-hero { text-align: center; padding: 40px 20px; }
.auth-trust { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12px; }
.auth-logo { margin: 0 auto 20px; width: 80px; height: 80px; border-radius: 24px; }
.auth-status { margin-top: 24px; }
.auth-panel { margin-top: 16px; }
.auth-field-gap { margin-top: 10px; }
.auth-submit { margin-top: 14px; }
.auth-link-row { margin-top: 10px; }

.sinkingHeader { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.fundMeta { display: flex; gap: 20px; margin-top: 8px; }
.fundStat { flex: 1; }

.chart-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.chart-label { width: 100px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
.chart-bar { height: 100%; border-radius: 4px; transition: width 1s ease; }
.chart-amount { width: 80px; text-align: right; font-size: 13px; font-weight: 700; }

.loader-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.5s ease; }
.loader-overlay.fade-out { opacity: 0; pointer-events: none; }
.loader-spinner { width: 40px; height: 40px; border: 3px solid rgba(59,130,246,0.1); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.loader-message { margin-top: 16px; color: var(--muted); }

.offline-banner { position: fixed; top: 0; left: 0; right: 0; background: var(--danger); color: #fff; padding: 8px; text-align: center; font-size: 12px; font-weight: 700; z-index: 1001; transform: translateY(-100%); transition: transform 0.3s ease; }
.offline-banner.show { transform: translateY(0); }

.spend-flash { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--success); color: #fff; padding: 12px 24px; border-radius: 999px; font-weight: 700; box-shadow: 0 10px 25px var(--success-glow); opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 150; }
.spend-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.spend-flash-sub { opacity: 0.8; font-weight: 500; margin-left: 8px; }

@media (max-width: 480px) {
  .app { padding: 12px 12px calc(90px + var(--safe-bottom)); }
  .big { font-size: 40px; }
  .title { font-size: 24px; }
  .card { padding: 16px; }
  .join-invite-actions { gap: 10px; }
  .join-invite-input { min-height: 60px; font-size: 17px; }
  .tabs { bottom: calc(10px + var(--safe-bottom)); padding: 6px; }
  .tab { padding: 10px 4px; font-size: 11px; }
}


.bill-modal { max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; }
.toggle-line { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 13px; font-weight: 700; }
.toggle-line input { width: auto; accent-color: var(--accent); }
.item.is-inactive { opacity: 0.58; border-style: dashed; }
.warnPill { background: rgba(245, 158, 11, 0.14); color: #fbbf24; border-color: rgba(245, 158, 11, 0.25); margin-left: 6px; }

.badgeRow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.okPill { background: rgba(16,185,129,0.14); color: #bbf7d0; border-color: rgba(16,185,129,0.28); }
.warnPill { background: rgba(245,158,11,0.14); color: #fde68a; border-color: rgba(245,158,11,0.28); }
.role-locked { opacity: 0.55; cursor: not-allowed; }
button.role-locked { filter: grayscale(0.35); }
.owner-only-action.hidden { display: none !important; }


/* Decision Simulator: mobile overflow hardening */
.notice.decision-result {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 16px;
}
.notice.decision-result::before { display: none; }
.decision-head {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.decision-head strong,
.decision-head span {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  width: 100%;
  min-width: 0;
}
.decision-stat {
  min-width: 0;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 12px;
}
.decision-stat span,
.decision-impact span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .45px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.decision-stat strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(18px, 7vw, 28px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.decision-impact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}
.decision-impact > div {
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.decision-impact .full {
  grid-column: 1 / -1;
}
.decision-impact strong {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
@media (max-width: 380px) {
  .decision-grid,
  .decision-impact {
    grid-template-columns: 1fr;
  }
}

/* Alpha testing trust panel */
#alphaTestingPanel { overflow:hidden; }
#alphaTestingPanel .alpha-grid { min-width:0; }
#alphaTestingPanel .stat { min-width:0; overflow:hidden; }
#alphaTestingPanel .value, #alphaTestingPanel .label { overflow-wrap:anywhere; word-break:break-word; }
#alphaTestingPanel .row { flex-wrap:wrap; }
#alphaTestingPanel button { min-width:0; }


/* Main screen simplification: Home / Plan / Insights / Tools */
.compact-hero { padding-bottom: 18px; }
.compact-status { margin-top: 12px; background: transparent; border: 0; box-shadow: none; }
.compact-status > summary {
  width: auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,0.06);
  border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 800;
  list-style: none; cursor: pointer;
}
.compact-status > summary::-webkit-details-marker { display: none; }
.home-tabbar {
  position: sticky; top: 8px; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 0 0 16px; padding: 8px;
  background: rgba(10,14,39,0.88); border: 1px solid var(--line);
  border-radius: 22px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.24);
}
.home-tab {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  border-radius: 16px; padding: 11px 8px; font-size: 13px; font-weight: 850;
}
.home-tab:hover { transform: none; box-shadow: none; background: rgba(255,255,255,0.04); }
.home-tab.active {
  color: #fff; background: rgba(59,130,246,0.18); border-color: rgba(59,130,246,0.3);
}
.home-panel { animation: panelIn 0.18s ease-out; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.daily-focus-card .big { font-size: 52px; }

/* Trust Layer */
.trust-card { position: relative; overflow: hidden; }
.trust-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.trust-locked { border-color: rgba(239,68,68,0.42) !important; }
.trust-locked::after { box-shadow: inset 0 0 0 1px rgba(239,68,68,0.28), 0 0 28px rgba(239,68,68,0.08); }


/* Explain My Money engine */
.explain-money summary { font-weight: 800; }
.explainMoneyRows { display: grid; gap: 4px; }
.explainTotal { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-weight: 900; }
.explainDaily { font-size: 17px; font-weight: 900; }
.explainDaily strong { color: var(--success); }
.explainBufferBox { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.035); }
.explainFootnote { margin-top: 10px; color: var(--muted); line-height: 1.4; }

/* Explain My Money: keep the breakdown inside its own scroll area and make it easy to close. */
.explain-money[open] { overflow: visible; }
.explain-money[open] .collapseBody {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(173,201,255,0.12);
  border-radius: 18px;
  background: rgba(5,10,24,0.18);
}
.explainMoneyScroll {
  max-height: min(48vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.audit-breakdown {
  display: grid;
  gap: 10px;
}
.audit-total-rows {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
}
.audit-final-safe strong {
  color: var(--success);
}
.audit-included-details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  overflow: hidden;
}
.audit-included-details summary {
  padding: 11px 12px;
  cursor: pointer;
  font-weight: 900;
}
.audit-included-list {
  display: grid;
  gap: 6px;
  padding: 0 10px 10px;
}
.audit-included-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.audit-included-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.audit-included-row b {
  overflow-wrap: anywhere;
}
.audit-included-row small,
.audit-empty {
  color: var(--muted);
}
.audit-included-row strong {
  white-space: nowrap;
}
.explainCloseBtn {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
}
@media (max-width: 480px) {
  .explainMoneyScroll { max-height: 42vh; }
}


/* Today Command Centre — paid-app habit layer */
.command-centre {
  border-color: rgba(59,130,246,0.28);
  background:
    radial-gradient(circle at top right, rgba(59,130,246,0.16), transparent 34%),
    rgba(255,255,255,0.03);
}
.command-centre h2 { margin: 2px 0 0; }
.command-head { align-items: flex-start; }
.command-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.command-metrics .value { font-size: 22px; }
.command-actions {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(2,6,23,0.28);
}
.command-action {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.35;
}
.command-action:last-child { border-bottom: none; padding-bottom: 0; }
.command-action span {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59,130,246,0.16);
  color: #bfdbfe;
  font-weight: 900;
  font-size: 12px;
}
.command-action strong { font-weight: 700; color: var(--text); }
.command-footnote { margin-top: 12px; line-height: 1.45; }
.command-good { border-color: rgba(34,197,94,0.28); }
.command-pressure { border-color: rgba(245,158,11,0.34); }
.command-danger,
.command-locked { border-color: rgba(239,68,68,0.38); }

@media (max-width: 430px) {
  .command-metrics { grid-template-columns: 1fr; }
}


/* Weekly Reality Check — retention and paid trust loop */
.weekly-reality-card {
  border-color: rgba(168,85,247,0.26);
  background:
    radial-gradient(circle at top left, rgba(168,85,247,0.14), transparent 34%),
    rgba(255,255,255,0.03);
}
.weekly-reality-card .value { font-size: 21px; }
.weekly-actions { margin-top: 14px; }
.weekly-good { border-color: rgba(34,197,94,0.28); }
.weekly-pressure { border-color: rgba(245,158,11,0.34); }
.weekly-danger,
.weekly-locked { border-color: rgba(239,68,68,0.38); }


/* Reconciliation Coach — mismatch correction layer */
.reconciliation-card {
  border-color: rgba(14,165,233,0.28);
  background:
    radial-gradient(circle at top right, rgba(14,165,233,0.14), transparent 34%),
    rgba(255,255,255,0.03);
}
.reconciliation-card .value { font-size: 21px; }
.reconciliation-actions { margin-top: 14px; }
.reconciliation-matched { border-color: rgba(34,197,94,0.28); }
.reconciliation-ahead { border-color: rgba(14,165,233,0.34); }
.reconciliation-short,
.reconciliation-locked { border-color: rgba(239,68,68,0.38); }
@media (max-width: 430px) {
  .reconciliation-card .row { grid-template-columns: 1fr; }
}

/* Premium Visual Upgrade — BudgetFlow paid-app polish */
html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 18% -4%, rgba(96,165,250,0.22), transparent 32%),
    radial-gradient(circle at 92% 4%, rgba(24,197,143,0.14), transparent 28%),
    radial-gradient(circle at 50% 110%, rgba(155,124,255,0.16), transparent 36%),
    linear-gradient(180deg, #050814 0%, #09142b 52%, #050814 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent 72%);
}

.app {
  max-width: 650px;
  padding: 18px 18px calc(116px + var(--safe-bottom));
}

.hero, .card, details.collapse, .premium-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.075), rgba(255,255,255,0.022)),
    var(--card-glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), var(--inner-highlight);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.hero:hover, .card:hover, details.collapse:hover {
  border-color: var(--line-hover);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)),
    rgba(17, 27, 58, 0.78);
}
.hero {
  position: relative;
  overflow: hidden;
  padding: 22px;
}
.hero::after, .daily-focus-card::after, .command-centre::after, .trust-card::before, .weekly-reality-card::after, .reconciliation-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.13), transparent 32%, transparent 68%, rgba(96,165,250,0.08));
  opacity: 0.75;
}
.card, details.collapse { position: relative; overflow: hidden; }

.logo {
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.24), transparent 28%),
    linear-gradient(135deg, #0f2b63, #123c84 52%, #0d9488);
  border-color: rgba(191,219,254,0.24);
  box-shadow: 0 18px 44px rgba(37,99,235,0.28), inset 0 1px 0 rgba(255,255,255,0.16);
}
.title {
  letter-spacing: -1.05px;
  background: linear-gradient(180deg, #ffffff, #dbeafe 72%, #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sub { color: #aebbd0; }

.label {
  color: #98a6bd;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.115em;
}
.big {
  font-size: clamp(42px, 12vw, 64px);
  letter-spacing: -2px;
  text-shadow: 0 10px 34px rgba(96,165,250,0.14);
}
.value {
  letter-spacing: -1px;
  color: #f8fbff;
}
.small { color: #a8b3c7; }

.pill {
  background: linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.045));
  color: #d8e4f7;
  border-color: rgba(191,219,254,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
.okPill { color: #c8ffe8; border-color: rgba(24,197,143,0.28); background: rgba(24,197,143,0.12); }
.warnPill { color: #ffedbd; border-color: rgba(245,184,75,0.32); background: rgba(245,184,75,0.12); }

.notice {
  border-radius: 22px;
  padding: 15px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.ok { background: linear-gradient(135deg, rgba(24,197,143,0.17), rgba(24,197,143,0.055)); border-color: rgba(24,197,143,0.30); }
.warnBox { background: linear-gradient(135deg, rgba(245,184,75,0.17), rgba(245,184,75,0.055)); border-color: rgba(245,184,75,0.30); }
.dangerBox { background: linear-gradient(135deg, rgba(251,93,101,0.18), rgba(251,93,101,0.06)); border-color: rgba(251,93,101,0.33); }
.sync { background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(96,165,250,0.045)); border-color: rgba(96,165,250,0.24); }

.stat {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.025)),
    rgba(8,15,35,0.42);
  border-color: rgba(173,201,255,0.11);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}
.stat:hover { transform: translateY(-1px); }
.stat.good { background: linear-gradient(180deg, rgba(24,197,143,0.16), rgba(24,197,143,0.055)); }
.stat.caution { background: linear-gradient(180deg, rgba(245,184,75,0.16), rgba(245,184,75,0.055)); }
.stat.bad { background: linear-gradient(180deg, rgba(251,93,101,0.16), rgba(251,93,101,0.055)); }

button {
  min-height: 48px;
  border-radius: 18px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 12px 28px rgba(37,99,235,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
}
button:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(37,99,235,0.30), inset 0 1px 0 rgba(255,255,255,0.14); }
button.success {
  background: linear-gradient(135deg, #20d19a, #059669);
  box-shadow: 0 14px 32px rgba(5,150,105,0.25), inset 0 1px 0 rgba(255,255,255,0.15);
}
button.secondary {
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.045));
  border: 1px solid rgba(191,219,254,0.12);
  color: #e9f1ff;
}
button.warn { background: linear-gradient(135deg, #f6c15f, #d97706); color: #141007; }
button.danger { background: linear-gradient(135deg, #fb7185, #dc2626); }
input, select {
  min-height: 48px;
  background: rgba(5,10,24,0.42);
  border-color: rgba(173,201,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}
input:focus, select:focus {
  border-color: rgba(96,165,250,0.75);
  box-shadow: 0 0 0 4px rgba(96,165,250,0.16), inset 0 1px 0 rgba(255,255,255,0.06);
}

.home-tabbar {
  top: calc(8px + env(safe-area-inset-top, 0px));
  padding: 7px;
  gap: 6px;
  background: rgba(5, 9, 24, 0.72);
  border-color: rgba(173,201,255,0.12);
  border-radius: 28px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.07);
}
.home-tab {
  min-height: 48px;
  border-radius: 21px;
  font-size: 14px;
  box-shadow: none;
}
.home-tab.active {
  background: linear-gradient(135deg, rgba(59,130,246,0.40), rgba(37,99,235,0.22));
  border-color: rgba(147,197,253,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 10px 24px rgba(37,99,235,0.18);
}

.tabs {
  width: min(620px, calc(100% - 30px));
  bottom: calc(12px + var(--safe-bottom));
  padding: 8px;
  border-radius: 30px;
  background: rgba(5, 9, 24, 0.80);
  border-color: rgba(173,201,255,0.12);
  box-shadow: 0 26px 70px rgba(0,0,0,0.56), inset 0 1px 0 rgba(255,255,255,0.075);
}
.tab {
  border-radius: 22px;
  color: #748198;
}
.tab.active {
  background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(37,99,235,0.18));
  border-color: rgba(147,197,253,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.tab svg { filter: drop-shadow(0 8px 14px rgba(0,0,0,0.18)); }

.daily-focus-card {
  border-color: rgba(96,165,250,0.23);
  background:
    radial-gradient(circle at 85% 6%, rgba(96,165,250,0.18), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(24,197,143,0.11), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,0.072), rgba(255,255,255,0.025)),
    rgba(17,27,58,0.74);
}
.command-centre {
  border-color: rgba(96,165,250,0.28);
  background:
    radial-gradient(circle at 92% 5%, rgba(96,165,250,0.22), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(155,124,255,0.12), transparent 32%),
    rgba(17,27,58,0.72);
}
.weekly-reality-card {
  background:
    radial-gradient(circle at 7% 7%, rgba(155,124,255,0.22), transparent 34%),
    rgba(17,27,58,0.72);
}
.reconciliation-card {
  background:
    radial-gradient(circle at 92% 5%, rgba(14,165,233,0.20), transparent 34%),
    rgba(17,27,58,0.72);
}
.trust-card {
  background:
    radial-gradient(circle at 50% -8%, rgba(24,197,143,0.17), transparent 34%),
    rgba(17,27,58,0.72);
}

.command-actions, .weekly-actions, .reconciliation-actions, .explainBufferBox, .codebox {
  background: rgba(5,10,24,0.36);
  border-color: rgba(173,201,255,0.105);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.command-action span {
  background: linear-gradient(135deg, rgba(96,165,250,0.24), rgba(37,99,235,0.16));
  color: #dbeafe;
}
.summaryRow {
  border-bottom-color: rgba(173,201,255,0.09);
}
.item {
  background: rgba(5,10,24,0.30);
  border-color: rgba(173,201,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

.score-ring { filter: drop-shadow(0 14px 28px rgba(24,197,143,0.14)); }
.ring-bg { stroke: rgba(255,255,255,0.075); }
.ring-text { color: #f8fbff; text-shadow: 0 8px 22px rgba(0,0,0,0.25); }
.progressWrap { background: rgba(5,10,24,0.42); border-color: rgba(173,201,255,0.10); }
.progressBar { background: linear-gradient(90deg, #20d19a, #60a5fa); }

.auth-hero {
  min-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-hero .title { font-size: 36px; }
#authForms, #membershipPanel {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.022)),
    rgba(17,27,58,0.66);
  border: 1px solid rgba(173,201,255,0.105);
  border-radius: 28px;
  padding: 18px;
  box-shadow: var(--shadow), var(--inner-highlight);
}

.collapse > summary, details.collapse > summary {
  background: transparent;
  color: #e9f1ff;
  font-weight: 850;
}
.collapseBody { position: relative; z-index: 1; }

.toast {
  background: rgba(8,15,35,0.86);
  border-color: rgba(173,201,255,0.14);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
.loader-overlay {
  background:
    radial-gradient(circle at 50% 36%, rgba(96,165,250,0.20), transparent 30%),
    linear-gradient(180deg, #050814, #081126);
}
.loader-spinner { border-top-color: #60a5fa; box-shadow: 0 0 26px rgba(96,165,250,0.25); }

@keyframes premiumRise {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.home-panel.active > .card, .home-panel.active > details, .hero {
  animation: premiumRise 0.28s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 480px) {
  .app { padding: 12px 12px calc(112px + var(--safe-bottom)); }
  .hero { padding: 18px; border-radius: 26px; }
  .card, details.collapse { border-radius: 24px; }
  .big { font-size: clamp(40px, 13vw, 54px); }
  .value { font-size: 25px; }
  .home-tab { font-size: 13px; min-height: 46px; padding-left: 4px; padding-right: 4px; }
  .grid2 { gap: 10px; }
  .stat { padding: 15px; }
  .tabs { width: calc(100% - 24px); }
}

@media (max-width: 370px) {
  .home-tab { font-size: 12px; }
  .title { font-size: 22px; }
  .logo { width: 54px; height: 54px; }
  .grid2 { grid-template-columns: 1fr; }
}


/* Cleaned Insights UX */
.insights-summary-card { margin-bottom: 14px; }
.insights-chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.insights-action-chip {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.05);
  font-size: 13px;
  line-height: 1.35;
}
.insights-accordion { margin-bottom: 12px; }
.insights-accordion > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.insights-accordion .accordion-hint {
  padding: 0 16px 12px;
  font-size: 13px;
  color: var(--muted);
}
.insights-accordion .inside-accordion-card {
  margin: 0 12px 12px;
  background: rgba(12, 18, 42, 0.72);
}
#homePanel-insights > .card:not(.insights-summary-card) { margin-top: 0; }
@media (max-width: 520px) {
  .insights-action-chip { width: 100%; }
  .insights-accordion .inside-accordion-card { margin: 0 10px 10px; }
}


/* Unified product voice polish */
.insights-summary-card h2,
.command-centre h2 {
  letter-spacing: -0.03em;
}
#insightsSummaryNext {
  font-size: 15px;
  line-height: 1.25;
}
.insights-accordion > summary span:first-child {
  font-weight: 800;
}
.notice strong {
  letter-spacing: -0.015em;
}


/* Home priority + commitment loop */
.hero-money-card {
  border-color: rgba(52, 211, 153, 0.28);
  box-shadow: 0 24px 70px rgba(16, 185, 129, 0.11), var(--shadow);
}
.hero-money-card .big {
  letter-spacing: -0.06em;
}
.progress-card {
  opacity: 0.96;
}
.daily-commitment-card {
  position: relative;
  overflow: hidden;
}
.daily-commitment-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% 35%;
  height: 130px;
  background: radial-gradient(circle, rgba(52,211,153,0.18), transparent 65%);
  pointer-events: none;
}
.commitment-track {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.commitment-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.045);
}
.commitment-step > span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(96,165,250,0.16);
  color: #dbeafe;
  font-weight: 900;
}
.commitment-step.is-done {
  border-color: rgba(52,211,153,0.32);
  background: rgba(16,185,129,0.10);
}
.commitment-step.is-done > span {
  background: rgba(16,185,129,0.24);
  color: #bbf7d0;
}
.commitment-step strong {
  display: block;
  font-size: 14px;
}
.commitment-step small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}
@media (max-width: 520px) {
  .hero-money-card .big { font-size: 48px; }
}


/* Setup Confidence Check */
.setup-confidence-card {
  border-color: rgba(255,255,255,0.12);
}
.setup-confidence-card h2 {
  margin: 2px 0 0;
}
.setup-meter {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}
.setup-meter > div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--success), #38bdf8);
}
.setup-check-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.setup-check-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  text-align: left;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
}
.setup-check-row strong {
  display: block;
  font-size: 14px;
  line-height: 1.2;
}
.setup-check-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}
.setup-check-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(255,255,255,0.08);
}
.setup-check-row.done .setup-check-icon {
  background: rgba(34,197,94,0.16);
  color: var(--success);
}
.setup-check-row.missing {
  border-color: rgba(248,113,113,0.28);
}
.setup-check-row.missing .setup-check-icon {
  background: rgba(248,113,113,0.16);
  color: var(--danger);
}
.setup-check-row.optional .setup-check-icon {
  background: rgba(251,191,36,0.14);
  color: var(--warn);
}
.setup-check-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
@media (max-width: 520px) {
  .setup-check-actions {
    grid-template-columns: 1fr;
  }
}


/* Savings Tab */
.savings-home-card { overflow: hidden; }
.savings-hero-amount {
  font-size: 52px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -2px;
  margin-top: 18px;
  background: linear-gradient(135deg, #ffffff, #93c5fd 55%, #86efac);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 520px) {
  .savings-hero-amount { font-size: 44px; }
}

.general-savings-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  border-color: rgba(48, 229, 159, 0.28);
  background:
    radial-gradient(circle at 88% 4%, rgba(48, 229, 159, 0.18), transparent 30%),
    radial-gradient(circle at 8% 0%, rgba(55, 125, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(13, 24, 52, 0.94), rgba(6, 13, 30, 0.90));
}
.general-savings-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.07), transparent 30%);
}
.general-savings-card > * { position: relative; z-index: 1; }
.general-savings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.general-savings-head h2 { margin: 4px 0 5px; }
.general-savings-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.general-savings-balance {
  display: grid;
  gap: 7px;
  margin-top: 24px;
}
.general-savings-balance span,
.general-savings-summary span {
  color: rgba(226, 232, 240, 0.66);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.general-savings-balance strong {
  font-size: clamp(42px, 10vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: #f3fbff;
}
.general-savings-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.general-savings-summary > div {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
}
.general-savings-summary strong { font-size: 18px; color: var(--text); }
.general-savings-summary small { color: var(--muted); line-height: 1.35; }
.general-savings-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.general-savings-actions button { min-height: 50px; }
.general-savings-transfers {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(226, 232, 240, 0.10);
}
.general-savings-transfers h3 { margin: 4px 0 12px; }
.general-savings-transfer {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-top: 1px solid rgba(226, 232, 240, 0.08);
}
.general-savings-transfer:first-child { border-top: 0; }
.general-savings-transfer-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(48, 229, 159, 0.12);
  color: #6ee7b7;
  font-size: 20px;
  font-weight: 900;
}
.general-savings-transfer.is-out .general-savings-transfer-mark {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}
.general-savings-transfer > div { min-width: 0; display: grid; gap: 3px; }
.general-savings-transfer > div strong { color: var(--text); }
.general-savings-transfer small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.general-savings-transfer > strong { color: #6ee7b7; }
.general-savings-transfer.is-out > strong { color: #fbbf24; }
.general-savings-empty {
  padding: 16px;
  border: 1px dashed rgba(226, 232, 240, 0.14);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
}
.savings-vaults-card { margin-bottom: 14px; }

@media (max-width: 520px) {
  .general-savings-summary { grid-template-columns: 1fr; }
  .general-savings-balance strong { font-size: 44px; }
  .general-savings-transfer { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .general-savings-transfer > strong { font-size: 14px; }
}


/* protected-balance-upgrade */
.protected-balance-note {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}


/* Payday Forecast */
.payday-forecast-card {
  position: relative;
  overflow: hidden;
}
.payday-forecast-card::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(16,185,129,.18), transparent 65%);
  pointer-events: none;
}
.forecast-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.forecast-actions {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.forecast-action {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}
.forecast-action span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(96,165,250,.18);
  color: var(--text);
  font-weight: 900;
}
.forecast-danger .pill,
.forecast-locked .pill { border-color: rgba(248,113,113,.45); color: #fecaca; }
.forecast-pressure .pill,
.forecast-watch .pill { border-color: rgba(251,191,36,.45); color: #fde68a; }
.forecast-good .pill { border-color: rgba(52,211,153,.45); color: #bbf7d0; }
@media (max-width: 520px) {
  .forecast-grid { grid-template-columns: 1fr 1fr; }
}


/* Can I Afford This 2.0 */
.afford-chip-row { display:flex; gap:8px; flex-wrap:wrap; }
.mini-chip {
  width:auto;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:800;
}
.afford-v2-result { overflow:hidden; }
.afford-v2-head { display:flex; gap:12px; align-items:flex-start; }
.afford-v2-head p { margin:8px 0 0; color:rgba(255,255,255,.78); line-height:1.45; }
.afford-badge {
  display:inline-flex;
  width:max-content;
  padding:6px 10px;
  margin-bottom:8px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.afford-explainer {
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(5,10,28,.35);
  border:1px solid rgba(255,255,255,.08);
}
.afford-explainer strong { display:block; margin-bottom:8px; }
.afford-line { color:rgba(255,255,255,.78); font-size:13px; line-height:1.45; margin-top:5px; }


/* Quick Spend + Undo */
.quick-spend-card h2 { margin-bottom: 2px; }
.quick-spend-amounts,
.quick-spend-categories {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.quick-spend-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.quickSpendAmountBtn,
.quickSpendCategoryBtn,
.quick-repeat-btn {
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.055);
  color: var(--text);
  border-radius: 16px;
  min-height: 48px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.quickSpendAmountBtn.active,
.quickSpendCategoryBtn:active,
.quick-repeat-btn:active {
  border-color: rgba(52, 211, 153, 0.65);
  background: linear-gradient(135deg, rgba(16,185,129,.28), rgba(59,130,246,.18));
}
.quick-custom-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.quick-custom-row .slim { width: auto; min-width: 84px; }
.quick-spend-pick { margin-top: 12px; }
.quick-undo-panel { margin-top: 12px; display: grid; gap: 10px; }
.quick-recent-list { display: grid; gap: 8px; }
.quick-repeat-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  text-align: left;
}
.quick-repeat-btn strong { font-size: 15px; }
@media (max-width: 520px) {
  .quick-spend-amounts { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .quick-spend-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quickSpendAmountBtn { min-height: 44px; padding: 0 6px; }
}


/* Household Partner+ accountability */
.household-plus-card {
  position: relative;
  overflow: hidden;
}
.partner-spend-list,
.rule-check-list,
.activity-feed {
  display: grid;
  gap: 10px;
}
.partner-spend-row,
.rule-check-row,
.activity-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
}
.partner-spend-row {
  justify-content: space-between;
  align-items: center;
}
.partner-spend-row small,
.rule-check-row small,
.activity-row small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}
.partner-spend-row span,
.activity-row .between span {
  font-weight: 800;
  color: var(--text);
}
.rule-check-row > span {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(34,197,94,0.14);
  color: var(--success);
}
.rule-check-row.warn > span {
  background: rgba(245,158,11,0.16);
  color: var(--warn);
}
.activity-row {
  position: relative;
}
.activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 7px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(96,165,250,0.08);
  flex: 0 0 10px;
}
.activity-spend .activity-dot { background: var(--danger); box-shadow: 0 0 0 6px rgba(239,68,68,0.08); }
.activity-bill .activity-dot { background: var(--warn); box-shadow: 0 0 0 6px rgba(245,158,11,0.08); }
.activity-savings .activity-dot { background: var(--success); box-shadow: 0 0 0 6px rgba(34,197,94,0.08); }
.activity-income .activity-dot { background: var(--success); box-shadow: 0 0 0 6px rgba(34,197,94,0.08); }
.activity-body { flex: 1; min-width: 0; }
.activity-body .between { align-items: flex-start; gap: 10px; }
@media (max-width: 520px) {
  .partner-spend-row,
  .rule-check-row,
  .activity-row { padding: 11px; }
  .activity-body .between { flex-direction: column; gap: 2px; }
}


/* Play Store readiness hardening */
#passwordChangeStatus.hidden { display: none; }
.auth-hero .linkish { cursor: pointer; }

/* Task 1 — Home screen simplification */
.home-tabbar {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 7px;
  scrollbar-width: none;
}
.home-secondary-nav {
  margin-bottom: 12px;
  border: 1px solid rgba(226,232,240,0.08);
  border-radius: 20px;
  background: rgba(8,17,38,0.46);
}
.home-tabbar::-webkit-scrollbar { display: none; }
.home-tab {
  flex: 0 0 auto;
  min-width: 96px;
  min-height: 44px;
  padding: 9px 12px;
}
.daily-focus-card.hero-money-card {
  margin-top: 0;
}
.daily-focus-card .big {
  font-size: clamp(50px, 15vw, 72px);
  letter-spacing: -0.06em;
  line-height: 0.95;
}
.hero-money-card.warn {
  border-color: rgba(245, 158, 11, 0.34);
  box-shadow: 0 20px 50px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-money-card.bad .big,
.hero-money-card.bad #availableNow {
  color: #fb7185;
}
#whereStandMessage strong {
  color: var(--text);
  font-size: 16px;
}
#whereStandMessage span {
  display: inline-block;
  margin-top: 3px;
  color: var(--muted);
}
.home-support-details {
  margin-top: 16px;
  background: rgba(10,14,39,0.58);
}
.home-support-details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.home-support-body {
  display: grid;
  gap: 14px;
}
.home-support-body > .card {
  margin: 0;
  background: rgba(12, 18, 42, 0.72);
}
@media (max-width: 520px) {
  .home-tab { min-width: 92px; min-height: 44px; font-size: 13px; }
  .home-tabbar { margin-bottom: 12px; border-radius: 24px; }
  #quickSpendCard, #paydayForecastCard { margin-top: 14px; }
}


/* Task 2 — Daily Money Check-In */
.daily-checkin-card {
  position: relative;
  overflow: hidden;
}
.daily-checkin-card::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% 35%;
  height: 180px;
  background: radial-gradient(circle, rgba(52,211,153,0.12), transparent 62%);
  pointer-events: none;
}
.daily-checkin-steps {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
.daily-checkin-step {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  color: var(--text);
  display: flex;
  gap: 12px;
  text-align: left;
  align-items: flex-start;
  padding: 12px;
}
.daily-checkin-step.done {
  border-color: rgba(52,211,153,0.24);
  background: rgba(16,185,129,0.09);
}
.daily-checkin-step.missing:active {
  border-color: rgba(96,165,250,0.45);
  background: rgba(96,165,250,0.08);
}
.daily-checkin-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(59,130,246,0.16);
  color: #bfdbfe;
}
.daily-checkin-step.done .daily-checkin-icon {
  background: rgba(34,197,94,0.18);
  color: var(--success);
}
.daily-checkin-copy strong {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}
.daily-checkin-copy small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}
.daily-checkin-actions { position: relative; z-index: 1; }
.daily-checkin-card.checkin-danger { border-color: rgba(244,63,94,0.36); }
.daily-checkin-card.checkin-warn { border-color: rgba(245,158,11,0.32); }
.daily-checkin-card.checkin-done { border-color: rgba(16,185,129,0.36); }
@media (max-width: 520px) {
  .daily-checkin-step { padding: 11px; }
  .daily-checkin-actions { grid-template-columns: 1fr; }
}


/* Task 3: Bill Due Confirmation */
.bill-confirm-card { border-color: rgba(245, 158, 11, 0.28); }
.bill-confirm-list { display: grid; gap: 10px; margin-top: 12px; }
.bill-confirm-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.045);
}
.bill-confirm-row small { display: block; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.bill-confirm-row.not-yet { border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.08); }
.bill-confirm-row.paid { border-color: rgba(34, 197, 94, 0.35); background: rgba(34, 197, 94, 0.08); }
.bill-confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) {
  .bill-confirm-row { align-items: stretch; flex-direction: column; }
  .bill-confirm-actions { justify-content: stretch; }
  .bill-confirm-actions .slim { flex: 1; }
}


/* Task 4 — Partner weekly household summary */
.weekly-household-card {
  position: relative;
  overflow: hidden;
}
.weekly-household-card::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: rgba(96,165,250,0.12);
  pointer-events: none;
}
.partner-spend-row-rich small {
  max-width: 230px;
}
.household-feed-collapse {
  margin-top: 14px;
}
.household-feed-collapse > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.household-feed-collapse .activity-feed {
  padding-top: 4px;
}
@media (max-width: 520px) {
  .partner-spend-row-rich {
    align-items: flex-start;
  }
  .partner-spend-row-rich span {
    white-space: nowrap;
  }
}

/* =====================================================================
   PREMIUM PRESENTATION PASS
   Visual-only refinements. Financial data, behaviour, and DOM IDs stay
   unchanged.
   ===================================================================== */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.conversion-header {
  border-color: var(--premium-edge);
  background: rgba(7, 15, 34, 0.92);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.conversion-brand > div:last-child {
  min-width: 0;
}

.conversion-title {
  letter-spacing: 0 !important;
}

.conversion-brand .sub {
  margin-top: 4px;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.35;
}

.conversion-icon-button,
.conversion-avatar {
  border: 1px solid var(--premium-edge);
}

.conversion-icon-button:hover,
.conversion-icon-button:focus-visible {
  background: rgba(125, 211, 252, 0.12);
  border-color: rgba(125, 211, 252, 0.36);
}

.conversion-status-shell #statusBox {
  border-color: rgba(48, 229, 159, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.conversion-status-details,
.home-tabbar {
  border-color: var(--premium-edge);
  background: rgba(7, 15, 34, 0.78);
}

.conversion-status-details > summary {
  min-height: 44px;
  padding: 0 2px;
  display: flex;
  align-items: center;
}

.home-tab {
  min-height: 44px;
  letter-spacing: 0;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.home-tab:not(.active):hover {
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.045);
}

.card,
details.collapse,
.hero {
  border-color: var(--premium-edge) !important;
}

.conversion-safe-card {
  border-color: rgba(48, 229, 159, 0.28) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.conversion-safe-amount,
.conversion-mini-stat .value,
.money-control-item strong {
  font-variant-numeric: tabular-nums;
}

.conversion-mini-stat,
.money-control-item,
.compact-stat {
  border: 1px solid rgba(226, 232, 240, 0.09);
  background: rgba(255, 255, 255, 0.045);
}

.conversion-mini-stat {
  min-width: 0;
}

.conversion-mini-stat .value,
.conversion-mini-stat small {
  overflow-wrap: anywhere;
}

.conversion-hero-actions {
  gap: 10px;
}

.conversion-hero-actions button {
  min-height: 50px;
  font-weight: 850;
}

.calm-next-card,
.money-control-centre-card,
.quick-spend-card {
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.money-control-why,
.quick-spend-intro,
.calm-next-card .small {
  line-height: 1.55;
}

.quickSpendAmountBtn,
.quickSpendCategoryBtn,
.quick-repeat-btn {
  border-color: var(--premium-edge);
  background: rgba(255, 255, 255, 0.05);
}

.quickSpendAmountBtn:hover,
.quickSpendCategoryBtn:hover,
.quick-repeat-btn:hover {
  border-color: rgba(125, 211, 252, 0.32);
  background: rgba(125, 211, 252, 0.09);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--premium-focus) !important;
  outline-offset: 3px;
}

details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  filter: saturate(0.65);
}

.premium-bottom-nav.tabs {
  border-color: var(--premium-edge-strong) !important;
  background: rgba(5, 11, 26, 0.94) !important;
}

.premium-bottom-nav .tab {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
}

.premium-bottom-nav .tab:not(.active):hover {
  color: #dbeafe !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

@media (max-width: 430px) {
  .app {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .conversion-header {
    gap: 7px;
    padding: 8px;
  }

  .conversion-brand {
    gap: 9px;
  }

  .conversion-logo {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  .conversion-title {
    font-size: 23px !important;
  }

  .conversion-brand .sub {
    font-size: 11px;
  }

  .conversion-header-actions {
    gap: 5px;
  }

  .conversion-icon-button,
  .conversion-avatar {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .conversion-safe-card {
    padding: 20px 16px 17px;
  }

  .conversion-safe-amount {
    font-size: clamp(38px, 13vw, 50px);
    letter-spacing: 0;
  }

  .conversion-hero-stats {
    gap: 8px;
  }

  .conversion-mini-stat {
    padding: 12px 10px;
  }

  .conversion-mini-stat .value {
    font-size: 20px !important;
  }
}

@media (max-width: 340px) {
  .app {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .conversion-header {
    position: relative;
    top: auto;
  }

  .conversion-logo {
    width: 38px !important;
    height: 38px !important;
  }

  .conversion-title {
    font-size: 21px !important;
  }

  .conversion-brand .sub {
    max-width: 120px;
    font-size: 11px;
  }

  .conversion-header-actions {
    align-self: flex-start;
  }

  .conversion-icon-button,
  .conversion-avatar {
    width: 36px;
    min-width: 36px;
    height: 36px;
  }

  .conversion-safe-topline {
    gap: 8px;
  }

  .conversion-safe-amount {
    font-size: 40px;
  }

  .conversion-gauge-wrap {
    height: 136px;
  }

  .conversion-gauge-centre {
    top: 58px;
  }

  .premium-bottom-nav .tab span:not(.premium-nav-plus) {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Bottom nav 6-tab repair */
.tabs .tab { min-width: 0; }
@media (max-width: 430px) {
  .tabs { gap: 4px; padding: 7px; }
  .tab { font-size: 11px; padding: 10px 3px; gap: 4px; }
  .tab svg { width: 20px; height: 20px; }
}


/* UI Calm Pass — release polish, no new money logic */
.home-tabbar {
  position: static;
  top: auto;
  margin: 2px 0 10px;
  padding: 5px;
  gap: 5px;
  border-radius: 18px;
  background: rgba(5, 9, 24, 0.46);
  box-shadow: none;
  border-color: rgba(173,201,255,0.08);
}
.home-tab {
  min-width: auto;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: rgba(225,233,255,0.60);
}
.home-tab.active {
  background: rgba(59,130,246,0.18);
  box-shadow: none;
  border-color: rgba(147,197,253,0.20);
  color: #fff;
}
.calm-status {
  padding: 10px 12px;
  font-size: 13px;
  min-height: 0;
}
.daily-checkin-card.checkin-done { padding-bottom: 14px; }
.daily-checkin-card.checkin-done #dailyCheckInPanel { margin-top: 8px; padding: 12px !important; }
.daily-checkin-card.checkin-done .daily-checkin-steps { margin-top: 10px; }
.checkin-mini-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.checkin-mini-summary span { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 9px; border-radius: 999px; background: rgba(16,185,129,0.10); border: 1px solid rgba(52,211,153,0.18); color: rgba(220,253,242,0.92); font-size: 11px; font-weight: 800; }
.daily-checkin-card.checkin-done .daily-checkin-actions { margin-top: 10px; grid-template-columns: 1fr !important; }
.daily-checkin-card.checkin-done #dailyCheckInResetBtn { min-height: 44px; }
.quick-spend-card .small { line-height: 1.35; }
.quick-spend-amounts { gap: 5px; }
.quickSpendAmountBtn { min-height: 44px; border-radius: 13px; font-size: 12px; }
.quick-custom-row { gap: 8px; }
.quick-custom-row input, .quick-custom-row .slim { min-height: 44px; }
.quick-spend-pick { margin-top: 9px; }
.quick-spend-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.quickSpendCategoryBtn { min-height: 44px; padding: 7px 6px; border-radius: 13px; font-size: 12px; }
#homeSupportDetails { margin-top: 10px; }
.card + .card, .card + details.collapse, details.collapse + .card { margin-top: 12px; }
@media (max-width: 380px) { .home-tab { padding-left: 8px; padding-right: 8px; } .quickSpendCategoryBtn { font-size: 11px; } }

/* Pro paywall routing polish */
.pro-locked-card {
  cursor: pointer;
  position: relative;
}
.paywall-modal {
  max-width: 460px;
}
.paywall-value-card {
  background: rgba(255,255,255,0.035);
  border-color: rgba(226,232,240,0.10);
}
.paywall-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 12px;
}
.paywall-plan {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 112px;
  padding: 16px 12px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,0.12);
  background: rgba(255,255,255,0.035);
  text-align: left;
}
.paywall-plan strong {
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.paywall-plan small {
  color: var(--muted);
}
.paywall-plan.best-value {
  border-color: rgba(16,185,129,0.38);
  background: linear-gradient(180deg, rgba(16,185,129,0.13), rgba(255,255,255,0.035));
}
.paywall-plan em {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(16,185,129,0.16);
  color: #bbf7d0;
  border: 1px solid rgba(16,185,129,0.22);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.paywall-private-copy {
  margin-top: 10px;
  color: rgba(226,232,240,0.72);
}
@media (max-width: 420px) {
  .paywall-plan-grid { grid-template-columns: 1fr; }
}
.pro-locked-card:hover {
  border-color: rgba(252, 211, 77, 0.36);
  box-shadow: 0 18px 38px rgba(0,0,0,0.28), 0 0 0 1px rgba(252,211,77,0.10) inset;
}
.pro-lock-notice {
  gap: 10px;
}
.pro-lock-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  border: 1px solid rgba(252, 211, 77, 0.32);
  background: linear-gradient(135deg, rgba(252, 211, 77, 0.18), rgba(15, 23, 42, 0.74));
  color: #fde68a;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  width: auto;
  min-height: 44px;
}
.pro-lock-action.full {
  width: 100%;
  border-radius: 16px;
  text-align: left;
}
.pro-lock-action:hover {
  filter: brightness(1.08);
}
button.empty-state.pro-lock-action,
button.insights-action-chip.pro-lock-action {
  width: 100%;
  border-radius: 16px;
  text-align: left;
}
.forecast-locked .stat .value,
.pro-locked-card .stat .value {
  color: rgba(255,255,255,0.86);
}

/* Instant open: never let the launch overlay block the app shell. */
.loader-overlay.hidden { display: none !important; }
.instant-sync-note { font-size: 12px; opacity: .75; }


/* Reconcile & Move On: calm recovery, not a panic state */
#reconcileMoveOnBtn.hidden { display: none !important; }
.reconcile-move-hint {
  display: block;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.16);
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.35;
}
.reconcile-move-hint.hidden { display: none !important; }


/* Sinking Fund Vaults UI */
.vault-notice { margin: 10px 0 12px; }
.vault-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.vault-card {
  border: 1px solid rgba(148,163,184,0.16);
  background: linear-gradient(135deg, rgba(15,23,42,0.72), rgba(30,41,59,0.38));
  border-radius: 18px;
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.vault-head small { display:block; margin-top:3px; color: rgba(226,232,240,0.58); font-size: 11px; }
.vault-money { font-size: 24px; line-height: 1.05; font-weight: 950; letter-spacing: -0.03em; margin-top: 10px; color: #e8f5ff; }
.vault-progress { height: 7px; margin-top: 10px; margin-bottom: 8px; }
.vault-actions { margin-top: 10px; gap: 8px; }
.vault-actions .slim { min-height: 44px; border-radius: 13px; padding: 7px 10px; }
@media (min-width: 720px) { .vault-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* Calm Home v2: public-launch simplification */
.calm-next-card { border:1px solid rgba(56,189,248,.22); background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(15,23,42,.88)); }
.calm-next-card.warn { border-color:rgba(245,158,11,.35); }
.calm-next-card.danger { border-color:rgba(248,113,113,.45); }
.calm-next-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.compact-stat { padding:10px 12px; }
.compact-stat .value { font-size:15px; line-height:1.2; }
.calm-routine-details > summary,
.calm-forecast-details > summary,
.home-support-details > summary { padding:12px 14px; }
.calm-routine-body,
.calm-forecast-body { padding:10px 0 0; }
.calm-routine-body > .card,
.calm-forecast-body > .card { margin-top:10px; }
.bank-pending-note { font-size:13px; }
#homeForecastDetails:not([open]) + #homeSupportDetails { margin-top:10px; }
@media (max-width:520px){
  .calm-next-grid { grid-template-columns:1fr; }
  .compact-stat .value { font-size:14px; }
}

/* Final Launch Hardening Patch */
.launch-help {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin: 0 0 12px;
  border: 1px solid rgba(59,130,246,.25);
  border-radius: 16px;
  background: rgba(59,130,246,.08);
  color: var(--text);
}
.launch-help span { color: var(--muted); font-size: 13px; line-height: 1.35; }
.launch-help .mini,
button.mini {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  background: rgba(15,23,42,.08);
  color: var(--text);
}
#syncBox { cursor: pointer; }
.pro-expired [data-pro-feature] { opacity: .72; }

/* Final reconcile modal — full UI recovery path */
.reconcile-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}
.reconcile-modal-backdrop.hidden { display: none; }
.reconcile-modal-card {
  width: min(520px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: linear-gradient(180deg, rgba(30,41,79,.98), rgba(15,23,42,.98));
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  padding: 20px;
}
.reconcile-modal-card h2 { margin: 0 0 8px; }
.reconcile-modal-grid { display: grid; gap: 10px; margin-top: 14px; }
.reconcile-modal-stat {
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 12px;
  background: rgba(15,23,42,.58);
}
.reconcile-modal-stat .label { margin-bottom: 4px; }
.reconcile-modal-stat .value { font-size: 1.25rem; font-weight: 800; }
.reconcile-modal-card input,
.reconcile-modal-card textarea { width: 100%; box-sizing: border-box; }
.reconcile-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.reconcile-history-list { display: grid; gap: 8px; margin-top: 10px; }
.reconcile-history-item { border: 1px solid rgba(148,163,184,.15); border-radius: 14px; padding: 10px; background: rgba(15,23,42,.42); }

/* Final mobile launch readability patch */
#forecastBox:empty::after {
  content: "Projection active. Add recent spends for a sharper payday forecast.";
}
.savings-vaults-card details.collapse,
.savings-vaults-card details.collapse[open],
.savings-vaults-card .collapseBody {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.savings-vaults-card .collapseBody {
  padding-top: 10px;
}
.savings-vaults-card .collapseBody .small,
.savings-vaults-card details.collapse .small {
  display: block;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
@media (max-width: 560px) {
  .savings-vaults-card details.collapse {
    padding: 14px 14px 16px;
  }
  .savings-vaults-card details.collapse > summary {
    line-height: 1.2;
  }
  .vault-notice {
    display: block;
    padding: 16px;
  }
  .vault-notice strong,
  .vault-notice span {
    display: block;
    width: 100%;
    line-height: 1.35;
  }
}

/* Beta readiness tightening: keep fixed nav from covering content and make help cards less bulky on mobile. */
.app { padding-bottom: calc(132px + var(--safe-bottom)) !important; }
section { scroll-margin-bottom: calc(132px + var(--safe-bottom)); }
@media (max-width: 520px) {
  .launch-help { padding: 9px 10px; gap: 8px; border-radius: 14px; margin-bottom: 8px; }
  .launch-help span { font-size: 12px; line-height: 1.3; }
  .launch-help .mini, button.mini { padding: 6px 8px; font-size: 11px; }
  .reconcile-modal-card { max-height: 88vh; padding: 16px; border-radius: 20px; }
  .reconcile-modal-actions { grid-template-columns: 1fr; }
  .notice { overflow-wrap: anywhere; }
}

/* =====================================================================
   CONVERSION UPGRADE — Premium Dashboard v1
   Visual layer only. Money maths remains owned by app.js allocation engine.
   ===================================================================== */
html,
body {
  background:
    radial-gradient(circle at 50% -5%, rgba(55, 125, 255, 0.28), transparent 38%),
    radial-gradient(circle at 0% 20%, rgba(34, 211, 238, 0.13), transparent 35%),
    radial-gradient(circle at 100% 28%, rgba(48, 229, 159, 0.10), transparent 38%),
    linear-gradient(180deg, var(--conversion-bg) 0%, #071029 52%, #050816 100%) !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent 80%);
  opacity: 0.45;
  z-index: -1;
}

.app {
  max-width: 520px !important;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(118px + var(--safe-bottom)) !important;
}

.conversion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 2px 0 14px;
  padding: 4px 2px 0;
}

.conversion-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.conversion-logo {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 45px rgba(0,0,0,0.45), 0 0 28px rgba(55,125,255,0.22) !important;
}

.conversion-title {
  font-size: 28px !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
  color: #ffffff;
}
.conversion-title span {
  color: var(--conversion-blue);
  text-shadow: 0 0 22px rgba(55,125,255,0.6);
}
.conversion-badges {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.conversion-badges .pill {
  padding: 5px 9px;
  font-size: 11px;
  background: rgba(255,255,255,0.055);
}

.conversion-header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.conversion-icon-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #dbeafe;
  box-shadow: none;
}
.conversion-icon-button svg { width: 20px; height: 20px; }
.conversion-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: #06111f;
  background: linear-gradient(135deg, #e0f2fe, #30e59f 48%, #377dff);
  box-shadow: 0 14px 35px rgba(48,229,159,0.20);
}

.conversion-status-shell { margin-bottom: 12px; }
.conversion-status-shell #statusBox {
  margin-top: 0;
  border-radius: 18px;
  min-height: 42px;
  padding: 10px 14px;
}
.conversion-status-details {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
}
.conversion-status-details > summary { font-size: 13px; }

.home-tabbar {
  margin: 0 0 14px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(5, 8, 22, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 45px rgba(0,0,0,0.24);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.home-tab {
  border-radius: 999px;
  white-space: nowrap;
  padding: 9px 13px;
  font-size: 12px;
  color: #91a5c4;
  background: transparent;
}
.home-tab.active {
  background: linear-gradient(135deg, rgba(55,125,255,0.85), rgba(37,99,235,0.92));
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(55,125,255,0.30);
}

.card,
details.collapse,
.hero {
  background: linear-gradient(180deg, rgba(13, 24, 52, 0.86), rgba(8, 17, 38, 0.78)) !important;
  border: 1px solid var(--conversion-line) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.conversion-safe-card {
  padding: 22px 18px 18px;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.conversion-safe-card::before {
  content: '';
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 240px;
  background: radial-gradient(circle, rgba(48,229,159,0.16), transparent 58%);
  z-index: -1;
}
.conversion-safe-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(140deg, rgba(255,255,255,0.07), transparent 32%, rgba(55,125,255,0.045) 70%, transparent);
  z-index: -1;
}
.conversion-safe-card.warn::before { background: radial-gradient(circle, rgba(251,191,36,0.16), transparent 58%); }
.conversion-safe-card.bad::before { background: radial-gradient(circle, rgba(251,113,133,0.18), transparent 58%); }

.conversion-safe-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.conversion-safe-amount {
  font-size: clamp(44px, 13vw, 64px);
  color: var(--conversion-green);
  text-shadow: 0 0 32px rgba(48,229,159,0.34);
  letter-spacing: -2.5px;
  margin-top: 5px;
}
.conversion-safe-card.warn .conversion-safe-amount { color: var(--conversion-amber); text-shadow: 0 0 30px rgba(251,191,36,0.26); }
.conversion-safe-card.bad .conversion-safe-amount { color: var(--conversion-red); text-shadow: 0 0 30px rgba(251,113,133,0.28); }
.conversion-cycle-sub {
  margin-top: 4px;
  color: rgba(226,232,240,0.72);
  font-size: 14px;
  font-weight: 650;
}
.conversion-verdict-pill {
  background: rgba(48,229,159,0.12) !important;
  color: #a7f3d0 !important;
  border-color: rgba(48,229,159,0.28) !important;
  margin-top: 4px;
  flex-shrink: 0;
}
.conversion-safe-card.warn .conversion-verdict-pill { background: rgba(251,191,36,0.12) !important; color: #fde68a !important; border-color: rgba(251,191,36,0.28) !important; }
.conversion-safe-card.bad .conversion-verdict-pill { background: rgba(251,113,133,0.12) !important; color: #fecdd3 !important; border-color: rgba(251,113,133,0.28) !important; }

.conversion-gauge-wrap {
  position: relative;
  height: 135px;
  margin: 0 auto 2px;
  display: grid;
  place-items: center;
}
.conversion-gauge {
  width: min(100%, 310px);
  height: 150px;
  overflow: visible;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.22));
}
.conversion-gauge-track,
.conversion-gauge-arc {
  fill: none;
  stroke-linecap: round;
  stroke-width: 16;
}
.conversion-gauge-track { stroke: rgba(148,163,184,0.12); }
.conversion-gauge-arc {
  stroke: var(--conversion-green);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.55s ease, stroke 0.25s ease;
  filter: drop-shadow(0 0 18px rgba(48,229,159,0.46));
}
.conversion-safe-card.warn .conversion-gauge-arc { stroke: var(--conversion-amber); filter: drop-shadow(0 0 16px rgba(251,191,36,0.38)); }
.conversion-safe-card.bad .conversion-gauge-arc { stroke: var(--conversion-red); filter: drop-shadow(0 0 16px rgba(251,113,133,0.38)); }
.conversion-gauge-centre {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  color: #dbeafe;
}
.conversion-gauge-centre span { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; }
.conversion-gauge-centre small { font-size: 11px; color: var(--conversion-muted); margin-top: 2px; }

.conversion-verdict-message {
  border: 1px solid rgba(148,163,184,0.14);
  background: rgba(255,255,255,0.045);
  border-radius: 999px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.35;
  color: #cbd5e1;
  text-align: center;
}
.conversion-verdict-message strong { color: #fff; }

.conversion-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.conversion-mini-stat {
  padding: 13px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
}
.conversion-mini-stat .value { font-size: 22px !important; }
.conversion-hero-actions { margin-top: 14px; }
.conversion-hero-actions button { border-radius: 18px; }
.conversion-explain {
  margin: 14px 0 0;
  border-radius: 20px;
  background: rgba(255,255,255,0.035);
  box-shadow: none;
}

.conversion-dashboard-grid {
  display: grid;
  gap: 14px;
}
.conversion-overview-card,
.conversion-category-card {
  padding: 18px;
  border-radius: 26px;
}
.conversion-overview-card h2,
.conversion-category-card h2 {
  margin: 0;
  font-size: 20px;
}
.conversion-overview-list {
  display: grid;
  gap: 15px;
  margin-top: 18px;
}
.conversion-overview-row > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #cbd5e1;
  font-size: 14px;
  margin-bottom: 7px;
}
.conversion-overview-row strong {
  color: #f8fafc;
  font-size: 14px;
  letter-spacing: -0.2px;
}
.conversion-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,0.12);
  overflow: hidden;
}
.conversion-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--conversion-green), var(--conversion-cyan));
  box-shadow: 0 0 16px rgba(48,229,159,0.35);
  transition: width 0.45s ease;
}
#premiumSpentBar { background: linear-gradient(90deg, var(--conversion-blue), #60a5fa); box-shadow: 0 0 16px rgba(55,125,255,0.32); }
#premiumBillsProtectedBar { background: linear-gradient(90deg, #38bdf8, var(--conversion-blue)); box-shadow: 0 0 16px rgba(56,189,248,0.30); }
#premiumSavingsBar { background: linear-gradient(90deg, #2dd4bf, var(--conversion-green)); box-shadow: 0 0 16px rgba(45,212,191,0.30); }

.conversion-category-content {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}
.conversion-donut {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: conic-gradient(var(--conversion-green) 0deg, rgba(148,163,184,0.14) 0deg 360deg);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 16px 35px rgba(0,0,0,0.24);
}
.conversion-donut::after {
  content: '';
  position: absolute;
  inset: 29px;
  border-radius: 50%;
  background: #081126;
  border: 1px solid rgba(255,255,255,0.06);
}
.conversion-category-legend {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.conversion-category-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #cbd5e1;
  min-width: 0;
}
.conversion-category-row b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}
.conversion-category-row strong {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}
.conversion-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}
.conversion-empty {
  margin-top: 14px;
  padding: 13px;
  border-radius: 18px;
  color: var(--conversion-muted);
  background: rgba(255,255,255,0.035);
  border: 1px dashed rgba(148,163,184,0.20);
  text-align: center;
  font-size: 13px;
}

.premium-bottom-nav.tabs {
  width: min(520px, calc(100% - 22px)) !important;
  grid-template-columns: 1fr 1fr 72px 1fr 1fr !important;
  gap: 4px !important;
  bottom: calc(10px + var(--safe-bottom)) !important;
  padding: 7px !important;
  border-radius: 28px !important;
  background: rgba(5, 8, 22, 0.82) !important;
  border: 1px solid rgba(148,163,184,0.16) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}
.premium-bottom-nav .tab {
  min-height: 58px;
  padding: 7px 2px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  color: #7f8fa8 !important;
  gap: 4px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
.premium-bottom-nav .tab svg { width: 21px; height: 21px; }
.premium-bottom-nav .tab.active {
  background: rgba(55,125,255,0.14) !important;
  border-color: rgba(55,125,255,0.22) !important;
  color: #eaf2ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.premium-bottom-nav .quickAddNavBtn {
  display: grid !important;
  place-items: center !important;
  align-self: center;
}
.premium-nav-plus {
  width: 58px;
  height: 58px;
  margin-top: -20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 36px;
  line-height: 1;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, #377dff, #1d4ed8 62%, #22d3ee);
  box-shadow: 0 18px 42px rgba(55,125,255,0.50), inset 0 1px 0 rgba(255,255,255,0.28);
}

@media (max-width: 430px) {
  .conversion-title { font-size: 25px !important; }
  .conversion-header { gap: 8px; }
  .conversion-icon-button,
  .conversion-avatar { width: 38px; height: 38px; }
  .conversion-safe-card { padding: 20px 15px 16px; }
  .conversion-safe-amount { font-size: clamp(40px, 12.5vw, 56px); }
  .conversion-category-content { grid-template-columns: 104px 1fr; gap: 12px; }
  .conversion-donut { width: 104px; height: 104px; }
  .conversion-donut::after { inset: 25px; }
  .premium-bottom-nav .tab span:not(.premium-nav-plus) { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 360px) {
  .conversion-brand { gap: 8px; }
  .conversion-logo { width: 40px; height: 40px; }
  .conversion-badges { display: none; }
  .conversion-category-content { grid-template-columns: 1fr; justify-items: center; }
  .conversion-category-legend { width: 100%; }
  .premium-bottom-nav.tabs { grid-template-columns: 1fr 1fr 62px 1fr 1fr !important; }
  .premium-nav-plus { width: 52px; height: 52px; font-size: 32px; }
}

/* Conversion screen keeps the first view clean; explanation remains available through Why this number. */
#homePanel-daily > .launch-help[data-help-key="safe-daily"] { display: none !important; }

/* Paid bills clean due-list hardening */
.bill-flow-note {
  margin-bottom: 14px;
}
.bill-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 10px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bill-held-item {
  border-color: rgba(245, 158, 11, 0.32);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(15, 23, 42, 0.62));
}
.sinking-fund-item {
  border-color: rgba(45, 212, 191, 0.22);
}
.bill-manage-collapse .collapseBody {
  display: grid;
  gap: 10px;
}
@media (max-width: 520px) {
  #billList .item .between {
    align-items: flex-start;
    gap: 10px;
  }
  #billList .billConfirmBtn {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* =====================================================================
   CONVERSION UPGRADE — Premium Dashboard v2 Wow Pass
   Pure visual polish and dashboard engagement layer. No money maths here.
   ===================================================================== */
body::after {
  content: '';
  position: fixed;
  inset: -28% -18%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 24% 18%, rgba(55, 125, 255, 0.22), transparent 28%),
    radial-gradient(circle at 74% 10%, rgba(48, 229, 159, 0.13), transparent 26%),
    radial-gradient(circle at 50% 48%, rgba(34, 211, 238, 0.10), transparent 34%);
  filter: blur(10px);
  opacity: 0.88;
  animation: premiumAuroraDrift 16s ease-in-out infinite alternate;
}

@keyframes premiumAuroraDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: 0.74; }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.05); opacity: 0.96; }
}

.conversion-header {
  position: sticky;
  top: calc(6px + env(safe-area-inset-top, 0px));
  z-index: 20;
  margin-bottom: 12px;
  padding: 8px 8px 8px 6px;
  border: 1px solid rgba(226, 232, 240, 0.08);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(5, 8, 22, 0.74), rgba(8, 17, 38, 0.42));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 20px 55px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.05);
}

.conversion-logo {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}
.conversion-logo::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.42) 50%, transparent 65%);
  transform: translateX(-120%) rotate(8deg);
  animation: premiumLogoSheen 4.8s ease-in-out infinite;
}
@keyframes premiumLogoSheen {
  0%, 56% { transform: translateX(-120%) rotate(8deg); }
  76%, 100% { transform: translateX(120%) rotate(8deg); }
}

.conversion-status-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.conversion-status-shell #statusBox {
  background: linear-gradient(135deg, rgba(48,229,159,0.12), rgba(55,125,255,0.08));
  border-color: rgba(48,229,159,0.22);
  color: #dcfce7;
}

.home-tabbar {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  justify-content: flex-start;
}
.home-tabbar::-webkit-scrollbar { display: none; }
.home-tab { scroll-snap-align: start; flex: 0 0 auto; }

.conversion-safe-card {
  border-color: rgba(48,229,159,0.24);
  background:
    radial-gradient(circle at 50% -20%, rgba(48,229,159,0.20), transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(55,125,255,0.16), transparent 28%),
    linear-gradient(180deg, rgba(15, 29, 64, 0.94), rgba(5, 10, 24, 0.86));
  box-shadow: var(--wow-shadow), 0 0 0 1px rgba(48,229,159,0.06), inset 0 1px 0 rgba(255,255,255,0.09);
}
.conversion-safe-card.warn { border-color: rgba(251,191,36,0.26) !important; }
.conversion-safe-card.bad { border-color: rgba(251,113,133,0.30) !important; }
.conversion-safe-card::before {
  inset: -40% -22% auto -22% !important;
  height: 310px !important;
  opacity: 0.98;
}
.conversion-safe-card::after {
  background:
    linear-gradient(130deg, rgba(255,255,255,0.12), transparent 23%, rgba(34,211,238,0.07) 54%, transparent 74%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 30px) !important;
}

.conversion-safe-topline .label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(226,232,240,0.78);
}
.conversion-safe-topline .label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--conversion-green);
  box-shadow: 0 0 18px rgba(48,229,159,0.80);
}
.conversion-safe-card.warn .conversion-safe-topline .label::before { background: var(--conversion-amber); box-shadow: 0 0 18px rgba(251,191,36,0.75); }
.conversion-safe-card.bad .conversion-safe-topline .label::before { background: var(--conversion-red); box-shadow: 0 0 18px rgba(251,113,133,0.75); }

.conversion-safe-amount {
  background: linear-gradient(180deg, #ecfdf5 0%, var(--conversion-green) 54%, #14b87a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(48,229,159,0.26));
}
.conversion-safe-card.warn .conversion-safe-amount {
  background: linear-gradient(180deg, #fff7ed 0%, #fbbf24 60%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.conversion-safe-card.bad .conversion-safe-amount {
  background: linear-gradient(180deg, #fff1f2 0%, #fb7185 58%, #e11d48 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.conversion-gauge-wrap {
  height: 150px;
  margin-top: 2px;
}
.conversion-gauge-track,
.conversion-gauge-arc { stroke-width: 18; }
.conversion-gauge-track { stroke: rgba(226,232,240,0.105); }
.conversion-gauge-arc { filter: drop-shadow(0 0 22px rgba(48,229,159,0.58)); }
.conversion-gauge-centre {
  top: 64px;
  width: 98px;
  height: 72px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(5,8,22,0.80), rgba(5,8,22,0.24));
}
.conversion-gauge-centre span { font-size: 25px; }
.conversion-verdict-message {
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,0.070), rgba(255,255,255,0.035));
  border-color: rgba(226,232,240,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.conversion-hero-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.conversion-mini-stat {
  border: 1px solid rgba(226,232,240,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.conversion-hero-actions .success {
  background: linear-gradient(135deg, #34d399, #22c55e 46%, #0ea5e9);
  box-shadow: 0 18px 42px rgba(34,197,94,0.22), inset 0 1px 0 rgba(255,255,255,0.30) !important;
}
.conversion-hero-actions .secondary {
  background: rgba(255,255,255,0.075);
  border-color: rgba(226,232,240,0.13);
}

.premium-money-pulse-card {
  margin-top: 14px;
  padding: 18px;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, rgba(55,125,255,0.18), transparent 32%),
    radial-gradient(circle at 100% 0%, rgba(48,229,159,0.12), transparent 30%),
    linear-gradient(180deg, rgba(13,24,52,0.86), rgba(5,10,24,0.76));
}
.premium-money-pulse-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.07) 38%, transparent 62%);
  opacity: 0.55;
}
.premium-money-pulse-card.good { border-color: rgba(48,229,159,0.24); }
.premium-money-pulse-card.warn { border-color: rgba(251,191,36,0.24); }
.premium-money-pulse-card.bad { border-color: rgba(251,113,133,0.28); }
.premium-pulse-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  position: relative;
}
.premium-pulse-head h2 {
  margin: 1px 0 0;
  font-size: 20px;
  letter-spacing: -0.4px;
}
.premium-live-pill {
  background: rgba(48,229,159,0.11);
  color: #bbf7d0;
  border-color: rgba(48,229,159,0.24);
}
.premium-money-pulse-card.warn .premium-live-pill { background: rgba(251,191,36,0.12); color: #fde68a; border-color: rgba(251,191,36,0.24); }
.premium-money-pulse-card.bad .premium-live-pill { background: rgba(251,113,133,0.12); color: #fecdd3; border-color: rgba(251,113,133,0.28); }
.premium-pulse-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  position: relative;
}
.premium-pulse-item {
  min-width: 0;
  padding: 13px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.052);
  border: 1px solid rgba(226,232,240,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
}
.premium-pulse-item span,
.premium-pulse-item small {
  display: block;
  color: rgba(203,213,225,0.76);
  font-size: 11px;
  line-height: 1.25;
}
.premium-pulse-item strong {
  display: block;
  color: #fff;
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: -0.55px;
  margin: 6px 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.money-control-centre-card {
  margin-top: 14px;
  padding: 18px;
  border-color: rgba(226,232,240,0.11);
  background:
    linear-gradient(180deg, rgba(13,24,52,0.88), rgba(7,12,28,0.82));
}
.money-control-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.money-control-head h2 {
  margin: 1px 0 0;
  font-size: 20px;
  letter-spacing: 0;
}
.money-control-why {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(56,189,248,0.18);
  background: rgba(56,189,248,0.08);
  color: #dbeafe;
  font-size: 13px;
  line-height: 1.4;
}
.money-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.money-control-item {
  min-width: 0;
  padding: 13px 12px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,0.10);
  background: rgba(255,255,255,0.045);
}
.money-control-item span,
.money-control-item small,
.money-control-item p {
  display: block;
  color: rgba(203,213,225,0.76);
  font-size: 11px;
  line-height: 1.35;
}
.money-control-item strong {
  display: block;
  margin: 6px 0 5px;
  color: #fff;
  font-size: 19px;
  line-height: 1.08;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.money-control-item p { margin-top: 7px; }
.money-control-vaults,
.money-control-drift {
  grid-column: 1 / -1;
}
.money-control-drift.ahead {
  border-color: rgba(56,189,248,0.22);
  background: rgba(56,189,248,0.075);
}
.money-control-drift.warn {
  border-color: rgba(245,158,11,0.28);
  background: rgba(245,158,11,0.09);
}
.money-control-drift.ok {
  border-color: rgba(16,185,129,0.22);
  background: rgba(16,185,129,0.075);
}
.money-control-vault-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.money-control-vault-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(226,232,240,0.08);
  color: rgba(226,232,240,0.86);
  font-size: 12px;
  line-height: 1.3;
}
.money-control-vault-row b {
  flex-shrink: 0;
  color: #fff;
  font-weight: 800;
}

.daily-forecast-panel,
.overspend-recovery-panel {
  border-color: rgba(148,163,184,.22);
}

.daily-forecast-panel h2,
.overspend-recovery-panel h2 {
  margin: 2px 0 0;
  font-size: 18px;
}

.daily-forecast-list,
.recovery-action-list {
  display: grid;
  gap: 8px;
}

.daily-forecast-row,
.recovery-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 8px;
  background: rgba(15,23,42,.42);
  color: var(--text);
  text-align: left;
}

.daily-forecast-row span,
.recovery-action span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.daily-forecast-row b,
.recovery-action b {
  font-size: 14px;
}

.daily-forecast-row small,
.recovery-action small {
  color: var(--muted);
  line-height: 1.35;
}

.daily-forecast-row strong,
.recovery-action strong {
  flex: 0 0 auto;
  font-size: 14px;
}

.daily-forecast-row.danger {
  border-color: rgba(248,113,113,.35);
  background: rgba(127,29,29,.22);
}

.recovery-action {
  cursor: pointer;
}
.premium-flow-line {
  position: relative;
  display: flex;
  gap: 4px;
  height: 34px;
  margin-top: 15px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(2,6,23,0.42);
  border: 1px solid rgba(226,232,240,0.09);
  overflow: hidden;
}
.premium-flow-line span {
  flex: 1 1 var(--w);
  min-width: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(255,255,255,0.82);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: -0.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: flex-basis .45s ease, opacity .25s ease;
}
#premiumFlowBills { background: linear-gradient(90deg, rgba(56,189,248,0.72), rgba(55,125,255,0.68)); }
#premiumFlowSpent { background: linear-gradient(90deg, rgba(59,130,246,0.65), rgba(99,102,241,0.62)); }
#premiumFlowSavings { background: linear-gradient(90deg, rgba(20,184,166,0.66), rgba(48,229,159,0.62)); }
#premiumFlowSafe { background: linear-gradient(90deg, rgba(52,211,153,0.80), rgba(34,197,94,0.72)); }
.premium-money-pulse-card.warn #premiumFlowSafe { background: linear-gradient(90deg, rgba(251,191,36,0.84), rgba(245,158,11,0.72)); }
.premium-money-pulse-card.bad #premiumFlowSafe { background: linear-gradient(90deg, rgba(251,113,133,0.84), rgba(225,29,72,0.72)); }

.conversion-dashboard-grid { margin-top: 14px; }
.conversion-overview-card,
.conversion-category-card,
.calm-next-card {
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% -10%, rgba(55,125,255,0.10), transparent 30%),
    linear-gradient(180deg, rgba(13,24,52,0.82), rgba(7,14,31,0.74));
}
.conversion-overview-row {
  padding: 10px 0 2px;
  border-top: 1px solid rgba(226,232,240,0.07);
}
.conversion-overview-row:first-child { border-top: 0; padding-top: 0; }
.conversion-bar {
  height: 10px;
  background: rgba(15,23,42,0.82);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.36);
}
.conversion-category-card { overflow: hidden; position: relative; }
.conversion-category-card::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  right: -70px;
  bottom: -70px;
  border-radius: 999px;
  background: rgba(48,229,159,0.10);
  filter: blur(4px);
}
.conversion-donut {
  box-shadow: 0 0 36px rgba(55,125,255,0.16), inset 0 0 0 1px rgba(255,255,255,0.07), 0 18px 45px rgba(0,0,0,0.28) !important;
}
.conversion-donut::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px solid rgba(226,232,240,0.08);
}
.conversion-category-row {
  padding: 6px 7px;
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
}
.calm-next-card {
  margin-top: 14px;
  border-color: rgba(55,125,255,0.18);
}
.calm-next-card h2 {
  letter-spacing: -0.35px;
}

.premium-bottom-nav.tabs {
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(8,17,38,0.88), rgba(5,8,22,0.82)) !important;
  border-color: rgba(226,232,240,0.13) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.075) !important;
}
.premium-bottom-nav .tab.active {
  background: linear-gradient(180deg, rgba(55,125,255,0.22), rgba(55,125,255,0.10)) !important;
}
.premium-nav-plus {
  position: relative;
  isolation: isolate;
  box-shadow: 0 18px 52px rgba(55,125,255,0.60), 0 0 0 8px rgba(55,125,255,0.09), inset 0 1px 0 rgba(255,255,255,0.32) !important;
}
.premium-nav-plus::after {
  content: '';
  position: absolute;
  inset: -9px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(55,125,255,0.28), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
  .conversion-gauge-arc { animation: premiumGaugeGlow 2.8s ease-in-out infinite alternate; }
  .premium-nav-plus { animation: premiumPlusFloat 3.4s ease-in-out infinite; }
}
@keyframes premiumGaugeGlow {
  from { filter: drop-shadow(0 0 14px rgba(48,229,159,0.36)); }
  to { filter: drop-shadow(0 0 26px rgba(48,229,159,0.68)); }
}
@keyframes premiumPlusFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@media (max-width: 430px) {
  .conversion-header { border-radius: 24px; }
  .conversion-status-shell #statusBox { font-size: 12px; }
  .premium-pulse-grid { grid-template-columns: 1fr; }
  .premium-pulse-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 10px;
  }
  .premium-pulse-item strong { margin: 0; text-align: right; }
  .premium-pulse-item small { grid-column: 1 / -1; }
  .premium-flow-line { height: 32px; }
}

@media (max-width: 360px) {
  .conversion-header { padding: 7px 6px; }
  .conversion-title { font-size: 23px; }
  .conversion-safe-topline { flex-direction: column; }
  .conversion-verdict-pill { align-self: flex-start; }
  .premium-flow-line span { font-size: 11px; min-width: 28px; }
}


/* =====================================================================
   HARDEN PASS — Premium bills page and bill confirmation affordance
   Visual only. Bill maths and occurrence logic stays in app.js.
   ===================================================================== */
#page-bills > .card {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border-color: rgba(55,125,255,0.18);
  background:
    radial-gradient(circle at 12% -10%, rgba(55,125,255,0.22), transparent 32%),
    radial-gradient(circle at 92% 4%, rgba(48,229,159,0.15), transparent 30%),
    linear-gradient(180deg, rgba(13,24,52,0.88), rgba(5,10,24,0.82));
  box-shadow: 0 28px 90px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.07);
}
#page-bills > .card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 28%, rgba(48,229,159,0.04));
}
#page-bills > .card > * { position: relative; z-index: 1; }
#page-bills h2 {
  letter-spacing: -0.55px;
}
#addBillBtn {
  background: linear-gradient(135deg, #34d399, #22c55e 48%, #0ea5e9);
  box-shadow: 0 16px 38px rgba(34,197,94,0.22), inset 0 1px 0 rgba(255,255,255,0.30);
}
.bill-choice-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.bill-choice-strip span {
  display: block;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(226,232,240,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.035));
  color: rgba(226,232,240,0.76);
  font-size: 12px;
  line-height: 1.35;
}
.bill-choice-strip strong {
  display: block;
  color: #fff;
  font-size: 13px;
  margin-bottom: 2px;
}
.bill-flow-note {
  margin-bottom: 14px;
  border-color: rgba(48,229,159,0.22);
  background: linear-gradient(135deg, rgba(48,229,159,0.10), rgba(55,125,255,0.07));
}
.bill-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 10px;
  color: rgba(226,232,240,0.82);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
#billList .item {
  border-radius: 22px;
  border-color: rgba(226,232,240,0.10);
  background:
    radial-gradient(circle at 100% 0%, rgba(55,125,255,0.08), transparent 28%),
    linear-gradient(180deg, rgba(15,23,42,0.70), rgba(5,10,24,0.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 32px rgba(0,0,0,0.18);
}
#billList .bill-held-item {
  border-color: rgba(251,191,36,0.34);
  background:
    radial-gradient(circle at 100% 0%, rgba(251,191,36,0.16), transparent 28%),
    linear-gradient(180deg, rgba(48,31,10,0.60), rgba(5,10,24,0.70));
}
#billList .sinking-fund-item {
  border-color: rgba(45,212,191,0.24);
}
#billList .billConfirmBtn {
  min-height: 44px;
  border-radius: 999px;
  font-weight: 900;
}
#billList .billConfirmBtn[data-bill-confirm-status="paid"] {
  background: linear-gradient(135deg, rgba(34,197,94,0.95), rgba(20,184,166,0.95));
}
#billList .billConfirmBtn[data-bill-confirm-status="notYet"] {
  border-color: rgba(251,191,36,0.24);
  background: rgba(251,191,36,0.10);
  color: #fde68a;
}
.bill-manage-collapse .collapseBody {
  display: grid;
  gap: 10px;
}
@media (max-width: 520px) {
  .bill-choice-strip { grid-template-columns: 1fr; }
  #billList .item .between {
    align-items: flex-start;
    gap: 12px;
  }
  #billList .billConfirmBtn {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* Final customer hardening — restore Savings as a first-class premium bottom tab.
   Presentation only: no maths, bill, reconcile, auth, or data logic changes. */
.premium-bottom-nav.tabs {
  grid-template-columns: 1fr 1fr 60px 1fr 1fr 1fr 1fr !important;
  width: min(640px, calc(100% - 16px)) !important;
  gap: 3px !important;
  padding: 6px !important;
}
.premium-bottom-nav .tab {
  min-width: 0 !important;
}
.premium-bottom-nav .tab span:not(.premium-nav-plus) {
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 430px) {
  .premium-bottom-nav.tabs {
    grid-template-columns: 1fr 1fr 54px 1fr 1fr 1fr 1fr !important;
    width: min(100%, calc(100% - 10px)) !important;
    gap: 2px !important;
    padding: 5px !important;
  }
  .premium-bottom-nav .tab {
    min-height: 54px !important;
    padding: 6px 1px !important;
    font-size: 11px !important;
    border-radius: 17px !important;
  }
  .premium-bottom-nav .tab svg {
    width: 19px !important;
    height: 19px !important;
  }
  .premium-bottom-nav .tab span:not(.premium-nav-plus) {
    max-width: 58px;
  }
  .premium-nav-plus {
    width: 50px !important;
    height: 50px !important;
    font-size: 31px !important;
    margin-top: -16px !important;
  }
}
@media (max-width: 360px) {
  .premium-bottom-nav.tabs {
    grid-template-columns: 1fr 1fr 50px 1fr 1fr 1fr 1fr !important;
  }
  .premium-bottom-nav .tab {
    font-size: 11px !important;
  }
  .premium-bottom-nav .tab span:not(.premium-nav-plus) {
    max-width: 50px;
  }
}

/* =====================================================================
   FINANCIAL INTELLIGENCE — read-only cash-flow forecasting
   Presentation and simulation only. Canonical money math remains upstream.
   ===================================================================== */
.action-forecast { --action-accent: #c68cff; }
.financial-intelligence {
  --fi-ink: #f4f7f6;
  --fi-muted: #899a9d;
  --fi-mint: #8de6c4;
  --fi-gold: #ddc17e;
  --fi-blue: #77aaff;
  --fi-violet: #c48dff;
  --fi-coral: #ff8d9c;
  display: grid;
  gap: 18px;
  color: var(--fi-ink);
  color-scheme: dark;
}
.fi-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, .6fr);
  gap: 28px;
  min-height: 290px;
  padding: clamp(28px, 6vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(141,230,196,.2);
  border-radius: 36px;
  background:
    radial-gradient(circle at 83% 18%, rgba(196,141,255,.2), transparent 25%),
    radial-gradient(circle at 7% 90%, rgba(141,230,196,.16), transparent 34%),
    linear-gradient(138deg, #102720 0%, #121d29 52%, #1b1825 100%);
  box-shadow: 0 32px 90px rgba(2,8,14,.36);
  isolation: isolate;
}
.fi-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image: repeating-linear-gradient(120deg, transparent 0 31px, rgba(255,255,255,.035) 32px 33px);
}
.fi-hero-copy { align-self: center; max-width: 760px; }
.fi-kicker, .fi-section-heading span, .fi-health-copy > span, .fi-export-section > div > span {
  color: var(--fi-gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.fi-hero h2 {
  max-width: 780px;
  margin: 12px 0 16px;
  color: #f8fbfa;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.45rem, 7vw, 5.5rem);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.055em;
}
.fi-hero p { max-width: 650px; margin: 0; color: #b8c5c7; font-size: .94rem; line-height: 1.7; }
.fi-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; color: #8ea1a4; font-size: .74rem; font-weight: 800; }
.fi-readonly-chip, .fi-sandbox-badge { display: inline-flex; align-items: center; gap: 8px; color: #d9fff1; }
.fi-readonly-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--fi-mint); box-shadow: 0 0 0 6px rgba(141,230,196,.09); animation: fiPulse 2.4s ease-out infinite; }
.fi-orbit { position: relative; display: grid; place-items: center; align-self: center; min-height: 190px; }
.fi-orbit svg { width: min(210px, 100%); overflow: visible; transform: rotate(-90deg); filter: drop-shadow(0 14px 28px rgba(0,0,0,.25)); }
.fi-orbit circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 8; }
.fi-orbit #fiHealthRing { stroke: var(--fi-mint); stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 900ms cubic-bezier(.2,.75,.25,1); }
.fi-orbit > div { position: absolute; display: grid; place-items: center; }
.fi-orbit strong { font-family: Georgia, "Times New Roman", serif; font-size: 3.4rem; font-weight: 500; line-height: .9; }
.fi-orbit span { margin-top: 8px; color: #8fa3a5; font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.fi-notice { padding: 14px 18px; border: 1px solid rgba(221,193,126,.25); border-radius: 18px; background: rgba(221,193,126,.09); color: #f4dfa8; font-size: .82rem; font-weight: 800; }
.fi-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.fi-metric {
  min-width: 0;
  min-height: 150px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 25px;
  background: linear-gradient(155deg, rgba(22,32,44,.97), rgba(11,20,30,.97));
  box-shadow: 0 16px 38px rgba(2,8,14,.18);
  animation: fiRise .55s both;
}
.fi-metric:nth-child(2) { animation-delay: 55ms; }
.fi-metric:nth-child(3) { animation-delay: 110ms; }
.fi-metric:nth-child(4) { animation-delay: 165ms; }
.fi-metric > span, .fi-metric small { display: block; color: var(--fi-muted); font-size: .7rem; font-weight: 800; line-height: 1.4; }
.fi-metric strong { display: block; margin: 16px 0 10px; overflow-wrap: anywhere; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 3.5vw, 2.35rem); font-weight: 500; line-height: 1; }
.fi-metric-primary { grid-column: span 1; border-color: rgba(141,230,196,.24); background: linear-gradient(145deg, #173b31, #14232d); }
.fi-metric-primary strong { color: #d9fff1; }
.fi-section {
  min-width: 0;
  padding: clamp(20px, 3.5vw, 30px);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 29px;
  background: linear-gradient(155deg, rgba(19,29,42,.97), rgba(11,19,29,.97));
  box-shadow: 0 18px 46px rgba(2,8,14,.2);
}
.fi-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.fi-section-heading h3, .fi-health-copy h3, .fi-export-section h3 { margin: 5px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 3vw, 2.1rem); font-weight: 500; letter-spacing: -.025em; }
.fi-section-heading > strong { color: #d9fff1; font-size: .78rem; }
.fi-legend { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.fi-legend span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; color: #a9b7ba; font-size: 11px; font-weight: 900; }
.fi-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fi-mint); }
.fi-legend .bill::before { background: var(--fi-coral); }.fi-legend .income::before { background: var(--fi-blue); }.fi-legend .savings::before { background: var(--fi-gold); }.fi-legend .vault::before { background: var(--fi-violet); }
.fi-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(165px, 1fr); gap: 0; overflow-x: auto; padding: 10px 2px 12px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.fi-timeline-event { position: relative; min-height: 164px; padding: 38px 17px 15px 0; border-top: 1px solid rgba(255,255,255,.1); scroll-snap-align: start; animation: fiRise .5s var(--fi-delay) both; }
.fi-timeline-event::after { content: ""; position: absolute; top: -1px; left: 15px; right: -1px; height: 1px; background: linear-gradient(90deg, rgba(141,230,196,.48), transparent); }
.fi-event-dot { position: absolute; top: -7px; left: 0; width: 14px; height: 14px; border: 3px solid #15202c; border-radius: 50%; background: var(--fi-mint); box-shadow: 0 0 0 5px rgba(141,230,196,.09); }
.fi-timeline-event.bill .fi-event-dot { background: var(--fi-coral); box-shadow: 0 0 0 5px rgba(255,141,156,.09); }.fi-timeline-event.income .fi-event-dot { background: var(--fi-blue); }.fi-timeline-event.savings .fi-event-dot { background: var(--fi-gold); }.fi-timeline-event.vault .fi-event-dot { background: var(--fi-violet); }
.fi-timeline-event time, .fi-timeline-event span, .fi-timeline-event small { display: block; }
.fi-timeline-event time { color: var(--fi-muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.fi-timeline-event span { min-height: 36px; margin: 8px 0 7px; color: #d9e1e2; font-size: .75rem; font-weight: 800; line-height: 1.35; }
.fi-timeline-event strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; font-weight: 500; }
.fi-timeline-event small { margin-top: 8px; color: #73878b; font-size: 11px; line-height: 1.4; }
.fi-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: 18px; align-items: start; }
.fi-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.06); border-radius: 20px; }
.fi-table { width: 100%; min-width: 720px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fi-table th { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08); color: #6f8589; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.fi-table th:first-child, .fi-table td:first-child { text-align: left; }
.fi-table td { padding: 14px; border-bottom: 1px solid rgba(255,255,255,.055); color: #aebabc; font-size: .72rem; text-align: right; }
.fi-table tr:last-child td { border-bottom: 0; }.fi-table td strong { color: #edf3f2; }.fi-table td:first-child strong { display: block; }.fi-table td:first-child span { display: inline-block; margin-top: 4px; color: #ffb3bd; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.fi-table tr.tight { background: linear-gradient(90deg, rgba(255,141,156,.09), transparent); }
.fi-status-chip, .fi-sandbox-badge { padding: 7px 10px; border: 1px solid rgba(141,230,196,.16); border-radius: 999px; background: rgba(141,230,196,.07); color: #c9f8e7; font-size: 11px; font-weight: 900; white-space: nowrap; }
.fi-planner { position: sticky; top: 16px; border-color: rgba(196,141,255,.18); background: radial-gradient(circle at 100% 0, rgba(196,141,255,.12), transparent 35%), linear-gradient(155deg, #1a2231, #111821); }
.fi-scenario-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.fi-scenario-tabs button, .fi-reset-button, .fi-export-controls button { min-height: 42px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.035); color: #a8b6b9; font-size: 11px; font-weight: 900; box-shadow: none; }
.fi-scenario-tabs button:hover, .fi-scenario-tabs button.active { transform: none; border-color: rgba(196,141,255,.32); background: rgba(196,141,255,.13); color: #f0dcff; box-shadow: none; }
.fi-scenario-controls { display: grid; gap: 12px; margin: 18px 0; }
.fi-scenario-controls label, .fi-export-controls label { display: grid; gap: 7px; color: #87999d; font-size: 11px; font-weight: 900; }
.fi-scenario-controls input, .fi-scenario-controls select, .fi-export-controls select { width: 100%; min-height: 45px; margin: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: #0d151e; color: #eff5f4; }
.fi-scenario-controls p { margin: 0; color: #6f8286; font-size: 11px; line-height: 1.5; }
.fi-scenario-empty { padding: 16px; border: 1px dashed rgba(196,141,255,.2); border-radius: 17px; background: rgba(196,141,255,.04); }
.fi-scenario-empty strong { color: #e8d1fa; font-size: .76rem; }
.fi-scenario-empty p { margin-top: 7px; }
.fi-scenario-result { padding: 18px; border: 1px solid rgba(141,230,196,.14); border-radius: 20px; background: rgba(141,230,196,.055); }
.fi-scenario-result span { color: #88a09f; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.fi-scenario-result strong { display: block; margin: 10px 0 7px; color: #d9fff1; font-family: Georgia, "Times New Roman", serif; font-size: 2.1rem; font-weight: 500; }
.fi-scenario-result p { margin: 0; color: #91a5a6; font-size: 11px; line-height: 1.5; }
.fi-reset-button { width: 100%; margin-top: 10px; }
.fi-risk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fi-risk-card { display: flex; gap: 12px; min-height: 132px; padding: 17px; border: 1px solid rgba(221,193,126,.16); border-radius: 20px; background: rgba(221,193,126,.055); }
.fi-risk-card > span { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 10px; background: rgba(221,193,126,.14); color: #f7dfa0; font-weight: 900; }
.fi-risk-card strong { display: block; color: #e7eceb; font-size: .75rem; line-height: 1.35; }.fi-risk-card p { margin: 7px 0 0; color: #7f9194; font-size: 11px; line-height: 1.5; }
.fi-risk-card.danger { border-color: rgba(255,141,156,.2); background: rgba(255,141,156,.06); }.fi-risk-card.danger > span { background: rgba(255,141,156,.14); color: #ffc3cb; }.fi-risk-card.good { border-color: rgba(141,230,196,.18); background: rgba(141,230,196,.06); }.fi-risk-card.good > span { background: rgba(141,230,196,.14); color: #c8f9e6; }
.fi-health-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 30px; background: radial-gradient(circle at 0 100%, rgba(141,230,196,.1), transparent 32%), linear-gradient(155deg, #14252a, #111a25); }
.fi-health-copy p { color: #8fa0a3; line-height: 1.6; }.fi-health-copy > strong { display: block; margin-top: 20px; padding-left: 16px; border-left: 2px solid var(--fi-mint); color: #d7e5e2; font-size: .78rem; line-height: 1.55; }
.fi-health-factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fi-health-factors article { display: flex; gap: 10px; padding: 13px; border: 1px solid rgba(255,255,255,.06); border-radius: 16px; background: rgba(255,255,255,.025); }.fi-health-factors article > span { display: grid; place-items: center; flex: 0 0 auto; width: 23px; height: 23px; border-radius: 8px; background: rgba(141,230,196,.12); color: var(--fi-mint); font-size: .7rem; font-weight: 900; }.fi-health-factors article.attention > span { background: rgba(255,141,156,.12); color: #ffadb8; }.fi-health-factors strong { display: block; color: #dce5e3; font-size: .7rem; }.fi-health-factors p { margin: 4px 0 0; color: #72878a; font-size: 11px; line-height: 1.45; }
.fi-chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.fi-chart { min-width: 0; min-height: 230px; padding: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.065); border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.fi-chart > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }.fi-chart > div:first-child span { color: #8ea0a3; font-size: 11px; font-weight: 900; }.fi-chart > div:first-child strong { color: #dce7e5; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 500; }
.fi-chart svg { width: 100%; height: 160px; margin-top: 12px; overflow: visible; }.fi-chart polyline { fill: none; stroke: var(--chart-color); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; animation: fiDraw 1.1s ease both; }.fi-chart circle { fill: var(--chart-color); stroke: #111b25; stroke-width: .8; vector-effect: non-scaling-stroke; }
.fi-bars { display: flex !important; align-items: end !important; justify-content: stretch !important; gap: 6px !important; height: 165px; margin-top: 10px; }.fi-bars > span { display: grid; grid-template-rows: 1fr auto auto; gap: 5px; flex: 1 1 0; min-width: 0; height: 100%; text-align: center; }.fi-bars i { display: flex; align-items: end; justify-content: center; min-height: 0; }.fi-bars b { display: block; width: min(24px, 70%); height: var(--bar); border-radius: 8px 8px 3px 3px; background: var(--bar-color); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.18); transform-origin: bottom; animation: fiBars .75s ease both; }.fi-bars small { overflow: hidden; color: #708588; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.fi-bars em { color: #a6b5b7; font-size: 11px; font-style: normal; }
.fi-export-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; border-color: rgba(221,193,126,.16); background: radial-gradient(circle at 100% 0, rgba(221,193,126,.1), transparent 35%), linear-gradient(155deg, #1a222b, #121922); }.fi-export-section p { max-width: 620px; margin-bottom: 0; color: #849598; line-height: 1.6; }.fi-export-controls { display: grid; grid-template-columns: minmax(190px, 1fr) auto auto; gap: 8px; align-items: end; }.fi-export-controls button { padding-inline: 16px; border-color: rgba(221,193,126,.18); background: rgba(221,193,126,.08); color: #f0dba7; }
@keyframes fiPulse { 0% { box-shadow: 0 0 0 0 rgba(141,230,196,.28); } 70%,100% { box-shadow: 0 0 0 9px rgba(141,230,196,0); } }
@keyframes fiRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fiDraw { from { stroke-dashoffset: 420; opacity: .25; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes fiBars { from { transform: scaleY(.08); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }
@media (max-width: 980px) { .fi-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.fi-layout { grid-template-columns: 1fr; }.fi-planner { position: static; }.fi-risk-grid, .fi-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.fi-health-section { grid-template-columns: 1fr; }.fi-export-section { grid-template-columns: 1fr; }.fi-export-controls { grid-template-columns: 1fr 1fr; }.fi-export-controls label { grid-column: 1 / -1; } }
@media (max-width: 680px) { .fi-hero { grid-template-columns: 1fr; min-height: 0; padding: 28px 22px; }.fi-hero h2 { font-size: clamp(2.6rem, 14vw, 4.3rem); }.fi-orbit { min-height: 150px; }.fi-orbit svg { width: 160px; }.fi-orbit strong { font-size: 2.8rem; }.fi-metric-grid, .fi-risk-grid, .fi-chart-grid, .fi-health-factors { grid-template-columns: 1fr; }.fi-metric { min-height: 125px; }.fi-section { padding: 20px 16px; border-radius: 24px; }.fi-section-heading { align-items: flex-start; flex-direction: column; }.fi-timeline { grid-auto-columns: minmax(155px, 72vw); }.fi-scenario-tabs { grid-template-columns: 1fr 1fr; }.fi-export-controls { grid-template-columns: 1fr; }.fi-export-controls label { grid-column: auto; }.fi-export-controls button { width: 100%; }.financial-intelligence { gap: 13px; } }
@media (prefers-reduced-motion: reduce) { .financial-intelligence *, .financial-intelligence *::before, .financial-intelligence *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Bell notifications — wired without touching money maths */
.notification-bell-btn { position: relative; }
.notification-bell-badge {
  position: absolute;
  top: -4px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ef4444, #fb7185);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  border: 2px solid rgba(8, 13, 31, 0.96);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.55);
}
.notification-modal {
  max-width: 520px;
  max-height: min(82vh, 720px);
  overflow-y: auto;
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,0.20), transparent 34%),
    radial-gradient(circle at bottom left, rgba(16,185,129,0.13), transparent 32%),
    rgba(11, 18, 42, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 28px 70px rgba(0,0,0,0.62), 0 0 34px rgba(59,130,246,0.12);
}
.notification-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.notification-head h3 { margin-bottom: 0; }
.notification-close-btn { max-width: 92px; flex: 0 0 auto; }
.notification-summary { margin-top: 0; margin-bottom: 12px; }
.notification-list {
  display: grid;
  gap: 10px;
}
.notification-item {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 14px;
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.notification-item.critical {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.28);
}
.notification-item.warning {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.28);
}
.notification-item.good {
  background: rgba(16,185,129,0.09);
  border-color: rgba(16,185,129,0.24);
}
.notification-item.info {
  background: rgba(59,130,246,0.09);
  border-color: rgba(59,130,246,0.24);
}
.notification-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.notification-item-title strong {
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
}
.notification-severity-pill {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.08);
  color: #dbeafe;
}
.notification-item p {
  margin: 0;
  color: rgba(226,232,240,0.82);
  font-size: 13px;
  line-height: 1.45;
}
.notification-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.notification-actions button {
  width: auto;
  min-width: 112px;
  padding: 9px 12px;
  font-size: 12px;
  border-radius: 14px;
}
.notification-empty {
  text-align: center;
  padding: 24px 16px;
  border: 1px dashed rgba(148,163,184,0.28);
  border-radius: 22px;
  color: var(--muted);
  background: rgba(255,255,255,0.035);
}
@media (max-width: 420px) {
  .notification-modal { padding: 18px; max-height: 86vh; }
  .notification-head { align-items: center; }
  .notification-actions { flex-direction: column; }
  .notification-actions button { width: 100%; }
}

/* Money Coach — canonical read-only guidance and account-scoped alerts */
.money-coach-teaser,
.money-coach-hero,
.money-coach-plan,
.money-coach-feed,
.money-coach-metric-grid article,
.money-coach-settings-card {
  --coach-accent: #8de6c4;
  --coach-accent-rgb: 141, 230, 196;
}
.money-coach-teaser[data-tone="warning"],
.money-coach-hero[data-tone="warning"] { --coach-accent: #f8c66c; --coach-accent-rgb: 248, 198, 108; }
.money-coach-teaser[data-tone="critical"],
.money-coach-hero[data-tone="critical"] { --coach-accent: #ff7e91; --coach-accent-rgb: 255, 126, 145; }
.money-coach-kicker {
  display: block;
  color: var(--coach-accent, #8de6c4);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.money-coach-teaser {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(var(--coach-accent-rgb), .28);
  border-radius: 26px;
  background: linear-gradient(118deg, rgba(var(--coach-accent-rgb), .13), rgba(9, 16, 36, .96) 42%, rgba(15, 25, 52, .96));
  box-shadow: 0 22px 48px rgba(3, 8, 22, .28), inset 0 1px rgba(255, 255, 255, .06);
}
.money-coach-teaser::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
}
.money-coach-teaser-copy { position: relative; z-index: 1; }
.money-coach-teaser h2 { margin: 4px 0 5px; color: #fff; font-size: clamp(20px, 3vw, 28px); }
.money-coach-teaser p { margin: 0; max-width: 680px; color: rgba(226, 232, 240, .76); line-height: 1.5; }
.money-coach-open,
.money-coach-back {
  position: relative;
  z-index: 1;
  width: auto;
  border: 1px solid rgba(var(--coach-accent-rgb), .42);
  background: rgba(var(--coach-accent-rgb), .12);
  color: #fff;
  box-shadow: none;
}
.money-coach-open:hover,
.money-coach-back:hover { transform: translateY(-2px); background: rgba(var(--coach-accent-rgb), .2); }
.money-coach-orbit,
.money-coach-compass { position: relative; flex: 0 0 auto; border-radius: 50%; }
.money-coach-orbit { width: 68px; height: 68px; border: 1px solid rgba(var(--coach-accent-rgb), .36); }
.money-coach-orbit::before,
.money-coach-compass::before { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(var(--coach-accent-rgb), .34); border-radius: 50%; }
.money-coach-orbit span,
.money-coach-compass span { position: absolute; inset: 37%; border-radius: 50%; background: var(--coach-accent); box-shadow: 0 0 28px rgba(var(--coach-accent-rgb), .8); }
.money-coach-orbit i,
.money-coach-orbit b,
.money-coach-compass i,
.money-coach-compass b,
.money-coach-compass em { position: absolute; width: 8px; height: 8px; border: 2px solid var(--coach-accent); border-radius: 50%; background: #0d1730; animation: moneyCoachOrbit 7s linear infinite; }
.money-coach-orbit i { top: 5px; left: 30px; transform-origin: 4px 29px; }
.money-coach-orbit b { right: 5px; top: 30px; transform-origin: -25px 4px; animation-duration: 5s; animation-direction: reverse; }
.money-coach-page { padding-bottom: 110px; }
.money-coach-hero {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  padding: clamp(24px, 5vw, 58px);
  border: 1px solid rgba(var(--coach-accent-rgb), .26);
  border-radius: 0 0 42px 42px;
  background: radial-gradient(circle at 80% 45%, rgba(var(--coach-accent-rgb), .17), transparent 27%), linear-gradient(145deg, #071026, #111d3f 64%, #081224);
  box-shadow: 0 30px 70px rgba(2, 7, 20, .38);
}
.money-coach-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,.018) 35px 36px); }
.money-coach-back { margin-bottom: 44px; padding: 9px 13px; }
.money-coach-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(210px, .7fr); align-items: center; gap: 34px; }
.money-coach-hero h1 { max-width: 760px; margin: 8px 0 14px; color: #fff; font-size: clamp(42px, 7vw, 76px); line-height: .98; letter-spacing: -.055em; }
.money-coach-hero p { max-width: 700px; margin: 0; color: rgba(226, 232, 240, .76); font-size: clamp(16px, 2vw, 21px); line-height: 1.55; }
.money-coach-compass { justify-self: center; width: min(260px, 38vw); aspect-ratio: 1; border: 1px solid rgba(var(--coach-accent-rgb), .28); box-shadow: inset 0 0 55px rgba(var(--coach-accent-rgb), .08), 0 0 80px rgba(var(--coach-accent-rgb), .08); }
.money-coach-compass::after { content: ""; position: absolute; inset: 31%; border: 1px dashed rgba(var(--coach-accent-rgb), .42); border-radius: 50%; }
.money-coach-compass i { top: 8%; left: calc(50% - 4px); transform-origin: 4px 105px; }
.money-coach-compass b { right: 8%; top: calc(50% - 4px); transform-origin: -85px 4px; animation-duration: 11s; animation-direction: reverse; }
.money-coach-compass em { bottom: 8%; left: calc(50% - 4px); transform-origin: 4px -85px; animation-duration: 14s; }
.money-coach-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: -34px 20px 22px; position: relative; z-index: 2; }
.money-coach-metric-grid article { min-height: 156px; padding: 20px; border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: rgba(12, 21, 45, .94); box-shadow: 0 20px 42px rgba(2, 7, 20, .28), inset 0 1px rgba(255,255,255,.05); }
.money-coach-metric-grid span { display: block; color: rgba(184, 199, 226, .7); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.money-coach-metric-grid strong { display: block; margin: 14px 0 8px; color: #fff; font-size: clamp(25px, 3.3vw, 39px); letter-spacing: -.04em; }
.money-coach-metric-grid small { color: rgba(184, 199, 226, .62); line-height: 1.4; }
.money-coach-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; padding: 0 20px; }
.money-coach-plan,
.money-coach-feed { min-width: 0; padding: 24px; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: #0c162f; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.money-coach-section-heading span { color: #8de6c4; font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.money-coach-section-heading h2 { margin: 5px 0 18px; color: #fff; font-size: 24px; }
.money-coach-action-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.money-coach-action-list li { display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: 12px; padding: 15px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.money-coach-action-list li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 12px; background: rgba(141,230,196,.12); color: #8de6c4; font-weight: 900; }
.money-coach-action-list p { margin: 4px 0 0; color: rgba(226,232,240,.84); line-height: 1.45; }
.money-coach-settings-card { border-color: rgba(141,230,196,.2); background: linear-gradient(145deg, rgba(141,230,196,.07), rgba(12,22,47,.96) 38%); }
.money-coach-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.money-coach-settings-heading h2 { margin: 5px 0; }
.money-coach-settings-heading p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.5; }
.money-coach-preference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.money-coach-preference-grid label { display: flex; align-items: flex-start; gap: 11px; padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 17px; background: rgba(255,255,255,.035); cursor: pointer; }
.money-coach-preference-grid input { width: 18px; min-width: 18px; height: 18px; margin-top: 2px; accent-color: #8de6c4; }
.money-coach-preference-grid strong,
.money-coach-preference-grid small { display: block; }
.money-coach-preference-grid strong { color: #fff; }
.money-coach-preference-grid small { margin-top: 4px; color: var(--muted); line-height: 1.4; }
.notification-item.unread { box-shadow: inset 4px 0 var(--coach-accent, #8de6c4), inset 0 1px rgba(255,255,255,.04); }
@keyframes moneyCoachOrbit { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  .money-coach-teaser { grid-template-columns: 58px 1fr; }
  .money-coach-open { grid-column: 2; justify-self: start; }
  .money-coach-orbit { width: 56px; height: 56px; }
  .money-coach-orbit i { left: 24px; transform-origin: 4px 23px; }
  .money-coach-orbit b { top: 24px; transform-origin: -19px 4px; }
  .money-coach-hero-grid { grid-template-columns: 1fr; }
  .money-coach-compass { position: absolute; right: -72px; bottom: -92px; opacity: .52; }
  .money-coach-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .money-coach-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .money-coach-teaser { grid-template-columns: 1fr; padding: 20px; }
  .money-coach-orbit { display: none; }
  .money-coach-open { grid-column: 1; width: 100%; }
  .money-coach-hero { min-height: 350px; padding: 22px 18px 48px; border-radius: 0 0 30px 30px; }
  .money-coach-back { margin-bottom: 50px; }
  .money-coach-hero h1 { font-size: clamp(38px, 13vw, 58px); }
  .money-coach-metric-grid { grid-template-columns: 1fr 1fr; margin: -28px 12px 14px; gap: 9px; }
  .money-coach-metric-grid article { min-height: 138px; padding: 16px; border-radius: 20px; }
  .money-coach-metric-grid strong { font-size: 25px; }
  .money-coach-layout { padding: 0 12px; }
  .money-coach-plan, .money-coach-feed { padding: 19px 15px; border-radius: 22px; }
  .money-coach-preference-grid { grid-template-columns: 1fr; }
  .money-coach-settings-heading { align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .money-coach-orbit i, .money-coach-orbit b, .money-coach-compass i, .money-coach-compass b, .money-coach-compass em { animation: none; }
}

/* Payday rollover hardening */
.payday-rollover-card {
  border: 1px solid rgba(251, 191, 36, 0.34);
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.22), transparent 38%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(15, 33, 58, 0.96));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.payday-rollover-card.payday-overdue {
  border-color: rgba(248, 113, 113, 0.42);
  background:
    radial-gradient(circle at top left, rgba(248, 113, 113, 0.20), transparent 40%),
    linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(35, 20, 39, 0.96));
}
.payday-rollover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.payday-rollover-head h2 {
  margin: 4px 0 6px;
  font-size: 1.18rem;
  line-height: 1.1;
}
.payday-rollover-head p {
  margin: 0;
  max-width: 42rem;
}
.payday-rollover-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.payday-rollover-stat {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background: rgba(2, 6, 23, 0.28);
  padding: 12px;
}
.payday-rollover-stat span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.payday-rollover-stat strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
}
.payday-rollover-actions {
  display: grid;
  grid-template-columns: 1.35fr .95fr;
  gap: 10px;
  margin-top: 14px;
}
.payday-rollover-foot {
  margin-top: 10px;
  color: var(--muted);
}
.payday-confirmation-modal {
  max-width: 620px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.payday-confirmation-modal h3 {
  margin: 5px 0 7px;
}
.payday-confirmation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.payday-confirmation-stat {
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(2, 6, 23, 0.26);
}
.payday-confirmation-stat span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.payday-confirmation-stat strong {
  display: block;
  overflow-wrap: anywhere;
}
.payday-confirmation-actions {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
}
.dangerPill {
  background: rgba(248, 113, 113, 0.18);
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.35);
}
.warnPill {
  background: rgba(251, 191, 36, 0.16);
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.32);
}
@media (max-width: 560px) {
  .payday-rollover-head,
  .payday-rollover-actions {
    grid-template-columns: 1fr;
  }
  .payday-rollover-head {
    display: grid;
  }
  .payday-rollover-grid {
    grid-template-columns: 1fr;
  }
  .payday-confirmation-grid,
  .payday-confirmation-actions {
    grid-template-columns: 1fr;
  }
}

/* Final tester hardening: make live-bank truth and buffer pressure easier to scan
   without changing the app structure or financial behaviour. */
.conversion-cycle-sub {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.conversion-overview-row span,
.premium-pulse-item span,
.summaryRow span {
  color: rgba(226, 232, 240, 0.72);
}
.premium-money-pulse-card.warn,
.conversion-safe-card.warn {
  box-shadow: 0 24px 70px rgba(0,0,0,0.34), 0 0 0 1px rgba(251,191,36,0.18) inset !important;
}
.premium-money-pulse-card.bad,
.conversion-safe-card.bad {
  box-shadow: 0 24px 70px rgba(0,0,0,0.34), 0 0 0 1px rgba(251,113,133,0.22) inset !important;
}
.home-next-move,
.command-centre,
.trust-card {
  scroll-margin-top: 18px;
}
.vault-card .summaryRow strong,
.sinking-fund-item .value {
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .conversion-safe-amount {
    font-size: clamp(38px, 12vw, 52px);
    letter-spacing: 0;
  }
  .conversion-safe-topline,
  .premium-pulse-head {
    align-items: flex-start;
  }
  .premium-pulse-grid,
  .conversion-overview-row {
    gap: 9px;
  }
  .money-control-grid {
    grid-template-columns: 1fr;
  }
  .vault-actions {
    grid-template-columns: 1fr;
  }
}

/* Premium calm home audit: reduce repeated money surfaces without changing IDs or maths. */
#homePanel-daily {
  display: grid;
  gap: 14px;
}
#homePanel-daily > .card,
#homePanel-daily > details.collapse {
  margin-bottom: 0;
}
.conversion-safe-card {
  margin-top: 2px;
}
.conversion-verdict-message {
  font-size: 14px;
  line-height: 1.45;
}
.calm-next-card {
  margin-top: 0;
  border-color: rgba(48,229,159,0.18);
}
.calm-next-card h2,
.money-control-head h2 {
  line-height: 1.15;
}
.calm-next-card .between,
.money-control-head,
.premium-pulse-head {
  align-items: flex-start;
}
.compact-stat {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.money-control-centre-card {
  margin-top: 0;
}
.money-control-why {
  color: rgba(226,232,240,0.82);
}
.money-control-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.money-control-item {
  min-height: 108px;
}
.money-control-item p {
  color: rgba(203,213,225,0.70);
}
.money-control-more {
  margin: 12px 0 0;
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  box-shadow: none;
}
.money-control-more > summary,
.home-money-detail-details > summary,
.home-more-detail-details > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}
.money-control-more .collapseBody {
  padding-top: 0;
}
.home-money-detail-details {
  margin-top: 0;
  border-radius: 22px;
  background: rgba(13,24,52,0.62);
  box-shadow: none;
}
.home-more-detail-details {
  margin-top: 0;
  border-radius: 22px;
  background: rgba(13,24,52,0.58);
  box-shadow: none;
}
.home-more-detail-body {
  display: grid;
  gap: 12px;
  padding-top: 0;
}
.home-more-detail-body > details.collapse {
  margin: 0;
  box-shadow: none;
  background: rgba(255,255,255,0.025);
}
.home-money-detail-body {
  display: grid;
  gap: 12px;
  padding-top: 0;
}
.home-money-detail-body > .card,
.home-money-detail-body .conversion-dashboard-grid > .card {
  margin: 0;
  box-shadow: none;
}
.premium-money-pulse-card {
  margin-top: 0;
}
.premium-pulse-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.quick-spend-card {
  border-color: rgba(226,232,240,0.10);
}
.quick-spend-intro {
  margin-top: 6px;
}
.quick-spend-block {
  margin-top: 14px;
}
.quick-custom-block,
.quick-recent-collapse {
  margin-top: 10px;
}
.quick-spend-amounts button,
.quick-spend-categories button,
.conversion-hero-actions button {
  min-height: 48px;
}
.home-support-details,
.calm-forecast-details,
.calm-routine-details {
  background: rgba(13,24,52,0.58);
  box-shadow: none;
}
@media (max-width: 560px) {
  #homePanel-daily {
    gap: 12px;
  }
  .conversion-safe-topline {
    gap: 12px;
  }
  .conversion-hero-actions,
  .row.daily-checkin-actions,
  .setup-check-actions {
    flex-direction: column;
  }
  .money-control-grid,
  .premium-pulse-grid {
    grid-template-columns: 1fr;
  }
  .money-control-item {
    min-height: 0;
  }
  .money-control-item strong,
  .premium-pulse-item strong {
    font-size: 20px;
  }
  .money-control-more > summary,
  .home-money-detail-details > summary,
  .home-more-detail-details > summary,
  .calm-routine-details > summary,
  .calm-forecast-details > summary,
  .home-support-details > summary {
    font-size: 14px;
  }
}
.savings-coach {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--success) 10%, var(--card)), var(--card));
}
.savings-coach-controls { display: grid; gap: 8px; margin-top: 8px; }
.savings-coach-controls input { max-width: 180px; }
.savings-transfer-modal { max-width: 620px; }
.savings-transfer-assumption { line-height: 1.45; }
.savings-transfer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.savings-transfer-stat {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 88%, var(--bg));
}
.savings-transfer-stat span { color: var(--muted); font-size: .78rem; }
.savings-transfer-stat strong { font-size: 1.05rem; }
.savings-transfer-stat-wide { grid-column: 1 / -1; }
.savings-reserve-override {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--danger) 9%, var(--card));
  color: var(--text);
  line-height: 1.4;
}
.savings-reserve-override input { width: auto; margin-top: 3px; }
.savings-transfer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.savings-ledger-history { padding: 14px; border: 1px solid var(--border); border-radius: 16px; }
.savings-ledger-history .summaryRow:last-child { border-bottom: 0; }
@media (max-width: 560px) {
  .savings-transfer-grid, .savings-transfer-actions { grid-template-columns: 1fr; }
  .savings-transfer-stat-wide { grid-column: auto; }
}

/* Home dashboard five-second scan: visual simplification only. */
#homePanel-daily {
  gap: 16px;
}

.daily-focus-card.hero-money-card {
  position: relative;
  overflow: hidden;
  margin: 16px 0 10px;
  padding: clamp(26px, 5vw, 42px);
  border: 1px solid rgba(48, 229, 159, 0.2);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 12%, rgba(56, 189, 248, 0.14), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(48, 229, 159, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(13, 24, 52, 0.98), rgba(5, 10, 25, 0.98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.daily-focus-card.hero-money-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.045), transparent 34%);
}

.hero-money-heading,
.hero-money-runway,
.conversion-hero-actions {
  position: relative;
  z-index: 1;
}

.hero-money-heading .label {
  margin-bottom: 10px;
  color: rgba(226, 232, 240, 0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.daily-focus-card .conversion-safe-amount {
  max-width: 100%;
  margin: 0;
  color: #ffffff;
  font-size: clamp(58px, 12vw, 92px);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.daily-focus-card.good .conversion-safe-amount,
.daily-focus-card.warn .conversion-safe-amount,
.daily-focus-card.bad .conversion-safe-amount {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.hero-money-runway {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(226, 232, 240, 0.12);
}

.hero-daily-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-daily-amount strong {
  color: #a7f3d0;
  font-size: clamp(30px, 6vw, 44px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.035em;
}

.hero-daily-amount span,
.hero-payday-timing span {
  color: rgba(226, 232, 240, 0.76);
  font-size: 14px;
  font-weight: 700;
}

.hero-payday-timing {
  padding-bottom: 3px;
  text-align: right;
}

.daily-focus-card .conversion-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.daily-focus-card .conversion-hero-actions button {
  min-height: 52px;
  border-radius: 16px;
}

.calm-next-card {
  padding: 18px 20px;
  border-color: rgba(48, 229, 159, 0.14);
  background: rgba(13, 24, 52, 0.72);
  box-shadow: none;
}

.calm-next-card .next-move-copy h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  font-size: clamp(18px, 4vw, 22px);
  line-height: 1.25;
}

.next-move-check {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: #34d399;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.financial-breakdown,
.home-quick-actions-details {
  margin: 0;
  border: 1px solid rgba(226, 232, 240, 0.08);
  border-radius: 20px;
  background: rgba(13, 24, 52, 0.48);
  box-shadow: none;
}

.financial-breakdown > summary,
.home-quick-actions-details > summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  color: rgba(241, 245, 249, 0.9);
  font-size: 15px;
  font-weight: 800;
}

.financial-breakdown-body {
  padding-top: 2px;
}

.financial-breakdown-body > h2 {
  margin: 0 0 12px;
  color: rgba(226, 232, 240, 0.72);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.financial-breakdown .money-control-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(226, 232, 240, 0.08);
}

.financial-breakdown .money-control-item {
  min-height: 0;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.08);
  border-radius: 0;
  background: transparent;
}

.financial-breakdown .money-control-item:nth-child(odd) {
  padding-right: 16px;
}

.financial-breakdown .money-control-item:nth-child(even) {
  padding-left: 16px;
  border-left: 1px solid rgba(226, 232, 240, 0.08);
}

.financial-breakdown .money-control-item span,
.financial-breakdown .money-control-item small {
  color: rgba(203, 213, 225, 0.66);
  font-size: 11px;
}

.financial-breakdown .money-control-item strong {
  margin: 5px 0 0;
  font-size: 19px;
}

.financial-breakdown .financial-next-pay {
  grid-column: 1 / -1;
  padding-left: 0;
  padding-right: 0;
  border-left: 0;
}

.financial-calculation-details {
  margin: 14px 0 0;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: none;
}

.financial-calculation-details > summary {
  min-height: 48px;
  padding: 12px 14px;
  font-size: 13px;
}

.home-quick-actions-details .collapseBody {
  padding-top: 0;
}

.home-quick-actions-details .quick-spend-card {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 560px) {
  #homePanel-daily {
    gap: 12px;
  }

  .daily-focus-card.hero-money-card {
    margin: 14px 0 8px;
    padding: 26px 22px 22px;
    border-radius: 26px;
  }

  .daily-focus-card .conversion-safe-amount {
    font-size: clamp(54px, 17vw, 76px);
  }

  .hero-money-runway {
    display: grid;
    gap: 12px;
    margin-top: 22px;
    padding-top: 18px;
  }

  .hero-payday-timing {
    text-align: left;
  }

  .daily-focus-card .conversion-hero-actions {
    grid-template-columns: 1fr 1fr;
    margin-top: 22px;
  }

  .daily-focus-card .conversion-hero-actions button {
    min-height: 50px;
    padding-inline: 10px;
  }

  .financial-breakdown .money-control-grid {
    grid-template-columns: 1fr 1fr;
  }

  .financial-breakdown .money-control-item {
    min-height: 76px;
  }
}

@media (max-width: 370px) {
  .daily-focus-card .conversion-hero-actions {
    grid-template-columns: 1fr;
  }

  .financial-breakdown .money-control-grid {
    grid-template-columns: 1fr;
  }

  .financial-breakdown .money-control-item,
  .financial-breakdown .money-control-item:nth-child(odd),
  .financial-breakdown .money-control-item:nth-child(even) {
    grid-column: auto;
    padding: 13px 0;
    border-left: 0;
  }

  .financial-breakdown .financial-next-pay {
    grid-column: auto;
  }
}

/* Keep the simplified home hierarchy even when the continuous ledger powers values. */
body.continuous-ledger-dashboard-enabled #continuousLedgerDashboard {
  display: none !important;
}

body.continuous-ledger-dashboard-enabled .conversion-safe-card,
body.continuous-ledger-dashboard-enabled #homeNextMoveCard,
body.continuous-ledger-dashboard-enabled .money-control-centre-card {
  display: block !important;
}

/* Financial coach home redesign: presentation only; money values remain untouched. */
#page-home {
  --coach-green: #22c98b;
  --coach-green-deep: #087a59;
  --coach-amber: #f0b84b;
  --coach-red: #ef6a70;
  --coach-blue: #58a9ee;
}

#page-home .conversion-header {
  min-height: 64px;
  margin: 0 0 12px;
  padding: 8px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#page-home .conversion-brand {
  gap: 10px;
}

#page-home .conversion-logo {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

#page-home .conversion-title {
  font-size: 20px;
  letter-spacing: -0.035em;
}

#page-home .conversion-header-actions {
  gap: 8px;
}

#page-home .conversion-icon-button,
#page-home .conversion-avatar {
  width: 42px;
  height: 42px;
  min-height: 42px;
  border: 1px solid rgba(226, 232, 240, 0.11);
  border-radius: 14px;
  background: rgba(13, 24, 52, 0.7);
  color: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

#page-home .conversion-avatar {
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 12px;
  font-weight: 900;
}

.progress-banner {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  margin: 0 0 14px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  color: #f8fafc;
  box-shadow: 0 18px 45px rgba(2, 8, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  animation: coach-banner-in 420ms cubic-bezier(.2,.8,.2,1) both;
}

.progress-banner::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -58px;
  top: -78px;
  border: 24px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.progress-banner-success {
  background: linear-gradient(125deg, #087a59 0%, #15a873 52%, #28c98b 100%);
}

.progress-banner-caution {
  background: linear-gradient(125deg, #9b5b0a 0%, #c98722 52%, #e9ac40 100%);
}

.progress-banner-warning {
  background: linear-gradient(125deg, #9f3541 0%, #c84b57 54%, #e5686e 100%);
}

.progress-banner-info {
  background: linear-gradient(125deg, #185a92 0%, #287cba 54%, #4aa4dd 100%);
}

.progress-banner-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.progress-banner-icon svg {
  width: 23px;
  height: 23px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.progress-banner-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.progress-banner-label {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.progress-banner strong {
  display: block;
  font-size: clamp(17px, 4vw, 21px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.progress-banner p {
  max-width: 620px;
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

#homePanel-daily {
  gap: 12px;
}

.daily-focus-card.hero-money-card {
  margin: 0 0 4px;
  padding: clamp(28px, 6vw, 46px);
  border-color: rgba(88, 169, 238, 0.18);
  background:
    radial-gradient(circle at 92% 8%, rgba(88, 169, 238, 0.18), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(34, 201, 139, 0.13), transparent 42%),
    linear-gradient(145deg, #101f3d 0%, #081225 72%);
}

.hero-money-heading .label {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  letter-spacing: 0.17em;
}

.daily-focus-card .conversion-safe-amount {
  font-size: clamp(62px, 14vw, 104px);
  letter-spacing: -0.065em;
}

.hero-daily-amount strong {
  color: #c8f7e5;
}

.daily-focus-card .conversion-hero-actions {
  grid-template-columns: 1.35fr 1fr;
  gap: 12px;
}

.daily-focus-card .conversion-hero-actions button {
  min-height: 56px;
  border-radius: 18px;
  font-weight: 900;
}

.daily-focus-card .conversion-hero-actions .success {
  color: #062a20;
  background: linear-gradient(135deg, #9af0cf, #3ed39b 58%, #2bbd89);
  box-shadow: 0 16px 34px rgba(34, 201, 139, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

.calm-next-card {
  border-radius: 22px;
  border-color: rgba(88, 169, 238, 0.14);
  background: linear-gradient(145deg, rgba(16, 31, 61, 0.82), rgba(10, 20, 40, 0.76));
}

.calm-next-card .label {
  color: #8dc9f4;
}

.financial-breakdown {
  border-radius: 22px;
}

.financial-breakdown > summary::after {
  content: "+";
  margin-left: auto;
  color: #8dc9f4;
  font-size: 22px;
  font-weight: 500;
}

.financial-breakdown[open] > summary::after {
  content: "−";
}

@keyframes coach-banner-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
  #page-home .conversion-header {
    min-height: 56px;
    margin-bottom: 8px;
    padding: 5px 2px;
  }

  #page-home .conversion-title {
    font-size: 18px;
  }

  .progress-banner {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
  }

  .progress-banner-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .daily-focus-card.hero-money-card {
    margin-top: 0;
    padding: 28px 22px 22px;
  }

  .daily-focus-card .conversion-hero-actions {
    grid-template-columns: 1fr;
  }

  .daily-focus-card .conversion-hero-actions button {
    min-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-banner { animation: none; }
}

/* Premium SpendBeacon dashboard — UI-only presentation layer. */
#homePanel-daily {
  --dashboard-ink: #f7fbff;
  --dashboard-muted: #90a4bc;
  --dashboard-panel: rgba(13, 25, 48, 0.82);
  --dashboard-panel-strong: rgba(17, 32, 60, 0.96);
  --dashboard-line: rgba(177, 205, 235, 0.13);
  --dashboard-mint: #64e3b1;
  --dashboard-blue: #72b6ff;
  --dashboard-gold: #f3c66b;
  --dashboard-coral: #ff8b8f;
  display: grid;
  gap: 18px;
  color-scheme: dark;
}

#homePanel-daily > .card,
#homePanel-daily > .dashboard-section,
#homePanel-daily > details {
  margin-bottom: 0;
}

.dashboard-section {
  position: relative;
}

.dashboard-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-inline: 2px;
}

.dashboard-section-heading h2 {
  margin: 3px 0 0;
  color: var(--dashboard-ink);
  font-size: clamp(21px, 4vw, 27px);
  letter-spacing: -0.045em;
}

.dashboard-eyebrow {
  color: var(--dashboard-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dashboard-section-note {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(114, 182, 255, 0.16);
  border-radius: 999px;
  color: #a9c9e9;
  background: rgba(114, 182, 255, 0.07);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.daily-focus-card.hero-money-card {
  isolation: isolate;
  min-height: 330px;
  overflow: hidden;
  padding: clamp(28px, 6vw, 42px);
  border: 1px solid rgba(145, 218, 255, 0.17);
  border-radius: 32px;
  background:
    radial-gradient(circle at 84% 8%, rgba(108, 193, 255, 0.3), transparent 28%),
    radial-gradient(circle at 12% 112%, rgba(75, 230, 173, 0.26), transparent 43%),
    linear-gradient(142deg, #163768 0%, #10274c 44%, #09162d 100%);
  box-shadow: 0 28px 70px rgba(2, 8, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: dashboard-card-in 620ms cubic-bezier(.2,.75,.25,1) both;
}

.daily-focus-card.hero-money-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.19;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.hero-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  pointer-events: none;
}

.hero-orbit-one { width: 260px; height: 260px; right: -142px; top: -108px; }
.hero-orbit-two { width: 150px; height: 150px; right: -60px; top: -54px; }

.hero-money-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.hero-money-heading .label {
  margin-bottom: 9px;
  color: rgba(224, 239, 255, 0.68);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.daily-focus-card .conversion-safe-amount {
  min-height: 1.05em;
  margin: 0;
  color: #fff;
  font-size: clamp(58px, 13vw, 94px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.07em;
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.2);
}

.hero-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(151, 245, 207, 0.22);
  border-radius: 999px;
  color: #d6ffed;
  background: rgba(36, 181, 128, 0.12);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.hero-status-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6af0ba;
  box-shadow: 0 0 0 5px rgba(106, 240, 186, 0.1);
  animation: dashboard-live-pulse 2.4s ease-in-out infinite;
}

.hero-money-runway {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  margin-top: 36px;
  padding: 0;
  border: 0;
}

.hero-daily-amount,
.hero-payday-timing {
  display: grid;
  gap: 5px;
}

.hero-daily-amount span,
.hero-payday-timing span {
  color: rgba(222, 238, 255, 0.58);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-daily-amount strong {
  color: #bff8df;
  font-size: clamp(25px, 6vw, 35px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
}

.hero-payday-timing { text-align: right; }
.hero-payday-timing strong { color: #f0f7ff; font-size: 14px; }

.pay-cycle-progress { margin-top: 26px; }
.pay-cycle-progress-copy { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; color: rgba(222, 238, 255, 0.58); font-size: 11px; font-weight: 750; }
.pay-cycle-progress-copy strong { color: rgba(239, 248, 255, 0.86); font-weight: 800; }
.pay-cycle-progress-track { height: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; background: rgba(2, 10, 26, 0.32); }
.pay-cycle-progress-track i { display: block; width: var(--dashboard-progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #70e6b7, #76c7ff); box-shadow: 0 0 22px rgba(105, 222, 198, 0.34); transition: width 900ms cubic-bezier(.2,.75,.25,1); }

.premium-money-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.premium-money-tile {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--dashboard-line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(18, 34, 62, 0.94), rgba(10, 21, 42, 0.9));
  box-shadow: 0 14px 38px rgba(2, 8, 23, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  animation: dashboard-card-in 560ms cubic-bezier(.2,.75,.25,1) both;
}

.premium-money-tile:nth-child(2) { animation-delay: 60ms; }
.premium-money-tile:nth-child(3) { animation-delay: 120ms; }
.premium-money-tile:nth-child(4) { animation-delay: 180ms; }

.premium-money-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: rgba(114, 182, 255, 0.1);
  color: var(--dashboard-blue);
}

.premium-money-icon svg,
.dashboard-action svg,
.dashboard-activity-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bills-tile .premium-money-icon { color: var(--dashboard-gold); background: rgba(243, 198, 107, 0.1); }
.available-tile .premium-money-icon { color: var(--dashboard-mint); background: rgba(100, 227, 177, 0.1); }
.savings-tile .premium-money-icon { color: #b6a7ff; background: rgba(182, 167, 255, 0.1); }
.premium-money-tile > div { min-width: 0; }
.premium-money-tile span:not(.premium-money-icon) { display: block; color: #a9bdd2; font-size: 11px; font-weight: 800; }
.premium-money-tile strong { display: block; min-height: 1.2em; margin-top: 5px; color: var(--dashboard-ink); font-size: clamp(22px, 5vw, 29px); font-variant-numeric: tabular-nums; letter-spacing: -0.045em; overflow-wrap: anywhere; }
.premium-money-tile small { display: block; margin-top: 7px; color: #70869f; font-size: 11px; line-height: 1.4; }

.dashboard-money-pulse {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 17px;
  align-items: center;
  min-height: 138px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(100, 227, 177, 0.18);
  border-radius: 25px;
  background: linear-gradient(138deg, rgba(18, 48, 54, 0.9), rgba(10, 26, 43, 0.94));
  box-shadow: 0 20px 48px rgba(2, 8, 23, 0.24);
  animation: dashboard-card-in 620ms 180ms cubic-bezier(.2,.75,.25,1) both;
}

.dashboard-money-pulse::after { content: ""; position: absolute; width: 190px; height: 190px; right: -80px; top: -108px; border-radius: 50%; background: rgba(100, 227, 177, 0.07); pointer-events: none; }
.dashboard-money-pulse.is-caution { border-color: rgba(243, 198, 107, 0.2); background: linear-gradient(138deg, rgba(55, 43, 23, 0.92), rgba(18, 27, 43, 0.95)); }
.dashboard-money-pulse.is-overspending { border-color: rgba(255, 139, 143, 0.23); background: linear-gradient(138deg, rgba(58, 27, 39, 0.92), rgba(23, 23, 42, 0.96)); }

.money-pulse-signal { display: flex; align-items: end; gap: 3px; width: 39px; height: 39px; padding: 9px; border-radius: 14px; color: var(--dashboard-mint); background: rgba(100, 227, 177, 0.1); }
.money-pulse-signal i { width: 4px; border-radius: 8px; background: currentColor; animation: dashboard-signal 1.8s ease-in-out infinite; }
.money-pulse-signal i:nth-child(1) { height: 9px; }
.money-pulse-signal i:nth-child(2) { height: 19px; animation-delay: 140ms; }
.money-pulse-signal i:nth-child(3) { height: 13px; animation-delay: 280ms; }
.is-caution .money-pulse-signal { color: var(--dashboard-gold); background: rgba(243, 198, 107, 0.1); }
.is-overspending .money-pulse-signal { color: var(--dashboard-coral); background: rgba(255, 139, 143, 0.1); }
.money-pulse-copy h2 { margin: 3px 0 5px; font-size: 25px; letter-spacing: -0.04em; }
.money-pulse-copy p { margin: 0; color: #9bb0c5; font-size: 12px; line-height: 1.5; }
.money-pulse-projection { position: relative; z-index: 1; min-width: 142px; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 17px; background: rgba(3, 12, 27, 0.22); text-align: right; }
.money-pulse-projection span { display: block; color: #7890a8; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.money-pulse-projection strong { display: block; margin-top: 4px; color: #dfffee; font-size: 23px; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }

.dashboard-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dashboard-action {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 13px;
  min-height: 92px;
  padding: 15px;
  border: 1px solid var(--dashboard-line) !important;
  border-radius: 20px !important;
  color: var(--dashboard-ink) !important;
  background: linear-gradient(145deg, rgba(17, 32, 59, 0.92), rgba(9, 20, 39, 0.94)) !important;
  box-shadow: 0 13px 32px rgba(2, 8, 23, 0.2) !important;
  text-align: left;
  transform: translateZ(0);
}
.dashboard-action > span { grid-row: 1 / 3; display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; color: var(--dashboard-blue); background: rgba(114, 182, 255, 0.1); }
.dashboard-action strong { align-self: end; font-size: 13px; }
.dashboard-action small { align-self: start; margin-top: 3px; color: #71869d; font-size: 11px; }
.dashboard-action.action-bill > span { color: var(--dashboard-gold); background: rgba(243, 198, 107, 0.1); }
.dashboard-action.action-income > span { color: var(--dashboard-mint); background: rgba(100, 227, 177, 0.1); }
.dashboard-action.action-savings > span { color: #b6a7ff; background: rgba(182, 167, 255, 0.1); }
.dashboard-action.action-forecast > span { color: #d5a8ff; background: rgba(196,141,255,.11); }
.dashboard-action:hover { border-color: rgba(134, 198, 255, 0.26) !important; transform: translateY(-2px); }
.dashboard-action:active { transform: translateY(0) scale(0.985); }
.dashboard-action:focus-visible { outline: 2px solid #8fd0ff; outline-offset: 3px; }

.dashboard-today-progress,
.dashboard-recent-activity {
  padding: 22px;
  border: 1px solid var(--dashboard-line);
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(16, 30, 56, 0.94), rgba(9, 20, 39, 0.94));
  box-shadow: 0 18px 42px rgba(2, 8, 23, 0.22);
}

.today-progress-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 3px; }
.today-progress-values > div { min-width: 0; padding: 13px 14px; border: 1px solid rgba(255, 255, 255, 0.055); border-radius: 17px; background: rgba(4, 14, 30, 0.28); }
.today-progress-values span { display: block; color: #7890a8; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.today-progress-values strong { display: block; min-height: 1.2em; margin-top: 5px; color: var(--dashboard-ink); font-size: clamp(18px, 4vw, 24px); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.today-progress-values > div:last-child strong { color: #bff8df; }
.today-progress-track { height: 9px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: rgba(4, 13, 28, 0.58); }
.today-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #63ddb0, #79c8ff); transform-origin: left; transition: width 220ms ease; animation: dashboard-progress-in 900ms 260ms cubic-bezier(.2,.75,.25,1) both; }
.today-progress-track i.is-unsafe { background: linear-gradient(90deg, #ffb45f, #ff777f); }
.dashboard-today-progress > p { margin: 10px 2px 0; color: #687f97; font-size: 11px; line-height: 1.45; }

.text-button { flex: 0 0 auto; width: auto; padding: 7px 10px; border: 0 !important; border-radius: 10px !important; color: #8fc8ff !important; background: rgba(114, 182, 255, 0.08) !important; box-shadow: none !important; font-size: 11px; font-weight: 850; }
.dashboard-activity-timeline { position: relative; display: grid; gap: 2px; }
.dashboard-activity-timeline::before { content: ""; position: absolute; left: 19px; top: 32px; bottom: 32px; width: 1px; background: linear-gradient(rgba(114, 182, 255, 0.2), rgba(100, 227, 177, 0.05)); }
.dashboard-activity-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 68px; padding: 9px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.dashboard-activity-row:last-child { border-bottom: 0; }
.dashboard-activity-icon { z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border: 4px solid #0d1b34; border-radius: 14px; color: var(--dashboard-blue); background: #152c4c; }
.activity-bill .dashboard-activity-icon { color: var(--dashboard-gold); background: #352d20; }
.activity-income .dashboard-activity-icon { color: var(--dashboard-mint); background: #173a35; }
.activity-savings .dashboard-activity-icon,
.activity-sinking .dashboard-activity-icon { color: #b6a7ff; background: #292743; }
.dashboard-activity-copy { min-width: 0; }
.dashboard-activity-copy strong { display: block; overflow: hidden; color: #e9f3fd; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-activity-copy small { display: block; margin-top: 4px; overflow: hidden; color: #6e849b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-activity-amount { color: #cbd9e7; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard-activity-empty { min-height: 112px; display: grid; place-items: center; padding: 20px; border: 1px dashed rgba(145, 180, 214, 0.14); border-radius: 18px; color: #73879d; font-size: 11px; line-height: 1.5; text-align: center; }

.dashboard-calculation-details { opacity: 0.78; }
.dashboard-calculation-details > summary { font-size: 12px; }

@keyframes dashboard-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dashboard-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.82); }
}

@keyframes dashboard-signal {
  0%, 100% { transform: scaleY(0.74); opacity: 0.72; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes dashboard-progress-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (max-width: 560px) {
  #homePanel-daily { gap: 15px; }
  .daily-focus-card.hero-money-card { min-height: 318px; padding: 27px 21px 23px; border-radius: 28px; }
  .hero-status-chip { padding-inline: 8px; }
  .hero-money-runway { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
  .hero-payday-timing { text-align: left; }
  .premium-money-grid { grid-template-columns: 1fr; }
  .premium-money-tile { min-height: 104px; }
  .dashboard-money-pulse { grid-template-columns: auto minmax(0, 1fr); padding: 19px; }
  .money-pulse-projection { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; text-align: left; }
  .money-pulse-projection strong { margin-top: 0; }
  .today-progress-values { grid-template-columns: 1fr 1fr; }
  .today-progress-values > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 390px) {
  .dashboard-quick-grid { grid-template-columns: 1fr; }
  .dashboard-section-heading { align-items: flex-start; }
  .dashboard-section-note { display: none; }
  .hero-status-chip { font-size: 0; }
  .hero-status-chip i { margin: 0; }
  .dashboard-activity-row { grid-template-columns: 40px minmax(0, 1fr); }
  .dashboard-activity-amount { grid-column: 2; margin-top: -12px; color: #9bb0c5; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .daily-focus-card.hero-money-card,
  .premium-money-tile,
  .dashboard-money-pulse,
  .hero-status-chip i,
  .money-pulse-signal i,
  .today-progress-track i { animation: none !important; }
  .pay-cycle-progress-track i,
  .dashboard-action { transition: none !important; }
}

/* Spending Insights — read-only presentation from canonical snapshots and history. */
.spending-insights {
  --insights-ink: #f6fbff;
  --insights-muted: #91a6bd;
  --insights-panel: rgba(13, 25, 48, 0.88);
  --insights-panel-strong: rgba(17, 32, 60, 0.98);
  --insights-line: rgba(168, 204, 238, 0.13);
  --insights-mint: #67e4b4;
  --insights-blue: #76b9ff;
  --insights-gold: #f5c96d;
  --insights-violet: #b79cff;
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  color: var(--insights-ink);
  color-scheme: dark;
}

.insights-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 216px;
  overflow: hidden;
  padding: clamp(25px, 6vw, 36px);
  border: 1px solid rgba(122, 197, 255, 0.18);
  border-radius: 30px;
  background:
    radial-gradient(circle at 82% 10%, rgba(104, 202, 255, 0.32), transparent 28%),
    radial-gradient(circle at 10% 115%, rgba(83, 229, 178, 0.25), transparent 42%),
    linear-gradient(140deg, #163766 0%, #102749 47%, #0a172d 100%);
  box-shadow: 0 26px 64px rgba(2, 8, 23, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: insights-rise 560ms cubic-bezier(.2,.75,.25,1) both;
}

.insights-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}

.insights-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  top: -130px;
  right: -78px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(255, 255, 255, 0.025), 0 0 0 86px rgba(255, 255, 255, 0.018);
}

.insights-kicker,
.insights-eyebrow {
  color: #89bfe9;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.insights-hero h2 {
  max-width: 420px;
  margin: 8px 0 10px;
  color: #f8fcff;
  font-size: clamp(29px, 7vw, 44px);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.insights-hero p {
  max-width: 440px;
  color: #a9bfd6;
  font-size: 12px;
  line-height: 1.65;
}

.insights-cycle-chip {
  flex: 0 0 auto;
  min-width: 136px;
  padding: 12px 14px;
  border: 1px solid rgba(178, 219, 255, 0.17);
  border-radius: 16px;
  background: rgba(4, 14, 31, 0.36);
  backdrop-filter: blur(12px);
}

.insights-cycle-chip span,
.insights-cycle-chip strong { display: block; }
.insights-cycle-chip span { color: #7f9cb8; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.insights-cycle-chip strong { margin-top: 5px; color: #e5f2ff; font-size: 11px; }

.spending-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.spending-overview-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 17px 15px;
  border: 1px solid var(--insights-line);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(20, 37, 66, 0.98), rgba(12, 24, 46, 0.96));
  box-shadow: 0 14px 34px rgba(2, 8, 23, 0.22);
  animation: insights-rise 520ms calc(80ms + var(--insight-delay)) cubic-bezier(.2,.75,.25,1) both;
}

.spending-overview-card::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  top: -38px;
  right: -32px;
  border-radius: 50%;
  background: var(--card-accent);
  filter: blur(2px);
  opacity: 0.16;
}

.spending-overview-card.accent-mint { --card-accent: var(--insights-mint); }
.spending-overview-card.accent-blue { --card-accent: var(--insights-blue); }
.spending-overview-card.accent-gold { --card-accent: var(--insights-gold); }
.spending-overview-card.accent-violet { --card-accent: var(--insights-violet); }
.spending-overview-card span,
.spending-overview-card small { display: block; overflow: hidden; color: var(--insights-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.spending-overview-card span { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.spending-overview-card strong { display: block; margin: 9px 0 6px; overflow: hidden; color: var(--insights-ink); font-size: clamp(18px, 4.6vw, 25px); letter-spacing: -0.04em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

.insights-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 12px;
}

.insights-layout-primary { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }

.insights-surface {
  min-width: 0;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--insights-line);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(19, 35, 63, 0.94), rgba(11, 23, 44, 0.97));
  box-shadow: 0 18px 44px rgba(2, 8, 23, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.insights-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}

.insights-card-heading h3 { margin-top: 5px; color: var(--insights-ink); font-size: 18px; letter-spacing: -0.035em; }
.insights-mini-pill,
.coach-status {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(119, 184, 255, 0.16);
  border-radius: 999px;
  color: #99bddf;
  background: rgba(119, 184, 255, 0.07);
  font-size: 11px;
  font-weight: 800;
}

.category-breakdown-list,
.category-trends-list,
.coach-signal-list,
.insights-transaction-list { display: grid; gap: 6px; }

.category-breakdown-row,
.category-trend-row {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 16px;
  color: inherit;
  background: transparent;
  box-shadow: none;
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.category-breakdown-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  animation: insights-rise 420ms calc(120ms + var(--insight-delay)) ease both;
}

.category-breakdown-row:hover,
.category-trend-row:hover { transform: translateY(-1px); border-color: rgba(149, 197, 240, 0.13); background: rgba(255, 255, 255, 0.03); }
.category-breakdown-row:focus-visible,
.category-trend-row:focus-visible,
.insights-text-button:focus-visible { outline: 2px solid #7fc2ff; outline-offset: 2px; }

.category-icon,
.trend-icon,
.transaction-category-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--category-color) 28%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--category-color) 13%, transparent);
  font-size: 16px;
}

.category-breakdown-copy { min-width: 0; }
.category-breakdown-copy strong,
.category-breakdown-copy small { display: block; }
.category-breakdown-copy strong { color: #e7f1fb; font-size: 11px; }
.category-breakdown-copy small { margin-top: 3px; color: #758ca4; font-size: 11px; }
.category-breakdown-copy i { display: block; height: 5px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(2, 9, 21, 0.58); }
.category-breakdown-copy b { display: block; width: var(--category-share); height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--category-color) 72%, #fff), var(--category-color)); transform-origin: left; animation: insights-progress 760ms calc(180ms + var(--insight-delay)) cubic-bezier(.2,.75,.25,1) both; }
.category-breakdown-amount { color: #f0f7ff; font-size: 11px; font-weight: 850; font-variant-numeric: tabular-nums; white-space: nowrap; }

.spending-coach-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(102, 225, 178, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(19, 39, 61, 0.96), rgba(11, 25, 43, 0.98));
}

.coach-status.is-excellent { color: #8ce8c1; border-color: rgba(103, 228, 180, 0.22); background: rgba(103, 228, 180, 0.08); }
.coach-status.is-watch { color: #ffd684; border-color: rgba(245, 201, 109, 0.23); background: rgba(245, 201, 109, 0.08); }
.coach-status.is-alert { color: #ff9fa9; border-color: rgba(255, 124, 139, 0.23); background: rgba(255, 124, 139, 0.08); }
.spending-coach-insight { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; min-height: 134px; padding: 18px; border: 1px solid rgba(103, 228, 180, 0.17); border-radius: 20px; background: rgba(103, 228, 180, 0.055); }
.spending-coach-insight.is-watch { border-color: rgba(245, 201, 109, 0.17); background: rgba(245, 201, 109, 0.055); }
.spending-coach-insight.is-alert { border-color: rgba(255, 124, 139, 0.18); background: rgba(255, 124, 139, 0.055); }
.coach-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px; background: rgba(1, 8, 19, 0.35); font-size: 19px; }
.spending-coach-insight strong { display: block; margin-top: 3px; color: #f5faff; font-size: 20px; letter-spacing: -0.035em; }
.spending-coach-insight p { margin-top: 8px; color: #a2b6ca; font-size: 11px; line-height: 1.62; }
.coach-signal-list { margin-top: 10px; }
.coach-signal { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.coach-signal:last-child { border-bottom: 0; }
.coach-signal span { color: #7c92a9; font-size: 11px; }
.coach-signal strong { color: #dbe8f5; font-size: 11px; text-align: right; }
.coach-signal .signal-positive { color: #83dfba; }
.coach-signal .signal-warning { color: #f4cb78; }
.coach-signal .signal-negative { color: #ff98a3; }

.weekly-spending-chart {
  --average-position: 50%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 215px;
  padding: 28px 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.weekly-average-line { position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--average-position); border-top: 1px dashed rgba(245, 201, 109, 0.5); pointer-events: none; }
.weekly-average-line span { position: absolute; top: -18px; right: 0; color: #d5b86f; font-size: 11px; font-weight: 800; }
.weekly-day { position: relative; z-index: 1; display: grid; grid-template-rows: 20px minmax(0, 1fr) 18px; align-items: end; height: 100%; min-width: 0; text-align: center; }
.weekly-day > span { overflow: hidden; color: #70869c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.weekly-day > i { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.weekly-day > i > b { display: block; width: min(22px, 72%); height: var(--bar-height); min-height: 3px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #76b9ff, #4c79d7); box-shadow: 0 6px 18px rgba(73, 128, 218, 0.22); transform-origin: bottom; animation: insights-chart 700ms calc(130ms + var(--insight-delay)) cubic-bezier(.2,.75,.25,1) both; }
.weekly-day.is-highest > i > b { background: linear-gradient(180deg, #72e5b8, #3aa184); box-shadow: 0 6px 18px rgba(68, 200, 153, 0.22); }
.weekly-day small { align-self: center; color: #8fa4ba; font-size: 11px; font-weight: 800; }
.weekly-chart-legend { display: flex; gap: 16px; margin-top: 12px; color: #72889e; font-size: 11px; }
.weekly-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.weekly-chart-legend i { width: 8px; height: 8px; border-radius: 3px; background: #639ee8; }
.weekly-chart-legend span:last-child i { height: 1px; border-radius: 0; background: #d1b466; }

.category-trend-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.category-trend-row > span:nth-child(2) { min-width: 0; }
.category-trend-row strong,
.category-trend-row small { display: block; }
.category-trend-row strong { color: #e6f0fa; font-size: 11px; }
.category-trend-row small { margin-top: 4px; color: #74899f; font-size: 11px; }
.category-trend-row > b { font-size: 12px; font-variant-numeric: tabular-nums; }
.category-trend-row.trend-up > b { color: #ff9b9f; }
.category-trend-row.trend-down > b { color: #75dfb5; }
.category-trend-row.trend-flat > b { color: #90a5ba; }

.monthly-trends-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.cycle-trend-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(167, 203, 236, 0.09);
  border-radius: 17px;
  background: rgba(4, 13, 28, 0.27);
  animation: insights-rise 450ms calc(100ms + var(--insight-delay)) ease both;
}
.cycle-trend-card header span,
.cycle-trend-card header strong { display: block; }
.cycle-trend-card header span { color: #9dc6e9; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.cycle-trend-card header strong { margin-top: 4px; color: #6f8499; font-size: 11px; font-weight: 700; }
.cycle-trend-card dl { display: grid; gap: 8px; margin-top: 13px; }
.cycle-trend-card dl div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cycle-trend-card dt { color: #758a9f; font-size: 11px; }
.cycle-trend-card dd { color: #d9e7f4; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }

.explorer-heading { align-items: center; }
.insights-text-button { width: auto; padding: 7px 10px; border: 1px solid rgba(118, 185, 255, 0.14); border-radius: 10px; color: #8dc6fa; background: rgba(118, 185, 255, 0.06); box-shadow: none; font-size: 11px; font-weight: 800; }
.insights-filter-grid { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 9px; }
.insights-filter-grid label { min-width: 0; }
.insights-filter-grid label > span { display: block; margin: 0 0 5px 2px; color: #71869c; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.insights-filter-grid input,
.insights-filter-grid select { width: 100%; min-height: 40px; margin: 0; padding: 9px 10px; border: 1px solid rgba(167, 203, 236, 0.11); border-radius: 12px; color: #dceaf7; background: rgba(3, 12, 27, 0.45); box-shadow: none; font-size: 11px; }
.insights-filter-grid input:focus,
.insights-filter-grid select:focus { border-color: rgba(118, 185, 255, 0.5); outline: 0; box-shadow: 0 0 0 3px rgba(118, 185, 255, 0.08); }
.transaction-results-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 2px 8px; }
.transaction-results-heading strong { color: #9eb3c8; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.transaction-results-heading span { color: #e8f4ff; font-size: 12px; font-weight: 850; font-variant-numeric: tabular-nums; }
.insights-transaction-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 61px; padding: 9px 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.insights-transaction-row:last-child { border-bottom: 0; }
.transaction-category-icon { width: 38px; height: 38px; }
.transaction-copy { min-width: 0; }
.transaction-copy strong,
.transaction-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transaction-copy strong { color: #e8f2fb; font-size: 11px; }
.transaction-copy small { margin-top: 4px; color: #71869b; font-size: 11px; }
.insights-transaction-row > b { color: #e8f3fe; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.insights-empty-state { display: grid; place-items: center; min-height: 178px; padding: 24px; border: 1px dashed rgba(151, 190, 227, 0.13); border-radius: 18px; color: #72879d; text-align: center; }
.insights-empty-state.compact { min-height: 230px; }
.insights-empty-state.wide { grid-column: 1 / -1; min-height: 130px; }
.insights-empty-state > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 13px; color: #82bfff; background: rgba(118, 185, 255, 0.08); font-size: 18px; }
.insights-empty-state strong { margin-top: 10px; color: #b7c9da; font-size: 11px; }
.insights-empty-state p { max-width: 280px; margin-top: 6px; font-size: 11px; line-height: 1.55; }
.spending-insights.is-loading { opacity: 0.55; }

@keyframes insights-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes insights-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes insights-chart {
  from { opacity: 0; transform: scaleY(0); }
  to { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 680px) {
  .spending-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights-layout,
  .insights-layout-primary { grid-template-columns: 1fr; }
  .monthly-trends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .spending-insights { gap: 13px; }
  .insights-hero { display: block; min-height: 245px; padding: 27px 22px; border-radius: 27px; }
  .insights-cycle-chip { width: max-content; max-width: 100%; margin-top: 20px; }
  .spending-overview-grid { gap: 8px; }
  .spending-overview-card { padding: 15px 13px; }
  .insights-surface { padding: 18px 15px; border-radius: 22px; }
  .monthly-trends-grid { grid-template-columns: 1fr; }
  .insights-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights-filter-grid label:first-child { grid-column: 1 / -1; }
  .weekly-spending-chart { gap: 3px; }
  .weekly-day > i > b { width: min(18px, 70%); }
  .category-breakdown-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding-inline: 3px; }
  .category-breakdown-amount { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .insights-hero,
  .spending-overview-card,
  .category-breakdown-row,
  .category-breakdown-copy b,
  .weekly-day > i > b,
  .cycle-trend-card { animation: none !important; }
  .category-breakdown-row,
  .category-trend-row { transition: none !important; }
}

/* Savings goals experience: presentation only; canonical savings remains authoritative. */
.goals-dashboard { display: grid; gap: 18px; padding: 2px 0 18px; }
.goals-dashboard-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 8px 4px 0; }
.goals-dashboard-head h2 { margin: 5px 0 7px; max-width: 680px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 6vw, 64px); line-height: .98; letter-spacing: -.045em; }
.goals-dashboard-head p { max-width: 660px; margin: 0; color: var(--muted); line-height: 1.55; }
.goals-kicker { color: #9bd8c5; font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.goals-create-btn { flex: 0 0 auto; min-width: 126px; border-color: rgba(155,216,197,.34); background: rgba(155,216,197,.1); color: #d8fff2; }
.goals-overview-card { position: relative; overflow: hidden; display: flex; align-items: end; justify-content: space-between; gap: 24px; min-height: 220px; padding: clamp(24px, 5vw, 44px); border: 1px solid rgba(155,216,197,.2); border-radius: 32px; background: radial-gradient(circle at 85% 8%, rgba(81,155,194,.19), transparent 36%), radial-gradient(circle at 8% 100%, rgba(89,180,142,.16), transparent 42%), linear-gradient(145deg, rgba(18,31,51,.98), rgba(8,14,27,.99)); box-shadow: 0 22px 60px rgba(0,0,0,.2); }
.goals-overview-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.045), transparent 64%); transform: translateX(-100%); animation: goalsSheen 8s ease-in-out infinite; }
.goals-overview-copy { position: relative; z-index: 1; display: grid; gap: 6px; }
.goals-overview-copy > span { color: #aab8ca; font-size: .78rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.goals-overview-copy > strong { font-size: clamp(48px, 9vw, 82px); line-height: .95; letter-spacing: -.055em; background: linear-gradient(120deg, #f6fbff, #a7e7d2 65%, #83b8d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.goals-overview-copy small { color: #aab8ca; }
.goals-overview-actions { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: min(100%, 350px); }
.goals-suggestion { display: flex; align-items: center; gap: 14px; padding: 17px 19px; border: 1px solid rgba(201,167,103,.25); border-radius: 20px; background: linear-gradient(135deg, rgba(201,167,103,.105), rgba(255,255,255,.025)); }
.goals-suggestion > svg { width: 25px; height: 25px; flex: 0 0 auto; fill: none; stroke: #d5b97d; stroke-width: 1.7; }
.goals-suggestion div { display: grid; gap: 2px; }
.goals-suggestion span { color: #d5b97d; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.goals-suggestion strong { font-size: .95rem; line-height: 1.35; }
.goals-suggestion small { color: var(--muted); }
.savings-goals-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; }
.savings-goal-card { --goal-accent: #93d7c1; position: relative; grid-column: span 6; overflow: hidden; padding: clamp(20px, 4vw, 29px); border: 1px solid rgba(255,255,255,.09); border-radius: 28px; background: radial-gradient(circle at 100% 0, rgba(147,215,193,.11), transparent 34%), linear-gradient(155deg, rgba(18,28,46,.98), rgba(10,15,27,.99)); box-shadow: 0 18px 45px rgba(0,0,0,.16); opacity: 0; transform: translateY(12px); animation: goalCardIn .55s cubic-bezier(.22,.8,.28,1) forwards; animation-delay: var(--goal-delay); }
.savings-goal-card:nth-child(3n) { --goal-accent: #c9a767; grid-column: span 7; }
.savings-goal-card:nth-child(3n + 1):not(:first-child) { --goal-accent: #89b9d2; grid-column: span 5; }
.goal-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.goal-visual { display: grid; place-items: center; width: 62px; height: 62px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--goal-accent) 34%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--goal-accent) 12%, rgba(255,255,255,.02)); color: var(--goal-accent); }
.goal-visual svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.goal-emoji { font-size: 30px; }
.goal-photo { background-position: center; background-size: cover; }
.goal-photo.is-loaded span { display: none; }
.goal-card-actions { display: flex; gap: 5px; }
.goal-card-actions button { min-width: auto; padding: 7px 9px; border: 0; background: rgba(255,255,255,.045); color: var(--muted); font-size: .7rem; }
.goal-card-actions button:hover { color: var(--text); background: rgba(255,255,255,.09); }
.goal-card-actions button:disabled { opacity: .3; }
.goal-card-actions svg { display: none; }
.goal-title-row { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-top: 22px; }
.goal-title-row span { color: var(--goal-accent); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.goal-title-row h3 { margin: 4px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 4vw, 37px); line-height: 1; letter-spacing: -.035em; }
.goal-title-row > strong { color: var(--goal-accent); font-size: 1.4rem; }
.goal-balance-line { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.goal-balance-line strong { font-size: clamp(27px, 5vw, 42px); line-height: 1; letter-spacing: -.04em; }
.goal-balance-line span { color: var(--muted); font-size: .82rem; }
.goal-progress-track { height: 9px; overflow: hidden; margin-top: 15px; border-radius: 99px; background: rgba(255,255,255,.07); }
.goal-progress-track span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--goal-accent) 65%, #fff), var(--goal-accent)); transform: scaleX(calc(var(--goal-progress) / 100%)); transform-origin: left; animation: goalProgressIn .9s cubic-bezier(.22,.8,.28,1) both; }
.goal-milestones { display: flex; justify-content: space-between; margin-top: 8px; }
.goal-milestones span { color: #687486; font-size: 11px; font-weight: 800; }
.goal-milestones span.is-reached { color: var(--goal-accent); }
.goal-forecast-panel { margin-top: 22px; padding: 17px; border: 1px solid rgba(255,255,255,.065); border-radius: 19px; background: rgba(3,8,17,.28); }
.goal-forecast-panel > p { margin: 0 0 12px; color: var(--muted); font-size: .75rem; font-style: italic; }
.goal-card-metadata { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.goal-card-metadata > div { min-width: 0; padding: 10px; border: 1px solid rgba(255,255,255,.055); border-radius: 13px; background: rgba(255,255,255,.025); }
.goal-card-metadata span, .goal-card-metadata strong { display: block; }
.goal-card-metadata span { color: var(--muted); font-size: 10px; font-weight: 800; }
.goal-card-metadata strong { margin-top: 4px; overflow-wrap: anywhere; font-size: 12px; }
.goal-status.is-ahead { color: var(--success); }
.goal-status.is-on-track { color: var(--color-warning); }
.goal-status.is-behind { color: var(--danger); }
.goal-forecast-date { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.06); }
.goal-forecast-date span, .goal-forecast-grid span { color: var(--muted); font-size: 11px; }
.goal-forecast-date strong { color: var(--goal-accent); }
.goal-forecast-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-top: 13px; }
.goal-forecast-grid div { display: grid; gap: 3px; }
.goal-forecast-grid strong { font-size: .88rem; }
.goal-overdue { margin-top: 10px; padding: 9px 11px; border: 1px solid rgba(255,115,125,.25); border-radius: 12px; color: #ffadb4; background: rgba(255,115,125,.08); font-size: 11px; font-weight: 800; }
.goal-archive-link { min-width: auto; margin: 17px 0 -5px; padding: 5px 0; border: 0; background: transparent; color: #7d8999; font-size: .7rem; text-decoration: underline; text-underline-offset: 3px; }
.goals-empty-state { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; min-height: 280px; padding: clamp(25px,6vw,48px); border: 1px dashed rgba(155,216,197,.24); border-radius: 28px; background: rgba(255,255,255,.02); }
.goal-empty-orbit { display: grid; place-items: center; width: 108px; height: 108px; border: 1px solid rgba(155,216,197,.2); border-radius: 50%; background: radial-gradient(circle, rgba(155,216,197,.15), transparent 67%); }
.goal-empty-orbit svg { width: 36px; fill: none; stroke: #9bd8c5; stroke-width: 1.5; }
.goals-empty-state h3 { margin: 6px 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(27px,5vw,42px); letter-spacing: -.035em; }
.goals-empty-state p { max-width: 560px; margin: 0 0 18px; color: var(--muted); }
.goals-empty-state button { min-width: auto; background: #9bd8c5; color: #07130f; }
.goals-history-card, .goals-archive-card { padding: clamp(20px,4vw,28px); border: 1px solid rgba(255,255,255,.08); border-radius: 26px; background: linear-gradient(150deg, rgba(17,26,42,.96), rgba(9,14,25,.98)); }
.goals-history-card h3 { margin: 4px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 30px; }
.goals-history-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 19px; }
.goals-history-stats div { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.035); }
.goals-history-stats span { color: var(--muted); font-size: .7rem; }
.goals-history-stats strong { font-size: 1.15rem; }
.goals-timeline-list { position: relative; display: grid; gap: 1px; margin-top: 17px; }
.goals-timeline-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; min-height: 58px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.goals-timeline-item i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; background: rgba(147,215,193,.1); color: #93d7c1; font-style: normal; font-weight: 900; }
.goals-timeline-item.is-out i { background: rgba(232,160,119,.1); color: #e8a077; }
.goals-timeline-item.is-milestone i { background: rgba(201,167,103,.12); color: #d5b97d; }
.goals-timeline-item div { display: grid; gap: 3px; }
.goals-timeline-item span, .goals-timeline-item time { color: var(--muted); font-size: .7rem; }
.goals-history-empty { padding: 24px 0 5px; color: var(--muted); text-align: center; }
.goals-archive-card > summary { cursor: pointer; font-weight: 800; }
.goals-archive-card > summary span { margin-left: 5px; color: var(--muted); }
.archived-goals-list { display: grid; gap: 8px; margin-top: 15px; }
.archived-goals-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border-radius: 15px; background: rgba(255,255,255,.035); }
.archived-goals-list > div > span { display: flex; align-items: center; gap: 10px; }
.archived-goals-list .goal-visual { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
.archived-goals-list .goal-visual svg { width: 18px; }
.archived-goals-list button { min-width: auto; padding: 8px 11px; }
.archived-goals-list p { margin: 0; color: var(--muted); }
.savings-goal-modal { max-width: 580px; }
.savings-goal-modal h3 { margin: 5px 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: 36px; }
.savings-goal-modal form { display: grid; gap: 14px; }
.goal-field { display: grid; gap: 7px; color: var(--muted); font-size: .76rem; font-weight: 800; }
.goal-field-hint { margin-left: 5px; color: var(--muted); font-size: 10px; font-weight: 600; }
.goal-allocation-editor { display: grid; gap: 10px; padding: 15px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.02); }
.goal-allocation-editor > .between > span, .goal-allocation-editor > .between > strong { font-size: .76rem; font-weight: 900; }
.goal-allocation-editor > .between > strong { color: var(--success); }
.goal-allocation-editor small { color: var(--muted); line-height: 1.45; }
.goal-allocation-peers { display: grid; gap: 7px; }
.goal-allocation-peer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; font-weight: 800; }
.goal-allocation-peer > span:last-child { display: flex; align-items: center; gap: 5px; }
.goal-allocation-peer input { width: 90px; }
.goal-allocation-error { min-height: 16px; color: var(--danger); font-size: 11px; font-weight: 800; }
.goal-visual-picker { display: grid; gap: 10px; padding: 15px; border: 1px solid var(--border); border-radius: 18px; }
.goal-visual-picker > span { color: var(--muted); font-size: .76rem; font-weight: 800; }
.goal-visual-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.goal-visual-tabs button { min-width: 0; padding: 9px; background: rgba(255,255,255,.035); color: var(--muted); }
.goal-visual-tabs button.is-active { border-color: rgba(155,216,197,.4); background: rgba(155,216,197,.12); color: #d8fff2; }
.goal-emoji-options { display: grid; grid-template-columns: repeat(8,1fr); gap: 6px; }
.goal-emoji-options button { min-width: 0; padding: 7px 2px; border-color: transparent; background: rgba(255,255,255,.035); font-size: 21px; }
.goal-emoji-options button.is-active { border-color: rgba(155,216,197,.4); background: rgba(155,216,197,.12); }
.goal-visual-panel small { display: block; margin-top: 6px; color: var(--muted); }
.goal-celebration { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: rgba(4,9,18,.45); backdrop-filter: blur(5px); }
.goal-celebration.is-visible { opacity: 1; }
.goal-celebration-card { position: relative; z-index: 2; display: grid; gap: 8px; width: min(88vw,460px); padding: 34px; border: 1px solid rgba(201,167,103,.34); border-radius: 28px; background: radial-gradient(circle at 50% 0, rgba(201,167,103,.16), transparent 43%), #111b2b; box-shadow: 0 30px 90px rgba(0,0,0,.45); text-align: center; transform: scale(.86) translateY(10px); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.goal-celebration.is-visible .goal-celebration-card { transform: scale(1) translateY(0); }
.goal-celebration-card span { color: #d5b97d; font-size: .72rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.goal-celebration-card strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(27px,6vw,42px); line-height: 1.05; }
.goal-celebration-card p { margin: 0; color: var(--muted); }
.goal-celebration > i { --angle: calc(var(--i) * 20deg); position: absolute; width: 8px; height: 17px; border-radius: 2px; background: hsl(calc(38 + var(--i) * 7) 50% 64%); transform: rotate(var(--angle)) translateY(-40px); opacity: 0; }
.goal-celebration.is-visible > i { animation: goalConfetti 1.2s calc(var(--i) * 18ms) ease-out both; }
@keyframes goalCardIn { to { opacity: 1; transform: translateY(0); } }
@keyframes goalProgressIn { from { transform: scaleX(0); } }
@keyframes goalsSheen { 0%,72%,100% { transform: translateX(-100%); } 82% { transform: translateX(100%); } }
@keyframes goalConfetti { 0% { opacity: 1; transform: rotate(var(--angle)) translateY(-50px); } 100% { opacity: 0; transform: rotate(var(--angle)) translateY(-270px) translateX(120px); } }
@media (max-width: 760px) {
  .goals-dashboard-head { align-items: flex-start; }
  .goals-overview-card { align-items: stretch; flex-direction: column; min-height: 0; }
  .goals-overview-actions { min-width: 0; }
  .savings-goal-card, .savings-goal-card:nth-child(3n), .savings-goal-card:nth-child(3n + 1):not(:first-child) { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .goals-dashboard-head { display: grid; }
  .goals-dashboard-head h2 { font-size: 43px; }
  .goals-create-btn { width: 100%; }
  .goals-overview-card { padding: 24px 20px; border-radius: 25px; }
  .goals-overview-copy > strong { font-size: 50px; }
  .goals-overview-actions, .goals-history-stats { grid-template-columns: 1fr; }
  .savings-goal-card { padding: 20px; border-radius: 24px; }
  .goal-card-actions button span { display: none; }
  .goal-card-actions button[data-goal-move] { width: 30px; padding: 7px; }
  .goal-card-actions button[data-goal-move] svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; }
  .goal-title-row h3 { font-size: 29px; }
  .goal-forecast-date { align-items: flex-start; flex-direction: column; gap: 4px; }
  .goal-card-metadata { grid-template-columns: 1fr; }
  .goals-empty-state { grid-template-columns: 1fr; text-align: center; }
  .goal-empty-orbit { margin: auto; }
  .goal-emoji-options { grid-template-columns: repeat(4,1fr); }
  .goals-timeline-item { grid-template-columns: 32px 1fr; }
  .goals-timeline-item time { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .savings-goal-card, .goal-progress-track span, .goals-overview-card::after, .goal-celebration > i { animation: none !important; opacity: 1; transform: none; }
  .goal-celebration, .goal-celebration-card { transition: none; }
}

/* Shared household experience — presentation and recorded activity only. */
.household-experience {
  --household-ink: #f4f1e8;
  --household-muted: #9aa6b5;
  --household-mint: #9bd8c5;
  --household-gold: #d7b878;
  --household-coral: #df9277;
  display: grid;
  gap: 18px;
  padding-bottom: 20px;
}
.household-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, .6fr);
  gap: 26px;
  min-height: 250px;
  padding: clamp(24px, 5vw, 46px);
  overflow: hidden;
  border: 1px solid rgba(155,216,197,.2);
  border-radius: 34px;
  background:
    radial-gradient(circle at 82% 12%, rgba(215,184,120,.16), transparent 26%),
    radial-gradient(circle at 9% 90%, rgba(155,216,197,.13), transparent 31%),
    linear-gradient(138deg, #10231f 0%, #101b25 54%, #171b24 100%);
  box-shadow: 0 28px 70px rgba(2,8,14,.32);
}
.household-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: repeating-linear-gradient(115deg, transparent 0 28px, rgba(255,255,255,.025) 29px 30px);
}
.household-hero-copy { position: relative; z-index: 1; align-self: center; }
.household-kicker, .household-section-heading span:first-child {
  color: var(--household-gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.household-hero h2 {
  max-width: 720px;
  margin: 10px 0 12px;
  color: var(--household-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 7vw, 4.9rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
}
.household-hero p { max-width: 650px; margin: 0; color: #bec7cf; line-height: 1.65; }
.household-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; color: var(--household-muted); font-size: .76rem; font-weight: 800; }
.household-live-chip { display: inline-flex; align-items: center; gap: 7px; color: #d9fff2; }
.household-live-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--household-mint); box-shadow: 0 0 0 5px rgba(155,216,197,.09); animation: householdPulse 2.2s ease-out infinite; }
.household-hero-orbit { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; min-height: 150px; }
.household-hero-orbit::before, .household-hero-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.household-hero-orbit::before { width: 190px; height: 190px; }
.household-hero-orbit::after { width: 142px; height: 142px; border-color: rgba(155,216,197,.18); }
.household-hero-orbit > span { margin-top: 12px; color: var(--household-muted); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.household-avatar-stack { display: flex; justify-content: center; padding-left: 18px; }
.household-avatar {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-left: -18px;
  border: 3px solid #14221f;
  border-radius: 22px;
  background: linear-gradient(145deg, #9bd8c5, #4d8878);
  color: #0c211b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow: 0 14px 36px rgba(0,0,0,.26);
}
.household-avatar:nth-child(2) { background: linear-gradient(145deg, #e0c790, #936e3a); color: #281c0d; transform: translateY(14px) rotate(4deg); }
.household-balance-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; }
.household-balance-card {
  position: relative;
  min-width: 0;
  min-height: 142px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 23px;
  background: linear-gradient(155deg, rgba(22,33,47,.96), rgba(13,22,34,.96));
  box-shadow: 0 14px 35px rgba(3,9,17,.18);
  animation: householdCardIn .55s both;
}
.household-balance-card:nth-child(2) { animation-delay: 45ms; }
.household-balance-card:nth-child(3) { animation-delay: 90ms; }
.household-balance-card:nth-child(4) { animation-delay: 135ms; }
.household-balance-card:nth-child(5) { animation-delay: 180ms; }
.household-balance-card:nth-child(6) { animation-delay: 225ms; }
.household-balance-card > span, .household-balance-card small { display: block; color: var(--household-muted); font-size: .7rem; font-weight: 800; line-height: 1.35; }
.household-balance-card strong { display: block; margin: 14px 0 7px; color: var(--household-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 500; line-height: 1; overflow-wrap: anywhere; }
.household-balance-primary { grid-column: span 2; border-color: rgba(155,216,197,.24); background: linear-gradient(145deg, #15352d, #14212a); }
.household-balance-primary strong { color: #d9fff2; font-size: clamp(2rem, 6vw, 3.5rem); }
.household-balance-glow { position: absolute; right: -50px; bottom: -70px; width: 170px; height: 170px; border-radius: 50%; background: rgba(155,216,197,.1); filter: blur(2px); }
.household-section {
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(19,29,43,.96), rgba(12,20,31,.96));
  box-shadow: 0 18px 44px rgba(2,8,14,.18);
}
.household-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.household-section-heading h3 { margin: 4px 0 0; color: var(--household-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.65rem, 4vw, 2.35rem); font-weight: 500; letter-spacing: -.025em; }
.household-section-heading > small, .household-section-heading > strong, .household-section-heading > span:last-child { color: var(--household-muted); font-size: .74rem; }
.household-count-chip { display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 10px; border: 1px solid rgba(155,216,197,.2); border-radius: 999px; background: rgba(155,216,197,.08); color: #c8f4e6 !important; font-weight: 900; }
.household-member-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.household-member-card { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; padding: 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: rgba(255,255,255,.025); color: inherit; text-align: left; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.household-member-card:hover { transform: translateY(-2px); border-color: rgba(155,216,197,.25); background: rgba(155,216,197,.045); }
.household-member-card .household-avatar { width: 54px; height: 54px; margin: 0; border: 0; border-radius: 18px; font-size: 1rem; }
.household-member-name { display: grid; align-content: center; gap: 4px; }
.household-member-name strong { color: var(--household-ink); font-size: 1.05rem; }
.household-member-name span { color: var(--household-muted); font-size: .7rem; font-weight: 800; }
.household-member-metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.household-member-metrics div { padding: 10px; border-radius: 14px; background: rgba(255,255,255,.025); }
.household-member-metrics span, .household-member-metrics strong { display: block; }
.household-member-metrics span { color: var(--household-muted); font-size: 11px; font-weight: 800; }
.household-member-metrics strong { margin-top: 5px; color: var(--household-ink); font-size: .84rem; }
.household-content-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 18px; }
.household-side-stack { display: grid; align-content: start; gap: 18px; }
.household-timeline { position: relative; display: grid; gap: 4px; }
.household-timeline::before { content: ""; position: absolute; left: 20px; top: 24px; bottom: 24px; width: 1px; background: linear-gradient(var(--household-mint), rgba(155,216,197,.04)); }
.household-timeline-item { position: relative; display: grid; grid-template-columns: 42px 1fr auto; gap: 13px; align-items: start; padding: 12px 0; }
.household-timeline-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(155,216,197,.2); border-radius: 15px; background: #152a25; color: var(--household-mint); }
.household-timeline-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.household-timeline-item.is-spend .household-timeline-icon { border-color: rgba(223,146,119,.2); background: #2c211f; color: var(--household-coral); }
.household-timeline-item.is-bill .household-timeline-icon { border-color: rgba(215,184,120,.2); background: #2b271d; color: var(--household-gold); }
.household-timeline-copy { min-width: 0; padding-top: 2px; }
.household-timeline-copy strong { display: block; color: var(--household-ink); line-height: 1.35; }
.household-timeline-copy p { margin: 4px 0 0; color: var(--household-muted); font-size: .74rem; line-height: 1.5; }
.household-timeline-item time { padding-top: 5px; color: var(--household-muted); font-size: 11px; white-space: nowrap; }
.household-activity-amount { color: var(--household-ink) !important; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem !important; }
.household-note-form { display: grid; gap: 8px; margin-top: 17px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.07); }
.household-note-form label { color: var(--household-ink); font-size: .76rem; font-weight: 900; }
.household-note-form > div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.household-note-form input { min-width: 0; }
.household-note-form small { color: var(--household-muted); font-size: 11px; }
.household-goals-list, .household-insights-list, .household-category-bars, .household-permission-list, .household-approval-queue { display: grid; gap: 10px; }
.household-goal-card { padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: rgba(255,255,255,.025); }
.household-goal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.household-goal-top strong { color: var(--household-ink); }
.household-goal-top span { color: var(--household-muted); font-size: .7rem; }
.household-progress { height: 7px; margin: 12px 0 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.household-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6ba895, var(--household-mint)); transform-origin: left; animation: householdProgress .75s ease both; }
.household-goal-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--household-muted); font-size: 11px; }
.household-contributors { display: flex; gap: 6px; margin-top: 10px; }
.household-contributors span { padding: 5px 7px; border-radius: 9px; background: rgba(255,255,255,.035); color: var(--household-muted); font-size: 11px; }
.household-insight { display: grid; grid-template-columns: 6px 1fr; gap: 11px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.025); }
.household-insight i { border-radius: 999px; background: var(--household-mint); }
.household-insight:nth-child(2) i { background: var(--household-gold); }
.household-insight:nth-child(3) i { background: var(--household-coral); }
.household-insight strong { display: block; color: var(--household-ink); font-size: .82rem; line-height: 1.45; }
.household-insight span { display: block; margin-top: 3px; color: var(--household-muted); font-size: 11px; }
.household-spending-comparison { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px; }
.household-spend-stat { padding: 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: rgba(255,255,255,.025); }
.household-spend-stat span, .household-spend-stat strong, .household-spend-stat small { display: block; }
.household-spend-stat span { color: var(--household-muted); font-size: 11px; font-weight: 800; }
.household-spend-stat strong { margin: 8px 0 5px; color: var(--household-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 500; }
.household-spend-stat small { color: var(--household-muted); font-size: 11px; }
.household-category-row { display: grid; grid-template-columns: minmax(90px,.55fr) minmax(120px,1fr) auto; gap: 12px; align-items: center; }
.household-category-row > span { color: var(--household-muted); font-size: .72rem; font-weight: 800; }
.household-category-track { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.05); }
.household-category-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5f8f82, #c6ae73); }
.household-category-row strong { color: var(--household-ink); font-size: .76rem; }
.household-score-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 9px; }
.household-score-card { padding: 15px; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: rgba(255,255,255,.025); }
.household-score-card span, .household-score-card strong, .household-score-card small { display: block; }
.household-score-card span { color: var(--household-muted); font-size: 11px; font-weight: 800; }
.household-score-card strong { margin: 10px 0 4px; color: var(--household-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.55rem; font-weight: 500; }
.household-score-card small { color: var(--household-muted); font-size: 11px; }
.household-controls-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }
.household-controls h4 { margin: 0 0 12px; color: var(--household-ink); }
.household-permission-row, .household-approval-toggle, .household-threshold-field { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.065); border-radius: 15px; background: rgba(255,255,255,.02); color: var(--household-muted); font-size: .75rem; font-weight: 800; }
.household-permission-row input, .household-approval-toggle input { width: 19px; height: 19px; accent-color: #78bba6; }
.household-threshold-field { margin: 9px 0; }
.household-threshold-field input { width: 120px; min-width: 0; }
.household-approval-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid rgba(215,184,120,.18); border-radius: 17px; background: rgba(215,184,120,.045); }
.household-approval-item strong { color: var(--household-ink); }
.household-approval-item p { margin: 4px 0 0; color: var(--household-muted); font-size: .7rem; }
.household-approval-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.household-empty { padding: 22px 14px; border: 1px dashed rgba(255,255,255,.1); border-radius: 18px; color: var(--household-muted); font-size: .76rem; line-height: 1.55; text-align: center; }
.household-locked-state { padding: 24px; border: 1px solid rgba(215,184,120,.22); border-radius: 24px; background: rgba(215,184,120,.06); color: var(--household-muted); }
.household-locked-state strong { display: block; margin-bottom: 6px; color: var(--household-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; }
@keyframes householdPulse { 0% { box-shadow: 0 0 0 0 rgba(155,216,197,.25); } 70%,100% { box-shadow: 0 0 0 9px rgba(155,216,197,0); } }
@keyframes householdCardIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes householdProgress { from { transform: scaleX(0); } }
@media (max-width: 980px) {
  .household-balance-grid { grid-template-columns: repeat(3,1fr); }
  .household-balance-primary { grid-column: span 2; }
  .household-score-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 760px) {
  .household-hero { grid-template-columns: 1fr; }
  .household-hero-orbit { display: none; }
  .household-content-grid, .household-controls-grid { grid-template-columns: 1fr; }
  .household-member-metrics { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .household-experience { gap: 12px; }
  .household-hero { min-height: 0; padding: 25px 21px; border-radius: 26px; }
  .household-hero h2 { font-size: 2.7rem; }
  .household-balance-grid { grid-template-columns: repeat(2,1fr); }
  .household-balance-primary { grid-column: 1 / -1; min-height: 155px; }
  .household-balance-card { min-height: 124px; padding: 15px; border-radius: 19px; }
  .household-member-grid, .household-spending-comparison { grid-template-columns: 1fr; }
  .household-score-grid { grid-template-columns: repeat(2,1fr); }
  .household-section { padding: 18px 15px; border-radius: 23px; }
  .household-section-heading { align-items: flex-start; }
  .household-section-heading > small { display: none; }
  .household-timeline-item { grid-template-columns: 38px 1fr; gap: 10px; }
  .household-timeline::before { left: 18px; }
  .household-timeline-icon { width: 38px; height: 38px; border-radius: 13px; }
  .household-timeline-item time { grid-column: 2; padding-top: 0; }
  .household-note-form > div { grid-template-columns: 1fr; }
  .household-category-row { grid-template-columns: 82px 1fr auto; gap: 8px; }
  .household-approval-item { grid-template-columns: 1fr; }
  .household-approval-actions { justify-content: stretch; }
  .household-approval-actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .household-live-chip i, .household-balance-card, .household-progress span { animation: none !important; }
}

/* =====================================================================
   SPENDBEACON 3.0 FEATURE-FREEZE DESIGN SYSTEM
   Authoritative visual compatibility layer. Presentation only.
   ===================================================================== */

.financial-intelligence {
  --fi-ink: var(--color-text); --fi-muted: var(--color-text-muted);
  --fi-mint: var(--color-success); --fi-gold: var(--color-warning);
  --fi-blue: var(--color-primary); --fi-violet: var(--color-primary); --fi-coral: var(--color-error);
}
.action-forecast { --action-accent: var(--color-primary); }
.money-coach-teaser, .money-coach-hero, .money-coach-plan, .money-coach-feed,
.money-coach-metric-grid article, .money-coach-settings-card {
  --coach-accent: var(--color-success); --coach-accent-rgb: 47, 210, 154;
}
.money-coach-teaser[data-tone="warning"], .money-coach-hero[data-tone="warning"] {
  --coach-accent: var(--color-warning); --coach-accent-rgb: 242, 184, 75;
}
.money-coach-teaser[data-tone="critical"], .money-coach-hero[data-tone="critical"] {
  --coach-accent: var(--color-error); --coach-accent-rgb: 240, 109, 120;
}
#page-home {
  --coach-green: var(--color-success); --coach-green-deep: var(--color-success);
  --coach-amber: var(--color-warning); --coach-red: var(--color-error); --coach-blue: var(--color-primary);
}
#homePanel-daily {
  --dashboard-ink: var(--color-text); --dashboard-muted: var(--color-text-muted);
  --dashboard-panel: var(--color-surface); --dashboard-panel-strong: var(--color-surface-strong);
  --dashboard-line: var(--color-border); --dashboard-mint: var(--color-success);
  --dashboard-blue: var(--color-primary); --dashboard-gold: var(--color-warning); --dashboard-coral: var(--color-error);
}
.spending-insights {
  --insights-ink: var(--color-text); --insights-muted: var(--color-text-muted);
  --insights-panel: var(--color-surface); --insights-panel-strong: var(--color-surface-strong);
  --insights-line: var(--color-border); --insights-mint: var(--color-success);
  --insights-blue: var(--color-primary); --insights-gold: var(--color-warning); --insights-violet: var(--color-primary);
}
.household-experience {
  --household-ink: var(--color-text); --household-muted: var(--color-text-muted);
  --household-mint: var(--color-success); --household-gold: var(--color-warning); --household-coral: var(--color-error);
}
.savings-goal-card, .savings-goal-card:nth-child(3n), .savings-goal-card:nth-child(3n + 1):not(:first-child) {
  --goal-accent: var(--color-success);
}

html { background: var(--color-bg); }
body {
  color: var(--color-text);
  background: radial-gradient(circle at 50% -8%, rgba(79, 140, 255, 0.2), transparent 38%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-raised) 54%, var(--color-bg) 100%);
  font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-regular);
  line-height: 1.5; font-variant-numeric: tabular-nums;
}
body::before {
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: var(--space-8) var(--space-8);
}
body, button, input, select, textarea, summary, .household-hero h2, .household-avatar,
.fi-hero h2, .fi-chart > div:first-child strong, .goals-dashboard-head h2, .goal-title-row h3 {
  font-family: var(--font-sans);
}
.mono, code, pre { font-family: var(--font-mono); }
.big, .conversion-safe-amount, .daily-spend-number, .daily-spend-number strong, .goals-overview-copy > strong {
  font-size: var(--text-hero); font-weight: var(--weight-black); line-height: 1; letter-spacing: -.045em;
}
.title, .page-title, .dashboard-heading h1, .goals-dashboard-head h2, .household-hero h2, .fi-hero h2 {
  font-size: var(--text-page-title); font-weight: var(--weight-black); line-height: 1.08; letter-spacing: -.035em;
}
h2, .section-title, .dashboard-section-heading h2, .household-section-heading h2 {
  font-size: var(--text-section-title); font-weight: var(--weight-bold); line-height: 1.2; letter-spacing: -.02em;
}
h3, h4, .card-heading, .goal-title-row h3 {
  font-size: var(--text-card-title); font-weight: var(--weight-bold); line-height: 1.3; letter-spacing: -.01em;
}
.small, p, li, label, input, select, textarea, button { font-size: var(--text-body); }
.tiny, small, .label, .sub, .caption { font-size: var(--text-caption); }
.label, .household-kicker, .household-section-heading span:first-child, .goals-suggestion span, .goal-title-row span {
  font-weight: var(--weight-bold); letter-spacing: .09em;
}
.tab, .tab span { font-size: var(--text-tab) !important; }
.big, .value, [class*="amount" i], [class*="balance" i], [class*="money" i],
[class*="metric" i] strong, [class*="stat" i] strong, input[type="number"] { font-variant-numeric: tabular-nums; }

.app { padding-inline: var(--space-4); }
.mt-2, .mt-6, .mt-8 { margin-top: var(--space-2) !important; }
.mt-10, .mt-12, .mt-14 { margin-top: var(--space-3) !important; }
.mt-16 { margin-top: var(--space-4) !important; }
.mb-8 { margin-bottom: var(--space-2) !important; }
.mb-14, .mb-16, .mb-18 { margin-bottom: var(--space-4) !important; }
.grid2, .row, .between { gap: var(--space-3); }

.hero, .card, details.collapse, .premium-card, .dashboard-card, .dashboard-section,
.conversion-card, .money-coach-teaser, .money-coach-hero, .money-coach-plan, .money-coach-feed,
.money-coach-settings-card, .spending-overview-card, .spending-category-card, .transaction-explorer,
.goals-overview-card, .savings-goal-card, .goal-forecast-panel, .household-card, .household-hero, .fi-card, .fi-hero {
  border-color: var(--color-border) !important; border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card), var(--inner-highlight) !important;
}
.card, details.collapse, .premium-card { padding: var(--space-6); }
.card > :is(h2, h3, .card-heading):first-child,
details.collapse > summary:first-child,
.premium-card > :is(h2, h3, .card-heading):first-child { margin-bottom: var(--space-4); }
.card > :is(.actions, .card-actions, footer):last-child,
.premium-card > :is(.actions, .card-actions, footer):last-child { margin-top: var(--space-4); }
.card + .card, .card + details.collapse, details.collapse + .card { margin-top: var(--space-3); }
.hero:hover, .card:hover, details.collapse:hover, .premium-card:hover {
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--shadow-card-hover), var(--inner-highlight) !important;
}
.modal {
  border-color: var(--color-border) !important; border-radius: var(--radius-modal) !important;
  background: var(--color-surface-strong) !important; box-shadow: var(--shadow-modal), var(--inner-highlight) !important;
}
.notice { padding: var(--space-4); border-radius: var(--radius-control); }

button {
  min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-control) !important;
  background: var(--color-primary); color: #fff; font-weight: var(--weight-bold);
  transition: transform var(--transition-fast), background-color var(--transition-fast),
    border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}
button:hover:not(:disabled) {
  transform: translateY(-1px); background: var(--color-primary-strong);
  box-shadow: 0 10px 24px rgba(79, 140, 255, .24);
}
button:active:not(:disabled) { transform: translateY(0) scale(.985); box-shadow: none; }
button.secondary, button.ghost {
  border-color: var(--color-border); background: var(--color-surface-soft); color: var(--color-text); box-shadow: none;
}
button.secondary:hover:not(:disabled), button.ghost:hover:not(:disabled) {
  border-color: var(--color-border-strong); background: rgba(255,255,255,.08); box-shadow: none;
}
button.success { background: var(--color-success); color: #041812; }
button.success:hover:not(:disabled) { background: var(--color-success); }
button.warn { background: var(--color-warning); color: #1c1303; }
button.warn:hover:not(:disabled) { background: var(--color-warning); }
button.danger { background: var(--color-error); color: #fff; }
button.danger:hover:not(:disabled) { background: var(--color-error); }
button:disabled, button[aria-disabled="true"] { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
button[aria-busy="true"], button.loading { cursor: wait; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--color-primary) !important; outline-offset: 3px; box-shadow: var(--shadow-focus) !important;
}
input, select, textarea {
  min-height: 44px; border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-control) !important; background: rgba(3,9,22,.58) !important;
  color: var(--color-text) !important; transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:hover, select:hover, textarea:hover { border-color: var(--color-border-strong) !important; }

.ok, .okPill { color: #c8f8e7; border-color: rgba(47,210,154,.3); background: rgba(47,210,154,.1); }
.warnBox, .warnPill { color: #ffe7b0; border-color: rgba(242,184,75,.3); background: rgba(242,184,75,.1); }
.dangerBox { color: #ffd0d4; border-color: rgba(240,109,120,.32); background: rgba(240,109,120,.1); }
.sync { color: #d9e7ff; border-color: rgba(79,140,255,.3); background: rgba(79,140,255,.1); }
.tabs, .premium-bottom-nav {
  border-color: var(--color-border) !important; background: rgba(7,15,32,.94) !important;
  box-shadow: 0 -12px 36px rgba(0,0,0,.34), var(--inner-highlight) !important;
}
.tab { color: var(--color-text-muted); }
.tab.active { color: var(--color-primary); }

@media (max-width: 520px) {
  .card, details.collapse, .premium-card { padding: var(--space-4); }
  .app { padding-inline: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}