/* Stock Options Trading Analyzer - Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Material Symbols Base Style - Added for consistency */
.material-symbols-outlined {
    /* Ensures the icon style is flat and correct */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 18px; /* Standardized size for buttons and general use */
    vertical-align: middle;
}

:root {
    /* ── Ledger design system — Phase A token swap (2026-08-28) ──
       Canonical palette lives on the new semantic names; every legacy
       token below is an alias so the existing 2,142 call sites move
       for free. New component work should prefer the semantic names
       directly. See planning/ledger-redesign-and-remediation.md. */
    --paper: #F4F6F2;
    --surface: #FFFFFF;
    --surface-2: #EDF0EA;
    --ink: #111A20;
    --ink-2: #55636A;
    --ink-3: #7C888D;
    --rule: #DCE1DA;
    --rule-strong: #C3CBBF;
    --accent: #2D4A7C;
    --accent-dark: #1D3660;
    --accent-soft: #E4EAF3;
    --crit: #A32B23;
    --crit-soft: #F7E5E3;
    --high: #A75F16;
    --high-soft: #F9EBDC;
    --ok: #2A6349;
    --ok-soft: #E2EFE8;
    --gap: #B9C2BA;
    --info-color: #3D6EA8;
    --shadow-color: rgba(17,26,32,0.12);
    --shadow-color-strong: rgba(17,26,32,0.24);

    /* Invariant — same value in both themes, deliberately not redefined
       under [data-theme="dark"]. UI Phase C (grays): text/border color
       for content sitting on a saturated accent/ok/crit/high fill (buttons,
       badges, pills) never needs to flip with the app theme; only the fill
       itself does. */
    --on-accent: #fff;
    --on-bright: #0f0f0f;

    /* Completes the --ok-soft/--crit-soft/--high-soft quartet — the pale
       "informational" tier paired with --info, same paper-like saturation
       as its three siblings. */
    --info-soft: #E0F2FE;

    /* ── Chart/categorical palette — Phase C2. Deliberately separate from
       the semantic tokens above: these are open-ended tag/legend/series
       colors with no pass/fail/warn meaning, so they must never be reused
       for severity (and vice versa) or semantic color stops meaning
       anything. tag-* is a reusable swatch set for pill/badge/chip
       categorization (position tags, scanner tags, discovery tags,
       PoliTicker chamber badges, institutional card actions); chart-sector-*
       is the fixed 13-category portfolio sector-allocation legend;
       chart-rating-* is the Wall-Street-consensus rating bar's Sell tier
       (its other 4 tiers already correctly reuse --ok/--gap/--crit). ── */
    --tag-blue-bg: #dbeafe;
    --tag-blue-text: #1d4ed8;
    --tag-blue-deep-text: #1e40af;
    --tag-sky-bg: #e8f4fd;
    --tag-sky-text: #1a4a7a;
    --tag-purple-bg: #ede9fe;
    --tag-purple-text: #5b21b6;
    --tag-purple-deep-bg: #ede9fe;
    --tag-purple-deep-text: #4c1d95;
    --tag-pink-bg: #fce7f3;
    --tag-pink-text: #9d174d;
    --tag-rose-bg: #ffe4e6;
    --tag-rose-text: #9f1239;
    --chart-sector-technology: #3b82f6;
    --chart-sector-healthcare: #10b981;
    --chart-sector-financials: #8b5cf6;
    --chart-sector-energy: #A75F16;
    --chart-sector-consumer-disc: #A32B23;
    --chart-sector-consumer-stpl: #6366f1;
    --chart-sector-industrials: #14b8a6;
    --chart-sector-utilities: #84cc16;
    --chart-sector-real-estate: #f97316;
    --chart-sector-communication: #06b6d4;
    --chart-sector-materials: #a16207;
    --chart-sector-broad-market: #94a3b8;
    --chart-sector-cash: #2A6349;
    --chart-rating-sell-bg: #fb923c;
    --chart-rating-sell-text: #ea580c;

    /* ── Legacy token names — aliased, do not add new values here ── */
    --primary: var(--accent);
    --primary-dark: var(--accent-dark);
    --primary-faint: var(--accent-soft);
    --success: var(--ok);
    --danger: var(--crit);
    --warning: var(--high);
    --info: var(--info-color);
    --light: var(--surface-2);
    --dark: var(--ink);
    --border: var(--rule);
    --border-hover: var(--accent);

    --bg-body: var(--paper);
    --bg-surface: var(--surface);
    --bg-hover: var(--surface-2);
    --bg-input: var(--surface);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--ink-3);
    --shadow: var(--shadow-color);
    --shadow-strong: var(--shadow-color-strong);

    /* Card and component radius — ledger geometry: square, not rounded */
    --radius-card: 3px;
    --radius-btn: 3px;
    --radius-input: 3px;
    --radius-badge: 2px;

    /* card-bg alias used throughout */
    --card-bg: var(--surface);
    --background: var(--paper);
    --background-alt: var(--surface-2);

    /* Typography — Phase B: two faces, two jobs (Newsreader dropped
       2026-08-29 — decided not worth a third face for headings alone) */
    --font-ui: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    /* Type scale — held here for Phase E to convert ad-hoc inline
       font-size values onto; not yet consumed anywhere. */
    --fs-xs: 10px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;
    --fs-display: 34px;
}

/* Dark theme — ledger palette, rebuilt as its own set (not an inversion) */
[data-theme="dark"] {
    --paper: #0E1418;
    --surface: #151D22;
    --surface-2: #1B252B;
    --ink: #E9EEEA;
    --ink-2: #9AA8AE;
    --ink-3: #75838A;
    --rule: #25313A;
    --rule-strong: #33434E;
    --accent: #89A9DC;
    --accent-dark: #6F93C7;
    --accent-soft: #1B2735;
    --crit: #E8867C;
    --crit-soft: #2E1C1A;
    --high: #DFA463;
    --high-soft: #2C2318;
    --ok: #7BC09C;
    --ok-soft: #16281F;
    --gap: #3C4A52;
    --info-color: #7EC8E3;
    --shadow-color: rgba(0,0,0,0.50);
    --shadow-color-strong: rgba(0,0,0,0.75);

    --info-soft: #0C3048;
    --tag-blue-bg: #1e3a5f;
    --tag-blue-text: #93c5fd;
    --tag-blue-deep-text: #93c5fd;
    --tag-sky-bg: #1a2a3a;
    --tag-sky-text: #7ab8e8;
    --tag-purple-bg: #2e1065;
    --tag-purple-text: #c4b5fd;
    --tag-purple-deep-bg: #2d1f4a;
    --tag-purple-deep-text: #c4b5fd;
    --tag-pink-bg: #500724;
    --tag-pink-text: #f9a8d4;
    --tag-rose-bg: #3a1020;
    --tag-rose-text: #9f1239;
    --chart-sector-technology: #3b82f6;
    --chart-sector-healthcare: #10b981;
    --chart-sector-financials: #8b5cf6;
    --chart-sector-energy: #DFA463;
    --chart-sector-consumer-disc: #E8867C;
    --chart-sector-consumer-stpl: #6366f1;
    --chart-sector-industrials: #14b8a6;
    --chart-sector-utilities: #84cc16;
    --chart-sector-real-estate: #f97316;
    --chart-sector-communication: #06b6d4;
    --chart-sector-materials: #a16207;
    --chart-sector-broad-market: #94a3b8;
    --chart-sector-cash: #7BC09C;
    --chart-rating-sell-bg: #fb923c;
    --chart-rating-sell-text: #fb923c;
}

body {
    font-family: var(--font-ui);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-y: scroll; /* Always reserve scrollbar track to prevent layout shift on tab switch */
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 5 — App Shell + Sidebar Navigation
   ═══════════════════════════════════════════════════════════════ */

/* ── App Shell: full-viewport flex row ─────────────────────── */
.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg-body);
}

/* ── Sidebar ────────────────────────────────────────────────── */
.app-sidebar {
    width: 220px;
    min-width: 220px;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    flex-shrink: 0;
    transition: width 0.22s ease, min-width 0.22s ease;
    scrollbar-width: none;
}
.app-sidebar::-webkit-scrollbar { display: none; }

/* Logo block */
.sidebar-logo {
    padding: 24px 18px 12px;
    flex-shrink: 0;
    overflow: hidden;       /* v4.13.2 — prevent word overflowing during sidebar width transition */
}
/* Market status pill */
.sidebar-market {
    padding: 4px 14px 12px;
    flex-shrink: 0;
}
.sidebar-countdown {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    white-space: normal;
    word-break: break-word;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    line-height: 1.4;
}

/* Divider */
.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 0 14px 10px;
    flex-shrink: 0;
}

/* Nav section */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    overflow-y: auto;
    scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

/* Override tab-button for sidebar context */
.sidebar-nav .tab-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    border: none;
    border-bottom: none;       /* override horizontal-tab underline */
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 0;
}
.sidebar-nav .tab-button .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
}
.sidebar-nav .tab-button:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-radius: 10px;
}
.sidebar-nav .tab-button.active {
    background: var(--primary-faint);
    color: var(--primary);
    font-weight: 600;
    border-bottom: none;       /* remove horizontal underline */
}
.sidebar-nav .tab-button.scan-locked {
    opacity: 0.4;
    pointer-events: none;
}

/* Stale badge on options button */
.sidebar-nav .tab-button.tab-btn-stale .sidebar-label::after {
    content: ' •';
    color: var(--warning);
}

/* Sidebar label text — hidden when collapsed */
.sidebar-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 0.18s, width 0.18s;
}

/* Footer controls */
.sidebar-footer {
    padding: 10px 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    overflow: visible;
}
/* De-emphasized vs. .sidebar-nav .tab-button on purpose (user decision
   2026-08-30): the two used near-identical styling — same 13px/500-weight/
   20px-icon/--text-secondary treatment — so the primary 7-destination nav
   and this occasional-use utility strip (Backup/Restore/Search/Settings/
   Help) read as one undifferentiated list with no hierarchy. Smaller text,
   lighter weight, smaller icons, --text-muted (dimmer than the nav's
   --text-secondary) at rest; :hover still promotes to --text-primary so
   nothing here reads as disabled, just quiet until you're aiming for it.
   .cmdk-kbd (the ⌘K hint) sets its own color/background independent of
   this rule, so it stays legible at full contrast regardless. */
.sidebar-footer-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}
.sidebar-footer-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.sidebar-footer-btn .material-symbols-outlined {
    font-size: 17px;
    flex-shrink: 0;
}
/* [data-theme="dark"] button (styles.css ~2740/~3164, a bare element+
   attribute selector) sits at higher specificity than a plain class and
   wins every property it shares with .sidebar-footer-btn — including the
   de-emphasis above — regardless of source order. Without this, dark theme
   silently reverted these buttons to the generic dark-button treatment:
   full-bright text and an unwanted 1px border. Reasserted at decisively
   higher specificity (the extra `button` + `:not(:disabled)` on the hover
   variant) rather than relying on source-order tie-breaking. */
[data-theme="dark"] button.sidebar-footer-btn {
    background: none;
    border: none;
    color: var(--text-muted);
}
[data-theme="dark"] button.sidebar-footer-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: transparent;
    color: var(--text-primary);
    box-shadow: none;
}
.sidebar-api-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    transition: background 0.15s;
}
.sidebar-api-chip:hover { background: var(--bg-hover); }
.sidebar-api-chip .api-status-chip-dot { font-size: 10px; flex-shrink: 0; }

/* Sidebar dropdown (backup/restore) */
/* Mobile top header — hidden on desktop/tablet, shown only via ≤600px media query */
.app-mobile-header {
    display: none;
}

/* ── Main content area ──────────────────────────────────────── */
.app-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: var(--bg-body);
}

/* Container inside main — remove top padding, sidebar provides chrome */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 24px 28px;
}

/* Hide old header and tabs (no longer in DOM, but defensive) */
header { display: none; }
.tabs  { display: none; }

/* Tab content: shown/hidden as before */
.tab-content {
    display: none;
    padding-top: 0;
}
.tab-content.active {
    display: block;
}

/* ── Dark mode sidebar ──────────────────────────────────────── */
[data-theme="dark"] .app-sidebar {
    background: var(--bg-surface);
    border-right-color: var(--border);
}
[data-theme="dark"] .sidebar-nav .tab-button.active {
    background: var(--primary-faint);
    color: var(--primary);
}
[data-theme="dark"] .sidebar-footer {
    border-top-color: var(--border);
}

/* ── Collapsed sidebar at ≤ 900px: icon-only ────────────────── */
@media (max-width: 900px) {
    .app-sidebar {
        width: 64px;
        min-width: 64px;
    }
    .sidebar-label,
    .sidebar-tagline,
    .sidebar-market,
    .sidebar-version {
        display: none;
    }
    /* Collapsed-sidebar logo: "S" monogram (word split into initial/rest so
       the rest can hide). HAZARD: the base .strike-logo* block lives LATER
       in this file ("STRIKE wordmark" section), so equal-specificity
       declarations here would LOSE to it if not scoped — this is why every
       rule below is scoped under .app-sidebar (0,2,0), which wins
       regardless of source order. This mirrors a real historical bug
       (v4.18.1) where an unscoped version of this exact rule silently lost
       to the base rule and clipped the wordmark to "STRI". */
    .app-sidebar .strike-logo-rest {
        display: none;
    }
    .sidebar-logo {
        padding: 14px 0;
        display: flex;
        justify-content: center;
    }
    .app-sidebar .strike-logo {
        justify-content: center;
        gap: 6px;
    }
    .app-sidebar .strike-logo-text {
        display: flex;
    }
    .app-sidebar .strike-logo-word {
        font-size: 30px;
    }
    .app-sidebar .strike-logo-bar {
        width: 4px;
        min-height: 28px;
        border-radius: 2px;
    }
    .sidebar-nav .tab-button {
        justify-content: center;
        padding: 10px;
    }
    .sidebar-footer-btn {
        justify-content: center;
        padding: 10px;
    }
    .sidebar-api-chip {
        justify-content: center;
        padding: 10px;
    }
    .sidebar-dropdown-menu {
        left: 100%;
        top: 0;
    }
}

/* ── Mobile: sidebar becomes bottom bar at ≤ 600px ─────────── */
@media (max-width: 600px) {
    .app-shell {
        flex-direction: column;
    }
    .app-sidebar {
        width: 100%;
        min-width: 100%;
        height: auto;
        flex-direction: row;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-right: none;
        border-top: 1px solid var(--border);
        z-index: 200;
        overflow: visible;
    }
    .sidebar-logo,
    .sidebar-market,
    .sidebar-footer {
        display: none;
    }
    .sidebar-nav {
        flex-direction: row;
        flex: 1;
        justify-content: space-around;
        padding: 6px 4px;
        gap: 0;
        overflow: visible;
    }
    .sidebar-nav .tab-button {
        flex-direction: column;
        gap: 3px;
        padding: 6px 8px;
        font-size: 10px;
        border-radius: 8px;
        flex: 1;
        justify-content: center;
        align-items: center;
    }
    .sidebar-label {
        display: block;
        font-size: 10px;
    }
    .app-main {
        padding-bottom: 70px; /* clear the bottom bar */
    }

    /* Mobile top header — visible only on small screens */
    .app-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 150;
    }
    /* Compact logo size on mobile */
    .strike-logo-mobile .strike-logo-word {
        font-size: 26px;
    }
    .strike-logo-mobile .strike-logo-bar {
        width: 4px;
        min-height: 26px;
        border-radius: 2px;
    }
}

/* legacy h1 — kept for help modal headings etc */
h1 {
    font-size: 24px;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 2px;
}

/* v3.5.0 — version badge — now lives at sidebar footer bottom */
.version-badge {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 8px;
    align-self: flex-end;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
    opacity: 0.7;
}

/* Sidebar version number — bottom of footer */
.sidebar-version {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
    text-align: center;
    padding: 6px 12px 2px;
    opacity: 0.55;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
}

.config-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--success);
    font-weight: 500;
}

.config-status-badge.not-configured {
    color: var(--danger);
}

.mkt-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    margin-right: 2px;
}

.header-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Toolbar Backup / Restore dropdown ── */
.toolbar-dropdown {
    position: relative;
    display: inline-flex;
}
.toolbar-dropdown-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 6px 24px color-mix(in srgb, black 12%, transparent);
    overflow: hidden;
    z-index: 500;
    min-width: 160px;
}
.toolbar-dropdown:hover .toolbar-dropdown-menu,
.toolbar-dropdown:focus-within .toolbar-dropdown-menu {
    display: flex;
}
.toolbar-dropdown-item {
    border-radius: 0 !important;
    justify-content: flex-start;
    padding: 10px 16px !important;
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border);
    font-size: 13px !important;
    gap: 8px !important;
    width: 100%;
}
.toolbar-dropdown-item:last-child { border-bottom: none; }
.toolbar-dropdown-item:hover {
    background: var(--bg-hover) !important;
    color: var(--primary) !important;
}
[data-theme="dark"] .toolbar-dropdown-menu {
    background: var(--card-bg);
    border-color: var(--border);
    box-shadow: 0 6px 28px color-mix(in srgb, black 45%, transparent);
}
[data-theme="dark"] .toolbar-dropdown-item {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .toolbar-dropdown-item:hover {
    background: var(--bg-hover) !important;
    color: var(--primary) !important;
}

button {
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-btn, 8px);
    background: var(--primary);
    color: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.18s, box-shadow 0.18s, opacity 0.18s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

button:hover:not(:disabled) {
    background: var(--primary-dark);
    box-shadow: 0 2px 8px rgba(201,106,58,0.25);
}

button:disabled {
    background: var(--gap);
    cursor: not-allowed;
    opacity: 0.6;
}

button.secondary {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

button.secondary:hover:not(:disabled) {
    background: var(--bg-surface);
    border-color: var(--primary);
    color: var(--primary);
}

button.danger {
    background: var(--danger);
}

button.danger:hover:not(:disabled) {
    background: #c82333;
}

button.success {
    background: var(--success);
}

button.success:hover:not(:disabled) {
    background: #218838;
}

button.small {
    padding: 5px 10px;
    font-size: 12px;
}

/* .tabs — hidden in sidebar layout, kept for reference */
.tabs {
    display: none;
}
.tabs::-webkit-scrollbar { display: none; }

/* Base tab-button — minimal; sidebar-nav overrides apply in context */
.tab-button {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color 0.18s, background 0.18s;
    border-radius: 0;
}
.tab-button:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.tab-button.active {
    color: var(--primary);
    font-weight: 600;
}

/* Tab Content */
.tab-content {
    display: none;
    padding-top: 0;
}
.tab-content.active {
    display: block;
}

/* Performance Dashboard */
#performanceDashboard {
    margin-bottom: 30px;
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: var(--radius-card, 3px);
    box-shadow: 0 4px 12px var(--shadow);
}

.stat-card h3 {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
    margin-bottom: 10px;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 5px;
}

.stat-subtitle {
    font-size: 12px;
    opacity: 0.8;
}

.stat-card.success {
    background: linear-gradient(135deg, var(--ok) 0%, var(--ok) 100%);
}

.stat-card.danger {
    background: linear-gradient(135deg, var(--crit) 0%, var(--crit) 100%);
}

.stat-card.warning {
    background: linear-gradient(135deg, var(--high) 0%, var(--high) 100%);
}

/* Sections */
.section {
    background: var(--bg-surface);
    padding: 20px;
    border-radius: var(--radius-card, 12px);
    border: 1px solid var(--border);
    box-shadow: none;
    margin-bottom: 24px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.section-header h2 {
    font-size: 18px;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Phase B2: numeric data face — one declaration for every metric/value
   class, rather than repeating font-family on each. Data role = JetBrains
   Mono + tabular-nums, so columns of numbers align. ── */
.stat-value, .metric-value, .score-value, .price-value, .stats-dash-value,
.inv-bigfive-value, .inv-tool-value, .inv-price-value, .graham-price-value,
.inv-health-value, .inv-gate-value, .lev-value, .tr-stat-value, .beneish-score-value,
.canslim-grid-value, .payoff-stat-value, .backtest-stat-value, .etf-profile-value,
.holdings-value, .totals-value, .dash-stat-value, .dash-snap-value,
.mov-brk-preview-value, .vr-value, .vr-na-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Tables */
.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

th {
    background: var(--bg-body);
    padding: 10px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    vertical-align: middle;
}

td .action-buttons {
    display: flex;
    gap: 5px;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
}

.modal.show {
    display: flex;
}

.modal-content {
    background-color: var(--bg-surface);
    margin: auto;
    border-radius: var(--radius-card, 12px);
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px color-mix(in srgb, black 18%, transparent);
    width: 90%;
    max-width: 600px;
    animation: fadeIn 0.22s;
}

.modal-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Selective Backup/Restore modal + its nested sensitive-category confirm (2026-08-29) */
.backup-restore-modal .modal-content {
    max-width: 480px;
}

.brc-intro {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 14px;
    line-height: 1.5;
}

.brc-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.brc-row:last-of-type {
    border-bottom: none;
}

.brc-row input[type="checkbox"] {
    margin-top: 3px;
    flex: none;
}

.brc-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brc-row-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.brc-row-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.brc-row-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.brc-row-sensitive .brc-row-label {
    color: var(--warning);
}

.brc-sensitive-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    border-radius: var(--radius-badge, 4px);
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
}

.brc-shared-note {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    line-height: 1.5;
}

/* Nested above .backup-restore-modal — same z-index base, later in DOM order
   is enough on its own, but bumped explicitly so stacking never depends on
   markup order if either modal is ever reordered. */
.sensitive-category-warning-modal {
    z-index: 1100;
}

.sensitive-category-warning-modal .modal-content {
    max-width: 420px;
}

.sensitive-category-warning-modal .modal-body p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.sensitive-category-warning-modal .modal-body p:last-child {
    margin-bottom: 0;
    color: var(--text-secondary);
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Forms */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--text-primary);
    font-size: 13px;
}

.form-group small {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 5px;
    line-height: 1.5;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-input, 7px);
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.18s, box-shadow 0.18s;
    background: var(--bg-input, var(--bg-surface));
    color: var(--text-primary);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-faint, rgba(201,106,58,0.12));
    outline: none;
}

textarea {
    resize: vertical;
    min-height: 80px;
}

/* Alerts */
.alert {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-surface);
    padding: 14px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 20px color-mix(in srgb, black 15%, transparent);
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 400px;
    border-left: 3px solid;
    animation: slideIn 0.22s forwards;
    color: var(--text-primary);
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.alert span:first-child {
    font-size: 20px;
}

.alert.success {
    border-left: 4px solid var(--success);
}

.alert.error {
    border-left: 4px solid var(--danger);
}

.alert.warning {
    border-left: 4px solid var(--warning);
}

.alert.info {
    border-left: 4px solid var(--info);
}

.loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--rule);
    border-top: 2px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 5px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Strategy Card Styles */
.strategy-card {
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 20px;
}

.strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.strategy-title h3 {
    font-size: 16px;
    color: var(--primary-dark);
    margin-bottom: 5px;
}

.strategy-title small {
    font-size: 12px;
    color: var(--text-secondary);
}

.strategy-metrics {
    display: flex;
    gap: 15px;
}

.metric {
    text-align: center;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--background-alt);
}

.metric-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.metric-value {
    font-size: 18px;
    font-weight: 700;
}

.strategy-setup {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--border);
}

.strategy-setup h4 {
    font-size: 14px;
    color: var(--dark);
    margin-bottom: 10px;
}

.strategy-setup ul {
    list-style: none;
    padding: 0;
}

.strategy-setup li {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.strategy-setup li strong {
    font-weight: 600;
}

.pop-bar {
    background: var(--background-alt);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    margin-top: 5px;
}

.pop-fill {
    height: 100%;
    background: var(--success);
    transition: width 0.5s;
}

/* In-Play Positions */
.position-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 12px);
    margin-bottom: 15px;
    overflow: hidden;
}

.position-header {
    background: var(--bg-hover);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.position-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.position-pnl {
    font-size: 24px;
    font-weight: 700;
}

.position-pnl.profit {
    color: var(--success);
}

.position-pnl.loss {
    color: var(--danger);
}

.position-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}

.position-detail {
    display: flex;
    justify-content: space-between;
}

.position-detail strong {
    color: var(--text-secondary);
}

/* Tables */
.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

th {
    background: var(--bg-body);
    padding: 10px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    vertical-align: middle;
}

td .action-buttons {
    display: flex;
    gap: 5px;
}

.text-center {
    text-align: center;
}

.text-muted {
    color: var(--text-muted);
    font-size: 12px;
}

.text-success {
    color: var(--success);
    font-weight: 600;
}

.text-danger {
    color: var(--danger);
    font-weight: 600;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    background: var(--bg-surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-card, 12px);
    margin-top: 20px;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 40px;
    color: var(--primary);
    margin-bottom: 15px;
}

.empty-state h3 {
    font-size: 18px;
    color: var(--dark);
    margin-bottom: 10px;
}

.empty-state p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* Code Block in Modals */
.code-block {
    background: #272822;
    color: #f8f8f2;
    padding: 15px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 13px;
    white-space: pre-wrap;
    overflow-x: auto;
    margin-bottom: 15px;
}

.code-block h4 {
    color: #4ec9b0;
    font-size: 14px;
    margin-bottom: 10px;
}

.code-block ol {
    margin-left: 20px;
}

.code-block li {
    margin-bottom: 8px;
}

.copy-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.copy-button.copied::after {
    content: 'Copied!';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--success);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    animation: fadeOut 2s;
}

@keyframes fadeOut {
    0%, 50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Move Ticker Dropdown */
.move-dropdown {
    position: relative;
    display: inline-block;
}

.move-dropdown select {
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-surface);
    cursor: pointer;
    min-width: 120px;
}

.move-dropdown select:hover {
    border-color: var(--primary);
}
/* ============================================ */
/* STRATEGY CARDS & TOP 15 PLAYS STYLES */
/* ============================================ */

/* Top 15 Header */
.top15-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--light);
    border-radius: 6px;
}

.strategy-stats {
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 14px;
}

.strategy-stats strong {
    color: var(--primary);
    font-size: 18px;
}

/* Strategies Grid */
.strategies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    margin-top: 20px;
    align-items: stretch; /* Ensure all grid items stretch to same height */
}

/* Strategy Card */
.strategy-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 12px);
    padding: 20px;
    box-shadow: none;
    transition: border-color 0.18s;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.strategy-card:hover {
    border-color: var(--primary);
    box-shadow: none;
    transform: none;
}

.strategy-card.error-card {
    background: #fff3f3;
    border-color: var(--danger);
}

/* Strategy Rank Badge */
.strategy-rank {
    position: absolute;
    top: -10px;
    left: -10px;
    background: var(--primary);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(201,106,58,0.35);
}

/* Strategy Header */
.strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-top: 10px;
}

.strategy-ticker-name h3 {
    font-size: 24px;
    color: var(--dark);
    margin-bottom: 5px;
}

.strategy-name {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.strategy-score {
    text-align: right;
}

.score-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.score-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
}

/* Strategy Metrics */
.strategy-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
    padding: 15px;
    background: var(--light);
    border-radius: 6px;
}

.metric {
    display: flex;
    flex-direction: column;
}

.metric-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.metric-value {
    font-size: 18px;
    font-weight: 600;
}

.metric-value.high-prob {
    color: var(--success);
}

.metric-value.medium-prob {
    color: var(--warning);
}

.metric-value.low-prob {
    color: var(--danger);
}

/* Strategy Details */
.strategy-details {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.strategy-rationale {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 15px;
    min-height: 4.8em; /* Ensures space for 3 lines (1.6 line-height × 3 = 4.8em) */
}

.trade-setup {
    background: var(--bg-hover);
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    margin-top: auto; /* Push to bottom of flex container */
}

.trade-setup h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--dark);
}

.trade-setup ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trade-setup li {
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text-secondary);
}

.trade-setup li strong {
    color: var(--dark);
    font-weight: 600;
}

/* Strategy Actions */
.strategy-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.strategy-actions button {
    flex: 1;
}

/* v4.17.1 — the ☆ watch toggle is icon-sized; the freed width goes to
   "Move to In-Play" (the primary action on a play card). */
.strategy-actions .play-watch-btn {
    flex: 0 0 auto;
    width: 46px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}
.strategy-actions button.success {
    flex: 2;
}

/* Strategy Detail Modal */
.strategy-detail-content {
    max-height: 600px;
    overflow-y: auto;
}

.detail-section {
    margin-bottom: 25px;
}

.detail-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--light);
}

.detail-section p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}

.detail-section ul {
    list-style: none;
    padding: 0;
}

.detail-section li {
    font-size: 14px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--light);
    border-radius: 4px;
}

.detail-section li strong {
    color: var(--dark);
    font-weight: 600;
}

/* Fidelity Instructions */
.fidelity-instructions {
    background: #f0f9ff;
    padding: 15px;
    border-radius: 6px;
    border-left: 4px solid var(--primary);
}

.fidelity-instructions h3 {
    color: var(--primary);
}

.instructions-text p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.instructions-text p:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .strategies-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

@media (max-width: 768px) {
    .strategies-grid {
        grid-template-columns: 1fr;
    }
    
    .strategy-metrics {
        grid-template-columns: 1fr;
    }
    
    .top15-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .strategy-stats {
        flex-wrap: wrap;
    }
}

/* ============================================ */
/* ANALYSIS PROGRESS OVERLAY */
/* ============================================ */

.analysis-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, black 85%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.analysis-content {
    background: var(--bg-surface);
    padding: 40px;
    border-radius: var(--radius-card, 12px);
    text-align: center;
    max-width: 500px;
    min-width: 400px;
    box-shadow: 0 8px 32px color-mix(in srgb, black 25%, transparent);
    border: 1px solid var(--border);
}

.analysis-spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border: 4px solid var(--light);
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.analysis-content h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--primary);
}

.analysis-content p {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 10px;
}

.analysis-detail {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin-top: 15px !important;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: var(--light);
    border-radius: 5px;
    overflow: hidden;
    margin: 20px 0;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--success) 100%);
    transition: width 0.3s ease;
}

/* ============================================ */
/* MOVE TICKER DROPDOWN & SCORE TOOLTIP */
/* ============================================ */

.actions-cell {
    white-space: nowrap;
}

.actions-cell select,
.actions-cell button {
    display: inline-block;
    vertical-align: middle;
}

.move-ticker-select {
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-surface);
    cursor: pointer;
    margin-right: 5px;
    width: auto;
    min-width: auto;
    max-width: 110px;
}

.move-ticker-select:hover {
    border-color: var(--primary);
}

.score-info-icon {
    display: inline-block;
    font-size: 14px;
    color: var(--primary);
    cursor: help;
    margin-left: 3px;
    opacity: 0.7;
}

.score-info-icon:hover {
    opacity: 1;
}

/* ============================================ */
/* ANALYSIS MODAL & RESULTS */
/* ============================================ */

.analysis-modal-large .modal-content {
    max-width: 900px;
    max-height: 90vh;
}

/* Edit Big Five modal — default width (was an inline style on .modal-content
   in index.html; moved here so the BRK-wide override below can win on
   specificity instead of losing to an inline style). BRK-A/B only, widened:
   the AI Assist results table (.brk-ai-table — Field/Value/Period/Source/
   Conf/Applied) needs real width for its Source citation column, which the
   narrow default clipped against the right edge. Toggled via
   openMetricsOverrideModal() alongside the #mov-brk-panel visibility switch,
   off for every other ticker. */
#metricsOverrideModal .modal-content { max-width: 520px; }
#metricsOverrideModal.mov-brk-wide .modal-content { max-width: 900px; }

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.modal-close-btn:hover {
    color: var(--danger);
}

.loading-spinner {
    border: 4px solid var(--rule);
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.analysis-result {
    font-size: 14px;
    line-height: 1.6;
}

.analysis-header {
    border-bottom: 2px solid var(--border);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.analysis-header h3 {
    font-size: 20px;
    color: var(--primary);
    margin-bottom: 15px;
}

.analysis-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--light);
    border-radius: 6px;
}

.summary-item .label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
}

.analysis-body {
    padding: 20px 0;
}

.analysis-body h2 {
    font-size: 18px;
    color: var(--dark);
    margin-top: 25px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 5px;
}

.analysis-body h3 {
    font-size: 16px;
    color: var(--primary);
    margin-top: 20px;
    margin-bottom: 8px;
}

.analysis-body h4 {
    font-size: 14px;
    color: var(--dark);
    margin-top: 15px;
    margin-bottom: 6px;
    font-weight: 600;
}

.analysis-body p {
    margin-bottom: 12px;
}

.analysis-body ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

.analysis-body li {
    margin-bottom: 8px;
}

.analysis-body strong {
    color: var(--primary);
    font-weight: 600;
}

.error-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.error-state h3 {
    color: var(--danger);
    margin: 15px 0 10px;
}

/* ============================================ */
/* RECOMMENDATIONS LOADING STATE */
/* ============================================ */

.recommendations-loading {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-hover);
    border-radius: 8px;
    margin: 20px 0;
}

.loading-spinner-large {
    border: 6px solid var(--rule);
    border-top: 6px solid var(--primary);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1s linear infinite;
    margin: 0 auto 30px;
}

.recommendations-loading h3 {
    font-size: 24px;
    color: var(--primary);
    margin-bottom: 15px;
}

.loading-status {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.progress-steps {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.3;
    transition: opacity 0.3s;
}

.progress-step.active {
    opacity: 1;
}

.progress-step.completed {
    opacity: 0.6;
}

.progress-step.completed .step-number {
    background: var(--success);
    border-color: var(--success);
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--light);
    border: 3px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: var(--primary);
}

.step-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dark);
    text-align: center;
}

/* ============================================ */
/* PRICE TYPE BADGES */
/* ============================================ */

.price-type-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.price-open {
    background: var(--ok-soft);
    color: #155724;
}

.price-close {
    background: #d1ecf1;
    color: #0c5460;
}

.price-delayed {
    background: #fff3cd;
    color: #856404;
}

/* ============================================ */
/* IGNORE LIST STYLES */
/* ============================================ */

.expired-row {
    background: #fff3cd;
    opacity: 0.7;
}

.expired-row:hover {
    opacity: 1;
}

/* ============================================ */
/* AI RECOMMENDATIONS SECTION */
/* ============================================ */

.recommendations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--light);
    border-radius: 6px;
}

.recommendations-header > div {
    display: flex;
    gap: 15px;
    align-items: center;
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    align-items: stretch; /* Ensure all grid items stretch to same height */
}

.recommendation-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 12px);
    padding: 20px;
    box-shadow: none;
    transition: border-color 0.18s;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.recommendation-card:hover {
    border-color: var(--primary);
    box-shadow: none;
    transform: none;
}

.rec-rank {
    position: absolute;
    top: -10px;
    left: -10px;
    background: var(--primary);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(201,106,58,0.35);
}

.rec-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-top: 10px;
}

.rec-header h3 {
    font-size: 24px;
    color: var(--dark);
    margin-bottom: 5px;
}

.rec-company {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.rec-price {
    text-align: right;
}

.price-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--dark);
}

.price-change {
    font-size: 14px;
    font-weight: 600;
}

.price-change.positive {
    color: var(--success);
}

.price-change.negative {
    color: var(--danger);
}

.rec-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.rec-badge {
    background: var(--light);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.rec-reason,
.rec-catalyst {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
    color: var(--text-primary);
    min-height: 3.2em; /* Ensures space for 2 lines minimum (1.6 line-height × 2 = 3.2em) */
}

.rec-reason strong,
.rec-catalyst strong {
    color: var(--primary);
    font-weight: 600;
}

.rec-strategy {
    margin-top: auto; /* Push to bottom of flex container */
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.rec-strategy h4 {
    font-size: 14px;
    color: var(--primary);
    margin-bottom: 12px;
    font-weight: 600;
}

.rec-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 15px;
}

.rec-metric {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: var(--light);
    border-radius: 6px;
}

.rec-metric .metric-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.rec-metric .metric-value {
    font-size: 18px;
    font-weight: 700;
}

.rec-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.rec-actions button {
    flex: 1;
    min-width: 110px;
}

/* Responsive design for recommendations */
@media (max-width: 1200px) {
    .recommendations-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

@media (max-width: 768px) {
    .recommendations-grid {
        grid-template-columns: 1fr;
    }
    
    .rec-header {
        flex-direction: column;
        gap: 10px;
    }
    
    .rec-price {
        text-align: left;
    }
    
    .rec-actions {
        flex-direction: column;
    }
    
    .rec-actions button {
        width: 100%;
    }
}

/* ============================================
   STRATEGY LINKS (Option Alpha)
   ============================================ */
.strategy-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.strategy-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.external-link-icon {
    font-size: 0.85em;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.strategy-link:hover .external-link-icon {
    opacity: 1;
}

/* Strategy name in cards */
.strategy-name .strategy-link {
    color: var(--text-secondary);
    font-size: 14px;
}

.strategy-name .strategy-link:hover {
    color: var(--primary);
}

/* Strategy in modal title */
#strategyModalTitle .strategy-link {
    color: var(--text-primary);
}

/* Recommended strategy heading */
.rec-strategy h4 .strategy-link {
    color: var(--primary);
}

/* ============================================
   THEME TOGGLE SWITCH
   ============================================ */
.theme-toggle-container {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.theme-toggle {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 32px;
    cursor: pointer;
}

.theme-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--gap);
    transition: 0.3s;
    border-radius: 34px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: var(--primary);
}

input:checked + .toggle-slider:before {
    transform: translateX(38px);
}

.toggle-label-light,
.toggle-label-dark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    transition: opacity 0.3s;
}

.toggle-label-light {
    left: 6px;
}

.toggle-label-dark {
    right: 6px;
    opacity: 0.4;
}

input:checked ~ .toggle-label-light {
    opacity: 0.4;
}

input:checked ~ .toggle-label-dark {
    opacity: 1;
}

/* ============================================
   DARK THEME COMPONENT UPDATES
   ============================================ */

/* Update all surface backgrounds */
.section,
.card,
.modal-content,
.data-table,
.strategy-card,
.recommendation-card,
.stat-card,
.empty-state {
    background: var(--bg-surface);
    transition: background-color 0.3s ease;
}

/* Update all borders */
.section,
.card,
.modal-content,
.data-table,
.strategy-card,
.recommendation-card {
    border-color: var(--border);
}

/* Table styling for dark theme */
.data-table th {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.data-table td {
    border-color: var(--border);
    color: var(--text-primary);
}

.data-table tbody tr:hover {
    background: var(--bg-hover);
}

/* Button updates for dark theme */
button {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

button.secondary {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border);
}

button.secondary:hover {
    background: var(--bg-surface);
}

/* Input fields for dark theme */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    background: var(--bg-hover);
}

/* Modal overlay for dark theme */
.modal {
    background: color-mix(in srgb, black 70%, transparent);
}

[data-theme="dark"] .modal {
    background: color-mix(in srgb, black 85%, transparent);
}

/* Alert styling for dark theme */
.alert {
    box-shadow: 0 4px 12px var(--shadow);
}

/* Empty state for dark theme */
.empty-state {
    color: var(--text-secondary);
}

.empty-state .material-symbols-outlined {
    color: var(--text-muted);
}

/* Code/pre blocks for dark theme */
code,
pre {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border);
}

/* Section headers for dark theme */
.section-header h2 {
    color: var(--text-primary);
}

/* ============================================
   EXPORT BUTTON STYLING
   ============================================ */
.positions-actions,
.history-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}


/* Additional Dark Theme Fixes for Better Contrast */
[data-theme="dark"] select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

[data-theme="dark"] select:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
}

[data-theme="dark"] select:focus {
    background: var(--bg-input);
    border-color: var(--primary);
}

[data-theme="dark"] .fidelity-instructions {
    background: rgba(201,106,58,0.07);
    border-left: 3px solid var(--primary);
}

[data-theme="dark"] .fidelity-instructions h3 {
    color: var(--primary);
}

[data-theme="dark"] .instructions-text p {
    color: var(--text-primary);
}

[data-theme="dark"] .instructions-text p:before {
    color: var(--primary);
}

/* Dark theme button improvements */
[data-theme="dark"] button {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] button:hover:not(:disabled) {
    background: var(--bg-surface);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: none;
}

[data-theme="dark"] button.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-accent);
}

[data-theme="dark"] button.primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

[data-theme="dark"] button.success {
    background: #52c41a;
    color: var(--on-bright);
}

[data-theme="dark"] button.danger {
    background: #ff4d4f;
    color: var(--on-accent);
}

/* Theme Toggle Button Styling */
.theme-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-button:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
}

.theme-button .theme-icon {
    font-size: 20px;
    color: var(--text-primary);
    transition: transform 0.3s ease;
}

.theme-button:hover .theme-icon {
    transform: rotate(20deg);
}

[data-theme="dark"] .theme-button {
    background: var(--bg-hover);
    border-color: var(--border);
}

[data-theme="dark"] .theme-button:hover {
    background: var(--bg-surface);
    border-color: var(--primary);
}

/* ============================================ */
/* DARK MODE - TOP 15 PLAYS / STRATEGY CARDS */
/* ============================================ */

[data-theme="dark"] .strategy-card {
    background: var(--bg-surface);
    border-color: var(--border);
    box-shadow: none;
}

[data-theme="dark"] .strategy-card:hover {
    box-shadow: none;
    background: var(--bg-hover);
}

[data-theme="dark"] .strategy-card.error-card {
    background: color-mix(in srgb, var(--crit) 6%, transparent);
    border-color: var(--danger);
}

/* Strategy Header */
[data-theme="dark"] .strategy-ticker-name h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .strategy-name {
    color: var(--text-secondary);
}

[data-theme="dark"] .strategy-link {
    color: var(--primary);
}

[data-theme="dark"] .strategy-link:hover {
    color: var(--primary-dark);
}

[data-theme="dark"] .external-link-icon {
    color: var(--primary);
}

/* Strategy Score */
[data-theme="dark"] .score-label {
    color: var(--text-muted);
}

[data-theme="dark"] .score-value {
    color: var(--primary);
}

[data-theme="dark"] .score-info-icon {
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-color: var(--border);
}

/* Strategy Metrics */
[data-theme="dark"] .metric {
    background: var(--bg-hover);
    border-color: var(--border);
}

[data-theme="dark"] .metric-label {
    color: var(--text-muted);
}

[data-theme="dark"] .metric-value {
    color: var(--text-primary);
}

[data-theme="dark"] .metric-value.high-prob {
    color: #52c41a;
}

[data-theme="dark"] .metric-value.medium-prob {
    color: #faad14;
}

[data-theme="dark"] .metric-value.low-prob {
    color: var(--danger);
}

/* Strategy Details */
[data-theme="dark"] .strategy-details {
    background: var(--bg-hover);
    border-color: var(--border);
}

[data-theme="dark"] .detail-label {
    color: var(--text-muted);
}

[data-theme="dark"] .detail-value {
    color: var(--text-primary);
}

/* Strategy Rationale */
[data-theme="dark"] .strategy-rationale {
    background: var(--bg-hover);
    border-left-color: var(--primary);
    color: var(--text-secondary);
}

/* Strategy Actions */
[data-theme="dark"] .strategy-actions button {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .strategy-actions button:hover {
    background: var(--bg-surface);
    border-color: var(--primary);
}

[data-theme="dark"] .strategy-actions button.primary {
    background: var(--success);
    color: var(--on-bright);
    border-color: var(--success);
}

[data-theme="dark"] .strategy-actions button.primary:hover {
    background: #73d13d;
}

/* Top 15 Header */
[data-theme="dark"] .top15-header {
    background: var(--bg-surface);
    border-color: var(--border);
}

[data-theme="dark"] .strategy-stats {
    color: var(--text-secondary);
}

[data-theme="dark"] .strategy-stats strong {
    color: var(--text-primary);
}

/* Trade Setup Section */
[data-theme="dark"] .trade-setup {
    background: var(--bg-input);
    border: 1px solid var(--border);
}

[data-theme="dark"] .trade-setup h4 {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .setup-detail {
    color: var(--text-primary);
}

[data-theme="dark"] .setup-detail strong {
    color: var(--primary);
}

/* Key Risks */
[data-theme="dark"] .key-risks {
    background: color-mix(in srgb, var(--crit) 6%, transparent);
    border-left-color: var(--danger);
}

[data-theme="dark"] .key-risks h4 {
    color: var(--danger);
}

[data-theme="dark"] .risk-item {
    color: var(--text-secondary);
}

/* Market Data */
[data-theme="dark"] .market-data {
    background: var(--bg-hover);
    border-color: var(--border);
}

[data-theme="dark"] .market-data h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .market-detail {
    color: var(--text-secondary);
}

[data-theme="dark"] .market-detail strong {
    color: var(--text-primary);
}

/* Liquidity Rating */
[data-theme="dark"] .liquidity-excellent {
    background: #1a2a1a;
    color: #52c41a;
    border-color: #2a4a2a;
}

[data-theme="dark"] .liquidity-good {
    background: #1a1a2a;
    color: var(--primary);
    border-color: #2a2a4a;
}

[data-theme="dark"] .liquidity-fair {
    background: #2a2a1a;
    color: #faad14;
    border-color: #4a4a2a;
}

[data-theme="dark"] .liquidity-poor {
    background: #2a1a1a;
    color: #ff4d4f;
    border-color: #4a2a2a;
}

/* ============================================ */
/* COMPREHENSIVE DARK MODE FIXES — Claude.ai tokens */
/* ============================================ */

/* Table Headers */
[data-theme="dark"] table thead th {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-bottom: 2px solid var(--border);
    font-weight: 600;
}

[data-theme="dark"] table tbody td {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

/* Table Hover */
[data-theme="dark"] table tbody tr:hover {
    background: var(--bg-hover);
}

/* Watchlist Headers & Sections */
[data-theme="dark"] .section h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .section-header {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}

/* AI Recommendation Cards */
[data-theme="dark"] .recommendation-card {
    background: var(--bg-surface);
    border-color: var(--border);
}

[data-theme="dark"] .recommendation-card h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .recommendation-card h4 {
    color: var(--primary);
}

/* Labels */
[data-theme="dark"] .detail-label,
[data-theme="dark"] label,
[data-theme="dark"] .metric-label,
[data-theme="dark"] .setup-label {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Recommendation card strong text */
[data-theme="dark"] .recommendation-card strong,
[data-theme="dark"] .recommendation-card b {
    color: var(--text-primary);
}

/* Trade Setup Section */
[data-theme="dark"] .trade-setup {
    background: var(--bg-input);
    border: 1px solid var(--border);
}

[data-theme="dark"] .trade-setup h4 {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .setup-detail {
    color: var(--text-primary);
}

[data-theme="dark"] .setup-detail strong {
    color: var(--primary);
}

/* Strategy detail headings */
[data-theme="dark"] .detail-section h4,
[data-theme="dark"] .detail-section h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .detail-value {
    color: var(--text-primary);
}

/* Input Fields */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--primary);
    background: var(--bg-input);
    box-shadow: 0 0 0 3px var(--primary-faint);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

/* Select Dropdowns */
[data-theme="dark"] select {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] select:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}

[data-theme="dark"] select:focus {
    border-color: var(--primary);
    background: var(--bg-input);
}

[data-theme="dark"] select option {
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* Buttons */
[data-theme="dark"] button {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] button:hover:not(:disabled) {
    background: var(--bg-surface);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: none;
    transform: none;
}

[data-theme="dark"] button.primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-accent);
}

[data-theme="dark"] button.primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

[data-theme="dark"] button.secondary {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] button.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--on-accent);
}

/* Alert Messages */
[data-theme="dark"] .alert {
    background: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .alert.success {
    background: rgba(63,185,80,0.10);
    border-color: var(--success);
    color: var(--success);
}

[data-theme="dark"] .alert.error {
    background: color-mix(in srgb, var(--crit) 10%, transparent);
    border-color: var(--danger);
    color: var(--danger);
}

[data-theme="dark"] .alert.warning {
    background: color-mix(in srgb, var(--high) 10%, transparent);
    border-color: var(--warning);
    color: var(--warning);
}

[data-theme="dark"] .alert.info {
    background: rgba(56,189,248,0.10);
    border-color: var(--info);
    color: var(--info);
}

/* Modal Dialogs */
[data-theme="dark"] .modal-content {
    background: var(--bg-surface);
    border: 1px solid var(--border);
}

[data-theme="dark"] .modal-header {
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .modal-header h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .modal-body {
    color: var(--text-primary);
}

/* Form Groups */
[data-theme="dark"] .form-group label {
    color: var(--text-primary);
}

/* Empty States */
[data-theme="dark"] .empty-state {
    color: var(--text-secondary);
}

[data-theme="dark"] .empty-state h3 {
    color: var(--text-primary);
}

/* Tabs */
[data-theme="dark"] .tab-button {
    color: var(--text-secondary);
    border-bottom: none;
}

[data-theme="dark"] .tab-button:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-radius: 10px;
}

[data-theme="dark"] .tab-button.active {
    color: var(--primary);
    background: var(--primary-faint);
    border-bottom: none;
}
[data-theme="dark"] .sidebar-nav .tab-button.active {
    background: var(--primary-faint);
    color: var(--primary);
}

/* Performance Dashboard */
[data-theme="dark"] .stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
}

[data-theme="dark"] .stat-card h3 {
    color: var(--text-secondary);
}

[data-theme="dark"] .stat-value {
    color: var(--text-primary);
}

[data-theme="dark"] .stat-subtitle {
    color: var(--text-muted);
}

/* Price Badges */
[data-theme="dark"] .price-open,
[data-theme="dark"] .price-delayed,
[data-theme="dark"] .price-close {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

/* Links */
[data-theme="dark"] a {
    color: var(--primary);
}

[data-theme="dark"] a:hover {
    color: var(--primary-dark);
}

/* Settings Modal */
[data-theme="dark"] .settings-section {
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .settings-section h3 {
    color: var(--text-primary);
}

/* Code/Monospace Text */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
}

/* Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    background: var(--bg-body);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-hover);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.20);
}

/* Top 15 Header Stats */
[data-theme="dark"] .strategy-stats span {
    color: var(--text-primary);
}

[data-theme="dark"] .strategy-stats strong {
    color: var(--primary);
}

/* version badge */
[data-theme="dark"] .version-badge {
    color: var(--text-muted);
}

[data-theme="dark"] .config-status-badge {
    color: var(--success);
}

[data-theme="dark"] .market-countdown,
[data-theme="dark"] .mkt-label {
    color: var(--text-secondary);
}

/* Strategy Cards — deduped, token-based */
[data-theme="dark"] .strategy-card {
    background: var(--bg-surface);
    border-color: var(--border);
    box-shadow: none;
}

[data-theme="dark"] .strategy-card:hover {
    box-shadow: none;
    background: var(--bg-hover);
    border-color: var(--primary);
}

[data-theme="dark"] .strategy-ticker-name h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .strategy-name {
    color: var(--text-secondary);
}

[data-theme="dark"] .strategy-link {
    color: var(--primary);
}

[data-theme="dark"] .strategy-link:hover {
    color: var(--primary-dark);
}

[data-theme="dark"] .external-link-icon {
    color: var(--primary);
}

[data-theme="dark"] .score-label {
    color: var(--text-muted);
}

[data-theme="dark"] .score-value {
    color: var(--primary);
}

[data-theme="dark"] .metric {
    background: var(--bg-input);
    border-color: var(--border);
}

[data-theme="dark"] .metric-label {
    color: var(--text-muted);
}

[data-theme="dark"] .metric-value {
    color: var(--text-primary);
}

[data-theme="dark"] .metric-value.high-prob {
    color: var(--success);
}

[data-theme="dark"] .metric-value.medium-prob {
    color: var(--warning);
}

[data-theme="dark"] .metric-value.low-prob {
    color: var(--danger);
}

[data-theme="dark"] .strategy-rationale {
    background: var(--bg-input);
    border-left-color: var(--primary);
    color: var(--text-secondary);
}

[data-theme="dark"] .key-risks {
    background: color-mix(in srgb, var(--crit) 8%, transparent);
    border-left-color: var(--danger);
}

[data-theme="dark"] .key-risks h4 {
    color: var(--danger);
}

[data-theme="dark"] .risk-item {
    color: var(--text-primary);
}

[data-theme="dark"] .market-data {
    background: var(--bg-input);
    border-color: var(--border);
}

[data-theme="dark"] .market-data h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .market-detail {
    color: var(--text-secondary);
}

[data-theme="dark"] .market-detail strong {
    color: var(--text-primary);
}

/* Recommendation Cards */
[data-theme="dark"] .recommendation-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
}

[data-theme="dark"] .recommendation-card:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
}

[data-theme="dark"] .recommendation-card .company-name {
    color: var(--text-secondary);
}

[data-theme="dark"] .recommendation-card .stock-price {
    color: var(--text-primary);
}

[data-theme="dark"] .recommendation-card .price-change {
    color: var(--success);
}

[data-theme="dark"] .recommendation-card .price-change.negative {
    color: var(--danger);
}

/* Tags/Badges */
[data-theme="dark"] .tag,
[data-theme="dark"] .badge {
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

[data-theme="dark"] .tag:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* Close Buttons */
[data-theme="dark"] .close-btn {
    color: var(--text-secondary);
}

[data-theme="dark"] .close-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* ============================================
   BULK ACTIONS TOOLBAR (Phase 2)
   ============================================ */

.bulk-actions-toolbar {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--primary);
    color: var(--on-accent);
    border-radius: 8px;
    margin-bottom: 12px;
    gap: 12px;
}

.selection-count {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.bulk-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bulk-actions button {
    background: rgba(255,255,255,0.15);
    color: var(--on-accent);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bulk-actions button:hover {
    background: rgba(255,255,255,0.28);
}

.bulk-actions button .material-symbols-outlined {
    font-size: 15px;
}

/* Selected row highlight */
tr.selected-row td {
    background: var(--primary-faint) !important;
}

[data-theme="dark"] tr.selected-row td {
    background: rgba(232,145,106,0.10) !important;
}

/* Checkbox column */
.checkbox-col {
    width: 36px;
    text-align: center;
    padding: 6px 4px !important;
}

input[type="checkbox"].row-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
    vertical-align: middle;
}

/* ============================================
   POSITION TEMPLATES (Phase 2)
   ============================================ */

.template-selector-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
}

.template-selector-row select {
    flex: 1;
    margin-bottom: 0;
}

.templates-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.template-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: background 0.15s;
}

.template-item:hover {
    background: var(--bg-surface);
}

.template-info strong {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
}

.template-strategy {
    font-size: 12px;
    color: var(--text-muted);
}

.template-actions {
    display: flex;
    gap: 6px;
}

/* ============================================
   ADJUSTMENT SUGGESTION CARDS (Phase 3)
   ============================================ */

.suggestions-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.suggestion-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 3px);
    padding: 18px;
    background: var(--bg-surface);
    transition: box-shadow 0.2s;
}

.suggestion-card.recommended {
    border-color: var(--success);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 18%, transparent);
}

.suggestion-header {
    margin-bottom: 12px;
}

.suggestion-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

.recommended-badge {
    background: var(--success);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
}

.suggestion-section {
    margin-bottom: 10px;
}

.suggestion-section h4 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 4px 0;
}

.suggestion-section p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.suggestion-metrics {
    display: flex;
    gap: 16px;
    margin: 12px 0;
    padding: 10px;
    background: var(--bg-hover);
    border-radius: 6px;
}

.metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.metric-value {
    font-size: 15px;
    font-weight: 600;
}

.suggestion-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.pros h5,
.cons h5 {
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.pros h5 { color: var(--success); }
.cons h5 { color: var(--danger); }

.pros ul,
.cons ul {
    margin: 0;
    padding-left: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.suggestion-actions {
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* Dark mode overrides for new components */
[data-theme="dark"] .template-item {
    background: var(--bg-hover);
    border-color: var(--border);
}

[data-theme="dark"] .template-item:hover {
    background: var(--bg-surface);
}

[data-theme="dark"] .suggestion-card {
    background: var(--bg-surface);
    border-color: var(--border);
}

[data-theme="dark"] .suggestion-card.recommended {
    border-color: var(--success);
    box-shadow: 0 0 0 2px rgba(46, 160, 67, 0.2);
}

[data-theme="dark"] .suggestion-metrics {
    background: var(--bg-input);
}

[data-theme="dark"] .bulk-actions-toolbar {
    background: var(--primary);
}

/* ============================================
   API STATUS DOT — v2.8.0
   ============================================ */

.api-status-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.api-status-dot:hover {
    opacity: 0.75;
}

/* ── API Status Chip (replaces dot) ─────────────────────────── */
.api-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.1s;
    border: 1px solid transparent;
}

.api-status-chip:hover {
    opacity: 0.85;
    transform: scale(0.97);
}

.api-status-chip-dot {
    font-size: 9px;
    line-height: 1;
}

.api-status-chip.api-status-green {
    background: color-mix(in srgb, var(--ok) 15%, transparent);
    color: var(--success);
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}

.api-status-chip.api-status-grey {
    background: rgba(128,128,128, 0.12);
    color: var(--text-muted);
    border-color: rgba(128,128,128, 0.25);
}

.api-status-chip.api-status-amber {
    background: color-mix(in srgb, var(--high) 15%, transparent);
    color: var(--warning);
    border-color: color-mix(in srgb, var(--high) 30%, transparent);
}

.api-status-chip.api-status-red {
    background: color-mix(in srgb, var(--crit) 15%, transparent);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--crit) 30%, transparent);
}

/* Keep old colour classes working for any legacy references */
.api-status-green  { color: var(--success); }
.api-status-grey   { color: var(--text-muted); }
.api-status-amber  { color: var(--warning); }
.api-status-red    { color: var(--danger); }

/* ============================================
   SETTINGS MODAL — v2.8.0
   ============================================ */

.settings-modal-wide {
    max-width: 680px;
    width: 95%;
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin: 28px 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.settings-section-header:first-of-type {
    margin-top: 8px;
}

.settings-section-header .material-symbols-outlined {
    font-size: 15px;
    color: var(--primary);
}

.settings-section-tag {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-faint, rgba(201,106,58,0.10));
    border: 1px solid rgba(201,106,58,0.25);
    border-radius: 10px;
    padding: 1px 7px;
    text-transform: none;
    letter-spacing: 0;
}

.required-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--danger);
    background: color-mix(in srgb, var(--crit) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent);
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
}

/* ============================================
   HELP MODAL — v2.8.0
   ============================================ */

.help-modal-wide {
    max-width: 760px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.help-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 20px 24px;
    line-height: 1.7;
}

.help-modal-body h1 {
    font-size: 20px;
    color: var(--primary);
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}

.help-modal-body h2 {
    font-size: 16px;
    color: var(--text-primary);
    margin: 24px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.help-modal-body h3 {
    font-size: 14px;
    color: var(--text-primary);
    margin: 16px 0 6px 0;
}

.help-modal-body h4 {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 12px 0 4px 0;
}

.help-modal-body p {
    margin: 0 0 10px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.help-modal-body ul {
    margin: 8px 0 12px 20px;
    padding: 0;
}

.help-modal-body li {
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-size: 14px;
}

.help-modal-body code {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--primary);
}

.help-modal-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

.help-modal-body a {
    color: var(--primary);
    text-decoration: none;
}

.help-modal-body a:hover {
    text-decoration: underline;
}

.help-modal-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================
   STATS DASHBOARD PANEL — v2.8.0 Phase B
   ============================================ */

.stats-dash-panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 12px);
    margin-bottom: 16px;
    overflow: hidden;
}

.stats-dash-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    background: var(--card-bg);
    transition: background 0.15s ease;
}

.stats-dash-header:hover {
    background: var(--bg-hover);
}

.stats-dash-header-icon {
    font-size: 16px;
    color: var(--primary);
}

.stats-dash-header-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    flex: 1;
}

.stats-dash-chevron {
    font-size: 18px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    pointer-events: none;
}

.stats-dash-pin-btn {
    background: none;
    border: none;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
    min-width: unset;
    height: unset;
    font-size: inherit;
}

.stats-dash-pin-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.stats-dash-pin-btn.stats-dash-pinned {
    color: var(--primary);
    background: rgba(0, 123, 255, 0.1);
}

.stats-dash-pin-btn .material-symbols-outlined {
    font-size: 16px;
}

/* Collapsed body — hidden by default */
.stats-dash-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.stats-dash-body.stats-dash-expanded {
    max-height: 200px;
}

/* Cards row */
.stats-dash-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}

.stats-dash-card {
    flex: 1 1 120px;
    background: var(--card-bg);
    padding: 12px 16px;
    min-width: 100px;
}

.stats-dash-card-risk {
    position: relative;
}

.stats-dash-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.stats-dash-value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-dash-sublabel {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.stats-dash-ticker {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Color states */
.stats-dash-positive { color: var(--success); }
.stats-dash-negative { color: var(--danger); }
.stats-dash-neutral  { color: var(--text-secondary); }
.stats-dash-amber    { color: var(--warning); }

/* Dark mode */
[data-theme="dark"] .stats-dash-panel {
    background: var(--card-bg);
    border-color: var(--border);
}

[data-theme="dark"] .stats-dash-header {
    background: var(--card-bg);
}

[data-theme="dark"] .stats-dash-header:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .stats-dash-card {
    background: var(--card-bg);
}

/* Responsive — tighten on mobile */
@media (max-width: 600px) {
    .stats-dash-card {
        flex: 1 1 90px;
        padding: 10px 10px;
    }
    .stats-dash-value {
        font-size: 15px;
    }
    .stats-dash-body.stats-dash-expanded {
        max-height: 400px;
    }
}

/* ============================================================
   PHASE C — SORTABLE COLUMN HEADERS
   ============================================================ */

.sort-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.sort-th:hover {
    background: var(--bg-hover, rgba(201,106,58,0.06));
}

.sort-th.sort-active {
    background: var(--primary-faint, rgba(201,106,58,0.10));
    color: var(--primary);
}

.sort-indicator {
    display: inline-block;
    font-size: 10px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1;
}

.sort-indicator.sort-inactive {
    opacity: 0.35;
}

.sort-indicator.sort-asc {
    color: var(--primary);
}

.sort-indicator.sort-desc {
    color: var(--primary);
}

/* ============================================================
   PHASE C — FILTER PANEL
   ============================================================ */

.filter-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 12px);
    margin-bottom: 16px;
    overflow: hidden;
    background: var(--card-bg);
}

.filter-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    background: var(--background-alt, #f8fafc);
    transition: background 0.15s;
}

.filter-panel-header:hover {
    background: var(--bg-hover, rgba(201,106,58,0.05));
}

.filter-panel-icon {
    font-size: 18px;
    color: var(--text-muted, #94a3b8);
}

.filter-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    flex: 1;
}

.filter-panel-chevron {
    font-size: 20px;
    color: var(--text-muted, #94a3b8);
    transition: transform 0.2s;
    margin-left: auto;
}

/* When panel is open the chevron rotates via textContent change,
   no additional CSS needed — handled in JS */

.filter-panel-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.2s;
    padding: 0 14px;
    background: var(--card-bg, #ffffff);
}

.filter-panel-body.fp-open {
    max-height: 220px;
    padding: 12px 14px 14px;
}

.filter-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.filter-control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 130px;
}

.filter-control-group.filter-control-actions {
    justify-content: flex-end;
    min-width: auto;
}

.filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #94a3b8);
}

.filter-select,
.filter-input {
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-hover);
    color: var(--text-primary);
    transition: border-color 0.15s;
}

.filter-select:focus,
.filter-input:focus {
    outline: none;
    border-color: var(--primary);
}

.filter-clear-btn {
    white-space: nowrap;
}

.filter-result-count {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted, #94a3b8);
}

.filter-active-badge {
    display: inline-block;
    background: var(--primary);
    color: var(--on-accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 20px;
    text-transform: uppercase;
}

/* Empty row when no results match filters */
.filter-empty-row {
    text-align: center;
    padding: 28px 16px;
    color: var(--text-muted, #94a3b8);
    font-size: 13px;
}

.filter-empty-row .material-symbols-outlined {
    font-size: 28px;
    vertical-align: middle;
    margin-right: 6px;
    opacity: 0.5;
}

/* ── Dark mode ── */
[data-theme="dark"] .filter-panel {
    background: var(--card-bg);
    border-color: var(--border);
}

[data-theme="dark"] .filter-panel-header {
    background: var(--bg-hover);
}

[data-theme="dark"] .filter-select,
[data-theme="dark"] .filter-input {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text-primary);
}

[data-theme="dark"] .sort-th:hover {
    background: var(--primary-faint);
}

[data-theme="dark"] .sort-th.sort-active {
    background: var(--primary-faint);
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .filter-controls {
        flex-direction: column;
        gap: 8px;
    }

    .filter-control-group {
        min-width: 100%;
    }

    .filter-panel-body.fp-open {
        max-height: 400px;
    }
}

/* ============================================================ */
/* PHASE D — Auto-Refresh, Tags, Alerts, Adjustment History     */
/* ============================================================ */

/* ── Auto-Refresh Chip ────────────────────────────────────── */
.auto-refresh-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--success);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s, transform 0.1s;
    white-space: nowrap;
}

.auto-refresh-chip:hover {
    opacity: 0.85;
    transform: scale(0.97);
}

.auto-refresh-chip .material-symbols-outlined {
    animation: spin-slow 3s linear infinite;
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Position Tag Pills ───────────────────────────────────── */
.position-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

.position-tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: lowercase;
}

/* 5 deterministic tag colors */
.position-tag-pill.tag-color-0 { background: var(--tag-blue-bg); color: var(--tag-blue-text); }
.position-tag-pill.tag-color-1 { background: var(--ok-soft); color: var(--ok); }
.position-tag-pill.tag-color-2 { background: var(--high-soft); color: var(--high); }
.position-tag-pill.tag-color-3 { background: var(--tag-pink-bg); color: var(--tag-pink-text); }
.position-tag-pill.tag-color-4 { background: var(--tag-purple-bg); color: var(--tag-purple-text); }

/* Dark mode tag pills */
[data-theme="dark"] .position-tag-pill.tag-color-0 { background: var(--tag-blue-bg); color: var(--tag-blue-text); }
[data-theme="dark"] .position-tag-pill.tag-color-1 { background: var(--ok-soft); color: var(--ok); }
[data-theme="dark"] .position-tag-pill.tag-color-2 { background: var(--high-soft); color: var(--high); }
[data-theme="dark"] .position-tag-pill.tag-color-3 { background: var(--tag-pink-bg); color: var(--tag-pink-text); }
[data-theme="dark"] .position-tag-pill.tag-color-4 { background: var(--tag-purple-bg); color: var(--tag-purple-text); }

/* ── Alert Dot on In-Play rows ────────────────────────────── */
.alert-active-dot {
    display: inline-block;
    font-size: 8px;
    color: var(--warning);
    margin-left: 4px;
    vertical-align: super;
    cursor: default;
}

/* ── Alert Permission Note (inside Set Alerts modal) ─────── */
.alert-permission-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--high-soft);
    border: 1px solid var(--high);
    border-radius: 6px;
    font-size: 12px;
    color: var(--high);
    margin-bottom: 14px;
}

.alert-permission-note .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Bulk Analyze Progress Counter ───────────────────────── */
.bulk-progress-counter {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--info, #3b82f6);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.3s;
}

.bulk-progress-counter.done {
    background: var(--success);
}

/* ── Adjustment History Modal ────────────────────────────── */
#adjustmentHistoryModal .table-container {
    max-height: 420px;
    overflow-y: auto;
}

/* ── Responsive tweaks for Phase D ───────────────────────── */
@media (max-width: 768px) {
    .auto-refresh-chip {
        padding: 3px 7px;
        font-size: 11px;
    }

    .position-tag-pill {
        font-size: 9px;
        padding: 1px 5px;
    }
}

/* ============================================================
   v2.9.0 — INVESTMENT ANALYSIS MODULE
   ============================================================ */

/* ── Help button: icon-only compact variant ────────────────── */
.btn-icon-only {
    padding: 10px 12px;
}
.btn-icon-only .material-symbols-outlined {
    font-size: 18px;
}

/* ── Investment tab skeleton / coming-soon ─────────────────── */
.inv-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 8px;
}
.inv-coming-soon h2 {
    font-size: 22px;
    color: var(--text-primary);
    margin: 0;
}

/* ── Investment tab top toolbar ────────────────────────────── */
.inv-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.inv-toolbar-right {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Watchlist global action divider + edit indicator ─────────── */
.wl-global-actions-divider {
    width: 1px;
    height: 20px;
    background: var(--border, #e5e7eb);
    flex-shrink: 0;
}

/* ── v4.19.0 (Phase 3) — Unified Watchlist: SRC column + source chips ── */
.inv-wl-src {
    flex: 0 0 92px;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}
.wl-src-chip {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 8px;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.5;
}
/* Palette mirrors the Idea Inbox source badges (.ii-src-*) so sources read
   the same across Discovery and the Watchlist. manual = neutral gray. */
.wl-src-manual   { background: var(--bg-surface, #f3f4f6); color: var(--text-secondary, #6b7280); border-color: var(--border, #e5e7eb); }
.wl-src-scanner  { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.wl-src-screen   { background: #f0fdf4; color: var(--ok); border-color: #bbf7d0; }
.wl-src-13f      { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.wl-src-congress { background: var(--high-soft); color: var(--high); border-color: var(--high); }
[data-theme="dark"] .wl-src-manual   { background: var(--background-alt); color: var(--text-secondary); border-color: var(--rule-strong); }
[data-theme="dark"] .wl-src-scanner  { background: #164e63; color: #a5f3fc; border-color: #155e75; }
[data-theme="dark"] .wl-src-screen   { background: var(--ok-soft); color: #bbf7d0; border-color: var(--ok); }
[data-theme="dark"] .wl-src-13f      { background: #312e81; color: #c7d2fe; border-color: #3730a3; }
[data-theme="dark"] .wl-src-congress { background: #422006; color: var(--high); border-color: var(--high); }

/* ── v4.19.0 (Phase 3) — soft size warning (>40 tickers, session-dismissible) ── */
.wl-size-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 12px;
    padding: 8px 12px;
    font-size: 12px;
    border: 1px solid var(--warning, var(--high));
    background: color-mix(in srgb, var(--warning, var(--high)) 10%, transparent);
    color: var(--text-primary, #111827);
    border-radius: 8px;
}
.wl-size-warning .material-symbols-outlined { color: var(--warning, var(--high)); }
.wl-size-warning-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    padding: 2px 6px;
    border-radius: 4px;
}
.wl-size-warning-dismiss:hover { color: var(--text-primary, #111827); background: color-mix(in srgb, var(--warning, var(--high)) 15%, transparent); }

/* ── v4.19.1 (#3) — Idea Inbox bulk actions ── */
.ii-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 4px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
}
.ii-bulk-count { color: var(--text-secondary); margin-right: 4px; white-space: nowrap; }
.ii-bulk-sep { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; }
.ii-th-select, .ii-td-select { width: 34px; text-align: center; }
.ii-select-cb { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent, var(--high)); }

/* v4.20.4 — Idea Inbox "Dismissed" review panel */
.ii-dismissed-panel {
    margin: 8px 0 4px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
}
.ii-dismissed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-secondary);
}
.ii-dismissed-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ii-dismissed-list {
    margin-top: 8px;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ii-dismissed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 6px;
    background: var(--bg-body);
}
.ii-dismissed-ticker { font-weight: 700; color: var(--text-primary); min-width: 56px; }
.ii-dismissed-meta { flex: 1; color: var(--text-muted); font-size: 11.5px; }
.ii-dismissed-toggle { white-space: nowrap; }

/* ── v4.19.1 (#4) — funnel card substat variants ── */
.pipe-sub-action { color: var(--accent, var(--high)); font-weight: 600; }
.pipe-sub-muted  { opacity: 0.75; }

/* ── Toolbar button + info icon pair ────────────────────────── */
.inv-toolbar-btn-wrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.inv-toolbar-info {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted, #9ca3af);
    cursor: help;
    font-size: 16px;
    padding: 2px;
    border-radius: 4px;
    position: relative;
}
.inv-toolbar-info .material-symbols-outlined {
    font-size: 16px !important;
}
.inv-toolbar-info:hover {
    color: var(--primary);
}
.inv-toolbar-info[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 260px;
    max-width: 340px;
    background: var(--bg-surface, #fff);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
    white-space: normal;
    box-shadow: 0 4px 16px color-mix(in srgb, black 12%, transparent);
    z-index: 200;
    pointer-events: none;
}
[data-theme="dark"] .inv-toolbar-info[title]:hover::after {
    background: var(--card-bg, #1e2433);
    box-shadow: 0 4px 16px color-mix(in srgb, black 40%, transparent);
}

/* ── Mode selector ──────────────────────────────────────────── */
.inv-mode-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* ── Ticker search bar ──────────────────────────────────────── */
.inv-ticker-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.inv-ticker-input {
    width: 110px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.inv-ticker-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-faint);
}

/* ── EDGAR email gate notice ───────────────────────────────── */
.inv-edgar-gate {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: color-mix(in srgb, var(--high) 12%, transparent);
    border: 1px solid var(--warning);
    border-radius: 8px;
    margin: 20px 0;
    font-size: 14px;
}
.inv-edgar-gate .material-symbols-outlined {
    font-size: 22px;
    color: var(--warning);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Watchlist table ───────────────────────────────────────── */
.inv-watchlist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 10px;
}
.inv-watchlist-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border);
    background: var(--bg-body);
}
.inv-watchlist-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.inv-watchlist-table tr:hover td {
    background: var(--bg-hover);
}
.inv-watchlist-table .ticker-cell {
    font-weight: 700;
    font-size: 15px;
    color: var(--primary);
    letter-spacing: 0.04em;
}

/* ── v4.2.0 Investment Watchlist accordion list ─────────────── */
.inv-wl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 10px;
}
.inv-wl-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 12px);
    overflow: hidden;
}
.inv-wl-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: var(--bg-body);
    border-bottom: 2px solid var(--border);
}
.inv-wl-item {
    border-bottom: 1px solid var(--border);
}
.inv-wl-item:last-child {
    border-bottom: none;
}
.inv-wl-item.dragging { opacity: 0.5; }
.inv-wl-item.drag-over { outline: 2px solid var(--primary); outline-offset: -2px; }
.inv-wl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}
.inv-wl-row:hover { background: var(--bg-hover); }
.inv-wl-row.expanded { background: rgba(201,106,58,0.04); border-left: 3px solid var(--primary); }
[data-theme="dark"] .inv-wl-row.expanded { background: rgba(232,145,106,0.07); }
.inv-wl-row.edit-mode { cursor: default; }
.inv-wl-ticker  { flex: 0 0 80px;  font-size: 14px; }
.inv-wl-price   { flex: 0 0 130px; font-size: 12px; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.inv-wl-signal  { flex: 0 0 100px; display: flex; align-items: center; }
/* 2026-08-24 — B5 split into its own column (was pips stacked inside
   .inv-wl-signal via display:none here + concatenation in the row HTML;
   see renderWatchlistTab/_patchWatchlistRowAfterAnalysis for the JS split). */
.inv-wl-b5      { flex: 0 0 58px;  display: flex; align-items: center; }
.inv-wl-roic    { flex: 0 0 64px;  text-align: right; padding-right: 8px; }
.inv-wl-div     { flex: 0 0 100px; font-size: 12px; }
.inv-wl-gate3   { flex: 0 0 100px; text-align: center; }   /* v4.16.5 — merged G1·G2·F */
.inv-wl-r40     { flex: 0 0 58px;  text-align: center; }   /* v4.16.5 — Rule of 40 badge; widened v4.23.7 (P1-4) to fit the Calc button */
.inv-wl-tier    { flex: 0 0 72px;  }
/* news-pulse-data-model-and-storage-backlog.md §6.4 */
.inv-wl-activity { flex: 0 0 78px; display: flex; align-items: center; }
.inv-wl-cliff    { flex: 0 0 52px; text-align: center; font-size: 12px; }
.inv-wl-pulse    { flex: 0 0 96px; display: flex; align-items: center; }
.inv-wl-mf      { flex: 0 0 56px;  display: flex; align-items: center; }
.inv-wl-cs      { flex: 0 0 62px;  display: flex; align-items: center; }
.inv-wl-date    { flex: 0 0 72px;  font-size: 12px; }
.inv-wl-added   { flex: 0 0 68px;  font-size: 12px; }
.inv-wl-poli    { flex: 0 0 44px;  text-align: center; }
.inv-wl-mos     { flex: 0 0 48px;  text-align: center; }
.inv-wl-sc-empty { color: var(--text-muted); font-size: 12px; }
/* v4.16.0 — "Below Margin of Safety" green dot (Analyze lists + Holdings table) */
.mos-dot {
    color: var(--ok);
    font-size: 13px;
    line-height: 1;
    display: inline-block;
}
[data-theme="dark"] .mos-dot { color: #22c55e; }
.inv-screener-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px 14px;
    background: color-mix(in srgb, var(--ok) 6%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--ok) 18%, transparent);
    font-size: 12px;
}
[data-theme="dark"] .inv-screener-bar {
    background: color-mix(in srgb, var(--ok) 8%, transparent);
    border-color: color-mix(in srgb, var(--ok) 22%, transparent);
}
.inv-screener-bar-empty {
    background: var(--bg-hover);
    border-bottom: 1px dashed var(--border);
}
.inv-screener-bar-label {
    font-weight: 600;
    color: var(--text-primary);
    margin-right: 4px;
}
.inv-screener-bar-date {
    font-weight: 400;
    color: var(--text-secondary);
}
.inv-wl-chevron {
    flex: 0 0 20px;
    font-size: 18px !important;
    color: var(--text-secondary);
    transition: transform 0.2s;
}
.inv-wl-row.expanded .inv-wl-chevron { transform: rotate(90deg); }
/* v4.26.3 — Watchlist pin-to-top star (user-requested feature) */
.inv-wl-row.pinned { border-left: 3px solid var(--high); }
.inv-wl-pin-star {
    flex: 0 0 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
}
.inv-wl-pin-star .material-symbols-outlined { font-size: 18px !important; }
.inv-wl-pin-star:hover { color: var(--high); }
.inv-wl-pin-star.pinned { color: var(--high); }
.inv-wl-drag {
    display: flex;
    flex: 0 0 24px;
    font-size: 18px !important;
    color: var(--text-muted);
    cursor: grab;
    align-items: center;
    margin-right: 6px;
}
.inv-wl-delete { flex-shrink: 0; }
.inv-wl-actions {
    flex: 0 0 160px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* ── v4.16.2 — Analyze lists (Investment Watchlist / Stock Screens / Stock
   Scanner) fit-to-container so the row never overflows and the actions column
   (delete + Primary) is never clipped by .inv-wl-list{overflow:hidden}, in edit
   mode included. Placed after the base .inv-wl-* rules so source order wins.
   Header (.inv-wl-col-header) reuses the same width classes, so it stays
   aligned. ───────────────────────────────────────────────────────────────── */
.inv-wl-row,
.inv-wl-col-header { gap: 6px; }
.inv-wl-row        { padding: 12px 10px; }
.inv-wl-col-header { padding: 7px 10px; }

/* Trim the widest fixed columns */
.inv-wl-price  { flex-basis: 112px; }
.inv-wl-src    { flex-basis: 74px; }
/* 2026-08-24 — Signal now holds just the badge (B5 pips moved to their own
   .inv-wl-b5 column below), so its trim shrank from the old 132px (badge +
   stacked pips) down to fit the badge alone.
   2026-08-31 — 90px was still narrower than the badge's own longest label:
   .signal-badge is white-space:nowrap with no self-shrink, and "Strong Buy"
   (the widest of the 5 signal labels) measures 95px in the app's real fonts
   — confirmed by rendering all 5 live and reading getBoundingClientRect().
   The column's min-width (below) was the actual overflow floor, not this
   basis, but both need to clear 95px or the badge spills into .inv-wl-b5 —
   exactly the same shape as the 2026-08-24 B5-column fix two rules down. */
.inv-wl-signal { flex-basis: 100px; }
.inv-wl-div    { flex-basis: 84px; }
.inv-wl-date   { flex-basis: 62px; }
.inv-wl-added  { flex-basis: 58px; }

/* Let columns absorb any remaining overflow by shrinking, rather than pushing
   the actions off the (clipped) right edge. Short numeric values tolerate this;
   ticker + signal + b5 keep protective minimums; actions/drag/chevron never shrink. */
.inv-wl-row > *,
.inv-wl-col-header > * { flex-shrink: 1; min-width: 0; }
.inv-wl-ticker  { min-width: 56px; }
/* 2026-08-31 — was 68px, 27px short of the "Strong Buy" badge's real 95px
   width (see the flex-basis comment above) — the actual overflow floor,
   since flex-shrink respects min-width over flex-basis. */
.inv-wl-signal  { min-width: 100px; }
/* 2026-08-24 — without this, the blanket min-width:0 above let the B5 column
   shrink to ~1px on narrower viewports while its 5 pip dots (an inline-flex
   child, ~52px wide) kept their own width and visually spilled ~45px into
   the ROIC column — confirmed in-browser at 768px. 54px comfortably fits the
   5 dots + gaps (52px) without clipping. */
.inv-wl-b5      { min-width: 54px; }
.inv-wl-actions,
.inv-wl-drag,
.inv-wl-chevron { flex-shrink: 0; }
.inv-wl-accordion {
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    padding: 0;
}
.inv-wl-acc-controls {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-body);
    justify-content: flex-end; /* v4.26.2 (P2-2 follow-up) — was left-aligned by default (no
                                   spacer element here, unlike Holdings' ticker-label flex:1);
                                   user wants report action buttons always on the right. */
    flex-wrap: wrap;
}
.inv-wl-poli-panel {
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
}
.inv-wl-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px dashed var(--border);
    background: var(--bg-hover);
}

/* ── Analysis report panel ─────────────────────────────────── */
.inv-report-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 12px);
    padding: 24px;
    margin-top: 16px;
}
.inv-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
.inv-report-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.inv-report-meta {
    font-size: 12px;
    color: var(--text-muted);
}
.inv-data-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.inv-data-badge.edgar   { background: rgba(0,123,255,0.12); color: var(--primary); }
.inv-data-badge.mboum   { background: rgba(111,66,193,0.12); color: #6f42c1; }
.inv-data-badge.fmp     { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.inv-data-badge.offline { background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--danger); }

/* ── Executive Summary card (v4.10 Session C) ─────────────────────── */
.exec-summary-card {
    margin: 0 0 20px;
    padding: 16px 18px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 3px);
}
.exec-summary-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.exec-summary-icon {
    font-size: 14px;
    vertical-align: -2px;
}
.exec-chip-rail {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.exec-chip-col {
    flex: 1 1 0;
    min-width: 120px;
    display: flex;
    flex-direction: column;
}
/* Base chip */
.exec-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    cursor: pointer;
    text-align: left;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.exec-chip:not(:disabled):hover {
    box-shadow: 0 2px 8px color-mix(in srgb, black 8%, transparent);
    border-color: var(--text-muted);
}
.exec-chip.exec-chip-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
}
.exec-chip-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    line-height: 1;
}
.exec-chip-verdict {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: inherit;
}
/* Color variants inherit from existing .verdict-* classes */
.exec-chip.verdict-bull   { background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); }
.exec-chip.verdict-bear   { background: color-mix(in srgb, var(--crit) 8%, transparent);  border-color: color-mix(in srgb, var(--crit) 35%, transparent);  color: var(--danger); }
.exec-chip.verdict-warn   { background: color-mix(in srgb, var(--high) 8%, transparent); border-color: color-mix(in srgb, var(--high) 35%, transparent); color: #b45309; }
.exec-chip.verdict-neutral { background: var(--bg-surface); border-color: var(--border); color: var(--text-muted); }
/* Shimmer / empty states */
.exec-chip-shimmer, .exec-chip-empty { cursor: default; opacity: 0.65; }
.exec-chip-unavailable { opacity: 0.8; }
/* Prose accordion panel */
.exec-prose-panel {
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    animation: execProseIn 0.15s ease;
}
@keyframes execProseIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.exec-prose-text {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-primary);
}
.exec-prose-scroll {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.exec-prose-scroll:hover { opacity: 0.75; }
/* Print: show chips inline, hide prose panels and scroll buttons */
@media print {
    .exec-summary-card { page-break-inside: avoid; }
    .exec-chip-col { flex: none; }
    .exec-prose-panel { display: none !important; }
    .exec-prose-scroll { display: none !important; }
}
#strike-print-container .exec-prose-panel,
#strike-print-container .exec-prose-scroll { display: none !important; }

/* ── Section dividers inside report ────────────────────────── */
.inv-section {
    margin-bottom: 28px;
}
.inv-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
/* v4.9.2-2 — Collapsed empty-section row */
.inv-section-collapsed-row {
    padding: 7px 16px;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.inv-section-collapsed-row:hover {
    color: var(--text-secondary);
    background: var(--bg-surface);
}
.inv-section-collapsed-arrow {
    font-size: 10px;
    opacity: 0.6;
}
.expand-hint {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.55;
    text-decoration: underline;
    text-decoration-style: dotted;
}
.inv-section-collapsed-row:hover .expand-hint {
    opacity: 0.85;
}

/* Growth & Quality tab — model section headers darkened/bolded + a light
   frame around each model area (user request, 2026-09-01): "make it clear
   the data in these sections is related to the model being analyzed" (CAN
   SLIM, Big Five, Piotroski, Rule #1, etc). Scoped to this one tab via
   .rep-tab-pane[data-tab-key="growth"] — .inv-section/.inv-section-title are
   reused verbatim by Valuation/Technical/Smart Money/Takeover & Risk, which
   must stay exactly as they were. The Four Ms wrapper (.featured-section)
   keeps its own existing left-accent-bar treatment instead of the new full
   frame, to avoid a double-border look; its header still darkens/bolds. */
.rep-tab-pane[data-tab-key="growth"] .inv-section-title {
    color: var(--text-primary);
    font-weight: 800;
}
.rep-tab-pane[data-tab-key="growth"] .inv-section:not(.featured-section) {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
    background: var(--surface-2);
}


/* ── Big Five horizontal bar chart ──────────────────────────── */
.inv-bigfive-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inv-bigfive-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.inv-bigfive-label {
    width: 120px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.bigfive-threshold-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
}
.inv-bigfive-track {
    flex: 1;
    height: 20px;
    background: var(--bg-body);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.inv-bigfive-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
    min-width: 2px;
}
.inv-bigfive-fill.pass  { background: var(--success); }
.inv-bigfive-fill.fail  { background: var(--danger); }
.inv-bigfive-fill.warn  { background: var(--warning); }
.inv-bigfive-value {
    width: 58px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}
.inv-bigfive-threshold {
    /* Vertical line at 10% position */
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: rgba(0,0,0,0.2);
}
[data-theme="dark"] .inv-bigfive-threshold {
    background: rgba(255,255,255,0.2);
}

/* ── Rule #1 Scorecard ─────────────────────────────────────── */
.inv-scorecard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.inv-scorecard-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-body);
}
.inv-scorecard-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.inv-scorecard-icon.pass { color: var(--success); }
.inv-scorecard-icon.fail { color: var(--danger); }
.inv-scorecard-icon.warn { color: var(--warning); }
.inv-scorecard-metric {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.2;
}
.inv-scorecard-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ── Three Tools signal lights ─────────────────────────────── */
.inv-three-tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.inv-tool-card {
    padding: 16px;
    border-radius: var(--radius-card, 3px);
    border: 1px solid var(--border);
    background: var(--bg-body);
    text-align: center;
}
.inv-tool-signal {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.inv-tool-signal.buy     { color: var(--success); }
.inv-tool-signal.sell    { color: var(--danger); }
.inv-tool-signal.neutral { color: var(--text-muted); }
.inv-tool-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inv-tool-dot.buy     { background: color-mix(in srgb, var(--ok) 18%, transparent); border: 2px solid var(--success); }
.inv-tool-dot.sell    { background: color-mix(in srgb, var(--crit) 18%, transparent);  border: 2px solid var(--danger); }
.inv-tool-dot.neutral { background: rgba(153,153,153,0.12); border: 2px solid var(--text-muted); }
.inv-tool-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.inv-tool-value {
    font-size: 11px;
    color: var(--text-muted);
}
.inv-three-tools-summary {
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.inv-three-tools-summary.all-green  { background: color-mix(in srgb, var(--ok) 12%, transparent);  color: var(--success); }
.inv-three-tools-summary.mixed      { background: color-mix(in srgb, var(--high) 12%, transparent);  color: var(--warning); }
.inv-three-tools-summary.all-red    { background: color-mix(in srgb, var(--crit) 12%, transparent);  color: var(--danger); }

/* ── Sticker Price Widget ──────────────────────────────────── */
.inv-sticker-widget {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.inv-sticker-prices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inv-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
}
.inv-price-row.mos      { border-color: var(--success); background: color-mix(in srgb, var(--ok) 6%, transparent); }
.inv-price-row.sticker  { border-color: var(--warning); background: color-mix(in srgb, var(--high) 6%, transparent); }
.inv-price-row.current  { border-color: var(--border); background: var(--bg-body); }
.inv-price-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.inv-price-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.inv-valuation-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    width: 100%;
    margin-top: 8px;
}
.inv-valuation-badge.on-sale    { background: color-mix(in srgb, var(--ok) 15%, transparent);  color: var(--success); }
.inv-valuation-badge.fair-value { background: color-mix(in srgb, var(--high) 15%, transparent);  color: var(--high); }
.inv-valuation-badge.overvalued { background: color-mix(in srgb, var(--crit) 15%, transparent);  color: var(--danger); }
.inv-sticker-assumptions {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--bg-body);
    border-radius: 6px;
    border: 1px solid var(--border);
    line-height: 1.8;
}

/* ── Graham Number section (T1-2 v4.3.2) ──────────────────────── */
.graham-framework-badge {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.03em;
}
/* ── T1-1 Piotroski F-Score ──────────────────────────────────────────────── */
.piotroski-framework-badge {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.03em;
}
/* v4.36.0 (Growth & Quality layout redesign) — 3 buckets side by side
   instead of stacked, mirroring the Three Tools 3-column pattern used
   elsewhere in this report. */
.piotroski-bucket-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.piotroski-bucket {
    margin-bottom: 0;
}
.piotroski-bucket-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 6px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.piotroski-bucket-name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.graham-na-card {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 3px);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.graham-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 540px) {
    .graham-grid { grid-template-columns: 1fr; }
}
.graham-price-col { display: flex; flex-direction: column; gap: 6px; }
.graham-price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
.graham-price-row:last-of-type { border-bottom: none; }
.graham-price-label { color: var(--text-secondary); }
.graham-price-value { font-weight: 600; font-size: 15px; color: var(--text-primary); }
.graham-badge {
    margin-top: 6px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.graham-badge.graham-below  { background: color-mix(in srgb, var(--ok) 12%, transparent);  color: var(--success); }
.graham-badge.graham-near   { background: color-mix(in srgb, var(--high) 14.0%, transparent);  color: var(--high); }
.graham-badge.graham-above  { background: rgba(108,117,125,0.10); color: var(--text-secondary); }
.graham-badge.graham-neutral{ background: var(--bg-body); color: var(--text-muted); border: 1px solid var(--border); }
.graham-inputs-col {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
}
.graham-inputs-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.graham-input-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}
.graham-input-row:last-child { border-bottom: none; }
.graham-input-row span:last-child { font-weight: 500; color: var(--text-primary); }
.graham-caveat {
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
    padding: 7px 10px;
    background: var(--bg-body);
    border-radius: 6px;
    border: 1px solid var(--border);
}

/* ── v4.7.1 Graham NCAV companion card ────────────────────── */
.graham-ncav-card {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-card, 3px);
    border: 1px solid var(--border);
    background: var(--bg-body);
}
.graham-ncav-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.graham-ncav-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.graham-ncav-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.graham-ncav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.graham-ncav-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 5px 8px;
    background: var(--bg-body);
    border-radius: 5px;
    border: 1px solid var(--border);
    margin-bottom: 6px;
}
.graham-ncav-caveat {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── v4.7.3 Sector RS badges ───────────────────────────────── */
.sector-rs-badge {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}
.sector-rs-strong-out  { background: color-mix(in srgb, var(--ok) 15%, transparent);  color: var(--ok); }
.sector-rs-out         { background: color-mix(in srgb, var(--ok) 8%, transparent);  color: var(--ok); }
.sector-rs-under       { background: rgba(220,38,38,0.08);  color: var(--crit); }
.sector-rs-strong-under{ background: rgba(220,38,38,0.15);  color: var(--crit); }
[data-theme="dark"] .sector-rs-strong-out  { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
[data-theme="dark"] .sector-rs-out         { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }
[data-theme="dark"] .sector-rs-under       { background: rgba(248,113,113,0.12); color: var(--crit); }
[data-theme="dark"] .sector-rs-strong-under{ background: rgba(248,113,113,0.20); color: var(--crit); }
.holdings-sector-rs-cell { min-width: 68px; }

/* ── Financial health row ──────────────────────────────────── */
.inv-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.inv-health-card {
    padding: 14px;
    border-radius: var(--radius-card, 3px);
    border: 1px solid var(--border);
    background: var(--bg-body);
    text-align: center;
}
.inv-health-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.inv-health-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}
.inv-health-zone {
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
}
.inv-health-zone.safe    { color: var(--success); }
.inv-health-zone.grey    { color: var(--warning); }
.inv-health-zone.distress { color: var(--danger); }

/* ── Disclaimer block ──────────────────────────────────────── */
.inv-disclaimer {
    margin-top: 24px;
    padding: 14px 18px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}
.inv-disclaimer strong {
    color: var(--text-secondary);
}

/* ── Loading state ─────────────────────────────────────────── */
.inv-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    gap: 12px;
    color: var(--text-muted);
    font-size: 14px;
}
/* ── Compact status bar (replaces full-height inv-loading in invAnalysisOutput) ── */
.inv-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface);
    font-size: 13px;
    color: var(--text-secondary);
    min-height: 38px;
}
.inv-status-bar.success {
    background: color-mix(in srgb, var(--ok) 7.0%, transparent);
    border-color: color-mix(in srgb, var(--ok) 25%, transparent);
    color: var(--success);
}
.inv-status-bar.error {
    background: color-mix(in srgb, var(--crit) 7.0%, transparent);
    border-color: color-mix(in srgb, var(--crit) 25%, transparent);
    color: var(--danger);
}
.inv-status-bar-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inv-status-bar-progress {
    width: 120px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    flex-shrink: 0;
    overflow: hidden;
}
.inv-status-bar-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.inv-status-bar .inv-status-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 2px;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

/* ── v3.0 coming-soon card ─────────────────────────────────── */
.inv-future-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 8px;
    border: 1px dashed var(--border);
    background: var(--bg-body);
    font-size: 13px;
    color: var(--text-muted);
}
.inv-future-notice .material-symbols-outlined {
    font-size: 24px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ── Responsive: investment tab ────────────────────────────── */
@media (max-width: 768px) {
    .inv-three-tools {
        grid-template-columns: 1fr;
    }
    .inv-sticker-widget {
        grid-template-columns: 1fr;
    }
    .inv-bigfive-label {
        width: 100px;
    }
}

/* ── Four Ms grid ──────────────────────────────────────────── */
/* v4.36.0 (Growth & Quality layout redesign) — 4-across instead of 2x2;
   default collapse state also flipped (see mCard()/toggleMCard() in app.js)
   so all 4 cards start as a tidy one-line-summary row instead of uneven
   card heights (M1/M3 hold variable-length AI paragraphs, M2/M4 don't). */
.inv-four-ms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.inv-m-card {
    padding: 16px;
    border-radius: var(--radius-card, 3px);
    border: 1px solid var(--border);
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* v4.9.2-3 — Dark mode: cards use bg-surface for elevation above bg-body */
[data-theme="dark"] .inv-m-card {
    background: var(--bg-surface);
    border-color: var(--border);
}

.inv-m-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.03em;
}

.inv-m-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.inv-m-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
}

.inv-m-source {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* Moat type badge */
.inv-moat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(0,123,255,0.1);
    color: var(--primary);
    margin-right: 6px;
}

/* Moat strength label */
.inv-moat-strength {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}
.inv-moat-strong  { background: color-mix(in srgb, var(--ok) 12%, transparent);  color: var(--success); }
.inv-moat-moderate{ background: color-mix(in srgb, var(--high) 12%, transparent);  color: var(--high); }
.inv-moat-weak    { background: color-mix(in srgb, var(--crit) 12%, transparent);  color: var(--danger); }
.inv-moat-unclear { background: rgba(153,153,153,0.1); color: var(--text-muted); }


/* ── Buffett Composite Scorecard — v3.0.0 ────────────────────────────── */
/* Composite Score + Gate 1 + Gate 2 are one model (Business Quality/
   Financial Health are two of the composite's own breakdown rows above),
   so they share one .inv-section frame (.buffett-group, set at the
   assembly call site) instead of three — .bsc-block is just the inner
   spacing wrapper for the score/gauge portion of that shared frame. */
.bsc-block {
    margin-bottom: 24px;
}
.bsc-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.bsc-gauge-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 140px;
    flex-shrink: 0;
}
.bsc-gauge-svg {
    width: 140px;
    height: 85px;
    overflow: visible;
}
.bsc-tier-badge {
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-badge, 2px);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
.bsc-tier-badge.tier1 { background: color-mix(in srgb, var(--ok) 14.0%, transparent);  color: var(--success); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.bsc-tier-badge.tier2 { background: color-mix(in srgb, var(--high) 14.0%, transparent);  color: var(--high);        border: 1px solid color-mix(in srgb, var(--high) 35%, transparent); }
.bsc-tier-badge.tier3 { background: color-mix(in srgb, var(--crit) 12%, transparent);  color: var(--danger);  border: 1px solid color-mix(in srgb, var(--crit) 28.0%, transparent); }

.bsc-breakdown {
    flex: 1;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bsc-row {
    display: grid;
    grid-template-columns: 140px 1fr 48px;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
}
.bsc-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    grid-column: 1;
    grid-row: 1;
}
.bsc-bar-track {
    grid-column: 2;
    grid-row: 1 / 3;
    height: 8px;
    background: var(--background-alt);
    border-radius: 4px;
    overflow: hidden;
}
.bsc-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.bsc-pts {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    grid-column: 3;
    grid-row: 1;
    text-align: right;
}
.bsc-max {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 400;
}
.bsc-detail {
    font-size: 10px;
    color: var(--text-muted);
    grid-column: 1;
    grid-row: 2;
}

/* ── v4.36.0 (Growth & Quality layout redesign) — Gate 1 + Gate 2 side by
   side instead of stacked, as the last piece inside .buffett-group's shared
   frame (see the Buffett Composite Scorecard block above) — no margin-bottom
   of its own since the outer .inv-section's padding closes out the box. ── */
.gate-pair-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Gate 1 / Gate 2 criteria tables ──────────────────────────────────── */
/* Sub-headers inside .buffett-group's shared frame — lighter than
   .inv-section-title (which stays reserved for a top-level model heading,
   here "Buffett Composite Score") since Gate 1/2 are that same model's own
   detail tables, not separate models of their own. */
.inv-gate-subtitle {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.buffett-gate-block:not(:first-child) {
    border-left: 1px solid var(--border);
    padding-left: 16px;
}
.inv-gate-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.inv-gate-row {
    display: grid;
    grid-template-columns: 28px 1fr 80px 90px;
    gap: 0 12px;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.inv-gate-row:last-child { border-bottom: none; }
.inv-gate-icon {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}
.inv-gate-icon.pass { color: var(--success); }
.inv-gate-icon.fail { color: var(--danger); }
.inv-gate-icon.na   { color: var(--text-muted); }
.inv-gate-label     { font-weight: 500; color: var(--text-primary); }
.inv-gate-threshold { font-size: 11px; color: var(--text-muted); text-align: right; }
.inv-gate-value     { font-weight: 600; color: var(--text-primary); text-align: right; font-size: 13px; }
.inv-gate-summary {
    margin-left: 10px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}
.inv-gate-summary.pass { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--success); }
.inv-gate-summary.warn { background: color-mix(in srgb, var(--high) 12%, transparent);  color: var(--high); }
.inv-gate-summary.fail { background: color-mix(in srgb, var(--crit) 10%, transparent);  color: var(--danger); }
.inv-gate-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    padding-left: 4px;
}

/* ── Leverage & industry-relative multiples (v4.36.0, L6) ─────────────── */
.lev-group-badge {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 8px;
    text-transform: none;
}
.lev-card {
    padding: 14px;
    border-radius: var(--radius-card, 3px);
    border: 1px solid var(--border);
    background: var(--bg-body);
}
.lev-card-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.lev-metric {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.lev-value {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.lev-band-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 999px;
}
.lev-band-badge.safe,
.lev-band-badge.net_cash      { background: color-mix(in srgb, var(--ok) 12%, transparent);  color: var(--success); }
.lev-band-badge.elevated      { background: color-mix(in srgb, var(--info) 12%, transparent);  color: var(--info); }
.lev-band-badge.high          { background: color-mix(in srgb, var(--high) 14.0%, transparent);  color: var(--high); }
.lev-band-badge.danger        { background: color-mix(in srgb, var(--crit) 10%, transparent);  color: var(--danger); }
.lev-band-badge.undefined_negative_ebitda,
.lev-band-badge.unknown       { background: color-mix(in srgb, var(--high) 10%, transparent);  color: var(--text-muted); }
.lev-band-badge.not-applicable{ background: var(--bg-hover);       color: var(--text-muted); }
.lev-subrow {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   lbo-value-trap-spec.md — Takeover & Risk quadrant scatter (Task 1)
   ═══════════════════════════════════════════════════════════════════════ */
.tr-quadrant-svg {
    width: 220px;
    height: 190px;
    flex-shrink: 0;
}
.tr-quadrant-dot {
    filter: drop-shadow(0 1px 2px color-mix(in srgb, black 25%, transparent));
}
.tr-quadrant-empty-label {
    fill: var(--text-muted);
    font-size: 11px;
}

/* Headline stat row (LBO Score / Trap Score / Net Takeover Alpha) — user
   feedback 2026-08-23: the old .lev-metric/.lev-value pairing mismatched
   sizes (12px label vs 18px value) and stacked vertically in a cramped
   160px column. Label and value are now the same size, side by side, in a
   row that wraps to full width beside the quadrant plot. */
.tr-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}
.tr-stat {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.tr-stat-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: help;
}
.tr-stat-value {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.tr-explain {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tr-subrow {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* News-Pulse follow-up (2026-09-01) — Filings & Catalysts feed under the
   Takeover & Risk card's component breakdown: 13D/13G ownership, 8-K notable
   items, shelf/dilution activity, Form D offerings. */
.tr-filings { display: flex; flex-direction: column; gap: 12px; }
.tr-filing-group { display: flex; flex-direction: column; gap: 4px; }
.tr-filing-group-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--text-muted);
}
.tr-filing-item {
    font-size: 13px; line-height: 1.5; color: var(--text-secondary);
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.tr-filing-item.tr-filing-clean { color: var(--text-muted); }
.tr-filing-severity {
    font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
    border-radius: 4px; padding: 2px 6px; flex: none; line-height: 1.4;
}
.tr-filing-severity.danger  { color: var(--danger);  background: color-mix(in srgb, var(--danger) 12%, transparent); }
.tr-filing-severity.warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
.tr-filing-severity.muted   { color: var(--text-secondary); background: var(--background-alt); }

/* news-pulse-and-strike-score-backlog.md §8.5 — Strike Score (Disclosure
   Candor) card. Sits beneath Filings & Catalysts on the Takeover & Risk tab
   and reuses that block's own .tr-filings shell for spacing. */
.ss-card .inv-health-label { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ss-dimension-note { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.ss-verdict-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ss-notmeasured { font-size: 11px; }
.ss-text { font-size: 13px; line-height: 1.5; color: var(--text-primary); }
.ss-quote {
    margin: 2px 0; padding: 6px 10px;
    border-left: 3px solid var(--rule-strong, var(--border));
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    font-size: 13px; line-height: 1.5; color: var(--text-secondary); font-style: italic;
}
/* The quote is machine-verified against the filing; .ss-text is the model's
   own prose and is not. Labelled so the two never read as equally sourced. */
.ss-quote-tag, .ss-unverified-tag {
    display: block; margin-top: 4px;
    font-size: 10px; font-style: normal; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--text-muted);
}
.ss-source { font-size: 11px; line-height: 1.5; }
.ss-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: 2px; font-size: 11px; flex-wrap: wrap;
}

.lev-explanation {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.lev-flags {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.lev-flag-chip {
    font-size: 10px;
    font-weight: 600;
    color: var(--warning);
    background: color-mix(in srgb, var(--high) 12%, transparent);
    border-radius: 4px;
    padding: 2px 7px;
}

/* ── Beneish M-Score ─────────────────────────────────────────────────── */
.beneish-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.beneish-score-block {
    min-width: 110px;
    text-align: center;
    flex-shrink: 0;
}
.beneish-score-value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 4px;
}
.beneish-score-value.beneish-flag  { color: var(--danger); }
.beneish-score-value.beneish-clean { color: var(--success); }
.beneish-score-threshold {
    font-size: 11px;
    color: var(--text-muted);
}
.beneish-years {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.beneish-status-block {
    flex: 1;
    min-width: 200px;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid;
}
.beneish-status-block.beneish-flag  { border-color: var(--danger);  background: color-mix(in srgb, var(--crit) 6%, transparent); }
.beneish-status-block.beneish-clean { border-color: var(--success); background: color-mix(in srgb, var(--ok) 6%, transparent); }
.beneish-status-label {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}
.beneish-status-block.beneish-flag  .beneish-status-label  { color: var(--danger); }
.beneish-status-block.beneish-clean .beneish-status-label  { color: var(--success); }
.beneish-status-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.beneish-reduced-note {
    font-size: 12px;
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    border-radius: 6px;
    padding: 7px 10px;
    margin-bottom: 10px;
    line-height: 1.5;
}
.beneish-components { margin-top: 4px; }
.beneish-components-toggle {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
    list-style: none;
}
.beneish-components-toggle::-webkit-details-marker { display: none; }
.beneish-components-toggle::before { content: '\25B6\00A0'; font-size: 9px; }
details[open] .beneish-components-toggle::before { content: '\25BC\00A0'; font-size: 9px; }
.beneish-comp-list {
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.beneish-comp-row {
    display: grid;
    grid-template-columns: 46px 1fr 70px;
    gap: 0 10px;
    padding: 6px 12px;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}
.beneish-comp-row:last-child { border-bottom: none; }
.beneish-comp-key   { font-weight: 700; color: var(--primary); }
.beneish-comp-label { color: var(--text-secondary); }
.beneish-comp-val   { text-align: right; font-weight: 600; color: var(--text-primary); }

/* ── CAN SLIM Scorecard — v4.13.6 compact grid ───────────────────────── */
.canslim-framework-badge {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.03em;
}
/* 2-column grid: 7 rows split across 2 cols */
.canslim-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    margin: 6px 0 4px;
}
@media (max-width: 560px) {
    .canslim-grid { grid-template-columns: 1fr; }
}
.canslim-grid-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 4px;
    border-radius: 4px;
    cursor: default;
    min-width: 0;
}
.canslim-grid-row:hover { background: var(--background-alt); }
.canslim-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.canslim-letter-pass { background: color-mix(in srgb, var(--ok) 15%, transparent);  color: var(--success); }
.canslim-letter-fail { background: color-mix(in srgb, var(--crit) 12%, transparent);  color: var(--danger); }
.canslim-letter-warn { background: color-mix(in srgb, var(--high) 15%, transparent);  color: var(--warning); }
.canslim-grid-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.canslim-grid-threshold {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.canslim-grid-value {
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.canslim-cell-val { color: var(--text-secondary); }
.canslim-cell-na  { color: var(--text-muted); }
.canslim-grid-icon {
    font-size: 15px;
    flex-shrink: 0;
}
.canslim-grid-icon.pass { color: var(--success); }
.canslim-grid-icon.fail { color: var(--danger); }
.canslim-grid-icon.warn { color: var(--warning); }
.canslim-data-note {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    padding: 6px 0 0;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* ── Portfolio Valuation Strip — v4.13.5 ─────────────────────────────── */
.pvs-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
    font-size: 12px;
}
.pvs-strip-nudge {
    color: var(--text-muted);
    font-size: 12px;
    gap: 8px;
}
.pvs-nudge-text strong { color: var(--primary); }
.pvs-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 2px;
    white-space: nowrap;
}
.pvs-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.pvs-pill-pe {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
}
.pvs-pill-ey {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border);
}
.pvs-pill-market.macro-ok     { background: color-mix(in srgb, var(--ok) 10%, transparent);  color: var(--success); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.pvs-pill-market.macro-warn   { background: color-mix(in srgb, var(--high) 10%, transparent);  color: var(--warning); border-color: color-mix(in srgb, var(--high) 30%, transparent); }
.pvs-pill-market.macro-danger { background: color-mix(in srgb, var(--crit) 10%, transparent);  color: var(--danger);  border-color: color-mix(in srgb, var(--crit) 25%, transparent); }
.pvs-signal-text {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.85;
}
.pvs-pill-spread.pvs-pos { background: color-mix(in srgb, var(--ok) 8%, transparent);  color: var(--success); border-color: color-mix(in srgb, var(--ok) 20%, transparent); }
.pvs-pill-spread.pvs-neg { background: color-mix(in srgb, var(--crit) 8%, transparent);  color: var(--danger);  border-color: color-mix(in srgb, var(--crit) 20%, transparent); }
.pvs-divider {
    color: var(--border);
    font-size: 14px;
    margin: 0 2px;
}
.pvs-coverage {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Rule of 40 — v4.13.4 ────────────────────────────────────────────── */
.r40-framework-badge {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.03em;
}
.r40-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 8px;
    letter-spacing: 0.04em;
}
.r40-badge-pass {
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}
.r40-badge-fail {
    background: color-mix(in srgb, var(--crit) 10%, transparent);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--crit) 25%, transparent);
}
.r40-score-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.r40-trend {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
}
.r40-trend-up   { color: var(--success); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.r40-trend-down { color: var(--danger);  background: color-mix(in srgb, var(--crit) 8%, transparent); }
.r40-trend-stable { color: var(--text-muted); background: var(--background-alt); }
/* v4.36.0 (Growth & Quality layout redesign) — sparkline + table side by
   side instead of stacked, mirroring the Owner Earnings DCF section's
   .dcf-layout flex pattern below. */
.r40-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.r40-sparkline-wrap {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin: 10px 0 8px;
    flex-wrap: wrap;
    flex: 0 1 auto;
}
.r40-sparkline {
    display: block;
    flex-shrink: 0;
}
.r40-sparkline-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
}
.r40-legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
}
.r40-legend-dot.pass { background: var(--success); }
.r40-legend-dot.warn { background: var(--warning); }
.r40-legend-dot.fail { background: var(--danger); }
.r40-legend-line {
    display: inline-block;
    width: 14px;
    height: 1px;
    border-top: 2px dashed var(--primary);
    opacity: 0.6;
    vertical-align: middle;
}
.r40-table-wrap {
    overflow-x: auto;
    margin: 4px 0 8px;
    flex: 1;
    min-width: 280px;
}
.r40-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.r40-th {
    padding: 5px 8px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.r40-th.r40-num { text-align: right; }
.r40-td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    white-space: nowrap;
}
.r40-td.r40-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.r40-table tbody tr:last-child .r40-td { border-bottom: none; }
.r40-cell-pass { color: var(--success); }
.r40-cell-fail { color: var(--danger); }
.r40-status-pass { color: var(--success); font-weight: 600; }
.r40-status-fail { color: var(--danger);  font-weight: 600; }
.r40-data-note {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    padding: 6px 0 0;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* ── Owner Earnings DCF ──────────────────────────────────────────────── */
.dcf-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.dcf-summary {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.dcf-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.dcf-row:last-child { border-bottom: none; }
.dcf-row-highlight { background: var(--background-alt) !important; }
.dcf-label  { color: var(--text-secondary); }
.dcf-val    { font-weight: 600; color: var(--text-primary); }
.dcf-iv     { font-size: 15px; color: var(--primary); }
.dcf-valuation-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
.dcf-valuation-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}
.dcf-valuation-badge.deep-value  { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--success); }
.dcf-valuation-badge.undervalued { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--success); }
.dcf-valuation-badge.fair-value  { background: color-mix(in srgb, var(--high) 14.0%, transparent); color: var(--high); }
.dcf-valuation-badge.slight-over { background: rgba(255,152,0,0.12);  color: #c97000; }
.dcf-valuation-badge.overvalued  { background: color-mix(in srgb, var(--crit) 10%, transparent);  color: var(--danger); }
.dcf-discount-str { font-size: 12px; color: var(--text-secondary); }

.dcf-spark-wrap {
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.dcf-spark-title { font-size: 11px; color: var(--text-muted); text-align: center; }
.dcf-spark-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 50px;
    padding: 4px 0;
}
.dcf-spark-bar {
    width: 16px;
    min-height: 2px;
    background: var(--primary);
    border-radius: 3px 3px 0 0;
    opacity: 0.75;
    transition: opacity 0.2s;
}
.dcf-spark-bar:hover { opacity: 1; }
.dcf-spark-note { font-size: 10px; color: var(--text-muted); text-align: center; }
.dcf-assumptions-note {
    font-size: 11px;
    color: var(--text-muted);
    padding: 8px 4px 0;
    line-height: 1.5;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

/* ── Mode-changed notice ────────────────────────────────────────────── */
.inv-mode-changed-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--background-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.inv-mode-changed-notice .material-symbols-outlined {
    color: var(--primary);
    font-size: 18px;
    flex-shrink: 0;
}


/* ── Compare Mode — side-by-side table ───────────────────────────────── */
.cmp-convergence-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 10%, transparent) 0%, color-mix(in srgb, var(--info) 8%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
    border-radius: 10px;
    color: var(--text-primary);
}
.cmp-convergence-banner .material-symbols-outlined {
    font-size: 26px;
    color: var(--success);
    flex-shrink: 0;
    margin-top: 1px;
}
.cmp-convergence-banner strong {
    display: block;
    font-size: 13px;
    color: var(--success);
    margin-bottom: 3px;
}
.cmp-convergence-banner div {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.cmp-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 20px;
}
.cmp-summary-table th,
.cmp-summary-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}
.cmp-summary-table thead th {
    background: var(--background-alt);
    font-size: 12px;
}
.cmp-summary-table tr:last-child td { border-bottom: none; }
.cmp-th-metric { width: 30%; color: var(--text-muted); font-weight: 500; }
.cmp-th-r1,
.cmp-th-b { width: 35%; text-align: center; }
.cmp-table-metric { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.cmp-table-r1,
.cmp-table-b { text-align: center; font-weight: 600; }

.cmp-framework-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.cmp-framework-badge.rule1   { background: rgba(0,123,255,0.12); color: var(--primary); }
.cmp-framework-badge.buffett { background: rgba(111,66,193,0.12); color: #6f42c1; }
.cmp-framework-score { font-size: 18px; font-weight: 800; line-height: 1; }

.compare-val-green { color: var(--success); }
.compare-val-amber { color: var(--high); }
.compare-val-red   { color: var(--danger); }

/* Side-by-side detail columns */
.cmp-detail-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.cmp-detail-col {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cmp-detail-heading {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}
.cmp-detail-heading.rule1   { color: var(--primary); border-color: var(--primary); }
.cmp-detail-heading.buffett { color: #6f42c1;         border-color: #6f42c1; }

.cmp-metric-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
.cmp-metric-row:last-child { border-bottom: none; }
.cmp-metric-icon { font-weight: 700; font-size: 13px; text-align: center; }
.cmp-metric-icon.pass { color: var(--success); }
.cmp-metric-icon.fail { color: var(--danger); }
.cmp-metric-icon.na   { color: var(--text-muted); }
.cmp-metric-label { color: var(--text-secondary); }
.cmp-metric-val   { font-weight: 600; color: var(--text-primary); text-align: right; }

.cmp-detail-entry-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--background-alt);
    border-radius: 6px;
    font-size: 12px;
    margin-top: 4px;
}
.cmp-detail-entry-box.mos { background: color-mix(in srgb, var(--ok) 7.0%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent); }
.cmp-entry-label { color: var(--text-secondary); }
.cmp-entry-val   { font-weight: 700; color: var(--text-primary); }
.cmp-detail-valuation {
    margin-top: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.5px;
}
.cmp-detail-valuation.compare-val-green { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.cmp-detail-valuation.compare-val-amber { background: color-mix(in srgb, var(--high) 12%, transparent); }
.cmp-detail-valuation.compare-val-red   { background: color-mix(in srgb, var(--crit) 10%, transparent); }

/* ── Scan Now — progress + results ───────────────────────────────────── */
.scan-progress-bar-wrap {
    height: 6px;
    background: var(--background-alt);
    border-radius: 3px;
    overflow: hidden;
    margin: 10px 0 4px;
}
.scan-progress-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.scan-summary-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.scan-chip {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
}
.scan-chip.tier1       { background: color-mix(in srgb, var(--ok) 14.0%, transparent);  color: var(--success); }
.scan-chip.tier2       { background: color-mix(in srgb, var(--high) 14.0%, transparent);  color: var(--high); }
.scan-chip.tier3       { background: color-mix(in srgb, var(--crit) 10%, transparent);  color: var(--danger); }
.scan-chip.scan-error-chip { background: color-mix(in srgb, var(--crit) 10%, transparent); color: var(--danger); }
.scan-chip-total {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.scan-results-table .scan-pass { color: var(--success); font-weight: 700; }
.scan-results-table .scan-warn { color: var(--high);        font-weight: 700; }
.scan-results-table .scan-fail { color: var(--danger);  font-weight: 700; }
.scan-row-error td { background: color-mix(in srgb, var(--crit) 4%, transparent); }

/* v4.36.0 — intermediate tablet step: 4→2 / 3→2 columns before the 768px drop to 1 */
@media (max-width: 1024px) {
    .inv-four-ms-grid { grid-template-columns: repeat(2, 1fr); }
    .piotroski-bucket-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .inv-four-ms-grid { grid-template-columns: 1fr; }
    .bsc-layout       { flex-direction: column; align-items: center; }
    .bsc-row          { grid-template-columns: 110px 1fr 40px; }
    .inv-gate-row     { grid-template-columns: 26px 1fr 60px; }
    .inv-gate-threshold { display: none; }
    .gate-pair-grid   { grid-template-columns: 1fr; }
    .piotroski-bucket-grid { grid-template-columns: 1fr; }
    .dcf-layout       { flex-direction: column; }
    .r40-layout       { flex-direction: column; }
    .beneish-layout   { flex-direction: column; }
    .cmp-detail-cols  { grid-template-columns: 1fr; }
    .cmp-summary-table .cmp-table-metric { font-size: 11px; }
}

/* ============================================================
   P&L PAYOFF DIAGRAM — v3.1.0
   ============================================================ */

.payoff-modal-content {
    max-width: 640px;
}

.payoff-diagram-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 16px 8px;
    margin-bottom: 18px;
}

.payoff-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.payoff-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.payoff-strategy-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(0,123,255,0.12);
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.payoff-spot-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.payoff-spot-label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.payoff-spot-input {
    width: 90px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-body);
    color: var(--text-primary);
    text-align: right;
}

.payoff-spot-input:focus {
    outline: none;
    border-color: var(--primary);
}

.payoff-svg-wrap {
    width: 100%;
    overflow: visible;
}

.payoff-svg {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
}

.payoff-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.payoff-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
}

.payoff-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.payoff-legend-dot.profit  { background: var(--success); }
.payoff-legend-dot.loss    { background: var(--danger); }
.payoff-legend-dot.spot    { background: var(--primary); }
.payoff-legend-dot.be      { background: var(--warning); }

.payoff-stats-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--bg-hover);
    border-radius: 6px;
    font-size: 12px;
}

.payoff-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.payoff-stat-label {
    color: var(--text-muted);
    font-size: 11px;
}

.payoff-stat-value {
    font-weight: 700;
    font-size: 13px;
}

.payoff-stat-value.profit { color: var(--success); }
.payoff-stat-value.loss   { color: var(--danger); }
.payoff-stat-value.neutral { color: var(--text-primary); }

/* Inline payoff panel inside analysisModal */
.analysis-payoff-section {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 18px;
}

.analysis-payoff-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

[data-theme="dark"] .payoff-spot-input {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text-primary);
}

/* ============================================================
   GREEKS CALCULATOR — v3.1.0
   ============================================================ */

/* ── Row badge (inline in Strategy cell) ── */
.greeks-row-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.greek-item {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.greek-delta { background: rgba(0,123,255,0.10); color: var(--primary); }
.greek-theta { background: color-mix(in srgb, var(--crit) 10%, transparent);  color: var(--danger); }
.greek-vega  { background: color-mix(in srgb, var(--ok) 10%, transparent);  color: var(--success); }

/* ── Greeks panel (in payoff modal) ── */
.greeks-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px 12px;
    margin-top: 10px;
}

.greeks-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.greeks-subtitle {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.greeks-warn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--warning);
    background: color-mix(in srgb, var(--high) 10%, transparent);
    border-radius: 5px;
    padding: 5px 8px;
    margin-bottom: 10px;
}

.greeks-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .greeks-grid { grid-template-columns: repeat(3, 1fr); }
}

.greeks-card {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 3px);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.greeks-card-symbol {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary);
    line-height: 1;
}

.greeks-card-name {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.greeks-card-value {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

.greeks-card-value.g-positive { color: var(--success); }
.greeks-card-value.g-negative { color: var(--danger); }
.greeks-card-value.g-neutral  { color: var(--text-primary); }

.greeks-card-pos {
    font-size: 10px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 3px;
}

.greeks-card-interp {
    font-size: 9.5px;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.3;
}

.greeks-iv-note {
    font-size: 10.5px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 4px;
    line-height: 1.4;
}

/* Widen payoff modal for Greeks panel */
.payoff-modal-content {
    max-width: 680px !important;
}

/* ============================================================
   MONTHLY PERFORMANCE REPORT — v3.1.0 (§9.4)
   ============================================================ */

.report-container {
    padding: 2px 0;
}

.report-kpi-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.report-kpi-card {
    flex: 1;
    min-width: 110px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 3px);
    padding: 10px 12px;
    text-align: center;
}

.report-kpi-label {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.report-kpi-value {
    font-size: 17px;
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.report-kpi-sub {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
}

.report-trades-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.report-trade-card {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 3px);
    padding: 12px 14px;
}

.report-trade-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.report-trade-ticker {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
}

.report-trade-strategy {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 2px 0 5px;
}

.report-trade-pnl {
    font-size: 15px;
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.report-trade-hold {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

.report-trade-none {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 0;
}

.report-section {
    margin-bottom: 18px;
}

.report-section-title {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-note-inline {
    font-weight: 400;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    font-size: 10px;
}

.report-chart-note {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 6px;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.report-table th {
    text-align: left;
    padding: 5px 8px;
    background: var(--bg-surface);
    border-bottom: 2px solid var(--border);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.report-table td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border);
}

.report-table tbody tr:last-child td {
    border-bottom: none;
}

.report-export-row {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Modal max-width overrides */
.monthly-report-modal-content {
    max-width: 700px !important;
}

/* ============================================================
   POSITION COMPARISON TOOL — v3.1.0 (§9.5)
   ============================================================ */

/* Fixed bottom-right floating pill */
.compare-pill {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--primary, #1976D2);
    color: var(--on-accent);
    border-radius: 28px;
    padding: 10px 16px 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 18px color-mix(in srgb, black 32%, transparent);
    z-index: 1100;
    cursor: default;
    user-select: none;
    animation: comparePillIn 0.2s ease;
}

@keyframes comparePillIn {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.compare-pill-btn {
    background: rgba(255,255,255,0.18);
    color: var(--on-accent);
    border: 1.5px solid rgba(255,255,255,0.45);
    border-radius: 16px;
    padding: 4px 13px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.compare-pill-btn:hover {
    background: rgba(255,255,255,0.32);
}

.compare-pill-clear {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0;
    margin-left: -4px;
    transition: color 0.15s;
}

.compare-pill-clear:hover {
    color: var(--on-accent);
}

/* Row button highlight when in basket */
button.compare-btn-active {
    background: var(--primary, #1976D2) !important;
    color: var(--on-accent) !important;
    border-color: var(--primary, #1976D2) !important;
}

/* Comparison container */
.compare-container {
    padding: 2px 0;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.compare-table thead th {
    text-align: center;
    padding: 9px 10px;
    background: var(--bg-surface);
    border-bottom: 2px solid var(--border);
    font-weight: 700;
    font-size: 14px;
}

.compare-table thead th:first-child {
    text-align: left;
    width: 130px;
}

.compare-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
}

.compare-field-label {
    text-align: left !important;
    font-size: 10px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    white-space: nowrap;
    background: var(--bg-surface);
}

.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Legend below the overlay chart */
.compare-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--text-secondary);
}

.compare-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.compare-legend-line {
    display: inline-block;
    width: 18px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Modal max-width override */
.compare-modal-content {
    max-width: 780px !important;
}

/* ============================================================
   STRIKE v3.2.0 — New styles
   ============================================================ */


/* Market Countdown */
.market-countdown {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    white-space: nowrap;
    cursor: default;
}
.mkt-dot { font-size: 10px; }
.mkt-open     { color: var(--success); }
.mkt-premarket{ color: var(--warning); }
.mkt-closed   { color: var(--danger); }

/* Count badge (Holdings 32/40, Play Ideas 0/30) */
.count-badge {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 6px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1px 8px;
    vertical-align: middle;
}

/* Holdings table */
.holdings-table td { vertical-align: middle; }

/* v3.5.0 — Holdings price column */
.holdings-price-cell {
    white-space: nowrap;
}
.holdings-price-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}
.price-change-up {
    font-size: 11px;
    font-weight: 500;
    color: #2e7d32;
}
.price-change-down {
    font-size: 11px;
    font-weight: 500;
    color: #c62828;
}
[data-theme="dark"] .price-change-up   { color: #6fcf8e; }
[data-theme="dark"] .price-change-down { color: #f48c96; }

/* Signal badges */
/* UI Phase D — squared chip, 3px left rule, tinted ground (was: rounded,
   fully-colored pill). border-left uses currentColor rather than repeating
   each variant's own token, since every variant already sets `color` to its
   semantic token — one declaration stays correct for all six states. Every
   variant is now a pure var()/color-mix() expression, so none of them need
   a separate [data-theme="dark"] override any more (the strong-buy/hold/
   sell trio used to carry raw hex here that never matched --ok/--high/--crit
   -soft's actual dark values). */
.signal-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    border-radius: var(--radius-badge, 2px);
    border-left: 3px solid currentColor;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.signal-strong-buy { background: var(--ok-soft); color: var(--ok); }
.signal-buy        { background: color-mix(in srgb, var(--info) 24%, transparent); color: var(--info); }
.signal-hold       { background: var(--bg-hover); color: var(--text-secondary); }
.signal-watch      { background: var(--high-soft); color: var(--high); }
.signal-sell       { background: var(--crit-soft); color: var(--crit); }
.signal-none       { background: var(--bg-surface); color: var(--text-muted); border: 1px solid var(--border); }

/* UI Phase D — .b5-pips/.b5-pip's real definition lives later in this file
   (search for the v4.1.0-B block), not here. This v4.23.3 comment
   used to claim this WAS the definition, but a second, later, equal-
   specificity .b5-pip rule set has shadowed every property here (7px vs the
   real 8px, unbordered .empty vs the real bordered one) since whichever of
   the two was added second — confirmed live via getComputedStyle before
   consolidating. Left only as a pointer so a future reader doesn't
   independently rediscover the same dead-code trail. */

/* v4.23.3 — Analyze tab Recent History: fixed-width badge slot so the 5 dots
   start at the same X position on every row regardless of "Strong Buy" vs
   "Buy" vs "Sell" text width, and the whole group left-justifies under the
   Signal column header instead of centering. */
.ah-signal-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ah-signal-badge-slot {
    display: inline-flex;
    min-width: 112px;
}

.big-five-score {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

/* Scan ticker chips */
.scan-ticker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 0 8px;
}
.scan-ticker-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px 10px 4px 12px;
    font-size: 13px;
    font-weight: 600;
}
.chip-remove {
    background: none;
    border: none;
    padding: 0 2px;
    margin: 0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--text-muted);
    box-shadow: none;
    min-width: unset;
}
.chip-remove:hover { color: var(--danger); background: none; }

/* Ignore list panel (inline in Options tab) */
.ignore-list-panel {
    margin-top: 24px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-surface);
    padding: 16px;
}
.ignore-list-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 14px;
}
.ignore-note-input {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-body);
    color: var(--text-primary);
}

/* Cache status bar */
.cache-status-bar {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0 10px;
}
.cache-status-badge {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 4px;
}
.cache-fresh   { background: var(--ok-soft); color: #155724; }
.cache-usable  { background: #fff3cd; color: #856404; }
.cache-expired { background: var(--bg-hover); color: var(--text-secondary); }
[data-theme="dark"] .cache-fresh   { background: #1e4a2e; color: #6fcf8e; }
[data-theme="dark"] .cache-usable  { background: #4a3800; color: #ffd166; }

/* Rank badges for play ideas */
.rank-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.rank-green  { background: var(--ok-soft); color: #155724; }
.rank-yellow { background: #fff3cd; color: #856404; }
.rank-orange { background: #ffe5cc; color: #8a4000; }
[data-theme="dark"] .rank-green  { background: #1e4a2e; color: #6fcf8e; }
[data-theme="dark"] .rank-yellow { background: #4a3800; color: #ffd166; }
[data-theme="dark"] .rank-orange { background: #4a2200; color: #ffb366; }

/* Settings — collapsible section header */
.settings-section-collapsible { cursor: pointer; user-select: none; }
.settings-section-collapsible:hover { opacity: 0.85; }
.settings-collapse-icon { float: right; font-size: 20px; }
.recommended-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: var(--primary);
    color: var(--on-accent);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Investment — warning card (Phase H) */
.inv-warning-card {
    background: var(--high-soft);
    border: 1px solid var(--high);
    border-radius: var(--radius-card, 3px);
    padding: 14px 16px;
    margin-top: 8px;
    line-height: 1.6;
}
[data-theme="dark"] .inv-warning-card {
    background: #4a3800;
    border-color: #ffd166;
    color: #ffd166;
}

/* ── v3.4.0 — Backtest Modal ─────────────────────────────────────────── */

.backtest-modal-content {
    max-width: 860px;
    width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.backtest-modal-content .modal-body {
    overflow-y: auto;
    flex: 1;
}

.backtest-filters-bar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.backtest-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.backtest-ticker-input {
    width: 130px;
}

.backtest-summary-bar {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.backtest-summary-chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.backtest-empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
}

.backtest-empty-state .material-symbols-outlined {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
}

.backtest-strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
}

.backtest-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 3px);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.backtest-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.backtest-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.backtest-card-trades {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.backtest-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.backtest-stat {
    background: var(--surface-2);
    border-radius: 6px;
    padding: 7px 10px;
    text-align: center;
}

.backtest-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

.backtest-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.backtest-stat-value.positive { color: var(--success); }
.backtest-stat-value.negative { color: var(--danger); }

.backtest-extremes {
    display: flex;
    gap: 10px;
    font-size: 12px;
}

.backtest-best {
    color: var(--success);
    font-weight: 600;
}

.backtest-worst {
    color: var(--danger);
    font-weight: 600;
}

.backtest-histogram {
    margin-top: 4px;
}

.backtest-histogram svg {
    width: 100%;
    height: 64px;
    overflow: visible;
}

/* Settings muted label */
.muted-label {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.9em;
}


/* ── v3.3.0 — Holdings Scan Summary Banner ────────────────────────── */
.holdings-scan-summary {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.holdings-scan-summary-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
}
.holdings-scan-meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── v3.3.0 — Stale Plays Banner ─────────────────────────────────── */
.stale-plays-banner {
    background: #fff3cd;
    border: 1px solid var(--high);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #856404;
}
.stale-plays-banner .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}
[data-theme="dark"] .stale-plays-banner {
    background: #3a2e00;
    border-color: var(--high);
    color: #ffd166;
}

/* ── v3.3.0 — Holdings Rationale Cell ────────────────────────────── */
.holdings-rationale {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    max-width: 280px;
}

/* ── v3.3.0 — Inline spinner for buttons ─────────────────────────── */
.loading-spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: var(--on-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── v3.4.1 — ETF Analysis Card ─────────────────────────────────────── */
.etf-analysis-card {
    padding: 0;
}

.etf-analysis-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
}

.etf-icon {
    font-size: 32px;
    color: var(--primary);
    flex-shrink: 0;
}

.etf-ticker-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.etf-header-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.etf-notice-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 18px 24px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.etf-notice-box strong {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.etf-notice-box p {
    margin: 6px 0 0;
}

.etf-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 4px 0;
}

.etf-profile-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.etf-profile-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.etf-profile-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.etf-unknown-note {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    padding: 4px 0;
}

.etf-actions {
    display: flex;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    align-items: center;
}
.etf-action-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: var(--success);
    padding: 4px 10px; border-radius: 6px;
    background: color-mix(in srgb, var(--ok) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ok) 20%, transparent);
}
.inv-header-badge-in {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: var(--success);
    padding: 3px 8px; border-radius: 6px;
    background: color-mix(in srgb, var(--ok) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--ok) 20%, transparent);
}

/* Dark theme overrides for ETF card */
[data-theme="dark"] .etf-notice-box {
    background: var(--bg-surface);
    border-color: var(--border);
    border-left-color: var(--primary);
}

/* ── v3.4.1 — Filtered-Out Plays ────────────────────────────────────── */

/* Clickable "N removed by filters" stat in the stats bar */
.filtered-toggle-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--warning);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
}

.filtered-toggle-stat:hover {
    background: color-mix(in srgb, var(--high) 8%, transparent);
    border-color: var(--warning);
}

.filtered-toggle-icon {
    font-size: 16px !important;
    vertical-align: middle;
    line-height: 1;
}

/* Divider between stat items */
.stats-divider {
    color: var(--text-muted);
}

/* Collapsible filtered-plays section below qualifying grid */
.filtered-plays-section {
    margin-top: 32px;
    border-top: 2px dashed var(--border);
    padding-top: 20px;
}

.filtered-plays-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.filtered-plays-subtext {
    font-weight: 400;
    color: var(--text-muted);
}

.filtered-plays-subtext a {
    color: var(--primary);
    text-decoration: none;
}

.filtered-plays-subtext a:hover {
    text-decoration: underline;
}

/* The filtered card itself — dimmed, distinct from qualifying cards */
.strategy-card.filtered-card {
    opacity: 0.72;
    border-style: dashed;
    border-color: var(--border);
    background: var(--bg-surface);
}

.strategy-card.filtered-card:hover {
    opacity: 0.92;
    transform: none;
    box-shadow: 0 2px 4px color-mix(in srgb, black 5%, transparent);
}

/* Reason banner at top of each filtered card */
.filter-reason-banner {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #7a5c00;
    line-height: 1.4;
}

/* Empty-state message when ALL plays are filtered */
.filtered-plays-all-empty {
    text-align: center;
    padding: 24px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.filtered-plays-all-empty p {
    margin: 10px 0 0;
    line-height: 1.6;
}

.filtered-plays-all-empty a {
    color: var(--primary);
    text-decoration: none;
}

/* Dark theme overrides */
[data-theme="dark"] .filter-reason-banner {
    background: #332900;
    border-color: #665200;
    color: #ffd166;
}

[data-theme="dark"] .strategy-card.filtered-card {
    background: var(--bg-body);
    border-color: var(--border);
}

[data-theme="dark"] .filtered-plays-section {
    border-top-color: var(--border);
}

/* ── v4.12.0 — Play Watchlist + AI Explainer ────────────────────────────── */

/* Star (watch) button — sits in strategy-actions row */
.play-watch-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1;
    color: var(--text-secondary);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.play-watch-btn:hover {
    border-color: var(--high);
    color: var(--high);
}
.play-watch-btn.watched {
    border-color: var(--high);
    color: var(--high);
    background: color-mix(in srgb, var(--high) 8%, transparent);
}
[data-theme="dark"] .play-watch-btn.watched {
    background: color-mix(in srgb, var(--high) 12%, transparent);
}

/* Watching section — above main grid */
.watching-section {
    margin-bottom: 20px;
}
.watching-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--high);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--high-soft);
}
[data-theme="dark"] .watching-section-header {
    color: var(--high);
    border-bottom-color: #44330a;
}
.watching-section-icon {
    font-size: 16px;
}

/* AI Explain button */
.play-explain-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.play-explain-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(201,106,58, 0.05);
}
.play-explain-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
[data-theme="dark"] .play-explain-btn:hover:not(:disabled) {
    background: var(--primary-faint);
}

/* AI Explainer response body */
.play-explain-body {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--primary);
    background: rgba(201,106,58, 0.04);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-primary);
    display: none;
}
.play-explain-body.visible {
    display: block;
}
[data-theme="dark"] .play-explain-body {
    background: var(--primary-faint);
    border-left-color: var(--primary);
}
.play-explain-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: 5px;
}
[data-theme="dark"] .play-explain-label {
    color: var(--primary);
}

/* ── v4.2.0 — Holdings Table: compact row design ────────────────────────── */

/* Clickable row */
tr.holdings-data-row {
    cursor: pointer;
    transition: background 0.12s;
}
tr.holdings-data-row:hover {
    background: var(--bg-hover);
}
tr.holdings-data-row.dragging {
    opacity: 0.5;
}

/* ── v4.6.x UI-12 — Signal-based subtle left border on Holdings rows ─── */
tr.holdings-data-row.row-signal-buy td:first-child {
    border-left: 3px solid var(--success, #10b981);
}
tr.holdings-data-row.row-signal-hold td:first-child {
    border-left: 3px solid var(--warning, var(--high));
}
tr.holdings-data-row.row-signal-sell td:first-child {
    border-left: 3px solid var(--danger, var(--crit));
}
[data-theme="dark"] tr.holdings-data-row.row-signal-buy td:first-child {
    border-left-color: var(--ok);
}
[data-theme="dark"] tr.holdings-data-row.row-signal-hold td:first-child {
    border-left-color: var(--high);
}
[data-theme="dark"] tr.holdings-data-row.row-signal-sell td:first-child {
    border-left-color: var(--crit);
}
tr.holdings-data-row.drag-over {
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
}

/* Ticker cell with rationale tooltip icon */
.holdings-ticker-cell {
    white-space: nowrap;
}
/* Inner flex wrapper — keeps drag handle + ticker + icon aligned
   without applying display:flex to the <td> itself (breaks table layout) */
.holdings-ticker-inner {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rationale-icon {
    font-size: 12px;
    color: var(--text-muted);
    cursor: help;
}

/* Signal + B5 cells — 2026-08-24: split out of the old combined
   .holdings-signal-b5 div into their own <td>s (Signal is a price-bearing
   read, B5 is business-quality-only, and the two can legitimately disagree —
   see renderHoldingsRow's signalCellHTML/b5CellHTML). .holdings-b5-cell's
   <td style="text-align:center"> is enough to center the inline-flex
   .b5-pips dots, no extra rule needed for it. UI Phase D removed the
   .b5-pips-na fallback that used to live here — renderB5Pips() now shows a
   real 5-hatched-pip group with the same "run Analyze" tooltip instead of
   swapping the whole element out for a lone dash. */

/* Shares inline editor */
.holdings-shares-display {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 13px;
    color: var(--text-primary);
    transition: background 0.12s;
    white-space: nowrap;
}
.holdings-shares-display:hover {
    background: var(--bg-hover);
    text-decoration: underline dotted;
}
.holdings-shares-input {
    padding: 3px 6px;
    border: 1px solid var(--primary);
    border-radius: 4px;
    font-size: 13px;
    background: var(--bg-surface);
    color: var(--text-primary);
    width: 80px;
}

/* Value cell */
.holdings-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Dividend cell */
.holdings-div {
    font-size: 12px;
    white-space: nowrap;
    cursor: help;
}
.div-yield {
    color: var(--text-secondary);
    font-size: 11px;
}

/* Edit button in header */
.holdings-edit-btn {
    font-size: 12px;
    padding: 4px 10px;
}
.holdings-actions-th {
    text-align: right;
    padding-right: 10px;
}
.holdings-actions-cell {
    text-align: right;
    padding-right: 8px;
    /* v4.16.1 — pin actions to the right edge so Edit/delete never scroll off in edit mode */
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--bg-surface);
    box-shadow: -6px 0 6px -6px color-mix(in srgb, black 10%, transparent);
}
tr.holdings-data-row:hover .holdings-actions-cell { background: var(--bg-hover); }
.holdings-actions-th {
    position: sticky;
    right: 0;
    z-index: 3;
    background: var(--bg-hover);
    box-shadow: -6px 0 6px -6px color-mix(in srgb, black 10%, transparent);
}

/* G1 / G2 / TIER screener columns in Holdings table */
.holdings-screener-th {
    text-align: center;
    font-size: 11px;
    white-space: nowrap;
    padding: 6px 8px;
    color: var(--text-secondary);
}
.holdings-screener-cell {
    text-align: center;
    padding: 6px 8px;
    white-space: nowrap;
}

/* v4.16.2 — Tighten Holdings horizontal padding so the table fits without a
   horizontal scrollbar after R40 removal + G1·G2·F consolidation. Scoped to the
   Holdings table only; vertical rhythm unchanged. */
.holdings-table th,
.holdings-table td { padding-left: 6px; padding-right: 6px; }

/* v4.16.2 — Merged Buffett quality cell (G1 · G2 · F in one column) */
/* ── v4.16.5 — unified G1·G2·F gate cell (single source of truth, app-wide) ──
   Replaces the former .holdings-buffett-* rules. Used by the merged Buffett cell
   in Holdings, Idea Inbox, the Analyze lists and the Investment Watchlist. */
.holdings-buffett-th { min-width: 96px; }   /* the merged cell holds "4/4 · 3/4 · 7/9" */
.holdings-buffett-cell { text-align: center; }
.gate3 {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
}
.gate3-hdr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.gate3-sep { color: var(--text-muted); font-size: 10px; opacity: 0.7; }
.gate3 .g-pass { color: var(--success); font-weight: 700; }
.gate3 .g-warn { color: var(--high);        font-weight: 700; }
.gate3 .g-fail { color: var(--danger);  font-weight: 700; }
.gate3 .g-na,
.gate3 .g-muted { color: var(--text-muted); font-weight: 400; }
[data-theme="dark"] .gate3 .g-warn { color: #e0b050; }

/* Drag handle */
.holdings-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    font-size: 18px !important;
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
}
.holdings-drag-handle:active {
    cursor: grabbing;
}

/* Multi-account ⊕ indicator in Shares column */
.holdings-multi-acct-badge {
    display: inline-block;
    font-size: 13px;
    color: var(--primary);
    cursor: pointer;
    margin-left: 4px;
    opacity: 0.75;
    vertical-align: middle;
    transition: opacity 0.15s;
}
.holdings-multi-acct-badge:hover { opacity: 1; }

/* Account breakdown strip inside Holdings accordion */
.holdings-acct-breakdown {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 16px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-body);
    font-size: 12px;
}
.holdings-acct-breakdown-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 4px;
}

/* Tab button locked state during scan */
.tab-button.scan-locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Holdings inline accordion row */
.holdings-acc-row td {
    padding: 0 !important;
    border-top: none !important;
}
.holdings-acc-cell {
    padding: 0 !important;
}
.holdings-acc-body {
    border-top: 2px solid var(--primary);
    background: var(--bg-surface);
    padding: 20px 24px 24px;
    border-radius: 0 0 6px 6px;
}
tr.holdings-data-row.acc-open td {
    background: var(--bg-hover);
}
/* v4.26.3 (P2-2 follow-up) — .holdings-acc-chevron rules removed: the down-arrow
   next to the ticker was redundant (the whole row is already clickable, and
   Watchlist rows never had this arrow) — user request. */
.holdings-acc-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: center;
}
.holdings-acc-ticker-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    flex: 1;
}

/* Delete button (edit mode) */
.holdings-delete-btn {
    padding: 3px 7px;
}

/* Portfolio Totals Strip */
.holdings-totals-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 9px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
}
.totals-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.totals-label {
    color: var(--text-secondary);
    font-size: 12px;
}
.totals-value {
    font-weight: 700;
    color: var(--text-primary);
}
.totals-sep {
    color: var(--text-muted);
    font-size: 14px;
    padding: 0 2px;
}

/* v4.21.5 (P1-3) — one-tap refresh icon next to the "Prices as of" affordance */
.price-age-refresh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.price-age-refresh-btn:hover {
    background: var(--bg-hover, rgba(0,0,0,0.05));
    color: var(--text-primary);
    border-color: var(--border);
}
.price-age-refresh-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

[data-theme="dark"] .holdings-totals-strip {
    background: var(--bg-surface);
    border-color: var(--border);
}

/* v4.9.3 — Portfolio Analytics Card */
.portfolio-analytics-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 3px);
    background: var(--bg-surface);
    margin-bottom: 8px;
    font-size: 13px;
    overflow: hidden;
}
.pa-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.15s;
}
.pa-header:hover { background: var(--bg-hover); }
.portfolio-analytics-card:has(.pa-body:not([style*="none"])) .pa-header {
    border-bottom-color: var(--border);
}
.pa-header-title { font-weight: 600; color: var(--text-primary); }
.pa-header-meta  { font-size: 11px; color: var(--text-muted); }
.pa-toggle-icon  { margin-left: auto; font-size: 10px; color: var(--text-muted); }
.pa-body {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pa-metric { display: flex; flex-direction: column; gap: 3px; }
.pa-metric-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pa-metric-value { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pa-score-num    { font-size: 12px; color: var(--text-secondary); }
/* Sector bar */
.pa-sector-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    margin-top: 2px;
    gap: 1px;
}
.pa-sector-seg {
    height: 100%;
    border-radius: 2px;
    transition: opacity 0.15s;
    cursor: default;
    min-width: 4px;
}
.pa-sector-seg:hover { opacity: 0.75; }
.pa-sector-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 5px;
}
.pa-sector-leg { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.pa-seg-dot {
    width: 8px; height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}
.pa-sector-nudge { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Concentration flags */
.pa-flags { display: flex; flex-direction: column; gap: 3px; }
.pa-flag  { font-size: 12px; color: var(--high); background: color-mix(in srgb, var(--high) 8%, transparent); border: 1px solid color-mix(in srgb, var(--high) 20%, transparent); border-radius: 4px; padding: 3px 8px; }
[data-theme="dark"] .pa-flag { color: var(--high); background: color-mix(in srgb, var(--high) 10%, transparent); border-color: color-mix(in srgb, var(--high) 25%, transparent); }
/* Sector segment colour classes */
.sector-seg-technology    { background: var(--chart-sector-technology); }
.sector-seg-healthcare    { background: var(--chart-sector-healthcare); }
.sector-seg-financials    { background: var(--chart-sector-financials); }
.sector-seg-energy        { background: var(--chart-sector-energy); }
.sector-seg-consumer-disc { background: var(--chart-sector-consumer-disc); }
.sector-seg-consumer-stpl { background: var(--chart-sector-consumer-stpl); }
.sector-seg-industrials   { background: var(--chart-sector-industrials); }
.sector-seg-utilities     { background: var(--chart-sector-utilities); }
.sector-seg-real-estate   { background: var(--chart-sector-real-estate); }
.sector-seg-communication { background: var(--chart-sector-communication); }
.sector-seg-materials     { background: var(--chart-sector-materials); }
.sector-seg-broad-market  { background: var(--chart-sector-broad-market); }
.sector-seg-cash          { background: var(--chart-sector-cash); }
.sector-seg-other         { background: var(--text-muted); opacity: 0.5; }

/* v4.9.4 — Unrealized P&L colour classes */
.totals-pnl-gain { color: var(--success); font-weight: 700; }
.totals-pnl-loss { color: var(--danger);  font-weight: 700; }

/* v4.9.5 — Upcoming Earnings strip */
.holdings-earnings-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12px;
}
.earnings-strip-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 4px;
    white-space: nowrap;
}
.earnings-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 11px;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.earnings-chip:hover { opacity: 0.75; }
.earnings-urgent { background: rgba(220,38,38,0.12); color: var(--crit); border: 1px solid rgba(220,38,38,0.3); }
.earnings-warn   { background: color-mix(in srgb, var(--high) 12%, transparent); color: var(--high); border: 1px solid color-mix(in srgb, var(--high) 30%, transparent); }
.earnings-normal { background: var(--card-bg); color: var(--text-secondary); border: 1px solid var(--border); }
.earnings-chip-date { opacity: 0.65; font-size: 10px; }
.earnings-more-btn  { cursor: pointer; color: var(--primary); font-size: 11px; padding: 3px 6px; }
.earnings-more-btn:hover { text-decoration: underline; }
.earnings-hidden    { display: none; }

/* v4.9.13 — Portfolio Context Panel (UI-4) */
.portfolio-context-panel {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-surface);
    margin-bottom: 8px;
    font-size: 13px;
    overflow: hidden;
}
.portfolio-context-collapsed {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 7px 14px;
    cursor: default;
    border-bottom: 1px solid transparent;
    transition: background 0.15s;
    min-height: 36px;
}
.portfolio-context-panel:has(#portfolio-context-body:not([style*="none"])) .portfolio-context-collapsed {
    border-bottom-color: var(--border);
}
.portfolio-context-toggle {
    margin-left: auto;
    cursor: pointer;
    font-size: 10px;
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.12s;
    user-select: none;
}
.portfolio-context-toggle:hover { background: var(--bg-hover); }
.pcp-collapse-earn  { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pcp-collapse-conv  { display: inline-flex; align-items: center; gap: 5px; }
.pcp-collapse-score { font-size: 12px; color: var(--text-secondary); }
.pcp-collapse-sector{ font-size: 12px; color: var(--text-secondary); }
.pcp-collapse-sep   { color: var(--text-muted); font-size: 12px; }
.pcp-more-hint      { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.portfolio-context-body {
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pcp-body-row { display: flex; flex-direction: column; gap: 4px; }
.pcp-earnings-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.pcp-analytics-row { display: flex; flex-direction: column; gap: 10px; }

.header-vix-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
    cursor: default;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.mp-refresh-btn {
    padding: 4px 6px;
    font-size: 12px;
    line-height: 1;
    border-radius: 4px;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.mp-refresh-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    transform: none;
    box-shadow: none;
}

/* ── v4.9.12 — Market Pulse Bar ──────────────────────────────────────────── */
.market-pulse-bar-wrap {
    background: transparent;
    padding: 4px 0;
    font-size: 12px;
}
.mp-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-height: 26px;
}
.mp-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin-right: 4px;
    flex-shrink: 0;
}
.mp-segment {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    background: var(--bg-body);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.mp-sep { color: var(--text-muted); font-size: 11px; }
.mp-dim { color: var(--text-muted); }
.mp-regime { font-size: 10px; margin-left: 4px; opacity: 0.8; }
.mp-loading { font-size: 11px; color: var(--text-muted); }

/* VIX colour states */
.mp-vix-off  { opacity: 0.6; }
.vix-calm    { border-color: color-mix(in srgb, var(--ok) 40%, transparent);  color: var(--success); }
.vix-caution { border-color: color-mix(in srgb, var(--high) 40%, transparent);  color: var(--warning); }
.vix-fear    { border-color: color-mix(in srgb, var(--crit) 40%, transparent);   color: var(--danger); }
.vix-crisis  { border-color: color-mix(in srgb, var(--crit) 70%, transparent);   color: var(--danger); font-weight: 700; }

/* P/C colour states */
.mp-pc-green  { border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--success); }
.mp-pc-neutral { }
.mp-pc-yellow { border-color: color-mix(in srgb, var(--high) 40%, transparent); color: var(--warning); }
.mp-pc-red    { border-color: color-mix(in srgb, var(--crit) 40%, transparent);  color: var(--danger); }

/* Earnings urgency */
.mp-earn-info   { border-color: color-mix(in srgb, var(--info) 40%, transparent);  color: var(--primary); }
.mp-earn-warn   { border-color: color-mix(in srgb, var(--high) 40%, transparent);  color: var(--warning); background: color-mix(in srgb, var(--high) 7.0%, transparent); }
.mp-earn-danger { border-color: color-mix(in srgb, var(--crit) 50%, transparent);   color: var(--danger);  background: color-mix(in srgb, var(--crit) 8%, transparent); font-weight: 700; }

/* Indices */
.mp-indices { background: none; border: none; padding: 2px 4px; }
.mp-idx-up   { color: var(--success); font-weight: 600; }
.mp-idx-down { color: var(--danger);  font-weight: 600; }
.mp-idx-sep  { color: var(--text-muted); }

/* Macro row */
.mp-macro-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 3px 0 1px;
    border-top: 1px solid var(--border);
    margin-top: 3px;
}
.mp-macro-warn { color: var(--warning); font-weight: 600; }
.mp-macro-dim  { color: var(--text-muted); }
.mp-macro-empty { color: var(--text-muted); font-style: italic; }
/* ── v4.2.0 — Collapsible Holdings Summary ──────────────────────────────── */
.holdings-summary-box {
    border-left: 4px solid var(--primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 6px;
    margin-bottom: 16px;
    overflow: hidden;
}

.holdings-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

.holdings-summary-header:hover {
    background: var(--bg-hover);
}

.holdings-summary-meta {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.holdings-summary-chevron {
    font-size: 18px !important;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.holdings-summary-chevron.collapsed {
    transform: rotate(-90deg);
}

.holdings-summary-body {
    padding: 0 14px 12px;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
    border-top: 1px solid var(--border);
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
}

.holdings-summary-body.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
}

/* ── v4.2.0 Discovery Tab ─────────────────────────────────────────────── */

/* Unified PoliTicker pane — Discovery section separator */
.poli-unified-disc-section {
    border-top: 2px solid var(--border);
    padding-top: 20px;
}
.poli-unified-disc-header {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 4px;
    border-radius: 6px;
    user-select: none;
    transition: background 0.12s;
}
.poli-unified-disc-header:hover {
    background: var(--bg-hover);
}
.poli-unified-disc-chevron {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 20px !important;
    transition: transform 0.2s;
}
.poli-unified-disc-body {
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.poli-unified-disc-body.collapsed {
    display: none;
}

/* 46-Day Activity — collapsible panel title */
.act46-collapsible {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s;
    border-radius: 4px;
    padding: 4px 6px;
    margin: -4px -6px;
}
.act46-collapsible:hover {
    background: var(--bg-hover);
}
.act46-chev {
    font-size: 18px !important;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.2s;
}

/* ── v4.3.0 — Collapsible report sections (PoliTicker / Insider) ── */
.inv-section-title-collapsible {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.inv-section-title-collapsible:hover { color: var(--primary); }
.inv-section-collapse-icon {
    font-size: 10px;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.15s;
}

/* ── v4.3.0 — Account Tags (Holdings shares cell) ── */
.holdings-shares-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}
.holdings-acct-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}
.holdings-acct-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--primary-faint, rgba(201,106,58,0.1));
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid var(--primary-faint, rgba(201,106,58,0.2));
    transition: background 0.12s;
}
.holdings-acct-pill:hover { background: var(--primary); color: var(--on-accent); }
[data-theme="dark"] .holdings-acct-pill {
    background: var(--primary-faint);
    border-color: rgba(232,145,106,0.25);
    color: var(--primary);
}
[data-theme="dark"] .holdings-acct-pill:hover { background: var(--primary); color: var(--on-accent); }
.holdings-acct-add {
    font-size: 12px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 1px 3px;
}
.holdings-acct-add:hover { color: var(--primary); }
.holdings-acct-tag-btn {
    font-size: 11px;
    cursor: pointer;
    color: var(--text-secondary);
    margin-left: 2px;
    opacity: 0.5;
    transition: opacity 0.12s;
}
.holdings-acct-tag-btn:hover { opacity: 1; color: var(--primary); }

/* market-pulse-risk-indicator-backlog.md §12 — Credit & Rate Stress exposure
   flag (Holdings + Watchlist rows). Unlike .ticker-notes-icon below, this is
   never rendered dimmed — it's absent entirely (no span at all) unless the
   flag condition is true, so when present it's always at full visibility.
   Color comes from the Dashboard Credit & Rate Stress card's own
   macro-warn/macro-danger classes, applied directly. */
.exposure-flag-icon {
    font-size: 16px !important;
    cursor: help;
    flex-shrink: 0;
}

/* ── 2026-08-17 — Per-ticker Notes (Holdings + ETF Holdings + Watchlist rows) ── */
.ticker-notes-icon {
    font-size: 16px !important;
    cursor: pointer;
    color: var(--text-secondary);
    opacity: 0.55;
    transition: opacity 0.12s, color 0.12s;
    flex-shrink: 0;
}
.ticker-notes-icon:hover { opacity: 1; color: var(--primary); }
.ticker-notes-icon.has-note { opacity: 0.9; color: var(--warning); }
.ticker-notes-panel-cell { padding: 12px 16px; background: var(--bg-body); }
.ticker-notes-panel {
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ticker-notes-textarea {
    font-size: 13px;
    min-height: 64px;
}
.ticker-notes-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ticker-notes-updated {
    font-size: 11px;
    color: var(--text-muted);
}

/* ── v4.3.0 — Account Tags Modal ── */
.acct-tag-col-headers {
    display: grid;
    grid-template-columns: 1fr 100px 36px;
    gap: 8px;
    margin-bottom: 4px;
}
.acct-tag-col-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.acct-tag-row {
    display: grid;
    grid-template-columns: 1fr 100px 36px;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.acct-tag-name-input {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--card-bg);
    color: var(--text-primary);
    box-sizing: border-box;
}
.acct-tag-shares-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--card-bg);
    color: var(--text-primary);
    box-sizing: border-box;
}
.acct-tag-name-input:focus,
.acct-tag-shares-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(201,106,58,0.12);
}

/* ── v4.16.0 — Manual cost-basis editor rows ── */
.cb-edit-col-headers,
.cb-edit-row {
    display: grid;
    grid-template-columns: 1fr 90px 110px 72px 36px;
    gap: 8px;
    align-items: center;
}
.cb-edit-col-headers { margin-bottom: 4px; }
.cb-edit-row { margin-bottom: 8px; }
.cb-edit-col-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cb-edit-name-input,
.cb-edit-shares-input,
.cb-edit-cost-input {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--card-bg);
    color: var(--text-primary);
    box-sizing: border-box;
}
.cb-edit-name-input:focus,
.cb-edit-shares-input:focus,
.cb-edit-cost-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(201,106,58,0.12);
}
.cb-edit-avg {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: right;
}

/* ── v4.3.0 — Section title signal chips (PoliTicker / Insider / Institutional) ── */
.sec-title-signal {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    flex-shrink: 0;
}
.sec-signal-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    letter-spacing: 0.2px;
    cursor: default;
}
.sec-signal-chip.chip-bull {
    background: var(--ok-soft);
    color: var(--ok);
}
.sec-signal-chip.chip-bear {
    background: #fde0df;
    color: #7a1a1a;
}
.sec-signal-chip.chip-mixed {
    background: #fff3cd;
    color: #6b4c00;
}
.sec-signal-chip.chip-mild {
    background: var(--tag-sky-bg);
    color: var(--tag-sky-text);
}
.sec-signal-chip.chip-neutral {
    background: var(--background-alt, #f5f5f5);
    color: var(--text-secondary);
    font-weight: 600;
}
.sec-signal-chip.chip-inst {
    background: var(--tag-purple-deep-bg);
    color: var(--tag-purple-deep-text);
}
[data-theme="dark"] .sec-signal-chip.chip-bull   { background: #1a3a22; color: var(--ok); }
[data-theme="dark"] .sec-signal-chip.chip-bear   { background: #3a1a1a; color: #f08080; }
[data-theme="dark"] .sec-signal-chip.chip-mixed  { background: #3a3010; color: #e0c060; }
[data-theme="dark"] .sec-signal-chip.chip-mild   { background: var(--tag-sky-bg); color: var(--tag-sky-text); }
[data-theme="dark"] .sec-signal-chip.chip-neutral{ background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--text-secondary); }
[data-theme="dark"] .sec-signal-chip.chip-inst   { background: var(--tag-purple-deep-bg); color: var(--tag-purple-deep-text); }
/* ── Wall Street Consensus section (v4.0.0) ────────────────────────────── */
.ws-section { }
.ws-no-key {
    font-size: 13px;
    color: var(--text-muted);
    padding: 10px 0;
}
.ws-section-body {
    padding: 4px 0 0;
}
/* Consensus block */
.ws-consensus-block {
    margin-bottom: 12px;
}
.ws-consensus-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.ws-consensus-badge {
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
}
.ws-con-bull { background: color-mix(in srgb, var(--ok) 12%, transparent);  color: var(--success); }
.ws-con-bear { background: color-mix(in srgb, var(--crit) 10%, transparent);  color: var(--danger);  }
.ws-con-hold { background: color-mix(in srgb, var(--high) 12%, transparent);  color: var(--high);        }
.ws-consensus-meta {
    font-size: 11px;
    color: var(--text-muted);
}
/* Rating bar */
.ws-rating-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ws-rating-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--border);
}
.ws-rb-seg { height: 100%; min-width: 2px; }
.ws-sb  { background: #1a7a32; }
.ws-b   { background: #4caf50; }
.ws-h   { background: var(--high); }
.ws-s   { background: #ff7043; }
.ws-ss  { background: #c62828; }
.ws-rating-legend {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ws-leg-item {
    font-size: 11px;
    font-weight: 600;
}
.ws-sb-text { color: #1a7a32; }
.ws-b-text  { color: #4caf50; }
.ws-h-text  { color: var(--high); }
.ws-s-text  { color: #ff7043; }
.ws-ss-text { color: #c62828; }
/* Price targets */
.ws-pt-block {
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.ws-pt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
}
.ws-pt-label { font-weight: 600; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.ws-pt-low   { color: var(--text-secondary); }
.ws-pt-med   { color: var(--text-primary); font-size: 13px; }
.ws-pt-high  { color: var(--text-secondary); }
.ws-pt-sep   { color: var(--text-muted); }
.ws-upside-pos { color: var(--success); font-weight: 700; font-size: 12px; }
.ws-upside-neg { color: var(--danger);  font-weight: 700; font-size: 12px; }
/* Short interest row */
.ws-si-block {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    padding: 6px 0 2px;
}
.ws-si-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ws-si-pct {
    font-weight: 700;
    font-size: 13px;
}
.ws-si-interp {
    color: var(--text-secondary);
    font-size: 12px;
}
.ws-si-mom {
    font-size: 11px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-body);
    border: 1px solid var(--border);
}
.ws-si-mom.si-mom-down { color: var(--success); border-color: color-mix(in srgb, var(--ok) 30%, transparent); background: color-mix(in srgb, var(--ok) 7.0%, transparent); }
.ws-si-mom.si-mom-up   { color: var(--danger);  border-color: color-mix(in srgb, var(--crit) 30%, transparent);  background: color-mix(in srgb, var(--crit) 6%, transparent); }
.ws-si-ratio {
    font-size: 11px;
    color: var(--text-muted);
}
/* Short interest level colours */
.si-very-high { color: #c62828; }
.si-high      { color: #ff7043; }
.si-moderate  { color: var(--high); }
.si-low       { color: var(--success); }
/* ── T1-5 Short Interest Signal Banner ──────────────────────────────────── */
.ws-si-signal {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border-radius: 7px;
    border: 1px solid;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.5;
}
.ws-si-signal strong {
    font-size: 13px;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}
.ws-si-signal-detail {
    color: inherit;
    opacity: 0.85;
    font-size: 11px;
}
/* Squeeze setup — amber/gold */
.si-squeeze {
    background: rgba(255,165,0,0.09);
    border-color: rgba(255,165,0,0.35);
    color: #7a4800;
}
/* Short covering — green */
.si-covering {
    background: color-mix(in srgb, var(--ok) 8%, transparent);
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
    color: var(--ok);
}
/* Elevated short interest — red-orange */
.si-elevated {
    background: color-mix(in srgb, var(--crit) 7.0%, transparent);
    border-color: color-mix(in srgb, var(--crit) 25%, transparent);
    color: #7a1c1c;
}
/* Dark mode overrides */
[data-theme="dark"] .si-squeeze  { background: rgba(255,165,0,0.12);  border-color: rgba(255,165,0,0.40);  color: #f5c842; }
[data-theme="dark"] .si-covering { background: color-mix(in srgb, var(--ok) 12%, transparent);  border-color: color-mix(in srgb, var(--ok) 40%, transparent);  color: var(--ok); }
[data-theme="dark"] .si-elevated { background: color-mix(in srgb, var(--crit) 10%, transparent);  border-color: color-mix(in srgb, var(--crit) 35%, transparent);  color: #f08080; }
[data-theme="dark"] .ws-con-bull { background: color-mix(in srgb, var(--ok) 15%, transparent);  color: var(--ok); }
[data-theme="dark"] .ws-con-bear { background: color-mix(in srgb, var(--crit) 15%, transparent);  color: #f08080; }
[data-theme="dark"] .ws-con-hold { background: color-mix(in srgb, var(--high) 15%, transparent);  color: #ffd166; }

/* ── T2-1: Earnings Surprise ────────────────────────────────────────────── */
.ws-earnings-block {
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 6px;
}
.ws-earnings-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.ws-earnings-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ws-earnings-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid transparent;
}
.ws-eb-beat  { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.ws-eb-mixed { background: color-mix(in srgb, var(--high) 10%, transparent);  color: var(--high);        border-color: color-mix(in srgb, var(--high) 25%, transparent); }
.ws-eb-miss  { background: color-mix(in srgb, var(--crit) 8%, transparent);  color: var(--danger);  border-color: color-mix(in srgb, var(--crit) 20%, transparent); }
.ws-earnings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.ws-earnings-table th {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px 4px;
    text-align: right;
    border-bottom: 1px solid var(--border);
}
.ws-earnings-table th:first-child { text-align: left; }
.ws-earnings-table td {
    padding: 3px 6px;
    text-align: right;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
.ws-earnings-table td:first-child { text-align: left; color: var(--text-secondary); font-size: 11px; }
.ws-earnings-table tr:last-child td { border-bottom: none; }
.ws-eq-beat { color: var(--success); font-weight: 600; }
.ws-eq-miss { color: var(--danger);  font-weight: 600; }
.ws-eq-na   { color: var(--text-muted); }

/* ── T2-2: EPS Estimates ────────────────────────────────────────────────── */
.ws-epsest-block {
    padding: 8px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
}
.ws-epsest-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.ws-epsest-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ws-epsest-trend {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid transparent;
}
.ws-trend-rising  { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.ws-trend-falling { background: color-mix(in srgb, var(--crit) 8%, transparent);  color: var(--danger);  border-color: color-mix(in srgb, var(--crit) 20%, transparent); }
.ws-trend-stable  { background: rgba(108,117,125,0.08); color: var(--text-secondary); border-color: rgba(108,117,125,0.2); }
.ws-epsest-rows { display: flex; flex-direction: column; gap: 3px; }
.ws-epsest-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
}
.ws-epsest-period {
    min-width: 76px;
    font-size: 11px;
    color: var(--text-secondary);
}
.ws-epsest-avg { font-weight: 700; color: var(--text-primary); }
.ws-epsest-range { color: var(--text-muted); font-size: 11px; }
.ws-epsest-analysts { color: var(--text-muted); font-size: 11px; margin-left: auto; }

/* Dark mode */
[data-theme="dark"] .ws-eb-beat  { background: color-mix(in srgb, var(--ok) 12%, transparent);  border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
[data-theme="dark"] .ws-eb-mixed { background: color-mix(in srgb, var(--high) 10%, transparent);  border-color: color-mix(in srgb, var(--high) 30%, transparent);  color: #ffd166; }
[data-theme="dark"] .ws-eb-miss  { background: color-mix(in srgb, var(--crit) 12%, transparent);  border-color: color-mix(in srgb, var(--crit) 25%, transparent);  color: #f08080; }
[data-theme="dark"] .ws-trend-rising  { background: color-mix(in srgb, var(--ok) 12%, transparent);  border-color: color-mix(in srgb, var(--ok) 30%, transparent);  color: var(--ok); }
[data-theme="dark"] .ws-trend-falling { background: color-mix(in srgb, var(--crit) 12%, transparent);  border-color: color-mix(in srgb, var(--crit) 25%, transparent);  color: #f08080; }
[data-theme="dark"] .ws-trend-stable  { background: rgba(108,117,125,0.10); border-color: rgba(108,117,125,0.25); color: #adb5bd; }

/* ── v4.9.6: News Headlines Card ────────────────────────────────────────── */
.news-headlines-card {
    margin-top: 0;
    padding: 12px 16px;
}
.news-headlines-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 10px;
    color: var(--text-primary);
}
.news-headlines-count {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: auto;
}
.news-headline-row {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: baseline;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.news-headline-row:last-child { border-bottom: none; }
.news-arrow {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}
.news-arrow-bull { color: var(--success); }
.news-arrow-bear { color: var(--danger); }
.news-arrow-neut { color: var(--text-muted); }
.news-headline-title {
    color: var(--text-primary);
    text-decoration: none;
    line-height: 1.4;
    font-size: 12px;
}
.news-headline-title:hover { text-decoration: underline; color: var(--primary); }
.news-headline-meta {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.news-headlines-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0;
}
/* Sentiment badge — shared between header badge and headlines card */
.news-sent-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: default;
}
.news-sent-badge.loading { color: var(--text-muted); border-color: var(--border); }
.sent-strong-pos { background: color-mix(in srgb, var(--ok) 10%, transparent);  color: var(--success); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.sent-slight-pos { background: color-mix(in srgb, var(--ok) 6%, transparent);  color: var(--success); border-color: color-mix(in srgb, var(--ok) 15%, transparent); }
.sent-neutral    { background: rgba(108,117,125,0.08); color: var(--text-secondary); border-color: rgba(108,117,125,0.2); }
.sent-slight-neg { background: color-mix(in srgb, var(--crit) 8%, transparent);  color: var(--danger);  border-color: color-mix(in srgb, var(--crit) 20%, transparent); }
.sent-strong-neg { background: color-mix(in srgb, var(--crit) 12%, transparent);  color: var(--danger);  border-color: color-mix(in srgb, var(--crit) 30%, transparent); }
[data-theme="dark"] .sent-strong-pos { background: color-mix(in srgb, var(--ok) 12%, transparent);  border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
[data-theme="dark"] .sent-slight-pos { background: color-mix(in srgb, var(--ok) 8%, transparent);  border-color: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
[data-theme="dark"] .sent-slight-neg { background: color-mix(in srgb, var(--crit) 12%, transparent);  border-color: color-mix(in srgb, var(--crit) 25%, transparent); color: #f08080; }
[data-theme="dark"] .sent-strong-neg { background: color-mix(in srgb, var(--crit) 16%, transparent);  border-color: color-mix(in srgb, var(--crit) 35%, transparent); color: #f08080; }

/* ── v4.9.9: Forward EPS Estimates card ─────────────────────────────────── */
.fwd-estimates-card { padding: 12px 16px; }
.fwd-estimates-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 10px;
    color: var(--text-primary);
    flex-wrap: wrap;
}
.fwd-source-badge {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1px 7px;
}
.fwd-est-table { display: flex; flex-direction: column; gap: 0; }
.fwd-est-row {
    display: grid;
    /* 2026-08-17 — last column was `auto`, which is sized per-row by that row's own
       content. Every row is an independent grid instance, so the one row carrying
       the accel badge (~95px) squeezed column 1 (1fr) narrower than every badge-less
       row, shifting EST. EPS / YoY Growth left only on that row. Fixed width makes
       every row (header included) resolve identical column boundaries regardless
       of whether the badge is present. */
    grid-template-columns: 1fr 80px 90px 110px;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.fwd-est-row:last-child { border-bottom: none; }
.fwd-est-head { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 6px; }
.fwd-period   { font-weight: 600; color: var(--text-primary); }
.fwd-date     { font-size: 10px; font-weight: 400; color: var(--text-muted); margin-left: 4px; }
.fwd-eps      { font-weight: 700; color: var(--text-primary); text-align: right; }
.fwd-growth   { font-weight: 600; text-align: right; }
.fwd-growth-strong { color: var(--success); }
.fwd-growth-pos    { color: var(--success); opacity: 0.75; }
.fwd-growth-neg    { color: var(--danger); }
.fwd-accel-badge {
    font-size: 10px; font-weight: 700;
    color: var(--success);
    background: color-mix(in srgb, var(--ok) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
    border-radius: 8px;
    padding: 1px 7px;
    white-space: nowrap;
}
[data-theme="dark"] .fwd-accel-badge { background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.fwd-canslim-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    padding: 5px 8px;
    background: color-mix(in srgb, var(--ok) 5%, transparent);
    border-radius: 4px;
    border-left: 3px solid color-mix(in srgb, var(--ok) 30%, transparent);
}

/* ── Optional badge (Settings fields that are not required) ─────────────── */
.optional-badge {
    background: var(--text-muted);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    white-space: nowrap;
    opacity: 0.75;
}
[data-theme="dark"] .optional-badge {
    background: rgba(108,117,125,0.5);
    color: #dee2e6;
}

/* ── v4.4-1 Volume Surge Banner (AlphaRadar) ───────────────────────────── */
.vol-surge-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    margin: 0 0 10px 0;
    font-size: 12px;
    border: 1px solid transparent;
    flex-wrap: wrap;
}
.vol-surge-banner.vol-surge-active {
    background: rgba(255, 152, 0, 0.12);
    border-color: rgba(255, 152, 0, 0.40);
    color: #c97000;
}
.vol-surge-banner.vol-surge-quiet {
    background: var(--background-alt, rgba(0,0,0,0.03));
    border-color: var(--border);
    color: var(--text-secondary);
}
.vol-surge-icon   { font-size: 15px; line-height: 1; }
.vol-surge-label  { font-weight: 700; white-space: nowrap; }
.vol-surge-sep    { opacity: 0.5; }
.vol-surge-detail { font-weight: 400; }
[data-theme="dark"] .vol-surge-banner.vol-surge-active {
    background: rgba(255, 152, 0, 0.15);
    border-color: rgba(255, 152, 0, 0.30);
    color: #ffb74d;
}
[data-theme="dark"] .vol-surge-banner.vol-surge-quiet {
    background: color-mix(in srgb, var(--ink) 4%, transparent);
    border-color: var(--border);
}

/* ── v4.4-1 Inst Discovery — Volume Surge chip ─────────────────────────── */
.inst-disc-vol-surge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: default;
}
.inst-disc-vol-surge.surge-on {
    background: rgba(255, 152, 0, 0.15);
    color: #c97000;
    border: 1px solid rgba(255, 152, 0, 0.35);
}
.inst-disc-vol-surge.surge-off {
    color: var(--text-muted);
}
[data-theme="dark"] .inst-disc-vol-surge.surge-on {
    background: rgba(255, 152, 0, 0.20);
    color: #ffb74d;
    border-color: rgba(255, 152, 0, 0.30);
}

/* ── v4.7.2 Institutional Discovery — Δ% share change chip ─────────────── */
.inst-disc-delta-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
    cursor: default;
    flex-shrink: 0;
}
.inst-disc-delta-add  { background: color-mix(in srgb, var(--ok) 12%, transparent);  color: var(--ok); }
.inst-disc-delta-red  { background: rgba(220,38,38,0.10);  color: var(--crit); }
.inst-disc-delta-new  { background: var(--primary-faint); color: var(--primary); }
.inst-disc-delta-exit { background: rgba(107,114,128,0.12);color: var(--text-muted); }
[data-theme="dark"] .inst-disc-delta-add  { background: color-mix(in srgb, var(--ok) 15%, transparent);  color: var(--ok); }
[data-theme="dark"] .inst-disc-delta-red  { background: rgba(248,113,113,0.15); color: var(--crit); }
[data-theme="dark"] .inst-disc-delta-new  { background: var(--primary-faint); color: var(--primary); }
[data-theme="dark"] .inst-disc-delta-exit { background: rgba(107,114,128,0.18); color: var(--text-muted); }

/* ── v4.4-2 Magic Formula — Watchlist column + Batch Screener ──────────── */
.inv-wl-mf-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    cursor: default;
}
.inv-wl-mf-badge.mf-rank-best {
    color: var(--ok);
}
.inv-wl-mf-badge.mf-rank-top {
    color: var(--primary);
}
[data-theme="dark"] .inv-wl-mf-badge.mf-rank-best { color: var(--ok); }
[data-theme="dark"] .inv-wl-mf-badge.mf-rank-top  { color: var(--primary); }
.inv-wl-mf-of {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-secondary);
}
/* Magic Formula disclaimer (Batch Screener + Watchlist) */
.mf-disclaimer {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
}
[data-theme="dark"] .mf-disclaimer {
    background: rgba(234, 179, 8, 0.10);
    border-color: rgba(234, 179, 8, 0.20);
}

/* ── v4.4-3 Conviction Score — Pair Bar ────────────────────────────────── */
.conv-pair-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 10px 0 0 0;
    padding: 14px 18px;
    overflow: hidden;
}
.cpb-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cpb-no-data {
    opacity: 0.55;
}
.cpb-divider {
    width: 1px;
    background: var(--border);
    margin: 0 20px;
    align-self: stretch;
}
.cpb-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.cpb-score-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.cpb-score-val {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-primary);
}
.cpb-score-denom {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
}
/* v4.9.2-1 — Conviction % display. UI Phase D retired this in favor of
   .coverage-meter (a real split bar, not text) — see renderCoverageMeter. */
.cpb-note {
    font-size: 11px;
    color: var(--text-muted);
}
.cpb-bar-track {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}
.cpb-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}
.cpb-bar-high  { background: var(--ok); }
.cpb-bar-mod   { background: var(--high); }
.cpb-bar-watch { background: var(--gap); }
.cpb-bar-low   { background: var(--crit); }
/* Remediation Phase 3c — a striped, deliberately uncommitted fill for a
   renormalized score whose coverage fell below the confidence floor; must
   never resolve to one of the four real colors above, which would visually
   contradict the "Insufficient Data" badge sitting right next to it. */
.cpb-bar-nodata { background: repeating-linear-gradient(45deg, var(--text-muted), var(--text-muted) 4px, transparent 4px, transparent 8px); opacity: 0.5; }
.cpb-breakdown-link {
    font-size: 11px;
    color: var(--primary);
    cursor: pointer;
    user-select: none;
    margin-top: 2px;
    width: fit-content;
}
.cpb-breakdown-link:hover { text-decoration: underline; }
.cpb-breakdown {
    display: none;
    margin-top: 6px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}
.cpb-breakdown.open { display: block; }
.cpb-brow {
    display: flex;
    gap: 8px;
    font-size: 11px;
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.cpb-brow:last-child { border-bottom: none; }
.cpb-brow-label  { font-weight: 600; min-width: 160px; color: var(--text-primary); }
.cpb-brow-pts    { font-weight: 700; white-space: nowrap; min-width: 36px; color: var(--primary); }
.cpb-brow-detail { color: var(--text-secondary); flex: 1; }

/* Conviction Score band badges — UI Phase D: same squared-chip, left-rule,
   tinted-ground language as .signal-badge (both are verdict/label chips,
   not numeral plates). Per-theme background alpha is intentionally NOT
   collapsed to one value — dark surfaces read the same tint as needing
   more opacity to hold its weight, a real, consistent choice already made
   throughout this file, not incidental drift; only the (now-redundant)
   per-variant color/border-color dark overrides are dropped, since color:
   var(--X) and border-left: currentColor already auto-flip. Also fixes 2
   variants (cs-moderate, cs-low) that were still raw rgba(217,119,6,*) /
   rgba(220,38,38,*) instead of color-mix(var(--high)/var(--crit)) like
   their cs-high/cs-watch siblings already correctly used — both Phase C
   passes missed these. */
.cs-band-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px 2px 6px;
    border-radius: var(--radius-badge, 2px);
    border-left: 3px solid currentColor;
    white-space: nowrap;
}
.cs-band-badge.cs-high     { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.cs-band-badge.cs-moderate { background: color-mix(in srgb, var(--high) 12%, transparent); color: var(--high); }
.cs-band-badge.cs-watch    { background: color-mix(in srgb, var(--text-secondary) 10%, transparent); color: var(--text-secondary); }
.cs-band-badge.cs-low      { background: color-mix(in srgb, var(--crit) 10%, transparent); color: var(--crit); }
.cs-band-badge.cs-low-coverage { background: color-mix(in srgb, var(--text-secondary) 8%, transparent); color: var(--text-secondary); font-style: italic; }
[data-theme="dark"] .cs-band-badge.cs-high     { background: color-mix(in srgb, var(--ok) 20%, transparent); }
[data-theme="dark"] .cs-band-badge.cs-moderate { background: color-mix(in srgb, var(--high) 20%, transparent); }
[data-theme="dark"] .cs-band-badge.cs-watch    { background: color-mix(in srgb, var(--text-secondary) 20%, transparent); }
[data-theme="dark"] .cs-band-badge.cs-low      { background: color-mix(in srgb, var(--crit) 20%, transparent); }
[data-theme="dark"] .cs-band-badge.cs-low-coverage { background: color-mix(in srgb, var(--text-secondary) 18%, transparent); }

/* Watchlist CS column + Scanner-family score numerals — UI Phase D: "ruled
   numeral plate, right border in semantic color" (distinct from the band
   badges above: a neutral plate ground rather than a tinted one, since
   these appear densely down a table column and a loud tint per row adds
   noise a subtle border accent doesn't). .inv-wl-cs-badge previously had no
   plate at all (bare colored text) — brought in line with the same
   treatment scanner-score-badge already needed restyled. */
.inv-wl-cs-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 9px 2px 7px;
    border-radius: var(--radius-badge, 2px);
    border-right: 3px solid currentColor;
    background: var(--background-alt);
    white-space: nowrap;
    cursor: default;
}
.inv-wl-cs-badge.cs-high     { color: var(--ok); }
.inv-wl-cs-badge.cs-moderate { color: var(--high); }
.inv-wl-cs-badge.cs-watch    { color: var(--text-secondary); }
.inv-wl-cs-badge.cs-low      { color: var(--crit); }
/* 2026-08-31 — Phase 5 follow-up: computeConvictionScore's cs-low-coverage
   bandClass (Remediation 3c — a renormalized score built on <50% real data)
   had a rule here for .cs-band-badge and .dc-band-badge but not this, the
   THIRD render site that applies bandClass as a CSS class — so a low-
   confidence Watchlist score fell through to the plain default plate,
   indistinguishable from a fully-measured one. Italic (mirroring the other
   two sites) is enough to read as "uncertain" against this component's
   already-neutral cs-watch color, without a 5th color needing invention. */
.inv-wl-cs-badge.cs-low-coverage { color: var(--text-secondary); font-style: italic; }

/* v4.10 (Session A.5) — Peer comparison conviction sparkline.
 * Empty cells are the same filled square character at low opacity, replacing
 * the previous `\u2591` LIGHT SHADE character that rendered as a hatched/dotted
 * pattern that looked like a visual artifact. */
.cs-bar-filled { opacity: 1; }
.cs-bar-empty  { opacity: 0.18; }

/* ── Buffett Score breakdown pts colour variants in pair bar ─────────── */
.cpb-brow-pts-high { color: var(--ok); }
.cpb-brow-pts-mid  { color: var(--high); }
.cpb-brow-pts-low  { color: var(--crit); }
[data-theme="dark"] .cpb-brow-pts-high { color: var(--ok); }
[data-theme="dark"] .cpb-brow-pts-mid  { color: var(--high); }
[data-theme="dark"] .cpb-brow-pts-low  { color: var(--crit); }

/* ═══════════════════════════════════════════════════════════════════════════
   v4.5.0 — SMART STOCK SCANNER
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scanner gate panels ─────────────────────────────────────────────────── */
.scanner-gate-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    background: var(--card-bg);
}
.scanner-gate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.scanner-gate-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.scanner-gate-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.scanner-gate-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.scanner-gate-badge.g1 { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
.scanner-gate-badge.g2 { background: var(--ok-soft); color: var(--ok); }
[data-theme="dark"] .scanner-gate-badge.g1 { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
[data-theme="dark"] .scanner-gate-badge.g2 { background: var(--ok-soft); color: var(--ok); }

.scanner-cache-age {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── Progress + error states ─────────────────────────────────────────────── */
.scanner-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 20px 0;
}
.scanner-spin {
    animation: spin 1.2s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.scanner-progress-detail { color: var(--text-muted); font-size: 12px; }
.scanner-empty-msg {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 16px 0;
    margin: 0;
}
.scanner-error-msg {
    font-size: 13px;
    color: var(--crit);
    padding: 12px 0;
    margin: 0;
}

/* ── Scanner results tables ──────────────────────────────────────────────── */
.scanner-table-wrap { overflow-x: auto; }
.scanner-table-meta { }
.scanner-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.scanner-th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 6px 10px;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.scanner-th.sortable { cursor: pointer; user-select: none; }
.scanner-th.sortable:hover { color: var(--primary); }
.scanner-th.sort-active { color: var(--primary); }
.scanner-td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.scanner-row { cursor: pointer; transition: background 0.1s; }
.scanner-row:hover { background: var(--background-alt, rgba(0,0,0,0.02)); }
[data-theme="dark"] .scanner-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }

.scanner-ticker { font-weight: 700; color: var(--primary); min-width: 60px; }
.scanner-name   { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scanner-price  { white-space: nowrap; font-weight: 600; }
.scanner-cap    { white-space: nowrap; }
.scanner-na     { color: var(--text-muted); }

/* P/E pills */
.scanner-pe { font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 8px; }
.scanner-pe.good { background: var(--ok-soft); color: var(--ok); }
.scanner-pe.fair { background: var(--high-soft); color: #713f12; }
.scanner-pe.high { background: var(--crit-soft); color: var(--crit); }
[data-theme="dark"] .scanner-pe.good { background: var(--ok-soft); color: var(--ok); }
[data-theme="dark"] .scanner-pe.fair { background: #422006; color: var(--high); }
[data-theme="dark"] .scanner-pe.high { background: var(--crit-soft); color: var(--crit); }

/* 52W high % colour coding */
.scanner-high.good { color: var(--ok); font-weight: 600; }
.scanner-high.fair { color: var(--high); }
.scanner-high.warn { color: var(--crit); }

/* Score badges */
/* UI Phase D — "ruled numeral plate, right border in semantic color":
   a neutral plate ground (not a tinted one, unlike the word-label badges
   above) since these appear densely down table columns — the colored
   right border alone carries the signal, tabular-nums keeps digits
   aligned. Also fixes 2 variants (score-mid/fair) that were still raw
   #713f12/#422006 instead of var(--high)/var(--high-soft) — both Phase C
   passes missed these too, same as the cs-band-badge fix just above. */
.scanner-score-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 9px 2px 7px;
    border-radius: var(--radius-badge, 2px);
    border-right: 3px solid currentColor;
    background: var(--background-alt);
    white-space: nowrap;
}
.scanner-score-badge.score-high,
.scanner-score-badge.good      { color: var(--ok); }
.scanner-score-badge.score-mid,
.scanner-score-badge.fair      { color: var(--high); }
.scanner-score-badge.score-low { color: var(--text-secondary); }

/* Signal chips (Gate 2) */
.scanner-signal-chip {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    border-radius: 50%;
    font-weight: 700;
}
.scanner-signal-chip.pass { background: var(--ok-soft); color: var(--ok); }
.scanner-signal-chip.fail { background: var(--background-alt); color: var(--text-muted); }
[data-theme="dark"] .scanner-signal-chip.pass { background: var(--ok-soft); color: var(--ok); }

/* Action buttons in scanner rows */
.scanner-promote-btn,
.scanner-analyze-btn,
.scanner-remove-custom-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    cursor: pointer;
    color: var(--text-primary);
    white-space: nowrap;
    transition: background 0.12s;
}
.scanner-promote-btn:hover  { background: color-mix(in srgb, var(--info) 18%, transparent); border-color: var(--info); color: var(--info); }
.scanner-analyze-btn:hover  { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.scanner-remove-custom-btn:hover { background: var(--crit-soft); border-color: var(--crit); color: #b91c1c; } /* v4.26.0 (P2-2) — destructive action, red hover */
.scanner-promote-btn.in-wl  { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); cursor: default; }
[data-theme="dark"] .scanner-promote-btn:hover  { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
[data-theme="dark"] .scanner-analyze-btn:hover  { background: var(--ok-soft); color: var(--ok); }
[data-theme="dark"] .scanner-remove-custom-btn:hover { background: var(--crit-soft); color: var(--crit); } /* v4.26.0 (P2-2) */
[data-theme="dark"] .scanner-promote-btn.in-wl  { background: var(--ok-soft); color: var(--ok); }

.scanner-actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* RS disclaimer */
.scanner-rs-disclaimer {
    border-top: 1px solid var(--border);
    padding-top: 6px;
}

/* ── Scanner Watchlist (3rd section in Watchlist tab) ────────────────────── */
.inv-wl-section-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ── v4.5.2 Gate 2 diagnostic display ───────────────────────────────────── */

/* Filter bar */
.scanner-filter-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.scanner-filter-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.12s;
}
.scanner-filter-btn:hover { background: var(--background-alt); }
.scanner-filter-btn.active {
    background: var(--primary);
    color: var(--on-accent);
    border-color: var(--primary);
}
.scanner-filter-count {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.8;
    margin-left: 3px;
}
.scanner-filter-showing {
    font-size: 11px;
    margin-left: 6px;
}

/* Status badges */
.scanner-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    display: inline-block;
}
.scanner-status-badge.g2-pass   { background: var(--ok-soft); color: var(--ok); }
.scanner-status-badge.g2-weak   { background: var(--high-soft); color: #713f12; }
.scanner-status-badge.g2-fail   { background: var(--crit-soft); color: var(--crit); }
.scanner-status-badge.g2-nodata { background: var(--background-alt); color: var(--text-secondary); }
[data-theme="dark"] .scanner-status-badge.g2-pass   { background: var(--ok-soft); color: var(--ok); }
[data-theme="dark"] .scanner-status-badge.g2-weak   { background: #422006; color: var(--high); }
[data-theme="dark"] .scanner-status-badge.g2-fail   { background: var(--crit-soft); color: var(--crit); }

/* Signal chip metric value */
.scanner-sig-metric {
    font-size: 9px;
    display: block;
    line-height: 1.1;
    margin-top: 1px;
    font-weight: 600;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scanner-signal-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 28px;
    padding: 2px 4px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: default;
    vertical-align: middle;
}
.scanner-signal-chip.na { background: var(--background-alt); color: var(--text-muted); }

/* Signal cell alignment */
.g2-sig-cell { text-align: center; padding: 5px 4px; }

/* No data rows */
.scanner-row-nodata { opacity: 0.6; }

/* Legend */
.scanner-g2-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    background: var(--background-alt, rgba(0,0,0,0.02));
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 11px;
    color: var(--text-secondary);
}
.g2-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
[data-theme="dark"] .scanner-g2-legend { background: color-mix(in srgb, var(--ink) 3%, transparent); }

/* ============================================================ */
/* v4.9.0 — SMART SCANNER 2.0 UI                               */
/* ============================================================ */

/* ── Mode/pipeline selector panel ─────────────────────────── */
.scanner-control-panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px 12px;
    margin-bottom: 16px;
}
.scanner-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.scanner-control-row:last-child { margin-bottom: 0; }
.scanner-control-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 72px;
}
.scanner-mode-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.12s;
    white-space: nowrap;
}
.scanner-mode-btn:hover { background: var(--background-alt); color: var(--text-primary); }
.scanner-mode-btn.active {
    background: var(--primary);
    color: var(--on-accent);
    border-color: var(--primary);
}
.scanner-mode-btn.disabled-future {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Refresh cache button (Option A — armed state) ────────── */
.scanner-refresh-btn {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 3px 10px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.scanner-refresh-btn:hover {
    color: var(--text-secondary);
    border-color: var(--border);
    background: var(--background-alt);
}
.scanner-refresh-btn.armed {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(201,106,58,0.06);
}
[data-theme="dark"] .scanner-refresh-btn.armed {
    background: rgba(88,166,255,0.10);
}
.scanner-refresh-btn .material-symbols-outlined { font-size: 13px; }

/* ── Run Scan button row ───────────────────────────────────── */
.scanner-run-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.scanner-run-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 22px;
    border-radius: 8px;
    border: none;
    background: var(--primary);
    color: var(--on-accent);
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    letter-spacing: 0.2px;
}
.scanner-run-btn:hover { background: var(--primary-dark); }
.scanner-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.scanner-run-btn .material-symbols-outlined { font-size: 16px; }
.scanner-cache-status {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* ── Combined results panel ────────────────────────────────── */
.scanner-combined-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    overflow: hidden;
}
.scanner-combined-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--border);
}
.scanner-combined-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
}
.scanner-gate-badge.combined {
    background: var(--tag-purple-bg);
    color: var(--tag-purple-text);
}
[data-theme="dark"] .scanner-gate-badge.combined {
    background: var(--tag-purple-bg);
    color: var(--tag-purple-text);
}

/* v4.21.0 (P0-2) — .scanner-univ-badge and .scanner-univ-notice removed:
   per-universe caches make cross-universe mismatch impossible by construction. */
.scanner-topn-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.scanner-topn-btn {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.12s;
}
.scanner-topn-btn.active {
    background: var(--primary);
    color: var(--on-accent);
    border-color: var(--primary);
}

/* ── Universe tag pills ────────────────────────────────────── */
.scanner-tag-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
    letter-spacing: 0.2px;
    margin: 1px;
}
.scanner-tag-pill.growth    { background: var(--tag-blue-bg); color: var(--tag-blue-text); }
.scanner-tag-pill.value     { background: var(--ok-soft); color: var(--ok); }
.scanner-tag-pill.momentum  { background: var(--tag-purple-bg); color: var(--tag-purple-text); }
.scanner-tag-pill.volume    { background: var(--high-soft); color: var(--high); }
.scanner-tag-pill.sp500     { background: var(--background-alt); color: var(--text-secondary); }
[data-theme="dark"] .scanner-tag-pill.growth   { background: var(--tag-blue-bg); color: var(--tag-blue-text); }
[data-theme="dark"] .scanner-tag-pill.value    { background: var(--ok-soft); color: var(--ok); }
[data-theme="dark"] .scanner-tag-pill.momentum { background: var(--tag-purple-bg); color: var(--tag-purple-text); }
[data-theme="dark"] .scanner-tag-pill.volume   { background: var(--high-soft); color: var(--high); }

/* Cross-signal highlight (ticker in both growth + value) */
.scanner-row-xsignal { background: rgba(201,106,58,0.03); }
[data-theme="dark"] .scanner-row-xsignal { background: rgba(88,166,255,0.05); }

/* ── Combined score column (bold emphasis) ─────────────────── */
.scanner-combined-score {
    font-size: 13px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 10px;
    white-space: nowrap;
}
.scanner-combined-score.score-high { background: var(--ok-soft); color: var(--ok); }
.scanner-combined-score.score-mid  { background: var(--high-soft); color: #713f12; }
.scanner-combined-score.score-low  { background: var(--background-alt); color: var(--text-secondary); }
[data-theme="dark"] .scanner-combined-score.score-high { background: var(--ok-soft); color: var(--ok); }
[data-theme="dark"] .scanner-combined-score.score-mid  { background: #422006; color: var(--high); }

/* ── Gate 1 universe disclosure (collapsible) ──────────────── */
.scanner-g1-disclosure {
    border-top: 1px solid var(--border);
    padding: 0;
}
.scanner-g1-disclosure-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 10px 18px;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.1s;
}
.scanner-g1-disclosure-toggle:hover { background: var(--background-alt); }
.scanner-g1-disclosure-toggle .material-symbols-outlined {
    font-size: 14px;
    transition: transform 0.15s;
}
.scanner-g1-disclosure-toggle.open .material-symbols-outlined { transform: rotate(90deg); }
.scanner-g1-disclosure-body {
    display: none;
    padding: 0 18px 16px;
}
.scanner-g1-disclosure-body.open { display: block; }

/* ── Progress stages ───────────────────────────────────────── */
.scanner-stage-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
}
.scanner-stage {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.scanner-stage.active { color: var(--text-primary); font-weight: 600; }
.scanner-stage.done   { color: var(--ok); }
.scanner-stage .material-symbols-outlined { font-size: 15px; }

/* ============================================================ */
/* v4.6.0 — STRIKE AI CHAT PANEL                               */
/* ============================================================ */

/* ── Floating Action Button ── */
#strike-chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(201,106,58,0.40);
    z-index: 900;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
#strike-chat-fab:hover {
    background: var(--primary-dark);
    transform: scale(1.07);
    box-shadow: 0 6px 22px rgba(201,106,58,0.55);
}
#strike-chat-fab .material-symbols-outlined { font-size: 26px; }

.strike-chat-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--crit);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--on-accent);
    line-height: 1;
}
[data-theme="dark"] .strike-chat-fab-badge { border-color: var(--bg-body); }

/* ── Panel base (shared by chat + saved) ── */
.strike-chat-panel,
.strike-saved-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 420px;
    max-width: 95vw;
    background: var(--card-bg);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 32px color-mix(in srgb, black 14%, transparent);
    display: flex;
    flex-direction: column;
    z-index: 950;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    overflow: hidden;
}
.strike-chat-panel.open  { transform: translateX(0); }
.strike-saved-panel.open { transform: translateX(-420px); }
@media (max-width: 860px) {
    .strike-saved-panel.open { transform: translateX(0); }
}

/* ── Panel header ── */
.strike-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--card-bg);
}
.strike-chat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.strike-chat-header-icon {
    font-size: 22px;
    color: var(--primary);
}
.strike-chat-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.strike-chat-subtitle {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 1px;
}
.strike-chat-header-actions {
    display: flex;
    gap: 4px;
}
.strike-chat-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}
.strike-chat-icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.strike-chat-icon-btn .material-symbols-outlined { font-size: 20px; }

/* ── Messages area ── */
.strike-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

/* ── Welcome state ── */
.strike-chat-welcome {
    text-align: center;
    padding: 28px 16px 8px;
    color: var(--text-secondary);
}
.strike-chat-welcome-icon {
    font-size: 38px;
    color: var(--primary);
    display: block;
    margin-bottom: 10px;
}
.strike-chat-welcome p { font-size: 14px; line-height: 1.6; margin: 0; }

/* ── Quick question chips ── */
.strike-chat-quick-qs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.strike-chat-quick-btn {
    text-align: left;
    padding: 9px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: normal;
    line-height: 1.4;
}
.strike-chat-quick-btn:hover {
    border-color: var(--primary);
    background: var(--primary-faint);
}
[data-theme="dark"] .strike-chat-quick-btn {
    background: color-mix(in srgb, var(--ink) 4%, transparent);
}
[data-theme="dark"] .strike-chat-quick-btn:hover {
    background: var(--primary-faint);
    border-color: var(--primary);
}

/* ── Message bubbles ── */
.strike-chat-bubble {
    max-width: 90%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.6;
    word-break: break-word;
}
.strike-chat-bubble-user {
    align-self: flex-end;
    background: var(--primary);
    color: var(--on-accent);
    border-bottom-right-radius: 4px;
}
.strike-chat-bubble-ai {
    align-self: flex-start;
    background: var(--bg-hover);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
    max-width: 96%;
    border: 1px solid var(--border);
}
[data-theme="dark"] .strike-chat-bubble-ai {
    background: var(--bg-surface);
    border-color: var(--border);
}

.strike-chat-ai-content p { margin: 0 0 6px; }
.strike-chat-ai-content p:last-child { margin-bottom: 0; }
.strike-chat-ai-content ul { margin: 4px 0 4px 18px; padding: 0; }
.strike-chat-ai-content li { margin-bottom: 3px; }
.strike-chat-h3 { font-size: 13px; font-weight: 700; margin: 8px 0 4px; }
.strike-chat-h4 { font-size: 12px; font-weight: 700; margin: 6px 0 3px; }

/* ── Typing indicator ── */
.strike-chat-typing {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 14px;
}
.strike-chat-typing span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.5;
    animation: strike-typing-bounce 1.2s infinite ease-in-out;
}
.strike-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.strike-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes strike-typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

/* ── Bubble action buttons ── */
.strike-chat-bubble-actions {
    margin-top: 7px;
    display: flex;
    gap: 6px;
}
.strike-chat-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px 9px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.strike-chat-save-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-faint);
}
.strike-chat-save-btn .material-symbols-outlined { font-size: 14px; }

/* ── Input footer ── */
.strike-chat-footer {
    padding: 10px 14px 14px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--card-bg);
}
.strike-chat-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.strike-chat-textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-family: inherit;
    background: var(--bg-hover);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    line-height: 1.5;
    max-height: 120px;
    overflow-y: auto;
}
.strike-chat-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-faint);
    background: var(--bg-surface);
}
.strike-chat-textarea::placeholder { color: var(--text-muted); }
.strike-chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, transform 0.1s;
}
.strike-chat-send-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.06);
}
.strike-chat-send-btn .material-symbols-outlined { font-size: 18px; }
.strike-chat-footer-hint {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 6px;
    text-align: center;
}

/* ── Saved chats panel ── */
.strike-saved-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.strike-saved-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}
.strike-saved-empty .material-symbols-outlined { font-size: 36px; display: block; margin-bottom: 10px; }
.strike-saved-empty p { font-size: 13px; line-height: 1.6; margin: 0; }
.strike-saved-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--bg-surface);
}
[data-theme="dark"] .strike-saved-item { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.strike-saved-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.strike-saved-type { font-size: 14px; }
.strike-saved-date { font-size: 11px; color: var(--text-secondary); }
.strike-saved-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 8px;
}
.strike-saved-item-actions {
    display: flex;
    gap: 6px;
}
.strike-saved-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 3px 8px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.strike-saved-action-btn:hover { border-color: var(--primary); color: var(--primary); }
.strike-saved-delete-btn:hover { border-color: var(--crit); color: var(--crit); }
.strike-saved-action-btn .material-symbols-outlined { font-size: 13px; }

/* v4.7.2 — Load button highlight */
.strike-saved-load-btn { border-color: var(--primary); color: var(--primary); }
.strike-saved-load-btn:hover { background: var(--primary); color: var(--on-accent); }

/* v4.7.2 — Restored conversation / message banner */
.strike-chat-restored-banner {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 6px 0 10px;
    line-height: 1.5;
}
[data-theme="dark"] .strike-chat-restored-banner {
    background: var(--primary-faint);
    border-color: rgba(232,145,106,0.25);
    border-left-color: var(--primary);
}

/* ── v4.6.0 Pre-flight Data Quality Bubble ── */
.strike-dq-bubble {
    align-self: stretch;
    background: var(--bg-surface, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-left: 3px solid var(--high);
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 12.5px;
    margin: 2px 0;
}
[data-theme="dark"] .strike-dq-bubble {
    background: color-mix(in srgb, var(--high) 6%, transparent);
    border-color: color-mix(in srgb, var(--high) 25%, transparent);
    border-left-color: var(--high);
}
.dq-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--text-primary, #111827);
    margin-bottom: 8px;
}
.dq-heading-icon {
    font-size: 16px;
    color: var(--high);
}
.dq-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}
.dq-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.dq-icon {
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 1px;
}
.dq-row.dq-warn .dq-icon { color: var(--crit); }
.dq-row.dq-info .dq-icon { color: var(--info); }
.dq-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dq-msg {
    color: var(--text-primary, #111827);
    line-height: 1.45;
}
.dq-action {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    font-style: italic;
}
.dq-footer {
    font-size: 11px;
    color: var(--text-secondary, #9ca3af);
    border-top: 1px solid var(--border, #e5e7eb);
    padding-top: 6px;
    margin-top: 2px;
}

/* ============================================================ */
/* v4.6.0 — COST BASIS CSV IMPORT MODAL                        */
/* ============================================================ */

/* Drop zone */
.cb-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px dashed var(--border, #d1d5db);
    border-radius: 12px;
    padding: 28px 20px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
    margin-bottom: 12px;
    background: var(--bg-surface, #f9fafb);
}
.cb-dropzone:hover {
    border-color: var(--primary);
    background: var(--primary-faint);
}
[data-theme="dark"] .cb-dropzone { background: color-mix(in srgb, var(--ink) 3%, transparent); }
[data-theme="dark"] .cb-dropzone:hover { background: var(--primary-faint); }
.cb-dropzone-label { font-size: 14px; font-weight: 500; color: var(--text-primary, #111827); }
.cb-dropzone-hint  { font-size: 12px; color: var(--text-secondary, #6b7280); }

/* File pills */
.cb-file-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cb-file-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface, #f3f4f6);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
}
[data-theme="dark"] .cb-file-pill { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cb-file-name  { flex: 1; font-weight: 500; color: var(--text-primary, #111827); word-break: break-all; }
.cb-file-badge {
    font-size: 11px;
    background: var(--primary-faint);
    color: var(--primary);
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
    font-weight: 600;
}

/* Preview section */
.cb-preview-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.cb-preview-title  { font-size: 13px; font-weight: 700; color: var(--text-primary, #111827); }
.cb-unmatched-note { font-size: 12px; color: var(--high); flex: 1; }

/* Preview table */
.cb-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    max-height: 340px;
    overflow-y: auto;
}
.cb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.cb-table th {
    position: sticky;
    top: 0;
    background: var(--bg-surface, #f3f4f6);
    padding: 8px 10px;
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
    border-bottom: 1px solid var(--border, #e5e7eb);
    white-space: nowrap;
    z-index: 1;
}
[data-theme="dark"] .cb-table th { background: #1e2235; }
.cb-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, #f3f4f6);
    vertical-align: top;
    color: var(--text-primary, #111827);
}
.cb-table tr:last-child td { border-bottom: none; }
.cb-table tr:hover td { background: color-mix(in srgb, var(--ink) 2%, transparent); }
.cb-row-unmatched td { opacity: 0.55; }
.cb-status-match { color: var(--ok); font-weight: 600; font-size: 12px; }
.cb-status-skip  { color: var(--high); font-weight: 600; font-size: 12px; }

/* ── v4.6.0 Cost Basis Upload Area (replaces dropzone) ── */
.cb-upload-area {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-surface, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 14px;
}
[data-theme="dark"] .cb-upload-area { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.cb-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}
.cb-upload-hint {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.4;
}

/* ── v4.6.0 Holdings Basis Cell ── */
.holdings-basis-cell {
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}
/* v4.16.0 — Below-MOS indicator column (narrow, centered) */
.holdings-mos-th, .holdings-mos-cell {
    text-align: center;
    width: 44px;
    white-space: nowrap;
}
.holdings-basis-val { font-weight: 500; }
.holdings-basis-gain { margin-left: 3px; }
/* v4.16.0 — stacked basis cell: dollar value on top, unrealized % beneath */
.holdings-basis-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}
.holdings-basis-stack .holdings-basis-gain {
    margin-left: 0;
    font-size: 10px;
}

/* ── v4.6.0 DQ Bubble Action Buttons ── */
.dq-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.dq-btn-continue {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--primary);
    color: var(--on-accent);
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.dq-btn-continue:hover { background: var(--primary-dark); }
.dq-btn-continue .material-symbols-outlined { font-size: 15px; }
.dq-btn-close {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 12.5px;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.dq-btn-close:hover { border-color: var(--text-secondary); color: var(--text-primary, #111827); }
.dq-btn-close .material-symbols-outlined { font-size: 15px; }

/* ── v4.6.0 Chat Panel — Minimized State ── */
/* Repositions from full right-panel → compact bottom-right chip beside the FAB */
.strike-chat-panel.minimized {
    top: auto !important;
    bottom: 24px !important;
    right: 90px !important;          /* FAB is 56px wide + 10px gap + 24px right = 90px */
    transform: none !important;      /* cancel the translateX(0) from .open */
    width: 220px !important;
    height: 56px !important;
    border-radius: 16px !important;
    border-left: none !important;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(201,106,58,0.30), 0 2px 8px color-mix(in srgb, black 12%, transparent) !important;
    transition: box-shadow 0.2s, transform 0.15s !important;
}
.strike-chat-panel.minimized:hover {
    box-shadow: 0 6px 24px rgba(201,106,58,0.40), 0 2px 12px color-mix(in srgb, black 16%, transparent) !important;
    transform: translateY(-2px) !important;
}
.strike-chat-panel.minimized .strike-chat-messages,
.strike-chat-panel.minimized .strike-chat-footer {
    display: none;
}
.strike-chat-panel.minimized .strike-chat-header {
    cursor: pointer;
    height: 56px;
    padding: 0 14px;
    border-radius: 16px;
    background: var(--primary);
    color: var(--on-accent);
    border-bottom: none;
}
.strike-chat-panel.minimized .strike-chat-title,
.strike-chat-panel.minimized .strike-chat-subtitle,
.strike-chat-panel.minimized .strike-chat-header-icon {
    color: var(--on-accent);
}
/* Hide the action buttons (minimize / bookmark / close) in chip state */
.strike-chat-panel.minimized .strike-chat-header-actions {
    display: none;
}

/* ── v4.6.0 Scanner Watchlist Accordion ── */
.sw-accordion {
    background: var(--bg-surface, #f9fafb);
    border-top: 1px solid var(--border, #e5e7eb);
    padding: 0;
}
[data-theme="dark"] .sw-accordion { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.sw-acc-body { display: flex; flex-direction: column; gap: 12px; }
.sw-acc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.sw-acc-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sw-acc-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #6b7280);
}
.sw-acc-val {
    font-size: 13px;
    color: var(--text-primary, #111827);
    font-weight: 500;
}
.sw-acc-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--border, #e5e7eb);
    padding-top: 10px;
}

/* ── Settings Slide-In Panel (UI-09) ───────────────────────── */
.settings-panel-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, black 40%, transparent);
    z-index: 959;
    transition: opacity 0.28s ease;
}

.settings-panel-backdrop.open {
    display: block;
}

.settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 480px;
    max-width: 96vw;
    background: var(--card-bg);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 40px color-mix(in srgb, black 18%, transparent);
    display: flex;
    flex-direction: column;
    z-index: 960;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.settings-panel.open {
    transform: translateX(0);
}

.settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.settings-panel-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
}

.settings-panel-header-left span:first-child {
    font-size: 20px;
}

.settings-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 24px 32px;
}

.settings-panel-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--card-bg);
}

[data-theme="dark"] .settings-panel {
    background: var(--card-bg);
    border-left-color: var(--border);
    box-shadow: -8px 0 40px color-mix(in srgb, black 50%, transparent);
}

[data-theme="dark"] .settings-panel-footer {
    background: var(--card-bg);
    border-top-color: var(--border);
}

@media (max-width: 520px) {
    .settings-panel { width: 100%; max-width: 100%; }
}

/* ============================================ */
/* v4.9.7 — Peer Comparison */
/* ============================================ */
.peer-comp-shell  { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.peer-comp-trigger { margin-bottom: 8px; }
.peer-comparison-card { font-size: 12px; }
.peer-card-header { font-weight: 600; font-size: 13px; color: var(--text-primary); margin-bottom: 8px; }
.peer-table-wrap  { overflow-x: auto; }
.peer-table       { width: 100%; border-collapse: collapse; font-size: 12px; }
.peer-table th    { text-align: left; padding: 4px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.peer-table td    { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.peer-table tr:last-child td { border-bottom: none; }
.peer-row-primary td { color: var(--text-primary); font-weight: 600; background: color-mix(in srgb, var(--primary) 4%, transparent); }
.peer-star        { color: var(--primary); font-size: 11px; }
.peer-load-note   { font-size: 11px; color: var(--text-muted); margin-top: 6px; padding: 4px 6px; }

/* ============================================ */
/* v4.9.10 — Portfolio Greeks direction badge */
/* ============================================ */
.greeks-direction-bull { color: var(--success); font-weight: 700; }
.greeks-direction-bear { color: var(--danger);  font-weight: 700; }
.greeks-direction-neut { color: var(--text-secondary); font-weight: 600; }
.sd-greeks-row { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 4px; font-size: 12px; }
.sd-greeks-item { display: flex; flex-direction: column; gap: 1px; }
.sd-greeks-label { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.sd-greeks-val   { font-weight: 700; color: var(--text-primary); }

/* ============================================ */
/* v4.9.12 UI-5 — Attention Priority badge */
/* ============================================ */
.holdings-priority-cell { text-align: center; width: 32px; }
.holdings-priority-badge { font-size: 14px; cursor: default; }
.holdings-row-priority-high { border-left: 3px solid var(--danger);  }
.holdings-row-priority-med  { border-left: 3px solid var(--warning); }

/* ============================================ */
/* v4.10 (Session A) — Evaluation Groups + AI Insight Cards */
/* ============================================ */

/* Outer group container — banded header + AI insight card + body */
.eval-group {
    margin: 0 0 32px 0;
    padding: 0;
    scroll-margin-top: 60px; /* offset for sticky bar when jump-nav scroll lands here */
}

/* Banded header bar */
.eval-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: linear-gradient(90deg, var(--bg-surface), var(--bg-body));
    border-left: 3px solid var(--primary);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.eval-group-header:hover {
    background: linear-gradient(90deg, var(--card-bg), var(--bg-surface));
}
[data-theme="dark"] .eval-group-header {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent), transparent);
}
[data-theme="dark"] .eval-group-header:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent), color-mix(in srgb, var(--ink) 2%, transparent));
}
/* Collapsed state — muted border */
.eval-group.eval-group-collapsed .eval-group-header {
    border-left-color: var(--border);
    margin-bottom: 0;
}
/* Chevron */
.eval-group-chevron {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: color 0.15s;
}
.eval-group-header:hover .eval-group-chevron {
    color: var(--text-primary);
}

.eval-group-icon {
    font-size: 24px !important;
    color: var(--primary);
    flex-shrink: 0;
}

.eval-group-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.eval-group-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.eval-group-tagline {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.3;
}

/* AI Insight card — sits between header and body */
.eval-ai-insight {
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
[data-theme="dark"] .eval-ai-insight {
    background: var(--bg-surface);
}

/* Bull Case / Bear Case — two .eval-ai-insight cards side by side on the
   Overview tab (bull-bear-case-narrative-spec.md). Each card keeps its own
   margin-bottom from .eval-ai-insight above; the row itself just lays them
   out and removes the double-gap that would otherwise stack under it. */
.bull-bear-row {
    display: flex;
    gap: 16px;
    margin-bottom: 4px;
}
.bull-bear-row > .eval-ai-insight {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
@media (max-width: 640px) {
    .bull-bear-row { flex-direction: column; }
}

.eval-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.eval-ai-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

/* Verdict chip — color variants driven by EVAL_VERDICT_COLORS map (Session B) */
.eval-ai-verdict {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

.eval-ai-verdict.verdict-bull {
    background: var(--ok-soft); color: var(--ok); border-color: #b6dec0;
}
.eval-ai-verdict.verdict-bear {
    background: #fde0df; color: #7a1a1a; border-color: #f3c5c4;
}
.eval-ai-verdict.verdict-warn {
    background: #fff3cd; color: #6b4c00; border-color: #f0e0a0;
}
.eval-ai-verdict.verdict-neutral {
    background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border);
}
[data-theme="dark"] .eval-ai-verdict.verdict-bull {
    background: #1a3a22; color: var(--ok); border-color: #2a5a32;
}
[data-theme="dark"] .eval-ai-verdict.verdict-bear {
    background: #3a1a1a; color: #f08080; border-color: #5a2a2a;
}
[data-theme="dark"] .eval-ai-verdict.verdict-warn {
    background: #3a3010; color: #e0c060; border-color: #5a4a20;
}

.eval-ai-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
}
.eval-ai-text em.text-muted { font-size: 13px; }

/* Regenerate button (↻) — hover-reveal in top-right of insight header (Session C) */
.eval-ai-regen-btn {
    margin-left: auto;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 1;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.eval-ai-insight:hover .eval-ai-regen-btn,
.eval-ai-unavailable .eval-ai-regen-btn {
    opacity: 1;
}
.eval-ai-regen-btn:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.eval-ai-regen-btn:active {
    transform: rotate(180deg);
    transition: transform 0.2s;
}
@media print {
    .eval-ai-regen-btn { display: none !important; }
}
#strike-print-container .eval-ai-regen-btn { display: none !important; }

/* Placeholder + unavailable states */
.eval-ai-placeholder, .eval-ai-unavailable {
    border-style: dashed;
    background: transparent;
}

/* Shimmer (deferred AI loading state — Session B fills it in) */
@keyframes eval-shimmer-pulse {
    0%   { opacity: 0.55; }
    50%  { opacity: 0.95; }
    100% { opacity: 0.55; }
}

.eval-ai-shimmer {
    background: linear-gradient(90deg,
        var(--bg-surface) 0%,
        var(--border) 50%,
        var(--bg-surface) 100%);
    background-size: 200% 100%;
    animation: eval-shimmer-slide 1.4s ease-in-out infinite, eval-shimmer-pulse 2.4s ease-in-out infinite;
    border-radius: 4px;
    color: transparent !important;
}
@keyframes eval-shimmer-slide {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.eval-ai-shimmer-line {
    height: 12px;
    margin: 6px 0;
}
.eval-ai-shimmer-line-short {
    width: 70%;
}

.verdict-shimmer {
    border: 1px solid transparent !important;
}

/* ============================================ */
/* v4.9.12 UI-9 — Print / Export PDF styles */
/* ============================================ */
@media print {
    .app-sidebar, .tabs, .tab-content:not(.active),
    .analyze-jump-nav, .analyze-sticky-bar, .rep-tab-bar,
    .strike-chat-fab, #strike-chat-panel,
    .section-header button, .inv-toolbar,
    .market-pulse-bar-wrap, .modal,
    .settings-panel, .inv-wl-acc-controls,
    .holdings-totals-strip, #marketPulseBar { display: none !important; }

    body, .tab-content, .inv-report-panel, .inv-section {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }

    .cpb-bar-fill, .cs-band-badge, .bsc-tier-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* v4.10 (Session A.7.3) — Reclassified page-break atomicity.
     * Previously `.inv-section { page-break-inside: avoid }` made every report
     * section atomic. Because many sections contain multiple sub-cards that
     * could break cleanly between cards (e.g., Buffett scorecard + Gate 1,
     * Sticker + assumptions, Beneish + components), the blanket rule was
     * forcing whole sections to push to the next page when they didn't quite
     * fit — leaving ~50% whitespace on most pages.
     *
     * New approach: `.inv-section` and `.eval-group` are splittable; only
     * specific atomic widgets get `page-break-inside: avoid`. Each widget
     * stays intact, but the parent section can break cleanly between widgets.
     */
    .inv-section { page-break-inside: auto; }
    .eval-group { page-break-inside: auto; }
    .eval-group-header { background: white !important; border-left-color: #999 !important; cursor: default !important; }
    .eval-group-chevron { display: none !important; }
    /* v4.34.0 (Initiative B) — [id^="eval-group-body-"] retired along with the
       collapsible eval-group chrome; report sections now live in .rep-tab-pane
       divs, forced visible here so print/export always shows all 5 tabs. */
    .rep-tab-pane { display: block !important; }

    /* Atomic widgets — never split mid-content */
    .vr-card               { page-break-inside: avoid !important; }
    .conv-pair-bar         { page-break-inside: avoid !important; }
    .cpb-block             { page-break-inside: avoid !important; }
    .cpb-score-row         { flex-wrap: nowrap !important; }
    .inv-m-card            { page-break-inside: avoid !important; }
    .inv-scorecard         { page-break-inside: avoid !important; }
    .inv-health-card       { page-break-inside: avoid !important; }
    .bsc-layout            { page-break-inside: avoid !important; }
    .inv-gate-row          { page-break-inside: avoid !important; }
    .piotroski-bucket      { page-break-inside: avoid !important; }
    .beneish-layout        { page-break-inside: avoid !important; }
    .sticker-widget        { page-break-inside: avoid !important; }
    .graham-grid           { page-break-inside: avoid !important; }
    .graham-ncav-card      { page-break-inside: avoid !important; }
    .dcf-layout            { page-break-inside: avoid !important; }
    .inv-tool-card         { page-break-inside: avoid !important; }
    .macro-item            { page-break-inside: avoid !important; }
    .inst-card-meta        { page-break-inside: avoid !important; }
    .insider-row           { page-break-inside: avoid !important; }
    .ws-consensus-block    { page-break-inside: avoid !important; }
    .ws-earnings-block     { page-break-inside: avoid !important; }
    .peer-comparison-card  { page-break-inside: avoid !important; }
    .lev-card              { page-break-inside: avoid !important; }

    /* Page-break adjacency rules — keep titles bound to their content */
    .inv-section-title     { page-break-after: avoid !important; }
    .eval-group-header     { page-break-after: avoid !important; }
    .tl-master             { page-break-before: avoid !important; }

    /* Featured section retains its split-friendly treatment from A.6 */
    .inv-section.featured-section { page-break-inside: auto !important; }
    .featured-section .inv-section-title { page-break-after: avoid !important; }

    /* A.7.2 — Featured-section blue left-border bleeds into empty space on
     * pages that don't fully contain Four Ms. Drop the border in print only;
     * the section title is already self-identifying. */
    .featured-section { border-left: none !important; padding-left: 0 !important; }

    /* Print AI insight card if cached; never print shimmer (it would render as grey blocks) */
    .eval-ai-shimmer-state, .eval-ai-shimmer { display: none !important; }
    .eval-ai-placeholder, .eval-ai-unavailable { display: none !important; }
    .eval-ai-insight { background: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .eval-ai-verdict { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .inv-report-panel::before {
        content: "STRIKE Investment Analysis — " attr(data-ticker);
        display: block;
        font-size: 10px;
        color: var(--text-secondary);
        margin-bottom: 12px;
        border-bottom: 1px solid #ccc;
        padding-bottom: 6px;
    }

    a[href]:after { content: " (" attr(href) ")"; font-size: 9px; color: #666; }
    a.jump-nav-pill:after { content: none; }
}

/* ── Holdings accordion print: clone-container approach ──────────────────── */
/* #strike-print-container is injected by exportAnalyzeReport() at <body> level,
   completely escaping the table nesting that caused the blank-page bug.         */
#strike-print-container { display: none; }

@media print {
    /* Accordion print: hide entire page, show only the cloned report */
    body.print-accordion-active > *:not(#strike-print-container) { display: none !important; }

    body.print-accordion-active #strike-print-container {
        display: block !important;
        padding: 20px;
    }

    /* Strip the accordion controls bar and sticky elements from the clone */
    #strike-print-container .holdings-acc-controls,
    #strike-print-container .analyze-sticky-bar,
    #strike-print-container .analyze-jump-nav,
    #strike-print-container .rep-tab-bar { display: none !important; }

    /* Hide collapsed section one-liners — they print as blank space */
    #strike-print-container .inv-section-collapsed-row { display: none !important; }

    /* Reduce font size to fit more content per page */
    #strike-print-container { font-size: 11px !important; line-height: 1.4 !important; }
    #strike-print-container .inv-report-title { font-size: 16px !important; }
    #strike-print-container .inv-section-title { font-size: 12px !important; }
    #strike-print-container .cpb-score-val { font-size: 24px !important; }

    /* Prevent isolated empty sections from generating full blank pages */
    #strike-print-container .inv-section:empty { display: none !important; }
    #strike-print-container .beneish-section { page-break-after: avoid !important; }

    /* Ensure report text is legible on white paper */
    #strike-print-container .inv-report-panel,
    #strike-print-container .inv-section {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }

    /* Preserve colored badges and bars */
    #strike-print-container .cpb-bar-fill,
    #strike-print-container .cs-band-badge,
    #strike-print-container .bsc-tier-badge {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* v4.10 (Session A.7.3) — Reclassified atomicity (mirrored from main print block) */
    #strike-print-container .inv-section { page-break-inside: auto; }
    #strike-print-container .eval-group { page-break-inside: auto; }
    #strike-print-container .eval-group-header { background: white !important; border-left-color: #999 !important; }
    /* Session C — In print: hide chevron, force all collapsed groups open, remove pointer */
    #strike-print-container .eval-group-chevron { display: none !important; }
    #strike-print-container .eval-group-header  { cursor: default !important; }
    /* v4.34.0 (Initiative B) — see the mirrored comment in the generic print block above */
    #strike-print-container .rep-tab-pane { display: block !important; }
    #strike-print-container .eval-ai-shimmer-state,
    #strike-print-container .eval-ai-placeholder,
    #strike-print-container .eval-ai-unavailable,
    #strike-print-container .eval-ai-shimmer { display: none !important; }
    #strike-print-container .eval-ai-insight { background: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    #strike-print-container .eval-ai-verdict { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Atomic widgets — never split mid-content */
    #strike-print-container .vr-card              { page-break-inside: avoid !important; }
    #strike-print-container .conv-pair-bar        { page-break-inside: avoid !important; }
    #strike-print-container .cpb-block            { page-break-inside: avoid !important; }
    #strike-print-container .cpb-score-row        { flex-wrap: nowrap !important; }
    #strike-print-container .inv-m-card           { page-break-inside: avoid !important; }
    #strike-print-container .inv-scorecard        { page-break-inside: avoid !important; }
    #strike-print-container .inv-health-card      { page-break-inside: avoid !important; }
    #strike-print-container .bsc-layout           { page-break-inside: avoid !important; }
    #strike-print-container .inv-gate-row         { page-break-inside: avoid !important; }
    #strike-print-container .piotroski-bucket     { page-break-inside: avoid !important; }
    #strike-print-container .beneish-layout       { page-break-inside: avoid !important; }
    #strike-print-container .sticker-widget       { page-break-inside: avoid !important; }
    #strike-print-container .graham-grid          { page-break-inside: avoid !important; }
    #strike-print-container .graham-ncav-card     { page-break-inside: avoid !important; }
    #strike-print-container .dcf-layout           { page-break-inside: avoid !important; }
    #strike-print-container .inv-tool-card        { page-break-inside: avoid !important; }
    #strike-print-container .macro-item           { page-break-inside: avoid !important; }
    #strike-print-container .inst-card-meta       { page-break-inside: avoid !important; }
    #strike-print-container .insider-row          { page-break-inside: avoid !important; }
    #strike-print-container .ws-consensus-block   { page-break-inside: avoid !important; }
    #strike-print-container .ws-earnings-block    { page-break-inside: avoid !important; }
    #strike-print-container .peer-comparison-card { page-break-inside: avoid !important; }
    #strike-print-container .lev-card             { page-break-inside: avoid !important; }

    /* Page-break adjacency rules */
    #strike-print-container .inv-section-title { page-break-after: avoid !important; }
    #strike-print-container .eval-group-header { page-break-after: avoid !important; }
    #strike-print-container .tl-master         { page-break-before: avoid !important; }

    /* Featured section retains its split-friendly treatment */
    #strike-print-container .inv-section.featured-section { page-break-inside: auto !important; }
    #strike-print-container .featured-section .inv-section-title { page-break-after: avoid !important; }

    /* A.7.2 — Featured-section blue left-border bleeds into empty space */
    #strike-print-container .featured-section { border-left: none !important; padding-left: 0 !important; }
}

/* ── v4.13.1 — Earnings Collision Badge on play cards ─────────────────────── */
.earnings-collision-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    line-height: 1.3;
}
.collision-inside {
    background: #fef2f2;
    border: 1px solid var(--crit);
    color: var(--crit);
}
.collision-post {
    background: #fffbeb;
    border: 1px solid var(--high);
    color: var(--high);
}
[data-theme="dark"] .collision-inside {
    background: #3b1212;
    border-color: #b91c1c;
    color: var(--crit);
}
[data-theme="dark"] .collision-post {
    background: #2d2208;
    border-color: var(--high);
    color: var(--high);
}

/* ── v4.13.2 — Stale plays dot on Options tab button ──────────────────────── */
.tab-button.tab-btn-stale {
    position: relative;
}
.tab-button.tab-btn-stale::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--crit);
    border: 2px solid var(--bg-surface, #fff);
    animation: stale-pulse 2s ease-in-out infinite;
}
@keyframes stale-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.65; transform: scale(0.85); }
}
[data-theme="dark"] .tab-button.tab-btn-stale::after {
    border-color: #1a1a2e;
}

/* ── v4.13.3 — Scanner → Options Analyzer send buttons ────────────────────── */
.scanner-send-options-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--primary-faint, rgba(201,106,58,0.30));
    background: var(--primary-faint, rgba(201,106,58,0.08));
    color: var(--primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}
.scanner-send-options-btn:hover {
    background: rgba(201,106,58,0.18);
    border-color: var(--primary);
    color: var(--primary-dark);
}
.scanner-send-options-btn:disabled {
    background: var(--ok-soft);
    border-color: var(--ok);
    color: var(--ok);
    cursor: default;
}
[data-theme="dark"] .scanner-send-options-btn {
    background: rgba(232,145,106,0.10);
    border-color: rgba(232,145,106,0.25);
    color: var(--primary);
}
[data-theme="dark"] .scanner-send-options-btn:hover {
    background: rgba(232,145,106,0.20);
    border-color: var(--primary);
    color: var(--primary);
}
[data-theme="dark"] .scanner-send-options-btn:disabled {
    background: var(--ok-soft);
    border-color: var(--ok);
    color: var(--ok);
}

.scanner-send-all-btn {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--on-accent);
    cursor: pointer;
    white-space: nowrap;
    margin-left: auto;
    transition: background 0.12s;
}
.scanner-send-all-btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}
[data-theme="dark"] .scanner-send-all-btn {
    background: var(--primary);
    border-color: var(--primary);
}
[data-theme="dark"] .scanner-send-all-btn:hover {
    background: var(--primary-dark);
}

/* ── v4.13.4 — (no new CSS — data-only change) ── */

/* ── v4.13.5 — Per-ticker refresh button on play cards ────────────────────── */
.strategy-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.play-refresh-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 5px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
}
.play-refresh-btn:hover {
    background: var(--background-alt, #f1f5f9);
    color: var(--primary);
    border-color: var(--primary);
}
.play-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@keyframes play-refresh-spin {
    to { transform: rotate(360deg); }
}
.play-refresh-spin {
    display: inline-block;
    animation: play-refresh-spin 0.7s linear infinite;
}
[data-theme="dark"] .play-refresh-btn:hover {
    background: var(--primary-faint);
}

/* ── v4.13.6 — Inline note expander on In-Play position rows ──────────────── */
.pos-note-expander-row td {
    padding: 0 !important;
    border-top: none !important;
}
.pos-note-expander {
    background: var(--bg-surface, var(--card-bg));
    border-top: 2px solid var(--primary);
    border-radius: 0 0 6px 6px;
    padding: 12px 16px;
}
.pos-note-existing {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.6;
    white-space: pre-wrap;
    background: var(--background-alt, #f8fafc);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    max-height: 120px;
    overflow-y: auto;
}
[data-theme="dark"] .pos-note-existing {
    background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.pos-note-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.pos-note-input {
    flex: 1;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-primary);
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}
.pos-note-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(201,106,58, 0.15);
}

/* ── v4.15 — Chat Ticker Chips ─────────────────────────────────────────────── */
/* Note: .analyzer-disc-in is still used by the Institutional tab watchlist indicator */
.analyzer-disc-in { font-size: 11px; font-weight: 600; color: var(--success); }
.chat-ticker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.chat-ticker-label {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    align-self: center;
    flex-shrink: 0;
}
.chat-ticker-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid rgba(201,106,58,0.30);
    background: var(--primary-faint);
    color: var(--primary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
    font-family: inherit;
}
.chat-ticker-btn:hover:not(:disabled) {
    background: rgba(201,106,58,0.18);
    border-color: var(--primary);
}
.chat-ticker-btn.added,
.chat-ticker-btn:disabled {
    background: var(--ok-soft);
    border-color: var(--ok);
    color: var(--ok);
    cursor: default;
}
.chat-ticker-add-all {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    font-family: inherit;
    white-space: nowrap;
}
.chat-ticker-add-all:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Dark mode */
[data-theme="dark"] .chat-ticker-btn {
    background: var(--primary-faint);
    border-color: rgba(232,145,106,0.30);
    color: var(--primary);
}
[data-theme="dark"] .chat-ticker-btn:hover:not(:disabled) {
    background: rgba(232,145,106,0.22);
}
[data-theme="dark"] .chat-ticker-btn.added,
[data-theme="dark"] .chat-ticker-btn:disabled {
    background: rgba(74,222,128,0.10);
    border-color: var(--ok);
    color: #4ade80;
}
[data-theme="dark"] .chat-ticker-add-all {
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    color: var(--text-secondary);
}
[data-theme="dark"] .chat-ticker-add-all:hover {
    background: color-mix(in srgb, var(--ink) 9%, transparent);
    color: var(--text-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   v4.17 — Covered Call Assistant
   ══════════════════════════════════════════════════════════════════════════ */

/* CC Ideas button in Holdings accordion controls bar */
.cc-ideas-btn {
    background: linear-gradient(135deg, #0f4c81, #1d6fa8) !important;
    border-color: #1a5f96 !important;
    color: var(--on-accent) !important;
    font-weight: 600 !important;
    white-space: nowrap;
    transition: filter 0.12s, transform 0.1s;
}
.cc-ideas-btn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}
.cc-ideas-btn:active { transform: translateY(0); }
[data-theme="dark"] .cc-ideas-btn {
    background: linear-gradient(135deg, #1a5f96, #2480bf) !important;
    border-color: #2a7ab5 !important;
}

/* Loading state shown in play-ideas-container while CC runs */
.cc-loading-state {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Dashboard morning briefing — CC nudge block */
.dash-brief-block-cc {
    border-color: rgba(201,106,58,0.35);
}
.dash-brief-block-cc .dash-brief-block-title {
    color: var(--primary);
}
[data-theme="dark"] .dash-brief-block-cc .dash-brief-block-title {
    color: var(--primary);
}
.dash-brief-block-meta {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 4px;
}

/* ── CC Card Grid ─────────────────────────────────────────── */
.dash-cc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding: 14px;
}
.dash-cc-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card, 3px);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s;
}
.dash-cc-card:hover {
    border-color: var(--primary);
}
.dash-cc-card-ticker {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}
.dash-cc-accounts {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.dash-cc-account {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    gap: 6px;
}
.dash-cc-acct-name {
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-cc-acct-detail {
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.dash-cc-card-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 2px;
}
.dash-cc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--primary);
    background: var(--primary-faint);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.dash-cc-btn .material-symbols-outlined {
    font-size: 14px;
}
.dash-cc-btn:hover {
    background: var(--primary);
    color: var(--on-accent);
}
[data-theme="dark"] .dash-cc-btn {
    border-color: var(--primary);
    background: var(--primary-faint);
    color: var(--primary);
}
[data-theme="dark"] .dash-cc-btn:hover {
    background: var(--primary);
    color: var(--on-accent);
}

/* ── Portfolio Snapshot stats row ────────────────────────── */
.dash-stats-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.dash-stat-pill {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 16px;
    min-width: 110px;
}
.dash-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.dash-stat-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

/* ── Holdings mini-table ─────────────────────────────────── */
.dash-hold-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border);
}
.dash-hold-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.dash-hold-table thead th {
    background: var(--bg-body);
    padding: 7px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.dash-hold-table thead th.dash-hold-num {
    text-align: right;
}
.dash-hold-row td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.dash-hold-row:last-child td {
    border-bottom: none;
}
.dash-hold-row:hover td {
    background: var(--bg-hover);
}
.dash-hold-ticker {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
}
.dash-hold-num {
    text-align: right;
    color: var(--text-secondary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.dash-hold-hint {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 2px;
}
.dash-muted { color: var(--text-muted); }

/* v4.13.2 — Cash equivalent row & badge */
.dash-hold-cash td {
    opacity: 0.75;
}
.dash-cash-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--background-alt);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1.4;
    cursor: default;
}

   ══════════════════════════════════════════════════════════════════════════ */

/* Layout */
.dash-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
}

/* Section card */
.dash-section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.dash-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
}
.dash-section-header .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary);
    flex-shrink: 0;
}
.dash-section-meta {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 4px;
}
.dash-section-body {
    padding: 14px 18px;
}

/* Refresh button inside header */
.dash-pulse-refresh {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 15px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.12s;
}
.dash-pulse-refresh:hover { color: var(--primary); }

/* Nav link button (top-right of section header) */
.dash-nav-link {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
    transition: background 0.12s;
    font-family: inherit;
}
.dash-nav-link:hover { background: rgba(201,106,58,0.08); }

/* Market Pulse body (transparent wrapper) */
.dash-pulse-body { padding: 10px 18px 12px; }

/* ── News Pulse feed card (news-pulse-data-model-and-storage-backlog.md
     §6.7 step 10) — reuses .scanner-chip-bar/.scanner-chip/.chip-x/
     .scanner-chip-clear and .tr-filing-severity as-is; only new rules below. */
.news-pulse-unread-bar {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; color: var(--primary);
    margin-bottom: 10px;
}
.news-pulse-filter-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.news-pulse-filter-bar select {
    font-size: 12px; padding: 4px 8px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text-primary);
}
.news-pulse-list { display: flex; flex-direction: column; gap: 2px; }
.news-pulse-row {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding: 6px 8px; border-radius: 8px; cursor: pointer; transition: background 0.12s;
}
.news-pulse-row:hover { background: var(--background-alt); }
.news-pulse-row.unread { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.news-pulse-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
    flex: none; align-self: center;
}
.news-pulse-ticker { font-size: 13px; color: var(--text-primary); }
.news-pulse-detail { font-size: 12px; color: var(--text-secondary); flex: 1 1 auto; min-width: 0; }
.news-pulse-age { font-size: 11px; flex: none; }

/* ── Portfolio Snapshot ───────────────────────────────────────────────── */
.dash-snap-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.dash-snap-cell { display: flex; flex-direction: column; gap: 4px; }
.dash-snap-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}
.dash-snap-stale { color: var(--text-muted); }
.dash-snap-change { font-size: 14px; font-weight: 600; }
.dash-snap-hint   { font-size: 12px; color: var(--text-muted); }
.dash-snap-mover  {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
}
.dash-snap-mover-label {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dash-snap-count  { font-size: 12px; color: var(--text-muted); }
.dash-pos { color: var(--success); }
.dash-neg { color: var(--danger); }

/* ── Morning Briefing ────────────────────────────────────────────────── */
.dash-brief-block {
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 10px;
}
.dash-brief-block:last-child { margin-bottom: 0; }

.dash-brief-block-urgent   { border-color: color-mix(in srgb, var(--crit) 35%, transparent);  }
.dash-brief-block-collision { border-color: color-mix(in srgb, var(--high) 40%, transparent); }
.dash-brief-block-stale    { border-color: rgba(100,116,139,0.4); }

.dash-brief-block-title {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
}
.dash-brief-block-urgent   .dash-brief-block-title { color: var(--danger);  }
.dash-brief-block-collision .dash-brief-block-title { color: #b45309; }
[data-theme="dark"] .dash-brief-block-collision .dash-brief-block-title { color: var(--high); }
.dash-brief-block-title .material-symbols-outlined { font-size: 16px; }

.dash-brief-rows { display: flex; flex-direction: column; }
.dash-brief-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}
.dash-brief-row:last-child { border-bottom: none; }
.dash-brief-ticker   { font-weight: 700; font-size: 13px; min-width: 52px; }
.dash-brief-strategy { color: var(--text-secondary); flex: 1; }
.dash-brief-dte {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    white-space: nowrap;
}
.dash-brief-dte-danger { background: color-mix(in srgb, var(--crit) 10%, transparent); color: var(--danger); }
.dash-brief-dte-warn   { background: color-mix(in srgb, var(--high) 10%, transparent); color: var(--warning); }
.dash-brief-dte-ok     { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--success); }
.dash-brief-action {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.12s;
}
.dash-brief-action:hover { background: rgba(201,106,58,0.08); }

.dash-brief-stale-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

/* ── Earnings Calendar ───────────────────────────────────────────────── */
.dash-earn-list { display: flex; flex-direction: column; gap: 0; }
.dash-earn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.dash-earn-row:last-child { border-bottom: none; }
.dash-earn-ticker { font-weight: 700; font-size: 13px; min-width: 52px; }
.dash-earn-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
}
.tag-holding { background: rgba(201,106,58,0.1);  color: var(--primary); }
.tag-inplay  { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--success); }
.dash-earn-dte {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    margin-left: auto;
}
.dash-earn-danger { background: color-mix(in srgb, var(--crit) 10%, transparent); color: var(--danger); }
.dash-earn-warn   { background: color-mix(in srgb, var(--high) 10%, transparent); color: var(--warning); }
.dash-earn-info   { background: color-mix(in srgb, var(--info) 10%, transparent); color: var(--primary); }

/* ── Watched Plays grid ──────────────────────────────────────────────── */
.dash-watched-grid { margin-top: 0; }

/* ── Empty states ────────────────────────────────────────────────────── */
.dash-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 4px;
    font-size: 13px;
    color: var(--text-secondary);
}
.dash-empty .material-symbols-outlined {
    font-size: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.dash-empty-good { color: var(--success); }
.dash-empty-good .material-symbols-outlined { color: var(--success); }
.dash-empty-link {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
    text-decoration: underline;
}

/* ── v4.13.3 — Manual Big Five Metrics Override ─────────────────────────── */

/* Small inline badge marking a manually-entered value */
.metrics-override-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 3px;
    padding: 0 3px;
    margin-left: 4px;
    vertical-align: 1px;
    cursor: default;
}

/* Edit / Clear buttons in Big Five section title */
.metrics-override-edit-btn,
.metrics-override-clear-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.metrics-override-edit-btn:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    border-color: var(--primary);
}
.metrics-override-clear-btn:hover {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
    border-color: var(--danger);
}

/* Note shown below the bar chart when overrides are active */
.metrics-override-note {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-style: italic;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border-radius: 5px;
    border-left: 3px solid var(--primary);
}

/* ── Modal form layout ─────────────────────────── */
.mov-intro {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 16px;
    line-height: 1.5;
}
.mov-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    align-items: center;
}
.mov-label {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}
.mov-threshold {
    font-weight: 400;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-left: 4px;
}
.mov-input-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.mov-input {
    width: 90px;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-body);
    color: var(--text-primary);
    font-size: 13px;
    text-align: right;
}
.mov-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}
.mov-unit {
    font-size: 13px;
    color: var(--text-muted);
    width: 14px;
}
.mov-source-hint {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.mov-source-hint a {
    color: var(--primary);
    text-decoration: underline;
}

/* ── v4.13.3 — BRK Operating ROIC panel + filing banner ─────────────────── */
.mov-brk-panel {
    background: color-mix(in srgb, var(--primary) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}
.mov-brk-heading {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: 5px; margin-bottom: 6px;
}
.mov-brk-sub {
    font-size: 12px; color: var(--text-secondary); line-height: 1.5;
    margin: 0 0 12px;
}
.mov-brk-section-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 8px;
}
.mov-readonly {
    background: var(--bg-surface) !important;
    color: var(--text-secondary) !important;
    cursor: default;
}
.mov-brk-preview {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px; padding: 8px 12px;
    background: var(--bg-surface);
    border-radius: 6px; border: 1px solid var(--border);
}
.mov-brk-preview-label { font-size: 12px; color: var(--text-secondary); }
.mov-brk-preview-value { font-size: 20px; font-weight: 800; color: var(--text-primary); min-width: 60px; }
.mov-brk-preview-note  { font-size: 11px; color: var(--text-muted); font-style: italic; }
.mov-brk-divider       { height: 1px; background: var(--border); margin: 16px 0 12px; }

/* v4.17.2 — BRK AI Assist (button row, status, proposal review table, provenance) */
.mov-brk-ai-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.mov-brk-ai-btn { flex: 0 0 auto; font-size: 12px; padding: 5px 12px; }
.mov-brk-ai-status { font-size: 11px; color: var(--text-muted); font-style: italic; }
.mov-brk-ai-panel { margin: 0 0 12px; }
.brk-ai-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.brk-ai-table th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 4px 6px; border-bottom: 1px solid var(--border); }
.brk-ai-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.brk-ai-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.brk-ai-unit { font-weight: 400; color: var(--text-muted); font-size: 10px; }
.brk-ai-src a { color: var(--primary); text-decoration: none; }
.brk-ai-src a:hover { text-decoration: underline; }
.brk-ai-conf { font-size: 10px; padding: 1px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.brk-ai-conf-high   { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.brk-ai-conf-medium { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.brk-ai-conf-low    { background: color-mix(in srgb, var(--danger) 15%, transparent);  color: var(--danger); }
/* v4.22.5 (P0-3) — badge for rows reused from the per-field-per-period cache */
.brk-ai-cached-tag { font-size: 9.5px; padding: 1px 5px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.02em; background: color-mix(in srgb, var(--text-muted) 15%, transparent); color: var(--text-muted); }
.brk-ai-apply-btn { font-size: 11px; padding: 3px 10px; }
tr.brk-ai-applied td { opacity: 0.65; }
tr.brk-ai-applied .brk-ai-val { color: var(--success); opacity: 1; }
.brk-ai-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.brk-ai-footnote { font-size: 10.5px; color: var(--text-muted); font-style: italic; }

/* v4.20.3 — BRK AI Assist period-consistency guardrail (3B.5) */
.brk-ai-methodology-note {
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 9px;
    margin-bottom: 8px;
}
.brk-ai-methodology-note strong { color: var(--text-secondary); }
.brk-ai-period-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #7c2d12;
}
.brk-ai-period-warning .material-symbols-outlined { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
[data-theme="dark"] .brk-ai-period-warning {
    background: #431407;
    border-color: #9a3412;
    color: #fdba74;
}
.mov-brk-ai-prov { font-size: 11px; color: var(--text-muted); background: color-mix(in srgb, var(--primary) 6%, transparent); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; }
.mov-brk-ai-prov-title { font-weight: 600; }
.mov-brk-ai-prov ul { margin: 4px 0 0 16px; padding: 0; }
.mov-brk-ai-prov a { color: var(--primary); }

/* Filing freshness / pre-earnings banner inside the report */
.brk-filing-banner {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 14px; border-radius: 7px;
    margin-bottom: 12px; font-size: 13px; line-height: 1.5;
}
.brk-filing-banner.warn {
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    color: var(--text-primary);
}
.brk-filing-banner.info {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    color: var(--text-primary);
}
.brk-filing-banner .material-symbols-outlined { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.brk-filing-banner.warn .material-symbols-outlined { color: var(--warning); }
.brk-filing-banner.info  .material-symbols-outlined { color: var(--primary); }
.brk-filing-banner strong { font-weight: 700; }
.brk-banner-edit-btn {
    margin-left: auto; flex-shrink: 0;
    background: var(--primary); color: white;
    border: none; border-radius: 5px;
    padding: 4px 10px; font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap; font-family: inherit;
}
.brk-banner-edit-btn:hover { opacity: 0.88; }

/* ============================================
   API HEALTH TESTER — v4.13.7
   ============================================ */

/* Row wrapper: puts input and Test button side by side */
.api-key-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.api-key-row input {
    flex: 1;
    min-width: 0; /* prevent overflow */
}

/* Test button — small, unobtrusive */
.api-test-btn {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    background: var(--background-alt);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    line-height: 1;
}
.api-test-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.api-test-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

/* Result span — sits below the row, above <small> */
.api-test-result {
    display: block;
    min-height: 16px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 3px;
    margin-bottom: 1px;
    line-height: 1.3;
    transition: color 0.15s;
}
.api-test-result:empty { display: none; }
.api-test-testing   { color: var(--text-muted); }
.api-test-ok        { color: var(--success); }
.api-test-fail      { color: var(--danger); }
.api-test-rate      { color: var(--warning); }
.api-test-exhausted { color: var(--warning); font-style: italic; }


/* ============================================
   HOLDINGS R40 BADGE — v4.13.7
   ============================================ */

/* ============================================
   BRK ROIC HISTORY SPARKLINE — v4.13.7
   ============================================ */

.brk-roic-history-wrap {
    margin: 8px 0 4px;
    padding: 8px 10px;
    background: var(--background-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.brk-roic-nudge {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}
.brk-roic-history-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.brk-roic-hist-latest {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
}
.brk-roic-hist-val-pass { color: var(--success); }
.brk-roic-hist-val-warn { color: var(--warning); }
.brk-roic-hist-val-fail { color: var(--danger); }

.brk-roic-sparkline {
    display: block;
    width: 100%;
    max-width: 340px;
}
.brk-roic-history-note {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* v4.13.8 — BRK ROIC history controls (Clear / Export CSV) */
.brk-roic-history-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 10px;
    font-weight: 400;
}
.brk-roic-ctrl-link {
    color: var(--text-muted);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s, color 0.15s;
}
.brk-roic-ctrl-link:hover { opacity: 1; color: var(--primary); }
.brk-roic-ctrl-danger:hover { color: var(--danger) !important; }
.brk-roic-ctrl-sep {
    color: var(--border);
    font-size: 10px;
    user-select: none;
}
/* nudge row — controls sit after the text, push to end */
.brk-roic-nudge .brk-roic-history-controls { margin-left: auto; }

/* ════════════════════════════════════════════════════════════════════
   v4.13.9 (BUG-9) — Previously-referenced-but-undefined classes
   These classes were emitted by app.js templates but had no CSS rules,
   leaving visible text unstyled (default size/color, no layout).
   ════════════════════════════════════════════════════════════════════ */

/* Track Record (History) stats — grid wrapper + per-card label.
   .stat-card / .stat-value already exist; these complete the set. */
.history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 4px;
}

/* Payoff diagram SVG axis labels — without a fill they rendered black,
   invisible against the dark theme. */
.payoff-axis-label {
    fill: var(--text-secondary);
    font-size: 10px;
}

/* Payoff diagram empty-state message */
.payoff-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

/* Filtered-out plays grid — visually de-emphasized vs. qualifying plays */
.filtered-grid {
    opacity: 0.78;
}

/* Empty-state DIV variants (some templates use divs instead of h3/p) —
   mirror .empty-state h3 / .empty-state p */
.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
}
.empty-state-desc {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Secondary "n / m tickers analyzed" note in batch progress rows */
.cache-status-age {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 8px;
    font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════════
   v4.35.0 (Analysis Redesign Initiative C) — VALUATION RELEVANCE PANEL
   Equal-weight card grid, one per fair-value method (Rule #1/DCF/Graham/
   NCAV), each tagged with a fit tier. Reuses --primary/--primary-faint
   (the app's established "this is the important thing" accent) rather
   than introducing new theme vars for a single component.
   ════════════════════════════════════════════════════════════════════ */

.val-relevance-panel {
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    background: var(--card-bg);
    padding: 14px 18px 16px;
    margin: 14px 0 16px;
    box-shadow: 0 2px 8px color-mix(in srgb, black 6%, transparent);
}
[data-theme="dark"] .val-relevance-panel { box-shadow: 0 2px 10px color-mix(in srgb, black 35%, transparent); }

.vr-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.vr-icon    { font-size: 19px; color: var(--primary); }
.vr-title   { font-weight: 700; font-size: 14px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-primary); }
.vr-subtitle { font-size: 11.5px; color: var(--text-muted); margin: 0 0 12px; }

.val-relevance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.vr-card {
    padding: 14px;
    border-radius: var(--radius-card, 3px);
    border: 1px solid var(--border);
    background: var(--bg-body);
}

.vr-card.best-fit { border: 2px solid var(--primary); background: var(--primary-faint); }
.vr-card.good-fit  { border: 1px solid var(--border); }
.vr-card.low-fit   { border: 1px solid var(--border); opacity: 0.70; }
.vr-card.low-fit .vr-value { opacity: 0.55; }
.vr-card.not-available { border: 1px dashed var(--border); background: transparent; opacity: 0.60; }

.vr-card-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.vr-card-icon   { font-size: 16px; color: var(--text-muted); }
.vr-card-label  { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }

.vr-tier-badge {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--radius-badge, 2px);
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.vr-tier-badge.best-fit      { background: var(--primary-faint); color: var(--primary-dark); border: 1px solid var(--primary); }
.vr-tier-badge.good-fit      { background: color-mix(in srgb, var(--ok) 14.0%, transparent); color: var(--success); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); }
.vr-tier-badge.low-fit       { background: rgba(108,117,125,0.10); color: var(--text-secondary); border: 1px solid var(--border); }
.vr-tier-badge.not-available { background: transparent; color: var(--text-muted); border: 1px dashed var(--border); }

.vr-value    { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.vr-pctdiff  { font-size: 12px; font-weight: 600; margin-left: 6px; }
.vr-pctdiff.over  { color: var(--danger); }
.vr-pctdiff.under { color: var(--success); }
.vr-na-value { font-size: 15px; font-weight: 600; color: var(--text-muted); }

.vr-reason    { font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin-top: 8px; }
.vr-na-reason { font-size: 12px; line-height: 1.5; color: var(--text-muted); font-style: italic; margin-top: 6px; }

.vr-redflag {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 8px; padding: 6px 8px;
    background: color-mix(in srgb, var(--crit) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent);
    border-radius: 6px;
    font-size: 11.5px;
    color: var(--danger);
}

/* 2026-08-24 — fit-divergence banner: same "small icon + text, warning-toned"
   language as .vr-redflag above, but full-width (2+ methods disagreeing on
   band across the whole panel, not a single card's own caveat) and in the
   panel's --warning tone rather than --danger, matching the api-status-amber
   rgba(var(--warning-rgb, ...)) fallback pattern already used elsewhere. */
.vr-divergence-banner {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--high) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--high) 35%, transparent);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--warning);
}
.vr-divergence-banner .material-symbols-outlined { color: var(--warning); }

/* ════════════════════════════════════════════════════════════════════
   v4.14.0 — DECISION CARD
   Verdict-first summary at the top of Analyze reports.
   ════════════════════════════════════════════════════════════════════ */

.decision-card {
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-card, 3px);
    background: var(--card-bg);
    padding: 14px 18px 12px;
    margin: 14px 0 16px;
    box-shadow: 0 2px 8px color-mix(in srgb, black 6%, transparent);
}
[data-theme="dark"] .decision-card { box-shadow: 0 2px 10px color-mix(in srgb, black 35%, transparent); }

/* ── Header row: title + badges ───────────────────────────────────── */
.dc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.dc-icon  { font-size: 19px; color: var(--primary); }
.dc-title {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-primary);
}
.dc-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
/* v4.16.2 — Normalize every badge in the Decision Card header to one shape.
   The four badges are borrowed from unrelated components (band, Buffett tier,
   holdings signal, earnings chip) with different radii, fonts, heights and
   borders. Unify them here (scoped to .dc-badges) while preserving each badge's
   semantic colors. The transparent base border keeps bordered and border-less
   variants at identical height. */
.dc-badges > .dc-band-badge,
.dc-badges > .bsc-tier-badge,
.dc-badges > .signal-badge,
.dc-badges > .dc-earnings-chip {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 22px;
    margin: 0;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
/* UI Phase D — same squared-chip/left-rule treatment as .cs-band-badge
   (kept as a parallel rule set, not merged into one class, since the
   .dc-badges > .dc-band-badge normalization below and .dc-band-score's
   inline pairing are Decision-Card-specific; a genuine future
   consolidation candidate, left as observed-not-acted-on for this pass). */
.dc-band-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px 3px 9px;
    border-radius: var(--radius-badge, 2px);
    border-left: 3px solid currentColor;
    white-space: nowrap;
}
.dc-band-score { font-weight: 600; opacity: 0.8; font-size: 11px; margin-left: 3px; }

/* UI Phase D — Coverage meter (Remediation Phase 3c's coverage figure, a
   genuinely new component per the plan: "does not exist -> split bar,
   measured vs hatched remainder"). Colored neutral (--ink-2/--text-
   secondary), not the band's verdict color — coverage answers "how much do
   we know", not "is it good", and tinting it green/red would smuggle in a
   judgment this number doesn't make. Track uses the same diagonal-hatch
   language as the B5 pips' .hatched state for the unmeasured remainder. */
.coverage-meter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}
.coverage-meter-track {
    display: inline-block;
    width: 44px;
    height: 6px;
    border-radius: 1px;
    background: repeating-linear-gradient(45deg, var(--gap) 0, var(--gap) 1px, transparent 1px, transparent 2px);
    border: 1px solid var(--rule-strong);
    overflow: hidden;
}
.coverage-meter-fill {
    display: block;
    height: 100%;
    background: var(--ink-2);
}
.coverage-meter-label {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
}
/* reuse conviction band palette */
.dc-band-badge.cs-high     { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.dc-band-badge.cs-moderate { background: color-mix(in srgb, var(--high) 12%, transparent); color: var(--high); }
.dc-band-badge.cs-watch    { background: color-mix(in srgb, var(--text-secondary) 10%, transparent); color: var(--text-secondary); }
.dc-band-badge.cs-low      { background: color-mix(in srgb, var(--crit) 10%, transparent); color: var(--crit); }
[data-theme="dark"] .dc-band-badge.cs-high     { background: color-mix(in srgb, var(--ok) 20%, transparent); }
[data-theme="dark"] .dc-band-badge.cs-moderate { background: color-mix(in srgb, var(--high) 20%, transparent); }
[data-theme="dark"] .dc-band-badge.cs-watch    { background: color-mix(in srgb, var(--text-secondary) 20%, transparent); }
[data-theme="dark"] .dc-band-badge.cs-low      { background: color-mix(in srgb, var(--crit) 20%, transparent); }
/* Remediation Phase 3c — a withheld band (coverage below the floor) is not a
   quality reading like the four above, so it gets a distinct muted treatment
   rather than falling through unstyled or borrowing a real band's color. */
.dc-band-badge.cs-low-coverage { background: color-mix(in srgb, var(--text-secondary) 8%, transparent); color: var(--text-secondary); font-style: italic; }
[data-theme="dark"] .dc-band-badge.cs-low-coverage { background: color-mix(in srgb, var(--text-secondary) 18%, transparent); }

.dc-earnings-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.dc-earnings-warn   { background: color-mix(in srgb, var(--high) 12%, transparent); color: var(--high); border: 1px solid color-mix(in srgb, var(--high) 30%, transparent); }
.dc-earnings-urgent { background: color-mix(in srgb, var(--crit) 12%, transparent); color: var(--crit); border: 1px solid color-mix(in srgb, var(--crit) 30%, transparent); }
[data-theme="dark"] .dc-earnings-warn   { background: color-mix(in srgb, var(--high) 22%, transparent); color: var(--high); }
[data-theme="dark"] .dc-earnings-urgent { background: color-mix(in srgb, var(--crit) 22%, transparent); color: var(--crit); }

/* ── MOS gauge ────────────────────────────────────────────────────── */
.dc-gauge { margin: 14px 2px 34px; }
.dc-gauge-track {
    position: relative;
    height: 14px;
    border-radius: 7px;
    overflow: visible;
}
.dc-gauge-zone {
    position: absolute;
    top: 0; bottom: 0;
}
.dc-gz-buy   { background: color-mix(in srgb, var(--ok) 30%, transparent);  border-radius: 7px 0 0 7px; }
.dc-gz-fair  { background: color-mix(in srgb, var(--high) 28%, transparent); }
.dc-gz-above { background: color-mix(in srgb, var(--crit) 26%, transparent);  border-radius: 0 7px 7px 0; }
[data-theme="dark"] .dc-gz-buy   { background: color-mix(in srgb, var(--ok) 40%, transparent); }
[data-theme="dark"] .dc-gz-fair  { background: color-mix(in srgb, var(--high) 38%, transparent); }
[data-theme="dark"] .dc-gz-above { background: color-mix(in srgb, var(--crit) 36%, transparent); }

.dc-gauge-marker {
    position: absolute;
    top: -22px;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    line-height: 1;
}
.dc-gauge-marker-price {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
}
.dc-gauge-marker-pin { font-size: 10px; color: var(--text-primary); margin-top: 1px; }
/* v4.16.3 (#6) — right-of-center marker drops below the bar (caret points up) to
   clear the top-right badges. margin-top:1px above is the label→bar gap; reset it here. */
.dc-marker-below { top: calc(100% + 3px); }
.dc-marker-below .dc-gauge-marker-pin { margin-top: 0; margin-bottom: 1px; }

.dc-gauge-tick {
    position: absolute;
    top: 0; bottom: -4px;
    width: 2px;
    background: var(--text-secondary);
    opacity: 0.65;
}
.dc-gauge-tick span {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.dc-gauge-caption {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
}
.dc-zone-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 10px;
}
.dc-zone-buy   { background: color-mix(in srgb, var(--ok) 14.0%, transparent); color: var(--ok); }
.dc-zone-fair  { background: rgba(217,119,6,0.12); color: var(--high); }
.dc-zone-above { background: rgba(220,38,38,0.10); color: var(--crit); }
[data-theme="dark"] .dc-zone-buy   { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
[data-theme="dark"] .dc-zone-fair  { background: rgba(217,119,6,0.22); color: var(--high); }
[data-theme="dark"] .dc-zone-above { background: rgba(220,38,38,0.22); color: var(--crit); }
.dc-gauge-discount { font-size: 11.5px; color: var(--text-secondary); }

/* ── Reasons / Risks columns ──────────────────────────────────────── */
.dc-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px;
}
@media (max-width: 640px) { .dc-points { grid-template-columns: 1fr; } }
.dc-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.dc-reasons .dc-col-title { color: var(--ok); }
.dc-risks   .dc-col-title { color: var(--high); }
[data-theme="dark"] .dc-reasons .dc-col-title { color: var(--ok); }
[data-theme="dark"] .dc-risks   .dc-col-title { color: var(--high); }
.dc-col ul {
    margin: 0;
    padding-left: 18px;
}
.dc-col li {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.dc-col li.dc-empty { color: var(--text-secondary); font-style: italic; list-style: none; margin-left: -18px; }

/* ── Action line ──────────────────────────────────────────────────── */
.dc-action {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--background-alt, rgba(0,0,0,0.035));
    border: 1px solid var(--border);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
[data-theme="dark"] .dc-action { background: color-mix(in srgb, var(--ink) 4.5%, transparent); }
.dc-action-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--primary);
    white-space: nowrap;
}
.dc-action-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    flex: 1;
    min-width: 200px;
}

/* ════════════════════════════════════════════════════════════════════
   v4.14.1 (R-1) — MODEL CARD PATTERN
   Uniform verdict strip below every framework section title:
   plain-English sentence · provenance chips · freshness · explainer toggle
   ════════════════════════════════════════════════════════════════════ */

.mc-strip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: -6px 0 12px;            /* tucks under the title's bottom border */
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--background-alt, rgba(0,0,0,0.035));
    border: 1px solid var(--border);
}
[data-theme="dark"] .mc-strip { background: color-mix(in srgb, var(--ink) 4.5%, transparent); }

.mc-sentence {
    flex: 1;
    min-width: 220px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-primary);
}

.mc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Provenance chips — pending-grey family; semantic accents per source */
.mc-prov-chip {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    background: transparent;
    white-space: nowrap;
}
.mc-prov-edgar  { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 33%, transparent); }
.mc-prov-ai     { color: #7c3aed; border-color: #7c3aed55; }
.mc-prov-manual { color: var(--high); border-color: color-mix(in srgb, var(--high) 33%, transparent); }
[data-theme="dark"] .mc-prov-edgar  { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 33%, transparent); }
[data-theme="dark"] .mc-prov-ai     { color: #a78bfa; border-color: #a78bfa55; }
[data-theme="dark"] .mc-prov-manual { color: var(--high); border-color: color-mix(in srgb, var(--high) 33%, transparent); }

/* Freshness chip — reuses cache-fresh / cache-usable / cache-expired colors */
.mc-fresh-chip {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.mc-exp-toggle {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    white-space: nowrap;
}
.mc-exp-toggle:hover { text-decoration: underline; }
.mc-exp-arrow { font-size: 9px; }

/* Collapsible explainer panel (collapsed by default) */
.mc-explainer {
    margin: -6px 0 14px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--background-alt, rgba(0,0,0,0.025));
    border-left: 3px solid var(--primary);
    border-radius: 0 8px 8px 0;
}
[data-theme="dark"] .mc-explainer { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.mc-explainer strong { color: var(--text-primary); }

@media (max-width: 640px) {
    .mc-strip { flex-direction: column; gap: 8px; }
    .mc-meta  { width: 100%; justify-content: flex-start; }
}

/* ════════════════════════════════════════════════════════════════════
   v4.14.2 (R-3) — SCANNER PIPELINE HEADER
   Persistent Universe → Gate 1 → Gate 2 → Ranked stage strip, rendered
   from cache only. Pending nodes muted; populated nodes accented.
   ════════════════════════════════════════════════════════════════════ */

.scanner-pipeline-header {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0 18px 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--background-alt, rgba(0,0,0,0.025));
}
[data-theme="dark"] .scanner-pipeline-header { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }

.sph-node {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 0;
    min-width: 130px;
    padding: 6px 10px;
    border-radius: 8px;
}
.sph-node.done    { background: color-mix(in srgb, var(--ok) 8%, transparent); }
.sph-node.pending { opacity: 0.6; }
[data-theme="dark"] .sph-node.done { background: color-mix(in srgb, var(--ok) 10%, transparent); }

.sph-icon { font-size: 20px; flex-shrink: 0; }
.sph-node.done    .sph-icon { color: var(--ok); }
.sph-node.pending .sph-icon { color: var(--text-muted); }
[data-theme="dark"] .sph-node.done .sph-icon { color: var(--ok); }

.sph-node-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}
.sph-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.sph-sub {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.sph-count {
    font-size: 17px;
    font-weight: 800;
    color: var(--ok);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .sph-count { color: var(--ok); }
.sph-count-empty { color: var(--text-muted); font-weight: 600; }

.sph-arrow {
    align-self: center;
    color: var(--text-muted);
    font-size: 18px;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .scanner-pipeline-header { gap: 2px; padding: 10px; }
    .sph-arrow { display: none; }
    .sph-node { flex-basis: 45%; min-width: 0; }
}

/* ── Storage Usage Meter (Settings) — v4.14.3 (R-5) ───────────────────────── */
.storage-meter {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
}
.sm-total-line {
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--text-primary);
}
.sm-pct { font-weight: 600; margin-left: 4px; }
.sm-pct.sm-ok      { color: var(--ok); }
.sm-pct.sm-warning { color: var(--high); }
.sm-pct.sm-danger  { color: var(--crit); }
.sm-bar-track {
    height: 8px;
    background: var(--background-alt, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}
.sm-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.sm-bar-fill.sm-ok      { background: var(--ok); }
.sm-bar-fill.sm-warning { background: var(--high); }
.sm-bar-fill.sm-danger  { background: var(--crit); }
.sm-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sm-summary strong { color: var(--text-primary); }
.sm-clear-all-btn {
    margin-left: auto;
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    padding: 4px 10px;
    color: var(--crit);
    cursor: pointer;
    transition: background 0.15s ease;
}
.sm-clear-all-btn:hover { background: rgba(220, 38, 38, 0.08); }
.sm-table {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
}
.sm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.sm-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sm-row-protected .sm-name { color: var(--text-secondary); }
.sm-size {
    flex: 0 0 auto;
    width: 72px;
    text-align: right;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.sm-action {
    flex: 0 0 auto;
    width: 56px;
    text-align: right;
}
.sm-clear-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 8px;
    color: var(--crit);
    cursor: pointer;
    transition: background 0.15s ease;
}
.sm-clear-btn:hover { background: rgba(220, 38, 38, 0.08); }
.sm-protected { opacity: 0.55; font-size: 12px; }
.sm-empty { padding: 10px 0; color: var(--text-secondary); font-size: 12px; }
.sm-note {
    display: block;
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
}

/* ============================================================
   R-6 — IDEA INBOX (v4.15.0)
   Unified Discovery triage queue. Reuses the scanner-table skeleton
   (.scanner-table / .scanner-th / .scanner-td / .scanner-table-wrap)
   and the shared color tokens. Pass/warn/fail mirror .scan-* values.
   ============================================================ */
.ii-header { margin-bottom: 12px; }
.ii-title  { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.ii-sub    { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

.ii-status-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.ii-status-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; padding: 4px 10px; border-radius: 14px;
    background: var(--background-alt, rgba(0,0,0,0.04));
    border: 1px solid var(--border); color: var(--text-secondary);
    white-space: nowrap;
}
.ii-status-chip strong { color: var(--text-primary); }
.ii-status-empty { cursor: pointer; opacity: 0.8; }
.ii-status-empty:hover { opacity: 1; border-color: var(--primary); color: var(--primary); }
.ii-status-hint { font-style: italic; }
[data-theme="dark"] .ii-status-chip { background: color-mix(in srgb, var(--ink) 5%, transparent); }

.ii-count { font-size: 12px; color: var(--text-secondary); margin: 10px 0 6px; }

.ii-table-wrap { margin-top: 4px; }
.ii-ticker { font-weight: 700; color: var(--primary); min-width: 56px; }
.ii-signal { color: var(--text-secondary); font-size: 12px; max-width: 240px; }
.ii-center { text-align: center; white-space: nowrap; }
.ii-sources { white-space: nowrap; }

/* Score colors — mirror .scan-pass / .scan-warn / .scan-fail (unscoped). */
.ii-pass { color: var(--success); font-weight: 700; }
.ii-warn { color: var(--high);        font-weight: 700; }
.ii-fail { color: var(--danger);  font-weight: 700; }
.ii-na   { color: var(--text-muted); }
.ii-tier { font-weight: 700; color: var(--text-primary); }

/* Source badge pills */
.ii-source-badge {
    display: inline-block; font-size: 11px; font-weight: 600;
    padding: 2px 7px; border-radius: 10px; margin-right: 3px;
    border: 1px solid transparent; white-space: nowrap;
}
.ii-src-scanner  { background: #ecfeff; color: #155e75; border-color: #a5f3fc; }
.ii-src-13f      { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.ii-src-congress { background: var(--high-soft); color: var(--high); border-color: var(--high); }
.ii-src-lbo      { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
[data-theme="dark"] .ii-src-scanner  { background: #164e63; color: #a5f3fc; border-color: #155e75; }
[data-theme="dark"] .ii-src-13f      { background: #312e81; color: #c7d2fe; border-color: #3730a3; }
[data-theme="dark"] .ii-src-congress { background: #422006; color: var(--high); border-color: var(--high); }
[data-theme="dark"] .ii-src-lbo      { background: #3b0764; color: #e9d5ff; border-color: #6b21a8; }

/* Row actions */
.ii-actions { white-space: nowrap; }
.ii-actions .small { margin-right: 4px; padding: 3px 9px; font-size: 12px; }
.ii-dismiss { opacity: 0.75; }
.ii-dismiss:hover { opacity: 1; color: var(--danger); }

/* Empty state */
.ii-empty {
    text-align: center; padding: 40px 20px; color: var(--text-secondary);
    border: 1px dashed var(--border); border-radius: 8px; margin-top: 14px;
}
.ii-empty .material-symbols-outlined { font-size: 40px; opacity: 0.5; display: block; margin: 0 auto 8px; }
.ii-empty p { max-width: 460px; margin: 0 auto; font-size: 13px; }

/* Inbox row hover (mirrors .scanner-row) */
.ii-row { transition: background 0.1s; }
.ii-row:hover { background: var(--background-alt, rgba(0,0,0,0.02)); }
[data-theme="dark"] .ii-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* ============================================================
   R-6.1 — IDEA INBOX R40 ON-DEMAND (v4.15.1)
   Toolbar batch button, per-row Calc button, inline spinner.
   Reuses the shared `spin` keyframe.
   ============================================================ */
.ii-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 6px; flex-wrap: wrap; }
.ii-toolbar .ii-count { margin: 0; }
.ii-toolbar-actions { display: flex; align-items: center; gap: 8px; }

.ii-calc-btn {
    font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 10px;
    border: 1px solid var(--primary); background: transparent; color: var(--primary);
    cursor: pointer; transition: background 0.12s, color 0.12s;
}
.ii-calc-btn:hover:not(:disabled) { background: var(--primary); color: var(--on-accent); }
.ii-calc-btn:disabled { opacity: 0.4; cursor: default; }

.ii-r40-batch { white-space: nowrap; }
.ii-r40-progress { font-size: 12px; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.ii-spinner {
    display: inline-block; width: 12px; height: 12px; vertical-align: middle;
    border: 2px solid var(--border); border-top-color: var(--primary);
    border-radius: 50%; animation: spin 0.7s linear infinite;
}

/* ============================================================
   R-7 — SAVED SCREEN PRESETS + ACTIVE-FILTER CHIPS (v4.15.2)
   Scanner combined table. Var-based → theme-aware via [data-theme].
   ============================================================ */
.screen-preset-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
}
.screen-preset-label,
.scanner-chip-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-secondary); margin-right: 2px;
}
.screen-preset-btn {
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text-primary);
    cursor: pointer; transition: all 0.12s; display: inline-flex; align-items: center; gap: 5px;
}
.screen-preset-btn:hover { border-color: var(--primary); background: var(--background-alt); }
.screen-preset-btn.user { border-style: dashed; }
.screen-preset-btn .sp-del {
    font-size: 13px; line-height: 1; color: var(--text-secondary);
    border-radius: 50%; padding: 0 3px; transition: all 0.12s;
}
.screen-preset-btn .sp-del:hover { color: var(--on-accent); background: var(--crit); }
.screen-preset-save {
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px;
    border: 1px dashed var(--border); background: transparent; color: var(--text-secondary);
    cursor: pointer; transition: all 0.12s;
}
.screen-preset-save:hover { border-color: var(--primary); color: var(--primary); }

/* Active-filter chips */
.scanner-chip-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.scanner-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
    padding: 3px 6px 3px 10px; border-radius: 12px; background: var(--background-alt);
    border: 1px solid var(--border); color: var(--text-primary);
}
.scanner-chip .chip-x {
    cursor: pointer; font-size: 13px; line-height: 1; color: var(--text-secondary);
    border-radius: 50%; padding: 0 3px; transition: all 0.12s;
}
.scanner-chip .chip-x:hover { color: var(--on-accent); background: var(--crit); }
.scanner-chip-clear {
    font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--card-bg); color: var(--text-secondary);
    cursor: pointer; transition: all 0.12s;
}
.scanner-chip-clear:hover { border-color: var(--crit); color: var(--crit); }
[data-theme="dark"] .scanner-chip { background: color-mix(in srgb, var(--ink) 5%, transparent); }

/* ───────────────────────────────────────────────────────────────────────────
   R-7b.1 — SCANNER INTENT PRESETS (v4.15.3)
   R40 column badge · inline congress badge · sparse-data notices · M&A caption.
   Reuses the cross-cutting color tokens (pass-green / fail-red / warn-amber).
   ─────────────────────────────────────────────────────────────────────────── */

/* Heuristic caption under the preset bar (M&A-target proxy) */
.screen-preset-caption {
    font-size: 11px; line-height: 1.4; color: var(--text-secondary);
    margin: -4px 0 10px; padding: 5px 9px; border-radius: 8px;
    background: var(--background-alt); border: 1px dashed var(--border);
}

/* Rule of 40 column badge */
/* v4.16.1 — match the Holdings R40 box (was a pill; now a rounded box, same size/colors) */
/* ── v4.16.5 — unified R40 badge (single source of truth, app-wide) ──
   Replaces .scanner-r40-badge. Binary: pass/fail + muted N/A (SaaS-gated). */
.r40-badge {
    display: inline-block; text-align: center;
    font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
    letter-spacing: 0.03em; white-space: nowrap;
    border: 1px solid transparent;
}
.r40-badge.pass { color: var(--success); background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 28.0%, transparent); }
.r40-badge.fail { color: var(--danger);  background: color-mix(in srgb, var(--crit) 10%, transparent); border-color: color-mix(in srgb, var(--crit) 22%, transparent); }
.r40-badge.na   { color: var(--text-muted); background: transparent; border-color: transparent; }

/* Inline congressional-purchase badge in the ticker cell */
.scanner-congress-badge {
    font-size: 11px; cursor: default; vertical-align: middle; opacity: 0.9;
}

/* Sparse-data honesty notices (between chips and table) */
.scanner-data-notice {
    display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px;
}
.scanner-data-notice-row {
    font-size: 12px; line-height: 1.5; color: var(--text-secondary);
    padding: 7px 10px; border-radius: 8px;
    background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.28);
}
.scanner-data-notice-row strong { color: var(--text-primary); }
.scanner-data-notice-btn {
    font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--card-bg); color: var(--primary);
    cursor: pointer; transition: all 0.12s; margin-left: 4px;
}
.scanner-data-notice-btn:hover:not([disabled]) { border-color: var(--primary); background: var(--background-alt); }
.scanner-data-notice-btn[disabled] { opacity: 0.6; cursor: default; }
[data-theme="dark"] .scanner-data-notice-row { background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.30); }

/* ============================================================
   R-7b.2 — IDEA INBOX QUALITY PRESETS (v4.15.4)
   Reuses the R-7 preset/chip engine styles (.screen-preset-*, .scanner-chip*,
   .screen-preset-caption); only adds inbox-context spacing so the bars sit
   cleanly between the source-status row and the triage toolbar. No new colors.
   ============================================================ */
.ii-preset-bar { margin-top: 10px; margin-bottom: 6px; }
.ii-chip-bar   { margin-top: 0; margin-bottom: 8px; }

/* ============================================================
   R-8 — PERSISTENT MARKET-CONTEXT STRIP (v4.15.5)
   Compact, cache-only strip on the Scanner + Discovery tabs. Reuses the Market
   Pulse segment classes (.mp-segment, .mp-vix, .mp-pc-*, .mp-earn-*, .mp-indices,
   .mp-sep, .mp-regime); only the compact container + freshness label are new.
   Hidden automatically when there is no cached pulse data (empty mount).
   ============================================================ */
.market-strip-mount:empty { display: none; }
.market-context-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 0 0 14px;
    padding: 6px 10px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
}
.market-context-strip .mcs-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-right: 2px;
}
.market-context-strip .mcs-ago {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: auto;
    opacity: 0.85;
}

/* ============================================================
   R-9 — COMMAND PALETTE (Ctrl/⌘K) (v4.15.6)
   Ephemeral spotlight overlay. Token-based; dark mode inherited.
   z-index 9000: above modals/settings (1000–1100), below toasts (10000).
   ============================================================ */
.cmdk-overlay {
    display: none;
    position: fixed; inset: 0;
    z-index: 9000;
    background: color-mix(in srgb, black 45%, transparent);
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
}
.cmdk-overlay.open { display: flex; }
.cmdk-dialog {
    width: 100%; max-width: 560px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 48px color-mix(in srgb, black 32%, transparent);
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: 70vh;
}
.cmdk-input-row { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cmdk-input-icon { color: var(--text-secondary); font-size: 20px; }
.cmdk-input {
    flex: 1; border: none; outline: none; background: transparent;
    color: var(--text-primary); font-size: 15px; line-height: 1.4;
}
.cmdk-input::placeholder { color: var(--text-secondary); }
.cmdk-esc-hint, .cmdk-kbd, .cmdk-footer kbd {
    font-size: 10px; font-family: inherit; color: var(--text-secondary);
    background: var(--background-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 5px;
}
.cmdk-results { overflow-y: auto; padding: 6px; }
.cmdk-group {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-secondary); padding: 8px 10px 4px;
}
.cmdk-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; border-radius: 7px; cursor: pointer; user-select: none;
}
.cmdk-item.active { background: var(--primary); }
.cmdk-item.active .cmdk-item-title,
.cmdk-item.active .cmdk-item-badge { color: var(--on-accent); }
.cmdk-item.active .cmdk-mark { color: var(--on-accent); text-decoration: underline; background: transparent; }
.cmdk-item-title { font-size: 13.5px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-mark { background: transparent; color: var(--primary); font-weight: 700; }
.cmdk-item-badge {
    flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--text-secondary);
    background: var(--background-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 6px;
}
.cmdk-badge-analyze { color: var(--primary); border-color: var(--primary); }
/* v4.15.7 (R-9.1) — preset deep-link badge */
.cmdk-badge-preset { color: var(--success, var(--ok)); border-color: var(--success, var(--ok)); }
[data-theme="dark"] .cmdk-badge-preset { color: #4ade80; border-color: #4ade80; }
.cmdk-empty { padding: 24px 12px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.cmdk-footer {
    display: flex; gap: 14px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-secondary);
}
.cmdk-footer span { display: inline-flex; align-items: center; gap: 4px; }
/* v4.15.7 (R-9.1) — clear-recent footer button */
.cmdk-clear-btn {
    margin-left: auto; background: none; border: none; cursor: pointer;
    font-size: 11px; color: var(--text-secondary); padding: 0; line-height: 1;
}
.cmdk-clear-btn:hover { color: var(--text-primary); text-decoration: underline; }
.cmdk-launch .cmdk-kbd { margin-left: 6px; }

/* ============================================================
   v4.17.0 — Portfolio Pipeline funnel (Dashboard)
   Cache-only funnel: Discovered → Scanned → Watchlist → Holdings
   + Options side group. Stage accents are theme-stable hues;
   surfaces/text use theme variables.
   ============================================================ */
.pipe-funnel {
    display: flex; flex-direction: column; gap: 14px;
    padding: 6px 2px 2px;
}
.pipe-row {
    display: grid; gap: 14px;
}
.pipe-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pipe-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pipe-stage {
    --pipe-accent: var(--info);
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
    min-width: 0;
    padding: 20px 20px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--pipe-accent);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 3px var(--shadow);
    cursor: pointer; text-align: left;
    font-family: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.pipe-stage:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--shadow);
    border-color: var(--pipe-accent);
}
.pipe-stage:focus-visible {
    outline: 2px solid var(--pipe-accent); outline-offset: 2px;
}
.pipe-count {
    font-size: 42px; font-weight: 800; line-height: 1.05;
    color: var(--pipe-accent);
    font-variant-numeric: tabular-nums;
}
.pipe-label {
    font-size: 15px; font-weight: 700; color: var(--text-primary);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.pipe-caption {
    font-size: 12px; color: var(--text-secondary); line-height: 1.4;
}
.pipe-sub {
    margin-top: auto;
    font-size: 12px; font-weight: 600; color: var(--pipe-accent);
    background: color-mix(in srgb, var(--pipe-accent) 12%, transparent);
    border-radius: var(--radius-badge);
    padding: 3px 8px;
    cursor: pointer;
}
.pipe-sub:hover { text-decoration: underline; }
.pipe-sub-static { cursor: inherit; }
.pipe-sub-static:hover { text-decoration: none; }
.pipe-age {
    position: absolute; top: 8px; right: 10px;
    font-size: 10px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Stage accent hues — chosen to read on both light & dark surfaces */
.pipe-accent-blue  { --pipe-accent: #2f9de4; }
.pipe-accent-cyan  { --pipe-accent: #14b8c4; }
.pipe-accent-teal  { --pipe-accent: #1fae7d; }
.pipe-accent-gold  { --pipe-accent: #d9a416; }
.pipe-accent-grey  { --pipe-accent: #8a8f98; }
[data-theme="dark"] .pipe-accent-blue { --pipe-accent: #4db4f5; }
[data-theme="dark"] .pipe-accent-cyan { --pipe-accent: #2fd0dc; }
[data-theme="dark"] .pipe-accent-teal { --pipe-accent: #34c98f; }
[data-theme="dark"] .pipe-accent-gold { --pipe-accent: #eab53a; }
[data-theme="dark"] .pipe-accent-grey { --pipe-accent: #9aa0a8; }

/* Mobile: stack every card into a single column */
@media (max-width: 760px) {
    .pipe-row-3, .pipe-row-2 { grid-template-columns: 1fr; }
}

/* ── v4.20.0 Phase 4 — Holdings "ETFs & Funds" split ──────────────────────── */
.etf-holdings-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 8px;
}
.etf-holdings-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.etf-holdings-title .material-symbols-outlined {
    font-size: 18px;
    color: var(--primary);
}
.etf-holdings-count {
    background: var(--bg-hover);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
}
.etf-trend-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.etf-trend-up    { background: rgba(22, 163, 74, 0.12);  color: var(--ok); }
.etf-trend-down  { background: rgba(220, 38, 38, 0.12);  color: var(--crit); }
.etf-trend-mixed { background: color-mix(in srgb, var(--high) 14.0%, transparent); color: #b45309; }
[data-theme="dark"] .etf-trend-up    { color: #4ade80; }
[data-theme="dark"] .etf-trend-down  { color: var(--crit); }
[data-theme="dark"] .etf-trend-mixed { color: var(--high); }
.holdings-swap-btn {
    padding: 2px 6px;
    margin-right: 4px;
}
.holdings-swap-btn .material-symbols-outlined {
    font-size: 16px;
    vertical-align: middle;
}
.etf-holdings-table .holdings-actions-cell { white-space: nowrap; }
.etf-override-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}
.etf-override-label input[type="checkbox"] { margin: 0; }

/* ─────────────────────────────────────────────────────────────────
   v4.33.0 (R6/F7) — moved verbatim from index.html's inline <style>
   block (previously lines 12-1156, added incrementally starting
   v3.6.0 for PoliTicker styles). Pure copy motion, no rule changes —
   this closes the split inst-disc-* family (was divided between this
   file and the old inline block) and gets every stylesheet rule into
   one file.
   ───────────────────────────────────────────────────────────────── */
        /* ── Holdings table PoliTicker column ── */
        .poli-col-header { width: 60px; text-align: center; }
        .poli-badge-cell { text-align: center; }
        .poli-badge {
            display: inline-flex; align-items: center; gap: 3px;
            padding: 2px 7px; border-radius: 10px; font-size: 11px;
            font-weight: 700; cursor: pointer; border: none;
            white-space: nowrap; letter-spacing: 0.3px;
        }
        .poli-badge-bull  { background: var(--ok-soft); color: var(--ok); }
        .poli-badge-bear  { background: #fde0df; color: #7a1a1a; }
        .poli-badge-mixed { background: #fff3cd; color: #6b4c00; }
        [data-theme="dark"] .poli-badge-bull  { background: #1a3a22; color: var(--ok); }
        [data-theme="dark"] .poli-badge-bear  { background: #3a1a1a; color: #f08080; }
        [data-theme="dark"] .poli-badge-mixed { background: #3a3010; color: #e0c060; }

        /* ── Holdings inline expand panel ── */
        .politicker-panel-row td { padding: 0; border-top: none; }
        .politicker-panel-cell { padding: 0 !important; }
        .poli-inline-panel {
            border: 1px solid var(--border); border-top: none;
            background: var(--background-alt, var(--card-bg));
            padding: 12px 16px; border-radius: 0 0 6px 6px;
        }
        .poli-panel-header {
            display: flex; justify-content: space-between; align-items: center;
            font-weight: 600; font-size: 13px; margin-bottom: 6px;
        }
        .poli-panel-close {
            background: none; border: none; cursor: pointer; font-size: 18px;
            color: var(--text-secondary); line-height: 1; padding: 0 4px;
        }
        .poli-panel-footer { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
        .poli-window-note { font-weight: 400; color: var(--text-secondary); font-size: 12px; }
        .poli-trade-item  { padding: 8px 0; border-bottom: 1px solid var(--border); }
        .poli-trade-item:last-of-type { border-bottom: none; }
        .poli-trade-row   { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
        .poli-who         { font-weight: 600; font-size: 12px; }
        .poli-trade-dates { font-size: 11px; color: var(--text-secondary); }
        .poli-lag         { color: var(--warning, #e0a000); font-size: 11px; }
        .poli-filing-link { font-size: 11px; color: var(--primary); text-decoration: none; }
        .poli-filing-link:hover { text-decoration: underline; }
        .poli-amount      { font-size: 11px; color: var(--text-secondary); }

        /* ── Trade type pills ── */
        .poli-type { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
        .poli-type-buy  { background: var(--ok); color: var(--on-accent); }
        .poli-type-sell { background: var(--crit); color: var(--on-accent); }
        [data-theme="dark"] .poli-type-buy  { background: #047857; color: var(--ok); }
        [data-theme="dark"] .poli-type-sell { background: #b91c1c; color: var(--crit); }

        /* ── Disclaimer variants ── */
        .poli-disclaimer-short {
            font-size: 11px; color: var(--text-secondary);
            padding: 4px 0; margin-bottom: 6px;
        }
        .poli-disclaimer-full {
            font-size: 12px; color: var(--text-secondary);
            background: var(--background-alt, rgba(0,0,0,0.03));
            border: 1px solid var(--border); border-radius: 4px;
            padding: 8px 12px; margin-bottom: 12px; line-height: 1.6;
        }
        [data-theme="dark"] .poli-disclaimer-full { background: color-mix(in srgb, var(--ink) 4%, transparent); }

        /* ── Analyze tab sub-view toggle ── */
        .analyze-subview-toggle {
            display: flex; gap: 0; border-bottom: 2px solid var(--border);
            margin-bottom: 0;
        }
        .subview-btn {
            padding: 8px 18px; border: none; border-bottom: 2px solid transparent;
            background: none; cursor: pointer; font-size: 13px; font-weight: 500;
            color: var(--text-secondary); margin-bottom: -2px; border-radius: 0;
            transition: color 0.15s, border-color 0.15s;
        }
        .subview-btn:hover  { color: var(--text-primary); }
        /* UI Phase D — "underline, 2px accent on active" (was 3px, plus a
           raw Bootstrap-blue rgba(37,99,235,*) background tint neither Phase
           C pass caught since it didn't match either pass's search list).
           color-mix(var(--primary)) auto-flips for dark theme, so the
           separate dark-mode override this used to need is gone. */
        .subview-btn.active {
            color: var(--primary); border-bottom: 2px solid var(--primary);
            background: color-mix(in srgb, var(--primary) 5%, transparent); font-weight: 700;
            transition: border-color 0.15s, background 0.15s;
        }

        /* ── v4.34.0 (Initiative B) — Investment report tab bar. Reuses
           .analyze-subview-toggle/.subview-btn verbatim for the look; these two
           rules are spacing/visibility only. ── */
        .rep-tab-bar  { margin: 10px 0 16px; }
        .rep-tab-pane { }

        /* ── Analyze tab PoliTicker section ── */
        .politicker-section { margin-top: 20px; }
        .poli-section-meta  { font-size: 11px; font-weight: 400; color: var(--text-secondary); margin-left: 10px; }
        .poli-section-body  { margin-top: 10px; }
        .poli-loading       { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; padding: 12px 0; }
        .poli-no-trades     { padding: 12px 0; }
        .poli-cache-note    { font-size: 11px; color: var(--text-secondary); display: block; margin-bottom: 8px; }
        .poli-refresh-btn {
            background: none; border: 1px solid var(--border); border-radius: 4px;
            cursor: pointer; font-size: 11px; padding: 1px 6px; color: var(--primary);
            margin-left: 6px;
        }
        .poli-refresh-btn:hover { background: var(--primary); color: var(--on-accent); }

        /* ── Summary bar ── */
        .poli-summary-bar {
            display: flex; flex-wrap: wrap; gap: 16px;
            padding: 10px 14px; background: var(--background-alt, rgba(0,0,0,0.03));
            border: 1px solid var(--border); border-radius: 6px; margin-bottom: 14px;
        }
        [data-theme="dark"] .poli-summary-bar { background: color-mix(in srgb, var(--ink) 4%, transparent); }
        .poli-summary-period { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
        .poli-period-label   { font-weight: 700; color: var(--text-secondary); min-width: 110px; }
        .poli-stat-buys      { color: var(--ok); font-weight: 700; }
        .poli-stat-sells     { color: var(--crit); font-weight: 700; }
        .poli-stat-sep       { color: var(--text-secondary); }
        [data-theme="dark"] .poli-stat-buys  { color: var(--ok); }
        [data-theme="dark"] .poli-stat-sells { color: var(--crit); }
        .poli-sent-bull      { color: var(--ok); font-weight: 700; }
        .poli-sent-bear      { color: var(--crit); font-weight: 700; }
        .poli-sent-mod-bull  { color: #2e7d32; }
        .poli-sent-mod-bear  { color: #c62828; }
        .poli-sent-mixed     { color: var(--text-secondary); }
        [data-theme="dark"] .poli-sent-bull { color: var(--ok); }
        [data-theme="dark"] .poli-sent-bear { color: #f08080; }

        /* ── Trade table ── */
        .poli-table-wrap    { overflow-x: auto; }
        .poli-trade-table   { font-size: 12px; }
        .poli-table-lag     { color: var(--text-secondary); font-size: 11px; }
        .poli-amount-cell   { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
        .poli-chamber-badge { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 6px; }
        .poli-chamber-senate { background: var(--tag-blue-bg); color: var(--tag-blue-deep-text); }
        .poli-chamber-house  { background: var(--high-soft); color: var(--high); }
        [data-theme="dark"] .poli-chamber-senate { background: var(--tag-blue-bg); color: var(--tag-blue-deep-text); }
        [data-theme="dark"] .poli-chamber-house  { background: #3a2e10; color: var(--high); }

        /* ── Feed view ── */
        .poli-feed-controls {
            display: flex; flex-wrap: wrap; gap: 16px;
            padding: 10px 0 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
        }
        .poli-feed-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .poli-control-label     { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
        .poli-filter-btn {
            padding: 4px 12px; border: 1px solid var(--border); border-radius: 14px;
            background: none; cursor: pointer; font-size: 12px; color: var(--text-secondary);
            transition: all 0.15s;
        }
        .poli-filter-btn:hover  { border-color: var(--primary); color: var(--primary); }
        .poli-filter-btn.active { background: var(--primary); color: var(--on-accent); border-color: var(--primary); font-weight: 600; }
        .poli-feed-header       { margin-bottom: 14px; }
        /* ── v4.2.0 Feed card grid ── */
        .poli-feed-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        @media (max-width: 900px) { .poli-feed-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 580px) { .poli-feed-grid { grid-template-columns: 1fr; } }
        .poli-feed-card {
            padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px;
            background: var(--bg-surface); cursor: pointer;
            transition: border-color 0.15s, box-shadow 0.15s;
            display: flex; flex-direction: column; gap: 5px;
        }
        .poli-feed-card:hover {
            border-color: var(--primary);
            box-shadow: 0 2px 10px rgba(37,99,235,0.10);
        }
        [data-theme="dark"] .poli-feed-card:hover { box-shadow: 0 2px 10px rgba(96,165,250,0.12); }
        .poli-feed-card-top    { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
        .poli-feed-card-ticker { font-size: 16px; font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
        .poli-feed-card-meta   { font-size: 12px; color: var(--text-secondary); }
        .poli-feed-card-amount { font-size: 13px; font-weight: 600; }
        .poli-feed-card-dates  { font-size: 11px; color: var(--text-secondary); }
        .poli-feed-card-notable{ font-size: 11px; font-weight: 700; color: var(--high); margin-top: 2px; }
        [data-theme="dark"] .poli-feed-card-notable { color: var(--high); }
        /* ── v4.9.13 Institutional Discovery card grid (matches PoliTicker layout) ── */
        .inst-disc-card { cursor: default; }
        .inst-disc-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(37,99,235,0.10); }
        [data-theme="dark"] .inst-disc-card:hover { box-shadow: 0 2px 10px rgba(96,165,250,0.12); }
        .inst-card-ticker-label { font-size: 17px; font-weight: 800; }
        .inst-card-name  { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
        .inst-card-holding { font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .inst-card-meta  { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
        .inst-card-sep   { color: var(--text-muted); }
        .inst-card-qtr   { font-style: italic; }
        .inst-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
        /* Action badge — mirrors PoliTicker trade type pills */
        .inst-card-action-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; white-space: nowrap; }
        .inst-card-action-new  { background: var(--ok-soft); color: var(--ok); }
        .inst-card-action-add  { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
        .inst-card-action-red  { background: var(--crit-soft); color: var(--crit); }
        .inst-card-action-exit { background: var(--background-alt); color: var(--text-secondary); }
        [data-theme="dark"] .inst-card-action-new  { background: #052e16; color: var(--ok); }
        [data-theme="dark"] .inst-card-action-add  { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
        [data-theme="dark"] .inst-card-action-red  { background: #3b0f0f; color: var(--crit); }
        .inst-disc-card-grid { margin-top: 12px; }
        /* Count line shared by both views */
        .inst-disc-count { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

        /* Whale Consensus card extras */
        .inst-consensus-card { cursor: default; }
        .inst-consensus-val  { font-size: 13px; font-weight: 700; color: var(--text-primary); }
        .inst-consensus-whale-count { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }
        .inst-consensus-pills { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
        .inst-consensus-inst-pill {
            font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px;
            background: var(--primary-faint, rgba(37,99,235,0.08));
            color: var(--primary);
            border: 1px solid var(--primary-faint, rgba(37,99,235,0.15));
            white-space: nowrap;
        }
        [data-theme="dark"] .inst-consensus-inst-pill {
            background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.22); color: #93c5fd;
        }

        /* Keep legacy list styles for Whale Consensus view (still uses .inst-disc-row) */
        .poli-feed-item {
            padding: 12px 16px; border: 1px solid var(--border); border-radius: 6px;
            margin-bottom: 8px;
        }
        .poli-feed-item-top     { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
        .poli-feed-ticker       { font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .poli-feed-who          { font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; }
        .poli-feed-amount       { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
        .poli-feed-dates        { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; }
        .poli-feed-actions      { display: flex; gap: 8px; flex-wrap: wrap; }
        .poli-feed-footer       { font-size: 12px; color: var(--text-secondary); padding-top: 12px; border-top: 1px solid var(--border); margin-top: 4px; }

        /* ── Status tags on cards ── */
        .poli-status-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
        .poli-tag-holdings { background: var(--ok-soft); color: var(--ok); }
        .poli-tag-options  { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
        [data-theme="dark"] .poli-tag-holdings { background: #1a3a22; color: var(--ok); }
        [data-theme="dark"] .poli-tag-options  { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }

        /* ── v3.6.0 Phase E: Options play card PoliTicker signal line ── */
        .poli-play-signal {
            margin: 8px 0 4px;
            padding: 7px 10px;
            border-radius: 6px;
            border-left: 3px solid;
            font-size: 12px;
            line-height: 1.5;
        }
        .poli-play-signal.poli-signal-bull  { background: #f0faf2; border-color: #2e7d32; color: var(--ok); }
        .poli-play-signal.poli-signal-bear  { background: #fff5f5; border-color: #c62828; color: #7a1a1a; }
        .poli-play-signal.poli-signal-mixed { background: #fffbf0; border-color: #e0a000; color: #6b4c00; }
        [data-theme="dark"] .poli-play-signal.poli-signal-bull  { background: #0d2a14; border-color: #4caf50; color: #a5d6a7; }
        [data-theme="dark"] .poli-play-signal.poli-signal-bear  { background: #2a0d0d; border-color: #e57373; color: #ef9a9a; }
        [data-theme="dark"] .poli-play-signal.poli-signal-mixed { background: #2a2200; border-color: #ffd54f; color: #ffe082; }
        .poli-play-signal-icon { margin-right: 5px; }
        .poli-play-signal-text { font-weight: 500; }
        .poli-play-signal-lag  { font-size: 11px; opacity: 0.75; margin-top: 3px; padding-left: 18px; }

        /* ── v3.6.0 Phase I: Discovery Screener ── */
        .disc-header       { margin-bottom: 18px; }
        .disc-header h3    { margin: 0 0 4px; }
        .disc-scan-note    { font-size: 12px; color: var(--text-secondary); }
        .disc-filters {
            display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
            padding: 12px 14px; background: var(--background-alt);
            border: 1px solid var(--border); border-radius: 8px; margin-bottom: 16px;
        }
        .disc-filter-group { display: flex; align-items: center; gap: 6px; }
        .disc-filter-label { font-size: 11px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
        .disc-filter-group select { font-size: 12px; padding: 4px 6px; }
        .disc-filter-group label  { font-size: 12px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
        .disc-results-header {
            display: flex; justify-content: space-between; align-items: center;
            font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; flex-wrap: wrap; gap: 6px;
        }
        .disc-sort-group { display: flex; align-items: center; gap: 6px; }
        .disc-sort-btn {
            font-size: 11px; padding: 3px 8px; border-radius: 10px;
            border: 1px solid var(--border); background: transparent; cursor: pointer; color: var(--text-secondary);
        }
        .disc-sort-btn.active { background: var(--primary); color: var(--on-accent); border-color: var(--primary); font-weight: 600; }
        /* ── v4.2.0 Discovery card grid ── */
        .disc-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        @media (max-width: 900px) { .disc-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 580px) { .disc-grid { grid-template-columns: 1fr; } }
        /* Keep legacy disc-cards for backward compat */
        .disc-cards { display: flex; flex-direction: column; gap: 10px; }
        .disc-card {
            border: 1px solid var(--border); border-radius: 10px;
            padding: 14px 16px; background: var(--background-alt); position: relative;
        }
        .disc-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
        /* v4.2.0 Conviction score badge */
        .disc-conviction-badge {
            font-size: 28px; font-weight: 800; line-height: 1;
            padding: 6px 10px; border-radius: 8px; text-align: center;
            min-width: 52px;
        }
        /* Themed variants — replaces inline background/color */
        .disc-conviction-badge.conv-high { background: #f0fdf4; color: var(--ok); }
        .disc-conviction-badge.conv-mid  { background: #fffbeb; color: var(--high); }
        .disc-conviction-badge.conv-low  { background: #fef2f2; color: var(--crit); }
        [data-theme="dark"] .disc-conviction-badge.conv-high { background: #052e16; color: #4ade80; }
        [data-theme="dark"] .disc-conviction-badge.conv-mid  { background: #1c1407; color: var(--high); }
        [data-theme="dark"] .disc-conviction-badge.conv-low  { background: #1c0707; color: var(--crit); }
        .disc-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .disc-ticker { font-size: 18px; font-weight: 800; }
        .disc-entity { font-size: 13px; color: var(--text-secondary); }
        .disc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
        .disc-tag {
            font-size: 10px; font-weight: 700; padding: 2px 7px;
            border-radius: 10px; white-space: nowrap;
        }
        .disc-tag-holdings  { background: var(--ok-soft); color: var(--ok); }
        .disc-tag-scanlist  { background: var(--tag-blue-bg); color: var(--tag-blue-deep-text); }
        .disc-tag-watchlist { background: var(--tag-purple-bg); color: var(--tag-purple-text); }
        .disc-tag-notable   { background: var(--high-soft); color: var(--high); }
        .disc-tag-cluster   { background: var(--tag-rose-bg); color: var(--tag-rose-text); }
        .disc-tag-etf       { background: var(--background-alt); color: var(--text-secondary); }
        [data-theme="dark"] .disc-tag-holdings  { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .disc-tag-scanlist  { background: var(--tag-blue-bg); color: var(--tag-blue-deep-text); }
        [data-theme="dark"] .disc-tag-watchlist { background: var(--tag-purple-bg); color: var(--tag-purple-text); }
        [data-theme="dark"] .disc-tag-notable   { background: var(--high-soft); color: var(--high); }
        [data-theme="dark"] .disc-tag-cluster   { background: var(--tag-rose-bg); color: var(--crit); }
        .disc-score-block  { text-align: right; min-width: 120px; }
        .disc-score-label  { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
        .disc-score-val    { font-size: 20px; font-weight: 800; }
        .disc-score-tier   { font-size: 11px; font-weight: 600; margin-top: 2px; }
        .disc-bar-wrap { background: var(--border); border-radius: 4px; height: 6px; margin-top: 6px; overflow: hidden; }
        .disc-bar-fill { height: 6px; border-radius: 4px; transition: width 0.3s; }
        .poli-tier-vhigh .disc-bar-fill, .poli-tier-vhigh .disc-score-val, .poli-tier-vhigh .disc-score-tier { background: var(--ok); color: var(--ok); }
        .poli-tier-high  .disc-bar-fill, .poli-tier-high  .disc-score-val, .poli-tier-high  .disc-score-tier { background: #65a30d; color: #65a30d; }
        .poli-tier-mod   .disc-bar-fill, .poli-tier-mod   .disc-score-val, .poli-tier-mod   .disc-score-tier { background: var(--high); color: var(--high); }
        .poli-tier-low   .disc-bar-fill, .poli-tier-low   .disc-score-val, .poli-tier-low   .disc-score-tier { background: var(--text-secondary); color: var(--text-secondary); }
        .disc-bar-fill { background: inherit; }
        [data-theme="dark"] .poli-tier-vhigh .disc-score-val, [data-theme="dark"] .poli-tier-vhigh .disc-score-tier { color: #4ade80; }
        [data-theme="dark"] .poli-tier-high  .disc-score-val, [data-theme="dark"] .poli-tier-high  .disc-score-tier { color: #a3e635; }
        [data-theme="dark"] .poli-tier-mod   .disc-score-val, [data-theme="dark"] .poli-tier-mod   .disc-score-tier { color: var(--high); }
        .disc-stats { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; margin: 8px 0 10px; }
        .disc-stat  { display: flex; align-items: center; gap: 4px; }
        .disc-stat-icon { font-size: 14px; }
        .disc-card-disclaimer { font-size: 11px; color: var(--text-secondary); margin-bottom: 10px; }
        .disc-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .disc-card-actions button { font-size: 12px; }
        .disc-footer { font-size: 12px; color: var(--text-secondary); margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }

        /* ── v3.6.1 — Analysis mode checkboxes ── */
        .inv-mode-checkboxes {
            display: flex; align-items: center; gap: 16px;
            flex-wrap: wrap; padding: 4px 0;
        }
        .inv-mode-checkboxes label {
            display: flex; align-items: center; gap: 5px;
            font-size: 13px; font-weight: 500; cursor: pointer;
            user-select: none;
        }
        .inv-mode-checkboxes input[type="checkbox"] { cursor: pointer; }
        .inv-mode-label {
            font-weight: 700; font-size: 11px; text-transform: uppercase;
            letter-spacing: 0.5px; color: var(--text-secondary);
        }
        /* ── v3.7.0 — Market Pulse Bar ── */
        .market-pulse-bar-wrap {
            margin-bottom: 0;
        }
        .mp-bar {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            padding: 8px 14px; border-radius: 8px;
            background: var(--card-bg); border: 1px solid var(--border);
            font-size: 13px;
        }
        .mp-label {
            font-weight: 700; font-size: 11px; text-transform: uppercase;
            letter-spacing: 0.6px; color: var(--text-secondary);
            margin-right: 4px;
        }
        .mp-sep { color: var(--text-secondary); opacity: 0.4; }
        .mp-segment {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 3px 8px; border-radius: 5px;
            font-size: 12px; font-weight: 500;
        }
        .mp-regime { font-size: 11px; opacity: 0.8; }
        .mp-dim    { opacity: 0.45; font-style: italic; }
        .mp-loading { font-size: 12px; color: var(--text-secondary); padding: 6px 0; }

        /* VIX color classes */
        .vix-low      { background: var(--ok-soft); color: var(--ok); }
        .vix-normal   { background: var(--info-soft); color: var(--info); }
        .vix-elevated { background: var(--high-soft); color: #78350f; }
        .vix-high     { background: #fed7aa; color: #7c2d12; }
        .vix-fear     { background: var(--crit-soft); color: var(--crit); }
        .vix-crisis   { background: var(--crit-soft); color: var(--crit); font-weight: 700; }
        .mp-vix-off   { background: transparent; color: var(--text-secondary); padding: 3px 0; }
        [data-theme="dark"] .vix-low      { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .vix-normal   { background: var(--info-soft); color: var(--info); }
        [data-theme="dark"] .vix-elevated { background: var(--high-soft); color: var(--high); }
        [data-theme="dark"] .vix-high     { background: #431407; color: #fdba74; }
        [data-theme="dark"] .vix-fear     { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .vix-crisis   { background: #3b0000; color: var(--crit); font-weight: 700; }

        /* P/C color classes */
        .mp-pc-green   { background: var(--ok-soft); color: var(--ok); }
        .mp-pc-neutral { background: var(--background-alt, #f3f4f6); color: var(--text-secondary); }
        .mp-pc-yellow  { background: var(--high-soft); color: #78350f; }
        .mp-pc-red     { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .mp-pc-green   { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .mp-pc-yellow  { background: var(--high-soft); color: var(--high); }
        [data-theme="dark"] .mp-pc-red     { background: var(--crit-soft); color: var(--crit); }

        /* Earnings proximity segments */
        .mp-earn-info   { background: var(--info-soft); color: var(--info); }
        .mp-earn-warn   { background: var(--high-soft); color: #78350f; }
        .mp-earn-danger { background: var(--crit-soft); color: var(--crit); font-weight: 700; }
        [data-theme="dark"] .mp-earn-info   { background: var(--info-soft); color: var(--info); }
        [data-theme="dark"] .mp-earn-warn   { background: var(--high-soft); color: var(--high); }
        [data-theme="dark"] .mp-earn-danger { background: var(--crit-soft); color: var(--crit); }

        /* Refresh button */
        .mp-refresh-btn {
            background: none; border: none; cursor: pointer; font-size: 14px;
            color: var(--text-secondary); padding: 2px 4px; margin-left: auto;
            border-radius: 4px; opacity: 0.6; transition: opacity 0.15s;
        }
        .mp-refresh-btn:hover { opacity: 1; }

        /* ── v3.7.0 — Earnings proximity badges (inline in Holdings rows / play cards) ── */
        .earnings-badge {
            display: inline-block; font-size: 11px; font-weight: 600;
            padding: 2px 6px; border-radius: 4px; margin-left: 6px;
            white-space: nowrap;
        }
        .earnings-info   { background: var(--info-soft); color: var(--info); }
        .earnings-warn   { background: var(--high-soft); color: #78350f; }
        .earnings-danger { background: var(--crit-soft); color: var(--crit); }
        .earnings-today  { background: var(--crit-soft); color: var(--crit); animation: pulse-earn 1s infinite; }
        .earnings-post   { background: var(--info-soft); color: var(--info); }
        [data-theme="dark"] .earnings-info   { background: var(--info-soft); color: var(--info); }
        [data-theme="dark"] .earnings-warn   { background: var(--high-soft); color: var(--high); }
        [data-theme="dark"] .earnings-danger { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .earnings-today  { background: #3b0000; color: var(--crit); }
        [data-theme="dark"] .earnings-post   { background: var(--info-soft); color: var(--info); }
        @keyframes pulse-earn {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0.55; }
        }

        /* ── v3.8.0 — Smart Money Signals ── */

        /* Insider Trades section */
        .insider-section { margin-top: 16px; }
        .insider-section-body { margin-top: 10px; }
        .insider-no-key {
            font-size: 13px; color: var(--text-secondary);
            padding: 8px 0; margin-top: 6px;
        }
        .insider-no-key a { color: var(--accent, #2563eb); }

        .insider-table {
            width: 100%; border-collapse: collapse;
            font-size: 13px; margin-bottom: 10px;
        }
        .insider-table th {
            text-align: left; font-size: 11px; font-weight: 600;
            color: var(--text-secondary); text-transform: uppercase;
            letter-spacing: 0.04em; padding: 4px 8px 4px 0;
            border-bottom: 1px solid var(--border, #e5e7eb);
        }
        .insider-table td {
            padding: 6px 8px 6px 0;
            border-bottom: 1px solid var(--border, #e5e7eb);
            vertical-align: top;
        }
        .insider-table tr:last-child td { border-bottom: none; }
        .insider-name  { font-weight: 600; color: var(--text-primary); max-width: 160px; }
        .insider-title { color: var(--text-secondary); font-size: 12px; max-width: 140px; }
        .insider-value { font-weight: 600; text-align: right; white-space: nowrap; }
        .insider-date  { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }

        /* Buy / Sell badges */
        .insider-badge {
            display: inline-block; font-size: 11px; font-weight: 700;
            padding: 2px 7px; border-radius: 4px; letter-spacing: 0.03em;
        }
        .insider-badge.buy  { background: var(--ok); color: var(--on-accent); }
        .insider-badge.sell { background: var(--crit); color: var(--on-accent); }
        [data-theme="dark"] .insider-badge.buy  { background: #047857; color: var(--ok); }
        [data-theme="dark"] .insider-badge.sell { background: #b91c1c; color: var(--crit); }

        /* Signal bar at bottom of insider table */
        .insider-signal {
            display: flex; align-items: center; gap: 12px;
            font-size: 13px; font-weight: 600;
            padding: 7px 10px; border-radius: 6px; margin-top: 4px;
        }
        .insider-net-detail {
            font-weight: 400; font-size: 12px;
            color: inherit; opacity: 0.8;
        }
        .insider-bullish  { background: var(--ok-soft); color: var(--ok); }
        .insider-mild     { background: var(--info-soft); color: var(--info); }
        .insider-neutral  { background: var(--background-alt, #f3f4f6); color: var(--text-secondary); }
        .insider-bearish  { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .insider-bullish { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .insider-mild    { background: var(--info-soft); color: var(--info); }
        [data-theme="dark"] .insider-bearish { background: var(--crit-soft); color: var(--crit); }

        /* News Sentiment inline badge */
        .news-sent-badge {
            display: inline-block; font-size: 12px; font-weight: 600;
            padding: 2px 8px; border-radius: 4px; white-space: nowrap;
        }
        .news-sent-badge.loading          { color: var(--text-secondary); font-weight: 400; }
        .sent-strong-pos  { background: var(--ok-soft); color: var(--ok); }
        .sent-slight-pos  { background: var(--info-soft); color: var(--info); }
        .sent-neutral     { background: var(--background-alt, #f3f4f6); color: var(--text-secondary); }
        .sent-slight-neg  { background: var(--high-soft); color: #78350f; }
        .sent-strong-neg  { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .sent-strong-pos   { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .sent-slight-pos   { background: var(--info-soft); color: var(--info); }
        [data-theme="dark"] .sent-slight-neg   { background: var(--high-soft); color: var(--high); }
        [data-theme="dark"] .sent-strong-neg   { background: var(--crit-soft); color: var(--crit); }

        /* ── v3.9.0 — Macro Dashboard ── */
        .macro-section        { margin-top: 16px; }
        .macro-section-body   { margin-top: 10px; }
        .macro-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px 24px;
        }
        /* v4.9.8 — second row: same grid, separated by a small top margin */
        .macro-grid-row2 { margin-top: 8px; }
        @media (max-width: 520px) {
            .macro-grid { grid-template-columns: 1fr; }
        }
        .macro-item {
            display: flex; flex-direction: column; gap: 2px;
            padding: 8px 10px; border-radius: 6px;
            background: var(--background-alt, #f9fafb);
            border: 1px solid var(--border, #e5e7eb);
        }
        [data-theme="dark"] .macro-item {
            background: color-mix(in srgb, var(--ink) 4%, transparent);
            border-color: color-mix(in srgb, var(--ink) 10%, transparent);
        }
        .macro-label {
            font-size: 11px; font-weight: 600; text-transform: uppercase;
            letter-spacing: 0.05em; color: var(--text-secondary);
        }
        .macro-value {
            font-size: 14px; font-weight: 700; color: var(--text-primary);
        }
        .macro-footer {
            font-size: 11px; color: var(--text-secondary);
            margin-top: 8px; padding-top: 4px;
        }
        /* Signal colour classes */
        .macro-ok      { color: var(--ok); }
        .macro-warn    { color: var(--high); }
        .macro-neutral { color: var(--text-secondary); }
        .macro-danger  { color: var(--crit); }
        [data-theme="dark"] .macro-ok      { color: var(--ok); }
        [data-theme="dark"] .macro-warn    { color: var(--high); }
        [data-theme="dark"] .macro-danger  { color: var(--crit); }

        /* ── v4.3.5 — T2-3/T2-4/T2-5 Macro Signal Cards ── */
        .macro-signals-row {
            display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
        }
        .macro-signal-card {
            flex: 1 1 220px;
            display: flex; flex-direction: column; gap: 6px;
            padding: 12px 14px; border-radius: 8px;
            background: var(--background-alt, #f9fafb);
            border: 1px solid var(--border, #e5e7eb);
        }
        [data-theme="dark"] .macro-signal-card {
            background: color-mix(in srgb, var(--ink) 4%, transparent);
            border-color: color-mix(in srgb, var(--ink) 10%, transparent);
        }
        .macro-signal-header {
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px; flex-wrap: wrap;
        }
        .macro-signal-title {
            font-size: 12px; font-weight: 700; color: var(--text-primary);
            display: inline-flex; align-items: center;
        }
        /* market-pulse-risk-indicator-backlog.md §15 — AI Market Narrative.
           Sits alone above the macro-grid, not in the .macro-signals-row
           flex-wrap alongside the other signal cards, so it needs its own
           full-width override rather than that row's 220px flex-basis. */
        .market-narrative-card {
            flex: none; width: 100%; margin-bottom: 10px;
        }
        .market-narrative-text {
            font-size: 13px; line-height: 1.5; color: var(--text-primary);
        }
        .market-narrative-footer {
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px; margin-top: 2px; font-size: 11px;
        }
        .market-narrative-btn {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 4px 10px; font-size: 12px; font-weight: 600;
            border: 1px solid var(--border); border-radius: 6px;
            background: transparent; color: var(--text-primary); cursor: pointer;
        }
        .market-narrative-btn .material-symbols-outlined { font-size: 15px; }
        .market-narrative-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 5%, transparent); }
        .market-narrative-btn:disabled { opacity: 0.5; cursor: default; }
        /* Flat Material Symbols icons replacing emoji throughout Macro Context —
           see OptionsAnalyzerApp.MACRO_STATUS_ICON's docblock. */
        .macro-signal-icon {
            font-size: 16px; color: var(--text-secondary); margin-right: 4px;
        }
        .macro-icon-inline {
            font-size: 14px !important; vertical-align: -2px; margin: 0 1px;
        }
        .macro-info-icon {
            font-size: 14px !important; color: var(--text-muted); cursor: help;
            vertical-align: -2px; margin-left: 3px;
        }
        .macro-signal-badge {
            font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
            background: color-mix(in srgb, var(--ink) 5%, transparent); white-space: nowrap;
        }
        [data-theme="dark"] .macro-signal-badge { background: color-mix(in srgb, var(--ink) 8%, transparent); }
        .macro-signal-badge.macro-ok      { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent);   }
        .macro-signal-badge.macro-warn    { color: var(--high); background: rgba(217,119,6,0.1);   }
        .macro-signal-badge.macro-danger  { color: var(--crit); background: rgba(220,38,38,0.1);   }
        .macro-signal-badge.macro-neutral { color: var(--text-secondary); }
        [data-theme="dark"] .macro-signal-badge.macro-ok      { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent);  }
        [data-theme="dark"] .macro-signal-badge.macro-warn    { color: var(--high); background: rgba(251,191,36,0.12);  }
        [data-theme="dark"] .macro-signal-badge.macro-danger  { color: var(--crit); background: rgba(248,113,113,0.12); }
        .macro-signal-stat {
            font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1;
        }
        .macro-signal-row {
            display: flex; justify-content: space-between; align-items: center;
            font-size: 12px; color: var(--text-secondary); gap: 8px;
        }
        .macro-signal-row strong { color: var(--text-primary); font-weight: 600; }
        .macro-signal-sub  { font-size: 11px; color: var(--text-secondary); }
        .macro-signal-context {
            font-size: 11px; color: var(--text-secondary); line-height: 1.5;
            border-top: 1px solid var(--border, #e5e7eb);
            padding-top: 6px; margin-top: 2px;
        }
        [data-theme="dark"] .macro-signal-context { border-color: color-mix(in srgb, var(--ink) 8%, transparent); }

        /* ── v4.13.3 — Buffett Indicator enhanced card ── */
        .bi-card { min-width: 0; }
        .bi-body {
            display: flex; gap: 12px; align-items: flex-start;
        }
        /* Gauge SVG */
        .bi-gauge-wrap {
            display: flex; flex-direction: column; align-items: center;
            flex-shrink: 0; width: 112px;
        }
        .bi-gauge { width: 112px; height: auto; display: block; }
        .bi-kpi {
            font-size: 22px; font-weight: 800; color: var(--text-primary);
            line-height: 1; margin-top: -4px; text-align: center;
        }
        .bi-kpi-unit { font-size: 14px; font-weight: 600; }
        .bi-scale-labels {
            display: flex; justify-content: space-between;
            width: 100%; font-size: 9px; color: var(--text-secondary);
            margin-top: 2px; padding: 0 2px;
        }
        /* Details column */
        .bi-details { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
        .bi-series-label {
            font-size: 9px; font-family: var(--font-mono); color: var(--text-muted);
            background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 3px; padding: 1px 3px;
        }
        [data-theme="dark"] .bi-series-label { background: color-mix(in srgb, var(--ink) 8%, transparent); }
        .bi-official-date { font-size: 10px; font-weight: 400; color: var(--text-muted); }
        .bi-date-row strong { font-size: 12px; }
        /* Sparkline */
        .bi-sparkline-wrap { margin-top: 8px; }
        .bi-sparkline-label {
            font-size: 10px; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 3px;
        }
        .bi-sparkline { width: 100%; height: auto; display: block; overflow: visible; }
        .bi-sparkline-axis {
            display: flex; justify-content: space-between;
            font-size: 9px; color: var(--text-muted); margin-top: 1px;
        }
        /* Mobile: stack gauge above details on narrow screens */
        @media (max-width: 480px) {
            .bi-body {
                flex-direction: column;
                align-items: center;
            }
            .bi-gauge-wrap {
                width: 140px;
            }
            .bi-gauge { width: 140px; }
            .bi-kpi { font-size: 26px; }
            .bi-details { width: 100%; }
        }


        .institutional-section       { margin-top: 16px; }
        .institutional-section-body  { margin-top: 10px; }
        .inst-list    { display: flex; flex-direction: column; gap: 10px; }
        .inst-row {
            padding: 10px 12px; border-radius: 6px;
            border: 1px solid var(--border, #e5e7eb);
            background: var(--background-alt, #f9fafb);
        }
        [data-theme="dark"] .inst-row {
            background: color-mix(in srgb, var(--ink) 4%, transparent);
            border-color: color-mix(in srgb, var(--ink) 10%, transparent);
        }
        .inst-name {
            font-size: 14px; font-weight: 700;
            color: var(--text-primary); margin-bottom: 4px;
        }
        .inst-detail {
            display: flex; align-items: baseline;
            flex-wrap: wrap; gap: 4px 10px;
            font-size: 13px; margin-bottom: 4px;
        }
        .inst-shares { font-weight: 600; color: var(--text-primary); }
        .inst-value  { color: var(--text-secondary); }
        .inst-weight { color: var(--text-secondary); font-size: 12px; }
        .inst-meta {
            font-size: 11px; color: var(--text-secondary);
            margin-top: 2px;
        }
        .inst-fetch-error {
            font-size: 12px; color: var(--text-secondary);
            padding: 6px 8px; border-radius: 4px;
            background: color-mix(in srgb, var(--high) 8%, transparent);
            border-left: 3px solid var(--warning, var(--high));
            margin-bottom: 4px;
        }

        /* ── v3.9.1 — 46-Day Congressional Activity Panel ── */
        .act46-panel, .inst-disc-panel {
            border: 1px solid var(--border, #e5e7eb);
            border-radius: 10px; background: var(--background-alt, #f9fafb);
            padding: 14px 16px; margin-bottom: 16px;
        }
        [data-theme="dark"] .act46-panel, [data-theme="dark"] .inst-disc-panel {
            background: color-mix(in srgb, var(--ink) 3%, transparent);
            border-color: color-mix(in srgb, var(--ink) 10%, transparent);
        }
        .act46-panel-title, .inst-disc-panel-title {
            font-size: 14px; font-weight: 700; color: var(--text-primary);
            margin-bottom: 12px; display: flex; align-items: baseline;
            flex-wrap: wrap; gap: 6px;
        }
        .act46-panel-meta, .inst-disc-panel-meta {
            font-size: 11px; font-weight: 400; color: var(--text-secondary);
        }

        /* Toolbar + sort */
        .act46-toolbar {
            display: flex; justify-content: space-between; align-items: center;
            flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
        }
        .act46-count   { font-size: 12px; color: var(--text-secondary); }
        .act46-sort-group { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
        .act46-sort-btn {
            font-size: 11px; padding: 3px 8px; border-radius: 10px;
            border: 1px solid var(--border, #e5e7eb);
            background: transparent; cursor: pointer; color: var(--text-secondary);
        }
        .act46-sort-btn.active {
            background: var(--primary, #2563eb); color: var(--on-accent);
            border-color: var(--primary, #2563eb); font-weight: 600;
        }

        /* Activity rows */
        .act46-list    { display: flex; flex-direction: column; gap: 4px; }
        .act46-row     { border: 1px solid var(--border, #e5e7eb); border-radius: 7px; overflow: hidden; }
        .act46-row-header {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            padding: 8px 12px; cursor: pointer; background: var(--background, #fff);
            user-select: none;
        }
        .act46-row-header:hover { background: var(--background-alt, #f9fafb); }
        [data-theme="dark"] .act46-row-header { background: var(--background, #1a1f2e); }
        [data-theme="dark"] .act46-row-header:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

        .act46-row-chevron { font-size: 10px; color: var(--text-secondary); min-width: 10px; }
        .act46-ticker    { font-size: 14px; font-weight: 800; min-width: 52px; }
        .act46-col       { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
        .act46-col-vol   { font-weight: 600; color: var(--text-primary); }
        .act46-buy-num   { color: var(--ok); font-weight: 700; }
        .act46-sell-num  { color: var(--crit); font-weight: 700; }
        .act46-net       { font-size: 11px; font-weight: 700; padding: 2px 8px;
                           border-radius: 10px; white-space: nowrap; margin-left: auto; }
        .act46-net-buy   { background: var(--ok-soft); color: var(--ok); }
        .act46-net-sell  { background: var(--crit-soft); color: var(--crit); }
        .act46-net-mixed { background: var(--background-alt, #f3f4f6); color: var(--text-secondary); }
        [data-theme="dark"] .act46-net-buy  { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .act46-net-sell { background: var(--crit-soft); color: var(--crit); }

        /* Expanded detail within a row */
        .act46-row-detail  { background: var(--background-alt, #f9fafb); padding: 8px 12px; }
        [data-theme="dark"] .act46-row-detail { background: color-mix(in srgb, var(--ink) 3%, transparent); }
        .act46-row-actions { padding: 8px 0 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

        /* Trader rows */
        .act46-trader-row   { border-top: 1px solid var(--border, #e5e7eb); }
        .act46-trader-row:first-child { border-top: none; }
        .act46-trader-header {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            padding: 6px 4px; cursor: pointer; user-select: none;
        }
        .act46-trader-header:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); border-radius: 4px; }
        [data-theme="dark"] .act46-trader-header:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
        .act46-trader-chevron { font-size: 9px; color: var(--text-secondary); min-width: 9px; }
        .act46-trader-name  { font-size: 13px; font-weight: 600; flex: 1; }
        .act46-trader-stats { font-size: 11px; color: var(--text-secondary); }
        .act46-trader-est   { font-size: 12px; font-weight: 600; margin-left: auto; white-space: nowrap; }

        .act46-badge { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
        .act46-badge-buy   { background: var(--ok-soft); color: var(--ok); }
        .act46-badge-sell  { background: var(--crit-soft); color: var(--crit); }
        .act46-badge-mixed { background: var(--info-soft); color: var(--info); }
        [data-theme="dark"] .act46-badge-buy  { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .act46-badge-sell { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .act46-badge-mixed{ background: var(--info-soft); color: var(--info); }

        /* Transaction detail rows */
        .act46-trader-detail { padding: 4px 12px 8px; }
        .act46-tx-row {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            padding: 4px 0; border-top: 1px solid var(--border, #e5e7eb);
            font-size: 12px;
        }
        .act46-tx-row:first-child { border-top: none; }
        .act46-tx-date { color: var(--text-secondary); min-width: 48px; }
        .act46-tx-buy  { font-weight: 700; color: var(--ok); }
        .act46-tx-sell { font-weight: 700; color: var(--crit); }
        .act46-tx-amt  { color: var(--text-primary); }
        .act46-link    { font-size: 11px; color: var(--accent, #2563eb); }
        .act46-empty   { font-size: 13px; color: var(--text-secondary); padding: 8px 0; }

        /* ── v3.9.1 — Institutional 13F Changes Panel ── */
        .inst-disc-count {
            font-size: 12px; color: var(--text-secondary); margin-bottom: 8px;
        }
        .inst-disc-list { display: flex; flex-direction: column; gap: 4px; }
        .inst-disc-row  {
            border: 1px solid var(--border, #e5e7eb);
            border-radius: 7px; overflow: hidden;
        }
        .inst-disc-row-header {
            display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            padding: 8px 12px; cursor: pointer; background: var(--background, #fff);
            user-select: none;
        }
        .inst-disc-row-header:hover { background: var(--background-alt, #f9fafb); }
        [data-theme="dark"] .inst-disc-row-header { background: var(--background, #1a1f2e); }
        [data-theme="dark"] .inst-disc-row-header:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
        .inst-disc-chevron { font-size: 10px; color: var(--text-secondary); min-width: 10px; }
        .inst-disc-inst    { font-size: 12px; font-weight: 700; min-width: 80px; color: var(--text-secondary); }
        .inst-disc-ticker  { font-size: 14px; font-weight: 800; min-width: 60px; }
        .inst-disc-action  { font-size: 12px; font-weight: 600; flex: 1; }
        .inst-disc-val     { font-size: 13px; font-weight: 700; white-space: nowrap; }
        .inst-disc-qtr     { font-size: 11px; color: var(--text-secondary); white-space: nowrap; margin-left: auto; }
        .inst-disc-added   { color: var(--ok); }
        .inst-disc-reduced { color: var(--crit); }
        [data-theme="dark"] .inst-disc-added   { color: var(--ok); }
        [data-theme="dark"] .inst-disc-reduced { color: var(--crit); }

        /* ── v4.3.7 — T2-7 Whale Consensus View ─────────────────── */
        .inst-view-toggle { display: flex; gap: 5px; }
        .inst-view-btn { font-size: 11px; padding: 2px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-secondary); cursor: pointer; font-weight: 600; transition: background .15s, color .15s; }
        .inst-view-btn.active { background: var(--accent, #3b82f6); color: var(--on-accent); border-color: var(--accent, #3b82f6); }
        [data-theme="dark"] .inst-view-btn.active { background: var(--accent); border-color: var(--accent); }
        .inst-consensus-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
        .inst-consensus-th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); text-align: left; padding: 5px 8px; border-bottom: 2px solid var(--border); white-space: nowrap; }
        .inst-consensus-td { padding: 8px 8px; border-bottom: 1px solid var(--border, #f3f4f6); vertical-align: middle; }
        .inst-consensus-row:hover .inst-consensus-td { background: var(--background-alt, #f9fafb); }
        [data-theme="dark"] .inst-consensus-row:hover .inst-consensus-td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
        .inst-conviction-badge { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; white-space: nowrap; display: inline-block; }
        .inst-conviction-high    { background: var(--high-soft); color: var(--high); }
        .inst-conviction-cluster { background: color-mix(in srgb, var(--info) 8%, transparent); color: var(--info); }
        [data-theme="dark"] .inst-conviction-high    { background: rgba(251,191,36,0.18);  color: var(--high); }
        [data-theme="dark"] .inst-conviction-cluster { background: color-mix(in srgb, var(--info) 15%, transparent);  color: var(--info); }

        /* ── 13F Filing-Window Guard card ────────────────────────── */
        .inst-window-guard {
            display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start;
            background: var(--background-alt, #f9fafb);
            border: 1px solid var(--border); border-radius: 8px;
            padding: 16px 18px; margin-top: 8px;
        }
        [data-theme="dark"] .inst-window-guard { background: color-mix(in srgb, var(--ink) 4%, transparent); }
        .inst-window-guard-icon { font-size: 22px; color: var(--text-secondary); margin-top: 1px; flex-shrink: 0; }
        .inst-window-guard-body { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.6; }
        .inst-window-guard-body strong { font-size: 14px; display: block; margin-bottom: 4px; color: var(--text-primary); }
        .inst-window-guard-body p { margin: 0 0 4px; color: var(--text-secondary); }
        .inst-window-guard-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%; padding-top: 4px; }

        /* ── Stock Screens (Watchlist tab) ────────────────────────── */
        .stock-screens-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; border-bottom: 2px solid var(--border); margin-bottom: 2px; }
        .stock-screens-table { width: 100%; border-collapse: collapse; font-size: 12px; }
        .stock-screens-th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); text-align: left; padding: 5px 8px; border-bottom: 2px solid var(--border); white-space: nowrap; }
        .stock-screens-td { padding: 7px 8px; border-bottom: 1px solid var(--border, #f3f4f6); vertical-align: middle; white-space: nowrap; }
        .stock-screens-row:hover .stock-screens-td { background: var(--background-alt, #f9fafb); }
        [data-theme="dark"] .stock-screens-row:hover .stock-screens-td { background: color-mix(in srgb, var(--ink) 4%, transparent); }

        .inst-disc-detail  {
            background: var(--background-alt, #f9fafb);
            padding: 10px 14px; font-size: 12px;
        }
        [data-theme="dark"] .inst-disc-detail { background: color-mix(in srgb, var(--ink) 3%, transparent); }
        .inst-disc-detail-grid { display: flex; flex-direction: column; gap: 5px; }
        .inst-disc-dl          { font-weight: 600; color: var(--text-secondary); }
        .inst-disc-detail-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

        /* ── v4.0.0 — Traffic Light Master Signal ────────────────── */
        /* v4.10 (Session A.6) — float:right replaced with margin-left:10px to
         * match the inv-gate-summary pattern. Floated children were orphaning
         * onto the previous page in PDF exports because float doesn't respect
         * the parent's page-break-inside:avoid. */
        .tl-master {
            margin-left: 10px; font-size: 12px; font-weight: 600;
            padding: 3px 10px; border-radius: 12px; vertical-align: middle;
        }
        .tl-all-green   { background: var(--ok-soft); color: var(--ok); }
        .tl-mostly-green{ background: #ecfdf5; color: #047857; }
        .tl-mixed       { background: var(--high-soft); color: #854d0e; }
        .tl-mostly-red  { background: #fef2f2; color: var(--crit); }
        .tl-all-red     { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .tl-all-green    { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .tl-mostly-green { background: #022c22; color: var(--ok); }
        [data-theme="dark"] .tl-mixed        { background: #3b2f00; color: var(--high); }
        [data-theme="dark"] .tl-mostly-red   { background: #3b0a0a; color: var(--crit); }
        [data-theme="dark"] .tl-all-red      { background: var(--crit-soft); color: var(--crit); }

        /* ── v4.0.0 — Trend Template + Accumulation rows ─────────── */
        .tt-extra-rows { margin-top: 10px; border-top: 1px solid var(--border, #e5e7eb); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
        .tt-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
        .tt-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 180px; padding-top: 2px; }
        .tt-badge { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
        .tt-pass     { background: var(--ok-soft); color: var(--ok); }
        .tt-fail     { background: var(--crit-soft); color: var(--crit); }
        .acc-confirmed { background: var(--ok-soft); color: var(--ok); }
        .acc-neutral   { background: var(--background-alt); color: var(--text-secondary); }
        .acc-weak      { background: #f9fafb; color: var(--text-muted); }
        [data-theme="dark"] .tt-pass      { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .tt-fail      { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .acc-confirmed{ background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .acc-neutral  { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--text-secondary); }
        [data-theme="dark"] .acc-weak     { background: color-mix(in srgb, var(--ink) 3%, transparent); color: var(--text-muted); }
        .tt-conditions { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
        .tt-cond { font-size: 11px; padding: 2px 7px; border-radius: 8px; white-space: nowrap; }
        .tt-cond-pass { background: #f0fdf4; color: var(--ok); }
        .tt-cond-fail { background: #fef2f2; color: var(--crit); }
        [data-theme="dark"] .tt-cond-pass { background: #052e16; color: var(--ok); }
        [data-theme="dark"] .tt-cond-fail { background: #300a0a; color: var(--crit); }
        /* Remediation 4e — dataQuality caveat: a FAIL from thin price history reads
           differently from a FAIL on a real downtrend. */
        .tt-dataquality { font-size: 11px; font-style: italic; color: var(--text-muted); white-space: nowrap; }

        /* ── v4.0.0 — P/E Band bar ────────────────────────────────── */
        .pe-band-row { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border, #e5e7eb); }
        .pe-band-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; flex-wrap: wrap; gap: 4px; }
        .pe-band-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
        .pe-band-summary { font-size: 12px; font-weight: 600; }
        .pe-high { color: var(--crit); }
        .pe-mid  { color: var(--high); }
        .pe-low  { color: var(--ok); }
        [data-theme="dark"] .pe-high { color: var(--crit); }
        [data-theme="dark"] .pe-mid  { color: var(--high); }
        [data-theme="dark"] .pe-low  { color: var(--ok); }
        .pe-band-track { position: relative; height: 10px; background: var(--background-alt, #f3f4f6); border-radius: 5px; overflow: visible; margin-bottom: 4px; }
        .pe-band-fill  { height: 100%; background: linear-gradient(90deg, #3b82f6, #8b5cf6); border-radius: 5px; opacity: 0.7; }
        .pe-band-avg-line { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--warning, var(--high)); border-radius: 1px; }
        .pe-band-labels { position: relative; display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); }

        /* ── v4.0.0 — PEG Ratio row ───────────────────────────────── */
        .peg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, #e5e7eb); }
        .peg-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
        .peg-value { font-size: 15px; font-weight: 800; padding: 1px 8px; border-radius: 8px; }
        .peg-buy  { background: var(--ok-soft); color: var(--ok); }
        .peg-fair { background: var(--high-soft); color: #854d0e; }
        .peg-over { background: var(--crit-soft); color: var(--crit); }
        .peg-na   { background: var(--background-alt, #f3f4f6); color: var(--text-muted); font-size: 13px; }
        [data-theme="dark"] .peg-buy  { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .peg-fair { background: #3b2f00; color: var(--high); }
        [data-theme="dark"] .peg-over { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .peg-na   { background: color-mix(in srgb, var(--ink) 6%, transparent); }
        .peg-interp { font-size: 12px; color: var(--text-secondary); }

        /* ── v4.0.0 — Wall Street Consensus section ───────────────── */
        .ws-section { margin-top: 16px; }
        .ws-section-body { margin-top: 10px; }
        .ws-no-key { font-size: 13px; color: var(--text-secondary); padding: 8px 0; }
        .ws-no-key a { color: var(--accent, #2563eb); }
        .ws-consensus-block { margin-bottom: 10px; }
        .ws-consensus-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .ws-consensus-badge { font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 12px; }
        .ws-con-bull { background: var(--ok-soft); color: var(--ok); }
        .ws-con-bear { background: var(--crit-soft); color: var(--crit); }
        .ws-con-hold { background: var(--high-soft); color: #854d0e; }
        [data-theme="dark"] .ws-con-bull { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .ws-con-bear { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .ws-con-hold { background: #3b2f00; color: var(--high); }
        .ws-consensus-meta { font-size: 12px; color: var(--text-secondary); }
        .ws-rating-bar-wrap { display: flex; flex-direction: column; gap: 4px; }
        .ws-rating-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--background-alt, #f3f4f6); }
        .ws-rb-seg { height: 100%; min-width: 2px; }
        .ws-sb  { background: var(--ok); }
        .ws-b   { background: var(--ok); }
        .ws-h   { background: var(--gap); }
        .ws-s   { background: var(--chart-rating-sell-bg); }
        .ws-ss  { background: var(--crit); }
        .ws-rating-legend { display: flex; gap: 8px; flex-wrap: wrap; }
        .ws-leg-item { font-size: 11px; font-weight: 600; }
        .ws-sb-text  { color: var(--ok); }
        .ws-b-text   { color: var(--ok); }
        .ws-h-text   { color: var(--text-secondary); }
        .ws-s-text   { color: var(--chart-rating-sell-text); }
        .ws-ss-text  { color: var(--crit); }
        [data-theme="dark"] .ws-sb-text  { color: var(--ok); }
        [data-theme="dark"] .ws-b-text   { color: var(--ok); }
        [data-theme="dark"] .ws-s-text   { color: var(--chart-rating-sell-text); }
        [data-theme="dark"] .ws-ss-text  { color: var(--crit); }
        .ws-pt-block { margin-bottom: 8px; }
        .ws-pt-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
        .ws-pt-label { font-weight: 600; color: var(--text-secondary); }
        .ws-pt-low, .ws-pt-high { color: var(--text-secondary); }
        .ws-pt-med  { color: var(--text-primary); }
        .ws-pt-sep  { color: var(--text-muted); }
        .ws-upside-pos { font-weight: 700; color: var(--ok); }
        .ws-upside-neg { font-weight: 700; color: var(--crit); }
        [data-theme="dark"] .ws-upside-pos { color: var(--ok); }
        [data-theme="dark"] .ws-upside-neg { color: var(--crit); }
        .ws-si-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
        .ws-si-label  { font-weight: 600; color: var(--text-secondary); }
        .ws-si-pct    { font-weight: 800; padding: 1px 7px; border-radius: 8px; }
        .ws-si-interp { font-size: 12px; color: var(--text-secondary); }
        .si-low       { background: var(--ok-soft); color: var(--ok); }
        .si-moderate  { background: var(--high-soft); color: #854d0e; }
        .si-high      { background: var(--crit-soft); color: var(--crit); }
        .si-very-high { background: var(--crit); color: var(--on-accent); }
        [data-theme="dark"] .si-low       { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .si-moderate  { background: #3b2f00; color: var(--high); }
        [data-theme="dark"] .si-high      { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .si-very-high { background: var(--crit-soft); color: var(--crit); }

        /* ── v4.1.0-I — Dark mode refinements ───────────────────────── */
        [data-theme="dark"] .inv-m-card { background: color-mix(in srgb, var(--ink) 3%, transparent); border-color: color-mix(in srgb, var(--ink) 8%, transparent); }
        [data-theme="dark"] button.primary,
        [data-theme="dark"] .btn-primary { background: #1e3a8a; }

        /* ── v4.1.0-B — Skeleton shimmer for async sections ─────────── */
        @keyframes shimmer {
            0%   { background-position: -600px 0; }
            100% { background-position:  600px 0; }
        }
        .skeleton-shimmer {
            background: linear-gradient(90deg,
                var(--background-alt, #f3f4f6) 25%,
                rgba(255,255,255,0.6) 50%,
                var(--background-alt, #f3f4f6) 75%);
            background-size: 600px 100%;
            animation: shimmer 1.4s infinite linear;
            border-radius: 4px; height: 14px; margin: 5px 0;
        }
        [data-theme="dark"] .skeleton-shimmer {
            background: linear-gradient(90deg,
                color-mix(in srgb, var(--ink) 4%, transparent) 25%,
                color-mix(in srgb, var(--ink) 10%, transparent) 50%,
                color-mix(in srgb, var(--ink) 4%, transparent) 75%);
            background-size: 600px 100%;
        }
        .skeleton-block { padding: 14px 0 6px; display: flex; flex-direction: column; gap: 8px; }
        .skeleton-shimmer.sk-wide  { width: 70%; }
        .skeleton-shimmer.sk-med   { width: 50%; }
        .skeleton-shimmer.sk-narrow{ width: 35%; }
        .skeleton-shimmer.sk-tall  { height: 20px; }

        /* ── v4.1.0-A — Price change pills ──────────────────────────── */
        .price-change-pill {
            display: inline-block; font-size: 11px; font-weight: 700;
            padding: 1px 6px; border-radius: 8px; white-space: nowrap; margin-left: 5px;
        }
        .pill-up   { background: var(--ok-soft); color: var(--ok); }
        .pill-down { background: var(--crit-soft); color: var(--crit); }
        [data-theme="dark"] .pill-up   { background: var(--ok-soft); color: var(--ok); }
        [data-theme="dark"] .pill-down { background: var(--crit-soft); color: var(--crit); }

        /* ── v4.1.0-B — Big Five pip dots. UI Phase D: added .hatched — a
           criterion that couldn't be MEASURED (no data) now reads differently
           from one that was measured and FAILED, instead of both collapsing
           into the same dim "empty" dot (Remediation Phase 4e's own
           availableCriteria field exists precisely to make this distinction;
           this is the first surface that actually renders it). ────────────── */
        .b5-pips { display: inline-flex; gap: 3px; align-items: center; vertical-align: middle; }
        .b5-pip  {
            width: 8px; height: 8px; border-radius: var(--radius-badge, 2px);
            display: inline-block; flex-shrink: 0;
        }
        .b5-pip.filled   { background: var(--ok); border: 1px solid var(--ok); }
        .b5-pip.empty    { background: var(--gap); border: 1px solid var(--rule-strong); }
        .b5-pip.hatched  {
            background: repeating-linear-gradient(45deg, var(--gap) 0, var(--gap) 1px, transparent 1px, transparent 2px);
            border: 1px solid var(--rule-strong);
        }
        .b5-pip-5 .b5-pip.filled { background: var(--ok); border-color: var(--ok); }
        .b5-pip-4 .b5-pip.filled { background: var(--ok); border-color: var(--ok); }
        .b5-pip-3 .b5-pip.filled { background: var(--high); border-color: var(--high); }
        .b5-pip-2 .b5-pip.filled,
        .b5-pip-1 .b5-pip.filled { background: var(--crit); border-color: var(--crit); }

        /* ── v4.1.0-D — Holdings sortable columns ────────────────────── */
        .holdings-th-sort {
            cursor: pointer; user-select: none;
            white-space: nowrap;
        }
        .holdings-th-sort:hover { color: var(--primary); }
        .sort-arrow { font-size: 10px; margin-left: 3px; color: var(--text-muted); }
        .sort-arrow.active { color: var(--primary); }
        /* Split Signal / Big5 header */
        .holdings-th-sort-split { white-space: nowrap; }
        .holdings-th-sort-divider { color: var(--text-muted); margin: 0 3px; font-weight: 400; }

        /* ── v4.1.0-C — Jump-to anchor nav ──────────────────────────── */
        .analyze-jump-nav {
            display: flex; flex-wrap: wrap; gap: 6px;
            padding: 8px 14px; margin-bottom: 14px;
            background: var(--background-alt, #f9fafb);
            border: 1px solid var(--border); border-radius: 8px;
        }
        [data-theme="dark"] .analyze-jump-nav { background: color-mix(in srgb, var(--ink) 3%, transparent); }
        .jump-nav-label { font-size: 11px; font-weight: 700; color: var(--text-muted); align-self: center; margin-right: 4px; white-space: nowrap; }
        .jump-nav-pill {
            font-size: 11px; font-weight: 600; padding: 4px 14px; border-radius: 10px;
            border: 1px solid var(--border); background: var(--background);
            color: var(--text-secondary); cursor: pointer; text-decoration: none;
            transition: background 0.12s, color 0.12s, border-color 0.12s;
            white-space: nowrap;
        }
        .jump-nav-pill:hover { background: var(--primary); color: var(--on-accent); border-color: var(--primary); }

        /* UI-7: Four Ms featured section */
        .inv-section.featured-section {
            border-left: 3px solid var(--primary);
        }

        /* ── v4.1.0-H — Sticky analyze bar ──────────────────────────── */
        .analyze-sticky-bar {
            position: sticky; top: 0; z-index: 100;
            display: none; align-items: center; gap: 12px; flex-wrap: wrap;
            padding: 7px 14px;
            background: var(--background);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 2px 6px color-mix(in srgb, black 6%, transparent);
            font-size: 13px;
        }
        .analyze-sticky-bar.visible { display: flex; }
        .sticky-ticker { font-weight: 800; font-size: 15px; color: var(--text-primary); }
        .sticky-price  { font-weight: 700; color: var(--text-primary); }
        .sticky-actions { display: flex; gap: 6px; margin-left: auto; }
        [data-theme="dark"] .analyze-sticky-bar { box-shadow: 0 2px 6px color-mix(in srgb, black 30%, transparent); }

        /* ── v4.1.0-C — Collapsible Four Ms ─────────────────────────── */
        .m-section-toggle {
            cursor: pointer; user-select: none;
            display: flex; align-items: center; justify-content: space-between;
            padding: 8px 12px; margin: -8px -12px 8px;
            border-radius: 6px; transition: background 0.12s;
        }
        .m-section-toggle:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
        [data-theme="dark"] .m-section-toggle:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
        .m-toggle-left  { display: flex; align-items: center; gap: 8px; }
        .m-toggle-icon  { font-size: 14px; transition: transform 0.2s; display: inline-block; color: var(--text-muted); }
        .m-section-collapsed .m-toggle-icon { transform: rotate(-90deg); }
        .m-toggle-summary { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
        .m-pass-icon { font-size: 13px; }
        .m-pass-icon.pass    { color: var(--ok); }
        .m-pass-icon.fail    { color: var(--crit); }
        .m-pass-icon.unclear { color: var(--high); }
        .m-section-body { overflow: hidden; transition: max-height 0.25s ease; }

        /* ── Cockpit UI (v4.37.0) — Interactive Valuation Cockpit ─────── */
        .cockpit-toggle {
            cursor: pointer; user-select: none;
            display: flex; align-items: center; justify-content: space-between;
            padding: 8px 12px; margin: -8px -12px 8px;
            border-radius: 6px; transition: background 0.12s;
        }
        .cockpit-toggle:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
        [data-theme="dark"] .cockpit-toggle:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
        .cockpit-toggle-left  { display: flex; align-items: center; gap: 8px; }
        .cockpit-toggle-icon  { font-size: 14px; transition: transform 0.2s; display: inline-block; color: var(--text-muted); }
        .cockpit-collapsed .cockpit-toggle-icon { transform: rotate(-90deg); }
        .cockpit-toggle-summary { font-size: 12px; color: var(--text-secondary); font-weight: 400; }

        .cockpit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
        .cockpit-col { min-width: 0; }

        .cockpit-scenario-pills { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
        .cockpit-pill {
            padding: 5px 14px; border-radius: 999px;
            border: 1px solid var(--border);
            background: var(--bg-surface); color: var(--text-secondary);
            font-size: 12px; font-weight: 600; cursor: pointer;
            transition: background 0.12s, color 0.12s, border-color 0.12s;
        }
        .cockpit-pill:hover { border-color: var(--primary); color: var(--primary); }
        .cockpit-pill.active { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }

        /* 2026-08-17 — Saved scenario pill's clear icon */
        .cockpit-saved-pill-wrap { display: inline-flex; align-items: center; gap: 3px; }
        .cockpit-saved-clear {
            font-size: 15px !important;
            cursor: pointer;
            color: var(--text-secondary);
            opacity: 0.5;
            transition: opacity 0.12s, color 0.12s;
        }
        .cockpit-saved-clear:hover { opacity: 1; color: var(--danger); }

        .cockpit-slider-row {
            margin-bottom: 16px; padding: 8px 10px;
            border-radius: 6px; border: 1px solid transparent;
            transition: background 0.15s, border-color 0.15s;
        }
        .cockpit-slider-row.touched { background: rgba(201,106,58,0.07); border-color: var(--primary); }
        [data-theme="dark"] .cockpit-slider-row.touched { background: rgba(232,145,106,0.10); }

        .cockpit-slider-label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
        .cockpit-slider-label { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
        .cockpit-slider-value { font-size: 13px; color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

        .cockpit-slider {
            -webkit-appearance: none; appearance: none;
            width: 100%; height: 4px; border-radius: 2px;
            background: var(--border); outline: none; cursor: pointer;
        }
        .cockpit-slider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 16px; height: 16px; border-radius: 50%;
            background: var(--primary); border: 2px solid var(--bg-surface);
            box-shadow: 0 0 0 1px var(--primary); cursor: pointer;
        }
        .cockpit-slider::-moz-range-thumb {
            width: 16px; height: 16px; border-radius: 50%;
            background: var(--primary); border: 2px solid var(--bg-surface);
            box-shadow: 0 0 0 1px var(--primary); cursor: pointer;
        }
        .cockpit-slider::-moz-range-track { background: var(--border); height: 4px; border-radius: 2px; }

        .cockpit-derived-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 8px 10px; margin-bottom: 16px;
            background: var(--background); border-radius: 6px; border: 1px dashed var(--border);
        }
        .cockpit-derived-tag { font-size: 10px; color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; }
        .cockpit-derived-value { font-size: 13px; color: var(--text-secondary); font-weight: 700; font-variant-numeric: tabular-nums; }

        .cockpit-action-row { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
        .cockpit-reset-btn, .cockpit-save-btn { margin-top: 0; }

        .cockpit-verdict-card {
            padding: 14px 16px; border-radius: 8px;
            border-left: 4px solid var(--border);
            background: var(--background); margin-bottom: 16px;
        }
        .cockpit-verdict-card.on-sale    { border-left-color: var(--success); }
        .cockpit-verdict-card.fair-value { border-left-color: var(--high); }
        .cockpit-verdict-card.overvalued { border-left-color: var(--danger); }
        .cockpit-verdict-tag { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
        .cockpit-verdict-card.on-sale    .cockpit-verdict-tag { color: var(--success); }
        .cockpit-verdict-card.fair-value .cockpit-verdict-tag { color: var(--high); }
        .cockpit-verdict-card.overvalued .cockpit-verdict-tag { color: var(--danger); }
        .cockpit-verdict-prices { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); }
        .cockpit-touched-note {
            margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border);
            font-size: 11px; color: var(--text-muted); font-style: italic;
        }

        .cockpit-directives { display: flex; flex-direction: column; gap: 10px; }
        .cockpit-directive {
            font-size: 13px; line-height: 1.5; color: var(--text-secondary);
            padding: 10px 12px; background: var(--bg-surface);
            border: 1px solid var(--border); border-radius: 6px;
        }
        .cockpit-directive-label {
            display: block; font-size: 10px; font-weight: 800;
            text-transform: uppercase; letter-spacing: 0.06em;
            color: var(--primary); margin-bottom: 4px;
        }
        @media (max-width: 860px) {
            .cockpit-grid { grid-template-columns: 1fr; }
        }

/* ── Brand wordmark — text-based, per user decision 2026-08-30: the square
   icon (UI Phase F) read as too large in the sidebar, and its baked-in
   tagline was illegible at every size actually used — reverted to the
   original text treatment, recolored to the ledger palette (var(--accent),
   the same "ledger indigo" the icon's own arrow was recolored to) instead
   of the old hardcoded terracotta (#C96A3A/#E8916A). Barlow Condensed (the
   original wordmark font) is no longer loaded — Phase B's font swap
   dropped that Google Fonts link — so this uses var(--font-ui) (Public
   Sans) instead of reintroducing a fourth face. Both --accent and
   var(--text-muted) (the tagline, unchanged) auto-flip for dark theme, so
   neither needs a separate [data-theme="dark"] override the way the old
   hardcoded pair did. The icon PNGs stay in images/ and remain wired for
   favicons/the PWA manifest — only the inline sidebar/mobile-header use
   reverted. A horizontal-lockup asset (icon + wordmark + a tagline sized to
   actually read) remains a real future improvement, not done here. ── */
.strike-logo {
    display: flex;
    align-items: stretch;
    gap: 11px;
    line-height: 1;
}
.strike-logo-bar {
    width: 6px;
    border-radius: 3px;
    background: var(--accent);
    flex-shrink: 0;
    align-self: stretch;
    min-height: 44px;
}
.strike-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
.strike-logo-word {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 0.02em;
    color: var(--accent);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}
.sidebar-tagline {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
}