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

@layer osnova {
/* «СОЗДАТЬ» — вид экрана, один на три сайта.
   Язык тот же, что у пульта галереи: карточка, волосяная рамка, чипы
   высотой 36 и скруглением 9, выбранный — рамка в цвете сайта и подложка
   12%. Правила пишем через body[data-shell-product], иначе давние стили
   страниц перебивают их: <style> страницы лежит ниже нашего файла. */

.sz-pult {
  --чип-рамка: color-mix(in srgb, currentColor 16%, transparent);
  --чип-цвет: var(--olive, var(--brand, currentColor));
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 0 16px;
  border: 1px solid var(--чип-рамка);
  border-radius: var(--r-lg, 14px);
  background: color-mix(in srgb, currentColor 6%, transparent);
  overflow: hidden;
}

/* Полоса продвижения: видно, сколько вопросов осталось. */
.sz-polosa { height: 3px; background: color-mix(in srgb, currentColor 10%, transparent); }
.sz-polosa__zapoln {
  height: 100%; width: 0;
  background: var(--чип-цвет);
  transition: width .25s ease;
}

.sz-telo { padding: 20px 16px 4px; min-height: 232px; }
.sz-vopros { display: flex; flex-direction: column; gap: 10px; }

.sz-nomer {
  font: 700 10.5px/1 "Golos Text", Inter, system-ui, sans-serif;
  letter-spacing: .09em; text-transform: uppercase;
  color: color-mix(in srgb, currentColor 42%, transparent);
}
.sz-imya { font: 700 20px/1.2 "Golos Text", Inter, system-ui, sans-serif; }
.sz-podpis {
  font: 500 13px/1.4 "Golos Text", Inter, system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.sz-zametka {
  font: 500 12px/1.4 "Golos Text", Inter, system-ui, sans-serif;
  color: color-mix(in srgb, var(--чип-цвет) 75%, currentColor);
  border-left: 2px solid color-mix(in srgb, var(--чип-цвет) 55%, transparent);
  padding-left: 9px;
}
.sz-zhdyom {
  padding: 60px 0; text-align: center;
  font: 600 14px/1.4 "Golos Text", system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 55%, transparent);
}

/* Единственное место, где надо печатать. */
body[data-shell-product] .sz-pole {
  box-sizing: border-box; width: 100%;
  padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--чип-рамка);
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: inherit; resize: vertical;
  font: 500 15px/1.45 "Golos Text", Inter, system-ui, sans-serif;
}
body[data-shell-product] .sz-pole:focus {
  outline: none; border-color: color-mix(in srgb, var(--чип-цвет) 62%, transparent);
}
body[data-shell-product] .sz-pole::placeholder {
  color: color-mix(in srgb, currentColor 38%, transparent);
}

/* ── ЧИПЫ: тот же язык, что в пульте галереи ─────────────────────────── */
body[data-shell-product] .sz-pult .sz-chip {
  box-sizing: border-box;
  min-height: 36px; height: auto; padding: 8px 13px;
  border-radius: 9px;
  border: 1px solid var(--чип-рамка);
  background: transparent; color: inherit;
  font: 600 13px/1.15 "Golos Text", Inter, system-ui, sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-align: left;
  transition: border-color .14s, background .14s;
}
body[data-shell-product] .sz-pult .sz-chip:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--чип-цвет) 45%, transparent);
}
body[data-shell-product] .sz-pult .sz-chip.is-on {
  border-color: color-mix(in srgb, var(--чип-цвет) 65%, transparent);
  background: color-mix(in srgb, var(--чип-цвет) 12%, transparent);
}
body[data-shell-product] .sz-pult .sz-chip:disabled { opacity: .38; cursor: default; }
body[data-shell-product] .sz-pult .sz-glavnaya {
  border-color: color-mix(in srgb, var(--чип-цвет) 62%, transparent);
  background: color-mix(in srgb, var(--чип-цвет) 14%, transparent);
  font-weight: 700;
}

/* Варианты: много кнопок, каждая в один тап. */
.sz-varianty { display: flex; flex-wrap: wrap; gap: 7px; }
.sz-varianty .sz-variant { max-width: 100%; }
.sz-hod { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
.sz-dalshe { align-self: flex-start; }

.sz-obrazec { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sz-obrazec__imya {
  font: 500 12px/1 "Golos Text", system-ui, sans-serif;
  color: color-mix(in srgb, currentColor 55%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}

/* ── НИЖНЯЯ СТРОКА: модель, цена, черновик, «хватит» ─────────────────── */
.sz-niz {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--чип-рамка);
}
.sz-rastyazhka { flex: 1 1 auto; }
.sz-cena {
  font: 700 13px/1 "Golos Text", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 70%, transparent);
}
.sz-vybor-obertka { position: relative; display: inline-flex; }
.sz-strelka {
  width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 4.5px solid currentColor; opacity: .55;
}

.sz-spisok {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 248px; max-width: calc(100vw - 32px);
  max-height: 320px; overflow-y: auto;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-elevated, var(--brand-bg, #15171c)) 96%, transparent);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .42);
}
.sz-spisok[hidden] { display: none; }
.sz-punkt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 34px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: inherit; cursor: pointer; text-align: left;
  font: 600 13px/1 "Golos Text", Inter, system-ui, sans-serif;
}
.sz-punkt:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.sz-punkt.is-on {
  border-color: color-mix(in srgb, var(--чип-цвет) 65%, transparent);
  background: color-mix(in srgb, var(--чип-цвет) 12%, transparent);
}
.sz-punkt__cena {
  margin-left: auto; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 45%, transparent);
}
.sz-spisok__cherta {
  height: 1px; margin: 4px 2px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.sz-vest {
  position: fixed; left: 50%; bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 60;
  padding: 10px 16px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, var(--bg-elevated, var(--brand-bg, #15171c)) 96%, transparent);
  backdrop-filter: blur(12px);
  font: 600 13px/1 "Golos Text", system-ui, sans-serif;
}

@media (max-width: 560px) {
  .sz-telo { padding: 16px 12px 4px; min-height: 260px; }
  .sz-niz { padding: 10px 12px 12px; }
  .sz-imya { font-size: 18px; }
  .sz-cena { order: 3; }
}


/* ── ЦВЕТА АНКЕТЫ ОТ ШЕЛЛА, А НЕ ОТ ХОЗЯИНА СТРАНИЦЫ (12.08.2026) ─────
   Анкета живёт внутри чужой плашки: у Ловии одна, у эталона другая, и
   каждая красит текст по-своему. На эталоне вышло чёрным по тёмному —
   заголовок шага читался с трудом. Берём цвета у шелла явно: анкета
   должна выглядеть одинаково всюду, куда её положат. */
[data-shell-sozdat] .sz-nomer {
  color: color-mix(in srgb, var(--shell-ink, #fff) 52%, transparent);
  font: 700 10.5px/1.3 var(--shell-font-text, system-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}
[data-shell-sozdat] .sz-imya {
  color: var(--shell-ink, #fff);
  font: 700 20px/1.25 var(--shell-font-text, system-ui);
  margin-top: 6px;
}
[data-shell-sozdat] .sz-podpis,
[data-shell-sozdat] .sz-zametka {
  color: color-mix(in srgb, var(--shell-ink, #fff) 62%, transparent);
  font: 500 13.5px/1.45 var(--shell-font-text, system-ui);
  margin-top: 4px;
}
[data-shell-sozdat] .sz-chip {
  color: color-mix(in srgb, var(--shell-ink, #fff) 78%, transparent);
  border-color: color-mix(in srgb, var(--shell-ink, #fff) 18%, transparent);
}
[data-shell-sozdat] .sz-chip.is-on {
  color: var(--shell-ink, #fff);
  border-color: color-mix(in srgb, var(--brand, #999) 70%, transparent);
}


/* ── ПОДВАЛ АНКЕТЫ (12.08.2026) ───────────────────────────────────────
   Спрятан по-настоящему — display:none, а не прозрачностью: полупрозрачный
   он и создавал ощущение слоя, просвечивающего сквозь вопрос. */
[data-shell-sozdat] .sz-pult .sz-niz { display: none; }
[data-shell-sozdat] .sz-pult.is-final .sz-niz { display: flex; }

/* И красим его цветами шелла: на последнем шаге он должен ЧИТАТЬСЯ,
   а не угадываться. Прежде он был тёмным по тёмному. */
[data-shell-sozdat] .sz-niz {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--shell-ink, #fff) 12%, transparent);
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
[data-shell-sozdat] .sz-niz .sz-chip {
  color: color-mix(in srgb, var(--shell-ink, #fff) 80%, transparent);
  border-color: color-mix(in srgb, var(--shell-ink, #fff) 20%, transparent);
}
[data-shell-sozdat] .sz-niz .sz-glavnaya {
  color: var(--brand-bg, #111);
  background: var(--brand, #c5d16b);
  border-color: transparent;
  font-weight: 700;
}
[data-shell-sozdat] .sz-cena {
  color: var(--brand, #c5d16b);
  font: 700 13px/1 var(--shell-font-text, system-ui);
}
[data-shell-sozdat] .sz-model-vybor,
[data-shell-sozdat] .sz-niz b {
  color: color-mix(in srgb, var(--shell-ink, #fff) 82%, transparent);
}


/* ── ПЛИТКИ СТИЛЯ И КАРТОЧКИ МОДЕЛЕЙ (пакет №14, 12.08.2026) ─────────
   Плитка — это картинка с подписью, и больше ничего: разницу подач
   человек видит глазом, объяснять нечего. */
.sz-plitki {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.sz-plitka {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--shell-ink, #fff) 14%, transparent);
  border-radius: 12px;
  background: none;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease;
}
.sz-plitka img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.sz-plitka__imya {
  display: block;
  padding: 7px 9px;
  font: 600 12.5px/1.25 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, var(--shell-ink, #fff) 76%, transparent);
  text-align: left;
}
.sz-beta {
  display: inline-block; margin-left: 5px; padding: 1px 5px;
  border-radius: 999px; font: 700 9px/1.5 var(--shell-font-text, system-ui);
  font-style: normal; letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--brand, #999) 22%, transparent);
  color: var(--brand, #999);
}
.sz-plitka:hover { border-color: color-mix(in srgb, var(--shell-ink, #fff) 34%, transparent); }
.sz-plitka.is-on {
  border-color: color-mix(in srgb, var(--brand, #999) 88%, transparent);
}
.sz-plitka.is-on .sz-plitka__imya { color: var(--shell-ink, #fff); }

/* Мостик к Аватару: не реклама, а честная подсказка — там герой держится
   крепче, потому что обучается на фотографиях. */
.sz-mostik {
  margin-top: 12px; padding: 10px 12px;
  border-left: 2px solid color-mix(in srgb, var(--brand, #999) 60%, transparent);
  font: 500 13px/1.5 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, var(--shell-ink, #fff) 70%, transparent);
}
.sz-mostik a { color: var(--brand, #999); text-decoration: none; white-space: nowrap; }

/* Карточки моделей: имя делом, что умеет, цена ДО нажатия. */
.sz-modeli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.sz-model {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  padding: 13px 15px; border-radius: 13px; text-align: left; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--shell-ink, #fff) 14%, transparent);
  background: none;
  transition: border-color .14s ease;
}
.sz-model:hover { border-color: color-mix(in srgb, var(--brand, #999) 62%, transparent); }
.sz-model b { font: 700 14.5px/1.25 var(--shell-font-text, system-ui); color: var(--shell-ink, #fff); }
.sz-model span { font: 500 12.5px/1.4 var(--shell-font-text, system-ui); color: color-mix(in srgb, var(--shell-ink, #fff) 62%, transparent); }
.sz-model i { font: 700 12.5px/1 var(--shell-font-text, system-ui); font-style: normal; color: var(--brand, #999); }

@media (max-width: 767px) {
  .sz-plitki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sz-modeli { grid-template-columns: 1fr; }
}



/* ── КАЛИБРОВКА ПЛИТОК (12.08.2026) ───────────────────────────────────
   Плитка — квадрат одного размера, картинка кропом заполняет его без
   полей, подпись под картинкой одним стилем. Выбранная отмечается
   кольцом цвета сайта — тем же приёмом, что и чипсы: одно средство на
   одно значение, никаких заливок. */
[data-shell-sozdat] .sz-plitki {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
[data-shell-sozdat] .sz-plitka {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--shell-ink, #fff) 14%, transparent);
  border-radius: 12px;
  background: none;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color .14s ease;
}
[data-shell-sozdat] .sz-plitka img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;      /* кроп, а не вписывание: полей быть не должно */
  object-position: center;
  margin: 0;
  border: 0;
  border-radius: 0;
}
[data-shell-sozdat] .sz-plitka__imya {
  display: block;
  padding: 8px 10px 9px;
  font: 600 12.5px/1.25 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, var(--shell-ink, #fff) 74%, transparent);
}
[data-shell-sozdat] .sz-plitka:hover {
  border-color: color-mix(in srgb, var(--shell-ink, #fff) 34%, transparent);
}
[data-shell-sozdat] .sz-plitka.is-on {
  border-color: color-mix(in srgb, var(--brand, #c5d16b) 88%, transparent);
}
[data-shell-sozdat] .sz-plitka.is-on .sz-plitka__imya {
  color: var(--shell-ink, #fff);
}
[data-shell-sozdat] .sz-beta {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  font: 700 9px/1.5 var(--shell-font-text, system-ui);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--brand, #c5d16b) 20%, transparent);
  color: var(--brand, #c5d16b);
}

@media (max-width: 900px) {
  [data-shell-sozdat] .sz-plitki { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  [data-shell-sozdat] .sz-plitki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  [data-shell-sozdat] .sz-plitka__imya { padding: 7px 9px 8px; font-size: 12px; }
}


/* ── НАСТРОЙКИ ЗАПУСКА (12.08.2026) ───────────────────────────────────
   Всё, что раньше спрашивалось вопросами до дела, живёт здесь. Главные
   три — пачка, ориентир, тонкая настройка — на виду; остальные
   пятнадцать под тихой строкой «ещё настройки». Ничего не потеряно,
   но и в глаза не лезет. */
[data-shell-sozdat] .sz-zapusk {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--shell-ink, #fff) 12%, transparent);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
[data-shell-sozdat] .sz-nastroyka__imya {
  font: 700 13px/1.3 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, var(--shell-ink, #fff) 84%, transparent);
}
[data-shell-sozdat] .sz-nastroyka__podpis {
  margin-top: 2px;
  font: 500 12px/1.4 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, var(--shell-ink, #fff) 52%, transparent);
}
[data-shell-sozdat] .sz-varianty--tесно { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }
[data-shell-sozdat] .sz-fajl { display: inline-block; margin-top: 8px; cursor: pointer; }
[data-shell-sozdat] .sz-fajl__imya {
  margin-left: 8px;
  font: 500 12px/1 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, var(--shell-ink, #fff) 60%, transparent);
}
[data-shell-sozdat] .sz-eshche > summary {
  cursor: pointer;
  padding: 4px 0;
  font: 600 12.5px/1 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, var(--shell-ink, #fff) 56%, transparent);
  list-style: none;
}
[data-shell-sozdat] .sz-eshche > summary::-webkit-details-marker { display: none; }
[data-shell-sozdat] .sz-eshche > summary:hover { color: color-mix(in srgb, var(--shell-ink, #fff) 86%, transparent); }
[data-shell-sozdat] .sz-eshche[open] > summary { margin-bottom: 10px; }
[data-shell-sozdat] .sz-eshche .sz-nastroyka + .sz-nastroyka { margin-top: 12px; }


/* ── ЭКРАН УТОЧНЕНИЙ v3 (12.08.2026) ──────────────────────────────────
   Группы идут одна под другой, каждая — заголовок и ряд пилюль. Никаких
   картинок: слова честнее стокового кота. */
[data-shell-sozdat] .sz-grupa { margin-top: 16px; }
[data-shell-sozdat] .sz-grupa__imya {
  font: 700 11px/1.3 var(--shell-font-text, system-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--shell-ink, #fff) 50%, transparent);
  margin-bottom: 7px;
}
[data-shell-sozdat] .sz-grupa .sz-varianty { display: flex; flex-wrap: wrap; gap: 7px; }
[data-shell-sozdat] .sz-grupa .sz-chip { padding: 7px 13px; font-size: 13px; }


/* ── КАРТОЧКА МОДЕЛИ (12.08.2026) ─────────────────────────────────────
   Роль крупно, что делает — строкой, имя поставщика мелко и приглушённо.
   Английское имя не прячем: оно просто не главное. */
[data-shell-sozdat] .sz-model__rol {
  font: 700 15px/1.25 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, currentColor 92%, transparent);
}
[data-shell-sozdat] .sz-model__chto {
  display: block; margin-top: 3px;
  font: 500 12.5px/1.4 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, currentColor 58%, transparent);
}
[data-shell-sozdat] .sz-model__imya {
  display: block; margin-top: 5px; text-decoration: none;
  font: 500 11px/1.2 ui-monospace, Menlo, monospace;
  letter-spacing: .02em;
  color: color-mix(in srgb, currentColor 38%, transparent);
}
[data-shell-sozdat] .sz-model__cena {
  display: block; margin-top: 7px; font-style: normal;
  font: 600 12.5px/1 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, var(--shell-brand, currentColor) 80%, transparent);
}
[data-shell-sozdat] .sz-prochie { margin-top: 14px; }
[data-shell-sozdat] .sz-prochie > summary {
  cursor: pointer; padding: 6px 0; list-style: none;
  font: 600 12.5px/1 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, currentColor 56%, transparent);
}
[data-shell-sozdat] .sz-prochie > summary::-webkit-details-marker { display: none; }
[data-shell-sozdat] .sz-prochie > summary:hover { color: color-mix(in srgb, currentColor 88%, transparent); }
[data-shell-sozdat] .sz-modeli--prochie { margin-top: 10px; }

/* «Подберём сами» — карточка тише прочих: это не выбор, а отказ от него. */
[data-shell-sozdat] .sz-model--sama .sz-model__cena {
  color: color-mix(in srgb, currentColor 48%, transparent);
}


/* ── ШАГ «ИЗ ЧЕГО» (12.08.2026) ────────────────────────────────────────
   Два пути и всё. Крупно, чтобы выбор читался с телефона одним взглядом
   и не требовал прицеливаться. */
/* ДВЕ РОВНЫЕ КОЛОНКИ (пакет №29). Было `auto-fit`, и карточки разъезжались
   по ширине: то две, то три, то одна широкая. Здесь ровно пара — значит
   и колонок ровно две, а на телефоне одна. */
[data-shell-sozdat] .sz-izchego {
  margin-top: 18px;
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
[data-shell-sozdat] .sz-izchego__put { height: 100%; }
@media (max-width: 700px) {
  [data-shell-sozdat] .sz-izchego { grid-template-columns: minmax(0, 1fr); }
}
[data-shell-sozdat] .sz-izchego__put {
  display: flex; flex-direction: column; gap: 5px;
  padding: 20px 20px 22px; text-align: left; cursor: pointer;
  border-radius: 14px; background: none;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  color: inherit;
  transition: border-color .18s ease;
}
[data-shell-sozdat] .sz-izchego__put:hover {
  border-color: color-mix(in srgb, var(--shell-brand, currentColor) 62%, transparent);
}
[data-shell-sozdat] .sz-izchego__put b {
  font: 700 17px/1.25 var(--shell-font-text, system-ui);
}
[data-shell-sozdat] .sz-izchego__put span {
  font: 500 13px/1.45 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, currentColor 58%, transparent);
}

/* Пришедшему «со своего фото» выбор картинки — главное на экране. */
[data-shell-sozdat] .sz-obrazec--glavnoe { margin-top: 16px; }
[data-shell-sozdat] .sz-obrazec--glavnoe .sz-fajl {
  padding: 13px 22px; font-size: 14px;
  border-color: color-mix(in srgb, var(--shell-brand, currentColor) 55%, transparent);
}

/* ── «РЕКОМЕНДУЕМ» У ПОДОШЕДШЕЙ ───────────────────────────────────────
   Кольцо и пометка. Остальные карточки рядом и доступны — мы советуем,
   а не выбираем за человека. */
[data-shell-sozdat] .sz-model--sovet {
  position: relative;
  border-color: color-mix(in srgb, var(--shell-brand, currentColor) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--shell-brand, currentColor) 38%, transparent);
}
[data-shell-sozdat] .sz-model__sovet {
  display: inline-block; margin-bottom: 6px;
  padding: 3px 9px; border-radius: 999px; font-style: normal;
  font: 700 10px/1.5 var(--shell-font-text, system-ui);
  letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--shell-brand, currentColor) 16%, transparent);
  color: color-mix(in srgb, var(--shell-brand, currentColor) 92%, transparent);
}

/* ── ШАГ «КАКИМ ФАЙЛОМ» ───────────────────────────────────────────────
   Списком и без пояснений: человек и так знает, что ему нужно, а кто не
   знает — тому подходит помеченный. */
[data-shell-sozdat] .sz-formaty {
  margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px;
}
[data-shell-sozdat] .sz-format {
  padding: 11px 20px;
  font: 600 14px/1 var(--shell-font-text, system-ui);
  letter-spacing: .02em;
}


/* ── ВЕДЕНИЕ: ОБЩИЙ ВИД НА ВСЮ ЭКОСИСТЕМУ (12.08.2026) ────────────────
   Полоса шагов, карточка, подсказка, варианты. Тот же вид и у разговора
   на «Создать», и везде, где ведение понадобится дальше. */
[data-shell-sozdat] .ved-polosa { display: flex; gap: 7px; margin-bottom: 18px; }
[data-shell-sozdat] .ved-polosa__krug {
  width: 26px; height: 26px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; position: relative;
  background: none; border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  color: color-mix(in srgb, currentColor 45%, transparent);
  font: 600 12px/1 var(--shell-font-text, system-ui);
}
[data-shell-sozdat] .ved-polosa__krug.is-active {
  border-color: color-mix(in srgb, var(--shell-brand, currentColor) 70%, transparent);
  color: var(--shell-brand, currentColor);
}
[data-shell-sozdat] .ved-polosa__krug.is-done {
  border-color: color-mix(in srgb, var(--shell-brand, currentColor) 40%, transparent);
}
[data-shell-sozdat] .ved-polosa__krug.is-done span { display: none; }
[data-shell-sozdat] .ved-polosa__krug i {
  font-style: normal; color: var(--shell-brand, currentColor); font-size: 13px;
}
[data-shell-sozdat] .ved-polosa__krug[disabled] { cursor: default; opacity: .45; }

[data-shell-sozdat] .ved-schet {
  font: 700 11px/1 var(--shell-font-text, system-ui);
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, currentColor 45%, transparent);
}
[data-shell-sozdat] .ved-imya {
  margin-top: 8px;
  font: 700 clamp(19px, 3vw, 23px)/1.22 var(--shell-font-title, var(--shell-font-text, system-ui));
}
[data-shell-sozdat] .ved-zadanie {
  margin-top: 5px;
  font: 500 14px/1.45 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, currentColor 62%, transparent);
}
[data-shell-sozdat] .ved-zachem {
  margin-top: 8px; padding-left: 11px;
  border-left: 2px solid color-mix(in srgb, var(--shell-brand, currentColor) 35%, transparent);
  font: 500 13px/1.45 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, currentColor 52%, transparent);
}
[data-shell-sozdat] .ved-podskazka { margin-top: 12px; font: 500 12.5px/1.45 var(--shell-font-text, system-ui); }
[data-shell-sozdat] .ved-podskazka span { color: color-mix(in srgb, currentColor 48%, transparent); }
[data-shell-sozdat] .ved-kak {
  margin-left: 6px; padding: 0; background: none; border: none; cursor: pointer;
  font: 600 12.5px/1 var(--shell-font-text, system-ui);
  color: var(--shell-brand, currentColor); text-decoration: underline;
}
[data-shell-sozdat] .ved-podrobno {
  margin: 8px 0 0; font: 500 13px/1.5 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, currentColor 58%, transparent);
}
[data-shell-sozdat] .ved-varianty {
  margin-top: 18px; display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
[data-shell-sozdat] .ved-variant {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 12px; background: none; color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  transition: border-color .18s ease;
}
[data-shell-sozdat] .ved-variant:hover,
[data-shell-sozdat] .ved-variant.is-on {
  border-color: color-mix(in srgb, var(--shell-brand, currentColor) 62%, transparent);
}
[data-shell-sozdat] .ved-variant b { font: 700 15px/1.25 var(--shell-font-text, system-ui); }
[data-shell-sozdat] .ved-variant span {
  font: 500 12.5px/1.4 var(--shell-font-text, system-ui);
  color: color-mix(in srgb, currentColor 55%, transparent);
}
[data-shell-sozdat] .ved-hod { margin-top: 16px; }
[data-shell-sozdat] .ved-nazad {
  padding: 9px 18px; border-radius: 999px; cursor: pointer; background: none; color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  font: 600 13px/1 var(--shell-font-text, system-ui);
}

}