.replay-modal {
            width: min(1180px, 92vw); height: min(820px, 88vh); max-height: 88vh;
            padding: 18px; gap: 12px; box-sizing: border-box;
        }
        .replay-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .replay-title { font-size: 1.15rem; font-weight: bold; color: #fff; min-width: 0; }
        .replay-close {
            width: 34px; height: 34px; padding: 0; background: #363a45; color: #d1d4dc;
            border: 1px solid #434651; font-size: 1.15rem; line-height: 1;
        }
        .replay-meta {
            display: flex; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 10px;
            border-bottom: 1px solid #2a2e39; color: #b2b5be; font-size: 0.82rem;
        }
        .replay-layout {
            min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 280px;
            border-bottom: 1px solid #2a2e39;
        }
        .replay-chart-wrap { min-width: 0; min-height: 320px; position: relative; overflow: hidden; }
        #replay-chart { width: 100%; height: 100%; }
        .replay-log-panel {
            min-width: 0; border-left: 1px solid #2a2e39; padding-left: 12px;
            display: flex; flex-direction: column; overflow: hidden;
        }
        .replay-log-title { color: #b2b5be; font-size: 0.82rem; font-weight: bold; margin-bottom: 8px; }
        .replay-log-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
        .replay-log-item {
            border-left: 3px solid #434651; padding: 7px 8px; background: #131722;
            color: #787b86; font-size: 0.78rem; line-height: 1.45;
        }
        .replay-log-item.reached { color: #d1d4dc; }
        .replay-log-item.buy.reached { border-left-color: #f23645; }
        .replay-log-item.sell.reached { border-left-color: #089981; }
        .replay-log-item.current { background: #2a2e39; }
        .replay-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .replay-controls button {
            min-width: 72px; background: #363a45; color: #d1d4dc; border: 1px solid #434651;
        }
        .replay-controls button:hover { background: #434651; }
        .replay-controls .replay-play-btn { background: #2962ff; border-color: #2962ff; color: #fff; }
        .replay-speed {
            background: #131722; color: #d1d4dc; border: 1px solid #434651;
            border-radius: 6px; padding: 7px 8px;
        }
        .replay-status { margin-left: auto; color: #b2b5be; font-size: 0.82rem; }
        .replay-empty {
            position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
            color: #787b86; background: #131722; z-index: 2;
        }

#replay-modal { display: none; position: fixed; inset: 0; background: #000b; z-index: 1100; align-items: center; justify-content: center; }
#replay-modal > .replay-modal { display: flex; flex-direction: column; background: #1e222d; border: 1px solid #434651; border-radius: 8px; overflow: hidden; }
#replay-modal .replay-chart-wrap { display: flex; flex-direction: column; min-height: 0; }
#replay-chart { flex: 1; height: auto; min-height: 0; }
#replay-modal .replay-controls button { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; width: 34px; height: 34px; padding: 6px; border-radius: 4px; cursor: pointer; }
.replay-controls svg { width: 18px; height: 18px; }
.replay-close { flex: 0 0 34px; cursor: pointer; border-radius: 4px; }
.replay-title { overflow-wrap: anywhere; }
#replay-modal .replay-log-list { flex: 1; min-height: 0; }
@media (max-width: 900px) {
    .replay-layout { grid-template-columns: 1fr; grid-template-rows: minmax(160px, 1fr) 115px; }
    .replay-log-panel { border-left: none; border-top: 1px solid #2a2e39; padding: 8px 0 0; }
    .replay-status { width: 100%; margin-left: 0; }
    #replay-modal > .replay-modal { height: 94dvh; max-height: 94dvh; padding: 12px; gap: 8px; }
}