/* --- 1. PLEXUS HOMEPAGE ANIMATION --- */
#home-view { position: relative; width: 100%; height: 65vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background-color: var(--bg-primary: #000000); overflow: hidden; border-radius: 8px; }
#plexus-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.plexus-text { position: relative; z-index: 2; text-align: center; color: var(--text-primary); user-select: none; padding-bottom: 2rem; }
.plexus-title { font-size: 2.5rem; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; text-shadow: 0 0 5px var(--accent-primary), 0 0 10px var(--accent-primary), 0 0 20px var(--accent-primary); }
.plexus-subtitle {
    font-family: 'Roboto Mono', monospace;
    font-size: 1.1rem;
    color: #fffec8; /* Pale Luminous Gold - much closer to white */
    margin-top: 1.0rem;
    letter-spacing: 5px; /* Wider spacing to match the title's breath */
    text-transform: uppercase;
    font-weight: 600;
    text-shadow:
        0 0 10px rgba(255, 220, 100, 0.8), /* Bright inner core glow */
        0 0 20px rgba(255, 200, 0, 0.5),   /* Middle gold aura */
        0 0 30px rgba(255, 200, 0, 0.2);   /* Soft outer atmosphere */
    -webkit-text-stroke: 0px;
}
#main-chart-title {
    font-size: 1.5rem !important; /* The !important overrides the smaller class styling */
    color: #D4AF37; /* Institutional Gold to match your theme */
}
/* =========================================
   VPA MONOLITH STYLING (Black/Gold Edition)
   ========================================= */

/* --- 1. Scoped Theme Variables --- */
#vpa-view {
    --vpa-bg-dark: #050505;
    --vpa-bg-panel: rgba(20, 20, 20, 0.6);
/* --- CHANGE THESE THREE LINES --- */
    --vpa-gold: #FFFFFF;                          /* Pure White */
    --vpa-gold-dim: rgba(255, 255, 255, 0.5);     /* White 50% opacity */
    --vpa-gold-faint: rgba(255, 255, 255, 0.1);   /* White 10% opacity */
    /* -------------------------------- */
    --vpa-red: #FF4444;
    --vpa-green: #00CC66;
    --vpa-text-main: #E0E0E0;
    --vpa-text-muted: #888888;
    --vpa-border: 1px solid rgba(212, 175, 55, 0.2);
    --vpa-font-tech: 'JetBrains Mono', monospace;
    --vpa-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* --- 2. Main Layout Grid --- */
#vpa-grid {
    display: grid;
    /* Desktop: 3 Columns. Left (Metrics/Legend), Middle (Signals), Right (Signals/Details) */
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
    margin-top: 1.5rem;
    align-items: start; /* Prevents stretching */
}

/* --- 3. The "Command Center" Card --- */
.vpa-card {
    background: var(--vpa-bg-panel);
    border: var(--vpa-border);
    border-radius: 4px; /* Sharper corners for tech look */
    padding: 1.5rem;
    box-shadow: var(--vpa-shadow);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.vpa-card:hover {
    border-color: var(--vpa-gold-dim);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.1);
}

/* Card Header Line */
.vpa-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--vpa-gold-dim), transparent);
    opacity: 0.5;
}

/* Full Width Utility */
.vpa-card.full-width {
    grid-column: 1 / -1;
    width: 100%;
    overflow: visible;
}

/* --- 4. Typography --- */
.view-title {
    font-family: var(--vpa-font-tech);
    color: var(--vpa-gold);
    font-size: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    margin-bottom: 0.5rem;
}

.view-subtitle {
    color: var(--vpa-text-muted);
    font-size: 0.9rem;
    font-family: var(--vpa-font-tech);
}

.vpa-card-title {
    font-family: var(--vpa-font-tech);
    font-size: 0.85rem;
    color: var(--vpa-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- 5. Legend Component --- */
.vpa-legend-container {
    background: rgba(0, 0, 0, 0.3);
    border: var(--vpa-border);
    padding: 1rem;
    border-radius: 4px;
}

.vpa-legend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.vpa-legend-list li {
    font-family: var(--vpa-font-tech);
    font-size: 0.75rem;
    color: var(--vpa-text-muted);
    display: flex;
    align-items: center;
}

.legend-abbr {
    color: var(--vpa-text-main);
    font-weight: bold;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 2px;
    margin-right: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 35px;
    text-align: center;
}

/* --- 6. Metrics Grid --- */
.vpa-metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.vpa-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    border-left: 2px solid var(--vpa-gold-dim);
}

.vpa-metric-label {
    font-size: 0.8rem;
    color: var(--vpa-text-muted);
    font-family: var(--vpa-font-tech);
}

.vpa-metric-value {
    font-size: 0.95rem;
    color: var(--vpa-text-main);
    font-weight: bold;
    font-family: var(--vpa-font-tech);
}

/* --- 7. Signals List --- */
.vpa-signals-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px; /* Space for scrollbar */
}

/* Scrollbar styling for signals */
.vpa-signals-list::-webkit-scrollbar { width: 4px; }
.vpa-signals-list::-webkit-scrollbar-track { background: #111; }
.vpa-signals-list::-webkit-scrollbar-thumb { background: var(--vpa-gold-dim); border-radius: 2px; }

.vpa-signal-item {
    background: linear-gradient(90deg, rgba(20,20,20,1) 0%, rgba(30,30,30,0) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left-width: 3px;
    padding: 1rem;
    position: relative;
    transition: transform 0.2s ease;
}

.vpa-signal-item:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.02);
}

/* Confidence Levels */
.vpa-signal-item.confidence-VERY_HIGH {
    border-left-color: var(--vpa-gold);
    box-shadow: inset 10px 0 20px -10px rgba(212, 175, 55, 0.1);
}
.vpa-signal-item.confidence-HIGH { border-left-color: var(--vpa-text-main); }
.vpa-signal-item.confidence-LOW { border-left-color: var(--vpa-text-muted); }

.vpa-signal-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.vpa-signal-title {
    font-family: var(--vpa-font-tech);
    font-weight: bold;
    color: var(--vpa-text-main);
    font-size: 0.9rem;
}

.vpa-signal-date {
    font-size: 0.75rem;
    color: var(--vpa-gold);
    opacity: 0.8;
}

.vpa-signal-description {
    font-size: 0.8rem;
    color: var(--vpa-text-muted);
    line-height: 1.4;
}

/* --- 8. Data Table (The Tank) --- */
.table-container {
    width: 100%;
    overflow-x: auto; /* Handles mobile scroll */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.vpa-data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--vpa-font-tech);
    font-size: 0.85rem;
    white-space: nowrap; /* Prevents wrapping on small screens */
}

.vpa-data-table th {
    background: rgba(255, 255, 255, 0.03);
    color: var(--vpa-gold);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 1rem;
    text-align: right;
    border-bottom: 1px solid var(--vpa-gold-dim);
}

.vpa-data-table td {
    padding: 0.85rem 1rem;
    color: var(--vpa-text-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    text-align: right;
    transition: background 0.2s;
}

.vpa-data-table tr:hover td {
    background: rgba(212, 175, 55, 0.05);
    color: var(--vpa-text-main);
}

.vpa-data-table th:first-child,
.vpa-data-table td:first-child {
    text-align: left;
    color: var(--vpa-text-main); /* Date is brighter */
}

/* Volume Color Logic helpers */
.text-green { color: var(--vpa-green) !important; }
.text-red { color: var(--vpa-red) !important; }

/* --- 9. Responsive Logic (Mobile) --- */
@media (max-width: 900px) {
    #vpa-grid {
        grid-template-columns: 1fr; /* Single column stack */
        gap: 1rem;
    }

    .vpa-card {
        padding: 1rem;
    }

    /* Fix Table on Mobile */
    .vpa-data-table {
        font-size: 0.8rem;
    }

    .vpa-data-table th, .vpa-data-table td {
        padding: 0.75rem 0.5rem;
    }

    /* On mobile, card is full screen width minus padding */
    .vpa-card.full-width {
        width: 100%;
        overflow-x: hidden; /* Container hides overflow */
    }

    /* Table container scrolls internally */
    .table-container {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* --- 3. S/R ZONES VIEW STYLES --- */
#sr-controls { margin-bottom: 1.5rem; }
#sr-zones-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1.5rem; }
.sr-zone-card { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-left-width: 4px; border-radius: 8px; padding: 1.5rem; display: flex; flex-direction: column; }
.sr-zone-card.resistance { border-left-color: var(--value-down); }
.sr-zone-card.support { border-left-color: var(--value-up); }
.sr-zone-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.sr-zone-title { font-size: 1.1rem; font-weight: 600; }
.sr-zone-price { font-size: 1.2rem; font-weight: 700; text-align: right; }
.sr-zone-price span { font-size: 0.8rem; color: var(--text-secondary); display: block; font-weight: 400; }
.sr-zone-strength { background-color: var(--bg-primary); padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; }
.sr-zone-body { margin-top: auto; border-top: 1px solid var(--border-color); padding-top: 1rem; }
.sr-zone-body-title { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.sr-zone-components { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sr-component-tag { background-color: var(--bg-primary); color: var(--text-secondary); padding: 3px 7px; border-radius: 4px; font-size: 0.75rem; }


/* --- 4. PATTERN RECOGNITION VIEW STYLES --- */
.pattern-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.summary-card { background-color: var(--bg-secondary); border: 1px solid var(--border-color); padding: 1.5rem; border-radius: 8px; text-align: center; }
.summary-card-title { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.summary-card-value { font-size: 1.75rem; font-weight: 600; line-height: 1; }
.summary-card-value.bullish { color: var(--value-up); }
.summary-card-value.bearish { color: var(--value-down); }
.patterns-main-layout { display: grid; grid-template-columns: 4fr 6fr; gap: 1.5rem; }
.patterns-list-container { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; height: 65vh; overflow-y: auto; }
.section-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); }
.pattern-card { background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; border-left: 4px solid var(--accent-primary); cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; }
.pattern-card:hover {
    background-color: var(--bg-secondary); /* <-- ADDED */
}
.pattern-card.active {
    background-color: var(--bg-secondary); /* <-- ADDED */
    box-shadow: 0 0 8px rgba(184, 134, 11, 0.7); /* <-- ADDED (accent glow) */
}
.pattern-card.is-bullish { border-left-color: var(--value-up); }
.pattern-card.is-bearish { border-left-color: var(--value-down); }
.pattern-card.is-neutral { border-left-color: var(--text-secondary); }
.pattern-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.pattern-title { font-weight: 600; font-size: 1rem; }
.pattern-confidence { font-size: 0.75rem; padding: 3px 8px; border-radius: 12px; background-color: var(--bg-secondary); font-weight: 500; }
.pattern-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; font-size: 0.85rem; }
.pattern-detail-item { color: var(--text-primary); }
.pattern-detail-item span { color: var(--text-secondary); margin-right: 5px; }
#pattern-chart-container {
    height: 100%;
    min-height: 500px; /* Give it a solid min-height */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex; /* <-- ADDED */
    flex-direction: column; /* <-- ADDED */
}.chart-and-levels-container { display: flex; flex-direction: column; }

/* --- 5. AVB INDICATOR VIEW STYLES --- */
#avb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.avb-card { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; }
.avb-card-title { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color); padding-bottom: 0.75rem; margin-bottom: 1rem; }
.avb-interpretation-card { grid-column: 1 / -1; border-left: 4px solid var(--accent-primary); margin-bottom: 1.5rem; }
.avb-interpretation-text { font-size: 1.25rem; font-weight: 500; line-height: 1.6; margin-bottom: 1rem; }
.avb-interpretation-details { display: flex; align-items: center; gap: 1.5rem; }
.avb-regime-tag { background-color: var(--accent-primary); color: var(--bg-primary); padding: 5px 12px; border-radius: 15px; font-weight: 700; font-size: 0.9rem; }
.avb-confidence-score { font-size: 1.1rem; font-weight: 600; }
.avb-confidence-score span { color: var(--text-secondary); font-weight: 400; font-size: 0.9rem; }
.avb-metric { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); }
.avb-metric:last-child { border-bottom: none; }
.avb-metric-label { color: var(--text-secondary); }
.avb-metric-value { font-weight: 600; }
.avb-position-bar { background-color: var(--bg-primary); border-radius: 4px; height: 10px; width: 100%; position: relative; margin-top: 5px; }
.avb-position-indicator { background-color: var(--accent-primary); height: 100%; border-radius: 4px; position: absolute; }
.avb-signal-list { display: flex; flex-direction: column; gap: 0.75rem; }
.avb-signal-tag { background-color: var(--bg-primary); color: var(--text-secondary); padding: 5px 10px; border-radius: 4px; font-size: 0.85rem; }

/* --- 6. QPS VIEW STYLES (NEW) --- */
.qps-dna-card { border-left: 4px solid var(--accent-primary); margin-bottom: 1.5rem; }
.qps-dna-text { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.qps-dna-subtext { font-size: 1rem; color: var(--text-secondary); }
#qps-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; }
.qps-chart-container { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; min-height: 450px; position: relative; }
#qps-positioning-map { height: 100%; width: 100%; }
.quadrant-label { position: absolute; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); opacity: 0.5; }
.quadrant-label.top-right { top: 1.5rem; right: 1.5rem; }
.quadrant-label.top-left { top: 1.5rem; left: 1.5rem; }
.quadrant-label.bottom-right { bottom: 1.5rem; right: 1.5rem; }
.quadrant-label.bottom-left { bottom: 1.5rem; left: 1.5rem; }

:root{
    /* === Base Palette: "Onyx & Gold" (The Classic) === */

    /* BACKGROUNDS: The Void */
    --bg-primary: #050505;              /* Ultra-deep Black */
    --bg-secondary: #121212;            /* Soft Matte Black for Cards */

    /* ACCENTS: The Gold Standard */
    --accent-primary: #D4AF37;          /* Metallic Gold */
    --border-color: #D4AF37;            /* Solid Gold Borders */

    /* TYPOGRAPHY: Crystal Clear */
    --text-primary: #FFFFFF;            /* Pure White */
    --text-secondary: #E0E0E0;          /* Off-White/Silver */

    /* INDICATORS (Strict Scheme) */
    --value-up: #FFD700;                /* Bright Gold (Profit) */
    --value-down: #FFFFFF;              /* White (Loss/Neutral) - keeping it monochrome */

    /* === ALIASES & FIXES === */

    /* Colors */
    --card-background: var(--bg-secondary);
    --card-bg-color: var(--bg-secondary);
    --background-secondary: var(--bg-secondary);

    /* Alpha: Slight transparency to let the void show through */
    --background-secondary-alpha: rgba(18, 18, 18, 0.9);

    --input-bg-color: #000000;          /* Pure Black inputs */
    --header-bg-color: var(--bg-primary); /* Seamless header */
    --chart-container-bg: var(--bg-primary);

    /* Text Mappings */
    --white: #FFFFFF;
    --text-color: var(--text-primary);
    --text-color-light: var(--text-primary);
    --text-color-secondary: var(--text-secondary);

    --accent-color: var(--accent-primary);
    --positive-color: var(--value-up);
    --negative-color: var(--value-down);

    /* Typography */
    --font-inter: 'Inter', sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    /* Sizing & Borders */
    --border-radius: 4px;               /* Subtle rounding for a polished feel */
    --border-radius-small: 2px;
}
.value-up { color: var(--value-up); }
.value-down { color: var(--value-down); }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); }
.container { max-width: 1800px; margin: 0 auto; padding: 0 1.5rem; }
.footer { padding: 1.5rem; text-align: center; color: var(--text-secondary); font-size: 0.8rem; border-top: 1px solid var(--border-color); margin-top: 1.5rem; }
.header-content {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Align everything to the left */
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem; /* Space between the Tabs row and the Controls row */
}

.header-branding { display: flex; align-items: center; gap: 15px; }
#vsl-logo { height: 40px; width: auto; }
.controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 2px; /* Align precisely with the first tab */
}
select { background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.875rem; cursor: pointer; }
.trade-button { background-color: var(--accent-primary); color: #000000; padding: 0.5rem 0.5rem; border-radius: 3px; text-decoration: none; font-weight: 600; font-size: 0.700rem; transition: opacity 0.2s ease; }
.trade-button:hover { opacity: 0.9; }
.kpi-item, .chart-container, .trade-plan-container, .indicator-chart-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
}
#kpi-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; margin-bottom: 1.5rem; }
.kpi-label { font-size: 0.8rem; color: var(--text-secondary); display: block; margin-bottom: 0.5rem; }
.kpi-value { font-size: 1.5rem; font-weight: 600; line-height: 1; }
.kpi-sub-value { font-size: 0.875rem; margin-left: 0.5rem; }
#welcome-message, #loader-container { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 70vh; }
.welcome-title { font-size: 1.75rem; font-weight: 600; margin-bottom: 0.5rem; }
.welcome-subtitle { color: var(--text-secondary); }
.main-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }

/* --- MODIFIED: Chart full-width, panels below --- */
.main-chart {
    grid-column: 1 / -1;
    min-height: 650px;
}
.right-panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.indicator-charts-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
    min-height: 350px; /* Adjusted height slightly */
}
.indicator-chart-container {
    height: 300px; /* Adjusted height slightly */
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.guidance-container { flex-grow: 0.25; }
.guidance-content { color: var(--text-secondary); font-size: 1.0rem; line-height: 1.6; text-align: justify;}
.trade-plan-grid {
    display: flex; /* Changed from grid */
    flex-direction: column; /* Stack scenarios vertically */
    gap: 1.25rem; /* Space between scenarios */
}

/* --- MARK XIII: INSTITUTIONAL COMMAND GRID --- */

/* 1. The Container (Invisible Wrapper) */
.guidance-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between Grid and Footer */
}

/* 2. The Data Grid */
.strat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columns */
    gap: 12px; /* Tight, professional gap */
    width: 100%;
}

/* 3. The Tactical Module (Card) */
.strat-card {
    background-color: #0b0c10; /* Deepest Black */
    border: 1px solid #1f2833; /* Dark Metal */
    border-radius: 2px; /* Sharp corners */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    min-height: 180px;
    transition: border-color 0.3s ease;
}

.strat-card:hover {
    border-color: rgba(212, 175, 55, 0.5); /* Gold Hover */
}

/* Tech Accent on Left */
.strat-card::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 2px;
    background-color: #222;
}
.strat-card:hover::before {
    background-color: var(--accent-primary);
}

/* 4. Module Header */
.strat-card-header {
    background: rgba(255, 255, 255, 0.02);
    padding: 10px 15px;
    border-bottom: 1px solid #1f2833;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.strat-card-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-primary); /* Gold */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 5. Module Body */
.strat-card-body {
    padding: 15px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #c5c6c7; /* Clean Grey-White */
    line-height: 1.5;
    flex-grow: 1;
}

/* Bold text inside body (Keywords) */
.strat-card-body strong {
    color: #fff;
    font-weight: 600;
}

/* 6. SPECIAL: Executive Summary (Hero Card) */
.strat-card.hero-card {
    grid-column: 1 / -1; /* Span Full Width */
    min-height: auto; /* Hug content */
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.03) 0%, rgba(11, 12, 16, 0) 100%);
    border: 1px solid rgba(212, 175, 55, 0.2);
}
.strat-card.hero-card .strat-card-body {
    font-size: 0.95rem; /* Slightly larger text */
    color: #fff;
}

/* 7. SPECIAL: Tactical Levels (Bottom Card) */
.strat-card.levels-card {
    grid-column: 1 / -1; /* Span Full Width */
    min-height: auto;
}
.strat-card.levels-card .strat-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
}

/* Level Rows */
.strat-level-row {
    display: flex;
    flex-direction: column;
    background: #111;
    padding: 8px 15px;
    border-left: 3px solid #555;
    border-radius: 0 4px 4px 0;
    min-width: 200px;
}
.strat-level-row.support { border-left-color: #00E676; }
.strat-level-row.resistance { border-left-color: #FF3131; }

.strat-level-label {
    font-size: 0.6rem;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.strat-level-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

/* 8. The Footer (Disclaimer) */
.strat-footer {
    background-color: #0a0a0a;
    border-top: 1px solid #222;
    padding: 10px;
    text-align: center;
}

.strat-disclaimer {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: #444; /* Dimmed */
    line-height: 1.3;
    max-width: 90%;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
    .strat-grid { grid-template-columns: 1fr; }
}
.scenario-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Space between label and text */
}

.scenario-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scenario-label.bullish { color: var(--value-up); }
.scenario-label.bearish { color: var(--value-down); }
.scenario-label.neutral { color: var(--text-secondary); }

.scenario-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: justify; /* Justify the paragraph text */
}

.scenario-disclaimer {
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
    text-align: center;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}
.chart-title { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 1rem; }
.main-chart-plot {
    flex-grow: 1;
    min-height: 300px;
    height: 100%;
}
.chart-title-container { display: flex; justify-content: space-between; align-items: center; }
.hidden { display: none !important; }
#loader { width: 50px; aspect-ratio: 1; border-radius: 50%; border: 8px solid var(--bg-secondary); border-right-color: var(--accent-primary); animation: l2 1s infinite linear; }
@keyframes l2 { to { transform: rotate(1turn) } }

/* --- LAYOUT OVERRIDES --- */

        /* 1. Force Main Chart to Full Width & Height */
        .main-chart-grid {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            grid-template-columns: 1fr !important;
        }
        .chart-and-title {
            width: 100% !important;
            height: 100% !important;
            display: flex;
            flex-direction: column;
        }

        /* 2. The Indicator Matrix (3x2 Grid) */
        .indicator-matrix {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 1rem; /* Tightened Gap */
            margin-bottom: 1.5rem;
            grid-column: 1 / -1;
        }

        /* 3. Black Gold Card Styling for Indicators */
        .indicator-card {
            background: linear-gradient(135deg, #050505 0%, #151515 100%);
            border: 1px solid rgba(212, 175, 55, 0.2);
            border-radius: 2px;
            padding: 1rem;
            padding-bottom: 0; /* Remove bottom padding - reading bar will handle it */
            height: 340px; /* Increased height to accommodate reading bar */
            display: flex;
            flex-direction: column;
            position: relative;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
            transition: border-color 0.3s ease;
            overflow: hidden; /* Prevent content overflow */
        }

        .indicator-card:hover {
            border-color: rgba(212, 175, 55, 0.6);
        }

        .indicator-card h3 {
            color: #D4AF37;
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.8rem;
            margin-top: 0;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.1);
            padding-bottom: 5px;
            display: flex;
            justify-content: space-between;
        }

        @media (max-width: 1024px) {
            .indicator-matrix { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .indicator-matrix { grid-template-columns: 1fr; }
        }

/* === END NEW SIMULATOR STYLES === */

.header-center {
    display: flex;
    flex-direction: row;      /* Force side-by-side */
    flex-wrap: nowrap;        /* DO NOT allow wrapping to new rows */
    overflow-x: auto;         /* Allow horizontal scrolling */
    overflow-y: hidden;       /* Prevent vertical spill */
    width: 100%;
    gap: 0.5rem;
    padding: 10px 0;

    /* Smooth scrolling for touch devices */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    /* Hide scrollbar for Chrome/Safari/Edge */
    &::-webkit-scrollbar {
        display: none;
    }
    /* Hide scrollbar for Firefox */
    scrollbar-width: none;
}

.tab-button { background-color: transparent; border: 2px solid transparent; color: var(--text-secondary); padding: 0.5rem 1.5rem; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 400; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; }
.tab-button.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.ticker-tape-container { width: 100%; background-color: var(--bg-primary); border-bottom: 1px solid var(--border-color); padding: 10px 0; overflow: hidden; }
.ticker-content { display: inline-block; white-space: nowrap; padding-left: 100%; animation: scroll-left 1200s linear infinite; }
.ticker-item { display: inline-block; margin: 0 25px; font-size: 0.9rem; color: var(--text-primary); }
.ticker-item .change { margin-left: 8px; font-weight: 600; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* ==========================================================================
   NEWS TICKER TAPE (HEADLINES)
   ========================================================================== */
.news-ticker-container {
    width: 100%;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.98) 0%, rgba(8, 10, 14, 0.98) 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    height: 32px;
}

.news-ticker-label {
    background: linear-gradient(135deg, #D4AF37 0%, #B8962E 100%);
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.news-ticker-label .news-icon {
    font-size: 12px;
    filter: grayscale(1) brightness(0);
}

.news-ticker-label .news-label-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #000;
    text-transform: uppercase;
}

.news-ticker-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.news-ticker-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, rgba(13, 17, 23, 1) 0%, rgba(13, 17, 23, 0) 100%);
    z-index: 2;
    pointer-events: none;
}

.news-ticker-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    background: linear-gradient(270deg, rgba(13, 17, 23, 1) 0%, rgba(13, 17, 23, 0) 100%);
    z-index: 2;
    pointer-events: none;
}

.news-ticker-content {
    display: inline-flex;
    white-space: nowrap;
    padding-left: 100%;
    animation: news-scroll 180s linear infinite;
    align-items: center;
    gap: 0;
}

.news-ticker-content:hover {
    animation-play-state: paused;
}

@keyframes news-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.news-item {
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #E0D9CC;
    border-right: 1px solid rgba(212, 175, 55, 0.15);
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none;
}

.news-item:hover {
    color: #D4AF37;
}

.news-item:last-child {
    border-right: none;
}

.news-item .news-source {
    font-family: 'Roboto Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #D4AF37;
    margin-right: 10px;
    text-transform: uppercase;
    opacity: 0.9;
}

.news-item .news-title {
    color: #E0D9CC;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-item .news-sentiment {
    margin-left: 10px;
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
}

.news-item .news-sentiment.bullish {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.news-item .news-sentiment.bearish {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.news-item .news-sentiment.neutral {
    background: rgba(156, 163, 175, 0.15);
    color: #9CA3AF;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.news-loading {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    color: #6B7280;
    padding: 0 20px;
    animation: pulse-opacity 1.5s ease-in-out infinite;
}

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

/* Light theme support for news ticker */
[data-theme="light"] .news-ticker-container {
    background: linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 100%);
    border-bottom-color: rgba(212, 175, 55, 0.3);
}

[data-theme="light"] .news-ticker-wrapper::before {
    background: linear-gradient(90deg, rgba(248, 249, 250, 1) 0%, rgba(248, 249, 250, 0) 100%);
}

[data-theme="light"] .news-ticker-wrapper::after {
    background: linear-gradient(270deg, rgba(248, 249, 250, 1) 0%, rgba(248, 249, 250, 0) 100%);
}

[data-theme="light"] .news-item .news-title {
    color: #1F2937;
}

[data-theme="light"] .news-loading {
    color: #9CA3AF;
}

.guidance-button-box { margin-top: 15px; text-align: left; width: 100%; }
.btn { display: inline-block; padding: 10px 9px; border-radius: 5px; font-size: 0.9em; cursor: pointer; text-decoration: none; text-align: center; transition: background-color 0.3s ease; border: none; line-height: normal; }
.btn-primary { background-color: var(--accent-primary); color: #000; font-weight: 600; }
.btn-primary:hover { opacity: 0.9; }

/* ==========================================================================
   STRUCTURAL ANALYSIS (S/R) - "EXECUTIVE STACK" LAYOUT
   ========================================================================== */

/* --- 1. Main Container (Adaptive) --- */
#sr-chart-container {
    /* Base Desktop Styles */
    width: 100%;
    min-height: 400px; /* Default height */

    /* Black Gold Theme Background */
    background: linear-gradient(180deg, rgba(20, 24, 30, 0.95) 0%, rgba(13, 17, 23, 0.95) 100%);
    border: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    padding: 10px;

    position: relative;
    overflow: hidden; /* Contains the chart */
    box-sizing: border-box; /* Prevents padding from breaking width */

    /* Tech Grid Texture */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}


/* --- 3. ModeBar Customization (Gold Icons) --- */
.modebar-btn svg path {
    fill: rgba(212, 175, 55, 0.6) !important;
}
.modebar-btn.active svg path,
.modebar-btn:hover svg path {
    fill: #D4AF37 !important;
}

/* --- 4. Loading Animation --- */
.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px; /* Placeholder height */
    width: 100%;
    color: #D4AF37;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    letter-spacing: 1px;
    background: rgba(0,0,0,0.2);
}

/* --- 5. RESPONSIVE BREAKPOINTS --- */

/* Tablet (Portrait) & Large Phones */
@media (max-width: 768px) {
    #sr-chart-container {
        min-height: 350px; /* Slightly shorter on tablet */
        padding: 5px;      /* Less padding to maximize chart area */
        border-radius: 4px;
        background-size: 15px 15px; /* Tighter grid pattern */
    }
}

/* Mobile (Small Screens) */
@media (max-width: 480px) {
    #sr-chart-container {
        min-height: 300px; /* Compact height for mobile scrolling */
        border-width: 0;   /* Optional: Remove border on very small screens for edge-to-edge feel */
        border-radius: 0;
        box-shadow: none;  /* Simplify performance on low-end mobiles */
    }

    /* Make the loading text smaller */
    .chart-loading {
        font-size: 0.75rem;
        height: 250px;
    }
}
/* 3. SECTION 2: Analyst Insight (Middle) */
.sr-analyst-card {
    width: 100%; /* Full width strip */
    background: linear-gradient(180deg, rgba(20, 24, 30, 0.95) 0%, rgba(13, 17, 23, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15); /* Gold Border */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Lifted effect */
    border-radius: 6px;
    padding: 0;

    /* Tech Grid Background */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 4. SECTION 3: Zones Grid (Bottom) */
#sr-content {
    display: grid;
    /* Create a dense grid of tactical cards */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* --- RE-USABLE COMPONENT STYLES --- */

/* The Insight HUD Header */
.sr-terminal-header {
    background: rgba(30, 35, 45, 0.9);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding: 12px 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.sr-terminal-title {
    font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 700;
    color: var(--accent-primary); text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
}

/* The Insight HUD Body */
.sr-terminal-body {
    padding: 25px;
    font-size: 1rem; /* Slightly larger text for readability */
    line-height: 1.7;
    color: #c9d1d9;
    columns: 2; /* Split text into 2 columns for professional magazine look */
    column-gap: 3rem;
    column-rule: 1px solid rgba(255,255,255,0.1);
}
/* On mobile, revert text to 1 column */
@media (max-width: 768px) {
    .sr-terminal-body { columns: 1; }
}

/* The HUD Metrics (Top Bar of Insight) */
.sr-hud-grid.v2 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sr-hud-panel { padding: 15px 25px; background: rgba(10,10,10,0.5); }
.sr-hud-center { padding: 0 30px; border-left:1px solid rgba(255,255,255,0.05); border-right:1px solid rgba(255,255,255,0.05); display:flex; flex-direction:column; justify-content:center; align-items:center; }

/* The Tactical Zone Cards */
.sr-card {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--text-secondary);
    border-radius: 4px;
    padding: 15px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
}
.sr-card:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}
.sr-zone-header { display: flex; justify-content: space-between; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; }
.sr-zone-type { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); }
.sr-zone-price { font-family: 'JetBrains Mono', monospace; font-size: 1.2rem; font-weight: 600; color: var(--text-primary); }

/* --- 5. STARK INDUSTRIES AVB INDICATOR OVERHAUL --- */
/* --- MARK III: STARK HUD INTERFACE --- */

/* 1. GLOBAL PANEL STYLES */
.avb-main-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 Chart, 1/3 Data */
    gap: 20px;
    margin-top: 20px;
    padding: 10px;
}

#avb-content-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 600px; /* Aligned with chart */
    overflow-y: auto;
}

/* The Panel Base */
.stark-panel {
    background: rgba(10, 12, 16, 0.85); /* Deepest space grey */
    border: 1px solid rgba(255, 215, 0, 0.15); /* Faint gold border */
    position: relative;
    padding: 20px;
    backdrop-filter: blur(8px);
    /* Tech Corner Cut */
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        0 100%
    );
    transition: all 0.3s ease;
}

.stark-panel:hover {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.05);
}

/* DECORATION: The "Tech bracket" in top left */
.stark-panel::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 20px; height: 20px;
    border-top: 2px solid var(--accent-primary);
    border-left: 2px solid var(--accent-primary);
}

/* TYPOGRAPHY */
.stark-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--accent-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* The thin line next to title */
.stark-title::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-primary) 0%, transparent 100%);
    opacity: 0.3;
}

.stark-value-lg {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.8rem;
    font-weight: 300; /* Thin is more "tech" */
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.stark-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 2. THE TOP "HEADS UP" DISPLAY (Confidence) */
.stark-hud-top {
    display: flex;
    align-items: center;
    gap: 20px;
}

.stark-arc-container {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* SVG Circular Progress overrides */
.stark-progress-ring__circle {
    transition: stroke-dashoffset 0.8s ease-in-out;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-linecap: butt; /* Square ends look more tech */
}

/* 3. THE TEXT BLOCK */
.stark-text-block {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    color: #bbb;
    border-left: 2px solid var(--accent-primary);
    padding-left: 15px;
    margin-top: 10px;
}
.stark-highlight {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(255,255,255,0.2);
}

/* 4. THE TELEMETRY BARS (Precision Style) */
.stark-bar-container {
    margin-bottom: 15px;
}
.stark-bar-track {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    position: relative;
    margin: 8px 0;
}
/* Tick marks */
.stark-bar-track::before {
    content: '| | | | | | | | |';
    position: absolute;
    top: -8px; left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    font-family: monospace;
    font-size: 6px;
    color: rgba(255,255,255,0.2);
}

.stark-bar-fill {
    height: 100%;
    background: var(--accent-primary);
    box-shadow: 0 0 10px var(--accent-primary);
    position: relative;
}

/* The "Diamond" slider head */
.stark-slider-head {
    width: 8px; height: 8px;
    background: #fff;
    transform: rotate(45deg);
    position: absolute;
    top: -2px;
    box-shadow: 0 0 5px #fff;
}

/* 5. SIGNAL GRID (Compact) */
.stark-signal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.stark-signal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.03);
    padding: 8px 12px;
    border-left: 2px solid #444;
}
.stark-signal-item.bullish { border-color: #00FF99; }
.stark-signal-item.bearish { border-color: #FF3131; }

.stark-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
    background: rgba(255,255,255,0.1);
    color: #aaa;
}

/* --- SCOPED VARIABLES (Safe for Radar Only) --- */
/* Instead of :root, we attach these to the main container ID */
#radar-view {
    --accent-primary: #B8860B; /* Dark Goldenrod */
    --accent-glow: rgba(184, 134, 11, 0.35);
    --bg-panel: rgba(10, 10, 10, 0.85);
    --text-primary: #E0E0E0;
    --font-tech: 'Share Tech Mono', 'Courier New', monospace;
    --value-up: #4caf50;
    --value-down: #ff4444;
}

/* 1. Main Grid Layout */
.radar-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 1.5rem;
    margin-top: 1.5rem;

    /* Use the variables we defined above */
    font-family: var(--font-tech);
    color: var(--text-primary);
    position: relative;
}

/* Responsive Stack */
@media (max-width: 900px) {
    .radar-main-layout {
        grid-template-columns: 1fr;
    }
}

/* 2. Side Panel Container (The "Data Feed") */
#radar-content-container {
    display: flex;
    flex-direction: column;
    gap: 1.0rem;
    height: 550px;
    overflow-y: auto;
    padding: 12px;
    position: relative;

    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.9);

    /* "Tech Corners" using the scoped accent color */
    background-image:
        linear-gradient(var(--accent-primary), var(--accent-primary)),
        linear-gradient(var(--accent-primary), var(--accent-primary)),
        linear-gradient(var(--accent-primary), var(--accent-primary)),
        linear-gradient(var(--accent-primary), var(--accent-primary));
    background-repeat: no-repeat;
    background-size: 2px 15px, 15px 2px;
    background-position: 0 0, 0 0, 100% 100%, 100% 100%;
}

/* Custom Scrollbar */
#radar-content-container::-webkit-scrollbar { width: 5px; }
#radar-content-container::-webkit-scrollbar-track { background: #0a0a0a; }
#radar-content-container::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}
#radar-content-container:hover::-webkit-scrollbar-thumb { background: var(--accent-primary); }

/* 3. Hero Score Card (System Status) */
.radar-score-card {
    background: linear-gradient(160deg, #1a1a1a 0%, #050505 100%);
    border: 1px solid #333;
    border-left: 4px solid var(--accent-primary);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 95% 100%, 0 100%);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    margin-bottom: 0.5rem;
}

.radar-score-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(to bottom, transparent, rgba(184, 134, 11, 0.1), transparent);
    animation: hud-scanline 3s ease-in-out infinite;
    pointer-events: none;
}

/* Score Card Layout */
.radar-score-card .card-context {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.radar-score-card .card-label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.radar-score-card .card-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
}
.radar-score-card .score-container {
    text-align: right;
    line-height: 1;
}
.radar-score-card .score-val {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -1px;
    text-shadow: 0 0 15px var(--accent-glow);
}
.radar-score-card .score-max {
    font-size: 1rem;
    color: #666;
    vertical-align: super;
}

/* Visual Tick Meter */
.score-meter {
    display: flex;
    gap: 3px;
    margin-top: 8px;
    justify-content: flex-end;
}
.score-meter .tick {
    width: 6px;
    height: 10px;
    background-color: #222;
    transform: skewX(-20deg);
    border: 1px solid #333;
    transition: all 0.3s;
}

/* 4. Signal List */
.radar-list-header {
    font-size: 0.75rem;
    color: #FFFFFF; /* Forced White */
    margin: 15px 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid #222;
    padding-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.radar-signal-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* 5. Signal Items ("Chips") */
.radar-signal-item {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background-color: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 2px solid #333;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 96% 100%, 0 100%);
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    cursor: default;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.radar-signal-item:hover {
    transform: translateX(4px);
    background-color: rgba(40, 40, 40, 0.9);
}

/* --- SENTIMENT STATES --- */

/* BULLISH (Gold) */
.radar-signal-item.sentiment-bullish {
    border-left-color: var(--accent-primary);
    color: var(--accent-primary);
}
.radar-signal-item.sentiment-bullish .signal-icon {
    filter: drop-shadow(0 0 5px var(--accent-primary));
}
.radar-signal-item.sentiment-bullish::after {
    content: '▲ OPTIMAL';
    font-size: 0.65rem;
    font-weight: 700;
    color: #000;
    background: var(--accent-primary);
    padding: 2px 6px;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    margin-left: auto;
}

/* BEARISH (White) */
.radar-signal-item.sentiment-bearish {
    border-left-color: #FFF;
    color: #FFF;
    background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, transparent 80%);
}
.radar-signal-item.sentiment-bearish:hover {
    text-shadow: 0 0 5px rgba(255,255,255,0.5);
}
.radar-signal-item.sentiment-bearish::after {
    content: '▼ ALERT';
    font-size: 0.65rem;
    font-weight: 700;
    border: 1px solid #FFF;
    color: #FFF;
    padding: 1px 5px;
    margin-left: auto;
}

/* NEUTRAL (Gold - Visible / Idle) */
.radar-signal-item.sentiment-neutral {
    border-left-color: var(--accent-primary);
    color: var(--accent-primary);
    background: linear-gradient(90deg, rgba(184, 134, 11, 0.05) 0%, transparent 100%);
}
.radar-signal-item.sentiment-neutral .signal-icon {
    color: var(--accent-primary);
    opacity: 0.8;
}
.radar-signal-item.sentiment-neutral::after {
    content: '— IDLE';
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--accent-primary);
    opacity: 0.8;
    margin-left: auto;
}

/* ANIMATIONS */
@keyframes hud-scanline {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(200%); opacity: 0; }
}
@keyframes signal-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 5px currentColor; }
    50% { opacity: 0.6; text-shadow: none; }
}

/* ==========================================================================
   8. STRATEGY BRIEFING: INSTITUTIONAL EXECUTIVE STANDARD (CLEAN)
   ========================================================================== */

/* --- A. THE VIEWPORT --- */
#briefing-view {
    background-color: #050505;
    padding: 1.0rem;
    min-height: 85vh;
    border-top: 0.5px solid rgba(212, 175, 55, 0.2);
    /* Subtle background texture for the whole "bay" */
    background-image:
        radial-gradient(circle at top right, rgba(212, 175, 55, 0.03) 0%, transparent 40%);
}

#briefing-content-container {
    margin-top: 1.5rem;
}

#briefing-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

#briefing-view .view-title {
    font-family: 'JetBrains Mono', monospace; /* Tech Font */
    font-size: 2rem; /* Much larger and authoritative */
    font-weight: 700;
    color: #D4AF37; /* Institutional Gold */
    text-transform: uppercase;
    letter-spacing: 2px; /* Cinematic spacing */
    margin: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1px;

    /* The "Luxury" Glow */
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.25);
}

/* --- B. TELEMETRY CARDS (The "Edge" Styling) --- */
#briefing-view .narrative-card,
#briefing-view .analysis-card {
    background-color: #121212;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    padding: 2rem;
    position: relative; /* Essential for corner brackets */
    box-shadow: none;
    transition: all 0.3s ease;
}

/* Hover: Border lights up Gold */
#briefing-view .narrative-card:hover,
#briefing-view .analysis-card:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background-color: #151515;
}

/* THE "FLIGHT DECK" CORNER BRACKETS */
/* Top-Left & Bottom-Right Brackets */
#briefing-view .narrative-card::before,
#briefing-view .analysis-card::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px;
    width: 20px; height: 20px;
    border-top: 2px solid #D4AF37;   /* Gold Top */
    border-left: 2px solid #D4AF37;  /* Gold Left */
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Bottom-Right Bracket via After (mirrored) */
#briefing-view .narrative-card::after,
#briefing-view .analysis-card::after {
    content: "";
    position: absolute;
    bottom: -1px; right: -1px;
    width: 20px; height: 20px;
    border-bottom: 2px solid #D4AF37; /* Gold Bottom */
    border-right: 2px solid #D4AF37;  /* Gold Right */
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* Hover brightens the brackets */
#briefing-view .narrative-card:hover::before,
#briefing-view .analysis-card:hover::before,
#briefing-view .narrative-card:hover::after,
#briefing-view .analysis-card:hover::after {
    opacity: 1;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

/* --- C. TYPOGRAPHY --- */
#briefing-view .card-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #D4AF37;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    padding-bottom: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Tech Accent in Header (The "System Blip") */
#briefing-view .card-title::before {
    content: "";
    display: block;
    width: 4px; height: 12px;
    background-color: #D4AF37;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.briefing-text-content {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #c9d1d9; /* High-readability silver */
    line-height: 1.7;
    text-align: justify;
}

.briefing-text-content p {
    margin-bottom: 1.25rem;
}

.briefing-text-content strong {
    color: #ffffff;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace; /* Tech font for data points */
    font-size: 0.9em; /* Slight adjustment to match flow */
}

/* --- D. STRATEGIC OUTLOOK ITEMS (Checklist Style) --- */
.strategy-outlook-item {
    margin-bottom: 1.25rem;
    padding-left: 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease;
}

.strategy-outlook-item:hover {
    border-left-color: #D4AF37;
}

.strategy-outlook-item h5 {
    font-size: 0.85rem;
    color: #D4AF37; /* Gold Header */
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'JetBrains Mono', monospace;
}

/* --- E. EXECUTIVE SUMMARY (HERO CARD) --- */
#briefing-content .narrative-card:first-child,
#briefing-content .analysis-card:first-child {
    grid-column: 1 / -1;
    background: linear-gradient(180deg, rgba(20, 20, 20, 1) 0%, rgba(13, 17, 23, 1) 100%);
    border-left: 4px solid #D4AF37; /* Strong Gold Indicator */
}

/* --- F. VOLATILITY CONE CHART (The "Black Gold Terminal" Look) --- */
#vol-cone-chart-container {
    min-height: 350px;
    position: relative;
    width: 100%;

    /* Deep Matte Black Background */
    background: linear-gradient(135deg, #050505 0%, #151515 100%);

    /* Metallic Gold Border */
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(212, 175, 55, 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 1rem;
}

/* Ticker Tape Grid Overlay */
#vol-cone-chart-container::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image:
        linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
    background-size: 25px 25px;
    pointer-events: none;
    z-index: 1;
}

/* Corner Cutouts (Tech Shape) */
#vol-cone-chart-container::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid rgba(255, 215, 0, 0.2);
    /* The "Corner Cut" Clip Path for that Flight Telemetry look */
    clip-path: polygon(
        0 10px, 10px 0, 30px 0, 30px 1px, 100% 1px,
        100% calc(100% - 10px), calc(100% - 10px) 100%, calc(100% - 30px) 100%, calc(100% - 30px) calc(100% - 1px), 0 calc(100% - 1px)
    );
    pointer-events: none;
    z-index: 2;
}

#vol-cone-chart {
    height: 300px;
    width: 100%;
    position: relative;
    z-index: 3; /* Lift chart above grid */
}

/* --- G. RESPONSIVE --- */
@media (max-width: 1024px) {
    #briefing-content {
        grid-template-columns: 1fr;
    }
}
/* --- SIMPLIFIED VPA NARRATIVE STYLES --- */
.vpa-narrative-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.vpa-narrative-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.vpa-narrative-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.vpa-narrative-content {
    width: 100%;
}

.vpa-analyst-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: justify;
}



/* Responsive adjustments */
@media (max-width: 768px) {
    .vpa-narrative-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .vpa-narrative-container {
        padding: 1rem;
    }
}
/* === RESPONSIVE DESIGN - PORTRAIT ORIENTATION FIXES === */

/* Tablet and smaller devices */
@media (max-width: 1024px) {
    .main-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .main-chart,
    .right-panel {
        grid-column: 1 / -1;
    }

    .right-panel {
        grid-template-columns: 1fr;
    }

    .indicator-charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Fix plexus homepage height */
    #home-view {
        height: 50vh;
        min-height: 400px;
    }

    .plexus-title {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    /* Fix grid layouts */
    #vpa-grid,
    #avb-grid,
    #qps-grid,
    .vpa-metrics-grid {
        grid-template-columns: 1fr;
    }

    .patterns-main-layout,
    .sr-main-layout,
    .avb-main-layout,
    .radar-main-layout,
    #briefing-content {
        grid-template-columns: 1fr;
    }
}

/* Mobile devices and portrait orientation */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    /* Adjust chart containers */
    .main-chart,
    .qps-chart-container,
    .patterns-list-container,
    #pattern-chart-container,
    #sr-chart-container,
    #avb-chart-container,
    #radar-chart-container {
        min-height: 400px;
        height: auto;
    }

    /* Fix card padding for mobile */
    .vpa-card,
    .avb-card,
    .sr-zone-card,
    .pattern-card,
    .summary-card,
    .kpi-item,
    .chart-container,
    .guidance-container,
    .trade-plan-container,
    .indicator-chart-container {
        padding: 1rem;
    }

    /* Adjust text sizes */
    .plexus-title {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }

    .plexus-subtitle {
        font-size: 0.9rem;
    }

    .view-title {
        font-size: 1.5rem;
    }

    /* Fix header layout */
    .header-content {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
    }

    .header-center {
        order: -1;
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .controls {
        width: 100%;
        justify-content: space-between;
    }

    .tab-button {
        padding: 0.5rem 1rem;
        font-size: 0.7rem;
    }

    /* Adjust KPI bar */
    #kpi-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .kpi-value {
        font-size: 1.25rem;
    }

    /* Fix simulator */
    .trade-simulator-container {
        height: auto;
        min-height: 300px;
    }

    .simulator-buttons {
        grid-template-columns: 1fr;
    }

    /* Adjust indicator charts */
    .indicator-charts-grid {
        grid-template-columns: 1fr;
    }

    .indicator-chart-container {
        height: 250px;
    }

    /* Fix view header controls */
    .view-header-controls {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    /* Adjust pattern details */
    .pattern-details-grid {
        grid-template-columns: 1fr;
    }

    /* Fix gauge sizes */
    .avb-gauge {
        width: 150px;
        height: 75px;
    }

    .avb-gauge-bg,
    .avb-gauge-fill {
        width: 150px;
        height: 75px;
    }

    .avb-gauge-cover {
        width: 120px;
        height: 60px;
        top: 15px;
        left: 15px;
    }

    /* Ensure images are responsive */
    #vsl-logo {
        height: 30px;
    }

    /* Adjust legend and lists */
    .vpa-legend-list {
        grid-template-columns: 1fr;
    }

    .vpa-signal-metrics {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Prevent horizontal scrolling */
    body {
        overflow-x: hidden;
    }

    /* Ensure all containers respect viewport */
    .container {
        width: 100%;
        max-width: 100vw;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    #kpi-bar {
        grid-template-columns: 1fr;
    }

    .header-center {
        gap: 0.25rem;
    }

    .tab-button {
        padding: 0.5rem 0.75rem;
        font-size: 0.65rem;
    }

    .plexus-title {
        font-size: 1.25rem;
    }

    .plexus-subtitle {
        font-size: 0.8rem;
    }

    .trade-button {
        font-size: 0.6rem;
        padding: 0.4rem 0.4rem;
    }
}

/* Portrait orientation specific fixes */
@media (max-width: 768px) and (orientation: portrait) {
    #home-view {
        height: 40vh;
        min-height: 300px;
    }

    .main-chart {
        min-height: 350px;
    }

    .patterns-list-container {
        height: 50vh;
    }

    #avb-content-container,
    #radar-content-container {
        height: 500px;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    #home-view {
        height: 60vh;
    }

    .main-chart {
        min-height: 450px;
    }
}

/* High-resolution displays */
@media (min-width: 1400px) {
    .container {
        max-width: 95vw;
    }
}

/* Ensure images and canvases are responsive */
img, canvas {
    max-width: 100%;
    height: auto;
}

/* Make sure text doesn't overflow */
.view-title, .plexus-title, .vpa-card-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Flexible font sizes */
:root {
    font-size: 16px;
}

@media (max-width: 768px) {
    :root {
        font-size: 14px;
    }
}

/* Ensure tables are responsive */
.vpa-data-table {
    width: 100%;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

/* Fix for ticker tape on mobile */
@media (max-width: 768px) {
    .ticker-item {
        margin: 0 15px;
        font-size: 0.8rem;
    }

    .ticker-content {
        animation-duration: 300s; /* Faster on mobile */
    }
}

/* Fix for plexus animation on mobile */
@media (max-width: 768px) {
    #plexus-canvas {
        transform: scale(1.1); /* Slightly scale up to prevent gaps */
    }
}

/* Fix for indicator chart containers */
.indicator-chart-container {
    height: 300px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    position: relative; /* Added for better containment */
}

.indicator-chart {
    height: 100%;
    width: 100%;
    flex-grow: 1;
    min-height: 0; /* Critical for flex containment */
}

/* Ensure Plotly charts respect container boundaries */
.js-plotly-plot .plotly .main-svg {
    overflow: hidden !important;
}

.js-plotly-plot .plotly .main-svg foreignObject {
    overflow: hidden !important;
}

/* === VPA NARRATIVE STYLING === */

/* Targets the main intro paragraph */
#vpa-analyst-text p:first-of-type {
    font-size: 1.0rem;
    color: var(--text-primary);
    line-height: 1.7;
}

/* Targets all subsequent paragraphs */
#vpa-analyst-text p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

/* Main section headings (e.g., "Market Structure & Context") */
#vpa-analyst-text h4 {
    font-size: 1.0rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Sub-headings (e.g., "Immediate (1-3 Days)") */
#vpa-analyst-text h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

/* Bullet point lists */
#vpa-analyst-text ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

#vpa-analyst-text li {
    padding-left: 0.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.value-up { color: var(--value-up); }
.value-down { color: var(--value-down); }
.value-neutral { color: var(--text-secondary); }


/* --- 1. Main Layout --- */
#mc-view {
    padding: 1.5rem; /* Padding for the whole view */
}

.mc-main-layout {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1-part controls, 2-parts data */
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* --- 2. Left Control Panel --- */
.mc-controls-panel {
    background-color: var(--card-background);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Space between "Parameters" and "Metrics" sections */
    min-width: 300px;
    height: fit-content; /* Panel height shrinks to content */
}

.mc-section-title {
    font-size: 1.1rem; /* Was 1.2rem, slightly smaller */
    font-weight: 600;
    color: var(--text-primary); /* Was --text-color-light */
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}

/* --- 3. Styled Inputs & Button --- */
.mc-control-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.mc-control-group label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.mc-control-group input[type="number"] {
    background-color: var(--bg-primary); /* Darker input bg */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    padding: 0.75rem 0.8rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: var(--font-mono);
    width: 100%;
}

.mc-control-group input[type="number"]:focus {
    border-color: var(--accent-primary);
    outline: none;
    box-shadow: 0 0 5px rgba(184, 134, 11, 0.5);
}

.mc-run-button {
    width: 100%; /* Make button full-width */
    margin-top: 0.5rem;
}

/* --- 4. Stats Grid (Inside Control Panel) --- */
.mc-stats-grid {
    display: grid;
    /* Responsive columns: 2 on small, 1 on very small */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1.25rem;
}

/* We must override .kpi-item padding for this new grid */
#mc-view .kpi-item {
    padding: 0; /* Remove padding */
    background: none; /* Remove card background */
    border: none; /* Remove border */
}

#mc-view .kpi-label {
    font-size: 0.8rem;
}
#mc-view .kpi-value {
    font-size: 1.25rem; /* Slightly smaller to fit */
}

/* Color logic for Stats */
.mc-stats-grid #mc-prob-profit.value-up { color: var(--value-up); }
.mc-stats-grid #mc-prob-profit.value-down { color: var(--value-down); }
.mc-stats-grid #mc-prob-profit.value-neutral { color: var(--text-primary); }
.mc-stats-grid #mc-mean-target-price.value-up { color: var(--value-up); }
.mc-stats-grid #mc-mean-target-price.value-down { color: var(--value-down); }
.mc-stats-grid #mc-var,
.mc-stats-grid #mc-cvar {
    color: var(--value-down);
}


/* --- 5. Right Data Panel (FIXED FOR STACKED LAYOUT) --- */
.mc-charts-data-panel {
    display: grid;
    grid-template-columns: 1fr; /* CHANGED: Forces single column stack */
    gap: 1.5rem;
}

/* Card style for charts */
.mc-chart-box {
    width: 100%; /* Ensures charts take full width like the table */
    background-color: var(--card-background);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    min-height: 400px;
    /* Removed grid-column: span 1; as it's no longer needed in a 1-column layout */
}

.mc-chart-box-title {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
}

.mc-chart {
    height: 350px;
    width: 100%;
}

/* --- 6. Upgraded Table Styling (FIXED FOR UNIFORM LAYOUT) --- */
.mc-percentile-table-container {
    grid-column: 1 / -1; /* Spans full width (both columns) */
    background-color: var(--card-background);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    overflow-x: auto; /* Responsive table */
}

.mc-percentile-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.mc-percentile-table th {
    background-color: var(--background-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8em;
    padding: 0.75rem 1rem;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-color);
}

.mc-percentile-table td {
    padding: 0.8rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.mc-percentile-table tbody tr:nth-child(odd) td {
    background-color: var(--background-secondary-alpha);
}

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

.mc-percentile-table th:first-child,
.mc-percentile-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--text-primary);
}

.mc-percentile-table th:nth-child(n+2) {
    text-align: right;
}

/* === MONTE CARLO REPORT STYLES === */
#mc-report-container {
    grid-column: 1 / -1; /* Full width */
    margin-bottom: 1.5rem;
}

.mc-report-box {
    background-color: var(--bg-primary); /* Darker background */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    font-family: 'Inter', sans-serif;
}

.mc-report-header {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-primary);
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

.mc-report-overview {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.mc-section-header {
    border-left: 3px solid var(--accent-primary);
    padding-left: 0.75rem;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    text-transform: uppercase;
}

.mc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.mc-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.mc-card-inset {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
}

.mc-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.mc-value-lg {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.mc-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Threshold Cards */
.mc-threshold-card {
    background-color: var(--bg-secondary);
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mc-price-lg {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.mc-pct {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.mc-bar-up { height: 3px; background-color: var(--value-up); width: 100%; margin-top: 10px; }
.mc-bar-mid { height: 3px; background-color: #FFD700; width: 100%; margin-top: 10px; }
.mc-bar-down { height: 3px; background-color: var(--value-down); width: 100%; margin-top: 10px; }

/* Mandate Section */
.mc-mandate-box {
    background-color: rgba(178, 34, 34, 0.15); /* Reddish tint background for Alert */
    border: 1px solid var(--value-down);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.mc-rr-ratio {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.mc-alert {
    font-size: 1.1rem;
    font-weight: 700;
}
.mc-alert.value-up { color: var(--value-up); }
.mc-alert.value-down { color: var(--value-down); }
.mc-alert.value-neutral { color: var(--text-primary); }

.mc-execution-box {
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #FFD700; /* Gold text */
    background-color: rgba(184, 134, 11, 0.05);
}

@media (max-width: 768px) {
    .mc-grid-2, .mc-grid-3 { grid-template-columns: 1fr; }
}

.mc-percentile-table td:nth-child(n+2) {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.9em;
}

.mc-percentile-table td.value-up { color: var(--value-up); }
.mc-percentile-table td.value-down { color: var(--value-down); }
.mc-percentile-table td.value-neutral { color: var(--text-secondary); }


/* --- 7. Responsive Adjustments --- */
@media (max-width: 1200px) {
    .mc-main-layout {
        grid-template-columns: 1fr; /* Stack panels vertically */
    }
}

/* Ensure mobile stacking works for the charts data panel */
@media (max-width: 1024px) {
    .mc-charts-data-panel {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   9. HEDGE FUND STYLE MARKET MAP (TREEMAP) - MONARCH HUD EDITION
   Theme: Obsidian | Gold | Titanium White
   Project: MONARCH Ecosystem (Griffin Engine / RAZIEL / PRIMUS)
   ============================================================ */

:root {
    --hud-gold: #D4AF37;         /* Institutional Gold */
    --hud-gold-glow: rgba(212, 175, 55, 0.4);
    --hud-black: #050505;        /* Deep Obsidian */
    --hud-white: #FFFFFF;        /* Titanium White */
    --hud-border: rgba(212, 175, 55, 0.2);
    --scanline-opacity: 0.04;
}

/* A. The View Container - Full Screen Integration */
#treemap-view {
    display: flex;
    flex-direction: column;
    height: 85vh;
    padding: 2rem 1.5rem 1rem 1.5rem;
    background-color: var(--hud-black);
    position: relative;
    overflow: hidden;
}

/* Technical Grid Overlay */
#treemap-view::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(var(--hud-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--hud-border) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* B. The Header - Technical Status Bar */
#treemap-view .view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--hud-gold);
    z-index: 2;
    position: relative;
    box-shadow: 0 4px 10px -5px var(--hud-gold-glow);
}

/* Bracket Accents */
#treemap-view .view-header::before {
    content: "«";
    position: absolute;
    left: -15px;
    bottom: 5px;
    color: var(--hud-gold);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem;
}

#treemap-view .view-header::after {
    content: "»";
    position: absolute;
    right: -15px;
    bottom: 5px;
    color: var(--hud-gold);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem;
}

#treemap-view .view-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--hud-gold);
    text-shadow: 0 0 15px var(--hud-gold-glow);
    margin: 0;
}

#treemap-view .view-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--hud-white);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
}

/* C. The Chart Container - "The Glass Cockpit" */
#treemap-chart-container {
    flex-grow: 1;
    width: 100%;
    position: relative;
    background-color: rgba(0, 0, 0, 0.9);
    border: 1px solid var(--hud-border);
    box-shadow: 0 0 50px rgba(0, 0, 0, 1), inset 0 0 30px rgba(212, 175, 55, 0.03);
    z-index: 2;
    overflow: hidden;
}
#treemap-chart-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 50%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.03) 0%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 6;
}
/* Animated Scanlines - Moving slowly for "Live" feel */
#treemap-chart-container::after {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(212, 175, 55, 0.05) 3px,
        transparent 3px
    );
    background-size: 100% 4px;
    animation: scanline-scroll 20s linear infinite;
}

/* D. The Chart Canvas */
#treemap-chart {
    animation: monitor-flicker 0.15s infinite secondary;
    filter: saturate(1.4) contrast(1.1) drop-shadow(0 0 2px var(--hud-gold-glow));
}

/* E. Loading State - System Boot Sequence */
#treemap-chart .chart-loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: var(--hud-black);
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100;
}

#treemap-chart .loading-text {
    color: var(--hud-gold);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    animation: terminal-flicker 2s infinite;
}

#treemap-chart .loading-bar-container {
    width: 250px;
    height: 1px;
    background: rgba(212, 175, 55, 0.1);
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

#treemap-chart .loading-bar-fill {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, var(--hud-gold), transparent);
    animation: data-sweep 1.8s infinite ease-in-out;
}

/* F. D3/Plotly Element Overrides */
.treemap-tile {
    stroke: var(--hud-black) !important;
    stroke-width: 2px !important;
    transition: all 0.3s ease;
}

.treemap-tile:hover {
    stroke: var(--hud-gold) !important;
    filter: brightness(1.2);
}

/* Enhancing Tile Labels for readability and "Projected" look */
.treemap-label {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8), 0 0 12px var(--hud-gold-glow) !important;
    letter-spacing: 1px !important;
}

/* Keyframes for the 'Live monitor' feel */
@keyframes scanline-scroll {
    from { background-position: 0 0; }
    to { background-position: 0 100%; }
}

@keyframes monitor-flicker {
    0% { opacity: 0.995; }
    50% { opacity: 1; }
    100% { opacity: 0.998; }
}
/* G. Animations */
@keyframes terminal-flicker {
    0% { opacity: 0.5; }
    5% { opacity: 1; }
    10% { opacity: 0.6; }
    15% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0.5; }
}

@keyframes data-sweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* H. Responsive HUD Scaling */
@media (max-width: 768px) {
    #treemap-view {
        height: 75vh;
        padding: 1rem 0.75rem;
    }

    #treemap-view .view-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    #treemap-view .view-header::before,
    #treemap-view .view-header::after {
        display: none;
    }

    #treemap-chart-container {
        border-radius: 0;
    }
}

.treemap-toggle-group {
    display: flex;
    gap: 2px;
    z-index: 2;
    position: relative;
}

.treemap-toggle {
    background: transparent;
    border: 1px solid var(--hud-border);
    color: var(--hud-gold);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 0.35rem 1rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
}

.treemap-toggle:first-child { border-radius: 3px 0 0 3px; }
.treemap-toggle:last-child  { border-radius: 0 3px 3px 0; }

.treemap-toggle:hover {
    background: rgba(212, 175, 55, 0.1);
}

.treemap-toggle.active {
    background: var(--hud-gold);
    color: var(--hud-black);
    border-color: var(--hud-gold);
    box-shadow: 0 0 12px var(--hud-gold-glow);
}

.view-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* --- TEMPORAL VIEW STYLES --- */
.temporal-main-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.temporal-sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Ensure heatmap container allows scrolling on mobile */
.full-width-chart {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 768px) {
    .temporal-sub-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
    }

    #temporal-heatmap {
        min-width: 600px; /* Force scroll on small screens for readability */
    }
}

/* --- TEMPORAL ANALYST AGENT STYLES --- */

/* 1. Container Typography */
#temporal-analyst-content {
    font-family: var(--font-inter);
    color: var(--text-secondary);
}

/* 2. Title Styling (Overrides inline Python styles for consistency) */
#temporal-analyst-content h4 {
    color: var(--accent-primary) !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* 3. Narrative Body Text */
#temporal-analyst-content p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    color: var(--text-secondary) !important;
    text-align: justify;
    margin-bottom: 1.25rem !important;
}

/* 4. Highlighted Key Terms */
#temporal-analyst-content strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* 5. The Footer Row (Prime Window / Cycle Status) */
/* We target the div using the flex style attribute generated by Python */
#temporal-analyst-content div[style*="display: flex"] {
    background-color: var(--bg-primary); /* Darker inset background */
    padding: 0.75rem 1rem !important;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color) !important; /* Ensure border exists */
    margin-top: 0.5rem;
    align-items: center;
}

/* 6. Footer Labels */
#temporal-analyst-content div[style*="display: flex"] span {
    font-size: 0.85rem !important;
    letter-spacing: 0.3px;
}

/* 7. Loading State specific to this card */
#temporal-analyst-content .loader-container {
    min-height: 100px;
    width: 100%;
    justify-content: center;
}

/* === RESPONSIVE DESIGN FOR TEMPORAL VIEW === */

@media (max-width: 768px) {
    /* 1. Stack the Analyst Footer info (Prime Window / Cycle Status) */
    /* Target the specific flex container inside the analyst content */
    #temporal-analyst-content div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    /* 2. Force the sub-grid to stack vertically */
    .temporal-sub-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* 3. Resize Charts for Mobile screens (Overrides inline styles) */
    #temporal-heatmap,
    #temporal-composite-chart,
    #temporal-dow-chart {
        height: 300px !important;
        min-height: 300px;
    }

    /* 4. Ensure the Heatmap scrolls horizontally if needed */
    .chart-container.full-width-chart {
        overflow-x: auto;
    }

    /* 5. Adjust Narrative Text Size for readability */
    #temporal-analyst-content p {
        font-size: 0.9rem !important;
    }
}

/* --- FRACTAL VIEW STYLES --- */
.fractal-main-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.fractal-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .fractal-top-grid {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
}

/* --- CHAOS ANALYST STYLES --- */

/* --- FRACTAL VIEW STYLES --- */
.fractal-main-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.fractal-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .fractal-top-grid {
        grid-template-columns: 1fr;
    }
}

/* --- CHAOS ANALYST CARD --- */
.narrative-card {
    background: var(--card-bg, #1e1e2f);        /* falls back to a dark shade */
    border-radius: 16px;
    padding: 1.8rem 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color, #333);
}

.narrative-card .vpa-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--accent-primary, #b8860b);
    border-bottom: 2px solid var(--accent-primary, #b8860b);
    padding-bottom: 0.5rem;
    display: inline-block;
}

#fractal-analyst-content {
    font-family: var(--font-inter);
    color: var(--text-primary, #e0e0e0);
    white-space: pre-line;
    line-height: 1.7;
}

/* Headings inside the narrative */
#fractal-analyst-content .narrative-heading {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--accent-secondary, #ffd700);
    letter-spacing: -0.01em;
    border-left: 4px solid var(--accent-primary, #b8860b);
    padding-left: 1rem;
}

#fractal-analyst-content .narrative-heading:first-of-type {
    margin-top: 0;
}

/* Subheadings (like "From a practical standpoint:") */
#fractal-analyst-content .narrative-subheading {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #fff);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Paragraphs */
#fractal-analyst-content p {
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--text-secondary, #b0b0b0);
}

/* Bold text */
#fractal-analyst-content strong {
    color: var(--accent-primary, #b8860b);
    font-weight: 600;
}

/* Bullet list for practical points */
#fractal-analyst-content ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem 0;
}

#fractal-analyst-content li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-secondary, #b0b0b0);
}

#fractal-analyst-content li::before {
    content: "▹";
    position: absolute;
    left: 0;
    color: var(--accent-primary, #b8860b);
    font-size: 1.2rem;
    line-height: 1;
}

/* Callout box for the final thought */
#fractal-analyst-content .final-thought {
    background: rgba(184, 134, 11, 0.08);
    border-left: 4px solid var(--accent-primary, #b8860b);
    padding: 1.2rem 1.5rem;
    margin-top: 2rem;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

#fractal-analyst-content .final-thought strong {
    color: var(--accent-primary, #b8860b);
    font-style: normal;
}

/* Stats highlight (Hurst, FER, fractal dimension) */
#fractal-analyst-content .stat-highlight {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-weight: 600;
    color: var(--accent-primary, #b8860b);
}

/* --- Add to style.css --- */

/* Adjust container to handle the new text box at the bottom */
.indicator-chart-container {
    padding-bottom: 0 !important; /* Remove bottom padding from container so card sits flush */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Ensure the chart takes available space */
.indicator-chart {
    /* Ensure it fills the remaining Flexbox space */
    flex: 1 1 auto;
    width: 100%;

    /* Set explicit min/max heights */
    min-height: 150px;
    max-height: 220px;

    /* Crucial for Flexbox children to allow shrinking */
    overflow: hidden;
}

/* The new reading card styling */
.indicator-reading {
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Push to bottom of flexbox */
    margin-left: -1rem; /* Align with card padding */
    margin-right: -1rem;
    margin-bottom: 0;
    flex-shrink: 0; /* Don't let it shrink */
}

.reading-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.reading-value {
    font-weight: 700;
    font-family: var(--font-mono);
}

/* --- AKBAY VIEW STYLES --- */
.akbay-main-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.akbay-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.akbay-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}

.akbay-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.akbay-val {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-mono);
}

.akbay-val.value-up { color: var(--value-up); text-shadow: 0 0 10px rgba(46, 139, 87, 0.3); }
.akbay-val.value-down { color: var(--value-down); text-shadow: 0 0 10px rgba(220, 20, 60, 0.3); }

#akbay-narrative {
    background-color: var(--bg-primary);
    border: 1px solid var(--accent-primary);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

#akbay-narrative strong {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .akbay-metrics-grid {
        grid-template-columns: 1fr;
    }
}
/* --- MACRO YIELDS VIEW STYLES --- */
.yields-main-layout {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 75% Main Chart, 25% Side Panel */
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Ensure the correlation chart spans full width if moved or resized */
#yields-corr-chart {
    width: 100%;
    min-height: 250px;
}

/* Specific styling for the Yields metric cards to ensure they match the dark theme */
#yield-narrative strong {
    color: var(--text-primary);
}

/* === RESPONSIVE DESIGN FOR YIELDS VIEW === */

/* Tablet and Smaller: Stack the layout vertically */
@media (max-width: 1024px) {
    .yields-main-layout {
        grid-template-columns: 1fr; /* Single column stack */
        gap: 1rem;
    }

    /* Force the side panel (metrics) to sit below the main chart */
    .yields-main-layout > div:nth-child(2) {
        order: 2;
    }

    /* Ensure the main chart has enough height on mobile */
    #yields-main-chart {
        min-height: 400px;
    }
}

/* Mobile Specific Tweaks */
@media (max-width: 768px) {
    #yields-corr-chart {
        min-height: 200px; /* Slightly smaller on mobile */
    }
}
/* =============================================================================
   MACRO YIELDS VIEW STYLES
   ============================================================================= */

/* 1. Main Grid Layout */
.yields-main-layout {
    display: grid;
    grid-template-columns: 3fr 1fr; /* 75% Main Chart, 25% Side Panel */
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: start;
}

/* 2. Side Panel (Metrics & Narrative) Wrapper */
.yields-side-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

/* 3. Metric Cards Specifics */
/* Reuse existing .vpa-card for containers, but refine internal spacing */
.yields-metric-box {
    background-color: var(--bg-primary); /* Inset look */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.yields-metric-box:last-child {
    margin-bottom: 0;
}

.yields-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: block;
}

.yields-val {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

/* Narrative Text Styling */
#yield-narrative {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: justify;
}

#yield-narrative strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* 4. Bottom Correlation Chart Container */
.yields-bottom-chart {
    grid-column: 1 / -1; /* Spans full width */
    height: 300px;
    min-height: 300px;
}

/* =============================================================================
   RESPONSIVE DESIGN (ADAPTIVE)
   ============================================================================= */

/* Tablet (Portrait) and Smaller Laptops: 1024px and below */
@media (max-width: 1024px) {
    .yields-main-layout {
        grid-template-columns: 1fr; /* Switch to single column stack */
        gap: 1.5rem;
    }

    /* Force the Side Panel to appear AFTER the main chart but BEFORE the bottom chart */
    /* Order: Main Chart (1), Side Panel (2), Bottom Chart (3) */
    .yields-side-panel {
        order: 2;
        flex-direction: row; /* display metrics side-by-side on tablet */
        gap: 1.5rem;
    }

    /* Ensure the metric cards inside side panel expand */
    .yields-side-panel > div {
        flex: 1;
    }

    /* Target the grid container inside the layout (if using specific divs) */
    .yields-main-layout > .chart-container:first-of-type {
        order: 1;
        min-height: 450px;
    }

    .yields-bottom-chart {
        order: 3;
    }
}

/* Mobile Devices: 768px and below */
@media (max-width: 768px) {
    .yields-side-panel {
        flex-direction: column; /* Stack metrics vertically again on phone */
        gap: 1rem;
    }

    .yields-val {
        font-size: 1.5rem; /* Slightly smaller font for values */
    }

    /* Adjust Chart Heights for Mobile */
    .yields-main-layout .chart-container {
        min-height: 350px; /* Smaller height for main chart */
        padding: 0.75rem; /* Reduce padding */
    }

    .yields-bottom-chart {
        min-height: 250px;
    }

    /* Ensure text aligns left on mobile for readability */
    #yield-narrative {
        text-align: left;
        font-size: 0.9rem;
    }
}
/* Ensure the button looks like a primary action button */
#plot-zones-btn, #plot-patterns-btn {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--accent-primary);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

#plot-zones-btn:hover, #plot-patterns-btn:hover {
    background-color: var(--accent-primary);
    color: #000;
    box-shadow: 0 0 10px rgba(184, 134, 11, 0.4);
}
/* Highlight the new Calculus-based Limit tags */
.sr-component-tag:contains("Limit") {
    background-color: rgba(184, 134, 11, 0.2); /* Gold background */
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    font-weight: 700;
}

/* =============================================================================
   FINAL UPGRADE: QUANT COMMAND CENTER & HEDGE FUND TERMINAL
   ============================================================================= */

/* --- 1. HEADER LAYOUT (2-Row Vertical Stack) --- */
.header-content {
    display: flex;
    flex-direction: column; /* Stacks Tabs on top, Controls below */
    align-items: flex-start;
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}

.controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-left: 2px; /* Aligns with the first tab */
    width: 100%;
}

/* Command Center Tab - Clean Style */
#tab-command {
    font-weight: 600;
}
#tab-command.active {
    color: var(--accent-primary);
    border-bottom: 2px solid var(--accent-primary);
    background-color: transparent;
}
/* --- 2. COMMAND CENTER GRID --- */
.quant-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* The "Bloomberg" Card Container */
.quant-card {
    background-color: #161b22; /* Deep Blue-Grey */
    border: 1px solid #30363d; /* Subtle Slate Border */
    border-radius: 6px;
    padding: 0; /* Header handles padding */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    min-height: 300px;
    transition: border-color 0.2s;
}

.quant-card:hover {
    border-color: var(--accent-primary); /* Gold hover effect */
}

.quant-card.full-width {
    grid-column: 1 / -1;
}

/* --- 3. CARD HEADERS --- */
.quant-card-header {
    background-color: #0d1117; /* Darker header strip */
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #30363d;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #8b949e; /* Muted text */
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* Header Metrics (Period | Power) */
.quant-header-metrics {
    display: flex;
    gap: 10px;
    color: #c9d1d9;
    font-family: var(--font-mono);
}
.quant-header-metrics b { color: #fff; }

/* --- 4. CHART AREAS & METRICS --- */
.quant-chart-area {
    height: 100%;
    width: 100%;
    position: relative;
    /* Subtle radial gradient for depth */
    background: radial-gradient(circle at center, rgba(22, 27, 34, 1) 0%, rgba(13, 17, 23, 1) 100%);
}

.quant-chart-area.large { height: 350px; }

.quant-metric-row {
    padding: 1rem 1rem 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.quant-label { font-size: 0.75rem; color: #8b949e; font-weight: 500; }
.quant-value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: #f0f6fc; }

/* Live Pulse Indicator */
.quant-live-indicator {
    color: #2E8B57;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.quant-live-indicator::before {
    content: ''; display: block; width: 6px; height: 6px;
    background-color: #2E8B57; border-radius: 50%;
    box-shadow: 0 0 6px #2E8B57;
    animation: blink 2s infinite;
}

/* --- 5. ANALYST AGENT (The "Wire" Feed) --- */
#cc-agent-screen {
    background-color: #0d1117 !important;
    padding: 0 !important;
    color: #c9d1d9;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    border-radius: 0 0 6px 6px;
    /* Note: Border color is set dynamically by JS based on sentiment */
    border: 1px solid #30363d;
    border-top: none;
}

/* The Narrative Text Padding */
#cc-agent-screen > div {
    padding: 1.5rem;
}

/* The Bottom Data Grid (Tail Risk / OU Gap / etc.) */
.agent-data-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns */
    background-color: #010409; /* Pitch black footer */
    border-top: 1px solid #30363d;
    margin-top: 1.5rem;
    margin-left: -1.5rem; /* Pull to edge */
    margin-right: -1.5rem; /* Pull to edge */
    margin-bottom: -1.5rem; /* Pull to edge */
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.agent-data-cell {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #21262d;
}
.agent-data-cell:last-child { border-right: none; }

.agent-label { font-size: 0.65rem; color: #8b949e; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px; }
.agent-val { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: #fff; }

/* Loading Text */
.quant-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
    color: #8b949e;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 1px;
    font-style: italic;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .quant-grid-layout { grid-template-columns: 1fr; }
    .agent-data-grid { grid-template-columns: 1fr 1fr; } /* 2x2 grid on mobile */
    .agent-data-cell { border-bottom: 1px solid #21262d; }
    .agent-data-cell:nth-child(2) { border-right: none; } /* Remove right border for 2nd item in row */
}
/* =============================================================================
   14. MARKET GEOMETRY (TOPOLOGY) - DEFINITIVE LAYOUT FIX
   ============================================================================= */

/* 1. DESKTOP LAYOUT */
.geometry-main-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;

    /* CRITICAL FIX: Adaptive Height */
    height: auto;          /* Grows with content */
    min-height: 650px;     /* Minimum height for the chart */

    /* CRITICAL FIX: Footer Buffer */
    margin-bottom: 5rem;   /* Pushes footer away */
}

/* 2. SIDE PANEL WRAPPER */
.geometry-side-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
    min-height: 0; /* Prevents flexbox overflow */
}

/* 3. CHART CONTAINER */
#geometry-chart {
    width: 100%;
    height: 650px; /* Explicit height for the canvas */
    background-color: transparent;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* 4. CENTRALITY LIST SCROLLING */
#geo-centrality-list {
    background-color: var(--bg-primary);
    overflow-y: auto;
    flex-grow: 1;
    height: 100%;
    min-height: 0;

    /* Scrollbar Styling */
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-primary);
}

#geo-centrality-list::-webkit-scrollbar { width: 6px; }
#geo-centrality-list::-webkit-scrollbar-track { background: var(--bg-primary); }
#geo-centrality-list::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 3px; }

/* 5. FOOTER FIX (STACKING CONTEXT) */
.footer {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8rem;
    border-top: 1px solid var(--border-color);
    margin-top: 2rem;

    /* FORCE ON TOP */
    background-color: var(--bg-primary); /* Opaque background */
    position: relative;
    z-index: 100; /* Higher than chart */
}

/* 6. RESPONSIVE RULES */
@media (max-width: 1024px) {
    .geometry-main-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto; /* Stack vertically */
    }

    .geometry-side-panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: auto;
    }

    #geometry-chart {
        height: 500px;
    }

    #geo-centrality-list {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .geometry-side-panel {
        display: flex;
        flex-direction: column;
    }

    #geometry-chart {
        height: 400px;
    }
}
/* --- Volatility Dashboard Containers --- */
.vol-grid-container {
    display: grid;
    grid-template-columns: 350px 1fr; /* Sidebar fixed, chart fluid */
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    height: calc(100vh - 140px); /* Fit to screen minus header */
    padding: 1rem;
    overflow: hidden;
}

/* --- Panel Styling (Cards) --- */
.vol-panel {
    background-color: rgba(30, 30, 30, 0.6); /* Semi-transparent dark */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* CRITICAL: Stops axis spillover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* --- Headers --- */
.vol-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

/* =========================================
   RESPONSIVE LAYOUT (Mobile & Tablet)
   ========================================= */

/* Tablet & Smaller Laptops (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .vol-grid-container {
        grid-template-columns: 280px 1fr; /* Shrink sidebar slightly */
        gap: 1rem;
    }
}

/* Mobile Devices (max-width: 768px) */
@media screen and (max-width: 768px) {

    /* 1. Stack the Grid (Sidebar goes on top or bottom, Content takes full width) */
    .vol-grid-container {
        display: flex;
        flex-direction: column;
        height: auto; /* Remove fixed height constraint */
        overflow-y: auto; /* Allow scrolling */
        padding: 0.5rem;
    }

    /* 2. Adjust Sidebar (Control Panel) */
    .vol-panel.sidebar {
        width: 100%;
        max-height: 400px; /* Limit height of ticker list on mobile */
        margin-bottom: 1rem;
    }

    /* 3. Adjust Chart Panels */
    .vol-panel {
        min-height: 350px; /* Force minimum height for charts */
        margin-bottom: 1rem;
    }

    /* 4. Statistics Cards - Grid to 2 columns instead of 3 */
    .vol-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 5. Hide less important stats on very small screens if needed */
    .vol-stat-card:nth-child(3) {
        grid-column: span 2; /* Make the last card wide */
    }

    /* 6. Typography Adjustments */
    .vol-panel-title {
        font-size: 0.85rem;
    }

    .vol-stat-val {
        font-size: 1rem;
    }

    /* 7. Table Adjustments */
    #vol-scanner-body td {
        padding: 8px 4px;
        font-size: 0.8rem;
    }
}

/* Very Small Screens (max-width: 480px) */
@media screen and (max-width: 480px) {
    .vol-stats-row {
        grid-template-columns: 1fr; /* Stack stats vertically */
    }

    .vol-stat-card:nth-child(3) {
        grid-column: auto;
    }

    .vol-panel {
        min-height: 300px;
    }
}

/* Prevent Infinite Growth Loop in Grids */
.chart-container {
    min-height: 0; /* CRITICAL: Allows flex/grid items to shrink */
    overflow: hidden; /* CRITICAL: Stops content from pushing bounds */
    display: flex;
    flex-direction: column;
}

/* Force Canvas/Plotly to stay within bounds */
#vol-heatmap-plot,
#volBacktestChart,
.js-plotly-plot {
    max-height: 100% !important;
}

.vol-panel-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e6e6e6; /* Bright text */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Chart Containers --- */
/* This forces Plotly/ChartJS to respect parent bounds */
.chart-wrapper {
    position: relative;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    min-height: 0; /* Important for grid flex items */
}

/* --- Specific Chart Fixes --- */
#vol-frontier-plot, #vol-heatmap-plot {
    width: 100% !important;
    height: 100% !important;
}

/* --- Stats Row Styling --- */
.vol-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 1rem;
}

.vol-stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 8px;
    text-align: center;
}

.vol-stat-val {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
}

.vol-stat-label {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
}

/* INSTITUTIONAL ANALYSIS SPECIFIC CSS */
.inst-grid {
    display: grid;
    grid-template-columns: 300px 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.5rem;
    height: calc(100vh - 140px);
    padding: 1rem;
}

.math-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #888;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 8px;
    display: inline-block;
}

.signal-box {
    background: #111;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid #333;
    margin-bottom: 1rem;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #222;
    padding: 8px 0;
    font-size: 0.9rem;
}

.metric-row span:last-child {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #e0e0e0;
}

/* =========================================
   ORION KINEMATIC INTERFACE (BLACKROCK THEME)
   ========================================= */

/* The Tab View Container */
#orion-view {
    background-color: #0b0c10; /* Deep Gunmetal */
    color: #c5c6c7;
    font-family: 'JetBrains Mono', monospace;
    padding: 20px;
    height: 85vh; /* Fit within dashboard area */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* 1. Command Deck (Top Bar) */
.orion-deck {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 15px 25px;
    background: #1f2833;
    border: 1px solid #45a29e; /* Teal/Gold accent */
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.orion-deck-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.orion-deck-group label {
    font-size: 10px;
    color: #66fcf1; /* Cyber Blue */
    letter-spacing: 1px;
    text-transform: uppercase;
}

.orion-slider {
    background: #0b0c10;
    accent-color: #45a29e;
    height: 4px;
}

.orion-val-display {
    font-size: 14px;
    color: #fff;
    font-weight: bold;
}

.orion-deck-actions {
    margin-left: auto;
    display: flex;
    gap: 15px;
}

.orion-btn {
    background: #0b0c10;
    border: 1px solid #66fcf1;
    color: #66fcf1;
    padding: 10px 20px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.orion-btn:hover {
    background: #66fcf1;
    color: #0b0c10;
    box-shadow: 0 0 10px rgba(102, 252, 241, 0.4);
}

.orion-btn.accent {
    border-color: #D4AF37; /* Gold */
    color: #D4AF37;
}
.orion-btn.accent:hover {
    background: #D4AF37;
    color: #000;
}

/* 2. Grid Layout */
.orion-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    gap: 15px;
    flex: 1;
    min-height: 0;
}

.orion-panel {
    background: #1f2833;
    border: 1px solid #2c3e50;
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.orion-panel-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #45a29e;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.orion-panel-header h3 {
    margin: 0;
    font-size: 12px;
    color: #66fcf1;
    letter-spacing: 1px;
}

/* Panel Specifics */
.orion-main-chart {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.orion-metrics {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.orion-backtest {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.orion-scanner {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
}

/* Metrics Typography */
.orion-metric-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    border-bottom: 1px solid #2c3e50;
    padding-bottom: 4px;
}

.orion-metric-lbl { color: #888; }
.orion-metric-val { color: #fff; font-weight: bold; font-family: 'JetBrains Mono'; }
.text-gold { color: #D4AF37 !important; }
.text-neon { color: #66fcf1 !important; }

/* Table Styling */
.orion-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.orion-table th {
    text-align: left;
    color: #66fcf1;
    padding: 8px 4px;
    border-bottom: 1px solid #45a29e;
    position: sticky;
    top: 0;
    background: #1f2833;
}

.orion-table td {
    padding: 6px 4px;
    border-bottom: 1px solid #2c3e50;
    color: #ccc;
}

.signal-buy { color: #00ff00; font-weight: bold; }
.signal-sell { color: #ff0055; font-weight: bold; }

/* Responsive */
@media (max-width: 1200px) {
    .orion-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .orion-main-chart { grid-column: 1 / -1; height: 400px; }
    .orion-metrics { grid-column: 1 / -1; }
    .orion-backtest { grid-column: 1 / -1; height: 300px; }
    .orion-scanner { grid-column: 1 / -1; height: 400px; }
}

/* MONARCH BID/ASK NEON THEME */
.bid-ask-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    background: var(--bg-primary);
}

.bid-ask-table th {
    background: var(--bg-secondary);
    padding: 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

.bid-ask-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    text-align: right;
    font-size: 0.9rem;
}

.ticker-cell { text-align: left !important; font-weight: bold; }

/* Institutional Persistence Glow */
.high-persistence {
    font-weight: bold;
    text-shadow: 0 0 10px currentColor;
}

.bid-cell.high-persistence {
    color: #00FFFF !important; /* Monarch Cyan */
    background: rgba(0, 255, 255, 0.05);
}

.ask-cell.high-persistence {
    color: #FF00FF !important; /* Monarch Magenta */
    background: rgba(255, 0, 255, 0.05);
}

.panel-header {
    background: var(--bg-secondary);
    padding: 15px;
    border-radius: 4px 4px 0 0;
    border: 1px solid var(--border-color);
    margin-top: 1.5rem;
}

/* 1. Main Container - The "Chassis" */
.vpa-report-container {
    background-color: var(--bg-deep);
    background-image:
        /* Primary Grid */
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        /* CRT Scanline Effect */
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
    background-size: 40px 40px, 40px 40px, 100% 3px, 100% 100%;

    border: 1px solid var(--border-dim);
    border-radius: 8px;
    padding: 3rem;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: var(--text-primary);
    line-height: 1.6;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.8), 0 20px 50px rgba(0,0,0,0.5);
}

/* Screen Flicker Animation Overlay */
.vpa-report-container::after {
    content: " ";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%), rgba(255, 255, 255, 0.02);
    z-index: 10;
    pointer-events: none;
    animation: flicker 0.15s infinite;
    opacity: 0.3;
}

/* 2. Header Section - "System Link" */
.vpa-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--border-dim);
    padding-bottom: 2rem;
    margin-bottom: 3rem;
    position: relative;
}

.vpa-report-title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: #ffffff;
    text-shadow: 0 0 10px var(--terminal-glow);
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Digital Pulse Indicator */
.vpa-report-title::before {
    content: '';
    width: 14px;
    height: 14px;
    background-color: var(--accent-primary);
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    animation: pulse-glow 2s infinite;
}

.vpa-report-meta {
    font-size: 0.7rem;
    font-family: 'Consolas', monospace;
    color: var(--text-dim);
    background: rgba(48, 54, 61, 0.3);
    padding: 10px 15px;
    border-radius: 4px;
    border: 1px solid var(--border-dim);
}

/* 3. Executive Box - "Intelligence HUD" */
.vpa-executive-box {
    background: linear-gradient(135deg, rgba(22, 27, 34, 0.8), rgba(13, 17, 23, 0.9));
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-dim);
    padding: 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    border-radius: 4px;
}

/* HUD Corner Brackets */
.vpa-executive-box::before, .vpa-executive-box::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
}
.vpa-executive-box::before {
    top: -1px; left: -1px;
    border-top: 2px solid var(--text-dim);
    border-left: 2px solid var(--text-dim);
}
.vpa-executive-box::after {
    bottom: -1px; right: -1px;
    border-bottom: 2px solid var(--text-dim);
    border-right: 2px solid var(--text-dim);
}

.vpa-executive-box.bullish { border-left: 5px solid var(--value-up); box-shadow: -10px 0 20px rgba(63, 185, 80, 0.1); }
.vpa-executive-box.bearish { border-left: 5px solid var(--value-down); box-shadow: -10px 0 20px rgba(248, 81, 73, 0.1); }

.vpa-section-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-primary);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
}

/* 4. Mechanics Grid - "Module Readouts" */
.vpa-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.vpa-mechanics-card {
    background: rgba(22, 27, 34, 0.5);
    border: 1px solid var(--border-dim);
    padding: 1.5rem;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.vpa-mechanics-card:hover {
    background: rgba(88, 166, 255, 0.05);
    border-color: var(--accent-primary);
    transform: translateY(-5px);
}

.vpa-metric-large {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -1px;
    margin: 10px 0;
    display: block;
}

/* Progress bar style decoration for cards */
.vpa-mechanics-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0%; height: 2px;
    background: var(--accent-primary);
    transition: width 0.4s ease;
}
.vpa-mechanics-card:hover::after { width: 100%; }

/* 5. Data Table - "The Matrix Grid" */
.vpa-scenario-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 3rem;
    background: var(--bg-panel);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-dim);
}

.vpa-scenario-table th {
    background: #0d1117;
    padding: 15px;
    color: var(--text-dim);
    font-size: 0.7rem;
    text-transform: uppercase;
    border-bottom: 2px solid var(--border-dim);
}

.vpa-scenario-table td {
    padding: 18px 15px;
    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
    transition: background 0.2s;
}

.vpa-scenario-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* 6. Verdict Banner - "Command Execution" */
.vpa-verdict-banner {
    background: #0d1117;
    border: 1px solid var(--border-dim);
    padding: 3rem 1rem;
    text-align: center;
    border-radius: 4px;
    position: relative;
}

.vpa-verdict-title {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    z-index: 2;
}



.vpa-verdict-banner.bullish { color: var(--value-up); border: 2px solid var(--value-up); }
.vpa-verdict-banner.bearish { color: var(--value-down); border: 2px solid var(--value-down); }


/* 8. Footer */
.vpa-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 2rem;
    border-top: 1px solid var(--border-dim);
    color: var(--text-dim);
    font-size: 0.65rem;
}

/* =========================================
   1. TERMINAL CARD & CONTAINER STYLING
   ========================================= */

/* Unified Glassmorphism for both Quant Cards (Command Center)
   and Chart Containers (Technicals Tab) */
.quant-card, .chart-container {
    background: rgba(13, 17, 23, 0.7); /* Dark semi-transparent */
    backdrop-filter: blur(12px);       /* Frosted glass effect */
    border-radius: 8px;
    border: 1px solid #30363d;
    transition: all 0.3s ease;         /* Smooth hover transition */
}

/* Hover Glow Effect */
.quant-card:hover, .chart-container:hover {
    border-color: #58a6ff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); /* Lift effect */
}

/* Header Typography (The "Terminal" Look) */
.quant-card-header, .chart-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Subtle divider */
    padding-bottom: 8px;
}

.quant-card-header span, .chart-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem !important; /* Force small tech font */
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

/* =========================================
   2. HIGH-CONTRAST DATA BADGES
   ========================================= */

.reading-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;

    /* "Digital Screen" Look */
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* Inner depth */

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 80px; /* Uniform width for alignment */
}

/* Neon Text Variants (with Glow) */
.value-up-bright {
    color: #00FF99 !important;
    text-shadow: 0 0 10px rgba(0, 255, 153, 0.5);
}

.value-down-bright {
    color: #FF3131 !important;
    text-shadow: 0 0 10px rgba(255, 49, 49, 0.5);
}

.value-neutral-bright {
    color: #FFD700 !important; /* Gold */
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* NEW: Cyan for Liquidity/Fragility */
.value-cyan-bright {
    color: #00FFFF !important; /* Electric Cyan */
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
/* --- CSS FIX: RESET MAIN PRICE CHART --- */
/* This specific selector targets the main chart container */
.chart-container.main-chart {
    background: transparent !important; /* Removes the dark glass color */
    backdrop-filter: none !important;   /* Removes the blur */
    border: none !important;            /* Removes the border */
    box-shadow: none !important;        /* Removes the glow */
}

/* Ensures the grid inside doesn't have weird lines */
.main-chart-grid {
    background: transparent;
}

/* 1. Container Aesthetics */
#sr-mini-chart {
    border: 1px solid rgba(184, 134, 11, 0.2); /* Subtle Gold Border */
    border-radius: 8px;
    background: rgba(20, 20, 20, 0.4); /* Glassmorphism background */
    backdrop-filter: blur(5px);        /* Blur behind the chart */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Depth shadow */
    transition: border-color 0.3s ease;
}

#sr-mini-chart:hover {
    border-color: rgba(184, 134, 11, 0.6); /* Glow on hover */
}

/* 2. Loading State Animation */
.chart-loading {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    font-size: 0.9rem;
    letter-spacing: 1px;
    animation: pulse 1.5s infinite ease-in-out;
}

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

/* 3. Tooltip Customization (Overrides Plotly defaults) */
.plotly .hovertext text {
    font-family: 'JetBrains Mono', monospace !important;
    text-shadow: none !important;
}

.plotly .hovertext rect {
    fill-opacity: 0.95 !important;
    stroke: rgba(184, 134, 11, 0.5) !important; /* Gold border on tooltips */
    rx: 4px !important; /* Rounded corners */
}
/* ==========================================================================
   S/R TACTICAL PLATES - FINAL UNIFIED BUILD
   ========================================================================== */
/* ==========================================================================
   S/R TACTICAL PLATES - STRUCTURED & TYPOGRAPHIC
   ========================================================================== */

/* 1. SCROLLABLE CONTAINER */
#sr-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 8px 4px 4px;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #30363d transparent;
}

/* 2. THE CARD CONTAINER */
.sr-card {
    /* Deep "Void" Background */
    background: rgba(15, 18, 23, 0.85);
    backdrop-filter: blur(12px);

    /* Fine Borders */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid #555; /* Default Indicator */
    border-radius: 6px;

    /* Layout */
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Consistent vertical rhythm */

    position: relative;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.0, 0.2, 1);
}

/* Hover: Lift & Brighten Border */
.sr-card:hover {
    transform: translateY(-2px);
    background: rgba(22, 27, 34, 0.95);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Active State */
.sr-card.active-focus {
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.05) 0%, rgba(20, 20, 20, 0.9) 100%);
    border-color: #D4AF37; /* Gold Border */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.1);
}

/* Type Colors */
.sr-card.type-resistance { border-left-color: #FF3131; }
.sr-card.type-support { border-left-color: #00FF99; }
.sr-card.type-gap { border-left-color: #00FFFF; border-left-style: dashed; }


/* 3. TOP ROW: PRICE & STATUS (The "Hero" Section) */
.sr-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align baseline */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
    margin-bottom: 0; /* Removing default margin, using gap instead */
}

.sr-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem; /* Larger Hero Size */
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
    line-height: 1;
}

.sr-status {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Status Variants */
.status-far { color: #484f58; background: rgba(255,255,255,0.03); }
.status-near { color: #D4AF37; background: rgba(212, 175, 55, 0.15); border: 1px solid rgba(212, 175, 55, 0.3); }
.status-testing {
    color: #FF3131;
    background: rgba(255, 49, 49, 0.15);
    border: 1px solid rgba(255, 49, 49, 0.3);
    box-shadow: 0 0 8px rgba(255, 49, 49, 0.2);
    animation: pulse-red 1.5s infinite;
}


/* 4. MIDDLE ROW: METADATA & STRENGTH */
.sr-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: #8b949e;
}

.sr-stars {
    color: #D4AF37;
    letter-spacing: 2px; /* Wider star spacing */
    font-size: 0.75rem;
}

/* Slim Strength Bar */
.strength-meter {
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}
.strength-fill {
    height: 100%;
    background: linear-gradient(90deg, #444, #58a6ff);
}


/* 5. CONTENT BODY: TAGS (The "Tech Chips") */
.sr-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sr-confluence-label {
    font-size: 0.55rem;
    font-weight: 700;
    color: #484f58; /* Muted label */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sr-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sr-component-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: #a5d6ff; /* Soft Blue text */
    background: rgba(56, 139, 253, 0.1); /* Blue tint bg */
    border: 1px solid rgba(56, 139, 253, 0.2);
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;

    /* Subtle interactions */
    transition: background 0.2s;
}

.sr-card:hover .sr-component-tag {
    border-color: rgba(56, 139, 253, 0.4);
    background: rgba(56, 139, 253, 0.15);
}


/* 6. FOOTER: RANGES (The "Fine Print") */
.sr-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2); /* Darker footer strip */
    margin: 0 -14px -14px -14px; /* Stretch to edges */
    padding: 8px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);

    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: #6e7681;
}

/* Contextual Colors for Distance */
.value-down { color: #ff7b72 !important; } /* Soft Red */
.value-neutral { color: #8b949e; }

/* 7. ANIMATIONS */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(255, 49, 49, 0.4); }
    70% { box-shadow: 0 0 0 4px rgba(255, 49, 49, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 49, 49, 0); }
}

/* ==========================================================================
   QUANT DESK: STRUCTURAL ANALYSIS TERMINAL (The "Glass Cockpit" Look)
   ========================================================================== */

/* 1. The Container */
.sr-analyst-card {
    background: linear-gradient(180deg, rgba(20, 24, 30, 0.95) 0%, rgba(13, 17, 23, 0.95) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15); /* Subtle Gold Border */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 0; /* padding handled by inner grids */
    font-family: 'Inter', sans-serif;
    color: #c9d1d9;
    overflow: hidden;
    margin-bottom: 2rem;
}

/* 2. The Header Strip */
.sr-terminal-header {
    background: rgba(30, 35, 45, 0.8);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sr-terminal-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sr-terminal-title::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--accent-primary);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-primary);
    animation: pulse 2s infinite;
}

/* 3. The "Heads Up Display" (Key Levels Grid) */
.sr-hud-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Split Support & Resistance */
    gap: 1px; /* Gap creates the border line */
    background-color: rgba(255, 255, 255, 0.1); /* Line color */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sr-hud-panel {
    background-color: rgba(13, 17, 23, 1);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sr-hud-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #8b949e;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
}

.sr-hud-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.sr-hud-price.support { color: #00FF99; text-shadow: 0 0 10px rgba(0, 255, 153, 0.2); }
.sr-hud-price.resistance { color: #FF3131; text-shadow: 0 0 10px rgba(255, 49, 49, 0.2); }

/* 4. Strength Meter (Visual Bar) */
.sr-strength-container {
    margin-top: 8px;
    background: rgba(255,255,255,0.05);
    height: 4px;
    width: 100%;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.sr-strength-fill {
    height: 100%;
    border-radius: 2px;
    box-shadow: 0 0 5px currentColor;
}

.sr-strength-text {
    font-size: 0.65rem;
    font-family: 'JetBrains Mono', monospace;
    margin-top: 2px;
    text-align: right;
    color: #8b949e;
}

/* 5. The Narrative Body */
.sr-terminal-body {
    padding: 20px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #c9d1d9;
}

/* Improve the typography of the raw HTML content */
.sr-terminal-body strong {
    color: #fff;
    font-weight: 600;
}

.sr-terminal-body p {
    margin-bottom: 1rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 12px;
}

/* Highlight specifically the "Why this matters" sections if possible */
.sr-terminal-body p:contains("Why this level matters") {
    background: rgba(255, 255, 255, 0.02);
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
}

/* 6. Footer Meta */
.sr-terminal-footer {
    padding: 8px 15px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.7rem;
    color: #6e7681;
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
}

/* Responsive */
@media (max-width: 768px) {
    .sr-hud-grid { grid-template-columns: 1fr; }
}

/* --- UPGRADE 2: QUANT TERMINAL ENHANCEMENTS --- */

/* 1. Holo-Grid Background Effect */
.sr-analyst-card {
    /* Existing background + subtle grid overlay */
    background-color: rgba(13, 17, 23, 0.95);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px; /* 20px grid squares */
    position: relative;
}

/* 2. The Center R:R Widget */
.sr-hud-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(13, 17, 23, 1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 10px;
}

.rr-ratio-label {
    font-size: 0.6rem;
    color: #8b949e;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.rr-ratio-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

/* 3. Narrative "Smart Tags" (Auto-Highlighting) */
/* Force all colored tags to look like plain text */
.txt-tag {
    background-color: transparent !important;
    color: inherit !important; /* Uses the parent text color */
    padding: 0 !important;
    border: none !important;
    font-weight: normal !important;
}

/* Semantic Colors */
.tag-bull {
    color: #00FF99;
    background: rgba(0, 255, 153, 0.1);
    border: 1px solid rgba(0, 255, 153, 0.2);
}

.tag-bear {
    color: #FF3131;
    background: rgba(255, 49, 49, 0.1);
    border: 1px solid rgba(255, 49, 49, 0.2);
}

.tag-warn {
    color: #FFD700;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.tag-struct {
    color: #00BFFF;
    background: rgba(0, 191, 255, 0.1);
    border: 1px solid rgba(0, 191, 255, 0.2);
}

.tag-gold {
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Grid adjustment to fit the 3rd column (The R:R gauge) */
.sr-hud-grid.v2 {
    grid-template-columns: 1fr auto 1fr; /* Left | Center (Auto) | Right */
}

/* --- RESPONSIVE ADAPTATION FOR V2 TERMINAL --- */

@media (max-width: 768px) {
    /* Stack the HUD vertically on mobile */
    .sr-hud-grid.v2 {
        grid-template-columns: 1fr; /* Single column stack */
        gap: 0; /* Remove gap as borders handle separation */
    }

    /* Adjust the center R:R widget to fit the stack */
    .sr-hud-center {
        border-left: none;
        border-right: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 15px 0;
        flex-direction: row; /* Switch to row layout for the ratio */
        justify-content: space-between;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Move the label to the left and value to the right on mobile */
    .rr-ratio-label {
        font-size: 0.8rem;
        margin-bottom: 0;
    }

    .rr-ratio-value {
        font-size: 1.1rem;
    }

    /* Ensure text alignment is natural on mobile */
    .sr-hud-panel {
        text-align: left !important;
    }

    .sr-hud-label {
        justify-content: flex-start !important;
        gap: 10px;
    }

    .sr-strength-fill {
        margin-left: 0 !important; /* Reset right-aligned bars */
    }
}

/* --- LUXURY QUANTITATIVE CONTAINER (BLACK GOLD THEME) --- */
#avb-chart {
    position: relative;
    width: 100%; /* Fully adaptive width */
    height: 500px; /* Default desktop height */
    min-height: 350px; /* Prevents it from getting too small */

    /* Deep Matte Black Background */
    background: linear-gradient(135deg, #050505 0%, #1a1a1a 100%);

    /* Metallic Gold Border */
    border: 1px solid rgba(212, 175, 55, 0.3); /* #D4AF37 */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(212, 175, 55, 0.05);
    border-radius: 2px;
    overflow: hidden;
    transition: height 0.3s ease, box-shadow 0.3s ease;
}

/* Subtle "Ticker Tape" Grid Overlay */
#avb-chart::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    /* Faint gold grid */
    background-image:
        linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 1;
    pointer-events: none;
}

/* Gold Accents (Corner Brackets) - SVG-style clip-path */
#avb-chart::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid rgba(255, 215, 0, 0.4); /* Brighter Gold */
    clip-path: polygon(
        0 10px, 10px 0, 30px 0, 30px 1px, 11px 1px, 1px 11px, 1px 30px, 0 30px,
        0 calc(100% - 30px), 1px calc(100% - 30px), 1px calc(100% - 11px), 11px calc(100% - 1px), 30px calc(100% - 1px), 30px 100%, 10px 100%, 0 calc(100% - 10px),
        calc(100% - 30px) 100%, calc(100% - 30px) calc(100% - 1px), calc(100% - 11px) calc(100% - 1px), calc(100% - 1px) calc(100% - 11px), calc(100% - 1px) calc(100% - 30px), 100% calc(100% - 30px), 100% calc(100% - 10px), calc(100% - 10px) 100%,
        100% 30px, calc(100% - 1px) 30px, calc(100% - 1px) 11px, calc(100% - 11px) 1px, calc(100% - 30px) 1px, calc(100% - 30px) 0, calc(100% - 10px) 0, 100% 10px
    );
    z-index: 2;
    pointer-events: none;
}

/* --- MOBILE & TABLET ADAPTATION --- */
@media (max-width: 768px) {
    #avb-chart {
        height: 350px; /* Shorter for mobile screens */
        border-color: rgba(212, 175, 55, 0.2);
    }

    /* Simplify corners on small screens to save space */
    #avb-chart::after {
        border-width: 0.5px;
        opacity: 0.5;
    }
}

/* --- BLACK GOLD TERMINAL (MAIN PRICE CHART) --- */
#price-chart {
    position: relative;
    width: 100%;
    height: 600px; /* Taller for main chart */
    min-height: 400px;

    /* Deep Matte Black Background */
    background: linear-gradient(135deg, #050505 0%, #151515 100%);

    /* Metallic Gold Border */
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(212, 175, 55, 0.05);
    border-radius: 2px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Ticker Tape Grid Overlay */
#price-chart::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image:
        linear-gradient(rgba(212, 175, 55, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.03) 1px, transparent 1px);
    background-size: 25px 25px;
    z-index: 1;
    pointer-events: none;
}

/* Corner Brackets */
#price-chart::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid rgba(255, 215, 0, 0.3);
    clip-path: polygon(
        0 15px, 15px 0, 40px 0, 40px 1px, 16px 1px, 1px 16px, 1px 40px, 0 40px,
        0 calc(100% - 40px), 1px calc(100% - 40px), 1px calc(100% - 16px), 16px calc(100% - 1px), 40px calc(100% - 1px), 40px 100%, 15px 100%, 0 calc(100% - 15px),
        calc(100% - 40px) 100%, calc(100% - 40px) calc(100% - 1px), calc(100% - 16px) calc(100% - 1px), calc(100% - 1px) calc(100% - 16px), calc(100% - 1px) calc(100% - 40px), 100% calc(100% - 40px), 100% calc(100% - 15px), calc(100% - 15px) 100%,
        100% 40px, calc(100% - 1px) 40px, calc(100% - 1px) 16px, calc(100% - 16px) 1px, calc(100% - 40px) 1px, calc(100% - 40px) 0, calc(100% - 15px) 0, 100% 15px
    );
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 768px) {
    #price-chart {
        height: 450px;
        border-color: rgba(212, 175, 55, 0.2);
    }
}


/* ==========================================================================
   MONARCH TERMINAL: BLACK & GOLD EDITION (FINAL POLISH)
   ========================================================================== */

/* 1. The Main Terminal Chassis */
.monarch-terminal {
    background-color: #080808; /* Pure Obsidian */
    border: 1px solid rgba(212, 175, 55, 0.3); /* Gold Border */
    border-radius: 4px;
    padding: 1.5rem;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    height: 100%;
    overflow-y: auto;
}

/* 2. Header Deck */
.monarch-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid rgba(212, 175, 55, 0.5); /* Solid Gold Line */
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.m-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #D4AF37; /* Institutional Gold */
    letter-spacing: 2px;
    text-transform: uppercase;
}

.m-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: #666;
}

/* 3. Metrics Grid */
.monarch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.m-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px;
    border-radius: 2px;
}

.m-label {
    font-size: 0.6rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.m-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.m-sub {
    font-size: 0.65rem;
    color: #555;
    text-transform: uppercase;
}

/* 4. Text Content */
.intel-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: #D4AF37;
    margin-bottom: 8px;
    opacity: 0.8;
}

.intel-text {
    font-size: 0.9rem;
    color: #ccc; /* Soft White */
    line-height: 1.6;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-left: 2px solid #333;
}

.intel-text strong {
    color: #fff; /* Titanium White */
    font-weight: 600;
}

/* 5. Watch Levels List */
.monarch-levels {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.level-row {
    display: flex;
    justify-content: space-between;
    background: rgba(212, 175, 55, 0.05); /* Very faint gold tint */
    padding: 8px 12px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
}

.lvl-label { color: #888; }
.lvl-price { color: #fff; font-weight: 700; }
.gold-text { color: #D4AF37; }

/* 6. Verdict Banner */
.monarch-verdict {
    margin-top: auto; /* Push to bottom */
    text-align: center;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: #111; /* Default Fallback */
    transition: all 0.3s ease;
}

.v-label {
    font-size: 0.6rem;
    letter-spacing: 2px;
    margin-bottom: 5px;
    opacity: 0.8;
}

.v-main {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.v-sub {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.9;
}

/* --- Verdict States (Background Colors) --- */

/* BUY: Green Background, White Text */
.monarch-verdict.v-bull {
    background-color: #008751; /* Vibrant Green */
    border-color: #00a865;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(0, 135, 81, 0.3);
}
.monarch-verdict.v-bull .v-label,
.monarch-verdict.v-bull .v-main,
.monarch-verdict.v-bull .v-sub {
    color: #ffffff;
}

/* SELL: Red Background, White Text */
.monarch-verdict.v-bear {
    background-color: #D32F2F; /* Deep Alert Red */
    border-color: #e53935;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(211, 47, 47, 0.3);
}
.monarch-verdict.v-bear .v-label,
.monarch-verdict.v-bear .v-main,
.monarch-verdict.v-bear .v-sub {
    color: #ffffff;
}

/* NEUTRAL: White Background, Dark Text (For Readability) */
.monarch-verdict.v-neutral {
    background-color: #F5F5F5; /* Stark White/Grey */
    border-color: #ffffff;
    color: #000000;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}
.monarch-verdict.v-neutral .v-label,
.monarch-verdict.v-neutral .v-main,
.monarch-verdict.v-neutral .v-sub {
    color: #000000; /* Overriding to black so it's visible on white */
}

.monarch-footer {
    margin-top: auto; /* Pushes it to the very bottom of the container */
    padding-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1); /* Subtle separation line */

    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem; /* Micro-text size */
    color: rgba(255, 255, 255, 0.3); /* Dim white (30% opacity) */

    text-align: center;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Optional: Slight brighten on hover so it's readable if needed */
.monarch-footer:hover {
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
}


/* ==========================================================================
   TACTICAL SCENARIOS: "FLIGHT TELEMETRY" HUD (Black/Gold/White)
   ========================================================================== */

/* 1. Main HUD Panel (The Container) */
.trade-plan-container {
    background-color: #050505; /* Deep Space Black */

    /* Subtle Grid Background for Texture */
    background-image:
        linear-gradient(rgba(212, 175, 55, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 175, 55, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;

    /* Tech Border with Glow */
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.1), inset 0 0 20px rgba(0,0,0,0.8);

    border-radius: 4px;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Corner Accents (The "Brackets") */
.trade-plan-container::before,
.trade-plan-container::after {
    content: "";
    position: absolute;
    width: 15px; height: 15px;
    border: 2px solid #D4AF37; /* Solid Gold */
    transition: all 0.3s ease;
}
.trade-plan-container::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.trade-plan-container::after { bottom: 0; right: 0; border-left: none; border-top: none; }

/* 2. Scenario Grid */
.trade-plan-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    margin-top: 10px;
}

/* 3. The Modules (Individual Scenarios) */
.scenario-item {
    background: rgba(20, 20, 20, 0.6); /* Semi-transparent backing */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left-width: 4px; /* Status Indicator Bar */
    padding: 12px 15px;
    position: relative;
    transition: all 0.2s ease;
    backdrop-filter: blur(2px);
}

/* Hover State: "Active Scan" */
.scenario-item:hover {
    background: rgba(212, 175, 55, 0.05); /* Gold Tint */
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateX(4px); /* Mechanical slide */
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.5);
}

/* 4. Scenario Labels (The "Heads Up" Text) */
.scenario-label {
    display: block;
    font-family: 'Orbitron', sans-serif; /* Tech Font */
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

/* Blinking Indicator Dot */
.scenario-label::before {
    content: "●";
    margin-right: 8px;
    font-size: 0.6rem;
    animation: pulse 2s infinite;
}

/* --- THEME COLORS (Black/Gold/White) --- */

/* Bullish: The "Target Acquired" Look (Gold) */
.scenario-label.bullish {
    color: #D4AF37;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}
.scenario-item:has(.bullish) { border-left-color: #D4AF37; }

/* Bearish: The "System Warning" Look (Titanium White) */
.scenario-label.bearish {
    color: #FFFFFF;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
.scenario-item:has(.bearish) { border-left-color: #FFFFFF; }

/* Neutral: The "Standby" Look (Grey) */
.scenario-label.neutral {
    color: #888;
}
.scenario-item:has(.neutral) { border-left-color: #444; }

/* 5. Body Text (Stream Data) */
.scenario-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: #ccc; /* Soft White */
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

/* Highlighted Data */
.scenario-text strong {
    color: #fff;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.1);
    padding: 0 4px;
    border-radius: 2px;
}

/* 6. Footer/Disclaimer (Micro-text) */
.scenario-disclaimer {
    margin-top: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: #555;
    text-transform: uppercase;
    text-align: right;
    border-top: 1px dashed #333;
    padding-top: 8px;
    letter-spacing: 1px;
}

/* Animation for the Indicator Dot */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* ==========================================================================
   QUANT ANALYST INTELLIGENCE MODULE (HUD UPGRADE)
   Target: #quant-analyst-content
   Theme: Monarch "Black Box" | Obsidian & Gold
   ========================================================================== */

/* 1. Main Container: The "Black Box" */
#quant-analyst-content {
    background-color: #08090A; /* Deepest Obsidian */
    border: 1px solid #2d333b; /* Subtle metal border */
    border-left: 4px solid var(--accent-primary); /* Gold Spine */
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    min-height: 200px; /* Ensure structure */
}

/* 2. Top Bar: Signal & Context */
.qa-header-strip {
    background: linear-gradient(90deg, rgba(22, 27, 34, 1) 0%, rgba(13, 17, 23, 1) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qa-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Pulsing Status Dot */
.qa-label::before {
    content: '';
    width: 6px; height: 6px;
    background-color: var(--accent-primary);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-primary);
    animation: qa-pulse 2s infinite;
}

.qa-signal-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Default Gold/Neutral */
    background: rgba(212, 175, 55, 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
}

/* Signal States (Optional overrides) */
.qa-signal-badge.bullish { color: #00FF99; border-color: rgba(0, 255, 153, 0.3); background: rgba(0, 255, 153, 0.1); box-shadow: 0 0 10px rgba(0, 255, 153, 0.1); }
.qa-signal-badge.bearish { color: #FF3131; border-color: rgba(255, 49, 49, 0.3); background: rgba(255, 49, 49, 0.1); box-shadow: 0 0 10px rgba(255, 49, 49, 0.1); }

/* 3. The Narrative Body */
.qa-body {
    padding: 20px 25px;
    color: #e6edf3;
    font-size: 0.95rem;
    line-height: 1.6;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.02), transparent 70%);
}

.qa-row {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.qa-row:last-child { margin-bottom: 0; }

.qa-concept-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    border-left: 2px solid var(--accent-primary);
    padding-left: 10px;
    display: inline-block;
}

.qa-text {
    color: #c9d1d9; /* Soft Silver */
    margin-left: 12px;
    font-size: 0.9rem;
}

/* Insight Box (The "Plain English" part) */
.qa-insight-box {
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #d2a8ff; /* Tech Purple for insights */
    display: inline-block;
}
.qa-insight-box strong { color: #fff; font-weight: 600; margin-right: 5px; }

/* 4. Bottom Metrics Deck (The HUD) */
.qa-metrics-deck {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: #0d1117;
    margin-top: auto; /* Push to bottom */
}

.qa-metric-cell {
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    transition: background 0.2s;
}
.qa-metric-cell:last-child { border-right: none; }
.qa-metric-cell:hover { background: rgba(255, 255, 255, 0.02); }

.qa-metric-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: #8b949e;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.qa-metric-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

@keyframes qa-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Mobile Stack */
@media (max-width: 768px) {
    .qa-metrics-deck { grid-template-columns: 1fr; }
    .qa-metric-cell {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 20px;
    }
}

#loader-container {
    position: absolute; /* or fixed, depending on your layout */
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 10, 12, 0.95); /* Deep dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.loader-content {
    width: 300px; /* Width of the progress bar */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%; /* JS will change this */
    background: #D4AF37; /* Monarch Gold */
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    transition: width 0.4s ease-out; /* Smooths the jumps */
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary, #888);
}

#progress-text {
    color: #D4AF37; /* Gold text */
    text-transform: uppercase;
}

.hidden {
    display: none !important;
}

/* --- TAB DESCRIPTION BOX (UPDATED) --- */
.tab-description-box {
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 4px;
    margin-bottom: 15px;
    font-family: 'Roboto Mono', monospace;
}

.desc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    background: rgba(212, 175, 55, 0.05);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.desc-header:hover {
    background: rgba(212, 175, 55, 0.1);
}

.desc-title-group { display: flex; align-items: center; gap: 8px; }
.desc-icon { color: #00F3FF; font-size: 11px; font-weight: bold; }
.desc-title { color: #D4AF37; font-size: 11px; font-weight: bold; letter-spacing: 1px; }
.desc-hint { color: rgba(255, 255, 255, 0.3); font-size: 9px; text-transform: uppercase; }

/* The Fix is here: Enforcing overflow and a larger max-height */
.desc-content {
    padding: 0 15px;
    max-height: 600px; /* Increased to fit the new text */
    overflow: hidden;  /* Strictly hides text when collapsed */
    color: #E0E0E0;
    font-size: 11px;
    line-height: 1.6;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 1;
}

.desc-content p {
    margin: 12px 0;
    color: #00F3FF; /* Highlights the intro text */
}

/* Grid layout for the expanded text */
.desc-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.desc-column {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    padding: 10px;
    border-left: 2px solid #D4AF37;
}

.desc-column strong {
    color: #FFF;
    display: block;
    margin-bottom: 4px;
}

/* Collapsed State Class */
.desc-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    border: none;
}

/* =========================================
   M.O.N.A.R.C.H. HIGH-FIDELITY HUD UPGRADES (PURE WHITE TEXT)
   ========================================= */

/* 1. Terminal Glassmorphism & Scanlines */
.monarch-terminal {
    background: linear-gradient(145deg, #0d1117 0%, #050505 100%);
    box-shadow: inset 0 0 20px rgba(0, 243, 255, 0.03), 0 8px 25px rgba(0, 0, 0, 0.6);
    border: 1px solid #30363d;
    border-top: 2px solid #D4AF37; /* Institutional Gold Crown */
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-family: 'Roboto Mono', monospace;
    color: #ffffff; /* PURE WHITE BASE */
}

/* Subtle CRT Scanline Overlay */
.monarch-terminal::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: -1;
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
}

.monarch-header {
    border-bottom: 1px solid #30363d;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.m-title {
    color: #FFD700; /* Institutional Gold */
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 1px;
}

.m-meta {
    color: #ffffff; /* PURE WHITE */
    font-size: 0.85em;
    margin-top: 4px;
    text-transform: uppercase;
}

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

/* 2. Card Depth & Hover Glow */
.m-card {
    background: linear-gradient(180deg, rgba(22, 27, 34, 0.9) 0%, rgba(13, 17, 23, 0.9) 100%);
    border: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    padding: 10px;
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.m-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 243, 255, 0.1);
    border-color: rgba(0, 243, 255, 0.4); /* Jarvis Blue Glow */
}

.m-label, .intel-title, .v-label {
    color: #ffffff; /* PURE WHITE */
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    font-weight: 700;
}

.m-value {
    font-size: 1.2em;
    font-weight: 600;
    color: #ffffff; /* PURE WHITE */
}

/* Conditional Colors for Python JSON Injection */
.m-value.text-white { color: #ffffff; }
.m-value.text-dim { color: rgba(255, 255, 255, 0.8); }
.m-value.gold-flash {
    color: #FFD700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    animation: pulse 2s infinite;
}

.m-sub {
    font-size: 0.75em;
    color: #ffffff; /* PURE WHITE */
    margin-top: 3px;
    text-transform: uppercase;
}

/* 3. Glowing Pulse on Intelligence Border */
.monarch-intel, .monarch-levels {
    margin-bottom: 15px;
    background: rgba(22, 27, 34, 0.6);
    padding: 12px;
    backdrop-filter: blur(4px);
    border-left: 3px solid #00F3FF;
    border-radius: 0 4px 4px 0;
    box-shadow: inset 10px 0 20px -10px rgba(0, 243, 255, 0.15);
    animation: intelPulse 4s infinite alternate;
}

@keyframes intelPulse {
    0% { border-left-color: rgba(0, 243, 255, 0.5); box-shadow: inset 10px 0 20px -10px rgba(0, 243, 255, 0.05); }
    100% { border-left-color: rgba(0, 243, 255, 1); box-shadow: inset 10px 0 20px -10px rgba(0, 243, 255, 0.2); }
}

.intel-text {
    font-size: 0.9em;
    line-height: 1.5;
    color: #ffffff; /* PURE WHITE */
}

.intel-text strong {
    color: #FFD700;
}

.level-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
    font-size: 0.9em;
    color: #ffffff; /* PURE WHITE */
}
.level-row:last-child { border-bottom: none; }

/* FIX FOR SMART TREND BASE / HISTORICAL ZONES */
.lvl-label {
    color: #ffffff !important;
    font-weight: 700;
}

.gold-text { color: #FFD700; font-weight: 600; }

/* FIX FOR VALUATION MODEL (White Background, Black Text) */
.monarch-verdict,
.monarch-verdict.v-neutral,
.monarch-verdict.v-bull,
.monarch-verdict.v-bear {
    padding: 12px;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 15px;
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.monarch-verdict .v-label,
.monarch-verdict .v-main,
.monarch-verdict .v-sub {
    color: #000000 !important;
    text-shadow: none !important;
}

.monarch-verdict .v-main {
    font-size: 1.1em;
    font-weight: 700;
    margin: 5px 0;
}

/* FIX FOR RISK WARNING (White Background, Black Text) */
.monarch-disclaimer-loud {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.7em;
    line-height: 1.4;
    margin-bottom: 10px;
}

.monarch-disclaimer-loud strong {
    color: #000000 !important;
}

.monarch-footer {
    text-align: center;
    font-size: 0.65em;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    text-transform: uppercase;
}

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

/* 4. Tactical Scenarios (Cyberpunk Edge-Lighting) */
.trade-plan-container { margin-top: 25px; }

.scenario-item {
    background: linear-gradient(90deg, #161b22 0%, #0d1117 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 12px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.scenario-item::before {
    content: '';
    position: absolute;
    left: -1px; top: -1px; bottom: -1px;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

.scenario-item:nth-child(1)::before { background-color: #00CC66; box-shadow: 0 0 10px #00CC66; }
.scenario-item:nth-child(2)::before { background-color: #FF4444; box-shadow: 0 0 10px #FF4444; }
.scenario-item:nth-child(3)::before { background-color: #D4AF37; box-shadow: 0 0 10px #D4AF37; }

.scenario-label {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
}

.scenario-label.bullish { color: #00CC66; text-shadow: 0 0 5px rgba(0, 204, 102, 0.3); }
.scenario-label.bearish { color: #FF4444; text-shadow: 0 0 5px rgba(255, 68, 68, 0.3); }
.scenario-label.neutral { color: #D4AF37; text-shadow: 0 0 5px rgba(212, 175, 55, 0.3); }

.scenario-text {
    font-size: 0.9rem;
    color: #ffffff; /* PURE WHITE */
    line-height: 1.5;
}

.scenario-disclaimer {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
    text-align: right;
    margin-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    padding-top: 8px;
}

.agent-narrative-box {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.85);  /* Deep, flat institutional slate */
    border-left: 3px solid #00F3FF;      /* Thicker, sharper telemetry stripe */
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;                   /* Slightly bumped up for readability */
    font-weight: 500;                    /* Medium weight to make the text solid */
    color: #F8FAFC;                      /* Stark, crisp off-white for maximum contrast */
    line-height: 1.5;
    border-radius: 0 4px 4px 0;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* Inner shadow for a recessed hardware look */
}

/* Institutional emphasis for the Verdict */
.agent-narrative-box strong {
    color: #FACC15;                      /* Brighter, sharper gold */
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* =========================================
   BLOOMBERG-STYLE COMMAND BAR
   ========================================= */

.command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 16px;
    background: linear-gradient(180deg, #0D0D0D 0%, #080808 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    gap: 12px;
}

.command-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.command-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

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

.command-label {
    font-family: 'Roboto Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    color: #D4AF37;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.8;
}

.command-separator {
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.4) 50%, transparent 100%);
    margin: 0 4px;
}

.command-dropdown {
    min-width: 160px;
    padding: 8px 32px 8px 12px;
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #FFFFFF;
    background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%);
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23D4AF37' d='M1 3l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.command-dropdown:hover {
    border-color: #D4AF37;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
}

.command-dropdown:focus {
    outline: none;
    border-color: #D4AF37;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.25);
}

.command-dropdown option {
    background-color: #0F0F0F;
    color: #FFFFFF;
    padding: 8px;
    font-family: 'Roboto Mono', monospace;
}

.ticker-dropdown {
    min-width: 140px;
    text-transform: uppercase;
}

.module-dropdown {
    min-width: 180px;
}

/* GO Button - Bloomberg Orange Style */
.run-module-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000000;
    background: linear-gradient(180deg, #FFB800 0%, #FF9500 50%, #E68A00 100%);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    min-width: 80px;
}

.run-module-button:hover {
    background: linear-gradient(180deg, #FFC933 0%, #FFB800 50%, #FF9500 100%);
    box-shadow: 0 4px 16px rgba(255, 149, 0, 0.5), 0 0 20px rgba(255, 149, 0, 0.3);
    transform: translateY(-1px);
}

.run-module-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 149, 0, 0.4);
}

.run-module-button .run-icon {
    font-size: 10px;
}

.run-module-button .run-text {
    font-weight: 800;
}

/* Command Preview - Shows current selection */
.command-preview {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 4px;
    margin-left: 8px;
}

.preview-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    color: #D4AF37;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Compact Trade Button */
.trade-button-compact {
    padding: 8px 16px;
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFFFFF;
    background: linear-gradient(180deg, #2E7D32 0%, #1B5E20 100%);
    border: 1px solid rgba(76, 175, 80, 0.5);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.trade-button-compact:hover {
    background: linear-gradient(180deg, #388E3C 0%, #2E7D32 100%);
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.4);
}

.command-bar-logo {
    height: 150px;
    opacity: 5.0;
    transition: opacity 0.2s ease;
}

.command-bar-logo:hover {
    opacity: 1;
}

/* Light Mode Overrides */
[data-theme="light"] .command-bar {
    background: linear-gradient(180deg, #FAFAFA 0%, #F0F0F0 100%);
    border-bottom-color: rgba(184, 134, 11, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .command-dropdown {
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
    color: #1A1A1A;
    border-color: rgba(184, 134, 11, 0.5);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23B8860B' d='M1 3l4 4 4-4z'/%3E%3C/svg%3E");
}

[data-theme="light"] .command-dropdown option {
    background-color: #FFFFFF;
    color: #1A1A1A;
}

[data-theme="light"] .command-label {
    color: #B8860B;
}

[data-theme="light"] .command-preview {
    background: rgba(184, 134, 11, 0.08);
    border-color: rgba(184, 134, 11, 0.2);
}

[data-theme="light"] .preview-text {
    color: #B8860B;
}

[data-theme="light"] .command-separator {
    background: linear-gradient(180deg, transparent 0%, rgba(184, 134, 11, 0.4) 50%, transparent 100%);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .command-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }

    .command-bar-left {
        flex-wrap: wrap;
        justify-content: center;
    }

    .command-preview {
        display: none;
    }

    .command-bar-right {
        width: 100%;
        justify-content: center;
        padding-top: 8px;
        border-top: 1px solid rgba(212, 175, 55, 0.2);
    }
}

@media (max-width: 576px) {
    .command-dropdown {
        min-width: 130px;
        font-size: 12px;
        padding: 6px 28px 6px 10px;
    }

    .run-module-button {
        padding: 8px 14px;
        font-size: 12px;
        min-width: 60px;
    }

    .command-label {
        font-size: 8px;
    }

    .command-separator {
        display: none;
    }

    .command-bar-logo {
        height: 30px;
    }

    .trade-button-compact {
        padding: 6px 12px;
        font-size: 10px;
    }
}

/* =========================================
   TECHNICALS VIEW BASE STYLING
   ========================================= */

#technicals-view {
    position: relative;
    min-height: 100vh;
}

/* =========================================
   TECHNICALS LOADING OVERLAY
   ========================================= */

.technicals-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #050505 0%, #0a0a0a 50%, #080808 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.technicals-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.technicals-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(212, 175, 55, 0.1);
    border-top: 3px solid #D4AF37;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-title {
    font-family: 'Roboto Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 6px;
    color: #D4AF37;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.loading-ticker {
    font-family: 'Roboto Mono', monospace;
    font-size: 32px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.loading-progress-container {
    width: 280px;
    height: 4px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.loading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #D4AF37 0%, #FFD700 50%, #D4AF37 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.loading-status {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    color: rgba(212, 175, 55, 0.7);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Loading status animation */
.loading-status::after {
    content: '';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}

/* Light Mode */
[data-theme="light"] .technicals-loading-overlay {
    background: linear-gradient(135deg, #F5F3EF 0%, #FFFFFF 50%, #F9F7F3 100%);
}

[data-theme="light"] .loading-title {
    color: #B8860B;
    text-shadow: none;
}

[data-theme="light"] .loading-ticker {
    color: #1A1A1A;
}

[data-theme="light"] .loading-spinner {
    border-color: rgba(184, 134, 11, 0.1);
    border-top-color: #B8860B;
}

[data-theme="light"] .loading-progress-container {
    background: rgba(184, 134, 11, 0.1);
}

[data-theme="light"] .loading-progress-bar {
    background: linear-gradient(90deg, #B8860B 0%, #D4AF37 50%, #B8860B 100%);
}

[data-theme="light"] .loading-status {
    color: rgba(184, 134, 11, 0.7);
}

/* ============================================================ */
/* MONARCH TECHNICALS v2.0 - CONSENSUS & INDICATOR STYLES       */
/* ============================================================ */

/* --- TECHNICAL CONSENSUS PANEL --- */
.technical-consensus-panel {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgba(212, 175, 55, 0.02));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.consensus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.consensus-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #D4AF37;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.consensus-icon {
    font-size: 1.1rem;
}

.consensus-verdict {
    display: flex;
    align-items: center;
    gap: 12px;
}

.verdict-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.verdict-label.bullish {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.verdict-label.bearish {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.verdict-label.neutral {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.4);
}

.verdict-confidence {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: #9ca3af;
}

.consensus-body {
    margin-bottom: 16px;
}

.consensus-summary {
    font-size: 0.95rem;
    color: #d1d5db;
    line-height: 1.6;
    margin-bottom: 12px;
}

.consensus-action {
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid #D4AF37;
    padding: 10px 16px;
    border-radius: 0 4px 4px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 500;
}

.consensus-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.signal-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.signal-badge .signal-name {
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.signal-badge .signal-value {
    font-weight: 600;
}

.signal-badge .signal-value.bullish { color: #22c55e; }
.signal-badge .signal-value.bearish { color: #ef4444; }
.signal-badge .signal-value.neutral { color: #eab308; }
.signal-badge .signal-value.stressed { color: #f97316; }

/* --- CLEANED UP INDICATOR CARDS --- */
.indicator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.indicator-header h3 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: #D4AF37;
    margin: 0;
    letter-spacing: 0.5px;
}

.indicator-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.indicator-badge.bullish {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.indicator-badge.bearish {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.indicator-badge.neutral {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.indicator-badge.overbought {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.indicator-badge.oversold {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.indicator-badge.stressed {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.indicator-badge.normal {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

/* Override indicator-reading for proper positioning */
.indicator-card .indicator-reading {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
    padding: 10px 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

/* --- HIDE VERBOSE AGENT NARRATIVE BOXES --- */
.agent-narrative-box {
    display: none !important;
}

/* --- RESPONSIVE CONSENSUS PANEL --- */
@media (max-width: 768px) {
    .consensus-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .consensus-signals {
        flex-direction: column;
    }

    .verdict-label {
        font-size: 0.95rem;
        padding: 5px 12px;
    }
}

/* ============================================================ */
/* MONARCH GENERIC LOADING OVERLAY STYLES                       */
/* Add this to your style.css file                              */
/* ============================================================ */

/* --- GENERIC MONARCH LOADING OVERLAY --- */
.monarch-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #050505 0%, #0a0a0a 50%, #080808 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.monarch-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.monarch-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

/* Light Mode Support for Generic Overlay */
[data-theme="light"] .monarch-loading-overlay {
    background: linear-gradient(135deg, #F5F3EF 0%, #FFFFFF 50%, #F9F7F3 100%);
}

/* ============================================================ */
/* VIEW-SPECIFIC LOADING OVERLAY CUSTOMIZATIONS                 */
/* These allow different accent colors per module               */
/* ============================================================ */

/* Bid-Ask Analysis - Cyan accent */
#bidask-loading-overlay .loading-title {
    color: #00F3FF;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
}

#bidask-loading-overlay .loading-spinner {
    border: 3px solid rgba(0, 243, 255, 0.1);
    border-top: 3px solid #00F3FF;
}

#bidask-loading-overlay .loading-progress-bar {
    background: linear-gradient(90deg, #00F3FF 0%, #00BFFF 50%, #00F3FF 100%);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
}

#bidask-loading-overlay .loading-status {
    color: rgba(0, 243, 255, 0.7);
}

#bidask-loading-overlay .loading-progress-container {
    background: rgba(0, 243, 255, 0.1);
}

/* Command Center - Cyan accent */
#command-center-loading-overlay .loading-title {
    color: #00F3FF;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
}

#command-center-loading-overlay .loading-spinner {
    border: 3px solid rgba(0, 243, 255, 0.1);
    border-top: 3px solid #00F3FF;
}

#command-center-loading-overlay .loading-progress-bar {
    background: linear-gradient(90deg, #00F3FF 0%, #00BFFF 50%, #00F3FF 100%);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
}

#command-center-loading-overlay .loading-status {
    color: rgba(0, 243, 255, 0.7);
}

#command-center-loading-overlay .loading-progress-container {
    background: rgba(0, 243, 255, 0.1);
}

/* Orion Engine - Green accent */
#orion-loading-overlay .loading-title {
    color: #4cd964;
    text-shadow: 0 0 20px rgba(76, 217, 100, 0.3);
}

#orion-loading-overlay .loading-spinner {
    border: 3px solid rgba(76, 217, 100, 0.1);
    border-top: 3px solid #4cd964;
}

#orion-loading-overlay .loading-progress-bar {
    background: linear-gradient(90deg, #4cd964 0%, #7CFC00 50%, #4cd964 100%);
    box-shadow: 0 0 10px rgba(76, 217, 100, 0.5);
}

#orion-loading-overlay .loading-status {
    color: rgba(76, 217, 100, 0.7);
}

#orion-loading-overlay .loading-progress-container {
    background: rgba(76, 217, 100, 0.1);
}

/* Volatility Hunter - Gold accent */
#volatility-loading-overlay .loading-title {
    color: #dbab09;
    text-shadow: 0 0 20px rgba(219, 171, 9, 0.3);
}

#volatility-loading-overlay .loading-spinner {
    border: 3px solid rgba(219, 171, 9, 0.1);
    border-top: 3px solid #dbab09;
}

#volatility-loading-overlay .loading-progress-bar {
    background: linear-gradient(90deg, #dbab09 0%, #FFD700 50%, #dbab09 100%);
    box-shadow: 0 0 10px rgba(219, 171, 9, 0.5);
}

#volatility-loading-overlay .loading-status {
    color: rgba(219, 171, 9, 0.7);
}

#volatility-loading-overlay .loading-progress-container {
    background: rgba(219, 171, 9, 0.1);
}

/* Yield Sensitivity - Gold accent */
#yields-loading-overlay .loading-title {
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

#yields-loading-overlay .loading-spinner {
    border: 3px solid rgba(255, 215, 0, 0.1);
    border-top: 3px solid #FFD700;
}

#yields-loading-overlay .loading-progress-bar {
    background: linear-gradient(90deg, #FFD700 0%, #FFA500 50%, #FFD700 100%);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

#yields-loading-overlay .loading-status {
    color: rgba(255, 215, 0, 0.7);
}

#yields-loading-overlay .loading-progress-container {
    background: rgba(255, 215, 0, 0.1);
}

/* ============================================================ */
/* LIGHT MODE VARIANTS FOR VIEW-SPECIFIC OVERLAYS               */
/* ============================================================ */

[data-theme="light"] #bidask-loading-overlay .loading-title,
[data-theme="light"] #command-center-loading-overlay .loading-title {
    color: #0088AA;
    text-shadow: none;
}

[data-theme="light"] #bidask-loading-overlay .loading-ticker,
[data-theme="light"] #command-center-loading-overlay .loading-ticker {
    color: #1A1A1A;
}

[data-theme="light"] #bidask-loading-overlay .loading-spinner,
[data-theme="light"] #command-center-loading-overlay .loading-spinner {
    border-color: rgba(0, 136, 170, 0.1);
    border-top-color: #0088AA;
}

[data-theme="light"] #orion-loading-overlay .loading-title {
    color: #228B22;
    text-shadow: none;
}

[data-theme="light"] #orion-loading-overlay .loading-ticker {
    color: #1A1A1A;
}

[data-theme="light"] #orion-loading-overlay .loading-spinner {
    border-color: rgba(34, 139, 34, 0.1);
    border-top-color: #228B22;
}

[data-theme="light"] #volatility-loading-overlay .loading-title,
[data-theme="light"] #yields-loading-overlay .loading-title {
    color: #B8860B;
    text-shadow: none;
}

[data-theme="light"] #volatility-loading-overlay .loading-ticker,
[data-theme="light"] #yields-loading-overlay .loading-ticker {
    color: #1A1A1A;
}

[data-theme="light"] #volatility-loading-overlay .loading-spinner,
[data-theme="light"] #yields-loading-overlay .loading-spinner {
    border-color: rgba(184, 134, 11, 0.1);
    border-top-color: #B8860B;
}

/* Confluence Radar - Purple/Magenta accent */
#radar-loading-overlay .loading-title {
    color: #9D4EDD;
    text-shadow: 0 0 20px rgba(157, 78, 221, 0.3);
}

#radar-loading-overlay .loading-spinner {
    border: 3px solid rgba(157, 78, 221, 0.1);
    border-top: 3px solid #9D4EDD;
}

#radar-loading-overlay .loading-progress-bar {
    background: linear-gradient(90deg, #9D4EDD 0%, #E040FB 50%, #9D4EDD 100%);
    box-shadow: 0 0 10px rgba(157, 78, 221, 0.5);
}

#radar-loading-overlay .loading-status {
    color: rgba(157, 78, 221, 0.7);
}

#radar-loading-overlay .loading-progress-container {
    background: rgba(157, 78, 221, 0.1);
}

[data-theme="light"] #radar-loading-overlay .loading-title {
    color: #7B2CBF;
    text-shadow: none;
}

[data-theme="light"] #radar-loading-overlay .loading-ticker {
    color: #1A1A1A;
}

[data-theme="light"] #radar-loading-overlay .loading-spinner {
    border-color: rgba(123, 44, 191, 0.1);
    border-top-color: #7B2CBF;
}

/* ==========================================================================
   NGX LIVE PRICE - TICKER TAPE DELAY LABEL (FIXED)
   The label is now OUTSIDE the ticker tape so prices don't overlay it
   Add this to your style.css file
   ========================================================================== */

/* Wrapper to position delay badge alongside ticker tape */
.ticker-tape-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    background: #0a0a0f;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

/* Delay badge - fixed position, won't be overlaid */
.ticker-delay-badge {
    background: rgba(212, 175, 55, 0.15);
    color: #D4AF37;
    font-size: 9px;
    font-weight: 600;
    padding: 4px 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-right: 1px solid rgba(212, 175, 55, 0.3);
    flex-shrink: 0;
    z-index: 10;
}

/* Ticker tape container - takes remaining space */
.ticker-tape-wrapper .ticker-tape-container {
    flex: 1;
    overflow: hidden;
    border-bottom: none; /* Remove duplicate border */
}