/* Extracted from exchange.html */

:root{
  --bg:#0a0c10;--surface:#111318;--surface2:#181b22;--surface3:#1e2230;
  --border:#1e2330;--border2:#252a3a;
  --accent:#f0c040;--accent2:#3de8a0;--accent3:#5b8af5;
  --text:#e8eaf0;--muted:#6b7280;--danger:#f05060;
  --green:#3de8a0;--green-bg:rgba(61,232,160,.08);
  --red:#f05060;--red-bg:rgba(240,80,96,.08);
  --shadow:0 20px 48px rgba(0,0,0,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--text);font-family:'Manrope',sans-serif;font-size:13px;display:flex;flex-direction:column;overflow-x:hidden}

/* NAV */
nav{display:flex;align-items:center;padding:0 1rem;height:56px;border-bottom:1px solid rgba(37,42,58,.9);background:rgba(10,12,16,.84);backdrop-filter:blur(16px);z-index:200;gap:1rem;flex-shrink:0;position:sticky;top:0;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.logo{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1rem;color:var(--accent);letter-spacing:.05em;text-decoration:none;white-space:nowrap}
.logo span{color:var(--accent2)}
.nav-tabs{display:flex;gap:.25rem;flex-shrink:0}
.nav-tab{padding:.35rem .8rem;border-radius:999px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:.76rem;font-weight:700;
         cursor:pointer;text-decoration:none;font-family:'Manrope',sans-serif;transition:all .12s;white-space:nowrap}
.nav-tab.active{background:linear-gradient(180deg,rgba(91,138,245,.14),rgba(91,138,245,.06));border-color:rgba(91,138,245,.35);color:var(--text)}
.nav-tab:hover:not(.active){color:var(--text)}
.ticker-bar{display:flex;align-items:center;gap:1.5rem;flex:1;justify-content:center;overflow:hidden;min-width:0}
.tk-pair{font-family:'JetBrains Mono',monospace;font-size:.88rem;font-weight:700;color:var(--text);white-space:nowrap}
.tk-price{font-family:'JetBrains Mono',monospace;font-size:.85rem;font-weight:700;white-space:nowrap}
.tk-price.up{color:var(--green)}.tk-price.down{color:var(--red)}.tk-price.flat{color:var(--muted)}
.tk-item{display:flex;flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap}
.tk-lbl{font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tk-val{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700}
.tk-val.up{color:var(--green)}.tk-val.down{color:var(--red)}.tk-val.flat{color:var(--muted)}
.nav-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0;position:relative}
.nav-btn{padding:.36rem .72rem;border-radius:999px;border:1px solid var(--border);background:rgba(24,27,34,.88);color:var(--muted);font-size:.68rem;font-weight:700;cursor:pointer;text-decoration:none;font-family:'Manrope',sans-serif;transition:all .12s;white-space:nowrap}
.nav-btn:hover{border-color:var(--accent3);color:var(--text);transform:translateY(-1px)}
.nav-btn.primary{border-color:rgba(61,232,160,.35);background:rgba(61,232,160,.08);color:var(--accent2)}
.nav-user-wrap{display:flex;align-items:center;gap:.55rem;cursor:pointer}
.nav-user-meta{text-align:right}
.nav-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;color:#000;border:2px solid transparent;transition:border-color .12s}
.nav-user{font-size:.68rem;color:var(--text);font-weight:700}
.nav-email{font-size:.56rem;color:var(--muted);font-family:'JetBrains Mono',monospace}
.nav-user-wrap:hover .nav-avatar{border-color:var(--accent)}
.user-menu{display:none;position:absolute;top:44px;right:0;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;
           box-shadow:0 10px 28px rgba(0,0,0,.45);z-index:400}
.user-menu.open{display:block}
.menu-head{padding:.85rem 1rem;border-bottom:1px solid var(--border);background:var(--surface2)}
.menu-name{font-size:.82rem;font-weight:700;color:var(--text)}
.menu-mail{font-size:.6rem;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:.14rem}
.menu-body{padding:.4rem}
.menu-btn{width:100%;padding:.58rem .75rem;border:none;border-radius:8px;background:transparent;color:var(--text);font-family:'Manrope',sans-serif;font-size:.76rem;font-weight:700;
          cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;transition:background .12s;text-decoration:none}
.menu-btn:hover{background:var(--surface2)}
.menu-btn.danger{color:var(--danger)}
.menu-sep{height:1px;background:var(--border);margin:.35rem .4rem}

/* LAYOUT 4 columnas */
.layout{display:grid;grid-template-columns:200px 210px 1fr 256px;grid-template-rows:auto minmax(0,1fr);height:calc(100vh - 56px);overflow:hidden}
.exchange-hero{grid-column:1 / -1;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:.9rem;padding:.9rem;border-bottom:1px solid var(--border);background:
  radial-gradient(circle at top left, rgba(91,138,245,.1), transparent 35%),
  radial-gradient(circle at bottom right, rgba(61,232,160,.08), transparent 32%),
  linear-gradient(180deg, rgba(17,19,24,.96), rgba(10,12,16,.98))}
.hero-card{background:rgba(17,19,24,.9);border:1px solid rgba(37,42,58,.92);border-radius:18px;padding:1rem;min-height:118px;box-shadow:var(--shadow)}
.hero-kicker{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.hero-pair{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.hero-symbol{font-size:1.55rem;font-weight:800;letter-spacing:.01em}
.hero-symbol small{font-size:.72rem;color:var(--muted);font-family:'JetBrains Mono',monospace}
.hero-price{font-family:'JetBrains Mono',monospace;font-size:1.8rem;font-weight:700;color:var(--text)}
.hero-price.up{color:var(--green)}.hero-price.down{color:var(--red)}.hero-price.flat{color:var(--text)}
.hero-change{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .5rem;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:700;margin-top:.45rem}
.hero-change.up{background:var(--green-bg);color:var(--green)}.hero-change.down{background:var(--red-bg);color:var(--red)}.hero-change.flat{background:rgba(107,114,128,.1);color:var(--muted)}
.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-top:.85rem}
.hero-metric{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:.7rem .75rem}
.hero-metric-label{font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.hero-metric-value{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;color:var(--text)}
.hero-metric-value.green{color:var(--green)}.hero-metric-value.red{color:var(--red)}.hero-metric-value.accent{color:var(--accent)}
.hero-balance-list{display:flex;flex-direction:column;gap:.55rem}
.hero-balance-row{display:flex;align-items:center;justify-content:space-between;padding:.55rem .7rem;border-radius:10px;background:var(--surface2);border:1px solid var(--border)}
.hero-balance-row strong{font-family:'JetBrains Mono',monospace;font-size:.86rem}
.hero-balance-row span{font-size:.6rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.hero-actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem}
.hero-action{padding:.52rem .82rem;border-radius:12px;border:1px solid var(--border);background:rgba(24,27,34,.9);color:var(--text);font-size:.7rem;font-weight:800;text-decoration:none;transition:all .12s}
.hero-action:hover{border-color:var(--accent3);color:var(--accent3);transform:translateY(-1px)}
.hero-action.primary{background:linear-gradient(135deg, rgba(91,138,245,.92), rgba(61,232,160,.84));border-color:transparent;color:#071017}
.hero-action.primary:hover{color:#071017}
.hero-note{font-size:.65rem;color:var(--muted);line-height:1.5}
.hero-trust{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem}
.hero-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .62rem;border-radius:999px;border:1px solid rgba(37,42,58,.88);background:rgba(24,27,34,.86);
  color:var(--text);font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hero-pill::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent2);box-shadow:0 0 10px rgba(61,232,160,.5)}

/* PAIRS SIDEBAR */
.pairs-sidebar{border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--surface)}
.sb-head{padding:.55rem .65rem;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0}
.sb-title{font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.38rem}
.sb-search{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:.28rem .5rem;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:.67rem;outline:none;transition:border-color .12s}
.sb-search:focus{border-color:var(--accent3)}
.sb-search::placeholder{color:var(--muted)}
.pairs-list{overflow-y:auto;flex:1}
.pairs-list::-webkit-scrollbar{width:2px}
.pairs-list::-webkit-scrollbar-thumb{background:var(--border2)}
.pair-item{padding:.45rem .65rem;border-bottom:1px solid rgba(30,35,48,.5);cursor:pointer;transition:background .08s}
.pair-item:hover{background:var(--surface2)}
.pair-item.active{background:var(--surface3);border-left:2px solid var(--accent);padding-left:.5rem}
.pi-row1{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.pi-name{font-size:.73rem;font-weight:800;color:var(--text)}
.pair-item.active .pi-name{color:var(--accent)}
.pi-chg{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700}
.pi-chg.up{color:var(--green)}.pi-chg.down{color:var(--red)}.pi-chg.flat{color:var(--muted)}
.pi-row2{display:flex;align-items:center;justify-content:space-between}
.pi-price{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--muted)}
.pi-price.on{color:var(--text)}
.pi-vol{font-family:'JetBrains Mono',monospace;font-size:.56rem;color:var(--muted)}

/* ORDER BOOK */
.orderbook{border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--surface)}
.pnl-hdr{padding:.48rem .7rem;border-bottom:1px solid var(--border);background:var(--surface2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.pnl-ttl{font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ob-col-h{display:grid;grid-template-columns:1fr 1fr 1fr;padding:.26rem .7rem;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0}
.ob-ch{font-size:.54rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent3)}
.ob-ch:nth-child(2){text-align:center}.ob-ch:last-child{text-align:right}
.ob-asks{overflow:hidden;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.ob-bids{overflow:hidden;flex:1;display:flex;flex-direction:column}
.ob-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:.12rem .7rem;position:relative;cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.62rem;transition:filter .08s}
.ob-row:hover{filter:brightness(1.25)}
.ob-bar{position:absolute;top:0;bottom:0;right:0;pointer-events:none;opacity:.1}
.ob-row.ask .ob-bar{background:var(--red)}.ob-row.bid .ob-bar{background:var(--green)}
.ob-p{font-weight:700}
.ob-row.ask .ob-p{color:var(--red)}.ob-row.bid .ob-p{color:var(--green)}
.ob-q{text-align:center;color:var(--text)}.ob-t{text-align:right;color:var(--muted)}
.ob-mid{padding:.32rem .7rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:var(--surface2)}
.ob-mp{font-family:'JetBrains Mono',monospace;font-size:.86rem;font-weight:700}
.ob-mp.up{color:var(--green)}.ob-mp.down{color:var(--red)}.ob-mp.flat{color:var(--muted)}
.ob-mc{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--muted)}

/* CENTER - grA¡fica arriba + panel abajo */
.main-center{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}

/* CHART AREA */
.chart-area{flex-shrink:0;display:flex;flex-direction:column;border-bottom:1px solid var(--border)}
.chart-controls{display:flex;align-items:center;gap:.25rem;padding:.35rem .6rem;background:var(--surface2);border-bottom:1px solid var(--border);flex-shrink:0}
.chart-label{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:.25rem}
.iv-btn{padding:.2rem .45rem;border-radius:3px;border:1px solid transparent;background:transparent;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;cursor:pointer;transition:all .1s}
.iv-btn:hover{color:var(--text)}
.iv-btn.active{background:var(--surface3);border-color:var(--border2);color:var(--accent)}
.chart-info{display:flex;align-items:center;gap:1rem;margin-left:auto}
.ci-item{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--muted)}
.ci-item span{color:var(--text)}
#chart-container{width:100%;height:260px;position:relative}
.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--muted);pointer-events:none}

/* LOWER CENTER - tabs + content */
.lower-center{flex:1;display:flex;flex-direction:column;overflow:hidden}
.c-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0}
.c-tab{padding:.4rem .8rem;border:none;background:transparent;color:var(--muted);font-family:'Manrope',sans-serif;font-size:.68rem;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;transition:all .1s}
.c-tab.active{color:var(--text);border-bottom-color:var(--accent)}
.c-tab:hover:not(.active){color:var(--text)}
.c-body{flex:1;overflow-y:auto;padding:.6rem}
.c-body::-webkit-scrollbar{width:2px}
.c-body::-webkit-scrollbar-thumb{background:var(--border)}

/* Trades */
.tr-hdr{display:grid;grid-template-columns:1fr 1fr 1fr;padding:.18rem 0;border-bottom:1px solid var(--border);margin-bottom:.18rem}
.tr-hdr span{font-size:.54rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent3)}
.tr-hdr span:nth-child(2){text-align:center}.tr-hdr span:last-child{text-align:right}
.tr-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:.16rem 0;border-bottom:1px solid rgba(30,35,48,.35);font-family:'JetBrains Mono',monospace;font-size:.63rem}
.tr-row .tr-p{font-weight:700}
.tr-row.buy .tr-p{color:var(--green)}.tr-row.sell .tr-p{color:var(--red)}
.tr-row .tr-q{text-align:center;color:var(--text)}.tr-row .tr-t{text-align:right;color:var(--muted)}

/* Orders table */
.ot{width:100%;border-collapse:collapse}
.ot th{font-size:.54rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent3);padding:.28rem .3rem;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.ot td{font-family:'JetBrains Mono',monospace;font-size:.62rem;padding:.26rem .3rem;border-bottom:1px solid rgba(30,35,48,.35);vertical-align:middle}
.ot tr:hover td{background:var(--surface2)}
.badge{display:inline-block;padding:.08rem .28rem;border-radius:3px;font-size:.54rem;font-weight:700;letter-spacing:.04em}
.badge.buy{background:var(--green-bg);color:var(--green)}.badge.sell{background:var(--red-bg);color:var(--red)}
.badge.open{background:rgba(91,138,245,.1);color:var(--accent3)}.badge.partial{background:rgba(240,192,64,.1);color:var(--accent)}
.badge.filled{background:var(--green-bg);color:var(--green)}.badge.cancelled{background:rgba(107,114,128,.1);color:var(--muted)}
.btn-x{padding:.1rem .32rem;border-radius:3px;border:1px solid var(--border);background:transparent;color:var(--red);font-size:.58rem;font-weight:700;cursor:pointer;font-family:'Manrope',sans-serif;transition:all .1s}
.btn-x:hover{background:var(--red-bg);border-color:var(--red)}

/* FORM */
.form-panel{display:flex;flex-direction:column;overflow:hidden;background:var(--surface)}
.bs-tabs{display:flex;flex-shrink:0;border-bottom:1px solid var(--border)}
.bs-tab{flex:1;padding:.52rem;border:none;font-family:'Manrope',sans-serif;font-size:.76rem;font-weight:800;cursor:pointer;transition:all .12s;border-bottom:2px solid transparent;background:var(--surface2);color:var(--muted)}
.bs-tab.buy.active{background:rgba(61,232,160,.05);color:var(--green);border-bottom-color:var(--green)}
.bs-tab.sell.active{background:rgba(240,80,96,.05);color:var(--red);border-bottom-color:var(--red)}
.bs-tab:hover:not(.active){color:var(--text)}
.f-scroll{flex:1;overflow-y:auto;padding:.65rem;display:flex;flex-direction:column;gap:.52rem}
.f-scroll::-webkit-scrollbar{width:2px}
.f-scroll::-webkit-scrollbar-thumb{background:var(--border)}
.type-tabs{display:flex;gap:.18rem;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:.16rem}
.type-tab{flex:1;padding:.2rem;border:none;border-radius:3px;background:transparent;color:var(--muted);font-family:'Manrope',sans-serif;font-size:.66rem;font-weight:700;cursor:pointer;transition:all .1s}
.type-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.f-bal{display:flex;justify-content:space-between;align-items:center}
.f-bal-l{font-size:.58rem;color:var(--muted)}
.f-bal-v{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--text);font-weight:700}
.f-bal-s{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--muted)}
.f-grp{display:flex;flex-direction:column;gap:.22rem}
.f-lbl{font-size:.55rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.f-wrap{position:relative}
.f-inp{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:.4rem .65rem;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:.74rem;outline:none;transition:border-color .12s}
.f-inp:focus{border-color:var(--accent3)}
.f-inp::placeholder{color:var(--muted)}
.f-sfx{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--muted);pointer-events:none}
.pct-row{display:flex;gap:.22rem}
.pct-b{flex:1;padding:.2rem;border-radius:3px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;cursor:pointer;transition:all .1s;text-align:center}
.pct-b:hover{border-color:var(--accent3);color:var(--text)}
.f-sum{background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:.42rem .6rem;display:flex;flex-direction:column;gap:.25rem}
.f-sum-r{display:flex;justify-content:space-between}
.f-sum-l{font-size:.58rem;color:var(--muted)}
.f-sum-v{font-family:'JetBrains Mono',monospace;font-size:.63rem;color:var(--text);font-weight:700}
.sub-btn{width:100%;padding:.58rem;border-radius:4px;border:none;font-family:'Manrope',sans-serif;font-size:.8rem;font-weight:800;cursor:pointer;transition:opacity .12s}
.sub-btn.buy{background:var(--green);color:#000}.sub-btn.sell{background:var(--red);color:#fff}
.sub-btn:hover{opacity:.85}.sub-btn:disabled{opacity:.4;cursor:not-allowed}
.f-msg{padding:.32rem .55rem;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.64rem;display:none;line-height:1.5}
.f-msg.error{background:var(--red-bg);border:1px solid rgba(240,80,96,.3);color:var(--red)}
.f-msg.ok{background:var(--green-bg);border:1px solid rgba(61,232,160,.3);color:var(--green)}

.spinner{display:inline-block;width:11px;height:11px;border:2px solid rgba(0,0,0,.2);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:.3rem}
@keyframes spin{to{transform:rotate(360deg)}}
.es{text-align:center;padding:1.5rem;color:var(--muted);font-size:.66rem}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
@media (max-width:1350px){
  .exchange-hero{grid-template-columns:1fr 1fr}
  .hero-card:last-child{grid-column:1 / -1}
}
@media (max-width:1180px){
  .layout{grid-template-columns:180px 1fr 260px;grid-template-rows:auto minmax(0,1fr) minmax(260px,auto)}
  .orderbook{grid-column:1 / 2;grid-row:3}
  .main-center{grid-column:2 / 3}
  .form-panel{grid-column:3 / 4}
  .pairs-sidebar{grid-column:1 / 2}
}
@media (max-width:980px){
  nav{padding:0 .9rem;gap:.75rem;flex-wrap:wrap;height:auto;min-height:56px}
  .nav-tabs{order:3;width:100%;overflow:auto;padding-bottom:.7rem}
  .ticker-bar{order:4;width:100%;justify-content:flex-start;overflow:auto;padding-bottom:.5rem}
  .layout{display:flex;flex-direction:column;height:auto;overflow:visible}
  .exchange-hero{grid-template-columns:1fr;padding:.8rem}
  .pairs-sidebar,.orderbook,.main-center,.form-panel{border-right:none;border-bottom:1px solid var(--border);min-height:auto}
  .pairs-sidebar{max-height:300px}
  .orderbook{max-height:420px}
}
@media (max-width:640px){
  .logo{font-size:.9rem}
  .nav-tab{padding:.32rem .62rem;font-size:.72rem}
  .nav-right{width:100%;justify-content:space-between}
  .nav-user-meta{display:none}
  .nav-btn{padding:.32rem .55rem;font-size:.62rem}
  .hero-grid{grid-template-columns:repeat(2,1fr)}
  .hero-actions .hero-action{width:100%}
  .ot th:nth-child(4), .ot td:nth-child(4),
  .ot th:nth-child(5), .ot td:nth-child(5){display:none}
}