/* Live replay driver (tl_replay.js). tlr- scoped; present only during a replay (/?tl_replay=<token>). */
.tlr-root { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tlr-none { display: none !important; }
.tlr-spot { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55), 0 0 0 2px #f0a030, 0 0 24px 4px rgba(240, 160, 48, 0.55);
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease; }
.tlr-dot { position: fixed; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: rgba(240, 160, 48, 0.35);
  border: 2px solid #f0a030; animation: tlr-pulse 1s ease-out infinite; }
@keyframes tlr-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.tlr-cap { position: fixed; background: #141b23; color: #e8e8e8; border: 1px solid rgba(255, 255, 255, 0.15); border-left: 3px solid #f0a030;
  border-radius: 10px; padding: 9px 12px; font-size: .82rem; line-height: 1.45; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); }
.tlr-cap.tlr-info { border-left-color: #4be9fa; }
.tlr-cap.tlr-warn { border-left-color: #fab219; }
.tlr-cap.tlr-bad { border-left-color: #ff7b72; }
.tlr-n { color: #f0a030; font-weight: 600; margin-right: 4px; }
.tlr-warn { color: #fab219; }
.tlr-bad { color: #ff9d9d; }
.tlr-ok { color: #8fd694; }
.tlr-bar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  background: rgba(10, 14, 20, 0.92); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 6px 10px;
  pointer-events: auto; color: #cfefff; font-size: .78rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); max-width: calc(100vw - 24px); }
.tlr-badge { color: #f0a030; font-weight: 700; letter-spacing: .06em; font-size: .7rem; }
.tlr-who { color: #9fb3c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.tlr-b { background: rgba(255, 255, 255, 0.06); color: #e8e8e8; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px;
  width: 30px; height: 28px; cursor: pointer; }
.tlr-b:hover { border-color: #f0a030; color: #f0a030; }
.tlr-speed { background: rgba(255, 255, 255, 0.06); color: #e8e8e8; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; height: 28px; }
.tlr-speed option { background: #141b23; }
.tlr-pos { color: #9fb3c8; min-width: 60px; text-align: right; font-variant-numeric: tabular-nums; }
.tlr-prog { width: 120px; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; }
.tlr-prog > div { height: 100%; width: 0; background: #f0a030; transition: width .3s ease; }