/* V23 — desktop execution surfaces. Layout, live feeds and the order engine
   remain owned by the terminal modules; these rules only refine appearance. */
.terminal-app,
.pro-terminal {
  --desk-bg: #0b0e12;
  --desk-panel: #12161c;
  --desk-raised: #191f27;
  --desk-input: #151a21;
  --desk-line: #ffffff12;
  --desk-line-strong: #ffffff20;
  --desk-text: #e9edf3;
  --desk-soft: #b7c0cd;
  --desk-muted: #8995a5;
  --desk-hover: #ffffff06;
  --desk-buy: #52cba0;
  --desk-sell: #ef8294;
  --desk-buy-text: #08271c;
  --desk-sell-text: #33131a;
  --trade-text: var(--desk-text);
  --trade-line: var(--desk-line);
  --trade-input: var(--desk-input);
  --trade-surface: var(--desk-panel);
  --text: var(--desk-text);
  --muted: var(--desk-muted);
  --line: var(--desk-line);
  --green: var(--desk-buy);
  --red: var(--desk-sell);
  --panel: var(--desk-panel);
  --panel-2: var(--desk-raised);
  --term-surface: var(--desk-panel);
  --term-input: var(--desk-input);
  --term-divider: var(--desk-line);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

html[data-trade-theme="light"] :is(.terminal-app, .pro-terminal) {
  --desk-bg: #eef1f5;
  --desk-panel: #ffffff;
  --desk-raised: #f4f6f9;
  --desk-input: #f7f8fa;
  --desk-line: #e5e9ef;
  --desk-line-strong: #ccd4de;
  --desk-text: #1b2634;
  --desk-soft: #455468;
  --desk-muted: #68788b;
  --desk-hover: #132c4504;
  --desk-buy: #07835f;
  --desk-sell: #c73e5a;
  --desk-buy-text: #ffffff;
  --desk-sell-text: #ffffff;
  --text: var(--desk-text);
  --muted: var(--desk-muted);
  --green: var(--desk-buy);
  --red: var(--desk-sell);
  --term-surface: var(--desk-panel);
  --term-input: var(--desk-input);
  --term-divider: var(--desk-line);
}

/* Both trading experiences use the same contrast and semantic market colors. */
.pro-terminal,
html[data-trade-theme="light"] .pro-terminal {
  --pro-bg: var(--desk-bg);
  --pro-panel: var(--desk-panel);
  --pro-raised: var(--desk-raised);
  --pro-input: var(--desk-input);
  --pro-chart: var(--desk-bg);
  --pro-text: var(--desk-text);
  --pro-text-soft: var(--desk-soft);
  --pro-muted: var(--desk-muted);
  --pro-faint: var(--desk-muted);
  --pro-line: var(--desk-line);
  --pro-line-soft: var(--desk-line);
  --pro-soft: var(--desk-hover);
  --pro-hover: var(--desk-raised);
  --pro-selected: var(--desk-raised);
  --pro-positive: var(--desk-buy);
  --pro-negative: var(--desk-sell);
  --pro-positive-fill: color-mix(in srgb, var(--desk-buy) 11%, transparent);
  --pro-negative-fill: color-mix(in srgb, var(--desk-sell) 11%, transparent);
  --pro-buy: var(--desk-buy);
  --pro-sell: var(--desk-sell);
  --pro-buy-hover: color-mix(in srgb, var(--desk-buy) 90%, var(--desk-text));
  --pro-sell-hover: color-mix(in srgb, var(--desk-sell) 90%, var(--desk-text));
  --pro-buy-text: var(--desk-buy-text);
  --pro-sell-text: var(--desk-sell-text);
}
html[data-trade-theme="light"] .pro-terminal { --pro-chart: #ffffff; }

.terminal-app,
html[data-trade-theme="light"] .terminal-app {
  background: var(--desk-bg);
  color: var(--desk-text);
  border-color: var(--desk-line);
  box-shadow: none;
}
.terminal-app :is(.term-market-bar, .term-order-panel, .term-orderbook, .term-position-panel, .term-depth-tabs, .term-status-bar) {
  background: var(--desk-panel);
  border-color: var(--desk-line);
}
.terminal-app :is(.term-workspace, .term-chart-panel) { background: var(--desk-bg); }
html[data-trade-theme="light"] .terminal-app :is(.term-workspace, .term-chart-panel) { background: #ffffff; }
.terminal-app :is(.term-chart-toolbar, .term-chart-footer) { background: var(--desk-panel); border-color: var(--desk-line); }

/* Order entry: controlled contrast, one clear action and readable labels. */
:is(.terminal-app, .pro-terminal) .ow-ticket-heading strong { font-weight: 600; letter-spacing: -.12px; }
:is(.terminal-app, .pro-terminal) .ow-ticket-heading > button {
  border-color: var(--desk-line-strong);
  background: var(--desk-raised);
  color: var(--desk-soft);
  border-radius: 6px;
}
:is(.terminal-app, .pro-terminal) .ow-side-switch {
  background: var(--desk-input);
  border-color: var(--desk-line);
  border-radius: 8px;
}
:is(.terminal-app, .pro-terminal) .ow-side-switch button { font-weight: 600; letter-spacing: .02em; border-radius: 5px; }
:is(.terminal-app, .pro-terminal) .ow-side-switch .long.active { background: color-mix(in srgb, var(--desk-buy) 14%, transparent); color: var(--desk-buy); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--desk-buy) 17%, transparent); }
:is(.terminal-app, .pro-terminal) .ow-side-switch .short.active { background: color-mix(in srgb, var(--desk-sell) 14%, transparent); color: var(--desk-sell); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--desk-sell) 17%, transparent); }
:is(.terminal-app, .pro-terminal) .ow-type-tabs { border-bottom-color: var(--desk-line); }
:is(.terminal-app, .pro-terminal) .ow-type-tabs button.active { border-bottom-color: var(--trade-accent); color: var(--desk-text); font-weight: 550; }
:is(.terminal-app, .pro-terminal) :is(.ow-field > span, .ow-available, .ow-estimates > div, .ow-protect, .ow-check-row label, .ow-select-field) { font-size: 11px; }
:is(.terminal-app, .pro-terminal) .ow-field > div { border-radius: 7px; border-color: var(--desk-line); background: var(--desk-input); transition: border-color .16s ease, box-shadow .16s ease; }
:is(.terminal-app, .pro-terminal) .ow-field > div:focus-within { border-color: color-mix(in srgb, var(--trade-accent) 58%, var(--desk-line)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--trade-accent) 9%, transparent); }
:is(.terminal-app, .pro-terminal) .ow-field > div:has(input[aria-invalid="true"]) { border-color: var(--desk-sell); }
:is(.terminal-app, .pro-terminal) .ow-field input { font-weight: 500; letter-spacing: .01em; caret-color: var(--trade-accent); }
:is(.terminal-app, .pro-terminal) .ow-field small { font-size: 10px; }
:is(.terminal-app, .pro-terminal) .ow-shortcuts button { background: var(--desk-raised); border-color: transparent; border-radius: 5px; font-size: 10px; color: var(--desk-soft); }
:is(.terminal-app, .pro-terminal) .ow-shortcuts button:hover:not(:disabled) { background: color-mix(in srgb, var(--trade-accent) 9%, var(--desk-panel)); border-color: color-mix(in srgb, var(--trade-accent) 30%, var(--desk-line)); color: var(--trade-accent); }
:is(.terminal-app, .pro-terminal) .ow-estimates { border-top-color: var(--desk-line); }
:is(.terminal-app, .pro-terminal) .ow-estimates b { font-weight: 550; color: var(--desk-soft); }
:is(.terminal-app, .pro-terminal) .ow-submit { background: var(--desk-buy); color: var(--desk-buy-text); border-radius: 7px; box-shadow: inset 0 1px 0 #ffffff12; }
:is(.terminal-app, .pro-terminal) .ow-submit.short { background: var(--desk-sell); color: var(--desk-sell-text); }
.terminal-app .ow-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--desk-buy) 90%, var(--desk-text)); }
.terminal-app .ow-submit.short:hover:not(:disabled) { background: color-mix(in srgb, var(--desk-sell) 90%, var(--desk-text)); }
:is(.terminal-app, .pro-terminal) .ow-submit:active:not(:disabled) { box-shadow: inset 0 2px 4px #00000013; }
:is(.terminal-app, .pro-terminal) :is(.ow-hint, .ow-risk-summary > p) { font-size: 10px; line-height: 1.65; }
:is(.terminal-app, .pro-terminal) .ow-risk-summary { background: var(--desk-input); border-color: var(--desk-line); border-radius: 7px; }
:is(.terminal-app, .pro-terminal) .ow-risk-head > button { color: var(--trade-accent); }
:is(.terminal-app, .pro-terminal) :is(.ow-ticket input[type="checkbox"], .ow-table-tools input[type="checkbox"]) { accent-color: var(--trade-accent); }
:is(.terminal-app, .pro-terminal) :is(button, input, select):focus-visible { outline-color: var(--trade-accent); }

/* Quiet balance card following the order action, with aligned numerical values. */
:is(.terminal-app, .pro-terminal) .ow-account-summary { border-top-color: var(--desk-line); }
.terminal-app .ow-account-summary .term-account-choice label,
.pro-terminal .ow-account-summary .pro-account-controls > label { font-size: 10px; font-weight: 500; letter-spacing: .015em; }
.terminal-app .ow-account-summary .term-account-select-wrap,
.pro-terminal .ow-account-summary .pro-account-controls select { border-radius: 7px; background: var(--desk-input); border-color: var(--desk-line); }
.terminal-app .ow-account-summary .term-account-select-wrap:focus-within { border-color: var(--trade-accent); }
.terminal-app .ow-account-summary .term-account-balances > span,
.pro-terminal .ow-account-summary .pro-account-summary > div { font-size: 11px; }
.terminal-app .ow-account-summary .term-account-balances b,
.pro-terminal .ow-account-summary .pro-account-summary b { font-weight: 550; }
.terminal-app .ow-account-summary .term-account-strip-actions > button,
.terminal-app .ow-account-summary .term-account-strip-actions > button:first-child,
.pro-terminal .ow-account-summary .pro-account-actions > button { background: var(--desk-raised); color: var(--desk-soft); border-color: var(--desk-line); border-radius: 6px; font-size: 10px; }

/* Book and tape preserve their full-height depth layout. */
.terminal-app .term-depth-tabs > button { color: var(--desk-muted); font-weight: 500; }
.terminal-app .term-depth-tabs > button.active { color: var(--desk-text); }
.terminal-app .term-depth-tabs > button.active:after { background: var(--trade-accent); }
.terminal-app :is(.term-book-tools, .term-book-cols, .term-book-cols small, .term-depth-note, .term-tape-subhead) { color: var(--desk-muted); }
.terminal-app .term-book-tools select { background: var(--desk-input); border-color: var(--desk-line); color: var(--desk-soft); border-radius: 5px; }
.terminal-app .term-depth-row { color: var(--desk-soft); font-variant-numeric: tabular-nums; }
.terminal-app .term-depth-row > span:nth-child(2) { color: var(--desk-sell); }
.terminal-app .term-depth-row.bid > span:nth-child(2) { color: var(--desk-buy); }
.terminal-app .term-depth-row > span:nth-child(3) { color: var(--desk-text); }
.terminal-app .term-depth-row > span:last-child { color: var(--desk-muted); }
.terminal-app .term-depth-row > i { background: color-mix(in srgb, var(--desk-sell) 10%, transparent); }
.terminal-app .term-depth-row.bid > i { background: color-mix(in srgb, var(--desk-buy) 10%, transparent); }
.terminal-app :is(.term-depth-row, .term-tape-row):hover:not(:disabled) { background: var(--desk-hover); }
.terminal-app .term-book-mid { background: var(--desk-input); border-color: var(--desk-line); }
.terminal-app .term-book-mid > strong { color: var(--desk-buy); font-weight: 600; letter-spacing: -.3px; }
.terminal-app :is(.term-book-mid > span, .term-book-mid > span i, .term-tape-row > span:last-child) { color: var(--desk-muted); }
.terminal-app .term-tape-row { color: var(--desk-text); }
.terminal-app .term-tape-row > span:first-child { color: var(--desk-buy); }
.terminal-app .term-tape-row.sell > span:first-child { color: var(--desk-sell); }
.terminal-app .term-book-ratio > div { color: var(--desk-buy); }
.terminal-app .term-book-ratio > div > span:last-child { color: var(--desk-sell); }
.terminal-app .term-book-ratio > i { background: color-mix(in srgb, var(--desk-sell) 55%, var(--desk-panel)); }
.terminal-app .term-book-ratio > i > b { background: color-mix(in srgb, var(--desk-buy) 70%, var(--desk-panel)); border-right-color: var(--desk-panel); }

/* Dense professional toolbars, with the selected workspace clearly distinct. */
.pro-terminal .pro-workspace-presets { background: var(--desk-input); border-color: var(--desk-line); border-radius: 6px; }
.pro-terminal .pro-workspace-presets button { border-radius: 4px; color: var(--desk-muted); }
.pro-terminal .pro-workspace-presets button.active { background: var(--desk-raised); color: var(--desk-text); box-shadow: inset 0 0 0 1px var(--desk-line); }
.pro-terminal .pro-workspace-actions button { color: var(--desk-soft); border-radius: 5px; }
.pro-terminal .pro-workspace-actions [data-pro-save] { color: var(--trade-accent); }
.pro-terminal .pro-workspace-actions [data-pro-lock][aria-pressed="true"] { color: var(--trade-accent); }
.pro-terminal .pro-panel-head > b { font-weight: 600; letter-spacing: .01em; }
.pro-terminal .pro-chart.focused { border-top-color: color-mix(in srgb, var(--trade-accent) 62%, var(--desk-line)); }
.pro-terminal .pro-dom-row { border-top-color: color-mix(in srgb, var(--desk-line) 50%, transparent); }
.pro-terminal .pro-dom-row.center { background: var(--desk-raised); }
.pro-terminal :is(.pro-dom-columns, .pro-tape-columns) { font-size: 10px; color: var(--desk-muted); }

/* Positions read as a financial table, without extra boxes or heavy striping. */
:is(.terminal-app, .pro-terminal) .ow-table-header { background: var(--desk-panel); border-bottom-color: var(--desk-line); }
:is(.terminal-app, .pro-terminal) .ow-table-tabs button { font-size: 11px; }
:is(.terminal-app, .pro-terminal) .ow-table-tabs button.active { color: var(--desk-text); border-bottom-color: var(--trade-accent); font-weight: 550; }
:is(.terminal-app, .pro-terminal) .ow-table-tabs i { color: var(--desk-soft); background: var(--desk-raised); border-radius: 4px; }
:is(.terminal-app, .pro-terminal) .ow-table th { background: var(--desk-input); color: var(--desk-muted); font-size: 10px; font-weight: 450; }
:is(.terminal-app, .pro-terminal) .ow-table td { border-bottom-color: var(--desk-line); }
:is(.terminal-app, .pro-terminal) .ow-table tbody tr:hover { background: var(--desk-hover); }
:is(.terminal-app, .pro-terminal) .ow-table small { color: var(--desk-muted); }
:is(.terminal-app, .pro-terminal) .ow-table td.positive small { color: var(--desk-buy); }
:is(.terminal-app, .pro-terminal) .ow-table td.negative small { color: var(--desk-sell); }
:is(.terminal-app, .pro-terminal) .ow-row-actions button { color: var(--desk-soft); background: var(--desk-raised); border-color: var(--desk-line); border-radius: 5px; }
:is(.terminal-app, .pro-terminal) .ow-row-actions button:hover { color: var(--trade-accent); border-color: color-mix(in srgb, var(--trade-accent) 40%, var(--desk-line)); }
:is(.terminal-app, .pro-terminal) .ow-empty strong { font-weight: 550; letter-spacing: -.1px; }
:is(.terminal-app, .pro-terminal) .ow-empty span { color: var(--desk-muted); font-size: 11px; }

/* Market identity and its portaled browser share the desktop palette. The :has
   guard deliberately excludes the native mobile app and its market sheet. */
:is(.terminal-app, .pro-terminal),
body:has(:is(.terminal-app, .pro-terminal)) .vm-market-popover {
  --vm-bg: #12161c;
  --vm-raised: #191f27;
  --vm-text: #e9edf3;
  --vm-muted: #8995a5;
  --vm-line: #ffffff16;
  --vm-positive: #52cba0;
  --vm-negative: #ef8294;
  --vm-shadow: #00000060;
}
html[data-trade-theme="light"] :is(.terminal-app, .pro-terminal),
html[data-trade-theme="light"] body:has(:is(.terminal-app, .pro-terminal)) .vm-market-popover {
  --vm-bg: #ffffff;
  --vm-raised: #f4f6f9;
  --vm-text: #1b2634;
  --vm-muted: #68788b;
  --vm-line: #e5e9ef;
  --vm-positive: #07835f;
  --vm-negative: #c73e5a;
  --vm-shadow: #182b4226;
}
:is(.terminal-app, .pro-terminal) .vm-market-capsule { box-shadow: none; }
:is(.terminal-app, .pro-terminal) .vm-market-capsule:hover,
:is(.terminal-app, .pro-terminal) .vm-market-capsule[aria-expanded="true"] { border-color: color-mix(in srgb, var(--trade-accent) 50%, var(--vm-line)) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--trade-accent) 7%, transparent); }
:is(.terminal-app, .pro-terminal) .vm-coin-ghost { opacity: .06; }
:is(.terminal-app, .pro-terminal) .vm-stat > b { color: var(--desk-text); font-weight: 550; }
body:has(:is(.terminal-app, .pro-terminal)) .vm-market-popover { border-color: var(--vm-line); box-shadow: 0 24px 80px var(--vm-shadow), 0 1px 0 #ffffff05 inset; }
body:has(:is(.terminal-app, .pro-terminal)) .vm-market-popover .vm-search { background: var(--vm-raised); border-color: var(--vm-line); }
body:has(:is(.terminal-app, .pro-terminal)) .vm-market-popover .vm-search:focus-within { border-color: color-mix(in srgb, var(--trade-accent) 65%, var(--vm-line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--trade-accent) 8%, transparent); }
body:has(:is(.terminal-app, .pro-terminal)) .vm-market-popover .vm-popover-heading b { font-size: 18px; letter-spacing: -.4px; }
body:has(:is(.terminal-app, .pro-terminal)) .vm-market-popover .vm-market-filters button.active { border-bottom-color: var(--trade-accent); }
body:has(:is(.terminal-app, .pro-terminal)) .vm-market-popover .vm-market-row.selected td { background: color-mix(in srgb, var(--trade-accent) 6%, var(--vm-bg)); }
body:has(:is(.terminal-app, .pro-terminal)) .vm-market-popover .vm-market-row.selected td:first-child { box-shadow: inset 2px 0 var(--trade-accent); }
body:has(:is(.terminal-app, .pro-terminal)) .vm-market-popover .vm-row-name small { font-size: 9px; color: var(--vm-muted); background: var(--vm-raised); }
body:has(:is(.terminal-app, .pro-terminal)) .vm-market-popover .vm-favorite.active { color: var(--trade-accent); }

@media (prefers-reduced-motion: reduce) {
  :is(.terminal-app, .pro-terminal) .ow-field > div { transition: none; }
}