/* ===== ШРИФТЫ ===== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');

:root {
  --bg: #e9e1d8;
  --card: #f8f4ef;
  --text: #2f1a16;
  --muted: #6f6256;
  --muted2: #8a7a6e;
  --accent: #8b1b28;
  --accentHover: #761622;
  --border: #e1d6c9;
  --field: #fdfaf6;
  --fieldBorder: #d0c2b5;
  --chip: #f3ebe2;
  --container: 1120px;
  --headerH: 72px;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-sm: 0 8px 18px rgba(0,0,0,0.10);
  --shadow-md: 0 20px 50px rgba(0,0,0,0.14);
  --shadow-glow: 0 0 0 1px rgba(139,27,40,0.10), 0 18px 40px rgba(139,27,40,0.08);

  /* Safe-area отступы (iOS). По умолчанию 0. */
  --safeT: 0px;
  --safeB: 0px;
}

[data-theme="dark"] {
  --bg: #141210;
  --card: #1c1916;
  --text: #f2ebe4;
  --muted: #c7bbb1;
  --muted2: #a99e95;
  --accent: #c54555;
  --accentHover: #b03a49;
  --border: #2a2622;
  --field: #201d1a;
  --fieldBorder: #3a342f;
  --chip: #221f1c;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

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

@supports (padding: env(safe-area-inset-bottom)) {
  :root {
    --safeT: env(safe-area-inset-top);
    --safeB: env(safe-area-inset-bottom);
  }
}

body {
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--bg);
  color: var(--text);
}

/* ---------- Фоновая “золотая пыль” (премиум, деликатно) ---------- */
body::before,
body::after {
  content: "";
  position: fixed;
  /* делаем overscan, чтобы сдвиг не оголял пустые края */
  inset: -22%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.24;
  /* держим в compositing слое во время скролла */
  will-change: transform;
  transform: translate3d(0,0,0);
  contain: paint;
}

body::before {
  /* ВАЖНО: избегаем “double-position” color stops (поддерживается не везде) */
  background-image:
    radial-gradient(circle, rgba(207,169,90,0.36) 0px, rgba(207,169,90,0.36) 1px, rgba(0,0,0,0) 2px),
    radial-gradient(circle, rgba(207,169,90,0.22) 0px, rgba(207,169,90,0.22) 1px, rgba(0,0,0,0) 2px),
    radial-gradient(circle, rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 1px, rgba(0,0,0,0) 2px);
  background-size: 78px 78px, 118px 118px, 186px 186px;
  background-position: 0 0, 28px 62px, 120px 40px;
  /* фильтры на больших fixed-слоях дорогие; держим проще */
  animation: dustDrift1 30s linear infinite;
}

body::after {
  opacity: 0.16;
  background-image:
    radial-gradient(circle, rgba(207,169,90,0.28) 0px, rgba(207,169,90,0.28) 1px, rgba(0,0,0,0) 2px),
    radial-gradient(circle, rgba(255,255,255,0.12) 0px, rgba(255,255,255,0.12) 1px, rgba(0,0,0,0) 2px);
  background-size: 96px 96px, 360px 360px;
  background-position: 54px 22px, 0 0;
  animation: dustDrift2 44s linear infinite;
}

[data-theme="dark"] body::before,
[data-theme="dark"] body::after {
  opacity: 0.12;
}

@keyframes dustDrift1 {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-140px,110px,0); }
}
@keyframes dustDrift2 {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(220px,-160px,0); }
}

/* Во время активного скролла: ставим тяжёлые эффекты на паузу, чтобы не было лагов */
.is-scrolling body::before,
.is-scrolling body::after {
  animation-play-state: paused;
}
.is-scrolling .site-header {
  backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
}

/* Контент приложения должен быть выше фоновых слоёв */
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

.container {
  width: 100%;
  max-width: var(--container);
  padding: 0 20px;
  margin: 0 auto;
}

/* ---------- Лендинг (index.html): один экран, без прокрутки ---------- */
/* Лендинг: новый hero-layout (v2) — overflow разрешён на мобиле */
html[data-page="landing"],
html[data-page="landing"] body {
  height: auto;
  overflow: auto;
}
@media (min-width: 721px) {
  html[data-page="landing"],
  html[data-page="landing"] body {
    height: 100%;
    overflow: hidden;
  }
}

/* Старые .landing-* стили — оставляем для fallback */
.landing-screen {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vh, 44px) clamp(18px, 4vw, 56px);
}

.landing-screen,
.quiz.quiz-standalone .page {
  overflow: hidden;
}

/* ---------- Квиз (quiz.html): фиксируем по viewport, без прокрутки страницы ---------- */
html[data-page="quiz"],
html[data-page="quiz"] body {
  height: 100%;
  overflow: hidden;
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
}

/* Все текстовые элементы квиза — Nunito */
html[data-page="quiz"] .form-title,
html[data-page="quiz"] .form-hint,
html[data-page="quiz"] .balance-card-title,
html[data-page="quiz"] .balance-card-subtitle,
html[data-page="quiz"] .balance-card-help,
html[data-page="quiz"] .btn,
html[data-page="quiz"] .step-label,
html[data-page="quiz"] .step-percent,
html[data-page="quiz"] label,
html[data-page="quiz"] input,
html[data-page="quiz"] textarea,
html[data-page="quiz"] select,
html[data-page="quiz"] .rating-dot,
html[data-page="quiz"] .rating-value {
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
}

/* Скрываем квиз до завершения проверки авторизации — предотвращает мигание шага 1 */
html[data-page="quiz"][data-auth-pending] .quiz-standalone {
  visibility: hidden;
}

html[data-page="quiz"] main {
  height: calc(100svh - var(--headerH) - var(--safeB));
  /* Только горизонтальный overflow скрыт; вертикальный разрешён для мобильных браузеров */
  overflow-x: hidden;
  overflow-y: auto;
}

.landing-inner {
  width: min(980px, 100%);
  display: grid;
  gap: clamp(14px, 3vh, 22px);
}

.landing-copy { max-width: 78ch; }

.landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(10px, 2vh, 16px);
}

.landing-logo {
  width: 120px;
  height: 120px;
  display: block;
  object-fit: contain;
  border-radius: 20px;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.14));
}

.landing-title {
  margin: 0 0 clamp(10px, 1.8vh, 14px);
  font-size: clamp(28px, 4.6vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.landing-subtitle {
  margin: 0 0 clamp(10px, 1.6vh, 14px);
  font-size: clamp(16px, 2.0vw, 22px);
  color: var(--muted);
  line-height: 1.25;
}

.landing-text {
  margin: 0 0 clamp(10px, 2vh, 16px);
  font-size: clamp(14px, 1.6vw, 18px);
  color: var(--muted);
  line-height: 1.55;
}

.landing-list { margin-top: clamp(2px, 1vh, 8px); }
.landing-list-title {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 10px;
}

.landing-bullets {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: var(--text);
}
.landing-bullets li { line-height: 1.4; }

.landing-actions {
  display: grid;
  gap: 10px;
  align-items: start;
}
.landing-cta-btn {
  width: min(560px, 100%);
  justify-content: center;
}
.landing-note {
  font-size: 12px;
  color: var(--muted2);
}

@media (max-width: 520px) {
  .landing-screen { padding: 16px 16px 18px; }
  .landing-cta-btn { width: 100%; }
}

/* Ужимаем контент для низких экранов (всё ещё без скролла) */
@media (max-height: 720px) {
  .landing-bullets { gap: 8px; }
  .landing-bullets li:nth-child(4) { display: none; }
}
@media (max-height: 640px) {
  .landing-title { font-size: clamp(24px, 4.2vw, 46px); }
  .landing-text { margin-bottom: 10px; line-height: 1.45; }
  .landing-list-title { display: none; }
  .landing-bullets li:nth-child(3),
  .landing-bullets li:nth-child(4) { display: none; }
}
@media (max-height: 560px) {
  .landing-list { display: none; }
  .landing-subtitle { margin-bottom: 8px; }
  .landing-text { margin-bottom: 10px; }
}

/* ---------- Шапка ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--headerH);
  display: flex;
  align-items: center;
  background: rgba(248,244,239,0.75);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: blur(14px);
}

[data-theme="dark"] .site-header {
  background: rgba(28,25,22,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
}

.brand-mark {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.0) 55%),
              linear-gradient(135deg, var(--accent), rgba(139,27,40,0.55));
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), var(--shadow-glow);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Header actions всегда видны (тема + Demo) */
html[data-page="quiz"] .header-actions { display: inline-flex; }

.header-actions .btn-small {
  padding: 8px 12px;
  font-size: 12px;
  border-radius: 999px;
}

/* Гео-элементы (шаг 3) */
.geo-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -6px;
  margin-bottom: 6px;
  min-height: 28px;
}
.geo-inline-status {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.2;
}
.geo-inline-status[data-tone="bad"] { color: #b3261e; }

/* dev-floating не используется в новом лендинге — оставляем для обратной совместимости */
html[data-page="landing"] .dev-floating { display: none; }

.segmented {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.26);
}
[data-theme="dark"] .segmented {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}

.segmented-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 8px 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.segmented-btn[aria-pressed="true"] {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}
[data-theme="dark"] .segmented-btn[aria-pressed="true"] {
  background: rgba(255,255,255,0.10);
}

/* Элементы только для разработки (скрыты для реальных пользователей) */
.dev-only { display: none; }
[data-dev="1"] .dev-only { display: inline-flex; }

/* ---------- Лендинг ---------- */
.hero {
  position: relative;
  overflow: clip;
  padding: 84px 0 44px;
}

.hero-inner {
  display: grid;
  gap: 28px;
  align-items: center;
}

@media (min-width: 980px) {
  .hero { padding: 92px 0 56px; }
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 40px; }
}

.hero-title {
  margin: 0 0 14px;
  font-size: 36px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 700;
}
@media (min-width: 980px) {
  .hero-title { font-size: 54px; }
}

.hero-subtitle {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--muted);
}

.hero-text {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--muted);
  max-width: 62ch;
}

.hero-list-title {
  font-size: 13px;
  color: var(--muted2);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.bullets {
  margin: 0;
  padding-left: 18px;
  color: var(--text);
}
.bullets li {
  margin: 8px 0;
  line-height: 1.35;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.hero-note {
  font-size: 12px;
  color: var(--muted2);
}

.hero-visual {
  position: relative;
  min-height: 360px;
  display: none;
}
@media (min-width: 980px) {
  .hero-visual { display: block; }
}

.orb {
  position: absolute;
  inset: auto;
  border-radius: 999px;
  filter: blur(28px);
  opacity: 0.55;
  transform: translateZ(0);
}
.orb-1 {
  width: 340px;
  height: 340px;
  left: -70px;
  top: -40px;
  background: radial-gradient(circle at 30% 30%, rgba(139,27,40,0.38), rgba(139,27,40,0.0) 62%);
}
.orb-2 {
  width: 420px;
  height: 420px;
  right: -120px;
  bottom: -120px;
  background: radial-gradient(circle at 35% 35%, rgba(47,26,22,0.22), rgba(47,26,22,0.0) 70%);
}
[data-theme="dark"] .orb-2 {
  background: radial-gradient(circle at 35% 35%, rgba(242,235,228,0.12), rgba(242,235,228,0.0) 70%);
}

.glass-card {
  position: relative;
  margin-left: auto;
  max-width: 420px;
  padding: 18px 18px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.35);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}
[data-theme="dark"] .glass-card {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

.glass-title {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 14px;
}

.glass-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.20);
}
[data-theme="dark"] .glass-metric {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.glass-metric + .glass-metric { margin-top: 10px; }
.glass-label { font-size: 12px; color: var(--muted2); }
.glass-value { font-weight: 650; letter-spacing: 0.02em; }
.glass-hint { margin-top: 12px; font-size: 12px; color: var(--muted2); }

.preview-card { overflow: hidden; }
.preview-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.preview-status {
  font-size: 12px;
  color: var(--muted2);
  letter-spacing: 0.02em;
}
.preview-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 2px 0 14px;
}

.preview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 980px) {
  .preview-grid { grid-template-columns: 1.05fr 0.95fr; align-items: center; }
}

.preview-kpis {
  display: grid;
  gap: 10px;
}
.kpi {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.20);
}
[data-theme="dark"] .kpi {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.kpi-label { font-size: 12px; color: var(--muted2); }
.kpi-value { margin-top: 2px; font-weight: 700; letter-spacing: 0.02em; }

.preview-mini {
  padding: 10px 12px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.14);
}
[data-theme="dark"] .preview-mini {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.mini-radar {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.mini-ring {
  fill: none;
  stroke: rgba(0,0,0,0.14);
}
[data-theme="dark"] .mini-ring { stroke: rgba(255,255,255,0.10); }
.mini-poly {
  fill: rgba(139,27,40,0.18);
  stroke: rgba(139,27,40,0.85);
  stroke-width: 1.5;
  transform-origin: 60px 60px;
  animation: miniPulse 4.8s ease-in-out infinite;
}
.mini-dot { fill: rgba(139,27,40,0.95); }
.preview-mini-label {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--muted2);
}

@keyframes miniPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.985); opacity: 0.94; }
}

/* ---------- Вкладки формулы (интерактивный блок) ---------- */
.formula-card {
  padding: 18px 18px 16px;
  border-radius: var(--radius-xl);
  background: var(--field);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.formula-head { margin-bottom: 12px; }
.formula-title { margin-bottom: 6px; }
.formula-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 80ch;
}
.formula-body {
  display: grid;
  gap: 12px;
}
@media (min-width: 980px) {
  .formula-body { grid-template-columns: 1fr 1.3fr; align-items: start; gap: 16px; }
}

.formula-tabs {
  display: grid;
  gap: 10px;
}
.tab {
  text-align: left;
  padding: 12px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.tab:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.tab.is-active {
  border-color: rgba(139,27,40,0.30);
  box-shadow: var(--shadow-glow);
}

.formula-panels {
  padding: 14px 14px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(139,27,40,0.06), rgba(255,255,255,0.0) 55%), var(--card);
  position: relative;
  min-height: 110px;
  overflow: hidden;
}
.panel {
  position: absolute;
  inset: 14px 14px 12px 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.2, 0.9, 0.2, 1);
  pointer-events: none;
}
.panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.panel-title {
  font-weight: 750;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.panel-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  max-width: 72ch;
}

.section {
  padding: 56px 0;
}
.section-tight {
  padding: 40px 0;
}
.section-title {
  margin: 0 0 14px;
  font-size: 22px;
  letter-spacing: -0.02em;
}
@media (min-width: 980px) {
  .section-title { font-size: 26px; }
}

.prose p {
  margin: 10px 0;
  color: var(--muted);
  line-height: 1.5;
  max-width: 70ch;
}

.brand-block {
  padding: 18px 18px 16px;
  border-radius: var(--radius-xl);
  background: var(--field);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.brand-text {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  line-height: 1.55;
  max-width: 72ch;
}

.cta-block {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 20px 18px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(139,27,40,0.10), rgba(255,255,255,0.0) 55%), var(--field);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 780px) {
  .cta-block { grid-template-columns: 1fr auto; }
}
.cta-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
}

/* ---------- Обёртка квиза ---------- */
.quiz {
  padding: 56px 0 90px;
}

#quiz { scroll-margin-top: calc(var(--headerH) + 16px); }

.quiz .page {
  min-height: calc(100vh - var(--headerH));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

/* Отдельная страница квиза (quiz.html): меньше вертикальных отступов */
.quiz.quiz-standalone {
  padding: 0;
}
.quiz.quiz-standalone .page {
  height: calc(100svh - var(--headerH) - var(--safeB));
  min-height: unset;
  padding: 0;
  align-items: center;
}

.quiz.quiz-standalone .card {
  /* Делаем одинаковую высоту карточек на всех шагах, чтобы не было “скачков” */
  /* И при этом держим карточки визуально по центру, а не “во весь экран” */
  height: min(740px, calc(100svh - var(--headerH) - 64px - var(--safeB)));
  max-height: min(740px, calc(100svh - var(--headerH) - 64px - var(--safeB)));
  /* overflow: visible — стрелки навигации выступают за край карточки */
  overflow: visible;
  display: flex;
  flex-direction: column;
  position: relative;
}

.quiz.quiz-standalone .form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.quiz.quiz-standalone .form-actions {
  margin-top: auto;
  padding-top: 12px;
}

/* На квизе навигация идёт стрелками по краям карточки */
html[data-page="quiz"] .quiz.quiz-standalone .form-actions { display: none; }

/* Стрелки навигации: центр на краю карточки, чтобы не забирать место у текста */
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.2,0.9,0.2,1), opacity 160ms ease, box-shadow 160ms ease;
}
/* Влево — стиль кнопки «Назад» (secondary), непрозрачный фон */
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev {
  left: 0;
  transform: translate(-50%, -50%);
  color: var(--text);
  border: 1px solid var(--border);
  background-color: var(--chip);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 10px 22px rgba(0,0,0,0.10);
}
html[data-page="quiz"][data-theme="dark"] .quiz.quiz-standalone .step-edge-prev {
  background-color: var(--chip);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 14px 28px rgba(0,0,0,0.30);
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev:hover {
  transform: translate(-50%, -50%) scale(1.03);
  background-color: var(--field);
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev:active {
  transform: translate(-50%, -50%) scale(0.99);
}
/* Вправо — стиль кнопки «Продолжить» (primary) */
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next {
  right: 0;
  transform: translate(50%, -50%);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  background-color: var(--accent);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--accent), var(--accentHover));
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 16px 34px rgba(139,27,40,0.22), 0 10px 24px rgba(0,0,0,0.12);
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next:hover {
  transform: translate(50%, -50%) scale(1.03);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 22px 44px rgba(139,27,40,0.26), 0 12px 28px rgba(0,0,0,0.14);
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next:active {
  transform: translate(50%, -50%) scale(0.99);
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn[disabled] {
  opacity: 0.18;
  cursor: default;
  box-shadow: none;
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  display: none !important;
}

html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev::before {
  transform: translate(-50%, -50%) rotate(135deg);
}

@media (max-width: 520px) {
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn {
    width: 32px;
    height: 32px;
  }
}

/* Отчёт: “середина” должна ужиматься, кнопки остаются внизу */
#step-6 .report-panels {
  overflow-x: hidden;
}
#step-6 .report-section {
  padding: 14px 16px;
}
/* Шаг 6: заголовок, summary и кнопки — более плотно по вертикали */
#step-6 .form-title { margin-bottom: 4px; }
#step-6 .report-summary { margin-bottom: 4px; }
#step-6 .report-tabs { margin-top: 2px; margin-bottom: 4px; }

/* Внутренняя пагинация шага 1 (для низких экранов) */
.balance-page.hidden { display: none; }

/* Вкладки отчёта (шаг 6): рамка облегает кнопки, не растягивается */
.report-tabs {
  display: inline-flex;
  align-self: center;
  width: fit-content;
  margin-top: 5px;
  margin-bottom: 6px;
}
.segmented-btn.is-active {
  background: rgba(0,0,0,0.08);
}
[data-theme="dark"] .segmented-btn.is-active {
  background: rgba(255,255,255,0.10);
}
.report-panel { display: none; }
.report-panel.is-active { display: block; }


.card {
  background-color: var(--card);
  border-radius: 16px;
  padding: 40px 48px;
  max-width: 640px;
  width: 100%;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
  .card { padding: 24px 20px 28px; }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -10px 0 12px;
}
.spacer { flex: 1; }

.card-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.logo-icon { width: 56px; height: 56px; }

.card-title {
  text-align: center;
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.25;
  font-family: "Georgia", "Times New Roman", serif;
}

.card-subtitle {
  text-align: center;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 15px;
}

.card-caption {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted2);
}

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.2px;
  line-height: 1.1;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  user-select: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  transition:
    transform 160ms cubic-bezier(0.2, 0.9, 0.2, 1),
    box-shadow 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    filter 160ms ease;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.btn-primary {
  color: #fff;
  background-color: var(--accent);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, var(--accent), var(--accentHover));
  border-color: rgba(0,0,0,0.10);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 16px 34px rgba(139,27,40,0.22),
    0 10px 24px rgba(0,0,0,0.12);
}
.btn-primary::before {
  background:
    radial-gradient(420px 120px at 20% 0%, rgba(255,255,255,0.34), rgba(255,255,255,0) 60%),
    linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.24), rgba(255,255,255,0));
  opacity: 0.55;
  mix-blend-mode: overlay;
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: saturate(1.02);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 22px 44px rgba(139,27,40,0.26),
    0 12px 28px rgba(0,0,0,0.14);
}
.btn-primary:hover::before { opacity: 0.70; }

/* Кнопка «Продолжить» пульсирует когда шаг готов */
.btn-primary--ready {
  animation: btnReadyPulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes btnReadyPulse {
  0%, 100% { box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 16px 34px rgba(139,27,40,0.22),
    0 10px 24px rgba(0,0,0,0.12),
    0 0 0 0 rgba(139,27,40,0.35); }
  50% { box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 16px 34px rgba(139,27,40,0.22),
    0 10px 24px rgba(0,0,0,0.12),
    0 0 0 8px rgba(139,27,40,0); }
}

.btn-secondary {
  color: var(--text);
  border-color: var(--border);
  background-color: rgba(255,255,255,0.10);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 10px 22px rgba(0,0,0,0.10);
}
[data-theme="dark"] .btn-secondary {
  background-color: rgba(255,255,255,0.06);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0));
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.18),
    0 14px 28px rgba(0,0,0,0.30);
}
.btn-secondary:hover {
  transform: translateY(-1px);
  background-color: rgba(255,255,255,0.14);
}

.btn:active {
  transform: translateY(0px);
  filter: saturate(0.98);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.06),
    0 10px 20px rgba(0,0,0,0.12);
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(139,27,40,0.18);
}

.btn[disabled] { opacity: 0.6; cursor: default; }

.btn-small { padding: 8px 12px; font-size: 13px; }
.btn-lg { padding: 14px 22px; font-size: 16px; border-radius: 14px; }

/* Карточки квиза: чуть “дороже” визуально */
.quiz .card {
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.08);
  background:
    radial-gradient(1200px 420px at 0% 0%, rgba(139,27,40,0.05), rgba(0,0,0,0) 55%),
    var(--card);
}
[data-theme="dark"] .quiz .card {
  border-color: rgba(255,255,255,0.10);
  background:
    radial-gradient(1200px 420px at 0% 0%, rgba(197,69,85,0.10), rgba(0,0,0,0) 58%),
    var(--card);
}

.quiz:not(.quiz-standalone) .step-active {
  animation: stepIn 320ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes stepIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-header-row .step-label,
.step-header-row .step-percent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .step-header-row .step-label,
[data-theme="dark"] .step-header-row .step-percent {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}

.step { display: none; }
.step-active { display: block; }

/* quiz.html: один шаг за раз, по центру, со slide-переходами */
html[data-page="quiz"] .quiz.quiz-standalone .page {
  position: relative;
  width: 100%;
}

html[data-page="quiz"] .quiz.quiz-standalone .step {
  display: flex; /* flex-column, чтобы .form внутри мог растянуться и иметь overflow-y:scroll */
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(720px, calc(100vw - 32px));
  height: min(740px, calc(100svh - var(--headerH) - 64px - var(--safeB)));
  max-height: min(740px, calc(100svh - var(--headerH) - 64px - var(--safeB)));
  transform: translate3d(-50%, -50%, 0) translate3d(var(--stepX, 0px), 0, 0) scale(var(--stepS, 1));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* bounce-эффект: шаг «выпрыгивает» при появлении */
  transition:
    transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 240ms ease,
    visibility 0ms linear 240ms;
  will-change: transform, opacity;
}

html[data-page="quiz"] .quiz.quiz-standalone .step.step-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  --stepX: 0px;
  --stepS: 1;
  transition:
    transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 240ms ease,
    visibility 0ms;
}

html[data-page="quiz"] .quiz.quiz-standalone .step.step-enter-forward,
html[data-page="quiz"] .quiz.quiz-standalone .step.step-enter-back {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition: none;
}
/* Увеличен сдвиг + чуть «сжатая» карточка при влёте */
html[data-page="quiz"] .quiz.quiz-standalone .step.step-enter-forward { --stepX: 52px; --stepS: 0.97; }
html[data-page="quiz"] .quiz.quiz-standalone .step.step-enter-back { --stepX: -52px; --stepS: 0.97; }

html[data-page="quiz"] .quiz.quiz-standalone .step.step-leave-forward,
html[data-page="quiz"] .quiz.quiz-standalone .step.step-leave-back {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transition:
    transform 280ms cubic-bezier(0.4, 0, 1, 1),
    opacity 200ms ease;
}
html[data-page="quiz"] .quiz.quiz-standalone .step.step-leave-forward { --stepX: -52px; --stepS: 0.97; }
html[data-page="quiz"] .quiz.quiz-standalone .step.step-leave-back { --stepX: 52px; --stepS: 0.97; }

@media (prefers-reduced-motion: reduce) {
  html[data-page="quiz"] .quiz.quiz-standalone .step { transition: none; }
}

.step-header { margin: -8px 0 24px; }

.step-header-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--muted2);
}

.progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background-color: rgba(0,0,0,0.12);
  overflow: hidden;
}

.progress-inner {
  height: 100%;
  background-color: var(--accent);
  border-radius: 999px;
}

.form { margin-top: 8px; }

.form-group { margin-bottom: 18px; }

.form-group-checkbox { margin-top: 18px; }

.field-hint {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
  margin: 8px 0 0;
}

/* Компактность шага 5: чтобы помещался в карточку без скролла */
html[data-page="quiz"] .quiz.quiz-standalone #step-5 .form { margin-top: 6px; }
html[data-page="quiz"] .quiz.quiz-standalone #step-5 .form-title { margin-bottom: 8px; }
html[data-page="quiz"] .quiz.quiz-standalone #step-5 .form-hint { margin-top: 2px; }
html[data-page="quiz"] .quiz.quiz-standalone #step-5 .form-group { margin-bottom: 14px; }
html[data-page="quiz"] .quiz.quiz-standalone #step-5 .form-group-checkbox { margin-top: 12px; }

/* Выпадающий список городов (топ-10) */
.country-field {
  position: relative;
}

.country-field select {
  width: 100%;
  min-height: 62px;
  padding: 14px 48px 14px 18px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
}

.country-field::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 52px;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--text);
  pointer-events: none;
  transform: translateY(20%) rotate(45deg);
  opacity: 0.9;
}

.city-field { position: relative; }
.city-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 6px);
  margin-top: 6px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(14px);
  z-index: 30;
  display: grid;
  gap: 6px;
  max-height: min(320px, 34vh);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
[data-theme="dark"] .city-dropdown {
  background: rgba(28,25,22,0.72);
  border-color: rgba(255,255,255,0.10);
}
.city-option {
  width: 100%;
  text-align: left;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.22);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}
.city-option--empty {
  cursor: default;
  color: var(--muted2);
}
.city-option__name,
.city-option__meta {
  display: block;
}
.city-option__name {
  font-weight: 700;
}
.city-option__meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted2);
}
[data-theme="dark"] .city-option {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.city-option:hover {
  border-color: rgba(139,27,40,0.22);
  box-shadow: 0 0 0 2px rgba(139,27,40,0.10);
}

.geo-detect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(139,27,40,0.18);
  background: rgba(139,27,40,0.07);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.geo-detect-btn:hover {
  background: rgba(139,27,40,0.11);
}

.form-title { margin: 0 0 10px; font-size: 20px; }

label, legend {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--fieldBorder);
  font-size: 14px;
  background-color: var(--field);
  color: var(--text);
}

input::placeholder,
textarea::placeholder { color: rgba(180,170,160,0.9); }

textarea { resize: vertical; min-height: 120px; }

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(139,27,40,0.18);
}

.checkbox input { margin-right: 8px; }

.form-hint {
  font-size: 12px;
  color: var(--muted2);
  margin: 4px 0 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 10px;
}

.form-error {
  margin-top: 10px;
  min-height: 18px;
  font-size: 13px;
  color: #b3261e;
}

.counter {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted2);
  text-align: right;
}

/* Баланс */

.balance-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

/* На широких экранах делим слайдеры баланса на 2 колонки (уменьшаем высоту) */
@media (min-width: 980px) {
  .balance-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

.balance-item {
  padding: 10px 12px 12px;
  border-radius: 12px;
  background-color: var(--chip);
  border: 1px solid var(--border);
}

.balance-label-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}

.balance-title { display: block; font-size: 14px; font-weight: 600; }
.balance-subtitle { display: block; font-size: 12px; color: var(--muted2); }
.balance-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text); /* в тёмной теме это как раз “молочный” */
}

/* Ползунок: винный акцент */
input[type="range"] {
  width: 100%;
  margin-top: 6px;
  accent-color: var(--accent);
}

/* Чуть лучше на WebKit (Chrome/Safari) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  /* Центруем “кружочек” по линии трека (18px thumb vs 8px track => (18-8)/2 = 5px) */
  margin-top: -5px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid rgba(255,255,255,0.25);
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid rgba(255,255,255,0.25);
  cursor: pointer;
}
input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}

/* Гео подсказка */

.hidden { display: none; }

.geo-suggest {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
}

.geo-suggest-title { margin-bottom: 10px; color: var(--muted); }

.geo-suggest-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Отчёт */

.report-summary {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--muted);
}

.report-section {
  background-color: var(--field);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 14px;
  border: 1px solid var(--border);
}

/* Приветственный экран: центрируем CTA */
#step-welcome .btn-primary {
  display: block;
  margin: 0 auto;
}

.balance-chart-wrap {
  display: flex;
  justify-content: center;
  margin: 10px 0 0;
  padding-bottom: 36px; /* место для подписей, которые выходят за границы SVG */
  overflow: visible;
}

.balance-chart {
  width: 100%;
  max-width: 520px;
  height: auto;
  background: transparent;
}

.balance-desc {
  display: grid;
  gap: 10px;
}

.balance-desc-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--chip);
  border: 1px solid var(--border);
}

.balance-desc-title {
  margin: 0 0 4px;
  font-weight: 700;
}

.balance-desc-score {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 6px;
}

.balance-desc-text {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.balance-chart {
  overflow: visible;
}

.balance-help {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.3;
}

/* Низкие экраны: ужимаем шаги (избегаем прокрутки страницы) */
@media (max-height: 760px) {
  .quiz.quiz-standalone .card { padding: 22px 22px 24px; }
  .quiz.quiz-standalone .step-header { margin: -6px 0 16px; }

  .balance-group { gap: 12px; margin-top: 12px; }
  .balance-item { padding: 8px 10px 10px; }
  .balance-help { display: none; }

  /* шаг 5: прячем необязательные поля, чтобы избежать скролла */
  .optional-field { display: none; }

  /* шаг 6: размер графика */
  .balance-chart { max-height: 280px; width: 100%; }
}

/* шаг 6: держим график внутри карточки отчёта (и оставляем место для подписей и кнопок) */
#step-6 .balance-chart { max-height: min(360px, 38svh); }

/* ---------- Мобильная версия ---------- */
@media (max-width: 520px) {
  :root { --headerH: 64px; }
  .container { padding: 0 14px; }

  .site-header { backdrop-filter: blur(12px); }
  .header-inner { gap: 10px; }
  .brand { gap: 8px; }
  .brand-text { font-size: 12px; }

  /* Карточки чуть компактнее */
  .card { padding: 20px 16px 22px; border-radius: 18px; }

  html[data-page="quiz"] .quiz.quiz-standalone .step {
    /* 56px отступ с каждой стороны — кнопки (40px) выступают на 20px, нужно 36px до края */
    width: min(720px, calc(100vw - 72px));
    max-height: min(740px, calc(100svh - var(--headerH) - 56px - var(--safeB)));
  }

  .step-header-row .step-label,
  .step-header-row .step-percent { padding: 5px 9px; }

  .form-title { font-size: 18px; margin-bottom: 8px; }
  label, legend { font-size: 13px; margin-bottom: 5px; }

  /* iOS: чтобы не было zoom при фокусе */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  input[type="number"],
  textarea,
  select { font-size: 16px; }

  /* Кнопки в экшнах — одинаковая ширина, без переноса */
  .form-actions { gap: 10px; }
  .form-actions .btn { flex: 1; min-width: 0; }

  /* Шаг 1: делаем 2 колонки, чтобы всё влезало по высоте */
  .balance-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
  }
  .balance-item { padding: 9px 10px 10px; border-radius: 12px; }
  .balance-help { display: none; }
  .balance-title { font-size: 13px; }
  .balance-subtitle { font-size: 11px; }
  .balance-value { font-size: 15px; }
  input[type="range"] { margin-top: 4px; }

  /* Шаг 2: textarea ниже, чтобы не упиралось в кнопки */
  textarea { min-height: 96px; }

  /* Отчёт: на мобиле немного ужимаем график */
  #step-6 .balance-chart { max-height: min(300px, 34svh); }
}

@media (max-width: 380px) {
  /* Очень узкие экраны: убираем подзаголовки баланса, чтобы не ломать сетку */
  .balance-subtitle { display: none; }
  .balance-title { font-size: 12px; }
}

@media (max-height: 660px) {
  .balance-subtitle { display: none; }
  textarea { height: min(22vh, 160px); }

  .quiz.quiz-standalone .form-actions { padding-top: 10px; }
  .quiz.quiz-standalone .card-subtitle { display: none; }
}

select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--fieldBorder);
  font-size: 14px;
  background-color: var(--field);
  color: var(--text);
}
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(139,27,40,0.18);
}

.welcome-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.welcome-logo img {
  width: 72px;
  height: auto;
}

.logo-text {
  font-weight: 750;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ---------- Анимации (премиум, деликатно) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: opacity, transform;
}
[data-reveal="fade"] { transform: translateY(0); }
[data-reveal="rise"] { transform: translateY(10px); }

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Отладка i18n ---------- */
[data-i18n-debug="1"] .i18n-missing {
  outline: 1px dashed rgba(139,27,40,0.45);
  outline-offset: 2px;
  text-decoration: underline dotted rgba(139,27,40,0.55);
  text-underline-offset: 3px;
  border-radius: 6px;
  background: rgba(139,27,40,0.06);
}

/* ---------- Футер ---------- */
.site-footer {
  padding: 28px 0 40px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .site-footer {
  border-top-color: rgba(255,255,255,0.08);
}
.footer-inner {
  display: grid;
  gap: 10px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.footer-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
}
.footer-link:hover { color: var(--text); }
.footer-note {
  font-size: 12px;
  color: var(--muted2);
  line-height: 1.4;
  max-width: 90ch;
}

.report-section h2 { margin: 0 0 4px; font-size: 18px; }
.section-subtitle { margin: 0 0 10px; font-size: 13px; color: var(--muted2); }
/* ── Auth: статус в шапке ────────────────────────────────────────────── */
.auth-status {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-status.hidden { display: none; }
.auth-email {
  font-size: 13px;
  color: var(--muted);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Auth: карточка step-0 ───────────────────────────────────────────── */
#step-0 {
  /* убираем стандартные падинги .card — у нас своя компоновка */
  padding: 0 !important;
  overflow: hidden;
}

.auth-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 36px 32px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(139,27,40,0.07), transparent 70%),
    var(--card);
}

/* Логотип */
.auth-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.auth-brand-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 14px;
}

.auth-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accentHover));
  box-shadow: 0 4px 12px rgba(139,27,40,0.30);
}
.auth-brand-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}

/* Заголовок */
.auth-head { text-align: center; margin-bottom: 24px; }
.auth-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.auth-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

/* Табы Вход / Регистрация */
.auth-tabs {
  display: flex;
  width: 100%;
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: 22px;
  gap: 2px;
}
.auth-tab {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.auth-tab.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
  font-weight: 600;
}
.auth-tab:not(.is-active):hover { color: var(--text); }

/* Форма */
.auth-form { width: 100%; display: flex; flex-direction: column; gap: 14px; }

/* Переключатель Email / Телефон */
.auth-id-switcher {
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}
.auth-id-switcher.hidden { display: none; }
.auth-id-btn {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.auth-id-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(139,27,40,0.05);
}

/* Поле */
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field.hidden { display: none; }
.auth-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.auth-label-row { display: flex; justify-content: space-between; align-items: center; }

.auth-input-wrap { position: relative; }
.auth-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--fieldBorder);
  border-radius: var(--radius-md);
  background: var(--field);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139,27,40,0.10);
}
.auth-input::placeholder { color: var(--muted2); }

/* Кнопка показать пароль */
.auth-input-wrap .auth-input { padding-right: 42px; }
.auth-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--muted2);
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.auth-eye:hover, .auth-eye.is-active { color: var(--accent); }

/* Ошибка */
.auth-error {
  margin: 0;
  font-size: 13px;
  color: var(--accent);
  min-height: 18px;
  line-height: 1.4;
}

/* Кнопка отправки */
.auth-submit { width: 100%; margin-top: 2px; }

/* Разделитель */
.auth-divider {
  position: relative;
  width: 100%;
  text-align: center;
  margin: 20px 0 16px;
  color: var(--muted2);
  font-size: 13px;
}
.auth-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.auth-divider span {
  position: relative;
  z-index: 1;
  background: var(--card);
  padding: 0 10px;
}

/* Кнопка «без аккаунта» */
.auth-skip {
  width: 100%;
  padding: 11px 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.auth-skip:hover {
  border-color: var(--fieldBorder);
  color: var(--text);
  background: var(--bg);
}
.auth-skip-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted2);
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .auth-card { padding: 28px 20px 26px; }
  .auth-title { font-size: 19px; }
}

/* ═══════════════════════════════════════════════════
   STEP 5 — Селектор мессенджера + баннер пароля
   ═══════════════════════════════════════════════════ */

.messenger-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.messenger-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: border-color .18s, background .18s, color .18s;
  line-height: 1;
}

.messenger-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.messenger-btn.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.messenger-nick-input {
  margin-top: 10px;
}

.optional-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.form-hint-small {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  margin-bottom: 0;
}

.required {
  color: var(--accent);
}

/* Баннер с автосгенерированным паролем */
.password-banner {
  background: var(--card-bg, #f8f8fa);
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.password-banner-text {
  margin: 0 0 10px;
  font-size: 14px;
}

.password-banner-code {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.password-banner-code code {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 0;
}

.password-banner-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}


/* ═══════════════════════════════════════════════════
   PRICING — Страница выбора тарифа (step-7)
   ═══════════════════════════════════════════════════ */

/* ===== Тарифы (step-7): компактная вёрстка без скролла ===== */
.pricing-title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 4px;
}

.pricing-subtitle {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 12px;
  line-height: 1.4;
}

/* Всегда два столбца — side-by-side и на мобиле */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

/* Карточка тарифа */
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--card);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pricing-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* Выделенная карточка */
.pricing-card--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 6px 20px rgba(139,27,40,0.14);
}

.pricing-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.pricing-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pricing-plan-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.pricing-amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.pricing-currency {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* Список фич — скрываем на очень узких экранах чтобы влезть */
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

.pricing-feature::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

/* Кнопка тарифа */
.pricing-btn {
  width: 100%;
  margin-top: auto;
  padding: 10px 12px;
  font-size: 13px;
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  box-shadow: none;
  padding: 10px 12px;
}

.btn-outline:hover {
  background: var(--accent);
  color: #fff;
}

.pricing-btn:disabled {
  opacity: 0.55;
  cursor: wait;
  pointer-events: none;
}

/* На очень низких экранах прячем список фич — только цена и кнопка */
@media (max-height: 680px) {
  .pricing-features { display: none; }
  .pricing-card { gap: 8px; padding: 12px 12px 12px; }
  .pricing-title { font-size: 17px; margin-bottom: 2px; }
  .pricing-subtitle { display: none; }
}

/* Кнопка отчёта на step-6 */
.report-actions {
  display: flex !important;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

html[data-page="quiz"] #step-6 .report-actions {
  display: flex !important;
  justify-content: center !important;
  margin-top: 18px !important;
}

html[data-page="quiz"] #step-6 .report-actions [data-prev-step],
html[data-page="quiz"] #step-6 .report-actions [data-next-step] {
  display: inline-flex !important;
}

/* Баннер приложения */
.app-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin: 20px 0 8px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 14px;
  flex-wrap: wrap;
}
.app-banner__icon {
  font-size: 22px;
  color: var(--accent);
  flex-shrink: 0;
}
.app-banner__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 160px;
}
.app-banner__text strong {
  font-size: 14px;
  color: var(--text-primary);
}
.app-banner__text span {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.app-banner__links {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.app-banner__btn {
  display: inline-block;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.app-banner__btn:hover { opacity: 0.85; }

/* Deprecated app popup styles removed: app links are shown after store publication. */
.app-popup {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + var(--safeB, 0px));
  max-width: 520px;
  margin: 0 auto;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 44px 16px 20px;
  background: var(--card);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  flex-wrap: wrap;
  animation: app-popup-in 280ms cubic-bezier(0.2,0.9,0.2,1);
}
.app-popup[hidden] { display: none; }
@keyframes app-popup-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.app-popup__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary, #666);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.app-popup__close:hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.app-popup__icon {
  font-size: 22px;
  color: var(--accent);
  flex-shrink: 0;
}
.app-popup__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 160px;
}
.app-popup__text strong {
  font-size: 14px;
  color: var(--text-primary);
}
.app-popup__text span {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.app-popup__links {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.app-popup__btn {
  display: inline-block;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.app-popup__btn:hover { opacity: 0.85; }
.app-popup__btn--primary { background: var(--accent); color: #fff; }

.report-personal-card {
  margin: 18px 0 22px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
}
.report-personal-card__eyebrow {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.report-personal-card p { margin: 0; color: var(--text); line-height: 1.65; white-space: pre-line; }

@media (max-width: 480px) {
  .app-popup {
    padding: 14px 40px 14px 16px;
    gap: 10px;
  }
  .app-popup__text strong { font-size: 13px; }
  .app-popup__text span { font-size: 11px; }
  .app-popup__btn { padding: 7px 12px; font-size: 12px; }
}

/* Статус оплаты */
.pricing-status {
  text-align: center;
  padding: 14px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  margin-bottom: 12px;
}

.pricing-status[data-status-type="success"] {
  background: color-mix(in srgb, #2a9d5c 10%, transparent);
  border-color: color-mix(in srgb, #2a9d5c 30%, transparent);
}

.pricing-status[data-status-type="success"] .pricing-status-text { color: #2a9d5c; }

.pricing-status[data-status-type="warn"] {
  background: color-mix(in srgb, #e8a020 10%, transparent);
  border-color: color-mix(in srgb, #e8a020 30%, transparent);
}

.pricing-status[data-status-type="warn"] .pricing-status-text { color: #b97c10; }

[data-theme="dark"] .pricing-status[data-status-type="warn"] .pricing-status-text { color: #e8a020; }

.pricing-status-text {
  font-size: 14px;
  color: var(--accent);
  margin: 0;
}

/* Временный байпас оплаты — удалить после подключения YooKassa */
.pricing-bypass-hint {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 8px;
}
.pricing-bypass-btn {
  font-size: 14px;
  opacity: 0.75;
  display: none !important;
}
.pricing-bypass-btn:hover { opacity: 1; }
.pricing-bypass-btn.is-visible { display: inline-flex !important; }
.pricing-bypass-hint { display: none; }
.pricing-bypass-hint.is-visible { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING HERO v2  (index.html)
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-landing {
  display: flex;
  min-height: 100svh;
  position: relative;
}

/* ── Левая половина: текст ── */
.hero-left {
  display: flex;
  flex-direction: column;
  width: min(580px, 54%);
  min-width: 320px;
  padding: clamp(20px, 3vw, 48px) clamp(20px, 4vw, 60px);
  background: var(--bg);
  position: relative;
  z-index: 2;
  overflow-y: auto;
}

/* ── Правая половина: фото ── */
.hero-right {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% top;
  display: block;
}

.hero-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg) 0%, rgba(0,0,0,0) 28%);
  pointer-events: none;
}

/* ── Шапка внутри левой части ── */
.hero-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(24px, 4vh, 48px);
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: contain;
}

.hero-brand-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* ── Тело контента ── */
.hero-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.8vh, 30px);
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(139,27,40,0.08);
  border: 1px solid rgba(139,27,40,0.14);
  border-radius: 999px;
  padding: 5px 12px;
  width: fit-content;
}

[data-theme="dark"] .hero-tag {
  background: rgba(197,69,85,0.12);
  border-color: rgba(197,69,85,0.22);
}

.hero-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--text);
}

.hero-title em {
  font-style: italic;
  color: var(--accent);
}

.hero-lead {
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  max-width: 44ch;
}

/* ── 3 Кита ── */
.hero-pillars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-pillar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(139,27,40,0.05);
  border: 1px solid rgba(139,27,40,0.10);
  transition: background 0.2s, transform 0.2s;
  cursor: default;
}

.hero-pillar:hover {
  background: rgba(139,27,40,0.09);
  transform: translateX(4px);
}

[data-theme="dark"] .hero-pillar {
  background: rgba(197,69,85,0.08);
  border-color: rgba(197,69,85,0.16);
}

[data-theme="dark"] .hero-pillar:hover {
  background: rgba(197,69,85,0.14);
}

.hero-pillar-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.hero-pillar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-pillar-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.hero-pillar-text span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

/* ── CTA ── */
.hero-cta-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.hero-cta-btn {
  width: min(420px, 100%);
  justify-content: center;
  font-size: 16px;
  padding: 16px 28px;
  border-radius: 16px;
  letter-spacing: 0.01em;
}

.hero-cta-note {
  font-size: 12px;
  color: var(--muted2);
  margin: 0;
}

/* ── Quote badge over image ── */
.hero-quote-badge {
  position: absolute;
  bottom: 28px;
  left: 16px;
  right: 16px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  border: 1px solid rgba(255,255,255,0.5);
}

[data-theme="dark"] .hero-quote-badge {
  background: rgba(20,18,16,0.88);
  border-color: rgba(255,255,255,0.10);
}

.hero-quote-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

.hero-quote-text strong { color: var(--accent); }

/* ── Mobile: стек ── */
@media (max-width: 720px) {
  .hero-landing { flex-direction: column; }

  .hero-left {
    width: 100%;
    min-width: 0;
    padding: 20px 20px 32px;
    order: 2;
    overflow-y: visible;
  }

  .hero-right {
    order: 1;
    height: 52vw;
    min-height: 220px;
    max-height: 340px;
    flex: none;
  }

  .hero-image { object-position: center 20%; }

  .hero-image-overlay {
    background: linear-gradient(to bottom, transparent 55%, var(--bg));
  }

  .hero-title { font-size: clamp(28px, 7vw, 42px); }

  .hero-quote-badge { display: none; }

  .hero-topbar { margin-bottom: 18px; }
}

/* ── Маленькие экраны по высоте ── */
@media (max-height: 680px) and (min-width: 721px) {
  .hero-body { gap: 14px; }
  .hero-pillars { gap: 6px; }
  .hero-pillar { padding: 8px 12px; }
  .hero-pillar-icon { font-size: 20px; width: 30px; }
  .hero-lead { display: none; }
}

@media (max-height: 580px) and (min-width: 721px) {
  .hero-pillars { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUIZ GAMIFICATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* Крупнее и смелее заголовки форм */
.quiz .form-title {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Emoji + текст в категориях колеса баланса */
.balance-label-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.balance-emoji {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Прогресс-бар: ярче и с анимацией */
.progress {
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,0.08);
  height: 6px;
}

[data-theme="dark"] .progress {
  background: rgba(255,255,255,0.10);
}

.progress-inner {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ff8a65));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(139,27,40,0.4);
}

/* Более игривый степ-хедер */
.step-header {
  margin: -8px 0 20px;
}

.step-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}

.step-header-row .step-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(139,27,40,0.08);
  border: 1px solid rgba(139,27,40,0.14);
  color: var(--accent);
}

[data-theme="dark"] .step-header-row .step-label {
  background: rgba(197,69,85,0.12);
  border-color: rgba(197,69,85,0.22);
}

.step-header-row .step-percent {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--muted);
}

[data-theme="dark"] .step-header-row .step-percent {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.10);
  color: var(--muted);
}

/* Слайдеры: стильнее */
/* ===== Игровой трекер шагов (Duolingo-style) ===== */
.step-tracker {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 6px 0 14px;
  width: 100%;
}

.step-tracker__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.step-tracker__dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.35s cubic-bezier(.34,1.56,.64,1),
              background 0.35s ease,
              transform 0.35s cubic-bezier(.34,1.56,.64,1),
              box-shadow 0.35s ease;
  color: var(--muted2);
  position: relative;
  z-index: 1;
}
.step-tracker__dot .mir-icon {
  width: 20px;
  height: 20px;
  color: inherit;
}

.step-tracker__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted2);
  transition: color 0.3s ease;
  white-space: nowrap;
}

/* Линия-соединитель */
.step-tracker__line {
  flex: 1;
  height: 2.5px;
  background: var(--border);
  margin-top: 18px; /* выравнивание по центру точки */
  border-radius: 999px;
  transition: background 0.4s ease;
  min-width: 8px;
}
.step-tracker__line--done {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #ff8a65));
  box-shadow: 0 0 6px rgba(139,27,40,0.3);
}

/* Выполненный шаг */
.step-tracker__step--done .step-tracker__dot {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent),
              0 4px 12px rgba(139,27,40,0.18);
}
.step-tracker__step--done .step-tracker__label {
  color: var(--accent);
}

/* Текущий (последний done) — анимация появления */
.step-tracker__step--done:last-of-type .step-tracker__dot,
.step-tracker__step--done:has(+ .step-tracker__line:not(.step-tracker__line--done)) .step-tracker__dot {
  transform: scale(1.12);
  border-width: 3px;
}

/* Тёмная тема */
[data-theme="dark"] .step-tracker__dot {
  background: var(--card);
  border-color: var(--border);
}
[data-theme="dark"] .step-tracker__step--done .step-tracker__dot {
  background: color-mix(in srgb, var(--accent) 18%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
              0 4px 16px rgba(197,69,85,0.25);
}

/* Мобильная адаптация */
@media (max-width: 480px) {
  .step-tracker__dot { width: 32px; height: 32px; }
  .step-tracker__dot .mir-icon { width: 16px; height: 16px; }
  .step-tracker__label { font-size: 8px; }
  .step-tracker__line { margin-top: 14px; }
}
/* Компактный трекер для step-6 и step-7 — без подписей, точки меньше */
.step-tracker--compact {
  padding: 4px 0 10px;
}
.step-tracker--compact .step-tracker__dot {
  width: 28px;
  height: 28px;
}
.step-tracker--compact .step-tracker__dot .mir-icon {
  width: 14px;
  height: 14px;
}
.step-tracker--compact .step-tracker__label {
  display: none;
}
.step-tracker--compact .step-tracker__line {
  margin-top: 12px;
}
/* Финальная точка (Отчёт / Оплата) — крупнее и с подписью */
.step-tracker__step--report .step-tracker__dot {
  width: 36px;
  height: 36px;
  border-width: 3px;
}
.step-tracker__step--report .step-tracker__dot .mir-icon {
  width: 18px;
  height: 18px;
}
.step-tracker__step--report .step-tracker__label {
  display: block;
  color: var(--accent);
  font-size: 9px;
}
.step-tracker--compact .step-tracker__line {
  min-width: 6px;
}
/* ================================================ */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  outline: none;
  cursor: pointer;
  margin-top: 10px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  background-image: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 60%);
  box-shadow: 0 2px 8px rgba(139,27,40,0.35);
  border: 2px solid rgba(255,255,255,0.5);
  cursor: grab;
  transition: transform 0.15s, box-shadow 0.15s;
}

input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }

input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(139,27,40,0.35);
  border: 2px solid rgba(255,255,255,0.5);
  cursor: grab;
}

/* Значение слайдера — акцент */
.balance-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  min-width: 28px;
  text-align: right;
  line-height: 1;
}

/* Карточки квиза: глубже тень, теплее */
.quiz .card {
  border-radius: 24px;
  border: 1px solid rgba(139,27,40,0.08);
  background:
    radial-gradient(900px 300px at 0% 0%, rgba(139,27,40,0.06), rgba(0,0,0,0) 60%),
    var(--card);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.8) inset,
    0 24px 60px rgba(0,0,0,0.12),
    0 8px 20px rgba(0,0,0,0.08);
}

[data-theme="dark"] .quiz .card {
  border-color: rgba(197,69,85,0.12);
  background:
    radial-gradient(900px 300px at 0% 0%, rgba(197,69,85,0.12), rgba(0,0,0,0) 60%),
    var(--card);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 24px 60px rgba(0,0,0,0.40),
    0 8px 20px rgba(0,0,0,0.25);
}

/* Кнопка «Продолжить» — шире, крупнее */
.quiz .btn-primary {
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 14px;
}

/* Кнопки навигации: edge arrows — стильнее */
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next {
  background: var(--accent);
  background-image: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 60%);
}

/* Форм-групп: больше отступ */
.form-group {
  margin-bottom: 20px;
}

/* Лейбл — жирнее */
.form-group > label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
}

/* Поля ввода — округлее */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
textarea,
select {
  border-radius: 12px;
  border: 1.5px solid var(--fieldBorder);
  background: var(--field);
  color: var(--text);
  font-size: 15px;
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.18s, box-shadow 0.18s;
  outline: none;
  font-family: inherit;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139,27,40,0.12);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--field);
  border-color: var(--fieldBorder);
  color: var(--text);
}

/* Hint под полями */
.form-hint {
  font-size: 13px;
  color: var(--muted2);
  line-height: 1.5;
  margin: 4px 0 0;
}

/* Чекбокс в виде toggle */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 5px;
  accent-color: var(--accent);
  cursor: pointer;
  margin-top: 2px;
}

/* Форм-actions: кнопки рядом */
.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.form-actions .btn-primary { flex: 1; min-width: 140px; }
.form-actions .btn-secondary { min-width: 100px; }

/* Счётчик символов в textarea */
.counter {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 6px;
  text-align: right;
}

/* Error messages */
.form-error {
  font-size: 13px;
  color: #c0392b;
  min-height: 18px;
  margin-top: 8px;
  line-height: 1.4;
}

[data-theme="dark"] .form-error { color: #ff6b6b; }

/* ============================================================
   v1.8.0 — премиум-апдейт
   ============================================================ */

:root {
  --gold: #C9A86F;
  --gold-soft: #E8D5AC;
}

/* Крупный читаемый текст по всему квизу */
.quiz .form-title {
  font-size: clamp(22px, 2.8vw, 30px) !important;
  letter-spacing: -0.01em;
}
.quiz .form-hint,
.quiz .form-hint-small {
  font-size: 15px;
  line-height: 1.55;
}
.quiz .form label {
  font-size: 15px;
  font-weight: 600;
}
.quiz .form input[type="text"],
.quiz .form input[type="email"],
.quiz .form input[type="tel"],
.quiz .form input[type="number"],
.quiz .form input[type="date"],
.quiz .form input[type="time"],
.quiz .form textarea {
  font-size: 17px;
  padding: 14px 16px;
  border-radius: 14px;
}
.quiz .btn { font-size: 16px; padding: 14px 22px; border-radius: 14px; }
.quiz .btn.btn-primary { font-weight: 700; }

.balance-title { font-size: 17px !important; }
.balance-subtitle { font-size: 14px !important; }
.balance-help { font-size: 13.5px !important; line-height: 1.5; }
.balance-value { font-size: 26px !important; }

/* Шаг 1: один ползунок на экран со скролл-снапом */
#step-1 .balance-group {
  display: block;
  max-height: 70vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  padding-right: 4px;
  margin: 0 -8px;
}
#step-1 .balance-item {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 12px;
  box-sizing: border-box;
  position: relative;
}
#step-1 .balance-item + .balance-item {
  border-top: 1px dashed var(--border, rgba(0,0,0,.1));
}
#step-1 .balance-label-row { margin-bottom: 18px; }
#step-1 input[type="range"] { width: 100%; }

@media (max-width: 720px) {
  #step-1 .balance-group { max-height: 65vh; }
  #step-1 .balance-item { min-height: 55vh; padding: 16px 8px; }
}

/* Шаг 4: ползунок дохода */
.income-slider-group { margin-bottom: 16px; }
.income-slider-group label {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.income-display {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent, var(--gold));
  font-variant-numeric: tabular-nums;
}
#incomeSlider { width: 100%; margin-top: 10px; }
.income-scale {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted2, #888);
  margin-top: 6px; font-variant-numeric: tabular-nums;
}

/* Шаг 5: MAX-кнопка (такой же стиль, но чуть акцентная метка) */
.messenger-btn[data-messenger="MAX"] { font-weight: 700; }

/* Премиум-акценты на главной: золотая нить */
.hero-title em {
  color: var(--gold);
  font-style: italic;
}
.hero-pillar-icon {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #fff;
}
.hero-cta-btn {
  letter-spacing: 0.02em;
  font-weight: 700;
}
.hero-quote-badge {
  border: 1px solid var(--gold);
}

/* Тонкие оторочки карточек квиза */
.quiz .card {
  border: 1px solid var(--border, rgba(0,0,0,.06));
  box-shadow: 0 12px 48px rgba(24, 18, 10, .06);
}
[data-theme="dark"] .quiz .card {
  box-shadow: 0 12px 48px rgba(0,0,0,.35);
}

/* ============================================================
   v1.8.1 — крупные ползунки баланса + 2-колоночный pricing
   ============================================================ */

/* Шаг 1 — гармоничные крупные ползунки (нейтральный фон, без бежевого chip) */
#step-1 .balance-item {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
#step-1 .balance-item + .balance-item {
  border-top: 1px solid var(--border, rgba(0,0,0,.06)) !important;
}
[data-theme="dark"] #step-1 .balance-item + .balance-item {
  border-top-color: rgba(255,255,255,.08) !important;
}
#step-1 .balance-emoji { font-size: 32px !important; }
#step-1 .balance-title { font-size: 19px !important; font-weight: 700; }
#step-1 .balance-subtitle { font-size: 14px !important; }
#step-1 .balance-help { font-size: 13.5px !important; line-height: 1.55; opacity: .85; }
#step-1 .balance-value {
  font-size: 32px !important;
  font-weight: 700;
  color: var(--accent, #2c3e50);
  font-variant-numeric: tabular-nums;
}
#step-1 input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--border, rgba(0,0,0,.08));
  outline: none;
  cursor: pointer;
  margin-top: 14px;
}
#step-1 input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent, #2c3e50);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .12s ease;
}
#step-1 input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); }
#step-1 input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent, #2c3e50);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  cursor: pointer;
}
[data-theme="dark"] #step-1 input[type="range"] {
  background: rgba(255,255,255,.12);
}

/* Подсказка-стрелка «листай вниз» под первым ползунком */
#step-1 .balance-item:first-child::after {
  content: "↓ листай дальше ↓";
  position: absolute;
  bottom: 8px; left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted2, #999);
  opacity: .6;
}

/* Pricing — две колонки */
.pricing-grid--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .pricing-grid--2 { grid-template-columns: 1fr; }
}
/* Pricing — три колонки (PR #6) */
.pricing-grid--3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .pricing-grid--3 { grid-template-columns: 1fr; }
}
.pricing-badge--best {
  background: var(--accent, #c9a86f);
  color: #fff;
}
/* Информационные блоки про триал/автосписания/отмену (PR #6) */
.pricing-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px auto 6px;
  max-width: 980px;
}
@media (max-width: 720px) {
  .pricing-info-grid { grid-template-columns: 1fr; }
}
.pricing-info {
  background: color-mix(in srgb, var(--card) 92%, var(--text) 8%);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.pricing-info__icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
}
.pricing-info__title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--text);
}
.pricing-info__text {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.pricing-terms-link {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 0;
}
.pricing-terms-link a { color: var(--accent); }
.pricing-equiv {
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted2, #777);
  font-weight: 600;
}
.pricing-equiv .pricing-old {
  color: var(--muted2, #aaa);
  text-decoration: line-through;
  font-weight: 500;
  margin-left: 4px;
}
.pricing-card--featured .pricing-equiv {
  color: var(--gold);
}
.pricing-bypass-hint {
  text-align: center;
  font-size: 13px;
  color: var(--muted2);
  background: rgba(201, 168, 111, .08);
  border: 1px dashed var(--gold-soft);
  padding: 10px 14px;
  border-radius: 12px;
  margin: 20px auto;
  max-width: 560px;
}

/* Логотип — прозрачный PNG поверх любого фона, без плашки */
.brand-logo, .hero-logo, .result-brand-logo {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  object-fit: contain;
}
.brand-logo, .result-brand-logo { width: 40px; height: 40px; }
.hero-logo { width: 48px; height: 48px; }

/* ============================================================
   v1.8.6 — Колесо Баланса: 2 сферы на экран, scroll-snap
   ============================================================ */
html, body { overflow-x: hidden; }

/* Меньше боковых отступов карточки шага на мобиле — лучше использует ширину экрана */
@media (max-width: 480px) {
  .quiz.quiz-standalone .card,
  .quiz .card { padding: 16px 12px 18px !important; }
}

/* Прогресс «Сфера N из 8» */
#step-1 .balance-progress {
  display: block !important;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 6px 0 8px;
  background: var(--card);
  margin: 0 0 6px;
}
#step-1 .balance-progress-label {
  display: block;
  font-size: 12px;
  color: var(--muted2);
  text-align: center;
  letter-spacing: .04em;
  margin-bottom: 5px;
}
#step-1 .balance-progress-label b { color: var(--gold, #C9A86F); font-weight: 700; }
#step-1 .balance-progress-track {
  height: 3px; border-radius: 999px;
  background: var(--border, rgba(0,0,0,.08));
  overflow: hidden;
}
#step-1 .balance-progress-fill {
  height: 100%; width: 12.5%;
  background: linear-gradient(90deg, var(--gold-soft, #E8D5AC), var(--gold, #C9A86F));
  transition: width .3s ease;
  border-radius: 999px;
}

/* Контейнер: scroll-snap по 2 карточкам на экран */
#step-1 .balance-group {
  display: block !important;
  flex-direction: initial;
  max-height: calc(100svh - var(--headerH) - 220px) !important;
  overflow-y: auto !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth;
  padding: 0 2px 16px !important;
  margin: 0 -2px !important;
  -webkit-overflow-scrolling: touch;
}

/* Каждая карточка плотно по содержимому, без пустот; снап работает по началу */
#step-1 .balance-card {
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  min-height: 0 !important;
  padding: 18px 18px 20px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center !important;
  gap: 6px;
  border-radius: 16px;
  background: var(--chip) !important;
  border: 1px solid var(--border) !important;
  position: relative !important;
  animation: none !important;
  margin-bottom: 12px;
}
[data-theme="dark"] #step-1 .balance-card {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}

#step-1 .balance-card-emoji {
  font-size: 44px !important;
  margin: 0 0 4px !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.08));
  animation: none !important;
}
#step-1 .balance-card-title {
  font-size: 20px !important;
  font-weight: 700;
  margin: 0 !important;
  letter-spacing: -0.01em;
}
#step-1 .balance-card-subtitle {
  display: block !important;
  font-size: 12px !important;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin: 0 !important;
}
#step-1 .balance-card-help {
  display: block !important;
  font-size: 12.5px !important;
  color: var(--muted, #777);
  max-width: 320px;
  line-height: 1.4;
  margin: 4px 0 6px !important;
}

#step-1 .rating-value {
  font-size: 48px !important;
  font-weight: 800;
  line-height: 1;
  color: var(--val-color);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 8px !important;
  transition: color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
#step-1 .balance-card.is-bumping .rating-value { transform: scale(1.18); }
#step-1 .balance-card[data-val-bucket="low"]  { --val-color: #e76f51; }
#step-1 .balance-card[data-val-bucket="mid"]  { --val-color: #f4a261; }
#step-1 .balance-card[data-val-bucket="high"] { --val-color: #2a9d8f; }

#step-1 .rating-dots {
  display: grid !important;
  grid-template-columns: repeat(10, 1fr) !important;
  gap: 5px !important;
  width: 100%;
  max-width: 360px;
  padding: 0 !important;
}
#step-1 .rating-dot {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  border: 1.5px solid var(--border) !important;
  background: transparent;
  font-size: 11px !important;
  font-weight: 600;
  padding: 0 !important;
  color: var(--muted2);
  transition: background .12s ease, border-color .12s ease, transform .15s cubic-bezier(.34,1.56,.64,1);
}
#step-1 .rating-dot.is-filled {
  background: var(--val-color) !important;
  border-color: var(--val-color) !important;
  color: #fff !important;
}
#step-1 .rating-dot.is-selected {
  transform: scale(1.2);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

#step-1 .balance-card[data-sphere="1"]::after { display: none !important; }
#step-1 .form-title { font-size: 20px !important; margin: 0 0 2px !important; }
#step-1 .form-hint  { font-size: 12.5px !important; margin: 0 0 8px !important; }

@media (max-width: 480px) {
  /* Высвобождаем вертикаль: уменьшаем заголовки шага и прогресс-метку */
  #step-1 .form-title { font-size: 17px !important; margin: 0 0 1px !important; }
  #step-1 .form-hint  { font-size: 11.5px !important; margin: 0 0 4px !important; line-height: 1.3 !important; }
  #step-1 .balance-progress { padding: 4px 0 6px !important; margin-bottom: 4px !important; }
  #step-1 .balance-progress-label { font-size: 11px !important; margin-bottom: 4px !important; }

  /* Контейнер карточек получает больше места (220 → 168) */
  #step-1 .balance-group {
    max-height: calc(100svh - var(--headerH) - 168px) !important;
    padding-bottom: 8px !important;
  }

  /* Компактная карточка: всё умещается в один экран */
  #step-1 .balance-card {
    padding: 10px 12px 12px !important;
    min-height: 0 !important;
    gap: 2px !important;
    margin-bottom: 8px !important;
  }
  #step-1 .balance-card-emoji {
    font-size: 28px !important;
    margin: 0 !important;
  }
  #step-1 .balance-card-emoji .mir-icon { width: 32px; height: 32px; }
  #step-1 .balance-card-title { font-size: 16px !important; margin: 2px 0 0 !important; }
  #step-1 .balance-card-subtitle { font-size: 10px !important; letter-spacing: .06em !important; }
  #step-1 .balance-card-help  {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    margin: 2px 0 4px !important;
    max-width: 320px;
  }
  #step-1 .rating-value { font-size: 32px !important; margin: 0 0 4px !important; }
  #step-1 .rating-dots  { max-width: 320px; gap: 4px !important; }
  #step-1 .rating-dot   { font-size: 10px !important; }
}

/* ============================================================
   v1.8.4 — редизайн Колеса Баланса: карточки + tap-rating (legacy)
   ============================================================ */

/* Прогресс «1 из 8» */
.balance-progress {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0 12px;
  background: var(--card-bg);
  margin: -4px 0 8px;
}
.balance-progress-label {
  display: block;
  font-size: 13px;
  color: var(--muted2);
  text-align: center;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.balance-progress-label b { color: var(--gold, #C9A86F); font-weight: 700; }
.balance-progress-track {
  height: 4px;
  border-radius: 999px;
  background: var(--border, rgba(0,0,0,.08));
  overflow: hidden;
}
.balance-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-soft, #E8D5AC), var(--gold, #C9A86F));
  transition: width .3s ease;
  border-radius: 999px;
}

/* Скролл-снап остался — каждая карточка на экран */
#step-1 .balance-group {
  display: block;
  max-height: 70vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  padding: 0 4px 40px;
  margin: 0 -4px;
}

/* Карточка одной сферы */
.balance-card {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  box-sizing: border-box;
  position: relative;
  --val: 5;
  --val-color: #f4a261;
}
.balance-card[data-val-bucket="low"]  { --val-color: #e76f51; }
.balance-card[data-val-bucket="mid"]  { --val-color: #f4a261; }
.balance-card[data-val-bucket="high"] { --val-color: #2a9d8f; }
.balance-card + .balance-card {
  border-top: 1px solid var(--border, rgba(0,0,0,.06));
}
[data-theme="dark"] .balance-card + .balance-card {
  border-top-color: rgba(255,255,255,.06);
}

.balance-card-emoji {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.08));
  animation: balance-bounce .35s cubic-bezier(.34,1.56,.64,1);
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes balance-bounce {
  0%   { transform: scale(.7); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ===== Собственные SVG-иконки МИР ===== */
.mir-icon {
  width: 64px;
  height: 64px;
  color: var(--accent);
  display: block;
  flex-shrink: 0;
  /* плавная смена цвета при смене темы */
  transition: color 0.3s ease;
}
.mir-icon--sm {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 2px;
  margin-bottom: 1px;
}
/* В step-label иконка чуть меньше и чуть другого цвета */
.step-label .mir-icon--sm {
  color: var(--accent);
  opacity: 0.85;
}
/* В горизонтальной компактной сетке (#step-1) — иконки меньше */
#step-1 .balance-card-emoji .mir-icon {
  width: 32px;
  height: 32px;
}
/* Тёмная тема: иконки светлее */
[data-theme="dark"] .mir-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(197,69,85,0.3));
}

.balance-card-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.balance-card-subtitle {
  font-size: 14px;
  color: var(--muted2);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.balance-card-help {
  font-size: 14.5px;
  color: var(--muted, #777);
  max-width: 360px;
  line-height: 1.5;
  margin: 0 0 22px;
}

/* Огромная цифра-индикатор, меняет цвет в зависимости от значения */
.rating-value {
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  color: var(--val-color);
  font-variant-numeric: tabular-nums;
  margin: 6px 0 18px;
  transition: color .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.balance-card.is-bumping .rating-value { transform: scale(1.15); }

/* Точки 1..10 */
.rating-dots {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: center;
  max-width: 100%;
  padding: 4px 2px;
}
.rating-dot {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border, rgba(0,0,0,.12));
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted2);
  cursor: pointer;
  /* bounce-переход при нажатии */
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 140ms ease,
              border-color 140ms ease,
              box-shadow 200ms ease,
              color 120ms ease;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
  font-family: "Nunito", sans-serif;
}
.rating-dot:hover {
  border-color: var(--val-color);
  color: var(--val-color);
  transform: scale(1.08) translateY(-1px);
}
.rating-dot:active {
  transform: scale(0.92);
}
.rating-dot.is-filled {
  background: var(--val-color);
  border-color: var(--val-color);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.rating-dot.is-selected {
  /* bounce при выборе значения */
  transform: scale(1.22);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--val-color) 45%, transparent),
              0 0 0 3px color-mix(in srgb, var(--val-color) 20%, transparent);
  animation: dotPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dotPop {
  0%   { transform: scale(0.85); }
  60%  { transform: scale(1.28); }
  100% { transform: scale(1.22); }
}

@media (max-width: 480px) {
  .rating-dots { gap: 4px; }
  .rating-dot { width: 30px; height: 30px; font-size: 12px; border-width: 1.25px; }
  .balance-card-emoji { font-size: 54px; }
  .balance-card-title { font-size: 22px; }
  .rating-value { font-size: 72px; }
  .balance-card { padding: 24px 16px; min-height: 58vh; }
}

/* Подсказка-стрелка под первой карточкой */
.balance-card[data-sphere="1"]::after {
  content: "↓ свайп вверх ↓";
  position: absolute;
  bottom: 16px; left: 0; right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted2);
  opacity: .5;
  animation: balance-arrow 1.6s ease-in-out infinite;
}
@keyframes balance-arrow {
  0%, 100% { transform: translateY(0); opacity: .35; }
  50%      { transform: translateY(4px); opacity: .65; }
}

/* Демо-оплата: оверлей с прогрессом */
.demo-pay-overlay {
  position: fixed; inset: 0;
  background: rgba(20,16,12,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: demo-pay-fade .25s ease-out;
}
@keyframes demo-pay-fade { from { opacity: 0; } to { opacity: 1; } }
.demo-pay-card {
  background: var(--card-bg, #fff);
  border-radius: 20px;
  padding: 36px 32px;
  text-align: center;
  max-width: 360px;
  width: calc(100% - 40px);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.demo-pay-spinner {
  width: 44px; height: 44px;
  border: 3.5px solid var(--border, rgba(0,0,0,.1));
  border-top-color: var(--gold, #C9A86F);
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: demo-pay-spin 1s linear infinite;
}
@keyframes demo-pay-spin { to { transform: rotate(360deg); } }
.demo-pay-title {
  font-size: 18px; font-weight: 700; margin-bottom: 6px;
}
.demo-pay-step {
  font-size: 14px; color: var(--muted2);
  min-height: 1.4em;
}


/* ===== Mobile quiz fixes (April 2026) ===== */
@media (max-width: 900px) {
  html[data-page="quiz"] body { overscroll-behavior-y: none; }
  html[data-page="quiz"] main { overflow: hidden; overscroll-behavior: none; }
  .quiz.quiz-standalone .card {
    height: calc(100svh - var(--headerH) - 24px - var(--safeB));
    max-height: calc(100svh - var(--headerH) - 24px - var(--safeB));
  }
  .quiz.quiz-standalone .form {
    padding: 10px 2px 18px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .quiz.quiz-standalone .form::-webkit-scrollbar { display: none; }

  /* Карточка сферы плотно по содержимому, точки шкалы сразу под значением */
  #step-1 .balance-group { overflow-y: auto !important; }
  #step-1 .balance-card { min-height: 0 !important; padding: 14px 12px 16px !important; }
  #step-1 .rating-dots { margin-top: 6px; }

  /* На мобиле edge-навигация (стрелки по краям) убрана — навигация по свайпу */
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-nav,
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn {
    display: none !important;
  }

  #step-2 .form, #step-3 .form, #step-4 .form, #step-5 .form { padding-top: 20px; }
  #step-2 textarea { min-height: 220px; }
  #step-3 .form-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
  #step-3 input, #step-3 .city-field { max-width: 100%; }
  #step-4 .income-slider-group { margin: 12px 0 18px; }
  #step-5 .form-group { margin-bottom: 18px; }

  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn { top: 42%; }

  .swipe-hint {
    position: fixed; left: 50%; top: calc(var(--headerH) + var(--safeT) + 8px);
    transform: translateX(-50%); z-index: 60; background: rgba(47,26,22,.9); color: #fff;
    border-radius: 999px; padding: 8px 14px; font-size: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.22);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .swipe-hint.is-visible { opacity: 1; }

  #geoSuggest.geo-suggest {
    position: fixed; inset: 0; z-index: 70;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 16px; margin: 0; background: rgba(0,0,0,.5);
    border: 0; border-radius: 0;
  }
  #geoSuggest.hidden { display: none !important; }
  #geoSuggest .geo-suggest-title,
  #geoSuggest .geo-suggest-actions {
    width: min(340px, 100%); margin: 0; background: var(--card);
    border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    box-sizing: border-box;
  }
  #geoSuggest .geo-suggest-title {
    border-top: 1px solid var(--border); border-bottom: 0;
    border-radius: 16px 16px 0 0;
    padding: 18px 18px 8px; color: var(--text);
    text-align: center; font-size: 14px; line-height: 1.45;
  }
  #geoSuggest .geo-suggest-actions {
    border-top: 0; border-bottom: 1px solid var(--border);
    border-radius: 0 0 16px 16px;
    padding: 8px 18px 18px;
    display: grid; gap: 10px; grid-template-columns: 1fr;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
  }
  #geoSuggest .geo-suggest-actions .btn { width: 100%; white-space: normal; }

  /* Скрываем стандартные кнопки «Назад / Продолжить» — навигация по свайпу/edge-стрелкам.
     CTA-кнопки без data-prev-step / data-next-step (например step5SubmitBtn «Получить отчёт») остаются. */
  .quiz .form-actions [data-prev-step],
  .quiz .form-actions [data-next-step] {
    display: none !important;
  }
  /* Если в form-actions всё скрыто — убираем и сам контейнер, чтобы не было пустого места */
  .quiz .form-actions:empty,
  .quiz .form-actions:not(:has(> *:not([data-prev-step]):not([data-next-step]))) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* ============================================================
   v3.0 — Шаг 1: стек сфер с эффектом перелистывания (стопка карт)
   Активная карточка сверху, следующие 2 выглядывают со сдвигом.
   При листании текущая уезжает «под низ стопки».
   ============================================================ */

#step-1 #form-step-1 {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

#step-1 .balance-group {
  position: relative !important;
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 320px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  perspective: 1200px;
}

#step-1 .balance-card {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 22px 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 18px !important;
  background: var(--chip) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 32px rgba(20, 12, 8, .12);
  transition:
    transform .55s cubic-bezier(.32, .72, 0, 1),
    opacity .35s ease,
    box-shadow .35s ease;
  transform-origin: 50% 60%;
  will-change: transform, opacity;
  /* По умолчанию — в стопке, скрыто */
  opacity: 0;
  transform: translateY(24px) scale(.88);
  pointer-events: none;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}

[data-theme="dark"] #step-1 .balance-card {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

#step-1 .balance-card.is-active {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
  pointer-events: auto;
  z-index: 30;
}

#step-1 .balance-card.is-peek-1 {
  opacity: .55;
  transform: translateY(8px) rotate(-1.6deg) scale(.97);
  z-index: 20;
}

#step-1 .balance-card.is-peek-2 {
  opacity: .28;
  transform: translateY(14px) rotate(2.2deg) scale(.94);
  z-index: 10;
}

#step-1 .balance-card.is-back {
  /* Уже листали — ушла под низ стопки */
  opacity: 0;
  transform: translateY(28px) rotate(-3.5deg) scale(.9);
  z-index: 5;
}

#step-1 .balance-card.is-behind {
  /* Будущая, далеко — спрятана */
  opacity: 0;
  transform: translateY(20px) rotate(1deg) scale(.9);
  z-index: 1;
}

/* Стрелки навигации сразу под шкалой (без пустого пространства) */
#step-1 .balance-card-nav {
  margin-top: 18px !important;
  padding-top: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 360px;
  gap: 12px;
}

#step-1 .balance-nav-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .2s ease, color .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

#step-1 .balance-nav-btn svg { display: block; }

#step-1 .balance-nav-btn:hover:not(:disabled) {
  background: var(--chip);
  border-color: var(--accent, var(--gold, #C9A86F));
  color: var(--accent, var(--gold, #C9A86F));
  transform: translateY(-1px);
}

#step-1 .balance-nav-btn:active:not(:disabled) {
  transform: scale(.93);
}

#step-1 .balance-nav-btn:disabled {
  opacity: .25;
  cursor: default;
  pointer-events: none;
}

#step-1 .balance-nav-counter {
  font-size: 13px;
  color: var(--muted2);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

#step-1 .balance-nav-counter b {
  color: var(--accent, var(--gold, #C9A86F));
  font-weight: 700;
  font-size: 14px;
}

#step-1 .balance-nav-counter > span {
  margin: 0 3px;
  opacity: .5;
}

@media (max-width: 480px) {
  #step-1 .balance-card {
    padding: 16px 14px 14px !important;
  }
  #step-1 .balance-nav-btn {
    width: 40px; height: 40px;
  }
  #step-1 .balance-nav-btn svg { width: 16px; height: 16px; }
  #step-1 .balance-card-nav {
    padding-top: 10px;
    max-width: 320px;
  }
}

/* ── Тост-уведомления ──────────────────────────────────────────────────── */
.mir-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 6px 28px rgba(0,0,0,.14);
  z-index: 9999;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  max-width: calc(100vw - 32px);
  text-align: center;
  pointer-events: none;
  white-space: pre-line;
}
.mir-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.mir-toast--success { border-color: #4caf50; color: var(--text); }
.mir-toast--info    { border-color: var(--accent-muted, var(--border)); color: var(--text); }
.mir-toast--warn    { border-color: #f59e0b; color: var(--text); }

/* ── Guided hints: затемнение, затем закрепление сверху до касания ─────── */
.mir-guided-hint-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 14, 12, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, background .56s ease;
}

.mir-guided-hint-overlay.is-visible {
  opacity: 1;
}

.mir-guided-hint-overlay.is-docked {
  background: rgba(18, 14, 12, 0);
  /* align-items не трогаем — оставляем center, чтобы transform translateY работал плавно */
}

.mir-guided-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(420px, calc(100vw - 36px));
  min-height: 54px;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(47, 26, 22, .94);
  color: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  transform: translateY(0) scale(.96);
  opacity: 0;
  transition:
    transform .58s cubic-bezier(.22, 1, .36, 1),
    width .42s cubic-bezier(.22, 1, .36, 1),
    padding .42s cubic-bezier(.22, 1, .36, 1),
    min-height .42s ease,
    font-size .4s ease,
    opacity .22s ease,
    box-shadow .32s ease;
}

.mir-guided-hint-overlay.is-visible .mir-guided-hint {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Закреплённое состояние: плавно уезжает наверх + ужимается.
   translateY: -50vh (от центра к самому верху) + headerH + safeT + 30px (отступ от верха) */
.mir-guided-hint-overlay.is-docked .mir-guided-hint {
  width: min(360px, calc(100vw - 28px));
  min-height: 42px;
  padding: 9px 16px;
  font-size: 13px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
  transform: translateY(calc(-50vh + var(--headerH) + var(--safeT) + 30px)) scale(1);
}

.mir-guided-text {
  min-width: 0;
}

.mir-guided-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  flex: 0 0 auto;
}

.mir-guided-arrow--left {
  animation: mirHintArrowLeft 1.05s ease-in-out infinite;
}

.mir-guided-arrow--right {
  animation: mirHintArrowRight 1.05s ease-in-out infinite;
}

@keyframes mirHintArrowLeft {
  0%, 100% { transform: translateX(0); opacity: .62; }
  50% { transform: translateX(-7px); opacity: 1; }
}

@keyframes mirHintArrowRight {
  0%, 100% { transform: translateX(0); opacity: .62; }
  50% { transform: translateX(7px); opacity: 1; }
}

@media (max-width: 520px) {
  .mir-guided-hint {
    width: min(340px, calc(100vw - 28px));
    min-height: 50px;
    padding: 12px 14px;
    font-size: 13px;
    gap: 9px;
  }

  .mir-guided-hint-overlay.is-docked .mir-guided-hint {
    width: min(300px, calc(100vw - 24px));
    min-height: 38px;
    padding: 8px 14px;
    font-size: 12px;
    /* На мобильном уезжаем чуть ближе к верху */
    transform: translateY(calc(-50vh + var(--headerH) + var(--safeT) + 22px)) scale(1);
  }

  .mir-guided-arrow {
    width: 22px;
    height: 22px;
    font-size: 16px;
  }
}

/* ── Инфо-подсказка о существующем пользователе (шаг 5) ──────────────── */
.step5-exists-hint {
  font-size: 0.8rem;
  color: var(--accent);
  margin: 4px 0 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.05);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  line-height: 1.4;
}
.step5-exists-hint.hidden { display: none; }

/* =====================================================================
   QUIZ FULL-SCREEN & CONTENT UPDATE — v3.1.0
   1. Hide theme toggle from quiz header
   2. Step fills full viewport (no breathing room gaps)
   3. Balance scroll wrap with gradient hint
   4. Larger titles, no help text, larger rating number
   5. Rating dots: grid layout, fills card width, no wrapping
   ===================================================================== */

/* 1. Theme toggle hidden in quiz */
html[data-page="quiz"] .header-actions .segmented {
  display: none !important;
}

/* 2a. .page: remove centering — step fills it via absolute position */
html[data-page="quiz"] .quiz.quiz-standalone .page {
  align-items: stretch;
}

/* 2b. Step: fill 100% of page container, no breathing room */
html[data-page="quiz"] .quiz.quiz-standalone .step {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  /* Remove the -50%/-50% centering offset; keep slide+scale animation vars */
  transform: translate3d(var(--stepX, 0px), 0, 0) scale(var(--stepS, 1)) !important;
}

/* 2c. Card itself: no max-width, no border-radius, horizontal padding clears nav buttons */
html[data-page="quiz"] .quiz.quiz-standalone .card {
  max-width: 100% !important;
  border-radius: 0 !important;
  padding: 18px 58px !important;
  box-shadow: none !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
}

/* 2d. Nav buttons: keep inside card, not half-off the edge */
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn {
  width: 42px !important;
  height: 42px !important;
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev {
  left: 8px !important;
  transform: translateY(-50%) !important;
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next {
  right: 8px !important;
  transform: translateY(-50%) !important;
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev:hover {
  transform: translateY(-50%) scale(1.05) !important;
  background-color: var(--field) !important;
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next:hover {
  transform: translateY(-50%) scale(1.05) !important;
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev:active {
  transform: translateY(-50%) scale(0.97) !important;
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next:active {
  transform: translateY(-50%) scale(0.97) !important;
}

/* 3a. Balance form: flex column, no own scroll (balance-group scrolls) */
html[data-page="quiz"] #step-1 .form {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 3b. Progress bar: static (no need for sticky in flex column) */
html[data-page="quiz"] #step-1 .balance-progress {
  position: static !important;
  flex-shrink: 0;
}

/* 3c. Scroll wrapper: fills remaining flex space, clips and provides gradient overlay */
.balance-scroll-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Bottom gradient to hint at more content below */
.balance-scroll-wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: linear-gradient(to top, var(--card, #f8f4ef) 10%, transparent 100%);
  pointer-events: none;
  z-index: 8;
}
[data-theme="dark"] .balance-scroll-wrap::after {
  background: linear-gradient(to top, var(--card, #1c1916) 10%, transparent 100%);
}

/* 3d. Balance group: fills wrapper, scrolls internally */
html[data-page="quiz"] #step-1 .balance-group {
  flex: 1 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 0 56px !important;
  scroll-snap-type: y mandatory !important;
  -webkit-overflow-scrolling: touch;
}

/* 4a. Balance card: centered content column, larger title */
html[data-page="quiz"] #step-1 .balance-card {
  max-width: 580px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  padding: 22px 20px 26px !important;
  gap: 4px !important;
  margin-bottom: 10px !important;
}
html[data-page="quiz"] #step-1 .balance-card-emoji {
  margin: 0 0 4px !important;
}
html[data-page="quiz"] #step-1 .balance-card-emoji .mir-icon {
  width: 44px !important;
  height: 44px !important;
}
html[data-page="quiz"] #step-1 .balance-card-title {
  font-size: 30px !important;
  margin: 4px 0 2px !important;
}
html[data-page="quiz"] #step-1 .balance-card-subtitle {
  font-size: 12px !important;
  letter-spacing: .09em !important;
  margin: 0 0 8px !important;
}
/* Help text removed from HTML; belt-and-suspenders hide if any remain */
html[data-page="quiz"] #step-1 .balance-card-help {
  display: none !important;
}

/* 4b. Rating value: bigger */
html[data-page="quiz"] #step-1 .rating-value {
  font-size: 72px !important;
  margin: 4px 0 14px !important;
}

/* 5. Rating dots: grid, fills card width, one row, no overflow */
html[data-page="quiz"] #step-1 .rating-dots {
  display: grid !important;
  grid-template-columns: repeat(10, 1fr) !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
html[data-page="quiz"] #step-1 .rating-dot {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  font-size: clamp(10px, 1.4vw, 14px) !important;
  border-width: 1.5px !important;
}

/* Larger step header title for step-1 */
html[data-page="quiz"] #step-1 .form-title {
  font-size: 22px !important;
  margin-bottom: 2px !important;
}
html[data-page="quiz"] #step-1 .form-hint {
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

/* Mobile: tighter padding, still full-screen */
@media (max-width: 520px) {
  html[data-page="quiz"] .quiz.quiz-standalone .card {
    padding: 14px 50px !important;
  }
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn {
    width: 36px !important;
    height: 36px !important;
  }
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev { left: 4px !important; }
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next { right: 4px !important; }

  html[data-page="quiz"] #step-1 .balance-card {
    padding: 16px 14px 18px !important;
  }
  html[data-page="quiz"] #step-1 .balance-card-title { font-size: 24px !important; }
  html[data-page="quiz"] #step-1 .rating-value { font-size: 54px !important; margin: 2px 0 10px !important; }
  html[data-page="quiz"] #step-1 .rating-dots { gap: 5px !important; }
  html[data-page="quiz"] #step-1 .rating-dot { font-size: 10px !important; }
}

@media (max-width: 380px) {
  html[data-page="quiz"] .quiz.quiz-standalone .card {
    padding: 12px 42px !important;
  }
  html[data-page="quiz"] #step-1 .balance-card-title { font-size: 20px !important; }
  html[data-page="quiz"] #step-1 .rating-value { font-size: 44px !important; }
  html[data-page="quiz"] #step-1 .rating-dots { gap: 4px !important; }
}

/* v3.1.4 — Step 1: vertical life-spheres list, no card stack overlap */
html[data-page="quiz"] #step-1 {
  overflow: hidden !important;
}

html[data-page="quiz"] #step-1 #form-step-1 {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

html[data-page="quiz"] #step-1 #form-step-1::-webkit-scrollbar {
  width: 6px;
}

html[data-page="quiz"] #step-1 #form-step-1::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(139, 27, 40, .22);
}

html[data-page="quiz"] #step-1 .balance-progress {
  display: none !important;
}

html[data-page="quiz"] #step-1 .balance-scroll-wrap {
  flex: 0 0 auto !important;
  overflow: visible !important;
  min-height: 0 !important;
}

html[data-page="quiz"] #step-1 .balance-scroll-wrap::after {
  display: none !important;
}

html[data-page="quiz"] #step-1 .balance-group {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 12px 0 0 !important;
  padding: 0 0 10px !important;
  perspective: none !important;
  scroll-snap-type: none !important;
}

html[data-page="quiz"] #step-1 .balance-card,
html[data-page="quiz"] #step-1 .balance-card.is-active,
html[data-page="quiz"] #step-1 .balance-card.is-peek-1,
html[data-page="quiz"] #step-1 .balance-card.is-peek-2,
html[data-page="quiz"] #step-1 .balance-card.is-back,
html[data-page="quiz"] #step-1 .balance-card.is-behind {
  position: relative !important;
  inset: auto !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  padding: 18px 18px 20px !important;
  justify-content: flex-start !important;
  box-shadow: 0 8px 28px rgba(20, 12, 8, .08) !important;
  scroll-snap-align: none !important;
}

html[data-page="quiz"] #step-1 .balance-card-nav {
  display: none !important;
}

html[data-page="quiz"] #step-1 .form-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  margin-top: 14px !important;
  padding-bottom: 2px !important;
}

html[data-page="quiz"] #step-1 .form-actions [data-next-step] {
  display: inline-flex !important;
}

@media (max-width: 900px) {
  html[data-page="quiz"] #step-1 .form-actions [data-next-step] {
    display: inline-flex !important;
  }
}

@media (max-width: 520px) {
  html[data-page="quiz"] #step-1 #form-step-1 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html[data-page="quiz"] #step-1 .balance-group {
    gap: 10px !important;
  }

  html[data-page="quiz"] #step-1 .balance-card,
  html[data-page="quiz"] #step-1 .balance-card.is-active,
  html[data-page="quiz"] #step-1 .balance-card.is-peek-1,
  html[data-page="quiz"] #step-1 .balance-card.is-peek-2,
  html[data-page="quiz"] #step-1 .balance-card.is-back,
  html[data-page="quiz"] #step-1 .balance-card.is-behind {
    padding: 14px 12px 16px !important;
  }
}

/* =====================================================================
   v3.2.0 — NO HEADER · FLAT SPHERES · MOBILE FULL-WIDTH & LARGE TEXT
   Builds on v3.1.4 (scrollable list). Changes:
   1. --headerH: 0px  (header removed from HTML)
   2. Flat sphere items: transparent bg, only bottom-border divider
   3. Mobile (<= 640px): nav buttons → bottom bar, card side-padding 16px
   4. Mobile: larger fonts and touch targets across all quiz steps
   ===================================================================== */

/* 1. No header → zero the header height variable */
html[data-page="quiz"] {
  --headerH: 0px !important;
}

/* 2. Flat sphere items — strip all card chrome */
html[data-page="quiz"] #step-1 .balance-card,
html[data-page="quiz"] #step-1 .balance-card.is-active,
html[data-page="quiz"] #step-1 .balance-card.is-peek-1,
html[data-page="quiz"] #step-1 .balance-card.is-peek-2,
html[data-page="quiz"] #step-1 .balance-card.is-back,
html[data-page="quiz"] #step-1 .balance-card.is-behind {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 22px 0 26px !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}
html[data-page="quiz"] #step-1 .balance-group {
  gap: 0 !important;
}
html[data-page="quiz"] #step-1 .balance-card:last-child {
  border-bottom: none !important;
}

/* 3 & 4. Mobile overrides */
@media (max-width: 640px) {
  /* 3a. Nav buttons move to a bottom bar */
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-nav {
    top: auto !important;
    height: 68px !important;
    background: var(--bg) !important;
    border-top: 1px solid var(--border) !important;
    pointer-events: auto !important;
  }
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn {
    top: 50% !important;
    width: 52px !important;
    height: 52px !important;
  }
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev {
    left: 20px !important;
    transform: translateY(-50%) !important;
  }
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next {
    right: 20px !important;
    transform: translateY(-50%) !important;
  }
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev:hover,
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev:focus-visible {
    transform: translateY(-50%) scale(1.05) !important;
    background-color: var(--field) !important;
  }
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next:hover,
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next:focus-visible {
    transform: translateY(-50%) scale(1.05) !important;
  }
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev:active,
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next:active {
    transform: translateY(-50%) scale(0.96) !important;
  }

  /* 3b. Card: minimal side padding, extra bottom clearance for nav bar */
  html[data-page="quiz"] .quiz.quiz-standalone .card {
    padding: 20px 16px 84px !important;
  }

  /* 4. Larger text and touch targets across all steps */
  html[data-page="quiz"] .form-title                    { font-size: 22px !important; }
  html[data-page="quiz"] .form-hint                     { font-size: 14px !important; }
  html[data-page="quiz"] .form-label                    { font-size: 16px !important; }
  html[data-page="quiz"] .form-control,
  html[data-page="quiz"] .form-select                   { font-size: 16px !important; min-height: 50px !important; }
  html[data-page="quiz"] textarea.form-control          { min-height: 130px !important; }
  html[data-page="quiz"] .btn                           { font-size: 16px !important; min-height: 52px !important; }
  html[data-page="quiz"] .step-tracker__label           { font-size: 10px !important; }

  /* Step-1 sphere items: full-width (card already 16px sides) */
  html[data-page="quiz"] #step-1 #form-step-1 {
    padding-bottom: 8px !important;
  }
  html[data-page="quiz"] #step-1 .balance-card,
  html[data-page="quiz"] #step-1 .balance-card.is-active,
  html[data-page="quiz"] #step-1 .balance-card.is-peek-1,
  html[data-page="quiz"] #step-1 .balance-card.is-peek-2,
  html[data-page="quiz"] #step-1 .balance-card.is-back,
  html[data-page="quiz"] #step-1 .balance-card.is-behind {
    padding: 20px 0 24px !important;
  }
  html[data-page="quiz"] #step-1 .balance-card-emoji .mir-icon { width: 42px !important; height: 42px !important; }
  html[data-page="quiz"] #step-1 .balance-card-title            { font-size: 30px !important; }
  html[data-page="quiz"] #step-1 .balance-card-subtitle         { font-size: 13px !important; }
  html[data-page="quiz"] #step-1 .rating-value                  { font-size: 72px !important; margin: 8px 0 16px !important; }
  html[data-page="quiz"] #step-1 .rating-dots                   { gap: 6px !important; }
  html[data-page="quiz"] #step-1 .rating-dot                    { font-size: 14px !important; }
  html[data-page="quiz"] #step-1 .form-title                    { font-size: 20px !important; }
}

/* =====================================================================
   v3.2.5 — Десктопная подсветка кнопок навигации (initSwipeNavigation)
   Пульсация привлекает внимание к стрелкам "Назад/Вперёд" на десктопе
   ===================================================================== */
@keyframes mir-edge-attention {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(139, 27, 40, 0),
      0 10px 22px rgba(0, 0, 0, 0.10);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(139, 27, 40, 0.24),
      0 0 0 14px rgba(139, 27, 40, 0.08),
      0 14px 28px rgba(139, 27, 40, 0.30);
  }
}
html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn.is-attention {
  animation: mir-edge-attention 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-btn.is-attention {
    animation: none !important;
  }
}

/* =====================================================================
   v3.2.4/v3.2.7 — DESKTOP HARMONY: constrain content + position nav buttons
   1. Контент (form, step-header, form-actions) ограничен 720px и центрирован
   2. Кнопки навигации сидят снаружи 720px-колонки, не на краях экрана
   Карточка-фон остаётся на весь экран.
   ===================================================================== */
@media (min-width: 641px) {
  /* Step is display:flex column → нужен align-self: center, не margin:auto */
  html[data-page="quiz"] .quiz.quiz-standalone .step-header,
  html[data-page="quiz"] .quiz.quiz-standalone .form,
  html[data-page="quiz"] .quiz.quiz-standalone .form-actions {
    max-width: 720px !important;
    width: 100% !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Card padding теперь меньше — кнопки больше не упираются в его боковые границы */
  html[data-page="quiz"] .quiz.quiz-standalone .card {
    padding: 32px 24px !important;
  }

  /* Step-1: balance items max-width 580 (остаются по центру 720-колонки) */
  html[data-page="quiz"] #step-1 .balance-card,
  html[data-page="quiz"] #step-1 .balance-card.is-active,
  html[data-page="quiz"] #step-1 .balance-card.is-peek-1,
  html[data-page="quiz"] #step-1 .balance-card.is-peek-2,
  html[data-page="quiz"] #step-1 .balance-card.is-back,
  html[data-page="quiz"] #step-1 .balance-card.is-behind {
    max-width: 580px !important;
  }

  /* Кнопки навигации сидят сразу за краем 720px-колонки.
     Расчёт: column_left = 50% - 360px; кнопка справа от column через 24px gap;
     button_left_edge = column_left - 24 - 42 = 50% - 426px.
     На узких экранах max() прижимает кнопку к краю карточки (8px). */
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-prev {
    left: max(8px, calc(50% - 426px)) !important;
  }
  html[data-page="quiz"] .quiz.quiz-standalone .step-edge-next {
    right: max(8px, calc(50% - 426px)) !important;
  }
}

/* Wider desktops: чуть больше воздуха */
@media (min-width: 1100px) {
  html[data-page="quiz"] .quiz.quiz-standalone .card {
    padding: 40px 24px !important;
  }
}

/* =====================================================================
   v3.2.9 — Компактная кнопка «Продолжить» на сферах
   Базовое правило `.form-actions .btn-primary { flex: 1 }` заставляло
   кнопку растягиваться на всю ширину 720px-колонки. Прибиваем:
   ===================================================================== */
html[data-page="quiz"] .quiz.quiz-standalone .form-actions {
  justify-content: center !important;
}
html[data-page="quiz"] .quiz.quiz-standalone .form-actions .btn-primary {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 220px !important;
  max-width: 320px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* =====================================================================
   v3.2.8 — Вертикальное центрирование контента когда он влезает
   `justify-content: safe center` — современный CSS:
     - контент короткий → центрируется по вертикали в форме
     - контент длинный (не влезает) → откатывается на flex-start, скролл работает
   Шаги вроде step-4 (только слайдер) и короткие шаги выглядят гармонично,
   step-1 (8 сфер) и step-6 (длинный отчёт) — скроллятся как раньше.
   ===================================================================== */
@media (min-width: 641px) {
  html[data-page="quiz"] .quiz.quiz-standalone .form {
    display: flex !important;
    flex-direction: column !important;
    justify-content: safe center !important;
  }
}

@media (max-width: 380px) {
  html[data-page="quiz"] .quiz.quiz-standalone .card {
    padding: 16px 14px 84px !important;
  }
  html[data-page="quiz"] #step-1 .balance-card,
  html[data-page="quiz"] #step-1 .balance-card.is-active {
    padding: 16px 0 20px !important;
  }
  html[data-page="quiz"] #step-1 .balance-card-title { font-size: 26px !important; }
  html[data-page="quiz"] #step-1 .rating-value       { font-size: 60px !important; }
  html[data-page="quiz"] #step-1 .rating-dots        { gap: 4px !important; }
  html[data-page="quiz"] #step-1 .rating-dot         { font-size: 12px !important; }
}

/* v3.2.15 — step-6 CTA остаётся видимым поверх мобильных правил swipe-навигации */
html[data-page="quiz"] #step-6 .report-actions {
  display: flex !important;
  justify-content: center !important;
  margin-top: 18px !important;
}
html[data-page="quiz"] #step-6 .report-actions [data-prev-step],
html[data-page="quiz"] #step-6 .report-actions [data-next-step] {
  display: inline-flex !important;
}

/* v3.2.16 — step-7 demo bypass stays visible above mobile swipe-nav rules */
html[data-page="quiz"] #step-7 .form-actions {
  display: flex !important;
  justify-content: center !important;
  margin-top: 14px !important;
}
html[data-page="quiz"] #step-7 .form-actions [data-prev-step] {
  display: inline-flex !important;
}
html[data-page="quiz"] #step-7 .form-actions .pricing-bypass-btn {
  display: none !important;
}
html[data-page="quiz"] #step-7 .form-actions .pricing-bypass-btn.is-visible {
  display: inline-flex !important;
}

/* =====================================================================
   v3.2.22 — Step-8 (регистрация личного кабинета, PR #1)
   ===================================================================== */

/* Form-actions на step-8 видимы (общее правило display:none перебивается) */
html[data-page="quiz"] #step-8 .form-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 18px !important;
  flex-wrap: wrap !important;
}
html[data-page="quiz"] #step-8 .form-actions [data-prev-step],
html[data-page="quiz"] #step-8 .form-actions .btn-primary {
  display: inline-flex !important;
}

/* Поле пароля + кнопка «Сгенерировать» в одну строку */
.step8-password-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.step8-password-row .form-control {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}
.step8-password-row .btn-small {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .step8-password-row { flex-direction: column; align-items: stretch; }
  .step8-password-row .btn-small { width: 100%; }
}

/* Mobile layout contract: the quiz occupies the viewport without creating a
   narrower inner stage. This wins over the older full-screen experiments. */
@media (max-width: 640px) {
  html[data-page="quiz"],
  html[data-page="quiz"] body,
  html[data-page="quiz"] main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  html[data-page="quiz"] .quiz.quiz-standalone .page,
  html[data-page="quiz"] .quiz.quiz-standalone .step,
  html[data-page="quiz"] .quiz.quiz-standalone .card,
  html[data-page="quiz"] .quiz.quiz-standalone .form {
    min-width: 0;
    max-width: 100%;
  }

  html[data-page="quiz"] .quiz.quiz-standalone .card {
    padding: 20px 16px 84px !important;
  }

  html[data-page="quiz"] .step-tracker {
    min-width: 0;
    padding-bottom: 12px;
  }

  html[data-page="quiz"] .step-tracker__step {
    flex: 0 1 20%;
    min-width: 0;
  }

  html[data-page="quiz"] .step-tracker__label {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
  }

  html[data-page="quiz"] .step-tracker__line {
    flex: 1 1 4px;
    min-width: 4px;
  }
}

/* Toggle «У меня уже есть аккаунт» — поверх формы */
html[data-page="quiz"] #step-8 .form-group-toggle {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 12px;
}
html[data-page="quiz"] #step-8 .form-group-toggle .checkbox {
  font-weight: 600;
  font-size: 14px;
}

.form-hint-small {
  font-size: 12px;
  color: var(--muted2);
  margin: 6px 0 0;
  line-height: 1.4;
}

/* =====================================================================
   v3.2.23 — Step-9 (активация триала + привязка карты, PR #2)
   ===================================================================== */

html[data-page="quiz"] #step-9 .form-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 18px !important;
  flex-wrap: wrap !important;
}
html[data-page="quiz"] #step-9 .form-actions [data-prev-step],
html[data-page="quiz"] #step-9 .form-actions .btn-primary {
  display: inline-flex !important;
}

/* Сводка тарифа (Тариф / Через 7 дней / Сейчас) */
.trial-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  margin: 14px 0 18px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 14px;
}
.trial-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
}
.trial-summary__label {
  color: var(--muted2);
  flex: 0 0 auto;
}
.trial-summary__value {
  text-align: right;
  font-weight: 600;
  flex: 1 1 auto;
}

/* Информационные тезисы (3 пункта) */
.trial-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
}
.trial-info p {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 10px 12px;
  background: var(--field, rgba(0, 0, 0, 0.02));
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.trial-info__icon {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
}