/* Wake: the trade terminal.
 *
 * Floating panels on black, the way the site is built, but at an exchange's density: every
 * number in tabular figures, colour only for up/down and the brand accent, and the reading
 * order of every perp screen (market, chart, book, order form, positions).
 * Tokens and the shared header come from ui.css.
 */

.terminal {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 12.5px/1.45 var(--sans);
  font-feature-settings: "tnum" 1, "cv05" 1; -webkit-font-smoothing: antialiased;
}
.terminal *, .terminal *::before, .terminal *::after { box-sizing: border-box; }
/* Element rules are scoped to the terminal's own containers and weigh one element, so the
   shared header's buttons and any .btn inside the terminal keep their look. */
:where(.term, .picker, .tmodal, .menu) a { color: inherit; text-decoration: none; }
:where(.term, .picker, .tmodal, .menu) code { font: 11px var(--mono); }
.terminal ::selection { background: rgba(0, 253, 255, 0.28); }

:where(.term, .picker, .tmodal, .menu) button {
  font: inherit; color: var(--text); cursor: pointer; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface-2); padding: 5px 10px;
  transition: background 120ms, border-color 120ms, color 120ms;
}
:where(.term, .picker, .tmodal, .menu) button:hover:not(:disabled) { border-color: var(--line-3); }
:where(.term, .picker, .tmodal, .menu) button:disabled { opacity: 0.4; cursor: not-allowed; }
:where(.term, .picker, .tmodal, .menu) button.plain { background: none; border-color: transparent; color: var(--muted); padding: 4px 8px; }
:where(.term, .picker, .tmodal, .menu) button.plain:hover { color: var(--text); }
:where(.term, .picker, .tmodal, .menu) button.plain.active { color: var(--text); }
/* Text tabs, filters and icon buttons answer the pointer by brightening, never with a frame. */
:where(.term, .picker, .tmodal, .menu) button:is(.plain, .icon, .filter):hover:not(:disabled) { border-color: transparent; }
:where(.term, .picker, .tmodal, .menu) button.icon { background: none; border-color: transparent; color: var(--muted); padding: 5px; line-height: 0; border-radius: 6px; }
:where(.term, .picker, .tmodal, .menu) button.icon:hover { color: var(--text); background: var(--surface-3); }
:where(.term, .picker, .tmodal, .menu) button.icon svg { width: 15px; height: 15px; }
:where(.term, .picker, .tmodal, .menu) button.buy, :where(.term, .picker, .tmodal, .menu) button.sell { border: 0; font-weight: 600; color: #fff; }
:where(.term, .picker, .tmodal, .menu) button.buy { background: var(--up); }
:where(.term, .picker, .tmodal, .menu) button.sell { background: var(--down); }
:where(.term, .picker, .tmodal, .menu) button.buy:hover:not(:disabled) { background: #36d69a; }
:where(.term, .picker, .tmodal, .menu) button.sell:hover:not(:disabled) { background: #ff5a70; }
:where(.term, .picker, .tmodal, .menu) :is(input, select) {
  font: inherit; color: var(--text); background: #05090b; border: 1px solid var(--line-2);
  border-radius: 8px; padding: 6px 9px; width: 100%; outline: none; transition: border-color 120ms, box-shadow 120ms;
}
:where(.term, .picker, .tmodal, .menu) :is(input, select):focus { border-color: rgba(0, 253, 255, 0.55); box-shadow: 0 0 0 3px rgba(0, 253, 255, 0.08); }
:where(.term, .picker, .tmodal, .menu) select { appearance: none; padding-right: 26px; cursor: pointer;
  background: #05090b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%2388dae2' stroke-width='1.5'%3E%3Cpath d='M2 3.5 5 6.5l3-3'/%3E%3C/svg%3E") no-repeat right 9px center; }
/* Checkboxes are drawn once for every page in ui.css; the terminal's are a size smaller. Its
   input rules below must not give them the text-box border, padding or width. */
:where(.term, .picker, .tmodal, .menu) input[type="checkbox"] { width: 15px; height: 15px; padding: 0; border-radius: 4px; }
:where(.term, .picker, .tmodal, .menu) input[type="range"] { padding: 0; border: 0; box-shadow: none; accent-color: var(--brand); background: none; }
:where(.term, .picker, .tmodal, .menu) label { display: block; font-size: 11px; color: var(--muted); margin: 0 0 4px; }

.dim { color: var(--muted); }
.up { color: var(--up); }
.down { color: var(--down); }
.warn { color: var(--warn); }
.right { text-align: right; }
[data-dir="up"] { color: var(--up); }
[data-dir="down"] { color: var(--down); }

/* ================================================================ LAYOUT == */

/* Market across the top; chart and book side by side; the order form runs the full height
   on the right with the account under it; positions under the chart. The chart and book fill
   the window as they always did, and the page runs 220px further down, all of it given to
   positions and history, which scroll into view. (48px is the header.) */
.term {
  flex: 0 0 auto; height: calc(100vh - 48px + 220px); display: grid; gap: 4px; padding: 4px;
  grid-template-columns: minmax(0, 1fr) 300px 320px;
  grid-template-rows: auto minmax(0, 1fr) minmax(400px, calc(27vh + 220px));
  grid-template-areas:
    "bar    bar    form"
    "chart  book   form"
    "bottom bottom account";
}
.panel {
  position: relative; min-width: 0; min-height: 0; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column;
}
.bar { grid-area: bar; }
.chart-cell { grid-area: chart; overflow: hidden; container-type: inline-size; }
.book-col { grid-area: book; overflow: hidden; padding: 0 10px 8px; }
.form { grid-area: form; overflow: auto; padding: 12px 14px; gap: 9px; }
.account-col { grid-area: account; overflow: auto; padding: 12px 14px; }
.bottom { grid-area: bottom; overflow: hidden; padding: 0 12px; }

/* ================================================================ MARKET == */

.bar { flex-direction: row; align-items: center; gap: 18px; padding: 8px 14px; z-index: 30; }
.symbol-box { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 10px; cursor: pointer; flex: 0 0 auto; transition: background 150ms; }
.symbol-box:hover { background: var(--surface-3); }
#symbol-logo { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); }
.symbol-name { display: flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.symbol-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.tag { font-size: 10px; font-weight: 600; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; letter-spacing: 0; }
.badge { font-size: 10px; font-weight: 700; color: var(--brand); background: rgba(0, 253, 255, 0.08); border: 1px solid rgba(0, 253, 255, 0.35); border-radius: 5px; padding: 1px 5px; letter-spacing: 0; }
.caret { width: 12px; height: 12px; color: var(--muted); transition: transform 200ms; }
.symbol-box:hover .caret { transform: rotate(180deg); color: var(--brand); }
.price-block { flex: 0 0 auto; min-width: 104px; }
.price-block .last { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; transition: color 250ms; }
#symbol-change { font-size: 12px; font-weight: 600; }
.stats { flex: 1; min-width: 0; display: flex; align-items: center; gap: 20px; overflow-x: auto; scrollbar-width: none; padding: 4px 0; }
.stats::-webkit-scrollbar { display: none; }
.stat { position: static; flex: 0 0 auto; }
.stat > span { display: block; width: fit-content; color: var(--muted); font-size: 11px; white-space: nowrap; margin-bottom: 2px; }
/* A dotted underline is the usual sign that a label will explain itself. */
.stat > span[data-tip] { border-bottom: 1px dashed var(--line-3); cursor: help; }
.stat > span[data-tip]:hover { color: var(--text); border-bottom-color: var(--muted); }
.stat strong { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* The note shows on hover; placed by the bar, so the scrolling stats cannot clip it. */
.stat .tip { display: none; position: absolute; top: calc(100% + 6px); }
.stat:hover .tip, .stat .tip:hover { display: block; animation: rise-in 180ms var(--ease) both; }
/* The card every hover note on the site is drawn on (.hover-note in ui.css), with room for a few lines. */
.tip {
  z-index: 95; width: max-content; max-width: 340px; padding: 12px 14px;
  background: #0b1317; border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-size: 12px; color: var(--text-2); line-height: 1.55;
}
.tip .line { display: flex; justify-content: space-between; gap: 18px; color: var(--muted); padding: 1px 0; }
.tip .line strong { color: var(--text); }
/* An invisible bridge over the gap, so the pointer can travel from the label into the note. */
.stat .tip::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.tip p { margin: 8px 0 0; }

/* ================================================================ PICKER == */

@keyframes drop-open { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* On the page, not the window: it stays under the symbol however far the page is scrolled. */
.picker {
  position: absolute; z-index: 60; top: 110px; left: 8px; width: 820px; max-width: calc(100vw - 16px);
  padding: 14px; border-radius: 14px; border: 1px solid var(--line-2); background: #070b0d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75); animation: drop-open 160ms var(--ease);
}
.picker-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border-radius: 10px; border: 1px solid var(--line-2); background: #05090b; }
.picker-search:focus-within { border-color: rgba(0, 253, 255, 0.5); }
.picker-search svg { width: 15px; height: 15px; color: var(--muted); flex: 0 0 auto; }
.picker-search input { border: 0; padding: 0; background: none; box-shadow: none !important; }
.picker-tabs { display: flex; gap: 18px; margin: 12px 0 8px; border-bottom: 1px solid var(--line); }
.terminal .picker-tabs button { border-radius: 0; padding: 7px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: 600; }
.terminal .picker-tabs button.active { color: var(--text); border-bottom-color: var(--brand); }
.picker .filters { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.terminal .chip { padding: 4px 11px; border-radius: 999px; background: var(--surface-2); border-color: transparent; color: var(--muted); font-size: 12px; }
.terminal .chip:hover { color: var(--text); }
.terminal .chip.active { background: rgba(0, 253, 255, 0.1); color: var(--brand); border-color: rgba(0, 253, 255, 0.3); }
.picker .scroll { max-height: 400px; overflow: auto; }
.picker th[data-sort] { cursor: pointer; user-select: none; }
.picker th[data-sort]:hover { color: var(--text); }
.picker th .arrow { color: var(--brand); }
.picker tbody tr { cursor: pointer; }
.picker tbody tr:hover { background: rgba(0, 253, 255, 0.04); }
.coin { display: flex; align-items: center; gap: 9px; }
.coin img, .coin .logo { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); flex: 0 0 auto; }
.coin .letter { width: 22px; height: 22px; border-radius: 50%; color: #001314; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex: 0 0 auto; }
.star { color: var(--line-3); cursor: pointer; font-size: 13px; }
.star:hover { color: var(--text-2); }
.star.on { color: var(--brand); }
.badge-small { display: inline-block; font-size: 10px; font-weight: 600; color: var(--brand); border: 1px solid rgba(0, 253, 255, 0.25); border-radius: 4px; padding: 0 4px; margin-top: 2px; }

/* ================================================================= CHART == */

#tvchart { position: relative; flex: 1; min-height: 320px; min-width: 0; width: 100%; overflow: hidden; border-radius: 10px; }
/* Each chart build sits in its own slot. A new one is built underneath the chart on screen, fully
   visible to the browser but covered, so it is already painted when the old one is taken away.
   (Made transparent instead, Chrome stops painting the frame, and the swap showed one blank frame.) */
.tv-slot { position: absolute; inset: 0; z-index: 1; }
.tv-slot.pending { z-index: 0; pointer-events: none; }
/* While the next chart builds under it, the one on screen dims under a spinner. */
#tvchart::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: rgba(3, 6, 8, 0.5); transition: opacity 160ms;
}
#tvchart::before {
  content: ""; position: absolute; z-index: 3; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; border: 2px solid rgba(136, 218, 226, 0.22); border-top-color: var(--brand);
  pointer-events: none; opacity: 0; transition: opacity 160ms;
}
#tvchart.loading::after { opacity: 1; backdrop-filter: blur(2px); }
#tvchart.loading::before { opacity: 1; animation: spin 700ms linear infinite; }
#tvchart iframe { width: 100% !important; }
/* The chart's toolbar is ours (the widget's own bar cannot show a chosen set of intervals or
   one chart-type button), drawn in TradingView's chrome so it reads as part of the chart:
   #0f0f0f bar, #dbdbdb text, #4a4a4a dividers, #3d3d3d hover. */
.chart-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 6px;
  background: #0f0f0f; border-bottom: 1px solid #2e2e2e; overflow-x: auto; scrollbar-width: none;
}
.chart-bar::-webkit-scrollbar { display: none; }
.chart-cell.expanded { position: fixed; inset: 8px; z-index: 70; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85); }
.cb-intervals { display: flex; align-items: center; gap: 1px; }
.cb-spacer { flex: 1; min-width: 8px; }
.tv-sep { flex: 0 0 auto; width: 1px; height: 22px; margin: 0 6px; background: #4a4a4a; }
.terminal .chart-bar .tv-btn {
  flex: 0 0 auto; height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px;
  border: 0; border-radius: 4px; background: transparent; color: #dbdbdb;
  font: 400 14px/1 -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif; white-space: nowrap;
}
.terminal .chart-bar .tv-btn:hover { background: #3d3d3d; color: #fff; }
.terminal .chart-bar .tv-btn.active { background: #2e2e2e; color: #fff; }
.terminal .chart-bar .tv-btn.icon-only { width: 34px; padding: 0; justify-content: center; }
.chart-bar .tv-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.chart-bar .tv-btn .tv-caret { width: 10px; height: 10px; opacity: 0.8; }
#btn-intervals-more { padding: 0 6px; }
.menu-icon { display: inline-flex; color: var(--text-2); }
.menu-icon svg { width: 18px; height: 18px; }
@container (max-width: 760px) { .tv-tail { display: none; } }

/* One-click market orders over the chart, Aster's way: buy at the ask, an amount, sell at the bid.
   It can be dragged; while it is, the chart's iframe stops taking the pointer. */
.qo {
  position: absolute; z-index: 22; left: 62px; top: 96px; display: flex; align-items: stretch;
  border-radius: 8px; overflow: hidden; border: 1px solid #2e2e2e; background: #111; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  font-size: 12px; user-select: none;
}
.qo[hidden] { display: none; }
.qo-grip { display: flex; align-items: center; padding: 0 7px; background: #161616; color: #6a6a6a; cursor: grab; touch-action: none; }
.qo-grip:hover { color: #dbdbdb; }
.qo-grip svg { width: 8px; height: 14px; }
.chart-cell.dragging .qo-grip { cursor: grabbing; }
.chart-cell.dragging #tvchart iframe { pointer-events: none; }
.terminal .qo .qo-buy, .terminal .qo .qo-sell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 96px;
  padding: 6px 12px; border: 0; border-radius: 0; color: #fff; transition: background 120ms;
}
.terminal .qo .qo-buy { background: rgba(46, 189, 133, 0.22); }
.terminal .qo .qo-sell { background: rgba(246, 70, 93, 0.22); }
.terminal .qo .qo-buy:hover:not(:disabled) { background: var(--up); }
.terminal .qo .qo-sell:hover:not(:disabled) { background: var(--down); }
.qo small { font-size: 11px; font-weight: 600; opacity: 0.9; }
.qo b { font-size: 12.5px; font-weight: 700; }
.terminal .qo-amt { display: flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: 5px 10px; min-width: 116px; background: #0d0d0d; }
.qo-amt small { color: #8a8a8a; }
.terminal .qo-amt input { width: 100px; height: 16px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none !important; font-size: 12px; }
.terminal .qo .qo-x { padding: 0 9px; border: 0; border-radius: 0; background: #161616; color: #8a8a8a; font-size: 10px; }
.terminal .qo .qo-x:hover { color: #fff; background: #222; }

/* The open position on this symbol, with the actions Aster puts on its position line. It sits
   low on the plot, clear of TradingView's legend and of the quick-order box. */
.ptag {
  position: absolute; z-index: 21; bottom: 72px; right: 84px; display: flex; align-items: stretch; height: 26px;
  border-radius: 6px; overflow: hidden; border: 1px solid; background: #0d0d0d; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.ptag[hidden] { display: none; }
.ptag.long { border-color: rgba(46, 189, 133, 0.6); }
.ptag.short { border-color: rgba(246, 70, 93, 0.6); }
.ptag > span { display: flex; align-items: center; padding: 0 8px; }
.ptag .pt-side { color: #fff; }
.ptag.long .pt-side { background: rgba(46, 189, 133, 0.85); }
.ptag.short .pt-side { background: rgba(246, 70, 93, 0.85); }
.ptag .pt-entry { color: var(--text-2); }
.ptag .pt-pnl { border-left: 1px solid #2a2a2a; }
.terminal .ptag button { display: flex; align-items: center; padding: 0 8px; border: 0; border-left: 1px solid #2a2a2a; border-radius: 0; background: none; color: #dbdbdb; font-size: 11.5px; font-weight: 700; }
.terminal .ptag button:hover { background: #2a2a2a; color: #fff; }
.ptag button svg { width: 13px; height: 13px; }
@container (max-width: 640px) { .ptag .pt-entry { display: none; } }
.menu {
  position: fixed; z-index: 90; min-width: 210px; padding: 6px; border-radius: 12px;
  border: 1px solid var(--line-2); background: #070b0d; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}
.terminal .menu button { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-start; background: none; border: 0; padding: 7px 9px; border-radius: 8px; }
.terminal .menu button:hover { background: var(--surface-3); }
.menu .tick { width: 14px; color: var(--brand); }
.menu .head { color: var(--muted); font-size: 11px; padding: 5px 9px; }
.menu .scroll { max-height: 280px; overflow: auto; }
.menu.narrow { min-width: 0; }
.terminal .menu.narrow button { padding: 6px 14px 6px 8px; }

/* ================================================================== BOOK == */

.ptabs { flex: 0 0 auto; display: flex; gap: 16px; border-bottom: 1px solid var(--line); margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.terminal .ptabs button { border-radius: 0; padding: 10px 0 9px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-weight: 600; white-space: nowrap; }
.terminal .ptabs button.active { color: var(--text); border-bottom-color: var(--brand); }
.book-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.book-views { display: flex; gap: 2px; }
.terminal .book-views button.icon { padding: 4px; color: var(--muted); opacity: 0.55; background: none; }
.terminal .book-views button.icon:hover { opacity: 0.9; background: none; }
.terminal .book-views button.icon.active { opacity: 1; color: var(--text-2); background: var(--surface-3); }
.terminal .book-views button.icon svg { width: 16px; height: 16px; }
/* The price step: a small dropdown, drawn like the order form's. */
.terminal .book-step {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border: 0; border-radius: 6px;
  background: var(--surface-2); color: var(--text); font-size: 11.5px; font-weight: 600;
}
.terminal .book-step:hover { color: var(--brand); background: rgba(0, 253, 255, 0.06); }
/* Buy: the last price on top and the bids filling the panel under it. Sell: the asks filling the
   panel down to the last price. */
#panel-book[data-view="bids"] #asks, #panel-book[data-view="asks"] #bids { display: none; }
#panel-book[data-view="bids"] .book-mid { margin-top: 0; }
.head { flex: 0 0 auto; display: grid; grid-template-columns: 1.1fr 1fr 1fr; color: var(--muted); font-size: 11px; padding: 2px 4px 4px; }
.book-row { flex: 0 0 auto; display: grid; grid-template-columns: 1.1fr 1fr 1fr; position: relative; padding: 1.5px 4px; font-size: 12px; border-radius: 3px; }
.book-row:hover { background: rgba(255, 255, 255, 0.03); }
#asks .book-row, #bids .book-row { cursor: pointer; }
.book-row span { position: relative; z-index: 1; }
.book-row .bar { position: absolute; top: 1px; bottom: 1px; right: 0; opacity: 0.14; border-radius: 2px; }
/* A level holding one of the trader's own limit orders. */
.book-row .mine { position: absolute; left: -1px; top: 50%; translate: 0 -50%; z-index: 1; border: 4px solid transparent; border-left: 5px solid var(--warn); }
.ask .p { color: var(--down); }
.ask .bar { background: var(--down); }
.bid .p { color: var(--up); }
.bid .bar { background: var(--up); }
#panel-book, #panel-trades { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#asks, #bids { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#asks { justify-content: flex-end; }
/* The level cut by the panel's edge fades out rather than showing half a row. */
#asks { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16px); mask-image: linear-gradient(to bottom, transparent, #000 16px); }
#bids { -webkit-mask-image: linear-gradient(to top, transparent, #000 16px); mask-image: linear-gradient(to top, transparent, #000 16px); }
#trades { flex: 1 1 0; min-height: 0; overflow: auto; }
.book-mid { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: baseline; padding: 7px 4px; margin: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.book-mid strong { font-size: 17px; letter-spacing: -0.01em; transition: color 250ms; }
.book-ratio { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; height: 20px; margin-top: 6px; font-size: 11px; font-weight: 600; }
.book-ratio span { height: 100%; display: flex; align-items: center; padding: 0 6px; min-width: 42px; transition: width 300ms; }
.book-ratio .b { background: rgba(46, 189, 133, 0.15); color: var(--up); border-radius: 4px 0 0 4px; }
.book-ratio .s { background: rgba(246, 70, 93, 0.15); color: var(--down); justify-content: flex-end; border-radius: 0 4px 4px 0; }

/* ================================================================== FORM == */

/* Laid out like Aster's order panel: segmented type tabs, filled boxes with the label inside,
   a share-of-max slider, then per-side numbers under the two buttons. */
.form > * { flex: 0 0 auto; }
.wake-ctx { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #05090b; min-height: 46px; transition: border-color 150ms; }
.wake-ctx:hover { border-color: var(--line-3); }
.wake-ctx > div { flex: 1; min-width: 0; }
.wake-ctx strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wake-ctx > div > span { font-size: 11px; color: var(--muted); }
.wake-ctx code { font-size: 10.5px; word-break: break-all; color: var(--text-2); }
.status { font-size: 11.5px; color: var(--text-2); padding: 7px 10px; border-radius: 8px; background: rgba(0, 253, 255, 0.04); border: 1px solid rgba(0, 253, 255, 0.14); }
.status.warn { color: var(--warn); background: rgba(227, 179, 65, 0.06); border-color: rgba(227, 179, 65, 0.25); }
.status:empty { display: none; }

.otabs { display: grid; grid-template-columns: 1fr 1fr 1.45fr; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.terminal .otabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; padding: 0 6px;
  border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.terminal .otabs button:hover { color: var(--text); }
.terminal .otabs button.active { color: var(--text); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.caret-s { width: 10px; height: 10px; flex: 0 0 auto; opacity: 0.7; }

.avbl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.avbl strong { color: var(--text); font-weight: 600; }
.terminal .avbl-add { display: inline-flex; padding: 0; border: 0; background: none; color: var(--muted); line-height: 0; transition: color 120ms; }
.terminal .avbl-add:hover:not(:disabled) { color: var(--brand); }
.avbl-add svg { width: 14px; height: 14px; }

.mode { display: grid; grid-template-columns: 1fr 1fr 0.7fr 1.2fr; gap: 6px; }
.terminal .mode button.on { color: var(--brand); border-color: rgba(0, 253, 255, 0.4); background: rgba(0, 253, 255, 0.06); }
.choice.three { grid-template-columns: 1fr 1fr 1fr; }
.choice.three button.wide { grid-column: 1 / -1; }
.terminal .mode button { height: 32px; padding: 0 6px; font-weight: 600; background: var(--surface-2); border-color: transparent; }
.terminal .mode button:hover:not(:disabled) { border-color: rgba(0, 253, 255, 0.4); color: var(--brand); }

/* A filled box with its label inside, the way every Aster input is drawn. */
.fbox {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 6px 8px 6px 12px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid transparent; transition: border-color 120ms, box-shadow 120ms;
}
.fbox[hidden] { display: none; }
.fbox:focus-within { border-color: rgba(0, 253, 255, 0.5); box-shadow: 0 0 0 3px rgba(0, 253, 255, 0.07); }
.terminal .fbox > label { position: absolute; left: 12px; top: 6px; margin: 0; font-size: 10.5px; color: var(--muted); pointer-events: none; white-space: nowrap; }
.terminal .fbox input {
  /* No intrinsic width: two boxes side by side share the row instead of pushing out of it. */
  flex: 1 1 0; min-width: 0; width: 0; height: 32px; padding: 13px 0 0; border: 0; border-radius: 0;
  background: none; box-shadow: none !important; font-size: 14px; font-weight: 600;
}
.terminal .fbox input::placeholder { color: var(--muted); font-weight: 500; }
.fbox .unit { color: var(--muted); font-size: 12px; white-space: nowrap; }
.terminal .fbox-dd {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.terminal .fbox-dd:hover:not(:disabled) { color: var(--brand); background: rgba(0, 253, 255, 0.06); }
.terminal .fbox-link { padding: 2px 4px; border: 0; background: none; color: var(--brand-soft); font-size: 12px; font-weight: 600; }
.terminal .fbox-link:hover { color: var(--brand); }
.terminal .fbox-bbo {
  align-self: stretch; margin: -6px -8px -6px 4px; padding: 0 12px; border: 0; border-left: 1px solid var(--line-2);
  border-radius: 0 10px 10px 0; background: none; color: var(--text); font-size: 12px; font-weight: 600;
  text-decoration: underline dashed var(--line-3); text-underline-offset: 4px;
}
.terminal .fbox-bbo:hover { color: var(--brand); }
.fbox.mini { min-height: 28px; width: 84px; padding: 0 8px; border-radius: 6px; }
.terminal .fbox.mini input { height: 26px; padding: 0; font-size: 12px; }

/* Share of the maximum: a thin track, five stops, a round handle. */
.pslider { position: relative; height: 22px; margin: 0 7px; }
.pslider-track { position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: var(--line-2); }
.pslider-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--brand); }
.terminal .pslider-marks button {
  position: absolute; top: 7px; width: 8px; height: 8px; margin-left: -4px; padding: 0;
  border-radius: 50%; border: 2px solid var(--surface); background: var(--line-3);
}
.terminal .pslider-marks button.on { background: var(--brand); }
.terminal .pslider input[type="range"] {
  position: absolute; top: 0; left: -7px; width: calc(100% + 14px); height: 22px; margin: 0; padding: 0;
  background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.pslider input[type="range"]::-webkit-slider-runnable-track { height: 22px; background: transparent; }
.pslider input[type="range"]::-moz-range-track { height: 22px; background: transparent; }
.pslider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%;
  background: #efeff0; border: 3px solid var(--brand); box-shadow: 0 0 0 3px rgba(0, 253, 255, 0.15);
}
.pslider input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: #efeff0; border: 3px solid var(--brand); }
.pslider-ends { display: flex; justify-content: space-between; margin-top: -2px; font-size: 11px; color: var(--muted); }

.checks { display: flex; flex-direction: column; gap: 7px; }
.terminal .check { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0; font-size: 12px; color: var(--text-2); cursor: pointer; }
.terminal .check[hidden] { display: none; }
.dashed { border-bottom: 1px dashed var(--line-3); cursor: help; }
.slip-box { display: flex; align-items: center; gap: 6px; padding-left: 22px; }
.slip-box[hidden] { display: none; }
.terminal .slip-box > button { padding: 3px 9px; font-size: 11.5px; border-radius: 6px; background: var(--surface-2); border-color: transparent; color: var(--text-2); }
.terminal .slip-box > button.active { color: var(--brand); border-color: rgba(0, 253, 255, 0.35); }

.side-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.terminal .side-buttons button {
  height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: 0.01em;
  transition: transform 120ms var(--ease), box-shadow 180ms, filter 180ms;
}
.side-buttons small { font-size: 11px; font-weight: 600; opacity: 0.92; }
.side-buttons small:empty { display: none; }
.terminal .side-buttons button.buy {
  background: linear-gradient(180deg, #38d39b 0%, #2ebd85 55%, #27a674 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 22px -12px rgba(46, 189, 133, 0.9);
}
.terminal .side-buttons button.sell {
  background: linear-gradient(180deg, #ff6276 0%, #f6465d 55%, #dc3a50 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 22px -12px rgba(246, 70, 93, 0.9);
}
.terminal .side-buttons button.buy:hover:not(:disabled) {
  background: linear-gradient(180deg, #45dea6 0%, #34c98f 55%, #2bb07c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 26px -10px rgba(46, 189, 133, 0.95);
  transform: translateY(-1px);
}
.terminal .side-buttons button.sell:hover:not(:disabled) {
  background: linear-gradient(180deg, #ff7083 0%, #ff5168 55%, #e5425a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 10px 26px -10px rgba(246, 70, 93, 0.95);
  transform: translateY(-1px);
}
.terminal .side-buttons button:active:not(:disabled) { transform: translateY(0); filter: brightness(0.95); }
.terminal .side-buttons button:disabled { box-shadow: none; filter: saturate(0.4); }

/* Liq. price, margin and max, long on the left and short on the right. */
.side-info { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; font-size: 12px; }
.side-info > div { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--muted); white-space: nowrap; }
.side-info > div.r { justify-content: flex-end; }
.side-info strong { font-weight: 600; color: var(--text); }
.side-info strong.up { color: var(--up); }
.side-info strong.down { color: var(--down); }
.unit-s { color: var(--text); font-size: 11px; }
.fees-row { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11.5px; color: var(--muted); }
#fees-inline { color: var(--text-2); text-align: right; }
.ftip {
  display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 50; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--line-2); background: #0b1317;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--text-2); font-size: 12px; line-height: 1.5;
}
.fees-row:hover .ftip { display: block; animation: rise-in 180ms var(--ease) both; }
.ftip .line { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); padding: 1px 0; }
.ftip .line strong { color: var(--text); font-weight: 600; }
.ftip p { margin: 8px 0 0; }

/* Take-profit and stop-loss riding on the entry. */
.tpsl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: #05090b; }
.tpsl[hidden] { display: none; }
.tpsl-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); }
.terminal .tpsl-head .unit-toggle { height: 22px; padding: 0 8px; font-size: 10.5px; font-weight: 700; border-radius: 5px; color: var(--brand); background: rgba(0, 253, 255, 0.07); border-color: rgba(0, 253, 255, 0.25); }
.tpsl .tpsl-leg { min-width: 0; }
.tpsl-leg label { display: flex; align-items: center; gap: 6px; }
.tpsl-leg label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.tpsl-leg.tp label::before { background: var(--up); box-shadow: 0 0 8px rgba(46, 189, 133, 0.7); }
.tpsl-leg.sl label::before { background: var(--down); box-shadow: 0 0 8px rgba(246, 70, 93, 0.7); }
.input { position: relative; display: flex; align-items: center; }
.terminal .tpsl .input input { height: 34px; padding-right: 44px; font-size: 12.5px; }
.tpsl .input .unit { position: absolute; right: 9px; color: var(--muted); font-size: 11px; pointer-events: none; }
.terminal .tpsl-leg.tp input:focus { border-color: rgba(46, 189, 133, 0.6); box-shadow: 0 0 0 3px rgba(46, 189, 133, 0.1); }
.terminal .tpsl-leg.sl input:focus { border-color: rgba(246, 70, 93, 0.6); box-shadow: 0 0 0 3px rgba(246, 70, 93, 0.1); }
.est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; margin-top: 6px; font-size: 11.5px; }
.est:empty { display: none; }
.est strong { font-weight: 700; }
.est-line { display: flex; align-items: center; gap: 6px; flex-basis: 100%; }
.est-side { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.est-side.long { color: var(--up); background: rgba(46, 189, 133, 0.12); }
.est-side.short { color: var(--down); background: rgba(246, 70, 93, 0.12); }

.row { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.row strong { color: var(--text); font-weight: 500; text-align: right; }
.note { color: var(--muted); font-size: 11.5px; margin: 0; line-height: 1.5; }
.note a { color: var(--brand); cursor: pointer; }

/* =============================================================== ACCOUNT == */

.acct-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.acct-head h3 { margin: 0; font-size: 13px; font-weight: 700; }
.acct-head .actions { display: flex; gap: 6px; }
.account-col .row { padding: 3px 0; }
.meter { height: 5px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-top: 4px; }
.meter span { display: block; height: 100%; border-radius: 999px; background: var(--up); transition: width 300ms; }
.meter span.mid { background: var(--warn); }
.meter span.high { background: var(--down); }

/* ================================================================ BOTTOM == */

/* The filters sit right of the tabs, and drop to a line of their own when the panel is too narrow. */
.bottom-head { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.bottom-head .ptabs { border-bottom: 0; margin-bottom: 0; min-width: 0; }
.bottom-tools { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; min-height: 38px; }
/* The filters are small dropdowns: the choice and an arrow on the panel colour, brighter on hover. */
.terminal .bottom-tools .filter {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: 6px;
  background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.terminal .bottom-tools .filter:hover { color: var(--text); background: var(--surface-3); }
.terminal .bottom-tools .check { color: var(--text-2); }
#bottom-panel { flex: 1; min-height: 0; overflow: auto; }
#bottom-panel :is(th, td) { padding-left: 7px; padding-right: 7px; }
:where(.term, .picker, .tmodal, .menu) table { width: 100%; border-collapse: collapse; }
:where(.term, .picker, .tmodal, .menu) :is(th, td) { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
:where(.term, .picker, .tmodal, .menu) th { position: sticky; top: 0; z-index: 1; background: var(--surface); color: var(--muted); font-weight: 500; font-size: 11px; }
:where(.term, .picker, .tmodal, .menu) :is(th, td).right { text-align: right; }
:where(.term, .picker, .tmodal, .menu) tbody tr:hover { background: rgba(0, 253, 255, 0.025); }
:where(.term, .picker, .tmodal, .menu) td button { padding: 3px 12px; font-size: 11.5px; }
#bottom-panel > p.dim, .empty { padding: 28px 0; text-align: center; }
.panel-actions { display: flex; justify-content: flex-end; padding: 2px 0 6px; }
/* The tables read like Aster's: times on two lines, every figure in full brightness, the side in
   its colour. */
.when { display: inline-block; line-height: 1.35; }
.oid { margin-top: 2px; font: 11px var(--mono); color: var(--text-2); white-space: nowrap; }
.qual { margin-left: 2px; font-size: 11px; color: var(--text-2); }
.od-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -2px 0 12px; font-size: 13px; }

.subbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 8px; }
.subbar-total { font-size: 12px; color: var(--muted); }
.subbar-total strong { margin-left: 4px; font-size: 13px; font-weight: 700; }
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--surface-2); }
.terminal .seg button { padding: 4px 12px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 12px; font-weight: 600; }
.terminal .seg button.active { color: var(--text); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); }

/* Positions: the side is a coloured edge, the PnL the loudest number on the row. */
.terminal tr.pos td { padding: 8px 7px; vertical-align: middle; }
.terminal tr.pos td:first-child { box-shadow: inset 3px 0 0 var(--up); padding-left: 12px; }
.terminal tr.pos.short td:first-child { box-shadow: inset 3px 0 0 var(--down); }
.terminal tr.pos.long:hover { background: linear-gradient(90deg, rgba(46, 189, 133, 0.06), transparent 40%); }
.terminal tr.pos.short:hover { background: linear-gradient(90deg, rgba(246, 70, 93, 0.06), transparent 40%); }
.pos-sym { font-size: 13px; cursor: pointer; }
.pos-sym:hover { color: var(--brand); }
.sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sub .up, .sub .down { font-weight: 600; }
.liq { color: var(--warn); }
.pnl { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.pnl.small { font-size: 13px; }
.pnl small { font-size: 10.5px; font-weight: 600; opacity: 0.75; }
.roe { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.roe.up { background: rgba(46, 189, 133, 0.13); }
.roe.down { background: rgba(246, 70, 93, 0.13); }
.adl { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; margin-left: 4px; vertical-align: -1px; }
.adl i { width: 3px; border-radius: 1px; background: var(--surface-3); }
.adl i:nth-child(1) { height: 4px; } .adl i:nth-child(2) { height: 6px; } .adl i:nth-child(3) { height: 8px; } .adl i:nth-child(4) { height: 11px; }
.adl i.on { background: var(--warn); }
.adl.r1 i.on { background: var(--up); }
.adl.r3 i.on, .adl.r4 i.on { background: var(--down); }
.terminal td .add-btn, .terminal td .legs, .terminal td .link-btn, .terminal th .link-btn { border: 0; background: none; font-weight: 600; }
.terminal td .add-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 2px; color: var(--text); font-size: 12px; }
.terminal td .add-btn svg { width: 13px; height: 13px; color: var(--muted); }
.terminal td .add-btn:hover:not(:disabled), .terminal td .add-btn:hover:not(:disabled) svg { color: var(--brand); }
.terminal td .legs { display: inline-grid; gap: 1px; padding: 3px 6px; border-radius: 6px; text-align: right; font-size: 12px; }
.terminal td .legs:hover:not(:disabled) { background: var(--surface-3); }
.terminal td .link-btn, .terminal th .link-btn { padding: 2px 0; color: var(--warn); font-size: 12px; }
.terminal td .link-btn:hover:not(:disabled), .terminal th .link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.terminal .share-btn, .terminal .copy-btn { padding: 2px; border: 0; background: none; color: var(--muted); line-height: 0; vertical-align: -2px; }
.terminal .share-btn:hover, .terminal .copy-btn:hover { color: var(--text); background: none; }
.share-btn svg, .copy-btn svg { width: 13px; height: 13px; }
.pos-actions { display: inline-flex; gap: 6px; }
.terminal .act {
  height: 26px; padding: 0 12px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
  color: var(--text); background: var(--surface-3); border: 1px solid var(--line-2);
}
.terminal .act:hover:not(:disabled) { color: var(--brand); border-color: rgba(0, 253, 255, 0.5); background: rgba(0, 253, 255, 0.07); }
.flag { display: inline-block; margin-left: 4px; font-size: 10px; color: var(--warn); border: 1px solid rgba(227, 179, 65, 0.3); border-radius: 4px; padding: 0 4px; }
.mono { font-family: var(--mono); }

/* ================================================================= MODAL == */

.tmodal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.66); backdrop-filter: blur(6px); }
/* Chart dialogs leave the chart readable behind them. */
.tmodal.see-through { background: rgba(0, 0, 0, 0.28); backdrop-filter: none; }
/* Every dialog moves by its title bar. */
.sheet-head { cursor: grab; user-select: none; touch-action: none; }
.sheet.dragging .sheet-head { cursor: grabbing; }
.sheet {
  width: 440px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; padding: 20px;
  border-radius: 20px; border: 1px solid var(--line-2); background: #070b0d; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8); animation: drop-open 220ms var(--ease);
}
.sheet.narrow { width: 420px; }
.sheet.mid { width: 560px; }
.sheet.share { width: 600px; }
.sheet.wide { width: 980px; }
.sheet.alert { width: 380px; text-align: center; }
.sheet.alert .sheet-head { justify-content: flex-end; margin-bottom: 0; }
/* The title bar spans the dialog's whole top edge, padding included, so it is easy to grab. */
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin: -20px -20px 14px; padding: 20px 20px 0; font-size: 15px; }
.sheet p { color: var(--text-2); font-size: 12.5px; line-height: 1.55; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.terminal .choice button { padding: 11px; font-weight: 600; background: #05090b; }
.terminal .choice button.active { border-color: var(--brand); color: var(--brand); background: rgba(0, 253, 255, 0.06); }
.lev-row { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; margin-bottom: 12px; }
.lev-row input[type="number"] { text-align: center; font-size: 18px; font-weight: 700; height: 44px; }
.terminal .lev-row button { font-size: 18px; }
.ticks { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 4px; }
.box { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 14px 0; background: #05090b; }
.box strong { display: block; font-size: 16px; margin-top: 2px; }
.terminal .confirm { width: 100%; margin-top: 10px; height: 42px; border: 0; border-radius: 999px; background: var(--brand); color: #001314; font-weight: 700; }
.terminal .confirm:hover:not(:disabled) { background: #5ffeff; }
.terminal .confirm.buy { color: #fff; background: linear-gradient(180deg, #38d39b, #27a674); }
.terminal .confirm.sell { color: #fff; background: linear-gradient(180deg, #ff6276, #dc3a50); }
.terminal .confirm.buy:hover:not(:disabled), .terminal .confirm.sell:hover:not(:disabled) { filter: brightness(1.08); }
.terminal .confirm.wide { margin-top: 16px; }
.terminal .ghost { height: 42px; border: 0; border-radius: 999px; background: var(--surface-3); color: var(--text); font-weight: 600; }
.terminal .ghost:hover:not(:disabled) { background: #1b262c; }
.mbuttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.terminal .mbuttons .confirm { margin-top: 0; }
.sheet .modal-error { margin: 8px 0 0; color: var(--down); font-size: 12px; }
.sheet .modal-error:empty { display: none; }
.sheet .hint { margin: 12px 0 0; color: var(--muted); font-size: 11.5px; }
.sheet .row .mlink { margin-left: 8px; color: var(--warn); font-size: 12px; cursor: pointer; }
.sheet .row .mlink:hover { text-decoration: underline; }
.sheet .fbox { margin-bottom: 10px; }
.sheet .pslider-ends { margin-bottom: 8px; }
.terminal .sheet .mcheck { margin: 2px 0 10px; }

/* A position's dialogs: the numbers on top, then tabs, then the inputs. */
.mstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.mstats strong { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mstats span { font-size: 11px; color: var(--muted); }
.mtabs { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.terminal .mtabs button { padding: 2px 0; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 600; }
.terminal .mtabs button.active { color: var(--text); }
.terminal .mtabs button + button:not(.mlink) { border-left: 1px solid var(--line-2); padding-left: 14px; }
.terminal .mtabs .mlink { margin-left: auto; color: var(--warn); font-size: 13px; }
.mcurrent { margin: -2px 0 12px; font-size: 12px; color: var(--text-2); }
.mleg { margin-bottom: 12px; }
.mleg-title { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; }
.mleg-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.sheet .mleg-row .fbox { min-height: 42px; margin-bottom: 0; }
.terminal .mleg-row .fbox input { padding-top: 0; font-size: 13px; }
.sheet .mleg-note { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
.mleg-note strong { color: var(--text); }
.mleg-note strong.up { color: var(--up); }
.mleg-note strong.down { color: var(--down); }
.mlist { display: grid; gap: 7px; margin: 12px 0; }
.mlist.top { margin-top: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mlist .row strong { font-weight: 600; }
.mlist .row strong.up { color: var(--up); }
.mlist .row strong.down { color: var(--down); }
.oc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 14px; }
.oc-head span { font-weight: 700; }
.terminal .oc-skip { margin-top: 4px; color: var(--muted); }

.rv-line { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; }
.rv-box { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid; }
.rv-box.long { border-color: rgba(46, 189, 133, 0.45); background: rgba(46, 189, 133, 0.04); }
.rv-box.short { border-color: rgba(246, 70, 93, 0.45); background: rgba(246, 70, 93, 0.04); }
.rv-box .row { font-size: 12.5px; color: var(--text); }
.rv-box .row.dim { color: var(--muted); }
.rv-link { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; }
.rv-link::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--line-3); }
.rv-link span {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px;
  border: 1px solid; border-color: rgba(46, 189, 133, 0.5) rgba(246, 70, 93, 0.5) rgba(246, 70, 93, 0.5) rgba(46, 189, 133, 0.5);
  background: #070b0d; font-size: 11.5px; font-weight: 600;
}
.rv-link svg { width: 10px; height: 10px; }

.alert-icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px;
  background: var(--surface-3); color: var(--warn); font-size: 26px; font-weight: 800;
  box-shadow: 0 0 0 1px rgba(227, 179, 65, 0.35), 0 0 30px rgba(227, 179, 65, 0.25);
}
.sheet .alert-text { margin: 0; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.5; }

.sheet.share canvas { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; }
.sh-label { margin: 14px 0 8px; font-size: 13px; font-weight: 600; }
.sh-bgs { display: flex; gap: 8px; }
.terminal .sh-bgs button { width: 64px; height: 44px; padding: 0; overflow: hidden; border-radius: 8px; border: 2px solid transparent; background: #000; }
.terminal .sh-bgs button.active { border-color: var(--brand); }
.sh-bgs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-opts { display: flex; gap: 18px; }
.sh-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.terminal .sh-actions button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-3); color: var(--text); }
.terminal .sh-actions button:hover { color: var(--brand); background: rgba(0, 253, 255, 0.1); }
.sh-actions svg { width: 18px; height: 18px; }
.sheet.wide td { font-size: 12px; }

/* The chart's Settings, laid out like TradingView's: tabs on the left, the options on the right. */
.sheet.settings { width: 680px; padding: 20px 0 0; overflow: hidden; display: flex; flex-direction: column; }
.sheet.settings .sheet-head { margin: -20px 0 12px; padding: 20px 20px 0; }
.st-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); height: min(60vh, 420px); border-top: 1px solid var(--line); }
.st-tabs { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-right: 1px solid var(--line); }
.terminal .st-tabs button {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text-2); font-size: 13px; font-weight: 600; text-align: left;
}
.terminal .st-tabs button:hover { color: var(--text); background: var(--surface-2); }
.terminal .st-tabs button.active { color: var(--text); background: var(--surface-3); }
.st-tabs svg { width: 18px; height: 18px; flex: 0 0 auto; }
.st-pane { overflow: auto; padding: 4px 22px 16px; }
.st-section { margin: 16px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; font-size: 13px; color: var(--text-2); }
.terminal .st-row .check { font-size: 13px; }
.terminal .st-row select { width: 140px; height: 34px; }
.st-colors { display: flex; align-items: center; gap: 8px; }
.st-swatch { position: relative; display: block; width: 30px; height: 30px; margin: 0; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 3px var(--surface-2); cursor: pointer; }
.terminal .st-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.terminal .st-colors input[type="range"] { width: 110px; }
.st-val { min-width: 34px; font-size: 12px; color: var(--muted); text-align: right; }
.st-note { margin: 2px 0 6px; font-size: 11.5px; color: var(--muted); }
.st-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); }
.terminal .st-template { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; background: var(--surface-2); }
.st-actions { display: flex; gap: 8px; }
.terminal .st-actions button { width: 96px; height: 36px; margin: 0; }
@media (max-width: 700px) {
  .st-layout { grid-template-columns: 1fr; height: auto; max-height: 60vh; }
  .st-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .terminal .st-tabs button span { white-space: nowrap; }
}

/* TradingView's indicator list: search on top, one scrolling column of script names. */
.sheet.ind { width: 420px; padding-bottom: 12px; }
.terminal .ind-search { display: flex; align-items: center; gap: 10px; height: 42px; margin: 0 -20px; padding: 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ind-search svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.terminal .ind-search input { height: 40px; padding: 0; border: 0; background: none; box-shadow: none !important; font-size: 14px; }
.ind-list { height: min(56vh, 430px); overflow: auto; margin: 6px -8px 0; }
.terminal .ind-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px;
  border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 13.5px; text-align: left;
}
.terminal .ind-item:hover { background: var(--surface-3); }
.terminal .ind-item.on { color: var(--brand); }
.ind-tick { font-size: 13px; }
.ind-section { padding: 10px 8px 4px; font-size: 11px; color: var(--muted); }
.ind-empty { padding: 24px 8px; text-align: center; }

/* ============================================================ RESPONSIVE == */

@media (max-width: 1280px) {
  .term { grid-template-columns: minmax(0, 1fr) 270px 300px; }
  .stats { gap: 20px; }
}
/* Below this the columns stop fitting: the page scrolls, and the panels stack in the order a
   trader reads them. */
/* A table wider than the panel scrolls sideways, and its last column (the actions) stays in view. */
@media (min-width: 701px) {
  #bottom-panel :is(th, td):last-child { position: sticky; right: 0; background: var(--surface); }
  #bottom-panel th:last-child { z-index: 2; }
}
@media (max-width: 1100px) {
  .term { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "bar" "chart" "form" "book" "account" "bottom"; }
  .chart-cell { height: 62vh; }
  .book-col { height: 560px; }
  .bottom { height: 460px; }
  .bar { flex-wrap: wrap; gap: 14px; }
  .stats { flex-basis: 100%; }
  .picker { top: 120px; }
}
/* On a phone a position is a card: what it is and its PnL on top, the prices under it, and the
   close buttons full width, so nothing important hides behind a sideways scroll. */
@media (max-width: 700px) {
  .bottom-tools { flex-wrap: wrap; padding-bottom: 6px; }
  .positions thead { display: none; }
  .terminal .positions tr.pos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--up); }
  .terminal .positions tr.pos.short { box-shadow: inset 3px 0 0 var(--down); }
  .terminal .positions tr.pos td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .terminal .positions tr.pos td:first-child { grid-column: 1 / 3; box-shadow: none; padding: 0; }
  .terminal .positions tr.pos td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 10.5px; color: var(--muted); }
  .terminal .positions tr.pos td.pnl-cell { grid-column: 3; grid-row: 1; text-align: right; }
  .terminal .positions tr.pos td.close-cell { grid-column: 1 / -1; }
  .positions .legs { text-align: left; }
  .positions .pos-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .terminal .positions .act { height: 34px; font-size: 12.5px; }
  .mstats { grid-template-columns: 1fr 1fr; }
}
.tip .line strong.up { color: var(--up); }
.tip .line strong.down { color: var(--down); }