.spread-shell {
  --spread-amber: #e6bd59;
  --spread-blue: #64a6ff;
  --spread-panel: #121213;
  --spread-panel-deep: #0d0d0e;
  padding-bottom: 24px;
}

.spread-heading {
  display: flex;
  min-height: 132px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px 4px;
}

.spread-heading-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.spread-heading-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.spread-back-link {
  color: #a2a2a7;
  font-family: var(--mono, "SFMono-Regular", Consolas, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.spread-back-link:hover,
.spread-back-link:focus-visible {
  color: #46d6a4;
  outline: 1px solid #46d6a4;
  outline-offset: 4px;
}

.spread-trade-open {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border: 1px solid var(--signal);
  border-radius: 7px;
  background: var(--signal);
  color: var(--ink);
  padding: 0 14px;
  font: 800 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transition: filter .15s ease, transform .15s ease;
}

.spread-trade-open:hover { filter: brightness(1.08); }
.spread-trade-open:active { transform: translateY(1px); filter: brightness(.94); }
.spread-trade-open:focus-visible {
  color: var(--ink);
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.spread-heading h1 {
  margin: 7px 0 0;
  color: var(--text);
  font-size: clamp(32px, 4vw, 54px);
  line-height: .98;
  letter-spacing: -.04em;
}

.spread-heading p {
  max-width: 72ch;
  margin: 11px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.spread-feed-state {
  min-width: 310px;
  border: 1px solid var(--line);
  background: var(--spread-panel);
  padding: 14px 16px;
}

.spread-feed-state span,
.spread-feed-state strong,
.spread-feed-state small {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.spread-feed-state span { color: #737478; font-size: 8px; letter-spacing: .1em; }
.spread-feed-state strong { margin-top: 8px; color: var(--signal); font-size: 11px; }
.spread-feed-state small { margin-top: 5px; color: var(--muted); font-size: 8px; }
.spread-feed-state.is-error { border-color: rgba(255, 79, 89, .55); }
.spread-feed-state.is-error strong { color: var(--sell); }
.spread-feed-state.is-waiting strong { color: var(--spread-amber); }

.spread-execution-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border: 1px solid #3a3b3e;
  border-radius: 12px;
  background: #0d0d0e;
  color: var(--text);
  padding: 0;
  overflow: hidden;
}

.spread-execution-dialog::backdrop { background: rgba(0, 0, 0, .82); }
.spread-execution-shell { max-height: calc(100vh - 34px); overflow-y: auto; }

.spread-execution-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line-strong);
  padding: 22px 24px 20px;
}

.spread-execution-header span,
.spread-execution-header h2,
.spread-execution-header p { display: block; }
.spread-execution-header span { color: var(--signal); font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .1em; }
.spread-execution-header h2 { margin: 8px 0 0; color: var(--text); font-size: 25px; line-height: 1; letter-spacing: -.03em; }
.spread-execution-header p { max-width: 68ch; margin: 10px 0 0; color: #a2a3a6; font-size: 11px; line-height: 1.6; }
.spread-execution-header button { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 8px; background: #151516; color: var(--muted-strong); font: 400 24px/1 sans-serif; }
.spread-execution-header button:hover,
.spread-execution-header button:focus-visible { border-color: #696a6e; color: var(--text); outline: none; }

.spread-execution-route {
  display: grid;
  grid-template-columns: 1fr minmax(180px, .72fr) 1fr;
  border-bottom: 1px solid var(--line-strong);
}

.spread-execution-route > div { min-width: 0; min-height: 86px; border-right: 1px solid var(--line); }
.spread-execution-route > div:last-child { border-right: 0; }
.spread-execution-route > .buy,
.spread-execution-route > .sell { display: flex; align-items: center; gap: 12px; padding: 15px 20px; }
.spread-execution-route > .buy { background: rgba(24, 211, 145, .055); }
.spread-execution-route > .sell { background: rgba(255, 79, 89, .05); }
.spread-execution-route img { width: 32px; height: 32px; object-fit: contain; }
.spread-execution-route span { min-width: 0; }
.spread-execution-route small,
.spread-execution-route strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-execution-route small { color: var(--muted); font-size: 8px; }
.spread-execution-route strong { margin-top: 7px; color: var(--text); font-size: 13px; }
.spread-execution-gap { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 16px; text-align: center; }
.spread-execution-gap > span { color: var(--muted); font: 650 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-execution-gap > strong { margin-top: 8px; color: var(--spread-amber); font: 760 21px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-execution-gap > small { margin-top: 7px; }
.spread-execution-gap.is-ready > strong { color: var(--signal); }

.spread-execution-order-books {
  border-bottom-color: var(--line-strong);
  background: #0b0b0c;
}

.spread-book-summary {
  display: grid;
  grid-template-columns: auto auto;
  justify-items: end;
  gap: 5px 12px;
  color: var(--muted);
  font: 700 8px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.spread-book-summary span { font-variant-numeric: tabular-nums; }
.spread-book-summary span.is-ready { color: var(--signal); }
.spread-book-summary strong {
  grid-column: 1 / -1;
  color: var(--muted-strong);
  font-size: 8px;
  font-weight: 700;
}
.spread-book-summary strong.is-live { color: #74e8bb; }
.spread-book-summary strong.is-partial { color: #e1ca72; }
.spread-book-summary strong.is-error { color: #ff858d; }
.spread-execution-order-books .trade-book-message td { height: 94px; }

.spread-execution-auth {
  margin: 18px 22px 0;
  border: 1px solid rgba(230, 189, 89, .48);
  background: rgba(230, 189, 89, .055);
  padding: 13px 15px;
}
.spread-execution-auth strong { color: var(--spread-amber); font-size: 11px; }
.spread-execution-auth p { margin: 5px 0 0; color: #b9ad8e; font-size: 9px; line-height: 1.5; }
.spread-execution-auth a { display: inline-block; margin-top: 9px; color: #f0cf7a; font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-decoration: none; }

.spread-execution-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; padding: 20px 22px; }
.spread-execution-fields > label { min-width: 0; }
.spread-execution-fields label > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; color: var(--muted-strong); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-execution-fields label > span b { color: #737478; font-size: 7px; }
.spread-execution-fields label > small { display: block; margin-top: 7px; color: var(--muted); font: 600 8px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-execution-input { display: flex; width: 100%; height: 42px; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 7px; background: #111112; padding: 0 12px; }
.spread-execution-input:focus-within { border-color: var(--signal); box-shadow: 0 0 0 1px rgba(24, 211, 145, .14); }
.spread-execution-input input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--text); outline: 0; font: 720 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-execution-input i { color: var(--muted); font: normal 650 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-execution-fields[aria-disabled="true"] { opacity: .46; }

.spread-execution-safety { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spread-execution-safety div { min-width: 0; border-right: 1px solid var(--line); padding: 13px 16px; }
.spread-execution-safety div:last-child { border-right: 0; }
.spread-execution-safety strong { color: var(--text); font-size: 9px; }
.spread-execution-safety p { margin: 6px 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }

.spread-execution-status { margin: 18px 22px 0; border: 1px solid var(--line-strong); background: #111112; }
.spread-execution-status header { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding: 10px 12px; }
.spread-execution-status header span { color: var(--spread-amber); font: 750 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-execution-status header strong { color: var(--muted-strong); font: 650 8px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: right; }
.spread-execution-status p { margin: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; color: var(--muted-strong); font: 600 8px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-execution-status textarea { display: block; width: 100%; height: 118px; resize: vertical; border: 0; background: #0b0b0c; color: #bdbec1; padding: 10px 12px; outline: 0; font: 600 8px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-execution-status.is-live { border-color: rgba(24, 211, 145, .48); }
.spread-execution-status.is-live header span { color: var(--signal); }
.spread-execution-status.is-danger { border-color: rgba(255, 79, 89, .5); }
.spread-execution-status.is-danger header span { color: var(--sell); }

.spread-execution-confirm { display: flex; align-items: flex-start; gap: 10px; margin: 18px 22px 0; border: 1px solid var(--line-strong); background: #121213; padding: 12px 13px; }
.spread-execution-confirm input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--signal); }
.spread-execution-confirm span { color: var(--muted-strong); font-size: 9px; line-height: 1.55; }
.spread-execution-error { margin: 12px 22px 0; border: 1px solid rgba(255, 79, 89, .55); background: rgba(255, 79, 89, .065); color: #ff9ba1; padding: 10px 12px; font: 650 9px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.spread-execution-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line); margin-top: 20px; padding: 14px 22px; }
.spread-execution-actions button { min-height: 39px; border-radius: 7px; padding: 0 15px; font: 720 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-execution-actions .secondary { border: 1px solid var(--line-strong); background: #161617; color: var(--muted-strong); }
.spread-execution-actions .primary { border: 1px solid var(--signal); background: rgba(24, 211, 145, .13); color: #b4f5dc; }
.spread-execution-actions button:hover:not(:disabled),
.spread-execution-actions button:focus-visible { border-color: #6f7074; color: var(--text); outline: none; }
.spread-execution-actions .primary:hover:not(:disabled),
.spread-execution-actions .primary:focus-visible { border-color: var(--signal); background: rgba(24, 211, 145, .22); color: #e0fff3; }
.spread-execution-actions button:disabled { cursor: not-allowed; opacity: .42; }

.spread-route {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(190px, .7fr) minmax(230px, 1fr) minmax(170px, .65fr);
  border: 1px solid var(--line-strong);
  background: var(--spread-panel);
}

.spread-route > div {
  min-width: 0;
  min-height: 86px;
  border-right: 1px solid var(--line);
}

.spread-route > div:last-child { border-right: 0; }

.spread-route-leg {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}

.spread-route-leg.buy { background: rgba(24, 211, 145, .055); }
.spread-route-leg.sell { background: rgba(255, 79, 89, .05); }
.spread-route-leg img { width: 38px; height: 38px; object-fit: contain; }
.spread-route-leg span { min-width: 0; }
.spread-route-leg small,
.spread-route-leg strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-route-leg small { color: var(--muted); font-size: 8px; }
.spread-route-leg strong { overflow: hidden; margin-top: 7px; color: var(--text); font-size: 14px; text-overflow: ellipsis; }
.spread-route-leg b { color: var(--muted-strong); font: 720 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }

.spread-route-core,
.spread-route-exit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  text-align: center;
}

.spread-route-core span,
.spread-route-exit span { color: var(--muted); font: 650 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
.spread-route-core strong,
.spread-route-exit strong { margin-top: 8px; color: var(--signal); font: 760 22px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -.04em; }
.spread-route-core small,
.spread-route-exit small { margin-top: 7px; color: var(--muted); font: 600 8px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-route-core.is-waiting strong,
.spread-route-exit.is-waiting strong { color: var(--spread-amber); }
.spread-route-core.is-ready strong,
.spread-route-exit.is-ready strong { color: var(--signal); }

.spread-workbench {
  display: grid;
  grid-template-columns: minmax(310px, 340px) minmax(0, 1fr);
  border: 1px solid var(--line-strong);
  border-top: 0;
}

.strategy-ledger {
  min-width: 0;
  border-right: 1px solid var(--line-strong);
  background: #101011;
}

.strategy-heading,
.history-heading,
.trade-history-ledger > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 17px 18px 14px;
}

.strategy-heading h2,
.history-heading h2,
.trade-history-ledger h2 { margin: 0; color: var(--text); font-size: 14px; letter-spacing: -.02em; }
.strategy-heading p,
.history-heading p,
.trade-history-ledger p { margin: 6px 0 0; color: var(--muted); font: 600 8px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.strategy-heading > span,
.trade-history-ledger header > span { flex: 0 0 auto; color: #747579; font: 650 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .09em; }

#strategyForm { padding: 14px 16px 16px; }

.spread-field { display: block; min-width: 0; margin-bottom: 12px; }
.spread-field > span,
.spread-fieldset legend { display: flex; align-items: baseline; justify-content: space-between; width: 100%; margin-bottom: 6px; color: var(--muted-strong); font: 650 9px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-field > span small,
.spread-fieldset legend small { color: #6f7074; font-size: 7px; }
.spread-field > input,
.spread-field > select,
.spread-number {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--spread-panel-deep);
}
.spread-field > input { padding: 0 12px; color: var(--text); font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; outline: 0; text-transform: uppercase; }
.spread-field > select { padding: 0 34px 0 12px; color: var(--text); font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; outline: 0; appearance: auto; }
.spread-number { display: flex; align-items: center; gap: 9px; padding: 0 11px; }
.spread-number input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--text); font: 720 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; outline: 0; }
.spread-number b { color: var(--muted); font: 650 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-field > input:focus,
.spread-field > select:focus,
.spread-number:focus-within { border-color: var(--signal); box-shadow: 0 0 0 1px rgba(24, 211, 145, .14); }
.spread-field [aria-invalid="true"],
.spread-field:has(input[aria-invalid="true"]) .spread-number { border-color: var(--sell); }
.spread-field em { display: none; margin-top: 5px; color: #ff9ba1; font: normal 600 8px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-field em:not(:empty) { display: block; }

.spread-fieldset { min-width: 0; margin: 0 0 12px; border: 0; padding: 0; }
.venue-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.venue-pair-grid .spread-field { margin-bottom: 0; }
.spread-fieldset > em { display: block; min-height: 12px; margin-top: 5px; color: #ff9ba1; font: normal 600 8px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.direction-switch,
.range-switch,
.chart-view-switch { display: grid; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--spread-panel-deep); overflow: hidden; }
.direction-switch { grid-template-columns: 1fr 1fr; }
.range-switch { grid-template-columns: repeat(4, 1fr); }
.direction-switch button,
.range-switch button,
.chart-view-switch button { min-width: 0; min-height: 38px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font: 650 8px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.direction-switch button:last-child,
.range-switch button:last-child,
.chart-view-switch button:last-child { border-right: 0; }
.direction-switch button:hover,
.range-switch button:hover,
.chart-view-switch button:hover { background: #1b1b1d; color: var(--text); }
.direction-switch button.is-active,
.range-switch button.is-active,
.chart-view-switch button.is-active { background: rgba(24, 211, 145, .13); color: #b4f5dc; }

.threshold-grid,
.cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.threshold-fit { margin: 0 0 12px; border: 1px solid rgba(24, 211, 145, .34); border-radius: 7px; background: linear-gradient(135deg, rgba(24, 211, 145, .09), rgba(18, 18, 19, .96) 62%); overflow: hidden; }
.threshold-fit header { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 11px; border-bottom: 1px solid rgba(24, 211, 145, .2); }
.threshold-fit header span { color: #c9f8e6; font: 720 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.threshold-fit header small { color: #5ddfb0; font: 650 6px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; }
.threshold-fit-values { display: grid; grid-template-columns: 1fr 1fr; }
.threshold-fit-values > div { position: relative; min-height: 65px; padding: 11px; border-right: 1px solid rgba(24, 211, 145, .16); }
.threshold-fit-values > div:last-child { border-right: 0; }
.threshold-fit-values span, .threshold-fit-values strong, .threshold-fit-values small { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.threshold-fit-values span { color: #7e8683; font-size: 7px; }
.threshold-fit-values strong { margin-top: 8px; color: #9ff1d1; font-size: 17px; line-height: 1; }
.threshold-fit-values small { position: absolute; right: 11px; bottom: 12px; color: #527167; font-size: 6px; }
.threshold-fit > p { min-height: 31px; margin: 0; padding: 8px 11px; border-top: 1px solid rgba(24, 211, 145, .14); color: #7f8885; font: 600 7px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.threshold-fit > button { width: 100%; min-height: 32px; border: 0; border-top: 1px solid rgba(24, 211, 145, .24); background: rgba(24, 211, 145, .1); color: #aaf4d8; font: 720 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.threshold-fit > button:hover:not(:disabled) { background: rgba(24, 211, 145, .2); }
.threshold-fit > button:disabled { color: #555b59; background: rgba(255, 255, 255, .018); cursor: not-allowed; }
.threshold-fit.is-fallback { border-color: rgba(230, 189, 89, .4); background: linear-gradient(135deg, rgba(230, 189, 89, .07), rgba(18, 18, 19, .96) 62%); }
.threshold-fit.is-fallback header { border-bottom-color: rgba(230, 189, 89, .2); }
.threshold-fit.is-fallback header small, .threshold-fit.is-fallback .threshold-fit-values strong { color: #e6bd59; }

.cost-assumptions { margin: 2px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cost-assumptions summary { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted-strong); cursor: pointer; font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; list-style: none; }
.cost-assumptions summary::-webkit-details-marker { display: none; }
.cost-assumptions summary::after { content: "+"; margin-left: auto; color: var(--signal); font-size: 13px; }
.cost-assumptions[open] summary::after { content: "−"; }
.cost-assumptions summary span { color: #6f7074; font-size: 7px; }
.cost-grid { padding: 3px 0 4px; }
.cost-wide { grid-column: 1 / -1; }

.strategy-message { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; min-height: 43px; border: 1px solid var(--line); background: #121213; padding: 10px; }
.strategy-message > span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--signal); color: var(--signal); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.strategy-message p { margin: 2px 0 0; color: var(--muted-strong); font: 600 8px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.strategy-message.is-error { border-color: rgba(255, 79, 89, .55); background: rgba(255, 79, 89, .055); }
.strategy-message.is-error > span { border-color: var(--sell); color: var(--sell); }
.strategy-message.is-waiting { border-color: rgba(230, 189, 89, .45); background: rgba(230, 189, 89, .045); }
.strategy-message.is-waiting > span { border-color: var(--spread-amber); color: var(--spread-amber); }

.run-backtest { width: 100%; min-height: 42px; margin-top: 10px; border: 1px solid var(--signal); border-radius: 7px; background: rgba(24, 211, 145, .12); color: #b4f5dc; font: 720 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.run-backtest:hover:not(:disabled) { background: rgba(24, 211, 145, .2); color: #e0fff3; }
.run-backtest:disabled { cursor: wait; border-color: var(--line); color: #66676a; background: #171718; }

.coverage-ledger { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.coverage-ledger div { min-height: 57px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 11px 15px; }
.coverage-ledger div:nth-child(2n) { border-right: 0; }
.coverage-ledger div:nth-last-child(-n + 2) { border-bottom: 0; }
.coverage-ledger span,
.coverage-ledger strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.coverage-ledger span { color: #747579; font-size: 7px; }
.coverage-ledger strong { margin-top: 8px; color: var(--muted-strong); font-size: 10px; }

.spread-history { min-width: 0; background: #0b0b0c; }
.history-heading { align-items: center; min-height: 68px; padding-right: 20px; }
.chart-view-switch { grid-template-columns: 1fr 1fr; width: 150px; }
.chart-view-switch button { min-height: 32px; }

.result-ledger { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); border-bottom: 1px solid var(--line); background: var(--spread-panel); }
.result-ledger > div { min-width: 0; min-height: 78px; border-right: 1px solid var(--line); padding: 14px 16px; }
.result-ledger > div:last-child { border-right: 0; }
.result-ledger span,
.result-ledger strong,
.result-ledger small { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.result-ledger span { color: #747579; font-size: 7px; }
.result-ledger strong { overflow: hidden; margin-top: 9px; color: var(--text); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.result-ledger small { overflow: hidden; margin-top: 6px; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.result-ledger .result-primary strong { color: var(--signal); font-size: 22px; letter-spacing: -.04em; }
.result-ledger strong.is-negative { color: var(--sell); }
.result-ledger strong.is-positive { color: var(--signal); }

.spread-chart-field { position: relative; height: 390px; min-height: 320px; overflow: hidden; }
#spreadChart { display: block; width: 100%; height: 100%; }
.spread-empty { position: absolute; top: 50%; left: 50%; width: min(440px, calc(100% - 40px)); transform: translate(-50%, -50%); border: 1px solid rgba(230, 189, 89, .42); background: rgba(24, 21, 14, .96); padding: 16px 18px; text-align: center; }
.spread-empty strong,
.spread-empty span { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-empty strong { color: var(--spread-amber); font-size: 10px; }
.spread-empty span { margin-top: 7px; color: #b9ad8e; font-size: 8px; line-height: 1.55; }
.spread-tooltip { position: absolute; z-index: 3; width: min(300px, calc(100% - 28px)); transform: translate(12px, -50%); border: 1px solid var(--line-strong); background: rgba(17, 17, 18, .97); color: var(--muted-strong); padding: 9px 10px; pointer-events: none; font: 650 8px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-tooltip b { color: var(--text); }

.spread-chart-footer { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 18px; }
.spread-chart-footer > span { color: #717276; font: 600 8px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: right; }
.spread-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; color: var(--muted); font: 600 8px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.spread-legend i { display: inline-block; width: 17px; height: 2px; background: currentColor; }
.spread-legend .entry-line { color: var(--signal); }
.spread-legend .exit-line { color: var(--sell); }
.spread-legend .entry-threshold { height: 0; border-top: 1px dashed var(--spread-amber); background: none; }
.spread-legend .exit-threshold { height: 0; border-top: 1px dashed var(--spread-blue); background: none; }
.spread-legend .pnl-only { display: none; }
.spread-legend.is-pnl .gap-only { display: none; }
.spread-legend.is-pnl .pnl-only { display: inline-flex; }
.spread-legend .equity-line { color: var(--spread-blue); }
.spread-legend .buy-marker,
.spread-legend .sell-marker { width: 0; height: 0; background: none; }
.spread-legend .buy-marker { border-right: 5px solid transparent; border-bottom: 9px solid var(--signal); border-left: 5px solid transparent; }
.spread-legend .sell-marker { border-top: 9px solid var(--sell); border-right: 5px solid transparent; border-left: 5px solid transparent; }

.distribution-ledger { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--spread-panel); }
.distribution-ledger div { min-width: 0; min-height: 59px; border-right: 1px solid var(--line); padding: 12px 14px; }
.distribution-ledger div:last-child { border-right: 0; }
.distribution-ledger span,
.distribution-ledger strong { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.distribution-ledger span { color: #747579; font-size: 7px; }
.distribution-ledger strong { margin-top: 9px; color: var(--muted-strong); font-size: 11px; }

.trade-history-ledger { margin-top: 16px; border: 1px solid var(--line-strong); background: var(--spread-panel); }
.trade-history-scroll { overflow-x: auto; }
.trade-history-ledger table { width: 100%; min-width: 900px; border-collapse: collapse; }
.trade-history-ledger th,
.trade-history-ledger td { height: 42px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 13px; text-align: right; font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.trade-history-ledger th:first-child,
.trade-history-ledger th:nth-child(2),
.trade-history-ledger td:first-child,
.trade-history-ledger td:nth-child(2) { text-align: left; }
.trade-history-ledger th { height: 38px; color: #747579; font-size: 7px; letter-spacing: .04em; }
.trade-history-ledger td { color: var(--muted-strong); }
.trade-history-ledger th:last-child,
.trade-history-ledger td:last-child { border-right: 0; }
.trade-history-ledger tbody tr:last-child td { border-bottom: 0; }
.trade-history-ledger td[colspan] { color: #717276; text-align: center; }
.trade-history-ledger td.is-positive { color: var(--signal); }
.trade-history-ledger td.is-negative { color: var(--sell); }

.spread-footnote { display: flex; justify-content: space-between; gap: 24px; padding: 13px 3px 0; color: #68696d; font: 600 8px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.spread-footnote span:last-child { max-width: 74ch; text-align: right; }

@media (max-width: 1120px) {
  .spread-route { grid-template-columns: 1fr 180px 1fr; }
  .spread-route-exit { grid-column: 1 / -1; min-height: 58px !important; border-top: 1px solid var(--line); border-right: 0 !important; }
  .spread-route-exit { flex-direction: row; gap: 14px; }
  .spread-route-exit strong { margin-top: 0; font-size: 16px; }
  .spread-route-exit small { margin-top: 0; }
  .result-ledger { grid-template-columns: 1.2fr 1fr 1fr; }
  .result-ledger > div:nth-child(3) { border-right: 0; }
  .result-ledger > div:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .result-ledger > div:nth-child(4) { grid-column: 1 / 2; }
  .result-ledger > div:nth-child(5) { grid-column: 2 / 4; border-right: 0; }
}

@media (max-width: 900px) {
  .spread-heading { display: block; padding: 28px 4px 24px; }
  .spread-feed-state { min-width: 0; margin-top: 20px; }
  .spread-workbench { display: block; }
  .strategy-ledger { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .spread-chart-field { height: 420px; }
  .spread-execution-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .spread-heading h1 { font-size: 38px; }
  .spread-route { grid-template-columns: 1fr 1fr; }
  .spread-route-core { grid-column: 1 / -1; grid-row: 1; min-height: 72px !important; border-bottom: 1px solid var(--line); border-right: 0 !important; }
  .spread-route-leg { min-height: 76px !important; padding: 12px; }
  .spread-route-leg.buy { border-right: 1px solid var(--line) !important; }
  .spread-route-leg.sell { border-right: 0 !important; }
  .spread-route-exit { grid-column: 1 / -1; }
  .result-ledger { grid-template-columns: 1fr 1fr; }
  .result-ledger > div { border-top: 1px solid var(--line); }
  .result-ledger .result-primary { grid-column: 1 / -1; border-top: 0; border-right: 0; }
  .result-ledger > div:nth-child(3) { border-right: 0; }
  .result-ledger > div:nth-child(4) { grid-column: auto; }
  .result-ledger > div:nth-child(5) { grid-column: auto; border-right: 0; }
  .distribution-ledger { grid-template-columns: repeat(3, 1fr); }
  .distribution-ledger div:nth-child(3n) { border-right: 0; }
  .distribution-ledger div:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .spread-chart-footer { display: block; }
  .spread-chart-footer > span { display: block; margin-top: 8px; text-align: left; }
  .spread-footnote { display: block; }
  .spread-footnote span { display: block; }
  .spread-footnote span:last-child { margin-top: 5px; text-align: left; }
  .spread-execution-route { grid-template-columns: 1fr 1fr; }
  .spread-execution-gap { grid-column: 1 / -1; grid-row: 1; min-height: 72px !important; border-bottom: 1px solid var(--line); border-right: 0 !important; }
  .spread-execution-route > .buy { border-right: 1px solid var(--line); }
  .spread-execution-route > .sell { border-right: 0; }
  .spread-execution-fields { grid-template-columns: 1fr; }
  .spread-execution-fields > label:last-child { grid-column: auto; }
  .spread-execution-safety { grid-template-columns: 1fr; }
  .spread-execution-safety div { border-right: 0; border-bottom: 1px solid var(--line); }
  .spread-execution-safety div:last-child { border-bottom: 0; }
  .spread-execution-status header { display: block; }
  .spread-execution-status header strong { display: block; margin-top: 6px; text-align: left; }
  .spread-book-summary { justify-items: start; margin-top: 9px; }
}

@media (max-width: 480px) {
  .workspace-nav { gap: 13px; overflow-x: auto; scrollbar-width: none; }
  .workspace-nav::-webkit-scrollbar { display: none; }
  .workspace-nav a { font-size: 8px; letter-spacing: .02em; white-space: nowrap; }
  .spread-route-leg { grid-template-columns: 30px 1fr; gap: 9px; }
  .spread-route-leg img { width: 30px; height: 30px; }
  .spread-route-leg b { grid-column: 1 / -1; padding-left: 39px; font-size: 10px; }
  .spread-heading-links { align-items: flex-end; flex-direction: column; }
  .spread-execution-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .spread-execution-shell { max-height: calc(100vh - 18px); }
  .spread-execution-header { padding: 18px 16px 16px; }
  .spread-execution-header h2 { font-size: 22px; }
  .spread-execution-fields { padding: 16px; }
  .spread-execution-auth,
  .spread-execution-status,
  .spread-execution-confirm,
  .spread-execution-error { margin-right: 16px; margin-left: 16px; }
  .spread-execution-actions { align-items: stretch; flex-direction: column-reverse; padding: 13px 16px 16px; }
  .spread-execution-actions button { width: 100%; }
  .strategy-heading,
  .history-heading,
  .trade-history-ledger > header { padding-right: 13px; padding-left: 13px; }
  #strategyForm { padding-right: 12px; padding-left: 12px; }
  .direction-switch { grid-template-columns: 1fr; }
  .direction-switch button { border-right: 0; border-bottom: 1px solid var(--line); }
  .direction-switch button:last-child { border-bottom: 0; }
  .threshold-grid { grid-template-columns: 1fr; gap: 0; }
  .spread-chart-field { height: 350px; min-height: 320px; }
  .result-ledger > div { padding: 13px 11px; }
  .distribution-ledger div { padding: 11px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}