/* ============================================ */
/* SKELETON LOADER / SHIMMER                    */
/* ============================================ */
.skeleton-row {
    height: 44px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
    margin-bottom: 4px;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-td {
    padding: 4px 8px !important;
    border-bottom: none !important;
}

/* Stock count label in toolbar */
.stock-count-label {
    font-size: var(--text-2xs);
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: auto;
}

/* Alchemist section — white text and borders */
.alchemist-section, .alchemist-section * {
    color: #ffffff !important;
}
.alchemist-section svg {
    stroke: #ffffff !important;
    fill: #ffffff !important;
}
.alchemist-section .alchemist-insight,
.alchemist-section .alchemist-input,
.alchemist-section .alch-chip,
.alchemist-section .alch-result-card,
.alchemist-section .alch-strategy-card {
    border-color: rgba(255,255,255,0.2) !important;
}
/* ============================================ */
/* MARKET PULSE WIDGET                          */
/* ============================================ */
.market-pulse-section {
    padding: 0 12px 8px;
}
.market-pulse-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.market-pulse-card {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--surface-l1, rgba(0,0,0,0.25));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.mp-title {
    font-size: var(--text-base);
    font-weight: 200;

    letter-spacing: 0.08em;
    margin-bottom: 10px;
    color: var(--text-secondary, #a3a3a3);
}
.mp-title.positive { color: var(--accent-positive, #22c55e); }
.mp-title.negative { color: var(--accent-negative, #ef4444); }
.mp-list { display: flex; flex-direction: column; gap: 4px; }
.mp-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.mp-item:last-child { border-bottom: none; }
.mp-ticker { font-family: 'DM Sans', sans-serif; font-weight: 200; font-size: var(--text-sm); color: var(--text-primary, #fff); min-width: 50px; }
.mp-name { flex: 1; color: var(--text-secondary); margin: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-base); }
.mp-change { font-family: 'DM Sans', sans-serif; font-weight: 200; font-size: var(--text-sm); min-width: 55px; text-align: right; }
.mp-change.positive { color: var(--accent-positive); }
.mp-change.negative { color: var(--accent-negative); }

/* ============================================ */
/* SECTOR HEATMAP                               */
/* ============================================ */
.sector-heatmap-section {
    padding: 0 12px 12px;
}
.sector-heatmap-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.sector-chip {
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 200;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform 0.15s, box-shadow 0.15s;
    min-height: 40px;
    display: flex;
    align-items: center;
    cursor: default;
    position: relative;
}
.sector-chip:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 1; }
.sector-chip .sector-pct {
    margin-left: 6px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 200;
    font-size: var(--text-md);
}

/* ============================================ */
/* CONGRESSIONAL TRADES                         */
/* ============================================ */
.congressional-section {
    margin: 16px 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--surface-l1, rgba(0,0,0,0.25));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.section-title-small {
    font-size: var(--text-xs);
    font-weight: 200;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
    color: var(--text-primary);
}
.congressional-table-wrapper {
    overflow-x: auto;
}
.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
}
.mini-table th {
    text-align: left;
    padding: 6px 10px;
    font-weight: 200;
    font-size: var(--text-md);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);

    letter-spacing: 0.04em;
}
.mini-table td {
    padding: 5px 10px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.mini-table tr:hover td { background: var(--base-hover); }
.party-d { color: #60a5fa; }
.party-r { color: #f87171; }

/* ============================================ */
/* ECONOMIC DASHBOARD                           */
/* ============================================ */
.economic-section {
    margin: 0 12px 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--surface-l1, rgba(0,0,0,0.25));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}
.econ-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.econ-card {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-l2, rgba(0,0,0,0.3));
    border: 1px solid var(--border-subtle);
}
.econ-label {
    font-size: var(--text-base);
    font-weight: 200;
    color: var(--text-secondary);

    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.econ-value {
    font-size: var(--text-md);
    font-weight: 200;
    color: var(--text-primary);
}
.econ-date {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================ */
/* SIDE PANEL: INSIDER TRADES                   */
/* ============================================ */
.insider-trades-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.insider-trade-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--surface-l2, rgba(0,0,0,0.3));
    border: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
}
.insider-name { font-weight: 200; color: var(--text-primary); }
.insider-title { font-size: var(--text-base); color: var(--text-secondary); }
.insider-detail { text-align: right; }
.insider-type { font-weight: 200; font-size: var(--text-xs); }
.insider-type.buy { color: var(--accent-positive); }
.insider-type.sell { color: var(--accent-negative); }
.insider-amount { font-size: var(--text-base); color: var(--text-secondary); }

/* ============================================ */
/* SIDE PANEL: UPGRADES/DOWNGRADES              */
/* ============================================ */
.upgrades-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.upgrade-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--surface-l2, rgba(0,0,0,0.3));
    border: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
}
.upgrade-date { font-size: var(--text-base); color: var(--text-muted); min-width: 45px; }
.upgrade-firm { flex: 1; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upgrade-arrow { font-weight: 200; font-size: var(--text-xs); }
.upgrade-arrow.up { color: var(--accent-positive); }
.upgrade-arrow.down { color: var(--accent-negative); }
.upgrade-arrow.neutral { color: var(--text-muted); }
.upgrade-grade { font-weight: 200; color: var(--text-primary); font-size: var(--text-xs); }

/* ============================================ */
/* SIDE PANEL: FINANCIAL SCORES                 */
/* ============================================ */
.scores-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.score-card {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--surface-l2, rgba(0,0,0,0.3));
    border: 1px solid var(--border-subtle);
    text-align: center;
}
.score-label { font-size: var(--text-base); color: var(--text-secondary); letter-spacing: 0.04em; margin-bottom: 4px; }
.score-value { font-size: var(--text-md); font-weight: 200; color: var(--text-primary); }
.score-value.strong { color: var(--accent-positive); }
.score-value.weak { color: var(--accent-negative); }
.score-sub { font-size: var(--text-base); color: var(--text-muted); margin-top: 2px; }

/* ============================================ */
/* SIDE PANEL: REVENUE SEGMENTS                 */
/* ============================================ */
.segments-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.segment-group-title { font-size: var(--text-xs); font-weight: 200; color: var(--text-secondary); letter-spacing: 0.04em; margin-bottom: 4px; }
.segment-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.segment-bar-label { font-size: var(--text-xs); color: var(--text-secondary); min-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.segment-bar-track { flex: 1; height: 14px; background: var(--surface-l3); border-radius: 3px; overflow: hidden; }
.segment-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(99,102,241,0.6), rgba(99,102,241,0.9)); transition: width 0.3s; }
.segment-bar-pct { font-size: var(--text-base); color: var(--text-primary); min-width: 35px; text-align: right; font-weight: 200; }

@media (max-width: 768px) {
    .market-pulse-grid { grid-template-columns: 1fr; }
    .econ-grid { grid-template-columns: repeat(2, 1fr); }
    .scores-grid { grid-template-columns: 1fr; }
}

/* ============================================ */
/* STOCKS TAB (SCREENER) CSS                    */
/* ============================================ */
        :root {
            /* Glass surfaces over universal gradient */
            --base: rgba(0, 0, 0, 0.2);
            --base-light: rgba(0, 0, 0, 0.15);
            --base-hover: rgba(255, 255, 255, 0.06);
            --surface-l1: rgba(0, 0, 0, 0.25);
            --surface-l2: rgba(0, 0, 0, 0.3);
            --surface-l3: rgba(0, 0, 0, 0.35);
            --border-subtle: rgba(255, 255, 255, 0.06);
            --border-medium: rgba(80, 100, 160, 0.15);
            --border-selected: rgba(80, 100, 160, 0.25);
            --text-primary: #ffffff;
            --text-secondary: #a3a3a3;
            --text-muted: rgba(255, 255, 255, 0.55);
            --accent-positive: #22c55e;
            --accent-negative: #ef4444;
            --accent-neutral: #737373;
            --accent-warning: #f59e0b;
            --accent-cyan: #06b6d4;
            /* Gold accent system — matching dashboard */
            --sc-accent-warm: rgba(212, 175, 55, 0.7);
            --sc-accent-warm-subtle: rgba(212, 175, 55, 0.12);
            --sc-accent-line: rgba(212, 175, 55, 0.25);
            /* Font vars inherited from shared-styles.css */
            /* Table — clean dark surfaces */
            --table-container-bg: rgba(10, 13, 24, 0.06);
            --table-bg: transparent;
            --table-cell-bg: transparent;
            --table-first-col-bg: transparent;
            --table-second-col-bg: transparent;
            --table-header-bg: rgba(15, 20, 35, 0.4);
            --table-header-text: rgba(255, 255, 255, 0.9);
            --table-text: rgba(255, 255, 255, 0.85);
            --table-border: rgba(60, 70, 110, 0.08);
            --table-row-odd: transparent;
            --table-row-even: transparent;
            --table-row-hover: rgba(255, 255, 255, 0.06);
            --table-row-selected: rgba(70, 90, 160, 0.15);
            --table-group-bg: transparent;
            --table-hover-text: #fff;
            --table-selected-text: #fff;
            --table-accent: rgba(255, 255, 255, 0.15);
            --table-glow: rgba(100, 140, 255, 0.08);
        }

        /* ── Hero title tweak ── */
        .page-hero-title { line-height: 1.02; }

        /* ── Margin Trajectory ── */
        .margin-trajectory {
            padding: 12px 14px;
            margin: 8px 0;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 10px;
        }
        .margin-traj-header {
            font-size: var(--text-2xs);
            font-weight: 200;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 8px;
        }
        #marginTrajCanvas { width: 100%; }
        .margin-traj-legend {
            display: flex;
            gap: 14px;
            font-size: var(--text-2xs);
            color: rgba(255, 255, 255, 0.5);
            margin-top: 4px;
        }
        .margin-traj-legend span::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 2px;
            margin-right: 4px;
            vertical-align: middle;
        }
        .margin-traj-legend .traj-gross::before { background: #22c55e; }
        .margin-traj-legend .traj-op::before { background: #3b82f6; }

        /* ── Toolbar buttons — gold hover ── */
        .screener-toolbar .export-btn:hover,
        .screener-toolbar .col-toggle-btn:hover {
            border-color: rgba(212, 175, 55, 0.2);
            color: rgba(255, 255, 255, 0.95);
            background: rgba(212, 175, 55, 0.06);
        }

        /* ── Column toggle active — gold instead of cyan ── */
        .col-toggle-btn.active {
            border-color: rgba(212, 175, 55, 0.35) !important;
            color: #fff !important;
            background: rgba(212, 175, 55, 0.12) !important;
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.08) !important;
        }

        /* ── View toggle active — gold ── */
        .view-toggle-btn.active {
            color: #fff !important;
            background: rgba(212, 175, 55, 0.12) !important;
            border-color: rgba(212, 175, 55, 0.3) !important;
        }

        /* ── Search focus — gold ── */
        .quick-search:focus {
            border-color: rgba(212, 175, 55, 0.3) !important;
        }
        .search-input:focus {
            border-color: rgba(212, 175, 55, 0.35) !important;
        }
        .filter-select:focus {
            border-color: rgba(212, 175, 55, 0.35) !important;
        }
        .search-wrapper .search-input:focus {
            border-color: rgba(212, 175, 55, 0.35) !important;
        }
        .stock-header-search:focus {
            border-color: rgba(212, 175, 55, 0.35) !important;
        }

        /* ── Table header — refined with bottom accent line ── */
        .data-table thead tr {
            border-bottom: 1px solid rgba(212, 175, 55, 0.1);
        }
        .data-table th {
            font-weight: 200;
            letter-spacing: 0.02em;
        }
        .data-table th:hover {
            color: rgba(212, 175, 55, 0.85) !important;
        }
        .data-table th.sorted {
            color: rgba(212, 175, 55, 0.9) !important;
        }

        /* ── Table row hover — subtle gold glow ── */
        .data-table tr:hover td {
            background: rgba(212, 175, 55, 0.03) !important;
        }
        .data-table tr.selected td {
            background: rgba(212, 175, 55, 0.06) !important;
            border-bottom-color: rgba(212, 175, 55, 0.08);
        }

        /* ── Watchlist star — gold when active ── */
        .watchlist-star.active {
            color: rgba(212, 175, 55, 0.9) !important;
        }
        .stock-logo-wrapper.watchlisted {
            box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5) !important;
        }
        .stock-logo-wrapper.watchlisted:hover {
            box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.8) !important;
        }

        /* Reset inherited from shared-styles.css */

        /* zoom removed */
        html { min-zoom: 0.7; }

        /* Anti-copy protection for data table */
        .data-table {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }
        .data-table td {
            pointer-events: auto;
        }
        /* Hide data when printing */
        @media print {
            .table-container, .data-table {
                display: none !important;
            }
            body::after {
                content: "Screen data not available for print.";
                display: block;
                padding: 60px;
                text-align: center;
                font-size: var(--text-lg);
                color: #666;
            }
        }
        /* Prevent text selection highlighting */
        .data-table ::selection { background: transparent; color: inherit; }
        .data-table ::-moz-selection { background: transparent; color: inherit; }

        /* Body styles inherited from shared-styles.css */

        /* Background inherited from shared-styles.css (universal gradient) */

        .container,
        .page-container {
            width: 100%;
            max-width: 2000px;
            margin: 0 auto;
            border: 0 !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .table-wrap {
            background: rgba(0, 0, 0, 0.35) !important;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-top: 1px solid rgba(212, 175, 55, 0.1);
            border-radius: var(--radius-lg);
        }
        .side-panel,
        .side-panel-top,
        .panel-summary,
        .valuation-verdict,
        .consensus-box {
            background: rgba(0, 0, 0, 0.35) !important;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        /* Hide filter-bar search — quickSearch toolbar handles this */
        #manualFilterBar .search-wrapper-fixed { display: none; }

        /* TOOLBAR (legacy — replaced by .page-hero from shared-styles) */
        .toolbar-subtitle {
            font-family: var(--font-body);
            font-size: var(--text-base);
            color: rgba(255, 255, 255, 0.62);
            text-align: left;
            margin: 0;
            font-weight: 200;
            letter-spacing: 0.03em;
            letter-spacing: 0.03em;
            width: auto;
            max-width: none;
        }

        .search-input {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius-md);
            padding: 6px 10px;
            font-family: var(--font-body);
            font-size: var(--text-md);
            color: var(--text-primary);
            outline: none;
            transition: border-color 0.15s;
        }

        .search-input::placeholder { color: var(--text-muted, #666); }
        .search-input:focus { border-color: rgba(212, 175, 55, 0.35); }

        .export-btn {
            font-family: var(--font-body);
            font-size: var(--text-md);
            padding: 6px 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-md);
            color: var(--text-secondary);
            background: rgba(255, 255, 255, 0.04);
            cursor: pointer;
            transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.2s;
        }

        .export-btn:hover {
            border-color: rgba(212, 175, 55, 0.2);
            color: var(--text-primary);
            background: rgba(212, 175, 55, 0.06);
            transform: translateY(-1px);
        }

        .col-toggle {
            display: flex;
            gap: 4px;
            border-radius: var(--radius-md);
            padding: 4px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .col-toggle-btn {
            font-family: var(--font-body);
            font-size: var(--text-2xs);
            font-weight: 200;
            padding: 6px 14px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 6px;
            color: rgba(255, 255, 255, 0.7);
            background: rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: border-color 0.15s, color 0.15s, background 0.15s;
            white-space: nowrap;
            line-height: 1.4;
        }

        .col-toggle-btn:hover {
            border-color: rgba(212, 175, 55, 0.2);
            color: #fff;
            background: rgba(212, 175, 55, 0.06);
        }
        .col-toggle-btn.active {
            border-color: rgba(212, 175, 55, 0.35);
            color: #fff;
            background: rgba(212, 175, 55, 0.12);
            box-shadow: 0 0 8px rgba(212, 175, 55, 0.1);
        }

        .col-preset-wrap {
            position: relative;
            display: inline-block;
        }
        .col-preset-menu {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            right: 0;
            z-index: 100;
            min-width: 160px;
            background: rgba(18, 24, 38, 0.95);
            backdrop-filter: var(--glass-blur);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-md);
            padding: 4px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
        }
        .col-preset-menu.open { display: block; }
        .col-preset-menu button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            background: transparent;
            color: rgba(255, 255, 255, 0.7);
            font-family: var(--font-body);
            font-size: var(--text-2xs);
            font-weight: 200;
            cursor: pointer;
            transition: background 0.12s, color 0.12s;
        }
        .col-preset-menu button:hover {
            background: rgba(212, 175, 55, 0.1);
            color: #fff;
        }
        .col-preset-menu button.active {
            background: rgba(212, 175, 55, 0.15);
            color: #d4af37;
            font-weight: 400;
        }
        .col-preset-count {
            font-size: 0.75em;
            opacity: 0.5;
            margin-left: 8px;
        }
        .col-preset-count.pro-badge {
            background: linear-gradient(135deg, #a855f7, #d4af37);
            color: #fff;
            padding: 1px 6px;
            border-radius: 8px;
            font-size: 0.65em;
            font-weight: 600;
            letter-spacing: 0.5px;
            opacity: 1;
        }
        .col-preset-divider {
            height: 1px;
            background: rgba(255,255,255,0.08);
            margin: 4px 0;
        }

        /* DATA TABLE */
        /* Premium dark glass aesthetic */
        .table-container {
            max-width: 2000px;
            margin: 0 auto;
            padding: 0 var(--container-padding);
            border-radius: var(--radius-lg);
            overflow-x: auto;
            overflow-y: auto;
            max-height: 75vh;
            position: relative;
            background: var(--glass-bg-dark) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border) !important;
            transition: opacity 0.28s ease;
        }
        .table-container.glass-box {
            padding: 0 !important;
            background: var(--glass-bg-dark) !important;
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
        }

        /* Hide horizontal scrollbar - using status bar scrollbar */
        .table-container::-webkit-scrollbar:horizontal {
            height: 0;
            display: none;
        }
        .table-container::-webkit-scrollbar {
            width: 10px;
        }
        .table-container::-webkit-scrollbar-track {
            border-radius: 5px;
        }
        .table-container::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background: rgba(212, 175, 55, 0.18);
        }
        .table-container::-webkit-scrollbar-thumb:hover {
            background: rgba(212, 175, 55, 0.32);
            }

        .data-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            table-layout: auto;
            background: transparent;
        }


        /* Column widths — auto layout, only pin stock column */
        .data-table th[data-sort="name"]     { white-space: nowrap; text-align: left; }
        .data-table th[data-sort="sector"]   { min-width: 140px; }
        .data-table th { white-space: nowrap; padding: 14px 8px; vertical-align: middle; font-size: var(--text-2xs); }
        .data-table thead tr { border-bottom: 8px solid transparent; height: 44px; }
        .data-table thead th { background: var(--table-header-bg); }
        .data-table td { white-space: nowrap; padding: 4px 8px; font-size: var(--text-2xs); }
        .data-table th[data-sort="upside52wHigh"]   { width: 72px; }
        .data-table th[data-sort="ret5d"],
        .data-table th[data-sort="ret20d"],
        .data-table th[data-sort="ret63d"],
        .data-table th[data-sort="ret126d"],
        .data-table th[data-sort="ret252d"]        { width: 68px; }

        .data-table th:hover { color: var(--text-secondary, #aaa); }
        .data-table th.sorted { color: var(--text-primary, #fff); }
        .data-table th.sorted::after { content: ' \25BC'; font-size: var(--text-2xs); opacity: 0.6; }
        .data-table th.sorted.asc::after { content: ' \25B2'; font-size: var(--text-2xs); opacity: 0.6; }
        .data-table th.r { text-align: right; }
        .data-table th.c { text-align: center; }

        /* Column group separators */
        .data-table th.group-start { border-left: none; }
        .data-table td.group-start { border-left: none; }

        /* Group header colors - white */
        .data-table th[data-group="fundamental"] { color: #fff; }
        .data-table th[data-group="valuation"] { color: #fff; }
        .data-table th[data-group="technical"] { color: #fff; }

        /* Column groups callout */
        .column-groups-callout {
            display: flex;
            gap: 12px;
            max-width: 2000px;
            margin: 0 auto;
            padding: 4px var(--container-padding) 8px;
            justify-content: flex-end;
            align-items: center;
            flex-wrap: wrap;
        }
        /* Quick search — subtle, always visible */
        .quick-search-wrap {
            position: relative;
        }
        .quick-search-icon {
            position: absolute;
            left: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.62);
            pointer-events: none;
        }
        .quick-search {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.12);
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: var(--text-2xs);
            padding: 6px 10px 6px 28px;
            border-radius: 6px;
            width: 170px;
            outline: none;
            transition: border-color 0.15s, width 0.2s;
            line-height: 1.4;
        }
        .quick-search::placeholder {
            color: rgba(255, 255, 255, 0.62);
        }
        .quick-search:focus {
            border-color: rgba(212, 175, 55, 0.3);
            width: 220px;
        }

        /* Search row above table */
        .screener-search-row {
            display: flex;
            align-items: center;
            gap: 16px;
            max-width: 2000px;
            margin: 8px var(--container-padding) 0;
            padding: 0;
        }
        .screener-search-flush {
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .quick-search-large {
            flex: 1;
            max-width: 420px;
        }
        .quick-search-stock-width {
            width: 240px;
            flex: none;
        }
        .quick-search-stock-width .quick-search {
            width: 100% !important;
            padding: 6px 10px 6px 30px !important;
            font-size: var(--text-sm) !important;
            border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
            background: rgba(255,255,255,0.04) !important;
            border: 1px solid rgba(255,255,255,0.08) !important;
            border-bottom: none !important;
        }
        .quick-search-stock-width .quick-search-icon {
            left: 10px;
        }
        .quick-search-stock-width .quick-search:focus {
            border-color: rgba(212,175,55,0.25) !important;
            background: rgba(255,255,255,0.06) !important;
        }
        .quick-search-large .quick-search {
            width: 100% !important;
            padding: 10px 14px 10px 36px !important;
            font-size: var(--text-sm) !important;
            border-radius: 10px !important;
            background: rgba(255,255,255,0.06) !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
        }
        .quick-search-large .quick-search-icon {
            left: 12px;
        }
        .quick-search-large .quick-search:focus {
            border-color: rgba(212,175,55,0.25) !important;
            background: rgba(255,255,255,0.08) !important;
        }

        .search-wrapper {
            position: relative;
        }
        .filter-bar .search-wrapper .search-input {
            width: 100%;
            border: 1px solid var(--border-subtle);
            background: var(--base);
            padding: 5px 30px 5px 10px;
            font-family: var(--font-body);
            font-size: var(--text-xs);
            color: var(--text-primary);
            border-radius: var(--radius-sm);
            outline: none;
            transition: all 0.15s;
        }
        .search-wrapper .search-input::placeholder {
            color: var(--text-muted);
        }
        .search-wrapper .search-input:focus {
            border-color: rgba(212, 175, 55, 0.35);
        }
        .search-clear {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.62);
            font-size: var(--text-md);
            cursor: pointer;
            padding: 2px 6px;
            line-height: 1;
            opacity: 0;
            transition: opacity 0.15s, color 0.15s;
        }
        .search-clear:hover {
            color: rgba(255, 255, 255, 0.8);
        }
        .search-wrapper.has-value .search-clear {
            opacity: 1;
        }
        .filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 10px 16px;
            align-items: center;
            max-width: 2000px;
            margin: 0 auto;
        }
        .filter-select {
            width: auto;
            background: var(--base);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            padding: 5px 8px;
            font-family: var(--font-body);
            font-size: var(--text-xs);
            color: var(--text-secondary);
            outline: none;
            cursor: pointer;
            min-width: 100px;
        }
        .filter-select:focus { border-color: rgba(212, 175, 55, 0.35); }
        .filter-select option { background: #111; color: #ccc; }
        .filter-clear {
            font-family: var(--font-body);
            font-size: var(--text-xs);
            color: var(--text-muted);
            background: none;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: var(--radius-md);
            cursor: pointer;
            padding: 5px 10px;
        }
        .filter-clear:hover { color: var(--text-secondary); }
        .filter-label {
            font-family: var(--font-body);
            font-size: var(--text-base);
            color: var(--text-muted);
            letter-spacing: 0.03em;
        
        }
        .callout-item {
            padding: 10px 20px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            gap: 0;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s;
            text-align: center;
            border: 1px solid var(--border-subtle);
            background: var(--base);
        }
        .callout-item:hover {
            border-color: var(--border-medium);
            background: var(--base-hover);
        }
        .callout-item.active {
            border-color: var(--border-medium);
            background: var(--base-hover);
        }
        .callout-label {
            font-family: var(--font-body);
            font-size: var(--text-md);
            font-weight: 200;
            letter-spacing: 0.01em;
            color: rgba(255, 255, 255, 0.7);
        }
        .callout-item.active .callout-label {
            color: rgba(255, 255, 255, 1);
        }
        /* Stock header search */
        .stock-header-container {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-width: 200px;
        }
        .stock-header-search {
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            padding: 5px 8px;
            font-family: var(--font-body);
            font-size: var(--text-md);
            color: var(--text-primary);
            outline: none;
            transition: all 0.15s;
        }
        .stock-header-search::placeholder {
            color: var(--text-muted);
        }
        .stock-header-search:focus {
            border-color: rgba(212, 175, 55, 0.35);
        }
        .export-btn-gold {
            font-family: var(--font-body);
            font-size: var(--text-2xs);
            font-weight: 200;
            padding: 6px 14px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 6px;
            color: rgba(255, 255, 255, 0.7);
            background: rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
            white-space: nowrap;
            line-height: 1.4;
        }
        .view-toggle-group {
            display: flex;
            gap: 0;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 6px;
            overflow: hidden;
        }
        .view-toggle-btn {
            font-family: var(--font-body);
            font-size: var(--text-sm);
            font-weight: 200;
            padding: 5px 12px;
            border: none;
            color: rgba(255, 255, 255, 0.62);
            background: transparent;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .view-toggle-btn:not(:last-child) {
            border-right: 1px solid rgba(255, 255, 255, 0.08);
        }
        .view-toggle-btn:hover {
            color: rgba(255,255,255,0.7);
            background: rgba(212,175,55,0.04);
        }
        .view-toggle-btn.active {
            color: #fff;
            background: rgba(212, 175, 55, 0.12);
            border-color: rgba(212, 175, 55, 0.25);
        }
        .column-groups-callout .export-btn-gold {
            margin-left: 8px;
        }
        .export-btn-gold:hover {
            border-color: rgba(212, 175, 55, 0.2);
            color: rgba(255,255,255,0.9);
            background: rgba(212, 175, 55, 0.06);
            box-shadow: none;
        }

        /* ================================================ */
        /* SCREENER TOOLBAR — unified row above table     */
        /* ================================================ */
        .screener-toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 2000px;
            margin: 0 auto;
            padding: 12px var(--container-padding) 10px;
            flex-wrap: wrap;
        }
        .screener-toolbar .quick-search-wrap {
            flex: 0 0 200px;
        }
        .screener-toolbar .quick-search {
            width: 100% !important;
        }
        .screener-toolbar .stock-count-label {
            margin-left: auto;
        }

        /* First-visit tip */
        .screener-tip {
            display: flex; align-items: center; gap: 10px;
            max-width: 2000px; margin: 0 auto 10px;
            padding: 10px 16px; font-size: 13px; font-weight: 200; color: rgba(255,255,255,0.7);
            background: rgba(168,85,247,0.08); border: 1px solid rgba(168,85,247,0.18);
            border-radius: 8px; font-family: 'DM Sans', sans-serif; line-height: 1.5;
            animation: tipFadeIn 0.4s ease;
        }
        .screener-tip svg { flex-shrink: 0; color: rgba(168,85,247,0.6); }
        .screener-tip strong { font-weight: 400; color: rgba(255,255,255,0.85); }
        .screener-tip em { font-style: normal; color: rgba(168,85,247,0.85); }
        .screener-tip-close {
            margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.35);
            font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0;
        }
        .screener-tip-close:hover { color: rgba(255,255,255,0.7); }
        @keyframes tipFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

        /* ================================================ */
        /* ALCHEMIST IN HERO-RIGHT — iMessage style       */
        /* ================================================ */
        .alchemist-hero-right {
            gap: 16px;
            background: rgba(0, 0, 0, 0.3);
            border: none;
            border-radius: 20px;
            padding: 28px 28px 22px;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
        }
        /* Gold-to-white gradient border */
        .alchemist-hero-right::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 20px;
            padding: 1px;
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.5) 0%, rgba(255, 255, 255, 0.18) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 1;
        }
        @keyframes alchBorderShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        .alchemist-hero-right .alchemist-input-row {
            order: 0;
            width: 100%;
        }
        .alchemist-hero-right .alchemist-input {
            padding: 16px 52px 16px 22px;
            font-size: var(--text-md);
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.07);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }
        .alchemist-hero-right .alchemist-input:focus {
            border-color: rgba(212, 175, 55, 0.4);
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.08);
        }
        .alchemist-hero-right .alchemist-input::placeholder {
            color: rgba(255, 255, 255, 0.62);
        }
        .alchemist-hero-right .alchemist-suggestions {
            order: 1;
            margin-top: 8px;
            justify-content: flex-start;
            gap: 6px;
            max-width: none;
            max-height: none;
            overflow: visible;
            flex-wrap: wrap;
        }
        .alchemist-hero-right .alch-chips-stock {
            justify-content: flex-start;
            gap: 6px;
        }
        .alchemist-hero-right .alch-chip {
            font-size: var(--text-2xs) !important;
            padding: 7px 16px !important;
            color: rgba(255, 255, 255, 0.75);
            background: rgba(255, 255, 255, 0.06) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: 20px !important;
            transition: all 0.2s ease !important;
        }
        .alchemist-hero-right .alch-chip:hover {
            color: rgba(255, 255, 255, 0.9) !important;
            background: rgba(212, 175, 55, 0.08) !important;
            border-color: rgba(212, 175, 55, 0.25) !important;
        }
        .alchemist-hero-right .ai-content-notice {
            order: 2;
            font-size: var(--text-2xs);
            color: rgba(255, 255, 255, 0.62);
            text-align: left;
        }
        .alchemist-hero-right .alchemist-btn {
            width: 40px;
            height: 40px;
            right: 8px;
        }

        /* Result panel — only visible when AI responds */
        .alchemist-section-result {
            display: none !important;
        }
        .alchemist-section-result.active {
            display: flex !important;
        }

        /* ================================================ */
        /* ALCHEMIST - iMessage-style AI Chat (result)    */
        /* ================================================ */
        .alchemist-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 16px 24px 14px;
            max-width: 860px;
            margin: 0 auto;
            position: relative;
            gap: 0;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }
        .alchemist-label { display: none; }

        /* Suggestion chips - shown above input when no conversation */
        .alchemist-suggestions {
            display: flex;
            gap: 5px;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            max-width: 660px;
            width: 100%;
            max-height: 80px;
            overflow: hidden;
            opacity: 1;
            margin-top: 6px;
            margin-bottom: 0;
            order: 12;
            transition: max-height 0.3s ease-out, opacity 0.25s ease-out, margin 0.3s ease-out;
        }
        .alchemist-suggestions.hidden { max-height: 0; opacity: 0; margin-bottom: 0; overflow: hidden; }
        .alch-chips-stock, .alch-chips-strategy { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
        .alch-chip {
            font-family: var(--font-body);
            font-size: var(--text-base);
            color: rgba(255, 255, 255, 0.62);
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius-md);
            padding: 4px 10px;
            cursor: pointer;
            transition: all 0.2s;
            letter-spacing: 0.01em;
            white-space: nowrap;
            font-weight: 200;
            line-height: 1;
        }
        .alch-chip strong {
            color: inherit;
            font-weight: 200;
        }
        .alch-chip:hover {
            color: rgba(255, 255, 255, 0.62);
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.15);
        }
        .alch-chip:hover strong {
            color: inherit;
        }
        .alch-chip:active {
            color: rgba(255, 255, 255, 0.62);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(255, 255, 255, 0.18);
        }
        .alch-chip.loading {
            background: transparent;
            pointer-events: none;
            color: rgba(255, 255, 255, 0.62);
        }
        @keyframes alch-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* Input bar - iMessage style pill at bottom */
        .alchemist-input-row {
            display: flex;
            align-items: center;
            gap: 0;
            width: 100%;
            position: relative;
            order: 10;
        }
        .alchemist-input {
            flex: 1;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 24px;
            padding: 12px 48px 12px 20px;
            font-family: var(--font-body);
            font-size: var(--text-sm);
            line-height: 1.4;
            color: #fff;
            background: rgba(255, 255, 255, 0.12);
            outline: none;
            transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
        }
        .alchemist-input::placeholder { color: rgba(255, 255, 255, 0.7); font-style: normal; font-weight: 200; }
        .alchemist-input:focus { border-color: rgba(212, 175, 55, 0.4); background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.06); }
        .alchemist-input-row.loading .alchemist-input {
            color: rgba(255, 255, 255, 0.62);
            border-color: rgba(255, 255, 255, 0.5);
            animation: none;
        }
        @keyframes alch-input-pulse {
            0%, 100% { border-color: rgba(212, 175, 55, 0.3); }
            50% { border-color: rgba(212, 175, 55, 0.6); }
        }
        .alchemist-btn {
            position: absolute;
            right: 7px;
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.9), rgba(180, 140, 40, 0.9));
            border: none;
            border-radius: 50%;
            color: #fff;
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.25s;
            flex-shrink: 0;
            box-shadow: 0 2px 12px rgba(212, 175, 55, 0.3);
        }
        .alchemist-btn:hover { background: linear-gradient(135deg, rgba(220, 185, 60, 1), rgba(190, 150, 45, 1)); color: #fff; transform: translateY(-50%) scale(1.08); box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35); animation: none; }
        @keyframes alch-btn-pulse {
            0%, 100% { box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3), 0 0 20px rgba(212, 175, 55, 0.15); }
            50% { box-shadow: 0 4px 20px rgba(212, 175, 55, 0.45), 0 0 30px rgba(212, 175, 55, 0.2); }
        }
        .alchemist-btn:active { background: rgba(180, 140, 40, 0.95); color: #fff; transform: translateY(-50%) scale(0.95); }
        .alchemist-btn:disabled { opacity: 0.3; cursor: wait; }
        .alchemist-btn.loading {
            animation: none;
        }
        @keyframes alch-btn-glow {
            0%, 100% { box-shadow: 0 2px 10px rgba(212,175,55,0.3), 0 0 6px rgba(212,175,55,0.08); background: rgba(212,175,55,0.9); }
            50% { box-shadow: 0 0 24px rgba(212,175,55,0.5), 0 0 48px rgba(212,175,55,0.2), 0 0 8px rgba(212,175,55,0.35); background: rgba(180,140,40,0.95); }
        }
        .alchemist-status {
            font-family: var(--font-body);
            font-size: var(--text-base);
            color: rgba(255, 255, 255, 0.62);
            margin-top: 4px;
            min-height: 1em;
            letter-spacing: 0.01em;
            order: 11;
            text-align: center;
            width: 100%;
        }

        /* Insight / conversation panel */
        .alchemist-insight {
            max-width: 100%;
            width: 100%;
            margin: 0 0 0 0;
            padding: 0 20px;
            background: rgba(255,255,255,0.04);
            border: 1px solid transparent;
            border-radius: var(--radius-lg);
            font-family: var(--font-body);
            font-size: var(--text-sm);
            color: rgba(255,255,255,0.8);
            line-height: 1.7;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            position: relative;
            order: -1;
            transition: max-height 0.45s ease-out, opacity 0.3s ease-out, padding 0.35s ease-out, border-color 0.3s, margin-bottom 0.3s ease-out;
        }
        @keyframes alch-bubble-in {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .alchemist-insight.visible { max-height: 500px; opacity: 1; padding: 12px 16px; border-color: rgba(255,255,255,0.06); margin-bottom: 8px; }
        .alchemist-insight-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            padding: 0 4px;
        }
        .alchemist-insight-count {
            font-size: var(--text-base);
            color: rgba(255, 255, 255, 0.62);
            font-weight: 200;
            letter-spacing: 0.03em;
        }
        .alch-header-actions { display: flex; gap: 6px; align-items: center; }
        .alchemist-clear {
            font-family: var(--font-body);
            font-size: var(--text-base);
            color: rgba(255, 255, 255, 0.62);
            background: transparent;
            border: none;
            padding: 2px 8px;
            cursor: pointer;
            transition: color 0.15s;
            letter-spacing: 0.02em;
        }
        .alchemist-clear:hover { color: rgba(255, 255, 255, 0.62); }

        /* ── Result Cards ── */
        .alch-result-cards {
            display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0 4px;
        }
        .alch-result-cards::-webkit-scrollbar { height: 2px; }
        .alch-result-cards::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
        .alch-result-card {
            padding: 10px 12px;
            background: rgba(1, 118, 211, 0.06); border: 1px solid rgba(1, 118, 211, 0.15);
            border-radius: var(--radius-lg); cursor: pointer; transition: border-color 0.15s, background 0.15s;
            display: flex; flex-direction: row; align-items: center; text-align: left; gap: 8px;
        }
        .alch-result-card:hover {
            border-color: rgba(1, 118, 211, 0.3); background: rgba(1, 118, 211, 0.12);
        }
        .alch-card-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
        .alch-result-card .card-ticker { font-family: var(--font-number); font-size: var(--text-xs); font-weight: 200; color: rgba(255,255,255,0.9); line-height: 1.2; }
        .alch-result-card .card-price { font-family: var(--font-number); font-size: var(--text-md); color: rgba(255, 255, 255, 0.62); }
        .alch-result-card .card-quality { font-family: var(--font-number); font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); }
        .alch-result-card .card-upside { font-family: var(--font-number); font-size: var(--text-base); font-weight: 200; }
        .alch-result-card .card-upside.positive { color: var(--accent-positive); }
        .alch-result-card .card-upside.negative { color: var(--accent-negative); }
        .alch-result-card .card-sector { font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); margin-bottom: 2px; }
        /* Strategy result cards — enriched */
        .alch-strategy-card { min-width: 155px; max-width: 200px; align-items: flex-start; text-align: left; }
        .alch-strategy-card .card-ticker { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
        .alch-strategy-card .card-strat-meta { margin-bottom: 4px; display: flex; gap: 4px; align-items: center; }
        .alch-strategy-card .card-strat-cat { font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); text-transform: capitalize; background: rgba(255,255,255,0.05); padding: 1px 6px; border-radius: var(--radius-sm); }
        .alch-strategy-card .card-strat-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); margin-bottom: 4px; width: 100%; }
        .alch-strategy-card .card-strat-stats strong { color: rgba(255,255,255,0.75); font-weight: 200; }
        .alch-strategy-card .card-upside { font-size: var(--text-base); }
        .alch-strategy-card .card-holdings-preview { font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 2px; }
        /* Stock card quality bar */
        .alch-result-card .card-quality-bar { width: 100%; height: 3px; background: rgba(255,255,255,0.04); border-radius: 2px; overflow: hidden; margin-top: 2px; }
        .alch-result-card .card-quality-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
        .alch-result-card .card-quality-fill.high { background: var(--accent-positive); }
        .alch-result-card .card-quality-fill.mid { background: rgba(255,200,60,0.6); }
        .alch-result-card .card-quality-fill.low { background: var(--accent-negative); }

        /* ── Overview Redesigned Sections ── */
        .ov-growth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
        .ov-growth-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,0.03); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; box-shadow: 0 4px 24px rgba(0,0,0,0.15); }
        .ov-growth-label { font-family: var(--font-body); font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); white-space: nowrap; }
        .ov-growth-val { font-family: var(--font-number); font-size: var(--text-xs); font-weight: 200; text-align: right; }
        .ov-growth-val.positive { color: var(--accent-positive); }
        .ov-growth-val.negative { color: var(--accent-negative); }
        .ov-growth-val.neutral { color: rgba(255, 255, 255, 0.62); }
        .ov-margins { display: flex; flex-direction: column; gap: 8px; }
        .ov-margin-row { display: flex; align-items: center; gap: 10px; }
        .ov-margin-label { font-family: var(--font-body); font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); width: 72px; flex-shrink: 0; }
        .ov-margin-track { flex: 1; height: 6px; background: rgba(255,255,255,0.04); border-radius: 3px; overflow: hidden; }
        .ov-margin-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
        .ov-margin-fill.gross { background: rgba(255,255,255,0.25); }
        .ov-margin-fill.operating { background: rgba(180,160,120,0.6); }
        .ov-margin-fill.net { background: rgba(100,200,140,0.5); }
        .ov-margin-val { font-family: var(--font-number); font-size: var(--text-base); color: rgba(255,255,255,0.7); width: 48px; text-align: right; flex-shrink: 0; }
        .ov-valuation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
        .ov-val-cell { padding: 10px 8px; background: rgba(255,255,255,0.03); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,0.15); }
        .ov-val-label { font-family: var(--font-body); font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); margin-bottom: 4px; letter-spacing: 0.02em; }
        .ov-val-num { font-family: var(--font-number); font-size: var(--text-md); font-weight: 200; color: rgba(255,255,255,0.85); }
        .ov-val-num.cheap { color: var(--accent-positive); }
        .ov-val-num.fair { color: rgba(180,160,120,0.9); }
        .ov-val-num.expensive { color: var(--accent-negative); }
        .ov-val-sub { font-family: var(--font-body); font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); margin-top: 2px; }
        .ov-estimates { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
        .ov-est-card { padding: 10px 12px; background: rgba(255,255,255,0.03); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); box-shadow: 0 4px 24px rgba(0,0,0,0.15); }
        .ov-est-title { font-family: var(--font-body); font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); margin-bottom: 6px; letter-spacing: 0.03em; }
        .ov-est-row { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 0; }
        .ov-est-year { font-family: var(--font-body); font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); }
        .ov-est-val { font-family: var(--font-number); font-size: var(--text-xs); font-weight: 200; color: rgba(255,255,255,0.75); }
        .ov-est-val.positive { color: var(--accent-positive); }
        .ov-est-val.negative { color: var(--accent-negative); }

        /* ── Overview Scatter (v3/v4 inspired) ── */
        .ov-scatter-section { margin-top: 4px; }
        .ov-scatter-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 6px; }
        .ov-scatter-title { font-size: var(--text-base); font-weight: 200; letter-spacing: 1.2px; color: rgba(255, 255, 255, 0.62); }
        .ov-scatter-toggles { display: flex; gap: 3px; align-items: center; }
        .ov-scatter-toggles .ov-tog-label { font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); margin-right: 2px; }
        .ov-scatter-tog {
            padding: 2px 7px; border-radius: 5px; border: none; cursor: pointer;
            font: 600 var(--text-2xs)/1 var(--font-body); letter-spacing: 0.3px;
            background: rgba(255,255,255,0.04); color: rgba(255, 255, 255, 0.62); transition: all 0.15s;
        }
        .ov-scatter-tog.on { background: rgba(212,175,55,0.8); color: #fff; box-shadow: 0 1px 4px rgba(212,175,55,0.3); }
        .ov-scatter-tog:hover:not(.on) { background: rgba(255,255,255,0.08); }
        .ov-scatter-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
        .ov-scatter-box {
            position: relative; border-radius: var(--radius-lg); overflow: hidden;
            background: rgba(255,255,255,0.03); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 4px 24px rgba(0,0,0,0.15);
        }
        .ov-scatter-box canvas { width: 100% !important; display: block; }
        .ov-scatter-tip {
            position: absolute; pointer-events: none;
            background: rgba(10,14,22,0.92); color: #fff; border: 1px solid rgba(255,255,255,0.1);
            padding: 4px 8px; border-radius: 7px; font-size: var(--text-base); font-weight: 200;
            white-space: nowrap; opacity: 0; transition: opacity 0.12s; z-index: 10;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }
        .ov-scatter-tip.show { opacity: 1; }
        .ov-scatter-verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
        .ov-scatter-verdict {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 12px; border-radius: var(--radius-lg);
            background: rgba(255,255,255,0.03); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 4px 24px rgba(0,0,0,0.15);
        }
        .ov-verdict-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
        .ov-verdict-dot.good { background: var(--accent-positive); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
        .ov-verdict-dot.weak { background: var(--accent-negative); box-shadow: 0 0 6px rgba(234,67,53,0.4); }
        .ov-verdict-dot.neutral { background: var(--accent-warning); box-shadow: 0 0 6px rgba(245,158,11,0.4); }
        .ov-verdict-text { font-size: var(--text-base); font-weight: 200; color: rgba(255,255,255,0.7); }
        .ov-verdict-sub { font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); }
        @media (max-width: 580px) { .ov-scatter-dual, .ov-scatter-verdicts { grid-template-columns: 1fr; } }

        /* ── Chat Mode - iMessage bubbles ── */
        .alch-chat {
            width: 100%; margin: 0;
            display: flex; flex-direction: column; gap: 6px;
            max-height: 420px; overflow-y: auto; padding: 4px 0;
            scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.04) transparent;
        }
        .alch-msg {
            padding: 12px 16px;
            font-family: var(--font-body);
            font-size: var(--text-sm);
            line-height: 1.55;
            max-width: 85%;
            animation: alch-bubble-in 0.2s ease-out;
        }
        .alch-msg-user {
            align-self: flex-end;
            background: linear-gradient(135deg, #0a84ff, #0066d6);
            border: none;
            border-radius: 22px 22px 6px 22px;
            color: #fff;
            box-shadow: 0 3px 14px rgba(10, 132, 255, 0.3);
        }
        .alch-msg-ai {
            align-self: flex-start;
            background: rgba(38, 40, 50, 0.15);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 22px 22px 22px 6px;
            color: rgba(255,255,255,0.8);
        }
        .alch-msg-ai .alch-msg-text strong { color: rgba(1, 118, 211, 0.8); font-weight: 200; }
        .alch-new-search {
            font-family: var(--font-body); font-size: var(--text-base); color: rgba(1, 118, 211, 0.6);
            background: transparent; border: none;
            padding: 2px 8px; cursor: pointer; transition: color 0.15s;
        }
        .alch-new-search:hover { color: rgba(1, 118, 211, 1); }

        /* ── Typing indicator dots ── */
        .alch-typing-dots {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 12px 16px;
            align-self: flex-start;
            background: rgba(38, 40, 50, 0.85);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 22px 22px 22px 6px;
            animation: alch-bubble-in 0.2s ease-out;
        }
        .alch-typing-dots span {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            animation: alch-dot-bounce 1.4s ease-in-out infinite;
        }
        .alch-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
        .alch-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes alch-dot-bounce {
            0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
            30% { transform: translateY(-6px); opacity: 1; }
        }

        /* Agent progress steps */
        .alch-agent-progress {
            display: flex; flex-direction: column; gap: 6px;
            padding: 8px 0; font-family: 'DM Sans', sans-serif;
        }
        .alch-agent-step {
            font-size: 13px; font-weight: 200; color: rgba(255,255,255,0.5);
            display: flex; align-items: center; gap: 8px;
            animation: alch-bubble-in 0.2s ease-out;
        }
        .alch-agent-step.active { color: rgba(255,255,255,0.85); }
        .alch-dot-pulse {
            display: inline-block; width: 6px; height: 6px; border-radius: 50%;
            background: rgba(168,85,247,0.7);
            animation: alch-pulse 1s ease-in-out infinite;
        }
        @keyframes alch-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }

        /* ── Structured AI response ── */
        .alch-structured {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .alch-summary-line {
            font-size: var(--text-xs);
            color: rgba(255,255,255,0.65);
            line-height: 1.5;
        }
        .alch-summary-line strong {
            color: rgba(1, 118, 211, 0.8);
            font-weight: 200;
        }
        .alch-no-match {
            color: rgba(255, 255, 255, 0.62);
        }
        .alch-quota-msg {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, 0.62);
            font-size: var(--text-2xs);
            padding: 6px 0;
        }
        .alch-quota-link {
            color: rgba(1,118,211,0.85);
            text-decoration: none;
            font-weight: 200;
            white-space: nowrap;
        }
        .alch-quota-link:hover {
            color: #0176d3;
            text-decoration: none;
        }
        .alch-remaining-badge {
            display: inline-block;
            font-size: var(--text-2xs);
            color: rgba(255, 255, 255, 0.62);
            margin-left: 8px;
            font-weight: 200;
        }
        .alch-stock-chips {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .alch-stock-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(1, 118, 211, 0.06);
            border: 1px solid rgba(1, 118, 211, 0.15);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s;
        }
        .alch-stock-chip:hover {
            background: rgba(1, 118, 211, 0.12);
            border-color: rgba(1, 118, 211, 0.3);
            box-shadow: 0 2px 12px rgba(1, 118, 211, 0.12);
        }
        .chip-ticker {
            font-family: var(--font-number);
            font-size: var(--text-xs);
            font-weight: 200;
            color: rgba(255,255,255,0.9);
        }
        .chip-price {
            font-family: var(--font-number);
            font-size: var(--text-md);
            color: rgba(255, 255, 255, 0.62);
        }
        .chip-upside {
            font-family: var(--font-number);
            font-size: var(--text-md);
            font-weight: 200;
        }
        .chip-upside.positive { color: var(--accent-positive); }
        .chip-upside.negative { color: var(--accent-negative); }

        /* ── Stock cards (Alchemist results) ── */
        .alch-stock-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5px;
            width: 100%;
        }
        .alch-stock-card {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.2s;
        }
        .alch-stock-card:hover {
            background: rgba(1, 118, 211, 0.08);
            border-color: rgba(1, 118, 211, 0.2);
        }
        .asc-left { flex-shrink: 0; width: 26px; height: 26px; background: #fff; border-radius: 6px; }
        .asc-logo {
            width: 26px; height: 26px;
            border-radius: 6px;
            object-fit: contain;
            background: #fff;
        }
        .asc-logo-fallback {
            width: 26px; height: 26px;
            border-radius: 6px;
            background: rgba(1, 118, 211, 0.15);
            color: rgba(255, 255, 255, 0.62);
            font-family: var(--font-number);
            font-size: var(--text-xs);
            font-weight: 200;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .asc-right { flex: 1; min-width: 0; }
        .asc-header {
            display: flex;
            align-items: baseline;
            gap: 6px;
        }
        .asc-name {
            font-family: var(--font-body);
            font-size: var(--text-xs);
            font-weight: 200;
            color: rgba(255,255,255,0.9);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .asc-ticker {
            font-family: var(--font-number);
            font-size: var(--text-xs);
            color: rgba(255, 255, 255, 0.62);
            font-weight: 200;
        }
        .asc-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 2px;
        }
        .asc-highlight {
            font-size: var(--text-base);
            font-weight: 200;
            color: rgba(255, 255, 255, 0.52);
            margin-top: 2px;
            line-height: 1.3;
            font-style: italic;
        }
        .asc-price {
            font-family: var(--font-number);
            font-size: var(--text-xs);
            color: rgba(255, 255, 255, 0.62);
        }
        .asc-upside {
            font-family: var(--font-number);
            font-size: var(--text-xs);
            font-weight: 200;
            padding: 1px 5px;
            border-radius: var(--radius-sm);
        }
        .asc-upside.positive { color: var(--accent-positive); background: none; }
        .asc-upside.negative { color: var(--accent-negative); background: none; }
        .asc-quality {
            font-family: var(--font-number);
            font-size: var(--text-base);
            font-weight: 200;
            padding: 1px 5px;
            border-radius: var(--radius-sm);
            background: rgba(255,255,255,0.06);
            color: rgba(255, 255, 255, 0.62);
        }
        .asc-quality.positive { color: var(--accent-positive); background: none; }
        .asc-quality.negative { color: var(--accent-negative); background: none; }
        .asc-sector {
            font-family: var(--font-body);
            font-size: var(--text-base);
            color: rgba(255, 255, 255, 0.62);
            letter-spacing: 0.02em;
        }

        /* ── Typing cursor ── */
        .alch-typing-cursor { display: inline-block; width: 1.5px; height: 1em; background: #0176D3; margin-left: 2px; animation: alch-blink 0.7s infinite; vertical-align: text-bottom; }
        @keyframes alch-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

        /* Manual Filtering toggle — tiny and faint */
        .manual-filter-toggle {
            display: flex;
            justify-content: center;
            padding: 0 16px;
            margin-top: -8px;
        }
        .manual-filter-btn {
            font-family: var(--font-body);
            font-size: var(--text-base);
            color: rgba(255, 255, 255, 0.62);
            background: none;
            border: none;
            padding: 5px 12px;
            cursor: pointer;
            transition: all 0.25s;
            letter-spacing: 0.04em;
        }
        .manual-filter-btn:hover { color: rgba(255, 255, 255, 0.62); }
        .manual-filter-btn.active { color: rgba(255, 255, 255, 0.62); }

        /* Collapsible filter bar */
        .filter-bar.collapsed {
            display: none;
        }

        @media (max-width: 768px) {
            .column-groups-callout { flex-direction: row; flex-wrap: wrap; gap: 8px; }
            .search-wrapper { width: 100% !important; max-width: 400px; }
            .alchemist-section { padding: 0 12px 8px; }
            .alchemist-input { font-size: var(--text-xs); padding: 11px 44px 11px 16px; border-radius: 20px; }
            .alchemist-btn { width: 30px; height: 30px; }
            .alchemist-insight { margin-bottom: 10px; }
            .alch-chip { font-size: var(--text-base); padding: 5px 11px; }
            .alch-result-card { min-width: 90px; padding: 8px 10px; }
            .alch-chat { max-height: 260px; }
            .alch-msg { font-size: var(--text-xs); max-width: 90%; padding: 8px 12px; }
            .panel-section { margin: 4px 0; padding: 8px 0; }
            .lens-tabs { padding: 3px; top: 56px; }
            .lens-tab { padding: 7px 20px; font-size: var(--text-xs); }
            .toolbar { padding: 0.6rem 12px 4px; }
            .toolbar-title { font-size: var(--text-xl); }
            .toolbar-subtitle { font-size: var(--text-md); }
        }
        @media (max-width: 480px) {
            .alchemist-section { padding: 0 8px 6px; }
            .alchemist-input { font-size: var(--text-xs); padding: 10px 40px 10px 14px; }
            .alchemist-btn { width: 28px; height: 28px; }
            .alch-chip { font-size: var(--text-base); padding: 4px 10px; }
            .alchemist-suggestions { gap: 4px; margin-bottom: 8px; }
            .alch-msg { font-size: var(--text-xs); }
            .lens-tab { padding: 6px 16px; font-size: var(--text-md); }
            .toolbar-title { font-size: var(--text-lg); }
            .toolbar-subtitle { font-size: var(--text-base); margin-bottom: 2px; }
        }

        .data-table td {
            padding: 5px 10px;
            border-bottom: 0;
            border-right: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
            font-family: var(--font-number);
            font-size: var(--text-sm);
            color: var(--table-text);
            background: var(--table-cell-bg);
            font-weight: 200;
        }
        .data-table th:last-child,
        .data-table td:last-child {
            border-right: none;
        }

        .data-table tr {
            transition: background 0.15s;
            cursor: pointer;
        }

        .data-table tbody tr td { background: transparent; }
        .data-table tbody td.group-start { background: var(--table-group-bg); }
        .data-table tr:hover td { background: var(--table-row-hover); }
        .data-table tr.selected td { background: var(--table-row-selected); }
        .data-table tr:hover td { color: var(--table-hover-text); }
        .data-table tr.selected td {
            color: var(--table-selected-text);
            border-bottom-color: var(--table-border);
        }
        .data-table td { text-align: center; }
        .data-table td:nth-child(2) { text-align: left; }
        .data-table td.l { text-align: left; }
        .data-table td.l.stock-cell { text-align: left; }
        .data-table td.r { text-align: right; }
        .data-table th[data-sort="price"],
        .data-table td[data-col="2"] { text-align: center !important; }
        /* Technical columns font weight */
        .data-table td[data-col="33"],
        .data-table td[data-col="34"],
        .data-table td[data-col="35"],
        .data-table td[data-col="36"],
        .data-table td[data-col="37"] {
            font-weight: 200;
        }


        /* Sticky first column */


        .data-table thead tr th:last-child {
            border-radius: 0 20px 0 0;
        }

        .data-table td:nth-child(2) { vertical-align: middle; padding-left: 16px; }
        /* Last row rounded corners */
        .data-table tbody tr:last-child td:last-child { border-radius: 0 0 20px 0; }


        /* Stock cell with logo */
        .stock-cell {
            padding: 2px 0;
            white-space: nowrap;
            overflow: visible;
            display: flex !important;
            align-items: center;
            gap: 0;
            min-width: 240px;
        }
        .watchlist-star {
            cursor: pointer;
            font-size: var(--text-base);
            color: var(--text-muted);
            opacity: 0.3;
            transition: all 0.15s;
            margin-right: 6px;
            flex-shrink: 0;
        }
        .watchlist-star:hover { opacity: 0.7; color: rgba(255,255,255,0.8); }
        .watchlist-star.active { opacity: 1; color: rgba(255,255,255,0.9); }
        .stock-logo-wrapper {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            margin-left: 10px;
            margin-right: 12px;
            cursor: pointer;
            position: relative;
            border-radius: var(--radius-md);
            background: rgba(255,255,255,0.12);
            padding: 2px;
            transition: box-shadow 0.2s;
        }
        .stock-logo-wrapper:hover { box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
        .stock-logo-wrapper.watchlisted { box-shadow: 0 0 0 2px rgba(20,184,216,0.7); }
        .stock-logo-wrapper.watchlisted:hover { box-shadow: 0 0 0 2px rgba(20,184,216,1); }
        .stock-cell .stock-logo,
        .stock-logo {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            object-fit: contain;
            vertical-align: middle;
            filter: none !important;
            color: inherit;
            background: transparent !important;
            display: block;
        }
        .stock-logo-fallback {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            display: none;
            align-items: center;
            justify-content: center;
            font-family: var(--font-number);
            font-size: var(--text-md);
            font-weight: 200;
            color: rgba(255, 255, 255, 0.62);
            background: rgba(255,255,255,0.12);
        }
        .stock-info {
            display: inline-block;
            vertical-align: middle;
            margin-right: 12px;
        }
        .stock-name { display: block; font-family: var(--font-body); font-size: var(--text-md); font-weight: 200; color: rgba(255, 255, 255, 0.95); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
        .stock-ticker { display: block; font-family: var(--font-number); font-size: var(--text-base); color: rgba(255, 255, 255, 0.62); font-weight: 200; line-height: 1.15; letter-spacing: 0.06em; }

        /* Value coloring - refined, elegant */
        .positive { color: #22c55e; }
        .negative { color: #ef4444; }
        .muted { color: var(--text-muted); }
        .blue { color: #888; }
        .teal { color: rgba(212,175,55,0.7); }

        /* RSI bar */
        .rsi-cell { display: flex; align-items: center; gap: 6px; }
        .rsi-bar { width: 36px; height: 4px; border-radius: 2px; overflow: hidden; }
        .rsi-fill { height: 100%; border-radius: 2px; }
        .rsi-fill.low { }
        .rsi-fill.mid { }
        .rsi-fill.high { }

        /* 52-week range cell */
        .range-cell {
            min-width: 140px;
            max-width: 160px;
            overflow: hidden;
        }
        .range-visual {
            width: 100%;
        }
        .range-prices {
            display: flex;
            justify-content: space-between;
            font-size: var(--text-2xs);
            color: var(--text-muted);
            margin-bottom: 2px;
        }
        .range-bar {
            position: relative;
            height: 3px;
            border-radius: 2px;
            background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
        }
        .range-dot {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #111;
            border: 2px solid rgba(255,255,255,0.7);
            box-shadow: 0 0 4px rgba(0,0,0,0.6);
        }

        /* Quality dots */
        .quality-cell { display: flex; align-items: center; justify-content: center; gap: 5px; }
        .quality-dots { display: flex; gap: 2px; }
        .quality-dot { width: 5px; height: 5px; border-radius: 50%; }
        .quality-dot.filled { }

        /* Loading */
        .loading { text-align: center; padding: 60px 20px; color: var(--text-muted, #666); font-family: var(--font-body); }
        .loading.error { color: var(--accent-negative); }
        .loading-spinner { display: inline-block; width: 24px; height: 24px; border: 2px solid var(--border-subtle, #222); border-top-color: rgba(212,175,55,0.7); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 12px; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Status bar */
        .status-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.10) !important;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 -8px 24px rgba(0,0,0,0.45);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            padding: 8px 24px;
            display: flex;
            align-items: center;
            gap: 16px;
            font-family: var(--font-number);
            font-size: var(--text-md);
            color: rgba(208, 212, 220, 0.74);
            z-index: 900;
        }
        body.paywall-active .status-bar {
            bottom: 72px;
        }
        .status-bar > div:first-child { white-space: nowrap; }
        .status-bar > div:last-child { white-space: nowrap; margin-left: auto; }

        .status-bar span { color: rgba(230, 233, 239, 0.9); }

        /* Synced scrollbar in status bar */
        .status-scrollbar {
            flex: 1;
            height: 8px;
            overflow-x: auto;
            overflow-y: hidden;
        }
        .status-scrollbar-inner {
            height: 1px;
        }
        .status-scrollbar::-webkit-scrollbar {
            height: 8px;
        }
        .status-scrollbar::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.08);
            border-radius: var(--radius-sm);
        }
        .status-scrollbar::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(212,175,55,0.6) 0%, rgba(180,140,40,0.6) 100%);
            border-radius: var(--radius-sm);
        }
        .status-scrollbar::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(212,175,55,0.8) 0%, rgba(180,140,40,0.8) 100%);
        }

        /* Hidden columns */
        .col-hidden { display: none; }

        /* Column group headers - time period shown below */
        .th-group {
            font-size: var(--text-2xs);
            color: rgba(255, 255, 255, 0.62);
            display: block;
            font-family: inherit;
            line-height: 1.2;
        }

        @media (max-width: 768px) {
            .toolbar-row { gap: 12px; }
            .toolbar-stats { display: none; }
        }

        /* Side Panel */
        .panel-overlay {
            position: fixed;
            inset: 0;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            background: rgba(6, 8, 12, 0.25) !important;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .panel-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

        .side-panel {
            position: fixed;
            top: 60px;
            right: 0;
            width: 780px;
            max-width: calc(100vw - 40px);
            height: calc(100vh - 60px);
            border-left: 1px solid rgba(255,255,255,0.06);
            border-radius: 0;
            z-index: 1010;
            transform: translateX(100%);
            visibility: hidden;
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s;
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            background: var(--glass-bg-dark) !important;
            backdrop-filter: blur(28px) !important;
            -webkit-backdrop-filter: blur(28px) !important;
            box-shadow: -16px 0 64px rgba(0,0,0,0.25), -4px 0 16px rgba(0,0,0,0.12);
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.06) transparent;
        }
        .side-panel::-webkit-scrollbar { width: 4px; }
        .side-panel::-webkit-scrollbar-track { background: transparent; }
        .side-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 2px; }
        .side-panel::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }
        .side-panel.open { transform: translateX(0); visibility: visible; }
        .side-panel-top {
            position: sticky;
            top: 0;
            z-index: 30;
            background: var(--bg-primary, #0c101a) !important;
            border-bottom: 1px solid rgba(212, 175, 55, 0.1);
        }
        .side-panel-top .preview-header {
            padding: 10px 24px 6px;
        }
        .side-panel-top .panel-tabs {
            padding: 0 24px 10px;
        }
        @media (max-width: 900px) {
            .side-panel {
                width: 100vw;
                max-width: 100vw;
            }
        }

        /* Preview Header - research.html style */
        .preview-header {
            position: relative;
            padding: 1rem 2rem 2rem;
            z-index: 10;
        }
        .preview-close {
            position: absolute;
            top: 1.25rem;
            right: 1.5rem;
            width: 32px;
            height: 32px;
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: var(--radius-md);
            color: rgba(255, 255, 255, 0.62);
            font-size: var(--text-base);
            cursor: pointer;
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.03);
            backdrop-filter: blur(8px);
        }
        .preview-close:hover { color: rgba(212,175,55,0.85); background: rgba(212,175,55,0.06); border-color: rgba(212,175,55,0.2); }

        .preview-company { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
        .preview-logo {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
        }
        .preview-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
        .preview-logo-fallback {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font-number);
            font-size: var(--text-sm);
            font-weight: 200;
            color: #555;
            background: #fff;
        }
        .preview-name { font-family: 'DM Sans', sans-serif; font-size: var(--text-lg); font-weight: 300; color: #fff; margin-bottom: 0; line-height: 1.2; letter-spacing: -0.01em; }
        .preview-ticker { font-family: var(--font-number); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.45); letter-spacing: 0.08em; font-weight: 200; }

        .preview-main-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; }
        .preview-price-block { }
        .preview-price { font-family: var(--font-number); font-size: var(--text-xl); font-weight: 300; color: #fff; line-height: 1; letter-spacing: -0.02em; }
        .preview-change { font-family: var(--font-number); font-size: var(--text-sm); font-weight: 200; margin-top: 0.3rem; display: block; }
        .preview-change.positive { color: var(--accent-positive); }
        .preview-change.negative { color: var(--accent-negative); }

        .preview-mini-targets { padding: 8px 0; min-width: 280px; }
        .preview-mini-targets-row { display: flex; justify-content: space-between; gap: 20px; }
        .preview-mini-target { text-align: center; flex: 1; }
        .preview-mini-target-label { font-size: var(--text-2xs); color: var(--text-muted); margin-bottom: 3px; font-weight: 200; letter-spacing: 0.04em; }
        .preview-mini-target-price { font-family: var(--font-number); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.5); margin-bottom: 2px; }
        .preview-mini-target-pct { font-family: var(--font-number); font-size: var(--text-sm); font-weight: 300; color: #fff; }
        .preview-mini-target-pct.positive { color: var(--accent-positive); }
        .preview-mini-target-pct.negative { color: var(--accent-negative); }
        .preview-mini-track {
            position: relative;
            height: 8px;
            border-radius: var(--radius-sm);
            margin-top: 8px;
            background: linear-gradient(90deg, rgba(239,68,68,0.4) 0%, rgba(255,255,255,0.14) 50%, rgba(34,197,94,0.45) 100%);
        }
        .preview-mini-marker {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 12px;
            height: 16px;
            border-radius: 6px;
            border: 2px solid #0a0a0a;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            background: #cfd8ff;
        }
        #miniMarker { left: 50%; }

        /* Share button */
        .panel-share-btn {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 5px 12px; font-family: 'DM Sans', sans-serif;
            font-size: var(--text-xs); font-weight: 200; color: rgba(255,255,255,0.55);
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
            border-radius: 6px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
            align-self: center;
        }
        .panel-share-btn:hover { color: rgba(212,175,55,0.85); background: rgba(212,175,55,0.06); border-color: rgba(212,175,55,0.2); }
        .panel-share-btn.copied { color: var(--accent-positive); border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.08); }

        .preview-quick-links { display: none; }
        .preview-quick-link {
            font-size: var(--text-xs);
            font-weight: 200;
            color: rgba(255, 255, 255, 0.62);
            text-decoration: none;
            padding: 5px 12px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 6px;
            transition: all 0.15s;
            font-family: 'DM Sans', sans-serif;
        }
        .preview-quick-link:hover {
            color: #a78bfa;
            background: rgba(167,139,250,0.1);
            border-color: rgba(167,139,250,0.2);
        }

        .preview-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; }
        .preview-badge {
            font-size: var(--text-2xs);
            padding: 4px 10px;
            border-radius: 6px;
            letter-spacing: 0.04em;
            font-weight: 300;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
        }
        .preview-badge.undervalued { color: var(--accent-positive); }
        .preview-badge.fair { color: var(--accent-warning); }
        .preview-badge.overvalued { color: var(--accent-negative); }

        /* Strategy Panel Context Switching */
        .side-panel[data-context="strategy"] .panel-ctx-stock { display: none !important; }
        .side-panel[data-context="strategy"] .panel-ctx-strategy:not(.panel-tab-content) { display: block !important; }
        .side-panel[data-context="strategy"] .panel-ctx-strategy.panel-tabs { display: flex !important; }
        .side-panel[data-context="strategy"] .panel-tab-content.panel-ctx-strategy { display: none !important; }
        .side-panel[data-context="strategy"] .panel-tab-content.panel-ctx-strategy.active { display: block !important; }
        .side-panel[data-context="stock"] .panel-ctx-stock { display: block; }
        .side-panel[data-context="stock"] .panel-ctx-strategy { display: none !important; }

        /* Strategy Panel Header */
        .strat-panel-identity { margin-bottom: 16px; }
        .strat-panel-name {
            font-family: 'DM Sans', sans-serif;
            font-size: var(--text-xl);
            font-weight: 200;
            color: #f8fafc;
            margin-bottom: 8px;
            line-height: 1.2;
        }
        .strat-panel-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
        .strat-panel-badges .sidebar-badge {
            font-size: var(--text-base);
            padding: 3px 10px;
            border-radius: var(--radius-sm);
            font-weight: 200;
            letter-spacing: 0.05em;
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.7);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .strat-panel-badges .sidebar-badge.momentum { color: #fb923c; border-color: rgba(251,146,60,0.25); }
        .strat-panel-badges .sidebar-badge.reversal { color: #a78bfa; border-color: rgba(167,139,250,0.25); }
        .strat-panel-badges .sidebar-badge.quality { color: #22d3ee; border-color: rgba(34,211,238,0.25); }
        .strat-panel-badges .sidebar-badge.value { color: #fde047; border-color: rgba(253,224,71,0.25); }
        .strat-panel-badges .sidebar-badge.composite { color: #4ade80; border-color: rgba(74,222,128,0.25); }
        .strat-panel-badges .sidebar-badge.technical { color: #f472b6; border-color: rgba(244,114,182,0.25); }
        .strat-panel-badges .sidebar-badge.volatility { color: #60a5fa; border-color: rgba(96,165,250,0.25); }
        .strat-panel-badges .sidebar-badge.contrarian { color: #e879f9; border-color: rgba(232,121,249,0.25); }
        .strat-panel-badges .sidebar-badge.hybrid { color: #c084fc; border-color: rgba(192,132,252,0.25); }
        .strat-panel-badges .sidebar-badge.meanrev { color: #fb7185; border-color: rgba(251,113,133,0.25); }
        .strat-panel-badges .sidebar-badge.beat { color: var(--accent-positive); border-color: rgba(34,197,94,0.3); }
        .strat-panel-desc {
            font-size: var(--text-xs);
            color: rgba(255, 255, 255, 0.62);
            line-height: 1.5;
        }

        .strat-panel-metrics {
            display: flex;
            gap: 1px;
            background: rgba(255,255,255,0.04);
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .strat-panel-metric {
            flex: 1;
            text-align: center;
            padding: 12px 6px 10px;
            background: var(--base);
        }
        .strat-panel-metric-value {
            font-family: var(--font-number);
            font-size: var(--text-lg);
            font-weight: 200;
            color: #fff;
            margin-bottom: 3px;
            line-height: 1;
        }
        .strat-panel-metric-value.green { color: var(--accent-positive); }
        .strat-panel-metric-value.red { color: var(--accent-negative); }
        .strat-panel-metric-value.amber { color: var(--accent-warning); }
        .strat-panel-metric-label {
            font-size: var(--text-base);
            color: rgba(255, 255, 255, 0.62);
            font-weight: 200;
            letter-spacing: 0.06em;
        
        }

        /* Strategy Logic & Insight Boxes */
        .strat-logic-box, .strat-insight-box {
            padding: 16px 20px;
            border-radius: 10px;
            border: 1px solid var(--border-subtle);
            background: rgba(255,255,255,0.02);
        }
        .strat-logic-title, .strat-insight-title {
            font-size: var(--text-xs);
            font-weight: 200;
            color: rgba(255, 255, 255, 0.62);
            letter-spacing: 0.08em;
            margin-bottom: 8px;
        }
        .strat-logic-text, .strat-insight-text {
            font-size: var(--text-md);
            color: rgba(255,255,255,0.75);
            line-height: 1.6;
            margin: 0;
        }
        .strat-insight-box { border-color: rgba(167,139,250,0.2); }

        /* Strategy Holdings Tables */
        .strat-holdings-preview-table,
        .strat-holdings-full-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--text-xs);
        }
        .strat-holdings-preview-table th,
        .strat-holdings-full-table th {
            font-size: var(--text-base);
            color: var(--text-muted);
            font-weight: 200;
            padding: 6px 8px;
            text-align: left;
            border-bottom: 1px solid var(--border-subtle);
            letter-spacing: 0.05em;
        }
        .strat-holdings-preview-table td,
        .strat-holdings-full-table td {
            padding: 8px;
            border-bottom: 1px solid rgba(255,255,255,0.03);
            color: rgba(255,255,255,0.8);
        }
        .strat-holdings-full-table tr { cursor: pointer; transition: background 0.15s; }
        .strat-holdings-full-table tr:hover { background: rgba(255,255,255,0.04); }
        .strat-holdings-preview-table .r,
        .strat-holdings-full-table .r { text-align: right; }

        /* Strategy Sector Bars */
        .strat-sector-bars { display: flex; flex-direction: column; gap: 6px; }
        .strat-sector-bar-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: var(--text-xs);
        }
        .strat-sector-bar-label {
            width: 120px;
            flex-shrink: 0;
            color: rgba(255, 255, 255, 0.62);
            text-align: right;
        }
        .strat-sector-bar-track {
            flex: 1;
            height: 6px;
            border-radius: 3px;
            background: rgba(255,255,255,0.05);
            overflow: hidden;
        }
        .strat-sector-bar-fill {
            height: 100%;
            border-radius: 3px;
            background: linear-gradient(90deg, rgba(96,165,250,0.6), rgba(96,165,250,0.9));
            transition: width 0.4s ease;
        }
        .strat-sector-bar-pct {
            width: 36px;
            text-align: right;
            font-family: var(--font-number);
            font-size: var(--text-xs);
            color: rgba(255, 255, 255, 0.62);
        }

        /* Strategy Research Boxes */
        .strat-research-box {
            padding: 16px 20px;
            border-radius: 10px;
            border: 1px solid var(--border-subtle);
            background: rgba(255,255,255,0.02);
        }
        .strat-research-box-title {
            font-size: var(--text-xs);
            font-weight: 200;
            color: rgba(255, 255, 255, 0.62);
            letter-spacing: 0.08em;
            margin-bottom: 8px;
        }
        .strat-research-box-text {
            font-size: var(--text-md);
            color: rgba(255,255,255,0.75);
            line-height: 1.6;
        }
        .strat-research-box.strength { border-color: rgba(34,197,94,0.25); }
        .strat-research-box.weakness { border-color: rgba(239,68,68,0.25); }
        .strat-research-box.when-works { border-color: rgba(96,165,250,0.25); }
        .strat-research-box.risk-profile { border-color: rgba(251,146,60,0.25); }

        /* Strategy panel range tabs */
        .sp-range-tab {
            font-size: var(--text-base);
            padding: 3px 8px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-sm);
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            font-weight: 200;
            transition: all 0.15s;
        }
        .sp-range-tab.active { background: rgba(20,184,216,0.12); color: #fff; border-color: rgba(20,184,216,0.3); }
        .sp-range-tab:hover:not(.active) { background: rgba(255,255,255,0.04); }

        /* Chart container & range tabs (shared between stock/strategy panels) */
        .chart-container {
            position: relative;
            height: 200px;
            margin-top: 8px;
        }
        .chart-container canvas { width: 100% !important; height: 100% !important; }
        .chart-range-tabs {
            display: flex;
            gap: 4px;
        }
        .chart-range-tabs .sp-range-tab {
            font-size: var(--text-base);
            padding: 2px 6px;
        }
        .annual-returns-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--text-xs);
        }
        .annual-returns-table th {
            font-weight: 200;
            text-align: left;
            padding: 6px 8px;
            color: rgba(255, 255, 255, 0.62);
            border-bottom: 1px solid rgba(255,255,255,0.06);
            font-size: var(--text-base);
        
            letter-spacing: 0.04em;
        }
        .annual-returns-table td {
            padding: 5px 8px;
            border-bottom: 1px solid rgba(255,255,255,0.03);
            font-family: var(--font-number);
            color: rgba(255,255,255,0.7);
        }
        .annual-returns-table tr:hover { background: rgba(255,255,255,0.02); }
        .changes-column {
            flex: 1;
        }
        .changes-column h4 {
            font-size: var(--text-xs);
            font-weight: 200;
            margin-bottom: 6px;
        }
        .changes-column.added h4 { color: var(--accent-positive); }
        .changes-column.removed h4 { color: var(--accent-negative); }
        .changes-grid {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }
        .changes-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
        }
        .change-chip {
            font-family: var(--font-number);
            font-size: var(--text-md);
            padding: 0.3rem 0.55rem;
            border-radius: 6px;
            font-weight: 200;
            letter-spacing: 0.02em;
            text-decoration: none;
        }
        .change-chip.added {
            color: #666666;
            border: 1px solid rgba(128,128,128,0.2);
        }
        .change-chip.removed {
            color: #666666;
            border: 1px solid rgba(239,68,68,0.2);
        }
        .no-changes {
            font-size: var(--text-base);
            color: var(--text-muted);
            opacity: 0.6;
        }

        /* Panel Tabs - Table Header Row Style */
        .panel-tabs {
            display: flex;
            gap: 2px;
            padding: 0 20px 0;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            background: transparent;
            border-bottom: none;
        }
        .panel-tabs::-webkit-scrollbar { display: none; }

        .panel-tab {
            flex: 1 1 0;
            text-align: center;
            padding: 7px 8px;
            font-family: 'DM Sans', sans-serif;
            font-size: var(--text-2xs);
            font-weight: 300;
            letter-spacing: 0.03em;
            color: rgba(255, 255, 255, 0.5);
            border: none;
            border-bottom: none;
            border-radius: 6px;
            background: transparent;
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
        }
        .panel-tab:last-child { border-right: none; }
        .panel-tab::before { content: none; }
        .panel-tab .tab-icon {
            display: inline;
            margin-right: 3px;
            color: inherit;
            font-size: var(--text-2xs);
            transition: color 0.15s ease;
        }
        .panel-tab:hover {
            color: rgba(255,255,255,0.85);
            background: rgba(255,255,255,0.05);
        }
        .panel-tab:hover .tab-icon {
            color: rgba(212,175,55,0.7);
        }
        .panel-tab.active {
            color: #fff;
            background: rgba(212,175,55,0.1);
            border-bottom: none;
            box-shadow: inset 0 0 0 1px rgba(212,175,55,0.2);
        }
        .panel-tab.active .tab-icon { color: rgba(212,175,55,0.9); }
        .panel-tab-content { display: none; padding: 0; }
        .panel-tab-content.active { display: block; }

        /* Fundamentals Field (valuation range) */
        .fundamentals-field { display: flex; flex-direction: column; gap: 12px; }
        .field-row { display: grid; grid-template-columns: 55px 1fr 70px; align-items: center; gap: 10px; }
        .field-label { font-size: var(--text-2xs); color: var(--text-muted); }
        .field-bar { height: 6px; border-radius: 3px; position: relative; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.06); }
        .field-range { position: absolute; top: 1px; bottom: 1px; border-radius: 2px; background: rgba(212,175,55,0.35); }
        .field-values { font-family: var(--font-number); font-size: var(--text-2xs); color: var(--text-secondary); text-align: right; }

        /* Side-panel: consistent 24px margins everywhere */
        .panel-tab-content {
            padding: 0 20px 20px;
        }

        .panel-section {
            margin: 8px 0;
            padding: 14px 16px;
            background: rgba(255,255,255,0.02) !important;
            border: 1px solid rgba(255,255,255,0.04) !important;
            border-radius: 14px !important;
            transition: background 0.2s, border-color 0.2s;
        }
        .panel-section:hover { border-color: rgba(212,175,55,0.12) !important; background: rgba(255,255,255,0.03) !important; }
        .panel-section:first-child { margin-top: 8px; }
        .panel-section:last-child { margin-bottom: 8px; }

        .panel-section-title {
            margin-bottom: 10px;
        }

        /* Collapsible panel sections */
        .panel-section-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            color: inherit;
            font: inherit;
            text-align: left;
        }
        .panel-section-toggle .panel-section-title {
            margin-bottom: 0;
            pointer-events: none;
        }
        .panel-section-toggle .toggle-chevron {
            font-size: var(--text-md);
            color: var(--text-muted, #666);
            transition: transform 0.25s ease;
            flex-shrink: 0;
            margin-left: 8px;
        }
        .panel-section.collapsed .toggle-chevron {
            transform: rotate(-90deg);
        }
        .panel-section-body {
            overflow: hidden;
            transition: max-height 0.3s ease, opacity 0.25s ease;
            max-height: 2000px;
            opacity: 1;
        }
        .panel-section.collapsed .panel-section-body {
            max-height: 0;
            opacity: 0;
            margin-top: 0;
        }
        .panel-section:not(.collapsed) .panel-section-body {
            margin-top: 10px;
        }

        /* Section accent border for key sections */
        .panel-section[data-section-type="primary"] {
            border-left: 3px solid rgba(6, 182, 212, 0.4) !important;
            padding-left: 12px !important;
        }

        .panel-grid {
            margin: 0;
        }

        .comparison-chart {
            margin: 8px 0;
        }

        .tab-header-stats {
            margin: 10px 0 6px !important;
        }

        /* Tab Header Stats Row */
        .tab-header-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 0;
            padding: 0;
            margin: 0;
            background: rgba(255,255,255,0.02);
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
        }
        .tab-header-stat {
            padding: 10px 8px;
            text-align: center;
            border-right: 1px solid var(--border-subtle);
            background: rgba(255,255,255,0.015);
            transition: background 0.2s;
        }
        .tab-header-stat:first-child { border-radius: 8px 0 0 8px; }
        .tab-header-stat:last-child { border-right: none; border-radius: 0 8px 8px 0; }
        .tab-header-stat:hover { background: rgba(255,255,255,0.04); }
        .tab-header-stat-label {
            font-size: var(--text-base);
            letter-spacing: 0.06em;
            color: rgba(255, 255, 255, 0.62);
            margin-bottom: 4px;
        }
        .tab-header-stat-value {
            font-family: var(--font-number);
            font-size: var(--text-base);
            font-weight: 200;
            color: #fff;
        }
        .tab-header-stat-value.positive { color: var(--accent-positive); }
        .tab-header-stat-value.negative { color: var(--accent-negative); }

        /* Reset structural containers in side-panel */
        .side-panel .panel-grid,
        .side-panel .quick-analysis {
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        /* Reset only box-shadow on semantic components */
        .side-panel .valuation-verdict,
        .side-panel .consensus-box,
        .side-panel .research-thesis-box,
        .side-panel .thesis-box,
        .side-panel .scenario-target-box,
        .side-panel .scenario-reasoning-box,
        .side-panel .scenario-prob-box,
        .side-panel .upside-card,
        .side-panel .catalyst-card,
        .side-panel .risk-card,
        .side-panel .extended-card {
            box-shadow: none !important;
        }

        /* Summary tags - simpler style */
        .side-panel .summary-tag,
        .side-panel .trend-tag {
            background: transparent !important;
            border: 1px solid var(--border-subtle) !important;
        }
        .panel-section-title {
            font-family: var(--font-display, var(--font-heading));
            font-size: var(--text-md);
            letter-spacing: 0.05em;
            color: rgba(255, 255, 255, 0.62);
            font-weight: 200;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            background: transparent !important;
            box-shadow: none !important;
        }
        /* Analysis text boxes for each section */
        .section-analysis {
            background: rgba(255,255,255,0.03);
            border-left: 3px solid rgba(255,255,255,0.15);
            padding: 8px 12px;
            margin-top: 8px;
            font-size: var(--text-md);
            color: var(--text-secondary, rgba(255,255,255,0.6));
            line-height: 1.5;
            border-radius: 0 4px 4px 0;
        }
        /* Interactive scatter controls */
        .scatter-controls {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }
        .scatter-control-group {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .scatter-control-group label {
            font-size: var(--text-md);
            color: rgba(255, 255, 255, 0.62);
            /* text-transform: none */
            letter-spacing: 0.05em;
        }
        .scatter-btn {
            padding: 3px 8px;
            font-size: var(--text-xs);
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            color: rgba(255, 255, 255, 0.62);
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.15s;
        }
        .scatter-btn:hover {
            background: rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.8);
        }
        .scatter-btn.active {
            background: rgba(20,184,216,0.15);
            border-color: rgba(20,184,216,0.4);
            color: rgba(212,175,55,0.8);
        }
        /* Returns bar chart */
        .returns-bar-chart {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .returns-bar-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .returns-bar-label {
            width: 48px;
            font-size: var(--text-base);
            color: rgba(255, 255, 255, 0.62);
            text-align: right;
            flex-shrink: 0;
        }
        .returns-bar-track {
            flex: 1;
            height: 18px;
            background: rgba(255,255,255,0.04);
            border-radius: 3px;
            position: relative;
            overflow: hidden;
        }
        .returns-bar-fill {
            position: absolute;
            top: 0;
            height: 100%;
            border-radius: 3px;
            transition: width 0.3s;
        }
        .returns-bar-value {
            width: 52px;
            font-size: var(--text-base);
            text-align: left;
            flex-shrink: 0;
        }
        /* Multiples grouped bars */
        .multiples-chart-group {
            margin-bottom: 12px;
        }
        .multiples-chart-label {
            font-size: var(--text-xs);
            color: rgba(255, 255, 255, 0.62);
            margin-bottom: 4px;
            /* text-transform: none */
            letter-spacing: 0.05em;
        }
        .multiples-bar-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 3px;
        }
        .multiples-bar-year {
            width: 44px;
            font-size: var(--text-xs);
            color: rgba(255, 255, 255, 0.62);
            text-align: right;
            flex-shrink: 0;
        }
        .multiples-bar-track {
            flex: 1;
            height: 20px;
            background: rgba(255,255,255,0.04);
            border-radius: 3px;
            position: relative;
            overflow: hidden;
        }
        .multiples-bar-fill {
            height: 100%;
            border-radius: 3px;
            display: flex;
            align-items: center;
            padding-left: 6px;
            font-size: var(--text-xs);
            color: #fff;
            transition: width 0.3s;
        }
        .multiples-sector-line {
            position: absolute;
            top: 0;
            height: 100%;
            width: 2px;
            background: rgba(255,255,255,0.4);
            z-index: 1;
        }
        .multiples-sector-label {
            position: absolute;
            top: -14px;
            font-size: var(--text-2xs);
            color: rgba(255, 255, 255, 0.5);
            transform: translateX(-50%);
            white-space: nowrap;
        }

        .panel-group-label {
            font-family: var(--font-body);
            font-size: var(--text-2xs);
            letter-spacing: 0.1em;
            color: rgba(212,175,55,0.6);
            padding: 1.25rem 0 0.4rem;
            margin: 0;
            font-weight: 300;
        }

        .side-panel .preview-ticker,
        .side-panel .preview-mini-target-price {
            color: var(--accent-neutral);
        }

        .panel-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        .panel-metric {
            display: flex;
            flex-direction: column;
            gap: 2px;
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            background: linear-gradient(145deg, rgba(255,255,255,0.02) 0%, transparent 100%) !important;
            box-shadow: none !important;
            border-radius: var(--radius-md) !important;
            padding: 0.5rem !important;
            transition: all 0.2s ease;
        }
        .panel-metric:hover {
            border-color: rgba(255, 255, 255, 0.08) !important;
            background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, transparent 100%) !important;
        }
        .panel-metric-label,
        .panel-metric-value {
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }
        .panel-metric-label { font-family: var(--font-body); font-size: var(--text-2xs); color: rgba(255, 255, 255, 0.5); letter-spacing: 0.06em; }
        .panel-metric-value { font-family: var(--font-number); font-size: var(--text-sm); font-weight: 300; color: #f1f5f9; }

        /* Range Chart */
        .range-chart-container {
            padding: 1rem 0;
        }
        .range-track {
            position: relative;
            height: 8px;
            background: linear-gradient(90deg, #f87171 0%, #fbbf24 50%, #4ade80 100%);
            border-radius: var(--radius-sm);
            margin: 0 0 8px;
        }
        .range-marker {
            position: absolute;
            top: -4px;
            width: 16px;
            height: 16px;
            background: #fff;
            border: 3px solid #3b82f6;
            border-radius: 50%;
            transform: translateX(-50%);
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }
        .range-labels {
            display: flex;
            justify-content: space-between;
            font-size: var(--text-md);
            color: var(--text-muted);
        }
        .range-labels .current {
            color: #3b82f6;
            font-weight: 200;
        }

        /* Growth Bars Chart */
        .growth-bars-chart {
            display: flex;
            gap: 8px;
            align-items: flex-end;
            height: 100px;
            padding: 0.5rem 0;
        }
        .growth-bar-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
        }
        .growth-bar {
            width: 100%;
            border-radius: var(--radius-sm) var(--radius-sm) 0 0;
            transition: height 0.3s ease;
        }
        .growth-bar.positive { background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%); }
        .growth-bar.negative { background: linear-gradient(180deg, #f87171 0%, #ef4444 100%); }
        .growth-bar.neutral { background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%); }
        .growth-bar-value {
            font-family: var(--font-number);
            font-size: var(--text-xs);
            font-weight: 200;
            min-width: 55px;
            text-align: right;
        }
        .growth-bar-value.positive { color: #4ade80; }
        .growth-bar-value.negative { color: #ef4444; }
        .growth-bar-label {
            font-size: var(--text-base);
            color: var(--text-muted);
            white-space: nowrap;
            min-width: 100px;
        }

        /* Margin Chart */
        .margin-chart {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 0.5rem 0;
        }
        .margin-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .margin-label {
            width: 70px;
            font-size: var(--text-md);
            color: var(--text-muted);
        }
        .margin-bar-bg {
            flex: 1;
            height: 12px;
            background: rgba(255,255,255,0.05);
            border-radius: 6px;
            overflow: hidden;
        }
        .margin-bar-fill {
            height: 100%;
            border-radius: 6px;
            transition: width 0.4s ease;
        }
        .margin-bar-fill.gross { background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%); }
        .margin-bar-fill.operating { background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%); }
        .margin-bar-fill.net { background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%); }
        .margin-value {
            width: 50px;
            text-align: right;
            font-family: var(--font-number);
            font-size: var(--text-md);
            font-weight: 200;
        }

        /* Target Range Chart */
        .target-range-chart {
            padding: 1rem 0;
        }
        .target-scale {
            position: relative;
            height: 40px;
            background: rgba(255,255,255,0.03);
            border-radius: var(--radius-md);
            margin-bottom: 8px;
        }
        .target-zone {
            position: absolute;
            top: 8px;
            height: 24px;
            background: linear-gradient(90deg, rgba(248,113,113,0.3) 0%, rgba(251,191,36,0.3) 50%, rgba(74,222,128,0.3) 100%);
            border-radius: var(--radius-sm);
        }
        .target-current {
            position: absolute;
            top: 4px;
            width: 3px;
            height: 32px;
            background: #fff;
            border-radius: 2px;
        }
        .target-labels {
            display: flex;
            justify-content: space-between;
            font-size: var(--text-md);
        }
        .target-labels .bear { color: #ef4444; }
        .target-labels .base { color: #fbbf24; }
        .target-labels .bull { color: #4ade80; }

        /* Sector Comparison */
        .sector-comparison-chart {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0.5rem 0;
        }
        .sector-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .sector-metric {
            width: 60px;
            font-size: var(--text-base);
            color: var(--text-muted);
        }
        .sector-bars {
            flex: 1;
            display: flex;
            gap: 4px;
        }
        .sector-bar-container {
            flex: 1;
            height: 18px;
            background: rgba(255,255,255,0.05);
            border-radius: var(--radius-sm);
            overflow: hidden;
            position: relative;
        }
        .sector-bar-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            border-radius: var(--radius-sm);
        }
        .sector-bar-fill.stock { background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%); }
        .sector-bar-fill.sector { background: linear-gradient(90deg, rgba(148, 163, 184, 0.5) 0%, rgba(148, 163, 184, 0.3) 100%); }
        .sector-value {
            width: 50px;
            text-align: right;
            font-family: var(--font-number);
            font-size: var(--text-md);
        }
        .sector-value.better { color: #4ade80; }
        .sector-value.worse { color: #ef4444; }

        /* Scatter Plot Container */
        .scatter-plot-container {
            position: relative;
            height: 220px;
            background: rgba(0,0,0,0.2);
            border-radius: var(--radius-md);
            padding: 12px;
            overflow: hidden;
        }
        .scatter-axis-y {
            position: absolute;
            left: 0;
            top: 10px;
            bottom: 25px;
            width: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: var(--text-base);
            color: var(--text-muted);
            text-align: right;
            padding-right: 4px;
        }
        .scatter-axis-x {
            position: absolute;
            left: 35px;
            right: 10px;
            bottom: 0;
            height: 20px;
            display: flex;
            justify-content: space-between;
            font-size: var(--text-base);
            color: var(--text-muted);
        }
        .scatter-area {
            position: absolute;
            left: 35px;
            right: 10px;
            top: 10px;
            bottom: 25px;
            border-left: 1px solid rgba(255,255,255,0.1);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .scatter-grid-line {
            position: absolute;
            background: rgba(255,255,255,0.03);
        }
        .scatter-grid-line.horizontal {
            left: 0;
            right: 0;
            height: 1px;
        }
        .scatter-grid-line.vertical {
            top: 0;
            bottom: 0;
            width: 1px;
        }
        .scatter-point {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            transition: all 0.2s ease;
            opacity: 0.6;
        }
        .scatter-point:hover {
            transform: translate(-50%, -50%) scale(1.5);
            opacity: 1;
            z-index: 10;
        }
        .scatter-point.current {
            width: 14px;
            height: 14px;
            opacity: 1;
            border: 3px solid #fff;
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
            z-index: 20;
        }
        .scatter-point.sector { background: rgba(148, 163, 184, 0.5); }
        .scatter-point.highlight { background: #3b82f6; }
        .scatter-point.bullish { background: #4ade80; }
        .scatter-point.bearish { background: #ef4444; }
        .scatter-tooltip {
            position: absolute;
            background: rgba(0,0,0,0.9);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 6px;
            padding: 6px 10px;
            font-size: var(--text-base);
            color: #fff;
            pointer-events: none;
            white-space: nowrap;
            z-index: 100;
            opacity: 0;
            transition: opacity 0.15s;
        }
        .scatter-tooltip.visible { opacity: 1; }
        .scatter-legend {
            position: absolute;
            top: 5px;
            right: 5px;
            display: flex;
            gap: 8px;
            font-size: var(--text-base);
            color: var(--text-muted);
        }
        .scatter-legend-item {
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .scatter-legend-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }
        .scatter-section .panel-section-title { margin-bottom: 8px; }
        .scatter-question {
            font-size: var(--text-md);
            font-weight: 200;
            color: rgba(255,255,255,0.85);
            margin-bottom: 4px;
            letter-spacing: -0.01em;
        }
        .scatter-explainer {
            font-size: var(--text-base);
            color: rgba(255, 255, 255, 0.62);
            line-height: 1.55;
            margin-top: 8px;
        }
        .scatter-tag {
            font-size: var(--text-base);
            font-weight: 200;
            letter-spacing: 0.06em;
            padding: 2px 7px;
            border-radius: 10px;
            vertical-align: middle;
            margin-left: 6px;
        }
        .scatter-tag.technical { background: rgba(100, 150, 255, 0.12); color: #7eb3ff; }
        .scatter-tag.fundamental { background: rgba(0, 200, 120, 0.1); color: #4ecb71; }
        .scatter-tag.combination { background: rgba(255, 180, 50, 0.1); color: #f0b040; }

        /* Chart No Data */
        .chart-no-data {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 60px;
            color: var(--text-muted);
            font-size: var(--text-base);
            font-style: italic;
        }

        /* Range Bar (52 week) */
        .range-bar {
            position: relative;
            height: 12px;
            margin: 15px 0;
        }
        .range-marker-tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0,0,0,0.8);
            color: #fff;
            padding: 3px 8px;
            border-radius: var(--radius-sm);
            font-size: var(--text-md);
            font-family: var(--font-number);
            white-space: nowrap;
            margin-bottom: 4px;
        }
        .range-label-low, .range-label-high {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .range-label-mid {
            text-align: center;
        }
        .range-price {
            font-family: var(--font-number);
            font-size: var(--text-md);
            font-weight: 200;
        }
        .range-desc {
            font-size: var(--text-base);
            color: var(--text-muted);
        }
        .range-pct {
            font-family: var(--font-number);
            font-size: var(--text-base);
        }
        .range-pct.positive { color: #4ade80; }
        .range-pct.negative { color: #ef4444; }

        /* Growth Bars Grid */
        .growth-bars-grid {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .growth-bar-track {
            flex: 1;
            height: 10px;
            background: rgba(255,255,255,0.05);
            border-radius: 5px;
            overflow: hidden;
        }
        .growth-bar-fill {
            height: 100%;
            border-radius: 5px;
            transition: width 0.4s ease;
        }
        .growth-bar-fill.strong-positive { background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%); }
        .growth-bar-fill.positive { background: linear-gradient(90deg, #65a30d 0%, #84cc16 100%); }
        .growth-bar-fill.negative { background: linear-gradient(90deg, #ea580c 0%, #f97316 100%); }
        .growth-bar-fill.strong-negative { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); }
        .growth-bar-fill.neutral { background: rgba(148, 163, 184, 0.5); }
        .growth-bar-value.strong-positive { color: #4ade80; }
        .growth-bar-value.strong-negative { color: #ef4444; }

        /* Margin Bars */
        .margin-bars {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .margin-bar-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .margin-track {
            flex: 1;
            height: 10px;
            background: rgba(255,255,255,0.05);
            border-radius: 5px;
            overflow: hidden;
        }
        .margin-fill {
            height: 100%;
            border-radius: 5px;
        }
        .margin-fill.gross { background: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%); }
        .margin-fill.operating { background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%); }
        .margin-fill.net { background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%); }
        .margin-fill.net.negative { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); }
        .margin-value.negative { color: #ef4444; }

        /* MA Visual */
        .ma-visual {
            padding: 10px 0;
        }
        .ma-track {
            position: relative;
            height: 30px;
            background: linear-gradient(90deg, rgba(239,68,68,0.1) 0%, rgba(255,255,255,0.03) 50%, rgba(74,222,128,0.1) 100%);
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .ma-marker {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--text-base);
            font-weight: 200;
        }
        .ma-marker.ma50 { background: rgba(251,191,36,0.3); border: 2px solid #fbbf24; }
        .ma-marker.ma200 { background: rgba(168,85,247,0.3); border: 2px solid #a855f7; }
        .ma-marker.price-marker { background: #3b82f6; border: 2px solid #fff; color: #fff; }
        .ma-status {
            display: flex;
            gap: 12px;
            font-size: var(--text-md);
        }
        .ma-status .bullish { color: #4ade80; }
        .ma-status .bearish { color: #ef4444; }

        /* Sparkline SVG */
        .sparkline-svg {
            width: 100%;
            height: 60px;
        }
        .sparkline-labels {
            display: flex;
            justify-content: space-between;
            font-size: var(--text-base);
            color: var(--text-muted);
            margin-top: 4px;
        }

        /* Target Range */
        .target-range {
            padding: 10px 0;
        }
        .target-track {
            position: relative;
            height: 24px;
            background: rgba(255,255,255,0.03);
            border-radius: 6px;
            margin-bottom: 8px;
        }
        .target-marker {
            position: absolute;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .target-marker.median {
            width: 3px;
            height: 20px;
            background: #fbbf24;
            border-radius: 2px;
        }
        .target-marker.median span,
        .target-marker.current span {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            font-size: var(--text-base);
            white-space: nowrap;
            margin-bottom: 2px;
        }
        .target-marker.current {
            width: 10px;
            height: 10px;
            background: #3b82f6;
            border: 2px solid #fff;
            border-radius: 50%;
        }
        .target-label {
            font-size: var(--text-md);
            color: var(--text-muted);
        }
        .target-label.upside.positive { color: #4ade80; }
        .target-label.upside.negative { color: #ef4444; }

        /* PE Timeline */
        .pe-timeline {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 10px 0;
        }
        .pe-item {
            text-align: center;
        }
        .pe-year {
            font-size: var(--text-base);
            color: var(--text-muted);
            margin-bottom: 4px;
        }
        .pe-value {
            font-family: var(--font-number);
            font-size: var(--text-md);
            font-weight: 200;
        }
        .pe-arrow {
            font-size: var(--text-md);
            color: var(--text-muted);
        }
        .pe-change {
            font-family: var(--font-number);
            font-size: var(--text-base);
            padding: 3px 8px;
            border-radius: var(--radius-sm);
        }
        .pe-change.compression { background: rgba(74,222,128,0.2); color: #4ade80; }
        .pe-change.expansion { background: rgba(239,68,68,0.2); color: #ef4444; }

        /* Quality Bars */
        .quality-bars {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .quality-bar-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .quality-label {
            width: 55px;
            font-size: var(--text-base);
            color: var(--text-muted);
        }
        .quality-track {
            flex: 1;
            height: 8px;
            background: rgba(255,255,255,0.05);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }
        .quality-fill.high { background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%); }
        .quality-fill.mid { background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); }
        .quality-fill.low { background: linear-gradient(90deg, #dc2626 0%, #ef4444 100%); }
        .quality-value {
            width: 25px;
            text-align: right;
            font-family: var(--font-number);
            font-size: var(--text-md);
        }

        /* Risk Gauge SVG */
        .risk-gauge {
            text-align: center;
            padding: 10px 0;
        }
        .gauge-arc {
            width: 120px;
            margin: 0 auto 10px;
        }
        .gauge-arc svg {
            width: 100%;
            height: auto;
        }
        .gauge-label {
            font-size: var(--text-md);
            font-weight: 200;
            margin-bottom: 4px;
        }
        .gauge-label.low { color: #4ade80; }
        .gauge-label.moderate { color: #fbbf24; }
        .gauge-label.high { color: #ef4444; }
        .gauge-metrics {
            display: flex;
            justify-content: center;
            gap: 16px;
            font-size: var(--text-md);
            color: var(--text-muted);
        }

        /* Volume Display */
        .volume-display {
            display: flex;
            gap: 16px;
        }
        .volume-metric {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .volume-label {
            font-size: var(--text-base);
            color: var(--text-muted);
            /* text-transform: none */
        }
        .volume-value {
            font-family: var(--font-number);
            font-size: var(--text-base);
            font-weight: 200;
        }
        .volume-value.high { color: #4ade80; }
        .volume-value.low { color: #ef4444; }

        /* Sector Comparison */
        .sector-comparison {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .sector-row {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }
        .sector-row-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .sector-metric-label {
            font-size: var(--text-md);
            color: var(--text-secondary);
        }
        .sector-diff {
            font-family: var(--font-number);
            font-size: var(--text-md);
        }
        .sector-diff.better { color: #4ade80; }
        .sector-diff.worse { color: #ef4444; }
        .sector-bar-pair {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .sector-bar-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .sector-bar-label {
            width: 42px;
            font-size: var(--text-base);
            color: var(--text-muted);
            text-align: right;
            flex-shrink: 0;
        }
        .sector-bar-track {
            flex: 1;
            height: 10px;
            background: rgba(255,255,255,0.04);
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }
        .sector-bar-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        .sector-bar-fill.stock { background: #60a5fa; }
        .sector-bar-fill.sector { background: rgba(148, 163, 184, 0.4); }
        .sector-bar-val {
            width: 40px;
            font-family: var(--font-number);
            font-size: var(--text-md);
            text-align: right;
            flex-shrink: 0;
        }
        .sector-bar-val.stock { color: #60a5fa; }
        .sector-bar-val.sector { color: var(--text-muted); }
        .sector-peers-count {
            font-size: var(--text-base);
            color: var(--text-muted);
            margin-top: 4px;
        }

        /* Scatter SVG */
        .scatter-svg {
            width: 100%;
            height: 100%;
        }
        .scatter-svg .scatter-point {
            cursor: pointer;
            transition: all 0.15s;
        }
        .scatter-svg .scatter-point:hover {
            r: 8;
        }
        .scatter-svg .scatter-point.current {
            stroke: #fff;
            stroke-width: 2;
        }
        .scatter-legend {
            display: flex;
            gap: 12px;
            font-size: var(--text-base);
            color: var(--text-muted);
            margin-top: 6px;
        }
        .legend-current { color: #f59e0b; }
        .legend-peers { color: rgba(255, 255, 255, 0.62); }
        .legend-zone { color: rgba(74,222,128,0.7); }

        /* Interactive Chart Container */
        .interactive-chart-container {
            padding: 0.5rem 0;
        }
        .chart-controls {
            display: flex;
            gap: 4px;
            margin-bottom: 10px;
        }
        .chart-range-btn {
            font-family: var(--font-body);
            font-size: var(--text-base);
            padding: 4px 10px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: var(--radius-sm);
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.15s;
        }
        .chart-range-btn:hover {
            border-color: rgba(255,255,255,0.2);
            color: var(--text-secondary);
        }
        .chart-range-btn.active {
            border-color: rgba(212, 175, 55, 0.4);
            background: rgba(212, 175, 55, 0.12);
            color: rgba(212,175,55,0.8);
        }
        .mini-line-chart {
            position: relative;
            height: 100px;
            background: rgba(0,0,0,0.2);
            border-radius: 6px;
            overflow: hidden;
        }
        .line-chart-path {
            fill: none;
            stroke: #3b82f6;
            stroke-width: 2;
        }
        .line-chart-area {
            fill: url(#chartGradient);
        }
        .line-chart-hover {
            position: absolute;
            width: 1px;
            top: 0;
            bottom: 0;
            background: rgba(255,255,255,0.3);
            pointer-events: none;
            opacity: 0;
        }
        .line-chart-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #3b82f6;
            border: 2px solid #fff;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            opacity: 0;
        }
        .mini-line-chart:hover .line-chart-hover,
        .mini-line-chart:hover .line-chart-dot {
            opacity: 1;
        }
        .chart-price-label {
            position: absolute;
            top: 5px;
            left: 5px;
            font-family: var(--font-number);
            font-size: var(--text-md);
            color: #fff;
            background: rgba(0,0,0,0.6);
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            opacity: 0;
            transition: opacity 0.15s;
        }
        .mini-line-chart:hover .chart-price-label { opacity: 1; }

        /* Price Line SVG */
        .price-line-svg {
            width: 100%;
            height: 100%;
        }
        .price-chart-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
            padding: 0 4px;
        }
        .current-price {
            font-family: var(--font-number);
            font-size: var(--text-base);
            font-weight: 200;
        }
        .price-change {
            font-family: var(--font-number);
            font-size: var(--text-md);
            font-weight: 200;
        }
        .price-change.positive { color: #4ade80; }
        .price-change.negative { color: #ef4444; }

        /* Growth Sparks */
        .spark-grid { display: grid; gap: 12px; }
        .spark-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; }
        .spark-label { font-family: var(--font-body); font-size: var(--text-base); /* text-transform: none */ letter-spacing: 0.08em; color: var(--text-muted); }
        .spark-bars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .spark-bar {
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: var(--radius-md);
            padding: 6px 8px;
            background: rgba(255,255,255,0.02);
        }
        .spark-fill {
            height: 6px;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(120,180,255,0.75), rgba(180,120,255,0.95));
            margin-bottom: 6px;
        }
        .spark-val { font-family: var(--font-number); font-size: var(--text-md); color: #e6e9ef; }
        .spark-cap { font-family: var(--font-body); font-size: var(--text-base); /* text-transform: none */ letter-spacing: 0.08em; color: var(--text-muted); margin-top: 2px; }

        /* Fundamentals Combo */
        .fundamentals-combo {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        .combo-card {
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: var(--radius-lg);
            padding: 12px;
            background: rgba(255,255,255,0.02);
        }
        .combo-title {
            font-family: var(--font-body);
            font-size: var(--text-base);
            /* text-transform: none */
            letter-spacing: 0.08em;
            color: var(--text-muted);
            margin-bottom: 10px;
        }
        .combo-row { display: grid; grid-template-columns: 70px 1fr 46px; gap: 10px; align-items: center; }
        .combo-row + .combo-row { margin-top: 8px; }
        .combo-label { font-family: var(--font-body); font-size: var(--text-base); /* text-transform: none */ letter-spacing: 0.06em; color: var(--text-muted); }
        .combo-bar {
            height: 6px;
            border-radius: 6px;
            background: rgba(255,255,255,0.08);
            overflow: hidden;
        }
        .combo-fill {
            height: 100%;
            border-radius: 6px;
            background: linear-gradient(90deg, rgba(120,220,255,0.7), rgba(255,210,120,0.95));
        }
        .combo-val { font-family: var(--font-number); font-size: var(--text-base); color: #e6e9ef; text-align: right; }

        /* DCF Strip */
        .dcf-strip {
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: var(--radius-lg);
            padding: 12px;
            background: rgba(255,255,255,0.02);
        }
        .dcf-strip-head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 10px;
        }
        .dcf-strip-title { font-family: var(--font-body); font-size: var(--text-base); /* text-transform: none */ letter-spacing: 0.08em; color: var(--text-muted); }
        .dcf-strip-value { font-family: var(--font-number); font-size: var(--text-md); font-weight: 200; color: #e6e9ef; }
        .dcf-strip-bar {
            position: relative;
            height: 8px;
            border-radius: var(--radius-md);
            background: rgba(255,255,255,0.08);
            overflow: hidden;
        }
        .dcf-strip-fill {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            border-radius: var(--radius-md);
            background: linear-gradient(90deg, rgba(120,180,255,0.75), rgba(255,120,200,0.95));
        }
        .dcf-strip-marker {
            position: absolute;
            top: -4px;
            width: 2px;
            height: 16px;
            background: #e6e9ef;
            border-radius: 2px;
        }
        .dcf-strip-note { font-family: var(--font-body); font-size: var(--text-base); color: var(--text-secondary); margin-top: 8px; }

        .dcf-tester {
            display: grid;
            gap: 12px;
        }
        .dcf-tester-row {
            display: grid;
            grid-template-columns: 120px 1fr 60px;
            gap: 12px;
            align-items: center;
        }
        .dcf-tester-label {
            font-family: var(--font-body);
            font-size: var(--text-base);
            /* text-transform: none */
            letter-spacing: 0.08em;
            color: var(--text-muted);
        }
        .dcf-tester-value {
            font-family: var(--font-number);
            font-size: var(--text-md);
            color: #e6e9ef;
            text-align: right;
        }
        .dcf-tester input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 6px;
            background: rgba(255,255,255,0.08);
            outline: none;
        }
        .dcf-tester input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #e6e9ef;
            border: 1px solid rgba(255,255,255,0.3);
        }

        /* Multiple Trend */
        .multiple-trend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .trend-card {
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: var(--radius-lg);
            padding: 12px;
            background: rgba(255,255,255,0.02);
        }
        .trend-card-title { font-family: var(--font-body); font-size: var(--text-base); /* text-transform: none */ letter-spacing: 0.08em; color: var(--text-muted); }
        .trend-card-value { font-family: var(--font-number); font-size: var(--text-md); font-weight: 200; color: #e6e9ef; margin: 6px 0; }
        .trend-card-note { font-family: var(--font-body); font-size: var(--text-base); color: var(--text-secondary); }

        /* Trend Score */
        .trend-score {
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: var(--radius-lg);
            padding: 14px;
            background: rgba(255,255,255,0.02);
        }
        .trend-score-head {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 8px;
        }
        .trend-score-title { font-family: var(--font-body); font-size: var(--text-base); /* text-transform: none */ letter-spacing: 0.08em; color: var(--text-muted); }
        .trend-score-value { font-family: var(--font-number); font-size: var(--text-md); font-weight: 200; color: #e6e9ef; }
        .trend-score-bar { height: 8px; border-radius: var(--radius-md); background: rgba(255,255,255,0.08); overflow: hidden; }
        .trend-score-fill { height: 100%; border-radius: var(--radius-md); background: linear-gradient(90deg, rgba(120,220,255,0.75), rgba(120,255,180,0.95)); }
        .trend-score-note { font-family: var(--font-body); font-size: var(--text-base); color: var(--text-secondary); margin-top: 8px; }

        /* Technical Chart */
        .tech-chart { display: grid; gap: 10px; }
        .tech-chart-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .tech-toggle {
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.04);
            color: var(--text-secondary);
            font-family: var(--font-body);
            font-size: var(--text-base);
            letter-spacing: 0.08em;
            /* text-transform: none */
            border-radius: 999px;
            padding: 6px 10px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .tech-toggle.active {
            background: rgba(20,184,216,0.15);
            color: #fff;
            border-color: rgba(20,184,216,0.3);
        }
        .tech-chart-header {
            font-family: var(--font-number);
            font-size: var(--text-base);
            color: var(--text-secondary);
        }
        .tech-chart-canvas,
        .tech-indicator-canvas {
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: var(--radius-lg);
            padding: 10px;
            background: rgba(255,255,255,0.02);
        }
        .tech-indicator-block {
            margin-top: 10px;
        }
        .tech-indicator-title {
            font-family: var(--font-body);
            font-size: var(--text-base);
            letter-spacing: 0.08em;
            /* text-transform: none */
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        /* Scenario Analysis Boxes */
        .scenario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .scenario-box {
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px;
            padding: 14px 10px;
            text-align: center;
        }
        .scenario-box.bear { border-color: #666666; }
        .scenario-box.base { border-color: #666666; }
        .scenario-box.bull { border-color: #666666; }
        .scenario-box-label { font-size: var(--text-base); /* text-transform: none */ letter-spacing: 0.08em; margin-bottom: 8px; font-weight: 200; }
        .scenario-box.bear .scenario-box-label { color: #666666; }
        .scenario-box.base .scenario-box-label { color: #666666; }
        .scenario-box.bull .scenario-box-label { color: #666666; }
        .scenario-box-price { font-family: var(--font-number); font-size: var(--text-lg); font-weight: 200; margin-bottom: 2px; }
        .scenario-box.bear .scenario-box-price { color: #666666; }
        .scenario-box.base .scenario-box-price { color: #fff; }
        .scenario-box.bull .scenario-box-price { color: #888888; }
        .scenario-box-pct { font-family: var(--font-number); font-size: var(--text-base); font-weight: 200; }
        .scenario-box.bear .scenario-box-pct { color: #666666; }
        .scenario-box.base .scenario-box-pct { color: var(--text-secondary); }
        .scenario-box.bull .scenario-box-pct { color: #888888; }

        /* Momentum labels */
        .momentum-labels {
            display: flex;
            justify-content: space-between;
            font-size: var(--text-base);
            color: var(--text-muted);
            margin-top: -8px;
            margin-bottom: 8px;
        }

        /* Summary Box */
        .panel-summary {
            border: 1px solid rgba(100, 150, 255, 0.15);
            border-radius: 10px;
            padding: 16px 20px;
            margin: 0 0 16px;
        }
        .panel-sparkline-wrap {
            margin: -8px 0 12px;
            padding: 0 4px;
            height: 36px;
        }
        .panel-sparkline-wrap canvas { width: 100%; height: 36px; }
        .summary-title {
            font-family: var(--font-display);
            font-size: var(--text-base);
            color: var(--text-primary);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .summary-title::before {
            content: "AI";
            font-size: var(--text-base);
            font-family: var(--font-number);
            font-weight: 200;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            color: #fff;
        }
        .summary-text {
            font-size: var(--text-md);
            line-height: 1.6;
            color: var(--text-secondary);
        }
        .summary-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 12px;
        }
        .summary-tag {
            font-size: var(--text-base);
            font-weight: 200;
            padding: 4px 10px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .summary-tag.bullish { border-color: rgba(102, 102, 102, 0.3); color: var(--accent-positive); }
        .summary-tag.bearish { border-color: rgba(102, 102, 102, 0.3); color: var(--accent-negative); }
        .summary-tag.neutral { border-color: rgba(102, 102, 102, 0.3); color: var(--accent-warning); }

        .signal-strength-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .signal-strength-label {
            font-family: var(--font-number);
            font-size: var(--text-md);
            font-weight: 200;
            white-space: nowrap;
            min-width: 60px;
        }
        .signal-strength-track {
            flex: 1;
            height: 6px;
            background: linear-gradient(90deg, var(--accent-negative) 0%, var(--accent-warning) 50%, var(--accent-positive) 100%);
            border-radius: 3px;
            position: relative;
        }
        .signal-strength-marker {
            position: absolute;
            top: -5px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid var(--bg-primary);
            transform: translateX(-50%);
            box-shadow: 0 0 6px rgba(0,0,0,0.5);
        }
        .signal-strength-score {
            font-family: var(--font-number);
            font-size: var(--text-base);
            font-weight: 200;
            min-width: 28px;
            text-align: right;
        }

        /* ── Quality Score Gauge (2A) ── */
        .quality-gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
        .quality-gauge svg { width: 48px; height: 48px; }
        .quality-gauge-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 5; }
        .quality-gauge-arc { fill: none; stroke-width: 5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; transition: stroke-dasharray 0.8s ease-out, stroke 0.3s; }
        .quality-gauge-text { font-family: var(--font-number); font-size: var(--text-xs); font-weight: 200; fill: #fff; text-anchor: middle; dominant-baseline: central; }

        /* ── RSI Horizontal Gauge (2B) ── */
        .rsi-gauge { display: flex; flex-direction: column; align-items: center; gap: 3px; }
        .rsi-gauge-track {
            width: 100%; max-width: 120px; height: 6px; border-radius: 3px; position: relative;
            background: linear-gradient(90deg, var(--accent-positive) 0%, var(--accent-positive) 30%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.1) 70%, var(--accent-negative) 70%, var(--accent-negative) 100%);
        }
        .rsi-gauge-marker {
            position: absolute; top: -4px; width: 14px; height: 14px; border-radius: 50%;
            background: #fff; border: 2px solid var(--bg-primary); transform: translateX(-50%);
            box-shadow: 0 0 6px rgba(0,0,0,0.4); transition: left 0.6s ease-out;
        }

        /* ── Signal Strength Segments (2C) ── */
        .signal-segments { display: flex; gap: 3px; align-items: center; }
        .signal-segment { width: 100%; height: 6px; border-radius: 2px; background: rgba(255,255,255,0.06); transition: background 0.3s ease; }
        .signal-segment.filled { background: var(--accent-positive); }
        .signal-segment.filled.warn { background: var(--accent-warning); }
        .signal-segment.filled.danger { background: var(--accent-negative); }
        .signal-drivers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
        .signal-driver {
            font-family: var(--font-body); font-size: var(--text-base); padding: 2px 8px;
            border-radius: 10px; border: 1px solid rgba(255,255,255,0.08);
            background: rgba(255,255,255,0.03); color: rgba(255, 255, 255, 0.62);
        }
        .signal-driver.bullish { border-color: rgba(34,197,94,0.25); color: var(--accent-positive); }
        .signal-driver.bearish { border-color: rgba(234,67,53,0.25); color: var(--accent-negative); }

        /* ── Quick Facts (2E) ── */
        .quick-facts { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
        .quick-fact {
            font-family: var(--font-body); font-size: var(--text-base); padding: 3px 10px;
            border-radius: var(--radius-md); background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06); color: rgba(255, 255, 255, 0.62);
        }
        .quick-fact strong { color: rgba(255,255,255,0.8); font-weight: 200; }

        /* ── Metric Tooltips (2F) ── */
        .has-tooltip { position: relative; cursor: help; }
        .has-tooltip::after {
            content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px);
            left: 50%; transform: translateX(-50%); padding: 6px 10px;
            background: rgba(20,22,30,0.95); border: 1px solid rgba(255,255,255,0.12);
            border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-base);
            color: rgba(255,255,255,0.8); white-space: normal; max-width: 240px;
            line-height: 1.35; pointer-events: none; opacity: 0; transition: opacity 0.2s;
            z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        }
        .has-tooltip:hover::after { opacity: 1; }

        /* ── Panel Header Glow (3C) ── */
        .preview-header::after {
            content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 40px;
            background: radial-gradient(ellipse, rgba(99,179,237,0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .key-metrics-grid {
            grid-template-columns: repeat(3, 1fr) !important;
        }

        /* === MULTIPLES TAB STYLES === */
        .multiples-bars {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            height: 140px;
            padding: 16px 0 8px;
            min-height: 140px;
        }
        .mult-bar-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
        }
        .mult-bar-value {
            font-family: var(--font-number);
            font-size: var(--text-base);
            font-weight: 200;
            color: var(--text-primary);
        }
        .mult-bar {
            width: 100%;
            max-width: 50px;
            border-radius: var(--radius-sm) var(--radius-sm) 0 0;
            transition: height 0.3s;
            min-height: 3px;
        }
        .mult-bar.cheap { background: linear-gradient(180deg, #2b8f4a 0%, #17763c 100%); }
        .mult-bar.fair { background: linear-gradient(180deg, #f59e0b 0%, #b26a00 100%); }
        .mult-bar.expensive { background: linear-gradient(180deg, #b6484b 0%, #89292b 100%); }
        .mult-bar-label {
            font-size: var(--text-base);
            color: var(--text-muted);
            /* text-transform: none */
            letter-spacing: 0.03em;
        }

        /* Comparison Chart - Horizontal Bars with Company + Peers */
        .comparison-chart {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 8px 0;
        }
        .comp-row {
            display: grid;
            grid-template-columns: 100px 1fr 55px;
            align-items: center;
            gap: 10px;
            padding: 6px 0;
        }
        .comp-row.main {
            background: rgba(255,255,255,0.03);
            border-radius: 6px;
            padding: 8px 10px;
            margin: 0 -10px;
        }
        .comp-ticker {
            font-family: var(--font-body);
            font-size: var(--text-md);
            font-weight: 200;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }
        .comp-ticker .comp-logo {
            width: 16px;
            height: 16px;
            border-radius: 3px;
            object-fit: contain;
            flex-shrink: 0;
            background: rgba(255,255,255,0.06);
        }
        .comp-ticker .comp-name {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .comp-row.main .comp-ticker {
            color: #fff;
        }
        .comp-bar-wrap {
            height: 16px;
            background: rgba(255,255,255,0.04);
            border-radius: 3px;
            overflow: hidden;
        }
        .comp-bar {
            height: 100%;
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        .comp-bar.cheap { background: linear-gradient(90deg, #17763c 0%, #2b8f4a 100%); }
        .comp-bar.fair { background: linear-gradient(90deg, #b26a00 0%, #f59e0b 100%); }
        .comp-bar.expensive { background: linear-gradient(90deg, #89292b 0%, #b6484b 100%); }
        .comp-value {
            font-family: var(--font-number);
            font-size: var(--text-md);
            font-weight: 200;
            color: var(--text-primary);
            text-align: right;
        }

        /* Metrics Grid - for all tabs */
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px;
            padding: 8px 0;
        }
        .metric-card {
            padding: 14px;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-md);
            text-align: center;
        }
        .metric-label {
            font-size: var(--text-base);
            /* text-transform: none */
            letter-spacing: 0.06em;
            color: var(--text-muted);
            margin-bottom: 6px;
        }
        .metric-value {
            font-family: var(--font-number);
            font-size: var(--text-lg);
            font-weight: 200;
            color: #fff;
        }
        .metric-value.positive { color: var(--accent-positive); }
        .metric-value.negative { color: var(--accent-negative); }
        .metric-sub {
            font-size: var(--text-base);
            color: var(--text-muted);
            margin-top: 4px;
        }

        .peg-gauge-container {
            padding: 16px 0;
        }
        .peg-display {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 12px;
        }
        .peg-value-large {
            font-family: var(--font-number);
            font-size: var(--text-xl);
            font-weight: 200;
            color: var(--text-primary);
        }
        .peg-verdict {
            font-size: var(--text-md);
            font-weight: 200;
            padding: 6px 14px;
            border-radius: 20px;
        }
        .peg-verdict.cheap { color: var(--accent-positive); }
        .peg-verdict.fair { color: var(--accent-warning); }
        .peg-verdict.expensive { color: var(--accent-negative); }
        .peg-scale {
            height: 10px;
            border-radius: 5px;
            position: relative;
            background: linear-gradient(90deg, rgba(46,49,58,0.75) 0%, rgba(94,98,112,0.55) 50%, rgba(46,49,58,0.75) 100%) !important;
            border: 1px solid rgba(255,255,255,0.12);
        }
        .peg-marker {
            position: absolute;
            width: 4px;
            height: 18px;
            top: -4px;
            border-radius: 2px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
            background: #cfd8ff;
        }
        .peg-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            font-size: var(--text-base);
            color: var(--text-muted);
        }

        .valuation-verdict {
            padding: 20px;
            border-radius: var(--radius-lg);
            text-align: center;
        }
        .valuation-verdict.cheap { border: 1px solid rgba(52, 168, 83, 0.45); background: rgba(52, 168, 83, 0.12); }
        .valuation-verdict.fair { border: 1px solid rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.12); }
        .valuation-verdict.expensive { border: 1px solid rgba(234, 67, 53, 0.45); background: rgba(234, 67, 53, 0.12); }
        .verdict-title {
            font-size: var(--text-md);
            font-weight: 200;
            margin-bottom: 8px;
        }
        .verdict-title.cheap { color: var(--accent-positive); }
        .verdict-title.fair { color: var(--accent-warning); }
        .verdict-title.expensive { color: var(--accent-negative); }
        .verdict-desc {
            font-size: var(--text-md);
            color: var(--text-secondary);
        }

        /* === TECHNICAL TAB STYLES === */
        .week-range-container {
            padding: 12px 0;
        }
        .range-bar {
            height: 12px;
            border-radius: 6px;
            position: relative;
            margin: 10px 0;
            background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e) !important;
            border: 1px solid rgba(255,255,255,0.12);
        }
        .range-marker {
            position: absolute;
            width: 6px;
            height: 24px;
            top: -6px;
            border-radius: 3px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
            background: #cfd8ff;
        }
        .range-labels {
            display: flex;
            justify-content: space-between;
            font-size: var(--text-base);
            color: var(--text-muted);
        }
        .range-labels .current {
            color: var(--text-primary);
            font-weight: 200;
        }

        .ma-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        .ma-item {
            text-align: center;
            padding: 14px 10px;
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: 10px;
        }
        .ma-label { font-size: var(--text-base); color: var(--text-muted); /* text-transform: none */ letter-spacing: 0.03em; margin-bottom: 6px; }
        .ma-price { font-size: var(--text-base); font-family: var(--font-number); font-weight: 200; color: var(--text-secondary); margin-bottom: 4px; }
        .ma-distance { font-size: var(--text-md); font-family: var(--font-number); font-weight: 200; }
        .ma-distance.above { color: var(--accent-positive); }
        .ma-distance.below { color: var(--accent-negative); }

        .momentum-container {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .momentum-row {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .momentum-label {
            width: 80px;
            font-size: var(--text-md);
            color: var(--text-muted);
            /* text-transform: none */
        }
        .momentum-bar {
            flex: 1;
            height: 10px;
            border-radius: 5px;
            position: relative;
        }
        .momentum-bar.rsi { background: linear-gradient(90deg, #1f3d2b 0%, #3a3a3a 50%, #4a2323 100%); }
        .momentum-bar.williams { background: linear-gradient(90deg, #1f3d2b 0%, #3a3a3a 50%, #4a2323 100%); }
        .momentum-bar { background: linear-gradient(90deg, rgba(40,42,50,0.72) 0%, rgba(88,93,108,0.5) 50%, rgba(40,42,50,0.72) 100%) !important; border: 1px solid rgba(255,255,255,0.12); }
        .momentum-value {
            width: 60px;
            text-align: right;
            font-family: var(--font-number);
            font-size: var(--text-md);
            font-weight: 200;
        }
        .momentum-desc {
            font-size: var(--text-md);
            color: var(--text-muted);
        }

        .returns-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
        }
        .return-cell {
            text-align: center;
            padding: 12px 8px;
            border: 1px solid rgba(255,255,255,0.05);
            border-radius: var(--radius-md);
        }
        .return-period { font-size: var(--text-base); color: var(--text-muted); /* text-transform: none */ margin-bottom: 6px; }
        .return-value { font-size: var(--text-base); font-family: var(--font-number); font-weight: 200; }
        .return-value.positive { color: var(--accent-positive); }
        .return-value.negative { color: var(--accent-negative); }

        .trend-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .trend-tag {
            font-size: var(--text-md);
            font-weight: 200;
            padding: 6px 12px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .trend-tag.bullish { border-color: rgba(102, 102, 102, 0.3); color: var(--accent-positive); }
        .trend-tag.bearish { border-color: rgba(102, 102, 102, 0.3); color: var(--accent-negative); }

        /* === ANALYSTS TAB STYLES === */
        .pt-visual-container {
            padding: 16px 0;
        }
        .pt-range-bar {
            height: 16px;
            border-radius: var(--radius-md);
            position: relative;
            margin: 16px 0;
            background: linear-gradient(90deg, rgba(44,46,54,0.7) 0%, rgba(90,94,108,0.54) 50%, rgba(44,46,54,0.7) 100%) !important;
            border: 1px solid rgba(255,255,255,0.12);
        }
        .pt-marker {
            position: absolute;
            width: 4px;
            height: 28px;
            top: -6px;
            border-radius: 2px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.4);
        }
        .pt-marker.current { background: #cfd8ff; }
        .pt-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
        }
        .pt-label { text-align: center; }
        .pt-label-type { font-size: var(--text-base); color: var(--text-muted); /* text-transform: none */ letter-spacing: 0.05em; }
        .pt-label-price { font-size: var(--text-md); font-family: var(--font-number); font-weight: 200; color: var(--text-primary); margin: 4px 0; }
        .pt-label-upside { font-size: var(--text-base); font-family: var(--font-number); font-weight: 200; }
        .pt-label-upside.positive { color: var(--accent-positive); }
        .pt-label-upside.negative { color: var(--accent-negative); }

        .upside-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        .upside-card {
            text-align: center;
            padding: 16px 12px;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255,255,255,0.08);
        }
        .upside-card.positive { border-color: rgba(52, 168, 83, 0.35); background: rgba(52, 168, 83, 0.08); }
        .upside-card.negative { border-color: rgba(234, 67, 53, 0.35); background: rgba(234, 67, 53, 0.08); }
        .upside-card-label { font-size: var(--text-base); color: var(--text-muted); /* text-transform: none */ letter-spacing: 0.05em; }
        .upside-card-value { font-size: var(--text-lg); font-family: var(--font-number); font-weight: 200; margin: 6px 0; }
        .upside-card.positive .upside-card-value { color: var(--accent-positive); }
        .upside-card.negative .upside-card-value { color: var(--accent-negative); }
        .upside-card-target { font-size: var(--text-base); color: var(--text-secondary); font-family: var(--font-number); }

        .estimate-bars {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .estimate-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .estimate-year {
            width: 40px;
            font-size: var(--text-md);
            color: var(--text-muted);
            font-weight: 200;
        }
        .estimate-bar-container {
            flex: 1;
            height: 10px;
            border-radius: 5px;
            overflow: hidden;
            background: linear-gradient(90deg, rgba(42,44,52,0.72) 0%, rgba(84,88,101,0.52) 50%, rgba(42,44,52,0.72) 100%) !important;
            border: 1px solid rgba(255,255,255,0.12);
        }
        .estimate-bar {
            height: 100%;
            border-radius: 5px;
            transition: width 0.3s;
            min-width: 3px;
        }
        .estimate-bar.positive { background: linear-gradient(90deg, #1e8c45 0%, #4cb56f 100%); }
        .estimate-bar.negative { background: linear-gradient(90deg, #9f3336 0%, #bd5256 100%); }
        .estimate-value {
            width: 60px;
            text-align: right;
            font-family: var(--font-number);
            font-size: var(--text-md);
            font-weight: 200;
        }
        .estimate-value.positive { color: var(--accent-positive); }
        .estimate-value.negative { color: var(--accent-negative); }

        .consensus-box {
            padding: 24px;
            border-radius: var(--radius-lg);
            text-align: center;
        }
        .consensus-box.bullish { border: 1px solid rgba(52, 168, 83, 0.4); background: rgba(52, 168, 83, 0.1); }
        .consensus-box.neutral { border: 1px solid rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.1); }
        .consensus-box.bearish { border: 1px solid rgba(234, 67, 53, 0.4); background: rgba(234, 67, 53, 0.1); }
        .consensus-rating {
            font-size: var(--text-md);
            font-weight: 200;
            margin-bottom: 8px;
        }
        .consensus-box.bullish .consensus-rating { color: var(--accent-positive); }
        .consensus-box.neutral .consensus-rating { color: var(--accent-warning); }
        .consensus-box.bearish .consensus-rating { color: var(--accent-negative); }
        .consensus-text {
            font-size: var(--text-md);
            color: var(--text-secondary);
        }

        /* === RESEARCH TAB STYLES - Matching research.html === */

        /* Investment Thesis Box */
        .research-thesis-box {
            background: rgba(34, 197, 94, 0.08);
            border: 1px solid rgba(34, 197, 94, 0.25);
            border-radius: var(--radius-lg);
            padding: 18px 20px;
        }
        .research-thesis-label {
            font-size: var(--text-base);
            /* text-transform: none */
            letter-spacing: 0.1em;
            color: rgba(34, 197, 94, 0.8);
            margin-bottom: 10px;
            font-weight: 200;
        }
        .research-thesis-text {
            font-size: var(--text-md);
            color: #fff;
            line-height: 1.65;
            font-weight: 200;
        }
        .research-thesis-text.no-data {
            color: var(--text-muted);
            font-style: italic;
        }

        /* Thesis boxes - F2C Format */
        .thesis-grid { display: flex; flex-direction: column; gap: 12px; }
        .thesis-box { padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid; }
        .thesis-box.narrative {
            background: rgba(234, 179, 8, 0.08);
            border-color: rgba(234, 179, 8, 0.25);
        }
        .thesis-box.misconception {
            background: rgba(239, 68, 68, 0.08);
            border-color: rgba(239, 68, 68, 0.25);
        }
        .thesis-box.view {
            background: rgba(34, 197, 94, 0.08);
            border-color: rgba(34, 197, 94, 0.25);
        }
        .thesis-box-label {
            font-size: var(--text-base);
            font-weight: 200;
            /* text-transform: none */
            letter-spacing: 0.08em;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .thesis-box.narrative .thesis-box-label { color: rgba(234, 179, 8, 0.9); }
        .thesis-box.misconception .thesis-box-label { color: rgba(239, 68, 68, 0.9); }
        .thesis-box.view .thesis-box-label { color: rgba(34, 197, 94, 0.9); }
        .thesis-box p { font-size: var(--text-md); line-height: 1.6; color: var(--text-secondary); margin: 0; }

        /* Scenarios Grid - research.html style */
        .scenarios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .scenario-card { display: flex; flex-direction: column; gap: 10px; }
        .scenario-label { font-size: var(--text-base); /* text-transform: none */ letter-spacing: 0.1em; font-weight: 200; margin-bottom: 4px; text-align: center; }
        .scenario-card.bear .scenario-label { color: var(--accent-negative); }
        .scenario-card.base .scenario-label { color: #888; }
        .scenario-card.bull .scenario-label { color: var(--accent-positive); }

        /* Target Price Box */
        .scenario-target-box {
            border-radius: 10px;
            padding: 14px;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.06);
        }
        .scenario-target { font-family: var(--font-number); font-size: var(--text-lg); font-weight: 200; margin-bottom: 2px; color: #fff; }
        .scenario-pct { font-family: var(--font-number); font-size: var(--text-md); font-weight: 200; }
        .scenario-pct.positive { color: var(--accent-positive) !important; }
        .scenario-pct.negative { color: var(--accent-negative) !important; }
        .scenario-pct.neutral { color: var(--text-secondary) !important; }

        /* Reasoning Box */
        .scenario-reasoning-box {
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px;
            padding: 12px;
            flex: 1;
        }
        .scenario-reasoning-label { font-size: var(--text-base); /* text-transform: none */ letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.62); margin-bottom: 6px; }
        .scenario-thesis { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.5; }

        /* Probability Badge */
        .scenario-prob-box {
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: var(--radius-md);
            padding: 8px 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
        }
        .scenario-prob-label { font-size: var(--text-base); /* text-transform: none */ letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.62); }
        .scenario-prob-value { font-family: var(--font-number); font-size: var(--text-base); font-weight: 200; color: #fff; }

        /* Research subsection titles */
        .research-subsection-title {
            font-size: var(--text-base);
            letter-spacing: 0.1em;
            color: rgba(255, 255, 255, 0.62);
            margin-bottom: 0.75rem;
            font-weight: 200;
            /* text-transform: none */
        }

        /* Value Drivers & Risks - research.html style */
        .drivers-row { display: flex; flex-wrap: wrap; gap: 10px; }
        .risks-row { display: flex; flex-direction: column; gap: 12px; }

        /* Catalyst cards - matching research.html */
        .catalyst-card {
            border-radius: 10px;
            padding: 14px;
            border-left: 3px solid rgba(34,197,94,0.4);
            flex: 1;
            min-width: 180px;
        }
        .catalyst-title {
            font-size: var(--text-md);
            font-weight: 200;
            color: #fff;
            margin-bottom: 8px;
        }
        .catalyst-cases {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .catalyst-case {
            font-size: var(--text-md);
            color: rgba(255, 255, 255, 0.62);
            line-height: 1.4;
        }
        .catalyst-case.bull .case-label { color: rgba(34,197,94,0.8); font-weight: 200; }
        .catalyst-case.bear .case-label { color: rgba(239,68,68,0.8); font-weight: 200; }
        .case-label { margin-right: 6px; }

        /* Risk cards - matching research.html */
        .risk-card {
            border-radius: 10px;
            padding: 16px;
            border-left: 4px solid rgba(239,68,68,0.35);
        }
        .risk-title {
            font-size: var(--text-md);
            font-weight: 200;
            color: rgba(255,255,255,0.85);
            margin-bottom: 6px;
        }
        .risk-desc {
            font-size: var(--text-md);
            color: rgba(255, 255, 255, 0.62);
            line-height: 1.5;
        }

        /* Simple list items fallback */
        .list-item {
            display: flex;
            align-items: flex-start;
            gap: 0.7rem;
            font-size: var(--text-md);
            color: var(--text-secondary);
            line-height: 1.55;
            padding: 8px 12px;
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: var(--radius-md);
        }
        .list-icon { flex-shrink: 0; font-size: var(--text-base); margin-top: 0.1rem; }
        .list-icon.catalyst { color: var(--accent-positive); }
        .list-icon.risk { color: var(--accent-warning); }

        .no-data-message {
            font-size: var(--text-md);
            color: var(--text-muted);
            font-style: italic;
            text-align: center;
            padding: 20px;
        }

        /* Custom Data Tooltip - subtle and compact */
        .data-tooltip {
            position: fixed;
            z-index: 10000;
            background: rgba(10, 14, 20, 0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-md);
            padding: 10px 14px;
            max-width: 260px;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.15s, visibility 0.15s;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
            transform: translate(0, 0);
        }
        .data-tooltip.visible {
            opacity: 1;
            visibility: visible;
        }
        /* Mobile: tooltip centered at bottom, pointer-events enabled for dismiss */
        @media (max-width: 768px), (hover: none) and (pointer: coarse) {
            .data-tooltip.visible {
                pointer-events: auto;
            }
            .data-tooltip.mobile-mode {
                left: 50% !important;
                top: auto !important;
                bottom: 20px;
                transform: translateX(-50%);
                max-width: min(90vw, 340px);
            }
        }
        /* Info icon on table headers — hidden on desktop, shown on touch/mobile */
        .th-info {
            display: none;
        }
        @media (max-width: 768px), (hover: none) and (pointer: coarse) {
            .th-info {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 13px;
                height: 13px;
                margin-left: 3px;
                border-radius: 50%;
                background: rgba(255,255,255,0.07);
                color: rgba(255, 255, 255, 0.62);
                font-size: var(--text-xs);
                font-family: var(--font-body);
                font-style: normal;
                font-weight: 200;
                cursor: pointer;
                vertical-align: middle;
                flex-shrink: 0;
                line-height: 1;
            }
            .th-info:active {
                background: rgba(255,255,255,0.15);
                color: rgba(255, 255, 255, 0.62);
            }
        }
        .data-tooltip-header {
            font-family: var(--font-body);
            font-size: var(--text-xs);
            font-weight: 200;
            letter-spacing: 0.02em;
            margin-bottom: 6px;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.85);
        }
        .data-tooltip-header.fundamental { border-bottom-color: rgba(120, 160, 200, 0.4); }
        .data-tooltip-header.valuation { border-bottom-color: rgba(200, 170, 100, 0.4); }
        .data-tooltip-header.technical { border-bottom-color: rgba(170, 140, 200, 0.4); }
        .data-tooltip-header.general { border-bottom-color: rgba(255, 255, 255, 0.15); }
        .data-tooltip-body {
            font-family: var(--font-body);
            font-size: var(--text-2xs);
            color: rgba(255, 255, 255, 0.62);
            line-height: 1.5;
        }
        .is-hidden { display: none; }
        .mt-20 { margin-top: 20px; }

        /* Final table pass: unified dark theme */
        .data-table {
            background: transparent !important;
            border-collapse: separate;
            border-spacing: 0;
        }
        .data-table tbody { background: transparent !important; }
        .data-table thead th {
            background: linear-gradient(180deg, rgba(14, 20, 38, 0.97) 0%, rgba(8, 13, 28, 0.95) 100%) !important;
            color: rgba(255, 255, 255, 0.9) !important;
            border-bottom: 1px solid rgba(70, 100, 170, 0.18) !important;
            box-shadow: 0 3px 16px rgba(40, 80, 160, 0.10), inset 0 1px 0 rgba(120, 160, 255, 0.04), inset 0 -1px 0 rgba(80, 120, 200, 0.06);
            padding: 10px 8px !important;
            vertical-align: middle;
            white-space: nowrap;
            height: auto;
            min-height: 44px;
            line-height: 1.35;
            font-weight: 200;
            letter-spacing: 0.01em;
            text-transform: none;
            font-size: var(--text-2xs) !important;
            position: sticky;
            top: 0;
            z-index: 5;
            overflow: hidden;
        }
        .data-table thead th:first-child {
            border-radius: 20px 0 0 0;
            position: sticky;
            left: 0;
            z-index: 10;
            background: rgba(18, 24, 38, 0.98) !important;
        }
        .data-table tbody td:first-child {
            position: sticky;
            left: 0;
            z-index: 2;
            background: rgba(18, 24, 38, 0.95) !important;
            backdrop-filter: blur(8px);
        }
        .data-table tbody tr:hover td:first-child {
            background: rgba(30, 40, 60, 0.95) !important;
        }
        .data-table th[data-sort="sector"] {
            color: var(--table-header-text) !important;
        }
        .data-table td {
            border-right: none !important;
            font-size: var(--text-2xs) !important;
            padding: 6px 8px !important;
            vertical-align: middle;
            font-weight: 200 !important;
        }
        .data-table th {
            border-right: none !important;
            font-size: var(--text-2xs) !important;
            vertical-align: middle;
            font-weight: 200 !important;
            color: rgba(255, 255, 255, 0.9) !important;
            text-transform: none;
            letter-spacing: 0.01em;
        }
        .data-table tbody td {
            color: rgba(255, 255, 255, 0.7) !important;
            border-bottom: 1px solid rgba(212, 175, 55, 0.06) !important;
            font-weight: 200 !important;
        }        .data-table td span[style],
        .data-table td .positive,
        .data-table td .negative,
        .data-table td .blue {
            color: var(--table-text) !important;
        }

        .data-table tbody tr td { background: transparent !important; }
        .data-table tbody tr td span.blue { background: none !important; }
        .data-table tbody tr:hover td {
            background: rgba(212, 175, 55, 0.1) !important;
        }
        .data-table tbody tr.selected td {
            background: rgba(212, 175, 55, 0.12) !important;
        }
        .data-table tbody tr.selected {
            box-shadow: inset 3px 0 0 rgba(212, 175, 55, 0.5);
        }





        .data-table td.group-start,
        .data-table th.group-start {
            border-left: none !important;
        }
        .data-table td.r,
        .data-table td[data-col] {
            font-variant-numeric: tabular-nums;
        }
        .data-table tbody tr {
            transition: all 0.2s ease;
        }
        .data-table tbody td,
        .data-table thead th {
            transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
        }
        .data-table tbody tr:hover {
            box-shadow: none;
        }
        body.panel-open .table-container {
            opacity: 0.85;
        }
        body.panel-open .data-table tbody tr,
        body.panel-open .data-table tbody tr:hover {
            transform: none !important;
        }

        /* Mobile optimization */
        @media (max-width: 1024px) {
            /* zoom removed */
            body { padding-top: 56px; font-size: var(--text-sm); }
            .toolbar { padding: 1rem 12px 10px; }
            .toolbar-row { flex-direction: column; align-items: stretch; gap: 10px; }
            .toolbar-title { font-size: var(--text-xl); text-align: center; }
            .toolbar-controls { justify-content: center; flex-wrap: wrap; gap: 8px; }
            .column-groups-callout { padding: 10px 12px; }
            .search-row { padding: 12px 12px 6px; }
            .search-wrapper { width: 100%; }
            .table-container { margin: 0 10px; border-radius: var(--radius-lg); max-height: 65vh; }
            .data-table th,
            .data-table td { padding: 6px 8px; font-size: var(--text-2xs) !important; }

            .preview-header { padding: 1rem 1rem 1.2rem; }
            .panel-section { padding: 8px 0; margin: 4px 0; }
            .panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
            .scenario-grid,
            .upside-cards,
            .scenarios-grid,
            .drivers-row,
            .risks-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
            .ma-grid,
            .returns-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }

        @media (max-width: 900px) {
            .data-table th[data-group="fundamental"],
            .data-table th[data-group="valuation"],
            .data-table th[data-group="technical"],
            .data-table td.col-fundamental,
            .data-table td.col-valuation,
            .data-table td.col-technical {
                display: none;
            }
            .data-table th[data-sort="sector"],
            .data-table td[data-col="1"],
            .data-table th[data-sort="price"],
            .data-table td[data-col="2"],
            .data-table th[data-sort="marketCap"],
            .data-table td[data-col="46"],
            .data-table th[data-sort="distance"],
            .data-table td.range-cell,
            .data-table th[data-sort="ret252d"],
            .data-table td[data-col="88"] {
                display: table-cell;
            }
        }

        @media (max-width: 640px) {
            .toolbar-title { font-size: var(--text-xl); }
            .table-container { margin: 0 8px; border-radius: var(--radius-lg); }
        }

        /* Compare Tool */
        .compare-bar {
            position: fixed;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            background: #0c0d0f;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: var(--radius-md);
            padding: 8px 16px;
            display: none;
            align-items: center;
            gap: 10px;
            z-index: 999;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }
        .compare-bar.visible { display: flex; }
        .compare-bar-tickers {
            display: flex;
            gap: 6px;
        }
        .compare-bar-ticker {
            font-family: var(--font-number);
            font-size: var(--text-base);
            color: rgba(255,255,255,0.85);
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: var(--radius-sm);
            padding: 3px 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .compare-bar-ticker .remove {
            cursor: pointer;
            color: var(--text-muted);
            font-size: var(--text-base);
        }
        .compare-bar-ticker .remove:hover { color: #ff6b6b; }
        .compare-btn {
            font-family: var(--font-body);
            font-size: var(--text-base);
            color: rgba(255,255,255,0.85);
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 5px;
            padding: 5px 14px;
            cursor: pointer;
            font-weight: 200;
        }
        .compare-btn:hover { background: rgba(255,255,255,0.14); }
        .compare-btn:disabled { opacity: 0.4; cursor: not-allowed; }

        .compare-modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: rgba(0,0,0,0.8);
            z-index: 2000;
            display: none;
            justify-content: center;
            align-items: center;
        }
        .compare-modal-overlay.open { display: flex; }
        .compare-modal {
            background: var(--base, #08090a);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: var(--radius-lg);
            width: 90%;
            max-width: 900px;
            max-height: 85vh;
            overflow-y: auto;
            padding: 24px;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.1) transparent;
        }
        .compare-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .compare-modal-title {
            font-family: var(--font-display);
            font-size: var(--text-md);
            color: var(--text-primary);
        }
        .compare-modal-close {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: var(--text-lg);
            cursor: pointer;
        }
        .compare-modal-close:hover { color: var(--text-primary); }

        .compare-table {
            width: 100%;
            border-collapse: collapse;
        }
        .compare-table th {
            text-align: left;
            padding: 8px 12px;
            font-family: var(--font-body);
            font-size: var(--text-xs);
            color: var(--text-muted);
            font-weight: 200;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            white-space: nowrap;
        }
        .compare-table td {
            padding: 8px 12px;
            font-family: var(--font-number);
            font-size: var(--text-xs);
            color: var(--text-secondary);
            border-bottom: 1px solid rgba(255,255,255,0.03);
        }
        .compare-table tr:hover td { background: rgba(255,255,255,0.02); }
        .compare-table .metric-label {
            font-family: var(--font-body);
            font-size: var(--text-xs);
            color: var(--text-muted);
            font-weight: 200;
        }
        .compare-table .best { color: #4ade80; font-weight: 200; }
        .compare-table .worst { color: #ef4444; }
        .compare-section-header td {
            font-family: var(--font-body);
            font-size: var(--text-base);
            font-weight: 200;
            color: rgba(255, 255, 255, 0.62);
            letter-spacing: 0.05em;
        
            padding-top: 14px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }



/* ============================================ */
/* TAB SWITCHER - PILL SEGMENT CONTROL          */
/* ============================================ */
.lens-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 0;
    margin: 0;
    justify-content: center;
    background: transparent;
    flex-shrink: 0;
}
.lens-tab {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--text-md);
    font-weight: 200;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 6px 18px;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.lens-tab::before {
    content: none;
}
.lens-tab.active {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.1), 0 0 40px rgba(212, 175, 55, 0.04);
}
.lens-tab:hover:not(.active) {
    color: rgba(255,255,255,0.7);
    background: rgba(212, 175, 55, 0.06);
    border-color: rgba(20, 184, 216, 0.2);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.04);
}
.lens-tab:active {
    color: rgba(255,255,255,0.9);
}
.lens-tab-content {
    display: none;
}
.lens-tab-content.active {
    display: block;
}


/* ============================================ */
/* STRATEGIES - SCOPED VARIABLE OVERRIDES       */
/* ============================================ */
.strat-ns {
    --bg-primary: #080808;
    --accent-positive: #22c55e;
    --accent-negative: #ef4444;
    --accent-blue: #60a5fa;
    --accent-purple: #a78bfa;
    --accent-pink: #f472b6;
}

/* ============================================ */
/* STRATEGIES TAB CSS (namespaced under .strat-ns) */
/* ============================================ */

        /* Global reset removed - already in shared-styles.css */




        /* Containers - keep transparent, no visible backgrounds */
        .strat-ns .page-container {

            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }


        .strat-ns .page-container {

            max-width: var(--container-max-width, 1600px);
            width: 100%;
            margin: 0 auto;
            padding: 3rem 1rem;
        }

        /* Header */
        .strat-ns .page-header {

            text-align: center;
            margin-bottom: 24px;
            background: transparent !important;
            border: 0 !important;
            border-radius: var(--radius-lg);
            padding: 28px 24px;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .strat-ns .page-header::after {

            content: "";
            display: block;
            width: 200px;
            height: 1px;
            margin: 16px auto 0;
            background: linear-gradient(90deg, rgba(147,197,253,0) 0%, rgba(147,197,253,0.5) 50%, rgba(147,197,253,0) 100%);
        }

        .strat-ns .page-title {

            font-family: 'DM Sans', sans-serif;
            font-size: clamp(2.4rem, 4.5vw, 3.2rem);
            font-weight: 200;
            color: var(--text-primary);
            -webkit-text-fill-color: var(--text-primary);
            margin-bottom: 8px;
            letter-spacing: 0.03em;
            text-shadow: 0 2px 20px rgba(99, 179, 237, 0.15);
        }

        .strat-ns .page-subtitle {

            color: var(--text-muted);
            font-size: var(--text-base);
        }

        .strat-ns .page-header-tight { margin-bottom: 40px; }

        .strat-ns .page-subtitle-spaced { margin-bottom: 24px; }

        .strat-ns .strat-help-cursor { cursor: help; }

        .strat-ns .highlights-row.is-hidden { display: none; }

        /* ================================================
           FLAGSHIP STRATEGY - Our Pick
           ================================================ */
        /* Uses glass-box from shared-styles.css */
        .strat-ns .flagship-section {

            border-color: rgba(128, 128, 128, 0.25);
            padding: 24px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 24px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .strat-ns .flagship-section:hover {

            border-color: rgba(128, 128, 128, 0.35);
        }

        .strat-ns .flagship-badge {

            color: #fff;
            font-size: var(--text-base);
            font-weight: 200;
            letter-spacing: 0.04em;
            padding: 6px 12px;
            border-radius: 6px;
            white-space: nowrap;
        }

        .strat-ns .flagship-content {

            flex: 1;
        }

        .strat-ns .flagship-title {

            font-family: var(--font-display);
            font-size: var(--text-lg);
            font-weight: 200;
            color: var(--text-primary);
            margin-bottom: 4px;
        }

        .strat-ns .flagship-desc {

            font-size: var(--text-md);
            color: var(--text-secondary);
        }

        .strat-ns .flagship-metrics {

            display: flex;
            gap: 24px;
        }

        .strat-ns .flagship-metric {

            text-align: center;
        }

        .strat-ns .flagship-metric-value {

            font-family: var(--font-number);
            font-size: var(--text-lg);
            font-weight: 200;
            color: var(--accent-positive);
        }

        .strat-ns .flagship-metric-value.neutral {

            color: var(--text-primary);
        }

        .strat-ns .flagship-metric-label {

            font-size: var(--text-base);
            letter-spacing: 0.02em;
            color: var(--text-muted);
            margin-top: 2px;
        }

        .strat-ns .flagship-arrow {

            color: var(--text-muted);
            font-size: var(--text-md);
        }

        @media (max-width: 768px) {
            .strat-ns .flagship-section {

                flex-direction: column;
                text-align: center;
                gap: 16px;
            }
            .strat-ns .flagship-metrics {

                justify-content: center;
            }
        }

        /* ================================================
           COMPARE STRATEGIES - Collapsible Section
           ================================================ */
        /* Highlight strategy cards */
        .strat-ns .highlights-row {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 14px;
            margin-bottom: 24px;
            max-width: 2000px;
        }
        
        .strat-ns .highlight-card {

            border: 1px solid rgba(212, 175, 55, 0.12);
            border-radius: var(--radius-lg);
            padding: 1.2rem 1.2rem 1rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            gap: 10px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            background: linear-gradient(160deg, rgba(10, 20, 38, 0.95) 0%, rgba(5, 12, 24, 0.98) 100%);
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(212, 175, 55, 0.06), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 60px rgba(212, 175, 55, 0.03);
            max-width: 380px;
        }

        .strat-ns .highlight-card::before {

            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .strat-ns .highlight-card::after {

            content: '';
            position: absolute;
            bottom: -20px;
            left: 5%;
            right: 5%;
            height: 80px;
            border-radius: 50%;
            filter: blur(35px);
            opacity: 0.9;
            transition: opacity 0.4s ease, transform 0.4s ease;
            pointer-events: none;
        }

        .strat-ns .highlight-card:hover {

            transform: translateY(-6px);
            border-color: rgba(212, 175, 55, 0.25);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 60px rgba(212, 175, 55, 0.15), 0 0 100px rgba(212, 175, 55, 0.06), inset 0 1px 0 rgba(255,255,255,0.08);
        }

        .strat-ns .highlight-card:hover::before {

            opacity: 1;
        }

        .strat-ns .highlight-card:hover::after {

            opacity: 0.5;
            transform: translateY(-3px) scale(1.05);
        }
        
        .strat-ns .highlight-badge {

            font-size: var(--text-base);
            font-weight: 200;
            letter-spacing: 0.02em;
            padding: 4px 10px;
            border-radius: var(--radius-lg);
            display: inline-flex;
            align-items: center;
            gap: 5px;
            width: fit-content;
        }
        
        .strat-ns .highlight-badge.sharpe {

            color: #93c5fd;
        }
        
        .strat-ns .highlight-badge.drawdown {

            color: #d8b4fe;
        }
        

        /* Colored card glow — brighter */
        .highlight-card.gold::after { background: rgba(255, 220, 100, 0.40); }
        .highlight-card.green::after { background: rgba(34, 197, 94, 0.50); }
        .highlight-card.blue::after { background: rgba(212, 175, 55, 0.4); }
        .highlight-card.purple::after { background: rgba(139, 92, 246, 0.50); }
        .highlight-card.teal::after { background: rgba(20, 184, 166, 0.50); }

        .strat-ns .highlight-badge.teal { color: #5eead4; }
        .strat-ns .highlight-badge.vol { color: #93c5fd; }

        .strat-ns .highlight-picks {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-top: 6px;
        }
        .strat-ns .highlight-pick {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 8px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 6px;
            font-size: var(--text-base);
            color: rgba(255,255,255,0.7);
            font-family: var(--font-body);
        }
        .strat-ns .highlight-pick img {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            object-fit: contain;
        }
        .strat-ns .highlight-badge.gold {

            color: rgba(255,255,255,0.85);
        }

        .strat-ns .highlight-badge.cagr {

            color: #86efac;
        }
        
        .strat-ns .highlight-left {

            display: flex;
            flex-direction: column;
            gap: 4px;
            align-items: flex-start;
        }
        
        .strat-ns .highlight-title {

            font-family: var(--font-body);
            font-size: var(--text-md);
            font-weight: 200;
            color: #fff;
        }
        
        .strat-ns .highlight-metrics {

            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 4px;
            width: 100%;
        }
        
        .strat-ns .highlight-metric {

            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        
        .strat-ns .highlight-metric-value {

            font-family: var(--font-number);
            font-size: var(--text-md);
            font-weight: 200;
            color: #fff;
        }
        
        .strat-ns .highlight-metric-value.blue {

            color: #fff;
        }
        
        .strat-ns .highlight-metric-value.purple {

            color: #fff;
        }
        
        .strat-ns .highlight-metric-value.neutral {

            color: var(--text-secondary);
        }
        
        .strat-ns .highlight-metric-label {

            font-size: var(--text-base);
            letter-spacing: 0.02em;
            color: var(--text-muted);
        }
        
        .strat-ns .highlight-arrow {

            display: none;
        }
        
        .strat-ns .highlight-card:hover .highlight-arrow {

            opacity: 1;
        }
        
        @media (max-width: 1200px) {
            .strat-ns .highlights-row {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (max-width: 900px) {
            .strat-ns .highlights-row {
                grid-template-columns: 1fr;
            }
        }

        .strat-ns .compare-section {
            border: none;
            border-radius: var(--radius-lg);
            margin-bottom: 24px;
            overflow: hidden;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            background: transparent;
        }

        .strat-ns .compare-header {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 20px 24px;
            cursor: pointer;
            transition: background 0.2s;
            text-align: center !important;
        }

        .strat-ns .compare-header:hover {
            }

        .strat-ns .compare-header-left {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 8px;
            text-align: center !important;
            width: 100%;
        }

        .strat-ns .compare-header-left > div {
            text-align: center !important;
            width: 100%;
        }

        .strat-ns .compare-icon {
            display: none;
        }

        .strat-ns .compare-title {
            font-size: var(--text-md);
            font-weight: 200;
            text-align: center !important;
            width: 100%;
        }

        .strat-ns .compare-subtitle {
            font-size: var(--text-base);
            color: var(--text-muted);
            text-align: center !important;
            width: 100%;
        }

        .strat-ns .compare-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: var(--text-base);
            color: var(--text-muted);
            margin-top: 8px;
            width: 100%;
        }

        .strat-ns .compare-toggle-icon {

            width: 24px;
            height: 24px;
            border: 1px solid var(--border-subtle);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s, background 0.2s;
        }

        .strat-ns .compare-section.open .compare-toggle-icon {

            transform: rotate(180deg);
            }

        .strat-ns .compare-content {

            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
            padding: 0 24px;
        }

        .strat-ns .compare-section.open .compare-content {

            max-height: 900px;
            padding: 0 24px 24px;
        }
        .compare-section:not(.open) .category-buttons,
        .strat-ns .compare-section:not(.open) .compare-charts {

            display: none;
        }

        .strat-ns .compare-charts {

            display: grid;
            grid-template-columns: 1fr 1.6fr;
            gap: 20px;
        }

        .strat-ns .compare-chart-card {
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: var(--radius-lg);
            padding: 1.2rem;
            background: transparent;
        }

        .strat-ns .compare-chart-title {

            font-size: var(--text-base);
            letter-spacing: 0.02em;
            color: var(--text-muted);
            margin-bottom: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .strat-ns .compare-chart-area {

            height: 440px;
            position: relative;
        }

        .strat-ns .compare-chart-area canvas {

            width: 100% !important;
            height: 100% !important;
        }

        /* Category buttons in compare section */
        .strat-ns .category-buttons {

            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
            justify-content: center;
        }

        .strat-ns .category-btn {

            font-family: var(--font-body) !important;
            font-size: var(--text-md) !important;
            padding: 10px 18px !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            border-radius: var(--radius-md) !important;
            color: var(--text-muted) !important;
            background: rgba(255,255,255,0.03) !important;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
            text-transform: capitalize;
        }

        .strat-ns .category-btn:hover {

            border-color: rgba(255, 255, 255, 0.2) !important;
            color: var(--text-secondary) !important;
            background: rgba(255,255,255,0.05) !important;
        }

        .strat-ns .category-btn.active {

            color: var(--text-primary) !important;
            font-weight: 200 !important;
            font-size: var(--text-md) !important;
        }

        .strat-ns .category-btn.all.active {

            border-color: rgba(255, 255, 255, 0.5) !important;
            color: #fff !important;
            background: rgba(255, 255, 255, 0.1) !important;
        }
        .strat-ns .category-btn.momentum.active {

            border-color: rgba(249, 115, 22, 0.7) !important;
            color: #fb923c !important;
            background: rgba(249, 115, 22, 0.15) !important;
        }
        .strat-ns .category-btn.value.active {

            border-color: rgba(234, 179, 8, 0.7) !important;
            color: #fde047 !important;
            background: rgba(234, 179, 8, 0.15) !important;
        }
        .strat-ns .category-btn.composite.active {

            border-color: rgba(34, 197, 94, 0.7) !important;
            color: #4ade80 !important;
            background: rgba(34, 197, 94, 0.15) !important;
        }
        .strat-ns .category-btn.quality.active {

            border-color: rgba(6, 182, 212, 0.7) !important;
            color: #22d3ee !important;
            background: rgba(6, 182, 212, 0.15) !important;
        }
        .strat-ns .category-btn.volatility.active {

            border-color: rgba(59, 130, 246, 0.7) !important;
            color: #60a5fa !important;
            background: rgba(59, 130, 246, 0.15) !important;
        }
        .strat-ns .category-btn.reversal.active {

            border-color: rgba(139, 92, 246, 0.7) !important;
            color: #a78bfa !important;
            background: rgba(139, 92, 246, 0.15) !important;
        }
        .strat-ns .category-btn.hybrid.active {

            border-color: rgba(168, 85, 247, 0.7) !important;
            color: #c084fc !important;
            background: rgba(168, 85, 247, 0.15) !important;
        }
        .strat-ns .category-btn.technical.active {

            border-color: rgba(236, 72, 153, 0.7) !important;
            color: #f472b6 !important;
            background: rgba(236, 72, 153, 0.15) !important;
        }
        .strat-ns .category-btn.contrarian.active {

            border-color: rgba(217, 70, 239, 0.7) !important;
            color: #e879f9 !important;
            background: rgba(217, 70, 239, 0.15) !important;
        }
        .strat-ns .category-btn.meanrev.active {

            border-color: rgba(244, 114, 182, 0.7) !important;
            color: #fb7185 !important;
            background: rgba(244, 114, 182, 0.15) !important;
        }

        /* Axis controls */
        .strat-ns .axis-controls {

            display: flex;
            gap: 16px;
        }

        .strat-ns .axis-group {

            display: flex;
            align-items: center;
            gap: 6px;
        }

        .strat-ns .axis-label {

            font-size: var(--text-base);
            color: var(--text-muted);
        }

        .strat-ns .axis-btn {

            font-family: var(--font-display) !important;
            font-size: var(--text-base) !important;
            padding: 4px 8px !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 6px !important;
            color: var(--text-muted) !important;
            background: rgba(255, 255, 255, 0.04) !important;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
        }

        .strat-ns .axis-btn:hover {

            border-color: rgba(255, 255, 255, 0.2) !important;
            color: var(--text-secondary) !important;
            background: rgba(255, 255, 255, 0.08) !important;
        }

        .strat-ns .axis-btn.active {

            border-color: rgba(212, 175, 55, 0.25) !important;
            color: rgba(212,175,55,0.8) !important;
            background: rgba(212, 175, 55, 0.08) !important;
        }

        /* Stats bar */
        .strat-ns .stats-bar {

            display: flex;
            justify-content: center;
            gap: 48px;
            padding: 28px 40px;
            border: 0 !important;
            border-radius: var(--radius-lg);
            margin-bottom: 40px;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: none !important;
        }

        .strat-ns .stat-item {

            text-align: center;
        }

        .strat-ns .stat-value {

            font-family: var(--font-number);
            font-size: var(--text-lg);
            font-weight: 200;
            color: var(--accent-positive);
        }

        .strat-ns .stat-value.neutral { color: var(--text-primary); }


        .strat-ns .stat-label {

            font-size: var(--text-base);
            letter-spacing: 0.02em;
            color: var(--text-muted);
            margin-top: 2px;
        }

        /* Filter tabs */
        .strat-ns .filter-bar {

            display: flex;
            gap: 10px;
            margin-bottom: 32px;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .strat-ns .filter-btn {

            font-family: var(--font-display) !important;
            font-size: var(--text-base) !important;
            font-weight: 200 !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 8px 14px !important;
            border: 1px solid rgba(147, 197, 253, 0.08) !important;
            border-radius: 10px !important;
            background: transparent !important;
            color: var(--text-muted) !important;
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
            white-space: nowrap;
        }

        .strat-ns .filter-btn:hover {

            border-color: rgba(147, 197, 253, 0.2) !important;
            background: rgba(255, 255, 255, 0.04) !important;
            color: var(--text-secondary) !important;
            box-shadow: none;
            font-size: var(--text-base) !important;
            font-weight: 200 !important;
        }

        .strat-ns .filter-btn.active {

            font-weight: 200 !important;
        }

        /* Strategy filter buttons - all uniform, no category colors */
        .strat-ns .filter-btn.active.all-filter,
        .strat-ns .filter-btn.active.momentum-filter,
        .strat-ns .filter-btn.active.value-filter,
        .strat-ns .filter-btn.active.composite-filter,
        .strat-ns .filter-btn.active.quality-filter,
        .strat-ns .filter-btn.active.volatility-filter,
        .strat-ns .filter-btn.active.reversal-filter,
        .strat-ns .filter-btn.active.hybrid-filter,
        .strat-ns .filter-btn.active.technical-filter,
        .strat-ns .filter-btn.active.contrarian-filter {
            border-color: rgba(255, 255, 255, 0.25) !important;
            color: rgba(255,255,255,0.95) !important;
            background: transparent !important;
            box-shadow: none;
        }

        /* Return filter input */
        .strat-ns .return-filter {

            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: 16px;
            padding-left: 16px;
            border-left: 1px solid rgba(147, 197, 253, 0.15);
        }
        .strat-ns .return-filter label {

            font-size: var(--text-base);
            color: var(--text-muted);
            white-space: nowrap;
        }
        .strat-ns .return-filter input[type="range"] {

            -webkit-appearance: none;
            appearance: none;
            width: 100px;
            height: 2px;
            background: rgba(255,255,255,0.15);
            border-radius: 1px;
            outline: none;
            cursor: pointer;
        }
        .strat-ns .return-filter input[type="range"]::-webkit-slider-thumb {

            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #111;
            border: 2px solid rgba(255,255,255,0.25);
            cursor: pointer;
            box-shadow: none;
        }
        .strat-ns .return-filter input[type="range"]::-moz-range-thumb {

            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #111;
            border: 2px solid rgba(255,255,255,0.25);
            cursor: pointer;
            box-shadow: none;
        }
        .strat-ns .slider-value {

            font-family: var(--font-number);
            font-size: var(--text-base);
            color: var(--accent-blue);
            min-width: 28px;
            text-align: center;
        }
        .strat-ns .filter-btn.active.meanrev-filter {
            border-color: rgba(255, 255, 255, 0.25) !important;
            color: rgba(255,255,255,0.95) !important;
            background: transparent !important;
            box-shadow: none;
        }

        /* ================================================
           MAIN LAYOUT - Table + Sidebar
           .strat-ns ================================================ */

        .strat-ns .main-layout {

            display: grid;
            grid-template-columns: 1fr;  /* Changed: sidebar is now slideout panel */
            gap: 32px;
            align-items: start;
        }

        /* ================================================
           TABLE
           ================================================ */
        /* Uses glass-box from shared-styles.css */
        .strat-ns .table-container {

            overflow: hidden;
            padding: 0;
            border: 1px solid var(--glass-border) !important;
            border-radius: var(--radius-lg);
            background: var(--glass-bg-dark) !important;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
        }

        .strat-ns .table-scroll {

            max-height: calc(100vh - 280px);
            overflow-y: auto;
        }

        .strat-ns .strat-table {

            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
        }

        .strat-ns .strat-table thead {

            position: sticky;
            top: 0;
            z-index: 10;
        }

        .strat-ns .strat-table th {

            text-align: center;
            font-size: var(--text-base);
            letter-spacing: 0.02em;
            color: var(--text-muted);
            padding: 14px 12px;
            border-bottom: 1px solid var(--border-medium);
            font-weight: 200;
            }
        .strat-ns .table-scroll .strat-table thead th {

            background: var(--table-header-bg) !important;
            color: rgba(255, 255, 255, 0.75);
        }
        .strat-ns .table-scroll .strat-table tbody tr:first-child td {

            border-top: 1px solid var(--border-subtle);
        }

        .strat-ns .strat-table th.sortable {

            cursor: pointer;
            user-select: none;
        }

        .strat-ns .strat-table th.sortable:hover {

            color: var(--text-primary);
        }

        .strat-ns .strat-table th.sortable.active {
            color: var(--text-secondary);
        }
        .strat-ns .strat-table th.sortable.active::after { content: ' \25BC'; font-size: var(--text-2xs); opacity: 0.6; }
        .strat-ns .strat-table th.sortable.active.asc::after { content: ' \25B2'; font-size: var(--text-2xs); opacity: 0.6; }

        .strat-table th:first-child { text-align: left; }

        .strat-ns .strat-table td {

            padding: 7px 12px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
            vertical-align: middle;
            text-align: center;
            font-size: var(--text-md);
        }
        .strat-ns .strat-table tbody tr:first-child td {
            padding: 14px 12px;
        }
        .strat-ns .strat-table td:first-child {

            text-align: left;
        }
        .strat-ns .strat-table td:nth-child(2) {

            text-align: left;
        }
        .strat-table th:last-child { min-width: 220px; }

        .strat-ns .strat-table tbody tr {
            cursor: pointer;
            transition: background-color 0.22s ease, transform 0.18s ease, box-shadow 0.22s ease;
        }

        .strat-table tbody tr { background: transparent; }

        .strat-ns .strat-table tbody tr:hover {
            background: rgba(212, 175, 55, 0.1);
            transform: translateX(2px);
            box-shadow: inset 3px 0 0 rgba(212, 175, 55, 0.4), 0 0 20px rgba(212, 175, 55, 0.06);
        }

        .strat-ns .strat-table tbody tr:active {
            transform: translateX(1px);
            transition-duration: 0.06s;
        }

        .strat-ns .strat-table tbody tr.selected {
            background: rgba(58, 60, 68, 0.95);
            box-shadow: inset 3px 0 0 rgba(99, 102, 241, 0.8), 0 0 24px rgba(99, 102, 241, 0.12);
        }

        .strat-ns .strat-table tbody tr.selected td {

            border-color: var(--border-selected);
        }
        .strat-ns .strat-table tbody td {

            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }
        .strat-ns .strat-table tbody tr.top-rank {
            background: rgba(255, 215, 0, 0.03) !important;
            border-left: 2px solid rgba(255, 215, 0, 0.3);
        }
        .strat-ns .strat-table tbody tr.top-rank td {
            color: rgba(255, 255, 255, 0.9) !important;
        }

        /* Beat SPY indicator */
        .strat-ns .beat {

            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }

        .strat-ns .beat.yes {

            box-shadow: 0 0 6px rgba(128, 128, 128, 0.4);
        }

        .strat-ns .beat.no {

            opacity: 0.25;
        }
        .strat-ns .row-all-btn {

            border: 1px solid rgba(214, 183, 112, 0.55);
            background: rgba(214, 183, 112, 0.18);
            color: #f3ddb0;
            font-family: var(--font-number);
            font-size: var(--text-base);
            letter-spacing: 0.02em;
            padding: 2px 6px;
            border-radius: 999px;
            cursor: pointer;
        }
        .strat-ns .row-all-btn:hover {

            border-color: rgba(214, 183, 112, 0.85);
            background: rgba(214, 183, 112, 0.28);
            color: #fff1cd;
        }

        /* Strategy name + category */
        .strat-ns .strat-name {

            font-weight: 200;
            font-size: var(--text-md);
            white-space: nowrap;
        }

        .strat-ns .strat-cat {

            font-size: var(--text-base);
            letter-spacing: 0.02em;
            padding: 4px 10px;
            border-radius: var(--radius-md);
            font-weight: 200;
            white-space: nowrap;
            border: 1px solid rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.03);
        }
        .strat-ns .strat-name-cell {

            text-align: left;
        }

        /* Category tag colors - match filter button colors */
        .strat-ns .strat-cat.momentum { color: #fb923c; }

        .strat-ns .strat-cat.value { color: #fde047; }

        .strat-ns .strat-cat.composite { color: #4ade80; }

        .strat-ns .strat-cat.quality { color: #22d3ee; }

        .strat-ns .strat-cat.volatility { color: #60a5fa; }

        .strat-ns .strat-cat.reversal { color: #a78bfa; }

        .strat-ns .strat-cat.hybrid { color: #c084fc; }

        .strat-ns .strat-cat.technical { color: #f472b6; }

        .strat-ns .strat-cat.contrarian { color: #e879f9; }

        .strat-ns .strat-cat.meanrev { color: #fb7185; }


        /* Numbers */
        .strat-ns .num {

            font-family: var(--font-number);
            text-align: center;
        }

        .strat-ns .num.cagr {

            font-size: var(--text-md);
            font-weight: 200;
        }

        .strat-ns .num.pos { color: var(--accent-positive); }

        .strat-ns .num.neg { color: var(--accent-negative); }

        .strat-ns .num.dim { color: var(--text-muted); }


        /* Inline picks (compact) */
        .strat-ns .picks-inline {

            display: flex;
            gap: 4px;
            flex-wrap: nowrap;
            white-space: nowrap;
            overflow: hidden;
        }
        .strat-ns .strat-table td.picks-inline {

            white-space: nowrap;
        }

        .strat-ns .pick-chip {

            font-family: var(--font-number);
            font-size: var(--text-base);
            font-weight: 200;
            border: 1px solid rgba(128, 128, 128, 0.10);
            background: rgba(255, 255, 255, 0.03);
            padding: 3px 8px 3px 5px;
            border-radius: 6px;
            color: var(--text-primary);
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .strat-ns .pick-chip:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(128, 128, 128, 0.2);
        }
        .strat-ns .pick-logo {
            width: 16px;
            height: 16px;
            border-radius: var(--radius-sm);
            object-fit: contain;
            flex-shrink: 0;
        }
        .strat-ns .pick-fallback {
            width: 16px;
            height: 16px;
            border-radius: var(--radius-sm);
            background: rgba(99, 102, 241, 0.15);
            color: rgba(165, 168, 255, 0.8);
            font-size: var(--text-base);
            font-weight: 200;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        
        }



        /* Scoped button reset - only for sidebar buttons, not nav/filter/category */
        .sidebar-panel button:not(.nav-avatar-btn):not(.category-btn):not(.filter-btn):not(.axis-btn):not(.range-tab):not(.row-all-btn),
        .strat-ns .sidebar-panel button:not(.nav-avatar-btn):not(.category-btn):not(.filter-btn):not(.axis-btn):not(.range-tab):not(.row-all-btn):hover {

            background: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;
            color: inherit;
            font: inherit;
            padding: 0;
            margin: 0;
            outline: none;
        }

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

        .strat-ns .holdings-table .stock-cell-name {
            font-family: var(--font-body);
            font-weight: 200;
            font-size: var(--text-xs);
            color: var(--text-primary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.2;
        }

        .strat-ns .holdings-table .stock-cell-ticker {
            font-family: var(--font-number);
            font-size: var(--text-base);
            color: var(--text-muted);
            font-weight: 200;
            line-height: 1.2;
        }

        .strat-ns .holdings-table .weight {

            font-family: var(--font-number);
            text-align: right;
            color: var(--text-secondary);
            font-size: var(--text-md);
        }

        .strat-ns .holdings-table .metric {

            font-family: var(--font-number);
            text-align: right;
            font-weight: 200;
            font-size: var(--text-md);
        }

        .strat-ns .holdings-table .metric.positive { color: var(--accent-positive); }

        .strat-ns .holdings-table .metric.negative { color: var(--accent-negative); }

        .strat-ns .holdings-table .metric.neutral { color: var(--text-secondary); }


        /* Rebalancing Changes */
        .strat-ns .rebalancing-section {

            padding: 1rem 0;
            border: 0;
            border-radius: 0;
            margin-bottom: 0.75rem;
            overflow-x: hidden;
            max-width: 100%;
            border-bottom: 1px solid var(--border-subtle);
        }

        .strat-ns .rebalancing-header {

            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .strat-ns .rebalancing-title {

            font-size: var(--text-base);
            letter-spacing: 0.02em;
            color: var(--accent-neutral);
            font-weight: 200;
        }

        .strat-ns .rebalancing-next {

            font-family: var(--font-number);
            font-size: var(--text-base);
            color: var(--text-muted);
            opacity: 0.8;
        }

        .strat-ns .changes-grid {

            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }

        .strat-ns .changes-column h4 {

            font-size: var(--text-base);
            letter-spacing: 0.02em;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .strat-ns .changes-column.added h4 { color: var(--accent-positive); }

        .strat-ns .changes-column.removed h4 { color: var(--accent-negative); }


        .strat-ns .changes-list {

            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
        }

        .strat-ns .change-chip {

            font-family: var(--font-number);
            font-size: var(--text-md);
            padding: 0.3rem 0.55rem;
            border-radius: 6px;
            font-weight: 200;
            letter-spacing: 0.02em;
            text-decoration: none;
        }

        .strat-ns .change-chip.added {

            color: #666666;
            border: 1px solid rgba(128, 128, 128, 0.2);
        }

        .strat-ns .change-chip.removed {

            color: #666666;
            border: 1px solid rgba(239, 68, 68, 0.2);
        }

        .strat-ns .no-changes {

            font-size: var(--text-base);
            color: var(--text-muted);
            opacity: 0.6;
        }

        /* Logic & Insight boxes */
        .strat-ns .logic-box {

            border-radius: 0;
            padding: 1rem 0;
            margin-bottom: 0.75rem;
            border: 0;
            border-bottom: 1px solid var(--border-subtle);
        }

        .strat-ns .logic-box-title {

            font-size: var(--text-base);
            letter-spacing: 0.02em;
            color: #60a5fa;
            margin-bottom: 0.6rem;
            font-weight: 200;
        }

        .strat-ns .insight-box {

            border-radius: 0;
            padding: 1rem 0;
            border: 0;
            border-bottom: 1px solid var(--border-subtle);
        }

        .strat-ns .insight-box-title {

            font-size: var(--text-base);
            letter-spacing: 0.02em;
            color: var(--accent-neutral);
            margin-bottom: 0.6rem;
            font-weight: 200;
        }
        .rebalancing-section:last-child,
        .logic-box:last-child,
        .strat-ns .insight-box:last-child {

            border-bottom: 0;
        }

        .strat-ns .logic-box p, .strat-ns .insight-box p {

            font-size: var(--text-xs);
            color: var(--text-secondary);
            line-height: 1.65;
            opacity: 0.95;
        }

        /* Intro paragraphs */
        .strat-ns .strategies-intro-p1 {

            max-width: 1100px;
            margin: 0 auto 16px;
            font-size: var(--text-md);
            color: var(--text-primary);
            line-height: 1.75;
            text-align: center;
        }

        .strat-ns .strategies-intro-p2 {

            max-width: 1100px;
            margin: 0 auto;
            font-size: var(--text-md);
            color: var(--text-primary);
            line-height: 1.65;
            text-align: center;
            opacity: 0.8;
        }

        .strat-ns .top-picks-label {

            font-weight: 200;
            color: var(--text-muted);
            font-size: var(--text-base);
        }

        /* Footer */
        .strat-ns .page-footer {

            margin-top: 3rem;
            padding: 2rem;
            border: 1px solid var(--border-subtle);
            border-radius: var(--radius-lg);
        }

        .strat-ns .footer-disclaimer {

            font-size: var(--text-base);
            color: var(--text-muted);
            line-height: 1.7;
            margin-bottom: 1rem;
        }

        .strat-ns .footer-meta {

            display: flex;
            gap: 12px;
            font-size: var(--text-md);
            color: var(--text-muted);
            opacity: 0.6;
        }

        /* Loading states */
        .strat-ns .loading-state {

            color: var(--text-muted);
            text-align: center;
            padding: 3rem;
        }

        .strat-ns .loading-spinner {

            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid #333;
            border-top-color: #888;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-right: 10px;
            vertical-align: middle;
        }

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

        /* Responsive */
        @media (max-width: 1500px) {
            .strat-ns .main-layout {

                grid-template-columns: 1fr 450px;
            }
            .strat-ns .picks-inline {

                display: none;
            }
            .strat-ns .compare-charts {

                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 1100px) {
            .strat-ns .main-layout {

                grid-template-columns: 1fr;
            }
            .strat-ns .stats-bar {

                flex-wrap: wrap;
                gap: 20px;
            }
        }

        @media (max-width: 768px) {
            .strat-ns .page-container {

                padding: 20px 16px;
            }
            .strat-ns .filter-bar {

                justify-content: center;
            }
            /* Hide compare section (scatter plot) on mobile */
            .strat-ns .compare-section {

                display: none;
            }
            /* Hide vs SPY column on mobile */
            .strat-table th:nth-child(4),
            .strat-ns .strat-table td:nth-child(4) {

                display: none;
            }
        }

        @media (max-width: 480px) {
            .strat-ns .page-container {

                padding: 16px 12px;
            }
            .strat-ns .page-title {

                font-size: var(--text-xl);
            }
        }

        @media (max-width: 360px) {
            .strat-ns .page-container {

                padding: 12px 8px;
            }
        }

        /* ================================================
           TODAY'S TOP PICKS
           .strat-ns ================================================ */

        .strat-ns .today-picks {
            padding: 16px 0;
            margin-bottom: 12px;
            position: relative;
        }
        .strat-ns .today-picks::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.03) 0%, rgba(0, 201, 167, 0.02) 50%, transparent 100%);
            border-radius: 20px;
            pointer-events: none;
        }
        .strat-ns .today-picks-title {
            font-family: var(--font-display);
            font-size: var(--text-md);
            font-weight: 200;
            color: #ffffff;
            margin-bottom: 4px;
            text-align: center;
            letter-spacing: 0.02em;
        }
        .strat-ns .today-picks-sub {
            font-family: var(--font-body);
            font-size: var(--text-base);
            color: rgba(0, 212, 255, 0.5);
            text-align: center;
            margin-bottom: 12px;
            letter-spacing: 0.04em;
        
        }
        .strat-ns .today-picks-scroll {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            padding: 0 8px 4px;
        }
        .strat-ns .pick-card {
            flex-shrink: 0;
            background: rgba(0, 0, 0, 0.25);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: var(--radius-lg);
            padding: 12px 16px;
            min-width: 180px;
            max-width: 240px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 212, 255, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.06);
            transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
            cursor: default;
        }
        .strat-ns .pick-card:hover {
            transform: translateY(-2px);
            border-color: rgba(0, 212, 255, 0.22);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 212, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .strat-ns .pick-card-name {
            font-family: var(--font-body);
            font-size: var(--text-md);
            color: rgba(0, 212, 255, 0.85);
            font-weight: 200;
            margin-bottom: 10px;
            text-align: center;
            letter-spacing: 0.01em;
        }
        .strat-ns .pick-tickers {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            justify-content: center;
        }
        .strat-ns .pick-ticker {
            font-family: var(--font-mono);
            font-size: var(--text-base);
            color: rgba(232, 240, 255, 0.7);
            background: rgba(0, 212, 255, 0.06);
            border: 1px solid rgba(0, 212, 255, 0.1);
            border-radius: 6px;
            padding: 4px 10px;
            letter-spacing: 0.02em;
        }

/* ============================================ */
/* VISUAL REDESIGN - NEW LAYOUT RULES           */
/* ============================================ */

/* Toolbar left group - title + subtitle inline */
.toolbar-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

/* Override toolbar for compact header */
.toolbar {
    padding: 0.7rem 16px 4px !important;
}
.toolbar-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
}

/* Title - left-aligned, not full width */
.toolbar-title {
    width: auto !important;
    text-align: left !important;
    white-space: nowrap !important;
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    padding-bottom: 0 !important;
    flex-shrink: 0;
}
.toolbar-title::after {
    content: none !important;
}
.toolbar-subtitle {
    font-size: var(--text-base) !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
}
.toolbar-intro {
    font-size: var(--text-base) !important;
    color: rgba(255, 255, 255, 0.62) !important;
    margin: 3px 0 0 !important;
    font-weight: 200 !important;
    line-height: 1.4 !important;
    max-width: 500px;
}

/* Lens tabs - inline in header row, no sticky */
.lens-tabs {
    position: static !important;
    display: inline-flex !important;
    gap: 6px !important;
    max-width: none !important;
    margin: 0 !important;
    flex-shrink: 0;
}
.lens-tab {
    padding: 7px 20px !important;
    font-size: var(--text-xs) !important;
    border-radius: 10px !important;
}

/* Alchemist container - Twitter blue, translucent */
.alchemist-section {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 16px 24px 14px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Input - bright white on blue */
.alchemist-input {
    border-radius: 24px !important;
    padding: 12px 48px 12px 20px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: var(--text-sm) !important;
    line-height: 1.4 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-weight: 200 !important;
}
.alchemist-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}
.alchemist-input:focus {
    border-color: rgba(255, 255, 255, 0.6) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

/* Send button - white on blue */
.alchemist-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    right: 7px !important;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: rgba(212,175,55,0.8) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    animation: none !important;
}
.alchemist-btn:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    color: rgba(212,175,55,0.8) !important;
    box-shadow: none !important;
    animation: none !important;
}
.alchemist-btn.loading {
    animation: none !important;
}
.alchemist-btn svg {
    stroke: rgba(212,175,55,0.8) !important;
}

/* Suggestion chips - small, muted, below input */
.alch-chip {
    border-radius: var(--radius-md) !important;
    padding: 5px 12px !important;
    font-size: var(--text-2xs) !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    font-weight: 200 !important;
}
.alch-chip strong {
    color: inherit !important;
    font-weight: 200 !important;
}
.alch-chip:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: none !important;
}
.alch-chip:hover strong {
    color: inherit !important;
}
.alch-chip.loading {
    animation: none !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.62) !important;
}

/* Chat bubbles - iMessage style */
.alch-msg-user {
    background: linear-gradient(135deg, #0a84ff, #0066d6) !important;
    border-radius: 22px 22px 6px 22px !important;
    box-shadow: 0 3px 14px rgba(10, 132, 255, 0.3) !important;
}
.alch-msg-ai {
    background: rgba(38, 40, 50, 0.85) !important;
    border-radius: 22px 22px 22px 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.alch-typing-dots {
    background: rgba(38, 40, 50, 0.85) !important;
    border-radius: 22px 22px 22px 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Manual filter - tighter spacing */
.manual-filter-toggle {
    margin-top: -6px !important;
    padding: 0 16px !important;
}
.manual-filter-btn {
    font-size: var(--text-base) !important;
    color: rgba(255, 255, 255, 0.62) !important;
}

/* Table - more breathing room, better hover */
.data-table td {
    padding: 6px 8px !important;
}
.data-table tbody tr:first-child td {
    padding: 6px 8px !important;
}
.data-table tbody tr:hover td {
    background: rgba(212, 175, 55, 0.1) !important;
}
.data-table tbody tr:hover {
    box-shadow: inset 3px 0 0 rgba(212, 175, 55, 0.4), 0 0 16px rgba(212, 175, 55, 0.04) !important;
}
.data-table tbody tr.selected {
    box-shadow: inset 3px 0 0 rgba(212, 175, 55, 0.5), 0 0 20px rgba(212, 175, 55, 0.06) !important;
}

/* Column toggle */
.col-toggle-btn.active {
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.1), 0 0 24px rgba(212, 175, 55, 0.04) !important;
}

/* Side panel section titles - DM Sans with border accent */
.panel-section-title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: var(--text-xs) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    letter-spacing: 0.04em !important;
    font-weight: 300 !important;
    padding-left: 10px !important;
    border-left: 2px solid rgba(212,175,55,0.4) !important;
}

/* Panel tabs - slightly larger text */

/* Strategy metric values - larger for impact */
.strat-panel-metric-value {
    font-size: var(--text-lg) !important;
}

/* Improved positive/negative contrast — Grok palette */
.positive { color: #22c55e !important; }
.negative { color: #ef4444 !important; }

/* Sparkline - taller for better visibility */
.panel-sparkline-wrap {
    height: 48px !important;
    margin: -4px 0 14px !important;
}
.panel-sparkline-wrap canvas {
    height: 48px !important;
}

/* ── Responsive: Mobile layout ── */
@media (max-width: 768px) {
    .toolbar-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .toolbar-left {
        align-items: center;
        text-align: center;
    }
    .toolbar-title {
        text-align: center !important;
    }
    .toolbar-subtitle {
        text-align: center !important;
    }
    .lens-tabs {
        justify-content: center !important;
    }
    .lens-tab {
        padding: 7px 18px !important;
        font-size: var(--text-base) !important;
    }
    .alchemist-section {
        padding: 10px 12px 8px !important;
        border-radius: var(--radius-lg) !important;
    }
    .alchemist-input {
        padding: 10px 42px 10px 16px !important;
        font-size: var(--text-xs) !important;
    }
    .alchemist-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }
}

/* ============================================ */
/* OVERVIEW REDESIGN — Glass + Turquoise        */
/* ============================================ */

/* --- Badge Row --- */
.ov-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 10px;
}
.ov-badge {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-lg);
    padding: 8px 6px 7px;
    text-align: center;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.ov-badge::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.06) 44%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 56%, transparent 62%);
    animation: ov-shimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
.ov-badge:nth-child(2)::after { animation-delay: .3s; }
.ov-badge:nth-child(3)::after { animation-delay: .6s; }
.ov-badge:nth-child(4)::after { animation-delay: .9s; }
.ov-badge.positive {
    color: #4ade80;
    background: linear-gradient(160deg, rgba(74,222,128,0.12) 0%, rgba(34,197,94,0.06) 50%, rgba(74,222,128,0.10) 100%);
    border: 1.5px solid rgba(34,197,94,0.25);
    box-shadow: 0 0 16px rgba(74,222,128,0.1), 0 0 6px rgba(34,197,94,0.06), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ov-badge.warning {
    color: #fbbf24;
    background: linear-gradient(160deg, rgba(251,191,36,0.12) 0%, rgba(217,119,6,0.06) 50%, rgba(251,191,36,0.10) 100%);
    border: 1.5px solid rgba(217,119,6,0.2);
    box-shadow: 0 0 16px rgba(251,191,36,0.08), 0 0 6px rgba(217,119,6,0.05), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ov-badge.negative {
    color: #ef4444;
    background: linear-gradient(160deg, rgba(248,113,113,0.12) 0%, rgba(239,68,68,0.06) 50%, rgba(248,113,113,0.10) 100%);
    border: 1.5px solid rgba(239,68,68,0.2);
    box-shadow: 0 0 16px rgba(248,113,113,0.08), 0 0 6px rgba(239,68,68,0.05), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ov-badge-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-bottom: 2px;
}
.ov-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ov-badge.positive .ov-badge-dot {
    background: radial-gradient(circle at 35% 35%, #86efac 0%, #4ade80 40%, #22c55e 100%);
    box-shadow: 0 0 6px rgba(74,222,128,0.7), 0 0 14px rgba(34,197,94,0.35);
    animation: ov-pulse-green 2s ease-in-out infinite;
}
.ov-badge.warning .ov-badge-dot {
    background: radial-gradient(circle at 35% 35%, #fde68a 0%, #fbbf24 40%, #d97706 100%);
    box-shadow: 0 0 6px rgba(251,191,36,0.6), 0 0 14px rgba(217,119,6,0.3);
    animation: ov-pulse-amber 2s ease-in-out infinite;
}
.ov-badge.negative .ov-badge-dot {
    background: radial-gradient(circle at 35% 35%, #fca5a5 0%, #f87171 40%, #ef4444 100%);
    box-shadow: 0 0 6px rgba(248,113,113,0.6), 0 0 14px rgba(239,68,68,0.3);
    animation: ov-pulse-red 2s ease-in-out infinite;
}
@keyframes ov-shimmer {
    0%, 100% { transform: translateX(-80%); }
    50% { transform: translateX(80%); }
}
@keyframes ov-pulse-green {
    0%, 100% { box-shadow: 0 0 6px rgba(74,222,128,0.7), 0 0 14px rgba(34,197,94,0.35); }
    50% { box-shadow: 0 0 12px rgba(74,222,128,0.9), 0 0 22px rgba(34,197,94,0.45); }
}
@keyframes ov-pulse-amber {
    0%, 100% { box-shadow: 0 0 6px rgba(251,191,36,0.6), 0 0 14px rgba(217,119,6,0.3); }
    50% { box-shadow: 0 0 12px rgba(251,191,36,0.8), 0 0 22px rgba(217,119,6,0.4); }
}
@keyframes ov-pulse-red {
    0%, 100% { box-shadow: 0 0 6px rgba(248,113,113,0.6), 0 0 14px rgba(239,68,68,0.3); }
    50% { box-shadow: 0 0 12px rgba(248,113,113,0.8), 0 0 22px rgba(239,68,68,0.4); }
}
.ov-badge-label {
    font-family: var(--font-number);
    font-size: var(--text-xs);
    font-weight: 200;

    letter-spacing: 0.5px;
}
.ov-badge.positive .ov-badge-label { color: #4ade80; }
.ov-badge.warning .ov-badge-label { color: #fbbf24; }
.ov-badge.negative .ov-badge-label { color: #ef4444; }
.ov-badge-sub {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.62);

    letter-spacing: 0.5px;
}

/* --- Hero Section (Thesis + Sparkline) --- */
.ov-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.ov-thesis {
    background: rgba(255,255,255,0.03);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.ov-thesis-head {
    font-family: 'DM Sans', sans-serif;
    font-size: var(--text-md);
    font-weight: 200;
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 10px;
    border-left: 2px solid rgba(147,197,253,0.3);
}
.ov-thesis-head::before {
    display: none;
}
.ov-thesis-body {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    flex: 1;
    margin-bottom: 10px;
}
.ov-thesis-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: auto;
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.ov-thesis-stat {
    text-align: center;
    padding: 5px 2px;
    background: rgba(10,14,22,0.7);
}
.ov-thesis-stat-val {
    font-family: var(--font-number);
    font-size: var(--text-xs);
    font-weight: 200;
    color: rgba(255,255,255,0.85);
}
.ov-thesis-stat-label {
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    color: rgba(255, 255, 255, 0.62);

    letter-spacing: 0.5px;
    margin-top: 2px;
}
.ov-thesis-stat-comp {
    font-family: var(--font-number);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.62);
    margin-top: 1px;
}

/* Price hero (sparkline side) */
.ov-price-hero {
    background: rgba(255,255,255,0.03);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-lg);
    padding: 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.ov-price-hero-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}
.ov-price-hero-price {
    font-family: var(--font-number);
    font-size: var(--text-md);
    font-weight: 200;
    color: #fff;
}
.ov-price-hero-change {
    font-family: var(--font-number);
    font-size: var(--text-xs);
    font-weight: 200;
}
.ov-price-hero-change.up { color: #4ade80; }
.ov-price-hero-change.down { color: #ef4444; }
.ov-price-hero canvas {
    width: 100%;
    flex: 1;
    min-height: 120px;
}
.ov-comp-label {
    font-family: var(--font-number);
    font-size: var(--text-xs);
    font-weight: 200;
    letter-spacing: 1.5px;

    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 4px;
}
.ov-comp-btns {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin-top: 5px;
    justify-content: center;
}
.ov-comp-btn {
    padding: 2px 7px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font: 600 8px var(--font-number);
    transition: all 0.15s;
}
.ov-comp-btn.self {
    background: rgba(20,184,216,0.12);
    color: rgba(212,175,55,0.8);
    cursor: default;
}
.ov-comp-btn.peer {
    background: rgba(255,255,255,0.04);
    color: rgba(255, 255, 255, 0.62);
}
.ov-comp-btn.peer.on {
    background: rgba(255,255,255,0.08);
    color: rgba(255, 255, 255, 0.62);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* --- Section Label --- */
.ov-sl {
    font-family: var(--font-number);
    font-size: var(--text-xs);
    font-weight: 200;

    letter-spacing: 1.5px;
    color: rgba(20,184,216,0.5);
    margin: 14px 0 8px;
}

/* --- Divider --- */
.ov-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(20,184,216,0.15) 20%, rgba(20,184,216,0.15) 80%, transparent 100%);
    margin: 10px 0;
}

/* --- Momentum Strip --- */
.ov-mom-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
.ov-mom-cell {
    text-align: center;
    padding: 10px 4px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
.ov-mom-val {
    font-family: var(--font-number);
    font-size: var(--text-xs);
    font-weight: 200;
    color: rgba(255,255,255,0.85);
}
.ov-mom-val.cyan { color: #4ade80; }
.ov-mom-val.amber { color: #fbbf24; }
.ov-mom-val.red { color: #ef4444; }
.ov-mom-label {
    font-family: var(--font-body);
    font-size: var(--text-2xs);

    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 3px;
}

/* --- Overview panel-section --- */
#tab-overview .panel-section {
    background: rgba(255,255,255,0.02);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 8px;
    box-shadow: none;
    animation: ov-fadeUp 0.3s ease both;
}
#tab-overview .panel-section:nth-child(1) { animation-delay: 0.02s; }
#tab-overview .panel-section:nth-child(2) { animation-delay: 0.04s; }
#tab-overview .panel-section:nth-child(3) { animation-delay: 0.06s; }
#tab-overview .panel-section:nth-child(4) { animation-delay: 0.08s; }
#tab-overview .panel-section:nth-child(5) { animation-delay: 0.10s; }
@keyframes ov-fadeUp {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
#tab-overview .panel-section-title {
    font-size: var(--text-xs);
    font-weight: 200;

    letter-spacing: 1.5px;
    color: rgba(20,184,216,0.5);
    border-bottom: none;
    margin-bottom: 8px;
    padding-bottom: 0;
}

/* --- Override signal bar for green --- */
#tab-overview .signal-segment.filled {
    background: #22c55e !important;
}
#tab-overview .summary-tag.bullish {
    color: #4ade80;
    border-color: rgba(34,197,94,0.25);
}

/* --- Responsive --- */
@media (max-width: 580px) {
    .ov-badges { grid-template-columns: repeat(2, 1fr); }
    .ov-hero { grid-template-columns: 1fr; }
    .ov-mom-strip { grid-template-columns: repeat(2, 1fr); }
    .ov-mom-cell:nth-child(2) { border-right: none; }
}

@media (max-width: 480px) {
    .toolbar-title {
        font-size: var(--text-lg) !important;
    }
    .lens-tabs {
        width: 100%;
    }
    .lens-tab {
        flex: 1;
        text-align: center;
        padding: 8px 12px !important;
    }
}

/* Keyboard navigation highlight */
#tableBody tr.keyboard-active {
    outline: 1px solid rgba(212, 175, 55, 0.35);
    background: rgba(212, 175, 55, 0.04) !important;
}

/* WHY CHEAP NOW? — Side Panel Card             */
/* ============================================ */
/* AI Pulse — "What's Happening Now" */
.panel-pulse-card {
    margin: 12px 0 4px;
    padding: 14px 16px 12px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: var(--radius-lg);
    border-left: 3px solid #a855f7;
}
.panel-pulse-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.panel-pulse-title {
    font-family: var(--font-body); font-size: var(--text-xs); font-weight: 200;
    color: #a855f7; letter-spacing: 0.01em;
}
.panel-pulse-text {
    font-family: var(--font-body); font-size: var(--text-base); font-weight: 200;
    color: rgba(255, 255, 255, 0.78); line-height: 1.55;
}
.panel-pulse-text strong {
    color: rgba(255, 255, 255, 0.92); font-weight: 400;
}
.panel-pulse-shimmer { display: flex; flex-direction: column; gap: 8px; }
.panel-pulse-shimmer .shimmer-line {
    height: 12px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
.panel-pulse-shimmer .shimmer-line.short { width: 65%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.why-cheap-card {
    margin: 12px 0 4px;
    padding: 14px 16px 12px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--radius-lg);
    border-left: 3px solid #f59e0b;
}

.why-cheap-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.why-cheap-icon {
    flex-shrink: 0;
}

.why-cheap-title {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 200;
    color: #f59e0b;
    letter-spacing: 0.01em;
}

.why-cheap-body {
    min-height: 20px;
}

.why-cheap-loading {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.why-cheap-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(245, 158, 11, 0.2);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: whyCheapSpin 0.8s linear infinite;
}

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

.why-cheap-text {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 200;
}

.why-cheap-footer {
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-style: italic;
}

/* ============================================ */
/* INSIDER ACTIVITY TRACKER                     */
/* ============================================ */
.insider-activity-card {
    padding: 0;
}

.insider-signal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.insider-signal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-md);
    border: 1px solid;
    background: rgba(34, 197, 94, 0.08);
}

.insider-signal-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.insider-signal-label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 200;
    letter-spacing: 0.02em;
}

.insider-signal-desc {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-secondary, #a3a3a3);
    font-weight: 200;
}

.insider-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.insider-metric {
    padding: 10px 8px;
    text-align: center;
    background: rgba(6, 8, 16, 0.5);
}

.insider-metric:first-child {
    border-radius: 10px 0 0 10px;
}

.insider-metric:last-child {
    border-radius: 0 10px 10px 0;
}

.insider-metric-value {
    font-family: var(--font-number, 'DM Sans', sans-serif);
    font-size: var(--text-md);
    font-weight: 200;
    line-height: 1.2;
}

.insider-metric-label {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-muted, rgba(255, 255, 255, 0.55));

    letter-spacing: 0.06em;
    margin-top: 3px;
}

.insider-compound-signal {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.insider-compound-signal svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.insider-compound-signal span {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.55;
    font-weight: 200;
}

.insider-compound-strong {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-left: 3px solid #22c55e;
}

.insider-compound-strong span {
    color: rgba(255, 255, 255, 0.9);
}

.insider-compound-moderate {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.12);
}

.insider-compound-moderate span {
    color: rgba(255, 255, 255, 0.8);
}

.insider-compound-caution {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-left: 3px solid #f59e0b;
}

.insider-compound-caution span {
    color: rgba(255, 255, 255, 0.85);
}

.insider-ownership-note {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    padding-top: 4px;
}

/* Insider signal dots in screener table */
.insider-dot {
    font-size: var(--text-base);
    vertical-align: middle;
    margin-left: 2px;
}

.insider-dot-buy {
    color: #22c55e;
}

.insider-dot-sell {
    color: #ef4444;
}

@media (max-width: 480px) {
    .insider-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .insider-metric:first-child {
        border-radius: 10px 0 0 0;
    }
    .insider-metric:nth-child(2) {
        border-radius: 0 10px 0 0;
    }
    .insider-metric:nth-child(3) {
        border-radius: 0 0 0 10px;
    }
    .insider-metric:last-child {
        border-radius: 0 0 10px 0;
    }
    .insider-signal-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ============================================ */
/* HOLDINGS OVERLAP SECTION                     */
/* ============================================ */

.overlap-section {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0;
}

.overlap-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.overlap-header-left {
    flex: 1;
    min-width: 200px;
}

.overlap-title {
    font-family: var(--font-body);
    font-weight: 200;
    font-size: var(--text-xl);
    color: #ffffff;
    margin: 0 0 4px 0;
    letter-spacing: 0.02em;
}

.overlap-subtitle {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    margin: 0;
}

.overlap-legend {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.overlap-legend-item {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
}

.overlap-legend-item.conviction-high {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.overlap-legend-item.conviction-notable {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.overlap-legend-item.conviction-shared {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Overlap Grid */
.overlap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

/* Overlap Card */
.overlap-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.overlap-card:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.overlap-card.conviction-high {
    border-color: rgba(34, 197, 94, 0.25);
}
.overlap-card.conviction-high:hover {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.15);
}

.overlap-card.conviction-notable {
    border-color: rgba(245, 158, 11, 0.2);
}
.overlap-card.conviction-notable:hover {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.12);
}

/* Card Top Row */
.overlap-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
}

.overlap-card-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.overlap-card-logo {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    flex-shrink: 0;
}

.overlap-card-info {
    min-width: 0;
}

.overlap-card-ticker {
    font-family: var(--font-number, 'DM Sans', sans-serif);
    font-size: var(--text-xs);
    font-weight: 200;
    color: #ffffff;
    letter-spacing: 0.03em;
}

.overlap-card-name {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* Conviction Badge */
.overlap-conviction-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.overlap-conviction-count {
    font-family: var(--font-number, 'DM Sans', sans-serif);
    font-size: var(--text-md);
    font-weight: 200;
    line-height: 1;
}

.overlap-conviction-label {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;

    letter-spacing: 0.08em;
    margin-top: 2px;
}

.overlap-card.conviction-high .overlap-conviction-count { color: #4ade80; }
.overlap-card.conviction-high .overlap-conviction-label { color: rgba(74, 222, 128, 0.7); }

.overlap-card.conviction-notable .overlap-conviction-count { color: #fbbf24; }
.overlap-card.conviction-notable .overlap-conviction-label { color: rgba(251, 191, 36, 0.7); }

.overlap-card.conviction-shared .overlap-conviction-count { color: rgba(255, 255, 255, 0.62); }
.overlap-card.conviction-shared .overlap-conviction-label { color: rgba(255, 255, 255, 0.62); }

/* Card Metrics Row */
.overlap-card-metrics {
    display: flex;
    gap: 12px;
    margin-bottom: 6px;
}

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

.overlap-card-metric-value {
    font-family: var(--font-number, 'DM Sans', sans-serif);
    font-size: var(--text-xs);
    font-weight: 200;
    color: rgba(255, 255, 255, 0.85);
}

.overlap-card-metric-label {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-muted, rgba(255, 255, 255, 0.55));

    letter-spacing: 0.05em;
}

/* Card Strategy Preview */
.overlap-card-strategies {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.overlap-strat-chip {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Detail Panel */
.overlap-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.overlap-detail-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 90%;
    max-width: 560px;
    max-height: 80vh;
    background: rgba(12, 18, 30, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.overlap-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.overlap-detail-title {
    font-family: var(--font-number, 'DM Sans', sans-serif);
    font-size: var(--text-md);
    font-weight: 200;
    color: #ffffff;
}

.overlap-detail-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--text-lg);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}
.overlap-detail-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.overlap-detail-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
}

.overlap-detail-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.overlap-detail-meta-item {
    display: flex;
    flex-direction: column;
}

.overlap-detail-meta-value {
    font-family: var(--font-number, 'DM Sans', sans-serif);
    font-size: var(--text-md);
    font-weight: 200;
    color: #ffffff;
}

.overlap-detail-meta-label {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-muted, rgba(255, 255, 255, 0.55));

    letter-spacing: 0.05em;
}

.overlap-detail-strategies-title {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 200;
    color: rgba(255, 255, 255, 0.62);

    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.overlap-detail-strat-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.overlap-detail-strat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.15s;
}

.overlap-detail-strat-row:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.overlap-detail-strat-name {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 200;
}

.overlap-detail-strat-cat {
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: capitalize;
    font-weight: 200;
}

/* Category colors for detail panel chips */
.overlap-detail-strat-cat.cat-momentum { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
.overlap-detail-strat-cat.cat-reversal { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.overlap-detail-strat-cat.cat-quality { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.overlap-detail-strat-cat.cat-value { background: rgba(234, 179, 8, 0.15); color: #fde047; }
.overlap-detail-strat-cat.cat-composite { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.overlap-detail-strat-cat.cat-technical { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.overlap-detail-strat-cat.cat-volatility { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.overlap-detail-strat-cat.cat-contrarian { background: rgba(232, 121, 249, 0.15); color: #e879f9; }
.overlap-detail-strat-cat.cat-hybrid { background: rgba(192, 132, 252, 0.15); color: #c084fc; }
.overlap-detail-strat-cat.cat-meanrev { background: rgba(251, 113, 133, 0.15); color: #fb7185; }
.overlap-detail-strat-cat.cat-unknown { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.62); }

/* Responsive */
@media (max-width: 768px) {
    .overlap-grid {
        grid-template-columns: 1fr;
    }
    .overlap-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .overlap-detail-panel {
        width: 96%;
        max-height: 85vh;
    }
}

/* ============================================ */
/* SCREENER TABLE — Mobile                      */
/* ============================================ */
@media (max-width: 768px) {
    .data-table { font-size: var(--text-2xs); }
    .data-table th { padding: 10px 6px; font-size: var(--text-2xs); }
    .data-table td { padding: 4px 6px; }
    .stock-cell { min-width: 160px !important; }

    /* Sticky stock column on mobile */
    .data-table td.l.stock-cell,
    .data-table th[data-sort="name"] {
        position: sticky;
        left: 0;
        z-index: 12;
        background: var(--glass-bg-dark, #0d1117);
    }
    .data-table tr:hover td.l.stock-cell {
        background: var(--table-hover-bg, rgba(255,255,255,0.04));
    }
    .data-table thead th[data-sort="name"] {
        z-index: 15;
    }

    /* Hide sector column on mobile to save space */
    .data-table th[data-sort="sector"],
    .data-table td[data-col="1"] {
        display: none;
    }

    .table-container { max-height: 65vh; }

    /* Show horizontal scrollbar on mobile */
    .table-container::-webkit-scrollbar:horizontal {
        height: 4px;
        display: block;
    }
    .table-container::-webkit-scrollbar-thumb:horizontal {
        background: rgba(255,255,255,0.12);
        border-radius: 2px;
    }
    .table-container { scrollbar-width: thin; }
}

@media (max-width: 480px) {
    .data-table { font-size: var(--text-2xs); }
    .data-table th { padding: 8px 4px; font-size: var(--text-2xs); }
    .data-table td { padding: 3px 4px; }
    .stock-cell { min-width: 130px !important; }
    .stock-cell .stock-name { max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
}

/* ============================================ */
/* EARNINGS STREAK — Side Panel                 */
/* ============================================ */
.earnings-panel-card {
    padding: 0;
}

.earnings-panel-signal-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.earnings-compound-badge {
    margin-top: 10px;
    padding: 6px 10px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 200;
    color: #22c55e;
    text-align: center;
}

/* Responsive */
@media (max-width: 640px) {
    .earnings-streak-section {
        margin: 8px 10px 6px;
        padding: 14px 12px 12px;
    }

    .es-card {
        width: 160px;
        padding: 12px 12px 10px;
    }

    .earnings-streak-title {
        font-size: var(--text-base);
    }
}

@media (max-width: 420px) {
    .es-card {
        width: 145px;
    }
}

/* ============================================ */
/* ESTIMATE REVISION TRACKER — Side Panel       */
/* ============================================ */
.revision-tracker {
    padding: 0;
    font-family: var(--font-body);
}

.revision-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0;
    font-size: var(--text-md);
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-weight: 200;
}

/* Spinning loader */
.revision-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(212,175,55,0.8);
    border-radius: 50%;
    animation: revisionSpin 0.7s linear infinite;
    flex-shrink: 0;
}

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

.revision-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Revision Summary */
.revision-summary {
    font-size: var(--text-md);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
}

.revision-summary strong {
    color: #ffffff;
    font-weight: 200;
}

/* Signal Badge */
.revision-signal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-md);
    border: 1px solid;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;
    letter-spacing: 0.02em;
    width: fit-content;
}

.revision-signal-badge.signal-positive {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.revision-signal-badge.signal-negative {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.revision-signal-badge.signal-mixed {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.revision-signal-badge.signal-neutral {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.62);
}

/* Chart wrap */
.revision-chart-wrap {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px 14px;
}

.revision-chart-title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;

    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 8px;
}

.revision-chart-wrap canvas {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* Recent Analyst Actions */
.revision-actions {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.revision-actions .revision-action-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.revision-actions .revision-action-item:last-child {
    border-bottom: none;
}

.revision-action-firm {
    font-weight: 200;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.revision-action-type {
    font-size: var(--text-base);
    font-weight: 200;

    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.revision-action-type.upgrade {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.revision-action-type.downgrade {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.revision-action-type.reiterated {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.62);
}

/* Estimate Changes */
.revision-estimates {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.revision-estimates table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-number);
    font-size: var(--text-base);
}

.revision-estimates th {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;

    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.62);
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
}

.revision-estimates td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.8);
}

.revision-estimates .est-up {
    color: #22c55e;
}

.revision-estimates .est-down {
    color: #ef4444;
}

/* Error and Login states */
.revision-error {
    padding: 12px 0;
    font-size: var(--text-md);
    color: rgba(255, 255, 255, 0.62);
    font-weight: 200;
}

.revision-error a {
    color: rgba(212,175,55,0.8);
    text-decoration: none;
}

.revision-error a:hover {
    text-decoration: none;
}

.revision-login {
    padding: 12px 0;
}

.revision-login a {
    color: rgba(212,175,55,0.8);
    text-decoration: none;
}

.revision-login a:hover {
    text-decoration: none;
}

/* ========== Thesis Tab: Narrative ========== */
.thesis-narrative {
    padding: 0;
    margin: 12px 0 0;
}
.thesis-narr-title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;
    letter-spacing: 0.08em;

    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 6px;
}
.thesis-narr-block {
    margin-bottom: 8px;
}
.thesis-narr-label {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 2px;
    letter-spacing: 0.03em;
}
.thesis-narr-text {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
}

/* ========== Thesis Tab: Key Issues ========== */
.thesis-key-issues {
    padding: 0;
}
.thesis-ki-title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;
    letter-spacing: 0.08em;

    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 6px;
}
.thesis-ki-card {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.thesis-ki-card:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.thesis-ki-head {
    font-family: var(--font-body);
    font-size: var(--text-md);
    font-weight: 200;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}
.thesis-ki-row {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.45;
    margin-bottom: 2px;
}
.thesis-ki-row.bull { color: rgba(255, 255, 255, 0.62); }
.thesis-ki-row.bear { color: rgba(255, 255, 255, 0.62); }
.thesis-ki-icon {
    flex-shrink: 0;
    font-size: var(--text-base);
    margin-top: 3px;
}
.thesis-ki-row.bull .thesis-ki-icon { color: var(--accent-positive); }
.thesis-ki-row.bear .thesis-ki-icon { color: var(--accent-negative); }

/* ========== Thesis Tab: Scenarios ========== */
.thesis-scenarios {
    padding: 0;
}
.thesis-sc-title {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;
    letter-spacing: 0.08em;

    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 6px;
}
.thesis-sc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
}
.thesis-sc-card {
    padding: 6px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
}
.thesis-sc-card.bear { border-color: rgba(239,68,68,0.12); }
.thesis-sc-card.base { border-color: rgba(180,160,120,0.12); }
.thesis-sc-card.bull { border-color: rgba(34,197,94,0.12); }
.thesis-sc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.thesis-sc-type {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 200;

    letter-spacing: 0.05em;
}
.thesis-sc-prob {
    font-family: var(--font-number);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.62);
}
.thesis-sc-target {
    font-family: var(--font-number);
    font-size: var(--text-xs);
    font-weight: 200;
    color: rgba(255,255,255,0.75);
    margin-bottom: 3px;
}
.thesis-sc-text {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.45;
}


/* ================================================ */
/* TABLE UX IMPROVEMENTS (Feb 2026)                */
/* ================================================ */

/* Dim empty/missing values — "—" should not compete with real data */
.data-table td {
    transition: background 0.15s ease, color 0.15s ease;
}
.data-table td .muted,
.data-table td span.muted {
    color: rgba(255, 255, 255, 0.62) !important;
    font-weight: 200 !important;
    font-size: var(--text-2xs);
    letter-spacing: 0.05em;
}

/* Row hover glow — subtle left accent */
.data-table tbody tr:hover {
    box-shadow: inset 3px 0 0 rgba(212, 175, 55, 0.6);
}
.data-table tbody tr:hover td {
    background: rgba(212, 175, 55, 0.06) !important;
}
.data-table tbody tr.selected {
    box-shadow: inset 3px 0 0 rgba(212, 175, 55, 0.65);
}

/* Column group header accents — colored top border per group */
.data-table th[data-group="fundamental"] {
    border-top: 2px solid rgba(59, 130, 246, 0.5);
}
.data-table th[data-group="valuation"] {
    border-top: 2px solid rgba(168, 85, 247, 0.5);
}
.data-table th[data-group="technical"] {
    border-top: 2px solid rgba(34, 197, 94, 0.5);
}

/* Column group sub-label (th-group spans) */
.th-group {
    display: block;
    font-size: 0.75rem;
    font-weight: 200;
    letter-spacing: 0.03em;
    opacity: 0.7;
    margin-top: 2px;
}

/* Better sort indicator styling */
.data-table th.sorted {
    color: #fff !important;
    background: rgba(212, 175, 55, 0.06) !important;
}
.data-table th.sorted::after {
    color: rgba(212,175,55,0.8);
    opacity: 0.9;
    margin-left: 3px;
}

/* Alternating row tint — very subtle */
.data-table tbody tr:nth-child(even) td {
    background: rgba(255,255,255,0.025);
}
.data-table tbody tr:nth-child(even):hover td {
    background: rgba(212, 175, 55, 0.06) !important;
}

/* Stock name cell — make it stand out */
.data-table td.l.stock-cell .stock-name {
    font-size: var(--text-sm);
    font-weight: 200;
    letter-spacing: -0.01em;
}
.data-table td.l.stock-cell .stock-ticker {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    opacity: 0.45;
    letter-spacing: 0.02em;
}

/* Positive/negative value colors — stronger contrast */
.data-table td .positive,
.data-table td.positive { color: #22c55e !important; background: rgba(34, 197, 94, 0.08); border-radius: 3px; padding: 1px 4px; }
.data-table td .negative,
.data-table td.negative { color: #ef4444 !important; background: rgba(239, 68, 68, 0.08); border-radius: 3px; padding: 1px 4px; }

/* Table container — refined shadow */
.table-container.glass-box {
    box-shadow: 0 4px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.03);
}


/* ================================================ */
/* AI CHAT VISUAL POLISH (Feb 2026)                */
/* ================================================ */

/* Alchemist container — animated gradient border */
.alchemist-section {
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: relative !important;
}
.alchemist-section::before {
    display: none;
}
@keyframes alchBorderShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Input — gradient glow on focus */
.alchemist-input:focus {
    border-color: rgba(212, 175, 55, 0.4) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08), 0 0 20px rgba(212, 175, 55, 0.06) !important;
}

/* Suggestion chips — more visual with hover glow */
.alch-chip {
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: var(--text-xs) !important;
    transition: all 0.25s ease !important;
    position: relative;
    overflow: hidden;
}
.alch-chip:hover {
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(212, 175, 55, 0.06) !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.08);
}

/* Hidden chips container */
.alch-chips-hidden {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}
.alch-chip-toggle {
    opacity: 0.55;
    font-style: normal;
    border-style: dashed;
}
.alch-chip-toggle:hover {
    opacity: 0.85;
    border-style: solid;
}

/* Send button — refined glow */
.alchemist-btn {
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.3), 0 0 0 1px rgba(212, 175, 55, 0.12) !important;
}
.alchemist-btn:hover {
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4), 0 0 0 1px rgba(212, 175, 55, 0.25) !important;
}

/* AI notice — more refined */
.ai-content-notice {
    font-size: var(--text-xs) !important;
    letter-spacing: 0.03em !important;
    opacity: 0.5 !important;
    order: 20;
}

/* Toolbar title — refined with subtle accent */
.toolbar-title {
    position: relative;
}
.toolbar-title::after {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.5), transparent);
    margin-top: 6px;
    border-radius: 1px;
}

/* Filter bar — smoother reveal */
.filter-bar {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                padding 0.3s ease,
                margin 0.3s ease !important;
}

/* Manual filter toggle — more discoverable */
.manual-filter-btn {
    transition: all 0.2s ease;
}
.manual-filter-btn:hover {
    color: rgba(255, 255, 255, 0.62) !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* View toggle refinement */
.view-toggle-btn.active {
    background: rgba(212, 175, 55, 0.1) !important;
    color: rgba(212,175,55,0.8) !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
}

/* Export button refinement */
.export-btn-gold {
    transition: all 0.25s ease;
}
.export-btn-gold:hover {
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .alchemist-section::before { animation: none; }
    .data-table td, .data-table tr, .alch-chip, .export-btn-gold {
        transition: none !important;
    }
}

/* Footer stays at bottom — flex body pushes footer-placeholder down */
body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
body > * {
    width: 100%;
    max-width: 100vw;
}
#main-content {
    max-width: 2000px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
    width: 100%;
    box-sizing: border-box;
}
#footer-placeholder {
    margin-top: auto;
}

/* Show all button */
.show-all-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    font-size: var(--text-2xs, 0.7rem);
    padding: 2px 10px;
    border-radius: 12px;
    cursor: pointer;
    margin-left: 8px;
    transition: border-color 0.2s, color 0.2s;
    font-family: inherit;
    vertical-align: middle;
}
.show-all-btn:hover {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.9);
}

/* === Onboarding Tooltip === */
.onboarding-pulse {
    animation: onboarding-pulse 2s ease-in-out infinite;
}
@keyframes onboarding-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(168,85,247,0); }
    50% { box-shadow: 0 0 0 4px rgba(168,85,247,0.25); }
}
.onboarding-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: rgba(18,24,38,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 10px;
    padding: 12px 36px 12px 14px;
    z-index: 100;
    animation: onboarding-fade-in 0.4s ease-out;
}
.onboarding-tooltip-arrow {
    position: absolute;
    top: -6px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: rgba(18,24,38,0.92);
    border-left: 1px solid rgba(168,85,247,0.3);
    border-top: 1px solid rgba(168,85,247,0.3);
    transform: rotate(45deg);
}
.onboarding-tooltip-text {
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
}
.onboarding-tooltip-text em {
    color: #a855f7;
    font-style: normal;
    font-weight: 500;
}
.onboarding-tooltip-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.onboarding-tooltip-close:hover {
    color: rgba(255,255,255,0.8);
}
@keyframes onboarding-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.onboarding-fade-out {
    animation: onboarding-fade-out 0.3s ease-in forwards;
}
@keyframes onboarding-fade-out {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(-4px); }
}