@charset "UTF-8";
/*
	Сказкомат: каскад сайта собирается ТОЛЬКО из собственных стилей продукта —
	это не сайт «поверх кита», кит Pixeo из сборки удалён.
	variables.scss / global.scss / themes.scss в каскад больше не входят
	(лежат как архив кита, можно удалить); editor.scss — отдельная сборка
	для админ-редактора, админка живёт на admin/main.css.
*/
/*
	Сказкомат — базовый слой сайта. Кит Pixeo из каскада удалён:
	сайт собирается только из собственных стилей продукта
	(база → публичные страницы → ЛК/визард). Здесь: шрифты, токены :root,
	сброс, body, элементы ядра (Headers::H1—H3 → h*.title, .description
	из Description::Get) и подвал сайта (FooterView).
	Админ-панель использует admin/main.css и от этого файла не зависит.
*/
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;900&family=Golos+Text:wght@400;500;600;800&display=swap");
/* ── токены дизайн-системы (design-tz.md) ── */
:root {
  --sk-bg:#FBF5EB;
  --sk-paper:#FFFDF9;
  --sk-ink:#2B2117;
  --sk-ink-soft:#6B5A48;
  --sk-ink-mute:#A8937C;
  --sk-accent:#FF7A2F;
  --sk-accent-2:#FFB23E;
  --sk-grad:linear-gradient(120deg,#FF7A2F,#FFB23E);
  --sk-mint:#8FD9C5;
  --sk-lav:#C4B2F7;
  --sk-line:#EFE3CE;
  --sk-r:22px;
  --sk-shadow:0 2px 6px rgba(64,42,15,.05),0 14px 34px rgba(64,42,15,.10);
  --sk-shadow-lift:0 4px 10px rgba(64,42,15,.07),0 22px 48px rgba(255,122,47,.16);
  --sk-font-display:"Unbounded","Golos Text",system-ui,sans-serif;
  --sk-font-text:"Golos Text",system-ui,sans-serif;
}

/* ── сброс и каркас ── */
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sk-font-text);
  font-size: 17px;
  line-height: 1.6;
  background: var(--sk-bg);
  color: var(--sk-ink);
  /* полноширинные полосы (.pub__stats/.pub__final/.app:before) строятся через
     100vw, который включает полосу прокрутки — clip гасит горизонтальный скролл */
  overflow-x: clip;
}

/* #mb — контейнер контента страницы (HeaderFooterView); прижимает подвал к низу */
#mb {
  flex: 1 0 auto;
  width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--sk-accent);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

b {
  font-weight: 600;
}

/* ── заголовки ядра (Headers::H1—H3 добавляют класс .title) ── */
h1, h2, h3, h4, h5 {
  margin: 0 0 0.45em;
  font-family: var(--sk-font-display);
  color: var(--sk-ink);
  line-height: 1.2;
}

h1, .h1 {
  font-weight: 700;
  font-size: 1.9em;
}

h2, .h2 {
  font-weight: 600;
  font-size: 1.35em;
}

h3, .h3 {
  font-family: var(--sk-font-text);
  font-weight: 700;
  font-size: 1.06em;
}

h1:empty, h2:empty, h3:empty {
  display: none;
}

/* ── .description — форматированные тексты из админки (Description::Get) ── */
.description > * + * {
  margin-top: 14px;
}

.description:empty {
  display: none;
}

.description p {
  margin: 0;
}

/* ── чекбоксы сайта: HtmlTags::InputCheckbox(...,"cb") — input скрыт,
      рисуем свой квадрат с галочкой на label (по аналогии с радио-плитками) ── */
.cb {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cb + label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}

.cb + label:before {
  content: "";
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 2px solid #E0CFB4;
  background: var(--sk-paper);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cb + label:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 23px;
  height: 23px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23'%3E%3Cpath d='M6 12l4 4 7.5-9' fill='none' stroke='%23FFFDF9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/74% no-repeat;
}

.cb:hover + label:before {
  border-color: var(--sk-accent-2);
}

.cb:checked + label:before {
  background: var(--sk-grad);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255, 122, 47, 0.3);
}

.cb:checked + label:after {
  opacity: 1;
}

.cb:focus-visible + label:before {
  outline: 2px solid var(--sk-accent);
  outline-offset: 2px;
}

/* ── подвал сайта (FooterView, Figma 18.07: лого · меню · копирайт) ── */
footer.footer {
  flex-shrink: 0;
  background: var(--sk-ink);
  color: #C9B8A4;
  font-size: 0.92em;
}

footer.footer .body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 30px clamp(16px, 4vw, 36px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  align-items: center;
}

footer.footer a {
  color: #FFFDF9;
}

.footer__brand {
  font-family: var(--sk-font-display);
  font-weight: 600;
  font-size: 19px;
  text-decoration: none;
  background: var(--sk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
}

.footer__nav a {
  color: #C9B8A4;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer__nav a:hover {
  color: #FFFDF9;
}

.footer__copy {
  margin-left: auto;
  color: #8D7B66;
}

.footer__copy .description {
  display: inline;
}

.footer__copy a {
  color: #C9B8A4;
}

@media (max-width: 700px) {
  .footer__copy {
    margin-left: 0;
  }
}
/* ── всплывающие окна ядра (Popups\Views\PopupView + PopupBoxInit, 20.07):
      разметка .popupBox > .popup (+ a.close, .title, .actions) — ядровая,
      здесь только стилизация под дизайн-систему сайта ── */
.popupBox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(43, 33, 23, 0.45);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.popupBox.visible {
  display: flex;
}

.popupBox .popup {
  position: relative;
  max-width: 440px;
  width: 100%;
  cursor: auto;
  background: var(--sk-paper);
  border-radius: var(--sk-r);
  box-shadow: var(--sk-shadow-lift);
  padding: 26px 26px 22px;
  animation: popupin 0.22s ease;
}

@keyframes popupin {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.popupBox .popup > a.close {
  position: absolute;
  top: 10px;
  right: 14px;
  text-decoration: none;
  font-size: 26px;
  line-height: 1;
  color: var(--sk-ink-mute);
  padding: 4px;
}

.popupBox .popup > a.close:before {
  content: "×";
}

.popupBox .popup > a.close:hover {
  color: var(--sk-ink);
}

.popupBox .popup .title {
  font-family: var(--sk-font-display);
  font-weight: 600;
  font-size: 1.15em;
  margin: 0 0 10px;
  padding-right: 28px;
}

.popupBox .popup .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.popupBox .popup .actions > * {
  flex: 1 1 45%;
}

@media (prefers-reduced-motion: reduce) {
  .popupBox .popup {
    animation: none;
  }
}
/* ── поле с постоянной подписью (Fields::Labeled, 19.07) ── */
.fld {
  display: block;
  margin: 10px 0;
}

.fld__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sk-ink-mute);
  margin: 0 0 4px 3px;
  letter-spacing: 0.02em;
}

.fld input {
  margin: 0 !important;
}

/*
	Сказкомат — публичные страницы (.pub): дизайн-система прохода 1.
	Направление: тёплая современная «книжная» эстетика (design-tz.md).
	Шрифты и токены :root — в skazki-base.scss (общие для всего сайта).
*/
/* ── каркас ── */
.pub {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 36px) 72px;
  font-family: var(--sk-font-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--sk-ink);
  background: radial-gradient(560px 340px at 88% -60px, rgba(255, 178, 62, 0.16), transparent 70%), radial-gradient(480px 320px at -60px 220px, rgba(143, 217, 197, 0.14), transparent 70%), var(--sk-bg);
}

.pub h1 {
  font-family: var(--sk-font-display);
  font-weight: 600;
  font-size: clamp(1.9em, 5.2vw, 3.1em);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0.35em 0 0.3em;
}

.pub h2 {
  font-family: var(--sk-font-display);
  font-weight: 600;
  font-size: clamp(1.25em, 2.6vw, 1.7em);
  line-height: 1.25;
  margin: 2.4em 0 0.8em;
  color: var(--sk-ink);
}

.pub h3 {
  font-family: var(--sk-font-text);
  font-weight: 700;
  font-size: 1.06em;
  margin: 0.2em 0 0.35em;
}

.pub__sub {
  color: var(--sk-ink-soft);
  font-size: clamp(1.02em, 2vw, 1.18em);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.pub__muted {
  color: var(--sk-ink-mute);
  font-size: 0.86em;
}

/* ── кнопки ── */
.pub__btn {
  display: inline-block;
  padding: 17px 34px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--sk-font-text);
  font-size: 1.08em;
  font-weight: 700;
  color: #fff;
  background: var(--sk-grad);
  box-shadow: 0 8px 22px rgba(255, 122, 47, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pub__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 122, 47, 0.42);
}

.pub__btn--ghost {
  background: var(--sk-paper);
  color: var(--sk-accent);
  border: 2px solid var(--sk-accent);
  box-shadow: none;
}

.pub__btn--ghost:hover {
  box-shadow: 0 8px 20px rgba(255, 122, 47, 0.18);
}

/* ── hero ── */
.pub__hero {
  text-align: center;
  padding: clamp(30px, 7vw, 64px) 8px clamp(20px, 4vw, 36px);
}

.pub__hero .pub__btn {
  margin-top: 0.7em;
}

.pub__hero .pub__muted {
  margin-top: 1.1em;
}

/* ── карточки ── */
.pub__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.pub__card {
  flex: 1 1 220px;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r);
  padding: 22px;
  background: var(--sk-paper);
  box-shadow: var(--sk-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pub__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sk-shadow-lift);
}

.pub__card--accent {
  border: 2px solid transparent;
  background: linear-gradient(var(--sk-paper), var(--sk-paper)) padding-box, var(--sk-grad) border-box;
}

.pub__card--compact {
  flex: 1 1 150px;
  padding: 14px 16px;
  box-shadow: none;
}

.pub__card--compact:hover {
  transform: none;
  box-shadow: var(--sk-shadow);
}

/* ── шаги ── */
.pub__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  counter-reset: step;
}

.pub__step {
  flex: 1 1 240px;
  border-radius: var(--sk-r);
  padding: 24px;
  background: var(--sk-paper);
  border: 1px solid var(--sk-line);
  box-shadow: var(--sk-shadow);
  position: relative;
}

.pub__step:before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: var(--sk-grad);
  color: #fff;
  font-family: var(--sk-font-display);
  font-weight: 600;
  font-size: 1.15em;
  box-shadow: 0 6px 16px rgba(255, 122, 47, 0.3);
}

.pub__step:nth-child(2):before {
  background: linear-gradient(120deg, #57C4AB, var(--sk-mint));
  box-shadow: 0 6px 16px rgba(87, 196, 171, 0.3);
}

.pub__step:nth-child(3):before {
  background: linear-gradient(120deg, #9F86EF, var(--sk-lav));
  box-shadow: 0 6px 16px rgba(159, 134, 239, 0.3);
}

.pub__step b {
  display: block;
  font-size: 1.1em;
  font-weight: 700;
  margin-bottom: 6px;
}

/* ── примеры-книги ── */
.pub__example {
  flex: 1 1 200px;
  max-width: 240px;
  text-decoration: none;
  color: var(--sk-ink);
}

.pub__example img {
  width: 100%;
  aspect-ratio: 148/210;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(64, 42, 15, 0.14), 0 20px 40px rgba(64, 42, 15, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pub__example:hover img {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 10px 20px rgba(64, 42, 15, 0.16), 0 30px 54px rgba(64, 42, 15, 0.2);
}

.pub__example h3 {
  margin-top: 0.7em;
}

/* ── тарифы ── */
.pub__plan {
  flex: 1 1 250px;
  border: 1px solid var(--sk-line);
  border-radius: calc(var(--sk-r) + 4px);
  padding: 26px;
  background: var(--sk-paper);
  position: relative;
  box-shadow: var(--sk-shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pub__plan .pub__btn {
  margin-top: auto;
  text-align: center;
  padding: 14px 24px;
  font-size: 1em;
}

.pub__plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pub__plan-top h3 {
  margin: 0;
}

.pub__discount {
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.pub__discount--mint {
  background: #DFF4EE;
  color: #2E8F7A;
}

.pub__discount--orange {
  background: #FFEBD9;
  color: #E8641C;
}

.pub__per-tale {
  color: #2E8F7A;
  font-size: 13px;
  font-weight: 600;
  margin: 2px 0 0;
}

.pub__plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--sk-shadow-lift);
}

.pub__plan--hot {
  border: 2px solid transparent;
  background: linear-gradient(var(--sk-paper), var(--sk-paper)) padding-box, var(--sk-grad) border-box;
  box-shadow: var(--sk-shadow-lift);
}

.pub__plan--hot:before {
  content: attr(data-badge);
  position: absolute;
  top: -14px;
  left: 22px;
  background: var(--sk-grad);
  color: #fff;
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(255, 122, 47, 0.35);
}

.pub__price {
  font-family: var(--sk-font-display);
  font-size: 1.9em;
  font-weight: 600;
  margin: 0.35em 0 0.2em;
  background: var(--sk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── FAQ ── */
.pub__faq {
  max-width: 760px;
}

.pub__faq details {
  border: 1px solid var(--sk-line);
  border-radius: 16px;
  background: var(--sk-paper);
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
}

.pub__faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 16px 48px 16px 20px;
  list-style: none;
  position: relative;
}

.pub__faq summary::-webkit-details-marker {
  display: none;
}

.pub__faq summary:after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  translate: 0 -50%;
  font-family: var(--sk-font-display);
  font-weight: 500;
  font-size: 1.2em;
  color: var(--sk-accent);
  transition: rotate 0.18s ease;
}

.pub__faq details[open] summary:after {
  rotate: 45deg;
}

.pub__faq p {
  color: var(--sk-ink-soft);
  margin: 0;
  padding: 0 20px 16px;
}

/* ── листалка книг (examples, макет 17.07: белая карточка) ── */
.pub__book {
  flex: 1 1 280px;
  max-width: 340px;
  background: var(--sk-paper);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r);
  box-shadow: var(--sk-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pub__book h3 {
  margin: 0.5em 0 0;
}

.pub__book .pub__muted {
  margin: 2px 0 0;
}

.pub__flip {
  position: relative;
}

.pub__flip img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 3px 8px rgba(43, 33, 23, 0.12), 0 14px 30px rgba(43, 33, 23, 0.16);
}

.pub__flip-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 2px 0;
}

.pub__flip-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--sk-line);
  background: var(--sk-paper);
  color: var(--sk-accent);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.pub__flip-btn:hover {
  box-shadow: 0 6px 14px rgba(43, 33, 23, 0.1);
}

/* ── валюты (пилюльная группа, макет 17.07) ── */
.pub__currency {
  display: inline-flex;
  gap: 4px;
  background: rgba(43, 33, 23, 0.05);
  border-radius: 999px;
  padding: 4px;
  margin-top: 24px;
}

.pub__currency a {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--sk-ink-mute);
  font-weight: 600;
  font-size: 14px;
  transition: color 0.15s ease;
}

.pub__currency a:hover {
  color: var(--sk-ink-soft);
}

.pub__currency a.cur {
  background: var(--sk-grad);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255, 122, 47, 0.3);
}

/* ── шапка (макет 17.07): печатает HeaderView на всех страницах сайта,
      поэтому контейнер — свой (шапка живёт вне .pub) ── */
.pub__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 36px) 10px;
}

.pub__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sk-ink);
  text-decoration: none;
}

.pub__logo:hover {
  color: var(--sk-ink);
}

.pub__logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--sk-grad);
  position: relative;
  flex-shrink: 0;
}

.pub__logo-mark:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 19c-3.5-2.6-8.5-2.6-13-.6v16c4.5-2 9.5-2 13 .6z' fill='%23FFFDF9'/%3E%3Cpath d='M24 19c3.5-2.6 8.5-2.6 13-.6v16c-4.5-2-9.5-2-13 .6z' fill='%23FFFDF9' opacity='.82'/%3E%3Cpath d='M35.5 6.5l1.2 3.1 3.1 1.2-3.1 1.2-1.2 3.1-1.2-3.1-3.1-1.2 3.1-1.2z' fill='%23FFFDF9'/%3E%3C/svg%3E") center/100% no-repeat;
}

.pub__logo-word {
  font-family: var(--sk-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.pub__menu {
  display: flex;
  gap: 22px;
  font-weight: 600;
  font-size: 15px;
}

.pub__menu a {
  color: var(--sk-ink-soft);
  text-decoration: none;
}

.pub__menu a:hover {
  color: var(--sk-ink);
}

.pub__menu a.cur {
  color: var(--sk-ink);
  font-weight: 600;
}

/* ── языки (пилюльная группа в шапке, макет 17.07) ── */
.pub__langs {
  display: flex;
  gap: 4px;
  background: rgba(43, 33, 23, 0.05);
  border-radius: 999px;
  padding: 4px;
  font-size: 13px;
}

.pub__langs a {
  text-decoration: none;
  color: var(--sk-ink-mute);
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 600;
}

.pub__langs a.cur {
  background: var(--sk-paper);
  color: var(--sk-ink);
  box-shadow: 0 2px 6px rgba(43, 33, 23, 0.08);
}

/* Ссылка входа/кабинета в шапке (21.07, фидбек юзера) */
.pub__auth {
  text-decoration: none;
  color: var(--sk-ink);
  font-weight: 600;
  font-size: 15px;
  padding: 8px 16px;
  border: 1.5px solid var(--sk-line);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pub__auth:hover {
  border-color: #d9a441;
  box-shadow: 0 4px 12px rgba(64, 42, 15, 0.1);
}

/* ── чип (paper pill с ✦) ── */
.pub__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--sk-paper);
  border: 1px solid var(--sk-line);
  color: var(--sk-ink-soft);
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(43, 33, 23, 0.05);
}

.pub__chip:before {
  content: "✦";
  color: var(--sk-accent);
}

/* ── акцент в тексте (оранжевый градиент) ── */
.pub__accent {
  font-weight: 700;
  background: var(--sk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── оранжевый акцент с волнистым подчёркиванием ── */
.pub__hl {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  background: var(--sk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pub__hl:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M4 8c30-6 62-6 98-2 30 3 60 3 94-3' fill='none' stroke='%23FFB23E' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
}

/* ── hero-грид главной (макет 17.07) ── */
.pub__hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: clamp(24px, 5vw, 56px) 0 clamp(36px, 6vw, 72px);
}

.pub__hero-grid h1 {
  margin: 20px 0 0;
}

.pub__hero-grid .pub__sub {
  margin: 24px 0 0;
  max-width: 480px;
  font-size: 18px;
}

.pub__cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.pub__social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.pub__avatars {
  display: flex;
}

.pub__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  border: 2px solid var(--sk-bg);
  background: linear-gradient(135deg, #57C4AB, #8FD9C5);
}

.pub__avatar:nth-child(2) {
  background: linear-gradient(135deg, #FF7A2F, #FFB23E);
  margin-left: -9px;
}

.pub__avatar:nth-child(3) {
  background: linear-gradient(135deg, #9F86EF, #C4B2F7);
  margin-left: -9px;
}

.pub__social-note {
  font-size: 13px;
  color: var(--sk-ink-mute);
  line-height: 1.45;
}

/* ── веер демо-обложек (макет 17.07) ── */
.pub__fan {
  position: relative;
  min-height: 380px;
}

.pub__fan-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 270px;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(43, 33, 23, 0.12), 0 18px 36px rgba(43, 33, 23, 0.18);
}

.pub__fan-card:before {
  content: "";
  position: absolute;
  top: 12%;
  right: 12%;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.pub__fan-card:after {
  content: "";
  position: absolute;
  bottom: -26%;
  left: -24%;
  width: 150%;
  height: 56%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

/* параллакс за курсором: SkazkiParallaxInit пишет --px/--py
   (объявлены здесь, чтобы свойства существовали и до инициализации JS) */
.pub__fan-card {
  --px:0px;
  --py:0px;
  will-change: transform;
}

.pub__fan-card--mint {
  background: linear-gradient(165deg, #57C4AB, #2E8F7A);
  z-index: 0;
  transform: translate(calc(-50% - 92px + var(--px, 0px)), calc(-50% + var(--py, 0px))) rotate(-8deg);
}

.pub__fan-card--orange {
  background: linear-gradient(165deg, #FFB23E, #FF7A2F);
  z-index: 2;
  transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)));
  box-shadow: 0 3px 8px rgba(43, 33, 23, 0.14), 0 22px 44px rgba(43, 33, 23, 0.22);
}

.pub__fan-card--violet {
  background: linear-gradient(165deg, #9F86EF, #7D63D9);
  z-index: 1;
  transform: translate(calc(-50% + 92px + var(--px, 0px)), calc(-50% + var(--py, 0px))) rotate(8deg);
}

.pub__fan-tag {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.75);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pub__fan-body {
  position: relative;
  z-index: 1;
  display: block;
}

.pub__fan-title {
  display: block;
  font-family: var(--sk-font-display);
  font-weight: 600;
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
}

.pub__fan-age {
  margin-top: 8px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
}

/* ── полоса статистики (макет 17.07, фон на всю ширину) ── */
.pub__stats {
  background: #F6EDDD;
  margin: clamp(36px, 6vw, 64px) calc(50% - 50vw) 0;
}

.pub__stats-in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px clamp(16px, 4vw, 36px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 22px;
  text-align: center;
}

.pub__stat-num {
  display: block;
  font-family: var(--sk-font-display);
  font-weight: 600;
  font-size: clamp(1.5em, 2.8vw, 2.2em);
  background: var(--sk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pub__stat-label {
  display: block;
  color: var(--sk-ink-soft);
  font-size: 13px;
  font-weight: 600;
}

/* ── соцдоказательства тарифов (макет 17.07) ── */
.pub__proof {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 3vw, 32px);
  flex-wrap: wrap;
  margin-top: 22px;
  color: var(--sk-ink-soft);
  font-size: 14px;
  font-weight: 600;
}

.pub__proof > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pub__stars:before {
  content: "★★★★★";
  color: var(--sk-accent-2);
  letter-spacing: 1px;
}

/* ── заголовки секций тарифов с иконкой (макет 17.07) ── */
.pub__section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 44px 0 16px;
}

.pub__section-head h2 {
  margin: 0;
  font-size: 1.15em;
}

.pub__section-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  flex-shrink: 0;
  position: relative;
}

.pub__section-icon:before {
  content: "";
  width: 16px;
  height: 16px;
  margin: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFDF9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") center/100% no-repeat;
}

.pub__section-icon--orange {
  background: linear-gradient(135deg, #FF7A2F, #FFB23E);
}

.pub__section-icon--violet {
  background: linear-gradient(135deg, #9F86EF, #C4B2F7);
}

.pub__cards--center {
  justify-content: center;
}

.pub--center {
  text-align: center;
}

/* ── компакт-режим карточек тарифов (результат визарда, 20.07):
      та же разметка PlanCardsView, что на /pricing/, но плотнее ── */
.pub__cards--compact {
  gap: 12px;
}

.pub__cards--compact .pub__plan {
  flex: 1 1 200px;
  padding: 16px 18px;
}

.pub__cards--compact .pub__price {
  font-size: 1.4em;
  margin: 0.25em 0 0.15em;
}

.pub__cards--compact .pub__plan .pub__btn {
  padding: 10px 18px;
  font-size: 0.95em;
}

.pub__cards--compact .pub__muted {
  margin: 0.25em 0;
}

.pub__cards--compact .pub__plan--hot:before {
  top: -12px;
  font-size: 0.68em;
  padding: 4px 12px;
}

.onb .pub__section-head {
  margin: 28px 0 12px;
}

/* ── «Не разовый подарок — ритуал» (Figma 18.07) ── */
.pub__vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}

.pub__vs-card {
  border-radius: calc(var(--sk-r) + 4px);
  padding: 30px;
  background: var(--sk-paper);
  border: 1px solid var(--sk-line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.pub__vs-card--old {
  background: #FAF3E6;
  color: var(--sk-ink-soft);
}

.pub__vs-card--new {
  border: 2px solid transparent;
  background: linear-gradient(var(--sk-paper), var(--sk-paper)) padding-box, var(--sk-grad) border-box;
  box-shadow: var(--sk-shadow-lift);
}

.pub__vs-card h3 {
  margin: 0;
  font-size: 1.25em;
  font-family: var(--sk-font-display);
  font-weight: 600;
}

.pub__vs-strike h3, h3.pub__vs-strike {
  color: var(--sk-ink-mute);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

h3.pub__vs-brand {
  background: var(--sk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pub__vs-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  position: relative;
}

.pub__vs-icon:before {
  content: "";
  width: 28px;
  height: 28px;
  margin: auto;
  background: center/100% no-repeat;
}

.pub__vs-icon--stack {
  background: #F1E7D4;
}

.pub__vs-icon--stack:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect x='5' y='16' width='18' height='6' rx='3' fill='%23FF8A3D'/%3E%3Crect x='7' y='10' width='14' height='5' rx='2.5' fill='%239F86EF'/%3E%3Crect x='9' y='5' width='10' height='4' rx='2' fill='%23C4B2F7'/%3E%3C/svg%3E");
}

.pub__vs-icon--spark {
  background: #FFF1E2;
}

.pub__vs-icon--spark:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 3l2.2 6.3L22.5 11l-6.3 2.2L14 19.5l-2.2-6.3L5.5 11l6.3-1.7z' fill='%23FF9C3F'/%3E%3Cpath d='M21.5 17l1.1 3 3 1.1-3 1.1-1.1 3-1.1-3-3-1.1 3-1.1z' fill='%23FFB23E'/%3E%3C/svg%3E");
}

.pub__vs-badge {
  background: #EDE3D2;
  color: var(--sk-ink-mute);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
}

.pub__vs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pub__vs-tags span {
  background: #FFEBD9;
  color: #E8641C;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
}

.pub__vs-card--new .pub__btn {
  margin-top: auto;
}

.pub__vs-card--new p i {
  color: var(--sk-ink);
}

@media (max-width: 820px) {
  .pub__vs {
    grid-template-columns: 1fr;
  }
}
/* ── популярные темы (чипы с эмодзи; тексты — Settings Topic*) ── */
.pub__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pub__topics-label {
  color: var(--sk-ink-mute);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin: 34px 0 14px;
}

.pub__topic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sk-paper);
  border: 1px solid var(--sk-line);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pub__topic:hover {
  transform: translateY(-2px);
  box-shadow: var(--sk-shadow);
  border-color: #F3C89B;
}

/* ── отзывы (Figma 18.07) ── */
.pub__reviews-head {
  text-align: center;
}

.pub__reviews-head h2 {
  margin-bottom: 0.3em;
}

.pub__reviews-head .pub__sub {
  margin: 0 auto;
}

.pub__reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.pub__review {
  background: var(--sk-paper);
  border: 1px solid var(--sk-line);
  border-radius: calc(var(--sk-r) + 4px);
  padding: 26px;
  box-shadow: var(--sk-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pub__review:hover {
  transform: translateY(-3px);
  box-shadow: var(--sk-shadow-lift);
}

.pub__review:before {
  content: "“”";
  font-family: Georgia, serif;
  font-size: 52px;
  line-height: 0.6;
  color: #F1E4CE;
  letter-spacing: -6px;
}

.pub__review-stars:before {
  content: "★★★★★";
  color: var(--sk-accent-2);
  letter-spacing: 3px;
  font-size: 15px;
}

.pub__review p {
  margin: 0;
  flex: 1;
}

.pub__review b {
  font-size: 14.5px;
}

.pub__review .pub__muted {
  margin-top: -8px;
}

/* ── стили иллюстраций: мини-превью + наклон за курсором ([data-tilt]) ── */
.pub__style-thumb {
  display: block;
  width: 100%;
  height: 86px;
  border-radius: 14px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.pub__style-thumb:before {
  content: "";
  position: absolute;
  right: 14%;
  top: 18%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}

.pub__style-thumb:after {
  content: "";
  position: absolute;
  left: -12%;
  bottom: -46%;
  width: 124%;
  height: 80%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
}

.pub__style-thumb--pixar_3d {
  background: linear-gradient(135deg, #FF9C3F, #FFC46B);
}

.pub__style-thumb--watercolor {
  background: linear-gradient(135deg, #8FD9C5, #C6EDE1);
}

.pub__style-thumb--cartoon {
  background: linear-gradient(135deg, #FFB23E, #FFE29A);
}

.pub__style-thumb--anime {
  background: linear-gradient(135deg, #9F86EF, #C9B6F2);
}

.pub__style-thumb--soft_kids {
  background: linear-gradient(135deg, #F6A48B, #FBD1C0);
}

.pub__style-thumb--minimal {
  background: linear-gradient(135deg, #B8C6C2, #E4EBE8);
}

/* 21.07: +6 стилей (storybook/gouache/clay/paper_cut/pencil/comic) */
.pub__style-thumb--storybook {
  background: linear-gradient(135deg, #C99B5F, #EBD3A8);
}

.pub__style-thumb--gouache {
  background: linear-gradient(135deg, #4E8FB8, #9CC8DE);
}

.pub__style-thumb--clay {
  background: linear-gradient(135deg, #E0745F, #F2B49B);
}

.pub__style-thumb--paper_cut {
  background: linear-gradient(135deg, #6FBF73, #B8E3B0);
}

.pub__style-thumb--pencil {
  background: linear-gradient(135deg, #B08BD9, #DCC8EF);
}

.pub__style-thumb--comic {
  background: linear-gradient(135deg, #F25C6E, #FFAC9F);
}

/* наклон за курсором: SkazkiTiltInit пишет --tilt-x/--tilt-y (объявлены здесь же) */
[data-tilt] {
  --tilt-x:0deg;
  --tilt-y:0deg;
  transform: perspective(720px) rotateY(var(--tilt-x, 0deg)) rotateX(var(--tilt-y, 0deg));
  transition: transform 0.18s ease;
  will-change: transform;
}

/* ── появление при скролле (SkazkiRevealInit) ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

[data-reveal].in {
  opacity: 1;
  transform: none;
}

[data-reveal="2"] {
  transition-delay: 0.09s;
}

[data-reveal="3"] {
  transition-delay: 0.18s;
}

[data-reveal="4"] {
  transition-delay: 0.27s;
}

/* ── финальный CTA: оранжевая полоса на всю ширину (Figma 18.07) ── */
.pub__final {
  margin: clamp(44px, 7vw, 72px) calc(50% - 50vw) -72px;
  padding: clamp(48px, 8vw, 88px) 24px;
  background: var(--sk-grad);
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.pub__final:before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background: radial-gradient(3px 3px at 12% 30%, rgba(255, 255, 255, 0.5), transparent 60%), radial-gradient(2px 2px at 84% 22%, rgba(255, 255, 255, 0.45), transparent 60%), radial-gradient(2.5px 2.5px at 62% 74%, rgba(255, 255, 255, 0.4), transparent 60%), radial-gradient(2px 2px at 28% 82%, rgba(255, 255, 255, 0.35), transparent 60%);
}

.pub__final-spark {
  font-size: 26px;
  display: block;
  margin-bottom: 10px;
  position: relative;
}

.pub__final h2, .pub__final .title {
  color: #fff;
  margin: 0 0 0.4em;
  position: relative;
  font-family: var(--sk-font-display);
  font-weight: 600;
  font-size: clamp(1.5em, 3.4vw, 2.2em);
}

.pub__final-sub {
  color: rgba(255, 255, 255, 0.92);
  max-width: 460px;
  margin: 0 auto 26px;
  position: relative;
}

.pub__btn--white {
  background: #fff;
  color: #E8641C;
  box-shadow: 0 10px 26px rgba(120, 52, 3, 0.28);
  position: relative;
}

.pub__btn--white:hover {
  color: #E8641C;
}

/* ── демо-галерея примеров (Figma 18.07): оверлей обложки поверх листалки ── */
.pub__flip img {
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.pub__book-overlay {
  position: absolute;
  inset: 0 0 64px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.pub__book-overlay .pub__fan-tag {
  font-size: 11px;
  position: absolute;
  top: 16px;
  left: 18px;
}

.pub__book-title {
  font-family: var(--sk-font-display);
  font-weight: 600;
  color: #fff;
  font-size: 19px;
  line-height: 1.25;
}

.pub__book-chip {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
}

.pub__flip:not([data-page="1"]) .pub__book-overlay {
  opacity: 0;
}

/* ── мобильная раскладка ── */
@media (max-width: 820px) {
  .pub__hero-grid {
    grid-template-columns: 1fr;
  }
  .pub__menu {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }
}
@media (max-width: 560px) {
  .pub__fan {
    min-height: 320px;
  }
  .pub__fan-card {
    width: 170px;
    height: 230px;
  }
  .pub__fan-card--mint {
    transform: translate(calc(-50% - 72px + var(--px, 0px)), calc(-50% + var(--py, 0px))) rotate(-8deg);
  }
  .pub__fan-card--violet {
    transform: translate(calc(-50% + 72px + var(--px, 0px)), calc(-50% + var(--py, 0px))) rotate(8deg);
  }
}
/* ── реальные ассеты (proj/grok-assets.php): превью стилей и пиктограммы тем ── */
.pub__style-img {
  display: block;
  width: 100%;
  height: 86px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 14px;
}

.pub__value {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pub__value-pic {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
}

.pub__value-ico {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: #FBF3E4;
  border-radius: 13px;
}

/* ── веер hero с реальными обложками (images/demo/*-1.*, generator: proj/grok-assets.php) ── */
.pub__fan-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.pub__fan-card--img:before {
  display: none;
} /* декоративная «луна» не нужна поверх арта */
.pub__fan-card--img:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 58%;
  border-radius: 0;
  background: linear-gradient(180deg, transparent, rgba(43, 33, 23, 0.62));
} /* скрим под заголовок */
.pub__fan-card--img .pub__fan-tag {
  text-shadow: 0 1px 6px rgba(43, 33, 23, 0.5);
}

/* ── текстовые страницы (modules/text.php: /legal/privacy/, /legal/offer/) ──
   селекторы строго section.textpage — класс тела = имя страницы (ловушка body) */
section.textpage {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 36px) 64px;
}

section.textpage h1 {
  font-size: 1.7em;
  margin: 0.6em 0;
}

section.textpage .textpage__body {
  color: var(--sk-ink-soft);
  line-height: 1.65;
}

section.textpage .textpage__body h2 {
  color: var(--sk-ink);
  font-size: 1.2em;
  margin: 1.6em 0 0.5em;
}

section.textpage .textpage__body p {
  margin: 0.7em 0;
}

section.textpage .textpage__body ul {
  margin: 0.7em 0;
  padding-left: 1.3em;
}

section.textpage .textpage__body li {
  margin: 0.35em 0;
}

section.textpage .textpage__body a {
  color: #b5722a;
}

section.textpage .textpage__body table {
  border-collapse: collapse;
  margin: 1em 0;
}

section.textpage .textpage__body td, section.textpage .textpage__body th {
  border: 1px solid var(--sk-line);
  padding: 8px 12px;
  text-align: left;
}

/*
	Сказкомат: стили ЛК (.app, Cabinet/Views) и визарда онбординга
	(.onb, Children/Views/OnboardingView). Полирует дизайнер (§21).
	Тёплая «книжная» палитра — та же, что в письмах и на публичных страницах.
*/
/* ==================== ЛК (§15) ==================== */
/* 19.07: 640px был мобайл-скетчем — ЛК живёт в той же сетке, что сайт (1080),
   формы ограничены 680px, чтобы поля не растягивались на всю ширину.
   20.07: чтобы ЛК не выглядел урезанным на широких экранах, добавлены
   полноширинные элементы — лента меню-полоса и свечение фона (как .pub).
   20.07 (2): селекторы строго section.app — ядро вешает ИМЯ СТРАНИЦЫ классом
   на <body> (AddBodyClass), и у дашборда /app/ это «app»: голое .app сжимало
   весь body вместе с ядровыми шапкой и футером. */
section.app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 36px) 56px;
  font-size: 16px;
  width: 100%;
  position: relative;
}

/* высота фиксированная (не bottom:0): градиенты гаснут внутри полосы,
   иначе на коротких страницах свечение резалось бы жёсткой кромкой */
section.app:before {
  content: "";
  position: absolute;
  top: 0;
  height: 620px;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(560px 340px at 88% -40px, rgba(255, 178, 62, 0.15), transparent 70%), radial-gradient(480px 320px at 4% 300px, rgba(143, 217, 197, 0.13), transparent 70%);
}

section.app form {
  max-width: 680px;
}

section.app h1 {
  font-size: 1.45em;
  margin: 0.4em 0;
}

section.app h2 {
  font-size: 1.15em;
  margin: 1em 0 0.4em;
  color: #4a3f35;
}

/* лента меню ЛК — полоса на всю ширину экрана, ссылки внутри на сетке 1080 */
.app__menu {
  width: 100%;
  margin: 10px 0 0;
  background: var(--sk-paper);
  border-top: 1px solid var(--sk-line);
  border-bottom: 1px solid var(--sk-line);
}

.app__menu-in {
  display: flex;
  gap: 6px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 7px clamp(16px, 4vw, 36px);
  overflow-x: auto;
}

.app__menu a {
  padding: 8px 13px;
  border-radius: 10px;
  text-decoration: none;
  color: #6b5a48;
  white-space: nowrap;
}

.app__menu a.cur {
  background: #ffd766;
  color: #3d3128;
  font-weight: 600;
}

.app__menu-lang {
  margin-left: auto;
  color: #a08c72;
}

.app__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.app__card {
  flex: 1 1 180px;
  border: 1.5px solid #e4c98f;
  border-radius: 14px;
  padding: 12px;
  text-decoration: none;
  color: #3d3128;
}

.app__card img {
  width: 100%;
  border-radius: 10px;
  aspect-ratio: 2/3;
  object-fit: cover;
  background: #f7ecd9;
}

.app__card h3 {
  margin: 0.4em 0 0.1em;
}

.app__muted {
  color: #a08c72;
  font-size: 0.85em;
}

.app__btn {
  display: inline-block;
  padding: 11px 18px;
  background: #ff9f43;
  color: #fff;
  border: 0;
  border-radius: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-size: 1em;
}

.app__btn--ghost {
  background: #fff;
  color: #b5722a;
  border: 1.5px solid #e4c98f;
}

.app__btn--danger {
  background: #e05656;
}

section.app form input[type=text], section.app form input[type=date], section.app form input[type=email], section.app form input[type=password], section.app form select {
  width: 100%;
  padding: 11px;
  margin: 5px 0;
  border: 1px solid #e4c98f;
  border-radius: 10px;
  font-size: 1em;
  box-sizing: border-box;
}

.app__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

/* каждая пара radio+label — в своём div (20.07): без него скрытый absolute-input
   вставал в начало flex-контейнера и клик по плитке скроллил экран наверх */
.app__tiles > div {
  position: relative;
  display: flex;
}

.app__tiles > div > label {
  width: 100%;
}

/* Плитки радио/чекбоксов: разметка HtmlTags::InputRadio/InputCheckbox — input + label(for/id) */
.app__tile-input {
  position: absolute;
  opacity: 0;
}

.app__tile-input + label {
  display: block;
  padding: 9px 13px;
  border: 1.5px solid #e4c98f;
  border-radius: 11px;
  cursor: pointer;
}

.app__tile-input:checked + label {
  background: #ffd766;
  border-color: #d9a441;
  font-weight: 500;
}

.app__check {
  margin: 10px 0;
} /* обёртка чекбоксов glasses/photo_consent (ChildrenView) */
/* Скидка на плитках подарков (21.07, GiftView): зачёркнутая цена N×разовой + бейдж −N% */
.app__old-price {
  color: #a08b70;
  font-size: 0.85em;
  text-decoration-color: #c9503f;
}

.app__save {
  display: inline-block;
  background: #e05d4a;
  color: #fff;
  border-radius: 8px;
  padding: 1px 7px;
  font-size: 0.78em;
  font-weight: 700;
  vertical-align: 1px;
}

.app__note {
  background: #fdf6ea;
  border-radius: 12px;
  padding: 12px;
  font-size: 0.9em;
  color: #6b5a48;
  margin: 10px 0;
}

/* Карточки «следующий выпуск»/«подписка» по-детски (21.07): иконка + текст + кнопка */
.app__sub-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fdf6ea;
  border: 1px solid #f0e2c8;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 8px 0;
}

.app__sub-icon {
  font-size: 1.5em;
  line-height: 1;
}

.app__sub-body {
  flex: 1 1 auto;
  min-width: 0;
  color: #6b5a48;
  font-size: 0.95em;
}

.app__sub-body b {
  color: #3d3128;
}

.app__sub-card .app__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .app__sub-card {
    flex-wrap: wrap;
  }
  .app__sub-card .app__btn {
    width: 100%;
    text-align: center;
  }
}
.app__warn {
  background: #fdeaea;
  border-radius: 12px;
  padding: 12px;
  font-size: 0.9em;
  color: #8a4a4a;
  margin: 10px 0;
}

.app__ok {
  background: #eaf7ea;
  border-radius: 12px;
  padding: 12px;
  font-size: 0.9em;
  color: #3d7a3d;
  margin: 10px 0;
}

.app__timeline {
  border-left: 2px solid #e4c98f;
  padding-left: 14px;
  margin: 10px 0;
}

.app__timeline div {
  margin-bottom: 10px;
}

.app__flip {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}

.app__flip img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(60, 40, 10, 0.2);
}

.app__flip-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}

.app__canon img {
  max-width: 180px;
  border-radius: 12px;
}

.app__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.app__code {
  letter-spacing: 0.15em;
} /* код подарка (GiftView) */
.app__uppercase {
  text-transform: uppercase;
} /* поле ввода кода (GiftView) */
.app__pdf {
  width: 100%;
  height: 70vh;
} /* фолбэк-встраивание PDF (LibraryView) */
.app__form-gap {
  margin-top: 10px;
} /* форма адреса в карточке заказа (OrdersView) */
.app__actions {
  margin-top: 8px;
} /* кнопки действий подписки (SubscriptionView) */
.app__inline-form {
  display: inline;
} /* формы-кнопки в одну строку (SubscriptionView) */
/* ==================== Визард онбординга (§7.2–7.4, §8) ==================== */
.onb {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
  font-size: 16px;
}

.onb h1 {
  font-size: 1.5em;
  margin: 0.4em 0;
}

.onb__sub {
  color: #6b5a48;
  margin: 0.8em 0 0.4em;
}

.onb__note {
  color: #a08c72;
  font-size: 0.85em;
}

.onb__form input[type=text], .onb__form input[type=date], .onb__form input[type=email], .onb__form input[type=password], .onb__form select {
  width: 100%;
  padding: 12px;
  margin: 6px 0;
  border: 1px solid #e4c98f;
  border-radius: 10px;
  font-size: 1em;
  box-sizing: border-box;
}

.onb__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.onb__tiles > div {
  position: relative;
  display: flex;
} /* см. .app__tiles>div (20.07) */
.onb__tiles > div > label {
  width: 100%;
}

/* Плитки радио/чекбоксов: разметка HtmlTags::InputRadio/InputCheckbox — input + label(for/id) */
.onb__tile-input {
  position: absolute;
  opacity: 0;
}

.onb__tile-input + label {
  display: block;
  padding: 10px 14px;
  border: 1.5px solid #e4c98f;
  border-radius: 12px;
  cursor: pointer;
}

.onb__tile-input:checked + label {
  background: #ffd766;
  border-color: #d9a441;
  font-weight: 500;
}

.onb__next {
  display: inline-block;
  width: 100%;
  padding: 14px;
  margin-top: 14px;
  background: #ff9f43;
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 1.05em;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.onb__check {
  display: block;
  margin: 10px 0;
} /* обёртка чекбоксов glasses/photo_consent (input+label от HtmlTags) */
.onb__photo summary {
  cursor: pointer;
  color: #b5722a;
  margin: 10px 0;
}

.onb__consent {
  background: #fdf6ea;
  border-radius: 12px;
  padding: 12px;
  font-size: 0.9em;
}

.onb__progress {
  display: flex;
  gap: 4px;
  max-width: 520px;
  margin: 12px auto 0;
  padding: 0 16px;
}

.onb__progress a, .onb__progress b {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: #eee2cc;
  font-size: 0;
}

.onb__progress .done {
  background: #d9a441;
}

.onb__progress .cur {
  background: #ff9f43;
}

/* Шаг темы на ПК (21.07, фидбек юзера: «простыня выходит»): секция шире,
   чипы компактнее — варианты укладываются в несколько колонок */
.onb--wide {
  max-width: 900px;
}

.onb--wide form {
  max-width: none;
}

.onb__tiles--chips {
  gap: 7px;
}

.onb__tiles--chips > div {
  flex: 0 1 auto;
}

.onb__tiles--chips .onb__tile-input + label {
  padding: 7px 12px;
  font-size: 0.92em;
  border-radius: 999px;
  white-space: nowrap;
}

.onb__custom {
  max-width: 420px;
} /* поле «свой вариант» настроения/повода */
@media (max-width: 640px) {
  .onb--wide {
    max-width: 520px;
  }
  .onb__tiles--chips .onb__tile-input + label {
    white-space: normal;
  }
}
/* Выбор существующего ребёнка на шаге child (20.07): кнопки-плитки как радио-плитки */
.onb__pick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.onb__pick-form {
  display: inline;
}

.onb__pick {
  padding: 10px 14px;
  border: 1.5px solid #e4c98f;
  border-radius: 12px;
  background: #fff;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.15s;
}

.onb__pick:hover {
  background: #ffd766;
  border-color: #d9a441;
}

.onb__family-row {
  display: flex;
  gap: 8px;
}

/* возраст (20.07): селектор с input — иначе проигрывал по специфичности
   общему .onb__form input[type=text]{width:100%} и растягивался на весь ряд */
.onb__form input.onb__family-age {
  width: 128px;
  flex: 0 0 auto;
}

.onb__canon {
  min-height: 200px;
  text-align: center;
}

.onb__canon-img {
  max-width: 70%;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(60, 40, 10, 0.18);
}

.onb__bar {
  height: 12px;
  background: #eee2cc;
  border-radius: 6px;
  overflow: hidden;
  margin: 20px 0 8px;
}

.onb__bar-fill {
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg, #ffd766, #ff9f43);
  transition: width 0.8s;
}

.onb--center {
  text-align: center;
}

.onb__book {
  width: 100%;
  height: 70vh;
  border: 1px solid #e4c98f;
  border-radius: 8px;
}

.onb__plans {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.onb__plan-card {
  flex: 1 1 210px;
  border: 1.5px solid #e4c98f;
  border-radius: 14px;
  padding: 14px;
}

/* ── тариф на превью (20.07): плитки планов, печать, график, итог ── */
.onb__tiles--plans > div {
  flex: 1 1 100%;
}

.onb__tiles--plans .onb__tile-input + label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
}

.onb__tiles--plans .onb__tile-input + label b {
  flex: 0 1 auto;
}

.onb__plan-meta {
  color: #a08c72;
  font-size: 0.82em;
}

/* чекбокс «печатная книга» скрывается CSS-ом, пока выбрана бесплатная проба
   (плитка пробы несёт data-trial="Y"; сервер print_wanted для пробы игнорирует) */
.onb__tiles--plans:has(.onb__tile-input[data-trial=Y]:checked) ~ .onb__check {
  display: none;
}

/* подсветка незаполненных полей перед оплатой (пре-чек SkazkiCheckoutInit) */
.onb__form .message.error {
  background: #fdeaea;
  border-radius: 10px;
  padding: 10px 13px;
  color: #8a4a4a;
  font-size: 0.9em;
  margin: 8px 0;
}

.onb__form input.error, .onb__form select.error {
  border-color: #e05656 !important;
}

.onb__plan-price {
  margin-left: auto;
  font-weight: 700;
  white-space: nowrap;
}

.onb__pay-block {
  margin: 14px 0;
  padding: 13px 15px;
  background: #fdf6ea;
  border-radius: 12px;
}

.onb__pay-block > .onb__sub:first-child {
  margin-top: 0;
}

.onb__copies {
  padding: 10px 13px;
  border: 1px solid #e4c98f;
  border-radius: 10px;
  font-size: 1em;
  background: #fff;
  margin-right: 9px;
}

.onb__addr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
}

@media (max-width: 480px) {
  .onb__addr-row {
    grid-template-columns: 1fr;
  }
}
/* график выпусков — чипы с номерами (20.07, строит SkazkiCheckoutInit) */
.onb__schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 6px 0;
}

.onb__sched-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 6px;
  background: var(--sk-paper);
  border: 1px solid var(--sk-line);
  border-radius: 999px;
  font-size: 0.86em;
  color: #6b5a48;
  white-space: nowrap;
}

.onb__sched-chip i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sk-grad);
  color: #fff;
  font-style: normal;
  font-weight: 600;
  font-size: 0.8em;
  flex-shrink: 0;
}

.onb__total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.06em;
  margin: 0 0 6px;
}

.onb__total b {
  font-size: 1.25em;
}

.onb__next--ghost {
  background: #fff;
  color: #b5722a;
  border: 1.5px solid #e4c98f;
}

.onb__price {
  font-size: 1.3em;
  font-weight: 700;
  color: #b5722a;
}

.onb__hidden {
  display: none;
} /* форма превью до готовности канона (PrintPreview) */
/* ── инфографика плиток визарда (18.07): свотчи цветов волос/кожи/глаз ──
   разметка: HtmlTags::InputRadio с <i class="onb__swatch onb__swatch--{код}"></i> в label */
.onb__swatch {
  display: inline-block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -3px;
  border: 1.5px solid rgba(43, 33, 23, 0.14);
}

.onb__swatch--black {
  background: #2A2320;
}

.onb__swatch--dark-brown {
  background: #4E3623;
}

.onb__swatch--brown {
  background: #7B4F2B;
}

.onb__swatch--light-brown {
  background: #A97C4C;
}

.onb__swatch--blond {
  background: #E8C883;
}

.onb__swatch--red {
  background: #C75B2E;
}

.onb__swatch--other {
  background: conic-gradient(#C75B2E, #E8C883, #7B4F2B, #2A2320, #C75B2E);
}

.onb__swatch--skin-light {
  background: #F6E0CD;
}

.onb__swatch--skin-warm {
  background: #EFC9A6;
}

.onb__swatch--skin-tan {
  background: #D9A877;
}

.onb__swatch--skin-brown {
  background: #A9774A;
}

.onb__swatch--skin-dark {
  background: #6E4A2F;
}

.onb__swatch--eyes-brown {
  background: #6B4226;
}

.onb__swatch--eyes-blue {
  background: #5B8FD4;
}

.onb__swatch--eyes-green {
  background: #5F9E6E;
}

.onb__swatch--eyes-gray {
  background: #9AA3AC;
}

.onb__swatch--eyes-dark {
  background: #3A2E28;
}

/* ── блок «Загрузить фото» (18.07): аккуратная карточка вместо голого details ── */
.onb__photo {
  margin: 16px 0;
  border: 1.5px dashed #e4c98f;
  border-radius: 14px;
  background: #fffdf8;
}

.onb__photo summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  font-weight: 600;
  color: #b5722a;
}

.onb__photo summary::-webkit-details-marker {
  display: none;
}

.onb__photo summary:after {
  content: "";
  width: 10px;
  height: 10px;
  margin-left: auto;
  flex-shrink: 0;
  border-right: 2px solid #b5722a;
  border-bottom: 2px solid #b5722a;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.onb__photo[open] summary:after {
  transform: rotate(225deg);
}

.onb__consent {
  background: transparent;
  border-top: 1.5px dashed #e4c98f;
  border-radius: 0 0 14px 14px;
  padding: 14px 16px 18px;
  font-size: 0.9em;
}

/* стилизованный input file (SkazkiFileInit: контейнер [data-file] + [data-file-name]) */
.onb__file {
  display: block;
  margin-top: 12px;
  cursor: pointer;
}

.onb__file input[type=file] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.onb__file-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px dashed #d9a441;
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.onb__file:hover .onb__file-drop {
  border-color: #ff9f43;
  background: #fff8ec;
}

.onb__file-ico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #ffd766, #ff9f43);
  position: relative;
}

.onb__file-ico:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5'/%3E%3Cpath d='M7.5 9.5L12 5l4.5 4.5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E") center/52% no-repeat;
}

.onb__file b {
  display: block;
  color: #3d3128;
}

.onb__file-name {
  display: block;
  color: #a08c72;
  font-size: 0.92em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

.onb__file.has-file .onb__file-drop {
  border-style: solid;
  border-color: #57C4AB;
  background: #f2fbf8;
}

/* чекбоксы .cb в ЛК/визарде — каждый на своей строке */
section.app .cb + label, .onb .cb + label {
  display: flex;
  margin: 9px 0;
}

/* ── иконки типов волос (18.07): рисованные, по коду ChildOptions::HAIR_TYPES ── */
.onb__ico {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 7px;
  vertical-align: -5px;
  background: center/100% no-repeat;
}

.onb__ico--ht-short {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2214.5%22 r=%226.5%22 fill=%22%23F2C9A2%22/%3E%3Cpath d=%22M5.5 14a6.5 6.5 0 0 1 13 0l-2.4-.2a4.2 4.6 0 0 0-8.2 0z%22 fill=%22%234A3320%22/%3E%3C/svg%3E");
}

.onb__ico--ht-medium {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2214.5%22 r=%226.5%22 fill=%22%23F2C9A2%22/%3E%3Cpath d=%22M5.5 14a6.5 6.5 0 0 1 13 0l-2.4-.2a4.2 4.6 0 0 0-8.2 0z%22 fill=%22%234A3320%22/%3E%3Crect x=%224.6%22 y=%2212.6%22 width=%222.4%22 height=%225.2%22 rx=%221.2%22 fill=%22%234A3320%22/%3E%3Crect x=%2217%22 y=%2212.6%22 width=%222.4%22 height=%225.2%22 rx=%221.2%22 fill=%22%234A3320%22/%3E%3C/svg%3E");
}

.onb__ico--ht-long {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2214.5%22 r=%226.5%22 fill=%22%23F2C9A2%22/%3E%3Cpath d=%22M5.5 14a6.5 6.5 0 0 1 13 0l-2.4-.2a4.2 4.6 0 0 0-8.2 0z%22 fill=%22%234A3320%22/%3E%3Crect x=%224.4%22 y=%2212.4%22 width=%222.6%22 height=%228.6%22 rx=%221.3%22 fill=%22%234A3320%22/%3E%3Crect x=%2217%22 y=%2212.4%22 width=%222.6%22 height=%228.6%22 rx=%221.3%22 fill=%22%234A3320%22/%3E%3C/svg%3E");
}

.onb__ico--ht-curly {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2214.5%22 r=%226.5%22 fill=%22%23F2C9A2%22/%3E%3Ccircle cx=%228%22 cy=%229.4%22 r=%222.6%22 fill=%22%234A3320%22/%3E%3Ccircle cx=%2212%22 cy=%228.2%22 r=%222.8%22 fill=%22%234A3320%22/%3E%3Ccircle cx=%2216%22 cy=%229.4%22 r=%222.6%22 fill=%22%234A3320%22/%3E%3Ccircle cx=%226.2%22 cy=%2212.4%22 r=%222%22 fill=%22%234A3320%22/%3E%3Ccircle cx=%2217.8%22 cy=%2212.4%22 r=%222%22 fill=%22%234A3320%22/%3E%3C/svg%3E");
}

.onb__ico--ht-straight {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2214.5%22 r=%226.5%22 fill=%22%23F2C9A2%22/%3E%3Cpath d=%22M5.5 14a6.5 6.5 0 0 1 13 0l-2.4-.2a4.2 4.6 0 0 0-8.2 0z%22 fill=%22%234A3320%22/%3E%3Crect x=%224.8%22 y=%2212.6%22 width=%222%22 height=%226.6%22 fill=%22%234A3320%22/%3E%3Crect x=%2217.2%22 y=%2212.6%22 width=%222%22 height=%226.6%22 fill=%22%234A3320%22/%3E%3Crect x=%2211%22 y=%227%22 width=%222%22 height=%223%22 fill=%22%234A3320%22/%3E%3C/svg%3E");
}

.onb__ico--ht-ponytail {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2214.5%22 r=%226.5%22 fill=%22%23F2C9A2%22/%3E%3Cpath d=%22M5.5 14a6.5 6.5 0 0 1 13 0l-2.4-.2a4.2 4.6 0 0 0-8.2 0z%22 fill=%22%234A3320%22/%3E%3Ccircle cx=%2219.4%22 cy=%229.6%22 r=%222%22 fill=%22%234A3320%22/%3E%3Cpath d=%22M19.6 11q1.4 3.6-.6 6.4%22 stroke=%22%234A3320%22 stroke-width=%222%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E");
}

.onb__ico--ht-braids {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2214.5%22 r=%226.5%22 fill=%22%23F2C9A2%22/%3E%3Cpath d=%22M5.5 14a6.5 6.5 0 0 1 13 0l-2.4-.2a4.2 4.6 0 0 0-8.2 0z%22 fill=%22%234A3320%22/%3E%3Ccircle cx=%225.6%22 cy=%2215.4%22 r=%221.7%22 fill=%22%234A3320%22/%3E%3Ccircle cx=%225.6%22 cy=%2218.6%22 r=%221.5%22 fill=%22%234A3320%22/%3E%3Ccircle cx=%2218.4%22 cy=%2215.4%22 r=%221.7%22 fill=%22%234A3320%22/%3E%3Ccircle cx=%2218.4%22 cy=%2218.6%22 r=%221.5%22 fill=%22%234A3320%22/%3E%3C/svg%3E");
}

.onb__ico--ht-bald {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2212%22 cy=%2214.5%22 r=%226.5%22 fill=%22%23F2C9A2%22/%3E%3Cpath d=%22M11 7.6q1-2.4 3-1.6%22 stroke=%22%234A3320%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Ccircle cx=%2214.4%22 cy=%226%22 r=%221%22 fill=%22%234A3320%22/%3E%3C/svg%3E");
}

/* ── чипы стилей визарда (та же палитра, что превью на лендинге) ── */
.onb__stylechip {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  margin-right: 8px;
  vertical-align: -5px;
}

.onb__stylechip--pixar_3d {
  background: linear-gradient(135deg, #FF9C3F, #FFC46B);
}

.onb__stylechip--watercolor {
  background: linear-gradient(135deg, #8FD9C5, #C6EDE1);
}

.onb__stylechip--cartoon {
  background: linear-gradient(135deg, #FFB23E, #FFE29A);
}

.onb__stylechip--anime {
  background: linear-gradient(135deg, #9F86EF, #C9B6F2);
}

.onb__stylechip--soft_kids {
  background: linear-gradient(135deg, #F6A48B, #FBD1C0);
}

.onb__stylechip--minimal {
  background: linear-gradient(135deg, #B8C6C2, #E4EBE8);
}

/* 21.07: +6 стилей (storybook/gouache/clay/paper_cut/pencil/comic) */
.onb__stylechip--storybook {
  background: linear-gradient(135deg, #C99B5F, #EBD3A8);
}

.onb__stylechip--gouache {
  background: linear-gradient(135deg, #4E8FB8, #9CC8DE);
}

.onb__stylechip--clay {
  background: linear-gradient(135deg, #E0745F, #F2B49B);
}

.onb__stylechip--paper_cut {
  background: linear-gradient(135deg, #6FBF73, #B8E3B0);
}

.onb__stylechip--pencil {
  background: linear-gradient(135deg, #B08BD9, #DCC8EF);
}

.onb__stylechip--comic {
  background: linear-gradient(135deg, #F25C6E, #FFAC9F);
}

/* ── бейджи языка сказки ── */
.onb__lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
  font-style: normal;
  font-weight: 700;
  font-size: 10.5px;
  background: linear-gradient(135deg, #ffd766, #ff9f43);
  color: #fff;
}

.onb__lang-badge--kz {
  background: linear-gradient(135deg, #57C4AB, #2E8F7A);
}

/* ── шаг стиля: карточки с реальными превью (images/styles/*, grok-assets.php) ── */
.onb__tiles--big {
  gap: 10px;
}

.onb__tiles--big > div {
  flex: 1 1 30%;
  min-width: 150px;
}

.onb__tiles--big .onb__tile-input + label {
  width: 100%;
  padding: 10px;
}

.onb__style-pic {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 9px;
  margin-bottom: 8px;
}

.onb__tiles--big .onb__tile-input + label b {
  display: block;
  font-size: 0.95em;
}

/* ── формы аутентификации (.auth: /auth/* и шаг 7 визарда) ──
   21.07: селекторы СТРОГО section.auth — ядро вешает ИМЯ СТРАНИЦЫ классом на
   <body> (у /auth/ это «auth»), голый .auth сжимал body вместе с шапкой и
   футером (та же ловушка, что была у /e404/ и /app/) */
section.auth {
  max-width: 560px;
  margin: 0 auto;
}

.onb section.auth {
  max-width: none;
  margin: 0;
}

section.auth h2 {
  font-size: 1.2em;
  margin: 1.2em 0 0.6em;
}

.auth__form {
  display: grid;
  gap: 10px;
}

.auth__form input[type=text], .auth__form input[type=email], .auth__form input[type=password] {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid #e4c98f;
  border-radius: 12px;
  font-size: 1em;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth__form input:focus {
  outline: none;
  border-color: #ff9f43;
  box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.18);
}

.auth__submit {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 4px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(120deg, #FF7A2F, #FFB23E);
  color: #fff;
  font-size: 1.05em;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 122, 47, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.auth__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 26px rgba(255, 122, 47, 0.38);
}

.auth__social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 6px;
}

.auth__social-btn {
  flex: 1 1 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 10px;
  border: 1.5px solid #e4c98f;
  border-radius: 12px;
  background: #fff;
  color: #3d3128;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92em;
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.auth__social-btn:hover {
  border-color: #d9a441;
  box-shadow: 0 6px 16px rgba(64, 42, 15, 0.1);
  transform: translateY(-1px);
}

.auth__social-btn:before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: center/100% no-repeat;
}

.auth__social-btn--google:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3l5.7-5.7C34 5.8 29.3 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.6-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3l5.7-5.7C34 5.8 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C41 35.4 44 30.2 44 24c0-1.3-.1-2.6-.4-3.9z'/%3E%3C/svg%3E");
}

.auth__social-btn--facebook:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877F2' d='M24 12a12 12 0 1 0-13.9 11.9v-8.4h-3V12h3V9.4c0-3 1.8-4.7 4.5-4.7 1.3 0 2.7.2 2.7.2v3h-1.5c-1.5 0-2 .9-2 1.9V12h3.3l-.5 3.5h-2.8v8.4A12 12 0 0 0 24 12z'/%3E%3C/svg%3E");
}

.auth__social-btn--apple:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232B2117' d='M16.4 12.7c0-2.4 2-3.6 2.1-3.7-1.1-1.7-2.9-1.9-3.5-1.9-1.5-.2-2.9.9-3.7.9-.8 0-1.9-.9-3.2-.9-1.6 0-3.2 1-4 2.4-1.7 3-.4 7.4 1.2 9.8.8 1.2 1.8 2.5 3.1 2.4 1.2 0 1.7-.8 3.2-.8s1.9.8 3.2.8c1.3 0 2.2-1.2 3-2.4.9-1.4 1.3-2.7 1.3-2.8-.1 0-2.6-1-2.7-3.8zM14 5.5c.7-.8 1.1-1.9 1-3-1 0-2.2.7-2.9 1.5-.6.7-1.2 1.9-1 3 1.1.1 2.2-.6 2.9-1.5z'/%3E%3C/svg%3E");
}

.auth__links {
  color: #a08c72;
  margin-top: 10px;
}

.auth__links a {
  color: #b5722a;
  font-weight: 600;
}

/* сообщения форм авторизации */
.auth__ok {
  background: #f2fbf8;
  border: 1.5px solid #8FD9C5;
  color: #2E8F7A;
  border-radius: 12px;
  padding: 12px 15px;
}

.auth__warn {
  background: #fdf0ec;
  border: 1.5px solid #f0b5a0;
  color: #c05621;
  border-radius: 12px;
  padding: 12px 15px;
}

/* ── живые прогресс-бары (19.07): shimmer + мягкая пульсация статуса ── */
.onb__bar-fill {
  position: relative;
  overflow: hidden;
  transition: width 0.9s ease;
}

.onb__bar-fill:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.55) 50%, transparent 75%);
  animation: onbshimmer 1.5s linear infinite;
}

@keyframes onbshimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
[data-generating-stage] {
  animation: onbpulse 2.2s ease-in-out infinite;
}

@keyframes onbpulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
/* индикатор ожидания канона на превью (бесконечная «комета») */
.onb__wait {
  height: 10px;
  max-width: 340px;
  margin: 16px auto 0;
  border-radius: 6px;
  background: #eee2cc;
  overflow: hidden;
}

.onb__wait i {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ffd766, #ff9f43);
  animation: onbwait 1.5s ease-in-out infinite;
}

@keyframes onbwait {
  0% {
    margin-left: -40%;
  }
  100% {
    margin-left: 102%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .onb__bar-fill:after, .onb__wait i, [data-generating-stage] {
    animation: none;
  }
}
/* карточка черновика в ЛК */
.app__card--draft {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.app__card--draft .app__btn {
  margin-top: auto;
}

/* ── промокод / подарочный код в чекаутах (20.07): поле + «Применить» ──
   селекторы с input/тегами — иначе проигрывают общим .onb__form input[type=text]
   { width:100% } и .onb__next{width:100%}: поле сжималось в ниточку, кнопка
   растягивалась на весь ряд (тот же класс ловушки, что у .onb__family-age) */
.app__hidden {
  display: none;
}

.app__copies {
  margin: 8px 0;
} /* выбор числа печатных экземпляров в чекауте ЛК (аудит 21.07) */
.app__copies select {
  max-width: 120px;
}

.onb__promo, .app__promo {
  margin: 14px 0;
}

.onb__promo-row, .app__promo-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.onb__form input.onb__promo-input, section.app form input.app__promo-input {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
}

.onb__promo-input::placeholder, .app__promo-input::placeholder {
  text-transform: none;
}

.onb__promo-row .onb__next {
  width: auto;
  flex: 0 0 auto;
  margin: 6px 0;
  padding: 12px 20px;
  font-size: 1em;
}

.app__promo-row .app__btn {
  flex: 0 0 auto;
}

[data-promo-status] {
  margin-top: 6px;
}

[data-promo-status].error {
  color: #b3413c;
}

/*# sourceMappingURL=main.css.map */