/* trade-futures.css — Bitget pixel-match overrides for Futures (Perpetual) mode.
   Every rule scoped under body[data-mode="futures"]. Style only — no DOM/JS changes.
   Brand: long/up cyan #00b7d4, short/down pink #ff3377, accent #00c9c9, bg #0d0f14. Never green. */

/* ---- Pulse numeric font ---- */
@font-face{font-family:'Pulse';src:url('/fonts/pulse-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Pulse';src:url('/fonts/pulse-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Pulse';src:url('/fonts/pulse-semibold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Pulse';src:url('/fonts/pulse-bold.ttf') format('truetype');font-weight:700;font-display:swap}

body[data-mode="futures"]{
  --pulse:'Pulse','Manrope',system-ui,sans-serif;
}

/* Numeric displays -> Pulse + tabular figures */
body[data-mode="futures"] .ta-chg,
body[data-mode="futures"] .ta-levchip,
body[data-mode="futures"] .ta-inp input,
body[data-mode="futures"] .ta-inp .unit,
body[data-mode="futures"] #taTotal,
body[data-mode="futures"] .ta-total strong,
body[data-mode="futures"] #taAvail,
body[data-mode="futures"] .ta-max,
body[data-mode="futures"] .ta-max span,
body[data-mode="futures"] .ta-funding b,
body[data-mode="futures"] #taFundVal,
body[data-mode="futures"] #taFundCd,
body[data-mode="futures"] .ta-bkrow,
body[data-mode="futures"] .ta-bkrow .px,
body[data-mode="futures"] .ta-bkrow .qt,
body[data-mode="futures"] .ta-bkmid strong,
body[data-mode="futures"] .ta-bkmid small,
body[data-mode="futures"] .ta-bkratio,
body[data-mode="futures"] .ta-bkratio .b,
body[data-mode="futures"] .ta-bkratio .s,
body[data-mode="futures"] .ta-group button,
body[data-mode="futures"] .ta-submit small,
body[data-mode="futures"] .ta-stats b{
  font-family:var(--pulse);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---- leverage / margin-mode row ---- */
body[data-mode="futures"] .ta-lev-row{
  padding:0 0 .45rem;
  gap:.4rem;
}
body[data-mode="futures"] .ta-iso,
body[data-mode="futures"] .ta-levchip,
body[data-mode="futures"] .ta-sbox{
  font-size:11.5px;
  font-weight:600;
  padding:0 .55rem;
  height:28px;
  border-radius:6px;
  background:var(--panel2);
  border:1px solid var(--line);
}
body[data-mode="futures"] .ta-iso .car{font-size:.6rem;margin-left:1px}
body[data-mode="futures"] .ta-levchip{color:var(--accent);font-weight:700;letter-spacing:.2px}
body[data-mode="futures"] .ta-sbox{width:28px;padding:0;font-size:11px}

/* ---- Open / Close side tabs ---- */
body[data-mode="futures"] .ta-side{
  height:32px;
  border-radius:6px;
  margin-bottom:.5rem;
  background:var(--panel2);
}
body[data-mode="futures"] .ta-side button{
  font-size:13px;
  font-weight:700;
  padding:0;
}
/* futures side is Open/Close — Bitget shows a plain segmented pill, not a coloured fill */
body[data-mode="futures"] .ta-side button{color:var(--dim)}
body[data-mode="futures"] .ta-side button.active{
  background:var(--bg);
  color:var(--txt);
  border-radius:5px;
  margin:2px;
}

/* ---- order type + price / qty inputs ---- */
body[data-mode="futures"] .ta-otype{
  height:38px;
  border-radius:6px;
  font-size:13px;
  margin-bottom:.45rem;
  background:var(--panel2);
}
body[data-mode="futures"] .ta-inp{
  height:40px;
  border-radius:6px;
  padding:.28rem .6rem;
  margin-bottom:.42rem;
  background:var(--panel2);
}
body[data-mode="futures"] .ta-inp .lab{font-size:10px;top:.28rem;left:.6rem}
body[data-mode="futures"] .ta-inp input{
  font-size:13.5px;
  font-weight:600;
  padding-top:.62rem;
}
body[data-mode="futures"] .ta-inp .unit{font-size:12px;font-weight:600;padding-top:.42rem}
body[data-mode="futures"] .ta-inp .bbo{font-size:11.5px;padding:.26rem .5rem;border-radius:6px}

/* slider a touch tighter */
body[data-mode="futures"] .ta-slider{margin-bottom:.7rem}

/* ---- TP/SL ---- */
body[data-mode="futures"] .ta-tpsl{font-size:12px;margin-bottom:.5rem;gap:.4rem}
body[data-mode="futures"] .ta-tpsl-inputs .ta-inp{margin-bottom:.4rem}

/* ---- totals / available ---- */
body[data-mode="futures"] .ta-total{font-size:12px;margin-bottom:.35rem}
body[data-mode="futures"] .ta-total strong{font-size:12.5px}
body[data-mode="futures"] .ta-avail{font-size:11.5px}

/* ---- Max line + Long / Short submit buttons ---- */
body[data-mode="futures"] .ta-max{
  font-size:11px;
  margin-bottom:.32rem;
  color:var(--dim);
}
body[data-mode="futures"] .ta-submit{
  height:38px;
  padding:0;
  line-height:1.15;
  font-size:13.5px;
  font-weight:700;
  border-radius:8px;
  margin-bottom:.1rem;
  background:var(--buy);
  color:#04222a;
}
body[data-mode="futures"] .ta-submit.sell{
  background:var(--sell);
  color:#3a0014;
}

/* ---- right column: funding-rate block ---- */
body[data-mode="futures"] .ta-funding{
  font-size:10.5px;
  line-height:1.45;
  color:var(--dim);
  margin-bottom:.35rem;
}
body[data-mode="futures"] .ta-funding b{font-size:11px;font-weight:700;color:var(--txt)}

/* ---- order book ---- */
body[data-mode="futures"] .ta-book{font-size:11px}
body[data-mode="futures"] .ta-bkhead{font-size:10px;color:var(--dim)}
body[data-mode="futures"] .ta-bkrow{
  font-size:11px;
  line-height:1.55;
  padding:1.6px 2px;
  font-weight:500;
}
body[data-mode="futures"] .ta-bkrow .bar{opacity:.14}
body[data-mode="futures"] .ta-bkmid{padding:.3rem 2px;gap:.35rem}
body[data-mode="futures"] .ta-bkmid strong{font-size:14px;font-weight:700}
body[data-mode="futures"] .ta-bkmid small{font-size:10.5px}

/* B/S ratio bar — glide smoothly between JS ticks */
body[data-mode="futures"] .ta-bkratio{font-size:10.5px;margin-top:.4rem;gap:.35rem}
body[data-mode="futures"] .ta-bktrack{height:4px;border-radius:3px;background:var(--sell)}
body[data-mode="futures"] .ta-bkfill{
  background:var(--buy);
  transition:width .42s ease;
}
@media (prefers-reduced-motion:no-preference){
  body[data-mode="futures"] .ta-bkfill{transition:width .42s ease}
}

/* depth grouping chips */
body[data-mode="futures"] .ta-group button{font-size:10.5px;padding:.18rem .5rem;border-radius:6px}

/* ---- keep columns exactly equal ---- */
body[data-mode="futures"] .ta-term{
  grid-template-columns:1fr 1fr;   /* equal columns — order book gets its length from row count, not width */
  gap:.6rem;
  padding:.15rem .7rem .5rem;
}

/* no horizontal overflow from long book numbers */
body[data-mode="futures"] .ta-bkrow .px,
body[data-mode="futures"] .ta-bkrow .qt{white-space:nowrap}
body[data-mode="futures"] .ta-book{min-width:0;overflow:hidden}