@charset "UTF-8";
/* design v4.1.001 */
/* ===========================================================================
 * pvw1_viewer.css — ПРОСМОТРЩИК ФОТОГРАФИЙ КАК ВО ВКОНТАКТЕ
 * задача ПРОСМОТРЩИК-ПОРЯДОК-ВК-1, тег VIEWER-LAYOUT-VK, карточка доски №1283,
 * 13.10.2026 (продолжение ПРОСМОТРЩИК-ФОТО-ВК-1 №1266 и ЭТАП-2 №1274).
 * ФАЙЛ НОВЫЙ, живёт за флагом (см. clubbergallery/clubber_album.php,
 * cb_pvw1_viewer(): env CLUBBER_PVW1=1 или ../.secrets/pvw1_viewer.on).
 * Без флага этот файл не подключается вовсе — вид альбома прежний.
 *
 * Слова владельца (13.10.2026, 14:44, со скриншотом): правая колонка строго
 * сверху вниз — «Оцените фото», «! Жалоба», «Отметить человека», отмеченные
 * (три строки + «показать все отметки»), «Оставить комментарий», комментарии
 * (три строки + «показать все комментарии»); нижняя панель — «Поделиться»
 * (наш блок со значками и разделителем), «Сохранить себе», «Скачать фото»,
 * «… Ещё»; меню «Ещё» — только админам и владельцу фото.
 *
 * Что переопределяет (только при флаге, родитель #photoViewer.pvw1):
 *   • окно — на всю ширину и высоту окна браузера, тёмный фон, шапка, строка
 *     счётчиков и нижняя панель фиксированной высоты, между ними — кадр +
 *     колонка справа;
 *   • кадр — занимает МАКСИМУМ места: width/height задаются в px скриптом
 *     pvw1_viewer.js по натуральному размеру снимка (object-fit: contain,
 *     без обрезки);
 *   • колонка справа — блоки .pv-blk в порядке задания владельца;
 *   • нижняя панель (.pv-bottom) — на всю ширину окна, под кадром и колонкой;
 *   • телефон (<= 768px) — кадр на весь экран, колонка уезжает вниз и
 *     открывается шторкой по кнопке «Комментарии и отметки».
 *
 * ВАЖНО (правило 11а): семейства ровно те, что есть в proximanova.css
 * ('Proxima Nova Regular'/'Proxima Nova Bold'); font-weight не используем.
 * Правило 47: капс-лок только у .section-header — здесь его нет.
 * Ссылка на этот файл в шаблоне идёт с меткой ?v= — правило 11а.
 *
 * Файл UTF-8 без BOM, LF.
 * ======================================================================== */

/* --- 1. Окно: ровно окно браузера, ничего не прокручивается снаружи ------ */
#photoViewer.pvw1 {
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

/* VIEWER-CLOSE-FIX (14.10.2026). Кнопка «Закрыть» не закрывала окно:
   правило выше имеет специфичность id+класс (1,1,0) и
   перебивал общий .nodisplay (0,1,0), который ставит closeViewer()
   (photomarks_v2.js). Поэтому окно оставалось на экране,
   хотя класс был поставлен. Тот же приём, что и для .pv-showall.nodisplay. */
#photoViewer.pvw1.nodisplay {
  display: none;
}

#photoViewer.pvw1 .photoViewer-backdrop {
  background: #0b0f14;
  opacity: 1;
}

#photoViewer.pvw1 .photoViewer-box {
  /* Максимум места кадру: никаких макетных 1130px и полей 56px сверху. */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #0b0f14;
}

/* --- 2. Шапка окна и строка счётчиков ---------------------------------- */
#photoViewer.pvw1 .pv-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 8px 16px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#photoViewer.pvw1 .pv-title {
  float: none;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  line-height: 22px;
}

#photoViewer.pvw1 .pv-date {
  float: none;
  clear: none;
  margin-left: 14px;
  font-size: 14px;
  line-height: 20px;
  color: #8fa3b8;
}

/* Счётчик «N из M» — в шапке строки счётчиков, по центру */
#photoViewer.pvw1 .photoViewer-num {
  float: none;
  margin: 0 auto;
  padding: 0 16px;
  font-size: 15px;
  color: #cfd8e3;
  white-space: nowrap;
}

/* Кнопки справа: полноэкранный режим и выход */
#photoViewer.pvw1 .pv-fs,
#photoViewer.pvw1 .photoViewer-close {
  position: static;
  float: none;
  top: auto;
  right: auto;
  margin-left: 14px;
  font-size: 15px;
  line-height: 34px;
  white-space: nowrap;
}

#photoViewer.pvw1 .photoViewer-close {
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

#photoViewer.pvw1 .pv-close-x {
  /* VIEWER-LAYOUT-VK-2 (13.10.2026). Слова владельца: «крестик по центру круга
     (сейчас выше центра)». Причина была в line-height: 28px при высоте 30px:
     знак «×» стоит на базовой линии строки, и лишний запас строки уходил вниз —
     крестик уезжал вверх примерно на 2 px. Центрируем сам кружок: содержимое
     выравнивает флекс, а line-height: 1 убирает запас строки. Размер кружка,
     рамка и отступы — как были (рамка и border-radius — из photoreports.css). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 6px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
  text-align: center;
}

/* Строка со значками статистики — тонкая, над кадром */
#photoViewer.pvw1 .pv-bar {
  flex: 0 0 auto;
  height: auto;
  margin: 0;
  padding: 4px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- 3. Основная область: кадр слева, колонка справа -------------------- */
#photoViewer.pvw1 .pv-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#photoViewer.pvw1 .photoViewer-stage {
  /* Кадр занимает ВСЁ оставшееся место. Размер картинки считает скрипт
     (pvw1_viewer.js → llSize), поэтому кадр не обрезается и не «гуляет». */
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 8px 8px 8px 16px;
  overflow: hidden;
}

#photoViewer.pvw1 #photo_holder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

#photoViewer.pvw1 #photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#photoViewer.pvw1 #photo_img {
  /* Реальные px ставит скрипт; max-* — страховка, если скрипт не отработал. */
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

/* Стрелки — по половинам области кадра, как было */
#photoViewer.pvw1 .pv-arrow {
  width: 15%;
  min-width: 56px;
}

/* --- 4. Колонка справа -------------------------------------------------- */
#photoViewer.pvw1 .pv-side {
  display: flex;
  flex: 0 0 380px;
  flex-direction: column;
  width: 380px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  background: #0e151c;
  box-sizing: border-box;
  overflow: hidden;
}

#photoViewer.pvw1 .pv-side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px 10px;
  overflow-y: auto;
  overflow-x: hidden;
  /* Внутренняя прокрутка колонки: комментарии длинные, а окно не растёт. */
  -webkit-overflow-scrolling: touch;
}

/* --- 5. Автор и дата (правая колонка, сверху) --------------------------- */
#photoViewer.pvw1 .pv-author {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#photoViewer.pvw1 .pv-author-avatar {
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-right: 12px;
  overflow: hidden;
  background-color: #22303f;
  border-radius: 50%;
}

#photoViewer.pvw1 .pv-author-avatar img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
}

#photoViewer.pvw1 .pv-author-body {
  min-width: 0;
}

#photoViewer.pvw1 .pv-author-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Proxima Nova Bold';
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  text-decoration: none;
}

#photoViewer.pvw1 a.pv-author-name:hover {
  color: #00aeef;
}

#photoViewer.pvw1 .pv-author-sub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 18px;
  color: #7d8fa3;
}

/* --- 6. Блоки правой колонки (порядок задаёт скрипт) -------------------- */
#photoViewer.pvw1 .pv-blk {
  margin-bottom: 14px;
}

#photoViewer.pvw1 .pv-blk-title {
  margin-bottom: 8px;
  font-family: 'Proxima Nova Bold';
  font-size: 15px;
  line-height: 20px;
  color: #fff;
}

/* 1. «Оцените фото» — звёзды оценки в колонке */
#photoViewer.pvw1 .pv-rate-side {
  display: block;
  font-size: 15px;
  line-height: 26px;
  color: #cfd8e3;
}

#photoViewer.pvw1 .pv-rate-side .pv-rate-star {
  margin-right: 2px;
  font-size: 20px;
  color: #7d8fa3;
  text-decoration: none;
}

#photoViewer.pvw1 .pv-rate-side .pv-rate-star.is-on {
  color: #ffd900;
}

#photoViewer.pvw1 .pv-rate-side .pv-rate-avg {
  margin-left: 8px;
  font-family: 'Proxima Nova Bold';
  color: #fff;
}

#photoViewer.pvw1 .pv-rate-side .pv-rate-cnt,
#photoViewer.pvw1 .pv-rate-side .pv-rate-note {
  margin-left: 8px;
  font-size: 13px;
  color: #7d8fa3;
}

#photoViewer.pvw1 .pv-rate-side .pv-rate-note {
  display: block;
  margin-left: 0;
}

/* 2. «! Жалоба» */
#photoViewer.pvw1 .pv-act {
  display: inline-flex;
  align-items: center;
  margin: 0 14px 6px 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Proxima Nova Regular';
  font-size: 15px;
  line-height: 26px;
  color: #cfd8e3;
  text-decoration: none;
  cursor: pointer;
}

#photoViewer.pvw1 .pv-act:hover {
  color: #00aeef;
}

#photoViewer.pvw1 .pv-act-ico {
  margin-right: 6px;
  font-size: 17px;
  line-height: 1;
}

#photoViewer.pvw1 .pv-act-warn .pv-act-ico {
  color: #ffb300;
}

#photoViewer.pvw1 .pv-act-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: #7d8fa3;
}

/* Пока идёт запрос «Сохранить себе» — пункт виден, но не нажимается. */
#photoViewer.pvw1 .pv-act-wait {
  color: #7d8fa3;
  cursor: default;
}

/* 3. «Отметить человека» — кнопка #a_init_mark со своими обработчиками */
#photoViewer.pvw1 .pv-blk-mark .pv-marks-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: #7d8fa3;
}

/* 4/6. Списки: три строки + «показать все …»
   Правило «прячем» должно быть СИЛЬНЕЕ правил вида
   «#photoViewer.pvw1 #markview .mark_a { display: flex }» (в них два id),
   иначе строка остаётся видимой — проверено на стенде 13.10.2026. */
#photoViewer.pvw1 .pv-row-hidden,
#photoViewer.pvw1 #markview .mark_a.pv-row-hidden,
#photoViewer.pvw1 #markview .markdel_a.pv-row-hidden,
#photoViewer.pvw1 #markview .cb-mark-arch.pv-row-hidden,
#photoViewer.pvw1 #pvCommentsList .pv-comment.pv-row-hidden {
  display: none;
}

#photoViewer.pvw1 .pv-showall {
  display: inline-block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 22px;
  color: #00aeef;
  text-decoration: none;
  cursor: pointer;
}

/* Общий класс сайта .nodisplay (display:none) слабее наших правил с двумя
   id/классами, поэтому «скрыто» подтверждаем явно: иначе кнопка «показать
   все» и пояснение про платный оригинал видны всегда (нашли на стенде
   13.10.2026 снимком). */
#photoViewer.pvw1 .pv-showall.nodisplay,
#photoViewer.pvw1 .pv-dl-note.nodisplay {
  display: none;
}

#photoViewer.pvw1 .pv-showall:hover {
  color: #4fc7f5;
}

/* Список отмеченных: чипы аватар + имя */
#photoViewer.pvw1 .pv-marks-list,
#photoViewer.pvw1 #markview {
  float: none;
  width: 100%;
}

#photoViewer.pvw1 #markview .mark_a {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
  text-decoration: none;
}

#photoViewer.pvw1 #markview .pv-mark-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 50%;
  object-fit: cover;
}

#photoViewer.pvw1 #markview .pv-mark-name {
  font-size: 15px;
  line-height: 20px;
  color: #dfe7ef;
}

#photoViewer.pvw1 #markview .mark_a:hover .pv-mark-name {
  color: #00aeef;
}

/* 5. «Оставить комментарий» — поле и «Отправить» */
#photoViewer.pvw1 .pv-comment-form {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}

#photoViewer.pvw1 .pv-comment-form form,
#photoViewer.pvw1 .pv-comment-form .pv-comment-body {
  margin-left: 0;
}

#photoViewer.pvw1 .pv-comment-form .pv-comment-avatar {
  display: none;
}

#photoViewer.pvw1 .pv-comment-input {
  display: block;
  width: 100%;
  min-height: 56px;
  box-sizing: border-box;
  font-size: 15px;
}

#photoViewer.pvw1 .pv-comment-actions {
  padding-top: 8px;
}

/* 6. Комментарии */
#photoViewer.pvw1 .pv-comment {
  margin-bottom: 14px;
}

#photoViewer.pvw1 .pv-comment-avatar,
#photoViewer.pvw1 .pv-comment-avatar img {
  width: 36px;
  height: 36px;
}

#photoViewer.pvw1 .pv-comment-body {
  margin-left: 46px;
}

#photoViewer.pvw1 .pv-comment-text {
  margin-top: 6px;
  font-size: 15px;
}

#photoViewer.pvw1 .pv-comment-date {
  font-size: 13px;
}

/* --- 7. Нижняя панель: поделиться · сохранить себе · скачать · ещё ----- */
#photoViewer.pvw1 .pv-bottom {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #0b0f14;
}

#photoViewer.pvw1 .pv-bottom .pv-act {
  margin: 0 18px 0 0;
  font-size: 15px;
}

#photoViewer.pvw1 .pv-bottom .pv-act:last-child {
  margin-right: 0;
}

/* 7) «Поделиться» — наш блок: значки из общего шаблона + разделитель +
   слово. Подложка (лёгкий фон) — по слову владельца «подложка/разделитель». */
#photoViewer.pvw1 .pv-bot-share {
  display: inline-flex;
  align-items: center;
  margin-right: 18px;
}

#photoViewer.pvw1 .pv-share-inline {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

#photoViewer.pvw1 .pv-share-inline .cb-shr {
  order: 1;
}

#photoViewer.pvw1 .pv-share-sep {
  order: 2;
  width: 1px;
  height: 20px;
  margin: 0 10px;
  background: rgba(255, 255, 255, 0.18);
}

#photoViewer.pvw1 .pv-share-inline .pv-share-title {
  order: 3;
  margin: 0;
  font-size: 15px;
  line-height: 26px;
  color: #cfd8e3;
}

/* 9) «Скачать фото» — строка из готовых ссылок #pvDl */
#photoViewer.pvw1 .pv-bot-dl {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}

#photoViewer.pvw1 .pv-bot-dl .pv-share-title {
  margin-right: 8px;
  font-size: 14px;
  line-height: 26px;
  color: #8fa3b8;
}

#photoViewer.pvw1 .pv-dl {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0;
  border: 0;
  font-size: 14px;
}

#photoViewer.pvw1 .pv-dl .pv-dl-link {
  margin-right: 8px;
  padding: 2px 8px;
  font-size: 14px;
}

#photoViewer.pvw1 .pv-dl-note {
  display: block;
  flex: 1 0 100%;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: #ffb300;
}

/* 10) «… Ещё» — вправо */
#photoViewer.pvw1 .pv-more-wrap {
  position: relative;
  margin-left: auto;
}

#photoViewer.pvw1 .pv-more-menu {
  position: absolute;
  right: 0;
  bottom: 34px;
  z-index: 5;
  min-width: 250px;
  padding: 6px 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  background: #1b2733;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}

#photoViewer.pvw1 .pv-more-item {
  display: block;
  padding: 8px 14px;
  font-family: 'Proxima Nova Regular';
  font-size: 14px;
  line-height: 19px;
  color: #dfe7ef;
  text-decoration: none;
  cursor: pointer;
}

#photoViewer.pvw1 .pv-more-item:hover {
  background: #24313f;
  color: #fff;
}

#photoViewer.pvw1 .pv-more-item-off {
  color: #7d8fa3;
  cursor: default;
}

#photoViewer.pvw1 .pv-more-item-off:hover {
  background: none;
  color: #7d8fa3;
}

#photoViewer.pvw1 .pv-more-item-del:hover {
  background: #4a1f26;
  color: #ff9db3;
}

/* --- 8. Кнопка «Комментарии и отметки» (только телефон) ---------------- */
#photoViewer.pvw1 .pv-drawer-btn {
  display: none;
}

/* --- 9. Прежние блоки .pv-share-bar и .pv-cols -------------------------
   В РАЗМЕТКЕ они лежат в .photoViewer-box: содержимое (наши значки
   «Поделиться», «Скачать фото», список комментариев, поле ввода, отметки)
   переносил в колонку и панель скрипт pvw1_viewer.js. Поэтому в режиме pvw1
   гасим оба блока: иначе под кадром появились бы «вторые» комментарии и
   «второй» блок отметок (проверено снимком 13.10.2026). ------------------ */
#photoViewer.pvw1 .pv-share-bar {
  display: none;
}

#photoViewer.pvw1 .pv-cols,
#photoViewer.pvw1.pv-fullscreen .pv-cols,
#photoViewer.pvw1:fullscreen .pv-cols {
  display: none;
}

/* --- 10. Полноэкранный режим (Fullscreen API) наследует ту же раскладку - */
#photoViewer.pvw1.pv-fullscreen .photoViewer-box,
#photoViewer.pvw1:fullscreen .photoViewer-box {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}

#photoViewer.pvw1.pv-fullscreen .photoViewer-stage,
#photoViewer.pvw1:fullscreen .photoViewer-stage {
  height: auto;
  padding: 8px 8px 8px 16px;
}

#photoViewer.pvw1.pv-fullscreen #photo_img,
#photoViewer.pvw1:fullscreen #photo_img {
  max-height: 100%;
  max-width: 100%;
}

/* В полноэкранном режиме колонку не прячем: владелец просил комментарии справа
   и в обычном окне, и на весь экран. */

/* =======================================================================
 * ПЛАНШЕТ И ТЕЛЕФОН
 * ==================================================================== */

/* До 1180px колонка уже, но остаётся справа. */
@media (max-width: 1180px) {
  #photoViewer.pvw1 .pv-side {
    flex-basis: 330px;
    width: 330px;
  }
}

/* Телефон: кадр на весь экран, колонка уезжает вниз и открывается шторкой. */
@media (max-width: 768px) {
  #photoViewer.pvw1 .photoViewer-box {
    height: 100%;
  }

  #photoViewer.pvw1 .pv-head {
    min-height: 46px;
    padding: 6px 10px;
  }

  #photoViewer.pvw1 .pv-title {
    max-width: 46%;
    font-size: 15px;
    line-height: 19px;
  }

  #photoViewer.pvw1 .pv-date {
    display: none;
  }

  #photoViewer.pvw1 .photoViewer-num {
    padding: 0 8px;
    font-size: 13px;
  }

  #photoViewer.pvw1 .photoViewer-close {
    padding-left: 8px;
    margin-left: 8px;
    font-size: 13px;
  }

  #photoViewer.pvw1 .pv-main {
    display: block;
    position: relative;
    overflow: hidden;
  }

  #photoViewer.pvw1 .photoViewer-stage {
    height: 100%;
    padding: 4px 6px;
  }

  #photoViewer.pvw1 .pv-side {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: none;
    flex-basis: auto;
    width: 100%;
    max-height: 72%;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.6);
  }

  /* шторка открыта */
  #photoViewer.pvw1.pv-drawer .pv-side {
    display: flex;
  }

  #photoViewer.pvw1 .pv-drawer-btn {
    display: inline-flex;
    margin: 0 0 0 12px;
  }

  #photoViewer.pvw1 .pv-bottom {
    padding: 6px 10px;
  }

  #photoViewer.pvw1 .pv-bottom .pv-act {
    margin-right: 12px;
    font-size: 14px;
  }

  #photoViewer.pvw1 .pv-bottom .pv-act-label {
    display: none;
  }

  #photoViewer.pvw1 .pv-bot-dl .pv-share-title {
    display: none;
  }

  #photoViewer.pvw1 .pv-share-inline {
    padding: 2px 6px;
  }
}

/* Совсем узкий экран: подписи кнопок убираем, остаются значки. */
@media (max-width: 420px) {
  #photoViewer.pvw1 .pv-title {
    max-width: 34%;
  }

  #photoViewer.pvw1 .pv-bottom .pv-act {
    margin-right: 10px;
  }
}

/* ---------------------------------------------------------------------------
   ПРОСМОТРЩИК-МЕСТО-И-СОБЫТИЕ-1 (vpe1, тег VIEWER-PLACE-EVENT-1, карточка
   доски №1316, 14.10.2026). Стили строки «Место/Событие» у кадра и окна
   выбора места и события. Всё под #photoViewer.pvw1 — чужой разметки не
   касается; просмотрщик выключен флагом — файл вообще не подключается.
   ВАЖНО про .nodisplay: у окна своё display, поэтому гашение пишем правилом
   с большим весом (#photoViewer.pvw1 .pv-dlg.nodisplay) — ровно так же уже
   сделано для #photoViewer.pvw1.nodisplay, иначе окно не закрывалось бы.
   --------------------------------------------------------------------------- */

#photoViewer.pvw1 .pv-geo {
  margin: 6px 0 10px;
  font-size: 13px;
  line-height: 1.45;
}

#photoViewer.pvw1 .pv-geo-item {
  display: block;
  color: #e8e8e8;
}

#photoViewer.pvw1 .pv-geo-key {
  color: #9a9a9a;
}

#photoViewer.pvw1 .pv-dlg {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3000;
  display: block;
  background: rgba(0, 0, 0, 0.55);
}

#photoViewer.pvw1 .pv-dlg.nodisplay {
  display: none;
}

#photoViewer.pvw1 .pv-dlg-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  max-width: 94vw;
  max-height: 86vh;
  overflow: auto;
  background: #2b2b2b;
  color: #eee;
  border: 1px solid #4a4a4a;
  border-radius: 8px;
  padding: 16px 18px 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

#photoViewer.pvw1 .pv-dlg-close {
  position: absolute;
  right: 10px;
  top: 6px;
  font-size: 22px;
  line-height: 1;
  color: #bbb;
  cursor: pointer;
}

#photoViewer.pvw1 .pv-dlg-close:hover {
  color: #fff;
}

#photoViewer.pvw1 .pv-dlg-title {
  font-size: 17px;
  margin: 0 24px 12px 0;
}

#photoViewer.pvw1 .pv-dlg-note {
  font-size: 12px;
  color: #bfbfbf;
  margin: 8px 0 4px;
}

#photoViewer.pvw1 .pv-dlg-note-key {
  font-size: 13px;
  color: #eee;
  margin-top: 14px;
}

#photoViewer.pvw1 .pv-dlg-note-dim {
  color: #9a9a9a;
}

#photoViewer.pvw1 .pv-dlg-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  margin: 4px 0 8px;
  font-size: 14px;
  color: #222;
  background: #fff;
  border: 1px solid #6a6a6a;
  border-radius: 6px;
}

#photoViewer.pvw1 .pv-dlg-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#photoViewer.pvw1 .pv-dlg-row > * {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-right: 8px;
}

#photoViewer.pvw1 .pv-dlg-row > *:last-child {
  margin-right: 0;
}

#photoViewer.pvw1 .pv-dlg-list {
  margin: 4px 0 8px;
  max-height: 220px;
  overflow: auto;
}

#photoViewer.pvw1 .pv-dlg-item {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

#photoViewer.pvw1 .pv-dlg-item:hover {
  background: #3d3d3d;
}

#photoViewer.pvw1 .pv-dlg-item-name {
  display: block;
  font-size: 14px;
  color: #fff;
}

#photoViewer.pvw1 .pv-dlg-item-sub {
  display: block;
  font-size: 12px;
  color: #a9a9a9;
}

#photoViewer.pvw1 .pv-dlg-btn {
  display: inline-block;
  margin: 6px 8px 0 0;
  padding: 7px 14px;
  font-size: 13px;
  background: #4a76a8;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

#photoViewer.pvw1 .pv-dlg-btn:hover {
  background: #5a86b8;
}

#photoViewer.pvw1 .pv-dlg-btn-off {
  background: #5a3a3a;
}

#photoViewer.pvw1 .pv-dlg-picked {
  font-size: 12px;
  color: #cfe3f5;
  margin: 2px 0 6px;
}

#photoViewer.pvw1 .pv-dlg-picked.nodisplay {
  display: none;
}

@media (max-width: 768px) {
  #photoViewer.pvw1 .pv-dlg-box {
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  #photoViewer.pvw1 .pv-dlg-row {
    display: block;
  }

  #photoViewer.pvw1 .pv-dlg-row > * {
    margin-right: 0;
  }
}

/* ==================================================================
   КАДРИРОВАНИЕ-КАДРА-1 (vcr1, тег VIEWER-CROP-1), 14.10.2026.
   Окно «Кадрировать…»: рамка поверх кадра, пропорции и отмена.
   Стили — часть просмотрщика (.pvw1), вне него в разметке ничего нет.
   ================================================================== */

#photoViewer.pvw1 .pv-dlg-box.pv-crop-box,
#photoViewer.pvw1 .pv-crop-box {
  width: 760px;
  max-width: 96vw;
}

/* Пропорции: свободно / 1:1 / 4:3 / 3:2 / 16:9 */
#photoViewer.pvw1 .pv-crop-ratios {
  display: flex;
  flex-wrap: wrap;
  margin: 2px 0 8px;
}

#photoViewer.pvw1 .pv-crop-ratio {
  display: inline-block;
  margin: 0 8px 6px 0;
  padding: 5px 12px;
  font-size: 13px;
  line-height: 18px;
  color: #dfe7f0;
  background: #3b3b3b;
  border: 1px solid #555;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
}

#photoViewer.pvw1 .pv-crop-ratio:hover {
  background: #484848;
}

#photoViewer.pvw1 .pv-crop-ratio-on {
  background: #4a76a8;
  border-color: #4a76a8;
  color: #fff;
}

/* Кадр и рамка поверх него. Нижний отступ — место подписи размера: без него
   подпись «… × … px» налезала на кнопку «Сохранить» (найдено снимком окна
   14.10.2026, исправлено). */
/* Кадр и рамка поверх него: .pv-crop-shot — область кадра (рамка считается по
   ней), .pv-crop-wrap — блок окна, подпись размера идёт ПОД кадром и кнопок
   не касается (найдено снимком окна 14.10.2026, исправлено). */
#photoViewer.pvw1 .pv-crop-wrap {
  display: block;
  max-width: 100%;
  margin: 0 auto 4px;
  font-size: 0;
  line-height: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#photoViewer.pvw1 .pv-crop-shot {
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-size: 0;
  line-height: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#photoViewer.pvw1 .pv-crop-img {
  display: block;
  max-width: 100%;
  max-height: 56vh;
  width: auto;
  height: auto;
}

/* Затемнение вокруг рамки: полосы рамки-«окна» */
#photoViewer.pvw1 .pv-crop-overlay {
  position: absolute;
  box-sizing: content-box;
  border: 0 solid rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

#photoViewer.pvw1 .pv-crop-frame {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid #fff;
  outline: 1px solid rgba(0, 0, 0, 0.6);
  cursor: move;
  touch-action: none;
}

#photoViewer.pvw1 .pv-crop-frame::before,
#photoViewer.pvw1 .pv-crop-frame::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.35);
}

#photoViewer.pvw1 .pv-crop-frame::before {
  left: 33.33%;
  top: 0;
  width: 33.33%;
  height: 100%;
  background: none;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
}

#photoViewer.pvw1 .pv-crop-frame::after {
  left: 0;
  top: 33.33%;
  width: 100%;
  height: 33.33%;
  background: none;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

#photoViewer.pvw1 .pv-crop-h {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 1px solid #4a76a8;
  border-radius: 2px;
  box-sizing: border-box;
}

#photoViewer.pvw1 .pv-crop-h-nw { left: -7px; top: -7px; cursor: nwse-resize; }
#photoViewer.pvw1 .pv-crop-h-ne { right: -7px; top: -7px; cursor: nesw-resize; }
#photoViewer.pvw1 .pv-crop-h-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
#photoViewer.pvw1 .pv-crop-h-se { right: -7px; bottom: -7px; cursor: nwse-resize; }

/* Подпись размера будущей обрезки: «1280 x 720 px». Идёт ПОД кадром
   (position: static), поэтому кнопок «Сохранить»/«Отмена» не касается:
   раньше была absolute с bottom:-24px и налезала на них (найдено снимком
   окна 14.10.2026, исправлено). */
/* Строка подписи размера — отдельным блоком под кадром (в .pv-crop-wrap
   стоит font-size: 0, поэтому размер шрифта задаём здесь). */
#photoViewer.pvw1 .pv-crop-sizeline {
  display: block;
  margin: 6px 0 2px;
  font-size: 12px;
  line-height: 18px;
}

/* Кнопки окна кадрирования — отдельной строкой под подписью размера (иначе
   «Сохранить» прижималась к подписи: снимок окна 14.10.2026). */
#photoViewer.pvw1 .pv-crop-box .pv-dlg-btn {
  display: block;
  margin: 10px 0 0;
}

#photoViewer.pvw1 .pv-crop-size {
  position: static;
  display: inline-block;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 18px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}

#photoViewer.pvw1 .pv-dlg-btn-wait {
  background: #6b6b6b;
  cursor: default;
}

@media (max-width: 768px) {
  #photoViewer.pvw1 .pv-crop-img {
    max-height: 46vh;
  }

  #photoViewer.pvw1 .pv-crop-ratio {
    padding: 7px 14px;
  }

  #photoViewer.pvw1 .pv-crop-h {
    width: 20px;
    height: 20px;
  }

  #photoViewer.pvw1 .pv-crop-h-nw { left: -10px; top: -10px; }
  #photoViewer.pvw1 .pv-crop-h-ne { right: -10px; top: -10px; }
  #photoViewer.pvw1 .pv-crop-h-sw { left: -10px; bottom: -10px; }
  #photoViewer.pvw1 .pv-crop-h-se { right: -10px; bottom: -10px; }
}