/* ═══════════════════════════════════════════════════════
   CoreX Signal AI – Demo Dashboard (Isolated to .page-demo)
   Pixel-perfect replica of the live dashboard screenshot
   ═══════════════════════════════════════════════════════ */

/* ── Globals ── */
.page-demo{background:#060a14;color:#c8d6e5;font-family:'Inter','JetBrains Mono',sans-serif;margin:0;padding:0;overflow-x:hidden}
.page-demo *,.page-demo *::before,.page-demo *::after{box-sizing:border-box}
.page-demo strong{font-weight:700}

/* ── Header ── */
#demoHeader{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#070c18;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap;font-size:.78rem;position:sticky;top:0;z-index:100}
.hdr-left{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-text{color:#00e676;font-weight:800;font-size:1.05rem;text-decoration:none;letter-spacing:.02em}
.logo-text .ai-badge{color:#ff5252;font-weight:900}
.hdr-separator{width:1px;height:20px;background:rgba(255,255,255,.12)}
.symbol-select{display:inline-flex;align-items:center;gap:6px;background:rgba(18,28,45,.7);border:1px solid rgba(255,255,255,.12);padding:5px 12px;border-radius:8px;color:#e0ecf8;cursor:default}
.symbol-select i:first-child{color:#ffd740}
.hdr-center,.hdr-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hdr-kv{display:inline-flex;gap:5px;color:#8899aa;white-space:nowrap}
.hdr-kv strong{color:#e4eef7}
.c-green{color:#1ef3ad!important}
.c-red{color:#ff5f7a!important}
.c-yellow{color:#ffc107!important}
.c-orange{color:#ff9800!important}
.c-cyan{color:#00e5ff!important}
.hdr-clock{margin-left:auto;display:flex;gap:18px;color:#8899aa;font-size:.76rem}
.hdr-clock strong{color:#fff;font-family:'JetBrains Mono',monospace;font-size:.88rem}
.clock-row{display:flex;gap:5px;align-items:baseline}
.hdr-user{display:flex;align-items:center;gap:10px}
.user-badge{background:rgba(255,152,0,.15);border:1px solid rgba(255,152,0,.4);color:#ffc107;padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:600}

/* ── Ticker Tape ── */
.ticker-tape{overflow:hidden;background:#0b1020;border-bottom:1px solid rgba(255,255,255,.05);height:28px;position:relative}
.ticker-track{display:flex;gap:28px;white-space:nowrap;animation:tickerScroll 30s linear infinite;position:absolute;top:0;left:0;height:100%;align-items:center;font-size:.74rem;font-family:'JetBrains Mono',monospace}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.ticker-item{display:inline-flex;align-items:center;gap:6px;color:#9dafc2}
.ticker-item .t-sym{font-weight:600;color:#d0deeb}
.ticker-item .t-val{font-weight:500}
.ticker-item .t-dir{padding:1px 6px;border-radius:4px;font-weight:700;font-size:.68rem}
.t-buy{background:rgba(30,243,173,.15);color:#1ef3ad}
.t-sell{background:rgba(255,95,122,.15);color:#ff5f7a}

/* ── Dashboard Layout ── */
.dash{max-width:1380px;margin:0 auto;padding:14px}
.dash-row{display:grid;gap:14px;margin-bottom:14px}
.row-2col{grid-template-columns:1fr 1fr}

/* ── Panels ── */
.panel{background:rgba(8,14,28,.85);border:1px solid rgba(120,180,255,.12);border-radius:12px;padding:14px;position:relative}
.panel-full{grid-column:1/-1}
.panel-hd{margin:0 0 12px;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:#7b8fa8;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.green{background:#1ef3ad;box-shadow:0 0 6px #1ef3ad}
.dot.orange{background:#ff9800;box-shadow:0 0 6px #ff9800}
.dot.cyan{background:#00e5ff;box-shadow:0 0 6px #00e5ff}
.dot.yellow{background:#ffd740;box-shadow:0 0 6px #ffd740}
.decision-badge{margin-left:auto;background:rgba(30,243,173,.1);border:1px solid rgba(30,243,173,.3);padding:2px 10px;border-radius:6px;color:#6bf5c8;font-size:.7rem}

/* ── Timeframe Grid ── */
.tf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tf-card{background:rgba(10,20,38,.9);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px;text-align:center;transition:border-color .3s}
.tf-card.highlight{border-color:#ffc107}
.tf-label{font-size:.68rem;color:#7889a0;letter-spacing:.06em;margin-bottom:6px}
.tf-signal{font-size:1rem;font-weight:700;margin-bottom:4px}
.tf-price{font-size:.82rem;color:#a0b1c8;font-family:'JetBrains Mono',monospace}
.tf-pct{font-size:.72rem;color:#6b7c92;margin-top:2px}
.signal-buy{color:#1ef3ad}
.signal-sell{color:#ff5f7a}
.signal-hold{color:#b0bfcf}

/* ── Decision Box ── */
.decision-box{border-left:3px solid #ffc107;background:linear-gradient(135deg,rgba(20,38,40,.5),rgba(8,18,30,.7));border-radius:10px;padding:16px}
.decision-title{margin:0 0 6px;color:#1ef3ad;font-size:1.15rem}
.diamond{margin-right:4px}
.decision-desc{color:#b8c8da;font-size:.9rem;margin:0 0 10px;line-height:1.45}
.meta-line{background:rgba(0,0,0,.25);border:1px solid rgba(120,255,200,.18);border-radius:6px;padding:8px 12px;font-size:.82rem;color:#9ab0c6;font-family:'JetBrains Mono',monospace;margin-bottom:12px}
.decision-stats{display:flex;gap:10px;flex-wrap:wrap}
.ds{background:rgba(10,24,42,.8);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 14px;text-align:center;min-width:100px}
.ds strong{display:block;font-size:1.05rem;color:#42f2be}
.ds span{font-size:.68rem;color:#7b8ea6;letter-spacing:.08em}

/* ── Gauge Grid ── */
.gauge-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gauge-item{position:relative;display:flex;align-items:center;justify-content:center;min-height:150px}
.gauge-item canvas{position:absolute}
.gauge-center{text-align:center;z-index:1}
.gauge-center strong{display:block;font-size:1.8rem;color:#e8f2ff}
.gauge-center span{font-size:.64rem;color:#7a8da5;letter-spacing:.08em;text-transform:uppercase}

/* ── Execution Optimization ── */
.exec-top{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.exec-chip{padding:5px 14px;border-radius:999px;font-size:.76rem;font-weight:600;border:1px solid rgba(255,255,255,.12)}
.exec-chip.buy{background:rgba(30,243,173,.15);border-color:rgba(30,243,173,.4);color:#1ef3ad}
.exec-chip.sell{background:rgba(255,95,122,.15);border-color:rgba(255,95,122,.4);color:#ff5f7a}
.exec-chip.rr{background:rgba(255,193,7,.12);border-color:rgba(255,193,7,.35);color:#ffc107}
.dot-chip{display:inline-flex;align-items:center;gap:5px}
.dot-sm{width:6px;height:6px;border-radius:50%;display:inline-block}
.dot-sm.green{background:#1ef3ad}
.lot-box{text-align:center;padding:12px;background:rgba(0,0,0,.2);border:1px solid rgba(255,193,7,.3);border-radius:10px;margin-bottom:12px}
.lot-label{font-size:.74rem;color:#8899aa;letter-spacing:.06em}
.lot-value{font-size:2.4rem;font-weight:800;color:#ffc064;display:block;font-family:'JetBrains Mono',monospace}
.sl-tp-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:.72rem;color:#8899aa;flex-wrap:wrap}
.bar-track{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:99px;position:relative;min-width:120px;overflow:visible}
.bar-fill{height:100%;border-radius:99px;position:absolute;left:0;top:0}
.bar-marker{width:3px;height:14px;background:#fff;border-radius:2px;position:absolute;top:-4px}
.sl-label{color:#ff5f7a}
.tp-label{color:#1ef3ad}
.entry-label{color:#d0deeb}
.risk-table{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rt-cell{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.06);border-radius:6px;padding:6px;text-align:center}
.rt-cell span{display:block;font-size:.64rem;color:#6b7c92;margin-bottom:2px;letter-spacing:.04em}
.rt-cell strong{font-size:.88rem;color:#d8e6f4;font-family:'JetBrains Mono',monospace}

/* ── Chart ── */
#priceChart{width:100%;background:rgba(0,0,0,.15);border-radius:8px;margin-top:10px}
.chart-filters{display:flex;gap:6px;align-items:center;font-size:.78rem;color:#8899aa;flex-wrap:wrap;margin-bottom:6px}
.cf-btn{background:rgba(20,35,55,.7);border:1px solid rgba(255,255,255,.1);color:#a0b3c8;padding:4px 12px;border-radius:6px;cursor:pointer;font-size:.72rem;font-weight:600;transition:all .2s}
.cf-btn.active{background:rgba(30,243,173,.12);border-color:rgba(30,243,173,.35);color:#1ef3ad}
.cf-btn.active.c-orange{background:rgba(255,152,0,.12);border-color:rgba(255,152,0,.35);color:#ff9800}

/* ── Secondary Timeframe Analysis ── */
.sec-hd{border-bottom:2px solid #ffd740;padding-bottom:8px}
.secondary-list{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.sec-item{background:rgba(6,14,28,.7);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:14px;border-left:3px solid #ffd740}
.sec-item h4{margin:0 0 4px;font-size:.95rem}
.sec-item h4 .si-action{font-weight:700}
.sec-item .si-sub{font-size:.84rem;color:#22d695;margin-bottom:6px}
.sec-item .si-meta{font-size:.78rem;color:#7889a0;font-family:'JetBrains Mono',monospace;margin-bottom:8px;line-height:1.5}
.sec-item .si-price-row{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:#8899aa;margin-bottom:6px}
.sec-item .si-price-row strong{color:#e4eef7;font-family:'JetBrains Mono',monospace}
.sec-item .si-stats{display:flex;gap:8px;flex-wrap:wrap}
.sec-item .si-stats .ds{min-width:80px;padding:6px 10px}

/* ── CTA ── */
.cta-box{background:linear-gradient(135deg,rgba(0,230,118,.06),rgba(0,0,0,0));border:1px solid rgba(0,230,118,.25);border-radius:14px;padding:28px;margin:18px 0 8px;text-align:center}
.cta-title{color:#fff;margin:0 0 8px;font-size:1.2rem}
.cta-subtitle{color:#8fa4be;margin:0 0 16px;font-size:.92rem}

/* ── 3-Column Row ── */
.row-3col{grid-template-columns:repeat(3,1fr)}
.row-3col .panel{display:flex;flex-direction:column}
.row-bottom{align-items:stretch}

/* ── Probabilistic Forecast Engine ── */
.forecast-badges{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.f-badge{border:1px solid rgba(0,229,255,.4);color:#00e5ff;padding:3px 12px;border-radius:999px;font-size:.72rem;font-weight:600}
#forecastCanvas{width:100%;border-radius:6px;margin-bottom:10px}
.forecast-values{display:flex;justify-content:space-between;margin-bottom:8px}
.fv-item{text-align:center}
.fv-label{display:block;font-size:.68rem;color:#6b7c92;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.fv-item strong{font-size:1.05rem;font-family:'JetBrains Mono',monospace}
.forecast-footer{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;color:#6b7c92}
.fc-spread{color:#8899aa}
.fc-spread strong{color:#d0deeb}

/* ── Institutional Depth Map ── */
.depth-box{border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px;margin-bottom:14px;background:rgba(0,0,0,.2)}
.depth-supply{border-color:rgba(255,95,122,.25)}
.depth-demand{border-color:rgba(30,243,173,.2);margin-bottom:0}
.depth-spot{text-align:center;font-size:.78rem;color:#8899aa;letter-spacing:.08em;text-transform:uppercase;margin:14px 0}
.depth-spot strong{display:inline;font-size:1.4rem;color:#e8f2ff;font-family:'JetBrains Mono',monospace;margin-left:8px}
.depth-fvg{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.fvg-badge{background:#1ef3ad;color:#040a10;padding:2px 10px;border-radius:4px;font-size:.72rem;font-weight:800;letter-spacing:.04em}
.fvg-badge.fvg-red{background:#ff5f7a}
.fvg-label{font-size:.82rem;color:#c8e0f2}
.depth-range{font-size:1.15rem;font-family:'JetBrains Mono',monospace;margin-bottom:10px}
.depth-bar-wrap{display:flex;align-items:center;gap:10px}
.depth-bar-track{flex:1;height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.depth-bar-fill{height:100%;background:#1ef3ad;border-radius:99px;transition:width .6s}
.depth-fill-red{background:#ff5f7a}
.depth-pct{font-size:.78rem;color:#8899aa;font-family:'JetBrains Mono',monospace}

/* ── Strategy Performance Curve ── */
#perfCanvas{width:100%;border-radius:6px}
.perf-date{text-align:right;font-size:.72rem;color:#5a6c82;margin:6px 0 10px}
.perf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ps-item{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.07);border-radius:6px;text-align:center;padding:8px 4px}
.ps-item span{display:block;font-size:.62rem;color:#6b7c92;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.ps-item strong{font-size:.95rem;font-family:'JetBrains Mono',monospace;color:#d8e6f4}

/* ── Model Interpretation Layer ── */
.panel-interp{display:flex;flex-direction:column}
.interp-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.interp-scroll{flex:1}
.interp-header .panel-hd{margin-bottom:0}
.interp-controls{display:flex;gap:6px}
.interp-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#8899aa;padding:4px 14px;border-radius:6px;cursor:pointer;font-size:.76rem;transition:all .2s}
.interp-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.interp-scroll{flex:1;overflow-y:auto;max-height:220px;padding-right:4px}
.interp-line{margin:0 0 10px;font-size:.86rem;color:#b3c4d6;line-height:1.55}
.interp-tf{font-weight:700;margin-right:4px}
.interp-action{font-weight:800;margin-right:4px}

/* ── Factor Cluster Analysis (Radar) ── */
#panelRadar{justify-content:flex-start}
#radarCanvas{width:100%;max-height:240px;display:block;margin:0 auto}

/* ── Attribution & Impact Drivers ── */
#panelAttribution .attr-list{display:flex;flex-direction:column;gap:10px;flex:1;justify-content:center}
.attr-row{display:flex;align-items:center;gap:8px}
.attr-name{width:80px;font-size:.78rem;color:#8899aa;font-family:'JetBrains Mono',monospace;text-align:right;flex-shrink:0}
.attr-bar-wrap{flex:1;height:10px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden;position:relative}
.attr-bar{height:100%;border-radius:99px;position:absolute;top:0}
.attr-neg{background:linear-gradient(90deg,#ff5f7a,#ff3355);right:50%;left:auto}
.attr-pos{background:linear-gradient(90deg,#0d7a5a,#1ef3ad);left:50%}
.attr-row strong{min-width:48px;font-size:.82rem;font-family:'JetBrains Mono',monospace;text-align:right}
.attr-dots{color:#1ef3ad;font-size:.6rem;letter-spacing:2px;margin-left:2px}

/* ── Market Regime Pulse ── */
.regime-value-row{display:flex;align-items:baseline;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.regime-val{font-size:2rem;font-family:'JetBrains Mono',monospace}
.regime-status{font-size:.82rem;color:#8899aa;letter-spacing:.08em;text-transform:uppercase}
.regime-status strong{color:#d0deeb}
.regime-pair-badge{border:1px solid rgba(255,255,255,.15);padding:2px 10px;border-radius:6px;font-size:.7rem;color:#8899aa}
.regime-slider{margin-bottom:16px}
.regime-track{position:relative;height:8px;border-radius:99px;overflow:visible}
.regime-gradient{width:100%;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff3355 0%,#ff5f7a 30%,#444 50%,#1ef3ad 70%,#1ef3ad 100%)}
.regime-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:#1ef3ad;border:2px solid #fff;box-shadow:0 0 8px rgba(30,243,173,.5);transition:left .6s}
.regime-labels{display:flex;justify-content:space-between;font-size:.7rem;color:#6b7c92;margin-top:4px;font-family:'JetBrains Mono',monospace}
.regime-corr{display:flex;align-items:center;gap:8px;font-size:.72rem;color:#6b7c92;letter-spacing:.08em;text-transform:uppercase}
.regime-corr strong{color:#1ef3ad;font-family:'JetBrains Mono',monospace}
.regime-corr-bar{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;max-width:180px}
.regime-corr-fill{display:block;height:100%;background:#1ef3ad;border-radius:99px;transition:width .6s}

/* ── Macro Intelligence Feed ── */
.macro-hd{display:flex;justify-content:space-between;align-items:flex-start}
.macro-hd .panel-hd{margin-bottom:10px}
.macro-intel-badge{color:#ff5f7a;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.macro-quote{margin:0 0 14px;padding:12px 16px;border-left:3px solid rgba(255,255,255,.2);background:rgba(0,0,0,.2);border-radius:0 8px 8px 0;font-size:.88rem;color:#c8dae8;line-height:1.5;font-style:normal}
.macro-sentiment{margin-bottom:10px}
.macro-sent-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:6px 16px;border-radius:999px;font-size:.78rem;color:#9aacbe;font-weight:600;letter-spacing:.06em}
.macro-sent-dot{width:10px;height:10px;border-radius:50%;background:#ffc107;display:inline-block}
.macro-ai-msg{color:#1ef3ad;font-size:.82rem;margin:0 0 14px;font-style:italic}
.macro-sessions{border-top:1px solid rgba(255,255,255,.06);padding-top:10px}
.macro-sess-title{display:block;font-size:.68rem;color:#6b7c92;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.macro-sess-row{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#9aacbe;margin-bottom:6px}
.macro-flag{font-size:1rem}
.macro-sess-row strong{margin-left:auto;font-family:'JetBrains Mono',monospace}

/* ── Regime & Structural DNA ── */
.dna-regime-label{text-align:center;margin-bottom:20px}
.dna-regime-name{display:block;font-size:1.3rem;color:#e0ecf8;letter-spacing:.06em;margin-bottom:4px}
.dna-h-val{font-size:.82rem;color:#6b7c92;font-family:'JetBrains Mono',monospace}
.dna-score-row{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.dna-score-label{font-size:.72rem;color:#6b7c92;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0}
.dna-score-track{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.08);position:relative}
.dna-score-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#ff5f7a;border:2px solid rgba(255,255,255,.2);box-shadow:0 0 6px rgba(255,95,122,.4);transition:left .6s}
.dna-score-row strong{font-size:1rem;font-family:'JetBrains Mono',monospace;min-width:40px;text-align:right}
.dna-ml-badge{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:10px 16px;border-radius:8px;font-size:.82rem;color:#8899aa;letter-spacing:.06em}
.dna-ml-dot{width:8px;height:8px;border-radius:50%;background:#6b7c92;flex-shrink:0}

/* ── Responsive ── */
@media(max-width:1024px){
    .row-2col,.row-3col{grid-template-columns:1fr}
    #demoHeader{font-size:.72rem}
    .hdr-center,.hdr-right{gap:8px}
    .perf-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
    #demoHeader{flex-direction:column;align-items:flex-start;gap:6px}
    .hdr-clock{margin-left:0;flex-wrap:wrap}
    .dash{padding:10px}
    .tf-grid{grid-template-columns:repeat(3,1fr)}
    .gauge-grid{grid-template-columns:1fr 1fr}
    .risk-table{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
    .tf-grid{grid-template-columns:repeat(2,1fr)}
    .gauge-grid{grid-template-columns:1fr}
    .risk-table{grid-template-columns:repeat(2,1fr)}
    .decision-stats{flex-direction:column}
}