/* trade-spot.css — Bitget pixel-match overrides for Spot mode.
   Every rule scoped under body[data-mode="spot"]. Only Spot is affected.
   Colors: buy/up #00b7d4, sell/down #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}

/* =========================================================
   MODE TABS  (Bitget mobile: 15px, active 600 + 20px underline)
   ========================================================= */
body[data-mode="spot"] .ta-tabs{gap:1.15rem;padding:.7rem .9rem .1rem}
body[data-mode="spot"] .ta-tabs a,
body[data-mode="spot"] .ta-tabs button[data-mode]{font-size:.9rem;font-weight:600;padding-bottom:.5rem}
body[data-mode="spot"] .ta-tabs button[data-mode].active,
body[data-mode="spot"] .ta-tabs a.active{font-weight:600}
body[data-mode="spot"] .ta-tabs button[data-mode].active::after,
body[data-mode="spot"] .ta-tabs a.active::after{left:50%;right:auto;transform:translateX(-50%);width:18px;height:2px;border-radius:2px}
body[data-mode="spot"] .ta-tabs .ta-candle{font-size:1rem;color:var(--dim)}

/* =========================================================
   PAIR HEADER
   ========================================================= */
body[data-mode="spot"] .ta-pairbar{padding:.55rem .9rem .5rem}
body[data-mode="spot"] .ta-pairsel{font-size:1.1rem;font-weight:700;gap:.3rem;
  font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums}
body[data-mode="spot"] .ta-pairsel .car{font-size:.7rem}
body[data-mode="spot"] .ta-subline{gap:.4rem}
body[data-mode="spot"] .ta-chg{font-size:.78rem;font-weight:600;
  font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums}
body[data-mode="spot"] .ta-chg.up{color:var(--buy)}
body[data-mode="spot"] .ta-chg.dn{color:var(--sell)}
body[data-mode="spot"] .ta-tc{border-radius:6px;padding:2px}
body[data-mode="spot"] .ta-tc button{font-size:.8rem;font-weight:600;padding:.3rem .68rem;border-radius:5px}

/* =========================================================
   TERMINAL GRID
   ========================================================= */
body[data-mode="spot"] .ta-term{grid-template-columns:1fr 1fr;gap:.75rem;padding:.15rem .9rem .4rem}

/* ---- Buy / Sell segmented ---- */
body[data-mode="spot"] .ta-side{border-radius:4px;margin-bottom:.5rem}
body[data-mode="spot"] .ta-side button{font-size:.84rem;font-weight:600;padding:.42rem 0}

/* ---- order type ---- */
body[data-mode="spot"] .ta-otype{border-radius:4px;padding:.45rem .6rem;margin-bottom:.4rem}
body[data-mode="spot"] .ta-otype .i{width:13px;height:13px;font-size:.6rem}
body[data-mode="spot"] .ta-otype select{font-size:.82rem;font-weight:600}
body[data-mode="spot"] .ta-otype .car{font-size:.62rem}

/* ---- price / qty inputs ---- */
body[data-mode="spot"] .ta-inp{border-radius:4px;padding:.32rem .6rem;margin-bottom:.4rem;min-height:42px}
body[data-mode="spot"] .ta-inp .lab{top:.3rem;left:.6rem;font-size:.62rem}
body[data-mode="spot"] .ta-inp input{font-size:.86rem;font-weight:600;padding-top:.62rem;
  font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums}
body[data-mode="spot"] .ta-inp input::placeholder{font-weight:500}
body[data-mode="spot"] .ta-inp .unit{font-size:.74rem;font-weight:500;padding-top:.5rem}
body[data-mode="spot"] .ta-inp .bbo{font-size:.68rem;font-weight:600;padding:.26rem .5rem;border-radius:4px}

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

/* ---- total ---- */
body[data-mode="spot"] .ta-total{border-radius:4px;padding:.46rem .6rem;margin-bottom:.4rem;font-size:.8rem}
body[data-mode="spot"] .ta-total strong{font-weight:700;
  font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums}

/* ---- available ---- */
body[data-mode="spot"] .ta-avail{font-size:.72rem;margin-bottom:.4rem}
body[data-mode="spot"] .ta-avail #taAvail{font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums}
body[data-mode="spot"] .ta-avail .plus{width:20px;height:20px;border-radius:4px}

/* ---- submit ---- */
body[data-mode="spot"] .ta-submit{border-radius:4px;padding:.62rem 0;font-size:.9rem;font-weight:700}

/* =========================================================
   ORDER BOOK  (Bitget mobile: ~11px rows, dense)
   ========================================================= */
body[data-mode="spot"] .ta-book{font-size:.72rem}
body[data-mode="spot"] .ta-bkhead{font-size:.64rem;margin-bottom:.25rem}
body[data-mode="spot"] .ta-bkrows{gap:0}
body[data-mode="spot"] .ta-bkrow{padding:2.1px 2px;font-size:.7rem;font-weight:500;line-height:1.5;
  font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums}
body[data-mode="spot"] .ta-bkrow .qt{color:var(--txt);font-weight:500}
body[data-mode="spot"] .ta-bkrow .bar{opacity:.14}

body[data-mode="spot"] .ta-bkmid{padding:.3rem 2px;gap:.35rem}
body[data-mode="spot"] .ta-bkmid strong{font-size:.92rem;font-weight:700;
  font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums}
body[data-mode="spot"] .ta-bkmid small{font-size:.62rem;
  font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums}

/* ---- B/S ratio bar — smooth glide ---- */
body[data-mode="spot"] .ta-bkratio{gap:.3rem;margin-top:.4rem;font-size:.64rem}
body[data-mode="spot"] .ta-bkratio .b,
body[data-mode="spot"] .ta-bkratio .s{font-weight:600;
  font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums}
body[data-mode="spot"] .ta-bktrack{height:3px;border-radius:2px}
body[data-mode="spot"] .ta-bkfill{transition:width .45s ease}

/* ---- depth group ---- */
body[data-mode="spot"] .ta-group{margin:.4rem 0 0;justify-content:flex-start}
body[data-mode="spot"] .ta-group button{font-size:.66rem;padding:.2rem .48rem;border-radius:4px;
  font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums}

/* =========================================================
   ORDERS SECTION
   ========================================================= */
body[data-mode="spot"] .ta-orders{padding:.7rem .9rem 0}
body[data-mode="spot"] .ta-orders-tabs{gap:1.1rem}
body[data-mode="spot"] .ta-orders-tabs button{font-size:.82rem;font-weight:600}
body[data-mode="spot"] .ta-orders-tabs button.active{font-weight:700}
body[data-mode="spot"] .ta-orders-sub{font-size:.74rem;margin:.7rem 0 .2rem}
body[data-mode="spot"] .ta-empty{font-size:.78rem;padding:2rem 0 2.2rem}

/* =========================================================
   CHART STATS
   ========================================================= */
body[data-mode="spot"] .ta-stats b{font-size:.82rem;font-weight:600;
  font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  body[data-mode="spot"] .ta-bkfill{transition:none}
}
@media(min-width:430px){
  body[data-mode="spot"] .ta-bkrow{font-size:.72rem}
  body[data-mode="spot"] .ta-inp input{font-size:.9rem}
}