/* Trading terminal. Panels meet on one-pixel seams (the grid gap shows --line), no cards. Tokens only. */
body.is-terminal { background: var(--line); font-size: 14px; }
.term { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--line); gap: 1px; }
.num { letter-spacing: 0; font-weight: 500; }
.up { color: var(--profit); }
.down { color: var(--loss); }
.hint { font-size: 12px; color: var(--muted); line-height: 1.45; }
.hint.up { color: var(--profit); }
.hint.down { color: var(--loss); }
.panel-h { font-family: var(--font-body); font-size: 13px; font-weight: 650; letter-spacing: 0.01em; }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); font-family: var(--font-mono); font-size: 11px; }
.hide-sm { display: none; }
@media (min-width: 760px) { .hide-sm { display: revert; } }
.button { min-height: 40px; padding: 8px 16px; font-size: 13px; }
.button-primary:hover { background: color-mix(in srgb, var(--accent-fill) 88%, var(--ink)); }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-text); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
input, select { font: inherit; }

/* ── Grid, exchange layout: chart, book and order column side by side, positions under chart and book ── */
body.is-terminal { background: var(--bg); }
.term { display: grid; gap: 1px; background: var(--line); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto auto; grid-template-areas: "market market" "chart chart" "side book" "tables tables" "account account" "foot foot"; }
.term > * { background: var(--bg); min-width: 0; }
.market-head { grid-area: market; position: relative; z-index: 30; }
.area-chart { grid-area: chart; height: clamp(380px, 60svh, 600px); }
.term.chart-off .area-chart { display: none; }
.term.chart-off .market-head { margin-bottom: -1px; }
.chart-wait { height: 100%; background: var(--surface); }
.area-book { grid-area: book; min-height: 0; overflow: hidden; }
/* Below 1200 px the order form and the account are separate grid cells; from 1200 px they stack in one column. */
.area-side { display: contents; }
.area-side > * { background: var(--bg); min-width: 0; }
.area-side > .order-panel { grid-area: side; }
.area-side > .area-margin { grid-area: account; }
.area-tables { grid-area: tables; }
.term-foot { grid-area: foot; }
@media (min-width: 760px) {
  .term { grid-template-columns: minmax(0, 1fr) 340px; }
  /* Chart down to the window's lower edge, the book and form peek under it (task 292). */
  .area-chart { height: clamp(380px, calc(100dvh - 61px - 72px - 120px), 900px); }
  .term.book-off { grid-template-areas: "market market" "chart chart" "side side" "tables tables" "account account" "foot foot"; }
  .term.book-off .area-book { display: none; }
}
/* From 1200 px the terminal fills the window under the top bar and nothing scrolls the page: the chart takes
   what the market head and the positions block leave (task 292). Book and form columns shrink with the window,
   the book can be hidden, the seam over the positions block moves (--tables-h, kept by the terminal; a height kept
   on a taller window gives way to the chart's 320 px, capped at the window less 500 px). */
@media (min-width: 1200px) {
  .term { height: calc(100dvh - 61px); min-height: 600px; grid-template-columns: minmax(0, 1fr) min(var(--book-w, clamp(240px, 18vw, 300px)), 40vw) clamp(296px, 22vw, 340px); grid-template-rows: auto minmax(320px, 1fr) minmax(120px, min(var(--tables-h, clamp(150px, 24dvh, 320px)), calc(100dvh - 500px))) auto; grid-template-areas: "market market market" "chart book side" "tables tables side" "foot foot foot"; }
  /* Chart widened over the book: the book goes under it, next to the positions block, and that row grows (task 313). */
  .term.book-down { grid-template-rows: auto minmax(320px, 1fr) minmax(120px, min(var(--tables-h, clamp(260px, 38dvh, 440px)), calc(100dvh - 500px))) auto; grid-template-areas: "market market market" "chart chart side" "tables book side" "foot foot foot"; }
  /* A book with its own height beside the chart, or one the positions block's right edge gave way to, takes the column
     down past the positions block (task 313, video_8). */
  .term.book-tall { grid-template-areas: "market market market" "chart book side" "tables book side" "foot foot foot"; }
  .term.book-off { grid-template-columns: minmax(0, 1fr) clamp(296px, 22vw, 340px); grid-template-areas: "market market" "chart side" "tables side" "foot foot"; }
  .area-side { grid-area: side; display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow-y: auto; background: var(--line); }
  .area-chart { position: relative; height: auto; min-height: 0; }
  .area-book { position: relative; }
  .term.book-sized .book-box { height: min(var(--book-h), 100%); border-bottom: 1px solid var(--line); }
  .area-side .area-margin { flex: 1; }
  .area-tables { position: relative; min-height: 0; }
  .area-tables .tables { height: 100%; min-height: 0; }
  .area-tables .table-scroll { max-height: none; }
  /* The book keeps the levels nearest the spread when the row is lower than both sides. */
  .area-book .book-panel { overflow: hidden; }
  .area-book .book-side { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; }
  .area-book .book-side > li { flex: none; }
  .area-book .book-asks { justify-content: flex-end; mask-image: linear-gradient(to bottom, transparent, #000 20px); }
  .area-book .book-bids { mask-image: linear-gradient(to top, transparent, #000 20px); }
  /* The tape stays inside the book's box: rows that do not fit wrap into a column past the right edge, so only
     whole rows show and none hangs under a lowered book (video_9, task 319). */
  .area-book .tape { display: flex; flex-direction: column; flex-wrap: wrap; flex: 1 1 0; min-height: 0; overflow: hidden; }
  .area-book .tape > li { flex: none; width: 100%; }
}
.term-split { display: none; position: absolute; z-index: 5; left: 0; right: 0; top: -5px; height: 9px; cursor: row-resize; touch-action: none; }
.term-split::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: transparent; transition: background-color var(--dur-fast, 120ms) ease; }
.term-split:hover::after, .term-split:focus-visible::after, .term.is-resizing .term-split::after { height: 2px; top: 3px; background: var(--accent); }
.term-split:focus-visible { outline: none; }
@media (min-width: 1200px) { .term-split { display: block; } }
.term.is-resizing { cursor: row-resize; user-select: none; }
.term.is-resizing iframe { pointer-events: none; }
/* Chart width and book size seams (task 313): right of the chart, left of a book under the chart, under the book;
   right of the positions block while the book is beside the chart (video_8). */
.book-box { position: relative; height: 100%; }
.term-vsplit, .book-wsplit, .book-hsplit, .tables-wsplit { display: none; position: absolute; z-index: 6; touch-action: none; }
.term-vsplit { top: 0; bottom: 0; right: -5px; width: 9px; cursor: col-resize; }
.book-wsplit { top: 0; bottom: 0; left: 0; width: 5px; cursor: col-resize; }
.book-hsplit { left: 0; right: 0; bottom: 0; height: 7px; cursor: row-resize; }
.tables-wsplit { top: 0; bottom: 0; right: -5px; width: 9px; cursor: col-resize; }
.term-vsplit::after, .book-wsplit::after, .book-hsplit::after, .tables-wsplit::after { content: ""; position: absolute; background: transparent; transition: background-color var(--dur-fast, 120ms) ease; }
.term-vsplit::after, .tables-wsplit::after { top: 0; bottom: 0; left: 3px; width: 2px; }
.book-wsplit::after { top: 0; bottom: 0; left: 0; width: 2px; }
.book-hsplit::after { left: 0; right: 0; bottom: 0; height: 2px; }
.term-vsplit:hover::after, .term-vsplit:focus-visible::after, .term.resize-chart .term-vsplit::after,
.book-wsplit:hover::after, .book-wsplit:focus-visible::after, .term.resize-book-w .book-wsplit::after,
.book-hsplit:hover::after, .book-hsplit:focus-visible::after, .term.resize-book-h .book-hsplit::after,
.tables-wsplit:hover::after, .tables-wsplit:focus-visible::after, .term.resize-tables-w .tables-wsplit::after { background: var(--accent); }
.term-vsplit:focus-visible, .book-wsplit:focus-visible, .book-hsplit:focus-visible, .tables-wsplit:focus-visible { outline: none; }
@media (min-width: 1200px) {
  .term-vsplit, .book-hsplit, .tables-wsplit, .term.book-down .book-wsplit { display: block; }
  .term.book-off .term-vsplit, .term.book-off .tables-wsplit, .term.book-down .tables-wsplit, .term.chart-off .tables-wsplit { display: none; }
}
.term.resize-chart, .term.resize-book-w, .term.resize-tables-w { cursor: col-resize; }
/* The block being resized is lit while the pointer holds the seam. */
.term.resize-chart .area-chart::after, .term.resize-book-w .area-book::after, .term.resize-book-h .book-box::after, .term.resize-tables-w .area-tables::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; outline: 2px solid var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.book-toggle { display: none; }
@media (min-width: 760px) {
  .book-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: var(--radius-sm); color: var(--muted-strong); }
  .book-toggle:hover { background: var(--surface); color: var(--ink); }
  .book-toggle[aria-pressed="true"] { color: var(--accent-text); }
}

/* ── Market head: the ticker opens the market list, as on an exchange ── */
.market-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; padding: 8px 16px; min-height: 56px; }
.mh-markets { position: relative; }
.mh-id { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 0 6px; padding: 4px 6px; margin-left: -6px; background: none; border: 0; border-radius: var(--radius-sm); color: var(--ink); text-align: left; }
.mh-id:hover, .mh-id[aria-expanded="true"] { background: var(--surface); }
.mh-id svg { color: var(--muted-strong); transition: transform 160ms ease; }
.mh-id[aria-expanded="true"] svg { transform: rotate(180deg); }
.mh-ticker { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.01em; }
.mh-name { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.mh-list { position: absolute; top: calc(100% + 6px); left: -6px; z-index: 50; width: 400px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
.mh-list[hidden] { display: none; }
.mh-price { display: flex; align-items: baseline; gap: 10px; }
.mh-price strong { font-size: 22px; }
.mh-facts { display: flex; gap: 22px; margin: 0; }
.mh-facts dt { font-size: 11px; color: var(--muted); }
.mh-facts dd { margin: 0; font-size: 13px; }
.mh-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0 auto; }
.chart-toggle { display: none; }
@media (max-width: 1679px) { .mh-badges .badge-live, .mh-badges .badge:not(.badge-open):not(.badge-closed) { display: none; } }
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 9px; border-radius: 13px; background: var(--surface); color: var(--muted-strong); font-size: 12px; font-weight: 600; }
.badge-live { background: var(--profit-soft); color: var(--profit); }
.badge-demo { background: var(--gold-soft); color: var(--gold); }
.badge-open::before, .badge-closed::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--profit); }
.badge-closed::before { background: var(--loss); }
.acct-switch select { min-height: 40px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px 10px; font-size: 13px; max-width: 300px; }

/* ── Watchlist ── */
.watch { display: flex; flex-direction: column; }
.watch-tabs { display: flex; gap: 2px; padding: 6px 8px 0; overflow-x: auto; border-bottom: 1px solid var(--line); }
.watch-tabs button { flex: none; min-height: 40px; padding: 0 10px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted-strong); font-size: 13px; font-weight: 600; white-space: nowrap; }
.watch-tabs button:hover { color: var(--ink); }
.watch-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent-fill); }
.watch-tools { display: grid; gap: 8px; padding: 8px; }
.watch-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); border: 1px solid transparent; }
.watch-search:focus-within { border-color: var(--accent); }
.watch-search input { flex: 1; min-width: 0; min-height: 38px; border: 0; background: none; color: var(--ink); outline: none; font-size: 13px; }
.watch-tools .seg { display: flex; }
.watch-tools .seg button { flex: 1; font-family: var(--font-body); font-weight: 600; }
.seg button[aria-checked="true"] { background: var(--accent-soft); color: var(--accent-text); }
.watch-list { max-height: 300px; overflow-y: auto; padding: 0 4px 6px; }
@media (min-width: 1024px) { .watch-list { max-height: min(300px, 32vh); } }
.watch-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; border-radius: 4px; }
.watch-row:hover, .watch-row.is-current { background: var(--surface); }
.watch-head { grid-template-columns: 30px minmax(0, 1fr) 96px 64px; padding: 4px 8px 4px 0; font-size: 11px; color: var(--muted); position: sticky; top: 0; background: var(--bg); z-index: 1; }
.watch-head span:nth-child(n + 3) { text-align: right; }
.watch-pick { display: grid; grid-template-columns: minmax(0, 1fr) 96px 64px; gap: 6px; align-items: center; min-height: 44px; padding: 4px 8px 4px 0; background: none; border: 0; color: var(--ink); text-align: left; font-size: 13px; }
.watch-pick .num { text-align: right; font-size: 12.5px; }
.w-name { display: grid; min-width: 0; }
.w-name strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-name small { font-size: 11px; color: var(--muted); }
.star { display: grid; place-items: center; width: 30px; height: 44px; padding: 0; background: none; border: 0; color: var(--line-strong); }
.star:hover { color: var(--muted-strong); }
.star.on { color: var(--accent); }
.star.on svg { fill: currentColor; }
.empty-row { padding: 16px 10px; color: var(--muted); font-size: 13px; }

[role="tabpanel"][hidden] { display: none; }

/* ── Account under the order form ── */
.area-margin { padding: 14px 16px 16px; }
.area-margin .panel-h { margin: 0 0 10px; color: var(--ink-strong); }
.area-margin .panel-h span { color: var(--muted); font-weight: 500; }
.area-margin dl { display: grid; gap: 8px; margin: 0; }
.area-margin dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; }
.area-margin dt { color: var(--muted); }
.area-margin dd { margin: 0; text-align: right; }

/* ── Menus and pickers ── */
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 200px; display: grid; padding: 6px; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
.menu > button { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px 6px 30px; position: relative; background: none; border: 0; color: var(--ink); border-radius: 4px; text-align: left; font-size: 13px; }
.menu > button svg { position: absolute; left: 8px; color: var(--accent); }
.menu > button:hover { background: var(--surface); }
.menu-wide { min-width: 280px; }
.menu-tf { min-width: 236px; gap: 8px; padding: 10px; }
.menu-title { display: block; margin: 0 0 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tf-grid button { min-height: 36px; background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font: 500 12px/1 var(--font-mono); }
.tf-grid button:hover { background: var(--surface); }
.tf-grid button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); }
.check-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 4px; cursor: pointer; }
.check-row:hover { background: var(--surface); }
.check-row input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent-fill); }
.check-row span { display: grid; gap: 2px; font-size: 13px; }
.check-row small { color: var(--muted); font-size: 11px; }
.picker { width: min(92vw, 360px); padding: 8px; }
.picker-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; margin-bottom: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); }
.picker-search input { flex: 1; min-height: 40px; background: none; border: 0; color: var(--ink); outline: none; }
.picker-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.picker ul { max-height: 360px; overflow-y: auto; display: grid; }
.picker li button { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; gap: 12px; align-items: center; width: 100%; min-height: 48px; padding: 6px 10px; background: none; border: 0; color: var(--ink); text-align: left; border-radius: 4px; font-size: 13px; }
.picker li button:hover, .picker li button[aria-current="true"] { background: var(--surface); }
.picker li button span:first-child { display: grid; }
.picker li small { color: var(--muted); font-size: 11px; }
.picker .num { text-align: right; }

/* ── Chart ── */
.chart-shell { height: 100%; display: flex; flex-direction: column; background: var(--surface); }
.chart-shell.is-full { position: fixed; inset: 0; z-index: 100; height: 100vh; height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background: var(--surface); }
html.chart-full-open, html.chart-full-open body { overflow: hidden; overscroll-behavior: none; }
.chart-bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--line); min-height: 44px; overflow-x: auto; scrollbar-width: none; }
.chart-bar::-webkit-scrollbar { display: none; }
.chart-bar .menu-wrap { flex: none; }
.bar-gap { flex: 1; }
.seg { display: inline-flex; flex: none; padding: 2px; border-radius: var(--radius-sm); background: var(--bg); }
.seg button { min-width: 34px; min-height: 32px; padding: 0 8px; background: none; border: 0; color: var(--muted-strong); font-family: var(--font-mono); font-size: 12px; border-radius: 4px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.tool-btn { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; background: none; border: 0; border-radius: var(--radius-sm); color: var(--muted-strong); }
.tool-btn.wide { display: inline-flex; gap: 6px; width: auto; padding: 0 10px; font-size: 13px; }
.tool-btn.text { width: auto; padding: 0 10px; font-family: var(--font-mono); font-size: 12px; }
.tool-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.tool-btn[aria-pressed="true"], .tool-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-text); }
.chart-body { flex: 1; display: flex; min-height: 0; }
.draw-bar { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; }
.draw-sep { height: 1px; margin: 4px 6px; background: var(--line-strong); }
.chart-canvas { position: relative; flex: 1; min-width: 0; }
.chart-canvas.is-drawing { cursor: crosshair; }
.chart-box { position: absolute; inset: 0; }
.chart-box:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.legend { position: absolute; top: 8px; left: 10px; z-index: 3; pointer-events: none; display: grid; gap: 4px; font-size: 12px; }
.legend-title { display: flex; gap: 10px; align-items: baseline; }
.legend-title strong { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.legend-title span { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.legend-ohlc { display: flex; flex-wrap: wrap; gap: 2px 12px; font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.legend-ohlc i { font-style: normal; color: var(--muted); margin-right: 4px; }
.legend-ind i { color: inherit; opacity: .8; }
.chart-noscript { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
@media (max-width: 759px) {
  .chart-body { flex-direction: column; }
  .draw-bar { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; padding: 2px 6px; }
  .draw-sep { width: 1px; height: auto; margin: 6px 4px; }
  .legend-ohlc span:nth-child(n + 5) { display: none; }
  .legend-ind { display: none; }
}
@media (pointer: coarse) { .tool-btn { width: 44px; height: 44px; } .seg button { min-height: 40px; min-width: 44px; } }

/* ── Book and tape: running totals as depth, the last price between the sides, buy and sell share under them ── */
.book { display: flex; flex-direction: column; height: 100%; font-size: 12px; }
.tabs-mini { display: flex; gap: 2px; padding: 3px; background: var(--surface); border-radius: var(--radius-sm); }
.tabs-mini button { flex: 1; min-height: 34px; padding: 0 10px; background: none; border: 0; border-radius: 4px; color: var(--muted-strong); font-size: 13px; font-weight: 600; white-space: nowrap; }
.tabs-mini button:hover { color: var(--ink); }
.tabs-mini button[aria-checked="true"], .tabs-mini button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tabs-flat { background: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 8px; gap: 4px; }
.tabs-flat button { flex: none; border-radius: 0; min-height: 40px; }
.tabs-flat button[aria-selected="true"] { background: none; box-shadow: inset 0 -2px 0 var(--accent); }
.book-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.book-head, .book-side button, .tape li { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: 6px; padding: 0 12px; }
.book-head { padding-block: 8px 4px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.book-head span:not(:first-child), .book-side span:not(:first-child), .tape span:not(:first-child) { text-align: right; }
.book-side button { position: relative; width: 100%; min-height: 20px; align-items: center; background: none; border: 0; text-align: left; color: var(--ink); font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.book-side button:hover { background: var(--surface); }
.book-side span { position: relative; z-index: 1; }
.depth { position: absolute; right: 0; top: 0; bottom: 0; transition: width 200ms linear; }
.depth.ask { background: var(--loss-soft); }
.depth.bid { background: var(--profit-soft); }
.book-mid { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 12px; background: none; border: 0; color: inherit; text-align: left; }
.book-mid strong { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 700; }
.book-mid span { color: var(--muted); font-size: 11px; }
.book-ratio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: auto; padding: 8px 12px 10px; font: 600 11.5px var(--font-mono); }
.book-ratio b { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 5px; border: 1px solid currentColor; border-radius: 3px; font-weight: 600; font-size: 10px; }
.book-ratio > i { display: block; height: 4px; border-radius: 2px; background: var(--loss); overflow: hidden; }
.book-ratio > i > i { display: block; height: 100%; background: var(--profit); }
.tape { font-family: var(--font-mono); font-size: 11.5px; }
.tape li { min-height: 21px; align-items: center; }
.tape li span:last-child { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .depth { transition: none; } }

/* ── Order panel: buy and sell switch, type, size with a five-step slider, one coloured action ── */
.order-panel { padding: 12px 16px 14px; }
.order-panel { min-width: 0; }
.order-panel form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.op-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.op-avail { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; flex: 1; min-width: 0; font-size: 12.5px; }
.op-dotted { color: var(--muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.op-avail strong { font-weight: 500; }
.op-lev select { min-height: 32px; padding: 0 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; font: 600 12.5px var(--font-mono); }
.op-types { display: flex; gap: 18px; border-bottom: 1px solid var(--line); }
.op-types button { min-height: 34px; padding: 0; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font-size: 13px; font-weight: 600; }
.op-types button:hover { color: var(--ink); }
.op-types button[aria-checked="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.op-type-select { display: none; }
.op-type-select select, .unit-select select { width: 100%; min-height: 44px; padding: 0 12px; background: var(--surface); color: var(--ink); border: 0; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; }
.op-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.op-hint:empty { display: none; }
.input-unit { display: flex; align-items: center; background: var(--surface); border: 1px solid transparent; border-radius: var(--radius-sm); }
.input-unit:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.input-unit input, .bracket-grid input, .bracket-form input, .op-brackets input { flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; background: none; border: 0; color: var(--ink); font-family: var(--font-mono); font-size: 14px; outline: none; }
.input-unit input::placeholder, .op-brackets input::placeholder { color: var(--muted); font-family: var(--font-body); }
.bracket-grid input, .bracket-form input, .op-brackets input { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.bracket-grid input:focus-visible, .bracket-form input:focus-visible, .op-brackets input:focus-visible { border-color: var(--accent); }
.unit-select { flex: none; }
.unit-select select { width: auto; min-height: 40px; padding: 0 10px; background: none; font-family: var(--font-mono); font-size: 13px; }
.unit { padding: 0 12px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.unit-btn { margin-right: 4px; min-height: 34px; padding: 0 10px; background: var(--surface-2); border: 0; border-radius: 4px; color: var(--muted-strong); font-size: 12px; }
/* Five even stops on one line, as on Bybit: the stops sit exactly where the knob's centre travels (10 px in from each end). */
.op-slider { position: relative; padding-top: 4px; --track: linear-gradient(to right, var(--accent-fill) calc(10px + (100% - 20px) * var(--f, 0)), var(--line-strong) 0); }
.op-slider input { position: relative; z-index: 2; display: block; width: 100%; height: 22px; margin: 0; appearance: none; -webkit-appearance: none; background: none; cursor: pointer; }
.op-slider input::-webkit-slider-runnable-track { height: 2px; background: var(--track); }
.op-slider input::-moz-range-track { height: 2px; background: var(--track); }
.op-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink-strong); }
.op-slider input::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink-strong); }
.op-slider input:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.op-notches { position: absolute; z-index: 1; left: 10px; right: 10px; top: 15px; pointer-events: none; }
.op-notches i { position: absolute; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); }
.op-notches i.on { border-color: var(--accent-fill); }
.op-ticks { position: relative; display: block; height: 14px; margin: 4px 10px 0; color: var(--muted); font: 11px var(--font-mono); font-variant-numeric: tabular-nums; }
.op-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.op-ticks span:nth-child(2) { left: 25%; } .op-ticks span:nth-child(3) { left: 50%; } .op-ticks span:nth-child(4) { left: 75%; }
.op-ticks span:first-child { left: 0; } .op-ticks span:last-child { left: 100%; }
/* Share of the available volume: exact whole percent, typed or stepped by 1. */
.op-pct { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.op-pct label { color: var(--muted); cursor: help; }
.op-step { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.op-step button { width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--muted-strong); font: 600 16px var(--font-mono); cursor: pointer; }
.op-step button:hover:not(:disabled) { color: var(--ink); }
.op-step button:disabled { color: var(--line-strong); cursor: default; }
.op-step button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm); }
.op-pct-in { display: flex; align-items: center; justify-content: center; min-width: 52px; height: 32px; border-inline: 1px solid var(--line); color: var(--muted); font: 600 13px var(--font-mono); }
.op-pct-in input { width: 3ch; padding: 0; background: none; border: 0; color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; text-align: right; outline: none; }
.op-pct-in:focus-within { box-shadow: inset 0 0 0 2px var(--accent); border-radius: 2px; }
.op-sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.op-sides .submit { border-radius: var(--radius-sm); }
.submit:disabled { opacity: 0.45; cursor: not-allowed; }
.op-max { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--muted); }
.op-max strong { color: var(--ink); font-weight: 500; }
.op-check { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 13px; color: var(--muted-strong); cursor: pointer; }
.op-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-fill); }
.op-brackets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.op-brackets input { min-height: 40px; font-size: 13px; }
.check-line { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; color: var(--muted-strong); cursor: pointer; }
.check-line input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-fill); }
.bracket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.order-sum { display: grid; gap: 6px; font-size: 12px; }
.order-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.order-sum dt { color: var(--muted); }
.order-sum dd { text-align: right; }
.order-sum .warn dd { color: var(--loss); }
.form-warn { font-size: 12px; color: var(--ink); background: var(--loss-soft); border-left: 3px solid var(--loss); padding: 8px 10px; border-radius: 4px; }
.submit { min-height: 48px; border: 0; border-radius: 999px; font: 700 15px var(--font-display); }
.submit.buy { background: var(--profit); color: var(--on-profit); }
.submit.sell { background: var(--loss); color: var(--on-loss); }
.submit:hover:not(:disabled) { filter: brightness(1.06); }
.submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.form-error { min-height: 1em; font-size: 12px; color: var(--loss); }
.form-error:empty { display: none; }
.order-locked { display: grid; gap: 10px; margin-top: 12px; }
.order-locked .actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Rules panel ── */
.rules { padding: 14px 16px 18px; display: grid; gap: 14px; align-content: start; }
.rules-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.chip { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px; background: var(--surface-2); color: var(--muted-strong); }
.chip-active { color: var(--accent-text); background: var(--accent-soft); }
.chip-passed { color: var(--profit); background: var(--profit-soft); }
.chip-failed { color: var(--loss); background: var(--loss-soft); }
.equity-line { display: grid; gap: 2px; }
.equity-line .label { font-size: 11px; }
.equity-line strong { font-size: 24px; }
.equity-line span.num { font-size: 13px; }
.rule-rows { display: grid; gap: 14px; }
.rule-rows li { display: grid; gap: 6px; }
.rule-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12.5px; }
.rule-top .num { color: var(--muted-strong); font-size: 12px; }
.meter { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 3px; transition: width 400ms ease; }
.meter-target span { background: var(--accent); }
.meter-loss span { background: var(--loss); }
.meter-accent span { background: var(--accent); }
.days { display: flex; gap: 6px; }
.days span { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); }
.days span.on { background: var(--profit); }
.rules-preview { display: grid; }
.rules-preview li { display: flex; justify-content: space-between; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.verdict { display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-sm); justify-items: start; font-size: 13px; }
.verdict-passed { background: var(--profit-soft); border-left: 3px solid var(--profit); }
.verdict-failed { background: var(--loss-soft); border-left: 3px solid var(--loss); }
.button-quiet { border-color: var(--line-strong); }

/* ── Tables ── */
.tables { display: flex; flex-direction: column; min-height: 260px; }
.tables-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; border-bottom: 1px solid var(--line); }
.tables-head .tabs-flat { flex: 1; min-width: 0; border-bottom: 0; }
.pnl-note { padding: 10px 12px; font-size: 12.5px; color: var(--muted-strong); border-bottom: 1px solid var(--line); }
.pnl-note strong { font-weight: 600; }
.table-scroll { overflow: auto; flex: 1; max-height: 340px; }
.grid-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
.grid-table th { position: sticky; top: 0; background: var(--bg); text-align: left; font-weight: 500; font-size: 11px; color: var(--muted); padding: 6px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid-table td { padding: 5px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.grid-table td.num, .grid-table .r { text-align: right; }
.grid-table small { display: block; font-size: 11px; color: inherit; opacity: 0.85; }
.grid-table tbody tr:hover { background: var(--surface); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions button { min-height: 28px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); font-size: 12px; }
.row-actions button:hover:not(:disabled) { border-color: var(--muted); }
.row-actions .danger:hover:not(:disabled) { border-color: var(--loss); color: var(--loss); }
@media (pointer: coarse) { .row-actions button, .presets button { min-height: 44px; } }
.edit-row td { background: var(--surface); }
.bracket-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding: 6px 0; }
.bracket-form label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); }
.empty-row { padding: 24px 16px; color: var(--muted); font-size: 13px; }

/* ── Toast and foot ── */
.toast { position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: min(92vw, 420px); display: none; }
.toast-ok, .toast-err { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line-strong); border-left-width: 3px; border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); font-size: 13px; }
.toast-ok { border-left-color: var(--profit); }
.toast-err { border-left-color: var(--loss); }
.toast button { flex: none; display: grid; place-items: center; width: 28px; height: 28px; background: none; border: 0; color: var(--muted); border-radius: 4px; }
.term-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding: 8px 16px; background: var(--bg); color: var(--muted); font-size: 11px; }
.term-foot a { color: var(--muted-strong); }
.term-foot .term-cookie { min-height: 0; color: var(--muted-strong); font-size: inherit; }
.skip-link:focus { z-index: 200; }

.rules-model + .rules-model { margin-top: 14px; }
.rules-model .label { font-size: 11px; color: var(--muted-strong); }
.rules-terms { display: grid; margin-top: 4px; }
.rules-terms > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
.rules-terms dt { color: var(--muted); }
.rules-terms dd { text-align: right; }

.save-dot { width: 8px; height: 8px; margin: 10px auto; border-radius: 50%; background: var(--muted); }
.save-dot.is-saved { background: var(--profit); }
.save-dot.is-pending { background: var(--warn); }
.save-dot.is-error { background: var(--loss); }
@media (max-width: 759px) { .save-dot { margin: auto 10px; flex: none; } }

.sym-btn span { font-family: var(--font-mono); font-size: 12px; }
.menu-sym { width: min(340px, calc(100vw - 24px)); gap: 6px; padding: 8px; }
.menu-sym input { width: 100%; min-height: 40px; padding: 0 10px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--ink); font: inherit; }
.menu-sym ul { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.menu-sym li button { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t p" "v p"; gap: 0 10px; width: 100%; min-height: 44px; padding: 6px 8px; background: none; border: 0; border-radius: 4px; color: var(--ink); text-align: left; }
.menu-sym li button:hover, .menu-sym li button:focus-visible { background: var(--surface); }
.menu-sym li strong { grid-area: t; font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.menu-sym li span { grid-area: v; color: var(--muted); font-size: 11.5px; }
.menu-sym li .num { grid-area: p; align-self: center; color: var(--ink); font-family: var(--font-mono); font-size: 12px; }
.menu-empty { margin: 4px 8px; color: var(--muted); font-size: 12.5px; }
.seg-scale button { min-width: 34px; }

/* Drawing tool groups and the floating bar of a selected drawing */
.tool-group .tool-btn { position: relative; }
.group-mark { position: absolute; right: 3px; bottom: 3px; width: 0; height: 0; border-left: 4px solid transparent; border-bottom: 4px solid currentColor; opacity: .7; }
.menu-tools { z-index: 60; min-width: 240px; max-height: calc(100vh - 80px); overflow-y: auto; }
.menu > button[aria-checked="true"] { background: var(--accent-soft); color: var(--accent-text); }
.obj-bar { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 2px; padding: 3px; max-width: calc(100% - 16px); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); }
.obj-bar .tool-btn.text { min-width: 52px; }
.obj-pop { top: calc(100% + 6px); left: 0; min-width: 160px; }
.obj-pop.swatches { grid-template-columns: repeat(4, 32px); gap: 6px; min-width: 0; }
.obj-pop.swatches button { width: 32px; height: 32px; padding: 0; border: 2px solid transparent; border-radius: 50%; }
.obj-pop.swatches button[aria-checked="true"] { border-color: var(--ink); }
.swatch { display: block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); }
.line-sample { display: block; width: 28px; border-top: 2px solid currentColor; }
.obj-pop > button .line-sample { position: absolute; left: 8px; }
.obj-text input { width: 132px; height: 32px; padding: 0 8px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; font: inherit; font-size: 13px; }
@media (max-width: 759px) { .obj-bar { top: 52px; } .obj-text input { width: 96px; } }

/* Price-axis switches, visible on touch as well as desktop. */
.axis-switches { position: absolute; left: 8px; bottom: 30px; z-index: 4; display: flex; gap: 3px; }
.axis-switches button { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--surface); color: var(--muted-strong); font: 600 13px var(--font-body); cursor: pointer; }
.axis-switches button:hover { color: var(--ink); border-color: var(--accent-text); }
.axis-switches button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-on-fill); }
.axis-switches button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (pointer: coarse) { .axis-switches { gap: 5px; } .axis-switches button { width: 32px; height: 32px; } }
.meter-warn span { background: var(--warn); }
.rule-daily-warn .rule-left { color: var(--warn); }
.rule-daily-danger .rule-left { color: var(--loss); }
.rule-daily-warn, .rule-daily-danger { padding: 8px 10px; margin-inline: -10px; border-radius: 6px; }
.rule-daily-warn { background: var(--warn-soft); }
.rule-daily-danger { background: var(--loss-soft); }

/* ── Selects: one quiet chevron instead of the native arrow, same as the unit and type pickers ── */
.op-lev select, .unit-select select, .op-type-select select, .acct-switch select {
  appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat;
}
.op-lev select:hover, .acct-switch select:hover { border-color: var(--muted); }
.unit-select select:hover, .op-type-select select:hover { color: var(--ink-strong); }
.op-lev select:focus-visible, .unit-select select:focus-visible, .op-type-select select:focus-visible, .acct-switch select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }