/* ══════════════════════════════════════════════════════════════
   Рамка ролика. Снаружи одинаковая для всех источников, внутри чужой плеер.
   Соотношение сторон зафиксировано, чтобы макет не прыгал при загрузке.
   ══════════════════════════════════════════════════════════════ */

.vf{display:flex; flex-direction:column; gap:10px}

.vf-frame{
  position:relative; aspect-ratio:16/9; border-radius:20px; overflow:hidden;
  background:#000;
  /* тень в два слоя: внутренний свет по краю и внешняя мягкая */
  box-shadow:inset 0 0 0 1px var(--line-strong), 0 26px 60px -34px rgba(0,0,0,.75);
}
.vf-stage{position:absolute; inset:0}
.vf-stage iframe,.vf-stage video{position:absolute; inset:0; width:100%; height:100%; border:0; background:#000}

.vf-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.vf-frame[data-state="loading"] .vf-poster{opacity:.35}
.vf-frame[data-state="playing"] .vf-poster,
.vf-frame[data-state="playing"] .vf-play{display:none}
.vf-frame[data-state="idle"]:hover .vf-poster{transform:scale(1.03)}

.vf-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:66px; height:66px; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:#12100c;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7);
  transition:transform .2s cubic-bezier(.16,1,.3,1), background-color .2s ease;
}
.vf-play svg{width:26px; height:26px; margin-left:3px}
.vf-play:hover{transform:translate(-50%,-50%) scale(1.06); background:var(--gold)}
.vf-play:active{transform:translate(-50%,-50%) scale(.97)}
.vf-play:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
.vf-frame[data-state="loading"] .vf-play{display:none}
/* ролик ещё не залит: рамка держит объяснение, играть нечего */
.vf-frame[data-state="pending"]{background:var(--bg-2, #0A0E1A)}

.vf-load{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px;
  color:#fff; font-size:.875rem; background:rgba(0,0,0,.45);
}
.vf-spin{
  width:18px; height:18px; border-radius:50%; flex:none;
  border:2px solid rgba(255,255,255,.28); border-top-color:#fff;
}
@media (prefers-reduced-motion: no-preference){
  .vf-spin{animation:vf-spin .8s linear infinite}
  @keyframes vf-spin{to{transform:rotate(360deg)}}
}

.vf-err,.vf-pending{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:20px; text-align:center; background:rgba(8,8,10,.9); color:#fff;
}
.vf-err-h{margin:0; font-weight:600; font-size:1rem}
.vf-err-p{margin:0; font-size:.8438rem; color:rgba(255,255,255,.72); max-width:38ch; line-height:1.5}
.vf-err-btns{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:6px}
.vf-err-btns > *{
  min-height:44px; display:inline-flex; align-items:center; padding:0 15px; border:0; border-radius:12px;
  font:inherit; font-size:.875rem; font-weight:600; cursor:pointer; text-decoration:none;
  transition:background-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.vf-retry{background:var(--gold); color:#12100c}
.vf-open{background:rgba(255,255,255,.14); color:#fff}
.vf-err-btns > *:active{transform:scale(.97)}

.vf-bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.16)}
.vf-bar i{display:block; height:100%; width:0; background:var(--gold)}

.vf-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.75rem; color:var(--ink-faint);
}
.vf-src{
  padding:3px 9px; border-radius:999px; background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-dim);
  letter-spacing:.04em; text-transform:uppercase; font-weight:600; font-size:.6875rem;
}
.vf-vpn{margin-left:auto}
/* «Пропустить ролик» рядом с подписью источника: та же тихая кнопка, что и вкладки транскрипции */
.vf-skip-idle{
  min-height:44px; min-width:48px; padding:0 11px; border:0; border-radius:9px; cursor:pointer;
  font:inherit; font-size:.75rem; font-weight:600;
  background:transparent; color:var(--ink-faint); box-shadow:inset 0 0 0 1px var(--line);
  transition:color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.vf-skip-idle:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong)}
.vf-skip-idle:active{transform:scale(.97)}
.vf-skip-idle:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
/* бейдж VPN в углу постера: спокойный серый, не кричащий, только до запуска */
.vf-vpn-badge{
  position:absolute; left:12px; top:12px; z-index:2; max-width:calc(100% - 24px);
  padding:5px 10px; border-radius:999px;
  background:rgba(10,14,26,.72); color:rgba(255,255,255,.82);
  font-size:.6875rem; font-weight:600; letter-spacing:.02em; line-height:1.3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); pointer-events:none;
}

/* ── транскрипция ──────────────────────────────────────────── */
.vf-tr{
  border-radius:16px; overflow:hidden;
  background:var(--glass); box-shadow:inset 0 0 0 1px var(--line);
}
.vf-tr-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:11px 14px; box-shadow:inset 0 -1px 0 var(--line);
}
.vf-tr-title{font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
.vf-tr-tabs{display:flex; gap:4px; margin-left:auto}
.vf-tr-tabs button{
  min-height:44px; min-width:48px; padding:0 11px; border:0; border-radius:9px; cursor:pointer;
  font:inherit; font-size:.75rem; font-weight:600;
  background:transparent; color:var(--ink-faint);
  transition:background-color .2s ease, color .2s ease;
}
.vf-tr-tabs button[aria-pressed="true"]{background:var(--gold-soft); color:var(--ink)}
.vf-tr-tabs button:active{transform:scale(.97)}

.vf-lines{list-style:none; margin:0; padding:6px; max-height:230px; overflow-y:auto}
.vf-lines li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px;
  padding:8px 10px; border-radius:11px;
  transition:background-color .2s ease;
}
.vf-lines li.on{background:var(--gold-soft)}
.vf-jump{
  grid-row:1/3; align-self:start; min-height:28px; padding:0 8px;
  border:0; border-radius:8px; cursor:pointer;
  font:inherit; font-size:.6875rem; font-variant-numeric:tabular-nums;
  background:transparent; color:var(--ink-faint); box-shadow:inset 0 0 0 1px var(--line);
  transition:color .2s ease, box-shadow .2s ease;
}
.vf-jump:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong)}
.vf-en{font-size:.9375rem; color:var(--ink); line-height:1.45}
.vf-en i{font-style:normal; transition:color .15s ease}
.vf-en i.on{color:var(--gold)}
/* целевая конструкция урока в строке: тихая подсветка токенами, без жёлтого mark браузера */
.vf-en mark.vf-target,.vf-en i.vf-target{
  background:var(--gold-soft); color:inherit; border-radius:4px; padding:0 .15em;
  box-shadow:inset 0 -1px 0 var(--gold);
}
.vf-ru{font-size:.8125rem; color:var(--ink-dim); line-height:1.4}
.vf-tr[data-mode="en"] .vf-ru{display:none}
.vf-tr[data-mode="ru"] .vf-en{display:none}
.vf-tr-note{margin:0; padding:8px 14px 11px; font-size:.75rem; color:var(--ink-faint)}

@media (prefers-reduced-motion: reduce){
  .vf-poster,.vf-play,.vf-lines li,.vf-tr-tabs button,.vf-err-btns > *,.vf-skip-idle{transition:none}
  .vf-frame[data-state="idle"]:hover .vf-poster{transform:none}
}

/* ── переключатель акцента ──────────────────────────────────────
   Одна кнопка звука плюс две вкладки BR/US. Недоступный акцент выключен и
   объясняет причину в подсказке, а не притворяется рабочим. */
.acc-voice{display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap}
.acc-play{
  width:44px; height:44px; flex:none; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--gold-soft); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:background-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.acc-play svg{width:19px; height:19px}
.acc-play:hover:not(:disabled){background:var(--gold); color:var(--bg-0)}
.acc-play:active:not(:disabled){transform:scale(.97)}
.acc-play:disabled{opacity:.4; cursor:not-allowed}
.acc-play:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.acc-tabs{display:inline-flex; gap:2px; padding:2px; border-radius:10px; background:var(--line)}
.acc-tabs button{
  min-width:38px; min-height:36px; padding:0 8px; border:0; border-radius:8px; cursor:pointer;
  font:inherit; font-size:.6875rem; font-weight:700; letter-spacing:.06em;
  background:transparent; color:var(--ink-faint);
  transition:background-color .2s ease, color .2s ease;
}
.acc-tabs button[aria-pressed="true"]{background:var(--bg-2); color:var(--ink)}
.acc-tabs button:disabled{opacity:.35; cursor:not-allowed}
.acc-tabs button:active:not(:disabled){transform:scale(.97)}

/* Честная подпись: синтез не выдаётся за носителя */
.acc-tts{
  padding:3px 8px; border-radius:999px; font-size:.6875rem; font-weight:600;
  background:transparent; color:var(--ink-faint); box-shadow:inset 0 0 0 1px var(--line-strong);
}
.acc-sub{font-size:.6875rem; color:var(--ink-faint)}