/* Grid: everything sits on a 4px scale. One flat surface, as the landing page and the bot setup (owner, 2026-10-03: the
     Terminal must clearly belong to them): the panels sit on the page colour, divided by 1px hairlines (the grid's 1px gap
     shows the line colour behind them), no cards and no gutters; 16px side padding in every panel, 12px between the
     controls; 36px panel headers; the shared type scale (radar/theme.py): 12 (labels and data), 13 (tabs), 14 (controls),
     20-24 (the price). Fields, segmented controls and checkboxes as in the bot setup (radar/web/bot-flow.css): filled,
     8px corners, no borders. Numbers are tabular and right-aligned.
     Desktop as on a pro exchange: the chart takes most of the height, a narrow order book beside it, the order panel on
     the right over the full height, positions and orders below the chart. Phone as on an exchange app: order panel and
     book side by side, positions below, the chart one tap away above the app's tab bar. */
  :root { --g: 1px; --pad: 16px; --ph: 36px; --top: 48px; --r: 0px; --row: 20px; --trow: 32px; --bottom-h: 480px; --tick-h: 64px; --trades-h: 208px; --tb-h: var(--rv-tabs-h); --cb-h: 40px;
          --gh: calc(var(--rv-header-h) + var(--rv-lb-h, 0px)); --fs-xs: var(--rv-fs-xs); --fs-s: var(--rv-fs-xs); --fs-m: var(--rv-fs-md); --fs-l: var(--rv-fs-lg); --form-w: 296px; --book-w: 280px; --strat-w: 344px; --dtb-w: 40px; }
  html, body { margin: 0; height: 100%; }
  body { background: var(--rv-bg); color: var(--rv-text); font: 400 var(--fs-m)/20px var(--rv-font);
         -webkit-font-smoothing: antialiased; font-feature-settings: "tnum"; overflow-x: hidden; overflow-y: auto; }
  /* the Terminal's surfaces, as aliases of the theme's tokens: the panels are the page itself; fields and quiet buttons a
     step above it (the bot setup's bg-1 / bg-2 in the dark, the light grey on white). Sheets, menus and toasts sit outside
     #term and keep the raised panel colours. */
  #term { --rv-panel: var(--rv-bg); --rv-sunk: var(--rv-bg-1); --rv-btn2: var(--rv-bg-2); --rv-btn2-hover: var(--rv-bg-3); --fld-on: var(--rv-bg-3); }
  [data-theme="light"] #term { --rv-sunk: var(--rv-bg-0); --rv-btn2: var(--rv-bg-0); --rv-btn2-hover: var(--rv-bg-3); --fld-on: var(--rv-bg-1); }
  a { color: inherit; text-decoration: none; }
  button, input, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
  .num { font-variant-numeric: tabular-nums; }
  .up { color: var(--rv-pos); } .dn { color: var(--rv-neg); } .mut { color: var(--rv-muted); } .dim { color: var(--rv-dim); }
  svg.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .sp { flex: 1; min-width: 0; }

  /* ---- top bar: exchange, market, the ticker figures, account ---- */
  /* the ticker: a panel over the chart, as on an exchange's futures page (symbol, price, mark, index, funding, 24h figures) */
  .top.p { grid-column: 1 / 3; grid-row: 1; flex-direction: row; display: flex; align-items: center; gap: 16px; padding: 0 var(--pad); position: relative; z-index: 3; }
  .brand { display: flex; align-items: center; gap: 8px; font-weight: 500; letter-spacing: .24em; font-size: var(--fs-xs); flex: none; margin-right: 4px; }
  .brand svg { width: 12px; height: 16px; }
  .brand .t { letter-spacing: .02em; font-size: var(--fs-m); font-weight: 500; color: var(--rv-muted); padding-left: 8px; border-left: 1px solid var(--rv-line2); line-height: 16px; }
  .pick { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 12px; border-radius: var(--rv-r-sm); border: 1px solid transparent;
          background: var(--rv-sunk); flex: none; white-space: nowrap; min-width: 0; }
  .pick:hover, .pick.on { border-color: var(--rv-accent-line); }
  .pick svg.i { color: var(--rv-muted); }
  .vsel { font-size: var(--fs-m); font-weight: 500; }
  .vsel .vl { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* the exchange: its round mark (the one venue mark, radar/coins.py) with the account status on its corner (green: ready,
     amber: connecting; nothing while not connected), then its name; never a hollow ring */
  .vsel > .dot { display: none; }
  .vlg { display: inline-block; position: relative; flex: none; width: 16px; height: 16px; }
  .vlg img { display: block; width: 16px; height: 16px; }
  .vlg .dot { position: absolute; right: -3px; bottom: -3px; width: 8px; height: 8px; border: 2px solid var(--rv-panel); box-sizing: border-box; }
  .vlg .dot:not(.ok):not(.wait) { display: none; }
  .mkt { font-size: var(--rv-fs-title); font-weight: 600; background: none; padding: 0 4px 0 0; gap: 6px; height: 32px; margin-left: -8px; }
  .mkt:hover, .mkt.on { border-color: transparent; } .mkt:hover #mkt-c { color: var(--rv-accent); }
  .mkt .q { color: inherit; font-weight: 500; }
  #mkt-i { display: flex; margin-right: 2px; } #mkt-i:empty { display: none; }
  .mkt .tag { font-size: var(--fs-xs); line-height: 16px; font-weight: 500; color: var(--rv-muted); padding: 0 4px; border-radius: var(--rv-r-xs); background: var(--rv-btn2); }
  .vsel { height: 28px; font-size: var(--fs-s); padding: 0 4px 0 8px; gap: 6px; }
  .fav { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--rv-r-xs); background: var(--rv-btn2); color: var(--rv-muted); padding: 0; }
  .fav svg.i { width: 14px; height: 14px; } .fav:hover { color: var(--rv-text); }
  .fav.on { color: var(--rv-accent); } .fav.on svg.i { fill: currentColor; }
  .dot { width: 8px; height: 8px; border-radius: 999px; flex: none; background: transparent; box-shadow: inset 0 0 0 1.5px var(--rv-dim); }
  .dot.ok { background: var(--rv-pos); box-shadow: none; } .dot.wait { background: var(--rv-warn); box-shadow: none; }
  .chg { font-size: var(--fs-s); line-height: 24px; height: 24px; padding: 0 8px; border-radius: var(--rv-r-xs); font-weight: 500; font-variant-numeric: tabular-nums; flex: none;
         background: var(--rv-sunk); color: var(--rv-muted); }
  .chg.up { background: var(--rv-pos-soft); color: var(--rv-pos); } .chg.dn { background: var(--rv-neg-soft); color: var(--rv-neg); }
  /* every figure on one line, as on Binance: what does not fit scrolls sideways (the arrow at the end, the wheel or a swipe) */
  .stats { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; height: 40px; min-width: 0; flex: 0 1 auto; overflow-x: auto; overflow-y: hidden;
           scrollbar-width: none; overscroll-behavior-x: contain; }
  .stats::-webkit-scrollbar { display: none; } .stats.fade { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .st-more { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--rv-r-xs); background: none; color: var(--rv-muted); padding: 0; margin-left: -8px; }
  .st-more:hover { color: var(--rv-text); background: var(--rv-btn2); } .st-more[hidden] { display: none; } .st-more.end svg { transform: rotate(180deg); }
  .stat { display: grid; gap: 0; white-space: nowrap; flex: none; }
  /* a long language: labels wrap at a space (never mid-word) over their figure, figures on one line at the bottom */
  .stats.wrap { align-items: flex-end; height: 50px; padding-bottom: 3px; }
  .stats.wrap .stat:not(.px) .k { white-space: normal; width: min-content; min-width: 100%; line-height: 14px; overflow-wrap: normal; }
  .stat .k { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); }
  .stat .v { font-size: var(--fs-s); line-height: 16px; font-variant-numeric: tabular-nums; }
  .stat .v .sub { color: var(--rv-dim); margin-left: 4px; }
  .stat.px .v { font-size: var(--rv-fs-title); line-height: 24px; font-weight: 600; min-width: 80px; }
  .stat.px .k { line-height: 16px; }
  .stat.px .k.up { color: var(--rv-pos); } .stat.px .k.dn { color: var(--rv-neg); }
  /* the ticker, desktop (owner, 2026-09-29: "exactly aligned"): one grid of two rows for every figure. The labels share
     one top line (the price's 24h change sits on it, over the price); the values share one baseline, the price's
     included; the pickers are centred on the bar's axis; the exchange is text and a caret, no box; a hairline between
     the pickers and the figures; tabular numerals; the funding rate in colour, its countdown grey */
  @media (min-width: 861px) {
    .fav { background: none; color: var(--rv-dim); margin-right: -8px; }
    .mkt { letter-spacing: -.01em; }
    .mkt .tag { background: none; padding: 0; color: var(--rv-dim); font-weight: 400; letter-spacing: 0; }
    .mkt > svg.i, .vsel > svg.i { color: var(--rv-dim); }
    .vsel { background: none; border: 0; padding: 0 6px; margin-left: -6px; font-size: var(--fs-m); font-weight: 500; color: var(--rv-muted); }
    .vsel:hover, .vsel.on { background: none; color: var(--rv-text); }
    /* the figures: the price as the hero (24px), then label over value pairs at one even spacing, after a hairline */
    .stats { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-template-rows: auto auto; column-gap: 20px; row-gap: 2px;
             align-items: baseline; align-content: center; height: auto; min-height: 40px; padding-left: 20px; margin-left: 4px; box-shadow: inset 1px 0 var(--rv-line); }
    .stats.wrap { height: auto; padding-bottom: 0; align-items: baseline; }     /* no wrapped labels: what does not fit scrolls (the arrow), the grid stays two lines */
    .stats.wrap .stat:not(.px) .k { white-space: nowrap; width: auto; min-width: 0; line-height: 16px; }
    .stat { display: contents; }
    .stat .k { grid-row: 1; align-self: start; white-space: nowrap; }
    .stat .v { grid-row: 2; font-size: var(--rv-fs-13); line-height: 16px; white-space: nowrap; }
    .stat .v .dim { color: var(--rv-dim); }
    .stat.px .k { order: -1; font-weight: 500; font-variant-numeric: tabular-nums; }
    .stat.px .v { font: 600 var(--rv-fs-24)/28px var(--rv-font-display); letter-spacing: -.015em; min-width: 0; margin-right: 8px; }
  }
  /* a 1000-1199px window: the same bar, tighter, so the price and the funding keep their room */
  @media (min-width: 861px) and (max-width: 1199px) {
    .top.p { gap: 12px; } .stats { column-gap: 16px; padding-left: 16px; margin-left: 0; } .stat.px .v { margin-right: 0; }
  }
  .acct { display: none !important; }
  .hbtn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--rv-r-sm); border: 1px solid transparent;
          background: none; font-size: var(--fs-s); color: var(--rv-muted); flex: none; }
  .hbtn:hover { background: var(--rv-btn2); color: var(--rv-text); } .hbtn.on { border-color: var(--rv-accent-line); color: var(--rv-accent); background: var(--rv-accent-soft); }
  .hbtn .cnt { font-size: var(--fs-xs); line-height: 16px; min-width: 16px; padding: 0 4px; border-radius: var(--rv-r-sm); background: var(--rv-line2); text-align: center; }
  .hbtn.icon { width: 32px; padding: 0; justify-content: center; }
  #b-ind, #b-strat { padding: 0 8px; gap: 4px; }
  @media (max-width: 1499px) { #b-keys { display: none; } }

  /* ---- the grid of panels ---- */
  /* as on Binance's futures page: the ticker over the chart and the book (room for every figure); order book over trades; the order panel the full height; positions
     and the account below, the page scrolls to them */
  /* one surface: the 1px gap between the panels shows the hairline colour behind them, whatever the layout preset */
  .term { display: grid; padding: 0; gap: var(--g); background: var(--rv-line); border-bottom: 1px solid var(--rv-line);
          grid-template-columns: minmax(0, 1fr) var(--book-w) var(--form-w);
          grid-template-rows: var(--tick-h) max(300px, calc(100vh - var(--gh) - var(--tick-h) - var(--trades-h) - 184px)) var(--trades-h) var(--bottom-h); }
  .p { background: var(--rv-panel); border: 0; border-radius: var(--r); min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .ph { height: var(--ph); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 var(--pad); border-bottom: 1px solid var(--rv-line); font-size: var(--fs-s); }
  /* a panel's own title (Account): quiet, as the bot setup's section labels */
  .ph h2 { margin: 0; font-size: var(--rv-fs-13); font-weight: 500; color: var(--rv-muted); }
  .ph .src { font-size: var(--fs-xs); color: var(--rv-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .pb { flex: 1; min-height: 0; position: relative; }
  .chart { grid-column: 1; grid-row: 2 / 4; }
  .book { grid-column: 2; grid-row: 2 / 4; }
  .form { grid-column: 3; grid-row: 1 / 4; }
  .bottom { grid-column: 1 / 3; grid-row: 4; }
  .acctp { grid-column: 3; grid-row: 4; }
  .strat { display: none; }
  .only-m, .xb.only-m, .hbtn.only-m, .cbar { display: none; }

  /* segmented control (the bot setup's .bf-seg): a filled track, the chosen part a step lighter (white on light) */
  :root { --fld-on: var(--rv-btn2); }
  .seg { display: inline-flex; height: 24px; padding: 2px; gap: 2px; border-radius: var(--rv-r-xs); background: var(--rv-sunk); flex: none; }
  .seg button { border: 0; background: none; height: 20px; padding: 0 8px; border-radius: var(--rv-r-xs); font-size: var(--fs-xs); line-height: 20px; color: var(--rv-muted); white-space: nowrap; }
  .seg button:hover { color: var(--rv-text); }
  .seg button.on { background: var(--fld-on); color: var(--rv-text); }
  [data-theme="light"] #term .seg button.on { box-shadow: 0 0 0 1px var(--rv-line); }
  .seg button svg.i { width: 12px; height: 12px; vertical-align: -2px; margin-left: 2px; }
  .seg.lg { display: grid; grid-template-columns: 1fr 1fr; height: 32px; padding: 2px; width: 100%; border-radius: var(--rv-r-sm); }
  .seg.lg button { height: 28px; line-height: 28px; font-size: var(--rv-fs-13); font-weight: 500; border-radius: var(--rv-r-xs); }
  .seg.lg button.on.l, .seg.lg button.on.s { background: var(--fld-on); color: var(--rv-text); font-weight: 500; }
  .seg.lg.w3 { grid-template-columns: repeat(3, 1fr); } .seg.lg button:disabled { opacity: .4; cursor: default; }
  /* the chart's timeframes: plain words, the chosen one bright (as on an exchange's chart bar) */
  .seg.tfs { background: none; padding: 0; gap: 0; }
  .seg.tfs button { padding: 0 6px; font-size: var(--fs-xs); }
  .seg.tfs button.on { background: none; color: var(--rv-text); font-weight: 500; }
  .cview { display: flex; align-items: center; gap: 12px; height: 24px; margin-left: 4px; padding-left: 12px; box-shadow: inset 1px 0 var(--rv-line); flex: none; }
  .cview button { border: 0; background: none; padding: 0; height: 24px; font-size: var(--fs-xs); color: var(--rv-muted); white-space: nowrap; }
  .cview button:hover { color: var(--rv-text); } .cview button.on { color: var(--rv-text); font-weight: 500; }
  /* a narrow chart (the Terminal at ~1000px, the Bot Terminal's chart beside its panel): the view switch and the exchange
     label move into the "more" menu (as on Binance's chart bar), then Indicators shows its icon only; the bar never scrolls */
  .chart { container: chartp / inline-size; }
  #b-cmore { display: none; }
  #p-chart:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
  @media (max-width: 860px) {
    @container chartp (max-width: 559px) { #p-chart .cview, #p-chart #chart-src { display: none; } #p-chart #b-cmore { display: inline-flex; } }
    @container chartp (max-width: 459px) { #p-chart #b-ind { padding: 0 6px; } #p-chart #b-ind .lb { display: none; } #p-chart #b-ind svg.i { display: block; } }
  }
  /* the bar is measured (chartBarFit), not guessed from its width, so a long language, a wide count, a dragged panel or
     a phone never cuts a word or pushes a tool off the screen: each step (cf1..cf8, cumulative) is taken only while
     something still does not fit. 1 the chart's exchange into ⋯, 2 Display as its icon, 3 the view switch into ⋯,
     4 Indicators as its icon, 5 tighter gaps and timeframes, 6 full screen into ⋯ (desktop), 7 alerts into ⋯, 8 the
     timeframes but the chosen one into More (a 360px phone stops at 7: every timeframe stays one tap away) */
  #p-chart > .ph.cf1 #chart-src, #p-chart > .ph.cf3 .cview, #p-chart > .ph.cf6 #b-fs, #p-chart > .ph.cf7 #b-alert { display: none; }
  #p-chart > .ph:is(.cf1, .cf3, .cf6, .cf7) #b-cmore { display: inline-flex; }
  #p-chart > .ph.cf2 #b-disp { width: 24px; padding: 0; justify-content: center; } #p-chart > .ph.cf2 #b-disp .lb { display: none; } #p-chart > .ph.cf2 #b-disp svg.i { display: block; }
  #p-chart > .ph.cf4 #b-ind { padding: 0 6px; } #p-chart > .ph.cf4 #b-ind .lb { display: none; } #p-chart > .ph.cf4 #b-ind svg.i { display: block; }
  #p-chart > .ph.cf5 #tf > button { padding: 0 4px; }
  #p-chart > .ph.cf8 #tf > button[data-v]:not(.on) { display: none; }
  .depth { position: absolute; inset: 0; z-index: 2; background: var(--rv-panel); }
  .depth svg { display: block; width: 100%; height: 100%; }
  .depth text { font-size: 12px; fill: var(--rv-dim); font-variant-numeric: tabular-nums; }
  .depth .ttl { fill: var(--rv-muted); }
  /* one panel, two tabs as on Binance: Order book | Trades, drawn as the order panel's Order tab; the book's layout and
     price step at the tab row's right end while the book is shown */
  .book .tabs { gap: 0; } .book .tabs button[data-b] { flex: none; } .book .tabs button[data-b] + button[data-b] { margin-left: 16px; }
  .bk-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; padding-left: 8px; flex: none; min-width: 0; }
  .bk-tools[hidden] { display: none; }
  /* order book layout: both sides, bids only, asks only */
  .bkv { display: flex; gap: 2px; flex: none; }
  .bkv button { width: 24px; height: 24px; border: 0; border-radius: var(--rv-r-xs); background: none; padding: 5px 6px; display: grid; gap: 2px; opacity: .45; }
  .bkv button:hover { opacity: .8; } .bkv button.on { opacity: 1; background: var(--rv-sunk); }
  .bkv i { display: block; border-radius: var(--rv-r-xs); } .bkv i.a { background: var(--rv-down); } .bkv i.b { background: var(--rv-up); }
  .bkv button:not(.on) i { background: var(--rv-dim); }      /* colour only on the chosen layout */

  /* chart: a slim drawing toolbar on the left, the chart beside it */
  .fsw { display: none; }             /* the phone's Order | Bot switch (radar/web/terminal-bots.js shows it) */
  .ph .src.lnk { cursor: pointer; } .ph .src.lnk:hover { color: var(--rv-text); }
  .dtb { position: absolute; left: 0; top: 0; bottom: 0; width: var(--dtb-w); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0;
         border-right: 1px solid var(--rv-line); overflow-y: auto; scrollbar-width: none; z-index: 2; }
  .dtb::-webkit-scrollbar { display: none; }
  .dtb button { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--rv-r-sm); background: none; color: var(--rv-dim); padding: 0; }
  .dtb button:hover { color: var(--rv-text); background: var(--rv-btn2); }
  .dtb button.on { color: var(--rv-accent); background: var(--rv-accent-soft); }
  .dtb button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .dtb hr { width: 24px; height: 1px; border: 0; margin: 2px 0; background: var(--rv-line); flex: none; }
  .dtb button[data-m=strong] svg { fill: currentColor; fill-opacity: .28; }       /* strong magnet: the icon filled */
  .dtb button.held { color: var(--rv-accent); background: var(--rv-accent-soft); }  /* Ctrl / Cmd held: a magnet for now */
  .dtip { position: absolute; left: calc(var(--dtb-w) + 8px); z-index: 4; transform: translateY(-50%); max-width: 240px; padding: 6px 8px;
          border-radius: var(--rv-r-xs); background: var(--rv-btn2); color: var(--rv-muted); font-size: var(--fs-xs); line-height: 16px; pointer-events: none; white-space: nowrap; }
  .dtip b { display: block; color: var(--rv-text); font-weight: 500; }
  #chart { position: absolute; left: var(--dtb-w); top: 0; right: 0; bottom: 0; }
  .ovl { position: absolute; left: var(--dtb-w); top: 0; right: 0; bottom: 0; display: grid; place-items: center; text-align: center; font-size: var(--fs-s); color: var(--rv-muted); padding: 16px; pointer-events: none; z-index: 1; }
  #p-chart.nod #chart { visibility: hidden; }
  .dhint { position: absolute; left: calc(var(--dtb-w) + 12px); bottom: 36px; z-index: 3; font-size: var(--fs-xs); line-height: 16px; padding: 4px 8px; border-radius: var(--rv-r-xs);
           background: var(--rv-btn2); border: 0; color: var(--rv-muted); pointer-events: none; }

  /* order book and trades: a narrow column */
  .bk-h, .bk-r { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4px; padding: 0 var(--pad); height: var(--row); align-items: center; font-size: var(--fs-s); line-height: var(--row); }
  .bk-h { height: 24px; font-size: var(--fs-xs); color: var(--rv-dim); }
  .bk-h span, .bk-r span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .bk-h span:not(:first-of-type), .bk-r span:not(:first-of-type) { text-align: right; }
  .bk-r { position: relative; font-variant-numeric: tabular-nums; }
  .bk-r i { position: absolute; top: 1px; bottom: 1px; right: 0; opacity: .08; pointer-events: none; }
  .bk-r.a i { background: var(--rv-down); } .bk-r.b i { background: var(--rv-up); }
  .bk-r.a span:first-of-type { color: var(--rv-neg); } .bk-r.b span:first-of-type { color: var(--rv-pos); }
  .bk-r:hover { background: var(--rv-panel2); cursor: pointer; }
  .bk-m { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 var(--pad);
          font-variant-numeric: tabular-nums; }
  .bk-m b { font-size: var(--rv-fs-title); line-height: 24px; font-weight: 600; } .bk-m span { font-size: var(--fs-xs); color: var(--rv-muted); white-space: nowrap; }
  .bk-m .mk { margin-right: auto; cursor: help; }
  .bk-m.v1 { justify-content: flex-start; gap: 12px; overflow: hidden; }
  .bk-asks { display: flex; flex-direction: column-reverse; }
  .bk-bs { height: 28px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center;
           padding: 0 var(--pad); border-top: 1px solid var(--rv-line); font-size: var(--fs-xs); color: var(--rv-muted); font-variant-numeric: tabular-nums; }
  .bk-bs .bar { height: 2px; border-radius: 2px; background: var(--rv-neg); opacity: .7; overflow: hidden; }
  .bk-bs .bar i { display: block; height: 100%; background: var(--rv-pos); }
  .bk-f { display: none; }
  .gb { display: inline-flex; align-items: center; justify-content: space-between; gap: 2px; height: 24px; padding: 0 4px 0 8px; border-radius: var(--rv-r-xs); border: 0; background: none;
        font-size: var(--fs-xs); color: var(--rv-muted); font-variant-numeric: tabular-nums; flex: none; }
  .gb svg.i { width: 12px; height: 12px; color: inherit; }
  .trs { overflow-y: auto; position: absolute; top: 24px; bottom: 0; left: 0; right: 0; }
  .note { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); padding: 8px var(--pad); }

  /* ---- order panel ---- */
  .fm { padding: 12px var(--pad) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; overflow-y: auto; align-content: start; }
  /* the order form keeps one width whether it scrolls or not (owner, 2026-09-30: a scrollbar in Open, none in Close,
     narrowed every field by its width): a thin bar's room is always kept, and the panel's title row keeps its right
     edge on the fields' (--sbf: that room, measured in renderForm; 0 with overlay scrollbars) */
  #form.fm { scrollbar-gutter: stable; scrollbar-width: thin; }
  html:not(.tm-bot) .form > .ph { padding-right: calc(var(--pad) + var(--sbf, 0px)); }
  /* the account under it keeps the same right edge (one column of figures from the order panel down) */
  html:not(.tm-bot) .acctp > .ph, html:not(.tm-bot) .acctp > .ac { padding-right: calc(var(--pad) + var(--sbf, 0px)); }
  .al.pr b.up { color: var(--rv-pos); } .al.pr b.dn { color: var(--rv-neg); }
  .al.pr > * { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .al.pr > :first-child { flex: none; }
  /* tabs as the bot setup's step labels: 13px, one weight (no width jump), the chosen one bright over a 2px line */
  .tabs { gap: 20px; padding: 0 var(--pad); }
  .tabs button { height: var(--ph); border: 0; background: none; padding: 0; font-size: var(--rv-fs-13); font-weight: 500; color: var(--rv-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
  .tabs button.on { color: var(--rv-text); border-bottom-color: var(--rv-accent); font-weight: 500; }
  .tabs .n { font-size: inherit; color: inherit; margin-left: 0; }
  .tabs .xb { margin-left: auto; }
  .tabs .os { display: none; }
  .tabs button:hover { color: var(--rv-text); }
  /* the book's tools on its tab row keep their own look (not tabs) */
  .tabs .bk-tools button { height: 24px; margin-bottom: 0; border-bottom: 0; font-weight: 400; }
  .tabs .bkv button { width: 18px; padding: 5px 3px; background: none; } .tabs .bkv button.on { background: var(--rv-sunk); }
  .tabs .bk-tools .gb { padding: 0 0 0 6px; background: none; font-size: var(--fs-xs); color: var(--rv-muted); }
  .gb .gi { display: none; }
  /* a long language or a long price step: the layout choice moves into the price step's menu, then the step's figure
     gives way to an icon (the menu holds both); the tabs never overlap the tools */
  .bkt.fit #bk-view { display: none; }
  .bkt.fit2 #bk-grp { width: 24px; padding: 0; justify-content: center; } .bkt.fit2 #bk-grp > :not(.gi) { display: none; } .bkt.fit2 #bk-grp .gi { display: block; }
  .fv { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 0 0 4px; border-radius: var(--rv-r-xs); border: 0; background: none;
        font-size: var(--rv-fs-13); font-weight: 500; color: var(--rv-muted); white-space: nowrap; min-width: 0; }
  .fv:hover { color: var(--rv-text); } .fv svg.i { width: 12px; height: 12px; color: var(--rv-dim); }
  .mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* margin mode and leverage: small grey buttons at the top of the order panel, as on an exchange */
  /* (Binance's row): the two share the row evenly, the settings ⋯ a compact icon on the panel's right content edge */
  .mtop { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mtop .mb { flex: 1 1 0; min-width: 0; height: 28px; padding: 0 8px; border-radius: var(--rv-r-sm); border: 0; background: var(--rv-sunk); font-size: var(--rv-fs-13);
              font-weight: 500; color: var(--rv-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
  .mtop .mb:hover:not(:disabled) { background: var(--rv-btn2); } .mtop .mb:disabled { opacity: .5; cursor: default; }
  .mtop .xb { width: 28px; height: 28px; flex: none; }
  @media (max-width: 860px) { .mtop { gap: 4px; } }
  .ib { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 0; padding: 0; background: none; color: var(--rv-dim); cursor: help; flex: none; }
  .ib svg.i { width: 14px; height: 14px; } .ib:hover { color: var(--rv-text); }
  .al .xf { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px; color: var(--rv-accent); vertical-align: -3px; }
  .al .xf svg.i { width: 14px; height: 14px; }
  .chip { display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 32px; padding: 0 8px 0 12px; border-radius: var(--rv-r-sm); border: 1px solid transparent;
          background: var(--rv-sunk); font-size: var(--fs-s); font-weight: 500; min-width: 0; white-space: nowrap; }
  .chip span { overflow: hidden; text-overflow: ellipsis; } #tb-mm span { overflow: visible; flex: none; } #tb-mm { min-width: max-content; } .mrow:has(> #tb-mm) { grid-template-columns: minmax(max-content, 1fr) minmax(0, 1fr); }
  .chip:hover { background: var(--rv-btn2); } .chip svg.i { color: var(--rv-muted); }
  /* the order types, 16px apart; in a long language on a narrow panel (Vietnamese at 1000px) the spaces give way to 6px
     first, so no word is cut and the info button stays inside the panel */
  .otabs { display: flex; gap: 0; height: 20px; align-items: center; }
  .otabs .og { flex: 0 1 16px; min-width: 6px; } .otabs .sp { min-width: 6px; }
  .otabs button { border: 0; background: none; padding: 0; height: 20px; font-size: var(--fs-m); color: var(--rv-muted); white-space: nowrap; }
  .otabs button:hover { color: var(--rv-text); }
  .otabs button.on { color: var(--rv-text); font-weight: 500; }
  .otabs button.x { color: var(--rv-dim); cursor: help; }
  .otabs button.adv { display: inline-flex; align-items: center; gap: 2px; } .otabs button.adv.on { color: var(--rv-accent); }
  .otabs button.adv svg.i { width: 12px; height: 12px; color: var(--rv-muted); } .otabs button.adv.on svg.i { color: var(--rv-accent); }
  .otabs .ib { width: 20px; height: 20px; cursor: pointer; }
  .otm { display: none; grid-template-columns: minmax(0, 1fr) 32px; gap: 8px; } .otm .ib { width: 32px; height: 32px; }
  .condk { justify-self: start; } .fm > p.tifx { margin: 0; }
  .fld .chip { height: 40px; }
  .al { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); white-space: nowrap; }
  .al b { color: var(--rv-text); font-weight: 500; font-variant-numeric: tabular-nums; }
  .why { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); border-left: 2px solid var(--rv-accent); padding: 0 0 0 8px; margin: 0; }
  /* a field (the bot setup's .bf-in): filled, 8px corners, no border at rest; the focus a quiet accent ring */
  .inp { display: flex; align-items: center; height: 36px; border-radius: var(--rv-r-sm); border: 1px solid transparent; background: var(--rv-sunk); min-width: 0;
         transition: border-color var(--rv-dur-1); }
  .inp:focus-within { border-color: var(--rv-accent-line); }
  .inp input { flex: 1; min-width: 0; width: 0; height: 34px; border: 0; background: none; outline: none; padding: 0 8px 0 12px; font-size: var(--fs-m); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
  .inp .pre { font-size: var(--fs-s); color: var(--rv-muted); padding-left: 12px; white-space: nowrap; flex: none; }
  .inp .ro { flex: 1; min-width: 0; text-align: right; padding: 0 12px; font-size: var(--fs-m); color: var(--rv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .inp .ro.acc { color: var(--rv-accent); font-weight: 500; }
  .inp.off { background: transparent; border-color: var(--rv-line); }
  .inp .u { font-size: var(--fs-s); color: var(--rv-muted); padding-right: 12px; }
  .inp .pm { width: 28px; height: 34px; flex: none; border: 0; background: none; color: var(--rv-muted); font-size: var(--fs-l); padding: 0; display: grid; place-items: center; }
  .inp .pm:hover { color: var(--rv-text); }
  .ub { display: inline-flex; align-items: center; gap: 2px; height: 24px; margin-right: 6px; padding: 0 4px 0 8px; border-radius: var(--rv-r-xs); border: 1px solid transparent; background: var(--rv-btn2);
        font-size: var(--fs-xs); color: var(--rv-text); flex: none; white-space: nowrap; }
  .ub svg.i { width: 12px; height: 12px; color: var(--rv-muted); }
  .ub:hover { border-color: var(--rv-accent-line); } .ub.on { border-color: var(--rv-accent-line); color: var(--rv-accent); }
  .ub:disabled { opacity: .5; cursor: default; } .ub:disabled:hover { border-color: transparent; }
  .ub.x { width: 24px; padding: 0; justify-content: center; margin-left: -2px; }
  .prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .fld { display: grid; gap: 4px; min-width: 0; }
  .fl { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); }
  .fld .inp { height: 40px; } .fld .inp input { height: 38px; text-align: left; padding: 0 8px 0 12px; }
  .fld .inp .ro { text-align: left; }
  .fld .bbo { height: 40px; min-width: 56px; padding: 0 12px; }
  .bbo { height: 36px; padding: 0 8px; border-radius: var(--rv-r-xs); border: 1px solid transparent; background: var(--rv-btn2); font-size: var(--fs-s); font-weight: 500; }
  .bbo.on { color: var(--rv-accent); border-color: var(--rv-accent-line); } .bbo:disabled { opacity: .5; cursor: default; }
  /* the amount slider: a track with five diamond marks (0, 25, 50, 75, 100%), as on an exchange */
  .amt { position: relative; height: 20px; }
  .amt input[type=range] { position: absolute; left: 3px; width: calc(100% - 6px); top: 2px; z-index: 2; }
  .dmk { position: absolute; left: 10px; right: 10px; top: 5px; height: 10px; z-index: 3; pointer-events: none; }
  .dmk button { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; padding: 0; border: 2px solid var(--rv-line2); border-radius: var(--rv-r-xs); background: var(--rv-panel);
                transform: rotate(45deg); pointer-events: auto; cursor: pointer; }
  .dmk button.on { border-color: var(--rv-accent); background: var(--rv-accent); } .dmk button.near { visibility: hidden; }
  .dmk button:disabled { cursor: default; }
  .amt .pv { position: absolute; right: 0; top: -18px; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); display: none; }
  input[type=range] { width: 100%; margin: 0; height: 16px; accent-color: var(--rv-accent); display: block; -webkit-appearance: none; appearance: none; background: transparent; }
  input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--rv-r-xs); background: var(--rv-line2); }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 999px; background: var(--rv-accent); border: 2px solid var(--rv-panel); }
  .amt input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--rv-accent) var(--p, 0%), var(--rv-line2) var(--p, 0%)); }
  .amt input[type=range]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -6px; border-radius: var(--rv-r-xs); transform: rotate(45deg); background: var(--rv-panel); border: 2px solid var(--rv-accent); }
  input[type=range]::-moz-range-track { height: 4px; border-radius: var(--rv-r-xs); background: var(--rv-line2); }
  input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 999px; background: var(--rv-accent); border: 2px solid var(--rv-panel); }
  input[type=range]:disabled { opacity: .5; }
  .ticks { position: relative; height: 16px; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); font-variant-numeric: tabular-nums; }
  .ticks span { position: absolute; top: 0; transform: translateX(-50%); } .ticks span:first-child { transform: none; left: 0 !important; } .ticks span:last-child { transform: none; left: auto !important; right: 0; }
  .ck { display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); line-height: 16px; color: var(--rv-text); cursor: pointer; user-select: none; }
  .ck input { width: 14px; height: 14px; margin: 0; accent-color: var(--rv-accent); flex: none; }
  .ck .mut { margin-left: auto; font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ck.off { color: var(--rv-muted); cursor: default; }
  .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sd { display: grid; gap: 4px; align-content: start; min-width: 0; }
  .sd .go { margin-bottom: 4px; }
  .bi { display: flex; justify-content: space-between; gap: 4px; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); white-space: nowrap; min-width: 0; }
  .bi .v { color: var(--rv-text); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
  .go { height: 40px; border-radius: var(--rv-r-xs); border: 0; font-size: var(--fs-m); font-weight: 500; color: #fff; background: var(--rv-up); width: 100%; padding: 0 8px; white-space: nowrap; }
  #form .sd .go { height: 44px; }      /* the order buttons: the panel's one primary action, the bot setup's height */
  .go.s { background: var(--rv-down); } .go.n { background: var(--rv-primary); color: var(--rv-primary-ink); }
  .go:disabled { opacity: .4; cursor: default; }
  /* the bot's Create button floats over the settings (pinned at the bottom): off, it is solid grey, nothing shows through it */
  #tb-go:disabled { opacity: 1; background: var(--rv-btn2); color: var(--rv-dim); }
  .go.off { cursor: pointer; }            /* full colour, as on an exchange: a tap says what is missing and focuses it */
  .go:not(:disabled):hover { filter: brightness(1.06); }
  a.go { display: grid; place-items: center; white-space: normal; text-align: center; line-height: 18px; }   /* a long label wraps inside the 40px button */
  .foot { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--rv-line); padding-top: 11px; }
  /* the order panel scrolls when its rows are taller than the window: the row at its lower edge fades out (more below)
     instead of showing the cut tops of its glyphs (formMore) */
  #form.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
  .foot b { font-weight: 500; color: var(--rv-text); font-variant-numeric: tabular-nums; }
  .ffd { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
  .hint { font-size: var(--fs-s); line-height: 16px; color: var(--rv-text); background: var(--rv-sunk); border: 0; border-radius: var(--rv-r-sm); padding: 8px 12px; }
  .hint a { color: var(--rv-accent); font-weight: 500; }
  .posbox { display: grid; gap: 0; box-shadow: inset 0 0 0 1px var(--rv-line); border-radius: var(--rv-r-sm); }
  .posbox div { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 32px; padding: 0 12px; font-size: var(--fs-s); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .posbox div > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .posbox div + div { box-shadow: inset 0 1px var(--rv-line); }
  .posbox .k { color: var(--rv-muted); }

  /* the account under the order panel: this exchange's balance, as an exchange's futures account box */
  .ac { padding: 12px var(--pad) var(--pad); display: grid; gap: 8px; align-content: start; overflow-y: auto; }
  .ac .al { font-size: var(--fs-xs); line-height: 20px; }
  .ac .acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .ac .acts a { height: 32px; display: grid; place-items: center; border-radius: var(--rv-r-sm); background: var(--rv-sunk); font-size: var(--rv-fs-13); font-weight: 500; white-space: nowrap; overflow: hidden; }
  .ac .acts a:hover { background: var(--rv-btn2); }
  .ac .sec { font-size: var(--fs-s); font-weight: 500; line-height: 20px; margin-top: 4px; }
  .ac .go { height: 32px; font-size: var(--fs-s); }
  #trades { overflow: hidden; }

  /* bottom tables */
  .tw { position: absolute; inset: 0; overflow: auto; }
  table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
  th { position: sticky; top: 0; background: var(--rv-panel); text-align: left; font-weight: 400; font-size: var(--fs-xs); color: var(--rv-dim); height: 32px; padding: 0 12px;
       border-bottom: 1px solid var(--rv-line); z-index: 1;
       line-height: 14px; }   /* a long header word wraps to a second line (28px holds two) instead of widening the table */
  td { height: var(--trow); padding: 0 12px; border-bottom: 1px solid var(--rv-line); white-space: nowrap; font-variant-numeric: tabular-nums; }
  th.r, td.r { text-align: right; }
  /* the table's outer columns on the panel's 16px edge */
  #tbl table :is(th, td):first-child { padding-left: var(--pad); } #tbl table :is(th, td):last-child { padding-right: var(--pad); }
  table.oh-t th { white-space: nowrap; }
  td .sub { color: var(--rv-muted); font-size: var(--fs-xs); margin-left: 4px; }
  td .sbar { display: inline-block; width: 3px; height: 16px; border-radius: var(--rv-r-xs); background: var(--rv-up); margin: 0 8px 0 -4px; vertical-align: -3px; }
  td .sbar.s { background: var(--rv-down); } td .rv-ci-pi { margin-right: 8px; }
  .own { font-size: var(--fs-xs); line-height: 16px; padding: 0 6px; border-radius: var(--rv-r-xs); background: var(--rv-sunk); color: var(--rv-muted); display: inline-block; }
  td .own { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  .own.m { background: var(--rv-accent-soft); color: var(--rv-accent); }
  .pt.wait, .ost.wait { color: var(--rv-accent); } .pt.up { color: var(--rv-pos); } .pt.dn { color: var(--rv-neg); }
  tr.pw td { background: var(--rv-accent-soft); white-space: normal; height: auto; padding-top: 7px; padding-bottom: 7px; line-height: 16px; }
  .pc.pw { background: var(--rv-accent-soft); font-size: var(--fs-s); line-height: 16px; }
  tr.pw.shn td { background: none; padding-top: 0; padding-bottom: 8px; font-size: var(--fs-xs); }   /* a shared market's note: one quiet line */
  .sb { height: 24px; padding: 0 8px; border-radius: var(--rv-r-xs); border: 0; background: var(--rv-btn2); font-size: var(--fs-xs); color: var(--rv-text); white-space: nowrap; }
  .sb:hover { background: var(--rv-btn2-hover); } .sb:disabled { opacity: .4; cursor: default; }
  a.sb { display: inline-grid; place-items: center; }
  /* an empty list, as calm as the landing: a faint mark, one line in the text colour, one muted line, one quiet action */
  .empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center; padding: 16px; font-size: var(--rv-fs-13); line-height: 20px; color: var(--rv-muted); }
  .empty b { color: var(--rv-text); font-weight: 500; font-size: var(--fs-m); line-height: 20px; }
  .empty > svg.i { width: 24px; height: 24px; color: var(--rv-faint); stroke-width: 1.4; margin-bottom: 4px; }
  #tbl > .empty.eo { place-content: start center; padding-top: 32px; }
  .empty .sb.gh { background: none; box-shadow: inset 0 0 0 1px var(--rv-line2); }
  /* signed out: the Account card's way in is a text link (the order panel holds the one wallet button) */
  .ac .lnk2 { color: var(--rv-accent); font-size: var(--fs-s); } .ac .lnk2:hover { text-decoration: underline; }
  .empty .sb { height: 32px; padding: 0 16px; margin-top: 4px; border-radius: var(--rv-r-sm); font-size: var(--rv-fs-13); }
  /* position and order cards (phone) */
  .cards { display: grid; }
  .pc { display: grid; gap: 12px; padding: 12px; }
  .pc + .pc { box-shadow: inset 0 1px var(--rv-line); }
  .pc-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .pc-h b { font-size: var(--fs-m); font-weight: 500; white-space: nowrap; }
  .pc-h .own { white-space: nowrap; flex: none; }
  .pc-h .sub { font-size: var(--fs-xs); color: var(--rv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .sbadge { width: 20px; height: 20px; flex: none; border-radius: var(--rv-r-xs); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 500; color: #fff; background: var(--rv-up); }
  .sbadge.s { background: var(--rv-down); }
  .pc-pl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--fs-xs); color: var(--rv-muted); }
  .pc-pl b { font-size: var(--fs-l); font-weight: 500; font-variant-numeric: tabular-nums; }
  .pc-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pc-g div { display: grid; gap: 0; min-width: 0; }
  .pc-g div:nth-child(3n) { text-align: right; } .pc-g div:nth-child(3n + 2) { text-align: center; }
  .pc-g div.wide { grid-column: 1 / -1; text-align: left; }      /* a position card's TP / SL: both prices in full */
  .pc-g .k { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pc-g .v { font-size: var(--fs-s); line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pc-a { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
  .pc-a .sb { height: 32px; font-size: var(--fs-s); border-radius: var(--rv-r-sm); }

  /* strategies */
  .st-body { padding: 12px; display: grid; gap: 12px; overflow-y: auto; align-content: start; }
  .st-pick { display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--rv-r-xs); border: 1px solid transparent; background: var(--rv-sunk); gap: 8px; }
  .st-pick select { flex: 1; border: 0; background: none; outline: none; font-size: var(--fs-m); font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer; min-width: 0; }
  .st-pick select option { background: var(--rv-panel); color: var(--rv-text); }
  .st-d { font-size: var(--fs-s); line-height: 16px; color: var(--rv-muted); margin: 0; }
  .ops { display: grid; box-shadow: inset 0 0 0 1px var(--rv-line); border-radius: var(--rv-r-xs); }
  .ops-h { display: flex; justify-content: space-between; height: 28px; align-items: center; padding: 0 12px; font-size: var(--fs-xs); color: var(--rv-dim); border-bottom: 1px solid var(--rv-line); }
  .op { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px; }
  .op + .op { box-shadow: inset 0 1px var(--rv-line); }
  .op .c { font-size: var(--fs-m); line-height: 20px; font-weight: 500; } .op .a { font-size: var(--fs-m); line-height: 20px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
  .op .v { font-size: var(--fs-s); line-height: 24px; color: var(--rv-muted); } .op .b { text-align: right; }
  .op .w { grid-column: 1 / -1; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); }

  /* dropdowns: coin search and the exchange list */
  .drop { position: fixed; z-index: 40; width: 460px; max-height: min(520px, calc(100vh - 64px)); display: flex; flex-direction: column;
          background: var(--rv-panel2); border: 1px solid var(--rv-card-line); border-radius: var(--rv-r-sm); box-shadow: var(--rv-pop); }
  .drop .inp { margin: 12px; flex: none; }
  .drop .inp input { text-align: left; padding-left: 8px; }
  .dl { overflow-y: auto; border-top: 1px solid var(--rv-line); }
  .dl-h, .dl-r { display: grid; grid-template-columns: minmax(0, 1fr) 88px 72px 72px; gap: 8px; align-items: center; padding: 0 12px; font-size: var(--fs-s); }
  .drop.mk { width: 520px; }
  .drop.mk .dl-h, .drop.mk .dl-r { grid-template-columns: minmax(0, 1fr) 120px 96px; }
  .drop.mk .dl-h button { border: 0; background: none; padding: 0; font-size: var(--fs-xs); color: var(--rv-dim); text-align: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .drop.mk .dl-h button:not(:first-child) { text-align: right; } .drop.mk .dl-h button:hover, .drop.mk .dl-h button.on { color: var(--rv-text); }
  .drop.mk .dl-h i { font-style: normal; margin-left: 2px; }
  /* each row: the price over its 24h change, as Binance's market list (desktop and phone alike) */
  .drop.mk .dl-r { height: 48px; } .dl-r .pr small { font-size: var(--fs-xs); }
  .drop.mk .dl-r .pr { display: grid; justify-items: end; line-height: 16px; gap: 2px; }
  .dl-r .sy { display: flex; align-items: center; min-width: 0; } .dl-r .sy .rv-ci { margin-right: 10px; }
  .dl-r .nm { display: grid; min-width: 0; line-height: 16px; } .dl-r .nm > span { display: flex; align-items: center; gap: 6px; }
  .dl-r .nm small { font-size: var(--fs-xs); color: var(--rv-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dl-r .tag { font-size: var(--fs-xs); line-height: 16px; padding: 0 4px; border-radius: var(--rv-r-xs); background: var(--rv-btn2); color: var(--rv-muted); font-weight: 400; }
  .dtabs { display: flex; align-items: center; gap: 16px; height: 32px; padding: 0 12px; flex: none; }
  .dtabs button { display: inline-flex; align-items: center; gap: 4px; height: 32px; border: 0; background: none; padding: 0; font-size: var(--fs-s); color: var(--rv-muted);
                  box-shadow: inset 0 -2px transparent; }
  .dtabs button svg.i { width: 14px; height: 14px; }
  .dtabs button:hover { color: var(--rv-text); } .dtabs button.on { color: var(--rv-text); font-weight: 500; box-shadow: inset 0 -2px var(--rv-accent); }
  .dtabs button:focus-visible { box-shadow: 0 0 0 2px var(--rv-focus); } .dtabs button.on:focus-visible { box-shadow: inset 0 -2px var(--rv-accent), 0 0 0 2px var(--rv-focus); }
  .dtabs .src { font-size: var(--fs-xs); color: var(--rv-dim); }
  .dl-r .star { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; color: var(--rv-dim); font-style: normal; }
  .dl-r .star svg.i { width: 14px; height: 14px; } .dl-r .star:hover { color: var(--rv-text); }
  .dl-r .star.on { color: var(--rv-accent); } .dl-r .star.on svg.i { fill: currentColor; }
  .dl-h { height: 28px; font-size: var(--fs-xs); color: var(--rv-dim); border-bottom: 1px solid var(--rv-line); flex: none; }
  .dl-r { height: var(--trow); border: 0; background: none; width: 100%; text-align: left; font-variant-numeric: tabular-nums; }
  .dl-r:hover, .dl-r.on { background: var(--rv-btn2); }
  .dl-r.kb { background: var(--rv-btn2); box-shadow: inset 2px 0 var(--rv-accent); }   /* the row Enter opens (arrow keys move it) */
  .dl-h span, .dl-r > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .dl-h span:not(:first-child), .dl-r > span:not(:first-child) { text-align: right; }
  .dl-r b { font-weight: 500; } .dl-r .q { color: var(--rv-muted); font-weight: 400; } .dl-r .sub { color: var(--rv-dim); font-size: var(--fs-xs); margin-left: 4px; }
  .drop.vd { width: 420px; }
  .vd .dl { border-top: 0; }
  .vd .dl-h, .vd .dl-r { grid-template-columns: minmax(0, 1fr) 88px 72px 72px; }
  .vd .dl-r { cursor: pointer; }
  .vd .dl-r > span:first-child { display: flex; align-items: center; gap: 8px; }
  .vd .dl-r.na { cursor: default; color: var(--rv-dim); } .vd .dl-r.na:hover { background: none; }
  .vd .dl-r > span.nl { grid-column: span 2; }
  .vcn svg.i { display: none; width: 14px; height: 14px; }
  .vd .dg, .mk .dg { height: 28px; display: flex; align-items: center; padding: 0 12px; font-size: var(--fs-xs); color: var(--rv-dim); background: var(--rv-sunk);
            border-bottom: 1px solid var(--rv-line); border-top: 1px solid var(--rv-line); }
  .vd .dg:first-child, .mk .dg:first-child { border-top: 0; }
  .vd .st { font-size: var(--fs-xs); color: var(--rv-muted); }
  /* the list's last row, as an exchange's account switcher: + Connect exchange (every exchange users can trade here) */
  .vd .vadd { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-top: 1px solid var(--rv-line); font-size: var(--fs-s); color: var(--rv-text); text-decoration: none; }
  .vd .vadd:hover { background: var(--rv-btn2); } .vd .vadd svg.i { width: 16px; height: 16px; color: var(--rv-muted); }

  /* small menus: timeframe, grouping, BBO, size unit, order type */
  .pop { position: fixed; z-index: 70; min-width: 160px; max-width: 288px; padding: 4px; display: grid; gap: 0;
         background: var(--rv-panel2); border: 1px solid var(--rv-card-line); border-radius: var(--rv-r-sm); box-shadow: var(--rv-pop); }
  .pi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; min-height: 32px; padding: 6px 8px; border: 0; border-radius: var(--rv-r-xs); background: none;
        text-align: left; font-size: var(--fs-s); line-height: 16px; width: 100%; }
  .pi:hover:not(:disabled) { background: var(--rv-btn2); }
  .pi.on { color: var(--rv-accent); }
  .pi .sub { font-size: var(--fs-xs); color: var(--rv-muted); text-align: right; font-variant-numeric: tabular-nums; }
  .pi .why { grid-column: 1 / -1; border: 0; padding: 0; margin-top: 2px; }
  .pi:disabled { cursor: default; color: var(--rv-faint); } .pi:disabled .why { color: var(--rv-dim); }
  .pop .ph2 { font-size: var(--fs-xs); color: var(--rv-dim); padding: 4px 8px; line-height: 16px; }
  .pop .psep { border: 0; border-top: 1px solid var(--rv-line); margin: 4px 0; }

  /* sheets: confirmation, leverage, margin mode (centred on desktop, from the bottom on a phone) */
  .scrim { position: fixed; inset: 0; z-index: 50; background: var(--rv-scrim); animation: fade .15s ease-out; }
  .sheet { position: fixed; z-index: 65; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 432px; max-height: calc(100vh - 32px); overflow-y: auto;
           background: var(--rv-panel); border: 1px solid var(--rv-card-line); border-radius: var(--rv-r-lg); box-shadow: var(--rv-pop); animation: fade .15s ease-out; }
  .sheet.sm { width: 384px; }
  .sheet:focus, .sheet:focus-visible { outline: 0; box-shadow: var(--rv-pop); }   /* the dialog itself holds the focus on a phone: no ring round it */
  .sh-h { height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px; }
  .sh-h h3 { margin: 0; font-size: var(--fs-l); font-weight: 500; flex: 1; }
  .sh-b { padding: 4px 20px 20px; display: grid; gap: 12px; }
  .sh-f { padding: 0 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sh-f .bt { height: 40px; border-radius: var(--rv-r-sm); font-size: var(--fs-m); font-weight: 500; border: 0; background: var(--rv-btn2); }
  .sh-f.one { grid-template-columns: minmax(0, 1fr); }
  /* margin mode: two big choices side by side */
  .mm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mm-o { height: 40px; border-radius: var(--rv-r-sm); border: 1px solid var(--rv-line2); background: none; font-size: var(--fs-m); font-weight: 500; color: var(--rv-text); }
  .mm-o.on { border-color: var(--rv-accent); color: var(--rv-accent); background: var(--rv-accent-soft); }
  .mm-o:disabled { color: var(--rv-dim); cursor: default; border-color: var(--rv-line); }
  .lvs { display: grid; gap: 4px; }
  .lvs .ticks { margin: 0 0 0 0; }
  /* preferences: a label on the left, its switch on the right */
  .plist { display: grid; }
  .prf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; font-size: var(--fs-s); }
  .prf + .prf { box-shadow: inset 0 1px var(--rv-line); }
  label.prf input { width: 32px; height: 18px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: var(--rv-r-sm); background: var(--rv-line2); position: relative; cursor: pointer; flex: none; }
  label.prf input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 999px; background: #fff; transition: left .15s; }
  /* on: monochrome as the bot setup's switches (bot-flow.css .bf-sw), blue only for keyboard focus */
  label.prf input:checked { background: var(--rv-primary); border-color: var(--rv-primary); } label.prf input:checked::after { left: 16px; background: var(--rv-primary-ink); }
  .prf .seg button:disabled { opacity: .4; cursor: default; }
  .kv { display: grid; background: var(--rv-sunk); border-radius: var(--rv-r-sm); padding: 4px 0; }
  .kv div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 32px; padding: 0 12px; font-size: var(--fs-s); }
  
  .kv .k { color: var(--rv-muted); } .kv .v { text-align: right; font-variant-numeric: tabular-nums; }
  .kv .v .sub { color: var(--rv-muted); font-size: var(--fs-xs); margin-left: 4px; }
  .warn { font-size: var(--fs-s); line-height: 16px; color: var(--rv-text); background: var(--rv-warn-soft); border-radius: var(--rv-r-xs); padding: 8px 12px; }
  .explain { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); margin: 0; }
  .xb { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--rv-r-xs); border: 1px solid transparent; background: none; color: var(--rv-muted); padding: 0; flex: none; }
  .xb:hover { background: var(--rv-btn2); color: var(--rv-text); }
  .stp { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 8px; }
  .stp button { height: 40px; border-radius: var(--rv-r-xs); border: 0; background: var(--rv-btn2); font-size: var(--fs-l); line-height: 1; padding: 0; }
  .stp button:disabled { opacity: .4; cursor: default; }
  .stp .inp { height: 40px; } .stp .inp input { height: 38px; text-align: center; font-size: var(--fs-l); font-weight: 500; padding: 0; }
  .lvp { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
  .lvp button { height: 28px; border-radius: var(--rv-r-xs); border: 1px solid transparent; background: var(--rv-sunk); font-size: var(--fs-s); color: var(--rv-muted); padding: 0; }
  .lvp button:hover { color: var(--rv-text); }
  .lvp button.on { color: var(--rv-accent); border-color: var(--rv-accent-line); background: var(--rv-accent-soft); }
  .opt { display: grid; gap: 4px; padding: 11px 12px; border-radius: var(--rv-r-sm); border: 1px solid transparent; background: var(--rv-sunk); text-align: left; width: 100%; }
  .opt b { font-size: var(--fs-m); font-weight: 500; line-height: 20px; display: flex; justify-content: space-between; }
  .opt span { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); }
  .opt.on { border-color: var(--rv-accent); background: var(--rv-accent-soft); }
  .opt:disabled { cursor: default; } .opt:disabled b { color: var(--rv-muted); }
  .mlist { display: grid; padding: 8px; }
  .mlist a, .mlist button { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px; border-radius: var(--rv-r-xs); border: 0; background: none; font-size: var(--fs-m); color: var(--rv-text); width: 100%; text-align: left; }
  .mlist a:hover, .mlist button:hover { background: var(--rv-btn2); }
  .mlist svg { width: 16px; height: 16px; stroke: var(--rv-muted); fill: none; stroke-width: 1.7; flex: none; }
  .mlist .sec { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); padding: 12px 8px 4px; }

  /* notice */
  .ntc { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--rv-scrim); padding: 16px; animation: fade .15s ease-out; }
  .ntc .box { background: var(--rv-panel); border: 1px solid var(--rv-card-line); border-radius: var(--rv-r-lg); padding: 24px; width: min(384px, 100%); display: grid; gap: 12px; box-shadow: var(--rv-pop); }
  .ntc h3 { margin: 0; font-size: var(--fs-l); font-weight: 500; } .ntc p { margin: 0; color: var(--rv-muted); font-size: var(--fs-s); line-height: 20px; }
  .ntc .mk { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-weight: 500; }
  .ntc.ok .mk { background: var(--rv-accent-soft); color: var(--rv-accent); } .ntc.err .mk { background: var(--rv-neg-soft); color: var(--rv-neg); }
  .ntc .go { background: var(--rv-primary); color: var(--rv-primary-ink); }
  .ntc .q { justify-self: center; margin-top: -4px; padding: 4px 8px; border: 0; background: none; color: var(--rv-muted); font: inherit; font-size: var(--fs-s); cursor: pointer; } .ntc .q:hover { color: var(--rv-text); }

  /* the sign-in over the Terminal (loginModal) */
  .lgm { z-index: 95; } .lgm-b { max-width: 400px; display: grid; gap: 12px; }
  .lgm-h { display: flex; align-items: center; justify-content: space-between; } .lgm-h h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; }
  .lgm-p, .lgm-n { margin: 0; color: var(--rv-muted); font-size: var(--fs-s); line-height: 16px; } .lgm-p { font-size: var(--fs-m); line-height: 20px; }
  .lgm-m { min-height: 16px; font-size: var(--fs-s); line-height: 16px; color: var(--rv-muted); } .lgm-m.err { color: var(--rv-neg); } .lgm-m a { color: var(--rv-accent); }
  .lgm-a { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-s); line-height: 16px; color: var(--rv-muted); cursor: pointer; }
  .lgm-a a { color: var(--rv-accent); } .lgm-a input { margin: 0; flex: none; }
  /* loading */
  .sk { display: block; border-radius: var(--rv-r-xs); background: linear-gradient(90deg, var(--rv-bg-3) 25%, var(--rv-bg-4) 50%, var(--rv-bg-3) 75%) 0 0 / 200% 100%;
        animation: rv-skel 1.2s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
  .skl { display: grid; gap: 8px; padding: 12px; align-content: start; }
  /* the first paint: every panel shows its skeleton at once (the static markup below), the scripts replace it */
  .stats .sk { display: inline-block; }
  .fsk { padding: 12px 16px; gap: 12px; }
  .busy { position: relative; color: transparent !important; pointer-events: none; }
  .busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 999px;
                 border: 2px solid var(--rv-accent-ink); border-right-color: transparent; animation: spin .8s linear infinite; }
  .go.n.busy::after, .ntc .go.busy::after { border-color: var(--rv-primary-ink); border-right-color: transparent; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse { 50% { opacity: .45; } }
  @keyframes fade { from { opacity: 0; } }

  /* ---- the CEX baseline: chart tools, order options, TP/SL, history, alerts, shortcuts ---- */
  .gb.ic { width: 24px; padding: 0; justify-content: center; } .gb.ic svg.i { width: 14px; height: 14px; }
  .gb:hover { background: var(--rv-btn2); color: var(--rv-text); } .gb.on { color: var(--rv-accent); background: none; }
  .gb .cnt { font-size: var(--fs-xs); color: var(--rv-accent); }
  .opts { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
  .opts .ck { min-width: 0; } .opts .tpb { display: inline-flex; gap: 4px; flex: none; }
  .opts .tpb .ub { padding: 0 2px 0 6px; }
  #f-tpx span { white-space: nowrap; }
  .fee2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fee2 .al > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .fee2 .sub { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vc { display: grid; gap: 0; background: var(--rv-sunk); border-radius: var(--rv-r-sm); padding: 4px 0; }
  @media (max-width: 860px) { .vc { display: none !important; } }   /* the phone's narrow form column: each exchange's all-in cost is in the exchange picker instead */
  .vc-h, .vc-r { display: grid; grid-template-columns: minmax(0, 1fr) 64px 64px; gap: 8px; align-items: center; padding: 0 12px; height: 20px;
                 font-size: var(--fs-xs); line-height: 16px; white-space: nowrap; }
  .vc-h { color: var(--rv-dim); } .vc-h span, .vc-r span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .vc-h span:not(:first-child), .vc-r > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
  .vc-r { border: 0; background: none; width: 100%; text-align: left; color: var(--rv-muted); }
  .vc-r:hover { background: var(--rv-btn2); color: var(--rv-text); } .vc-r.on { color: var(--rv-text); }
  .vc-n { padding: 0 12px; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); }
  .tabs .acts { margin-left: 12px; display: flex; align-items: center; gap: 12px; flex: none; }
  /* the position tabs in their own row: on a narrow panel (a 1000px laptop, a long language) they scroll sideways under a
     fade, as on Binance, while This market only and Close all stay in view at the right */
  .tabs .tsc { display: flex; gap: inherit; align-self: stretch; margin-bottom: -1px; min-width: 0; flex: 0 1 auto; overflow-x: auto; overflow-y: hidden;
               scrollbar-width: none; overscroll-behavior-x: contain; }
  .tabs .tsc::-webkit-scrollbar { display: none; }
  .tabs .tsc > button { margin-bottom: 0; flex: none; }
  /* at rest no tab is shown half cut ("Tra…"): a tab past either edge fades out whole (the soft edge, also while it
     scrolls), so the row ends on a whole word, and a chevron pages on to the rest (back to the start at the end) */
  .tabs .tsc > button.cut { opacity: 0; pointer-events: none; }
  .tabs .tsc > button { transition: opacity var(--rv-dur-2) var(--rv-ease-out), color var(--rv-dur-1), background-color var(--rv-dur-1); }
  .tabs button.tsn { flex: none; width: 24px; margin-left: -8px; display: inline-flex; align-items: center; justify-content: center; color: var(--rv-muted); border-bottom: 0; }
  .tabs button.tsn[hidden] { display: none; }
  .tabs button.tsn svg { width: 14px; height: 14px; }
  .tabs button.tsn.l svg { transform: rotate(180deg); }
  #tabs .oh { flex: none; white-space: nowrap; padding-left: 12px; }
  .tabs .acts .ck { font-size: var(--fs-xs); color: var(--rv-muted); }
  .tpc { display: inline-flex; align-items: center; gap: 4px; }
  .tpc .v { font-variant-numeric: tabular-nums; }
  .tpc .w { font-size: var(--fs-xs); color: var(--rv-dim); }
  .pcts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .pcts button { height: 24px; border-radius: var(--rv-r-xs); border: 0; background: var(--rv-sunk); font-size: var(--fs-xs); color: var(--rv-muted); padding: 0; }
  .pcts button:hover, .pcts button.on { color: var(--rv-text); } .pcts button.on { background: var(--rv-btn2); }
  .lvl { display: grid; gap: 8px; }
  .lvl .al { font-size: var(--fs-xs); }
  .ferr { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-neg); margin: 0; }
  .irow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 40px; }
  .irow + .irow { box-shadow: inset 0 1px var(--rv-line); }
  .irow .ps { display: flex; gap: 4px; }
  .irow .ps input { width: 48px; height: 28px; border-radius: var(--rv-r-xs); border: 1px solid transparent; background: var(--rv-sunk); text-align: center; font-size: var(--fs-s);
                    font-variant-numeric: tabular-nums; outline: none; padding: 0; }
  .irow .ps input:focus { border-color: var(--rv-accent); } .irow .ps input:disabled { opacity: .5; }
  .irow .ck .mut { margin-left: 0; }
  .ihd { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); }
  .ilist { display: grid; }
  .keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .keys div { display: flex; align-items: center; gap: 12px; min-height: 32px; font-size: var(--fs-s); box-shadow: inset 0 -1px var(--rv-line); min-width: 0; }
  .keys kbd { font: 500 var(--fs-xs)/20px var(--rv-font); min-width: 40px; height: 20px; padding: 0 6px; border-radius: var(--rv-r-xs); border:1px solid transparent;
              background: var(--rv-sunk); text-align: center; flex: none; }
  .keys span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rv-muted); }
  .alist { display: grid; background: var(--rv-sunk); border-radius: var(--rv-r-sm); }
  .alist div { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px 0 12px; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
  .alist div + div { box-shadow: inset 0 1px var(--rv-line); }
  .alist .sp { color: var(--rv-muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toasts { position: fixed; z-index: 90; right: 16px; bottom: 16px; display: grid; gap: 8px; width: 320px; pointer-events: none; }
  .toast { pointer-events: auto; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 4px 8px; padding: 12px 8px 12px 12px; border-radius: var(--rv-r-sm);
           background: var(--rv-btn2); border: 0; border-left: 3px solid var(--rv-accent); box-shadow: var(--rv-pop);
           font-size: var(--fs-s); line-height: 16px; animation: fade .15s ease-out; }
  .toast b { font-weight: 500; } .toast p { margin: 0; grid-column: 1; color: var(--rv-muted); font-size: var(--fs-xs); }
  .toast .xb { width: 24px; height: 24px; grid-row: 1 / 3; grid-column: 2; }
  .hsub { display: none; }
  .hf { position: absolute; top: 0; left: 0; right: 0; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 var(--pad); }
  .hf .sp { flex: 1; } .hf .seg button svg.i { margin-left: 0; } .hf .sb:disabled { opacity: .4; }
  #hf-x { display: inline-flex; align-items: center; gap: 4px; } #hf-x svg.i { width: 14px; height: 14px; }
  .hf + .tw, .hf + .skl { top: 36px; } .hf + .skl { position: absolute; left: 0; right: 0; } .empty.hfe { top: 36px; }
  .ub.bare { margin-right: 0; }
  .sb.ic { width: 24px; padding: 0; display: inline-grid; place-items: center; vertical-align: top; } .sb.ic svg.i { width: 14px; height: 14px; }
  /* a position's leverage (changes it) and its Adjust margin pencil: quiet until pointed at */
  .lvb { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
  .lvb:hover { color: var(--rv-accent); }
  .ie { border: 0; background: none; padding: 0; width: 14px; height: 14px; margin-left: 4px; display: inline-grid; place-items: center; vertical-align: -2px; color: var(--rv-dim); cursor: pointer; }
  .ie svg.i { width: 12px; height: 12px; } .ie:hover { color: var(--rv-accent); }
  @media (max-width: 860px) { .pc .ie { width: 24px; height: 20px; margin-left: 0; vertical-align: -5px; } }     /* a finger's target on a card */
  .tifx { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); }
  table.ot th, table.ot td { padding: 0 8px; } table.ot th:first-child, table.ot td:first-child { padding-left: var(--pad); }
  table.ot th:last-child, table.ot td:last-child { padding-right: var(--pad); }
  #tbl [data-mk] { cursor: pointer; } #tbl [data-mk]:hover { color: var(--rv-accent); }
  .clip { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
  /* Positions and Open orders fit a narrow panel (a 1000px laptop, the owner's MacBook) without scrolling sideways: two-part
     cells (market / exchange, P&L / ROE, date / time, TP / SL, trigger / its price) stack in two 14px lines inside the
     32px row, and the cells' side padding narrows; on a wide panel each stays one line */
  .m2 .t2 { margin-left: .3em; } #tbl .nw { display: none; }
  /* a figure with its word under it at every width (a position's margin / mode, an estimated liquidation / est.) */
  #tbl table .m2.st { display: inline-grid; line-height: 14px; vertical-align: middle; text-align: inherit; }
  #tbl table td.r .m2.st { justify-items: end; } #tbl table .m2.st > .sub { margin-left: 0; }
  .bottom { container: botm / inline-size; }
  @container botm (max-width: 1039px) {
    #tbl table .m2 { display: inline-grid; line-height: 14px; vertical-align: middle; text-align: inherit; }
    #tbl table td.r .m2 { justify-items: end; }
    #tbl table .m2 > .sub { margin-left: 0; } #tbl table .m2 .t2 { margin-left: 0; }
    #tbl table .m2.ts .sl { display: none; } #tbl td .rv-ci-pi { display: none; }      /* the coin logo: the room goes to the figures */
    #tbl .nw { display: inline; white-space: nowrap; } #tbl th.mkc, #tbl td.mkc { display: none; }      /* the mark price under the entry */
    #tbl table:not(.bt-t) :is(th, td) { padding-left: 6px; padding-right: 6px; }
    #tbl table.ot :is(th, td) { padding-left: 4px; padding-right: 4px; }       /* Open orders: eleven columns */
    #tbl table:not(.bt-t) :is(th, td):first-child { padding-left: var(--pad); } #tbl table:not(.bt-t) :is(th, td):last-child { padding-right: var(--pad); }
    #tbl .clip { max-width: 76px !important; }
  }
  /* a table that would still run past its panel in a long language (Russian, Japanese, Vietnamese, German; measured by
     tblFit, so English keeps its spacing): 4px cell padding, a two-word head or a bot's name on two lines (TP / SL never
     on three), Cancel as its icon; only what still does not fit scrolls sideways */
  #tbl table.tight:not(.bt-t) :is(th, td) { padding-left: 4px; padding-right: 4px; }
  #tbl table.tight:not(.bt-t) :is(th, td):first-child { padding-left: var(--pad); } #tbl table.tight:not(.bt-t) :is(th, td):last-child { padding-right: var(--pad); }
  #tbl table.tight th .nw { white-space: normal; } #tbl table.tight th { word-break: keep-all; }   /* never サイ/ズ */
  #tbl table.tight td .own { white-space: normal; max-width: 112px; line-height: 14px; vertical-align: middle; }
  #tbl table.tight td > span.ost { display: inline-block; white-space: normal; max-width: 72px; min-width: min-content; line-height: 14px; vertical-align: middle; }
  #tbl table.tight td .sb:not(.ic) { padding: 0 6px; }
  /* Cancel in a row keeps its word; in a tight table it becomes its icon (as Binance's rows), the word in its tip */
  .sb.cx > svg.i { display: none; }
  #tbl table.tight td .sb.cx { width: 24px; padding: 0; display: inline-grid; place-items: center; vertical-align: top; color: var(--rv-muted); }
  #tbl table.tight td .sb.cx:hover:not(:disabled) { color: var(--rv-text); }
  #tbl table.tight td .sb.cx > .lb { display: none; } #tbl table.tight td .sb.cx > svg.i { display: block; width: 14px; height: 14px; }
  #tbl table.tight td .m2.ty { white-space: normal; } #tbl table.tight td .m2.ty > .sub { white-space: nowrap; }   /* Стоп-/маркет */
  .smart { display: grid; gap: 8px; } .smart p { margin: 0; }
  .srow { display: grid; grid-template-columns: minmax(0, 1fr) 72px 24px; gap: 4px; align-items: center; }
  .srow .xb { width: 24px; height: 24px; } .srow .xb:disabled { opacity: .3; cursor: default; } .srow .xb svg.i { width: 14px; height: 14px; }
  .sopt { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 8px; align-items: center; }
  .lnk { border: 0; background: none; padding: 0; height: 16px; font-size: var(--fs-s); line-height: 16px; color: var(--rv-accent); justify-self: start; text-align: left; }
  .lnk:hover { text-decoration: underline; }
  ol.steps { margin: 0; padding: 0 0 0 20px; display: grid; gap: 4px; font-size: var(--fs-s); line-height: 16px; }
  .sm-tag { font-size: var(--fs-xs); line-height: 16px; padding: 0 6px; border-radius: var(--rv-r-xs); background: var(--rv-accent-soft); color: var(--rv-accent); display: inline-block; }
  #bot-pane { overflow-y: auto; }
  /* the Terminal is manual trading only (owner, 2026-09-29): no Bot tab, no Bots list; bots live in the Bot Terminal */
  html:not(.tm-bot) #f-tabs [data-p=bot], html:not(.tm-bot) .fsw, html:not(.tm-bot) #fsw, html:not(.tm-bot) #tabs [data-v=bots],
  html:not(.tm-bot) #bot-pane, html:not(.tm-bot) #tb-show { display: none !important; }
  /* the Bot Terminal (/bots/terminal, radar/nav.py bot_terminal): the chart as wide as in the Terminal, the bot setup in the
     room of the book and the order panel, the bots first below; no book, trades or manual order form */
  html.tm-bot { --botp-w: calc(var(--book-w) + var(--g) + var(--form-w)); }
  .tm-bot .book, .tm-bot .trades, .tm-bot #form, .tm-bot #f-tabs [data-p=order], .tm-bot .fsw, .tm-bot #b-strat, .tm-bot #p-strat,
  .tm-bot #tabs :is([data-v=history], [data-v=fills], [data-v=funding], [data-v=pnl], [data-v=assets], [data-v=strategies], #tab-hist) { display: none !important; }
  @media (min-width: 861px) { .tm-bot .seg.lg.kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .tm-bot #tabs [data-v=bots] { order: -1; }
  @media (min-width: 861px) {
    .tm-bot .term { grid-template-columns: minmax(0, 1fr) var(--botp-w); }
    .tm-bot .top.p { grid-column: 1 / 3; }
    .tm-bot .form { grid-column: 2; grid-row: 2 / 4; }
    .tm-bot .bottom { grid-column: 1 / 3; } .tm-bot .acctp { display: none; }   /* the bots list gets the full width */
  }
  .tm-bot #f-tabs [data-p=bot] { pointer-events: none; }
  /* two columns of settings: what the bot does on the left, the money and the backtest on the right */
  .tm-bot .tb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .tm-bot .tb-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
  .tm-bot .tb-col .tb-g { grid-template-columns: minmax(0, 1fr); }
  /* the Bot Terminal's panel, calm: tabs and hairlines instead of boxes, colour only on figures and the primary button */
  .tm-bot #bot-pane { padding: 0 16px 16px; gap: 16px; }
  .tm-bot .seg.lg.kinds { display: flex; gap: 24px; height: 44px; padding: 0; background: none; border-radius: 0; border-bottom: 1px solid var(--rv-line);
                          min-width: 0; overflow-x: auto; scrollbar-width: none; } .tm-bot .seg.lg.kinds::-webkit-scrollbar { display: none; }
  .tm-bot .tb-sig { display: grid; gap: 12px; max-width: 480px; } .tm-bot .tb-sig h4 { margin: 0; font-size: var(--fs-l); font-weight: 500; }
  .tm-bot .tb-sig p { margin: 0; font-size: var(--fs-s); line-height: 20px; color: var(--rv-muted); } .tm-bot .tb-sig .go { height: 44px; justify-self: start; padding: 0 24px; }
  .tm-bot .seg.lg.kinds button { flex: none; height: 44px; line-height: 44px; padding: 0; border-radius: 0; background: none !important; font-size: var(--fs-m) !important;
                                 color: var(--rv-muted); box-shadow: none; overflow: visible; }
  .tm-bot .seg.lg.kinds button:hover { color: var(--rv-text); }
  .tm-bot .seg.lg.kinds button.on { color: var(--rv-text); font-weight: 500; box-shadow: inset 0 -2px var(--rv-accent); }
  .tm-bot .tb-cap { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); text-transform: none; }
  .tm-bot .pchips button { background: none; border-color: var(--rv-line); }
  .tm-bot .pchips button.on { background: var(--rv-accent-soft); border-color: var(--rv-accent-line); }
  .tm-bot .tb-der { background: none; border-radius: 0; padding: 0; border-top: 1px solid var(--rv-line); border-bottom: 1px solid var(--rv-line); }
  .tm-bot .tb-der div { padding: 0; min-height: 32px; }
  .tm-bot .tb-adv { box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--rv-line); }
  .tm-bot .tb-adv > summary { padding: 0; height: 40px; } .tm-bot .tb-adv > .tb-g { padding: 0 0 12px; }
  .tm-bot .tb-col .warn { background: none; border-radius: 0; padding: 0 0 0 12px; border-left: 2px solid var(--rv-warn, #d4a017); color: var(--rv-muted); font-size: var(--fs-xs); }
  .tm-bot .tb-bt { background: none; border: 0; border-radius: 0; padding: 16px 0 0; box-shadow: none; border-top: 1px solid var(--rv-line); }
  .tm-bot .tb-sim { margin-left: 8px; padding: 0 6px; border-radius: var(--rv-r-xs); font-size: var(--fs-xs); line-height: 16px; font-weight: 500;
                    color: var(--rv-muted); box-shadow: inset 0 0 0 1px var(--rv-line2); }
  .tm-bot .tb-bt0 .explain { margin: 4px 0 0; }
  .tm-bot .tb-acts .go, .tm-bot .tb-acts .btn2 { height: 44px; }
  .tm-bot .tb-fee b { font-weight: 400; color: var(--rv-muted); white-space: normal; text-align: right; overflow: visible; }   /* a narrow panel: the fee wraps, never cut */
  /* the bots table on a narrow desktop (a 1000px laptop): the rule and the order count go (both are in the bot's details) */
  @media (min-width: 861px) and (max-width: 1199px) { .tm-bot table.bt-t :is(th, td):is(:nth-child(4), :nth-child(7)) { display: none; }
    .tm-bot #tbl table:not(.bt-t) :is(th, td) { padding-left: 4px; padding-right: 4px; } }
  .tm-bot .kinds .ks { display: none; }
  @media (max-width: 860px) { .tm-bot:not(.bpn) .kinds .kl { display: none; } .tm-bot:not(.bpn) .kinds .ks { display: inline; } }

  /* ---- the Bot Terminal's setup panel, designs 1-3 (RV_BOTPANEL; radar/nav.py bot_terminal, radar/web/terminal-bots.js
     renderNew): tabs, then sections divided by hairlines, parameters as labelled rows with their units, one primary
     button. The chart and the panel fill the first screen; the bots list below is one line while it is empty. ---- */
  .bpn .form { container: botp / inline-size; }
  .bpn #bot-pane { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; padding: 0 16px; overflow-y: auto; overflow-x: hidden; }
  .bpn .tb-kt { position: sticky; top: 0; z-index: 3; background: var(--rv-panel); }
  .bpn .tb-kt .seg.lg.kinds { gap: 20px; }
  @container botp (max-width: 419px) { .bpn .kinds .kl { display: none; } .bpn .kinds .ks { display: inline; } }
  /* the chart's header on a narrow chart (design 3's divider): the view switch goes first */
  .bpn .tb-one { display: grid; gap: 8px; padding: 16px 0; }
  .bpn #bot-pane > .hint { margin-top: 16px; }
  .bpn .tb-s { display: grid; gap: 12px; padding: 16px 0; min-width: 0; }
  .bpn .tb-s + .tb-s { box-shadow: inset 0 1px var(--rv-line); }
  .bpn .tb-h { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: var(--fs-m); line-height: 20px; font-weight: 500; min-width: 0; }
  .bpn .tb-h .t { white-space: nowrap; }
  .bpn .tb-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; flex: none; box-shadow: inset 0 0 0 1px var(--rv-line2);
               font: 500 11px/1 var(--rv-font); color: var(--rv-muted); }
  .bpn .tb-h .tb-x { margin-left: auto; font-size: var(--fs-xs); line-height: 16px; font-weight: 400; color: var(--rv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .bpn .tb-h .tb-lnk.tb-x { color: var(--rv-accent); }
  .bpn .tb-pre button.on { color: var(--rv-text); font-weight: 500; }
  .bpn .tb-s > .seg.lg button { font-size: var(--fs-s); }
  /* margin mode and leverage: quiet text buttons on the row's right edge (each opens its sheet) */
  .bpn .tb-lv { display: flex; align-items: center; gap: 16px; flex: none; }
  .bpn .tb-tx { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0; border: 0; background: none; font-size: var(--fs-m); line-height: 20px;
                color: var(--rv-text); white-space: nowrap; }
  .bpn .tb-tx svg.i { width: 12px; height: 12px; color: var(--rv-muted); } .bpn .tb-tx:hover svg.i { color: var(--rv-text); }
  /* rows: the label on the left, the value or the field on the right, one right edge for every figure */
  .bpn .tb-rows { display: grid; gap: 4px; min-width: 0; }
  .bpn .tb-pr { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; min-width: 0; font-size: var(--fs-s); line-height: 16px; }
  .bpn .tb-pr .k { display: flex; align-items: center; gap: 4px; color: var(--rv-muted); min-width: 0; }
  .bpn .tb-pr .v { font-size: var(--fs-m); line-height: 20px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--rv-text); }
  .bpn .tb-rows:has(.tb-pi) .tb-pr .v { padding-right: 9px; }       /* in line with the figures in the fields */
  .bpn .tb-pi { width: 136px; height: 32px; flex: none; }
  .bpn .tb-pi input { height: 30px; padding: 0 8px; text-align: right; }
  .bpn .tb-pi .u { padding-right: 8px; }
  .bpn .tb-rg { display: flex; align-items: center; gap: 4px; flex: none; }
  .bpn .tb-rg .tb-pi { width: 100px; }
  .bpn .tb-rg .dash { color: var(--rv-dim); width: 8px; text-align: center; }
  .bpn .tb-adv { border: 0; box-shadow: none; margin-top: -4px; }
  .bpn .tb-adv > summary { height: 40px; font-size: var(--fs-s); color: var(--rv-muted); }
  .bpn .tb-adv > summary:hover { color: var(--rv-text); }
  .bpn .tb-adv > .tb-g { padding: 4px 0 0; gap: 12px; }
  .bpn .tb-sub { font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); }
  .bpn .tb-s > .tb-sub { margin-bottom: -4px; }
  /* a schema type's rows: a choice (select) and a short segmented choice on the row's right edge, as the number fields */
  .bpn .tb-pi.tb-ps { width: 176px; } .bp3 .tb-c1 .tb-pi.tb-ps { flex: 0 1 176px; }
  .bpn .tb-ps select { height: 30px; font-size: var(--fs-m); padding: 0 4px 0 8px; }
  .bpn .tb-ps > svg.i { margin-right: 8px; }
  .bpn .tb-psg > .seg { flex: 0 1 216px; min-width: 0; }
  .bpn .tb-pr > .ck { min-width: 0; }
  .bpn .tb-amt { height: 44px; } .bpn .tb-amt input { height: 42px; font-size: var(--rv-fs-lg); }
  .bpn .tb-sl { display: grid; gap: 4px; }
  .bpn .tb-sl .tb-tk { margin-top: 0; }
  .bpn #bot-pane .tb-sum { display: grid; gap: 8px; }
  .bpn #bot-pane .tb-sum .k { font-size: var(--fs-m); line-height: 20px; font-weight: 500; color: var(--rv-text); }
  .bpn #bot-pane .tb-sum ol { list-style: none; padding: 0; gap: 4px; font-size: var(--fs-s); line-height: 20px; color: var(--rv-muted); }
  .bpn #bot-pane .warn { background: none; border-radius: 0; padding: 0 0 0 12px; box-shadow: inset 2px 0 var(--rv-warn, #d4a017); color: var(--rv-muted); font-size: var(--fs-xs); }
  .bpn .tb-bts { gap: 12px; }
  .bpn .tb-bt { display: grid; gap: 12px; padding: 0; border: 0; box-shadow: none; background: none; }
  .bpn .tb-bt-h { display: flex; align-items: center; gap: 8px; height: 24px; font-size: var(--fs-m); font-weight: 500; }
  .bpn .tb-bt-h .sp { flex: 1; }
  .bpn .tb-bt .explain { margin: 0; }
  /* the backtest's costs and notes (terminal-bots.js btNotes): small, muted, one line each */
  .tb-bnl { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); overflow-wrap: anywhere; }
  .bpn .tb-bt .tb-bnl { margin: 0; }
  /* the result's parts, adding up to it (terminal-bots.js btParts): label left, figure right, a hairline over the total;
     while the test of changed settings runs the last result stays, dimmed (btShown) */
  .tb-btr { display: grid; gap: 12px; min-width: 0; transition: opacity .15s; }
  .tb-btr.ld { opacity: .45; }
  .tb-brk { display: grid; gap: 2px; font-size: var(--fs-s); line-height: 20px; min-width: 0; }
  .tb-brk > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-width: 0; }
  .tb-brk .k { display: flex; align-items: center; gap: 4px; color: var(--rv-muted); min-width: 0; }
  .tb-brk b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rv-text); }
  .tb-brk b.up { color: var(--rv-pos); } .tb-brk b.dn { color: var(--rv-neg); }
  .tb-brk .tot { margin-top: 4px; padding-top: 6px; box-shadow: inset 0 1px var(--rv-line); }
  .tb-brk .tot .k { color: var(--rv-text); } .tb-brk .tot b { font-weight: 500; }
  .bst4 b .m { font-weight: 400; color: var(--rv-muted); font-size: var(--fs-xs); }
  .bpn .tb-lw { margin-top: -4px; }
  .bpn .tb-sim { margin-left: 0; font-style: normal; }
  .bpn .bst4 b { font-size: var(--fs-m); }
  .bpn .tb-eq { height: 40px; }
  .bpn .tb-run { height: 36px; justify-self: start; padding: 0 16px; font-size: var(--fs-s); }
  .bpn .tb-foot { position: sticky; bottom: 0; z-index: 3; display: grid; gap: 8px; padding: 12px 0 16px; background: var(--rv-panel); box-shadow: 0 -1px var(--rv-line); }
  .bpn .tb-foot .go { height: 44px; }
  .bpn .tb-blk:empty { display: none; }
  .bp3 .tb-foot { position: static; box-shadow: none; padding: 0 0 16px; }
  .bp3 .tb-foot:has(> .tb-blk:empty) { display: none; }
  /* the bots list: one quiet line while there is none */
  .bpn #tbl > .empty { position: static; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 12px; min-height: 56px; padding: 8px 16px; text-align: left; }
  .bpn #tbl > .empty b { font-size: var(--fs-s); }
  .bpn #tbl > .empty .sb { height: 28px; }
  @media (min-width: 861px) {
    .bpn { --bots-min: 92px; }
    .bpn .term { grid-template-rows: var(--tick-h) max(440px, calc(100vh - var(--gh) - var(--tick-h) - 4 * var(--g) - var(--bots-min))) auto; }
    .bpn .chart, .bpn .form { grid-row: 2; }
    .bpn .bottom { grid-row: 3; height: 360px; }
    .bpn .bottom:has(#tbl > .empty) { height: var(--bots-min); }
    html.tm-bot.bp1, html.tm-bot.bp2 { --botp-w: clamp(400px, 34vw + 40px, 440px); }
  }
  /* design 2: Settings | Summary when the panel has the room (the panel widens from 1280px) */
  @media (min-width: 1280px) { html.tm-bot.bp2 { --botp-w: clamp(720px, 60vw - 48px, 880px); } }
  .bp2 .tb-split, .bp2 .tb-c1, .bp2 .tb-c2, .bp3 .tb-split, .bp3 .tb-c1, .bp3 .tb-c2 { display: contents; }
  @container botp (min-width: 720px) {
    .bp2 #bot-pane { display: flex; flex-direction: column; overflow: hidden; }
    .bp2 .tb-kt { flex: none; }
    .bp2 .tb-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bp2 .tb-c1 { display: block; overflow-y: auto; min-height: 0; padding-right: 24px; }
    .bp2 .tb-c2 { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; padding-left: 24px; box-shadow: inset 1px 0 var(--rv-line); }
    .bp2 .tb-c2 > .tb-s:first-child { box-shadow: none; }
    .bp2 .tb-c2 .tb-foot { margin-top: auto; }
  }
  /* design 3: the Arbitrage Terminal's format. Flat on the page, hairlines between the strip, the chart, the settings
     and My bots; the chart and the settings share the width (the divider, 30-70%); the settings in two columns from 560px */
  @media (min-width: 861px) {
    html.tm-bot.bp3 { --tick-h: 64px; }
    html.bp3 body { background: var(--rv-bg); }
    .bp3 .term { grid-template-columns: minmax(0, var(--bs1, 1fr)) minmax(0, var(--bs2, 1fr)); padding: 0 24px; gap: 0; background: none; border-bottom: 0;
                 grid-template-rows: var(--tick-h) max(440px, calc(100vh - var(--gh) - var(--tick-h) - var(--bots-min))) auto; }
    .bp3 .term > .p { background: none; border: 0; border-radius: 0; }
    .bp3 .top.p { padding: 0; box-shadow: inset 0 -1px var(--rv-line); }
    .bp3 .chart > .ph { padding-left: 0; }
    .bp3 .form { position: relative; box-shadow: inset 1px 0 var(--rv-line); }
    .bp3 .form > .ph { padding: 0 calc(16px + var(--sbw, 0px)) 0 16px; }
    /* the settings keep 16px clear of both edges; a scrollbar gets its own gutter instead of covering the figures (owner,
       2026-09-29: "the right gets cut off") */
    .bp3 #bot-pane { padding: 0 16px; scrollbar-gutter: stable; scrollbar-width: thin; }
    .bp3 .bottom .tabs { padding-right: 0; }
    .bp3 .bottom { box-shadow: inset 0 1px var(--rv-line); }
    .bp3 .bottom .tabs { padding-left: 0; }
    .bp3 #tbl > .empty { padding-left: 0; }
    .bp3 .tb-kt, .bp3 .tb-foot { background: var(--rv-panel); }
    .bp3 #b-keys, .bp3 .top > .sp { display: none !important; }
    .bp3 #stats { flex: 0 1 auto; }
    .tb-strip { display: flex; align-items: center; flex: none; margin-left: auto; padding-left: 16px; }
    .tb-strip .tb-fs { display: none; }       /* a desktop's figures are in the bar's grid (statsHtml) */
    .tb-strip .go { flex: none; width: auto; height: 40px; padding: 0 24px; }
    .stat .k .tb-sim { font-style: normal; margin-left: 4px; }
    .tb-div { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; z-index: 5; cursor: col-resize; }
    .tb-div:hover, .tb-div.on { box-shadow: inset 2px 0 var(--rv-accent); }
  }
  .tb-f { display: grid; gap: 2px; flex: none; min-width: 0; white-space: nowrap; }
  .tb-f > span { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); }
  .tb-f > b { font-size: var(--fs-m); line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .tb-f .tb-sim { font-style: normal; }
  /* the Funding Arbitrage tab: the recommended pairs as compact rows (the chosen one lit), the pair's figures on the right */
  .bp3 .tb-arl { display: grid; gap: 2px; }
  /* the text in line with the section's edges; the lit row's shade reaches 8px past them (drawn, not laid out) */
  .tb-ar3 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; width: 100%; padding: 8px 0; border: 0;
            border-radius: var(--rv-r-xs); background: none; color: var(--rv-text); text-align: left; font: inherit; cursor: pointer; }
  .tb-ar3:hover, .tb-ar3.on { background: var(--rv-btn2); box-shadow: -8px 0 var(--rv-btn2), 8px 0 var(--rv-btn2); }
  .tb-ar3 b { font-size: var(--fs-m); line-height: 20px; font-weight: 500; }
  .tb-ar3 .a { font-size: var(--fs-m); line-height: 20px; font-variant-numeric: tabular-nums; text-align: right; }
  .tb-ar3 .l { grid-column: 1 / 3; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tb-ar3.off b, .tb-ar3.off .a, .tb-ar3.off .a span { color: var(--rv-dim); }
  .bp3 .tb-arl + .tb-lnk { justify-self: start; }
  /* the Signal bot tab: what it does in three short lines */
  .tb-ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); line-height: 20px; color: var(--rv-muted); }
  .bp3 .tb-q .tb-pr .v { font-size: var(--fs-s); line-height: 16px; color: var(--rv-muted); }
  /* these two tabs have less to hold: two columns from a 440px panel */
  @container botp (min-width: 440px) {
    .bp3 .tb-split.tb-2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 24px; align-items: start; }
    .bp3 .tb-2 > .tb-c1, .bp3 .tb-2 > .tb-c2 { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
    .bp3 .tb-2 > .tb-c2 > .tb-s:first-child { box-shadow: none; }
  }
  .tb-lg { margin-left: 4px; font-size: var(--fs-xs); font-weight: 400; color: var(--rv-muted); }
  /* one column: strategy, parameters, investment, what the bot will do, backtest (the columns' own order below) */
  .bp3 .tb-c1 > .tb-sd { order: 1; } .bp3 .tb-c2 > .tb-bts { order: 2; }
  .bp3 .tb-c2 > .tb-s { box-shadow: inset 0 1px var(--rv-line); }
  /* two columns from a 600px panel, sized by their content (owner, 2026-09-29: "no need to split exactly in the middle,
     just make it look good"): the controls on the left take ~45%, the money, the figures and the backtest the rest; what
     the bot will do closes the left column so both end at about the same height */
  @container botp (min-width: 600px) {
    .bp3 .tb-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 24px; align-items: start; }
    .bp3 .tb-c1, .bp3 .tb-c2 { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
    .bp3 .tb-c2 > .tb-s:first-child { box-shadow: none; }
    .bp3 .tb-c1 .tb-pr > .k { white-space: nowrap; }
    .bp3 .tb-c1 .tb-pi { flex: 0 1 136px; width: auto; min-width: 72px; }
    .bp3 .tb-c1 .tb-rg { flex: 0 1 216px; min-width: 0; } .bp3 .tb-c1 .tb-rg .tb-pi { flex: 1 1 0; min-width: 64px; }
  }
  @media (max-width: 860px) {
    .bpn #bot-pane { padding: 0; overflow: visible; }
    .bpn .tb-kt { position: static; background: none; }
    .bpn .tb-foot { bottom: calc(var(--tb-h) + env(safe-area-inset-bottom)); background: var(--rv-bg); padding: 12px 0; }
    .bpn .bottom { min-height: 0; } .bpn .bottom .pb { min-height: 0; }
    .bpn .bottom:not(:has(#tbl > .empty)) .pb { min-height: 160px; }
    .bp3 #term { grid-template-rows: auto auto auto auto auto auto; padding-bottom: calc(var(--tb-h) + 72px + env(safe-area-inset-bottom)); }
    .bp3 #term > .tb-strip { grid-column: 1 / 3; grid-row: 2; min-height: 166px; align-items: flex-start; }   /* its filled height from the first paint */
    .bp3 #term > .chart { grid-row: 3; } .bp3 #term > .fsw { grid-row: 4; } .bp3 #term > .form, .bp3 #term > .book { grid-row: 5; } .bp3 #term > .bottom { grid-row: 6; }
    .bp3 .tb-fs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 4px 0; }
    .bp3 .tb-f > b { white-space: normal; }
    .bp3 .tb-strip .go { position: fixed; left: var(--pad); right: var(--pad); bottom: calc(var(--tb-h) + 12px + env(safe-area-inset-bottom)); width: auto; height: 44px; z-index: 25; }
    .tb-div { display: none; }
  }

  /* strategies docked as a fourth column when there is room; otherwise a panel over the right side */
  .strat { position: fixed; z-index: 30; top: calc(var(--gh) + var(--g)); right: var(--g); bottom: var(--g); width: var(--strat-w); box-shadow: var(--rv-pop); }
  .strat.open { display: flex; }
  @media (min-width: 1600px) {
    .term.docked { grid-template-columns: minmax(0, 1fr) var(--book-w) var(--form-w) var(--strat-w); }
    .term.docked .strat.open { position: static; grid-column: 4; grid-row: 1 / 5; width: auto; box-shadow: none; }
  }

  /* ---- phone: order panel and book side by side, positions below, the chart above the app's tab bar ---- */
  @media (max-width: 860px) {
    :root { --gh: 0px; }
    body { overflow: auto; }
    .top.p { gap: 8px; padding: 0 var(--pad); position: sticky; top: 0; z-index: 20; height: var(--top); margin: 0 calc(-1 * var(--pad)) -12px; border: 0; border-bottom: 1px solid var(--rv-line);
             border-radius: 0; background: var(--rv-bg); overflow: visible; }
    .stats, .acct, #b-strat, .form > .ph, .book > .ph, .d-only, .trades, .acctp, #fav, .cview, #depth { display: none !important; }
    .only-m, .hbtn.only-m { display: inline-flex; } .xb.only-m { display: grid; }
    .mkt { order: 1; padding: 0 4px 0 0; border: 0; background: none; gap: 4px; font-size: var(--fs-l); font-weight: 500; margin-left: 0; }
    .mkt .q { font-weight: 500; }
    .mkt .tag { display: none; }
    .mpx { order: 2; display: grid; gap: 0; min-width: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .mpx b { font-size: var(--fs-m); line-height: 18px; font-weight: 500; }
    .mpx .chg { height: 16px; line-height: 16px; padding: 0; background: none !important; font-size: var(--fs-xs); }
    .top > .sp { order: 3; }
    .vsel { order: 4; padding: 0 4px 0 8px; gap: 6px; font-size: var(--fs-s); height: 28px; flex: none; }   /* never squeezed: the name gives way first (fitTop) */
    #b-chart { order: 5; width: 32px; }
    /* the exchange on a phone: its logo with the status dot on its corner, then its name while the bar has room (fitTop) */
    .vsel .vlg .dot { border-color: var(--rv-sunk); }
    .top.vc1 .vsel .vl { display: none; } .top.vc1 .vsel { padding: 0 4px 0 6px; gap: 4px; }
    .top.vc2 .mkt .q { display: none; }
    .top.vc3 #mkt-i { display: none; } .top.vc4.p { gap: 4px; }   /* a long coin with the bell (FARTCOIN, 360px): its logo, then the gaps give way; the chart button stays on screen */
    .term { display: grid; height: auto; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); grid-template-rows: auto auto auto; gap: 12px;
            padding: 0 var(--pad) calc(var(--tb-h) + 12px + env(safe-area-inset-bottom)); background: none; border: 0; }
    .form { grid-column: 1; grid-row: 2; background: none; border: 0; border-radius: 0; overflow: visible; }
    .form .fm { padding: 0; gap: 8px; overflow: visible; }
    .book { grid-column: 2; grid-row: 2; background: none; border: 0; border-radius: 0; position: relative; }
    #book { position: absolute; inset: 0; }
    .bottom { grid-column: 1 / 3; grid-row: 3; min-height: 200px; overflow: visible; }
    .bottom .pb { min-height: 160px; }
    /* positions: flat on the page, a hairline over its tabs, across the full width as the bot setup's sections */
    .bottom { margin: 4px calc(-1 * var(--pad)) 0; box-shadow: inset 0 1px var(--rv-line); }
    .bottom .tabs { gap: 20px; padding: 0 8px 0 var(--pad); }
    .tabs button.only-m:not(.xb) { align-items: center; }
    .tw { position: static; overflow-x: auto; }
    /* the book in its narrow column: price and amount only */
    .bk-f { display: grid; gap: 0; height: 32px; margin-bottom: 4px; text-align: right; font-size: var(--fs-xs); line-height: 16px; white-space: nowrap; overflow: hidden; }
    .bk-f .k { color: var(--rv-dim); } .bk-f .v { font-variant-numeric: tabular-nums; }
    .bk-h, .bk-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0; font-size: var(--fs-xs); }
    .bk-h span:nth-child(3), .bk-r span:nth-of-type(3) { display: none; }
    .bk-h { height: 32px; line-height: 14px; align-items: end; padding-bottom: 2px; }
    .bk-m { height: 44px; display: grid; gap: 0; justify-content: center; text-align: center; padding: 0; border: 0; }
    .bk-m b { font-size: var(--fs-l); line-height: 24px; font-weight: 500; } .bk-m span { line-height: 16px; }
    .bk-bs { height: 24px; padding: 0; border: 0; gap: 4px; }
    .bk-grp { margin-top: 8px; display: flex; }
    .bk-grp .gb { width: 100%; height: 32px; padding: 0 8px; font-size: var(--fs-s); }
    .trs { top: 24px; }
    .form .sides { grid-template-columns: 1fr; gap: 8px; }
    .form .sd .go { order: 3; margin: 4px 0 0; }
    .form .sd { gap: 0; }
    .chip { padding: 0 6px 0 8px; font-size: var(--fs-s); } .chip svg.i, .ub svg.i { width: 12px; height: 12px; }
    .inp .pre { padding-left: 8px; }
    .inp input { padding: 0 4px; text-align: center; }
    .sheet .sh-b > .inp input, .sheet .lvl .inp input { text-align: right; padding: 0 8px 0 12px; }   /* a sheet has the full width: figures right, as on a desktop */
    .inp .ub { margin-right: 4px; padding: 0 2px 0 6px; }
    .al { font-size: var(--fs-xs); }
    .foot { display: none; }
    .tif { display: flex; }
    /* the chart: at the top of the page as on an exchange app, folded away or open (the chart button in the bar; the
       choice is kept); it never covers the form or the positions */
    .chart { grid-column: 1 / 3; grid-row: 1; height: 360px; margin: 0; border: 0; border-bottom: 1px solid var(--rv-line); border-radius: 0; display: none; }
    .chart.open { display: flex; }
    html.tm-bot .chart { margin: 0 calc(-1 * var(--pad)); }   /* edge to edge where the Bot Terminal pads its panels */
    /* the first paint at its final layout (no shift): the Bot Terminal opens the chart on phones, the order panel and the bot
       builder keep about their filled height while their skeleton shows */
    html.tm-bot:not(.rdy) .chart { display: flex; }
    html.tm-bot #term:not(:has(> #tb-strip)) > #p-chart { margin-top: 166px; }   /* the bot strip's place (radar/web/terminal-bots.js) */
    #form:has(> .fsk) { min-height: 444px; }
    html.tm-bot #p-form:not(:has(> #bot-pane:not([hidden]):not(:empty))) { min-height: 1000px; }
    .chart .ph { padding: 0 4px 0 12px; } #b-ind svg.i { display: none; }
    #p-chart #b-ind .lb { display: inline; } #p-chart #b-ind svg.i { display: none; } #p-chart #b-ind { padding: 0 8px; }
    #chart-x { display: none !important; }
    /* rows: the chart, the Order | Bot switch (radar/web/terminal-bots.js), form and book, positions */
    #term { grid-template-rows: auto auto auto auto auto; } #term > .top { grid-row: 1; grid-column: 1 / 3; } #term > .chart { grid-row: 2; } #term > .fsw { grid-row: 3; }
    #term > .form, #term > .book { grid-row: 4; } #term > .bottom { grid-row: 5; }
    /* the Bot Terminal on a phone: the chart, the bot form across the width, then the bots */
    .tm-bot #term > .form { grid-column: 1 / 3; }
    .tm-bot .tb-cols { grid-template-columns: minmax(0, 1fr); gap: 8px; } .tm-bot .tb-col { gap: 8px; } .tm-bot #bot-pane { padding: 0; }
    .cbar { display: none !important; }
    /* the phone tabs are the shared ones (radar/nav.py .rvt, --rv-tabs-h = --tb-h) */
    .strat { display: none !important; }
    .sheet, .sheet.sm { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; border-radius: var(--rv-r-lg) var(--rv-r-lg) 0 0; max-height: 92vh; z-index: 65; }
    .drop, .drop.vd, .drop.mk { left: 0 !important; right: 0; top: var(--top) !important; width: auto; max-height: calc(100vh - var(--top) - var(--tb-h)); border-radius: 0 0 8px 8px; }
    .dl-h, .dl-r { grid-template-columns: minmax(0, 1fr) 88px 80px; gap: 8px; }
    /* Binance's phone list: symbol and volume on the left, price and 24h change on the right */
    .drop.mk .dl-h, .drop.mk .dl-r { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
    .drop.mk .dl-h > :nth-child(3), .drop.mk .dl-r > :nth-child(3) { display: none; }
    .drop.mk .dl-h .pch, .drop.mk .dl-r .pr small { display: inline; }
    .drop.mk .dl-r .pr { display: grid; justify-items: end; line-height: 16px; gap: 2px; } .drop.mk .dl-r .pr > span { font-weight: 500; }
    .drop.mk { height: auto !important; }
    .vd .dl-h, .vd .dl-r { grid-template-columns: minmax(0, 1fr) 76px 88px 68px; } .vd .dl-r .sub { display: none; }
    .vd .dl-h { height: auto; min-height: 28px; padding-top: 4px; padding-bottom: 4px; }
    .vd .dl-h span { white-space: normal; line-height: 14px; overflow-wrap: break-word; }
    .vcn { width: 32px; padding: 0; } .vcn span { display: none; } .vcn svg.i { display: block; }      /* Connect as its + on a phone */
    .dhint { bottom: 32px; }
    .toasts { left: 12px; right: 12px; top: calc(var(--top) + 8px); bottom: auto; width: auto; }
    .hsub { display: flex; padding: 12px 12px 0; } .hsub .seg { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 32px; }
    .hf { position: static; height: auto; min-height: 36px; padding: 8px 12px 0; } .hf + .skl { position: static; } .empty.hfe { top: 88px; }
    #hf-x .hx { display: none; } #hf-x { width: 32px; justify-content: center; padding: 0; }      /* a phone: the icon alone */
    .hsub .seg button { height: 26px; line-height: 26px; font-size: var(--fs-s); }
    .tabs .acts { display: none; }
    .pc-g .tpc { justify-content: flex-start; }
  }
  @media (max-width: 380px) {
    .vsel { flex: none; }                                    /* the exchange chip is never squeezed (it clipped its logo at 360px) */
    .mkt { font-size: var(--rv-fs-lg); }
    .bottom .tabs { gap: 12px; } .tabs .ol { display: none; } .tabs .os { display: inline; }
    .vd .dl-h, .vd .dl-r { grid-template-columns: minmax(0, 1fr) 68px 88px 64px; gap: 4px; } .vd .dl-r { font-size: var(--fs-xs); }
    .term { gap: 8px; }
    .inp .pm { width: 24px; }
    .chip { padding: 0 4px 0 6px; }
    .bk-r, .bk-h { font-size: var(--rv-fs-xs); }
  }
  @media (min-width: 861px) { .tif, .bk-grp, .ot-dd, .otm { display: none !important; } }
  @media (max-width: 860px) { .otm { display: grid; } }
  /* About order types: the list on the left, one type on the right (a full-screen sheet with the list on top on a phone) */
  .sheet.ab { width: 720px; }
  .ab-b { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 4px 20px 20px; }
  .ab-l { display: grid; align-content: start; gap: 0; }
  .ab-l button { border: 0; background: none; text-align: left; height: 32px; padding: 0 8px; border-radius: var(--rv-r-xs); font-size: var(--fs-s); color: var(--rv-muted); white-space: nowrap; }
  .ab-l button:hover { color: var(--rv-text); background: var(--rv-btn2); } .ab-l button.on { color: var(--rv-text); background: var(--rv-btn2); font-weight: 500; }
  .ab-r { display: grid; gap: 12px; align-content: start; min-width: 0; }
  .ab-r h4 { margin: 0; font-size: var(--fs-l); font-weight: 500; line-height: 24px; }
  .ab-tags { display: flex; gap: 8px; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); }
  .ab-tags span + span::before { content: '·'; margin-right: 8px; color: var(--rv-dim); }
  .ab-fig { height: 144px; border-radius: var(--rv-r-sm); background: var(--rv-sunk); display: grid; place-items: center; }
  .ab-fig svg { width: 100%; height: 144px; }
  .ab-r p { margin: 0; font-size: var(--fs-s); line-height: 20px; color: var(--rv-muted); }
  .ab-r .go { height: 40px; }
  .ab-r .why { margin: 0; }
  @media (max-width: 860px) {
    .sheet.ab { top: 0; bottom: 0; left: 0; right: 0; width: auto; transform: none; max-height: none; border-radius: 0; display: flex; flex-direction: column; }
    .ab-b { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0 20px 20px; overflow-y: auto; }
    .ab-l { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; } .ab-l::-webkit-scrollbar { display: none; }
    .ab-l button { flex: none; background: var(--rv-sunk); }
  }

  /* ---- Terminal v2 (polish steps 5-7): the ticket and the book on the shared components, motion ---- */
  /* the price field: Last · Mid · BBO as quiet accent text inside its right edge (no block button beside it) */
  .inp.pxin input { padding-right: 8px; }
  .inp .qk { display: inline-flex; align-items: center; gap: 10px; padding: 0 12px 0 4px; flex: none; }
  .inp .qk button { border: 0; background: none; padding: 0; height: 24px; font-size: var(--fs-xs); font-weight: 500; color: var(--rv-accent); opacity: .85; white-space: nowrap;
                    transition: opacity var(--rv-dur-1), color var(--rv-dur-1); }
  .inp .qk button:hover { opacity: 1; } .inp .qk button:disabled { color: var(--rv-faint); opacity: 1; cursor: default; }
  .fld .inp .qk .bbo { height: 24px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; font-weight: 500; }
  .inp input:focus-visible { box-shadow: none; }      /* the field's own border shows the focus */
  .inp .qk .bbo.on { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
  .inp .ro.acc + .ub.x { margin-right: 0; }
  /* a unit or a menu inside a field is plain text with a chevron, not a chip */
  .inp .ub { background: none; color: var(--rv-muted); padding: 0 8px 0 6px; margin-right: 4px; }
  .inp .ub:hover, .inp .ub.on { border-color: transparent; color: var(--rv-text); }
  .inp input::placeholder { color: var(--rv-faint); }
  /* the slider: a 4px track, round stops (no diamonds), a round thumb ringed in the panel colour; the stops as figures under it */
  .amt:has(> .pctl) { height: 40px; }
  .dmk button { width: 8px; height: 8px; margin-left: -4px; top: 1px; border: 2px solid var(--rv-line2); border-radius: 999px; transform: none; background: var(--rv-panel);
                transition: background-color var(--rv-dur-1), border-color var(--rv-dur-1); }
  .dmk button.on { border-color: var(--rv-accent); background: var(--rv-accent); }
  .amt input[type=range]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--rv-accent) var(--p, 0%), var(--rv-line2) var(--p, 0%)); }
  .amt input[type=range]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border-radius: 999px; transform: none; background: #fff; border: 3px solid var(--rv-accent);
                                                 box-shadow: 0 0 0 2px var(--rv-panel); transition: transform var(--rv-dur-1) var(--rv-ease-out); }
  .amt input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
  .amt input[type=range]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 999px; background: #fff; border: 3px solid var(--rv-accent); }
  .pctl { position: absolute; left: 0; right: 0; top: 22px; display: flex; justify-content: space-between; }
  .pctl button { border: 0; background: none; padding: 0; height: 16px; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-dim); font-variant-numeric: tabular-nums; min-width: 28px; text-align: center;
                 transition: color var(--rv-dur-1); }
  .pctl button:first-child { text-align: left; } .pctl button:last-child { text-align: right; }
  .pctl button:hover:not(:disabled), .pctl button.on { color: var(--rv-text); } .pctl button:disabled { cursor: default; }
  /* checkboxes: 16px, 4px radius, a hairline at rest; checked = the accent with a white tick */
  .ck input { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; border-radius: var(--rv-r-xs); border: 1.5px solid var(--rv-faint); background: transparent center / 12px 12px no-repeat;
              cursor: pointer; transition: background-color var(--rv-dur-2) var(--rv-ease-out), border-color var(--rv-dur-2); }
  .ck input:hover:not(:disabled) { border-color: var(--rv-muted); }
  .ck input:checked { border-color: var(--rv-accent); background-color: var(--rv-accent);
                      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
  .ck input:disabled { opacity: .45; cursor: default; }
  .ck input:focus-visible { box-shadow: 0 0 0 2px var(--rv-focus); outline: 0; }
  /* buttons: 8px corners at 40px, a press that gives (98%), disabled keeps its hue */
  .go { border-radius: var(--rv-r-sm); transition: filter var(--rv-dur-1), transform var(--rv-dur-1) var(--rv-ease-out), opacity var(--rv-dur-1); }
  .go:not(:disabled):active, .sb:not(:disabled):active, .bbo:not(:disabled):active, .mtop .mb:not(:disabled):active { transform: scale(.98); }
  .sb, .mtop .mb, .gb, .xb { transition: background-color var(--rv-dur-1), color var(--rv-dur-1), border-color var(--rv-dur-1), transform var(--rv-dur-1) var(--rv-ease-out); }
  .mtop .mb { border-radius: var(--rv-r-xs); }
  /* the book: depth bars behind the figures (never over a digit), the hovered run of rows lit, the last price with its
     arrow, the spread in bps */
  .bk-r i { z-index: 0; } .bk-r span { position: relative; z-index: 1; }
  .bk-r { transition: background-color var(--rv-dur-1); }
  .bk-r.hl { background: var(--rv-panel2); }
  .bk-r.hl:hover { background: var(--rv-bg-3); }
  .bk-m.v1 b { display: inline-flex; align-items: center; gap: 2px; border-radius: var(--rv-r-xs); padding: 0 2px; margin: 0 -2px; }
  .bk-m.v1 b.up::after, .bk-m.v1 b.dn::after { content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center / 12px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center / 12px no-repeat; }
  .bk-m.v1 b.dn::after { transform: rotate(180deg); }
  .bk-tip { position: fixed; z-index: 45; display: grid; gap: 2px; min-width: 176px; padding: 8px 12px; border-radius: var(--rv-r-sm); background: var(--rv-panel2);
            border: 1px solid var(--rv-card-line); box-shadow: var(--rv-pop); font-size: var(--fs-xs); line-height: 16px; pointer-events: none; font-variant-numeric: tabular-nums; }
  .bk-tip div { display: flex; justify-content: space-between; gap: 16px; } .bk-tip span { color: var(--rv-muted); } .bk-tip b { font-weight: 500; }
  /* a changed price: a 400 ms tint in its direction */
  .stat.px .v { border-radius: var(--rv-r-xs); }
  .fla.fl-up, .flb.fl-up { animation: rv-fl-up 400ms var(--rv-ease-out); } .fla.fl-dn, .flb.fl-dn { animation: rv-fl-dn 400ms var(--rv-ease-out); }
  .flb.fl-up { animation-name: rv-fl-up2; } .flb.fl-dn { animation-name: rv-fl-dn2; }
  @keyframes rv-fl-up { from { background-color: var(--rv-pos-soft); } to { background-color: transparent; } }
  @keyframes rv-fl-up2 { from { background-color: var(--rv-pos-soft); } to { background-color: transparent; } }
  @keyframes rv-fl-dn { from { background-color: var(--rv-neg-soft); } to { background-color: transparent; } }
  @keyframes rv-fl-dn2 { from { background-color: var(--rv-neg-soft); } to { background-color: transparent; } }
  @media (prefers-reduced-motion: reduce) { .fla, .flb { animation: none !important; } }
  /* the chart's Display menu: a checklist that stays open */
  .gb#b-disp { padding: 0 8px; gap: 4px; } #b-disp svg.i { display: none; }
  @media (max-width: 860px) { @container chartp (max-width: 759px) { #p-chart #b-disp { width: 24px; padding: 0; justify-content: center; } #p-chart #b-disp .lb { display: none; } #p-chart #b-disp svg.i { display: block; } } }
  html.tm-bot #b-disp, html.tm-bot .pos-tag { display: none !important; }
  .pi.pck > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
  .pi .cbx { width: 16px; height: 16px; flex: none; border-radius: var(--rv-r-xs); border: 1.5px solid var(--rv-faint); box-sizing: border-box; background: transparent center / 12px 12px no-repeat;
             transition: background-color var(--rv-dur-2) var(--rv-ease-out), border-color var(--rv-dur-2); }
  .pi.pck.ck .cbx { border-color: var(--rv-accent); background-color: var(--rv-accent);
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
  .pi.pck.on { color: inherit; }
  /* a position on the chart: P&L (ROE), size, Reverse, Close, riding on its entry line at the chart's left */
  /* quiet as the price lines' labels: a small tag on the chart's background with a hairline; only the P&L in colour */
  .pos-tag { position: absolute; left: calc(var(--dtb-w) + 8px); top: 0; z-index: 3; display: flex; align-items: stretch; height: 20px; border-radius: var(--rv-r-xs); overflow: hidden;
             background: var(--rv-bg); box-shadow: inset 0 0 0 1px var(--rv-line2); font-size: 11px; font-weight: 500; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; will-change: transform; }
  .pos-tag > span { padding: 0 8px; } .pos-tag .pt-pl small { font-size: inherit; font-weight: 400; }
  .pos-tag .pt-sz { box-shadow: inset 1px 0 var(--rv-line2); } .pos-tag .pt-sz.up, .pos-tag .pt-sz.dn { color: var(--rv-text); }
  .pos-tag button { width: 22px; border: 0; padding: 0; display: grid; place-items: center; background: none; color: var(--rv-muted); box-shadow: inset 1px 0 var(--rv-line2); transition: background-color var(--rv-dur-1), color var(--rv-dur-1); }
  .pos-tag button svg.i { width: 12px; height: 12px; } .pos-tag button:hover { color: var(--rv-text); background: var(--rv-bg-3); }
  .pos-tag button[data-pt=close]:hover { color: var(--rv-neg); }
  /* the chart maximised in the window (MEXC's); Trade floats the order panel over it */
  .tradeb { display: none; }
  html.cmax #p-chart { position: fixed; inset: 0; z-index: 52; border: 0; border-radius: 0; }
  html.cmax .tradeb { display: inline-flex; padding: 0 12px; background: var(--rv-primary); color: var(--rv-primary-ink); font-weight: 500; margin-left: 4px; }
  html.cmax .tradeb:hover { background: var(--rv-primary-hover); } html.cmax .tradeb.on { background: var(--rv-bg-3); color: var(--rv-text); }
  html.cmax .scrim { z-index: 60; } html.cmax .drop { z-index: 62; } html.cmax .toasts { z-index: 90; }
  .fl-x { display: none !important; }
  html.ftk #p-form { position: fixed; z-index: 54; right: 16px; top: 56px; width: var(--form-w); height: min(760px, calc(100vh - 72px)); box-shadow: var(--rv-pop);
                     border: 1px solid var(--rv-card-line); border-radius: var(--rv-r-lg); animation: rv-pop-in var(--rv-dur-3) var(--rv-ease-out); }
  html.ftk #p-form[style*="left"] { right: auto; }
  html.ftk:not(.ftkf) #p-form { top: 0; right: 0; bottom: 0; height: auto; border: 0; border-left: 1px solid var(--rv-line); border-radius: 0; box-shadow: none; animation: rv-dock-in var(--rv-dur-4) var(--rv-ease-out); }
  html.cmax.ftk:not(.ftkf) #p-chart { right: var(--form-w); }
  @keyframes rv-dock-in { from { transform: translateX(24px); opacity: 0; } }
  html.ftk #f-tabs { cursor: grab; } html.ftk #f-tabs:active { cursor: grabbing; } html.ftk .fl-x { display: grid !important; width: 24px; height: 24px; margin-left: 4px; }
  /* sheets as popovers beside their button (the close at a price in a position's row) */
  .sheet.anch { transform: none; animation: rv-pop-in var(--rv-dur-3) var(--rv-ease-out); }
  .scrim.clear { background: transparent; animation: none; }
  /* motion: tab ink slides, menus and sheets ease in (none under reduced motion: the tokens are 0) */
  #tsc, #bk-tabs { position: relative; }
  .inked > button.on { border-bottom-color: transparent; }
  .ink { position: absolute; left: 0; bottom: 0; width: 1px; height: 2px; background: var(--rv-accent); transform-origin: 0 0; pointer-events: none;
         transition: transform var(--rv-dur-2) var(--rv-ease-out), opacity var(--rv-dur-1); }
  #tsc > .ink { bottom: 1px; }
  .tabs button, .otabs button, .pi, .dl-r, .seg button { transition: color var(--rv-dur-1), background-color var(--rv-dur-1); }
  .pop:not([hidden]), .drop:not([hidden]) { animation: rv-pop-in var(--rv-dur-3) var(--rv-ease-out); }
  @keyframes rv-pop-in { from { opacity: 0; transform: translateY(4px) scale(.98); } }
  .sheet:not([hidden]):not(.anch) { animation: rv-sheet-in var(--rv-dur-4) var(--rv-ease-out); }
  @keyframes rv-sheet-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } }
  .scrim:not([hidden]) { animation: fade var(--rv-dur-3) var(--rv-ease-out); }
  .toast { animation: rv-pop-in var(--rv-dur-3) var(--rv-ease-out); }
  @media (max-width: 860px) {
    .sheet:not([hidden]):not(.anch) { animation-name: rv-sheet-up; }
    @keyframes rv-sheet-up { from { transform: translateY(24px); opacity: 0; } }
  }
  @media (prefers-reduced-motion: reduce) {
    .pop:not([hidden]), .drop:not([hidden]), .sheet:not([hidden]), .toast, html.ftk #p-form { animation: fade var(--rv-dur-3) linear !important; }
    .ink { transition: none; }
  }
  /* the favourites strip at the window's bottom edge: symbol, price, 24h change; the page keeps its height free */
  .fbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 28px; display: flex; align-items: center; gap: 0; padding: 0 8px 0 var(--pad);
          background: var(--rv-bg); border-top: 1px solid var(--rv-line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; font-size: var(--fs-xs); line-height: 16px; }
  .fbar::-webkit-scrollbar { display: none; }
  .fbar .fb-h { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--rv-dim); padding-right: 8px; }
  .fbar .fb-h svg.i { width: 12px; height: 12px; color: var(--rv-accent); fill: currentColor; }
  .fbar button { flex: none; display: inline-flex; align-items: baseline; gap: 6px; height: 28px; padding: 0 10px; border: 0; background: none; color: var(--rv-muted);
                 font-size: var(--fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color var(--rv-dur-1), background-color var(--rv-dur-1); align-items: center; }
  .fbar button b { font-weight: 500; color: var(--rv-text); } .fbar button:hover { background: var(--rv-panel2); } .fbar button.on b { color: var(--rv-accent); }
  html.fbr body { padding-bottom: 28px; } html.fbr .toasts { bottom: 44px; }
  @media (max-width: 860px) { .fbar { display: none !important; } html.fbr body { padding-bottom: 0; } }
  html.cmax #chart-src { display: none; }
  /* no shift when the data arrives: the coin's logo has its room from the first paint, and the page's scrollbar its gutter */
  @media (max-width: 860px) {
    html.k1:not(.tm-bot) #form { min-height: 584px; } html.k0:not(.tm-bot) #form { min-height: 464px; }
    .mpx { min-width: 72px; }
  }
  #mkt-i:empty { display: block; width: 24px; height: 24px; border-radius: 999px; background: var(--rv-bg-3); margin-right: 2px; flex: none; }
  @media (min-width: 861px) { body { scrollbar-gutter: stable; } }
  /* a 1000-1199px window (the owner's MacBook Chrome): the book and the order panel narrow a little so the chart keeps
     about half the width (Binance squeezes the chart; Hyperliquid switches to tabs) */
  @media (min-width: 861px) and (max-width: 1199px) { html:not(.tm-bot) { --book-w: 248px; --form-w: 280px; } html:not(.tm-bot) .otabs .og { flex-basis: 12px; } }
  /* the layout (Settings: Layout; terminal-core.js layPlan), set on <html> before the first paint: data-tl (the preset)
     with --tl-cols (the grid's tracks: the chart takes the rest, the book and the order panel their widths), --tl-c/b/f
     (each one's span), --tl-top (the market bar: over the columns beside the order panel, or the full width with
     data-tbar, the order panel then starting under it), --tl-bot / --tl-ac (positions and the account), data-thb /
     data-tha (the book or the account hidden); --ub / --uf the widths and --bv the positions' visible height the trader
     dragged (none: the preset's own). Desktop only; the Bot Terminal and the docked strategies keep theirs. */
  @media (min-width: 861px) {
    html[data-tl]:not(.tm-bot) .term:not(.docked) { grid-template-columns: var(--tl-cols);
      grid-template-rows: var(--tick-h) max(300px, calc(100vh - var(--gh) - var(--tick-h) - var(--trades-h) - var(--bv, 184px))) var(--trades-h) max(var(--bottom-h), var(--bv, 0px)); }
    html[data-tl]:not(.tm-bot) .term:not(.docked) > .top.p { grid-column: var(--tl-top); }
    html[data-tl]:not(.tm-bot) .term:not(.docked) > .chart { grid-column: var(--tl-c); }
    html[data-tl]:not(.tm-bot) .term:not(.docked) > .book { grid-column: var(--tl-b); }
    html[data-tl]:not(.tm-bot) .term:not(.docked) > .form { grid-column: var(--tl-f); }
    html[data-tl]:not(.tm-bot) .term:not(.docked) > .bottom { grid-column: var(--tl-bot); }
    html[data-tl]:not(.tm-bot) .term:not(.docked) > .acctp { grid-column: var(--tl-ac); }
    html[data-thb]:not(.tm-bot) .term:not(.docked) > .book, html[data-tha]:not(.tm-bot) .term:not(.docked) > .acctp { display: none; }
    /* the market bar over the full width: the order panel starts under it, the chart row takes the bar's height back so
       the panel keeps about the standard height (its button stays in view on a 1280x800 tablet) */
    html[data-tbar]:not(.tm-bot) .term:not(.docked) > .form { grid-row: 2 / 4; }
    html[data-tbar]:not(.tm-bot) .term:not(.docked) {
      grid-template-rows: var(--tick-h) max(356px, calc(100vh - var(--gh) - var(--trades-h) - var(--bv, 184px) - 12px)) var(--trades-h) max(var(--bottom-h), var(--bv, 0px)); }
  }
  /* the widths the trader dragged, kept in their limits (terminal-core.js LAY_MIN / LAY_MAX): the order panel never
     leaves the positions table under 720px, the book never leaves the chart under 400px (402: the two hairlines) */
  @media (min-width: 1000px) {
    html[data-tl]:not(.tm-bot) { --form-w: clamp(280px, var(--uf, 296px), min(420px, max(280px, 100vw - 720px))); --book-w: clamp(220px, var(--ub, 280px), max(220px, 100vw - var(--form-w) - 402px)); }
  }
  @media (min-width: 1000px) and (max-width: 1199px) {
    html[data-tl]:not(.tm-bot) { --form-w: clamp(280px, var(--uf, 280px), min(420px, max(280px, 100vw - 720px))); --book-w: clamp(220px, var(--ub, 248px), max(220px, 100vw - var(--form-w) - 402px)); }
  }
  /* the layout picker in Settings: four small diagrams of the panels, two by two */
  .lay-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lay-o { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px; border: 1px solid var(--rv-line); border-radius: var(--rv-r-sm); background: none;
           color: var(--rv-text); text-align: left; cursor: pointer; font: inherit; }
  .lay-o:hover { border-color: var(--rv-line2); } .lay-o.on { border-color: var(--rv-accent-line); background: var(--rv-accent-soft); }
  .lay-o svg { display: block; width: 100%; height: 48px; }
  .lay-o svg rect { fill: var(--rv-line2); } .lay-o svg rect.k { fill: var(--rv-muted); } .lay-o.on svg rect.k { fill: var(--rv-accent); }
  .lay-o b { display: block; font-size: var(--fs-s); line-height: 16px; font-weight: 500; }
  .lay-o small { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 16px; color: var(--rv-muted); }
  .ihd.lay-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .lay-ask { display: flex; align-items: center; gap: 12px; min-height: 32px; font-size: var(--fs-s); line-height: 16px; }
  .lay-ask .lnk { flex: none; white-space: nowrap; } .lay-ask .lnk.mut { color: var(--rv-muted); }
  /* the free layout (1000px and wider): the drag lines sit over the grid's 1px hairlines, invisible at rest; a wider
     grab zone than the line (24px for a finger); hovered, focused or dragged, the line brightens */
  .term { position: relative; }
  .lgut { position: absolute; z-index: 6; touch-action: none; outline: none; }
  .lgut.v { width: 8px; margin-left: -4px; cursor: col-resize; }
  .lgut.h { height: 8px; margin-top: -4px; cursor: row-resize; }
  @media (pointer: coarse), (any-pointer: coarse) { .lgut.v { width: 24px; margin-left: -12px; } .lgut.h { height: 24px; margin-top: -12px; } }
  .lgut::after { content: ""; position: absolute; background: transparent; transition: background-color .12s; pointer-events: none; }
  .lgut.v::after { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
  .lgut.h::after { top: 50%; left: 0; right: 0; height: 1px; margin-top: -.5px; }
  .lgut:hover::after { background: var(--rv-accent-line); }
  .lgut.on::after, .lgut:focus-visible::after { background: var(--rv-accent); }
  .lgut:focus-visible.v::after { width: 2px; margin-left: -1px; } .lgut:focus-visible.h::after { height: 2px; margin-top: -1px; }
  html.lm-col, html.lm-col * { cursor: col-resize !important; user-select: none; } html.lm-row, html.lm-row * { cursor: row-resize !important; user-select: none; }
  .term.lfree > .p:not(.top) > .ph { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  html.lm-drag, html.lm-drag * { cursor: grabbing !important; user-select: none; }
  html.lm-drag .term > .p { position: relative; } html.lm-drag .term > .p > * { pointer-events: none; }     /* the panels under a dragged one stay still (no chart crosshair) */
  .term > .p.lm-src { opacity: .48; }
  .term > .p.lm-tgt::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; background: var(--rv-accent-soft); box-shadow: inset 0 0 0 1px var(--rv-accent-line); }
  .lm-ghost { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; padding: 4px 8px; border-radius: var(--rv-r-xs); background: var(--rv-bg-2); color: var(--rv-text);
              box-shadow: var(--rv-pop); font-size: var(--fs-xs); line-height: 16px; font-weight: 500; white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) { .lgut::after { transition: none; } }
  /* the positions row's close actions: Market · Limit · Reverse */
  td.cl3 { white-space: nowrap; } td.cl3 .sb { padding: 0 6px; }
  @media (max-width: 860px) {
    .bk-grp { margin-top: 4px; justify-content: flex-end; } .bk-grp .gb { width: auto; height: 24px; padding: 0 4px 0 8px; font-size: var(--fs-xs); }
    .bk-tip { display: none !important; }
  }
  @media (max-width: 860px) {
    .inp.pxin input { text-align: left; padding: 0 4px 0 8px; } .inp .qk { gap: 8px; padding: 0 8px 0 2px; }
    .inp.pxin input.fit { font-size: var(--fs-xs); letter-spacing: -.01em; }
    .inp .qk #f-mid { display: none; }
  }

  /* ---- Terminal v3, the calm-down (owner, 2026-10-03: "I can't tell what changed"): the landing's and the bot setup's
     family at a glance. Text controls in one quiet line, the chosen one in the text colour over the 2px ink; one hero
     figure per area (the price in the market bar, the mid in the book, the size in the order panel); colour only on
     figures that mean up or down, and on the two order buttons (the only filled colour on the screen); depth and volume
     faint; quiet text buttons in the tables. Every control, id, hotkey and layout preset stays. ---- */
  /* market bar: the price as the hero, five figures a trader scans (24h change on the price, Mark, Funding with its
     countdown, 24h volume, open interest; Index, 24h high and low in the ⋯ menu), more air between them; the Bot Terminal's bar is the same bar (owner, 2026-10-03) */
  @media (min-width: 861px) {
    :root .stats { column-gap: 32px; padding-left: 24px; margin-left: 8px; }
    /* the price in the text colour as the bot setup's (its direction in the 24h change over it, the book's mid and the tick's tint) */
    :root .stat.px .v { font-size: 28px; line-height: 32px; letter-spacing: -.02em; margin-right: 0; color: var(--rv-text); }
    :root .stat.px .k { font-size: var(--fs-xs); }
    :root .stat:not(.px) .v { color: var(--rv-text); }
    .stat .k { color: var(--rv-dim); }
  }
  @media (min-width: 861px) and (max-width: 1199px) { :root .stats { column-gap: 20px; padding-left: 16px; margin-left: 0; } :root .stat.px .v { font-size: 24px; line-height: 28px; } }
  /* the chart's bar: timeframes and views as text, the chosen one bright over the 2px ink at the bar's foot; no icons
     beside the words (Indicators keeps its icon only where the bar is narrow) */
  .chart > .ph { gap: 12px; }
  .chart > .ph .seg.tfs { align-self: stretch; height: auto; gap: 4px; }
  .chart > .ph .seg.tfs button { height: auto; padding: 0 6px; border-radius: 0; font-size: var(--fs-xs); color: var(--rv-muted); box-shadow: inset 0 -2px transparent; margin-bottom: -1px; }
  .chart > .ph .seg.tfs button:hover { color: var(--rv-text); }
  .chart > .ph .seg.tfs button.on { color: var(--rv-text); font-weight: 500; box-shadow: inset 0 -2px var(--rv-accent); }
  .chart > .ph .cview { align-self: stretch; align-items: stretch; height: auto; gap: 16px; margin-left: 0; padding-left: 0; box-shadow: none; }
  .chart > .ph .cview button { height: auto; box-shadow: inset 0 -2px transparent; margin-bottom: -1px; }
  .chart > .ph .cview button.on { box-shadow: inset 0 -2px var(--rv-accent); }
  /* keyboard focus: their own underline would hide the site's focus ring, so it is drawn with it */
  .chart > .ph .seg.tfs button:focus-visible, .chart > .ph .cview button:focus-visible { box-shadow: 0 0 0 2px var(--rv-focus); }
  .chart > .ph .seg.tfs button.on:focus-visible, .chart > .ph .cview button.on:focus-visible { box-shadow: inset 0 -2px var(--rv-accent), 0 0 0 2px var(--rv-focus); }
  .chart > .ph .gb { color: var(--rv-muted); } .chart > .ph .gb:hover { background: none; color: var(--rv-text); }
  .chart > .ph .gb.on { color: var(--rv-muted); } .chart > .ph .gb .cnt { color: var(--rv-text); }
  .chart > .ph #b-ind, .chart > .ph #b-disp { padding: 0; }
  #p-chart #b-ind svg.i { display: none; }
  @media (max-width: 860px) {
    @container chartp (max-width: 459px) { #p-chart #b-ind svg.i { display: block; } }
    @container chartp (max-width: 559px) { #p-chart > .ph { gap: 8px; } #p-chart > .ph .seg.tfs { gap: 0; } }
  }
  .chart > .ph .src { color: var(--rv-dim); }
  @media (min-width: 861px) {
    #p-chart > .ph.cf4 #b-ind svg.i { display: block; }
    #p-chart > .ph.cf5 { gap: 8px; } #p-chart > .ph.cf5 .seg.tfs { gap: 0; }
    #p-chart > .ph:not(.cf1) #b-ind { margin-left: 8px; } #p-chart > .ph:not(.cf1) #b-disp { margin-left: 4px; }
  }
  .dtb { gap: 4px; } .dtb button { color: var(--rv-dim); } .dtb button.on { background: none; color: var(--rv-text); box-shadow: inset 0 0 0 1px var(--rv-line2); }
  .dtb button.held { background: none; box-shadow: inset 0 0 0 1px var(--rv-accent-line); }
  /* the order book: the price column in colour, sizes in the text colour, totals muted; the depth a faint thin band
     behind the figures; the mid price a calm hero between the sides */
  .bk-r i { top: 4px; bottom: 4px; opacity: .08; border-radius: 1px; }
  [data-theme="light"] .bk-r i { opacity: .09; }
  .bk-r span:nth-of-type(3) { color: var(--rv-muted); }
  .bk-r:hover, .bk-r.hl { background: var(--rv-bg-1); } .bk-r.hl:hover { background: var(--rv-bg-2); }
  [data-theme="light"] .bk-r:hover, [data-theme="light"] .bk-r.hl { background: var(--rv-bg-0); } [data-theme="light"] .bk-r.hl:hover { background: var(--rv-bg-3); }
  @media (min-width: 861px) {
    .bk-m { height: 44px; }
    .bk-m b { font: 600 var(--rv-fs-20)/24px var(--rv-font); letter-spacing: -.01em; }
    .bk-m.v1 b.up::after, .bk-m.v1 b.dn::after { width: 10px; height: 10px; -webkit-mask-size: 10px; mask-size: 10px; opacity: .8; }
    .bk-m span { color: var(--rv-dim); }
    .bk-m .mk { color: var(--rv-muted); }
  }
  .bkv button.on { background: none; } .bkv button.on i { opacity: .7; } .tabs .bkv button.on { background: none; }
  .bk-bs .bar { opacity: .45; }
  /* the order panel, in the bot setup's controls: the segmented control (a filled track, the chosen part a step up), the
     size as the big amount field (the panel's one large figure), quiet checkboxes and text links, a monochrome slider */
  /* (a window under 840px tall keeps the compact heights, so the order panel's figures under the buttons stay in view) */
  @media (min-width: 861px) { #form .mtop .mb { border-radius: var(--rv-r-sm); } }
  @media (min-width: 861px) and (min-height: 840px) {
    #form .seg.lg { height: 36px; padding: 4px; border-radius: var(--rv-r-sm); }
    #form .seg.lg button { height: 28px; line-height: 28px; }
  }
  @media (min-width: 861px) {
    .fld .inp.amtf input { padding: 0 8px 0 16px; font: 600 var(--rv-fs-16)/24px var(--rv-font); letter-spacing: -.01em; }
    .inp.amtf .ub { font-size: var(--fs-s); margin-right: 8px; }
  }
  @media (min-width: 861px) and (min-height: 840px) {
    .inp.amtf { height: 48px; border-radius: var(--rv-r-lg); }
    .fld .inp.amtf input { height: 46px; font: 600 var(--rv-fs-20)/28px var(--rv-font-display); }
  }
  .inp .qk button { color: var(--rv-muted); opacity: 1; } .inp .qk button:hover { color: var(--rv-text); }
  .inp .qk .bbo.on { color: var(--rv-text); }
  .amt input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--rv-text) var(--p, 0%), var(--rv-line2) var(--p, 0%)); }
  .amt input[type=range]::-webkit-slider-thumb { background: var(--rv-bg); border-color: var(--rv-text); }
  .amt input[type=range]::-moz-range-thumb { background: var(--rv-bg); border-color: var(--rv-text); }
  .dmk button.on { border-color: var(--rv-text); background: var(--rv-text); }
  .ck input { border-color: var(--rv-line2); } .ck input:hover:not(:disabled) { border-color: var(--rv-muted); }
  #form .ub.bare { background: none; color: var(--rv-muted); } #form .ub.bare:hover { color: var(--rv-text); border-color: transparent; }
  .otabs button.adv.on, .otabs button.adv.on svg.i { color: var(--rv-text); }
  #form .sd .go { border-radius: var(--rv-r-sm); }
  /* the account: its actions as quiet outlined buttons */
  .ac .acts a { background: none; box-shadow: inset 0 0 0 1px var(--rv-line2); color: var(--rv-text); }
  .ac .acts a:hover { background: var(--rv-bg-1); }
  /* positions and orders: the row actions as quiet text buttons (a hairline on hover), no side bars or filled chips; the
     side reads from the size's sign and colour */
  #tbl table .sb { background: none; color: var(--rv-text); font-weight: 500; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--rv-dur-1), color var(--rv-dur-1); }
  #tbl table .sb:hover:not(:disabled) { background: none; box-shadow: inset 0 0 0 1px var(--rv-line2); }
  #tbl table .sb.ic { color: var(--rv-muted); } #tbl table .sb.ic:hover:not(:disabled) { color: var(--rv-text); }
  #tbl table td .sbar { display: none; }
  #tbl table td .own { background: none; padding: 0; color: var(--rv-muted); } #tbl table td .own.m { color: var(--rv-text); }
  #tbl table th { color: var(--rv-dim); }
  .tabs .acts .ck { color: var(--rv-muted); }
  /* the favourites strip: only the markets the trader starred (the market picker lists the rest), quiet */
  .fbar { gap: 4px; } .fbar .fb-h svg.i { color: var(--rv-muted); }
  .fbar button { color: var(--rv-dim); } .fbar button b { color: var(--rv-muted); } .fbar button.on b { color: var(--rv-text); }
  .fbar button:hover { background: none; } .fbar button:hover b { color: var(--rv-text); }

  /* the status line under the panels: the feed, the network, the market search and the shortcuts */
  @media (min-width: 861px) { html.tm-bot:not(.tm-flow) { --gh: calc(var(--rv-header-h) + var(--rv-lb-h, 0px) + 24px); } }   /* the Bot Terminal leaves the status line its 24px */
  .tsb { display: none; }
  @media (min-width: 861px) {
    html:not(.tm-flow) .tsb { display: flex; justify-content: space-between; align-items: center; height: 24px; padding: 0 12px; box-sizing: border-box;
      font: 400 9px/24px var(--rv-font-mono-fig); color: var(--rv-dim); white-space: nowrap; background: var(--rv-bg); }
    .tsb > span { display: flex; align-items: center; gap: 16px; }
    .tsb > span > span:first-child { gap: 6px; }
    .tsb .dot { width: 5px; height: 5px; }
    .tsb button { border: 0; background: none; padding: 0; font: inherit; color: inherit; }
    .tsb button:hover { color: var(--rv-text); }
    .tsb b { font-weight: 400; color: var(--rv-muted); }
  }
  /* ==== the workspace design (owner, 2026-10-06: "change everything to the new workspace, the trading screen too"):
     the prototype's #/terminal (docs/design/workspace-source/dist: terminalPage, orderBook, paperOrders) on our panels.
     The page heading; then two columns, as its terminal-grid (the right one 295px, 265 under 980px): the chart panel
     (the market header over the chart) and the positions panel | the order ticket, the order book and the account. The
     page scrolls, as the prototype's. Colours and type are the workspace's tokens (radar/web/ws.css .ws) given to the
     Terminal's own names, so every part the scripts draw (fields, menus, sheets, the book, the chart) takes them.
     html:not(.tm-flow) #tm-ws = html:not(.tm-flow) #tm-ws: the guided bot setup (/bots/new, tm-flow) reuses this page and keeps its own look. ==== */
  html:not(.tm-flow) #tm-ws { --rv-bg: var(--bg); --rv-panel: var(--panel); --rv-panel2: var(--panel2); --rv-sunk: #14171b; --rv-bg-0: var(--bg); --rv-bg-1: #14171b; --rv-bg-2: #1c1e21;
      --rv-bg-3: #24262a; --rv-bg-4: #34363b; --rv-btn2: #24262a; --rv-btn2-hover: #34363b; --rv-text: var(--text); --rv-muted: var(--muted); --rv-dim: #858b94;
      --rv-faint: #5f656c; --rv-ctl: #6b7178; --rv-line: var(--border); --rv-line2: #3a3d42; --rv-card-line: var(--border); --rv-grid: rgba(52, 59, 69, .55);
      --rv-accent: var(--accent); --rv-accent-ink: #232529; --rv-accent-soft: rgba(226, 229, 233, .08); --rv-accent-line: rgba(226, 229, 233, .4); --rv-focus: var(--accent);
      --rv-primary: var(--accent); --rv-primary-hover: #fff; --rv-primary-ink: #232529; --rv-pos: var(--green); --rv-neg: var(--red); --rv-up: var(--green);
      --rv-down: var(--red); --rv-pos-soft: rgba(157, 180, 165, .12); --rv-neg-soft: rgba(201, 148, 150, .12); --rv-warn: var(--amber);
      --rv-font: var(--font); --rv-font-num: var(--font); --rv-font-mono-fig: var(--font); --rv-font-display: 'Manrope', var(--font);
      --rv-r-xs: 4px; --rv-r-sm: 6px; --rv-r-lg: 9px; --rv-pop: 0 18px 50px #0007, 0 0 0 1px var(--border);
      --tm-cup: #a3b8ac; --tm-cdn: #b28589; --pad: 18px; --dtb-w: 36px; --fs-xs: 10px; --fs-s: 11px; --fs-m: 13px; --fs-l: 15px;
      min-height: 100vh; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws { --rv-sunk: #f6f7f8; --rv-bg-1: #f6f7f8; --rv-bg-2: #fff; --rv-bg-3: #eceef0; --rv-bg-4: #e2e5e8; --rv-btn2: #f0f1f3; --rv-btn2-hover: #e6e8eb;
      --rv-dim: #6b7178; --rv-faint: #a3a8ae; --rv-ctl: #8a9097; --rv-line2: #d3d7dc; --rv-grid: rgba(20, 25, 31, .07); --rv-accent-ink: #fff; --rv-accent-soft: rgba(29, 32, 36, .06);
      --rv-accent-line: rgba(29, 32, 36, .35); --rv-primary-hover: #000; --rv-primary-ink: #fff; --rv-pos-soft: rgba(47, 122, 84, .1); --rv-neg-soft: rgba(178, 72, 78, .08);
      --rv-pop: 0 12px 32px rgba(30, 35, 41, .14), 0 0 0 1px var(--border); --tm-cup: #2f7a54; --tm-cdn: #b2484e; }
  /* the site's older element rules (radar/theme.py: button heights, right-aligned cells, the figures font) stay out */
  html:not(.tm-flow) #tm-ws button { height: auto; } html:not(.tm-flow) #tm-ws p { line-height: inherit; } html:not(.tm-flow) #tm-ws :is(table, .num) { font-family: inherit; }
  html:not(.tm-flow) #tm-ws #tm-head .pill .dot { margin: 0; }
  html:not(.tm-flow) html:not(.tm-flow) #tm-ws .tm-head { flex-wrap: nowrap; }

  /* the two columns */
  html:not(.tm-flow) #tm-ws #term.term { display: grid; grid-template-columns: minmax(0, 1fr) 295px; grid-template-rows: none; gap: 18px; align-items: start; height: auto; padding: 0;
      background: none; border: 0; }
  html:not(.tm-flow) #tm-ws .tm-l, html:not(.tm-flow) #tm-ws .tm-r { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  html:not(.tm-flow) #tm-ws #term > .strat, html:not(.tm-flow) #tm-ws #term .fsw, html:not(.tm-flow) #tm-ws .cbar, html:not(.tm-flow) #tm-ws .fbar, html:not(.tm-flow) #tm-ws #f-tabs, html:not(.tm-flow) #tm-ws #b-chart, html:not(.tm-flow) #tm-ws .mpx { display: none !important; }
  html:not(.tm-flow) #tm-ws #term .p { position: relative; grid-area: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; overflow: hidden;
      min-height: 0; height: auto; box-shadow: none; }
  html:not(.tm-flow) #tm-ws #term .tm-cp { display: flex; flex-direction: column; min-width: 0; }
  html:not(.tm-flow) #tm-ws #term .tm-cp > .p { border: 0; border-radius: 0; background: none; }
  html.tm-1v html:not(.tm-flow) #tm-ws #vsel, html.tm-1v html:not(.tm-flow) #tm-ws #fm-venue { display: none !important; }

  /* the market header (the prototype's terminal-header): the coin's mark and the pair menu, the price over its 24h change,
     then label-over-value figures 24px apart */
  html:not(.tm-flow) #tm-ws #term .top.p { display: flex; flex-direction: row; align-items: center; gap: 24px; height: auto; min-height: 84px; padding: 18px; margin: 0;
      border-bottom: 1px solid var(--border); overflow: visible; position: relative; z-index: 3; grid-template-columns: none; grid-template-rows: none; }
  html:not(.tm-flow) #tm-ws #term .top.p > * { grid-row: auto; grid-column: auto; }
  html:not(.tm-flow) #tm-ws #mkt { height: auto; min-width: 0; margin: 0; padding: 0; gap: 10px; border: 0; background: none; font: 600 13px/20px var(--font); letter-spacing: 0; color: var(--text); }
  html:not(.tm-flow) #tm-ws #mkt:hover #mkt-c { color: var(--text); }
  html:not(.tm-flow) #tm-ws #mkt-i { display: flex; margin: 0 6px 0 0; } html:not(.tm-flow) #tm-ws #mkt-i .asset-icon { width: 29px; height: 29px; font-size: 15px; }
  html:not(.tm-flow) #tm-ws #mkt .q { font-weight: 600; color: inherit; margin: 0; font-size: inherit; }
  html:not(.tm-flow) #tm-ws #mkt .tag { display: inline; background: none; padding: 0; font: 400 10px/16px var(--font); color: var(--muted); }
  html:not(.tm-flow) #tm-ws #mkt > svg.i { display: block; width: 16px; height: 16px; color: var(--text); stroke-width: 2.2; margin-left: 4px; }
  html:not(.tm-flow) #tm-ws #vsel { height: 28px; padding: 0 8px; gap: 6px; border: 1px solid var(--border); border-radius: 6px; background: none; font: 400 11px/16px var(--font); color: var(--soft); }
  html:not(.tm-flow) #tm-ws #fav { order: 6; width: 28px; height: 28px; margin: 0; border-radius: 6px; background: none; color: var(--muted); }
  html:not(.tm-flow) #tm-ws #fav svg.i { width: 15px; height: 15px; } html:not(.tm-flow) #tm-ws #fav.on { color: var(--text); }
  html:not(.tm-flow) #tm-ws #term .stats { display: flex; flex-wrap: nowrap; align-items: center; gap: 24px; height: auto; min-height: 0; min-width: 0; padding: 0; margin: 0;
      box-shadow: none; overflow: hidden; flex: 1 1 auto; -webkit-mask-image: none; mask-image: none; }
  html:not(.tm-flow) #tm-ws #term .top.p > .sp { flex: 0 0 0; min-width: 0; }
  html:not(.tm-flow) #tm-ws #term .top.p { flex-wrap: wrap; row-gap: 12px; } html:not(.tm-flow) #tm-ws #term .stats { flex: 1 1 200px; } html:not(.tm-flow) #tm-ws #term .stat.px { flex: none; }
  html:not(.tm-flow) #tm-ws #term .stat { display: flex; flex-direction: column; gap: 1px; }
  html:not(.tm-flow) #tm-ws #term .stat .k { font: 400 11px/16px var(--font); color: var(--muted); grid-row: auto; white-space: nowrap; }
  html:not(.tm-flow) #tm-ws #term .stat .v { font: 400 11px/16px var(--font); color: var(--text); letter-spacing: 0; grid-row: auto; white-space: nowrap; }
  html:not(.tm-flow) #tm-ws #term .stat .v .dim { color: var(--muted); }
  html:not(.tm-flow) #tm-ws #term .stat .v .up, html:not(.tm-flow) #tm-ws #term .stat .k.up { color: var(--green); } html:not(.tm-flow) #tm-ws #term .stat .v .dn, html:not(.tm-flow) #tm-ws #term .stat .k.dn { color: var(--red); }
  html:not(.tm-flow) #tm-ws #term .stat.px .v { order: 0; font: 400 18px/27px var(--font); letter-spacing: 0; min-width: 0; margin: 0; color: var(--text); }
  html:not(.tm-flow) #tm-ws #term .stat.px .k { order: 1; font: 400 11px/16px var(--font); margin: 0; }
  html:not(.tm-flow) #tm-ws #term .stats.wrap { height: auto; padding: 0; }
  html:not(.tm-flow) #tm-ws .st-more { margin-left: -12px; }
  html:not(.tm-flow) #tm-ws #b-keys { display: inline-flex; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 12px; }
  @media (max-width: 1499px) { html:not(.tm-flow) #tm-ws #b-keys { display: none; } }

  /* the chart: its bar as the prototype's panel-head (12px 18px, 11px words; the chosen timeframe in a small box), the
     chart 354px under it */
  html:not(.tm-flow) #tm-ws #term #p-chart.chart { display: flex; flex-direction: column; height: 400px; flex: none; }
  html:not(.tm-flow) #tm-ws #p-chart > .ph { height: auto; min-height: 46px; padding: 8px 18px; gap: 6px 14px; flex-wrap: nowrap; border-bottom: 0; font-size: 11px; }
  @media (max-width: 1180px) { html:not(.tm-flow) #tm-ws #p-chart > .ph { column-gap: 10px; } }
  html:not(.tm-flow) #tm-ws #p-chart > .ph .seg.tfs { gap: 6px; background: none; padding: 0; }
  html:not(.tm-flow) #tm-ws #term #p-chart > .ph .seg.tfs button { height: 22px; padding: 0 6px; font: 400 11px/20px var(--font); color: var(--muted); border: 1px solid transparent; border-radius: 5px; background: none; box-shadow: none; }
  html:not(.tm-flow) #tm-ws #term #p-chart > .ph .seg.tfs button.on { color: var(--text); border-color: var(--border); font-weight: 500; }
  html:not(.tm-flow) #tm-ws #p-chart > .ph :is(.gb, .hbtn, .cview button, .src) { font-size: 11px; color: var(--muted); }
  html:not(.tm-flow) #tm-ws #p-chart > .ph .cview { box-shadow: none; padding-left: 0; }
  html:not(.tm-flow) #tm-ws #p-chart > .ph .cview button.on { color: var(--text); font-weight: 500; }
  html:not(.tm-flow) #tm-ws #p-chart > .pb { margin: 0 15px 15px 0; }
  html:not(.tm-flow) #tm-ws .dtb { width: var(--dtb-w); border-right: 0; gap: 4px; padding: 4px 0; }
  html:not(.tm-flow) #tm-ws .dtb button { width: 28px; height: 28px; color: var(--muted); } html:not(.tm-flow) #tm-ws .dtb button.on { color: var(--text); background: var(--panel2); }

  /* positions, orders, history: the prototype's tab row and table; an empty list as its empty state */
  html:not(.tm-flow) #tm-ws #term #p-bottom { min-height: 285px; }
  html:not(.tm-flow) #tm-ws #term #p-bottom > .ph.tabs { height: auto; gap: 24px; padding: 0 20px; border-bottom: 1px solid var(--border); }
  html:not(.tm-flow) #tm-ws #term #tabs button, html:not(.tm-flow) #tm-ws #term #tabs .tsc > button { height: 51px; padding: 0; font: 400 11px/16px var(--font); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
  html:not(.tm-flow) #tm-ws #term #tabs button.on, html:not(.tm-flow) #tm-ws #term #tabs .tsc > button.on, html:not(.tm-flow) #tm-ws .inked > button.on { color: var(--accent); border-bottom-color: var(--accent); }
  html:not(.tm-flow) #tm-ws #term #tabs .n { margin-left: 4px; font-size: inherit; color: inherit; }
  html:not(.tm-flow) #tm-ws .ink { display: none; }
  html:not(.tm-flow) #tm-ws #term .tabs .acts { gap: 16px; font-size: 11px; } html:not(.tm-flow) #tm-ws #term .tabs .acts .ck { font-size: 11px; color: var(--muted); }
  html:not(.tm-flow) #tm-ws #term #p-bottom > #tbl { flex: none; min-height: 234px; position: relative; }
  html:not(.tm-flow) #tm-ws #tbl .tw { position: static; overflow: auto; max-height: 520px; }
  html:not(.tm-flow) #tm-ws #tbl table { font-size: 11px; }
  html:not(.tm-flow) #tm-ws #tbl th { position: sticky; top: 0; height: auto; padding: 12px 18px; font-size: 10px; font-weight: 450; color: var(--muted); background: #171a1e; line-height: 1.5; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #tbl th { background: var(--panel2); }
  html:not(.tm-flow) #tm-ws #tbl td { height: auto; padding: 16px 18px; border-bottom: 1px solid #2d3239; font-size: 11px; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #tbl td { border-bottom-color: var(--border); }
  html:not(.tm-flow) #tm-ws #tbl tr:last-child td { border-bottom: 0; }
  html:not(.tm-flow) #tm-ws #tbl td .sub { display: block; margin: 3px 0 0; font-size: 10px; color: var(--muted); }
  html:not(.tm-flow) #tm-ws #tbl .sb, html:not(.tm-flow) #tm-ws #term .pc-a .sb { height: auto; padding: 7px 11px; border: 1px solid var(--border); border-radius: 7px; background: transparent; font-size: 11px; font-weight: 550; color: var(--text); }
  html:not(.tm-flow) #tm-ws #tbl .sb:hover { background: #34363b; }
  html:not(.tm-flow) #tm-ws #tbl > .empty, html:not(.tm-flow) #tm-ws #tbl .empty { position: static; inset: auto; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 58px 20px; color: var(--muted); font-size: 12px; text-align: center; }
  html:not(.tm-flow) #tm-ws #tbl .empty > svg.i { display: block; width: 35px; height: 35px; margin: 0 auto 15px; color: var(--accent); stroke-width: 1.65; }
  html:not(.tm-flow) #tm-ws #tbl .empty b { display: block; margin-bottom: 7px; font: 650 15px/1.5 'Manrope', var(--font); color: var(--text); }
  html:not(.tm-flow) #tm-ws #tbl .empty .sb { margin-top: 19px; }
  html:not(.tm-flow) #tm-ws #tbl .hf { padding: 12px 18px 0; }

  /* the order ticket (the prototype's order-ticket: 20px padding, its title, the side as a two-part control, fields with
     their label above, the cost lines, one primary button) */
  html:not(.tm-flow) #tm-ws #term #p-form .fm, html:not(.tm-flow) #tm-ws #term #form.fm { display: grid; gap: 18px; padding: 20px; overflow: visible; scrollbar-gutter: auto; align-content: start; -webkit-mask-image: none; mask-image: none; }
  html:not(.tm-flow) #tm-ws #form.fm > * { margin: 0; }
  html:not(.tm-flow) #tm-ws #form .tk-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
  html:not(.tm-flow) #tm-ws #form .tk-h h2 { font-size: 16px; white-space: nowrap; }
  html:not(.tm-flow) #tm-ws #form .mtop { gap: 2px; height: auto; margin: 0; } 
  html:not(.tm-flow) #tm-ws #term #form .mtop .mb { flex: none; height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: none; font: 500 11px/22px var(--font); color: var(--soft); }
  html:not(.tm-flow) #tm-ws #term #form .mtop .mb:hover:not(:disabled) { background: var(--panel2); color: var(--text); }
  html:not(.tm-flow) #tm-ws #form .mtop .xb { width: 24px; height: 24px; margin: 0; color: var(--muted); }
  html:not(.tm-flow) #tm-ws #form .tk-h { height: 24px; } html:not(.tm-flow) #tm-ws #form .tk-h h2 { line-height: 24px; }
  html:not(.tm-flow) #tm-ws #form .tk-side { display: flex; width: 100%; height: auto; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 6px; background: #141619; margin: 1px 0; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form .tk-side { background: var(--panel2); }
  html:not(.tm-flow) #tm-ws #form .tk-side button { flex: 1; height: auto; padding: 8px; border-radius: 3px; font: 400 10px/15px var(--font); color: var(--muted); background: none; }
  html:not(.tm-flow) #tm-ws #form .tk-side button.active.long { background: #334138; color: #c2d2c7; } html:not(.tm-flow) #tm-ws #form .tk-side button.active.short { background: #423337; color: #d5b8bc; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form .tk-side button.active.long { background: rgba(47, 122, 84, .14); color: #1f5a3c; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form .tk-side button.active.short { background: rgba(178, 72, 78, .12); color: #8c3036; }
  html:not(.tm-flow) #tm-ws #form .tk-g2, html:not(.tm-flow) #tm-ws #form .g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  html:not(.tm-flow) #tm-ws #form .fld { display: grid; gap: 7px; min-width: 0; }
  html:not(.tm-flow) #tm-ws #term #form .fld .fl, html:not(.tm-flow) #tm-ws #form .tk-tpl .fl { display: flex; align-items: center; gap: 6px; font: 400 11px/16px var(--font); color: var(--soft); }
  html:not(.tm-flow) #tm-ws #form .fl .ib { width: 14px; height: 14px; color: var(--muted); cursor: pointer; }
  html:not(.tm-flow) #tm-ws #form .tk-sel { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 44px; padding: 0 12px 0 16px; min-width: 0;
      border: 1px solid var(--border); border-radius: 6px; background: #14171b; color: var(--text); font: 400 13px/20px var(--font); text-align: left; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form .tk-sel { background: var(--panel); }
  html:not(.tm-flow) #tm-ws #form .tk-sel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:not(.tm-flow) #tm-ws #form .tk-sel svg.i { width: 16px; height: 16px; color: var(--text); stroke-width: 2; flex: none; }
  html:not(.tm-flow) #tm-ws #form .tk-sel:hover, html:not(.tm-flow) #tm-ws #form .tk-sel:focus-visible { border-color: #acb4c0; }
  html:not(.tm-flow) #tm-ws #term #form .inp, html:not(.tm-flow) #tm-ws #term #form .fld .inp, html:not(.tm-flow) #tm-ws #term #form .inp.amtf { height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: #14171b; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #term #form .inp { background: var(--panel); }
  html:not(.tm-flow) #tm-ws #term #form .inp:focus-within { border-color: #acb4c0; }
  html:not(.tm-flow) #tm-ws #term #form .inp.bad, html:not(.tm-flow) #tm-ws #term #form .inp.bad:focus-within { border-color: var(--red); }
  html:not(.tm-flow) #tm-ws #term #form .inp input, html:not(.tm-flow) #tm-ws #term #form .fld .inp input, html:not(.tm-flow) #tm-ws #term #form .fld .inp.amtf input { height: 42px; padding: 0 8px 0 12px; border: 0 !important; background: none !important;
      font: 400 13px/20px var(--font); letter-spacing: 0; text-align: left; color: var(--text); }
  html:not(.tm-flow) #tm-ws #term #form .inp input::placeholder { color: var(--muted); }
  html:not(.tm-flow) #tm-ws #term #form .inp input:disabled { opacity: .5; }
  html:not(.tm-flow) #tm-ws #form .inp .u, html:not(.tm-flow) #tm-ws #form .inp .pre, html:not(.tm-flow) #tm-ws #form .inp .qk button { font-size: 11px; color: var(--muted); }
  html:not(.tm-flow) #tm-ws #form .inp .ub { height: 26px; margin-right: 8px; padding: 0 6px 0 8px; border: 1px solid var(--border); border-radius: 5px; background: none; font-size: 11px; color: var(--soft); }
  html:not(.tm-flow) #tm-ws #form .inp .ub svg.i { width: 12px; height: 12px; }
  html:not(.tm-flow) #tm-ws #form .inp .qk { display: flex; gap: 8px; padding-right: 12px; }
  html:not(.tm-flow) #tm-ws #form .inp .qk button { height: auto; padding: 0; background: none; } html:not(.tm-flow) #tm-ws #form .inp .qk button:hover, html:not(.tm-flow) #tm-ws #form .inp .qk button.on { color: var(--text); }
  html:not(.tm-flow) #tm-ws #form .ub.bare { height: auto; padding: 0; margin: 0; border: 0; background: none; font-size: 11px; color: var(--soft); }
  html:not(.tm-flow) #tm-ws #form .ub.bare svg.i { width: 11px; height: 11px; }
  html:not(.tm-flow) #tm-ws #form .al { display: flex; justify-content: space-between; gap: 10px; font: 400 11px/16px var(--font); color: var(--muted); }
  html:not(.tm-flow) #tm-ws #form .al b { font: 500 11px/16px var(--font); color: var(--text); }
  html:not(.tm-flow) #tm-ws #form .why, html:not(.tm-flow) #tm-ws #form .hint { font-size: 11px; line-height: 1.6; }
  html:not(.tm-flow) #tm-ws #form .hint { padding: 12px; border: 1px solid #414b57; border-radius: 6px; background: #242c34; color: #bbc9d6; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form .hint { border-color: var(--border); background: var(--panel2); color: var(--soft); }
  /* the size slider (its five stops under it) and the leverage slider: the prototype's range, the accent's thumb */
  html:not(.tm-flow) #tm-ws #form .amt { height: 32px; margin: -6px 0 0; }
  html:not(.tm-flow) #tm-ws #form .amt input[type=range] { top: 2px; }
  html:not(.tm-flow) #tm-ws #form input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--p, 0%), #3a3f46 var(--p, 0%)); }
  html:not(.tm-flow) #tm-ws #form input[type=range]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; transform: none; background: var(--accent); border: 0; box-shadow: 0 0 0 3px var(--panel); }
  html:not(.tm-flow) #tm-ws #form input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: #3a3f46; }
  html:not(.tm-flow) #tm-ws #form input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--accent); }
  html:not(.tm-flow) #tm-ws #form input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 0; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--accent) var(--p, 0%), #d3d7dc var(--p, 0%)); }
  html:not(.tm-flow) #tm-ws #form .dmk { display: none; }
  html:not(.tm-flow) #tm-ws #form .pctl { top: 18px; left: 0; right: 0; display: flex; justify-content: space-between; }
  html:not(.tm-flow) #tm-ws #form .pctl button { height: 14px; padding: 0; font: 400 10px/14px var(--font); color: var(--muted); background: none; }
  html:not(.tm-flow) #tm-ws #form .pctl button.on, html:not(.tm-flow) #tm-ws #form .pctl button:hover { color: var(--text); }
  html:not(.tm-flow) #tm-ws #form .tk-lev .fl { justify-content: space-between; }
  html:not(.tm-flow) #tm-ws #form .tk-lev .lv { height: auto; padding: 0; background: none; font: 400 11px/16px var(--font); color: var(--text); }
  html:not(.tm-flow) #tm-ws #form .tk-lev .lv:hover { text-decoration: underline; }
  html:not(.tm-flow) #tm-ws #form .tk-lev input[type=range] { height: 16px; margin: 2px 0 0; }
  html:not(.tm-flow) #tm-ws #form .tk-tpsl { display: grid; gap: 10px; } html:not(.tm-flow) #tm-ws #form .tk-tpsl.off { opacity: .55; }
  html:not(.tm-flow) #tm-ws #form .tk-tpl { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  html:not(.tm-flow) #tm-ws #form .tk-tpl .tpb { display: flex; gap: 12px; }
  html:not(.tm-flow) #tm-ws #form .opts, html:not(.tm-flow) #tm-ws #form > .ck { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 0; font: 400 11px/16px var(--font); color: var(--soft); }
  html:not(.tm-flow) #tm-ws #form .ck { font-size: 11px; color: var(--soft); } html:not(.tm-flow) #tm-ws #form .ck input { width: 15px; height: 15px; accent-color: var(--accent); }
  html:not(.tm-flow) #tm-ws #form .tifx { font-size: 10px; color: var(--muted); margin: 0; }
  /* the cost lines and the one primary button */
  html:not(.tm-flow) #tm-ws #form .tk-sum { display: grid; gap: 0; }
  html:not(.tm-flow) #tm-ws #form .tk-sum .summary-line { padding: 7px 0; font-size: 11px; }
  html:not(.tm-flow) #tm-ws #form .tk-sum .summary-line span:last-child { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
  html:not(.tm-flow) #tm-ws #form .tk-sum .summary-line.total { margin-top: 8px; padding-top: 14px; font-weight: 600; }
  html:not(.tm-flow) #tm-ws #form .tk-sum .summary-line.total span:first-child { color: var(--text); }
  html:not(.tm-flow) #tm-ws #form .tk-sum .summary-line.total b { font-weight: 600; }
  html:not(.tm-flow) #tm-ws #form .tk-sum .form-help { margin-top: 6px; }
  html:not(.tm-flow) #tm-ws #form .fee2 { margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border); }
  html:not(.tm-flow) #tm-ws #form .ffd { font-size: 10px; color: var(--muted); }
  html:not(.tm-flow) #tm-ws #form .go, html:not(.tm-flow) #tm-ws #form .tk-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: auto; margin: 0; padding: 10px 15px;
      border: 1px solid var(--accent); border-radius: 7px; background: var(--accent); color: #232529; font: 700 12px/18px var(--font); filter: none; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form .go, html[data-theme="light"]:not(.tm-flow) #tm-ws #form .tk-go { color: #fff; }
  html:not(.tm-flow) #tm-ws #form .go:hover:not(:disabled), html:not(.tm-flow) #tm-ws #form .tk-go:hover { background: #fff; filter: none; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form .go:hover:not(:disabled) { background: #000; }
  html:not(.tm-flow) #tm-ws #form .go svg.i { width: 16px; height: 16px; stroke-width: 1.8; }
  html:not(.tm-flow) #tm-ws #form .go.off { opacity: .55; }
  html:not(.tm-flow) #tm-ws #form .tk-note { margin: -7px 0 0; text-align: center; }
  html:not(.tm-flow) #tm-ws #form .ferr { margin: -8px 0 0; font-size: 11px; text-align: center; }
  html:not(.tm-flow) #tm-ws #form .vc { margin: 0; }
  html:not(.tm-flow) #tm-ws #form .fsk, html:not(.tm-flow) #tm-ws #form .skl { display: grid; gap: 18px; }
  /* the short ticket (owner, 2026-10-06): Open | Close, margin mode and leverage, Limit | Market | More, the amount, TP/SL on
     demand, two side buttons with the margin under each, one fee line. The same components, 16px apart (a 4px step). */
  html:not(.tm-flow) #tm-ws #term #p-form #form.fm { gap: 16px; } html:not(.tm-flow) #tm-ws #form .amt { margin-top: -4px; } html:not(.tm-flow) #tm-ws #form .tk-oc { margin: 0; }
  html:not(.tm-flow) #tm-ws #form .tk-oc button.active { background: #353a42; color: #e6ede7; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form .tk-oc button.active { background: var(--panel); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
  html:not(.tm-flow) #tm-ws #form .tk-ml .tk-sel { height: 36px; padding: 0 10px 0 12px; font-size: 12px; }
  html:not(.tm-flow) #tm-ws #form .tk-ty { display: flex; align-items: center; gap: 4px; min-width: 0; }
  html:not(.tm-flow) #tm-ws #form .tk-ty > button[data-t], html:not(.tm-flow) #tm-ws #form .tk-ty > #f-type-dd { display: inline-flex; align-items: center; gap: 2px; min-width: 0; height: 24px; padding: 0 6px;
      border: 1px solid transparent; border-radius: 5px; background: none; font: 400 11px/22px var(--font); color: var(--muted); white-space: nowrap; }
  html:not(.tm-flow) #tm-ws #form .tk-ty > button[data-t]:hover, html:not(.tm-flow) #tm-ws #form .tk-ty > #f-type-dd:hover { color: var(--text); }
  html:not(.tm-flow) #tm-ws #form .tk-ty > button.on, html:not(.tm-flow) #tm-ws #form .tk-ty > #f-type-dd.on { color: var(--text); border-color: var(--border); font-weight: 500; }
  html:not(.tm-flow) #tm-ws #form .tk-ty > #f-type-dd { flex: 0 1 auto; max-width: 150px; } html:not(.tm-flow) #tm-ws #form .tk-ty > button[data-t] { flex: none; }
  html:not(.tm-flow) #tm-ws #form .tk-ty > #f-type-dd span { overflow: hidden; text-overflow: ellipsis; padding-right: 1px; }
  html:not(.tm-flow) #tm-ws #form .tk-ty > #f-type-dd svg.i { width: 12px; height: 12px; flex: none; }
  html:not(.tm-flow) #tm-ws #form .tk-ty > .sp { flex: 1 1 0; }
  html:not(.tm-flow) #tm-ws #form .tk-ty > .ib { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; background: none; color: var(--muted); flex: none; }
  html:not(.tm-flow) #tm-ws #form .tk-ty > .ib svg.i { width: 14px; height: 14px; }
  html:not(.tm-flow) #tm-ws #form .tk-ty > .xb { width: 24px; height: 24px; margin: 0; color: var(--muted); flex: none; }
  html:not(.tm-flow) #tm-ws #form .tk-2s { display: grid; gap: 4px; }
  html:not(.tm-flow) #tm-ws #form .tk-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  html:not(.tm-flow) #tm-ws #form .tk-2 .al { gap: 6px; min-width: 0; font-size: 10px; } html:not(.tm-flow) #tm-ws #form .tk-2 .al b { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  html:not(.tm-flow) #tm-ws #form .tk-opts .tpb { display: flex; align-items: center; gap: 12px; min-width: 0; }
  html:not(.tm-flow) #tm-ws #form .tk-opts .ck { gap: 8px; align-items: center; }
  html:not(.tm-flow) #tm-ws #form .tk-gos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  html:not(.tm-flow) #tm-ws #form .tk-gos .tk-go { min-width: 0; padding: 10px 8px; overflow: hidden; text-overflow: ellipsis; }
  html:not(.tm-flow) #tm-ws #form .tk-go.long { background: #334138; border-color: #334138; color: #c2d2c7; } html:not(.tm-flow) #tm-ws #form .tk-go.short { background: #423337; border-color: #423337; color: #d5b8bc; }
  html:not(.tm-flow) #tm-ws #form .tk-go.long:hover, html:not(.tm-flow) #tm-ws #form .tk-go.short:hover { background-image: linear-gradient(#ffffff0d, #ffffff0d); }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form .tk-go.long { background: rgba(47, 122, 84, .14); border-color: transparent; color: #1f5a3c; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form .tk-go.short { background: rgba(178, 72, 78, .12); border-color: transparent; color: #8c3036; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #form .tk-go.long:hover, html[data-theme="light"]:not(.tm-flow) #tm-ws #form .tk-go.short:hover { background-image: linear-gradient(#0000000a, #0000000a); }
  html:not(.tm-flow) #tm-ws #form .tk-go.off { opacity: .55; } html:not(.tm-flow) #tm-ws #form .tk-gos + .ferr { margin: -6px 0 0; }
  html:not(.tm-flow) #tm-ws #form .tk-fee { padding: 10px 0 0; border-top: 1px solid var(--border); }
  html:not(.tm-flow) #tm-ws #form .tk-fee .al { gap: 6px; min-width: 0; font-size: 10px; } html:not(.tm-flow) #tm-ws #form .tk-fee .al > span { flex: none; }
  html:not(.tm-flow) #tm-ws #form .tk-fee .al b { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-align: right; }
  /* the market header: Hyperliquid as a plain label (the only exchange), New bot on the Backtest lab as a quiet button at its end */
  html:not(.tm-flow) #tm-ws #vsel.vst { cursor: default; border-color: transparent; padding-left: 0; }
  html:not(.tm-flow) #tm-ws #term .top.p > .tm-hact { order: 5; flex: none; gap: 8px; margin-left: auto; } html:not(.tm-flow) #tm-ws #term .top.p > .tm-hact:empty { display: none; }
  html:not(.tm-flow) #tm-ws #tm-hact #tb-new.primary { padding: 7px 11px; font: 550 11px/16px var(--font); background: #24262a; border-color: var(--border); color: var(--text); }
  html:not(.tm-flow) #tm-ws #tm-hact #tb-new.primary:hover { background: #34363b; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws #tm-hact #tb-new.primary { background: #fff; } html[data-theme="light"]:not(.tm-flow) #tm-ws #tm-hact #tb-new.primary:hover { background: #f0f1f3; }
  html:not(.tm-flow) #tm-ws #tm-hact #tb-new.primary .icon { width: 14px; height: 14px; }

  /* the order book (the prototype's orderbook: Price / Size / Total, asks over the mark, bids under it, depth bars) */
  html:not(.tm-flow) #tm-ws #term #p-book > .ph { height: auto; min-height: 63px; padding: 0 20px; gap: 18px; border-bottom: 0; flex-wrap: nowrap; background: none; }
  html:not(.tm-flow) #tm-ws #term #bk-tabs > button[data-b] { height: 63px; padding: 0; font: 650 14px/20px 'Manrope', var(--font); letter-spacing: -.3px; color: var(--muted); border-bottom: 0; margin: 0; }
  html:not(.tm-flow) #tm-ws #term #bk-tabs > button[data-b].on { color: var(--text); }
  html:not(.tm-flow) #tm-ws #term #bk-tabs > button[data-b] + button[data-b] { margin-left: 0; }
  html:not(.tm-flow) #tm-ws #term #bk-tabs .bk-tools { margin-left: auto; gap: 8px; }
  html:not(.tm-flow) #tm-ws #term #bk-tabs .bk-tools .gb { font-size: 11px; color: var(--muted); }
  html:not(.tm-flow) #tm-ws #term #p-book > .pb { flex: none; height: 420px; }
  html:not(.tm-flow) #tm-ws #book .bk-h { height: auto; padding: 5px 18px; font: 450 10px/15px var(--font); color: var(--muted); }
  html:not(.tm-flow) #tm-ws #book .bk-h span { text-align: left !important; }
  html:not(.tm-flow) #tm-ws #book .bk-h, html:not(.tm-flow) #tm-ws #trades .bk-h { position: sticky; top: 0; z-index: 2; background: var(--panel); }
  /* a phone: the chart bar's and the book's small buttons take a 32px touch area (an invisible margin; the look stays) */
  @media (max-width: 860px) { #tm-ws #p-chart .ph :is(#tf > button, #b-ind, #b-disp, #b-cmore, #b-alert), #tm-ws :is(#bk-view button, #bk-grp, #bk-grp-m) { position: relative; }
    #tm-ws #p-chart .ph :is(#tf > button, #b-ind, #b-disp, #b-cmore, #b-alert)::after, #tm-ws :is(#bk-view button, #bk-grp, #bk-grp-m)::after {
      content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 32px); height: max(100%, 32px); transform: translate(-50%, -50%); } }
  html:not(.tm-flow) #tm-ws #book .bk-r { height: 25px; padding: 0 18px; grid-template-columns: 1.1fr 1fr .9fr; font: 400 10px/25px var(--font); color: var(--text); letter-spacing: 0; }
  html:not(.tm-flow) #tm-ws #book .bk-r span { text-align: left !important; }
  html:not(.tm-flow) #tm-ws #book .bk-r span:nth-of-type(3) { color: var(--text); }
  html:not(.tm-flow) #tm-ws #book .bk-r i { top: 0; bottom: 0; opacity: 1; border-radius: 0; }
  html:not(.tm-flow) #tm-ws #book .bk-r.a i { background: rgba(117, 59, 56, .13) !important; } html:not(.tm-flow) #tm-ws #book .bk-r.b i { background: rgba(73, 118, 83, .13) !important; }
  html:not(.tm-flow) #tm-ws #book .bk-r.a span:first-of-type { color: var(--red); } html:not(.tm-flow) #tm-ws #book .bk-r.b span:first-of-type { color: var(--green); }
  html:not(.tm-flow) #tm-ws #book .bk-m { height: auto; padding: 11px 18px; gap: 6px; border: 0; justify-content: flex-start; align-items: baseline; }
  html:not(.tm-flow) #tm-ws #book .bk-m b { font: 400 17px/25px var(--font); letter-spacing: 0; color: var(--green); }
  html:not(.tm-flow) #tm-ws #book .bk-m span { font-size: 11px; color: var(--muted); }
  html:not(.tm-flow) #tm-ws #book .bk-bs { padding: 10px 18px; height: auto; border-top: 0; font-size: 11px; color: var(--muted); }
  html:not(.tm-flow) #tm-ws #trades .bk-h, html:not(.tm-flow) #tm-ws #trades .bk-r { padding-left: 18px; padding-right: 18px; }

  /* the account (ours: the balance on Hyperliquid, deposit, withdraw) as a third panel */
  html:not(.tm-flow) #tm-ws #term #p-acct > .ph { height: auto; padding: 20px 21px 12px; border-bottom: 0; }
  html:not(.tm-flow) #tm-ws #term #p-acct > .ph h2 { font: 650 14px/20px 'Manrope', var(--font); letter-spacing: -.3px; color: var(--text); }
  html:not(.tm-flow) #tm-ws #term #p-acct > .ph .src { font-size: 11px; color: var(--muted); }
  html:not(.tm-flow) #tm-ws #term #acctp.ac { padding: 0 21px 20px; gap: 0; overflow: visible; }
  html:not(.tm-flow) #tm-ws #acctp .al { display: flex; justify-content: space-between; padding: 7px 0; font: 400 11px/16px var(--font); color: var(--muted); }
  html:not(.tm-flow) #tm-ws #acctp .al b { font: 500 11px/16px var(--font); color: var(--text); }
  html:not(.tm-flow) #tm-ws #acctp > .al:first-child b { font: 600 20px/28px 'Manrope', var(--font); }
  html:not(.tm-flow) #tm-ws #acctp .acts { gap: 8px; margin-top: 12px; padding-top: 0; border-top: 0; }
  html:not(.tm-flow) #tm-ws #term #acctp .acts a { height: auto; padding: 8px 6px; border: 1px solid var(--border); border-radius: 7px; background: none; font: 550 11px/16px var(--font); color: var(--text); }
  html:not(.tm-flow) #tm-ws #term #acctp .acts a:hover { background: var(--panel2); }

  /* the footer line (the prototype's page-footer): the feed and the network, the market search and the shortcuts */
  html:not(.tm-flow) #tm-ws .tsb { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: auto; margin-top: 27px; padding: 17px 0 0;
      border-top: 1px solid var(--border); background: none; font: 400 9px/14px var(--font); color: #818995; white-space: nowrap; }
  html:not(.tm-flow) #tm-ws .tsb b { font-weight: 400; color: #818995; } html:not(.tm-flow) #tm-ws .tsb .dot { width: 6px; height: 6px; background: var(--green); box-shadow: none; }
  html:not(.tm-flow) #tm-ws .tsb button { height: auto; padding: 0; border: 0; background: none; font: inherit; color: inherit; } html:not(.tm-flow) #tm-ws .tsb button:hover { color: var(--text); }

  /* the menus and sheets the scripts open: the workspace's surfaces */
  html:not(.tm-flow) #tm-ws .pop, html:not(.tm-flow) #tm-ws .drop, html:not(.tm-flow) #tm-ws .sheet { background: #1b1f25; border: 1px solid #464e5b; border-radius: 10px; box-shadow: var(--shadow); font-family: var(--font); }
  html[data-theme="light"]:not(.tm-flow) #tm-ws :is(.pop, .drop, .sheet) { background: var(--panel); border-color: var(--border); }
  html:not(.tm-flow) #tm-ws .toasts .toast { background: #343e4b; border: 1px solid #69798e; color: #e4eaf2; }
  html[data-theme="light"]:not(.tm-flow) #tm-ws .toasts .toast { background: var(--panel); border-color: var(--border); color: var(--text); }

  @media (max-width: 980px) { html:not(.tm-flow) #tm-ws #term.term { grid-template-columns: minmax(0, 1fr) 265px; } html:not(.tm-flow) #tm-ws #term .top.p { gap: 16px; } }
  /* 760-860px: the Terminal's phone mode (its sheets, its price line) inside the two columns; the chart stays in view */
  @media (max-width: 860px) {
    html:not(.tm-flow) #tm-ws #term .top.p { position: static; height: auto; min-height: 84px; margin: 0; border-radius: 0; background: none; }
    html:not(.tm-flow) #tm-ws #term .top.p > .mpx { display: grid !important; order: 2; justify-items: start; gap: 0; }
    html:not(.tm-flow) #tm-ws .mpx b { font: 400 18px/27px var(--font); color: var(--text); } html:not(.tm-flow) #tm-ws .mpx .chg { height: auto; padding: 0; background: none !important; font: 400 11px/16px var(--font); }
    html:not(.tm-flow) #tm-ws #term #p-chart.chart { display: flex !important; height: 360px; margin: 0; border: 0; grid-area: auto; }
    html:not(.tm-flow) #tm-ws #term #p-book > .ph { display: flex !important; }
    html:not(.tm-flow) #tm-ws #book .bk-f, html:not(.tm-flow) #tm-ws #book .bk-grp { display: none !important; }
    html:not(.tm-flow) #tm-ws #book .bk-m { display: flex; text-align: left; justify-content: flex-start; }
    html:not(.tm-flow) #tm-ws #term .form, html:not(.tm-flow) #tm-ws #term .book, html:not(.tm-flow) #tm-ws #term .bottom { grid-area: auto; margin: 0; padding: 0; box-shadow: none; }
    html:not(.tm-flow) #tm-ws #term #p-form .fm { padding: 20px; }
    html:not(.tm-flow) #tm-ws #book { position: static; inset: auto; }
    html:not(.tm-flow) #tm-ws #fav { display: grid !important; }
    html:not(.tm-flow) #tm-ws #term .bottom .pb { min-height: 234px; }
  }
  /* the order book under the chart, beside the positions (QA 2026-10-06: at 1360x900 the chart, the ticket and the book are
     in view, no empty column under the chart); a narrower window puts it under the chart, above the positions */
  html:not(.tm-flow) #tm-ws .tm-lr { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: stretch; min-width: 0; }
  html:not(.tm-flow) #tm-ws .tm-lr > .p { min-width: 0; }
  @media (max-width: 1199px) { html:not(.tm-flow) #tm-ws .tm-lr { grid-template-columns: minmax(0, 1fr); } html:not(.tm-flow) #tm-ws .tm-lr > #p-book { order: -1; } }
  /* a phone: one column, the ticket right under the chart (QA round 3: never below an empty positions panel), then the
     book, the positions, the account */
  @media (max-width: 760px) {
    html:not(.tm-flow):not(.tm-bot) #tm-ws :is(.tm-l, .tm-r, .tm-lr) { display: contents; }
    html:not(.tm-flow) #tm-ws #term.term { align-items: stretch; }
    html:not(.tm-flow):not(.tm-bot) #tm-ws #tm-cp { order: 1; } html:not(.tm-flow):not(.tm-bot) #tm-ws #p-form { order: 2; } html:not(.tm-flow):not(.tm-bot) #tm-ws #p-book { order: 3; }
    html:not(.tm-flow):not(.tm-bot) #tm-ws #p-bottom { order: 4; } html:not(.tm-flow):not(.tm-bot) #tm-ws #p-acct { order: 5; }
    html:not(.tm-flow) #tm-ws #term.term { display: flex; flex-direction: column; gap: 18px; padding: 0; }
    html:not(.tm-flow) #tm-ws .tm-l, html:not(.tm-flow) #tm-ws .tm-r { width: 100%; }
    html:not(.tm-flow) #tm-ws #term .top.p { flex-wrap: wrap; gap: 14px 18px; }
    html:not(.tm-flow) #tm-ws #term #p-chart.chart { height: 400px; }
    /* every drawing tool in view on a phone (none hidden under the chart's bottom edge) */
    html:not(.tm-flow) #tm-ws .dtb { gap: 0; padding: 0; } html:not(.tm-flow) #tm-ws .dtb button { width: 26px; height: 25px; } html:not(.tm-flow) #tm-ws .dtb hr { margin: 0; }
    html:not(.tm-flow) #tm-ws .tsb { flex-wrap: wrap; font-size: 8px; }
  }
  /* .ws draws every svg as a block (its icons sit in flex rows); the Terminal's inline icons stay inline, labels with a box are rows */
  html:not(.tm-flow) #tm-ws svg.i { display: inline-block; vertical-align: middle; }
  html:not(.tm-flow) #tm-ws label.ck, html:not(.tm-flow) #tm-ws label.prf { display: flex; margin: 0; }
  /* the bar's buttons as rows; their display at zero weight, so the bar's own hiding rules (⋯ until something moves into it,
     Trade only in full screen, the phone's Hide chart, the timeframes More holds) still apply */
  :where(html:not(.tm-flow) #tm-ws #term #p-chart > .ph) :where(button, .gb) { display: inline-flex; }
  html:not(.tm-flow) #tm-ws #term #p-chart > .ph button, html:not(.tm-flow) #tm-ws #term #p-chart > .ph .gb { align-items: center; gap: 2px; white-space: nowrap; }
  /* the chart full screen and the ticket over it: the column rule above (.p relative, its box) yields to them */
  html.cmax:not(.tm-flow) #tm-ws #term #p-chart.chart { position: fixed; inset: 0; z-index: 52; height: auto; border: 0; border-radius: 0; background: var(--panel); }
  html.cmax.ftk:not(.ftkf):not(.tm-flow) #tm-ws #term #p-chart.chart { right: var(--form-w); }
  html.ftk:not(.tm-flow) #tm-ws #term #p-form { position: fixed; z-index: 54; right: 16px; top: 56px; width: var(--form-w); height: min(760px, calc(100vh - 72px)); overflow: auto; box-shadow: var(--shadow); }
  html.ftk:not(.tm-flow) #tm-ws #term #p-form[style*="left"] { right: auto; }
  html.ftk:not(.ftkf):not(.tm-flow) #tm-ws #term #p-form { top: 0; right: 0; bottom: 0; height: auto; border: 0; border-left: 1px solid var(--border); border-radius: 0; box-shadow: none; }
  html.ftk:not(.tm-flow) #tm-ws #f-tabs { display: flex !important; } html.ftk:not(.tm-flow) #tm-ws #f-tabs > :is([data-p], #fm-venue) { display: none; }
  html:not(.tm-flow) #tm-ws #form > .ck { justify-content: flex-start; }
  html:not(.tm-flow) #tm-ws .tsb > span { display: flex; align-items: center; gap: 16px; } html:not(.tm-flow) #tm-ws .tsb > span > span:first-child { gap: 6px; }
  /* the Bot terminal (/bots/terminal, html.tm-bot): the prototype's Strategy lab. The chart and the test's results on
     the left, the test's settings and how it works on the right (its two-cols, 1.6 : 1), the bots below; New bot by the title */
  html:not(.tm-flow) #tm-ws .tm-bt { display: none; } html.tm-bot:not(.tm-flow) #tm-ws .tm-bt { display: inline; } html.tm-bot:not(.tm-flow) #tm-ws .tm-tt { display: none; }
  html.tm-bot:not(.tm-flow) #tm-ws #tm-net { display: none; }
  html.tm-bot:not(.tm-flow) #tm-ws #p-book, html.tm-bot:not(.tm-flow) #tm-ws #p-acct, html.tm-bot:not(.tm-flow) #tm-ws #p-form { display: none !important; }
  @media (min-width: 761px) { html.tm-bot:not(.tm-flow) #tm-ws #term.term { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important; gap: 20px; } }
  html.tm-bot:not(.tm-flow) #tm-ws .tm-l, html.tm-bot:not(.tm-flow) #tm-ws .tm-r { gap: 20px; }
  html:not(.tm-flow) #tm-ws #tm-hact .tb-strip { display: flex; padding: 0; margin: 0; min-height: 0; border: 0; background: none; }
  /* a header too narrow for one row (under 1500px): the market, the venue and the actions on the first row, the price and
     stats as the whole second row in the Backtest lab (New bot alone on a line looked broken); under 1100px New bot is its plus icon */
  @media (min-width: 761px) and (max-width: 1499px) { html.tm-bot:not(.tm-flow) #tm-ws #term .top.p > .stats { order: 6; flex: 1 1 100%; } }
  @media (min-width: 761px) and (max-width: 1099px) { html:not(.tm-flow) #tm-ws #term .top.p { column-gap: 12px; } html:not(.tm-flow) #tm-ws #tm-hact #tb-new .tbn-l { display: none; } html:not(.tm-flow) #tm-ws #tm-hact #tb-new { padding: 7px 8px; } }
  html:not(.tm-flow) #tm-ws #tm-hact #tb-new { display: inline-flex; width: auto; height: auto; gap: 8px; padding: 10px 15px; border-radius: 7px; font: 700 12px/18px var(--font); }
  html:not(.tm-flow) #tm-ws #tm-hact #tb-new .icon { width: 16px; height: 16px; }
  html:not(.tm-flow) #tm-ws .lab-res:empty { display: none; }
  html:not(.tm-flow) #tm-ws .lab-res .section-title { margin-top: 2px; } html:not(.tm-flow) #tm-ws .lab-res .section-title h2 { display: flex; align-items: center; }
  html:not(.tm-flow) #tm-ws .lab-res .lab-sub { margin: -6px 0 17px; } html:not(.tm-flow) #tm-ws .lab-res .lab-sub.lab-rs { margin-top: -11px; }
  html:not(.tm-flow) #tm-ws .lab-res .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html:not(.tm-flow) #tm-ws .lab-res .metric-value { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html:not(.tm-flow) #tm-ws .lab-eq svg.tb-eq { display: block; width: 100%; height: 160px; }
  html:not(.tm-flow) #tm-ws .lab-eq .tb-leg { display: flex; gap: 18px; margin-top: 10px; font-size: 10px; color: var(--muted); }
  html:not(.tm-flow) #tm-ws .lab-notes { margin-top: 14px; }
  /* a multi-coin bot (terminal-bots.js chartTabs, owner 2026-10-07): its coins as pills under the market's header; another
     coin's candles on a chart of their own over the page's (labVch); the basket's value against just holding (basketCurve) */
  .rv-ctabs { display: flex; gap: 6px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .rv-ctabs::-webkit-scrollbar { display: none; }
  .rv-ctabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; margin: 0; padding: 0 10px 0 5px; border: 1px solid var(--border); border-radius: 999px;
    background: none; font: 400 11px/16px var(--font); color: var(--muted); white-space: nowrap; cursor: pointer; }
  .rv-ctabs button b { font-weight: 500; color: var(--soft); }
  .rv-ctabs button .w { font-variant-numeric: tabular-nums; }
  .rv-ctabs button:hover, .rv-ctabs button:hover b { color: var(--text); }
  .rv-ctabs button.on { border-color: var(--muted); background: var(--panel2); color: var(--soft); } .rv-ctabs button.on b { color: var(--text); }
  .rv-ctabs button:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 1px; }
  html:not(.tm-flow) #tm-ws .lab-ctabs { padding: 14px 18px 0; }
  html:not(.tm-flow) #tm-ws .lab-vch { position: absolute; inset: 0; z-index: 4; background: var(--panel); }
  html:not(.tm-flow) #tm-ws .lab-vch[hidden] { display: none; }
  html:not(.tm-flow) #tm-ws .lab-vchc { position: absolute; left: var(--dtb-w); top: 0; right: 0; bottom: 0; }
  .tb-bkl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 8px; font-size: 11px; line-height: 16px; color: var(--muted); }
  .tb-bkl > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .tb-bkl i { display: inline-block; width: 14px; height: 0; border-top: 1.5px solid var(--rv-pos); }
  .tb-bkl i.dn { border-top-color: var(--rv-neg); } .tb-bkl i.h { border-top: 1px dashed var(--muted); }
  .tb-bkl b { font-weight: 500; color: var(--soft); font-variant-numeric: tabular-nums; } .tb-bkl b.up { color: var(--green, var(--rv-pos)); } .tb-bkl b.dn { color: var(--red, var(--rv-neg)); }
  .tb-bkl .tb-bkn { margin-left: auto; }
  .tb-bkt { margin: 6px 0 0; font-size: 10px; line-height: 15px; color: var(--muted); }
  html:not(.tm-flow) #tm-ws .lab-eq .tb-leg.tb-bkl { gap: 4px 18px; margin-top: 10px; font-size: 11px; }
  html:not(.tm-flow) #tm-ws .lab-empty .empty-state { padding: 46px 20px; }
  html:not(.tm-flow) #tm-ws .lab-cfg .form-group { margin-bottom: 16px; } html:not(.tm-flow) #tm-ws .lab-cfg .lab-g { gap: 12px; margin-bottom: 14px; grid-template-columns: minmax(0, 1fr) max-content; }
  html:not(.tm-flow) #tm-ws .lab-cfg .summary-line span:last-child { color: var(--text); }
  html:not(.tm-flow) #tm-ws .lab-cfg .error:empty { display: none; }
  html:not(.tm-flow) #tm-ws .lab-cfg .lab-run { margin-top: 14px; }
  html:not(.tm-flow) #tm-ws .lab-how .panel-head .icon { color: var(--muted); }
  html:not(.tm-flow) #tm-ws .lab-cfg input, html:not(.tm-flow) #tm-ws .lab-cfg select { height: auto; }
  /* the lab's settings: the guided setup's rows (bot-flow.js BotFlowKit; their fields, choices and switches as there:
     radar/bot_flow.py kit_css), stacked for the panel's width; the presets, then Entry / Exit / Risk / Timing as tabs.
     The section grows with its rows and the page scrolls (owner, 2026-10-07: no scroll box inside the panel, no control
     cut by its edge) */
  html:not(.tm-flow) #tm-ws #lab-cfg .lab-pre { margin-bottom: 14px; } html:not(.tm-flow) #tm-ws #lab-cfg .lab-k { display: block; font-size: 11px; color: var(--soft); margin-bottom: 7px; }
  html:not(.tm-flow) #tm-ws #lab-cfg .lab-tabs { gap: 18px; padding: 0; }
  html:not(.tm-flow) #tm-ws #lab-cfg .lab-tabs button { padding: 10px 0; }
  html:not(.tm-flow) #tm-ws #lab-cfg .lab-rows { padding-bottom: 4px; }
  html:not(.tm-flow) #tm-ws #lab-cfg .bf-r { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 0; }
  html:not(.tm-flow) #tm-ws #lab-cfg .bf-r + .bf-r { border-top: 1px solid var(--border); }
  html:not(.tm-flow) #tm-ws #lab-cfg .bf-r.sw { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  html:not(.tm-flow) #tm-ws #lab-cfg .bf-r .bf-ctl { justify-content: flex-start; }
  html:not(.tm-flow) #tm-ws #lab-cfg .bf-r .full { grid-column: 1 / -1; }
  /* Run backtest never below the fold (QA and owner, 2026-10-07): the fees and Run stick to the window's bottom edge
     inside the settings' column while its rows run on under them; flat, the panel's own surface, one hairline over it */
  html:not(.tm-flow) #tm-ws #lab-cfg { overflow: clip; }
  html:not(.tm-flow) #tm-ws #lab-cfg .lab-foot { position: sticky; bottom: 0; z-index: 3; background: var(--panel); border-top: 1px solid var(--border);
    margin: 0 -21px -20px; padding: 12px 21px 16px; }
  @media (max-width: 760px) { html:not(.tm-flow) #tm-ws #lab-cfg .lab-foot { margin: 0 -17px -18px; padding: 12px 17px 14px; } }
  html:not(.tm-flow) #tm-ws #lab-cfg .lab-foot .lab-run { margin-top: 12px; }
  html:not(.tm-flow) #tm-ws #lab-cfg .lab-foot .error { margin: 8px 0 0; }
  /* leverage and margin under the amount, as on an exchange's order form (owner, 2026-10-07: the lab had "no leverage") */
  html:not(.tm-flow) #tm-ws #lab-cfg .lab-g .bf-in { width: 100%; }
  html:not(.tm-flow) #tm-ws #lab-cfg .lab-g .lab-lvh { grid-column: 1 / -1; margin: -4px 0 0; }
  html:not(.tm-flow) #tm-ws #lab-cfg #lab-amt.bad { border-color: var(--red); }
  html:not(.tm-flow) #tm-ws .lab-res .lab-stop { display: flex; align-items: flex-start; gap: 8px; margin: -6px 0 17px; font-size: 11px; line-height: 17px; color: var(--soft); }
  html:not(.tm-flow) #tm-ws .lab-res .lab-stop .icon { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--amber); }
  html:not(.tm-flow) #tm-ws .lab-res .lab-start { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 17px 0; }
  html:not(.tm-flow) #tm-ws .lab-res .lab-start .button { flex: none; }
  html:not(.tm-flow) #tm-ws .lab-res, html:not(.tm-flow) #tm-ws .lab-cfg { min-width: 0; max-width: 100%; }     /* a long table or line scrolls in its own box, never the page */
  @media (max-width: 760px) { html:not(.tm-flow) #tm-ws .lab-res .lab-start { flex-direction: column; align-items: stretch; } html:not(.tm-flow) #tm-ws .lab-res .lab-start .button { justify-content: center; } }
  @media (max-width: 760px) { html:not(.tm-flow) #tm-ws .lab-res .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  html:not(.tm-flow) #tm-ws #tm-hact .tb-strip, html:not(.tm-flow) #tm-ws #tm-hact .tb-strip .go { position: static !important; inset: auto !important; width: auto !important; box-shadow: none !important; }
  @media (max-width: 760px) { html.tm-bot:not(.tm-flow) #tm-ws .tm-l, html.tm-bot:not(.tm-flow) #tm-ws .tm-r { display: contents; } html.tm-bot:not(.tm-flow) #tm-ws #tm-cp { order: 1; } html.tm-bot:not(.tm-flow) #tm-ws #lab-cfg { order: 2; } html.tm-bot:not(.tm-flow) #tm-ws #lab-res { order: 3; }
    html.tm-bot:not(.tm-flow) #tm-ws #p-bottom { order: 4; } html.tm-bot:not(.tm-flow) #tm-ws .lab-how { order: 5; } }
  /* the indicators' periods: small boxes beside each name (the workspace's full-width field rule stays out) */
  html:not(.tm-flow) #tm-ws .irow .ps input { width: 48px; flex: none; padding: 0 4px; height: 28px; text-align: center; }
  /* the Text tool's field on the chart (askText) */
  #chart .dtxt { position: absolute; z-index: 6; width: 160px; height: 28px; padding: 0 8px; border: 1px solid var(--rv-accent); border-radius: var(--rv-r-xs);
    background: var(--rv-bg); color: var(--rv-text); font: inherit; font-size: 12px; outline: none; }
  /* the market list's search: one frame (the field's own), not the workspace's input box inside it */
  html:not(.tm-flow) #tm-ws .drop.mk > .inp input { border: 0; background: none; box-shadow: none; padding-left: 8px; }
  /* keyboard shortcuts are no use on a touch screen or a phone: the footer's link to them goes there */
  @media (hover: none) and (pointer: coarse), (max-width: 760px) { #tsb-keys { display: none !important; } }
  /* the page's name for screen readers only (owner, 2026-10-06: no heading block, the chart starts at the top) */
  #tm-h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  html.tm-flow #tm-h1 { display: none !important; }
  /* Desktop Backtest lab: scroll results and settings inside the workspace, keeping Run and fees reachable. */
  @media (min-width: 861px) and (min-height: 701px) {
    html.tm-bot:not(.tm-flow) body { display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow: hidden; }
    html.tm-bot:not(.tm-flow) #rvn { flex: none; }
    html.tm-bot:not(.tm-flow) #tm-ws { flex: 1; min-height: 0; overflow: hidden; }
    html.tm-bot:not(.tm-flow) #tm-ws #tm-content { display: flex; flex-direction: column; height: 100%; min-height: 0; padding-top: 20px; padding-bottom: 12px; }
    html.tm-bot:not(.tm-flow) #tm-ws #term.term { flex: 1; min-height: 0; height: 100%; align-items: stretch; }
    html.tm-bot:not(.tm-flow) #tm-ws .tm-l,
    html.tm-bot:not(.tm-flow) #tm-ws .tm-r { min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; }
    html.tm-bot:not(.tm-flow) #tm-ws .tm-l > *,
    html.tm-bot:not(.tm-flow) #tm-ws .tm-r > * { flex-shrink: 0; }
    html.tm-bot:not(.tm-flow) #tm-ws #lab-cfg { display: flex; flex-direction: column; height: 100%; min-height: 0; }
    html.tm-bot:not(.tm-flow) #tm-ws #lab-cfg > .panel-head { flex: none; }
    html.tm-bot:not(.tm-flow) #tm-ws #lab-cfg > .panel-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
    html.tm-bot:not(.tm-flow) #tm-ws .tsb { flex: none; margin-top: 12px; padding-top: 10px; }
  }