.chart-replay-view { max-width: none; padding: 18px; }
.chart-replay-shell { display: flex; flex-direction: column; width: 100%; min-height: calc(100dvh - 178px); overflow: hidden; border: 1px solid #1f2a3b; border-radius: 12px; background: #080d15; box-shadow: 0 22px 70px rgba(0,0,0,.22); }
.chart-replay-toolbar, .chart-replay-player { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 14px; background: #0c131e; border-color: #1b2735; }
.chart-replay-toolbar { border-bottom: 1px solid #1b2735; }
.chart-replay-brand { display: grid; gap: 1px; min-width: 172px; }
.chart-replay-brand strong { color: #e7edf7; font-size: 14px; font-weight: 600; }
.chart-replay-kicker { color: #6d7e95; font: 600 10px var(--font-mono); letter-spacing: .12em; }
.chart-replay-controls { display: flex; align-items: center; gap: 7px; min-width: 0; }
.replay-symbol-field, .chart-replay-controls select, .replay-setting, .replay-date-field { border: 1px solid #263548; border-radius: 6px; background: #101a27; color: #dbe7f5; }
.replay-symbol-field { display: flex; align-items: center; gap: 7px; padding: 0 8px; height: 34px; }
.replay-symbol-field span { color: #6f829b; font-size: 11px; }
.replay-symbol-field input { width: 64px; border: 0; outline: 0; background: transparent; color: #f8fafc; font: 600 13px var(--font-mono); text-transform: uppercase; }
.chart-replay-controls select { height: 34px; padding: 0 27px 0 9px; font: 12px var(--font-sans); }
.replay-primary, .replay-wide-button, .replay-date-field button, .replay-icon-button, .replay-player-button, .replay-play-button { border: 0; border-radius: 6px; color: #e8f3ff; cursor: pointer; transition: background .16s ease, transform .16s ease; }
.replay-primary { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; background: #2563eb; font: 600 12px var(--font-sans); }
.replay-primary:hover { background: #3b82f6; }.replay-primary:active, .replay-tool:active, .replay-player-button:active { transform: translateY(1px); }
.chart-replay-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }.replay-save-status { color: #718198; font-size: 11px; white-space: nowrap; }.replay-save-status[data-state="saved"] { color: #34d399; }.replay-save-status[data-state="error"] { color: #fb7185; }
.replay-exit-button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border: 1px solid rgba(126, 149, 176, .22); border-radius: 5px; background: rgba(10, 17, 28, .74); color: #93a7bd; cursor: pointer; font: 11px var(--font-sans); }.replay-exit-button:hover { border-color: rgba(129, 169, 215, .52); color: #d8e7f6; background: #17263a; }
.replay-icon-button { display: grid; place-items: center; width: 34px; height: 34px; background: #152237; font-size: 17px; }.replay-icon-button:hover { background: #233653; }
.chart-replay-workspace { display: grid; grid-template-columns: 49px minmax(0,1fr) 226px; flex: 1; min-height: 580px; }
.chart-replay-tools { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 7px; border-right: 1px solid #1b2735; background: #0b111b; }
.replay-tool { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #95a4b8; cursor: pointer; font-size: 18px; }.replay-tool:hover { background: #162233; color: #e7effb; }.replay-tool.active { border-color: #315f9d; background: #133765; color: #7bc1ff; }.replay-tool-divider { width: 25px; height: 1px; margin: 4px 0; background: #253449; }
.chart-replay-stage { position: relative; min-width: 0; background: #090f18; }.replay-chart { width: 100%; height: 100%; min-height: 580px; }.chart-replay-meta { position: absolute; z-index: 2; top: 12px; left: 14px; display: flex; align-items: center; gap: 14px; pointer-events: none; color: #8da1b9; font: 11px var(--font-mono); }.chart-replay-meta span:first-child { color: #dbe9f8; font-weight: 600; }.chart-replay-meta span:last-child { color: #4fd1a5; }
.replay-chart-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 9px; color: #7990aa; background: #090f18; }.replay-chart-empty[hidden] { display: none; }.replay-chart-empty i { color: #3e73aa; font-size: 34px; }.replay-chart-empty strong { color: #c2d0df; font-size: 15px; }.replay-chart-empty span { font-size: 12px; }
.replay-note-popover { position: absolute; z-index: 8; top: 60px; left: 50%; width: min(290px,calc(100% - 30px)); padding: 12px; border: 1px solid #34506f; border-radius: 8px; background: #111c2a; box-shadow: 0 16px 38px rgba(0,0,0,.36); transform: translateX(-50%); }.replay-note-popover label { display: grid; gap: 6px; color: #a8bbd2; font-size: 12px; }.replay-note-popover textarea { resize: vertical; border: 1px solid #31445c; border-radius: 5px; background: #09111b; color: #eff6ff; padding: 7px; font: 12px var(--font-sans); }.replay-note-popover > div { display: flex; justify-content: flex-end; gap: 7px; margin-top: 10px; }.replay-note-popover button:not(.replay-primary) { border: 0; background: transparent; color: #99aabd; cursor: pointer; }
.chart-replay-panel { padding: 12px; border-left: 1px solid #1b2735; background: #0b111b; }.replay-panel-section { padding: 5px 0 16px; border-bottom: 1px solid #1d2a3a; }.replay-panel-section + .replay-panel-section { padding-top: 15px; }.replay-panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; color: #d5e2f0; font-size: 12px; font-weight: 600; }.replay-setting { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 8px; color: #7890aa; font-size: 11px; }.replay-setting + .replay-setting { margin-top: 7px; }.replay-setting input[type="number"] { width: 58px; border: 0; outline: 0; background: transparent; color: #e5effa; font: 12px var(--font-mono); }.replay-setting input[type="color"] { width: 28px; height: 20px; padding: 0; border: 0; background: transparent; cursor: pointer; }.replay-switch { width: 30px; height: 17px; padding: 2px; border: 0; border-radius: 999px; background: #374151; cursor: pointer; }.replay-switch span { display: block; width: 13px; height: 13px; border-radius: 50%; background: #cbd5e1; transition: transform .16s ease; }.replay-switch.is-on { background: #2563eb; }.replay-switch.is-on span { transform: translateX(13px); background: #fff; }
.replay-wide-button { display: flex; align-items: center; gap: 7px; width: 100%; height: 34px; margin-bottom: 7px; padding: 0 9px; background: #152237; color: #c7d5e6; font-size: 12px; }.replay-wide-button:hover { background: #20334d; }.replay-date-field { display: grid; grid-template-columns: 1fr auto; gap: 5px; padding: 7px; }.replay-date-field span { grid-column: 1 / -1; color: #71859e; font-size: 11px; }.replay-date-field input { min-width: 0; border: 0; outline: 0; background: transparent; color: #dce8f5; font: 10px var(--font-mono); }.replay-date-field button { padding: 3px 6px; background: #25476f; font-size: 10px; }.replay-hint { margin: 11px 0 0; color: #72859c; font-size: 11px; line-height: 1.5; }
.chart-replay-player { gap: 8px; min-height: 52px; border-top: 1px solid #1b2735; border-bottom: 0; }.replay-mode-badge { min-width: 87px; color: #91a4bc; font-size: 11px; }.replay-player-button, .replay-play-button { display: grid; place-items: center; width: 30px; height: 30px; background: transparent; color: #bdcce0; font-size: 17px; }.replay-player-button:hover { background: #1a293b; }.replay-play-button { width: 34px; background: #2563eb; color: #fff; }.replay-play-button:hover { background: #3b82f6; }.chart-replay-player select { border: 0; outline: 0; background: transparent; color: #b8c8db; font: 11px var(--font-mono); }.chart-replay-player input[type="range"] { flex: 1; min-width: 50px; accent-color: #3b82f6; }.chart-replay-player > span:last-child { min-width: 76px; color: #8699b0; font-size: 10px; text-align: right; }
@media (max-width: 900px) { .chart-replay-view { padding: 10px; }.chart-replay-toolbar { flex-wrap: wrap; }.chart-replay-brand { min-width: 145px; }.chart-replay-actions { margin-left: 0; }.chart-replay-workspace { grid-template-columns: 43px minmax(0,1fr); }.chart-replay-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid #1b2735; border-left: 0; }.replay-chart { min-height: 470px; }.chart-replay-shell { min-height: calc(100dvh - 125px); } }
@media (max-width: 620px) { .chart-replay-controls { order: 3; width: 100%; overflow-x: auto; }.chart-replay-actions { margin-left: auto; }.chart-replay-workspace { min-height: 430px; }.replay-chart { min-height: 430px; }.chart-replay-meta span:nth-child(2) { display: none; }.chart-replay-panel { grid-template-columns: 1fr; }.chart-replay-player { gap: 4px; padding: 8px; }.replay-mode-badge { display: none; }.chart-replay-player > span:last-child { min-width: 52px; } }

/* Immersive terminal mode: the chart becomes the application, not a card in it. */
body.chart-replay-active { overflow: hidden; background: #050a12; }
body.chart-replay-active .app-container { max-width: none; min-height: 100dvh; padding: 0; background: #050a12; }
body.chart-replay-active .dashboard-header,
body.chart-replay-active .dashboard-tabs,
body.chart-replay-active .dashboard-view-status { display: none !important; }
body.chart-replay-active #chart-replay-view { display: flex !important; position: fixed; inset: 0; z-index: 30; padding: 0; background:
  radial-gradient(circle at 73% 5%, rgba(37, 99, 235, .09), transparent 28rem),
  radial-gradient(circle at 18% 100%, rgba(15, 118, 110, .06), transparent 32rem), #050a12; }
body.chart-replay-active .chart-replay-shell { min-height: 100dvh; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.chart-replay-active .chart-replay-toolbar { position: relative; z-index: 5; min-height: 48px; padding: 7px 18px; border-bottom-color: rgba(111, 135, 162, .14); background: linear-gradient(180deg, rgba(7, 13, 22, .94), rgba(7, 13, 22, .68)); backdrop-filter: blur(18px); }
body.chart-replay-active .chart-replay-brand { min-width: 205px; }.chart-replay-brand strong { letter-spacing: -.015em; }
body.chart-replay-active .chart-replay-workspace { grid-template-columns: 1fr; min-height: 0; position: relative; }
body.chart-replay-active .chart-replay-stage { grid-column: 1; grid-row: 1; }.chart-replay-stage::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(rgba(133, 164, 196, .13) .45px, transparent .5px); background-size: 4px 4px; opacity: .08; mix-blend-mode: screen; }
body.chart-replay-active .replay-chart { min-height: 0; height: 100%; }.chart-replay-meta { top: 13px; left: 21px; z-index: 3; padding: 6px 8px; border-radius: 4px; background: rgba(6, 12, 21, .48); backdrop-filter: blur(8px); }
body.chart-replay-active .chart-replay-tools { position: absolute; z-index: 6; top: 76px; left: 16px; padding: 6px; border: 1px solid rgba(102, 130, 160, .22); border-radius: 8px; background: rgba(8, 15, 25, .72); box-shadow: 0 14px 34px rgba(0, 0, 0, .24); backdrop-filter: blur(16px); }
body.chart-replay-active .chart-replay-panel { position: absolute; z-index: 6; top: 14px; right: 16px; width: 205px; max-height: calc(100% - 28px); overflow: auto; padding: 10px; border: 1px solid rgba(102, 130, 160, .2); border-radius: 8px; background: rgba(8, 15, 25, .69); box-shadow: 0 14px 34px rgba(0, 0, 0, .22); backdrop-filter: blur(16px); }
body.chart-replay-active .chart-replay-player { position: absolute; z-index: 7; right: 50%; bottom: 14px; left: 50%; width: min(720px, calc(100% - 124px)); min-height: 42px; padding: 6px 10px; transform: translateX(-50%); border: 1px solid rgba(102, 130, 160, .26); border-radius: 8px; background: rgba(8, 15, 25, .78); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); backdrop-filter: blur(16px); }
body.chart-replay-active .replay-tool { width: 32px; height: 32px; }.chart-replay-player .replay-mode-badge { color: #7890a9; }.chart-replay-player input[type="range"] { min-width: 120px; }
@media (max-width: 760px) { body.chart-replay-active .chart-replay-brand { min-width: auto; }.chart-replay-active .chart-replay-kicker, body.chart-replay-active .replay-save-status { display: none; } body.chart-replay-active .chart-replay-panel { top: 57px; right: 10px; width: 184px; max-height: calc(100% - 116px); } body.chart-replay-active .chart-replay-tools { top: 58px; left: 8px; } body.chart-replay-active .chart-replay-player { bottom: 8px; width: calc(100% - 90px); } .replay-exit-button { font-size: 0; width: 30px; padding: 0; justify-content: center; }.replay-exit-button i { font-size: 15px; } }

/* Trading-terminal reference pass: flat two-row command system and full-width replay rail. */
body.chart-replay-active #chart-replay-view { background: #0a1018; }
body.chart-replay-active .chart-replay-toolbar { min-height: 50px; padding: 0 20px; border-bottom: 1px solid #202b39; background: #101822; backdrop-filter: none; }
body.chart-replay-active .chart-replay-brand { display: flex; align-items: center; gap: 16px; min-width: auto; }.chart-replay-brand strong { color: #dce6f1; font-size: 13px; font-weight: 600; }.chart-replay-kicker { color: #f0f5fb; font-size: 14px; letter-spacing: -.02em; }
body.chart-replay-active .chart-replay-actions { gap: 4px; }.replay-icon-button { width: 30px; height: 30px; border-radius: 3px; background: transparent; color: #98a9bb; }.replay-icon-button:hover { background: #1c2938; color: #e6eef7; }.replay-exit-button { border: 0; border-radius: 3px; background: transparent; color: #9aaaba; }.replay-exit-button:hover { background: #1c2938; border-color: transparent; color: #e8f0f8; }
.chart-replay-commandbar { display: flex; align-items: center; gap: 5px; min-height: 43px; padding: 0 20px; overflow: auto hidden; border-bottom: 1px solid #202b39; background: #0d141e; white-space: nowrap; }.chart-replay-commandbar .replay-symbol-field { height: 28px; padding: 0 7px; border: 0; border-radius: 0; background: transparent; }.chart-replay-commandbar .replay-symbol-field span { display: none; }.chart-replay-commandbar .replay-symbol-field input { width: 45px; font-size: 15px; }.replay-command-name { max-width: 235px; overflow: hidden; color: #aebdcd; font-size: 12px; text-overflow: ellipsis; }.replay-command-divider { width: 1px; height: 20px; margin: 0 7px; background: #283444; }.chart-replay-commandbar select { height: 28px; padding: 0 23px 0 7px; border: 0; border-radius: 3px; background: transparent; color: #c3d0dc; font: 12px var(--font-sans); }.chart-replay-commandbar select:hover, .replay-command-button:hover { background: #1b2939; }.chart-replay-commandbar .replay-primary { height: 28px; padding: 0 8px; border-radius: 3px; background: #2463d8; font-size: 11px; }.replay-command-button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 7px; border: 0; border-radius: 3px; background: transparent; color: #b8c6d4; cursor: pointer; font: 11px var(--font-sans); }.chart-replay-commandbar .replay-date-field { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 5px; border: 0; border-radius: 3px; background: transparent; }.chart-replay-commandbar .replay-date-field span { display: none; }.chart-replay-commandbar .replay-date-field input { width: 133px; color: #b5c4d1; font-size: 10px; }.chart-replay-commandbar .replay-date-field button { border-radius: 2px; background: #243c5b; color: #c9d9e9; }
body.chart-replay-active .chart-replay-workspace { min-height: 0; }.chart-replay-stage { background: #0a1018; }.chart-replay-stage::after { display: none; }.chart-replay-meta { top: 14px; left: 74px; padding: 0; border-radius: 0; background: transparent; backdrop-filter: none; color: #9bacbd; font-size: 11px; }.chart-replay-meta span:first-child { color: #e4edf6; }.chart-replay-meta span:last-child { color: #2bc99b; }
body.chart-replay-active .chart-replay-tools { top: 0; bottom: 0; left: 0; width: 52px; gap: 4px; padding: 10px 8px; border: 0; border-right: 1px solid #202b39; border-radius: 0; background: #0d141e; box-shadow: none; backdrop-filter: none; }.replay-tool { width: 35px; height: 35px; border-radius: 3px; color: #a3b2c2; }.replay-tool:hover { background: #192737; }.replay-tool.active { border-color: #2e69ba; background: #1e4f93; color: #d8ebff; }.replay-tool-divider { background: #283545; }
body.chart-replay-active .chart-replay-panel { top: 0; right: 0; width: 240px; max-height: none; padding: 15px 12px; border: 0; border-left: 1px solid #202b39; border-radius: 0; background: #0d141e; box-shadow: none; backdrop-filter: none; transition: transform .18s ease, opacity .18s ease; }.replay-panel-heading { color: #d7e1eb; }.replay-panel-section { border-bottom-color: #243140; }.replay-setting { border-color: #283849; border-radius: 3px; background: #111c28; }.replay-wide-button { border-radius: 3px; background: #172638; }.replay-hint { color: #718499; }
body.chart-replay-inspector-collapsed .chart-replay-panel { pointer-events: none; opacity: 0; transform: translateX(100%); } body.chart-replay-inspector-collapsed .chart-replay-stage { margin-right: 0; }
body.chart-replay-active .chart-replay-player { right: 0; bottom: 0; left: 0; width: auto; min-height: 138px; padding: 12px 28px 21px 73px; transform: none; border: 0; border-top: 1px solid #202b39; border-radius: 0; background: #0d141e; box-shadow: none; backdrop-filter: none; }.chart-replay-player::before { content: ''; position: absolute; right: 28px; bottom: 44px; left: 73px; height: 38px; border: 1px solid #233245; background: linear-gradient(180deg, rgba(36,99,216,.10), rgba(36,99,216,.02)); pointer-events: none; }.chart-replay-player::after { content: ''; position: absolute; right: 28px; bottom: 25px; left: 73px; height: 1px; background: #31435a; pointer-events: none; }.chart-replay-player > * { position: relative; z-index: 1; }.replay-mode-badge { min-width: 90px; color: #bdc9d7; }.chart-replay-player input[type="range"] { position: absolute; right: 31px; bottom: 38px; left: 75px; z-index: 3; width: auto; accent-color: #2770e6; }.chart-replay-player > span:last-child { margin-left: auto; color: #8193a8; }
body.chart-replay-active .chart-replay-panel ~ .chart-replay-player { margin-right: 0; }
@media (max-width: 900px) { .chart-replay-commandbar { padding: 0 12px; } body.chart-replay-active .chart-replay-panel { width: 210px; } body.chart-replay-active .chart-replay-player { min-height: 112px; padding-left: 63px; }.chart-replay-player::before { left: 63px; }.chart-replay-player::after, .chart-replay-player input[type="range"] { left: 65px; } }
@media (max-width: 650px) { body.chart-replay-active .chart-replay-toolbar { padding: 0 10px; }.chart-replay-commandbar { padding: 0 8px; }.replay-command-name, .chart-replay-commandbar .replay-command-divider:nth-of-type(2), .chart-replay-commandbar .replay-date-field { display: none; } body.chart-replay-active .chart-replay-panel { width: min(230px, 74vw); } body.chart-replay-active .chart-replay-player { min-height: 78px; padding: 8px 10px 10px 60px; }.chart-replay-player::before, .chart-replay-player::after { display: none; }.chart-replay-player input[type="range"] { position: static; flex: 1; min-width: 40px; }.replay-mode-badge { display: none; } }

/* Keep chart data legible: KLineChart owns the in-chart OHLC readout, while our controls live outside the canvas. */
body.chart-replay-active .chart-replay-meta { display: none; }
body.chart-replay-active .chart-replay-workspace { position: relative; }

/* Indicator options are deliberately progressive: the canvas remains clear until the trader asks for settings. */
body.chart-replay-active .chart-replay-settings-popover {
  position: absolute;
  z-index: 12;
  top: 14px;
  right: 14px;
  width: 258px;
  max-height: none;
  padding: 12px;
  border: 1px solid #2a3a4d;
  border-radius: 5px;
  background: #101923;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
}
body.chart-replay-active .chart-replay-settings-popover[hidden] { display: none; }
.replay-settings-close { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #8ca0b5; cursor: pointer; }
.replay-settings-close:hover { background: #1d2b3a; color: #edf4fb; }
.replay-indicator-row { display: flex; align-items: center; justify-content: space-between; height: 30px; margin: 0 0 9px; color: #d7e2ec; font: 600 12px var(--font-sans); }
.replay-indicator-row span { display: inline-flex; align-items: center; gap: 7px; }
.replay-indicator-row i { color: #f6c453; font-size: 16px; }
.replay-indicator-divider { height: 1px; margin: 12px 0; background: #2a3542; }

body.chart-replay-active .replay-hint {
  position: absolute;
  z-index: 8;
  bottom: 145px;
  left: 69px;
  max-width: min(510px, calc(100% - 330px));
  margin: 0;
  padding: 6px 9px;
  border: 1px solid rgba(64, 88, 115, .52);
  border-radius: 3px;
  background: rgba(13, 20, 30, .9);
  color: #91a4b8;
  font-size: 11px;
  line-height: 1.35;
  pointer-events: none;
}

@media (max-width: 650px) {
  body.chart-replay-active .chart-replay-settings-popover { top: 8px; right: 8px; width: min(258px, calc(100% - 66px)); }
  body.chart-replay-active .replay-hint { bottom: 86px; left: 58px; max-width: calc(100% - 76px); }
}

/* Trading workstation composition: one command strip, uninterrupted canvas, compact replay dock. */
body.chart-replay-active #chart-replay-view,
body.chart-replay-active .chart-replay-shell { background: #0b0b0b; }

body.chart-replay-active .chart-replay-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  height: 42px;
  padding: 0 8px;
  overflow: visible;
  border-bottom: 1px solid #2b2b2b;
  background: #101010;
}

body.chart-replay-active .chart-replay-toolbar .replay-symbol-field {
  display: flex;
  align-items: center;
  width: 132px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 15px;
  background: #272727;
}
body.chart-replay-active .chart-replay-toolbar .replay-symbol-field span { display: none; }
body.chart-replay-active .chart-replay-toolbar .replay-symbol-field input { width: 100%; color: #f1f1f1; font: 700 13px var(--font-sans); }
body.chart-replay-active .chart-replay-toolbar .replay-favorite-toggle { margin-left: -34px; color: #969696; }
body.chart-replay-active .chart-replay-toolbar .replay-favorite-toggle:hover { color: #e6e6e6; }
body.chart-replay-active .chart-replay-toolbar .replay-favorite-toggle.is-active { color: #f6c453; }
body.chart-replay-active .chart-replay-toolbar select {
  height: 30px;
  padding: 0 24px 0 8px;
  border: 0;
  border-radius: 4px;
  outline: 0;
  background: #101010;
  color: #e2e2e2;
  font: 12px var(--font-sans);
}
body.chart-replay-active .chart-replay-toolbar select:hover,
body.chart-replay-active .chart-replay-toolbar select:focus-visible { background: #252525; }
body.chart-replay-active .chart-replay-toolbar select option { background: #1f1f1f; color: #f0f0f0; }
body.chart-replay-active .chart-replay-toolbar .replay-icon-button { width: 30px; height: 30px; color: #c8c8c8; }
body.chart-replay-active .chart-replay-toolbar .replay-icon-button:hover { background: #292929; }
body.chart-replay-active .chart-replay-toolbar .replay-chart-type { font-size: 17px; }
body.chart-replay-active .chart-replay-toolbar .replay-command-button {
  height: 30px;
  padding: 0 8px;
  color: #d6d6d6;
  font-size: 12px;
}
body.chart-replay-active .chart-replay-toolbar .replay-command-button:hover { background: #292929; }
body.chart-replay-active .chart-replay-toolbar .replay-command-divider { height: 22px; margin: 0 3px; background: #353535; }
body.chart-replay-active .chart-replay-toolbar .replay-command-name { display: none; }
body.chart-replay-active .chart-replay-actions { margin-left: auto; }
body.chart-replay-active .replay-save-status { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
body.chart-replay-active .replay-exit-button { height: 30px; padding: 0 8px; color: #c8c8c8; }

.replay-start-menu { position: relative; }
.replay-start-menu > summary { list-style: none; cursor: pointer; }
.replay-start-menu > summary::-webkit-details-marker { display: none; }
.replay-start-menu[open] > summary { background: #2d2d2d; color: #fff; }
.replay-start-popover {
  position: absolute;
  z-index: 20;
  top: 35px;
  left: 0;
  width: 248px;
  padding: 6px;
  border: 1px solid #343434;
  border-radius: 6px;
  background: #1b1b1b;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .52);
}
.replay-start-popover > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 49px; padding: 7px 9px; border: 0; border-radius: 4px; background: transparent; color: #ddd; text-align: left; cursor: pointer; }
.replay-start-popover > button:hover { background: #2a2a2a; }
.replay-start-popover > button > i { font-size: 19px; color: #aeb8c4; }
.replay-start-popover > button span { display: grid; gap: 2px; }
.replay-start-popover > button strong { font-size: 12px; font-weight: 600; }
.replay-start-popover > button small { color: #858585; font-size: 10px; }
.replay-start-popover .replay-date-field { display: grid; grid-template-columns: 1fr auto; gap: 5px; height: auto; margin-top: 5px; padding: 8px; border-top: 1px solid #343434; background: transparent; }
.replay-start-popover .replay-date-field span { display: block; grid-column: 1 / -1; color: #929292; font-size: 10px; }
.replay-start-popover .replay-date-field input { width: auto; min-width: 0; color-scheme: dark; }
.replay-start-popover .replay-date-field button { min-width: 46px; border: 0; border-radius: 3px; background: #2962ff; color: #fff; cursor: pointer; }

body.chart-replay-active .chart-replay-workspace { min-height: 0; background: #0b0b0b; }
body.chart-replay-active .chart-replay-stage { margin-right: 44px; background: #0b0b0b; }
body.chart-replay-active .chart-replay-tools {
  top: 0;
  bottom: 0;
  width: 52px;
  padding: 7px 6px;
  border-right-color: #2a2a2a;
  background: #101010;
}
body.chart-replay-active .replay-tool { width: 38px; height: 34px; color: #c3c3c3; font-size: 18px; }
body.chart-replay-active .replay-tool:hover { background: #2b2b2b; }
body.chart-replay-active .replay-tool.active { border-color: transparent; background: #363636; color: #fff; }

.replay-drawing-dock {
  display: flex;
  position: absolute;
  z-index: 9;
  top: 24px;
  left: 50%;
  align-items: center;
  height: 39px;
  padding: 3px 5px;
  transform: translateX(-50%);
  border: 1px solid #343434;
  border-radius: 6px;
  background: #242424;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  max-width: calc(100% - 130px);
  overflow-x: auto;
  scrollbar-width: none;
}
.replay-drawing-dock::-webkit-scrollbar { display: none; }
.replay-dock-grip, .replay-player-grip { display: grid; place-items: center; width: 18px; color: #737373; font-size: 17px; cursor: grab; touch-action: none; user-select: none; }
.replay-dock-grip:hover, .replay-player-grip:hover { color: #b8b8b8; }
.replay-dock-grip:active, .replay-player-grip:active, .is-dragging-dock .replay-dock-grip, .is-dragging-dock .replay-player-grip { cursor: grabbing; color: #e4e4e4; }
.replay-dock-tool { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 31px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #dedede; cursor: pointer; font-size: 17px; }
.replay-dock-tool:hover { background: #383838; }
.replay-dock-tool.active { background: #444; color: #fff; }

.replay-side-actions {
  display: flex;
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-left: 1px solid #2a2a2a;
  background: #101010;
}
.replay-side-actions button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #c5c5c5; cursor: pointer; font-size: 19px; }
.replay-side-actions button:hover { background: #2b2b2b; color: #fff; }
.replay-side-actions button.is-active { background: #2b2b2b; color: #f6c453; }
.replay-side-actions span { flex: 1; }

.replay-watchlist-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  right: 44px;
  bottom: 0;
  width: 276px;
  overflow: hidden;
  border-left: 1px solid #343434;
  background: #111;
  color: #ddd;
  box-shadow: -12px 0 30px rgba(0, 0, 0, .28);
}
.replay-watchlist-panel[hidden] { display: none; }
.replay-watchlist-head { display: flex; align-items: center; justify-content: space-between; height: 43px; padding: 0 12px 0 14px; border-bottom: 1px solid #303030; }
.replay-watchlist-head strong { color: #e8e8e8; font-size: 12px; font-weight: 650; }
.replay-watchlist-head button,
.replay-watchlist-form button,
.replay-watchlist-remove { display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: #a8a8a8; cursor: pointer; }
.replay-watchlist-head button { width: 28px; height: 28px; border-radius: 4px; font-size: 17px; }
.replay-watchlist-head button:hover,
.replay-watchlist-remove:hover { background: #2b2b2b; color: #fff; }
.replay-watchlist-form { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 5px; margin: 10px 10px 8px; }
.replay-watchlist-form input { min-width: 0; height: 31px; padding: 0 9px; border: 1px solid #383838; border-radius: 4px; outline: 0; background: #1c1c1c; color: #eee; font: 650 11px var(--font-mono); text-transform: uppercase; }
.replay-watchlist-form input:focus { border-color: #2962ff; }
.replay-watchlist-form button { width: 30px; height: 31px; border-radius: 4px; background: #2962ff; color: #fff; font-size: 16px; }
.replay-watchlist-form button:hover { background: #3d73ff; }
.replay-watchlist-list { display: grid; align-content: start; gap: 2px; max-height: calc(100% - 120px); padding: 0 6px; overflow-y: auto; }
.replay-watchlist-row { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; min-height: 38px; border-radius: 4px; }
.replay-watchlist-row:hover { background: #1f1f1f; }
.replay-watchlist-row[data-active="true"] { background: #252525; }
.replay-watchlist-symbol { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 0; height: 38px; padding: 0 4px 0 8px; border: 0; background: transparent; color: #d8d8d8; text-align: left; cursor: pointer; }
.replay-watchlist-symbol i { color: #f6c453; font-size: 13px; }
.replay-watchlist-symbol strong { overflow: hidden; font: 700 12px var(--font-mono); text-overflow: ellipsis; }
.replay-watchlist-symbol span { color: #737373; font-size: 9px; }
.replay-watchlist-row[data-active="true"] .replay-watchlist-symbol strong { color: #fff; }
.replay-watchlist-row[data-active="true"] .replay-watchlist-symbol span { color: #7da2ff; }
.replay-watchlist-remove { width: 26px; height: 26px; border-radius: 3px; opacity: 0; font-size: 14px; }
.replay-watchlist-row:hover .replay-watchlist-remove,
.replay-watchlist-remove:focus-visible { opacity: 1; }
.replay-watchlist-status { margin: 8px 12px 0; color: #747474; font-size: 9px; }
.replay-watchlist-status[data-source="cloud"] { color: #4ea877; }
.replay-watchlist-status[data-source="error"] { color: #c59045; }
.replay-watchlist-empty { margin: 14px 10px; color: #777; font-size: 10px; line-height: 1.5; }

body.chart-replay-active .chart-replay-player {
  display: flex;
  position: absolute;
  z-index: 10;
  right: auto;
  bottom: 47px;
  left: 50%;
  width: auto;
  min-width: 318px;
  min-height: 42px;
  height: 42px;
  padding: 5px 8px;
  transform: translateX(-50%);
  border: 1px solid #363636;
  border-radius: 6px;
  background: #1d1d1d;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .44);
}
body.chart-replay-active .chart-replay-player.is-dragging-dock, .replay-drawing-dock.is-dragging-dock { box-shadow: 0 12px 30px rgba(0, 0, 0, .58), 0 0 0 1px rgba(107,155,255,.34); }
body.chart-replay-active .replay-player-grip { margin-left: -3px; }
body.chart-replay-active .chart-replay-player::before,
body.chart-replay-active .chart-replay-player::after { display: none; }
body.chart-replay-active .chart-replay-player input[type="range"] { display: none; }
body.chart-replay-active .chart-replay-player .replay-mode-badge { min-width: 82px; color: #a8a8a8; }
body.chart-replay-active .chart-replay-player > span:last-child { min-width: 58px; margin-left: 3px; color: #8f8f8f; }
body.chart-replay-active .replay-player-button,
body.chart-replay-active .replay-play-button { width: 31px; height: 31px; border-radius: 4px; color: #dedede; }
body.chart-replay-active .replay-play-button { background: #2962ff; }
body.chart-replay-active .replay-play-button:hover { background: #3d73ff; }

.replay-range-shortcuts {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 36px;
  height: 36px;
  padding: 0 56px 0 63px;
  border-top: 1px solid #2a2a2a;
  background: #101010;
}
.replay-range-shortcuts button { height: 25px; padding: 0 6px; border: 0; border-radius: 3px; background: transparent; color: #bdbdbd; font: 600 11px var(--font-sans); cursor: pointer; }
.replay-range-shortcuts button:hover { background: #2a2a2a; color: #fff; }
.replay-range-shortcuts button.active { color: #fff; }
.replay-range-shortcuts button:disabled { display: none; }

body.chart-replay-active .replay-hint {
  bottom: 50px;
  left: 64px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .16s ease, transform .16s ease;
}
body.chart-replay-active .replay-hint.is-visible { opacity: 1; transform: translateY(0); }
body.chart-replay-active .chart-replay-settings-popover { right: 58px; }
.replay-overlay-settings { position: absolute; z-index: 15; top: 14px; right: 58px; width: 258px; max-height: calc(100% - 28px); overflow: auto; padding: 12px; border: 1px solid #343434; border-radius: 6px; background: #1b1b1b; color: #ddd; box-shadow: 0 18px 42px rgba(0,0,0,.48); }
.replay-overlay-settings[hidden] { display: none; }
.replay-overlay-settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.replay-overlay-settings-head strong { font-size: 12px; }.replay-overlay-settings-head button { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #aaa; cursor: pointer; font-size: 17px; }.replay-overlay-settings-head button:hover { background: #303030; color: #fff; }
.replay-overlay-settings .replay-setting { border-color: #383838; background: #232323; }.replay-overlay-settings .replay-setting select { min-width: 78px; border: 0; outline: 0; background: transparent; color: #eee; font-size: 11px; }
.replay-fibonacci-settings { margin-top: 4px; }.replay-fibonacci-trend, .replay-fibonacci-level { display: flex; align-items: center; gap: 8px; min-height: 34px; color: #bcbcbc; font-size: 11px; }
.replay-fibonacci-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; margin-top: 5px; }.replay-fibonacci-level { display: grid; grid-template-columns: 15px minmax(0,1fr) 24px; gap: 5px; }.replay-fibonacci-level input[type="checkbox"], .replay-fibonacci-trend input { accent-color: #2962ff; }.replay-fibonacci-level input[type="number"] { width: 100%; height: 27px; padding: 0 5px; border: 1px solid #414141; border-radius: 3px; outline: 0; background: #292929; color: #eee; font: 11px var(--font-mono); }.replay-fibonacci-level input[type="number"]:focus { border-color: #2962ff; }.replay-fibonacci-level input[type="color"] { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; }

@media (max-width: 820px) {
  body.chart-replay-active .chart-replay-toolbar { overflow-x: auto; }
  body.chart-replay-active .chart-replay-toolbar .replay-symbol-field { min-width: 100px; width: 100px; }
  body.chart-replay-active .chart-replay-actions { margin-left: 4px; }
  body.chart-replay-active .replay-save-status { display: none; }
  body.chart-replay-active .chart-replay-player { bottom: 43px; min-width: 294px; }
  .replay-range-shortcuts { padding-left: 56px; overflow-x: auto; }
  .replay-drawing-dock { display: none; }
  .replay-watchlist-panel { width: min(276px, calc(100% - 44px)); }
}

/* Simulated order ticket and draggable risk/reward levels. */
.replay-trade-command { color: #e2e2e2; }
.replay-trade-command[aria-expanded="true"] { background: #2b2b2b; color: #fff; }
.replay-quick-trade { display: flex; position: absolute; z-index: 8; top: 53px; left: 62px; align-items: center; gap: 3px; }
.replay-quick-trade[hidden] { display: none; }
.replay-quick-trade button { display: grid; place-items: center; width: 61px; height: 38px; padding: 4px 7px; border: 0; border-radius: 3px; color: #fff; cursor: pointer; font-family: var(--font-sans); line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.22); transition: filter .12s ease, box-shadow .12s ease, transform .08s ease; }
.replay-quick-trade button strong { font: 700 11px var(--font-mono); letter-spacing: -.02em; }.replay-quick-trade button span { margin-top: 3px; color: rgba(255,255,255,.82); font-size: 8px; font-weight: 650; }
.replay-quick-trade button[data-quick-side="sell"] { background: #d93745; }.replay-quick-trade button[data-quick-side="buy"] { background: #2563df; }
.replay-quick-trade button:hover { filter: brightness(1.1); }
.replay-quick-trade button.active { box-shadow: 0 0 0 1px #fff, 0 3px 10px rgba(0,0,0,.28); }
.replay-quick-trade button:active { transform: translateY(1px); filter: brightness(.96); }
.replay-quick-trade input { width: 42px; height: 26px; padding: 0 4px; border: 1px solid #3a3a3a; border-radius: 3px; outline: 0; background: #171717; color: #e7e7e7; text-align: center; font: 9px var(--font-mono); appearance: textfield; }
.replay-quick-trade input::-webkit-outer-spin-button, .replay-quick-trade input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.replay-quick-trade input:hover { border-color: #555; }.replay-quick-trade input:focus { border-color: #7b8ba0; background: #1d1d1d; }
body.chart-replay-active.chart-replay-trade-open .chart-replay-stage { margin-right: 354px; }
.replay-trade-panel {
  position: absolute;
  z-index: 14;
  top: 0;
  right: 44px;
  bottom: 0;
  width: 310px;
  overflow: auto;
  border-left: 1px solid #343434;
  background: #111;
  color: #ddd;
  box-shadow: -12px 0 30px rgba(0,0,0,.28);
}
.replay-trade-panel[hidden] { display: none; }
.replay-trade-head { display: flex; align-items: center; justify-content: space-between; height: 43px; padding: 0 13px; border-bottom: 1px solid #303030; }
.replay-trade-head strong { font-size: 12px; font-weight: 650; }
.replay-trade-head button, .replay-trade-tabs button { border: 0; background: transparent; color: #aaa; cursor: pointer; }
.replay-trade-head button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; font-size: 18px; }
.replay-trade-head button:hover { background: #292929; color: #fff; }
.replay-trade-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 8px; padding: 3px; border-radius: 5px; background: #282828; }
.replay-trade-tabs button { height: 30px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.replay-trade-tabs button.active { background: #444; color: #fff; }
.replay-trade-tabpanel { padding: 8px 12px 16px; }
.replay-side-picker { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #373737; border-radius: 5px; }
.replay-side-picker button { display: grid; gap: 3px; min-height: 55px; padding: 7px 10px; border: 0; background: #171717; color: #aaa; text-align: left; cursor: pointer; }
.replay-side-picker button + button { border-left: 1px solid #373737; text-align: right; }
.replay-side-picker button.active[data-side="buy"] { background: #183d84; color: #fff; }
.replay-side-picker button.active[data-side="sell"] { background: #7c232c; color: #fff; }
.replay-side-picker small { font-size: 10px; }.replay-side-picker strong { font: 650 16px var(--font-mono); }
.replay-order-context { margin: 10px 1px; color: #858585; font-size: 10px; line-height: 1.4; }
.replay-order-field { display: grid; grid-template-columns: 1fr 128px; align-items: center; min-height: 43px; border-bottom: 1px solid #292929; color: #aaa; font-size: 11px; }
.replay-order-field input { height: 29px; padding: 0 8px; border: 1px solid #3a3a3a; border-radius: 4px; outline: 0; background: #191919; color: #eee; text-align: right; font: 12px var(--font-mono); }
.replay-order-field input:focus { border-color: #2962ff; }.replay-order-field.target span { color: #35b98c; }.replay-order-field.stop span { color: #f05b67; }
.replay-order-metrics { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px 0; border-bottom: 1px solid #292929; color: #909090; font-size: 11px; }
.replay-order-metrics strong { color: #e7e7e7; font: 600 11px var(--font-mono); }
.replay-order-notes { display: grid; gap: 7px; padding-top: 12px; color: #999; font-size: 11px; }
.replay-order-notes textarea { resize: vertical; min-height: 64px; padding: 8px; border: 1px solid #373737; border-radius: 4px; outline: 0; background: #191919; color: #e5e5e5; font: 11px/1.5 var(--font-sans); }
.replay-order-submit, .replay-order-close-position { width: 100%; min-height: 44px; margin-top: 12px; border: 0; border-radius: 5px; background: #2962ff; color: #fff; cursor: pointer; font-size: 13px; font-weight: 650; }
.replay-order-close-position { background: #383838; }.replay-order-submit:hover { background: #3c72ff; }.replay-order-close-position:hover { background: #4a4a4a; }
.replay-order-message { min-height: 18px; margin: 8px 0 0; color: #de9c4d; font-size: 10px; line-height: 1.4; }
.replay-session-separators { position: absolute; z-index: 2; inset: 0 0 26px; overflow: hidden; pointer-events: none; }
.replay-session-separator { position: absolute; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(to bottom, rgba(75,145,230,.58) 0 4px, transparent 4px 9px); }
.replay-bar-count-layer { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.replay-order-layer { position: absolute; z-index: 7; inset: 0 76px 0 52px; pointer-events: none; overflow: hidden; }
.replay-order-layer[hidden] { display: none; }
.replay-order-zone { position: absolute; right: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity .14s ease; }
.replay-order-layer.is-dragging .replay-order-zone { opacity: 1; }
.replay-order-zone.reward { background: rgba(24,153,112,.2); }
.replay-order-zone.risk { background: rgba(213,50,70,.18); }
.replay-order-line { display: flex; position: absolute; right: 0; left: 0; align-items: center; justify-content: flex-end; height: 20px; padding: 0; transform: translateY(-50%); border: 0; border-top: 1px dashed currentColor; background: transparent; color: #d9d9d9; cursor: ns-resize; pointer-events: auto; touch-action: none; }
.replay-order-line span, .replay-order-line strong { height: 20px; padding: 0 6px; font: 650 9px/20px var(--font-mono); box-shadow: 0 2px 7px rgba(0,0,0,.24); }
.replay-order-line span { min-width: 78px; margin-left: auto; border-radius: 3px 0 0 3px; text-align: right; }.replay-order-line strong { min-width: 50px; border-left: 1px solid rgba(255,255,255,.1); text-align: right; }
.replay-order-line.target { color: #31bf91; }.replay-order-line.target span { background: #0d4939; color: #54d9ad; }.replay-order-line.target strong { border-radius: 0 3px 3px 0; background: #0a382e; color: #b7f1df; }
.replay-order-line.entry { color: #4b82ff; }.replay-order-line.entry span { min-width: 58px; background: #245fcf; color: #fff; }.replay-order-line.entry strong { background: #1d4faa; color: #eaf1ff; }
.replay-order-line.stop { color: #ee5b6d; }.replay-order-line.stop span { background: #6d2430; color: #ff8795; }.replay-order-line.stop strong { border-radius: 0 3px 3px 0; background: #501c26; color: #ffd4da; }
.replay-order-line.is-active span, .replay-order-line.is-active strong { filter: brightness(1.22); }
.replay-order-line #replay-order-cancel { display: grid; place-items: center; align-self: stretch; width: 22px; padding: 0; border: 0; border-left: 1px solid rgba(255,255,255,.14); border-radius: 0 3px 3px 0; background: #193f8d; color: #dce8ff; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 7px rgba(0,0,0,.24); }
.replay-order-line #replay-order-cancel:hover { background: #2d6be3; color: #fff; }
.replay-trade-log-list { display: grid; gap: 7px; }.replay-trade-log-list > p { color: #777; font-size: 11px; text-align: center; }
.replay-trade-log-list article { display: grid; gap: 7px; padding: 10px; border: 1px solid #303030; border-radius: 5px; background: #181818; }
.replay-trade-log-list header, .replay-trade-log-list article > div { display: flex; align-items: center; justify-content: space-between; }
.replay-trade-log-list header strong, .replay-trade-log-list header span { font-size: 10px; }.replay-trade-log-list header strong.buy { color: #4c86ff; }.replay-trade-log-list header strong.sell { color: #f15c6a; }
.replay-trade-log-list header span { color: #999; }.replay-trade-log-list header span.win, .replay-trade-log-list .profit { color: #31c896; }.replay-trade-log-list header span.loss, .replay-trade-log-list .loss { color: #f05b68; }
.replay-trade-log-list article > div span, .replay-trade-log-list article > div strong { font: 600 12px var(--font-mono); }.replay-trade-log-list time { color: #747474; font-size: 9px; }.replay-trade-log-list article p { margin: 0; color: #999; font-size: 10px; line-height: 1.45; }
@media (max-width: 760px) {
  .replay-quick-trade { top: 53px; left: 57px; }
  .replay-quick-trade button { width: 56px; padding-right: 5px; padding-left: 5px; }
  .replay-quick-trade input { width: 38px; }
  .replay-trade-panel { right: 0; width: min(310px, calc(100% - 52px)); }
  body.chart-replay-active.chart-replay-trade-open .chart-replay-stage { margin-right: 44px; }
  .replay-order-layer { right: 44px; }
}