@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

.vp-root {
  --vp-accent      : #ADCE2E;
  --vp-text        : #393939;
  --vp-border      : #E2E2E2;
  --vp-timecode    : #4A90D9;
  --vp-active-bg   : #F0F7D4;
  --vp-hover-bg    : #F5F5F5;
  --vp-checked-bg  : #EEF7C8;
  --vp-font        : 'Montserrat', sans-serif;
  --vp-time-size   : 12px;
  --vp-time-weight : 700;
  --vp-title-size  : 13px;
  --vp-title-weight: 500;
  --vp-ctrl-size   : 11px;
  --vp-radius      : 20px;
}
.vp-root *, .vp-root *::before, .vp-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
.vp-root {
  width: 100%; display: flex; flex-direction: column;
  border-radius: var(--vp-radius); overflow: hidden; position: relative;
  background: #fff; font-family: var(--vp-font); isolation: isolate;
}
.vp-root::after {
  content: ''; position: absolute; inset: 0;
  border-radius: var(--vp-radius); border: 1px solid var(--vp-border);
  pointer-events: none; z-index: 1000;
}
.vp-video-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 160px;
  background: #000; cursor: pointer; flex-shrink: 0;
  border-radius: var(--vp-radius) var(--vp-radius) 0 0; overflow: hidden;
}
video.vp-video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.vp-big-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.12); transition: opacity .2s; z-index: 3;
}
.vp-big-play.hidden { opacity: 0; pointer-events: none; }
.vp-big-play-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.45); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background .15s;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.vp-big-play-btn:hover { transform: scale(1.08); background: rgba(255,255,255,0.58); }
.vp-big-play-btn svg { width: 26px; height: 26px; fill: rgba(30,30,30,0.55); margin-left: 4px; display: block; }
.vp-controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 12px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.80));
  opacity: 0; transform: translateY(4px);
  transition: opacity .22s, transform .22s; pointer-events: none; z-index: 4;
}
.vp-video-wrap:hover .vp-controls,
.vp-video-wrap.touch-active .vp-controls { opacity: 1; transform: translateY(0); pointer-events: all; }
.vp-progress {
  width: 100%; height: 5px; background: rgba(255,255,255,0.15);
  border-radius: 3px; cursor: pointer; margin-bottom: 8px;
  position: relative; transition: height .12s;
}
.vp-progress:hover { height: 6px; }
.vp-segments {
  position: absolute; inset: 0; display: flex; gap: 3px;
  pointer-events: none; z-index: 1; border-radius: 3px; overflow: hidden;
}
.vp-seg {
  height: 100%; background: rgba(255,255,255,0.18);
  position: relative; pointer-events: all; cursor: pointer;
  transition: background .15s; min-width: 2px;
}
.vp-seg:hover   { background: rgba(255,255,255,0.28); }
.vp-seg.played  { background: rgba(255,255,255,0.38); }
.vp-seg.current { background: rgba(255,255,255,0.25); }
.vp-progress-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: rgba(255,255,255,0.45); mix-blend-mode: screen;
  border-radius: 3px; width: 0%; pointer-events: none; z-index: 2;
}
.vp-progress-thumb {
  position: absolute; top: 50%; left: 0%; transform: translate(-50%, -50%);
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 3;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.vp-progress:hover .vp-progress-thumb { opacity: 1; }
.vp-chapter-tooltip {
  position: absolute; bottom: calc(100% + 10px); left: 0; transform: translateX(-50%);
  background: rgba(20,20,20,0.88); color: #fff; font-size: 11px; font-family: var(--vp-font);
  font-weight: 500; padding: 5px 10px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 20;
}
.vp-chapter-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(20,20,20,0.88);
}
.vp-chapter-tooltip.visible { opacity: 1; }
.vp-fs-current-chapter { display: none !important; }
.vp-chapter-label {
  display: none; font-size: 11px; color: #fff; background: rgba(0,0,0,0.45);
  padding: 3px 8px; border-radius: 0 4px 4px 0; pointer-events: none;
  white-space: nowrap; max-width: 70%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px;
}
@media (max-width: 768px) { .vp-chapter-label { display: block; } }
.vp-btns { display: flex; align-items: center; gap: 7px; }
.vp-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: .88; transition: opacity .15s, transform .15s; flex-shrink: 0;
}
.vp-btn:hover { opacity: 1; transform: scale(1.1); }
.vp-btn svg   { width: 18px; height: 18px; fill: currentColor; }
.vp-time {
  color: rgba(255,255,255,.82); font-size: var(--vp-ctrl-size);
  white-space: nowrap; flex-shrink: 0; font-family: var(--vp-font);
}
.vp-spacer { flex: 1; }
.vp-gear-wrap { position: relative; }
.vp-quality-menu {
  position: absolute; bottom: 30px; right: 0;
  background: rgba(18,18,18,.96); border-radius: 8px; overflow: hidden;
  display: none; flex-direction: column; min-width: 110px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5); z-index: 10;
}
.vp-quality-menu.open { display: flex; }
.vp-q-item {
  padding: 7px 14px; color: #fff; font-size: 12px; font-family: var(--vp-font);
  cursor: pointer; transition: background .15s;
}
.vp-q-item:hover  { background: rgba(255,255,255,.12); }
.vp-q-item.active { color: var(--vp-accent); font-weight: 700; }
.vp-divider { width: 100%; height: 1px; background: var(--vp-border); flex-shrink: 0; }
.vp-chapters {
  background: #fff; padding: 6px 8px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; flex-shrink: 0;
  position: relative;
}
.vp-root.narrow .vp-chapters { grid-template-columns: 1fr; }
.vp-chapters.scrollable {
  max-height: 134px;
  overflow-y: auto;
  padding-right: 16px;
  scroll-behavior: smooth;
}

/* Мобильная версия: показываем 7 пунктов вместо 8.
   Высоту можно подкрутить, если 7-й пункт чуть виден или, наоборот, скрыт. */
@media (max-width: 768px) {
  .vp-chapters.scrollable {
    max-height: 250px;   /* для 1 колонки: 7 рядов × ~34px */
  }
}
@media (max-width: 480px) {
  .vp-chapters.scrollable {
    max-height: 250px;   /* то же — на узких экранах 1 колонка */
  }
}

.vp-chapters.scrollable::-webkit-scrollbar { width: 6px; }
.vp-chapters.scrollable::-webkit-scrollbar-track {
  background: #f3f4f6; border-radius: 3px; margin: 6px 0;
}
.vp-chapters.scrollable::-webkit-scrollbar-thumb {
  background: #ADCE2E; border-radius: 3px;
}
.vp-chapters.scrollable::-webkit-scrollbar-thumb:hover { background: #9ab828; }
.vp-chapters.scrollable {
  scrollbar-width: thin;
  scrollbar-color: #ADCE2E #f3f4f6;
}
.vp-chapter {
  display: flex; align-items: center; gap: 6px; padding: 7px 8px;
  border-radius: 8px; cursor: pointer; text-decoration: none;
  transition: background .15s; min-width: 0;
}
.vp-chapter:hover      { background: var(--vp-hover-bg); }
.vp-chapter.active     { background: var(--vp-active-bg); }
.vp-chapter.cb-checked { background: var(--vp-checked-bg); }
.vp-ch-time {
  flex-shrink: 0; color: var(--vp-timecode);
  font-size: var(--vp-time-size); font-weight: var(--vp-time-weight);
  font-family: 'SF Mono','Fira Code',monospace;
}
.vp-ch-title {
  flex: 1; color: var(--vp-text);
  font-size: var(--vp-title-size); font-weight: var(--vp-title-weight);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vp-cb-wrap {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
}
.vp-cb-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.vp-cb-box {
  width: 18px; height: 18px; min-width: 18px;
  border: 2px solid #C8C8C8; border-radius: 4px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s; cursor: pointer;
}
.vp-cb-box::after {
  content: ''; display: none; width: 4px; height: 8px;
  border: 2px solid #fff; border-top: none; border-left: none;
  transform: rotate(45deg) translateY(-1px);
}
.vp-chapter.cb-checked .vp-cb-box { background: var(--vp-accent); border-color: var(--vp-accent); }
.vp-chapter.cb-checked .vp-cb-box::after { display: block; }
.vp-cb-wrap:hover .vp-cb-box { border-color: var(--vp-accent); }
.vp-cb-tooltip {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  background: #393939; color: #fff; font-size: 11px;
  font-family: var(--vp-font); font-weight: 500;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0; transform: translateY(3px);
  transition: opacity .18s, transform .18s; z-index: 20;
}
.vp-cb-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 5px;
  border: 5px solid transparent; border-top-color: #393939;
}
.vp-cb-wrap:hover .vp-cb-tooltip { opacity: 1; transform: translateY(0); }
.vp-fullscreen-chapters { display: none !important; }
.vp-rotate-hint {
  display: none; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); flex-direction: column;
  align-items: center; gap: 10px; background: rgba(0,0,0,0.55);
  padding: 18px 26px; border-radius: 12px; color: #fff; font-size: 13px;
  font-family: var(--vp-font); pointer-events: none; z-index: 20; text-align: center;
}
.vp-rotate-hint.visible { display: flex; animation: vpRotateAnim 1.4s ease-in-out infinite; }
@keyframes vpRotateAnim {
  0%   { transform: translate(-50%, -50%) rotate(0deg);   }
  40%  { transform: translate(-50%, -50%) rotate(20deg);  }
  60%  { transform: translate(-50%, -50%) rotate(20deg);  }
  100% { transform: translate(-50%, -50%) rotate(0deg);   }
}
@media (min-width: 769px) { .vp-rotate-hint { display: none !important; } }
.vp-error {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; background: #111; color: #fff;
  text-align: center; padding: 20px; gap: 8px; z-index: 5;
}
.vp-error-title { font-size: 14px; font-weight: 600; }
.vp-error-sub   { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.6; }
.vp-root.narrow .vp-chapter  { padding: 8px 8px; }
.vp-root.narrow .vp-ch-title { font-size: 13px; }
.vp-root.narrow .vp-ch-time  { font-size: 12px; }
.vp-root.vp-fullscreen {
  background: #000; border-radius: 0 !important; display: flex;
  flex-direction: column; justify-content: center;
}
.vp-root.vp-fullscreen .vp-divider   { display: none !important; }
.vp-root.vp-fullscreen .vp-chapters  { display: none !important; }
.vp-root.vp-fullscreen .vp-video-wrap {
  border-radius: 0 !important; aspect-ratio: unset; flex: 1;
  min-height: unset; height: 100%;
}
.vp-root.vp-fullscreen video.vp-video {
  border-radius: 0 !important; object-fit: contain; width: 100%; height: 100%;
}
@media (max-width: 768px) {
  .vp-root.vp-fullscreen {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 100vh !important; height: 100vw !important;
    transform: rotate(90deg) translateY(-100%) !important;
    transform-origin: top left !important; z-index: 99999 !important;
    margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
  }
}

#vpAllTabs {
  display: grid;
}
#vpAllTabs > [class^="vid-media-"] {
  grid-area: 1 / 1;
}