/* trade-app.css — Bitget-style Spot / Futures / Margin terminal for Bitegit
   Brand: buy/up cyan #00b7d4, sell/down pink #ff3377, accent #00c9c9, bg #0d0f14 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* "Pulse" is Bitget's own type family — they use it for ALL UI text, not just numerals.
   @font-face for Pulse is already declared in nav-drawer.css, which trade.html also loads. */

:root{
  --bg:#0d0f14; --panel:#14161c; --panel2:#1a1d25; --line:rgba(255,255,255,.07);
  --txt:#eef2f8; --dim:#8a94a6; --buy:#00b7d4; --sell:#ff3377; --accent:#00c9c9;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);font-family:'Pulse','Manrope',system-ui,sans-serif;overflow-x:hidden}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.hidden{display:none!important}
[hidden]{display:none!important}
button{font-family:inherit;cursor:pointer}
a{color:inherit}

/* ---- top mode tabs ---- */
.ta-tabs{display:flex;align-items:center;gap:.65rem;padding:.85rem 1rem .3rem;border-bottom:1px solid var(--line);background:var(--bg)}
.ta-tabs a,.ta-tabs button[data-mode]{position:relative;text-decoration:none;color:var(--dim);font-size:1rem;font-weight:600;padding:0 0 .5rem;background:none;border:none}
.ta-tabs button[data-mode="spot"],.ta-tabs button[data-mode="margin"]{padding-bottom:.75rem}
.ta-tabs button[data-mode].active,.ta-tabs a.active{color:var(--txt);font-weight:600}
.ta-tabs button[data-mode].active::after,.ta-tabs a.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:18px;height:2px;border-radius:2px;background:var(--accent)}
/* Futures / Spot / Margin share equal width so the row reads evenly
   (matches Bitget's mode row proportions); P2P + the menu button stay
   their natural size at the end of the row. */
.ta-tabs button[data-mode]{flex:1 1 0;text-align:center;padding-left:0;padding-right:0}

.ta-candle{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex-shrink:0;
  background:rgba(255,255,255,.06);border-radius:8px;
  font-size:1.1rem;line-height:1;color:var(--txt);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}

/* ---- pair header ---- */
.ta-pairbar{display:flex;align-items:flex-start;justify-content:space-between;padding:.7rem 1rem .55rem;gap:.75rem}
.ta-pairbar .pl{display:flex;flex-direction:column;gap:3px;min-width:0}
.ta-pairsel{display:flex;align-items:center;gap:.35rem;background:none;border:none;color:var(--txt);font-size:1.06rem;font-weight:800;padding:0}
.ta-pairsel .car{color:var(--dim);font-size:.8rem}
.ta-pairbar select{position:absolute;opacity:0;width:150px;height:34px;left:1rem;top:2.7rem}
.ta-subline{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.ta-lastpx{font-size:1.15rem;font-weight:800;font-family:'Pulse','Manrope',system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ta-lastpx.up{color:var(--buy)} .ta-lastpx.dn{color:var(--sell)}
.ta-perp{color:var(--dim);font-size:.78rem;font-weight:600}
.ta-chg{font-size:.82rem;font-weight:700}
.ta-chg.up{color:var(--buy)} .ta-chg.dn{color:var(--sell)}
.ta-pairbar .pr{display:flex;align-items:center;gap:.9rem;flex-shrink:0}
.ta-tc{display:flex;background:var(--panel);border-radius:8px;padding:2px}
.ta-tc button{background:none;border:none;color:var(--dim);font-size:.82rem;font-weight:700;padding:.34rem .7rem;border-radius:6px}
.ta-tc button.active{background:var(--panel2);color:var(--txt)}

/* ---- futures leverage row ---- */
.ta-lev-row{display:flex;align-items:center;gap:.4rem;padding:0 0 .45rem}
.ta-iso,.ta-levchip,.ta-sbox{background:var(--panel);border:1px solid var(--line);color:var(--txt);font-size:.8rem;font-weight:700;padding:.4rem .6rem;border-radius:7px;display:flex;align-items:center;gap:.3rem}
.ta-iso .car{color:var(--dim);font-size:.65rem}
.ta-levchip{color:var(--accent)}
.ta-sbox{width:32px;justify-content:center;color:var(--dim)}

/* ---- terminal 2-col ---- */
.ta-term{display:grid;grid-template-columns:50% 50%;gap:.6rem;padding:.2rem .8rem .5rem}

/* left: order form */
.ta-side{display:flex;background:var(--panel);border-radius:10px;overflow:hidden;margin-bottom:.55rem}
.ta-side button{flex:1;border:none;background:transparent;color:var(--dim);font-weight:700;font-size:.82rem;padding:.46rem 0}
.ta-side button.active[data-side=buy]{background:var(--buy);color:#04222a}
.ta-side button.active[data-side=sell]{background:var(--sell);color:#3a0014}

.ta-otype{display:flex;align-items:center;gap:.4rem;background:var(--panel);border-radius:9px;padding:.55rem .7rem;margin-bottom:.5rem;position:relative}
.ta-otype .i{width:15px;height:15px;border-radius:50%;border:1px solid var(--dim);color:var(--dim);font-size:.66rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ta-otype select{flex:1;background:none;border:none;color:var(--txt);font-weight:700;font-size:.9rem;appearance:none}
.ta-otype .car{color:var(--dim);font-size:.7rem}

.ta-inp{display:flex;align-items:center;background:var(--panel);border-radius:9px;padding:.4rem .7rem;margin-bottom:.5rem;position:relative}
.ta-inp .lab{position:absolute;top:.32rem;left:.7rem;font-size:.64rem;color:var(--dim)}
.ta-inp input{flex:1;background:none;border:none;color:var(--txt);font-size:.82rem;font-weight:700;padding-top:.7rem;width:100%;min-width:0}
.ta-inp input:disabled{color:var(--dim)}
.ta-inp input::-webkit-outer-spin-button,.ta-inp input::-webkit-inner-spin-button{-webkit-appearance:none}
.ta-inp .unit{color:var(--dim);font-size:.8rem;font-weight:700;padding-top:.5rem}
.ta-inp .bbo{background:var(--panel2);border:1px solid var(--line);color:var(--txt);font-size:.74rem;font-weight:700;padding:.3rem .55rem;border-radius:7px;align-self:center}

.ta-slider{display:flex;align-items:center;gap:0;margin:.15rem .1rem .6rem;position:relative}
.ta-slider input{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--panel2);border-radius:3px;outline:none}
.ta-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--buy);cursor:pointer}
.ta-slider.sell input::-webkit-slider-thumb{background:var(--sell)}
.ta-slider input::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--buy)}
.ta-notches{position:absolute;left:0;right:0;top:50%;display:flex;justify-content:space-between;pointer-events:none}
.ta-notches span{width:7px;height:7px;border-radius:50%;background:var(--panel2);transform:translateY(-50%)}

.ta-total{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-radius:9px;padding:.55rem .7rem;margin-bottom:.5rem;font-size:.86rem}
.ta-total span{color:var(--dim)} .ta-total strong{font-weight:800}

.ta-tpsl{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--dim);margin-bottom:.55rem}
.ta-tpsl input{accent-color:var(--accent)}
.ta-tpsl-inputs{margin-bottom:.2rem}

.ta-avail{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--dim);margin-bottom:.35rem}
.ta-avail .plus{width:22px;height:22px;border-radius:6px;background:#fff;color:#000;border:none;font-weight:800;line-height:1}
.ta-max{font-size:.72rem;color:var(--dim);margin-bottom:.3rem}
.ta-max span{color:var(--txt)}

.ta-submit{width:100%;border:none;border-radius:7px;padding:.4rem 0;font-size:.8rem;font-weight:700;color:#04222a;background:var(--buy);margin-bottom:.15rem}
.ta-submit.sell{background:var(--sell);color:#3a0014}

/* right: order book — stretches to fill the same height as the order
   form on the left (grid already equalizes container height; here we make
   the bid/ask row groups grow into any leftover space instead of leaving
   dead whitespace under the grouping selector) */
.ta-book{display:flex;flex-direction:column;font-size:.74rem;height:100%}
.ta-funding{color:var(--dim);font-size:.64rem;line-height:1.5;margin-bottom:.4rem;text-align:left}
.ta-funding b{color:var(--txt);font-size:.7rem}
.ta-margin-row{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;color:var(--dim);font-size:.8rem;padding:.1rem 1rem .35rem}
.ta-margin-row i{width:34px;height:18px;border-radius:10px;background:var(--panel2);position:relative;display:inline-block}
.ta-margin-row i::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--dim);top:2px;left:2px;transition:.15s}
.ta-margin-row.on i{background:var(--buy)} .ta-margin-row.on i::after{left:18px;background:#fff}
.ta-bkhead{display:flex;justify-content:space-between;color:var(--dim);font-size:.66rem;margin-bottom:.2rem}
.ta-bkrows{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-height:0}
.ta-bkrow{position:relative;display:flex;align-items:center;justify-content:space-between;flex:1 1 0;padding:1.5px 2px;line-height:1.6;font-weight:600;font-size:.7rem;cursor:pointer}
.ta-bkrow .bar{position:absolute;right:0;top:0;bottom:0;opacity:.16;transition:width .45s ease}
.ta-bkrow.ask .px{color:var(--sell)} .ta-bkrow.ask .bar{background:var(--sell)}
.ta-bkrow.bid .px{color:var(--buy)} .ta-bkrow.bid .bar{background:var(--buy)}
.ta-bkrow .qt{color:var(--txt);position:relative;z-index:1}
.ta-bkrow .px{position:relative;z-index:1}
.ta-bkmid{display:flex;align-items:baseline;gap:.4rem;padding:.35rem 2px}
.ta-bkmid strong{color:var(--buy);font-size:.82rem;font-weight:800}
.ta-bkmid small{color:var(--dim);font-size:.66rem}
.ta-bkratio{display:flex;align-items:center;gap:.3rem;margin-top:.35rem;font-size:.66rem}
.ta-bkratio .b{color:var(--buy);font-weight:700} .ta-bkratio .s{color:var(--sell);font-weight:700}
.ta-bktrack{flex:1;height:5px;border-radius:3px;background:var(--sell);overflow:hidden;position:relative}
.ta-bkfill{position:absolute;left:0;top:0;bottom:0;background:var(--buy);transition:width .45s cubic-bezier(.4,0,.2,1)}
.ta-group{position:relative;display:inline-flex;align-items:center;margin:.4rem 0 0}
.ta-group select{appearance:none;-webkit-appearance:none;background:var(--panel);border:1px solid var(--line);color:var(--txt);font-family:inherit;font-size:.7rem;font-weight:600;padding:.28rem 1.35rem .28rem .55rem;border-radius:6px}
.ta-group .car{position:absolute;right:7px;pointer-events:none;font-size:.55rem;color:var(--dim)}
.ta-group button{background:var(--panel2);border:1px solid var(--line);color:var(--dim);font-size:.68rem;padding:.2rem .5rem;border-radius:6px}
.ta-group button.active{color:var(--txt);border-color:var(--accent)}

/* ---- chart view ---- */
.ta-chartview{padding:.4rem .8rem 0}
.ta-stats{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem;padding:.4rem .2rem .7rem}
.ta-stats div{display:flex;flex-direction:column;gap:2px}
.ta-stats span{color:var(--dim);font-size:.68rem}
.ta-stats b{font-size:.86rem;font-weight:700}
#taChartFrame{width:100%;height:460px;border:0;border-radius:10px;background:var(--bg);display:block}

/* ---- orders section ---- */
.ta-orders{border-top:1px solid var(--line);margin-top:.4rem;padding:.85rem 1rem 0}
.ta-orders-tabs{display:flex;gap:1.3rem;align-items:center}
.ta-orders-tabs button{background:none;border:none;color:var(--dim);font-size:.92rem;font-weight:600;padding:0}
.ta-orders-tabs button.active{color:var(--txt);font-weight:800}
.ta-orders-sub{display:flex;align-items:center;justify-content:space-between;margin:.9rem 0 .3rem;font-size:.8rem;color:var(--dim)}
.ta-orders-sub label{display:flex;gap:.4rem;align-items:center}
.ta-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2.4rem 0 2.8rem;color:var(--dim);font-size:.86rem}
.ta-empty svg{width:34px;height:34px;opacity:.5}

/* ---- leverage bottom sheet ---- */
.ta-sheet-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998}
.ta-sheet{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--panel);border-radius:16px 16px 0 0;padding:1.1rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.ta-sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.ta-sheet-h strong{font-size:1rem}
.ta-sheet-h button{background:none;border:none;color:var(--dim);font-size:1rem}
.ta-sheet-lev{text-align:center;font-size:1.6rem;font-weight:800;color:var(--accent);margin-bottom:.6rem}
#taLevSlider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:var(--panel2);outline:none;margin-bottom:1rem}
#taLevSlider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent)}
.ta-lev-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.1rem}
.ta-lev-quick button{background:var(--panel2);border:1px solid var(--line);color:var(--txt);font-weight:700;font-size:.85rem;padding:.55rem 0;border-radius:8px}
.ta-lev-quick button.active{border-color:var(--accent);color:var(--accent)}
.ta-sheet-ok{width:100%;border:none;border-radius:10px;padding:.85rem 0;font-size:1rem;font-weight:800;color:#04222a;background:var(--accent)}

/* ---- login nudge ---- */
.ta-nudge{position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--panel2);border:1px solid var(--line);color:var(--txt);font-size:.85rem;font-weight:600;padding:.7rem 1.1rem;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.25s;z-index:9999;white-space:nowrap}
.ta-nudge.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ta-nudge a{color:var(--accent);font-weight:800;text-decoration:none;margin-left:.4rem}

@media (prefers-reduced-motion:reduce){
  .ta-bkfill,.ta-nudge,.ta-margin-row i::after{transition:none}
}
@media(min-width:560px){ .ta-term{grid-template-columns:1fr 1fr} #taChartFrame{height:520px} }