/* Stage 399 — Native Deriv-style Trading Workspace
   Professional post-auth terminal shell: chart, trade ticket, AI controls, portfolio/audit panels. */
:root {
  --q399-bg:#0b111d;
  --q399-panel:#111a29;
  --q399-panel-2:#0f1724;
  --q399-panel-3:#090f18;
  --q399-border:rgba(136,157,191,.18);
  --q399-border-strong:rgba(158,178,214,.28);
  --q399-text:#f2f6ff;
  --q399-muted:#9da9bd;
  --q399-soft:#c6d0e1;
  --q399-green:#00c896;
  --q399-red:#ff3f6c;
  --q399-blue:#2e8bff;
  --q399-gold:#f6d37d;
  --q399-cyan:#22d3ee;
  --q399-shadow:0 24px 80px rgba(0,0,0,.42);
}
body.stage399-terminal-open {
  overflow:hidden !important;
  background:#070b12 !important;
}
body.stage399-terminal-open > *:not(#stage399TerminalShell):not(.stage398-toast):not(.stage399-toast) {
  visibility:hidden !important;
}
#stage399TerminalShell, #stage399TerminalShell * { box-sizing:border-box; }
#stage399TerminalShell {
  position:fixed;
  inset:0;
  z-index:999900;
  display:grid;
  grid-template-rows:58px 1fr;
  background:linear-gradient(180deg,#0a1019 0%,#070b12 100%);
  color:var(--q399-text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow:hidden;
}
.q399-topbar {
  height:58px;
  display:grid;
  grid-template-columns:minmax(230px,320px) minmax(360px,1fr) minmax(260px,420px);
  align-items:center;
  gap:12px;
  padding:0 16px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(5,8,13,.96);
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset;
}
.q399-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.q399-brand-mark {
  width:38px; height:38px; border-radius:11px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(255,211,77,.16), rgba(10,20,35,.96));
  border:1px solid rgba(246,211,125,.25);
  box-shadow:0 0 26px rgba(246,211,125,.08);
}
.q399-brand-mark img { width:100%; height:100%; object-fit:contain; }
.q399-brand-title { min-width:0; display:flex; flex-direction:column; gap:2px; }
.q399-brand-title strong { font-size:15px; line-height:1.05; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q399-brand-title span { color:var(--q399-muted); font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.q399-nav { display:flex; align-items:center; gap:6px; overflow:auto; scrollbar-width:none; }
.q399-nav::-webkit-scrollbar { display:none; }
.q399-nav button {
  border:0; border-radius:10px; min-height:38px; padding:0 13px;
  color:#bcc8dc; background:transparent; font-weight:850; font-size:13px; letter-spacing:-.01em;
  display:flex; align-items:center; gap:8px; cursor:pointer; white-space:nowrap;
}
.q399-nav button:hover { background:rgba(255,255,255,.055); color:#fff; }
.q399-nav button.is-active { color:#fff; background:rgba(46,139,255,.16); box-shadow:inset 0 0 0 1px rgba(46,139,255,.25); }
.q399-account-strip { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; }
.q399-account-select, .q399-compact-select {
  height:38px; min-width:190px; max-width:260px; border-radius:10px; border:1px solid rgba(129,150,186,.28);
  background:#0d1523; color:#ecf4ff; padding:0 34px 0 12px; font-size:12px; font-weight:850; color-scheme:dark;
  outline:none;
}
.q399-account-select option, .q399-compact-select option { background:#0d1523; color:#f3f8ff; }
.q399-balance {
  height:38px; border-radius:10px; padding:0 12px; display:flex; flex-direction:column; justify-content:center;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); min-width:105px;
}
.q399-balance small { color:var(--q399-muted); font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.q399-balance strong { color:var(--q399-green); font-size:12px; font-weight:950; }
.q399-body {
  display:grid;
  grid-template-columns:1fr 292px;
  min-height:0;
  overflow:hidden;
}
.q399-workspace { min-width:0; min-height:0; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.q399-page { display:none; min-height:0; height:100%; }
.q399-page.is-active { display:flex; flex-direction:column; }
.q399-trading-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 292px;
  min-height:0; height:100%;
}
.q399-chart-zone {
  min-width:0; min-height:0; position:relative; background:#101722;
  border-right:1px solid rgba(255,255,255,.075);
  overflow:hidden;
}
.q399-chart-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; background:#111821; }
.q399-symbol-card {
  position:absolute; left:14px; top:14px; z-index:5; width:286px; min-height:72px;
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px;
  background:rgba(14,22,34,.94); border:1px solid rgba(255,255,255,.05); box-shadow:0 18px 48px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
}
.q399-symbol-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:8px; background:#171f2e; border:1px solid rgba(255,255,255,.055); }
.q399-symbol-copy { min-width:0; flex:1; }
.q399-symbol-copy strong { display:block; font-size:15px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.q399-symbol-copy span { display:block; margin-top:3px; color:#d7dfec; font-size:12px; font-weight:700; }
.q399-symbol-copy em { font-style:normal; color:var(--q399-green); }
.q399-symbol-card select { position:absolute; inset:0; opacity:0; cursor:pointer; }
.q399-chart-toolbar {
  position:absolute; left:24px; top:112px; z-index:5; width:56px; padding:7px 6px;
  background:rgba(8,12,19,.78); border-radius:8px; display:flex; flex-direction:column; align-items:center; gap:5px;
  border:1px solid rgba(255,255,255,.05); box-shadow:0 20px 40px rgba(0,0,0,.24);
}
.q399-tool {
  width:38px; height:38px; border-radius:6px; border:0; cursor:pointer; color:#cfd8e6; background:transparent;
  display:grid; place-items:center; font-weight:950; font-size:15px;
}
.q399-tool:hover, .q399-tool.is-active { color:#fff; background:rgba(255,255,255,.08); }
.q399-chart-range { position:absolute; left:92px; top:112px; z-index:5; display:flex; gap:7px; }
.q399-chart-range button {
  height:34px; min-width:42px; padding:0 12px; border-radius:8px; border:1px solid rgba(255,255,255,.06);
  background:rgba(10,16,25,.78); color:#cdd7e8; font-size:12px; font-weight:900; cursor:pointer;
}
.q399-chart-range button.is-active { color:#fff; background:rgba(46,139,255,.18); border-color:rgba(46,139,255,.38); }
.q399-price-tag {
  position:absolute; right:8px; z-index:6; height:28px; min-width:72px; padding:0 9px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; background:#f5f7fb; color:#121923; font-size:12px; font-weight:950;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.q399-price-line-label {
  position:absolute; right:8px; z-index:6; height:24px; min-width:68px; padding:0 9px; border-radius:5px;
  display:flex; align-items:center; justify-content:center; background:#071e38; border:1px solid #138cff; color:#50a6ff; font-size:12px; font-weight:900;
}
.q399-bottom-status {
  position:absolute; left:0; right:0; bottom:0; z-index:5; height:36px; padding:0 14px;
  display:flex; align-items:center; justify-content:flex-end; gap:16px; color:#c9d4e5; font-size:12px; font-weight:650;
  background:rgba(5,8,13,.88); border-top:1px solid rgba(255,255,255,.055);
}
.q399-live-dot { width:9px; height:9px; border-radius:50%; background:#00b49d; box-shadow:0 0 16px rgba(0,180,157,.9); }
.q399-right-ticket, .q399-side-panel {
  min-width:0; min-height:0; overflow:auto; background:#0c0e10; border-left:1px solid rgba(255,255,255,.07);
  padding:12px 10px 18px; scrollbar-color:rgba(87,111,148,.55) transparent;
}
.q399-ticket-card {
  background:#111; border-radius:5px; margin-bottom:10px; border:1px solid rgba(255,255,255,.045); overflow:hidden;
}
.q399-ticket-head { padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.q399-ticket-head strong { font-size:14px; }
.q399-contract-type { display:flex; align-items:center; gap:8px; font-weight:900; }
.q399-ticket-section { padding:11px 10px; border-top:1px solid rgba(255,255,255,.055); }
.q399-ticket-label { color:#b9c2ce; font-size:13px; font-weight:800; margin-bottom:7px; display:flex; align-items:center; justify-content:space-between; }
.q399-ticket-field {
  height:44px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#080808; border-radius:4px; padding:0 12px; color:#e6edf7; font-weight:850;
}
.q399-ticket-field input, .q399-ticket-field select {
  width:100%; height:100%; border:0; outline:0; background:transparent; color:#fff; font-weight:850; font-size:14px; text-align:center; color-scheme:dark;
}
.q399-ticket-field select option { background:#111; color:#fff; }
.q399-stepper { display:flex; align-items:center; gap:8px; }
.q399-stepper button { width:28px; height:28px; border:0; border-radius:4px; background:#1d1d1d; color:#fff; font-size:18px; cursor:pointer; }
.q399-payout-row { display:flex; align-items:center; justify-content:space-between; color:#9da8b7; font-weight:800; margin-top:9px; }
.q399-payout-row strong { color:#fff; font-size:14px; }
.q399-buy-button, .q399-quote-button {
  width:100%; min-height:50px; border:0; border-radius:5px; cursor:pointer; color:#fff; font-weight:950; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:9px; margin-top:10px;
}
.q399-buy-button { background:linear-gradient(180deg,#00b596,#009a82); box-shadow:0 16px 36px rgba(0,181,150,.2); }
.q399-quote-button { background:#222; border:1px solid rgba(255,255,255,.08); }
.q399-buy-button:hover { filter:brightness(1.07); }
.q399-ticket-note { color:#8d99aa; font-size:11px; line-height:1.45; padding:10px 2px; }
.q399-ai-panel { background:#111; border-radius:5px; border:1px solid rgba(255,255,255,.045); padding:12px; }
.q399-ai-panel h3 { margin:0 0 8px; font-size:14px; }
.q399-ai-status { padding:9px 10px; border-radius:8px; background:rgba(0,200,150,.08); border:1px solid rgba(0,200,150,.18); color:#d9fff5; font-size:12px; font-weight:850; line-height:1.35; }
.q399-ai-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.q399-ai-grid button {
  min-height:40px; border-radius:8px; border:1px solid rgba(255,255,255,.08); background:#151a21; color:#edf6ff; font-size:12px; font-weight:900; cursor:pointer;
}
.q399-ai-grid button:hover { border-color:rgba(46,139,255,.38); background:#182438; }
.q399-ai-grid .danger { border-color:rgba(255,63,108,.28); color:#ffd3dc; }
.q399-bottom-dock {
  height:170px; border-top:1px solid rgba(255,255,255,.075); background:#0c121d; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:10px;
}
.q399-dock-card { min-width:0; overflow:hidden; border-radius:10px; background:#101827; border:1px solid rgba(255,255,255,.065); padding:10px; }
.q399-dock-card h4 { margin:0 0 8px; color:#aebacf; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.q399-dock-table { width:100%; border-collapse:collapse; font-size:12px; }
.q399-dock-table td { padding:5px 4px; border-top:1px solid rgba(255,255,255,.045); color:#dce6f5; }
.q399-dock-table td:last-child { text-align:right; color:#aebacf; }
.q399-panel-page { height:100%; overflow:auto; padding:18px; background:#0c111c; }
.q399-panel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.q399-panel-card { border-radius:16px; border:1px solid rgba(255,255,255,.07); background:linear-gradient(180deg,#111b2b,#0e1522); padding:16px; min-height:130px; box-shadow:var(--q399-shadow); }
.q399-panel-card h3 { margin:0 0 8px; font-size:15px; }
.q399-panel-card p { margin:0; color:#aebacf; line-height:1.5; font-size:13px; }
.q399-stat-number { margin-top:12px; display:block; font-size:26px; font-weight:950; color:#fff; letter-spacing:-.04em; }
.q399-toast {
  position:fixed; right:18px; bottom:18px; z-index:1000001; min-width:280px; max-width:460px; padding:13px 15px;
  border-radius:14px; background:#101827; border:1px solid rgba(46,139,255,.35); color:#eef7ff; box-shadow:0 24px 64px rgba(0,0,0,.44);
  font:850 12px/1.45 Inter,system-ui,sans-serif;
}
.q399-toast[data-tone="success"] { border-color:rgba(0,200,150,.42); }
.q399-toast[data-tone="error"] { border-color:rgba(255,63,108,.45); }
.q399-locked-real { color:#ffd6a2; border-color:rgba(246,211,125,.25) !important; background:rgba(246,211,125,.08) !important; }
@media (max-width: 1120px) {
  #stage399TerminalShell { grid-template-rows:96px 1fr; }
  .q399-topbar { height:96px; grid-template-columns:1fr; align-content:center; gap:6px; padding:8px 12px; }
  .q399-account-strip { justify-content:flex-start; overflow:auto; }
  .q399-body, .q399-trading-grid { grid-template-columns:1fr; }
  .q399-right-ticket { display:grid; grid-template-columns:1fr 1fr; gap:10px; border-left:0; border-top:1px solid rgba(255,255,255,.07); max-height:420px; }
  .q399-bottom-dock { grid-template-columns:1fr; height:260px; overflow:auto; }
  .q399-panel-grid { grid-template-columns:1fr; }
}
@media (max-width: 680px) {
  .q399-right-ticket { grid-template-columns:1fr; }
  .q399-symbol-card { width:240px; }
  .q399-chart-toolbar { left:12px; top:100px; }
  .q399-chart-range { left:78px; top:100px; }
  .q399-account-select { min-width:160px; }
}