/* ============================================
   Spot Trading Page - Specific Styles
   Mirrors trade-futures.css layout/patterns
   Uses trade-option.css shared styles
   Color: Buy=var(--app-primary) (cyan) / Sell=var(--app-sell) (amber)
   ============================================ */

/* Grid order & flex sizing (mirrors trade-option.css base + trade-futures.css) */
.trade-top-grid { align-items: start; }

/* Chart: takes remaining space, 700px height */
.spot-chart-card {
  order: 1;
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 700px;
}
.spot-chart-card #spotTvChart {
  width: 100%;
  flex: 1;
  min-height: 400px;
}

/* Order Book: fixed 240px width, matches chart height */
.spot-orderbook {
  order: 2;
  flex: 0 0 240px;
  min-width: 200px;
  height: 700px;
  overflow-y: auto;
}

/* Order Panel: fixed 340px width */
.spot-order-panel {
  order: 3;
  flex: 0 0 340px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
}

/* --- Compact order panel spacing (mirrors futures) --- */
.spot-order-panel { padding: 16px; }
.spot-order-panel .order-side-toggle { margin-bottom: 12px; }
.spot-order-panel .order-side-btn { padding: 8px; font-size: 13px; }
.spot-order-panel .order-type-row { margin-bottom: 10px; }
.spot-order-panel .order-field { margin-bottom: 10px; }
.spot-order-panel .order-field label { margin-bottom: 0; }
.spot-order-panel .order-input { padding: 8px 0; font-size: 14px; }
.spot-order-panel .order-summary { padding: 8px 0; margin-bottom: 10px; }
.spot-order-panel .order-summary-row { padding: 3px 0; }
.spot-order-panel .order-summary-row.total { padding-top: 6px; }
.spot-order-panel .order-submit-btn { padding: 12px; margin-bottom: 8px; font-size: 14px; }
.order-field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.spot-avbl {
  font-size: 11px;
  color: var(--app-text-muted-2);
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
}
.spot-avbl:hover { color: #c0c0d0; }

/* ===== ORDER BOOK COLUMN OVERFLOW FIX ===== */
.spot-orderbook .ob-row {
  font-size: 11px;
  gap: 4px;
  padding: 4px 0;
}
.spot-orderbook .ob-price,
.spot-orderbook .ob-size,
.spot-orderbook .ob-total {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* #527 (ULT-MARGIN-24) adjacent find, 2026-08-31: Spot re-declared the same
   order-book header at 9px, BELOW the 10px the Futures page carried and well
   under the agreed 11px floor for secondary labels. Canh's report was scoped to
   Futures so this node was never in his seven, but it is the same selector and
   the same violation one page over — and leaving it is how this bug came back
   twice already. */
.spot-orderbook .ob-header-row {
  gap: 4px;
  font-size: 11px;
}
.spot-orderbook .ob-spread-row {
  padding: 4px 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.spot-orderbook .ob-mid-price {
  font-size: 14px;
}
.spot-orderbook .ob-spread-val {
  margin-left: auto;
  font-size: 10px;
  color: #5a5a6a;
  white-space: nowrap;
}

/* Contract/Pair Type Tags */
.type-tag.spot { color: var(--app-primary); background: rgba(92, 184, 230, 0.1); }

/* ===== SYMBOL DROPDOWN SELECTOR ===== */
.spot-symbol-selector {
  position: relative;
}

.spot-symbol-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.spot-symbol-btn svg {
  color: #5a5a6a;
  transition: transform 0.2s;
}

.spot-symbol-selector.open .spot-symbol-btn svg {
  transform: rotate(180deg);
}

.spot-symbol-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  max-height: 440px;
  background: #1a1f2e;
  border: 1px solid rgba(var(--app-content-overlay-rgb),0.1);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 100;
  overflow: hidden;
  flex-direction: column;
}

.spot-symbol-selector.open .spot-symbol-dropdown {
  display: flex;
}

.spot-symbol-search {
  width: 100%;
  background: rgba(var(--app-content-overlay-rgb),0.04);
  border: none;
  border-bottom: 1px solid rgba(var(--app-content-overlay-rgb),0.06);
  padding: 12px 14px;
  color: var(--app-text-1);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.spot-symbol-search:focus {
  border-bottom-color: rgba(92,184,230,0.3);
}

.spot-symbol-search::placeholder {
  color: #4a4a5a;
}

.spot-symbol-list {
  flex: 1;
  overflow-y: auto;
  max-height: 380px;
}

.spot-symbol-list::-webkit-scrollbar {
  width: 3px;
}

.spot-symbol-list::-webkit-scrollbar-thumb {
  background: rgba(92, 184, 230, 0.3);
  border-radius: 2px;
}

.spot-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
}

.spot-dd-item:hover {
  background: rgba(var(--app-content-overlay-rgb),0.04);
}

.spot-dd-item.active {
  background: rgba(92,184,230,0.08);
}

.spot-dd-item-symbol {
  font-size: 13px;
  font-weight: 600;
  color: var(--app-text-1);
}

.spot-dd-item-price {
  font-size: 13px;
  color: var(--app-text-muted-3);
  font-variant-numeric: tabular-nums;
}

/* ===== PRICE ROW WITH BBO (from futures) ===== */
.price-row-with-bbo {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.price-row-with-bbo .order-input-wrap { flex: 1; }

/* BBO Button */
.bbo-btn {
  background: rgba(92,184,230,0.08);
  border: 1px solid rgba(92,184,230,0.2);
  color: var(--app-primary);
  font-size: 11px;
  font-weight: 700;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}
.bbo-btn:hover { background: rgba(92,184,230,0.15); border-color: rgba(92,184,230,0.4); color: #7ccbf0; }
.bbo-btn.flash { background: rgba(92,184,230,0.25); }

/* ===== AVAILABLE PAIRS LIST (mirrors Active Contracts) ===== */
.spot-pairs-section { margin-bottom: 16px; }
.pairs-tabs { display: flex; gap: 4px; padding: 8px 16px; border-bottom: 1px solid rgba(var(--app-content-overlay-rgb),0.06); overflow-x: auto; }
.pairs-tab { background: none; border: 1px solid rgba(var(--app-content-overlay-rgb),0.08); color: var(--app-text-muted-2); font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s; white-space: nowrap; font-family: inherit; }
.pairs-tab:hover { background: rgba(var(--app-content-overlay-rgb),0.04); color: #c0c0d0; }
.pairs-tab.active { background: rgba(92,184,230,0.1); border-color: rgba(92,184,230,0.3); color: var(--app-primary); }
.pairs-tab .tab-count { font-size: 10px; color: inherit; opacity: 0.7; margin-left: 2px; }
.pairs-filter-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid rgba(var(--app-content-overlay-rgb),0.06); }
.pairs-show-all-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--app-text-muted-2); cursor: pointer; white-space: nowrap; }
.pairs-search-wrap { padding: 6px 16px; }
.pairs-search { width: 180px; background: rgba(var(--app-content-overlay-rgb),0.04); border: 1px solid rgba(var(--app-content-overlay-rgb),0.08); border-radius: 6px; padding: 6px 12px; font-size: 12px; color: var(--app-text-1); outline: none; font-family: inherit; }
.pairs-search:focus { border-color: rgba(92,184,230,0.3); }
.pairs-search::placeholder { color: #5a5a6a; }
.pairs-scroll { overflow-x: auto; max-height: 500px; overflow-y: auto; }
.pairs-table { min-width: 650px; }
.pairs-loading { padding: 24px; text-align: center; color: #5a5a6a; font-size: 13px; }
.pairs-header { display: grid; grid-template-columns: 2.2fr 1fr 0.8fr 0.8fr 0.8fr 70px; gap: 8px; padding: 8px 16px; font-size: 11px; color: #5a5a6a; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid rgba(var(--app-content-overlay-rgb),0.06); position: sticky; top: 0; background: var(--app-surface-card); z-index: 1; }
.pairs-row { display: grid; grid-template-columns: 2.2fr 1fr 0.8fr 0.8fr 0.8fr 70px; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(var(--app-content-overlay-rgb),0.04); cursor: pointer; transition: background 0.15s; }
.pairs-row:hover { background: rgba(var(--app-content-overlay-rgb),0.02); }
.pairs-row.active { background: rgba(92,184,230,0.04); border-left: 3px solid var(--app-primary); }
.pair-name { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--app-text-1); }
.pair-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--app-text-white); flex-shrink: 0; }
.pair-quote { font-size: 11px; color: var(--app-text-muted-2); font-weight: 400; margin-left: 4px; }
.pair-price { font-size: 13px; font-weight: 600; color: var(--app-text-1); font-variant-numeric: tabular-nums; }
.pair-change { font-size: 12px; font-weight: 500; }
.pair-change.positive { color: var(--app-primary); }
.pair-change.negative { color: var(--app-sell); }
.pair-vol { font-size: 12px; color: var(--app-text-muted-3); font-variant-numeric: tabular-nums; }
.pair-high, .pair-low { font-size: 12px; color: var(--app-text-muted-3); font-variant-numeric: tabular-nums; }
.pair-trade-btn { background: rgba(92,184,230,0.08); border: 1px solid rgba(92,184,230,0.2); color: var(--app-primary); font-size: 11px; font-weight: 600; padding: 5px 14px; border-radius: 4px; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.pair-trade-btn:hover { background: rgba(92,184,230,0.15); border-color: rgba(92,184,230,0.4); }

/* ===== OPEN ORDERS / TRADE HISTORY TABS (mirrors futures positions) ===== */
.spot-orders-section { margin-bottom: 16px; }
.spot-pos-tabs { display: flex; gap: 0; }
.spot-pos-tab {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  font-family: inherit;
}
.spot-pos-tab:hover { color: #c8c8d8; }
.spot-pos-tab.active { color: var(--app-text-1); border-bottom-color: var(--app-primary); }
.spot-pos-tab-count { font-size: 11px; color: var(--app-primary); font-weight: 600; margin-left: 4px; }
.spot-tab-content { display: none; }
.spot-tab-content.active { display: block; }

/* Spot orders table (reuses pos-table styles from trade-option.css) */
.spot-pos-table-wrap { overflow-x: auto; }
.spot-pos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.spot-pos-table thead th {
  color: #7a7a8a;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(var(--app-content-overlay-rgb),0.06);
  text-align: right;
}
.spot-pos-table thead th:first-child { text-align: left; }
.spot-pos-table thead th:last-child { text-align: center; }
.spot-pos-table tbody td {
  padding: 10px 10px;
  color: #c8c8d8;
  font-weight: 500;
  text-align: right;
  border-bottom: 1px solid rgba(var(--app-content-overlay-rgb),0.03);
}
.spot-pos-table tbody td:first-child { text-align: left; color: var(--app-text-1); font-weight: 700; }
.spot-pos-table tbody td:last-child { text-align: center; }
.spot-pos-table tbody tr:hover { background: rgba(var(--app-content-overlay-rgb),0.02); }

/* Side tags */
.spot-side-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.spot-side-tag.buy { color: var(--app-primary); background: rgba(92,184,230,0.1); }
.spot-side-tag.sell { color: var(--app-sell); background: rgba(224,160,80,0.1); }

/* Status tags */
.spot-status-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
}
.spot-status-tag.open, .spot-status-tag.pending { color: var(--app-primary); background: rgba(92,184,230,0.1); }
.spot-status-tag.filled { color: var(--app-primary); background: rgba(92,184,230,0.1); }
.spot-status-tag.cancelled { color: var(--app-text-muted-2); background: rgba(138,138,154,0.1); }
.spot-status-tag.error { color: var(--app-sell); background: rgba(224,160,80,0.1); }

/* Cancel button */
.spot-cancel-btn {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid rgba(224,160,80,0.3);
  background: rgba(224,160,80,0.08);
  color: var(--app-sell);
  font-family: inherit;
}
.spot-cancel-btn:hover { background: rgba(224,160,80,0.18); }

/* ===== TOAST NOTIFICATIONS ===== */
.spot-toast-container {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spot-toast {
  background: #1e2038;
  border: 1px solid rgba(var(--app-content-overlay-rgb),0.1);
  border-radius: 8px;
  padding: 12px 16px;
  min-width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: toastIn 0.2s ease;
}
.spot-toast.success { border-left: 3px solid var(--app-primary); }
.spot-toast.error { border-left: 3px solid var(--app-sell); }
.spot-toast-title { font-size: 12px; font-weight: 700; color: var(--app-text-1); margin-bottom: 2px; }
.spot-toast-msg { font-size: 11px; color: var(--app-text-muted-3); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
/* BUG #122: brief pulse so the user catches the toast even if their eyes
   are on the order panel rather than the corner. One-shot, fades right
   into the steady-state toast. */
.spot-toast.success { animation: toastIn 0.2s ease, toastPulse 0.6s ease 0.2s 1; }
@keyframes toastPulse {
  0%   { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
  50%  { box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 4px rgba(92,184,230,0.25); }
  100% { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
}

/* BUG #122: persistent inline order result card directly below the submit
   button. Stays for 10s after a successful order, 12s after an error, or
   until the user dismisses it — Toast alone was being missed by users
   whose eyes were on the order panel rather than the top-right corner. */
.spot-order-result {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}
/* BUG #136: slide-down + fade animation, only fires when JS adds the
   .spot-order-result-fresh class. The old `animation: toastIn` (slide
   from right 20px) was inherited from the corner toast and rendered as
   an almost-invisible 20px horizontal nudge on the inline element. */
@keyframes resultCardIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.spot-order-result.spot-order-result-fresh {
  animation: resultCardIn 0.25s ease;
}
.spot-order-result.success {
  background: rgba(92,184,230,0.08);
  border: 1px solid rgba(92,184,230,0.35);
  color: #d6efff;
  box-shadow: 0 0 0 1px rgba(92,184,230,0.35), 0 4px 16px rgba(92,184,230,0.18);
}
.spot-order-result.error {
  background: rgba(224,160,80,0.08);
  border: 1px solid rgba(224,160,80,0.35);
  color: #ffe8c8;
  box-shadow: 0 0 0 1px rgba(224,160,80,0.35), 0 4px 16px rgba(224,160,80,0.18);
}
.spot-order-result-msg { flex: 1; min-width: 0; word-break: break-word; }
.spot-order-result-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--app-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.spot-order-result-close {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.spot-order-result-close:hover { opacity: 1; }
@media (max-width: 480px) {
  .spot-order-result { font-size: 11px; padding: 8px 10px; }
}

/* ===== ORDER CONFIRMATION MODAL ===== */
.spot-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spot-confirm-modal {
  background: #1a1f2e;
  border: 1px solid rgba(var(--app-content-overlay-rgb),0.1);
  border-radius: 12px;
  padding: 24px;
  width: 380px;
  max-width: 90vw;
}
.spot-confirm-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--app-text-1);
  margin-bottom: 16px;
}
.spot-confirm-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.spot-confirm-row .label { color: var(--app-text-muted-2); }
.spot-confirm-row .value { color: var(--app-text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.spot-confirm-row.total { border-top: 1px solid rgba(var(--app-content-overlay-rgb),0.08); margin-top: 8px; padding-top: 10px; }
.spot-confirm-row.total .value { font-size: 14px; }
.spot-confirm-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.spot-confirm-cancel {
  flex: 1;
  padding: 10px;
  background: rgba(var(--app-content-overlay-rgb),0.05);
  border: 1px solid rgba(var(--app-content-overlay-rgb),0.1);
  border-radius: 8px;
  color: var(--app-text-muted-3);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.spot-confirm-cancel:hover { background: rgba(var(--app-content-overlay-rgb),0.08); }
.spot-confirm-submit {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.spot-confirm-submit.buy {
  background: linear-gradient(135deg, var(--app-buy), #4ca8d6);
  color: var(--app-text-white);
}
.spot-confirm-submit.buy:hover {
  background: linear-gradient(135deg, #6cc8f6, var(--app-buy));
  box-shadow: 0 4px 20px rgba(92,184,230,0.3);
}
.spot-confirm-submit.sell {
  background: linear-gradient(135deg, var(--app-sell), #d09040);
  color: var(--app-text-white);
}
.spot-confirm-submit.sell:hover {
  background: linear-gradient(135deg, #f0b060, var(--app-sell));
  box-shadow: 0 4px 20px rgba(224,160,80,0.3);
}

/* ===== RESPONSIVE =====
   BUG #15: legacy @1100/@860 rules removed. Spot now relies on the
   unified Mid (1024-1439px) + Narrow (<1024px) layout defined in
   trade-option.css under `body.trade-page-3up`. */

@media (max-width: 480px) {
  .inst-bar-metrics { display: none !important; }
  .spot-order-panel { padding: 12px; }
}

/* Ultimo: spot pair dropdown is a dark-island (raw #1a1f2e bg). Re-map its content
   tokens to light-on-dark within scope so symbol names + search input + placeholder
   are readable (they were flipping dark = invisible on the dark panel). Vestex
   unaffected (scoped). audit 2026-06-25 */
html[data-brand="ultimo"] .spot-symbol-dropdown {
  --app-text-strong: #e2e8f0;
  --app-text-1: #e0e0e8;
  --app-text-muted: #8a94a6;
  --app-text-muted-2: #8a8a9a;
  --app-text-muted-3: #a8a8b8;
  --app-content-overlay-rgb: 255, 255, 255;
}
html[data-brand="ultimo"] .spot-symbol-search::placeholder { color: #8a8a9a; }

/* Ultimo: spot order-confirmation modal is a dark-island (raw #1a1f2e bg). Re-map
   its content tokens to light-on-dark so the title + values + labels + borders are
   readable (they flipped dark = invisible). Strengthen the Cancel button (was faint
   dark text + barely-visible border). Scoped → vestex zero-diff. audit 2026-06-25 */
html[data-brand="ultimo"] .spot-confirm-modal {
  --app-text-strong: #e2e8f0;
  --app-text-1: #e0e0e8;
  --app-text-muted: #8a94a6;
  --app-text-muted-2: #8a8a9a;
  --app-text-muted-3: #a8a8b8;
  --app-content-overlay-rgb: 255, 255, 255;
}
html[data-brand="ultimo"] .spot-confirm-cancel {
  color: var(--app-text-strong);
  border-color: rgba(255, 255, 255, 0.25);
}

/* Ultimo available-pairs table (audit 2026-06-25): positive 24h-change → cyan
   (was --app-primary = gold on Ultimo, indistinct from amber negative); 24H
   High/Vol columns → darker muted (muted-3 too faint on the light bg); Trade
   button → solid gold accent (was washed cyan-bg + low-contrast gold text).
   Scoped → vestex zero-diff. */
html[data-brand="ultimo"] .pair-change.positive { color: var(--app-buy); }
html[data-brand="ultimo"] .pair-high,
html[data-brand="ultimo"] .pair-low,
html[data-brand="ultimo"] .pair-vol { color: var(--app-text-muted); }
html[data-brand="ultimo"] .pair-trade-btn {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-primary-fg);
}
html[data-brand="ultimo"] .pair-trade-btn:hover {
  background: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}

/* ===== #583 (ULT-MARGIN-58): iOS Safari auto-zoom on sub-16px inputs =====
   PORTED from trade-futures.css's #526 + #23 pair. iOS Safari zooms the page in
   when a focused input's font-size is under 16px, and it does NOT zoom back out
   — the user is left on a magnified page mid-order. Futures fixed this at touch
   widths only; Spot never got the rule, so every Amount tap on a phone zooms.

   TWO SELECTORS, BECAUSE FUTURES NEEDED TWO. #526 fixed the order panel and was
   scoped to it, which left the contract picker's own search box still at 13px —
   that had to come back as a second bug (#23). Spot has exactly the same shape:
   .order-input at 14px inside the panel, and .pairs-search at 12px OUTSIDE it.
   Fixing only the panel here would reproduce #23 on this page, so both are in
   from the start.

   No `select` half (Futures' rule also covers `.trade-order-panel select`):
   trade-spot.html contains zero <select> elements. Adding a dead selector would
   only imply a control that does not exist.

   NOT touching .chat-input (13px, trade-option.css:1762). It has the same
   defect, but that stylesheet is shared by Spot, Futures AND Options, so it is
   a three-page change and belongs to its own entry — not smuggled in under a
   Spot bug.

   Desktop is untouched: .spot-order-panel .order-input keeps 14px (line ~51)
   and .pairs-search keeps 12px (line ~253) above 768px.

   #527'S LESSON, WHICH THIS FILE IS EXPOSED TO. trade-spot.css has TWO
   @media (max-width: 480px) blocks (lines ~459 and ~547). A font-size for
   either selector added inside one of those would win over this block on real
   phones purely by source order, silently undoing the fix — that is exactly how
   #527's earlier 11px fix was defeated. This block is therefore placed LAST in
   the file, and functions/test/spot-a11y.test.js asserts that neither selector
   ever gains a font-size inside a 480px block. */
@media (max-width: 768px) {
  .spot-order-panel .order-input { font-size: 16px; }
  .pairs-search { font-size: 16px; }
}