/* Nexus Charts — the TradingView dark layout: top toolbar, drawing rail on the left, watchlist/trade panel on the
   right, range bar at the bottom. Charts = TradingView Lightweight Charts (Apache-2.0, logo kept for attribution). */
:root {
  --bg: #000; --pane: #121212; --pane-2: #1c1c1c; --line: #1c1c1c; --line-2: #2a2a2a;   /* pure black (10/28) */
  --fg: #d1d4dc; --fg-2: #f0f3fa; --muted: #787b86; --blue: #2962ff; --blue-2: #1e53e5;
  --up: #089981; --down: #f23645; --gold: #ffc65e; --ember: #f97316;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #000; color: var(--fg); font: 13px/1.4 var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: var(--fg); }
svg { display: block; }
.app { display: grid; grid-template-rows: 46px minmax(0, 1fr) 32px; grid-template-columns: 52px minmax(0, 1fr) auto; height: 100vh; height: 100dvh; gap: 4px; padding: 4px; }

/* top toolbar */
.top { grid-column: 1 / -1; display: flex; align-items: center; gap: 2px; background: var(--bg); border-radius: 6px; padding: 0 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.top::-webkit-scrollbar { display: none; }
.logo { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 4px; text-decoration: none; color: var(--fg-2); font-weight: 800; letter-spacing: -.01em; flex: none; }
.logo svg { width: 18px; height: 22px; filter: drop-shadow(0 0 5px rgba(249,115,22,.55)); }
.sep { width: 1px; height: 24px; background: var(--line); margin: 0 4px; flex: none; }
.tb { height: 34px; min-width: 34px; padding: 0 9px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--fg); white-space: nowrap; flex: none; }
.tb:hover { background: var(--pane-2); }
.tb.on { color: var(--blue); }
.tb svg { width: 18px; height: 18px; }
.tb.sym { font-weight: 700; color: var(--fg-2); gap: 8px; padding-left: 6px; }
.tb.sym i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 9px/1 var(--sans); font-style: normal; color: #fff; background: linear-gradient(135deg, #2962ff, #7b61ff); }
.tb.replay.on { color: #fff; background: var(--blue); }
.tfs { display: flex; flex: none; }
.tfs .tb { min-width: 30px; padding: 0 7px; font-weight: 600; }
.grow { flex: 1; }
.tb.gold { color: #1a1206; background: linear-gradient(92deg, var(--gold), var(--ember)); font-weight: 700; }
.tb.gold:hover { filter: brightness(1.07); }
a.tb { text-decoration: none; }
.tag-sample { flex: none; font: 700 10px/1 var(--sans); letter-spacing: .08em; color: var(--gold); border: 1px solid rgba(255,198,94,.4); background: rgba(255,198,94,.08); padding: 6px 8px; border-radius: 4px; margin: 0 6px; }

/* dropdown menus */
.menu { position: fixed; z-index: 60; min-width: 190px; background: var(--pane); border: 1px solid var(--line-2); border-radius: 6px; box-shadow: 0 12px 40px rgba(0,0,0,.55); padding: 6px 0; }
.menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 14px; text-align: left; }
.menu button:hover { background: var(--pane-2); }
.menu button.on { color: var(--blue); }
.menu button svg { width: 18px; height: 18px; }
.menu .mh { padding: 8px 14px 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

/* left drawing rail */
.rail { grid-row: 2; background: var(--bg); border-radius: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail .tb { width: 40px; height: 38px; padding: 0; }
.rail .tb.on { color: var(--blue); background: rgba(41,98,255,.12); }
.rail .rsep { width: 28px; height: 1px; background: var(--line); margin: 4px 0; flex: none; }

/* chart grid */
.stage { grid-row: 2; position: relative; display: grid; gap: 4px; min-width: 0; min-height: 0; }
.stage.l1 { grid-template: 1fr / 1fr; }
.stage.l2 { grid-template: 1fr / 1fr 1fr; }
.stage.l2v { grid-template: 1fr 1fr / 1fr; }
.stage.l3 { grid-template: 1fr / 1fr 1fr 1fr; }
.stage.l4 { grid-template: 1fr 1fr / 1fr 1fr; }
.stage.l3b { grid-template: 1fr 1fr / 2fr 1fr; }
.stage.l3b > .cell.big { grid-row: span 2; }
.celltools { display: none; position: absolute; right: 74px; top: 36px; z-index: 7; gap: 2px; padding: 2px; border-radius: 6px; background: color-mix(in srgb, var(--pane) 82%, transparent); opacity: .62; transition: opacity .12s; }
body.multi .celltools { display: flex; }
.cell:hover .celltools { opacity: 1; }
.celltools button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; color: var(--ctext, #d1d4dc); }
.celltools button:hover { background: var(--pane-2); }
.celltools .grip { cursor: grab; touch-action: none; } .celltools .grip svg { fill: currentColor; stroke: none; }
.celltools .rmchart:hover { color: #ff5d6c; }
.celltools svg { width: 16px; height: 16px; }
body.chartdrag, body.chartdrag * { cursor: grabbing !important; }
.cell.dragsrc { opacity: .55; }
.cell.droptgt { outline: 2px solid var(--blue) !important; outline-offset: -2px; }
.gut { position: absolute; z-index: 11; touch-action: none; }
.gut.c { top: 0; bottom: 0; width: 10px; margin-left: -5px; cursor: col-resize; }
.gut.r { left: 0; right: 0; height: 10px; margin-top: -5px; cursor: row-resize; }
.gut::after { content: ''; position: absolute; border-radius: 2px; background: var(--blue); opacity: 0; transition: opacity .12s; }
.gut.c::after { top: 0; bottom: 0; left: 3px; width: 4px; } .gut.r::after { left: 0; right: 0; top: 3px; height: 4px; }
.gut:hover::after, .gut.on::after { opacity: 1; }
.menu .lrow { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 3px 8px 3px 14px; }
.menu .lrow button { width: 26px; height: 26px; padding: 0; justify-content: center; border-radius: 4px; } .menu .lrow button:hover { color: #ff5d6c; }
.menu .ladd { display: grid; gap: 4px; padding: 6px 14px 8px; color: var(--muted); font-size: 12px; }
.menu .ladd select { width: 100%; height: 30px; color: var(--text, #d1d4dc); background: var(--pane-2); border: 1px solid var(--line-2); border-radius: 4px; }
.cell { position: relative; background: var(--bg); border-radius: 6px; overflow: hidden; min-width: 0; min-height: 0; outline: 1px solid transparent; outline-offset: -1px; }
.stage:not(.l1) .cell.active { outline-color: var(--blue); }
.cell .ch { position: absolute; inset: 0; }
.cell canvas.gl { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.cell .lit { position: absolute; left: 0; top: 0; z-index: 2; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .22s, background-color .3s; }
.cell .lit.away { background-color: var(--dim); } .cell .lit i { transition: opacity .3s; } .cell .lit.away i { opacity: 0; }
.cell .lit.on { opacity: 1; } .cell .lit.glo { z-index: 3; mix-blend-mode: screen; }
.cell .lit i, .cell .lit canvas { position: absolute; left: 0; top: 0; display: block; will-change: transform; }
.cell canvas.tr { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; }
.cell canvas.ov { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
.legend { --fg: var(--ctext, #d1d4dc); --fg-2: var(--ctext, #f0f3fa); --muted: var(--cmuted, #787b86); --up: var(--cup, #089981); --down: var(--cdown, #f23645); position: absolute; left: 10px; top: 8px; z-index: 4; display: grid; gap: 3px; pointer-events: none; max-width: calc(100% - 90px); }
.legend .l1 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; }
.legend .l1 b { color: var(--fg-2); font-weight: 600; font-size: 14px; }
.legend .l1 .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); display: inline-block; margin-right: 2px; vertical-align: 1px; }
.legend .ohlc span { margin-right: 8px; } .legend .ohlc em { font-style: normal; color: var(--muted); margin-right: 2px; }
.legend .ind { display: flex; gap: 8px; align-items: center; pointer-events: auto; width: max-content; padding: 1px 4px; margin-left: -4px; border-radius: 3px; }
.legend .ind:hover { background: rgba(42,46,57,.85); }
.legend .ind .nm { color: var(--fg); }
.legend .ind .vals { font-variant-numeric: tabular-nums; }
.legend .ind button { opacity: 0; color: var(--muted); padding: 0 3px; font-size: 13px; line-height: 1; }
.legend .ind:hover button { opacity: 1; }
.legend .ind button:hover { color: var(--fg-2); }
.up { color: var(--up); } .down { color: var(--down); }
.hint { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 6; background: var(--blue); color: #fff; padding: 7px 12px; border-radius: 4px; font-weight: 600; pointer-events: none; white-space: nowrap; }

/* replay controls */
.rpbar { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 8px; background: var(--pane); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0,0,0,.55); white-space: nowrap; }
.rpbar .tb { height: 32px; }
.rpbar select { background: transparent; border: 0; padding: 0 6px; height: 32px; border-radius: 4px; }
.rpbar select:hover { background: var(--pane-2); }
.rpbar select option { background: var(--pane); }
.rpbar .rpt { padding: 0 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rpbar .exit { color: var(--fg); }

/* right panel */
.side { grid-row: 2; width: 300px; background: var(--bg); border-radius: 6px; display: grid; grid-template-rows: 40px minmax(0, 1fr); min-height: 0; }
.side.hide { display: none; }
.stabs { display: flex; border-bottom: 1px solid var(--line); padding: 0 6px; }
.stabs button { padding: 0 12px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; }
.stabs button.on { color: var(--fg-2); border-bottom-color: var(--blue); }
.spane { overflow-y: auto; min-height: 0; }
.wl-h, .wl-r { display: grid; grid-template-columns: minmax(0, 1fr) 84px 70px; gap: 6px; padding: 0 28px 0 12px; align-items: center; }
.wl-h { height: 30px; color: var(--muted); font-size: 11px; }
.wl-h span:not(:first-child), .wl-r span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.wl-r { height: 34px; cursor: pointer; border-left: 2px solid transparent; }
.wl-r:hover { background: var(--pane); }
.wl-r.on { background: rgba(41,98,255,.12); border-left-color: var(--blue); }
.wl-r b { font-weight: 600; color: var(--fg-2); }
.wl-r small { display: block; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-r .wl-n { display: grid; line-height: 1.15; min-width: 0; }
.wl-r { position: relative; } .wl-r span.wl-n { text-align: left; }
.wl-g { position: absolute; left: 1px; top: 0; bottom: 0; width: 11px; display: grid; place-items: center; opacity: 0; color: var(--muted); cursor: grab; touch-action: none; } .wl-g::before { content: ''; width: 6px; height: 10px; background: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 1.1px) 0 0 / 4px 4px; }
.wl-x { position: absolute; right: 5px; top: 50%; width: 20px; height: 20px; margin-top: -10px; padding: 0; border-radius: 5px; background: var(--pane-2); color: var(--muted); opacity: 0; } .wl-x:hover { background: var(--down); color: #fff; } .wl-x:focus-visible { opacity: 1; }
.wl-r:hover .wl-g { opacity: 1; } .wl-r:hover .wl-x { opacity: 1; }
.wl-r.drag { z-index: 2; background: var(--pane-2); box-shadow: 0 6px 20px rgba(0,0,0,.55); cursor: grabbing; } .wl-r.drag .wl-x { opacity: 0; }
body.wl-move, body.wl-move * { cursor: grabbing !important; user-select: none; }
.wl-x::before, .wl-x::after, .wl-add::before, .wl-add::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; border-radius: 1px; background: currentColor; }
.wl-x::before { transform: rotate(45deg); } .wl-x::after { transform: rotate(-45deg); }
.wl-add { position: relative; width: 18px; height: 18px; margin-left: 6px; padding: 0; border-radius: 5px; background: var(--pane); color: var(--fg); vertical-align: middle; } .wl-add::after { transform: rotate(90deg); } .wl-add:hover { background: var(--blue); color: #fff; }
.menu button small { margin-left: auto; font-size: 11px; color: var(--muted); }
@media (hover: none) { .wl-r { padding-left: 16px; padding-right: 30px; } .wl-g { width: 16px; opacity: 1; } .wl-x { opacity: 1; background: transparent; } }
.trade { padding: 14px; display: grid; gap: 12px; }
.trade .mode { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.trade .mode b { color: var(--gold); }
.qty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; background: var(--pane); border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.qty button { width: 36px; height: 36px; font-size: 18px; color: var(--muted); }
.qty button:hover { color: var(--fg-2); background: var(--pane-2); }
.qty input { width: 100%; text-align: center; background: transparent; border: 0; height: 36px; font-weight: 700; font-size: 15px; outline: none; }
.bs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bs button { height: 54px; border-radius: 6px; color: #fff; font-weight: 700; display: grid; align-content: center; line-height: 1.2; }
.bs button small { font-weight: 500; font-variant-numeric: tabular-nums; opacity: .9; }
.bs .sell { background: var(--down); color: var(--on-down, #fff); } .bs .buy { background: var(--blue); }
.bs button:hover { filter: brightness(1.1); }
.flat { height: 34px; border-radius: 6px; border: 1px solid var(--line-2); font-weight: 600; }
.flat:hover { background: var(--pane-2); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; padding: 12px; border-radius: 6px; background: var(--pane); font-variant-numeric: tabular-nums; }
.kv span { color: var(--muted); } .kv b { text-align: right; font-weight: 600; }
.fills { display: grid; gap: 2px; font-size: 12px; }
.fills div { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; padding: 6px 8px; border-radius: 4px; background: rgba(42,46,57,.4); font-variant-numeric: tabular-nums; }
.note { color: var(--muted); font-size: 12px; line-height: 1.5; }

/* bottom bar */
.bot { grid-column: 1 / -1; display: flex; align-items: center; gap: 2px; background: var(--bg); border-radius: 6px; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
.bot::-webkit-scrollbar { display: none; }
.bot .tb { height: 26px; min-width: 0; padding: 0 8px; font-size: 12px; font-weight: 600; }
.bot .clock { color: var(--muted); padding: 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* modal */
.modal-bg { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
.modal { width: min(560px, 100%); max-height: min(640px, 100%); display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: var(--pane); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; }
.modal header h2 { margin: 0; font-size: 18px; color: var(--fg-2); }
.modal header button { width: 32px; height: 32px; border-radius: 4px; color: var(--muted); font-size: 20px; }
.modal header button:hover { background: var(--pane-2); color: var(--fg-2); }
.modal .search { margin: 0 18px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-2); padding-bottom: 10px; }
.modal .search input { flex: 1; background: transparent; border: 0; outline: none; font-size: 16px; color: var(--fg-2); text-transform: uppercase; }
.modal .search svg { width: 18px; height: 18px; color: var(--muted); }
.mlist { overflow-y: auto; padding-bottom: 8px; }
.mrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 18px; cursor: pointer; width: 100%; text-align: left; }
.mrow:hover, .mrow.sel { background: var(--pane-2); }
.mrow i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 9px/1 var(--sans); font-style: normal; color: #fff; background: linear-gradient(135deg, #2962ff, #7b61ff); }
.mrow b { color: var(--fg-2); } .mrow small { color: var(--muted); }
.mrow .ex { color: var(--muted); font-size: 11px; }
.irow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 18px; }
.irow:hover { background: var(--pane-2); }
.irow .add { color: var(--blue); font-weight: 600; padding: 6px 10px; border-radius: 4px; }
.irow .add:hover { background: rgba(41,98,255,.15); }
.ion { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 18px; }
.ion .sw { width: 14px; height: 14px; border-radius: 3px; }
.ion input { width: 58px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px; padding: 4px 6px; text-align: right; }
.ion label { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; margin-left: 8px; }
.ion .rm { color: var(--muted); font-size: 16px; padding: 2px 6px; border-radius: 4px; }
.ion .rm:hover { color: var(--down); background: rgba(242,54,69,.12); }
.mh2 { padding: 10px 18px 6px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.toast { position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 80; background: var(--pane-2); border: 1px solid var(--line-2); color: var(--fg-2); padding: 9px 14px; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }

@media (max-width: 1100px) { .side { width: 260px; } }
@media (max-width: 1560px) { .hide-md { display: none; } }   /* the top bar keeps every button on a laptop screen */
/* Replay's bar also carries the session name and the account strip: at 1280-1680 px they pushed settings, snapshot,
   full screen, the panel button and Dashboard out of sight (the bar scrolls with no scrollbar). The side panel's Trade
   tab shows the same balance / equity, and the Rules tab the plan status, so the strip steps aside on a laptop. */
#sessName { display: inline-block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 1700px) { .top .acct { display: none; } }
@media (max-width: 1440px) { #indBtn span { display: none; } }
@media (max-width: 1366px) { .top a.tb:not(.gold) { display: none; } #sessName { max-width: 96px; } }
@media (max-width: 1180px) { .top .hide-sm { display: none !important; } }   /* the logo still goes back to the dashboard */
@media (max-width: 860px) {
  .app { grid-template-columns: 44px minmax(0, 1fr); }
  .rail .tb { width: 36px; }
  .side { position: fixed; right: 4px; top: 54px; bottom: 40px; z-index: 40; width: min(300px, calc(100% - 60px)); box-shadow: -20px 0 60px rgba(0,0,0,.6); }
  .hide-sm { display: none !important; }
}

/* ── trading: order ticket, positions, rules, stats (shared by Nexus Charts and Nexus Replay) */
.pad { padding: 12px; display: grid; gap: 10px; align-content: start; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--pane); border-radius: 6px; padding: 3px; gap: 3px; }
.seg button { height: 30px; border-radius: 4px; color: var(--muted); font-weight: 600; }
.seg button.on { background: var(--pane-2); color: var(--fg-2); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sides button { height: 52px; border-radius: 6px; border: 1px solid var(--line-2); display: grid; align-content: center; line-height: 1.25; font-weight: 700; color: var(--muted); }
.sides button small { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }
.sides .s.on { background: color-mix(in srgb, var(--down) 15%, transparent); border-color: var(--down); color: var(--down); }
.sides .b.on { background: rgba(41,98,255,.15); border-color: var(--blue); color: #5b8bff; }
.fld { display: grid; gap: 5px; }
.fld > span { color: var(--muted); font-size: 11px; display: flex; justify-content: space-between; }
.fld input, .fld select, .inp { width: 100%; height: 34px; background: var(--pane); border: 1px solid var(--line-2); border-radius: 6px; padding: 0 10px; outline: none; font-variant-numeric: tabular-nums; }
.fld input:focus, .fld select:focus, .inp:focus { border-color: var(--blue); }
.fld select option { background: var(--pane); }
.br { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.br label { display: flex; gap: 6px; align-items: center; min-width: 74px; font-weight: 600; }
.br input[type=checkbox] { accent-color: var(--blue); width: 15px; height: 15px; }
.br .px { color: var(--muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.go { height: 44px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 14px; }
.go.buy { background: var(--blue); } .go.sell { background: var(--down); color: var(--on-down, #fff); }
.go:hover { filter: brightness(1.1); } .go[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
.riskline { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.plist { display: grid; gap: 4px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px 10px; border-radius: 6px; background: var(--pane); font-variant-numeric: tabular-nums; font-size: 12px; }
.prow b { font-size: 13px; } .prow small { color: var(--muted); grid-column: 1 / -1; }
.prow .x { color: var(--muted); padding: 2px 8px; border-radius: 4px; border: 1px solid var(--line-2); font-size: 12px; }
.prow .x:hover { color: var(--fg-2); background: var(--pane-2); }
.sub-h { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-top: 6px; display: flex; justify-content: space-between; }
.empty { color: var(--muted); font-size: 12px; padding: 8px 2px; }
.pill { display: inline-block; font: 700 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border-radius: 4px; }
.pill.ok { color: var(--up); background: rgba(8,153,129,.15); } .pill.bad { color: var(--down); background: rgba(242,54,69,.15); }
.pill.run { color: var(--gold); background: rgba(255,198,94,.12); } .pill.off { color: var(--muted); background: var(--pane-2); }
.meter { display: grid; gap: 5px; padding: 10px; border-radius: 6px; background: var(--pane); }
.meter .mt { display: flex; justify-content: space-between; font-size: 12px; } .meter .mt span { color: var(--muted); } .meter .mt b { font-variant-numeric: tabular-nums; }
.meter .bar { height: 6px; border-radius: 3px; background: var(--pane-2); overflow: hidden; }
.meter .bar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.meter small { color: var(--muted); font-size: 11px; }
.stgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stgrid div { padding: 9px 10px; border-radius: 6px; background: var(--pane); display: grid; gap: 2px; }
.stgrid span { color: var(--muted); font-size: 11px; } .stgrid b { font-size: 15px; font-variant-numeric: tabular-nums; }
.curve { width: 100%; height: 120px; border-radius: 6px; background: var(--pane); display: block; }
.banner { padding: 10px 12px; border-radius: 6px; font-weight: 600; font-size: 12px; line-height: 1.45; }
.banner.bad { background: rgba(242,54,69,.14); color: #ff8a93; } .banner.ok { background: rgba(8,153,129,.15); color: #3fd1b4; } .banner.run { background: rgba(255,198,94,.1); color: var(--gold); }
.acct { display: flex; gap: 14px; align-items: center; padding: 0 10px; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.acct div { display: grid; line-height: 1.15; } .acct span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; } .acct b { font-size: 13px; }
.tfmore { min-width: 22px !important; padding: 0 4px !important; color: var(--muted); }

/* sessions (Nexus Replay) */
.sess-bg { position: fixed; inset: 0; z-index: 65; background: #0b0e14; overflow-y: auto; }
.sess { max-width: 1040px; margin: 0 auto; padding: 28px 16px 60px; display: grid; gap: 22px; }
.sess-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sess-top h1 { margin: 0; font-size: 26px; color: var(--fg-2); letter-spacing: -.02em; }
.sess-top p { margin: 4px 0 0; color: var(--muted); }
.sess-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.scard { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: grid; gap: 10px; }
.scard h3 { margin: 0; font-size: 16px; color: var(--fg-2); }
.scard .meta { color: var(--muted); font-size: 12px; }
.scard .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-variant-numeric: tabular-nums; }
.scard .nums div { display: grid; } .scard .nums span { color: var(--muted); font-size: 10px; text-transform: uppercase; } .scard .nums b { font-size: 14px; }
.scard .acts { display: flex; gap: 8px; }
.btn2 { height: 36px; padding: 0 14px; border-radius: 6px; font-weight: 600; border: 1px solid var(--line-2); }
.btn2:hover { background: var(--pane-2); }
.btn2.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn2.primary:hover { background: var(--blue-2); }
.btn2.danger { color: var(--down); }
.newform { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 18px; display: grid; gap: 14px; }
.newform h2 { margin: 0; font-size: 18px; color: var(--fg-2); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.plan { text-align: left; padding: 12px; border-radius: 6px; border: 1px solid var(--line-2); display: grid; gap: 3px; }
.plan b { color: var(--fg-2); } .plan small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.plan.on { border-color: var(--blue); background: rgba(41,98,255,.1); }
.rulebox { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px; border-radius: 6px; background: var(--pane); }
.side { overflow: hidden; }
.stabs { overflow-x: auto; scrollbar-width: none; gap: 0; }
.stabs::-webkit-scrollbar { display: none; }
.stabs button { padding: 0 9px; font-size: 12.5px; white-space: nowrap; flex: none; }
a.btn2 { color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; }
/* Nexus Charts live data (Data Bridge): the tag turns green, and its help card */
.tag-sample.live { color: #4ade80; border-color: rgba(74,222,128,.45); background: rgba(74,222,128,.08); }
.lhelp-bg { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(0,0,0,.6); padding: 16px; }
.lhelp { max-width: 520px; background: #131722; border: 1px solid #2a2e39; border-radius: 10px; padding: 20px 22px; color: #d1d4dc; font: 14px/1.6 Inter, sans-serif; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lhelp h3 { margin: 0 0 10px; font-size: 17px; } .lhelp ol { margin: 0; padding-left: 18px; } .lhelp p { color: #9598a1; font-size: 13px; margin: 12px 0 0; } .lhelp .r { text-align: right; margin-top: 14px; }

/* ── are these real prices? the status light on the chart bar (Live / Delayed / Demo prices), the banner across a chart
   that isn't on current prices, the once-per-session order check and the "Connect live prices" guide */
.ltag { --c: #ff6b6b; --b: rgba(242,54,69,.55); --g: rgba(242,54,69,.12); flex: none; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; margin: 0 6px; border-radius: 14px; border: 1px solid var(--b); background: var(--g); color: var(--c); font: 700 12px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; cursor: pointer; }
.ltag:hover { filter: brightness(1.15); }
.ltag .ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--g); flex: none; }
.ltag.live { --c: #4ade80; --b: rgba(74,222,128,.5); --g: rgba(74,222,128,.12); }
.ltag.live .ldot { animation: ltpulse 2.4s ease-in-out infinite; }
.ltag.delayed { --c: #fbbf24; --b: rgba(251,191,36,.55); --g: rgba(251,191,36,.12); }
.ltag.busy .ldot { animation: ltblink 1s ease-in-out infinite; }
.lightui .ltag { --c: #c81e2a; } .lightui .ltag.live { --c: #15803d; } .lightui .ltag.delayed { --c: #b45309; }
@keyframes ltpulse { 50% { box-shadow: 0 0 0 5px var(--g); } }
@keyframes ltblink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ltag .ldot { animation: none !important; } }
/* the chart bar on a laptop (861-1280 px overflowed by up to 148 px): the light says "Demo" / "Live" / "8s late", Bar
   replay keeps its icon, and below 940 px undo / redo step aside (Ctrl+Z / Ctrl+Y still work). On a phone the light
   sits right after the logo so it's always on screen. */
.ltag .lt-s { display: none; }
@media (max-width: 1280px) { .top .ltag .lt-t { display: none; } .top .ltag .lt-s { display: inline; } #replayBtn span { display: none; } }
@media (max-width: 940px) { #undoBtn, #redoBtn { display: none; } }
@media (max-width: 860px) { .top .logo { order: -2; } .top .ltag { order: -1; margin: 0 4px; padding: 0 9px 0 8px; } }
.pxbar { position: absolute; z-index: 6; top: 6px; left: 8px; right: 72px; min-height: 28px; display: flex; align-items: center; gap: 8px; padding: 3px 4px 3px 11px; border-radius: 6px; border: 1px solid rgba(242,54,69,.6); background: rgba(60,8,14,.82); color: #ffd0d4; font: 500 12.5px/1.25 var(--sans); box-shadow: 0 6px 20px rgba(0,0,0,.35); backdrop-filter: blur(4px); pointer-events: auto; }
.pxbar[hidden] { display: none; }
.pxbar b { flex: none; color: #ff8a93; font-weight: 800; letter-spacing: .02em; }
.pxbar b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; }
.pxbar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.pxbar span::before { content: "· "; }
.pxbar button { flex: none; margin-left: auto; height: 22px; padding: 0 9px; border-radius: 4px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; font: 700 11.5px/1 var(--sans); white-space: nowrap; }
.pxbar button:hover { background: rgba(255,255,255,.18); }
.pxbar.delayed { border-color: rgba(251,191,36,.65); background: rgba(56,38,4,.84); color: #fde7b0; } .pxbar.delayed b { color: #fbbf24; }
.cell.pxwarn > .legend, .cell.pxwarn > .flatchip { top: 42px; }
@media (max-width: 860px) { .pxbar { right: 78px; left: 6px; } .pxbar span { display: none; } }
@media (max-width: 560px) { .acm-tabs { padding-right: 30px; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); } .acm-stats { overflow-x: auto; scrollbar-width: none; } .ntk-f, .ntk-f select { min-width: 0; max-width: 100%; } .ntk-t { min-width: 560px; } .acm-b { overflow-x: auto; } }
.tguard .mbtns { flex-wrap: wrap; align-items: center; } .tguard .mbtns .grow { flex: 1; } .tguard .note { margin: 0; }
.stlive { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wl-cg { color: #5b8bff; white-space: nowrap; }
.modal.cgm { width: min(880px, 100%); max-height: min(900px, 100%); grid-template-rows: auto minmax(0, 1fr); }
.cg { overflow-y: auto; padding: 0 18px 18px; display: grid; gap: 14px; align-content: start; }
.cg-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg); }
.cg-now .ltag { cursor: default; margin: 0; } .cg-now .ltag:hover { filter: none; }
.cg-say { flex: 1; min-width: 180px; color: var(--fg); line-height: 1.45; }
.cg-now .btn2 { height: 30px; }
.cg-vid { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--line-2); }
.cg-vid iframe, .cg-vid video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cg-vid.soon { display: grid; place-content: center; justify-items: center; gap: 9px; text-align: center; padding: 18px; background: radial-gradient(ellipse at 50% 38%, rgba(255,198,94,.16), transparent 62%), linear-gradient(160deg, #12141c, #050608); }
.cg-play { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: #1a1206; background: linear-gradient(135deg, var(--gold), var(--ember)); box-shadow: 0 0 0 9px rgba(255,198,94,.1), 0 0 0 20px rgba(255,198,94,.04), 0 14px 40px -10px rgba(249,115,22,.8); opacity: .9; }
.cg-play svg { width: 26px; height: 26px; margin-left: 3px; }
.cg-vid.soon b { color: #f0f3fa; font-size: 15px; } .cg-vid.soon small { color: #9598a1; max-width: 380px; line-height: 1.45; }
.cg-paths { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.cg-p { border: 1px solid var(--line-2); border-radius: 8px; padding: 14px 16px; background: var(--bg); }
.cg-p h3 { margin: 0 0 10px; font-size: 14px; color: var(--fg-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cg-p h3 em { font: 800 10px/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 5px 7px; border-radius: 4px; color: #fff; background: var(--blue); }
.cg-p + .cg-p h3 em { background: #089981; }
.cg-p ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--fg); line-height: 1.5; }
.cg b { color: var(--fg-2); } .cg a { color: #5b8bff; }
.cg-fix h3 { margin: 0 0 8px; font-size: 14px; color: var(--fg-2); }
.cg-fix ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--fg); line-height: 1.5; }
.cg-fix p { margin: 6px 0 0; line-height: 1.5; color: var(--fg); } .cg-fix p.note { color: var(--muted); }
@media (max-width: 720px) { .cg-paths { grid-template-columns: minmax(0, 1fr); } .cg { padding: 0 14px 14px; } }
.wl-sample { font: 600 9px/1 Inter, sans-serif; letter-spacing: .06em; color: #9598a1; border: 1px solid #2a2e39; border-radius: 3px; padding: 2px 4px; margin-left: 4px; font-style: normal; vertical-align: 1px; }

/* chart skins (assets/skins.js): the picture sits behind the cells; the cells and the chart go see-through */
.skin-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: 6px; }
.skin-art { position: absolute; inset: 0; }
.skin-art canvas, .skin-art img, .skin-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.skin-dim { position: absolute; inset: 0; background: #000; }
.stage.skinned .cell { background: transparent; }   /* no z-index here: the glow has to blend with the picture behind it */
.modal.wide { width: min(820px, 100%); max-height: min(760px, 100%); }
.skpad { overflow: auto; }
.skgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-items: start; }
.skcard { position: relative; display: grid; gap: 6px; padding: 6px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--pane-2); color: var(--fg); text-align: left; cursor: pointer; font-size: 12px; }
.skcard:hover { border-color: #3a3a3a; } .skcard.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.skcard canvas, .skcard img, .skcard video, .skcard .skoff, .skcard .skplus { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: 6px; object-fit: cover; background: #000; display: grid; place-items: center; }
.skcard .skoff { color: var(--muted); font-size: 11px; border: 1px dashed var(--line-2); background: #000; }
.skcard .skplus { font-size: 30px; color: var(--gold); border: 1px dashed rgba(255,198,94,.5); background: rgba(255,198,94,.04); }
.skcard { min-width: 0; } .skcard > span:not([class]) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skdel { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: rgba(0,0,0,.75); color: #fff; font-size: 15px; }
.skctl { display: grid; gap: 10px; }
.skslide { display: grid; grid-template-columns: 90px 1fr 60px; gap: 12px; align-items: center; color: var(--muted); }
.skslide input[type=range] { width: 100%; accent-color: var(--gold); } .skslide b { color: var(--fg-2); font-weight: 600; text-align: right; }
.skslide .seg { grid-column: 2 / 4; }

/* photo backgrounds drift very slowly (skins.js) */
.skin-art img.skin-drift { animation: skindrift 60s ease-in-out infinite alternate; transform-origin: 40% 50%; }
@keyframes skindrift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2.5%, -1.5%); } }
/* "Make it sharper?" for small background uploads (skins.js offerUpscale) */
.nxup { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.6); display: grid; place-items: center; padding: 16px; }
.nxup-in { width: min(440px, 100%); background: #121214; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 20px; display: grid; gap: 12px; color: #ececf0; font: 14px/1.5 Inter, system-ui, sans-serif; box-shadow: 0 30px 80px -20px #000; }
.nxup-in b { font-size: 1.1rem; } .nxup-in p { margin: 0; color: #a0a0aa; } .nxup-note { font: 600 .82rem/1.4 'JetBrains Mono', monospace; }
.nxup-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; } .nxup-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffc65e, #f97316); transition: width .2s; }
.nxup-row { display: flex; gap: 10px; flex-wrap: wrap; } .nxup-row button { flex: 1; border-radius: 999px; padding: 11px 14px; font: 700 .9rem/1 Inter, system-ui, sans-serif; cursor: pointer; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #ececf0; }
.nxup-row .nxup-go { border: 0; color: #1a1206; background: linear-gradient(92deg, #ffc65e, #f97316); } .nxup-row button:disabled { opacity: .5; cursor: default; }
/* ── 10/28 TradingView parity: undo, drawing styles, chart alerts, sync, intervals, sessions, panes, money */
.menu { z-index: 75; }   /* above dialogs: colour popovers open from the indicator / style dialogs */
.tb[disabled] { opacity: .35; cursor: default; background: none; }
.menu .msep { height: 1px; background: var(--line-2); margin: 5px 0; }
.menu button.danger { color: var(--down); }
.menu button.buy svg { color: #5b8bff; } .menu button.sell svg { color: var(--down); }
.menu .mchk { width: 16px; color: var(--blue); font-weight: 700; }
.menu .mlw { display: inline-block; width: 26px; background: currentColor; border-radius: 2px; }
.menu .sw-row { justify-content: space-between; }
.tgl { width: 28px; height: 16px; border-radius: 8px; background: var(--line-2); position: relative; flex: none; transition: background .15s; }
.tgl::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.tgl.on { background: var(--blue); } .tgl.on::after { left: 14px; }
/* colour palette popover */
.menu.cmenu { padding: 10px; min-width: 0; }
.cpal { display: grid; grid-template-columns: repeat(10, 20px); gap: 4px; }
.menu .cpal button, .cpal button { width: 20px; height: 20px; padding: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); display: block; }
.cpal button:hover { transform: scale(1.15); }
.cpal button.on { outline: 2px solid var(--blue); outline-offset: 1px; }
.ccust { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); font-size: 12px; cursor: pointer; }
.ccust input { width: 26px; height: 22px; padding: 0; border: 1px solid var(--line-2); border-radius: 4px; background: none; cursor: pointer; }
.cfill { display: grid; grid-template-columns: auto 1fr 36px; gap: 8px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 12px; }
.cfill input { accent-color: var(--blue); } .cfill b { color: var(--fg-2); text-align: right; font-weight: 600; }
/* the selected drawing's floating toolbar */
.dtb { position: absolute; z-index: 8; display: flex; align-items: center; gap: 1px; padding: 3px; background: var(--pane); border: 1px solid var(--line-2); border-radius: 7px; box-shadow: 0 8px 26px rgba(0,0,0,.55); white-space: nowrap; }
.dtb[hidden] { display: none; }
.dtb button { height: 30px; min-width: 30px; padding: 0 6px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--fg); position: relative; font-size: 12px; }
.dtb button:hover { background: var(--pane-2); } .dtb button.on { color: var(--blue); }
.dtb svg { width: 17px; height: 17px; }
.dtb-n { color: var(--muted); font-size: 11px; padding: 0 6px 0 5px; text-transform: uppercase; letter-spacing: .05em; }
.dtb-sw { position: absolute; left: 7px; right: 7px; bottom: 3px; height: 3px; border-radius: 2px; }
.dtb-lw { display: inline-block; width: 16px; background: currentColor; border-radius: 2px; }
.dtb-sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 3px; }
/* "+" on the price scale at the crosshair */
.addalert { position: absolute; left: 0; top: 0; z-index: 7; width: 18px; height: 18px; border-radius: 4px; place-items: center; background: var(--pane-2); border: 1px solid var(--line-2); color: var(--fg-2); font: 600 15px/1 var(--sans); padding: 0 0 1px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.addalert:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
/* one-click flatten on the chart */
.flatchip { position: absolute; right: 74px; top: 8px; z-index: 6; height: 24px; padding: 0 10px; border-radius: 4px; background: color-mix(in srgb, var(--cdown, #f23645) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cdown, #f23645) 55%, transparent); color: color-mix(in srgb, var(--cdown, #f23645) 55%, #fff); font: 700 11px/1 var(--sans); letter-spacing: .04em; }
.flatchip:hover { background: var(--down); color: var(--on-down, #fff); }
.flatchip[hidden] { display: none; }
/* sub-pane legends sit inside their own pane */
.plegs { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.legend.plegend { top: 0; }
.legend.plegend .ind button[data-pmax], .legend.plegend .ind button[data-pcol] { font-size: 11px; }
/* interval menu: rows with a pin star, a box for your own interval */
.tfrow { display: flex; align-items: center; } .tfrow button[data-v] { flex: 1; }
.menu .tfrow .star { width: 34px; flex: none; justify-content: center; padding: 8px 0; color: var(--muted); }
.menu .tfrow .star.on { color: var(--gold); }
.tfadd { display: flex; gap: 6px; padding: 6px 10px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 2px; }
.tfadd input { flex: 1; min-width: 0; height: 30px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 8px; outline: none; }
.tfadd input:focus { border-color: var(--blue); }
.menu .tfadd button { width: auto; padding: 0 10px; border-radius: 4px; background: var(--blue); color: #fff; font-weight: 600; }
.tfbox { position: fixed; left: 50%; top: 34%; transform: translateX(-50%); z-index: 72; width: 220px; padding: 14px 16px 12px; background: var(--pane); border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.6); display: grid; gap: 8px; }
.tfbox > span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.tfbox input { height: 40px; background: var(--bg); border: 1px solid var(--blue); border-radius: 6px; padding: 0 12px; font-size: 20px; font-weight: 700; color: var(--fg-2); outline: none; text-align: center; }
.tfbox small { color: var(--fg); font-size: 12px; text-align: center; } .tfbox small.bad { color: var(--down); }
.bot .sess { font-weight: 700; letter-spacing: .04em; } .bot .clock { cursor: pointer; font-weight: 500; }
/* indicator dialog: swatch, style panel */
.ion { grid-template-columns: 14px minmax(0, 1fr) auto auto auto; }
.ion button.sw { padding: 0; border: 1px solid rgba(255,255,255,.18); cursor: pointer; } .ion button.sw:hover { outline: 2px solid var(--blue); outline-offset: 1px; }
.ion .sw.vol { background: linear-gradient(90deg, var(--up) 50%, var(--down) 50%); opacity: .7; }
.ion .sty { color: var(--muted); padding: 3px 5px; border-radius: 4px; } .ion .sty svg { width: 16px; height: 16px; } .ion .sty:hover, .ion.open .sty { color: var(--blue); background: rgba(41,98,255,.12); }
.ion.open { background: rgba(255,255,255,.02); }
.ist { grid-column: 1 / -1; display: grid; gap: 6px; padding: 8px 10px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); }
.isrc { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; }
.ist select, .isrc select { height: 26px; background: var(--pane); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 6px; }
.iplot { display: grid; grid-template-columns: minmax(0, 1fr) 22px 74px; gap: 10px; align-items: center; }
.iplot label { display: flex; gap: 8px; align-items: center; color: var(--fg); font-size: 12px; margin: 0; }
.iplot input[type=checkbox] { accent-color: var(--blue); }
.iplot .sw { width: 22px; height: 18px; border-radius: 4px; }
.iplot.ilbl { grid-template-columns: minmax(0, 1fr); margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--line-2); }
.irow .pn { color: var(--muted); font-size: 10px; border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 4px; margin-left: 4px; }
/* drawing style dialog */
.dstyle { overflow: auto; } .cpal.in { grid-template-columns: repeat(10, minmax(0, 24px)); gap: 5px; } .cpal.in button { width: 24px; height: 24px; }
.checks { display: flex; gap: 18px; } .checks label { display: flex; gap: 6px; align-items: center; }
.dstyle input[type=range] { accent-color: var(--blue); padding: 0; height: 24px; border: 0; background: none; }
.fibl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.fibr { display: grid; grid-template-columns: 18px minmax(0, 1fr) 28px; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 6px; background: var(--bg); }
.fibr input[type=number] { height: 26px; background: transparent; border: 1px solid var(--line-2); border-radius: 4px; padding: 0 6px; width: 100%; }
.fibr input[type=color] { width: 28px; height: 22px; padding: 0; border: 1px solid var(--line-2); border-radius: 4px; background: none; }
.fibr input[type=checkbox] { accent-color: var(--blue); }
/* money: account summary, ticket preview, positions */
.acsum { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); background: var(--pane); }
.acsum div { padding: 7px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; border-bottom: 1px solid var(--line); }   /* label above its number: nothing gets cut */
.acsum div:nth-child(odd) { border-right: 1px solid var(--line); }
.acsum div:nth-child(n+3) { border-bottom: 0; }
.acsum span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.acsum b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg-2); }
.acsum b.up { color: var(--up); } .acsum b.down { color: var(--down); }
.rsz { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 4px 0 10px; border-radius: 6px; border: 1px dashed var(--line-2); }
.rsz.on { border-style: solid; border-color: rgba(41,98,255,.55); background: rgba(41,98,255,.07); }
.rsz-t { display: flex; gap: 8px; align-items: center; font-weight: 600; cursor: pointer; } .rsz-t input { accent-color: var(--blue); width: 15px; height: 15px; }
.rsz em { font-style: normal; color: var(--muted); font-size: 11px; padding-right: 6px; }
.rsz-in { display: flex; align-items: center; height: 28px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line-2); padding-left: 8px; }
.rsz-in span { color: var(--muted); font-weight: 700; } .rsz-in input { width: 84px; height: 26px; background: transparent; border: 0; outline: none; padding: 0 8px 0 4px; font-weight: 700; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.qty.auto { border-color: rgba(41,98,255,.55); } .qty.auto input { color: #5b8bff; } .qty button[disabled] { opacity: .3; cursor: default; }
.tkprev { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tkprev div { padding: 8px 10px; border-radius: 6px; background: var(--pane); display: grid; gap: 1px; }
.tkprev span { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.tkprev b { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--fg-2); } .tkprev b.up { color: var(--up); } .tkprev b.down { color: var(--down); }
.tkprev small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.flatbtn { height: 34px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--down) 50%, transparent); color: color-mix(in srgb, var(--down) 55%, #fff); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.flatbtn svg { width: 14px; height: 14px; } .flatbtn:hover:not([disabled]) { background: var(--down); color: var(--on-down, #fff); border-color: var(--down); }
.flatbtn[disabled] { opacity: .35; cursor: default; border-color: var(--line-2); color: var(--muted); }
.prow.pos { grid-template-columns: minmax(0, 1fr) auto; border-left: 3px solid var(--blue); }
.prow.pos.short { border-left-color: var(--down); }
.prow.pos .pl, .prow.pos .pr { display: grid; gap: 2px; min-width: 0; } .prow.pos .pr { text-align: right; }
.prow.pos .pl small, .prow.pos .pr small { grid-column: auto; font-size: 11px; }
.prow.pos .pr b { font-size: 15px; } .prow.pos .pr small.up { color: var(--up); } .prow.pos .pr small.down { color: var(--down); }
.prow .pbr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; white-space: nowrap; font-size: 11px; padding-top: 5px; border-top: 1px solid var(--line-2); }
.prow .pbr span { display: grid; gap: 1px; } .prow .pbr span + span { border-left: 1px solid var(--line-2); padding-left: 8px; }
.prow .pbr b { font-size: 11px; font-weight: 700; }
.prow .pcl { grid-column: 1 / -1; justify-self: stretch; height: 26px; margin-top: 2px; }
.prow .pcl:hover { color: var(--on-down, #fff); background: var(--down); border-color: var(--down); }
.modal.narrow { width: min(420px, 100%); }
.flq { margin: 0; line-height: 1.55; } .flq b { color: var(--fg-2); }
.flpnl { display: flex; justify-content: space-between; padding: 10px 12px; border-radius: 6px; background: var(--bg); } .flpnl span { color: var(--muted); } .flpnl b { font-size: 15px; font-variant-numeric: tabular-nums; }
.mbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.btn2.flatgo { background: var(--down); border-color: var(--down); color: var(--on-down, #fff); } .btn2.flatgo:hover { filter: brightness(1.1); background: var(--down); }
.rail .tb { height: 32px; }   /* 21 tools fit a laptop-height rail */
/* "Match colours" switch in the background gallery */
.skmatch { grid-template-columns: 90px 22px 1fr; } .skmatch input { width: 18px; height: 18px; accent-color: var(--ember); justify-self: start; } .skmatch b { font-weight: 500; color: var(--muted); font-size: 12px; }
/* Nexus Paper header on the Order tab */
.ppr-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--pane); }
.ppr-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ppr-n b { color: var(--fg-2); font-size: 13.5px; }
.ppr-n small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppr-h .x { flex: none; }

/* one-click trading under each chart's legend (TradingView style): SELL at the price · quantity · BUY at the price */
.qtr { display: flex; gap: 3px; pointer-events: auto; width: max-content; margin: 3px 0 2px; }
.qtr button { min-width: 82px; height: 36px; padding: 0 8px; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.12; color: #fff; }
.qtr .qs { background: color-mix(in srgb, var(--cdown, #f23645) 92%, transparent); color: var(--on-cdown, #fff); } .qtr .qb { background: rgba(41,98,255,.94); }
.qtr button:hover { filter: brightness(1.12); }
.qtr b { font: 700 12.5px/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.qtr small { font: 700 9px/1 var(--sans); letter-spacing: .08em; opacity: .85; margin-top: 2px; }
.qtr .qq { width: 46px; height: 36px; text-align: center; background: rgba(19,23,34,.92); border: 1px solid var(--line-2); border-radius: 4px; color: #f0f3fa; font: 700 13px var(--sans); outline: none; -moz-appearance: textfield; appearance: textfield; }
.qtr .qq::-webkit-outer-spin-button, .qtr .qq::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtr .qq:focus { border-color: var(--blue); }

/* the account panel under the charts (TradingView's paper-trading panel): Nexus Paper or a NinjaTrader account */
.app:has(> #acm) { grid-template-rows: 46px minmax(0, 1fr) auto 32px; }
.app:has(> #acm) > .side, .app:has(> #acm) > .rail { grid-row: 2 / 4; }   /* the drawing tools keep their full height (TradingView) */
.app:has(> #acm) > .bot { grid-row: 4; }
.acm { grid-row: 3; grid-column: 2 / 3; position: relative; background: var(--bg); border-radius: 6px; display: grid; grid-template-rows: 46px 38px minmax(0, 1fr); min-height: 0; min-width: 0; overflow: hidden; }
.acm.min { grid-template-rows: 46px; height: auto !important; }
.acm:empty { display: none; }
.acm-grip { position: absolute; left: 0; right: 0; top: 0; height: 6px; cursor: ns-resize; z-index: 2; }
body.acm-drag { cursor: ns-resize; user-select: none; } body.acm-drag .cell, body.acm-drag #spane { pointer-events: none; } body.acm-drag .cell canvas.gl { opacity: 0; }
.acm-grip:hover { background: linear-gradient(var(--blue), transparent); opacity: .5; }
.acm.min .acm-grip { display: none; }
.acm-h { display: flex; align-items: center; gap: 18px; padding: 0 8px; border-bottom: 1px solid var(--line); min-width: 0; }
.acm.min .acm-h { border-bottom: 0; }
.acm-acc { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 6px; border-radius: 7px; background: var(--pane); border: 1px solid var(--line-2); flex: none; color: var(--fg-2); max-width: 300px; }
.acm-acc:hover { border-color: var(--blue); }
.acm-acc b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acm-acc span { font-variant-numeric: tabular-nums; color: var(--fg); white-space: nowrap; }
.acm-acc svg { color: var(--muted); flex: none; }
.acm-ico { width: 20px; height: 20px; border-radius: 5px; display: inline-grid; place-items: center; font: 800 9.5px/1 var(--sans); font-style: normal; color: #1a1206; background: linear-gradient(135deg, var(--gold), var(--ember, #f97316)); flex: none; }
.acm-ico.nt { background: #2a2e39; color: #d1d4dc; } .acm-ico.rp { background: #2962ff; color: #fff; font-size: 8px; }
.acm-stats { display: flex; align-items: center; gap: 24px; min-width: 0; overflow: hidden; white-space: nowrap; }
.acm-s { display: flex; gap: 7px; align-items: baseline; font-size: 12.5px; }
.acm-s em { font-style: normal; color: var(--muted); }
.acm-s b { font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.acm-s b.up { color: var(--up); } .acm-s b.down { color: var(--down); }
.acm-s small { color: var(--muted); font-weight: 500; }
.acm-ro { font: 700 9.5px/1 var(--sans); letter-spacing: .09em; color: var(--gold); border: 1px solid rgba(255,198,94,.4); border-radius: 4px; padding: 4px 6px; }
.acm-note { color: var(--muted); font-size: 12.5px; }
.acm-ib { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); flex: none; }
.acm-ib:hover { background: var(--pane-2); color: var(--fg-2); }
.acm-ib svg { width: 16px; height: 16px; }
.acm-tabs { display: flex; align-items: center; gap: 6px; padding: 0 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.acm-tabs::-webkit-scrollbar { display: none; }
.acm-tabs button { height: 27px; padding: 0 12px; border-radius: 14px; background: var(--pane); color: var(--fg); font-weight: 600; font-size: 12.5px; white-space: nowrap; flex: none; }
.acm-tabs button:hover { background: var(--pane-2); }
.acm-tabs button.on { background: var(--fg-2); color: var(--bg); }
.acm-tabs button i { font-style: normal; opacity: .6; margin-left: 2px; }
.acm-flat { margin-left: auto; height: 27px; padding: 0 13px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--down) 50%, transparent); color: color-mix(in srgb, var(--down) 55%, #fff); font-weight: 700; font-size: 12px; flex: none; }
.acm-flat:hover { background: var(--down); border-color: var(--down); color: var(--on-down, #fff); }
.acm-b { overflow: auto; min-height: 0; padding: 0 8px 6px; }
.acm-t { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.acm-t th { text-align: left; color: var(--muted); font-weight: 500; padding: 8px 10px; position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 1; }
.acm-t td { padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--fg); }
.acm-t tr:hover td { background: rgba(255,255,255,.025); }
.acm-t .r { text-align: right; }
.acm-t td.buy { color: #5b8bff; font-weight: 600; } .acm-t td.sell { color: var(--down); font-weight: 600; }
.acm-t td.up, .acm-t td.up b, .acm-t small.up { color: var(--up); } .acm-t td.down, .acm-t td.down b, .acm-t small.down { color: var(--down); }
.acm-t small { color: var(--muted); font-size: 11px; margin-left: 4px; }
.acm-t td.dim, .acm-t .dim { color: var(--muted); }
.acm-x { height: 24px; padding: 0 11px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--fg); font-size: 12px; font-weight: 600; }
.acm-x:hover { border-color: var(--down); color: var(--down); }
.acm-empty { display: grid; justify-items: center; align-content: center; gap: 5px; height: 100%; min-height: 110px; text-align: center; padding: 10px; }
.acm-empty b { font-size: 15px; color: var(--fg-2); }
.acm-empty span { color: var(--muted); font-size: 12.5px; max-width: 560px; line-height: 1.5; }
.acm-empty div { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.acm-empty em { font-style: normal; color: var(--muted); }
.acm-empty.sm { min-height: 70px; }
.acm-pill { height: 32px; padding: 0 20px; border-radius: 16px; font-weight: 700; color: #fff; background: #2a2e39; }
.acm-pill.sell { background: var(--down); color: var(--on-down, #fff); } .acm-pill.buy { background: #2962ff; }
.acm-pill.ghost { background: transparent; border: 1px solid var(--line-2); color: var(--fg); }
.acm-pill:hover { filter: brightness(1.12); }
.menu .acm-ico { margin-right: 2px; }
.menu small.dim { color: var(--muted); }
@media (max-width: 1100px) { .acm-stats { gap: 16px; } .acm-s:nth-child(n+4) { display: none; } }

/* the watchlist tab: the list on top, the selected market's card below (TradingView's symbol details), each scrolls */
.spane.wl-split { display: flex; flex-direction: column; overflow: hidden; }
.wl-top { overflow-y: auto; flex: var(--wl-f, .46) 1 0; min-height: 0; }
.wl-det { overflow-y: auto; flex: calc(1 - var(--wl-f, .46)) 1 0; min-height: 0; }
.wl-grip { flex: none; height: 8px; position: relative; cursor: row-resize; touch-action: none; background: var(--pane); }
.wl-grip::after { content: ''; position: absolute; left: 50%; top: 3px; width: 34px; height: 2px; margin-left: -17px; border-radius: 1px; background: var(--muted); opacity: .55; }
.wl-grip:hover, body.wl-drag .wl-grip { background: var(--blue); } .wl-grip:hover::after, body.wl-drag .wl-grip::after { background: #fff; opacity: 1; }
body.wl-drag { cursor: row-resize; user-select: none; }
.det { padding: 14px 14px 18px; display: grid; gap: 4px; }
.det-h { display: flex; align-items: center; gap: 9px; }
.det-h b { font-size: 15px; color: var(--fg-2); }
.det-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 8.5px/1 var(--sans); font-style: normal; flex: none; }
.det-src { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: var(--muted); border: 1px solid var(--line-2); border-radius: 10px; padding: 3px 8px; }
.det-src.live { color: #26c281; border-color: rgba(38,194,129,.45); }
.det-nm { color: var(--muted); font-size: 12px; margin-top: 4px; }
.det-px { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.det-px b { font-size: 30px; font-weight: 700; color: var(--fg-2); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.det-px span { color: var(--muted); font-size: 12px; font-weight: 600; }
.det-ch { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.det-ch.up { color: var(--up); } .det-ch.down { color: var(--down); }
.det-mk { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; }
.det-mk i { width: 7px; height: 7px; border-radius: 50%; background: #787b86; }
.det-mk.on { color: #26c281; } .det-mk.on i { background: #26c281; box-shadow: 0 0 0 3px rgba(38,194,129,.18); }
.det-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.det-sec h4 { margin: 0 0 9px; font-size: 13.5px; font-weight: 700; color: var(--fg-2); }
.det-sec h4 small { color: var(--muted); font-weight: 500; font-size: 11.5px; margin-left: 4px; }
.det-kv { display: grid; gap: 7px; }
.det-kv div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.det-kv span { color: var(--fg); } .det-kv b { color: var(--fg-2); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.rng { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 9px; }
.rng-b { position: relative; height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(242,54,69,.55), rgba(120,123,134,.5), rgba(8,153,129,.6)); }
.rng-b i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--fg-2); box-shadow: 0 0 0 2px var(--bg); }
.perf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.perf div { border-radius: 6px; padding: 8px 6px; text-align: center; background: var(--pane); display: grid; gap: 2px; }
.perf div.up { background: rgba(8,153,129,.14); } .perf div.down { background: rgba(242,54,69,.13); }
.perf b { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.perf .up b { color: var(--up); } .perf .down b { color: var(--down); }
.perf span { color: var(--muted); font-size: 11px; }
.gauge { width: 190px; display: block; margin: 2px auto 0; }
.tech-l { text-align: center; font-size: 18px; font-weight: 700; color: var(--fg-2); margin-top: -4px; }
.tech-l.up { color: #5b8bff; } .tech-l.down { color: var(--down); }
.tech-c { display: flex; justify-content: center; gap: 14px; font-size: 12px; color: var(--muted); margin: 6px 0 4px; }
.tech-c .up { color: #5b8bff; } .tech-c .down { color: var(--down); }

/* Nexus Replay's start screen wears the site's gold look; the chart itself stays TradingView-style */
.sess-bg { background: url(/media/firms/grain.png) 0 0 / 200px 200px, radial-gradient(900px 420px at 12% -8%, rgba(249,115,22,.2), transparent 70%), #09090b; }
.sess-top h1 { font-size: 34px; font-weight: 900; color: #fff; }
.newform, .scard { background: #141418; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; }
.newform { padding: 24px; } .scard { padding: 18px; }
.newform h2 { font-size: 22px; font-weight: 900; color: #fff; }
.sess .sub-h { color: #ffc65e; font-family: 'JetBrains Mono', monospace; letter-spacing: .1em; }
.sess .fld input, .sess .fld select { height: 40px; border-radius: 10px; background: #0d0d10; }
.sess .fld input:focus, .sess .fld select:focus { border-color: #ffc65e; }
.sess .plan { border-radius: 14px; background: #0d0d10; }
.sess .plan:hover { border-color: rgba(255,198,94,.5); }
.sess .plan.on { border-color: #ffc65e; background: rgba(255,198,94,.08); }
.sess .rulebox { border-radius: 14px; background: #0d0d10; }
.sess .btn2 { border-radius: 999px; }
.sess .btn2.primary { border: 0; color: #1a1206; font-weight: 800; background: linear-gradient(92deg, #ffc65e, #f97316); box-shadow: 0 8px 26px rgba(249,115,22,.3); }
.sess .btn2.primary:hover { filter: brightness(1.06); background: linear-gradient(92deg, #ffc65e, #f97316); }
.sess-soon { padding: 13px 16px; border: 1px solid rgba(255,198,94,.45); border-radius: 14px; color: #d8d3c8; background: rgba(255,198,94,.08); } .sess-soon b { color: #ffc65e; }

/* bigger tools on the left, like TradingView */
.app { grid-template-columns: 62px minmax(0, 1fr) auto; }
.rail { padding: 8px 0; gap: 3px; }
.rail .tb { width: 46px; height: 42px; border-radius: 8px; }
.rail .tb svg { width: 27px; height: 27px; }
.rail .rsep { width: 38px; margin: 5px 0; }
.rgp { position: relative; flex: none; }
.rmore { position: absolute; right: -6px; top: 0; bottom: 0; width: 12px; border-radius: 0 6px 6px 0; opacity: 0; transition: opacity .12s; }
.rmore::after { content: ""; position: absolute; left: 3px; top: 50%; margin-top: -4px; border-left: 5px solid var(--fg); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.rgp:hover .rmore { opacity: 1; background: var(--pane-2); }
.tfly { position: fixed; z-index: 80; width: 300px; max-height: calc(100vh - 70px); overflow-y: auto; padding: 8px 0; border: 1px solid var(--line-2); border-radius: 10px; background: #17181c; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.tfh { display: flex; justify-content: space-between; gap: 8px; padding: 8px 14px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tfh em { font-style: normal; text-transform: none; letter-spacing: 0; }
.tfi { display: grid; grid-template-columns: 28px minmax(0, 1fr) 26px; align-items: center; gap: 12px; padding: 9px 14px; font-size: 15px; color: var(--fg-2); cursor: pointer; }
.tfi svg { width: 26px; height: 26px; }
.tfi:hover { background: var(--pane-2); } .tfi.on { color: #5b8bff; }
.tstar { width: 26px; height: 26px; font-size: 17px; line-height: 1; color: var(--muted); opacity: .35; } .tfi:hover .tstar, .irow .tstar { opacity: .8; } .tstar.on { color: #ffc65e; opacity: 1; }
.tfly.grid .tfl { display: grid; grid-template-columns: repeat(4, 1fr); } .tfly.grid .tfi { display: block; padding: 8px; text-align: center; } .tfly.grid .tfi span, .tfly.grid .tstar { display: none; }
#favbar { position: fixed; left: 50%; top: 52px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 2px; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(23,24,28,.96); box-shadow: 0 8px 26px rgba(0,0,0,.5); }
#favbar .tb { width: 38px; height: 36px; } #favbar .tb svg { width: 24px; height: 24px; } #favbar .tb.on { color: #5b8bff; }
.fgrip { width: 10px; height: 24px; cursor: grab; background: radial-gradient(circle, var(--muted) 1px, transparent 1.2px) 0 0 / 5px 5px; }
.irow { grid-template-columns: 26px minmax(0, 1fr) auto; }
#indFav { color: #ffc65e; font-size: 16px; }
.tplrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; } .tplrow select { height: 36px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--pane); padding: 0 8px; color: var(--fg-2); }

/* the order panel */
.side { width: 380px; }
.spane { font-size: 14px; }
.stabs button { font-size: 14px; padding: 0 12px; }
.ot { gap: 10px; }
.ot .tfh { padding: 6px 0 0; }
.ot-sym { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; background: var(--pane); } .ot-sym b { font-size: 16px; color: var(--fg-2); } .ot-sym span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--muted); } .ot-sym em { font-style: normal; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.ot .seg button { height: 36px; font-size: 14px; }
.ot .sides button { height: 54px; font-size: 15px; }
.ot .fld > span { font-size: 13px; } .ot .fld input { height: 40px; font-size: 15px; }
.ot-br { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 0 8px; align-items: center; padding: 12px; border-radius: 8px; background: var(--pane); }
.ot-br label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; font-size: 14px; } .ot-br input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--blue); }
.ot .tfh .brsw { display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--text, #d1d4dc); font: inherit; letter-spacing: .03em; cursor: pointer; }
.ot-br .brh { display: block; margin-bottom: 8px; font-weight: 600; font-size: 14px; }   /* 11/11: one Bracket switch above, plain titles here */
.ot-br > span { text-align: center; font-size: 12px; color: var(--muted); }
.ot-br .inp { height: 38px; margin-bottom: 4px; font-size: 14.5px; }
.ot-q { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px repeat(4, 42px); gap: 5px; } .ot-q button, .ot-q input { height: 42px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--pane); text-align: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .ot-q input { min-width: 0; color: var(--fg-2); outline: none; } .ot-q .pre.on { color: #fff; border-color: var(--blue); background: var(--blue); }
.ot-rr { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); } .ot-rr .inp { width: 66px; height: 34px; text-align: center; }
.ot .tkprev span { font-size: 12px; } .ot .tkprev b { font-size: 15px; }
.ot-fee { display: grid; gap: 6px; font-size: 13.5px; } .ot-fee div { display: flex; justify-content: space-between; gap: 10px; } .ot-fee span { color: var(--muted); } .ot-fee b { font-weight: 600; font-variant-numeric: tabular-nums; } .ot-fee .up { color: var(--up); } .ot-fee .down { color: var(--down); }
.ot-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ot-quick b { font-size: 13px; font-weight: 600; text-align: center; color: var(--muted); } .ot-quick button { height: 38px; border-radius: 6px; color: #fff; font-weight: 700; font-size: 14px; } .ot-quick .bq { background: var(--blue); } .ot-quick .sq { background: var(--down); color: var(--on-down, #fff); }
.ot .go { height: 48px; font-size: 15.5px; }
.ot-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ot-acts button { height: 40px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--pane); font-size: 14px; font-weight: 600; color: var(--fg-2); } .ot-acts button:hover:not(:disabled) { background: var(--pane-2); } .ot-acts button:disabled { opacity: .45; }
.ot-info { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line); } .ot-info .tfh { padding: 8px 0 0; }
.ot-bar { display: grid; gap: 5px; font-size: 13.5px; } .ot-bar .mt, .ot-bar .sub { display: flex; justify-content: space-between; gap: 8px; } .ot-bar .mt b { font-weight: 700; } .ot-bar .sub { font-size: 12px; color: var(--muted); } .ot-bar .bar { height: 7px; overflow: hidden; border-radius: 4px; background: var(--pane-2); } .ot-bar .bar i { display: block; height: 100%; }
@media (max-width: 1100px) { .side { width: 320px; } }
/* Replay on a phone or tablet: the controls stay on screen, and the panel button stays in reach */
@media (max-width: 860px) { .rpbar { left: 6px; right: 6px; transform: none; overflow-x: auto; scrollbar-width: none; } }
@media (max-width: 1180px) { .top #sideBtn { position: sticky; right: 0; z-index: 2; background: var(--bg); box-shadow: -16px 0 12px -4px var(--bg); } .stabs button { min-width: 0; padding-inline: 6px; } }
.skanim { position: absolute; right: 11px; top: 11px; padding: 3px 7px; border-radius: 6px; font: 700 10px/1 var(--sans, Inter, sans-serif); font-style: normal; letter-spacing: .04em; color: #1a1206; background: linear-gradient(135deg, #ffc65e, #f97316); }
.dstyle .fld label.check input[type=checkbox] { flex: none; width: 18px; height: 18px; accent-color: var(--blue); }
.dstyle .fld label.check input[type=color] { flex: none; width: 34px; height: 24px; padding: 0; border: 1px solid var(--line-2); border-radius: 4px; background: none; }
.dstyle .fld { gap: 7px; }
#favbar { left: 62%; }
.tag-sample { white-space: nowrap; }
@media (max-width: 1500px) { .topbar a[href="/charts/"], .top a[href="/charts/"] { display: none; } }
.rail { gap: 2px; padding: 6px 0; } .rail .tb { height: 40px; } .rail .rsep { margin: 4px 0; }
body.pxon #favbar { top: 126px; }
.srcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.srcs .plan { padding: 14px; } .srcs .plan b { font-size: 14px; }
.ntbox { display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: center; padding: 14px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255,255,255,.02); }
.ntt { display: grid; gap: 3px; min-width: 0; } .ntt b { color: var(--fg-2); font-size: 14px; } .ntt span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.nta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ntbar { grid-column: 1 / -1; height: 5px; border-radius: 3px; overflow: hidden; background: var(--line-2); }
.ntbar i { display: block; width: 34%; height: 100%; border-radius: 3px; background: var(--blue); animation: ntrun 1.3s ease-in-out infinite alternate; }
@keyframes ntrun { from { margin-left: 0; } to { margin-left: 66%; } }
.ntbox .note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 640px) { .ntbox { grid-template-columns: 1fr; } .nta { justify-content: flex-start; } }
.cg { grid-auto-rows: max-content; }
.legend .ind button[data-eye] { display: inline-flex; vertical-align: -2px; }
.legend .ind.off .nm, .legend .ind.off .vals { opacity: .42; text-decoration: line-through; } .legend .ind.off .vals { display: none; }
.legend .ind.off button[data-eye] { opacity: 1; color: var(--fg-2); }
.srcsw { flex: none; display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--pane); }
.srcsw button { height: 28px; padding: 0 11px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 700 12px/1 var(--sans); }
.srcsw button:hover { color: var(--fg-2); } .srcsw button.on { color: #1a1206; background: linear-gradient(135deg, #ffd27a, #f97316); }
.swd { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #787b86; }
.swd.live { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.8); } .swd.amber { background: #f59e0b; }
.srcsw button.on .swd { box-shadow: 0 0 0 1.5px rgba(0,0,0,.35); }
.ntl { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; font: 700 12px/1 var(--sans); color: var(--muted); }
.sess-soon a { color: #ffc65e; font-weight: 700; white-space: nowrap; }

/* the site's own checkboxes and dropdown arrows, never the browser's white ones */
input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; display: inline-grid; place-content: center; border: 1px solid #3a3e49; border-radius: 5px; background: #14161c; cursor: pointer; transition: border-color .12s, background .12s; }
input[type=checkbox]:hover { border-color: #ffc65e; }
input[type=checkbox]:checked { border-color: #ffc65e; background: rgba(255,198,94,.16); }
input[type=checkbox]:checked::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid #ffc65e; border-bottom: 2px solid #ffc65e; transform: rotate(-45deg); }
input[type=checkbox]:focus-visible { outline: 2px solid rgba(255,198,94,.6); outline-offset: 1px; }
input[type=checkbox]:disabled { opacity: .45; cursor: not-allowed; }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23a1a5b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 7px center !important; background-size: 12px 12px !important; padding-right: 24px !important; cursor: pointer; }
select option, select optgroup { background: #14161c; color: #e6e7ea; }
.skacts { position: absolute; left: 11px; top: 11px; display: flex; gap: 4px; }
.skact { padding: 4px 7px; border-radius: 6px; font: 700 10px/1 var(--sans, Inter, sans-serif); font-style: normal; color: #ffc65e; border: 1px solid rgba(255,198,94,.45); background: rgba(12,14,19,.86); cursor: pointer; } .skact:hover { color: #1a1206; background: #ffc65e; }
.skcard.flipped canvas, .skcard.flipped img, .skcard.flipped video { transform: scaleX(-1); }
.applogo { width: 30px; height: 30px; border-radius: 8px; display: block; flex: none; }

/* drawing settings, laid out like TradingView's: a floating window that keeps the chart visible */
.modal-bg.tvbg { background: transparent; }
.modal.tvw { width: min(374px, 100%); max-height: min(720px, 100%); grid-template-rows: auto auto minmax(0, 1fr) auto; background: #141414; border-color: #2e2e2e; border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.8); }
.modal.tvw.tvfib { width: min(442px, 100%); max-height: min(880px, 100%); }
.modal.tvw header { padding: 16px 18px 10px; cursor: move; touch-action: none; }
.modal.tvw header h2 { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 19px; font-weight: 600; color: #c6c8ce; }
.modal.tvw header h2 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal.tvw header .tvpen { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: #9a9ca3; }
.tvpen svg { width: 18px; height: 18px; }
.tvtabs { display: flex; gap: 22px; margin: 0 18px; border-bottom: 3px solid #3a3a3a; }
.tvtabs button { padding: 2px 0 8px; margin-bottom: -3px; border-bottom: 3px solid transparent; color: #b2b5be; font-size: 15px; font-weight: 600; }
.tvtabs button:hover { color: #fff; } .tvtabs button.on { color: #fff; border-bottom-color: #fff; }
.tvbody { display: grid; gap: 14px; align-content: start; padding: 18px; overflow: auto; }
.tvr { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 34px; color: #d1d4dc; font-size: 14px; }
.tvct { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tvc { display: inline-flex; align-items: center; gap: 8px; color: #d1d4dc; font-size: 14px; cursor: pointer; }
.tvc input { flex: none; width: 18px; height: 18px; margin: 0; }
.tvc.dis { opacity: .4; cursor: default; }
.tvs { min-width: 0; flex: 1; max-width: 180px; height: 34px; padding: 0 24px 0 10px; border: 1px solid #3a3a3a; border-radius: 6px; background-color: #141414; color: #d1d4dc; font-size: 14px; }
.tvs:hover { border-color: #5a5a5a; }
.tvsw { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 4px; border: 1px solid #3a3a3a; border-radius: 6px; color: #d1d4dc; }
.tvsw:hover { border-color: #5a5a5a; } .tvsw:disabled { opacity: .4; cursor: default; }
.tvsw svg { width: 30px; height: 24px; } .tvsw .mlw { display: block; width: 26px; background: currentColor; border-radius: 1px; }
.tvchk { display: block; width: 24px; height: 24px; border-radius: 4px; overflow: hidden; background: repeating-conic-gradient(#3b3b3b 0 25%, #0f0f0f 0 50%) 0 0 / 10px 10px; }
.tvchk > i { display: block; width: 100%; height: 100%; }
.tvchk.split > i { background: linear-gradient(135deg, #089981 50%, #f23645 50%); }
.tvlv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(12, auto); grid-auto-flow: column; gap: 6px 22px; }
.tvl { display: grid; grid-template-columns: 18px minmax(0, 1fr) 34px; gap: 8px; align-items: center; }
.tvl input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
.tvn { width: 100%; height: 34px; padding: 0 8px; border: 1px solid #3a3a3a; border-radius: 6px; background: #141414; color: #d1d4dc; font-size: 14px; outline: none; font-variant-numeric: tabular-nums; }
.tvn:focus, .tvta:focus, .tvs:focus { border-color: var(--blue); outline: none; }
.tvn:disabled { color: #5d606b; background: #1a1a1a; border-color: #2a2a2a; }
.tvrange { flex: 1; min-width: 0; height: 24px; accent-color: var(--blue); }
.tvtop { display: flex; align-items: center; gap: 8px; } .tvtop .tvs { flex: none; width: 92px; }
.tvb { width: 34px; height: 34px; border-radius: 6px; background: #2a2a2a; color: #d1d4dc; font-size: 15px; font-family: Georgia, serif; }
.tvb.on { background: #d1d4dc; color: #131313; }
.tvta { width: 100%; min-height: 96px; padding: 10px; border: 1px solid #3a3a3a; border-radius: 6px; background: #141414; color: #d1d4dc; font: 14px/1.4 var(--sans); resize: vertical; outline: none; }
.tvco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 6px 8px; align-items: center; color: #d1d4dc; font-size: 13px; } .tvco > span { grid-column: 1 / -1; }
.tvv { display: grid; grid-template-columns: 92px 68px minmax(0, 1fr) 68px; gap: 8px; align-items: center; }
.tvtrk { position: relative; height: 4px; border-radius: 2px; background: #3a3a3a; } .tvtrk > i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--blue); }
.tvv.off .tvtrk > i { background: #5d606b; }
.tvfoot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid #2a2a2a; } .tvfoot > span { flex: 1; }
.tvtpl { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px 0 12px; border: 1px solid #3a3a3a; border-radius: 6px; color: #d1d4dc; font-size: 14px; }
.tvtpl svg { width: 14px; height: 14px; } .tvtpl:hover { border-color: #5a5a5a; }
.tvbtn { height: 36px; padding: 0 16px; border: 1px solid #d1d4dc; border-radius: 8px; color: #f0f3fa; font-size: 14px; font-weight: 600; }
.tvbtn:hover { background: #262626; } .tvbtn.ok { background: #f0f3fa; color: #131313; } .tvbtn.ok:hover { background: #fff; }
.tvbtns { display: flex; justify-content: flex-end; gap: 10px; } .tvask { padding: 6px 18px 18px; gap: 14px; }
.tvx { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 12px; } .tvx input { accent-color: var(--blue); min-width: 0; }
.tvx .seg { grid-column: 2 / 4; } .tvx .seg button { display: flex; align-items: center; justify-content: center; padding: 0 4px; } .tvx .seg svg { width: 26px; height: 20px; } .tvx .mlw { width: 22px; display: block; background: currentColor; }
/* the drawing's right-click menu, with the side lists */
.menu button > span { flex: 1; } .menu kbd { margin-left: 18px; color: var(--muted); font: 12px var(--sans); background: none; border: 0; white-space: nowrap; }
.menu .mgap { width: 18px; flex: none; } .menu .msubb > svg:last-child { width: 14px; height: 14px; }
.menu.subm { z-index: 76; min-width: 180px; }
.tprow { display: flex; } .tprow [data-tp=use] { flex: 1; } .menu .tprow [data-tp=rm] { width: 34px; flex: none; justify-content: center; padding: 0; color: var(--muted); opacity: 0; font-size: 16px; } .tprow:hover [data-tp=rm] { opacity: 1; }
/* object tree */
.otree { padding: 0 0 14px; overflow: auto; }
.otr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 32px); align-items: center; padding: 0 12px; } .otr[data-kind=i] { grid-template-columns: minmax(0, 1fr) repeat(2, 32px); } .otr:hover { background: var(--pane-2); }
.otr button { height: 34px; display: grid; place-items: center; color: var(--muted); } .otr button:hover { color: var(--fg-2); } .otr svg { width: 15px; height: 15px; }
.otr .otn { place-items: center start; padding: 0 6px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .otr.off .otn { color: var(--muted); }
.toast { pointer-events: none; }

/* always in reach: the order button, the favorites bar clear of the left tools, Start on the new-session page */
#tkGo { position: sticky; bottom: 8px; z-index: 6; box-shadow: 0 0 0 8px var(--bg), 0 -10px 26px rgba(0,0,0,.7); }
#favbar { left: 556px; top: 84px; transform: none; }   /* 11/3: clear of SELL · qty · BUY · BE · ATM */
@media (max-width: 1280px) and (min-width: 701px) { #favbar { left: 72px; top: 178px; } body.pxon #favbar { top: 220px; } }   /* narrower: under the buy/sell row, never over the price scale */
@media (max-width: 700px) { #favbar { left: 50%; top: 170px; transform: translateX(-50%); } }
.newform div:has(> #nGo) { position: sticky; bottom: 14px; z-index: 6; display: flex; justify-content: flex-end; padding: 10px 12px; border: 1px solid rgba(255,198,94,.35); border-radius: 12px; background: #0c0e13; box-shadow: 0 -12px 34px rgba(0,0,0,.6); }
.tvrange { -webkit-appearance: none; appearance: none; flex: 0 1 150px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(41,98,255,0), var(--blue)), repeating-conic-gradient(#3b3b3b 0 25%, #0f0f0f 0 50%) 0 0 / 8px 8px; }
.tvrange::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #0b0b0d; border: 2px solid #fff; cursor: pointer; }

/* matched to TradingView itself, 10/31 */
.tvco { grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1fr); } .tvco > span { grid-column: auto; white-space: nowrap; }
.tvv { grid-template-columns: 92px 62px minmax(0, 1fr) 62px; }
.tvdual { position: relative; height: 18px; } .tvdual .tvtrk { position: absolute; left: 7px; right: 7px; top: 7px; background: #3a3a3a; } .tvdual .tvtrk > i { background: #f0f3fa; }
.tvdual input { position: absolute; inset: 0; width: 100%; height: 18px; margin: 0; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; }
.tvdual input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #0b0b0d; border: 2px solid #f0f3fa; pointer-events: auto; cursor: pointer; }
.tvv.off .tvdual input::-webkit-slider-thumb { border-color: #5d606b; } .tvv.off .tvdual .tvtrk > i { background: #5d606b; }
.menu.cmenu { width: 252px; padding: 12px; } .cpal { grid-template-columns: repeat(10, 20px); gap: 2px; }
.menu .cpal button, .cpal button { width: 20px; height: 20px; border-radius: 3px; border: 0; } .menu .cpal button:nth-child(n+11):nth-child(-n+20) { margin-bottom: 8px; }
.ccust { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); position: relative; width: 100%; } .ccust input { position: absolute; left: 0; top: 10px; width: 24px; height: 24px; opacity: 0; } .ccust span { color: var(--fg); font-size: 18px; line-height: 24px; width: 24px; text-align: center; }
.tvx { display: block; margin-top: 12px; } .tvx > span { display: block; margin-bottom: 6px; } .tvop { display: flex; align-items: center; gap: 10px; }
.tvop input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 10px; border-radius: 5px; } .tvop input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #0b0b0d; cursor: pointer; }
.tvop label { display: flex; align-items: center; height: 30px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--fg); font-size: 12px; } .tvop label input { width: 30px; border: 0; background: none; color: var(--fg); font-size: 12px; text-align: right; outline: none; -moz-appearance: textfield; } .tvop label input::-webkit-inner-spin-button { -webkit-appearance: none; }
.tvx .seg { padding: 0; gap: 0; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; background: none; } .tvx .seg button { height: 32px; border-radius: 0; color: var(--fg); } .tvx .seg button.on { background: #f0f3fa; color: #131313; } .tvx .seg .mlw { background: currentColor; }
.dtb { cursor: grab; } .dtb.moving { cursor: grabbing; box-shadow: 0 12px 34px rgba(0,0,0,.7); } .dtb button { cursor: pointer; }
.dtb-grip { width: 8px; height: 18px; margin: 0 4px 0 6px; opacity: .45; background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 4px 4px; }
.inltxt { position: absolute; z-index: 12; padding: 0; border: 0; outline: none; resize: none; overflow: hidden; background: transparent; caret-color: currentColor; font-family: Inter, sans-serif; line-height: 1.5; }
.otr { padding: 0 10px; border-radius: 4px; margin: 0 6px; } .otr.sel { background: #143a8c; } .otr.sel button, .otr.sel .otn { color: #fff; }
.otr:not(.sel):not(.off):not(:hover) > [data-ot] { opacity: 0; } .otr:not(.sel):not(:hover) > [data-ot="lock"], .otr:not(.sel):not(:hover) > [data-ot="rm"] { opacity: 0; } .otr > .otn { opacity: 1 !important; }
.otr .otn { display: flex; align-items: center; gap: 10px; } .otr .otn span { overflow: hidden; text-overflow: ellipsis; }

.cg-vid.soon { aspect-ratio: auto; height: 84px; grid-auto-flow: column; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 14px; text-align: left; padding: 10px 18px; } .cg-vid.soon .cg-play { width: 44px; height: 44px; grid-row: 1 / 3; } .cg-vid.soon .cg-play svg { width: 20px; height: 20px; }
.newform div:has(> #nGo) { justify-content: space-between; align-items: center; gap: 12px; } #nSum { min-width: 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { #nSum { white-space: normal; } }
@media (max-width: 860px) { .top { padding-right: 30px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); } }
/* chart options */
body.no-title .legend .l1 > b, body.no-title .legend .l1 > span:not(.ohlc) { display: none; } body.no-vals .legend .ohlc { display: none; } body.no-chg .legend .chg { display: none; } body.no-vol .legend .ivol { display: none; } body.no-qtr .qtr { display: none; } body.no-plus .addalert { display: none !important; }
body.no-indt .legend .ind:not(.ivol) .nm { display: none; } body.no-inda .legend .nm i { display: none; } body.no-indv .legend .vals { display: none; } .legend .nm i, .legend .chg { font-style: normal; }
.cdn { position: absolute; top: 0; z-index: 6; width: 68px; height: 18px; background: var(--pane); font: 600 11px/18px Inter, sans-serif; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; will-change: transform; } .cdn[hidden] { display: none; }
/* Chart settings, laid out like TradingView's */
.modal.tvset { width: min(740px, 100%); max-height: min(760px, 100%); grid-template-rows: auto minmax(0, 1fr) auto; background: #141414; border-color: #2e2e2e; border-radius: 10px; box-shadow: 0 18px 60px rgba(0,0,0,.8); }
.modal.tvset header { padding: 16px 18px 10px; cursor: move; touch-action: none; } .modal.tvset header h2 { font-size: 19px; font-weight: 600; color: #e6e7ea; }
.tvsplit { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 0; overflow: hidden; }
.tvnav { display: grid; align-content: start; gap: 2px; padding: 8px 10px; } .tvnav button { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 6px; color: #b2b5be; font-size: 14px; font-weight: 500; } .tvnav button:hover { color: #fff; } .tvnav button.on { background: #262626; color: #fff; font-weight: 600; } .tvnav svg { width: 18px; height: 18px; flex: none; }
.tvpanes { overflow: auto; padding: 8px 18px 16px; display: grid; align-content: start; gap: 12px; } .tvpane { display: grid; gap: 12px; } .tvpane[hidden] { display: none; }
.tvh { color: #787b86; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; margin-top: 8px; } .tvpane > .note { margin: 0; }
.tvr .sw2 { display: flex; gap: 8px; } .tvsub { margin-left: 26px; } .tvnum { width: 92px; } .tvunit { color: var(--muted); font-size: 13px; }
.tvpane .seg { background: #1c1c1c; } .tvrow2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 640px) { .tvsplit { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); } .tvnav { grid-auto-flow: column; overflow-x: auto; } .tvnav button { white-space: nowrap; } .tvnav svg { display: none; } }
@media (min-width: 641px) { .tvsplit { grid-template-columns: 196px minmax(0, 1fr); } .tvnav button { white-space: nowrap; text-align: left; justify-content: flex-start; width: 100%; } }
@media (max-width: 860px) { .sess, .newform { grid-template-columns: minmax(0, 1fr); } .sess > * { min-width: 0; } .sess-top { align-items: flex-start; } .sess-top h1 { white-space: nowrap; } #nGo { flex: none; white-space: nowrap; } }
/* trade animations */
.fxbox { position: absolute; left: 10px; top: 136px; z-index: 7; display: grid; gap: 6px; pointer-events: none; }
.fxcard { --c: var(--blue); display: grid; gap: 2px; min-width: 190px; padding: 9px 13px 9px 15px; border-radius: 9px; background: rgba(19,20,24,.94); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 30px rgba(0,0,0,.5), inset 3px 0 0 var(--c); font: 12px/1.3 var(--sans); color: #b8bbc4; animation: fxcard 2.6s cubic-bezier(.2,.8,.2,1) both; }
.fxcard b { color: #fff; font-size: 13px; font-weight: 700; } .fxcard em { font-style: normal; font-weight: 800; font-size: 15px; color: var(--c); }
.fxcard.sell { --c: var(--down); } .fxcard.win { --c: #34e0a1; } .fxcard.loss { --c: var(--down); }
@keyframes fxcard { 0% { opacity: 0; transform: translateY(-10px) scale(.96); } 8% { opacity: 1; transform: none; } 84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
.fxtally { position: absolute; right: 90px; bottom: 44px; z-index: 7; display: flex; align-items: baseline; gap: 10px; padding: 9px 16px; border-radius: 12px; background: rgba(19,20,24,.92); border: 1px solid rgba(255,198,94,.4); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; pointer-events: none; }
.fxtally.on { opacity: 1; transform: none; } .fxtally small { color: #9a9da6; font-size: 11px; } .fxtally b { font: 800 24px/1 var(--sans); font-variant-numeric: tabular-nums; } .fxtally b.up { color: #34e0a1; } .fxtally b.dn { color: var(--down); }
/* more charts in a session */
.nlegs { display: grid; gap: 8px; } .nleg { display: grid; grid-template-columns: 62px minmax(0, 1.6fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; } .nleg > span { font-size: 12px; color: var(--muted); } .nleg select { height: 40px; min-width: 0; padding: 0 30px 0 11px; border-radius: 8px; border: 1px solid var(--line-2); background-color: var(--bg); color: var(--fg-2); font: inherit; font-size: 14px; } .nleg-x { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); font-size: 16px; } .nleg-x:hover { color: var(--fg-2); border-color: var(--muted); }
.nadd { justify-self: start; } .nlegs small.note { margin: -2px 0 0; }
.linkish { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
/* the failed-account screen */
.failbg { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: radial-gradient(70% 60% at 50% 40%, rgba(255,93,108,.16), transparent 70%), rgba(5,5,7,.78); backdrop-filter: blur(5px); animation: failfade .3s ease both; }
.failcard { width: min(680px, 100%); display: grid; gap: 14px; padding: 24px 26px 18px; border-radius: 20px; border: 1px solid rgba(255,93,108,.5); background: linear-gradient(170deg, #1a1215, #0c0b0e 60%); box-shadow: 0 0 80px -20px rgba(255,93,108,.7), 0 30px 70px -30px #000; color: #f5f3ef; font-family: var(--sans); animation: failpop .42s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes failfade { from { opacity: 0; } } @keyframes failpop { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.fail-top { display: flex; gap: 14px; align-items: center; } .fail-mark { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font: 900 24px/1 var(--sans); color: #1a0a0d; background: #ff5d6c; box-shadow: 0 0 0 6px rgba(255,93,108,.2), 0 0 26px #ff5d6c; }
.fail-top h2 { margin: 0; font-size: 25px; font-weight: 900; letter-spacing: -.02em; } .fail-top p { margin: 3px 0 0; font-size: 13.5px; color: #c9b8bc; }
.fail-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .fail-hero div { padding: 11px 13px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); } .fail-hero small, .fail-grid small { display: block; font-size: 11.5px; color: #a89da0; } .fail-hero b { display: block; margin-top: 3px; font: 800 21px/1.15 var(--sans); font-variant-numeric: tabular-nums; }
.fail-c { display: block; width: 100%; height: 76px; border-radius: 10px; background: rgba(0,0,0,.3); }
.fail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; } .fail-grid div { padding: 7px 10px; border-left: 2px solid rgba(255,255,255,.08); } .fail-grid b { display: block; margin-top: 2px; font: 700 15px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.fail-mk { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: #c9b8bc; padding-top: 2px; } .fail-mk b { color: #f5f3ef; } .fail-mk i { font-style: normal; font-weight: 700; }
.fail-acts { display: grid; grid-template-columns: .8fr 1.1fr 1.3fr; gap: 10px; margin-top: 2px; } .fail-acts .btn2 { height: 46px; font-size: 15px; font-weight: 700; } .fail-rev { justify-self: center; background: none; border: 0; color: #a89da0; font-size: 13px; text-decoration: underline; cursor: pointer; } .fail-rev:hover { color: #f5f3ef; } .failcard .note { margin: 0; text-align: center; font-size: 11.5px; color: #8c8287; }
@media (max-width: 560px) { .fail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fail-hero b { font-size: 17px; } .nleg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .nleg > span { display: none; } }
@media (max-width: 1000px) { .stage.l3 { grid-template: repeat(3, 1fr) / 1fr; } }
.failcard .btn2.primary { color: #1a1206; border: 0; background: linear-gradient(92deg, #ffc65e, #f97316); box-shadow: 0 14px 34px -14px #f97316; }
.stage > .rpbar { left: 50%; right: auto; transform: translateX(-50%); z-index: 12; }
body.multi #favbar { left: 84px; top: 186px; transform: none; }
.failbg.won { background: radial-gradient(70% 60% at 50% 40%, rgba(52,224,161,.16), transparent 70%), rgba(5,5,7,.78); }
.failbg.won .failcard { border-color: rgba(52,224,161,.55); background: linear-gradient(170deg, #111a17, #0b0e0d 60%); box-shadow: 0 0 80px -20px rgba(52,224,161,.7), 0 30px 70px -30px #000; }
.failbg.won .fail-mark { color: #04130e; background: #34e0a1; box-shadow: 0 0 0 6px rgba(52,224,161,.2), 0 0 26px #34e0a1; }
.failbg.won .fail-top p { color: #b6c9c1; }
.fail-acts.won { grid-template-columns: 1fr 1.15fr 1.15fr 1.15fr; } .fail-acts.won .btn2 { font-size: 14px; padding-inline: 6px; }
@media (max-width: 560px) { .fail-acts, .fail-acts.won { grid-template-columns: 1fr 1fr; } .fail-acts .primary { grid-column: 1 / -1; grid-row: 1; } }
/* phone: the playback bar stays inside the chart area */
@media (max-width: 560px) { .rpbar, .stage > .rpbar { left: 6px; right: 6px; transform: none; flex-wrap: wrap; justify-content: center; } .stage > .rpbar .rpt { padding: 0 4px; font-size: 11px; } .stage > .rpbar select { padding: 0 2px; } }
/* the symbol in the chart's legend opens symbol search */
.legend .lgsym { display: inline-flex; align-items: baseline; gap: 4px; pointer-events: auto; cursor: pointer; font: inherit; color: inherit; padding: 1px 5px; margin: -1px -5px; border-radius: 4px; transition: background .12s; }
.legend .lgsym:hover { background: rgba(42,46,57,.85); }
/* Layout menu: saved presets */
.menu .lrow .lpick { flex: 1; width: auto; height: 30px; min-width: 0; justify-content: flex-start; padding: 0 6px; margin-left: -6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 30px; }
.menu .lrow .lpick:hover { color: inherit; }
.menu .lrow .lpick.on { color: var(--blue); }
.menu .lsave { display: flex; gap: 6px; padding: 6px 14px 8px; }
.menu .lsave input { flex: 1; min-width: 0; height: 30px; padding: 0 8px; color: var(--fg-2, #d1d4dc); background: var(--pane-2); border: 1px solid var(--line-2); border-radius: 4px; }
.menu .lsave button { width: auto; flex: none; height: 30px; padding: 0 12px; border-radius: 4px; background: var(--pane-2); font-weight: 600; }
body.no-title .legend .lgsym { display: none; }
/* the account menu's three switches: real checkboxes, lined up */
.menu [data-acc="names"], .menu [data-acc="hidenames"], .menu [data-acc="hidemoney"] { display: flex; justify-content: flex-start; gap: 10px; text-align: left; }
.menu [data-acc] .mchk { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0; border: 1px solid var(--muted); border-radius: 3px; color: #fff; font-size: 11px; line-height: 1; }
.menu [data-acc] .mchk:not(:empty) { background: var(--blue); border-color: var(--blue); }
#gBox, #gCols, #oBox, #oTb { display: grid; gap: 2px; } #gBox[hidden], #gCols[hidden], #oBox[hidden], #oTb[hidden], [data-gm][hidden] { display: none; } [data-gm] { display: inline-flex; gap: 6px; } #gReset, #oReset, #oTr0 { justify-self: start; margin-top: 8px; }
/* real orders on a NinjaTrader account */
.qtr:has(.qacct:not([hidden])) { flex-wrap: wrap; } .qacct[hidden] { display: none; } .qacct { flex: 0 0 100%; order: 9; margin-top: 4px; text-align: center; padding: 3px 7px; border-radius: 4px; font: 700 10px/1.2 var(--sans); letter-spacing: .04em; color: #fff; background: #2962ff; white-space: nowrap; } .qacct.real { background: #c8102e; } .qacct.off { background: #4a4e59; }
.ot-nt { margin-bottom: 10px; padding: 8px 10px; border-radius: 6px; font-size: 12px; color: #dbe6ff; background: rgba(41,98,255,.16); border: 1px solid rgba(41,98,255,.45); } .ot-nt.real { color: #ffd7dc; background: rgba(200,16,46,.16); border-color: rgba(200,16,46,.55); }
.acm-x { height: 24px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--fg); font-size: 12px; background: transparent; cursor: pointer; } .acm-x:hover { border-color: var(--down); color: var(--down); }
.acm-flat { height: 28px; padding: 0 12px; font-size: 12px; margin-right: 6px; }
.ntc-rows { display: grid; gap: 6px; margin: 10px 0; } .ntc-rows div { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; } .ntc-rows span { color: var(--muted); } .ntc-warn { color: #ffb74d; margin: 6px 0; } .ntc-skip { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; font-size: 13px; cursor: pointer; }
.ntgo-b { background: #2962ff !important; color: #fff !important; border-color: #2962ff !important; } .ntgo-s { background: var(--down) !important; color: var(--on-down, #fff) !important; border-color: var(--down) !important; }
.ntk { display: grid; gap: 10px; padding: 10px 12px; } .ntk-top { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; } .ntk-st { align-self: center; padding: 6px 10px; border-radius: 4px; font: 700 11px/1 var(--sans); letter-spacing: .06em; color: var(--muted); border: 1px solid var(--line-2); } .ntk-st.on { color: #fff; background: #0a8f5b; border-color: #0a8f5b; }
.ntk-f { display: grid; gap: 4px; font-size: 11px; color: var(--muted); } .ntk-f select { min-width: 170px; height: 30px; padding: 0 8px; border-radius: 4px; color: var(--fg); background: var(--pane, #121212); border: 1px solid var(--line-2); } .ntk-top .acm-pill { height: 30px; padding: 0 14px; font-size: 12px; }
.ntk-t { width: 100%; border-collapse: collapse; font-size: 13px; } .ntk-t th { text-align: left; font-weight: 500; font-size: 11px; color: var(--muted); padding: 4px 8px; } .ntk-t td { padding: 4px 8px; border-top: 1px solid var(--line); } .ntk-c { display: flex; align-items: center; gap: 8px; cursor: pointer; } .ntk-on { align-self: end; height: 30px; font-size: 12px; } .ntk-n { width: 72px; height: 26px; padding: 0 6px; border-radius: 4px; color: var(--fg); background: var(--pane, #121212); border: 1px solid var(--line-2); }
/* the Levels window */
@media (max-width: 1000px) { #keysBtn { display: none; } }   /* the arrow still opens Levels, and the window has the on/off */
#keysSet { width: 20px; min-width: 20px; padding: 0; margin-left: -2px; } #keysSet svg { width: 12px; height: 12px; }
.lvwin { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow-y: auto; } .lv { display: grid; gap: 6px; } .lvmain { font-weight: 600; }
.lvr { display: grid; grid-template-columns: minmax(0, 1fr) 130px 32px; gap: 8px; align-items: center; min-height: 34px; } .lvo { grid-template-columns: 22px minmax(0, 1fr) 124px 32px 24px; }
.lvsr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .lvhd { display: grid; grid-template-columns: minmax(0, 1fr) 130px 32px; gap: 8px; font-size: 11px; color: var(--muted); }
.lvn, .lvt { width: 100%; height: 28px; padding: 0 8px; border-radius: 4px; color: var(--fg); background: var(--pane, #121212); border: 1px solid var(--line-2); font-size: 13px; color-scheme: dark; } .lvx { width: 24px; height: 24px; border: 0; border-radius: 4px; color: var(--muted); background: none; font-size: 16px; cursor: pointer; } .lvx:hover { color: var(--down); }
#lvAdd { justify-self: start; margin-top: 4px; }
/* the order ticket in the narrower side panel: every number stays readable */
@media (max-width: 1100px) { .ot-br { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 0 6px; padding: 10px; } .ot-br .inp { padding-inline: 6px; font-size: 13px; } .ot-q { grid-template-columns: 34px minmax(46px, 1fr) 34px repeat(4, 32px); gap: 4px; } }

/* the account menu pops up like the website's */
.acm-acc svg { transition: transform .2s ease; } .acm-acc.open { border-color: rgba(255,198,94,.55); } .acm-acc.open svg:last-child { transform: rotate(180deg); }
.menu.pop { min-width: 300px; padding: 8px; border-radius: 14px; border-color: rgba(255,198,94,.3); background: linear-gradient(180deg, rgba(32,33,40,.97), rgba(14,15,19,.97)); box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 0 44px rgba(249,115,22,.14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform-origin: 28px 100%; animation: menuPop .2s cubic-bezier(.2, 1.2, .35, 1); }
.menu.pop.out { pointer-events: none; animation: menuShut .13s ease-in forwards; }
.menu.pop button { border-radius: 9px; transition: background .12s, transform .12s; } .menu.pop button:hover { transform: translateX(2px); background: rgba(255,198,94,.09); } .menu.pop .mh { color: #ffc65e; font-weight: 700; letter-spacing: .1em; } .menu.pop .msep { margin: 6px 4px; }
@keyframes menuPop { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes menuShut { to { opacity: 0; transform: translateY(6px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .menu.pop, .menu.pop.out { animation-duration: .01s; } }
/* copy trader + P&L by account */
.ntk-add { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; } .ntk-add b { color: var(--fg); font-size: 13px; } .ntk-add span { color: var(--muted); font-size: 12.5px; } .ntk-add .ntk-sim { margin-left: auto; } .ntk-add .acm-pill:first-of-type { margin-left: 0; }
.ntk-t .r { text-align: right; font-variant-numeric: tabular-nums; } .ntk-t td.up { color: var(--up); } .ntk-t td.down { color: var(--down); }
.ntk-dirty { color: #ffc65e; font-size: 12.5px; font-weight: 700; white-space: nowrap; } .ntk-del { align-self: end; margin-bottom: 4px; } .ntk-del svg { width: 15px; height: 15px; } .acm-pill.gold { color: #1a1206; background: linear-gradient(135deg, #ffc65e, #f97316); border-color: transparent; }
.ntk-s { height: 28px; padding: 0 6px; color: var(--fg); background: var(--pane-2); border: 1px solid var(--line-2); border-radius: 4px; font-size: 12.5px; max-width: 170px; } .ntk-x { width: 24px; height: 24px; border-radius: 5px; color: var(--muted); font-size: 16px; line-height: 1; } .ntk-x:hover { color: #ff5d6c; background: rgba(255,93,108,.12); }
.menu.pick { width: 360px; display: grid; gap: 6px; } .pk-find { height: 34px; padding: 0 10px; color: var(--fg); background: rgba(255,255,255,.05); border: 1px solid var(--line-2); border-radius: 9px; outline: none; } .pk-find:focus { border-color: rgba(255,198,94,.6); }
.pk-list { display: grid; gap: 2px; max-height: 44vh; overflow-y: auto; } .pk-list .note { margin: 0; padding: 12px 8px; }
.pk-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; transition: background .12s; } .pk-row:hover { background: rgba(255,198,94,.09); } .pk-row:has(input:checked) { background: rgba(255,198,94,.13); } .pk-row span { display: grid; min-width: 0; } .pk-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-row em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; }
.pk-row input, .pk-chk input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: #f59e0b; } .pk-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 6px 2px; border-top: 1px solid var(--line-2); } .pk-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; } .pk-foot .acm-pill { margin-left: auto; width: auto; }
.menu.pop .mpnl { margin-left: auto; padding-left: 14px; font: 700 12.5px var(--sans); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; } .mpnl.up { color: var(--cup, #26a69a); } .mpnl.down { color: var(--cdown, #f23645); }
.acm-go { padding: 0; color: inherit; font: inherit; } .acm-go:hover b { color: var(--blue); } .acm-tot td { border-bottom: 1px solid var(--line-2); font-weight: 700; }
.acm-fx { width: 20px; height: 18px; border-radius: 5px; color: var(--muted); font-size: 15px; line-height: 16px; } .acm-fx:hover { background: var(--down); color: #fff; }
.acm-sw { display: inline-flex; align-items: center; gap: 7px; margin-right: 10px; color: var(--muted); font-size: 12.5px; cursor: pointer; white-space: nowrap; } .acm-sw:hover { color: var(--fg); }
.acm-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.acm-sw i { position: relative; width: 28px; height: 16px; border-radius: 8px; background: var(--line-2); transition: background .15s; }
.acm-sw i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .15s; }
.acm-sw input:checked + i { background: var(--blue); } .acm-sw input:checked + i::after { transform: translateX(12px); }
.acm-sw input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; }
/* BE + ATM (11/3): BE shows over the chart while a position is open; the ATM picker sits beside BUY, Tradovate's "ATM [OFF ▾]" */
.qtr .qbe { min-width: 50px; background: rgba(42,46,57,.94); color: #ffc65e; box-shadow: inset 0 0 0 1px rgba(255,198,94,.35); } .qtr .qbe[hidden] { display: none; }
.qtr .qatm, .ot-atm .qatm { min-width: 0; flex-direction: row; gap: 7px; padding: 0 26px 0 10px; position: relative; background: rgba(19,23,34,.92); border: 1px solid var(--line-2); color: #d1d4dc; }
.qtr .qatm small { margin: 0; font-size: 9px; opacity: .6; } .qtr .qatm b, .ot-atm .qatm b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qatm::after { content: ''; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: .7; }
.qatm.on { border-color: rgba(8,153,129,.9); box-shadow: inset 0 0 0 1px rgba(8,153,129,.5); } .qatm.on b { color: #2fd8b4; }
.ot-atm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--pane); }
.ot-atm > span { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.ot-atm .qatm { height: 32px; border-radius: 4px; display: flex; align-items: center; font-size: 13px; }
.ot-atm-set { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--line-2); color: var(--muted); margin-left: auto; } .ot-atm-set:hover { color: var(--fg-2); } .ot-atm-set svg { width: 17px; height: 17px; }
.ot-atm small { flex: 0 0 100%; color: #2fd8b4; font-size: 12px; }
.ot-br input:disabled { opacity: .75; }
.atmset { display: grid; gap: 9px; }
.am-r { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 10px; } .am-r[hidden] { display: none; }
.am-r > span { font: 700 10.5px/1.25 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .am-r > span small { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11px; opacity: .8; }
.am-c { display: flex; gap: 6px; align-items: center; min-width: 0; }
.am-c select, .am-c input { flex: 1; min-width: 0; height: 34px; background: #000; border: 1px solid var(--line-2); border-radius: 4px; color: #f0f3fa; padding: 0 9px; font: 600 13.5px var(--sans); outline: none; } .am-c select:focus, .am-c input:focus { border-color: var(--blue); }
.am-c input[type=number] { text-align: right; font-variant-numeric: tabular-nums; } .am-c em { font-style: normal; color: var(--muted); font-size: 12px; min-width: 34px; }
.am-seg { display: inline-flex; background: #000; border: 1px solid var(--line-2); border-radius: 4px; padding: 2px; } .am-seg button { padding: 5px 14px; border-radius: 3px; color: var(--muted); font: 600 13px var(--sans); }
.am-seg button.on { background: #2a2e39; color: #fff; } .am-seg button.on[data-v="1"] { background: #089981; }
.am-ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 4px; background: #2962ff; position: relative; } .am-ic::before, .am-ic::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin: -1px 0 0 -6.5px; background: #fff; border-radius: 1px; } .am-ic::after { transform: rotate(90deg); }
.am-h { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-2); font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #ffc65e; }
.atmset .note { margin: 4px 0 0; }
/* 11/5: with Auto breakeven on the box outgrew the window and Save was cut off. The box is taller now, its rows scroll, and Save stays pinned at the bottom */
.modal:has(> .atmset) { max-height: min(820px, 100%); grid-template-rows: auto minmax(0, 1fr); }
.atmset { overflow-y: auto; overscroll-behavior: contain; }
.atmset .mbtns { position: sticky; bottom: -12px; z-index: 1; margin: 4px -12px -12px; padding: 12px; background: var(--pane); border-top: 1px solid var(--line-2); }
@media (max-width: 480px) { .am-r { grid-template-columns: 104px minmax(0, 1fr); } }
/* phones: BE and the ATM picker drop to a second row under SELL · qty · BUY instead of running onto the price scale */
@media (max-width: 560px) { .qtr { flex-wrap: wrap; max-width: calc(100vw - 150px); } .qtr button { min-width: 66px; } .qtr .qatm small { display: none; } }
/* watchlists (11/3), TradingView's way: the list's name + menu, sections that fold, Symbol · Last · Chg · Chg% */
.wl-h, .wl-r { grid-template-columns: minmax(0, 1fr) 70px 64px 56px; }
.wl-top-h { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 8px 0 6px; border-bottom: 1px solid var(--line); }
.wl-name { display: flex; align-items: center; gap: 8px; max-width: 75%; padding: 5px 8px; border-radius: 5px; font: 700 13.5px var(--sans); color: var(--fg-2); } .wl-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wl-name:hover { background: var(--pane); }
.wl-cv { flex: none; width: 6px; height: 6px; margin-top: -4px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); opacity: .7; }
.wl-top-h .wl-add { width: 26px; height: 26px; margin: 0; }
.wl-s { display: flex; align-items: center; gap: 9px; height: 30px; margin-top: 4px; padding: 0 12px; color: var(--muted); font: 600 11px var(--sans); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; user-select: none; } .wl-s:hover { color: var(--fg-2); }
.wl-c { flex: none; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .15s; } .wl-s.shut .wl-c { margin-top: 0; transform: rotate(-45deg); }
.wl-r.hid { display: none; }
.wl-empty { padding: 18px 14px; color: var(--muted); font-size: 12.5px; }
.menu .wl-lr { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; padding-right: 6px; } .menu .wl-lr > button:first-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .wl-del { position: relative; width: 26px; height: 26px; padding: 0; justify-content: center; border-radius: 4px; color: var(--muted); } .menu .wl-del:hover { color: #ff5d6c; background: var(--pane-2); }
.menu .wl-del::before, .menu .wl-del::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; border-radius: 1px; background: currentColor; } .menu .wl-del::before { transform: rotate(45deg); } .menu .wl-del::after { transform: rotate(-45deg); }
.wl-top-h { position: sticky; top: 0; z-index: 4; background: var(--bg); } .wl-top > .wl-h { position: sticky; top: 38px; z-index: 4; background: var(--bg); }
@media (max-width: 1100px) { .wl-h, .wl-r { grid-template-columns: minmax(0, 1fr) 70px 58px; } .wl-h > span:nth-child(3), .wl-r > span:nth-of-type(3) { display: none; } }
.wl-s { position: relative; } .wl-s:hover .wl-g { opacity: 1; } .wl-s.drag { z-index: 2; background: var(--pane-2); color: var(--fg-2); cursor: grabbing; } body.wl-move .wl-s { cursor: grabbing; }

/* 11/3 pre-video: room under the sticky buttons (order ticket, Replay's Start session) so the last row is never hidden behind them */
.ot { padding-bottom: 64px; }
@media (max-width: 700px) { .newform { padding-bottom: 110px; } }
/* the rules governor (Rules tab) */
.gv-rules { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 12px; }
@media (max-width: 760px) { .gv-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gv-f small { color: var(--muted); font-size: 11px; }
.gv-in { display: flex; align-items: center; height: 30px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--pane-2); padding: 0 8px; gap: 4px; }
.gv-in:focus-within { border-color: var(--blue); } .gv-in em { font-style: normal; color: var(--muted); }
.gv-in input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; color: var(--fg); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; }
.gv-name { height: 30px; min-width: 170px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--pane-2); color: var(--fg); font-size: 13px; }
.gv-lock { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--down); padding: 2px 6px; border-radius: 4px; }
.gv-ok { font-size: 12px; font-weight: 700; color: var(--up); }
/* the version on screen (bottom bar); gold when a newer version is live */
.bot .ver { color: var(--muted); font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bot .ver:hover { color: var(--fg); }
.bot .ver.upd { color: #1a1206; background: linear-gradient(92deg, #ffd27a, #f97316); font-weight: 700; border-radius: 4px; animation: verpulse 2s ease-in-out infinite; }
@keyframes verpulse { 50% { box-shadow: 0 0 0 4px rgba(249,115,22,.25); } }
@media (prefers-reduced-motion: reduce) { .bot .ver.upd { animation: none; } }
/* 11/7 phones: the demo/delayed price bar wraps instead of pushing its button into the price scale */
@media (max-width: 600px) { .pxbar { flex-wrap: wrap; row-gap: 4px; padding-block: 4px; } .pxbar span { display: none; } }