/* ═══════════════════════════════════════════════════════════
   ADMIN LEGACY UTILITY CLASSES
   Predates v2 design system. Used by admin templates only.
   Migration to v2 tokens deferred until admin redesign.
   ═══════════════════════════════════════════════════════════ */
.bg-primary-custom { background-color: #1a5490 !important; }
.btn-primary-custom { background-color: #1a5490; border-color: #1a5490; color: white; }
.btn-primary-custom:hover { background-color: #15437a; border-color: #15437a; color: white; }
.bg-purple { background-color: #8e44ad !important; }
.bg-teal { background-color: #16a085 !important; }
.navbar .nav-link.active { font-weight: bold; border-bottom: 3px solid white; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background-color: #e8f4fd !important; }
.badge-stat { display: inline-block; min-width: 140px; text-align: center; }

/* ═══════════════════════════════════════════════════════════
   MAXG2 DESIGN SYSTEM — CSS Custom Properties (Tokens)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────── */
  --color-navy:         #1B2A4A;
  --color-accent:       #0D7C8C;
  --color-accent-hover: #0A6670;
  --color-accent-light: #F0FAFB;
  --color-navy-dark:    #131F38;

  /* ── Surfaces ──────────────────────────────────── */
  --color-bg:           #F1F4F8;
  --color-surface:      #FFFFFF;
  --color-surface-alt:  #F8FAFC;
  --color-border:       #E2E8F0;
  --color-border-strong:#CBD5E1;

  /* ── Text ──────────────────────────────────────── */
  --color-text-primary:   #0F172A;
  --color-text-secondary: #374151;
  --color-text-tertiary:  #64748B;
  --color-text-inverse:   #FFFFFF;

  /* ── Semantic — text and icons (WCAG AA on white) ─ */
  --color-positive:     #15803D;
  --color-negative:     #B91C1C;
  --color-warning:      #B45309;
  --color-structural:   #4338CA;

  /* ── Semantic — backgrounds ─────────────────────── */
  --color-positive-bg:      #F0FDF4;
  --color-positive-border:  #BBF7D0;
  --color-negative-bg:      #FEF2F2;
  --color-negative-border:  #FECACA;
  --color-warning-bg:       #FFFBEB;
  --color-warning-border:   #FDE68A;
  --color-structural-bg:    #EEF2FF;
  --color-structural-border:#C7D2FE;

  /* ── Sidebar ───────────────────────────────────── */
  --color-sidebar-top:    #0A1628;
  --color-sidebar-bottom: #061020;

  /* ── Chart color sequence ──────────────────────── */
  --chart-1:  #1B2A4A;
  --chart-2:  #0D7C8C;
  --chart-3:  #4338CA;
  --chart-4:  #0F766E;
  --chart-5:  #7E22CE;
  --chart-6:  #0369A1;
  --chart-7:  #1D4ED8;
  --chart-8:  #0891B2;
  --chart-9:  #6D28D9;
  --chart-10: #047857;
  --chart-11: #1E3A5F;
  --chart-12: #155E75;

  /* ── Type scale ────────────────────────────────── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  44px;
  --text-4xl:  56px;

  /* ── Line-height and letter-spacing ────────────── */
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;
  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;

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

  /* ── Border radius ─────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* ── Elevation ─────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);

  /* ── Content widths ────────────────────────────── */
  --width-narrow:  680px;
  --width-default: 1040px;
  --width-wide:    1280px;

  /* ── Sidebar ─────────────────────────────────── */
  --sidebar-width: 240px;

  /* ── Ask Max panel ─────────────────────────────── */
  --panel-width: 370px;
}

/* ── Bootstrap overrides ──────────────────────────────────── */
.text-muted { color: var(--color-text-secondary) !important; }

/* ── Auth page links ─────────────────────────────────────── */
.auth-link { color: var(--color-accent); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   LAYOUT WIDTH CLASSES
   ═══════════════════════════════════════════════════════════ */
.cp-layout-default  { --content-max: var(--width-default); }
.cp-layout-narrow   { --content-max: var(--width-narrow); }
.cp-layout-wide     { --content-max: var(--width-wide); }
.cp-layout-full     { --content-max: 100%; }

/* ═══════════════════════════════════════════════════════════
   CLIENT PORTAL — MAXG2 Design System
   ═══════════════════════════════════════════════════════════ */

/* --- Font ------------------------------------------------ */
.cp-wrapper, .cp-wrapper * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-feature-settings: "tnum" 1;
}

/* --- Utility classes ------------------------------------- */
.tabular-nums { font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
.prose-width { max-width: 680px; }

/* --- Layout shell ---------------------------------------- */
.cp-wrapper {
    display: flex;
    min-height: 100vh;
}

.cp-sidebar {
    width: var(--sidebar-width);
    background: var(--color-navy);
    color: var(--color-text-inverse);
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    transition: width 0.2s;
}

.cp-sidebar-context {
    padding: 0 var(--space-5);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    height: 56px;
    display: flex;
    align-items: center;
}
.cp-sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.cp-sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-md);
    color: white;
    flex-shrink: 0;
}
.cp-sidebar-user-name {
    font-size: var(--text-md);
    font-weight: 600;
}
.cp-sidebar-user-label {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.cp-sidebar-section {
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.cp-nav {
    flex: 1;
    padding: var(--space-3) 0;
    overflow-y: auto;
}

.cp-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px var(--space-5);
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}
.cp-nav-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.06);
}
.cp-nav-item.active {
    color: #fff;
    background: rgba(13,124,140,0.15);
    border-left-color: var(--color-accent);
    font-weight: 500;
}
.cp-nav-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.8;
}
.cp-nav-item.active svg,
.cp-nav-item:hover svg {
    opacity: 1;
}
.cp-nav-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
    padding: 0 var(--space-5);
    margin-bottom: var(--space-2);
}

.cp-sidebar-footer {
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.78rem;
}
.cp-sidebar-footer a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: color 0.15s;
}
.cp-sidebar-footer a:hover {
    color: #fff;
}

/* --- Main content area ----------------------------------- */
.cp-main {
    margin-left: 0;
    flex: 1;
    background: var(--color-bg);
    min-height: 100vh;
}
@media (min-width: 992px) {
    .cp-main { margin-left: var(--sidebar-width); }
}

.cp-topbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.cp-topbar-inner {
    max-width: var(--content-max, var(--width-default));
    margin: 0 auto;
    padding: 0 var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}
.cp-topbar-title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-tight);
}
.cp-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.cp-topbar-user {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.cp-content {
    max-width: var(--content-max, var(--width-default));
    margin: 0 auto;
    padding: var(--space-8) var(--space-8) var(--space-12);
    overflow-x: auto;
}

/* --- Ask Max Bar ----------------------------------------- */
.ask-max-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    margin-bottom: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: text;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ask-max-bar:hover,
.ask-max-bar:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}
.ask-max-bar-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    padding: 10px 0;
    color: var(--color-text-primary);
    cursor: text;
}
.ask-max-bar-input::placeholder {
    color: var(--color-text-muted);
}

/* --- Ask Max Callout ------------------------------------- */
.ask-max-callout {
    position: relative;
    background: #F0F9FA;
    border: 1px solid #D1E9EC;
    border-radius: var(--radius-md);
    padding: 10px 36px 10px 14px;
    margin-top: -8px;
    margin-bottom: var(--space-4);
    font-size: 0.82rem;
    line-height: 1.45;
    color: #1B2A4A;
    animation: calloutFadeIn 0.3s ease;
}
.ask-max-callout-caret {
    position: absolute;
    top: -6px;
    left: 28px;
    width: 10px;
    height: 10px;
    background: #F0F9FA;
    border-top: 1px solid #D1E9EC;
    border-left: 1px solid #D1E9EC;
    transform: rotate(45deg);
}
.ask-max-callout-close {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    color: #6B7280;
    cursor: pointer;
    padding: 10px 12px;
}
.ask-max-callout-close:hover { color: #1B2A4A; }
.ask-max-callout-text em {
    font-style: italic;
    color: #0D7C8C;
}
@keyframes calloutFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Cards ----------------------------------------------- */
.cp-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
    overflow: hidden;
}
.cp-card .card-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--color-text-primary);
    padding: var(--space-4) var(--space-6);
}
.cp-card .card-body {
    padding: var(--space-6);
}

/* --- Stat cards ------------------------------------------ */
.cp-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5);
    text-align: center;
    position: relative;
}
.cp-stat-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-1);
}
.cp-stat-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
}
.cp-stat-value.positive { color: var(--color-positive); }
.cp-stat-value.negative { color: var(--color-negative); }

.cp-stat-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
/* Net worth accent card */
.cp-stat-card.nw-accent {
    border-color: var(--color-accent);
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(13, 124, 140, 0.12);
}
.cp-stat-card.nw-accent .cp-stat-value {
    font-size: 22px;
}

/* Cash flow card */
.cf-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}
.cf-label-sub {
    color: var(--color-text-primary);
}
.cf-divider {
    margin: 4px 0;
    border: none;
    border-top: 1px solid var(--color-border);
}
.cf-total {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-accent);
}

@media (max-width: 575px) {
    .cp-stat-card { padding: var(--space-3); }
}

/* --- Section headings ------------------------------------ */
.cp-section-heading {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-tertiary);
    margin: var(--space-8) 0 14px;
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
}

/* --- Tables ---------------------------------------------- */
.cp-table {
    width: 100%;
    font-size: 16px;
    border-collapse: collapse;
}
.cp-table th {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-secondary);
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}
.cp-table td {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-strong);
    font-variant-numeric: tabular-nums;
}
.cp-table th.text-end,
.cp-table td.text-end {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}
.cp-table tr:last-child td {
    border-bottom: none;
}

/* v2 §6.13 — Item table extensions */
.cp-table tr.cp-table-cat td { background: var(--color-surface-alt); font-weight: 600; font-size: var(--text-md); color: var(--color-text-primary); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-strong); }
.cp-table tr.cp-table-item { cursor: pointer; transition: background 0.1s ease; }
.cp-table tr.cp-table-item:hover { background: var(--color-accent-light); }
.cp-table tr.cp-table-item td:first-child { padding-left: var(--space-6); color: var(--color-text-secondary); }
.cp-table .cp-table-delete { opacity: 0.3; border: none; background: none; color: var(--color-text-tertiary); font-size: 14px; width: 24px; height: 24px; line-height: 24px; text-align: center; padding: 0; border-radius: 50%; cursor: pointer; transition: opacity 0.1s, color 0.1s, background 0.1s; }
.cp-table tr:hover .cp-table-delete { opacity: 1; }
.cp-table .cp-table-delete:hover { color: var(--color-negative); background: var(--color-negative-bg); }
.cp-table-empty { text-align: center; color: var(--color-text-tertiary); padding: var(--space-5); }
/* Display group headers */
.cp-table tr.cp-group-header td {
    background: var(--color-surface);
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--color-text-primary);
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    cursor: pointer;
    user-select: none;
}
.cp-table tr.cp-group-header:hover td { background: var(--color-accent-light); }
.cp-table tr.cp-group-header:first-child td { border-top: none; }
.cp-table tr.cp-group-flat td { border-bottom: 1px solid var(--color-border-strong); }

/* Collapsible category rows */
.cp-table tr.cp-table-cat { cursor: pointer; user-select: none; }
.cp-table tr.cp-table-cat:hover { background: var(--color-accent-light); }
.cp-cat-toggle {
    display: inline-block;
    width: 16px;
    font-size: 12px;
    color: var(--color-text-tertiary);
    transition: transform 0.15s ease;
    text-align: center;
}
.cp-cat-toggle { transform: rotate(90deg); }
.cp-cat-toggle.collapsed { transform: rotate(0deg); }

/* Category item rows (visible by default, hidden when category collapsed) */
.cp-cat-items.collapsed { display: none; }

@media (max-width: 575px) {
    .cp-table .cp-table-delete { opacity: 1; }
}

/* Legacy table styling within cp-card */
.cp-card .table {
    margin-bottom: 0;
}
.cp-card .table th {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    border-bottom-width: 1px;
    padding: 10px var(--space-4);
}
.cp-card .table td {
    font-size: var(--text-base);
    color: var(--color-text-primary);
    padding: 10px var(--space-4);
    vertical-align: middle;
}

/* --- Badges ---------------------------------------------- */
.cp-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    letter-spacing: 0.02em;
}

/* --- Buttons --------------------------------------------- */
.cp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.cp-btn-primary {
    background: var(--color-accent);
    border: none;
    color: #fff;
    font-size: var(--text-base);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
}
.cp-btn-primary:hover {
    background: var(--color-accent-hover);
    color: #fff;
}

.cp-btn-secondary {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    font-size: var(--text-base);
    font-weight: 500;
    padding: 9px 18px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}
.cp-btn-secondary:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.cp-btn-outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    font-weight: 500;
    padding: 9px 18px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}
.cp-btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.cp-btn-tertiary {
    background: transparent;
    color: var(--color-accent);
    border: none;
    font-size: var(--text-base);
    font-weight: 500;
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
}
.cp-btn-tertiary:hover {
    background: var(--color-accent-light);
}

.cp-btn-destructive {
    background: var(--color-negative);
    color: #fff;
    border: none;
    font-size: var(--text-base);
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
}
.cp-btn-destructive:hover {
    background: #991B1B;
    color: #fff;
}

/* --- Empty state ----------------------------------------- */
.cp-empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
}
.cp-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
}
.cp-empty-heading {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}
.cp-empty-text {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    max-width: 480px;
    margin: 0 auto var(--space-6);
}

/* --- Loading state --------------------------------------- */
.cp-loading {
    text-align: center;
    padding: var(--space-12) var(--space-6);
}
.cp-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto var(--space-4);
}
.cp-loading p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Alert / status banner ------------------------------- */
.cp-alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border-left: 3px solid;
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-bottom: var(--space-6);
    font-size: var(--text-base);
}
.cp-alert-negative {
    background: var(--color-negative-bg);
    border-left-color: var(--color-negative);
}
.cp-alert-positive {
    background: var(--color-positive-bg);
    border-left-color: var(--color-positive);
}
.cp-alert-warning {
    background: var(--color-warning-bg);
    border-left-color: var(--color-warning);
}
.cp-alert-structural {
    background: var(--color-structural-bg);
    border-left-color: var(--color-structural);
}

/* --- Field provenance annotations ----------------------- */
.provenance-assumed {
    font-size: 0.75em;
    color: var(--color-text-tertiary);
    font-weight: 400;
    margin-left: 4px;
}
.provenance-banner {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px 14px;
    margin-bottom: 12px;
}
.provenance-banner a {
    color: var(--color-accent);
    font-weight: 600;
}

/* --- Progress bars (client portal) ----------------------- */
.cp-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
}
.cp-progress .progress-bar {
    border-radius: 3px;
    font-size: 0;
    line-height: 6px;
}

/* --- Ask Max side panel ---------------------------------- */
.max-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: var(--panel-width);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    transform: translateX(100%);
    transition: transform 0.2s ease;
}
.max-panel.open { transform: translateX(0); }

.max-panel-header {
    background: var(--color-navy);
    color: #fff;
    padding: 0 16px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.max-panel-header span { font-weight: 600; font-size: 0.95rem; }
.max-panel-header button {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
}
.max-panel-header button:hover { color: #fff; }

.max-panel-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    background: var(--color-bg);
    min-height: 0;
}

.max-panel-input {
    border-top: 1px solid var(--color-border);
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    background: var(--color-surface);
    flex-shrink: 0;
}
.max-panel-input input {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    outline: none;
}
.max-panel-input input:focus { border-color: var(--color-accent); }
.max-panel-input button {
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.max-panel-input button:hover { background: var(--color-accent-hover); }

/* Push content when panel open (wide viewports) */
@media (min-width: 1100px) {
    body.max-panel-open .cp-main {
        margin-right: var(--panel-width);
        transition: margin-right 0.2s ease;
    }
}

/* Narrow viewports: overlay instead of push */
@media (max-width: 1099px) {
    .max-panel.open {
        width: 100%;
        max-width: 400px;
        box-shadow: var(--shadow-lg);
    }
}
.max-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1039;
    display: none;
}

/* Floating bubble — visible when panel is closed */
.max-bubble {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    border: none;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 1038;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.max-bubble:hover { background: var(--color-accent-hover); }

/* --- Hamburger button ------------------------------------ */
.cp-hamburger {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    margin-right: var(--space-2);
    cursor: pointer;
}

/* --- Mobile offcanvas nav overrides ---------------------- */
#mobileSidebar .cp-nav-item span { display: inline !important; }
#mobileSidebar .cp-nav-label { display: block !important; }

/* --- Responsive ------------------------------------------ */
@media (max-width: 575px) {
    .cp-content {
        padding: var(--space-4) var(--space-4) var(--space-8);
    }
    .cp-topbar-inner {
        padding: 0 var(--space-4);
    }
}

/* --- My Future page -------------------------------------- */
.cp-hero {
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-8);
    color: #fff;
}
.cp-hero.on-track { background: linear-gradient(135deg, var(--color-positive) 0%, #15803d 100%); }
.cp-hero.needs-attention { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); color: var(--color-text-primary); }
.cp-hero.at-risk { background: linear-gradient(135deg, var(--color-negative) 0%, #991B1B 100%); }

.cp-scenario-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-3);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 130px;
    flex: 0 0 auto;
}
.cp-scenario-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-color: var(--color-accent); }
.cp-scenario-tile.active { border-color: var(--color-accent); background: var(--color-accent-light); }

.cp-collapse-header {
    padding: 14px var(--space-5);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--color-text-primary);
    user-select: none;
}
.cp-collapse-header:hover { background: var(--color-surface-alt); }
.cp-collapse-arrow { font-size: 0.9rem; color: var(--color-text-tertiary); transition: transform 0.2s; }

.cp-stat-simple {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    text-align: center;
}
.cp-stat-simple .label {
    font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary); margin-bottom: 6px;
}
.cp-stat-simple .value { font-size: 1.35rem; font-weight: 700; color: var(--color-text-primary); }
.cp-stat-simple .value.positive { color: var(--color-positive); }
.cp-stat-simple .value.negative { color: var(--color-negative); }

/* ═══════════════════════════════════════════════════════════
   INTAKE WIZARD — step progress bar & transitions
   ═══════════════════════════════════════════════════════════ */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--space-8);
    padding: 0 10px;
}
.wizard-progress .wz-step {
    display: flex;
    align-items: center;
    gap: 0;
}
.wizard-progress .wz-dot {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--color-border);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-base); font-weight: 700;
    transition: background 0.3s, box-shadow 0.3s;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}
.wizard-progress .wz-dot.active {
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(13,124,140,0.18);
}
.wizard-progress .wz-dot.done {
    background: var(--color-positive);
}
.wizard-progress .wz-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
    text-align: center;
    white-space: nowrap;
}
.wizard-progress .wz-dot.active + .wz-label,
.wizard-progress .wz-step.active .wz-label { color: var(--color-accent); }
.wizard-progress .wz-step.done .wz-label { color: var(--color-positive); }
.wizard-progress .wz-line {
    flex: 1;
    height: 3px;
    background: var(--color-border);
    min-width: 40px;
    transition: background 0.3s;
}
.wizard-progress .wz-line.done { background: var(--color-positive); }
.wizard-progress .wz-step {
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

/* Wizard step containers */
.wizard-step { display: none; animation: wizFadeIn 0.3s ease; }
.wizard-step.active { display: block; }
@keyframes wizFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Upload summary badge */
.upload-summary {
    background: var(--color-positive-bg);
    border: 1px solid var(--color-positive-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    font-size: var(--text-base);
    color: #166534;
}
.upload-summary.error {
    background: var(--color-negative-bg);
    border-color: var(--color-negative-border);
    color: #991B1B;
}

/* Review step summary cards */
.review-section {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.review-section h6 {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}
.review-section .edit-link {
    font-size: var(--text-sm);
    color: var(--color-accent);
    cursor: pointer;
    text-decoration: none;
}
.review-section .edit-link:hover { text-decoration: underline; }
.review-row { display: flex; justify-content: space-between; font-size: var(--text-base); padding: 2px 0; }
.review-row .label { color: var(--color-text-secondary); }
.review-row .value { font-weight: 600; color: var(--color-text-primary); }

/* --- Voice hint banner ----------------------------------- */
.voice-hint-banner {
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
    border: 1px solid #7DD3FC;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════
   VOICE INPUT — mic button, panel, animations
   ═══════════════════════════════════════════════════════════ */

/* --- Mic Button (fixed, bottom-right) -------------------- */
#voiceMicBtn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--color-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    z-index: 1050;
    transition: background 0.2s, box-shadow 0.2s;
}
#voiceMicBtn:hover {
    background: #15437a;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
#voiceMicBtn.listening {
    background: #DC2626;
    animation: mic-pulse 1.5s infinite;
}

@keyframes mic-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}

/* --- Voice Panel ----------------------------------------- */
#voicePanel {
    position: fixed;
    bottom: 96px;
    right: 28px;
    width: 360px;
    max-height: 480px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: voice-slide-up 0.25s ease;
}
@keyframes voice-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.voice-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}
.voice-panel-title {
    font-weight: 700;
    font-size: var(--text-md);
    color: var(--color-text-primary);
}
.voice-panel-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--color-text-tertiary);
    cursor: pointer;
    line-height: 1;
    padding: 0 var(--space-1);
}
.voice-panel-close:hover { color: var(--color-text-primary); }

/* Transcript area */
.voice-transcript-area {
    padding: var(--space-3) var(--space-4);
    min-height: 60px;
    max-height: 120px;
    overflow-y: auto;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    line-height: var(--leading-normal);
}
.voice-transcript-area .interim { color: var(--color-text-tertiary); font-style: italic; }

/* Status line */
.voice-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.voice-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-positive);
    flex-shrink: 0;
}
.voice-status-dot.listening { background: #DC2626; }
.voice-status-dot.processing { background: #F59E0B; }
.voice-status-dot.ready { background: var(--color-positive); }
.voice-status-dot.error { background: #DC2626; }

/* Actions preview area */
.voice-actions-area {
    padding: 0 var(--space-4) var(--space-2);
    max-height: 200px;
    overflow-y: auto;
}
.voice-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-2) 10px;
    margin-bottom: 6px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-positive);
    font-size: var(--text-base);
}
.voice-action-item.remove { border-left-color: var(--color-negative); }
.voice-action-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    flex-shrink: 0;
}
.voice-action-badge.add { background: var(--color-positive-bg); color: #166534; }
.voice-action-badge.remove { background: var(--color-negative-bg); color: #991B1B; }
.voice-action-type {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
    min-width: 54px;
}
.voice-action-detail {
    flex: 1;
    min-width: 0;
}
.voice-action-detail .name {
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.voice-action-detail .amount {
    font-weight: 700;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

/* Footer buttons */
.voice-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: 10px var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}

/* Flash animations for applied rows */
.intake-row {
    padding: 4px 0;
}
.intake-row:hover {
    background-color: var(--color-surface-alt);
    border-radius: var(--radius-sm);
}
.intake-row.flash-add {
    animation: flash-green 0.8s ease;
}
.intake-row.flash-remove {
    animation: flash-red 0.6s ease;
}
@keyframes flash-green {
    0%   { background: var(--color-positive-bg); }
    100% { background: transparent; }
}
@keyframes flash-red {
    0%   { background: var(--color-negative-bg); }
    100% { background: transparent; }
}

/* Responsive: smaller panel on mobile */
@media (max-width: 575px) {
    #voicePanel {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 88px;
    }
    #voiceMicBtn {
        right: 16px;
        bottom: 20px;
        width: 48px;
        height: 48px;
    }
}

/* ═══════════════════════════════════════════════════════════
   GETTING STARTED GUIDE
   ═══════════════════════════════════════════════════════════ */

.guide-section-title {
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: var(--text-md);
    margin: var(--space-8) 0 var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
}

/* Quick-start checklist */
.guide-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.guide-check-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-md);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
}
.guide-check-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Page headers inside cards */
.guide-page-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.guide-page-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.guide-page-desc {
    font-size: var(--text-md);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 14px;
}

/* Feature lists */
.guide-feature-list {
    padding-left: 18px;
    margin-bottom: 14px;
}
.guide-feature-list li {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-1);
}

/* Mini step grid (My Info wizard steps) */
.guide-steps-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.guide-mini-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}
.guide-mini-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Tip boxes */
.guide-tip {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) 14px;
    font-size: var(--text-base);
    color: var(--color-warning);
    line-height: 1.55;
}

/* Voice input steps */
.guide-voice-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.guide-voice-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-md);
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
}
.guide-voice-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Voice examples */
.guide-voice-examples {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.guide-voice-example {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: var(--leading-normal);
    padding-left: var(--space-1);
}
.guide-tag {
    display: inline-block;
    background: #E0F2FE;
    color: #0369A1;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-style: normal;
    margin-right: var(--space-1);
    vertical-align: middle;
}

/* Motivation grid */
.guide-motivation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.guide-motivation-card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: var(--space-4);
    text-align: center;
}
.guide-motivation-card strong {
    display: block;
    color: var(--color-text-primary);
    font-size: var(--text-base);
    margin-bottom: 6px;
}

@media (max-width: 575px) {
    .guide-motivation-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   EMBEDDED STYLES CONSOLIDATED (from templates)
   ═══════════════════════════════════════════════════════════ */

/* --- Dashboard: onboarding checklist & benchmark circles - */
.ob-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.bench-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
}

/* --- Projection: findings accordion ---------------------- */
.findings-accordion {
    display: flex;
    flex-direction: column;
}
.finding-row {
    border: 1px solid var(--color-border);
    border-bottom: none;
    background: var(--color-surface);
}
.finding-row:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.finding-row:last-child { border-bottom: 1px solid var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.finding-row:only-child { border-bottom: 1px solid var(--color-border); border-radius: var(--radius-md); }

.finding-row-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    cursor: pointer; user-select: none; transition: background 0.15s;
}
.finding-row-header:hover { background: var(--color-surface-alt); }
.finding-row.active > .finding-row-header {
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.finding-row-left { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.finding-sentiment { flex-shrink: 0; display: flex; align-items: center; }
.finding-title {
    font-size: var(--text-md); font-weight: 600; color: var(--color-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.finding-row-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; margin-left: var(--space-3); }
.finding-count-badge { background: var(--color-accent-light); color: var(--color-accent); }
.finding-arrow {
    font-size: 0.9rem; color: var(--color-text-tertiary);
    transition: transform 0.2s; display: inline-block;
}
.finding-row-body { padding: var(--space-4); }

@media (max-width: 575px) {
    .finding-title { font-size: var(--text-base); }
    .finding-row-header { padding: var(--space-2) var(--space-3); }
    .finding-row-body { padding: var(--space-3); }
    .advisor-rec .card-body { padding: var(--space-3); }
}
.finding-detail-box {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-primary);
}
.advisor-rec {
    margin-bottom: var(--space-3);             /* 12px between recommendation cards */
}
.advisor-rec .card-body {
    padding: var(--space-3) var(--space-5);    /* 12px 20px */
}

/* --- Recommendation tiers -------------------------------- */
.rec-tier-section {
    max-width: 720px;
}
.rec-tier-header {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-tertiary);
    margin: var(--space-4) 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
}
.rec-tier-header--urgent {
    color: var(--color-negative);
    border-bottom-color: var(--color-negative);
}
.rec-tier-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
}
.rec-tier-card--demoted {
    background: var(--color-surface-alt);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-5);
}
.rec-tier-card--demoted .rec-tier-title {
    font-size: var(--text-md);
}
.rec-tier-card--demoted .rec-tier-detail {
    color: var(--color-text-primary);
}
.rec-tier-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}
.rec-tier-detail {
    font-size: 16px;
    color: var(--color-text-primary);
    line-height: 1.7;
}
.rec-line {
    margin-bottom: var(--space-3);
}
.rec-line:last-child {
    margin-bottom: 0;
}
@media (max-width: 575px) {
    .rec-tier-card { padding: var(--space-4) var(--space-4); }
    .rec-tier-card--demoted { padding: var(--space-4) var(--space-4); }
}

/* --- Disclaimer page ------------------------------------- */
.disclaimer-page {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-5);
}
.disclaimer-page h1 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-6);
    text-align: center;
}
.disclaimer-page h2 {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: var(--space-6) 0 var(--space-3);
}
.disclaimer-page p,
.disclaimer-page li {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-loose);
}
.disclaimer-page ul {
    padding-left: var(--space-5);
    margin-bottom: var(--space-4);
}
.disclaimer-accept-box {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-top: var(--space-8);
    text-align: center;
}

/* --- Subscription success page --------------------------- */
.subscription-success {
    text-align: center;
    padding: var(--space-12) var(--space-6);
}
.subscription-success h2 {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}
.subscription-success p {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

/* ═══════════════════════════════════════════════════════════
   V2 DESIGN SYSTEM COMPONENTS (Diagnosis page + shared)
   ═══════════════════════════════════════════════════════════ */

/* --- Page header ----------------------------------------- */
.main-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--space-8);
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.breadcrumb {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0;
    background: none;
    padding: 0;
}
.breadcrumb-separator {
    margin: 0 var(--space-2);
    color: var(--color-border-strong);
}
.header-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}
.header-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* --- Page scaffolding ------------------------------------ */
.page {
    padding: var(--space-8);
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}
.page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-2);
}
.page-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
}
.page-actions {
    display: flex;
    gap: var(--space-2);
}
.page-instruction {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
    max-width: 720px;
    line-height: 1.6;
}
.page-instruction a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* --- V2 buttons (scoped to .page and .main-header) ------- */
.page .btn,
.main-header .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}
.page .btn:hover,
.main-header .btn:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-text-tertiary);
}
.page .btn-primary,
.main-header .btn-primary {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}
.page .btn-primary:hover,
.main-header .btn-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}
.page .btn-sm,
.main-header .btn-sm {
    padding: 5px var(--space-3);
    font-size: var(--text-xs);
}

/* --- Assumption banner ----------------------------------- */
.banner {
    background: var(--color-warning-bg);
    border: 1px solid #FDE68A;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
}
.banner-icon {
    flex-shrink: 0;
    color: var(--color-warning);
    margin-top: 1px;
}
.banner-text {
    color: var(--color-text-primary);
    line-height: 1.5;
}
.banner-text strong { font-weight: 600; }
.banner-text a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    font-weight: 500;
}

/* --- Vital signs panel ----------------------------------- */
.vitals-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    overflow: hidden;
}
.vitals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}
.vitals-header-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-tertiary);
}
.vitals-mode {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-negative);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.vitals-mode::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-negative);
    border-radius: 50%;
}
.vitals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.vital {
    padding: var(--space-5);
    border-right: 1px solid var(--color-border);
    position: relative;
}
.vital:last-child { border-right: none; }
.vital-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}
.vital-value {
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: var(--space-2);
    font-variant-numeric: tabular-nums;
}
.vital-value.negative { color: var(--color-negative); }
.vital-value.positive { color: var(--color-positive); }
.vital-value.warning { color: var(--color-warning); }
.vital-context {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}
.vital-context strong { font-weight: 600; }

/* --- Vital flag pills ------------------------------------ */
.vital-flag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: var(--space-1);
}
.vital-flag.critical { background: var(--color-negative-bg); color: var(--color-negative); }
.vital-flag.watch { background: var(--color-warning-bg); color: var(--color-warning); }
.vital-flag.ok { background: var(--color-positive-bg); color: var(--color-positive); }

/* --- Retirement benchmark info toggle & note ------------- */
.ret-info-toggle {
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-left: var(--space-1);
    vertical-align: middle;
    opacity: 0.7;
}
.ret-info-toggle:hover { opacity: 1; }
.ret-bench-note {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin-top: var(--space-1);
    padding: var(--space-2);
    background: var(--color-surface-raised);
    border-radius: 4px;
    border-left: 2px solid var(--color-border);
}

/* --- Critical finding bar -------------------------------- */
.critical-bar {
    background: var(--color-negative-bg);
    border: 1px solid #FECACA;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.critical-bar-icon {
    flex-shrink: 0;
    color: var(--color-negative);
}
.critical-bar-text {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}
.critical-bar-text strong { color: var(--color-negative); font-weight: 600; }

/* --- Hero finding card ----------------------------------- */
.hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    overflow: hidden;
}
.hero-header {
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hero-header-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-tertiary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.hero-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-positive);
    font-weight: 500;
}
.hero-body {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: var(--space-6);
    padding: var(--space-6);
}
.hero-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.hero-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-xs);
}
.hero-explanation {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-4);
}
.hero-calculation {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
    padding: var(--space-2) 0;
    border-top: 1px dashed var(--color-border);
    margin-top: var(--space-3);
}
.hero-impact {
    background: var(--color-positive-bg);
    border: 1px solid #BBF7D0;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    align-self: start;
}
.hero-impact-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-positive);
    margin-bottom: var(--space-2);
}
.hero-impact-value {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-positive);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: var(--space-1);
    font-variant-numeric: tabular-nums;
}
.hero-impact-sub {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
.hero-first-step {
    background: var(--color-accent-light);
    border-left: 3px solid var(--color-accent);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-4);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.hero-first-step-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    margin-bottom: 4px;
}
.hero-first-step-text {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
}
.hero-actions {
    padding: var(--space-3) var(--space-5);
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* --- Meta pills ------------------------------------------ */
.meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}
.meta-pill.act-now { background: var(--color-positive-bg); color: var(--color-positive); }
.meta-pill.category { background: var(--color-surface-alt); color: var(--color-text-secondary); border: 1px solid var(--color-border); }

/* --- Next-move card -------------------------------------- */
.next-move {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
}
.next-move-header {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}
.next-move-body {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4);
    align-items: center;
}
.next-move-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}
.next-move-detail {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-2);
}
.next-move-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
}
.next-move-impact {
    text-align: right;
    white-space: nowrap;
}
.next-move-impact-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-positive);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.next-move-impact-label {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-1);
}
.next-move-actions {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* --- Section header -------------------------------------- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.section-title {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--color-text-primary);
}
.section-meta {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

/* --- Cash flow health breakdown -------------------------- */
/* --- Cash Flow Health Breakdown (compact rows + accordion) --- */
.health-breakdown {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    text-align: left;
}
.health-breakdown-header {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin-bottom: var(--space-2);
}
.health-factor-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Primary scannable row */
.health-factor-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 2px;
    cursor: pointer;
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    min-height: 36px;
    box-sizing: border-box;
}
.health-factor-row:hover { background: var(--color-surface-alt); }
.health-factor-row.hf-strong-group { opacity: 0.72; }
.health-factor-row.hf-strong-group:hover { opacity: 1; }
.hf-chevron {
    width: 14px;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--color-text-tertiary);
    text-align: center;
    line-height: 1;
    transition: color 0.15s;
}
.health-factor-row:hover .hf-chevron { color: var(--color-text-secondary); }
.health-factor-name {
    flex: 1;
    min-width: 0;
    color: var(--color-text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hf-value {
    flex-shrink: 0;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.health-factor-bar-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 10px;
    background: var(--color-surface-alt);
    border-radius: 5px;
    overflow: hidden;
}
.health-factor-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s;
}
.health-factor-bar.strong  { background: var(--color-positive); }
.health-factor-bar.moderate { background: var(--color-warning); }
.health-factor-bar.weak    { background: #F59E0B; }
.health-factor-bar.concern { background: var(--color-negative); }
.health-factor-label {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-align: right;
    min-width: 48px;
}
.health-factor-label.strong  { color: var(--color-positive); }
.health-factor-label.moderate { color: var(--color-warning); }
.health-factor-label.weak    { color: #F59E0B; }
.health-factor-label.concern { color: var(--color-negative); }
/* Weak / strong divider */
.hf-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 2px 2px;
    font-size: 9px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hf-divider::before,
.hf-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
/* Expandable detail (accordion) */
.hf-detail {
    padding: 4px 0 10px 20px;
    font-size: 10px;
    line-height: 1.45;
}
.hf-detail-meta {
    color: var(--color-text-tertiary);
    margin-bottom: 3px;
}
.hf-detail-reason {
    color: var(--color-text-tertiary);
    margin-bottom: 4px;
}
.hf-detail-rec {
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* --- V2 responsive breakpoints --------------------------- */
@media (max-width: 1024px) {
    .vitals-grid { grid-template-columns: repeat(2, 1fr); }
    .vital:nth-child(2) { border-right: none; }
    .vital:nth-child(1), .vital:nth-child(2) { border-bottom: 1px solid var(--color-border); }
    .hero-body { grid-template-columns: 1fr; }
}

@media (max-width: 575px) {
    .vitals-grid { grid-template-columns: 1fr; }
    .vital { border-right: none !important; border-bottom: 1px solid var(--color-border); }
    .vital:last-child { border-bottom: none; }
    .main-header { padding: var(--space-3) var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
    .page { padding: var(--space-4); }
    .hero-body { gap: var(--space-4); }
    .next-move-body { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ── Projection Assumptions Panel ──────────────── */
.proj-assumptions { padding: var(--space-3); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md, 6px); }
.proj-assumptions-disclaimer { font-size: 0.75rem; color: var(--color-text-tertiary); margin-bottom: var(--space-2); }

/* ── Dashboard — Top cards (Household, Children) ── */
.dash-top-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-sm);
    height: 100%;
}
.dash-top-card-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.dash-top-card-label svg { color: var(--color-text-tertiary); }
.dash-member-line {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.6;
}
.dash-member-age {
    color: var(--color-text-secondary);
    font-weight: 400;
}
.dash-top-card-meta {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.dash-top-card-meta svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD — Net Worth + Health card
   ═══════════════════════════════════════════════════════════ */
.dash-nw-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-6);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}
.dash-nw-left { flex: 1; min-width: 0; }
.dash-nw-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.dash-hero-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-1);
}
.dash-hero-value {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dash-hero-delta {
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.dash-hero-sub {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    margin-top: var(--space-2);
}
/* ── Health ring ── */
.dash-health-ring-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.15s;
}
.dash-health-ring-link:hover { opacity: 0.8; }
.dash-health-ring-label {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}
.dash-inline-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
.dash-metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s;
}
.dash-metric-card:hover { box-shadow: var(--shadow-md); }
.dash-metric-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-1);
}
.dash-metric-value {
    font-size: var(--text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.dash-action-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}
.dash-action-clickable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: box-shadow 0.15s, border-color 0.15s;
    cursor: pointer;
}
.dash-action-clickable:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}
.dash-action-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
    margin-bottom: var(--space-1);
}
.dash-action-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: var(--leading-normal);
}
.dash-action-arrow {
    flex-shrink: 0;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    margin-left: var(--space-3);
}
.dash-cashflow {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}
.dash-cf-header {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-3);
}
.dash-cf-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-2) 0;
    font-size: 16px;
    color: var(--color-text-primary);
}
.dash-cf-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-2) 0;
}
.dash-cf-total {
    font-weight: 700;
    font-size: var(--text-lg);
}
@media (max-width: 575px) {
    .dash-hero-value { font-size: 32px; }
    .dash-nw-card { flex-direction: column; text-align: center; padding: var(--space-4); gap: var(--space-4); }
    .dash-hero-delta { justify-content: center; }
    .dash-nw-right svg { width: 68px; height: 68px; }
}

/* Readability (prompt 11): helper text under fields is at least 14px and
   dark enough to read easily (about 7:1 contrast on white, WCAG AA is 4.5:1). */
.form-text { font-size: 0.875rem; color: #4B5563; }