/* mSamex Desktop + Tablet — pro trading terminal (industry-standard density)
 * Reuses design tokens. Hairline separators via 1px grid gaps on --line. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--snow); font-family: var(--font); font-size: 13px; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01","cv02"; overflow: hidden; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.up { color: var(--up); } .down { color: var(--down); } .warn { color: var(--warn); } .muted { color: var(--mute); }
.row { display: flex; align-items: center; } .between { justify-content: space-between; }
a, button, input { font-family: inherit; }
input, textarea, select { background-color: transparent; color: var(--snow); border: none; }
input:focus, textarea:focus, select:focus { outline: none; }
input::placeholder { color: var(--mute); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 5px; }
[dir="rtl"] .mono { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .term, [dir="rtl"] .ticker, [dir="rtl"] .pair-strip, [dir="rtl"] .chart-stage, [dir="rtl"] .ob-scroll { direction: ltr; }
[dir="rtl"] .nav, [dir="rtl"] .top-right { direction: rtl; }
::selection { background: var(--mint); color: var(--ink); }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 7px; }
::-webkit-scrollbar-track { background: transparent; }

.app { height: 100vh; display: flex; flex-direction: column; }

/* ===== Top bar ===== */
.topbar { display: flex; align-items: center; gap: 22px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: var(--bg); }
.brand { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 0; }
.brand .wm { font-weight: 700; font-size: 16px; letter-spacing: -0.03em; color: var(--snow); }
.brand .wm-s { color: var(--mint); }
.nav { display: flex; gap: 2px; }
.nav button { background: none; border: none; color: var(--snow-dim); font-size: 13.5px; font-weight: 500; padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.nav button:hover { color: var(--snow); }
.nav button.active { color: var(--mint); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tsearch { position: relative; display: flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 6px 10px; width: 200px; }
.tsearch svg { width: 15px; height: 15px; color: var(--mute); }
.tsearch input { flex: 1; min-width: 0; background: none; border: none; color: var(--snow); font-size: 13px; }
.tsearch input:focus { outline: none; }
.tsearch:focus-within { border-color: var(--mint); }
.tsearch-results { position: absolute; top: calc(100% + 6px); left: 0; width: 340px; max-width: 80vw; max-height: 380px; overflow-y: auto; background: var(--card, var(--surface)); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.45); z-index: 220; display: none; }
.tsearch-results.open { display: block; }
.tsearch-row { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.tsearch-row:hover, .tsearch-row.on { background: var(--elevated); }
.tsearch-row .ts-pair strong { font-size: 13px; display: block; }
.tsearch-row .ts-pair small { font-size: 11px; }
.tsearch-row .ts-px { font-size: 12.5px; }
.tsearch-empty { padding: 20px; text-align: center; color: var(--snow-dim); font-size: 13px; }
.ibtn { width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--line); background: none; color: var(--snow-dim); display: grid; place-items: center; cursor: pointer; }
.ibtn:hover { color: var(--snow); border-color: var(--mute); }
.ibtn svg { width: 16px; height: 16px; }
.tbtn { border: none; border-radius: 7px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.tbtn.pri { background: var(--mint); color: var(--ink); }
.tbtn.ghost { background: var(--surface); color: var(--snow); border: 1px solid var(--line); }
.av { width: 32px; height: 32px; border-radius: 7px; background: var(--mint); color: var(--ink); border: none; font-weight: 700; font-size: 12px; cursor: pointer; }

/* ===== Ticker strip ===== */
.ticker { height: 30px; border-bottom: 1px solid var(--line); overflow: hidden; flex-shrink: 0; background: var(--surface); }
/* Gentle auto-scroll marquee, matched in speed to the landing ticker (~90px/s,
   set in JS from track width). Pause on hover so entries stay readable/clickable. */
/* height:100% — without it the track sat at CONTENT height pinned to the TOP of
   the 30px band (owner 2026-07-10: "a little upper, not centered like landing").
   Full-height track + stretched buttons (whose own align-items:center centers the
   text) = vertically centered entries with full-height separators. */
.ticker-track { display: flex; width: max-content; height: 100%; align-items: stretch; animation: tickerscroll 60s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
[dir="rtl"] .ticker-track { animation-direction: reverse; }
@keyframes tickerscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
.ticker::-webkit-scrollbar { display: none; }
.ticker button { display: flex; align-items: center; gap: 6px; padding: 0 14px; background: none; border: none; border-right: 1px solid var(--line-soft); white-space: nowrap; cursor: pointer; font-size: 12px; color: var(--snow-dim); }
.ticker button:hover { background: var(--elevated); }
.ticker strong { color: var(--snow); font-weight: 600; }

.main { flex: 1; overflow: hidden; }
.view { height: 100%; overflow-y: auto; }
.view.term-view { overflow: hidden; }

/* ===== TERMINAL (4-pane + watchlist) ===== */
/* Rows: 1 pair-strip · 2 closed-market banner · 3 chart+book · 4 positions.
   Row 4 is driven by --pos-h so the drag splitter can resize it live; the value is
   persisted per-user in localStorage (msx.posH) exactly like the watchlist collapse.
   Positions spans chart+book (cols 2-3) and stops at the order form, which now runs
   full height (rows 3-4) — the form is the one pane a trader must never lose. */
.term { display: grid; grid-template-columns: 232px 1fr 248px 296px; grid-template-rows: auto auto 1fr var(--pos-h, 404px); height: 100%; gap: 1px; background: var(--line); transition: grid-template-columns .22s ease; }
/* Collapsed watchlist: col 1 shrinks to a thin icon rail; chart/book/form
   reflow to fill the freed width. State persisted in localStorage. */
.term.wl-collapsed { grid-template-columns: 36px 1fr 248px 296px; }
.term > *, .term-center, .book-col { min-width: 0; }
.pane { background: var(--bg); min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.pane-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.ob-grp { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--mute); font-size: 11px; font-weight: 600; padding: 2px 6px; cursor: pointer; outline: none; }
.ob-grp:hover { color: var(--snow); }
.pane-head .ph-tabs { display: flex; gap: 12px; }
.pane-head .ph-tabs button { background: none; border: none; color: var(--mute); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.pane-head .ph-tabs button.active { color: var(--snow); }

/* pair header strip (spans center+right+form columns) */
.pair-strip { grid-column: 2 / 5; grid-row: 1; background: var(--bg); display: flex; align-items: center; gap: 26px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; }
/* Closed-market banner: its own row, cols 2-5 so it can never overlap the
   watchlist (which now spans all four rows). Collapses to 0 when display:none. */
.term-banner { grid-column: 2 / 5; grid-row: 2; }
.pair-strip::-webkit-scrollbar { display: none; }
.pair-id { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.pair-id .pn { font-size: 17px; font-weight: 700; }
.pair-id .perp { font-size: 9px; background: var(--elevated); color: var(--snow-dim); padding: 2px 5px; border-radius: 4px; }
.pair-last { display: flex; flex-direction: column; }
.pair-last .pl { font-size: 18px; font-weight: 700; }
.pair-last .pl-sub { font-size: 10px; color: var(--mute); }
.pstat { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.pstat span { font-size: 9.5px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.05em; }
.pstat strong { font-size: 12.5px; font-weight: 500; }

/* watchlist sidebar (rows 1-2, col 1) */
.wl-pane { grid-column: 1; grid-row: 1 / 5; }
.term-center { grid-column: 2; grid-row: 3; display: flex; flex-direction: column; min-height: 0; gap: 1px; background: var(--line); }
.term-center .chart-pane { flex: 1; min-height: 0; }
/* Positions is a top-level grid row now (was nested in .term-center at a fixed
   232px). Spanning cols 2-3 is what removes the cramping: the 13-column row and
   the action cluster get the chart's width PLUS the book's, so nothing wraps. */
.orders-pane { grid-column: 2 / 4; grid-row: 4; position: relative; min-height: 0; }
/* The book column now ENDS where the chart ends (was grid-row 2/4, running past it). */
.book-col { grid-column: 3; grid-row: 3; display: flex; flex-direction: column; min-height: 0; gap: 1px; background: var(--line); }
/* Order Book / Recent Trades are TABS now, not a vertical split. The book owns the
   whole column (was flex 1.5 of a 1.5/1 split), so depth goes from ~11 levels a
   side to ~19 without the column getting any taller. Trades are one click away. */
.book-col .ob-pane { flex: 1; min-height: 0; }
.book-col .trades-pane { flex: 1; min-height: 0; display: none; }
.book-col.show-trades .ob-pane { flex: none; }
.book-col.show-trades .ob-pane .ob-cols,
.book-col.show-trades .ob-pane .ob-scroll { display: none; }
.book-col.show-trades .trades-pane { display: flex; }
.book-col .ph-tabs button { padding: 0; }
.wl-search { display: flex; align-items: center; gap: 7px; margin: 8px 10px; padding: 6px 9px; background: var(--surface); border-radius: 6px; }
.wl-search svg { width: 14px; height: 14px; color: var(--mute); }
.wl-search input { flex: 1; background: none; border: none; color: var(--snow); font-size: 12px; }
.wl-search input:focus { outline: none; }
.wl-tabs { display: flex; gap: 4px; padding: 0 10px 6px; }
.wl-tabs button { background: none; border: none; color: var(--mute); font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 5px; cursor: pointer; }
.wl-tabs button.active { background: var(--surface); color: var(--snow); }
.wl-cols { display: grid; grid-template-columns: 1.3fr 1fr 0.9fr; padding: 4px 12px; font-size: 9.5px; color: var(--mute); }
.wl-cols span:not(:first-child) { text-align: right; }
.wl-list { overflow-y: auto; flex: 1; }
.wl-row { display: grid; grid-template-columns: 1.3fr 1fr 0.9fr; align-items: center; padding: 6px 12px; cursor: pointer; border-left: 2px solid transparent; }
.wl-row:hover { background: var(--surface); }
.wl-row.active { background: var(--surface); border-left-color: var(--mint); }
.wl-row .wp strong { font-size: 12px; font-weight: 600; display: block; }
.wl-row .wp small { font-size: 9.5px; color: var(--mute); }
.wl-row .wpr { text-align: right; font-size: 11.5px; }
.wl-row .wch { text-align: right; font-size: 11px; font-weight: 600; }

/* watchlist collapse/expand (Binance/Bybit pattern) */
.wl-pane { position: relative; }
.wl-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 2px; }
.wl-head .wl-title { font-size: 11px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.wl-toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: none; background: none; color: var(--mute); border-radius: 5px; cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; }
.wl-toggle:hover { background: var(--surface); color: var(--snow); }
.wl-toggle svg { width: 14px; height: 14px; }
/* collapsed: hide the body, show a vertical "expand" rail */
.term.wl-collapsed .wl-body { display: none; }
.wl-rail { display: none; }
.term.wl-collapsed .wl-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.term.wl-collapsed .wl-rail .wl-toggle { width: 28px; height: 28px; }
.wl-rail-label { writing-mode: vertical-rl; font-size: 10px; font-weight: 600; color: var(--mute); letter-spacing: .12em; text-transform: uppercase; user-select: none; }
.term.wl-collapsed .wl-head { display: none; }

/* chart pane */
.chart-pane { display: flex; flex-direction: column; }
.chart-tools { display: flex; align-items: center; gap: 14px; padding: 7px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.chart-tools .tf { display: flex; gap: 2px; }
.chart-tools .tf button, .chart-tools .ind button { background: none; border: none; color: var(--snow-dim); font-size: 11.5px; font-weight: 500; padding: 4px 8px; border-radius: 5px; cursor: pointer; }
.chart-tools .tf button.active { background: var(--elevated); color: var(--mint); }
.chart-tools .ind { display: flex; gap: 6px; margin-left: auto; }
.chart-tools .ind button:hover { color: var(--snow); }
.chart-tools .ind button.active { color: var(--snow); }
.chart-ma { display: flex; gap: 14px; padding: 5px 12px; font-size: 10.5px; font-family: var(--mono); }
.chart-stage { flex: 1; min-height: 0; padding: 4px 8px 8px; }
.chart-stage > div { width: 100%; height: 100%; }

/* orders pane (bottom of center) */
.otabs { display: flex; gap: 16px; padding: 9px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.otabs button { background: none; border: none; color: var(--mute); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.otabs button.active { color: var(--snow); }
.otable { overflow-y: auto; overflow-x: auto; flex: 1; }
/* = sum of the minmax() floors above. Below this the row stops shrinking and the
   table scrolls sideways, so digits are never crushed on a small laptop. */
.otable .prow.wide { min-width: 1600px; }
/* The action buttons must never compress into one another — they are the controls
   that close real money. Let the cluster keep its natural width. */
.pos-row-acts > * { flex: none; }

/* ── inline margin stepper (isolated only) ───────────────────────────────────
   +/- straight on the Margin cell; the full modal stays available via "Margin". */
.mg-cell { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; }
.mg-step { width: 17px; height: 17px; flex: none; display: inline-grid; place-items: center;
           border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
           color: var(--mute); font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.mg-step:hover { border-color: var(--mint); color: var(--mint); }
.mg-step:disabled { opacity: .35; cursor: not-allowed; }
.mg-step:disabled:hover { border-color: var(--line); color: var(--mute); }

/* ── inline close: qty + Market/Limit + Close, in-row (replaces Limit+Close) ── */
.pos-close-inline { display: flex; align-items: center; gap: 4px; flex: none; }
.pos-close-inline input { width: 62px; min-width: 0; background: var(--surface); border: 1px solid var(--line);
                          border-radius: 5px; color: var(--snow); font-family: var(--mono); font-size: 10.5px;
                          padding: 3px 6px; text-align: right; }
.pos-close-inline input:focus { outline: none; border-color: var(--mint); }
.pos-close-inline select { background: var(--surface); border: 1px solid var(--line); border-radius: 5px;
                           color: var(--snow-dim); font-size: 10.5px; padding: 3px 4px; cursor: pointer; }
.pos-close-inline select:focus { outline: none; border-color: var(--mint); }
/* Unit marker on the close box: "Lot" for contract markets, the base asset otherwise.
   Without it a lot-mode user cannot tell what the number they typed means. */
.pci-unit { font-size: 9.5px; color: var(--mute); letter-spacing: .02em; flex: none; }
.orow { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr 1fr 1fr 0.9fr 0.8fr; align-items: center; padding: 8px 12px; font-size: 12px; border-bottom: 1px solid var(--line-soft); }
.orow.ohead { color: var(--mute); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; position: sticky; top: 0; background: var(--bg); }
.orow .cancel { background: none; border: 1px solid var(--line); border-radius: 5px; color: var(--down); font-size: 11px; padding: 3px 9px; cursor: pointer; justify-self: start; }
.prow { display: grid; grid-template-columns: 1.6fr 0.7fr 0.9fr 0.9fr 1fr 0.9fr 1.5fr 0.7fr; align-items: center; padding: 9px 12px; font-size: 12px; border-bottom: 1px solid var(--line-soft); }
/* Pinned like .orow.ohead already is: with the pane now tall enough to scroll a long
   book of positions, the column names must stay on screen or the numbers lose their
   meaning halfway down. */
.prow.ohead { color: var(--mute); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; position: sticky; top: 0; z-index: 3; background: var(--bg); }
/* Freeze the Symbol column on horizontal scroll, so you always know WHICH position a
   row of numbers belongs to. Needs an opaque background or the scrolled cells show
   through, and a hairline to read as a frozen edge. */
.prow.wide > *:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg);
                             box-shadow: 1px 0 0 var(--line-soft); }
.prow.ohead.wide > *:first-child { z-index: 4; }
/* The row background must follow the row, not the page, or the frozen cell reads as
   a different row on hover. */
.prow.wide:hover { background: var(--surface); }
.prow.wide:hover > *:first-child { background: var(--surface); }
.prow.wide.pos-row-error > *:first-child { background: var(--bg); }
.prow span:not(:first-child) { text-align: right; }
.prow strong { font-size: 12.5px; }
.prow .cancel { background: var(--down); color: #fff; border: none; border-radius: 5px; font-size: 11px; padding: 4px 12px; cursor: pointer; justify-self: end; }
/* Wide positions grid:
   Symbol Size Entry Break-even Mark Liq MarginRatio Margin UnrealPnL RealizedPnL Funding TP/SL Actions
   Realized PnL and Funding are new — both already come off the engine
   (private.rs serialises realized_pnl + funding_fee), so they cost no API work. */
/* Every .prow is its OWN grid, so columns only line up with the header while no cell
   exceeds its fr share — a bare `fr` track is minmax(auto,1fr) and GROWS to fit its
   content, which is what pushed data cells up to 177px out of step with the header.
   Explicit minmax() floors fix that in both directions:
     · the max (fr) stops a wide cell from stealing width from its neighbours;
     · the min (px) reserves room for the widest realistic value, so a low-priced
       high-decimal market (0.00001234, 8 decimals) is never clipped, while a
       high-priced low-decimal one (1,893,548.85) still fits.
   Price floors are sized for 12 mono glyphs at 12.5px. Below the summed minimum the
   row stops shrinking and .otable scrolls horizontally instead of crushing digits. */
.prow.wide {
  grid-template-columns:
    minmax(150px, 1.7fr)   /* Symbol      */
    minmax(88px,  0.75fr)  /* Size — 2026-09-18: 58px clipped "13,251.00" (TRX) to "13251…"; 88px fits 9 mono chars + padding */
    minmax(80px,  0.8fr)   /* Entry       */
    minmax(80px,  0.8fr)   /* Break-even  */
    minmax(80px,  0.8fr)   /* Mark        */
    minmax(80px,  0.8fr)   /* Liq. Price  */
    minmax(64px,  0.8fr)   /* Margin Ratio*/
    minmax(112px, 0.9fr)   /* Margin (+/-)*/
    minmax(120px, 1.35fr)  /* Unreal. PnL */
    minmax(80px,  0.9fr)   /* Realized PnL*/
    minmax(84px,  0.85fr)  /* Funding/Swap*/
    minmax(152px, 1.2fr)   /* TP/SL — fits "2,687.68 / 2,431.44"; at 96px the
                              ellipsis guard clipped the SL to "2…" */
    minmax(430px, 2.6fr);  /* Actions — measured content width of the full cluster:
                              Share · Margin · TP/SL · Reverse · [qty][type][Close].
                              At 300px the buttons compressed into each other. */
}
.prow.wide > span, .prow.wide > div { padding-right: 10px; }
.prow.wide > *:last-child { padding-right: 0; }
/* Last-resort guard: if a value still exceeds its floor (a market with even more
   decimals than we sized for), truncate with an ellipsis rather than pushing every
   column after it out of alignment. The full value stays available on hover. */
.prow.wide > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pos-tpsl { white-space: nowrap; }
.prow .cancel.ghost { background: none; border: 1px solid var(--line); color: var(--txt-2, var(--mute)); }
.pos-sym { cursor: pointer; }
.pos-sym:hover strong { color: var(--mint); }
.pos-tpsl { font-size: 11px; }
/* Graphical margin-ratio bar: % + thin filled track. */
.mr-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 56px; }
.mr-cell .mr-pct { font-size: 11px; line-height: 1; }
.mr-cell .mr-track { width: 100%; max-width: 72px; height: 4px; background: var(--line, #252A33); border-radius: 2px; overflow: hidden; }
.mr-cell .mr-fill { height: 100%; border-radius: 2px; transition: width .2s ease-out, background .2s ease-out; }
.mr-cell.muted .mr-na { font-size: 10px; color: var(--mute); letter-spacing: .04em; }
/* nowrap: with the pane spanning cols 2-3 there is room for the whole cluster on
   one line. Wrapping was what pushed Close onto a second row and made the panel
   look like everything was piled into everything else. */
.pos-row-acts { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: nowrap; align-items: center; }
.pos-row-acts .cancel { padding: 3px 8px; font-size: 10.5px; white-space: nowrap; }

/* ── drag splitter between chart and positions ───────────────────────────────
   Sits on the positions pane's top edge, over the grid's 1px gap line. Pointer
   Events (not mouse) so it works with a trackpad, pen and touch alike. */
.pos-resize { position: absolute; top: -4px; left: 0; right: 0; height: 8px; cursor: row-resize;
              z-index: 6; touch-action: none; }
.pos-resize::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 3px;
                     transform: translate(-50%,-50%); border-radius: 2px; background: var(--line);
                     transition: background .15s; }
.pos-resize:hover::after, .pos-resize.dragging::after { background: var(--mint); }
/* While dragging, kill text selection and pointer noise across the whole app. */
body.pos-resizing { user-select: none; cursor: row-resize; }
body.pos-resizing iframe, body.pos-resizing .chart-stage { pointer-events: none; }
.pos-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); }
.pos-toolbar-acts { display: flex; gap: 6px; }
.tbtn.xs { padding: 3px 10px; font-size: 11px; }
.tbtn.xs.danger { color: var(--down); border-color: var(--down); }
.tpsl-proj { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 10px; font-size: 12px; }
.tpsl-proj .k { color: var(--mute); }
/* Adjust Margin modal */
.am-tabs { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.am-tab { flex: 1; background: transparent; border: none; border-radius: 6px; padding: 8px 0; font-size: 13px; font-weight: 600; color: var(--mute); cursor: pointer; transition: background .12s, color .12s; }
.am-tab.up.active { background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); }
.am-tab.down.active { background: color-mix(in srgb, var(--down) 16%, transparent); color: var(--down); }
.am-max { background: var(--elevated); border: 1px solid var(--line); border-radius: 5px; color: var(--mint); font-size: 11px; font-weight: 600; padding: 4px 9px; margin: 0 8px; cursor: pointer; }
.am-max:hover { border-color: var(--mint); }
.am-proj { margin-top: 2px; }
.am-warn { background: color-mix(in srgb, var(--down) 11%, transparent); color: var(--down); }
.dep-sel input { background: transparent; border: none; color: var(--snow); font-size: 14px; flex: 1; min-width: 0; outline: none; }
.acct-drow { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.acct-drow:last-child { border-bottom: none; }
.acct-drow strong { font-size: 13.5px; display: block; } .acct-drow small { font-size: 12px; display: block; }
.pos-tag { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font-size: 9px; font-weight: 700; margin-right: 7px; }
.pos-tag.long { background: var(--up-wash); color: var(--up); } .pos-tag.short { background: var(--down-wash); color: var(--down); }
.opane-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px; color: var(--mute); font-size: 12px; }

/* orderbook + trades (col 3) */
.ob-mode { display: flex; gap: 4px; }
.ob-mode button { width: 22px; height: 18px; border: 1px solid var(--line); background: none; border-radius: 3px; cursor: pointer; padding: 2px; }
.ob-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 4px 12px; font-size: 9.5px; color: var(--mute); }
.ob-cols span:not(:first-child) { text-align: right; }
.ob-scroll { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ob-side { display: flex; flex-direction: column; flex: none; overflow: hidden; scrollbar-width: none; }
.ob-side.asks > :first-child { margin-top: auto; }
.ob-row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; flex: none; height: 17px; box-sizing: border-box; position: relative; padding: 0 12px; font-size: 11px; font-family: var(--mono); cursor: pointer; transition: background .2s; }
.ob-row:hover { background: var(--surface); }
.ob-row span { position: relative; z-index: 1; }
/* "You have an order at this level" marker — a dot in front of the price. */
.ob-row.mine .px::before { content: "\25CF"; color: var(--mint); font-size: 7px; margin-right: 4px; vertical-align: middle; }
.ob-row.mine .px { color: var(--mint); }
.ob-row span:not(.px):not(.fill) { text-align: right; color: var(--snow-dim); }
.ob-row.ask .px { color: var(--down); } .ob-row.bid .px { color: var(--up); }
.ob-row .fill { position: absolute; right: 0; top: 0; bottom: 0; z-index: 0; transition: width 400ms ease-out; }
.ob-row.ask .fill { background: var(--depth-down, var(--down-wash)); } .ob-row.bid .fill { background: var(--depth-up, var(--up-wash)); }
/* size-change flash (prev-vs-new) — quick highlight that fades via the .2s bg transition */
.ob-row.flash-up { background: var(--up-wash); }
.ob-row.flash-down { background: var(--down-wash); }
/* HOLD-LAST-GOOD staleness: during an engine/LP restart or WS gap the book keeps
   showing the last-good depth, but dimmed, with a subtle "reconnecting…" tag —
   it NEVER blanks to 0. The tag is hidden until .ob-stale is set on the pane. */
.ob-stale-tag { display: none; font-size: 9.5px; font-weight: 600; color: var(--warn); opacity: .9; letter-spacing: .02em; margin-left: auto; margin-right: 8px; }
.ob-pane.ob-stale .ob-stale-tag { display: inline; animation: ob-pulse 1.6s ease-in-out infinite; }
/* "Updating", not "disabled": a subtle dim with NO greyscale, so prices stay legible
   and coloured (green/red) while the last-good book is held during a brief WS gap. */
.ob-pane.ob-stale .ob-scroll { opacity: .8; transition: opacity .3s ease; }
.ob-pane .ob-scroll { transition: opacity .25s ease, filter .25s ease; }
@keyframes ob-pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.ob-mid { flex: none; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ob-mid .mp { font-size: 16px; font-weight: 700; font-family: var(--mono); }
.ob-mid .mp-sub { font-size: 10px; color: var(--mute); font-family: var(--mono); }
.trades-list { overflow-y: auto; flex: 1; }
.trade-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 2px 12px; font-size: 11px; font-family: var(--mono); }
.trade-row span:not(:first-child) { text-align: right; }

/* order form (col 4) */
.form-pane { grid-column: 4; grid-row: 3 / 5; padding: 12px; gap: 10px; overflow-y: auto; }
.bs-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.bs-tabs button { background: var(--surface); border: none; padding: 9px; font-size: 13px; font-weight: 600; color: var(--snow-dim); cursor: pointer; }
.bs-tabs button.buy.active { background: var(--up); color: var(--ink); }
.bs-tabs button.sell.active { background: var(--down); color: #fff; }
.lev-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lev-pill { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px; font-size: 12px; font-weight: 600; color: var(--snow); display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.otype { display: flex; gap: 14px; }
.otype button { background: none; border: none; color: var(--snow-dim); font-size: 12px; cursor: pointer; padding: 2px 0 5px; border-bottom: 1.5px solid transparent; }
.otype button.active { color: var(--snow); border-bottom-color: var(--mint); }
.favbl { display: flex; justify-content: space-between; font-size: 11px; }
.finput { display: flex; flex-direction: column; gap: 4px; }
.finput .fl { font-size: 9.5px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.05em; }
.finput .fb { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; }
.finput .fb:focus-within { border-color: var(--mint); }
.finput input { flex: 1; background: none; border: none; color: var(--snow); padding: 9px 0; font-family: var(--mono); font-size: 13px; min-width: 0; }
.finput input:focus { outline: none; }
.finput .sfx { color: var(--mute); font-size: 11px; }
.finput .mx { background: none; border: none; color: var(--mint); font-size: 11px; font-weight: 700; cursor: pointer; }
/* TP/SL price inputs (shown when TP/SL checked). Two equal fields that must stay
   INSIDE the order-form column — min-width:0 lets flex shrink them so they never
   spill past the panel edge (was an unstyled .ftpsl div → raw inputs overflowed). */
.ftpsl { display: flex; gap: 8px; margin-top: 2px; }
.ftpsl input { flex: 1 1 0; min-width: 0; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--snow); padding: 9px 10px; font-family: var(--mono); font-size: 13px; }
.ftpsl input::placeholder { color: var(--mute); }
.ftpsl input:focus { outline: none; border-color: var(--mint); }
.fslider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--surface); border-radius: 4px; }
.fslider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--mint); border: 3px solid var(--bg); cursor: pointer; }
.fpcts { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.fpcts button { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; color: var(--snow-dim); font-family: var(--mono); font-size: 11px; padding: 5px 0; cursor: pointer; }
.fpcts button.active { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.fmeta { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; border-top: 1px solid var(--line); }
.fmeta > div { display: flex; justify-content: space-between; font-size: 11.5px; }
.fmeta span { color: var(--mute); }
.fbig { border: none; border-radius: 7px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.fbig.buy { background: var(--up); color: var(--ink); } .fbig.sell { background: var(--down); color: #fff; }
.fbig:disabled { opacity: 0.45; cursor: not-allowed; }
.facct { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11.5px; }
.facct > div { display: flex; justify-content: space-between; }

/* Dual bottom action buttons (futures): Open Long | Open Short */
.fdual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fdual .fbig { width: 100%; }

/* Transfer icon next to the Avbl row (spot <-> futures). The icon hugs the value. */
.favbl { align-items: center; }
.favbl .mono { margin-left: auto; }
.favbl-xfer { margin-left: 6px; padding: 0; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--mint); cursor: pointer; }
.favbl-xfer svg { width: 14px; height: 14px; }
.favbl-xfer:hover { color: var(--mint-deep); }

/* ===== Margin Health panel (futures) — zoned radial gauge + liq proximity ===== */
.mh { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; padding: 11px 12px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface), var(--bg)); }
.mh-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.mh-tag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: var(--r-full); transition: color var(--d-base) var(--ease-standard), background var(--d-base) var(--ease-standard); }
.mh-tag.up { color: var(--up); background: var(--up-wash); }
.mh-tag.warn { color: var(--warn); background: rgba(240,185,11,0.12); }
.mh-tag.down { color: var(--down); background: var(--down-wash); }

/* radial arc gauge */
.mh-arc { position: relative; display: flex; justify-content: center; padding-top: 2px; }
.mh-gauge { width: 156px; height: 86px; overflow: visible; }
.mh-track { fill: none; stroke: var(--elevated); stroke-width: 9; stroke-linecap: round; }
.mh-zone { fill: none; stroke-width: 9; stroke-linecap: butt; opacity: .26; }
.mh-zone.z-up { stroke: var(--up); }
.mh-zone.z-warn { stroke: var(--warn); }
.mh-zone.z-down { stroke: var(--down); }
.mh-val { fill: none; stroke: var(--up); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 4px currentColor); transition: stroke-dashoffset var(--d-slow) var(--ease-decel), stroke var(--d-base) var(--ease-standard); }
.mh-mm { stroke: var(--snow); stroke-width: 1.6; opacity: .5; }
.mh-center { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; pointer-events: none; }
.mh-pct { font-size: 21px; font-weight: 700; line-height: 1; transition: color var(--d-base) var(--ease-standard); }
.mh-word { font-size: 10px; font-weight: 600; letter-spacing: .05em; margin-top: 3px; text-transform: uppercase; transition: color var(--d-base) var(--ease-standard); }

/* liquidation proximity strip */
.mh-liq { display: flex; flex-direction: column; gap: 5px; padding: 8px 9px; border-radius: var(--r-md); background: var(--elevated); border: 1px solid transparent; transition: border-color var(--d-base) var(--ease-standard), background var(--d-base) var(--ease-standard); }
.mh-liq.near { border-color: rgba(240,185,11,0.4); }
.mh-liq.danger { border-color: rgba(246,70,93,0.5); background: var(--down-wash); }
.mh-liq-top { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.mh-liq-ico { font-size: 11px; filter: grayscale(.2); }
.mh-liq.danger .mh-liq-ico { animation: mh-pulse 1.1s ease-in-out infinite; }
.mh-liq-label { color: var(--mute); font-weight: 600; }
.mh-liq-away { margin-left: auto; font-weight: 700; transition: color var(--d-base) var(--ease-standard); }
.mh-liq-meter { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; }
.mh-liq-meter > i { display: block; height: 100%; width: 0%; border-radius: 2px; background: linear-gradient(90deg, var(--warn), var(--down)); transition: width var(--d-slow) var(--ease-decel); }
.mh-liq-price { font-size: 11px; }
/* Explains that the strip is account-wide, so a liquidation from a market other
   than the charted one no longer reads as wrong data. */
.mh-liq-hint { margin-top: 5px; font-size: 9.5px; line-height: 1.35; color: var(--mute); opacity: .85; }
@keyframes mh-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* breakdown rows */
.mh-bd { display: flex; flex-direction: column; gap: 4px; }
.mh-bd-row { display: flex; justify-content: space-between; font-size: 11.5px; }
.mh-bd-row span:first-child { font-size: 11px; }

/* ===== Generic page (markets/wallet/home/earn) ===== */
.page { padding: 20px 24px; max-width: 1600px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.page-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.page-head p { margin: 5px 0 0; color: var(--mute); font-size: 13px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--snow-dim); padding: 6px 13px; font-size: 12.5px; cursor: pointer; }
.chip.active { background: var(--snow); color: var(--ink); border-color: var(--snow); font-weight: 600; }
/* Level-1 asset-class category tabs (Spot / Futures / FX / …) — markets page */
.cat-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.seg-class { background: var(--surface); border: 1px solid transparent; color: var(--snow-dim); font-size: 13.5px; font-weight: 600; padding: 8px 18px; border-radius: 999px; white-space: nowrap; cursor: pointer; letter-spacing: -0.01em; }
.seg-class:hover { color: var(--snow); }
.seg-class.active { background: var(--elevated, var(--surface)); border-color: var(--mint, var(--snow)); color: var(--mint, var(--snow)); }
.sub-chips { margin-bottom: 12px; }
.mt-empty { padding: 40px 16px; text-align: center; font-size: 13.5px; }

/* markets table */
.mtable { overflow: hidden; }
.mrow { display: grid; grid-template-columns: 2.2fr 1.3fr 1.2fr 1.1fr 1.1fr 1.4fr 1fr; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.mrow:hover:not(.mhead) { background: var(--elevated); }
.mhead { color: var(--mute); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line); }
.mcol { font-size: 13.5px; }
.mcol.num { text-align: right; }
.mhead .mcol { cursor: pointer; }
.mpair { display: flex; align-items: center; gap: 10px; }
.mpair .fav { background: none; border: none; color: var(--line); cursor: pointer; padding: 0; display: grid; }
.mpair .fav svg { width: 14px; height: 14px; } .mpair .fav.on { color: var(--warn); }
.mpair strong { font-size: 13.5px; font-weight: 600; display: block; }
.mpair small { font-size: 10.5px; color: var(--mute); }
.mpair .mkt-info { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); color: var(--mute); font-size: 9px; font-style: normal; font-weight: 700; text-decoration: none; line-height: 1; }
.mpair .mkt-info:hover { color: var(--ink); border-color: var(--mute); background: var(--line); }
.mspark { width: 96px; height: 30px; display: inline-block; vertical-align: middle; }
.cpill { display: inline-block; min-width: 70px; text-align: center; padding: 4px 8px; border-radius: 5px; font-size: 12.5px; font-weight: 600; color: #fff; }
.cpill.up { background: var(--up); } .cpill.down { background: var(--down); }
.tradebtn { background: var(--mint); color: var(--ink); border: none; border-radius: 6px; padding: 5px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* home dashboard */
.dash { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.right-col { display: flex; flex-direction: column; gap: 16px; }
.left-col { display: flex; flex-direction: column; gap: 16px; }
.gs-card { padding: 16px; }
.gs-head { display: flex; align-items: flex-start; justify-content: space-between; }
.gs-head h3 { margin: 0; font-size: 14px; }
.gs-bar { height: 5px; background: var(--elevated); border-radius: 4px; overflow: hidden; margin: 12px 0 14px; }
.gs-bar i { display: block; height: 100%; background: var(--mint); transition: width var(--d-slow); }
.gs-steps { display: flex; flex-direction: column; gap: 8px; }
.gs-step { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--elevated); border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; cursor: pointer; color: var(--snow); }
.gs-step:hover:not(:disabled) { border-color: var(--mint); }
.gs-step:disabled { cursor: default; opacity: 0.7; }
.gs-step .gs-dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex-shrink: 0; color: var(--ink); }
.gs-step.done .gs-dot { background: var(--mint); border-color: var(--mint); }
.gs-step > div { flex: 1; } .gs-step strong { font-size: 13px; display: block; } .gs-step small { font-size: 11.5px; }
.gs-step.done strong { color: var(--mute); text-decoration: line-through; }
.gs-go { font-size: 12px; font-weight: 600; color: var(--mint); white-space: nowrap; }
.pos-body { display: flex; flex-direction: column; }
.pos-hd, .pos-rw { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr 1fr 1fr 1.6fr; align-items: center; padding: 9px 16px; font-size: 12.5px; }
.pos-hd { color: var(--mute); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line); }
.pos-hd span:not(:first-child), .pos-rw span:not(:first-child) { text-align: right; }
.pos-rw { border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.pos-rw:last-child { border-bottom: none; } .pos-rw:hover { background: var(--elevated); }
.pos-rw strong { font-size: 13px; }
.pos-tag { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font-size: 9px; font-weight: 700; margin-right: 7px; }
.pos-tag.long { background: var(--up-wash); color: var(--up); } .pos-tag.short { background: var(--down-wash); color: var(--down); }
.dash-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 16px; }
.balcard { padding: 22px; }
.balcard .bn { display: block; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 2px; }
.balcard .bn .cur { font-size: 14px; color: var(--mute); }
.bbreak { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bbreak > div span { font-size: 10.5px; color: var(--mute); display: block; }
.bbreak > div strong { font-size: 15px; }
.qrow { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.qbtn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; background: var(--elevated); border: 1px solid var(--line); border-radius: 7px; color: var(--snow); cursor: pointer; font-size: 12.5px; font-weight: 500; }
.qbtn:hover { border-color: var(--mint); color: var(--mint); }
.qbtn svg { width: 20px; height: 17px; color: var(--mint); }
.dcard-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.dcard-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.dcard-head a { color: var(--mute); font-size: 12px; text-decoration: none; cursor: pointer; }
.dwl { padding: 4px; }
.dwl-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px; cursor: pointer; }
.dwl-row:hover { background: var(--elevated); }
.dwl-row .dp { display: flex; align-items: center; gap: 9px; } .dwl-row .dp strong { font-size: 13px; }
.dwl-row .dspark { width: 64px; height: 26px; justify-self: center; }
.dwl-row .dpr { text-align: right; } .dwl-row .dpr .v { font-size: 13px; }

/* wallet */
.wtop { display: flex; align-items: center; justify-content: space-between; padding: 22px; gap: 20px; flex-wrap: wrap; }
.wtop .bn { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.wactions { display: flex; gap: 10px; }
.segbar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 14px 0; }
.seglegend { display: flex; gap: 26px; flex-wrap: wrap; }
.legi { display: flex; align-items: center; gap: 8px; font-size: 13px; } .legi .d { width: 9px; height: 9px; border-radius: 2px; } .legi strong { font-size: 14px; }
.atable { }
.arow { display: grid; grid-template-columns: 2fr 1.1fr 1.1fr 1.1fr 1.1fr 1.1fr 1.6fr; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.arow.ahead { color: var(--mute); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.arow > span:not(:first-child) { text-align: right; }
.aasset { display: flex; align-items: center; gap: 10px; } .aasset strong { font-size: 13.5px; }
.aact { display: flex; gap: 6px; justify-content: flex-end; }
.aact button { background: none; border: 1px solid var(--line); border-radius: 5px; color: var(--snow-dim); font-size: 11.5px; padding: 4px 10px; cursor: pointer; }
.aact button:hover { color: var(--snow); border-color: var(--mute); }

/* earn */
.earn-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ecard { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ecard .apr { font-size: 26px; font-weight: 700; }

.coin { border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.spark-svg { overflow: visible; }
.pill { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mint); background: var(--mint-wash); padding: 3px 8px; border-radius: 999px; }
.pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }

/* Identity verification card (Account) */
.kyc-card { transition: border-color var(--d-fast), transform var(--d-fast); }
.kyc-card:hover { border-color: var(--mint); }
.kyc-tiers { display: flex; flex-direction: column; gap: 8px; }
.kyc-tier { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; background: var(--elevated); border: 1px solid var(--line); }
.kyc-tier > div { flex: 1; display: flex; flex-direction: column; }
.kyc-tier strong { font-size: 13.5px; font-weight: 600; }
.kyc-tier small { font-size: 12px; }
.kyc-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--mute); background: var(--surface); border: 1.5px solid var(--line); }
.kyc-tier.done .kyc-dot { color: var(--bg); background: var(--mint); border-color: var(--mint); }
.kyc-tier.cur { border-color: var(--mint); background: var(--mint-wash); }
.kyc-tier.cur .kyc-dot { color: var(--mint); border-color: var(--mint); }
.kyc-go { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--mint); white-space: nowrap; }

/* sheet / picker / sheets shared with toast */
.toast-host { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--elevated); border: 1px solid var(--line); border-radius: 7px; padding: 10px 18px; font-size: 13px; font-weight: 500; box-shadow: var(--e-3); animation: tin 0.2s; }
@keyframes tin { from { opacity: 0; transform: translateY(-10px); } }
.toast.ok { border-color: color-mix(in srgb, var(--mint) 40%, transparent); }
/* 1.2.42: every toast is the order-notification card (lib/ui.js toast), stacked top right like #ntf-toasts */
.toast-host { position: fixed; display: flex; flex-direction: column; gap: 10px; top: 64px; right: 16px; left: auto; transform: none; align-items: stretch; width: 340px; max-width: calc(100vw - 32px); z-index: 9998; pointer-events: none; }
.toast.ntf { position: relative; background: var(--elevated, #1a1f27); border: 1px solid var(--line, #2a2f3a); border-left: 3px solid var(--acc, #3B9EFF);
  border-radius: 10px; padding: 12px 14px 12px 29px; color: var(--snow, #f2f2f2); font-size: 13px; font-weight: 600; line-height: 1.45; text-align: left;
  white-space: normal; overflow-wrap: anywhere; box-shadow: 0 8px 28px rgba(0,0,0,.4); cursor: pointer; pointer-events: auto;
  transform: translateX(120%); opacity: 0; animation: none; transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .25s; }
.toast.ntf::before { content: ""; position: absolute; left: 13px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc, #3B9EFF); }
.toast.ntf.in { transform: none; opacity: 1; }
.fld-err { border-color: var(--down, #F6465D) !important; box-shadow: 0 0 0 3px rgba(246,70,93,.15); }

.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; animation: oin 0.2s; }
@keyframes oin { from { opacity: 0; } }
.modal { width: 460px; max-width: 92vw; max-height: 80vh; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--e-4); display: flex; flex-direction: column; overflow: hidden; animation: min 0.2s; }
@keyframes min { from { transform: translateY(-12px); } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.modal-head button { background: none; border: none; color: var(--mute); font-size: 17px; cursor: pointer; }
.modal-search { display: flex; align-items: center; gap: 8px; margin: 0 16px 8px; padding: 9px 12px; background: var(--surface); border-radius: 7px; }
.modal-search svg { width: 15px; height: 15px; color: var(--mute); }
.modal-search input { flex: 1; background: none; border: none; color: var(--snow); font-size: 13px; }
.modal-search input:focus { outline: none; }
.modal-list { overflow-y: auto; }
.modal-opt { display: grid; grid-template-columns: auto 1.6fr 1fr 0.9fr; align-items: center; gap: 10px; padding: 10px 16px; cursor: pointer; }
.modal-opt:hover { background: var(--surface); }
.modal-opt > div { display: flex; flex-direction: column; }
.modal-opt strong { font-size: 13px; } .modal-opt small { font-size: 10.5px; color: var(--mute); }
.modal-opt .mono { text-align: right; }
.dep-modal { padding: 16px; gap: 14px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dep-field { display: flex; flex-direction: column; gap: 6px; }
.dep-field .fl { font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.05em; }
.dep-sel { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 11px 13px; cursor: pointer; }
.dep-sel .coin-sel { display: flex; align-items: center; gap: 9px; } .dep-sel strong { font-size: 14px; }
.dep-warn { font-size: 11.5px; line-height: 1.4; color: var(--snow-dim); background: var(--mint-wash); border-radius: 7px; padding: 10px 12px; }
.dep-warn.amber { background: color-mix(in srgb, var(--warn) 11%, transparent); }
.dep-qr { display: flex; gap: 14px; align-items: flex-start; }
.dep-qr .q { background: #fff; padding: 8px; border-radius: 7px; line-height: 0; }
.dep-addr { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.dep-addr .ac { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; }
.dep-addr code { flex: 1; font-size: 11px; word-break: break-all; color: var(--snow-dim); font-family: var(--mono); }
.dep-addr .cp { background: var(--mint); color: var(--ink); border: none; border-radius: 5px; padding: 6px 12px; font-weight: 700; font-size: 12px; cursor: pointer; }
.inforows { background: var(--surface); border-radius: 7px; padding: 2px 13px; }
.inforows > div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.inforows > div:last-child { border-bottom: none; } .inforows .k { color: var(--mute); }
.fullbtn { width: 100%; border: none; border-radius: 8px; padding: 13px; font-size: 14px; font-weight: 700; cursor: pointer; background: var(--mint); color: var(--ink); }

/* leverage modal */
.lev-modal { padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.lev-top { display: flex; align-items: center; justify-content: space-between; }
.lev-top .ll { font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; }
.lev-big { font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--mint); }
.lev-big.hot { color: var(--down); }
.lev-stepper { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.lev-stepper button { background: none; border: none; color: var(--snow); font-size: 20px; width: 44px; height: 40px; cursor: pointer; }
.lev-stepper .lv { flex: 1; text-align: center; font-family: var(--mono); font-size: 16px; font-weight: 700; }
/* Smooth continuous leverage slider — fill behind a transparent-track range input. */
.lev-track { position: relative; height: 22px; display: flex; align-items: center; }
.lev-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 5px; border-radius: 5px; background: var(--surface); pointer-events: none; }
.lev-fill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 5px; border-radius: 5px; background: var(--mint); pointer-events: none; }
.lev-slider { position: relative; -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0; }
.lev-slider::-webkit-slider-runnable-track { height: 22px; background: transparent; }
.lev-slider::-moz-range-track { height: 22px; background: transparent; }
.lev-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--mint); border: 3px solid var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: grab; }
.lev-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.lev-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--mint); border: 3px solid var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: grab; }
.lev-stops { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.lev-stops button { background: none; border: none; color: var(--mute); font-family: var(--mono); font-size: 11px; cursor: pointer; padding: 0; }
.lev-stops button.on { color: var(--mint); font-weight: 600; }
.lev-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; background: var(--surface); border-radius: 8px; padding: 14px; }
.lev-stats > div span { font-size: 9.5px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 4px; }
.lev-stats strong { font-family: var(--mono); font-size: 15px; }
.lev-warn { display: flex; gap: 10px; font-size: 12px; line-height: 1.45; color: var(--snow-dim); background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 8px; padding: 11px 13px; }
.lev-warn .wi { color: var(--warn); font-weight: 700; }
.lev-tiers { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lev-trow { display: grid; grid-template-columns: 1.5fr 1fr 1fr; padding: 9px 12px; font-family: var(--mono); font-size: 12px; border-bottom: 1px solid var(--line-soft); }
.lev-trow:last-child { border-bottom: none; }
.lev-trow.head { color: var(--mute); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--surface); }
.lev-trow.cur { background: var(--mint-wash); color: var(--mint); }
.lev-trow span:not(:first-child) { text-align: right; }
.lev-secn { font-size: 10px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; }

/* empty */
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px; color: var(--mute); }

/* ===== Tablet (10"+) ===== */
@media (max-width: 1180px) {
  .term, .term.wl-collapsed { grid-template-columns: 1fr 230px 270px; }
  .wl-pane { display: none; }
  .pair-strip { grid-column: 1 / 4; grid-row: 1; }
  .term-banner { grid-column: 1 / 4; }
  .term-center { grid-column: 1; grid-row: 3; }
  .book-col { grid-column: 2; grid-row: 3; }
  .book-col .trades-pane { display: none; }
  .form-pane { grid-column: 3; grid-row: 3 / 5; }
  .orders-pane { grid-column: 1 / 3; grid-row: 4; }
  .mrow { grid-template-columns: 2fr 1.3fr 1.2fr 1.4fr 1fr; }
  .mcol.hidecol { display: none; }
  .earn-grid { grid-template-columns: repeat(2,1fr); }
  .dash, .dash-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav { display: none; }
}

/* ── P1/P1b/P2 additions: auth gating, margin mode, order flags, real wallet ── */
.auth-zone { display:flex; align-items:center; gap:8px; }
.tbtn.ghost { background:transparent; border:1px solid var(--line); color:var(--snow); }
.tbtn.ghost:hover { border-color:var(--mint); color:var(--mint); }

/* Sign-in gate (logged-out protected views) */
.signin-gate-page { display:flex; align-items:center; justify-content:center; min-height:60vh; }
.signin-gate { max-width:440px; margin:48px auto; text-align:center; background:var(--card,#11151B);
  border:1px solid var(--line); border-radius:16px; padding:40px 32px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.signin-gate .sg-mesh { opacity:.85; }
.signin-gate h2 { margin:4px 0 0; font-size:22px; }
.signin-gate p { margin:0; color:var(--mute,#8B95A3); font-size:14px; line-height:1.6; }
.signin-gate .sg-cta { display:flex; gap:10px; margin-top:8px; }
.signin-gate .sg-cta .tbtn { min-width:120px; }
.signin-gate .sg-browse { background:none; border:none; color:var(--mint); cursor:pointer; font-size:13px; margin-top:4px; }
.opane-empty.signin-inline, .signin-inline { display:flex; flex-direction:column; align-items:center; gap:6px; padding:28px 16px; color:var(--mute); }

/* Margin-mode + order-flag controls */
.fflags { display:flex; gap:14px; flex-wrap:wrap; padding:8px 0 4px; }
.fcheck { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--mute); cursor:pointer; user-select:none; }
.fcheck-box { width:14px; height:14px; border:1.5px solid var(--line); border-radius:4px; display:inline-block; position:relative; transition:.12s; }
.fcheck-box.on { background:var(--mint); border-color:var(--mint); }
.fcheck-box.on::after { content:"✓"; position:absolute; inset:0; color:#06210f; font-size:10px; line-height:11px; text-align:center; font-weight:800; }
.ftpsl { display:flex; gap:8px; }
.ftpsl input { flex:1; background:var(--elevated,#0E1218); border:1px solid var(--line); color:var(--snow); border-radius:8px; padding:8px 10px; font-size:13px; }

/* Margin-mode modal */
.margin-modal .mm-opts { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.mm-opt { text-align:left; background:var(--elevated,#0E1218); border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer; display:flex; flex-direction:column; gap:4px; color:var(--snow); }
.mm-opt strong { color:var(--snow); font-size:14px; }
.mm-opt.on { border-color:var(--mint); }
.mm-opt small { line-height:1.5; color:var(--mute); }

/* deposit address pending/error states */
.dep-addr-state { background:var(--elevated,#0E1218); border:1px dashed var(--line); border-radius:10px; padding:18px 14px; text-align:center; color:var(--mute); font-size:13px; line-height:1.5; }
.dep-addr-state.error { color:var(--down); border-color:var(--down); }
.dep-addr-state.kyc { color:var(--warn,#F0B90B); }

/* transfer swap button */
.xfer-swap-d { display:flex; justify-content:center; padding:4px 0; }
.xfer-swap-d span { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; cursor:pointer; color:var(--mint); }
.xfer-swap-d span:hover { border-color:var(--mint); }

/* transfer coin row — fixed (non-clickable) USDT identity, polished */
.xfer-coin { display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:11px 13px; }
.xfer-coin-meta { display:flex; flex-direction:column; gap:1px; line-height:1.15; }
.xfer-coin-meta strong { font-size:14px; letter-spacing:.01em; }
.xfer-coin-meta small { font-size:11px; }
.xfer-coin-pill { margin-left:auto; font-size:11px; font-weight:600; color:var(--mint); background:color-mix(in srgb, var(--mint) 13%, transparent); border:1px solid color-mix(in srgb, var(--mint) 30%, transparent); border-radius:999px; padding:3px 10px; white-space:nowrap; }

/* position row actions */
.pos-row-acts { display:flex; gap:6px; justify-content:flex-end; }
.cancel.ghost { background:transparent; }

/* ── P3: Lite/Pro chart toggle ── */
.chart-mode-toggle { display:flex; gap:4px; margin-left:auto; }
.chart-mode { background:transparent; border:1px solid var(--line); color:var(--mute); border-radius:6px; padding:3px 12px; font-size:12px; cursor:pointer; }
.chart-mode.active { background:var(--mint); border-color:var(--mint); color:#06210f; font-weight:600; }
.chart-pane .tv-stage { flex:1; min-height:0; }
/* graceful "chart unavailable / retry" panel (Pro-only chart fail state) */
.chart-fail { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; height:100%; min-height:240px; color:var(--mute); text-align:center; padding:24px; }
.chart-fail p { margin:0; font-size:13px; }
.chart-pane { display:flex; flex-direction:column; }

/* ---------- notification inbox (bell) ---------- */
.ntf-wrap { position: relative; display: inline-grid; }
.ntf-bell { position: relative; }
.ntf-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--down, #f6465d); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 16px; }
.ntf-panel { position: absolute; top: 42px; right: 0; width: 360px; max-width: 92vw; background: var(--card, var(--surface)); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.45); z-index: 200; display: none; overflow: hidden; }
.ntf-panel.open { display: block; }
.ntf-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ntf-head strong { font-size: 14px; }
.ntf-allread { background: none; border: none; color: var(--mint); font-size: 12px; font-weight: 600; cursor: pointer; }
.ntf-list { max-height: 420px; overflow-y: auto; }
.ntf-empty { padding: 32px 18px; text-align: center; color: var(--snow-dim); font-size: 13px; line-height: 1.5; }
.ntf-row { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft, var(--line)); cursor: pointer; }
.ntf-row:hover { background: var(--elevated); }
.ntf-row.unread { background: color-mix(in srgb, var(--mint) 7%, transparent); }
.ntf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-top: 6px; flex-shrink: 0; }
.ntf-dot.r { background: transparent; }
.ntf-body { flex: 1; min-width: 0; }
.ntf-t { font-size: 13px; font-weight: 600; color: var(--snow); }
.ntf-m { font-size: 12.5px; color: var(--snow-dim); margin-top: 2px; line-height: 1.45; }
.ntf-ts { font-size: 11px; color: var(--mute, var(--snow-dim)); margin-top: 4px; }

/* ---- Assets menu (top-bar live balance dropdown) ---- */
.am-wrap { position: relative; display: inline-grid; }
.assets-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; height: auto; width: auto; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); color: var(--snow); cursor: pointer; font-size: 13px; font-weight: 600; }
.assets-btn:hover { border-color: var(--mint); }
.assets-btn .assets-ic { width: 16px; height: 16px; display: inline-flex; color: var(--mint); }
.assets-btn .assets-ic svg { width: 16px; height: 16px; }
.assets-btn .assets-car { width: 12px; height: 12px; display: inline-flex; color: var(--mute); }
.assets-btn .assets-car svg { width: 12px; height: 12px; }
.am-panel { position: absolute; top: 42px; right: 0; width: 300px; max-width: 92vw; background: var(--card, var(--surface)); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.45); z-index: 200; display: none; overflow: hidden; }
.am-panel.open { display: block; }
.am-head { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.am-head .am-total { font-size: 22px; }
.am-rows { padding: 8px 6px; }
.am-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; }
.am-row .am-k { display: flex; flex-direction: column; }
.am-row .am-k span { font-size: 13px; color: var(--snow); }
.am-row .am-k small { font-size: 11px; }
.am-row strong { font-size: 13px; }
.am-row.am-nav { cursor: pointer; border-radius: 8px; }
.am-row.am-nav:hover { background: var(--elevated, #1a1d24); }
.am-car, .legi-car { width: 11px; color: var(--mute); display: inline-flex; opacity: .7; }
.legi.legi-nav { cursor: pointer; padding: 4px 6px; border-radius: 6px; margin: -4px -6px; }
.legi.legi-nav:hover { background: var(--elevated, #1a1d24); }
.am-acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px 12px 4px; border-top: 1px solid var(--line); }
.am-act { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--snow); font-size: 11.5px; font-weight: 600; cursor: pointer; }
.am-act:hover { border-color: var(--mint); color: var(--mint); }
.am-act svg { width: 17px; height: 17px; }
.am-wallet { width: calc(100% - 24px); margin: 8px 12px 12px; padding: 9px; background: none; border: none; color: var(--mint); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center; }
.am-wallet:hover { text-decoration: underline; }
.link { color: var(--mint); cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; }
.promo-ref { border-radius: 10px; transition: background .15s; }
.promo-ref:hover { background: var(--elevated); }

/* ── Position-row Share button + PnL share card ───────────────────────── */
.pos-share { display: inline-flex; align-items: center; gap: 5px; color: var(--mint) !important; border-color: var(--mint-25, rgba(0,214,143,.25)) !important; }
.pos-share .pos-share-ico { display: inline-flex; }
.pos-share .pos-share-ico svg { width: 13px; height: 13px; display: block; }
.pos-share:hover { background: var(--mint-wash, rgba(0,214,143,.08)); }

.pnl-share-ov { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.66); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: oin .18s; }
.pnl-share-sheet { width: 460px; max-width: 100%; max-height: 92vh; overflow-y: auto; background: var(--surface, #11161C); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.6); padding: 18px 20px 22px; }
.pnl-share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pnl-share-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--snow); }
.pnl-share-x { background: none; border: none; color: var(--snow-dim); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.pnl-share-x:hover { background: var(--elevated); color: var(--snow); }

.pnl-share-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.pnl-share-canvas { width: 100%; max-width: 360px; height: auto; border-radius: 18px; display: block; box-shadow: 0 12px 36px rgba(0,0,0,.4); }
.pnl-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.5); border: 1px solid var(--line); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .15s, transform .1s; }
.pnl-carousel-arrow:hover { background: var(--mint); color: var(--ink); }
.pnl-carousel-arrow:active { transform: translateY(-50%) scale(.92); }
.pnl-carousel-arrow.left { left: -6px; }
.pnl-carousel-arrow.right { right: -6px; }

.pnl-bg-dots { display: flex; gap: 8px; justify-content: center; margin: 14px 0 4px; }
.pnl-bg-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--line); cursor: pointer; padding: 0; transition: transform .12s, background .15s; }
.pnl-bg-dot:hover { background: var(--snow-dim); }
.pnl-bg-dot.on { background: var(--mint); transform: scale(1.25); }
.pnl-bg-name { text-align: center; font-size: 12px; color: var(--snow-dim); margin-bottom: 14px; }

.pnl-toggle-wrap { margin-bottom: 16px; }
.pnl-toggle-label { display: block; font-size: 12px; color: var(--snow-dim); margin-bottom: 7px; }
.pnl-mode-toggle { display: flex; gap: 6px; background: var(--elevated); border-radius: 10px; padding: 4px; }
.pnl-mode-toggle button { flex: 1; background: none; border: none; color: var(--snow-dim); font-size: 12.5px; font-weight: 600; padding: 8px 6px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.pnl-mode-toggle button:hover { color: var(--snow); }
.pnl-mode-toggle button.on { background: var(--mint); color: var(--ink); }

.pnl-share-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pnl-act { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--elevated); border: 1px solid var(--line); border-radius: 11px; color: var(--snow); font-size: 11.5px; font-weight: 500; padding: 11px 4px; cursor: pointer; transition: background .15s, border-color .15s, transform .08s; }
.pnl-act:hover { background: var(--mint-wash, rgba(0,214,143,.08)); border-color: var(--mint); }
.pnl-act:active { transform: scale(.96); }
.pnl-act-ico { color: var(--mint); display: flex; }
.pnl-act-ico svg { display: block; }

/* Market picker dropdown (anchored under the pair name) + sortable columns */
.dd-back { position: fixed; inset: 0; z-index: 90; background: transparent; }
.dd-panel { position: fixed; z-index: 91; width: 380px; max-width: calc(100vw - 16px); max-height: 70vh; overflow: auto;
  background: var(--panel, #14161c); border: 1px solid var(--bdr, #242833); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); padding: 8px; }
/* Binance-style column headers: small labels aligned to each column (same grid as
   the rows), not big buttons. */
.mkt-sorthead { display: grid; grid-template-columns: 18px 26px 1fr 80px 58px 64px; gap: 8px; align-items: center; padding: 4px 6px 8px; position: sticky; top: 0; background: var(--bg, #12141a); }
.mkt-sorthead .mkt-sort { background: none; border: 0; color: var(--mute, #8b93a7); font-size: 11px; font-weight: 600;
  padding: 0; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.mkt-sorthead .mkt-sort.r { justify-content: flex-end; }
.mkt-sorthead .mkt-sort.on { color: var(--snow, #e8ebf2); }
.mkt-sorthead .mkt-sort.st { cursor: default; }
.mkt-sorthead .mkt-sort .sarr { font-size: 9px; color: var(--acc, #00D68F); }
.modal-opt.mkt-opt { display: grid; grid-template-columns: 18px 26px 1fr 80px 58px 64px; align-items: center; gap: 8px; padding: 7px 6px; }
/* Binance-style picker: favorite star + tab chips */
.mkt-opt .mkt-fav { background: none; border: 0; color: var(--mute, #8b93a7); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.mkt-opt .mkt-fav.on { color: #f0b90b; }
.mkt-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 4px 8px; position: sticky; top: 0; background: var(--bg, #12141a); z-index: 1; }
.mkt-tabs .mkt-tab { background: var(--surface, #1b1e26); border: 1px solid transparent; color: var(--mute, #8b93a7); border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.mkt-tabs .mkt-tab.on { color: var(--snow, #e8ebf2); background: var(--elevated, #232732); border-color: var(--acc, #00D68F); }
.mkt-empty { padding: 24px 12px; text-align: center; color: var(--mute, #8b93a7); font-size: 12px; }
.modal-opt.mkt-opt .mkt-name strong { display: block; font-size: 13px; }
.modal-opt.mkt-opt .mkt-name small { color: var(--mute, #8b93a7); font-size: 11px; }
.modal-opt.mkt-opt .mkt-px { text-align: right; font-size: 12px; }
.modal-opt.mkt-opt .mkt-chg { text-align: right; font-size: 12px; min-width: 56px; }
.modal-opt.mkt-opt .mkt-vol { text-align: right; font-size: 12px; min-width: 60px; color: var(--mute, #8b93a7); }

/* futures account card in the Wallet view (desktop parity with mobile) */
.fw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; }
.fw-stat { display: flex; flex-direction: column; gap: 4px; }
.fw-pos { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.fw-pos:last-child { border-bottom: 0; }
@media (max-width: 900px) { .fw-grid { grid-template-columns: repeat(2, 1fr); } }

/* futures PnL analysis tab */
.pnl-chips { display: flex; gap: 12px; padding: 12px; flex-wrap: wrap; }
.pnl-chip { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; min-width: 130px; }
.pnl-chip strong { font-size: 16px; }
.pnl-chip small { font-size: 10px; }
.pnl-chart { padding: 6px 12px; }
.pnl-chart svg { width: 100%; height: 180px; display: block; }

/* ── Earn redesign ─────────────────────────────────────────────────────── */
.earn-herobar { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(120deg, color-mix(in srgb, var(--mint) 14%, var(--surface)) 0%, var(--surface) 55%); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; margin-bottom: 20px; }
.earn-hero-glow { position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; background: radial-gradient(circle, color-mix(in srgb, var(--mint) 40%, transparent), transparent 70%); filter: blur(10px); }
.earn-hero-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.earn-hero-badge { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--bg); border: 1px solid color-mix(in srgb, var(--mint) 40%, var(--line)); border-radius: 14px; padding: 14px 22px; white-space: nowrap; }
.earn-hero-apr { font-family: var(--mono); font-size: 30px; font-weight: 700; background: linear-gradient(90deg, var(--mint), #7DF9C5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ecard2 { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 0 16px; overflow: hidden; transition: transform .16s, border-color .16s, box-shadow .16s; }
.ecard2:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--mint) 45%, var(--line)); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.ecard2-top { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; border-bottom: 1px solid var(--line); position: relative; }
.ecard2-top::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--acc), transparent 80%); opacity: .8; }
.ecard2-ic { display: inline-flex; }
.ecard2-top small { font-size: 11px; display: block; }
.ecard2-apr { padding: 16px 16px 4px; }
.ecard2-aprv { font-family: var(--mono); font-size: 30px; font-weight: 700; background: linear-gradient(90deg, var(--up,#00D68F), #7DF9C5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; line-height: 1.1; }
.ecard2-apr small { font-size: 11px; }
.ecard2-meta { display: flex; justify-content: space-between; padding: 12px 16px 16px; }
.ecard2-meta small { font-size: 11px; display: block; margin-bottom: 2px; }
.ecard2-meta strong { font-size: 13px; }
.ecard2-btn { display: block; width: calc(100% - 32px); margin: 0 16px; padding: 11px; border: none; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 13.5px; color: #06231a; background: linear-gradient(90deg, var(--mint), #4fe0a8); transition: filter .15s; }
.ecard2-btn:hover { filter: brightness(1.08); }
@media (max-width: 900px) { .earn-herobar { flex-direction: column; align-items: flex-start; } }

/* ── equity/PnL line chart (Assets > Futures) ──────────────────────────── */
.eq-block { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 4px 0 4px; }
.eq-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.eq-tabs { display: inline-flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.eq-tabs button { background: none; border: none; color: var(--mute); font-size: 12px; padding: 5px 12px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.eq-tabs button.on { background: var(--surface); color: var(--snow); font-weight: 600; }
.eq-host { width: 100%; }
.eq-svg { width: 100%; height: 200px; display: block; }

/* wallet Spot/Futures/Earn tabs */
.wtabs { display: flex; gap: 6px; margin: 16px 0; border-bottom: 1px solid var(--line); }
.wtabs button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--mute); font-size: 14px; padding: 10px 16px; cursor: pointer; font-family: inherit; font-weight: 500; margin-bottom: -1px; }
.wtabs button.on { color: var(--snow); border-bottom-color: var(--mint); }
.wtabs button:hover { color: var(--snow); }

/* spot assets: hide-zero toggle */
.hz-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mute); cursor: pointer; user-select: none; }
.hz-toggle input { width: 15px; height: 15px; accent-color: var(--mint); cursor: pointer; }
.hz-toggle:hover { color: var(--snow); }

/* Orders panel: current-market/all-markets filter */
.otabs .ord-mktfilter { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t3, #8B95A3); cursor: pointer; padding: 0 10px; user-select: none; }
.otabs .ord-mktfilter input { accent-color: var(--acc, #00D68F); cursor: pointer; }

/* Market picker (spot+futures pair dropdown): search + tabs + sort header PINNED,
   only the list scrolls (owner 2026-07-10). Scoped to .mkt-picker so other
   dd-panel dropdowns keep their whole-panel scroll. Works for both the anchored
   dropdown (.dd-panel) and the centered modal fallback. */
.dd-panel.mkt-picker { overflow: hidden; display: flex; flex-direction: column; }
.mkt-picker .modal-search, .mkt-picker .mkt-tabs, .mkt-picker .mkt-sorthead { flex: 0 0 auto; }
.mkt-picker .modal-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Market picker sizing (owner 2026-07-10): wider panel — the 380px default cramped
   the price/24h%/vol columns — and LOCK horizontal scrolling (no sideways panning
   by the user; the grid must fit the panel). */
.dd-panel.mkt-picker { width: 520px; overflow-x: hidden; }
.mkt-picker .modal-list { overflow-x: hidden; }
.mkt-picker .modal-opt.mkt-opt { grid-template-columns: 18px 26px 1fr 92px 64px 76px; }

/* Orderbook symmetry on SHORT screens (owner 2026-07-10): both halves are flex:1
   but flexbox min-height:auto stopped them shrinking below their 11 rendered rows,
   so the container clipped at the BOTTOM — all asks visible, bids cut off, mid not
   centered. min-height:0 lets the halves split the space EQUALLY; each half clips
   its own overflow (asks bottom-anchored keep the best ask by the mid, bids
   top-anchored keep the best bid) → mid always dead-center, same rows both sides. */
.ob-side { min-height: 0; }

/* ══════════ Rewards Hub (rewards() screen) ══════════ */
.rw-pad{padding:12px 16px 20px;display:flex;flex-direction:column;gap:10px}
.rw-sec{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500;margin:6px 2px -2px}
.rw-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.rw-mine .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rw-mine .lbl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500}
.rw-amt{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;font-weight:600;letter-spacing:-.02em;margin-top:5px}
.rw-amt small{font-size:13px;color:var(--mute);font-weight:500}
.rw-pill{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;padding:3px 8px;border-radius:5px;white-space:nowrap}
.rw-pill.mint{color:var(--mint);border:1px solid color-mix(in srgb, var(--mint) 40%, transparent)}
.rw-pill.warn{color:var(--warn);border:1px solid color-mix(in srgb, var(--warn) 45%, transparent)}
.rw-pill.grey{color:var(--mute);border:1px solid var(--line)}
.rw-prog{margin-top:11px}
.rw-prog .pl{display:flex;justify-content:space-between;font-size:11.5px;font-weight:500}
.rw-prog .pl b{font-family:var(--mono);color:var(--mint);font-weight:600}
.rw-prog .track{height:6px;border-radius:99px;background:var(--line);margin-top:6px;overflow:hidden}
.rw-prog .fill{height:100%;border-radius:99px;background:var(--mint);width:0;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.rw-prog .vals{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:6px}
.rw-prog .help{font-size:11px;color:var(--mute);margin-top:6px;line-height:1.5}
.rw-prog .done{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--mint);margin-top:8px}
.rw-check{width:15px;height:15px;border-radius:50%;background:var(--mint);position:relative;flex:none}
.rw-check::after{content:"";position:absolute;left:4.5px;top:3px;width:4px;height:7px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(42deg)}
.rw-camp{position:relative;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.rw-camp .row{display:flex;gap:10px;align-items:flex-start;padding-inline-end:72px}
.rw-camp .ic{width:36px;height:36px;border-radius:9px;background:var(--mint-wash);color:var(--mint);display:grid;place-items:center;flex:none}
.rw-camp .ic svg{width:18px;height:18px}
.rw-camp .ic.dim{background:var(--elevated);color:var(--mute)}
.rw-camp h3{margin:0;font-size:13.5px;font-weight:600}
.rw-camp p{margin:2px 0 0;font-size:11px;line-height:1.4;color:var(--snow-dim)}
.rw-camp .status{position:absolute;top:12px;inset-inline-end:12px}
.rw-tiers{display:flex;gap:5px;flex-wrap:wrap}
.rw-tier{font-family:var(--mono);font-size:9.5px;font-weight:500;color:var(--snow-dim);background:var(--elevated);border-radius:6px;padding:4px 7px;white-space:nowrap}
.rw-tier b{color:var(--mint);font-weight:600}
.rw-cta{display:flex;align-items:center;justify-content:center;height:38px;border:none;border-radius:9px;background:var(--mint);color:var(--ink);font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;width:100%}
.rw-cta:active{background:var(--mint-deep)}
.rw-cta.ghost{background:var(--elevated);color:var(--snow);border:1px solid var(--line)}
.rw-camp .foot{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mute)}
.rw-camp .foot a{color:var(--mint);text-decoration:none}
.rw-camp .bbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line)}
.rw-camp .bbar i{display:block;height:100%;background:var(--mint)}
.rw-camp.soon .row{opacity:.5;padding-inline-end:88px}
.rw-camp.soon{background:color-mix(in srgb, var(--surface) 60%, transparent)}
.rw-login{border:1px solid color-mix(in srgb, var(--mint) 35%, transparent);background:var(--mint-wash);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.rw-login p{margin:0;font-size:12.5px;line-height:1.5;color:var(--snow)}
.rw-login .rw-cta{width:auto;align-self:flex-start;padding:0 22px}
.rw-empty{color:var(--mute);font-size:12.5px;text-align:center;padding:18px 8px}
.rw-legal{font-size:10px;color:var(--mute);line-height:1.5;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.rw-legal a{color:var(--mint);text-decoration:none}

/* ══════════ Rewards Hub — desktop layout ══════════ */
.rw-desk{max-width:920px;margin:0 auto;padding:28px 24px 60px}
.rw-desk .rw-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.rw-desk .rw-head h1{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0;flex:1}
.rw-desk .rw-head a{font-size:13px;color:var(--mint);text-decoration:none;font-weight:500}
.rw-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.rw-grid .rw-mine,.rw-grid .rw-sec,.rw-grid .rw-login,.rw-grid .rw-empty,.rw-grid .rw-legal{grid-column:1/-1}
@media (max-width:760px){.rw-grid{grid-template-columns:1fr}}

/* ══ Support Tickets (tk-*) ══ */
/* mSamex Support Tickets — component styles (tk-*)
 * Uses exchange/design/tokens/tokens.css vars. Theme-aware (dark default).
 * Ship-ready: only tk-* classes, nothing generic overridden. */

/* ===== Status badges ===== */
.tk-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:6px;white-space:nowrap;line-height:1}
.tk-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tk-badge.open{color:var(--mint);border:1px solid color-mix(in srgb, var(--mint) 40%, transparent);background:var(--mint-wash)}
.tk-badge.answered{color:var(--mint);border:1px solid color-mix(in srgb, var(--mint) 25%, transparent);background:transparent}
.tk-badge.closed{color:var(--mute);border:1px solid var(--line);background:transparent}
.tk-badge.closed::before{opacity:.6}

.tk-id{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.02em}

/* ===== Micro-labels (uppercase mono, like the rest of the app) ===== */
.tk-lbl{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}

/* ===== Inputs — bordered, well-padded, mint focus ===== */
.tk-input,.tk-textarea{width:100%;box-sizing:border-box;background:var(--elevated);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--font);font-size:14px;line-height:1.45;color:var(--snow);transition:border-color var(--d-fast) var(--ease-standard), box-shadow var(--d-fast) var(--ease-standard)}
.tk-input::placeholder,.tk-textarea::placeholder{color:var(--mute)}
.tk-input:focus,.tk-textarea:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px var(--mint-wash)}
.tk-textarea{min-height:118px;resize:vertical}
.tk-field{display:flex;flex-direction:column}
.tk-hint{font-size:11px;color:var(--mute);margin-top:6px}

/* ===== Category segmented chips ===== */
.tk-cats{display:flex;flex-wrap:wrap;gap:8px}
.tk-cat{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--elevated);color:var(--snow-dim);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;transition:border-color var(--d-fast),color var(--d-fast),background var(--d-fast)}
.tk-cat:hover{border-color:color-mix(in srgb, var(--mint) 35%, var(--line))}
.tk-cat:focus-visible{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px var(--mint-wash)}
.tk-cat[aria-pressed="true"]{background:var(--mint-wash);border-color:var(--mint);color:var(--mint);font-weight:600}

/* ===== Attachment drop zone + chips ===== */
.tk-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:16px;border:1.5px dashed var(--line);border-radius:10px;background:transparent;color:var(--mute);font-family:var(--font);font-size:13px;cursor:pointer;text-align:center;width:100%;box-sizing:border-box;transition:border-color var(--d-fast),background var(--d-fast),color var(--d-fast)}
.tk-drop:hover,.tk-drop.dragover{border-color:var(--mint);background:var(--mint-wash);color:var(--snow-dim)}
.tk-drop:focus-visible{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px var(--mint-wash)}
.tk-drop svg{width:20px;height:20px;color:var(--mint)}
.tk-drop small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--mute)}
.tk-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tk-files:empty{display:none}
.tk-file{display:inline-flex;align-items:center;gap:8px;max-width:100%;background:var(--elevated);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
.tk-file .thumb{width:28px;height:28px;border-radius:5px;flex:none;background:repeating-linear-gradient(45deg,var(--line) 0 4px,var(--elevated) 4px 8px);display:grid;place-items:center;color:var(--mute);overflow:hidden}
.tk-file .thumb svg{width:14px;height:14px}
.tk-file .name{font-family:var(--mono);font-size:11px;color:var(--snow-dim);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-file .rm{width:22px;height:22px;flex:none;display:grid;place-items:center;border:none;border-radius:5px;background:none;color:var(--mute);cursor:pointer;padding:0}
.tk-file .rm:hover{color:var(--down);background:var(--down-wash)}
.tk-file .rm svg{width:12px;height:12px}

/* ===== Buttons ===== */
.tk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:none;border-radius:10px;background:var(--mint);color:var(--ink);font-family:var(--font);font-size:14px;font-weight:600;cursor:pointer;transition:background var(--d-fast),transform var(--d-fast)}
.tk-btn:hover{background:var(--mint-deep)}
.tk-btn:active{transform:scale(.985)}
.tk-btn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.tk-btn.full{width:100%}
.tk-btn.ghost{background:var(--elevated);color:var(--snow);border:1px solid var(--line)}
.tk-btn.ghost:hover{background:var(--elevated);border-color:color-mix(in srgb, var(--mint) 35%, var(--line))}

/* ===== New Ticket sheet / modal ===== */
.tk-sheet{background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
.tk-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.tk-sheet-head h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--snow)}
.tk-close{width:32px;height:32px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--elevated);color:var(--mute);cursor:pointer;padding:0;transition:color var(--d-fast),border-color var(--d-fast)}
.tk-close:hover{color:var(--snow);border-color:var(--mute)}
.tk-close:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.tk-close svg{width:14px;height:14px}
.tk-sheet-body{display:flex;flex-direction:column;gap:18px;padding:18px 20px}
.tk-sheet-foot{padding:4px 20px 20px;display:flex;flex-direction:column;gap:10px}
.tk-helper{font-size:12px;color:var(--mute);text-align:center;margin:0}

/* mobile bottom-sheet flavour */
.tk-sheet.bottom{border-radius:18px 18px 0 0;border-bottom:none}
.tk-grab{width:40px;height:4px;border-radius:99px;background:var(--line);margin:10px auto 0;flex:none}

/* desktop panel */
.tk-panel{max-width:560px;width:100%;margin:0 auto;box-shadow:var(--e-3)}
.tk-panel .tk-sheet-head{padding:20px 24px 16px}
.tk-panel .tk-sheet-body{padding:20px 24px;gap:20px}
.tk-panel .tk-sheet-foot{padding:4px 24px 24px;flex-direction:row;align-items:center;justify-content:space-between}
.tk-panel .tk-sheet-foot .tk-helper{text-align:start;order:-1}
.tk-panel .tk-sheet-foot .tk-btn{width:auto;padding:0 26px}

/* desktop thread panel */
.tk-panel-thread{height:620px;display:flex;flex-direction:column}
.tk-panel-scroll{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* scrim behind mobile sheet */
.tk-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:40;display:flex;flex-direction:column;justify-content:flex-end}
.tk-scrim .tk-sheet{max-height:88%;overflow-y:auto;scrollbar-width:none}

/* ===== Ticket thread ===== */
.tk-thread-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.tk-back{width:34px;height:34px;flex:none;display:grid;place-items:center;border:none;background:none;color:var(--snow);cursor:pointer;padding:0;border-radius:8px}
.tk-back:hover{background:var(--elevated)}
.tk-back svg{width:18px;height:18px}
.tk-thread-head .mid{flex:1;min-width:0}
.tk-thread-head .subj{font-size:14.5px;font-weight:600;color:var(--snow);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-thread-head .meta{display:flex;align-items:center;gap:8px;margin-top:3px}

.tk-thread{display:flex;flex-direction:column;gap:14px;padding:16px 14px}
.tk-day{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.tk-msg{max-width:82%;display:flex;flex-direction:column;gap:5px}
.tk-msg .who{display:flex;align-items:baseline;gap:8px;padding:0 4px}
.tk-msg .who b{font-size:11.5px;font-weight:600;color:var(--snow-dim)}
.tk-msg .who time{font-family:var(--mono);font-size:10px;color:var(--mute)}
.tk-msg .bubble{border-radius:12px;padding:11px 13px;font-size:13.5px;line-height:1.5;color:var(--snow)}
.tk-msg.agent{align-self:flex-start}
.tk-msg.agent .bubble{background:var(--surface);border:1px solid var(--line);border-start-start-radius:4px}
.tk-msg.user{align-self:flex-end;align-items:flex-end}
.tk-msg.user .bubble{background:var(--mint-wash);border:1px solid color-mix(in srgb, var(--mint) 30%, transparent);border-start-end-radius:4px}
.tk-msg .bubble p{margin:0}
.tk-msg .bubble p + p{margin-top:8px}
.tk-attach{display:inline-flex;align-items:center;gap:9px;margin-top:9px;background:var(--elevated);border:1px solid var(--line);border-radius:8px;padding:7px 10px 7px 7px;text-decoration:none;max-width:100%}
.tk-attach .thumb{width:34px;height:34px;border-radius:6px;flex:none;background:repeating-linear-gradient(45deg,var(--line) 0 4px,var(--elevated) 4px 8px);display:grid;place-items:center;color:var(--mute)}
.tk-attach .thumb svg{width:15px;height:15px}
.tk-attach .fi{min-width:0}
.tk-attach .fn{display:block;font-family:var(--mono);font-size:11px;color:var(--snow-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-attach .fs{font-family:var(--mono);font-size:9.5px;color:var(--mute)}
.tk-attach .dl{margin-inline-start:2px;color:var(--mint);flex:none}
.tk-attach .dl svg{width:14px;height:14px;display:block}
.tk-attach:hover{border-color:color-mix(in srgb, var(--mint) 35%, var(--line))}

/* reply composer — docked */
.tk-composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:color-mix(in srgb, var(--bg) 94%, #000);flex-shrink:0}
:root[data-theme="light"] .tk-composer{background:color-mix(in srgb, var(--bg) 96%, #fff)}
.tk-composer .tk-textarea{min-height:44px;max-height:120px;padding:11px 12px;font-size:13.5px;border-radius:10px;resize:none}
.tk-icbtn{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--elevated);color:var(--mute);cursor:pointer;padding:0;transition:color var(--d-fast),border-color var(--d-fast)}
.tk-icbtn:hover{color:var(--mint);border-color:color-mix(in srgb, var(--mint) 35%, var(--line))}
.tk-icbtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.tk-icbtn svg{width:18px;height:18px}
.tk-send{width:44px;height:44px;flex:none;display:grid;place-items:center;border:none;border-radius:10px;background:var(--mint);color:var(--ink);cursor:pointer;padding:0;transition:background var(--d-fast),transform var(--d-fast)}
.tk-send:hover{background:var(--mint-deep)}
.tk-send:active{transform:scale(.94)}
.tk-send:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.tk-send svg{width:18px;height:18px}

/* ===== Empty state ===== */
.tk-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:32px 36px 72px}
.tk-empty-ic{width:64px;height:64px;border-radius:18px;background:var(--mint-wash);border:1px solid color-mix(in srgb, var(--mint) 22%, transparent);color:var(--mint);display:grid;place-items:center;margin-bottom:8px}
.tk-empty-ic svg{width:30px;height:30px}
.tk-empty h3{margin:0;font-size:16px;font-weight:600;color:var(--snow)}
.tk-empty p{margin:0;font-size:12.5px;line-height:1.55;color:var(--mute);max-width:32ch}

/* ===== Submit success ===== */
.tk-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:26px 24px 24px}
.tk-success-ic{width:64px;height:64px;border-radius:50%;background:var(--mint-wash);border:1px solid color-mix(in srgb, var(--mint) 35%, transparent);color:var(--mint);display:grid;place-items:center;margin-bottom:6px;box-shadow:0 0 0 8px color-mix(in srgb, var(--mint) 5%, transparent)}
.tk-success-ic svg{width:30px;height:30px}
.tk-success h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--snow)}
.tk-success p{margin:0;font-size:12.5px;line-height:1.55;color:var(--mute);max-width:34ch}
.tk-success-meta{width:100%;display:flex;flex-direction:column;background:var(--elevated);border:1px solid var(--line);border-radius:10px;padding:4px 14px;margin:12px 0 14px}
.tk-success-meta .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0}
.tk-success-meta .row + .row{border-top:1px solid var(--line)}
.tk-success-meta .k{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tk-success-meta .v{font-family:var(--mono);font-size:12px;color:var(--snow)}
.tk-success .tk-btn + .tk-btn{margin-top:8px}

/* ===== FAQ / help center ===== */
.tk-search{position:relative;display:flex;align-items:center}
.tk-search svg{position:absolute;inset-inline-start:13px;width:16px;height:16px;color:var(--mute);pointer-events:none}
.tk-search input{width:100%;box-sizing:border-box;background:var(--elevated);border:1px solid var(--line);border-radius:10px;padding:12px 14px;padding-inline-start:38px;font-family:var(--font);font-size:14px;color:var(--snow);transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.tk-search input::placeholder{color:var(--mute)}
.tk-search input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px var(--mint-wash)}

.tk-topics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tk-topics.cols-4{grid-template-columns:repeat(4,1fr)}
.tk-topics.cols-4 .tk-topic{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
.tk-topic{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--snow);font-family:var(--font);font-size:12.5px;font-weight:500;cursor:pointer;text-align:start;transition:border-color var(--d-fast)}
.tk-topic:hover{border-color:color-mix(in srgb, var(--mint) 35%, var(--line))}
.tk-topic:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.tk-topic .ic{width:30px;height:30px;border-radius:8px;background:var(--mint-wash);color:var(--mint);display:grid;place-items:center;flex:none}
.tk-topic .ic svg{width:15px;height:15px}

.tk-faq{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tk-faq details + details{border-top:1px solid var(--line)}
.tk-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;font-size:13px;font-weight:500;color:var(--snow);cursor:pointer;list-style:none;min-height:44px;box-sizing:border-box}
.tk-faq summary::-webkit-details-marker{display:none}
.tk-faq summary:hover{color:var(--mint)}
.tk-faq summary:focus-visible{outline:2px solid var(--mint);outline-offset:-2px;border-radius:8px}
.tk-faq summary svg{width:15px;height:15px;flex:none;color:var(--mute);transition:transform var(--d-base) var(--ease-standard)}
.tk-faq details[open] summary{color:var(--mint)}
.tk-faq details[open] summary svg{transform:rotate(180deg);color:var(--mint)}
.tk-faq details p{margin:0;padding:0 14px 14px;font-size:12.5px;line-height:1.55;color:var(--snow-dim)}

.tk-still{border:1px solid color-mix(in srgb, var(--mint) 30%, transparent);background:var(--mint-wash);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:11px;margin-top:2px}
.tk-still p{margin:0;font-size:12.5px;line-height:1.5;color:var(--snow-dim)}
.tk-still p b{color:var(--snow);font-weight:600}
.tk-still .row{display:flex;gap:8px}

/* ===== Ticket list item ===== */
.tk-item{display:flex;align-items:flex-start;gap:12px;width:100%;box-sizing:border-box;text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;font-family:var(--font);color:var(--snow);transition:border-color var(--d-fast),background var(--d-fast)}
.tk-item:hover{border-color:color-mix(in srgb, var(--mint) 30%, var(--line))}
.tk-item:active{background:var(--elevated)}
.tk-item:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.tk-item .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none;margin-top:6px;box-shadow:0 0 0 3px var(--mint-wash)}
.tk-item .dot.read{background:transparent;box-shadow:none}
.tk-item .mid{flex:1;min-width:0}
.tk-item .top{display:flex;align-items:center;gap:8px}
.tk-item .subj{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.tk-item time{font-family:var(--mono);font-size:10.5px;color:var(--mute);flex:none}
.tk-item .prev{margin:4px 0 8px;font-size:12.5px;line-height:1.45;color:var(--mute);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tk-item.unread .prev{color:var(--snow-dim)}

/* tk-panel height cap + scroll (help/new-ticket panels were overflowing) */
.tk-panel{max-height:90vh}
.tk-panel .tk-sheet-body{overflow-y:auto;flex:1 1 auto;min-height:0}
/* unified-menu polish (2026-07-15): brand link must not inherit UA link styles */
a.brand, a.brand:visited { color: inherit; text-decoration: none; }

/* ===================== COPY TRADING (.cp-) ===================== */
.cp-page{max-width:1480px}
.cp-head{align-items:flex-start;gap:24px;flex-wrap:wrap}
.cp-head h1{margin:0 0 6px}
.cp-head p{margin:0;max-width:62ch;color:var(--snow-dim);font-size:13px;line-height:1.55;text-wrap:pretty}
.cp-head-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cp-tabs{display:flex;gap:2px;background:var(--elevated);border-radius:var(--r-full);padding:3px}
.cp-tabs button{border:0;background:transparent;color:var(--snow-dim);font:600 13px/1 var(--font);padding:9px 16px;border-radius:var(--r-full);cursor:pointer;transition:color var(--d-fast),background var(--d-fast)}
.cp-tabs button.on{background:var(--surface);color:var(--snow)}
.cp-tabs button:hover{color:var(--snow)}
.cp-body{display:flex;flex-direction:column;gap:22px}
.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;border:1px solid var(--line);background:var(--elevated);color:var(--snow);font:600 13px/1 var(--font);border-radius:var(--r-lg);cursor:pointer;transition:filter var(--d-fast),border-color var(--d-fast)}
.cp-btn:hover{filter:brightness(1.12)}
.cp-btn.pri{background:var(--mint);border-color:var(--mint);color:#0B0E11}
.cp-btn.ghost{background:transparent}
.cp-btn.danger{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,transparent)}
.cp-btn.lg{min-height:46px;font-size:14px;width:100%}
.cp-btn.sm{min-height:32px;padding:0 12px;font-size:12px}
.cp-btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.cp-btn:focus-visible,.cp-tabs button:focus-visible,.cp-chip-btn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.cp-av{display:grid;place-items:center;border-radius:50%;color:#0B0E11;font-weight:700;letter-spacing:.02em;flex:none}
.cp-grade{display:inline-flex;align-items:center;gap:5px;font:700 11px/1 var(--mono);padding:5px 8px;border-radius:var(--r-md);background:var(--elevated);color:var(--snow-dim);flex:none}
.cp-grade-k{font-weight:500;opacity:.66;letter-spacing:.04em;text-transform:uppercase;font-size:9px}
.cp-grade.gA{background:var(--mint-wash);color:var(--mint)}
.cp-grade.gB{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.cp-grade.gC{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.cp-grade.gD,.cp-grade.gE{background:var(--down-wash);color:var(--down)}
.cp-badge{display:inline-flex;align-items:center;font:600 10.5px/1 var(--font);letter-spacing:.02em;padding:5px 8px;border-radius:var(--r-full);background:var(--elevated);color:var(--snow-dim);border:1px solid var(--line)}
.cp-badge.ok{background:var(--mint-wash);color:var(--mint);border-color:transparent}
.cp-badge.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);border-color:transparent}
.cp-badge.dim{opacity:.7}
.cp-chips{display:flex;flex-wrap:wrap;gap:6px}
.cp-k{font-size:11px;color:var(--mute);letter-spacing:.02em}
.cp-fine{margin:0;font-size:11.5px;line-height:1.5;color:var(--mute);text-wrap:pretty}
/* card */
.cp-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;transition:border-color var(--d-fast)}
.cp-card:hover{border-color:color-mix(in srgb,var(--mint) 34%,var(--line))}
.cp-card.susp{opacity:.72}
.cp-card-head{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;cursor:pointer}
.cp-card-head:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
.cp-who{min-width:0;flex:1}
.cp-who strong{display:block;font-size:14px;color:var(--snow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-who small{display:block;margin-top:3px;font-size:11.5px;color:var(--mute)}
.cp-fav{border:0;background:transparent;color:var(--mute);font-size:16px;line-height:1;cursor:pointer;padding:4px;border-radius:var(--r-md)}
.cp-fav.on{color:var(--warn)}
.cp-card .cp-chips{padding:0 16px 12px}
.cp-perf{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 16px 14px}
.cp-big{display:block;font-size:19px;margin:4px 0 2px;letter-spacing:-.01em}
.cp-roi{font-size:12px}
.cp-spark{width:104px;height:34px;flex:none}
.cp-spark svg{width:100%;height:100%}
.cp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.cp-st{display:flex;flex-direction:column;gap:3px;background:var(--surface);padding:10px 12px}
.cp-st span{font-size:10.5px;color:var(--mute)}
.cp-st strong{font-size:12.5px;color:var(--snow)}
.cp-card-act{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.cp-card-act .cp-btn{flex:1}
.cp-susp{margin:0;padding:0 16px 14px;font-size:11.5px;color:var(--warn)}
/* capture ratio */
.cp-cap{display:flex;flex-direction:column;gap:7px;background:var(--elevated);border-radius:var(--r-lg);padding:12px 14px}
.cp-cap.low{background:var(--down-wash)}
.cp-cap-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cp-cap-k{font-size:12px;color:var(--snow-dim)}
.cp-cap-top strong{font-size:16px}
.cp-cap-bar{height:6px;border-radius:var(--r-full);background:var(--line);overflow:hidden}
.cp-cap-bar span{display:block;height:100%;background:var(--mint);border-radius:inherit}
.cp-cap-bar.low span{background:var(--down)}
.cp-cap-note{margin:0;font-size:11.5px;line-height:1.5;color:var(--snow-dim);text-wrap:pretty}
/* mirror / parked */
.cp-mirror{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--snow-dim);white-space:nowrap}
.cp-dot{width:7px;height:7px;border-radius:50%;background:var(--mute);flex:none}
.cp-mirror.ok .cp-dot,.cp-guard.ok .cp-dot{background:var(--up)}
.cp-mirror.warn .cp-dot,.cp-guard.warn .cp-dot{background:var(--warn)}
.cp-mirror.down .cp-dot{background:var(--down)}
.cp-lat{color:var(--mute);font-size:11px}
.cp-parked{display:flex;flex-direction:column;gap:2px;background:var(--elevated);border:1px solid var(--line);border-radius:var(--r-lg);padding:9px 12px}
.cp-parked strong{font-size:12px;color:var(--warn)}
.cp-parked-r{font-size:11.5px;color:var(--snow-dim);line-height:1.45}
.cp-parked-wrap{display:flex;flex-direction:column;gap:6px;padding:0 18px 14px}
/* terms */
.cp-terms{display:flex;flex-direction:column;gap:0;margin:0}
.cp-terms>div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.cp-terms>div:last-child{border-bottom:0}
.cp-terms dt{font-size:12px;color:var(--mute)}
.cp-terms dd{margin:0;font-size:12px;color:var(--snow);text-align:right}
/* notices */
.cp-notice{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-radius:var(--r-lg);padding:13px 15px;border:1px solid var(--line)}
.cp-notice strong{display:block;font-size:12.5px;margin-bottom:3px}
.cp-notice p{margin:0;font-size:12px;line-height:1.55;color:var(--snow-dim);text-wrap:pretty}
.cp-notice.warn{background:color-mix(in srgb,var(--warn) 9%,transparent);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.cp-notice.warn strong{color:var(--warn)}
.cp-notice.info{background:color-mix(in srgb,var(--info) 8%,transparent);border-color:color-mix(in srgb,var(--info) 26%,transparent)}
.cp-notice.info strong{color:var(--info)}
/* kpis */
.cp-kpi{display:flex;flex-direction:column;gap:3px;min-width:0}
.cp-kpi>span{font-size:11px;color:var(--mute)}
.cp-kpi>strong{font-size:16px;letter-spacing:-.01em;color:var(--snow)}
.cp-kpi>small{font-size:10.5px;color:var(--mute)}
.cp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.cp-kpis .cp-kpi{background:var(--surface);padding:16px 18px}
/* side/result chips */
.cp-side{display:inline-block;font:600 11px/1 var(--font);padding:4px 7px;border-radius:var(--r-md)}
.cp-side.long{background:var(--up-wash);color:var(--up)}
.cp-side.short{background:var(--down-wash);color:var(--down)}
.cp-res{display:inline-block;font:600 11px/1 var(--font);padding:4px 8px;border-radius:var(--r-full);background:var(--elevated);color:var(--snow-dim)}
.cp-res.mirrored{background:var(--up-wash);color:var(--up)}
.cp-res.scaled{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.cp-res.skipped,.cp-res.parked{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.cp-res.failed{background:var(--down-wash);color:var(--down)}
.cp-tag{display:inline-flex;align-items:center;font:600 10.5px/1 var(--font);padding:5px 8px;border-radius:var(--r-full);background:var(--elevated);color:var(--snow-dim)}
.cp-tag.ok{background:var(--mint-wash);color:var(--mint)}
.cp-tag.live{background:var(--mint-wash);color:var(--mint)}
.cp-tag.paper{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.cp-tag.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
/* forms */
.cp-field{display:flex;flex-direction:column;gap:8px}
.cp-field>label{font-size:12.5px;font-weight:600;color:var(--snow)}
.cp-field-note{margin:0;font-size:11.5px;line-height:1.5;color:var(--mute);text-wrap:pretty}
.cp-input{width:100%;min-height:42px;background:var(--elevated);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--snow);font-size:14px;padding:0 12px;font-family:var(--font)}
.cp-input.mono,input.mono.cp-input{font-family:var(--mono)}
.cp-input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(0,214,143,.18)}
.cp-ta{padding:12px;min-height:96px;line-height:1.5;resize:vertical;font-family:var(--font)}
.cp-amt{display:flex;align-items:center;gap:0;background:var(--elevated);border:1px solid var(--line);border-radius:var(--r-lg);padding-right:12px}
.cp-amt .cp-input{border:0;background:transparent}
.cp-amt-cur{font:600 12px/1 var(--mono);color:var(--mute)}
.cp-two-in{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cp-seg{display:flex;gap:2px;background:var(--elevated);border-radius:var(--r-lg);padding:3px}
.cp-seg button{flex:1;border:0;background:transparent;color:var(--snow-dim);font:600 12px/1 var(--font);min-height:36px;border-radius:var(--r-md);cursor:pointer}
.cp-seg button.on{background:var(--surface);color:var(--snow);box-shadow:var(--e-1)}
.cp-radios{display:flex;flex-direction:column;gap:8px}
.cp-radio{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);background:var(--elevated);border-radius:var(--r-lg);padding:12px;cursor:pointer;transition:border-color var(--d-fast)}
.cp-radio.on{border-color:var(--mint);background:var(--mint-wash)}
.cp-radio input{margin-top:2px;accent-color:var(--mint);width:16px;height:16px;flex:none}
.cp-radio strong{display:block;font-size:12.5px;color:var(--snow)}
.cp-radio small{display:block;margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--snow-dim)}
.cp-ack{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.5;color:var(--snow-dim);cursor:pointer}
.cp-ack input{margin-top:1px;accent-color:var(--mint);width:17px;height:17px;flex:none}
.cp-err{margin:0;font-size:12px;color:var(--down);display:none}
.cp-disabled-field{background:var(--elevated);border:1px dashed var(--line);border-radius:var(--r-lg);padding:11px 12px;font-size:13px;color:var(--mute)}
.cp-slider-row{display:flex;align-items:center;gap:14px}
.cp-slider-row input[type=range]{flex:1;accent-color:var(--mint)}
.cp-bullets{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:12.5px;line-height:1.5;color:var(--snow-dim)}
.cp-mk{display:flex;flex-wrap:wrap;gap:7px}
.cp-chip-btn{border:1px solid var(--line);background:var(--elevated);color:var(--snow-dim);font:600 12px/1 var(--font);min-height:36px;padding:0 13px;border-radius:var(--r-full);cursor:pointer}
.cp-chip-btn.on{background:var(--mint-wash);border-color:var(--mint);color:var(--mint)}
/* chart */
.cp-chart svg{width:100%;height:200px;display:block}
.cp-chart-ax{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mute);margin-top:4px}
.cp-range{display:flex;gap:2px;background:var(--elevated);border-radius:var(--r-full);padding:3px}
.cp-range button{border:0;background:transparent;color:var(--snow-dim);font:600 11.5px/1 var(--mono);padding:7px 12px;border-radius:var(--r-full);cursor:pointer}
.cp-range button.on{background:var(--surface);color:var(--snow)}
/* donut */
.cp-donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cp-donut{width:104px;height:104px;border-radius:50%;flex:none;-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);mask:radial-gradient(circle,transparent 52%,#000 53%)}
.cp-donut-legend{display:flex;flex-direction:column;gap:7px;flex:1;min-width:120px}
.cp-donut-legend>div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--snow-dim)}
.cp-donut-legend .d{width:8px;height:8px;border-radius:2px;flex:none}
.cp-donut-legend strong{margin-left:auto;font-size:12px;color:var(--snow)}
/* tables */
.cp-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cp-table th{text-align:left;font:500 11px/1 var(--font);color:var(--mute);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.cp-table td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--snow-dim);vertical-align:middle}
.cp-table tr:last-child td{border-bottom:0}
.cp-table td strong{color:var(--snow);margin-right:7px}
.cp-reason{max-width:34ch;line-height:1.45;color:var(--snow-dim)}
/* notes */
.cp-notes{display:flex;flex-direction:column}
.cp-note{display:flex;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.cp-note:last-child{border-bottom:0}
.cp-note-t{font-size:11px;color:var(--mute);white-space:nowrap;padding-top:1px;min-width:62px}
.cp-note p{margin:0;font-size:12.5px;line-height:1.55;color:var(--snow-dim);text-wrap:pretty}
.cp-note-compose{display:flex;gap:8px}
.cp-note-compose .cp-input{flex:1}
/* misc */
.cp-why{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cp-why summary{cursor:pointer;padding:12px 14px;font-size:12.5px;font-weight:600;color:var(--snow);background:var(--elevated);list-style:none}
.cp-why summary::-webkit-details-marker{display:none}
.cp-why summary::after{content:"+";float:right;color:var(--mute)}
.cp-why[open] summary::after{content:"\2212"}
.cp-why-row{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;border-top:1px solid var(--line-soft);font-size:12px}
.cp-why-row span{color:var(--mute)}
.cp-why-row strong{color:var(--snow-dim);font-weight:500;text-align:right}
.cp-audit{background:var(--mint-wash);border-radius:var(--r-lg);padding:12px 14px}
.cp-audit strong{display:block;font-size:12px;color:var(--mint);margin-bottom:4px}
.cp-audit p{margin:0;font-size:11.5px;line-height:1.5;color:var(--snow-dim)}
.cp-bio{margin:0;font-size:13px;line-height:1.6;color:var(--snow-dim);text-wrap:pretty}
.cp-manual{border-radius:var(--r-lg);padding:14px;border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.cp-manual.block{background:var(--down-wash);border-color:color-mix(in srgb,var(--down) 34%,transparent)}
.cp-manual.ok{background:var(--mint-wash);border-color:transparent}
.cp-manual strong{font-size:12.5px;color:var(--snow)}
.cp-manual>p{margin:0;font-size:11.5px;line-height:1.5;color:var(--snow-dim);text-wrap:pretty}
.cp-manual-rows{display:flex;flex-direction:column;gap:8px}
.cp-manual-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border-radius:var(--r-md);padding:10px 12px;flex-wrap:wrap}
.cp-manual-row strong{display:block;font-size:12.5px}
.cp-manual-row small{font-size:11px}
.cp-manual-act{display:flex;gap:7px}
.cp-guard{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--snow-dim)}
.cp-tier{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;font-size:13px}

.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.cp-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}
.cp-sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px}
.cp-sec-head h3{margin:0;font-size:15px}
.cp-sec-head p{margin:4px 0 0;font-size:12px;color:var(--mute);max-width:66ch}
.cp-x{border:1px solid var(--line);background:transparent;color:var(--mute);font:600 11.5px/1 var(--font);min-height:32px;padding:0 12px;border-radius:var(--r-full);cursor:pointer;white-space:nowrap}
.cp-x:hover{color:var(--snow)}
.cp-picks{margin-bottom:6px}
.cp-listing{display:flex;flex-direction:column;gap:16px}
.cp-filters{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cp-rails{display:flex;gap:2px;background:var(--elevated);border-radius:var(--r-full);padding:3px}
.cp-rails button{border:0;background:transparent;color:var(--snow-dim);font:600 12.5px/1 var(--font);padding:9px 15px;border-radius:var(--r-full);cursor:pointer}
.cp-rails button.on{background:var(--surface);color:var(--snow)}
.cp-filt-right{display:flex;gap:8px;flex-wrap:wrap}
.cp-filt-right select{min-height:36px;background:var(--elevated);border:1px solid var(--line);border-radius:var(--r-full);color:var(--snow-dim);font:600 12px/1 var(--font);padding:0 12px;cursor:pointer}
.cp-block{margin:0;overflow:hidden}
.cp-two{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:20px;align-items:start}
.cp-col-main{display:flex;flex-direction:column;gap:18px;min-width:0}
.cp-rail-right{display:flex;flex-direction:column;gap:18px;position:sticky;top:16px}
.cp-back{border:0;background:transparent;color:var(--mute);font:600 12.5px/1 var(--font);cursor:pointer;padding:4px 0;align-self:flex-start}
.cp-back:hover{color:var(--snow)}
.cp-phead{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:20px;flex-wrap:wrap}
.cp-phead-id{display:flex;gap:16px;align-items:flex-start;min-width:0}
.cp-phead-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cp-phead-name h2{margin:0;font-size:22px;letter-spacing:-.01em}
.cp-phead-id p{margin:5px 0 9px;font-size:12.5px}
.cp-phead-stats{display:flex;gap:28px;flex-wrap:wrap}
.cp-pstat-grp>div{display:flex;gap:26px;flex-wrap:wrap}
.cp-grp-k{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.cp-perf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:18px;padding:18px}
.cp-ov{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line)}
.cp-ov>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;background:var(--surface);padding:13px 16px;font-size:12.5px}
.cp-ov>div span{color:var(--mute)}
.cp-subtabs{display:flex;gap:4px;padding:12px 14px;border-bottom:1px solid var(--line);overflow-x:auto}
.cp-subtabs button{border:0;background:transparent;color:var(--mute);font:600 12.5px/1 var(--font);padding:9px 13px;border-radius:var(--r-full);cursor:pointer;white-space:nowrap}
.cp-subtabs button.on{background:var(--elevated);color:var(--snow)}
.cp-tabbody{min-height:160px;overflow-x:auto}
.cp-tabbody .cp-notice{margin:14px}
.cp-buy{padding:18px;display:flex;flex-direction:column;gap:14px}
.cp-buy-top{display:flex;align-items:baseline;justify-content:space-between}
.cp-buy-top span{font-size:12.5px;color:var(--snow-dim)}
.cp-buy-top strong{font-size:26px;color:var(--mint);letter-spacing:-.02em}
.cp-buy-sub{margin:-8px 0 0;font-size:11.5px;color:var(--mute);line-height:1.5}
.cp-buy-act{display:flex;flex-direction:column;gap:9px}
.cp-gate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:64px 24px}
.cp-gate h2{margin:6px 0 0;font-size:20px}
.cp-gate p{margin:0;max-width:44ch;font-size:13px;line-height:1.55;color:var(--snow-dim)}
.cp-gate-act{display:flex;gap:10px;margin-top:8px}
/* relationship */
.cp-rel{display:flex;flex-direction:column;gap:0;overflow:hidden}
.cp-rel>header{display:flex;align-items:center;gap:12px;padding:16px 18px;flex-wrap:wrap}
.cp-rel>header .cp-mirror{margin-left:auto}
.cp-rel.paper{border-style:dashed}
.cp-rel-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cp-rel-stats .cp-kpi{background:var(--surface);padding:14px 18px}
.cp-rel-mid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px}
.cp-rel-act{display:flex;gap:9px;padding:0 18px 16px;flex-wrap:wrap}
.cp-rel .cp-fine{padding:0 18px 16px;margin-top:-6px}
.cp-paper-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}
.cp-log td{vertical-align:top}
/* start panel */
.cp-panel-ov{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.52);display:flex;justify-content:flex-end;opacity:0;transition:opacity var(--d-base) var(--ease-standard)}
.cp-panel-ov.in{opacity:1}
.cp-panel-ov.out{opacity:0}
.cp-panel{width:min(480px,100%);height:100%;background:var(--bg);border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(24px);transition:transform var(--d-base) var(--ease-decel)}
.cp-panel-ov.in .cp-panel{transform:none}
.cp-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--line)}
.cp-panel-head h3{margin:0;font-size:17px}
.cp-panel-head p{margin:4px 0 0;font-size:12.5px;color:var(--mute)}
.cp-x-btn{border:0;background:var(--elevated);color:var(--snow-dim);width:32px;height:32px;border-radius:var(--r-md);cursor:pointer;font-size:13px}
.cp-panel-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px}
.cp-panel-foot{padding:16px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px;background:var(--surface)}
.cp-lev{display:flex;gap:10px;align-items:stretch}
.cp-lev .cp-seg{flex:1}
.cp-lev-btn{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:92px;border:1px solid var(--line);background:var(--elevated);border-radius:var(--r-lg);padding:0 14px;cursor:pointer;color:var(--snow)}
.cp-lev-btn span{font-size:10.5px;color:var(--mute)}
.cp-lev-btn strong{font-size:15px}
.cp-adv{border:1px solid var(--line);border-radius:var(--r-lg)}
.cp-adv summary{cursor:pointer;padding:13px 14px;font-size:12.5px;font-weight:600;list-style:none}
.cp-adv summary::-webkit-details-marker{display:none}
.cp-adv summary::after{content:"+";float:right;color:var(--mute)}
.cp-adv[open] summary::after{content:"\2212"}
.cp-adv-body{display:flex;flex-direction:column;gap:18px;padding:4px 14px 16px;border-top:1px solid var(--line-soft)}
.cp-twin{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px}
.cp-twin-head{display:flex;flex-direction:column;gap:3px}
.cp-twin-head strong{font-size:13px}
.cp-twin-head span{font-size:11.5px;line-height:1.45}
.cp-twin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cp-form{display:flex;flex-direction:column;gap:20px;padding:18px}
.cp-preview .cp-card{border-color:var(--line)}
.cp-check{display:flex;flex-direction:column}
.cp-check-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.cp-check-row:last-child{border-bottom:0}
.cp-check-m{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;flex:none;background:var(--elevated);color:var(--mute)}
.cp-check-row.ok .cp-check-m{background:var(--mint-wash);color:var(--mint)}
.cp-check-row.no .cp-check-m{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.cp-check-row strong{display:block;font-size:12.5px}
.cp-check-row small{display:block;margin-top:2px;font-size:11.5px;color:var(--mute)}
.cp-check-row>div{flex:1}
.cp-check-row .cp-btn{margin-left:auto}
.cp-lead-pfs{display:flex;flex-direction:column}
.cp-lead-pf{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;align-items:center;gap:16px;padding:13px 16px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.cp-lead-pf:last-child{border-bottom:0}
.cp-lead-pf small{display:block;margin-top:2px;font-size:11px}
.cp-stop{display:flex;flex-direction:column;gap:16px;padding:20px}
.cp-stop-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cp-stop-note{margin:0;font-size:12px;line-height:1.55;color:var(--snow-dim);background:var(--elevated);border-radius:var(--r-lg);padding:12px 14px;text-wrap:pretty}
.cp-stop-act{display:flex;gap:10px}
.cp-stop-act .cp-btn{flex:1}
@media (max-width:1180px){.cp-two{grid-template-columns:1fr}.cp-rail-right{position:static}}
@media (max-width:760px){.cp-stats{grid-template-columns:repeat(2,1fr)}.cp-stop-kpis{grid-template-columns:1fr}}
[dir="rtl"] .cp-terms dd,[dir="rtl"] .cp-why-row strong{text-align:left}
[dir="rtl"] .cp-panel{border-left:0;border-right:1px solid var(--line)}
[dir="rtl"] .cp-panel-ov{justify-content:flex-start}
[dir="rtl"] .cp-back{transform:scaleX(-1)}

/* Spot · Futures · Copy trade switch (owner 2026-09-26) — only rendered when copy trading is on */
.trade-switch { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.trade-switch button { background: none; border: 0; color: var(--mute); font: 600 12.5px var(--font); padding: 5px 11px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.trade-switch button.on { background: var(--elevated); color: var(--snow); cursor: default; }
.trade-switch button:not(.on):hover { color: var(--snow); }
.trade-switch button:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.cp-page > .trade-switch { margin-bottom: 12px; }

/* ===================== TRADING ACCOUNTS (.ta-) — engine 0.9.0 ===================== */
.ta-wrap{display:flex;flex-direction:column;gap:14px}
.ta-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 22px;flex-wrap:wrap;background:var(--card-hi,none),var(--card,var(--surface))}
.ta-head-l{max-width:60ch}
.ta-head-l h3{margin:0 0 6px;font-size:16px}
.ta-head-l p{margin:0;font-size:12.5px;line-height:1.55;color:var(--snow-dim);text-wrap:pretty}
.ta-head-r{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.ta-sum{display:flex;flex-direction:column;gap:3px;text-align:right}
.ta-sum span{font-size:11px;color:var(--mute)}
.ta-sum strong{font-size:22px;letter-spacing:-.01em}
.ta-sum small{font-size:10.5px;color:var(--mute)}
.ta-head-act{display:flex;gap:8px}
.ta-head-act .tbtn{min-height:36px;padding:0 16px}
.ta-head-act .tbtn:disabled{opacity:.45;cursor:not-allowed}
.ta-table{overflow:hidden}
.ta-row{display:grid;grid-template-columns:minmax(260px,2.2fr) repeat(5,minmax(96px,1fr)) minmax(250px,auto);align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.ta-rowwrap:last-child .ta-row,.ta-table>.ta-row:last-child{border-bottom:0}
.ta-th{padding:10px 18px;font-size:11px;color:var(--mute);border-bottom:1px solid var(--line)}
.ta-th span:not(:first-child){text-align:right}
.ta-row>span.mono{text-align:right;color:var(--snow)}
.ta-row>span.mono.up{color:var(--up)} .ta-row>span.mono.down{color:var(--down)}
.ta-name{display:flex;flex-direction:column;gap:4px;min-width:0}
.ta-name-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ta-name strong{font-size:13.5px;color:var(--snow)}
.ta-name small{font-size:11px;color:var(--mute)}
.ta-bonus{color:var(--warn)!important}
.ta-kind{display:inline-flex;align-items:center;white-space:nowrap;font:600 10.5px/1 var(--font);padding:4px 8px;border-radius:var(--r-full);background:var(--elevated);color:var(--snow-dim)}
.ta-kind.k-main{background:var(--mint-wash);color:var(--mint)}
.ta-kind.k-sub{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.ta-kind.k-portfolio{background:rgba(155,123,255,.14);color:#B7A2FF}
.ta-kind.k-copy{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.ta-stat{display:inline-flex;align-items:center;font:700 10px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;padding:4px 7px;border-radius:var(--r-md);background:var(--down-wash);color:var(--down)}
.ta-stat.closed{background:var(--elevated);color:var(--mute)}
.ta-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.ta-acts .tbtn.xs{min-height:28px;padding:0 11px;font-size:11.5px}
.ta-rowwrap{border-bottom:1px solid var(--line-soft)}
.ta-rowwrap .ta-row{border-bottom:0}
.ta-rownote{margin:-4px 18px 12px;padding:9px 12px;border-radius:var(--r-lg);font-size:11.5px;line-height:1.5;color:var(--snow-dim)}
.ta-rownote.ro{background:color-mix(in srgb,var(--warn) 7%,transparent)}
.ta-rownote.wd{background:var(--down-wash)}
.ta-empty{display:flex;align-items:center;gap:18px;padding:20px 22px;border-style:dashed}
.ta-empty-ic{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--mint-wash);flex:none}
.ta-empty>div:nth-child(2){flex:1}
.ta-empty strong{display:block;font-size:14px;margin-bottom:4px}
.ta-empty p{margin:0;font-size:12.5px;line-height:1.55;color:var(--snow-dim);max-width:70ch}
.ta-closed summary{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;list-style:none;font-size:13px;font-weight:600}
.ta-closed summary::-webkit-details-marker{display:none}
.ta-closed summary::after{content:"+";margin-left:auto;color:var(--mute)}
.ta-closed[open] summary::after{content:"\2212"}
.ta-count{font:600 11px/1 var(--mono);padding:4px 7px;border-radius:var(--r-full);background:var(--elevated);color:var(--mute)}
.ta-crow{display:grid;grid-template-columns:minmax(0,2fr) auto auto auto;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line-soft);font-size:12px;opacity:.78}
/* dialogs */
.modal.ta-modal{width:480px}
.ta-modal .modal-head{align-items:flex-start;border-bottom:1px solid var(--line)}
.ta-msub{margin:4px 0 0;font-size:12px;line-height:1.5;color:var(--mute)}
.ta-msub.mono{font-family:var(--mono)}
.ta-mbody{display:flex;flex-direction:column;gap:16px;padding:18px 18px 20px;overflow-y:auto}
.ta-err{display:none;margin:0;font-size:12px;line-height:1.5;color:var(--down)}
.ta-facts{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.5;color:var(--snow-dim)}
/* From / To stack full-width (09-29 fix): a 480px modal only gives each side-by-side picker ~150px of
   text room, which clips "Main account — can move 3,850.10 USDT" and every other option. Stacked, each
   picker gets the full ~444px body width — enough for the longest option plus its currency. */
.ta-xrow{display:flex;flex-direction:column;gap:10px}
.ta-xrow .ta-swap{align-self:center}
.ta-xrow select.cp-input{appearance:none;cursor:pointer;padding-right:28px;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 15px) 18px,calc(100% - 10px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.ta-swap{width:38px;height:42px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--elevated);color:var(--snow-dim);cursor:pointer;display:grid;place-items:center}
.ta-swap svg{width:16px;height:16px;transform:rotate(90deg)}
.ta-amtrow{display:flex;gap:8px;align-items:stretch}
.ta-amtrow .cp-amt{flex:1}
.ta-max{border:1px solid var(--line);background:var(--elevated);color:var(--mint);font:700 12px/1 var(--font);padding:0 14px;border-radius:var(--r-lg);cursor:pointer}
.ta-done{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-lg);background:var(--mint-wash)}
.ta-done>strong{color:var(--mint);font-size:13px}
.ta-done-rows>div{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;color:var(--snow-dim)}
.ta-done small{font-size:11px;color:var(--snow-dim)}
.ta-close-sum{display:flex;justify-content:space-between;align-items:baseline;padding:14px;border-radius:var(--r-lg);background:var(--elevated)}
.ta-close-sum span{font-size:12px;color:var(--mute)}
.ta-close-sum strong{font-size:17px}
/* A6 — account picker on the futures order form */
.ta-pick{position:relative;display:flex;flex-direction:column;gap:6px;padding:0 0 10px;margin-bottom:10px;border-bottom:1px solid var(--line-soft)}
.ta-pick-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ta-pick-k{font-size:11px;color:var(--mute)}
.ta-pick-btn{display:flex;align-items:center;gap:7px;width:100%;min-width:0;border:1px solid var(--line);background:var(--elevated);color:var(--snow);border-radius:var(--r-lg);padding:8px 10px;cursor:pointer;font:600 12.5px/1 var(--font);text-align:left}
.ta-pick-btn:hover{border-color:color-mix(in srgb,var(--mint) 40%,var(--line))}
.ta-pick-btn strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;min-width:0}
.ta-pick-btn .ta-car{margin-left:auto}
.ta-pick-btn .ta-kind{padding:3px 6px;font-size:9.5px}
.ta-pick-btn .ta-stat{padding:3px 5px;font-size:9px}
.ta-car{display:inline-flex;width:12px;color:var(--mute)}
.ta-car svg{width:12px;height:12px}
.ta-pick-eq{font-size:11px;color:var(--mute)}
.ta-pick-eq b{font-weight:600;color:var(--snow-dim)}
.ta-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none}
.ta-dot.k-sub{background:var(--info)} .ta-dot.k-portfolio{background:#9B7BFF} .ta-dot.k-copy{background:var(--warn)}
.ta-menu{z-index:90;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e-3);overflow:hidden}
.ta-menu-list{max-height:280px;overflow-y:auto;padding:6px}
.ta-menu-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--snow);text-align:left;padding:9px 10px;border-radius:var(--r-lg);cursor:pointer}
.ta-menu-row:hover{background:var(--elevated)}
.ta-menu-row.on{background:var(--mint-wash)}
.ta-menu-row strong{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-menu-row small{display:block;font-size:10.5px;color:var(--mute);margin-top:2px}
.ta-menu-row .mono{font-size:11.5px;color:var(--snow-dim)}
.ta-menu-foot{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:8px 10px}
.ta-menu-foot button{border:0;background:transparent;color:var(--mint);font:600 12px/1 var(--font);cursor:pointer;padding:6px 4px}
.ta-ro-note{display:none}
.term.acct-ro .ta-ro-note,.term.acct-wd .ta-ro-note{display:flex;flex-direction:column;gap:6px;padding:12px;margin-bottom:10px;border-radius:var(--r-lg);font-size:11.5px;line-height:1.5}
.term.acct-ro .ta-ro-note{background:color-mix(in srgb,var(--warn) 8%,transparent);border:1px solid color-mix(in srgb,var(--warn) 28%,transparent)}
.term.acct-wd .ta-ro-note{background:var(--down-wash);border:1px solid color-mix(in srgb,var(--down) 28%,transparent)}
.ta-ro-note strong{font-size:12.5px;color:var(--snow)}
.ta-ro-note p{margin:0;color:var(--snow-dim)}
.ta-ro-note .tbtn{align-self:flex-start;margin-top:2px;color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
/* a copy account on the terminal is read-only: no order form, no position or order actions */
/* a read-only account keeps the order form in place, dimmed and inert (owner 2026-09-29: nothing may jump) */
.term.acct-ro .form-pane>:not(.ta-pick):not(.ta-ro-note){opacity:.28;pointer-events:none!important;user-select:none;filter:saturate(.4)}
.term.acct-ro .orders-pane button.cancel:not(.pos-share),.term.acct-ro .pos-toolbar-acts,.term.acct-ro .mg-step{display:none!important}

/* ===================== COPY TRADING 0.2 additions ===================== */
.cp-tag.info{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}
.cp-tag.ro{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn)}
.cp-rail-note:empty{display:none}
.cp-termsbox{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--r-xl);padding:4px 14px;background:var(--card-hi,none),var(--card,var(--surface))}
.cp-tb-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:12px}
.cp-tb-row:last-child{border-bottom:0}
.cp-tb-row span{color:var(--mute)}
.cp-tb-row strong{color:var(--snow);text-align:right;font-weight:600}
.cp-tb-row.big strong{font-size:20px;color:var(--mint)}
.cp-tb-note{margin:-4px 0 6px;font-size:11.5px;line-height:1.5;color:var(--snow-dim)}
.cp-changed{margin:8px 0 2px;padding:8px 10px;border-radius:var(--r-md);background:color-mix(in srgb,var(--info) 12%,transparent);color:var(--info);font-size:12px;font-weight:600}
.cp-ddbox{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--r-xl);border:1px solid color-mix(in srgb,var(--mint) 30%,var(--line));background:var(--mint-wash)}
.cp-dd-top{display:flex;justify-content:space-between;align-items:baseline}
.cp-dd-top label{font-size:12.5px;font-weight:600}
.cp-dd-v{font-size:20px;color:var(--mint)}
/* Drawdown limit: no thumb until the copier sets it (a thumb at the midpoint read as a chosen value) — tap or drag the bar */
.cp-dd-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;accent-color:var(--mint)}
.cp-dd-range:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
.cp-dd-range::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--line)}
.cp-dd-range::-moz-range-track{height:6px;border-radius:99px;background:var(--line)}
.cp-dd-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--mint);border:3px solid var(--bg,#000);box-shadow:0 0 0 1px var(--mint)}
.cp-dd-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--mint);border:3px solid var(--bg,#000)}
.cp-dd-range:not(.set)::-webkit-slider-thumb{opacity:0}
.cp-dd-range:not(.set)::-moz-range-thumb{opacity:0}
.cp-dd-range:not(.set)::-webkit-slider-runnable-track{background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 12px)}
.cp-dd-range:not(.set)::-moz-range-track{background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 12px)}
.cp-dd-range.set::-webkit-slider-runnable-track{background:color-mix(in srgb,var(--mint) 45%,var(--line))}
.cp-dd-range.set::-moz-range-track{background:color-mix(in srgb,var(--mint) 45%,var(--line))}
.cp-dd-ax{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mute);margin-top:-4px}
.cp-risk{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-xl);background:var(--elevated);border:1px solid var(--line)}
.cp-risk>strong{font-size:12.5px}
.cp-risk ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:11.5px;line-height:1.5;color:var(--snow-dim)}
.cp-risk p{margin:0;font-size:12px;color:var(--warn)}
.cp-start-err:empty{display:none}
.cp-start-err .cp-notice{padding:11px 13px}
.cp-lev-in{width:130px;flex:none}
.cp-progress{display:flex;align-items:center;gap:12px;margin:0 18px 12px;padding:12px 14px;border-radius:var(--r-lg);background:color-mix(in srgb,var(--info) 9%,transparent)}
.cp-progress.lg{margin:0;padding:18px}
.cp-progress strong{display:block;font-size:12.5px}
.cp-progress p{margin:2px 0 0;font-size:11.5px;color:var(--snow-dim);line-height:1.5}
.cp-spin{width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--info) 30%,transparent);border-top-color:var(--info);animation:cpspin .8s linear infinite;flex:none}
@keyframes cpspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cp-spin{animation:none}}
.cp-rel.starting{border-color:color-mix(in srgb,var(--info) 34%,var(--line))}
.cp-pause{display:flex;flex-direction:column;gap:2px;margin:12px 18px 0;padding:10px 12px;border-radius:var(--r-lg);background:color-mix(in srgb,var(--warn) 9%,transparent);font-size:12px}
.cp-pause.sys{background:var(--down-wash)}
.cp-pause strong{color:var(--snow)}
.cp-pause span{color:var(--snow-dim);font-size:11.5px}
.cp-result{display:flex;align-items:center;gap:10px}
.cp-result strong{font-size:16px}
.cp-result-ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--mint-wash);color:var(--mint);font-weight:700}
.cp-stop-rows{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--elevated);padding:4px 14px}
.cp-stop-rows>div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.cp-stop-rows>div:last-child{border-bottom:0}
.cp-stop-rows span{color:var(--mute)}
.cp-stop-lead{margin:0;font-size:12.5px;line-height:1.55;color:var(--snow-dim);text-wrap:pretty}
.cp-back-est{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline;padding:14px;border-radius:var(--r-lg);background:var(--mint-wash);border:1px solid color-mix(in srgb,var(--mint) 30%,transparent)}
.cp-back-est span{font-size:12.5px;color:var(--snow)}
.cp-back-est strong{font-size:20px;color:var(--mint)}
.cp-back-est small{grid-column:1/-1;font-size:11px;color:var(--snow-dim);line-height:1.5}
.cp-back-est.na{background:var(--elevated);border-color:var(--line);grid-template-columns:1fr}
.cp-bars{display:flex;flex-direction:column;gap:10px;padding:16px}
.cp-bar{display:grid;grid-template-columns:70px 1fr auto 100px;align-items:center;gap:12px;font-size:12px}
.cp-bar-t{height:8px;border-radius:var(--r-full);background:var(--elevated);overflow:hidden}
.cp-bar-t span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--mint-deep),var(--mint))}
.cp-bar small{color:var(--mute);font-size:11px}
.cp-steps{margin:0;padding:16px 16px 16px 34px;display:flex;flex-direction:column;gap:14px}
.cp-steps li{font-size:12px;line-height:1.5;color:var(--snow-dim)}
.cp-steps li::marker{color:var(--mint);font-weight:700}
.cp-steps strong{display:block;color:var(--snow);font-size:12.5px;margin-bottom:2px}
.cp-lead-hello{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;background:var(--glow-home,none),var(--card,var(--surface))}
.cp-lead-hello strong{display:block;font-size:14px}
.cp-req-acts{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.cp-agree{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:var(--r-lg);background:var(--elevated)}
.cp-agree>strong{font-size:12.5px}
.cp-e-bar{display:flex;align-items:flex-end;gap:14px;padding:14px 16px}
.cp-e-dates{display:grid;grid-template-columns:200px 200px;gap:12px}
.cp-e-dates input{color-scheme:dark}
.cp-earn td:nth-child(7){font-weight:600}
.cp-created{display:flex;flex-direction:column;gap:14px;padding:22px;max-width:640px}
.cp-created>p{margin:0;font-size:12.5px;line-height:1.55;color:var(--snow-dim)}
.cp-field-note.bad{color:var(--warn)}
.cp-lead-pf{grid-template-columns:minmax(0,1fr) auto auto auto auto}
.cp-kpi>strong.up{color:var(--up)} .cp-kpi>strong.down{color:var(--down)}
.cp-ov{grid-template-columns:repeat(2,minmax(0,1fr))}

.cp-req-bar{display:block;height:5px;margin-top:7px;max-width:320px;border-radius:99px;background:var(--elevated);overflow:hidden}
.cp-req-bar i{display:block;height:100%;border-radius:inherit;background:var(--warn)}
.cp-req-bar.ok i{background:var(--mint)}
.cp-check-row .cp-req-acts .cp-btn{margin-left:0}
/* Own funds only: bonus can't fund a copy (the Max button and the check use futures Main's withdrawable) */
.cp-own{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));background:color-mix(in srgb,var(--warn) 7%,transparent)}
.cp-own strong{font-size:12.5px;color:var(--snow)}
.cp-own span{font-size:11.5px;line-height:1.5;color:var(--snow-dim);text-wrap:pretty}
.cp-req-bonus{display:block;margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--snow-dim)}
.cp-mirror.off .cp-dot{background:var(--mute)}
.cp-mirror.off{color:var(--mute)}

/* Checkbox with an unmistakable state on every theme (owner 2026-09-29: the native box rendered white-filled on
   dark and read as ticked). Unchecked = empty outlined box; checked = accent fill + dark tick. */
.msx-cb{-webkit-appearance:none;appearance:none;flex:0 0 auto;width:15px;height:15px;margin:0;border:1.5px solid var(--t3, #8B95A3);border-radius:4px;background:transparent center/11px 11px no-repeat;cursor:pointer;vertical-align:middle;transition:background-color .12s,border-color .12s}
.msx-cb:checked{background-color:var(--acc, #00D68F);border-color:var(--acc, #00D68F);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%230B0E11' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.msx-cb:focus-visible{outline:2px solid var(--acc, #00D68F);outline-offset:2px}

/* quick Buy / Sell bar in the chart toolbar (owner 2026-10-05) */
.dqt { display: flex; align-items: center; gap: 6px; margin: 0 auto; }
.dqt-btn { display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 92px; padding: 4px 12px; border-radius: 7px; border: 1px solid transparent; font-size: 11px; font-weight: 700; cursor: pointer; color: #04110c; }
.dqt-btn b { font-size: 12px; }
.dqt-btn.buy { background: var(--up, #00D68F); }
.dqt-btn.sell { background: var(--down, #F6465D); color: #fff; }
.dqt-btn:hover { filter: brightness(1.08); }
.dqt-step { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: var(--elevated, #1C2127); color: var(--snow); font-size: 15px; line-height: 1; cursor: pointer; }
.dqt-step:hover { border-color: var(--mint, #00D68F); }
.dqt-size { min-width: 84px; display: inline-flex; align-items: center; gap: 0; height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--elevated, #1C2127); overflow: hidden; }
.dqt-size:focus-within { border-color: var(--mint, #00D68F); }
.dqt-size-in { width: 74px; min-width: 0; height: 100%; padding: 0 6px; border: 0; background: transparent; color: var(--snow); font-size: 12px; text-align: right; outline: none; }
.dqt-unit { height: 100%; padding: 0 7px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--snow-dim, #9aa4b2); font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.dqt-unit:hover { color: var(--mint, #00D68F); }
@media (max-width: 1250px) { .dqt-btn { min-width: 74px; padding: 4px 8px; } .dqt-size { min-width: 64px; } .dqt-size-in { width: 58px; } }

/* desktop order-form percent buttons: selected state (owner 2026-10-05) */
.fpcts button.active { background: var(--mint); border-color: var(--mint); color: #04331f; }

/* quick bar size column: typed size + its USDT value underneath (owner 2026-10-05) */
.dqt-sizecol { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.dqt-val { font-size: 10px; line-height: 1.1; color: var(--snow-dim, #9aa4b2); white-space: nowrap; }

.mr-cell .mr-mode { display: block; font-size: 10px; margin-top: 2px; white-space: nowrap; }

.arow.tx-hl { outline: 1px solid var(--mint, #00D68F); border-radius: 8px; background: color-mix(in srgb, var(--mint, #00D68F) 7%, transparent); }

/* positions table fits the pane (owner 2026-10-05: no sideways scroll, actions never cut off, Close All pinned) */
.prow.wide {
  grid-template-columns:
    minmax(128px, 1.5fr)   /* Symbol + mode/leverage */
    minmax(68px,  0.7fr)   /* Size */
    minmax(88px,  0.85fr)  /* Entry / BE */
    minmax(76px,  0.75fr)  /* Mark */
    minmax(72px,  0.7fr)   /* Liq. */
    minmax(60px,  0.6fr)   /* Margin ratio */
    minmax(92px,  0.85fr)  /* Margin (± isolated) */
    minmax(104px, 1fr)     /* Unrealized PnL (ROE) */
    minmax(84px,  0.8fr)   /* Realized PnL (net) */
    minmax(100px, 0.95fr)  /* TP / SL */
    minmax(196px, 1fr);    /* actions: share · TP/SL · reverse · Close */
}
.otable .prow.wide { min-width: 1068px; }
.prow.wide > span:nth-child(3) { overflow: visible; }
.pos-entry { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.pos-entry small { font-size: 10px; }
.pos-row-acts .pos-ico { width: 26px; height: 24px; padding: 0; display: inline-grid; place-items: center; }
.pos-row-acts .pos-ico svg { width: 13px; height: 13px; }
.pos-tpsl { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; } .pos-tpsl > span.muted { display: none; }
.rp-net { cursor: help; }
.otabs .pos-bar-pinned { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.otabs .pos-bar-pinned + .ord-mktfilter { margin-left: 12px; }
.rp-box { padding: 6px 16px 16px; display: flex; flex-direction: column; }
.rp-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft, var(--line)); font-size: 13px; }
.rp-row span { display: flex; flex-direction: column; gap: 2px; } .rp-row small { font-size: 11px; }
.rp-row.total { border-bottom: 0; font-size: 14px; } .rp-row.total.up strong { color: var(--up); } .rp-row.total.down strong { color: var(--down); }
.mg-cell .mg-open { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
/* row-by-row scroll (owner 2026-10-05: "scroll need keep rows"): whole rows snap under the sticky header, never half-cut */
.otable { scroll-snap-type: y mandatory; scroll-padding-top: var(--ohead-h, 40px); overscroll-behavior: contain; }
.otable > .prow.ohead { min-height: 40px; box-sizing: border-box; }
.otable > .prow:not(.ohead), .otable > .orow { scroll-snap-align: start; }

/* Lead earnings (owner 2026-10-06): range chips + on-demand custom dates (never overlapping), portfolio filter, chart */
.cp-e-bar{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 16px}
.cp-e-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cp-e-chips{display:flex;gap:6px;flex-wrap:wrap}
.cp-chip{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mute);font-weight:600;font-size:13px;cursor:pointer}
.cp-chip.on{background:var(--mint-wash,rgba(0,214,143,.12));border-color:var(--mint);color:var(--mint)}
.cp-e-right{display:flex;gap:8px;align-items:center}
.cp-e-pf{min-height:34px;width:auto;min-width:180px;max-width:260px}
.cp-e-custom{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.cp-e-dl{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute);min-width:0}
.cp-e-dl input{width:170px;min-width:0;box-sizing:border-box;color-scheme:dark;-webkit-appearance:none;appearance:none}
.cp-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cp-seg button{height:28px;padding:0 12px;background:transparent;border:0;color:var(--mute);font-weight:600;font-size:12px;cursor:pointer}
.cp-seg button.on{background:var(--elevated);color:var(--snow)}
.cp-kpis-5{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.cp-e-chart{padding:14px 16px 10px}
.cp-e-cols{display:flex;align-items:flex-end;gap:2px;height:140px;border-bottom:1px solid var(--line)}
.cp-e-col{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end}
.cp-e-col span{display:block;width:100%;background:var(--mint);border-radius:2px 2px 0 0;opacity:.85}
.cp-e-col:hover span{opacity:1}
.cp-e-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);padding-top:6px;font-family:var(--mono)}
.cp-e-pfrow{cursor:pointer}
.cp-e-pfrow:hover td{background:var(--elevated)}
.cp-e-cop{display:flex;flex-direction:column}
.cp-e-copg{border-top:1px solid var(--line)}
.cp-e-copg:first-child{border-top:0}
.cp-e-copg summary{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;list-style:none}
.cp-e-copg summary::-webkit-details-marker{display:none}
.cp-e-copg summary::before{content:"\203A";color:var(--mute);transition:transform .15s}
.cp-e-copg[open] summary::before{transform:rotate(90deg)}

/* Trading preferences (owner 2026-10-06) */
.tp-gear{display:inline-flex;align-items:center;justify-content:center;width:30px;padding:0}
.tp-body{display:flex;flex-direction:column;gap:2px}
.tp-sec{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:12px 0 4px}
.tp-sec:first-child{margin-top:0}
.tp-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft,rgba(255,255,255,.05))}
.tp-row > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.tp-row strong{font-size:13px;display:flex;align-items:center;gap:6px}
.tp-row small{font-size:11.5px}
.tp-risk{font-size:10px;font-weight:700;color:var(--warn);border:1px solid var(--warn);border-radius:4px;padding:0 4px}
.tp-sw{position:relative;flex:none;width:36px;height:20px;cursor:pointer}
.tp-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.tp-sw span{pointer-events:none;position:absolute;inset:0;border-radius:999px;background:var(--elevated);border:1px solid var(--line);transition:background .15s}
.tp-sw span::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--mute);transition:transform .15s,background .15s}
.tp-sw input:checked + span{background:var(--mint-wash,rgba(0,214,143,.18));border-color:var(--mint)}
.tp-sw input:checked + span::after{transform:translateX(16px);background:var(--mint)}
.tp-sw input:focus-visible + span{outline:2px solid var(--mint);outline-offset:2px}
.tp-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}
.tp-seg button{height:28px;padding:0 12px;background:transparent;border:0;color:var(--mute);font-weight:600;font-size:12px;cursor:pointer}
.tp-seg button.on{background:var(--elevated);color:var(--snow)}
.rp-net:focus-visible,.liq-est:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:3px}

/* ══ Loss Shield Challenge (ls-*, owner 2026-10-07) — lib/lossshield.js; built on the rw-* Rewards tokens ══ */
.ls-card .ls-ic{background:var(--mint-wash);color:var(--mint)}
.ls-mini{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--elevated);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.ls-mini .l{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ls-mini b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.ls-shields{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ls-icons{display:flex;gap:4px}
.ls-sh{width:18px;height:20px;display:grid;place-items:center;font-size:12px;line-height:1;border-radius:5px;border:1px dashed var(--line);color:transparent}
.ls-sh.on{border:1px solid color-mix(in srgb, var(--mint) 45%, transparent);background:var(--mint-wash);color:var(--mint)}
.ls-shields.big .ls-sh{width:28px;height:32px;font-size:17px;border-radius:7px}
/* more than 5 shields (earned by deposit / volume): the small icon size, wrap as a last resort — never overflow */
.ls-icons{flex-wrap:wrap;justify-content:flex-end;max-width:100%}
.ls-shields.big .ls-icons.many .ls-sh{width:20px;height:23px;font-size:13px;border-radius:5px}
.ls-count{font-size:11px;color:var(--mute)}
.ls-count b{color:var(--snow);font-family:var(--mono)}
.ls-page{display:flex;flex-direction:column;gap:10px}
.ls-page.desk{grid-column:1/-1}
.ls-hero .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ls-hero .lbl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500}
.ls-hero-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:8px;flex-wrap:wrap}
.ls-k{font-size:11px;color:var(--mute)}
.ls-sub{font-size:10.5px;color:var(--mute);margin-top:3px;line-height:1.45}
.ls-count-down{font-size:11px;color:var(--snow-dim);margin-top:11px;padding-top:10px;border-top:1px solid var(--line)}
.ls-note{font-size:11.5px;line-height:1.5;margin-top:9px;padding:8px 10px;border-radius:8px;background:var(--elevated);color:var(--snow-dim)}
.ls-note.warn{color:var(--warn);background:color-mix(in srgb, var(--warn) 10%, transparent)}
.ls-list{padding:4px 12px}
.ls-pos{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.ls-pos:last-child,.ls-recrow:last-child{border-bottom:none}
.ls-pos.focus{background:color-mix(in srgb, var(--mint) 7%, transparent);margin:0 -12px;padding:11px 12px;border-radius:8px}
.ls-pos-l{min-width:0;display:flex;flex-direction:column;gap:4px}
.ls-pos-l strong{font-size:13px}
.ls-pos-l small,.ls-recrow small{font-size:10.5px;color:var(--mute);display:block}
.ls-side{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;margin-right:6px}
.ls-side.long{background:var(--up-wash);color:var(--up)}
.ls-side.short{background:var(--down-wash);color:var(--down)}
.ls-lev{font-size:10px;color:var(--mute);margin-left:6px}
.ls-liq{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;color:var(--warn);border:1px solid color-mix(in srgb, var(--warn) 45%, transparent);border-radius:4px;padding:1px 5px;margin-left:6px}
.ls-pos-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.ls-rec{color:var(--mint);font-weight:600;font-size:14px}
.ls-rec small{font-size:10px;color:var(--mute)}
.ls-cap{font-size:9.5px;color:var(--mute)}
.rw-cta.ls-use{height:30px;width:auto;padding:0 14px;font-size:12px}
.rw-cta.ls-use:disabled{opacity:.45;cursor:default}
.ls-recrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.ls-recrow strong{font-size:12.5px}
.ls-recrow-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.ls-recrow-r b{font-size:13px;color:var(--mint)}
.ls-st{font-size:10px;font-weight:600;border-radius:5px;padding:2px 7px}
.ls-st.ok{color:var(--mint);background:var(--mint-wash)}
.ls-st.wait{color:var(--warn);background:color-mix(in srgb, var(--warn) 12%, transparent)}
.ls-st.bad{color:var(--down,#f6465d);background:color-mix(in srgb, var(--down,#f6465d) 12%, transparent)}
.ls-st.grey{color:var(--mute);background:var(--elevated)}
.ls-how h3{margin:0 0 8px;font-size:14px}
.ls-step{display:flex;gap:10px;padding:7px 0}
.ls-step .n{width:22px;height:22px;border-radius:50%;background:var(--mint-wash);color:var(--mint);display:grid;place-items:center;font-size:11px;flex:none}
.ls-step b{font-size:12.5px}
.ls-step p{margin:2px 0 0;font-size:11.5px;line-height:1.5;color:var(--snow-dim)}
.ls-fine{font-size:10.5px;line-height:1.5;color:var(--mute);margin:8px 0 0}
.ls-chip-host{display:inline-flex}
.ls-chip{display:inline-flex;align-items:center;gap:4px;margin:4px 0 0 0;height:20px;padding:0 8px;border-radius:99px;border:1px solid color-mix(in srgb, var(--mint) 45%, transparent);background:var(--mint-wash);color:var(--mint);font:600 10px/1 var(--font);cursor:pointer;white-space:nowrap}
.orow .ls-chip{margin:0 0 0 8px}
.ls-back{grid-column:1/-1;font-size:13px}
.ls-back a{color:var(--mint);text-decoration:none;font-weight:500}
.ls-ov{position:fixed;inset:0;z-index:2147483100;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.ls-sheet{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.ls-sheet h3{margin:0 0 8px;font-size:16px}
.ls-sheet p{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--snow-dim)}
.ls-btns{display:flex;gap:8px}
/* release 2026-10-07: base-0 "Earn shields" line, operator tagline, guarded fallback (never a blank page) */
.ls-shields.ls-earn{max-width:62%;text-align:right}
.ls-shields.ls-earn .ls-count{color:var(--snow-dim);line-height:1.45}
.ls-hero .ls-tagline{font-size:12px;color:var(--snow-dim);margin-top:4px}
.ls-fallback{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ls-fallback .ls-btns{justify-content:center}
.ls-fallback .rw-cta{white-space:nowrap;width:auto;padding-left:18px;padding-right:18px}
/* Loss Shield Home bar (owner 2026-10-07): the host takes no space while hidden; the bar owns its margins */
.ls-bar-host[hidden]{display:none!important}
.ls-bar{display:block;width:100%;margin:0 0 16px;padding:10px 14px 9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,12px);color:var(--snow);text-align:left;cursor:pointer;font:inherit;box-sizing:border-box}
.ls-bar:active{background:var(--elevated)}
.ls-bar:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.ls-bar-top{display:flex;align-items:center;gap:11px}
.ls-bar-ic{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--mint-wash);font-size:16px;line-height:1}
.ls-bar-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ls-bar-t small{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-bar-amt{font-size:13px;font-family:inherit;color:var(--snow-dim,var(--mute));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ls-bar-amt b{font-family:var(--mono,ui-monospace,monospace);font-size:15px;font-weight:600;color:var(--snow);font-variant-numeric:tabular-nums}
.ls-bar-go{flex:none;font-size:20px;color:var(--mute);line-height:1}
.ls-bar-track{height:6px;margin:8px 0 6px;border-radius:99px;background:var(--elevated);overflow:hidden}
.ls-bar-track .fill{height:100%;border-radius:99px;background:var(--mint);min-width:0}
.ls-bar-foot{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:11px;color:var(--mute)}
.ls-bar-track + .ls-bar-foot{margin-top:0}
.ls-bar-cd{white-space:nowrap}
/* Terms window (owner 2026-10-07): campaign description + the full terms text in a modal (plain text, never HTML) */
.rw-camp p.rw-desc{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:var(--snow);opacity:.85;white-space:pre-line}
.rw-camp .foot a.mt-link,.rw-card a.mt-link{color:var(--mint);text-decoration:none;font-weight:600;cursor:pointer}
.rw-camp .foot a.mt-link:hover,.rw-card a.mt-link:hover{text-decoration:underline}
.mt-row{margin-top:8px;text-align:right;font-size:11px}
.mt-ov{position:fixed;inset:0;z-index:2147483100;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:24px}
.mt-modal{width:100%;max-width:560px;max-height:min(80vh,720px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.5);outline:none}
.mt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 10px}
.mt-head h3{margin:0;font-size:16px;font-weight:700;color:var(--snow)}
.mt-x{background:none;border:none;color:var(--mute);font-size:18px;cursor:pointer;padding:4px 6px;border-radius:6px}
.mt-x:hover{color:var(--snow)}
.mt-x:focus-visible,.mt-foot .rw-cta:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.mt-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 20px 16px}
.mt-body{font-size:13px;line-height:1.55;color:var(--snow-dim);overflow-wrap:anywhere}
.mt-body .mt-h{margin:14px 0 4px;font-size:13px;font-weight:700;color:var(--snow)}
.mt-body .mt-h:first-child{margin-top:0}
.mt-body .mt-p{margin:0 0 8px}
.mt-body .mt-ul{margin:0 0 8px;padding:0 0 0 18px}
.mt-body .mt-ul li{margin:0 0 4px}
.mt-foot{padding:10px 20px 16px;display:flex;justify-content:flex-end;border-top:1px solid var(--line)}
.mt-foot .rw-cta{width:auto;padding-left:22px;padding-right:22px}

/* ===== Transaction History (lib/txhist.js) — shared by mobile/app and desktop (owner 2026-10-07) ===== */
.txh { color: var(--snow); }
.txh button { font-family: inherit; }
.txh-bar { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 4px 0 8px; }
.txh-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-soft); overflow-x: auto; scrollbar-width: none; }
.txh-tabs::-webkit-scrollbar { display: none; }
.txh-tab { background: none; border: 0; color: var(--mute); font-size: 14px; font-weight: 600; padding: 11px 14px; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.txh-tab.active { color: var(--snow); border-bottom-color: var(--mint); }
.txh-filters { display: flex; gap: 8px; padding: 10px 0 2px; overflow-x: auto; scrollbar-width: none; align-items: center; }
.txh-filters::-webkit-scrollbar { display: none; }
.txh-sel, .txh-date { appearance: none; -webkit-appearance: none; background: var(--surface); color: var(--snow-dim); border: 1px solid var(--line-soft); border-radius: 8px; font-size: 12.5px; font-weight: 500; padding: 7px 28px 7px 11px; min-height: 34px; cursor: pointer; flex: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 15px) 14px, calc(100% - 10px) 14px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.txh-date { padding-right: 11px; background-image: none; }
.txh-sel.on { color: var(--snow); border-color: var(--mint); }
.txh-sel option { background: var(--surface); color: var(--snow); }
.txh-reset, .txh-link { background: none; border: 0; color: var(--mint); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 4px; flex: none; }
.txh-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.4; background: rgba(240,185,11,.1); border: 1px solid rgba(240,185,11,.4); }
.txh-day { font-size: 12px; font-weight: 600; color: var(--mute); padding: 14px 2px 6px; letter-spacing: .01em; }
.txh-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 12px; cursor: pointer; }
.txh-row:hover { background: var(--surface); }
.txh-row:active { background: var(--elevated); }
.txh-row.tx-hl { outline: 1px solid var(--mint); background: color-mix(in srgb, var(--mint) 7%, transparent); }
.txh-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface); }
.txh-ic.deposit { color: var(--up); background: var(--up-wash); }
.txh-ic.withdraw { color: var(--down); background: var(--down-wash); }
.txh-ic.transfer { color: var(--warn); background: rgba(240,185,11,.12); }
.txh-ic svg { display: block; }
.txh-mid { flex: 1; min-width: 0; }
.txh-title { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txh-sub { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 11.5px; flex-wrap: wrap; }
.txh-chip { display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 5px; background: var(--elevated); color: var(--snow-dim); letter-spacing: .02em; }
.txh-r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; max-width: 52%; }
.txh-amt { font-size: 14.5px; font-weight: 600; word-break: break-all; }
.txh-pill { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.txh-pill.ok { color: var(--up); background: var(--up-wash); }
.txh-pill.warn { color: var(--warn); background: rgba(240,185,11,.13); }
.txh-pill.bad { color: var(--down); background: var(--down-wash); }
.txh-pill.mute { color: var(--mute); background: var(--elevated); }
.txh-more { display: block; margin: 14px auto 6px; }
.txh-end { text-align: center; font-size: 12px; padding: 14px 0 6px; }
.txh-sentinel { height: 1px; }
.txh-skel-row { height: 62px; margin: 8px 0; border-radius: 12px; background: linear-gradient(90deg, var(--surface), var(--elevated), var(--surface)); background-size: 200% 100%; animation: txhsk 1.3s linear infinite; }
@keyframes txhsk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .txh-skel-row { animation: none; } }
.txh-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 24px; color: var(--mute); }
.txh-state strong { color: var(--snow); font-size: 15px; }
.txh-state p { margin: 0; font-size: 13px; line-height: 1.5; max-width: 280px; }
.txh-state.error .txh-state-ic { color: var(--down); }
.txh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--surface); color: var(--snow); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.txh-btn.primary { background: var(--mint); border-color: var(--mint); color: #0B0E11; }
.txh-btn.danger { background: transparent; border-color: var(--down); color: var(--down); }
.txh-btn:disabled { cursor: default; }
.txh-state .txh-btn { margin-top: 10px; }
/* detail */
.txh-detail { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 24px; max-width: 640px; margin: 0 auto; }
.txh-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 4px; text-align: center; }
.txh-hero .txh-ic { width: 52px; height: 52px; }
.txh-hero-amt { font-size: 28px; font-weight: 700; word-break: break-all; line-height: 1.15; }
.txh-hero-sub { font-size: 12.5px; }
.txh-hint { font-size: 12.5px; line-height: 1.5; padding: 11px 13px; border-radius: 10px; background: var(--surface); color: var(--snow-dim); }
.txh-steps { display: flex; flex-direction: column; background: var(--surface); border-radius: 12px; padding: 14px 16px; }
.txh-step { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.txh-step:last-child { padding-bottom: 0; }
.txh-step:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 2px; background: var(--line-soft); }
.txh-step.done:not(:last-child)::before { background: var(--up); }
.txh-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-soft); display: grid; place-items: center; flex: none; background: var(--bg); color: #0B0E11; }
.txh-step.done .txh-dot { background: var(--up); border-color: var(--up); }
.txh-step.current .txh-dot { border-color: var(--warn); box-shadow: 0 0 0 4px rgba(240,185,11,.16); }
.txh-step.warn .txh-dot { border-color: var(--down); box-shadow: 0 0 0 4px var(--down-wash); }
.txh-step-t { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.txh-step.todo .txh-step-t strong { color: var(--mute); font-weight: 500; }
.txh-step-t small { font-size: 11.5px; }
.txh-card { background: var(--surface); border-radius: 12px; padding: 4px 16px; }
.txh-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.txh-line:last-child { border-bottom: 0; }
.txh-line.stack { flex-direction: column; gap: 6px; }
.txh-k { color: var(--mute); flex: none; }
.txh-vwrap { display: flex; align-items: flex-start; gap: 10px; min-width: 0; text-align: right; }
.txh-line.stack .txh-vwrap { width: 100%; justify-content: space-between; text-align: left; }
.txh-v { font-weight: 500; overflow-wrap: anywhere; word-break: break-all; }
.txh-v.wrap { font-size: 12.5px; line-height: 1.5; }
.txh-cp { display: inline-flex; align-items: center; gap: 5px; flex: none; background: var(--elevated); color: var(--snow-dim); border: 0; border-radius: 7px; font-size: 12px; font-weight: 600; padding: 6px 10px; min-height: 30px; cursor: pointer; }
.txh-actions { display: flex; flex-direction: column; gap: 10px; }
.txh-note { font-size: 12px; text-align: center; margin: 0; }
.txh-back { background: none; border: 0; color: var(--snow-dim); font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 6px 0 14px; }
/* phone: pushed screen supplies the padding */
.txh-mob { padding: 0 16px 20px; }
/* desktop: grid table */
.txh-desk .txh-row.table { display: grid; grid-template-columns: 2.2fr 1.2fr 1.6fr 1.1fr 1.6fr; gap: 12px; align-items: center; border-radius: 0; border-bottom: 1px solid var(--line-soft); padding: 11px 10px; }
.txh-desk .txh-row.table.head { cursor: default; font-size: 11.5px; color: var(--mute); padding-bottom: 8px; }
.txh-desk .txh-row.table.head:hover { background: none; }
.txh-desk .txh-c-type { display: flex; align-items: center; gap: 10px; min-width: 0; }
.txh-desk .txh-c-type .txh-ic { width: 30px; height: 30px; }
.txh-desk .txh-c-time { font-size: 12px; }
.txh-desk .txh-c-amt { font-weight: 600; }
.txh-desk .txh-day { padding-top: 16px; }
.txh-desk .txh-bar { background: transparent; position: static; }
@media (max-width: 760px) { .txh-desk .txh-row.table { grid-template-columns: 1fr 1fr; } .txh-desk .txh-row.table.head { display: none; } }
/* 1.2.42 total gate: "partial" mark next to a total that is missing a source (MX.totalStatus) */
.bal-partial { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; color: #F0B90B; background: rgba(240,185,11,.12); border: 1px solid rgba(240,185,11,.35); cursor: help; font-family: var(--sans, inherit); }