/* trAider / market workspace
   Presentation only. Loaded after feature styles. Shared palette comes from
   the site theme; no display state, canvas dimensions or trading hooks change. */

:root {
  --workspace-soft: color-mix(in srgb, var(--accent) 9%, var(--card));
  --workspace-warning: #e9bd72;
  --workspace-blue: #80bbed;
  --workspace-shadow: 0 18px 48px rgb(0 0 0 / 20%);
  --bg-alt: var(--field);
  --bg-card: var(--card);
  --header-bg: var(--card);
}
:root[data-theme="light"] {
  --workspace-warning: #8a5b0a;
  --workspace-blue: #286c9f;
  --workspace-shadow: 0 18px 48px rgb(17 42 50 / 10%);
}

/* Workspace hierarchy */
main:has(#workspace) {
  max-width: 1640px;
  padding: 28px 32px 64px;
}
#workspace {
  min-width: 0;
}
#workspace .terminal-top {
  gap: 24px;
  margin: 4px 0 18px;
}
#workspace .terminal-top .eyebrow {
  color: var(--accent);
  letter-spacing: 0.1em;
}
#workspace .quote-line {
  gap: 12px;
}
#workspace .quote-line strong {
  font-size: clamp(25px, 2.7vw, 36px);
  font-weight: 650;
  letter-spacing: -1.2px;
}
#workspace .terminal-actions {
  gap: 8px;
  align-items: center;
}
#workspace .terminal-actions .button {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 10px;
}
#workspace #market-status {
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
#workspace #market-status.error {
  color: var(--negative);
}
#workspace .workflow-timeframe {
  gap: 10px;
  margin-bottom: 16px;
}
#workspace #analysis-timeframe {
  border-radius: 8px;
  min-height: 34px;
}
#workspace .workspace-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  margin: 0 0 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
}
#workspace .workspace-tabs button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}
#workspace .workspace-tabs button:hover {
  color: var(--text);
  background: var(--field);
}
#workspace .workspace-tabs button[aria-selected="true"] {
  background: var(--workspace-soft);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* A consistent vocabulary for market selectors and chart controls */
#workspace
  :is(
    .quick-market-switch,
    .quick-quote-switch,
    .okx-chart-mode-pills,
    .ob-tab-strip,
    .ob-zoom-group,
    .ob-size-group,
    .ob-layer-group,
    .cg-mode-switcher,
    .cg-period-chips
  ) {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: none;
}
#workspace :is(.qms-btn, .qqs-btn) {
  min-height: 34px;
  padding: 6px 10px;
  font-weight: 600;
}
#workspace :is(.qms-btn, .qqs-btn):hover {
  background: var(--card);
  color: var(--text);
}
#workspace :is(.qms-btn, .qqs-btn).active {
  background: var(--card) !important;
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line)) !important;
  box-shadow: none;
}
#workspace .quick-symbol-trigger {
  min-height: 44px;
  padding: 8px 12px;
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
  border-radius: 10px;
}
#workspace .quick-symbol-trigger:hover {
  border-color: var(--accent);
  background: var(--workspace-soft);
}
#workspace .quick-symbol-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
#workspace .qss-name {
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.5px;
}
#workspace .qss-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--field);
  color: var(--accent);
  flex: 0 0 28px;
  font-size: 17px;
}
#workspace :is(.quick-symbol-badge, .okx-cust-badge) {
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--muted);
  border-radius: 5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
#workspace .quick-coin-dropdown {
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: var(--workspace-shadow);
}
#workspace .quick-coin-dropdown input {
  background: var(--field);
  color: var(--text);
  border-color: var(--line);
}
#workspace .quick-coin-item {
  color: var(--text);
  border-radius: 8px;
}
#workspace .quick-coin-item:hover {
  background: var(--workspace-soft);
}
#workspace .quick-coin-item.active {
  background: var(--workspace-soft);
  border-color: var(--accent);
}
#workspace :is(.qcd-title, .qcd-item-symbol) {
  color: var(--text);
}
#workspace :is(.qcd-quote-switch, .qcd-chip, .qcd-item-icon) {
  background: var(--field);
  border-color: var(--line);
}
#workspace .qcd-header {
  border-color: var(--line);
}
#workspace .qcd-quote-btn {
  min-height: 34px;
}
#workspace .qcd-quote-btn.active {
  background: var(--card) !important;
  color: var(--accent) !important;
  border-color: var(--line) !important;
  box-shadow: none;
}
#workspace :is(.qcd-item:hover, .qcd-item.active, .qcd-chip:hover) {
  background: var(--workspace-soft);
  border-color: var(--line);
}
#workspace .qcd-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
#workspace .qcd-mica-banner {
  background: var(--field);
  color: var(--muted);
  border-color: var(--line);
}
#workspace :is(.qcd-mica-text strong, .qcd-item-check, .qcd-mode-indicator) {
  color: var(--accent);
}
#workspace :is(.qcd-close-btn, .qcd-search-clear, .qcd-quote-btn):hover {
  color: var(--text);
  background: var(--field);
}
#workspace
  :is(.okx-cust-tf-btn, .okx-mode-pill, .ob-tab-btn, .ob-zoom-btn, .ob-size-btn, .cg-period-btn) {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 600;
}
#workspace
  :is(
    .okx-cust-tf-btn,
    .okx-mode-pill,
    .ob-tab-btn,
    .ob-zoom-btn,
    .ob-size-btn,
    .cg-period-btn
  ).active {
  background: var(--card);
  color: var(--accent);
  box-shadow: none;
}
#workspace .okx-mode-pill > span:first-child {
  display: none;
} /* Decorative emoji only; text labels remain. */
#workspace .okx-cust-tf-row {
  padding-bottom: 12px;
  gap: 12px;
}

/* Two-pane trading desk */
#workspace .okx-customer-shell {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: none;
  margin-bottom: 24px;
}
#workspace .okx-cust-header {
  padding: 14px 18px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
#workspace .okx-cust-live-price {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.7px;
}
#workspace .okx-cust-workspace-grid {
  padding: 16px;
  gap: 16px;
}
#workspace :is(.okx-cust-left-pane, .okx-cust-right-pane) {
  gap: 16px;
  min-width: 0;
}
#workspace
  :is(
    .okx-cust-minichart-wrap,
    .okx-cust-intel-bar,
    .okx-multi-analytics-hub,
    .okx-cust-order-col,
    .okx-cust-orderbook-col,
    .okx-cust-positions-card
  ) {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: none;
}
#workspace .okx-cust-left-pane .okx-cust-minichart-wrap {
  padding: 14px 16px;
}
#workspace .chart-next-levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
  margin-top: 8px;
  padding: 9px 2px 0;
  border-top: 1px solid var(--line);
}
#workspace .chart-next-level {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 10px;
  min-width: 0;
}
#workspace .chart-next-level-label {
  color: var(--muted);
  font-size: 12px;
  min-width: 0;
  overflow-wrap: anywhere;
}
#workspace .chart-next-level-value {
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
}
#workspace .chart-next-level--support .chart-next-level-value {
  color: var(--positive);
}
#workspace .chart-next-level--resistance .chart-next-level-value {
  color: var(--negative);
}
#workspace .chart-next-level-meta {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  min-height: 1.25em;
  overflow-wrap: anywhere;
}
#workspace .chart-next-levels-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}
#workspace .okx-cust-right-pane .okx-cust-order-col {
  padding: 18px;
  gap: 12px;
}
#workspace .okx-cust-right-pane .okx-cust-orderbook-col {
  padding: 16px;
  gap: 6px;
}
#workspace .okx-cust-positions-card {
  margin: 0 16px 16px;
  padding: 18px !important;
  border-radius: 12px !important;
}
#workspace .okx-cust-positions-card .button.active {
  color: var(--accent) !important;
  background: var(--workspace-soft) !important;
  border-color: var(--line) !important;
}
#workspace :is(.okx-cust-tab-row, .okx-cust-pill-selects) {
  gap: 8px;
}
#workspace .okx-cust-tab-btn {
  min-height: 42px;
  font-weight: 650;
}
#workspace .okx-cust-pill {
  min-height: 36px;
  border-radius: 8px;
  background: var(--field);
  border-color: var(--line);
}
#workspace .okx-cust-stepper-wrap {
  border-radius: 9px;
  border-color: var(--line);
  background: var(--field);
}
#workspace .okx-cust-step-btn {
  color: var(--muted);
  background: transparent;
}
#workspace .okx-cust-step-btn:hover {
  color: var(--accent);
  background: var(--workspace-soft);
}
#workspace .okx-cust-order-col input {
  background: var(--field);
  color: var(--text);
  border-color: var(--line);
  font-variant-numeric: tabular-nums;
}
#workspace .okx-cust-levels-grid {
  gap: 12px;
}
#workspace .okx-cust-lvl-box {
  padding: 10px 12px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 9px;
}
#workspace .okx-cust-lvl-box label {
  color: var(--muted);
  margin-bottom: 7px;
}
#workspace :is(.okx-cust-result-box, .okx-cust-risk-box) {
  border-color: var(--line);
  border-radius: 9px;
  background: var(--field);
  line-height: 1.6;
}
#workspace .okx-cust-btn-long {
  background: var(--positive);
  border-color: var(--positive);
  color: var(--trade-ink, var(--accent-ink));
}
#workspace .okx-cust-btn-short {
  background: var(--negative);
  border-color: var(--negative);
  color: var(--trade-ink, var(--accent-ink));
}
#workspace :is(.okx-cust-btn-long, .okx-cust-btn-short) {
  min-height: 48px;
  border-radius: 9px;
  box-shadow: none;
  font-weight: 700;
}
#workspace :is(.okx-cust-btn-long, .okx-cust-btn-short):hover {
  box-shadow: none;
  filter: brightness(1.05);
}
#workspace .okx-cust-slider-bar {
  background: var(--line);
}
#workspace .okx-cust-slider-fill {
  background: var(--accent);
}
#workspace .okx-cust-slider-dot {
  border-color: var(--line);
}
#workspace .okx-cust-slider-dot.active {
  background: var(--accent);
  border-color: var(--accent);
}
#workspace
  :is(
    .okx-mode-toggle-btn.spot-active,
    .okx-mode-toggle-btn.futures-active,
    .btn-order-cap-preset.active
  ) {
  background: var(--workspace-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
#workspace .adv-action-btn-bot {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
#workspace .adv-action-btn-manual {
  background: var(--field) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

/* Orderbook and intelligence retain red/green financial semantics */
#workspace .okx-cust-ob-header {
  padding: 8px 6px 10px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
#workspace .okx-cust-ob-row {
  min-height: 30px;
  padding: 5px 6px;
  font-variant-numeric: tabular-nums;
}
#workspace .okx-cust-ob-depth {
  opacity: 0.6;
}
#workspace .okx-cust-ob-mid {
  padding: 14px 6px;
  border-color: var(--line);
}
#workspace .okx-cust-ob-mid-price {
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.7px;
}
#workspace .okx-cust-pressure-wrap {
  padding-top: 12px;
}
#workspace .okx-cust-pressure-bar {
  height: 4px;
  border-radius: 4px;
}
#workspace .okx-cust-intel-bar {
  padding: 18px;
  gap: 14px;
}
#workspace .okx-cust-intel-setup {
  font-size: 17px;
  font-weight: 650;
}
#workspace .okx-cust-intel-pill {
  background: var(--workspace-soft);
  color: var(--accent);
}
#workspace .okx-cust-intel-tools {
  gap: 6px;
}
#workspace :is(.okx-cust-intel-act-btn, .okx-cust-btn-chart) {
  min-height: 36px;
  padding: 7px 10px;
  background: var(--field);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#workspace .okx-cust-intel-strip {
  padding: 12px 0;
  gap: 14px;
}
#workspace .okx-cust-intel-lbl {
  color: var(--muted);
}
#workspace .okx-cust-intel-val {
  font-size: 15px;
  color: var(--text);
}
#workspace .okx-cust-intel-details {
  padding-top: 14px;
  gap: 10px;
}
#workspace .okx-cust-intel-reason-box {
  line-height: 1.65;
  padding: 0;
}
#workspace .sentiment-strip {
  background: var(--field);
  border-color: var(--line);
  padding: 10px 12px;
}
#workspace .sentiment-lbl {
  color: var(--muted);
}
#workspace .ob-tape-row {
  padding: 6px;
  min-height: 30px;
}
#workspace .ob-tape-row:hover {
  background: var(--field);
}
#workspace
  :is(
    .ob-tape-row.buy .ob-tape-side,
    .ob-tape-row.buy .ob-tape-px,
    .color-bid,
    .ob-wall-chip.bid .ob-wall-px,
    .ob-wall-chip.bid .ob-wall-dist
  ) {
  color: var(--positive);
}
#workspace
  :is(
    .ob-tape-row.sell .ob-tape-side,
    .ob-tape-row.sell .ob-tape-px,
    .color-ask,
    .ob-wall-chip.ask .ob-wall-px,
    .ob-wall-chip.ask .ob-wall-dist
  ) {
  color: var(--negative);
}

/* Analytical views and the manual journal */
#workspace :is(.card, .market-guide) {
  border-radius: 14px;
  border-color: var(--line);
  box-shadow: none;
}
#workspace .market-guide {
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
}
#workspace .workflow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
#workspace .workflow-grid > .execution-panel,
#workspace .workflow-grid > .oracle-panel {
  max-width: 100%;
  width: 100%;
  padding: 18px 18px 16px;
}
#workspace .workspace-compact-card {
  border-radius: 14px;
  box-shadow: none;
}
#workspace .workspace-compact-card h2 {
  font-size: 19px;
  margin-bottom: 0;
}
#workspace .workspace-compact-card .panel-heading h2 {
  font-size: 20px;
}
#workspace .workflow-grid > .execution-panel .panel-heading,
#workspace .workflow-grid > .oracle-panel .panel-heading {
  margin-bottom: 10px;
}
#workspace .workflow-grid > .execution-panel .small,
#workspace .workflow-grid > .oracle-panel .small {
  line-height: 1.45;
}
#workspace .workflow-grid .execution-panel .plan-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#workspace .workflow-grid .execution-panel .plan-fields label input {
  min-width: 0;
  width: 100%;
}
#workspace .workflow-grid .execution-panel .plan-fields label {
  min-width: 0;
  margin-bottom: 0;
}
#workspace .workflow-grid .execution-panel .plan-fields.levels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#workspace .workflow-grid .execution-panel .amount-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  max-width: 100%;
}
#workspace .workflow-grid .execution-panel .amount-presets button {
  min-height: 34px;
  padding: 6px 4px;
  min-width: 0;
  justify-content: center;
}
#workspace .execution-panel .plan-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(118px, .55fr);
  gap: 8px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
#workspace .execution-panel .plan-result-item {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
}
#workspace .execution-panel .plan-result-item small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
}
#workspace .execution-panel .plan-result-item strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
#workspace .execution-panel .plan-result-item.negative strong { color: var(--negative); }
#workspace .execution-panel .plan-result-item.positive strong { color: var(--positive); }
#workspace .metric-grid {
  gap: 12px;
  margin: 16px 0;
}
#workspace .metric-grid > div {
  padding: 12px 0 0;
  min-width: 0;
}
#workspace .metric-grid strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
#workspace .metric-grid span {
  margin-bottom: 6px;
}
#workspace #guide-cards.guide-grid .guide-card p {
  margin-top: 4px;
  margin-bottom: 4px;
}
#workspace .workflow-grid > .card > p.eyebrow,
#workspace .workflow-grid > .card > h2,
#workspace .execution-panel p.small {
  margin-bottom: 8px;
}
#workspace .workflow-grid .panel-heading + p.small,
#workspace .workflow-grid .panel-heading + p.small + p.small {
  margin-bottom: 10px;
}
#workspace .workspace-diagnostics {
  padding: 10px 12px 12px;
  --diag-border: rgba(255, 255, 255, 0.16);
  --diag-gap: 10px;
}
#workspace .workspace-diagnostics__summary {
  font-size: 13px;
  margin-bottom: 10px;
  cursor: pointer;
}
#workspace .workspace-diagnostics > .workspace-analysis-grid {
  margin-top: 10px;
}
#workspace .workspace-diagnostics .compact-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
#workspace .workspace-diagnostics .compact-heading .eyebrow {
  margin: 0 0 3px;
}
#workspace .workspace-diagnostics .compact-heading h2 {
  margin: 0;
  font-size: 17px;
}
#workspace .compact-mb {
  margin-top: 0;
  margin-bottom: 8px;
}
#workspace .compact-mb-0 {
  margin: 0;
}
#workspace .compact-gap {
  margin: 4px 0 12px;
}
#workspace .compact-block {
  margin: 12px 0 10px;
  border-top: 1px solid var(--line);
  padding-top: 11px;
}
#workspace .workspace-diagnostics .compact-grid {
  margin: 12px 0 0;
  gap: 10px;
}
#workspace .workspace-diagnostics .metric-grid > div {
  padding: 10px 0 0;
}
#workspace .workspace-diagnostics .metric-grid span {
  margin-bottom: 4px;
}
#workspace .workspace-diagnostics .metric-grid strong {
  font-size: 18px;
}
#workspace .workspace-diagnostics .compact-bias-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 4px;
}
#workspace .workspace-diagnostics .compact-bias-heading strong {
  font-size: 13px;
}
#workspace .workspace-diagnostics .compact-note {
  margin-top: 12px;
  border-radius: 0;
  padding: 12px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
}
#workspace .workspace-diagnostics .compact-note h3 {
  margin: 0 0 6px;
  font-size: 13px;
}
#workspace .workspace-diagnostics .compact-note summary {
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
#workspace .workspace-diagnostics .compact-line {
  margin: 8px 0 0;
  line-height: 1.5;
}
#workspace .compact-pill {
  font-size: 11px;
}
#workspace .compact-calculator {
  width: 100%;
}
#workspace .compact-calculator .panel-heading {
  align-items: flex-start;
}
#workspace .compact-calculator .panel-heading > div {
  min-width: 0;
}
#workspace .compact-calculator .compact-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  flex-wrap: wrap;
}
#workspace .compact-calculator .compact-presets {
  margin-bottom: 10px;
}
#workspace .compact-calculator .amount-control {
  margin: 8px 0 12px;
  padding: 10px 12px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
}
#workspace .compact-calculator .amount-control__header,
#workspace .compact-calculator .amount-control__summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
#workspace .compact-calculator .amount-control__header {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}
#workspace .compact-calculator .amount-control__header strong { color: var(--text); }
#workspace .compact-calculator #plan-capital-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
#workspace .compact-calculator #plan-capital-slider:disabled { cursor: not-allowed; opacity: .45; }
#workspace .compact-calculator .amount-control__status { min-height: 17px; color: var(--muted); font-size: 12px; line-height: 1.35; }
#workspace .compact-calculator .amount-control__account { margin: 8px 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 11px; }
#workspace .compact-calculator .amount-control__account summary { cursor: pointer; color: var(--text); font-weight: 650; }
#workspace .compact-calculator .amount-control__account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
#workspace .compact-calculator .amount-control__account-grid span { min-width: 0; }
#workspace .compact-calculator .amount-control__account-grid small,
#workspace .compact-calculator .amount-control__account-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#workspace .compact-calculator .amount-control__account-grid small { font-size: 10px; }
#workspace .compact-calculator .amount-control__account-grid strong { margin-top: 2px; color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
#workspace .compact-calculator .amount-control__account-assets { margin: 8px 0 0; line-height: 1.35; }
#workspace .compact-calculator .amount-control__refresh { align-self: flex-start; padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--accent); font-size: 12px; font-weight: 650; cursor: pointer; }
#workspace .compact-calculator .amount-control__refresh:disabled { cursor: wait; opacity: .62; }
#workspace .compact-calculator .amount-control__ticks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
#workspace .compact-calculator .amount-control__ticks span:nth-child(2),
#workspace .compact-calculator .amount-control__ticks span:nth-child(3),
#workspace .compact-calculator .amount-control__ticks span:nth-child(4) { text-align: center; }
#workspace .compact-calculator .amount-control__ticks span:last-child { text-align: right; }
#workspace .compact-calculator .amount-control__summary {
  flex-wrap: wrap;
  margin: 10px 0;
  color: var(--muted);
  font-size: 12px;
}
#workspace .compact-calculator .amount-control__summary strong { color: var(--text); font-variant-numeric: tabular-nums; }
#workspace .compact-calculator .amount-control .compact-presets { margin: 0; }
#workspace .compact-calculator .leverage-picker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin: -2px 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
}
#workspace .compact-calculator .leverage-picker button {
  min-width: 0;
  min-height: 30px;
  padding: 4px 2px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#workspace .compact-calculator .leverage-picker button:hover,
#workspace .compact-calculator .leverage-picker button.is-selected {
  background: var(--text);
  color: var(--card);
}
#workspace .compact-calculator .leverage-picker button:disabled,
#workspace .compact-calculator .leverage-picker button:disabled:hover {
  background: transparent;
  color: var(--muted);
  opacity: .42;
  cursor: not-allowed;
}
#workspace .compact-calculator #plan-result {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(56,189,248,0.06);
  border: 1px solid rgba(56,189,248,0.25);
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
}

/* The calculator starts with the few values needed to make a plan.  Account
   diagnostics and the explanation stay available, but do not consume the
   whole screen before the user asks for them. */
#workspace .workspace-diagnostics__more,
#workspace .calculator-method {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
#workspace .workspace-diagnostics__more > summary,
#workspace .calculator-method > summary {
  min-height: 34px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  align-content: center;
}
#workspace .calculator-method > p { margin: 6px 0 0; line-height: 1.45; }
#workspace .compact-calculator .amount-control__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
#workspace .compact-calculator .amount-control__actions .compact-presets {
  flex: 1 1 auto;
}
#workspace .compact-calculator .amount-control__account-note {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.4;
}
#workspace .compact-calculator .amount-control.is-unavailable #plan-capital-slider,
#workspace .compact-calculator .amount-control.is-unavailable .amount-control__ticks {
  display: none;
}
#workspace .compact-calculator .amount-control.is-unavailable .amount-control__header {
  margin-bottom: 3px;
}
#workspace .compact-calculator .amount-control.is-unavailable .amount-control__summary {
  margin: 6px 0;
}

@media (max-width: 800px) {
  #workspace .workspace-diagnostics > .workspace-analysis-grid { gap: 6px; }
  #workspace .workspace-diagnostics .oracle-panel { padding-bottom: 8px !important; }
  #workspace .workspace-diagnostics .compact-bias-heading { margin: 6px 0 3px; }
  #workspace .workspace-diagnostics .compact-gap { margin: 3px 0 6px; }
  #workspace .workspace-diagnostics__more { margin-top: 7px; padding-top: 7px; }
  #workspace .workspace-diagnostics__more > summary { min-height: 32px; }
  #workspace .compact-calculator { padding-top: 8px !important; }
  #workspace .compact-calculator .panel-heading { margin-bottom: 4px !important; }
  #workspace .compact-calculator .panel-heading h2 { font-size: 18px !important; }
  #workspace .compact-calculator .calculator-method { margin-top: 4px; padding-top: 4px; }
  #workspace .compact-calculator .plan-fields,
  #workspace .compact-calculator .plan-fields.levels {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  #workspace .compact-calculator .plan-fields label { font-size: 12px; }
  #workspace .compact-calculator .plan-fields :is(input, select) { min-height: 40px; padding: 7px 9px; font-size: 14px; }
  #workspace .compact-calculator .amount-control { margin: 6px 0 8px; padding: 8px 10px; border-radius: 10px; }
  #workspace .compact-calculator .amount-control__status { min-height: 0; font-size: 11px; line-height: 1.35; }
  #workspace .compact-calculator .amount-control__actions { align-items: stretch; }
  #workspace .compact-calculator .amount-control__refresh { min-height: 34px; white-space: nowrap; }
  #workspace .compact-calculator .amount-control__actions .compact-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  #workspace .compact-calculator .amount-control__actions .compact-presets button { min-height: 34px; padding: 4px 2px; font-size: 13px; }
  #workspace .compact-calculator .leverage-picker { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 2px 0 5px; }
  #workspace .compact-calculator .leverage-picker button { min-height: 28px; }
  #workspace .compact-calculator #plan-leverage-help { display: none; }
  #workspace .compact-calculator #plan-size { margin: 5px 0; font-size: 11px; line-height: 1.35; }
  #workspace .compact-calculator .compact-actions { margin: 8px 0; gap: 6px; }
  #workspace .compact-calculator .compact-actions .button { min-height: 38px; font-size: 12px; padding: 6px 8px; }
  #workspace .compact-calculator #plan-result { margin: 8px 0; padding: 8px 10px; }
}
@media (max-width: 980px) {
  #workspace .compact-calculator .panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  #workspace .compact-calculator .panel-heading .compact-pill {
    justify-self: start;
    max-width: 100%;
    white-space: normal;
  }
}
#workspace .workspace-diagnostics .strategy-note {
  margin-top: 12px !important;
  padding: 12px 0 0;
}
#workspace .workflow-grid .risk-calibrator-note {
  line-height: 1.4;
}
#workspace .guide-grid {
  gap: 12px;
}
#workspace .guide-card {
  background: var(--field) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 16px !important;
}
#workspace .guide-card .button {
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}
#workspace .guide-card .button:hover {
  background: var(--workspace-soft);
  border-color: var(--accent);
}
#workspace :is(.chart-layout, .two-columns) {
  gap: 18px;
}
#workspace #panel-history .card {
  padding: 24px;
}
#workspace :is(#panel-history, .okx-cust-positions-card, .cg-table-wrapper) th {
  background: var(--field);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
#workspace :is(#panel-history, .okx-cust-positions-card, .cg-table-wrapper) td {
  font-variant-numeric: tabular-nums;
}
#workspace :is(#panel-history, .okx-cust-positions-card) .empty {
  padding: 40px 20px;
  color: var(--muted);
}

/* Heatmaps, liquidation matrix and legends */
#workspace :is(.ob-heatmap-card, .cg-suite-card) {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}
#workspace .cg-suite-card {
  padding: 22px;
}
#workspace :is(.ob-heatmap-header, .ob-heatmap-footer) {
  padding: 18px;
  background: var(--card);
  border-color: var(--line);
}
#workspace .ob-heatmap-title-box {
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
#workspace .ob-heatmap-title-box h2 {
  line-height: 1.5;
}
#workspace .ob-heatmap-badge {
  background: var(--workspace-soft);
  border-color: var(--line);
  color: var(--accent);
}
#workspace .ob-heatmap-controls {
  gap: 8px;
}
#workspace :is(.ob-layer-btn, .ob-guide-toggle-btn, .ob-fs-btn) {
  min-height: 34px;
  color: var(--muted);
  border-radius: 6px;
}
#workspace .ob-layer-btn.active {
  color: var(--accent);
  background: var(--workspace-soft);
}
#workspace :is(.ob-heatmap-guide-box, .ob-guide-intro-banner, .ob-guide-card, .ob-strat-card) {
  background: var(--field);
  border-color: var(--line);
  box-shadow: none;
}
#workspace .ob-heatmap-guide-box {
  border-radius: 0;
}
#workspace
  :is(.ob-guide-desc, .ob-card-subtitle, .ob-strat-expl, .ob-guide-card p, .ob-strat-card p) {
  color: var(--muted);
  line-height: 1.65;
}
#workspace :is(.ob-guide-title, .ob-guide-card h3, .ob-strat-card h4, .ob-strategy-title) {
  color: var(--text);
}
#workspace :is(.ob-color-indicator, .ob-dot) {
  box-shadow: none;
}
#workspace :is(.color-wall, .ob-wall-amt) {
  color: var(--workspace-warning);
}
#workspace .color-price {
  color: var(--workspace-blue);
}
#workspace .ob-wall-chip {
  background: var(--field);
  border-color: var(--line);
}
#workspace .cg-suite-heading {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.6px;
}
#workspace .cg-mode-btn {
  min-height: 36px;
  font-weight: 600;
}
#workspace .cg-mode-btn.active {
  box-shadow: none;
  background: var(--accent);
  color: var(--accent-ink);
}
#workspace :is(.cg-symbol-select, .cg-table-search-input, .cg-table-sort-select) {
  background: var(--field);
  color: var(--text);
  border-color: var(--line);
  border-radius: 8px;
  min-height: 40px;
}
#workspace .cg-coin-card {
  background: var(--field);
  border-color: var(--line);
  border-radius: 11px;
  box-shadow: none;
}
#workspace .cg-coin-card:hover {
  background: var(--workspace-soft);
  border-color: var(--accent);
  transform: none;
}
#workspace .cg-glass-tooltip {
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
  box-shadow: var(--workspace-shadow);
  border-radius: 10px;
}
#workspace :is(.cg-tt-label, .cg-tt-date, .cg-coin-name) {
  color: var(--muted);
}
#workspace :is(.cg-tt-val, .cg-coin-price, .cg-coin-liq-sum, .cg-tt-header) {
  color: var(--text);
}
#workspace .cg-matrix-table td {
  padding-block: 14px;
}

/* Screener: quiet summary cards and readable rows */
.screener-hero {
  margin: 16px 0 32px;
  align-items: flex-end;
}
.screener-hero h1 {
  max-width: 800px;
  letter-spacing: -1.7px;
  font-weight: 600;
}
.screener-hero .eyebrow {
  color: var(--accent);
}
.screener-highlights-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.highlight-card {
  padding: 22px;
  gap: 18px;
  border-radius: 13px;
  position: relative;
}
.highlight-card:is(.gainer-card, .loser-card, .vol-card, .volatility-card) {
  border-left: 1px solid var(--line);
  border-top: 2px solid var(--line);
}
.highlight-card.gainer-card {
  border-top-color: var(--positive);
}
.highlight-card.loser-card {
  border-top-color: var(--negative);
}
.highlight-card.vol-card {
  border-top-color: var(--workspace-blue);
}
.highlight-card.volatility-card {
  border-top-color: var(--workspace-warning);
}
.highlight-card:hover {
  transform: none;
  box-shadow: none;
  background: var(--workspace-soft);
  border-color: var(--line);
}
.highlight-card .compact {
  background: transparent;
  min-height: 38px;
}
.highlight-card .mono {
  overflow-wrap: anywhere;
}
.screener-toolbar {
  padding: 22px;
  border-radius: 13px;
}
.screener-toolbar .market-filters {
  gap: 14px;
}
.pill-container {
  gap: 7px;
}
.pill-btn {
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 12px;
}
.pill-btn.active {
  color: var(--accent);
  background: var(--workspace-soft);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.screener-table {
  font-variant-numeric: tabular-nums;
}
.screener-table th {
  padding: 15px 18px;
  background: var(--field);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.06em;
}
.screener-table td {
  padding: 17px 18px;
}
.screener-table tbody tr:hover {
  background: var(--workspace-soft);
}
.screener-table .coin-cell {
  gap: 12px;
}
.fav-star-btn {
  min-width: 32px;
  min-height: 32px;
  border-radius: 7px;
}
.fav-star-btn:hover {
  transform: none;
  background: var(--field);
}
.fav-star-btn.active {
  color: var(--workspace-warning);
}
.screener-trade-btn {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 8px;
}
.screener-trade-btn:hover {
  background: var(--accent);
  color: var(--accent-ink);
  transform: none;
}
.change-pill {
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
}
.change-pill.positive {
  background: color-mix(in srgb, var(--positive) 11%, transparent);
}
.change-pill.negative {
  background: color-mix(in srgb, var(--negative) 11%, transparent);
}
.bot-badge {
  font-size: 11px;
  border-radius: 5px;
}
.bot-badge.scalping {
  color: var(--workspace-warning);
}
.bot-badge.daytrading,
.quote-pill.eur {
  color: var(--workspace-blue);
}
.bot-badge.grid_bot {
  color: var(--positive);
}
.range-thumb {
  box-shadow: none;
  width: 8px;
  height: 8px;
}

/* Dialogs share the site surface in both themes; hidden states remain owned by JS. */
:is(.tr-modal-backdrop, .okx-lev-modal-backdrop, .trade-concept-modal) {
  background: rgb(4 14 19 / 62%);
  backdrop-filter: blur(7px);
}
:is(.tr-modal-card, .okx-lev-modal-box, .trade-concept-modal-dialog) {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--workspace-shadow);
  max-height: 90dvh;
}
.tr-modal-card {
  padding: 28px;
}
.tr-modal-header {
  padding-bottom: 20px;
  border-color: var(--line);
}
:is(.tr-modal-close, .trade-concept-modal-close) {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--field);
  color: var(--muted);
  flex: 0 0 36px;
}
.tr-form-group {
  gap: 8px;
  margin-bottom: 20px;
}
.tr-form-group :is(input:not([type="radio"]):not([type="checkbox"]), select) {
  min-height: 46px;
  background: var(--field);
  color: var(--text);
  border-color: var(--line);
  border-radius: 9px;
}
.tr-form-group :is(input, select):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
:is(.tr-mode-option, .tr-dir-chip) {
  padding: 14px;
  background: var(--field);
  border-color: var(--line);
  border-radius: 10px;
}
:is(.tr-mode-option, .tr-dir-chip).active {
  border-color: var(--accent);
  background: var(--workspace-soft);
}
.tr-mode-option.live-active {
  border-color: var(--negative);
  background: color-mix(in srgb, var(--negative) 8%, var(--card));
}
.tr-mode-option small {
  font-size: 12px;
  line-height: 1.5;
}
.tr-notice-box {
  padding: 14px;
  background: color-mix(in srgb, var(--workspace-warning) 6%, var(--card));
  border-color: color-mix(in srgb, var(--workspace-warning) 28%, var(--line));
  line-height: 1.6;
}
.tr-notice-box strong {
  color: var(--workspace-warning);
}
.tr-modal-actions {
  gap: 10px;
  padding-top: 4px;
}
.tr-modal-card .strategy-card {
  border-radius: 10px !important;
  padding: 14px 10px !important;
}
.tr-modal-card .strategy-card.active {
  border-color: var(--accent) !important;
  background: var(--workspace-soft) !important;
}
#modalAccountBalanceDetails > div {
  background: var(--card) !important;
  color: var(--text);
  border-color: var(--line) !important;
  border-radius: 18px !important;
  box-shadow: var(--workspace-shadow) !important;
}
#modalAccountBalanceDetails #modalBalTotalEquity {
  color: var(--text) !important;
}
#modalCurrentLevDisplay {
  color: var(--accent) !important;
}
#modalLevRangeSlider {
  accent-color: var(--accent) !important;
}
.okx-lev-modal-box .btn-lev-tier {
  background: var(--field);
  border-color: var(--line);
  color: var(--text);
  min-height: 42px;
}
.okx-lev-modal-box .btn-lev-tier.active {
  background: var(--workspace-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: none;
}
.okx-lev-modal-box .btn-lev-tier.active small {
  color: var(--muted) !important;
}
.trade-concept-floating-tooltip {
  background: var(--card);
  color: var(--text);
  border-color: var(--line);
  box-shadow: var(--workspace-shadow);
  border-radius: 10px;
}

/* Compatibility for legacy inline paint declarations in auxiliary content. */
:root[data-theme="light"]
  :is(#workspace, .tr-modal-card, .quick-coin-dropdown, .highlight-card)
  :is(
    [style*="color:#fff"],
    [style*="color: #fff"],
    [style*="color:#f8fafc"],
    [style*="color: #f8fafc"],
    [style*="color:#e2e8f0"],
    [style*="color: #e2e8f0"]
  ) {
  color: var(--text) !important;
}
:root[data-theme="light"]
  :is(#workspace, .tr-modal-card, .quick-coin-dropdown, .highlight-card)
  :is(
    [style*="color:#94a3b8"],
    [style*="color: #94a3b8"],
    [style*="color:#cbd5e1"],
    [style*="color: #cbd5e1"]
  ) {
  color: var(--muted) !important;
}
:root[data-theme="light"]
  :is(#workspace, .tr-modal-card, .quick-coin-dropdown, .highlight-card)
  :is(
    [style*="color:#38bdf8"],
    [style*="color: #38bdf8"],
    [style*="color:#60a5fa"],
    [style*="color: #60a5fa"]
  ) {
  color: var(--workspace-blue) !important;
}
:root[data-theme="light"]
  :is(#workspace, .tr-modal-card, .quick-coin-dropdown)
  :is(
    [style*="background:#1e293b"],
    [style*="background: #1e293b"],
    [style*="background:#0f172a"],
    [style*="background: #0f172a"],
    [style*="background:#161b22"],
    [style*="background: #161b22"]
  ) {
  background: var(--field) !important;
}

/* Responsive: preserve analytical context and confine wide tables to their scrollers. */
@media (min-width: 1120px) {
  #workspace .okx-cust-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(345px, 0.95fr);
    align-items: start;
  }
  #workspace .workflow-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (max-width: 1119px) {
  #workspace .okx-cust-workspace-grid {
    display: flex;
    flex-direction: column;
  }
  #workspace .okx-cust-right-pane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .screener-highlights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #workspace .workflow-grid {
    grid-template-columns: 1fr;
  }
  #workspace .terminal-top {
    align-items: flex-start;
  }
  #workspace .terminal-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
@media (max-width: 760px) {
  main:has(#workspace) {
    padding: 18px 16px 44px;
  }
  #workspace .terminal-top {
    flex-direction: column;
    align-items: stretch;
  }
  #workspace .workflow-grid > .execution-panel .amount-presets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #workspace .compact-calculator .leverage-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 14px;
  }
  #workspace .compact-calculator .amount-control__account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #workspace .compact-calculator .amount-control__account-grid span:first-child {
    grid-column: 1 / -1;
  }
  #workspace .workflow-grid > .execution-panel .plan-result-grid,
  #workspace .workflow-grid > .execution-panel .plan-fields {
    grid-template-columns: 1fr;
  }
  #workspace .workspace-tabs {
    display: flex !important;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;
    gap: 4px !important;
    padding: 5px !important;
    margin-bottom: 16px !important;
    scrollbar-width: thin;
  }
  #workspace .workspace-tabs button {
    flex: 0 0 auto;
    min-width: 104px;
    padding: 10px 14px !important;
    min-height: 44px;
  }
  #workspace .okx-cust-workspace-grid {
    padding: 10px;
    gap: 12px;
  }
  #workspace :is(.okx-cust-left-pane, .okx-cust-right-pane) {
    gap: 12px;
  }
  #workspace .okx-cust-right-pane {
    display: flex;
    flex-direction: column;
  }
  #workspace .okx-cust-intel-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  #workspace .okx-cust-positions-card {
    margin: 0 10px 10px;
    padding: 14px !important;
  }
  #workspace .ob-heatmap-controls {
    align-items: flex-start;
  }
  #workspace :is(.ob-zoom-group, .ob-layer-group) {
    flex-wrap: wrap;
  }
  #workspace :is(.cg-suite-card, .market-guide, .oracle-panel) {
    padding: 18px;
  }
  #workspace .cg-suite-title-group {
    min-width: 0;
  }
  #workspace .cg-matrix-tools {
    flex-wrap: wrap;
  }
  #workspace .cg-table-search-input {
    min-width: 0;
    width: 100%;
  }
  #workspace .ob-heatmap-title-box h2 {
    font-size: 14px !important;
  }
  #workspace .workflow-grid .execution-panel {
    width: 100%;
    max-width: 100%;
  }
  #workspace .workflow-grid .execution-panel .plan-fields {
    grid-template-columns: 1fr;
  }
  #workspace .execution-panel .plan-result-grid {
    grid-template-columns: 1fr;
  }
  #workspace .execution-panel .plan-result-item.ratio {
    grid-column: auto;
  }
  .screener-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .screener-toolbar {
    padding: 16px;
  }
  .screener-table :is(th, td) {
    padding: 14px;
  }
  .highlight-card {
    padding: 18px;
  }
}
@media (max-width: 480px) {
  main:has(#workspace) {
    padding: 14px 12px 36px !important;
  }
  #workspace .terminal-actions {
    gap: 6px !important;
  }
  #workspace .terminal-actions .button {
    min-height: 44px;
    font-size: 11px !important;
    padding: 8px 6px !important;
  }
  #workspace .terminal-top .eyebrow {
    display: block !important;
  }
  #workspace .terminal-top .quick-symbol-trigger {
    max-width: 100%;
    flex-wrap: wrap;
  }
  #workspace .quick-symbol-selector {
    max-width: 100%;
  }
  #workspace .qss-name {
    overflow-wrap: anywhere;
  }
  #workspace .quote-line strong {
    font-size: 28px !important;
  }
  #workspace .okx-cust-header {
    padding: 12px;
  }
  #workspace .okx-cust-workspace-grid {
    padding: 8px;
  }
  #workspace :is(.okx-cust-left-pane .okx-cust-minichart-wrap, .okx-cust-intel-bar) {
    padding: 12px;
  }
  #workspace .okx-cust-right-pane .okx-cust-order-col {
    padding: 14px;
  }
  #workspace .okx-cust-intel-tools {
    width: 100%;
  }
  #workspace .chart-next-levels {
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 6px;
    padding-top: 8px;
  }
  #workspace .okx-cust-intel-act-btn {
    flex: 1 1 auto;
  }
  #workspace .okx-cust-intel-val {
    font-size: 13px;
  }
  #workspace .okx-cust-tf-group {
    flex-wrap: wrap;
  }
  #workspace .okx-chart-mode-pills {
    flex-wrap: wrap;
  }
  #workspace .cg-mode-switcher {
    width: 100%;
  }
  #workspace .cg-mode-btn {
    flex: 1 1 auto;
    padding-inline: 8px;
  }
  #workspace .cg-suite-heading {
    font-size: 19px;
  }
  #workspace .ob-heatmap-header {
    padding: 14px;
  }
  #workspace .ob-heatmap-footer {
    padding: 14px;
  }
  #workspace .ob-guide-grid {
    grid-template-columns: 1fr;
  }
  .screener-highlights-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tr-modal-backdrop {
    padding: 10px;
  }
  .tr-modal-card {
    padding: 20px;
    border-radius: 14px;
  }
  .tr-mode-toggle {
    grid-template-columns: 1fr;
  }
  .tr-modal-card .autotrade-strategy-cards {
    grid-template-columns: 1fr !important;
  }
  .tr-modal-actions {
    flex-wrap: wrap;
  }
  .tr-modal-actions .button {
    flex: 1 1 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  #workspace *,
  .highlight-card,
  .screener-trade-btn,
  .tr-modal-card {
    animation: none !important;
    transition: none !important;
  }
}