.market-replay {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(1060px, 100vw);
  height: min(720px, 100dvh);
  max-width: 100vw;
  max-height: 100dvh;
  padding: 16px;
  border: 1px solid #425060;
  border-radius: 7px;
  background: #18202b;
  color: #e8edf4;
  font: 14px system-ui, sans-serif;
}
.market-replay[open] { display: flex; flex-direction: column; gap: 10px; }
.market-replay::backdrop { background: #131b24; }
.market-replay header, .market-replay .replay-navigation, .market-replay .replay-marks {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.market-replay h2 { margin: 0; font-size: 19px; }
.market-replay .replay-instrument { color: #b7c5d5; font-weight: 500; }
.market-replay [data-replay=close] { margin-inline-start: auto; font-size: 18px; line-height: 1; }
.market-replay button, .market-replay select {
  background: #263341; border: 1px solid #4b5a6d; color: #e8edf4;
  padding: 5px 10px; border-radius: 3px; font: inherit; cursor: pointer;
}
.market-replay button:hover:enabled, .market-replay [aria-pressed=true] { background: #344d65; }
.market-replay button:disabled, .market-replay select:disabled { opacity: .45; cursor: default; }
.market-replay :focus-visible { outline: 2px solid #8ebdff; outline-offset: 1px; }
.market-replay .replay-chart { flex: 1; min-height: 86px; }
.market-replay canvas { display: block; width: 100%; height: 100%; background: #101821; }
.market-replay [data-replay=cursor] { flex: 1; min-width: 100px; accent-color: #8ebdff; }
.market-replay .replay-candle { min-height: 20px; font-variant-numeric: tabular-nums; }
.market-replay .replay-status:empty { display: none; }
@media (max-width: 600px), (max-height: 420px) {
  .market-replay { padding: 8px; gap: 6px; font-size: 12px; }
  .market-replay h2 { font-size: 15px; }
}
.market-replay .replay-mark-files { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.market-replay [data-replay=selected-mark] { flex: 1; min-width: 130px; }
.market-replay .replay-clock { font-variant-numeric: tabular-nums; color: #b7c5d5; }

.market-replay .replay-trading { max-height: min(33vh, 230px); overflow: auto; }
.replay-trading summary { cursor: pointer; font-weight: 600; }
.replay-trading input { width: 8em; font: inherit; }
.replay-trading p { margin: 6px 0; }
.replay-trading [data-sim=quote], .replay-trading [data-sim=account] { font-variant-numeric: tabular-nums; }
.replay-trading [data-sim=history] { padding-inline-start: 22px; }
.replay-trading a[data-sim] { color: inherit; text-underline-offset: 0.2em; margin-inline-end: 0.5em; }