.videos-shell { width: min(calc(100% - 24px), 980px); }
.videos-body { color: #222; font-family: Arial, Helvetica, sans-serif; }
.videos-body p { font-family: Arial, Helvetica, sans-serif; }
.velvettube { --video-grid-gutter: 8px; width: calc(100% - 28px); margin-left: 28px; color: #111; font: 12px/1.2 Arial, Helvetica, sans-serif; }
.velvettube a { color: #861523; }
.videos-return { margin-top: 24px; }
.videos-return .media-return-home-button { font-size: 18px; }

.tube-section-title { display: flex; align-items: center; justify-content: space-between; margin-inline: var(--video-grid-gutter); padding: 5px 9px; color: #fff; background: #651017 url("/assets/backgrounds/bg-red-02.jpg") center / 230px auto; font: italic 700 17px/1.1 Georgia, "Times New Roman", serif; text-shadow: 0 1px 2px #39060b; }
.video-count { font-size: 12px; }
.video-index-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; padding: 12px 8px 8px; background: #fff; }
.recent-video-grid { margin-bottom: 24px; }
.video-sort-form { display: flex; align-items: center; gap: 6px; box-sizing: border-box; margin: 0; padding: 8px 9px 0; color: #87171d; font: 12px/1.2 Arial, Helvetica, sans-serif; }
.video-sort-form select { max-width: 190px; padding: 2px 4px; border: 1px solid #87171d; color: #111; background: #fff; font: 12px/1.2 Arial, Helvetica, sans-serif; }
.video-index-card { min-width: 0; }
.video-thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #aaa; background: #111; }
.video-thumb img,
.video-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-thumb > span { position: absolute; right: 3px; bottom: 3px; z-index: 2; padding: 2px 4px; color: #fff; background: rgba(0,0,0,.8); font-weight: 700; text-decoration: none; }
.video-index-card h2 { margin: 5px 0 2px; font-size: 13px; line-height: 1.15; }
.video-index-card h2 a { color: #861523; }
.video-index-card p { margin: 1px 0; color: #333; font-size: 11px; }
.tube-empty { margin: 0; padding: 35px; border: 1px solid #ccc; background: #f1f1f1; text-align: center; }
.tube-pages { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 6px 8px; background: #d0d0d0; }
.tube-pages a { display: inline-grid; min-width: 19px; height: 20px; place-items: center; border: 1px solid #aaa; background: #eee; }
.tube-pages a.active { color: #fff; background: #861523; text-decoration: none; }

.watch-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 12px 0 9px; }
.watch-title-row h1 { margin: 0; color: #87171d; font-family: "Times New Roman", Times, serif; font-size: 28px; }
.watch-edit-link { flex: none; color: #87171d; font: italic 13px/1.2 Georgia, "Times New Roman", serif; }
.watch-columns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .9fr); align-items: start; gap: 16px; }
.tube-player { width: 100%; aspect-ratio: 1280 / 720; padding: 0; overflow: hidden; background: #050505; }
.tube-player video { display: block; width: 100%; height: 100%; border-radius: 0; background: #000; object-fit: contain; accent-color: #87171d; }
.tube-player iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: #000; }
.tube-player video::-webkit-media-controls-timeline {
  border-radius: 0;
}
.watch-description { margin-top: 12px; font-family: "Times New Roman", Times, serif; }
.watch-description h2 { margin: 0; color: #000; font-size: 15px; }
.watch-description p { margin: 6px 0 0; font-family: "Times New Roman", Times, serif; font-size: 13px; line-height: 1.45; }
.watch-description.is-collapsible p { max-height: calc(1.45em * 5); overflow: hidden; }
.watch-description.is-expanded p { max-height: none; }
.watch-description-toggle {
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  color: #87171d;
  background: transparent;
  font: italic 12px/1.3 Georgia, "Times New Roman", serif;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.watch-description-toggle:hover,
.watch-description-toggle:focus-visible { color: #b92f51; }
.explore-videos { border: 1px solid #b92f51; background: #fff; }
.explore-videos > h2 { margin: 0; padding: 5px 9px; color: #fff; background: #651017 url("/assets/backgrounds/bg-red-02.jpg") center / 230px auto; font: italic 700 17px/1.1 Georgia, "Times New Roman", serif; text-shadow: 0 1px 2px #39060b; }
.related-videos { display: grid; background: #fff; }
.related-videos > a { display: grid; grid-template-columns: 92px 1fr; gap: 7px; padding: 7px; border-bottom: 1px solid #ddd; text-decoration: none; }
.related-videos > a:hover { background: #e8e8e8; }
.related-videos img,
.related-videos video { width: 92px; aspect-ratio: 4 / 3; object-fit: cover; }
.related-videos span { min-width: 0; }
.related-videos b { display: block; text-decoration: underline; }
.related-videos small { display: block; margin-top: 3px; color: #333; }
.related-empty { margin: 0; padding: 12px 9px; color: #87171d; font-family: "Times New Roman", Times, serif; }

.video-admin-shell { width: min(calc(100% - 32px), 720px); }
.video-admin-help { margin: -5px 0 2px; color: #9a6b74; font-size: 11px; }
.video-source-panel { display: grid; gap: 8px; }
.video-file-current,
.video-file-size { margin: -4px 0 4px; color: #87171d; font-size: 12px; }
.video-description-field { display: grid; gap: 6px; color: #87171d; }
.video-description-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.media-form .video-editor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 30px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid #dca3ae;
  border-radius: 0;
  color: #87171d;
  background: #fffafa;
  font: 700 12px/1 "Times New Roman", Times, serif;
  cursor: pointer;
}
.media-form .video-editor-button:hover,
.media-form .video-editor-button:focus-visible { background: #f7e1e3; }
.video-editor-italic { font-style: italic !important; }
.video-editor-underline,
.video-editor-link { text-decoration: underline; text-underline-offset: 2px; }
.video-editor-strike { text-decoration: line-through; }
.video-description-editor {
  width: 100%;
  min-height: 135px;
  max-height: 75vh;
  padding: 9px;
  border: 1px solid #efc4cb;
  color: #52151e;
  background: #fff;
  font: 13px/1.55 "Times New Roman", Times, serif;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-wrap: anywhere;
  outline: none;
  resize: vertical;
}
.video-description-editor:focus { outline: 2px solid #efb7c1; outline-offset: 1px; }
.video-description-editor:empty::before { color: #9a6b74; content: attr(data-placeholder); pointer-events: none; }
.video-r2-progress { width: 100%; height: 8px; overflow: hidden; border: 1px solid #b92f51; background: #fff; }
.video-r2-progress span { display: block; width: 0; height: 100%; background: #87171d; transition: width .15s linear; }
.video-r2-status { min-height: 1.2em; margin: -2px 0 3px; color: #87171d; font-size: 12px; }
.video-frame-picker { display: grid; gap: 9px; margin: 12px 0 16px; padding-top: 12px; border-top: 1px dotted #dca3ae; }
.video-frame-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #7b2737; }
.video-frame-picker-heading > div { display: grid; gap: 3px; }
.video-frame-picker-heading strong { font: 700 14px/1.2 Georgia, "Times New Roman", serif; }
.video-frame-picker-heading span,
.video-frame-picker > p { margin: 0; color: #9a6b74; font-size: 11px; }
.video-frame-picker-heading button { flex: none; padding: 5px 8px; border: 1px solid #b92f51; border-radius: 0; color: #87171d; background: #fff; font: italic 12px/1.2 Georgia, "Times New Roman", serif; cursor: pointer; }
.video-frame-picker-heading button:hover,
.video-frame-picker-heading button:focus-visible { color: #fff; background: #87171d; }
.video-frame-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.video-frame-choice { position: relative; display: block; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.video-frame-choice img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.video-frame-choice:hover,
.video-frame-choice:focus-visible { opacity: .78; }
.video-frame-choice.selected::after { content: "✓"; position: absolute; top: 5px; right: 5px; display: grid; width: 24px; height: 24px; place-items: center; color: #fff; background: #87171d; font: 700 15px/1 Arial, sans-serif; }
.video-manage-list { display: grid; gap: 10px; margin-top: 14px; }
.video-manage-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px; border: 1px solid #efd0d6; background: #fff; }
.video-manage-row img,
.video-manage-row video { width: 88px; aspect-ratio: 4 / 3; border: 1px solid #ddd; object-fit: cover; }
.video-manage-row h2 { margin: 0; color: #87171d; font: 16px/1.2 Georgia, serif; }
.video-manage-row h2 a { color: inherit; text-decoration: none; }
.video-manage-row h2 a:hover,
.video-manage-row h2 a:focus-visible { text-decoration: underline; }
.video-manage-row p { margin: 4px 0 0; color: #7d5960; font-size: 11px; }
.video-manage-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.video-manage-actions form { margin: 0; }
.video-manage-actions a,
.video-manage-actions button { display: inline-grid; min-height: 30px; place-items: center; padding: 5px 9px; border: 1px solid #b92f51; color: #87171d; background: #fff; font: italic 12px Georgia, serif; cursor: pointer; text-decoration: none; }
.video-manage-actions .danger { text-decoration: underline; border-color: transparent; }
.video-status { display: inline-block; margin-left: 6px; padding: 2px 5px; color: #276037; background: #eaf4eb; font-size: 9px; text-transform: uppercase; }

@media (max-width: 700px) {
  .videos-shell { width: min(calc(100% - 16px), 620px); padding-right: 8px; padding-left: 8px; }
  .velvettube { width: 100%; margin: 10px 0 0; }
  .video-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .watch-columns { grid-template-columns: 1fr; }
  .explore-videos { order: 2; }
  .video-manage-row { grid-template-columns: 72px minmax(0, 1fr); }
  .video-manage-row img,
  .video-manage-row video { width: 72px; }
  .video-manage-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 420px) {
  .velvettube { --video-grid-gutter: 6px; }
  .video-index-grid { gap: 17px 10px; padding: 6px; }
  .video-index-card h2 { font-size: 12px; }
  .video-sort-form { width: 100%; }
  .video-sort-form select { flex: 1; min-width: 0; max-width: none; }
  .video-frame-options { grid-template-columns: 1fr; }
}
