/* Плеер botay.pro. Тёмная панель поверх видео, бирюзовый прогресс.
   Без JS блок остаётся нативным <video controls> — эти стили не мешают. */

.vp{
  position:relative;background:#000;border-radius:10px;overflow:hidden;
  max-width:100%;line-height:0;outline:none
}
.vp video{display:block;width:100%;height:auto;background:#000;border-radius:0}
.vp:fullscreen{border-radius:0}
.vp:fullscreen video{height:100%;object-fit:contain}

/* большая кнопка по центру */
.vp-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(16,20,20,.72);color:#fff;padding:14px;
  transition:background .15s
}
.vp-center:hover{background:var(--t-text)}
.vp-center svg{width:100%;height:100%;fill:currentColor}

/* панель управления */
.vp-bar{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 8px;
  background:linear-gradient(transparent,rgba(0,0,0,.72));
  opacity:0;transition:opacity .18s;line-height:1.3
}
.vp.vp-active .vp-bar,.vp:not(.vp-playing) .vp-bar{opacity:1}
.vp.vp-playing:not(.vp-active){cursor:none}

/* перемотка */
.vp-seek{
  position:relative;height:14px;cursor:pointer;display:flex;align-items:center;
  touch-action:none
}
.vp-seek::before{
  content:"";position:absolute;left:0;right:0;height:4px;border-radius:99px;
  background:rgba(255,255,255,.25)
}
.vp-buf,.vp-played{
  position:absolute;left:0;height:4px;border-radius:99px;width:0
}
.vp-buf{background:rgba(255,255,255,.35)}
.vp-played{background:var(--t-mark)}
.vp-knob{
  position:absolute;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--t-mark);transform:translateX(-6px);
  transition:transform .1s
}
.vp-seek:hover .vp-knob{transform:translateX(-6px) scale(1.25)}

/* ряд кнопок */
.vp-row{display:flex;align-items:center;gap:2px;margin-top:2px}
.vp-btn{
  border:0;background:none;color:#fff;cursor:pointer;border-radius:6px;
  width:36px;height:32px;padding:6px;flex:0 0 auto
}
.vp-btn:hover{background:rgba(255,255,255,.16)}
.vp-btn svg{width:100%;height:100%;fill:currentColor}
.vp-rate{width:auto;min-width:40px;font:600 13px/1 var(--sans);padding:6px 8px}
.vp-time{font:400 12px/1 var(--mono);color:#fff;margin:0 8px;white-space:nowrap}
.vp-spacer{flex:1 1 auto}
.vp-vol{
  width:64px;accent-color:var(--t-mark);cursor:pointer;flex:0 0 auto
}
.vp-btn:focus-visible,.vp-center:focus-visible{outline:2px solid var(--t-mark)}

/* меню скоростей */
.vp-menu{
  position:absolute;right:12px;bottom:52px;display:none;
  background:rgba(16,20,20,.92);border-radius:10px;padding:6px;
  flex-direction:column;min-width:84px;z-index:5;
  max-height:calc(100% - 64px);overflow-y:auto;overscroll-behavior:contain
}
.vp-menu.open{display:flex}
/* скорости — сеткой в два ряда, а не столбиком во весь экран */
.vp-menu-rate.open{display:grid;grid-template-columns:repeat(5,minmax(52px,1fr));gap:2px;min-width:0}
.vp-menu-rate .vp-menu-i{text-align:center;padding:9px 6px}
.vp-menu-i{
  border:0;background:none;color:#fff;cursor:pointer;border-radius:6px;
  font:500 13.5px/1 var(--sans);padding:8px 12px;text-align:left
}
.vp-menu-i:hover{background:rgba(255,255,255,.14)}
.vp-menu-i.on{color:var(--t-mark);font-weight:700}

/* подсказка времени над полосой перемотки */
.vp-seektip{
  position:absolute;bottom:16px;transform:translateX(-50%);
  background:rgba(16,20,20,.85);color:#fff;border-radius:5px;
  font:400 11px/1 var(--mono);padding:4px 6px;opacity:0;
  pointer-events:none;transition:opacity .12s;white-space:nowrap
}
.vp-seek:hover .vp-seektip{opacity:1}

/* всплывающая подсказка (громкость, скорость, ±10) */
.vp-osd{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  background:rgba(16,20,20,.8);color:#fff;border-radius:99px;
  font:500 13px/1 var(--sans);padding:8px 14px;opacity:0;
  transition:opacity .15s;pointer-events:none;white-space:nowrap
}
.vp-osd.on{opacity:1}

@media(max-width:640px){
  .vp-vol{display:none}          /* на телефоне громкость — кнопками телефона */
  .vp-time{margin:0 4px}
  .vp-center{width:54px;height:54px}
}

/* ---------- страница «Видео» и карточки ---------- */

.vg{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;padding-bottom:70px}
.vg-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.vg-thumb{
  position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line)
}
.vg-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vg-thumb .vg-noimg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2)
}
.vg-noimg svg{width:34px;height:34px;fill:currentColor;opacity:.5}
a.vg-card:hover .vg-thumb{border-color:var(--t-mark)}
a.vg-card:hover .vg-t{color:var(--t-text)}
.vg-prev{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#000;animation:vgfade .25s
}
@keyframes vgfade{from{opacity:0}to{opacity:1}}
.vg-dur{
  z-index:2;
  position:absolute;right:8px;bottom:8px;font:500 11.5px/1 var(--mono);
  color:#fff;background:rgba(16,20,20,.8);border-radius:5px;padding:4px 6px
}
.vg-t{font-weight:600;font-size:15.5px;letter-spacing:-.01em;color:var(--ink)}
.vg-m{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.vg-card.draft .vg-thumb{border-style:dashed}

/* страница просмотра: плеер в спокойной рамке, как на видеоплатформах —
   не во всю ширину страницы и никогда не выше экрана. Полный экран рядом */
.vw{max-width:920px}
.vw .vp{margin:6px 0 16px;width:100%;max-width:860px}
.vw .vp video{max-height:min(70vh,484px);object-fit:contain}
.vw .vp:fullscreen video{max-height:none}
.vw-descr{
  max-width:var(--measure);font-size:15.5px;line-height:1.65;
  color:var(--ink);margin:0 0 26px
}
.vw-descr p{margin:0 0 12px}
.vt{
  border:0;background:none;cursor:pointer;padding:0;
  font:500 15px/1.4 var(--mono);color:var(--t-text)
}
.vt:hover{color:var(--t-press);text-decoration:underline;text-underline-offset:3px}
.vw-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:18px 0 8px}
.vw-edit{margin-bottom:30px}
.vw-edit .ct-form{margin-bottom:20px}

/* хранилище: список как в творческой студии */
.vs-list{display:flex;flex-direction:column;gap:10px}
.vs-row{
  display:flex;gap:16px;align-items:center;
  border:1px solid var(--line);border-radius:10px;background:var(--white);
  padding:12px 14px
}
.vs-thumb{
  position:relative;flex:0 0 128px;aspect-ratio:16/9;border-radius:7px;
  overflow:hidden;background:var(--panel)
}
.vs-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vs-main{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.vs-t{font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.vs-t:hover{color:var(--t-text)}
.vs-m{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.vs-tools{display:flex;gap:6px;flex-wrap:wrap}
.vs-access{flex:0 0 auto}
.vs-select{
  font-family:var(--sans);font-size:14px;color:var(--ink);cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:8px 10px
}
.vs-select:hover,.vs-select:focus{border-color:var(--t-mark);outline:none}

/* подтверждение копирования */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--ink);color:var(--white);border-radius:99px;
  font-size:13.5px;padding:10px 18px;z-index:99;
  box-shadow:0 4px 16px rgba(16,20,20,.2);max-width:90vw;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.vw-t{font-weight:700;font-size:clamp(20px,3vw,26px);letter-spacing:-.02em;margin:0 0 6px}
.vw-m{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin:0 0 26px}
.vw-h{font-weight:600;font-size:17px;margin:34px 0 14px}
.vw .vg{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));padding-bottom:40px}

@media(max-width:640px){
  .vg{grid-template-columns:1fr 1fr;gap:12px}
  .vw .vg{grid-template-columns:1fr 1fr}
  .vs-row{flex-wrap:wrap}
  .vs-thumb{flex-basis:104px}
  .vs-main{flex-basis:calc(100% - 130px)}
  .vs-access{margin-left:auto}
}

/* «досмотрено» — полоска внизу карточки, как на видеоплатформах */
.vg-seen{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(16,20,20,.35);z-index:2}
.vg-seen-f{display:block;height:100%;background:var(--c-mark)}

/* шапка хранилища: поиск и счётчик */
.vs-head{display:flex;gap:12px;align-items:center;margin:0 0 16px;flex-wrap:wrap}
.vs-find{
  flex:1 1 260px;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:8px;padding:10px 13px
}
.vs-find:focus{outline:none;border-color:var(--t-mark)}
.vs-count{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.vs-warn{font-size:13px;color:var(--c-text)}

/* ---------- папки хранилища: папка -> подпапка -> видео ---------- */

.fold-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:30px 0 14px;padding-top:16px;border-top:1px solid var(--line-2)
}
.fold-h{margin:0;flex:0 0 auto}
.fold-add,.fold-up{display:flex;gap:8px;margin:0 0 0 auto;flex-wrap:wrap;align-items:center}
.fold-add input{
  font-family:var(--sans);font-size:14px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:7px;padding:8px 11px
}
.fold-add input:focus{outline:none;border-color:var(--t-mark)}
.fold-up{margin-left:auto}
.fold-up input[type=file]{font-size:13px;color:var(--ink-2);max-width:230px}

.fold-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.fold{
  display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:10px;background:var(--white);
  padding:13px 14px;min-width:0
}
.fold:hover{border-color:var(--t-mark)}
.fold:hover .fold-name{color:var(--t-text)}
.fold-ico{flex:0 0 auto;width:22px;height:22px;color:var(--t-mark)}
.fold-ico svg{width:100%;height:100%;fill:currentColor}
.fold-name{flex:1;min-width:0;font-weight:600;font-size:15.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fold-n{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.fold-ops{margin-top:34px}
.fold-ops form{margin-bottom:12px}

/* у строки видео справа два выбора: доступ и папка */
.vs-side{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}

@media(max-width:640px){
  .fold-head{gap:10px}
  .fold-add,.fold-up{margin-left:0;flex-basis:100%}
  .fold-grid{grid-template-columns:1fr 1fr}
  /* два выбора в строку: делим ширину поровну и не даём вылезти за экран */
  .vs-side{flex-basis:100%;flex-direction:row;gap:8px}
  .vs-side form{flex:1 1 0;min-width:0}
  .vs-side .vs-select{width:100%}
}


/* ================= лакшари-набор: главы, кадры, меню, далее ================= */

/* главы — засечки на полосе и название текущей рядом со временем */
.vp-mark{
  position:absolute;top:50%;width:2px;height:8px;margin-top:-4px;
  background:rgba(16,20,20,.75);border-radius:1px;z-index:1;pointer-events:none
}
.vp-chap{
  font:500 12.5px/1 var(--sans);color:rgba(255,255,255,.85);margin-left:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36%
}
.vp-chap:empty{display:none}

/* кадр-превью над полосой перемотки */
.vp-prev{
  position:absolute;bottom:22px;transform:translateX(-50%);
  border:2px solid rgba(255,255,255,.9);border-radius:6px;
  background:#000 no-repeat;box-shadow:0 4px 18px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .12s;z-index:3
}
.vp-seek:hover .vp-prev{opacity:1}
.vp-seek:hover .vp-seektip{bottom:16px}
.vp-prev + .vp-seektip{bottom:16px}
.vp-seek:hover .vp-prev ~ .vp-seektip{bottom:16px}
.vp-prev ~ .vp-seektip{z-index:4}

/* меню настроек */
.vp-menu-h{
  font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);padding:8px 12px 4px
}
.vp-menu-h:not(:first-child){margin-top:4px;border-top:1px solid rgba(255,255,255,.12)}
.vp-btn.on{color:var(--t-mark)}
.vp-cc.on::after{
  content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;
  background:var(--t-mark);border-radius:1px
}
.vp-btn{position:relative}

/* крутилка при буферизации */
.vp-spin{
  position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;
  opacity:0;pointer-events:none;transition:opacity .2s
}
.vp-spin.on{opacity:1;animation:vpspin .8s linear infinite}
@keyframes vpspin{to{transform:rotate(360deg)}}

/* «далее» в конце */
.vp-next{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;background:rgba(16,20,20,.82);color:#fff;
  text-align:center;padding:20px;z-index:6;line-height:1.3
}
.vp-next-k{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.vp-next b{font-size:clamp(16px,2.4vw,22px);font-weight:700;max-width:80%}
.vp-next-c{font:400 13px/1 var(--mono);color:rgba(255,255,255,.7)}
.vp-next-b{display:flex;gap:8px;margin-top:8px}
.vp-next-b button{
  font:500 14px/1 var(--sans);border-radius:6px;padding:10px 18px;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);background:none;color:#fff
}
.vp-next-go{background:var(--t-text)!important;border-color:var(--t-text)!important}

/* подсказка по клавишам */
.vp-help{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(16,20,20,.85);color:#fff;z-index:7;cursor:pointer;padding:16px
}
.vp-help.open{display:flex}
.vp-help b{display:block;font-size:15px;margin-bottom:10px}
.vp-help table{font:400 13px/1.7 var(--sans);border-collapse:collapse;max-height:100%}
.vp-help td{padding:0 12px 0 0;vertical-align:top;white-space:nowrap}
.vp-help td:first-child{font-family:var(--mono);color:var(--t-mark);text-align:right}
.vp-help small{display:block;margin-top:10px;color:rgba(255,255,255,.6);font-size:12px}
.vp-help > *{pointer-events:none}
.vp-help{flex-direction:column}

/* кинотеатр: плеер на всю ширину страницы */
.vw--theater{max-width:var(--page)}
.vw--theater .vp{max-width:none}
.vw--theater .vp video{max-height:min(82vh,760px)}

/* просмотры и главы на странице видео */
.vw-m .vw-views{white-space:nowrap}
.vw-chapters{list-style:none;margin:0 0 26px;padding:0;max-width:var(--measure)}
.vw-chapters li{border-top:1px solid var(--line-2)}
.vw-ch{
  display:flex;gap:14px;align-items:baseline;width:100%;text-align:left;
  border:0;background:none;cursor:pointer;padding:9px 6px;
  font:400 15px/1.4 var(--sans);color:var(--ink);border-radius:6px
}
.vw-ch:hover{background:var(--panel)}
.vw-ch.on{background:var(--t-soft);color:var(--t-text)}
.vw-ch .t{font:500 13px/1.4 var(--mono);color:var(--t-text);flex:0 0 auto;min-width:52px}
.vw-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.vw-actions .btn{padding:9px 16px;font-size:14px}
.vw-next-card{
  display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;text-decoration:none;color:inherit;margin:0 0 26px;max-width:520px
}
.vw-next-card:hover{border-color:var(--t-mark)}
.vw-next-card .vg-thumb{flex:0 0 140px}
.vw-next-card .k{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);display:block;margin-bottom:5px}
.vw-next-card b{font-size:15.5px}

/* раздел «Видео»: подборки по папкам */
.vg-group{margin:0 0 34px}
.vg-group-h{display:flex;align-items:baseline;gap:14px;margin:0 0 12px}
.vg-group-h h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em}
.vg-group-h a{font-size:14px;color:var(--ink-2);text-decoration:none}
.vg-group-h a:hover{color:var(--t-text)}
.vg-group-h .n{font:400 12px/1 var(--mono);color:var(--ink-2)}
.vg-views{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}

/* загрузчик хранилища */
.up-zone{
  border:2px dashed var(--line);border-radius:12px;padding:22px;text-align:center;
  margin:0 0 18px;transition:border-color .12s,background .12s
}
.up-zone.over{border-color:var(--t-mark);background:var(--t-soft)}
.up-zone p{margin:0 0 10px;color:var(--ink-2);font-size:15px}
.up-zone.js input[type=file]{font-size:14px}
.up-list{display:flex;flex-direction:column;gap:8px;margin:0 0 22px}
.up-row{
  display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;
  border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:14px
}
.up-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-meta{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.up-bar{grid-column:1/-1;height:6px;background:var(--panel);border-radius:99px;overflow:hidden}
.up-fill{display:block;height:100%;width:0;background:var(--t-mark);transition:width .2s}
.up-st{grid-column:1/-1;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.up-row.done .up-fill{background:var(--t-text)}
.up-row.fail{border-color:var(--c-mark)}
.up-row.fail .up-st{color:var(--c-text)}
.up-hint{color:var(--ink-2)}

/* статус обработки в строке хранилища */
.vs-work{font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.vs-work.busy::before{content:"⟳ ";color:var(--t-text)}
.vs-work.ok::before{content:"✓ ";color:var(--t-text)}

@media(max-width:640px){
  .vp-chap{display:none}
  .vp-prev{display:none}
  .vw-next-card .vg-thumb{flex-basis:110px}
  .vp-help table{font-size:12px;line-height:1.5}
}

/* кнопка «Скачать» под названием видео */
.vw-dl{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-10px 0 26px}
.vw-dl .acc-hint{margin:0}

/* ---------- панель админа прямо на видео ---------- */
/* Только у админа. Появляется вместе с полосой управления, левый верх. */
.vp-admin{
  position:absolute;top:10px;left:10px;display:flex;gap:8px;z-index:6;
  opacity:0;transition:opacity .15s ease;pointer-events:none
}
.vp.vp-active .vp-admin,.vp:not(.vp-playing) .vp-admin{opacity:1;pointer-events:auto}
.vp-admin-b{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:0;border-radius:8px;background:rgba(16,20,20,.72);color:#fff;
  font:600 13px/1 var(--sans);cursor:pointer;backdrop-filter:blur(4px)
}
.vp-admin-b:hover{background:rgba(20,166,160,.9)}
.vp-admin-b[disabled]{opacity:.5;cursor:default}
.vp-admin-b svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.vp-admin-t{padding:0 12px}
.vw-dl-note{margin:2px 0 0}