/* =============================================================
   futures.css — AI Futures Engine tab only. Reuses color/spacing
   variables already defined in main.css; no variables redefined
   here so this stays in sync with the rest of the terminal's theme.
   ============================================================= */

:is(#panelFutures, #panelUtilities) .fu-row,
:is(#panelFutures, #panelUtilities) .fu-hrow {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}

:is(#panelFutures, #panelUtilities) .fu-row {
  grid-template-columns: 1fr 0.7fr 0.6fr 1.3fr 0.6fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 0.6fr 0.6fr 1fr 1fr;
}

:is(#panelFutures, #panelUtilities) .fu-hrow {
  grid-template-columns: 0.9fr 0.7fr 0.9fr 0.6fr 0.9fr 0.9fr 0.5fr 0.9fr 0.8fr 0.9fr 0.6fr 1.2fr 1fr 0.7fr;
}

:is(#panelFutures, #panelUtilities) .fu-row.fu-head,
:is(#panelFutures, #panelUtilities) .fu-hrow.fu-head {
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--line-soft);
  cursor: default;
}

:is(#panelFutures, #panelUtilities) .fu-row:not(.fu-head) {
  cursor: pointer;
  transition: background 0.12s ease;
}
:is(#panelFutures, #panelUtilities) .fu-row:not(.fu-head):hover {
  background: rgba(255,255,255,0.03);
}

:is(#panelFutures, #panelUtilities) .fu-row.fu-approved .fu-status-cell { color: var(--green); font-weight: 600; }
:is(#panelFutures, #panelUtilities) .fu-row.fu-rejected .fu-status-cell { color: var(--dim); }
:is(#panelFutures, #panelUtilities) .fu-row.fu-rejected { opacity: 0.7; }

:is(#panelFutures, #panelUtilities) .fu-hrow.fu-win { border-left: 2px solid var(--green); }
:is(#panelFutures, #panelUtilities) .fu-hrow.fu-loss { border-left: 2px solid var(--red); }

:is(#panelFutures, #panelUtilities) .fu-empty {
  padding: 18px 10px;
  color: var(--dim);
  font-size: 13px;
  text-align: center;
}

:is(#panelFutures, #panelUtilities) .fu-explain {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 0;
  color: var(--ink);
}

/* -------------------------------------------------------------
   Futures Engine settings row (Min Confidence / Min Net Profit /
   Risk / Leverage / High Selectivity). Reuses .controls chrome but
   keeps each field a sane, readable width instead of stretching
   five short number inputs across a full-width desktop monitor.
   ---------------------------------------------------------- */
.controls.controls--compact{
  grid-template-columns:repeat(auto-fit, minmax(170px, 230px));
}

/* -------------------------------------------------------------
   Account / Trading Summary — Real Balance, Starting Balance,
   Open Position, Trades, Win Rate, Gross/Fees/Net P&L.

   Desktop (4 columns): row 1 is the four session-stat cards, row 2
   is Open Position (double-width, so it has real room for symbol /
   direction / qty / entry / mark / uPnL / SL / TP1-3 / Close) plus
   Gross P&L and Fees, and Net P&L gets its own full-width highlight
   bar as the headline number — this also happens to be the exact
   DOM order already in the HTML, so no reordering is needed here.

   Mobile (2 columns, <=768px further below): Open Position and Net
   P&L each take the full row; order: is used there (not here) to
   move Open Position up next to the balance cards without touching
   desktop, since it sits later in the DOM (after Trades/Win Rate).
   ---------------------------------------------------------- */
.fu-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:16px;
}
.fu-summary-grid > .ov-card{ min-width:0; }
.fu-card-pos{ grid-column:span 2; }
.fu-card-net{ grid-column:1 / -1; }

/* Open Position card: content-driven height (no fixed/huge min-height),
   generous wrap room for the position line and SL/TP/Close detail. */
.fu-card-pos{
  justify-content:flex-start;
}
.fu-pos-value{
  font-size:13.5px !important; /* the shared .ov-value clamp() is sized for short numbers, not this line */
  font-weight:600;
  line-height:1.55;
  font-family:var(--mono);
  overflow-wrap:break-word;
  word-break:break-word; /* keeps long symbols like HYPEUSDT from overflowing the card */
}
.fu-pos-close-row{
  display:none; /* toggled to flex by js/futures-ui.js (renderLiveCloseButtons) */
  flex-direction:column;
  gap:8px;
  margin-top:2px;
}
.fu-pos-detail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  width:100%;
}
.fu-pos-detail-text{
  font-size:11.5px;
  color:var(--dim);
  flex:1 1 220px;
  min-width:0;
  line-height:1.6;
  overflow-wrap:break-word;
  word-break:break-word; /* SL/TP figures wrap cleanly instead of overflowing */
}
.fu-pos-detail .fu-close-pos-btn{
  font-size:11.5px;
  padding:7px 16px;
  white-space:nowrap;
}

@media (max-width:900px){
  .fu-summary-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .fu-card-pos{ grid-column:1 / -1; }
}

@media (max-width:768px){
  .fu-summary-grid{ gap:10px; }
  /* Reorder without touching the DOM: Open Position moves up next to the
     balance cards, matching the requested mobile stack (Real/Start, then
     Open Position full-width, then Trades/Win Rate, then Gross/Fees, then
     Net P&L full-width). */
  .fu-card-balance{ order:1; }
  .fu-card-start{ order:2; }
  .fu-card-pos{ order:3; }
  .fu-card-trades{ order:4; }
  .fu-card-winrate{ order:5; }
  .fu-card-gross{ order:6; }
  .fu-card-fees{ order:7; }
  .fu-card-net{ order:8; }
}

@media (max-width:600px){
  /* Close button gets a full-width, easy-to-tap target on phones. */
  .fu-pos-detail .fu-close-pos-btn{ width:100%; }
}

/* -------------------------------------------------------------
   Mobile: dense trade tables (Live Opportunity Scanner, Trade
   History, Trade Log, Backtest Trades — 12-14 columns each)
   scroll horizontally instead of squeezing every column unreadably
   thin or collapsing to one column per cell (the latter needs a
   data-label attribute on every cell for the ::before content to
   show anything, which nothing in js/futures-ui.js sets, so that
   approach silently rendered blank labels). Each header+rows pair
   in the HTML is wrapped in a .table-scroll container — see
   autotrade-futures/index.html — which this rule targets.
   min-width on the row itself is what forces the scrollbar to
   appear rather than the columns collapsing to illegibly thin. ---- */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  /* prevents the scroll container itself from ever pushing the page wider */
  max-width:100%;
}
:is(#panelFutures, #panelUtilities) .table-scroll .fu-row,
:is(#panelFutures, #panelUtilities) .table-scroll .fu-hrow{
  min-width:860px; /* below this the fr-based columns become unreadable; scroll instead */
}
:is(#panelFutures, #panelUtilities) .table-scroll .fu-row.fu-head,
:is(#panelFutures, #panelUtilities) .table-scroll .fu-hrow.fu-head{
  position:sticky; top:0; z-index:1; background:var(--bg);
}

/* The Live/Demo Trading section is a grouping heading, not a card: the panel
   border it used to carry drew a second box around content that is already
   made of bordered cards (exchange picker, summary grid, trade history, trade
   log), so the whole section read as one giant outlined slab. The heading
   stays, the chrome goes; the nested .ov-blocks inside keep their own. */
:is(#panelFutures, #panelUtilities) .fu-live-section{
  background:none; border:0; border-radius:0; padding:0;
}

/* Session trade history. Declared once here rather than inline on both the
   header row (page markup) and the data rows (renderLiveHistory) — those two
   were duplicate copies of the same 13-column string, which is exactly how a
   header drifts out of alignment with its own body when a column is added.
   Columns: Time · Exch · Symbol · Strategy · Dir · Entry · Exit · Lev · Qty ·
   Gross · Fees · Net · Duration · Order ID. */
:is(#panelFutures, #panelUtilities) .fu-hrow--live{
  grid-template-columns:.7fr 1fr 1fr 1.7fr .6fr .8fr .8fr .5fr .7fr .8fr .8fr .8fr .6fr 1.4fr;
}
:is(#panelFutures, #panelUtilities) .table-scroll .fu-hrow--live{ min-width:1000px; }
:is(#panelFutures, #panelUtilities) .fu-strategy-cell{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-dim); font-size:11.5px;
}

/* Live/Demo Trading — per-exchange selection rows (mirrors Autotrade's
   Connect Exchanges rows: exchange label + Live/Demo toggle — but here
   the row itself is also the "which exchange is active" selector, since
   only one exchange trades Live/Demo at a time in this app).

   Rendered as a COLLAPSIBLE picker (see renderLiveExchangeRows in
   js/futures-ui.js): only the currently selected exchange is visible, with its
   own Live/Demo toggle still on the row, and the other four slide out beneath
   it when the row is tapped. Five permanently-stacked rows was most of a phone
   screen spent on a choice that gets made once. */
:is(#panelFutures, #panelUtilities) .fu-live-exch-rows{ margin:14px 0; }
:is(#panelFutures, #panelUtilities) .fu-exch-select{ position:relative; }

:is(#panelFutures, #panelUtilities) .fu-live-exch-row{
  display:grid; grid-template-columns:24px minmax(0, 150px) auto 1fr; gap:14px; align-items:center;
  padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--panel2); cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
:is(#panelFutures, #panelUtilities) .fu-live-exch-row:hover{ border-color:var(--amber-dim); }
:is(#panelFutures, #panelUtilities) .fu-live-exch-row.selected{ border-color:var(--amber); background:rgba(240,180,41,.06); }
:is(#panelFutures, #panelUtilities) .fu-live-exch-row:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
:is(#panelFutures, #panelUtilities) .fu-live-exch-radio{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--line); flex:none;
}
:is(#panelFutures, #panelUtilities) .fu-live-exch-row.selected .fu-live-exch-radio{
  border-color:var(--amber); background:radial-gradient(circle, var(--amber) 0 40%, transparent 44%);
}
:is(#panelFutures, #panelUtilities) .fu-live-exch-label{ font-weight:600; color:var(--ink); }
:is(#panelFutures, #panelUtilities) .fu-live-exch-note{ font-size:11px; color:var(--dim); text-align:right; min-width:0; }
:is(#panelFutures, #panelUtilities) .fu-live-exch-note[data-verified="1"]{ color:var(--green); }

/* the collapsed row gets a fifth column for its chevron */
:is(#panelFutures, #panelUtilities) .fu-exch-current{
  grid-template-columns:24px minmax(0, 150px) auto 1fr 18px;
  position:relative; z-index:2;
}
:is(#panelFutures, #panelUtilities) .fu-exch-chevron{
  width:18px; height:18px; fill:none; stroke:var(--dim); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .24s ease, stroke .15s ease;
}
:is(#panelFutures, #panelUtilities) .fu-exch-current:hover .fu-exch-chevron{ stroke:var(--amber); }
:is(#panelFutures, #panelUtilities) .fu-exch-select.is-open .fu-exch-chevron{ transform:rotate(180deg); stroke:var(--amber); }

/* grid-template-rows 0fr -> 1fr animates a list of unknown height without
   hard-coding a max-height that clips or lags */
:is(#panelFutures, #panelUtilities) .fu-exch-list{
  display:grid; grid-template-rows:0fr;
  opacity:0; visibility:hidden; margin-top:0;
  transition:grid-template-rows .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease, margin-top .24s ease, visibility 0s .24s;
}
:is(#panelFutures, #panelUtilities) .fu-exch-list-inner{
  overflow:hidden; min-height:0;
  display:flex; flex-direction:column; gap:8px;
}
:is(#panelFutures, #panelUtilities) .fu-exch-select.is-open .fu-exch-list{
  grid-template-rows:1fr; opacity:1; visibility:visible; margin-top:8px;
  transition:grid-template-rows .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease, margin-top .24s ease;
}
@media (prefers-reduced-motion: reduce){
  :is(#panelFutures, #panelUtilities) .fu-exch-list,
  :is(#panelFutures, #panelUtilities) .fu-exch-chevron{ transition:none; }
}

@media (max-width:640px){
  /* Markup order is: radio, label, mode-toggle (Live/Demo buttons), note,
     chevron. A fixed label column plus a right-aligned note is more than an
     iPhone SE's width, so collapse to: radio + label + mode-toggle + chevron
     on row one, the verified-status note wrapping full-width beneath. */
  :is(#panelFutures, #panelUtilities) .fu-live-exch-row{
    grid-template-columns:20px 1fr auto;
    grid-template-areas:
      "radio label mode"
      "note  note  note";
    column-gap:10px; row-gap:6px;
    padding:12px 14px;
  }
  :is(#panelFutures, #panelUtilities) .fu-exch-current{
    grid-template-columns:20px 1fr auto 18px;
    grid-template-areas:
      "radio label mode chev"
      "note  note  note note";
  }
  :is(#panelFutures, #panelUtilities) .fu-live-exch-radio{ grid-area:radio; }
  :is(#panelFutures, #panelUtilities) .fu-live-exch-label{ grid-area:label; font-size:14px; }
  :is(#panelFutures, #panelUtilities) .fu-live-exch-row .mode-toggle{ grid-area:mode; }
  :is(#panelFutures, #panelUtilities) .fu-exch-chevron{ grid-area:chev; }
  :is(#panelFutures, #panelUtilities) .fu-live-exch-note{ grid-area:note; text-align:left; white-space:normal; line-height:1.45; }
}

/* -------------------- Trading Bots — cards + Details view -------------------- */
/* Layout modeled on Bybit's own "My Bots" card and bot-details page,
   using this app's existing dark palette/vars rather than Bybit's light one. */
.sb-symbol-results{
  position:absolute; top:100%; left:0; right:0; z-index:20; margin-top:2px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  max-height:220px; overflow:auto; box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.sb-symbol-result{
  padding:7px 10px; font-size:12px; cursor:pointer; display:flex; justify-content:space-between; gap:10px;
}
.sb-symbol-result:hover{ background:var(--panel2); color:var(--amber); }

.tb-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 16px; margin-bottom:10px; box-shadow:var(--sh-1);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tb-card:hover{ border-color:#2a352d; box-shadow:var(--sh-2); }
.tb-card-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; }
.tb-card-id{ display:flex; gap:10px; align-items:flex-start; }
.tb-icon{
  width:34px; height:34px; border-radius:var(--r-sm); background:var(--panel2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--amber); flex:none;
}
.tb-card-title{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13.5px; }
.tb-card-sub{ font-size:11px; color:var(--dim); margin-top:3px; display:flex; align-items:center; gap:5px; }
.tb-badge{
  font-size:10.5px; color:var(--dim); border:1px solid var(--line-soft); border-radius:var(--r-sm);
  padding:2px 8px; background:var(--panel2); white-space:nowrap;
}
.tb-badge-dir{ color:var(--green); border-color:var(--green-line); background:var(--green-soft); }
.tb-card-actions{ display:flex; gap:8px; align-items:center; }
.tb-card-actions button{ font-size:11px; padding:5px 12px; min-height:auto; }
.tb-stats-row{
  display:flex; gap:26px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft);
}
.tb-stat{ display:flex; flex-direction:column; gap:3px; min-width:90px; }
.tb-stat .l{ font-size:10px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.tb-stat .n{ font-size:13.5px; font-variant-numeric:tabular-nums; }
.tb-card-log{ font-size:11px; color:var(--dim); margin-top:8px; }

/* Details overlay */
.tb-modal-overlay{
  position:fixed; inset:0; background:rgba(4,5,4,.66); z-index:200;
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow-y:auto;
}
.tb-modal{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  width:100%; max-width:760px; padding:18px 20px 22px;
}
.tb-modal-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:10px; }
.tb-modal-close{
  background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:var(--r-sm);
  width:28px; height:28px; cursor:pointer; font-size:14px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.tb-modal-close:hover{ color:var(--ink); border-color:var(--dim2); }
.tb-tabs{ display:flex; gap:20px; border-bottom:1px solid var(--line-soft); margin:16px 0 16px; }
.tb-tab{
  font-size:12.5px; color:var(--dim); padding:6px 8px 9px; cursor:pointer; border-bottom:2px solid transparent;
  border-radius:var(--r-sm) var(--r-sm) 0 0; transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tb-tab:hover{ color:var(--ink-dim); background:rgba(255,255,255,.03); }
.tb-tab.on{ color:var(--ink); border-bottom-color:var(--amber); font-weight:600; background:linear-gradient(180deg, rgba(240,180,41,.07), transparent 85%); }
.tb-metrics-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px 18px;
}
.tb-metric{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.tb-metric .l{ font-size:10.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.05em; }
.tb-metric .v{ font-size:13.5px; font-variant-numeric:tabular-nums; word-break:break-word; }
.tb-params-head{
  font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim);
  border-left:2px solid var(--amber); padding-left:8px; margin:20px 0 14px;
}
.tb-orders-table{ width:100%; border-collapse:collapse; font-size:12px; }
.tb-orders-table th{ text-align:left; color:var(--dim); font-weight:500; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:6px 8px; border-bottom:1px solid var(--line); }
/* Roomier columns: headers never wrap onto two rows (Net P&L etc.); the wrapper scrolls sideways instead. */
.tb-orders-table th{ white-space:nowrap; padding:10px 14px; }
.tb-orders-table td{ padding:12px 14px; }
.tb-orders-table td:nth-child(1), .tb-orders-table td:nth-child(7){ white-space:nowrap; }

/* Pill-shaped primary button for "+ Create New Bot" */
/* Same look as the active "Trading Bots" sub-tab pill (flat amber, 999px radius, 12.5px type),
   2px shorter than the tab (38px -> 36px). */
button.primary.sb-pill-btn{
  background:var(--amber); color:var(--amber-ink); border:1px solid var(--amber); box-shadow:none;
  border-radius:999px; font-size:12.5px; font-weight:600; padding:6px 15px; min-height:36px; line-height:1.2;
}
button.primary.sb-pill-btn:hover{ background:var(--amber); filter:brightness(1.08); box-shadow:none; }

@media (max-width:640px){
  .tb-card-actions{ width:100%; }
  .tb-card-actions button{ flex:1; }
  .tb-stats-row{ gap:16px; }
  .tb-modal{ padding:16px; }
}

/* ---- Live / Demo Trading panel: compact settings row + single arm row ----
   The five settings (risk, timeframe, daily target, max daily loss, trade mode) used to be
   five stacked full-height fields; they now sit in one auto-fitting grid (2–3 columns on a
   phone, one row on a wide screen). The arm switch and Start button share one row. */
.fu-live-settings{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px 14px;
  margin:14px 0 12px; align-items:end;
}
.fu-live-settings .field{ min-width:0; max-width:none; margin:0; }
.fu-live-settings .mode-toggle{ align-self:flex-start; }
.fu-live-settings .mode-btn{ min-height:var(--touch-target); }
.fu-live-status{ margin:0 0 4px; max-width:none; }
/* Live/Demo on-off switch (pill + round thumb). The real <input type=checkbox role=switch> is visually hidden but stays
   focusable, so keyboard and screen readers work; the track/thumb are drawn from its :checked state. */
.switch-row{
  display:flex; align-items:center; gap:14px; cursor:pointer; min-height:var(--touch-target);
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-md); padding:10px 14px;
}
.switch-row:hover{ border-color:#33443a; }
.switch-row:has(input:checked){ border-color:var(--green-line); background:var(--green-soft); }
.switch{ position:relative; flex:0 0 auto; width:52px; height:30px; display:inline-block; }
.switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.switch-track{
  position:absolute; inset:0; border-radius:999px; border:2px solid var(--dim); background:transparent;
  transition:background .18s ease, border-color .18s ease;
}
.switch-thumb{
  position:absolute; top:50%; left:4px; width:20px; height:20px; border-radius:50%; background:var(--dim);
  transform:translateY(-50%); transition:transform .18s ease, background .18s ease;
}
.switch input:checked + .switch-track{ background:var(--green); border-color:var(--green); }
.switch input:checked + .switch-track .switch-thumb{ background:var(--bg); transform:translate(20px, -50%); }
.switch input:focus-visible + .switch-track{ outline:2px solid var(--amber); outline-offset:2px; }
.switch-text{ min-width:0; font-size:13px; color:var(--ink); }
.switch-text b{ display:block; }
.switch-sub{ display:block; margin-top:2px; font-size:11.5px; color:var(--dim); white-space:normal; overflow-wrap:break-word; }
@media (prefers-reduced-motion: reduce){ .switch-track, .switch-thumb{ transition:none; } }

/* Check / cross icons in the approve-reject explanation (see explanationHtml in futures-ui.js). */
:is(#panelFutures, #panelUtilities) .fu-explain .ex-ok{ color:var(--green); }
:is(#panelFutures, #panelUtilities) .fu-explain .ex-no{ color:var(--red); }


/* =====================================================================
   Smart Bots — create form (sbf-*)
   Presentation only. Structure: status card -> config cards (Account,
   Market, Strategy, Risk & position, Exit management) -> rules -> CTA.
   Mobile-first single column; 2-up from 720px; 12-col from 1180px.
   ===================================================================== */
.sb-intro{ font-size:13px; line-height:1.65; color:var(--dim); max-width:82ch; margin:0 0 16px; }

.sbf{ --sbf-gap:14px; width:100%; max-width:100%; display:flex; flex-direction:column; gap:var(--sbf-gap); min-width:0; }
.sbf *, .sbf *::before, .sbf *::after{ box-sizing:border-box; }
.sbf button > *{ pointer-events:none; }   /* delegated handlers read e.target — keep it the <button> itself */

.sbf-head{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; }
.sbf-title{ margin:0; font-family:var(--disp); font-size:16px; font-weight:700; letter-spacing:.01em; }
.sbf-back{ font-size:12px; padding:0 14px; gap:6px; }

/* ---- cards ---- */
.sbf-card{ background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; min-width:0; }
.sbf-sec{
  display:flex; align-items:center; gap:8px; margin:0 0 14px;
  font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim);
}
.sbf-sec::before{ content:""; width:3px; height:12px; border-radius:2px; background:var(--amber); flex:none; }

.sbf-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sbf-gap); }
.sbf-stack{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.sbf-fields{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); min-width:0; }
.sbf-field--wide{ grid-column:1 / -1; }
@media (min-width:720px){
  .sbf-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-flow:dense; }
  .sbf-c-risk{ grid-column:1 / -1; }
}
@media (min-width:1180px){
  .sbf-grid{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .sbf-c-account{ grid-column:span 5; }
  .sbf-c-market{ grid-column:span 7; }
  .sbf-c-strategy{ grid-column:span 4; }
  .sbf-c-risk{ grid-column:span 5; }
  .sbf-c-exit{ grid-column:span 3; }
}

/* ---- account status card ---- */
.sbf-card--acct{ padding:16px 18px; }
.sbf-acct{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:16px 32px; }
.sbf-acct-id, .sbf-acct-bal{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.sbf-eyebrow{ font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.sbf-acct-name{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--disp); font-size:18px; font-weight:700; color:var(--ink); }
.sbf-acct-sub{ font-size:12px; color:var(--dim); }
.sbf-env{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; border:1px solid;
}
.sbf-env--live{ color:var(--green); border-color:var(--green-line); background:var(--green-soft); }
.sbf-env--demo{ color:var(--amber); border:1px dashed var(--amber-dim); background:rgba(240,180,41,.08); }
.sbf-acct-value{ font-family:var(--mono); font-size:clamp(26px, 6vw, 32px); font-weight:700; line-height:1.1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink); }
.sbf-acct[data-state="ok"] .sbf-acct-value{ color:var(--green); }
.sbf-acct-note{ font-size:12px; color:var(--red); line-height:1.4; max-width:36ch; }
.sbf-acct-status{ display:flex; align-items:center; gap:10px; }
.sbf-chip{
  display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:0 12px; border-radius:999px;
  font-size:12px; font-weight:600; color:var(--dim); border:1px solid var(--line); background:var(--panel); white-space:nowrap;
}
.sbf-chip--ok{ color:var(--green); border-color:var(--green-line); background:var(--green-soft); }
.sbf-chip--error, .sbf-chip--nocred{ color:var(--red); border-color:var(--red-line); background:var(--red-soft); }
.sbf-chip--loading .icon{ animation:sbfSpin 1s linear infinite; }
.sbf-icon-btn{
  width:var(--touch-target); height:var(--touch-target); flex:none; display:inline-flex; align-items:center; justify-content:center;
  font-size:17px; color:var(--ink-dim); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  cursor:pointer; transition:color .15s, border-color .15s, background .15s;
}
.sbf-icon-btn--sm{ width:28px; height:28px; font-size:14px; border-radius:var(--r-sm, 6px); }
.sbf-icon-btn:hover{ color:var(--amber); border-color:var(--amber-dim); background:rgba(240,180,41,.06); }
.sbf-icon-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.sbf-icon-btn:disabled{ cursor:progress; opacity:.6; }
.sbf-acct[data-state="loading"] .sbf-icon-btn .icon{ animation:sbfSpin 1s linear infinite; }
@keyframes sbfSpin{ to{ transform:rotate(360deg); } }
@media (max-width:719px){
  .sbf-acct{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .sbf-acct-status{ justify-content:space-between; }
}

/* ---- labels, inputs, selects ---- */
.sbf-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.sbf-label{
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0;
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); cursor:default;
}
.sbf-tag{
  font-size:10px; font-weight:500; letter-spacing:.03em; text-transform:none; color:var(--dim);
  border:1px solid var(--line); border-radius:999px; padding:1px 8px; white-space:nowrap;
}
.sbf-tag--req{ color:var(--amber); border-color:var(--amber-dim); }
.sbf-hint{ margin:0; font-size:12px; line-height:1.55; color:var(--dim); }
.sbf-accent{ color:var(--amber); }

.sbf-input{
  position:relative; display:flex; align-items:center; min-width:0; min-height:var(--touch-target);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color .15s, box-shadow .15s;
}
.sbf-input:hover{ border-color:#33443a; }
.sbf-input:focus-within{ border-color:var(--amber); box-shadow:0 0 0 3px rgba(240,180,41,.16); }
.sbf-input input, .sbf-input input[type=number], .sbf-input input[type=text]{
  flex:1; min-width:0; width:100%; height:42px; min-height:0; padding:0 12px; border:0; border-radius:var(--r-md);
  background:transparent; color:var(--ink); font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums;
}
/* The wrapper (.sbf-input) draws the one border + focus ring. The global input rules in components.css
   (inset shadow, focus ring, hover fill, red invalid ring) were ALSO landing on the bare <input> inside
   it, which is what showed up as a faint second box inside the field. Neutralise every state on the
   inner input so only the wrapper's border is visible. Covers Trading pair search, Margin, Leverage,
   Grid levels, Take profit / Stop loss, and the Grid opportunities fields. */
.sbf-input input,
.sbf-input input:hover,
.sbf-input input:focus,
.sbf-input input:focus-visible,
.sbf-input input:invalid,
.sbf-input input:invalid:not(:placeholder-shown),
.sbf-input input[aria-invalid="true"],
.sbf-input input[type=number],
.sbf-input input[type=number]:hover,
.sbf-input input[type=number]:focus,
.sbf-input input[type=text],
.sbf-input input[type=text]:hover,
.sbf-input input[type=text]:focus{
  outline:none; border:0; box-shadow:none; background:transparent;
}
.sbf-input input::placeholder{ color:var(--dim2); text-transform:none; }
.sbf-unit{ padding-right:12px; font-family:var(--mono); font-size:12px; color:var(--dim); white-space:nowrap; pointer-events:none; }
.sbf-input-ic{ margin-left:12px; font-size:16px; color:var(--dim); }
.sbf-input-ic + input{ padding-left:8px; }
/* invalid: red border + "!" badge so state isn't colour-only */
.sbf-input:has(input:invalid){ border-color:var(--red); }
.sbf-input:has(input:invalid)::after{
  content:"!"; position:absolute; top:-8px; right:10px; width:16px; height:16px; border-radius:50%;
  background:var(--red); color:#fff; font-size:11px; font-weight:700; line-height:16px; text-align:center;
}
.sbf-input:has(input:invalid):focus-within{ box-shadow:0 0 0 3px var(--red-soft); }
.sbf-input input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
.sbf-input input[type=number]::-webkit-inner-spin-button, .sbf-input input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }

.sbf-select{ position:relative; }
.sbf-select select{
  appearance:none; -webkit-appearance:none; width:100%; min-height:var(--touch-target); padding:0 40px 0 12px;
  background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--mono); font-size:14px; cursor:pointer; box-shadow:var(--inset-press);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sbf-select select:hover{ border-color:#33443a; background:var(--panel-hi); }
.sbf-select select:focus, .sbf-select select:focus-visible{ outline:none; border-color:var(--amber); box-shadow:var(--inset-press), var(--focus-ring); }
.sbf-select > .icon{ position:absolute; right:14px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--dim); font-size:16px; }

/* ---- segmented controls ----
   Same visual language as the global .seg/.seg-btn in components.css
   (gradient active fill, layered shadow, inner highlight); kept as its
   own class here because the Smart Bots form markup (sbfSegBtn()) wires
   up aria-pressed rather than an .is-active class. */
.sbf-seg{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; padding:4px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-btn);
  box-shadow:var(--inset-press);
}
.sbf-seg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:0; min-height:var(--touch-target); padding:0 10px;
  border:1px solid transparent; border-radius:var(--r-sm); background:transparent; color:var(--dim);
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.sbf-seg-btn:hover{ color:var(--ink); background:rgba(255,255,255,.045); }
.sbf-seg-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.sbf-seg-btn .icon-check{ display:none; }
.sbf-seg-btn[aria-pressed="true"]{
  background:var(--amber-grad); color:var(--amber-ink); font-weight:700; border-color:var(--amber-edge);
  box-shadow:var(--sh-1), var(--inset-hi-strong);
}
.sbf-seg-btn[aria-pressed="true"] .icon-check{ display:inline-block; }
.sbf-seg-btn[data-dir="LONG"][aria-pressed="true"]{ background:linear-gradient(180deg, #2d5940, var(--green-soft)); background-color:var(--green-soft); color:var(--green); border-color:var(--green-line); }
.sbf-seg-btn[data-dir="SHORT"][aria-pressed="true"]{ background:linear-gradient(180deg, #5a2d38, var(--red-soft)); background-color:var(--red-soft); color:var(--red); border-color:var(--red-line); }

/* ---- % of balance slider ---- */
.sbf-pct{ display:flex; align-items:center; gap:14px; }
.sbf-range{ flex:1; min-width:0; height:44px; accent-color:var(--amber); cursor:pointer; }
.sbf-input--pct{ width:104px; flex:none; }

/* ---- pair search + selected pair ---- */
.sbf-search{ position:relative; }
.sbf .sb-symbol-results{ max-height:min(320px, 50vh); border-radius:var(--r-md); box-shadow:0 10px 26px rgba(0,0,0,.5); background:var(--panel-hi); }
.sbf .sb-symbol-result{ min-height:44px; align-items:center; padding:8px 12px; font-family:var(--mono); font-size:13px; }
.sbf .sb-symbol-result + .sb-symbol-result{ border-top:1px solid var(--line-soft); }
.sbf-pair-card{
  display:flex; align-items:center; justify-content:space-between; gap:6px 12px; flex-wrap:wrap; padding:10px 12px;
  background:var(--green-soft); border:1px solid var(--green-line); border-radius:var(--r-md);
}
.sbf-pair-sym{ font-family:var(--mono); font-size:15px; font-weight:700; color:var(--ink); }
.sbf-pair-meta{ font-size:12px; color:var(--dim); }
.sbf-note{
  display:flex; align-items:flex-start; gap:8px; padding:10px 12px; font-size:12.5px; line-height:1.55; color:var(--dim);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
}
.sbf-note .icon{ margin-top:.2em; color:var(--dim); }
.sbf-note strong{ color:var(--ink); }
.sbf-note--block{ display:block; }
.sbf-mini-btn{ min-height:32px !important; padding:0 12px !important; font-size:11.5px !important; margin-left:6px; }

/* ---- estimate + recovery (grid only) ---- */
.sbf-est{ font-size:13px; }
.sbf-est-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 16px; padding:7px 0; border-bottom:1px solid var(--line-soft); }
.sbf-est-k{ color:var(--dim); min-width:0; }
.sbf-est-v{ color:var(--ink); text-align:right; margin-left:auto; }
.sbf-est-line{ margin-top:6px; line-height:1.55; }
.sbf-recovery .toggle-check{ font-size:12.5px; }
.sbf-recovery .sbf-hint{ margin:10px 0 0; }
.sbf-recovery .sbf-fields{ margin-top:14px; }

/* ---- strategy rules ---- */
/* ---- strategy rules — collapsible so it doesn't eat vertical space by
   default; same disclosure language as details.ov-block elsewhere. ---- */
.sbf-rules{ background:var(--panel); padding:0; }
.sbf-rules > summary.sbf-sec{
  cursor:pointer; list-style:none; user-select:none; padding:16px; margin:0;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sbf-rules > summary.sbf-sec::-webkit-details-marker{ display:none; }
.sbf-rules > summary.sbf-sec::after{
  content:''; display:inline-block; width:12px; height:12px; margin-left:auto; background-color:var(--dim);
  -webkit-mask:var(--mask-chevron-right) center/contain no-repeat; mask:var(--mask-chevron-right) center/contain no-repeat;
  transition:transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.sbf-rules > summary.sbf-sec:hover{ background:rgba(255,255,255,.03); color:var(--ink); }
.sbf-rules > summary.sbf-sec:hover::after{ background-color:var(--amber); }
.sbf-rules > summary.sbf-sec:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-lg); }
.sbf-rules[open] > summary.sbf-sec::after{ transform:rotate(90deg); background-color:var(--amber); }
.sbf-rules[open] > summary.sbf-sec{ margin-bottom:0; border-bottom:1px solid var(--line-soft); }
.sbf-rules ul{ list-style:none; margin:0; padding:16px; display:grid; gap:12px; max-width:78ch; }
.sbf-rules li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; font-size:13.5px; line-height:1.65; color:var(--ink-dim); }
.sbf-rules li strong{ color:var(--ink); font-weight:600; }
.sbf-rule-ic{ margin-top:.2em; color:var(--amber); font-size:15px; }

/* Estimate + Recovery reuse the .sbf-rules disclosure look; this is just their body padding. */
.sbf-collapse-body{ padding:16px; }
.sbf-est.sbf-rules, .sbf-recovery.sbf-rules{ background:var(--panel2); }
.sbf-on-badge{
  margin-left:8px; padding:1px 7px; border-radius:999px; font-size:10px; font-weight:700;
  letter-spacing:.04em; color:var(--amber); border:1px solid var(--amber);
}

/* ---- CTA ---- */
.sbf-actions{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; }
.sbf-status{ flex:1 1 260px; min-width:0; min-height:20px; font-size:13px; line-height:1.5; color:var(--dim); overflow-wrap:anywhere; }
.sbf-status[data-state="error"]{ color:var(--red); }
.sbf-status[data-state="error"]::before{
  content:""; display:inline-block; width:14px; height:14px; margin-right:6px; vertical-align:-2px; background:currentColor;
  -webkit-mask:var(--mask-alert) center / contain no-repeat; mask:var(--mask-alert) center / contain no-repeat;
}
.sbf-cta{ min-width:220px; min-height:50px; padding:0 28px; font-size:14px; letter-spacing:.05em; text-transform:uppercase; }
.sbf-cta .icon{ font-size:16px; }
.sbf-cta:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.sbf-cta:disabled{ cursor:progress; }

/* ---- small screens ---- */
@media (max-width:719px){
  .sbf-card{ padding:14px; }
  .sbf-input input, .sbf-input input[type=number], .sbf-input input[type=text], .sbf-select select{ font-size:16px; } /* stops iOS zoom-on-focus */
  .sbf-actions{ flex-direction:column; align-items:stretch; }
  .sbf-status{ flex:0 0 auto; }
  .sbf-cta{ width:100%; }
  .sbf-fields{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sbf-field--wide{ grid-column:1 / -1; }
}
@media (max-width:359px){
  .sbf-fields{ grid-template-columns:minmax(0,1fr); }
  .sbf-pct{ flex-direction:column; align-items:stretch; gap:6px; }
  .sbf-input--pct{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .sbf *{ transition:none !important; animation:none !important; }
}

/* ---- Trading Bots list: account balance card (total / in use / free) ---- */
.sb-acct-card{ margin-bottom:14px; }
.sb-acct-head{ display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; margin-bottom:12px; }
.sb-acct-title{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.sb-acct-controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sb-acct-select{ min-width:130px; }
.sb-acct-select select{ width:100%; }
.sb-acct-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.sb-acct-day{ grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:12px; }
.sb-acct-day .ov-value{ display:flex; flex-wrap:wrap; align-items:baseline; row-gap:2px; }
.sb-acct-pos{ color:var(--green); }
.sb-acct-neg{ color:var(--red); }
.sb-acct-card[data-state="loading"] .ov-value{ opacity:.55; }
.sb-acct-card[data-state="nocred"] .ov-value, .sb-acct-card[data-state="error"] .ov-value{ color:var(--dim); }
.sb-acct-free{ color:var(--green); }
.sb-acct-card:not([data-state="ok"]) .sb-acct-free{ color:inherit; }
.sb-acct-bar{ height:6px; margin-top:12px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); overflow:hidden; }
.sb-acct-bar > span{ display:block; height:100%; background:var(--amber-grad, var(--amber)); border-radius:999px; transition:width .3s ease; }
.sb-acct-foot{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-top:6px; font-size:11.5px; color:var(--dim); font-family:var(--mono); }
.sb-acct-sub{ text-transform:none; letter-spacing:0; opacity:.7; }
.sb-acct-note{ margin-top:10px; font-size:12px; line-height:1.4; color:var(--red); }
.sb-acct-note--info{ color:var(--dim); }
@media (max-width:1023px){
  .sb-acct-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* Phones: keep the desktop shape — a compact 2x2 grid of figures, and a two-row
   control strip (exchange + Live/Demo, then status + refresh) — instead of one tall
   column of four cards. */
@media (max-width:719px){
  .sb-acct-card{ padding:14px; }
  .sb-acct-head{ margin-bottom:10px; gap:10px; }
  .sb-acct-controls{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
  .sb-acct-select{ min-width:0; }
  .sb-acct-controls .mode-btn{ padding:6px 12px; }
  .sb-acct-controls .sbf-chip{ justify-self:start; }
  .sb-acct-controls .sbf-icon-btn{ justify-self:end; }
  .sb-acct-grid{ gap:8px; }
  .sb-acct-day{ margin-top:8px; }
  .sb-acct-grid .ov-card{ padding:10px 12px; min-height:0; gap:6px; }
  .sb-acct-grid .ov-label{ font-size:9px; line-height:1.3; }
  .sb-acct-grid .ov-value{ font-size:clamp(15px, 4.8vw, 19px); }
  .sb-acct-sub{ display:block; margin-top:1px; }
  .sb-acct-bar{ margin-top:10px; }
  .sb-acct-foot{ font-size:10.5px; }
  .sb-acct-auto{ display:none; }
}

/* Futures Engine page, phones: the live stat cards (Real Balance, Trades, Gross/Net P&L...)
   and the trade-history totals get the same compact card sizing as the account balance
   card above them, so the whole page reads as one consistent 2-column grid. */
@media (max-width:768px){
  .fu-summary-grid{ margin-top:12px; gap:8px; }
  .fu-summary-grid > .ov-card, .fu-log-stats > .ov-card{ padding:10px 12px; min-height:0; gap:6px; }
  .fu-summary-grid .ov-label, .fu-log-stats .ov-label{ font-size:9px; line-height:1.3; }
  .fu-summary-grid .ov-value, .fu-log-stats .ov-value{ font-size:clamp(15px, 4.8vw, 19px); }
  .fu-log-stats{ gap:8px !important; }
}

/* Trade Log actions: Delete + 3 exports always sit on ONE row (desktop and mobile). */
.log-actions{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; align-items:stretch; margin-bottom:10px; }
.log-actions button{ width:100%; min-width:0; margin:0; padding:9px 6px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.log-actions .log-sel-count{ grid-column:1 / -1; min-height:0; }
.log-actions .log-sel-count:empty{ display:none; }
@media (max-width:480px){
  .log-actions{ gap:6px; }
  .log-actions button{ padding:9px 2px; font-size:10.5px; letter-spacing:0; }
}