.trade-page {
  --trade-accent: #373273;
  --trade-line: #e8eaf2;
  --trade-muted: #616679;
  --trade-wash: #f5f8ff;
  --trade-chart-grid: #e8eaf2;
  --trade-chart-text: #616679;
  --trade-buy: #34c759;
  --trade-sell: #ff6666;
  --trade-positive: #18743d;
  --trade-negative: #ac354b;
  --trade-buy-surface: #e9f8ee;
  --trade-sell-surface: #fff0f0;
  display: block;
  min-width: 280px;
  background: #fafaff;
}

.trade-inner {
  width: min(calc(100% - 42px), 1878px);
  margin-inline: auto;
}

.trade-market-label { margin-bottom: 5px; }

.trade-workspace {
  display: grid;
  gap: 8px;
  padding-block: 8px 32px;
}

.trade-workspace .surface { border: 1px solid var(--trade-line); border-radius: 9px; background: #fff; box-shadow: none; }
.trade-page-status { margin: 0; }

.trade-market-header {
  display: grid;
  grid-template-columns: minmax(125px, 1fr) max-content minmax(0, 3fr);
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
}

.trade-market-identity { min-width: 0; }

.trade-market-identity select {
  width: 100%;
  min-height: 37px;
  padding: 5px 8px;
  border: 1px solid var(--trade-line);
  border-radius: 8px;
  background: var(--trade-wash);
  color: var(--trade-accent);
  font-size: 15px;
  font-weight: 750;
}

.trade-last-price { min-width: 0; }
.trade-last-price .trade-caption { margin-bottom: 3px; }

.trade-last-price strong {
  display: block;
  max-inline-size: 260px;
  overflow: hidden;
  color: var(--trade-accent);
  font-size: clamp(20px, 2.15vw, 31px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trade-market-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  padding-left: 16px;
  border-left: 1px solid var(--trade-line);
}

.trade-market-stats dt,
.trade-order-totals dt {
  color: var(--trade-muted);
  font-size: 11px;
  line-height: 1.5;
}

.trade-market-stats dd {
  margin-top: 4px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.trade-page [data-tone="buy"],
.trade-page [data-tone="positive"] { color: var(--trade-positive); }
.trade-page [data-tone="sell"],
.trade-page [data-tone="negative"] { color: var(--trade-negative); }

.trade-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(215px, .95fr) minmax(265px, 1.08fr);
  grid-template-areas: 'chart depth order';
  align-items: stretch;
  gap: 8px;
}

.trade-grid > * { min-width: 0; }
.trade-chart-stack { grid-area: chart; display: grid; grid-template-rows: auto 1fr; gap: 8px; }
.trade-chart-panel { display: flex; flex-direction: column; min-width: 0; }
.trade-depth-panel { grid-area: depth; }
.trade-order-panel { grid-area: order; }

.trade-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 50px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--trade-line);
}

.trade-panel-header h1,
.trade-panel-header h2 {
  color: var(--trade-accent);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.024em;
}

.trade-caption {
  display: block;
  color: var(--trade-muted);
  font-size: 11px;
  line-height: 1.45;
}

.trade-chart-header .trade-caption { margin-top: 2px; }
.trade-timeframes { display: flex; flex-wrap: wrap; gap: 3px; }

.trade-timeframes button,
.trade-tab-row button,
.trade-percent button {
  min-height: 30px;
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--trade-muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.trade-timeframes button:hover,
.trade-tab-row button:hover,
.trade-percent button:hover { background: var(--trade-wash); color: var(--trade-accent); }

.trade-timeframes button[aria-pressed="true"],
.trade-percent button[aria-pressed="true"] { background: #eae8f7; color: var(--trade-accent); }

.trade-chart-plot {
  position: relative;
  height: clamp(350px, 27.5vw, 525px);
  margin: 6px 8px 0;
  overflow: hidden;
}

#trade-chart {
  --trade-positive: var(--trade-buy);
  --trade-negative: var(--trade-sell);
  display: block;
  width: 100%;
  height: 100%;
}
.trade-chart-status { margin: 0; padding: 6px 13px; }

.trade-chart-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: auto;
  padding: 9px 13px;
  border-top: 1px solid var(--trade-line);
  color: var(--trade-muted);
  font-size: 11px;
}

.trade-tab-row { display: flex; flex-wrap: wrap; gap: 3px; }

.trade-tab-row button {
  min-height: 37px;
  padding-inline: 9px;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  font-size: 12px;
}

.trade-tab-row button[aria-selected="true"] { border-bottom-color: var(--trade-accent); color: var(--trade-accent); }

.trade-depth-panel > .trade-tab-row {
  align-items: end;
  min-height: 50px;
  padding: 0 7px;
  border-bottom: 1px solid var(--trade-line);
}

.trade-depth-panel > .trade-tab-row button { flex: 1 1 auto; }
.trade-depth-table { table-layout: fixed; font-variant-numeric: tabular-nums; }

.trade-depth-table th,
.trade-depth-table td {
  padding: 4px 7px;
  border: 0;
  background: transparent;
  font-size: 11px;
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}

.trade-depth-table th:first-child,
.trade-depth-table td:first-child { width: 44%; text-align: left; }
.trade-depth-table th { padding-block: 8px; }
.trade-depth-table tbody tr:hover { outline: 1px solid var(--trade-line); outline-offset: -1px; }

.trade-depth-table .trade-asks tr {
  background: linear-gradient(to left, var(--trade-sell-surface) var(--trade-depth, 0%), transparent var(--trade-depth, 0%));
}

.trade-depth-table .trade-bids tr {
  background: linear-gradient(to left, var(--trade-buy-surface) var(--trade-depth, 0%), transparent var(--trade-depth, 0%));
}

.trade-asks td:first-child { color: var(--trade-negative); }
.trade-bids td:first-child { color: var(--trade-positive); }

.trade-book-price {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.trade-book-price:not(:disabled):hover { text-decoration: underline; }
.trade-book-price:focus-visible { outline-offset: 1px; }
.trade-book-price:disabled { cursor: default; opacity: 1; }

.trade-spread {
  margin-block: 5px;
  padding: 6px 7px;
  border-block: 1px solid var(--trade-line);
  background: var(--trade-wash);
  color: var(--trade-accent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.trade-depth-status { margin: 0; padding: 8px 10px; }
.trade-order-content { padding: 14px; }

.trade-access-status {
  margin-bottom: 9px;
  color: var(--trade-muted);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.trade-access-status:empty { display: none; }
.trade-auth { display: grid; justify-items: start; gap: 11px; color: var(--trade-muted); font-size: 13px; }
.trade-order-form { display: grid; gap: 10px; }

.trade-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--trade-wash);
}

.trade-side button {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--trade-muted);
  font-size: 13px;
  font-weight: 750;
}

.trade-side button[data-side="BUY"][aria-pressed="true"] { background: var(--trade-buy); color: #102e1a; }
.trade-side button[data-side="SELL"][aria-pressed="true"] { background: var(--trade-sell); color: #491721; }

.trade-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--trade-muted);
  font-size: 12px;
  font-weight: 650;
}

.trade-field select,
.trade-input-with-unit {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--trade-line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}

.trade-field select { width: 100%; padding: 7px 8px; }
.trade-input-with-unit { display: flex; align-items: center; gap: 4px; padding-inline: 8px; }

.trade-input-with-unit input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.trade-input-with-unit > span { color: var(--trade-muted); font-size: 11px; white-space: nowrap; }
.trade-input-with-unit:focus-within { outline: 2px solid var(--trade-accent); outline-offset: 1px; }
.trade-input-with-unit input:focus-visible { outline: none; }

.trade-percent { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.trade-percent button { min-height: 28px; padding-inline: 3px; border: 1px solid var(--trade-line); }

.trade-order-totals {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--trade-wash);
}

.trade-order-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.trade-order-totals dd { color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.trade-submit { width: 100%; border-color: var(--trade-accent); border-radius: 999px; background: var(--trade-accent); color: #fff; }
.trade-page button:disabled { cursor: not-allowed; }

.trade-history { min-width: 0; overflow: hidden; }

.trade-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 9px;
  padding: 5px 12px 0;
  border-bottom: 1px solid var(--trade-line);
}

.trade-history-header > .button { min-height: 32px; padding: 4px 8px; margin-bottom: 4px; font-size: 12px; }
.trade-history-status { margin: 0; padding: 8px 12px; }
.trade-history-table table { min-width: 560px; font-variant-numeric: tabular-nums; }
.trade-history-table td, .trade-history-table th { padding: 8px 11px; font-size: 12px; }
.trade-cancel-button {
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid #f0cdd4;
  background: #fff;
  color: var(--trade-negative);
  font-size: inherit;
  white-space: nowrap;
}
.trade-cancel-button:not(:disabled):hover { background: var(--trade-sell-surface); }
.trade-cancel-button:disabled { border-color: var(--trade-line); color: var(--trade-muted); opacity: 1; }

.trade-review {
  width: min(510px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  padding: 18px;
  border: 1px solid var(--trade-line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 48px #24204c33;
}

.trade-review::backdrop { background: #1e1a3d80; }
.trade-review .action-list { justify-content: flex-end; margin-top: 12px; }

@media (max-width: 1060px) {
  .trade-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(275px, .8fr);
    grid-template-areas: 'chart chart' 'depth order';
  }

  .trade-chart-plot { height: clamp(320px, 47vw, 420px); }
}

@media (min-width: 1061px) and (max-width: 1280px) {
  .trade-market-header { grid-template-columns: minmax(105px, 1fr) minmax(0, 1fr); gap: 8px 12px; }
  .trade-market-stats { grid-column: 1 / -1; padding: 7px 0 0; border-left: 0; border-top: 1px solid var(--trade-line); }
}

@media (max-width: 690px) {
  .trade-inner { width: calc(100% - 24px); }
  .trade-workspace { gap: 9px; padding-block: 12px 20px; }

  .trade-market-header { grid-template-columns: minmax(114px, .9fr) minmax(0, 1.1fr); gap: 10px 12px; padding: 10px; }
  .trade-last-price strong { max-inline-size: 100%; font-size: clamp(15px, 4.8vw, 23px); }
  .trade-market-stats { grid-column: 1 / -1; gap: 5px 9px; padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--trade-line); }
  .trade-market-stats dt { font-size: 10px; }
  .trade-market-stats dd { font-size: 11px; }
  .trade-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'chart' 'order' 'depth'; gap: 9px; }
  .trade-panel-header { padding: 9px 10px; }
  .trade-chart-plot { height: clamp(235px, 68vw, 375px); }
  .trade-order-content { padding: 10px; }
  .trade-history-header { padding-inline: 6px; }
  .trade-tab-row button { padding-inline: 6px; font-size: 11px; }
  #trade-open-panel th:last-child,
  #trade-open-panel td:last-child:not([colspan]) {
    position: sticky;
    right: 0;
    background: #fff;
    box-shadow: -1px 0 var(--trade-line);
  }
}

@media (max-width: 440px) {
  .trade-market-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}