/* Chrome tokens (theme = dark|light via data-theme on <html>, docs/done/2026-10-22_UIThemeTouch/spec.md). Dark values
   below are the exact literals already in use; :root[data-theme="light"] further down overrides them. "Content"
   colours (drawings, candles, indicators, market sessions, colour-picker palette, P/L green/red) are never
   overridden by theme and stay as literals or as --pos/--neg (already theme-agnostic by spec). */
:root{--bg:#0f1420;--panel:#131722;--card:#1b2030;--border:#2a3142;--text:#d1d4dc;--muted:#8b93a7;--acc:#1e90ff;--buy:#1e90ff;--sell:#ff4500;--pos:#1baf7a;--neg:#e34948;--warn:#f0b429;
  --hover:#2a2e39;--hover2:#232a3b;--pop-bg:#1e222d;--pop-border:#363a45;--sel:#1a2640;--sel2:#1e3a5f;
  --icon:#b2b5be;--icon-hover:#fff;--icon-muted:#787b86;--icon-muted2:#9598a1;
  --link:#8cc4ff;--link-border:#2f4a7a;--sess-border:#3a5a99;--row-active:#16233b;
  --ok-fg:#9be4bd;--ok-bg:#12301f;--ok-border:#1f5a39;
  --warnbanner-fg:#f5d37a;--warnbanner-bg:#3a2f12;--warnbanner-border:#6b5419;
  --stop-fg:#ffb0b0;--stop-bg:#3a1616;--stop-border:#6b2424;
  --info-fg:#8fc7f0;--info-bg:#132a42;--info-border:#1f4d6b;
  --purple-fg:#c7b8ff;--purple-bg:#2a2340;--purple-border:#463a73;
  --err-fg:#ff8a8a;--grip:#9aa3b5;--off:#5d6475;--swatch-border-hover:#5d606b;--star-off:#4a5166;
  --on-accent-text:#0b0e15;--clock-sub:#b2c4e8;--play-hover:#1e53e5;
  --ohlc-bg:rgba(19,23,34,.7);--tflabel-bg:rgba(19,23,34,.85);--toRT-bg:#1b2030}

/* Light palette (TradingView-light style). Values given by spec: bg/panel #ffffff, card #f0f3fa, border #e0e3eb,
   text #131722, muted #6a6d78, hover #f0f3fa, popup #ffffff + shadow. Everything else ("deferred to builder" in
   docs/done/2026-10-22_UIThemeTouch/spec.md §8) is chosen here to stay in the same hue family as dark and keep
   body-text contrast >= 4.5:1 on white/#f0f3fa. --acc/--buy/--sell/--pos/--neg/--warn keep their dark hue (already
   used on white in TradingView's own light theme); badge fg/bg pairs use light tint backgrounds with a darker,
   same-hue foreground so text stays readable on white instead of the dark theme's dark-bg+light-fg pairing. */
:root[data-theme="light"]{--bg:#ffffff;--panel:#ffffff;--card:#f0f3fa;--border:#e0e3eb;--text:#131722;--muted:#6a6d78;
  --acc:#1e90ff;--buy:#1e90ff;--sell:#ff4500;--pos:#1baf7a;--neg:#e34948;--warn:#f0b429;
  --hover:#f0f3fa;--hover2:#e0e3eb;--pop-bg:#ffffff;--pop-border:#e0e3eb;--sel:#e3edff;--sel2:#cfe3ff;
  --icon:#6a6d78;--icon-hover:#131722;--icon-muted:#6a6d78;--icon-muted2:#6a6d78;
  --link:#1159b3;--link-border:#aecdf2;--sess-border:#9db6dd;--row-active:#e3edff;
  --ok-fg:#0f7a4f;--ok-bg:#e3f6ec;--ok-border:#9fdcbf;
  --warnbanner-fg:#8a5a00;--warnbanner-bg:#fdf1d6;--warnbanner-border:#f0cf85;
  --stop-fg:#b3261e;--stop-bg:#fdeceb;--stop-border:#f0b3af;
  --info-fg:#0b5e99;--info-bg:#e6f1fb;--info-border:#a9cfec;
  --purple-fg:#6a3fc7;--purple-bg:#efe9fc;--purple-border:#cdb9f2;
  --err-fg:#c0392b;--grip:#9aa3b0;--off:#9aa0ab;--swatch-border-hover:#b7bcc6;--star-off:#c3c7d1;
  --on-accent-text:#ffffff;--clock-sub:#44546b;--play-hover:#1a7ee0;
  --ohlc-bg:rgba(255,255,255,.85);--tflabel-bg:rgba(255,255,255,.9);--toRT-bg:#ffffff}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:13px/1.45 system-ui,"Segoe UI",sans-serif}
.topnav{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--panel);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.topnav h1{font-size:15px;margin:0 12px 0 0}
.tab{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:6px;padding:6px 12px;cursor:pointer;font:600 13px system-ui}
.tab.on{color:var(--icon-hover);border-color:var(--acc);background:var(--sel)}
.spacer{flex:1}
.btn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:6px;padding:7px 12px;cursor:pointer;font:600 13px system-ui}
.btn:hover:not(:disabled){border-color:var(--acc)}.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.buy{background:var(--buy);border-color:var(--buy);color:#fff}.btn.sell{background:var(--sell);border-color:var(--sell);color:#fff}
.btn.big{padding:12px;font-size:15px;width:100%}.btn.sm{padding:4px 9px;font-size:12px}.btn.danger{border-color:var(--stop-border);color:var(--stop-fg)}
.view{display:none}.view.on{display:block}
/* ---------- prototype (app UI, English) ---------- */
#vproto.on{display:grid;grid-template-rows:auto 1fr auto;height:calc(100vh - 49px)}
.appbar{display:flex;gap:8px;align-items:center;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap}
.pill{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:3px 11px;white-space:nowrap;color:var(--muted)}
.pill b{color:var(--text)}.pill .pos{color:var(--pos)}.pill .neg{color:var(--neg)}
.pill.sess{cursor:pointer;border-color:var(--sess-border);color:var(--text)}.pill.sess:hover{border-color:var(--acc)}
.dots{display:inline-flex;gap:4px;vertical-align:middle}.dots i{width:10px;height:10px;border-radius:50%;border:1px solid var(--muted);display:inline-block}
.dots i.used{background:var(--acc);border-color:var(--acc)}
.ddbar{display:inline-block;width:90px;height:6px;background:var(--card);border:1px solid var(--border);border-radius:3px;vertical-align:middle;overflow:hidden}
.ddbar span{display:block;height:100%;background:var(--neg);width:0}
.eye{cursor:pointer;color:var(--muted);user-select:none}
.work{display:grid;grid-template-columns:44px 1fr 330px 44px;gap:6px;padding:6px;min-height:0}
#dtools{display:flex;flex-direction:column;gap:2px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:4px 0;overflow:auto;min-height:0}
#dtools .tb{position:relative;width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:6px;color:var(--icon);cursor:pointer}
#dtools .tb:hover{color:var(--icon-hover);background:var(--hover)}#dtools .tb.on{color:#2962ff;background:rgba(41,98,255,.14)}
#dtools .tb svg{width:24px;height:24px}#dtools .sep{width:28px;height:1px;background:var(--border);margin:4px 0;flex:none}
#dpop{position:fixed;z-index:80;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.55);padding:6px 0;color:var(--text);font-size:13px}
#dchev{position:fixed;z-index:80;display:flex;align-items:center;justify-content:center;width:14px;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:0 6px 6px 0;color:var(--icon-muted);cursor:pointer;font:12px/1 system-ui;user-select:none}
#dchev:hover{color:var(--text)}
.fly{min-width:260px}.fr{display:grid;grid-template-columns:30px 1fr auto 26px;align-items:center;gap:6px;padding:5px 10px 5px 8px;cursor:pointer}
.fr:hover{background:var(--hover)}.fr.on{color:#2962ff}.fr .fi svg{width:22px;height:22px}.fr .fk{color:var(--icon-muted);font-size:12px}
.fr .fs{opacity:0;color:var(--icon-muted)}.fr:hover .fs{opacity:1}.fr .fs.on{opacity:1;color:#f0b429}.fr .fs svg{width:18px;height:18px}.fr .fs.on svg path{fill:#f0b429;stroke:#f0b429}
.ctx{min-width:220px}.ctx-h{padding:4px 14px 6px;color:var(--icon-muted);font-size:12px}.ctx-i{display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer}.ctx-i:hover{background:var(--hover)}.ctx-i.dis{opacity:.4;cursor:default}.ctx-i.dis:hover{background:none}
.ctx-i .ic{width:15px;height:15px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--icon-muted)}.ctx-i .ic svg{display:block;width:14px;height:14px;flex:none}.ctx-i:hover .ic{color:var(--icon-hover)}
.ctx-i .lbl{flex:1}.ctx-i .key{color:var(--icon-muted);font-size:11.5px}
.ctx-s{height:1px;background:var(--pop-border);margin:4px 0}
.cpop{padding:4px 10px}.cpr{display:flex;gap:4px;margin:4px 0}.cps{width:20px;height:20px;border-radius:3px;cursor:pointer;border:1px solid rgba(255,255,255,.08)}.cps.on{outline:2px solid #2962ff;outline-offset:1px}
.cpo{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px}.cpo input[type=range]{flex:1}
.mpop{min-width:130px}.mi{display:flex;align-items:center;gap:10px;padding:6px 14px;cursor:pointer}.mi:hover{background:var(--hover)}.mi.on{color:#2962ff}.mi .wl{display:inline-block;width:36px;background:currentColor}
#dfavbar{position:absolute;z-index:9;display:flex;align-items:center;gap:2px;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:8px;padding:3px 6px;box-shadow:0 4px 14px rgba(0,0,0,.45)}
#dfavbar .grip{cursor:grab;color:var(--icon-muted);display:flex}#dfavbar .grip svg{width:18px;height:18px}
#dfavbar .fb{width:32px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:5px;color:var(--icon);cursor:pointer}#dfavbar .fb:hover{background:var(--hover);color:var(--icon-hover)}#dfavbar .fb.on{color:#2962ff;background:rgba(41,98,255,.14)}
#dfavbar .fb svg{width:22px;height:22px}#dfavbar .fb{touch-action:none}#dfavbar .fb{position:relative}#dfavbar .fb::after{content:"";position:absolute;left:50%;top:1px;width:14px;height:5px;transform:translateX(-50%);opacity:0;transition:opacity .12s;pointer-events:none;background:radial-gradient(circle,var(--muted) 1px,transparent 1.4px) 0 0/5px 5px}
#dfavbar .fb:hover::after,#dfavbar .fb.drag::after{opacity:.9}#dfavbar .fb:active{cursor:grabbing}      /* pointer on hover; hand only while pressed and held */
#dfavbar .fb.drag{position:relative;z-index:1;background:var(--hover);box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:grabbing}
.ch .cv.curdot,.ch .cv.curdot *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='2.5' fill='%23d1d4dc'/%3E%3C/svg%3E") 5 5,auto!important}
/* Light mode: the dot cursor's fill (#d1d4dc, correct on the dark chart background) is invisible on a white
   cursor-area background -- a data-URI can't use var() internally, so the whole dark rule's cursor declaration
   is overridden here instead, same SVG structure with %23d1d4dc swapped for %23131722 (the light theme's text
   colour, used elsewhere for light-mode readability). */
:root[data-theme="light"] .ch .cv.curdot,:root[data-theme="light"] .ch .cv.curdot *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='2.5' fill='%23131722'/%3E%3C/svg%3E") 5 5,auto!important}
.ch .cv.curarrow,.ch .cv.curarrow *{cursor:default!important}
.drow .dic svg{width:16px;height:16px;color:var(--icon-muted);display:block}.drow .dbtn svg{width:16px;height:16px;display:block}
.fibl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;margin-top:8px}.fibl input[type=number]{width:64px}
/* a level row (checkbox · value · colour · text) shrinks its text box instead of widening the dialog (no scrollbar, 2026-10-25) */
.fibl .chk{display:flex;align-items:center;gap:6px;min-width:0}.fibl input[type=text]{flex:1;min-width:0;width:auto}
.ov .card.set-card.set-wide{width:min(600px,94vw)}
/* every floating window moves by its title bar (dialogdrag.js) */
.ov .card > .dlg-h,.ov .card > h3,.ov .card > .td-head,.ov .card > .adlg > h3{cursor:move}body.dlgdrag,body.dlgdrag *{user-select:none!important;cursor:move!important}
.charts{position:relative}
#dprops{position:absolute;z-index:8;top:42px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:2px;background:var(--pop-bg);border:0;border-radius:8px;padding:3px 4px;box-shadow:0 2px 12px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.04);white-space:nowrap}
#dprops .pgrip{cursor:grab;color:var(--icon-muted);display:flex;margin-right:2px}#dprops .pgrip svg{width:18px;height:18px}
#dprops .pbtn{position:relative;display:flex;align-items:center;gap:3px;height:32px;min-width:32px;justify-content:center;padding:0 5px;border-radius:6px;color:var(--icon-hover);cursor:pointer}
#dprops .pbtn:hover{background:var(--hover);color:var(--icon-hover)}#dprops .pbtn.on{color:#2962ff}#dprops .pbtn svg{width:20px;height:20px}
#dprops .pchip{font-size:12px;color:var(--text);border:1px solid var(--border);background:var(--card);height:24px;margin:0 2px;padding:0 7px;white-space:nowrap}#dprops .pchip.dis{color:var(--muted);cursor:default}#dprops .plot{padding:0 6px;white-space:nowrap;color:var(--text)}
#dprops .pcol{position:absolute;left:6px;right:6px;bottom:3px;height:3px;border-radius:2px}#dprops .pval{font-size:11px;color:var(--icon-muted2)}
#dprops .psep{width:1px;height:20px;background:var(--pop-border);margin:0 3px}
/* tooltips like TradingView: dark, above the button (CR 2026-10-24_Chart2) */
#dprops [data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#131722;color:#fff;font:12px system-ui;padding:5px 9px;border-radius:5px;pointer-events:none;z-index:20}
#dprops .pgrip{position:relative}
#dprops .sw{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent}#dprops .sw.on{border-color:var(--icon-hover)}
#dprops .pb{cursor:pointer;padding:2px 7px;border-radius:5px;border:1px solid var(--border);color:var(--text);font-size:12px}#dprops .pb.on{border-color:var(--acc);background:var(--sel)}#dprops .pb:hover{border-color:var(--acc)}
.ovl{position:absolute;inset:0;pointer-events:none;z-index:2}
.legend{position:absolute;top:28px;left:8px;z-index:3;pointer-events:none;font-size:12px;max-width:calc(100% - 90px)}
.legend .ohlc{color:var(--muted);margin-bottom:2px;background:var(--ohlc-bg);display:inline-block;padding:0 4px;border-radius:3px}
.legend .irow{pointer-events:auto;display:flex;align-items:center;gap:6px;height:18px;color:var(--muted);background:var(--ohlc-bg);border-radius:3px;padding:0 4px;margin-top:1px;width:fit-content}
.legend .irow .ib{cursor:pointer;opacity:.45}.legend .irow:hover .ib{opacity:1}.legend .irow .ib:hover{color:var(--icon-hover)}
.legend .irow.off .iname,.legend .irow.off .ival{opacity:.35;text-decoration:line-through}
.lbl .fx{pointer-events:auto;cursor:pointer;padding:0 6px;border-radius:3px;color:var(--link);font-weight:700;border:1px solid var(--link-border);margin-left:2px;display:inline-flex;align-items:center;gap:4px}.lbl .fx:hover{background:var(--sel)}
.lbl .fx .fxic{flex:none}.lbl .fx .fxcaret{font-weight:400;opacity:.65;font-size:10px}
.ch .cv.dcross,.ch .cv.dcross *{cursor:crosshair!important}.ch .cv.dmove,.ch .cv.dmove *{cursor:move!important}.ch .cv.dgrab,.ch .cv.dgrab *{cursor:pointer!important}
.ch .cv.dres-ew,.ch .cv.dres-ew *{cursor:ew-resize!important}.ch .cv.dres-ns,.ch .cv.dres-ns *{cursor:ns-resize!important}.ch .cv.dres-nwse,.ch .cv.dres-nwse *{cursor:nwse-resize!important}.ch .cv.dres-nesw,.ch .cv.dres-nesw *{cursor:nesw-resize!important}
.drow{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:4px;cursor:pointer}.drow:hover{background:var(--toRT-bg)}.drow.sel{background:var(--sel)}
.drow .dsw{width:10px;height:10px;border-radius:2px;flex:none}.drow .dn{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drow .dbtn{opacity:.55;cursor:pointer}.drow .dbtn:hover{opacity:1}
#dlist{max-height:130px;overflow:auto}
/* sub-panes */
.pane{position:absolute;left:0;right:0;border-top:1px solid var(--border);background:var(--panel)}
.pane .pcv{position:absolute;inset:0}
.pane .pdiv{position:absolute;top:-4px;left:0;right:0;height:8px;cursor:row-resize;z-index:6}
.pane .pdiv:hover,.pane .pdiv.on{background:rgba(30,144,255,.35)}
.pane .plegend{top:5px}
.legend .irow .iname{color:var(--text)}.legend .ival i,.legend .ohlc i{font-style:normal;margin-left:3px}
.legend .irow .ib{opacity:0;transition:opacity .1s}.legend .irow:hover .ib{opacity:.8}
/* TradingView-style dialogs */
.dlg-h{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.dlg-h input{width:280px;padding:7px 10px}
.dlg-f{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--border);margin-top:4px}
.xbtn{cursor:pointer;color:var(--muted);font-size:16px;padding:2px 6px;border-radius:4px}.xbtn:hover{color:var(--icon-hover);background:var(--hover2)}
.ok-msg{color:var(--ok-fg);font-size:12px}
.ov .card.idlg-card{width:min(860px,94vw);padding:16px 18px}
.idlg{display:grid;grid-template-columns:190px 1fr;height:min(460px,62vh);margin-top:8px}
.icats{border-right:1px solid var(--border);padding-right:8px;overflow:auto}
.igh{font-size:10.5px;letter-spacing:.06em;color:var(--muted);margin:10px 8px 4px}
.ic{padding:6px 10px;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between}.ic:hover{background:var(--toRT-bg)}.ic.on{background:var(--sel);color:var(--icon-hover)}
.ilist{overflow:auto;padding-left:10px}
.ilh{font-size:10.5px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin:10px 6px 6px}
.ir{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:8px 8px;border-radius:6px;cursor:pointer}
.ir:hover{background:var(--toRT-bg)}.ir .idesc{color:var(--muted);font-size:12px;margin-top:1px}
.ir .iadd{color:var(--link);font-size:12px;opacity:0}.ir:hover .iadd{opacity:1}
.star{color:var(--star-off);font-size:15px;text-align:center}.star:hover{color:#f0b429}.star.on{color:#f0b429}
.pbadge{font-size:10px;padding:0 5px;border-radius:3px;border:1px solid var(--purple-border);color:var(--purple-fg);margin-left:4px}
.isw{width:12px;height:12px;border-radius:3px;justify-self:center}
.iacts{display:flex;gap:10px}.ib2{cursor:pointer;opacity:.7}.ib2:hover{opacity:1}
.ov .card.set-card{width:min(470px,94vw);padding:16px 18px}
.stabs{display:flex;gap:18px;border-bottom:1px solid var(--border);margin-top:4px}
.stabs .st{padding:9px 2px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}.stabs .st.on{color:var(--icon-hover);border-bottom-color:var(--acc)}
.sbody{padding:12px 0;min-height:170px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0}
.srow > label:first-child{color:var(--text)}.srow input[type=number],.srow input[type=text]{width:120px}
.srow .sctl{display:flex;gap:6px;align-items:center}
.chk{display:flex;gap:7px;align-items:center;cursor:pointer}
input[type=color]{width:34px;height:26px;padding:0 2px;background:var(--card);border:1px solid var(--border);border-radius:5px;cursor:pointer}
.tfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 14px;margin-top:6px}
.irow2{display:grid;grid-template-columns:200px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border)}.irow2 .f{display:flex;gap:8px;flex-wrap:wrap}.irow2 label{display:flex;gap:4px;align-items:center;color:var(--muted);font-size:12px}.irow2 input[type=number],.irow2 input[type=text]{width:80px}
.charts{--lw:50%;--th:50%;display:grid;grid-template-columns:var(--lw) 6px 1fr;grid-template-rows:var(--th) 6px 1fr;min-height:0}   /* grid areas per cell: chartlayout.js (2026-10-26_ChartLayouts) */
.split{background:transparent;position:relative;z-index:4}
/* 3 side by side / 3 stacked (2026-10-28_LayoutButton): chart 6px chart 6px chart; --c3a / --c3b = the first two parts in % (layout.js) */
.charts.line-c{grid-template-columns:calc(var(--c3a) - 4px) 6px calc(var(--c3b) - 4px) 6px 1fr;grid-template-rows:1fr}
.charts.line-r{grid-template-columns:1fr;grid-template-rows:calc(var(--r3a) - 4px) 6px calc(var(--r3b) - 4px) 6px 1fr}
.split::after{content:"";position:absolute;background:var(--border);border-radius:2px}
.split:hover::after,.split.on::after{background:var(--acc)}
.split.v{cursor:col-resize}.split.v::after{left:2px;width:2px;top:0;bottom:0}
.split.h{cursor:row-resize}.split.h::after{top:2px;height:2px;left:0;right:0}
body.resizing,body.resizing *{user-select:none!important}
body.resizing.v,body.resizing.v *{cursor:col-resize!important}body.resizing.h,body.resizing.h *{cursor:row-resize!important}
.ch{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:6px;min-height:0;min-width:0;overflow:hidden}
.ch{isolation:isolate}   /* every chart is its own layer: the active chart's blue border (z 20) stays inside it, so floating windows (replay toolbar, drawing toolbar, favourites) are always above it */
.ch.active::after{content:"";position:absolute;inset:0;border:1px solid #2962ff;border-radius:inherit;pointer-events:none;z-index:20}   /* an overlay border (an inset shadow would sit under the canvas and the layers) */   /* 2026-10-25_MultiChartOrders: active chart, only with 2+ charts */
.ch .lbl{position:absolute;z-index:3;top:6px;left:8px;font-size:12px;color:var(--muted);background:var(--tflabel-bg);padding:2px 7px;border-radius:4px;pointer-events:none}
.ch .lbl b{color:var(--text)}
/* touch-action:none (2026-10-22, Task 5 touch fix): the vendored lightweight-charts-4.1.3.js has no pointer*
   listeners at all (only touchstart/touchmove/touchend + mouse*), so our pointerdown/pointermove handlers in
   drawings.js/orders.js never intercept the BROWSER's native touch-gesture arbitration -- only real touchmove
   events do, and the library only calls preventDefault() on those itself while it wants the gesture (panning).
   Without this, a touch-drag on a drawing/handle/SL line can still trigger the browser's native scroll/pan a
   few pixels in (handleScroll/handleScale=false only stops the LIBRARY's own pan, not the browser's), which
   would both visually pan the chart out from under the gesture and likely fire a pointercancel on our drag
   mid-gesture. touch-action:none tells the browser to never run its own touch gestures on this element at all,
   leaving every touch interaction here to be resolved entirely by JS (our pointer handlers and, separately,
   the chart library's own touchmove-based panning) instead of racing with native scroll/zoom.
   #c5/#c15/#c60 (the .cv canvases inside each chart's .ch) are exactly the elements wireDraw()/wireSLDrag()
   attach pointer listeners to. */
.ch .cv{position:absolute;inset:0;touch-action:none}
.ch .lbl .sym{pointer-events:auto;cursor:pointer;padding:0 5px;border-radius:3px;color:var(--text);font-weight:700}.ch .lbl .sym:hover{background:var(--hover2)}
.ch .lbl .tfs{display:inline-flex;gap:1px}
.ch .lbl .tfb{pointer-events:auto;cursor:pointer;padding:0 5px;border-radius:3px;color:var(--muted);font-weight:600}
.ch .lbl .tfb:hover{color:var(--icon-hover);background:var(--hover2)}.ch .lbl .tfb.on{color:var(--icon-hover);background:var(--sel);box-shadow:inset 0 0 0 1px var(--acc)}
.toRT{position:absolute;z-index:4;right:72px;bottom:34px;width:28px;height:24px;border-radius:5px;border:1px solid var(--border);background:var(--toRT-bg);color:var(--text);cursor:pointer;font:700 15px/1 system-ui}
.toRT:hover{border-color:var(--acc);color:var(--icon-hover)}
/* auto scale button A (2026-10-31_AutoScale A1): blue = auto, grey = the price axis was dragged */
.autosc{position:absolute;z-index:5;width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--border);background:var(--toRT-bg);color:var(--muted);font:700 12px/1 system-ui;cursor:pointer}
.autosc{box-shadow:0 1px 2px rgba(0,0,0,.12);transition:background .1s,border-color .1s,box-shadow .1s}
.autosc.on{color:#2962FF;border-color:rgba(41,98,255,.35);background:linear-gradient(rgba(41,98,255,.14),rgba(41,98,255,.14)),var(--toRT-bg)}
.autosc:hover{color:var(--text);border-color:var(--muted);background:var(--hover);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.autosc.on:hover{color:#2962FF;border-color:#2962FF;background:linear-gradient(rgba(41,98,255,.24),rgba(41,98,255,.24)),var(--toRT-bg);box-shadow:0 1px 4px rgba(41,98,255,.35)}
.autosc:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.ch .cv.sldrag,.ch .cv.sldrag *{cursor:ns-resize!important}
aside{display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0}
.box{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:10px}
.box h4{margin:0 0 6px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 8px}
.chip{border:1px solid var(--border);border-radius:999px;padding:3px 10px;color:var(--muted);cursor:pointer;user-select:none;font-size:12px}
.chip.on{border-color:var(--acc);color:var(--icon-hover);background:var(--sel)}
/* OP1 (2026-10-23): the Risk row's "Custom %" chip, an inline input instead of plain text. */
.chip-input{padding:1px 8px 1px 10px;cursor:text;display:flex;align-items:center;gap:2px}
.chip-input input{width:52px;border:none;background:transparent;color:inherit;font:inherit;padding:2px 0;outline:none;-moz-appearance:textfield}
.chip-input input::-webkit-outer-spin-button,.chip-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.chip-input input::placeholder{color:var(--muted)}
.chip-input::after{content:'%';color:var(--muted);font-size:11px}
.chip-input2::after{content:none}.chip-input2{gap:4px}.chip-input2 input{width:44px}
.chip-input2 select,.chip-input2 .cu{border:none;background:transparent;color:var(--muted);font:inherit;font-size:11px;padding:0;cursor:pointer;outline:none}
.chips.dis .chip{opacity:.5;cursor:not-allowed;border-style:dashed}.chips.dis .chip.on{opacity:.85;border-style:solid}
.tvt-lock{font-size:10.5px;color:var(--muted);border:1px solid var(--border);border-radius:3px;padding:0 4px;margin-left:6px}
.chip-input.on{border-color:var(--acc);background:var(--sel)}
.chip-input.on input,.chip-input.on::after{color:var(--icon-hover)}
.lab{font-size:12px;color:var(--muted)}
.kv{display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-variant-numeric:tabular-nums}.kv span:nth-child(even){text-align:right}
.banner{border-radius:6px;padding:8px 10px;font-size:12px;margin-bottom:6px}
.banner.warn{background:var(--warnbanner-bg);border:1px solid var(--warnbanner-border);color:var(--warnbanner-fg)}.banner.stop{background:var(--stop-bg);border:1px solid var(--stop-border);color:var(--stop-fg)}
.banner.ok{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok-fg)}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}td,th{padding:3px 4px;text-align:left;border-bottom:1px solid var(--border);font-size:12px}th{color:var(--muted);font-weight:600}
.pos{color:var(--pos)}.neg{color:var(--neg)}.muted{color:var(--muted)}
.ctrl{display:flex;gap:6px;align-items:center;padding:6px 10px;background:var(--panel);border-top:1px solid var(--border);flex-wrap:wrap}
select,input[type=text],input[type=number]{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px}
kbd{background:var(--card);border:1px solid var(--border);border-radius:3px;padding:0 5px;color:var(--text);font-size:11px}
.tag-proto{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--ok-bg);color:var(--ok-fg);border:1px solid var(--ok-border)}
.tag-konsep{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--purple-bg);color:var(--purple-fg);border:1px solid var(--purple-border)}
.tag-auto{font-size:10px;padding:1px 6px;border-radius:4px;background:var(--warnbanner-bg);color:var(--warnbanner-fg);border:1px solid var(--warnbanner-border)}
.okbtn{font-size:11px;padding:1px 8px;border-radius:4px;border:1px solid var(--ok-border);color:var(--ok-fg);cursor:pointer}.okbtn:hover{background:var(--ok-bg)}
.feat.autof{border-left:3px solid var(--warnbanner-border)}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:none;align-items:center;justify-content:center}
.ov.toplock{align-items:flex-start}   /* dialogdrag.js: top locked after a tab click (CR 2026-10-25_DialogTabs) */.ov.on{display:flex}
#ov{z-index:60}                       /* message / confirm dialogs always above the other overlays (dashboard, sessions, indicators) */
/* Trade detail modal (TR1, docs/open/2026-10-24_TradeReview/mockups/trade_detail.html option A): above the Dashboard (z 50), below message dialogs (#ov, z 60) */
#ovtrade{z-index:55}
/* message / confirm dialogs (CR 2026-10-24_Chart CH5, option A): narrow, buttons right-aligned and sized to their text, ✕ in the corner */
#ov .card{width:min(440px,92vw);position:relative}#ov .card.mwide{width:min(720px,94vw)}#ov .card h3{padding-right:24px}
.mbtns{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap}.mbtns .sp{flex:1}
.btn.txt{background:none;border-color:transparent;color:var(--muted);padding-left:2px}.btn.txt:hover:not(:disabled){color:var(--text);border-color:transparent}
.mclose{position:absolute;top:14px;right:16px;cursor:pointer;color:var(--muted);font-size:15px;line-height:1;padding:2px}.mclose:hover{color:var(--text)}
.ov .card.td-card{width:min(1180px,96vw);background:var(--card);padding:14px 16px}
.td-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.td-head b{font-size:15px}.td-head .sp{flex:1}
.nosl{display:inline-block;color:#f7a21b;border:1px solid #f7a21b;border-radius:4px;padding:0 5px;font-size:10.5px;line-height:15px;font-weight:600;white-space:nowrap}
.tvl-pill.nosl{height:20px;box-sizing:border-box;line-height:18px;border-radius:4px;border-style:solid;background:var(--panel);padding:0 7px;font-size:12px}
.tvl-pill.sl.dot[data-act]{cursor:grab}.tvl-pill.sl.dot[data-act]:hover{background:rgba(247,162,27,.14)}
.tvt-sum .v.nosltx{color:#f7a21b}
.tvt-hint2{font-size:11.5px;color:var(--muted);margin:-2px 0 6px}
.chip.off{opacity:.4;pointer-events:none}
.bp-note{display:block;font-size:10.5px;font-weight:400;color:var(--muted);margin-top:1px}
.td-pill .td-usd{font-size:14px}.td-pill .td-r{font-size:10.5px;color:var(--muted)}
.nornote{font-size:12px;margin:-4px 0 8px}
.td-pill{display:inline-block;border-radius:999px;padding:1px 9px;font-size:11.5px;border:1px solid var(--border)}
.td-pill.neg{border-color:#ef535066}.td-pill.pos{border-color:#26a69a66}
.td-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.td-cap{font-size:11.5px;color:var(--muted);margin:0 0 3px;display:flex;justify-content:space-between;gap:8px}
.td-shot{width:100%;display:block;border-radius:6px;border:1px solid var(--border);cursor:zoom-in;background:var(--panel)}
.td-nos{display:flex;flex-direction:column;align-items:center;justify-content:center;height:180px;border:1px dashed var(--border);border-radius:6px;color:var(--muted);font-size:12px;text-align:center;padding:0 12px}
.td-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.td-fact{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:6px 9px;min-width:0}
.td-fact .l{color:var(--muted);font-size:11px}.td-fact .v{font-size:13px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.td-lb{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:58;cursor:zoom-out}.td-lb.on{display:flex}
.td-lb img{max-width:96vw;max-height:92vh;border-radius:6px}
tr.tdrow{cursor:pointer}tr.tdrow:hover td{background:var(--hover)}
@media (max-width:820px){.td-two{grid-template-columns:1fr}.td-facts{grid-template-columns:1fr 1fr}}
.ov .card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:18px 20px;width:min(640px,92vw);max-height:90vh;overflow:auto}
.ov .card.wide{width:min(980px,94vw)}
.ov h3{margin:0 0 10px}
textarea{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 8px;font:inherit;width:100%}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 14px;margin:8px 0}
.form label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}.form label input,.form label select{width:100%}
.form .chk{flex-direction:row;align-items:center;gap:7px;color:var(--text)}.form .chk input{width:auto}
.sect{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:14px 0 2px;border-top:1px solid var(--border);padding-top:10px}
.nftabs{margin:2px 0 8px}.nftabs .st{font-size:13px}.nfpane > .sect:first-child{border-top:0;padding-top:0;margin-top:4px}   /* session form tabs (2026-10-25) */
/* segmented tabs (mockup D): Simple | Pro in the form header, Market sessions | Custom | Continuous in Trading time */
.seg{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;vertical-align:middle;font-weight:400}
.seg>span{padding:5px 12px;cursor:pointer;font-size:12.5px;border-right:1px solid var(--border);color:var(--text);user-select:none}.seg>span:last-child{border-right:0}
.seg>span.on{background:var(--acc);color:var(--icon-hover)}.seg.dis>span{cursor:not-allowed;opacity:.55}
.card h3 .seg.mode{float:right;margin-left:10px}
.tt{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin:2px 0 12px}
.tt .ttlab{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ses{display:grid;grid-template-columns:18px 92px auto auto;justify-content:start;gap:4px 8px;align-items:center;font-size:13px;margin:4px 0;cursor:pointer}
.ses input{width:auto;margin:0}.ses .tm{color:var(--muted);font-size:12px}
.dotc{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
tr.act td{background:var(--row-active)}
/* ---------- proposal pages (Indonesian) ---------- */
.page{max-width:1100px;margin:0 auto;padding:18px 16px 60px}
.page h2{margin:24px 0 8px;font-size:18px}.page p.sub{color:var(--muted);margin:0 0 14px}
.feat{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin:8px 0;display:grid;grid-template-columns:1fr auto;gap:8px 14px}
.feat .name{font-weight:700}.feat .id{color:var(--muted);font-weight:600;margin-right:6px}
.feat .desc{color:var(--muted);grid-column:1/2;font-size:12.5px}
.feat .badges{display:flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap}
.rec{font-size:10px;padding:1px 6px;border-radius:4px;border:1px solid var(--border);color:var(--text)}
.rec.inti{border-color:var(--acc);color:var(--link)}.rec.saran{border-color:var(--pos);color:var(--ok-fg)}.rec.opsi{color:var(--muted)}
.choice{display:flex;gap:5px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}
.choice .chip.yes.on{background:var(--ok-bg);border-color:var(--pos)}.choice .chip.no.on{background:var(--stop-bg);border-color:var(--neg)}.choice .chip.rev.on{background:var(--warnbanner-bg);border-color:#f0b429}
.feat textarea{grid-column:1/-1;display:none}.feat.rev textarea{display:block}
.opts{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.opt{border:1px solid var(--border);border-radius:6px;padding:6px 9px;cursor:pointer;font-size:12.5px}.opt.on{border-color:var(--acc);background:var(--sel)}
.opt .r{font-size:10px;color:var(--ok-fg);margin-left:6px}
.summary{position:sticky;top:49px;z-index:5;background:var(--bg);padding:8px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.flow{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.step{flex:1 1 150px;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px}.step b{display:block;margin-bottom:4px}
.arrow{align-self:center;color:var(--muted);font-size:18px}
.mock{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px;margin:12px 0}
.mockgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px}.stat b{display:block;font-size:20px}
.note{font-size:12px;color:var(--warn)}
@media (max-width:900px){.work{grid-template-columns:1fr}#dtools{display:none}#vproto.on{height:auto}}
/* ---------- ReplayTrader app shell (overrides) ---------- */
html,body{height:100%;overflow:hidden}
#app{display:grid;grid-template-rows:auto 1fr;height:100vh}   /* appbar + work; #banners now floats inside #charts, no row of its own */
.work{min-height:0}
#dtools:empty{display:none}.work.notools{grid-template-columns:1fr 330px 44px}
.legend{top:30px}
.legend .ohlc{font-variant-numeric:tabular-nums}
.sel-zone{max-width:160px}
.hidden{display:none!important}
/* New session form: tooltips, summary, help link */
.tipi{display:inline-block;margin:0 4px;color:var(--muted);cursor:help;font-size:12px;line-height:1;user-select:none}.tipi:hover,.tipi:focus{color:var(--acc);outline:none}
#tipbox{position:fixed;z-index:90;display:none;max-width:340px;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.55);padding:8px 10px;color:var(--text);font:13px/1.45 system-ui}
#tipbox a{color:var(--acc);white-space:nowrap}
.nfsum{margin:8px 0;padding:7px 10px;border:1px dashed var(--border);border-radius:6px;color:var(--muted);font-size:12.5px}
.helplink{float:right;font:600 13px system-ui;color:var(--acc);text-decoration:none;border:1px solid var(--border);border-radius:6px;padding:3px 9px}.helplink:hover{background:var(--hover2)}
.lt{display:inline-flex;align-items:center;gap:2px}
/* right panel: pinned / hidden / floating over the charts */
.work{position:relative}
.work.nopanel{grid-template-columns:44px 1fr 0 44px}.work.nopanel.notools{grid-template-columns:1fr 0 44px}
.work.nopanel #side{display:none}
/* compact top bar: one row */
.appbar{flex-wrap:nowrap;gap:5px;padding:5px 8px;overflow:hidden;font-size:12.5px}
.appbar .pill{padding:3px 8px;flex:none}
.appbar #psess{max-width:200px;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:60px}
.appbar #psrc{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.appbar .sel-zone{max-width:120px}
label.locked{opacity:.55}label.locked input,label.locked select{cursor:not-allowed}
/* Session settings: editable vs fixed (CR 2026-10-26_SettingsClarity, option D) */
.setmode label.locked{opacity:.45}
.setmode label.editable{color:var(--text)}
.setmode label.editable > .lt::after{content:" ✎";color:#2962ff;font-weight:600}.setmode .edmark{color:#2962ff;font-weight:600;margin-right:4px}   /* .lt = the label text wrapped by the help ⓘ */
.setmode label.editable > input:not([type=checkbox]):not([type=radio]),.setmode label.editable > select,.setmode label.editable > textarea,
.setmode label.editable > .in > input{background:var(--edit-bg,#eef3ff);border-color:#2962ff}
.setmode{--edit-bg:#16244a}:root[data-theme="light"] .setmode{--edit-bg:#eef3ff}
.setmode label.editable.fwd{background:var(--edit-bg,#eef3ff);border:1px solid #2962ff;border-radius:6px;padding:5px 8px}
.setmode .stabs .st.hasedit::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#2962ff;margin-left:5px;vertical-align:middle}
.editlegend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin:2px 0 8px}.editlegend span{display:flex;align-items:center;gap:6px}
.editlegend .sw{width:20px;height:12px;border-radius:3px;border:1px solid var(--border);display:inline-block}.editlegend .sw.ed{background:var(--edit-bg,#eef3ff);border-color:#2962ff}.editlegend .sw.fx{opacity:.5;background:var(--card)}
.box h4{gap:10px}
/* chart layouts (2026-10-26_ChartLayouts): chartlayout.js sets each .ch grid-area; a maximized chart hides the others */
.charts[data-max] .ch:not(.max),.charts[data-max] .split{display:none}
.chwin{position:absolute;right:74px;top:6px;z-index:6;display:flex;gap:2px;background:var(--pop-bg);border:1px solid var(--border);border-radius:6px;padding:2px;opacity:0;transition:opacity .12s}
.ch:hover .chwin{opacity:1}.chwin.off{display:none}
.chwin span{width:26px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;color:var(--muted)}
.chwin span:hover{background:var(--hover);color:var(--text)}.chwin span.off{display:none}
.chwin svg{display:block}
/* Chart layout: one button (current layout + ▾) and a menu with a row per number of charts (2026-10-28_LayoutButton, option C) */
#playout{display:inline-flex;align-items:center;gap:3px;height:28px;padding:0 6px;border-radius:6px;cursor:pointer;color:var(--muted)}
#playout svg{display:block}#playout .cv{font-size:10px}#playout:hover,#playout.open{background:var(--hover);color:var(--text)}
#laybox{position:fixed;z-index:85;min-width:200px;padding:4px 0;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.lay-row{display:flex;align-items:center;gap:4px;padding:5px 10px}.lay-row+.lay-row{border-top:1px solid var(--pop-border)}
.lay-n{width:18px;color:var(--muted);font:600 13px system-ui}
.layb{display:inline-flex;align-items:center;justify-content:center;width:36px;height:32px;border-radius:5px;cursor:pointer;color:var(--muted)}
.layb svg{display:block}.layb:hover{background:var(--hover);color:var(--text)}.layb.on{background:var(--sel2);color:var(--icon-hover)}
/* chart style panel */
#pcandle{display:inline-flex;align-items:center;padding:1px 6px;color:var(--text)}
#candlebox{position:fixed;z-index:85;width:300px;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.55);padding:12px 14px;color:var(--text);font:13px system-ui}
.cs-h{font-weight:700;margin-bottom:8px}.cs-types{display:flex;gap:4px}
.cs-t{display:flex;align-items:center;justify-content:center;width:44px;height:36px;border-radius:5px;cursor:pointer;color:var(--icon);border:1px solid transparent}
.cs-t:hover{background:var(--hover)}.cs-t.on{background:var(--sel2);color:var(--icon-hover);border-color:#2962ff}
.cs-name{margin:6px 0 10px;color:var(--muted);font-size:12px}
.cs-row{display:grid;grid-template-columns:1fr 40px 40px;gap:8px;align-items:center;margin:7px 0}.cs-row label{display:flex;gap:7px;align-items:center}
.cs-row input[type=color]{width:40px;height:26px;padding:0;border:1px solid var(--pop-border);border-radius:4px;background:none;cursor:pointer}
.cs-cap{display:grid;grid-template-columns:1fr 40px 40px;gap:8px;font-size:11px;color:var(--muted);text-align:center;margin-top:-2px}
.cs-foot{display:flex;justify-content:space-between;margin-top:14px;padding-top:10px;border-top:1px solid var(--pop-border)}

/* right icon rail + panels (docs/done/2026-10-18_RightRail/spec.md) */
/* #banners floats over the chart (like #alertpops) instead of pushing it — see 2026-10-20 decision */
#banners{position:absolute;top:8px;left:12px;z-index:14;width:360px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
#banners .banner{position:relative;margin:0;padding:8px 28px 8px 10px;white-space:normal;pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.45);animation:apin .18s ease-out}
#banners .banner .bx{position:absolute;top:6px;right:8px;cursor:pointer;color:var(--muted);line-height:1}
#banners .banner .bx:hover{color:var(--icon-hover)}
#rail{grid-column:-2;display:flex;flex-direction:column;gap:4px;align-items:center;padding-top:2px;border-left:1px solid var(--border);min-height:0}
.rbtn{position:relative;width:38px;height:38px;border-radius:6px;background:none;border:0;color:var(--icon);cursor:pointer;display:flex;align-items:center;justify-content:center}
.rbtn:hover{background:var(--hover);color:var(--icon-hover)}
#rail .rbtn[data-p]{touch-action:none}.rbtn.rdrag{opacity:.7;background:var(--sel2);cursor:grabbing;box-shadow:0 2px 8px rgba(0,0,0,.3)}.rbtn.on{background:var(--sel2);color:var(--icon-hover)}
#rail .rbtn[data-p]::before{content:"";position:absolute;left:2px;top:50%;width:6px;height:14px;transform:translateY(-50%);opacity:0;transition:opacity .12s;pointer-events:none;background:radial-gradient(circle,var(--muted) 1px,transparent 1.4px) 0 0/6px 5px}
#rail .rbtn[data-p]:hover::before,#rail .rbtn.rdrag::before{opacity:.85}
#rail .rbtn[data-p]:active,#rail .rbtn.rdrag{cursor:grabbing}      /* pointer on hover; hand only while pressed and held */
#rail #psettings::before{content:"";position:absolute;left:7px;right:7px;top:-5px;height:1px;background:var(--border)}
.rbadge{position:absolute;top:1px;right:0;font:600 9.5px/13px system-ui;background:var(--hover);color:var(--text);border-radius:7px;padding:0 4px;pointer-events:none}
.rbadge:empty:not(.dot){display:none}.rbadge.full{background:var(--neg);color:var(--icon-hover)}
.rbadge.dot{width:9px;height:9px;padding:0;top:4px;right:5px;border-radius:50%}.rbadge.dot.buy{background:var(--buy)}.rbadge.dot.sell{background:var(--sell)}.rbadge.dot.pend{background:var(--muted)}
.rpane{display:none;flex-direction:column;gap:6px;min-height:0}.rpane.on{display:flex}
.rtabs{display:flex;gap:4px;background:var(--card);border-radius:8px;padding:3px}
.rtab{flex:1;text-align:center;padding:6px 0;border-radius:6px;cursor:pointer;color:var(--muted);font:600 13px system-ui}.rtab:hover{color:var(--text)}.rtab.on{background:var(--hover);color:var(--icon-hover)}
.otbar{display:flex;gap:6px;justify-content:flex-end;margin:2px 0}
.otg{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:10px 0 4px}
.otsub{font-size:12px;color:var(--text);font-weight:600;margin:6px 0 2px}
#otinds .drow.off .dn{opacity:.5}
.dwg{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:8px 10px;margin-top:6px}.dwg .kv i{font-style:normal}
/* replay toolbar (TradingView style; docs/done/2026-10-18_ReplayToolbar/mockups/controls_A.html) */
.charts{position:relative}
.rtb{position:absolute;z-index:12;display:flex;align-items:center;gap:2px;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:8px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.55);user-select:none}
.rtb .grip{width:10px;height:28px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 2px;cursor:grab;opacity:.45}.rtb .grip i{display:block;height:2px;background:var(--grip);border-radius:1px}.rtb .grip:hover{opacity:.9}
.rtb .b{position:relative;display:flex;align-items:center;gap:5px;height:34px;min-width:34px;justify-content:center;padding:0 8px;border-radius:5px;color:var(--text);cursor:pointer;font:600 12.5px system-ui}
.rtb .b svg{width:20px;height:20px;display:block}
.rtb .b:hover{background:var(--hover)}.rtb .b:active{background:var(--pop-border)}
.rtb .b.play{background:#2962ff;color:var(--icon-hover);min-width:42px}.rtb .b.play:hover{background:var(--play-hover)}
.rtb .b.play .ipa{display:none}.rtb .b.play.playing .ipa{display:inline}.rtb .b.play.playing .ip{display:none}
.rtb .b.on{color:#2962ff}.rtb .b.on::before{content:"";position:absolute;left:9px;right:9px;bottom:3px;height:2px;border-radius:1px;background:#2962ff}
.rtb .b.off{color:var(--off)}.rtb .b.off:hover{background:none}
.rtb .lb{font:600 12px system-ui}
.rtb .b:has(.lb){gap:0}.rtb .b .lb{margin-left:-2px}   /* icon close to its number (CR 2026-10-24_Chart CH2) */
/* blue icon, text-colour number: the step icon's bar no longer reads as a "1" ("11m"); user choice A from
   docs/done/2026-10-25_ReplayToolbarLabels/mockups/toolbar_labels.html (2026-10-25) */
.rtb .b:has(.lb):not(.off) svg{color:#2962ff}
.rtb .sep{width:1px;height:22px;background:var(--pop-border);margin:0 4px}
.rtb .menu{display:none;position:absolute;bottom:calc(100% + 8px);left:-6px;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.55);padding:4px 0;min-width:170px;z-index:14}
.rtb .menu div{padding:6px 12px;display:flex;justify-content:space-between;gap:14px;font:13px system-ui;color:var(--text)}.rtb .menu div:hover{background:var(--hover)}.rtb .menu div.sel{color:var(--icon-hover);background:var(--sel2)}
.rtb .menu .h{color:var(--muted);font-size:11px;cursor:default}.rtb .menu .h:hover{background:none}
.rtb .tip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--hover);color:var(--icon-hover);font:12px system-ui;padding:5px 9px;border-radius:5px;pointer-events:none;z-index:13;display:none}
.rtb .tip kbd{margin-left:4px}
.rtb .b:hover .tip,.rtb .spd:hover>.tip,.rtb .sb:hover>.tip{display:block}
.rtb .spd:has(.menu[style*="block"])>.tip,.rtb .sb:has(.menu[style*="block"])>.tip,.rtb .b:has(.menu[style*="block"])>.tip{display:none}
/* split buttons Back / Forward / Skip (docs/open/2026-10-28_ReplayToolbarMenus, grouping C): one tinted, outlined box; the icon part
   runs, the label + ▾ part opens the menu */
.rtb .sb{--sbg:rgba(41,98,255,.08);--sbg-h:rgba(41,98,255,.16);--sbl:rgba(41,98,255,.35);position:relative;display:flex;align-items:center;height:34px;margin:0 3px;border-radius:5px;background:var(--sbg);box-shadow:inset 0 0 0 1px var(--sbl)}
:root[data-theme="dark"] .rtb .sb{--sbg:rgba(41,98,255,.16);--sbg-h:rgba(41,98,255,.26)}
.rtb .sb .act{display:flex;align-items:center;justify-content:center;gap:5px;height:100%;min-width:34px;padding:0 6px 0 8px;border-radius:5px 0 0 5px;cursor:pointer;color:#2962ff;touch-action:none}
.rtb .sb .act svg{width:20px;height:20px;display:block}
.rtb .sb .act .tl{color:var(--text);margin-left:0}
.rtb .sb .opt{display:flex;align-items:center;justify-content:center;gap:4px;height:100%;min-width:40px;padding:0 7px;border-radius:0 5px 5px 0;cursor:pointer;color:var(--text);font:600 12px system-ui;border-left:1px solid var(--sbl)}
.rtb .cv{font-size:10px;color:var(--muted)}
.rtb .sb .act:hover,.rtb .sb .opt:hover{background:var(--sbg-h)}
.rtb .sb.off .act{color:var(--off);cursor:default}.rtb .sb.off .act:hover{background:none}.rtb .sb.off .act .tl{color:var(--off)}
/* 1m / 5m: each in its own box like the split buttons, same height (Button size) (2026-10-28_ReplayToolbarStep, option A2) */
.rtb .b.box{--sbg:rgba(41,98,255,.08);--sbg-h:rgba(41,98,255,.16);--sbl:rgba(41,98,255,.35);margin:0 3px;padding:0 11px 0 7px;background:var(--sbg);box-shadow:inset 0 0 0 1px var(--sbl)}
:root[data-theme="dark"] .rtb .b.box{--sbg:rgba(41,98,255,.16);--sbg-h:rgba(41,98,255,.26)}
.rtb .b.box:has(.lb){gap:3px}.rtb .b.box:hover{background:var(--sbg-h)}.rtb .b.box.off:hover{background:var(--sbg)}
/* Play + speed: one blue group */
.rtb .split{position:relative;display:flex;align-items:center;margin:0 3px}
.rtb .split .b.play{border-radius:5px 0 0 5px;touch-action:none}
.rtb .spd{position:relative;display:flex;align-items:center;gap:3px;height:34px;padding:0 7px 0 8px;border-radius:0 5px 5px 0;cursor:pointer;font:700 12px system-ui;color:#2962ff;background:rgba(41,98,255,.12);border-left:1px solid rgba(255,255,255,.55)}
.rtb .spd:hover{background:rgba(41,98,255,.22)}
.rtb .spd .turtle{width:17px;height:17px;display:none}.rtb .spd.slow .turtle{display:block}
.rtb .spd .cv{color:#2962ff;opacity:.8}
/* menus */
.rtb .menu{left:0;cursor:default}
.rtb .menu div[data-v],.rtb .menu div[data-k],.rtb .menu div[data-m],.rtb .menu div[data-slow]{cursor:pointer;align-items:center}
.rtb .menu .ck{width:12px;color:#2962ff;font-weight:700;flex:none}
.rtb .menu .nm{flex:1;white-space:nowrap}
.rtb .menu .r{color:var(--muted);font-size:12px;white-space:nowrap}
.rtb .menu div.dis{color:var(--off);cursor:default}.rtb .menu div.dis:hover{background:none}.rtb .menu div.dis .r{color:var(--off)}
.rtb .menu hr{border:0;border-top:1px solid var(--pop-border);margin:4px 0}
.rtb .menu .ico{width:18px;height:18px;flex:none;color:#2962ff}.rtb .menu div.dis .ico{color:var(--off)}
.rtb .menu .sw{width:28px;height:16px;border-radius:8px;background:var(--off);position:relative;flex:none;padding:0}
.rtb .menu .sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .12s}
.rtb .menu .sw.on{background:#2962ff}.rtb .menu .sw.on::after{left:14px}
.rtb .menu div.tto{gap:6px;align-items:center;padding:4px 12px 8px}.rtb .menu div.tto:hover{background:none}
.rtb .menu .tto input{width:92px;font:13px system-ui;padding:3px 6px;border:1px solid var(--pop-border);border-radius:4px;background:var(--panel);color:var(--text)}
.rtb .menu .tto .z{color:var(--muted);font-size:12px;flex:1}
.rtb .menu .tto button{font:600 12px system-ui;padding:4px 10px;border:0;border-radius:4px;background:#2962ff;color:#fff;cursor:pointer}
.rtb .menu div.err{color:#e34948;font-size:12px;padding:0 12px 6px}.rtb .menu div.err:hover{background:none}
#tb_skipmenu{min-width:300px}#tb_fwdmenu,#tb_backmenu{min-width:200px}#tb_menu{min-width:250px}#tb_moremenu{left:auto;right:0;min-width:190px}
/* too narrow for the chart area: Follow / Reset / Shot / Undock move into ••• (spec §2) */
.rtb #tb_more{display:none}.rtb.narrow #tb_more{display:flex}.rtb.narrow .ext{display:none}
/* large buttons, 44 px targets (spec §2): .tbbig on the chart area, set by toolbar.js applyTbSize from Settings → Replay toolbar
   (Auto = when the browser reports a finger as the main pointer) */
.charts.tbbig .rtb .b,.charts.tbbig .rtb .sb,.charts.tbbig .rtb .spd{height:44px}.charts.tbbig .rtb .b,.charts.tbbig .rtb .sb .act{min-width:44px}
.charts.tbbig .rtb .sb .opt{min-width:52px}.charts.tbbig .rtb .b.play{min-width:52px}.charts.tbbig .rtb .spd{min-width:60px;justify-content:center}
.charts.tbbig .rtb .grip{height:38px}.charts.tbbig .rtb .menu div{padding:11px 14px}.charts.tbbig .rtb .menu div.tto{padding:6px 14px 10px}
.rbadge.dot{top:auto;bottom:3px;right:4px}               /* position dot sits under the trades badge on the Order icon */
/* alerts: dialog, panel, pop-ups (docs/done/2026-10-18_Alerts/spec.md) */
.adlg{min-width:min(560px,90vw)}.adlg h3{margin:0 0 6px}
.adsec{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:12px 0 5px}
.adrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.adrow select,.adrow input{height:32px}
.adseg{display:flex;background:var(--card);border:1px solid var(--border);border-radius:7px;overflow:hidden}
.adseg span{flex:1;text-align:center;padding:7px 4px;cursor:pointer;font:600 12.5px system-ui;color:var(--muted);border-right:1px solid var(--border)}.adseg span:last-child{border-right:0}
.adseg span:hover{color:var(--text)}.adseg span.on{background:var(--sel2);color:var(--icon-hover)}
.adhelp{font-size:12px;margin-top:4px}
.adfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.arow{display:flex;gap:6px;align-items:flex-start;padding:7px 4px;border-bottom:1px solid var(--border)}.arow .atxt{flex:1;font-size:12.5px;min-width:0}.arow .atxt b{font-weight:600}
.arow.dim .atxt{opacity:.6}.arow .dbtn{cursor:pointer;opacity:.6;padding:0 2px}.arow .dbtn:hover{opacity:1}
.astat{font-size:11px;padding:0 6px;border-radius:8px;border:1px solid var(--border)}.astat.on{color:#26a69a;border-color:#1f5a4f}.astat.trig{color:#f0b429;border-color:#6b5419}.astat.off{color:var(--muted)}
.lrow{padding:6px 4px;border-bottom:1px solid var(--border);font-size:12.5px}
#alertpops{position:absolute;top:8px;right:80px;z-index:15;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.apop{position:relative;pointer-events:auto;width:300px;background:var(--pop-bg);border:1px solid var(--pop-border);border-left:3px solid #2962ff;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.55);padding:9px 28px 9px 11px;font-size:12.5px;color:var(--text);animation:apin .18s ease-out}
.apop .ah{font-weight:700;margin-bottom:2px}.apop .x{position:absolute;top:6px;right:8px;cursor:pointer;color:var(--muted)}.apop .x:hover{color:var(--icon-hover)}
@keyframes apin{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
/* TradingView-style colour picker (colorpicker.js): popup chrome (background/border) follows theme; swatches and the
   opacity-track checkerboard are the colour-picker *palette* (content, spec-excluded) and stay literal. */
#cpick{position:fixed;z-index:95;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.6);padding:12px;color:var(--text);font:13px system-ui;user-select:none}
#cpick .cpr{display:grid;grid-template-columns:repeat(10,22px);gap:5px;margin-bottom:5px}
#cpick .cps{width:22px;height:22px;border-radius:3px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#cpick .cps:hover{transform:scale(1.12)}#cpick .cps.on{box-shadow:0 0 0 2px #1e222d,0 0 0 4px #d1d4dc}
#cpick .cpsep{height:1px;background:var(--pop-border);margin:8px 0 9px}
#cpick .cpcust{grid-template-columns:repeat(10,22px)}#cpick .cpcust input{display:none}
#cpick .cpplus{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--icon);cursor:pointer;border-radius:3px}#cpick .cpplus:hover{background:var(--hover);color:var(--icon-hover)}
#cpick .cplab{color:var(--icon);margin:10px 0 6px}
#cpick .cpop2{display:flex;align-items:center;gap:10px}
#cpick .cptrack{flex:1;height:12px;border-radius:6px;position:relative;
  background:linear-gradient(90deg,transparent,var(--c)),repeating-conic-gradient(#8b93a7 0 25%,#2a2e39 0 50%) 0 0/8px 8px}
#cpick .cptrack input{position:absolute;inset:-4px 0;width:100%;margin:0;background:none;-webkit-appearance:none;appearance:none}
#cpick .cptrack input::-webkit-slider-runnable-track{height:12px;background:none}
#cpick .cptrack input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #131722;margin-top:-2px;cursor:pointer}
#cpick .cptrack input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #131722}
#cpick .cppct{display:flex;align-items:center;gap:2px;border:1px solid var(--pop-border);border-radius:5px;padding:2px 6px}
#cpick .cppct input{width:38px;background:none;border:0;color:var(--text);text-align:right;font:13px system-ui;-moz-appearance:textfield}
#cpick .cppct input::-webkit-outer-spin-button,#cpick .cppct input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#cpick .cpw{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--pop-border);border-radius:6px;overflow:hidden}
#cpick .cpw span{height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-right:1px solid var(--pop-border)}#cpick .cpw span:last-child{border-right:0}
#cpick .cpw span:hover{background:var(--hover)}#cpick .cpw span.on{background:#d1d4dc}#cpick .cpw span.on i{background:#131722}
#cpick .cpw i{display:block;width:28px;background:#d1d4dc;border-radius:1px}
.cswatch{display:inline-flex;width:30px;height:24px;padding:3px;border:1px solid #363a45;border-radius:5px;cursor:pointer;vertical-align:middle;
  background:repeating-conic-gradient(#8b93a7 0 25%,#2a2e39 0 50%) 0 0/8px 8px;background-clip:content-box;flex:none}
.cswatch:hover{border-color:var(--swatch-border-hover)}.cswatch i{display:block;width:100%;height:100%;border-radius:2px}
/* replay clock (top bar) and time-zone button (chart A corner) */
.clockbox{display:flex;align-items:center;gap:8px;border-radius:8px;padding:2px 11px;background:linear-gradient(90deg,var(--sel2),var(--card));border:1px solid #2962ff66;flex:none}
.clockbox #pclock{font:700 19px/1.15 ui-monospace,Consolas,monospace;color:var(--icon-hover);letter-spacing:.3px}
.clockbox .msess{font:700 10.5px system-ui;color:var(--on-accent-text);border-radius:4px;padding:1px 6px;letter-spacing:.04em;white-space:nowrap}
.clockbox .cbday{font-size:11.5px;color:var(--clock-sub);white-space:nowrap}.clockbox .cbday b{color:var(--text);font-weight:600}
.tzbtn{position:absolute;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:2px;font:600 11px system-ui;color:var(--text);background:var(--panel);border-top:1px solid var(--border);border-left:1px solid var(--border);cursor:pointer;width:68px;height:26px;white-space:nowrap}
.tzbtn:hover{background:var(--hover);color:var(--icon-hover)}.tzbtn .caret{font-size:8px;color:var(--muted)}
#tzmenu{position:fixed;z-index:90;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.55);padding:4px 0;min-width:230px}
#tzmenu div{display:flex;justify-content:space-between;gap:16px;padding:6px 12px;font:13px system-ui;color:var(--text);cursor:pointer}#tzmenu div:hover{background:var(--hover)}#tzmenu div.on{background:var(--sel2);color:var(--icon-hover)}

/* account menu (server mode only), accountmenu.js: avatar pill #pacct in the appbar + popup #pacct_menu,
   same fixed-position-popup idiom as #tzmenu/#candlebox/.rtb .menu above. Hidden entirely (display:none,
   set here and toggled by initAccountMenu()) in local mode. */
.pill.acct{cursor:pointer;padding:2px;border-radius:50%;border-color:transparent}
.acct-av{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;font:600 12px system-ui}
#pacct_menu{position:fixed;z-index:90;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.55);padding:4px 0;min-width:200px}
#pacct_menu .nick{padding:8px 12px;font:600 13px system-ui;color:var(--text);cursor:pointer}#pacct_menu .nick:hover{background:var(--hover)}
#pacct_menu a,#pacct_menu .item{display:flex;align-items:center;gap:6px;padding:8px 12px;font:13px system-ui;color:var(--text);cursor:pointer;text-decoration:none}
#pacct_menu a:hover,#pacct_menu .item:hover{background:var(--hover)}
#pacct_menu .sep{height:1px;background:var(--pop-border);margin:4px 0}
.adminbadge{font:700 9.5px system-ui;color:var(--on-accent-text);background:var(--acc);border-radius:4px;padding:1px 5px;letter-spacing:.03em}

/* read-only lock (readonly.js, Task 5): an admin viewing another user's session via ?view=<profile>/<sid>.
   .banner.info is a new neutral/blue variant next to the existing .banner.warn/.stop/.ok (app.css:135-137) --
   deliberately NOT .ok's green, which reads as "success"; this is a status, not an achievement. */
.banner.info{background:var(--info-bg);border:1px solid var(--info-border);color:var(--info-fg)}
.ro-toast{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:96;max-width:min(560px,92vw);
  text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.5);animation:apin .18s ease-out;transition:opacity .4s ease}
.ro-toast.out{opacity:0}
/* badge: appended to #charts (readonly.js), same positioning idiom as #banners/#dprops/#alertpops (app.css:50,
   .charts{position:relative}) -- right:0/bottom:0 of #charts is the bottom-right corner of the whole chart grid (chart A's corner in layout 1 and 2),
   so right:0/bottom:0 here lands in that corner, the same corner #tzbtn already occupies (nested
   one level deeper, inside .ch) -- stacked above it with a few px of clearance so the two never overlap. */
.ro-badge{position:absolute;right:0;bottom:29px;z-index:4;display:flex;align-items:center;gap:4px;
  font:600 11px system-ui;color:var(--info-fg);background:var(--info-bg);border:1px solid var(--info-border);
  padding:3px 8px;white-space:nowrap;cursor:default}
.ro-click-toast{position:absolute;right:0;bottom:60px;z-index:5;font:600 11px system-ui;color:var(--info-fg);
  background:var(--info-bg);border:1px solid var(--info-border);border-radius:4px;padding:4px 8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .15s ease}
.ro-click-toast.show{opacity:1;transition:none}
/* note left in place of the hidden replay toolbar (#rtb) */
.ro-note{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:4;font:600 12px system-ui;
  color:var(--muted);background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:6px 12px;white-space:nowrap}

/* login modal (email -> OTP), standalone module loginmodal.js / loginmodalcfg.js. Scoped under
   .loginmodal so it doesn't collide with the app's existing .ov/.card overlay (index.html #ov) --
   this module is also meant to run on pages without that shell (e.g. the landing page). Markup/
   classes follow docs/done/2026-10-20_MultiuserDeploy/mockups/server_ui.html's "B - Modal overlay, step dots" option. */
.loginmodal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70;display:flex;align-items:center;justify-content:center}
.loginmodal .loginbox{width:320px;background:var(--card,#1b2030);border:1px solid var(--border,#2a3142);border-radius:12px;padding:22px}
.loginmodal .loginbox h3{margin:0 0 4px;font-size:16px;color:var(--text,#d1d4dc)}
.loginmodal .loginbox p{margin:0 0 16px;color:var(--muted,#8b93a7);font-size:12.5px}
.loginmodal .f{margin-bottom:12px}
.loginmodal label{display:block;font-size:11.5px;color:var(--muted,#8b93a7);margin-bottom:5px}
.loginmodal input[type=email]{background:var(--card,#1b2030);border:1px solid var(--border,#2a3142);color:var(--text,#d1d4dc);border-radius:6px;padding:8px 10px;font-size:13px;width:100%}
.loginmodal input[type=email]:focus{outline:none;border-color:var(--acc,#1e90ff)}
.loginmodal .stepdots{display:flex;gap:5px;justify-content:center;margin-bottom:14px}
.loginmodal .stepdots i{width:6px;height:6px;border-radius:50%;background:var(--border,#2a3142);display:block}
.loginmodal .stepdots i.on{background:var(--acc,#1e90ff)}
.loginmodal .codewrap{display:flex;gap:6px;justify-content:center;margin:4px 0 12px}
.loginmodal .codewrap input{width:36px;height:44px;text-align:center;font-size:18px;padding:0;background:var(--card,#1b2030);border:1px solid var(--border,#2a3142);color:var(--text,#d1d4dc);border-radius:6px}
.loginmodal .codewrap input:focus{outline:none;border-color:var(--acc,#1e90ff)}
.loginmodal .resend{font-size:11.5px;color:var(--muted,#8b93a7);text-align:center;margin-top:8px}
.loginmodal .resend a{color:var(--acc,#1e90ff);cursor:pointer}
.loginmodal .resend a.dis{color:var(--muted,#8b93a7);cursor:default;pointer-events:none}
.loginmodal .priv{font-size:11px;color:var(--muted,#8b93a7);margin-top:14px;line-height:1.5;border-top:1px solid var(--border,#2a3142);padding-top:12px}
.loginmodal .err{color:var(--err-fg);font-size:12px;margin-top:6px}
.loginmodal .btn{border:1px solid var(--border,#2a3142);background:var(--card,#1b2030);color:var(--text,#d1d4dc);border-radius:6px;padding:7px 12px;cursor:pointer;font:600 13px system-ui}
.loginmodal .btn.pri{background:var(--acc,#1e90ff);border-color:var(--acc,#1e90ff);color:#fff}
.loginmodal .btn:disabled{opacity:.6;cursor:default}

/* mandatory nickname prompt (server mode only), standalone module nicknamecard.js / nicknamecardcfg.js.
   Full-screen blocking card: no close button, scrim does not dismiss on click -- Option A from the
   multiuser-deploy UI design doc. Reuses the .btn/.f/.err look from .loginmodal but under its own
   scope since it must sit on top of the app shell (index.html), not just the landing page. */
.nickcard-scrim{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:80;display:flex;align-items:center;justify-content:center}
.nickcard{width:320px;background:var(--card,#1b2030);border:1px solid var(--border,#2a3142);border-radius:12px;padding:22px;text-align:center}
.nickcard-avatar{width:48px;height:48px;line-height:48px;border-radius:50%;background:var(--acc,#1e90ff);color:#fff;font:600 18px system-ui;margin:0 auto 12px}
.nickcard h3{margin:0 0 4px;font-size:16px;color:var(--text,#d1d4dc)}
.nickcard p{margin:0 0 16px;color:var(--muted,#8b93a7);font-size:12.5px}
.nickcard .f{margin-bottom:12px}
.nickcard input[type=text]{background:var(--card,#1b2030);border:1px solid var(--border,#2a3142);color:var(--text,#d1d4dc);border-radius:6px;padding:8px 10px;font-size:13px;width:100%;text-align:center}
.nickcard input[type=text]:focus{outline:none;border-color:var(--acc,#1e90ff)}
.nickcard .err{color:var(--err-fg);font-size:12px;margin-top:10px}
.nickcard .btn{border:1px solid var(--border,#2a3142);background:var(--card,#1b2030);color:var(--text,#d1d4dc);border-radius:6px;padding:7px 12px;cursor:pointer;font:600 13px system-ui}
.nickcard .btn.pri{background:var(--acc,#1e90ff);border-color:var(--acc,#1e90ff);color:#fff}
.nickcard .btn:disabled{opacity:.6;cursor:default}
#rail #psettings{margin-top:auto}#rail .rhelp{margin-bottom:6px;text-decoration:none}                /* help at the bottom of the right toolbar, as in TradingView */
/* DC5: Text typed straight on the chart (drawings.js editTextInline) */
.dtext-edit{position:absolute;z-index:9;background:rgba(41,98,255,.06);border:1px dashed rgba(41,98,255,.55);border-radius:3px;outline:none;resize:none;overflow:hidden;white-space:pre;padding:0 2px;margin:0}
.dtext-edit::placeholder{color:rgba(41,98,255,.6)}
/* ---------- TradingView-style order ticket (#tvticket, tvticket.js; spec docs/done/2026-10-25_OpenTrade §4.2 / §4.4).
   Side colours are TradingView's (Sell #f23645, Buy #2962ff) in both themes; everything else uses the theme tokens. */
#tvticket{position:relative;padding:12px 12px 10px;font-size:13px}
.tvt-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.tvt-h b{font-size:14px;font-weight:600}
.tvt-hb{display:flex;gap:2px}
.tvt-h+.tvt-rsum{margin:-6px 0 10px;color:var(--muted);font-size:11.5px;line-height:1.4}
.tvt-ib{background:none;border:none;color:var(--icon);cursor:pointer;font:13px system-ui;padding:3px 7px;border-radius:4px;line-height:1.2}
.tvt-ib:hover{background:var(--hover);color:var(--icon-hover)}
.tvt-menu{position:absolute;right:10px;top:38px;z-index:20;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.25);padding:4px 0;min-width:250px}
.tvt-menu[hidden]{display:none}
.tvt-mi{display:flex;gap:8px;align-items:center;width:100%;background:none;border:none;color:var(--text);padding:7px 12px;text-align:left;cursor:pointer;font:13px system-ui}
.tvt-mi:hover:not(:disabled){background:var(--hover)}.tvt-mi:disabled{opacity:.55;cursor:default}
.tvt-ck{width:14px;flex:none;color:#2962ff;font-weight:700}
.tvt-mnote{padding:0 12px 6px 34px;font-size:11.5px;color:var(--muted)}.tvt-mnote:empty{display:none}
/* Sell | Buy switch (2026-10-25_OpenTrade, mockup button_styles.html P1): outlined boxes; only the big execute button at the bottom is filled */
.tvt-sw{display:flex;position:relative;gap:8px}
.tvt-sw button{flex:1;border:1.5px solid var(--border);border-radius:6px;background:transparent;padding:6px 10px;display:flex;flex-direction:column;align-items:flex-start;cursor:pointer;font:inherit;line-height:1.3}
.tvt-sw button span{font-size:12px}.tvt-sw button b{font-weight:500;font-size:15px;font-variant-numeric:tabular-nums}
.tvt-sw .tvt-sws{color:#f23645}.tvt-sw .tvt-swb{color:#2962ff;align-items:flex-end}
.tvt-sw button:not(.on){opacity:.8}.tvt-sw .tvt-sws:hover:not(.on){background:rgba(242,54,69,.08)}.tvt-sw .tvt-swb:hover:not(.on){background:rgba(41,98,255,.08)}
.tvt-sw .tvt-swb.on{background:rgba(41,98,255,.1);border-color:#2962ff;opacity:1}.tvt-sw .tvt-sws.on{background:rgba(242,54,69,.1);border-color:#f23645;opacity:1}
.tvt-spr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:0 5px;font-size:11px;white-space:nowrap;cursor:help;font-variant-numeric:tabular-nums}
.tvt-closed{color:var(--muted);font-size:12px;margin-top:8px;line-height:1.6}
.tvt-tabs{display:flex;margin:10px 0 2px;border-bottom:2px solid var(--card)}
.tvt-tabs button{flex:1;background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;padding:6px 0;color:var(--text);cursor:pointer;font:13px system-ui}
.tvt-tabs button.on{border-bottom-color:var(--text);font-weight:600}
.tvt-l{color:var(--muted);font-size:12px;margin:8px 0 4px}
.tvt-in{display:flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:5px;padding:0 8px;background:var(--panel)}
.tvt-in:focus-within{border-color:#2962ff}.tvt-in.bad{border-color:#f23645}
.tvt-in input{flex:1;min-width:0;width:100%;border:none;background:none;color:var(--text);font:13px system-ui;padding:6px 0;outline:none;font-variant-numeric:tabular-nums}
.tvt-in input:disabled{color:var(--muted)}
.tvt-hint{color:var(--muted);font-size:11.5px;white-space:nowrap}
.tvt-note{color:var(--muted);font-size:11.5px;margin-top:4px}
.tvt-lr{display:flex;justify-content:space-between;align-items:center}
.tvt-badge{font-size:11px;font-weight:700;border-radius:3px;padding:1px 6px;background:var(--sel);color:#2962ff}.tvt-badge:empty{display:none}
.tvt-st{color:var(--muted);font-size:12.5px;margin:0 0 2px}
.tvt-sum{margin-top:10px;border:1px solid var(--border);border-radius:6px;overflow:hidden;font-size:13px}
.tvt-sum>div{display:grid;grid-template-columns:50px 1fr auto;gap:8px;padding:6px 9px;align-items:center;border-top:1px solid var(--border)}.tvt-sum>div:first-child{border-top:0}
.tvt-sum .k{font-weight:600}.tvt-sum .v{font-variant-numeric:tabular-nums}.tvt-sum .mu{color:var(--muted)}
.tvt-sum .tp{color:#089981}.tvt-sum .sl{color:#d48806}:root[data-theme="dark"] .tvt-sum .sl{color:#f7a21b}
.tvt-j{margin-top:4px}.tvt-j .chips{margin:2px 0 4px}.tvt-jl{font-size:11.5px;color:var(--muted);margin-top:2px}
.tvt-send{width:100%;margin-top:10px;border:none;border-radius:6px;padding:7px;background:#2962ff;color:#fff;display:flex;flex-direction:column;align-items:center;cursor:pointer;font:inherit;line-height:1.3}
.tvt-send b{font-size:15px}.tvt-send span{font-size:12px}.tvt-send span:empty{display:none}.tvt-send.sell{background:#f23645}
.tvt-send:hover:not(:disabled){filter:brightness(1.08)}.tvt-send:disabled{opacity:.45;cursor:not-allowed}.tvt-send.sent{background:#a3a6af;opacity:1}
.tvt-send.idle{background:var(--card);color:var(--muted);opacity:1}.tvt-note kbd{font-size:10.5px}
.tvt-why{font-size:11.5px;color:var(--muted);margin-top:4px;text-align:center}.tvt-why:empty{display:none}
/* confirmation dialog (inside #ovcard, modal()) */
.tvt-cd{font-size:13px}.tvt-cdt{font-weight:600;margin-bottom:8px;font-variant-numeric:tabular-nums}
.tvt-cdkv{gap:4px 12px;font-size:12.5px}.tvt-cdkv span:nth-child(odd){color:var(--muted)}.tvt-cdkv span:nth-child(even){font-weight:600}
.tvt-viol{margin-top:10px;padding:8px 10px;border-radius:6px;background:var(--warnbanner-bg);border:1px solid var(--warnbanner-border);color:var(--warnbanner-fg);font-size:12.5px}
.tvt-viol.stop{background:var(--stop-bg);border-color:var(--stop-border);color:var(--stop-fg)}
.tvt-viol ul{margin:4px 0 4px 18px;padding:0}.tvt-viol p{margin:2px 0 0;font-size:11.5px;opacity:.9}
.tvt-warn{margin:8px 0 0;font-size:12px;color:var(--muted)}
.tvt-red{margin-top:10px;padding:8px 10px;border-radius:6px;background:var(--card)}.tvt-red p{margin:0 0 6px}.tvt-red .chips{margin:0}
.tvt-cb2{display:flex;gap:6px;align-items:center;margin-top:12px;font-size:12.5px;color:var(--muted);cursor:pointer}.tvt-cb2 input{margin:0}
.tvt-mnote2{font-size:11.5px;color:var(--muted);margin:2px 0 0 21px}
.btn.tvt-dark{background:var(--text);border-color:var(--text);color:var(--panel)}.btn.tvt-dark:hover:not(:disabled){border-color:var(--text);filter:brightness(1.15)}
/* ---------- Chart A overlay in the TradingView order style (.tvlay, tvchart.js; spec docs/done/2026-10-25_OpenTrade §4.1 / §4.3 / §4.7).
   The layer covers chart A's price chart (not its indicator panes); it lets the mouse through, its controls take it. */
.tvlay{position:absolute;left:0;top:0;z-index:4;pointer-events:none}
.tvb{position:relative;margin:3px 0 2px;width:fit-content;display:flex;align-items:flex-end;gap:4px;pointer-events:auto;font:12px system-ui;user-select:none}
.tvb[hidden]{display:none}
/* Legend Buy / Sell only OPEN the order panel: outline, tinted on hover / selected (mockup button_styles.html A); filled = executes */
.tvb-s,.tvb-b{width:72px;height:36px;border:1.5px solid;border-radius:5px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;cursor:pointer;font:inherit;padding:0}
.tvb-s{color:#f23645;border-color:#f23645}.tvb-b{color:#2962ff;border-color:#2962ff}
.tvb-s b,.tvb-b b{font-size:13px;font-variant-numeric:tabular-nums}.tvb-s span,.tvb-b span{font-size:10px;letter-spacing:.06em}
.tvb-s:hover,.tvb-s.on{background:rgba(242,54,69,.12)}.tvb-b:hover,.tvb-b.on{background:rgba(41,98,255,.12)}
.tvb-s.on,.tvb-b.on{border-width:2px}
.tvb.dis .tvb-s,.tvb.dis .tvb-b{opacity:.4;cursor:not-allowed;filter:none}
.tvb-m{display:flex;flex-direction:column;align-items:center;gap:1px}
.tvb-m span{font-size:10.5px;color:var(--text);font-variant-numeric:tabular-nums}
.tvb-q{border:1px solid var(--border);border-radius:4px;padding:2px 7px;background:var(--panel);color:var(--text);font:13px system-ui;cursor:pointer;min-width:44px;font-variant-numeric:tabular-nums}
.tvb-q:hover,.tvb-c:hover{border-color:var(--icon-muted)}
.tvb-c{width:28px;height:36px;border:1px solid var(--border);border-radius:5px;background:var(--panel);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.tvb .tvb-menu{left:0;right:auto;top:42px;min-width:270px}
.tvb-mt{flex:1}.tvb-mk{color:var(--muted);font-size:12px}
.tvprev{position:absolute;inset:0;pointer-events:none}
.tvtag{position:absolute;height:18px;box-sizing:border-box;border:1px solid;border-radius:2px;background:var(--panel);font:11px/16px system-ui;padding-left:6px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.tvlab{position:absolute;display:flex;align-items:center;gap:6px;height:20px;font:600 11.5px system-ui;white-space:nowrap}
.tvl-send{pointer-events:auto;height:20px;border:none;border-radius:4px;background:#2962ff;color:#fff;padding:0 16px;font:inherit;cursor:pointer}
.tvl-send.sell{background:#f23645}.tvl-send:hover{filter:brightness(1.1)}.tvl-send.dis{opacity:.45;cursor:not-allowed;filter:none}
.tvl-pill{height:20px;box-sizing:border-box;border:1px dashed;border-radius:4px;background:var(--panel);padding:0 7px;line-height:18px}
.tvl-pill.tp{color:#089981;border-color:#089981}.tvl-pill.sl{color:#f7a21b;border-color:#f7a21b}
.tvl-seg{display:flex;height:20px;box-sizing:border-box;border:1px solid var(--c);border-radius:4px;background:var(--panel);color:var(--c);line-height:18px}
.tvl-seg>span{padding:0 8px;font-variant-numeric:tabular-nums}.tvl-seg>span+span{border-left:1px solid var(--c);min-width:34px;text-align:center}
.tvl-x{pointer-events:auto;background:none;border:none;border-left:1px solid var(--c);color:inherit;cursor:pointer;font:inherit;padding:0 7px}
.tvl-x:hover{background:var(--hover)}
.tvdot{position:absolute;width:8px;height:8px;border-radius:50%}
.tvrows{position:absolute;inset:0;pointer-events:none;z-index:0}.tvrows .tvdot{box-sizing:border-box;border:1.5px solid}
/* position / bracket / pending-order labels (Task 6, §4.5): qty cell filled with the side colour on the position; gross P/L green / red */
.tvl-pill.dot{border-style:dotted}
.tvrow.main{z-index:1}
.tvl-seg.fill>.q{background:var(--c);color:#fff;border-radius:3px 0 0 3px}
.tvl-seg>.m.pos{color:#089981}.tvl-seg>.m.neg{color:#f23645}.tvl-seg>.m.zero{color:var(--muted)}
/* drag TP / SL with Cancel / Confirm (Task 7, §4.6; refs 13–18): live pills, dotted changed brackets, "!" when the server would
   refuse the level, bands (hover light / drag / invalid red), connector from the dot, ghost label at the pointer, black axis box */
.tvl-pill[data-act]{pointer-events:auto;cursor:pointer}
.tvl-pill.tp.dot[data-act]{cursor:grab}.tvl-pill.tp.dot[data-act]:hover{background:rgba(8,153,129,.12)}
.tvl-pill.cancel{border:1px solid var(--border);border-style:solid;color:var(--text);padding:0 12px}.tvl-pill.cancel:hover{background:var(--hover)}
.tvl-pill.confirm{border:none;color:#fff;padding:0 12px;line-height:20px}.tvl-pill.confirm.buy{background:#2962ff}.tvl-pill.confirm.sell{background:#f23645}
.tvl-pill.confirm:hover{filter:brightness(1.1)}.tvl-pill.confirm.dis{background:var(--hover);color:var(--muted);cursor:not-allowed;filter:none}
.tvl-pill.bang{width:18px;height:18px;padding:0;border:none;border-radius:50%;background:#f23645;color:#fff;text-align:center;line-height:18px;font-weight:700}
.tvrow.dotted .tvl-seg{border-style:dotted}.tvrow.dotted .tvl-seg>span+span,.tvrow.dotted .tvl-x{border-left-style:dotted}
.tvbands,.tvconns{position:absolute;inset:0;pointer-events:none}
.tvband{position:absolute;left:0}
.tvband.tp.hover{background:rgba(8,153,129,.13)}.tvband.sl.hover{background:rgba(247,162,27,.16)}
.tvband.tp{background:rgba(8,153,129,.20)}.tvband.sl{background:rgba(247,162,27,.30)}.tvband.bad{background:rgba(242,54,69,.14)}
.tvconn{position:absolute;width:1px}
.tvghost{position:absolute;z-index:1;display:flex;align-items:center;gap:6px;height:20px;font:600 11.5px system-ui;white-space:nowrap;pointer-events:none}
.tvghost[hidden]{display:none}
.tvghost .g{display:flex;height:20px;box-sizing:border-box;border:1px dotted var(--c);border-radius:4px;background:var(--panel);color:var(--c);line-height:18px;opacity:.8}
.tvghost .g>span{padding:0 8px;font-variant-numeric:tabular-nums}.tvghost .g>span+span{border-left:1px dotted var(--c)}
.tvghost .b{display:none;width:18px;height:18px;border-radius:50%;background:#f23645;color:#fff;text-align:center;line-height:18px;font-weight:700}
.tvghost.bad .b{display:block}
.tvaxd{position:absolute;height:18px;box-sizing:border-box;border-radius:2px;background:var(--text);color:var(--panel);font:11px/18px system-ui;padding-left:6px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;z-index:2}
.tvaxd[hidden]{display:none}
.tvlay.dragging *{pointer-events:none!important}
/* inactive charts (2026-10-25_MultiChartOrders, variant B): dots and axis tags always, the label boxes only while the mouse is over that chart */
.tvlay.passive .tvrow{visibility:hidden}
.ch:hover > .tvlay.passive .tvrow{visibility:visible}
.tvt-cs{font-size:14px;line-height:1.5}.tvt-cs>div{font-weight:600}.tvt-cs>div:first-child{font-weight:400;color:var(--muted)}
.tvplus{position:absolute;z-index:1;width:18px;height:18px;border-radius:50%;border:none;background:var(--text);color:var(--panel);font:15px/18px system-ui;text-align:center;padding:0;cursor:pointer;pointer-events:auto}
.tvplus[hidden]{display:none}
.tvpm{position:absolute;z-index:1;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.25);padding:4px 0;min-width:250px;pointer-events:auto}
.tvpm[hidden]{display:none}
.tvpm-i{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;color:var(--text);padding:7px 14px 7px 10px;text-align:left;cursor:pointer;font:13px system-ui;white-space:nowrap}
.tvpm-i:hover{background:var(--hover)}.tvpm-ic{width:18px;height:18px;flex:none;display:flex;color:var(--icon)}.tvpm-ic svg{display:block;flex:none}.tvpm-i .t{flex:1}.tvpm-i .k{color:var(--muted);font-size:12px}
.tvpm-sep{height:1px;background:var(--pop-border);margin:4px 0}
#tvticket .chip-input input[type=number]{background:transparent;border:none;border-radius:0;padding:2px 0}

/* Settings dialog (TradingView style; work 2026-10-25_Settings) */
.ov .card.setcard{width:min(640px,94vw);padding:0;display:flex;flex-direction:column;background:var(--panel)}
.setcard .dlg-h{padding:14px 20px;gap:12px}.setcard .dlg-h b{font-size:18px;font-weight:600}.setcard .dlg-h .spacer{flex:1}
.setb{display:grid;grid-template-columns:190px 1fr;height:min(460px,64vh)}
.setnav{border-right:1px solid var(--border);padding:8px 0;overflow:auto}
.setnav .ni{display:flex;align-items:center;gap:12px;padding:9px 18px;font-size:14px;cursor:pointer;color:var(--text)}
.setnav .ni svg{color:var(--icon)}.setnav .ni:hover{background:var(--hover)}.setnav .ni.on{background:var(--hover);font-weight:600}
.setbody{padding:12px 24px;overflow:auto}
.setsec{font-size:11px;letter-spacing:.06em;color:var(--muted);margin:10px 0 12px}.setsec:not(:first-child){margin-top:22px}
.setitem{margin-bottom:16px}
.setck{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer}.setck input{width:18px;height:18px;margin:0}
.setck.dis{opacity:.55;cursor:not-allowed}
.setdesc{color:var(--muted);margin:4px 0 0 28px;font-size:13px}.setsel + .setdesc{margin:-4px 0 8px}   /* under a drop-down: flush left */
/* Keyboard shortcuts menu (CR 2026-10-27_KeyboardShortcuts A): search on top, list scrolls under it */
.setbody.keys{padding-top:0}.setbody.keys .setdesc{margin:12px 0 8px}
.ksearch{position:sticky;top:0;z-index:1;width:100%;margin:0;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);font:inherit;font-size:13px;box-shadow:0 -12px 0 var(--panel)}
.krow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 0;border-bottom:1px solid var(--border);font-size:13px}
.kwhen{margin-left:8px;font-size:11px;color:var(--muted);font-style:italic}.kkeys{white-space:nowrap}
.kbd{display:inline-block;min-width:20px;text-align:center;padding:0 6px;border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;background:var(--card);font:11.5px ui-monospace,Consolas,monospace;color:var(--text)}
.kplus{color:var(--muted);margin:0 3px;font-size:11px}.kor{color:var(--muted);margin:0 6px;font-size:11px}.kempty{color:var(--muted);padding:16px 0}
.setlock{margin:6px 0 0 28px;font-size:12px;color:var(--warnbanner-fg);background:var(--warnbanner-bg);border:1px solid var(--warnbanner-border);border-radius:5px;padding:4px 8px}
.setsel{display:flex;align-items:center;gap:22px;font-size:14px}
.setsel select{font:14px system-ui;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);min-width:120px}
.setcard .dlg-f{padding:12px 20px;margin-top:0;gap:10px}.setcard .dlg-f .spacer{flex:1}.setro{font-size:12px;color:var(--muted)}
.setcard .btn.pri{background:var(--text);border-color:var(--text);color:var(--panel)}
/* tooltip on TP / SL labels (tvchart.js levelTip; TradingView shows a dark box above the label) */
.tvlab[data-tip]:hover::after,.tvlab[data-tip].tipon::after{content:attr(data-tip);position:absolute;right:0;bottom:calc(100% + 8px);white-space:pre;background:#1e222d;color:#fff;font:13px/1.45 system-ui;font-weight:400;padding:8px 10px;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.35);pointer-events:none;z-index:30}
/* Replay toolbar docked under the whole chart area, left aligned (CR 2026-10-25_ReplayToolbarDock, mockup toolbar_dock.html, letak 1).
   The padding shrinks the charts (lightweight-charts autoSize follows); the toolbar itself becomes the strip. */
.charts.tbdock{padding-bottom:44px}.charts.tbdock:has(> #ro_rtb_note){padding-bottom:0}   /* read-only view: the toolbar is hidden, no empty strip */
.charts.tbdock .rtb{left:0!important;right:0;top:auto!important;bottom:0;height:44px;border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;background:var(--panel);padding:4px 8px}
.charts.tbdock .ro-badge{bottom:73px}.charts.tbdock .ro-click-toast{bottom:104px}
/* docked strip: compact text labels (CR 2026-10-26_DrawingToolbar, option A); floating toolbar stays icon-only */
.rtb .tl{display:none;font:600 12px system-ui;margin-left:5px;white-space:nowrap}
.charts.tbdock .rtb .tl{display:inline}.charts.tbdock .rtb .tlpa{display:none}.charts.tbdock .rtb .b.play.playing .tlp{display:none}.charts.tbdock .rtb .b.play.playing .tlpa{display:inline}
.charts.tbdock .rtb .b:not(.play):not(.off) svg{color:#2962ff}.charts.tbdock .rtb #tb_dock{color:var(--text)}
.charts.tbdock .rtb .b:has(.lb) .lb{margin-left:-2px}
.rtb #tb_dock{color:var(--icon-muted)}.rtb #tb_dock:hover{color:var(--icon-hover)}
.charts.tbdock.tbbig{padding-bottom:54px}.charts.tbdock.tbbig .rtb{height:54px}   /* 44 px buttons (ReplayToolbarMenus §2) */
.tbzone{position:absolute;left:0;right:0;bottom:0;height:46px;border:2px dashed #2962ff;border-radius:6px;background:rgba(41,98,255,.10);color:#2962ff;font:600 12px system-ui;display:none;align-items:center;justify-content:center;z-index:11;pointer-events:none}
.tbzone.show{display:flex}.tbzone.hot{background:rgba(41,98,255,.24)}

/* Trading panel under the charts (2026-10-26_BottomPanel): Positions / Orders / Journal / History / Stats */
.mainc{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;gap:6px}
.bpanel.maxed{position:absolute;inset:0;height:auto!important;z-index:1}      /* Maximize = the panel covers every chart; the replay toolbar (.rtb, z 12) stays above it */
.mainc:has(.bpanel.maxed) .charts > :not(.rtb){visibility:hidden}      /* charts keep their size (no resize on the way back), only hidden */
/* docked toolbar while the panel is maximized: the 44 px strip moves to the TOP of the column, the panel sits right under it */
.mainc:has(.bpanel.maxed) .charts.tbdock .rtb{top:0!important;bottom:auto;border-top:0;border-bottom:1px solid var(--border)}
.charts.tbdock + .bpanel.maxed{top:44px}
.mainc > .charts{flex:1 1 auto;min-height:0}
.bpanel{flex:none;display:flex;flex-direction:column;min-height:0;background:var(--panel);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.bpanel.collapsed{height:auto}
.bp-grab{height:5px;flex:none;cursor:ns-resize;touch-action:none}.bp-grab:hover{background:var(--sel)}
.bp-h{display:flex;align-items:center;gap:6px;padding:4px 10px;border-bottom:1px solid var(--border);flex:none;flex-wrap:wrap}
.bp-t{font-weight:700;font-size:13px;margin-right:6px}
.bp-tab{padding:3px 10px;border-radius:14px;font-size:12.5px;cursor:pointer;color:var(--muted);white-space:nowrap}.bp-tab:hover:not(.on){background:var(--hover)}
.bp-tab.on{background:var(--text);color:var(--panel)}.bp-tab b{font-weight:600;margin-left:4px}
.bp-sp{flex:1}.bp-ic{cursor:pointer;color:var(--muted);padding:2px 6px;border-radius:4px;font-size:14px}.bp-ic:hover{background:var(--hover);color:var(--text)}
.bp-sum{display:flex;gap:22px;padding:6px 12px;border-bottom:1px solid var(--border);flex:none;flex-wrap:wrap}
.bp-sum div{font-size:11.5px;color:var(--muted)}.bp-sum div b{display:block;font-size:13px;color:var(--text);font-weight:600}
.bp-sum div b.pos{color:var(--pos)}.bp-sum div b.neg{color:var(--neg)}.bp-stats{border:0}
.bp-body{overflow:auto;flex:1;min-height:0}
.bp-body table{border-collapse:collapse;width:100%;font-size:12.5px;font-variant-numeric:tabular-nums}
.bp-body th{color:var(--muted);font-weight:500;text-align:left;padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--panel)}
.bp-body td{padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
.bp-body th.r,.bp-body td.r{text-align:right}.bp-body .pos{color:var(--pos)}.bp-body .neg{color:var(--neg)}
.bp-body .buy{color:var(--acc);font-weight:600}.bp-body .sell{color:var(--neg);font-weight:600}
.bp-row{cursor:pointer}.bp-row:hover{background:var(--hover)}
.acts{white-space:nowrap}.bp-act{color:var(--muted);cursor:pointer;margin-left:8px;padding:0 3px}.bp-act:hover{color:var(--text)}
.bp-chip{font-size:11px;border:1px solid var(--border);border-radius:3px;padding:0 5px;color:var(--muted)}
.bp-empty{padding:16px;color:var(--muted);font-size:13px}.bp-link{color:var(--acc);font-weight:600;cursor:pointer}
.bp-mini{display:flex;align-items:center;gap:14px;padding:6px 10px;font-size:12.5px;cursor:pointer;color:var(--muted)}.bp-mini .bp-t{color:var(--text)}.bp-mini .bp-ic{margin-left:auto}
@media (pointer:coarse){.bp-tab{padding:6px 12px}.bp-act{padding:6px 10px}.bp-ic{padding:6px 10px}}
@media (max-width:900px){.mainc{min-height:0}}
.tvt-cr{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);font-weight:400}.tvt-cr span{flex:1}.tvt-cr b{font-variant-numeric:tabular-nums}.tvt-cr .pos{color:var(--pos)}.tvt-cr .neg{color:var(--neg)}
.bp-total td{font-weight:600;background:var(--hover)}.bp-menu{position:relative;display:inline-block}.bp-btn{border:1px solid var(--border);border-radius:5px;padding:2px 9px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text)}.bp-btn:hover{background:var(--hover)}
.bp-dd{display:none;position:absolute;right:0;top:calc(100% + 4px);background:var(--panel);border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:30;min-width:200px;padding:3px 0}.bp-menu.open .bp-dd{display:block}
.bp-dd div{display:flex;justify-content:space-between;gap:14px;padding:6px 12px;font-size:12.5px;cursor:pointer}.bp-dd div:hover{background:var(--hover)}.bp-dd div.off{opacity:.45;cursor:default}.bp-dd b{font-weight:600;color:var(--muted)}
/* eye menu (CR 2026-10-26_HideMenu) */
.hidemenu .hrow{grid-template-columns:30px 1fr auto 40px}.hidemenu .hsep{height:1px;background:var(--border);margin:4px 0}
.hidemenu .hrow[data-hall]{grid-template-columns:30px 1fr auto}
.hidemenu .hrow.dis{opacity:.5;cursor:default}.hidemenu .hrow.dis .fk{font-style:italic}
.hsw{width:34px;height:19px;border-radius:10px;background:#2962ff;position:relative;justify-self:end}.hsw:after{content:'';position:absolute;right:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#fff}
.hsw.off{background:var(--icon-muted);opacity:.55}.hsw.off:after{right:auto;left:2px}
#dtools .tb .hdot{position:absolute;right:3px;top:3px;width:8px;height:8px;border-radius:50%;background:#ff9800}
#hidebadge{position:absolute;right:64px;top:10px;z-index:35;background:#fff3e0;border:1px solid #ff9800;color:#8a4b00;border-radius:6px;padding:5px 10px;font-size:12.5px;display:flex;gap:6px;align-items:center}
#hidebadge b{background:#ff9800;color:#fff;border-radius:50%;width:16px;height:16px;display:grid;place-items:center;font-size:11px}
#hidebadge u{color:#2962ff;cursor:pointer;text-decoration:none;font-weight:600}
/* Drawing templates menu (2026-10-30_DrawingTemplates) */
.tplmenu{min-width:240px;max-height:60vh;overflow:auto}.tplmenu .msep{height:1px;background:var(--pop-border);margin:4px 0}
.tplmenu .mi.dis{opacity:.45;cursor:default}.tplmenu .mi.dis:hover{background:none}
.tplrow .tn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tplrow .tx{visibility:hidden;color:var(--muted);padding:0 4px}.tplrow:hover .tx{visibility:visible}.tplrow .tx:hover{color:var(--text)}
.tplrow .tc,.tplname .tc{color:#2962ff;font-weight:600;padding:0 6px;cursor:pointer}
.tplname{gap:6px}.tplname input{flex:1;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--pop-border);border-radius:4px;padding:4px 6px;font:inherit}
.tplname.inl{display:inline-flex;gap:6px;align-items:center}.tplname.inl input{width:150px}

/* Economic events on the charts (2026-10-30_EconomicCalendar): overlay per chart, flags M1-H4, dots D1, tooltip without Forecast */
.newsov{position:absolute;pointer-events:none;overflow:hidden;z-index:4}
.newsov .nvl{position:absolute;top:0;width:0;border-left:1px dashed;opacity:.75}
.newsov .nmk{position:absolute;pointer-events:auto;cursor:pointer;transform:translateX(-50%)}
.newsov .nmk.fut{opacity:.55}
.newsov .nmk.flash .flag,.newsov .nmk.flash .cdot{box-shadow:0 0 0 3px var(--acc)}
.newsov .flag{width:18px;height:18px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.18);display:block;flex:none}
.newsov .flag svg{width:100%;height:100%;display:block}
.newsov .dot{position:absolute;top:-3px;right:-4px;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 1.5px var(--panel)}
.newsov .cnt{position:absolute;bottom:-4px;right:-7px;min-width:12px;height:12px;padding:0 2px;border-radius:6px;background:#434651;color:#fff;font-size:9px;line-height:12px;text-align:center;box-shadow:0 0 0 1.5px var(--panel)}
.newsov .cdot{width:11px;height:11px;border-radius:50%;color:#fff;font-size:8px;line-height:11px;text-align:center;font-weight:700}
.newsov .ntip{position:absolute;z-index:6;display:none;background:var(--pop-bg);color:var(--text);border:1px solid var(--pop-border);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.35);padding:8px 10px;font-size:12px;min-width:230px;pointer-events:none}
.newsov .ntip .r{margin:4px 0}.newsov .ntip .n{font-weight:600}.newsov .ntip .v{color:var(--muted)}.newsov .ntip .v b{color:var(--text)}
.newsov .ntip .h{font-size:11px;color:var(--muted);margin-bottom:2px}.newsov .ntip .soon{color:var(--acc)}

/* News panel (work 2026-10-30_EconomicCalendar): right-rail pane, FTO-style settings popover; the mockup's colours mapped to the app tokens */
.news{position:relative;display:flex;flex-direction:column;min-height:0;flex:1}
.news .nh{display:flex;align-items:center;padding:4px 4px 8px 6px;gap:4px}.news .nh h2{font-size:17px;margin:0;flex:1;font-weight:600}
.nib{width:30px;height:30px;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--text);display:grid;place-items:center}.nib:hover,.nib.on{background:var(--hover)}.nib svg{width:19px;height:19px}
.nsrch{margin:0 4px 8px;position:relative}.nsrch input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:6px;padding:7px 30px 7px 10px;font:inherit;font-size:13px;background:var(--card);color:var(--text)}
.nsrch svg{position:absolute;right:9px;top:8px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.ntabs{display:flex;margin:0 4px 6px;background:var(--card);border-radius:6px;padding:3px}.ntabs button{flex:1;border:0;background:none;padding:5px;border-radius:5px;cursor:pointer;font:inherit;font-size:13px;color:var(--muted)}
.ntabs button.on{background:var(--hover);color:var(--text);font-weight:600}
.nlist{flex:1;overflow:auto;padding:0 2px 6px;min-height:0}
.nday{position:sticky;top:0;background:var(--panel);z-index:1;font-size:12px;font-weight:600;color:var(--muted);padding:8px 8px 4px;border-bottom:1px solid var(--border)}
.nev{display:grid;grid-template-columns:48px 1fr;gap:2px 8px;padding:8px 6px 8px 8px;border-radius:6px;margin:2px 0}.nev:hover{background:var(--hover)}.nev.hl{background:var(--sel2)}
.nev .ntm{font-size:12px;font-weight:600}.nev .nfl{display:flex;align-items:center;gap:4px;margin-top:3px}
.nev .ntop{display:flex;align-items:center;gap:6px}.nev .ncd{font-size:11px;background:var(--hover);border-radius:4px;padding:1px 6px;color:var(--muted);white-space:nowrap}.nev .ncd.soon{background:rgba(255,152,0,.18);color:#ff9800}
.nev .nsp{flex:1}.nev .ngo{width:26px;height:26px}.nev .ngo svg{width:16px;height:16px}
.nev .nnm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nev .nvals{grid-column:1/3;display:flex;gap:24px;font-size:12.5px;color:var(--muted);margin-top:2px}.nev .nvals b{color:var(--text)}
.news .flag{width:18px;height:18px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(128,128,128,.4);display:block;flex:none}.news .flag svg{width:100%;height:100%;display:block}
.news .bars{display:inline-flex;align-items:flex-end;gap:1.5px;height:12px}.news .bars i{width:3px;background:var(--border);border-radius:1px;display:block}
.nempty{color:var(--muted);font-size:13px;padding:24px 12px;text-align:center}
.nfoot{color:var(--muted);font-size:11px;padding:6px 8px 2px;text-align:center}
.npop{position:absolute;top:44px;left:0;right:0;z-index:10;background:var(--pop-bg);color:var(--text);border:1px solid var(--pop-border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.35);padding:12px 14px;display:none;max-height:calc(100% - 60px);overflow:auto}.npop.open{display:block}
.npop .nrow{display:flex;align-items:center;justify-content:space-between;margin:2px 0 12px;font-size:13px}.npop .nrow b{font-weight:500}
.npop h4{margin:0 0 6px;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text)}
.npop select{width:100%;font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--border);border-radius:6px;margin-bottom:12px;background:var(--card);color:var(--text)}
.nsw{width:36px;height:20px;border-radius:10px;background:var(--acc);position:relative;cursor:pointer;flex:none}.nsw::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff}.nsw.off{background:#6a6d78}.nsw.off::after{right:auto;left:2px}
.npri{display:flex;gap:6px;margin-bottom:14px}.npri label{flex:1;display:flex;align-items:center;gap:6px;background:var(--card);border-radius:6px;padding:7px 8px;font-size:13px;cursor:pointer}.npri i{width:8px;height:8px;border-radius:50%;display:inline-block}
.ncth{display:flex;justify-content:space-between;align-items:center;margin:4px 0 6px;font-size:13px}.ncth b{font-weight:500}.ncth a{font-size:12px;color:var(--acc);cursor:pointer}
.nopt{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:6px;padding:7px 10px;margin:4px 0;font-size:13px;cursor:pointer}.nopt small{color:var(--muted)}
.ncsrch{margin:8px 0 4px}.ncsrch input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:6px;padding:6px 10px;font:inherit;font-size:13px;background:var(--card);color:var(--text)}
.nclist{max-height:190px;overflow:auto}.nclist label{display:flex;align-items:center;gap:8px;padding:5px 4px;font-size:13px;cursor:pointer}

/* Multi pair (plan_ui Task 3, mockup multipair.html §1 / §3): pair badges, the "Select symbol" dialog, the Watchlist pane */
.pfl{position:relative;display:inline-block;width:25px;height:19px;vertical-align:middle;margin-right:6px;flex:none}
.pfl > i{position:absolute;width:14px;height:14px;border-radius:50%;overflow:hidden;font:700 7px/14px system-ui;color:#fff;text-align:center;font-style:normal;box-shadow:0 0 0 1.5px var(--panel)}
.pfl > i:first-child{left:0;top:0}.pfl > i:last-child{left:10px;top:5px}.pfl.one > i{left:3px;top:2px;width:16px;height:16px;line-height:16px}
.pfl .flag,.pfl .flag svg{display:block;width:100%;height:100%}
.ov .card.symdlg{width:min(640px,94vw);height:min(560px,80vh);padding:0;display:flex;flex-direction:column;overflow:hidden}
.symdlg .dlg-h{padding:12px 14px;gap:8px;color:var(--muted)}.symdlg .dlg-h > svg{width:18px;height:18px;flex:none}
.symdlg .dlg-h input{flex:1;width:auto;border:0;outline:0;background:none;color:var(--text);font-size:16px;padding:4px 2px}
.sym-cats{display:flex;gap:6px;padding:8px 14px;flex-wrap:wrap}
.sym-cats span{border-radius:14px;padding:3px 12px;background:var(--card);cursor:pointer;font-weight:600;font-size:12.5px}.sym-cats span:hover{background:var(--hover2)}
.sym-cats span.on{background:var(--text);color:var(--panel)}
.sym-list{flex:1;overflow:auto;min-height:0;border-top:1px solid var(--border)}
.sym-grp{display:grid;grid-template-columns:1fr 110px 110px;padding:6px 14px;background:var(--card);color:var(--muted);font-size:12px}.sym-grp span:not(:first-child){text-align:right}
.sym-it{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);cursor:pointer}.sym-it:hover{background:var(--hover)}
.sym-it.sel{background:var(--sel)}.sym-it.dis{opacity:.45;cursor:not-allowed}
.sym-nm{flex:1;min-width:0}.sym-nm b{color:var(--acc)}.sym-nm .muted{font-size:12px}
.sym-lp,.sym-lc{width:110px;text-align:right;font-variant-numeric:tabular-nums}
.sym-lc.up,.wlt td.up{color:var(--pos)}.sym-lc.dn,.wlt td.dn{color:var(--neg)}
.sym-add{color:var(--link);font-size:12px;opacity:0}.sym-it:hover .sym-add{opacity:1}
.sym-it .ck{width:18px;height:18px;border:1.5px solid var(--icon-muted);border-radius:4px;display:flex;align-items:center;justify-content:center;color:transparent;font-size:12px;flex:none}
.sym-it.sel .ck{background:var(--acc);border-color:var(--acc);color:#fff}
.sym-div{display:flex;align-items:center;gap:8px;padding:12px 14px 8px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em}
.sym-div:before,.sym-div:after{content:"";flex:1;border-top:1px solid var(--border)}
.sym-note{color:var(--muted);font-size:12.5px;padding:8px 14px}
.symdlg .dlg-f{padding:10px 14px;margin:0}
.watch{position:relative;display:flex;flex-direction:column;min-height:0;flex:1}
.wl-h{display:flex;align-items:center;padding:4px 4px 8px 6px}.wl-h h2{font-size:17px;margin:0;flex:1;font-weight:600}
.wl-add{margin:0 4px 8px;border:1px solid var(--border);border-radius:6px;padding:6px;background:none;color:var(--text);font:600 13px system-ui;cursor:pointer}.wl-add:hover{background:var(--hover)}
.wl-scroll{flex:1;overflow:auto;min-height:0}
table.wlt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:12.5px}
.wlt th{font-weight:500;color:var(--muted);text-align:right;padding:4px 6px;border-bottom:1px solid var(--border);font-size:11.5px}.wlt th:first-child{text-align:left}
.wlt td{padding:6px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}.wlt td:first-child{text-align:left;font-weight:600}
.wlt td:last-child,.wlt th:last-child{width:22px;padding:0 2px}
.wlt tr[data-s]{cursor:pointer}.wlt tr[data-s]:hover td{background:var(--hover)}.wlt tr.on td{background:var(--sel)}
.wl-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:5px;vertical-align:middle}.wl-dot.buy{background:var(--buy)}.wl-dot.sell{background:var(--sell)}.wl-dot.mix{background:var(--warn)}
.wl-more{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:4px;color:var(--muted);opacity:0}
.wlt tr:hover .wl-more,.wl-more.on{opacity:1}.wl-more:hover,.wl-more.on{background:var(--hover2);color:var(--text)}
.wl-empty{color:var(--muted);text-align:center!important;padding:18px!important;font-weight:400!important}
.wl-menu{position:absolute;z-index:10;display:none;background:var(--pop-bg);border:1px solid var(--pop-border);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.3);padding:4px 0;min-width:190px}.wl-menu.open{display:block}
.wl-mi{padding:7px 12px;cursor:pointer;font-size:13px}.wl-mi:hover{background:var(--hover)}.wl-mi.dis{color:var(--muted);cursor:not-allowed}

/* New simulation: Pairs row (multi pair) */
.pairrow{display:flex;flex-direction:column;gap:3px;font-size:12px}
.pairchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pairchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:3px 8px;font-size:12.5px;color:var(--text)}
.pairchip.main{border-color:var(--acc)}
.pairchip .x{cursor:pointer;color:var(--muted);padding:0 2px}.pairchip .x:hover{color:var(--text)}
.dashpairs{display:flex;gap:6px;align-items:center;margin:0 0 10px}