/* NioX trading terminal. Four column desktop layout, stacked on mobile. */
body{overflow-x:hidden}
.t-wrap{
  display:grid;
  grid-template-columns:300px minmax(420px,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));
  max-width:2100px;margin-inline:auto;
}
.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:default;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;overflow-y:hidden;flex:1 1 0;min-width:0;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.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}
/* keep a gap between the label and the base symbol so it reads "Depth BTC" not "DepthBTC" */
.ob-title{display:inline-flex;align-items:baseline;gap:5px;min-width:0}
.ob-title .muted{white-space:nowrap}
.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-cats{display:flex;gap:6px;padding:8px 10px 4px;flex:none}
.mk-cats button{flex:1;min-width:0;height:26px;padding:0 8px;font-size:11px;font-weight:600;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.mk-cats button:hover{color:var(--text)}
.mk-cats button.on{color:var(--text);border-color:var(--border2);background:linear-gradient(180deg,#34373e,#212327)}
.mk-row .coin.flag{object-fit:cover;background:var(--surface2)}
a.mk-row{text-decoration:none;color:inherit;display:grid}
.mk-row .mk-tag{font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border2);border-radius:999px;padding:1px 6px}
.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.7fr) minmax(0,0.95fr) 50px;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:9px 12px;font-size:12.5px;cursor:pointer}
.mk-row .num{font-weight:500}
.mk-row b.mkc .pb{font-weight:600;font-size:13px}
.mk-search input{font-size:13.5px}
.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.mkc .pb{flex:none;white-space:nowrap}
.mk-row b.mkc .pq{flex:none;color:var(--muted);font-weight:500}
.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(360px,calc(100vh - var(--nav) - 250px),500px);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;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.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-wrap{position:relative}
.chart-tools{position:absolute;left:0;top:34px;bottom:0;width:40px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;background:var(--surface);border-right:1px solid var(--border)}
.chart-tools button{width:32px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:10.5px;font-weight:600;color:var(--muted);flex:none}
.chart-tools button:hover{color:var(--text);background:var(--surface2)}
.chart-tools button.on{background:var(--surface2);color:var(--orange)}
.chart-tools button svg{width:15px;height:15px}
.chart-tools .ct-sp{width:22px;height:1px;background:var(--border);margin:3px 0;flex:none}
.chart table,.chart tr,.chart td,.chart th,.chart tbody{padding:0!important;border:0!important;border-spacing:0!important;vertical-align:top!important;background:none!important;white-space:normal!important;line-height:0!important;height:auto}
.chart .tv-lightweight-charts canvas{display:block!important}
.chart-draw{position:absolute;inset:0;z-index:2;touch-action:none}
.chart-wrap.chart-fs{position:fixed;inset:0;z-index:2000;height:100vh;height:100dvh;max-height:none;width:100vw;width:100dvw;padding-bottom:env(safe-area-inset-bottom)}
.chart-wrap.chart-fs .chart-tools{overflow-y:auto;overflow-x:hidden}
body.chart-fs-open{overflow:hidden}
.chart{flex:1;position:relative;min-height:0;background:var(--bg)}
.chart>div:not(.ref-tag){position:absolute;inset:0}
/* the global img,svg,video,canvas max-width:100% rule shrinks lightweight-charts HiDPI canvas
   below the size the library set for the device pixel ratio, which blurs the price and time axes.
   let the chart canvas keep the exact pixel size the library gives it so text stays sharp */
.chart canvas,.chart-wrap canvas{max-width:none!important;max-height:none!important}
.chart-load{display:grid;place-items:center;color:var(--muted2);font-size:12px;background:var(--bg);z-index:0}
.chart-hint{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;background:rgba(19,23,34,.82);border:1px solid rgba(255,255,255,.12);color:#B4BAC4;font-size:11px;font-weight:500;pointer-events:none;opacity:0;transition:opacity .3s;white-space:nowrap}
.chart-hint.show{opacity:1}
.chart-hint svg{width:13px;height:13px;opacity:.8}
.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:100;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:264px minmax(0,1fr) 264px}
  .t-stats .st{padding:0 12px}
  .t-stats .st.opt{display:none}
}
@media (max-width:1180px){
  .t-wrap{grid-template-columns:208px minmax(300px,1fr) 256px;grid-template-areas:"head head head" "mkts main book" "mkts orders orders"}
}
@media (max-width:900px){
  /* 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;overflow:visible}.a-mkts{order:2}.a-main{order:3;display:flex;flex-direction:column}.a-book{order:4}.a-orders{order:5}
  .a-mkts .mk-list{max-height:230px}
  /* the pair menu is absolutely positioned and drops out of the header, so the header must not clip it */
  .t-head{overflow:visible}
  .t-pair.open .pair-menu{max-height:64vh}
  .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:clamp(400px,58vh,470px);overflow:hidden}
  /* 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}

/* user's own resting orders highlighted in the depth ladder */
.ob-row.mine{ box-shadow: inset 2px 0 0 var(--accent, #f5a623); }
.ob-row.mine span:first-child{ font-weight:600; }
.ob-row.mine::after{ content:""; position:absolute; right:2px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--accent, #f5a623); }
.ob-row{ position:relative; }

/* let the market selector dropdown escape the header and sit above the markets rail */
.a-head{overflow:visible;position:relative;z-index:50}
.t-head{overflow:visible;position:relative;z-index:50}
.t-pair.open{position:relative;z-index:100}
.pair-menu{z-index:60}