/* 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 'Manrope', 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; }
#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; }
#bf .bf-ph .h { font: 650 15px/1.3 'Manrope', 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; }
#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 { color: var(--soft); font-weight: 600; }
#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; }
#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 'Manrope', 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-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
#bf .bf-big b { font: 650 26px/32px 'Manrope', 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-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 'Manrope', 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; }
}
#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 'Manrope', 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; }
#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 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; }
  #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-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 { display: none; }
  #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-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-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; } }
/* 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; }