/* Front-end player */
.jgt-video { box-sizing: border-box; max-width: 100%; margin-left: 0; margin-right: 0; }
.jgt-video .jgt-video-shell {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
}
.jgt-video .jgt-video-el {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  background: #000;
  object-fit: contain;   /* never crop — letterbox on #000 instead of shifting/clipping */
}

/* Custom control bar (no native seek bar exists — video has no `controls`). */
.jgt-video .jgt-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #10233f;
  color: #eaf1ff;
  font: 13px/1 system-ui, sans-serif;
}
.jgt-video .jgt-play {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: 0; border-radius: 50%;
  background: #3a5a8c;
  cursor: pointer;
}
.jgt-video .jgt-play:hover { background: #4a6fa8; }
/* Play triangle (CSS-drawn, centered). margin-left optically centers it in the circle. */
.jgt-video .jgt-play::before {
  content: "";
  display: block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  margin-left: 3px;
}
/* Pause bars when playing. */
.jgt-video .jgt-play.is-playing::before {
  width: 12px; height: 13px;
  border: 0;
  margin-left: 0;
  background:
    linear-gradient(#fff, #fff) left  / 4px 100% no-repeat,
    linear-gradient(#fff, #fff) right / 4px 100% no-repeat;
}

/* Progress bar is DISPLAY-ONLY — no pointer events, so it can't be clicked/dragged. */
.jgt-video .jgt-progress {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}
.jgt-video .jgt-progress-fill {
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: #4a6fa8;
  transition: width .15s linear;
}
.jgt-video .jgt-time { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: .85; }

.jgt-video .jgt-speed { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.jgt-video .jgt-speed-sel {
  background: #0f1f38; color: #eaf1ff;
  border: 1px solid #3a5a8c; border-radius: 4px;
  padding: 2px 4px; font: 12px/1 system-ui, sans-serif;
}
.jgt-video .jgt-cc {
  flex: 0 0 auto;
  border: 1px solid #3a5a8c; border-radius: 4px;
  background: transparent; color: #eaf1ff;
  padding: 3px 7px; cursor: pointer; font: 600 12px/1 system-ui, sans-serif;
}
.jgt-video .jgt-cc--on { background: #3a5a8c; }

.jgt-video.jgt-done .jgt-video-shell { box-shadow: 0 0 0 2px #2f9172; }

/* Editor preview card */
.jgt-video-editor-card {
  border: 1px dashed #8a93a3;
  border-radius: 10px;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.03);
  font: 14px/1.5 system-ui, sans-serif;
}
.jgt-video-editor-card strong {
  display: block; font-size: 11px; letter-spacing: 1px;
  color: #3a5a8c; margin-bottom: 6px;
}
.jgt-video-editor-file { margin: 0 0 6px; word-break: break-all; }
.jgt-video-editor-sub  { margin: 0 0 6px; opacity: .8; word-break: break-all; }
.jgt-video-editor-note { margin: 6px 0 0; font-size: 12px; opacity: .65; }