/* Jadenex trading terminal. Four column desktop layout, stacked on mobile. */
body{overflow-x:hidden}
.t-wrap{
  display:grid;
  grid-template-columns:232px minmax(460px,1fr) 300px;
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"head head head" "mkts main book" "mkts orders orders";
  gap:1px;background:var(--border);border-bottom:1px solid var(--border);
  min-height:calc(100vh - var(--nav));
}
.t-col{background:var(--bg);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.a-head{grid-area:head}.a-mkts{grid-area:mkts}.a-main{grid-area:main}.a-book{grid-area:book}.a-tape{grid-area:tape}.a-orders{grid-area:orders}

/* header */
.t-head{background:var(--bg);display:flex;align-items:stretch;height:58px;border-bottom:0;min-width:0;max-width:100%}
.t-pair{display:flex;align-items:center;gap:10px;padding:0 16px;border-inline-end:1px solid var(--border);cursor:pointer;position:relative;flex:none;min-width:212px}
.t-pair .coin{width:28px;height:28px;font-size:10px}
.t-pair b{font-size:15px;font-weight:600;display:block;line-height:1.2}
.t-pair small{color:var(--muted);font-size:11.5px}
.t-pair .cv{width:13px;height:13px;color:var(--muted);flex:none;margin-inline-start:auto}
.t-stats{display:flex;align-items:center;gap:0;overflow-x:auto;flex:1 1 0;min-width:0;scrollbar-width:none}
.t-stats::-webkit-scrollbar{display:none}
.t-stats .st{padding:0 18px;white-space:nowrap;display:flex;flex-direction:column;justify-content:center;height:100%}
.t-stats .st small{font-size:10.5px;color:var(--muted);margin-bottom:3px;letter-spacing:.01em}
.t-stats .st span{font-size:12.5px;font-weight:500}
.t-stats .price{padding-inline-start:18px;padding-inline-end:22px}
.t-stats .price #s-last{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.t-stats .price #s-lastq{font-size:11px;margin:2px 0 0;color:var(--muted);font-weight:400}
.t-head .tail{display:flex;align-items:center;gap:12px;padding:0 16px;border-inline-start:1px solid var(--border);flex:none}

/* panels */
.panel-h{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 12px;border-bottom:1px solid var(--border);font-size:12px;font-weight:600;flex:none;gap:8px}
.panel-h .muted{font-weight:500;font-size:11px}
.panel-h .grp{height:22px;border:1px solid var(--border2);border-radius:3px;background:var(--bg2);color:var(--text2);font-size:10.5px;padding:0 4px;margin-inline-start:auto;margin-inline-end:6px;outline:0;max-width:96px}
.panel-h .grp:focus{border-color:var(--orange)}
.panel-h .seg2{display:flex;gap:2px}
.panel-h .seg2 button{width:22px;height:20px;border-radius:3px;display:grid;place-items:center;opacity:.45}
.panel-h .seg2 button.on{opacity:1;background:var(--surface2)}
.panel-h .seg2 svg{width:13px;height:13px}

/* markets */
.mk-search{padding:8px 10px;flex:none}
.mk-search .search{min-width:0;height:30px;width:100%}
.mk-hdr,.mk-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 62px;align-items:center;gap:6px}
.mk-hdr{padding:5px 12px;font-size:10.5px;color:var(--muted);border-bottom:1px solid var(--border);flex:none}
.mk-hdr span:not(:first-child),.mk-row span:not(:first-child){text-align:end}
.mk-list{flex:1;overflow-y:auto;overflow-x:hidden}
.mk-row{padding:6px 12px;font-size:11.5px;cursor:pointer}
.mk-row:hover{background:var(--surface2)}
.mk-row.active{background:var(--surface2);box-shadow:inset 2px 0 0 var(--orange)}
.mk-row b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-row b small{color:var(--muted);font-weight:500;font-size:10px}

/* chart */
.a-main{display:flex;flex-direction:column}
.chart-wrap{display:flex;flex-direction:column;height:clamp(440px,calc(100vh - var(--nav) - 150px),640px);flex:none;background:var(--bg)}
.ivs{display:flex;align-items:center;gap:2px;height:34px;padding:0 10px;border-bottom:1px solid var(--border);flex:none;overflow-x:auto;scrollbar-width:none}
.ivs::-webkit-scrollbar{display:none}
.ivs button{height:22px;padding:0 9px;border-radius:3px;font-size:11.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.ivs button:hover{color:var(--text)}
.ivs button.on{background:var(--surface2);color:var(--orange)}
.ivs .sp{width:1px;height:14px;background:var(--border);margin:0 6px;flex:none}
.chart{flex:1;position:relative;min-height:0;background:var(--bg)}
.chart>div:not(.ref-tag){position:absolute;inset:0}
.chart-load{display:grid;place-items:center;color:var(--muted2);font-size:12px;background:var(--bg);z-index:0}
.chart iframe{background:var(--bg)!important}

/* order form under the chart, buy and sell side by side */
.ticket{border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);flex:none}
.tk-side{background:var(--bg);padding:12px 14px;min-width:0}
.tk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:8px}
.tk-top b{font-size:13px;font-weight:600}
.tk-top .tabs{display:flex;gap:2px}
.tk-top .tabs button{height:22px;padding:0 8px;border-radius:3px;font-size:11px;color:var(--muted)}
.tk-top .tabs button.on{background:var(--surface2);color:var(--text)}
.tk-f{margin-bottom:8px}
.tk-f .in{display:flex;align-items:center;height:32px;border:1px solid var(--border2);border-radius:var(--r);background:var(--bg2);padding:0 9px;gap:6px}
.tk-f .in:focus-within{border-color:var(--orange)}
.tk-f .in label{font-size:10.5px;color:var(--muted2);flex:none;width:44px}
.tk-f .in input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:12.5px;font-family:var(--mono);text-align:end}
.tk-f .in span{font-size:10.5px;color:var(--muted);flex:none}
.tk-pct{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0}
.tk-pct button{height:22px;border:1px solid var(--border2);border-radius:3px;font-size:10.5px;color:var(--muted2)}
.tk-pct button:hover{color:var(--text);border-color:var(--muted2)}
.tk-meta{font-size:10.5px;color:var(--muted);display:grid;gap:4px;margin-bottom:10px}
.tk-meta div{display:flex;justify-content:space-between;gap:8px}
.tk-meta span:last-child{color:var(--text2);font-family:var(--mono)}
.tk-side .btn{width:100%;height:34px;font-size:13px}
.tk-gate{grid-column:1/-1;background:var(--bg);padding:10px 14px;text-align:center;font-size:11.5px;color:var(--muted)}
.tk-gate a{color:var(--orange);font-weight:600}
.tk-gate.good{color:var(--up)}.tk-gate.bad{color:var(--down)}

/* order book / recent trades tab switch */
.side-tabs{display:flex;align-items:stretch;height:38px;border-bottom:1px solid var(--border);flex:none}
.side-tabs button{flex:1;height:100%;font-size:12.5px;font-weight:500;color:var(--muted);background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.side-tabs button:hover{color:var(--text2)}
.side-tabs button.on{color:var(--text);border-color:var(--orange)}
/* the inactive pane is fully hidden so only the chosen tab shows */
.a-book [data-pane][hidden]{display:none!important}

/* order book */
.ob{flex:1;display:flex;flex-direction:column;min-height:0}
.ob-hdr{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);padding:5px 12px;font-size:10.5px;color:var(--muted);border-bottom:1px solid var(--border);flex:none;gap:6px}
.ob-hdr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-hdr span:not(:first-child){text-align:end}
.ob-side{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border2) transparent;contain:content}
.ob-side::-webkit-scrollbar{width:5px}
.ob-side::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.ob.only-bids .asks,.ob.only-asks .bids{display:none}
.ob-row[hidden]{display:none}
#ob-depth{font-size:10px;margin-inline-start:6px}
.ob-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);gap:6px;padding:0 12px;font-size:11px;line-height:19px;position:relative;cursor:pointer}
.ob-row:hover{background:var(--surface2)}
.ob-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-row span:not(:first-child){text-align:end;color:var(--text2)}
.ob-row:after{content:"";position:absolute;top:0;bottom:0;inset-inline-end:0;width:var(--w);opacity:.13;pointer-events:none}
.ob-row.a span:first-child{color:var(--down)}.ob-row.a:after{background:var(--down)}
.ob-row.b span:first-child{color:var(--up)}.ob-row.b:after{background:var(--up)}
.ob-mid{display:flex;align-items:center;gap:8px;padding:7px 12px;border-block:1px solid var(--border);background:var(--surface);flex:none}
.ob-mid b{font-size:15px;font-weight:600}
.ob-mid .arw{width:11px;height:11px}
.ob-mid small{color:var(--muted);font-size:10.5px;margin-inline-start:auto;text-align:end}

/* trades tape */
.tp-hdr,.tp-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 58px;gap:6px}
.tp-hdr{padding:5px 12px;font-size:10.5px;color:var(--muted);border-bottom:1px solid var(--border);flex:none}
.tp-hdr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-hdr span:not(:first-child),.tp-row span:not(:first-child){text-align:end}
.tp-list{flex:1;overflow:hidden;min-height:0}
.tp-row{padding:0 12px;font-size:11px;line-height:19px}
.tp-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.tp-row span:first-child{font-weight:500}

/* bottom orders */
.a-orders{min-height:230px}
.ord-body{max-height:340px}
.ord-tabs{display:flex;align-items:center;height:34px;border-bottom:1px solid var(--border);padding:0 6px;flex:none;gap:2px;overflow-x:auto;scrollbar-width:none}
.ord-tabs::-webkit-scrollbar{display:none}
.ord-tabs button{height:34px;padding:0 12px;font-size:12px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.ord-tabs button.on{color:var(--text);border-color:var(--orange)}
.ord-tabs .right{margin-inline-start:auto;display:flex;gap:8px;align-items:center;padding-inline-end:8px}
.ord-body{flex:1;overflow:auto;min-height:0}
.ord-body table{width:100%;border-collapse:collapse}
.ord-body th{position:sticky;top:0;background:var(--bg);font-size:10.5px;color:var(--muted);font-weight:500;padding:7px 14px;text-align:end;white-space:nowrap;z-index:1;border-bottom:1px solid var(--border)}
.ord-body td{padding:7px 14px;text-align:end;font-size:11.5px;white-space:nowrap;border-bottom:1px solid var(--border)}
.ord-body th:first-child,.ord-body td:first-child{text-align:start}
.ord-empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:12.5px}
.ord-empty a{color:var(--orange);font-weight:600}

/* pair menu */
.pair-menu{position:absolute;top:100%;inset-inline-start:0;width:320px;max-width:92vw;background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);box-shadow:0 22px 44px -22px #000;z-index:40;display:none;max-height:440px;overflow:auto}
.t-pair.open .pair-menu{display:block}


/* Desktop: the chart and ticket column sets the middle row height. The book, the
   tape and the market rail fill that height and scroll inside it instead of
   stretching the row with their own content. */
@media (min-width:761px){
  .a-book,.a-mkts{contain:size}
  .a-book .ob,.a-book .tape-pane,.a-mkts .mk-list{min-height:0}
}

/* the buy/sell toggle is a phone control, hidden on desktop where both forms show */
.mtoggle{display:none}

/* ---- responsive ---- */
@media (max-width:1400px){
  .t-wrap{grid-template-columns:210px minmax(400px,1fr) 280px}
  .t-stats .st{padding:0 12px}
  .t-stats .st.opt{display:none}
}
@media (max-width:1180px){
  .t-wrap{grid-template-columns:minmax(380px,1fr) 280px;grid-template-areas:"head head" "main book" "orders orders"}
  .a-mkts{display:none}
}
@media (max-width:900px){
  .t-wrap{grid-template-columns:minmax(0,1fr) 250px;grid-template-areas:"head head" "main book" "orders orders"}
}
@media (max-width:760px){
  /* HTX style phone layout: header, chart, one order form, then the book and list stacked and self scrolling. */
  .t-wrap{display:flex;flex-direction:column;height:auto;min-height:0;gap:0;background:var(--bg);border-bottom:0;width:100%;max-width:100%}
  .t-col{border-bottom:1px solid var(--border);overflow:hidden;width:100%;max-width:100%;flex:0 0 auto}
  .a-head{order:1}.a-main{order:2;display:flex;flex-direction:column}.a-book{order:3}.a-orders{order:4}.a-mkts{order:5}
  .chart-wrap,.ticket,.tk-side,.ob,.mk-list,.tp-list,.ord-body,.tape-pane{width:100%;max-width:100%;min-width:0}
  .t-head{height:auto;flex-direction:column;align-items:stretch}
  .t-pair{border-inline-end:0;border-bottom:1px solid var(--border);min-width:0;padding:11px 14px}
  .t-pair b{font-size:16px}.t-pair small{font-size:12px}
  .t-stats{padding:9px 0;border-bottom:1px solid var(--border);gap:0;min-height:48px;align-items:center}
  .t-stats .st{padding:0 14px}
  .t-stats .st small{font-size:11px}.t-stats .st span{font-size:13px}
  .t-stats .price #s-last{font-size:20px}
  .ivs{height:46px}.ivs button{height:34px;font-size:13px;padding:0 12px}
  .chart-wrap{height:340px}
  /* one order form at a time, chosen by a buy/sell toggle */
  .ticket{grid-template-columns:1fr;gap:0}
  .mtoggle{display:flex;gap:0;border-bottom:1px solid var(--border)}
  .mtoggle button{flex:1;height:42px;font-size:14px;font-weight:600;color:var(--muted);background:var(--bg)}
  .mtoggle button.buy.on{color:#fff;background:var(--up)}
  .mtoggle button.sell.on{color:#fff;background:var(--down)}
  .ticket .tk-side{display:none;border:0}
  .ticket.show-buy .tk-side.buy,.ticket.show-sell .tk-side.sell{display:block}
  .tk-side{padding:14px}
  .tk-f .in{height:40px}.tk-f .in label{font-size:12px;width:48px}.tk-f .in input{font-size:14px}.tk-f .in span{font-size:12px}
  .tk-pct button{height:34px;font-size:12px}
  .tk-meta{font-size:12px}
  .tk-side .btn{height:44px;font-size:15px}
  .tk-gate{font-size:12px;padding:11px 14px}
  /* order book and trades share tabs, each side scrolls inside a set height */
  .side-tabs{height:46px}.side-tabs button{font-size:14px}
  .ob-hdr,.tp-hdr{font-size:11px;padding:7px 14px}
  .ob-row,.tp-row{font-size:12px;line-height:22px;padding:0 14px}
  .a-book{display:flex;flex-direction:column}
  .ob{display:flex;flex-direction:column}
  .ob-side{flex:none;height:230px;max-height:230px;overflow-y:auto}
  .ob-side.asks{justify-content:flex-start}
  .ob-mid{padding:9px 14px}.ob-mid b{font-size:16px}
  .tape-pane{display:flex;flex-direction:column}
  .tape-pane .tp-list{flex:none;height:340px;max-height:none;overflow-y:auto}
  .panel-h{height:44px;font-size:13px}
  .panel-h .grp{height:32px;font-size:12px}
  /* bottom orders and the market rail */
  .ord-tabs{height:46px}.ord-tabs button{height:46px;font-size:13px}
  .ord-body{max-height:320px}.ord-body th,.ord-body td{padding:9px 14px;font-size:12px}
  .mk-search{padding:10px}.mk-hdr,.mk-row{font-size:12px}
  .mk-row{padding:9px 12px}.mk-list{max-height:70vh}
}
@media (max-width:400px){
  .t-stats .st{padding:0 11px}
  .tk-f .in label{width:42px}
}

.mk-row b.mkc{display:flex;align-items:center;gap:7px;overflow:hidden}
.mk-row b.mkc .coin{flex:none}
.t-pair img.coin{width:28px;height:28px}