.lab-video-player { overflow: hidden; border: var(--border); border-radius: var(--radius); background: var(--color-mint); }
.lab-video-player .movie-frame { border-radius: 0; background: #142c32; }
.lab-video-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px; }
.lab-video-controls[hidden] { display: none; }
.lab-video-player.lab-ended-controls-hidden .lab-video-controls { display: none; }
.lab-video-player.lab-controls-hidden .lab-video-controls { opacity: 0; visibility: hidden; pointer-events: none; }
.lab-video-controls button { min-height: 44px; padding: 6px 12px; border: 1px solid #aaccc2; border-radius: 12px; background: white; color: var(--color-primary); font-size: 14px; font-weight: 700; }
.lab-video-controls button:hover { background: #f1faf6; }
.lab-video-controls button:disabled { opacity: .6; cursor: default; }
.lab-video-seek { flex: 1 1 100%; display: flex; align-items: center; gap: 12px; min-width: 0; }
.lab-video-controls input[type="range"] { min-width: 0; min-height: 44px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.lab-video-seek input { flex: 1; width: 100%; }
.lab-video-controls .lab-video-seek input { min-height: 48px; touch-action: none; }
.lab-video-seek input::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: #b7d6ce; }
.lab-video-seek input::-webkit-slider-thumb { appearance: none; width: 26px; height: 26px; margin-top: -9px; border: 2px solid white; border-radius: 50%; background: var(--color-primary); }
.lab-video-seek input { appearance: none; background: transparent; }
.lab-video-seek input::-moz-range-track { height: 8px; border-radius: 99px; background: #b7d6ce; }
.lab-video-seek input::-moz-range-thumb { width: 24px; height: 24px; border: 2px solid white; border-radius: 50%; background: var(--color-primary); }
.lab-video-time { flex-shrink: 0; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-video-volume { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; }
.lab-video-volume input { width: 88px; }
.lab-video-status { padding: 0 12px 12px; font-size: 14px; }
.lab-video-status:empty { display: none; }
.lab-video-player:fullscreen { position: relative; width: 100%; height: 100%; border: 0; border-radius: 0; background: #142c32; }
.lab-video-player:fullscreen .movie-frame { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.lab-video-player:fullscreen video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.lab-video-player:fullscreen .lab-video-controls { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: var(--color-mint); transition: opacity .15s ease; }
.lab-video-player:fullscreen .lab-video-status:not(:empty) { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: max(12px, env(safe-area-inset-top)) 12px 12px; background: var(--color-mint); }
.lab-video-player:fullscreen.lab-controls-hidden { cursor: none; }
.lab-video-player:fullscreen.lab-controls-hidden .lab-video-controls { opacity: 0; visibility: hidden; pointer-events: none; }
@media (orientation: landscape) and (max-height: 600px) {
  .lab-video-player:fullscreen .lab-video-controls { gap: 6px 10px; }
  .lab-video-player:fullscreen .lab-video-seek { flex: 1 1 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-video-player:fullscreen .lab-video-controls { transition: none; }
}
@media (max-width: 480px) {
  .lab-video-controls { gap: 6px; padding: 8px; }
  .lab-video-controls button { padding-inline: 9px; }
  .lab-video-volume { gap: 4px; }
  .lab-video-volume input { width: 54px; }
  .lab-video-time { font-size: 12px; }
}

/* Keep desktop layout; place the primary action first on small/touch screens. */
@media (max-width: 600px), (max-width: 1023px) and (pointer: coarse) {
  .lab-video-controls { display: grid; grid-template-columns: max-content minmax(44px, 1fr) max-content max-content max-content max-content; grid-template-areas: "play seek time volume mute fullscreen"; gap: 6px; }
  .lab-video-controls .lab-video-seek { display: contents; }
  .lab-video-controls [data-play] { grid-area: play; justify-self: start; }
  .lab-video-controls [data-seek] { grid-area: seek; width: 100%; }
  .lab-video-controls [data-time] { grid-area: time; }
  .lab-video-controls .lab-video-volume { grid-area: volume; margin-left: 0; }
  .lab-video-controls [data-mute] { grid-area: mute; }
  .lab-video-controls [data-fullscreen] { grid-area: fullscreen; }
  .lab-video-controls button { min-width: 44px; min-height: 44px; padding-inline: 6px; font-size: 13px; white-space: nowrap; }
  .lab-video-controls .lab-video-volume input { min-width: 44px; }
}
@media (max-width: 600px) {
  .lab-video-controls { grid-template-columns: max-content minmax(60px, 1fr) max-content; grid-template-areas: "play seek time" "volume mute fullscreen"; }
  .lab-video-controls .lab-video-volume { gap: 4px; }
  .lab-video-controls .lab-video-volume input { width: 54px; }
}