/* Студия «Картинки» нового интерфейса AlphaHit: главная (templates/v2/pictures.html) и лента картинок
   (templates/v2/pictures_feed.html). Токены (--ink, --raise, --r, шрифты) и общие детали (.make, .sec,
   .h1, .empty) — из app.css; здесь только то, чего у музыки нет: полоса миниатюр, карточки
   инструментов с иллюстрацией «до/после», стена ленты. Оба дизайна («Кассета», «Стриминг») и обе темы
   работают через токены, отдельных правил под дизайн почти нет. */

.pstudio__hello { margin: 4px 0 18px; }
.pstudio__head { padding: 16px 0 14px; }
.pstudio__head .muted { max-width: 64ch; margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.pstudio__head a, .pstudio__empty a:not(.btn) { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ── Полоса миниатюр: мои картинки и свежие открытые (квадраты, листаются вбок) ── */
.pstrip { list-style: none; margin: 0 -12px; padding: 0 12px 6px; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(120px, 13%, 168px);
  gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pstrip::-webkit-scrollbar { display: none; }
/* Развёрнутая полоса (StripToggle, владелец 26.09.2026: «не только пролистывать по горизонтали, но и развернуть,
   чтобы пролистывать по вертикали»): сетка строками, догрузка та же — сторож ImageFeed в конце списка */
.pstrip.is-open { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; }
.sec__acts { display: inline-flex; gap: 16px; align-items: baseline; }
button.sec__more { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; }

.pstrip__a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--raise); scroll-snap-align: start; }
.pstrip__a img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) { .pstrip__a:hover img { transform: scale(1.05); } }
.pstrip__a:focus-visible, .tool:focus-visible, .pwall__a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Инструменты: у группы заголовок и одна строка «что это», дальше карточки с иллюстрацией ── */
.tools { scroll-margin-top: 76px; }                 /* якорь #try из меню не прячет заголовок под липкой шапкой */
.tools__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 14px; }
.tools__head .muted { margin: 0; font-size: 14px; }
.tools__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 16px; }
.tool { display: grid; gap: 3px; align-content: start; }
.tool__art { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 7px; border-radius: var(--r); background: var(--raise);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 8px 20px -14px rgb(0 0 0 / 0.45); transition: box-shadow 220ms ease; }
.tool__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 380ms cubic-bezier(0.23, 1, 0.32, 1); }
.tool b { font-weight: 700; font-size: 15px; line-height: 1.25; }
.tool small { font-size: 13px; line-height: 1.35; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .tool:hover .tool__art img { transform: scale(1.04); }
  .tool:hover .tool__art { box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 14px 28px -14px rgb(0 0 0 / 0.55); }
}
.tool:active .tool__art { transform: scale(0.98); }
/* Нет иллюстрации (открытка, модель) — цветное поле группы со значком */
.tool__ph { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; }
.tool__ph[data-g="make"] { background: linear-gradient(135deg, #2f5fd0, #1e7a4f); }
.tool__ph[data-g="try"] { background: linear-gradient(135deg, #b3471b, #d8452f); }
.tool__ph[data-g="fix"] { background: linear-gradient(135deg, #0f6e7e, #2f5fd0); }
.tool__ph[data-g="social"] { background: linear-gradient(135deg, #c13584, #f56040 60%, #fcaf45); }
.tool__ph[data-g="realty"] { background: linear-gradient(135deg, #1e7a4f, #0f6e7e); }
.tool__ph .ic { width: 40px; height: 40px; opacity: 0.9; }

/* ── Лента картинок: стена в колонки, каждая картинка своей высоты (миниатюры сохраняют пропорции) ── */
.pwall { list-style: none; margin: 0; padding: 0; columns: 4 220px; column-gap: 12px; }
.pwall__i { break-inside: avoid; margin-bottom: 12px; }
.pwall__a { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--raise); }
.pwall__a img { width: 100%; height: auto; min-height: 120px; }
.pwall__cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 1px; padding: 28px 12px 10px;
  background: linear-gradient(to top, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0)); color: #fff; opacity: 0; transform: translateY(6px);
  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.23, 1, 0.32, 1); }
.pwall__cap b { font-size: 13px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pwall__cap small { font-size: 12px; color: rgb(255 255 255 / 0.78); }
@media (hover: hover) and (pointer: fine) { .pwall__a:hover .pwall__cap, .pwall__a:focus-visible .pwall__cap { opacity: 1; transform: none; } }
@media (hover: none) { .pwall__cap { opacity: 1; transform: none; } }   /* на телефоне наведения нет — подпись видна сразу */
.pstudio__empty { margin-top: 8px; max-width: 560px; }

@media (max-width: 900px) {
  .tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .tool small { display: none; }                   /* на узкой карточке хватает названия и картинки */
  .tool b { font-size: 14px; }
  .pwall { columns: 2; column-gap: 8px; }
  .pwall__i { margin-bottom: 8px; }
  .pstrip { grid-auto-columns: 34%; }
}
@media (prefers-reduced-motion: reduce) {
  .pstrip__a img, .tool__art img, .tool__art, .pwall__cap { transition: none; }
}

/* ── «Мои картинки» (templates/v2/pictures_mine.html): шапка с кнопкой и сетка квадратов ── */
.pmhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; padding: 12px 0 18px; }
.pmhead .muted { margin: 6px 0 0; font-size: 14px; min-height: 1.4em; }
/* «Мои картинки»: колонка альбомов слева, как список чатов (PicturesMinePage, ImageAlbums); на телефоне — полоса */
.pmine { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.palb { position: sticky; top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px; border-radius: var(--r); background: var(--raise); min-width: 0; box-sizing: border-box; }
/* Кнопка не шире колонки: box-sizing и min-width 0 — иначе длинное название («Удаление текста с картинки») растягивало
   её за колонку, и выбранный альбом налезал на заголовок страницы (снимок владельца 26.09.2026) */
.palb__a { box-sizing: border-box; min-width: 0; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none;
  color: var(--ink-2); font: 700 14px/1.2 var(--f); text-align: left; cursor: pointer; }
.palb__a .ic { width: 18px; height: 18px; flex: none; }
.palb__a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palb__a small { color: var(--ink-3, var(--ink-2)); font-weight: 600; }
.palb__a[aria-current] { background: var(--ink); color: var(--panel); }
.palb__a[aria-current] small { color: inherit; opacity: 0.7; }
.palb__new { color: var(--accent, var(--ink)); }
.palb__hr { width: 100%; margin: 6px 0; border: 0; border-top: 1px solid var(--line, rgb(0 0 0 / 0.1)); }
.palb--sheet { background: none; padding: 0; position: static; }
@media (hover: hover) and (pointer: fine) { .palb__a:not([aria-current]):hover { background: var(--hover); color: var(--ink); } }
.pmhead__alb { display: inline-flex; gap: 16px; margin-top: 8px; }
/* Метки под открытой строкой колонки (PicturesMinePage.tagsHtml): несколько сразу, через ИЛИ */
.palb__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 6px 10px 40px; }
.palb__tag { border: 1px solid var(--line, rgb(0 0 0 / 0.12)); border-radius: 999px; background: var(--panel); color: var(--ink-2);
  padding: 5px 10px; font: 700 12px/1 var(--f); cursor: pointer; }
.palb__tag small { opacity: 0.6; font-weight: 600; }
.palb__tag[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); }
/* Плитка: карандаш «Папка и метки» и метки поверх картинки */
.pgrid__li { position: relative; }
.pgrid__edit { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgb(12 14 24 / 0.62); color: #fff; cursor: pointer; backdrop-filter: blur(6px); }
.pgrid__edit .ic { width: 16px; height: 16px; }
/* «i» на миниатюре — страница картинки (владелец 27.09.2026: «кнопка i должна быть не только при просмотре на весь
   экран, но и на миниатюрах»); сама плитка открывает просмотрщик */
.pgrid__info { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgb(12 14 24 / 0.62); color: #fff; text-decoration: none; backdrop-filter: blur(6px); font: 800 italic 16px/1 Georgia, serif; }
@media (hover: hover) and (pointer: fine) { .pgrid__info { opacity: 0; transition: opacity 160ms; } .pgrid__li:hover .pgrid__info, .pgrid__info:focus-visible { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .pgrid__edit { opacity: 0; transition: opacity 160ms; } .pgrid__li:hover .pgrid__edit, .pgrid__edit:focus-visible { opacity: 1; } }
/* Приватность на плитке «Моих картинок» и «Моих видео» — как у «Моих видео» (владелец 28.09.2026: «настройки приватности
   у картинок сделай так же, как и в моих видео»): значок «кто видит» внизу слева (у видео — правее значка «играть»),
   «⋯» на месте прежней «i», в режиме выбора — кружок-отметка */
.pgrid__acc { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  font: 700 11px/1.2 var(--f); font-style: normal; background: rgb(0 0 0 / .58); color: #fff; pointer-events: none; }
.pgrid__acc .ic { width: 12px; height: 12px; }
.pgrid__play ~ .pgrid__acc { left: 44px; bottom: 11px; }
.pgrid__more { border: 0; cursor: pointer; touch-action: manipulation; }
.pgrid__more .ic { width: 18px; height: 18px; }
.pgrid__li .pgrid__check { right: 8px; bottom: 8px; }
.is-picking .pgrid__more, .is-picking .pgrid__edit { display: none; }
.pgrid__li.is-sel .pgrid__a { outline: 3px solid var(--accent); outline-offset: -3px; }
.pgrid__li.is-sel .rcard__check { background: var(--accent); border-color: var(--accent); }
.pgrid__li.is-sel .rcard__check .ic { opacity: 1; }
.pgrid__tags { position: absolute; left: 8px; top: 8px; right: 50px; font: 700 11px/1.3 var(--f); color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 0.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }

/* Окно «Папка и метки» (PictureCatalog.editSheet) */
.pcat-edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* Поля окна не шире окна: без box-sizing ширина 100% + внутренние отступы выпирала за правый край (снимок 27.09.2026) */
.pcat-edit .pfield__input, .pcat-edit .pfield__select { width: 100%; box-sizing: border-box; min-width: 0; }
.pcat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pcat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 10px; border-radius: 999px; background: var(--raise); font: 700 13px/1 var(--f); }
.pcat-chip button { border: 0; background: none; font-size: 16px; line-height: 1; cursor: pointer; color: var(--ink-2); padding: 0 4px; }
/* Узко — колонка папок становится строкой-полосой над сеткой (правило 190 «колонки → строки»; владелец 29.09.2026: «ты
   нарушил правило… очень узкая колонка — тогда мы их превращаем в строки»). Решает ширина САМОГО раздела (container
   query), а не окна: в приложении на Маке/планшете и на сайте с меню окно широкое, а места под раздел мало */
.pstudio:has(> .pmine) { container-type: inline-size; container-name: pmine; }
@container pmine (max-width: 760px) {
  .pmine { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .palb { position: static; display: flex; overflow-x: auto; scrollbar-width: none; padding: 6px; gap: 4px; }
  .palb__a { width: auto; flex: none; padding: 8px 12px; }
  .palb__a span { overflow: visible; }
  .palb__hr { width: 1px; height: auto; margin: 4px 2px; border-top: 0; border-left: 1px solid var(--line, rgb(0 0 0 / 0.1)); }
}
@media (max-width: 900px) {   /* запасной путь для браузеров без container query */
  @supports not (container-type: inline-size) {
    .pmine { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .palb { position: static; display: flex; overflow-x: auto; scrollbar-width: none; padding: 6px; gap: 4px; }
    .palb__a { width: auto; flex: none; padding: 8px 12px; }
  }
}
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pgrid__a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--raise); }
.pgrid__a img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1); }
/* Видео в «Моих картинках» (28.09.2026): ролик или кадр-обложка с круглым значком «играть» в углу */
.pgrid__a video { width: 100%; height: 100%; object-fit: cover; }
.pgrid__a { position: relative; }
.pgrid__play { position: absolute; left: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgb(0 0 0 / 0.5); color: #fff; pointer-events: none; }
.pgrid__play .ic { width: 14px; height: 14px; margin-left: 2px; }
.pgrid__open { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: rgb(0 0 0 / 0.58); color: #fff; }
.pgrid__open .ic { width: 15px; height: 15px; }
.pgrid__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 9px; font-size: 12px; font-weight: 600; line-height: 1.3; color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; transition: opacity 200ms ease; }
.pgrid__cap:empty { display: none; }
@media (hover: hover) and (pointer: fine) { .pgrid__a:hover img { transform: scale(1.04); } .pgrid__a:hover .pgrid__cap { opacity: 1; } }
.pgrid__a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pgrid__a:focus-visible .pgrid__cap { opacity: 1; }
[data-mine-state] { display: grid; place-items: center; padding: 28px 0; }
[data-mine-state][hidden] { display: none; }

/* ── Страница одной картинки (templates/v2/picture_view.html) ── */
.pview__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 28px; align-items: start; }
.pview__imgs { display: grid; gap: 10px; }
.pview__imgs.is-many { grid-template-columns: 1fr 1fr; }
.pview__imgs a { display: block; overflow: hidden; border-radius: var(--r); background: var(--raise); }
.pview__imgs img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; }
.pview__side { position: sticky; top: 76px; display: grid; gap: 14px; }
.pview__tool { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.pview__cap { margin: 0; font: 700 18px/1.4 var(--f); overflow-wrap: anywhere; }
.pview__meta { margin: 0; font-size: 13px; }
.pview__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pview__acts .ic { width: 16px; height: 16px; }
.pview__own { display: grid; gap: 8px; padding: 16px; border-radius: var(--r); background: var(--raise); }
.pview__own small { font-size: 12px; }
.pview__del { justify-self: start; margin-top: 6px; color: #c0392b; text-decoration-color: color-mix(in srgb, #c0392b 40%, transparent); }
@media (max-width: 900px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .pgrid__a { border-radius: 4px; }
  .pgrid__cap { display: none; }
  .pview__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pview__side { position: static; }
  .pmhead .btn { flex: 1; }
}
@media (max-width: 420px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Зона «Мои картинки» на главной студии: своё отделено от инструментов панелью ──
   «Кассета» — кобальтовый вкладыш с белым текстом (как шапка), «Стриминг» — поднятая панель с обводкой. */
.myzone { padding: 18px 18px 16px; border-radius: calc(var(--r) + 4px); background: var(--raise);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
[data-skin="cassette"] .myzone { background: var(--cobalt); color: #fff; box-shadow: 0 18px 36px -24px rgb(20 30 90 / 0.7); }
.myzone__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.myzone__ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); flex: none; }
[data-skin="cassette"] .myzone__ic { color: #fff; }
.myzone__ic .ic { width: 19px; height: 19px; }
.myzone__all { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: inherit; opacity: 0.85; white-space: nowrap; }
.myzone__all .ic { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .myzone__all:hover { opacity: 1; text-decoration: underline; } }
.myzone .pstrip { margin: 0 -18px; padding: 0 18px 4px; }
.pstrip__new { display: grid !important; place-content: center; justify-items: center; gap: 6px; box-shadow: inset 0 0 0 1.5px currentColor; background: transparent !important;
  color: inherit; opacity: 0.9; font-size: 13px; font-weight: 700; text-align: center; }
.pstrip__new .ic { width: 26px; height: 26px; }
[data-skin="cassette"] .myzone .pstrip__new { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.55); }
@media (hover: hover) and (pointer: fine) { .pstrip__new:hover { opacity: 1; } }
@media (max-width: 900px) { .myzone { padding: 14px 14px 12px; margin-left: -4px; margin-right: -4px; } .myzone .pstrip { margin: 0 -14px; padding: 0 14px 4px; } }

/* Полоса внутри панели «Мои картинки»: заходит под края панели, но первая плитка стоит с отступом панели
   (владелец 26.09.2026: «в моих картинках слева должен быть отступ») — и после прокрутки тоже */
.myzone .pstrip { margin: 0 -18px; padding: 0 18px 6px; scroll-padding-inline: 18px; }
/* Лента не шире карточки (владелец 29.09.2026: «во всех видеозонах справа вылазят часть видео»): на телефоне отступ
   карточки 14 px, а правило выше стоит позже телефонного и тянуло ленту на −18 px — на 4 px за край с каждой стороны.
   Плюс обрезка по скруглённой границе — что бы ни случилось с отступами, плитка за карточку не выйдет */
.myzone { overflow: hidden; }
@media (max-width: 900px) { .myzone .pstrip { margin: 0 -14px; padding: 0 14px 6px; scroll-padding-inline: 14px; } }

/* ── Зона «Оживить картинку» (templates/v2/pictures.html .vzone; владелец 28.09.2026: «под этой зоной вставить
   зону с оживлением картинок»): глубокая тёмная панель, как у плиток «Поток треков»/«Радио», — это видео, не
   картинки. Три карточки: кадр (или значок на градиенте) с кнопкой «Играть», название, что делает. ── */
.vzone { margin: 0 0 22px; padding: 20px; border-radius: calc(var(--r) + 8px); color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgb(229 72 77 / 0.35) 0%, transparent 55%), linear-gradient(135deg, #1b2a8a, #0d1235 70%);
  box-shadow: 0 18px 36px -22px rgb(20 10 60 / 0.8); }
.vzone__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.vzone__head .h2 { color: #fff; margin: 0; }
.vzone__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #1b2a8a; }
.vzone__ic .ic { width: 20px; height: 20px; margin-left: 2px; }
.vzone__lead { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: rgb(255 255 255 / 0.78); }
.vzone__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* четыре инструмента («Оживить открытку» — 28.09.2026): 4 в ряд, на планшете 2 — без одинокой карточки */
@media (max-width: 1100px) { .vzone__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vtool { display: grid; gap: 3px; align-content: start; color: #fff; }
.vtool__art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 8px; border-radius: var(--r);
  background: linear-gradient(135deg, #ff8a3d, #e5484d 60%, #b8215a); transition: box-shadow 160ms ease; }
.vtool[data-v="1"] .vtool__art { background: linear-gradient(135deg, #f5b301, #e8590c 60%, #b8215a); }
.vtool[data-v="2"] .vtool__art { background: linear-gradient(135deg, #12b886, #0b7285 60%, #1b2a8a); }
.vtool__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vtool__art > .ic { width: 38%; height: 38%; color: rgb(255 255 255 / 0.9); }
.vtool__play { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgb(0 0 0 / 0.45); backdrop-filter: blur(6px); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.vtool__play .ic { width: 16px; height: 16px; margin-left: 2px; color: #fff; }
.vtool b { font-weight: 800; font-size: 16px; line-height: 1.25; }
.vtool small { font-size: 13px; line-height: 1.35; color: rgb(255 255 255 / 0.72); }
.vtool:active .vtool__play { transform: scale(0.92); }
.vtool:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: var(--r); }
/* без увеличения при наведении (владелец 28.09.2026: «и сюда при наведении не надо увеличивать») — только лёгкая подсветка */
@media (hover: hover) and (pointer: fine) { .vtool:hover .vtool__art { box-shadow: 0 0 0 2px rgb(255 255 255 / 0.55); } }
/* Узкий экран (правило 190): три колонки встают строками — кадр слева, текст справа */
@media (max-width: 640px) {
  .vzone { padding: 16px; }
  .vzone__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .vtool { grid-template-columns: 120px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .vtool__art { grid-row: span 2; margin: 0; }
  .vtool__play { width: 30px; height: 30px; right: 6px; bottom: 6px; }
}

/* ── Видео в полосах и сетке (28.09.2026): кадр-обложка со значком «играть» (_myvideos.html, videos.html) ── */
.pstrip__a { position: relative; }
.pstrip__play { position: absolute; left: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgb(0 0 0 / 0.5); color: #fff; pointer-events: none; }
.pstrip__play .ic { width: 14px; height: 14px; margin-left: 2px; }
.myzone--vid { margin-top: 18px; }
/* «Мои ИИ-фильмы и клипы» (_myfilms.html, 29.09.2026): поверх кадра — способ съёмки сверху и название снизу на
   затемнении; фильм без кадра — значок хлопушки на полупрозрачной подложке */
.pstrip__mode { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 999px;
  background: rgb(0 0 0 / 0.55); color: #fff; font: 700 11px/1.3 var(--f); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.pstrip__cap { position: absolute; inset: auto 0 0; padding: 22px 10px 8px; color: #fff; font: 700 13px/1.25 var(--f);
  background: linear-gradient(transparent, rgb(0 0 0 / 0.7)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; pointer-events: none; }
.pstrip__noart { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(255 255 255 / 0.12); color: rgb(255 255 255 / 0.85); }
.pstrip__noart .ic { width: 40%; height: 40%; }
.vgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.vgrid__a { position: relative; display: grid; gap: 6px; }
.vgrid__a img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); background: var(--raise); }
.vgrid__a .pstrip__play { top: 8px; bottom: auto; }
.vgrid__a span { font-size: 13px; font-weight: 700; line-height: 1.3; }

/* Карточка видео-инструмента «было → стало» (_vzone.html, 28.09.2026): кадр пополам — слева исходник, справа видео */
.vtool[data-v] .vtool__art--pair { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100%; gap: 2px; background: #0b0e1a; }
/* половины — на всю высоту кадра (владелец 28.09.2026: «убрать вот эти вот полосы вокруг фотографий белые») */
.vtool__art--pair img, .vtool__art--pair video { position: static; display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover;
  object-position: 50% 12%; }   /* кадр прижат к верху: у рисунков уши и макушка сверху (владелец: «обрезанные уши… опусти их») */
@media (prefers-reduced-motion: reduce) { .vtool__art--pair video { display: none; } .vtool__art--pair { grid-template-columns: 1fr; } }

/* «Мои рилсы» (videos.html, 28.09.2026): вертикальные плитки 9:16, как обложки Reels */
.pstrip--reels .pstrip__a { aspect-ratio: 9 / 16; }
.pstrip--reels .pstrip__a img { width: 100%; height: 100%; object-fit: cover; }
.myzone--reels { margin-bottom: 18px; }

/* ── Просмотр рилсов (ReelsViewer, 28.09.2026): как TikTok/Instagram — вертикальная лента во весь экран; справа
   лайк/комментарии/поделиться/опубликовать/избранное, внизу автор, подпись и поле комментария, шторка комментариев ── */
.reels { position: fixed; inset: 0; z-index: 200; background: #000; color: #fff; container-type: size; container-name: reels; }
/* Высота ленты и ролика — от самого окна просмотра, а не от 100dvh (владелец 29.09.2026: «почему кусок другого рилса
   виден внизу?» — в приложении окно короче экрана, а лента была во весь экран, и снизу торчал следующий ролик).
   Ширина кадра 9:16 — от той же высоты (container query) */
.reels > * { --rw: min(100cqw, calc(100cqh * 9 / 16)); }   /* лента, шторка комментариев, кнопки — все от окна просмотра */
@container reels (max-aspect-ratio: 3 / 4) { .reels > * { --rw: 100cqw; } }   /* вертикальный экран — ролик во всю ширину, как в TikTok */
.reels__feed { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.reels__feed::-webkit-scrollbar { display: none; }
.reels__item { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; }
.reels__item video { height: 100%; width: var(--rw); object-fit: cover; background: #000; }
.reels__item::after { content: ''; position: absolute; left: calc(50% - var(--rw) / 2); width: var(--rw); bottom: 0; height: 38%; pointer-events: none;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.65)); }
.reels__side { position: absolute; z-index: 2; right: calc(50% - var(--rw) / 2 + 10px); bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 16px; justify-items: center; }
.reels__btn { display: grid; justify-items: center; gap: 3px; border: 0; padding: 0; background: none; color: #fff; cursor: pointer; touch-action: manipulation; }
.reels__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgb(255 255 255 / 0.16); backdrop-filter: blur(8px);
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease; }
.reels__btn:active .reels__ic { transform: scale(0.9); }
.reels__btn .ic { width: 24px; height: 24px; }
.reels__btn small { min-height: 14px; font-size: 12px; font-weight: 700; text-shadow: 0 1px 4px rgb(0 0 0 / 0.6); }
.reels__btn .ic--on, .reels__btn.is-on .ic--off { display: none; }
.reels__btn.is-on .ic--on { display: block; }
.reels__btn[data-act="like"].is-on .reels__ic { color: #ff3b5c; }
.reels__btn[data-act="save"].is-on .reels__ic, .reels__btn[data-act="publish"].is-on .reels__ic { color: #ffd23f; }
.reels__item.is-bare .reels__side .reels__btn[data-act]:not([data-act="share"]), .reels__item.is-bare .reels__say, .reels__item.is-bare .reels__who { display: none; }
.reels__cap { position: absolute; z-index: 2; left: calc(50% - var(--rw) / 2 + 14px); right: calc(50% - var(--rw) / 2 + 76px);
  bottom: calc(68px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; text-shadow: 0 1px 6px rgb(0 0 0 / 0.7); }
.reels__who { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 15px; justify-self: start; }
.reels__ava { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: none; overflow: hidden; border-radius: 50%;
  background: #d02f1b; border: 2px solid #fff; font-size: 15px; font-weight: 800; }
.reels__ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reels__ava--sm { width: 32px; height: 32px; border-width: 0; font-size: 13px; }
.reels__cap p { margin: 0; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.reels__say { position: absolute; z-index: 2; left: calc(50% - var(--rw) / 2 + 12px); right: calc(50% - var(--rw) / 2 + 12px);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 999px;
  background: rgb(255 255 255 / 0.16); backdrop-filter: blur(8px); }
.reels__say input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 16px; outline: none; }
.reels__say input::placeholder { color: rgb(255 255 255 / 0.8); }
.reels__say button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #d02f1b; color: #fff; cursor: pointer; }
.reels__say .ic { width: 18px; height: 18px; }
.reels__close { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; z-index: 3; display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: rgb(255 255 255 / 0.16); backdrop-filter: blur(8px); cursor: pointer; }
.reels__sound { left: auto; right: 14px; }
.reels__close .ic { width: 22px; height: 22px; }
.reels .reels__btn .ic--mute, .reels.is-muted .reels__btn .ic--snd { display: none; }
.reels.is-muted .reels__btn .ic--mute { display: block; }
.reels__sheet { position: absolute; z-index: 4; left: calc(50% - var(--rw) / 2); width: var(--rw); bottom: 0; max-height: 62dvh; display: grid;
  grid-template-rows: auto minmax(0, 1fr); border-radius: 18px 18px 0 0; background: #16161a; box-shadow: 0 -12px 40px rgb(0 0 0 / 0.5);
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
.reels__sheet[hidden] { display: none; }
.reels__sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.reels__sheet-head button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.1); color: #fff; cursor: pointer; }
.reels__sheet-head .ic { width: 18px; height: 18px; }
.reels__list { list-style: none; margin: 0; padding: 8px 16px; overflow-y: auto; overscroll-behavior: contain; }
.reels__list li { display: flex; gap: 10px; padding: 8px 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.reels__list small { color: rgb(255 255 255 / 0.6); font-size: 12px; }
.reels__empty { color: rgb(255 255 255 / 0.7); }
.reels__btn:focus-visible .reels__ic, .reels__close:focus-visible, .reels__say button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Правая панель рилсов «поинтереснее» (владелец 28.09.2026): аватар автора сверху, стеклянные круглые кнопки со счётчиками,
   сердце «выпрыгивает», вращающаяся катушка кассеты внизу; двойное касание — всплеск сердца */
.reels__side { gap: 10px; right: calc(50% - var(--rw) / 2 + 8px); }   /* плотная колонка, как в TikTok (владелец 29.09.2026) */
.reels__sound { top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(50% - var(--rw) / 2 + 14px); width: 40px; height: 40px; }
.reels__sound .ic { width: 20px; height: 20px; }
.reels__me { display: block; margin-bottom: 4px; }
.reels__ava--big { width: 50px; height: 50px; border-width: 2px; font-size: 18px; box-shadow: 0 4px 14px rgb(0 0 0 / 0.45); }
.reels__ic { width: 44px; height: 44px; background: rgb(20 20 28 / 0.38); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), 0 6px 16px -6px rgb(0 0 0 / 0.6); }
.reels__btn .ic { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5)); }
.reels__btn[data-act="like"].is-on .reels__ic { background: rgb(255 59 92 / 0.22); }
.reels__btn.is-pop .reels__ic { animation: reels-pop 420ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes reels-pop { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }
.reels__burst { position: absolute; z-index: 5; width: 96px; height: 96px; margin: -48px 0 0 -48px; color: #ff3b5c; pointer-events: none;
  animation: reels-burst 700ms cubic-bezier(0.23, 1, 0.32, 1) forwards; filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.45)); }
.reels__burst .ic { width: 100%; height: 100%; }
@keyframes reels-burst { 0% { transform: scale(0.6); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1) translateY(-40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reels__btn.is-pop .reels__ic { animation: none; } .reels__burst { animation-duration: 1ms; } }

/* «Кто видит» в просмотре рилсов (ReelsViewer.accessMenu): меню слева от кнопки, выбранное отмечено */
.reels__menu { position: fixed; z-index: 6; min-width: 200px; display: flex; flex-direction: column; padding: 6px; border-radius: 14px;
  background: rgba(20, 22, 32, .94); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); color: #fff; }
.reels__menu b { padding: 6px 10px 8px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.reels__menu button { text-align: left; padding: 9px 10px 9px 32px; border: 0; border-radius: 9px; background: none; color: #fff; font: 600 14px/1.2 var(--f);
  position: relative; cursor: pointer; touch-action: manipulation; }
.reels__menu button[aria-checked="true"]::before { content: '✓'; position: absolute; left: 11px; color: #ff6a55; }
@media (hover: hover) and (pointer: fine) { .reels__menu button:hover { background: rgba(255, 255, 255, .1); } }
.reels__btn[hidden] { display: none; }

/* V2Sheet поверх просмотра рилсов (подтверждение удаления, «Как создано») */
.reels ~ .sheet, .sheet { z-index: 1000; }

/* Главная «Видео»: «Видео по описанию» и «Редактор роликов» — пара в ряд, яркие (красная карточка с синей полосой,
   белая кнопка) — выделены среди остальных (templates/v2/videos.html) */
.vpair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 0 0 18px; }   /* три карточки: «Видео по описанию», «Редактор», «Озвучка» */
.vpair .make { margin: 0; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.vpair .make__btn { margin-top: 6px; }
[data-skin="cassette"] .make--hot { background: linear-gradient(115deg, #d02f1b 0 62%, #2b3d96 62% 65%, #e04a33 65%);
  box-shadow: 0 10px 28px rgb(208 47 27 / 0.35); }
[data-skin="cassette"] .make--hot .make__btn { background: #fff; color: #b0240f; box-shadow: 0 4px 0 #7a1a0e; }
@media (max-width: 760px) { .vpair { grid-template-columns: 1fr; } }

/* «Мои рилсы»: корзина на плитке — на компьютере при наведении, на телефоне видна всегда */
.pstrip--reels li { position: relative; }
.pstrip__del { position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border: 0;
  border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; touch-action: manipulation; }
.pstrip__del .ic { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .pstrip__del { opacity: 0; transition: opacity 150ms ease; }
  .pstrip--reels li:hover .pstrip__del, .pstrip__del:focus-visible { opacity: 1; }
  .pstrip__del:hover { background: #d02f1b; }
}

/* «Мои рилсы» — своя страница (templates/v2/reels.html, MyReelsPage) */
.rhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rhead__n { font-size: .5em; color: var(--ink-2); vertical-align: middle; margin-left: 6px; }
.rbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 14px; }
.rsel { position: sticky; top: 70px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px;
  border-radius: 14px; background: var(--panel); box-shadow: 0 6px 20px rgb(0 0 0 / .12); }
.rsel[hidden] { display: none; }
.rsel b { margin-right: auto; }
.rsel__del { color: #d8452f; }
.rgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.rcard { position: relative; display: flex; flex-direction: column; gap: 6px; }
.rcard[hidden] { display: none; }
.rcard__a { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; }
.rcard__a img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (hover: hover) and (pointer: fine) { .rcard__a:hover img { transform: scale(1.04); } }
.rcard__top { position: absolute; left: 8px; right: 44px; top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.rcard__top i, .rcard__stats i { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font: 700 11px/1.2 var(--f);
  font-style: normal; background: rgb(0 0 0 / .58); color: #fff; }
.rcard__top .ic, .rcard__stats .ic { width: 12px; height: 12px; }
.rcard__acc.is-open { background: #2fa86b; }
.rcard__stats { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 5px; }
.rcard__more { position: absolute; right: 8px; top: 8px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgb(0 0 0 / .58); color: #fff; cursor: pointer; touch-action: manipulation; }
.rcard__more .ic { width: 18px; height: 18px; }
.rcard__cap { margin: 0; font-size: 13px; line-height: 1.3; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard__check { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; background: rgb(0 0 0 / .35);
  display: none; place-items: center; color: #fff; }
.rcard__check .ic { width: 16px; height: 16px; opacity: 0; }
.is-picking .rcard__check { display: grid; }
.is-picking .rcard__more { display: none; }
.rcard.is-sel .rcard__a { outline: 3px solid var(--accent); outline-offset: -3px; }
.rcard.is-sel .rcard__check { background: var(--accent); border-color: var(--accent); }
.rcard.is-sel .rcard__check .ic { opacity: 1; }
.rnone { padding: 24px; border-radius: 16px; background: var(--panel); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 640px; }
@media (max-width: 760px) { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rsel { top: 110px; } }
.rgrid--videos .rcard__a { aspect-ratio: 1; }   /* «Мои видео»: форматы разные — квадратная плитка */

/* Колонка просмотра рилсов влезает в любой телефон (владелец 29.09.2026: «иконки все поперепутаны»): кнопок сбоку
   теперь шесть, на коротком экране — мельче и плотнее */
@container reels (max-height: 640px) { .reels__side { gap: 6px; } .reels__ic { width: 40px; height: 40px; } .reels__btn .ic { width: 21px; height: 21px; } }
.reels__more .fset { margin-bottom: 12px; }
/* Встроенная страница в приложении: просмотр рилсов — над нижними панелями приложения (--app-bottom ставит приложение) */
html.is-embed .reels { bottom: var(--app-tabs, 0px); }   /* ровно над нижними вкладками (и мини-плеером) приложения */
/* «Дополнительные инструменты» студии «Видео» (videos.html, 29.09.2026): озвучка и титры — те же красные карточки .vpair */
.vextra { margin: 0 0 18px; }
.vextra > .h2 { margin: 0 0 12px; }
.vextra .fmodes { margin: 0; }
.vtop { margin-bottom: 18px; }   /* верхние карточки «Видео по описанию» и «Редактор» — строкой, как сценарии (29.09.2026) */
/* «Мои титры» (_mysubs.html, 29.09.2026): плитка — текстовая карточка: название, начало титров, дата */
.pstrip__sub { display: flex !important; flex-direction: column; gap: 6px; padding: 12px; background: rgb(255 255 255 / 0.1) !important; color: inherit; text-align: left; }
.pstrip__sub b { font: 800 14px/1.25 var(--f); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pstrip__subtxt { flex: 1; font-size: 12px; line-height: 1.35; opacity: 0.85; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pstrip__sub small { font-size: 11px; opacity: 0.7; }

/* Полоса и зона «Оживить картинку» сразу под ней слипались (владелец 29.09.2026: «здесь слились две ленты»):
   у .vzone нет отступа сверху, а у полосы — снизу. */
.myzone + .vzone { margin-top: 22px; }

/* ── «Пакет инфографики» (templates/v2/infographic.html, InfographicPage в static/js/v2/infographic.js; 29.09.2026) ──
   Раскладка шагов — film.css (.film--flow, .film__box), площадки фото — picture-tool.css (.drop). Здесь — поля разбора
   сеткой, JSON дизайна моноширинным, карточки слайдов и плитки готового пакета в формате кадра. */
.igx__f { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.igx__row { display: flex; flex-wrap: wrap; gap: 12px; }
.igx__row .igx__f { flex: 1 1 180px; }
.igx__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 12px; }
.igx__json { font: 500 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 180px; }
.igx__slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.igx__slides:empty { display: none; }
.igx__slide { display: grid; gap: 8px; padding: 12px; border-radius: var(--r); background: var(--raise); border: 1px solid var(--line); }
.igx__slide > header { display: flex; align-items: center; gap: 8px; }
.igx__slide > header > b { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; }
.igx__slide > header .finp { flex: 1; font-weight: 700; }
.igx__slide > p { margin: 0; font-size: 13px; }
.igx__out { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.igx__out:empty { display: none; }
.igx__res { display: grid; gap: 6px; align-content: start; font-size: 13px; }
.igx__pic { border-radius: 10px; overflow: hidden; background: var(--raise); display: grid; place-items: center; }
.igx__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.igx__st { display: grid; justify-items: center; gap: 8px; padding: 12px; text-align: center; color: var(--ink-2); font-size: 12px; }
.igx__acts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 520px) { .igx__slides { grid-template-columns: 1fr; } .igx__out { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.igx__st .pout__spin { width: 28px; height: 28px; border-width: 3px; }
.pscen { margin-top: 0; } .pscen > .h2 { margin: 0 0 12px; }

/* Ход работы нейросети под кнопкой «Пакета инфографики» (InfographicPage.wait, 29.09.2026) */
.igx__wait { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.igx__wait small { color: var(--ink-2); font-size: 13px; }

/* Галочка «Генерировать» у слайда (была «В пакете») и предложения нейросети по примерам (InfographicPage.drawSlides, 29.09.2026) */
.igx__on { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.igx__why { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--accent); }
.igx__why .ic { width: 14px; height: 14px; flex: none; }


/* Фото в площадках «Пакета инфографики» открываются крупно по нажатию (PictureViewer) */
.igx .drop__it img { cursor: zoom-in; }

/* Метка «готов» у расписанного слайда, который уже нарисован (InfographicPage.drawSlides, 29.09.2026) */
.igx__done { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #1b7a3d; background: color-mix(in srgb, #2fa86b 16%, transparent); }

/* Кнопки стандартных пожеланий к виду в шаге «Дизайн» (29.09.2026) */
.igx__wishes { flex-wrap: wrap; }

/* Готовый слайд пакета — кнопка во весь блок, открывает PictureViewer (29.09.2026) */
.igx__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.igx__zoom img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Ряд под слайдами: «Добавить слайд» и «Придумать ещё слайды» (29.09.2026) */
.igx__more { display: flex; flex-wrap: wrap; gap: 8px; }

/* Вкладки вариантов слайдов (InfographicPage.drawSets, 29.09.2026): вид — общий .lib__tab, крестик закрытия */
.igx__sets { margin: 4px 0 12px; }
.igx__setx { margin-left: 4px; padding: 0 4px; font-style: normal; font-size: 16px; line-height: 1; opacity: .6; cursor: pointer; }
.igx__setx:hover { opacity: 1; }

/* «Создать копию проекта» — справа в шапке пакета (29.09.2026) */
.igx__copy { margin-left: auto; }

/* Люди на слайде — пара файлов «с женщиной / с мужчиной» (29.09.2026) */
/* «В кадре» у карточки слайда (infographic.js drawSlides): товар, женщина, мужчина — галочками в ряд */
.igx__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 2px 0 8px; font-size: 14px; font-weight: 700; }
.igx__who > span { font-size: 13px; color: var(--ink-2); }
.igx__who label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* подпись версии готового слайда: «с женщиной», «прежний» */
.igx__cap { font-size: 12px; font-weight: 700; color: var(--ink-2); }
/* «или» / «и» между «Женщина» и «Мужчина» у слайда — нажатие меняет: два файла или один с обоими */
.igx__and { min-width: 44px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.igx__and[data-v="1"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
/* главная картинка пакета (infographic.js drawOut): звезда в углу плитки и метка «Главная» */
.igx__pic { position: relative; }
.igx__star { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45);
  color: #fff; font-size: 18px; line-height: 34px; cursor: pointer; }
.igx__star.is-on { background: #f5b301; color: #1a1300; }
.igx__mainb { position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: 8px; background: #f5b301; color: #1a1300; font-size: 12px; font-weight: 800; }
.igx__res.is-main .igx__pic { outline: 3px solid #f5b301; outline-offset: 2px; }
/* Узкий экран (владелец 30.09.2026: «в мобильной версии картинки иногда друг на друга налазят, с правой на левую, и кнопки
   „Переделать · сумма“ тоже залазят»): ячейка сетки по умолчанию не уже своего содержимого (min-width: auto), и кнопка
   «Переделать · 31,4 ₽» в одну строку распирала плитку шире колонки — она наезжала на соседнюю. Ячейка может сжиматься,
   кнопки занимают всю ширину плитки и переносят текст. */
.igx__res { min-width: 0; }
.igx__res > b { overflow-wrap: anywhere; }
.igx__acts .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: 6px; }
@media (max-width: 520px) {
  .igx__out { gap: 10px; }
  .igx__acts { flex-direction: column; }
  .igx__acts .btn { width: 100%; padding-inline: 8px; }
}
/* Слайды пакета на широком экране — горизонтальными полосами во всю ширину, три поля («Написано», «Как подано»,
   «Расположение») одной строкой рядом (владелец 30.09.2026: «в десктопной версии эти квадраты делать горизонтальными»,
   «эти публиковать горизонтально одной строкой»). Узкий экран — столбиком, как было. */
.igx__fields { display: grid; gap: 8px; }
@media (min-width: 900px) {
  .igx__slides { grid-template-columns: 1fr; }
  .igx__slide > header .finp { flex: 0 1 420px; }
  .igx__slide > header .fx { margin-left: auto; }   /* корзина — к правому краю полосы */
  .igx__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .igx__fields .igx__f { grid-template-rows: auto 1fr; }
  .igx__fields textarea { min-height: 120px; height: 100%; resize: vertical; }
}
/* «Готовые сценарии картинок» — две карточки в ряд (.vpair), но кнопка справа от текста, как у одиночной карточки
   (владелец 30.09.2026: «кнопки сделай справа от текста, как это было у остальных»); .vpair студии «Видео» ставит
   кнопку под текстом — здесь переопределено только внутри .pscen */
.pscen .vpair .make { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.pscen .vpair .make__btn { margin-top: 0; flex-shrink: 0; }
@media (max-width: 560px) { .pscen .vpair .make { flex-direction: column; align-items: flex-start; } }