/* trAider iOS Pro visual system — high contrast, precise, calm. */
:root {
  --bg: #06080c;
  --card: #11151b;
  --field: #181e26;
  --line: #2a3442;
  --text: #f7f9fc;
  --muted: #9aa7b8;
  --accent: #0a84ff;
  --accent-ink: #ffffff;
  --positive: #30d158;
  --negative: #ff453a;
  --warning: #ff9f0a;
  --trade-ink: #07100a;
  --accent-soft: #0a84ff1f;
  --chart-bg: #0a0e14;
  --chart-grid: #293342;
  --chart-label: #a5b1c2;
  --chart-violet: #bf5af2;
  --chart-orange: #ff9f0a;
  --chart-cyan: #64d2ff;
  --shadow: 0 20px 60px #00000042, 0 1px 0 #ffffff0a inset;
  --shadow-small: 0 8px 24px #0000002e, 0 1px 0 #ffffff0a inset;
  --radius: 18px;
  --radius-small: 12px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f2f5f9;
  --card: #ffffff;
  --field: #f6f8fb;
  --line: #d6dde8;
  --text: #11151c;
  --muted: #5d6878;
  --accent: #007aff;
  --accent-ink: #ffffff;
  --positive: #178c3b;
  --negative: #d92d28;
  --warning: #b96800;
  --trade-ink: #ffffff;
  --accent-soft: #007aff14;
  --chart-bg: #ffffff;
  --chart-grid: #d9e0ea;
  --chart-label: #526071;
  --chart-violet: #8944ab;
  --chart-orange: #b96800;
  --chart-cyan: #087aa3;
  --shadow: 0 22px 60px #1a386316, 0 1px 0 #ffffff inset;
  --shadow-small: 0 8px 26px #1a386312, 0 1px 0 #ffffff inset;
  color-scheme: only light;  /* see redesign.css: stops forced darkening of the light theme */
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 82% -8%, #0a84ff16, transparent 28rem),
    var(--bg);
  color: var(--text);
  letter-spacing: -.006em;
}

:root[data-theme="light"] body {
  background:
    radial-gradient(circle at 82% -8%, #007aff0d, transparent 32rem),
    var(--bg);
}

button, a, input, select, textarea, summary {
  transition: color .22s ease, background-color .22s ease, border-color .22s ease,
    box-shadow .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #0a84ff70;
  outline-offset: 3px;
}

.header, .workspace-sidebar, .mobile-dock {
  background: color-mix(in srgb, var(--card) 96%, transparent);
  border-color: var(--line);
}

.workspace-sidebar { box-shadow: 1px 0 0 #ffffff08; }
.header { box-shadow: 0 1px 0 #ffffff08; }

.brand-emblem {
  border-radius: 10px;
  background: var(--text);
  color: var(--card);
  box-shadow: 0 4px 16px #00000024;
}

.wordmark-period, .lime { color: var(--accent); }

.card, .form-card, .hero-panel, .account-panel, .landing-chart,
.okx-customer-shell, .okx-cust-minichart-wrap, .okx-multi-analytics-hub {
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow-small);
}

.button, .icon-button, .text-button, [role="tab"], .native-layer,
.okx-mode-pill, .okx-cust-tf-btn, .qms-btn, .qqs-btn {
  -webkit-tap-highlight-color: transparent;
}

.button, .icon-button, .native-layer, .okx-mode-pill, .okx-cust-tf-btn,
.qms-btn, .qqs-btn {
  border-radius: var(--radius-small);
  font-weight: 650;
}

.button.primary, .primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);
}

.button.primary:hover, .primary:hover { filter: none; transform: translateY(-1px); }
.button.primary:active, .primary:active { transform: scale(.975); }
.button.secondary, .secondary, .icon-button {
  background: var(--field);
  border-color: var(--line);
  color: var(--text);
}

.button.secondary:hover, .secondary:hover, .icon-button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--field) 88%, var(--accent));
}

input:not([type="hidden"]):not([type="checkbox"]), select, textarea {
  border-radius: 12px;
  border-color: var(--line);
  background: var(--field);
  box-shadow: 0 1px 0 #ffffff08 inset;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.sidebar-nav a, .sidebar-nav button, .mobile-dock a, .mobile-dock button {
  border-radius: 11px;
}

.sidebar-nav a[aria-current="page"], .sidebar-nav button[aria-expanded="true"],
.mobile-dock [aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.ui-icon, .terminal-action-icon, .native-control-icon {
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.native-control-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.qss-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--field) !important;
  border: 1px solid var(--line);
  color: var(--text) !important;
  font-size: 14px !important;
  filter: grayscale(1);
}

.notice {
  border-radius: 13px;
  border-color: var(--line);
  background: var(--field);
}

.notice.loading { border-left: 3px solid var(--accent); }
.notice.error { border-left: 3px solid var(--negative); }

/* Terminal shell */
#workspace { max-width: 100%; }
#workspace .terminal-top {
  padding: 18px 20px;
  margin: 18px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-small);
}

#workspace .workspace-tabs {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--field);
  box-shadow: none;
}

#workspace .workspace-tabs button {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 10px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
}

#workspace .workspace-tabs button[aria-selected="true"] {
  color: var(--text);
  background: var(--card);
  box-shadow: 0 3px 12px #0000001f, 0 0 0 1px var(--line);
}

.okx-customer-shell {
  border-radius: 22px;
  overflow: clip;
  border: 1px solid var(--line);
}

.okx-cust-header, .okx-cust-tf-row, .okx-cust-intel-bar,
.okx-multi-analytics-header {
  border-color: var(--line) !important;
  background: var(--card) !important;
}

.okx-cust-workspace-grid { gap: 14px; }
.okx-cust-left-pane, .okx-cust-right-pane { min-width: 0; }

.okx-cust-minichart-wrap {
  padding: 12px;
  border-radius: 17px;
  overflow: hidden;
}

.native-chart-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.okx-chart-mode-pills {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
}

.okx-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}

.okx-mode-pill.active {
  color: var(--text);
  background: var(--card);
  box-shadow: 0 2px 8px #00000024, 0 0 0 1px var(--line);
}

.native-chart-signature {
  color: var(--muted);
  font: 650 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.native-indicator-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 9px 2px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.native-indicator-bar::-webkit-scrollbar { display: none; }
.native-layer {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .05em;
}

.native-layer.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent-soft);
  color: var(--accent);
}

.native-chart-help {
  margin-left: auto;
  white-space: nowrap;
  color: var(--muted);
  font-size: 9px;
}

.native-chart-wrap {
  position: relative;
  width: 100%;
  height: 460px !important;
  min-height: 360px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--chart-bg);
  box-shadow: none;
}

.native-chart-wrap #price-chart { width: 100% !important; height: 100% !important; margin: 0 !important; min-height: 0 !important; }
.traider-chart-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: crosshair;
}

.okx-cust-tf-group {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--field);
}

.okx-cust-tf-btn { min-width: 34px; border: 0 !important; background: transparent !important; }
.okx-cust-tf-btn.active {
  color: var(--text) !important;
  background: var(--card) !important;
  box-shadow: 0 2px 8px #00000024, 0 0 0 1px var(--line);
}

.chart-range-picker {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.chart-range-picker select {
  min-height:32px;
  max-width:108px;
  padding:4px 26px 4px 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--field);
  color:var(--text);
  font:700 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.okx-cust-order-col > *, .okx-cust-orderbook-card, .okx-cust-intel-bar,
.okx-multi-analytics-hub, .okx-analytics-col {
  border-radius: 16px !important;
  border-color: var(--line) !important;
}

.okx-cust-autotrade-widget, #okxBotAdvisorCard,
.okx-cust-account-bar, .okx-cust-intel-details {
  background: var(--field) !important;
  border-color: var(--line) !important;
  background-image: none !important;
}

.okx-cust-ob-depth { opacity: .16; }
.okx-cust-ob-row { min-height: 25px; }
.okx-cust-ob-row:hover { background: var(--accent-soft); }

.okx-cust-change.pos, .positive { color: var(--positive) !important; }
.okx-cust-change.neg, .negative { color: var(--negative) !important; }

/* Clear, single-color icon treatment for legacy emoji containers. */
.btn-analytics-layout, .okx-cust-intel-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 1119px) {
  .native-chart-wrap { height: 420px !important; }
  .native-chart-help { display: none; }
}

@media (max-width: 800px) {
  body { background: var(--bg); }
  .app-shell > main { padding-inline: 12px !important; }
  #workspace { width: 100%; min-width: 0; }
  #workspace .terminal-top {
    width: 100%;
    padding: 14px;
    margin-top: 10px;
    gap: 12px;
  }
  #workspace .workspace-tabs {
    width: 100%;
    margin: 12px 0;
    padding: 3px;
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  #workspace .workspace-tabs button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 10px;
    scroll-snap-align: start;
  }
  .okx-customer-shell { width: 100%; border-radius: 17px; }
  .okx-cust-header { padding: 12px !important; }
  .okx-cust-tf-row {
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .okx-cust-tf-group {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chart-range-picker { width:100%; justify-content:space-between; }
  .chart-range-picker select { width:min(150px, 48vw); max-width:none; }
  .native-chart-controls { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .okx-chart-mode-pills { flex: 0 0 auto; }
  .native-indicator-bar { width: 100%; }
  .native-chart-wrap {
    height: 380px !important;
    min-height: 320px;
    border-radius: 12px;
  }
  .okx-cust-workspace-grid, .okx-analytics-content-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #colLiquidationAnalytics { display: none; }
  .okx-cust-left-pane, .okx-cust-right-pane, .okx-analytics-col { width: 100%; min-width: 0; }
  .okx-cust-price-block { min-width: 0; }
  .okx-cust-live-price { font-size: clamp(22px, 8vw, 31px) !important; }
  .table-scroll { max-width: 100%; }
  .mobile-dock {
    padding: 7px max(8px, env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .mobile-dock { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mobile-dock a, .mobile-dock button { min-width: 0; padding-inline: 2px; font-size: 10px; }
}

/* Keep the planning tools usable without a long vertical detour on phones. */
@media (max-width: 800px) {
  #workspace .workspace-diagnostics > .workspace-analysis-grid { gap: 6px !important; }
  #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) ) !important; 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: 420px) {
  body.app-shell main:has(#workspace) { padding-inline: 4px !important; }
  #workspace .okx-cust-workspace-grid { padding-inline: 4px !important; }
  #workspace .okx-cust-minichart-wrap { padding-inline: 6px !important; }
  #workspace .terminal-top { padding: 12px; }
  .okx-cust-minichart-wrap { padding: 8px; border-radius: 13px; }
  .okx-mode-pill { padding-inline: 8px; }
  .native-chart-wrap { height: 350px !important; min-height: 300px; }
  .native-layer { padding-inline: 8px; }
  .terminal-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .terminal-actions > * { min-width: 0; padding-inline: 8px !important; }
}

@media (max-width: 350px) {
  .native-chart-wrap { height: 330px !important; }
  .native-control-icon { width: 14px; height: 14px; flex-basis: 14px; }
  .okx-mode-pill { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Unified card system: clear borders, consistent 14px radius and balanced padding */
#workspace :is(.okx-cust-minichart-wrap, .okx-cust-intel-bar,
  .okx-multi-analytics-hub, .okx-cust-order-col,
  .okx-cust-autotrade-widget, .ob-heatmap-card, .cg-suite-card) {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--card) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}
#workspace .okx-customer-shell { background: transparent !important; }
#workspace .okx-cust-workspace-grid { padding: 0 !important; gap: 24px !important; }
#workspace .okx-cust-minichart-wrap { padding: 16px !important; }
#workspace .okx-tv-chart-wrap,
#workspace #okxModelChartWrap {
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

#workspace .okx-multi-analytics-hub {
  overflow: hidden;
  margin-bottom: 16px;
}
#workspace .okx-multi-analytics-header {
  padding: 12px 18px !important;
  background: var(--field, rgba(0, 0, 0, 0.03)) !important;
  border-bottom: 1px solid var(--line) !important;
}
#workspace .okx-analytics-content-grid {
  padding: 16px !important;
  gap: 16px !important;
}
#workspace .okx-analytics-col :is(.ob-heatmap-card, .cg-suite-card) {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--field, rgba(0, 0, 0, 0.02)) !important;
  box-shadow: none !important;
}

#workspace .okx-cust-autotrade-widget { padding: 16px !important; }
#workspace #okxBotAdvisorCard { padding: 16px 0 0 !important; background: transparent !important; border-top: 1px solid var(--line) !important; }
#workspace #okxBotAdvisorCard div[style*="border:"] { border: 0 !important; box-shadow: none !important; }
#workspace #okxBotAdvisorCard div[style*="grid-template-columns:1fr 1fr"] > div { background: transparent !important; padding: 8px 0 !important; }
#workspace #okxBotAdvisorCard input[type="range"] { box-shadow: none !important; border: 0 !important; padding: 0 !important; }

#workspace .ob-heatmap-card {
  container-type: inline-size;
  overflow: hidden;
}
#workspace .ob-heatmap-header {
  padding: 14px 18px !important;
  background: var(--field, rgba(0, 0, 0, 0.02)) !important;
  border-bottom: 1px solid var(--line) !important;
}
#workspace .ob-heatmap-title-box { min-width: 0; flex-wrap: wrap; gap: 8px; }
#workspace .ob-heatmap-controls { min-width: 0; max-width: 100%; }
#workspace .ob-heatmap-legend { flex-wrap: wrap; gap: 8px 14px; }
#workspace .ob-heatmap-footer {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
  padding: 16px 18px !important;
  gap: 20px !important;
  background: var(--field, rgba(0, 0, 0, 0.02)) !important;
  border-top: 1px solid var(--line) !important;
}
#workspace .ob-wall-section { min-width: 0; }
#workspace .ob-wall-heading { gap: 8px; font-size: 11px; line-height: 1.5; padding: 0 4px; margin-bottom: 4px; }
#workspace .ob-walls-list { display: grid; gap: 4px; min-width: 0; }
#workspace .ob-wall-chip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  width: 100%; min-width: 0; gap: 8px; padding: 8px 10px;
  border: 0 !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 6px !important; background: transparent !important;
  font-size: 12px !important; text-align: left; transform: none;
}
#workspace .ob-wall-amt { background: transparent !important; color: var(--text); font-size: 11px !important; padding: 0; }

/* Phone layout: panels are separated by space and headings, not nested boxes.
   Borders remain on inputs and controls where they communicate an action. */
@media (max-width: 800px) {
  /* The chart must visually join the phone's black terminal, not sit on a
     charcoal slab.  Price action, grid and labels are drawn above this base. */
  :root[data-theme="dark"] #workspace :is(.native-chart-wrap, .okx-tv-chart-wrap),
  :root[data-theme="dark"] #workspace #price-chart {
    background: #000 !important;
  }
  #workspace .okx-customer-shell,
  #workspace .okx-cust-minichart-wrap,
  #workspace .okx-cust-intel-bar,
  #workspace .okx-multi-analytics-hub {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  #workspace .okx-cust-minichart-wrap { padding: 0 !important; }
  #workspace :is(.native-chart-wrap, .okx-tv-chart-wrap, #okxModelChartWrap) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  #workspace .native-chart-controls { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  #workspace .okx-cust-intel-bar { margin-inline: 0 !important; padding-inline: 2px !important; }
  #workspace .okx-multi-analytics-header { padding-inline: 2px !important; background: transparent !important; }
  #workspace .okx-analytics-content-grid { padding-inline: 2px !important; }
}
#workspace .ob-wall-dist { font-size: 10px; }
#workspace :is(.ob-zoom-group, .ob-size-group, .ob-layer-group) { border: 0; flex-wrap: wrap; max-width: 100%; }
#workspace .ob-heatmap-stage { background: var(--chart-bg); }
@media (max-width: 800px) {
  #workspace .okx-cust-workspace-grid { gap: 16px !important; }
  #workspace .okx-cust-order-col { padding: 14px !important; }
  #workspace .ob-heatmap-stage { height: 320px; min-height: 260px; }
}

/* On a phone the chart itself is the surface.  The surrounding analytics
   blocks use headings and short separators, leaving the largest possible
   canvas without a stack of decorative frames. */
@media (max-width: 800px) {
  #workspace .okx-analytics-content-grid,
  #workspace .okx-analytics-col,
  #workspace :is(.ob-heatmap-card, .cg-suite-card) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #workspace .okx-analytics-content-grid { padding: 10px 0 0 !important; }
  #workspace .okx-analytics-col { padding: 0 !important; }
  #workspace .ob-heatmap-card { overflow: visible !important; }
  #workspace :is(.ob-heatmap-header, .cg-suite-header) {
    padding: 10px 0 !important;
    background: transparent !important;
    border-block: 1px solid var(--line) !important;
  }
  #workspace .ob-heatmap-footer {
    padding: 12px 0 !important;
    background: transparent !important;
    border-bottom: 1px solid var(--line) !important;
  }
  #workspace .ob-heatmap-stage {
    border-radius: 0 !important;
    margin-inline: 0 !important;
  }
}

/* Compact tape: five complete rows, no nested scrolling. */
#workspace #obTradesTape { display:grid; gap:2px; width:100%; max-height:none; overflow:visible; }
#workspace .ob-tape-row { display:grid; grid-template-columns:58px 38px minmax(0,1fr) minmax(48px,.65fr); gap:8px; align-items:center; padding:7px 10px; border-radius:6px; min-width:0; font-variant-numeric:tabular-nums; }
#workspace .ob-tape-row span { min-width:0; font-size:12px; white-space:nowrap; }
#workspace .ob-tape-row .ob-tape-time { font-size:10px; }
#workspace .ob-tape-px, #workspace .ob-tape-sz { text-align:right; }
.chart-history-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; }
.chart-history-controls label { margin:0; }
#workspace #chart-history-date { width:145px; min-height:32px; padding:4px 8px; font-size:12px; background:var(--card); color:var(--text); }
#chart-history-status { flex:1 1 180px; font-size:11px; color:var(--muted); }
.traider-chart-canvas { touch-action:pan-y; cursor:grab; }
.traider-chart-canvas:active { cursor:grabbing; }

/* Phone: use space and short dividers to group reading, not layers of boxes.
   Inputs, tabs and direct controls keep their boundaries because they invite action. */
@media (max-width: 800px) {
  #workspace .terminal-top,
  #workspace .market-brief,
  #workspace .workspace-tabs,
  #workspace .market-guide,
  #workspace .workspace-compact-card,
  #workspace .oracle-panel,
  #workspace .execution-panel {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #workspace .terminal-top { padding: 8px 0 !important; margin-top: 4px !important; }
  #workspace .market-brief { padding: 12px 0 !important; margin-block: 8px !important; }
  #workspace .market-brief p { background: transparent !important; border: 0 !important; padding: 8px 0 !important; }
  #workspace .workspace-tabs { padding: 4px 0 !important; margin-block: 8px !important; border-bottom: 1px solid var(--line) !important; }
  #workspace .market-guide { padding: 10px 0 !important; }
  #workspace .guide-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  #workspace .guide-card:last-child { border-bottom: 0 !important; }
  #workspace .workspace-compact-card { padding: 14px 0 !important; }
  #workspace .workspace-compact-card > :first-child { margin-top: 0 !important; }

  #workspace .market-guide .model-comparison,
  #workspace .workspace-compact-card .compact-block,
  #workspace .workspace-compact-card .strategy-note {
    width: 100% !important;
    margin-inline: 0 !important;
  }

  #workspace .card:has(.amount-control),
  #workspace .card:has(.amount-control) .card-body {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-inline: 0 !important;
  }
}