/* Кабинет, сайт и Mini App — один дизайн. Ширина до 760 px и Mini App — мобильная раскладка с нижним меню.
   Тема: в браузере — по системе, в Mini App — по теме Telegram (data-theme ставит app.js). */
@font-face { font-family: "Manrope"; src: url("/static/fonts/Manrope.ttf") format("truetype");
  font-weight: 200 800; font-display: swap; }

:root {
  --bg: #f3f3f6; --elev: #ffffff; --soft: #eeeef3; --soft-2: #e6e6ee;
  --text: #0f0f14; --muted: #62626e; --faint: #9b9ba6;   /* muted — 4,5:1 и на --soft-2 (Lighthouse) */
  --line: rgba(15, 15, 20, .08); --line-2: rgba(15, 15, 20, .14);
  --link: #6b46ff;
  --b1: #ff6a3d; --b2: #ff2e7e; --b3: #8a5cff;
  --grad: linear-gradient(135deg, var(--b1) 0%, var(--b2) 52%, var(--b3) 100%);
  --grad-soft: linear-gradient(135deg, rgba(255,106,61,.12), rgba(255,46,126,.12) 52%, rgba(138,92,255,.12));
  --on-grad: #ffffff;
  --ok: #129b4f; --ok-bg: rgba(18,155,79,.12);
  --warn: #c27a06; --warn-bg: rgba(214,140,10,.14);
  --bad: #e0244f; --bad-bg: rgba(224,36,79,.11);
  --top: rgba(243, 243, 246, .78);
  --shadow: 0 1px 2px rgba(15,15,25,.04), 0 10px 30px -12px rgba(15,15,25,.12);
  --shadow-cta: 0 10px 24px -10px rgba(255, 46, 126, .55);
  --r: 20px; --r-sm: 12px;
  --tabbar-h: 64px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090c; --elev: #141419; --soft: #1c1c23; --soft-2: #25252e;
    --text: #f4f4f7; --muted: #9d9daa; --faint: #6e6e7a;
    --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
    --link: #a993ff; --top: rgba(9, 9, 12, .72);
    --ok: #3ddc84; --ok-bg: rgba(61,220,132,.13); --warn: #f5b041; --warn-bg: rgba(245,176,65,.14);
    --bad: #ff5c7f; --bad-bg: rgba(255,92,127,.13);
    --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px -14px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #09090c; --elev: #141419; --soft: #1c1c23; --soft-2: #25252e;
  --text: #f4f4f7; --muted: #9d9daa; --faint: #6e6e7a;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.14);
  --link: #a993ff; --top: rgba(9, 9, 12, .72);
  --ok: #3ddc84; --ok-bg: rgba(61,220,132,.13); --warn: #f5b041; --warn-bg: rgba(245,176,65,.14);
  --bad: #ff5c7f; --bad-bg: rgba(255,92,127,.13);
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 30px -14px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* --- основа --- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
/* вбок страница не листается никогда (жалоба 2026-10-09: Mini App на iPhone уезжал вбок): что шире экрана — обрезается,
   а не сдвигает всю страницу; clip не делает html прокручиваемым блоком — липкое превью работает */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html { overflow-x: clip; } }
/* высота — видимая часть экрана (dvh): 100vh на телефоне выше видимого (под панелями браузера) — пустой экран просил
   скролла (владелец 2026-10-13) */
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font: 500 16px/1.5 "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.2; margin: 0; }
h1 { font-size: 30px; font-weight: 800; }
h2 { font-size: 20px; font-weight: 750; margin: 28px 0 12px; }
h3 { font-size: 16px; font-weight: 700; margin: 18px 0 8px; }
p { margin: 10px 0; }
code { font: 13px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--soft); padding: 2px 6px;
  border-radius: 6px; word-break: break-all; }
ul, ol { padding-left: 20px; } li { margin: 4px 0; }
.ic { width: 20px; height: 20px; flex: none; vertical-align: -4px; }
.muted { color: var(--muted); } .hint { color: var(--ok); } .error { color: var(--bad); }
.small { font-size: 14px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
::selection { background: rgba(255, 46, 126, .22); }

/* --- шапка --- */
.top { position: sticky; top: 0; z-index: 20; background: var(--top); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
.top .wrap { max-width: var(--wrap); margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 20px; }
/* логотип крупнее (владелец 2026-10-13: «лого на сайте сделай больше в моб и десктоп версиях») */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-weight: 800; font-size: 23px;
  letter-spacing: -.03em; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 44px; height: 44px; border-radius: 11px; display: block; box-shadow: var(--shadow-cta); }
.logo-text { white-space: nowrap; }
.logo-sub { margin-left: 6px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
/* телефон: название в две строки — «Cutusha» и мельче «Reels · Shorts · TikTok» (2026-10-08, имя — 2026-10-11) */
@media (max-width: 760px) {
  .logo { font-size: 20px; gap: 10px; }
  .logo-mark { width: 40px; height: 40px; border-radius: 10px; }
  .logo-text { line-height: 1.08; }
  .logo-sub { display: block; margin-left: 0; font-size: 12.5px; }
}
.top nav { display: flex; gap: 4px; margin-left: 12px; }
.top nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; color: var(--muted);
  font-weight: 650; font-size: 15px; transition: background .15s, color .15s; }
.top nav a:hover { color: var(--text); background: var(--soft); text-decoration: none; }
.top nav a.active { color: var(--text); background: var(--soft-2); }
.top .spacer { flex: 1; }
.top .side { display: flex; gap: 8px; align-items: center; }
.theme-flip { width: 38px; padding: 0 !important; justify-content: center; }
.theme-flip svg { width: 19px; height: 19px; }
/* узкий экран у гостя: тема, «Войти» и «Бот» (значком) — в одну строку с названием */
@media (max-width: 420px) {
  .top .wrap { gap: 8px; }
  .top .side { gap: 6px; }
  .top .side .bot-t { display: none; }
  .top .side a[aria-label="Бот в Telegram"] { width: 38px; padding: 0; justify-content: center; }
}
.theme-flip svg + svg, :root[data-theme="dark"] .theme-flip svg:first-child { display: none; }
:root[data-theme="dark"] .theme-flip svg + svg { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-flip svg:first-child { display: none; }
  :root:not([data-theme="light"]) .theme-flip svg + svg { display: block; }
}

/* --- нижнее меню (телефон и Mini App) --- */
.tabbar { display: none; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: var(--top); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
.tabbar .in { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 520px; margin: 0 auto; }
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; color: var(--faint);
  font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.tabbar a:hover { text-decoration: none; }
.tabbar a .ic { width: 24px; height: 24px; }
.tabbar a.active { color: var(--text); }
.tabbar a.plus .bub { width: 46px; height: 32px; border-radius: 12px; background: var(--grad); color: #fff; display: grid;
  place-items: center; box-shadow: var(--shadow-cta); }
.tabbar a.plus .ic { width: 22px; height: 22px; }
.tabbar a.plus.active { color: var(--text); }

/* --- страница --- */
/* одна ширина у шапки, страниц и подвала (владелец 2026-10-13: «в ПК-версии — нормальную единую ширину вёрстки,
   адаптивную»; было — шапка 1120 px, страницы 760 px по центру, края не совпадали): --wrap и одни поля 24 px (телефон —
   16 px), страница занимает всю ширину; узкое — только текст документов и формы входа (.card.narrow) */
:root { --wrap: 1120px; }
main { flex: 1 0 auto; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 32px 24px 56px; }
.page, .page.wide { max-width: none; margin: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 20px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); margin: 8px 0 0; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 650; font-size: 14px; margin-bottom: 14px; }
.back .ic { width: 18px; height: 18px; }
.back:hover { color: var(--text); text-decoration: none; }

.card { --pad: 24px; background: var(--elev); border: 1px solid var(--line); border-radius: var(--r); padding: var(--pad); margin: 0 0 16px;
  box-shadow: var(--shadow); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.card.flat { box-shadow: none; }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.card-head h2 { margin: 0; }
.chip-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-soft);
  color: var(--b2); flex: none; }
.chip-ic .ic { width: 20px; height: 20px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stack > * + * { margin-top: 12px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.big { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 4px 0; }

/* --- кнопки --- */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 0 20px; font: inherit; font-weight: 700; font-size: 15px; line-height: 1.2; border: 0; border-radius: var(--r-sm);
  background: var(--grad); color: var(--on-grad); cursor: pointer; text-decoration: none; margin: 4px 0;
  box-shadow: var(--shadow-cta); transition: transform .12s, filter .15s, box-shadow .15s, background .15s; white-space: nowrap; }
/* телефон: длинная надпись кнопки переносится, а не вылезает за экран («Настройки»: 424 px при экране 390) */
@media (max-width: 600px) { button, .button { white-space: normal; text-align: center; padding-top: 8px; padding-bottom: 8px; } }
button:hover, .button:hover { filter: brightness(1.06) saturate(1.05); text-decoration: none; transform: translateY(-1px); }
button:active, .button:active { transform: translateY(0) scale(.98); }
button:disabled { opacity: .5; cursor: default; transform: none; }
button:focus-visible, .button:focus-visible, a:focus-visible { outline: 3px solid rgba(255, 46, 126, .35); outline-offset: 2px; }
button.secondary, .button.secondary { background: var(--soft); color: var(--text); box-shadow: none; }
button.secondary:hover, .button.secondary:hover { background: var(--soft-2); filter: none; }
button.ghost, .button.ghost { background: transparent; color: var(--text); box-shadow: none; border: 1px solid var(--line-2); }
button.danger { background: var(--bad); box-shadow: none; }
/* ссылка в тексте — не только цветом (Lighthouse, WCAG 1.4.1): подчёркнута */
p a:not(.button), li a:not(.button), .small a:not(.button) { text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; }
button.link { background: none; color: var(--link); padding: 0; min-height: 0; font-weight: 650; box-shadow: none; margin: 0; }
button.link:hover { transform: none; text-decoration: underline; text-underline-offset: 3px; }
button.link.danger-link { color: var(--bad); }
button.link:disabled { color: var(--muted); text-decoration: none; cursor: default; opacity: 1; transform: none; }
.button.sm, button.sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.button.lg, button.lg { min-height: 54px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.button.block, button.block { width: 100%; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 4px; }
.actions form { margin: 0; }

/* --- формы --- */
label { display: block; margin: 14px 0; font-size: 14px; font-weight: 700; color: var(--text); }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 14px; color: var(--muted); }
label.check > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* правка текста (text_edit.html): варианты заголовка — строками, выбранный — ярче */
.text-edit label.check { margin: 8px 0; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 15px;
  color: var(--text); cursor: pointer; }
.text-edit label.check:has(input:checked) { border-color: var(--b2); background: var(--grad-soft); }
input, select, textarea { display: block; width: 100%; margin-top: 6px; font: inherit; font-weight: 550; font-size: 16px;
  color: var(--text); background: var(--soft); border: 1.5px solid transparent; border-radius: var(--r-sm);
  padding: 12px 14px; min-height: 48px; transition: border-color .15s, box-shadow .15s, background .15s; }
input::placeholder, textarea::placeholder { color: var(--faint); font-weight: 500; }
input:hover, select:hover, textarea:hover { background: var(--soft-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--b2); background: var(--elev);
  box-shadow: 0 0 0 4px rgba(255, 46, 126, .14); }
select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239b9ba6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 1px 0 0; flex: none;
  accent-color: var(--b2); }
input[readonly] { cursor: text; }
textarea.code { font: 13px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; }
form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
form.inline input, form.inline select { width: auto; flex: 1 1 160px; margin: 0; }
form.inline button { margin: 0; }
.field-row { display: flex; gap: 8px; align-items: center; }
.field-row input { margin: 0; flex: 1; min-width: 0; }
.field-row button { margin: 0; flex: none; }

/* --- списки --- */
.list-card { padding: 8px; }
.item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; color: var(--text);
  transition: background .15s; }
.item + .item { margin-top: 2px; }
a.item:hover { text-decoration: none; }
/* подсветка — только с мышью: на телефоне «наведение» залипало после касания при прокрутке — серая строка */
@media (hover: hover) { a.item:hover { background: var(--soft); } }
.item .grow { flex: 1; min-width: 0; }
.item .title { font-weight: 750; }
.item .meta { color: var(--muted); font-size: 14px; margin-top: 2px; }
.item .end { display: flex; align-items: center; gap: 10px; flex: none; color: var(--muted); font-size: 14px; font-weight: 650; }
.item .chev { color: var(--faint); width: 18px; height: 18px; }
.thumb { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: var(--grad-soft); color: var(--b2); }
.thumb.done { background: var(--ok-bg); color: var(--ok); }
.thumb.failed, .thumb.canceled { background: var(--bad-bg); color: var(--bad); }
.thumb.running, .thumb.queued, .thumb.awaiting_review { background: var(--warn-bg); color: var(--warn); }
.thumb.canceled { background: var(--soft-2); color: var(--muted); }
.thumb.awaiting_user { background: var(--grad); color: #fff; }
.thumb.running .ic { animation: pulse 1.2s ease-in-out infinite; }
/* «Ваши ролики»: у готового — обложка (кадр ролика) с ▶, строка статуса цветом (владелец 2026-10-13) */
/* обложка — 9:16 у всех одинаковая (владелец 2026-10-14: «почему разной высоты превью? все 9:16 должны быть»; 2026-10-13
   была высотой со строки текста — у длинных названий выше): 62 × 110 — как строки текста обычной карточки */
.thumb.pic { position: relative; width: 62px; height: auto; aspect-ratio: 9 / 16; align-self: flex-start; border-radius: 10px;
  overflow: hidden; background: var(--soft-2); }
/* текст — от верха обложки, а не по середине строки (владелец 2026-10-14: «текст должен сверху блока начинаться»);
   цена и стрелка — по центру */
.item:has(> .thumb.pic) > .grow { align-self: flex-start; padding-top: 2px; }
.thumb.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.pic .ov { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .22); }
.thumb.pic .ov .ic { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.item .meta + .meta { font-size: 13px; margin-top: 1px; }
.item .meta.st-done { color: var(--ok); }
.item .meta.st-failed { color: var(--bad); }
.item .meta.st-running, .item .meta.st-queued { color: var(--warn); }
.item.waiting { background: var(--grad-soft); }
.list-sep { border-top: 1px solid var(--line); margin: 6px 12px; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 750; padding: 4px 10px;
  border-radius: 999px; background: var(--soft); color: var(--muted); white-space: nowrap; vertical-align: middle; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.done { background: var(--ok-bg); color: var(--ok); }
.badge.failed, .badge.canceled { background: var(--bad-bg); color: var(--bad); }
.badge.running, .badge.queued, .badge.awaiting_review { background: var(--warn-bg); color: var(--warn); }
.badge.running::before { animation: pulse 1.2s ease-in-out infinite; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 750; padding: 4px 10px;
  border-radius: 999px; background: var(--grad-soft); color: var(--b2); }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
@keyframes pulse { 50% { opacity: .25; } }

.empty { text-align: center; padding: 44px 20px; }
.empty .chip-ic { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 16px; }
.empty .chip-ic .ic { width: 30px; height: 30px; }
.empty h2 { margin: 0 0 6px; }
.empty p { max-width: 420px; margin: 0 auto 18px; color: var(--muted); }

.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--soft);
  color: var(--muted); font-size: 14px; margin: 14px 0; }
.note .ic { color: var(--faint); margin-top: 1px; }
.note.accent { background: var(--grad-soft); color: var(--text); }
.note.accent .ic { color: var(--b2); }
.note.good { background: var(--ok-bg); color: var(--text); }
.note.good .ic { color: var(--ok); }
.note.bad { background: var(--bad-bg); color: var(--text); }
.note.bad .ic { color: var(--bad); }
.note p { margin: 0; }

/* --- форматы --- */
.fmts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
/* карточка формата: схема кадра слева (_fmt_art.html), текст справа, «Выбрать» — снизу на всю ширину; нажатие в любом
   месте карточки — «Выбрать» (кнопка растянута ::after на всю карточку; владелец 2026-10-13) */
/* «Выбрать» — у всех карточек ряда на одной высоте и одной высоты (владелец 2026-10-13): лишняя высота карточки — строке
   текста (1fr), кнопка — внизу; раньше её делили строки сетки, и ссылка «Выбрать» (1a) растягивалась, а кнопка в форме — нет */
.fmt { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: 1fr auto;
  gap: 12px 16px; padding: 20px; margin: 0; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.fmt:hover { border-color: var(--line-2); box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
.fmt:active { transform: scale(.99); }
.fmt-art { width: 64px; height: auto; color: var(--text); align-self: start; }
.fmt-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fmt .top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fmt h3 { margin: 0; font-size: 18px; }
.fmt p { margin: 0; color: var(--muted); font-size: 14.5px; }
.fmt-need { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; font-weight: 650; color: var(--text); }
.fmt-need .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--b2); }
.fmt .price { font-weight: 800; font-size: 18px; white-space: nowrap; }
.fmt-go { grid-column: 1 / -1; align-self: end; margin: 4px 0 0; }
.fmt-go button, .fmt .button.fmt-go { width: 100%; height: 50px; min-height: 50px; margin: 0; }
.fmt-go button::after, .fmt .button.fmt-go::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.fmt-go .chev { display: none; }
/* без сдвига у растянутой кнопки: transform сделал бы её саму рамкой ::after — область нажатия сжалась бы до кнопки */
.fmt-go button:hover, .fmt-go button:active, .fmt .button.fmt-go:hover, .fmt .button.fmt-go:active { transform: none; }

/* --- загрузка --- */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; padding: 34px 20px; margin: 16px 0 8px; border: 2px dashed var(--line-2); border-radius: var(--r);
  background: var(--soft); cursor: pointer; transition: border-color .15s, background .15s; font-weight: 600; color: var(--muted); }
.drop:hover, .drop:focus-within { border-color: var(--b2); background: var(--grad-soft); }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; margin: 0; }
.drop input[type=file]:disabled { cursor: default; }
.drop:has(input[type=file]:disabled) { opacity: .5; }
.drop .chip-ic { width: 56px; height: 56px; border-radius: 18px; background: var(--grad); color: #fff; margin-bottom: 6px;
  box-shadow: var(--shadow-cta); }
.drop .chip-ic .ic { width: 26px; height: 26px; }
.drop b { color: var(--text); font-size: 17px; font-weight: 750; }
.progress { height: 10px; background: var(--soft); border-radius: 999px; overflow: hidden; margin: 14px 0 6px; }
.progress .bar { height: 100%; width: 0; background: var(--grad); border-radius: 999px; transition: width .3s; }
#upload-msg { font-size: 14px; }

/* --- ролик --- */
.job { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: start; }
.job .side h1 { font-size: 26px; }
.phone { position: relative; aspect-ratio: 9 / 16; width: min(100%, calc(78vh * 9 / 16)); border-radius: 26px; overflow: hidden;
  background: #000; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5), 0 0 0 1px var(--line); margin: 0 auto; }
.phone video, .phone img { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.player { width: 100%; max-height: 72vh; border-radius: 16px; background: #000; display: block; }
.steps-live { list-style: none; padding: 0; margin: 18px 0; }
.steps-live li { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--faint); font-weight: 650; margin: 0; }
.steps-live .dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--soft); color: var(--faint); }
.steps-live .dot .ic { width: 16px; height: 16px; }
.steps-live li.done { color: var(--text); }
.steps-live li.done .dot { background: var(--ok-bg); color: var(--ok); }
.steps-live li.leased { color: var(--text); }
.steps-live li.leased .dot { background: var(--grad); color: #fff; }
.steps-live li.leased .dot::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff;
  border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.indet { height: 6px; border-radius: 999px; background: var(--soft); overflow: hidden; position: relative; margin: 16px 0; }
.indet::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 999px; background: var(--grad);
  animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* --- баланс --- */
.wallet { position: relative; overflow: hidden; background: var(--grad); color: #fff; border: 0;
  box-shadow: 0 24px 50px -24px rgba(255, 46, 126, .6); }
.wallet::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 70%); pointer-events: none; }
.wallet .label { opacity: .85; font-weight: 650; font-size: 14px; }
.wallet .big { color: #fff; font-size: 46px; }
.wallet .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wallet .chips span { background: rgba(255,255,255,.18); padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.wallet p { color: rgba(255,255,255,.88); font-size: 14px; }
.wallet .error { color: #fff; background: rgba(0,0,0,.18); padding: 8px 12px; border-radius: 10px; display: inline-block; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 92px; padding: 16px 18px;
  margin: 0; border-radius: 16px; background: var(--soft); color: var(--text); box-shadow: none; border: 1.5px solid transparent;
  text-align: left; white-space: normal; }
.pack:hover { background: var(--elev); border-color: var(--b2); filter: none; }
.pack b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.pack span { font-size: 13px; font-weight: 750; color: var(--b2); }
.pack.stat { cursor: default; }
.pack.stat:hover { background: var(--soft); border-color: transparent; transform: none; }
.hist { margin: 0; }
.hist .item { padding: 12px 6px; border-radius: 0; border-top: 1px solid var(--line); margin: 0; }
.hist .item:first-child { border-top: 0; }
.amt { font-weight: 800; white-space: nowrap; }
.amt.plus { color: var(--ok); } .amt.minus { color: var(--bad); }

/* --- таблицы (админка) --- */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  font-weight: 750; padding: 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.list td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr:hover td { background: var(--soft); }
td.num { text-align: right; white-space: nowrap; } td.minus { color: var(--bad); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--soft); border-radius: 16px; padding: 16px 18px; font-size: 14px; }
.stat > span { display: block; color: var(--muted); font-size: 12px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 6px; }
.stat b { font-size: 18px; }
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 20px; }
.subnav a { padding: 8px 14px; border-radius: 999px; background: var(--elev); border: 1px solid var(--line); color: var(--muted);
  font-weight: 700; font-size: 14px; }
.subnav a:hover { color: var(--text); text-decoration: none; }
.subnav a.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.page.wide .card > h1 { font-size: 22px; margin-bottom: 14px; }
.page.wide .card .subnav { margin-bottom: 12px; }
.page.wide .card .subnav a { background: var(--soft); border-color: transparent; }
.page.wide .card .subnav a.active { background: var(--text); color: var(--bg); }
details { margin: 14px 0; }
summary { cursor: pointer; font-weight: 700; padding: 8px 0; }

/* --- документы --- */
.legal { line-height: 1.65; overflow-x: auto; }
.legal > * { max-width: 760px; }                    /* строки документа — не длиннее 760 px: читать легче */
.legal h1 { font-size: 28px; margin-bottom: 16px; }
.legal table { border-collapse: collapse; width: 100%; font-size: 14px; }
.legal td, .legal th { border: 1px solid var(--line-2); padding: 8px; }
.legal blockquote { color: var(--muted); border-left: 3px solid var(--b2); margin: 0; padding-left: 12px; }

/* --- шрифты титров --- */
.fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.font-opt { position: relative; display: flex; flex-direction: column; gap: 6px; cursor: pointer; font-size: 13px; margin: 0;
  font-weight: 700; color: var(--muted); }
.font-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.font-opt img { width: 100%; height: auto; border-radius: 14px; border: 2.5px solid transparent; background: var(--soft);
  transition: border-color .15s, transform .15s; }
.font-opt:hover img { transform: translateY(-2px); }
.font-opt input:checked + img { border-color: var(--b2); box-shadow: 0 0 0 4px rgba(255, 46, 126, .14); }
.font-opt input:checked ~ span { color: var(--text); }
.font-opt input:focus-visible + img { outline: 3px solid rgba(255, 46, 126, .4); outline-offset: 2px; }
/* цвет титров: кружки цветов и пример поверх «кадра» (цвета примера — правила :has в _look.html) */
.swatches { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.swatches legend { padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.swatches legend { flex: 0 0 100%; }
.sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; margin: 0;
  cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cpick { border: 0; padding: 0; border-radius: 20px; background: var(--elev); color: var(--text); width: min(360px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.cpick::backdrop { background: rgba(0, 0, 0, .45); }
.cpick { max-height: calc(100dvh - 24px); overflow: auto; }
.cpick-box { padding: 16px; display: grid; gap: 12px; }
@media (max-height: 560px) { .cpick-sv { height: 120px; } }
.cpick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cpick-sv { --h: 0; position: relative; height: 180px; border-radius: 14px; touch-action: none; cursor: crosshair;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(calc(var(--h) * 1deg) 100% 50%)); }
.cpick-dot { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .3); pointer-events: none; }
.cpick-hue { width: 100%; height: 22px; margin: 0; border-radius: 11px; -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.cpick-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  border: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .3); }
.cpick-hue::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .3); }
.cpick-row { display: flex; align-items: center; gap: 12px; }
.cpick-sw { flex: 0 0 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line); }
.cpick-hexl { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 14px; }
.cpick-hex { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; }
.cpick-recent { display: flex; gap: 8px; flex-wrap: wrap; }
.cpick-recent:empty { display: none; }
.cpick-recent button { width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%; background: var(--c);
  border: 2px solid var(--line); box-shadow: none; }
.cpick-recent button.on { border-color: var(--b2); }
.cpick-go { display: flex; gap: 8px; justify-content: space-between; }
.cpick-go button { width: auto; flex: 1; }
.cpick-err, .cpick-msg { margin: 0; }
.cpick-msg:empty { display: none; }
.sw i { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 2px solid var(--line);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .08); transition: transform .15s; }
.sw i.auto { background: conic-gradient(#c9321f 0 25%, #ffd60a 0 50%, #2563eb 0 75%, #22c55e 0); }
/* подложка под фразами: плашка с надписью «Аа» её цветом; none — без заливки, пунктир */
.sw i.pl { width: 46px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-style: normal;
  font-size: 14px; font-weight: 800; color: var(--t, #fff); }
.sw i.pl.none { background: repeating-linear-gradient(135deg, #6b7280 0 6px, #9ca3af 0 12px); color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.sw i.pl.auto { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.sw:hover i { transform: scale(1.06); }
.sw input:checked + i { border-color: var(--b2); box-shadow: 0 0 0 4px rgba(255, 46, 126, .18); }
.sw input:checked ~ span { color: var(--text); }
.sw input:focus-visible + i { outline: 3px solid rgba(255, 46, 126, .4); outline-offset: 2px; }
/* «+ Свой цвет» — первым в каждой палитре (app.js addRails, окно .cpick; владелец 2026-10-14) */
button.sw-add { background: none; border: 0; padding: 0; min-height: 0; box-shadow: none; font-family: inherit;
  font-size: inherit; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.lookpick .sw.sw-add { font-size: 11.5px; }
.sw.sw-add i { position: relative; font-style: normal; font-size: 0;
  background: conic-gradient(from 90deg, #ff3b3b, #ffd60a, #22c55e, #22d3ee, #3b82f6, #a855f7, #ff3b3b); }
.sw-add i::after { content: "+"; position: absolute; inset: 6px; border-radius: 50%; background: var(--elev);
  display: grid; place-items: center; line-height: 1; font-size: 17px; font-weight: 700; color: var(--text); }
/* оформление ролика при заказе (_lookpick.html): превью сверху (телефон — закреплено, пока листаются варианты) */
.lookpick { display: grid; gap: 16px; }
.lp-preview { position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0 8px; background: var(--elev); }
.lp-preview p { margin: 0; }
body:not(.miniapp) .lp-preview { top: 57px; }             /* под липкой шапкой сайта; в Mini App шапки нет */
/* телефон: закреплённое превью — на всю ширину карточки, иначе по краям видно листаемое под ним (подписи кружков шире кружков) */
@media (max-width: 859px) { .card .lp-preview { margin: 0 calc(-1 * var(--pad)); padding-left: var(--pad); padding-right: var(--pad); } }
.lp-img { max-height: calc(100vh - 220px); }
.lp-img { display: block; height: min(46vh, 480px); width: auto; aspect-ratio: 9 / 16; border-radius: 16px; background: #000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: opacity .15s; object-fit: cover; }
.lp-img.loading { opacity: .55; }
.lp-empty { width: 100%; padding: 26px 16px; text-align: center; border: 1.5px dashed var(--line-2); border-radius: 16px; }
.lp-opts h3 { margin: 0 0 4px; font-size: 15px; }
/* оценка ролика (job.html): звёзды — кнопки формы */
.rate { display: flex; align-items: center; gap: 2px; margin: 16px 0 6px; flex-wrap: wrap; }
.rate .small { margin-right: 8px; }
.rate .star { background: none; border: 0; padding: 2px 4px; font-size: 30px; line-height: 1; color: var(--line-2);
  cursor: pointer; box-shadow: none; min-height: 0; }
.rate .star.on, .rate:hover .star { color: #f5b301; }
.rate .star:hover ~ .star { color: var(--line-2); }
.redo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.redo + p { margin-top: 6px; }
.regen { margin: 6px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--soft); }
.regen p { margin: 0 0 10px; }
.sec-title { font-size: 17px; margin: 18px 0 8px; }
/* battle моделей (battle.html): варианты рядом */
.battle { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.bt-var { display: flex; flex-direction: column; gap: 8px; }
.bt-var.win { border: 2px solid var(--b2); }
.bt-var h3 { margin: 0; }
.bt-var .phone video { width: 100%; }
.battle-pick { border: 0; padding: 0; margin: 14px 0 0; }
.battle-pick legend { padding: 0; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.battle-pick .check { margin: 4px 0; }
/* готовые сочетания цветов под видео (_lookpick.html, app.js lookPresets): мини-кадр с заголовком, фразой и акцентом */
.lp-presets { padding: 0 0 16px; margin-bottom: 4px; border-bottom: 1.5px solid var(--line); }
.lp-presets h3 { font-size: 18px; margin: 0 0 2px; }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.preset { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; margin: 0; min-height: 0;
  text-align: left; background: var(--elev); color: var(--text); border: 2px solid var(--line); border-radius: 14px;
  box-shadow: none; font-weight: 500; }
.preset:hover { transform: none; border-color: var(--line-2); }
.preset.on { border-color: var(--b2); box-shadow: 0 0 0 4px rgba(255, 46, 126, .14); }
.preset b { font-size: 14px; }
/* кнопка: у кнопок сайта перенос запрещён (white-space: nowrap) — описание выходило за карточку */
.preset, .preset b, .preset small { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
.preset { justify-content: flex-start; }
.preset small { font-size: 11.5px; color: var(--muted); line-height: 1.3; font-weight: 500; }
.pm { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px; border-radius: 10px;
  background: linear-gradient(160deg, #4b5563 0%, #1f2937 55%, #0b0f14 100%); }
.pm-t { font: 800 13px/1 system-ui, sans-serif; text-transform: uppercase; padding: 4px 6px; border-radius: 5px; }
.pm-p { font: 600 12px/1.2 system-ui, sans-serif; padding: 2px 6px; border-radius: 5px; }
.pm-a { padding: 0 3px; border-radius: 3px; }
/* фирменный стиль (_lookpick.html, brand.html): ссылка над выбором, свои шрифты и цвета — со звёздочкой */
.lp-brand { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--soft); color: var(--muted); }
.lp-brand a { font-weight: 700; white-space: nowrap; }
.brand-fonts .font-opt { cursor: default; }
.brand-fonts form { margin: 0; }
.brand-upload { display: grid; gap: 12px; margin-top: 14px; max-width: 520px; }
.palette { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.pal { display: flex; align-items: center; gap: 6px; margin: 0; }
.pal.new { opacity: .75; }
.pal input[type=color] { width: 46px; height: 38px; padding: 2px; margin: 0; border-radius: 10px; cursor: pointer; }
.err { color: var(--bad); }
.ok { color: var(--ok); }
/* блоки по ролям (_lookpick.html): заголовок, основной текст, рукопись, кадр и файл */
.lp-sec { padding: 16px 0 18px; border-top: 1.5px solid var(--line); }
.lp-sec:first-child { border-top: 0; padding-top: 0; }
.lp-sec h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 2px; }
.lp-sec h4 { margin: 14px 0 0; font-size: 14px; }
.lp-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--grad-soft);
  border: 1.5px solid var(--b2); font-size: 13px; }
.lp-field { display: block; margin-top: 14px; font-weight: 700; font-size: 14px; }
.lp-field select { display: block; margin-top: 6px; width: 100%; max-width: 340px; }
.lp-opts .fonts { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.seg { border: 0; padding: 0; margin: 14px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.seg legend { flex: 0 0 100%; padding: 0; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-block; padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--line-2); font-weight: 700;
  font-size: 14px; color: var(--muted); }
.seg input:checked + span { border-color: var(--b2); color: var(--text); background: var(--grad-soft); }
.seg input:focus-visible + span { outline: 3px solid rgba(255, 46, 126, .4); outline-offset: 2px; }
.lp-go { margin-top: 18px; }
@media (min-width: 860px) {
  .lookpick { grid-template-columns: 300px 1fr; align-items: start; gap: 28px; }
  body:not(.miniapp) .lp-preview, .lp-preview { top: 84px; background: none; }
  .lp-img { height: auto; width: 100%; }
}

.roles { list-style: none; padding: 0; margin: 10px 0 16px; }
.roles li { padding: 10px 14px; background: var(--soft); border-radius: 12px; margin: 6px 0; font-size: 14.5px; color: var(--muted); }
.roles li b { color: var(--text); }
.draft-item { background: var(--soft); align-items: flex-start; }
.draft-item + .draft-item { margin-top: 8px; }
form.caption { display: flex; gap: 8px; margin-top: 8px; }
form.caption input { flex: 1; min-width: 0; margin: 0; background: var(--elev); min-height: 40px; padding: 8px 12px; font-size: 15px; }
form.caption button { margin: 0; min-height: 40px; }

/* --- главная --- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center;
  padding: 28px 0 56px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--elev); border: 1px solid var(--line); font-size: 13px; font-weight: 750; color: var(--muted); box-shadow: var(--shadow); }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.hero h1 { font-size: clamp(36px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -.045em; margin: 18px 0 18px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 19px; color: var(--muted); max-width: 560px; line-height: 1.55; }
.hero .actions { margin-top: 26px; }
.perks { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 26px; color: var(--muted); font-size: 14px; font-weight: 650; }
.perks span { display: inline-flex; align-items: center; gap: 8px; }
.perks .ic { color: var(--ok); width: 18px; height: 18px; }

/* картинка первого экрана (landing.html .hero-art, владелец 2026-10-11) — вместо нарисованного мокапа */
.hero-art { position: relative; justify-self: center; width: min(380px, 100%); }
.hero-art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .28)); }

.section { margin: 0 0 56px; }
.section > h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.03em; margin: 0 0 8px; }
.section > .sub { color: var(--muted); margin: 0 0 22px; max-width: 620px; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steps3 .card { margin: 0; }
.steps3 .n { width: 36px; height: 36px; border-radius: 11px; background: var(--grad); color: #fff; display: grid; place-items: center;
  font-weight: 800; margin-bottom: 14px; box-shadow: var(--shadow-cta); }
.steps3 h3 { margin: 0 0 6px; font-size: 17px; }
.steps3 p { margin: 0; color: var(--muted); font-size: 14.5px; }
.feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.feats .card { margin: 0; padding: 20px; }
.feats .chip-ic { margin-bottom: 12px; }
.feats h3 { margin: 0 0 4px; font-size: 16px; }
.feats p { margin: 0; color: var(--muted); font-size: 14px; }
.cta-band { text-align: center; padding: 44px 24px; background: var(--grad); color: #fff; border: 0; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; margin: 0 0 8px; }
.cta-band p { color: rgba(255,255,255,.88); margin: 0 auto 20px; max-width: 520px; }
.cta-band .button { background: #fff; color: #111; box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); }

.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot .wrap { max-width: var(--wrap); margin: 0 auto; padding: 24px; display: flex; gap: 16px; justify-content: space-between;
  align-items: center; flex-wrap: wrap; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--muted); font-weight: 600; }
.foot a:hover { color: var(--text); }

/* --- телефон и Mini App --- */
@media (max-width: 900px) {
  /* картинка — сразу под заголовком (владелец 2026-10-11), дальше описание, кнопки, плюсы */
  .hero { display: flex; flex-direction: column; gap: 0; padding-top: 8px; }
  .hero-txt { display: contents; }
  .hero .eyebrow { align-self: flex-start; }
  .hero-art { order: 1; align-self: center; width: min(340px, 80%); margin: 4px 0 24px; }
  .hero .lead, .hero .actions, .hero .perks { order: 2; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job { grid-template-columns: 1fr; }
  .job .phone { width: min(100%, calc(62vh * 9 / 16)); }
}
@media (max-width: 760px) {
  body.has-tabbar .top nav, body.has-tabbar .top .side .cta { display: none; }
  body.has-tabbar .tabbar { display: block; }
  body.has-tabbar main { padding-bottom: calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom)); }
  body.has-tabbar .foot { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  .top .wrap { height: 56px; padding: 0 16px; }
  .top nav { display: none; }
  main { padding: 18px 14px 40px; }
  h1 { font-size: 26px; }
  .card { --pad: 18px; border-radius: 18px; }
  .page-head { margin-bottom: 16px; }
  .cols { grid-template-columns: 1fr; }
  .steps3 { grid-template-columns: 1fr; }
  .feats { grid-template-columns: 1fr; }
  .lead { font-size: 17px; }
  .subnav { flex-wrap: nowrap; overflow-x: auto; margin-left: -14px; margin-right: -14px; padding: 0 14px 2px; scrollbar-width: none; }
  .subnav a { flex: none; }
  .stat { padding: 12px 14px; }
  .item { padding: 12px; gap: 12px; }
  .wallet .big { font-size: 40px; }
  .section { margin-bottom: 40px; }
}

/* Mini App — всегда мобильная раскладка */
body.miniapp { min-height: var(--tg-viewport-stable-height, 100vh); }
body.miniapp .tabbar { display: block; }
body.miniapp main { max-width: 640px; padding: 16px 14px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); }
body.miniapp h1 { font-size: 26px; }
body.miniapp .card { --pad: 18px; border-radius: 18px; }
body.miniapp .cols, body.miniapp .job { grid-template-columns: 1fr; }
body.miniapp .job .phone { width: min(100%, calc(62vh * 9 / 16)); }
body.miniapp .fmts { grid-template-columns: 1fr; }
body.miniapp .item { padding: 12px; gap: 12px; }
body.miniapp .wallet .big { font-size: 40px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- онбординг (static/tour.js): приветствие из карточек и подсказка-стрелка у кнопки --- */
.tour-intro { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(9, 9, 12, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: tour-fade .2s ease-out; }
.tour-card { position: relative; width: 100%; max-width: 380px; background: var(--elev); color: var(--text);
  border-radius: 24px; padding: 30px 22px 20px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.tour-card h2 { margin: 8px 0 10px; font-size: 22px; }
.tour-card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.tour-card ul { margin: 0 auto; padding: 0; list-style: none; display: inline-block; text-align: left; font-size: 16px; }
.tour-card li { padding: 5px 0 5px 28px; position: relative; }
.tour-card li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.tour-emoji { font-size: 56px; line-height: 1; }
.tour-skip { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--faint);
  font-size: 14px; padding: 6px; box-shadow: none; min-height: 0; width: auto; }
.tour-dots { display: flex; gap: 6px; justify-content: center; margin: 20px 0 16px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: width .2s; }
.tour-dots i.on { width: 22px; border-radius: 4px; background: var(--grad); }
.tour-nav { display: flex; gap: 10px; }
.tour-nav button { flex: 1; }
.tour-target { position: relative; z-index: 2; animation: tour-ring 1.6s ease-out infinite; }
.tour-tip { position: fixed; z-index: 80; background: #5b3df5; color: #fff; border-radius: 16px; padding: 14px 16px 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35); font-size: 15px; line-height: 1.45; animation: tour-fade .2s ease-out; }
.tour-tip::before { content: ""; position: absolute; top: -7px; left: calc(var(--arrow, 50%) - 8px); width: 16px; height: 16px;
  background: inherit; transform: rotate(45deg); border-radius: 3px; }
.tour-tip.up::before { top: auto; bottom: -7px; }
.tour-tip p { margin: 0 0 10px; position: relative; }
.tour-tip-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
.tour-tip-row .sm { width: auto; background: #fff; color: #2b1d86; box-shadow: none; }
.tour-tip-row .link { color: rgba(255, 255, 255, .78); font-size: 13px; }
@keyframes tour-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 46, 126, .55); } 100% { box-shadow: 0 0 0 14px rgba(255, 46, 126, 0); } }
@keyframes tour-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* пипетка: цвет из кадра (app.js) */
.lp-pick-btn { margin-top: 6px; min-height: 38px; padding: 6px 14px; font-size: 14px; }
.lookpick.picking .lp-img { cursor: crosshair; outline: 3px solid var(--b2); outline-offset: 2px; }
.lp-pick { width: 100%; max-width: 360px; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.lp-pick p { margin: 0; }
.lp-pick-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lp-pick-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; }
.lp-pick-row .link { margin-left: auto; }
.lp-pick-q { font-weight: 700; margin-bottom: 6px !important; }
.lp-pick-to { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-pick-to button { min-height: 34px; padding: 4px 10px; font-size: 13px; font-weight: 650; background: var(--elev);
  color: var(--text); border: 1.5px solid var(--line-2); box-shadow: none; margin: 0; }
.lp-pick-msg:not(:empty) { margin-top: 8px !important; }
.lookpick.picking .lp-preview { position: static; }      /* с панелью пипетки превью не липнет: иначе на телефоне — весь экран */
@media (max-width: 859px) {
  .lp-pick-btn { min-height: 32px; padding: 4px 12px; font-size: 13px; }
  .lp-preview:has(.lp-pick-btn:not([hidden])) > p.muted { display: none; }   /* подпись — место кнопке */
}

/* несколько видео из галереи разом (upload.js batch): строка на видео — имя, полоса, состояние */
.batch { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.batch li { display: grid; gap: 4px; min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--soft); }
.batch .bt-name { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch .progress { margin: 0; height: 6px; background: var(--elev); }
.batch .bt-msg.ok { color: var(--ok); }
.batch .bt-msg.error { color: var(--bad); }
.drop-audio { margin-top: 10px; padding-top: 16px; padding-bottom: 16px; }
.drop-audio .chip-ic { font-size: 20px; }
/* «Баланс» после нехватки денег на заказ: ролик ждёт — назад (routes_cabinet.balance, deps.need_money) */
.pay-back { margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--soft); }
.pay-back p { margin: 0 0 8px; }
/* в карточке баланса (градиент, белый текст) — стеклом, кнопка белая (владелец 2026-10-13: на светлой подложке белый
   текст «Ваш ролик сохранён» не читался, кнопка висела без фона) */
.wallet .pay-back { position: relative; z-index: 1; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }
.wallet .pay-back p { color: #fff; }
.wallet .pay-back .button.secondary { width: auto; min-height: 42px; margin: 0; padding: 0 16px; background: #fff;
  color: #1d1d24; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }

/* своё место титров (app.js placeHandle): ручка «↕ Титры» и линия края текста поверх превью */
.lp-frame { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.lp-line { position: absolute; left: 6%; right: 6%; height: 0; border-top: 2px dashed rgba(255, 255, 255, .85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; opacity: 0; transition: opacity .15s; }
.lp-frame:hover .lp-line, .lp-frame.dragging .lp-line, .lp-frame:focus-within .lp-line { opacity: 1; }
.lp-drag { position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 2; min-height: 30px; padding: 4px 12px;
  margin: 0; font-size: 13px; line-height: 1.2; border-radius: 999px; background: rgba(9, 9, 12, .72); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .7); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); cursor: ns-resize;
  touch-action: none; user-select: none; -webkit-user-select: none; }
.lp-drag:hover { transform: translate(-50%, -50%); filter: none; }
.lp-frame.dragging .lp-drag { background: var(--b2); }
.lookpick.picking .lp-drag { display: none; }
@media (min-width: 860px) { .lp-frame { display: block; width: 100%; } }

/* ленты выбора (_lookpick.html .rail, app.js rails): шрифты, цвета, сочетания — в одну строку, листаются пальцем */
.rail-box { position: relative; min-width: 0; }
.rail { display: flex; flex-wrap: nowrap; gap: 6px 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding: 4px 2px 10px; margin: 0; scrollbar-width: thin; min-width: 0;
  -webkit-overflow-scrolling: touch; }
.rail > * { flex: 0 0 auto; scroll-snap-align: start; }
.swatches { display: block; }
.swatches legend { display: block; }
/* поля ленты — под рамку и свечение выбранного образца (владелец 2026-10-11: «сверху обрезано») */
.lp-opts .fonts.rail { display: flex; grid-template-columns: none; margin: 2px -6px 6px; padding: 8px 6px 10px; }
.fonts.rail .font-opt { width: 132px; }
.lp-presets .presets.rail { display: flex; margin-top: 8px; }
.lp-presets .presets.rail .preset { width: 158px; }
.rail-btn { display: none; position: absolute; top: calc(50% - 22px); width: 32px; height: 32px; min-height: 0; padding: 0;
  margin: 0; border-radius: 50%; background: var(--elev); color: var(--text); border: 1.5px solid var(--line-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); font-size: 20px; line-height: 1; z-index: 2; }
.rail-btn:hover { transform: none; }
.rail-btn.prev { left: -6px; } .rail-btn.next { right: -6px; }
@media (pointer: fine) {
  .rail-box:not(.at-start) .rail-btn.prev, .rail-box:not(.at-end) .rail-btn.next { display: grid; place-items: center; }
}
/* подсказка «листается» на телефоне (владелец 2026-10-13: «рядом со слайдерами — стрелочку справа, ненавязчивую,
   лёгкую и маленькую»; потом — «она стоит прямо на превью и не по центру: поставь отдельно справа и отцентрируй»):
   у ленты, которую можно листать, — своя узкая колонка справа, в ней маленький кружок со стрелкой по центру картинок
   ленты (app.js rails: --rail-mid — середина картинки первого образца), пару раз чуть качнётся; долистали до конца —
   гаснет (.at-end); лента влезает целиком — колонки нет. Нажатия не ловит */
@media (pointer: coarse) {
  .rail-box { display: flex; align-items: flex-start; }
  .rail-box > .rail { flex: 1 1 auto; margin-right: 0; }
  .rail-box::after { content: ""; flex: none; width: 22px; height: 22px; margin: calc(var(--rail-mid, 22px) - 11px) 0 0 4px;
    border-radius: 50%; pointer-events: none; transition: opacity .25s; animation: rail-nudge 1.4s ease-in-out .8s 2;
    background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
  .rail-box.at-end::after { opacity: 0; animation: none; }
  .rail-box.at-start.at-end::after { display: none; }
  /* вкладки, которые не влезли (app.js tabs: .more), — та же стрелка, прилипшая к правому краю ленты */
  .tabs-bar.more::after { content: ""; position: sticky; right: 0; flex: none; align-self: center; width: 20px;
    height: 20px; margin-left: -20px; border-radius: 50%; pointer-events: none; z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18); animation: rail-nudge 1.4s ease-in-out .8s 2;
    background: var(--elev) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
}
/* заголовок на месте титров (preview: X-Box seq; в ролике по очереди — первые секунды заголовок, потом титры).
   На одном месте: оба видны, титры — бледнее, заголовок поверх (владелец 2026-10-14: попеременный показ выглядел как
   «одна надпись исчезает»); тянут — та, что в руке, яркая */
.lp-frame.seq .lp-layer[data-layer=text] { opacity: .35; }
.lp-frame.seq .lp-layer[data-layer=title] { z-index: 2; }
.lp-frame.seq.dragging .lp-layer { opacity: .35; }
.lp-frame.seq.dragging .lp-layer.on { opacity: 1; }
@keyframes rail-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .rail-box::after, .tabs-bar.more::after, .m2 .lookpick.stage .stage-top::after { animation: none; }
}
/* «Ролики»: в работе — сверху; загруженные видео — строкой с кнопкой справа (владелец 2026-10-10) */
.live-note { margin: 8px 4px 0; }
.list-card.videos .item.vid { padding: 10px 12px; gap: 10px; }
.list-card.videos .item.vid .title { font-size: 15px; }
.list-card.videos .item.vid .button { flex: none; margin: 0; }

/* приложение на экране «Домой» (_install.html, app.js installUI) */
.install { display: flex; align-items: center; gap: 12px; }
.install[hidden] { display: none; }
.install-banner { padding: 12px 14px; margin: 0 0 14px; border-radius: 16px; background: var(--grad-soft);
  border: 1.5px solid var(--line); }
.install-ic { font-size: 26px; line-height: 1; flex: none; }
.install .grow { flex: 1; min-width: 0; }
.install .install-how { margin: 2px 0 0; }
.install .install-go { flex: none; margin: 0; }
.install .install-x { flex: none; font-size: 16px; color: var(--muted); padding: 4px; }
.install-card .install-t { display: none; }
@media (max-width: 480px) { .install { flex-wrap: wrap; } .install .install-go { width: 100%; } }
.tour-how { margin-top: 12px !important; font-size: 15px !important; color: var(--text) !important; }
.tour-install { margin-top: 12px; }
/* ленты не растягивают колонки: элементы сетки и секции — не шире своей колонки (иначе лента не листается, а раздвигает
   страницу) */
.lookpick > *, .lp-opts, .lp-sec, .lp-presets, .rail-box { min-width: 0; max-width: 100%; }
.lookpick { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .lookpick { grid-template-columns: 300px minmax(0, 1fr); } }

/* компактный выбор оформления (владелец 2026-10-10: «надо более компактный блок, иначе потеряться можно») */
/* подпись — до двух строк целыми словами (владелец 2026-10-11: «Как у те…», «Оранже…» обрезались): ширина кружка — по
   подписи, от 54 до 84 px; длиннее двух строк — многоточие */
.sw { width: auto; min-width: 54px; max-width: 84px; gap: 3px; font-size: 11px; }
.sw i { width: 30px; height: 30px; }
.sw i.pl { width: 40px; height: 28px; font-size: 12px; }
.sw span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 84px;
  white-space: normal; overflow-wrap: normal; word-break: normal; text-align: center; line-height: 1.15; }
.swatches { margin-top: 10px; }
.swatches legend { margin-bottom: 2px; font-size: 13.5px; }
.lp-sec { padding: 12px 0 12px; }
.lp-sec h4 { margin-top: 8px; font-size: 13.5px; }
.lp-opts .voices { margin-top: 8px; }
.lp-opts .voices p.muted { margin: 2px 0 0 32px; }
@media (max-width: 859px) {
  .lp-sec > p.muted, .lp-presets > p.muted { display: none; }       /* пояснения под заголовками — на телефоне лишние */
  .lp-brand { margin-bottom: 8px; padding: 8px 10px; }
}
.lp-drag { transform: translate(-50%, calc(-100% - 4px)); }
.lp-drag.below { transform: translate(-50%, 4px); }
.lp-drag:hover { transform: translate(-50%, calc(-100% - 4px)); }
.lp-drag.below:hover { transform: translate(-50%, 4px); }

/* остальной выбор — тоже лентами (владелец 2026-10-10): вид слов, строки титров, где текст, цвет кадра — таблетки;
   галочки (голоса, шум, качество) — переключатели в одну ленту, пояснение — строкой под ней (app.js toggles) */
.lp-opts .seg { display: block; margin: 10px 0 0; }
.lp-opts .seg legend { display: block; margin-bottom: 4px; font-size: 13.5px; }
.lp-opts .seg .rail { gap: 6px; padding: 2px 2px 4px; }
.lp-opts .seg label { position: relative; }               /* скрытый input — внутри ленты, а не раздвигает страницу */
.lp-opts .seg span { padding: 7px 14px; font-size: 14px; white-space: nowrap; }
.toggles .tg span { display: inline-flex; align-items: center; gap: 7px; }
.toggles .tg span::before { content: ""; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-2);
  flex: none; box-sizing: border-box; font-size: 12px; line-height: 13px; text-align: center; color: #fff; }
.toggles .tg input:checked + span::before { content: "✓"; background: var(--b2); border-color: var(--b2); }
.lp-opts .lp-hint { margin: 4px 0 0; }
.lp-opts .lp-field select { max-width: 100%; }
/* список не шире экрана и с длинным пунктом (iPhone: ширина select — по самому длинному пункту, 2026-10-11) */
.lp-field, .lp-field select { min-width: 0; max-width: 100%; }
.lp-field { contain: inline-size; }                  /* ширина — от колонки, а не от текста внутри */
.lp-field select { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
/* превью не впритык к выбору (владелец 2026-10-10): отступ под картинкой и над первым блоком */
.lp-preview { padding-top: 14px; padding-bottom: 14px; }
.lp-opts { padding-top: 6px; }
@media (min-width: 860px) { .lp-opts { padding-top: 0; } }

/* === Новый вид на телефоне — m2 (владелец 2026-10-11: «чтобы не приходилось много скроллить»; тест с откатом:
   настройка ui.m2 в админке и Профиль → «Вид приложения»). Разметка общая: [data-tabs]/[data-tab] — вкладки,
   [data-sheet] — строка с панелью снизу (app.js tabs, sheets). Без класса m2 или на широком экране — всё как было. === */
.tabs-bar, .sheet-row { display: none; }
/* вкладки на любом экране — у блока с классом tabs-all («Ваши ролики»: «Ролики» | «Черновики» и на компьютере, владелец
   2026-10-13: «черновики не внизу готовых, а в соседней вкладке») */
.tabbed.tabs-all > .tabs-bar { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 14px; border-radius: 14px;
  background: var(--soft); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabbed.tabs-all > .tabs-bar button { min-height: 38px; margin: 0; padding: 6px 18px; border-radius: 10px; border: 0;
  background: transparent; color: var(--muted); font-size: 14.5px; font-weight: 750; box-shadow: none; white-space: nowrap;
  transform: none; filter: none; }
.tabbed.tabs-all > .tabs-bar button:hover { color: var(--text); }
.tabbed.tabs-all > .tabs-bar button.on { background: var(--elev); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.tabbed.tabs-all > [data-tab]:not(.tab-on) { display: none; }
.tabbed.tabs-all > [data-tab] > .sec-title:first-child { display: none; }
@media (max-width: 760px) {
  .m2 .tabbed > .tabs-bar { display: flex; gap: 4px; padding: 4px; margin: 0 0 12px; border-radius: 14px;
    background: var(--soft); overflow-x: auto; scrollbar-width: none; }
  .m2 .tabbed > .tabs-bar::-webkit-scrollbar { display: none; }
  .m2 .tabs-bar button { flex: 1 0 auto; min-height: 36px; padding: 6px 12px; border-radius: 10px; border: 0;
    background: transparent; color: var(--muted); font-size: 14px; font-weight: 750; box-shadow: none; white-space: nowrap;
    transform: none; filter: none; }
  .m2 .tabs-bar button.on { background: var(--elev); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
  .m2 .tabbed > [data-tab]:not(.tab-on) { display: none; }
  /* заголовок части — уже на вкладке */
  .m2 .tabbed > [data-tab] > .sec-title:first-child, .m2 .tabbed > [data-tab] > h2:first-child,
  .m2 .tabbed > .lp-sec > h3 { display: none; }
  .m2 .tabbed > .lp-sec { border-top: 0; padding-top: 0; }
  .m2 .tabbed > .card[data-tab] > h2:first-child + * { margin-top: 0; }

  .m2 .sheet-src { display: none !important; }
  .m2 .sheet-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 14px;
    margin: 0 0 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--elev); color: var(--text);
    box-shadow: var(--shadow); text-align: left; font: inherit; transform: none; filter: none; }
  .m2 .sheet-row[hidden] { display: none; }
  .m2 .sheet-row:active { transform: scale(.99); }
  .sr-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none;
    background: var(--grad-soft); font-size: 18px; }
  .sr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .sr-t b { font-size: 15px; }
  .sr-t small { color: var(--muted); font-size: 13px; font-weight: 550; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .sr-go { color: var(--faint); font-size: 24px; line-height: 1; }

  /* плотнее: заголовки страниц и карточки */
  .m2 .page-head { margin-bottom: 10px; }
  .m2 .page-head h1 { font-size: 24px; }
  .m2 .page-head .sub { font-size: 14px; margin-top: 8px; line-height: 1.45; }   /* не впритык к заголовку (2026-10-11) */
  .m2 .card { --pad: 16px; margin-bottom: 12px; }

  /* оформление: вкладки «Настройки» | «Предпросмотр» (app.js splitUI), «Смонтировать» — под ними */
  .m2 .lp-tabs > .tabs-bar { padding: 3px; margin-bottom: 10px; }
  .m2 .lp-tabs > .tabs-bar button { min-height: 30px; padding: 3px 10px; font-size: 13px; border-radius: 9px; }
  /* «Новый ролик»: формат — строкой: название и цена, под ними описание и кнопка справа */
  /* телефон: схема | текст | «Выбрать» в строку, вся карточка нажимается (владелец 2026-10-13) */
  .m2 .fmt { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; gap: 4px 12px;
    padding: 12px 14px; margin: 0; }
  .m2 .fmt-go { align-self: center; }
  .m2 .fmt-art { width: 48px; align-self: center; }
  .m2 .fmt h3 { font-size: 16.5px; }
  .m2 .fmt .price { font-size: 16px; }
  .m2 .fmt-go { grid-column: auto; margin: 0; }
  /* нажимается вся карточка — вместо кнопки «Выбрать» стрелка, как в списках (текст — для экранного диктора) */
  .m2 .fmt-go button, .m2 .fmt .button.fmt-go { width: 32px; min-height: 32px; height: 32px; padding: 0; border-radius: 50%;
    background: var(--soft); color: var(--muted); box-shadow: none; }
  .m2 .fmt-go .fmt-go-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .m2 .fmt-go .chev { display: block; width: 18px; height: 18px; }
  /* «Баланс»: пакеты — по три в ряд */
  .m2 .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .m2 .pack { min-height: 64px; padding: 10px 12px; }
  .m2 .pack b { font-size: 17px; }
  .m2 .pack span { font-size: 12px; }
  /* вкладки оформления — закреплены сразу под превью: выбор и картинка всегда на экране */
  .m2 .lp-tabs > .tabs-bar { position: sticky; z-index: 3; top: calc(57px + var(--pv-h, 0px));
    box-shadow: 0 0 0 calc(var(--pad) - 1px) var(--elev); }
  .m2 body.miniapp .lp-tabs > .tabs-bar { top: var(--pv-h, 0px); }
  .m2 .lookpick.picking .lp-tabs > .tabs-bar { position: static; }
  /* пипетка — круглой кнопкой сбоку от превью; подпись — когда она включена */
  .m2 .lookpick:not(.picking) .lp-pick-btn { position: static; flex: none; width: 40px; height: 40px;
    min-height: 0; padding: 0; border-radius: 50%; font-size: 18px; }
  .m2 .lookpick:not(.picking) .lp-pick-btn span { display: none; }
  .m2 .lp-preview > p.muted { display: none; }
  /* сочетания цветов — меньше: без пояснения; ссылка на фирменный стиль — в Профиле */
  .m2 .lp-presets { padding-bottom: 10px; }
  .m2 .lp-presets h3 { font-size: 15px; }
  .m2 .lp-presets .presets.rail .preset { width: 128px; }
  .m2 .lp-presets .preset small { display: none; }
  .m2 .lp-brand { display: none; }
  .m2 .lp-go { position: sticky; bottom: calc(var(--tb, 0px) + 8px + env(safe-area-inset-bottom)); z-index: 4;
    margin: 12px calc(-1 * var(--pad)) 0; padding: 14px var(--pad) 6px;
    background: linear-gradient(to bottom, transparent, var(--elev) 34%); }
  .m2 .lp-go .lp-wait { margin: 4px 0 0; text-align: center; }
  .m2 body.has-tabbar, .m2 body.miniapp { --tb: var(--tabbar-h); }

  /* «Новый ролик»: форматы — компактными карточками, описание в две строки */
  .m2 .fmts { gap: 8px; }
  .m2 .fmt p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0; font-size: 13.5px; }
  .m2 .fmt-need { font-size: 12.5px; }

  /* готовый ролик: видео ниже, действия — сеткой по два */
  .m2 .job .phone { width: min(100%, calc(52vh * 9 / 16)); margin: 0 auto; }
  .m2 .job .side h1 { font-size: 20px; margin-top: 8px !important; }
  .m2 .job .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .m2 .job .actions > :first-child { grid-column: 1 / -1; }
  .m2 .job .actions .button, .m2 .job .actions button { min-height: 44px; font-size: 14px; padding: 8px 10px; }
  .m2 .job .redo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .m2 .job .redo .button { font-size: 14px; padding: 8px 10px; }
  .m2 .job .side > .note { padding: 8px 12px; font-size: 13px; }
}
/* панель снизу (app.js sheetShow) */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; }
.sheet-bg { position: absolute; inset: 0; background: rgba(8, 8, 12, .52); opacity: 0; transition: opacity .2s; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 640px; margin: 0 auto; max-height: 88vh;
  display: flex; flex-direction: column; background: var(--elev); border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .28); padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.sheet-wrap.on .sheet-bg { opacity: 1; }
.sheet-wrap.on .sheet { transform: none; }
.sheet-grab { flex: none; width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 8px auto 2px;
  touch-action: none; }
.sheet-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 16px 10px; touch-action: none; }
.sheet-head b { flex: 1; font-size: 18px; }
.sheet-x { min-height: 0; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--soft);
  color: var(--muted); box-shadow: none; font-size: 15px; }
.sheet-x:hover { transform: none; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 22px; }
.sheet-body > .card { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.sheet-body > .card > h2:first-child, .sheet-body > .note:first-child { margin-top: 0; }
.sheet-body > .card > h2:first-child { display: none; }
html.sheet-lock, html.sheet-lock body { overflow: hidden; }
/* Профиль → «Вид приложения» */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }
@media (max-width: 859px) { .card .lookpick > .lp-preview { max-width: none; } }

/* уже загруженные видео — взять без новой загрузки (владелец 2026-10-11; upload.html, draft.html) */
/* окно выбора (владелец 2026-10-11: «через попап»): на странице — крупная кнопка с числом, в окне — сетка превью */
.stored-open { margin: 14px 0 12px; gap: 10px; }        /* отступ до «Как снимать» (2026-10-11) */
.stored-open .ic { width: 22px; height: 22px; }
.stored-n { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 13px;
  font-weight: 800; }
.stored-pop { width: min(94vw, 520px); }
.stored-pop .stored { display: flex; flex-direction: column; max-height: 82vh; margin: 0; }
.sp-hint { margin: 0 16px 10px; }
.stored-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; padding: 4px 16px 12px;
  overflow-y: auto; }
.sp-foot { padding: 10px 16px 16px; border-top: 1px solid var(--line); }
.sp-foot .stored-go { margin: 0; }
.vid-opt { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; margin: 0; cursor: pointer;
  font-size: 12px; color: var(--muted); }
.vid-opt input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* без чёрной рамки (владелец 2026-10-11): выбранное — обводкой поверх, а не рамкой с фоном */
.vid-opt img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px;
  background: var(--soft); display: block; }
.vid-btn { width: 100%; }
.vid-opt span { margin-top: 6px; font-weight: 700; color: var(--text); font-size: 12.5px; }   /* отступ от превью */
.vid-opt small { font-size: 11.5px; line-height: 1.25; }
.vid-opt input:checked + img { outline: 3px solid var(--b2); outline-offset: 2px; }
.vid-opt input:checked ~ span::before { content: "✓ "; color: var(--b2); }
.vid-opt input:focus-visible + img { outline: 3px solid rgba(255, 46, 126, .4); outline-offset: 2px; }
.vid-btn { all: unset; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.vid-btn small { color: var(--link); font-weight: 700; }
.vid-btn:focus-visible img { outline: 3px solid rgba(255, 46, 126, .4); outline-offset: 2px; }
/* загрузилось — только превью и настройки (владелец 2026-10-11): «↺ Другое видео» у заголовка оформления; черновик с
   нужными файлами — загрузка свёрнута в «＋ Добавить ещё файлы» */
.lo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lo-head .up-again[hidden] { display: none; }
.lo-head .up-again { font-weight: 700; white-space: nowrap; }
.up-more { display: none; }
.draft-files.files-ok:not(.adding) > .up-pre { display: none; }
.draft-files.files-ok:not(.adding) > .up-more { display: inline-flex; margin: 0 0 12px; }
.lp-pick-btn .ic-pip { flex: none; }
/* «Назад» на телефоне — заметной кнопкой со стрелкой (владелец 2026-10-11: в Mini App иначе жмут «Закрыть» Telegram) */
@media (max-width: 760px) {
  .back { gap: 6px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--soft-2); color: var(--text);
    font-size: 15px; font-weight: 750; margin-bottom: 12px; }
  .back .ic { width: 20px; height: 20px; }
  .back:active { transform: scale(.97); }
}

/* образцы шрифтов — крупнее (владелец 2026-10-11: «мелкие») */
.fonts.rail .font-opt { width: 200px; }
.fonts.rail .font-opt img { border-radius: 16px; }
/* «Подобрали готовые цвета под ваше видео» (внизу настроек): на телефоне — кнопка-плашка, на компьютере — заголовок */
.lp-presets-tg { all: unset; cursor: default; }
@media (max-width: 760px) {
  /* новый вид: ряд сочетаний свёрнут под заголовком со стрелкой; карточки — прямоугольные, шире, чем выше */
  /* цельной плашкой во всю ширину (владелец 2026-10-11: «отвратительно выглядит»); справа — «Показать ▾» / «Скрыть ▴» */
  .m2 .lp-presets-tg { cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
    padding: 11px 14px; border-radius: 14px; background: var(--grad-soft); font-size: 15px; font-weight: 750; }
  .m2 .lp-presets-tg::after { content: "Показать ▾"; margin-left: auto; color: var(--link); font-size: 13.5px;
    font-weight: 750; white-space: nowrap; }
  .m2 .lp-presets.open .lp-presets-tg::after { content: "Скрыть ▴"; }
  .m2 .lp-presets:not(.open) > .rail-box, .m2 .lp-presets:not(.open) > .presets { display: none; }
  .m2 .lp-presets:not(.open) { padding-bottom: 8px; }
  .m2 .lp-presets h3 { margin: 0; }
  .m2 .lp-presets .presets.rail .preset { width: 184px; padding: 6px; gap: 3px; }
  .m2 .lp-presets .pm { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px 6px; padding: 10px 6px; }
  .m2 .lp-presets .preset b { font-size: 13px; }
}
/* «Как оформить ролик» — окно после загрузки (app.js lookHint) */
.hint-pop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.hint-bg { position: absolute; inset: 0; background: rgba(8, 8, 12, .5); }
.hint-box { position: relative; width: min(100%, 380px); padding: 22px 20px 16px; border-radius: 20px; background: var(--elev);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.hint-box b { display: block; font-size: 19px; margin-bottom: 6px; }
.hint-box p { margin: 0 0 16px; color: var(--muted); }
/* инструкция «Как оформить ролик» по шагам (_look_hint.html) */
.hint-box.lh { width: min(100%, 420px); max-height: calc(100dvh - 40px); overflow-y: auto; }
.lh-steps { margin: 4px 0 16px; padding-left: 22px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.lh-steps li + li { margin-top: 8px; }
.lh-steps li::marker { color: var(--text); font-weight: 800; }
.hint-box .lh-steps b { display: inline; font-size: inherit; margin: 0; color: var(--text); }
.hint-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hint-row .hint-ok { min-width: 120px; }
.safari-url { width: 100%; margin: 0 0 14px; font-size: 13px; }       /* ссылка входа для Safari (app.js safariLink) */
/* телефон (app.js splitUI, владелец 2026-10-11): превью и настройки — двумя вкладками «Настройки» | «Предпросмотр» */
.split-row { display: none; }
@media (max-width: 760px) {
  .m2 .split-row { display: block; margin: 0 0 2px; }
  .m2 .split-bar { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft); }
  .m2 .split-bar button { flex: 1; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 11px; background: none;
    color: var(--muted); font-size: 15px; font-weight: 750; box-shadow: none; transform: none; filter: none; }
  .m2 .split-bar button.on { background: var(--elev); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
  /* пипетка — справа от картинки, в пустом месте у края (владелец 2026-10-11: не над превью) */
  .m2 .lookpick.split:not(.picking) .lp-pick-btn { position: absolute; top: 14px; right: 8px; margin: 0; }
  .m2 .lookpick.split .lp-preview { position: relative; top: auto; }
  .m2 .lookpick.split.show-opts > .lp-preview, .m2 .lookpick.split.show-pv > .lp-opts { display: none; }
  .m2 .look-order:has(.lookpick.split), .m2 .card:has(.lookpick.split) { box-sizing: border-box; }
}
@media (max-width: 760px) {
  /* крупное превью закреплено: вкладкам — высота экрана под ним, иначе короткая часть уходит под превью и до неё не
     долистать */
  .m2 .lp-tabs { min-height: calc(100vh - var(--pv-h, 0px) - 57px); }
  .m2 body.miniapp .lp-tabs { min-height: calc(100vh - var(--pv-h, 0px)); }
}

/* незаконченные черновики (new.html): «Продолжить» — окно с выбором */
.drafts-note { align-items: center; }
.drafts-note p { flex: 1; }
.drafts-note > button { flex: none; margin: 0; }
.drafts-pop { width: min(92vw, 440px); max-height: 80vh; padding: 0; border: 0; border-radius: 20px; background: var(--elev);
  color: var(--text); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.drafts-pop::backdrop { background: rgba(8, 8, 12, .5); }
.dp-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 8px; }
.dp-head b { flex: 1; font-size: 17px; }
.dp-list { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 14px; overflow-y: auto; }
.dp-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--soft);
  color: var(--text); }
.dp-item:hover { text-decoration: none; background: var(--soft-2); }
.dp-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-t small { color: var(--muted); font-size: 13px; }
.dp-item .chev { width: 18px; height: 18px; color: var(--faint); }
@media (max-width: 760px) {
  /* «Превью отдельно»: под настройками пустоты нет, «Смонтировать» — сразу под ними (владелец 2026-10-11) */
  .m2 .lookpick.split .lp-tabs, .m2 body.miniapp .lookpick.split .lp-tabs { min-height: 0; }
  .m2 .lookpick.split + .lp-go { position: static; margin: 14px 0 0; padding: 0; background: none; }
}

/* Mini App на весь экран (app.js requestFullscreen): кнопки Telegram поверх страницы — отступ сверху по безопасной зоне
   (Telegram ставит --tg-safe-area-inset-top и --tg-content-safe-area-inset-top; не на весь экран — нули) */
body.miniapp { --tgtop: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
body.miniapp main { padding-top: calc(16px + var(--tgtop)); }
body.miniapp .lp-preview { top: var(--tgtop); }
@media (max-width: 760px) {
  .m2 body.miniapp .lp-tabs > .tabs-bar { top: calc(var(--tgtop) + var(--pv-h, 0px)); }
  .m2 body.miniapp .lp-tabs { min-height: calc(100vh - var(--pv-h, 0px) - var(--tgtop)); }
}
/* своя сумма пополнения (balance.html) */
.pay-custom { margin: 14px 0 6px; }
.pay-custom label { font-weight: 700; font-size: 14px; }
.pay-custom .field-row { display: flex; gap: 8px; margin-top: 6px; }
.pay-custom input { flex: 1; min-width: 0; }
.pay-custom button { flex: none; }
.pay-custom .pc-bonus { margin: 6px 0 0; }
@media (max-width: 760px) {
  .m2 .lp-preview { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 760px) {
  /* предпросмотр с пипеткой и «Смонтировать» — на один экран */
  .m2 .lookpick.split .lp-img { height: var(--pv-fit, min(62vh, calc(100dvh - 300px - var(--tgtop, 0px)))); }
}
/* «Ролики» → «Задачи»: по датам (владелец 2026-10-11) */
.day-title { margin: 14px 4px 6px; font-size: 13px; font-weight: 750; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; }
.lp-drag { cursor: move; }                               /* тянется во все стороны (владелец 2026-10-11) */
/* --- лендинг: форматы (владелец 2026-10-11: все, без цен, «Скоро» кроме первого; карточки — заметные) --- */
.lfmts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.lfmt { position: relative; display: flex; flex-direction: column; border-radius: var(--r); background: var(--elev);
  border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease; }
.lfmt::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .2s ease; }
.lfmt:not(.soon)::before { opacity: 1; }
@media (hover: hover) {
  .lfmt:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(255, 46, 126, .45); }
  .lfmt:hover::before { opacity: 1; }
  .lfmt:hover .lf-svg { transform: translateY(-4px) rotate(-2deg); }
}
.lf-art { position: relative; display: grid; place-items: center; height: 200px; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 106, 61, .28), transparent 60%),
              radial-gradient(120% 90% at 100% 100%, rgba(138, 92, 255, .32), transparent 60%), var(--soft); }
.lf-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px); background-size: 14px 14px; opacity: .25; }
.lf-svg { width: 92px; height: 164px; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .3)); transition: transform .3s ease;
  transform: rotate(-4deg); }
.lf-scr { fill: #17171d; stroke: rgba(255, 255, 255, .12); }
.lf-p { fill: #3a3a46; }
.lf-w { fill: #fff; }
.lf-img { fill: #2a2a33; }
.lf-wv { fill: #ff4f8b; }
.lf-st { stroke: #ff4f8b; }
.lf-n { position: absolute; left: 14px; top: 10px; z-index: 1; font-size: 44px; font-weight: 900; letter-spacing: -.05em;
  line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }
.lf-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.lf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lf-top h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.lf-body > p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.lf-st-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.lf-st-chip.live { background: var(--ok-bg); color: var(--ok); }
.lf-st-chip.live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
.lf-st-chip.soon { background: var(--soft-2); color: var(--muted); letter-spacing: .02em; }
.lf-feats { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.lf-feats li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px;
  background: var(--soft); font-size: 12.5px; font-weight: 700; }
.lf-feats .ic { width: 14px; height: 14px; color: var(--ok); }
.lf-go { margin-top: auto; align-self: flex-start; }
.lfmt.soon .lf-art { filter: saturate(.55); }
.lfmt.soon .lf-feats .ic { color: var(--muted); }
.lfmt.soon .lf-n { opacity: .45; }
/* первый (доступный) — крупно: на компьютере квадрат 2×2 в сетке 3×3 (5 остальных — без пустых мест), на планшете —
   во всю строку; картинка — крупнее */
@media (min-width: 761px) {
  .lfmts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lfmt:first-child { grid-column: 1 / -1; }
  .lfmt:first-child .lf-art { height: 280px; }
  .lfmt:first-child .lf-svg { width: 130px; height: 231px; }
  .lfmt:first-child .lf-top h3 { font-size: 26px; }
  .lfmt:first-child .lf-body > p { font-size: 16px; }
  .lfmt:first-child .lf-n { font-size: 64px; }
}
@media (min-width: 1000px) {
  .lfmts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lfmt:first-child { grid-column: span 2; grid-row: span 2; }
  .lfmt:first-child .lf-art { height: auto; flex: 1; min-height: 300px; }
  .lfmt:first-child .lf-svg { width: 190px; height: 338px; }
  .lfmt:first-child .lf-body { flex: none; padding: 24px 28px 28px; }
}
@media (max-width: 760px) { .lfmts { grid-template-columns: 1fr; } .lf-art { height: 180px; } }
/* лендинг: первый ролик бесплатно — заметно (владелец 2026-10-11) */
.free-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  background: var(--grad); color: #fff; font-size: 14px; font-weight: 800; box-shadow: var(--shadow-cta);
  animation: free-glow 2.4s ease-in-out infinite; }
.free-badge .ic { width: 18px; height: 18px; }
@keyframes free-glow { 50% { box-shadow: 0 10px 30px -6px rgba(255, 46, 126, .75); } }
.perks .perk-free { color: var(--b2); font-weight: 800; }
.perks .perk-free .ic { color: var(--b2); }
.lf-free { position: absolute; right: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 800;
  box-shadow: var(--shadow-cta); transform: rotate(3deg); }
.lf-free .ic { width: 15px; height: 15px; }
.free-band { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px 20px; border-radius: var(--r);
  background: var(--grad); color: #fff; box-shadow: var(--shadow-cta); }
.fb-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: rgba(255, 255, 255, .2); }
.fb-ic .ic { width: 28px; height: 28px; }
.fb-t { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.fb-t b { font-size: 20px; letter-spacing: -.02em; }
.fb-t span { font-size: 14.5px; opacity: .92; }
.free-band .button { flex: none; background: #fff; color: #1a1020; box-shadow: none; }
@media (max-width: 760px) {
  .free-band { flex-wrap: wrap; }
  .free-band .button { width: 100%; }
}
/* подвал лендинга (base.html .foot-full, владелец 2026-10-11): данные, контакты, документы и реквизиты */
.foot-full .ff-cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 28px; align-items: start; padding-top: 36px; }
.ff-col p { margin: 0 0 10px; line-height: 1.55; }
.ff-col p .ic { width: 15px; height: 15px; vertical-align: -2px; color: var(--ok); }
.ff-col h3 { margin: 0 0 10px; font-size: 14px; color: var(--text); text-transform: uppercase; letter-spacing: .06em; }
.ff-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--text); font-size: 18px; }
.ff-brand .logo-mark { width: 30px; height: 30px; }
.ff-req { font-size: 13px; }
.foot-full .ff-bottom { padding-top: 0; border-top: 1px solid var(--line); padding-top: 16px; padding-bottom: 24px; }
@media (max-width: 760px) { .foot-full .ff-cols { grid-template-columns: 1fr; gap: 18px; } }
/* админка → «Распознавание речи» (владелец 2026-10-11) */
.asr-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 18px; }
.asr-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.asr-row.on { outline: 2px solid var(--b2); }
.asr-row .grow { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.asr-row form { margin: 0; }
/* свой пресет (владелец 2026-10-11): «Сохранить пресет» внизу настроек; в ленте готовых цветов — первым, с ✕ */
.lp-save { padding: 12px 0 4px; }
.lp-save-btn { width: 100%; }
.lp-save-form { display: flex; gap: 8px; margin-top: 10px; }
.lp-save-form[hidden] { display: none; }
.lp-save-name { flex: 1; min-width: 0; }
.lp-save-msg:empty { display: none; }
.lp-save-msg { margin: 8px 0 0; }
.preset { position: relative; }
.preset-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; display: grid;
  place-items: center; font-size: 12px; line-height: 1; background: var(--soft-2); color: var(--muted); z-index: 1; }
.preset-x:hover { color: var(--bad); }

/* отправка формы и ошибки связи (app.js, владелец 2026-10-12): кнопка «занята» и всплывающее сообщение над меню */
button.busy { opacity: .6; cursor: progress; }
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px);
  max-width: min(92vw, 420px); padding: 12px 16px; border-radius: 14px; background: var(--text); color: var(--bg);
  font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 60; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ролик удалён по сроку (job.html): вместо плеера */
.phone-gone { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px;
  text-align: center; color: var(--muted); background: var(--soft); }
.phone-gone .ic { width: 34px; height: 34px; }

/* --- нижнее меню (владелец 2026-10-12): компактнее; 5 пунктов, по центру — круглая «Смонтировать» (app.js goSync:
   на экране оформления — заказ, пульсирует, когда всё готово; иначе — к выбору монтажа) --- */
:root { --tabbar-h: 50px; }
.tabbar { padding: 3px 4px calc(3px + env(safe-area-inset-bottom)); }
.tabbar .in { grid-template-columns: repeat(5, 1fr); }
.tabbar a { gap: 2px; padding: 3px 0; font-size: 10px; white-space: nowrap; }
.tabbar a .ic { width: 22px; height: 22px; }
.tabbar a.go .bub { width: 48px; height: 48px; margin: -20px 0 0; border-radius: 50%; background: var(--grad); color: #fff;
  display: grid; place-items: center; box-shadow: var(--shadow-cta), 0 0 0 4px var(--bg); transition: transform .15s; }
.tabbar a.go .bub .ic { width: 22px; height: 22px; }
.tabbar a.go.active, .tabbar a.go.here { color: var(--text); }
.tabbar a.go:active .bub { transform: scale(.94); }
.tabbar a.go.here:not(.ready) .bub { filter: saturate(.75); }
.tabbar a.go.ready .bub { animation: go-pulse 1.6s ease-out infinite; }
@keyframes go-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 46, 126, .6), 0 0 0 4px var(--bg); transform: scale(1); }
  45% { transform: scale(1.06); }
  70% { box-shadow: 0 0 0 16px rgba(255, 46, 126, 0), 0 0 0 4px var(--bg); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(255, 46, 126, 0), 0 0 0 4px var(--bg); }
}
.toast { bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); z-index: 95; }

/* --- «Загрузки» (/videos) --- */
.vids { display: grid; gap: 12px; }
.vid { display: flex; gap: 14px; align-items: center; margin: 0; padding: 12px; }
.vid-thumb { flex: none; line-height: 0; }
.vid-thumb img { width: 72px; height: 128px; object-fit: cover; border-radius: 10px; background: var(--soft); }
.vid-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vid-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.vid-acts form { margin: 0; }

/* --- превью слоями: заголовок и титры тянутся по картинке (app.js layers) --- */
.lp-frame { touch-action: none; -webkit-user-select: none; user-select: none; overflow: hidden; }
.lp-frame .lp-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none;
  will-change: transform; -webkit-user-drag: none; }
.lp-frame.dragging .lp-layer.on { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 8px rgba(255, 46, 126, .8)); }
.lp-frame .lp-drag { z-index: 3; }
.lp-size { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 4px; font-size: 13.5px;
  font-weight: 700; }
.lp-size output { color: var(--muted); font-weight: 600; }
.lp-size input[type=range] { flex: 1 0 100%; width: 100%; accent-color: #ff2e7e; margin: 2px 0; }

/* --- экран оформления на телефоне (app.js stageUI) --- */
.stage-open, .stage-top, .stage-home, .stage-up, .stage-files, .stage-back { display: none; }
@media (max-width: 760px) {
  html.stage-lock, html.stage-lock body { overflow: hidden; overscroll-behavior: none; }
  html.stage-lock header.top, html.stage-lock .foot { display: none; }
  html.stage-lock .lp-go { visibility: hidden; }
  .m2 .lookpick.stage { position: fixed; z-index: 25; left: 0; right: 0; margin: 0; display: block; background: #000;
    top: max(var(--tgtop, 0px), env(safe-area-inset-top)); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    overflow: hidden; --sheet-h: min(44dvh, 440px); }
  .m2 .lookpick.stage > .lp-preview, .m2 body.miniapp .lookpick.stage > .lp-preview,
  .m2 .lookpick.stage.picking > .lp-preview { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1;
    margin: 0; padding: 0; max-width: none; background: #000; display: flex; align-items: center; justify-content: center;
    container-type: size; transition: bottom .28s cubic-bezier(.2, .8, .2, 1); }
  /* панель — поверх превью (владелец 2026-10-12: «чтобы силуэты превью под ней были видны»), превью не уменьшается */
  .m2 .lookpick.stage .lp-frame, .m2 .lookpick.stage .lp-preview > .lp-img { display: block; position: relative;
    width: min(100cqw, calc(100cqh * 9 / 16)); height: auto; max-width: none; max-height: none; aspect-ratio: 9 / 16;
    margin: 0; border-radius: 0; }
  .m2 .lookpick.stage .lp-frame .lp-img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0;
    box-shadow: none; }
  .m2 .lookpick.stage .lp-preview > p.muted { display: none; }
  .m2 .lookpick.stage .lp-empty { color: #c9c9d2; text-align: center; padding: 24px; }
  /* пипетка — кружком в углу, её панель — над кнопкой «Настройки» */
  .m2 .lookpick.stage .lp-pick-btn, .m2 .lookpick.stage:not(.picking) .lp-pick-btn { position: absolute; top: 10px; right: 10px;
    z-index: 3; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; color: #fff;
    background: rgba(12, 12, 18, .5); border: 1px solid rgba(255, 255, 255, .25); box-shadow: none;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: grid; place-items: center; }
  .m2 .lookpick.stage .lp-pick-btn[hidden] { display: none; }
  .m2 .lookpick.stage .lp-pick-btn span { display: none; }
  .m2 .lookpick.stage .lp-pick { position: absolute; left: 10px; right: 10px; bottom: 86px; z-index: 3; margin: 0;
    padding: 10px 12px; border-radius: 14px; background: rgba(18, 18, 24, .88); color: #fff; }
  .m2 .lookpick.stage .lp-pick .muted { color: #c9c9d2; }
  .m2 .lookpick.stage .stage-open { display: flex; position: absolute; left: 50%; bottom: 34px; z-index: 3; gap: 6px;
    align-items: center; min-height: 0; padding: 9px 18px; border-radius: 999px; color: #fff; font-weight: 800; font-size: 15px;
    background: rgba(14, 14, 20, .48); border: 1px solid rgba(255, 255, 255, .3); box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
    transform: translateX(-50%); transition: opacity .2s; }
  .m2 .lookpick.stage .stage-open:hover { transform: translateX(-50%); filter: none; }
  .m2 .lookpick.stage.sheet-on .stage-open { opacity: 0; pointer-events: none; }
  .m2 .lookpick.stage.stage-off { display: none; }
  .stage-back:not([hidden]) { display: block; white-space: nowrap; position: fixed; z-index: 26; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-cta); }
  .stage-back:hover { transform: translateX(-50%); }
  .m2 .lookpick.stage .stage-files { display: block; position: absolute; top: 12px; left: 52px; z-index: 3; min-height: 0;
    padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #fff; background: rgba(14, 14, 20, .5);
    border: 1px solid rgba(255, 255, 255, .25); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .m2 .lookpick.stage .stage-home { display: grid; place-items: center; position: absolute; top: 6px; left: 4px; z-index: 3;
    width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff;
    box-shadow: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
  .m2 .lookpick.stage .stage-home:hover { transform: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
  .m2 .lookpick.stage .stage-up:not([hidden]) { display: block; position: absolute; left: 18px; right: 18px; top: 50%;
    z-index: 2; transform: translateY(-50%); color: #fff; text-align: center; }
  .m2 .lookpick.stage .stage-up .progress { margin: 0 0 10px; }
  .m2 .lookpick.stage .stage-up p { margin: 0; font-size: 14px; color: #dedee6; }
  .m2 .lookpick.stage:has(.stage-up:not([hidden])) .lp-empty { display: none; }
  /* настройки — панелью снизу: полупрозрачная (кадр под ней виден пятнами цвета), шапка с вкладками стоит, листается
     содержимое; вкладки заметнее, выбранная — фирменным градиентом. Размытие сильнее, фон плотнее (владелец
     2026-10-13: «содержимое мутно выглядит» — было 58 % и blur 9 px: цветные пятна кадра под буквами) */
  .m2 .lookpick.stage > .lp-opts { position: absolute; left: 0; right: 0; bottom: 0; height: var(--sheet-h); z-index: 4;
    display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 20px 20px 0 0;
    background: color-mix(in srgb, var(--elev) 74%, transparent); border-top: 1px solid var(--line-2);
    -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15);
    box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, .45); transform: translateY(104%);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), height .28s cubic-bezier(.2, .8, .2, 1), background .28s; }
  .m2 .lookpick.stage.sheet-on > .lp-opts { transform: none; }
  /* смахнули вверх ещё раз — почти на весь экран (владелец 2026-10-13): сверху виден край превью, фон плотнее —
     настройки читаются, а не мешаются с кадром */
  .m2 .lookpick.stage.sheet-full > .lp-opts { height: calc(100% - 56px);
    background: color-mix(in srgb, var(--elev) 94%, transparent); }
  .m2 .lookpick.stage .stage-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 12px 14px 18px; }
  .m2 .lookpick.stage .stage-top { display: flex; flex: none; flex-direction: column; align-items: stretch; margin: 0;
    padding: 6px 0 0; touch-action: none; background: none; }
  .m2 .lookpick.stage .stage-grab { align-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); }
  .m2 .lookpick.stage .stage-close { align-self: center; display: flex; align-items: center; gap: 6px; min-height: 0;
    padding: 6px 12px; background: none; color: var(--text); border: 0; box-shadow: none; font-size: 15px; }
  .m2 .lookpick.stage .stage-close:hover { transform: none; filter: none; }
  .m2 .lookpick.stage .stage-close svg { transform: rotate(180deg); }
  .m2 .lookpick.stage .lp-tabs, .m2 body.miniapp .lookpick.stage .lp-tabs { min-height: 0; }
  .m2 .lookpick.stage .tabs-bar, .m2 body.miniapp .lookpick.stage .tabs-bar { position: static;
    display: flex; gap: 8px; margin: 0; padding: 4px 14px 6px; border: 0; border-radius: 0; background: none;
    box-shadow: none; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
  .m2 .lookpick.stage .tabs-bar::-webkit-scrollbar { display: none; }
  .m2 .lookpick.stage .tabs-bar button { flex: 1 0 auto; min-height: 38px; padding: 6px 14px; font-size: 14px;
    font-weight: 800; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--soft); color: var(--text);
    box-shadow: none; }
  .m2 .lookpick.stage .tabs-bar button.on { background: var(--grad); color: #fff; border-color: transparent;
    box-shadow: var(--shadow-cta); }
  /* вкладки не влезли (app.js tabs: .wide) — стрелка «листается» своей колонкой справа, а не на вкладке */
  .m2 .lookpick.stage .stage-top { position: relative; }
  .m2 .lookpick.stage .tabs-bar.wide { margin-right: 30px; padding-right: 6px; }
  .m2 .lookpick.stage .tabs-bar.more::after { display: none; }
  .m2 .lookpick.stage .stage-top:has(> .tabs-bar.wide)::after { content: ""; position: absolute; right: 8px; bottom: 14px;
    width: 22px; height: 22px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .25s;
    background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b97' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
  .m2 .lookpick.stage .stage-top:has(> .tabs-bar.more)::after { opacity: 1; animation: rail-nudge 1.4s ease-in-out .8s 2; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .m2 .lookpick.stage > .lp-opts, .m2 .lookpick.stage > .lp-preview { transition: none; }
}

/* --- смахнуть влево — «Удалить» (app.js swipes) --- */
.swipe { position: relative; overflow: hidden; border-radius: 14px; }
.swipe + .swipe, .swipe + .item, .item + .swipe { margin-top: 2px; }
.swipe > .item { position: relative; z-index: 1; background: var(--elev); touch-action: pan-y;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.swipe-del { position: absolute; top: 0; right: 0; bottom: 0; width: 96px; z-index: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; min-height: 0; padding: 0; border: 0; border-radius: 0;
  background: var(--bad); color: #fff; font-size: 12px; font-weight: 800; box-shadow: none; }
.swipe-del:hover { transform: none; filter: none; }
/* в покое кнопки нет (app.js swSet: .sw-on — пока строка сдвинута): иначе по кромке скругления — бледные дуги справа */
.swipe:not(.sw-on) .swipe-del { visibility: hidden; }
.swipe.deleting .swipe-del { opacity: .6; }
.swipe.gone { max-height: 0 !important; opacity: 0; transition: max-height .2s, opacity .2s; }
.swipe-hint { display: none; margin: -4px 0 10px; }
@media (pointer: coarse) { .swipe-hint { display: block; } }

/* --- динамический режим (app.js dynBox): рамка титров на превью; место и размер вручную — спрятаны --- */
.lp-dbox { position: absolute; z-index: 3; border: 2px dashed rgba(255, 255, 255, .95); border-radius: 10px;
  background: rgba(255, 46, 126, .12); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); touch-action: none; cursor: move; }
.lp-dbox.on { background: rgba(255, 46, 126, .2); }
.lp-dbox.pulse { animation: dbox-pulse 1.3s ease-in-out 2; }
@keyframes dbox-pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 46, 126, .55); } }
.lp-dbox-t { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px;
  background: rgba(14, 14, 20, .6); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.lp-dbox-c { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #ff2e7e;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.lp-dbox-c.c-nw { left: -12px; top: -12px; cursor: nwse-resize; }
.lp-dbox-c.c-ne { right: -12px; top: -12px; cursor: nesw-resize; }
.lp-dbox-c.c-sw { left: -12px; bottom: -12px; cursor: nesw-resize; }
.lp-dbox-c.c-se { right: -12px; bottom: -12px; cursor: nwse-resize; }
/* настройки, которые в динамичном режиме не действуют, — спрятаны (владелец 2026-10-13: «убрать заблокированные»; было —
   бледные и не нажимались): размер титров и заголовка, выравнивание текста и рукописи, «Строки титров», «Где текст» и
   своё место заголовка. Выравнивание заголовка остаётся — заголовок и в этом режиме встаёт по нему */
/* телефон: размер — двумя пальцами по картинке, ползунка нет (владелец 2026-10-14: «оставим его только на компьютере») */
@media (max-width: 760px) { .m2 .lookpick .lp-size { display: none; } }
.lookpick.dyn .lp-drag, .lookpick.dyn .lp-size, .lookpick.dyn .no-dyn, .lookpick.dyn .place-seg,
.lookpick.dyn .place-seg + .lp-hint, .lookpick.dyn .lp-tplace { display: none; }
/* «только титры, без монтажа» (look plain): монтажные галочки — эффекты, эмодзи, музыка, чужие голоса — не нужны */
.lookpick:not(.dyn):has(input[name=plain]:checked) .tg-edit { display: none; }
.dyn-pop ol { margin: 8px 0 14px; padding-left: 20px; text-align: left; line-height: 1.45; }
.dyn-pop ol li + li { margin-top: 6px; }

/* --- подсказки у настроек (app.js tips): «i» в кружке, пузырь под ней --- */
.tip { display: inline-grid; place-items: center; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0 0 0 4px;
  vertical-align: -3px; border-radius: 50%; border: 1.5px solid var(--line-2); background: transparent; color: var(--muted);
  font: italic 700 11px/1 Georgia, "Times New Roman", serif; box-shadow: none; cursor: pointer; flex: none; }
.tip:hover, .tip[aria-expanded=true] { transform: none; filter: none; color: #fff; background: var(--b2); border-color: var(--b2); }
.tip::after { content: ""; position: absolute; inset: -10px; }      /* палец попадает с запасом */
.tip { position: relative; }
.tip-pop { position: fixed; z-index: 60; max-width: min(300px, calc(100vw - 16px)); padding: 10px 12px; border-radius: 12px;
  background: rgba(18, 18, 24, .96); color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.4; text-align: left;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35); animation: tip-in .15s ease-out; }
.tip-pop::before { content: ""; position: absolute; left: calc(var(--ax, 50%) - 6px); width: 12px; height: 12px;
  background: inherit; transform: rotate(45deg); }
.tip-pop.down::before { top: -5px; }
.tip-pop.up::before { bottom: -5px; }
@keyframes tip-in { from { opacity: 0; transform: translateY(-4px); } }
.toggles .tg { display: inline-flex; align-items: center; }
.toggles .tg .tip { margin-left: 6px; }
.lp-size .tip { margin-right: auto; }
/* --- режим монтажа «Статичный / Динамичный» (владелец 2026-10-12): над превью, на телефоне — поверх кадра сверху --- */
.lp-mode { display: inline-flex; align-items: center; gap: 2px; margin: 0 auto 10px; padding: 3px; border: 0;
  border-radius: 999px; background: var(--soft-2, rgba(127, 127, 127, .14)); }
.lp-mode label { position: relative; margin: 0; cursor: pointer; }
.lp-mode input { position: absolute; opacity: 0; pointer-events: none; }
.lp-mode span { display: block; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap;
  transition: background .2s, color .2s; }
.lp-mode input:checked + span { color: #fff; background: var(--grad); box-shadow: 0 3px 10px rgba(255, 46, 126, .35); }
.lp-mode input:focus-visible + span { outline: 2px solid #7b5cff; outline-offset: 2px; }
.lp-mode .tip { margin: 0 6px 0 4px; }
@media (max-width: 760px) {
  .m2 .lookpick.stage .lp-mode { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0;
    background: rgba(14, 14, 20, .5); border: 1px solid rgba(255, 255, 255, .25);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .m2 .lookpick.stage .lp-mode span { color: #fff; padding: 6px 11px; font-size: 13px; }
  .m2 .lookpick.stage .lp-mode .tip { color: #fff; border-color: rgba(255, 255, 255, .6); }
  /* у черновика слева сверху — «Файлы»: режим — строкой ниже */
  .m2 .lookpick.stage:has(.stage-files) .lp-mode { top: 58px; }
  .m2 .lookpick.stage.picking .lp-mode { display: none; }
}

/* --- партнёрская программа для самозанятых и ИП (_partner.html, владелец 2026-10-13) --- */
.partner { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.partner .card-head h2 { margin: 0; }
.pt-apply > summary { list-style: none; display: inline-flex; width: auto; cursor: pointer; }
.pt-apply > summary::-webkit-details-marker { display: none; }
.pt-apply[open] > summary { display: none; }
.pt-form { margin-top: 6px; }
.pt-form .seg .rail { flex-wrap: wrap; }
.pt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 12px 0; }
.pt-stats > div { padding: 10px 12px; border-radius: 12px; background: var(--soft); }
.pt-stats b { display: block; font-size: 18px; }
.pt-stats span { font-size: 12.5px; color: var(--muted); font-weight: 650; }
.pt-receipt { margin-top: 6px; }
.pt-receipt input { margin-top: 0; }
.pt-row { padding: 12px 0; border-top: 1px solid var(--line); }
.pt-row:first-of-type { border-top: 0; }
.pt-row p { margin: 0 0 8px; }