@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   DESIGN SYSTEM TOKENS
   Single source of truth for all visual properties
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------------
       TYPOGRAPHY SCALE
       5-step scale: xs (micro) → sm (label) → base (body) → lg (subhead) → xl (heading)
       Each step is ~1.2x the previous (minor third ratio)
       ------------------------------------------------------------------------- */
    --font-size-xs: 0.6875rem;   /* 11px - micro labels, badges, hints */
    --font-size-sm: 0.75rem;     /* 12px - form labels, column headers */
    --font-size-base: 0.875rem;  /* 14px - body text, row labels, inputs */
    --font-size-lg: 1rem;        /* 16px - section titles, subheadings */
    --font-size-xl: 1.125rem;    /* 18px - card headings, primary titles */
    
    /* Font weights - semantic naming */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.5;
    
    /* Letter spacing */
    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.01em;
    --tracking-wider: 0.02em;
    --tracking-caps: 0.05em;     /* For uppercase micro-labels */
    
    /* -------------------------------------------------------------------------
       SPACING SCALE
       Based on 4px (0.25rem) base unit
       ------------------------------------------------------------------------- */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    
    /* -------------------------------------------------------------------------
       LAYOUT DIMENSIONS
       Centralized layout values for sidebar, banner, and content alignment
       ------------------------------------------------------------------------- */
    --sidebar-width: 140px;
    --layout-gap: var(--space-3);
    --layout-padding: var(--space-4);
    --banner-height: 4.5rem;
    
    /* -------------------------------------------------------------------------
       CARD TOKENS
       Shared visual properties for all card-like containers
       ------------------------------------------------------------------------- */
    --card-padding: var(--space-4);
    --card-padding-tight: var(--space-3);
    --card-padding-loose: var(--space-5);
    --card-radius: 0.75rem;
    --card-radius-sm: 0.5rem;
    --card-shadow: 0 1px 2px rgba(2, 6, 23, 0.06), 0 10px 30px rgba(2, 6, 23, 0.08);
    --card-shadow-elevated: 0 2px 6px rgba(2, 6, 23, 0.08), 0 18px 50px rgba(2, 6, 23, 0.12);
    
    /* Card header */
    --card-header-gap: var(--space-3);
    --card-header-padding-bottom: var(--space-3);
    --card-header-margin-bottom: var(--space-3);
    
    /* -------------------------------------------------------------------------
       COLOR TOKENS
       ------------------------------------------------------------------------- */
    --card-bg: #ffffff;
    --card-border: #d1d9e6;
    --section-bg: #f3f5fa;
    --section-border: #d1d9e6;
    --bg: #f0f3f8;
    --card: #e2e8f0;
    --card-dark: #0f172a;
    --border: #e2e8f0;
    --border-dark: #334155;
    --accent: #059669;
    --accent-2: #10b981;
    --accent-rgb: 16, 185, 129;
    --success: #10b981;
    --gold-1: #facc15;
    --gold-2: #a855f7;
    --error: #ef4444;
    --error-light: rgba(239, 68, 68, 0.12);
    --warning: #f59e0b;
    --warning-dark: #a16207;
    --danger: #dc2626;
    --success-light: rgba(16, 185, 129, 0.12);
    
    /* Emerald color tokens (for snapshot selector) */
    --emerald-400: #34d399;
    --emerald-500: #10b981;
    --emerald-600: #059669;

    /* Glass surfaces (marketing navs + app banner) */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(15, 23, 42, 0.08);
    
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
    --input-text: #1e293b;
    --input-disabled-bg: #f1f5f9;
    --response-bg: #f1f5f9;
    --response-border: #e2e8f0;
    --response-text: #0f172a;
    --text-primary: #0f172a;
    --text-base: #1e293b;
    --text-muted: #475569;
    --text-subtle: #64748b;
    --text-secondary: var(--text-muted);
    --divider-soft: #e2e8f0;
    --section-hover-bg: #f8fafc;
    --card-surface: #ffffff;
    --card-surface-dark: linear-gradient(180deg, #101326 0%, #0b1220 50%, #0f172a 100%);
    
    /* Legacy font size tokens (for backwards compatibility) */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-lg: 1rem;
    
    /* -------------------------------------------------------------------------
       TOGGLE / BUTTON TOKENS
       Unified system for all interactive toggle-style components
       ------------------------------------------------------------------------- */
    --toggle-height: 2.25rem;
    --toggle-padding-x: 0.75rem;
    --toggle-padding-y: 0.35rem;
    --toggle-radius: 0.5rem;
    --toggle-radius-pill: 999px;
    --toggle-font-size: 0.875rem;
    --toggle-font-weight: 600;
    --toggle-gap: 0.5rem;
    --toggle-transition: all 0.15s ease;
    
    /* Toggle colors - default state */
    --toggle-bg: #f1f5f9;
    --toggle-border: var(--card-border);
    --toggle-text: var(--text-muted);
    
    /* Toggle colors - hover state */
    --toggle-hover-bg: #e2e8f0;
    --toggle-hover-border: #94a3b8;
    --toggle-hover-text: var(--text-base);
    
    /* Toggle colors - active/selected state */
    --toggle-active-bg: var(--success);
    --toggle-active-border: transparent;
    --toggle-active-text: #ffffff;
    --toggle-active-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    
    /* Toggle colors - disabled state */
    --toggle-disabled-bg: var(--input-disabled-bg);
    --toggle-disabled-border: var(--card-border);
    --toggle-disabled-text: var(--text-subtle);
    --toggle-disabled-opacity: 0.6;
    
    /* -------------------------------------------------------------------------
       SWITCH TOKENS
       For iOS-style toggle switches (married, share allowances)
       ------------------------------------------------------------------------- */
    --switch-width: 2.25rem;
    --switch-height: 1.25rem;
    --switch-thumb-size: 1rem;
    --switch-bg: #cbd5e1;
    --switch-bg-checked: var(--success);
    --switch-thumb-bg: #ffffff;
    --switch-transition: all 0.2s ease;
}
.dark {
    --card-bg: #0f172a;
    --card-border: #334155;
    --section-bg: #0c1426;
    --section-border: #334155;
    --error: #f87171;
    --error-light: rgba(248, 113, 113, 0.18);
    --warning: #fbbf24;
    --warning-dark: #fcd34d;
    --danger: #f87171;
    --success-light: rgba(52, 211, 153, 0.18);
    --input-bg: #1e293b;
    --input-border: #475569;
    --input-text: #f1f5f9;
    --input-disabled-bg: #1e293b;
    --response-bg: #1e293b;
    --response-border: #475569;
    --response-text: #f1f5f9;
    --text-primary: #ffffff;
    --text-base: #f1f5f9;
    --text-muted: #cbd5e1;
    --text-subtle: #94a3b8;
    --text-secondary: var(--text-muted);
    --divider-soft: #334155;
    --section-hover-bg: #1e293b;
    --card-surface: #0f172a;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 12px 32px rgba(0, 0, 0, 0.45);
    --card-shadow-elevated: 0 2px 8px rgba(0, 0, 0, 0.4), 0 22px 60px rgba(0, 0, 0, 0.55);
    --glass-bg: rgba(2, 6, 23, 0.72);
    --glass-border: rgba(148, 163, 184, 0.18);
    
    /* Dark mode toggle overrides */
    --toggle-bg: #1e293b;
    --toggle-border: #475569;
    --toggle-text: #94a3b8;
    --toggle-hover-bg: #334155;
    --toggle-hover-border: #64748b;
    --toggle-hover-text: #cbd5e1;
    --toggle-active-bg: var(--success);
    --toggle-active-text: #0f172a;
    --toggle-active-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
    --toggle-disabled-bg: #1e293b;
    
    /* Dark mode switch overrides */
    --switch-bg: #475569;
}

/* ==========================================================================
   GLASS SURFACE
   Shared “glass” panel style used across marketing pages and the app banner.
   NOTE: Do NOT set box-shadow here; Tailwind shadow utilities should win.
   ========================================================================== */

.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ==========================================================================
   TYPOGRAPHY SYSTEM
   Semantic classes that map to the typography scale
   ========================================================================== */

/* Headings - for card titles and primary section headers */
.text-heading {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

/* Subheadings - for section titles within cards */
.text-subheading {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-normal);
    color: var(--text-base);
}

/* Body text - default readable text */
.text-body {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--text-base);
}

/* Labels - for form labels and column headers */
.text-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    letter-spacing: var(--tracking-wide);
    color: var(--text-muted);
}

/* Micro - for badges, hints, helper text */
.text-micro {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    color: var(--text-subtle);
}

/* Micro caps - uppercase micro labels */
.text-micro-caps {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
}

/* ==========================================================================
   UNIFIED CARD SYSTEM
   Base card abstraction with consistent visual contract
   ========================================================================== */

/* Base card - all card-like containers inherit from this */
.ds-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

/* Card size variants */
.ds-card--tight {
    padding: var(--card-padding-tight);
}

.ds-card--loose {
    padding: var(--card-padding-loose);
}

/* Card header - consistent across all cards */
.ds-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--card-header-gap);
    padding-bottom: var(--card-header-padding-bottom);
    margin-bottom: var(--card-header-margin-bottom);
    border-bottom: 1px solid var(--divider-soft);
}

.ds-card__header--borderless {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: var(--space-2);
}

/* Card title with icon */
.ds-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-base);
}

.ds-card__title-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Card body - content area */
.ds-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Card sections - divided content blocks */
.ds-card__section {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.ds-card__section + .ds-card__section {
    border-top: 1px solid var(--divider-soft);
}

.ds-card__section:first-child {
    padding-top: 0;
}

.ds-card__section:last-child {
    padding-bottom: 0;
}

/* Section titles within cards */
.ds-card__section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: var(--space-2);
}

/* Form row styling within cards */
.ds-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.ds-card__row-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
}

.ds-card__row-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-base);
}

/* ==========================================================================
   UNIFIED TOGGLE SYSTEM
   Single source of truth for all toggle-style interactive elements.
   Use modifiers for visual variants. Eliminates .pill-toggle, .tab-btn duplication.
   ========================================================================== */

/* Base toggle - foundation for all toggle buttons */
.ds-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--toggle-gap);
    min-height: var(--toggle-height);
    padding: var(--toggle-padding-y) var(--toggle-padding-x);
    border-radius: var(--toggle-radius);
    border: 1px solid var(--toggle-border);
    background: var(--toggle-bg);
    color: var(--toggle-text);
    font-size: var(--toggle-font-size);
    font-weight: var(--toggle-font-weight);
    line-height: 1;
    cursor: pointer;
    transition: var(--toggle-transition);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: visible;
}

.ds-toggle:hover {
    background: var(--toggle-hover-bg);
    border-color: var(--toggle-hover-border);
    color: var(--toggle-hover-text);
    transform: translateY(-1px);
}

.ds-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Active/Selected state */
.ds-toggle.is-active,
.ds-toggle[aria-pressed="true"],
.ds-toggle[aria-selected="true"] {
    background: var(--toggle-active-bg);
    border-color: var(--toggle-active-border);
    color: var(--toggle-active-text);
    box-shadow: var(--toggle-active-shadow);
}

.ds-toggle.is-active:hover,
.ds-toggle[aria-pressed="true"]:hover,
.ds-toggle[aria-selected="true"]:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
}

/* Disabled state */
.ds-toggle:disabled,
.ds-toggle[aria-disabled="true"] {
    background: var(--toggle-disabled-bg);
    border-color: var(--toggle-disabled-border);
    color: var(--toggle-disabled-text);
    opacity: var(--toggle-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   TOGGLE VARIANTS
   -------------------------------------------------------------------------- */

/* Pill variant - fully rounded, smaller, for inline toggles */
.ds-toggle--pill {
    --toggle-padding-x: 0.65rem;
    --toggle-padding-y: 0.3rem;
    --toggle-font-size: 0.75rem;
    --toggle-font-weight: 700;
    border-radius: var(--toggle-radius-pill);
    min-height: auto;
}

/* Ghost variant - transparent background until hover/active */
.ds-toggle--ghost {
    --toggle-bg: transparent;
    --toggle-border: transparent;
    border-style: dashed;
    border-color: var(--card-border);
}

.ds-toggle--ghost:hover {
    --toggle-border: var(--toggle-hover-border);
    border-style: solid;
}

/* Tab variant - for applicant/workspace tabs with fixed widths */
.ds-toggle--tab {
    width: 9.25rem;
    min-width: 9.25rem;
    text-align: center;
    --toggle-font-size: 0.875rem;
}

/* Compact tab variant */
.ds-toggle--tab-compact {
    width: 7rem;
    min-width: 7rem;
}

/* Add button variant - dashed border */
.ds-toggle--add {
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.45);
    --toggle-bg: transparent;
}

.ds-toggle--add:hover {
    border-style: solid;
}

/* --------------------------------------------------------------------------
   TOGGLE GROUP
   Container for grouping related toggles with consistent spacing
   -------------------------------------------------------------------------- */
.ds-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: var(--toggle-gap);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--toggle-radius);
}

/* Tight spacing variant */
.ds-toggle-group--tight {
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
}

/* ==========================================================================
   UNIFIED SWITCH COMPONENT
   iOS-style toggle switch for boolean options
   ========================================================================== */

.ds-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.ds-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ds-switch__track {
    position: relative;
    width: var(--switch-width);
    height: var(--switch-height);
    background: var(--switch-bg);
    border-radius: var(--toggle-radius-pill);
    transition: var(--switch-transition);
}

.ds-switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--switch-thumb-size);
    height: var(--switch-thumb-size);
    background: var(--switch-thumb-bg);
    border-radius: 50%;
    transition: var(--switch-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.ds-switch__input:checked + .ds-switch__track {
    background: var(--switch-bg-checked);
}

.ds-switch__input:checked + .ds-switch__track::after {
    transform: translateX(calc(var(--switch-width) - var(--switch-thumb-size) - 4px));
}

.ds-switch__input:focus-visible + .ds-switch__track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ds-switch__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    user-select: none;
}

/* ==========================================================================
   HOUSEHOLD TOGGLE GROUP
   Specialized styling for married/shared-allowance toggle controls
   ========================================================================== */

.ds-household-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
    margin-top: 0;
}

.ds-household-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--section-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--toggle-radius-pill);
    cursor: pointer;
    transition: var(--toggle-transition);
}

.ds-household-toggle:hover {
    border-color: var(--toggle-hover-border);
    background: var(--toggle-hover-bg);
}

.ds-household-toggle:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Switch track inside household toggle */
.ds-household-toggle .ds-switch__track {
    position: relative;
    flex-shrink: 0;
    width: var(--switch-width);
    height: var(--switch-height);
    background: var(--switch-bg);
    border-radius: var(--toggle-radius-pill);
    transition: var(--switch-transition);
}

.ds-household-toggle .ds-switch__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: var(--switch-thumb-size);
    height: var(--switch-thumb-size);
    background: var(--switch-thumb-bg);
    border-radius: 50%;
    transition: var(--switch-transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.ds-household-toggle .peer:checked ~ .ds-switch__track {
    background: var(--switch-bg-checked);
}

.ds-household-toggle .peer:checked ~ .ds-switch__track::after {
    transform: translateX(calc(var(--switch-width) - var(--switch-thumb-size) - 4px));
}

/* Blue variant for Share Allowances */
.ds-household-toggle .ds-switch__track--blue {
    --switch-bg-checked: #2563eb;
}

.ds-household-toggle .ds-switch__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    user-select: none;
}

/* Married ring icon sizing */
.ds-household-toggle .married-ring {
    width: 1rem;
    height: 1rem;
    color: var(--text-subtle);
    transition: color 0.2s ease;
}

.ds-household-toggle .married-ring.married-ring-selected {
    color: var(--success);
}

/* Accessibility helpers ----------------------------------------------------*/
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Screen reader only - visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Brand & navigation helpers ----------------------------------------------*/
.brand-font { font-family: 'Playfair Display', serif; }

/* Layout helpers -----------------------------------------------------------*/

.tooltip-anchor,
.tooltip-anchor *,
[data-tooltip],
[data-tooltip] *,
[data-tooltip-id],
[data-tooltip-id] * {
    cursor: help !important;
}
.tooltip-anchor:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.tooltip-portal {
    position: absolute;
    z-index: 9999;
    min-width: 260px;
    max-width: 320px;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-base);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    white-space: pre-line;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.tooltip-portal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ENHANCED TOOLTIP SYSTEM
   Dark themed tooltips with arrow pointer for table fields
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Enhanced portal - dark theme with arrow */
.tooltip-portal--enhanced {
    background: var(--slate-800, #1e293b);
    color: var(--slate-100, #f1f5f9);
    border: 1px solid var(--slate-700, #334155);
    border-radius: 8px;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.2),
        0 10px 15px -3px rgba(0, 0, 0, 0.25),
        0 20px 25px -5px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    max-width: 260px;
    padding: 0;
    white-space: normal;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

/* Light mode keeps dark tooltips for contrast */
.tooltip-portal--enhanced {
    --tooltip-bg: var(--slate-800, #1e293b);
    --tooltip-text: var(--slate-100, #f1f5f9);
    --tooltip-border: var(--slate-700, #334155);
    --tooltip-muted: var(--slate-400, #94a3b8);
    --tooltip-accent: var(--sky-400, #38bdf8);
}

/* Arrow element */
.tooltip-portal__arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: inherit;
    border: inherit;
    border-right: none;
    border-bottom: none;
    pointer-events: none;
}

/* Arrow positioning for below placement (arrow points up) */
.tooltip-portal--below .tooltip-portal__arrow {
    top: -6px;
    transform: translateX(-50%) rotate(45deg);
    border-top-left-radius: 2px;
}

/* Arrow positioning for above placement (arrow points down) */
.tooltip-portal--above .tooltip-portal__arrow {
    bottom: -6px;
    transform: translateX(-50%) rotate(-135deg);
    border-top-left-radius: 2px;
}

/* Content container */
.tooltip-portal__content {
    padding: 0.625rem 0.75rem;
    white-space: pre-line;
}

/* Rich tooltip styling */
.tooltip-portal--rich .tooltip-portal__content {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Tooltip title */
.tooltip-title {
    display: block;
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
    color: var(--tooltip-text, #f1f5f9);
    margin-bottom: 0.125rem;
}

/* Tooltip description */
.tooltip-description {
    font-size: var(--font-size-xs, 12px);
    line-height: 1.45;
    color: var(--tooltip-text, #f1f5f9);
    margin: 0;
}

/* Tooltip metadata (units, sign convention) */
.tooltip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--tooltip-border, #334155);
    font-size: var(--font-size-xs, 11px);
    color: var(--tooltip-muted, #94a3b8);
}

.tooltip-units,
.tooltip-sign {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.tooltip-units::before {
    content: '📏';
    font-size: 10px;
}

.tooltip-sign::before {
    content: '±';
    font-weight: 600;
    color: var(--tooltip-accent, #38bdf8);
}

/* Note/common misunderstanding */
.tooltip-note {
    font-size: var(--font-size-xs, 11px);
    line-height: 1.4;
    color: var(--tooltip-muted, #94a3b8);
    margin: 0.375rem 0 0 0;
    padding-top: 0.375rem;
    border-top: 1px solid var(--tooltip-border, #334155);
}

.tooltip-note em {
    color: var(--tooltip-accent, #38bdf8);
    font-style: normal;
    font-weight: 500;
}

/* Animation states */
.tooltip-portal--enhanced {
    opacity: 0;
    transform: translateY(4px);
}

.tooltip-portal--enhanced.tooltip-portal--above {
    transform: translateY(-4px);
}

.tooltip-portal--enhanced.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Table cell tooltip trigger - make cells focusable */
td[data-tooltip-id],
th[data-tooltip-id] {
    position: relative;
}

td[data-tooltip-id]:focus-visible,
th[data-tooltip-id]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 2px;
}

/* Custom select */
.custom-select {
    position: relative;
}
.custom-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    text-align: left;
    padding-right: 2rem;
}
.custom-select__trigger {
    min-height: 2.35rem;
}
.custom-select__chevron {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--text-muted);
    transform: rotate(0deg);
    transition: transform 0.15s ease;
    position: absolute;
    right: 0.6rem;
}
.custom-select.is-open .custom-select__chevron {
    transform: rotate(180deg);
}
.custom-select__menu {
    position: fixed;
    left: 0;
    right: auto;
    top: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.6rem;
    padding: 0.35rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    z-index: 100;
    display: none;
}
.custom-select--anchored .custom-select__menu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    min-width: 100%;
    z-index: 100;
}
.custom-select.is-open .custom-select__menu {
    display: block;
}
.custom-select__option {
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.6rem;
    border-radius: 0.45rem;
    font-size: var(--font-size-sm);
    color: var(--text-base);
    background: transparent;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}
.custom-select__option:hover,
.custom-select__option[aria-selected="true"] {
    background: #eef2ff;
    color: #1e293b;
}
.dark .custom-select__option:hover,
.dark .custom-select__option[aria-selected="true"] {
    background: #182235;
    color: #f8fafc;
}
.child-name {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.child-name__edit {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.child-name__edit .icon {
    width: 11px;
    height: 11px;
}
.child-name__input {
    display: none;
    width: 100%;
    border: 1px solid rgba(148,163,184,0.65);
    background: rgba(255,255,255,0.9);
    color: var(--text-base);
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
    font: inherit;
}
.dark .child-name__input {
    background: rgba(17,24,39,0.9);
    border-color: #334155;
}
.child-name.is-renaming .child-name__label,
.child-name.is-renaming .child-name__edit {
    display: none;
}
.child-name.is-renaming .child-name__input {
    display: block;
}

.property-name {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    position: relative;
}
.property-name__edit {
    position: absolute;
    top: -0.7rem;
    left: -0.7rem;
    width: 1.35rem;
    height: 1.35rem;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.6);
    background: rgba(255,255,255,0.95);
    box-shadow: 0 4px 10px rgba(15,23,42,0.08);
    z-index: 5;
    color: #475569;
}
/* Always show pencil when property is collapsed (like active tab) */
.property-card--collapsed .property-name__edit {
    display: inline-flex;
}
/* Hide pencil when in renaming mode */
.property-name.is-renaming .property-name__edit {
    display: none !important;
}
.property-name__edit .icon {
    width: 11px;
    height: 11px;
}
.dark .property-name__edit {
    border-color: #1f2937;
    background: rgba(17,24,39,0.9);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    color: #e2e8f0;
}
.property-name__input {
    display: none;
    width: 100%;
    border: 1px solid rgba(148,163,184,0.65);
    background: #fff;
    color: #1e293b;
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
    font: inherit;
    text-align: center;
}
.dark .property-name__input {
    background: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}
.property-name.is-renaming .property-name__label {
    display: none;
}
.property-name.is-renaming .property-name__input {
    display: block;
}

/* Stop rent toggle in property cards */
.prop-stop-rent-toggle,
.card.app-card .input-group label.prop-stop-rent-toggle,
.input-group label.prop-stop-rent-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0 !important;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
    font-weight: normal;
}
.prop-stop-rent-toggle__track {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 9999px;
    transition: background 0.2s ease;
}
.prop-stop-rent-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.prop-stop-rent-toggle .peer:checked ~ .prop-stop-rent-toggle__track {
    background: #10b981;
}
.prop-stop-rent-toggle .peer:checked ~ .prop-stop-rent-toggle__track::after {
    transform: translateX(16px);
}
.prop-stop-rent-toggle__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
}
.dark .prop-stop-rent-toggle__track {
    background: #475569;
}
.dark .prop-stop-rent-toggle .peer:checked ~ .prop-stop-rent-toggle__track {
    background: #10b981;
}

/* Rental toggle styling */
.rental-toggle__track {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 9999px;
    transition: background 0.2s ease;
}
.rental-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.peer:checked ~ .rental-toggle__track {
    background: #f59e0b;
}
.peer:checked ~ .rental-toggle__track::after {
    transform: translateX(16px);
}
.dark .rental-toggle__track {
    background: #475569;
}
.dark .peer:checked ~ .rental-toggle__track {
    background: #f59e0b;
}

/* Property card header layout */
.property-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.property-card--collapsed .property-card__header {
    margin-bottom: 0;
}
.property-card--collapsed {
    padding: 0.35rem 0.75rem;
}
.property-card--collapsed .property-card__left {
    gap: 0.35rem;
}
.property-card__left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}
.property-card__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* Property card field grids - custom column widths */
.property-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .property-grid-4 {
        grid-template-columns: 1.4fr 0.8fr 0.9fr 0.9fr;
    }
}
.property-flag-cell {
    display: flex;
    align-items: flex-end;
}
.property-card:not([data-type="buying"]) .prop-main-home-cell {
    grid-column: 1 / -1;
}
@media (min-width: 768px) {
    .property-card:not([data-type="buying"]) .prop-main-home-cell {
        grid-column: 3 / span 2;
    }
}

/* Property name */
.property-name {
    min-width: 0;
    flex-shrink: 0;
}
.property-name__label {
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
}

/* Property type toggle (pill container with pill buttons) */
.property-type-toggle {
    flex-shrink: 0;
    margin-top: 0.25rem;
}
.property-type-toggle {
    display: flex;
    justify-content: center;
    width: 100%;
}
.property-type-toggle__pills {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 0.2rem 0.3rem;
}
.dark .property-type-toggle__pills {
    background: rgba(51, 65, 85, 0.5);
    border-color: #334155;
}

/* Buyer type toggle (for buying mode) */
.buyer-type-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 0.2rem 0.3rem;
}
.dark .buyer-type-toggle {
    background: rgba(51, 65, 85, 0.5);
    border-color: #334155;
}
.buyer-type-toggle .pill-toggle {
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    box-shadow: none;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.7;
}
.buyer-type-toggle .pill-toggle:hover:not(.active) {
    opacity: 1;
    color: var(--text-primary, #334155);
    background: #f1f5f9;
    border-color: #94a3b8;
}
.buyer-type-toggle .pill-toggle.active {
    opacity: 1;
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}
.dark .buyer-type-toggle .pill-toggle {
    color: var(--text-muted, #94a3b8);
    border-color: #475569;
    background: transparent;
}
.dark .buyer-type-toggle .pill-toggle:hover:not(.active) {
    background: rgba(148, 163, 184, 0.2);
    border-color: #64748b;
    color: var(--text-secondary, #e2e8f0);
}
.dark .buyer-type-toggle .pill-toggle.active {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: #22c55e;
}

/* First-Time Buyer toggle button */
.first-time-buyer-btn {
    opacity: 0.5;
    border-color: #e2e8f0;
    background: transparent;
    color: #64748b;
    transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.first-time-buyer-btn,
.property-flag-cell .primary-residence-btn,
.property-flag-cell .scotland-flag-btn {
    height: 2.35rem;
    min-height: 2.35rem;
}
.first-time-buyer-btn:hover {
    opacity: 0.8;
    border-color: #94a3b8;
    background: rgba(34, 197, 94, 0.05);
}
.first-time-buyer-btn.active {
    opacity: 1;
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    color: #166534;
    font-weight: 600;
}
.dark .first-time-buyer-btn {
    border-color: #475569;
    color: #94a3b8;
}
.dark .first-time-buyer-btn:hover {
    border-color: #64748b;
    background: rgba(34, 197, 94, 0.1);
}
.dark .first-time-buyer-btn.active {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: #22c55e;
}

/* Scotland flag toggle button */
.scotland-flag-btn {
    opacity: 0.5;
    background: transparent;
    color: #64748b;
    transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.property-flag-cell .scotland-flag-btn {
    min-width: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    gap: 0.35rem;
}
.property-flag-cell .scotland-flag-btn .scotland-flag-icon {
    width: 1.1rem;
    height: 0.85rem;
}
.scotland-flag-btn:hover {
    opacity: 0.8;
    border-color: #94a3b8;
    background: rgba(0, 94, 184, 0.05);
}
.scotland-flag-btn.active {
    opacity: 1;
    border-color: #005EB8;
    background: rgba(0, 94, 184, 0.1);
}
.scotland-flag-btn.active span {
    color: #005EB8;
    font-weight: 600;
}
.scotland-flag-btn:active {
    transform: scale(0.98);
}
.dark .scotland-flag-btn {
    border-color: #475569;
    color: #94a3b8;
}
.dark .scotland-flag-btn:hover {
    border-color: #64748b;
    background: rgba(0, 94, 184, 0.1);
}
.dark .scotland-flag-btn.active {
    border-color: #005EB8;
    background: rgba(0, 94, 184, 0.2);
}
.dark .scotland-flag-btn.active span {
    color: #60a5fa;
}

/* Primary Residence toggle button */
.primary-residence-btn {
    opacity: 0.5;
    background: transparent;
    color: #64748b;
    transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
.primary-residence-btn:hover {
    opacity: 0.8;
    border-color: #94a3b8;
    background: rgba(34, 197, 94, 0.05);
}
.primary-residence-btn.active {
    opacity: 1;
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}
.primary-residence-btn.active svg {
    stroke: #22c55e;
}
.primary-residence-btn.active span {
    color: #166534;
    font-weight: 600;
}
.primary-residence-btn:active {
    transform: scale(0.98);
}
.dark .primary-residence-btn {
    border-color: #475569;
    color: #94a3b8;
}
.dark .primary-residence-btn:hover {
    border-color: #64748b;
    background: rgba(34, 197, 94, 0.1);
}
.dark .primary-residence-btn.active {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.2);
}
.dark .primary-residence-btn.active svg {
    stroke: #86efac;
}
.dark .primary-residence-btn.active span {
    color: #86efac;
}

/* ============================================================
   Jurisdiction Toggle (per-year in cashflow table)
   ============================================================ */
.jurisdiction-row td {
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
}
.jurisdiction-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 55px;
    justify-content: center;
}
.jurisdiction-toggle:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.jurisdiction-toggle.jurisdiction-scotland {
    background: rgba(0, 94, 184, 0.1);
    border-color: #005EB8;
}
.jurisdiction-toggle.jurisdiction-scotland:hover {
    background: rgba(0, 94, 184, 0.2);
}
.jurisdiction-toggle.jurisdiction-england {
    background: rgba(255, 255, 255, 1);
    border-color: #CF142B;
}
.jurisdiction-toggle.jurisdiction-england:hover {
    background: rgba(207, 20, 43, 0.05);
}
.jurisdiction-flag {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.jurisdiction-label {
    color: #475569;
}
.jurisdiction-toggle.jurisdiction-scotland .jurisdiction-label {
    color: #005EB8;
}
.jurisdiction-toggle.jurisdiction-england .jurisdiction-label {
    color: #CF142B;
}

/* Dark mode */
.dark .jurisdiction-toggle {
    background: #1e293b;
    border-color: #475569;
}
.dark .jurisdiction-toggle:hover {
    background: #334155;
}
.dark .jurisdiction-toggle.jurisdiction-scotland {
    background: rgba(0, 94, 184, 0.2);
    border-color: #005EB8;
}
.dark .jurisdiction-toggle.jurisdiction-england {
    background: rgba(207, 20, 43, 0.15);
    border-color: #CF142B;
}
.dark .jurisdiction-label {
    color: #94a3b8;
}
.dark .jurisdiction-toggle.jurisdiction-scotland .jurisdiction-label {
    color: #60a5fa;
}
.dark .jurisdiction-toggle.jurisdiction-england .jurisdiction-label {
    color: #fca5a5;
}

/* Year header cell layout for jurisdiction toggle in header */
.year-header-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    width: 100%;
}

.year-header-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.year-header-cell .year-label {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

.year-col-header.is-expanded {
    background: rgba(56, 189, 248, 0.08);
}

.dark .year-col-header.is-expanded {
    background: rgba(56, 189, 248, 0.12);
}

.year-col-header {
    min-width: 6.5rem;
}

/* Partial year indicator (asterisk) */
.partial-year-indicator {
    color: #f59e0b;
    font-weight: bold;
    font-size: 0.9rem;
    margin-left: 1px;
    cursor: help;
}

.dark .partial-year-indicator {
    color: #fbbf24;
}

/* Disable CSS tooltips for partial year indicator - uses portal tooltips instead */
.partial-year-indicator[data-tooltip]::before,
.partial-year-indicator[data-tooltip]::after {
    display: none;
}

/* Year 1 Breakdown Box */
.year1-breakdown-box {
    background: linear-gradient(to right, #f0fdf4, #ecfdf5);
    border: 1px solid #86efac;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.dark .year1-breakdown-box {
    background: linear-gradient(to right, #022c22, #042f2e);
    border-color: #065f46;
}

.year1-breakdown-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.year1-breakdown-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: #047857;
}

.dark .year1-breakdown-title {
    color: #34d399;
}

.year1-breakdown-subtitle {
    font-size: 0.75rem;
    font-weight: normal;
    color: #6b7280;
    padding: 0.125rem 0.5rem;
    background: rgba(0,0,0,0.05);
    border-radius: 1rem;
}

.dark .year1-breakdown-subtitle {
    background: rgba(255,255,255,0.1);
    color: #9ca3af;
}

.year1-breakdown-tables {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.year1-breakdown-app {
    flex: 1;
    min-width: 280px;
}

.year1-breakdown-header {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.dark .year1-breakdown-header {
    color: #9ca3af;
}

.year1-breakdown-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}

.year1-breakdown-table th,
.year1-breakdown-table td {
    padding: 0.25rem 0.5rem;
}

.year1-breakdown-table th {
    font-weight: 500;
    color: #6b7280;
    text-align: left;
    border-bottom: 1px solid #d1d5db;
}

.dark .year1-breakdown-table th {
    color: #9ca3af;
    border-bottom-color: #374151;
}

.year1-breakdown-table td {
    color: #374151;
}

.dark .year1-breakdown-table td {
    color: #d1d5db;
}

.year1-breakdown-table tr.border-t td {
    border-top: 1px solid #e5e7eb;
}

.dark .year1-breakdown-table tr.border-t td {
    border-top-color: #374151;
}

.year1-breakdown-note {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

.dark .year1-breakdown-note {
    color: #9ca3af;
}

.year1-breakdown-box.hidden {
    display: none;
}

/* Year 1 YTD/Remainder column styling */
/* Header styling - subtle period markers */
.y1-ytd-header,
.y1-remainder-header {
    background-color: rgba(148, 163, 184, 0.12) !important;
    border-left: 1px solid #e2e8f0 !important;
}
.dark .y1-ytd-header,
.dark .y1-remainder-header {
    background-color: rgba(148, 163, 184, 0.12) !important;
    border-left-color: #475569 !important;
}

/* Dashed border to the right of remainder column */
.y1-remainder-header {
    border-right: 2px dashed #94a3b8 !important;
}
.dark .y1-remainder-header {
    border-right-color: #64748b !important;
}

/* Hidden state for YTD/Remainder columns */
.y1-col-hidden {
    display: none !important;
}

/* Header controls: Year split and month expansion are intentionally distinct */
.y1-split-btn,
.y1-expand-btn,
.month-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.y1-split-btn,
.y1-expand-btn {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.35);
    color: #64748b;
}

.y1-split-btn:hover,
.y1-expand-btn:hover {
    background: rgba(148, 163, 184, 0.2);
    border-color: #64748b;
    color: #334155;
}

.month-expand-btn {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
    color: #047857;
}

.month-expand-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

.month-expand-btn.active {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #065f46;
}

.dark .y1-split-btn,
.dark .y1-expand-btn {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.45);
    color: #94a3b8;
}

.dark .y1-split-btn:hover,
.dark .y1-expand-btn:hover {
    background: rgba(148, 163, 184, 0.28);
    border-color: #94a3b8;
    color: #e2e8f0;
}

.dark .month-expand-btn {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.45);
    color: #34d399;
}

.dark .month-expand-btn:hover,
.dark .month-expand-btn.active {
    background: rgba(16, 185, 129, 0.3);
    border-color: #34d399;
    color: #6ee7b7;
}

/* Cell styling - background colors that override CF diagonal colors */
/* Values are right-aligned, headers use text-center class separately */
/* Both YTD and Remainder columns use same muted color */
.year1-ytd-cell,
.y1-ytd-cell,
.year1-rest-cell,
.y1-rest-cell,
.year1-remainder-cell,
.y1-remainder-cell {
    background-color: #f8fafc !important;
    text-align: right !important;
}

.dark .year1-ytd-cell,
.dark .y1-ytd-cell,
.dark .year1-rest-cell,
.dark .y1-rest-cell,
.dark .year1-remainder-cell,
.dark .y1-remainder-cell {
    background-color: #1e293b !important;
}

/* Dashed border to the right of remainder cells */
.year1-rest-cell,
.y1-rest-cell,
.year1-remainder-cell,
.y1-remainder-cell {
    border-right: 2px dashed #94a3b8 !important;
}
.dark .year1-rest-cell,
.dark .y1-rest-cell,
.dark .year1-remainder-cell,
.dark .y1-remainder-cell {
    border-right-color: #64748b !important;
}

/* Year 1 sub-headers in table */
.y1-subheader {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.3rem;
    border-radius: 0.25rem;
}

.y1-subheader-ytd {
    color: #64748b;
    background: #f1f5f9;
}

.dark .y1-subheader-ytd {
    color: #94a3b8;
    background: #334155;
}

.y1-subheader-rest {
    color: #047857;
    background: #d1fae5;
}

.dark .y1-subheader-rest {
    color: #34d399;
    background: rgba(16, 185, 129, 0.2);
}

.y1-subheader-full {
    color: #475569;
    background: #e2e8f0;
}

.dark .y1-subheader-full {
    color: #94a3b8;
    background: #475569;
}


.jurisdiction-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.7;
}

.jurisdiction-header-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.jurisdiction-header-btn.jurisdiction-override {
    opacity: 1;
    outline: 2px solid #f59e0b;
    outline-offset: 1px;
}

.dark .jurisdiction-header-btn {
    background: transparent;
}

.dark .jurisdiction-header-btn:hover {
    background: transparent;
}

.dark .jurisdiction-header-btn.jurisdiction-override {
    outline: 2px solid #f59e0b;
    outline-offset: 1px;
}

.property-type-toggle__pills .pill-toggle {
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    box-shadow: none;
    background: white;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.7;
}
.property-type-toggle__pills .pill-toggle:hover:not(.active) {
    opacity: 1;
    color: var(--text-primary, #334155);
    background: #f1f5f9;
    border-color: #94a3b8;
}
.property-type-toggle__pills .pill-toggle.active {
    opacity: 1;
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
    box-shadow: none;
}
.dark .property-type-toggle__pills .pill-toggle {
    color: var(--text-muted, #94a3b8);
    border-color: #475569;
    background: transparent;
}
.dark .property-type-toggle__pills .pill-toggle:hover:not(.active) {
    background: rgba(148, 163, 184, 0.2);
    border-color: #64748b;
    color: var(--text-secondary, #e2e8f0);
}
.dark .property-type-toggle__pills .pill-toggle.active {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: #22c55e;
    box-shadow: none;
}

/* Collapsed state: show only active toggle button inline with name */
.property-card--collapsed .property-card__left {
    gap: 0.5rem;
}
.property-card--collapsed .property-type-toggle {
    width: auto;
    justify-content: flex-start;
}
.property-card--collapsed .property-type-btn:not(.active) {
    display: none;
}
.property-card--collapsed .property-type-toggle__pills {
    background: transparent;
    border: none;
    padding: 0;
}
.property-card--collapsed .property-type-toggle__pills .pill-toggle.active {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
    box-shadow: none;
    pointer-events: none;
    cursor: default;
}
.property-card--collapsed .property-type-toggle__pills .pill-toggle.active:hover {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}
.dark .property-card--collapsed .property-type-toggle__pills .pill-toggle.active {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: #22c55e;
    pointer-events: none;
    cursor: default;
}
.dark .property-card--collapsed .property-type-toggle__pills .pill-toggle.active:hover {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: #22c55e;
}

/* Property name: show label and edit only when collapsed */
.property-card:not(.property-card--collapsed) .property-name__label {
    display: none;
}
.property-card:not(.property-card--collapsed) .property-name__edit {
    display: none;
}

/* Property name: ensure full visibility when collapsed */
.property-card--collapsed .property-name__label {
    max-width: none;
    overflow: visible;
}

/* Surcharge refund badge styling */
.prop-refund-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 0.25rem;
    cursor: help;
}
.dark .prop-refund-badge {
    background: rgba(52, 211, 153, 0.2);
}

/* Hide summary for paid off properties */
.property-card[data-type="owned"] .property-summary {
    display: none;
}

/* Renting property type - hide owner fields, show rental fields */
.property-card[data-type="renting"] .prop-owner-fields {
    display: none;
}
.property-card[data-type="renting"] .prop-renting-fields {
    display: block;
}
.property-card[data-type="renting"] .property-summary {
    display: none;
}
.property-card[data-type="renting"] .prop-add-buttons-row {
    display: none;
}

/* Non-renting property types - show owner fields, hide rental fields */
.property-card:not([data-type="renting"]) .prop-renting-fields {
    display: none;
}
.property-card:not([data-type="renting"]) .prop-owner-fields {
    display: block;
}

.property-card--collapsed .property-body {
    display: none;
}
.property-collapse svg {
    transition: transform 0.2s ease;
}
.property-card--collapsed .property-collapse svg {
    transform: rotate(-90deg);
}
.app-student .collapsible--open .collapsible__content {
    overflow: visible;
}

/* Ensure page scrollability */
html, body {
    overflow-x: clip;
    overflow-y: visible;
}
body#mainBody {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

body#mainBody {
    background: var(--app-bg);
    font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* App-only banner mask (keeps sticky table headers from showing through the banner gap). */
body#mainBody.app-page::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--banner-height) + var(--layout-padding));
    background: linear-gradient(
        180deg,
        rgba(248, 250, 252, 0.94) 0%,
        rgba(248, 250, 252, 0.66) 55%,
        rgba(248, 250, 252, 0.0) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 40;
    pointer-events: none;
}
.dark body#mainBody.app-page::before {
    background: linear-gradient(
        180deg,
        rgba(2, 6, 23, 0.9) 0%,
        rgba(2, 6, 23, 0.6) 55%,
        rgba(2, 6, 23, 0.0) 100%
    );
}
        
/* Additional layout helpers */
.input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}
.input-cell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 72px;
}
.input-cell label {
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.3;
}
.dark .input-cell label { color: var(--text-muted); }
.first-col { width: 220px; min-width: 220px; }
.pro-feature {
    position: relative;
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(var(--accent-rgb), 0.12));
    border-radius: 12px;
    padding: 0.4rem;
}
.pro-feature .input-field {
    background: rgba(255,255,255,0.7);
    border-color: rgba(250, 204, 21, 0.6);
    padding-right: 2rem;
}
.pro-feature .lock-icon {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: #a16207;
}
.badge {
    display:inline-flex; align-items:center; gap:0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.badge-blue { background: rgba(99,102,241,0.1); color: #4338ca; }
.badge-green { background: rgba(16,185,129,0.1); color: #0f766e; }
.badge-amber { background: rgba(251,191,36,0.18); color: #92400e; }
.table-card { height: 100%; display:flex; flex-direction:column; }
.table-card table { border-spacing: 0; }
.app-disabled { opacity: 0.55; filter: grayscale(0.2); }
.asset-grid {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
    gap: 0.5rem 0.5rem;
    align-items: center;
    margin-bottom: 0.25rem;
}
.asset-grid > * { margin: 0; }

/* Comfortable Input Groups */
.input-group label { 
    display: block; margin-bottom: 0.25rem;
    font-size: 0.75rem; font-weight: 600; line-height: 1.3;
    text-transform: none; letter-spacing: 0.02em; color: var(--text-muted);
}
.dark .input-group label { color: var(--text-muted); }

/* Input group styling for label spans */
.input-group:is(span) {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    line-height: 1.3;
}
.dark .input-group:is(span) {
    color: var(--text-muted);
}

/* Typography size utilities */
.text-9px { font-size: 0.6875rem; }
.text-10px { font-size: 0.6875rem; }
.text-11px { font-size: 0.75rem; }
.text-12px { font-size: 0.75rem; }
.text-13px { font-size: 0.8125rem; }

/* Micro label styling */
.micro-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}
.input-group .micro-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}
.dark .micro-label {
    color: #94a3b8;
}
.dark .input-group .micro-label {
    color: #94a3b8;
}
.rsu-head .micro-label {
    margin-bottom: 0;
}

/* Letter spacing utilities */
.tracking-wide { letter-spacing: 0.025em; }
.tracking-08em { letter-spacing: 0.08em; }

/* Grid template utilities */
.grid-cols-custom-schooling { grid-template-columns: auto 0.9fr 3.2rem 3.2rem 3.2rem; }
.grid-cols-custom-benefits { grid-template-columns: auto 1fr 0.8fr 0.8fr 1fr; }
.grid-cols-custom-asset { grid-template-columns: 1.7fr 0.9fr 0.4fr; }
.grid-cols-custom-earnings { grid-template-columns: auto 1fr auto; }
.grid-cols-custom-debt { grid-template-columns: auto repeat(4, minmax(0, 1fr)); }
.grid-cols-custom-expenses { grid-template-columns: auto 1fr 4rem; }
.grid-cols-custom-house { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Salary sacrifice grid head alignment */
.salary-sacrifice-head > .input-group {
    text-align: center;
}
.salary-sacrifice-head > .input-group.head-label {
    text-align: right;
    padding-right: 0.25rem;
}

/* Help/info boxes */
.help-box {
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid;
    font-size: 0.6875rem;
}

.help-box-amber {
    background-color: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}
.dark .help-box-amber {
    background-color: rgba(180, 83, 9, 0.3);
    border-color: #b45309;
    color: #fcd34d;
}

.help-box-slate {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--text-muted);
}
.dark .help-box-slate {
    background-color: rgba(15, 23, 42, 0.5);
    border-color: #334155;
}

/* Response area box */
.response-box {
    border: 1px solid;
    border-radius: 0.375rem;
    padding: 0.5rem;
    min-height: 110px;
    font-size: 0.8125rem;
    font-size: inherit;
    background-color: var(--response-bg);
    color: var(--response-text);
}

/* Month input styling */
.input-month {
    text-align: center;
    font-size: 0.75rem;
}

/* Button sizing utilities */
.btn-12px { font-size: 0.75rem; }
.btn-11px { font-size: 0.6875rem; }

/* Small label styling */
.label-9px {
    font-size: inherit;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dark .label-9px { color: #94a3b8; }

/* Badge styling */
.badge-ltv {
    font-weight: 700;
    color: white;
    background-color: #2563eb;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.5625rem;
}
.dark .badge-ltv {
    background-color: #3b82f6;
}

/* Asset grid sizing */
.asset-grid-text { font-size: 0.8125rem; }

/* Section highlight */
.rail-highlight { font-size: 0.6875rem; }

/* Purchase share display */
.purchase-share-display {
    font-size: 0.5625rem;
    font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;
    color: var(--text-muted);
}
.dark .purchase-share-display {
    color: #cbd5e1;
}

/* Informational text styles */
.info-text-11px {
    font-size: 0.6875rem;
    color: #64748b;
}
.dark .info-text-11px { color: #94a3b8; }

.info-text-10px {
    font-size: 0.625rem;
    color: #64748b;
}
.dark .info-text-10px { color: #94a3b8; }

/* Add child button */
.add-child-btn {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    background-color: #f1f5f9;
    color: #0f172a;
    padding: 0.25rem;
    border-radius: 0.375rem;
    width: 100%;
    font-size: inherit;
}
.add-child-btn:hover {
    background-color: #e2e8f0;
}
.dark .add-child-btn {
    background-color: var(--card-dark);
    color: var(--text-base);
}
.dark .add-child-btn:hover {
    background-color: #334155;
}

/* Flex/spacing utilities */
.flex-gap-3 { gap: 0.75rem; }
.flex-gap-2 { gap: 0.5rem; }
.flex-gap-1 { gap: 0.25rem; }

/* Common flex wrappers */
.flex-wrap-center { display: flex; align-items: center; flex-wrap: wrap; }

/* Grid spacing */
.gap-2-custom { gap: 0.5rem; }
.gap-1-custom { gap: 0.25rem; }
.grid-gap-tight { column-gap: 0.5rem; row-gap: 0.375rem; }

/* Fixed heights */
.h-chart-card { height: 520px; }

/* Grid input alignment helpers */
.grid-input { width: 100%; text-align: right; }
.grid-input-compact { padding-left: 0.35rem; padding-right: 0.35rem; }

/* Ghost Input Styling */
.input-field { 
    width: 100%; padding: 0.5rem 0.75rem; border-width: 1px; border-color: var(--input-border); border-radius: 0.5rem; 
    font-size: 0.875rem; line-height: 1.4; transition: all 0.15s ease;
    background-color: var(--input-bg); color: var(--input-text);
    box-shadow: none;
}
.nav-icon-btn {
    min-height: 2.35rem;
    height: 2.35rem;
    padding: 0;
}
.input-field:hover, .input-field:focus {
    background-color: #ffffff;
    border-color: var(--accent);
}
.dark .input-field:hover, .dark .input-field:focus {
    background-color: var(--input-bg);
    border-color: var(--accent);
}

/* Month input display overlay (MMM-YY) */
.month-input-wrap { position: relative; }
.month-input { color: transparent; caret-color: transparent; }
.month-input::-webkit-datetime-edit,
.month-input::-webkit-datetime-edit-fields-wrapper,
.month-input::-webkit-datetime-edit-text,
.month-input::-webkit-datetime-edit-month-field,
.month-input::-webkit-datetime-edit-year-field {
    color: transparent;
    -webkit-text-fill-color: transparent;
    opacity: 0;
}
.month-input-wrap .month-display {
    position: absolute;
    left: 0;
    right: 2rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--input-text);
    font-size: inherit;
    font-weight: var(--font-weight-medium);
    padding-left: 0.5rem;
}
.month-input-wrap .month-display.month-display--placeholder { color: var(--text-muted); }

/* -------------------------------------------------------------------------
   CUSTOM DATE INPUT STYLING
   Modern date picker with custom overlay display
   ------------------------------------------------------------------------- */
.date-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.date-input-wrap .date-input {
    color: transparent;
    caret-color: transparent;
    cursor: pointer;
    text-shadow: 0 0 0 transparent;
    -webkit-text-fill-color: transparent;
}

.dark .date-input-wrap .date-input,
.dark .card.app-card .date-input-wrap .date-input {
    color: transparent;
    caret-color: transparent;
    text-shadow: 0 0 0 transparent;
    -webkit-text-fill-color: transparent;
}

/* Hide native date text but keep picker functional */
.date-input-wrap .date-input::-webkit-datetime-edit,
.date-input-wrap .date-input::-webkit-datetime-edit-fields-wrapper,
.date-input-wrap .date-input::-webkit-datetime-edit-text,
.date-input-wrap .date-input::-webkit-datetime-edit-day-field,
.date-input-wrap .date-input::-webkit-datetime-edit-month-field,
.date-input-wrap .date-input::-webkit-datetime-edit-year-field {
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Custom calendar icon */
.date-input-wrap .date-input::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Custom display overlay */
.date-input-wrap .date-display {
    position: absolute;
    left: 0.5rem;
    right: 2rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--input-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.date-input-wrap .date-display.date-display--placeholder {
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

/* Calendar icon on right */
.date-input-wrap .date-icon {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.15s ease;
}

.date-input-wrap:hover .date-icon,
.date-input-wrap:focus-within .date-icon {
    color: var(--accent);
}

/* Required date field validation styling */
.date-input-wrap .date-input[data-required="true"]:invalid,
.date-input-wrap .date-input[data-required="true"][value=""] {
    border-color: var(--error, #ef4444);
}

.date-input-wrap .date-input[data-required="true"]:invalid + .date-display,
.date-input-wrap:has(.date-input[data-required="true"][value=""]) .date-display.date-display--placeholder {
    color: var(--error, #ef4444);
}

/* Dark mode adjustments */
.dark .date-input-wrap .date-display {
    color: var(--input-text);
}

.dark .date-input-wrap .date-display.date-display--placeholder {
    color: var(--text-muted);
}

/* -------------------------------------------------------------------------
   CUSTOM DATE PICKER POPUP
   Modern calendar UI matching app design system
   ------------------------------------------------------------------------- */
.date-picker-popup {
    position: fixed;
    z-index: 9999;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15), 0 8px 16px rgba(15, 23, 42, 0.1);
    padding: 1rem;
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.date-picker-popup.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dark .date-picker-popup {
    background: var(--card-dark);
    border-color: var(--border-dark);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* Header with month/year nav */
.date-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--divider-soft);
}

.dark .date-picker-header {
    border-bottom-color: var(--border-dark);
}

.date-picker-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease;
}

.date-picker-title:hover {
    background-color: var(--section-hover-bg);
}

.dark .date-picker-title {
    color: #f1f5f9;
}

.dark .date-picker-title:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.date-picker-nav {
    display: flex;
    gap: 0.25rem;
}

.date-picker-nav-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.date-picker-nav-btn:hover {
    background-color: var(--section-hover-bg);
    color: var(--accent);
}

.dark .date-picker-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--accent-2);
}

.date-picker-nav-btn svg {
    width: 16px;
    height: 16px;
}

/* Weekday headers */
.date-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 0.5rem;
}

.date-picker-weekday {
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    padding: 0.375rem 0;
}

/* Calendar grid */
.date-picker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.date-picker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-base);
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.date-picker-day:hover:not(.disabled):not(.selected) {
    background-color: var(--section-hover-bg);
    color: var(--accent);
}

.dark .date-picker-day {
    color: #e2e8f0;
}

.dark .date-picker-day:hover:not(.disabled):not(.selected) {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--accent-2);
}

.date-picker-day.other-month {
    color: var(--text-subtle);
    opacity: 0.5;
}

.date-picker-day.today {
    color: var(--accent);
    font-weight: var(--font-weight-bold);
}

.date-picker-day.today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
}

.date-picker-day.selected {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: white;
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
}

.date-picker-day.selected::after {
    display: none;
}

.date-picker-day.disabled {
    color: var(--text-subtle);
    opacity: 0.3;
    cursor: not-allowed;
}

/* Month/Year selection view */
.date-picker-months,
.date-picker-years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.date-picker-month-btn,
.date-picker-year-btn {
    padding: 0.75rem 0.5rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-base);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.date-picker-month-btn:hover,
.date-picker-year-btn:hover {
    background-color: var(--section-hover-bg);
    border-color: var(--border);
}

.dark .date-picker-month-btn,
.dark .date-picker-year-btn {
    color: #e2e8f0;
}

.dark .date-picker-month-btn:hover,
.dark .date-picker-year-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--border-dark);
}

.date-picker-month-btn.selected,
.date-picker-year-btn.selected {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: white;
    border-color: transparent;
}

/* Footer with quick actions */
.date-picker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--divider-soft);
}

.dark .date-picker-footer {
    border-top-color: var(--border-dark);
}

.date-picker-clear,
.date-picker-today {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.date-picker-clear {
    background: transparent;
    color: var(--text-muted);
}

.date-picker-clear:hover {
    background-color: var(--error-light);
    color: var(--error);
}

.date-picker-today {
    background: var(--accent);
    color: white;
}

.date-picker-today:hover {
    background: var(--accent-2);
}

/* -------------------------------------------------------------------------
   DEDUCTION CARD GRID
   Custom column widths: wider dates, narrower inflation
   ------------------------------------------------------------------------- */
.deduction-grid {
    grid-template-columns: 1.2fr 0.6fr 1.1fr 1.1fr !important;
}

.deduction-infl-col .input-field {
    min-width: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.deduction-date-col .date-input-wrap {
    width: 100%;
}

.deduction-date-col .date-input {
    min-width: 0;
}

.deduction-date-col .date-display {
    font-size: var(--font-size-xs);
    left: 0.35rem;
    right: 1.5rem;
}

.deduction-date-col .date-icon {
    width: 12px;
    height: 12px;
    right: 0.35rem;
}

.input-group {
    border-bottom: none;
    transition: border-color 0.2s ease;
    padding-bottom: 0;
}
.dark .input-group { border-bottom-color: transparent; }

.input-group:focus-within {
    border-bottom-color: var(--accent);
}

input.input-field,
textarea.input-field { text-align: right; }
select.input-field { text-align: left; }
input.input-field.text-left, .input-field.text-left { text-align: left; }
input.input-field.text-left.percent-input, .input-field.text-left.percent-input { text-align: left !important; }
input.input-field.text-center, .input-field.text-center { text-align: center; }
input.input-field[type=password] { text-align: left; }
.percent-input {
    padding-right: 1.6rem !important;
    text-align: right !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Ctext x='0' y='11' font-family='Inter, Arial, sans-serif' font-size='12' fill='%23748b9c'%3E%25%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
    background-size: 10px 12px;
}
.percent-input::-webkit-outer-spin-button,
.percent-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.percent-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.dark .percent-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Ctext x='0' y='11' font-family='Inter, Arial, sans-serif' font-size='12' fill='%2394a3b8'%3E%25%3C/text%3E%3C/svg%3E");
}

/* GBP prefix for currency entry fields */
.currency-input {
    padding-left: 1.85rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Ctext x='0' y='11' font-family='Inter, Arial, sans-serif' font-size='12' fill='%23748b9c'%3E%C2%A3%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.55rem center;
    background-size: 10px 12px;
}
.currency-input.grid-input-compact {
    padding-left: 1.65rem;
}
.dark .currency-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14'%3E%3Ctext x='0' y='11' font-family='Inter, Arial, sans-serif' font-size='12' fill='%2394a3b8'%3E%C2%A3%3C/text%3E%3C/svg%3E");
}

/* Unit overlay (robust fallback: real text inside the field) */
.unit-field {
    position: relative;
    display: block;
    width: 100%;
}
.unit-field > .input-field {
    /* Reserve space so right-aligned values don't collide with the unit glyph */
    padding-right: 2.4rem;
    position: relative;
    z-index: 1;
}
.unit-field > .input-field.grid-input-compact {
    padding-right: 2.1rem;
}
.unit-field.unit-left > .input-field {
    padding-left: 1.85rem;
    padding-right: 0.55rem;
}
.unit-field.unit-left > .input-field.grid-input-compact {
    padding-left: 1.65rem;
}
.unit-field .input-unit {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
    color: #748b9c;
    z-index: 2;
}
.unit-field.unit-left .input-unit {
    left: 0.55rem;
    right: auto;
}
.unit-field.unit-left .input-unit {
    left: 0.55rem;
    right: auto;
}
.dark .unit-field .input-unit {
    color: #94a3b8;
}
.unit-field > .percent-input {
    background-image: none;
}

/* Grid layout classes for consistent card structure */
.grid-layout-earnings {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem 0.75rem;
    align-items: center;
}

/* Grid label alignment variants: control text alignment per column */
.input-group.grid-head-earnings,
.input-group.grid-head-debt,
.input-group.grid-head-expenses {
    font-size: inherit;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    line-height: 1.2;
}

.input-group.grid-head-earnings span:nth-child(1) {
    text-align: left;
}
.input-group.grid-head-earnings span:nth-child(2),
.input-group.grid-head-earnings span:nth-child(3) {
    text-align: left;
}

.input-group.grid-head-debt span:nth-child(1) {
    text-align: left;
}
.input-group.grid-head-debt span:nth-child(n+2) {
    text-align: center;
}

.input-group.grid-head-expenses span:nth-child(1) {
    text-align: left;
}
.input-group.grid-head-expenses span:nth-child(2),
.input-group.grid-head-expenses span:nth-child(3) {
    text-align: left;
}


/* Card grid body class for consistent styling without specificity conflicts */
.card-grid-body {
    color: var(--text-base);
}
.dark .card-grid-body {
    color: var(--text-base);
}
.input-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); }
.dark .input-field:focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); }
.input-field:disabled { opacity: 0.7; cursor: not-allowed; background-color: var(--input-disabled-bg); }
.input-field.input-error { border-color: #ef4444 !important; }
.input-field.input-error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.dark .input-field.input-error:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }
.input-field.readonly-display { background-color: #f8fafc; border-color: #cbd5e1; color: #475569; font-weight: 600; }
.dark .input-field.readonly-display { background-color: #0f172a; border-color: #334155; color: #94a3b8; }
.form-narrow { max-width: 720px; width: 100%; }
.input-row .input-group input[type=number],
.input-row-two .input-group input[type=number] { max-width: 7rem; }
.earnings-row .input-group input[type=number],
.earnings-row .input-group input[type=text] { max-width: none; }

/* Card helpers - legacy classes updated to use design tokens */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}
.dark .card {
    background: #0b1220;
    background-image: none;
    border-color: var(--card-border);
    box-shadow: var(--card-shadow);
}
.card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.card-tight { padding: var(--card-padding-tight); }
.card-loose { padding: var(--card-padding-loose); }
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--card-header-gap);
    padding-bottom: var(--card-header-padding-bottom);
    margin-bottom: var(--card-header-margin-bottom);
    border-bottom: 1px solid var(--divider-soft);
}
.dark .card-header { border-color: var(--divider-soft); }

/* Compact card header variant - no bottom margin, reduced padding */
.card-header-compact {
    margin-bottom: 0;
    padding-bottom: var(--space-2);
}

/* Card title - unified styling for all cards */
.card-header h2,
.card-header .card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-base);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.app-card-header { background: var(--card-bg); }
.dark .app-card-header { background: var(--card-bg); }

/* High Earner card header: vertical stack with controlled spacing */
.app-card-header {
    --card-header-gap: 0;
    --card-header-padding-bottom: 0;
    --card-header-margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* Badge at top of card header - left aligned */
.app-card-badge {
    align-self: flex-start;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7c3aed;
    background: rgba(139, 92, 246, 0.1);
    padding: 0.125rem 0.5rem;
    border-radius: var(--toggle-radius-pill);
}

.dark .app-card-badge {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.2);
}

/* Blue variant for Shared badge */
.app-card-badge--blue {
    color: #2563eb;
    background: rgba(59, 130, 246, 0.1);
}

.dark .app-card-badge--blue {
    color: #93c5fd;
    background: rgba(59, 130, 246, 0.2);
}

/* Shared card header - match spacing with individuals card */
.app-card-header--shared {
    gap: 0;
    margin-bottom: 0.75rem;
}
.app-card .card-header.app-card-header--shared {
    margin-bottom: 0.75rem;
}

/* High Earner header row - centers the applicant toggle */
.app-card-toprow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
}

.app-card-toprow .applicant-tab-bar {
    padding: 0;
}

/* Household controls - appears below applicant tabs when 2 earners */
.app-household-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: 0;
}

@media (min-width: 768px) {
    .mortgage-inputs-primary.grid {
        grid-template-columns: minmax(0, 1.9fr) minmax(5.5rem, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
    }
    .mortgage-inputs-secondary.grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(5.5rem, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
    }
    .mortgage-inputs-tertiary.grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(5.5rem, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Subsection wrapper */
.section {
    border: 1px solid var(--section-border);
    border-radius: 0.5rem;
    padding: 0.75rem;
    background: var(--section-bg);
}
.dark .section { background: var(--section-bg); }
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border-top: 0;
    padding-top: 0.35rem;
    margin-top: 0;
}

/* When section headers are <button>, reset native button styles */
button.section-header,
button.subsection-header {
    appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
}
button.subsection-header { padding: 0; }

button.section-header:focus,
button.subsection-header:focus { outline: none; }
button.section-header:focus-visible,
button.subsection-header:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
    border-radius: 0.55rem;
}
.dark button.section-header:focus-visible,
.dark button.subsection-header:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}
.dark .section-header { border-color: var(--border-dark); }
.card > .section-header:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.section-header:hover {
    background-color: #f4f7fd;
    border-radius: 0.5rem;
    border-color: transparent;
}
.dark .section-header:hover {
    background-color: #111a2b;
    border-radius: 0.5rem;
    border-color: transparent;
}
.section-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text-base);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dark .section-title { color: var(--text-base); }
.section-body { padding-top: 0.5rem; }
.section-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--divider-soft);
    padding-top: 1rem;
    margin-top: 1rem;
    box-sizing: border-box;
}
.dark .section-block { border-color: var(--divider-soft); }
.section-block:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

/* ==========================================================================
   COLLAPSIBLE COMPONENT SYSTEM
   Modular, BEM-style classes for consistent collapsible sections
   ========================================================================== */

/* Container - wraps the header and content */
.collapsible {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--divider-soft);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
}
.collapsible:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
.dark .collapsible {
    border-color: var(--divider-soft);
}

/* Header - the clickable toggle button */
.collapsible__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    margin: 0;
    
    /* Reset button styles */
    appearance: none;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    user-select: none;
    
    /* Transitions */
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}

.collapsible__header:hover {
    background-color: var(--section-hover-bg);
}
.dark .collapsible__header:hover {
    background-color: rgba(30, 41, 59, 0.5);
}

.collapsible__header:focus {
    outline: none;
}
.collapsible__header:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent);
    border-radius: 0.5rem;
}

/* Left side container for icon + title */
.collapsible__left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0; /* Allow text truncation */
}

/* Right side container for badges + chevron */
.collapsible__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Leading icon */
.collapsible__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: #94a3b8;
    transition: color 0.15s ease;
}
.collapsible__header:hover .collapsible__icon {
    color: #64748b;
}
.dark .collapsible__icon {
    color: #64748b;
}
.dark .collapsible__header:hover .collapsible__icon {
    color: #94a3b8;
}

/* Title text */
.collapsible__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--text-base);
    letter-spacing: var(--tracking-wide);
    line-height: var(--line-height-tight);
}

/* Subtitle/description (optional) */
.collapsible__subtitle {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Badge/chip (e.g., "Household") */
.collapsible__badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    padding: var(--space-1) var(--space-2);
    border-radius: 9999px;
    background: rgba(var(--accent-rgb), 0.10);
    color: var(--accent);
}
.dark .collapsible__badge {
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--emerald-400);
}

/* Chevron indicator */
.collapsible__chevron {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.15s ease;
}
.collapsible__header:hover .collapsible__chevron {
    color: #64748b;
}
.dark .collapsible__chevron {
    color: #64748b;
}
.dark .collapsible__header:hover .collapsible__chevron {
    color: #94a3b8;
}

/* Chevron rotation states */
.collapsible--closed .collapsible__chevron {
    transform: rotate(-90deg);
}
.collapsible--open .collapsible__chevron {
    transform: rotate(0deg);
}

/* Card header summary - always visible */
.collapsible__summary {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    pointer-events: auto;
}

/* Summary pill container */
.collapsible__summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* Default pill style */
.collapsible__summary-pill--default {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.12) 0%, rgba(71, 85, 105, 0.08) 100%);
    color: var(--text-muted);
    border: 1px solid rgba(100, 116, 139, 0.2);
}
.dark .collapsible__summary-pill--default {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.2) 0%, rgba(71, 85, 105, 0.15) 100%);
    border-color: rgba(100, 116, 139, 0.3);
}

/* Emerald/green pill (for positive values like earnings, assets) */
.collapsible__summary-pill--emerald {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.dark .collapsible__summary-pill--emerald {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.15) 100%);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.35);
}

/* Blue pill (for pension, investments) */
.collapsible__summary-pill--blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.08) 100%);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}
.dark .collapsible__summary-pill--blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.35);
}

/* Amber pill (for warnings, debt) */
.collapsible__summary-pill--amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.08) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.dark .collapsible__summary-pill--amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.35);
}

/* Rose/red pill (for negative values, debt) */
.collapsible__summary-pill--rose {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.12) 0%, rgba(225, 29, 72, 0.08) 100%);
    color: #e11d48;
    border: 1px solid rgba(244, 63, 94, 0.25);
}
.dark .collapsible__summary-pill--rose {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.2) 0%, rgba(225, 29, 72, 0.15) 100%);
    color: #fb7185;
    border-color: rgba(244, 63, 94, 0.35);
}

/* Purple pill (for children, special categories) */
.collapsible__summary-pill--purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
    color: #7c3aed;
    border: 1px solid rgba(168, 85, 247, 0.25);
}
.dark .collapsible__summary-pill--purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #c084fc;
    border-color: rgba(168, 85, 247, 0.35);
}

.collapsible__summary-value {
    font-weight: var(--font-weight-semibold);
}
.collapsible__summary-label {
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.collapsible__summary-pill[data-tooltip] {
    pointer-events: auto;
    cursor: help;
}
.collapsible__summary-divider {
    width: 1px;
    height: 10px;
    background: currentColor;
    opacity: 0.3;
}

/* Content area */
.collapsible__content {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease;
    padding: 0 var(--space-3);
}

.collapsible--open .collapsible__content {
    max-height: 2000px;
    opacity: 1;
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
}

.collapsible--closed .collapsible__content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Section hint/description inside content */
.collapsible__hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    line-height: var(--line-height-normal);
}

/* --------------------------------------------------------------------------
   COLLAPSIBLE CONTENT TYPOGRAPHY
   Standardized font styles for content within collapsible sections
   Using design system tokens for consistency
   -------------------------------------------------------------------------- */

/* Column/grid header labels */
.col-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-subtle);
    letter-spacing: var(--tracking-wide);
    line-height: var(--line-height-tight);
}
.dark .col-label { color: var(--text-subtle); }
.col-label--accent { color: var(--success); }
.dark .col-label--accent { color: #34d399; }
.col-label--danger { color: var(--error); }
.dark .col-label--danger { color: #fb7185; }

/* Row labels (first column text) */
.row-label {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    line-height: var(--line-height-normal);
    text-align: left;
}
.dark .row-label { color: var(--text-muted); }

/* ==========================================================================
   Input Frequency Badges (monthly/annual indicators)
   ========================================================================== */
.input-freq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    margin-right: 0.25rem;
    vertical-align: middle;
    line-height: 1;
}
.input-freq-badge--monthly {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.input-freq-badge--annual {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.dark .input-freq-badge--monthly {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}
.dark .input-freq-badge--annual {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: help;
}
.tooltip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.tooltip__bubble {
    position: absolute;
    left: 0;
    top: calc(100% + 0.35rem);
    min-width: 260px;
    max-width: 320px;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-base);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;
}
.tooltip:hover .tooltip__bubble,
.tooltip:focus-visible .tooltip__bubble {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Sub-section headings within collapsibles */
.section-subhead {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-wide);
}
.dark .section-subhead { color: var(--text-primary); }

/* Helper/info text within sections */
.section-hint {
    font-size: var(--font-size-sm);
    color: var(--text-subtle);
    line-height: var(--line-height-normal);
}
.dark .section-hint { color: var(--text-subtle); }

/* Value display text (read-only computed values) */
.value-display {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    color: var(--text-primary);
}
.dark .value-display { color: var(--text-primary); }
.value-display--muted { color: var(--text-subtle); }
.dark .value-display--muted { color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   COLLAPSIBLE VARIANTS
   -------------------------------------------------------------------------- */

/* Card-style collapsible (used for main sections like Earnings, Pension) */
.collapsible--card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    padding: 0;
    margin: var(--space-1) 0;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow-elevated);
    overflow: visible;
    border-top: 1px solid var(--card-border);
}
.collapsible--allow-overflow {
    overflow: visible;
}
.collapsible--allow-overflow .collapsible__content {
    overflow: visible;
}
.dark .collapsible--card {
    background: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: var(--card-shadow-elevated);
}

.collapsible--card .collapsible__header {
    padding: var(--space-2) var(--space-3);
    border-radius: 0;
}
.collapsible--card.collapsible--closed .collapsible__header {
    border-radius: var(--card-radius);
}
.collapsible--card.collapsible--open .collapsible__header {
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.collapsible--card .collapsible__content {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}
.collapsible--card.collapsible--open .collapsible__content {
    padding-top: 0;
}

/* Inline/nested collapsible (for subsections like RSU, Salary Sacrifice) */
.collapsible--inline {
    border: 0;
    padding-top: var(--space-3);
    margin-top: 0;
}
.collapsible--inline + .collapsible--inline {
    padding-top: var(--space-1);
    margin-top: -0.25rem;
}
.collapsible--inline:first-of-type {
    padding-top: 0;
}

.collapsible--inline .collapsible__header {
    padding: 0.25rem 0.35rem;
    background: transparent;
    border-radius: 0.55rem;
    border: 0;
    margin-left: calc(var(--space-3) * -1);
    margin-right: 0;
    width: calc(100% + (var(--space-3) * 2));
    padding-left: var(--space-3);
    padding-right: var(--space-3);
}
.collapsible--inline .collapsible__header:hover {
    background: rgba(241, 245, 249, 0.55);
}
.dark .collapsible--inline .collapsible__header {
    background: transparent;
    border-color: transparent;
}
.dark .collapsible--inline .collapsible__header:hover {
    background: rgba(30, 41, 59, 0.55);
}
.collapsible--inline.collapsible--closed .collapsible__header {
    background: rgba(248, 250, 252, 0.7);
    border-color: transparent;
}
.collapsible--inline.collapsible--closed .collapsible__header:hover {
    background: rgba(241, 245, 249, 0.9);
}
.dark .collapsible--inline.collapsible--closed .collapsible__header {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(100, 116, 139, 0.55);
}
.dark .collapsible--inline.collapsible--closed .collapsible__header:hover {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(148, 163, 184, 0.6);
}

.collapsible--inline .collapsible__title {
    font-size: 0.875rem;
    font-weight: 600;
}
.collapsible--inline .collapsible__content {
    padding-left: 0;
    padding-right: 0;
}
.collapsible--inline.collapsible--open .collapsible__content {
    padding-top: 0.35rem;
    padding-bottom: 0;
}

/* Compact variant (tighter spacing) */
.collapsible--compact .collapsible__header {
    padding: var(--space-1) var(--space-2);
}
.collapsible--compact .collapsible__title {
    font-size: 0.8125rem;
}
.collapsible--compact .collapsible__icon {
    width: 0.875rem;
    height: 0.875rem;
}
.collapsible--compact .collapsible__chevron {
    width: 0.75rem;
    height: 0.75rem;
}

/* --------------------------------------------------------------------------
   BACKWARDS COMPATIBILITY
   Maps old classes to maintain existing functionality during migration
   -------------------------------------------------------------------------- */

/* End Collapsible Component System */

/* High Earner cards: normalize section spacing */
/* High Earner form layout refresh */
.app-section-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.app-section-body > :first-child {
    padding-top: 0.6rem;
}
.section-subhead {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-base);
}
.app-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.55rem;
    align-items: stretch;
}
.app-form-grid.columns-2 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.app-form-grid.columns-3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.app-form-grid.tight { gap: 0.4rem; }
.app-form-grid.earnings-dual { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.earnings-table-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.85fr;
    gap: 0.5rem 0.75rem;
    align-items: center;
}
.earnings-table-grid.grid-head {
    gap: 0.35rem 0.75rem;
    padding: 0.1rem 0.15rem 0.25rem;
    border: 0;
}
.earnings-table-grid .label-cell {
    text-align: left;
    white-space: normal;
    line-height: 1.35;
}
.earnings-table-grid .cell-ghost { height: 1px; }
.app-field-card {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    box-shadow: none;
}
.dark .app-field-card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.app-field-card .input-group { margin: 0; }
.app-field-card .input-group label {
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--text-base);
}
.app-field-note {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.app-subcard {
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-shadow: none;
}
.dark .app-subcard { box-shadow: none; }
.app-subcard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}
.app-subcard-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-base);
}
.app-subcard-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}
.app-subcard.app-tip {
    border-style: solid;
    background: rgba(254,243,199,0.4);
    border-color: #fcd34d;
    color: #92400e;
    padding: 0.5rem;
    border-radius: 0.5rem;
}
.dark .app-subcard.app-tip {
    background: rgba(180, 83, 9, 0.26);
    border-color: #b45309;
    color: #fcd34d;
}
.app-table-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0.5rem 0;
    box-shadow: none;
}
.dark .app-table-card { box-shadow: none; }
.app-table-card::before { content: none; }
.app-table-card > * { position: relative; z-index: 1; }
.app-table-card .grid {
    column-gap: 0.55rem;
    row-gap: 0.35rem;
}

.app-table-card .grid-head,
.app-table-card .earnings-table-grid.grid-head {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 0 0.2rem;
    box-shadow: none;
}
.app-table-card .grid-head .input-group,
.app-table-card .grid-head span {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
}
.app-table-card .grid-head .head-label { text-align: right; }
.app-table-card .grid-head .input-group.head-label { justify-self: end; }

.app-table-card .earnings-table-grid:not(.grid-head),
.app-table-card .grid:not(.grid-head),
.app-table-card .asset-grid {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    row-gap: 0.6rem;
    column-gap: 0.55rem;
}
.app-table-card .label-cell {
    font-weight: 600;
    color: var(--text-muted);
    text-align: right;
}
.dark .app-table-card .label-cell { color: #cbd5e1; }
.app-table-card .input-field {
    min-height: 2.35rem;
    font-weight: 600;
    box-shadow: none;
}

/* High Earner card minimal refresh */
.card.app-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow-elevated);
}
.dark .card.app-card {
    background: #0b1220;
    background-image: none;
    box-shadow: var(--card-shadow-elevated);
}
.app-card .app-section-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.app-card .app-section-body > * {
    padding-bottom: 0.25rem;
}
.app-card .app-section-body > *:not(:last-child) {
    border-bottom: 0;
}
.app-card .app-section-body > * + * {
    padding-top: 0.25rem;
}
.app-card .card-header {
    border-color: rgba(148,163,184,0.35);
    padding-bottom: 0;
    margin-bottom: 0;
}
.app-card .section {
    background: transparent;
    border-color: rgba(148,163,184,0.35);
    box-shadow: none;
}
.app-card .section-header {
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    background: inherit;
    border: 0;
}
.app-card .section-header:hover {
    background: var(--section-hover-bg);
}
.app-card .section-header.is-open,
.app-card .subsection-header.is-open {
    background: inherit;
    padding: 0.5rem 0.75rem;
}
.app-card .section-title {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
    font-weight: 800;
}
.app-card .section-block {
    background: #ffffff;
    border-radius: 0.85rem;
    padding: 0;
    margin: 0.125rem 0;
    border: 1px solid rgba(213, 226, 244, 0.9);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

#colApp1,
#colApp2 {
    padding-top: var(--space-2);
    padding-bottom: 0.125rem;
}

.dark .app-card .section-block {
    background: #0f1829;
    border-color: #1f2a44;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
}
.app-card .section-hint { color: var(--text-muted); }

.app-card .collapsible-content {
    padding: 0.35rem 0.45rem 0.45rem;
    margin-top: 0;
}
.app-card .collapsible-content.is-collapsed {
    margin-top: 0 !important;
}

.app-card .app-pension .collapsible-content {
    padding: 0.35rem 0.45rem 0.45rem;
}

.app-card .app-subcard {
    background: var(--card-bg);
    border: 0;
    border-radius: 0.6rem;
    box-shadow: none;
    padding: 0.55rem 0.6rem;
}
.dark .app-card .app-subcard { box-shadow: none; }
.app-card .app-subcard-head { align-items: center; }
.app-card .app-subcard-title { font-size: 0.95rem; }
.app-card .app-subcard-sub { color: var(--text-muted); }
.app-card .app-subcard.app-tip {
    background: rgba(254,243,199,0.6);
    border-color: #fcd34d;
}
.dark .app-card .app-subcard.app-tip {
    background: rgba(180,83,9,0.2);
}
.app-card .app-field-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
.dark .app-card .app-field-card { box-shadow: none; }

.app-card .app-table-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0.2rem 0;
    border-radius: 0;
}
.dark .app-card .app-table-card { box-shadow: none; }
.app-card .app-table-card .grid-head,
.app-card .app-table-card .earnings-table-grid.grid-head {
    background: rgba(148,163,184,0.12);
    border: 1px solid rgba(148,163,184,0.35);
    box-shadow: none;
    padding: 0.25rem 0.35rem;
}
.dark .app-card .app-table-card .grid-head,
.dark .app-card .app-table-card .earnings-table-grid.grid-head {
    background: rgba(30,41,59,0.55);
    border-color: rgba(51,65,85,0.6);
}
.app-card .app-table-card .grid-head .input-group,
.app-card .app-table-card .grid-head span {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
}
.app-card .app-table-card .earnings-table-grid:not(.grid-head),
.app-card .app-table-card .grid:not(.grid-head),
.app-card .app-table-card .asset-grid {
    background: transparent;
    border: 0;
    padding: 0.2rem 0.1rem;
    row-gap: 0.5rem;
    column-gap: 0.55rem;
}
.app-card .app-table-card .label-cell {
    font-weight: 600;
    color: var(--text-muted);
}
.dark .app-card .app-table-card .label-cell { color: #cbd5e1; }
.app-card .app-table-card .input-field {
    min-height: 2.35rem;
    font-weight: 600;
    box-shadow: none;
}
.app-section-body .section-hint {
    margin: 0;
    font-size: 0.78rem;
}

/* High Earner cards: normalize typography */
.app-card {
    font-size: 13px;
    line-height: 1.35;
}

/* High Earner card layout: ensure a real white gap between grey sections */
.card.app-card {
    background: var(--card-surface);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* High Earner sections live inside #colApp1/#colApp2; spacing must be applied there.
   IMPORTANT: don't override Tailwind `.hidden` on #colApp2. */
.card.app-card > #colApp1,
.card.app-card > #colApp2:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* High Earner cards: keep common label/title elements from introducing their own sizes */
.card.app-card .section-title,
.card.app-card .input-group label,
.card.app-card .input-group:is(span),
.card.app-card .help-box {
    font-size: inherit;
}
.card.app-card .input-group {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 0.3rem;
}
.card.app-card .input-group label {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    color: #4a5770;
}
.card.app-card .input-group label.row-label {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    letter-spacing: var(--tracking-wide);
    line-height: var(--line-height-normal);
    text-transform: none;
}
.dark .card.app-card .input-group label { color: #cbd5e1; }
.dark .card.app-card .input-group label.row-label { color: var(--text-muted); }
.card .input-field,
.card.app-card .input-field,
.card.app-card .collapsible-content select.input-field {
    background: #f7f9ff;
    border: 1px solid #cbd9f2;
    box-shadow: none;
    border-radius: 0.5rem;
    min-height: 2.4rem;
    padding: 0.5rem 0.7rem;
    width: 100%;
}
/* percent-input padding/alignment handled by base .percent-input rule with !important */
.dark .card .input-field,
.dark .card.app-card .input-field,
.dark .card.app-card .collapsible-content select.input-field {
    background: #0f1829;
    border-color: #1f2a44;
    color: var(--text-base);
}
.card .input-field:focus,
.card.app-card .input-field:focus {
    outline: 0;
    border-color: #7c8ffb;
    box-shadow: 0 0 0 3px rgba(124, 143, 251, 0.22);
}



/* Input rows */
.input-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    align-items: start;
}
.input-row-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}
.earnings-row {
    margin-bottom: 0.85rem;
    align-items: stretch;
}
.earnings-row .input-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.earnings-row .input-field {
    min-height: 2.75rem;
    box-sizing: border-box;
}
.earnings-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem 0.75rem;
    align-items: center;
}
.earnings-breakdown-grid .input-group {
    justify-self: end;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.grid .input-field[type=number] { max-width: 7rem; }
.grid .input-field[type=text].w-20 { max-width: 7.5rem; }
.grid .unit-field-full .input-field[type=number] { max-width: 100%; }

/* Icon utility */
.icon {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
    fill: none;
}
.icon-lg {
    width: 1.25rem;
    height: 1.25rem;
}
/* RSU schedule remove button */
.rsu-remove-btn {
    height: 1.25rem;
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.35rem;
    background: rgba(239, 68, 68, 0.10);
    color: #ef4444;
    place-self: center;
    border: none;
    padding: 0;
    cursor: pointer;
}
.rsu-remove-btn:hover {
    background: rgba(239, 68, 68, 0.20);
}

.child-row .remove-child {
    align-self: center;
    justify-self: center;
}

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.no-spinner[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.married-ring { width: 24px; height: 24px; }
.married-ring-selected { color: var(--success); }
.married-ring-btn {
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.married-label {
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   TOGGLE SWITCH (Legacy Tailwind-style)
   For backwards compatibility with existing toggle switches.
   Consider migrating to .ds-switch for new implementations.
   -------------------------------------------------------------------------- */
.toggle-checkbox:checked { right: 0; border-color: var(--success); }
.toggle-checkbox:checked + .toggle-label { background-color: var(--success); }
.toggle-peer:checked ~ .toggle-bg { background-color: var(--success); }
.toggle-peer:checked ~ .toggle-dot { transform: translateX(100%); border-color: white; }

.tab-close {
    position: absolute;
    top: -4px;
    right: -4px;
    border: none;
    background: var(--error-light);
    color: var(--error);
    font-weight: 700;
    border-radius: 999px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}
.tab-close:hover { 
    background: rgba(239,68,68,0.22); 
    color: var(--danger); 
    transform: none;
}
.dark .tab-close { background: var(--error-light); color: var(--error); }
.dark .tab-close:hover { background: rgba(248,113,113,0.28); color: #fecdd3; }

/* Ensure parent tabs have relative positioning for absolute close button */
.tab-btn,
.workspace-tab,
.app-tab-with-close {
    position: relative;
}

.tab-btn:hover .tab-close,
.tab-btn:focus-visible .tab-close,
.workspace-tab:hover .tab-close,
.workspace-tab:focus-visible .tab-close,
.app-tab-with-close:hover .tab-close,
.app-tab-with-close:focus-within .tab-close {
    opacity: 1;
    pointer-events: auto;
}

/* --------------------------------------------------------------------------
   PILL TOGGLE - Refactored to use design tokens
   Compact pill-shaped toggle for inline options
   -------------------------------------------------------------------------- */
.pill-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--toggle-radius-pill);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    border: 1px solid var(--toggle-border);
    background: var(--toggle-bg);
    color: var(--toggle-text);
    transition: var(--toggle-transition);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pill-toggle:hover {
    background: var(--toggle-hover-bg);
    border-color: var(--toggle-hover-border);
    color: var(--toggle-hover-text);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pill-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pill-toggle.active {
    background: var(--toggle-active-bg);
    color: var(--toggle-active-text);
    border-color: var(--toggle-active-border);
    box-shadow: var(--toggle-active-shadow);
}

.pill-toggle.active:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
}

/* Dark mode uses token overrides from :root, no separate rules needed */

        /* Collapsible Logic */
        .collapsible-content { 
            transition:
                max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding-bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden; 
            max-height: 2000px; 
            opacity: 1;
            transform-origin: top;
            margin: 0 !important;
            padding-top: 0.3rem;
            padding-bottom: 0.6rem;
        }
        .is-collapsed { 
            max-height: 0 !important; 
            opacity: 0 !important; 
            margin-top: 0 !important; 
            margin-bottom: 0 !important;
            padding-top: 0 !important; 
            padding-bottom: 0 !important; 
        }
        
.chevron {
    width: 0.75rem;
    height: 0.75rem;
    stroke: currentColor;
    fill: none;
    transition: transform 0.2s ease;
}
.chevron-rotated { transform: rotate(-90deg); }

/* Table */
table { width: 100%; font-size: 0.8125rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
th, td { padding: 0.65rem 1rem; white-space: nowrap; border-bottom: 1px solid var(--divider-soft); background: var(--card-bg); min-width: 90px; }
th { background: var(--section-bg); font-weight: 600; letter-spacing: 0.02em; text-transform: none; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); }
th:first-child, td:first-child { border-right: 1px solid var(--divider-soft); min-width: 20rem; max-width: 24rem; width: 22rem !important; white-space: normal; line-height: 1.4; text-align: left; vertical-align: middle; font-weight: 600; color: var(--text-base); }
td:not(:first-child), th:not(:first-child) { text-align: right; }
.dark th { background: var(--section-bg); border-color: var(--divider-soft); color: var(--text-base); box-shadow: inset 0 -1px 0 var(--divider-soft); }
.dark td { background: var(--card-bg); border-color: var(--divider-soft); color: var(--text-base); }
.dark th:first-child, .dark td:first-child { border-right-color: var(--divider-soft); background: var(--section-bg); color: var(--text-base); font-weight: 600; }

/* Table rows - uniform background, no alternating stripes */
.table-subsection td,
.table-section td { font-weight: 600; }
tbody tr:not(.table-section):not(.table-subsection) td { font-weight: 500; }

/* Table layout refresh */
.data-table { font-variant-numeric: tabular-nums; }
.data-table th,
.data-table td { padding: 0.75rem 1rem; }
.data-table.monthly-expanded {
    table-layout: fixed !important;
    width: 100%;
    min-width: calc(22rem + 13 * 6.5rem);
}
.data-table.monthly-expanded th,
.data-table.monthly-expanded td {
    min-width: 6.5rem;
}
.data-table.monthly-expanded th:not(:first-child),
.data-table.monthly-expanded td:not(:first-child) {
    min-width: 6.5rem;
}
.data-table.monthly-expanded .month-col-header {
    min-width: 6.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: right !important;
    color: var(--text-muted);
}
.data-table thead th {
    z-index: 12;
    box-shadow: 0 2px 0 rgba(15, 23, 42, 0.08);
}
.data-table-wrap {
    border-top: 1px solid var(--divider-soft);
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
}
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--divider-soft);
    background: var(--card-bg);
}
.dark .table-toolbar {
    background: var(--card-bg);
}
.table-toolbar__left,
.table-toolbar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Sticky table toolbar + year header row (cashflow + assets tables) */
:root {
    --table-sticky-top: calc(var(--layout-padding) + var(--banner-height));
}
.table-card--sticky {
    overflow: visible !important;
}
.table-card--sticky .table-sticky {
    position: sticky;
    top: var(--table-sticky-top);
    z-index: 31;
    background: var(--card-bg);
    isolation: isolate;
}
.dark .table-card--sticky .table-sticky {
    background: var(--card-bg);
}
.table-card--sticky .table-sticky::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(-1 * var(--card-padding-loose));
    left: calc(-1 * var(--card-padding-loose));
    right: calc(-1 * var(--card-padding-loose));
    bottom: 0;
    background: var(--card-bg);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.table-head-wrap {
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    background: var(--card-bg);
}
.table-head-wrap::-webkit-scrollbar {
    height: 0;
}
.table-title {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.table-title__badge {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.table-title__badge .icon {
    width: 1rem;
    height: 1rem;
}
.table-title__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.table-title__eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-subtle);
}
.table-title__main {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-base);
    background: rgba(15, 23, 42, 0.06);
    padding: 0.12rem 0.45rem;
    border-radius: 0.5rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}
.dark .table-title__main {
    background: rgba(15, 23, 42, 0.45);
}
.table-title__main::after {
    content: "";
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    bottom: -0.25rem;
    height: 2px;
    border-radius: 999px;
}
.table-title--cashflow .table-title__badge {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}
.dark .table-title--cashflow .table-title__badge {
    background: rgba(16, 185, 129, 0.25);
    color: #34d399;
}
.table-title--cashflow .table-title__main::after {
    background: #10b981;
}
.table-title--assets .table-title__badge {
    background: rgba(14, 165, 233, 0.15);
    color: #0284c7;
}
.dark .table-title--assets .table-title__badge {
    background: rgba(56, 189, 248, 0.2);
    color: #7dd3fc;
}
.table-title--assets .table-title__main::after {
    background: #38bdf8;
}
.table-toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem;
    border-radius: 0.6rem;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
}
.dark .table-toggle-group {
    background: var(--card-bg);
    border-color: var(--card-border);
}
.table-section td:first-child {
    position: relative;
    padding-left: 1.6rem;
}
.table-section td:first-child::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 0.2rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.6);
}
.dark .table-section td:first-child::before {
    background: rgba(148, 163, 184, 0.35);
}
.table-subsection td:first-child {
    padding-left: 1.25rem;
}
.data-table th:first-child,
.data-table td:first-child {
    border-right: 1px solid rgba(148, 163, 184, 0.45);
}
.dark .data-table th:first-child,
.dark .data-table td:first-child {
    border-right-color: rgba(148, 163, 184, 0.25);
}

/* Carry-forward band backgrounds */
.cf-bg-1 { background-color: #dbeafe !important; }
.cf-bg-2 { background-color: #dcfce7 !important; }
.cf-bg-3 { background-color: #fef9c3 !important; }
.dark .cf-bg-1 { background-color: rgba(59, 130, 246, 0.25) !important; }
.dark .cf-bg-2 { background-color: rgba(34, 197, 94, 0.25) !important; }
.dark .cf-bg-3 { background-color: rgba(251, 191, 36, 0.25) !important; }

/* Y1 expansion cells MUST override CF backgrounds - placed after cf-bg rules */
/* Values are right-aligned, headers use text-center class separately */
.y1-ytd-cell,
.y1-ytd-cell.cf-bg-1,
.y1-ytd-cell.cf-bg-2,
.y1-ytd-cell.cf-bg-3 {
    background-color: rgba(148, 163, 184, 0.08) !important;
    text-align: right !important;
}
.dark .y1-ytd-cell,
.dark .y1-ytd-cell.cf-bg-1,
.dark .y1-ytd-cell.cf-bg-2,
.dark .y1-ytd-cell.cf-bg-3 {
    background-color: rgba(148, 163, 184, 0.12) !important;
}
.y1-rest-cell,
.y1-rest-cell.cf-bg-1,
.y1-rest-cell.cf-bg-2,
.y1-rest-cell.cf-bg-3 {
    background-color: rgba(16, 185, 129, 0.08) !important;
    text-align: right !important;
}
.dark .y1-rest-cell,
.dark .y1-rest-cell.cf-bg-1,
.dark .y1-rest-cell.cf-bg-2,
.dark .y1-rest-cell.cf-bg-3 {
    background-color: rgba(16, 185, 129, 0.14) !important;
}

/* -------------------------------------------------------------------------
   EDITABLE TABLE CELLS
   Cells that can be clicked to override projected values
   ------------------------------------------------------------------------- */
.cell-editable {
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
}
.cell-editable:hover {
    background-color: rgba(var(--accent-rgb), 0.10) !important;
    transform: scale(1.02);
}
.dark .cell-editable:hover {
    background-color: rgba(var(--accent-rgb), 0.18) !important;
}
/* Pencil indicator - always visible but subtle */
.cell-editable::after {
    content: '\270E';
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 10px;
    color: var(--accent);
    opacity: 0.4;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.cell-editable:hover::after {
    opacity: 1;
}
.dark .cell-editable::after {
    color: var(--accent-2);
}
/* Overridden cell styling - shows user has changed the value */
.cell-override {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(52, 211, 153, 0.1) 100%) !important;
    font-weight: 700 !important;
    color: var(--success) !important;
    position: relative;
}
.cell-override::after {
    content: '\2713';
    color: var(--success);
    opacity: 1;
}
/* Clear override button on individual cells */
.cell-override .cell-clear-btn {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cell-override:hover .cell-clear-btn {
    opacity: 1;
}
.cell-override .cell-clear-btn:hover {
    background: rgba(220, 38, 38, 1);
}
.dark .cell-override {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(52, 211, 153, 0.15) 100%) !important;
    color: #34d399 !important;
}
.dark .cell-override::after {
    color: #34d399;
}
.dark .cell-override .cell-clear-btn {
    background: rgba(239, 68, 68, 0.95);
}
.dark .cell-override .cell-clear-btn:hover {
    background: rgba(248, 113, 113, 1);
}

/* Carry-forward impact indicator - shows cells affected by pension changes in other years */
.cell-cf-impact {
    box-shadow: inset 0 0 0 2px #f97316 !important; /* Orange border */
    position: relative;
}
.cell-cf-impact::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent #f97316 transparent transparent;
}
.dark .cell-cf-impact {
    box-shadow: inset 0 0 0 2px #fb923c !important;
}
.dark .cell-cf-impact::before {
    border-color: transparent #fb923c transparent transparent;
}

/* -------------------------------------------------------------------------
   TABLE HEADERS
   ------------------------------------------------------------------------- */
#projectionHead th,
#assetsHead th {
    background: var(--card-bg);
}

/* Clear overrides button */
.btn-clear-overrides {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--error);
    background: var(--error-light);
    border: 1px solid var(--error);
    border-radius: var(--card-radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.9;
}
.btn-clear-overrides:hover {
    background: var(--error);
    color: white;
    opacity: 1;
}
.btn-clear-overrides.hidden {
    display: none;
}

/* Edit hint on row labels */
.edit-hint {
    display: inline-block;
    margin-left: 0.25rem;
    width: 12px;
    height: 12px;
    color: var(--accent);
    opacity: 0.6;
    vertical-align: middle;
}
.dark .edit-hint {
    color: var(--accent-2);
}

/* Inline edit input styling */
.cell-edit-input {
    width: 100%;
    min-width: 60px;
    padding: 2px 4px;
    border: 2px solid var(--accent);
    border-radius: 4px;
    font-size: inherit;
    font-family: inherit;
    text-align: right;
    background: var(--input-bg);
    color: var(--text-base);
}
.cell-edit-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25);
}
.dark .cell-edit-input {
    background: var(--card-dark);
    border-color: var(--accent-2);
}

.table-section { background: var(--section-bg); color: var(--text-base); font-weight: 600; letter-spacing: 0.02em; text-transform: none; border-left: 0; }
.dark .table-section { background: var(--section-bg); color: var(--text-base); }
.table-subsection { background: var(--section-bg); color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.dark .table-subsection { background: var(--section-bg); color: var(--text-muted); }

/* Child rows for expandable sections (indented sub-items) */
.row-child td:first-child {
    padding-left: 2rem;
    font-weight: 400 !important;
    font-size: 0.9em;
    color: var(--text-muted);
}
.dark .row-child td:first-child {
    color: var(--text-muted);
}
.row-child td {
    font-weight: 400 !important;
    color: var(--text-muted);
    font-size: 0.95em;
}

/* Section with headline total - shows key figure in header row */
.table-section--with-total td {
    font-weight: 700 !important;
}
.table-section--with-total .section-total-cell {
    font-size: 1.05em;
    /* color inherited from Tailwind classes or highlighter */
}
.dark .table-section--with-total .section-total-cell {
    /* color inherited from Tailwind classes or highlighter */
}

/* Flow step indicators for money flow visualization */
.flow-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #22c55e);
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
.dark .flow-step {
    background: linear-gradient(135deg, #22c55e, #3b82f6);
    color: #0f172a;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.4);
}

/* Summary/subtotal rows - visually distinct calculation results */
.table-summary-row td {
    border-top: 2px solid #e2e8f0 !important;
    padding-top: 0.5rem !important;
}
.dark .table-summary-row td {
    border-top: 2px solid #334155 !important;
}
.table-summary-row td:first-child {
    font-weight: 700 !important;
}

/* Adjustments section - highlight deductions with subtle accent */
.adjustment-row td:first-child {
    position: relative;
    padding-left: 1.5rem !important;
}
.adjustment-row td:first-child::before {
    content: "\2212";
    position: absolute;
    left: 0.5rem;
    color: #10b981;
    font-weight: 700;
    font-family: Arial, sans-serif;
}

.toggle-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: inherit; font-weight: 700; background: transparent; color: #0f172a; border: 1px solid #bae6fd; }
.toggle-pill.collapsed { background: transparent; color: #475569; border-color: #e2e8f0; }
.dark .toggle-pill { background: transparent; color: #f8fafc; border-color: #1e3a8a; box-shadow: none; }
.dark .toggle-pill.collapsed { background: transparent; color: var(--text-muted); border-color: var(--border-dark); box-shadow: none; }

/* Table toolbar toggle buttons - unified styling */
.toggle-pill--zeros,
.toggle-pill--expand { font-size: 0.7rem; padding: 0.2rem 0.6rem; opacity: 0.7; transition: all 0.15s ease; }
.toggle-pill--zeros:hover,
.toggle-pill--expand:hover { opacity: 1; background: #f1f5f9; border-color: #94a3b8; }
.toggle-pill--zeros:not(.collapsed),
.toggle-pill--expand:not(.collapsed) { opacity: 1; background: #e0f2fe; border-color: #7dd3fc; color: #0369a1; }
.dark .toggle-pill--zeros:hover,
.dark .toggle-pill--expand:hover { background: rgba(148, 163, 184, 0.2); border-color: #64748b; }
.dark .toggle-pill--zeros:not(.collapsed),
.dark .toggle-pill--expand:not(.collapsed) { background: rgba(14, 165, 233, 0.2); border-color: #0ea5e9; color: #7dd3fc; }

/* Subtle toggle pill variant (for secondary options like show zeros) */
.toggle-pill--subtle { font-size: 0.65rem; padding: 0.1rem 0.35rem; opacity: 0.7; }
.toggle-pill--subtle:not(.collapsed) { opacity: 1; background: #e0f2fe; border-color: #7dd3fc; }
.toggle-pill--subtle.collapsed { opacity: 0.5; }
.dark .toggle-pill--subtle:not(.collapsed) { background: rgba(14, 165, 233, 0.2); border-color: #0ea5e9; }

/* Mode toggle (Annual/Monthly) - clear active state styling */
.toggle-pill--mode { 
    font-size: 0.7rem; 
    padding: 0.2rem 0.6rem; 
    cursor: pointer;
    transition: all 0.15s ease;
}
.toggle-pill--mode.active {
    background: var(--success, #10b981);
    color: #ffffff;
    border-color: transparent;
}
.toggle-pill--mode.collapsed {
    background: transparent;
    color: #64748b;
    border-color: #e2e8f0;
}
.toggle-pill--mode.collapsed:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}
.dark .toggle-pill--mode.active {
    background: var(--success, #10b981);
    color: #ffffff;
    border-color: transparent;
}
.dark .toggle-pill--mode.collapsed {
    background: transparent;
    color: var(--text-muted, #94a3b8);
    border-color: var(--border-dark, #334155);
}
.dark .toggle-pill--mode.collapsed:hover {
    background: rgba(148, 163, 184, 0.2);
    border-color: #64748b;
}

/* Wide custom select for buyer type */
.custom-select--wide { min-width: 160px; }
.custom-select--wide .custom-select__menu { min-width: 180px; }
.custom-select--wider { min-width: 100%; }
.custom-select--wider .custom-select__menu { min-width: 200px; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: var(--toggle-border); border-radius: 2px; }

/* ==========================================================================
   TAB BUTTON COMPONENT
   Refactored to use design tokens. Base for workspace and applicant tabs.
   ========================================================================== */
.tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--toggle-padding-y) var(--toggle-padding-x);
    font-size: var(--toggle-font-size);
    font-weight: var(--toggle-font-weight);
    border-radius: var(--toggle-radius);
    transition: var(--toggle-transition);
    overflow: visible;
    cursor: pointer;
    border: 1px solid var(--toggle-border);
    background: var(--toggle-bg);
    color: var(--toggle-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
}

.tab-btn:hover {
    background: var(--toggle-hover-bg);
    color: var(--toggle-hover-text);
    border-color: var(--toggle-hover-border);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tab-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tab-btn.active {
    background: var(--toggle-active-bg);
    color: var(--toggle-active-text);
    border-color: var(--toggle-active-border);
    box-shadow: var(--toggle-active-shadow);
}

.tab-btn.active:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
}

/* Compare button - accent variant */
.tab-btn--compare {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
}

.tab-btn--compare:hover {
    filter: brightness(0.9);
    color: white;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
    transform: translateY(-2px);
}

.tab-input {
    border: none;
    background: transparent;
    min-width: 96px;
    text-align: center;
    cursor: pointer;
}
.tab-input:focus { outline: none; }

/* High Earner tabs as buttons (rename-on-demand) */
.tab-button {
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.tab-button:focus { outline: none; }
.tab-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.dark .tab-button:focus-visible { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); }

.tab-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

.tab-rename {
    display: none;
    width: 100%;
    border: 1px solid rgba(148,163,184,0.65);
    background: rgba(255,255,255,0.9);
    color: var(--text-base);
    border-radius: 0.35rem;
    padding: 0.1rem 0.35rem;
    font: inherit;
    text-align: center;
}
.dark .tab-rename {
    background: rgba(17,24,39,0.9);
    border-color: #334155;
}
.tab-button.is-renaming .tab-label { display: none; }
.tab-button.is-renaming .tab-rename { display: block; }

/* ==========================================================================
   APPLICANT TAB BAR
   Container and tab styling for high earner selection
   ========================================================================== */
.applicant-tab-bar {
    display: inline-flex;
    align-items: center;
    gap: var(--toggle-gap);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--toggle-radius);
    background: transparent;
    width: fit-content;
    margin: 0 auto;
    overflow: visible;
}

.applicant-tab-bar > button,
.applicant-tab-bar > .app-tab-with-close {
    flex: 0 0 auto;
}

/* Applicant tab button - override base .tab-btn for this context */
.applicant-tab-bar .tab-btn {
    border: 1px solid var(--toggle-border);
    background: var(--card-bg);
    color: var(--text-base);
    padding: var(--toggle-padding-y) var(--toggle-padding-x);
    border-radius: var(--toggle-radius);
    font-weight: var(--toggle-font-weight);
    font-size: var(--toggle-font-size);
    position: relative;
    overflow: visible;
    box-shadow: none;
    transition: var(--toggle-transition);
    width: 9.25rem;
    min-width: 9.25rem;
    text-align: center;
}

.applicant-tab-bar .tab-btn:not(.active):hover {
    color: var(--toggle-hover-text);
    background: var(--toggle-hover-bg);
    border-color: var(--toggle-hover-border);
}

.applicant-tab-bar .tab-btn.active {
    background: var(--toggle-active-bg);
    color: var(--toggle-active-text);
    box-shadow: var(--toggle-active-shadow);
    border-color: var(--toggle-active-border);
}

.applicant-tab-bar .tab-btn.active::after { content: none; }
.applicant-tab-bar .tab-btn.active .tab-rename-trigger { color: rgba(255, 255, 255, 0.85); }
/* Ensure pencil icon is properly positioned for applicant tabs */
.applicant-tab-bar .tab-btn .tab-rename-trigger {
    position: absolute;
    top: -0.55rem;
    left: -0.55rem;
}
.dark .applicant-tab-bar .tab-btn.active {
    background: var(--success);
    border-color: transparent;
    color: #ffffff;
}
.applicant-tab-bar[data-app2="disabled"] #app-tab-app2.active {
    background: #22c55e;
    color: #ffffff;
    opacity: 1;
}

.tab-hint { display: none; }
.dark .tab-hint { display: none; }

.applicant-tab-bar .add-app-btn {
    border: 1px dashed rgba(148, 163, 184, 0.45);
    background: transparent;
    color: var(--text-muted);
    width: 9.25rem;
    min-width: 9.25rem;
}
.applicant-tab-bar[data-app2="disabled"] #app-tab-app2 {
    border-style: dashed;
    background: transparent;
    color: var(--text-muted);
    opacity: 0.75;
}
.applicant-tab-bar[data-app2="enabled"] #app-tab-app2:not(.active) {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    opacity: 1;
}

.app-tab-with-close {
    position: relative;
    display: flex;
    align-items: center;
}
#remove-app2-btn {
    position: absolute;
    right: -0.35rem;
    top: -0.45rem;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    border: 1px solid var(--section-border);
    background: var(--card-bg);
    color: #ef4444;
    font-size: 0.8rem;
    box-shadow: none;
}
.dark #remove-app2-btn {
    background: var(--card-bg);
    border-color: var(--section-border);
    color: #fca5a5;
    box-shadow: none;
}
.applicant-tab-bar .tab-input {
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.applicant-tab-bar .tab-button {
    width: 9.25rem;
    min-width: 9.25rem;
}

/* ========== SNAPSHOT SELECTOR ========== */
.snapshot-selector {
    position: relative;
    min-height: 2.35rem;
    min-width: 9rem;
}

.snapshot-selector:empty::before {
    content: 'Loading...';
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.snapshot-selector-wrapper {
    position: relative;
}

.snapshot-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.35rem;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    color: var(--text-base);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-align: left;
}

.snapshot-trigger:hover {
    border-color: var(--emerald-500);
}

.snapshot-trigger .icon {
    position: absolute;
    right: 0.6rem;
    width: 0.85rem;
    height: 0.85rem;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.snapshot-selector-wrapper.open .snapshot-trigger .icon {
    transform: rotate(180deg);
}

.snapshot-label {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snapshot-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 100;
    min-width: 200px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: all 0.15s ease;
}

.snapshot-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.snapshot-options {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.35rem;
    border-bottom: 1px solid var(--card-border);
}

.snapshot-option {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 0.35rem;
    color: var(--text-base);
    cursor: pointer;
    transition: background 0.1s;
}

.snapshot-option:hover {
    background: rgba(16, 185, 129, 0.08);
}

.snapshot-option.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--emerald-600);
    font-weight: 500;
}

.dark .snapshot-option.active {
    color: var(--emerald-400);
}

.snapshot-actions {
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.snapshot-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 0.35rem;
    color: var(--text-base);
    cursor: pointer;
    transition: background 0.1s;
}

.snapshot-action-btn:hover {
    background: rgba(16, 185, 129, 0.08);
}

.snapshot-action-btn--danger {
    color: #ef4444;
}

.snapshot-action-btn--danger:hover {
    background: rgba(239, 68, 68, 0.08);
}

.snapshot-action-btn--disabled {
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 0.6;
}

.snapshot-action-btn--disabled:hover {
    background: transparent;
}

.dark .snapshot-action-btn--disabled {
    color: #6b7280;
}

/* Banner divider between snapshot selector and workspace tabs */
.banner-divider {
    width: 1px;
    height: 1.5rem;
    background: var(--card-border);
    margin: 0 0.25rem;
}

/* Scenario/workspace tabs reuse applicant tabs but tighter width and spacing */
.workspace-tabs {
    gap: 0.55rem;
    padding: 0.35rem 0.65rem;
}
.workspace-tabs .tab-btn,
.workspace-tabs .tab-button,
.workspace-tabs .add-app-btn {
    width: 7rem;
    min-width: 7rem;
    font-size: 0.875rem;
}
.workspace-tabs .add-app-btn {
    width: auto;
    min-width: 9rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}
.workspace-tabs #btn-compare-workspaces {
    min-width: 8rem;
    width: auto;
    border: 1px solid #94a3b8;
    background: var(--card-bg);
    color: var(--text-base);
    border-color: #94a3b8 !important;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
}
.workspace-tabs #btn-compare-workspaces:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(148, 163, 184, 0.85);
}
.dark .workspace-tabs #btn-compare-workspaces:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(148, 163, 184, 0.7);
}
.dark .workspace-tabs #btn-compare-workspaces {
    border-color: #475569 !important;
    box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.45);
}
        
.applicant-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-top: 0.25rem;
    padding-bottom: 0.35rem;
}
@media (max-width: 720px) {
    .applicant-stat-strip {
        grid-template-columns: 1fr;
    }
}
.stat-card {
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
.dark .stat-card {
    background: var(--card-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.stat-card.ghost {
    border-style: dashed;
    background: transparent;
    color: var(--text-muted);
}
.stat-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}
.stat-name { font-weight: 700; color: var(--text-base); }
.dark .stat-name { color: var(--text-base); }
.stat-chip {
    font-size: 0.72rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #ecfeff;
    color: #0f172a;
    font-weight: 700;
}
.stat-chip.active {
    background: #d1fae5;
    border-color: transparent;
    color: #065f46;
    box-shadow: 0 6px 14px rgba(16,185,129,0.2);
}
.stat-chip.muted {
    background: rgba(148,163,184,0.1);
    color: var(--text-muted);
    border-style: dashed;
}
.dark .stat-chip {
    background: rgba(17,24,39,0.8);
    border-color: #1f2937;
    color: #e2e8f0;
}
.dark .stat-chip.active {
    background: #22c55e;
    color: #0f172a;
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}
.stat-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-muted);
}
.stat-value {
    display: block;
    font-weight: 700;
    font-family: 'Space Grotesk','Inter',sans-serif;
    color: var(--text-base);
}
.dark .stat-value { color: #e2e8f0; }
.stat-ghost-copy {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.chart-btn { padding: 0.15rem 0.5rem; font-size: inherit; font-weight: 600; border-radius: 0.2rem; }
.chart-btn.active { background-color: #2563eb; color: white; }

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin: 0.25rem 0 0.35rem;
}
.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.legend-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    box-shadow: 0 0 0 3px rgba(15,23,42,0.05);
}
.legend-app1 { background: linear-gradient(135deg, #2563eb, #38bdf8); }
.legend-app2 { background: linear-gradient(135deg, #f59e0b, #fb7185); }
.legend-combined { background: linear-gradient(135deg, #0ea5e9, #22c55e); }
.dark .legend-item { color: #cbd5e1; }
.dark .legend-dot { box-shadow: 0 0 0 3px rgba(0,0,0,0.25); }

.empty-state {
    position: absolute;
    inset: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    color: var(--text-muted);
    background: linear-gradient(135deg, rgba(248,250,252,0.9), rgba(241,245,249,0.85));
    border: 1px dashed var(--border);
    border-radius: 0.75rem;
    pointer-events: none;
}
.dark .empty-state {
    background: linear-gradient(135deg, rgba(15,23,42,0.9), rgba(15,23,42,0.7));
    border-color: var(--border-dark);
    color: #cbd5e1;
}
.chart-empty { inset: 0.25rem; }

.rail-compare-row {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.08), rgba(245, 158, 11, 0.05));
}
.dark .rail-compare-row {
    border-color: var(--border-dark);
    background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.18), rgba(245, 158, 11, 0.10));
}
.mode-chip-set { display: flex; align-items: center; gap: 0.25rem; }
.mode-chip {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(37,99,235,0.12);
    color: #1d4ed8;
    border: 1px solid rgba(37,99,235,0.18);
}
.dark .mode-chip {
    background: rgba(37,99,235,0.25);
    color: #bfdbfe;
    border-color: rgba(59,130,246,0.35);
}
.compare-box {
    display: grid;
    gap: 0.1rem;
    background: #ffffff;
    padding: 0.45rem 0.55rem;
    border-radius: 0.55rem;
    border: 1px solid var(--border);
    min-width: 0;
}
.compare-box.highlight {
    background: linear-gradient(135deg, #ecfeff, #e0f2fe);
    border-color: #bfdbfe;
}
.dark .compare-box { background: var(--card-bg); border-color: var(--card-border); }
.dark .compare-box.highlight {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.14), rgba(7, 14, 27, 0.84));
    border-color: rgba(var(--accent-rgb), 0.25);
}
.compare-box .stat-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; }
.compare-box .stat-value { font-size: 1rem; font-weight: 800; }
.compare-box .stat-sub { font-size: 0.75rem; color: var(--text-muted); }
.compare-arrow {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-muted);
    padding: 0 0.35rem;
}

/* Range input slider - cross-browser support */
input[type=range] { 
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, #64748b 0%, #64748b 100%);
    outline: none;
    padding: 0;
    margin: 0;
}

/* Chrome/Edge/Safari slider thumb */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: white;
    border: 2px solid #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type=range]::-webkit-slider-thumb:hover {
    background: #f1f5f9;
    border-color: #475569;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15);
}

/* Firefox slider track */
input[type=range]::-moz-range-track {
    background: transparent;
    border: none;
    padding: 0;
}

input[type=range]::-moz-range-progress {
    background: var(--accent);
    border: none;
    height: 4px;
    border-radius: 2px;
}

/* Firefox slider thumb */
input[type=range]::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: white;
    border: 2px solid #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

input[type=range]::-moz-range-thumb:hover {
    background: #f1f5f9;
    border-color: #475569;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.15);
}

/* Dark mode range input */
.dark input[type=range] {
    background: linear-gradient(to right, #64748b 0%, #64748b 100%);
}

.dark input[type=range]::-webkit-slider-thumb {
    background: #1e293b;
    border-color: #94a3b8;
}

.dark input[type=range]::-webkit-slider-thumb:hover {
    background: #334155;
    border-color: #cbd5e1;
}

.dark input[type=range]::-moz-range-thumb {
    background: #1e293b;
    border-color: #94a3b8;
}

.dark input[type=range]::-moz-range-thumb:hover {
    background: #334155;
    border-color: #cbd5e1;
}

/* RSU Header Row - 4 columns in one row */
.rsu-header-row {
    display: grid;
    grid-template-columns: 1fr 0.65fr 0.55fr 1.1fr;
    gap: 0.5rem;
    align-items: end;
}

/* Legacy grid kept for compatibility */
.rsu-header-grid {
    display: grid;
    grid-template-columns: 1fr 0.65fr 0.55fr 1.1fr;
    gap: 0.5rem;
    align-items: end;
}

/* Inline fetch button next to ticker */
.rsu-fetch-btn-inline {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background: rgba(var(--accent-rgb), 0.06);
    color: var(--accent);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rsu-fetch-btn-inline:hover {
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.42);
    color: var(--accent);
}
.rsu-fetch-btn-inline.loading svg {
    animation: spinner-rotate 0.7s linear infinite;
}
.dark .rsu-fetch-btn-inline {
    border-color: rgba(var(--accent-rgb), 0.32);
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--emerald-400);
}
.dark .rsu-fetch-btn-inline:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.22);
    color: #d1fae5;
}

.rsu-remove-btn[disabled],
.rsu-remove-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.rsu-fetch-btn {
    height: 2.35rem;
    padding: 0 0.75rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rsu-fetch-btn:hover {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.5);
    color: var(--accent);
}
.dark .rsu-fetch-btn {
    border-color: rgba(var(--accent-rgb), 0.32);
    background: rgba(var(--accent-rgb), 0.14);
    color: #d1fae5;
}
.dark .rsu-fetch-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.22);
    color: #ecfdf5;
}
/* Small fetch button for inline with Add vesting event */
.rsu-fetch-btn-small {
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(var(--accent-rgb), 0.24);
    background: rgba(var(--accent-rgb), 0.06);
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rsu-fetch-btn-small:hover {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.42);
    color: var(--accent);
}
.dark .rsu-fetch-btn-small {
    border-color: rgba(var(--accent-rgb), 0.24);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--emerald-400);
}
.dark .rsu-fetch-btn-small:hover {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.20);
    color: #d1fae5;
}
.rsu-add-btn {
    margin-top: 0.2rem;
}
.rsu-table {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.rsu-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.6fr) minmax(0, 0.6fr) minmax(0, 0.7fr) 1.5rem;
    gap: 0.45rem;
    padding: 0.1rem 0.15rem 0.1rem;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-transform: inherit;
}
.rsu-head span:last-child { justify-self: center; width: 1.25rem; }
.input-field.rsu-date { color: var(--text-muted); text-align: left; }
.input-field.rsu-date.has-value { color: var(--input-text); }
.dark .input-field.rsu-date { color: var(--text-muted); }
.dark .input-field.rsu-date.has-value { color: var(--input-text); }
.rsu-table .input-group,
.rsu-schedule-row .input-group {
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
}
.rsu-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: none;
    overflow-y: visible;
    padding-right: 0.2rem;
}
.rsu-schedule-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.6fr) minmax(0, 0.6fr) minmax(0, 0.7fr) 1.5rem;
    gap: 0.45rem;
    align-items: end;
    padding: 0.1rem 0.15rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.rsu-schedule-row label {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: #475569;
}
.dark .rsu-schedule-row label { color: #cbd5e1; }

.rsu-price-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Projected price indicator - orange border */
.rsu-price.projected {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 1px #f97316;
}
.dark .rsu-price.projected {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 1px #fb923c;
}

/* Projected net proceeds indicator - same styling */
.prop-net-proceeds.projected {
    border-color: #f97316 !important;
    box-shadow: 0 0 0 1px #f97316;
}
.dark .prop-net-proceeds.projected {
    border-color: #fb923c !important;
    box-shadow: 0 0 0 1px #fb923c;
}
        
.text-bad { color: #dc2626 !important; }
.dark .text-bad { color: #f87171 !important; }

/* RSU schedule scroller */
.rsu-schedule-list {
    max-height: none;
    overflow-y: visible;
    padding-right: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .collapsible-content {
        transition: none !important;
    }
}

/* Main layout: stacked layout with top row (applicant + chart) and bottom row (rail) */
.layout-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.layout-top {
    display: grid;
    grid-template-columns: minmax(320px, 480px) 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 900px) {
    .layout-top { grid-template-columns: 1fr; }
}
.applicants-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: stretch;
    min-width: 0;
    overflow: visible;
    background: transparent;
}
.applicants-grid > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.applicants-grid > *:not(:last-child) { margin-bottom: 0; }
.layout-chart {
    position: sticky;
    top: 1rem;
    align-self: start;
    max-width: none;
    width: 100%;
    height: 100%;
}
@media (max-width: 1280px) {
    .layout-chart { position: static; }
}

.rail-section {
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    padding: 1rem;
    background: var(--card-bg);
}
.dark .rail-section {
    border-color: var(--card-border);
    background: var(--card-bg);
}
.rail-section .rail-subsection {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.dark .rail-section .rail-subsection { border-color: var(--border-dark); }
.rail-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Card typography: keep a single size via `.card { font-size: 13px; }` */
.card .collapsible-content {
    font-weight: 500;
    line-height: 1.35;
}
/* Neutralize Tailwind arbitrary font-size utilities inside cards */
.card .text-\[9px\],
.card .text-\[10px\],
.card .text-\[11px\],
.card .text-\[12px\],
.card .text-\[13px\] {
    font-size: inherit;
}

/* High Earner cards: keep everything uniformly inherited from `.app-card { font-size: 13px; }` */
.app-card .collapsible-content,
.app-card .collapsible-content p,
.app-card .collapsible-content input,
.app-card .collapsible-content select,
.app-card .collapsible-content textarea,
.app-card .collapsible-content button:not(.section-header):not(.tab-btn):not(.chart-btn),
.app-card .input-field,
.app-card .label-9px,
.app-card .text-9px,
.app-card .text-10px,
.app-card .text-11px,
.app-card .text-12px,
.app-card .text-13px,
.app-card .earnings-breakdown-grid .input-group,
.app-card .toggle-pill,
.app-card .tab-btn,
.app-card .chart-btn {
    font-size: inherit;
}

/* Tighter, aligned inputs inside cards */
.card .input-field,
.card .collapsible-content select.input-field {
    padding: 0.4rem 0.55rem;
    min-height: 2.35rem;
    font-weight: 500;
    line-height: 1.35;
    border-radius: 0.55rem;
}
.card .collapsible-content .grid span {
    font-weight: 600;
}

/* High Earner cards: ensure inputs inherit 11px (beats `.card .input-field` without `!important`) */
.card.app-card .input-field,
.card.app-card .collapsible-content select.input-field,
.card.app-card .input-month,
.card.app-card .rsu-remove-btn {
    font-size: inherit;
}
.rail-highlight {
    background: #eef2ff;
    border-color: #c7d2fe;
}
.dark .rail-highlight {
    background: var(--card-bg);
    border-color: var(--card-border);
}
.rail-grid {
    border: 1px dashed #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: #ffffff;
}
.dark .rail-grid {
    border-color: var(--card-border);
    background: var(--section-bg);
}

/* Ensure applicant cards don't break across grid columns */
.app-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    break-inside: avoid;
    overflow: visible;
}

/* Surplus drag list */
.surplus-list { display: grid; gap: 0.2rem; }
.surplus-item {
    display: grid; grid-template-columns: auto auto 1fr 140px; align-items: center;
    gap: 0.6rem; padding: 0.7rem 0.8rem;
    border: 1px dashed #cbd5e1; border-radius: 0.65rem;
    background: #f8fafc; cursor: grab;
}
.dark .surplus-item { border-color: #334155; background: #0f172a; }
.surplus-order {
    width: 1.4rem; height: 1.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.375rem;
    font-weight: 700; font-size: 0.75rem;
    background: #e0e7ff; color: #312e81;
    border: 1px solid #cbd5e1;
}
.dark .surplus-order { background: #1e293b; color: #e0f2fe; border-color: #334155; }
.surplus-handle { color: #94a3b8; display: flex; align-items: center; cursor: grab; }
.dark .surplus-handle { color: #64748b; }
.surplus-item:active { cursor: grabbing; }
/* Auto mode: hide drag handle, disable grab cursor */
.surplus-auto-mode .surplus-handle { visibility: hidden; }
.surplus-auto-mode .surplus-item { cursor: default; }
.surplus-auto-mode .surplus-item:active { cursor: default; }
.efficiency-score { min-width: 3.5rem; text-align: center; display: flex; align-items: center; justify-content: center; }

/* Visual refresh overrides --------------------------------------------------*/
:root {
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --section-bg: #f1f5f9;
    --section-border: #e2e8f0;
    --card-surface: #ffffff;
    --divider-soft: rgba(15, 23, 42, 0.12);
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(15, 23, 42, 0.08);
    --text-base: #1e293b;
    --text-muted: #475569;
    --text-subtle: #64748b;
    --app-bg: radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.10), transparent 34%),
              radial-gradient(circle at 85% 0%, rgba(245, 158, 11, 0.08), transparent 28%),
              var(--bg);
}
.dark {
    /* Dark mode palette (ink + slate neutrals, emerald accent). */
    --bg: linear-gradient(180deg, #020617 0%, #020b1c 55%, #020617 100%);
    --card-bg: #0b1220;
    --card-border: rgba(148, 163, 184, 0.16);
    --section-bg: #0a1322;
    --section-border: rgba(148, 163, 184, 0.14);
    --card-surface: #0b1220;
    --divider-soft: rgba(148, 163, 184, 0.12);
    --glass-bg: rgba(2, 6, 23, 0.7);
    --glass-border: rgba(148, 163, 184, 0.14);
    --text-primary: #f8fafc;
    --text-base: #e2e8f0;
    --text-muted: #94a3b8;
    --text-subtle: #64748b;
    --input-bg: #0f172a;
    --input-border: rgba(148, 163, 184, 0.22);
    --input-text: #e2e8f0;
    --input-disabled-bg: rgba(148, 163, 184, 0.08);
    --response-bg: rgba(148, 163, 184, 0.08);
    --response-border: rgba(148, 163, 184, 0.18);
    --response-text: #e2e8f0;
    --section-hover-bg: rgba(148, 163, 184, 0.07);
    --card-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 50px rgba(0, 0, 0, 0.55);
    --card-shadow-elevated: 0 1px 0 rgba(255, 255, 255, 0.04), 0 30px 90px rgba(0, 0, 0, 0.68);
    --app-bg: radial-gradient(circle at 18% 18%, rgba(var(--accent-rgb), 0.18), transparent 38%),
              radial-gradient(circle at 85% 0%, rgba(245, 158, 11, 0.10), transparent 34%),
              var(--bg);
}

body#mainBody {
    color: var(--text-base);
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}
.section {
    background: var(--section-bg);
    border-color: var(--card-border);
    box-shadow: none;
}
.dark .section {
    background: var(--section-bg);
    border-color: var(--card-border);
}
.card-header {
    border-color: var(--divider-soft);
}
.dark .card-header {
    border-color: var(--divider-soft);
}
.input-field {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}
.dark .input-field {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}
.tab-btn {
    background: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-base);
}
.pill-toggle.active,
.tab-btn.active,
.toggle-pill:not(.collapsed) {
    background: var(--success);
    color: #ffffff;
    border-color: transparent;
    box-shadow: none;
}
.dark .tab-btn {
    background: var(--card-bg);
    border-color: var(--card-border);
}
.dark .pill-toggle.active,
.dark .tab-btn.active,
.dark .toggle-pill:not(.collapsed) {
    background: var(--success);
    border-color: transparent;
    color: #ffffff;
}
/* Table toggles: transparent background when expanded */
.table-section .toggle-pill:not(.collapsed),
.table-subsection .toggle-pill:not(.collapsed),
.data-table .toggle-pill:not(.collapsed) {
    background: transparent;
    color: var(--text-base);
    border-color: var(--card-border);
    box-shadow: none;
}
.dark .table-section .toggle-pill:not(.collapsed),
.dark .table-subsection .toggle-pill:not(.collapsed),
.dark .data-table .toggle-pill:not(.collapsed) {
    background: transparent;
    color: var(--text-base);
    border-color: var(--card-border);
}
.insight-banner {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 45%, #0f172a);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18);
}
.rail-section {
    background: var(--card-bg);
    border-color: var(--card-border);
}
.dark .rail-section {
    background: var(--card-bg);
    border-color: var(--card-border);
}
.table-section,
.table-subsection,
th:first-child,
td:first-child {
    background-color: var(--section-bg);
    color: var(--text-base);
}
.dark .table-section,
.dark .table-subsection,
.dark th:first-child,
.dark td:first-child {
    background-color: var(--section-bg);
    color: var(--text-base);
}
.tab-button { position: relative; overflow: visible; }
.tab-rename-trigger {
    position: absolute;
    top: -0.55rem;
    left: -0.55rem;
    width: 1.35rem;
    height: 1.35rem;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.6);
    background: rgba(255,255,255,0.95);
    box-shadow: 0 4px 10px rgba(15,23,42,0.08);
    cursor: pointer;
    z-index: 5;
    color: #475569;
}
.tab-rename-trigger { display: none; }
.tab-button:hover .tab-rename-trigger,
.tab-button:focus-visible .tab-rename-trigger { display: inline-flex !important; }
.tab-button.active .tab-rename-trigger { display: inline-flex !important; }
.tab-rename-trigger .icon { width: 11px; height: 11px; }
.dark .tab-rename-trigger {
    border-color: #1f2937;
    background: rgba(17,24,39,0.9);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    color: #e2e8f0;
}

/* Workspace / scenario tabs */
.workspace-tab-wrap {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: visible;
}
.workspace-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
    overflow: visible;
    font-family: 'Space Grotesk','Inter',sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
    min-height: 2.25rem;
}
.workspace-tab .workspace-label {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.workspace-tab .workspace-rename {
    display: none !important;
    max-width: 12rem;
    width: 100%;
    text-align: center;
    position: absolute;
    inset: 0.2rem 0.4rem;
    background: rgba(255,255,255,0.96);
    border-radius: 0.5rem;
    height: calc(100% - 0.4rem);
}
.dark .workspace-tab .workspace-rename {
    background: rgba(30, 41, 59, 0.96);
    color: #e2e8f0;
}
.workspace-tab.is-renaming .workspace-label { display: none; }
.workspace-tab.is-renaming .workspace-rename { display: block !important; }
.workspace-tab .tab-rename-trigger { display: none; }
.workspace-tab:hover .tab-rename-trigger,
.workspace-tab:focus-visible .tab-rename-trigger { display: inline-flex !important; }
.workspace-tab .workspace-close {
    position: absolute;
    top: -0.55rem;
    right: -0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    background: var(--card-bg);
    border: 1px solid var(--section-border);
    color: #ef4444;
    box-shadow: none;
}
.dark .workspace-tab .workspace-close {
    background: var(--card-bg);
    border-color: var(--section-border);
    color: #fca5a5;
}
.workspace-rename-trigger .icon { width: 12px; height: 12px; color: #94a3b8; }

/* ------------------------------------------------------------------------- */
/* UI Refresh: navigation + hero snapshot                                    */
/* ------------------------------------------------------------------------- */
.app-nav {
    position: relative;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: visible;
    min-height: var(--banner-height);
    height: var(--banner-height);
}

#stickyBanner {
    position: fixed;
    top: var(--layout-padding);
    left: calc(var(--layout-padding) + var(--sidebar-width) + var(--layout-gap));
    right: var(--layout-padding);
    z-index: 60;
    background: transparent;
    padding: 0;
    margin: 0;
    pointer-events: auto;
}

.app-nav::after {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
    z-index: 0;
}
.app-nav > * { position: relative; z-index: 1; }
.dark .app-nav { box-shadow: var(--card-shadow); }

.nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--card-border);
    border-radius: 0.9rem;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 10px 24px rgba(15,23,42,0.12);
    backdrop-filter: blur(6px);
}
.dark .nav-pill {
    background: rgba(17,24,39,0.9);
    border-color: var(--card-border);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.nav-pill-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e, #10b981);
    box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
}
.nav-pill-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-pill-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-base);
}
.nav-pill-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.dark .nav-pill-sub { color: #cbd5e1; }

.insight-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(15,23,42,0.08);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
    isolation: isolate;
}
.insight-hero::before,
.insight-hero::after {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 24% 30%, rgba(var(--accent-rgb), 0.08), transparent 35%),
                radial-gradient(circle at 78% 18%, rgba(245, 158, 11, 0.06), transparent 30%);
    transform: rotate(-2deg);
    z-index: 0;
    pointer-events: none;
}
.insight-hero::after {
    inset: 0;
    background: none;
}
.dark .insight-hero {
    background: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.dark .insight-hero::after {
    background: none;
}
.insight-hero__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.insight-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--accent);
}
.dark .insight-eyebrow { color: var(--emerald-400); }
.insight-title {
    font-family: 'Playfair Display','Space Grotesk',serif;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--text-base);
}
.insight-sub {
    color: var(--text-muted);
    max-width: 720px;
    line-height: 1.5;
}
.insight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.2rem;
}
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--card-border);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    color: var(--text-base);
    background: var(--card-bg);
    box-shadow: 0 1px 2px rgba(15,23,42,0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.cta-button:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15,23,42,0.1); }
.cta-button:active { transform: translateY(0); }
.cta-button.primary {
    background: var(--success);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}
.cta-button.ghost {
    background: var(--card-bg);
    color: var(--text-base);
}
.cta-button.subtle {
    background: rgba(16,185,129,0.08);
    color: #059669;
    border-color: rgba(16,185,129,0.2);
}
.dark .cta-button {
    background: var(--card-bg);
    color: var(--text-base);
    border-color: var(--card-border);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.dark .cta-button.primary {
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.dark .cta-button.ghost { background: var(--card-bg); }
.dark .cta-button.subtle {
    background: rgba(34,197,94,0.12);
    color: #34d399;
    border-color: rgba(34,197,94,0.25);
}

/* Hero header layout */
.insight-hero__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 1rem;
}
.insight-hero__header .insight-eyebrow,
.insight-hero__header .insight-title {
    flex: 0 0 auto;
    white-space: nowrap;
}
.insight-hero__header .insight-actions {
    margin-left: auto;
}

/* Hero tiles grid - 6 tiles side by side */
.insight-hero__tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 0;
}
.insight-hero__tiles .summary-tile {
    display: grid;
    grid-template-rows: minmax(1.6rem, auto) auto auto;
    align-items: start;
}
.insight-hero__tiles .summary-tile__label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.6rem;
}
.insight-hero__tiles .summary-tile__value {
    font-size: 1.125rem;
    text-align: left;
}
.insight-hero__tiles .summary-tile__sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 640px) {
    .insight-hero__tiles {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    .insight-hero__tiles {
        grid-template-columns: repeat(8, 1fr);
    }
}

.insight-hero .insight-sub {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.85rem;
    border-radius: 0.8rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.28);
    min-width: 80px;
}

/* ==========================================================================
   Card Summary Tiles (used in Earnings, Pension, Mortgage cards)
   ========================================================================== */
.card-summary {
    background: linear-gradient(to bottom, rgba(248,250,252,0.5), rgba(241,245,249,0.3));
}
.dark .card-summary {
    background: linear-gradient(to bottom, rgba(30,41,59,0.3), rgba(15,23,42,0.2));
}

.summary-tile {
    border-radius: 0.75rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}
.summary-tile:hover {
    transform: translateY(-1px);
}

.summary-tile__label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.summary-tile__value {
    font-size: 1.125rem;
    font-weight: 700;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.summary-tile__sub {
    font-size: 0.6rem;
    opacity: 0.7;
    line-height: 1.2;
}

/* Smaller values for mortgage card tiles */
.mortgage-buy-only .summary-tile__value,
.mortgage-existing-only .summary-tile__value {
    font-size: 0.9rem;
}

/* Slate variant (neutral) */
.summary-tile--slate {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border: 1px solid rgba(148,163,184,0.3);
}
.summary-tile--slate .summary-tile__label { color: #64748b; }
.summary-tile--slate .summary-tile__value { color: #1e293b; }
.summary-tile--slate .summary-tile__sub { color: #64748b; }
.dark .summary-tile--slate {
    background: linear-gradient(135deg, rgba(51,65,85,0.4) 0%, rgba(30,41,59,0.3) 100%);
    border-color: rgba(100,116,139,0.2);
}
.dark .summary-tile--slate .summary-tile__label { color: #94a3b8; }
.dark .summary-tile--slate .summary-tile__value { color: #f1f5f9; }
.dark .summary-tile--slate .summary-tile__sub { color: #94a3b8; }

/* Emerald variant (positive/income) */
.summary-tile--emerald {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid rgba(16,185,129,0.25);
}
.summary-tile--emerald .summary-tile__label { color: #059669; }
.summary-tile--emerald .summary-tile__value { color: #065f46; }
.summary-tile--emerald .summary-tile__sub { color: #059669; }
.dark .summary-tile--emerald {
    background: linear-gradient(135deg, rgba(16,185,129,0.15) 0%, rgba(6,95,70,0.1) 100%);
    border-color: rgba(16,185,129,0.2);
}
.dark .summary-tile--emerald .summary-tile__label { color: #34d399; }
.dark .summary-tile--emerald .summary-tile__value { color: #6ee7b7; }
.dark .summary-tile--emerald .summary-tile__sub { color: #34d399; }

/* Amber variant (warnings/rates) */
.summary-tile--amber {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid rgba(245,158,11,0.25);
}
.summary-tile--amber .summary-tile__label { color: #b45309; }
.summary-tile--amber .summary-tile__value { color: #92400e; }
.summary-tile--amber .summary-tile__sub { color: #b45309; }
.dark .summary-tile--amber {
    background: linear-gradient(135deg, rgba(245,158,11,0.15) 0%, rgba(146,64,14,0.1) 100%);
    border-color: rgba(245,158,11,0.2);
}
.dark .summary-tile--amber .summary-tile__label { color: #fbbf24; }
.dark .summary-tile--amber .summary-tile__value { color: #fcd34d; }
.dark .summary-tile--amber .summary-tile__sub { color: #fbbf24; }

/* Blue variant (info/neutral) */
.summary-tile--blue {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid rgba(59,130,246,0.25);
}
.summary-tile--blue .summary-tile__label { color: #2563eb; }
.summary-tile--blue .summary-tile__value { color: #1e40af; }
.summary-tile--blue .summary-tile__sub { color: #2563eb; }
.dark .summary-tile--blue {
    background: linear-gradient(135deg, rgba(59,130,246,0.15) 0%, rgba(30,64,175,0.1) 100%);
    border-color: rgba(59,130,246,0.2);
}
.dark .summary-tile--blue .summary-tile__label { color: #60a5fa; }
.dark .summary-tile--blue .summary-tile__value { color: #93c5fd; }
.dark .summary-tile--blue .summary-tile__sub { color: #60a5fa; }

/* Purple variant (special/pension) */
.summary-tile--purple {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border: 1px solid rgba(147,51,234,0.25);
}
.summary-tile--purple .summary-tile__label { color: #7c3aed; }
.summary-tile--purple .summary-tile__value { color: #5b21b6; }
.summary-tile--purple .summary-tile__sub { color: #7c3aed; }
.dark .summary-tile--purple {
    background: linear-gradient(135deg, rgba(147,51,234,0.15) 0%, rgba(91,33,182,0.1) 100%);
    border-color: rgba(147,51,234,0.2);
}
.dark .summary-tile--purple .summary-tile__label { color: #a78bfa; }
.dark .summary-tile--purple .summary-tile__value { color: #c4b5fd; }
.dark .summary-tile--purple .summary-tile__sub { color: #a78bfa; }

/* ==========================================================================
   Toast Notification System
   ========================================================================== */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: 360px;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    animation: toast-slide-in 0.3s ease-out;
    min-width: 280px;
}
.toast.toast-exiting {
    animation: toast-slide-out 0.25s ease-in forwards;
}
.dark .toast {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3);
}

.toast-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.toast-content {
    flex: 1;
    min-width: 0;
}
.toast-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-base);
    line-height: 1.3;
}
.toast-message {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 0.125rem;
}

.toast-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background 0.15s, color 0.15s;
    font-size: 16px;
    line-height: 1;
}
.toast-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-base);
}
.dark .toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Toast variants */
.toast-success .toast-icon { background: var(--success-light); color: var(--success); }
.toast-error .toast-icon { background: var(--error-light); color: var(--error); }
.toast-warning .toast-icon { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
.toast-info .toast-icon { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }

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

/* ==========================================================================
   Loading Spinner
   ========================================================================== */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spinner-rotate 0.7s linear infinite;
}
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

/* Loading overlay for buttons and sections */
.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: inherit;
    z-index: 10;
}
.dark .loading-overlay {
    background: rgba(15, 23, 42, 0.8);
}

/* Button with loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
}
.btn-loading .btn-text { opacity: 0.3; }
.btn-loading .spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.insight-hero #headerSurplus,
.insight-hero #insightCashRequired,
.insight-hero #insightInterestSaved {
    color: var(--text-base);
}
.dark .insight-hero #headerSurplus,
.dark .insight-hero #insightCashRequired,
.dark .insight-hero #insightInterestSaved {
    color: var(--text-base);
}
.insight-hero #headerSurplus { color: #059669; }
.dark .insight-hero #headerSurplus { color: #34d399; }

@media (max-width: 1024px) {
    .insight-hero {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .app-nav { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}
@media (max-width: 640px) {
    .insight-hero__stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .insight-title { font-size: 1.35rem; }
    .nav-pill { width: 100%; justify-content: flex-start; }
}

/* ==========================================================================
   VALIDATION WARNINGS
   ========================================================================== */
.validation-warnings-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #fef2f2;
    border: 2px solid #dc2626;
    border-radius: var(--card-radius);
    padding: 0;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    max-width: 480px;
    width: calc(100% - 2rem);
}

.dark .validation-warnings-container {
    background: #450a0a;
    border-color: #b91c1c;
}

.validation-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid #fecaca;
}

.dark .validation-popup__header {
    border-bottom-color: #7f1d1d;
}

.validation-popup__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: #dc2626;
}

.dark .validation-popup__title {
    color: #fca5a5;
}

.validation-popup__close {
    background: transparent;
    border: none;
    color: #dc2626;
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--card-radius-sm);
    transition: background 0.15s ease;
}

.validation-popup__close:hover {
    background: #fecaca;
}

.dark .validation-popup__close {
    color: #fca5a5;
}

.dark .validation-popup__close:hover {
    background: #7f1d1d;
}

.validation-popup__content {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.validation-warnings-container.hidden {
    display: none;
}

.validation-warning,
.validation-error {
    animation: fadeIn 0.2s ease-out;
    background: transparent !important;
    border: none !important;
    color: #dc2626 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dark .validation-warning,
.dark .validation-error {
    color: #fca5a5 !important;
}

.validation-warning svg,
.validation-error svg {
    color: #dc2626 !important;
}

.dark .validation-warning svg,
.dark .validation-error svg {
    color: #fca5a5 !important;
}

.validation-warning span,
.validation-error span {
    color: #dc2626 !important;
}

.dark .validation-warning span,
.dark .validation-error span {
    color: #fca5a5 !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   AI ADVISOR TOGGLE BUTTON
   ========================================================================== */

.ai-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--card-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-toggle-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.ai-toggle-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ai-toggle-btn.is-active {
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25);
}

.ai-toggle-btn__label {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ai-toggle-btn__label {
        display: none;
    }
    .ai-toggle-btn {
        padding: var(--space-2);
    }
}

/* ==========================================================================
   ACCOUNT DROPDOWN COMPONENT
   ========================================================================== */

.account-dropdown {
    position: relative;
}

.account-dropdown__trigger-wrap {
    position: relative;
}

.account-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.account-dropdown__trigger:hover {
    background: var(--section-hover-bg);
    border-color: var(--accent);
}

.account-dropdown__trigger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Avatar */
.account-dropdown__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.account-dropdown__avatar-text {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: white;
    text-transform: uppercase;
}

.account-dropdown__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info section */
.account-dropdown__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    max-width: 120px;
}

.account-dropdown__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.account-dropdown__tier {
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--section-bg);
    color: var(--text-muted);
}

.account-dropdown__tier--pro {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.account-dropdown__tier--premium {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(168, 85, 247, 0.2));
    color: #b45309;
}
.dark .account-dropdown__tier--premium {
    color: #fbbf24;
}

.account-dropdown__chevron {
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.account-dropdown.is-open .account-dropdown__chevron {
    transform: rotate(180deg);
}

/* Menu */
.account-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    padding: var(--space-2);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.account-dropdown.is-open .account-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dark .account-dropdown__menu {
    background: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

/* Menu header */
.account-dropdown__header {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.account-dropdown__email {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-base);
    word-break: break-all;
}

.account-dropdown__tier-badge {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Divider */
.account-dropdown__divider {
    height: 1px;
    background: var(--divider-soft);
    margin: var(--space-1) 0;
}

/* Menu items */
.account-dropdown__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--card-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-base);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.account-dropdown__item:hover {
    background: var(--section-hover-bg);
}

.account-dropdown__item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.account-dropdown__item-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--text-muted);
}

.account-dropdown__item:hover .account-dropdown__item-icon {
    color: var(--accent);
}

/* Danger item */
.account-dropdown__item--danger {
    color: var(--error);
}

.account-dropdown__item--danger .account-dropdown__item-icon {
    color: var(--error);
}

.account-dropdown__item--danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.dark .account-dropdown__item--danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

/* Mobile responsive */
@media (max-width: 640px) {
    .account-dropdown__info {
        display: none;
    }

    .account-dropdown__trigger {
        padding: var(--space-1);
    }

    .account-dropdown__menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: var(--card-radius) var(--card-radius) 0 0;
        max-height: 70vh;
        overflow-y: auto;
        transform: translateY(100%);
    }

    .account-dropdown.is-open .account-dropdown__menu {
        transform: translateY(0);
    }
}

/* ==========================================================================
   AI PANEL ENHANCEMENTS
   ========================================================================== */

/* Context bar - shows data access status */
.ai-panel__context-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(16, 185, 129, 0.08);
    border-bottom: 1px solid rgba(16, 185, 129, 0.15);
    font-size: var(--font-size-xs);
    color: var(--success);
}

.dark .ai-panel__context-bar {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.2);
}

.ai-panel__context-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: ai-pulse 2s infinite;
}

@keyframes ai-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Suggestion chips */
.ai-panel__suggestions {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--divider-soft);
    overflow-x: auto;
    flex-shrink: 0;
}

.ai-suggestion-chip {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--section-bg);
    border: 1px solid var(--card-border);
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-base);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.ai-suggestion-chip:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Footer */
.ai-panel__footer {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--divider-soft);
    font-size: var(--font-size-xs);
    color: var(--text-subtle);
    flex-shrink: 0;
}

.ai-panel__disclaimer {
    font-style: italic;
}

/* Backdrop for mobile (legacy - no longer used with floating window) */
.ai-panel-backdrop {
    display: none;
}

.ai-panel-backdrop--hidden {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   FIXED USER TILE + STICKY METRICS SIDEBAR
   ========================================================================== */

/* Fixed user tile container in top left - transparent, just positions content */
.account-dropdown.account-dropdown--sidebar {
    position: fixed;
    top: var(--layout-padding);
    left: var(--layout-padding);
    width: var(--sidebar-width);
    height: var(--banner-height);
    z-index: 110;
    background: transparent;
    border: none;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
}

/* Sign-in button styled as card tile */
.account-dropdown--sidebar .kpi-drawer__signin {
    width: 100%;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    color: var(--text-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.15s ease;
}

.account-dropdown--sidebar .kpi-drawer__signin:hover {
    border-color: var(--accent);
    background: var(--section-hover-bg);
}

/* User dropdown trigger styled as card tile */
.account-dropdown--sidebar .account-dropdown__trigger-wrap {
    width: 100%;
    height: 100%;
}

.account-dropdown--sidebar .account-dropdown__trigger {
    width: 100%;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 0 var(--space-3);
    box-sizing: border-box;
}

/* Sticky sidebar for metrics - stays visible while scrolling */
.kpi-drawer {
    position: sticky;
    top: calc(var(--layout-padding) + var(--banner-height) + var(--layout-gap));
    width: var(--sidebar-width);
    height: fit-content;
    max-height: calc(100vh - var(--layout-padding) * 2 - var(--banner-height) - var(--layout-gap));
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: var(--layout-gap);
    flex-shrink: 0;
    margin-bottom: var(--layout-padding); /* Match content padding above footer */
}

/* Metrics section - white card */
.kpi-drawer__metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.kpi-drawer__header {
    padding-bottom: var(--space-1);
}

.kpi-drawer__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
}

.kpi-drawer__tiles {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-x: visible;
}

/* Adjust tiles inside drawer for compact display */
.kpi-drawer .summary-tile {
    padding: 0.625rem;
    cursor: help;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-drawer .summary-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.kpi-drawer .summary-tile__label {
    font-size: 0.6rem;
}

.kpi-drawer .summary-tile__value {
    font-size: 0.95rem;
}

.kpi-drawer .summary-tile__sub {
    font-size: 0.55rem;
}

/* Account section in sidebar - white card matching header */
.kpi-drawer__account {
    padding: var(--space-3);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: 0 1px 3px rgba(15,23,42,0.08);
    min-height: var(--banner-height);
    display: flex;
    align-items: center;
}

.kpi-drawer__signin {
    width: 100%;
    padding: 0 var(--space-2);
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--card-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 0.15s ease;
    height: var(--banner-height);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-drawer__signin:hover {
    background: var(--accent-2);
}

/* Sidebar-specific account dropdown styles */
.account-dropdown--sidebar {
    position: relative;
    overflow: visible;
    width: 100%;
}

.account-dropdown--sidebar .account-dropdown__trigger-wrap {
    width: 100%;
    position: relative;
    overflow: visible;
}

.account-dropdown__trigger--compact {
    width: 100%;
    padding: 0 var(--space-2);
    gap: var(--space-2);
    border-radius: var(--card-radius-sm);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    height: var(--banner-height);
}

.account-dropdown__trigger--compact .account-dropdown__avatar {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
}

.account-dropdown__trigger--compact .account-dropdown__name {
    font-size: var(--font-size-xs);
}

.account-dropdown__trigger--compact .account-dropdown__tier {
    font-size: 0.6rem;
}

.account-dropdown__trigger--compact .account-dropdown__chevron {
    width: 12px;
    height: 12px;
}

.account-dropdown__menu--sidebar {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: var(--space-2);
    min-width: 200px;
    z-index: 200;
}

/* -------------------------------------------------------------------------
   DASHBOARD LAYOUT - Wrapper, Sidebar + Content
   ------------------------------------------------------------------------- */

/* Outer wrapper for the entire dashboard */
.dashboard-wrapper {
    min-height: 100vh;
    box-sizing: border-box;
}

/* Beta access lock - blur content until authenticated */
.dashboard-wrapper.beta-locked {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
    transition: filter 0.3s ease;
}

.dashboard-wrapper:not(.beta-locked) {
    filter: none;
    pointer-events: auto;
    user-select: auto;
}

/* Beta gate overlay must remain interactive even when dashboard is locked */
#betaGateOverlay {
    pointer-events: auto;
    filter: none;
}

/* Flex layout for sidebar + content */
.dashboard-layout {
    display: flex;
    gap: var(--layout-gap);
    padding: var(--layout-padding);
    padding-top: calc(var(--layout-padding) + var(--banner-height) + var(--layout-gap));
    align-items: flex-start;
}

/* Main content area */
.dashboard-content {
    flex: 1;
    min-width: 0;
    padding-bottom: var(--layout-padding);
}

/* -------------------------------------------------------------------------
   2-COLUMN LAYOUT: Input Forms | Chart
   ------------------------------------------------------------------------- */

.layout-shell--2col {
    display: grid;
    grid-template-columns: minmax(320px, 480px) minmax(300px, 1fr);
    gap: var(--layout-gap);
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* -------------------------------------------------------------------------
   LAYOUT MAIN - Left column for input forms
   ------------------------------------------------------------------------- */

.layout-main {
    min-width: 0; /* Prevent grid blowout */
}

/* -------------------------------------------------------------------------
   LAYOUT CHART - Right column for chart
   ------------------------------------------------------------------------- */

.layout-chart {
    position: sticky;
    top: calc(var(--layout-padding) + var(--banner-height) + var(--layout-gap));
    min-width: 0;
    height: fit-content;
    max-height: calc(100vh - var(--layout-padding) - var(--banner-height) - var(--layout-gap) - var(--layout-padding));
    align-self: start;
}

/* -------------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------------------- */

/* Tablet - Drawer stays visible but narrower */
@media (max-width: 1280px) {
    :root {
        --sidebar-width: 130px;
        --layout-padding: var(--space-3);
    }
    
    .layout-shell--2col {
        grid-template-columns: minmax(280px, 420px) minmax(250px, 1fr);
    }
}

/* Small tablet - narrower sidebar */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 120px;
    }
    
    .layout-shell--2col {
        grid-template-columns: minmax(260px, 400px) minmax(200px, 1fr);
    }
    
    .kpi-drawer .summary-tile__value {
        font-size: 0.85rem;
    }
}

/* Mobile - Single column layout, hide sidebar */
@media (max-width: 900px) {
    :root {
        --sidebar-width: 0px;
        --layout-padding: var(--space-2);
        --layout-gap: var(--space-2);
    }
    
    .kpi-drawer,
    .account-dropdown--sidebar {
        display: none;
    }

    .dashboard-layout {
        padding-top: calc(var(--layout-padding) + 60px + var(--layout-gap));
    }

    #stickyBanner {
        left: var(--layout-padding);
        right: var(--layout-padding);
    }

    .layout-shell--2col {
        grid-template-columns: 1fr;
        gap: var(--layout-gap);
    }

    .layout-chart {
        position: static;
    }
}

/* Mobile Small */
@media (max-width: 480px) {
    :root {
        --layout-padding: var(--space-2);
    }

    .dashboard-layout {
        padding-top: calc(var(--layout-padding) + 80px + var(--layout-gap));
    }

    .layout-shell--2col {
        padding: 0;
    }
}

/* -------------------------------------------------------------------------
   COMPARE MODAL BLUR EFFECT
   ------------------------------------------------------------------------- */

.compare-modal-blur {
    filter: blur(4px);
    pointer-events: none;
    transition: filter 0.2s ease;
}

/* -------------------------------------------------------------------------
   SCENARIO COMPARISON GRID
   ------------------------------------------------------------------------- */

.compare-grid {
    display: grid;
    grid-template-columns: minmax(140px, 180px) repeat(var(--scenario-count, 2), minmax(120px, 1fr));
    gap: 0;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    overflow: hidden;
    background: var(--card-bg);
}

.compare-header-row {
    display: contents;
}

.compare-header-row > * {
    background: var(--section-bg);
    border-bottom: 1px solid var(--card-border);
}

.compare-metric-row {
    display: contents;
}

.compare-metric-row:last-child > * {
    border-bottom: none;
}

.compare-metric-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3);
    background: var(--section-bg);
    border-right: 1px solid var(--card-border);
    border-bottom: 1px solid var(--divider-soft);
}

.compare-metric-label--header {
    font-weight: var(--font-weight-semibold);
}

.compare-metric-label__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.compare-metric-label__sub {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.compare-scenario-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    text-align: center;
    border-right: 1px solid var(--card-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compare-scenario-header:last-child {
    border-right: none;
}

.compare-metric-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    text-align: center;
    border-right: 1px solid var(--card-border);
    border-bottom: 1px solid var(--divider-soft);
    transition: background-color 0.15s ease;
}

.compare-metric-cell:last-child {
    border-right: none;
}

.compare-metric-cell:hover {
    background: var(--section-bg);
}

.compare-metric-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: 'Space Grotesk', var(--font-family-sans);
    color: var(--text-primary);
}

.compare-delta {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.compare-delta--positive {
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.compare-delta--negative {
    color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

/* Metric cell color variants */
.compare-metric-cell--emerald .compare-metric-value {
    color: var(--success);
}

.compare-metric-cell--amber .compare-metric-value {
    color: var(--warning);
}

.compare-metric-cell--slate .compare-metric-value {
    color: var(--text-primary);
}

/* Comparison chart container */
.compare-chart-container {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    background: var(--section-bg);
}

.compare-chart-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.compare-chart-wrapper {
    height: 280px;
    position: relative;
}

/* Responsive adjustments for comparison grid */
@media (max-width: 768px) {
    .compare-grid {
        grid-template-columns: minmax(100px, 130px) repeat(var(--scenario-count, 2), minmax(90px, 1fr));
        font-size: var(--font-size-sm);
    }

    .compare-metric-label,
    .compare-scenario-header,
    .compare-metric-cell {
        padding: var(--space-2);
    }

    .compare-metric-value {
        font-size: var(--font-size-sm);
    }

    .compare-chart-wrapper {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .compare-grid {
        grid-template-columns: minmax(80px, 100px) repeat(var(--scenario-count, 2), minmax(70px, 1fr));
    }

    .compare-metric-label__name {
        font-size: var(--font-size-xs);
    }

    .compare-metric-label__sub {
        display: none;
    }

    .compare-metric-value {
        font-size: var(--font-size-xs);
    }

    .compare-delta {
        font-size: 10px;
        padding: 1px 4px;
    }
}

/* -------------------------------------------------------------------------
   AUTOFILL BACKGROUND FIX
   Override browser autofill styles to maintain dark mode appearance
   ------------------------------------------------------------------------- */

/* Light mode autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #0f172a !important;
    caret-color: #0f172a !important;
}

/* Dark mode autofill */
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus,
.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1e293b inset !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    caret-color: #f1f5f9 !important;
}

/* Specific fix for beta gate waitlist input */
.dark #betaWaitlistEmail:-webkit-autofill,
.dark #betaWaitlistEmail:-webkit-autofill:hover,
.dark #betaWaitlistEmail:-webkit-autofill:focus,
.dark #betaWaitlistEmail:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #334155 inset !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    caret-color: #f1f5f9 !important;
    border-color: #475569 !important;
}

/* ==========================================================================
   RSU & DEDUCTION CARD LAYOUT FIXES
   Hide empty containers so flex gap doesn't create extra space
   ========================================================================== */

/* Hide empty RSU/deduction containers so they don't affect flex gap */
[id^="rsuContainer-"]:empty,
[id^="deductionsSection-"]:empty {
    display: none;
}

/* ==========================================================================
   TAX RULES LIVE STATUS BUTTON
   Pulsating "live" indicator similar to landing page
   ========================================================================== */

.tax-rules-live-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.1);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dark .tax-rules-live-btn {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
}

.tax-rules-live-btn:hover {
    border-color: var(--accent-2);
    background: rgba(16, 185, 129, 0.2);
}

.dark .tax-rules-live-btn:hover {
    background: rgba(16, 185, 129, 0.25);
}

.tax-rules-live-text {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.tax-rules-live-year {
    color: var(--text-primary);
    font-weight: 600;
}

/* ==========================================================================
   TAX RULES MODAL OVERLAY
   Higher z-index to appear above banner and sidebar, with blur effect
   ========================================================================== */

.tax-rules-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tax-rules-modal-overlay.hidden {
    display: none;
}

/* When modal is open, add class to body to handle any additional styling */
body.tax-rules-modal-open #stickyBanner,
body.tax-rules-modal-open .kpi-drawer {
    filter: blur(4px);
    pointer-events: none;
}

/* ==========================================================================
   GUIDED TOUR
   Interactive walkthrough overlay, spotlight, and popover
   ========================================================================== */

/* Prevent body scroll during tour */
body.tour-active {
    overflow: hidden;
}

/* Blur background for intro/welcome step */
/* Blur everything except the tour UI elements */
body.tour-blur-background > :not(.tour-overlay):not(.tour-spotlight):not(.tour-popover) {
    filter: blur(4px);
}

/* Semi-transparent overlay - blocks interaction outside tour */
.tour-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9990;
}

/* Spotlight cutout around target element */
.tour-spotlight {
    position: absolute;
    z-index: 9991;
    border-radius: 8px;
    box-shadow: 
        0 0 0 9999px rgba(15, 23, 42, 0.6),
        0 0 0 4px rgba(var(--accent-rgb), 0.45),
        0 0 20px rgba(var(--accent-rgb), 0.28);
    pointer-events: none;
    /* Subtle fade transition for smooth step changes */
    transition: opacity 0.1s ease-out;
}

/* No border variant for elements that already have visual styling (like AI button) */
.tour-spotlight.no-border {
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.6);
}

.tour-spotlight.transitioning {
    opacity: 0.3;
}

/* Tour popover card */
.tour-popover {
    position: absolute;
    z-index: 10000;
    --tour-popover-bg: var(--slate-800, #1e293b);
    --tour-popover-border: var(--slate-700, #334155);
    --tour-arrow-size: 10px;
    --tour-arrow-border: 1px;
    --tour-arrow-outer: calc(var(--tour-arrow-size) + var(--tour-arrow-border));
    --tour-arrow-x: 50%;
    --tour-arrow-y: 50%;
    background: var(--tour-popover-bg);
    color: var(--slate-100, #f1f5f9);
    border: 1px solid var(--tour-popover-border);
    border-radius: 12px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(var(--accent-rgb), 0.22);
    width: 340px;
    max-width: calc(100vw - 32px);
    outline: none;
    overflow: visible;
    animation: tour-popover-enter 0.15s ease-out;
}

@keyframes tour-popover-enter {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Close button */
.tour-popover__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--slate-400, #94a3b8);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tour-popover__close:hover {
    background: var(--slate-700, #334155);
    color: var(--slate-100, #f1f5f9);
}

/* Content area */
.tour-popover__content {
    padding: 20px 20px 16px;
}

.tour-popover__title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    padding-right: 24px;
}

.tour-popover__description {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--slate-300, #cbd5e1);
}

/* Footer with progress and actions */
.tour-popover__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--slate-700, #334155);
    gap: 12px;
}

.tour-popover__progress {
    flex-shrink: 0;
}

.tour-popover__step-indicator {
    font-size: 12px;
    color: var(--slate-400, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.tour-popover__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Tour buttons */
.tour-popover__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.tour-popover__btn--prev {
    background: transparent;
    color: var(--slate-400, #94a3b8);
    border: 1px solid var(--slate-600, #475569);
}

.tour-popover__btn--prev:hover {
    background: var(--slate-700, #334155);
    color: var(--slate-100, #f1f5f9);
    border-color: var(--slate-500, #64748b);
}

.tour-popover__btn--next {
    background: var(--accent, #059669);
    color: #fff;
}

.tour-popover__btn--next:hover {
    background: var(--accent-2, #10b981);
}

.tour-popover__btn--skip {
    background: transparent;
    color: var(--slate-500, #64748b);
    font-size: 12px;
    padding: 4px 8px;
}

.tour-popover__btn--skip:hover {
    color: var(--slate-300, #cbd5e1);
    text-decoration: underline;
}

/* Arrow pointing to target - arrow appears on the side facing the target */
/* data-arrow="top" means popover is ABOVE target, so arrow points DOWN from bottom of popover */
/* data-arrow="bottom" means popover is BELOW target, so arrow points UP from top of popover */
/* data-arrow="left" means popover is LEFT of target, so arrow points RIGHT from right side of popover */
/* data-arrow="right" means popover is RIGHT of target, so arrow points LEFT from left side of popover */
.tour-popover::before,
.tour-popover::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    pointer-events: none;
    display: none;
}

.tour-popover[data-arrow="top"]::before,
.tour-popover[data-arrow="top"]::after,
.tour-popover[data-arrow="bottom"]::before,
.tour-popover[data-arrow="bottom"]::after,
.tour-popover[data-arrow="left"]::before,
.tour-popover[data-arrow="left"]::after,
.tour-popover[data-arrow="right"]::before,
.tour-popover[data-arrow="right"]::after {
    display: block;
}

/* Popover is ABOVE target - arrow at BOTTOM pointing DOWN */
.tour-popover[data-arrow="top"]::before {
    top: 100%;
    left: var(--tour-arrow-x);
    transform: translateX(-50%);
    border-width: var(--tour-arrow-outer) var(--tour-arrow-outer) 0 var(--tour-arrow-outer);
    border-color: var(--tour-popover-border) transparent transparent transparent;
}
.tour-popover[data-arrow="top"]::after {
    top: calc(100% - var(--tour-arrow-border));
    left: var(--tour-arrow-x);
    transform: translateX(-50%);
    border-width: var(--tour-arrow-size) var(--tour-arrow-size) 0 var(--tour-arrow-size);
    border-color: var(--tour-popover-bg) transparent transparent transparent;
}

/* Popover is BELOW target - arrow at TOP pointing UP */
.tour-popover[data-arrow="bottom"]::before {
    bottom: 100%;
    left: var(--tour-arrow-x);
    transform: translateX(-50%);
    border-width: 0 var(--tour-arrow-outer) var(--tour-arrow-outer) var(--tour-arrow-outer);
    border-color: transparent transparent var(--tour-popover-border) transparent;
}
.tour-popover[data-arrow="bottom"]::after {
    bottom: calc(100% - var(--tour-arrow-border));
    left: var(--tour-arrow-x);
    transform: translateX(-50%);
    border-width: 0 var(--tour-arrow-size) var(--tour-arrow-size) var(--tour-arrow-size);
    border-color: transparent transparent var(--tour-popover-bg) transparent;
}

/* Popover is LEFT of target - arrow at RIGHT pointing RIGHT */
.tour-popover[data-arrow="left"]::before {
    left: 100%;
    top: var(--tour-arrow-y);
    transform: translateY(-50%);
    border-width: var(--tour-arrow-outer) 0 var(--tour-arrow-outer) var(--tour-arrow-outer);
    border-color: transparent transparent transparent var(--tour-popover-border);
}
.tour-popover[data-arrow="left"]::after {
    left: calc(100% - var(--tour-arrow-border));
    top: var(--tour-arrow-y);
    transform: translateY(-50%);
    border-width: var(--tour-arrow-size) 0 var(--tour-arrow-size) var(--tour-arrow-size);
    border-color: transparent transparent transparent var(--tour-popover-bg);
}

/* Popover is RIGHT of target - arrow at LEFT pointing LEFT */
.tour-popover[data-arrow="right"]::before {
    right: 100%;
    top: var(--tour-arrow-y);
    transform: translateY(-50%);
    border-width: var(--tour-arrow-outer) var(--tour-arrow-outer) var(--tour-arrow-outer) 0;
    border-color: transparent var(--tour-popover-border) transparent transparent;
}
.tour-popover[data-arrow="right"]::after {
    right: calc(100% - var(--tour-arrow-border));
    top: var(--tour-arrow-y);
    transform: translateY(-50%);
    border-width: var(--tour-arrow-size) var(--tour-arrow-size) var(--tour-arrow-size) 0;
    border-color: transparent var(--tour-popover-bg) transparent transparent;
}

/* Resume modal */
.tour-resume-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    animation: fade-in 0.2s ease;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tour-resume-modal__content {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: calc(100% - 32px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.dark .tour-resume-modal__content {
    background: var(--slate-800, #1e293b);
    border: 1px solid var(--slate-700, #334155);
}

.tour-resume-modal__content h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.tour-resume-modal__content p {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

.tour-resume-modal__actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.tour-resume-modal__btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tour-resume-modal__btn--primary {
    background: var(--accent, #059669);
    color: #fff;
}

.tour-resume-modal__btn--primary:hover {
    background: var(--accent-2, #10b981);
}

.tour-resume-modal__btn--secondary {
    background: var(--slate-200, #e2e8f0);
    color: var(--slate-700, #334155);
}

.dark .tour-resume-modal__btn--secondary {
    background: var(--slate-700, #334155);
    color: var(--slate-200, #e2e8f0);
}

.tour-resume-modal__btn--secondary:hover {
    background: var(--slate-300, #cbd5e1);
}

.dark .tour-resume-modal__btn--secondary:hover {
    background: var(--slate-600, #475569);
}

.tour-resume-modal__btn--ghost {
    background: transparent;
    color: var(--text-muted);
}

.tour-resume-modal__btn--ghost:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .tour-popover {
        width: calc(100vw - 24px);
        max-width: 320px;
    }
    
    .tour-popover__content {
        padding: 16px;
    }
    
    .tour-popover__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px 16px;
    }
    
    .tour-popover__progress {
        text-align: center;
    }
    
    .tour-popover__actions {
        justify-content: center;
    }
}

/* ==========================================================================
   PRIVATE SYNC MODAL
   ========================================================================== */

.private-sync-modal__panel {
    width: min(560px, calc(100vw - 2rem));
    max-height: calc(100vh - 2.5rem);
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.875rem;
    box-shadow: var(--card-shadow-elevated);
    padding: 0.72rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow-y: auto;
}

.private-sync-modal__panel--unlocked {
    border-color: rgba(16, 185, 129, 0.34);
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.6), 0 0 0 1px rgba(16, 185, 129, 0.22);
}

.private-sync-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--divider-soft);
    padding-bottom: 0.45rem;
}

.private-sync-modal__eyebrow {
    margin: 0;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
}

.private-sync-modal__title {
    margin: 0.2rem 0 0;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-primary);
}

.private-sync-modal__close {
    height: 2rem;
    width: 2rem;
    border-radius: 0.48rem;
    border: 1px solid var(--card-border);
    color: var(--text-subtle);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.private-sync-modal__close:hover {
    background: var(--section-bg);
    color: var(--text-primary);
}

.private-sync-modal__status {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
}

.private-sync-badge {
    padding: 0.14rem 0.42rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
}

.private-sync-badge--enabled {
    border-color: rgba(16, 185, 129, 0.35);
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.private-sync-badge--disabled {
    border-color: rgba(148, 163, 184, 0.35);
    color: var(--text-subtle);
    background: rgba(148, 163, 184, 0.08);
}

.private-sync-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.private-sync-session {
    display: flex;
    gap: 0.34rem;
    flex-wrap: wrap;
}

.private-sync-session__chip {
    border-radius: 999px;
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.12);
    color: #34d399;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 0.12rem 0.45rem;
    letter-spacing: 0.01em;
}

.private-sync-message {
    font-size: 0.7rem;
    border: 1px solid var(--card-border);
    background: var(--section-bg);
    color: var(--text-muted);
    border-radius: 0.48rem;
    padding: 0.38rem 0.5rem;
}

.private-sync-message--error {
    border-color: rgba(248, 113, 113, 0.35);
    color: var(--error);
    background: rgba(239, 68, 68, 0.08);
}

.private-sync-message--success {
    border-color: rgba(16, 185, 129, 0.35);
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.private-sync-pin-modal {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(2, 6, 23, 0.68);
    backdrop-filter: blur(1px);
    border-radius: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.72rem;
}

.private-sync-pin-modal__panel {
    width: min(420px, 100%);
    border: 1px solid var(--card-border);
    border-radius: 0.75rem;
    background: var(--card-bg);
    box-shadow: var(--card-shadow-elevated);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.private-sync-pin-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
}

.private-sync-pin-modal__title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.private-sync-pin-modal__copy {
    margin: 0;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.private-sync-pin-modal__close {
    height: 1.8rem;
    width: 1.8rem;
    border-radius: 0.48rem;
    border: 1px solid var(--card-border);
    color: var(--text-subtle);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.private-sync-pin-modal__close:hover {
    background: var(--section-bg);
    color: var(--text-primary);
}

.private-sync-pin-modal__error {
    font-size: 0.71rem;
    color: var(--error);
    margin-top: -0.1rem;
}

.private-sync-pin-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.3rem;
}

.private-sync-modal__body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.private-sync-card {
    border: 1px solid var(--card-border);
    border-radius: 0.48rem;
    padding: 0.72rem;
    background: color-mix(in srgb, var(--card-bg) 85%, var(--section-bg));
}

.private-sync-card--flat {
    border: none;
    background: transparent;
    padding: 0;
}

.private-sync-card__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}

.private-sync-card__heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.42rem;
}

.private-sync-card__copy {
    margin: 0.28rem 0 0;
    font-size: 0.71rem;
    color: var(--text-muted);
}

.private-sync-hidden-note {
    margin-top: 0.42rem;
    border: 1px dashed rgba(148, 163, 184, 0.38);
    border-radius: 0.48rem;
    padding: 0.34rem 0.46rem;
    font-size: 0.7rem;
    color: var(--text-subtle);
    background: rgba(15, 23, 42, 0.28);
}

.private-sync-stack {
    margin-top: 0.42rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.private-sync-panel {
    border: 1px solid var(--divider-soft);
    border-radius: 0.48rem;
    background: color-mix(in srgb, var(--card-bg) 88%, var(--section-bg));
    padding: 0.5rem 0.56rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    box-shadow: 0 6px 14px rgba(2, 6, 23, 0.16);
}

.private-sync-panel--cloud {
    border-color: rgba(56, 189, 248, 0.32);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.10), rgba(56, 189, 248, 0.04));
}

.private-sync-panel--unlock {
    border-color: rgba(245, 158, 11, 0.32);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.09), rgba(245, 158, 11, 0.035));
}

.private-sync-panel--lock {
    border-color: rgba(148, 163, 184, 0.3);
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.08), rgba(148, 163, 184, 0.03));
}

.private-sync-panel--recovery {
    border-color: rgba(16, 185, 129, 0.32);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0.04));
}

.private-sync-panel--danger {
    border-color: rgba(248, 113, 113, 0.24);
    background: rgba(248, 113, 113, 0.04);
}

.private-sync-panel__label {
    margin: 0;
    font-size: 0.71rem;
    font-weight: 700;
    color: var(--text-primary);
}

.private-sync-panel__copy {
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.private-sync-panel__meta {
    margin: -0.1rem 0 0;
    font-size: 0.7rem;
    color: #7dd3fc;
    font-weight: 500;
}

.private-sync-panel__actions {
    display: flex;
    gap: 0.34rem;
    flex-wrap: wrap;
}

.private-sync-unlocked-banner {
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 0.48rem;
    padding: 0.42rem 0.58rem;
    font-size: 0.71rem;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.12);
    display: none;
}

.private-sync-phrase {
    margin-top: 0.42rem;
    width: 100%;
    min-height: 2.6rem;
    resize: none;
    border: 1px solid var(--card-border);
    border-radius: 0.5rem;
    background: var(--input-bg);
    color: var(--text-primary);
    padding: 0.42rem;
    font-size: 0.72rem;
    line-height: 1.4;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

.private-sync-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.3rem;
}

.private-sync-form-grid--unlock {
    grid-template-columns: 1fr auto;
}

.private-sync-form-grid--unlock .pill-toggle {
    min-width: 6.5rem;
}

.private-sync-actions {
    margin-top: 0.42rem;
    display: flex;
    gap: 0.3rem;
}

.private-sync-actions .pill-toggle:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.private-sync-actions--wrap {
    flex-wrap: wrap;
}

.private-sync-danger {
    border-color: rgba(248, 113, 113, 0.35);
    color: #f87171;
}

.private-sync-danger:hover {
    border-color: rgba(248, 113, 113, 0.55);
    background: rgba(248, 113, 113, 0.12);
}

@media (max-width: 640px) {
    .private-sync-modal__panel {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
        padding: 0.72rem;
    }
    .private-sync-form-grid--unlock {
        grid-template-columns: 1fr;
    }
}