/* Черенок — фронтенд wizard'а.
   Пересобран под ПОЛНЫЙ design handoff Жени (design_handoff_ucoz_migrate/README.md, 2026-09-04):
   7 экранов (Landing → Контент → Каталог → Дизайн → Сборка → Готово → Регистрация-модалка),
   high-fidelity 1:1 по цветам/отступам/анимациям, uKit Design System токены (Inter/Inter Display).
   Экраны "Каталог"/"Сборка" в хендоффе — фейковая демо-анимация (0→134 за 3с); здесь они управляются
   РЕАЛЬНЫМ прогрессом backend job'а (см. js/app.js) — визуально сохранён тот же стиль (спиннер,
   счётчик, меняющиеся подписи), но данные настоящие. Индикатор шагов хендоффа — 6 UI-имён
   ("Ссылка·Контент·Каталог·Дизайн·Сборка·Готово") — замаплен на реальные backend-статусы в JS.
*/

@import url('/css/fonts.css');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blue: #3D8BEE;
  --blue-hover: #1F6FD4;
  --ink: #141414;
  --ink-soft: #21201F;
  --gray-800: #3D4248;
  --gray-600: #6B7178;
  --gray-500: #878D95;
  --gray-400: #A4A9B0;
  --gray-300: #BFC3C9;
  --gray-200: #DADDE1;
  --gray-100: #ECEEF0;
  --gray-050: #F2F3F5;
  --gray-025: #F7F8F9;
  --white: #FFFFFF;
  --success: #4CAF50;
  --ai-purple: #B03DFF;
  --danger: #C62828;
  --ease: cubic-bezier(.4,0,.2,1);
  --header-h: 72px; /* высота .site-header — экраны 02-07 считают свою высоту как 100vh МИНУС эта
                        переменная (см. .screen-body/.screen-scan/.screen-design/.screen-building/
                        .screen-ready/.screen-error), иначе шапка+min-height:100vh вместе дают больше
                        одного экрана и низ (design-panel и т.п.) уезжает за фолд со скроллом —
                        баг, из-за которого экраны 2-6 "не помещались" как у Жени (там весь макет —
                        один фиксированный height:100vh с overflow:hidden, скролл только внутри
                        конкретных зон). На мобиле шапка 56px — см. переопределение в медиа-запросе. */
}

html, body {
  min-width: 320px;
  background: var(--white);
  color: var(--ink-soft);
  font-family: 'Inter', -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body { display: flex; flex-direction: column; min-height: 100vh; }

a { text-decoration: none; color: var(--blue-hover); }
a:hover { color: #1556A6; }
button { font-family: inherit; }

@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- header ---------- */

.site-header {
  height: var(--header-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: transparent;
  backdrop-filter: blur(8px);
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  transition: background 300ms var(--ease);
}
/* non-landing screens: шапка в обычном потоке (не поверх контента), фон сразу белый —
   ровно как headerPos/headerBg в исходном dc-компоненте (position:'relative' вне лендинга) */
.site-header.is-relative { position: relative; background: #FFFFFF; backdrop-filter: none; }
.site-header.is-scrolled { background: rgba(255,255,255,.92); }

.site-logo {
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  position: relative;
  cursor: pointer;
  border: none;
  padding: 0;
}
.site-logo svg { display: block; }

.site-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav a {
  font-size: 14px;
  line-height: 20px;
  color: var(--gray-800);
  padding: 8px 18px;
  border-radius: 100px;
  transition: background 180ms var(--ease);
}
.site-nav a:hover { background: var(--gray-100); }

/* Индикатор шагов на ДЕСКТОПЕ убран 2026-09-04 (была самодеятельность поверх README —
   реальный prototype/uCoz Migrate.dc.html показывает обычную nav-навигацию на ВСЕХ экранах,
   showSteps там вычисляется, но не используется в разметке; проверено рендером через Playwright).
   #stepIndicatorMobile ниже — мобильный вариант, который в prototype/*.Mobile.dc.html
   ДЕЙСТВИТЕЛЬНО используется (заменяет центр шапки на не-лендинговых экранах, т.к. на мобиле
   нет nav в шапке — ссылки живут в bottom-sheet за бургером), поэтому здесь сохранён как есть. */
.step-indicator-mobile { display: none; }
.step-indicator-mobile[hidden] { display: none; }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: transparent;
  border: none;
  color: var(--gray-800);
  cursor: pointer;
  transition: background 180ms var(--ease);
}
.icon-btn:hover { background: var(--gray-100); }
.icon-btn img { width: 26px; height: 26px; display: block; }

.burger-btn { display: none; }

/* ---------- screens shell ---------- */

.app-shell { flex: 1 1 0%; display: flex; flex-direction: column; min-height: 0; position: relative; }

.screen { animation: screenIn 600ms var(--ease) both; }
.screen[hidden] { display: none; }

/* ---------- 01 landing ---------- */

.screen-landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.landing-hero {
  flex: 1;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 40px 160px;
}

.landing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
  max-width: 880px;
  position: relative;
  z-index: 2;
}

.hero-title {
  margin: 0;
  text-align: center;
  color: var(--ink);
  font-family: "Inter Display", Inter, sans-serif;
  font-weight: 600;
  font-size: clamp(44px, 4.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.hero-title .typed-icon {
  display: inline-block;
  width: 0.82em; height: 0.82em;
  border-radius: 22%;
  vertical-align: -0.05em;
  margin-right: 0.14em;
  box-shadow: 0 2px 8px rgba(33,32,31,.12);
  background-size: cover;
  background-position: center;
}
.hero-title .typed-icon[hidden] { display: none; }
.hero-title .typed {
  color: var(--blue);
  transition: color 300ms;
}
.hero-title .cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: var(--blue);
  transition: background 300ms;
  margin-left: 4px;
  vertical-align: -0.08em;
  animation: pulse 1s steps(1) infinite;
}

.hero-sub {
  margin: -14px 0 0;
  text-align: center;
  color: var(--gray-600);
  font-size: 20px;
  line-height: 1.45;
  max-width: 660px;
}

.url-form { width: 100%; background: var(--gray-050); border-radius: 20px; padding: 10px; }
.url-form-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border-radius: 16px;
  padding: 8px 8px 8px 24px;
  height: 72px;
  box-shadow: 0 1px 2px rgba(33,32,31,.06);
}
.url-input {
  flex: 1 1 0%;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink-soft);
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.url-input::placeholder { color: var(--gray-400); }

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 28px;
  font-size: 17px;
  font-weight: 400;
  border-radius: 14px;
  border: none;
  white-space: nowrap;
  cursor: pointer;
  background: var(--blue);
  color: var(--white);
  transition: background 180ms var(--ease);
}
.cta-btn:hover { background: var(--blue-hover); }
.cta-btn:disabled, .cta-btn.is-idle { background: var(--gray-300); cursor: default; }
.cta-btn.cta-block { width: 100%; }
/* хендофф использует РАЗНЫЙ горизонтальный паддинг у одинаковой на вид CTA-кнопки на разных
   экранах (landing "Создать магазин" 0 28px, content "Дальше" 0 36px, design "Собрать магазин"
   0 32px) — раньше везде стоял один и тот же 0 28px */
.cta-btn.cta-next { padding: 0 36px; }
.cta-btn.cta-build { padding: 0 32px; }

/* "волна" на кнопке "Собрать магазин" пока идёт запрос — is-loading вешается/снимается
   в app.js синхронно с disabled, но фон должен остаться синим (не серым от :disabled),
   поэтому здесь селектор нарочно на 3 класса — перебивает .cta-btn:disabled по специфичности */
@keyframes btnWave {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.cta-btn.cta-build.is-loading {
  background-color: var(--blue);
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: btnWave 1.4s linear infinite;
  color: var(--white);
  cursor: default;
}

.url-error { margin-top: -18px; color: var(--danger); font-size: 14px; text-align: center; min-height: 20px; }

.mp-row { display: flex; align-items: center; gap: 14px; margin-top: -10px; font-size: 15px; color: var(--gray-500); flex-wrap: wrap; justify-content: center; }
.mp-row span { display: inline-flex; align-items: center; gap: 7px; }
.mp-row img { width: 24px; height: 24px; border-radius: 7px; display: block; }

/* ---------- shared content wrapper for 02/03/04/05/07 ---------- */

.screen-body {
  flex: 1;
  min-height: calc(100vh - var(--header-h));
  background: var(--white);
  display: flex;
  flex-direction: column;
}

.content-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 40px 60px;
  overflow-y: auto;
}
.content-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 880px;
  margin: auto;
}

.h2-title {
  margin: 0;
  text-align: left;
  color: var(--ink);
  font-family: "Inter Display", Inter, sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.h2-sub { margin: 0; text-align: left; color: var(--gray-600); font-size: 17px; line-height: 1.45; max-width: 620px; }

/* ---------- 02 content: keep / AI switches ---------- */

.option-group { width: 100%; background: var(--gray-050); border-radius: 20px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.option-row {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border-radius: 16px;
  padding: 16px 28px;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 200ms;
}
.option-row.is-active { outline-color: var(--blue); }
.option-row .option-text { flex: 1; }
.option-row .option-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.option-row .option-desc { font-size: 15px; color: var(--gray-600); margin-top: 4px; }
.ai-badge {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-purple);
  border: 1.5px solid var(--ai-purple);
  border-radius: 6px;
  padding: 2px 6px;
  font-weight: 600;
}
.hint-row { font-size: 15px; color: var(--gray-600); margin: 4px 0 -8px; }

.switch { position: relative; width: 48px; height: 28px; border-radius: 14px; background: var(--gray-200); transition: background 200ms; flex-shrink: 0; border: none; cursor: pointer; padding: 0; }
.switch.is-on { background: var(--blue); }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left 200ms var(--ease); }
.switch.is-on .knob { left: 23px; }

.content-actions { align-self: flex-start; }

/* ---------- 03 scan / "Каталог" (реальный прогресс backend'а) ---------- */

.screen-scan {
  position: relative;
  overflow: hidden;
  flex: 1; min-height: calc(100vh - var(--header-h));
  background: var(--white);
}

/* README: "Фон — сетка найденных фото товаров (десктоп 12 колонок, мобайл 5; gap 10/8px,
   radius 8px, общая opacity .55). Плитки появляются по мере роста счётчика (opacity 0→1,
   scale .7→1, 500мс)." — реальные фото каталога (см. js/app.js buildScanTiles/populateScanTiles). */
.scan-tiles {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr;
  gap: 10px; padding: 10px;
  opacity: .55;
  z-index: 0;
}
.scan-tiles .tile {
  border-radius: 8px;
  background-color: var(--gray-100);
  background-image: linear-gradient(160deg, rgba(255,255,255,.3), rgba(0,0,0,.05));
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(.7);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.scan-tiles .tile.is-in { opacity: 1; transform: scale(1); }

/* README: "Поверх — радиальная белая маска ..., чтобы центр оставался читаемым."
   Спека даёт ellipse 46% 50% / #fff 40%,.85 70%,.3 100% — эллипс (форма/размер пятна)
   оставлен ТОЧНО как в спеке. У Жени на маску легли фейковые цветные плашки — на
   реальных фото маркетплейсов (светлый/белый фон карточек WB/Ozon) те же стопы
   давали видимую "заливку" почти всей сетки, а не только центра (жалоба владельца
   на скриншоте live-прогона). Смягчены цвет-стопы (радиус эллипса не трогали):
   #fff 12%, rgba(.55) 40%, rgba(.1) 100% — но на живом прогоне владелец сказал
   "перестарались, увеличить на половину" — крутящийся спиннер+счётчик в центре
   сливались с фото под ослабленной маской. Подняты обратно к промежуточным
   значениям между старым (40/.85/.3) и предыдущим ослабленным (12/.55/.1):
   #fff 26%, rgba(.7) 40%, rgba(.2) 100% — центр снова отчётливо белый под
   спиннером, периферия по-прежнему не заливается полностью (плитки видны). */
.scan-mask {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 46% 50% at 50% 50%, #fff 26%, rgba(255,255,255,.7) 40%, rgba(255,255,255,.2) 100%);
  z-index: 1;
}

.scan-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 40px; text-align: center;
  z-index: 2;
}

.spinner { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--gray-100); border-top-color: var(--blue); animation: spin 900ms linear infinite; }
.spinner.spinner-sm { width: 48px; height: 48px; }

.scan-counter { font-family: "Inter Display", Inter, sans-serif; font-weight: 600; font-size: 96px; line-height: 1; letter-spacing: -0.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
.scan-caption { font-size: 20px; color: var(--gray-600); min-height: 26px; }
.scan-url { font-size: 15px; color: var(--gray-400); word-break: break-all; max-width: 640px; }

/* ---------- 04 design ---------- */

.screen-design { flex: 1; min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; background: var(--white); }
.design-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  padding: 16px 40px 0;
}
.design-head .h2-title { font-size: 40px; }
.design-head .h2-sub { font-size: 17px; min-height: 24px; }

.segmented { display: flex; gap: 4px; background: var(--gray-050); border-radius: 14px; padding: 4px; flex-shrink: 0; }
.segmented button, .chip-row button {
  height: 40px; padding: 0 20px; border: none; border-radius: 10px;
  background: transparent; color: var(--gray-600);
  font-size: 15px; font-weight: 500; cursor: pointer; transition: all 200ms;
  font-family: inherit;
}
.segmented button.is-active, .chip-row button.is-active {
  background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(33,32,31,.08);
}

.preview-stage { flex: 1; position: relative; min-height: 420px; margin-top: 16px; overflow: hidden; }
.preview-slot {
  position: absolute; left: 50%; top: 0;
  width: 1100px; height: 720px; margin-left: -550px;
  transform-origin: top center;
  cursor: pointer;
  transition: transform 600ms var(--ease), opacity 600ms;
}

.design-panel { padding: 0 40px 24px; position: relative; z-index: 4; background: var(--white); }
.design-controls {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  background: var(--gray-050); border-radius: 20px; padding: 12px 12px 12px 24px;
}
.control-group { display: flex; align-items: center; gap: 12px; }
.control-label { font-size: 14px; color: var(--gray-600); margin-right: 4px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; box-shadow: none; transition: box-shadow 200ms; padding: 0; }
.swatch.is-active { box-shadow: 0 0 0 2px var(--gray-050), 0 0 0 4px var(--ink-soft); }
.auto-btn { height: 36px; padding: 0 14px; border-radius: 10px; border: none; background: transparent; color: var(--gray-600); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 200ms; font-family: inherit; }
.auto-btn.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(33,32,31,.08); }
.design-controls .spacer { margin-left: auto; }

/* ---------- "Coming soon" — недоступные для выбора шаблоны/цвет (решение владельца,
   04.09.2026): из трёх шаблонов кликабелен только Alameda, выбор цвета временно заморожен.
   Шрифт (.chip-row) НЕ затрагивается — остаётся полностью рабочим. ---------- */
.segmented button.is-disabled,
.preview-slot.is-disabled,
.swatch.is-disabled,
.control-group.is-disabled .auto-btn {
  cursor: not-allowed;
  opacity: .5;
}
.segmented button.is-disabled:hover { background: transparent; }
.control-group.is-disabled { position: relative; }
.control-group.is-disabled #colorSwatches,
.control-group.is-disabled .auto-btn { pointer-events: none; }

.coming-soon-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(33, 32, 31, .78); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; pointer-events: none;
}
/* внутри таба сегмента — компактная плашка рядом с подписью */
.segmented button.is-disabled .coming-soon-badge {
  margin-left: 8px; padding: 2px 8px; font-size: 10px; vertical-align: middle;
}
/* поверх превью-слота — по центру карточки шаблона */
.coming-soon-badge--preview {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 3; font-size: 13px; padding: 6px 16px;
}
/* рядом с лейблом "Цвет" в панели управления */
.coming-soon-badge--inline { margin-right: 4px; }

/* TODO(design→backend): styleIdx/color/type сейчас чисто визуальные — при активации сайта
   используется стандартный платформенный дизайн uCoz. Когда появится реальный design_id
   на бэкенде, прокинуть выбор сюда (см. js/app.js: state.design). */

/* ---------- 05 building / "Сборка" (реальный прогресс backend'а) ----------
   README: спиннер + заголовок + меняющаяся подпись, ВСЁ центрировано в один экран без скролла
   и без карточек товаров (те есть только на экране "Готово") — раньше здесь был добавлен блок
   .products-section, которого нет у Жени; убран, чтобы 1:1 совпадать с хендоффом. */

.screen-building {
  flex: 1; min-height: calc(100vh - var(--header-h));
  background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 40px;
  text-align: center;
}
.building-head { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.building-title { font-family: "Inter Display", Inter, sans-serif; font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
.building-caption { font-size: 20px; color: var(--gray-600); transition: opacity 300ms; min-height: 26px; }

/* ---------- 07 ready / "Готово" ---------- */

.screen-ready { flex: 1; min-height: calc(100vh - var(--header-h)); position: relative; overflow: hidden; }
.ready-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 40px;
  align-items: start;
  padding: 10px 40px 40px;
  max-width: 1600px;
  margin: 0 auto;
}
.ready-col-text { display: flex; flex-direction: column; justify-content: space-between; min-height: 640px; padding-top: 20px; }
.ready-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; }
.ready-domain { margin-top: 14px; font-size: 15px; color: var(--gray-600); word-break: break-all; }
.ready-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.ready-stat .num { font-family: "Inter Display", Inter, sans-serif; font-weight: 700; font-size: 56px; letter-spacing: -0.05em; line-height: 1; }
.ready-stat .label { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-600); margin-top: 4px; }
.ready-actions { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.ready-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; font-size: 15px; font-weight: 400;
  border-radius: 8px; border: none; white-space: nowrap; cursor: pointer;
  transition: background 180ms var(--ease); background: var(--blue); color: #fff;
}
.ready-btn-primary:hover { background: var(--blue-hover); }
.ready-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; font-size: 15px; font-weight: 400;
  border-radius: 8px; border: none; white-space: nowrap; cursor: pointer;
  background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--gray-200);
}
.ready-btn-secondary:hover { background: var(--gray-025); color: var(--ink); }
.ready-note { font-size: 12px; color: var(--gray-500); }

.ready-preview-col { position: sticky; top: 88px; }
.ready-preview-frame { width: 100%; max-width: 1100px; aspect-ratio: 1100/720; transform: scale(.82) translateY(40px); transform-origin: top left; transition: transform 1100ms var(--ease); }
.ready-preview-frame.is-in { transform: scale(1) translateY(0); }

/* ---------- error screen (не в хендоффе — сохраняем свою, в той же стилистике) ---------- */

.screen-error { flex: 1; min-height: calc(100vh - var(--header-h)); background: var(--white); display: flex; flex-direction: column; align-items: center; padding-bottom: 100px; }
.error-inner { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 24px; margin: auto; text-align: left; }
.error-box { background: #FDECEA; border: 1px solid #F5C6C2; border-radius: 14px; padding: 16px 20px; color: #7A1E17; font-size: 14px; white-space: pre-wrap; }
.retry-btn { align-self: flex-start; background: var(--ink); color: #fff; border: none; padding: 12px 22px; border-radius: 12px; font-size: 15px; cursor: pointer; }
.retry-btn:hover { background: var(--gray-800); }

/* ---------- 08 modal "Передача магазина" (README раздел 08) ---------- */

.modal-overlay {
  position: fixed; inset: 0; background: rgba(33,32,31,.62); z-index: 50;
  display: flex; align-items: center; justify-content: center;
  animation: screenIn 300ms var(--ease) both;
}
.modal-overlay[hidden] { display: none; }
.modal-card { width: 460px; max-width: calc(100vw - 32px); background: #fff; border-radius: 20px; padding: 36px; box-shadow: 0 12px 32px rgba(33,32,31,.10); }
.modal-grabber { display: none; } /* ручка bottom-sheet — видна только на мобиле, см. media query */

.modal-title { margin: 0; font-family: "Inter Display", Inter, sans-serif; font-weight: 600; font-size: 32px; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.modal-text { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--gray-600); }
.modal-text strong { color: var(--ink); font-weight: 600; }

.modal-input-row { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.modal-email-input {
  width: 100%; height: 52px; padding: 0 18px;
  background: var(--gray-050); border: none; border-radius: 12px; outline: none;
  color: var(--ink-soft); font-family: Inter, sans-serif; font-size: 16px;
  box-shadow: 0 0 0 2px transparent; transition: box-shadow 150ms var(--ease);
}
.modal-email-input::placeholder { color: var(--gray-400); }
.modal-email-input:focus { box-shadow: 0 0 0 2px var(--blue); }
.modal-submit-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; padding: 0 22px; border-radius: 12px; border: none;
  font-family: inherit; font-size: 15px; font-weight: 500; color: #fff;
  white-space: nowrap; cursor: pointer; background: var(--gray-400);
  transition: background 180ms var(--ease);
}
.modal-submit-btn:not(:disabled) { background: var(--blue); }
.modal-submit-btn:not(:disabled):hover { background: var(--blue-hover); }
.modal-submit-btn:disabled { cursor: default; }
.modal-submit-btn.is-link { width: 100%; margin-top: 28px; background: var(--blue); text-decoration: none; }
.modal-submit-btn.is-link:hover { background: var(--blue-hover); color: #fff; }

.modal-error { margin-top: 10px; min-height: 18px; font-size: 13px; color: var(--danger); }

.modal-hairline { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray-100); }
.modal-register-hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gray-600); }
.modal-register-hint a { color: #1F6FD4; font-weight: 500; }
.modal-register-hint a:hover { color: var(--blue-hover); }

.modal-success { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.modal-success-icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--success); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; line-height: 1; margin-bottom: 18px;
}
.modal-success[hidden] { display: none; }

/* mobile bottom-sheet menu (бургер) */
.mobile-sheet-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(33,32,31,.5); display: none; align-items: flex-end; }
.mobile-sheet-overlay.is-open { display: flex; }
.mobile-sheet { width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 20px 32px; animation: sheetIn 260ms var(--ease) both; }
.mobile-sheet .grabber { width: 40px; height: 4px; border-radius: 2px; background: var(--gray-200); margin: 0 auto 12px; }
.mobile-sheet a { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--ink-soft); padding: 14px 8px; border-radius: 12px; }

/* ---------- store preview component (js/storePreview.js) ---------- */

.store-preview {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(33,32,31,.10);
  font-family: Inter, sans-serif;
}
.store-preview .sp-titlebar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--gray-025); border-bottom: 1px solid var(--gray-200); flex-shrink: 0; }
.store-preview .sp-dots { display: flex; gap: 6px; }
.store-preview .sp-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-300); }
.store-preview .sp-domain-wrap { flex: 1; display: flex; justify-content: center; }
.store-preview .sp-domain { background: #fff; border: 1px solid var(--gray-200); border-radius: 6px; padding: 3px 14px; font-size: 11px; color: var(--gray-600); letter-spacing: .01em; }
.store-preview .sp-body { flex: 1; overflow: hidden; position: relative; transition: background 700ms var(--ease), color 700ms var(--ease); }

/* ---------- footer ---------- */

.site-footer { background: var(--ink); border-top: 1px solid rgba(255,255,255,.08); }
.footer-inner { max-width: 1160px; margin: 0 auto; padding: 48px 24px 44px; }
.footer-grid { display: grid; grid-template-columns: minmax(200px,1.5fr) repeat(4, max-content) minmax(0,1fr); gap: 44px 88px; align-items: start; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-brand img { height: 40px; width: auto; display: block; }
.footer-brand span { font-size: 13px; line-height: 18px; color: rgba(255,255,255,.42); }
.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col .footer-title { font-size: 13px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: #fff; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 16px; line-height: 22px; color: rgba(255,255,255,.58); transition: color 150ms; width: fit-content; }
.footer-links a:hover { color: #fff; }
.footer-pay { margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-pay img { height: 22px; width: auto; display: block; opacity: .95; }

/* ============================================================
   Responsive — мобильная версия по prototype/uCoz Migrate Mobile.dc.html (390px эталон)
   ============================================================ */

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px 32px !important; }
  .footer-grid > .footer-brand { grid-column: 1 / -1; }
  .ready-grid { grid-template-columns: 1fr; }
  .ready-preview-col { position: static; order: -1; }
  .ready-col-text { min-height: 0; gap: 24px; }
}

@media (max-width: 760px) {
  :root { --header-h: 56px; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  .site-header { height: var(--header-h); padding: 0 12px 0 16px; }
  .site-logo { width: 36px; height: 36px; }
  .site-nav { display: none; }
  .step-indicator-mobile {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: absolute; left: 50%; transform: translateX(-50%);
  }
  .step-indicator-mobile .label { font-size: 13px; color: var(--gray-600); }
  .step-indicator-mobile .dashes { display: flex; gap: 4px; }
  .step-indicator-mobile .dashes span { width: 18px; height: 3px; border-radius: 2px; background: var(--gray-200); transition: background 300ms; }
  .header-actions .icon-btn:not(.burger-btn) { display: none; }
  .burger-btn { display: inline-flex; }

  .landing-hero { padding: 24px 20px 0; justify-content: flex-start; padding-top: 88px; min-height: 100vh; }
  .landing-inner { gap: 24px; }
  .hero-title { font-size: clamp(28px, 8vw, 40px); white-space: normal; text-align: left; }
  .hero-sub { text-align: left; font-size: 16px; margin-top: 0; }
  .url-form { border-radius: 18px; padding: 8px; }
  .url-form-inner { flex-wrap: wrap; height: auto; padding: 0; gap: 8px; background: transparent; box-shadow: none; }
  .url-input { width: 100%; height: 56px; background: #fff; border-radius: 12px; padding: 0 18px; box-shadow: 0 1px 2px rgba(33,32,31,.06); order: 1; }
  .cta-btn { width: 100%; order: 2; height: 56px; border-radius: 12px; }
  .mp-row { gap: 14px; }
  .mp-row span { flex-direction: column; gap: 4px; font-size: 0; }

  .content-wrap, .screen-building { padding-left: 20px; padding-right: 20px; }
  .h2-title, .design-head .h2-title { font-size: 28px; }
  .scan-counter { font-size: 72px; }
  .scan-tiles { grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 8px; }
  .scan-content { padding: 24px; }
  .design-head { flex-direction: column; align-items: flex-start; gap: 16px; padding: 12px 20px 0; }
  .design-panel { padding: 0 20px 20px; }
  .design-controls { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px 16px; }
  .design-controls .spacer { margin-left: 0; }
  .ready-grid { padding: 10px 20px 24px; gap: 20px; }
  .ready-stat .num { font-size: 36px; }
  .modal-overlay { align-items: flex-end; }
  .modal-card { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; padding: 12px 20px 32px; animation: sheetIn 280ms var(--ease) both; }
  .modal-grabber { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--gray-200); margin: 0 auto 20px; }
  .modal-title { font-size: 26px; }
}

/* ---- живой предпросмотр реальных тем (js/themePreview.js) ---- */
/* Alameda — монохромная тема, --am-ink двигает и текст, и кнопки одновременно (см. коммент
   в themePreview.js: это тот же "чернильный" рычаг, который theme_alameda.py применяет на сервере). */
.am-live { background: #fff; color: #111; font-family: var(--am-font); height: 100%; overflow: hidden; }
.am-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid #ececec; }
.am-logo { font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--am-ink); text-transform: var(--am-tt); }
.am-nav-cats { display: flex; gap: 16px; font-size: 11px; color: #9a9a9a; }
.am-cart { font-size: 11px; color: #9a9a9a; }
.am-hero { padding: 22px 28px 18px; }
.am-hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: var(--am-weight); letter-spacing: var(--am-ls); text-transform: var(--am-tt); font-style: var(--am-style); color: var(--am-ink); }
.am-hero p { margin: 0; font-size: 12px; color: #777; }
.am-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 28px 24px; }
.am-card-img { aspect-ratio: 4/5; border-radius: 4px; background-image: linear-gradient(160deg, rgba(255,255,255,.3), rgba(0,0,0,.05)); }
.am-card-name { margin-top: 8px; font-size: 11px; color: #333; font-weight: var(--am-weight); }
.am-card-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.am-card-price { font-size: 11px; font-weight: 600; color: var(--am-ink); }
.am-card-btn { font-size: 9px; padding: 5px 8px; border: 1px solid var(--am-ink); background: var(--am-ink); color: #fff; border-radius: 0; cursor: default; text-transform: var(--am-tt); }

/* Onyx/premium — тёмная editorial-тема, централизованные переменные --onx-accent/--onx-font-*
   (та же пара, что :root задаёт в реальном 1/AHEADER темы, см. templates/premium/build_snapshot.py). */
.onx-live { background: #0b0b0c; color: #f3f1ea; font-family: var(--onx-font-ui); height: 100%; overflow: hidden; }
.onx-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid #2a2a2e; }
.onx-logo { font-family: var(--onx-font-display); font-weight: 600; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: #f3f1ea; }
.onx-nav-cats { display: flex; gap: 16px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #9a968c; }
.onx-cart { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #9a968c; }
.onx-hero { padding: 26px 28px 20px; }
.onx-eyebrow { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--onx-accent); margin-bottom: 8px; }
.onx-hero h1 { margin: 0; font-family: var(--onx-font-display); font-size: 28px; font-weight: 600; letter-spacing: var(--onx-ls); text-transform: var(--onx-tt); color: #f3f1ea; max-width: 420px; }
.onx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 28px 24px; }
.onx-card { background: #141416; border: 1px solid #2a2a2e; }
.onx-card-img { aspect-ratio: 4/5; background-image: linear-gradient(160deg, rgba(255,255,255,.08), rgba(0,0,0,.15)); }
.onx-card-name { padding: 8px 8px 0; font-family: var(--onx-font-display); font-size: 11px; color: #f3f1ea; }
.onx-card-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; }
.onx-card-price { font-size: 11px; font-weight: 600; color: var(--onx-accent); }
.onx-card-btn { font-size: 9px; padding: 5px 8px; border: 1px solid var(--onx-accent); background: var(--onx-accent); color: var(--onx-accent-fg); border-radius: 0; cursor: default; text-transform: uppercase; }