/*
  anketa.css — оформление потока «Онбординг + анкета» (`#/form`).

  ОТКУДА. Перенесено из наброска `new/new_anketa` («Вечерняя тропа»): сумеречная
  палитра, звёздное небо, стеклянные карточки, Нова и каскадные появления.

  ПОЧЕМУ ФАЙЛ ОТДЕЛЬНЫЙ. Макет — самостоятельный документ с глобальными селекторами
  (`body`, `.screen`, `.toast`). Здесь все правила заскоплены под `.anketa` (корень
  фрагмента), а анимации получили префикс `anc-`, чтобы не столкнуться с остальным
  приложением. Цвета — ТОЛЬКО в themes.css (FE-02), здесь `var(--anc-…)`.

  ЧТО ИЗМЕНЕНО ПРОТИВ МАКЕТА (названные расхождения):
  * экран не рисует собственную нижнюю навигацию — её скрывает каркас в render();
  * макетный `.toast` удалён: на проекте ОДИН тост (`t63`), его вид на этом потоке
    подправлен ниже через `body.page-form`;
  * «Пройти ещё раз» на экране успеха нет — повторная подача запрещена; вместо неё
    возврат в афишу/меню;
  * добавлены экран состояния, ошибка у поля телефона и блок «возможно, вы имели в
    виду» (город) — без них логика проекта выглядела бы немой.

  ПАЛИТРА. `--anc-*` объявлены в themes.css (единственный файл с литералами цвета).
*/

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/nunito-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/nunito-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/nunito-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-800-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/nunito-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.anketa *, .anketa *::before, .anketa *::after {box-sizing: border-box;}
.anketa, .anketa {height: 100%; margin: 0;}
.anketa {font-family: var(--anc-font);
  color: var(--anc-ink);
  background:
    radial-gradient(60% 38% at 12% 0%, var(--anc-primary-22), transparent 62%),
    radial-gradient(46% 32% at 92% 6%, var(--anc-pink-12), transparent 60%),
    radial-gradient(80% 46% at 50% 112%, var(--anc-twilight-20), transparent 64%),
    linear-gradient(180deg, var(--anc-bg-0) 0%, var(--anc-bg-1) 54%, var(--anc-bg-2) 100%);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;}
.anketa img, .anketa svg {display: block;}
.anketa button {font-family: inherit;}
.anketa :focus-visible {outline: 2px solid var(--anc-lilac-85);
  outline-offset: 3px;
  border-radius: 12px;}
.anketa ::selection {background: var(--anc-primary-45);}
.anketa .sky {position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;}
.anketa .star {position: absolute;
  border-radius: 50%;
  background: var(--anc-star);
  opacity: 0.5;
  animation: anc-twinkle var(--tw-dur, 4s) ease-in-out var(--tw-delay, 0s) infinite;}
.anketa .sparkle {position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--anc-star-85);
  box-shadow: 0 0 14px 2px var(--anc-lilac-55);
  transform: rotate(45deg);
  animation: anc-sparklePulse var(--tw-dur, 5s) ease-in-out var(--tw-delay, 0s) infinite;}
@keyframes anc-twinkle {
0%, 100% {opacity: 0.18; transform: scale(0.8);}
50% {opacity: 0.85; transform: scale(1.15);}
}
@keyframes anc-sparklePulse {
0%, 100% {opacity: 0.1; transform: rotate(45deg) scale(0.7);}
50% {opacity: 0.75; transform: rotate(45deg) scale(1.1);}
}
.anketa .screen {position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: var(--anc-app-h, 100dvh);
  max-width: 430px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px calc(env(safe-area-inset-bottom, 0px) + 14px);}
@media (min-width: 480px) {.anketa .screen {border-inline: 1px solid var(--anc-glass);}}
.anketa .topbar {display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 14px;}
.anketa .brand {display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;}
.anketa .brand-mark {display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--anc-brand-violet), var(--anc-brand-pink));
  box-shadow: 0 4px 16px -2px var(--anc-halo-60);}
.anketa .brand-mark svg {width: 13px; height: 13px;}
.anketa .brand-name {text-shadow: 0 2px 18px var(--anc-primary-45);}
.anketa .counter {font-size: 13px;
  font-weight: 700;
  color: var(--anc-ink-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;}
.anketa .counter b {color: var(--anc-lilac);
  font-weight: 800;}
.anketa .stage {position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  touch-action: pan-y;}
.anketa .slide {position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 10px 2px;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;}
.anketa .slide::-webkit-scrollbar {display: none;}
.anketa .slide.is-active {opacity: 1; visibility: visible; pointer-events: auto;}
.anketa .slide.anim-in-right {animation: anc-slideInRight 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) both;}
.anketa .slide.anim-in-left {animation: anc-slideInLeft  0.45s cubic-bezier(0.22, 0.9, 0.3, 1) both;}
.anketa .slide.anim-out-left {visibility: visible; animation: anc-slideOutLeft  0.32s cubic-bezier(0.5, 0, 0.75, 0) both;}
.anketa .slide.anim-out-right {visibility: visible; animation: anc-slideOutRight 0.32s cubic-bezier(0.5, 0, 0.75, 0) both;}
@keyframes anc-slideInRight {
from {opacity: 0; transform: translateX(38px);}
to {opacity: 1; transform: none;}
}
@keyframes anc-slideInLeft {
from {opacity: 0; transform: translateX(-38px);}
to {opacity: 1; transform: none;}
}
@keyframes anc-slideOutLeft {
from {opacity: 1; transform: none;}
to {opacity: 0; transform: translateX(-38px);}
}
@keyframes anc-slideOutRight {
from {opacity: 1; transform: none;}
to {opacity: 0; transform: translateX(38px);}
}
.anketa .slide-inner {width: 100%;
  max-width: 380px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0;}
.anketa .slide .rv {opacity: 0;}
.anketa .slide.is-active .rv {animation: anc-riseIn 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: var(--rvd, 0s);}
.anketa .rv-1 {--rvd: 0.04s;}
.anketa .rv-2 {--rvd: 0.11s;}
.anketa .rv-3 {--rvd: 0.18s;}
.anketa .rv-4 {--rvd: 0.25s;}
.anketa .rv-5 {--rvd: 0.32s;}
.anketa .rv-6 {--rvd: 0.39s;}
.anketa .rv-7 {--rvd: 0.46s;}
@keyframes anc-riseIn {
from {opacity: 0; transform: translateY(16px);}
to {opacity: 1; transform: none;}
}
.anketa .emoji-chip {position: relative;
  width: 78px;
  height: 78px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: linear-gradient(160deg, var(--anc-glass-line), var(--anc-white-03));
  border: 1px solid var(--anc-glass-line);
  box-shadow:
    0 12px 34px -10px var(--slide-glow, var(--anc-violet-45)),
    inset 0 1px 0 var(--anc-white-12);}
.anketa .emoji-chip::before {content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--slide-glow, var(--anc-violet-soft)), transparent 70%);
  opacity: 0.22;
  filter: blur(6px);}
.anketa .emoji-chip::after {content: "";
  position: absolute;
  inset: 7px;
  border-radius: 19px;
  background: radial-gradient(65% 60% at 50% 28%, var(--slide-glow, var(--anc-violet-soft)), transparent 78%);
  opacity: 0.30;}
.anketa .chip-emoji {position: relative;
  z-index: 1;
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px var(--anc-shadow-35));
  animation: anc-chipFloat 4.6s ease-in-out infinite;}
@keyframes anc-chipFloat {
0%, 100% {transform: translateY(0);}
50% {transform: translateY(-4px);}
}
.anketa .hero {position: relative;
  width: 194px;
  margin-bottom: 10px;
  animation: none;}
.anketa .hero::before {content: "";
  position: absolute;
  inset: -14% -26%;
  background: radial-gradient(closest-side, var(--anc-halo-38), transparent 72%);
  filter: blur(10px);
  pointer-events: none;}
/* Новый облик Новы — картинка (глазки моргают внутри самого SVG-файла). */
.anketa .hero-img {position: relative;
  width: 100%;
  height: auto;
  animation: anc-heroFloat 4.6s ease-in-out infinite;}
@keyframes anc-heroFloat {
0%, 100% {transform: translateY(0);}
50% {transform: translateY(-9px);}
}
.anketa .hero-final {width: 200px;}
.anketa .hero-heart {position: absolute;
  z-index: 2;
  font-size: 19px;
  filter: drop-shadow(0 3px 8px var(--anc-shadow-40));
  animation: anc-heartFloat 3.8s ease-in-out infinite;}
.anketa .hero-heart-1 {top: 12%; right: 2%;}
.anketa .hero-heart-2 {bottom: 22%; left: 0; font-size: 15px; animation-delay: 1.4s;}
@keyframes anc-heartFloat {
0%, 100% {transform: translateY(0) rotate(-6deg);}
50% {transform: translateY(-8px) rotate(8deg);}
}
.anketa .slide-title {margin: 0 0 13px;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 22px var(--anc-primary-35);}
.anketa .slide-text {margin: 0;
  font-size: 16px;
  line-height: 1.66;
  color: var(--anc-ink-soft);}
.anketa .slide-text p {margin: 0;}
.anketa .slide-text p + p {margin-top: 10px;}
.anketa .hero-pill {margin-top: 20px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--anc-lilac);
  background: var(--anc-violet-12);
  border: 1px solid var(--anc-violet-28);}
.anketa .feature-list {width: 100%;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;}
.anketa .feature-item {display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--anc-glass);
  border: 1px solid var(--anc-glass-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);}
.anketa .feature-ico {flex: 0 0 auto;
  font-size: 19px;
  line-height: 1.4;
  filter: drop-shadow(0 2px 6px var(--anc-shadow-35));}
.anketa .feature-item p {margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--anc-ink-soft);}
.anketa .step-list {width: 100%;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;}
.anketa .step-item {display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 12px 14px 12px 12px;
  border-radius: 16px;
  background: var(--anc-glass);
  border: 1px solid var(--anc-glass-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);}
.anketa .step-num {flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--anc-ink);
  background: linear-gradient(150deg, var(--anc-violet), var(--anc-violet-deep));
  box-shadow: 0 5px 14px -3px var(--anc-primary-60);}
.anketa .step-item p {margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--anc-ink-soft);}
.anketa .slide-note {margin-top: 16px;
  padding: 11px 16px;
  border-radius: 16px;
  max-width: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--anc-lilac);
  background: var(--anc-violet-10);
  border: 1px solid var(--anc-violet-22);}
.anketa .bottombar {position: relative;
  z-index: 2;
  margin-top: 10px;
  padding-top: 14px;}
.anketa .bottombar::before {content: "";
  position: absolute;
  z-index: 0;
  left: -20px;
  right: -20px;
  top: -58px;
  bottom: calc(-1 * (env(safe-area-inset-bottom, 0px) + 14px));
  background: linear-gradient(to bottom, var(--anc-veil-0), var(--anc-veil-60) 42%, var(--anc-veil-96));
  pointer-events: none;}
.anketa .bottombar > * {position: relative; z-index: 1;}
.anketa .controls-row {display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 13px;
  min-height: 36px;}
.anketa .back-btn {justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--anc-glass-line);
  background: var(--anc-white-06);
  color: var(--anc-ink-dim);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, transform 0.15s ease;
  user-select: none;}
.anketa .back-btn:hover {color: var(--anc-ink-soft); background: var(--anc-glass-line);}
.anketa .back-btn:active {transform: scale(0.95);}
.anketa .back-btn.is-off {visibility: hidden; pointer-events: none;}
.anketa .dots {display: flex;
  align-items: center;
  gap: 7px;}
.anketa .dot {width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--anc-white-20);
  cursor: pointer;
  transition: width 0.35s cubic-bezier(0.22, 0.9, 0.3, 1), background 0.35s ease, box-shadow 0.35s ease;}
.anketa .dot.is-passed {background: var(--anc-lilac-42);}
.anketa .dot.is-active {width: 26px;
  background: linear-gradient(90deg, var(--anc-violet-soft), var(--anc-pink));
  box-shadow: 0 2px 12px var(--anc-primary-65);}
.anketa .controls-spacer {justify-self: end;}
.anketa .btn-primary {position: relative;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--anc-ink);
  background: linear-gradient(135deg, var(--anc-brand-violet) 0%, var(--anc-brand-purple) 52%, var(--anc-brand-pink) 118%);
  box-shadow: var(--anc-shadow-btn), inset 0 1px 0 var(--anc-white-28);
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.25s ease, box-shadow 0.4s ease;
  user-select: none;}
@media (hover: hover) {.anketa .btn-primary:hover {filter: brightness(1.07); box-shadow: 0 14px 38px -6px var(--anc-halo-70), inset 0 1px 0 var(--anc-white-28);}}
.anketa .btn-primary:active {transform: scale(0.96);}
.anketa .btn-label {display: inline-block; animation: anc-labelIn 0.32s ease both;}
@keyframes anc-labelIn {
from {opacity: 0; transform: translateY(7px);}
to {opacity: 1; transform: none;}
}
.anketa .btn-primary.is-final {animation: anc-btnGlow 2.8s ease-in-out infinite;}
@keyframes anc-btnGlow {
0%, 100% {box-shadow: 0 10px 30px -6px var(--anc-halo-50), inset 0 1px 0 var(--anc-white-28);}
50% {box-shadow: 0 16px 48px -4px var(--anc-halo-85), inset 0 1px 0 var(--anc-white-28);}
}
.anketa .burst-particle {position: fixed;
  z-index: 30;
  font-size: 18px;
  pointer-events: none;
  animation: anc-burstUp 1.05s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;}
@keyframes anc-burstUp {
0% {opacity: 1; transform: translate(0, 0) scale(0.9) rotate(0deg);}
70% {opacity: 0.95;}
100% {opacity: 0; transform: translate(var(--bx, 0px), var(--by, -120px)) scale(0.45) rotate(22deg);}
}
@media (max-height: 700px) {.anketa .hero {width: 148px; margin-bottom: 6px;}
.anketa .hero-final {width: 154px;}
.anketa .emoji-chip {width: 64px; height: 64px; margin-bottom: 14px; border-radius: 22px;}
.anketa .chip-emoji {font-size: 28px;}
.anketa .slide-title {font-size: 23px; margin-bottom: 10px;}
.anketa .slide-text {font-size: 15px; line-height: 1.6;}
.anketa .feature-item, .anketa .step-item {padding: 10px 12px;}
.anketa .slide-note {margin-top: 12px;}
.anketa .hero-pill {margin-top: 14px;}
.anketa .btn-primary {height: 52px;}
.anketa .controls-row {margin-bottom: 10px; min-height: 32px;}}
@media (min-width: 480px) {.anketa .dot {cursor: pointer;}}
@media (prefers-reduced-motion: reduce) {.anketa *, .anketa *::before, .anketa *::after {animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
    scroll-behavior: auto !important;}
.anketa .sky .star, .anketa .sky .sparkle {opacity: 0.3;}
.anketa .slide .rv {opacity: 1;}
.anketa .slide.is-active .rv {animation: none;}}
.anketa .q-slide .slide-title {font-size: 24px;}
.anketa .q-sub {margin: -4px 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--anc-ink-dim);}
.anketa .q-body {width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;}
.anketa .q-input {width: 100%;
  height: 56px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid var(--anc-glass-line);
  background: var(--anc-white-06);
  color: var(--anc-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  -webkit-appearance: none;
  appearance: none;}
.anketa .q-input::placeholder {color: var(--anc-ink-dim); font-weight: 600;}
.anketa .q-input:focus {border-color: var(--anc-violet-75);
  background: var(--anc-white-09);
  box-shadow: 0 0 0 4px var(--anc-primary-18);}
.anketa .q-input.is-error {border-color: var(--anc-danger);
  box-shadow: 0 0 0 4px var(--anc-danger-soft);}
.anketa input:-webkit-autofill {-webkit-box-shadow: 0 0 0 60px var(--anc-autofill-bg) inset;
  -webkit-text-fill-color: var(--anc-ink);
  caret-color: var(--anc-ink);}
.anketa .q-input-date {cursor: pointer; color-scheme: dark;}
.anketa .q-input-date::-webkit-calendar-picker-indicator {cursor: pointer; opacity: 0.75;}
.anketa .date-readout {min-height: 22px;
  margin-top: -6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--anc-lilac);
  letter-spacing: 0.01em;}
.anketa .q-gender {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;}
.anketa .gender-card {display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 138px;
  border-radius: 20px;
  border: 1px solid var(--anc-glass-line);
  background: var(--anc-glass);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease, transform 0.15s ease;}
.anketa .gender-card:active {transform: scale(0.96);}
.anketa .gender-card.is-selected {border-color: var(--anc-lilac-75);
  background: var(--anc-primary-16);
  box-shadow: 0 10px 32px -10px var(--anc-primary-55);}
.anketa .gender-ico {display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);}
.anketa .gender-ico svg {width: 26px; height: 26px;}
.anketa .gender-ico-m {color: var(--anc-lilac); background: var(--anc-violet-15);}
.anketa .gender-ico-f {color: var(--anc-pink-soft); background: var(--anc-pink-15);}
.anketa .gender-card.is-selected .gender-ico {transform: scale(1.12);}
.anketa .gender-label {font-size: 15px; font-weight: 800; color: var(--anc-ink-soft);}
.anketa .gender-card.is-selected .gender-label {color: var(--anc-ink);}
.anketa .q-options {display: flex;
  flex-direction: column;
  gap: 10px;}
.anketa .q-option {display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border-radius: 16px;
  border: 1px solid var(--anc-glass-line);
  background: var(--anc-glass);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease, transform 0.15s ease;}
.anketa .q-option:active {transform: scale(0.98);}
.anketa .q-option.is-selected {border-color: var(--anc-violet-70);
  background: var(--anc-primary-16);
  box-shadow: 0 8px 26px -10px var(--anc-primary-50);}
.anketa .q-radio {position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--anc-white-28);
  transition: border-color 0.25s ease;}
.anketa .q-option.is-selected .q-radio {border-color: var(--anc-lilac);}
.anketa .q-option.is-selected .q-radio::after {content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--anc-violet-soft), var(--anc-pink));
  box-shadow: 0 0 10px var(--anc-violet-85);}
.anketa .q-option-text {font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--anc-ink-soft);}
.anketa .q-option.is-selected .q-option-text {color: var(--anc-ink);}
.anketa .dropdown {position: relative; width: 100%;}
.anketa .dropdown-toggle {width: 100%;
  height: 56px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid var(--anc-glass-line);
  background: var(--anc-white-06);
  color: var(--anc-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;}
.anketa .dropdown-toggle:focus-visible {border-color: var(--anc-violet-75);
  box-shadow: 0 0 0 4px var(--anc-primary-18);}
.anketa .dropdown.is-open .dropdown-toggle {border-color: var(--anc-violet-75);
  background: var(--anc-white-09);}
.anketa .dropdown-value {overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;}
.anketa .dropdown-value.is-placeholder {color: var(--anc-ink-dim);}
.anketa .dropdown-chevron {flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--anc-ink-dim);
  transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);}
.anketa .dropdown.is-open .dropdown-chevron {transform: rotate(180deg);}
.anketa .dropdown-menu {position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 6;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 16px;
  background: var(--anc-menu-bg);
  border: 1px solid var(--anc-glass-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px -10px var(--anc-shadow-60);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;}
.anketa .dropdown.is-open .dropdown-menu {opacity: 1; visibility: visible; transform: none;}
.anketa .dropdown.is-up .dropdown-menu {top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom center;
  transform: translateY(6px) scale(0.98);}
.anketa .dropdown.is-open.is-up .dropdown-menu {transform: none;}
.anketa .dropdown-option {display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--anc-ink-soft);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;}
.anketa .dropdown-option:hover, .anketa .dropdown-option.is-focused {background: var(--anc-primary-18); color: var(--anc-ink);}
.anketa .dropdown-option.is-selected {color: var(--anc-lilac);}
.anketa .dropdown-option.is-selected::after {content: "✓";
  font-weight: 800;
  color: var(--anc-violet-soft);}
.anketa .city-other[hidden] {display: none;}
.anketa .progress-wrap {justify-self: center;
  display: grid;
  align-items: center;}
.anketa .dots, .anketa .form-progress {grid-area: 1 / 1; transition: opacity 0.3s ease;}
.anketa .dots.is-hidden, .anketa .form-progress.is-hidden {opacity: 0; pointer-events: none;}
.anketa .form-progress {width: 124px;}
.anketa .form-progress-track {height: 6px;
  border-radius: 999px;
  background: var(--anc-white-13);
  overflow: hidden;}
.anketa .form-progress-fill {height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--anc-violet-soft), var(--anc-pink));
  box-shadow: 0 0 12px var(--anc-primary-65);
  transition: width 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);}
.anketa .btn-primary:disabled, .anketa .btn-primary.is-disabled {filter: saturate(0.35) brightness(0.7);
  box-shadow: none;
  cursor: default;
  transform: none;
  animation: none;}
.anketa .btn-primary:disabled:hover {filter: saturate(0.35) brightness(0.7);}
.anketa .btn-primary.is-loading {pointer-events: none;}
.anketa .btn-primary.is-loading .btn-label {opacity: 0;}
.anketa .btn-primary.is-loading::after {content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--anc-white-35);
  border-top-color: var(--anc-ink);
  animation: anc-spin 0.7s linear infinite;}
@keyframes anc-spin {
to {transform: rotate(360deg);}
}
.anketa .is-shake {animation: anc-shake 0.5s ease;}
@keyframes anc-shake {
10%, 90% {transform: translateX(-2px);}
20%, 80% {transform: translateX(2px);}
30%, 50%, 70% {transform: translateX(-4px);}
40%, 60% {transform: translateX(4px);}
}
.anketa .success-overlay {position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background:
    radial-gradient(60% 38% at 12% 0%, var(--anc-primary-24), transparent 62%),
    radial-gradient(46% 32% at 92% 8%, var(--anc-pink-13), transparent 60%),
    linear-gradient(180deg, var(--anc-bg-0) 0%, var(--anc-bg-1) 54%, var(--anc-bg-2) 100%);
  transition: opacity 0.45s ease, visibility 0.45s;}
.anketa .success-overlay.is-open {opacity: 1; visibility: visible; pointer-events: auto;}
.anketa .success-card {max-width: 360px;
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);}
.anketa .success-overlay.is-open .success-card {transform: none;}
.anketa .success-overlay.is-open .success-card > * {animation: anc-riseIn 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both;}
.anketa .success-overlay.is-open .success-card > *:nth-child(1) {animation-delay: 0.08s;}
.anketa .success-overlay.is-open .success-card > *:nth-child(2) {animation-delay: 0.16s;}
.anketa .success-overlay.is-open .success-card > *:nth-child(3) {animation-delay: 0.24s;}
.anketa .success-overlay.is-open .success-card > *:nth-child(4) {animation-delay: 0.34s;}
.anketa .success-overlay.is-open .success-card > *:nth-child(5) {animation-delay: 0.44s;}
.anketa .success-card .hero {width: 170px; margin-bottom: 4px;}
.anketa .success-btn {margin-top: 24px; max-width: 260px;}
.anketa .success-hint {margin: 16px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--anc-ink-dim);}
@media (max-height: 700px) {.anketa .q-slide .slide-title {font-size: 21px;}
.anketa .q-sub {margin-bottom: 14px;}
.anketa .q-input, .anketa .dropdown-toggle {height: 50px; font-size: 15px;}
.anketa .gender-card {height: 112px; gap: 8px;}
.anketa .gender-ico {width: 40px; height: 40px;}
.anketa .q-option {padding: 12px 14px;}
.anketa .emoji-chip {width: 64px; height: 64px;}
.anketa .success-card .hero {width: 136px;}}

/* --------------------------------------------------------------------------
   ПРОЕКТНЫЕ ДОПОЛНЕНИЯ к макету «Вечерняя тропа».

   Экран забирает вьюпорт целиком: онбординг — отдельный поток (нижняя навигация
   скрывается в render()), поэтому оболочка .app здесь не нужна.
   -------------------------------------------------------------------------- */

.anketa {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  --anc-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--anc-font);
}

/* Каркас .fragment — flex/gap: потоку он не нужен. */
.anketa.fragment { display: block; gap: 0; }

/* Скрытие по атрибуту сильнее макетных display: у нас есть скрытые поля ввода. */
.anketa [hidden] { display: none !important; }

/* Пока открыт поток, оболочка не добавляет рамку/отступы своего .app. */
body.page-form {
  background: var(--anc-bg-2);
  --anc-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body.page-form .app {
  display: block;
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}
body.page-form .tabbar { display: none; }

/* -- Экран состояния: загрузка / отказ чтения статуса -- */
.anketa #form-state {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 28px;
  border: 0;
  border-radius: 0;
  background: var(--anc-bg-1);
  color: var(--anc-ink-soft);
  font-family: var(--anc-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.anketa #form-state[data-state="loading"] { color: var(--anc-ink-dim); }
.anketa #form-state[data-state="error"] { color: var(--anc-danger-ink); }

.anketa .form-state-actions {
  position: fixed;
  z-index: 31;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
}
.anketa .form-state-actions .btn-primary {
  width: auto;
  min-width: 148px;
  height: 52px;
}
.anketa .form-state-actions .back-btn { min-width: 148px; justify-content: center; }

/* -- Ошибка у поля (телефон) -- */
.anketa .q-error {
  margin: -4px 0 0;
  color: var(--anc-danger-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}

/* -- Предложение города («возможно, вы имели в виду») -- */
.anketa .city-suggest {
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--anc-violet-28);
  border-radius: 16px;
  background: var(--anc-violet-10);
  text-align: left;
}
.anketa .city-suggest__title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--anc-lilac);
}
.anketa .city-suggest__options { display: flex; flex-direction: column; gap: 8px; }
.anketa .city-suggest__option {
  padding: 10px 12px;
  border: 1px solid var(--anc-glass-line);
  border-radius: 12px;
  background: var(--anc-glass);
  color: var(--anc-ink-soft);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.anketa .city-suggest__keep { margin-top: 10px; }
.anketa .city-other { margin-top: 2px; }
.anketa .form-city-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.anketa .q-input.is-error {
  border-color: var(--anc-danger);
  box-shadow: 0 0 0 4px var(--anc-danger-soft);
}

/* -- Сообщение об отказе отправки -- */
.anketa #form-message {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 190px);
  z-index: 25;
  width: max-content;
  max-width: min(88vw, 360px);
  margin: 0;
  padding: 12px 18px;
  border: 1px solid var(--anc-danger-soft);
  border-radius: 14px;
  background: var(--anc-toast-bg);
  color: var(--anc-danger-ink);
  font-family: var(--anc-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  transform: translateX(-50%);
}
.anketa #form-message[data-state="ready"] { display: none; }

/* -- Экран «отправлено»: действия вместо макетного «Пройти ещё раз» -- */
.anketa .success-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  max-width: 260px;
  margin-top: 24px;
}
.anketa a.btn-primary { text-decoration: none; }
.anketa .success-actions .back-btn { justify-content: center; }
.anketa .success-hint { max-width: 300px; }

/* -- Тост на этом потоке: один компонент проекта, но в палитре макета -- */
body.page-form .toast-layer { bottom: calc(env(safe-area-inset-bottom, 0px) + 168px); }
body.page-form .toast {
  align-items: center;
  width: max-content;
  max-width: min(88vw, 360px);
  padding: 12px 18px;
  border: 1px solid var(--anc-glass-line);
  border-radius: 14px;
  background: var(--anc-toast-bg);
  color: var(--anc-ink-soft);
  font-family: var(--anc-font);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px -8px var(--anc-shadow-55);
}
body.page-form .toast__icon { display: none; }
body.page-form .toast__close { display: none; }
body.page-form .toast__text { text-align: center; }

/* `.hero` в app.css — баннер-градиент игры. На потоке это рамка Новы, поэтому
   гасим чужие свойства: иначе вокруг героини появлялась цветная карточка. */
.anketa .hero {
  display: block;
  gap: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  box-shadow: none;
  overflow: visible;
  text-decoration: none;
}

/* -- Подсветка слайда: в макете это inline --slide-glow, у нас классы -- */
.anketa .slide--glow-peach { --slide-glow: var(--anc-glow-peach); }
.anketa .slide--glow-gold { --slide-glow: var(--anc-gold); }
.anketa .slide--glow-lilac { --slide-glow: var(--anc-glow-lilac); }
.anketa .slide--glow-mint { --slide-glow: var(--anc-glow-mint); }
.anketa .slide--glow-rose { --slide-glow: var(--anc-glow-rose); }
.anketa .slide--glow-pink { --slide-glow: var(--anc-pink); }
.anketa .slide--glow-coral { --slide-glow: var(--anc-glow-coral); }
.anketa .slide--glow-teal { --slide-glow: var(--anc-glow-teal); }
.anketa .slide--glow-lavender { --slide-glow: var(--anc-glow-lavender); }
.anketa .slide--glow-apricot { --slide-glow: var(--anc-glow-apricot); }

/* Старое правило `.form-progress` (app.css) делало список flex — у нас другая структура. */
.anketa .form-progress { display: block; margin: 0; padding: 0; list-style: none; }