/* Stage 400 — Open Contract Chart Overlay & Lifecycle Visualization
   Deriv-grade chart overlays: entry, barrier, expiry, live P/L and open-position rail. */
:root {
  --q400-green:#00c896;
  --q400-red:#ff3f6c;
  --q400-cyan:#22d3ee;
  --q400-ink:#070b10;
  --q400-panel:#0d1117;
  --q400-panel-soft:#121a25;
  --q400-line:rgba(148,163,184,.16);
  --q400-text:#f7fbff;
  --q400-muted:#9aa8ba;
}
body.stage399-terminal-open .q399-chart-zone.stage400-contracts-ready { overflow:hidden; }
#q400OverlayCanvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:4;
  pointer-events:none;
}
.q400-open-rail {
  position:absolute;
  left:12px;
  top:188px;
  bottom:48px;
  width:238px;
  z-index:8;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:auto;
}
.q400-open-rail.is-empty { pointer-events:none; }
.q400-open-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:34px;
  padding:0 10px;
  border-radius:8px;
  background:rgba(8,13,20,.82);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 18px 40px rgba(0,0,0,.24);
  backdrop-filter:blur(10px);
}
.q400-open-head strong {
  color:#fff;
  font-size:12px;
  font-weight:950;
  letter-spacing:-.01em;
}
.q400-open-head span {
  color:#d3dde9;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.q400-position-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  padding-right:3px;
  scrollbar-color:rgba(80,130,190,.45) transparent;
}
.q400-position-empty {
  padding:12px;
  border-radius:8px;
  color:#9eabba;
  background:rgba(8,12,18,.62);
  border:1px solid rgba(255,255,255,.055);
  font-size:12px;
  line-height:1.45;
}
.q400-position-card {
  border-radius:9px;
  background:linear-gradient(180deg,rgba(12,20,29,.96),rgba(8,13,19,.96));
  border:1px solid rgba(255,255,255,.075);
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  overflow:hidden;
}
.q400-position-card[data-tone="profit"] { border-color:rgba(0,200,150,.32); box-shadow:0 18px 46px rgba(0,130,98,.1); }
.q400-position-card[data-tone="loss"] { border-color:rgba(255,63,108,.32); box-shadow:0 18px 46px rgba(160,20,50,.12); }
.q400-card-top {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:10px 10px 8px;
}
.q400-contract-title {
  color:#f3f7ff;
  font-size:12px;
  line-height:1.15;
  font-weight:950;
}
.q400-contract-title small {
  display:block;
  color:#9eabba;
  margin-top:2px;
  font-size:10px;
  font-weight:850;
}
.q400-direction {
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:24px;
  border-radius:999px;
  padding:0 8px;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.q400-direction.higher { background:rgba(0,200,150,.12); color:#9dffe7; border:1px solid rgba(0,200,150,.25); }
.q400-direction.lower { background:rgba(255,63,108,.12); color:#ffd0da; border:1px solid rgba(255,63,108,.25); }
.q400-progress-track {
  height:6px;
  margin:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.11);
  overflow:hidden;
}
.q400-progress-bar {
  width:0%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--q400-cyan),var(--q400-green));
  transition:width .25s ease;
}
.q400-metrics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:9px 10px 7px;
}
.q400-metric span {
  display:block;
  color:#8795a8;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.q400-metric strong {
  display:block;
  color:#f6f9ff;
  font-size:12px;
  font-weight:950;
  margin-top:2px;
}
.q400-metric strong.good { color:var(--q400-green); }
.q400-metric strong.bad { color:var(--q400-red); }
.q400-card-actions {
  display:flex;
  gap:8px;
  padding:0 10px 10px;
}
.q400-card-actions button {
  flex:1;
  min-height:30px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.13);
  background:#111923;
  color:#edf5ff;
  font-size:11px;
  font-weight:950;
  cursor:pointer;
}
.q400-card-actions button:hover { border-color:rgba(46,139,255,.48); background:#162336; }
.q400-card-actions button.sell { border-color:rgba(255,255,255,.22); background:#151515; }
.q400-card-actions button.sell:hover { border-color:rgba(255,63,108,.55); color:#ffd0da; }
.q400-overlay-badge {
  position:absolute;
  z-index:7;
  right:86px;
  top:82px;
  min-height:30px;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:7px;
  background:rgba(7,12,18,.84);
  border:1px solid rgba(0,200,150,.22);
  color:#eafff8;
  font-size:11px;
  font-weight:950;
  letter-spacing:.02em;
  backdrop-filter:blur(10px);
}
.q400-overlay-badge::before {
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--q400-green);
  box-shadow:0 0 14px rgba(0,200,150,.9);
}
.q400-contract-focus-chip {
  position:absolute;
  z-index:7;
  right:86px;
  top:120px;
  max-width:280px;
  padding:9px 11px;
  border-radius:8px;
  background:rgba(12,18,26,.88);
  border:1px solid rgba(255,255,255,.075);
  color:#d8e4f3;
  font-size:11px;
  line-height:1.35;
  font-weight:820;
  backdrop-filter:blur(10px);
}
.q400-contract-focus-chip strong { color:#fff; font-weight:950; }
.q399-dock-table .q400-contract-row td:first-child { color:#f5f9ff; }
.q399-dock-table .q400-contract-row .good { color:var(--q400-green); font-weight:950; }
.q399-dock-table .q400-contract-row .bad { color:var(--q400-red); font-weight:950; }
@media (max-width: 1120px) {
  .q400-open-rail { width:210px; top:150px; bottom:430px; }
  .q400-overlay-badge, .q400-contract-focus-chip { right:18px; }
}
@media (max-width: 760px) {
  .q400-open-rail { position:absolute; left:10px; right:10px; bottom:44px; top:auto; width:auto; max-height:190px; }
  .q400-open-head { min-height:30px; }
  .q400-position-card { max-width:none; }
  .q400-overlay-badge, .q400-contract-focus-chip { display:none; }
}