/* Stage 408 — Professional Chart Engine + Indicator Panel
   Deriv-style chart controls for Quantum Lion AI Broker Terminal. */
:root{
  --q408-bg:#071018; --q408-panel:rgba(9,15,23,.92); --q408-panel2:rgba(14,23,35,.94);
  --q408-line:rgba(148,163,184,.18); --q408-text:#f7fbff; --q408-muted:#9aa8ba;
  --q408-green:#00c896; --q408-red:#ff3f6c; --q408-cyan:#22d3ee; --q408-amber:#f5c451;
}
body.stage399-terminal-open .q399-chart-zone.stage408-chart-ready{background:#071018;min-height:620px;}
body.stage399-terminal-open .q399-chart-zone.stage408-chart-ready #q399ChartCanvas{opacity:.02}
#q408ChartCanvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:2; display:block; background:radial-gradient(circle at 50% 0%,rgba(31,46,69,.5),rgba(7,12,18,.96) 48%,#071018 100%);
}
#q408OscillatorCanvas{
  position:absolute; left:0; right:0; bottom:0; height:132px; width:100%; z-index:3; pointer-events:none;
  background:linear-gradient(180deg,rgba(9,13,19,.05),rgba(7,10,15,.88)); border-top:1px solid rgba(148,163,184,.14);
}
.q408-toolbar{
  position:absolute; left:260px; top:14px; right:168px; z-index:11; min-height:42px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:7px; border-radius:13px; background:rgba(7,13,21,.72); border:1px solid rgba(255,255,255,.08); box-shadow:0 16px 36px rgba(0,0,0,.28); backdrop-filter:blur(16px);
}
.q408-toolbar select,.q408-toolbar button{
  border:1px solid rgba(255,255,255,.09); background:rgba(15,24,36,.92); color:#eaf4ff; border-radius:10px; min-height:30px; padding:0 9px; font:800 11px/1 Inter,system-ui,sans-serif; outline:none;
}
.q408-toolbar button{cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.q408-toolbar button.is-active{background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(0,200,150,.18));border-color:rgba(34,211,238,.38);color:white}
.q408-toolbar .q408-sep{width:1px;height:24px;background:rgba(255,255,255,.11);margin:0 2px}
.q408-indicator-panel{
  position:absolute; right:14px; top:72px; width:286px; max-height:calc(100% - 150px); z-index:10; display:flex; flex-direction:column; gap:10px;
  padding:12px; border-radius:16px; background:linear-gradient(180deg,var(--q408-panel2),var(--q408-panel)); border:1px solid rgba(255,255,255,.085); box-shadow:0 24px 60px rgba(0,0,0,.38); backdrop-filter:blur(16px);
}
.q408-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.q408-panel-head strong{font:950 13px/1.1 Inter,system-ui,sans-serif;color:#fff}
.q408-panel-head span{font:850 9px/1 Inter,system-ui,sans-serif;color:var(--q408-cyan);letter-spacing:.12em;text-transform:uppercase}
.q408-indicator-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.q408-indicator-grid button,.q408-drawing-tools button{
  min-height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);color:#dcecff;font:900 10px Inter,system-ui;cursor:pointer;
}
.q408-indicator-grid button.is-active{color:#061018;background:linear-gradient(135deg,#22d3ee,#00c896);border-color:transparent}
.q408-drawing-tools{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.q408-drawing-tools button.is-active{border-color:rgba(245,196,81,.55);color:#fff;background:rgba(245,196,81,.12)}
.q408-status{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)
}
.q408-status div{background:rgba(255,255,255,.04);border-radius:10px;padding:8px}
.q408-status small{display:block;color:var(--q408-muted);font:850 9px/1 Inter,system-ui;text-transform:uppercase;letter-spacing:.08em}
.q408-status strong{display:block;color:#fff;font:950 12px/1.25 Inter,system-ui;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q408-crosshair{
  position:absolute;z-index:12;pointer-events:none;left:0;right:0;top:0;bottom:0;display:none
}
.q408-crosshair.is-visible{display:block}
.q408-crosshair .v,.q408-crosshair .h{position:absolute;background:rgba(255,255,255,.35)}
.q408-crosshair .v{top:0;bottom:132px;width:1px}
.q408-crosshair .h{left:0;right:0;height:1px}
.q408-crosshair .tag{
  position:absolute;right:80px;min-width:78px;transform:translateY(-50%);border-radius:9px;padding:5px 8px;background:#f8fbff;color:#061018;font:950 11px Inter,system-ui;box-shadow:0 8px 24px rgba(0,0,0,.24)
}
.q408-drawing-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
.q408-drawing-label{
  position:absolute;z-index:13;padding:5px 7px;border-radius:9px;background:rgba(8,13,20,.92);border:1px solid rgba(255,255,255,.1);color:#eaf4ff;font:850 10px Inter,system-ui;pointer-events:none;
}
.q408-feed-badge{
  position:absolute;left:260px;bottom:148px;z-index:10;display:flex;gap:8px;align-items:center;border-radius:999px;padding:8px 10px;background:rgba(7,13,21,.76);border:1px solid rgba(255,255,255,.08);color:#dcecff;font:900 10px Inter,system-ui;letter-spacing:.06em;text-transform:uppercase;
}
.q408-feed-badge::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--q408-green);box-shadow:0 0 0 5px rgba(0,200,150,.12)}
@media(max-width:1180px){
  .q408-toolbar{left:14px;right:14px;top:84px}
  .q408-indicator-panel{position:relative;right:auto;top:auto;width:auto;margin:12px;max-height:none}
  .q408-feed-badge{left:14px}
}