/* Nova skin — futures-style trading terminal (market-detail page), cloned 1:1 from KCEX's
   own futures exchange layout (https://www.kcex.com/futures/exchange/BTC_USDT — colors,
   spacing and component shapes taken from that page's own computed styles, not approximated).
   Fully independent namespace (.kx-*) — no shared selectors with nova-lk.css or classic's
   lk-desk.css. Order book / order form / blotter are wired to this desk's REAL matching
   engine (services/orderbook.js) — real resting orders, real balances, real fills. The
   leverage/Isolated/Open-Short controls are visual-only for now (spot desk, no margin
   engine yet) — see the view's own doc comment for what's real vs. decorative. */

.kx-term {
  --kx-bg: #0d0e0f;
  --kx-panel: #111214;
  --kx-line: #222429;
  --kx-text: #f2f4f6;
  --kx-faint: #87909f;
  --kx-dim: #6e7583;
  --kx-green: #0bba74;
  --kx-red: #ff4761;
  --kx-green-bg: rgba(1, 170, 120, .15);
  --kx-red-bg: rgba(255, 95, 115, .15);
  --kx-chip: rgba(180, 191, 214, .118);
  --kx-chip-2: rgba(180, 191, 214, .2);
  --kx-gold: #d3af85;
  color: var(--kx-text);
  font-size: 12px;
  line-height: 1.35;
}
.kx-term * { box-sizing: border-box; }
/* This page needs the KCEX terminal to run edge-to-edge, not sit inside the shell's normal
   1600px-max, padded content column (every other nova page wants that padding — this is the
   one screen that doesn't). body.kx-page is only set on this view (site-head's bodyClass), so
   nothing else in the shell is affected. */
body.kx-page .lk-app__body { max-width: none; width: 100%; padding: 0; margin: 0; }
body.kx-page .lk-app__body main { display: block; }
body.kx-page .lk-header { max-width: none; margin: 0; }
/* Match the shell's own background to the terminal's near-black so a page shorter than the
   viewport never shows the shell's lighter --ink charcoal as a visible "grey" gap below it. */
/* :root beats nova-lk.css's html.lk-html body { background: var(--ink) } — otherwise the lighter ink
   showed under short content and behind the phone's toolbar. */
:root:has(body.kx-page), :root body.kx-page, body.kx-page .lk-app, body.kx-page .lk-app__main { background: #0d0e0f; }
/* Phone with the tab bar (signed in): Safari tints the strip under the bar from an opaque bottom
   bar or, failing that, the page background — on the terminal that was the terminal black. So the
   bar is solid here and root/body take the bar's colour; the app shell still fills the screen
   with the terminal black. */
@media (max-width: 767px) {
  :root:has(body.kx-page .m-tabbar), :root body.kx-page:has(.m-tabbar) { background: #151416; }
  body.kx-page .lk-app { min-height: 100dvh; }
  body.kx-page .m-tabbar { background: rgb(27, 26, 28); }
}
.kx-term button { font-family: inherit; cursor: pointer; }
.kx-term input { font-family: inherit; }

/* ---- Instrument bar ---- */
.kx-head {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap; row-gap: 10px;
  background: var(--kx-panel); border-bottom: 1px solid var(--kx-line);
  padding: 18px 24px;
}
.kx-head__sym {
  display: flex; align-items: center; gap: 10px; padding-right: 24px; margin-right: 24px;
  border-right: 1px solid var(--kx-line); position: relative;
}
.kx-head__sym .asset-ico img, .kx-head__sym .asset-ico__fallback { width: 28px; height: 28px; }
.kx-head__sym-btn { display: flex; align-items: center; gap: 10px; background: none; border: none; color: inherit; padding: 0; }
.kx-head__sym-name { font-size: 16px; font-weight: 600; }
.kx-head__sym-name small { color: var(--kx-faint); font-weight: 400; font-size: 12px; margin-left: 2px; }
.kx-head__sym-caret { color: var(--kx-faint); display: flex; }
.kx-head__sym-menu {
  position: absolute; top: 100%; left: 0; margin-top: 10px; width: 480px; max-height: 460px;
  overflow-y: auto; background: #17181a; border: 1px solid var(--kx-line); border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 60; padding: 10px;
}
.kx-head__sym-menu[hidden] { display: none; }
.kx-head__sym-menu::-webkit-scrollbar { width: 6px; }
.kx-head__sym-menu::-webkit-scrollbar-track { background: transparent; }
.kx-head__sym-menu::-webkit-scrollbar-thumb { background: var(--kx-line); border-radius: 3px; }
.kx-head__sym-search { display: flex; align-items: center; gap: 8px; background: var(--kx-chip); border-radius: 8px; padding: 9px 12px; margin-bottom: 8px; color: var(--kx-faint); }
.kx-head__sym-search input { flex: 1; background: none; border: none; color: var(--kx-text); font-size: 12px; outline: none; }
.kx-head__sym-search input::placeholder { color: var(--kx-faint); }

.kx-head__sym-tabs { display: flex; align-items: center; gap: 4px; padding: 0 2px 10px; border-bottom: 1px solid var(--kx-line); margin-bottom: 8px; }
.kx-head__sym-tab { display: flex; align-items: center; gap: 5px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--kx-faint); font-size: 12px; font-weight: 600; padding: 5px 8px 10px; margin-bottom: -10px; }
.kx-head__sym-tab svg { opacity: .8; }
.kx-head__sym-tab:hover { color: var(--kx-text); }
.kx-head__sym-tab.is-active { color: var(--kx-text); border-bottom-color: var(--kx-green); }

.kx-head__sym-cols, .kx-head__sym-row { grid-template-columns: 22px 1fr 84px 74px 64px; }
.kx-head__sym-cols { display: grid; gap: 10px; padding: 0 8px 6px; font-size: 12px; color: var(--kx-faint); }
.kx-head__sym-cols span { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.kx-head__sym-cols span:nth-child(n+3) { justify-content: flex-end; }
.kx-head__sym-cols span:hover { color: var(--kx-text); }
.kx-head__sym-cols span::after { content: ''; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 4px solid currentColor; opacity: .45; }
.kx-head__sym-cols span:first-child::after { content: none; }
.kx-head__sym-cols span.is-sorted.is-desc::after { border-bottom: none; border-top: 4px solid var(--kx-green); opacity: 1; }
.kx-head__sym-cols span.is-sorted.is-asc::after { border-bottom: 4px solid var(--kx-green); opacity: 1; }
.kx-head__sym-list { display: flex; flex-direction: column; }

/* Row background stays plain — only a brief flash (below) marks an actual price tick, polled
   every second from /app/api/markets/tickers while the menu is open (nova-terminal.js). */
.kx-head__sym-row {
  display: grid; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; color: inherit;
  position: relative;
}
@keyframes kx-flash-up { from { background: rgba(11,186,116,.28); } to { background: transparent; } }
@keyframes kx-flash-down { from { background: rgba(255,71,97,.28); } to { background: transparent; } }
.kx-head__sym-row.is-active { background: var(--kx-chip-2); }
.kx-head__sym-row.is-active::before { content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; border-radius: 0 2px 2px 0; background: var(--kx-green); }
.kx-head__sym-row:hover { background: var(--kx-chip); }
.kx-head__sym-row[hidden] { display: none; }
.kx-head__sym-star { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: none; border: none; color: var(--kx-dim); padding: 0; }
.kx-head__sym-star:hover { color: var(--kx-faint); }
.kx-head__sym-star.is-fav { color: var(--kx-green); }
.kx-head__sym-star.is-fav svg { fill: currentColor; stroke: currentColor; }
.kx-head__sym-pair { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kx-head__sym-pair .asset-ico img, .kx-head__sym-pair .asset-ico__fallback { width: 24px; height: 24px; flex-shrink: 0; }
.kx-head__sym-pair strong { font-size: 12px; font-weight: 600; white-space: nowrap; }
.kx-head__sym-pair small { color: var(--kx-faint); font-size: 12px; margin-left: 2px; font-weight: 400; white-space: nowrap; }
.kx-head__sym-px, .kx-head__sym-chg, .kx-head__sym-vol { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.kx-head__sym-px.pos, .kx-head__sym-chg.pos { color: var(--kx-green); }
.kx-head__sym-px.neg, .kx-head__sym-chg.neg { color: var(--kx-red); }
.kx-head__sym-vol { color: var(--kx-text); font-weight: 500; }
.kx-head__sym-empty { padding: 28px 8px; text-align: center; color: var(--kx-faint); font-size: 12px; }

.kx-head__price { padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--kx-line); }
.kx-head__last { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kx-head__last.pos { color: var(--kx-green); }
.kx-head__last.neg { color: var(--kx-red); }
.kx-head__last-abs { font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kx-head__last-abs.pos { color: var(--kx-green); }
.kx-head__last-abs.neg { color: var(--kx-red); }

.kx-head__metrics { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; row-gap: 10px; }
.kx-head__m { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kx-head__m-label { color: var(--kx-faint); font-size: 12px; white-space: nowrap; }
.kx-head__m-val { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kx-head__m-val small { color: var(--kx-faint); font-weight: 400; }
.kx-head__gear { margin-left: auto; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--kx-faint); background: none; border: none; border-radius: 8px; flex-shrink: 0; opacity: .45; cursor: not-allowed; }

/* ---- Body grid: chart+book (row 1) / blotter (row 2, spans chart+book width) / form (spans
   both rows) — this is the actual KCEX structure, not a guess: their own order-form widget is
   one tall panel running the full height of the chart+blotter stack next to it, and Open
   Position/Open Order/etc. is its own row under chart+book, not nested inside the chart panel.
   Nesting the blotter inside the chart column (an earlier version of this file did) is exactly
   what made the chart column taller than the book column with no way to reconcile them.
   align-items: stretch (the grid default, so no override needed) is what actually makes chart
   and book the same height: book has less content, so it just stretches to match whatever
   height the chart column's real content settles on at any given breakpoint — never a hand-picked
   number that only happens to match at one specific width. Fluid by default (safe at any
   width); the chart only pins to an exact 1239×621 in the min-width:1860px block further down. */
.kx-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px 316px; /* form column = kcex order form width */
  grid-template-rows: auto auto;
  grid-template-areas: "chart book form" "blotter blotter form";
  gap: 2px;
  background: var(--kx-bg);
}

/* ---- Chart column ---- */
.kx-chart-col { grid-area: chart; background: var(--kx-panel); min-width: 0; display: flex; flex-direction: column; }

/* Fixed total height (per breakpoint, set below) shared by the candlestick canvas AND the
   oscillator sub-pane together — not the candlestick canvas alone. #kx-chart is flex:1 inside
   this fixed box, so opening an oscillator (which takes a fixed flex-shrink:0 slice of the
   SAME box) automatically shrinks the candlestick canvas to make room — trade-chart.js's own
   ResizeObserver picks up the real size change and redraws at it. Nothing outside this box
   (the indicator bar, the book/form columns) ever moves or grows when an oscillator toggles;
   an earlier version made the oscillator pane its own block after the indicator bar, which grew
   the whole column and, through it, everything symmetric with it. */
.kx-chart-stage { position: relative; display: flex; flex-direction: column; min-height: 0; height: 560px; flex: 0 0 560px; }

/* Base structural CSS for trade-chart.js's own generated toolbar/legend/popovers (classes it
   creates itself in JS — .trade-chart__*). Classic's lk-desk.css has an equivalent block scoped
   to `.lk-app .terminal`; this is the same mechanics retinted to the KCEX palette instead of
   inheriting nova's swapuz-style tokens, since this page's colors are cloned 1:1 from KCEX. */
.kx-term .trade-chart { flex: 1; min-height: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.kx-term .trade-chart__bar { display: flex; align-items: center; min-height: 40px; margin: 0; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid var(--kx-line); }
.kx-term .trade-chart__tools { display: flex; align-items: center; gap: 2px; width: 100%; }
.kx-term .trade-chart__split { width: 1px; height: 14px; margin: 0 8px; background: var(--kx-line); flex-shrink: 0; }
.kx-term .trade-chart__stage { position: relative; flex: 1; min-height: 0; min-width: 0; }
.kx-term .trade-chart__legend { position: absolute; top: 8px; left: 10px; z-index: 4; pointer-events: none; display: flex; flex-direction: column; gap: 5px; max-width: min(920px, calc(100% - 72px)); text-shadow: 0 1px 8px rgba(13,14,15,.82); }
.kx-term .trade-chart__legend-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; font-size: 14px; color: var(--kx-faint); }
.kx-term .trade-chart__legend-pair { color: var(--kx-text); font-weight: 600; font-size: 14px; }
.kx-term .trade-chart__legend-tf { color: var(--kx-text); font-weight: 600; }
.kx-term .trade-chart__legend-when { color: var(--kx-faint); }
.kx-term .trade-chart__legend-ohlc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; font-size: 14px; color: var(--kx-faint); }
.kx-term .trade-chart__legend-ohlc b { font-weight: 600; color: var(--kx-text); }
.kx-term .trade-chart__legend-ohlc.pos b { color: var(--kx-green); }
.kx-term .trade-chart__legend-ohlc.neg b { color: var(--kx-red); }
.kx-term .trade-chart__legend-row--metrics { font-size: 14px; color: var(--kx-faint); }
.kx-term .trade-chart__legend-row--metrics b { font-weight: 600; color: var(--kx-text); }
.kx-term .trade-chart__legend-row--metrics .pos { color: var(--kx-green); }
.kx-term .trade-chart__legend-row--metrics .neg { color: var(--kx-red); }
.kx-term .trade-chart__tf { display: flex; align-items: center; gap: 2px; }
.kx-term .trade-chart__tf-btn { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--kx-faint); height: 26px; padding: 0 10px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; line-height: 1; }
.kx-term .trade-chart__tf-btn:hover { color: var(--kx-text); }
.kx-term .trade-chart__tf-btn.is-active { color: var(--kx-text); border-bottom-color: var(--kx-green); }
.kx-term .trade-chart__iconbtn { width: 28px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--kx-faint); padding: 0; cursor: pointer; }
.kx-term .trade-chart__iconbtn:hover { color: var(--kx-text); }
.kx-term .trade-chart__iconbtn[aria-expanded="true"] { color: var(--kx-text); border-bottom-color: var(--kx-green); }
.kx-term .trade-chart__iconbtn svg { display: block; }
.kx-term .trade-chart__menu { position: relative; }
.kx-term .trade-chart__pop { position: absolute; top: calc(100% + 6px); left: 0; right: auto; z-index: 20; min-width: 148px; padding: 6px; background: #17181a; border: 1px solid var(--kx-line); border-radius: 10px; display: flex; flex-direction: column; gap: 2px; }
.kx-term .trade-chart__pop--set { left: auto; right: 0; }
.kx-term .trade-chart__pop[hidden] { display: none; }

/* "More timeframes" — the quick row only shows a handful of favorites; this groups the full
   Binance-standard ladder (1s through 1M) the same way every real exchange terminal splits it. */
.kx-term .trade-chart__tf-more { display: inline-flex; align-items: center; gap: 5px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--kx-faint); height: 26px; padding: 0 10px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; line-height: 1; }
.kx-term .trade-chart__tf-more:hover { color: var(--kx-text); }
.kx-term .trade-chart__tf-more.is-active { color: var(--kx-text); border-bottom-color: var(--kx-green); }
.kx-term .trade-chart__pop--tf { min-width: 260px; padding: 10px; gap: 10px; }
.kx-term .trade-chart__pop-group { color: var(--kx-faint); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 2px 0; }
.kx-term .trade-chart__pop-row { display: flex; flex-wrap: wrap; gap: 4px; }
.kx-term .trade-chart__pop-row .trade-chart__tf-btn.is-active { color: var(--kx-green); background: transparent; }
.kx-term .trade-chart__choice, .kx-term .trade-chart__toggle { border: 0; background: transparent; color: var(--kx-faint); text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; }
.kx-term .trade-chart__choice:hover, .kx-term .trade-chart__toggle:hover { color: var(--kx-text); background: var(--kx-chip); }
.kx-term .trade-chart__choice.is-active { color: var(--kx-green); }
.kx-term .trade-chart__toggle { display: flex; justify-content: space-between; gap: 16px; width: 100%; }
.kx-term .trade-chart__toggle b { font-weight: 600; color: var(--kx-text); }
.kx-term .trade-chart__canvas { position: relative; height: 100%; min-height: 280px; width: 100%; }
.kx-term .trade-chart__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--kx-faint); font-size: 12px; }

/* flex: 1 — #kx-chart now shares .kx-chart-stage's own fixed height (set above) with the
   oscillator pane below it, instead of carrying a fixed height of its own; it just takes
   whatever the stage has left after the bar above and the oscillator pane (if open) below. */
#kx-chart { flex: 1; min-height: 0; }

/* Price/time axis gutters, tinted apart from the plot area. The library paints one solid
   background across the whole chart canvas (plot + both axes) with no separate axis-background
   option — confirmed by testing a background directly behind the axis canvas: it never showed,
   because the canvas itself opaquely repaints over it every frame. A plain solid overlay would
   fix the color but also blot out the axis's own tick numbers (drawn on that same canvas,
   underneath). mix-blend-mode recolors what's already there instead of covering it — the numbers
   and the crosshair's price/time badge stay fully legible, just tinted along with the gutter. */
#kx-chart .tv-lightweight-chart table tr:nth-child(1) td:nth-child(3) > div,
#kx-chart .tv-lightweight-chart table tr:nth-child(2) td:nth-child(2) > div {
  position: relative;
}
#kx-chart .tv-lightweight-chart table tr:nth-child(1) td:nth-child(3) > div::after,
#kx-chart .tv-lightweight-chart table tr:nth-child(2) td:nth-child(2) > div::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--kx-line);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Single scrollable row, not a wrapping grid — matches how every real charting UI (this
   page's own KCEX reference included, via its ArrowBox scroll strip) handles a wide indicator
   bar: 20 real toggles genuinely don't fit one 1239px-wide row at readable size, so the row
   scrolls horizontally (drag/trackpad/shift+wheel) instead of wrapping to a second line and
   fighting the fixed chart-column height this page depends on for its book-column symmetry. */
.kx-indicator-bar { padding: 0 16px; background: var(--kx-panel); border-top: 1px solid var(--kx-line); overflow: hidden; }
.kx-indicator-bar__scroll { display: flex; align-items: center; gap: 6px; padding: 8px 0; overflow-x: auto; scrollbar-width: thin; }
.kx-indicator-bar__scroll::-webkit-scrollbar { height: 4px; }
.kx-indicator-bar__scroll::-webkit-scrollbar-thumb { background: var(--kx-chip-2); border-radius: 2px; }
.kx-indicator-bar__sep { width: 1px; height: 16px; background: var(--kx-line); margin: 0 4px; flex-shrink: 0; }
.kx-ind {
  background: none; border: none; border-bottom: 2px solid transparent; color: var(--kx-faint); font-size: 12px; padding: 4px 8px 2px;
  white-space: nowrap; flex-shrink: 0;
}
.kx-ind:hover:not(:disabled) { color: var(--kx-text); }
.kx-ind.is-active { color: var(--kx-text); border-bottom-color: var(--kx-green); }
.kx-ind:disabled { opacity: .45; cursor: not-allowed; }

/* ---- Oscillator sub-pane (MACD/RSI/KDJ/...) — a second, real lightweight-charts instance
   synced to the main chart's timescale, swapped in place when a different oscillator button
   is clicked (see NovaIndicators in nova-indicators.js). Lives inside .kx-chart-stage as a
   fixed-height, flex-shrink:0 slice of that box's own fixed total height — opening it takes
   real estate straight from the candlestick canvas next to it (which is flex:1 and simply
   shrinks to fit), never from the page around it. */
.kx-osc-pane { flex: 0 0 130px; background: var(--kx-panel); border-top: 1px solid var(--kx-line); position: relative; }
.kx-osc-pane[hidden] { display: none; }
.kx-osc-pane__label { position: absolute; top: 6px; left: 16px; z-index: 2; font-size: 12px; font-weight: 600; color: var(--kx-faint); pointer-events: none; }
.kx-osc-pane__canvas { height: 100%; width: 100%; }

/* ---- Blotter (bottom tabs: positions / orders / history / assets) ----
   kcex/MEXC blotter shape: two-line cells (value over a faint sub-line), a symbol cell with a
   side-coloured edge and Long/Isolated/10X tags, 28px controls on --kx-chip. */
.kx-blotter { grid-area: blotter; background: var(--kx-panel); border-top: 1px solid var(--kx-line); }
.kx-blotter__tabs { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; padding: 0 16px; border-bottom: 1px solid var(--kx-line); }
.kx-blotter__tabs button { background: none; border: none; color: var(--kx-faint); font-size: 14px; padding: 0; height: 44px; white-space: nowrap; position: relative; font-variant-numeric: tabular-nums; }
.kx-blotter__tabs button:hover { color: var(--kx-text); }
.kx-blotter__tabs button.is-active { color: var(--kx-text); font-weight: 600; }
.kx-blotter__tabs button.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--kx-green); border-radius: 2px 2px 0 0; }
.kx-blotter__tabs button:focus-visible { outline: 1px solid var(--kx-chip-2); outline-offset: 2px; border-radius: 4px; }
.kx-blotter__panel { min-height: 200px; padding: 0; }
.kx-blotter__panel[hidden], .kx-blotter__panel [hidden], .kx-blotter .kf-modal[hidden], .kx-blotter .kf-modal [hidden] { display: none; }
.kx-blotter__empty { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--kx-faint); font-size: 12px; }
.kx-blotter__empty a { color: var(--kx-gold); }

.kx-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kx-table th { text-align: left; color: var(--kx-faint); font-weight: 400; font-size: 12px; padding: 12px 12px 8px; white-space: nowrap; }
.kx-table td { padding: 12px; border-top: 1px solid var(--kx-line); white-space: nowrap; vertical-align: middle; font-variant-numeric: tabular-nums; }
.kx-table tbody:first-of-type tr:first-child td { border-top-color: transparent; }
.kx-table tbody:empty + tbody tr:first-child td { border-top-color: transparent; }
@media (hover: hover) { .kx-table tbody tr:hover td { background: rgba(255, 255, 255, .025); } }
.kx-table .pos { color: var(--kx-green); }
.kx-table .neg { color: var(--kx-red); }
.kx-table .kx-act { text-align: right; }
.kx-dim { color: var(--kx-faint); }
.kx-asset { font-weight: 600; }

/* Two-line cells: value, then a faint 12px sub-line (USDT value / ROI / time). */
.kx-2l span, .kx-2l small, .kx-t span, .kx-t small { display: block; }
.kx-2l small, .kx-t small { margin-top: 2px; font-size: 12px; color: var(--kx-faint); }
.kx-2l.pos small, .kx-2l.neg small { color: inherit; }
.kx-t span { color: var(--kx-text); }

/* Symbol cell — 2px edge in the side colour runs the height of the cell's content. */
.kx-sym { position: relative; padding-left: 10px; }
.kx-sym::before { content: ''; position: absolute; left: 0; top: 1px; bottom: 1px; width: 2px; border-radius: 2px; background: var(--kx-line); }
.kx-sym--long::before { background: var(--kx-green); }
.kx-sym--short::before { background: var(--kx-red); }
.kx-sym b { font-weight: 600; color: var(--kx-text); }
.kx-sym__sub { margin-left: 6px; color: var(--kx-faint); }
.kx-tags { display: flex; gap: 4px; margin-top: 4px; }
.kx-tag { height: 18px; padding: 0 6px; border-radius: 4px; background: var(--kx-chip); color: var(--kx-faint); font-size: 12px; font-weight: 500; line-height: 18px; }
.kx-tag--long { background: var(--kx-green-bg); color: var(--kx-green); }
.kx-tag--short { background: var(--kx-red-bg); color: var(--kx-red); }

.kx-liq { color: var(--kx-gold); }
.kx-slash { margin: 0 4px; color: var(--kx-faint); }
.kx-tpsl-cell { display: flex; align-items: center; gap: 6px; }

/* Controls */
.kx-btn { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--kx-chip); color: var(--kx-text); font-size: 12px; font-weight: 500; white-space: nowrap; }
.kx-btn:hover { background: var(--kx-chip-2); }
.kx-btn:focus-visible, .kx-icon-btn:focus-visible { outline: 1px solid var(--kx-text); outline-offset: 1px; }
.kx-icon-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--kx-faint); }
.kx-icon-btn:hover { background: var(--kx-chip); color: var(--kx-text); }
.kx-close { display: flex; align-items: center; gap: 6px; }

.kx-status { display: inline-block; height: 20px; padding: 0; color: var(--kx-faint); font-size: 12px; line-height: 20px; text-transform: capitalize; }
.kx-status--ok { color: var(--kx-green); }
.kx-status--part { color: var(--kx-gold); }
.kx-status--bad { color: var(--kx-red); }

/* Position TP/SL modal (reuses the leverage modal's .kf-modal shell). */
.kx-tpsl-info { margin: -8px 0 16px; color: var(--kx-faint); font-size: 12px; }
.kx-tpsl-field { display: block; margin-bottom: 12px; }
.kx-tpsl-field > span:first-child { display: block; margin-bottom: 6px; color: var(--kx-faint); font-size: 12px; }


/* ---- Order book / trades column ---- */
/* No min-height guess anymore — .kx-body's grid stretch (the default align-items) now makes
   this column's real height exactly match the chart column's real height at every breakpoint,
   automatically. That also keeps its footprint stable between its own two tabs (Order Book /
   Market Trades) — Market Trades can legitimately have fewer than 24 real fills and shouldn't
   visually collapse the column. */
.kx-book-col { grid-area: book; background: var(--kx-panel); display: flex; flex-direction: column; min-width: 0; position: relative; }
/* Each tab panel is absolutely positioned to exactly fill the column below the tabs row,
   rather than flex:1 in normal flow — a flex-grow child here would get measured for its own
   intrinsic/max-content size during .kx-body's grid row-sizing pass (this column matching the
   chart column's height), and that measurement is where the earlier "row1 balloons to 1549px"
   bug came from. Absolute positioning takes the panel out of that measurement entirely and
   only resolves it against .kx-book-col's real, already-settled height — same visual result
   (fills the column), none of the circular-sizing risk. */
/* :not([hidden]) matters here — this rule's own `display: flex` has higher specificity than
   the UA stylesheet's plain `[hidden] { display: none }`, so without excluding hidden panels
   explicitly, both (Order Book/Market Trades) would render stacked on top of each other at
   once instead of the inactive one staying actually hidden. */
.kx-book-col > [data-kx-book-panel]:not([hidden]) { position: absolute; left: 0; right: 0; top: 40px; bottom: 0; display: flex; flex-direction: column; overflow: hidden; }
/* No flex:1 here on purpose — that measures its own intrinsic size strangely inside a grid
   item being sized by content (the same class of bug the chart canvas hit earlier: a flex
   child with an unconstrained cross size can report a wildly inflated max-content height).
   The panel just keeps its natural height; .kx-book-col is already stretched to match the
   chart column by the grid, so any leftover space simply shows as blank panel-colored space
   below it — same visual result, without feeding back into how tall the row gets sized. */
.kx-book-tabs { display: flex; align-items: center; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--kx-line); height: 40px; flex-shrink: 0; }
.kx-book-tabs button { background: none; border: none; color: var(--kx-dim); font-size: 12px; padding: 0; height: 40px; position: relative; }
.kx-book-tabs button.is-active { color: var(--kx-text); font-weight: 500; }
.kx-book-tabs button.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--kx-green); border-radius: 2px 2px 0 0; }

.kx-book-tools { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; }
.kx-book-modes { display: flex; align-items: center; gap: 6px; }
.kx-book-modes button { background: none; border: none; color: var(--kx-faint); width: 28px; height: 28px; padding: 0; display: flex; align-items: center; justify-content: center; opacity: .45; cursor: pointer; transition: opacity .15s; }
.kx-book-modes button:hover { opacity: .8; }
.kx-book-modes button.is-active { color: var(--kx-text); opacity: 1; }
.kx-book-modes button svg { width: 24px; height: 24px; }
.kx-book-tick { display: flex; align-items: center; gap: 4px; background: var(--kx-chip); border-radius: 6px; padding: 2px 4px; }
.kx-book-tick button { background: none; border: none; color: var(--kx-faint); width: 18px; height: 18px; font-size: 12px; line-height: 1; }
.kx-book-tick span { font-size: 12px; min-width: 34px; text-align: center; }

.kx-book-head { display: flex; padding: 0 16px 6px; color: var(--kx-faint); font-size: 12px; }
.kx-book-head span:first-child { flex: 1; text-align: left; }
.kx-book-head span:nth-child(2) { width: 90px; text-align: right; }
.kx-book-head span:nth-child(3) { width: 90px; text-align: right; }

.kx-book-rows { display: flex; flex-direction: column; }
.kx-book-rows[hidden] { display: none; }
.kx-book-row {
  position: relative; display: flex; align-items: center; width: 100%; background: none; border: none;
  padding: 0 16px; height: 20px; color: var(--kx-text); font-size: 12px; font-variant-numeric: tabular-nums;
}
.kx-book-row:hover { background: rgba(255,255,255,.04); }
.kx-book-row__depth { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; }
.kx-book-row--ask .kx-book-row__depth { background: var(--kx-red-bg); }
.kx-book-row--bid .kx-book-row__depth { background: var(--kx-green-bg); }
.kx-book-row__flash { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Live ladder (rows patched in place by nova-terminal.js): depth bars glide to their new size. */
.kx-book-row__depth { transition: width .3s ease-out; }
@media (prefers-reduced-motion: reduce) { .kx-book-row__depth { transition: none; } }
.kx-book-col, .kx-book-col * { overflow-anchor: none; }
.kx-book-row__px { position: relative; z-index: 2; flex: 1; text-align: left; }
.kx-book-row--ask .kx-book-row__px { color: var(--kx-red); }
.kx-book-row--bid .kx-book-row__px { color: var(--kx-green); }
.kx-book-row__qty { position: relative; z-index: 2; width: 90px; text-align: right; color: var(--kx-faint); }
.kx-book-row__tot { position: relative; z-index: 2; width: 90px; text-align: right; color: var(--kx-faint); }
.kx-book-empty { padding: 16px; text-align: center; color: var(--kx-faint); font-size: 12px; }
[data-kx-book-panel="trades"] #kx-trades .kx-book-empty { flex: 1; display: flex; align-items: center; justify-content: center; }

.kx-book-mid { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--kx-panel); }
.kx-book-mid__px { font-size: 20px; font-weight: 600; }
.kx-book-mid__px.pos { color: var(--kx-green); }
.kx-book-mid__px.neg { color: var(--kx-red); }
.kx-book-mid__arrow { display: flex; }
.kx-book-mid__arrow.pos { color: var(--kx-green); }
.kx-book-mid__arrow.neg { color: var(--kx-red); }
.kx-book-mid__usd { color: #cacfd3; font-size: 12px; }

/* min-height reserves the row's final (populated) size before renderBook() first fills its text
   + track — otherwise the element sits near-empty (just its own padding) for a moment on load,
   then snaps to full height once the book data arrives, jolting everything below it. */
.kx-book-ratio { display: flex; align-items: center; gap: 8px; padding: 8px 16px 14px; font-size: 12px; min-height: 37px; box-sizing: border-box; }
.kx-book-ratio .pos { color: var(--kx-green); }
.kx-book-ratio .neg { color: var(--kx-red); }
.kx-book-ratio__track { flex: 1; height: 4px; background: var(--kx-red); border-radius: 2px; overflow: hidden; }
.kx-book-ratio__track i { display: block; height: 100%; background: var(--kx-green); }

.kx-tape-head { display: flex; padding: 0 16px 6px; color: var(--kx-faint); font-size: 12px; flex-shrink: 0; }
.kx-tape-head span:first-child { flex: 1; }
.kx-tape-head span:nth-child(2) { width: 90px; text-align: right; }
.kx-tape-head span:nth-child(3) { width: 70px; text-align: right; }
/* The row list itself fills whatever's left below the head (flex:1 is safe here — the panel
   above already gave it a definite height via absolute positioning, so this isn't the same
   intrinsic-sizing trap). Each real row then gets flex:1 too, so exactly however many trades
   there are (capped at 24 — see TAPE_ROWS in nova-terminal.js) space out to reach the column's
   bottom edge with no artificial gaps — same convention as a real trade tape, just without a
   swath of dead space under it when the desk hasn't had 24 fills recently. */
[data-kx-book-panel="trades"] #kx-trades { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kx-tape-row { display: flex; align-items: center; padding: 0 16px; flex: 1; min-height: 20px; font-size: 12px; font-variant-numeric: tabular-nums; }
.kx-tape-row span:first-child { flex: 1; }
.kx-tape-row span:nth-child(2) { width: 90px; text-align: right; color: var(--kx-faint); }
.kx-tape-row span:nth-child(3) { width: 70px; text-align: right; color: var(--kx-faint); font-size: 12px; }

/* ---- Order form column ---- */
/* grid-area: form appears in both rows of .kx-body's grid-template-areas, so this column spans
   chart+blotter's combined height automatically — no manual height math, same mechanism as the
   book column matching the chart column via stretch. */
.kx-form-col { grid-area: form; background: var(--kx-panel); display: flex; flex-direction: column; }
.kx-form-tabs { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 0; height: 44px; }
.kx-form-tabs__inner { display: flex; width: 100%; background: var(--kx-chip); border-radius: 6px; padding: 2px; }
.kx-form-tabs__inner button { flex: 1; background: none; border: none; color: #fff; font-size: 14px; padding: 6px 0; border-radius: 6px; }
.kx-form-tabs__inner button.is-active { background: var(--kx-green); }
.kx-form-tabs__inner button.is-active[data-side-tab="sell"] { background: var(--kx-red); }

.kx-form-body { padding: 16px 16px 0; }
.kx-lev-row { display: flex; align-items: center; gap: 8px; padding: 0 0 22px; position: relative; }
/* The Open/Close pill inside Futures mode is nested one level deeper than the top-level
   Spot/Futures tabs it visually matches (.kx-form-body already supplies the 16px edge padding
   its parent normally gives it) — cancel the duplicate padding so it doesn't get double-inset. */
.kx-form-body .kx-form-tabs { padding: 0 0 16px; height: auto; }
.kx-form-body .kx-form-tabs .kx-form-tabs__inner { height: 34px; }
.kx-lev-chip { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; height: 28px; background: var(--kx-chip); border: none; border-radius: 6px; color: var(--kx-text); font-size: 12px; }
.kx-lev-chip:hover { background: var(--kx-chip-2); }
.kx-lev-pop { position: absolute; top: 100%; margin-top: 6px; width: 220px; background: #17181a; border: 1px solid var(--kx-line); border-radius: 10px; padding: 6px; z-index: 40; }
.kx-lev-pop[hidden] { display: none; }
.kx-lev-pop button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--kx-text); font-size: 12px; padding: 8px 10px; border-radius: 6px; }
.kx-lev-pop button:hover { background: var(--kx-chip); }
.kx-lev-pop button.is-active { color: var(--kx-green); }
.kx-lev-note { padding: 6px 10px 2px; color: var(--kx-faint); font-size: 12px; border-top: 1px solid var(--kx-line); margin-top: 4px; }

.kx-entrust { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--kx-line); }
.kx-entrust__tabs { display: flex; align-items: center; gap: 16px; }
.kx-entrust__tabs button { background: none; border: none; color: var(--kx-faint); font-size: 14px; padding: 0; }
.kx-entrust__tabs button.is-active { color: var(--kx-text); font-weight: 500; }
.kx-entrust__calc { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--kx-faint); font-size: 12px; }

.kx-field { margin-top: 12px; }
.kx-field__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; color: var(--kx-faint); font-size: 12px; }
.kx-field__unit { display: inline-flex; align-items: center; gap: 4px; }
.kx-field__avail { color: var(--kx-faint); }
.kx-field__row {
  display: flex; align-items: center; gap: 8px; background: var(--kx-chip); border: 1px solid transparent;
  border-radius: 8px; padding: 0 10px; height: 40px;
}
.kx-field__row:focus-within { border-color: var(--kx-chip-2); }
.kx-field__row input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--kx-text); font-size: 14px;
  text-align: left; outline: none; padding: 8px 4px;
}
.kx-field__row input.is-over { color: var(--kx-red); }
.kx-field__row span.kx-field__suffix { color: var(--kx-faint); font-size: 12px; flex-shrink: 0; }
.kx-field[hidden] { display: none; }

.kx-tpsl { margin-top: 12px; border-top: 1px solid var(--kx-line); padding-top: 10px; }
.kx-tpsl summary { color: var(--kx-faint); font-size: 12px; cursor: pointer; list-style: none; }
.kx-tpsl summary::-webkit-details-marker { display: none; }
.kx-tpsl[open] summary { color: var(--kx-text); margin-bottom: 4px; }


.kx-close-card { border: 1px solid var(--kx-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.kx-close-card__top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; }
.kx-close-card__mid { color: var(--kx-faint); font-size: 12px; margin: 6px 0 10px; }
.kx-close-card__form { display: flex; align-items: center; }
.kx-close-card__form .kx-table__cancel { flex: 1; }

.kx-pct-row { display: flex; justify-content: center; margin: 12px 6px 2px; }
.kx-pct-slider { position: relative; flex: 1; height: 12px; padding: 4px 0; }
.kx-pct-slider__rail { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: #2b2e33; border-radius: 2px; transform: translateY(-50%); }
.kx-pct-slider__fill { position: absolute; top: 50%; left: 0; height: 2px; background: var(--kx-green); border-radius: 2px; transform: translateY(-50%); width: 0%; }
.kx-pct-slider__dots { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; }
.kx-pct-slider__dot { width: 10px; height: 10px; border-radius: 50%; background: #2b2e33; border: 2px solid #2b2e33; cursor: pointer; }
.kx-pct-slider__dot.is-on { background: var(--kx-green); border-color: var(--kx-green); }
.kx-pct-labels { display: flex; justify-content: space-between; margin: 2px 0 20px; color: var(--kx-faint); font-size: 12px; }

.kx-summary { display: flex; flex-direction: column; gap: 4px; }
.kx-summary__row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; color: var(--kx-faint); font-size: 12px; }
.kx-summary__row strong { color: var(--kx-text); font-weight: 400; }
.kx-summary__split { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 4px 0 8px; }
.kx-summary__split > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.kx-summary__split > div:last-child { align-items: flex-end; text-align: right; }
.kx-summary__split span:first-child { color: var(--kx-faint); font-size: 12px; }
.kx-summary__split strong { font-weight: 400; font-size: 12px; }

.kx-flash { margin: 4px 0 8px; padding: 8px 10px; border-radius: 8px; font-size: 12px; background: var(--kx-chip); }
.kx-flash.is-bad { background: var(--kx-red-bg); color: var(--kx-red); }
.kx-flash.is-ok { background: var(--kx-green-bg); color: var(--kx-green); }
.kx-flash[hidden] { display: none; }

.kx-buttons { display: flex; gap: 8px; padding: 16px 0; }
.kx-buttons button {
  flex: 1; border: none; border-radius: 99px; padding: 10px 12px; color: #fff; text-align: center;
  font-size: 14px;
}
.kx-buttons button:disabled { opacity: .5; cursor: not-allowed; }
.kx-guest-cta { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 99px; background: var(--btn); color: var(--btn-ink); font-size: 14px; font-weight: 600; transition: background .15s; }
.kx-guest-cta:hover { background: var(--btn-hover); }
.kx-buttons button[data-side="buy"] { background: var(--kx-green); }
.kx-buttons button[data-side="sell"] { background: var(--kx-red); }
.kx-buttons__sub { display: block; font-size: 12px; font-weight: 400; opacity: .9; margin-top: 1px; }

.kx-fee-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 16px; border-top: 1px solid var(--kx-line); margin-top: 4px; font-size: 12px; }
.kx-fee-row span:first-child { color: var(--kx-faint); }
.kx-fee-row span:last-child { color: var(--kx-gold); }

.kx-wallet { border-top: 1px solid var(--kx-line); padding: 16px; }
.kx-wallet__title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12px; }
.kx-wallet__title span:first-child { display: flex; align-items: center; gap: 6px; }
.kx-wallet__row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; color: var(--kx-faint); font-size: 12px; }
.kx-wallet__row strong { color: var(--kx-text); font-weight: 400; font-variant-numeric: tabular-nums; }
.kx-wallet__actions { display: flex; gap: 8px; margin-top: 10px; }
.kx-wallet__actions a { flex: 1; text-align: center; background: var(--kx-chip); border-radius: 8px; padding: 8px; color: var(--kx-text); font-size: 12px; }
.kx-wallet__actions a:hover { background: var(--kx-chip-2); }
.kx-wallet__actions a.kx-wallet__deposit { background: #fff; color: #141414; font-weight: 500; }
.kx-wallet__actions a.kx-wallet__deposit:hover { background: #e9e9e9; }

/* ---- Bottom real-market ticker marquee ----
   Fixed to the viewport on desktop (≥961px — the width this page actually uses its 3-column
   layout at) so it stays visible while scrolling, matching how every real trading terminal's
   bottom ticker behaves. Left as normal in-flow content on the stacked mobile layout, where a
   fixed footer would permanently eat scarce vertical space. */
.kx-ticker { background: var(--kx-panel); border-top: 1px solid var(--kx-line); overflow: hidden; padding: 8px 0; }
@media (min-width: 961px) {
  .kx-ticker { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
  /* Reserves exactly the ticker's own height (8px padding × 2 + its 17px line content ≈ 33px)
     at the bottom of the whole page so the now-fixed bar never covers the real content above
     it (the blotter, at the bottom of .kx-body's grid) once scrolled all the way down. */
  .kx-term { padding-bottom: 33px; }
}
.kx-ticker__track { display: flex; align-items: center; width: max-content; animation: kx-marquee 140s linear infinite; }
.kx-ticker:hover .kx-ticker__track { animation-play-state: paused; }
.kx-ticker__item { display: flex; align-items: center; gap: 8px; padding: 0 20px; border-right: 1px solid var(--kx-line); white-space: nowrap; font-size: 12px; }
.kx-ticker__item b { font-weight: 600; }
.kx-ticker__item .pos { color: var(--kx-green); }
.kx-ticker__item .neg { color: var(--kx-red); }
@keyframes kx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .kx-ticker__track { animation: none; } }

/* ---- Responsive ----
   Mobile-first from here: the base rules above are the fluid, always-fits-the-viewport layout.
   Going UP in width only ever adds room (stacks fewer columns, or — past 1860px, where
   1239+296+300+gaps plus a scrollbar safety margin genuinely fits — pins the chart to its
   exact 1239×621). Nothing below ever has to fight a fixed width it doesn't have room for,
   which is exactly the bug this replaced: a flat 1239px chart column with the "go fluid"
   breakpoint set to 1400px left every width from 1400–1839px overflowing horizontally. */
@media (min-width: 1860px) {
  /* Height stays pinned at 621px; width now takes all the room the book + form columns leave,
     so wide screens (or zoomed-out browsers) don't end with an empty strip on the right. */
  .kx-body { grid-template-columns: minmax(0, 1fr) 296px 316px; /* form column = kcex order form width */ }
  .kx-chart-col { width: auto; }
  .kx-chart-stage { height: 621px; flex: 0 0 621px; }
  #kx-chart { width: 100%; }
}
@media (max-width: 1180px) {
  /* Same 2-row shape, narrower book column, form drops below spanning full width (its own
     row) instead of running the full chart+blotter height — there isn't enough width left at
     this size to sit it beside a readable chart. (kcex keeps its 3 columns down to ~1180px too;
     above that the chart column simply narrows.) */
  .kx-body {
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas: "chart book" "blotter blotter" "form form";
  }
}
@media (max-width: 960px) {
  /* No negative margin here on purpose — body.kx-page already zeroes .lk-app__body's padding
     at every width (see top of this file), so there's no padding left to cancel out. The old
     -16px hack predates that fix; kept doing its job of "cancelling" padding that no longer
     exists, which just pushed the page 16px past the viewport edge and forced a horizontal
     scrollbar on every phone/tablet width. */
  .kx-head { padding: 14px 16px; }
  .kx-head__metrics { gap: 16px; }
  /* minmax(0,1fr), not 1fr: a wide blotter table (open positions) must scroll inside itself, not widen the page. */
  .kx-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart" "book" "form" "blotter"; }
  .kx-blotter { min-width: 0; }
  .kx-chart-col, .kx-book-col, .kx-form-col { min-width: 0; }
  .kx-chart-stage { height: 380px; flex: 0 0 380px; }
}
/* Inter sets a touch wider than the old face — keep book/tape column captions on one line. */
.kx-book-head span, .kx-tape-head span { white-space: nowrap; }

/* ---- Futures order form — sizes/colours measured off kcex.com's own USDT-M form -------------
   (research/kcex/futures/form-dump2.txt). Panel padding 16, chips 28px/6px radius, inputs
   40px/8px radius on --kx-chip, 42px pill buttons, 12px secondary text in --kx-faint. */
.kf { padding: 16px 16px 0; }
.kf[hidden] { display: none; }
.kf [hidden] { display: none !important; }
.kf-oc { display: flex; height: 28px; background: var(--kx-chip); border-radius: 6px; }
.kf-oc button { flex: 1; border: 0; border-radius: 6px; background: none; color: #fff; font-size: 14px; line-height: 28px; cursor: pointer; }
.kf-oc button.is-on { background: var(--kx-green); }
.kf-oc.is-close button.is-on { background: var(--kx-red); }
.kf-lev { display: flex; gap: 8px; padding: 12px 0 22px; }
.kf-lev__chip { flex: 1 1 0; min-width: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 4px; height: 28px; border: 0; border-radius: 6px; background: var(--kx-chip); color: var(--kx-text); font-size: 12px; cursor: pointer; }
.kf-lev__chip:hover { background: var(--kx-chip-2); }
.kf-lev__chip--static, .kf-lev__chip--static:hover { background: var(--kx-chip); cursor: default; } /* only isolated margin exists — not a control */
.kf-tabs { display: flex; align-items: center; gap: 16px; padding: 0 0 8px; border-bottom: 1px solid var(--kx-line); }
.kf-tabs button { border: 0; background: none; padding: 0; color: var(--kx-faint); font-size: 14px; line-height: 22px; cursor: pointer; }
.kf-tabs button:hover { color: var(--kx-text); }
.kf-tabs button.is-on { color: var(--kx-text); font-weight: 500; }
.kf-flash { margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--kx-faint); }
.kf-flash.is-bad { color: var(--kx-red); }
.kf-flash.is-ok { color: var(--kx-green); }
.kf-inputs { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.kf-field__label { display: flex; align-items: center; min-height: 16px; margin: 0 0 4px; font-size: 12px; line-height: 16px; color: var(--kx-text); }
.kf-field__row { display: flex; gap: 6px; }
.kf-field__box { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: 40px; padding: 0 10px; background: var(--kx-chip); border: 1px solid transparent; border-radius: 8px; transition: border-color .15s; }
.kf-field__box:focus-within { border-color: var(--kx-text); }
.kf-field__box.is-static { justify-content: flex-start; }
.kf-field__box input { flex: 1; min-width: 0; height: 100%; padding: 8px 4px; border: 0; outline: 0; background: none; color: var(--kx-text); font-size: 14px; }
.kf-field__static { flex: 1; padding: 0 4px; color: var(--kx-faint); font-size: 14px; }
.kf-field__unit { color: var(--kx-faint); font-size: 12px; }
.kf-extra .kf-field__box + .kf-field__label { margin-top: 12px; }
.kf-latest { flex: none; margin: 0 4px 0 16px; padding: 0; border: 0; background: none; color: var(--kx-text); font-size: 12px; line-height: 16px; cursor: pointer; }
.kf-bbo { flex: none; height: 40px; padding: 0 16px; background: var(--kx-chip); border: 1px solid transparent; border-radius: 8px; color: var(--kx-text); font-size: 14px; cursor: pointer; }
.kf-bbo.is-on { border-color: var(--kx-text); }
.kf-dd { position: relative; display: inline-flex; }
.kf-dd__btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font-size: 12px; line-height: 16px; cursor: pointer; }
.kf-dd__btn svg { width: 8px; height: 8px; color: var(--kx-dim); }
.kf-dd__btn--suffix { color: var(--kx-text); }
.kf-dd__btn--suffix svg { color: var(--kx-text); }
.kf-dd__menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: 232px; padding: 4px; background: #1f2024; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; box-shadow: 0 16px 40px rgba(0,0,0,.55); animation: kf-dd-in .12s ease-out; }
@keyframes kf-dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.kf-field__box .kf-dd__menu { left: auto; right: -10px; }
.kf-dd__menu button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 6px; background: none; color: var(--kx-text); text-align: left; cursor: pointer; }
.kf-dd__menu button:hover { background: rgba(255,255,255,.05); }
.kf-dd__opt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kf-dd__opt strong { font-size: 14px; font-weight: 500; line-height: 20px; }
.kf-dd__opt small { color: var(--kx-faint); font-size: 12px; line-height: 16px; }
.kf-dd__menu button svg { flex: none; width: 14px; height: 14px; color: var(--kx-text); opacity: 0; }
.kf-dd__menu button.is-on svg { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kf-dd__menu { animation: none; } }
.kf-slider { margin: 4px 0 25px; padding: 0 6px; }
.kf-slider__track { position: relative; height: 12px; margin-top: 10px; cursor: pointer; touch-action: none; }
.kf-slider__rail, .kf-slider__fill { position: absolute; left: 0; top: 5px; height: 2px; border-radius: 4px; }
.kf-slider__rail { right: 0; background: #2b2e33; }
.kf-slider__fill { width: 0; background: #fff; }
.kf-slider__dot { position: absolute; top: 1px; width: 10px; height: 10px; margin-left: -5px; padding: 0; border: 2px solid #2b2e33; border-radius: 50%; background: var(--kx-panel); cursor: pointer; }
.kf-slider__dot.is-on { border-color: #fff; }
.kf-slider__handle { position: absolute; top: 0; left: 0; width: 12px; height: 12px; margin-left: -6px; border: 3px solid #fff; border-radius: 50%; background: #fff; pointer-events: none; }
.kf-slider__tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; background: #fff; color: #141414; font-size: 12px; line-height: 16px; white-space: nowrap; opacity: 0; transition: opacity .12s; }
.kf-slider.is-drag .kf-slider__tip, .kf-slider__track:hover .kf-slider__tip { opacity: 1; }
.kf-slider.is-disabled { opacity: .4; }
.kf-slider.is-disabled .kf-slider__track, .kf-slider.is-disabled .kf-slider__marks span { cursor: not-allowed; }
.kf-slider__marks { position: relative; height: 19px; margin-top: 4px; }
.kf-slider__marks span { position: absolute; transform: translateX(-50%); color: var(--kx-dim); font-size: 12px; line-height: 19px; cursor: pointer; }
.kf-slider__marks span:first-child { transform: none; margin-left: -6px; }
.kf-slider__marks span:last-child { transform: translateX(-100%); margin-left: 6px; }
.kf-sum { font-size: 12px; line-height: 19px; color: var(--kx-faint); }
.kf-sum strong { font-weight: 400; color: #fff; }
.kf-sum__avail { display: flex; align-items: center; margin-top: 8px; line-height: 16px; }
.kf-sum__avail strong { margin-left: 4px; color: var(--kx-text); }
.kf-sum__transfer { display: inline-flex; margin-left: 4px; color: var(--kx-text); }
.kf-sum__row { display: flex; justify-content: space-between; margin-top: 4px; }
.kf-sum__row > div { display: flex; gap: 4px; white-space: nowrap; }
.kf-sum__row--max { flex-wrap: wrap; gap: 0 12px; margin: 4px 0 12px; }
.kf-sum__row--max > div + div { margin-left: auto; } /* long figures: Max Short drops to its own line, still right-aligned */
.kf-tip { position: relative; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; outline: 0; }
/* Instant hover/focus tooltip (native title waits ~1s and looked like nothing happened). */
.kf-tip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 40;
  width: 220px; padding: 8px 10px; border-radius: 6px; background: #2b2d31; color: var(--kx-text);
  font-size: 12px; line-height: 16px; font-weight: 400; white-space: normal; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); pointer-events: none; opacity: 0; transform: translateY(2px);
  transition: opacity .12s, transform .12s;
}
.kf-tip--end::after { left: 50%; transform: translate(-50%, 2px); }
.kf-tip:hover::after, .kf-tip:focus-visible::after { opacity: 1; transform: none; }
.kf-tip--end:hover::after, .kf-tip--end:focus-visible::after { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .kf-tip::after { transition: none; } }
.kf-checks { display: flex; gap: 16px; padding: 4px 0 8px; }
.kf-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.kf-check input { position: absolute; opacity: 0; pointer-events: none; }
.kf-check__box { width: 12px; height: 12px; border: 1px solid #2f3133; border-radius: 2px; }
.kf-check input:checked + .kf-check__box { background: #fff; border-color: #fff; box-shadow: inset 0 0 0 2px var(--kx-panel); }
.kf-check input:focus-visible + .kf-check__box { outline: 2px solid var(--kx-text); outline-offset: 2px; }
.kf-check__text { color: #fff; font-size: 12px; line-height: 12px; text-decoration: underline dotted; text-underline-offset: 3px; }
.kf-extra { margin: 4px 0 12px; }
.kf-btns { display: flex; gap: 8px; }
.kf-btns .kx-guest-cta { min-height: 42px; }
.kf-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 42px; padding: 0 12px; border: 0; border-radius: 99px; color: #fff; font-size: 14px; line-height: 22px; cursor: pointer; transition: filter .15s; }
.kf-btn small { font-size: 12px; line-height: 20px; }
.kf-btn:hover:not(:disabled) { filter: brightness(1.08); }
.kf-btn:disabled { opacity: .5; cursor: not-allowed; }
.kf-btn--long { background: var(--kx-green); }
.kf-btn--short { background: var(--kx-red); }
.kf-margins { display: flex; gap: 8px; }
.kf-margins > div { flex: 1; display: flex; justify-content: space-between; gap: 4px; margin-top: 16px; font-size: 12px; line-height: 19px; color: var(--kx-faint); }
.kf-margins strong { font-weight: 400; color: #fff; }
.kf-fees { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--kx-faint); }
.kf-fees__v { color: var(--kx-gold); }
.kf-divide { height: 1px; margin: 18px -12px 0; background: var(--kx-line); }
.kf-wallet { padding: 16px 0 12px; }
.kf-wallet__title { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; line-height: 22px; }
.kf-wallet__title a { display: inline-flex; color: #fff; font-size: 16px; }
.kf-wallet__rows { margin: 12px 0 0; font-size: 12px; line-height: 19px; color: var(--kx-faint); }
.kf-wallet__rows > div { display: flex; justify-content: space-between; }
.kf-wallet__rows strong { font-weight: 400; color: #fff; }
.kf-wallet__tip { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; padding: 10px 16px; border: 1px solid var(--kx-line); border-radius: 8px; font-size: 12px; line-height: 19px; }
.kf-wallet__tip-ico { display: flex; margin-top: 2px; font-size: 14px; }
.kf-wallet__deposit { display: flex; align-items: center; justify-content: center; height: 32px; margin-top: 16px; border-radius: 8px; background: #fff; color: #141414; font-size: 12px; }
.kf-wallet__tip:not([hidden]) + .kf-wallet__deposit { margin-top: 0; }
.kf-wallet__deposit:hover { background: #e9e9e9; }
.kf-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.kf-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.kf-modal__panel { position: relative; width: min(400px, calc(100vw - 32px)); padding: 20px 24px 24px; background: #1b1c1f; border: 1px solid var(--kx-line); border-radius: 12px; }
.kf-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.kf-modal__head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.kf-modal__x { border: 0; background: none; color: var(--kx-faint); font-size: 20px; line-height: 1; cursor: pointer; }
.kf-modal__x:hover { color: var(--kx-text); }
.kf-levpick { display: flex; align-items: center; height: 40px; padding: 0 4px; background: var(--kx-chip); border-radius: 8px; }
.kf-levpick input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--kx-text); font-size: 16px; font-weight: 600; text-align: right; }
.kf-levpick__x { flex: 1; padding-left: 2px; color: var(--kx-text); font-size: 16px; font-weight: 600; }
.kf-levpick__step { width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--kx-text); font-size: 20px; cursor: pointer; }
.kf-levpick__step:hover { background: var(--kx-chip-2); }
.kf-levrange { --p: 15.3%; width: 100%; margin: 20px 0 8px; appearance: none; -webkit-appearance: none; height: 2px; border-radius: 4px; background: linear-gradient(to right, #fff var(--p), #2b2e33 var(--p)); outline: 0; }
.kf-levrange::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; cursor: pointer; }
.kf-levrange::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; }
.kf-levmarks { display: flex; justify-content: space-between; gap: 4px; }
.kf-levmarks button { flex: 1; height: 28px; border: 0; border-radius: 6px; background: var(--kx-chip); color: var(--kx-faint); font-size: 12px; cursor: pointer; }
.kf-levmarks button:hover, .kf-levmarks button.is-on { color: var(--kx-text); background: var(--kx-chip-2); }
.kf-modal__note { margin: 16px 0 20px; color: var(--kx-faint); font-size: 12px; line-height: 19px; }
.kf-modal__note strong { color: var(--kx-text); font-weight: 500; }
.kf-modal__ok { width: 100%; height: 40px; border: 0; border-radius: 8px; background: #fff; color: #141414; font-size: 14px; font-weight: 500; cursor: pointer; }
.kf-modal__ok:hover { background: #e9e9e9; }
.kf-mm { margin-bottom: 20px; padding: 14px 16px; border: 1px solid var(--kx-text); border-radius: 8px; }
.kf-mm strong { font-size: 14px; font-weight: 600; }
.kf-mm p { margin: 6px 0 0; color: var(--kx-faint); font-size: 12px; line-height: 19px; }
/* Spot Total field sits right under the slider, same gap the slider leaves above the summary. */
.kx-field--total { margin-top: -9px; margin-bottom: 16px; }
.kx-field__top .kf-dd__btn { color: var(--kx-text); }
/* Spot form (kcex spot layout) — shares the .kf-* futures components. */
.kf--spot .kf-oc { margin-bottom: 16px; }
.kf-sum--spot { margin: 0 0 12px; }
.kf-sum__line { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-size: 12px; line-height: 19px; color: var(--kx-faint); }
.kf-sum__line strong { color: #fff; font-weight: 500; }
.kf-btn--wide { height: 40px; }
.kf-fees--spot { margin-top: 12px; }
.kf--spot .kx-wallet { margin-top: 18px; }
.kf-slider + .kf-field--total { margin-top: -13px; }
.kx-table th:first-child, .kx-table td:first-child { padding-left: 16px; }
.kx-table th:last-child, .kx-table td:last-child { padding-right: 16px; }

/* Card mode — set by nova-terminal.js fitBlotter() when a table is wider than its panel, so the
   blotter never scrolls sideways. Each cell shows its column header (data-label) above the value;
   the symbol cell heads the card and the action cell spans its foot. */
.kx-table.is-cards, .kx-table.is-cards tbody { display: block; }
.kx-table.is-cards thead { display: none; }
.kx-table.is-cards tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px 16px; padding: 14px 16px; border-top: 1px solid var(--kx-line); }
.kx-table.is-cards tbody:first-of-type tr:first-child, .kx-table.is-cards tbody:empty + tbody tr:first-child { border-top-color: transparent; }
.kx-table.is-cards td { display: block; min-width: 0; padding: 0; border: 0; white-space: normal; }
.kx-table.is-cards td:first-child, .kx-table.is-cards td:last-child { padding: 0; }
.kx-table.is-cards td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--kx-faint); white-space: nowrap; }
.kx-table.is-cards td.kx-headcell { grid-column: 1 / -1; order: -1; }
.kx-table.is-cards td.kx-act { grid-column: 1 / -1; text-align: left; }
.kx-table.is-cards td:has(.kx-tpsl-cell) { grid-column: span 2; }
.kx-table.is-cards .kx-tpsl-cell { white-space: nowrap; }
.kx-table.is-cards td.kx-headcell::before, .kx-table.is-cards td.kx-act::before { content: none; }
.kx-table.is-cards .kx-act .kx-close .kx-btn, .kx-table.is-cards .kx-act form .kx-btn { flex: 1; width: 100%; height: 32px; }
@media (hover: hover) { .kx-table.is-cards tbody tr:hover td { background: none; } }

/* Close Position modal */
.kx-seg { display: flex; gap: 4px; margin-bottom: 16px; padding: 2px; border-radius: 8px; background: var(--kx-chip); }
.kx-seg button { flex: 1; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--kx-faint); font-size: 14px; font-weight: 500; }
.kx-seg button.is-on { background: var(--kx-chip-2); color: var(--kx-text); }
.kx-pcts { display: flex; gap: 4px; margin: -4px 0 20px; }
.kx-pcts button { flex: 1; height: 28px; border: 0; border-radius: 6px; background: var(--kx-chip); color: var(--kx-faint); font-size: 12px; }
.kx-pcts button:hover, .kx-pcts button.is-on { background: var(--kx-chip-2); color: var(--kx-text); }
.kx-field__row.is-bad { border-color: var(--kx-red); }
@media (max-width: 480px) {
  .kx-blotter__tabs { column-gap: 16px; }
  .kx-blotter__tabs button { height: 40px; font-size: 12px; }
}