
/* DXCELL Terminal UI v1 */
.dx-keycap{display:inline-block;min-width:22px;padding:3px 7px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(130,255,185,.18);font-weight:700;font-size:.78rem;letter-spacing:.06em}
.dx-toast{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.dx-toast__item{pointer-events:none;background:rgba(10,14,20,.72);backdrop-filter:blur(10px);border:1px solid rgba(130,255,185,.18);color:rgba(235,245,255,.92);padding:10px 12px;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.45);font-size:12px}
.dx-bottom-hint{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:70;font-size:12px;color:#9aa4b2;background:rgba(10,14,20,.55);backdrop-filter:blur(8px);padding:7px 12px;border-radius:999px;border:1px solid rgba(130,255,185,.12)}
.dx-legend-btn{position:fixed;bottom:10px;left:12px;z-index:71;display:inline-flex;gap:10px;align-items:center;background:rgba(10,14,20,.55);backdrop-filter:blur(8px);border:1px solid rgba(130,255,185,.14);color:#dfe7ff;padding:7px 10px;border-radius:999px;cursor:pointer}
.dx-legend-btn:hover{border-color:rgba(130,255,185,.25);background:rgba(67,255,164,.08)}
.dx-legend-text{font-size:12px;color:#cbd3ff}
.dx-drawer{position:fixed;right:12px;bottom:64px;width:min(420px,92vw);max-height:min(560px,70vh);display:none;flex-direction:column;z-index:110;background:rgba(10,14,20,.82);backdrop-filter:blur(10px);border:1px solid rgba(130,255,185,.16);border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.55);overflow:hidden;opacity:0;transform:translateY(18px);pointer-events:none;transition:transform .18s ease, opacity .18s ease}
.dx-drawer.dx-open{opacity:1;transform:translateY(0);pointer-events:auto}

/* Quick Panel = bottom sheet */
#dx-quick.dx-drawer{left:50%;right:auto;bottom:0;width:min(980px,100vw);max-height:min(520px,56vh);border-radius:18px 18px 0 0;transform:translate(-50%, 28px)}
#dx-quick.dx-drawer.dx-open{transform:translate(-50%, 0)}
.dx-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px;border-bottom:1px solid rgba(130,255,185,.12)}
.dx-drawer__title{font-weight:700;font-size:13px;letter-spacing:.04em;color:#eaf2ff}
.dx-drawer__body{padding:12px;overflow:auto}
.dx-x{appearance:none;border:0;background:rgba(255,255,255,.05);border:1px solid rgba(130,255,185,.14);color:#eaf2ff;width:34px;height:34px;border-radius:12px;cursor:pointer}
.dx-x:hover{background:rgba(67,255,164,.08);border-color:rgba(67,255,164,.28)}
.dx-section{margin-bottom:14px}
.dx-section__title{font-size:11px;letter-spacing:.14em;color:#7f8aa3;margin-bottom:8px}
.dx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dx-tile{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(130,255,185,.12);color:#eaf2ff;cursor:pointer}
.dx-tile:hover{background:rgba(67,255,164,.08);border-color:rgba(67,255,164,.25)}
.dx-tile.is-on{background:rgba(67,255,164,.10);border-color:rgba(67,255,164,.38);box-shadow:0 0 0 1px rgba(67,255,164,.12) inset, 0 0 18px rgba(67,255,164,.16)}
.dx-note{margin-top:10px;color:#9aa4b2;font-size:12px;line-height:1.35}
.dx-chips{display:flex;flex-wrap:wrap;gap:8px}
.dx-chip{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(130,255,185,.14);font-size:12px;color:#dfe7ff}
.dx-ticket{position:fixed;left:12px;right:12px;bottom:64px;z-index:115;display:none;background:rgba(10,14,20,.86);backdrop-filter:blur(10px);border:1px solid rgba(130,255,185,.16);border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.55);overflow:hidden}
.dx-ticket__head{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid rgba(130,255,185,.12)}
.dx-ticket__title{font-weight:800;letter-spacing:.06em}
.dx-ticket__body{padding:12px;display:grid;gap:8px}
.dx-ticket__row{display:flex;justify-content:space-between;color:#cbd3ff;font-size:13px}
.dx-ticket__coming{margin-top:6px;color:#9aa4b2;font-size:12px}
.dx-edge{position:fixed;left:12px;top:88px;bottom:64px;width:min(420px,92vw);z-index:114;display:none;background:rgba(10,14,20,.86);backdrop-filter:blur(10px);border:1px solid rgba(130,255,185,.16);border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.55);overflow:hidden}
.dx-edge__head{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid rgba(130,255,185,.12)}
.dx-edge__title{font-weight:800;letter-spacing:.06em}
.dx-edge__body{padding:12px;color:#cbd3ff;font-size:13px}
.dx-edge__pill{display:inline-block;margin-bottom:10px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(130,255,185,.14);color:#eaf2ff;font-size:12px}
.dx-edge__coming{color:#9aa4b2;font-size:12px;line-height:1.35}


/* === Agents (Embedded Quick Access) === */
.body{ position: relative; }

/* Right rail: agents + VFT digital deck */
.agentDock{
  position:fixed;
  right: 12px;
  top: 104px;
  bottom: 18px;
  z-index: 35;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  pointer-events:auto;
  user-select:none;
  width: 74px;
}

/* Remove the “dock” look */
.agentDockStack{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding: 0;
  border: none;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* Bigger, clearer agent buttons */
.agentBtn{
  width: 56px;
  height: 56px;
  border-radius: 22px;
  border: 1px solid rgba(122,255,209,.10);
  background: rgba(10,16,20,.12);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
}

/* Timeframe stack: show current price under the TF buttons (requested layout) */
.tfStack{display:flex;flex-direction:column;align-items:center;gap:8px}
.tfPrice{font-family:Orbitron,Inter;letter-spacing:.04em;font-weight:900;font-size:.92rem;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(130,255,185,.14);
  background:rgba(255,255,255,.04);color:rgba(235,245,255,.92);
  box-shadow:0 0 0 1px rgba(67,255,164,.05) inset;
}
.agentBtn img{
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.agentBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(122,255,209,.22);
  background: rgba(12,20,24,.18);
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
}
.agentBtn.isActive{
  border-color: rgba(122,255,209,.38);
  box-shadow: 0 0 0 3px rgba(122,255,209,.08), 0 16px 30px rgba(0,0,0,.38);
  background: rgba(12,20,24,.24);
}

/* Subtle per-agent accents (kept, but lighter) */
body[data-agent-mode="moon"] .agentBtn[data-agent="moon"]{ border-color: rgba(122,255,209,.38); }
body[data-agent-mode="news"] .agentBtn[data-agent="news"]{ border-color: rgba(255,214,122,.30); }
body[data-agent-mode="prosperous"] .agentBtn[data-agent="prosperous"]{ border-color: rgba(255,215,0,.26); }
body[data-agent-mode="dexter"] .agentBtn[data-agent="dexter"]{ border-color: rgba(122,191,255,.30); }
body[data-agent-mode="rocket"] .agentBtn[data-agent="rocket"]{ border-color: rgba(255,122,165,.30); }

/* === VFT Digital Deck (small + tucked into the right rail) === */
.dxVftDeck{
  width: 260px;
  max-width: 72vw;
  margin-top: 8px;
  margin-right: 76px; /* sits left of the icon rail */
  align-self: flex-end;
  display:none;
  background: rgba(10,14,20,.82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(130,255,185,.16);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  overflow:hidden;
}

/* === VFT bias glow (bull / bear / neutral) ===
   The deck itself should communicate the current regime at a glance.
*/
.dxVftDeck.bias-bull{
  border-color: rgba(67,255,164,.28);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(67,255,164,.10), 0 0 26px rgba(67,255,164,.18);
  background: linear-gradient(180deg, rgba(12,20,24,.86), rgba(10,14,20,.78));
}
.dxVftDeck.bias-bear{
  border-color: rgba(255,92,122,.28);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,92,122,.10), 0 0 26px rgba(255,92,122,.18);
  background: linear-gradient(180deg, rgba(18,12,16,.86), rgba(10,14,20,.78));
}
.dxVftDeck.bias-neutral{
  border-color: rgba(255,170,64,.24);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,170,64,.10), 0 0 26px rgba(255,170,64,.16);
  background: linear-gradient(180deg, rgba(16,14,10,.86), rgba(10,14,20,.78));
}

.dxVftDeck.bias-bull .dxVftHead{ border-bottom-color: rgba(67,255,164,.14); }
.dxVftDeck.bias-bear .dxVftHead{ border-bottom-color: rgba(255,92,122,.14); }
.dxVftDeck.bias-neutral .dxVftHead{ border-bottom-color: rgba(255,170,64,.14); }

.dxVftDeck.bias-bull .dxVftPill.is-active{ border-color: rgba(67,255,164,.38); box-shadow: 0 0 0 3px rgba(67,255,164,.12); }
.dxVftDeck.bias-bear .dxVftPill.is-active{ border-color: rgba(255,92,122,.34); box-shadow: 0 0 0 3px rgba(255,92,122,.12); }
.dxVftDeck.bias-neutral .dxVftPill.is-active{ border-color: rgba(255,170,64,.32); box-shadow: 0 0 0 3px rgba(255,170,64,.10); }
.dxVftDeck.is-open{ display:block; }
.dxVftHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 10px;
  border-bottom: 1px solid rgba(130,255,185,.12);
}
.dxVftHeadLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.dxVftTitle{ font-weight: 900; letter-spacing: .06em; font-size: 12px; color: rgba(235,245,255,.86); }
.dxVftPills{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.dxVftPills--head{ flex-wrap: nowrap; overflow:hidden; }
.dxVftPill{
  font-size: 11px;
  padding:5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(130,255,185,.14);
  background: rgba(255,255,255,.04);
  color: rgba(235,245,255,.76);
  cursor:pointer;
}
.dxVftPill.is-active{
  border-color: rgba(67,255,164,.32);
  box-shadow: 0 0 0 3px rgba(67,255,164,.10);
  color: rgba(235,245,255,.92);
}
.dxVftBtns{ display:flex; gap:6px; align-items:center; }

/* Clock Tool inside VFT deck (away from candles, always visible) */
.dxVftClockRow{
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(130,255,185,.10);
}
.dxClock--vft{
  width: 100%;
  justify-content: flex-start;
  padding: 8px 10px;
  border-radius: 16px;
}
.dxClock--vft .dxClock__svg{ width: 52px; height: 52px; }
.dxClock--vft .dxClock__meta{ min-width: 0; }

/* PRO button state */
.dxVftBtn.is-on{
  border-color: rgba(67,255,164,.40) !important;
  background: rgba(67,255,164,.10) !important;
  box-shadow: 0 0 0 3px rgba(67,255,164,.10);
}
html.dx-pro .dxVftDeck{
  border-color: rgba(67,255,164,.22);
}
.dxVftBtn{
  width: 34px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(130,255,185,.14);
  background: rgba(255,255,255,.04);
  color: rgba(235,245,255,.82);
  cursor:pointer;
}
.dxVftBody{ padding: 8px 10px 10px; display:grid; gap:8px; }

/* Make the RSI digital readout breathe on laptop widths */
#dxVftDeck .xOscPanel{ padding: 10px; }
#dxVftDeck .xOscHeader{ padding: 0 0 6px; margin: 0; }
#dxVftDeck .xOscMeta{ font-size: 12px; opacity: .75; }
#dxVftDeck .xOscHeaderBtns{ gap:6px; }
#dxVftDeck .xOscBtn{ height: 30px; padding: 0 10px; border-radius: 10px; }
#dxVftDeck #xOscSettingsBtn{ display:none; }
#dxVftDeck .xOscMain{ gap: 10px; }
#dxVftDeck .xOscPanel:not(.is-pro) .xOscStats,
#dxVftDeck .xOscPanel:not(.is-pro) .xOscSpark,
#dxVftDeck .xOscPanel:not(.is-pro) .xOscEvents{ display:none !important; }

/* RSI Pro toggle (Normal vs Pro) */
.xOscBtn.is-active{
  border-color: rgba(67,255,164,.38);
  box-shadow: 0 0 0 3px rgba(67,255,164,.10);
}

/* In Normal mode (outside the VFT deck), keep RSI clean by hiding deep stats */
.xOscPanel:not(.is-pro) .xOscStats,
.xOscPanel:not(.is-pro) .xOscEvents{
  display:none;
}
#dxVftDeck .xOscNote{ margin-top: 6px; font-size: 12px; line-height: 1.25; }
.dxVftGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.dxVftCard{
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(130,255,185,.12);
  background: rgba(255,255,255,.03);
}
.dxVftBig{ font-size: 38px; font-weight: 950; letter-spacing: -.02em; line-height: 1; color: rgba(235,245,255,.92); }
.dxVftLabel{ margin-top: 6px; font-size: 11px; color: rgba(235,245,255,.60); }
.dxVftState{ font-size: 12px; font-weight: 900; letter-spacing: .06em; color: rgba(235,245,255,.82); }
.dxVftNote{ font-size: 12px; color: rgba(235,245,255,.70); line-height: 1.35; }
.dxVftSub{ margin-top: 6px; font-size: 12px; font-weight: 800; color: rgba(235,245,255,.78); }
.dxVftLevels{ margin-top: 8px; font-size: 11px; color: rgba(235,245,255,.62); line-height: 1.25; }

/* MACD VFT extras */
.dxMacdTrip{ margin-top: 10px; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }
.dxMacdTrip .dxPill{ min-width: 86px; }

/* Pro mode: slightly tighter + clearer VFT */
#dxVftDeck.dxVft--pro .dxVftCard{ border-color: rgba(130,255,185,.18); }
#dxVftDeck.dxVft--pro .dxVftBig{ letter-spacing: .4px; }

/* K — Flow Backdrop */
.dxFlowRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.dxFlowChip{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.dxFlowChip img{ width:26px; height:26px; object-fit:contain; filter: drop-shadow(0 0 10px rgba(255,255,255,.12)); }
.dxFlowChip span{ font-size:12px; color: rgba(235,245,255,.72); font-weight:800; letter-spacing:.2px; }
.dxMacdItem{ padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.dxMacdItem span{ font-size: 10px; letter-spacing: .12em; opacity: .7; }
.dxMacdItem b{ font-size: 12px; letter-spacing: .06em; }

/* Fit MACD/MA readouts inside the VFT card on small widths */
#dxVftDeck #dxVftSlotMacd .dxVftBig,
#dxVftDeck #dxVftSlotLongMA .dxVftBig{ font-size: 32px; }
#dxVftDeck #dxVftSlotMacd .dxVftSub,
#dxVftDeck #dxVftSlotLongMA .dxVftSub{ font-size: 11px; }

/* World-class VFT fit for D (MACD) + J (MA) — match clean 'S' style */
.dxVftCard--tight{ padding: 10px; }
.dxVftBig--fit{
  font-size: clamp(22px, 3.6vw, 34px);
  letter-spacing: -.02em;
  line-height: 1.02;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dxVftMiniRow{ margin-top: 10px; }

#dxVftDeck #dxVftSlotMacd .dxMacdTrip--vft,
#dxVftDeck #dxVftSlotLongMA .dxMacdTrip--vft{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
#dxVftDeck #dxVftSlotMacd .dxMacdTrip--vft .dxMacdItem,
#dxVftDeck #dxVftSlotLongMA .dxMacdTrip--vft .dxMacdItem{
  flex: 1 1 30%;
  min-width: 92px;
}
#dxVftDeck #dxVftSlotMacd .dxMacdTrip--vft .dxMacdItem b,
#dxVftDeck #dxVftSlotLongMA .dxMacdTrip--vft .dxMacdItem b{
  max-width: 120px;
}

.dxMacdTrip{ gap:6px; }
.dxMacdItem{ gap:8px; padding: 7px 9px; }
.dxMacdItem b{
  display:block;
  max-width: 86px;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dxMacdMeter{ margin-top: 10px; height: 10px; }

/* Let meter fill inherit bias classes */
.dxVftMeterFill.is-bull{ background: linear-gradient(90deg, rgba(67,255,164,.25), rgba(67,255,164,.85)); }
.dxVftMeterFill.is-bear{ background: linear-gradient(90deg, rgba(255,92,122,.25), rgba(255,92,122,.85)); }
.dxVftMeterFill.is-neutral{ background: linear-gradient(90deg, rgba(255,170,64,.25), rgba(255,170,64,.85)); }


/* VFT meters + bias highlighting (used by ADX, etc.) */
.dxVftMeter{
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.dxVftMeterFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(235,245,255,.55);
  box-shadow: 0 0 14px rgba(235,245,255,.18);
  transition: width .25s ease;
}
.dxVftMeterFill.is-bull{ background: rgba(67,255,164,.88); box-shadow: 0 0 16px rgba(67,255,164,.22); }
.dxVftMeterFill.is-bear{ background: rgba(255,92,122,.88); box-shadow: 0 0 16px rgba(255,92,122,.22); }
.dxVftMeterFill.is-neutral{ background: rgba(235,245,255,.50); box-shadow: 0 0 16px rgba(235,245,255,.14); }

.dxVftState.is-bull{ color: rgba(67,255,164,.92); }
.dxVftState.is-bear{ color: rgba(255,92,122,.92); }
.dxVftState.is-neutral{ color: rgba(235,245,255,.82); }
/* VFT config rows (Trend accessibility controls) */
.dxVftCfgRow{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dxVftCfgRow + .dxVftCfgRow{ margin-top: 10px; }
.dxVftCfgRow label{
  font-size: 11px;
  font-weight: 800;
  color: rgba(235,245,255,.66);
}
.dxVftCfgRow input[type="color"]{
  width: 34px;
  height: 28px;
  border: 1px solid rgba(130,255,185,.18);
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  padding: 0;
}
.dxVftCfgRow input[type="range"]{ flex: 1; min-width: 110px; }
#dxTrendWidthVal{ font-size: 12px; font-weight: 900; color: rgba(235,245,255,.82); }

@media (max-width: 980px){
  .agentDock{ top: 96px; right: 8px; width: 68px; }
  .agentBtn{ width: 52px; height: 52px; border-radius: 20px; }
  .agentBtn img{ width: 38px; height: 38px; }
  .dxVftDeck{ margin-right: 70px; width: 240px; }
}



/* === Agents (Embedded Quick Access) === */
/* Layout: chart + right sidebar (no overlap) */
.body{
  position: relative;
  display: grid;
  /* Wider sidebar + tighter gutter so the chart price axis sits closer to the sidebar */
  grid-template-columns: 1fr 340px;
  /* Slightly tighter gutter for a cleaner, more "pro" join between chart + sidebar */
  gap: 6px;
  height: calc(100vh - 112px);
  /* Avoid rail clipping at the viewport edge (esp. when zoomed) */
  /* Small right breathing room without pushing the chart axis left */
  padding-right: 12px;
}

.chartWrap{
  position: relative;
  min-width: 0;
  height: 100%;
}

.dxSideBar{
  position: relative;
  height: 100%;
  border: 1px solid rgba(130,255,185,.12);
  border-radius: 18px;
  background: rgba(10,14,20,.70);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px;
}

/* ===== Sidebar subtle minimise controls (Agents / Alerts / VFT) ===== */
.dxSideMiniBtn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(235,245,255,.86);
  border-radius: 12px;
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
  opacity:.86;
}
.dxSideMiniBtn:hover{
  background: rgba(67,255,164,.07);
  border-color: rgba(67,255,164,.20);
  transform: translateY(-1px);
  opacity: 1;
}
.dxSideMiniBtn.is-on{
  background: rgba(120,200,255,.07);
  border-color: rgba(120,200,255,.22);
  opacity: 1;
}

/* Agents header row (injected by JS for a polished feel) */
.dxAgentsBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 8px;
  border-radius: 14px;
  border: 1px solid rgba(130,255,185,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 0 0 1px rgba(0,255,180,.05) inset;
}
.dxAgentsBar__title{
  font-weight: 1000;
  letter-spacing: .10em;
  font-size: 11px;
  color: rgba(235,245,255,.78);
  font-family: Orbitron, Inter, system-ui;
}

/* Alerts header button cluster */
.dxSideChat__titleRow{display:flex;align-items:baseline;gap:10px;min-width:0}
.dxSideChat__titleRow .dxSideMiniBtn{margin-left:auto}

/* Minimise behaviours
   - Only one of Alerts/VFT can be minimised at once (JS enforces).
   - If minimised, keep a slim header so it feels like a docked panel.
*/
.dxSideBar.is-alerts-min .dxAlerts{
  flex: 0 0 66px !important;
  min-height: 66px !important;
  max-height: 66px !important;
}
.dxSideBar.is-alerts-min .dxAlerts .dxSideChat__body,
.dxSideBar.is-alerts-min .dxAlerts .dxAlertsCfg,
.dxSideBar.is-alerts-min .dxAlerts .dxSideChat__form{
  display:none !important;
}

.dxSideBar.is-vft-min .dxSideVft{
  flex: 0 0 72px !important;
  min-height: 72px !important;
}
.dxSideBar.is-vft-min .dxSideSplit{display:none !important;}
.dxSideBar.is-vft-min .dxSideVft .dxVftBody{display:none !important;}

/* When VFT is minimised, let Alerts take the space */
.dxSideBar.is-vft-min .dxAlerts{flex: 1 1 auto !important; max-height:none !important;}

/* When Alerts is minimised, let VFT take the space */
.dxSideBar.is-alerts-min .dxSideVft{flex: 1 1 auto !important; min-height: 260px;}
.dxSideBar.is-alerts-min .dxSideSplit{display:none !important;}

/* Agents minimised: collapse to a compact strip, keep icons tappable */
.dxSideBar.is-agents-min .dxAgentsTop .agentBtn__label{display:none;}
.dxSideBar.is-agents-min .dxAgentsTop .agentBtn.agentBtn--hero{height:72px;}
.dxSideBar.is-agents-min .dxAgentsTop .agentBtn.agentBtn--hero img{width:52px;height:52px;}
.dxSideBar.is-agents-min .dxAgentsGrid{display:none;}

.dxAgents{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

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

.agentBtn__label{
  display:block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(235,245,255,.80);
}

.agentBtn.agentBtn--hero{
  width: 100%;
  height: 104px;
  border-radius: 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 10px 8px;
}
.agentBtn.agentBtn--hero img{
  width: 64px;
  height: 64px;
}

.dxAgentsGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-items: center;
}

.dxAgentsGrid--three{
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.dxSideChat{
  margin-top: 6px;
  border: 1px solid rgba(130,255,185,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

/* Alerts should yield space to the VFT deck when it expands */
.dxAlerts{
  /* participate in sidebar flex column */
  display:flex;
  flex-direction:column;
  /* default: Alerts can take the spare space */
  flex: 1 1 auto;
  min-height: 160px;
  max-height: none;
}
.dxAlerts .dxSideChat__body{
  /* allow the list to scroll inside the panel */
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* When VFT is open/expanded, give it priority and shrink alerts */
.dxSideBar.vft-priority .dxAlerts{
  /* allow user-sized split, but keep alerts compact when VFT needs room */
  flex: 0 0 var(--dxAlertsH, 190px);
  max-height: 240px;
}
.dxSideBar.vft-priority .dxSideVft{
  flex: 1 1 auto;
  min-height: 260px;
}

/* When VFT is open but *not* filling the slot (lots of empty space), let Alerts breathe */
.dxSideBar.vft-priority.vft-compact .dxAlerts{
  flex: 1 1 auto;
  max-height: none;
}
.dxSideBar.vft-priority.vft-compact .dxSideVft{
  flex: 0 0 var(--dxVftH, 240px);
  min-height: 200px;
}

/* Split handle between Alerts and VFT */
.dxSideSplit{
  height: 10px;
  margin: 8px 2px 4px;
  border-radius: 10px;
  cursor: ns-resize;
  position: relative;
  flex: 0 0 10px;
}
.dxSideSplit::before{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    rgba(0,0,0,0),
    rgba(120,200,255,.10),
    rgba(67,255,164,.10),
    rgba(0,0,0,0)
  );
}
.dxSideSplit:hover::before{
  background: linear-gradient(90deg,
    rgba(0,0,0,0),
    rgba(120,200,255,.22),
    rgba(67,255,164,.22),
    rgba(0,0,0,0)
  );
}

/* U‑Trend badge (bottom-right of status panel) */
#dxUtrendBadge{
  position:absolute;
  right:10px;
  bottom:10px;
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(9, 16, 18, .55);
  border:1px solid rgba(64, 255, 210, .18);
  backdrop-filter: blur(10px);
}
#dxUtrendBadge .dxUtrendBadge__img{
  width:36px;
  height:36px;
  image-rendering: auto;
  filter: drop-shadow(0 0 14px rgba(0,255,180,.55));
}
#dxUtrendBadge.is-bear .dxUtrendBadge__img{
  filter: drop-shadow(0 0 14px rgba(255,70,70,.55));
}
#dxUtrendBadge.is-bull{
  box-shadow: 0 0 0 1px rgba(0,255,180,.12), 0 0 24px rgba(0,255,180,.22);
}
#dxUtrendBadge.is-bear{
  box-shadow: 0 0 0 1px rgba(255,70,70,.14), 0 0 24px rgba(255,120,60,.20);
}
.dxSideChat__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(130,255,185,.10);
}
.dxSideChat__title{ font-weight: 900; letter-spacing: .06em; font-size: 12px; color: rgba(235,245,255,.86); }
.dxSideChat__hint{ font-size: 11px; color: rgba(235,245,255,.55); }
.dxSideChat__body{ padding: 10px; min-height: 72px; }
.dxSideChat__bubble{ font-size: 12px; color: rgba(235,245,255,.72); line-height: 1.35; }
.dxSideChat__form{
  display:flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid rgba(130,255,185,.10);
}
.dxSideChat__input{
  flex:1;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(130,255,185,.12);
  background: rgba(0,0,0,.14);
  color: rgba(235,245,255,.88);
  padding: 0 10px;
}
.dxSideChat__send{
  width: 74px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(130,255,185,.12);
  background: rgba(255,255,255,.05);
  color: rgba(235,245,255,.86);
}

/* Sidebar VFT readout (digital panel area under Chat) */
.dxSideVft{
  margin-top: 12px;
  flex: 1;
  min-height: 180px;
  border: 1px solid rgba(130,255,185,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.16);
  box-shadow: 0 0 0 1px rgba(0,255,180,.05) inset;
  overflow: hidden;
  position: relative;
}

/* When the VFT deck is embedded into the sidebar, make it fill the slot */
.dxSideVft .dxVftDeck{
  position: relative;
  right: auto;
  bottom: auto;
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.dxSideVft .dxVftDeck.is-open{ display: block; }
.dxSideVft .dxVftHead{ padding: 0 0 10px 0; }
.dxSideVft .dxVftBody{
  max-height: 100%;
  overflow: hidden;
  padding: 8px;
  gap: 8px;
}

/* Sidebar-fit tightening (only inside the sidebar VFT slot) */
.dxSideVft .dxVftGrid{ gap: 8px; }
.dxSideVft .dxVftCard{ padding: 7px; border-radius: 12px; }
.dxSideVft .dxVftBig{ font-size: 22px; }
.dxSideVft .dxVftLabel{ font-size: 9px; margin-top: 4px; }
.dxSideVft .dxVftState{ font-size: 10px; }
.dxSideVft .dxVftNote{ font-size: 10px; line-height: 1.18; }
.dxSideVft .dxVftPill{ font-size: 10px; padding: 5px 8px; }
.dxSideVft .dxVftBtn{ font-size: 10px; padding: 5px 8px; }
.dxSideVft .dxVftFooter{ font-size: 10px; padding: 8px 10px; }

/* ===== Sidebar VFT: tighten the RSI VFT card so it fits the slot ===== */
.dxSideVft .xOscPanel{
  margin: 8px 0 0;
  padding: 8px;
  border-radius: 14px;
  background: rgba(10,14,24,.35);
  overflow: hidden;
}
.dxSideVft .xOscHeader{ margin-bottom: 6px; }
.dxSideVft .xOscMeta{ display:none !important; }
.dxSideVft .xOscBtn{ padding: 5px 8px; font-size: .78rem; border-radius: 10px; }
/* No zoom button in the sidebar VFT slot (keep the layout compact) */
.dxSideVft #xOscZoomBtn{ display:none !important; }

.dxSideVft .xOscMain{ gap: 10px; }
.dxSideVft .xOscBig{ min-width: 96px; padding: 8px 10px; border-radius: 12px; }
/* Keep large numbers (MACD/MA) always inside the VFT slot */
.dxSideVft .xOscValue{ font-size: clamp(1.15rem, 3.2vw, 1.55rem); line-height: 1.05; letter-spacing: .01em; }
.dxSideVft .xOscState{ margin-top: 5px; font-size: .78rem; }
.dxSideVft .xOscBannerWrap{ padding: 8px 10px; border-radius: 12px; }
.dxSideVft .xOscBanner{ font-size: .88rem; }
.dxSideVft .xOscSub{
  font-size: .70rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.dxSideVft .xOscStats{ display:none !important; }
.dxSideVft .xOscStat{ font-size: .74rem; }
.dxSideVft .xOscSpark{ display:none !important; }
.dxSideVft #xOscSvg{ height: 22px; }
.dxSideVft .xOscNote{ font-size: .74rem; }
.dxSideVft .xOscEvents{ display:none; }

/* RSI PRO in VFT: show the spark + events (Normal stays ultra-clean) */
.dxSideVft .xOscPanel.is-pro .xOscSpark{ display:block !important; }
.dxSideVft .xOscPanel.is-pro .xOscEvents{ display:block !important; }
.dxSideVft .xOscPanel.is-pro .xOscStats{ display:grid !important; }

/* Legacy rail (kept for safety if present elsewhere) */
.agentDock{ display:none; }
.agentDockStack{ display:none; }

/* Bigger, clearer agent buttons */
.agentBtn{
  width: 56px;
  height: 56px;
  border-radius: 22px;
  border: 1px solid rgba(122,255,209,.10);
  background: rgba(10,16,20,.12);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
}
.agentBtn img{
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.agentBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(122,255,209,.22);
  background: rgba(12,20,24,.18);
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
}
.agentBtn.isActive{
  border-color: rgba(122,255,209,.38);
  box-shadow: 0 0 0 3px rgba(122,255,209,.08), 0 16px 30px rgba(0,0,0,.38);
  background: rgba(12,20,24,.24);
}

/* Subtle per-agent accents (kept, but lighter) */
body[data-agent-mode="moon"] .agentBtn[data-agent="moon"]{ border-color: rgba(122,255,209,.38); }
body[data-agent-mode="news"] .agentBtn[data-agent="news"]{ border-color: rgba(255,214,122,.30); }
body[data-agent-mode="prosperous"] .agentBtn[data-agent="prosperous"]{ border-color: rgba(255,215,0,.26); }
body[data-agent-mode="dexter"] .agentBtn[data-agent="dexter"]{ border-color: rgba(122,191,255,.30); }
body[data-agent-mode="rocket"] .agentBtn[data-agent="rocket"]{ border-color: rgba(255,122,165,.30); }

/* === VFT Digital Deck (small + tucked into the right rail) === */
.dxVftDeck{
  width: 100%;
  max-width: none;
  margin-top: 8px;
  margin-right: 0;
  align-self: stretch;
  display:none;
  background: rgba(10,14,20,.82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(130,255,185,.16);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.dxVftDeck.is-open{ display:block; }
.dxVftHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 10px;
  border-bottom: 1px solid rgba(130,255,185,.12);
}
.dxVftHeadLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.dxVftTitle{ font-weight: 900; letter-spacing: .06em; font-size: 12px; color: rgba(235,245,255,.86); }
.dxVftPills{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.dxVftPills--head{ flex-wrap: nowrap; overflow:hidden; }
.dxVftPill{
  font-size: 11px;
  padding:5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(130,255,185,.14);
  background: rgba(255,255,255,.04);
  color: rgba(235,245,255,.76);
  cursor:pointer;
}
.dxVftPill.is-active{
  border-color: rgba(67,255,164,.32);
  box-shadow: 0 0 0 3px rgba(67,255,164,.10);
  color: rgba(235,245,255,.92);
}
.dxVftBtns{ display:flex; gap:6px; align-items:center; }
.dxVftBtn{
  width: 34px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(130,255,185,.14);
  background: rgba(255,255,255,.04);
  color: rgba(235,245,255,.82);
  cursor:pointer;
}
.dxVftBody{ padding: 8px 10px 10px; display:grid; gap:8px; }

/* Make the RSI digital readout breathe on laptop widths */
#dxVftDeck .xOscPanel{ padding: 10px; }
#dxVftDeck .xOscHeader{ padding: 0 0 6px; margin: 0; }
#dxVftDeck .xOscMeta{ font-size: 12px; opacity: .75; }
#dxVftDeck .xOscHeaderBtns{ gap:6px; }
#dxVftDeck .xOscBtn{ height: 30px; padding: 0 10px; border-radius: 10px; }
#dxVftDeck #xOscSettingsBtn{ display:none; }
#dxVftDeck .xOscMain{ gap: 10px; }
#dxVftDeck .xOscStats,
#dxVftDeck .xOscSpark,
#dxVftDeck .xOscEvents{ display:none !important; }

/* RSI PRO in the VFT deck: reveal PRO overlays + structure tools */
#dxVftDeck .xOscPanel.is-pro .xOscStats{ display:grid !important; }
#dxVftDeck .xOscPanel.is-pro .xOscSpark{ display:block !important; }
#dxVftDeck .xOscPanel.is-pro .xOscEvents{ display:block !important; }

/* Compact PRO tool toggles */
.xOscProTools{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.xOscProToolBtn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(235,245,255,.92);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  cursor: pointer;
  user-select:none;
}
.xOscProToolBtn:hover{ background: rgba(255,255,255,.09); }
.xOscProToolBtn.is-on{ border-color: rgba(100,255,218,.45); box-shadow: 0 0 0 1px rgba(100,255,218,.12) inset; }
.xOscProToolBtn.is-warn{ border-color: rgba(242,201,76,.45); }
#dxVftDeck .xOscNote{ margin-top: 6px; font-size: 12px; line-height: 1.25; }
.dxVftGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.dxVftCard{
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(130,255,185,.12);
  background: rgba(255,255,255,.03);
}
.dxVftBig{ font-size: 28px; font-weight: 950; letter-spacing: -.02em; line-height: 1; color: rgba(235,245,255,.92); }
.dxVftLabel{ margin-top: 5px; font-size: 10px; color: rgba(235,245,255,.60); }
.dxVftState{ font-size: 11px; font-weight: 900; letter-spacing: .06em; color: rgba(235,245,255,.82); }
.dxVftNote{ font-size: 11px; color: rgba(235,245,255,.70); line-height: 1.25; }

@media (max-width: 980px){
  .body{ grid-template-columns: 1fr; height: auto; }
  .dxSideBar{ height: auto; }
}

/* Hide legacy chart glow overlay */
.flowFlash{display:none !important;}


/* Sidebar VFT (under agents/chat) — tighter typography */
.dxSideVft .dxVftSub{ font-size: 11px; }
.dxSideVft .dxVftLevels{ font-size: 10px; }


/* U‑Trend (U) VFT — avatar list */
.dxUHead{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding: 0 2px 6px; }
.dxUTitle{ font-weight: 950; letter-spacing: .08em; font-size: 11px; color: rgba(235,245,255,.82); }
.dxUSub{ font-size: 11px; color: rgba(235,245,255,.55); text-align:right; }
.dxUList{ display:grid; gap:10px; }
.dxURow{ display:grid; grid-template-columns: 44px 1fr; gap:10px; padding:10px; border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.35) inset;
}
.dxUAvatar{ width:44px; height:44px; border-radius: 14px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); }
.dxUAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.dxUInfo{ display:grid; gap:4px; }
.dxUTf{ font-weight: 950; letter-spacing: .06em; font-size: 12px; color: rgba(235,245,255,.88); }
.dxUTag{ font-size: 11px; font-weight: 900; color: rgba(235,245,255,.72); }
.dxUHint{ font-size: 11px; color: rgba(235,245,255,.62); line-height: 1.25; }
.dxUExtra{ margin-top:4px; font-size:10px; color: rgba(235,245,255,.48); }

.dxURow.bull{ border-color: rgba(67,255,164,.22); }
.dxURow.bear{ border-color: rgba(255,92,122,.22); }
.dxURow.neutral{ border-color: rgba(255,255,255,.10); }


/* DX Alerts */
.dxAlerts .dxSideChat__body{ padding: 10px; }
.dxAlerts .dxSideChat__head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  justify-content:stretch;
  gap:8px;
}
.dxSideChat__titleRow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:nowrap;
  min-width:0;
}
.dxAlerts .dxSideChat__title{
  flex:0 0 auto;
}
.dxAlerts .dxSideChat__hint{
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dxSideChat__hint:empty{ display:none; }

.dxAlertsCfg{ display:flex; align-items:center; gap:8px; min-width:0; }
.dxAlertsMiniTape{display:flex;align-items:center;gap:8px;margin:2px 0 10px;padding:6px 8px;border-radius:12px;border:1px solid rgba(255,110,140,.18);background:linear-gradient(180deg, rgba(28,10,18,.55), rgba(12,16,24,.42));box-shadow:0 0 0 1px rgba(0,0,0,.18) inset;overflow:hidden}
.dxAlertsMiniTape.is-fired{border-color:rgba(255,110,140,.36);box-shadow:0 0 0 1px rgba(255,110,140,.10) inset,0 0 26px rgba(255,92,122,.18)}
.dxAlertsMiniTape__alarm{appearance:none;width:34px;height:34px;flex:0 0 34px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,226,232,.95);cursor:pointer}
.dxAlertsMiniTape__alarm.is-flash{animation:dxAlertTapeAlarm .8s ease-in-out 3;background:rgba(255,92,122,.16);border-color:rgba(255,92,122,.42)}
.dxAlertsMiniTape__track{position:relative;flex:1;min-width:0;overflow:hidden;white-space:nowrap;color:rgba(235,245,255,.86);font:900 11px/1 Orbitron,Inter,sans-serif;letter-spacing:.08em}
.dxAlertsMiniTape__msg{display:inline-block;padding-left:100%;will-change:transform;animation:dxAlertTapeMarquee 15s linear infinite}
.dxSideChat__titleRow--alerts{align-items:center;gap:8px}
.dxSideChat__titleRow--alerts .dxSideChat__hint{white-space:nowrap;flex:0 0 auto}
.dxSideChat__titleRow--alerts .dxAlertsMiniTape{margin:0;flex:1 1 auto;min-width:0}
.dxSideChat__titleRow--alerts .dxSideMiniBtn{margin-left:0;flex:0 0 auto}
.dxAlertsMiniTape--inline{padding:4px 6px;border-radius:999px;min-height:36px;background:linear-gradient(180deg, rgba(28,10,18,.62), rgba(12,16,24,.44));}
.dxAlertsMiniTape--inline .dxAlertsMiniTape__alarm{width:30px;height:30px;flex-basis:30px;font-size:12px}
.dxAlertsMiniTape--inline .dxAlertsMiniTape__track{font-size:10px;letter-spacing:.07em}
.dxAlertsMiniTape--inline .dxAlertsMiniTape__msg{animation-duration:13s}
.hudCard--pulse{display:flex;flex-direction:column;gap:10px}
.hudStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hudStat{min-width:0;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);display:flex;flex-direction:column;gap:4px}
.hudStat__k{font:800 10px/1 Orbitron,Inter,sans-serif;letter-spacing:.08em;opacity:.64;text-transform:uppercase;white-space:nowrap}
.hudStat__v{font:900 13px/1.1 Orbitron,Inter,sans-serif;color:rgba(235,245,255,.96);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width: 1280px){.dxSideChat__titleRow--alerts{flex-wrap:wrap}.dxSideChat__titleRow--alerts .dxAlertsMiniTape{order:3;flex-basis:100%}.hudStats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.dxAlertSlot.is-fired{border-color:rgba(255,92,122,.38);background:linear-gradient(180deg, rgba(58,14,24,.62), rgba(14,18,26,.56));box-shadow:0 0 0 1px rgba(255,92,122,.12) inset,0 0 22px rgba(255,92,122,.10)}
.dxAlertSlot.is-fired .dxAlertSlot__tag{color:rgba(255,210,220,.96)}
.dxAlertSlot.is-jump{border-color:rgba(120,220,255,.46)!important;box-shadow:0 0 0 1px rgba(120,220,255,.14) inset,0 0 26px rgba(120,220,255,.18)!important}
@keyframes dxAlertTapeAlarm{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(255,92,122,0)}50%{transform:scale(1.08);box-shadow:0 0 18px rgba(255,92,122,.35)}}
@keyframes dxAlertTapeMarquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

.dxAlertsCfg__select{
  flex:1 1 auto; min-width:0;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(10,14,18,.55);
  border: 1px solid rgba(140,255,210,.18);
  color: rgba(235,245,255,.86);
  outline: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.dxAlertsCfg__select:focus{ border-color: rgba(67,255,164,.32); box-shadow: 0 0 0 1px rgba(67,255,164,.12), 0 0 0 3px rgba(67,255,164,.08); }

.dxAlertsCfg__btn{
  height: 30px;
  padding: 0 10px;
  min-width: 34px;
  border-radius: 999px;
  background: rgba(17,24,28,.55);
  border: 1px solid rgba(120,200,255,.18);
  color: rgba(180,230,255,.92);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: none;
  cursor: pointer;
}
.dxAlertsCfg__btn:hover{ border-color: rgba(120,200,255,.32); box-shadow: 0 0 0 1px rgba(120,200,255,.10), 0 10px 30px rgba(0,0,0,.25); }

.dxAlerts__slots{ display:flex; flex-wrap:wrap; gap:8px; padding: 2px 0 10px; }
.dxAlertSlot{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:8px;
  width:100%;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(10,14,18,.45);
  border: 1px solid rgba(140,255,210,.16);
  box-shadow: 0 0 0 1px rgba(0,0,0,.22) inset;
  color: rgba(235,245,255,.84);
  font-size: 12px;
  max-width: 100%;
}
.dxAlertSlot__tag{ color: rgba(120,200,255,.86); font-weight: 900; letter-spacing:.06em; }
.dxAlertSlot__name{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:none; }
.dxAlertSlot__tf{
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,92,122,.10);
  border: 1px solid rgba(255,92,122,.18);
  color: rgba(255,220,230,.92);
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 11px;
}
.dxAlertSlot__freeze{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(235,245,255,.78);
  cursor: pointer;
  flex: 0 0 auto;
}
.dxAlertSlot__freeze:hover{
  border-color: rgba(67,255,164,.28);
  background: rgba(67,255,164,.08);
  color: rgba(224,255,243,.95);
}
.dxAlertSlot__x{
  width: 22px; height: 22px; border-radius: 999px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(235,245,255,.75);
  cursor: pointer;
  flex: 0 0 auto;
}
.dxAlertSlot__x:hover{ border-color: rgba(255,90,120,.35); color: rgba(255,210,220,.95); }
.dxAlerts__empty{ font-size: 12px; color: rgba(235,245,255,.62); line-height: 1.35; padding: 6px 2px 10px; }
.dxAlerts__list{ display:flex; flex-direction:column; gap:8px; }
.dxAlert{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 10px;
  border-radius: 14px;
  background: rgba(10,18,26,.55);
  border: 1px solid rgba(120,200,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.dxAlert__dot{ width:10px; height:10px; border-radius:50%; margin-top:4px; background: rgba(120,200,255,.75); box-shadow: 0 0 18px rgba(80,190,255,.35); flex: 0 0 auto; }
.dxAlert[data-level="warn"] .dxAlert__dot{ background: rgba(255,200,80,.85); box-shadow: 0 0 18px rgba(255,190,80,.35); }
.dxAlert[data-level="hot"] .dxAlert__dot{ background: rgba(255,90,120,.85); box-shadow: 0 0 18px rgba(255,90,120,.35); }
.dxAlert__main{ flex:1; min-width:0; }
.dxAlert__top{ display:flex; align-items:baseline; gap:8px; justify-content:space-between; }
.dxAlert__title{ font-weight:900; letter-spacing:.04em; font-size:12px; color: rgba(230,248,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dxAlert__time{ font-size:11px; color: rgba(235,245,255,.45); flex: 0 0 auto; }
.dxAlert__msg{ font-size:12px; color: rgba(235,245,255,.72); margin-top:3px; line-height:1.25; }
.dxAlert__meta{ font-size:11px; color: rgba(120,200,255,.72); margin-top:6px; letter-spacing:.02em; }


/* VFT cleanup: remove the lower PRO spark blocks inside the VFT deck (prevents the blue X placeholders) */
#dxVftDeck .xOscSpark{ display:none !important; }

/* Asset flash when any alert triggers */
@keyframes dxAssetFlash {
  0%{ box-shadow: 0 0 0 0 rgba(67,255,164,.0); filter:none; }
  10%{ box-shadow: 0 0 0 3px rgba(67,255,164,.18), 0 0 26px rgba(67,255,164,.22); filter: saturate(1.3) brightness(1.15); }
  55%{ box-shadow: 0 0 0 3px rgba(67,255,164,.10), 0 0 18px rgba(67,255,164,.18); }
  100%{ box-shadow: 0 0 0 0 rgba(67,255,164,.0); filter:none; }
}
body.dx-alert-flash #symTitle{
  animation: dxAssetFlash 900ms ease-out 0s 2;
  border-color: rgba(67,255,164,.45) !important;
}

/* ===== Risk Blueprint mini readout (VFT + HUD) ===== */
.dxVftRiskMini{
  margin-top: 10px;
  padding: 10px 10px 10px;
  border-radius: 16px;
  background: rgba(8,14,20,.55);
  border: 1px solid rgba(235,245,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 26px rgba(0,0,0,.28);
}
.dxVftRiskTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.dxVftRiskTitle{ font-weight: 900; letter-spacing:.08em; font-size: 11px; color: rgba(235,245,255,.82); }
.dxVftRiskBadge{ font-weight: 900; font-size: 11px; letter-spacing:.06em; padding: 4px 8px; border-radius: 999px;
  background: rgba(67,255,164,.10); border: 1px solid rgba(67,255,164,.18); color: rgba(210,255,236,.92);
}
.dxVftRiskGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.dxVftRiskCell{ padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.dxVftRiskK{ font-size: 11px; color: rgba(235,245,255,.55); letter-spacing:.02em; }
.dxVftRiskV{ margin-top:3px; font-weight: 900; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px; color: rgba(235,245,255,.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dxVftRiskNote{ margin-top: 8px; font-size: 11px; color: rgba(235,245,255,.58); line-height:1.25; }

.hudRiskLine{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,14,20,.40);
  color: rgba(235,245,255,.78);
  font-size: 12px;
}
.hudRiskTag{
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(120,200,255,.10);
  border: 1px solid rgba(120,200,255,.16);
  color: rgba(220,248,255,.92);
  flex: 0 0 auto;
}



.dxChartResetBtn{
  position:absolute;
  right: 10px;
  bottom: 10px;
  z-index: 26;
  width: 38px;
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  border-radius: 10px;
  border:1px solid rgba(120,200,255,.22);
  background: rgba(8,12,18,.88);
  color: rgba(235,245,255,.94);
  box-shadow: 0 10px 24px rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
  cursor:pointer;
  font: 900 18px/1 Inter, system-ui;
  letter-spacing: 0;
  opacity: .96;
}
.dxChartResetBtn:hover{
  border-color: rgba(120,200,255,.42);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0,0,0,.34);
}
.dxChartResetBtn:active{
  transform: translateY(0);
}
.dxChartResetBtn svg{ width:18px; height:18px; display:block; pointer-events:none; }
.dxChartResetBtn span{ display:none; pointer-events:none; }

.dxSideRailEdge{
  position:absolute;
  top: 50%;
  left: -14px;
  transform: translateY(-50%);
  z-index: 30;
  display:flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 72px;
  border-radius: 14px;
  border:1px solid rgba(120,200,255,.24);
  background: rgba(10,14,20,.88);
  color: rgba(235,245,255,.92);
  box-shadow: 0 18px 45px rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
  cursor:pointer;
}
.dxSideRailEdge span{
  font: 900 18px/1 Orbitron, Inter, system-ui;
  pointer-events:none;
}
.dxSideRailEdge:hover{
  border-color: rgba(120,200,255,.42);
  transform: translateY(-50%) translateX(-1px);
}
.body.is-side-collapsed .dxSideRailEdge{ display:none !important; }

/* Right rail full collapse */
.body.is-side-collapsed{
  grid-template-columns: 1fr;
  gap: 0;
  padding-right: 0;
}
.body.is-side-collapsed #dxSideBar{ display:none !important; }
.dxSideRailRestore{
  position:absolute;
  top: 14px;
  right: 10px;
  z-index: 25;
  display:none;
  height: 46px;
  width: 44px;
  border-radius: 14px;
  border:1px solid rgba(120,200,255,.18);
  background: rgba(10,14,20,.82);
  color: rgba(235,245,255,.88);
  box-shadow: 0 18px 55px rgba(0,0,0,.38);
  backdrop-filter: blur(10px);
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.dxSideRailRestore span{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 900 10px/1 Orbitron, Inter, system-ui;
  letter-spacing: .18em;
}
.body.is-side-collapsed .dxSideRailRestore{ display:flex; }

/* Alert library browser */
.dxAlertsCfg__browse,
.dxAlertsBrowser__back,
.dxAlertsBrowser__close{
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(235,245,255,.88);
  border-radius: 12px;
  cursor:pointer;
}
.dxAlertsCfg__browse{
  flex:1;
  min-height: 38px;
  padding: 0 12px;
  text-align:left;
  font-weight:800;
  letter-spacing:.04em;
}
.dxAlertsBrowser{
  margin: 8px 10px 0;
  border: 1px solid rgba(120,200,255,.12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13,18,29,.94), rgba(8,12,20,.92));
  box-shadow: 0 18px 40px rgba(0,0,0,.26), inset 0 0 0 1px rgba(0,255,180,.03);
  overflow:hidden;
}
.dxAlertsBrowser__top{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dxAlertsBrowser__back,
.dxAlertsBrowser__close{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
}
.dxAlertsBrowser__path{
  flex:1;
  min-width:0;
  font: 900 11px/1.1 Orbitron, Inter, system-ui;
  letter-spacing:.12em;
  color: rgba(235,245,255,.82);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dxAlertsBrowser__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  padding:10px;
  max-height:260px;
  overflow:auto;
}
.dxAlertPick{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  width:100%;padding:10px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color: rgba(235,245,255,.9);
  cursor:pointer;text-align:left;
}
.dxAlertPick:hover{ border-color: rgba(67,255,164,.18); background: rgba(67,255,164,.05); }
.dxAlertPick__txt{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.dxAlertPick__tag{ font:900 10px/1 Orbitron, Inter, system-ui; letter-spacing:.14em; color: rgba(120,200,255,.84); }
.dxAlertPick__name{ font-weight:800; }
.dxAlertPick__desc{ font-size:12px; line-height:1.35; color: rgba(235,245,255,.62); }
.dxAlertPick__go{ flex:0 0 auto; opacity:.56; padding-top:3px; }

/* === DXCELL FINAL UI FIXES === */

.agent-desc, .enter-btn { display:none !important; }

.agent-card {
  transition: all 0.25s ease;
  transform: perspective(1000px);
}

.agent-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 20px 60px rgba(0,255,150,0.15);
}

/* Reduce oversized headers */
.hero h1 {
  font-size: 42px !important;
  max-width: 700px;
}

/* Navbar tightening */
.navbar {
  height: 60px !important;
}

/* Fix stretched images */
img {
  object-fit: contain;
}
