/* ===== Theme tokens ===== */
:root{
  --bg:#f7f9fc; --panel:#fff; --ink:#111827; --muted:#6b7280; --accent:#6366f1;
  --cap-accent: var(--accent);
  --cap-bg: #f3f4f6;
  --cap-text: var(--ink);
  --cap-muted: #374151;
  --cap-outline: #e5e7eb;
  --cap-icon-size: 1.35rem;      /* larger icons */
}

/* ===== Playlist layout ===== */
.video-wrap.light {
  display:grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  gap:14px;
  background:var(--bg);
  padding:16px;
  border-radius:16px;
}
.video-wrap .video-player {
  background:var(--panel); border-radius:16px; padding:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.video-wrap .video-list {
  background:var(--panel); border-radius:16px; padding:8px; max-height:72vh;
  overflow:auto; box-shadow:0 8px 24px rgba(0,0,0,.06);
}
@media (max-width: 900px){
  .video-wrap.light { grid-template-columns: 1fr; }
  .video-wrap .video-list { max-height:none; }
}

/* Playlist items */
.video-list{ display:flex; flex-direction:column; gap:.35rem; max-height:68vh; overflow:auto; }
.vitem{ display:flex; gap:.5rem; align-items:center; cursor:pointer; padding:.35rem .5rem; border:1px solid #eee; border-radius:.6rem; background:#fff; text-align:left; }
.vitem .thumb{ width:64px; height:36px; object-fit:cover; border-radius:.4rem; background:#ddd; }
.vitem:hover { background:#f1f5f9; }
.vitem.active{ outline:2px solid var(--accent); }

/* ===== Video element + frame ===== */
.video-player .video-frame{
  position:relative; /* anchor overlay */
}
.video-player video{
  width:100%; height:auto; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); background:#000;
  display:block;
}
/* ===== Overlay subtitles (INSIDE video) ===== */
.cap-ovl{
  position:absolute; left:0; right:0; bottom:1rem; padding:0 .75rem;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  pointer-events:none; transition:opacity .15s ease;
  text-align:center;
}
.cap-ovl-line{
  display:block; max-width:min(92%, 68ch);
  background: rgba(0,0,0,.45);
  color:#fff; padding:.25rem .5rem; border-radius:.4rem;
  font-size: clamp(14px, 2.2vw, 20px);
  line-height:1.35; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.cap-ovl-line.en{ font-weight:600; }
.cap-ovl-line.cn{ font-weight:500; }

/* ===== Controls row (NO wrap; fullscreen stays same line) ===== */
.controls{
  position:relative;
  display:flex; align-items:center; gap:.5rem;
  margin:.5rem 0 0; font-size:14px; user-select:none;
  flex-wrap: nowrap;               /* keep one line on mobile */
}
.cap-btn{
  border:0; background:var(--cap-bg); color:var(--cap-text);
  padding:.45rem .6rem; border-radius:.55rem; cursor:pointer;
  line-height:1; min-width:2.25rem; text-align:center;
  transition: background .15s ease, color .15s ease, transform .05s ease;
  font-size: var(--cap-icon-size);
  flex: 0 0 auto;                  /* buttons don't wrap */
}
.cap-btn--overlay {
  position: relative;
}
.cap-btn--overlay::after {
  content: attr(data-icon-overlay);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}
.cap-btn--overlay[data-overlay-state="off"]::after {
  opacity: 1;
}
.cap-btn:focus{ outline:2px solid var(--cap-accent); outline-offset:2px; }
.cap-btn:active{ transform:translateY(1px); }
.cap-btn.on{ background:var(--cap-accent); color:#fff; }

.cap-spacer{ flex:0 0 6px; }

.cap-range{
  flex:1 1 auto;                   /* takes remaining space */
  min-width:90px;
  height:1.2rem; accent-color: var(--cap-accent);
}
.cap-clock{ font-variant-numeric: tabular-nums; font-size:.95rem; white-space:nowrap; }

/* ===== Settings popover (under ⚙) ===== */
.cap-pop{
  position: relative;
  height:0; /* anchor only */
}
.cap-pop.open .cap-pop-inner{ display:block; }
.cap-pop-inner{
  display:none;
  position:absolute; right:0; z-index:40; margin-top:.25rem;
  background:#fff; color:var(--cap-text); border:1px solid var(--cap-outline);
  border-radius:.6rem; box-shadow:0 12px 24px rgba(0,0,0,.12);
  padding:.6rem; min-width:240px;
}
.cap-pop-row{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:.35rem 0; }
.cap-pop-label{ min-width:88px; font-size:.9rem; color:var(--cap-muted); }
.cap-pop-audio{ display:flex; align-items:center; gap:.6rem; }
.cap-vol{ width:130px; accent-color: var(--cap-accent); }

.cap-sub-buttons{ display:flex; gap:.4rem; flex-wrap:wrap; }
.cap-chip{
  border:1px solid var(--cap-outline); background:#fff; color:#111;
  padding:.35rem .6rem; border-radius:999px; cursor:pointer; font-size:.95rem;
}
.cap-chip.on{ background:var(--cap-accent); color:#fff; border-color:var(--cap-accent); }

/* ===== Transcript panel ===== */
.cap-list{
  margin:.5rem 0 0; padding:0; list-style:none;
  max-height:36vh; overflow:auto; border:1px solid var(--cap-outline); border-radius:.6rem;
}
.cap-list.collapsed{ display:none; }
.cap-item.subtitle-item{ display:block; margin:0; padding:0; } /* zero space/pad */
.cap-item .cap-line{ display:block; line-height:1.35; padding:.15rem .35rem; }
.cap-item .cap-line.en{ color:var(--cap-text); }
.cap-item .cap-line.cn{ color:var(--cap-muted); }
.cap-item.active{ background:#eef2ff; }

/* ===== Mobile tightening (keep single-line controls) ===== */
@media (max-width: 480px){
  .cap-spacer{ display:none; }
  .cap-clock{ font-size:.85rem; }
  .cap-range{ min-width:70px; }
}

/* Group container */
.vgroup { display:flex; flex-direction:column; gap:.25rem; margin-bottom:.5rem; }

/* Header button */
.vgroup-title{
  display:flex; align-items:center; gap:.5rem;
  width:100%; text-align:left; cursor:pointer;
  background:var(--panel, #fff); color:var(--muted, #6b7280);
  border:1px solid var(--outline, #e5e7eb);
  border-left:3px solid var(--accent, #2563eb);
  border-radius:8px; padding:.4rem .55rem; font-weight:700; font-size:13px;
  position:sticky; top:0; z-index:1;
}
.vgroup-title:hover{ background:#f8fafc; }

.vgroup-caret{ display:inline-block; transition: transform .18s ease; }
.vgroup[aria-expanded="true"]  .vgroup-caret{ transform: rotate(90deg); } /* opened */
.vgroup[aria-expanded="false"] .vgroup-caret{ transform: rotate(0deg);   } /* closed */

.vgroup-name{ flex:1 1 auto; min-width:0; }
.vgroup-count{ color:#9ca3af; font-weight:600; }

/* Body panel */
.vgroup-body{ display:flex; flex-direction:column; gap:.35rem; padding:.25rem 0 0; }
.vgroup[aria-expanded="false"] .vgroup-body{ display:none; }