/* JTraderX 3.00 panel demo (jtraderx.html #demo). Everything is scoped under .pv. */
.pv{
  color-scheme:dark;
  --chart:#0f131a;
  --pnl:#141922;
  --rail:#11161e;
  --tile:#1c222d;
  --tile-q:#1a202a;
  --well:#10141b;
  --edge:#2a3240;
  --rule:#1e2430;
  --rule-c:#34404f;
  --text:#d7dce4;
  --bright:#ffffff;
  --cap:#8d97a8;      /* secondary text: 5:1 or better on every panel surface */
  --soft:#a9b2c0;
  --gold:#e3a53c;
  --green:#34c27a;
  --red:#e5566a;
  --blue:#5aa2f0;
  --orange:#e0663c;
  --purple:#b27ad8;
  --f-ui:"Segoe UI","Noto Sans",system-ui,sans-serif;
  --f-mono:Consolas,"JetBrains Mono",ui-monospace,monospace;
}
.pv *{box-sizing:border-box}
.pv{background:transparent;color:var(--text);font-family:var(--f-ui);font-size:14px;line-height:1.45}

/* scenario buttons above the stage */
.pv .live-bar .seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--edge);background:var(--tile-q)}
.pv .live-bar .seg button{font:inherit;font-size:12.5px;background:none;border:0;border-top:2px solid transparent;padding:6px 12px;cursor:pointer;color:#a9b2c0}
.pv .live-bar .seg button + button{border-left:1px solid var(--edge)}
.pv .live-bar .seg button:hover{color:var(--bright)}
.pv .live-bar .seg button[aria-pressed="true"]{background:#1a2d42;color:var(--bright);border-top-color:var(--blue)}
.pv .live-bar .seg button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* stage: chart behind, panel docked top-left like on a chart */
.pv .stage{position:relative;border:1px solid var(--edge);background:var(--chart);padding:14px;display:flex;justify-content:flex-start;align-items:flex-start;min-height:640px;overflow:hidden}
.pv .stage canvas{position:absolute;inset:0;width:100%;height:100%}
.pv .stage .sym{position:absolute;right:84px;top:10px;font-size:12px;color:var(--cap);font-family:var(--f-mono)}
@media (max-width:520px){
  .pv .stage{padding:0;border:0;background:none;justify-content:center;min-height:0}
  .pv .stage canvas,.pv .stage .sym{display:none}
}

/* panel */
.pv .pn{position:relative;width:404px;max-width:100%;background:var(--pnl);border:1px solid var(--edge);font-size:12px;line-height:1.4;color:var(--text);box-shadow:0 14px 40px rgba(0,0,0,.5)}
@media (max-width:520px){.pv .pn{width:100%}}
:where(.pv .pn) button{font:inherit;color:inherit;cursor:pointer;margin:0}
.pv .pn button:disabled{cursor:not-allowed;opacity:.45;filter:none}
.pv .pn button:focus-visible{outline:2px solid var(--gold);outline-offset:1px;position:relative;z-index:1}
.pv .pn p,.pv .pn h3,.pv .pn dl,.pv .pn dd{margin:0}
.pv .xgrow{flex:1}
.pv .xr{text-align:right}
.pv .xsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.pv .xhd{display:flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 10px;border-bottom:1px solid var(--rule);cursor:grab}
.pv .xbrand{font-family:var(--f-mono);color:var(--gold);font-weight:600;letter-spacing:.08em;font-size:11.5px}
.pv .xhsym{color:var(--soft);font-size:12px;white-space:nowrap}
.pv .xpill{font-size:9.5px;font-weight:700;letter-spacing:.07em;padding:2px 6px;background:#252d3b;white-space:nowrap}
.pv .xhpl{font-family:var(--f-mono);font-size:13px;color:var(--green)}
.pv .xib{width:26px;height:26px;display:grid;place-items:center;background:var(--tile-q);border:1px solid var(--edge);color:var(--soft);padding:0}
.pv .xib:hover{color:var(--bright)}
.pv .xchev{transition:transform .12s;flex:none}
.pv .xchev.shut{transform:rotate(-90deg)}
.pv .xib .xchev.shut{transform:rotate(180deg)}

.pv .xwrap{display:flex}
.pv .xnav{width:52px;flex:none;background:var(--rail);border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:2px;padding:6px 0}
.pv .xnav [role="tablist"]{display:flex;flex-direction:column;gap:2px}
.pv .xri{position:relative;height:50px;width:100%;border:0;padding:0;background:transparent;color:var(--cap);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9.5px;letter-spacing:.03em}
.pv .xri:hover{color:var(--bright);background:#171d27}
.pv .xri[aria-selected="true"]{color:var(--gold);background:var(--tile);box-shadow:inset 2px 0 0 var(--gold)}
.pv .xdotb{position:absolute;top:7px;right:10px;width:7px;height:7px}
.pv .xbadge{position:absolute;top:5px;right:6px;min-width:14px;height:14px;line-height:14px;font-size:9px;font-weight:700;background:var(--gold);color:#141922;text-align:center}
.pv .xsep{height:1px;margin:4px 8px;background:var(--edge)}
.pv .xmain{flex:1;min-width:0;display:flex;flex-direction:column}

/* status card */
.pv .xstt{padding:10px 12px 9px;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--rule)}
.pv .xhl{display:flex;gap:9px;align-items:flex-start}
.pv .xhl > span:last-child{display:flex;flex-direction:column;min-width:0}
.pv .xdot{width:9px;height:9px;margin-top:4px;flex:none}
.pv .xhl-t{font-size:13px;font-weight:600;color:var(--bright);line-height:1.3}
.pv .xhl-s{font-size:11px;color:var(--cap)}
.pv .xrail{display:grid;gap:2px}
.pv .xrc{display:flex;flex-direction:column;gap:2px;min-width:0}
.pv .xrc i{display:block;height:4px}
.pv .xrc b{font-weight:400;font-size:10px;text-align:center;font-family:var(--f-mono);overflow:hidden;white-space:nowrap}
.pv .xfold{display:flex;align-items:center;gap:7px;width:100%;padding:2px 0;border:0;background:none;text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text)}
.pv .xfold .xchev{color:var(--cap)}
.pv .xfold > span:not(.xsum){white-space:nowrap}
.pv .xsum{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;color:var(--cap);font-size:10.5px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pv .xfold.boxed{padding:7px 8px;background:var(--tile-q)}
.pv .xsteps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 8px}
.pv .xstep{display:flex;gap:6px;align-items:center;padding:2px 4px;border:0;background:transparent;text-align:left;font-size:11px}
.pv .xstep:hover,.pv .xstep[aria-expanded="true"]{background:var(--tile)}
.pv .xsn{width:12px;font-family:var(--f-mono);font-size:10.5px;color:var(--cap)}
.pv .xst-s{margin-left:auto;font-size:9.5px;letter-spacing:.04em}
.pv .xst-s.done{color:var(--green)}
.pv .xst-s.waiting{color:var(--gold)}
.pv .xst-s.blocked{color:var(--red)}
.pv .xdetail{padding:6px 8px;background:var(--tile-q);font-size:11px;color:var(--soft)}
.pv .xdetail b{color:var(--bright);font-weight:600}
.pv .xday{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:center}
.pv .xbig{font-family:var(--f-mono);font-size:15px}
.pv .xsmall{font-size:10.5px;color:var(--cap)}
.pv .xday .xr{font-size:11px;color:var(--cap)}
.pv .xmeter{display:block;height:8px;background:var(--tile);border:1px solid var(--edge);position:relative}
.pv .xmeter i{position:absolute;left:0;top:0;bottom:0}
.pv .xmeter span{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--cap)}
.pv .xchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.pv .xchip{font-family:var(--f-mono);font-size:10.5px;padding:2px 6px;background:var(--tile-q);border:1px solid var(--rule);color:var(--soft);white-space:nowrap}
.pv .xchip em{font-style:normal;font-family:var(--f-ui);color:var(--cap);margin-right:4px}
.pv .xchip.warn{color:var(--red)}

/* pages */
.pv .xpage{padding:10px 12px 12px;display:flex;flex-direction:column;gap:10px}
.pv .xsec{display:flex;flex-direction:column;gap:6px}
.pv .xh{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text)}
.pv .xn{color:var(--gold);font-family:var(--f-mono)}
.pv .xnote{margin-left:auto;font-weight:400;letter-spacing:0;text-transform:none;color:var(--cap)}
.pv .xhint{font-size:10.5px;color:var(--cap)}
.pv .xrow{display:grid;gap:4px}
.pv .r1{grid-template-columns:1fr}
.pv .r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pv .r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv .r4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pv .xb{min-height:30px;padding:4px 5px;background:var(--tile);border:1px solid var(--edge);border-top:2px solid var(--edge);color:var(--bright);font-size:11.5px;line-height:1.15}
.pv .xb:hover:not(:disabled){filter:brightness(1.2)}
.pv .xb:active:not(:disabled){transform:translateY(1px)}
.pv .xb.g{border-top-color:var(--green)}
.pv .xb.b{border-top-color:var(--blue);background:#1a2d42}
.pv .xb.o{border-top-color:var(--orange);color:var(--text)}
.pv .xb.r{border-top-color:var(--red);color:#f1c4ca}
.pv .xb.rf{border-top-color:var(--red);background:#4a1c24;color:#ffe3e7}
.pv .xb.cf,.pv .xclr.cf,.pv .xx.cf{background:#b23a4c;border-top-color:#ff8798;color:#fff;animation:xpulse .9s ease-in-out infinite}
@keyframes xpulse{50%{filter:brightness(1.25)}}
@media (prefers-reduced-motion:reduce){.pv .xb.cf,.pv .xclr.cf,.pv .xx.cf{animation:none}.pv .xb:active:not(:disabled){transform:none}.pv .xchev{transition:none}}
.pv .xseg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--edge);background:var(--tile-q)}
.pv .xseg button{border:0;border-top:2px solid transparent;padding:5px 6px;background:none;color:var(--soft);font-size:11px;white-space:nowrap}
.pv .xseg button + button{border-left:1px solid var(--edge)}
.pv .xseg button[aria-pressed="true"]{background:#1a2d42;color:var(--bright);border-top-color:var(--blue)}
.pv .xseg.big button{padding:7px 4px;font-size:12px}
.pv .xseg .xem{font-family:var(--f-mono);font-size:11px;margin-right:4px;color:var(--cap)}
.pv .xseg button[aria-pressed="true"] .xem{color:#b9d6f6}
.pv .xseg.sm button{padding:3px 10px;font-size:10.5px}
.pv .xseg.grow{flex:1}
.pv .xseg.dim{opacity:.55}
.pv .xfld{display:flex;align-items:center;gap:8px;min-height:28px}
.pv .xlab{flex:1;min-width:0;font-size:12px;color:var(--text)}
.pv .xlab small{display:block;font-size:10.5px;color:var(--cap)}
.pv .xpair{display:flex;gap:6px;align-items:center}
.pv .xstp{display:grid;grid-template-columns:22px minmax(44px,1fr) 22px;border:1px solid var(--edge);flex:none}
.pv .xstp button{height:24px;border:0;padding:0;background:var(--tile);color:var(--bright);font-size:13px;line-height:1}
.pv .xstp button:hover{background:#26303f}
.pv .xstp output{display:grid;place-items:center;padding:0 4px;background:var(--well);font-family:var(--f-mono);font-size:11.5px;color:var(--bright);white-space:nowrap}
.pv .xsw{min-width:42px;height:22px;padding:0 6px;border:1px solid var(--edge);background:#2a3240;color:#d2d8e0;font-size:10.5px;font-weight:700;letter-spacing:.05em;flex:none}
.pv .xsw[aria-checked="true"]{color:#fff;border-color:transparent}
.pv .xsw.g[aria-checked="true"]{background:#1f8a53}
.pv .xsw.b[aria-checked="true"]{background:#2a6fb8}
.pv .xsw.o[aria-checked="true"]{background:#b4471f}
.pv .xtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.pv .xtiles div{background:var(--pnl);padding:4px 7px}
.pv .xtiles dt{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--cap)}
.pv .xtiles dd{font-family:var(--f-mono);font-size:13px;color:var(--bright);white-space:nowrap}
.pv .xoc{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.pv .xoc div{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:5px 8px;background:var(--tile-q);font-size:11px;color:var(--cap)}
.pv .xoc b{font-family:var(--f-mono);font-weight:400;font-size:12px}
.pv .xoc .tp{border-left:2px solid var(--green)}
.pv .xoc .tp b{color:var(--green)}
.pv .xoc .sl{border-left:2px solid var(--red)}
.pv .xoc .sl b{color:#f07a8a}
.pv .xarm{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:6px}
.pv .xbig-b{min-height:46px;font-size:13px;font-weight:700;letter-spacing:.04em;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pv .xbig-b small{font-size:10.5px;font-weight:400;letter-spacing:0;opacity:.85}
.pv .xbig-b.go{background:#173826;border-top-color:var(--green);color:#bff0d6}
.pv .xbig-b.stop{background:#3a1a20;border-top-color:var(--red);color:#f6c7ce}
.pv .xbox{border:1px solid var(--rule)}
.pv .xnow{width:100%;padding:7px 8px;border:0;background:var(--tile-q);color:var(--text);font-size:11.5px;text-align:center}
.pv .xin{padding:8px;display:flex;flex-direction:column;gap:6px}

/* trade page */
.pv .xposc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 10px;background:#16241c;border-left:3px solid var(--green)}
.pv .xpl{font-size:11.5px;color:#bfe6cf;font-weight:600}
.pv .xpv{font-family:var(--f-mono);font-size:18px;font-weight:600;color:var(--green);text-align:right}
.pv .xps{font-size:10.5px;color:#a3cdb6}
.pv .xpr{font-family:var(--f-mono);font-size:11px;color:#bfe6cf;text-align:right}
.pv .xempty{padding:10px;border:1px solid var(--rule);text-align:center;color:var(--soft);font-size:12px}
.pv .xempty small{display:block;font-size:10.5px;color:var(--cap)}
.pv .xlad{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(0,1fr) 52px;gap:4px 6px;align-items:center}
.pv .xth{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--cap);margin-top:2px}
.pv .xlv{font-family:var(--f-mono);font-size:11px;padding-left:4px}
.pv .xlad .xstp{grid-template-columns:20px minmax(0,1fr) 20px}
.pv .xlad .xstp button{height:22px}
.pv .xls{font-size:10px;letter-spacing:.04em;text-align:right;font-family:var(--f-mono)}
.pv .xls.plan,.pv .xls.wait{color:var(--cap)}
.pv .xls.done{color:var(--green)}
.pv .xls.next{color:var(--gold)}
.pv .xnone{grid-column:1/-1;font-size:11px;color:var(--cap);padding:2px 0}
.pv .xtrail{border-top:1px solid var(--rule);padding-top:5px}
.pv .xtrail .xlab{flex:none;width:40px}
.pv .xmono{flex:1;font-family:var(--f-mono);font-size:11px;color:var(--text)}
.pv .xmono small{font-family:var(--f-ui);color:var(--cap);font-size:10.5px}
.pv .xcyc{display:grid;grid-template-columns:22px auto 22px;border:1px solid var(--edge)}
.pv .xcyc button{border:0;padding:0;height:24px;background:var(--tile);color:var(--bright)}
.pv .xcyc output{display:grid;place-items:center;padding:0 8px;background:var(--well);font-family:var(--f-mono);font-size:11px;color:var(--bright);white-space:nowrap}

/* guard page */
.pv .xgcard{padding:9px 10px;border:1px solid var(--rule);border-left:3px solid var(--green);display:flex;flex-direction:column;gap:5px}
.pv .xgl{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--cap)}
.pv .xgl b{font-family:var(--f-mono);font-weight:400;color:var(--text)}
.pv .xgcard .xgl:first-child b{font-family:var(--f-ui);font-weight:600}
.pv .xgbig{font-family:var(--f-mono);font-size:21px;font-weight:600}

/* trades page */
.pv .xtbl{border:1px solid var(--rule);overflow-x:auto}
.pv .xtbl table{width:100%;border-collapse:collapse;font-size:11px}
.pv .xtbl th{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--cap);font-weight:600;text-align:right;padding:5px 5px;border-bottom:1px solid var(--rule-c)}
.pv .xtbl td{padding:3px 5px;text-align:right;font-family:var(--f-mono);border-bottom:1px solid var(--rule);white-space:nowrap}
.pv .xtbl th:first-child,.pv .xtbl td:first-child{text-align:left}
.pv .xtbl td.xnone{text-align:left;font-family:var(--f-ui);padding:8px 6px}
.pv .xtbl tfoot td{border-bottom:0;color:var(--bright)}
.pv .xbuy{color:var(--green)}
.pv .xx{width:22px;height:22px;padding:0;border:1px solid var(--edge);background:var(--tile);color:#f07a8a;display:inline-grid;place-items:center;vertical-align:middle}

/* bottom row, message, copier, footer */
.pv .xquick{margin-top:auto;padding:8px 12px 6px;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.pv .xquick button{padding:5px 2px;background:var(--tile);border:1px solid var(--edge);border-top:2px solid #4c5568;color:var(--cap);font-size:11px}
.pv .xquick button[aria-pressed="true"]{color:var(--bright)}
.pv .xquick .xclr{border-top-color:var(--red);background:#4a1c24;color:#ffd5da}
.pv .xmsg{padding:0 12px;font-size:11px;color:var(--cap);min-height:16px}
.pv .xmsg.flash{color:var(--gold)}
.pv .xcop{padding:0 12px 6px;font-size:11px;color:var(--green);display:flex;align-items:center;gap:6px}
.pv .xsq{width:7px;height:7px;flex:none}
.pv .xft{display:flex;align-items:center;gap:8px;padding:6px 12px 8px;border-top:1px solid var(--rule);font-size:11px}
.pv .xcap{color:var(--cap)}
.pv .xver{font-family:var(--f-mono);color:var(--cap)}

/* collapsed strip */
.pv .xstrip{padding:8px 12px 10px;display:flex;flex-direction:column;gap:7px}
.pv .xstrip-t{border:0;background:none;padding:0;text-align:left;color:var(--bright);font-size:12px;display:flex;justify-content:space-between;gap:8px}
.pv .xstrip-t b{font-family:var(--f-mono);font-weight:400}

@media (max-width:420px){
  .pv .xnav{width:46px}
  .pv .xri{font-size:9px}
  .pv .xpage,.pv .xstt{padding-inline:9px}
  .pv .xb{font-size:11px;padding:4px 3px}
  .pv .xhsym{display:none}
}