/* lessonRecorder — shared playback control bar (.lr-player) */
.lr-player { display: block; }
.lr-player > video, .lr-player > audio { display: block; }
.lr-player > video { width: 100%; border-radius: 10px; background: #000; outline: none; }
.lr-player > audio { width: 100%; }
.lr-player.is-audio > audio { display: none; }

.lr-bar { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.lr-play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary, #4c8dff); color: #fff; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0 0 0 2px; }
.lr-play:hover { filter: brightness(1.12); }
.lr-play:active { transform: scale(.96); }

.lr-track-wrap { flex: 1; min-width: 0; display: grid; gap: 4px; }
.lr-track { position: relative; height: 7px; border-radius: 999px; cursor: pointer;
  background: rgba(158, 178, 204, .22); touch-action: none; }
.lr-track:hover { background: rgba(158, 178, 204, .32); }
.lr-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary, #4c8dff), #7ab0ff); pointer-events: none; }
.lr-labels { display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: var(--muted, #9fb0c8); font-variant-numeric: tabular-nums; }

.lr-cc { flex: none; border: 1px solid var(--line, rgba(158, 178, 204, .18)); background: transparent;
  color: var(--muted, #9fb0c8); border-radius: 6px; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; padding: 6px 8px; cursor: pointer; }
.lr-cc:hover { color: var(--fg, #e8eef9); }
.lr-cc.on { color: #fff; border-color: var(--primary, #4c8dff); background: rgba(76, 141, 255, .25); }
.lr-cc[hidden] { display: none; }