/* Общий слой живёт в @layer osnova (пакет №37). Порядок внутри
   слоя прежний — вид не меняется. Сайтовые стили лежат в слое
   «sayt» и потому слабее канона, а поправки места — вне слоёв
   и потому сильнее всех. */
@layer sayt, osnova;

@layer osnova {
/* ПУЛЬТ ГАЛЕРЕИ — общий на три сайта.

   Вся панель — ОДНА КАРТОЧКА: своя рамка, свой фон, скругление как у
   карточек сайта. Она должна читаться как пульт, а не как кнопки,
   рассыпанные по странице.

   Внутри две части, разделённые чертой:
     сверху ЧТО ПОКАЗЫВАТЬ — поиск, откуда, состояние, папка, теги;
     снизу  КАК ПОКАЗЫВАТЬ — сколько в ряд и сворачивать ли серии.

   Чипы у всех одинаковые: высота 36, скругление 9, волосяная рамка,
   выбранный — рамка в цвете сайта плюс подложка 12%. Цвет сайта берём
   из его же переменной: у Ловии --olive, у остальных --brand. Отличие
   между сайтами — только он. */

.gal-pult, .ws-toolbar, .gal-polosa, .gal-spisok {
  --чип-рамка: color-mix(in srgb, currentColor 16%, transparent);
  --чип-цвет: var(--olive, var(--brand, currentColor));
}

/* ── КАРТОЧКА ПУЛЬТА ────────────────────────────────────────────────── */
.gal-pult {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--чип-рамка);
  border-radius: var(--r-lg, 14px);
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.gal-blok { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

/* Подпись ряда: мелко и приглушённо — она объясняет, а не кричит. */
.gal-podpis {
  font: 700 10.5px/1 "Golos Text", Inter, system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 42%, transparent);
}

/* Черта между «что показывать» и «как показывать». */
.gal-cherta {
  height: 1px;
  margin: 2px 0;
  background: var(--чип-рамка);
}

/* ── ПОИСК: первым и крупным, во всю панель ─────────────────────────── */
.gal-poisk {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--чип-рамка);
  border-radius: 11px;
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: inherit;
  cursor: text;
  transition: border-color .14s;
}
.gal-poisk:focus-within { border-color: color-mix(in srgb, var(--чип-цвет) 62%, transparent); }
.gal-lupa {
  width: 17px; height: 17px; flex: 0 0 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; opacity: .5;
}
body[data-shell-product] .gal-pult .ws-search {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: none; background: transparent; color: inherit; padding: 0;
  font: 600 14.5px/1 "Golos Text", Inter, system-ui, sans-serif;
}
body[data-shell-product] .gal-pult .ws-search::placeholder {
  color: color-mix(in srgb, currentColor 40%, transparent);
  font-weight: 500;
}
.gal-pult .ws-search::-webkit-search-cancel-button { filter: invert(.5); }

/* ── ОБЩИЙ ВИД ЛЮБОГО ЧИПА ─────────────────────────────────────────── */
body[data-shell-product] .gal-pult .wvb,
body[data-shell-product] .gal-pult .ws-tool-btn,
body[data-shell-product] .gal-pult .ws-origin-btn {
  /* Рамку считаем внутрь высоты: иначе у Ловии чипы выше соседних. */
  box-sizing: border-box;
  min-height: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--чип-рамка);
  background: transparent;
  color: inherit;
  font: 600 13px/1 "Golos Text", Inter, system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .14s, background .14s;
  box-shadow: none;
  flex: 0 0 auto !important;
  position: relative;
  width: auto;
  min-width: 0;
}
body[data-shell-product] .gal-pult .wvb:hover,
body[data-shell-product] .gal-pult .ws-tool-btn:hover,
body[data-shell-product] .gal-pult .ws-origin-btn:hover {
  border-color: color-mix(in srgb, var(--чип-цвет) 45%, transparent);
}

/* Выбранный чип: рамка в цвете сайта и подложка 12%. */
body[data-shell-product] .gal-pult .wvb.active,
body[data-shell-product] .gal-pult .ws-tool-btn.active,
body[data-shell-product] .gal-pult .ws-tool-btn.is-on,
body[data-shell-product] .gal-pult .ws-tool-btn[aria-pressed="true"],
body[data-shell-product] .gal-pult .ws-origin-btn.is-on {
  border-color: color-mix(in srgb, var(--чип-цвет) 65%, transparent);
  background: color-mix(in srgb, var(--чип-цвет) 12%, transparent);
  color: inherit;
}

/* Счётчик — просто цифра приглушённым тоном рядом с названием. */
body[data-shell-product] .gal-pult .ws-tool-badge {
  position: static; transform: none; margin: 0;
  min-width: 0; height: auto; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: color-mix(in srgb, currentColor 45%, transparent);
  font: 600 12px/1 inherit;
  font-variant-numeric: tabular-nums;
}
.gal-pult .ws-origin-btn.is-on .ws-tool-badge,
.gal-pult .ws-tool-btn.active .ws-tool-badge {
  color: color-mix(in srgb, currentColor 70%, transparent);
}

/* ── РЯДЫ: одна строка, вбок, без кучи переносов ───────────────────── */
body[data-shell-product] .gal-pult .ws-origin-filters,
body[data-shell-product] .gal-pult .ws-status-filters,
body[data-shell-product] .gal-pult .ws-view-btns {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  border: 0;
  background: none;
  width: auto;
  flex: 0 1 auto;
}
.gal-pult .ws-origin-filters::-webkit-scrollbar,
.gal-pult .ws-status-filters::-webkit-scrollbar,
.gal-pult .ws-view-btns::-webkit-scrollbar { display: none; }

/* Ряд «состояние · папка · теги» может переноситься: справа в нём
   выпадающие списки, и прятать их за прокрутку нельзя. */
body[data-shell-product] .gal-pult .gal-ryad-otbor { flex-wrap: wrap; overflow: visible; }

/* Разделитель-точка между состоянием и папкой. */
.gal-tochka {
  padding: 0 3px;
  color: color-mix(in srgb, currentColor 34%, transparent);
  font-size: 15px;
  user-select: none;
}

/* Цифры плотности — те же чипы, только уже. */
.gal-ryad-vid { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
body[data-shell-product] .gal-pult .ws-view-btns .wvb {
  min-width: 38px;
  padding: 0 10px;
  font-variant-numeric: tabular-nums;
}

/* ── ПАПКА И ТЕГИ ──────────────────────────────────────────────────── */
.gal-vybor-obertka { position: relative; display: inline-flex; }
body[data-shell-product] .gal-pult .gal-vybor { font-weight: 600; gap: 5px; }
.gal-pult .gal-vybor b { font-weight: 700; }
.gal-strelka {
  width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4.5px solid currentColor;
  opacity: .55;
}
.gal-schet {
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--чип-цвет) 26%, transparent);
  font: 700 11px/17px "Golos Text", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
.gal-schet[hidden] { display: none; }

.gal-spisok {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 232px;
  max-width: calc(100vw - 32px);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elevated, var(--brand-bg, #15171c)) 96%, transparent);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .42);
}
.gal-spisok[hidden] { display: none; }

.gal-punkt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: 600 13px/1 "Golos Text", Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.gal-punkt:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.gal-punkt.is-on {
  border-color: color-mix(in srgb, var(--чип-цвет) 65%, transparent);
  background: color-mix(in srgb, var(--чип-цвет) 12%, transparent);
}
.gal-punkt--vlozhennaya { padding-left: 24px; }
.gal-punkt--vlozhennaya::before {
  content: "";
  position: absolute;
  margin-left: -12px;
  width: 6px; height: 1px;
  background: color-mix(in srgb, currentColor 30%, transparent);
}
.gal-punkt__schet {
  margin-left: auto;
  color: color-mix(in srgb, currentColor 42%, transparent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gal-punkt--novaya { color: color-mix(in srgb, var(--чип-цвет) 82%, currentColor); font-weight: 700; }
.gal-spisok__cherta { height: 1px; margin: 4px 2px; background: color-mix(in srgb, currentColor 14%, transparent); }
.gal-spisok__pusto {
  padding: 10px;
  font: 500 12.5px/1.3 "Golos Text", system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Свой тег виден сразу: точка в цвете сайта. Автоматические — без неё. */
.gal-svoy {
  width: 7px; height: 7px; flex: 0 0 7px;
  border-radius: 999px;
  background: var(--чип-цвет);
}
.gal-punkt--svoy { font-weight: 700; }

/* ── ГАЛОЧКА ВЫБОРА НА КАРТОЧКЕ ────────────────────────────────────── */
.gal-galka {
  position: absolute;
  top: 7px; left: 7px;
  z-index: 5;
  width: 22px; height: 22px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .7);
  border-radius: 7px;
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s, background .14s, border-color .14s;
}
/* ПОРОГ КАСАНИЯ 44 (пакет №179, слово Ди). Рисованный квадратик
   остаётся 22×22 — крупнее он спорит с обложкой и со строкой. Палец
   ловит НЕВИДИМОЕ поле 44×44 вокруг него: вид тот же, промахнуться
   нельзя. В строке Фонотеки галка мерилась 2 точки шириной. */
.gal-galka::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 12px;
}
.gal-galka::after {
  content: "";
  position: absolute;
  left: 6px; top: 2.5px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
  opacity: 0;
}
*:hover > .gal-galka,
.gal-otmechen > .gal-galka { opacity: 1; }
.gal-otmechen > .gal-galka {
  border-color: var(--чип-цвет, #fff);
  background: var(--чип-цвет, #444);
}
.gal-otmechen > .gal-galka::after { opacity: 1; }
.gal-otmechen {
  outline: 2px solid var(--чип-цвет, #fff);
  outline-offset: 1px;
}
@media (hover: none) {
  .gal-galka { opacity: .85; }
}

/* ── НИЖНЯЯ ПОЛОСА ДЕЙСТВИЙ ────────────────────────────────────────── */
/* Стоит НАД доком: док внизу по канону, и полоса не должна его закрывать. */
.gal-polosa {
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 48;
  width: min(calc(100% - 24px), 760px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, var(--bg-elevated, var(--brand-bg, #15171c)) 96%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
}
.gal-polosa[hidden] { display: none; }
.gal-polosa__schet {
  flex: 0 0 auto;
  font: 600 12.5px/1 "Golos Text", system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 62%, transparent);
  white-space: nowrap;
}
.gal-polosa__schet b {
  color: inherit;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.gal-polosa__knopki {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gal-polosa__knopki::-webkit-scrollbar { display: none; }
.gal-polosa__knopki button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: transparent;
  color: inherit;
  font: 600 12.5px/1 "Golos Text", system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.gal-polosa__knopki button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--olive, var(--brand, #888)) 55%, transparent);
  background: color-mix(in srgb, var(--olive, var(--brand, #888)) 10%, transparent);
}
.gal-polosa__knopki button:disabled { opacity: .38; cursor: default; }
.gal-polosa__knopki button.gal-polosa__opasno { color: #fca5a5; }
.gal-polosa__opasno:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, .6) !important;
  background: rgba(248, 113, 113, .12) !important;
}
.gal-polosa__snyat {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
}

/* Пока полоса видна, спискам снизу нужно место — иначе последний ряд
   уезжает под неё. */
body.gal-est-vybor .ws-grid,
body.gal-est-vybor .ready-grid,
body.gal-est-vybor .zv-library-list { padding-bottom: 132px; }

/* Короткая весть без своего окна: «Скоро» и прочие ответы на действие. */
.gal-vest {
  position: fixed;
  left: 50%;
  bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 60;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, var(--bg-elevated, var(--brand-bg, #15171c)) 96%, transparent);
  backdrop-filter: blur(12px);
  font: 600 13px/1 "Golos Text", system-ui, sans-serif;
}

/* ── УЗКИЙ ЭКРАН ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .gal-pult { padding: 12px; gap: 11px; }
  .gal-poisk { min-height: 44px; height: 44px; }
  body[data-shell-product] .gal-pult .ws-search { font-size: 14px; }
  .gal-polosa { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); padding: 8px 10px; }
  /* Сколько выбрано — видно и на телефоне: это главное число полосы.
     На узком оставляем от подписи только саму цифру. */
  .gal-polosa__schet b { font-size: 14px; }
  .gal-polosa__schet { font-size: 0; }
  .gal-polosa__schet b::after { content: " ✓"; font-size: 12px; }
  /* Точка-разделитель на узком становится переносом строки: тогда
     «Папка» и «Теги» начинаются от левого края и их списки помещаются
     в экран, а страница не уезжает вбок. */
  .gal-tochka { flex-basis: 100%; height: 0; padding: 0; overflow: hidden; }
  .gal-spisok { left: 0; right: auto; }
}

/* ══ СЕТКА ПЛИТОК ДЛЯ ТЕХ, У КОГО СВОЕЙ НЕТ ══════════════════════════
   У Ловии плотность своя и давняя, её не трогаем. Снимии до сих пор
   раскладывала плитки автоподбором, поэтому цифры ей ничего не давали —
   вот раскладка под те же коды. */
.ready-grid.view-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ready-grid.view-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ready-grid.view-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ready-grid.view-grid6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ready-grid.view-grid8 { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 700px) {
  .ready-grid.view-grid4,
  .ready-grid.view-grid6,
  .ready-grid.view-grid8 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
/* На плотной сетке подпись под роликом только мешает. */
.ready-grid.view-grid6 .video-card__info,
.ready-grid.view-grid8 .video-card__info { display: none; }

/* ══ ЗВУЧИИ: ТОНКИЕ СТРОКИ И ОДИН ПЛЕЕР ══════════════════════════════
   Каркас галереи общий, меняется только вид элемента: у фото и видео
   плитка, у музыки строка с длительностью и кнопкой пуска. */

/* Раздел Фонотеки разложен сеткой, а столбец сетки по умолчанию тянется
   под самое широкое содержимое. Длинное название трека растягивало
   столбец за край экрана — вместе с ним уезжал и пульт. Прижимаем
   столбец к ширине раздела. */
body[data-shell-product] .zv-library,
body[data-shell-product] .zv-library-list { grid-template-columns: minmax(0, 1fr); }

.zv-library-list { display: grid; gap: 6px; padding-bottom: 96px; }

.zv-row {
  display: grid;
  /* Три места: кнопка, название, группа действий. Раньше здесь стояло
     шесть колонок под кнопки, а кнопок бывает восемь — лишние падали
     на второй ряд, и строки стояли ступеньками. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  background: transparent;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.zv-row:hover { border-color: color-mix(in srgb, var(--brand, #e0a458) 45%, transparent); }

/* ⛔ СТРОКА ПРЯЧЕТСЯ ПО-НАСТОЯЩЕМУ (пакет №224). У .zv-row свой display:
   grid, и он сильнее браузерного [hidden] { display: none }. Отбор
   Фонотеки ставил строкам hidden, а они оставались на экране — замер в
   живом браузере: hidden стоит, display grid, высота 52. То есть НИ ОДИН
   фильтр (состояние, откуда, папка, теги, поиск) не прятал ничего.
   Соседи в этом же файле идиому имеют, строке её забыли завести. */
.zv-row[hidden] { display: none; }


/* Играющая строка видна сразу: рамка и подложка в цвете сайта. */
.zv-row.is-playing {
  border-color: color-mix(in srgb, var(--brand, #e0a458) 70%, transparent);
  background: color-mix(in srgb, var(--brand, #e0a458) 12%, transparent);
}

/* В строке галочка стоит слева и по центру высоты, а не поверх обложки:
   обложки у звука нет, а в сетку строки лишним столбцом её не поставить. */
.zv-row { position: relative; padding-left: 42px; }
body[data-shell-product] .zv-row > .gal-galka {
  top: 50%; left: 11px; transform: translateY(-50%); opacity: .5;
  /* П.179: в строке галка мерилась 2 точки ШИРИНОЙ при высоте 22 —
     ширину из общего правила кто-то перебивал, и она схлопывалась до
     одних рамок. Ставим оба размера здесь, весом 0-2-1: рисованный
     квадрат 22×22, а поле касания даёт ::before, inset -11 → 44×44. */
  width: 22px; height: 22px;
}
.zv-row:hover > .gal-galka, .zv-row.gal-otmechen > .gal-galka { opacity: 1; }
.zv-row.gal-otmechen { outline-offset: -2px; }

.zv-row__play {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: transparent; color: inherit; font-size: 12px; line-height: 1;
}
.zv-row.is-playing .zv-row__play {
  border-color: color-mix(in srgb, var(--brand, #e0a458) 70%, transparent);
}

.zv-row__name { min-width: 0; display: grid; gap: 2px; }
.zv-row__name b {
  font: 600 14px/1.25 "Golos Text", system-ui, sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zv-row__name span {
  font: 500 11.5px/1 "Golos Text", system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 48%, transparent);
}
.zv-row__time {
  font: 600 12.5px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 52%, transparent);
}
.zv-row__orig, .zv-row__dl, .zv-row__ed {
  min-height: 30px; padding: 0 9px; border-radius: 9px;
  display: inline-flex; align-items: center; text-decoration: none;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: transparent; color: inherit; cursor: pointer;
  font: 600 12px/1 "Golos Text", system-ui, sans-serif;
}
.zv-row__orig:hover, .zv-row__dl:hover, .zv-row__ed:hover {
  border-color: color-mix(in srgb, var(--brand, #e0a458) 50%, transparent);
}

/* ── ПЛЕЕР ── стоит над доком и ничего не закрывает. */
.zv-pleer {
  position: fixed;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: min(calc(100% - 24px), 720px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: color-mix(in srgb, var(--bg-elevated, var(--brand-bg, #15171c)) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.zv-pleer[hidden] { display: none; }

.zv-pleer__knopka {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: transparent; color: inherit; font-size: 12px; line-height: 1;
}
.zv-pleer__knopka--glavnaya {
  border-color: color-mix(in srgb, var(--brand, #e0a458) 60%, transparent);
  background: color-mix(in srgb, var(--brand, #e0a458) 14%, transparent);
}
.zv-pleer__seredina { min-width: 0; display: grid; gap: 5px; }
.zv-pleer__seredina b {
  font: 600 13px/1.2 "Golos Text", system-ui, sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zv-pleer__polosa {
  width: 100%; height: 4px; margin: 0; padding: 0;
  accent-color: var(--brand, #e0a458); cursor: pointer;
}
.zv-pleer__vremya {
  font: 600 12px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 55%, transparent);
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* Сетка строки та же, что на широком: кнопка, имя, группа действий.
     Прежде здесь стояли свои четыре колонки и пряталась правка — от
     этого на телефоне строка разъезжалась, а карандаш пропадал. */
  .zv-pleer { grid-template-columns: auto auto auto 1fr; }
  .zv-pleer__vremya { display: none; }
}

/* ══ БАННЕР ГАЛЕРЕИ — ОДИН НА ТРИ САЙТА ══════════════════════════════
   У Снимии в своих стилях стояла собственная высота полосы и свой кегль
   заголовка — из-за этого её баннер был выше соседних, а буквы крупнее.
   Здесь задаём один размер для всех трёх. */
body[data-shell-product] .shell-banner--thin .shell-banner__frame {
  min-height: 200px;
  height: 200px;
}
body[data-shell-product] .shell-banner--thin .shell-banner__title {
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1.06;
  white-space: nowrap;          /* заголовок в одну строку */
}

@media (min-width: 768px) {
  body[data-shell-product] .shell-banner--thin .shell-banner__frame {
    min-height: 240px;
    height: 240px;
  }
}

/* Подписи под заголовком в галерее нет — если сайт её всё же нарисует,
   она не должна раздвигать полосу. */
body[data-shell-product] .shell-banner--thin .shell-banner__copy p,
body[data-shell-product] .shell-banner--thin .sn-shell-subtitle { display: none; }


/* ══ ДЕЙСТВИЯ В СТРОКЕ: ПОСТОЯННЫЕ МЕСТА ═════════════════════════════
   Порядок один на все записи: длительность · метка · действие · mp3 ·
   wav · правка. Ширины закреплены, поэтому нет чего-то — место просто
   пустует, а правый край у всех строк на одной вертикали. Переносов
   нет: карандаш никогда не уезжает вниз. */
.zv-row__deystviya {
  display: grid;
  /* Последнее место — под слово «В Редактор» (п.315/317), не под значок. */
  grid-template-columns: 46px 84px 132px 46px 46px auto;
  align-items: center;
  justify-items: end;
  gap: 6px;
}
.zv-row__deystviya > * { min-width: 0; }
.zv-row__time { justify-self: end; white-space: nowrap; }
.zv-row__metka, .zv-row__delo, .zv-row__wav { display: inline-flex; justify-content: flex-end; }
.zv-row__metka > *, .zv-row__delo > *, .zv-row__wav > * { white-space: nowrap; }
.zv-row__ed { justify-self: end; }

/* Телефон: те же места, но уже и только значками — в один ряд, без
   переносов. Подписи кнопок прячем, смысл остаётся в подсказке. */
@media (max-width: 560px) {
  .zv-row { padding-left: 34px; gap: 6px; }
  /* Действия только значками и в один ряд: подписи на телефоне съедали
     имя песни, а жанр под ним переносился и ломал высоту строки. */
  /* Последнее место — под слово «В Редактор» (п.315): смысл не живёт в
     подсказке, значок «✎» на телефоне никому ничего не говорил. */
  .zv-row__deystviya { gap: 3px;
    /* НА ТЕЛЕФОНЕ ДЕЙСТВИЯ — ВТОРЫМ РЯДОМ ПОД ИМЕНЕМ (п.315). Замер до
       правки: имени оставалось 81 точка, «скопировать» ложился на
       действия на 68 точек; со словом «В Редактор» — на 118. Второй
       ряд отдаёт имени всю ширину, правый край действий прежний. */
    grid-column: 2 / -1; grid-row: 2; justify-self: end; max-width: 100%; }
  .zv-row { grid-template-rows: auto auto; }

  /* СТРОКА БЕЗ ФАЙЛА: НА ТЕЛЕФОНЕ ЗДЕСЬ СЛОВА, А НЕ ЗНАЧКИ (пакет №224).
     Полоса действий сжата под значки (26–28 точек), а «сочиняем» это 69
     точек и «обновить» 74 — они ложились друг на друга и на имя песни.
     Даём этой строке два места по содержимому; правый край сохраняется
     за счёт justify-content: end. Пустые места гасим, иначе при двух
     колонках они уедут на второй ряд и строка вырастет. */
  .zv-row--net-fayla .zv-row__deystviya {
    grid-template-columns: auto auto;
    justify-content: end;
    gap: 8px;
  }
  .zv-row--net-fayla .zv-row__deystviya > span:empty { display: none; }

  /* ВСЕ ДЕЙСТВИЯ СТРОКИ — СЛОВАМИ (п.316, слово Ди). Значки «⑃ ≡ ◇ ↓ ⇓»
     сняты: «⑃» в шрифте нет — на экране стоял пустой квадрат, остальные
     ничего не говорили. Слова те же, что на ПК: «Разобрать · 8 ₽»,
     «дорожки», «оригинал», «mp3», «wav», «В Редактор». Ряд переносится,
     если не влезает, — но не в значки. */
  .zv-row__deystviya { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .zv-row__deystviya > span:empty { display: none; }
  .zv-row__razobrat, .zv-row__stems, .zv-row__orig, .zv-row__dl, .zv-row__ed {
    padding: 0 8px; min-height: 26px; font-size: 11px; white-space: nowrap;
  }
  .zv-row__time { font-size: 11px; }
}

/* Жанр под названием — одной строкой: перенос делал строки разной высоты. */
.zv-row__name span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── ГАЛОЧКА НА СЕНСОРНОМ ЭКРАНЕ (10.08.2026) ──────────────────────────
   Галочка выбора показывалась только по наведению мышкой. На телефоне
   наведения нет, поэтому отметить работу — а значит и скачать её полосой
   выбора — было нельзя ни на Ловии, ни на Звучии, ни на Снимии.
   Где мышки нет — показываем галочку всегда, приглушённо. */
@media (hover: none) {
  .gal-galka { opacity: .55; }
  .gal-otmechen > .gal-galka { opacity: 1; }
}


/* ПУСТОЙ ЭКРАН (`.gal-pusto`) переехал в shell.css (п.309): он нужен
   не только галерее — витрина каркаса этапов показывает его же. */

}

/* ══ МЕСТО ЕСТЬ, ФАЙЛА НЕТ (пакет №178, слово Ди 03.09.2026) ══
   Прежде работу без файла ПРЯТАЛИ целиком (п.26, 13.08.2026), и на её
   месте не оставалось ничего. Теперь место остаётся: на нём стоит
   предмет сайта, приглушённый до 46%, и слово «файла нет».
   ⚠ Работает только там, где сайт задал свой предмет переменной
   --shell-znak-pusto. Не задал — прячем по-старому, как было. */
.gal-net-fayla { position: relative; }
.gal-net-fayla::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64%;
  height: 56%;
  opacity: .46;
  background: var(--shell-znak-pusto, none) center / contain no-repeat;
  pointer-events: none;
}
.gal-net-fayla::before {
  content: "файла нет";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  text-align: center;
  font: 500 11px/1.4 var(--shell-font-ui, system-ui, sans-serif);
  color: var(--shell-ink, #fffdf0);
  opacity: .72;
  pointer-events: none;
}
/* Битую картинку убираем, но место под неё держим — иначе ряд поедет. */
.gal-net-fayla img { visibility: hidden; }

/* ══ МЕСТО ЕСТЬ, ФАЙЛА НЕТ — СТРОКОЙ (пакет №179, слово Ди) ══
   Работа, чей файл не доехал, больше не пропадает из Фонотеки молча:
   строка остаётся на своём месте. Слева, ровно там же, где ▶, стоит
   знак сайта 34×34 в 46 % силы; вместо времени — «файла нет»;
   действие одно — «повторить» (перезапрос у моста, денег не стоит).
   Форма строки та же: правый край всех строк держит одну вертикаль. */
.zv-row--net-fayla { cursor: default; }
.zv-row--net-fayla:hover {
  border-color: color-mix(in srgb, currentColor 14%, transparent);
}
.zv-row__znak {
  position: relative;
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
/* Приглушение 46 % — только на самом знаке: рамка держит полную силу,
   иначе место перестаёт читаться как место. */
.zv-row__znak::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--shell-znak-pusto, none) center / contain no-repeat;
  opacity: .46;
}
.zv-row__net {
  font: 600 12.5px/1 system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 52%, transparent);
  white-space: nowrap;
}
.zv-row__povtor {
  min-height: 30px; padding: 0 9px; border-radius: 9px;
  display: inline-flex; align-items: center;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: transparent; color: inherit; cursor: pointer;
  font: 600 12px/1 "Golos Text", system-ui, sans-serif;
}
.zv-row__povtor:hover {
  border-color: color-mix(in srgb, var(--brand, #e0a458) 50%, transparent);
}
.zv-row__povtor:disabled { opacity: .6; cursor: default; }

/* ── ВИД ПОЛКИ: СПИСОК ИЛИ ПЛИТКА (п.289, слово Ди) ───────────────────
   Живёт в блоке «Вид» пульта, первым — до цифр «сколько в ряд».
   Рисуется только там, где в реестре заданы «видыПолки»: у соседей
   поля нет, значит и кнопок нет. */
.gal-polka-vid { display: inline-flex; gap: 4px; padding: 3px; border-radius: 12px;
  background: color-mix(in srgb, currentColor 8%, transparent); }
.gal-polka-vid__knopka { border: 0 !important; background: none; }
.gal-polka-vid__knopka.is-on {
  background: var(--brand, #f2b84b) !important;
  color: var(--brand-bg, #17110b) !important; }
@media (max-width: 620px) {
  .gal-polka-vid { width: 100%; }
  .gal-polka-vid__knopka { flex: 1 1 0; min-height: 44px; }
}

/* Чип, за которым пусто, прячется флагом hidden — но у кнопок пульта
   стоит свой display, и он флаг перебивает (грабля 1: правка есть,
   на экране нет). Гасим явно. */
.gal-pult .ws-tool-btn[hidden],
.gal-pult .gal-vybor-obertka[hidden] { display: none !important; }

/* Цифры «сколько в ряд» прячутся флагом hidden при виде «Список» —
   но у ряда свой display, и он флаг перебивает. Гасим явно. */
.gal-pult .ws-view-btns[hidden] { display: none !important; }

/* ══ ПУЛЬТ ВТОРОЙ ВЕРСИИ (п.291, слово Ди) ═══════════════════════════
   Ряды: поиск с флажками · раздел · метки-папка-состояние · черта ·
   вид-плотность-сортировка-период. У сайтов первой версии этих узлов
   нет, поэтому правила ниже до них не доходят. */
.gal-stroka { display: flex; align-items: center; gap: 8px; }
.gal-stroka .gal-poisk { flex: 1 1 auto; min-width: 0; }
.gal-cherta-v { width: 1px; height: 24px; flex: none; margin: 0 4px;
  background: color-mix(in srgb, currentColor 16%, transparent); }

.gal-flazhki { display: flex; gap: 6px; flex: none; }
.gal-flazhok { width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: none; color: color-mix(in srgb, currentColor 55%, transparent);
  font: 500 15px/1 var(--shell-font-ui, inherit);
  display: inline-flex; align-items: center; justify-content: center; }
.gal-flazhok[aria-pressed="true"] { border-color: transparent; }
.gal-flazhok--izbrannoe[aria-pressed="true"] { background: rgba(204,107,122,.22); color: #e79aa6; }
.gal-flazhok--vazhnoe[aria-pressed="true"]   { background: rgba(242,184,75,.22); color: #f2b84b; }
.gal-flazhok--dodelat[aria-pressed="true"]   { background: rgba(111,139,214,.22); color: #9db0ea; }

.gal-metki-ryad { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gal-metka-chip { display: inline-flex; align-items: center; gap: 7px; }
.gal-metka-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gal-ton, #8fb45a); flex: none; }
.gal-metka-chip--dobavit { border-style: dashed;
  color: color-mix(in srgb, currentColor 62%, transparent); }
.gal-metka-chip--dobavit::before { display: none; }
.gal-tochki { display: inline-flex; gap: 3px; margin-left: 4px; }
.gal-tochki i { width: 8px; height: 8px; border-radius: 50%; display: block;
  background: var(--gal-ton, #8fb45a); }

.gal-period { display: inline-flex; align-items: center; gap: 6px; }
.gal-spisok__pod { font: 600 11px/1 var(--shell-font-ui, inherit); letter-spacing: .06em;
  text-transform: uppercase; padding: 8px 10px 4px;
  color: color-mix(in srgb, currentColor 55%, transparent); }

/* Флажки и метка на самой карточке — ставятся одним нажатием. */
.gal-pometki { display: inline-flex; gap: 4px; flex: none; }
.gal-mini { width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  background: none; color: color-mix(in srgb, currentColor 34%, transparent);
  font: 500 12px/1 var(--shell-font-ui, inherit);
  display: inline-flex; align-items: center; justify-content: center; }
.gal-mini--izbrannoe[aria-pressed="true"] { color: #e79aa6; border-color: rgba(204,107,122,.5); }
.gal-mini--vazhnoe[aria-pressed="true"]   { color: #f2b84b; border-color: rgba(242,184,75,.5); }
.gal-mini--dodelat[aria-pressed="true"]   { color: #9db0ea; border-color: rgba(111,139,214,.5); }
.gal-mini--metka i { width: 12px; height: 12px; border-radius: 50%; display: block;
  background: var(--gal-ton, transparent);
  border: 1.5px solid color-mix(in srgb, currentColor 34%, transparent); }

/* Ряд выбора метки у карточки: одно нажатие открывает, второе ставит.
   Перебора по кругу нет — при пяти метках это было пять щелчков. */
.gal-vybor-metki { position: absolute; z-index: 25; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px; border-radius: 12px; background: #241708;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,.5); max-width: 260px; }
.gal-vybor-metki[hidden] { display: none; }
.gal-vybor-metki button { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent); background: none;
  color: inherit; border-radius: 999px; padding: 5px 10px; min-height: 30px;
  font: 500 13px/1 var(--shell-font-ui, inherit); }
.gal-vybor-metki button::before { content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gal-ton, #8fb45a); flex: none; }
.gal-vybor-metki button.is-on { border-color: var(--gal-ton, #8fb45a); }
.gal-vybor-metki button.gal-bez-metki::before { background: none;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent); }

/* Что видно только на ПК и только на телефоне. */
.gal-tel { display: none !important; }
@media (max-width: 620px) {
  .gal-pk { display: none !important; }
  .gal-tel { display: inline-flex !important; }
  /* ТРИ СТРОКИ и потолок 140: поиск+флажки · разделы · метки-папка-вид. */
  .gal-pult--v2 { display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px; padding: 10px; }
  .gal-pult--v2 > .gal-blok:nth-child(1),
  .gal-pult--v2 > .gal-blok:nth-child(2) { width: 100%; }
  .gal-pult--v2 > .gal-cherta { display: none; }
  .gal-pult--v2 .gal-poisk { height: 34px; }
  .gal-pult--v2 .ws-tool-btn { height: 34px; }
}
@media (max-width: 620px) {
  /* Потолок пульта 140: три строки по 34, поля 10, промежутки 6. */
  /* Три строки держим СЕТКОЙ, а не переносами: у переносов свои
     правила про минимальную ширину, и четвёртый блок всё время
     срывался на свою строку. */
  .gal-pult--v2 { display: grid; grid-template-columns: minmax(0,1fr) auto;
    align-items: center; gap: 6px; padding: 10px; }
  .gal-pult--v2 > .gal-blok:nth-child(1),
  .gal-pult--v2 > .gal-blok:nth-child(2) { grid-column: 1 / -1; min-width: 0; }
  .gal-pult--v2 > .gal-cherta { display: none; }
  .gal-pult--v2 > .gal-blok:nth-child(3) { grid-column: 1; min-width: 0; }
  .gal-pult--v2 > .gal-blok:nth-child(5) { grid-column: 2; justify-self: end; }
  .gal-pult--v2 .gal-ryad-vid { flex-wrap: nowrap; }
  .gal-pult--v2 .gal-poisk { height: 34px; padding: 0 10px; }
  .gal-pult--v2 .ws-tool-btn { height: 34px; padding: 0 10px; }
  .gal-pult--v2 .ws-view-btns,
  .gal-pult--v2 .ws-group-btn { display: none !important; }
  .gal-pult--v2 .gal-ryad-otbor { gap: 6px; flex-wrap: nowrap; }
  .gal-pult--v2 .gal-blok > .gal-podpis { display: none; }
  .gal-pult--v2 .ws-origin-filters { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .gal-pult--v2 .ws-origin-filters::-webkit-scrollbar { display: none; }
}

@media (max-width: 620px) {
  /* Третья строка держит только четыре вещи (макет п.290): метки, папка,
     вид и сортировка. Состояние уехало в список под сортировкой. */
  .gal-pult--v2 .ws-status-filters [data-s] { display: none !important; }
  .gal-pult--v2 #gal-papka-knopka { max-width: 96px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .gal-pult--v2 #gal-papka-knopka b { display: none; }
  .gal-pult--v2 .gal-papka-slovo { display: inline; }
  .gal-pult--v2 .gal-tochka { display: none; }
}

@media (max-width: 620px) {
  /* Потолок 140 держим числами, а не надеждой: у поиска и рядов свои
     высоты в основном слое, они перебивали наши. */
  .gal-pult--v2 .gal-poisk { height: 34px !important; min-height: 34px !important; }
  .gal-pult--v2 .gal-stroka,
  .gal-pult--v2 .ws-origin-filters,
  .gal-pult--v2 .gal-ryad-otbor,
  .gal-pult--v2 .gal-ryad-vid { min-height: 34px; align-items: center; padding: 0 !important;
    margin: 0 !important; row-gap: 0 !important; }
  .gal-pult--v2 > .gal-blok { min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    row-gap: 0 !important; }
  .gal-pult--v2 .ws-tool-btn { min-height: 34px; }
}

@media (max-width: 620px) {
  /* Не хватило двух точек до потолка 140: поля 10 → 9. */
  .gal-pult--v2 { padding: 9px; }
}

@layer osnova {
/* ── ПУЛЬТ НАД ПУСТОЙ ПОЛКОЙ (п.315, слово Ди) ─────────────────────
   Записей нет — виден только поиск и чип «Все». Всё остальное
   появляется с первой записью. Класс ставит galereya.js. */
.gal-pult--pusto .gal-flazhki,
.gal-pult--pusto > .gal-cherta,
.gal-pult--pusto > .gal-blok:nth-child(n+3),
.gal-pult--pusto .ws-origin-btn:not(:first-child),
.gal-pult--pusto .ws-tool-badge { display: none !important; }
.gal-pult--pusto > .gal-blok:nth-child(2) { grid-column: 1 / -1; }
}

/* ══ КАРТОЧКА РАБОТЫ НЕСЁТ ОТТЕНОК СВОЕГО РАЗДЕЛА (п.338, слово Ди, ОБЩЕЕ) ══
   Четыре тона — цвета меток канона, одни на все сайты: Моё/Голос/Аватар —
   «сирень», Создать — «песок», Шаблоны — «закат», Редактор — «море».
   Страница ставит карточке `data-gal-razdel` из данных фильтра «Раздел»,
   а полотно (160°: тон 30 % → 14 % на 55 % → предмет) рисует своим
   классом карточки через `--gal-ton-razdela` (`--gal-ton` занят точками меток). Текст стоит на приглушённой части. */
[data-gal-razdel] { --gal-ton-razdela: var(--brand); }
[data-gal-razdel="sozdat"] { --gal-ton-razdela: #c9b071; }
[data-gal-razdel="redaktor"] { --gal-ton-razdela: #5aa3b4; }
[data-gal-razdel="golos"], [data-gal-razdel="moyo"], [data-gal-razdel="avatar"] { --gal-ton-razdela: #a07fd0; }
[data-gal-razdel="shablony"] { --gal-ton-razdela: #d98a5a; }
.gal-polotno-razdela {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--gal-ton-razdela) 30%, var(--object)) 0%,
    color-mix(in srgb, var(--gal-ton-razdela) 14%, var(--object)) 55%,
    var(--object) 100%);
  border-color: color-mix(in srgb, var(--gal-ton-razdela) 28%, var(--shell-line));
}