/* ═══════════════════════════════════════════════
   DIRANEX — Shared Styles
   All pages import this. Change here = changes everywhere.
════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg0:#050A14;--bg1:#0A1628;--bg2:#0F2040;--bg3:#162848;--bg4:#1A3058;
  --cyan:#00C8FF;--cyan-dim:rgba(0,200,255,0.09);--cyan-border:rgba(0,200,255,0.22);
  --green:#00FF9D;--green-dim:rgba(0,255,157,0.09);
  --red:#FF3D6B;--red-dim:rgba(255,61,107,0.09);
  --gold:#FFB800;--gold-dim:rgba(255,184,0,0.09);
  --text:#E8F4FF;--text2:#7EAACF;--text3:#3D6080;
  --border:rgba(0,200,255,0.09);--border2:rgba(0,200,255,0.18);
  --mono:'Space Mono',monospace;--sans:'Outfit',sans-serif;
  --r:10px;--r-sm:6px;
  /* Color scheme tokens — overridden by scheme switcher */
  --c-bull:#26D07C;--c-lbull:#66BB6A;--c-neut:#90A4AE;
  --c-lbear:#EF9A9A;--c-bear:#EF5350;--c-warn:#FFB800;
  --bg-bull:rgba(38,208,124,0.1);--bg-lbull:rgba(102,187,106,0.06);
  --bg-neut:rgba(144,164,174,0.05);--bg-lbear:rgba(239,154,154,0.06);
  --bg-bear:rgba(239,83,80,0.1);--bg-warn:rgba(255,184,0,0.07);
  --bg-mode:rgba(0,200,255,0.05);--bg-trig:rgba(0,200,255,0.09);
}
html,body{background:var(--bg0);color:var(--text);font-family:var(--sans);font-size:13px}

/* ── SHARED HEADER ── */
.dx-header{height:52px;background:var(--bg1);border-bottom:1px solid var(--border2);display:flex;align-items:center;padding:0 16px;gap:12px;position:sticky;top:0;z-index:300;flex-shrink:0}
.dx-logo{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--cyan);letter-spacing:-0.02em}
.dx-logo-sub{font-size:9px;color:var(--text3);font-family:var(--mono);letter-spacing:0.06em}
.dx-prices{display:flex;align-items:center;gap:0;margin:0 8px}
.dx-price{display:flex;align-items:baseline;gap:5px;padding:0 12px;border-right:1px solid var(--border)}
.dx-price:last-child{border-right:none}
.dx-sym{font-family:var(--mono);font-size:9px;color:var(--text3);text-transform:uppercase}
.dx-val{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text)}
.dx-chg{font-family:var(--mono);font-size:10px}
.dx-chg.up{color:var(--green)}.dx-chg.dn{color:var(--red)}.dx-chg.flat{color:var(--text3)}
.dx-hright{margin-left:auto;display:flex;align-items:center;gap:10px}
.dx-live-dot{width:7px;height:7px;border-radius:50%;background:var(--text3);flex-shrink:0;transition:background 0.3s}
.dx-live-dot.connected{background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,255,157,0.4)}50%{box-shadow:0 0 0 4px rgba(0,255,157,0)}}
.dx-time{font-family:var(--mono);font-size:10px;color:var(--text2)}
.dx-lens-chip{display:flex;align-items:center;gap:5px;padding:4px 10px;background:var(--cyan-dim);border:1px solid var(--cyan-border);border-radius:20px;font-family:var(--mono);font-size:9px;color:var(--cyan);cursor:pointer;text-decoration:none;white-space:nowrap}
.dx-back{color:var(--text2);font-family:var(--mono);font-size:10px;padding:5px 10px;border:1px solid var(--border2);border-radius:var(--r-sm);text-decoration:none}
.dx-back:hover{color:var(--cyan);border-color:var(--cyan-border)}
.dx-pg-title{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--cyan);letter-spacing:0.08em}

/* ── WAITING STATE ── */
.dx-wait{color:var(--text3);font-family:var(--mono)}
.dx-wait::after{content:'--'}
.dx-connecting{font-family:var(--mono);font-size:10px;color:var(--text3);padding:40px;text-align:center;width:100%}

/* ── COMMON BADGES ── */
.badge{padding:2px 7px;border-radius:4px;font-family:var(--mono);font-size:8px;font-weight:700}
.b-cyan{background:var(--cyan-dim);color:var(--cyan);border:1px solid var(--cyan-border)}
.b-green{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,255,157,0.2)}
.b-red{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,61,107,0.2)}
.b-gold{background:var(--gold-dim);color:var(--gold);border:1px solid rgba(255,184,0,0.2)}

/* ── COMMON PILLS ── */
.pill{padding:4px 11px;border-radius:20px;font-family:var(--mono);font-size:9px;border:1px solid var(--border2);color:var(--text2);cursor:pointer;transition:all 0.15s}
.pill:hover{color:var(--text)}
.pill.a{background:var(--cyan-dim);border-color:var(--cyan-border);color:var(--cyan);font-weight:700}

/* ── PANEL ── */
.panel{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden}
.ph{padding:9px 12px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.04em}
.ph-right{margin-left:auto;display:flex;align-items:center;gap:6px}

/* ── TABLE ── */
.ft{border-collapse:collapse;white-space:nowrap;width:100%}
.ft .ml{padding:8px 12px;font-family:var(--mono);font-size:9px;color:var(--text3);background:var(--bg2);border-right:2px solid var(--border2);border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:0.05em;position:sticky;left:0;z-index:10;min-width:110px}
.ft .ch{padding:0;border-bottom:1px solid var(--border);border-right:1px solid var(--border);min-width:110px;vertical-align:top;background:var(--bg2)}
.ft .ch.mc{background:var(--bg-mode);border-left:2px solid var(--cyan-border)}
.ft .ch.tc{background:var(--bg-trig);border-left:2px solid var(--cyan)}
.ch-in{padding:7px 10px}
.ch-role{font-size:9px;font-weight:700;margin-bottom:1px;min-height:13px}
.ch-sh{font-family:var(--mono);font-size:8px;color:var(--text2)}
.ch-val{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--cyan);margin:2px 0}
.ch-trig{font-size:8px;color:var(--c-bull);font-family:var(--mono)}
.ft .dc{padding:7px 10px;font-family:var(--mono);font-size:10px;font-weight:600;border-bottom:1px solid var(--border);border-right:1px solid var(--border);text-align:center;vertical-align:middle;position:relative;cursor:default;color:var(--text3)}
.ft .dc.mc{background:var(--bg-mode);border-left:2px solid var(--cyan-border)}
.ft .dc.tc{background:var(--bg-trig);border-left:2px solid var(--cyan)}
.ft .dc.dim{opacity:0.28}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── SIGNAL COLORS ── */
.cs{color:var(--c-bull);background:var(--bg-bull)}.xs{color:var(--c-bear);background:var(--bg-bear)}.hs{color:var(--c-neut);background:var(--bg-neut)}
.cu{color:var(--c-bull);background:var(--bg-bull)}.cd{color:var(--c-bear);background:var(--bg-bear)}.cn{color:var(--c-neut);background:var(--bg-neut)}
.csu{color:var(--c-bull);background:rgba(38,208,124,0.14)}.cwu{color:var(--c-lbull);background:var(--bg-lbull)}
.cwd{color:var(--c-lbear);background:var(--bg-lbear)}.csd{color:var(--c-bear);background:rgba(239,83,80,0.14)}
.cbu{color:var(--c-bull);background:var(--bg-bull)}.clu{color:var(--c-lbull);background:var(--bg-lbull)}
.cld{color:var(--c-lbear);background:var(--bg-lbear)}.cbd{color:var(--c-bear);background:var(--bg-bear)}
.cke{color:#4A9EFF;background:rgba(30,80,200,0.12)}.cko{color:#26D07C;background:rgba(26,188,156,0.12)}
.ckb{color:var(--c-bull);background:var(--bg-bull)}.cnh{color:var(--c-neut);background:var(--bg-neut)}
.cnl{color:var(--text3);background:rgba(61,96,128,0.08)}.cbk{color:var(--c-warn);background:var(--bg-warn)}
.cbo{color:#C39BD3;background:rgba(155,89,182,0.12)}.cbe{color:#9B59B6;background:rgba(155,89,182,0.18)}
.pru{color:var(--c-bull);background:rgba(38,208,124,0.15)}.pbt{color:var(--c-bull);background:var(--bg-bull)}
.pwb{color:var(--c-lbull);background:var(--bg-lbull)}.pn{color:var(--c-neut);background:var(--bg-neut)}
.pwbe{color:var(--c-lbear);background:var(--bg-lbear)}.pbt2{color:var(--c-bear);background:var(--bg-bear)}
.prd{color:var(--c-bear);background:rgba(239,83,80,0.15)}
.sc-hi{color:var(--c-bull);font-weight:700}.sc-lo{color:var(--c-lbull)}.sc-nn{color:var(--text3)}.sc-ld{color:var(--c-lbear)}.sc-hd{color:var(--c-bear);font-weight:700}
.lsb{color:var(--c-bull);background:var(--bg-bull)}.lb{color:var(--c-lbull);background:var(--bg-lbull)}
.ln{color:var(--c-neut);background:var(--bg-neut)}.lbe{color:var(--c-lbear);background:var(--bg-lbear)}.lsb2{color:var(--c-bear);background:var(--bg-bear)}

/* ── BANNER ── */
.banner{border-radius:var(--r);overflow:hidden;border:1px solid var(--border2);transition:all 0.3s}
.banner.long{border-color:rgba(38,208,124,0.45);background:rgba(38,208,124,0.025)}
.banner.short{border-color:rgba(239,83,80,0.45);background:rgba(239,83,80,0.025)}
.banner.wait{border-color:rgba(255,184,0,0.4);background:rgba(255,184,0,0.02)}
.banner.neut{border-color:var(--border2);background:var(--bg1)}
.bn-strip{padding:11px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,0.05);flex-wrap:wrap}
.bn-mp{padding:3px 10px;border-radius:20px;font-family:var(--mono);font-size:9px;font-weight:700;background:var(--cyan-dim);color:var(--cyan);border:1px solid var(--cyan-border)}
.bn-action{font-family:var(--mono);font-size:22px;font-weight:700;margin-left:auto}
.banner.long .bn-action{color:var(--c-bull)}.banner.short .bn-action{color:var(--c-bear)}
.banner.wait .bn-action{color:var(--c-warn)}.banner.neut .bn-action{color:var(--text2)}
.bn-cells{display:grid;grid-template-columns:repeat(6,1fr)}
.bn-cell{padding:9px 12px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:3px}
.bn-cell:last-child{border-right:none}
.bn-lbl{font-family:var(--mono);font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:0.07em}
.bn-val{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text2)}
.bn-sub{font-family:var(--mono);font-size:9px;color:var(--text3)}

/* ── TOOLTIP ── */
.tt{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg3);border:1px solid var(--cyan-border);border-radius:var(--r-sm);padding:9px 12px;z-index:500;min-width:200px;max-width:260px;font-family:var(--sans);font-size:11px;color:var(--text2);line-height:1.6;white-space:normal;text-align:left;font-weight:400;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,0.5)}
.dc:hover .tt{display:block}
.tt strong{color:var(--cyan);font-weight:600}

/* ── COLOR PALETTE PANEL ── */
.cp{display:none;position:fixed;top:60px;right:16px;z-index:400;background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r);padding:14px;width:300px;box-shadow:0 8px 32px rgba(0,0,0,0.6)}
.cp.open{display:block}
.cp-title{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--cyan);margin-bottom:12px}
.scb{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--border2);cursor:pointer;margin-bottom:6px;background:var(--bg2)}
.scb:hover{border-color:var(--cyan-border)}
.scb.active{border-color:var(--cyan-border);background:var(--cyan-dim)}
.ss-row{display:flex;gap:3px;flex-shrink:0}
.ss{width:14px;height:14px;border-radius:3px}
.sc-name{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--text)}
.sc-desc{font-size:10px;color:var(--text3)}

/* ── SCROLLBARS ── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}