/* Страница инструмента студии «Картинки» (templates/v2/picture_tool.html, класс PictureTool).
   Слева — форма шагами (фото, варианты, пожелания, свёрнутые настройки, цена и кнопка), справа —
   панель результата, прилипает при прокрутке: пример «было/стало» → ход работы → готовая картинка.
   Токены и общие детали (.btn, .h1, .h2, .sec, .pstrip) — из app.css и pictures.css. */

.ptool__head { margin-bottom: 22px; }
.ptool__head .muted { max-width: 60ch; margin: 8px 0 0; font-size: 15px; line-height: 1.5; }
.ptool__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }

/* ── Шаги формы ── */
.ptool__form { display: grid; gap: 14px; min-width: 0; }
.pstep { padding: 18px 18px 20px; border-radius: var(--r); background: var(--raise); }
.pstep[hidden] { display: none; }
.pstep__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 12px; font: 800 17px/1.25 var(--f-head); font-stretch: var(--head-stretch); }
.pstep__h small { font: 600 12px/1 var(--f); color: var(--ink-2); }
.pstep__n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--panel);
  font: 800 12px/1 var(--f); flex: none; align-self: center; }
.pstep__hint { margin: -6px 0 12px; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.pstep__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.pcount { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.plink { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
.plink .ic { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .plink:hover { text-decoration-color: var(--ink); } }

/* Поля ввода */
.pfield__area, .pfield__input, .pfield__select { width: 100%; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: 400 15px/1.45 var(--f); padding: 10px 12px; }
.pfield__area { resize: vertical; min-height: 64px; }
.pfield__area--big { min-height: 132px; font-size: 16px; }
.pfield__select { min-height: 42px; padding: 0 10px; }
.pfield__area:focus, .pfield__input:focus, .pfield__select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.pfield__area::placeholder, .pfield__input::placeholder { color: var(--ink-2); opacity: 0.8; }

/* ── Фото: площадка загрузки и миниатюры ── */
.drop { display: grid; gap: 10px; }
.drop__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.drop__list:empty { display: none; }
.drop__it { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; background: var(--panel); }
.drop__it img { width: 100%; height: 100%; object-fit: cover; }
.drop__it.is-loading img { opacity: 0.45; }
.drop__it.is-loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgb(255 255 255 / 0.5); border-top-color: var(--accent); animation: pspin 800ms linear infinite; }
.drop__rm { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: rgb(0 0 0 / 0.62); color: #fff; }
.drop__rm .ic { width: 14px; height: 14px; }
.drop__add { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--ink-2) 55%, transparent);
  background: var(--panel); cursor: pointer; text-align: center; transition: border-color 160ms ease, background-color 160ms ease; }
.drop__add .ic { width: 28px; height: 28px; color: var(--accent); margin-bottom: 2px; }
.drop__add b { font-size: 15px; }
.drop__add small { font-size: 12px; color: var(--ink-2); }
.drop__add.is-over, .drop__add:focus-within { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
@media (hover: hover) and (pointer: fine) { .drop__add:hover { border-color: var(--ink); } }
.drop.is-full .drop__add, .drop.is-full .drop__acts { display: none; }
.drop.has-files .drop__add { padding: 12px 16px; grid-auto-flow: column; justify-content: center; align-items: center; gap: 8px; }
.drop.has-files .drop__add small { display: none; }
.drop.has-files .drop__add .ic { width: 20px; height: 20px; margin: 0; }
.drop__acts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.drop__cam { display: none; }
@media (hover: none) and (pointer: coarse) { .drop__cam { display: inline-flex; } }

/* ── Варианты выбора: пилюли-радио ── */
.popts { display: flex; flex-wrap: wrap; gap: 8px; }
.popts--col { display: grid; gap: 6px; }
.popt { position: relative; cursor: pointer; }
.popt input { position: absolute; opacity: 0; pointer-events: none; }
.popt > span { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; transition: background-color 150ms ease, box-shadow 150ms ease, color 150ms ease; }
.popt em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--ink-2); }
.popt input:checked + span { background: var(--ink); color: var(--panel); box-shadow: none; }
.popt input:checked + span em { color: color-mix(in srgb, var(--panel) 75%, transparent); }
.popt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .popt:hover input:not(:checked) + span { box-shadow: inset 0 0 0 1px var(--ink-2); } }
.popt--wide > span { display: grid; gap: 2px; justify-items: start; min-height: 0; padding: 10px 14px; border-radius: 12px; }
.popt--wide small { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.popt--wide input:checked + span small { color: color-mix(in srgb, var(--panel) 75%, transparent); }

/* ── Настройки качества — свёрнуты ── */
.pset { border-radius: var(--r); background: var(--raise); }
.pset summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.pset summary::-webkit-details-marker { display: none; }
.pset summary > span { display: grid; gap: 2px; }
.pset summary b { font-size: 15px; }
.pset summary small { font-size: 13px; color: var(--ink-2); }
.pset summary .ic { width: 18px; height: 18px; color: var(--ink-2); transition: transform 200ms ease; }
.pset[open] summary .ic { transform: rotate(90deg); }
.pset__body { display: grid; gap: 16px; padding: 4px 18px 18px; }
.pset__row { display: grid; gap: 8px; }
.pset__row[hidden], .pset__body [hidden] { display: none; }
.pset__l { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-2); }
.pcheck { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.pcheck input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.pcheck em { font-style: normal; color: var(--ink-2); }

/* ── Цена и кнопка ── */
.pgo { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0;
  background: linear-gradient(to top, var(--app) 70%, transparent); }
[data-skin="stream"] .pgo { background: linear-gradient(to top, var(--panel) 70%, transparent); }
.pgo__cost { display: grid; gap: 2px; }
.pgo__cost b { font: 800 22px/1 var(--f-head); font-stretch: var(--head-stretch); font-variant-numeric: tabular-nums; }
.pgo__cost small { font-size: 12px; color: var(--ink-2); }
.pgo__cost a { color: var(--ink); text-decoration: underline; }
.pgo__btn { min-height: 50px; padding: 0 26px; font-size: 16px; }
.pgo__btn .ic { width: 18px; height: 18px; }
.pgo__btn:disabled { opacity: 0.55; cursor: progress; transform: none; }
.perr { margin: -4px 0 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, #d8452f 14%, var(--raise)); color: var(--ink); font-size: 14px; font-weight: 600; }

/* ── Панель результата ── */
.ptool__out { position: sticky; top: 76px; min-width: 0; }
.pout[hidden] { display: none; }
.pout__example { position: relative; margin: 0; }
.pout__example img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 18px 40px -22px rgb(0 0 0 / 0.5); }
.pout__example figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.snaptag { position: absolute; top: 10px; padding: 5px 8px; border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgb(255 255 255 / 0.92); color: #10183d; }
.snaptag--a { left: 10px; } .snaptag--b { left: calc(50% + 8px); background: var(--accent); color: var(--on-accent); }
[data-skin="cassette"] .snaptag--b { color: #fff; }
.pout__empty { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; border-radius: var(--r); background: var(--raise); text-align: center; }
.pout__empty .ic { width: 40px; height: 40px; color: var(--ink-2); }
.pout__empty b { font: 800 18px/1.2 var(--f-head); font-stretch: var(--head-stretch); }
.pout__empty--err { background: color-mix(in srgb, #d8452f 10%, var(--raise)); }
.pout__run { display: grid; justify-items: center; gap: 12px; padding: 44px 24px; border-radius: var(--r); background: var(--raise); text-align: center; }
.pout__run b { font: 800 18px/1.2 var(--f-head); font-stretch: var(--head-stretch); font-variant-numeric: tabular-nums; }
.pout__run .muted { max-width: 42ch; font-size: 13px; line-height: 1.45; }
.pout__spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent); animation: pspin 900ms linear infinite; }
@keyframes pspin { to { transform: rotate(360deg); } }
.pout__bar { width: min(100%, 320px); height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
/* Полоса хода — через transform, а не width: без перерасчёта раскладки на каждом шаге */
.pout__bar i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--accent); transform-origin: left center; transform: scaleX(0.04);
  transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); }
.pout__imgs { display: grid; gap: 8px; }
.pout__imgs.is-many { grid-template-columns: 1fr 1fr; }
.pout__imgs a { display: block; border-radius: var(--r); overflow: hidden; background: var(--raise); }
.pout__imgs img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; }
/* Исходник видео на странице работы (28.09.2026): картинка с подписью «Исходник» поверх нижнего края */
.pview__src { position: relative; margin: 0; }
.pview__src figcaption { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: rgb(0 0 0 / 0.55); pointer-events: none; }
/* Готовое видео (PictureTool.done, 28.09.2026) — во всю ширину панели, не выше экрана */
.pout__imgs video, .pview__video { display: block; width: 100%; height: auto; max-height: 72vh; border-radius: var(--r); background: #000; }
.pout__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pout__acts .ic { width: 16px; height: 16px; }

/* ── Окна: свои картинки, прошлые описания ── */
.ppick__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ppick__grid button { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--raise); position: relative; }
.ppick__grid img { width: 100%; height: 100%; object-fit: cover; }
.ppick__grid button.is-on { outline: 3px solid var(--accent); outline-offset: -3px; }
.ppick__grid button.is-on::after { content: '✓'; position: absolute; inset: auto 6px 6px auto; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 13px; }
.phist { display: grid; gap: 6px; }
.phist__it { text-align: left; padding: 10px 12px; border-radius: 10px; background: var(--raise); font-size: 14px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) { .phist__it:hover { background: var(--hover); } }

@media (max-width: 900px) {
  .ptool__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ptool__out { position: static; order: -1; }
  .ptool__out .pout[data-out="idle"] { display: none; }        /* на телефоне пример не отнимает первый экран */
  .pstep { padding: 16px 14px 18px; }
  .pgo { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); padding: 12px 0; }
  .pgo__btn { flex: 1; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pout__spin, .drop__it.is-loading::after { animation-duration: 2.4s; }
  .pout__bar i, .pset summary .ic { transition: none; }
}

/* Полоса своих картинок в инструменте: плитка — кнопка «взять образцом» с плюсом; сторож подгрузки (ImageFeed) */
button.pstrip__a { position: relative; width: 100%; padding: 0; border: 0; cursor: pointer; }
.pstrip__plus { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 14px -6px rgb(0 0 0 / 0.6); transition: transform 160ms ease-out; }
.pstrip__plus .ic { width: 16px; height: 16px; }
button.pstrip__a.is-on { outline: 3px solid var(--accent); outline-offset: -3px; }
button.pstrip__a:active .pstrip__plus { transform: scale(0.9); }
.ifeed__sentinel { width: 1px; min-height: 1px; list-style: none; }
/* окно «Выбрать из моих картинок» (PictureTool.pickMine): прокручивает само окно V2Sheet — своей прокрутки нет,
   иначе полос две; имя .ppick, а не .pmine (это раскладка страницы «Мои картинки», pictures.css) */
.ppick { min-width: 0; }

/* Предложение открыть доступ к готовому рилсу (PictureTool.offerShare, 28.09.2026) */
.pshare { display: grid; gap: 6px; margin-top: 12px; padding: 14px 16px; border-radius: var(--r); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.pshare[hidden] { display: none; }
.pshare b { font-size: 15px; }
.pshare span { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; overflow-wrap: anywhere; }
.pshare a { color: var(--ink); text-decoration: underline; }
.pshare__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Пример видео-инструмента (28.09.2026): две вертикальные половины 9:16 — исходник и идущее видео, подписи над каждой */
.pout__example--vid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pout__example--vid figcaption { grid-column: 1 / -1; }
.pout__half { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r); background: #0b0e1a; }
.pout__half img, .pout__half video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pout__half .snaptag { position: absolute; top: 10px; left: 10px; }

/* «Как создано» на странице ролика (templates/v2/picture_view.html, services/gen_params.py) */
.pmade { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--raise); display: flex; flex-direction: column; gap: 10px; }
.pmade__h { margin: 0; font: 600 14px/1.3 var(--f); color: var(--ink-2); }
.pmade__h b { color: var(--ink); }
.pmade__list { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.pmade__list div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.pmade__list dt { color: var(--ink-2); }
.pmade__list dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.pmade .btn { align-self: flex-start; }