/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* GFS Didot: a Didot-style face for devices without Apple's system "Didot".
   Must stay at the top of the file (CSS requires @import before other rules). */
@import url("https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap");

:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #0b0b0f;
  color: #f2f2f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.brand {
  font-family: "Didot", "GFS Didot", "Bodoni 72", Georgia, "Times New Roman",
    serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 24px;
}

.brand span {
  color: #e50914;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.card {
  background: #16161c;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.15s ease;
}

.card:hover {
  transform: translateY(-4px);
}

.card .poster {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #2a2a35, #16161c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  opacity: 0.6;
}

.card .meta {
  padding: 10px 12px;
}

.card .meta h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.card .meta small {
  color: #9a9aa5;
}

.badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: #2a2a35;
  margin-top: 6px;
}

.badge.ready { background: #1d4d2b; }
.badge.processing { background: #5c4a17; }
.badge.failed { background: #5c1d1d; }
.badge.not-transcoded { background: #2a2a35; }

.muted { color: #9a9aa5; }
.link-inline { color: #8ab4ff; }
.link-inline:hover { text-decoration: underline; }

/* --- Top bar / admin ----------------------------------------------------- */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-chip {
  font-size: 0.7rem;
  background: #e50914;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}

/* --- Home poster grid (Netflix 2:3) -------------------------------------- */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 18px 16px;
  gap: 18px 16px;
}
.poster-card {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.poster-card:hover {
  transform: translateY(-4px);
}

/* Home category rows (horizontal strips) */
.cat-row {
  margin-bottom: 26px;
}
.cat-title {
  font-size: 1.1rem;
  margin: 0 0 12px;
}
.cat-strip {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.cat-strip .poster-card {
  flex: 0 0 200px;
  width: 200px;
}
.poster-art {
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #16161c;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.poster-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.poster-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  background: linear-gradient(135deg, #2a2a35, #16161c);
  color: #d8d8e0;
  font-weight: 700;
  font-size: 1rem;
}
.poster-info {
  padding: 8px 2px 0;
}
.poster-info h3 {
  margin: 0;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.poster-info small {
  color: #9a9aa5;
  font-size: 0.82rem;
  display: inline;
}

/* --- Detail page --------------------------------------------------------- */
.detail-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  overflow: hidden;
}
.detail-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.detail-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      #0b0b0f 4%,
      rgba(11, 11, 15, 0.6) 40%,
      rgba(11, 11, 15, 0.5) 100%
    ),
    linear-gradient(to right, rgba(11, 11, 15, 0.85), rgba(11, 11, 15, 0.2));
}
.detail-hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.detail-main {
  display: flex;
  gap: 28px;
  margin-top: auto;
  padding: 40px 0 28px;
  align-items: flex-end;
}
.detail-poster {
  width: 220px;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}
.detail-text {
  max-width: 640px;
}
.detail-text h1 {
  margin: 0 0 10px;
  font-size: 2.4rem;
  line-height: 1.1;
}
.detail-facts {
  color: #d0d0d8;
  margin: 0 0 16px;
  font-size: 0.95rem;
}
.watch-now {
  font-size: 1rem;
  padding: 11px 26px;
  background: #fff;
  color: #0b0b0f;
  font-weight: 700;
}
.watch-now:hover {
  background: #e6e6e6;
}
.detail-format {
  margin: 14px 0 0;
  font-size: 0.85rem;
}
.detail-desc {
  margin: 12px 0 0;
  line-height: 1.5;
  color: #e8e8ee;
}
.detail-below {
  padding-top: 24px;
}
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 24px;
}
.photo-gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
}

/* --- Watch (immersive) --------------------------------------------------- */
.watch-screen {
  height: 100vh;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.watch-back {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
}
.watch-stage {
  width: 100%;
  max-width: 100vw;
  height: 100%;
}
/* Fill the viewport so the control bar pins to the bottom of the page and the
   video letterboxes inside (rather than the player sizing to its aspect ratio). */
.watch-stage .player-wrap,
.watch-stage [data-vjs-player],
.watch-stage [data-vjs-player] > div {
  height: 100%;
}
.watch-stage .video-js {
  width: 100%;
  height: 100%;
}
.watch-stage .video-js video {
  object-fit: contain;
}
.watch-msg {
  color: #ccc;
}

/* --- Login gate ---------------------------------------------------------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  background: #16161c;
  border-radius: 10px;
  padding: 28px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-card input {
  width: 100%;
}
.login-error {
  color: #e08a8a;
  font-size: 0.85rem;
  margin: 0;
}
.success {
  color: #7fd39a;
  font-size: 0.85rem;
  margin: 0;
}

/* --- Settings page ------------------------------------------------------- */
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.settings-header .brand {
  margin-bottom: 0;
}

.panel {
  background: #16161c;
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 22px;
}
.panel h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.panel .subhead {
  margin: 18px 0 8px;
  font-size: 0.95rem;
  color: #c8c8d2;
}

/* Inputs */
input,
textarea,
select {
  background: #0f0f15;
  border: 1px solid #2a2a35;
  border-radius: 6px;
  color: #f2f2f5;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #e50914;
}
textarea {
  resize: vertical;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}

button {
  background: #e50914;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 0.9rem;
  cursor: pointer;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
.link-btn {
  background: none;
  color: #8ab4ff;
  padding: 4px 8px;
  font-size: 0.85rem;
}
.link-btn:disabled {
  color: #5a5a66;
}

/* Upload form grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 8px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field > span {
  font-size: 0.8rem;
  color: #9a9aa5;
}
.span2 {
  grid-column: 1 / -1;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
}
.checkbox input {
  width: auto;
}

/* Progress bar */
.bar {
  position: relative;
  background: #0f0f15;
  border: 1px solid #2a2a35;
  border-radius: 6px;
  height: 22px;
  overflow: hidden;
}
.bar-fill {
  background: linear-gradient(90deg, #1d4d2b, #2e7d46);
  height: 100%;
  transition: width 0.3s ease;
}
.bar-fill.error {
  background: #5c1d1d;
}
.bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Jobs */
.job {
  border-top: 1px solid #23232c;
  padding: 12px 0;
}
.job-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.tier-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Library list */
.lib-list {
  display: flex;
  flex-direction: column;
}
.lib-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #23232c;
}

/* Bitrate ladder table */
.tier-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tier-table-head,
.tier-table-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr 32px;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
}
.tier-table-head span {
  font-size: 0.75rem;
  color: #9a9aa5;
}
.tier-table-row input {
  width: 100%;
}

/* Raw templates */
.raw-block {
  margin-top: 10px;
  border-top: 1px solid #23232c;
  padding-top: 12px;
}
.raw-field {
  margin-bottom: 12px;
}
.raw-field-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.raw-block code {
  background: #0f0f15;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* --- Upload layout + poster editor --------------------------------------- */
.field-label {
  font-size: 0.8rem;
  color: #9a9aa5;
  display: block;
  margin-bottom: 6px;
}
.upload-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-gap: 20px;
  gap: 20px;
  margin-top: 8px;
}
.upload-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upload-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.editor-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.editor-row .field {
  flex: 1 1;
  min-width: 0;
}
.field.inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.poster-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.poster-editor-stage {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 2 / 3;
  background: #0f0f15;
  border: 1px dashed #3a3a45;
  border-radius: 8px;
  overflow: hidden;
}
.poster-editor-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: -webkit-grab;
  cursor: grab;
}
.poster-editor-canvas:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.poster-editor-drop {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #9a9aa5;
  text-align: center;
  padding: 16px;
  pointer-events: none;
}
.poster-editor-drop .file-pick {
  pointer-events: auto;
}
.file-pick {
  display: inline-block;
  background: #2a2a35;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
.file-pick.small {
  padding: 5px 10px;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.12);
}
.poster-editor-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}
.text-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #23232c;
  padding-top: 8px;
}
.text-controls select {
  flex: 1 1;
}
.editor-hint {
  font-size: 0.75rem;
}
input[type="color"] {
  padding: 2px;
  height: 34px;
  width: 44px;
  cursor: pointer;
}
input[type="range"] {
  width: 100%;
  accent-color: #e50914;
}

/* --- Library manager ----------------------------------------------------- */
.lib-entry {
  border-top: 1px solid #23232c;
}
.lib-entry .lib-item {
  border-top: none;
  grid-template-columns: 1fr auto auto auto;
}
.media-manager {
  padding: 12px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mm-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
}
.mm-art {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  gap: 20px;
}
.mm-art-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.mm-poster {
  width: 140px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
}
.mm-bg {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
}
.mm-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mm-photo {
  position: relative;
}
.mm-photo img {
  width: 90px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.mm-photo-del {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #5c1d1d;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
}

@media (max-width: 760px) {
  .upload-layout {
    grid-template-columns: 1fr;
  }
  .mm-art {
    grid-template-columns: 1fr;
  }
}

/* --- Film detail modal --------------------------------------------------- */
.film-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
  animation: film-backdrop-in 0.25s ease;
}
@keyframes film-backdrop-in {
  from {
    background: rgba(0, 0, 0, 0);
  }
  to {
    background: rgba(0, 0, 0, 0.75);
  }
}
@media (prefers-reduced-motion: reduce) {
  .film-fly {
    display: none;
  }
  .film-modal-bg,
  .film-modal-heading,
  .film-modal-format,
  .film-modal-body {
    transition: none;
    opacity: 1;
  }
}
.film-modal {
  background: #16161c;
  width: 100%;
  max-width: 880px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.film-modal-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.film-modal-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.film-modal.revealed .film-modal-bg {
  opacity: 1;
}
.film-modal-bg-empty {
  background: linear-gradient(135deg, #2a2a35, #16161c);
}

/* Flying poster: a copy of the clicked cover that zooms into the hero and fades
   out to reveal the background. Positioned + animated from JS (FLIP). */
.film-fly {
  position: fixed;
  z-index: 70;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  will-change: transform, opacity;
}

/* Title / format / body fade in once the zoom reveals the background. */
.film-modal-heading,
.film-modal-format,
.film-modal-body {
  opacity: 0;
  transition: opacity 0.35s ease 0.12s;
}
.film-modal.revealed .film-modal-heading,
.film-modal.revealed .film-modal-format,
.film-modal.revealed .film-modal-body {
  opacity: 1;
}
/* Fade the bottom of the image into the modal body. */
.film-modal-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 45%,
    rgba(22, 22, 28, 0.75) 72%,
    #16161c 90%
  );
  pointer-events: none;
}
.film-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.4rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.film-modal-close:hover {
  background: rgba(0, 0, 0, 0.85);
}
.film-modal-heading {
  position: absolute;
  left: 32px;
  bottom: 22px;
  right: 120px;
  z-index: 2;
}
.film-modal-sub {
  font-size: 0.9rem;
  color: #e0e0e8;
  margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.film-modal-heading h1 {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1.05;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.film-modal-format {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
.film-modal-body {
  padding: 18px 32px 28px;
}
.film-modal-facts {
  color: #b8b8c2;
  font-size: 0.9rem;
  margin: 14px 0 0;
}
.film-modal-desc {
  margin: 12px 0 0;
  line-height: 1.5;
  color: #e8e8ee;
}
.film-modal-photos {
  margin-top: 18px;
}

@media (max-width: 640px) {
  .film-modal-heading {
    left: 18px;
    right: 80px;
    bottom: 16px;
  }
  .film-modal-heading h1 {
    font-size: 1.6rem;
  }
  .film-modal-body {
    padding: 16px 18px 24px;
  }
}

/* Quality selector: render the current selection as text inside the button. The
   control sizes to its content (overriding video.js's fixed 4em) so the label can't
   overlap the fullscreen button or spill past the player border. */
.video-js .vjs-control-bar .vjs-quality-selector {
  width: auto !important;
  min-width: 0;
  flex: 0 0 auto;
}
.video-js .vjs-quality-selector .vjs-icon-placeholder {
  display: inline-flex;
  align-items: center;
  height: 100%;
  width: auto;
  padding: 0 0.6em;
  font-family: inherit;
  font-size: 1em;
  white-space: nowrap;
}
.video-js .vjs-quality-selector .vjs-icon-placeholder::before {
  content: none;
}
/* Popup menu: wide enough for the longest label on one line, anchored to the
   button's right edge so it doesn't run off the player. */
.video-js .vjs-quality-selector .vjs-menu {
  width: 16em !important;
  left: auto;
  right: 0;
}
.video-js .vjs-quality-selector .vjs-menu .vjs-menu-content {
  width: 100%;
  max-height: 24em;
}
.video-js .vjs-quality-selector .vjs-menu-item {
  white-space: nowrap;
  text-align: center;
}
.video-js .vjs-quality-action {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-style: italic;
}

/* Back button overlaid on the player (top-left). Lives inside the player element
   so it shows in fullscreen, and follows the control bar's show/hide. */
/* Back button as the first control-bar item (see backButton.ts). It fades with
   the control bar automatically since it's a child of it. */
.video-js .vjs-control-bar .vjs-back-button {
  width: auto;
  padding: 0 14px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-js .vjs-control-bar .vjs-back-button:hover {
  color: #fff;
  text-shadow: 0 0 1em #fff;
}
.video-js .vjs-control-bar .vjs-back-button .vjs-icon-placeholder {
  font-family: inherit;
  white-space: nowrap;
}
.video-js .vjs-control-bar .vjs-back-button .vjs-icon-placeholder::before {
  content: none;
}

/* Autostart loading state: hide the big play button and show the spinner until
   playback begins (see Player.tsx). */
.video-js.vjs-loading-initial .vjs-big-play-button {
  display: none !important;
}
.video-js.vjs-loading-initial .vjs-loading-spinner {
  display: block;
}

/* Stats-for-nerds overlay */
.player-wrap {
  position: relative;
}
.stats-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.8);
  color: #e8e8ee;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  min-width: 260px;
  pointer-events: auto;
}
.stats-overlay .stats-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.stats-overlay .stats-close {
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  font-size: 13px;
}
.stats-overlay .stats-section {
  margin: 8px 0 2px;
  color: #8ab4ff;
  font-weight: 700;
}
.stats-overlay table {
  width: 100%;
  border-collapse: collapse;
}
.stats-overlay td {
  padding: 1px 0;
  vertical-align: top;
}
.stats-overlay td:first-child {
  color: #9a9aa5;
  padding-right: 12px;
  white-space: nowrap;
}
.stats-overlay .stats-warn {
  color: #d98c8c;
}

/* Playback-speed MenuButton: a compact button (shows current rate) that expands
   into a popup speed panel. */
.video-js .vjs-control-bar .vjs-speed-menu {
  width: auto !important;
  min-width: 0;
  flex: 0 0 auto;
}
.video-js .vjs-speed-menu .vjs-icon-placeholder {
  display: inline-flex;
  align-items: center;
  height: 100%;
  width: auto;
  padding: 0 0.5em;
  font-family: inherit;
  font-size: 1em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.video-js .vjs-speed-menu .vjs-icon-placeholder::before {
  content: none;
}
.video-js .vjs-speed-menu .vjs-menu {
  width: 14em !important;
  left: auto;
  right: 0;
}
.video-js .vjs-speed-menu .vjs-menu .vjs-menu-content {
  width: 100%;
  max-height: none;
}

/* Popup panel contents */
.vjs-speed-panel {
  padding: 10px 12px;
  text-align: left;
  color: #f2f2f5;
  font-size: 13px;
}
.vjs-speed-panel .vjs-speed-title {
  font-weight: 700;
  margin-bottom: 8px;
}
.vjs-speed-panel .vjs-speed-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.vjs-speed-panel .vjs-speed-preset {
  flex: 1 1;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 0.85em;
}
.vjs-speed-panel .vjs-speed-preset-active {
  background: #e50914;
}
.vjs-speed-panel .vjs-speed-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.vjs-speed-panel .vjs-speed-range {
  flex: 1 1;
  accent-color: #e50914;
  cursor: pointer;
}
.vjs-speed-panel .vjs-speed-value {
  width: 3.6em;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.vjs-speed-panel .vjs-speed-reset {
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 0;
  cursor: pointer;
}
.vjs-speed-panel .vjs-speed-reset:disabled {
  opacity: 0.4;
  cursor: default;
}