/* ECXS Scheme B — spot trading page only.
 * The page keeps its existing markup and business logic; this file owns only
 * visual hierarchy, density and the light/dark presentation. */

body.trade-workspace {
  --spot-page: #07101d;
  --spot-surface: #0b1728;
  --spot-surface-soft: #101f33;
  --spot-surface-hover: #152740;
  --spot-border: #21314a;
  --spot-border-strong: #2c4263;
  --spot-text: #edf3fc;
  --spot-text-2: #a8b4c8;
  --spot-text-3: #738198;
  --spot-blue: #2f76ff;
  --spot-blue-soft: rgba(47, 118, 255, .13);
  --spot-green: #12b886;
  --spot-red: #f05268;
  --spot-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  --trade-shell-max: 1680px;
  --trade-side-width: 310px;
  --trade-gap: 12px;
  --trade-panel-height: clamp(650px, calc(100vh - 190px), 820px);
  --bg0: var(--spot-page);
  --bg1: var(--spot-surface-soft);
  --bg2: var(--spot-surface);
  --bg3: var(--spot-surface-hover);
  --brd: var(--spot-border);
  --t1: var(--spot-text);
  --t2: var(--spot-text-2);
  --t3: var(--spot-text-3);
  --bl: var(--spot-blue);
  --gn: var(--spot-green);
  --rd: var(--spot-red);
  margin: 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(47, 118, 255, .08), transparent 32%),
    var(--spot-page);
  color: var(--spot-text);
}

html.light-mode body.trade-workspace {
  --spot-page: #f6f8fb;
  --spot-surface: #ffffff;
  --spot-surface-soft: #f8fafe;
  --spot-surface-hover: #f0f4fa;
  --spot-border: #dfe6ef;
  --spot-border-strong: #ccd7e5;
  --spot-text: #162033;
  --spot-text-2: #536178;
  --spot-text-3: #7a8799;
  --spot-blue: #246bfd;
  --spot-blue-soft: rgba(36, 107, 253, .09);
  --spot-green: #0da675;
  --spot-red: #e54861;
  --spot-shadow: 0 10px 28px rgba(31, 54, 88, .07);
  background: var(--spot-page);
}

body.trade-workspace .market-stats {
  width: calc(100% - 32px);
  max-width: 1648px;
  min-height: 76px;
  margin: 12px auto 0;
  padding: 12px 22px;
  gap: clamp(22px, 3vw, 54px);
  border: 1px solid var(--spot-border);
  border-radius: 10px;
  background: var(--spot-surface);
  box-shadow: var(--spot-shadow);
}

body.trade-workspace .market-stats .stat-item {
  min-width: 118px;
  gap: 4px;
}

body.trade-workspace .market-stats .stat-item.icon-group {
  min-width: 190px;
  padding-right: 22px;
  border-right: 1px solid var(--spot-border);
}

body.trade-workspace .market-stats .stat-label {
  color: var(--spot-text-3);
  font-size: 11px;
  letter-spacing: .01em;
}

body.trade-workspace .market-stats .stat-value {
  color: var(--spot-text);
  font-size: 17px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

body.trade-workspace .market-stats .stat-value.positive { color: var(--spot-green); }
body.trade-workspace .market-stats .stat-value.negative { color: var(--spot-red); }

body.trade-workspace .main-layout {
  width: 100%;
  max-width: var(--trade-shell-max);
  min-width: 1260px;
  grid-template-columns: var(--trade-side-width) minmax(620px, 1fr) 340px;
  gap: var(--trade-gap);
  margin: 12px auto 16px;
  padding: 0 16px;
}

body.trade-workspace .left-panel,
body.trade-workspace .right-panel,
body.trade-workspace .chart-top-bar,
body.trade-workspace .kline-chart,
body.trade-workspace .spot-trade,
body.trade-workspace .bottom-panel {
  border: 1px solid var(--spot-border);
  background: var(--spot-surface);
  box-shadow: var(--spot-shadow);
}

body.trade-workspace .left-panel,
body.trade-workspace .right-panel {
  height: var(--trade-panel-height);
  min-height: 650px;
  padding: 0;
  border-radius: 10px;
}

body.trade-workspace .left-panel {
  overflow: hidden;
}

body.trade-workspace .right-panel {
  padding: 16px 14px 12px;
  box-sizing: border-box;
}

body.trade-workspace .center-panel {
  gap: 12px;
}

body.trade-workspace .coin-search-wrap {
  height: 58px;
  padding: 14px 14px 8px;
}

body.trade-workspace .coin-search-wrap .coin-search {
  height: 36px;
  padding-left: 34px;
  border-color: var(--spot-border);
  border-radius: 7px;
  background: var(--spot-surface-soft);
  color: var(--spot-text);
  box-shadow: none;
}

body.trade-workspace .coin-search-wrap .fa-search {
  left: 26px;
  top: 26px;
  color: var(--spot-text-3);
}

body.trade-workspace .coin-tabs {
  min-height: 42px;
  padding: 0 14px 8px;
  gap: 4px;
  border-bottom: 1px solid var(--spot-border);
}

body.trade-workspace .coin-tab {
  position: relative;
  min-height: 30px;
  padding: 7px 3px 6px;
  border-radius: 5px;
  color: var(--spot-text-2);
  font-size: 11px;
  font-weight: 600;
}

body.trade-workspace .coin-tab:hover {
  color: var(--spot-text);
  background: var(--spot-surface-hover);
}

body.trade-workspace .coin-tab.active {
  color: var(--spot-blue);
  background: var(--spot-blue-soft);
}

body.trade-workspace .coin-tab.active::after {
  content: '';
  position: absolute;
  right: 8px;
  bottom: -8px;
  left: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--spot-blue);
}

body.trade-workspace .coin-table-header {
  min-height: 34px;
  padding: 8px 14px;
  border-bottom-color: var(--spot-border);
  color: var(--spot-text-3);
}

body.trade-workspace .coin-row {
  min-height: 48px;
  padding: 8px 14px;
  border-bottom-color: var(--spot-border);
  transition: background-color .15s ease, border-color .15s ease;
}

body.trade-workspace .coin-row:hover {
  background: var(--spot-surface-hover);
}

body.trade-workspace .coin-row.selected {
  border-left: 3px solid var(--spot-blue);
  background: var(--spot-blue-soft) !important;
}

body.trade-workspace .coin-pair,
body.trade-workspace .coin-price {
  color: var(--spot-text);
  font-variant-numeric: tabular-nums;
}

body.trade-workspace .coin-unit,
body.trade-workspace .coin-star {
  color: var(--spot-text-3);
}

body.trade-workspace .chart-top-bar {
  min-height: 42px;
  padding: 7px 12px;
  border-radius: 10px 10px 0 0;
  box-shadow: var(--spot-shadow);
}

body.trade-workspace .ch-periods { gap: 3px; }

body.trade-workspace .ch-pd,
body.trade-workspace .ch-ind-btn {
  min-height: 26px;
  padding: 4px 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--spot-text-3);
  font-size: 10px;
}

body.trade-workspace .ch-pd:hover,
body.trade-workspace .ch-ind-btn:hover {
  color: var(--spot-text);
  background: var(--spot-surface-hover);
}

body.trade-workspace .ch-pd.active {
  color: #fff;
  background: var(--spot-blue);
  box-shadow: 0 3px 10px rgba(55, 114, 255, .22);
}

body.trade-workspace .ch-ind {
  padding-left: 9px;
  border-left: 1px solid var(--spot-line);
}

body.trade-workspace .ch-ind-btn.active {
  color: var(--spot-blue);
  background: transparent;
  box-shadow: inset 0 -2px 0 var(--spot-blue);
}

body.trade-workspace .kline-chart {
  height: 430px;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--spot-surface);
  box-shadow: var(--spot-shadow);
}

body.trade-workspace .order-book {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.trade-workspace .ob-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: var(--spot-border-strong) transparent;
  scrollbar-width: thin;
}

body.trade-workspace .ob-rows::-webkit-scrollbar { width: 4px; }
body.trade-workspace .ob-rows::-webkit-scrollbar-track { background: transparent; }
body.trade-workspace .ob-rows::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: var(--spot-border-strong);
}

body.trade-workspace .ob-header {
  min-height: 34px;
  margin: 0 -2px 6px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--spot-border);
}

body.trade-workspace .ob-title {
  color: var(--spot-text);
  font-size: 15px;
  font-weight: 700;
}

body.trade-workspace .ob-col-heads {
  padding: 7px 0 8px;
  border-bottom-color: var(--spot-border);
  color: var(--spot-text-3);
}

body.trade-workspace .ob-row {
  min-height: 20px;
  padding: 1px 3px;
  border-radius: 2px;
  font-size: 11px;
  line-height: 1.65;
}

body.trade-workspace .ob-row.ask .ob-price { color: var(--spot-red); }
body.trade-workspace .ob-row.bid .ob-price { color: var(--spot-green); }
body.trade-workspace .ob-row .ob-qty { color: var(--spot-text-2); }
body.trade-workspace .ob-row.ask .ob-bar { background: var(--spot-red); }
body.trade-workspace .ob-row.bid .ob-bar { background: var(--spot-green); }

body.trade-workspace .ob-spread-row {
  margin: 5px 0;
  padding: 8px 2px;
  border-color: var(--spot-border);
  background: var(--spot-surface-soft);
}

body.trade-workspace .ob-spread-price {
  color: var(--spot-text);
  font-size: 18px;
}

body.trade-workspace .ob-toolbar {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  margin: 8px -14px -12px;
  padding: 10px 14px;
  border-top: 1px solid var(--spot-border);
  border-radius: 0 0 9px 9px;
  background: var(--spot-surface-soft);
}

body.trade-workspace .ob-qty-select {
  border-color: var(--spot-border);
  background: var(--spot-surface);
  color: var(--spot-text);
}

body.trade-workspace .spot-trade {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px;
  gap: 10px;
  border-radius: 10px;
  box-sizing: border-box;
}

body.trade-workspace .st-type-row,
body.trade-workspace .st-qty-mode-row {
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--spot-border);
  border-radius: 8px;
  background: var(--spot-surface-soft);
}

body.trade-workspace .st-type-btn,
body.trade-workspace .st-qty-mode {
  height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 6px !important;
  background: transparent;
  color: var(--spot-text-2);
  font-size: 12px;
}

body.trade-workspace .st-type-btn.active,
body.trade-workspace .st-qty-mode.active {
  border-color: var(--spot-blue);
  background: var(--spot-blue);
  color: #fff;
  box-shadow: 0 5px 14px rgba(36, 107, 253, .18);
}

body.trade-workspace .st-side-row { gap: 8px; }

body.trade-workspace .st-side-btn {
  height: 42px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  box-shadow: none !important;
  font-size: 13px;
}

body.trade-workspace .st-side-btn.buy {
  border-color: rgba(18, 184, 134, .5);
  background: rgba(18, 184, 134, .12);
  color: var(--spot-green);
}

body.trade-workspace .st-side-btn.buy.active {
  background: var(--spot-green);
  color: #fff;
}

body.trade-workspace .st-side-btn.sell {
  border-color: rgba(240, 82, 104, .5);
  background: rgba(240, 82, 104, .1);
  color: var(--spot-red);
}

body.trade-workspace .st-side-btn.sell.active {
  background: var(--spot-red);
  color: #fff;
}

body.trade-workspace .st-form-section {
  padding: 10px 12px;
  gap: 5px;
  border-color: var(--spot-border);
  border-radius: 7px;
  background: var(--spot-surface-soft);
}

body.trade-workspace .st-inp-row input,
body.trade-workspace .st-unit {
  min-height: 40px;
  box-sizing: border-box;
  border-color: var(--spot-border);
  background: var(--spot-surface-soft);
  color: var(--spot-text);
}

body.trade-workspace .st-inp-row input {
  padding: 9px 12px;
  border-radius: 7px 0 0 7px;
}

body.trade-workspace .st-unit {
  padding: 10px 13px;
  border-radius: 0 7px 7px 0;
  color: var(--spot-text-2);
}

body.trade-workspace .st-mkt-label {
  padding: 9px 11px;
  border: 1px solid rgba(18, 184, 134, .16);
  border-radius: 7px;
  background: rgba(18, 184, 134, .08);
  color: var(--spot-text-2);
  font-size: 12px;
}

body.trade-workspace .st-balance-row {
  justify-content: space-between;
  min-height: 30px;
  padding: 2px 2px 0;
  color: var(--spot-text-2);
}

body.trade-workspace .st-balance-row .st-bal-val { color: var(--spot-text); }

body.trade-workspace .st-btn-recharge {
  margin-left: auto;
  padding: 4px 12px;
  border-color: var(--spot-blue);
  border-radius: 6px;
  color: var(--spot-blue);
}

body.trade-workspace .st-pct-row { gap: 7px; }

body.trade-workspace .st-pct-btn {
  padding: 6px 0;
  border-color: var(--spot-border);
  border-radius: 6px;
  background: var(--spot-surface-soft);
  color: var(--spot-text-2);
}

body.trade-workspace .st-pct-btn:hover {
  border-color: var(--spot-blue);
  background: var(--spot-blue-soft);
  color: var(--spot-blue);
}

body.trade-workspace .st-est-block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  padding: 9px 0 0;
  border-top-color: var(--spot-border);
}

body.trade-workspace .st-est-row {
  min-width: 0;
  padding: 0 10px;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--spot-border);
}

body.trade-workspace .st-est-row:first-child { padding-left: 2px; }
body.trade-workspace .st-est-row:last-child { padding-right: 2px; border-right: 0; }
body.trade-workspace .st-est-row span:first-child { color: var(--spot-text-3); }
body.trade-workspace .st-est-val { color: var(--spot-text); overflow: hidden; text-overflow: ellipsis; }

body.trade-workspace .st-submit-btn {
  height: 44px;
  border-radius: 7px;
  font-size: 14px;
  box-shadow: none !important;
}

body.trade-workspace .st-submit-btn.buy {
  background: var(--spot-green);
  color: #fff;
}

body.trade-workspace .st-submit-btn.sell {
  background: var(--spot-red);
  color: #fff;
}

body.trade-workspace .bottom-bar {
  margin-top: 4px;
  border-top-color: var(--spot-border);
}

body.trade-workspace .bottom-bar-inner {
  max-width: 1680px;
  padding: 12px 16px 24px;
}

body.trade-workspace .bottom-panel {
  padding: 14px 16px;
  border-radius: 10px;
}

body.trade-workspace .order-tab.active {
  color: var(--spot-blue);
  border-bottom-color: var(--spot-blue);
}

body.trade-workspace .order-table thead th {
  border-bottom-color: var(--spot-border);
  background: var(--spot-surface-soft);
  color: var(--spot-text-3);
}

body.trade-workspace .order-table tbody td {
  border-bottom-color: var(--spot-border);
  color: var(--spot-text-2);
}

body.trade-workspace .order-table tbody tr:hover td {
  background: var(--spot-blue-soft);
}

html.light-mode body.trade-workspace .left-panel,
html.light-mode body.trade-workspace .right-panel,
html.light-mode body.trade-workspace .chart-top-bar,
html.light-mode body.trade-workspace .kline-chart,
html.light-mode body.trade-workspace .spot-trade,
html.light-mode body.trade-workspace .bottom-panel,
html.light-mode body.trade-workspace .market-stats {
  background: #fff;
}

html.light-mode body.trade-workspace input,
html.light-mode body.trade-workspace select {
  background-color: var(--spot-surface-soft);
  border-color: var(--spot-border);
  color: var(--spot-text);
}

@media (max-width: 1400px) {
  body.trade-workspace {
    --trade-side-width: 292px;
    --trade-gap: 10px;
  }

  body.trade-workspace .main-layout {
    min-width: 1200px;
    grid-template-columns: var(--trade-side-width) minmax(570px, 1fr) 320px;
    padding: 0 12px;
  }

  body.trade-workspace .kline-chart { height: 390px; }
}