/* ============================================================
   Совёнок — дизайн-система v3 (тёмная, атмосферная)
   Палитра: ночной лес + слоновая кость + янтарь
   Шрифты: Unbounded (бренд) + Golos Text (текст)
   ============================================================ */

:root {
  /* Фон */
  --bg: #0E1712;
  --bg-2: #132019;
  --bg-3: #18291F;

  /* Поверхности (стекло поверх фона) */
  --surface: rgba(243, 239, 228, 0.055);
  --surface-2: rgba(243, 239, 228, 0.09);
  --line: rgba(243, 239, 228, 0.11);
  --line-2: rgba(243, 239, 228, 0.2);

  /* Текст */
  --ink: #F3EFE4;
  --ink-2: rgba(243, 239, 228, 0.78);
  --muted: rgba(243, 239, 228, 0.56);
  --faint: rgba(243, 239, 228, 0.36);

  /* Акценты */
  --sage: #7FB98C;
  --sage-deep: #4E8560;
  --amber: #E5B45C;
  --terra: #E08A5F;
  --sky: #8FA9E0;
  --danger: #E0705F;

  --accent: var(--sage);

  --r-card: 22px;
  --r-field: 16px;

  --glow-sage: 0 12px 34px rgba(78, 133, 96, 0.32);
  --glow-amber: 0 12px 34px rgba(229, 180, 92, 0.28);
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.42);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-brand: "Unbounded", "Golos Text", -apple-system, sans-serif;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button { font-family: inherit; color: inherit; }
a { color: var(--sage); text-decoration: none; }
img { display: block; }

/* ---------- Каркас ---------- */

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  background:
    radial-gradient(120% 44% at 50% -6%, #23392B 0%, var(--bg-2) 46%, var(--bg) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

@media (min-width: 560px) {
  body { background: #080D0A; }
  #app { box-shadow: 0 0 0 1px rgba(243, 239, 228, 0.06), 0 40px 100px rgba(0, 0, 0, 0.6); }
}

.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 18px calc(104px + var(--safe-bottom));
  animation: view-in 0.36s var(--ease);
  position: relative;
  z-index: 1;
}

.view.no-tabbar { padding-bottom: calc(28px + var(--safe-bottom)); }

@keyframes view-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Типографика ---------- */

.wordmark { font-family: var(--font-brand); font-weight: 600; letter-spacing: 0.005em; }

.h1 { font-size: 27px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.18; }
.h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.3; }
.h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -0.012em; }

.text-body { font-size: 15px; color: var(--ink-2); }
.text-muted { font-size: 14px; color: var(--muted); }
.text-small { font-size: 13px; color: var(--muted); }
.text-faint { font-size: 12.5px; color: var(--faint); }

.num { font-variant-numeric: tabular-nums; }

/* ---------- Шапка ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + var(--safe-top)) 18px 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(to bottom, rgba(14, 23, 18, 0.94), rgba(14, 23, 18, 0.6) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.topbar-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: transform 0.15s var(--ease), background 0.15s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.btn-back:active { transform: scale(0.92); background: var(--surface-2); }

/* ---------- Кнопки ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px 24px;
  border-radius: 999px;
  border: none;
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
  transition: transform 0.16s var(--ease), opacity 0.15s, background 0.2s, box-shadow 0.25s;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.42; pointer-events: none; }

.btn-primary {
  background: linear-gradient(180deg, #6FAA80 0%, var(--sage-deep) 100%);
  color: #0E1712;
  box-shadow: var(--glow-sage);
}

.btn-amber {
  background: linear-gradient(180deg, #EDC172 0%, #D19A3F 100%);
  color: #221703;
  box-shadow: var(--glow-amber);
}

.btn-cream { background: var(--ink); color: #12201A; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); }

.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }

.btn-ghost { background: transparent; color: var(--sage); }
.btn-ghost-light { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.btn-danger-ghost { background: transparent; color: var(--danger); }

.btn-small { width: auto; padding: 10px 18px; font-size: 14px; }

/* ---------- Карточки ---------- */

.card, .card-plain {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.card { box-shadow: var(--shadow); }

.card-tint {
  background: linear-gradient(150deg, rgba(127, 185, 140, 0.16), rgba(127, 185, 140, 0.05));
  border: 1px solid rgba(127, 185, 140, 0.26);
  border-radius: var(--r-card);
  padding: 20px;
}

.card-amber {
  background: linear-gradient(150deg, rgba(229, 180, 92, 0.16), rgba(229, 180, 92, 0.05));
  border: 1px solid rgba(229, 180, 92, 0.28);
  border-radius: var(--r-card);
  padding: 20px;
}

.card-forest {
  background: linear-gradient(150deg, rgba(243, 239, 228, 0.1), rgba(243, 239, 228, 0.04));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
  box-shadow: var(--shadow);
}

/* ---------- Плитки ---------- */

.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s var(--ease), background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.tile:active { transform: scale(0.965); background: var(--surface-2); }

.tile-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(127, 185, 140, 0.16);
  color: var(--sage);
}

.tile-icon.amber { background: rgba(229, 180, 92, 0.16); color: var(--amber); }
.tile-icon.sky { background: rgba(143, 169, 224, 0.16); color: var(--sky); }
.tile-icon.terra { background: rgba(224, 138, 95, 0.16); color: var(--terra); }

.tile-label { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.tile-sub { font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 2px; }

/* ---------- Поля ---------- */

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 650; color: var(--ink-2); }

.input, .textarea, select.input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-field);
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 15.5px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder, .textarea::placeholder { color: var(--faint); }

.input:focus, .textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(127, 185, 140, 0.16);
  background: var(--surface-2);
}

select.input option { background: var(--bg-2); color: var(--ink); }

.textarea { resize: none; min-height: 112px; line-height: 1.55; border-radius: var(--r-card); }

.input-dark {
  width: 100%;
  padding: 15px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 15.5px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  -webkit-appearance: none;
}

.input-dark::placeholder { color: var(--faint); }
.input-dark:focus { border-color: var(--line-2); background: var(--surface-2); }

/* ---------- Таббар ---------- */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  display: flex;
  background: rgba(14, 23, 18, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  padding: 8px 10px calc(8px + var(--safe-bottom));
  z-index: 30;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--faint);
  font-size: 11px;
  font-weight: 650;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}

.tab-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px;
  border-radius: 999px;
  transition: background 0.3s var(--ease), transform 0.2s var(--ease);
}

.tab.active { color: var(--sage); }
.tab.active .tab-ico { background: rgba(127, 185, 140, 0.16); }
.tab:active .tab-ico { transform: scale(0.9); }

/* ============================================================
   Карта сфер
   ============================================================ */

.wheel-wrap { position: relative; width: 268px; height: 268px; margin: 0 auto; }

.wheel { width: 100%; height: 100%; overflow: visible; }

.wheel-track { fill: none; stroke: rgba(243, 239, 228, 0.07); stroke-linecap: round; }

.wheel-arc {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--ease), filter 0.3s;
  cursor: pointer;
}

.wheel-arc.dim { opacity: 0.28; }

.wheel-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
  text-align: center;
}

.wheel-score {
  font-family: var(--font-brand);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  animation: score-in 0.6s var(--ease) both;
}

@keyframes score-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: none; }
}

.wheel-label { font-size: 12.5px; color: var(--muted); }

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

.legend-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border-radius: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s var(--ease), border-color 0.2s;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.legend-item:active { transform: scale(0.97); }
.legend-item.on { background: var(--surface-2); border-color: var(--line-2); }

.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.legend-name { font-size: 13.5px; font-weight: 600; }
.legend-score { font-size: 12.5px; color: var(--muted); }

.delta-up { color: var(--sage); }
.delta-down { color: var(--terra); }

.sphere-detail {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 16px 18px;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  animation: detail-in 0.35s var(--ease) both;
}

@keyframes detail-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Аватар
   ============================================================ */

.hero-avatar {
  position: relative;
  margin: 0 auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Кольцо не крутится: вращающиеся разноцветные дуги читаются как индикатор
   загрузки. Вместо этого оно едва заметно дышит. */
.hero-halo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: halo-breathe 7s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes halo-breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.018); opacity: 1; }
}

/* Мягкий свет за спиной персонажа: он стоит в свете, а не в чёрной коробке */
.hero-glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 44%, rgba(127, 185, 140, 0.22), rgba(127, 185, 140, 0.06) 46%, transparent 66%);
  pointer-events: none;
  animation: glow-pulse 7s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* Тень под ногами, чтобы фигура стояла, а не висела */
.hero-floor {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 44%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 72%);
  pointer-events: none;
}

.hero-figure {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.figure { overflow: visible; }

.figure.idle .figure-body {
  transform-origin: 50% 92%;
  animation: figure-breathe 5.2s ease-in-out infinite;
}

@keyframes figure-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.012); }
}

.figure-halo {
  transform-origin: 50% 50%;
  animation: halo-tilt 6s ease-in-out infinite;
}

@keyframes halo-tilt {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(-3px); opacity: 0.85; }
}

.figure-sparks circle { animation: spark-float 3.6s ease-in-out infinite; }

@keyframes spark-float {
  0%, 100% { transform: translateY(0); opacity: 0.25; }
  50% { transform: translateY(-14px); opacity: 0.9; }
}

.figure-plinth { opacity: 0.9; }

/* Появление аватара */
.hero-avatar { animation: hero-in 0.7s var(--ease) both; }

@keyframes hero-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* Портрет из конструктора вместо процедурной фигуры */

/* Персонаж стоит перед кольцом и слегка выходит за него —
   так композиция живая, а не «фотография в дырке». */
.hero-portrait {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  height: 98%;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

.hero-portrait img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
  animation: portrait-in 0.6s var(--ease) both, figure-breathe 5.6s ease-in-out 0.6s infinite;
  image-rendering: auto;
}

/* Пиксель-арт не должен мылиться при масштабировании */
.hero-portrait img.pixel { image-rendering: pixelated; }

@keyframes portrait-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Конструктор */

.tile.tile-on { border-color: var(--sage); background: rgba(127, 185, 140, 0.12); }

.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.style-card {
  position: relative;
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.style-card:active { transform: scale(0.97); }
.style-card.on { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(127, 185, 140, 0.18); }

.style-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  background: var(--bg-2);
}

.style-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px 13px;
  text-align: left;
}

.style-card .badge-check { top: 10px; right: 10px; width: 26px; height: 26px; }

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

.interest {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  animation: interest-in 0.4s var(--ease) both;
}

.interest span:first-child { font-size: 15px; line-height: 1; }

@keyframes interest-in {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.pick {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.pick:active { transform: scale(0.95); }
.pick.on { background: var(--sage); border-color: var(--sage); color: #0E1712; font-weight: 650; }

.selfie-btn {
  width: 100%;
  border: 1.5px dashed var(--line-2);
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.selfie-btn:active { background: var(--surface-2); }

.selfie-slot {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  overflow: hidden;
}

.selfie-slot img { width: 100%; height: 100%; object-fit: cover; }

.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  padding: 14px 16px;
  border-radius: var(--r-field);
  background: var(--surface);
  border: 1px solid var(--line);
}

.check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--sage);
  margin-top: 1px;
}

/* ============================================================
   Два твоих будущих
   ============================================================ */

/* Пропорция совпадает с генерируемыми картинками (1024x1536), поэтому
   обе сцены заполняют рамку целиком и попиксельно совпадают:
   шов шторки идёт по картинке, а не по пустым полям. */
.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  user-select: none;
  touch-action: pan-y;
}

.compare-layer { position: absolute; inset: 0; }

.compare-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.compare-tag {
  position: absolute;
  top: 12px;
  z-index: 3;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  background: rgba(14, 23, 18, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(243, 239, 228, 0.14);
  transition: opacity 0.25s;
}

.compare-tag.drift { left: 12px; color: var(--terra); }
.compare-tag.growth { right: 12px; color: var(--sage); }
.compare-tag.faded { opacity: 0.35; }

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: rgba(243, 239, 228, 0.75);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.compare-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--ink);
  color: #12201A;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.compare-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
  touch-action: pan-y;
}

.compare-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 3;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(14, 23, 18, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  color: var(--ink-2);
  pointer-events: none;
  transition: opacity 0.4s;
}

.futures-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 17px 19px;
  border-radius: var(--r-card);
  border: 1px solid rgba(229, 180, 92, 0.3);
  background: linear-gradient(120deg, rgba(224, 138, 95, 0.14), rgba(127, 185, 140, 0.14));
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.futures-cta:active { transform: scale(0.98); }

.future-note.drift { border-left: 3px solid var(--terra); }
.future-note.growth { border-left: 3px solid var(--sage); }

.futures-teaser {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex;
  border: 1px solid var(--line);
}

.teaser-half {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 12px;
  font-size: 12.5px;
  font-weight: 650;
  text-align: center;
}

.teaser-half.drift {
  background: linear-gradient(180deg, rgba(224, 138, 95, 0.16), rgba(224, 138, 95, 0.04));
  color: var(--terra);
}

.teaser-half.growth {
  background: linear-gradient(180deg, rgba(127, 185, 140, 0.18), rgba(127, 185, 140, 0.05));
  color: var(--sage);
}

.teaser-split {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line-2);
}

/* Галерея эпох */

.era-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 18px 10px;
  margin: 0 -18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.era-row::-webkit-scrollbar { display: none; }

.era-card {
  scroll-snap-align: start;
  flex: 0 0 132px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.era-wheel { width: 84px; height: 84px; }
.era-wheel svg { width: 100%; height: 100%; }

.era-name { font-size: 13px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }

/* ============================================================
   Ежедневный ритуал
   ============================================================ */

.ritual {
  border-radius: var(--r-card);
  padding: 18px 20px;
  background: linear-gradient(150deg, rgba(229, 180, 92, 0.15), rgba(229, 180, 92, 0.04));
  border: 1px solid rgba(229, 180, 92, 0.24);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: transform 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.ritual:active { transform: scale(0.98); }

.ritual-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(229, 180, 92, 0.2);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: ritual-pulse 3.4s ease-in-out infinite;
}

@keyframes ritual-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 180, 92, 0.22); }
  55% { box-shadow: 0 0 0 12px rgba(229, 180, 92, 0); }
}

.streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--amber);
}

.scale-row { display: flex; gap: 9px; }

.scale-btn {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
  filter: grayscale(0.65);
  opacity: 0.7;
}

.scale-btn:active { transform: scale(0.9); }

.scale-btn.on {
  background: rgba(229, 180, 92, 0.16);
  border-color: var(--amber);
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

.week-strip { display: flex; gap: 6px; justify-content: space-between; }

.week-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--faint);
}

.week-bar {
  width: 100%;
  height: 42px;
  border-radius: 8px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.week-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, var(--sage), var(--sage-deep));
  border-radius: 8px;
  transition: height 0.7s var(--ease);
}

/* ============================================================
   Совет наставников
   ============================================================ */

.council-card {
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  animation: council-in 0.5s var(--ease) both;
}

@keyframes council-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.council-head { display: flex; align-items: center; gap: 11px; }

.council-head img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line-2);
  flex-shrink: 0;
}

.council-card.waiting { opacity: 0.55; }
.council-card.waiting img { animation: waiting-bob 1.8s ease-in-out infinite; }

@keyframes waiting-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-4px); opacity: 1; }
}

.council-text { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; }

/* ============================================================
   Скрининг слайдами
   ============================================================ */

.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 14px;
  margin: 0 -18px;
  padding: 0 18px 8px;
  scrollbar-width: none;
  flex: 1;
}

.slides::-webkit-scrollbar { display: none; }

.slide {
  scroll-snap-align: center;
  flex: 0 0 100%;
  border-radius: 26px;
  padding: 26px 24px;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 62dvh;
  box-shadow: var(--shadow);
}

.slide-num {
  font-family: var(--font-brand);
  font-size: 13px;
  color: var(--amber);
  letter-spacing: 0.04em;
}

.slide-title { font-size: 25px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.16; }

.slide-body {
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
  overflow-y: auto;
  flex: 1;
}

.slide-dots { display: flex; gap: 6px; justify-content: center; }

.slide-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line-2);
  transition: background 0.3s, width 0.3s;
}

.slide-dots i.on { background: var(--amber); width: 20px; border-radius: 999px; }

/* ============================================================
   Постер
   ============================================================ */

.poster {
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.poster svg { width: 100%; height: 100%; display: block; }

/* ---------- Чат ---------- */

.chat-view { padding: 0; height: 100dvh; display: flex; flex-direction: column; animation: none; }

.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.msg {
  max-width: 86%;
  padding: 12px 16px;
  border-radius: var(--r-card);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  animation: msg-in 0.28s var(--ease);
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.msg-user {
  align-self: flex-end;
  background: linear-gradient(160deg, #6FAA80, var(--sage-deep));
  color: #0E1712;
  border-bottom-right-radius: 7px;
  font-weight: 500;
}

.msg-assistant {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 7px;
  color: var(--ink-2);
}

.msg-collapsed {
  align-self: stretch;
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-card);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}

.chat-inputbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px calc(12px + var(--safe-bottom));
  background: rgba(14, 23, 18, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}

.chat-input {
  flex: 1;
  max-height: 132px;
  padding: 13px 18px;
  border-radius: 24px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 15.5px;
  font-family: inherit;
  line-height: 1.45;
  color: var(--ink);
  outline: none;
  resize: none;
  transition: border-color 0.15s;
}

.chat-input::placeholder { color: var(--faint); }
.chat-input:focus { border-color: var(--sage); }

.btn-send {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #6FAA80, var(--sage-deep));
  color: #0E1712;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--glow-sage);
  transition: transform 0.15s var(--ease), opacity 0.15s;
}

.btn-send:active { transform: scale(0.9); }
.btn-send:disabled { opacity: 0.4; box-shadow: none; }

.btn-mic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.btn-mic:active { transform: scale(0.9); }

.btn-mic.rec {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  animation: mic-pulse 1.6s infinite;
}

.btn-mic.busy { pointer-events: none; }

@keyframes mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 112, 95, 0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(224, 112, 95, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 112, 95, 0); }
}

.typing { display: inline-flex; gap: 5px; padding: 15px 17px; }

.typing i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--faint);
  animation: typing-bounce 1.2s infinite;
}

.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: none; opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Кураторы ---------- */

.sphere-block { display: flex; flex-direction: column; gap: 12px; }

.curator-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 18px 16px;
  margin: 0 -18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.curator-row::-webkit-scrollbar { display: none; }

.curator-card {
  scroll-snap-align: start;
  flex: 0 0 168px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s var(--ease), background 0.2s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.curator-card:active { transform: scale(0.965); }
.curator-card.selected { border-color: var(--sage); background: rgba(127, 185, 140, 0.1); }
.curator-card.locked { opacity: 0.45; }

.curator-avatar {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 15px;
  object-fit: cover;
  background: var(--surface-2);
}

.curator-name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }

.curator-desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.badge-check {
  position: absolute;
  top: 18px; right: 18px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sage);
  color: #0E1712;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--glow-sage);
}

.badge-soon {
  position: absolute;
  top: 20px; left: 20px;
  background: rgba(14, 23, 18, 0.8);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* ---------- Списки, чипы ---------- */

.list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border-left: none; border-right: none; border-top: none;
  width: 100%;
  text-align: left;
  font-size: 15.5px;
  color: var(--ink);
  transition: opacity 0.15s;
}

.list-row:active { opacity: 0.55; }
.list-row:last-child { border-bottom: none; }
.list-row .grow { flex: 1; min-width: 0; }

.row-icon {
  width: 38px; height: 38px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(127, 185, 140, 0.14);
  color: var(--sage);
  flex-shrink: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
}

.chip-green { background: rgba(127, 185, 140, 0.16); color: var(--sage); }
.chip-amber { background: rgba(229, 180, 92, 0.16); color: var(--amber); }
.chip-gray { background: var(--surface); color: var(--muted); }
.chip-red { background: rgba(224, 112, 95, 0.16); color: var(--danger); }

.progress-track { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sage), var(--amber));
  transition: width 0.5s var(--ease);
}

.stack { display: flex; flex-direction: column; }
.gap-6 { gap: 6px; } .gap-10 { gap: 10px; } .gap-14 { gap: 14px; }
.gap-18 { gap: 18px; } .gap-24 { gap: 24px; }
.mt-auto { margin-top: auto; }
.center { text-align: center; }

.option-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 15px 18px;
  border-radius: var(--r-field);
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 14.5px;
  line-height: 1.42;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s var(--ease);
}

.option-btn:active { transform: scale(0.98); background: rgba(127, 185, 140, 0.14); border-color: var(--sage); }

/* ---------- Скелетоны, спиннер ---------- */

.skeleton {
  border-radius: var(--r-field);
  background: linear-gradient(100deg, var(--surface) 40%, rgba(243, 239, 228, 0.1) 50%, var(--surface) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -80% 0; }
}

.spinner {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(243, 239, 228, 0.14);
  border-top-color: var(--sage);
  animation: spin 0.9s linear infinite;
}

.spinner.large { width: 44px; height: 44px; border-width: 4px; }

@keyframes spin { to { transform: rotate(360deg); } }

.stage-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  background: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, background 0.3s;
}

.stage-dot.active { border-color: var(--amber); }
.stage-dot.done { border-color: var(--amber); background: var(--amber); color: #221703; }

/* ---------- Тосты ---------- */

#toasts {
  position: fixed;
  top: calc(14px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 440px);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: rgba(243, 239, 228, 0.95);
  color: #12201A;
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 550;
  box-shadow: var(--shadow);
  animation: toast-in 0.3s var(--ease);
  text-align: center;
}

.toast.error { background: var(--danger); color: #fff; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Логотип ---------- */

.logo-mark {
  width: 84px; height: 84px;
  border-radius: 28px;
  background: linear-gradient(160deg, #2C4A36, #16241B);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}

.logo-mark.small { width: 62px; height: 62px; border-radius: 21px; }

/* ---------- Скрининг (проза от ИИ) ---------- */

.prose h3 {
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 24px 0 8px;
  color: var(--ink);
}

.prose h3:first-child { margin-top: 0; }
.prose p { font-size: 15px; color: var(--ink-2); line-height: 1.65; margin-bottom: 12px; }

/* ---------- Лист ---------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 11, 8, 0.62);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade-in 0.25s var(--ease);
  backdrop-filter: blur(4px);
}

@keyframes fade-in { from { opacity: 0; } }

.sheet {
  width: 100%;
  max-width: 520px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 26px 26px 0 0;
  padding: 18px 20px calc(26px + var(--safe-bottom));
  animation: sheet-up 0.34s var(--ease);
  max-height: 86dvh;
  overflow-y: auto;
}

@keyframes sheet-up {
  from { transform: translateY(48px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.sheet-handle {
  width: 42px; height: 4.5px;
  border-radius: 999px;
  background: var(--line-2);
  margin: 0 auto 18px;
}

/* ============================================================
   Знакомство с наставниками (онбординг-сцена)
   ============================================================ */

.meet {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: -18px -18px calc(-28px - var(--safe-bottom));
  padding: calc(20px + var(--safe-top)) 20px calc(24px + var(--safe-bottom));
  background: radial-gradient(120% 62% at 50% -8%, #2A4732 0%, var(--bg-2) 55%, var(--bg) 100%);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

.meet::before, .meet::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(46px);
  opacity: 0.45;
}

.meet::before {
  width: 260px; height: 260px;
  top: -80px; left: -90px;
  background: rgba(229, 180, 92, 0.18);
  animation: drift-a 14s ease-in-out infinite;
}

.meet::after {
  width: 300px; height: 300px;
  bottom: -110px; right: -100px;
  background: rgba(127, 185, 140, 0.18);
  animation: drift-b 17s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: none; }
  50% { transform: translate(28px, 34px) scale(1.12); }
}

@keyframes drift-b {
  0%, 100% { transform: none; }
  50% { transform: translate(-30px, -26px) scale(1.08); }
}

.meet-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }

.meet-lead { font-size: 15.5px; line-height: 1.55; color: var(--muted); }

.meet-top { display: flex; align-items: center; gap: 12px; min-height: 40px; }

.dots { display: flex; gap: 7px; flex: 1; }

.dots i {
  width: 26px; height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  transition: background 0.45s var(--ease), width 0.45s var(--ease);
}

.dots i.done { background: var(--amber); }
.dots i.now { background: var(--ink); width: 40px; }

.btn-skip {
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 550;
  padding: 8px 2px;
  cursor: pointer;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.btn-skip:active { color: var(--ink); }

.crew { position: relative; width: 260px; height: 260px; margin: 0 auto; }

.crew-owl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: owl-in 0.7s var(--ease) both, owl-float 5.5s ease-in-out 0.7s infinite;
}

@keyframes owl-in {
  from { opacity: 0; transform: scale(0.72); }
  to   { opacity: 1; transform: none; }
}

@keyframes owl-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.crew-ring { position: absolute; inset: 0; animation: ring-spin 46s linear infinite; }

@keyframes ring-spin { to { transform: rotate(360deg); } }

.crew-ring img {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  top: 50%; left: 50%;
  margin: -26px 0 0 -26px;
  opacity: 0;
  animation: crew-pop 0.55s var(--ease) forwards, ring-counter 46s linear infinite;
}

@keyframes crew-pop {
  from { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.3); }
  to   { opacity: 1; transform: translate(var(--x), var(--y)) scale(1); }
}

@keyframes ring-counter { to { rotate: -360deg; } }

.speaker { display: flex; align-items: center; gap: 12px; animation: speaker-in 0.5s var(--ease) both; }

.speaker img, .speaker .owl-slot {
  width: 58px; height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  animation: speaker-bob 4.5s ease-in-out infinite;
}

@keyframes speaker-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes speaker-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.speaker-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.speaker-role { font-size: 12.5px; color: var(--muted); }

.bubble {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  border-top-left-radius: 7px;
  padding: 16px 18px;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  animation: bubble-in 0.45s var(--ease) 0.12s both;
}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.choice {
  display: block;
  width: 100%;
  text-align: left;
  padding: 15px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.2s, border-color 0.2s;
  -webkit-tap-highlight-color: transparent;
  animation: choice-in 0.42s var(--ease) both;
}

.choice:nth-child(1) { animation-delay: 0.16s; }
.choice:nth-child(2) { animation-delay: 0.23s; }
.choice:nth-child(3) { animation-delay: 0.3s; }
.choice:nth-child(4) { animation-delay: 0.37s; }

.choice:active { transform: scale(0.98); background: var(--surface-2); }
.choice.picked { background: var(--amber); border-color: var(--amber); color: #221703; font-weight: 650; }

@keyframes choice-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.council { display: flex; justify-content: center; }

.council img {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line-2);
  margin-left: -12px;
  animation: council-glow 2.4s ease-in-out infinite;
}

.council img:first-child { margin-left: 0; }
.council img:nth-child(2) { animation-delay: 0.3s; }
.council img:nth-child(3) { animation-delay: 0.6s; }
.council img:nth-child(4) { animation-delay: 0.9s; }
.council img:nth-child(5) { animation-delay: 1.2s; }

@keyframes council-glow {
  0%, 100% { transform: translateY(0); border-color: var(--line-2); }
  50% { transform: translateY(-8px); border-color: var(--amber); }
}

.stage-line {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  color: var(--faint);
  transition: color 0.4s;
}

.stage-line.active { color: var(--ink); }
.stage-line.done { color: var(--ink-2); }

.stage-line .mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.4s, background 0.4s;
}

.stage-line.active .mark { border-color: var(--amber); animation: mark-pulse 1.4s infinite; }
.stage-line.done .mark { border-color: var(--amber); background: var(--amber); color: #221703; }

@keyframes mark-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 180, 92, 0.4); }
  60% { box-shadow: 0 0 0 9px rgba(229, 180, 92, 0); }
}

.result-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px;
  animation: result-in 0.55s var(--ease) both;
  box-shadow: var(--shadow);
}

@keyframes result-in {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.deep-offer {
  border: 1px dashed var(--line-2);
  border-radius: 18px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: background 0.2s;
}

.deep-offer:active { background: var(--surface); }

/* Экран входа наследует ту же сцену */
.hero-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: -18px -18px calc(-28px - var(--safe-bottom));
  padding: calc(48px + var(--safe-top)) 24px calc(34px + var(--safe-bottom));
  background: radial-gradient(130% 72% at 50% -6%, #2A4732 0%, var(--bg-2) 52%, var(--bg) 100%);
}

.hero-tagline { font-size: 15.5px; line-height: 1.55; color: var(--muted); }

.avatar-stack { display: flex; align-items: center; }

.avatar-stack img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bg-2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.avatar-stack img + img { margin-left: -12px; }