/* =============================================================================
 * styles.css — Binance USDⓈ-M Futures terminal look-alike (dark theme)
 * Palette verified against Binance brand/UI references.
 * ===========================================================================*/
:root {
  --bg: #0b0e11;          /* deepest page bg */
  --panel: #181a20;       /* card / panel */
  --elev: #1e2329;        /* row hover / input */
  --surf2: #2b3139;       /* pressed / secondary */
  --border: #2b3139;
  --line: #252930;

  --yellow: #fcd535;      /* UI accent */
  --gold: #f0b90b;        /* brand gold */

  --green: #0ecb81;       /* up / buy / long */
  --red: #f6465d;         /* down / sell / short */

  --buy-bar: rgba(14, 203, 129, 0.13);
  --sell-bar: rgba(246, 70, 93, 0.13);

  --txt: #eaecef;         /* primary */
  --txt2: #848e9c;        /* secondary */
  --txt3: #5e6673;        /* tertiary */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "BinancePlex", Inter, Arial, sans-serif;
  --gap: 6px;
}

/* ---------------------------- light theme ----------------------------- */
:root[data-theme="light"] {
  --bg: #f5f5f5;
  --panel: #ffffff;
  --elev: #f4f5f7;
  --surf2: #eaecef;
  --border: #eaecef;
  --line: #f0f1f2;
  --buy-bar: rgba(14, 203, 129, 0.10);
  --sell-bar: rgba(246, 70, 93, 0.10);
  --txt: #1e2329;
  --txt2: #707a8a;
  --txt3: #aeb4bc;
}
:root[data-theme="light"] select,
:root[data-theme="light"] .ph-filters input[type=date] { color-scheme: light; }
/* pos-line-box wrapper is transparent; the .pnl pill carries the colour (works in both themes) */
:root[data-theme="light"] #chart-legend .cl-meta { color: var(--txt2); }
.brand .b-name { color: var(--txt); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: auto;   /* let the page scroll on short windows instead of clipping */
}
.tnum { font-variant-numeric: tabular-nums; }
.up { color: var(--green); }
.down { color: var(--red); }
.muted { color: var(--txt2); }

/* --------------------------------- layout -------------------------------- */
.terminal {
  display: grid;
  min-height: 100vh;   /* fill tall screens, grow (and scroll) on short ones */
  gap: var(--gap);
  padding: var(--gap);
  grid-template-columns: minmax(0, 1fr) var(--book, 300px) var(--order, 330px);
  grid-template-rows: 42px 60px minmax(160px, 1fr) var(--row-bottom, 222px) 22px;
  grid-template-areas:
    "nav    nav    nav"
    "head   book   order"
    "chart  book   order"
    "bottom bottom account"
    "status status status";
}
#minibar { display: none; }   /* symbol header sits directly under the nav (Binance layout) */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  position: relative;
}
/* draggable resize gutters on panel edges (between panels) */
.resz { position: absolute; z-index: 8; }
.resz::after { content: ''; position: absolute; background: transparent; transition: background .12s; }
.resz-col { top: 0; bottom: 0; left: 0; width: 6px; cursor: col-resize; }
.resz-col::after { top: 0; bottom: 0; left: 2px; width: 2px; }
.resz-row { left: 0; right: 0; top: 0; height: 6px; cursor: row-resize; }
.resz-row::after { left: 0; right: 0; top: 2px; height: 2px; }
.resz:hover::after, .resz.dragging::after { background: var(--yellow); }
body.resizing { user-select: none; }
@media (max-width: 1180px) { .resz { display: none; } }
/* grid areas */
#topnav { grid-area: nav; }
#minibar { grid-area: mini; }
.symhead { grid-area: head; }
#chartPanel { grid-area: chart; display: flex; flex-direction: column; }
#bookPanel  { grid-area: book; display: flex; flex-direction: column; }
#orderPanel { grid-area: order; display: flex; flex-direction: column; }
#bottomPanel { grid-area: bottom; display: flex; flex-direction: column; }
#accountPanel { grid-area: account; display: flex; flex-direction: column; }
#statusbar { grid-area: status; }

/* global nav */
#topnav { display: flex; align-items: center; gap: 16px; padding: 0 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; }
#topnav .home { color: var(--txt); font-size: 16px; cursor: pointer; }
.brand { display: flex; align-items: center; gap: 9px; }
.brand .logo { display: inline-flex; align-items: center; }
.brand-img { height: 28px; width: auto; display: none; }   /* shown by app.js when the file loads */
#brand-fallback { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.brand .b-name { color: #eaecef; }
.brand .b-fut { color: var(--gold); }
.mainnav { display: flex; gap: 18px; padding-left: 8px; }
#topnav .spacer { flex: 1; }   /* push the account/wallet/… icons to the far right, above the order panel */
.nav-item { position: relative; }
.nav-item > a { color: var(--txt); font-size: 13px; cursor: pointer; white-space: nowrap; }
.nav-item:hover > a { color: var(--yellow); }
.nav-item > a.active { color: var(--txt); }
.nav-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-width: 190px; box-shadow: 0 12px 32px rgba(0,0,0,.55); z-index: 300; }
.nav-item.has-menu:hover .nav-menu { display: block; }
/* invisible bridge across the 8px gap so the menu doesn't vanish when the mouse moves into it */
.nav-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-menu a { display: block; padding: 8px 10px; color: var(--txt2); font-size: 13px; border-radius: 4px; cursor: pointer; }
.nav-menu a:hover { background: var(--elev); color: var(--txt); }
/* right-side icon menus */
.navicons { display: flex; align-items: center; gap: 14px; }
.navicon { display: inline-flex; align-items: center; justify-content: center; }
.navicon svg { width: 20px; height: 20px; display: block; }
#topnav .home { display: inline-flex; align-items: center; }
#topnav .home svg { width: 22px; height: 22px; display: block; }
.hidden-btn { display: none; }
.navicons .nav-item .nav-menu { left: auto; right: 0; }
.acct-menu { min-width: 230px; }
.acct-head { padding: 4px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.acct-head .email { color: var(--txt); font-weight: 600; font-size: 13px; }
.acct-head .tags { display: flex; gap: 10px; margin-top: 6px; }
.acct-head .tag-v { color: var(--green); font-size: 11px; }
.acct-head .tag-r { color: var(--gold); font-size: 11px; }
.nav-menu .logout { color: var(--red); }
.theme-toggle { cursor: pointer; }
/* chart OHLC legend overlay */
#chart-legend { position: absolute; top: 8px; left: 12px; z-index: 4; font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
#chart-legend .cl-title { color: var(--txt); font-weight: 500; }
#chart-legend .cl-meta { color: var(--txt2); }
#chart-legend .up { color: var(--green); }
#chart-legend .down { color: var(--red); }
.navicon { color: var(--txt); cursor: pointer; font-size: 14px; width: 22px; text-align: center; }
.navicon:hover { color: var(--yellow); }

/* mini ticker strip */
#minibar { display: none; align-items: center; gap: 20px; padding: 0 14px; overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; }
.mini-chip { display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; font-size: 12px; }
.mini-chip .ms { color: var(--txt2); }
.mini-chip.sel .ms { color: var(--yellow); }
.mini-chip .mp { font-variant-numeric: tabular-nums; color: var(--txt); }

/* symbol header */
.symhead { display: flex; align-items: center; gap: 20px; padding: 0 16px; overflow-x: auto; }
.symhead .fav { color: var(--gold); cursor: pointer; }
.symhead .sym-coin { width: 22px; height: 22px; border-radius: 50%; background: var(--surf2); color: var(--gold); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.symhead .bigprice { display: flex; flex-direction: column; line-height: 1.2; }
.symhead .bigprice .lastbig { font-size: 20px; font-weight: 600; }
.symhead .bigprice .chg { font-size: 12px; }
.hstats { display: flex; align-items: center; gap: 20px; flex: 1; }
.hstats .stat { display: flex; flex-direction: column; line-height: 1.4; }
.hstats .stat .lbl { color: var(--txt2); font-size: 11px; white-space: nowrap; }
.hstats .stat .val { font-size: 12px; white-space: nowrap; }
.hstats .spacer { flex: 1; }
.symhead .sym-more { color: var(--txt2); cursor: pointer; font-size: 18px; padding: 0 6px; }
.sym-btn .badge { font-size: 10px; color: var(--gold); border: 1px solid var(--gold); border-radius: 3px; padding: 0 4px; margin-left: 4px; }

/* account panel */
#accountPanel .acct-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.acct-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--txt2); }
.acct-row .tnum { color: var(--txt); }
.acct-btns { display: flex; gap: 8px; margin-top: 8px; }
.acct-btns .btn { flex: 1; }

/* status bar */
#statusbar { display: flex; align-items: center; gap: 16px; padding: 0 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; font-size: 11px; overflow: hidden; }
.sb-ticker { flex: 1; display: flex; gap: 20px; overflow: hidden; white-space: nowrap; }
.sb-ticker .si { display: inline-flex; gap: 6px; align-items: center; }
.sb-ticker .si .sn { color: var(--txt3); }
.sb-ticker .si .sp { color: var(--txt2); font-variant-numeric: tabular-nums; }
.sb-links { display: flex; gap: 14px; }
.sb-links a { color: var(--txt3); cursor: pointer; white-space: nowrap; }
.sb-links a:hover { color: var(--txt2); }

.panel-title {
  font-size: 12px; color: var(--txt2);
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.panel-title .seg { display: flex; gap: 14px; }
.panel-title .seg a { color: var(--txt2); cursor: pointer; }
.panel-title .seg a.active { color: var(--txt); }
/* Order Book header — title row + controls row (Binance layout) */
.ob-topbar { color: var(--txt); }
.ob-topbar .ob-name { font-size: 13px; font-weight: 500; }
.ob-controls { display: flex; align-items: center; padding: 5px 12px 2px; }
.ob-controls .seg { display: flex; gap: 14px; }
.ob-controls .seg a { color: var(--txt2); cursor: pointer; font-size: 12px; }
.ob-controls .seg a.active { color: var(--txt); }
.more-dots { color: var(--txt2); cursor: pointer; font-size: 16px; line-height: 1; letter-spacing: 1px; }
.more-dots:hover { color: var(--txt); }
/* small ↗ arrow on Index / Open Interest labels */
.hstats .stat .lbl .arr { color: var(--txt3); font-style: normal; font-size: 9px; }
/* order-panel header extras */
.mode-row .spacer, .tabs .spacer { flex: 1; }
.oe-info-i { align-self: center; color: var(--txt2); cursor: pointer; font-size: 13px; }
.oe-info-i:hover { color: var(--txt); }
.panel-title .spacer { flex: 1; }
.chart-views { display: flex; gap: 14px; }
.chart-views a { color: var(--txt2); font-size: 13px; cursor: pointer; }
.chart-views a.active { color: var(--txt); }

/* --------------------------- symbol dropdown --------------------------- */
#sym-dd { position: relative; }
.sym-btn {
  display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 3px 8px; color: var(--txt); font-size: 18px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.sym-btn:hover { background: var(--elev); }
.sym-btn .caret { font-size: 11px; color: var(--txt2); }
.sym-panel {
  /* fixed so the ticker bar's overflow can't clip the list */
  display: none; position: fixed; top: 62px; left: 14px; z-index: 200; width: 430px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 8px;
}
.sym-panel.open { display: block; }
.sym-search {
  width: 100%; background: var(--elev); border: 1px solid var(--border); border-radius: 4px;
  padding: 8px 10px; color: var(--txt); outline: none; font-size: 13px; font-family: inherit; margin-bottom: 6px;
}
.sym-search:focus { border-color: var(--yellow); }
.sym-list { max-height: 340px; overflow-y: auto; }
/* Binance-style symbol table: [star] [icon + symbol/vol] [last price] [24h chg] [funding] */
.sym-cols, .sym-item { display: grid; grid-template-columns: 16px minmax(108px,1fr) 78px 60px 78px; gap: 6px; align-items: center; }
.sym-cols { padding: 2px 8px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; color: var(--txt3); font-size: 11px; }
.sym-cols .sc { cursor: pointer; user-select: none; white-space: nowrap; }
.sym-cols .sc.r { text-align: right; }
.sym-cols .sc:hover { color: var(--txt); }
.sym-cols .sc.act { color: var(--yellow); }
.sym-cols .sc i { font-style: normal; opacity: .45; margin-left: 2px; font-size: 9px; }
.sym-cols .sc.act i { opacity: 1; }
.sym-item { padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.sym-item:hover, .sym-item.active { background: var(--elev); }
.sym-item.sel .sn2 { color: var(--yellow); }
.si-star { cursor: pointer; color: var(--txt3); font-size: 13px; text-align: center; line-height: 1; }
.si-star:hover { color: var(--gold); }
.si-star.on { color: var(--gold); }
.si-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.si-col { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sym-item .sym-id { display: inline-flex; align-items: center; gap: 6px; }
.sym-item .sn2 { color: var(--txt); }
.sym-item .perp { color: var(--gold); font-size: 9px; border: 1px solid var(--gold); border-radius: 3px; padding: 0 3px; }
.si-vol { color: var(--txt3); font-size: 10px; font-variant-numeric: tabular-nums; }
.si-px { text-align: right; color: var(--txt); font-size: 12px; font-variant-numeric: tabular-nums; }
.si-chg { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.si-chg.up { color: var(--green); }
.si-chg.down { color: var(--red); }
.si-fund { text-align: right; color: var(--txt2); font-size: 11px; font-variant-numeric: tabular-nums; }

/* real coin icon (image with letter-circle fallback) */
.coin { width: 18px; height: 18px; border-radius: 50%; background: var(--surf2); display: inline-flex; align-items: center; justify-content: center; color: var(--gold); font-size: 9px; font-weight: 700; position: relative; overflow: hidden; flex: 0 0 auto; vertical-align: middle; }
.coin::before { content: attr(data-b); }
.coin .coin-ic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.symhead .sym-coin { position: relative; overflow: hidden; }
.symhead .sym-coin::before { content: attr(data-b); }
.symhead .sym-coin .coin-ic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini-chip .coin { width: 15px; height: 15px; font-size: 8px; }
.tbl .posname { display: flex; align-items: center; gap: 8px; }
.tbl .posname .pn { display: flex; flex-direction: column; }
.sym-empty { color: var(--txt3); padding: 12px; font-size: 12px; text-align: center; }

.seg.tf a { font-size: 12px; padding: 2px 7px; border-radius: 3px; }
.seg.tf a.active { color: var(--yellow); background: var(--elev); }

.settings-sec { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.settings-sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.sec-title { color: var(--txt2); font-size: 12px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--txt2); border: 1px solid var(--border);
  border-radius: 12px; padding: 3px 10px; white-space: nowrap;
}
.status-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--txt3); }
.status-pill.live .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-pill.reconnecting .dot { background: var(--yellow); }
.status-pill.error .dot { background: var(--red); }

/* ---------------------------------- chart -------------------------------- */
/* chart stage: left drawing toolbar + chart area */
.chart-stage { flex: 1; min-height: 0; display: flex; }
.draw-toolbar { flex: 0 0 40px; width: 40px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-right: 1px solid var(--border); background: var(--panel); overflow-y: auto; }
.draw-toolbar .dtool { width: 30px; height: 30px; border: 0; background: transparent; color: var(--txt2); border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.draw-toolbar .dtool:hover { background: var(--elev); color: var(--txt); }
.draw-toolbar .dtool.active { background: var(--elev); color: var(--yellow); }
.draw-toolbar .dtool svg { width: 18px; height: 18px; display: block; }
.draw-toolbar .dt-sep { width: 22px; height: 1px; background: var(--border); margin: 3px 0; flex: 0 0 auto; }
.chart-area { flex: 1; min-width: 0; position: relative; }
#tv_chart_container { position: absolute; inset: 0; }
.draw-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.draw-overlay.drawing { pointer-events: auto; cursor: crosshair; }
/* inline text-tool input */
.draw-text-input { position: absolute; z-index: 6; transform: translateY(-50%); background: var(--panel); border: 1px solid var(--yellow); color: var(--txt); border-radius: 3px; padding: 2px 6px; font-size: 13px; font-family: inherit; outline: none; min-width: 90px; }
/* collapsed drawings toolbar (TradingView "Hide Drawings Toolbar") */
.chart-stage.draw-collapsed .draw-toolbar { flex-basis: 20px; width: 20px; }
.chart-stage.draw-collapsed .draw-toolbar .dtool:not(#dt-collapse), .chart-stage.draw-collapsed .draw-toolbar .dt-sep { display: none; }
/* bottom price-axis controls (auto / log / %) + UTC clock */
.chart-axisbar { position: absolute; left: 10px; right: 64px; bottom: 3px; z-index: 4; display: flex; align-items: center; pointer-events: none; }
.chart-axisbar .axc-clock { color: var(--txt3); font-size: 11px; font-variant-numeric: tabular-nums; margin-right: auto; }
.chart-axisbar .axc { pointer-events: auto; background: transparent; border: 0; color: var(--txt3); cursor: pointer; font-size: 11px; padding: 1px 6px; border-radius: 3px; font-family: inherit; }
.chart-axisbar .axc:hover { color: var(--txt); background: var(--elev); }
.chart-axisbar .axc.active { color: var(--yellow); }
#chart-legend .cl-vol { color: var(--txt2); margin-left: 8px; }
/* top chart-toolbar buttons (chart type / MA / screenshot / maximize) */
.chart-tools { display: inline-flex; gap: 2px; margin-left: 6px; }
.ctool { background: transparent; border: 0; color: var(--txt2); cursor: pointer; border-radius: 4px; height: 24px; min-width: 26px; padding: 0 6px; font-size: 12px; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; }
.ctool:hover { background: var(--elev); color: var(--txt); }
.ctool.active { color: var(--yellow); }
.ctool svg { width: 15px; height: 15px; display: block; }
/* maximized / fullscreen chart */
#chartPanel.maximized { position: fixed; inset: 0; z-index: 1000; background: var(--bg); margin: 0; border-radius: 0; padding: 10px 12px; }
#chartPanel.maximized .chart-stage { min-height: 0; }
.ma-menu { position: absolute; z-index: 1100; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 12px; min-width: 150px; }
.ma-menu label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 4px; cursor: pointer; color: var(--txt); }
.ma-menu label:hover { background: var(--elev); }
.ma-menu .sw { width: 18px; height: 3px; border-radius: 2px; }
/* live position line box on the chart (left edge, at the entry price) */
/* only the P&L pill is coloured (green profit / red loss); reverse + close sit OUTSIDE it, in grey */
.pos-line-box { position: absolute; left: 0; transform: translateY(-50%); z-index: 5; display: none; align-items: center; gap: 4px; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-line-box .pnl { color: #fff; font-weight: 600; border-radius: 3px; padding: 2px 6px; }
.pos-line-box.up .pnl { background: rgba(14,203,129,.95); }
.pos-line-box.down .pnl { background: rgba(246,70,93,.95); }
.pos-line-box button { background: var(--surf2); border: 1px solid var(--border); color: var(--txt2); border-radius: 2px; width: 16px; height: 16px; cursor: pointer; font-size: 10px; line-height: 1; padding: 0; }
.pos-line-box button:hover { background: var(--elev); color: var(--txt); }
.chart-fallback {
  flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px; color: var(--txt2); text-align: center; padding: 24px;
}
.chart-fallback code {
  background: var(--elev); padding: 2px 6px; border-radius: 3px; color: var(--yellow);
}

/* ------------------------------- order book ------------------------------ */
#bookPanel .ob-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ob-head {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr;
  color: var(--txt2); font-size: 11px; padding: 4px 12px;
}
.ob-head span:nth-child(n+2) { text-align: right; }
.ob-side { flex: 1 1 0; overflow: hidden; display: flex; flex-direction: column; }
.ob-side.asks { justify-content: flex-end; }
.ob-row {
  position: relative; display: grid; grid-template-columns: 1.2fr 1fr 1fr;
  font-size: 12px; height: 20px; align-items: center; padding: 0 12px; cursor: pointer;
}
.ob-row > span { position: relative; z-index: 1; }
.ob-row > span:nth-child(n+2) { text-align: right; color: var(--txt); }
.ob-row .px { font-variant-numeric: tabular-nums; }
.ob-row.ask .px { color: var(--red); }
.ob-row.bid .px { color: var(--green); }
.ob-row::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: var(--w, 0%); z-index: 0;
}
.ob-row.ask::after { background: var(--sell-bar); }
.ob-row.bid::after { background: var(--buy-bar); }
.ob-row:hover { background: var(--elev); }
.ob-mid {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ob-mid .last { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 3px; padding: 0 2px; }
.ob-mid .mark { font-size: 11px; color: var(--txt2); }
.ob-mid .spacer { flex: 1; }
.ob-mid .spread { font-size: 11px; color: var(--txt2); }
.ob-pressure { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 11px; }
.ob-pressure .bpct, .ob-pressure .spct { white-space: nowrap; }
.ob-bar { flex: 1; height: 6px; display: flex; border-radius: 3px; overflow: hidden; background: var(--surf2); }
.ob-bar .b { background: var(--green); height: 100%; }
.ob-bar .s { background: var(--red); height: 100%; }

/* price flash on each tick */
@keyframes flash-up { from { background: rgba(14,203,129,.28); } to { background: transparent; } }
@keyframes flash-down { from { background: rgba(246,70,93,.28); } to { background: transparent; } }
.flash-up { animation: flash-up .45s ease-out; }
.flash-down { animation: flash-down .45s ease-out; }

/* recent trades (shares book column, below) */
.trades-head { display: grid; grid-template-columns: 1.2fr 1fr 1fr; color: var(--txt2); font-size: 11px; padding: 4px 12px; }
.trades-head span:nth-child(n+2) { text-align: right; }
.trades-list { overflow-y: auto; max-height: 150px; }
.trade-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; font-size: 12px; height: 19px; align-items: center; padding: 0 12px; font-variant-numeric: tabular-nums; }
.trade-row span:nth-child(n+2) { text-align: right; color: var(--txt2); }

/* ------------------------------- order entry ----------------------------- */
#orderPanel .pad { padding: 10px 12px; flex: 1; min-height: 0; overflow-y: auto; }
.mode-row { display: flex; gap: 8px; margin-bottom: 10px; }
.pill {
  flex: 1; text-align: center; background: var(--elev); border: 1px solid var(--border);
  border-radius: 4px; padding: 7px 0; cursor: pointer; color: var(--txt); font-size: 12px; user-select: none;
}
.pill.active { border-color: var(--yellow); color: var(--yellow); }
.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.tabs a { padding: 8px 0; color: var(--txt2); cursor: pointer; font-weight: 500; user-select: none; }
.tabs a.active { color: var(--txt); box-shadow: inset 0 -2px 0 var(--yellow); }
.avbl { display: flex; justify-content: space-between; color: var(--txt2); font-size: 12px; margin-bottom: 8px; }
.avbl b { color: var(--txt); font-weight: 500; }
.field {
  display: flex; align-items: center; background: var(--elev); border: 1px solid var(--border);
  border-radius: 4px; padding: 8px 10px; margin-bottom: 10px;
}
.field .k { color: var(--txt2); font-size: 12px; margin-right: 8px; }
.field input {
  flex: 1; background: none; border: 0; color: var(--txt); outline: none;
  font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; min-width: 0;
}
.field .unit { color: var(--txt2); margin-left: 8px; font-size: 12px; }
.field.disabled { opacity: 0.5; }

.slider { position: relative; height: 24px; margin: 4px 4px 14px; }
.slider .track { position: absolute; top: 11px; left: 0; right: 0; height: 2px; background: var(--surf2); }
.slider .fill { position: absolute; top: 11px; left: 0; height: 2px; background: var(--yellow); width: 0%; }
.slider .pips { position: absolute; top: 7px; left: 0; right: 0; display: flex; justify-content: space-between; }
.slider .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--surf2); border: 1px solid var(--panel); cursor: pointer; z-index: 2; }
.slider .pip.on { background: var(--yellow); }
.slider input[type=range] { position: absolute; top: 0; left: -6px; right: -6px; width: calc(100% + 12px); margin: 0; opacity: 0; height: 24px; cursor: pointer; }
.slider .pct-label { position: absolute; right: 0; top: -16px; font-size: 11px; color: var(--txt2); }

.cost-row { display: flex; justify-content: space-between; color: var(--txt2); font-size: 12px; margin: 6px 0; }
.cost-row b { color: var(--txt); font-weight: 500; }
.opts { display: flex; gap: 14px; margin: 8px 0; font-size: 12px; color: var(--txt2); }
.opts label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.btn { border: 0; border-radius: 4px; padding: 11px; font-weight: 600; color: #fff; cursor: pointer; font-size: 13px; }
.btn.buy { background: var(--green); }
.btn.sell { background: var(--red); }
.btn.buy:hover { filter: brightness(1.08); }
.btn.sell:hover { filter: brightness(1.08); }
.btn.ghost { background: var(--elev); color: var(--txt); border: 1px solid var(--border); }
.btn.ghost:hover { border-color: var(--txt2); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.sm { padding: 6px 10px; font-size: 12px; }

/* leverage select */
.lev-select {
  background: var(--elev); border: 1px solid var(--border); color: var(--txt);
  border-radius: 4px; padding: 6px 8px; font-size: 12px; cursor: pointer;
}
/* dark dropdown option lists (match the screenshots; native lists default to light) */
select { color-scheme: dark; }
select option, .lev-select option, .mini-sel option { background: var(--panel); color: var(--txt); }
.mini-sel { color: var(--txt); }
.pos-line-box .sub2, .tbl .sub2 { color: var(--txt2); font-size: 10px; }

/* ----------------------- pro order entry additions ---------------------- */
.mode-row .pill { flex: 0 0 auto; padding: 7px 14px; }
.mode-row .lev-select { flex: 1; text-align: center; }
.ghost-pill { color: var(--txt2); min-width: 34px; }
.oc-tabs { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px; gap: 3px; margin-bottom: 12px; }
.oc-tabs a { flex: 1; text-align: center; padding: 7px 0; border-radius: 4px; color: var(--txt2); cursor: pointer; font-weight: 600; font-size: 13px; user-select: none; }
.oc-tabs a.active { background: var(--elev); color: var(--txt); }
.mini-sel { background: transparent; border: 0; border-left: 1px solid var(--border); color: var(--txt2); font-size: 12px; cursor: pointer; padding: 0 4px; margin-left: 8px; outline: none; }
.avbl .xfer { color: var(--yellow); cursor: pointer; margin-left: 6px; }
.tif-row { display: flex; align-items: center; justify-content: space-between; color: var(--txt2); font-size: 12px; margin: 8px 0 12px; }
.tif-row .mini-sel { border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; margin-left: 0; }
.oe-info { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; margin-top: 12px; }
.oe-info .col { display: flex; flex-direction: column; gap: 4px; }
.oe-info .r { display: flex; justify-content: space-between; color: var(--txt2); font-size: 11px; }
.oe-info .r b { color: var(--txt); font-weight: 500; }
.fee-level { color: var(--txt3); font-size: 11px; margin-top: 12px; }
.fee-level .tnum { color: var(--txt2); }
.fee-level .pct-i { color: var(--yellow); }
/* ---- advanced order-type dropdown + per-type form groups ---- */
#oe-tabs { position: relative; }
.adv-tab { display: inline-flex; align-items: center; gap: 3px; }
.adv-tab .cx { font-style: normal; font-size: 9px; }
.adv-menu { display: none; position: absolute; top: 32px; left: 92px; z-index: 40; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 6px; min-width: 155px; box-shadow: 0 12px 32px rgba(0,0,0,.55); }
.adv-menu.open { display: block; }
.adv-menu a { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-radius: 4px; color: var(--txt2); font-size: 13px; cursor: pointer; font-weight: 400; box-shadow: none; }
.adv-menu a:hover { background: var(--elev); color: var(--txt); }
.adv-menu a.sel { color: var(--txt); }
.adv-menu a.sel::after { content: '✓'; color: var(--yellow); }
.avbl .av-l { display: inline-flex; align-items: center; gap: 5px; }
.avbl .calc-i { color: var(--txt2); cursor: pointer; font-size: 13px; }
.avbl .calc-i:hover { color: var(--txt); }
.oe-group.hidden { display: none !important; }
.flabel { color: var(--txt2); font-size: 12px; margin-bottom: 5px; }
.field-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.field-row .field { flex: 1; margin-bottom: 0; }
.side-box { display: inline-flex; align-items: center; justify-content: center; background: var(--elev); border: 1px solid var(--border); border-radius: 4px; color: var(--txt); font-size: 13px; padding: 0 12px; cursor: pointer; font-family: inherit; min-width: 46px; }
.side-box:hover { border-color: var(--yellow); }
.side-box.sel { padding: 0 2px; }
.side-box .mini-sel { border: 0; margin: 0; padding: 0 4px; color: var(--txt); }
.unit-sel { background: transparent; border: 0; color: var(--txt); font-size: 12px; cursor: pointer; outline: none; margin-left: 6px; }
.min-tag { color: var(--yellow); font-weight: 500; margin-right: 4px; }
.oe-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--txt2); cursor: pointer; margin: 10px 0; }
.time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.time-row .field { margin-bottom: 8px; }
.time-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.time-presets button { background: var(--elev); border: 1px solid var(--border); color: var(--txt2); border-radius: 4px; padding: 5px 0; font-size: 12px; cursor: pointer; font-family: inherit; }
.time-presets button:hover { color: var(--txt); border-color: var(--yellow); }
.dist-radios { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 12px; color: var(--txt); margin-bottom: 10px; }
.dist-radios label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.dist-ic { color: var(--txt); letter-spacing: -1px; font-size: 10px; }
.dist-preview { height: 46px; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: space-around; padding: 0 16px; margin-bottom: 12px; position: relative; }
.dist-preview i { width: 8px; height: 8px; border-radius: 50%; background: var(--txt2); display: block; z-index: 1; }
.dist-preview::before { content: ''; position: absolute; left: 20px; right: 20px; top: 50%; height: 1px; background: var(--border); }
.btn.preview { width: 100%; background: var(--surf2); color: var(--txt3); cursor: not-allowed; }
.btn.preview.on { background: var(--yellow); color: #000; cursor: pointer; }
.tut-link { color: var(--txt2); font-size: 12px; margin-top: 12px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.tut-link:hover { color: var(--txt); }
#g-costinfo.no-liq .liq-r { display: none; }
.acct-row.hl { font-size: 13px; }
.acct-row.hl .tnum { font-weight: 600; }

/* inline close / TP-SL controls in the positions table */
.tbl .mini-input { width: 70px; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; color: var(--txt); font-size: 11px; padding: 3px 6px; text-align: right; outline: none; font-variant-numeric: tabular-nums; }
.tbl .mini-input:focus { border-color: var(--yellow); }
.tbl .close-cell { display: flex; align-items: center; gap: 5px; }
.tbl .lk { color: var(--yellow); cursor: pointer; white-space: nowrap; }
.tbl .lk:hover { text-decoration: underline; }
.tbl .btn.xs { padding: 3px 8px; font-size: 11px; }

/* account panel + positions symbol-cell refinements */
.acct-switch { color: var(--yellow); cursor: pointer; font-size: 12px; }
.sec-label { color: var(--txt2); font-size: 12px; font-weight: 600; margin: 6px 0 2px; }
.btn.full { width: 100%; }
.gauge { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; margin-right: 5px; vertical-align: -1px; opacity: .85; }
.tbl .sym-cell.long { box-shadow: inset 3px 0 0 var(--green); }
.tbl .sym-cell.short { box-shadow: inset 3px 0 0 var(--red); }
.tbl .sym2 { display: inline-flex; flex-direction: column; line-height: 1.25; }
.tbl .sym2 .sub { color: var(--txt2); font-size: 10px; }
.tbl .badges { display: inline-flex; gap: 4px; margin-top: 3px; }
.tbl .bdg { background: var(--surf2); color: var(--txt2); font-size: 10px; border-radius: 2px; padding: 0 4px; }
.tbl .bdg.b-long { background: rgba(14,203,129,.14); color: var(--green); }
.tbl .bdg.b-short { background: rgba(246,70,93,.14); color: var(--red); }
.tbl .close-hd { white-space: nowrap; }
.tbl .close-hd .lk { color: var(--yellow); cursor: pointer; margin-right: 12px; }
.tbl .close-hd .lk:hover { text-decoration: underline; }
.tbl .edit { font-size: 11px; opacity: .8; }
/* draggable / interchangeable positions columns */
.tbl th[draggable] { cursor: grab; user-select: none; }
.tbl th[draggable]:active { cursor: grabbing; }
.tbl th.dragging { opacity: .45; }
.tbl th.drop-target { box-shadow: inset 2px 0 0 var(--yellow); background: var(--elev); }

/* ---- Position History (card layout + filters) ---- */
.ph-head { position: sticky; top: 0; background: var(--panel); z-index: 2; }
.ph-note { color: var(--txt3); font-size: 11px; padding: 8px 14px 0; }
.ph-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.ph-ranges { display: flex; gap: 4px; }
.ph-ranges a { padding: 4px 10px; border-radius: 4px; color: var(--txt2); cursor: pointer; font-size: 12px; user-select: none; }
.ph-ranges a:hover { color: var(--txt); }
.ph-ranges a.active { background: var(--elev); color: var(--txt); }
.ph-flabel { color: var(--txt2); font-size: 12px; }
.ph-arrow { color: var(--txt3); }
.ph-filters input[type=date], .ph-filters select { background: var(--elev); border: 1px solid var(--border); color: var(--txt); border-radius: 4px; padding: 4px 8px; font-size: 12px; color-scheme: dark; cursor: pointer; }
.ph-card { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ph-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ph-sym { font-weight: 600; }
.ph-top .ph-side.long { color: var(--green); }
.ph-top .ph-side.short { color: var(--red); }
.ph-status { color: var(--txt2); }
.ph-top .share { color: var(--txt3); cursor: pointer; }
.ph-spacer { flex: 1; }
.ph-times { color: var(--txt2); font-size: 12px; white-space: nowrap; }
.ph-times .sep { margin: 0 8px; color: var(--txt3); }
.ph-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 24px; margin-top: 12px; }
.ph-metrics > div { display: flex; flex-direction: column; gap: 4px; }
.ph-metrics .lbl { color: var(--txt2); font-size: 11px; white-space: nowrap; }
.ph-metrics .val { font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .ph-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* order book view-mode icons */
.ob-modes { display: flex; gap: 5px; }
.ob-modes a { display: inline-flex; flex-direction: column; gap: 2px; width: 13px; padding: 2px 0; cursor: pointer; opacity: .45; }
.ob-modes a.active { opacity: 1; }
.ob-modes b { height: 4px; border-radius: 1px; display: block; }
.ob-modes b.r { background: var(--red); }
.ob-modes b.g { background: var(--green); }
/* bottom bar: hide-other + close-all links */
.hide-other { display: inline-flex; align-items: center; gap: 5px; color: var(--txt2); font-size: 12px; cursor: pointer; white-space: nowrap; }
.bottom-tabs .tools .lk { color: var(--yellow); cursor: pointer; white-space: nowrap; }
.bottom-tabs .tools .lk:hover { text-decoration: underline; }

/* ------------------------------ bottom tables ---------------------------- */
.bottom-tabs { display: flex; gap: 20px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.bottom-tabs a {
  padding: 10px 0; color: var(--txt2); cursor: pointer; font-size: 13px; user-select: none;
  display: flex; align-items: center; gap: 6px;
}
.bottom-tabs a.active { color: var(--txt); box-shadow: inset 0 -2px 0 var(--yellow); }
.bottom-tabs .count { color: var(--txt3); font-size: 11px; }
.bottom-tabs .spacer { flex: 1; }
.bottom-tabs .tools { display: flex; align-items: center; gap: 8px; }
.table-scroll { flex: 1; overflow: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
table.tbl th {
  position: sticky; top: 0; background: var(--panel); z-index: 1;
  color: var(--txt2); font-weight: 400; text-align: left; padding: 9px 14px; white-space: nowrap;
}
table.tbl td { padding: 9px 14px; border-top: 1px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tbl tr:hover td { background: var(--elev); }
table.tbl td.r, table.tbl th.r { text-align: right; }
.empty { color: var(--txt3); text-align: center; padding: 28px; font-size: 12px; }
.side-long { color: var(--green); }
.side-short { color: var(--red); }
.lnk { color: var(--txt); cursor: pointer; border-bottom: 1px dashed var(--txt3); }
.lnk:hover { color: var(--yellow); border-color: var(--yellow); }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--surf2); color: var(--txt2); }

/* --------------------------------- modal --------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
  display: none; align-items: center; justify-content: center; z-index: 100;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  width: 360px; max-width: 92vw; padding: 20px;
}
.modal h3 { margin: 0 0 14px; font-size: 16px; }
.modal .field { margin-bottom: 12px; }
.modal .row { display: flex; gap: 8px; }

/* ----------------------------- deposit flow ----------------------------- */
.dep-modal { width: 420px; max-width: 94vw; padding: 0; max-height: 88vh; display: flex; flex-direction: column; }
.dep-header { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.dep-header h3 { margin: 0; font-size: 16px; flex: 1; text-align: center; }
.dep-back { cursor: pointer; color: var(--txt2); font-size: 22px; width: 18px; line-height: 1; }
.dep-close { cursor: pointer; color: var(--txt2); font-size: 16px; width: 18px; text-align: right; }
.dep-back:hover, .dep-close:hover { color: var(--txt); }
.dep-body { padding: 14px 18px 18px; overflow-y: auto; }
.dep-search { width: 100%; background: var(--elev); border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; color: var(--txt); outline: none; margin-bottom: 8px; font-size: 13px; }
.dep-search:focus { border-color: var(--yellow); }
.dep-list { display: flex; flex-direction: column; }
.dep-item { display: flex; align-items: center; gap: 10px; padding: 11px 6px; border-radius: 6px; cursor: pointer; }
.dep-item:hover { background: var(--elev); }
.dep-it-main { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.dep-it-main b { font-size: 13px; } .dep-it-main span { color: var(--txt2); font-size: 11px; }
.dep-chev { color: var(--txt3); font-size: 16px; }
.dep-coin-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.dep-coin-head b { font-size: 15px; } .dep-coin-head span { color: var(--txt2); font-size: 12px; display: block; }
.dep-net-note { color: var(--txt2); font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
.dep-qr { display: flex; justify-content: center; align-items: center; padding: 12px; background: #fff; border-radius: 8px; width: 184px; height: 184px; margin: 6px auto 16px; }
.dep-qr svg { width: 160px; height: 160px; display: block; }
.dep-field { margin-bottom: 12px; }
.dep-flabel { color: var(--txt2); font-size: 12px; margin-bottom: 5px; }
.dep-req { color: var(--red); font-size: 10px; border: 1px solid var(--red); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.dep-fval { display: flex; align-items: center; gap: 8px; background: var(--elev); border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; }
.dep-fval span { flex: 1; word-break: break-all; font-size: 13px; font-variant-numeric: tabular-nums; }
.dep-copy { background: transparent; border: 0; color: var(--yellow); cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dep-meta { margin: 14px 0; }
.dep-meta > div { display: flex; justify-content: space-between; font-size: 12px; padding: 5px 0; color: var(--txt2); }
.dep-meta > div span:last-child { color: var(--txt); }
.dep-warn, .dep-warn2 { font-size: 11px; color: var(--txt2); background: var(--elev); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; line-height: 1.55; }
.dep-warn { border-left: 2px solid var(--red); }
.dep-warn2 { border-left: 2px solid var(--yellow); }
.btn.dep-full { width: 100%; margin-top: 4px; }
.dep-sim { color: var(--txt3); font-size: 10px; border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.dep-amt { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--txt); font-size: 15px; font-family: inherit; font-variant-numeric: tabular-nums; }
.dep-fval .dep-amt + span { flex: 0 0 auto; color: var(--txt2); font-weight: 600; }
.dep-amt::-webkit-outer-spin-button, .dep-amt::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------- leverage modal ---------------------------- */
.lev-modal-box { width: 400px; max-width: 94vw; padding: 0; }
.lev-body { padding: 18px; }
.lev-row { display: flex; justify-content: space-between; align-items: center; color: var(--txt2); font-size: 13px; margin-bottom: 12px; }
.lev-value { color: var(--txt); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lev-slider { margin: 6px 2px 16px; }
#lev-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--surf2); outline: none; cursor: pointer; }
#lev-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--panel); cursor: pointer; }
#lev-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--panel); cursor: pointer; }
.lev-ticks { display: flex; justify-content: space-between; color: var(--txt3); font-size: 10px; margin-top: 9px; }
.lev-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.lev-presets button { background: var(--elev); border: 1px solid var(--border); color: var(--txt2); border-radius: 4px; padding: 6px 0; font-size: 12px; cursor: pointer; }
.lev-presets button:hover { border-color: var(--txt2); color: var(--txt); }
.lev-presets button.active { border-color: var(--yellow); color: var(--yellow); }
.lev-note { color: var(--txt2); font-size: 11px; line-height: 1.55; background: var(--elev); border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; }
.lev-note b { color: var(--txt); }
.lev-pill { min-width: 50px; }
.modal .row .btn { flex: 1; }
.modal .hint { color: var(--txt2); font-size: 12px; margin: 4px 0 14px; }
.modal .quick { display: flex; gap: 8px; margin-bottom: 12px; }
.modal .quick .pill { font-size: 12px; }
.icon-btn { background: none; border: 1px solid var(--border); color: var(--txt2); border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 12px; }
.icon-btn:hover { color: var(--txt); border-color: var(--txt2); }

/* --------------------------------- toast --------------------------------- */
#toasts { position: fixed; top: 64px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--elev); border: 1px solid var(--border); border-left: 3px solid var(--txt2);
  border-radius: 4px; padding: 10px 14px; font-size: 12px; min-width: 220px; max-width: 320px;
  animation: slidein 0.18s ease; box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.toast.ok { border-left-color: var(--green); }
.toast.err { border-left-color: var(--red); }
.toast.info { border-left-color: var(--yellow); }
.toast .t { font-weight: 600; margin-bottom: 2px; }
.toast .m { color: var(--txt2); }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--surf2); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* responsive: stack on narrow screens */
@media (max-width: 1180px) {
  .terminal {
    grid-template-columns: minmax(0, 1fr) 290px;
    grid-template-rows: 44px 60px 380px auto auto 200px 24px;
    grid-template-areas:
      "nav     nav"
      "head    head"
      "chart   book"
      "order   order"
      "bottom  bottom"
      "account account"
      "status  status";
  }
  .mainnav .nav-item:nth-child(n+5) { display: none; }
}
@media (max-width: 720px) {
  .terminal {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 320px 240px auto auto 220px 24px;
    grid-template-areas: "nav" "head" "chart" "book" "order" "bottom" "account" "status";
  }
  .mainnav { display: none; }
}

/* ======================= Futures Wallet / P&L Analysis / Share ======================= */
.wt-overlay { position: fixed; inset: 0; z-index: 1200; display: none; overflow-y: auto; }
.wt-page { background: var(--bg); }
.wt-inner { max-width: 1280px; margin: 0 auto; padding: 22px 24px 60px; }
.wt-inner.analysis { max-width: 1180px; }
.wt-spacer { flex: 1; }
.wt-x { cursor: pointer; color: var(--txt2); font-size: 15px; padding: 4px 8px; }
.wt-x:hover { color: var(--txt); }
.wt-tabs-top { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.wt-tabs-top .tt { font-size: 18px; font-weight: 600; color: var(--txt3); cursor: pointer; padding-bottom: 4px; }
.wt-tabs-top .tt.active { color: var(--txt); border-bottom: 2px solid var(--yellow); }
.wt-btn { border: 0; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.wt-btn.y { background: var(--yellow); color: #000; }
.wt-btn.g { background: var(--surf2); color: var(--txt); }
.wt-btn:hover { filter: brightness(1.08); }
.wt-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; margin-bottom: 16px; }
.wt-mb { display: flex; gap: 24px; }
.wt-mb-l { flex: 1; }
.wt-mb-r { width: 320px; display: flex; flex-direction: column; }
.wt-h { color: var(--txt); font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.wt-h.center { text-align: center; }
.wt-h .eye { color: var(--txt3); cursor: pointer; }
.wt-big { font-size: 30px; font-weight: 600; color: var(--txt); font-variant-numeric: tabular-nums; }
.wt-cur { font-size: 14px; color: var(--txt2); font-weight: 400; }
.wt-approx { color: var(--txt3); font-size: 12px; margin-top: 3px; }
.wt-today { color: var(--txt2); font-size: 13px; margin: 14px 0; display: flex; align-items: center; gap: 6px; }
.wt-today b.up { color: var(--green); } .wt-today b.down { color: var(--red); }
.wt-arrow { cursor: pointer; color: var(--txt2); font-size: 16px; border: 1px solid var(--border); border-radius: 4px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.wt-arrow:hover { color: var(--yellow); border-color: var(--yellow); }
.wt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0; }
.wt-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin: 12px 0 20px; }
.wt-sub { color: var(--txt2); font-size: 12px; margin-bottom: 5px; }
.wt-sub.u, .wt-multi { border-bottom: 1px dashed var(--border); display: inline-block; padding-bottom: 1px; }
.wt-med { font-size: 18px; font-weight: 600; color: var(--txt); font-variant-numeric: tabular-nums; }
.wt-med.up { color: var(--green); } .wt-med.down { color: var(--red); }
.up { color: var(--green); } .down { color: var(--red); }
.wt-bnb { color: var(--txt2); font-size: 12px; display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wt-toggle { width: 34px; height: 18px; border-radius: 10px; background: var(--surf2); position: relative; cursor: pointer; }
.wt-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--txt2); }
.wt-alloc { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.wt-donut { width: 150px; height: 150px; }
.wt-legend { color: var(--txt2); font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px 14px; max-width: 220px; }
.wt-legend .dot { width: 9px; height: 9px; background: var(--yellow); border-radius: 2px; flex: 0 0 auto; }
.wt-leg-item { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.wt-subtabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.wt-subtabs .st { color: var(--txt2); font-size: 14px; cursor: pointer; padding-bottom: 10px; }
.wt-subtabs .st.active { color: var(--txt); box-shadow: inset 0 -2px 0 var(--yellow); }
.wt-multi { color: var(--txt); font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.wt-tblwrap { overflow-x: auto; }
.wt-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.wt-tbl th { color: var(--txt2); font-weight: 400; text-align: left; padding: 8px 12px; font-size: 12px; }
.wt-tbl td { color: var(--txt); padding: 12px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.wt-tbl th.r, .wt-tbl td.r { text-align: right; }
.wt-coin { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--surf2); color: var(--gold); align-items: center; justify-content: center; font-size: 11px; margin-right: 6px; }
.wt-side { font-size: 11px; margin-left: 4px; }
.wt-link { color: var(--yellow); cursor: pointer; }
/* analysis */
.wt-topbar { display: flex; align-items: center; margin-bottom: 8px; }
.wt-prev { color: var(--txt2); cursor: pointer; font-size: 13px; }
.wt-prev:hover { color: var(--txt); }
.wt-btn.share { background: var(--surf2); }
.wt-title { font-size: 26px; font-weight: 600; color: var(--txt); margin: 6px 0 20px; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 6px; }
.wt-title .eye { font-size: 16px; color: var(--txt3); }
.wt-tabs2 { display: flex; gap: 26px; margin-bottom: 18px; }
.wt-tabs2 span { color: var(--txt3); font-size: 15px; font-weight: 500; cursor: pointer; padding-bottom: 6px; }
.wt-tabs2 span.active { color: var(--txt); border-bottom: 2px solid var(--yellow); }
.wt-pnlcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.wt-pnlcards .wt-pct { font-size: 26px; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.wt-pnlcards .wt-pct.down { color: var(--red); }
.wt-pnlcards .wt-pct.big { color: var(--green); }
.wt-pnlcards .wt-pct.big.down { color: var(--red); }
.wt-pnlcards .wt-usd { color: var(--txt2); font-size: 12px; }
.wt-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.wt-filters .rg { padding: 6px 16px; border-radius: 6px; background: var(--elev); color: var(--txt2); font-size: 13px; cursor: pointer; }
.wt-filters .rg.active { background: var(--surf2); color: var(--txt); }
.wt-daterange { display: flex; align-items: center; gap: 8px; margin-left: 8px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; color: var(--txt2); font-size: 13px; }
.wt-daterange input { background: transparent; border: 0; color: var(--txt); font-family: inherit; font-size: 13px; outline: none; color-scheme: dark; }
.wt-h3 { font-size: 16px; color: var(--txt); font-weight: 600; margin: 6px 0 16px; }
.wt-pla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 60px; margin-bottom: 26px; }
.wt-plcol .r { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; }
.wt-plcol .r span { color: var(--txt2); } .wt-plcol .r span.u { border-bottom: 1px dashed var(--border); }
.wt-plcol .r b { color: var(--txt); font-weight: 500; font-variant-numeric: tabular-nums; }
.wt-atabs { display: flex; gap: 26px; border-bottom: 1px solid var(--border); margin: 4px 0 22px; }
.wt-atabs span { color: var(--txt2); font-size: 14px; cursor: pointer; padding-bottom: 10px; }
.wt-atabs span.active { color: var(--txt); box-shadow: inset 0 -2px 0 var(--yellow); }
.wt-cw { margin-bottom: 26px; }
.wt-cw-h { font-size: 16px; font-weight: 600; color: var(--txt); margin-bottom: 16px; }
.wt-cw-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.wt-chart { width: 100%; height: 210px; }
.wt-ax { fill: var(--txt3); font-size: 9px; }
.wt-ax.mid { text-anchor: middle; }
.wt-empty { color: var(--txt3); font-size: 13px; text-align: center; padding: 40px 0; }
.wt-empty.tall { min-height: 180px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.wt-summary { width: 300px; margin: 10px auto 0; }
.wt-summary .r { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; padding: 11px 0; font-size: 13px; color: var(--txt2); border-bottom: 1px solid var(--line); }
.wt-summary .r span { white-space: nowrap; }
.wt-summary .r b { color: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wt-note { color: var(--txt3); font-size: 11px; margin-top: 20px; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 16px; }
/* share modal */
.wt-modal { background: rgba(0,0,0,.6); display: none; }
.wt-share-box { max-width: 480px; margin: 6vh auto; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 24px; position: relative; }
.wt-share-box .wt-x { position: absolute; top: 12px; right: 14px; }
.wt-share-card { background: linear-gradient(160deg, #1c2530, #10151b); border-radius: 12px; padding: 26px; overflow: hidden; }
.wt-share-brand { color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.wt-share-brand .sep { color: #555; } .wt-share-brand .usdm { font-weight: 500; }
.wt-share-title { color: #fff; font-size: 18px; font-weight: 600; margin: 18px 0 4px; }
.wt-share-period { color: #8a919e; font-size: 12px; }
.wt-share-lbl { color: #8a919e; font-size: 12px; margin-top: 28px; }
.wt-share-big { font-size: 44px; font-weight: 700; margin: 2px 0 6px; }
.wt-share-extra { font-size: 15px; font-weight: 600; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.wt-share-extra.up { color: var(--green); } .wt-share-extra.down { color: var(--red); }
.wt-share-extra2 { color: #8a919e; font-size: 13px; font-variant-numeric: tabular-nums; }
.wt-share-card .wt-share-bottom { margin-top: 20px; }
.wt-share-bottom { display: flex; align-items: center; gap: 18px; }
.wt-share-qr { width: 88px; height: 88px; background: #fff; border-radius: 6px; padding: 4px; }
.wt-share-qr svg { width: 100%; height: 100%; display: block; }
.wt-qrbox { width: 100%; height: 100%; background: #fff; }
.wt-refcode { color: #fff; font-size: 20px; font-weight: 600; }
.wt-share-opts { margin: 20px 0 14px; }
.wt-sub2 { color: var(--txt2); font-size: 13px; margin-bottom: 12px; }
.wt-check2 { display: inline-flex; align-items: center; gap: 6px; color: var(--txt2); font-size: 13px; margin-right: 24px; cursor: pointer; }
.wt-dl { width: 100%; border: 1px solid var(--border); background: transparent; color: var(--yellow); border-radius: 24px; padding: 12px; font-size: 16px; cursor: pointer; }
.wt-dl-cap { text-align: center; color: var(--txt2); font-size: 12px; margin-top: 8px; }
:root[data-theme="light"] .wt-page { background: #fafafa; }
/* chart hover tooltip + crosshair line */
.wt-tip { position: absolute; top: 34px; z-index: 6; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; font-size: 12px; color: var(--txt); pointer-events: none; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.5); display: none; }
.wt-tip-d { color: var(--txt2); margin-bottom: 3px; }
.wt-vln { position: absolute; top: 24px; bottom: 34px; width: 0; border-left: 1px dashed var(--txt2); pointer-events: none; display: none; z-index: 5; }
.wt-symcell { display: inline-flex; align-items: center; gap: 7px; }
.wt-symcell .coin { width: 18px; height: 18px; }
/* ---- Transfer / Swap modals ---- */
.tm-box { max-width: 470px; margin: 8vh auto; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 24px; position: relative; }
.tm-head { display: flex; align-items: center; margin-bottom: 18px; }
.tm-title { font-size: 20px; font-weight: 600; color: var(--txt); }
.tm-hist { color: var(--txt2); cursor: pointer; margin-right: 14px; }
.tm-fromto { position: relative; background: var(--elev); border: 1px solid var(--border); border-radius: 10px; padding: 6px 14px; }
.ft-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.ft-div { height: 1px; background: var(--border); }
.ft-lbl { color: var(--txt2); font-size: 13px; width: 34px; flex: 0 0 auto; }
.ft-sel { flex: 1; display: flex; align-items: center; cursor: pointer; }
.ft-sel .ft-val { flex: 1; color: var(--txt); font-size: 14px; }
.ft-sel .cx { color: var(--txt2); font-size: 10px; }
.ft-swapdir { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--txt2); cursor: pointer; font-size: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.ft-swapdir:hover { color: var(--yellow); }
.tm-sec { position: relative; margin-top: 18px; }
.tm-flabel { color: var(--txt); font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.tm-coinbox, .sw-coinbox { display: flex; align-items: center; background: var(--elev); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; cursor: pointer; }
.tm-coinbox { border-color: var(--yellow); }
.tm-coin-l, .sw-coin-l { flex: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--txt); font-size: 14px; }
.tm-coin-l b, .sw-coin-l b { font-weight: 600; }
.tm-coin-nm { color: var(--txt2); font-weight: 400; margin-left: 2px; }
.tm-coin-l .coin, .sw-coin-l .coin, .cm-c .coin { width: 22px; height: 22px; }
.tm-amt { display: flex; align-items: center; background: var(--elev); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.tm-amt input { flex: 1; background: none; border: 0; color: var(--txt); font-size: 15px; outline: none; min-width: 0; }
.tm-cur { color: var(--txt); font-size: 13px; margin: 0 10px; }
.tm-max { color: var(--yellow); font-weight: 600; font-size: 13px; cursor: pointer; }
.tm-avail { color: var(--txt2); font-size: 12px; margin-top: 8px; }
.tm-avail b { color: var(--txt); font-weight: 500; }
.tm-avail .ci { color: var(--txt3); cursor: pointer; }
.tm-confirm { width: 100%; margin-top: 26px; border: 0; border-radius: 8px; padding: 13px; font-size: 15px; font-weight: 600; font-family: inherit; background: var(--surf2); color: var(--txt3); cursor: not-allowed; }
.tm-confirm.on { background: var(--yellow); color: #000; cursor: pointer; }
.tm-confirm.on:hover { filter: brightness(1.06); }
/* dropdown menus (wallet type + coin) */
.pick-menu { display: none; position: absolute; z-index: 30; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.6); max-height: 320px; overflow-y: auto; }
.pick-menu.open { display: block; }
.pick-menu a { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px; border-radius: 6px; color: var(--txt); font-size: 14px; cursor: pointer; }
.pick-menu a:hover { background: var(--elev); }
.pick-menu a.sel { color: var(--txt); }
.pick-menu a.inact { color: var(--txt3); cursor: default; }
.pick-menu a .chk { color: var(--yellow); }
.pick-menu a .tag-inact { font-size: 11px; color: var(--txt3); background: var(--elev); border-radius: 4px; padding: 2px 6px; }
.pick-menu.pm-coin { padding: 8px; }
.cm-search { padding: 2px 2px 8px; }
.cm-inp { width: 100%; background: var(--elev); border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; color: var(--txt); font-size: 13px; outline: none; font-family: inherit; }
.cm-list { max-height: 250px; overflow-y: auto; }
.cm-list a { display: flex; align-items: center; justify-content: space-between; padding: 9px 8px; border-radius: 6px; cursor: pointer; }
.cm-list a:hover { background: var(--elev); }
.cm-c { display: inline-flex; align-items: center; gap: 10px; }
.cm-nm { display: flex; flex-direction: column; line-height: 1.25; }
.cm-nm b { color: var(--txt); font-size: 14px; font-weight: 600; }
.cm-nm i { color: var(--txt2); font-size: 12px; font-style: normal; }
.cm-bal { color: var(--txt); font-size: 13px; font-variant-numeric: tabular-nums; }
.cm-empty { color: var(--txt3); font-size: 13px; text-align: center; padding: 20px; }
/* swap-specific */
.tm-fromto.swap { padding: 12px 16px; }
.sw-row { padding: 8px 0; }
.sw-top { display: flex; align-items: center; gap: 14px; }
.ft-sel.wide { flex: 1; }
.sw-coinbox { margin-top: 10px; border-color: var(--border); }
.sw-info { margin-top: 18px; }
.sw-info .r { display: flex; align-items: center; padding: 8px 0; font-size: 13px; color: var(--txt2); }
.sw-info .r .u { border-bottom: 1px dashed var(--border); }
.sw-info .r b { margin-left: auto; color: var(--txt); font-weight: 500; }
.sw-info .r .rfr { color: var(--txt2); margin-left: 8px; cursor: pointer; }
.sw-note { color: var(--txt3); font-size: 12px; margin-top: 12px; line-height: 1.5; }

/* ===================== WALLET PAGE CHROME (top nav + sidebar) ===================== */
.wt-topnav { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; height: 64px; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--border); }
.wt-brand { font-size: 17px; font-weight: 700; letter-spacing: .4px; color: var(--yellow); white-space: nowrap; margin-right: 34px; display: flex; align-items: center; gap: 7px; }
.wt-brand .wt-logo { font-size: 15px; }
.wt-navlinks { display: flex; gap: 26px; align-items: center; }
.wt-navlinks a { color: var(--txt); font-size: 14px; cursor: pointer; white-space: nowrap; position: relative; }
.wt-navlinks a:hover { color: var(--yellow); }
.wt-navlinks a .cv { font-style: normal; color: var(--txt2); font-size: 10px; margin-left: 3px; }
.wt-navlinks a.dot::after { content: ''; position: absolute; top: -4px; right: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); }
.wt-icbtn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--txt); cursor: pointer; flex: 0 0 auto; }
.wt-icbtn:hover { background: var(--elev); }
.wt-icbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.wt-dep-btn { background: var(--yellow); color: #181A20; border: 0; border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; margin: 0 10px 0 6px; white-space: nowrap; }
.wt-dep-btn:hover { filter: brightness(1.05); }
.wt-x.topx { font-size: 18px; margin-left: 4px; }
/* deposit/withdraw modal must sit above the full-screen wallet overlay (z 1200) */
#deposit-modal { z-index: 1300; }
.wt-shell { display: flex; gap: 0; align-items: flex-start; }
.wt-sidebar { flex: 0 0 256px; padding: 26px 16px 26px 16px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 64px; max-height: calc(100vh - 64px); overflow-y: auto; }
.wt-navside { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 10px; color: var(--txt); font-size: 14px; cursor: pointer; white-space: nowrap; }
.wt-navside:hover { background: var(--elev); }
.wt-navside svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; color: var(--txt2); }
.wt-navside:hover svg { color: var(--txt); }
.wt-navside .cv { font-style: normal; margin-left: auto; color: var(--txt2); font-size: 12px; transition: transform .15s; }
.wt-navgrp.open .hdr .cv { transform: rotate(180deg); }
.wt-navgrp { display: flex; flex-direction: column; gap: 2px; }
.wt-navgrp .wt-subs { display: none; flex-direction: column; gap: 2px; }
.wt-navgrp.open .wt-subs { display: flex; }
.wt-navside.sub { padding: 10px 16px 10px 50px; font-size: 13.5px; color: var(--txt2); }
.wt-navside.sub:hover { color: var(--txt); }
.wt-navside.sub.active { color: var(--yellow); background: var(--elev); font-weight: 600; }
.wt-inner.main { flex: 1; max-width: 1180px; margin: 0; padding: 24px 32px 60px 20px; min-width: 0; }
.wt-dots { cursor: pointer; color: var(--txt2); font-size: 20px; padding: 2px 8px; line-height: 1; }
.wt-dots:hover { color: var(--txt); }
#acct-multi.on { color: var(--yellow); border-color: var(--yellow); }
@media (max-width: 1250px) { .wt-navlinks { gap: 18px; } }
@media (max-width: 1080px) { .wt-navlinks a.dd:not([data-nav]) { display: none; } }
@media (max-width: 900px) { .wt-sidebar { display: none; } .wt-navlinks { display: none; } .wt-inner.main { padding: 20px 16px 50px; } }

/* ===================== DEPOSIT / WITHDRAW VERTICAL STEPPER ===================== */
.fx-flow { padding: 4px 2px 6px; }
.fx-step { display: flex; gap: 14px; }
.fx-rail { position: relative; flex: 0 0 22px; display: flex; justify-content: center; }
.fx-step:not(.last) .fx-rail::before { content: ''; position: absolute; top: 6px; bottom: -14px; left: 50%; transform: translateX(-50%); width: 1px; background: var(--border); }
.fx-node { position: relative; z-index: 1; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--txt3); }
.fx-node::before { content: ''; position: absolute; inset: 2px; transform: rotate(45deg); border: 1px solid var(--txt3); border-radius: 3px; background: var(--panel); z-index: -1; }
.fx-node.active { color: var(--txt); }
.fx-node.active::before { border-color: var(--yellow); }
.fx-node.done { color: #fff; }
.fx-node.done::before { background: var(--green); border-color: var(--green); }
.fx-cont { flex: 1; padding-bottom: 22px; min-width: 0; }
.fx-h { font-size: 15px; font-weight: 600; color: var(--txt); margin-bottom: 10px; }
.fx-dd { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--elev); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; color: var(--txt); font-size: 14px; font-family: inherit; cursor: pointer; }
.fx-dd:hover { border-color: var(--txt3); }
.fx-dd[disabled] { opacity: .5; cursor: not-allowed; }
.fx-dd-coin { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fx-dd-coin i { color: var(--txt2); font-style: normal; font-size: 12px; }
.fx-ph { color: var(--txt3); }
.fx-cx, .fx-cx2 { color: var(--txt3); font-size: 12px; }
.fx-hint { margin-top: 10px; color: var(--txt2); font-size: 12px; }
.fx-hint b { color: var(--txt); }
.fx-await { color: var(--txt3); font-size: 13px; padding: 4px 0 2px; line-height: 1.5; }
.fx-addrbox { background: var(--elev); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.fx-qr { width: 156px; height: 156px; background: #fff; border-radius: 8px; padding: 8px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; }
.fx-qr svg { width: 100%; height: 100%; display: block; }
.fx-addr-r { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.fx-addr-r:last-child { margin-bottom: 0; }
.fx-addr-k { color: var(--txt2); font-size: 12px; }
.fx-addr-v { display: flex; align-items: center; gap: 8px; }
.fx-addr-v span { flex: 1; word-break: break-all; font-size: 13px; color: var(--txt); font-variant-numeric: tabular-nums; }
.fx-copy { background: transparent; border: 0; color: var(--yellow); font-size: 15px; cursor: pointer; flex: 0 0 auto; }
.fx-meta { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.fx-meta > div { display: flex; justify-content: space-between; font-size: 12px; }
.fx-meta > div span:first-child { color: var(--txt2); }
.fx-meta > div span:last-child { color: var(--txt); }
.fx-more { margin-top: 12px; color: var(--txt2); font-size: 12px; text-align: center; cursor: pointer; }
.fx-more.open .fx-cx { transform: rotate(180deg); display: inline-block; }
.fx-more-body { margin-top: 10px; }
.fx-tabs { display: flex; gap: 20px; margin-bottom: 12px; }
.fx-tab { color: var(--txt3); font-size: 13px; cursor: pointer; padding-bottom: 4px; }
.fx-tab.on { color: var(--txt); border-bottom: 2px solid var(--yellow); font-weight: 600; }
.fx-inp { display: flex; align-items: center; gap: 8px; background: var(--elev); border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; margin-bottom: 12px; }
.fx-inp input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--txt); font-size: 14px; font-family: inherit; }
.fx-inp input::-webkit-outer-spin-button, .fx-inp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fx-inp-ic { color: var(--txt3); font-size: 15px; }
.fx-inp-cur { color: var(--txt2); font-weight: 600; font-size: 13px; }
.wd-max { color: var(--yellow); font-size: 12px; font-weight: 700; cursor: pointer; }
.fx-avl { color: var(--txt2); font-size: 12px; margin-bottom: 14px; }
.fx-avl b { color: var(--txt); }
.fx-recv { color: var(--txt3); }
.fx-submit { width: 100%; background: var(--surf2); color: var(--txt3); border: 0; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 700; cursor: not-allowed; font-family: inherit; }
.fx-submit.on { background: var(--yellow); color: #000; cursor: pointer; }
.dep-it-bal { color: var(--txt); font-size: 13px; font-variant-numeric: tabular-nums; }
.fx-recent { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; }
.fx-rec-h { font-size: 14px; font-weight: 600; color: var(--txt); margin-bottom: 12px; }
.fx-rec-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.fx-rec-m { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.fx-rec-m b { font-size: 13px; color: var(--txt); }
.fx-rec-m span { color: var(--txt2); font-size: 11px; }
.fx-rec-t { color: var(--txt3); font-size: 11px; }
.fx-rec-empty { color: var(--txt3); font-size: 12px; padding: 4px 0; }