.replay-window { min-width:0; padding:17px 15px 20px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(135deg,#22252a,#1b1d21); color:#f0f1ed; }
.replay-window header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.replay-window h4 { margin:0; font-size:.9rem; font-weight:700; }
.replay-window header > span { padding:5px 7px; font-size:.65rem; color:#a3a8b0; border:1px solid #383b42; border-radius:4px; }
.replay-window p { margin:16px 0 18px; font-size:.75rem; color:#a3a8b0; }
.rw-axis { position:relative; height:29px; margin:0 1px; font-size:9px; color:#979ba3; }
.rw-axis > span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.rw-axis > span:first-child { transform:none; }
.rw-axis > span:nth-child(5) { transform:translateX(-100%); color:#e6c28e; }
.rw-goal { position:absolute; left:90%; transform:translateX(-50%); top:0; font-size:8px; letter-spacing:.04em; color:#e6c28e; }
.rw-goal i { display:block; position:relative; margin-top:4px; border-top:1px dashed #c5a472; width:28px; }
.rw-goal i::after { content:"›"; position:absolute; right:-4px; top:-8px; font-size:13px; font-style:normal; }
.rw-track { height:47px; position:relative; border:1px solid #41454c; border-radius:6px; background:repeating-linear-gradient(135deg,#21242a 0 5px,#1d2025 5px 6px); }
.rw-legend { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:11px 2px 0; }
.rw-legend-item { display:inline-flex; align-items:center; gap:6px; min-width:0; color:#aeb2b8; font-size:10px; line-height:1.2; }
.rw-legend-item i { display:block; width:9px; height:9px; flex:0 0 9px; border-radius:2px; }
.rw-legend-item b { color:#e6e8e2; font-size:10px; font-weight:700; }
.rw-legend-replay i { background:linear-gradient(135deg,#6c9143,#9bbf61); border:1px solid #badf89; }
.rw-legend-slow i { background:repeating-linear-gradient(135deg,#eab26d 0 4px,#cc9151 4px 7px); border:1px solid #face93; }
.rw-legend-item > span { font-variant-numeric:tabular-nums; color:#aeb2b8; }
.rw-range { position:absolute; top:5px; bottom:5px; display:flex; align-items:center; justify-content:center; min-width:1px; border-radius:4px; touch-action:none; user-select:none; cursor:grab; box-sizing:border-box; }
.rw-range:active { cursor:grabbing; }
.rw-replay { z-index:1; border:1px solid #badf89; background:linear-gradient(90deg,#6c9143,#9bbf61); }
.rw-slow { z-index:2; border:1px solid #face93; background:repeating-linear-gradient(135deg,#eab26d 0 6px,#cc9151 6px 10px); }
.rw-range > span { pointer-events:none; overflow:hidden; white-space:nowrap; text-overflow:clip; font-size:10px; font-weight:750; color:#192017; text-align:center; }
.rw-replay > span { position:absolute; }
.rw-slow > span { color:#2f200f; padding:0 7px; }
.rw-range .rw-handle { position:absolute; top:50%; transform:translateY(-50%); width:24px; height:38px; padding:0; border:0; background:transparent; border-radius:4px; cursor:ew-resize; touch-action:none; min-width:0; }
.rw-start { left:-12px; }.rw-end { right:-12px; }
.rw-handle::after { content:""; position:absolute; left:10px; top:8px; bottom:8px; width:4px; border-radius:4px; background:#f2ffe4; box-shadow:0 0 0 1px #19201740; }
.rw-slow .rw-handle::after { background:#fff0d9; }
.rw-range:focus-visible,.rw-range .rw-handle:focus-visible { outline:2px solid #f4f4ea; outline-offset:3px; }
#replayQualitySection { border:1px solid var(--border); border-radius:8px; padding:10px; }
#replayQualitySection > summary { cursor:pointer; font-size:.78rem; font-weight:700; }
#replayQualitySection[open] > summary { margin-bottom:12px; }
@media(max-width:540px) {
  .replay-window { padding:14px 12px 15px; }
  .rw-legend { gap:7px 12px; padding-top:9px; }
  .rw-legend-item { gap:5px; font-size:9px; }
  .rw-legend-item b { font-size:9px; }
}