/* ---------- свой плеер (без controls): чистое видео при воспроизведении, оверлей по тапу ---------- */
.vp { position: relative; background: #000; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.vp video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.vp-thin { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .18); opacity: 0; pointer-events: none; }
.vp.playing .vp-thin { opacity: 1; }
.vp-thin i, .vp-seek i { display: block; height: 100%; width: 0; background: var(--accent); }
.vp-ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .25); }
.vp-ov[hidden] { display: none; }
.vp-play { width: 64px; height: 64px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; background: var(--media-glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.vp-play .i-lg { width: 34px; height: 34px; }   /* центрирование — в самом символе i-play */
.vp-ctl { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; }
.vp-fs .vp-ctl { bottom: calc(var(--sab) + 16px); left: 16px; right: 16px; }
.vp-time { font-size: var(--type-caption); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.vp-seek { flex: 1; height: 44px; padding: 20px 0; box-sizing: border-box; touch-action: none; cursor: pointer; }
.vp-seek i { height: 4px; border-radius: 2px; background: var(--accent); position: relative; }
.vp-seek::before { content: ""; display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); margin-bottom: -4px; }
.vp-btn { width: 44px; height: 44px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); flex: 0 0 auto; }
.vp-close { position: absolute; top: calc(var(--top) + 8px); right: 16px; width: 44px; height: 44px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; background: var(--media-glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

.vp .i, .vp .i-lg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vp button { padding: 0; border: 0; cursor: pointer; flex-shrink: 0; }
.vp-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; pointer-events: none; }
.vp-poster[hidden], .vp-loading[hidden], .vp-error[hidden] { display: none; }
.vp-loading { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; background: #0002; }
.vp-loading::after { content: ''; width: 28px; height: 28px; border: 3px solid #ffffff44; border-top-color: white; border-radius: 50%; animation: vp-spin .8s linear infinite; }
.vp-error { position: absolute; left: 12px; right: 12px; top: 12px; padding: 10px; border-radius: 10px; background: #101c28e6; color: white; font-size: 14px; text-align: center; z-index: 2; }
@keyframes vp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vp-loading::after { animation-duration: 2s; } }

.vp .f { fill: currentColor; stroke: none; }
.vp .vp-play .i-lg { width: 34px; height: 34px; }
.vp .snd .off, .vp .snd.muted .on { display: none; }
.vp .snd.muted .off { display: block; }
.vp-fs .vp-poster { object-fit: cover; }