/* ===== MARKET ANALYZER - SPECIFIC STYLES =====
 * Design System CSS (1-foundation, 2-layout, 3-components) provides:
 *   - Variables, reset, typography (foundation)
 *   - Layout, sidebar, header (layout)
 *   - Buttons, cards, badges, tabs (components)
 *
 * This file contains ONLY market-analyzer-specific components.
 * Migrated from inline <style> block on 2026-02-12.
 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --bg-primary: #0a0a12;
            --bg-secondary: #12121c;
            --bg-card: #1a1a28;
            --bg-hover: #222233;
            --bg-tertiary: #1a2332;
            --accent-blue: #4a6cf7;
            --accent-purple: #7c3aed;
            --accent-green: #10b981;
            --accent-yellow: #f59e0b;
            --accent-orange: #f97316;
            --accent-red: #ef4444;
            --accent-cyan: #06b6d4;
            --accent-market: #3b82f6;
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            --border-color: #2a2a3c;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
        }

        .app-layout { display: flex; min-height: 100vh; }

        /* Sidebar */







        .nav-group:first-child

        a


        a










        @media (max-height: 700px) {






        }

        /* Main Content */
        .main-content {
            flex: 1;
            margin-left: 250px;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Buttons */
        .btn {
            padding: 8px 16px; border-radius: 8px; font-size: 0.85rem;
            cursor: pointer; border: none; transition: all 0.2s;
            display: flex; align-items: center; gap: 6px; font-family: inherit;
        }
        .btn-primary { background: var(--accent-market); color: white; }
        .btn-primary:hover { background: #2563eb; }
        .btn-secondary {
            background: var(--bg-card); color: var(--text-primary);
            border: 1px solid var(--border-color);
        }
        .btn-secondary:hover { background: var(--bg-hover); }
        .btn-warning { background: var(--accent-yellow); color: #000; }
        .btn-warning:hover { background: #d97706; }
        .btn-sm { padding: 6px 12px; font-size: 0.75rem; white-space: nowrap; }

        /* Regime Bar */
        .regime-bar {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            padding: 12px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .regime-metrics { display: flex; gap: 32px; }
        .regime-metric { text-align: center; }
        .regime-metric-label {
            font-size: 0.7rem; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 0.05em;
        }
        .regime-metric-value { font-size: 1.1rem; font-weight: 600; margin-top: 2px; }
        .regime-metric-value.positive { color: var(--accent-green); }
        .regime-metric-value.negative { color: var(--accent-red); }
        .regime-metric-value.warning { color: var(--accent-yellow); }
        .regime-metric-value.elevated { color: var(--accent-orange); }
        .regime-metric-value.no-data { color: var(--text-muted); font-size: 0.9rem; }
        .regime-status { display: flex; align-items: center; gap: 16px; }
        .regime-badge {
            display: flex; align-items: center; gap: 8px;
            padding: 8px 16px; border-radius: 8px;
            font-size: 0.85rem; font-weight: 600;
        }
        .regime-badge.normal {
            background: rgba(16, 185, 129, 0.15); color: var(--accent-green);
            border: 1px solid var(--accent-green);
        }
        .regime-badge.caution {
            background: rgba(245, 158, 11, 0.15); color: var(--accent-yellow);
            border: 1px solid var(--accent-yellow);
        }
        .regime-badge.alert-state {
            background: rgba(249, 115, 22, 0.15); color: var(--accent-orange);
            border: 1px solid var(--accent-orange);
        }
        .regime-status.has-tooltip { position: relative; cursor: help; }
        .regime-tooltip { left: auto; right: 0; transform: none; z-index: 1100; }
        .regime-tooltip::after { left: auto; right: 20px; transform: none; }
        .regime-badge.crisis {
            background: rgba(239, 68, 68, 0.15); color: var(--accent-red);
            border: 1px solid var(--accent-red);
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* Content Area — padding inherited from .content in 2-layout.css */

        /* Tabs — base styles inherited from 3-components.css */

        /* Grid Layouts */
        .market-grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 20px; margin-bottom: 24px;
        }
        .market-grid-wide {
            display: grid; grid-template-columns: 2fr 1fr;
            gap: 20px; margin-bottom: 24px;
        }
        .market-grid-2col {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 20px; margin-bottom: 24px;
        }

        /* Cards */
        .card {
            background: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 12px; overflow: hidden;
        }
        .card-header {
            padding: 16px 20px; border-bottom: 1px solid var(--border-color);
            display: flex; justify-content: space-between; align-items: center;
        }
        .card-title {
            font-weight: 600; font-size: 0.95rem;
            display: flex; align-items: center; gap: 8px;
        }
        .card-body { padding: 20px; }

        /* Signal Badge */
        .signal-badge {
            padding: 4px 8px; border-radius: 4px;
            font-size: 0.75rem; font-weight: 600;
        }
        .signal-badge.bullish { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
        .signal-badge.bearish { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
        .signal-badge.neutral { background: rgba(107, 114, 128, 0.15); color: var(--text-secondary); }

        /* No Data Placeholder */
        .no-data-placeholder {
            display: flex; flex-direction: column; align-items: center;
            justify-content: center; padding: 32px 20px; gap: 8px;
            border: 1px dashed var(--border-color); border-radius: 8px;
            min-height: 120px;
        }
        .no-data-icon { font-size: 24px; opacity: 0.5; }
        .no-data-text { font-size: 0.8rem; color: var(--text-muted); }

        /* Tooltips */
        .has-tooltip { position: relative; cursor: help; }
        .tooltip {
            position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
            background: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 8px; padding: 12px 16px; width: 280px; z-index: 1000;
            opacity: 0; visibility: hidden; transition: all 0.2s;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3); margin-top: 8px;
        }
        .has-tooltip:hover .tooltip { opacity: 1; visibility: visible; }
        /* First metrics: align tooltip left to avoid clipping */
        .regime-metric:first-child .tooltip { left: 0; transform: none; }
        .regime-metric:first-child .tooltip::after { left: 20px; transform: none; }
        .regime-metric:nth-child(2) .tooltip { left: 0; transform: none; }
        .regime-metric:nth-child(2) .tooltip::after { left: 20px; transform: none; }
        .tooltip-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; color: var(--text-primary); }
        .tooltip-text { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; }
        .tooltip::after {
            content: ''; position: absolute; bottom: 100%; left: 50%;
            transform: translateX(-50%); border: 8px solid transparent;
            border-bottom-color: var(--border-color);
        }

        /* ===== INSIGHT BAR ===== */
        .insight-bar {
            background: linear-gradient(90deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
            border-bottom: 1px solid var(--border-color);
            padding: 12px 24px;
            display: flex;
            align-items: center;
            gap: 16px;
            position: relative;
        }

        .insight-bar::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(180deg, var(--accent-blue), var(--accent-purple));
        }

        .insight-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .insight-content {
            flex: 1;
            min-width: 0;
        }

        .insight-text {
            font-size: 0.9rem;
            color: var(--text-primary);
            line-height: 1.4;
        }

        .insight-text strong {
            color: var(--accent-cyan);
        }

        .insight-pagination {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .insight-dots {
            display: flex;
            gap: 4px;
        }

        .insight-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--border-color);
            transition: all 0.3s;
        }

        .insight-dot.active {
            background: var(--accent-blue);
            width: 16px;
            border-radius: 3px;
        }

        .insight-nav {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            width: 28px;
            height: 28px;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            font-size: 1rem;
        }

        .insight-nav:hover {
            background: var(--bg-hover);
            color: var(--text-primary);
        }

        /* ===== OVERVIEW TAB ===== */

        /* GEX Rank Card */
        .gamma-score-container { display: flex; align-items: center; gap: 30px; }
        .gamma-score-gauge { position: relative; width: 160px; height: 160px; }
        .gamma-score-value {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%); text-align: center;
        }
        .gamma-score-number { font-size: 2.5rem; font-weight: 700; }
        .gamma-score-label { font-size: 0.8rem; color: var(--text-muted); }
        .gamma-score-components { flex: 1; }
        .gamma-component {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 0; border-bottom: 1px solid var(--border-color);
        }
        .gamma-component:last-child { border-bottom: none; }
        .gamma-component-name { font-size: 0.85rem; color: var(--text-secondary); }
        .gamma-component-value { font-weight: 600; font-size: 0.9rem; }
        .gamma-component-bar {
            width: 80px; height: 6px; background: var(--bg-primary);
            border-radius: 3px; overflow: hidden; margin-left: 12px;
        }
        .gamma-component-fill { height: 100%; border-radius: 3px; }

        /* VIX Card */
        .vix-display { display: flex; align-items: center; gap: 20px; }
        .vix-main { text-align: center; }
        .vix-value { font-size: 3rem; font-weight: 700; }
        .vix-label { font-size: 0.8rem; color: var(--text-muted); }
        .vix-details { flex: 1; }
        .vix-detail-row {
            display: flex; justify-content: space-between;
            padding: 8px 0; border-bottom: 1px solid var(--border-color);
            font-size: 0.85rem;
        }
        .vix-detail-row:last-child { border-bottom: none; }
        .vix-scale {
            margin-top: 16px; height: 8px; position: relative;
            background: linear-gradient(90deg,
                var(--accent-green) 0%, var(--accent-green) 20%,
                var(--accent-yellow) 20%, var(--accent-yellow) 40%,
                var(--accent-orange) 40%, var(--accent-orange) 60%,
                var(--accent-red) 60%, var(--accent-red) 100%);
            border-radius: 4px;
        }
        .vix-marker {
            position: absolute; top: -6px; width: 4px; height: 20px;
            background: white; border-radius: 2px; transform: translateX(-50%);
        }
        .vix-scale-labels {
            display: flex; justify-content: space-between;
            margin-top: 4px; font-size: 0.7rem; color: var(--text-muted);
        }

        /* VVR Card */
        .vvr-display { text-align: center; }
        .vvr-main {
            display: flex; align-items: center; justify-content: center;
            gap: 20px; margin-bottom: 16px;
        }
        .vvr-value { font-size: 3rem; font-weight: 700; }
        .vvr-signal-badge {
            padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 0.9rem;
        }
        .vvr-signal-badge.sell { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
        .vvr-signal-badge.normal { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }
        .vvr-signal-badge.caution { background: rgba(245, 158, 11, 0.15); color: var(--accent-yellow); }
        .vvr-signal-badge.stop { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
        .vvr-bar {
            height: 24px; display: flex; border-radius: 6px; overflow: hidden;
        }
        .vvr-zone {
            display: flex; align-items: center; justify-content: center;
            font-size: 0.7rem; font-weight: 600;
        }
        .vvr-zone.sell-zone { background: var(--accent-green); flex: 1; color: white; }
        .vvr-zone.normal-zone { background: var(--accent-blue); flex: 2; color: white; }
        .vvr-zone.caution-zone { background: var(--accent-yellow); flex: 1; color: #1a1a1a; }
        .vvr-zone.stop-zone { background: var(--accent-red); flex: 0.5; color: white; }
        .vvr-marker-container { position: relative; margin-top: -24px; height: 24px; }
        .vvr-marker-line {
            position: absolute; width: 3px; height: 32px; background: white;
            top: -4px; border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,0.5);
        }

        /* Gamma Flip Proximity */
        .flip-proximity { padding: 10px 0; }
        .level-map { margin-bottom: 40px; padding: 40px 20px 50px 20px; }
        .level-track {
            position: relative; height: 60px;
            background: var(--bg-primary); border-radius: 8px;
            margin-top: 36px;  /* space for SPX NOW label above */
        }
        .zone-fill { position: absolute; top: 0; height: 100%; opacity: 0.15; }
        .zone-fill.danger-zone { background: var(--accent-red); border-radius: 8px 0 0 8px; }
        .zone-fill.safe-zone { background: var(--accent-green); border-radius: 0 8px 8px 0; }
        .level-marker {
            position: absolute; top: 0; transform: translateX(-50%);
            text-align: center; z-index: 2;
        }
        .marker-line { width: 2px; height: 60px; background: var(--text-muted); margin: 0 auto; }
        .marker-line.warning { background: var(--accent-yellow); width: 3px; }
        .marker-line.neutral { background: var(--accent-blue); }
        .marker-dot {
            width: 16px; height: 16px; background: var(--accent-blue);
            border-radius: 50%; margin: 0 auto;
            box-shadow: 0 0 10px var(--accent-blue);
            animation: pulse-dot 2s infinite;
            position: relative;
            top: 22px;
        }
        @keyframes pulse-dot {
            0%, 100% { box-shadow: 0 0 10px var(--accent-blue); }
            50% { box-shadow: 0 0 20px var(--accent-blue), 0 0 30px var(--accent-blue); }
        }
        .marker-label {
            font-size: 0.7rem; color: var(--text-muted);
            margin-top: 8px; white-space: nowrap;
        }
        .marker-label strong { color: var(--text-primary); display: block; }
        .marker-label.staggered-low { margin-top: 35px; }
        .marker-label.staggered-high { margin-top: -15px; margin-bottom: 30px; }
        .marker-label.current { color: var(--accent-blue); margin-top: -36px; margin-bottom: 4px; }
        .marker-label.current strong { color: var(--accent-blue); }
        .flip-status { display: flex; justify-content: space-around; margin-bottom: 16px; }
        .flip-stat { text-align: center; }
        .flip-stat-label { font-size: 0.75rem; color: var(--text-muted); }
        .flip-stat-value { font-size: 1rem; font-weight: 600; margin-top: 4px; }
        .flip-interpretation {
            font-size: 0.85rem; color: var(--text-secondary);
            padding: 12px; border-radius: 8px; border-left: 3px solid;
        }
        .flip-interpretation.safe {
            background: rgba(16, 185, 129, 0.1); border-left-color: var(--accent-green);
        }
        .flip-interpretation.caution-interp {
            background: rgba(245, 158, 11, 0.1); border-left-color: var(--accent-yellow);
        }
        .flip-interpretation.danger {
            background: rgba(239, 68, 68, 0.1); border-left-color: var(--accent-red);
        }

        /* Expected Move */
        .em-display { padding: 10px 0; }
        .em-periods { display: flex; justify-content: space-around; margin-bottom: 20px; }
        .em-period { text-align: center; }
        .em-period-label { font-size: 0.75rem; color: var(--text-muted); }
        .em-period-value { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); }
        .em-period-dollars { font-size: 0.8rem; color: var(--text-secondary); }
        .em-visual { margin-bottom: 16px; }
        .em-range { display: flex; align-items: center; gap: 12px; }
        .em-bound { font-size: 0.85rem; font-weight: 600; min-width: 50px; }
        .em-bound.low { color: var(--accent-red); }
        .em-bound.high { color: var(--accent-green); }
        .em-bar {
            flex: 1; height: 12px;
            background: linear-gradient(90deg, var(--accent-red) 0%, var(--bg-primary) 50%, var(--accent-green) 100%);
            border-radius: 6px; position: relative;
        }
        .em-current {
            position: absolute; top: -4px; width: 4px; height: 20px;
            background: var(--accent-blue); border-radius: 2px;
            transform: translateX(-50%); box-shadow: 0 0 8px var(--accent-blue);
        }
        .em-flip-marker {
            position: absolute; top: -2px; width: 2px; height: 16px;
            background: var(--accent-yellow); transform: translateX(-50%);
        }
        .em-labels {
            display: flex; justify-content: space-between;
            font-size: 0.7rem; color: var(--text-muted); margin-top: 6px;
        }
        .em-check {
            display: flex; align-items: center; gap: 8px;
            padding: 10px 12px; background: var(--bg-primary);
            border-radius: 6px; font-size: 0.85rem; color: var(--text-secondary);
        }

        /* GAS Card */
        .gas-display { text-align: center; position: relative; }
        .gas-indicator {
            display: flex; align-items: center; justify-content: center;
            gap: 12px; margin-bottom: 16px;
        }
        .gas-arrow { font-size: 2rem; }
        .gas-status { padding: 8px 16px; border-radius: 8px; font-weight: 600; cursor: help; }
        .gas-status.FAVORABLE { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
        .gas-status.NEUTRAL { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }
        .gas-status.HEDGED { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
        .gas-status.RISK { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }
        .gas-explanation {
            font-size: 0.85rem; color: var(--text-secondary);
            line-height: 1.5; margin-top: 16px;
        }
        /* GAS Risk Alert Banner */
        .gas-risk-banner {
            display: none;
            margin-top: 12px; padding: 10px 14px;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            border-left: 3px solid var(--accent-red);
            border-radius: 6px;
            font-size: 0.8rem; color: var(--text-secondary);
            line-height: 1.5; text-align: left;
        }
        .gas-risk-banner.visible { display: block; }
        .gas-risk-banner-title {
            font-weight: 600; color: var(--accent-red); margin-bottom: 4px;
            display: flex; align-items: center; gap: 6px;
        }
        /* GAS Tooltip */
        .gas-tooltip-trigger { position: relative; display: inline-block; }
        .gas-tooltip-trigger:hover .gas-context-tooltip { opacity: 1; visibility: visible; }
        .gas-context-tooltip {
            position: absolute; top: calc(100% + 12px);
            left: 50%; transform: translateX(-50%);
            width: 360px; padding: 14px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 0.75rem; line-height: 1.5;
            color: var(--text-secondary);
            opacity: 0; visibility: hidden;
            transition: all 0.2s;
            z-index: 200;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            pointer-events: none; text-align: left;
        }
        .gas-context-tooltip::before {
            content: ''; position: absolute; bottom: 100%;
            left: 50%; transform: translateX(-50%);
            border: 6px solid transparent;
            border-bottom-color: var(--border-color);
        }
        .gas-matrix { width: 100%; border-collapse: collapse; margin: 8px 0; }
        .gas-matrix th {
            font-size: 0.65rem; color: var(--text-muted); padding: 4px 6px;
            text-align: center; font-weight: 500; border-bottom: 1px solid var(--border-color);
        }
        .gas-matrix td {
            padding: 5px 6px; text-align: center;
            font-size: 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.03);
        }
        .gas-matrix .current-state { background: rgba(255,255,255,0.05); border-radius: 4px; }
        .gas-matrix .state-favorable { color: var(--accent-green); font-weight: 600; }
        .gas-matrix .state-risk { color: var(--accent-red); font-weight: 600; }
        .gas-matrix .state-hedged { color: var(--accent-green); font-weight: 600; }
        .gas-matrix .state-neutral { color: var(--accent-blue); font-weight: 600; }

        /* Economic Events */
        .economic-event-row {
            display: flex; align-items: center; gap: 10px; padding: 10px 12px;
            border-bottom: 1px solid rgba(255,255,255,0.03);
        }
        .economic-event-row:last-child { border-bottom: none; }
        .economic-event-row:hover { background: rgba(255,255,255,0.02); }

        /* Event filter buttons */
        .event-filter-btn {
            padding: 3px 10px; font-size: 0.75rem; border-radius: 12px;
            border: 1px solid var(--border-color); background: transparent;
            color: var(--text-secondary); cursor: pointer;
            transition: all 0.2s ease;
        }
        .event-filter-btn:hover {
            background: rgba(255,255,255,0.05); border-color: var(--text-secondary);
        }
        .event-filter-btn.active {
            background: var(--accent-blue); border-color: var(--accent-blue);
            color: white; font-weight: 500;
        }

        .card-footer {
            padding: 10px 12px; font-size: 0.85rem; border-top: 1px solid var(--border-color);
            background: rgba(239, 68, 68, 0.05); color: var(--accent-red);
        }

        /* System State */
        .system-state {
            display: flex; align-items: center; justify-content: center;
            gap: 16px; padding: 24px;
        }
        .state-step {
            display: flex; flex-direction: column; align-items: center;
            gap: 8px; opacity: 0.4;
        }
        .state-step.active { opacity: 1; }
        .state-icon {
            width: 50px; height: 50px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; border: 3px solid;
        }
        .state-step.normal .state-icon { border-color: var(--accent-green); background: rgba(16, 185, 129, 0.1); }
        .state-step.warning .state-icon { border-color: var(--accent-yellow); background: rgba(245, 158, 11, 0.1); }
        .state-step.alert-s .state-icon { border-color: var(--accent-orange); background: rgba(249, 115, 22, 0.1); }
        .state-step.crisis .state-icon { border-color: var(--accent-red); background: rgba(239, 68, 68, 0.1); }
        .state-step.active.normal .state-icon { background: var(--accent-green); }
        .state-step.active.warning .state-icon { background: var(--accent-yellow); }
        .state-step.active.alert-s .state-icon { background: var(--accent-orange); }
        .state-step.active.crisis .state-icon { background: var(--accent-red); }
        .state-label { font-size: 0.8rem; font-weight: 600; }
        .state-connector { width: 40px; height: 3px; background: var(--border-color); }

        /* Market Insights / Implication Cards */
        .implication-card {
            padding: 16px; border-radius: 8px; margin-bottom: 12px;
        }
        .implication-card:last-child { margin-bottom: 0; }
        .implication-card.positive {
            background: rgba(16, 185, 129, 0.1); border: 1px solid var(--accent-green);
        }
        .implication-card.negative-impl {
            background: rgba(239, 68, 68, 0.1); border: 1px solid var(--accent-red);
        }
        .implication-card.neutral-impl {
            background: rgba(59, 130, 246, 0.1); border: 1px solid var(--accent-blue);
        }
        .implication-title {
            font-weight: 600; font-size: 0.9rem; margin-bottom: 8px;
            display: flex; align-items: center; gap: 8px;
        }
        .implication-text {
            font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5;
        }

        /* ===== VOLATILITY TAB ===== */
        .chart-container { height: 200px; position: relative; }

        /* ===== GAMMA ANALYSIS TAB ===== */
        .signal-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 0; border-bottom: 1px solid var(--border-color);
        }
        .signal-row:last-child { border-bottom: none; }
        .signal-name { font-size: 0.9rem; color: var(--text-secondary); }
        .signal-value {
            font-weight: 600; display: flex; align-items: center; gap: 8px;
        }

        /* Trading Guidance Section */
        .current-regime-badge {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .current-regime-badge.suppressed { background: rgba(16, 185, 129, 0.15); color: #10B981; }
        .current-regime-badge.normal { background: rgba(34, 197, 94, 0.15); color: #22C55E; }
        .current-regime-badge.elevated { background: rgba(234, 179, 8, 0.15); color: #EAB308; }
        .current-regime-badge.high { background: rgba(249, 115, 22, 0.15); color: #F97316; }
        .current-regime-badge.extreme { background: rgba(239, 68, 68, 0.15); color: #EF4444; }

        .guidance-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 16px;
        }
        .guidance-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 14px;
            background: var(--bg-primary);
            border-radius: 8px;
        }
        .guidance-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        .guidance-value {
            font-size: 0.85rem;
            font-weight: 600;
        }
        .guidance-value.favorable { color: #10B981; }
        .guidance-value.neutral { color: #64748b; }
        .guidance-value.unfavorable { color: #F97316; }
        .guidance-value.danger { color: #EF4444; }

        .guidance-details {
            margin-top: 12px;
            font-size: 0.85rem;
        }
        .guidance-details summary {
            cursor: pointer;
            color: var(--accent-blue);
            padding: 8px 0;
        }
        .strategy-matrix {
            margin-top: 12px;
            overflow-x: auto;
        }
        .matrix-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
        }
        .matrix-table th, .matrix-table td {
            padding: 10px 12px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        .matrix-table th {
            color: var(--text-muted);
            font-weight: 500;
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 0.05em;
        }
        .matrix-table td.favorable { color: #10B981; }
        .matrix-table td.neutral { color: #64748b; }
        .matrix-table td.unfavorable { color: #F97316; }
        .matrix-table td.danger { color: #EF4444; }
        .regime-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .regime-tag.green { background: rgba(16, 185, 129, 0.15); color: #10B981; }
        .regime-tag.light-green { background: rgba(34, 197, 94, 0.15); color: #22C55E; }
        .regime-tag.yellow { background: rgba(234, 179, 8, 0.15); color: #EAB308; }
        .regime-tag.orange { background: rgba(249, 115, 22, 0.15); color: #F97316; }
        .regime-tag.red { background: rgba(239, 68, 68, 0.15); color: #EF4444; }
        .regime-row.suppressed td:first-child,
        .regime-row.normal td:first-child,
        .regime-row.elevated td:first-child,
        .regime-row.high td:first-child,
        .regime-row.extreme td:first-child {
            font-weight: 500;
        }

        /* ===== TRADING SIGNALS TAB ===== */

        /* Premium Selling Score Banner */
        .premium-score-banner {
            background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
            border: 1px solid var(--border-color); border-radius: 16px;
            padding: 24px; margin-bottom: 20px;
        }
        .premium-score-main { display: flex; gap: 30px; align-items: center; }
        .premium-score-gauge {
            position: relative; width: 140px; height: 140px; flex-shrink: 0;
        }
        .premium-score-value {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%); text-align: center;
        }
        .premium-score-number { font-size: 2.5rem; font-weight: 700; }
        .premium-score-sublabel { font-size: 0.8rem; color: var(--text-muted); }
        .premium-score-info { flex: 1; }
        .premium-score-title {
            font-size: 0.8rem; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px;
        }
        .premium-score-status {
            display: inline-block; padding: 6px 16px; border-radius: 20px;
            font-weight: 600; font-size: 0.85rem; margin-bottom: 16px;
        }
        .premium-score-status.favorable {
            background: rgba(16, 185, 129, 0.15); color: var(--accent-green);
        }
        .premium-score-status.caution-status {
            background: rgba(245, 158, 11, 0.15); color: var(--accent-yellow);
        }
        .premium-score-status.unfavorable {
            background: rgba(239, 68, 68, 0.15); color: var(--accent-red);
        }
        .score-component {
            display: flex; align-items: center; gap: 10px;
            margin-bottom: 8px; font-size: 0.8rem;
        }
        .score-component span:first-child { min-width: 120px; color: var(--text-secondary); }
        .score-component span:last-child { min-width: 40px; font-weight: 600; }
        .score-bar {
            flex: 1; height: 6px; background: var(--bg-primary);
            border-radius: 3px; overflow: hidden;
        }
        .score-fill { height: 100%; border-radius: 3px; }

        /* Conditions Grid */
        .conditions-grid {
            display: grid; grid-template-columns: repeat(2, 1fr);
            gap: 10px; margin-bottom: 16px;
        }
        .condition-item {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 12px; background: var(--bg-primary);
            border-radius: 6px;
        }
        .condition-name { font-size: 0.85rem; color: var(--text-secondary); }
        .condition-value {
            display: flex; align-items: center; gap: 8px; font-weight: 600;
        }
        .condition-check { font-size: 0.85rem; }

        /* Contextual Alerts */
        .alert-item {
            display: flex; gap: 12px; padding: 16px;
            background: var(--bg-primary); border-radius: 10px;
            margin-bottom: 12px; border-left: 4px solid;
        }
        .alert-item:last-child { margin-bottom: 0; }
        .alert-item.positive {
            border-left-color: var(--accent-green); background: rgba(16, 185, 129, 0.05);
        }
        .alert-item.warning {
            border-left-color: var(--accent-yellow); background: rgba(245, 158, 11, 0.05);
        }
        .alert-item.negative {
            border-left-color: var(--accent-red); background: rgba(239, 68, 68, 0.05);
        }
        .alert-icon { font-size: 1.2rem; }
        .alert-content { flex: 1; }
        .alert-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
        .alert-item.positive .alert-title { color: var(--accent-green); }
        .alert-item.warning .alert-title { color: var(--accent-yellow); }
        .alert-item.negative .alert-title { color: var(--accent-red); }
        .alert-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
        .alert-action { display: flex; align-items: center; margin-left: 12px; }

        /* Action Summary */
        .action-summary {
            padding: 20px; border-radius: 12px; text-align: center;
        }
        .action-summary.favorable {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
            border: 1px solid var(--accent-green);
        }
        .action-summary.caution-summary {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
            border: 1px solid var(--accent-yellow);
        }
        .action-summary.unfavorable {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
            border: 1px solid var(--accent-red);
        }
        .action-icon { font-size: 2rem; margin-bottom: 8px; }
        .action-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
        .action-text { font-size: 0.9rem; color: var(--text-secondary); }

        /* ===== MARKET CONTEXT TAB ===== */
        .context-hero {
            display: flex;
            gap: 20px;
            margin-bottom: 24px;
        }

        .context-card {
            flex: 1;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }

        .context-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
        }

        .context-card.healthy::before { background: var(--accent-green); }
        .context-card.warning::before { background: var(--accent-yellow); }
        .context-card.danger::before { background: var(--accent-red); }
        .context-card.neutral::before { background: var(--border-color); }

        /* Context status badge — neutral fallback when no data has loaded yet */
        .context-status.neutral { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); }

        .context-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
        }

        .context-title {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }

        .context-value-row {
            display: flex;
            align-items: baseline;
            gap: 12px;
        }

        .context-value {
            font-size: 2rem;
            font-weight: 800;
        }

        .context-status {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .context-status.healthy { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
        .context-status.warning { background: rgba(245, 158, 11, 0.15); color: var(--accent-yellow); }
        .context-status.danger { background: rgba(239, 68, 68, 0.15); color: var(--accent-red); }

        .context-description {
            font-size: 0.85rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
        }

        .context-mini-chart {
            height: 60px;
            margin-top: 16px;
        }

        /* McClellan Oscillator Display */
        .mcclellan-gauge {
            width: 100%;
            height: 8px;  /* Reduced from 24px to 8px */
            background: var(--bg-tertiary);
            border-radius: 4px;
            position: relative;
            overflow: visible;  /* Changed to show marker */
            margin: 20px 0 12px 0;  /* Added top margin for value label */
        }

        .mcclellan-bar {
            height: 100%;
            border-radius: 4px;
            position: absolute;
            transition: all 0.5s ease;
            opacity: 0.6;  /* Make it semi-transparent */
        }

        .mcclellan-bar.positive {
            left: 50%;
            background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
        }

        .mcclellan-bar.negative {
            right: 50%;
            background: linear-gradient(90deg, var(--accent-red), var(--accent-orange));
        }

        .mcclellan-center {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 2px;
            background: var(--text-muted);
            transform: translateX(-50%);
            z-index: 1;
        }

        /* Precise position marker - ultra-thin line with arrows */
        .mcclellan-marker {
            position: absolute;
            top: 0;
            width: 1px;  /* Ultra-thin line (1px) */
            height: 100%;
            background: var(--accent-green);
            transform: translateX(-50%);
            z-index: 2;
            box-shadow: 0 0 3px rgba(0,0,0,0.5);
        }

        .mcclellan-marker.negative {
            background: var(--accent-red);
        }

        /* Arrow pointer at top */
        .mcclellan-marker::before {
            content: '';
            position: absolute;
            top: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 6px solid currentColor;
        }

        /* Arrow pointer at bottom */
        .mcclellan-marker::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 6px solid currentColor;
        }

        /* Value label above marker */
        .mcclellan-value-label {
            position: absolute;
            top: -24px;
            transform: translateX(-50%);
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--text-primary);
            white-space: nowrap;
            z-index: 3;
            background: var(--bg-primary);
            padding: 2px 6px;
            border-radius: 4px;
            border: 1px solid currentColor;
        }

        .mcclellan-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-top: 4px;
        }

        /* PCR Comparison */
        .pcr-comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-top: 16px;
        }

        .pcr-item {
            background: var(--bg-tertiary);
            border-radius: 10px;
            padding: 14px;
            text-align: center;
        }

        .pcr-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        .pcr-value {
            font-size: 1.8rem;
            font-weight: 700;
        }

        .pcr-badge {
            margin-top: 6px;
            font-size: 0.7rem;
            padding: 3px 8px;
            border-radius: 4px;
            display: inline-block;
        }

        /* Technical Signals Grid */
        .signals-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .signal-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            background: var(--bg-tertiary);
            border-radius: 10px;
            border-left: 3px solid;
        }

        .signal-item.bullish { border-left-color: var(--accent-green); }
        .signal-item.bearish { border-left-color: var(--accent-red); }
        .signal-item.neutral { border-left-color: var(--text-muted); }

        .signal-name {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .signal-value {
            font-weight: 600;
            font-size: 0.9rem;
        }

        /* Action Banner */
        .action-banner {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 16px;
            border-radius: 12px;
            margin-top: 16px;
        }

        .action-banner.favorable {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
            border: 1px solid var(--accent-green);
        }

        .action-banner.warning {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
            border: 1px solid var(--accent-yellow);
        }

        .action-banner.danger {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
            border: 1px solid var(--accent-red);
        }

        .action-banner-icon {
            font-size: 1.5rem;
        }

        .action-banner-content {
            flex: 1;
        }

        .action-banner-title {
            font-weight: 600;
            margin-bottom: 4px;
        }

        .action-banner-text {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        /* Grid utilities */
        .grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .grid-2 { grid-template-columns: 1fr; }
            .context-hero { flex-direction: column; }
        }