/* trade-margin.css — Bitget pixel-match overrides for Margin mode.
   Every rule scoped under body[data-mode="margin"].
   Brand lock: buy/up cyan #00b7d4, sell/down pink #ff3377, accent #00c9c9, bg #0d0f14. Never green. */

/* ---------- Pulse numeral 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="margin"]{
  --m-num:'Pulse','Manrope',system-ui,sans-serif;
}

/* every numeric display in the margin terminal uses Pulse + tabular figures */
body[data-mode="margin"] .ta-pairsel,
body[data-mode="margin"] .ta-subline .ta-chg,
body[data-mode="margin"] .ta-inp input,
body[data-mode="margin"] .ta-inp .unit,
body[data-mode="margin"] .ta-total,
body[data-mode="margin"] .ta-total strong,
body[data-mode="margin"] .ta-avail,
body[data-mode="margin"] .ta-max,
body[data-mode="margin"] .ta-bkhead,
body[data-mode="margin"] .ta-bkrow,
body[data-mode="margin"] .ta-bkrow .px,
body[data-mode="margin"] .ta-bkrow .qt,
body[data-mode="margin"] .ta-bkmid strong,
body[data-mode="margin"] .ta-bkmid small,
body[data-mode="margin"] .ta-bkratio,
body[data-mode="margin"] .ta-group button,
body[data-mode="margin"] .ta-stats b{
  font-family:var(--m-num);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------- density: match Bitget mobile app ---------- */
body[data-mode="margin"] .ta-term{
  grid-template-columns:50% 50%;            /* equal columns */
  gap:.55rem;
  padding:.15rem .8rem .5rem;
}

/* pair header change % */
body[data-mode="margin"] .ta-subline .ta-chg{font-size:.8rem;font-weight:600}

/* Buy / Sell segmented (Bitget h36, 8px stack rhythm) */
body[data-mode="margin"] .ta-side{border-radius:8px;margin-bottom:.5rem}
body[data-mode="margin"] .ta-side button{font-size:.8rem;font-weight:700;padding:.5rem 0}

/* order-type select (Bitget "Limit order" row h32, 13px) */
body[data-mode="margin"] .ta-otype{padding:.48rem .6rem;margin-bottom:.5rem;border-radius:8px}
body[data-mode="margin"] .ta-otype select{font-size:.8rem;font-weight:600;font-family:'Manrope',system-ui,sans-serif}
body[data-mode="margin"] .ta-otype .i{width:14px;height:14px;font-size:.6rem}

/* inputs (Bitget floating-label inputs h40, label 10px, value 13px/600) */
body[data-mode="margin"] .ta-inp{padding:.34rem .6rem;margin-bottom:.5rem;border-radius:8px;min-height:40px}
body[data-mode="margin"] .ta-inp .lab{top:.3rem;left:.6rem;font-size:.62rem;font-weight:400}
body[data-mode="margin"] .ta-inp input{font-size:.8rem;font-weight:600;padding-top:.72rem}
body[data-mode="margin"] .ta-inp .unit{font-size:.76rem;font-weight:600;padding-top:.56rem}
body[data-mode="margin"] .ta-inp .bbo{font-size:.7rem;font-weight:600;padding:.28rem .5rem;border-radius:6px}

/* percent slider */
body[data-mode="margin"] .ta-slider{margin:.1rem .1rem .55rem}
body[data-mode="margin"] .ta-slider input::-webkit-slider-thumb{width:12px;height:12px}
body[data-mode="margin"] .ta-notches span{width:6px;height:6px}

/* Total row */
body[data-mode="margin"] .ta-total{padding:.5rem .6rem;margin-bottom:.5rem;font-size:.78rem;border-radius:8px}
body[data-mode="margin"] .ta-total strong{font-weight:600}

/* Available + add-funds */
body[data-mode="margin"] .ta-avail{font-size:.72rem;margin-bottom:.4rem}
body[data-mode="margin"] .ta-avail .plus{width:20px;height:20px;border-radius:5px}
body[data-mode="margin"] .ta-max{font-size:.68rem}

/* submit (Bitget bit-btn-md h40, rounded-lg 8px, text-sm 14px font-medium) */
body[data-mode="margin"] .ta-submit{
  padding:.7rem 0;font-size:.86rem;font-weight:600;border-radius:8px;margin-bottom:.15rem;
  font-family:'Pulse','Manrope',system-ui,sans-serif;
}

/* ---------- right column: order book ---------- */
body[data-mode="margin"] .ta-book{font-size:.72rem}

/* Margin / borrow switch — Bitget bit-switch-small: 25 x 14.4, label 12px/400, gap 4px, my 8px */
body[data-mode="margin"] .ta-margin-row{
  gap:.28rem;font-size:.75rem;font-weight:400;color:var(--dim);
  padding:.1rem 1rem .3rem;font-family:'Pulse','Manrope',system-ui,sans-serif;
}
body[data-mode="margin"] .ta-margin-row i{
  width:25px;height:15px;border-radius:999px;background:var(--panel2);
  transition:background .2s ease;
}
body[data-mode="margin"] .ta-margin-row i::after{
  width:11px;height:11px;top:2px;left:2px;background:var(--dim);
  transition:left .18s ease,background .18s ease;
}
body[data-mode="margin"] .ta-margin-row.on i{background:var(--buy)}
body[data-mode="margin"] .ta-margin-row.on i::after{left:12px;background:#fff}

/* order-book head + rows (Bitget: head ~10px, rows ~11px tabular) */
body[data-mode="margin"] .ta-bkhead{font-size:.62rem;margin-bottom:.15rem}
body[data-mode="margin"] .ta-bkrows{gap:1px}
body[data-mode="margin"] .ta-bkrow{font-size:.7rem;font-weight:500;padding:1.5px 2px;line-height:1.62}
body[data-mode="margin"] .ta-bkrow .qt{font-weight:500}

/* mid / last price */
body[data-mode="margin"] .ta-bkmid{padding:.3rem 2px}
body[data-mode="margin"] .ta-bkmid strong{font-size:.8rem;font-weight:700}
body[data-mode="margin"] .ta-bkmid small{font-size:.64rem}

/* B/S ratio bar — glides smoothly like Bitget */
body[data-mode="margin"] .ta-bkratio{gap:.3rem;margin-top:.4rem;font-size:.64rem}
body[data-mode="margin"] .ta-bkratio .b,
body[data-mode="margin"] .ta-bkratio .s{font-weight:600}
body[data-mode="margin"] .ta-bktrack{height:4px;border-radius:2px}
body[data-mode="margin"] .ta-bkfill{transition:width .42s ease}

/* group / tick-size selector (Bitget small pill h20 br6 12px) */
body[data-mode="margin"] .ta-group{margin:.4rem 0 0;justify-content:flex-start}
body[data-mode="margin"] .ta-group button{font-size:.66rem;padding:.22rem .5rem;border-radius:6px}

/* ---------- orders section ---------- */
body[data-mode="margin"] .ta-orders-tabs button{font-size:.85rem}
body[data-mode="margin"] .ta-orders-sub{font-size:.76rem}
body[data-mode="margin"] .ta-empty{font-size:.82rem}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  body[data-mode="margin"] .ta-bkfill,
  body[data-mode="margin"] .ta-margin-row i,
  body[data-mode="margin"] .ta-margin-row i::after{transition:none}
}

/* ---------- wide phones (~430px) keep one consistent size ---------- */
@media(min-width:400px){
  body[data-mode="margin"] .ta-inp input{font-size:.82rem}
  body[data-mode="margin"] .ta-bkrow{font-size:.72rem}
}