/* DXCELL Crypto Charts — Polish Pack (tight + sharp) */
:root{
  --dx-border: rgba(130,255,185,.14);
  --dx-border-strong: rgba(67,255,164,.25);
  --dx-bg: rgba(255,255,255,.04);
  --dx-bg-hover: rgba(67,255,164,.08);
  --dx-text: rgba(235,245,255,.88);
  --dx-text-dim: rgba(235,245,255,.72);
}

html,body{height:100%}
body{overflow:hidden}

.topbar{
  position:sticky; top:0; z-index:200;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar__inner{width:min(1360px,calc(100% - 24px))}
.badge{
  padding:8px 14px;
  border:1px solid var(--dx-border);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 14px 46px rgba(0,0,0,.38);
}
.stage{height:calc(100vh - 64px);}

.card{
  inset:12px;
  border-radius:20px;
  border:1px solid var(--dx-border);
  box-shadow:0 28px 90px rgba(0,0,0,.5);
}
.hdr{
  padding:10px 12px 9px;
  align-items:center;
}
.symTitle{font-size:1.02rem}
.symSub{font-size:.84rem}

.seg{
  padding:4px;
  gap:4px;
  border:1px solid var(--dx-border);
  background:rgba(255,255,255,.035);
}
.seg button{
  padding:7px 11px;
  min-width:44px;
  letter-spacing:.02em;
  border-radius:999px;
  color:var(--dx-text-dim);
}
.seg button:hover{
  background:rgba(255,255,255,.05);
  color:var(--dx-text);
}
.seg button.active{
  background:rgba(67,255,164,.18);
  color:rgba(235,245,255,.94);
  box-shadow:0 10px 26px rgba(0,0,0,.25) inset;
}

.modeBtn{
  min-width:128px;
  padding:10px 14px;
  text-transform:none;
  letter-spacing:.04em;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.modeBtn:hover{
  background:rgba(67,255,164,.07);
  border-color:var(--dx-border-strong);
}

/* Active state for top-strip toggles (e.g., X-Ray) */
.modeBtn.isOn{
  background:rgba(67,255,164,.14);
  border-color:rgba(67,255,164,.35);
  box-shadow:0 10px 26px rgba(0,0,0,.25) inset;
}

.iconBtn{
  width:44px;height:44px;border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.iconBtn:active{transform:translateY(0)}
.iconBtn:focus-visible,.modeBtn:focus-visible,.seg button:focus-visible{
  outline:2px solid rgba(67,255,164,.35);
  outline-offset:2px;
}

.body{position:relative;flex:1;min-height:0}

/* RSI strip (under-chart, below ECharts canvas) */
.dxRsiStrip{
  margin-top: 8px;
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,12,18,.55);
  box-shadow: 0 10px 22px rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
}
.dxRsiStrip__left{ display:flex; align-items:center; gap:10px; }
.dxRsiStrip__tag{
  font-family: Orbitron, Inter, system-ui;
  letter-spacing:.18em;
  font-size:.72rem;
  opacity:.9;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(130,255,185,.18);
  background: rgba(67,255,164,.08);
}
.dxRsiStrip__value{
  font-size: 1.05rem;
  font-weight: 900;
  color: rgba(235,245,255,.94);
  min-width: 44px;
}
.dxRsiStrip__state{
  font-weight: 900;
  font-size:.9rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(235,245,255,.88);
}
.dxRsiStrip__state.isBull{ border-color: rgba(67,255,164,.28); background: rgba(67,255,164,.10); }
.dxRsiStrip__state.isBear{ border-color: rgba(255,92,122,.28); background: rgba(255,92,122,.10); }
.dxRsiStrip__mid{
  flex: 1;
  text-align:center;
  font-size: .9rem;
  color: rgba(235,245,255,.78);
  opacity: .95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dxRsiStrip__right{ display:flex; align-items:center; gap:8px; }
.dxRsiStrip__btn{
  all: unset;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(235,245,255,.86);
  font-weight: 800;
}
.dxRsiStrip__btn:hover{ background: rgba(255,255,255,.09); }

/* ---------- Flow Flash (tick direction tint) ---------- */
.flowFlash{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index:3; /* above chart; HUD/cards are above via DOM order */
  mix-blend-mode:screen;
  transition:opacity .12s ease;
  --flow-alpha: .16;
  background: radial-gradient(1200px 600px at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
}

.flowFlash.on{opacity:var(--flow-alpha)}
.flowFlash.up{background:
  radial-gradient(900px 520px at 55% 28%, rgba(27, 255, 169, .28) 0%, rgba(27, 255, 169, .12) 35%, rgba(0,0,0,0) 68%),
  radial-gradient(1200px 600px at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
}
.flowFlash.down{background:
  radial-gradient(900px 520px at 55% 28%, rgba(255, 63, 92, .26) 0%, rgba(255, 63, 92, .10) 35%, rgba(0,0,0,0) 68%),
  radial-gradient(1200px 600px at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
}
/* Chart can be repositioned for a "custom terminal" feel (ALT+drag). */
.body{ --dx-pan-x: 0px; --dx-pan-y: 0px; }
#chart{position:absolute;inset:0; transform:none; backface-visibility:hidden; }

/* Live market (TradingView) container
   IMPORTANT: it must mirror #chart's absolute sizing; otherwise it collapses to 0 height and appears blank. */
#tvChart{position:absolute;inset:0; z-index:1; }

/* When RSI strip is enabled we reserve space at the bottom just like #chart */
.body.hasRsiStrip #tvChart{ bottom: 56px; }

/* Keep tick-direction tint aligned with chart when moved */
.flowFlash{ transform:none; }

/* Vertical pan handle (price window). A tiny "rocket" grabber near the price axis. */
.dxYHandle{
  position:absolute;
  right: 14px;
  top: 46%;
  transform: translateY(-50%);
  width: 26px;
  height: 110px;
  border-radius: 18px;
  border: 1px solid rgba(130,255,185,.08);
  background: linear-gradient(180deg, rgba(18,36,46,.18), rgba(8,12,18,.10));
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 0 22px rgba(80,255,220,.06);
  color: rgba(224,255,243,.34);
  opacity: .28;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: ns-resize;
  z-index: 55;
  user-select:none;
  transition: opacity .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.dxYHandle:hover{
  opacity:.52;
  border-color: rgba(67,255,164,.18);
  background: linear-gradient(180deg, rgba(18,36,46,.28), rgba(8,12,18,.18));
  box-shadow: 0 0 0 1px rgba(67,255,164,.08) inset, 0 14px 38px rgba(0,0,0,.32), 0 0 26px rgba(80,255,220,.08);
  color: rgba(224,255,243,.58);
}
.dxYHandle.is-active,
.dxYHandle:active{
  opacity:1;
  border-color: rgba(67,255,164,.34);
  background: linear-gradient(180deg, rgba(14,28,30,.78), rgba(8,12,18,.72));
  box-shadow: 0 0 0 1px rgba(67,255,164,.16) inset, 0 18px 54px rgba(0,0,0,.44), 0 0 34px rgba(80,255,220,.14);
  color: rgba(224,255,243,.96);
  transform: translateY(-50%) scale(.99);
}
.dxYHandle__icon{
  filter: drop-shadow(0 8px 22px rgba(67,255,164,.12));
}
.dxYHandle.is-active .dxYHandle__icon,
.dxYHandle:active .dxYHandle__icon{
  filter: drop-shadow(0 10px 26px rgba(67,255,164,.22));
}

/* When chart-only mode, keep handle tight to the axis */
body.dx-chart-only .dxYHandle{ right: 12px; }

/* Horizontal pan handle (time window). A tiny "rocket" grabber near the bottom axis. */
.dxXHandle{
  position:absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 140px;
  height: 26px;
  border-radius: 18px;
  border: 1px solid rgba(130,255,185,.08);
  background: linear-gradient(180deg, rgba(18,36,46,.18), rgba(8,12,18,.10));
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 0 22px rgba(80,255,220,.06);
  color: rgba(224,255,243,.34);
  opacity: .28;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor: ew-resize;
  z-index: 55;
  user-select:none;
  transition: opacity .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease, bottom .18s ease;
}
.dxXHandle:hover{
  opacity:.52;
  border-color: rgba(67,255,164,.18);
  background: linear-gradient(180deg, rgba(18,36,46,.28), rgba(8,12,18,.18));
  box-shadow: 0 0 0 1px rgba(67,255,164,.08) inset, 0 14px 38px rgba(0,0,0,.32), 0 0 26px rgba(80,255,220,.08);
  color: rgba(224,255,243,.58);
}
.dxXHandle.is-active,
.dxXHandle:active{
  opacity:1;
  border-color: rgba(67,255,164,.34);
  background: linear-gradient(180deg, rgba(14,28,30,.78), rgba(8,12,18,.72));
  box-shadow: 0 0 0 1px rgba(67,255,164,.16) inset, 0 18px 54px rgba(0,0,0,.44), 0 0 34px rgba(80,255,220,.14);
  color: rgba(224,255,243,.96);
  transform: translateX(-50%) scale(.99);
}
.dxXHandle__icon{
  filter: drop-shadow(0 8px 22px rgba(67,255,164,.12));
}
.dxXHandle.is-active .dxXHandle__icon,
.dxXHandle:active .dxXHandle__icon{
  filter: drop-shadow(0 10px 26px rgba(67,255,164,.22));
}
.dxXHandle__track{
  width: 78px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}

body.dx-chart-only .dxXHandle{ bottom: 10px; }
.body.hasRsiStrip .dxXHandle,
body.dx-chart-only.hasRsiStrip .dxXHandle{ bottom: 66px; }

/* RSI strip anchored to bottom of chart stack (no overlay on lanes) */
.body{ position:relative; }
.body.hasRsiStrip #chart{ bottom: 56px; } /* reserve space for strip */
.dxRsiStrip{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  margin-top: 0;
}


@media (max-width: 860px){
  .card{inset:10px}
  .topbar__inner{width:calc(100% - 18px)}
  .hdr{gap:10px}
}

/* Feed selector (Binance / MEXC) */
.feedToggle{
  display:flex;
  gap:10px;
  margin:2px 0 12px;
}
.feedBtn{
  flex:1;
  border:1px solid rgba(56,255,195,.22);
  background:rgba(8,12,18,.55);
  color:#cfeee6;
  border-radius:14px;
  padding:10px 12px;
  font-family:Orbitron,Inter;
  letter-spacing:.12em;
  font-weight:900;
  font-size:.78rem;
  cursor:pointer;
  transition:transform .12s ease, background .18s ease, border-color .18s ease;
}
.feedBtn:hover{ transform:translateY(-1px); }
.feedBtn.isOn{
  background:rgba(56,255,195,.12);
  border-color:rgba(56,255,195,.55);
  box-shadow:0 0 0 1px rgba(56,255,195,.18) inset;
}

/* ===== Agent Chat (Docked panel) ===== */
.agentChat{
  position:absolute;
  right:84px; /* leaves room for agent dock */
  bottom:18px;
  width:min(420px, 46vw);
  height:320px;
  display:none;
  border-radius:18px;
  border:1px solid rgba(56,255,195,.22);
  background:rgba(6,10,14,.62);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
  z-index: 50;
}
.agentChat.isOpen{ display:flex; flex-direction:column; }

.agentChatHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(10,16,22,.35);
}
.agentChatTitle{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: Orbitron, Inter;
  letter-spacing:.08em;
  font-weight:900;
  color:#d7fff3;
  font-size:.78rem;
}
.agentChatDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(56,255,195,.65);
  box-shadow:0 0 18px rgba(56,255,195,.45);
}
.agentChatActions{ display:flex; gap:8px; }
.agentChatBtn{
  width:30px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  color:#cfeee6;
  cursor:pointer;
}
.agentChatBtn:hover{ border-color: rgba(56,255,195,.35); }

.agentChatBody{
  flex:1;
  padding:12px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.agentChatMsg{
  max-width: 92%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.18);
  color:#d7fff3;
  font-family: Inter;
  font-size:.92rem;
  line-height:1.25rem;
}
.agentChatMsg.user{
  align-self:flex-end;
  border-color:rgba(56,255,195,.22);
  background:rgba(56,255,195,.08);
}
.agentChatMsg.agent{
  align-self:flex-start;
}

.agentChatComposer{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(10,16,22,.25);
}
.agentChatInput{
  flex:1;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.20);
  color:#e9fffb;
  padding:0 12px;
  outline:none;
}
.agentChatInput:focus{ border-color: rgba(56,255,195,.40); box-shadow:0 0 0 3px rgba(56,255,195,.10); }
.agentChatSend{
  height:40px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(56,255,195,.28);
  background:rgba(56,255,195,.12);
  color:#eafff9;
  font-family: Orbitron, Inter;
  letter-spacing:.10em;
  font-weight:900;
  cursor:pointer;
}
.agentChatSend:hover{ border-color: rgba(56,255,195,.55); }

/* Agent-themed accents */
.agentChat.moon .agentChatDot{ background:rgba(56,255,195,.72); box-shadow:0 0 18px rgba(56,255,195,.55); }
.agentChat.news .agentChatDot{ background:rgba(140,255,240,.55); box-shadow:0 0 18px rgba(140,255,240,.35); }
.agentChat.prosperous .agentChatDot{ background:rgba(255,215,120,.55); box-shadow:0 0 18px rgba(255,215,120,.35); }
.agentChat.dexter .agentChatDot{ background:rgba(120,255,160,.55); box-shadow:0 0 18px rgba(120,255,160,.35); }

@media (max-width: 900px){
  .agentChat{ right:74px; width:min(420px, 70vw); }
}


/* --- RSI (R) panel under chart --- */
.dxRsiDeck{
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 268px;
  max-width: min(320px, 38vw);
  z-index: 50;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.dxRsiDeck.is-open{ opacity: 1; transform: translateY(0); pointer-events: none; }
.dxRsiDeck.is-open *{ pointer-events: auto; }

.xOscPanel{
  /* tighter on laptop height */
  margin: 6px 0 6px;
  padding: 8px 10px 8px;
  border: 1px solid rgba(130,255,185,.14);
  background: rgba(10,14,24,.45);
  border-radius: 14px;
}
.xOscHeader{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 6px;
}
.xOscMeta{
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(235,245,255,.92);
  font-size: .92rem;
}
.dxVstSelect{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(235,245,255,.92);
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
}
.dxVstSelect:focus{ outline: none; box-shadow: 0 0 0 2px rgba(130,255,185,.22); }
.xOscHeaderBtns{ display:flex; gap:6px; }
.xOscBtn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(235,245,255,.88);
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 800;
  cursor: pointer;
}
.xOscBtn:hover{ background: rgba(255,255,255,.07); }

/* PRO button active state */
.xOscBtn.is-active{
  border-color: rgba(130,255,185,.45);
  background: rgba(130,255,185,.10);
  color: rgba(235,245,255,.96);
  box-shadow: 0 0 0 2px rgba(130,255,185,.10);
}

.xOscMain{
  display:flex; gap:12px; align-items:stretch;
}
.xOscBig{
  min-width: 128px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.22);
}
.xOscValue{
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: rgba(235,245,255,.95);
}
.xOscState{
  margin-top: 6px;
  font-weight: 900;
  font-size: .85rem;
  color: rgba(235,245,255,.78);
}
.xOscBannerWrap{
  flex: 1;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.18);
}
.xOscBanner{
  font-weight: 900;
  font-size: .95rem;
  color: rgba(235,245,255,.92);
}
.xOscSub{
  margin-top: 4px;
  font-weight: 700;
  font-size: .82rem;
  color: rgba(235,245,255,.72);
}
.xOscStats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 8px;
}
.xOscStat{
  display:flex; justify-content:space-between; gap:8px;
  font-size: .78rem;
  color: rgba(235,245,255,.70);
}
.xOscStat b{ color: rgba(235,245,255,.92); font-weight: 900; }

.xOscSpark{
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
}
#xOscSvg{
  width: 100%;
  height: 30px;
  display:block;
  /* OB/OS contrast (values injected via CSS vars from JS) */
  --dx-ob: 30%; /* RSI 70 -> y=30% */
  --dx-os: 70%; /* RSI 30 -> y=70% */
  --dx-mid: 50%;
  background:
    /* OB/OS bands (stronger for dark UI) */
    linear-gradient(to bottom,
      rgba(130,255,185,.30) 0%,
      rgba(130,255,185,.18) var(--dx-ob),
      rgba(0,0,0,0) var(--dx-ob),
      rgba(0,0,0,0) var(--dx-os),
      rgba(255,92,122,.18) var(--dx-os),
      rgba(255,92,122,.30) 100%
    ),
    /* OB line */
    linear-gradient(to bottom,
      rgba(0,0,0,0) calc(var(--dx-ob) - .7%),
      rgba(130,255,185,.55) var(--dx-ob),
      rgba(0,0,0,0) calc(var(--dx-ob) + .7%)
    ),
    /* MID line (50) */
    linear-gradient(to bottom,
      rgba(0,0,0,0) calc(var(--dx-mid) - .7%),
      rgba(235,245,255,.22) var(--dx-mid),
      rgba(0,0,0,0) calc(var(--dx-mid) + .7%)
    ),
    /* OS line */
    linear-gradient(to bottom,
      rgba(0,0,0,0) calc(var(--dx-os) - .7%),
      rgba(255,92,122,.55) var(--dx-os),
      rgba(0,0,0,0) calc(var(--dx-os) + .7%)
    );
  border-radius: 10px;
}

#xOscPath{
  fill:none;
  stroke: rgba(130,255,185,.92);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* RSI Stack (3 overlays) */
#xOscPath2,
#xOscPath3{
  fill:none;
  stroke: rgba(235,245,255,.40);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Active RSI (subtle glow, PRO mode only) */
.xOscPanel.is-pro #xOscPath.is-active,
.xOscPanel.is-pro #xOscPath2.is-active,
.xOscPanel.is-pro #xOscPath3.is-active{
  filter: drop-shadow(0 0 10px rgba(130,255,185,.25));
}

/* Bear tint option for active path */
.xOscPathBear{ stroke: rgba(255,92,122,.92) !important; }

/* Invisible hit paths for click-to-select */
.xOscHit{
  fill:none;
  stroke: rgba(0,0,0,0);
  stroke-width: 10;
  pointer-events: stroke;
}

/* Inline toggles / warning in settings */
.dxInlineToggle{ flex-direction:row !important; align-items:center; gap:10px !important; }
.dxInlineToggle input[type="checkbox"]{ width:18px; height:18px; }
.xOscWarn{
  margin-top: 8px;
  padding: 10px 10px;
  border: 1px solid rgba(242,201,76,.28);
  background: rgba(242,201,76,.08);
  border-radius: 12px;
  font-size: .8rem;
  color: rgba(235,245,255,.82);
}

.xOscNote{
  margin-top: 6px;
  font-size: .78rem;
  color: rgba(235,245,255,.65);
}

.xOscSettings{
  margin: 10px 0 0;
  padding: 10px 10px 10px;
  border: 1px dashed rgba(255,255,255,.14);
  background: rgba(10,14,24,.35);
  border-radius: 14px;
}
.xOscSettingsTop{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.xOscSettingsTitle{ font-weight: 900; color: rgba(235,245,255,.9); }
.xOscSettingsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: 10px;
}
.xOscSettingsGrid label{
  display:flex; flex-direction:column; gap:6px;
  font-size: .78rem;
  color: rgba(235,245,255,.70);
  font-weight: 700;
}
.xOscSettingsGrid input{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(235,245,255,.9);
  border-radius: 10px;
  padding: 8px 10px;
  outline: none;
}
.xOscSettingsBtns{ display:flex; gap:8px; margin-top: 10px; }


/* RSI settings popover */
.dxRsiPop{
  position: fixed;
  width: 300px;
  z-index: 260;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(8,12,18,.72);
  box-shadow: 0 14px 34px rgba(0,0,0,.40);
  backdrop-filter: blur(14px);
  color: rgba(235,245,255,.88);
}
.dxRsiPop__hd{font-weight:800; letter-spacing:.2px; margin-bottom:10px;}
.dxRsiPop__grid{display:grid; grid-template-columns: 1fr 1fr; gap:10px;}
.dxRsiPop__grid label{display:flex; flex-direction:column; gap:6px; font-size:12px; color: rgba(235,245,255,.70);}
.dxRsiPop__grid input[type="number"]{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(235,245,255,.90);
  outline: none;
}
.dxRsiPop__chk{grid-column: 1 / -1; flex-direction:row !important; align-items:center; gap:8px;}
.dxRsiPop__btns{display:flex; gap:8px; justify-content:flex-end; margin-top:10px;}
.dxRsiPop__btns button{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(235,245,255,.90);
  cursor:pointer;
}
.dxRsiPop__btns button:hover{background: rgba(67,255,164,.08); border-color: rgba(67,255,164,.20);}
.dxRsiPop__note{margin-top:10px; font-size:11px; color: rgba(235,245,255,.55); line-height:1.35;}


/* Q Quick Panel — hotkey catalog */
#dx-qcatalog{display:flex;flex-direction:column;gap:14px}
.dx-qsec{border:1px solid rgba(130,255,185,.12);border-radius:18px;background:rgba(6,12,18,.35);box-shadow:0 18px 60px rgba(0,0,0,.35);padding:12px}
.dx-qsec__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.dx-qsec__title{font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;opacity:.92}
.dx-qsec__note{font-size:.78rem;opacity:.65}
.dx-qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width: 980px){.dx-qgrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.dx-qitem{appearance:none;border:1px solid rgba(130,255,185,.14);border-radius:16px;background:rgba(255,255,255,.03);color:rgba(235,245,255,.92);padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:transform .12s ease,background .12s ease,border-color .12s ease;min-height:44px}
.dx-qitem:hover{background:rgba(67,255,164,.08);border-color:rgba(67,255,164,.25);transform:translateY(-1px)}
.dx-qitem.is-display{cursor:default;opacity:.85}
.dx-qitem.is-display:hover{background:rgba(255,255,255,.03);border-color:rgba(130,255,185,.14);transform:none}
.dx-qitem .dx-keycap{min-width:46px;justify-content:center}
.dx-qlabel{font-weight:800;font-size:.92rem;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* TradingView embed loading overlay */
.tv-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:linear-gradient(180deg,rgba(4,10,10,.35),rgba(4,10,10,.15));}
.tv-loading-inner{pointer-events:auto;max-width:420px;text-align:center;padding:16px 18px;border:1px solid rgba(30,255,200,.18);border-radius:16px;background:rgba(6,10,10,.55);backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(0,0,0,.45);}
.tv-loading-text{margin-top:10px;font-weight:700;letter-spacing:.2px;}
.tv-loading-sub{margin-top:6px;font-size:12px;opacity:.9;line-height:1.35;}
.tv-loading-sub a{color:rgba(30,255,200,.95);text-decoration:none;border-bottom:1px dashed rgba(30,255,200,.45);}
.tv-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px;transform:translateY(0);animation:tvb 0.9s infinite ease-in-out;}
.tv-dot:nth-child(1){animation-delay:0s}.tv-dot:nth-child(2){animation-delay:.15s}.tv-dot:nth-child(3){animation-delay:.3s}
@keyframes tvb{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-6px);opacity:1}}

/* === 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;
}