/* ═══════════════════════════════════════════════════════════
   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: #475569;
  --color-text-tertiary:  #94A3B8;
  --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:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --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;
}

/* ═══════════════════════════════════════════════════════════
   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: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.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-lg);
    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;
}

/* --- 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;
}
@media (max-width: 575px) {
    .cp-stat-card { padding: var(--space-3); }
    .row > [class*="col-4"].col-md-2 { flex: 0 0 50%; max-width: 50%; }
}

/* --- 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: var(--text-base);
    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;
}
.cp-table td {
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    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-sm); color: var(--color-text-primary); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); }
.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); }
.cp-table .cp-table-delete { opacity: 0; border: none; background: none; color: var(--color-text-tertiary); font-size: var(--text-sm); padding: 4px 8px; border-radius: var(--radius-md); 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); }
.cp-table .cp-table-rate { color: var(--color-text-secondary); font-size: var(--text-sm); }
.cp-table .liab-detail-col { color: var(--color-text-secondary); font-size: var(--text-sm); white-space: nowrap; }
@media (max-width: 575px) {
    .cp-table .cp-table-delete { opacity: 1; }
    .cp-table .cp-table-rate { display: none; }
    .cp-table .liab-detail-col { display: none; }
}

/* 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;
}

/* --- Help chat (re-positioned for sidebar layout) -------- */
.cp-wrapper #helpBtn {
    right: 28px;
    top: 12px;
}
.cp-wrapper #helpChat {
    top: 56px;
    right: 28px;
}

/* --- 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-sm); 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-xs); }
    .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-4);
    margin-bottom: var(--space-3);             /* 12px — gap to first recommendation */
}
.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-3) var(--space-5);
    margin-bottom: var(--space-3);
}
.rec-tier-card--demoted {
    background: var(--color-surface-alt);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-2);
}
.rec-tier-card--demoted .rec-tier-title {
    font-size: var(--text-xs);
}
.rec-tier-card--demoted .rec-tier-detail {
    color: var(--color-text-tertiary);
}
.rec-tier-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}
.rec-tier-detail {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}
@media (max-width: 575px) {
    .rec-tier-card { padding: var(--space-2) var(--space-3); }
    .rec-tier-card--demoted { padding: var(--space-2) var(--space-3); }
}

/* --- 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: var(--space-4) var(--space-8);
    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); }

/* --- 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);
}

/* --- 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); }
}