/* ════════════════════════════════════════════════════════════════════════════
   COSMOS — визуальный слой natal-chart
   Концепт: «Тёплый космос». Не оккультизм, не религия — звёзды как добрый
   друг, который помогает понять себя. Глубокая ночь + тёплое золото рассвета
   + спиритуальный фиолет. Живой: дышит фон, мерцают созвездия, иконки
   оживают на тач. Всё движение деградирует при prefers-reduced-motion.

   Слой ПОВЕРХ styles.css: рабочая инженерия (themeParams, safe-area, нативные
   кнопки) не трогается. Здесь — характер, палитра, свечения, движение.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. ПАЛИТРА ─────────────────────────────────────────────────────────────
   Поверх Telegram themeParams. Космо-слой НЕ зависит от themeParams напрямую
   (иначе «характер» теряется в чужой теме клиента) — у нас собственная
   фирменная ночь, а themeParams используются как фоллбэк-якоря для текста.

   Звёздная шкала фиолета (9 шагов, как велит Refactoring UI):
   от рассветного лилового до глубокой полуночи. */
:root {
  /* — Фирменная ночь (фон приложения) — */
  --night-900: #0b0a1a;   /* самый глубокий — низ градиента, не чистый чёрный */
  --night-800: #12102a;   /* база экрана */
  --night-700: #1a1736;   /* приподнятая поверхность */
  --night-600: #241f47;   /* карточка */
  --night-500: #2f2858;   /* карточка-hover / бордюр-сильный */

  /* — Спиритуальный фиолет (акцент-1, «магия») — */
  --violet-300: #c4b5fd;
  --violet-400: #a78bfa;
  --violet-500: #8b6cf0;   /* основной акцент (совпал с текущим --accent) */
  --violet-600: #7c5ce0;

  /* — Тёплое золото рассвета (акцент-2, «тепло/радость/готово») — */
  --gold-300: #fde0a3;
  --gold-400: #fbcd72;
  --gold-500: #f5b840;   /* «звезда зажглась» — готовые разборы, успех */

  /* — Розовая туманность (акцент-3, эмоция/сердце) — */
  --nebula-400: #f49ac2;
  --nebula-500: #ec6fa9;

  /* — Аврора (для дышащего фона; холодная сторона неба) — */
  --aurora-cyan: #5ad1e6;
  --aurora-teal: #3ba8c9;

  /* — Текст на ночи — */
  --ink-100: #f4f1fb;   /* основной текст (не чистый белый) */
  --ink-300: #cfc8e6;   /* вторичный */
  --ink-500: #9a93b8;   /* подписи/хинты */

  /* — Семантика статуса (emerald/amber/rose, не green/yellow/red) — */
  --ok:    #4ade80;
  --warn:  #f5b840;   /* = gold, тёплое предупреждение */
  --bad:   #fb7185;   /* rose, мягче чем e5484d */

  /* ── 1b. ПОП-СЛОЙ (Gen-Z акценты поверх космоса) ───────────────────────────
     Источник языка: print-split/frontend/pop.css (BunnySplit POP). Космос —
     БАЗА/душа (тёмная ночь, орбиты, свечения). Поп — СЛОЙ АКЦЕНТОВ:
     • вспышки lime/coral дают «электрическую» свежесть, которой нет в спокойной
       космо-палитре; берём ТОЛЬКО как акцент (стикеры, искры, CTA), НЕ как фон
       и НЕ как заливку длинного текста (иначе ломается контраст/тон);
     • --sun звонче нашего gold-500 — для «налепленных» стикеров.
     ЗАКОН ТОНА (product-philosophy): поп живёт в ПОДАЧЕ, не в смысле. */
  --pop-lime:  #c6f24e;
  --pop-coral: #ff5e7e;
  --pop-blue:  #2e6bff;
  --pop-violet:#7c5cff;   /* родственник --violet-500, чуть звонче */
  --pop-sun:   #ffc53d;   /* звонче gold-500, для стикеров */

  /* Тёмные «чернила» для текста НА сочной поп-заливке (контраст ≥ 4.5:1). */
  --pop-ink:   #1a1330;

  /* Поп-градиенты (вспышка lime→sun→coral; и фирменный CTA космос→поп). */
  --pop-grad:  linear-gradient(120deg, var(--pop-lime), var(--pop-sun) 50%, var(--pop-coral));
  /* CTA-градиент насыщенный: coral→violet (белый текст читается ≥4.5:1). */
  --pop-cta:   linear-gradient(135deg, var(--pop-coral), var(--violet-600) 90%);

  /* Поп-свечения (звонче космо-glow, для CTA и стикеров). */
  --glow-coral: 0 0 24px rgba(255, 94, 126, 0.40);
  --glow-lime:  0 0 22px rgba(198, 242, 78, 0.38);

  /* ── 2. ТИПОГРАФИКА ───────────────────────────────────────────────────────
     Только системные шрифты (в TMA нет права на тяжёлые веб-шрифты — FOIT,
     вес, оффлайн-клиенты). Системный стек на iOS = SF Pro (тёплый, гуманный),
     на Android = Roboto, на десктопе = Segoe/системный. Это и есть «закон
     Якоба»: родной шрифт платформы = мгновенно знакомо.
     Display-стек для крупных заголовков — тот же, но с tracking. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, "Helvetica Neue", sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", Roboto,
              sans-serif;            /* округлые цифры для дружелюбия */

  /* Шкала (стандартная, без промежуточных): 12 14 16 18 20 24 30 36 */
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-18: 18px;
  --t-20: 20px; --t-24: 24px; --t-30: 30px; --t-36: 36px;

  /* ── 3. СПЕЙСИНГ (4px-сетка) ─────────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  /* ── 4. РАДИУСЫ ───────────────────────────────────────────────────────────
     Крупные, мягкие — «дружелюбие» (закруглённое = тёплое, Material/HIG). */
  --r-sm: 12px;   /* инпуты, бейджи */
  --r-md: 18px;   /* кнопки */
  --r-lg: 24px;   /* карточки */
  --r-xl: 32px;   /* hero-блоки, sheet */
  --r-full: 999px;

  /* ── 5. СВЕЧЕНИЯ И ТЕНИ ───────────────────────────────────────────────────
     На тёмном фоне тень не видна — работают СВЕЧЕНИЯ (glow). Это и есть
     «космос светится изнутри». Тень используем только как мягкую глубину. */
  --glow-violet: 0 0 24px rgba(139, 108, 240, 0.45);
  --glow-gold:   0 0 28px rgba(245, 184, 64, 0.40);
  --glow-soft:   0 8px 32px rgba(11, 10, 26, 0.55);
  --shadow-card: 0 6px 24px rgba(11, 10, 26, 0.45),
                 inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Бордюр стекла — едва видимый блик сверху */
  --glass-border: 1px solid rgba(255, 255, 255, 0.10);
  --glass-fill:   rgba(255, 255, 255, 0.045);

  /* ── 6. ДВИЖЕНИЕ (токены) ─────────────────────────────────────────────────
     Единый ритм для всего приложения (motion-consistency). */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);   /* вход, «пружина» */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --d-fast: 160ms;    /* микро (tap) */
  --d-base: 240ms;    /* стандарт */
  --d-slow: 360ms;    /* вход экрана */
  --d-breath: 9s;     /* дыхание фона — медленно, чтобы не отвлекать */

  /* ════════════════════════════════════════════════════════════════════════
     ФИНАЛ #1 AURA-GRADIENT (владелец, 2026-06-19, после AI-мокапов):
     ТЁМНОЕ, но ЖИВОЕ/СВЕТЯЩЕЕСЯ — эталон tma/assets/mockups/home-aura-gradient.png.
     Фон рисует НАСТОЯЩИЙ AI-ассет (tma/assets/aura/aura-bg.png) — НЕ ручной CSS-
     градиент (он выходил «самоделкой»). Поверх: тёмное frosted-стекло без чёрных
     обводок (границы = glow/блик), глянцевые 3D-орбы-PNG, поп display-шрифт,
     звёзды/планеты. Текст СВЕТЛЫЙ (контраст ≥4.5:1 на тёмном).

     Стратегия без взрыва радиуса: имена токенов СОХРАНЕНЫ. Эти переопределения
     идут ПОСЛЕ дефолтов выше → выигрывают. КРИТ-ЗАПРЕТ: жёсткие чёрные обводки.
     ════════════════════════════════════════════════════════════════════════ */

  /* — Путь к фон-ассету и слою орбов (один источник, см. body.cosmos) — */
  --aura-bg: url("../assets/aura/aura-bg.png");
  --canvas-base: #0c0a1e;   /* подложка ПОД ассетом (на случай долгой загрузки) */

  /* — Тёмное frosted-стекло (вуаль на тёмной ауре; границы = блик, НЕ контур) — */
  --canvas-veil:        rgba(28, 22, 56, 0.42);   /* мягкое стекло */
  --canvas-veil-strong: rgba(30, 24, 60, 0.58);   /* плотнее (форма/поля) */

  /* — Текст на тёмной ауре: светлые чернила (контраст AA на тёмном) — */
  --ink-100: #f5f1ff;   /* основной текст (не чистый белый) */
  --ink-300: #ccc4e8;   /* вторичный (на стекле ≥4.5:1) */
  --ink-500: #9a91c0;   /* подписи/хинты (≥4.5:1 на тёмном) */

  /* — Яркие акценты на тёмном (светятся, не блёкнут) — */
  --violet-500: #a78bfa;   /* основной акцент, читаемый на тёмной ауре */
  --violet-600: #8b6cf0;
  --violet-300: #c4b5fd;
  --gold-500:   #fbcd72;   /* тёплое «готово» — светлое золото на тёмном */
  --gold-300:   #fde0a3;
  --nebula-500: #f49ac2;
  --nebula-400: #ec6fa9;

  /* — ЕДИНАЯ кнопка-действие (фикс «пляшущих плашек»): один стиль на все строки.
       Состояние карточки различаем орбом+подписью+рамкой (color-not-only),
       НЕ цветом самой плашки. Светлая капсула с тёмным текстом = эталон-мокап. — */
  --act-bg:   #f1ecff;          /* светлая капсула (как «Открыть мой год» на мокапе) */
  --act-ink:  #2a1f55;          /* тёмные чернила на светлой капсуле (контраст высокий) */
  --act-bg-soft: rgba(167, 139, 250, 0.16);   /* мягкий фон для «не главных» строк */

  /* — Свечения на тёмном: настоящий glow (на тёмном виден) — */
  --glow-violet: 0 0 28px rgba(167, 139, 250, 0.45);
  --glow-gold:   0 0 30px rgba(251, 205, 114, 0.42);
  --glow-coral:  0 0 26px rgba(255, 94, 126, 0.42);
  --glow-lime:   0 0 22px rgba(198, 242, 78, 0.38);
  --glow-soft:   0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 10px 36px rgba(0, 0, 0, 0.40),
                 inset 0 1px 0 rgba(255, 255, 255, 0.10);
  /* Граница стекла = едва видимый верхний блик (НЕ чёрный контур). */
  --glass-border: 1px solid rgba(255, 255, 255, 0.12);
  --glass-fill:   rgba(28, 22, 56, 0.42);

  /* Поп-чернила для текста НА сочной поп-заливке. */
  --pop-ink:   #1a1330;
  --pop-lime-ink: #2c3d05;
}

/* ФИНАЛ #1 AURA: фон рисует НАСТОЯЩИЙ AI-ассет (тёмная живая аура со звёздами).
   Не воссоздаём CSS-градиентом (выходит «самоделкой»). Ассет покрывает экран
   (cover), фиксирован — контент скроллится поверх неподвижного неба. Тёмная
   подложка --canvas-base держит цвет, пока ассет грузится (нет белой вспышки). */
body.cosmos {
  background:
    var(--aura-bg) center top / cover no-repeat fixed,
    var(--canvas-base);
  color: var(--ink-100);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;

  /* Якорим базовые токены styles.css на ТЁМНУЮ палитру, чтобы в светлой теме
     Telegram-клиента текст/карточки не стали невидимыми на нашей тёмной ауре.
     themeParams остаются для нативных контролов; наш характер — тёмный-живой. */
  --bg: transparent;            /* фон рисует аура-ассет body.cosmos */
  --text: var(--ink-100);
  --hint: var(--ink-500);
  --card: var(--canvas-veil-strong);
  --accent: var(--violet-500);
  --accent-text: #2a1f55;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);
  --destructive: #fb7185;
}

/* ════════════════════════════════════════════════════════════════════════════
   ЯЗЫК ДВИЖЕНИЯ
   ════════════════════════════════════════════════════════════════════════════ */

/* ── A. ДЫШАЩИЙ ФОН: амбиентные «туманности» ──────────────────────────────────
   Два мягких пятна-блоба медленно плывут и пульсируют. Это «жизнь» фона —
   ощущение, что небо над тобой дышит. transform+opacity → дёшево для GPU. */
.cosmos-bg {
  position: fixed; inset: 0; z-index: -2;
  overflow: hidden; pointer-events: none;
}
/* На тёмном AI-ассете аура/glow УЖЕ запечены. CSS-блобы здесь — лёгкое «дыхание»
   света поверх (screen-blend добавляет свечение, не грязь). Деликатно. */
.cosmos-bg .blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.22;
  will-change: transform; mix-blend-mode: screen;   /* свет поверх тёмного */
}
.cosmos-bg .blob-1 {
  width: 72vw; height: 72vw; left: -22vw; top: -12vh;
  background: radial-gradient(circle, #b98bff, transparent 70%);
  animation: drift-1 var(--d-breath) var(--ease-out) infinite alternate;
}
.cosmos-bg .blob-2 {
  width: 62vw; height: 62vw; right: -26vw; bottom: -6vh;
  background: radial-gradient(circle, #ff9d6b, transparent 70%);
  opacity: 0.18;
  animation: drift-2 calc(var(--d-breath) * 1.3) var(--ease-out) infinite alternate;
}
.cosmos-bg .blob-3 {
  width: 52vw; height: 52vw; right: 4vw; top: 30vh;
  background: radial-gradient(circle, #ff6fb0, transparent 70%);
  opacity: 0.16;
  animation: drift-1 calc(var(--d-breath) * 1.6) var(--ease-out) infinite alternate-reverse;
}
@keyframes drift-1 {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}
@keyframes drift-2 {
  from { transform: translate3d(0,0,0) scale(1.05); }
  to   { transform: translate3d(-7vw, -4vh, 0) scale(0.92); }
}

/* ── B. ПОЛЕ ЗВЁЗД (canvas рисует cosmos.js) ─────────────────────────────────
   Мерцающие точки + лёгкий параллакс при скролле. Сам canvas позиционируем.
   На СВЕТЛОЙ ауре белые точки невидимы → cosmos.js рисует ТЁМНЫЕ звёзды. */
.cosmos-stars {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
}

/* ── B2. ВПЛЕТЁННЫЕ ЗВЁЗДЫ / ОРБИТЫ / ПЛАНЕТЫ-ОРБЫ (мандат владельца) ──────────
   «Космическая история» прямо в фоне: тонкие орбитальные кольца + планеты-орбы +
   мелкие звёзды-искры. Чистый CSS/SVG-слой, поверх ауры, под контентом.
   Звёзды тёмные/цветные (на свету видны). Гаснет/замирает при reduced-motion. */
.cosmos-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cosmos-sky .orbit {
  position: absolute; border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.10);
}
.cosmos-sky .orbit-1 { width: 86vw; height: 86vw; left: -8vw;  top: -22vh; transform: rotate(-12deg); }
.cosmos-sky .orbit-2 { width: 64vw; height: 64vw; right: -18vw; top: 34vh; border-color: rgba(255, 200, 230, 0.10); }
/* планета-орб на орбите — НАСТОЯЩИЙ глянцевый 3D-PNG (не плоский CSS-круг).
   Эталон: глянцевые орбы, плавающие по краям главной (home-aura-gradient.png). */
.cosmos-sky .planet {
  position: absolute; border-radius: 50%;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(var(--glow-violet));
  animation: float-soft 11s var(--ease-out) infinite alternate;
}
.cosmos-sky .planet-1 {
  width: 64px; height: 64px; left: 76vw; top: 13vh;
  background-image: url("../assets/aura/orb-sun.png");
  filter: drop-shadow(var(--glow-gold));
}
.cosmos-sky .planet-2 {
  width: 44px; height: 44px; left: 8vw; top: 28vh;
  background-image: url("../assets/aura/orb-violet.png");
  animation-duration: 14s;
}
.cosmos-sky .planet-3 {
  width: 34px; height: 34px; left: 84vw; top: 64vh;
  background-image: url("../assets/aura/orb-rising.png");
  filter: drop-shadow(var(--glow-coral));
  animation-duration: 9s;
}
/* мелкие звёзды-искры (4-конечные точки) — СВЕТЛЫЕ на тёмной ауре */
.cosmos-sky .spark {
  position: absolute; width: 6px; height: 6px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.95) 1.5px, transparent 2px);
  animation: twinkle 4s var(--ease-out) infinite;
}
.cosmos-sky .spark::before,
.cosmos-sky .spark::after {
  content: ""; position: absolute; inset: 0; background: inherit;
}
@keyframes float-soft {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-10px, 14px, 0); }
}

/* ── C. ЖИВЫЕ ИКОНКИ ──────────────────────────────────────────────────────────
   Иконка-«звезда»/планета не статична: медленно мерцает (twinkle) в покое,
   и «вспыхивает» (pulse) при тапе по родителю. */
.ico { display: inline-flex; vertical-align: middle; }
.ico-twinkle {
  animation: twinkle 4s var(--ease-out) infinite;
  transform-origin: center;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.85; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;    transform: scale(1.08) rotate(8deg); }
}
/* Орбита (для лоадера «звёзды совещаются») */
.ico-orbit { animation: orbit 3.2s linear infinite; transform-origin: center; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* ── D. МИКРО-ИНТЕРАКЦИИ ──────────────────────────────────────────────────────
   Tap по любой интерактивной поверхности: лёгкий «push» внутрь (scale 0.97),
   возврат пружиной. Никакого сдвига соседей (только transform). */
.tap { transition: transform var(--d-fast) var(--ease-spring),
                    box-shadow var(--d-base) var(--ease-out),
                    border-color var(--d-base) var(--ease-out); }
.tap:active { transform: scale(0.97); }

/* ════════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТЫ
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Стеклянная карточка (базовый организм) — СВЕТЛЫЙ frosted на ярком меше ──── */
.glass {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* ── Заголовок-display ───────────────────────────────────────────────────────── */
.display {
  font-size: var(--t-30); font-weight: 700; line-height: 1.12;
  letter-spacing: -0.02em; color: var(--ink-100);
  margin: 0 0 var(--s-2);
}
.display .accent {
  background: linear-gradient(120deg, var(--violet-600), var(--nebula-500) 60%, var(--gold-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { font-size: var(--t-16); line-height: 1.5; color: var(--ink-300);
        max-width: 38ch; margin: 0; }

/* ── Цифры (округлые, моноширинные по ширине) ───────────────────────────────── */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums;
       font-feature-settings: "tnum"; }

/* ── Primary-кнопка с тёплым glow ─────────────────────────────────────────────
   (Фоллбэк-кнопка вне Telegram. В Telegram — нативная MainButton.) */
/* ЕДИНЫЙ primary-CTA — ОДИН стиль на всё приложение (закон консистентности).
   Сплошной фирменный фиолет + мягкий glow на свету. Никаких разных цветов
   кнопок по строкам/экранам. Поп-герой = модификатор .is-pop (ниже). */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); width: 100%;
  min-height: 52px; padding: var(--s-3) var(--s-6);
  font: 700 var(--t-16)/1 var(--font-sans); letter-spacing: -0.01em;
  color: var(--act-ink); border: 0; border-radius: var(--r-md); cursor: pointer;
  background: var(--act-bg);
  box-shadow: var(--glow-violet);
  transition: filter var(--d-fast) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.cta:hover { filter: brightness(1.06); }
.cta:active { filter: brightness(0.94); }
.cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet-500) 45%, transparent),
              var(--glow-violet);
}
.cta:disabled, .cta[disabled] {
  filter: grayscale(0.4); opacity: 0.5; cursor: not-allowed; box-shadow: none;
}
.cta-ghost {
  background: var(--canvas-veil); color: var(--ink-100);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none; font-weight: 600;
}
.cta-ghost:hover { background: var(--canvas-veil-strong); }
.cta-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet-500) 35%, transparent);
}

/* ── Вход экрана / появление разбора (моменты-радости) ───────────────────────── */
.enter { animation: enter-up var(--d-slow) var(--ease-spring) both; }
.enter-stagger > * { animation: enter-up var(--d-slow) var(--ease-spring) both; }
.enter-stagger > *:nth-child(1) { animation-delay: 40ms; }
.enter-stagger > *:nth-child(2) { animation-delay: 90ms; }
.enter-stagger > *:nth-child(3) { animation-delay: 140ms; }
.enter-stagger > *:nth-child(4) { animation-delay: 190ms; }
.enter-stagger > *:nth-child(5) { animation-delay: 240ms; }
@keyframes enter-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — движение деградирует, СМЫСЛ остаётся
   Дыхание/мерцание/шиммер/параллакс выключаются. Состояния карточек
   по-прежнему различимы (цвет+иконка+текст — статичны). Вход = мгновенный.
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body.cosmos,
  .cosmos-bg .blob,
  .cosmos-sky .planet, .cosmos-sky .spark,
  .ico-twinkle, .ico-orbit,
  .yd-card.is-generating::after,
  .enter, .enter-stagger > * {
    animation: none !important;
  }
  /* статус «готовится» при reduced-motion — статичная видимая точка, не пульс */
  .yd-card.is-generating::after { opacity: 1 !important; transform: none !important; }
  .tap { transition: none; }
  .enter, .enter-stagger > * { opacity: 1; transform: none; }
  /* аура остаётся (статичный яркий кадр), движение тона/звёзд замирает.
     генерация без шиммера всё равно читается чипом «Генерируется…» */
}


/* ════════════════════════════════════════════════════════════════════════════
   ЭКРАНЫ ПРИЛОЖЕНИЯ (дом «Я», форма, загрузка, разбор) — прод, не витрина
   ════════════════════════════════════════════════════════════════════════════ */

/* Форма на светлой ауре: поля — белая вуаль с фиолетовой обводкой (видимы). */
.cosmos .form input,
.cosmos .form select,
.cosmos #time {
  background: var(--canvas-veil-strong);
  border: 1px solid color-mix(in srgb, var(--violet-500) 22%, transparent);
  color: var(--ink-100);
  border-radius: var(--r-sm);
}
.cosmos .form input::placeholder { color: var(--ink-500); }
.cosmos .form input:focus-visible,
.cosmos .form select:focus-visible,
.cosmos #time:focus-visible {
  border-color: var(--violet-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet-500) 26%, transparent);
}
.cosmos .form label { color: var(--ink-500); }
.cosmos .head { margin-bottom: var(--s-6); }
.cosmos .head .lede { margin-top: var(--s-2); }

/* ════════════════════════════════════════════════════════════════════════════
   ДОМ «Я» — 4 СЛОЯ ПО УБЫВАНИЮ ВЕСА (primary > secondary > tertiary)
   Канон: визуальная иерархия размером/весом/контрастом (Refactoring UI),
   один доминантный элемент (Слой 2). Ритм держим МЕЖДУ слоями (большой margin),
   внутри слоёв padding скромнее (whitespace-balance). Меньше glass-карт одного
   ранга, меньше орбов, меньше дублей «→».
   ════════════════════════════════════════════════════════════════════════════ */

/* ── СЛОЙ 1 · Идентичность: тихая справочная СТРОКА (не герой) ───────────── */
.id-strip {
  display: flex; align-items: center; gap: var(--s-3);
  margin: var(--s-2) 0 var(--s-6);
}
.id-text { flex: 1 1 auto; min-width: 0; }
.id-name { font-size: var(--t-20); line-height: 1.1; margin: 0; }
.id-meta {
  margin: 2px 0 0; font-size: var(--t-14); color: var(--ink-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.id-edit {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--glass-fill); border: var(--glass-border); color: var(--ink-300);
  cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ════════════════════════════════════════════════════════════════════════════
   ТАБ-БАР — постоянная нижняя навигация app (виден только на 3 вкладках).
   Канон §9: bottom-nav ≤5, иконка+подпись, активная подсвечена (не только цветом).
   Фикс внизу, safe-area под gesture-bar. 3 равные зоны, тап-цель крупная.
   Финальный candy-вид задаёт pop.css. ═══════════════════════════════════════ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; align-items: stretch;
  padding: 6px 8px calc(env(safe-area-inset-bottom) + 6px);
  background: color-mix(in srgb, var(--canvas-veil) 92%, transparent);
  border-top: var(--glass-border);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.tabbar[hidden] { display: none; }
.tab {
  flex: 1 1 0; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-500); font-size: 11px; font-weight: 700; letter-spacing: -.01em;
}
.tab .tab-ic { display: block; }
.tab.is-active { color: var(--violet-300); }
.tab:focus-visible {
  outline: none; border-radius: var(--r-md);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet-400) 45%, transparent);
}

/* Вкладки-экраны: запас снизу, чтобы контент не уезжал под таб-бар. */
.view--tab { padding-bottom: calc(env(safe-area-inset-bottom) + 76px); }

/* ════════════════════════════════════════════════════════════════════════════
   ВКЛАДКА «ГОД» — ИММЕРСИВНЫЙ герой на высоту вьюпорта.
   year-stage держит экран центром, дек других лет — горизонтальный флик снизу.
   Доминанта одна: огромное число года (размер→вес→цвет). ════════════════════ */
.view--year {
  min-height: 100dvh; display: flex; flex-direction: column;
  padding-top: calc(env(safe-area-inset-top) + var(--s-2));
}
.home-greeting {
  margin: 0; font-size: var(--t-16); font-weight: 600; color: var(--ink-300);
}
.home-greeting:empty { display: none; }

/* ГЕРОЙ — забирает свободную высоту, год по центру. */
.year-stage {
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--s-3); padding: var(--s-6) var(--s-2);
}
.year-stage .now-glow {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  width: 60vw; max-width: 320px; aspect-ratio: 1; border-radius: var(--r-full);
  pointer-events: none;
  background: radial-gradient(circle, rgba(167,139,250,0.40), transparent 68%);
}
.now-kicker {
  font-size: var(--t-12); font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--violet-300);
}
.now-year {
  font-size: clamp(76px, 24vw, 132px); font-weight: 800; line-height: .92;
  letter-spacing: -.04em; color: var(--ink-100);
  font-variant-numeric: tabular-nums; max-width: 100%;
}
.now-teaser {
  margin: 0; max-width: 32ch; font-size: var(--t-16); line-height: 1.45;
  color: var(--ink-300);
}
.now-open { margin-top: var(--s-3); min-width: 220px; }

/* ДЕК ДРУГИХ ЛЕТ — горизонтальный scroll-snap флик внизу экрана. */
.deck-wrap { flex: none; margin-top: var(--s-4); }
.deck-label {
  display: block; margin: 0 0 var(--s-2) 2px;
  font-size: var(--t-12); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-500);
}
.year-deck {
  display: flex; gap: var(--s-3); overflow-x: auto;
  padding: 2px 2px var(--s-2);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.year-deck::-webkit-scrollbar { display: none; }
.year-deck:empty { display: none; }

/* КАРТА ГОДА — компактная, год + строка-состояние. Состояния различимы
   формой+цветом+иконкой (не цветом одним). */
.yd-card {
  position: relative; flex: none; scroll-snap-align: start;
  width: 104px; min-height: 96px; padding: var(--s-3) var(--s-3) var(--s-2);
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: var(--r-lg); cursor: pointer; text-align: left;
  font: 800 var(--t-30)/1 var(--font-num); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; color: var(--ink-300);
  background: var(--canvas-veil); border: var(--glass-border);
}
.yd-card .yd-sub {
  font: 600 var(--t-12)/1.25 var(--font-sans); letter-spacing: 0;
  color: var(--ink-500); white-space: normal;
}
/* (a) ГОТОВ / ДОСТУПЕН — «звезда зажглась»: тёплая заливка + точка-маркер */
.yd-card.is-ready { color: var(--ink-100); border-color: rgba(251,205,114,.5); background: rgba(251,205,114,.16); }
.yd-card.is-ready::after {
  content: ""; position: absolute; top: var(--s-3); right: var(--s-3);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-500); box-shadow: var(--glow-gold);
}
/* (b) НЕ СОЗДАН — тихий пунктир (приглашение создать) */
.yd-card.is-empty { background: transparent; border-style: dashed; border-color: rgba(167,139,250,.4); color: var(--ink-500); }
/* (c) ПО ПОДПИСКЕ — приглушён + замок (не только цвет) */
.yd-card.is-locked { opacity: .72; color: var(--ink-500); }
.yd-card.is-locked::after {
  content: ""; position: absolute; top: var(--s-3); right: var(--s-3);
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .8;
}
/* (d) ГОТОВИТСЯ — тихий пульс, не кликабелен */
.yd-card.is-generating { cursor: default; color: var(--violet-300); border-color: rgba(167,139,250,.4); }
.yd-card.is-generating::after {
  content: ""; position: absolute; top: var(--s-3); right: var(--s-3);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet-400); animation: yd-pulse 1.6s var(--ease-out) infinite;
}
@keyframes yd-pulse { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.yd-card:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet-400) 45%, transparent);
}

/* Сеть упала: объяснение + действие, не пустота. */
.years-empty {
  text-align: center; padding: var(--s-6) var(--s-4);
  border-radius: var(--r-lg); border: 1px dashed rgba(167,139,250,0.30);
  background: var(--canvas-veil);
}
.years-empty-t { font-size: var(--t-16); font-weight: 700; color: var(--ink-100); margin: 0; }
.years-empty-s { font-size: var(--t-14); color: var(--ink-500); margin: 6px 0 var(--s-4); }

/* ── СЛОЙ 4 · Заголовок раздела вторичных входов ────────────────────────── */
.sub-title {
  font-size: var(--t-18); margin: var(--s-8) 0 var(--s-3);
  color: var(--ink-300);
}

/* Вторичные входы — ТОНКИЕ строки (не full-width glass-баннеры).
   Тонкий разделитель сверху + цветная иконка-«корешок» слева. Разный акцент:
   тёплый (Год силы) vs холодный (Пифагор) — чтобы не были близнецами. */
.entry-row {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-3) 2px; text-align: left; cursor: pointer;
  background: transparent; border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.entry-row:first-of-type { border-top: 0; }
.entry-ic {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-md);
  display: grid; place-items: center;
}
.entry-row--warm .entry-ic { color: var(--gold-400); background: rgba(245,184,64,0.12); }
.entry-row--cool .entry-ic { color: var(--aurora-cyan); background: rgba(90,209,230,0.12); }
.entry-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.entry-title { font-size: var(--t-16); font-weight: 700; color: var(--ink-100); line-height: 1.2; }
.entry-sub { font-size: var(--t-12); color: var(--ink-500); margin-top: 1px; }
.entry-go { flex: none; font-size: var(--t-18); color: var(--ink-500); }
.entry-row:focus-visible {
  outline: none; border-radius: var(--r-md);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet-400) 45%, transparent);
}

/* Периоды — отдельные входы (НЕ фильтр шкалы): две спокойные пилюли. */
.period-row { display: flex; gap: var(--s-2); margin-top: var(--s-4); }
.period-btn {
  flex: 1 1 0; padding: 11px 14px; border-radius: var(--r-full);
  font-size: var(--t-14); font-weight: 700; cursor: pointer;
  background: var(--canvas-veil); border: var(--glass-border); color: var(--ink-300);
}
.period-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet-400) 45%, transparent);
}

/* ── Загрузка: момент-радость ───────────────────────────────────────────── */
.loading-stage {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-3); margin-top: var(--s-16);
}
.orbit-wrap { position: relative; width: 96px; height: 96px; }
.orbit-star { position: absolute; inset: 0; margin: auto; }
.loading-title { font-size: var(--t-20); margin: var(--s-2) 0 0; }
.loading-sub { margin: 0 auto; }

/* ── Разбор: сканируемый, живой ─────────────────────────────────────────── */
.result-chip { margin-bottom: var(--s-3); }

/* Базовый ритм чтения (общий для блоков и режима стрима): ≤60ch, lh 1.6, не чисто-белый. */
.reading { color: var(--ink-300); }
.reading p { margin: 0 0 var(--s-3); line-height: 1.6; font-size: var(--t-16); max-width: 60ch; }
.reading strong { color: var(--ink-100); font-weight: 600; }
.reading em { color: var(--ink-100); font-style: italic; }
.reading ul { margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.reading li {
  position: relative; padding-left: 24px; margin-bottom: var(--s-2);
  line-height: 1.55; font-size: var(--t-16); max-width: 58ch;
}
.reading li::before {                 /* ✦-якорь вместо буллета */
  content: "✦"; position: absolute; left: 2px; top: 0;
  color: var(--gold-300); font-size: var(--t-12); line-height: 1.6;
}
/* h4 = подзаголовок ВНУТРИ секции (### в markdown) */
.reading h4 {
  margin: var(--s-4) 0 var(--s-2); font-size: var(--t-16);
  color: var(--gold-300); font-weight: 600;
}

/* Режим СТРИМА (текст ещё печатается): плоско, но с ритмом и заголовками-секций. */
.reading.is-flow h2 {
  margin: var(--s-6) 0 var(--s-2); font-size: var(--t-20);
  color: var(--ink-100); line-height: 1.2;
}
.reading.is-flow h2:first-child { margin-top: 0; }
.reading.is-flow h3 {
  margin: var(--s-4) 0 var(--s-2); font-size: var(--t-16); color: var(--gold-300);
}

/* ════════════════════════════════════════════════════════════════════════════
   БЛОЧНЫЙ РАЗБОР (после стрима) — HERO + секции-карточки + инсайт + шеринг.
   Цель: за 3 сек «это про меня», ноль «простыни», прогрессивное раскрытие.
   ════════════════════════════════════════════════════════════════════════════ */

/* — HERO-verdict: единственный доминант экрана, золотой ореол — */
.rs-hero {
  position: relative; text-align: center;
  padding: var(--s-6) var(--s-4) var(--s-6);
  margin: 0 0 var(--s-4); border-radius: var(--r-xl);
  background: linear-gradient(160deg,
      rgba(251, 205, 114, 0.20), rgba(167, 139, 250, 0.18) 60%, rgba(244, 154, 194, 0.16));
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(251, 205, 114, 0.36);
  box-shadow: var(--glow-gold), var(--shadow-card);
}
.rs-hero-orb {
  display: inline-grid; place-items: center; margin-bottom: var(--s-3);
  filter: drop-shadow(var(--glow-gold));
  animation: breathe 5s var(--ease-out) infinite;
}
.rs-hero-kicker {
  margin: 0 0 var(--s-2); font-size: var(--t-12); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-300);
}
.rs-hero-title {
  margin: 0 auto; max-width: 18ch;
  font-size: var(--t-24); font-weight: 700; line-height: 1.18;
  letter-spacing: -0.01em; color: var(--ink-100);
}
.rs-hero-verdict {
  margin: var(--s-3) auto 0; max-width: 30ch;
  font-size: var(--t-16); line-height: 1.5; color: var(--ink-300);
}

/* — Lead-подпись (шапка GPT: дата/знак) — тонко, под HERO — */
.rs-lead {
  margin: 0 0 var(--s-4); padding: 0 var(--s-2);
  font-size: var(--t-14); line-height: 1.5; color: var(--ink-500);
  max-width: 56ch;
}

/* — Дивайдер-созвездие между секциями — */
.rs-divider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: var(--s-3) 0; color: var(--ink-500); opacity: 0.5; font-size: var(--t-12);
}
.rs-divider span:nth-child(odd) { color: var(--gold-300); }

/* — Секция-карточка (glass) — ПОЛНОСТЬЮ РАСКРЫТА (без аккордеона, по пунктам) — */
/* ФИКС «воздуха»: разбор рендерится готовыми HTML-блоками (reading.js), а .result из
   styles.css ставит white-space:pre-wrap (для старого сырого текста GPT) — из-за этого
   переносы строк/отступы в шаблонах кода превращались в видимые пустые строки. Для
   структурного .reading возвращаем нормальный перенос (white-space наследуется вниз). */
.reading { white-space: normal; }

.rs-sec {
  margin: 0 0 var(--s-3); padding: var(--s-4);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(196,181,253,0.14);
}
.rs-sec-head {
  display: flex; align-items: flex-start; gap: var(--s-3);
  list-style: none;
}
/* Метка-надзаголовок (eyebrow): «ГЛАВНАЯ ХАРАКТЕРИСТИКА 2026 ГОДА» над крупным именем */
.rs-sec-eyebrow {
  margin: 0 0 4px; font-size: var(--t-12); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-300);
}

.rs-orb {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-full);
  display: grid; place-items: center; margin-top: 1px;
  background: radial-gradient(circle at 30% 30%, #ece3ff, #d3c2ff);
  border: 1px solid rgba(109,59,245,0.20);
}
.rs-orb svg { display: block; }
.rs-orb.orb-sun    { background: radial-gradient(circle at 30% 30%, #ffe9b0, #ffd081); border-color: rgba(224,146,12,0.45); box-shadow: var(--glow-gold); }
.rs-orb.orb-moon   { background: radial-gradient(circle at 30% 30%, #e2d4ff, #c3a8ff); border-color: rgba(109,59,245,0.42); box-shadow: var(--glow-violet); }
.rs-orb.orb-rise   { background: radial-gradient(circle at 30% 30%, #ffd6e7, #ffb3d3); border-color: rgba(224,65,140,0.42); }
.rs-orb.orb-gold   { background: radial-gradient(circle at 30% 30%, #ffe9b0, #ffd9a0); border-color: rgba(224,146,12,0.36); }
.rs-orb.orb-nebula { background: radial-gradient(circle at 30% 30%, #ffd6e7, #ffbcd8); border-color: rgba(224,65,140,0.38); }
.rs-orb.orb-violet { background: radial-gradient(circle at 30% 30%, #e2d4ff, #cdb8ff); border-color: rgba(109,59,245,0.34); }
.rs-orb.orb-aurora { background: radial-gradient(circle at 30% 30%, #c9eef6, #a5e0ec); border-color: rgba(29,143,176,0.40); }

.rs-sec-headtext { flex: 1 1 auto; min-width: 0; }
.rs-sec-title {
  margin: 0; font-size: var(--t-18); font-weight: 700; line-height: 1.25;
  color: var(--ink-100); letter-spacing: -0.01em;
}
.rs-sec-tags { margin: 8px 0 2px; }
.rs-sec-tags .sticker { font-size: 12px; padding: 4px 10px; box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(0,0,0,0.25); }
/* Тело секции — всегда видно, текст блока раскрыт по пунктам. */
.rs-sec-body { padding-top: var(--s-3); }
.rs-sec.glass .rs-sec-body { color: var(--ink-300); }
/* Активный (печатающийся) блок во время стрима — мигающий курсор в конце текста. */
.rs-sec.is-typing .rs-sec-body > :last-child::after {
  content: "▍"; display: inline-block; margin-left: 1px;
  color: var(--gold-300); animation: rs-caret 1s steps(1) infinite;
}
.rs-sec.is-typing .rs-sec-body:empty::after {
  content: "▍"; color: var(--gold-300); animation: rs-caret 1s steps(1) infinite;
}
@keyframes rs-caret { 50% { opacity: 0; } }

/* ════════════════════════════════════════════════════════════════════════════
   ТИПЫ СЕКЦИЙ — РИТМ/ИЕРАРХИЯ (ломаем «стену одинаковых белых коробок»)
   Единая DOM-структура (head/headtext/title/body — контракт стрима), РАЗНЫЙ вид.
   База здесь (тёмная аура); candy-перекрытия — в pop.css (выигрывают каскад).
   ════════════════════════════════════════════════════════════════════════════ */

/* (a) ИНСАЙТ-секция: итог/главное — ЦВЕТНОЙ блок, не белая карта. Доминанта ритма. */
.rs-sec--insight {
  background: linear-gradient(150deg, rgba(245,184,64,0.18), rgba(167,139,250,0.16) 70%);
  border: 1px solid rgba(245,184,64,0.34);
  border-left: 3px solid var(--gold-500);
  box-shadow: var(--glow-gold), var(--shadow-card);
}
.rs-sec--insight .rs-sec-body { color: var(--ink-100); }
.rs-sec--insight .rs-sec-body p { font-size: var(--t-18); line-height: 1.55; font-weight: 500; }

/* (b) PLAIN-секция: второстепенная справка — БЕЗ карточки, тонкий разделитель сверху. */
.rs-sec--plain {
  background: transparent !important;
  border: 0; box-shadow: none;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-radius: 0; padding: var(--s-4) var(--s-2) var(--s-2);
}
.rs-sec--plain .rs-orb {
  width: 34px; height: 34px; background: transparent; border: 0; box-shadow: none;
}
.rs-sec--plain .rs-sec-title { font-size: var(--t-16); color: var(--ink-300); }

/* (c) ЧЕК-ЛИСТ-секция: «что сделать дальше» — пункты с чек-иконкой, не сплошной список. */
.rs-check { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.rs-check li {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: 10px var(--s-3); margin: 0; max-width: 60ch;
  background: rgba(167,139,250,0.10);
  border: 1px solid rgba(167,139,250,0.20);
  border-radius: var(--r-md);
  line-height: 1.5; font-size: var(--t-16);
}
.rs-check li::before { content: none; }            /* гасим ✦-якорь общего .reading li */
.rs-check-mk {
  flex: none; display: inline-grid; place-items: center;
  width: 22px; height: 22px; margin-top: 1px; border-radius: var(--r-full);
  color: var(--violet-300);
  background: rgba(167,139,250,0.18);
  border: 1px solid rgba(167,139,250,0.36);
}

/* — ИЕРАРХИЯ ЗАГОЛОВКОВ: HERO крупнее (t-24), секции единым средним (t-18),
     plain — мельче (t-16). Один доминант на экране (HERO). — */
.rs-hero-title { font-size: var(--t-24); }
.rs-sec-title  { font-size: var(--t-18); }

/* — Инсайт-блок: одна сильная мысль, золотая рамка (родственник num-disclaimer) — */
.rs-insight {
  display: flex; gap: var(--s-3); align-items: flex-start;
  margin: 0 0 var(--s-4); padding: var(--s-4);
  background: linear-gradient(135deg, rgba(251, 205, 114, 0.16), rgba(28, 22, 56, 0.45));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(251, 205, 114, 0.30);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--r-md); box-shadow: var(--glow-gold);
}
.rs-insight-ic { flex: none; color: var(--gold-300); font-size: var(--t-18); line-height: 1.4; }
.rs-insight p {
  margin: 0; font-size: var(--t-16); line-height: 1.55; color: var(--ink-100);
  font-weight: 500; max-width: 52ch;
}

/* — Шеринг-мостик: эмоция «это про меня» → заметная зона (один CTA) — */
.rs-share {
  text-align: center; margin: var(--s-6) 0 var(--s-2);
  padding: var(--s-6) var(--s-4); border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(167, 139, 250, 0.20), rgba(244, 154, 194, 0.16));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(167, 139, 250, 0.30);
}
.rs-share-spark {
  display: inline-block; font-size: var(--t-24); color: var(--gold-300);
  margin-bottom: var(--s-2); animation: twinkle 4s var(--ease-out) infinite;
}
.rs-share-title { margin: 0 0 var(--s-1); font-size: var(--t-20); font-weight: 700; color: var(--ink-100); }
.rs-share-sub { margin: 0 auto var(--s-4); max-width: 32ch; font-size: var(--t-14); line-height: 1.5; color: var(--ink-300); }
.rs-share .cta { max-width: 360px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .rs-hero-orb, .rs-share-spark { animation: none; }
  .rs-sec-chev { transition: none; }
  .rs-sec[open] .rs-sec-body { animation: none; }
}

/* ── ПОП-АКЦЕНТЫ НА РАЗБОРЕ (подача, не смысл; текст блоков не трогаем) ─────────
   Кикер HERO → поп-lime капс; заголовок HERO → display-вес/трекинг; вокруг
   hero-орба — реел-кольцо. Шеринг-CTA → градиент-пилюля. Заливки секций/тела
   читаемости остаются космо-спокойными (контраст, ЗАКОН ТОНА). */
.rs-hero-kicker { color: var(--violet-600); font-weight: 800; letter-spacing: 0.12em; }
.rs-hero-title  { font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }

/* Реел-кольцо вокруг hero-орба: conic поп поверх золотого ореола. */
.rs-hero-orb { position: relative; }
.rs-hero-orb::before {
  content: ""; position: absolute; inset: -10px; z-index: -1;
  border-radius: var(--r-full);
  background: conic-gradient(from 0deg,
      var(--pop-coral), var(--pop-sun), var(--pop-lime),
      var(--pop-violet), var(--pop-coral));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  animation: reel-spin 7s linear infinite;
}

/* Шеринг-мостик: заголовок поп-весом + CTA становится градиент-пилюлей. */
.rs-share-title { font-weight: 800; letter-spacing: -0.02em; }
.rs-share .cta {
  background: var(--pop-cta);
  box-shadow: var(--glow-coral), var(--glow-violet);
  font-weight: 800; letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .rs-hero-orb::before { animation: none; }
}

/* ── Рефактор-разбор: секция полностью раскрыта (без аккордеона), eyebrow, стрим ─ */
.rs-sec--open { margin: 0 0 var(--s-3); padding: var(--s-4); }
.rs-sec--open .rs-sec-head { display: flex; align-items: flex-start; gap: var(--s-3); }
.rs-sec-eyebrow {
  margin: 0 0 2px; font-size: var(--t-12); font-weight: 800;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--violet-600);
}
/* «печатающаяся» секция во время стрима — мягкий мигающий курсор в конце тела */
.rs-sec.is-typing .rs-sec-body::after {
  content: "▍"; color: var(--violet-500); margin-left: 2px;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.rs-next { margin-top: var(--s-4); }
@media (prefers-reduced-motion: reduce) {
  .rs-sec.is-typing .rs-sec-body::after { animation: none; }
}

/* state-card (ошибка) — на стекле, эмодзи как живая иконка */
.cosmos .state-emoji { color: var(--gold-300); }

/* ── Онбординг / welcome ────────────────────────────────────────────────── */
.onb { min-height: 78vh; }
.onb-star { text-align: center; margin-top: var(--s-12); }
.onb-title { text-align: center; font-size: var(--t-30); line-height: 1.15; }
.onb-lede { text-align: center; margin: 0 auto; }
.onb-spacer { flex: 1 1 auto; min-height: var(--s-8); }
.onb-foot { text-align: center; font-size: var(--t-12); color: var(--ink-500); margin: var(--s-2) 0 0; }

/* ── Видимая навигация (не полагаемся на нативную Telegram-кнопку) ───────── */
.topnav {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 var(--s-4); padding: 8px 14px 8px 10px;
  background: var(--glass-fill); border: var(--glass-border);
  border-radius: var(--r-full); color: var(--ink-100);
  font: 600 var(--t-14)/1 var(--font-sans); cursor: pointer;
}
.topnav span { color: var(--gold-300); font-size: var(--t-16); }

/* ── Кнопки действий под разбором ───────────────────────────────────────── */
.result-actions {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-top: var(--s-6);
}
.result-actions .cta-ghost { width: 100%; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 var(--t-16)/1 var(--font-sans); border-radius: var(--r-md); cursor: pointer; }

/* ── Список «что посмотрим» на онбординге ───────────────────────────────── */
.onb-list {
  list-style: none; padding: 0; margin: var(--s-2) 0 0;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.onb-list li {
  position: relative; padding-left: 26px;
  color: var(--ink-300); font-size: var(--t-16); line-height: 1.4;
}
.onb-list li::before {
  content: "✦"; position: absolute; left: 4px; top: 0;
  color: var(--gold-300); font-size: var(--t-14);
}

/* ── Год силы: заметный градиентный баннер-хук, но компактный ────────────── */
.power-card {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  margin: 0 0 var(--s-6); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg); cursor: pointer; text-align: left;
  background: linear-gradient(120deg,
      rgba(251, 205, 114, 0.16), rgba(167, 139, 250, 0.16), rgba(244, 154, 194, 0.14));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(251, 205, 114, 0.34);
  box-shadow: var(--glow-soft);
}
.power-orb {
  flex: none; width: 46px; height: 46px; border-radius: var(--r-full);
  display: grid; place-items: center;
  /* глянцевый 3D-орб (PNG) вместо плоского круга; глиф поверх */
  background: url("../assets/aura/orb-sun.png") center/contain no-repeat;
  filter: drop-shadow(var(--glow-gold));
  animation: breathe 4.5s var(--ease-out) infinite;
}
.power-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.power-title { font: 700 var(--t-18)/1.15 var(--font-sans); color: var(--ink-100); }
.power-sub { font-size: var(--t-12); color: var(--ink-300); margin-top: 1px; }
/* Единая фиолетовая плашка-действие «Года силы» (без цветных скачков). */
.power-action {
  flex: none; padding: 7px 13px; border-radius: var(--r-full);
  font: 700 var(--t-14)/1 var(--font-sans); letter-spacing: -0.01em;
  background: var(--act-bg); color: var(--act-ink); box-shadow: var(--glow-violet);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) { .power-orb { animation: none; } }

/* ── Карточка-вход «Квадрат Пифагора» (вариант power-card, фиолет вместо золота) ─ */
.num-card { margin-top: var(--s-3); }
.num-orb {
  background: url("../assets/aura/orb-violet.png") center/contain no-repeat;
  filter: drop-shadow(var(--glow-violet));
}
/* (действие num-card наследует единую фиолетовую плашку .power-action) */

/* ── Экран «Квадрат Пифагора»: матрица 3×3 + линии ──────────────────────── */
.num-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2);
  margin: var(--s-6) 0 var(--s-4);
}
.num-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; aspect-ratio: 1; padding: var(--s-2);
  background: var(--glass-fill); border: var(--glass-border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); text-align: center;
}
.num-cell.is-empty { background: rgba(255, 255, 255, 0.02); border-style: dashed; }
.num-cell.is-dominant {
  background: linear-gradient(160deg, rgba(139, 108, 240, 0.32), rgba(124, 92, 224, 0.14));
  border-color: rgba(196, 181, 253, 0.55); box-shadow: var(--glow-violet);
}
.num-glyph { font: 700 var(--t-24)/1 var(--font-num); color: var(--ink-100); letter-spacing: -0.5px; }
.num-cell.is-empty .num-glyph { color: var(--ink-500); font-weight: 400; }
.num-name { font-size: 11px; line-height: 1.15; color: var(--ink-300); }
.num-level { font-size: 10px; color: var(--ink-500); }
.num-cell.is-dominant .num-level { color: var(--gold-300); }

.num-disclaimer {
  font-size: var(--t-12); line-height: 1.5; color: var(--ink-500);
  padding: var(--s-3); background: var(--canvas-veil);
  border-left: 2px solid var(--violet-500); border-radius: var(--r-sm);
  margin-bottom: var(--s-6);
}
.num-lines-title { font-size: var(--t-18); margin: 0 0 var(--s-3); }
.num-line {
  display: grid; grid-template-columns: auto auto; gap: 2px var(--s-3);
  align-items: baseline; padding: var(--s-3); margin-bottom: var(--s-2);
  border-radius: var(--r-md);
}
.num-line-name { font: 600 var(--t-16)/1.2 var(--font-sans); color: var(--ink-100); }
.num-line-lvl { font-size: var(--t-12); color: var(--violet-300); text-align: right; }
.num-line-meaning { grid-column: 1 / -1; font-size: var(--t-14); color: var(--ink-300); line-height: 1.4; }

/* Тап-разворот ячейки */
.num-cell.tap { cursor: pointer; }
.num-cell.is-selected { border-color: var(--violet-400); box-shadow: var(--glow-violet); }
.num-tap-hint { text-align: center; margin: calc(-1 * var(--s-2)) 0 var(--s-4); color: var(--ink-500); }
.num-detail { padding: var(--s-4); border-radius: var(--r-lg); margin-bottom: var(--s-6); }
.num-detail-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.num-detail-glyph {
  flex: none; min-width: 48px; height: 48px; padding: 0 var(--s-2);
  display: flex; align-items: center; justify-content: center;
  font: 700 var(--t-24)/1 var(--font-num); color: #2a1f55;
  background: linear-gradient(160deg, #d9c4ff, #a78bfa);
  border-radius: var(--r-md); box-shadow: var(--glow-violet);
}
.num-detail-name { font: 700 var(--t-18)/1.2 var(--font-sans); color: var(--ink-100); }
.num-detail-lvl { font-size: var(--t-12); color: var(--violet-300); }
.num-detail p, .num-full-item p { font-size: var(--t-16); line-height: 1.65; color: var(--ink-100); margin: 0 0 var(--s-3); }
.num-detail p:last-child, .num-full-item p:last-child { margin-bottom: 0; }

/* Рабочие числа — строка под датой (как в классическом раскладе) */
.num-working {
  display: flex; align-items: baseline; justify-content: center; gap: var(--s-3);
  margin: var(--s-2) 0 var(--s-4); padding: var(--s-3) var(--s-4);
  background: rgba(167, 139, 250, 0.08); border: var(--glass-border); border-radius: var(--r-md);
}
.num-working-label { font-size: var(--t-12); color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.5px; }
.num-working-vals { font: 700 var(--t-20)/1 var(--font-num); color: var(--violet-300); letter-spacing: 1px; }
.num-tap-hint { text-align: center; margin: 0 0 var(--s-4); color: var(--ink-500); }

/* Полный разбор — простыня по всем ячейкам и линиям, развёрнута сразу */
.num-full-item { padding: var(--s-4); border-radius: var(--r-lg); margin-bottom: var(--s-3); transition: box-shadow var(--d-base) var(--ease-out); }
.num-full-item.is-empty { border-style: dashed; }
.num-full-item.is-dominant { border-color: rgba(196, 181, 253, 0.45); }
.num-full-item.is-flash { box-shadow: var(--glow-violet); }
.num-full-item .num-detail-head { margin-bottom: var(--s-3); }
.num-full-item .num-detail-glyph { min-width: 44px; height: 44px; font-size: var(--t-20); }

/* Число судьбы (W2) — акцентный hero-блок */
.num-destiny {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-4); border-radius: var(--r-lg); margin-bottom: var(--s-6);
  background: linear-gradient(160deg, rgba(245,184,64,0.14), rgba(139,108,240,0.12));
  border: 1px solid rgba(245, 184, 64, 0.35); box-shadow: var(--glow-gold);
}
.num-destiny-badge {
  flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  font: 700 var(--t-30)/1 var(--font-num); color: var(--night-900);
  background: radial-gradient(circle at 35% 30%, var(--gold-300), var(--gold-500));
  border-radius: var(--r-md); box-shadow: var(--glow-gold);
}
.num-destiny-title { font: 700 var(--t-18)/1.2 var(--font-sans); color: var(--gold-300); margin-bottom: var(--s-2); }
.num-destiny-body p { font-size: var(--t-16); line-height: 1.65; color: var(--ink-100); margin: 0 0 var(--s-2); }
.num-destiny-body p:last-child { margin-bottom: 0; }


/* ════════════════════════════════════════════════════════════════════════════
   ПОП-СЛОЙ — ПЕРЕИСПОЛЬЗУЕМЫЕ КОМПОНЕНТЫ (Gen-Z акценты поверх космоса)
   Дизайн-система гибрида «космос + поп». Космо-база (ночь/орбиты/свечения/звёзды)
   уже задана выше — здесь ТОЛЬКО акцентный слой. Правило тона: поп в подаче,
   не в смысле; lime/coral — вспышки, не фон длинного текста.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── A. DISPLAY-ТИПОГРАФИКА (имитация Unbounded — БЕЗ веб-шрифтов) ─────────────
   Веб-шрифты в TMA запрещены (FOIT/вес/оффлайн). «Поп-герой» делаем на системном
   стеке: максимальный вес + плотный отрицательный трекинг + плотный leading.
   Это и есть «смелее типографика» без загрузки Unbounded. */
.pop-display {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.04em;     /* плотный трекинг — «сбитый» поп-герой */
  line-height: 1.02;
  color: var(--ink-100);
  text-wrap: balance;
}
/* Поп-акцент-текст: сочный градиент. На СВЕТЛОЙ ауре lime/sun слишком бледные
   для текста (провал контраста) → берём насыщенный violet→nebula→gold-gradient
   (звонко, но читаемо ≥3:1 для крупного display). */
.pop-accent {
  background: linear-gradient(110deg, var(--violet-600), var(--nebula-500) 55%, var(--gold-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Капс-кикер поп-стиля: жирный, разрядка, мелкий. На свету — насыщенный фиолет. */
.pop-kicker {
  font-size: var(--t-12); font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--violet-600);
}

/* ── B. СТИКЕР-НАКЛЕЙКА (главный заимствованный приём, из pop.css .sticker) ────
   «Налеплено сверху»: сочная заливка + БЕЛАЯ inset-обводка + лёгкий поворот +
   мягкая тень. Очень Gen-Z. По умолчанию — sun-заливка, тёмные чернила.
   Текст display-весом. Модификаторы цвета: .sticker--lime/coral/violet. */
.sticker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-full);
  font: 800 var(--t-14)/1 var(--font-sans); letter-spacing: -0.01em;
  color: var(--pop-ink);
  background: var(--pop-sun);
  /* двойная обводка: белая «вырубка» + тонкий внешний контур (как наклейка) */
  box-shadow: 0 0 0 3px #fff, 0 4px 14px rgba(0,0,0,0.28);
  transform: rotate(-3deg);
  transform-origin: center;
  white-space: nowrap;
}
.sticker--lime   { background: var(--pop-lime);   color: #14210a; }
.sticker--coral  { background: var(--pop-coral);  color: #fff; }
.sticker--violet { background: var(--pop-violet); color: #fff; }
.sticker--sun    { background: var(--pop-sun);    color: var(--pop-ink); }
.sticker--rot-2  { transform: rotate(4deg); }
.sticker--rot-3  { transform: rotate(-6deg); }
.sticker--flat   { transform: none; }            /* для плотных рядов */
.sticker .ico,
.sticker svg { width: 1em; height: 1em; }

/* ── C. КОЛЬЦО-«РЕЕЛ» вокруг орба (вайб pp-reel из BunnySplit) ─────────────────
   Conic-кольцо coral→violet→lime вокруг любого круглого орба. Ставится как
   ::before на обёртку .reel-ring (орб лежит внутри). Медленно вращается;
   гаснет при reduced-motion. */
.reel-ring {
  position: relative; display: inline-grid; place-items: center;
  isolation: isolate;
}
.reel-ring::before {
  content: ""; position: absolute; inset: -7px; z-index: -1;
  border-radius: var(--r-full);
  background: conic-gradient(from 0deg,
      var(--pop-coral), var(--pop-sun), var(--pop-lime),
      var(--pop-violet), var(--pop-coral));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: reel-spin 6s linear infinite;
}
@keyframes reel-spin { to { transform: rotate(360deg); } }

/* ── D. ГРАДИЕНТ-ПИЛЮЛЯ CTA (поверх базового .cta; вайб pp-btn-primary) ────────
   Модификатор .cta.is-pop: сочная заливка космос→поп + поп-glow. Базовая .cta
   (форма/размер/тач-таргет/фокус) НЕ переопределяется — только заливка. */
.cta.is-pop {
  background: var(--pop-cta);
  box-shadow: var(--glow-coral), var(--glow-violet);
  font-weight: 800; letter-spacing: -0.01em;
}
.cta.is-pop:hover { filter: brightness(1.06) saturate(1.05); }
/* Поп-ghost: прозрачная пилюля с поп-обводкой (вторичное действие). */
.cta-ghost.is-pop { border-color: rgba(255,94,126,0.45); color: var(--ink-100); }

/* ── E. ПОП-ЧИП (статус-наклейка, родственник .chip но звонче) ─────────────────
   Для статусов карточек и меток. Меньше стикера, без поворота по умолчанию. */
.chip.is-pop {
  background: var(--pop-grad); color: var(--pop-ink);
  border-color: transparent; font-weight: 800;
}
.chip.chip-lime  { background: var(--pop-lime);  color: #14210a; border-color: transparent; }
.chip.chip-coral { background: var(--pop-coral); color: #fff;    border-color: transparent; }

/* ── F. ПОП-ИСКРЫ (декор-точки lime/coral как у share-card minimalFocus) ───────
   Маленькие светящиеся точки-вспышки. Чисто декор → aria-hidden в разметке. */
.pop-spark {
  display: inline-block; width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--pop-lime); box-shadow: var(--glow-lime);
  vertical-align: middle;
}
.pop-spark--coral { background: var(--pop-coral); box-shadow: var(--glow-coral); }

@media (prefers-reduced-motion: reduce) {
  .reel-ring::before { animation: none; }
}

/* ── G. ПОП-ПОДАЧА ГЛАВНОЙ (поверх 3-state карточек; форма/иконка/текст целы) ───
   Color-not-only сохранён: состояния по-прежнему различимы орбом+текстом+рамкой.
   Поп — только «звонче» подача: display-вес заголовков, поп-чип «бесплатно»,
   стикер-вид у действия готовой карточки. */
.me-name { font-weight: 800; letter-spacing: -0.03em; }
.power-title { font-weight: 800; letter-spacing: -0.02em; }

/* ── Админка: сводка для владельца (KPI-плитки + список оплат) ─────────────
   Самодостаточно и устойчиво к candy-каскаду (pop.css): жёсткий 2-кол grid,
   явные цвета/иерархия (большое число → подпись → доп.), не зависит от .glass. */
#view-admin .admin-kpis {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px; margin: 16px auto 28px; max-width: 560px;
}
#view-admin .admin-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px; text-align: left;
  background: #fff; border: 1px solid rgba(20,20,20,.06);
  border-radius: 20px; box-shadow: 0 6px 20px rgba(40,30,80,.06);
}
#view-admin .admin-kpi-val {
  font: 800 30px/1.05 var(--font-num, inherit); color: #141414; letter-spacing: -0.02em;
}
#view-admin .admin-kpi-label { font-size: 14px; font-weight: 600; color: #43404D; }
#view-admin .admin-kpi-sub { font-size: 12px; color: #6B6770; }
#view-admin .admin-h2 { font-size: 18px; font-weight: 800; color: #141414; margin: 8px 0 12px; }
#view-admin .admin-payments { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
#view-admin .admin-pay {
  display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px;
  align-items: baseline; padding: 12px 16px; font-size: 14px;
  background: #fff; border: 1px solid rgba(20,20,20,.06);
  border-radius: 16px; box-shadow: 0 4px 14px rgba(40,30,80,.05);
}
#view-admin .admin-pay-id { color: #6B6770; font-size: 12px; }
#view-admin .admin-pay-kind { color: #43404D; }
#view-admin .admin-pay-stars { color: #6438E6; font-weight: 700; }
#view-admin .admin-pay-ts { grid-column: 2 / 4; color: #6B6770; font-size: 12px; }
#view-admin .admin-kpis, #view-admin .admin-payments, #view-admin #admin-sub { margin-left: auto; margin-right: auto; }

/* ── Пейволл-вилка: кастомная боттом-модалка (3 пути оплаты) ────────────────── */
.pw-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 14, 40, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  padding: 0 12px env(safe-area-inset-bottom, 12px);
}
.pw-overlay[hidden] { display: none; }
.pw-sheet {
  position: relative; width: 100%; max-width: 440px; margin-bottom: 12px;
  background: #fff; border-radius: 24px; padding: 22px 18px 18px;
  box-shadow: 0 -8px 40px rgba(30, 20, 60, .28);
  animation: pwUp .26s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes pwUp { from { transform: translateY(28px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pw-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: rgba(20, 20, 20, .06);
  color: #43404D; font-size: 20px; line-height: 1; cursor: pointer;
}
.pw-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; color: #141414; }
.pw-free { margin: 0 0 14px; font-size: 13px; color: #6B6770; }
.pw-opt {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  margin-bottom: 10px; padding: 14px 16px; border-radius: 16px; cursor: pointer;
  background: #fff; border: 1.5px solid rgba(20, 20, 20, .10);
}
.pw-opt-t { font-size: 15px; font-weight: 700; color: #141414; }
.pw-opt-s { font-size: 12.5px; color: #6B6770; }
.pw-opt--primary { border-color: #6438E6; background: linear-gradient(180deg, #f4efff, #fff); }
.pw-opt--primary .pw-opt-t { color: #6438E6; }
.pw-opt--gift { border-color: #2E9E5B; background: linear-gradient(180deg, #effaf2, #fff); }
.pw-opt--gift .pw-opt-t { color: #1F8F4D; }
.pw-opt--ghost { border-style: dashed; }
@media (hover: hover) { .pw-opt:hover { box-shadow: 0 4px 14px rgba(40, 30, 80, .08); } }

/* ── Лайк/дизлайк под разбором (сигнал качества → корпус для своего движка) ── */
.rs-fb { margin: 22px 4px 8px; text-align: center; }
.rs-fb-note { margin: 0 0 10px; font-size: var(--t-14); color: var(--ink-500); }
.rs-fb-btns { display: inline-flex; gap: 12px; }
.rs-fb-btn {
  width: 56px; height: 46px; font-size: 22px; line-height: 1;
  border-radius: 14px; background: var(--canvas-veil); border: var(--glass-border);
  cursor: pointer; opacity: .82; filter: grayscale(.35);
  transition: transform .12s ease, border-color .15s ease, background .15s ease, opacity .15s ease, filter .15s ease;
}
.rs-fb-btn:active { transform: scale(.93); }
.rs-fb-btn.is-on { opacity: 1; filter: none; border-color: var(--gold-500);
  background: color-mix(in srgb, var(--gold-500) 16%, transparent); }
.rs-fb-btn[data-fb="down"].is-on { border-color: var(--ink-500);
  background: color-mix(in srgb, var(--ink-500) 14%, transparent); }