/* SPX Gamma Map & Session Positioning Styles - Dark Fintech Theme */

:root,
[data-theme="dark"] {
    color-scheme: dark;
    font-size: 14px;
    --bg-dark: #0b111e;
    --bg-deep: #0f172a;
    --bg-primary: #121c32;
    --card-bg: rgba(18, 27, 44, 0.85);
    --bg-card: rgba(18, 27, 44, 0.85);
    --bg-card-hover: rgba(26, 38, 62, 0.95);
    --surface-strong: rgba(26, 38, 64, 0.95);
    --surface-soft: rgba(20, 30, 50, 0.8);
    --surface-muted: rgba(15, 23, 42, 0.7);
    --border-color: rgba(255, 255, 255, 0.1);
    --border-glow: rgba(0, 229, 255, 0.45);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-main: 0 10px 30px rgba(0, 0, 0, 0.4);
    
    /* Neon accents matching SPX 1-1-2-2 design language */
    --neon-bullish: #00e676;
    --neon-green: #00e676;
    --neon-bearish: #ff1744;
    --neon-cyan: #00e5ff;
    --cyan: #00e5ff;
    --accent-blue: #3d5afe;
    --accent-cyan: #00e5ff;
    --accent-green: #00e676;
    --accent-red: #ff1744;
    --accent-yellow: #ffea00;
    --accent-purple: #a855f7;
    --neon-purple: #a855f7;
    --neon-warning: #f59e0b;
    
    --text-main: #f8fafc;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

[data-theme="light"] {
    color-scheme: light;
    font-size: 16px;
    --bg-dark: #F7F9FC;
    --bg-deep: #EEF2F6;
    --bg-primary: #F1F4F8;
    --card-bg: #F1F4F8;
    --bg-card: #F1F4F8;
    --bg-card-hover: #EBF0F6;
    --surface-strong: #F1F4F8;
    --surface-soft: #F7F9FC;
    --surface-muted: #EEF2F6;
    --border-color: #E2E6EF;
    --border-glow: rgba(51, 95, 254, 0.4);
    --shadow-soft: 0 4px 20px -2px rgba(11, 18, 58, 0.06);
    --shadow-main: 0 4px 20px -2px rgba(11, 18, 58, 0.06);
    
    --neon-bullish: #479E8B;
    --neon-green: #479E8B;
    --neon-bearish: #E86D48;
    --neon-cyan: #13A0C0;
    --cyan: #13A0C0;
    --accent-blue: #335FFE;
    --accent-cyan: #13A0C0;
    --accent-green: #479E8B;
    --accent-red: #E86D48;
    --accent-yellow: #E9C363;
    --accent-purple: #515AA8;
    --neon-purple: #515AA8;
    --neon-warning: #E9C363;
    
    --text-main: #0B123A;
    --text-primary: #0B123A;
    --text-secondary: #1E293B;
    --text-muted: #334155;
    --text-dim: #475569;
    
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

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

body {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(circle at 20% 10%, rgba(61, 90, 254, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(0, 229, 255, 0.05) 0%, transparent 40%);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    padding-bottom: 60px;
    overflow-x: hidden;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--surface-muted);
}
::-webkit-scrollbar-thumb {
    background: rgba(53, 82, 107, 0.25);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(53, 82, 107, 0.42);
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 20px;
    max-width: 1800px;
    margin: 0 auto;
}

/* ---------------- HEADER ---------------- */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    background: rgba(17, 22, 44, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    margin-bottom: 15px;
}

.header-logo {
    display: flex;
    align-items: center;
    position: relative;
}

.logo-glow {
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, var(--neon-cyan) 0%, transparent 70%);
    filter: blur(8px);
    left: -10px;
    opacity: 0.7;
}

.header-logo h1 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-right: 15px;
    background: linear-gradient(to right, #10293d 0%, #466176 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-logo h1 span {
    font-weight: 300;
    color: var(--neon-cyan);
    -webkit-text-fill-color: var(--neon-cyan);
}

.badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 3px 8px;
    text-transform: uppercase;
}

.system-live {
    border-color: rgba(0, 230, 118, 0.3);
    color: var(--neon-bullish);
    text-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
    animation: pulse-glow 2s infinite;
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 30px;
}

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

.meta-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.meta-val {
    font-size: 14px;
    font-weight: 600;
}

.status-connected {
    color: var(--neon-bullish);
}

.status-disconnected {
    color: var(--neon-bearish);
}

/* Asset Selector Toggle */
.asset-selector {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.selector-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: inherit;
    font-weight: 600;
    font-size: 12px;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.selector-btn:hover {
    color: white;
}

.selector-btn.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* ---------------- MARKET ALERT BAR ---------------- */
.alert-bar {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}

.alert-bullish {
    background: rgba(0, 230, 118, 0.08);
    border-color: rgba(0, 230, 118, 0.15);
    color: var(--neon-bullish);
}

.alert-bearish {
    background: rgba(255, 23, 68, 0.08);
    border-color: rgba(255, 23, 68, 0.15);
    color: var(--neon-bearish);
}

.alert-warning {
    background: rgba(255, 234, 0, 0.08);
    border-color: rgba(255, 234, 0, 0.15);
    color: var(--neon-warning);
}

.alert-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 12px;
    display: inline-block;
}

.alert-bullish .alert-pulse {
    background: var(--neon-bullish);
    box-shadow: 0 0 8px var(--neon-bullish);
}

.alert-bearish .alert-pulse {
    background: var(--neon-bearish);
    box-shadow: 0 0 8px var(--neon-bearish);
}

/* ---------------- RESEARCH PAGE LINKS ---------------- */
.research-link-band {
    align-items: center;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 14px;
}

.research-link-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-right: 4px;
}

.research-link {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.research-link:hover {
    border-color: rgba(0, 229, 255, 0.45);
    color: white;
}

.research-link-highlight {
    background: linear-gradient(135deg, rgba(255, 234, 0, 0.18), rgba(255, 23, 68, 0.18));
    border-color: rgba(255, 234, 0, 0.38);
}

.app-primary-nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.app-nav-link {
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.app-nav-link:hover,
.app-nav-link.active {
    background: rgba(0, 229, 255, 0.08);
    border-color: rgba(0, 229, 255, 0.32);
    color: white;
}

.page-action-row {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.workspace-page {
    max-width: 1600px;
}

.workspace-intro {
    background: rgba(0, 229, 255, 0.05);
    border: 1px solid rgba(0, 229, 255, 0.16);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 14px;
    padding: 12px 16px;
}

.workspace-tabs {
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding: 6px;
}

.workspace-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 9px 14px;
}

.workspace-tab:hover,
.workspace-tab.active {
    background: rgba(0, 229, 255, 0.09);
    border-color: rgba(0, 229, 255, 0.32);
    color: white;
}

.workspace-panel[hidden] {
    display: none;
}

.workspace-status-grid {
    align-items: center;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 14px;
    padding: 10px 14px;
}

.workspace-details {
    color: var(--text-secondary);
    font-size: 12px;
    padding: 12px 16px 16px;
}

.workspace-details summary {
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
    margin-bottom: 10px;
}

.workspace-advanced {
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-top: 14px;
}

.workspace-advanced > summary {
    padding: 14px 16px 4px;
}

.legacy-research-warning {
    background: rgba(255, 234, 0, 0.06);
    border: 1px solid rgba(255, 234, 0, 0.24);
    border-radius: 10px;
    color: var(--text-secondary);
    margin-bottom: 14px;
    padding: 12px 16px;
}

.legacy-research-warning strong {
    color: var(--neon-warning);
}

.current-decision-refresh {
    background: transparent;
    cursor: pointer;
}

.legacy-strategy-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------------- MAIN LAYOUT GRID ---------------- */
.dashboard-grid {
    display: grid;
    grid-template-columns: 350px 480px 1fr;
    gap: 20px;
    flex-grow: 1;
    margin-bottom: 20px;
}

/* ---------------- CARDS ---------------- */
.glass-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.glass-card:hover {
    border-color: var(--border-glow);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.card-header h2 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.header-icon {
    font-size: 18px;
    opacity: 0.6;
}

.card-content {
    padding: 20px 25px;
}

.divider {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    margin: 20px 0;
}

/* ---------------- STATISTICS READOUTS ---------------- */
.stat-group {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.digital-val {
    font-size: 32px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

.change-val {
    font-size: 14px;
    font-weight: 600;
    margin-left: 10px;
    padding: 2px 8px;
    border-radius: 6px;
}

.val-bullish {
    color: var(--neon-bullish);
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.25);
}

.val-bearish {
    color: var(--neon-bearish);
    text-shadow: 0 0 10px rgba(255, 23, 68, 0.25);
}

.val-cyan {
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}

.val-purple {
    color: var(--neon-purple);
    text-shadow: 0 0 10px rgba(213, 0, 249, 0.25);
}

.val-neutral {
    color: var(--text-secondary);
}

.spot-price-row {
    display: flex;
    align-items: baseline;
}

/* Volatility tracker stats */
.vol-index-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 15px;
}

.vol-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.vol-stat-item {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.vol-sublabel {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.vol-val {
    font-size: 18px;
    font-weight: 700;
}

/* VRP Meter Track */
.vrp-meter-container {
    display: flex;
    flex-direction: column;
    margin-top: 15px;
}

.vrp-meter-labels {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.vrp-meter-track {
    height: 6px;
    background: linear-gradient(to right, var(--neon-cyan) 0%, var(--border-glow) 50%, var(--neon-bearish) 100%);
    border-radius: 3px;
    position: relative;
}

.vrp-meter-pointer {
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    top: -3px;
    margin-left: -6px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    transition: left 0.5s ease;
}

/* Daily Volume Flow */
.volume-flow-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.volume-score-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.volume-interpretation {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
}

.volume-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.volume-stats-grid .vol-val {
    font-size: 13px;
}

.volume-reasons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.45;
}

.volume-reason {
    padding-left: 8px;
    border-left: 2px solid var(--neon-cyan);
}

.volume-backtest {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.volume-backtest-row,
.volume-backtest-empty {
    display: grid;
    grid-template-columns: 38px 1fr 76px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 700;
}

.volume-backtest-empty {
    display: block;
    text-align: center;
    font-weight: 600;
}

.volume-guide {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 229, 255, 0.12);
    border-radius: 8px;
    background: rgba(0, 229, 255, 0.035);
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.45;
}

.volume-guide strong {
    color: white;
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.volume-guide b {
    color: var(--neon-cyan);
}

/* Retail Tip Card */
.retail-tip-card {
    background: linear-gradient(135deg, rgba(17, 22, 44, 0.3) 0%, rgba(13, 17, 39, 0.5) 100%);
}

.retail-tip-card p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.guide-link {
    display: inline-block;
    color: var(--neon-cyan);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.guide-link:hover {
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

/* ---------------- EXPOSURES PANEL ---------------- */
.badge-sim {
    border-color: rgba(213, 0, 249, 0.3);
    color: var(--neon-purple);
    text-shadow: 0 0 8px rgba(213, 0, 249, 0.4);
}

.exposures-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.exp-item {
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.2);
    padding: 14px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

/* Glowing side highlights */
.exp-item::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 100%;
    left: 0;
    top: 0;
}

.glow-green::before { background: var(--neon-bullish); }
.glow-cyan::before { background: var(--neon-cyan); }
.glow-purple::before { background: var(--neon-purple); }

.exp-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

.exp-val {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 2px;
}

.exp-desc {
    font-size: 9px;
    color: var(--text-muted);
}

/* Flip crossing level widget */
.flip-level-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 234, 0, 0.05);
    border: 1px solid rgba(255, 234, 0, 0.15);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 25px;
}

.flip-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--neon-warning);
    letter-spacing: 1px;
}

.flip-val {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

/* ---------------- GEX PROFILE STRIKE CURVE (SVG CHART FALLBACK) ---------------- */
.chart-container {
    display: flex;
    flex-direction: column;
}

.chart-container h3 {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.gex-chart-bars {
    display: grid;
    grid-template-columns: repeat(31, 1fr);
    height: 120px;
    gap: 2px;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.gex-bar {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gex-bar-fill {
    width: 100%;
    border-radius: 1px;
    transition: all 0.5s ease;
}

.fill-up {
    background: var(--neon-bullish);
    box-shadow: 0 0 4px var(--neon-bullish);
    align-self: flex-start;
}

.fill-down {
    background: var(--neon-bearish);
    box-shadow: 0 0 4px var(--neon-bearish);
    align-self: flex-end;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: 1px;
}

/* ---------------- ACTION BOARD CARD (RIGHT COLUMN) ---------------- */
.recc-board-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.recc-board-card .card-content {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.recc-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* Strategy recommendation row card */
.recc-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px 20px;
    transition: all 0.3s ease;
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 20px;
}

.recc-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.25);
    transform: translateX(3px);
}

.recc-info h3 {
    font-size: 13px;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
}

.recc-edge {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.volume-confirm {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.volume-confirm-positive {
    color: var(--neon-bullish);
}

.volume-confirm-negative {
    color: var(--neon-bearish);
}

.volume-confirm-neutral {
    color: var(--text-muted);
}

.volume-strategy-fit {
    display: grid;
    gap: 3px;
    margin-top: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.volume-strategy-fit small {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
}

.recc-signal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    border-left: 1px dashed rgba(255, 255, 255, 0.05);
    padding-left: 20px;
}

.signal-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.badge-bullish {
    background: rgba(0, 230, 118, 0.1);
    color: var(--neon-bullish);
    border: 1px solid rgba(0, 230, 118, 0.25);
}

.badge-bearish {
    background: rgba(255, 23, 68, 0.1);
    color: var(--neon-bearish);
    border: 1px solid rgba(255, 23, 68, 0.25);
}

.badge-neutral {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.signal-action {
    font-size: 11px;
    font-weight: 600;
    text-align: right;
    color: white;
    margin-bottom: 6px;
}

.signal-capital {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* ---------------- FOOTER DIAGNOSTIC BAR ---------------- */
.dashboard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 25px;
    background: rgba(17, 22, 44, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.refresh-btn {
    background: linear-gradient(135deg, var(--neon-cyan) 0%, #0091ea 100%);
    border: none;
    color: black;
    font-family: inherit;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 229, 255, 0.25);
    transition: all 0.3s ease;
}

.refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 229, 255, 0.4);
}

/* Animations */
@keyframes pulse-glow {
    0% {
        opacity: 0.8;
        text-shadow: 0 0 6px rgba(0, 230, 118, 0.3);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 14px rgba(0, 230, 118, 0.6);
    }
    100% {
        opacity: 0.8;
        text-shadow: 0 0 6px rgba(0, 230, 118, 0.3);
    }
}

/* Custom Purple Glow & Calibrator Themes */
.glow-purple {
    border-color: rgba(213, 0, 249, 0.2) !important;
    box-shadow: 0 0 15px rgba(213, 0, 249, 0.1) !important;
}

.val-purple {
    color: var(--neon-purple) !important;
}

.glow-purple:hover {
    box-shadow: 0 0 25px rgba(213, 0, 249, 0.25) !important;
}

.btn-calibrating {
    background: linear-gradient(135deg, var(--neon-purple) 0%, #7c4dff 100%) !important;
    box-shadow: 0 0 15px rgba(213, 0, 249, 0.4) !important;
    cursor: not-allowed !important;
    animation: calibrate-pulse 1.5s infinite ease-in-out;
}

@keyframes calibrate-pulse {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 0.95;
        transform: scale(0.985);
    }
    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

/* Dynamic Explanation Button and Glassmorphism Panel styles */
.explain-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
}

.explain-btn:hover {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.25);
}

.explain-btn.active {
    color: black;
    background: var(--neon-cyan);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

.explanation-panel {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-secondary);
    animation: fadeInSlide 0.3s ease-out;
    grid-column: 1 / -1; /* Stretch across the full grid in .recc-card */
}

.explanation-panel h4 {
    font-size: 9px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.explanation-step {
    margin-bottom: 8px;
    border-left: 2px solid rgba(0, 229, 255, 0.25);
    padding-left: 8px;
}

.explanation-step:last-child {
    margin-bottom: 0;
}

.explanation-step strong {
    color: white;
}

.explanation-math {
    font-family: 'Courier New', Courier, monospace;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px 6px;
    border-radius: 4px;
    color: var(--neon-cyan);
    margin: 3px 0;
    display: inline-block;
    font-weight: 700;
}

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

/* ---------------- SPX TRANSFORMER ---------------- */
.transformer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
    gap: 14px;
}

.transformer-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    backdrop-filter: blur(12px);
    min-width: 0;
}

.transformer-wide,
.transformer-overview {
    grid-column: 1 / -1;
}

.transformer-message {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
    margin: 10px 0;
}

.transformer-empty-state,
.transformer-table-wrap {
    margin-top: 12px;
    overflow-x: auto;
}

.transformer-callout {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    padding: 12px 14px;
}

.transformer-callout strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 6px;
}

.transformer-callout ul {
    margin-left: 18px;
}

.transformer-callout pre {
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-secondary);
    font-size: 11px;
}

.backtest-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.backtest-summary-grid span,
.backtest-note {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 8px 10px;
}

.backtest-summary-grid b {
    color: var(--neon-cyan);
}

.backtest-note {
    margin-top: 10px;
}

.backtest-ranked {
    margin-top: 10px;
}

.backtest-table {
    min-width: 760px;
}

.transformer-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.transformer-control-grid label {
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    font-size: 11px;
    gap: 6px;
    text-transform: uppercase;
}

.transformer-control-grid select {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-glow);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 8px;
}

.raw-chain-control-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.raw-chain-control-grid label {
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    font-size: 11px;
    gap: 6px;
    text-transform: uppercase;
}

.raw-chain-control-grid input,
.raw-chain-control-grid select {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-glow);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    min-height: 36px;
    padding: 8px;
}

.raw-chain-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 12px;
}

.raw-chain-button-row button:disabled {
    cursor: wait;
    opacity: 0.5;
}

.raw-chain-log {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: monospace;
    font-size: 11px;
    line-height: 1.55;
    min-height: 44px;
    overflow-wrap: anywhere;
    padding: 10px 12px;
}

.raw-chain-report-table {
    min-width: 1120px;
}

.raw-chain-source-table {
    min-width: 520px;
}

.raw-chain-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}

.raw-chain-filter-row label {
    color: var(--text-secondary);
    display: grid;
    font-size: 10px;
    gap: 5px;
    min-width: 180px;
    text-transform: uppercase;
}

.raw-chain-filter-row select {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-glow);
    border-radius: 6px;
    color: var(--text-primary);
    min-height: 34px;
    padding: 6px 8px;
}

.raw-chain-recommendation-grid,
.raw-chain-gate-grid,
.raw-chain-token-grid,
.raw-chain-knowledge-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin-top: 12px;
}

.raw-chain-recommendation-card,
.raw-chain-gate-card,
.raw-chain-token-card,
.raw-chain-knowledge-grid article {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    padding: 13px;
}

.raw-chain-recommendation-card.recommendation-ready {
    border-color: rgba(16, 185, 129, 0.5);
}

.raw-chain-recommendation-card.recommendation-blocked {
    border-color: rgba(255, 152, 0, 0.35);
}

.raw-chain-recommendation-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.raw-chain-recommendation-head span {
    color: var(--neon-cyan);
    font-family: monospace;
    font-size: 11px;
}

.raw-chain-recommendation-head h3,
.raw-chain-token-card h3,
.raw-chain-knowledge-grid h3 {
    color: var(--text-primary);
    font-size: 14px;
    margin: 3px 0 8px;
}

.raw-chain-recommendation-head > strong {
    border: 1px solid currentColor;
    border-radius: 6px;
    color: var(--neon-warning);
    font-size: 10px;
    padding: 5px 7px;
}

.recommendation-ready .raw-chain-recommendation-head > strong {
    color: var(--neon-green);
}

.raw-chain-recommendation-stats {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 10px 0;
}

.raw-chain-recommendation-stats span {
    background: rgba(255, 255, 255, 0.035);
    border-radius: 5px;
    color: var(--text-muted);
    display: grid;
    font-size: 9px;
    padding: 6px;
    text-transform: uppercase;
}

.raw-chain-recommendation-stats b {
    color: var(--text-primary);
    font-size: 11px;
    margin-top: 2px;
}

.raw-chain-structure,
.raw-chain-rationale {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.45;
    margin-top: 8px;
}

.raw-chain-structure small,
.raw-chain-rationale strong {
    color: var(--text-muted);
    display: block;
    margin-bottom: 3px;
}

.raw-chain-block-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 9px;
}

.raw-chain-block-reasons span {
    background: rgba(255, 152, 0, 0.10);
    border: 1px solid rgba(255, 152, 0, 0.25);
    border-radius: 5px;
    color: var(--neon-warning);
    font-family: monospace;
    font-size: 9px;
    padding: 4px 6px;
}

.raw-chain-flow-context {
    background: rgba(255, 152, 0, 0.06);
    border: 1px solid rgba(255, 152, 0, 0.22);
    border-radius: 7px;
    margin-top: 10px;
    padding: 9px;
}

.raw-chain-flow-disclosure {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: space-between;
}

.raw-chain-flow-disclosure strong {
    color: var(--neon-warning);
    font-size: 10px;
}

.raw-chain-flow-disclosure span,
.raw-chain-flow-mappings em {
    color: var(--text-muted);
    font-family: monospace;
    font-size: 8px;
    font-style: normal;
}

.raw-chain-flow-context > p {
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.45;
    margin: 6px 0 8px;
}

.raw-chain-flow-mappings {
    display: grid;
    gap: 6px;
}

.raw-chain-flow-mappings article {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 5px;
    display: grid;
    gap: 2px;
    padding: 6px;
}

.raw-chain-flow-mappings article > span {
    color: var(--neon-cyan);
    font-family: monospace;
    font-size: 9px;
}

.raw-chain-flow-mappings article > strong {
    color: var(--text-primary);
    font-size: 10px;
}

.raw-chain-flow-mappings article > small {
    color: var(--text-secondary);
    font-size: 9px;
}

.raw-chain-gate-meta,
.raw-chain-token-card p,
.raw-chain-knowledge-grid p {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

.raw-chain-check-list {
    display: grid;
    gap: 5px;
    margin-top: 10px;
}

.raw-chain-check-list > div {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: 46px 130px 1fr;
}

.raw-chain-check-list span {
    font-family: monospace;
    font-size: 9px;
}

.raw-chain-check-list strong,
.raw-chain-check-list small {
    color: var(--text-secondary);
    font-size: 10px;
}

.gate-pass {
    color: var(--neon-green) !important;
}

.gate-block {
    color: var(--neon-warning) !important;
}

.raw-chain-curve-wrap {
    min-height: 220px;
}

.raw-chain-curve-heading {
    color: var(--text-secondary);
    font-size: 11px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.raw-chain-curve-svg {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    height: 180px;
    width: 100%;
}

.raw-chain-curve-line {
    fill: none;
    stroke: var(--neon-cyan);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.raw-chain-zero-line {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-dasharray: 3 3;
    stroke-width: 0.6;
    vector-effect: non-scaling-stroke;
}

.raw-chain-curve-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
}

.raw-chain-curve-labels span {
    color: var(--text-muted);
    display: grid;
    font-size: 9px;
}

.raw-chain-curve-labels strong {
    color: var(--text-secondary);
}

.raw-chain-gap-list {
    display: grid;
    gap: 6px;
}

.raw-chain-gap-list > div {
    background: rgba(255, 152, 0, 0.08);
    border-left: 2px solid var(--neon-warning);
    color: var(--text-secondary);
    font-size: 11px;
    padding: 7px 9px;
}

.raw-chain-token-card h3 span {
    color: var(--text-muted);
    font-family: monospace;
    font-size: 10px;
}

.raw-chain-token-card > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.raw-chain-token-card > div > span {
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 5px;
    color: var(--neon-cyan);
    font-family: monospace;
    font-size: 9px;
    padding: 4px 6px;
}

.raw-chain-token-card .token-inferred {
    background: rgba(255, 152, 0, 0.08);
    border-color: rgba(255, 152, 0, 0.20);
    color: var(--neon-warning);
}

.raw-chain-automation-tasks {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.raw-chain-automation-tasks > div {
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border-left: 2px solid var(--neon-cyan);
    color: var(--text-secondary);
    display: grid;
    font-size: 10px;
    gap: 8px;
    grid-template-columns: minmax(190px, 1fr) 90px minmax(180px, 2fr);
    padding: 7px 9px;
}

.raw-chain-automation-tasks span {
    color: var(--neon-cyan);
    font-family: monospace;
    text-transform: uppercase;
}

.raw-chain-catalog-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin-top: 12px;
}

.raw-chain-strategy-card {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 14px;
}

.raw-chain-strategy-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.raw-chain-strategy-code {
    color: var(--neon-cyan);
    display: block;
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
}

.raw-chain-strategy-card h3 {
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.25;
}

.raw-chain-strategy-status {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.7px;
    padding: 4px 7px;
    white-space: nowrap;
}

.raw-chain-status-runnable {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: var(--neon-bullish);
}

.raw-chain-status-backlog {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.raw-chain-strategy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.raw-chain-strategy-meta span {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 7px;
    text-transform: uppercase;
}

.raw-chain-strategy-details {
    display: grid;
    gap: 6px;
}

.raw-chain-strategy-details dt {
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.raw-chain-strategy-details dd {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 4px;
}

.artifact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.artifact-item {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 10px;
}

.artifact-present {
    background: rgba(16, 185, 129, 0.08);
}

.artifact-missing {
    background: rgba(255, 255, 255, 0.025);
}

.artifact-name {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.artifact-state,
.artifact-size {
    color: var(--text-secondary);
    font-size: 11px;
}

.artifact-path {
    color: var(--text-muted);
    font-family: monospace;
    font-size: 10px;
    overflow-wrap: anywhere;
}

.transformer-table {
    border-collapse: collapse;
    min-width: 900px;
    width: 100%;
}

.curve-summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.curve-summary-row span {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 9px 10px;
}

.curve-summary-row strong {
    color: var(--neon-cyan);
    font-size: 15px;
}

.candidate-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    gap: 12px;
}

.candidate-explanation-panel {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(0, 229, 255, 0.14);
    border-radius: 8px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
}

.candidate-explanation-panel h3 {
    color: var(--text-primary);
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.candidate-explanation-block strong {
    color: var(--neon-cyan);
    display: block;
    font-size: 11px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.candidate-explanation-block ul {
    margin-left: 18px;
}

.candidate-explanation-block li,
.candidate-explanation-block p {
    font-size: 12px;
    line-height: 1.45;
}

.reason-code {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 7px 0;
}

.reason-code span {
    color: var(--text-primary);
    display: block;
    font-family: monospace;
    font-size: 11px;
    margin-bottom: 3px;
}

.probability-cell {
    display: grid;
    gap: 2px;
    min-width: 110px;
}

.probability-cell strong {
    color: var(--neon-cyan);
    font-size: 12px;
}

.probability-cell span {
    color: var(--text-muted);
    font-size: 10px;
}

.probability-valid strong {
    color: var(--neon-green);
}

.probability-low strong {
    color: var(--neon-warning);
}

.probability-missing strong {
    color: var(--text-muted);
}

.selector-btn:disabled {
    cursor: wait;
    opacity: 0.55;
}

.transformer-table th,
.transformer-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 9px 8px;
    text-align: left;
    white-space: nowrap;
}

.transformer-table th {
    color: var(--text-primary);
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.transformer-table .muted-row td {
    color: var(--text-muted);
}

.status-ok {
    border-color: rgba(16, 185, 129, 0.35);
    color: var(--neon-green);
}

.status-warn {
    border-color: rgba(255, 234, 0, 0.35);
    color: var(--neon-warning);
}

.status-error {
    border-color: rgba(255, 23, 68, 0.35);
    color: var(--neon-bearish);
}

.relative-vol-boundary {
    border-left: 3px solid var(--neon-warning);
    padding-left: 12px;
}

.relative-vol-provenance,
.relative-vol-coverage-grid,
.relative-vol-waterfall-summary {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 12px 0;
}

.relative-vol-provenance-card,
.relative-vol-coverage-card,
.relative-vol-waterfall-summary span {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(0, 229, 255, 0.12);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 10px 12px;
}

.relative-vol-provenance-card strong,
.relative-vol-coverage-card strong,
.relative-vol-waterfall-summary small {
    color: var(--neon-cyan);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.relative-vol-provenance-card span,
.relative-vol-waterfall-summary strong {
    color: var(--text-primary);
    font-size: 12px;
}

.relative-vol-provenance-card small,
.relative-vol-coverage-card span {
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}

.relative-vol-matrix-table th,
.relative-vol-matrix-table td {
    min-width: 92px;
    text-align: center;
}

.relative-vol-matrix-table td {
    white-space: normal;
}

.relative-vol-matrix-table td strong,
.relative-vol-matrix-table td small {
    display: block;
}

.relative-vol-matrix-table td small {
    font-size: 9px;
    margin-top: 3px;
}

.relative-vol-matrix-research {
    background: rgba(16, 185, 129, 0.09);
}

.relative-vol-matrix-no-edge {
    background: rgba(255, 234, 0, 0.06);
}

.relative-vol-matrix-unavailable,
.relative-vol-matrix-na {
    background: rgba(255, 255, 255, 0.018);
    color: var(--text-muted) !important;
}

.relative-vol-history-rule {
    margin: 10px 0;
}

.relative-vol-candidate {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    margin-top: 10px;
    overflow: hidden;
}

.relative-vol-candidate summary {
    align-items: center;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    gap: 12px;
    justify-content: space-between;
    padding: 11px 13px;
}

.relative-vol-candidate summary strong {
    color: var(--neon-cyan);
    font-size: 10px;
    text-align: right;
}

.relative-vol-candidate-provenance {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-family: monospace;
    font-size: 10px;
    line-height: 1.5;
    padding: 10px 13px 0;
    overflow-wrap: anywhere;
}

.relative-vol-candidate-grid,
.relative-vol-attribution-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 13px;
}

.relative-vol-candidate-grid > div,
.relative-vol-attribution-grid > div {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 7px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
    min-width: 0;
    padding: 10px;
}

.relative-vol-candidate-grid h3,
.relative-vol-attribution-grid h3 {
    color: var(--text-primary);
    font-size: 10px;
    letter-spacing: 0.5px;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.relative-vol-scenario-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 7px;
}

.relative-vol-scenario {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 7px;
    display: grid;
    gap: 4px;
    padding: 8px;
}

.scenario-worst strong {
    color: var(--neon-bearish);
}

.scenario-best strong {
    color: var(--neon-green);
}

.relative-vol-reconciliation {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 7px;
    font-size: 11px;
    margin: 8px 0;
    padding: 8px 10px;
}

.relative-vol-reconciliation.reconciled {
    border-color: rgba(16, 185, 129, 0.35);
    color: var(--neon-green);
}

.relative-vol-reconciliation.unreconciled {
    border-color: rgba(255, 234, 0, 0.3);
    color: var(--neon-warning);
}

.relative-vol-waterfall-table {
    min-width: 620px;
}

.entry-condition-badges {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-bottom: 10px;
}

.entry-condition-badge {
    background: rgba(0, 229, 255, 0.05);
    border: 1px solid rgba(0, 229, 255, 0.16);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 10px 12px;
}

.entry-condition-badge span,
.entry-condition-badge small {
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.entry-condition-badge strong {
    color: var(--neon-cyan);
    font-size: 13px;
}

.entry-condition-badge.entry-condition-unavailable {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.07);
}

.entry-condition-badge.entry-condition-unavailable strong {
    color: var(--text-muted);
}

.exit-rule-state {
    background: rgba(0, 229, 255, 0.04);
    border: 1px solid rgba(0, 229, 255, 0.16);
    border-radius: 8px;
    display: grid;
    gap: 7px;
    margin-bottom: 10px;
    padding: 11px 13px;
}

.exit-rule-state > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.exit-rule-state span,
.exit-rule-state small {
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.exit-rule-state strong {
    color: var(--neon-cyan);
}

.exit-rule-state p {
    margin: 0;
}

.exit-rule-state.exit-rule-blocked {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.07);
}

.exit-rule-state.exit-rule-blocked strong {
    color: var(--text-muted);
}

.transform-state {
    background: rgba(180, 80, 255, 0.05);
    border: 1px solid rgba(180, 80, 255, 0.18);
    border-radius: 8px;
    display: grid;
    gap: 7px;
    margin-bottom: 10px;
    padding: 11px 13px;
}

.transform-state > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.transform-state span,
.transform-state small {
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.transform-state strong {
    color: #d8a6ff;
    text-transform: uppercase;
}

.transform-state p {
    margin: 0;
}

.transform-state-unavailable {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.07);
}

.transform-state-unavailable strong {
    color: var(--text-muted);
}

.adjacent-gate-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-top: 10px;
}

.adjacent-gate {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
}

.adjacent-gate summary {
    cursor: pointer;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.adjacent-gate summary span,
.adjacent-gate small {
    color: var(--text-muted);
    font-size: 9px;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.adjacent-gate > div {
    color: var(--text-muted);
    font-size: 11px;
    margin-top: 7px;
}

.adjacent-gate-ready {
    border-color: rgba(0, 229, 255, 0.25);
}

.completion-gate-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    margin-top: 10px;
}

.completion-gate-check {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    padding: 10px 12px;
}

.completion-gate-check > span,
.completion-gate-check > small {
    color: var(--text-muted);
    font-size: 9px;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.completion-gate-pass {
    border-color: rgba(0, 229, 255, 0.24);
}

.completion-gate-pass > span {
    color: var(--neon-green);
}

.completion-gate-blocked > span {
    color: var(--neon-warning);
}

@media (max-width: 900px) {
    .relative-vol-candidate-grid,
    .relative-vol-attribution-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------- IRONFLY ---------------- */
.ironfly-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.ironfly-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 0;
    padding: 16px;
}

.ironfly-wide,
.ironfly-bottom-patterns {
    grid-column: 1 / -1;
}

.ironfly-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.ironfly-stat {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    padding: 10px 12px;
}

.ironfly-stat span {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ironfly-stat strong {
    color: var(--text-primary);
    font-size: 18px;
}

.ironfly-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ironfly-two-column h3 {
    color: var(--text-primary);
    font-size: 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.ironfly-pattern-stack {
    display: grid;
    gap: 8px;
}

.ironfly-pattern-card {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    display: grid;
    gap: 7px;
    padding: 10px 12px;
}

.ironfly-pattern-card.prefer {
    border-color: rgba(16, 185, 129, 0.34);
}

.ironfly-pattern-card.avoid {
    border-color: rgba(255, 23, 68, 0.32);
}

.ironfly-pattern-card.watch {
    border-color: rgba(255, 234, 0, 0.28);
}

.ironfly-pattern-card strong {
    color: var(--text-primary);
    font-size: 13px;
}

.ironfly-pattern-card p {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.ironfly-pattern-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ironfly-pattern-meta span {
    background: rgba(255, 255, 255, 0.045);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    padding: 4px 6px;
}

.ironfly-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.ironfly-current-candidate {
    margin-top: 12px;
}

.ironfly-current-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.ironfly-cross-index-grid {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.ironfly-summary-card {
    background: rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    overflow-x: auto;
    padding: 12px;
}

.ironfly-summary-card h3 {
    color: var(--neon-cyan);
    font-size: 12px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.ironfly-table {
    border-collapse: collapse;
    min-width: 820px;
    width: 100%;
}

.ironfly-summary-card .ironfly-table {
    min-width: 620px;
}

.ironfly-rule-table {
    min-width: 1040px;
}

.ironfly-compact-table {
    min-width: 420px;
}

.ironfly-cross-table {
    min-width: 980px;
}

.ironfly-table th,
.ironfly-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 8px;
    text-align: left;
    white-space: nowrap;
}

.ironfly-table th {
    color: var(--text-primary);
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.ironfly-rule-table td {
    vertical-align: top;
    white-space: normal;
}

.ironfly-cross-table td {
    vertical-align: top;
    white-space: normal;
}

.ironfly-cross-table td span {
    color: var(--text-muted);
    display: inline-block;
    font-size: 10px;
    margin-top: 3px;
}

.ironfly-rule-table .metric-cell {
    white-space: nowrap;
}

.ironfly-rule-table .metric-cell span {
    color: var(--text-muted);
    font-size: 10px;
}

.ironfly-rules-overview {
    grid-column: 1 / -1;
}

.ironfly-condition-row {
    align-items: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 0;
}

.ironfly-condition-row span {
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
}

.ironfly-condition-row strong {
    color: var(--text-primary);
    font-size: 12px;
    text-align: right;
}

.ironfly-research-label {
    border-radius: 8px;
    display: inline-block;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.8px;
    margin: 4px 0 10px;
    padding: 10px 14px;
    text-transform: uppercase;
}

.ironfly-research-label.research-candidate {
    background: rgba(16, 185, 129, 0.16);
    color: var(--neon-green);
}

.ironfly-research-label.avoid,
.ironfly-research-label.no-candidate {
    background: rgba(255, 23, 68, 0.14);
    color: var(--neon-bearish);
}

.ironfly-research-label.research-snapshot-only,
.ironfly-research-label.watch,
.ironfly-research-label.no-current-candidate {
    background: rgba(255, 234, 0, 0.12);
    color: var(--neon-warning);
}

.ironfly-warning-list {
    display: grid;
    gap: 6px;
}

.ironfly-warning-list div {
    background: rgba(255, 234, 0, 0.08);
    border: 1px solid rgba(255, 234, 0, 0.14);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 8px;
}

.ironfly-recommendation-block {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    gap: 8px;
    padding: 10px 0;
}

.ironfly-recommendation-block:first-child {
    padding-top: 0;
}

.ironfly-recommendation-block h4 {
    color: var(--text-primary);
    font-size: 13px;
    margin: 0;
}

.ironfly-recommendation-block ul {
    color: var(--text-secondary);
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
}

.ironfly-recommendation-block li {
    font-size: 12px;
    line-height: 1.35;
}

.pattern-action {
    border-radius: 999px;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 7px;
    text-transform: uppercase;
}

.pattern-action.prefer {
    background: rgba(16, 185, 129, 0.16);
    color: var(--neon-green);
}

.pattern-action.avoid {
    background: rgba(255, 23, 68, 0.14);
    color: var(--neon-bearish);
}

.pattern-action.watch {
    background: rgba(255, 234, 0, 0.12);
    color: var(--neon-warning);
}

.ironfly-empty {
    color: var(--text-secondary);
    font-size: 12px;
    padding: 12px 0;
}

.weekly-variant-note {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 12px;
}

.weekly-variant-table td:nth-child(1),
.weekly-variant-table td:nth-child(3) {
    color: #e8f4ff;
    font-weight: 700;
}

.weekly-variant-table td {
    vertical-align: top;
}

.weekly-curve-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 14px;
}

.weekly-curve-toolbar label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.weekly-curve-toolbar select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    min-width: 120px;
    padding: 8px 10px;
}

.weekly-curve-count {
    color: var(--text-secondary);
    font-size: 12px;
}

.weekly-curve-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 14px;
}

.weekly-curve-legend span {
    align-items: center;
    color: var(--text-secondary);
    display: inline-flex;
    font-size: 11px;
    gap: 7px;
}

.weekly-curve-legend b {
    color: var(--text-secondary);
    font-weight: 600;
}

.weekly-legend-swatch {
    display: inline-block;
    height: 0;
    width: 26px;
}

.weekly-legend-center {
    border-top: 3px solid #10b981;
}

.weekly-legend-band {
    border-top: 2px solid rgba(0, 229, 255, 0.42);
}

.weekly-legend-zero {
    border-top: 1px dashed rgba(255, 255, 255, 0.5);
}

.weekly-legend-day {
    border-top: 2px dashed rgba(255, 234, 0, 0.62);
}

.weekly-legend-dot {
    background: #e8f4ff;
    border: 1px solid #10b981;
    border-radius: 999px;
    display: inline-block;
    height: 8px;
    width: 8px;
}

.weekly-curve-sections {
    display: grid;
    gap: 16px;
}

.weekly-variant-curve-section {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}

.weekly-variant-curve-section:first-child {
    border-top: none;
    padding-top: 0;
}

.weekly-variant-curve-header {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.weekly-variant-curve-header h3 {
    color: var(--neon-cyan);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.weekly-variant-curve-header span {
    color: var(--text-muted);
    font-size: 11px;
}

.weekly-curve-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.weekly-curve-card {
    border: 1px solid rgba(120, 140, 170, 0.28);
    border-radius: 8px;
    padding: 12px;
    background: rgba(6, 12, 24, 0.52);
}

.weekly-curve-card-unavailable {
    border-style: dashed;
    background: rgba(24, 18, 12, 0.42);
}

.weekly-curve-title,
.weekly-curve-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.weekly-curve-title strong {
    color: #e8f4ff;
    font-size: 0.9rem;
}

.weekly-curve-title span,
.weekly-curve-meta span {
    color: #8ea3b8;
    font-size: 0.78rem;
}

.weekly-curve-point-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.weekly-curve-point-row span {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    padding: 4px 6px;
}

.weekly-curve-unavailable {
    align-items: center;
    border: 1px dashed rgba(255, 205, 120, 0.38);
    border-radius: 6px;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 150px;
    justify-content: center;
    margin: 8px 0;
    padding: 12px;
    text-align: center;
}

.weekly-curve-unavailable strong {
    color: #ffd28a;
    font-size: 0.88rem;
}

.weekly-curve-unavailable span {
    color: #aeb8c4;
    font-size: 0.78rem;
}

.weekly-curve-card svg {
    width: 100%;
    height: 150px;
    margin-top: 8px;
    overflow: visible;
}

.weekly-zero-line {
    stroke: rgba(255, 255, 255, 0.24);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.weekly-day-change-line {
    stroke: rgba(255, 234, 0, 0.6);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.weekly-day-change-label {
    fill: rgba(255, 234, 0, 0.82);
    font-size: 8px;
    font-weight: 700;
}

.weekly-band-line {
    fill: none;
    stroke: rgba(0, 229, 255, 0.28);
    stroke-width: 1.5;
}

.weekly-median-line {
    fill: none;
    stroke: #10b981;
    stroke-width: 3;
}

.weekly-point {
    fill: #e8f4ff;
    stroke: #10b981;
    stroke-width: 1;
}

.weekly-coverage-events {
    margin-top: 12px;
}

@media (max-width: 980px) {
    .transformer-layout {
        grid-template-columns: 1fr;
    }

    .ironfly-layout,
    .ironfly-two-column {
        grid-template-columns: 1fr;
    }

    .transformer-control-grid {
        grid-template-columns: 1fr;
    }

    .candidate-layout {
        grid-template-columns: 1fr;
    }
}

/* SPX-only Today: observed-source GEX monitor */
.spx-gex-page {
    max-width: 1680px;
    margin: 0 auto;
}

.spx-gex-header {
    align-items: flex-start;
}

.spx-gex-header .header-logo {
    align-items: flex-start;
}

.spx-gex-header .header-meta {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.spx-gex-kicker {
    display: block;
    margin-bottom: 5px;
    color: var(--cyan, #26d9ff);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.spx-gex-subtitle {
    max-width: 720px;
    margin: 7px 0 0;
    color: var(--text-muted, #8ea3b8);
    font-size: 12px;
    line-height: 1.5;
}

.gex-replay-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin: 16px 0 10px;
    padding: 12px 14px;
    border: 1px solid rgba(38, 217, 255, 0.2);
    border-radius: 10px;
    background: rgba(9, 20, 35, 0.82);
}

.gex-replay-mode,
.gex-snapshot-navigation {
    display: flex;
    gap: 5px;
    align-items: center;
}

.gex-replay-toolbar .selector-btn {
    min-height: 36px;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.gex-replay-field {
    display: grid;
    gap: 5px;
    min-width: 155px;
}

.gex-snapshot-field {
    min-width: 185px;
}

.gex-playback-speed-field {
    min-width: 120px;
}

.gex-regime-filter-field {
    min-width: 150px;
}

.gex-regime-scope-field {
    min-width: 125px;
}

.gex-replay-field > span {
    color: var(--text-muted, #8ea3b8);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.gex-replay-field > small {
    color: #6f8397;
    font-size: 8px;
    line-height: 1.35;
}

.gex-replay-field input,
.gex-replay-field select {
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 7px;
    background: rgba(3, 12, 23, 0.86);
    color: #e8f4ff;
    font: 600 11px "Roboto Mono", "Consolas", monospace;
}

.gex-replay-field input:disabled,
.gex-replay-field select:disabled {
    color: #637386;
    cursor: not-allowed;
}

.gex-history-banner {
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin: 0 0 10px;
    padding: 11px 15px;
    border: 1px solid rgba(255, 184, 77, 0.55);
    border-radius: 10px;
    background: rgba(61, 38, 7, 0.48);
    color: #f6d9a8;
    font-size: 11px;
}

.gex-history-banner[hidden] {
    display: none;
}

.gex-history-banner strong {
    color: #ffbd59;
    letter-spacing: 0.1em;
}

.gex-outcome-button:not(:disabled) {
    border-color: rgba(255, 184, 77, 0.72);
    color: #ffd28a;
}

.gex-outcome-panel {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid rgba(255, 184, 77, 0.42);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(61, 38, 7, 0.58), rgba(8, 18, 31, 0.94));
}

.gex-outcome-panel[hidden] {
    display: none;
}

.gex-outcome-heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.gex-outcome-heading > div {
    display: grid;
    gap: 4px;
}

.gex-outcome-heading span {
    color: #ffbd59;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.gex-outcome-heading strong {
    color: #f7fbff;
    font-size: 15px;
}

.gex-outcome-panel > p {
    margin: 10px 0 14px;
    color: #c4cfda;
    font-size: 11px;
    line-height: 1.5;
}

.gex-outcome-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(145px, 1fr));
    gap: 8px;
}

.gex-outcome-summary > div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 7px;
    background: rgba(3, 12, 23, 0.62);
}

.gex-outcome-summary span {
    color: #8ea3b8;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gex-outcome-summary strong {
    color: #eef7ff;
    font: 700 11px "Roboto Mono", "Consolas", monospace;
}

.gex-integrity-banner {
    display: grid;
    grid-template-columns: auto minmax(240px, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin: 16px 0;
    padding: 11px 15px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.82);
    color: var(--text-muted, #8ea3b8);
    font-size: 11px;
}

.gex-integrity-banner strong {
    letter-spacing: 0.08em;
}

.gex-integrity-banner.integrity-clean {
    border-color: rgba(0, 230, 118, 0.45);
}

.gex-integrity-banner.integrity-clean strong {
    color: #00e676;
}

.gex-integrity-banner.integrity-blocked {
    border-color: rgba(255, 61, 87, 0.55);
}

.gex-integrity-banner.integrity-blocked strong {
    color: #ff566f;
}

.spx-gex-layout {
    display: grid;
    gap: 16px;
}

.spx-gex-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 12px;
}

.gex-stat-card {
    min-height: 108px;
    padding: 17px;
    border-top: 2px solid rgba(38, 217, 255, 0.35);
}

.gex-stat-card small {
    display: block;
    margin-top: 9px;
    color: var(--text-muted, #8ea3b8);
    font-size: 9px;
    line-height: 1.4;
}

.gex-stat-value {
    display: block;
    margin-top: 9px;
    color: #f7fbff;
    font-family: "Roboto Mono", "Consolas", monospace;
    font-size: clamp(18px, 2vw, 27px);
    letter-spacing: -0.04em;
}

.regime-high-positive {
    border-top-color: #00e676;
    box-shadow: inset 0 12px 35px rgba(0, 230, 118, 0.06);
}

.regime-mild-positive {
    border-top-color: #65d28a;
}

.regime-mild-negative {
    border-top-color: #ff9800;
}

.regime-high-negative {
    border-top-color: #ff3d57;
    box-shadow: inset 0 12px 35px rgba(255, 61, 87, 0.08);
}

.spx-gex-panel {
    padding: 0;
    overflow: hidden;
}

/* B10: current daily ETF volume context on the active SPX Today page */
.volume-dashboard-panel {
    display: grid;
    gap: 0;
}

.volume-dashboard-panel > .volume-dashboard-summary,
.volume-dashboard-panel > .volume-dashboard-detail-grid,
.volume-dashboard-panel > .volume-pattern-block {
    margin: 0 18px 12px;
}

.volume-dashboard-panel > .gex-chart-note {
    margin: 0 18px 12px;
}

.volume-dashboard-summary {
    display: grid;
    grid-template-columns: minmax(130px, 0.7fr) minmax(190px, 1fr) minmax(360px, 2fr);
    gap: 12px;
}

.volume-dashboard-score,
.volume-dashboard-regime,
.volume-dashboard-block,
.volume-dashboard-metrics > div {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
}

.volume-dashboard-score,
.volume-dashboard-regime {
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 14px;
}

.volume-dashboard-score > span,
.volume-dashboard-regime > span,
.volume-dashboard-metrics span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.volume-dashboard-score strong {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1;
}

.volume-dashboard-regime strong {
    color: var(--text-primary);
    font-size: 16px;
}

.volume-dashboard-score small,
.volume-dashboard-regime small,
.volume-pattern-heading small {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.35;
}

.volume-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(105px, 1fr));
    gap: 8px;
}

.volume-dashboard-metrics > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 10px;
}

.volume-dashboard-metrics strong {
    color: var(--text-primary);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.volume-dashboard-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 12px;
}

.volume-intraday-block {
    grid-column: 1 / -1;
}

.volume-intraday-block .volume-dashboard-metrics {
    margin-bottom: 9px;
}

.volume-intraday-block .gex-chart-note {
    margin: 0;
}

.volume-dashboard-block {
    padding: 12px;
}

.volume-dashboard-block h3 {
    color: var(--text-primary);
    font-size: 10px;
    letter-spacing: 0.7px;
    margin-bottom: 9px;
}

.volume-source-coverage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.volume-source-row {
    display: grid;
    gap: 3px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 7px;
}

.volume-source-row span,
.volume-source-row strong {
    font-size: 9px;
    letter-spacing: 0.4px;
}

.volume-source-row small {
    color: var(--text-muted);
    font-size: 9px;
    line-height: 1.35;
}

.volume-source-row.available strong { color: var(--neon-bullish); }
.volume-source-row.unavailable strong { color: var(--text-muted); }

.volume-pattern-block {
    overflow-x: auto;
}

.volume-pattern-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.volume-pattern-heading > span {
    color: var(--neon-cyan);
    font-size: 10px;
    font-weight: 700;
}

.volume-pattern-table {
    min-width: 660px;
}

.volume-pattern-row {
    display: grid;
    grid-template-columns: minmax(145px, 1.5fr) 65px 82px 92px 82px 92px;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    color: var(--text-secondary);
    font-size: 10px;
}

.volume-pattern-header {
    border-top: 0;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.45px;
}

.volume-pattern-row em {
    color: var(--neon-warning);
    display: block;
    font-size: 8px;
    font-style: normal;
}

@media (max-width: 980px) {
    .volume-dashboard-summary {
        grid-template-columns: 1fr 1fr;
    }

    .volume-dashboard-metrics {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .volume-dashboard-summary,
    .volume-dashboard-detail-grid {
        grid-template-columns: 1fr;
    }

    .volume-dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .volume-source-coverage {
        grid-template-columns: 1fr;
    }

    .volume-pattern-table {
        min-width: 0;
    }

    .volume-pattern-header {
        display: none;
    }

    .volume-pattern-row:not(.volume-pattern-header) {
        grid-template-columns: 1fr 1fr;
        gap: 9px 14px;
        margin-top: 8px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 7px;
    }

    .volume-pattern-row [role="cell"] {
        display: grid;
        gap: 2px;
    }

    .volume-pattern-row [role="cell"]::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-transform: uppercase;
    }
}

.gex-expiration-watch {
    border-top: 2px solid rgba(38, 217, 255, 0.32);
}

.term-structure-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
    margin-bottom: 6px;
}

.term-structure-kpi-card {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(15, 29, 47, 0.62);
}

.term-structure-kpi-card span,
.term-structure-kpi-card small {
    color: #9fb2c4;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.term-structure-kpi-card strong {
    color: #f7fbff;
    font-family: "Roboto Mono", "Consolas", monospace;
    font-size: 15px;
    font-weight: 800;
}

.term-structure-svg-container {
    min-height: 290px;
    height: 290px;
    position: relative;
    overflow: hidden;
}

.term-structure-svg-container svg {
    width: 100%;
    height: 290px;
    display: block;
}

.ts-axis-text {
    fill: #9fb2c4;
    font-size: 10px;
    font-family: "Roboto Mono", "Consolas", monospace;
}

.ts-grid-line {
    stroke: rgba(148, 163, 184, 0.12);
    stroke-width: 1;
}

.ts-watermark {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    fill: rgba(148, 163, 184, 0.35);
}

[data-theme="light"] .term-structure-kpi-card {
    background: #F1F4F8 !important;
    border: 1px solid #E2E6EF !important;
    color: #0B123A !important;
}

[data-theme="light"] .term-structure-kpi-card strong {
    color: #0B123A !important;
}

[data-theme="light"] .term-structure-kpi-card span,
[data-theme="light"] .term-structure-kpi-card small {
    color: #5A6E85 !important;
}

[data-theme="light"] .ts-axis-text {
    fill: #0B123A !important;
    font-weight: 600;
}

[data-theme="light"] .ts-grid-line {
    stroke: rgba(0, 0, 0, 0.07) !important;
}

[data-theme="light"] .ts-watermark {
    fill: rgba(11, 18, 58, 0.25) !important;
}

.expiration-watch-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    padding: 0 18px 14px;
}

.expiration-watch-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(142, 163, 184, 0.2);
    border-radius: 8px;
    background: rgba(4, 13, 25, 0.48);
}

.expiration-watch-card.watch-blocked,
.expiration-watch-card.watch-unavailable {
    border-color: rgba(255, 86, 111, 0.34);
}

.expiration-watch-card-header,
.expiration-watch-metric,
.expiration-watch-wall {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.expiration-watch-card-header strong,
.expiration-watch-metric strong {
    color: #f7fbff;
    font-family: "Roboto Mono", "Consolas", monospace;
}

.expiration-watch-card-header span,
.expiration-watch-meta,
.expiration-watch-wall,
.expiration-watch-card small {
    color: var(--text-muted, #8ea3b8);
    font-size: 9px;
    line-height: 1.55;
}

.expiration-watch-card-header span,
.expiration-watch-state {
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.expiration-watch-metric {
    margin: 12px 0 8px;
}

.expiration-watch-metric strong {
    font-size: 18px;
}

.expiration-watch-walls {
    display: grid;
    gap: 3px;
    margin: 10px 0;
    padding-top: 9px;
    border-top: 1px solid rgba(142, 163, 184, 0.13);
}

.expiration-watch-wall strong {
    color: #dce9f5;
    font-family: "Roboto Mono", "Consolas", monospace;
}

.expiration-watch-state.watch-enforcing { color: #00e676; }
.expiration-watch-state.watch-fading { color: #ffb14a; }
.expiration-watch-state.watch-stable { color: #26d9ff; }
.expiration-watch-state.watch-blocked { color: #ff566f; }

.gex-expiration-watch > .gex-chart-note {
    margin: 0 18px 12px;
}

.expiration-watch-details {
    margin: 0 18px 16px;
    border-top: 1px solid rgba(142, 163, 184, 0.16);
    padding-top: 10px;
}

.expiration-watch-details summary {
    cursor: pointer;
    color: var(--text-muted, #8ea3b8);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.expiration-watch-drilldown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    padding-top: 10px;
}

.expiration-watch-drilldown-row {
    padding: 9px 11px;
    border: 1px solid rgba(142, 163, 184, 0.14);
    border-radius: 6px;
    color: var(--text-muted, #8ea3b8);
    font-size: 9px;
    line-height: 1.55;
}

.expiration-watch-drilldown-row strong {
    display: block;
    color: #dce9f5;
    font-family: "Roboto Mono", "Consolas", monospace;
}

.publication-controls-panel {
    grid-column: 1 / -1;
}

.publication-control-grid {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) repeat(2, auto);
    gap: 12px;
    align-items: end;
    margin: 0 18px 14px;
}

.publication-confirm-control {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    color: var(--text-muted, #8ea3b8);
    font-size: 0.78rem;
}

.publication-confirm-control input {
    accent-color: var(--accent-cyan, #26d9ff);
}

.publication-preview {
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0 18px;
    padding: 14px;
    border: 1px solid rgba(89, 199, 255, 0.18);
    border-radius: 8px;
    background: rgba(3, 12, 22, 0.72);
    color: #dce9f5;
    font: 0.78rem/1.55 "Roboto Mono", "Consolas", monospace;
}

.publication-blockers {
    display: grid;
    gap: 6px;
    margin: 12px 18px;
}

.publication-blocker {
    padding: 8px 10px;
    border-left: 3px solid #ffb14a;
    background: rgba(255, 177, 74, 0.08);
    color: var(--text-muted, #8ea3b8);
    font-size: 0.78rem;
}

.publication-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 18px 0;
}

.publication-status-list {
    display: grid;
    gap: 8px;
    margin: 10px 18px 14px;
}

.publication-status-row {
    display: grid;
    grid-template-columns: minmax(90px, 0.7fr) minmax(110px, 0.9fr) minmax(120px, 1fr) minmax(180px, 2fr);
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    color: var(--text-muted, #8ea3b8);
    font-size: 0.76rem;
}

.publication-status-row a {
    color: var(--accent-cyan, #26d9ff);
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .publication-control-grid {
        grid-template-columns: 1fr 1fr;
    }

    .publication-status-row {
        grid-template-columns: 1fr;
    }
}

/* Wide screens place the strike ladder and the session chart side by side so
   both update in view together; narrow screens keep the original stacking. */
.spx-chart-row {
    display: contents;
}

@media (min-width: 1500px) {
    .spx-chart-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .spx-chart-row .spx-gex-panel {
        margin: 0;
    }
}

.spx-panel-header {
    min-height: 63px;
    gap: 12px;
}

.spx-panel-header h2 {
    margin: 0;
}

.spx-panel-actions {
    display: flex;
    gap: 9px;
    align-items: center;
}

.section-guide-link {
    color: var(--neon-cyan);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
    white-space: nowrap;
}

.section-guide-link:hover,
.today-guide-main-link:hover {
    color: white;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.42);
}

.today-guide-main-link {
    border-bottom: 1px solid rgba(0, 229, 255, 0.28);
    padding-bottom: 3px;
}

.spx-summary-guide-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: -2px 2px -2px;
}

.spx-summary-guide-row > span {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.spx-opening-panel .transformer-message,
.spx-gex-panel > .transformer-message {
    margin: 0 18px 10px;
}

.gex-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    padding: 0 20px 5px;
    color: var(--text-muted, #8ea3b8);
    font-size: 11px;
    letter-spacing: 0.04em;
}

.gex-legend span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.gex-legend i {
    width: 17px;
    height: 3px;
    display: inline-block;
}

.legend-call { background: #00e676; }
.legend-put { background: #ff3d57; }
.legend-oi { background: rgba(176, 199, 220, 0.55); }
.legend-spot { background: #f8fafc; }
.legend-current { background: #26d9ff; }

.spx-svg-chart {
    height: 560px;
    min-height: 560px;
    max-height: 560px;
    margin: 0 14px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 9px;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(rgba(16, 30, 49, 0.75), rgba(6, 14, 27, 0.92)),
        repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(148, 163, 184, 0.04) 80px);
}

.spx-svg-chart svg {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.opening-strike-chart {
    height: 560px;
    min-height: 560px;
    max-height: 560px;
    overflow: hidden;
}

.opening-strike-chart svg {
    height: 100%;
    min-height: 100%;
    width: 100%;
}

.intraday-chart,
.intraday-chart svg {
    height: 100%;
    min-height: 100%;
    width: 100%;
}

.intraday-combined-chart,
.intraday-combined-chart svg {
    height: 100%;
    min-height: 100%;
    width: 100%;
}

.gex-combined-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    padding: 0 18px 10px;
    color: #dbe8f3;
    font-size: 10px;
    font-weight: 750;
}

.gex-combined-legend > span {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.gex-combined-legend small {
    color: #7f94a9;
    font-size: 9px;
    font-weight: 600;
}

.combined-legend-swatch {
    width: 20px;
    height: 3px;
    border-radius: 999px;
    background: #94a3b8;
}

.legend-spx-price { background: #f8fafc; }
.legend-vix-price { background: #df8cff; }
.legend-call-gex { background: #00e676; }
.legend-put-gex { background: #ff3d57; }
.legend-net-gex { background: #26d9ff; }
.legend-regime-band {
    height: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(90deg, rgba(0, 230, 118, 0.5), rgba(255, 152, 0, 0.45), rgba(255, 61, 87, 0.5));
}

.gex-subchart-heading {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px 10px;
    color: var(--text-muted, #8ea3b8);
    font-size: 9px;
    letter-spacing: 0.06em;
}

.gex-subchart-heading span {
    color: #26d9ff;
    font-weight: 800;
}

.gex-aggregate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 18px 8px;
    overflow: hidden;
}

.gex-aggregate-grid > div {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(15, 29, 47, 0.62);
    overflow: hidden;
}

.gex-aggregate-grid span,
.gex-aggregate-grid small {
    color: #9fb2c4;
    font-size: 10px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gex-aggregate-grid strong {
    color: #f7fbff;
    font-family: "Roboto Mono", "Consolas", monospace;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gex-aggregate-note {
    padding-top: 2px;
}

.gex-evolution-chart,
.gex-evolution-chart svg {
    min-height: 280px;
    height: 280px;
}

.gex-axis-line,
.gex-grid-line {
    stroke: rgba(176, 199, 220, 0.25);
    stroke-width: 1;
}

.gex-grid-line {
    stroke-dasharray: 4 6;
    stroke: rgba(176, 199, 220, 0.11);
}

.gex-tick {
    stroke: rgba(176, 199, 220, 0.45);
}

.gex-call-bar {
    fill: rgba(0, 230, 118, 0.78);
}

.gex-put-bar {
    fill: rgba(255, 61, 87, 0.78);
}

.gex-open-call-bar {
    fill: rgba(0, 230, 118, 0.24);
}

.gex-open-put-bar {
    fill: rgba(255, 61, 87, 0.24);
}

.gex-opening-marker,
.gex-current-marker {
    stroke-width: 2;
    stroke-dasharray: 6 5;
}

.gex-opening-marker { stroke: #f8fafc; }
.gex-current-marker { stroke: #26d9ff; }
.gex-opening-marker-label { fill: #f8fafc; font-size: 12px; font-weight: 800; }
.gex-current-marker-label { fill: #26d9ff; font-size: 12px; font-weight: 800; }

.gex-axis-label,
.gex-side-label {
    fill: #c2d2e1;
    font-family: "Roboto Mono", "Consolas", monospace;
    font-size: 12px;
    paint-order: stroke;
    stroke: #07111f;
    stroke-width: 3px;
    stroke-linejoin: round;
}

.gex-side-label {
    font-size: 11px;
    font-weight: 800;
}

.gex-column-heading,
.gex-strike-heading,
.gex-strike-label,
.gex-oi-label,
.gex-pin-label {
    font-family: "Roboto Mono", "Consolas", monospace;
    paint-order: stroke;
    stroke: #07111f;
    stroke-width: 3px;
    stroke-linejoin: round;
}

.gex-column-heading {
    fill: #dce8f2;
    font-size: 13px;
    font-weight: 800;
}

.gex-strike-heading,
.gex-strike-label {
    fill: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.gex-net-strike-label {
    fill: #26d9ff;
    font-family: "Roboto Mono", "Consolas", monospace;
    font-size: 10px;
    font-weight: 800;
    paint-order: stroke;
    stroke: #07111f;
    stroke-width: 3px;
}

.gex-oi-label {
    fill: #b8c9d8;
    font-size: 12px;
    font-weight: 700;
}

.gex-pin-label {
    fill: #26d9ff;
    font-size: 11px;
    font-weight: 900;
}

.gex-strike-grid-line {
    stroke: rgba(176, 199, 220, 0.08);
    stroke-width: 1;
}

.gex-call-oi-bar { fill: rgba(0, 230, 118, 0.18); }
.gex-put-oi-bar { fill: rgba(255, 61, 87, 0.18); }
.gex-pin-row { fill: rgba(38, 217, 255, 0.07); }

.vix-axis-label { fill: #df8cff; }

.spx-price-line,
.vix-price-line {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.spx-price-line {
    stroke: #f8fafc;
    stroke-width: 2.1;
}

.vix-price-line {
    stroke: #df8cff;
    stroke-width: 1.7;
}

.gex-call-line,
.gex-put-line,
.gex-net-line {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.gex-call-line { stroke: #00e676; }
.gex-put-line { stroke: #ff3d57; }
.gex-net-line { stroke: #26d9ff; stroke-width: 2.3; }
.gex-net-point { fill: #26d9ff; stroke: #07111f; stroke-width: 1; }
.gex-call-label { fill: #00e676; font-size: 10px; font-weight: 800; }
.gex-put-label { fill: #ff3d57; font-size: 10px; font-weight: 800; }
.gex-net-label { fill: #26d9ff; font-size: 10px; font-weight: 800; }

.spx-line-label,
.vix-line-label,
.magnet-level-label {
    font-size: 12px;
    font-weight: 800;
    paint-order: stroke;
    stroke: #07111f;
    stroke-width: 3px;
}

.spx-line-label { fill: #f8fafc; }
.vix-line-label { fill: #df8cff; }

.magnet-level-line {
    stroke: rgba(38, 217, 255, 0.65);
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.chart-layout-toggle {
    display: inline-flex;
    gap: 6px;
}

.gex-combined-legend[hidden] {
    display: none !important;
}

.combined-net-bar-positive { fill: rgba(0, 230, 118, 0.72); }
.combined-net-bar-negative { fill: rgba(255, 61, 87, 0.72); }

.combined-zero-axis {
    stroke: rgba(194, 210, 225, 0.45);
    stroke-width: 1;
}

.combined-call-wall-line {
    stroke: rgba(0, 230, 118, 0.8);
    stroke-width: 1.4;
    stroke-dasharray: 7 5;
}

.combined-put-wall-line {
    stroke: rgba(255, 61, 87, 0.8);
    stroke-width: 1.4;
    stroke-dasharray: 7 5;
}

.combined-zero-gamma-line {
    stroke: rgba(248, 250, 252, 0.65);
    stroke-width: 1.2;
    stroke-dasharray: 2 5;
}

.combined-call-wall-line-label { fill: #00e676; font-size: 11px; font-weight: 800; }
.combined-put-wall-line-label { fill: #ff3d57; font-size: 11px; font-weight: 800; }
.combined-zero-gamma-line-label { fill: #f8fafc; font-size: 11px; font-weight: 800; }
.combined-magnet-label { fill: #26d9ff; font-size: 11px; font-weight: 800; }

.combined-mixed-level-line {
    stroke: rgba(194, 210, 225, 0.6);
    stroke-width: 1.4;
    stroke-dasharray: 7 5;
}

.combined-level-label { font-size: 11px; font-weight: 800; }
.combined-level-label .combined-call-wall-line-label { fill: #00e676; }
.combined-level-label .combined-put-wall-line-label { fill: #ff3d57; }
.combined-level-label .combined-zero-gamma-line-label { fill: #f8fafc; }
.combined-level-label .combined-magnet-label { fill: #26d9ff; }
.combined-level-sep { fill: #c2d2e1; }

.combined-last-price-dot {
    fill: #f8fafc;
    stroke: #07111f;
    stroke-width: 1.5;
}

.magnet-level-label {
    fill: #26d9ff;
}

.gex-prior-close-note,
.gex-chart-note {
    padding: 11px 18px 15px;
    color: var(--text-muted, #8ea3b8);
    font-size: 11px;
    line-height: 1.5;
}

.spx-gex-lower-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 0.9fr;
    gap: 16px;
}

.magnet-list {
    display: grid;
    gap: 7px;
    padding: 12px 16px 0;
}

.nearby-pin-list {
    display: grid;
    gap: 6px;
    padding: 0 16px 14px;
}

.nearby-pin-row {
    display: grid;
    grid-template-columns: 0.7fr 0.8fr 1fr 1.5fr;
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 7px;
    background: rgba(15, 29, 47, 0.48);
    color: #c2d2e1;
    font-family: "Roboto Mono", "Consolas", monospace;
    font-size: 11px;
}

.nearby-pin-row strong {
    color: #ffffff;
    font-size: 13px;
}

.magnet-row {
    display: grid;
    grid-template-columns: 32px 0.8fr 1fr 0.8fr 0.9fr 0.9fr;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 8px;
    background: rgba(15, 29, 47, 0.58);
}

.magnet-row > div:not(.magnet-rank) {
    display: grid;
    gap: 4px;
}

.magnet-row span,
.gex-level-grid span,
.second-order-values span,
.gex-provenance-grid span {
    color: var(--text-muted, #8ea3b8);
    font-size: 10px;
    letter-spacing: 0.06em;
}

.magnet-row strong,
.gex-level-grid strong,
.second-order-values strong {
    color: #f7fbff;
    font-family: "Roboto Mono", "Consolas", monospace;
    font-size: 12px;
}

.magnet-rank {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(38, 217, 255, 0.4);
    border-radius: 50%;
    color: #26d9ff;
    font-weight: 800;
}

.retention-reinforcing { color: #00e676 !important; }
.retention-fading { color: #ff9800 !important; }
.retention-stable { color: #26d9ff !important; }
.retention-unavailable { color: #8ea3b8 !important; }

.gex-level-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 16px;
}

.gex-level-grid > div {
    display: grid;
    gap: 6px;
    padding: 13px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(15, 29, 47, 0.58);
}

.gex-level-grid small {
    color: var(--text-muted, #8ea3b8);
    font-size: 9px;
}

.gex-retention-table {
    padding: 0 16px 15px;
}

.retention-head,
.retention-line {
    display: grid;
    grid-template-columns: 0.7fr 1fr 1fr 0.8fr;
    gap: 8px;
    align-items: center;
    padding: 8px 5px;
    font-size: 9px;
}

.retention-head {
    color: var(--text-muted, #8ea3b8);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.retention-line {
    color: #d9e7f2;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    font-family: "Roboto Mono", "Consolas", monospace;
}

.second-order-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 16px;
}

.second-order-values > div {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 8px;
    background: rgba(15, 29, 47, 0.58);
}

.gex-provenance-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 9px;
    padding: 14px 16px 18px;
}

.gex-provenance-grid > div {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 7px;
    background: rgba(10, 22, 38, 0.55);
}

.gex-provenance-grid strong {
    color: #d9e7f2;
    font-size: 9px;
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .spx-gex-summary-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .spx-gex-lower-grid {
        grid-template-columns: 1fr;
    }

    .gex-provenance-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .gex-aggregate-grid {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }

    .expiration-watch-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .gex-integrity-banner,
    .gex-history-banner,
    .spx-gex-summary-grid,
    .gex-provenance-grid,
    .expiration-watch-strip {
        grid-template-columns: 1fr;
    }

    .gex-outcome-summary {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }

    .gex-replay-toolbar,
    .gex-replay-field,
    .gex-snapshot-field,
    .gex-playback-speed-field {
        width: 100%;
    }

    .gex-regime-filter-field,
    .gex-regime-scope-field {
        width: 100%;
    }

    .gex-replay-mode,
    .gex-snapshot-navigation {
        width: 100%;
    }

    .gex-replay-mode .selector-btn,
    .gex-snapshot-navigation .selector-btn {
        flex: 1;
    }

    .magnet-row {
        grid-template-columns: 30px 1fr 1fr;
    }

    .nearby-pin-row {
        grid-template-columns: 1fr 1fr;
    }

    .gex-aggregate-grid {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }

    .spx-svg-chart,
    .spx-svg-chart svg {
        min-height: 330px;
        height: 330px;
    }

    .intraday-combined-chart,
    .intraday-combined-chart svg {
        min-height: 520px;
        height: 520px;
    }

    .spx-panel-header,
    .spx-panel-actions {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .section-guide-link {
        white-space: normal;
    }
}

/* ---------------- LIGHT UI + READABILITY REFRESH ---------------- */
/* Kept as a final design-system layer so legacy research panels inherit the
   brighter palette without changing their data-state or semantic classes. */

::selection {
    background: rgba(0, 111, 130, 0.18);
    color: var(--text-primary);
}

a,
button,
input,
select,
textarea,
summary {
    -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

:focus-visible {
    outline: 3px solid var(--neon-cyan);
    outline-offset: 2px;
}

.app-container {
    padding: 24px;
}

.dashboard-header {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--border-color);
    box-shadow: var(--shadow-soft);
}

.logo-glow {
    opacity: 0.13;
}

.header-logo h1 {
    font-size: clamp(1.65rem, 2vw, 2.1rem);
    letter-spacing: 0.055em;
}

.header-meta {
    gap: 20px;
}

.meta-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.11em;
}

.meta-val {
    color: var(--text-primary);
    font-size: 0.92rem;
}



/* SPX Gamma Map - Dark Theme Refinements & Responsive Layout */

.spx-gex-page {
    max-width: 1560px;
    margin: 0 auto;
}

.glass-card,
.transformer-panel,
.ironfly-panel,
.spx-gex-panel,
.volume-analysis-card {
    background: var(--bg-card, rgba(18, 26, 42, 0.75)) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-main, 0 10px 30px rgba(0, 0, 0, 0.4)) !important;
    backdrop-filter: blur(16px) !important;
    color: var(--text-main, #f0f4fc) !important;
}

.glass-card:hover,
.spx-gex-panel:hover,
.volume-analysis-card:hover {
    border-color: rgba(0, 229, 255, 0.35) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
}

.spx-panel-header {
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.spx-panel-header h2 {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.spx-panel-subtitle {
    font-size: 13px !important;
    color: var(--text-secondary, #8c9ba5) !important;
}

/* Form Controls & Inputs */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--text-main, #f0f4fc) !important;
    font-family: var(--font-sans, 'Inter', sans-serif) !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-cyan, #00e5ff) !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-dim, #5c6b75) !important;
}

input:disabled,
select:disabled,
textarea:disabled {
    background: rgba(15, 23, 42, 0.6) !important;
    color: var(--text-dim, #5c6b75) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

option {
    background: #1e293b !important;
    color: var(--text-main, #f0f4fc) !important;
}

/* Toolbar Buttons */
.gex-replay-toolbar {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(61, 90, 254, 0.25) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(12px) !important;
    padding: 16px 20px !important;
    margin: 16px 0 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: flex-end !important;
}

.gex-replay-toolbar .selector-btn {
    background: rgba(30, 41, 59, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f0f4fc !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 8px 16px !important;
    min-height: 38px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.gex-replay-toolbar .selector-btn:hover:not(:disabled) {
    background: rgba(61, 90, 254, 0.25) !important;
    border-color: var(--accent-cyan) !important;
    color: #fff !important;
}

.gex-replay-toolbar .selector-btn.active {
    background: linear-gradient(135deg, #00e5ff, #0072ff) !important;
    color: #090e18 !important;
    font-weight: 800 !important;
    border-color: #00e5ff !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.4) !important;
}

.gex-replay-toolbar .selector-btn:disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* Stat Cards */
.spx-gex-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.gex-stat-card {
    background: var(--bg-card, rgba(18, 26, 42, 0.75)) !important;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
    border-top: 2px solid rgba(0, 229, 255, 0.4) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: var(--shadow-main) !important;
    transition: all 0.25s ease !important;
}

.gex-stat-card:hover {
    border-color: rgba(0, 229, 255, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}

.gex-card-kicker {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-muted, #8c9ba5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

.gex-card-hero {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #fff !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    margin: 6px 0 4px !important;
}

.gex-card-caption {
    font-size: 12px !important;
    color: var(--text-secondary, #8c9ba5) !important;
}

/* SVG Chart Ink Colors */
.spx-svg-chart {
    background: rgba(10, 15, 29, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
}

.gex-axis-label,
.gex-side-label,
.gex-column-heading,
.gex-strike-heading,
.spx-axis-label,
.vix-axis-label {
    fill: #8c9ba5 !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
}

.combined-zero-axis {
    stroke: rgba(255, 255, 255, 0.15) !important;
}

.combined-call-wall-line-label {
    fill: #00e676 !important;
    font-weight: 800 !important;
}
.combined-put-wall-line-label {
    fill: #ff1744 !important;
    font-weight: 800 !important;
}
.combined-zero-gamma-line-label {
    fill: #ffea00 !important;
    font-weight: 800 !important;
}
.combined-magnet-label {
    fill: #00e5ff !important;
    font-weight: 800 !important;
}

/* Tables */
.magnet-table,
.volume-spike-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.magnet-table th,
.volume-spike-table th {
    background: rgba(30, 41, 59, 0.6) !important;
    color: var(--accent-cyan, #00e5ff) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
}

.magnet-table td,
.volume-spike-table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: var(--text-main, #f0f4fc) !important;
}

.magnet-table tr:hover td,
.volume-spike-table tr:hover td {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Media Queries */
@media (max-width: 1180px) {
    .dashboard-header,
    .spx-gex-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 18px !important;
    }
    .header-meta,
    .spx-gex-header .header-meta {
        justify-content: flex-start !important;
        width: 100% !important;
    }
}

@media (max-width: 720px) {
    .gex-replay-toolbar {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    .spx-gex-summary-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   LIGHT MODE: PRESENTATION THEME (DEEP MIDNIGHT INK & TAILORED ACCENTS)
   ========================================================================== */
[data-theme="light"] .alert-bullish {
    background: rgba(71, 158, 139, 0.04) !important;
    border-color: rgba(71, 158, 139, 0.3) !important;
    color: #2D6F61 !important;
    font-weight: 800 !important;
}
[data-theme="light"] .alert-bullish * {
    color: #2D6F61 !important;
    font-weight: 800 !important;
}

[data-theme="light"] .alert-bearish {
    background: rgba(232, 109, 72, 0.05) !important;
    border-color: rgba(232, 109, 72, 0.3) !important;
    color: #9E381B !important;
    font-weight: 800 !important;
}
[data-theme="light"] .alert-bearish * {
    color: #9E381B !important;
    font-weight: 800 !important;
}

[data-theme="light"] .alert-warning {
    background: rgba(233, 195, 99, 0.06) !important;
    border-color: rgba(233, 195, 99, 0.35) !important;
    color: #8C6B1C !important;
    font-weight: 800 !important;
}
[data-theme="light"] .alert-warning * {
    color: #8C6B1C !important;
    font-weight: 800 !important;
}

[data-theme="light"] .research-link-band,
[data-theme="light"] .workspace-intro,
[data-theme="light"] .workspace-status-grid,
[data-theme="light"] .workspace-advanced,
[data-theme="light"] .legacy-research-warning,
[data-theme="light"] .legs-container,
[data-theme="light"] .kpi-row,
[data-theme="light"] .greek-tag,
[data-theme="light"] .thesis-callout,
[data-theme="light"] .asset-selector,
[data-theme="light"] .gex-replay-toolbar,
[data-theme="light"] .spx-gex-panel,
[data-theme="light"] .spx-intraday-panel,
[data-theme="light"] .spx-opening-panel,
[data-theme="light"] .volume-dashboard-panel,
[data-theme="light"] .gex-outcome-panel,
[data-theme="light"] .gex-provenance-panel {
    background: #F1F4F8 !important;
    border: 1px solid #E2E6EF !important;
    color: #0B123A !important;
}

[data-theme="light"] .research-link-band *,
[data-theme="light"] .workspace-intro *,
[data-theme="light"] .workspace-status-grid *,
[data-theme="light"] .workspace-advanced *,
[data-theme="light"] .legacy-research-warning *,
[data-theme="light"] .legs-container *,
[data-theme="light"] .kpi-row *,
[data-theme="light"] .greek-tag *,
[data-theme="light"] .thesis-callout *,
[data-theme="light"] .asset-selector * {
    color: #0B123A !important;
    font-weight: 700 !important;
}

[data-theme="light"] .research-link,
[data-theme="light"] .app-nav-link,
[data-theme="light"] .workspace-tab,
[data-theme="light"] .selector-btn,
[data-theme="light"] .gex-replay-toolbar .selector-btn {
    background: #FFFFFF !important;
    border: 1px solid #E2E6EF !important;
    color: #0B123A !important;
    font-weight: 700 !important;
}

[data-theme="light"] .selector-btn.active,
[data-theme="light"] .gex-replay-toolbar .selector-btn.active,
[data-theme="light"] .app-nav-link.active,
[data-theme="light"] .workspace-tab.active {
    background: #335FFE !important;
    color: #ffffff !important;
    border-color: #335FFE !important;
    box-shadow: 0 2px 8px rgba(51, 95, 254, 0.3) !important;
}

[data-theme="light"] .magnet-table,
[data-theme="light"] .volume-spike-table,
[data-theme="light"] .volume-pattern-table,
[data-theme="light"] .gex-retention-table {
    background: #F1F4F8 !important;
    border: 1px solid #E2E6EF !important;
}

[data-theme="light"] .magnet-table th,
[data-theme="light"] .volume-spike-table th,
[data-theme="light"] .volume-pattern-table th,
[data-theme="light"] .gex-retention-table th {
    background: #E4E9F2 !important;
    color: #0B123A !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    border-bottom: 2px solid #CCD4E2 !important;
}

[data-theme="light"] .magnet-table td,
[data-theme="light"] .volume-spike-table td,
[data-theme="light"] .volume-pattern-table td,
[data-theme="light"] .gex-retention-table td {
    color: #0B123A !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-bottom: 1px solid #E2E6EF !important;
}

[data-theme="light"] .magnet-table tr:hover td,
[data-theme="light"] .volume-spike-table tr:hover td,
[data-theme="light"] .volume-pattern-table tr:hover td,
[data-theme="light"] .gex-retention-table tr:hover td {
    background: #E8EDF4 !important;
    color: #0B123A !important;
}

[data-theme="light"] .spx-svg-chart {
    background: #F1F4F8 !important;
    border: 1px solid #E2E6EF !important;
}

[data-theme="light"] .gex-axis-label,
[data-theme="light"] .gex-side-label,
[data-theme="light"] .gex-column-heading,
[data-theme="light"] .gex-strike-heading,
[data-theme="light"] .gex-oi-label,
[data-theme="light"] .gex-strike-label,
[data-theme="light"] .gex-net-strike-label,
[data-theme="light"] .gex-pin-label,
[data-theme="light"] .spx-axis-label,
[data-theme="light"] .vix-axis-label,
[data-theme="light"] .combined-level-label,
[data-theme="light"] .gex-current-marker-label,
[data-theme="light"] .spx-line-label,
[data-theme="light"] .vix-line-label,
[data-theme="light"] .magnet-level-label,
[data-theme="light"] .combined-magnet-label {
    fill: #0B123A !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

[data-theme="light"] .gex-axis-line,
[data-theme="light"] .gex-strike-grid-line {
    stroke: rgba(11, 18, 58, 0.12) !important;
}