/* The guided bot setup (/bots/new, radar/bot_flow.py; drawn by radar/web/bot-flow.js). Concept A "Steps" (owner's pick,
   2026-10-03): Choose -> Amount -> Review, and Customize (every setting by Entry / Exit / Risk / Timing beside a live
   check). Drawn in the workspace design (owner, 2026-10-06: the GPT-built workspace, docs/design/workspace-source, its
   configuration wizard): one wizard panel on the page (its header with the title and the close button, the numbered
   steps, the body, the footer with Back and the one light primary), form fields as the design's inputs, the right column
   as its "At a glance" summary box, its callouts and error lines. The page sits in a .ws wrapper (radar/bot_flow.py) for
   the design's tokens and fonts; every rule here is under #bf (or #sheet for the pickers), so it wins over the design's
   element rules and the Terminal's markup inside keeps working. The Terminal's own layout (#term) stays in the page for
   its data and is hidden here. */
html.tm-flow body { background: var(--rv-bg); overflow-y: auto; }
html.tm-flow #term, html.tm-flow #cbar, html.tm-flow #fbar { display: none !important; }

/* the design's tokens for this page (dark; the light theme below) */
.bf-ws { --bf-modal: #1b1f25; --bf-mline: #464e5b; --bf-box: #232931; --bf-bline: #454e5b; --bf-input: #14171b; --bf-sel: #353a42;
         --bf-hover: #24262a; --bf-on: #232529; --bf-stepon: #39424e; --bf-stepline: #667387; --bf-dim: #7d838b; --bf-warnbg: #2b2823;
         --bf-warnline: #494338; --bf-warntx: #c9c0ad; --bf-infobg: #242c34; --bf-infoline: #414b57; --bf-infotx: #bbc9d6;
         --bf-pad: 34px; --bf-foot: 72px; --bf-tabs: 0px;
         display: block; min-height: calc(100vh - var(--rv-header-h, 64px)); padding: 30px var(--bf-pad) 40px; background: var(--bg); }
[data-theme="light"] .bf-ws { --bf-modal: #ffffff; --bf-mline: #d5d9de; --bf-box: #f3f4f6; --bf-bline: #dfe2e6; --bf-input: #ffffff; --bf-sel: #e4e6e9;
         --bf-hover: #f0f1f3; --bf-on: #ffffff; --bf-stepon: #e4e6e9; --bf-stepline: #9aa1a9; --bf-dim: #80868d; --bf-warnbg: #f7f3ea;
         --bf-warnline: #e3d8c2; --bf-warntx: #6f5a2c; --bf-infobg: #eef2f6; --bf-infoline: #d3dbe4; --bf-infotx: #3c4a58; }
#bf { color: var(--text); font: 400 13px/1.5 var(--font); letter-spacing: 0; margin: 0;
      background: var(--bf-modal); border: 1px solid var(--bf-mline); border-radius: 14px; box-shadow: var(--shadow); }
#bf *, #bf *::before, #bf *::after { box-sizing: border-box; }
#bf :where(button, input, select) { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; letter-spacing: inherit; }
#bf p { margin: 0; }
#bf a { color: inherit; text-decoration: none; }
#bf .num { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: 0; }
#bf .up { color: var(--green); } #bf .dn { color: var(--red); } #bf .mut { color: var(--muted); } #bf .dim { color: var(--bf-dim); }
#bf svg.i { display: inline-block; width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#bf .sk { border-radius: 4px; }

/* the wizard: the header (crumb, title, line; the close button), the numbered steps, the body, the footer */
#bf .bf-w { margin: 0; padding: 0; }
#bf .bf-mh { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 23px 25px; border-bottom: 1px solid var(--border); }
#bf .bf-mh > div { min-width: 0; }
#bf .bf-crumb { margin: 0 0 4px; font-size: 11px; line-height: 16px; color: var(--muted); white-space: nowrap; }
#bf h1 { margin: 0; font: 650 20px/1.25 var(--font); letter-spacing: -.4px; color: var(--text); }
#bf .bf-sub { margin: 5px 0 0; font-size: 11px; line-height: 17px; color: var(--muted); max-width: 820px; }
#bf .bf-x { flex: none; width: 33px; height: 33px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 7px; color: var(--muted); }
#bf .bf-x:hover { background: var(--panel2); color: var(--text); border-color: var(--border); }
#bf .bf-x svg.i { width: 18px; height: 18px; }
#bf .bf-top { margin: 0; padding: 18px 25px 0; border: 0; }
#bf .bf-tw { display: flex; align-items: center; }
#bf .bf-steps { display: flex; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; }
#bf .bf-steps li { display: flex; flex: 1; min-width: 0; }
#bf .bf-steps:not(:has(li:nth-child(3))) { gap: 40px; } #bf .bf-steps:not(:has(li:nth-child(3))) li { flex: none; }   /* two steps (the Signal bot): side by side, never one in mid-panel */
#bf .bf-steps button { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: var(--muted); font-size: 10px; line-height: 16px;
                       text-align: left; cursor: default; white-space: nowrap; }
#bf .bf-steps button:not(:disabled) { cursor: pointer; }
#bf .bf-steps button:disabled { opacity: 1; }
#bf .bf-steps b { flex: none; width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-weight: 500; font-size: 10px; }
#bf .bf-steps .t { overflow: hidden; text-overflow: ellipsis; }
#bf .bf-steps .done { color: var(--soft); }
#bf .bf-steps .done b { border-color: var(--bf-stepline); }
#bf .bf-steps button:not(:disabled):hover { color: var(--text); }
#bf .bf-steps .on { color: var(--accent); }
#bf .bf-steps .on b { background: var(--bf-stepon); border-color: var(--bf-stepline); }
#bf .bf-mb { padding: 25px; }

/* words */
#bf .bf-lbl { display: block; margin: 0 0 7px; font-size: 11px; line-height: 16px; color: var(--soft); }
#bf .bf-note { margin: 10px 0 0; font-size: 10px; line-height: 16px; color: var(--muted); }
#bf .bf-banner { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; padding: 12px; border: 1px solid var(--bf-infoline); border-radius: 6px; background: var(--bf-infobg);
                 font-size: 11px; line-height: 1.7; color: var(--bf-infotx); }
#bf .bf-banner b { color: var(--text); font-weight: 600; }
#bf .bf-banner .bf-lnk { margin-left: auto; flex: none; }
#bf .bf-lnk { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 400; cursor: pointer;
              text-decoration: none; white-space: nowrap; }
#bf .bf-lnk:hover { color: var(--text); text-decoration: none; }
#bf .bf-lnk svg.i { width: 13px; height: 13px; }
#bf .bf-lnk.acc { color: var(--accent); }

/* step 1: the types as the library's rows (icon, name, line) in one bordered list; the market and the exchange in the
   summary box on the right */
#bf .bf-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin: 0; align-items: start; }
#bf .bf-types { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--panel); }
#bf .bf-typ { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 12px; width: 100%; margin: 0; min-height: 58px; padding: 10px 14px;
              border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
#bf .bf-typ:last-child { border-bottom: 0; }
#bf .bf-typ:focus-visible, #bf .bf-amtf .mx:focus-visible { outline-offset: -2px; }   /* inside the list's clipped frame */
#bf .bf-typ:hover { background: var(--bf-hover); }
#bf .bf-typ.on { background: var(--panel2); }
#bf .bf-typ.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
#bf .bf-typ .ic { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 7px; background: var(--bf-modal); color: var(--soft); }
#bf .bf-typ.on .ic { border-color: var(--bf-stepline); color: var(--text); }
#bf .bf-typ .ic svg { width: 16px; height: 16px; color: inherit; }
#bf .bf-typ .nm { display: block; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--text); }
#bf .bf-typ .ln { display: block; margin-top: 2px; font-size: 10px; line-height: 15px; color: var(--muted); }
#bf .bf-typ .rk { font-style: normal; color: var(--amber); }
#bf .bf-typ .ck { color: var(--text); visibility: hidden; } #bf .bf-typ.on .ck { visibility: visible; }
#bf .bf-typ .ck svg.i { width: 15px; height: 15px; stroke-width: 1.9; }
#bf .bf-grp { display: flex; align-items: center; gap: 8px; height: 38px; margin: 14px 0 6px; padding: 0 2px; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--soft); }
#bf .bf-grp:first-child { margin-top: 0; }
#bf .bf-more { margin-top: 14px; }
#bf .bf-side { display: grid; gap: 0; padding: 19px; border: 1px solid var(--bf-bline); border-radius: 8px; background: var(--bf-box); }
#bf .bf-side > .bf-lbl ~ .bf-lbl { margin-top: 18px; }
#bf .bf-sel { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 9px 12px;
              border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); color: var(--text); text-align: left; cursor: pointer; }
#bf .bf-sel:hover { border-color: var(--bf-stepline); }
#bf .bf-sel.st, #bf .bf-sel.st:hover { cursor: default; border-color: var(--border); }
#bf .bf-sel .lg { width: 24px; height: 24px; display: grid; place-items: center; }
#bf .bf-sel .lg img, #bf .bf-sel .lg svg { width: 24px; height: 24px; border-radius: 50%; }
#bf .bf-sel .a { display: block; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bf .bf-sel .b { display: block; margin-top: 2px; font-size: 10px; line-height: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bf .bf-sel .r .b { white-space: nowrap; }
#bf .bf-sel > span:nth-child(2) .b { white-space: normal; overflow: visible; text-overflow: clip; }   /* the pair and the fee line wrap in a narrow box, never cut (1024-1280px) */
#bf .bf-sel .r { text-align: right; } #bf .bf-sel .r .a { font-weight: 500; font-variant-numeric: tabular-nums; }
#bf .bf-sel > svg.i { color: var(--muted); }
#bf .bf-mood { margin: 14px 0 0; font-size: 11px; line-height: 1.7; color: var(--muted); }

/* step 2: the amount (the design's input), then the plans as three cards */
#bf .bf-amt { margin: 0; max-width: 520px; }
#bf .bf-amt + .bf-ph, #bf .bf-amt + .bf-ed { margin-top: 24px; }
#bf .bf-amtf { display: flex; align-items: center; height: 46px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); }
#bf .bf-amtf:focus-within { border-color: #acb4c0; }
#bf .bf-amtf input { flex: 1; min-width: 0; width: auto; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; color: var(--text);
                     font: 500 17px/24px var(--font); font-variant-numeric: tabular-nums; }
#bf .bf-amtf input::placeholder { color: var(--bf-dim); }
#bf .bf-amtf .u { margin-left: 12px; font-size: 11px; color: var(--muted); }
#bf .bf-amtf .mx { margin-left: 14px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 5px; background: none; color: var(--soft); font-size: 10px; cursor: pointer; }
#bf .bf-amtf .mx:hover { color: var(--text); background: var(--panel2); }
#bf .bf-amth { display: flex; justify-content: space-between; gap: 16px; margin-top: 7px; font-size: 10px; line-height: 16px; color: var(--muted); }
#bf .bf-amth b { color: var(--soft); font-weight: 500; }
#bf .bf-amth .bad b { color: var(--red); }
#bf .bf-amtf.bad { border-color: var(--red); }
/* an amount that cannot work (0, negative, above the most a bot may use): said under the field, in every step (GPT audit M01) */
#bf .bf-aerr { display: block; margin: 8px 0 0; font-size: 11px; line-height: 16px; color: var(--red); }
#bf .bf-aerr:empty { display: none; }
#bf .bf-r .h .bf-aerr { margin-top: 4px; }
/* a setting that works but costs more than it earns (a grid's gap under twice its round trip's fee): said, never blocking */
#bf .bf-awarn { display: block; margin: 4px 0 0; font-size: 11px; line-height: 16px; color: var(--bf-warntx); }
#bf .bf-in.bad, #bf .bf-in.bad:focus-within { border-color: var(--red); }
#bf .bf-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 24px 0 12px; }
/* the plans' heading with the backtest period beside it (owner, 2026-10-09: 7D / 30D / 90D / 1Y) */
#bf .bf-ph2 { align-items: center; margin: 12px 0 8px; }
#bf .bf-ph2 .hh { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
#bf .bf-ph2 .hh .n { text-align: left; }
#bf .bf-ph2 { flex-wrap: wrap; row-gap: 8px; }
#bf .bf-ph2 .ctl { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
#bf .bf-ph2 .bf-days { flex: none; margin-left: 0; }
#bf .bf-ph2 .bf-days button { padding: 2px 9px; }
@media (max-width: 1239px) { #bf .bf-ph2 .bf-days button { padding: 2px 7px; } #bf .bf-ph2 .ctl { gap: 6px; } #bf .bf-ph2 .hh { gap: 8px; } }
#bf .bf-hzhint { margin: -4px 0 8px; font-size: 11px; line-height: 16px; color: var(--muted); }
#bf .bf-hzhint:empty { display: none; }
#bf .bf-hzhint .bf-lnk { font-size: inherit; }
#bf .bf-days button:disabled { opacity: .45; cursor: default; }
#bf .bf-days button:disabled:hover { color: var(--muted); }
#bf .bf-rough { margin: -4px 0 8px; }
/* a test that stopped early: the days it ran beside the figure; the other range's result; the time the test ends */
#bf .bf-ranb { align-self: center; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; line-height: 16px; color: var(--bf-warntx); white-space: nowrap; }
#bf .bf-asof { margin-top: 2px; color: var(--bf-dim); }
#bf .bf-alt b { font-weight: 600; }
#bf .bf-rrn { margin: -2px 0 8px; font-size: 10px; line-height: 15px; color: var(--muted); }
/* step 2's Direction (owner, 2026-10-09): under the amount, beside it where the panel is wide; every direction the type
   runs as one segmented control, each with its Balanced backtest and one plain line; a type that sets its own says how.
   The plan cards a little tighter so that the three keep their whole height on a 1360x860 screen as before */
#bf .bf-amtrow ~ .bf-plans .bf-plan, #bf .bf-ph2 + .bf-plans .bf-plan { padding: 15px 17px; }
#bf .bf-ph2 + .bf-plans .bf-plan .ln { margin: 4px 0 10px; }
#bf .bf-amtrow { display: grid; grid-template-columns: minmax(0, 520px); gap: 18px; }
#bf .bf-amtrow .bf-amt { max-width: none; }
#bf .bf-dwhy.bf-alb { display: none; }
/* beside each other on a wider screen, in shared rows (the labels, the two controls, the lines under them), so the field
   and the choice keep one top edge and one height however the reason line or a choice's words wrap */
@media (min-width: 861px) {
  #bf .bf-amtrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
  #bf .bf-amtrow .bf-amtc, #bf .bf-amtrow .bf-amt, #bf .bf-amtrow .bf-dir { display: contents; }
  #bf .bf-dwhy.bf-alb { display: flex; }
  #bf .bf-amtrow .bf-dwhy { grid-row: 1; align-self: end; }
  #bf .bf-amtrow .bf-alb { grid-column: 1; } #bf .bf-amtrow .bf-dir .bf-dwhy { grid-column: 2; }
  #bf .bf-amtrow .bf-amtf { grid-column: 1; grid-row: 2; height: auto; min-height: 46px; }
  #bf .bf-amtrow .bf-dseg, #bf .bf-amtrow .bf-dfix { grid-column: 2; grid-row: 2; }
  #bf .bf-amtrow .bf-amth { grid-column: 1; grid-row: 3; } #bf .bf-amtrow .bf-dcap { grid-column: 2; grid-row: 3; }
  #bf .bf-amtrow .bf-amt .bf-aerr { grid-column: 1; grid-row: 4; }
}
@media (min-width: 861px) and (max-width: 1239px) { #bf .bf-amtrow { gap: 0 20px; } #bf .bf-dseg button { padding: 4px 7px; } }
#bf .bf-dir { min-width: 0; }
#bf .bf-dwhy { display: flex; align-items: baseline; gap: 10px; min-height: 16px; margin: 0 0 7px; font-size: 11px; line-height: 16px; color: var(--muted); }
#bf .bf-dwhy .k { flex: none; font-weight: 600; color: var(--soft); }
#bf .bf-dwhy .w { min-width: 0; }
#bf .bf-dseg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; min-height: 46px; padding: 3px; border: 1px solid var(--border);
               border-radius: 6px; background: var(--bf-input); }
#bf .bf-dseg button { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 4px 9px; border: 0; border-radius: 3px;
                      background: none; color: var(--muted); text-align: left; cursor: pointer; }
#bf .bf-dseg .dt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 15px; }
#bf .bf-dseg .dt b { font-weight: 600; color: var(--soft); white-space: nowrap; }
#bf .bf-dseg .dt .num { font-size: 11px; font-weight: 500; white-space: nowrap; color: var(--muted); }
#bf .bf-dseg .dl { font-size: 10px; line-height: 13px; overflow-wrap: anywhere; }
#bf .bf-dseg button:hover .dt b, #bf .bf-dseg button.on .dt b { color: var(--text); }
#bf .bf-dseg button.on { background: var(--bf-sel); color: var(--soft); }
#bf .bf-dseg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#bf .bf-dcap { margin: 7px 0 0; font-size: 10px; line-height: 16px; color: var(--muted); }
#bf .bf-dfix { display: flex; align-items: center; min-height: 46px; margin: 0; font-size: 11px; line-height: 16px; color: var(--soft); }
/* the review: the direction first in what it will do */
#bf .bf-dsum { margin: 0 0 8px; font-size: 12px; line-height: 18px; color: var(--soft); }
#bf .bf-dsum > span { color: var(--muted); margin-right: 4px; }
#bf .bf-dsum b { font-weight: 600; color: var(--text); }
#bf .bf-ph .h { font: 650 15px/1.3 var(--font); }
#bf .bf-ph .n { font-size: 11px; line-height: 16px; color: var(--muted); text-align: right; }
#bf .bf-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#bf .bf-plan { position: relative; display: flex; flex-direction: column; width: 100%; padding: 17px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel);
               color: var(--text); text-align: left; cursor: pointer; }
#bf .bf-plan:hover { border-color: var(--bf-stepline); }
#bf .bf-plan.on { border-color: var(--bf-stepline); background: var(--bf-box); }
#bf .bf-plan .nm { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 650; color: var(--soft); }
#bf .bf-plan.on .nm { color: var(--text); }
#bf .bf-plan .rec { padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; font-size: 9px; line-height: 14px; font-weight: 500; color: var(--muted); }
#bf .bf-plan .rd { margin-left: auto; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1px solid var(--bf-stepline); }
#bf .bf-plan.on .rd { border: 4px solid var(--accent); }
#bf .bf-plan .ln { display: block; flex: 1 0 auto; min-height: 34px; margin: 6px 0 12px; font-size: 11px; line-height: 17px; color: var(--muted); }
#bf .bf-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 11px; line-height: 17px; }
#bf .bf-kv > span:first-child { color: var(--muted); white-space: nowrap; }
#bf .bf-kv > span:last-child { min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bf .bf-plan .kvs { display: block; margin-bottom: 10px; }
#bf .bf-plan .bt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; }
#bf .bf-plan .bt > span:first-child { color: var(--muted); }
#bf .bf-plan .bt b, #bf .bf-plan .kvs b { font-size: 13px; font-weight: 600; }
#bf .bf-plan .kvl { display: none; }
/* a plan's risk beside its return (owner's review 2026-10-08): the test's worst drop and the loss at its stop */
#bf .bf-plan .bt2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 6px; font-size: 11px; }
#bf .bf-plan .bt2 > span:first-child { color: var(--muted); }
#bf .bf-plan .bt2 b { font-size: 12px; font-weight: 600; }
/* the amount brings a count down from the plan's own: said on the card, with the amount that keeps them all */
#bf .bf-plan .cn { display: block; margin: -4px 0 10px; font-size: 10px; line-height: 15px; color: var(--bf-warntx); }
#bf .bf-plan .cn[hidden] { display: none; }
#bf .bf-basis, #bf .bf-simn { margin: 12px 0 0; font-size: 10px; line-height: 16px; color: var(--muted); }
#bf .bf-simn + .bf-basis { margin-top: 2px; }
#bf .bf-rules { display: grid; gap: 4px; font-size: 11px; line-height: 17px; }
#bf .bf-rules span { display: block; }
#bf .bf-ed { margin-top: 24px; max-width: 520px; display: grid; gap: 8px; }

/* step 3: the chart and the backtest on the left; the risk, the guard and what it will do in the summary box on the right */
#bf .bf-rv { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin: 0; align-items: start; }
#bf .bf-rv > div:last-child { padding: 19px; border: 1px solid var(--bf-bline); border-radius: 8px; background: var(--bf-box); min-width: 0; }
#bf .bf-cap { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; min-height: 30px; margin: 0 0 10px; font-size: 11px; line-height: 16px; color: var(--muted); }
#bf .bf-cap b { flex: none; white-space: nowrap; color: var(--soft); font-weight: 600; }   /* never broken in two (プレビュー) */
#bf .bf-chart { position: relative; width: 100%; aspect-ratio: 664 / 240; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); overflow: hidden; }
#bf .bf-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
#bf .bf-chart .sk { position: absolute; inset: 0; border-radius: 0; }
/* the Terminal's chart (radar/web/chart-adapter.js) inside the box: drag, zoom and the crosshair are the chart's own */
#bf .bf-chart .bf-kc { position: absolute; inset: 0; cursor: crosshair; }
/* the chart's legend (bot-flow.js stlH): the overlays the bot's own rule draws, each a quiet text toggle with its colour
   as a short line (a small triangle for marks), the backtest's fills, and the chart the bot reads; one line over the
   chart, wrapping on a phone */
#bf .bf-stl { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: -6px 2px 4px; font-size: 11px; line-height: 16px; color: var(--muted); }
#bf .bf-stl:empty { display: none; }
#bf .bf-sti { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0; border: 0; background: none; color: var(--soft); font-size: 11px; cursor: pointer; }
#bf .bf-sti i { display: inline-block; width: 10px; height: 2px; border-radius: 1px; }
#bf .bf-sti svg.m { width: 10px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
#bf .bf-sti.off svg.m { opacity: .35; }
#bf .bf-sti i.d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
#bf .bf-sti.off { color: var(--bf-dim); text-decoration: line-through; text-decoration-color: var(--border); }
#bf .bf-sti.off i { opacity: .35; }
#bf .bf-sti[data-stl="trades"]::before { content: ""; width: 10px; height: 10px; border: 1px solid var(--bf-stepline); border-radius: 3px; box-sizing: border-box; }
#bf .bf-sti[data-stl="trades"][aria-pressed="true"]::before { background: var(--text); border-color: var(--text); box-shadow: inset 0 0 0 2px var(--bf-modal); }
#bf .bf-sti[data-stl="trades"].off { text-decoration: none; color: var(--muted); }
#bf .bf-sti:hover { color: var(--text); }
#bf .bf-sti:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
#bf .bf-stt { color: var(--bf-dim); }
#bf .bf-days button.bt { position: relative; }
#bf .bf-days button.bt::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; transform: translateX(-50%); opacity: .8; }
#bf .bf-stg { color: var(--accent); }
/* Market neutral's spread (radar/web/bot-chart.js spreadH): the z-score at the chart's size, its levels named at the
   right, the scale and three dates in HTML so they keep their size */
#bf .bf-zc { display: grid; grid-template-columns: minmax(0, 1fr) 34px; grid-template-rows: auto 18px; margin-top: 8px; }
#bf .bf-zp { position: relative; height: clamp(150px, 100vh - 560px, 260px); border: 1px solid var(--border); border-radius: 9px 0 0 9px; border-right: 0; background: var(--panel); overflow: hidden; }
#bf .bf-zp svg { position: absolute; inset: 8px 0; width: 100%; height: calc(100% - 16px); display: block; overflow: visible; }
#bf .bf-zp path { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1; }
#bf .bf-zp .z0 { stroke: var(--border); } #bf .bf-zp .ze { stroke: var(--accent); stroke-dasharray: 4 3; opacity: .7; }
#bf .bf-zp .zx { stroke: var(--bf-dim); stroke-dasharray: 1 3; } #bf .bf-zp .zs { stroke: var(--red); stroke-dasharray: 6 3; opacity: .6; }
#bf .bf-zp .zl { stroke: var(--text); stroke-width: 1.25; stroke-linejoin: round; opacity: .85; }
#bf .bf-zl { position: absolute; inset: 8px 0; pointer-events: none; }
#bf .bf-zl span { position: absolute; right: 8px; transform: translateY(-100%); padding-bottom: 1px; font-size: 10px; line-height: 13px; white-space: nowrap; }
#bf .bf-zl .ze { color: var(--accent); } #bf .bf-zl .zx { color: var(--bf-dim); } #bf .bf-zl .zs { color: var(--red); }
#bf .bf-zn { position: absolute; right: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); transform: translateY(-50%); }
#bf .bf-zy { position: relative; border: 1px solid var(--border); border-left: 0; border-radius: 0 9px 9px 0; background: var(--panel); }
#bf .bf-zyi { position: absolute; inset: 8px 0; }
#bf .bf-zy span { position: absolute; left: 6px; transform: translateY(-50%); font-size: 10px; line-height: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
#bf .bf-zx { position: relative; grid-column: 1; }
#bf .bf-zx span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 10px; line-height: 12px; color: var(--muted); white-space: nowrap; }
#bf .bf-zx span:first-child { transform: none; } #bf .bf-zx span:last-child { transform: translateX(-100%); }
#bf svg.bfc text { font: 400 10px var(--font); fill: var(--muted); font-variant-numeric: tabular-nums; }
#bf svg.bfc .lbl rect { fill: var(--bf-input); } #bf svg.bfc .lbl text { fill: var(--text); font-size: 10px; font-weight: 500; }
#bf svg.bfc .now rect { fill: var(--text); } #bf svg.bfc .now text { fill: var(--bg); font-weight: 600; }
#bf svg.bfc .ax line { stroke: var(--border); }
#bf .bf-bt { margin-top: 14px; padding: 4px 17px 17px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); }
#bf .bf-bth { display: flex; align-items: center; gap: 10px; height: 44px; }
#bf .bf-bth .t { font: 650 14px/1.3 var(--font); }
#bf .bf-sim { display: inline-flex; align-items: center; padding: 3px 7px; border: 1px solid var(--bf-infoline); border-radius: 5px; background: var(--bf-infobg); font-size: 10px; line-height: 14px;
              font-weight: 500; color: var(--bf-infotx); }
#bf .bf-days { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); }
#bf .bf-days button { padding: 4px 9px; border: 0; border-radius: 3px; background: none; font-size: 10px; line-height: 14px; color: var(--muted); cursor: pointer; }
#bf .bf-days button:hover { color: var(--text); }
#bf .bf-days button.on { color: var(--text); background: var(--bf-sel); }
#bf .bf-days button .ran { color: var(--muted); font-weight: 400; }              /* "30d · ran 13d": the test stopped early */
/* the switch that tests a plan's grid range at the user's exact prices (bot-flow.js exactH) */
#bf .bf-exact { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin: 10px 0 0; font-size: 11px; line-height: 16px; color: var(--soft); cursor: pointer; }
#bf .bf-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
#bf .bf-big b { font: 650 26px/32px var(--font); letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
#bf .bf-big .bfp { font-size: 13px; line-height: 18px; font-weight: 600; }
#bf .bf-big .bfo { font-size: 11px; color: var(--muted); }
#bf .bf-big .bf-btsh { margin-left: auto; align-self: center; }   /* Share backtest: quiet, on the result's own line */
#bf .bf-parts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; font-size: 11px; line-height: 18px; color: var(--muted); }
#bf .bf-parts b { font-weight: 500; font-size: 12px; color: var(--soft); margin-left: 4px; }
#bf .bf-parts b.up { color: var(--green); } #bf .bf-parts b.dn { color: var(--red); }
#bf .bf-parts .hold { margin-left: auto; }
#bf .bf-bt.ld .bf-big, #bf .bf-bt.ld .bf-parts { opacity: .45; }
#bf .bf-bt .err { margin: 8px 0 0; font-size: 11px; line-height: 17px; color: var(--red); }
#bf .bf-bt .sk { display: block; height: 31px; margin-top: 6px; width: 50%; }
#bf .bf-do h3 { margin: 0 0 12px; font: 650 15px/1.3 var(--font); color: var(--text); }
#bf .bf-sent { margin: 0 0 12px; font-size: 12px; line-height: 1.65; color: var(--soft); }
#bf .bf-sent b { color: var(--text); font-weight: 600; }
#bf .bf-ol { margin: 0; padding: 0; list-style: none; counter-reset: bf; display: grid; gap: 8px; }
#bf .bf-ol li { position: relative; padding-left: 26px; font-size: 11px; line-height: 17px; counter-increment: bf; color: var(--soft); }
#bf .bf-ol li::before { content: counter(bf); position: absolute; left: 0; top: 0; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%;
                        font-size: 9px; line-height: 1; color: var(--muted); }
#bf .bf-risk { margin: 0; border-top: 0; }
#bf .bf-risk:empty { display: none; }
#bf .bf-rv .bf-do { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
#bf .bf-rv .bf-do:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#bf .bf-rv .bf-risk:empty + [data-fv=guard] > .bf-guard:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
#bf .bf-ask + .bf-risk { margin-top: 18px; }
#bf .bf-rr { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 31px; padding: 7px 0; font-size: 11px; line-height: 17px; border-bottom: 0; }
#bf .bf-rr > span:first-child { color: var(--muted); white-space: nowrap; }
#bf .bf-rr > span:last-child { text-align: right; min-width: 0; }
#bf .bf-rr b { font-weight: 600; } #bf .bf-rr .s { color: var(--muted); margin-left: 6px; font-size: 10px; }
#bf .bf-rr .lq { white-space: nowrap; } #bf .bf-rr.two > span:last-child { display: grid; justify-items: end; }     /* a neutral grid: its long and short liquidation, one per line */
#bf .bf-rnote { margin: 8px 0 0; font-size: 10px; line-height: 16px; color: var(--muted); }          /* what the risk figures are measured on */
/* the guard: the design's callouts (the safe line quiet, a warning amber, a block in red), each with its fix */
#bf .bf-guard { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 0 10px; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
                font-size: 11px; line-height: 1.7; color: var(--soft); }
#bf .bf-guard::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); transform: translateY(-1px); }
#bf .bf-guard.warn::before { background: var(--amber); } #bf .bf-guard.block::before { background: var(--red); } #bf .bf-guard.wait::before, #bf .bf-guard.na::before { background: var(--muted); }
#bf .bf-guard.block { color: var(--red); }
#bf .bf-guard.warn { padding: 12px; border: 1px solid var(--bf-warnline); border-radius: 6px; background: var(--bf-warnbg); color: var(--bf-warntx); }
#bf .bf-guard .acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#bf .bf-chip, #bf .bf-blk .sb { display: inline-flex; align-items: center; flex: none; height: auto; padding: 7px 11px; border: 1px solid var(--border); border-radius: 7px; background: var(--bf-hover);
                                box-shadow: none; color: var(--text); font-size: 11px; font-weight: 550; cursor: pointer; text-decoration: none; }
#bf .bf-chip:hover, #bf .bf-blk .sb:hover { background: var(--bf-sel); text-decoration: none; }
#bf .bf-blk { display: grid; gap: 8px; margin-top: 12px; }
#bf .bf-blk:empty { display: none; }
#bf .bf-blk .tb-b { display: flex; align-items: baseline; flex-wrap: wrap; min-height: 0; padding: 0; background: none; font-size: 11px; line-height: 1.7; color: var(--red); gap: 6px 10px; }
#bf .bf-blk .tb-b::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
#bf .bf-warn { margin-top: 12px; padding: 12px; border: 1px solid var(--bf-warnline); border-radius: 6px; background: var(--bf-warnbg); font-size: 11px; line-height: 1.7; color: var(--bf-warntx); }
#bf .bf-cz { margin-top: 16px; }
#bf .bf-kvr { display: grid; }
#bf .bf-pairs { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
#bf .bf-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; width: 100%; margin: 0; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
               background: none; color: var(--text); text-align: left; cursor: pointer; position: relative; }
#bf .bf-pair:last-child { border-bottom: 0; }
#bf .bf-pair:hover { background: var(--bf-hover); }
#bf .bf-pair.on { background: var(--panel2); }
#bf .bf-pair.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
#bf .bf-pair b { font-size: 12px; line-height: 18px; font-weight: 600; }
#bf .bf-pair .a { font-size: 12px; line-height: 18px; text-align: right; }
#bf .bf-pair .l { grid-column: 1 / 3; font-size: 10px; line-height: 15px; color: var(--muted); }
#bf .bf-pair.off b, #bf .bf-pair.off .a { color: var(--muted); }
#bf .bf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
#bf .bf-list li { position: relative; padding-left: 18px; font-size: 12px; line-height: 18px; color: var(--soft); }
#bf .bf-list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }

/* Customize in the review's two columns (owner, 2026-10-07: the chart was too small to set anything by): the review's
   chart with its timeframes on the left, the backtest and the checks under it; the settings on the right under a row of
   section tabs, every setting as a form row (what it is, one plain line, the control). On a wide window each column
   scrolls on its own between the steps and the footer */
#bf .bf-rv.bf-czr > .bf-czf { padding: 0; border: 0; border-radius: 0; background: none; }
#bf .bf-czl, #bf .bf-czf { min-width: 0; }
#bf .bf-czc { display: flex; flex-direction: column; min-width: 0; }
#bf .bf-czl .bf-pspr { min-width: 0; }
/* the chart's caption on one line, its words cut before the timeframes wrap (a ~1000px window's narrow column) */
#bf .bf-czc .bf-cap { flex-wrap: nowrap; }
#bf .bf-czc .bf-capt { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bf .bf-czc .bf-tfs { flex: none; }
#bf .bf-czk { margin-top: 14px; padding: 4px 17px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); }
#bf .bf-czk > .bf-rr + .bf-rr { border-top: 1px solid var(--border); }
#bf .bf-czk [data-fv]:empty { display: none; }
#bf .bf-czk .bf-guard:first-child, #bf .bf-czk .bf-risk:first-child { margin-top: 0; }
/* the section tabs: the caption's height on the left, so the first card's top meets the chart's */
#bf .bf-nav { display: flex; align-items: flex-end; gap: 2px; height: 30px; margin: 0 0 10px; border-bottom: 1px solid var(--border);
              overflow-x: auto; scrollbar-width: none; background: var(--bf-modal); }
#bf .bf-nav::-webkit-scrollbar { display: none; }
#bf .bf-nav a { flex: none; display: block; padding: 6px 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 12px; line-height: 16px;
                color: var(--muted); text-decoration: none; white-space: nowrap; }
#bf .bf-nav a:hover { color: var(--text); text-decoration: none; }
#bf .bf-nav a.on { color: var(--text); border-bottom-color: var(--text); }
#bf .bf-nav .bf-lnk { flex: none; margin: 0 0 0 auto; padding: 0 0 7px 12px; font-size: 11px; line-height: 16px; white-space: nowrap; color: var(--muted); }
#bf .bf-nav .bf-lnk:hover { color: var(--text); }
#bf .bf-rst svg.i { display: none; width: 15px; height: 15px; }
@media (max-width: 1180px) {        /* a narrow settings column: the reset is its icon, so the tabs keep the row */
  #bf .bf-nav .bf-rst { display: inline-grid; place-items: center; padding: 0 2px 7px 12px; }
  #bf .bf-rst .t { display: none; } #bf .bf-rst svg.i { display: block; }
}
/* longer words (German, Japanese) on a wide screen: the same icon once the row is full (bot-flow.js fit) */
#bf .bf-nav.ic .bf-rst { display: inline-grid; place-items: center; padding: 0 2px 7px 12px; }
#bf .bf-nav.ic .bf-rst .t { display: none; } #bf .bf-nav.ic .bf-rst svg.i { display: block; }
#bf .bf-nav.tight a { padding: 6px 6px; font-size: 11px; }      /* and still too long: the tabs a little closer */
#bf .bf-nav.tighter { gap: 0; } #bf .bf-nav.tighter a { padding: 6px 3px; } #bf .bf-nav.tighter .bf-rst { padding-left: 4px; }
#bf .bf-czs > .bf-aerr:empty { display: none; }
#bf .bf-czs > .bf-aerr { margin: 0 0 12px; }
#bf .bf-g { margin-bottom: 22px; padding: 0 17px 4px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); scroll-margin-top: 16px; }
#bf .bf-g:last-child { margin-bottom: 0; }
#bf .bf-g h2 { display: flex; align-items: flex-end; height: 42px; margin: 0; font: 650 14px/1.3 var(--font); letter-spacing: -.2px; }
#bf .bf-g .gl { margin: 4px 0 0; padding-bottom: 12px; font-size: 10px; line-height: 16px; color: var(--muted); border-bottom: 1px solid var(--border); }
#bf .bf-r { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 8px 28px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--border); }
#bf .bf-g .bf-r:last-child { border-bottom: 0; }
#bf .bf-r .k { display: block; font-size: 12px; line-height: 17px; font-weight: 550; color: var(--text); }
#bf .bf-r .h { display: block; margin-top: 3px; font-size: 10px; line-height: 15px; color: var(--muted); overflow-wrap: anywhere; }
#bf .bf-r .h .ro { color: var(--text); }
#bf .ro.num { white-space: nowrap; }             /* a value never breaks inside itself ("84,444", "+0.19%–0.23%") */
#bf .bf-r .h .ro:empty { display: none; }
#bf .bf-r.wide { grid-template-columns: minmax(0, 1fr); }
#bf .bf-r.sw { grid-template-columns: minmax(0, 1fr) auto; }   /* a switch alone: the label keeps the row's width (no wrap in a narrow column) */
#bf .bf-r .full { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; }
#bf .bf-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
#bf .bf-in { display: flex; align-items: center; flex: 1; min-width: 0; height: 38px; padding: 0 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); }
#bf .bf-in:focus-within { border-color: #acb4c0; }
#bf .bf-in input, #bf .bf-in select { flex: 1; min-width: 0; width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; color: var(--text);
                                      font: 400 12px/18px var(--font); font-variant-numeric: tabular-nums; appearance: none; -webkit-appearance: none; }
#bf .bf-in select { cursor: pointer; } #bf .bf-in select option { background: var(--bf-input); color: var(--text); }
#bf .bf-in input::placeholder { color: var(--bf-dim); }
#bf .bf-in .u { flex: none; margin-left: 8px; font-size: 10px; color: var(--muted); }
#bf .bf-in > svg.i { color: var(--muted); margin-left: 8px; pointer-events: none; width: 12px; height: 12px; }
#bf button.bf-in { justify-content: space-between; cursor: pointer; font: 400 12px/18px var(--font); color: var(--text); }
#bf button.bf-in:hover { border-color: var(--bf-stepline); }
#bf .bf-in.ro { background: none; border-color: transparent; padding-right: 0; justify-content: flex-end; color: var(--soft); }
#bf .bf-rg { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 0; width: 100%; }
#bf .bf-rg .dash { text-align: center; color: var(--muted); }
#bf .bf-seg { display: flex; flex: 1; min-width: 0; height: 38px; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); }
/* every choice keeps its whole word (BOT-13, audit 2026-10-07: "Margin" was cut to "Marg..." in a 220px control): equal
   widths while they fit, a word never narrower than itself; a choice list longer than its row wraps onto a second line */
#bf .bf-seg { flex-wrap: wrap; height: auto; min-height: 38px; }
#bf .bf-seg button { flex: 1 1 0; min-width: max-content; min-height: 30px; padding: 0 8px; border: 0; border-radius: 3px; background: none; color: var(--muted); font-size: 11px;
                     white-space: nowrap; cursor: pointer; }
#bf .bf-seg button:hover { color: var(--text); }
#bf .bf-seg.bf-purp { height: auto; }
#bf .bf-seg.bf-purp button { min-height: 30px; padding: 6px 8px; white-space: normal; line-height: 1.35; }
#bf .bf-seg button.on { background: var(--bf-sel); color: var(--text); font-weight: 600; }
#bf .bf-sw { position: relative; flex: none; display: inline-block; width: 32px; height: 18px; margin: 0; cursor: pointer; }
#bf .bf-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
#bf .bf-sw i { position: absolute; inset: 0; border-radius: 9px; background: var(--bf-input); border: 1px solid var(--border); pointer-events: none; transition: background .12s; }
#bf .bf-sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform .12s; }
#bf .bf-sw input:checked + i { background: var(--accent); border-color: var(--accent); }
#bf .bf-sw input:checked + i::after { transform: translateX(14px); background: var(--bf-on); }
#bf .bf-sw input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
#bf .bf-ctl .bf-sw + .bf-in, #bf .bf-ctl .bf-in + .bf-sw { flex: none; }
#bf .bf-ctl .bf-in.sm { flex: 0 0 120px; }
/* the editors that need the row's width (conditions, rules, a basket): the Terminal's own markup, on the design's scale */
#bf .full { display: grid; gap: 8px; min-width: 0; }
#bf .full .cnd, #bf .full .rcard { border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: grid; gap: 8px; background: var(--bf-modal); }
#bf .full .g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
#bf .full .inp { display: flex; align-items: center; height: 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); padding: 0 0 0 10px; min-width: 0; }
#bf .full .inp .pre { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; }
#bf .full .inp input, #bf .full .inp select { flex: 1; min-width: 0; width: 0; height: 100%; border: 0; border-radius: 0; outline: 0; background: none; color: var(--text); text-align: right; padding: 0 10px;
                                              font: 400 12px var(--font); appearance: none; -webkit-appearance: none; }
#bf .full .inp .u { padding-right: 10px; font-size: 10px; color: var(--muted); }
#bf .full .inp > svg.i { margin-right: 10px; width: 12px; height: 12px; color: var(--muted); }
#bf .full .seg { display: flex; height: 34px; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); }
#bf .full .seg { flex-wrap: wrap; height: auto; min-height: 34px; }
#bf .full .seg button { flex: 1 1 0; min-width: max-content; min-height: 26px; padding: 0 8px; border: 0; border-radius: 3px; background: none; color: var(--muted); font-size: 11px; cursor: pointer; white-space: nowrap; }
#bf .full .seg button.on { background: var(--bf-sel); color: var(--text); font-weight: 600; }
#bf .full .cnd-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
#bf .full .xb { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 6px; background: var(--bf-input); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
#bf .full .cnd-and, #bf .full .rc-k { font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
#bf .full .rc-h { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
#bf .full .tb-lnk { justify-self: start; padding: 0; border: 0; background: none; color: var(--accent); font-size: 11px; cursor: pointer; }
#bf .full .tb-lnk:hover { color: var(--text); }
#bf .full .crow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 34px; gap: 8px; align-items: center; }
#bf .full .crow .inp input[data-up] { text-align: left; padding-left: 0; }
@media (max-width: 420px) { #bf .full .crow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; } }   /* a 320px phone: the coin keeps its ticker ("BTC", not "B...") */
#bf .full .crow.chd { font-size: 11px; color: var(--muted); }
#bf .full .crow.chd span:nth-child(2) { text-align: right; padding-right: 14px; }
#bf .full .tb-al { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
#bf .full .tb-al b.dn { color: var(--red); }
#bf .full .tb-al > span { display: inline-flex; align-items: center; gap: 12px; }
/* a coin field (a basket row, the second coin): a button that opens the market list, the logo and name with a chevron */
#bf .full .cpk, #bf .bf-ctl .cpk { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px;
                                   background: var(--bf-input); color: var(--text); font: 600 12px var(--font); text-align: left; cursor: pointer; }
#bf .bf-ctl .cpk { flex: 1; width: auto; height: 38px; padding: 0 11px; }
#bf .full .cpk:hover, #bf .bf-ctl .cpk:hover { border-color: var(--muted); }
#bf .full .cpk b, #bf .bf-ctl .cpk b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#bf .full .cpk.ph b, #bf .bf-ctl .cpk.ph b { color: var(--muted); font-weight: 400; }
#bf .full .cpk svg.i, #bf .bf-ctl .cpk svg.i { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; color: var(--muted); }
#bf .full .xb[disabled] { opacity: .35; cursor: default; }
/* an indicator bot's signal names its side; a Both bot's short signal (the long one's mirror) is read-only under it */
#bf .full .cnd-sig { font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
#bf .full .cnd-mir { margin: 0; padding: 9px 12px; border: 1px dashed var(--border); border-radius: 8px; font-size: 12px; line-height: 18px; color: var(--muted); }
#bf .bf-czf .bf-r { grid-template-columns: minmax(0, 1fr); gap: 9px; }
#bf .bf-czf .bf-r.sw { grid-template-columns: minmax(0, 1fr) auto; }
#bf .bf-czf .bf-ctl { justify-content: flex-start; }
#bf .bf-czf .bf-ctl .bf-sw:only-child { margin-left: auto; }
#bf .full .dys { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
#bf .full .dys button { height: 32px; border: 1px solid var(--border); border-radius: 5px; background: var(--bf-input); color: var(--muted); font-size: 11px; cursor: pointer; }
#bf .full .dys button.on { background: var(--bf-sel); color: var(--text); }

/* the footer: Back (the design's ghost button) or the summary on the left, quiet text actions, the one light primary; it
   stays at the bottom of the window while the wizard is longer than it */
#bf .bf-foot { position: sticky; z-index: 40; bottom: 0; background: var(--bf-modal); border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; }
#bf .bf-fw { display: flex; align-items: center; gap: 20px; min-height: var(--bf-foot); max-width: none; margin: 0; padding: 0 25px; }
/* Start with the reason it is off right above it (one line, quiet; nothing while it is on) */
#bf .bf-gow { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; min-width: 0; max-width: 60%; }
#bf .bf-offwhy { font-size: 11px; line-height: 15px; color: var(--bf-warntx); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
#bf .bf-offwhy:empty { display: none; }
#bf .bf-fw .what { margin-right: auto; min-width: 0; font-size: 11px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bf .bf-fw .what b { color: var(--text); font-weight: 600; }
#bf .bf-fw .fee { margin: 0 auto 0 0; max-width: none; text-wrap: balance; min-width: 0; font-size: 10px; line-height: 15px; color: var(--muted); }
#bf .bf-fw .bf-back + .fee { margin-left: 0; }
#bf .bf-fw .bf-sec { font-size: 12px; color: var(--soft); }
#bf .bf-fw .bf-sec:hover { color: var(--text); }
#bf .bf-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 15px; border: 1px solid var(--border); border-radius: 7px; background: var(--bf-hover);
               color: var(--text); font-size: 12px; font-weight: 550; cursor: pointer; white-space: nowrap; }
#bf .bf-back:hover { background: var(--bf-sel); }
#bf .bf-back svg.i { width: 13px; height: 13px; }
#bf .bf-back.ml { margin-right: auto; }
#bf .bf-go { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: auto; min-width: 0; padding: 10px 16px;
             border: 1px solid var(--accent); border-radius: 7px; background: var(--accent); color: var(--bf-on); font: 700 12px/18px var(--font); letter-spacing: 0; cursor: pointer;
             text-decoration: none; white-space: nowrap; }
#bf .bf-go .ar { font-weight: 400; }
#bf .bf-go:hover:not(:disabled) { background: var(--text); border-color: var(--text); text-decoration: none; color: var(--bf-on); }
#bf .bf-go:disabled { opacity: .5; cursor: not-allowed; }

/* the coin and exchange pickers (the Terminal's sheet, outside #bf) */
#sheet.sheet.bfs { width: min(440px, 100vw); }
#sheet .bfs-q { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; border: 1px solid var(--rv-line2); border-radius: 6px; background: var(--rv-panel2); color: var(--rv-dim); }
#sheet .bfs-q input { flex: 1; min-width: 0; width: auto; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0; background: none; color: var(--rv-text); font: 400 12px var(--rv-font); }
#sheet .bfs-l { display: grid; max-height: min(480px, 60vh); overflow-y: auto; margin-top: 8px; }
#sheet .bfs-r { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 6px 6px; border: 0; border-bottom: 1px solid var(--rv-line2);
                border-radius: 0; background: none; color: var(--rv-text); text-align: left; cursor: pointer; font: inherit; }
#sheet .bfs-r:hover, #sheet .bfs-r.on { background: color-mix(in srgb, var(--rv-text) 5%, transparent); }
#sheet .bfs-r .lg img, #sheet .bfs-r .lg svg { width: 20px; height: 20px; border-radius: 50%; display: block; }
#sheet .bfs-r b { display: block; font-size: 12px; line-height: 17px; font-weight: 600; }
#sheet .bfs-r small { display: block; font-size: 11px; line-height: 16px; color: var(--rv-dim); }
#sheet .bfs-r .r { text-align: right; font-size: 12px; line-height: 17px; }
#sheet .bfs-r.na { opacity: .45; cursor: default; }

/* the ~1000px laptop: the same steps, a little tighter */
@media (max-width: 1180px) {
  .bf-ws { --bf-pad: 24px; }
  #bf .bf-rv { grid-template-columns: minmax(0, 1fr) 300px; }
  #bf .bf-rv .bf-chart { aspect-ratio: 16 / 9; }      /* the chart column is narrow here: the preview keeps its height */
}
/* a short window (the page scrolls, bot-flow.css below): the chart column stays in view beside the settings, the tabs
   stay over them */
@media (min-width: 861px) {
  #bf .bf-czl { position: sticky; top: 12px; align-self: start; }
  #bf .bf-czf .bf-nav { position: sticky; top: 0; z-index: 3; }
}
@media (max-width: 1040px) { #bf .bf-plan { padding: 15px; } #bf .bf-r { grid-template-columns: minmax(0, 1fr) 196px; gap: 8px 20px; } }
/* a narrower or shorter window (QA audit 2026-10-08: at 1000x700 the plans' backtests sat below the fold): each card in
   its compact form, the labelled values and the backtest with its risk on two short lines */
@media (min-width: 861px) and (max-width: 1040px), (min-width: 861px) and (max-height: 760px) {
  #bf .bf-plan .ln { min-height: 0; margin: 4px 0 8px; }
  #bf .bf-plan .kvs, #bf .bf-plan .bt, #bf .bf-plan .bt2 { display: none; }
  #bf .bf-plan .kvl { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11px; line-height: 17px; color: var(--muted); }
  #bf .bf-plan .kvl > span { white-space: nowrap; }
  #bf .bf-plan .kvl b { font-weight: 600; font-size: 12px; color: var(--text); }
  #bf .bf-plan .kvl2 { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
  #bf .bf-plan .cn { margin: 6px 0 0; }
}

/* a phone: the wizard over the full width (no frame), one question per screen, the primary fixed at the screen's bottom
   edge (the workspace shell has no bottom tab bar: round-2 QA 2026-10-07 found the footer floating 56px above it) */
@media (max-width: 860px) {
  .bf-ws { --bf-pad: 0px; --bf-foot: 64px; --bf-tabs: 0px; padding: 0; min-height: 0; }
  #bf { border: 0; border-radius: 0; box-shadow: none; padding-bottom: calc(var(--bf-foot) + env(safe-area-inset-bottom)); }
  #bf .bf-mh { padding: 19px 17px 17px; }
  #bf h1 { font-size: 19px; }
  #bf .bf-top { padding: 15px 17px 0; }
  #bf .bf-steps b { width: 20px; height: 20px; font-size: 9px; }
  #bf .bf-steps button { font-size: 9px; gap: 5px; }
  /* a phone's stepper: one circle per screen (Type, Market, Amount, Plan, Review); the current screen's name beside its
     circle takes the free room, the others are their numbers (their names stay for screen readers) */
  #bf .bf-steps.bf-sph { gap: 8px; }
  #bf .bf-steps.bf-sph li { flex: none; }
  #bf .bf-steps.bf-sph li:has(> .on) { flex: 1 1 auto; }
  #bf .bf-steps.bf-sph button:not(.on) .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #bf .bf-mb { padding: 19px 17px 24px; }
  #bf .bf-chart, #bf .bf-rv .bf-chart { aspect-ratio: 350 / 220; }
  #bf .bf-cols { display: block; }
  #bf .bf-ph { margin: 0 0 12px; display: grid; gap: 4px; align-items: start; } #bf .bf-ph .n { text-align: left; }
  #bf .bf-amt + .bf-ph { margin-top: 20px; }
  #bf .bf-ph.sub { margin-top: 4px; }
  #bf .bf-ph2 .hh { display: block; } #bf .bf-ph2 .ctl { margin-left: 0; justify-content: flex-start; } #bf .bf-ph2 .bf-days { flex-wrap: wrap; }
  #bf .bf-ph.lim { margin-top: 28px; }                 /* a private copy's limits under its amount, on the same screen */
  #bf .bf-plans { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #bf .bf-plan .ln { min-height: 0; margin: 4px 0 8px; }
  #bf .bf-plan .kvs, #bf .bf-plan .bt, #bf .bf-plan .bt2 { display: none; }
  /* labelled values and the backtest with its risk, each pair kept whole, wrapping as the width needs */
  #bf .bf-plan .kvl.kvlv, #bf .bf-plan .kvl.kvl2 { flex-wrap: wrap; justify-content: flex-start; gap: 2px 14px; }
  #bf .bf-plan .kvl > span, #bf .bf-plan .kvl > span:first-child { min-width: 0; overflow: visible; white-space: nowrap; }
  #bf .bf-plan .kvl2 { margin-top: 4px; }
  #bf .bf-plan .cn { margin: 6px 0 0; }
  #bf .bf-plan .kvl { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; line-height: 17px; color: var(--muted); }
  #bf .bf-plan .kvl > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #bf .bf-plan .kvl b { font-weight: 600; font-size: 12px; color: var(--text); }
  #bf .bf-rv { display: block; }
  #bf .bf-rv > * + * { margin-top: 20px; }
  #bf .bf-big b { font-size: 22px; line-height: 28px; }
  #bf .bf-parts .hold { margin-left: 0; }
  /* Customize on a phone: the chart (with its timeframes) first, then the settings under their tabs, then the backtest */
  #bf .bf-czr { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  #bf .bf-czr > .bf-czl, #bf .bf-czr > .bf-czf { display: contents; }
  #bf .bf-czr > * + * { margin-top: 0; }
  #bf .bf-czc { order: 0; } #bf .bf-czf .bf-nav { order: 1; margin: 0 0 -10px; } #bf .bf-czs { order: 2; } #bf .bf-czl .bf-bt { order: 3; margin-top: 0; } #bf .bf-czk { order: 4; margin-top: -6px; }
  #bf .bf-czf .bf-nav { position: sticky; top: 0; z-index: 3; }
  #bf .bf-g { scroll-margin-top: 46px; }                /* a tab tapped: its section's heading lands under the sticky tabs, not behind them */
  #bf .bf-r { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #bf .bf-ctl { justify-content: flex-start; }
  #bf .bf-ctl .bf-sw:only-child { margin-left: auto; }
  #bf .bf-r.sw { grid-template-columns: minmax(0, 1fr) auto; }
  #bf .bf-typ { min-height: 52px; padding: 6px 14px; }      /* six types and Continue fit one phone screen (390 x 844) */
  #bf .bf-foot { position: fixed; left: 0; right: 0; bottom: var(--bf-tabs); border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  #bf .bf-fw { gap: 12px; padding: 0 17px; }
  #bf .bf-fw .what, #bf .bf-fw .fee, #bf .bf-fw .bf-sec { display: none; }
  #bf .bf-go { flex: 1; min-width: 0; height: 42px; }
  #bf .bf-gow { flex: 1; max-width: none; align-items: stretch; } #bf .bf-offwhy { text-align: center; }
  #bf .bf-back { width: 42px; height: 42px; padding: 0; flex: none; }
  #bf .bf-back span { display: none; }
  #bf .bf-back.ml { margin-right: 0; }
  #bf .bf-fee2 { display: block; margin: 16px 0 0; font-size: 10px; line-height: 15px; color: var(--muted); }
  #sheet.sheet.bfs { width: auto; }
}
@media (min-width: 861px) { #bf .bf-fee2, #bf .bf-ponly { display: none; } }
/* the Points starter quests on the review (bot-flow.js questsH): one quiet checklist, three short columns */
#bf .bf-qs { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
#bf .bf-qh { display: inline-block; font: 600 12px/16px var(--font); color: var(--text); text-decoration: none; }
#bf .bf-qh:hover { text-decoration: underline; }
#bf .bf-ql { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
#bf .bf-ql li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; row-gap: 2px; align-items: center; min-width: 0; font-size: 12px; line-height: 16px; color: var(--text); }
#bf .bf-ql i { display: grid; place-items: center; width: 14px; height: 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--border); }
#bf .bf-ql li.ok i { background: var(--text); box-shadow: none; }
#bf .bf-ql svg { width: 10px; height: 10px; fill: none; stroke: var(--bg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#bf .bf-ql span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bf .bf-ql b { grid-column: 2; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bf .bf-qn { margin: 8px 0 0; font-size: 11px; line-height: 15px; color: var(--muted); }
/* 761-860px: the shell keeps its 76px icon sidebar (radar/theme.py SHELL), so the fixed footer starts beside it, never
   over its bottom icons (audit 2026-10-07, B) */
@media (min-width: 761px) and (max-width: 860px) { #bf .bf-foot { left: 76px; } }
/* a touch screen: the fields' text at 16px, so iOS does not zoom the page on focus (the amount is 17px already), and a
   switch's tap area 44px tall around its 32 x 18 drawing (audit 2026-10-07, C and D); the desktop look is unchanged */
@media (pointer: coarse) {
  #bf .bf-in input, #bf .bf-in select, #bf .full input:not([type=checkbox]):not([type=radio]), #bf .full select, #sheet .bfs-q input { font-size: 16px; }
  #bf .bf-sw input { inset: -13px -6px; width: auto; height: auto; }
}
@media (max-width: 860px) { #bf .bf-donly { display: none !important; } }
#bf .bf-cols.bf-one { display: block; }
#bf .bf-ask { margin: 0 0 4px; max-width: none; }
#bf input:focus, #bf select:focus, #bf input:focus-visible { outline: none; }
#bf button:focus-visible, #bf a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 861px) { html.tm-flow .toasts { bottom: 24px; } }
/* the backtest's assumptions and limits, under every result */
#bf .bf-asm { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.6; color: var(--muted); }
#bf .bf-asm summary { cursor: pointer; color: var(--soft); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
#bf .bf-asm summary::-webkit-details-marker { display: none; }
#bf .bf-asm summary::after { content: "+"; color: var(--muted); } #bf .bf-asm[open] summary::after { content: "\2013"; }
#bf .bf-asm ul { margin: 8px 0 0; padding: 0 0 0 16px; display: grid; gap: 4px; }
/* the panel before connecting a wallet (outside #bf, inside the .ws wrapper) */
.bf-ws #bf-cp .drawer-section { margin: 0; } .bf-ws #bf-cp .drawer-section + .drawer-section { margin-top: 18px; }
.bf-ws #bf-cp .drawer-section p { font-size: 12px; line-height: 1.6; color: var(--muted); }
.bf-ws #bf-cp .drawer-section p + p { margin-top: 4px; }
.bf-ws #bf-cp .modal-header svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
#bf .bf-chart { touch-action: pan-y; cursor: grab; user-select: none; }
#bf .bf-chart.drag { cursor: grabbing; }
/* a wider screen: the panel fits the window (radar/web/bot-flow.js fit sets --bf-maxh); the header, the steps and the
   footer stay, the body between them scrolls inside the panel, so nothing hides under the footer (QA 2026-10-06).
   A short window (a laptop's 560-700px) keeps the page's own scroll instead: an inner box of 200-odd pixels cut its
   sections mid-field (owner, 2026-10-07, as in the Backtest lab); the footer then sticks to the window's bottom edge */
/* Customize's chart is the tool the settings are read from (owner, 2026-10-07: "too small to set anything by"): never
   the short strip of its width's aspect ratio on a laptop's short window */
@media (min-width: 861px) { #bf .bf-czl .bf-chart { aspect-ratio: auto; height: clamp(280px, 100vh - 290px, 560px); } }
@media (min-width: 861px) and (min-height: 701px) {
  html.tm-flow .bf-ws { min-height: 0; }
  #bf { display: flex; flex-direction: column; max-height: var(--bf-maxh, none); }
  #bf .bf-w { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  #bf .bf-mh, #bf .bf-top { flex: none; }
  /* the steps row ends on a hairline, so the body scrolls cleanly under it instead of meeting the step labels (owner, 2026-10-07) */
  #bf .bf-top { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
  #bf .bf-mb { padding-top: 20px; }
  #bf .bf-mb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  #bf .bf-foot { position: static; flex: none; }
  /* Customize: the body does not scroll, its two columns do (the chart grows into the room the column has) */
  #bf[data-step="custom"] .bf-mb { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
  #bf[data-step="custom"] .bf-mb > :not(.bf-czr) { flex: none; }
  #bf .bf-czr { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  #bf .bf-czl { position: static; align-self: stretch; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px; scrollbar-width: thin; }
  #bf .bf-czc { flex: 1 0 auto; }
  #bf .bf-czl .bf-chart { flex: 1 0 clamp(300px, 100vh - 500px, 600px); height: auto; aspect-ratio: auto; max-height: 620px; }   /* the chart fills the column's view; the backtest under it in the column's scroll */
  #bf .bf-czf { display: flex; flex-direction: column; min-height: 0; }
  #bf .bf-czf .bf-nav { position: static; flex: none; }
  #bf .bf-czs { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 20px; scrollbar-width: thin; }
}
/* a field Customize cannot use, in its editor's own box too (as the amount field) */
#bf .full .inp.bad { border-color: var(--red); }
#bf .bf-stop { color: var(--soft); }
/* a multi-coin bot's coin tabs over the chart (terminal.html .rv-ctabs), the basket's value against just holding */
#bf .bf-ctabs { margin: 0 0 10px; }
#bf .bf-ctabs button { font-size: 11px; line-height: 16px; }
#bf .bf-bkc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
#bf .bf-bkc svg.tb-eq { display: block; width: 100%; height: 64px; overflow: visible; }
#bf .bf-bkc .tb-bkt { display: none; }
/* Phase 6: the quiet "Switch to ..." beside "built for another market" (and the Market-hours grid's offer) reads as the
   line's own size, never wrapped inside its words */
#bf .bf-mood .bf-lnk { font-size: inherit; line-height: inherit; white-space: nowrap; }
/* Phase 6: a phone's or a tablet's live backtest bar, on top of the fixed footer (bot-flow.js sbarH): the page's bottom
   padding takes it in, so it never covers the primary button or the last field; hidden while the full result is on the
   screen, and on a desktop (the result sits beside the settings there) */
#bf .bf-sbar { display: none; }
@media (max-width: 860px) {
  #bf.bf-hasbar { padding-bottom: calc(var(--bf-foot) + 40px + env(safe-area-inset-bottom)); }
  #bf .bf-sbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 17px; border-bottom: 1px solid var(--border); }
  #bf .bf-sbar.seen { display: none; }
  #bf .bf-sbar .l { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; line-height: 16px; color: var(--muted); }
  #bf .bf-sbar .l .bf-sim { flex: none; }
  #bf .bf-sbar .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #bf .bf-sbar .v { display: flex; align-items: baseline; gap: 8px; flex: none; font-size: 13px; line-height: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
}
/* Phase 6: a backtest part with a short explanation (its title): its words dotted, as a term to hover */
#bf .bf-parts [title] > .k { text-decoration: underline dotted; text-decoration-color: var(--bf-dim); text-underline-offset: 3px; cursor: help; }