/*
 * Вижу · визуальный слой v2, выпуск 3 (28.09.2026).
 * Подключается последним стилем в <head> каждой HTML-оболочки и меняет только
 * оформление: шрифты, золото, типографику, первый экран, светлую тему, движение
 * и отрисовку глаз. Разметка и логика приложения не затрагиваются.
 */

/* ---------- 1. Шрифты: Lora (жирный курсив) + Roboto ---------- */
/*
 * Выбор владельца (28.09.2026) из лаборатории шрифтов: заголовки — Lora
 * жирным курсивом, подзаголовки — Roboto 500, текст и кнопки — Roboto.
 * Lora подключена одним начертанием (Bold Italic): любой заголовок сайта
 * выглядит одинаково, какой бы вес ни стоял в старых стилях.
 */
@font-face {
  font-family: 'Viju Lora';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/lora-bold-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Viju Lora';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/lora-bold-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Viju Lora';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/lora-bold-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Viju Lora';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/lora-bold-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Viju Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/roboto-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Viju Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Старые имена семейств остаются в хешированных чанках и инлайн-стилях.
 * Браузер собирает шрифты одного семейства с одинаковым диапазоном весов в одну
 * группу и берёт объявленный последним. Поэтому подмена повторяет диапазоны
 * исходных правил (Manrope 300–700, Cormorant 400–700), а крайние веса
 * закрыты отдельными правилами. Lora на 22% шире Cormorant: 82% сохраняют
 * ширину старых заголовков.
 */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/roboto-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/roboto-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 100 299; font-display: swap; src: url('/fonts/roboto-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 100 299; font-display: swap; src: url('/fonts/roboto-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 701 900; font-display: swap; src: url('/fonts/roboto-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 701 900; font-display: swap; src: url('/fonts/roboto-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 700; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 700; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 100 399; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 100 399; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 701 900; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 701 900; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400 700; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400 700; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 100 399; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 100 399; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 701 900; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 701 900; font-display: swap; size-adjust: 82%; src: url('/fonts/lora-bold-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 2. Токены: одна шкала золота и движения ---------- */
:root {
  --viju-gold-50: #fbf3dc;
  --viju-gold-100: #f7e9c4;
  --viju-gold-200: #f1d9a0;
  --viju-gold-300: #e4bf6c;
  --viju-gold-400: #d8ae58;
  --viju-gold-500: #c4933f;
  --viju-gold-600: #9e7429;
  --viju-gold-700: #7c5a1a;
  --viju-gold-800: #5f440f;
  --viju-gold-900: #3a2a09;
  --viju-gold-gradient: linear-gradient(180deg, var(--viju-gold-200) 0%, var(--viju-gold-300) 55%, var(--viju-gold-400) 100%);
  --viju-gold-gradient-light: linear-gradient(180deg, #8f6a22 0%, var(--viju-gold-700) 100%);

  --viju-font-body: 'Viju Roboto', Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --viju-font-display: 'Viju Lora', Georgia, 'Times New Roman', serif;

  --motion-instant: 120ms;
  --motion-quick: 200ms;
  --motion-base: 320ms;
  --motion-slow: 560ms;
  --motion-signature: 1100ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);

  /* Жёлтые и янтарные утилиты Tailwind превращаются в ту же шкалу золота. */
  --color-yellow-50: var(--viju-gold-50);
  --color-yellow-100: var(--viju-gold-100);
  --color-yellow-200: var(--viju-gold-200);
  --color-yellow-300: #eacb86;
  --color-yellow-400: var(--viju-gold-300);
  --color-yellow-500: var(--viju-gold-400);
  --color-yellow-600: var(--viju-gold-500);
  --color-yellow-700: var(--viju-gold-600);
  --color-yellow-800: var(--viju-gold-700);
  --color-yellow-900: var(--viju-gold-800);
  --color-yellow-950: var(--viju-gold-900);
  --color-amber-50: var(--viju-gold-50);
  --color-amber-100: var(--viju-gold-100);
  --color-amber-200: var(--viju-gold-200);
  --color-amber-300: #eacb86;
  --color-amber-400: var(--viju-gold-300);
  --color-amber-500: var(--viju-gold-400);
  --color-amber-600: var(--viju-gold-500);
  --color-amber-700: var(--viju-gold-600);
  --color-amber-800: var(--viju-gold-700);
  --color-amber-900: var(--viju-gold-800);
  --color-amber-950: var(--viju-gold-900);
}
:root, body.theme-dark {
  --viju-primary: var(--viju-gold-300);
  --viju-primaryHover: var(--viju-gold-200);
  --viju-accent: var(--viju-gold-300);
  --viju-accentLight: var(--viju-gold-200);
  --viju-headerGold: var(--viju-gold-300);
  --color-header-gold: var(--viju-gold-300);
  --color-primary: var(--viju-gold-300);
  --color-primary-hover: var(--viju-gold-200);
  --color-accent: var(--viju-gold-300);
  --color-accent-light: var(--viju-gold-200);
}
body.theme-light {
  --viju-primary: var(--viju-gold-700);
  --viju-primaryHover: var(--viju-gold-800);
  --viju-accent: var(--viju-gold-700);
  --viju-accentLight: var(--viju-gold-600);
  --viju-headerGold: var(--viju-gold-700);
  --color-header-gold: var(--viju-gold-700);
  --color-primary: var(--viju-gold-700);
  --color-primary-hover: var(--viju-gold-800);
  --color-accent: var(--viju-gold-700);
  --color-accent-light: var(--viju-gold-600);
}

/* ---------- 3. Базовая типографика ---------- */
body {
  font-family: var(--viju-font-body);
  font-feature-settings: 'kern' 1;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { text-wrap: balance; }
.font-serif { font-family: var(--viju-font-body); }

/* Ничего мельче 12 px: подписи, метки полей и счётчики. */
.text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[11px\] { font-size: 12px; line-height: 1.35; }
/* Компоненты из ленивых чанков подключаются позже этого файла: им нужен более сильный селектор. */
html body .tariff-allowance span, html body .tariff-allowance b { font-size: 12px; }
html body .referral-invite__offer strong, html body .referral-invite__signin { font-size: 12px; }
html body .mobile-bottom-nav__label { font-size: 12px; letter-spacing: -0.015em; }
/* Подписи из ленивых чанков, найденные замером (аудит 2.0). Плашка «Новинка» остаётся как есть. */
html body .section-cards-hub__card-eyebrow, html body .matrix-line__eyebrow, html body .year-arcana__role,
html body .matrix-age__period-navigation p > span, html body .matrix-section-heading > p, html body .psychomatrix-grid-heading span,
html body .viju-footer__disclaimer p, html body .viju-footer__copyright p, html body .viju-footer__copyright span, html body .oracle-entry__description,
html body .matrix-navigation button, html body .psychomatrix-cell .cell-title span { font-size: 12px !important; }
html body .section-cards-hub__card-description, html body .section-cards-hub__card-action { font-size: 13px !important; }
html body .tarot-pilot-entry__button { font-size: 14px !important; }
.med-nav-new--mobile, .med-nav-new--desktop { font-size: 11px; }

/* Кнопки обычным регистром: так кириллица читается быстрее. */
.btn-gold.uppercase, #tour-form-submit-btn { text-transform: none; letter-spacing: 0.01em; }
.btn-gold, .gender-pill-active {
  color: #1a1206;
  background: var(--viju-gold-gradient);
  box-shadow: 0 6px 18px rgba(196, 147, 63, 0.22);
}
.btn-gold:hover:not(:disabled) { filter: brightness(1.05); box-shadow: 0 8px 22px rgba(196, 147, 63, 0.3); }
body.theme-light .btn-gold, body.theme-light .gender-pill-active {
  color: #fffaf0;
  background: var(--viju-gold-gradient-light);
  box-shadow: 0 6px 16px rgba(124, 90, 26, 0.2);
}
.app-header-tariffs { color: #1a1206; box-shadow: 0 4px 14px rgba(196, 147, 63, 0.25); }

/* Заголовки блоков одного уровня получают один голос. */
html body .today-experience__spheres strong {
  font-family: var(--viju-font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}
html body .today-referral-plaque .referral-invite__content h3,
html body .referral-invite__content h3 {
  font-family: var(--viju-font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
}
html body .section-cards-hub__card-copy > strong { letter-spacing: 0; }
/* Lora шире Cormorant: заголовок карточки раздела помещается в одну строку */
@media (max-width: 767px) { html body .section-cards-hub__card-copy > strong { font-size: 25px; } }

/* Хаб «Развитие»: заголовки записаны капсом, приводим к обычному регистру. */
html body .development-hub__launcher-title { display: block; text-transform: lowercase; letter-spacing: 0; }
html body .development-hub__launcher-title::first-letter { text-transform: uppercase; }

/* Переключатель «Месяц / Год» в тарифах — в золоте вместо индиго. */
html body .tariff-cycle { border-color: rgba(228, 191, 108, 0.32); }
html body .tariff-cycle button[aria-pressed="true"] {
  background: var(--viju-gold-gradient);
  color: #1a1206;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(196, 147, 63, 0.25);
}

/* ---------- 4. Первый экран: знак «глаза + ВИЖУ» и форма ---------- */
.home-logo-header .logo-text, .logo-text {
  font-family: var(--viju-font-display);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  filter: none;
  background: linear-gradient(180deg, var(--viju-gold-100) 0%, var(--viju-gold-300) 48%, var(--viju-gold-500) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-logo-header .logo-text {
  font-size: clamp(2.4rem, 11vw, 4.2rem);
  line-height: 1;
  background:
    linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255, 250, 235, 0.9) 50%, transparent 60%, transparent 100%) no-repeat,
    linear-gradient(180deg, var(--viju-gold-100) 0%, var(--viju-gold-300) 48%, var(--viju-gold-500) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
}
body.theme-light .home-logo-header .logo-text, body.theme-light .logo-text {
  filter: none;
  background: linear-gradient(180deg, #9a6d22 0%, var(--viju-gold-700) 55%, var(--viju-gold-800) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.home-logo-header { padding-top: clamp(0.25rem, 1.2vw, 0.75rem); }

/* Заголовок «Собрать профиль» дублировал кнопку: остаётся только для экранных чтецов. */
#tour-profile-form > div:first-child > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#tour-profile-form > div:first-child { margin-bottom: 1.25rem; }
#tour-profile-form .input-form__support {
  display: block;
  margin: 0 auto;
  max-width: 320px;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}
#tour-profile-form .input-form__support > span { display: inline; }
#tour-profile-form .input-form__support-heart { margin-left: 5px; }
.input-form__support-heart { color: var(--viju-gold-300); text-shadow: none; }
body.theme-light .input-form__support-heart { color: var(--viju-gold-600); }
#tour-profile-form label {
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 600;
}
/* Выбор темы остаётся на первом экране, но выглядит частью формы. */
#tour-profile-form button .tracking-wider.uppercase { text-transform: none; letter-spacing: 0.01em; font-size: 14px; }

/* ---------- 5. Светлая тема ---------- */
html body.theme-light .section-detail-shell__back {
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(124, 90, 26, 0.28);
  color: var(--viju-gold-700);
  box-shadow: 0 4px 14px rgba(52, 40, 20, 0.08);
}
html body.theme-light .referral-invite__signin {
  color: var(--viju-gold-700);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(124, 90, 26, 0.35);
  opacity: 1;
}
html body.theme-light .referral-invite__signin svg { color: var(--viju-gold-700); stroke: currentColor; }

/* ---------- 6. Подвал ---------- */
label.viju-motion-setting {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--color-bg-secondary, transparent);
  color: var(--color-text-subtle, #9ba7c0);
  font: 400 13px/1.4 var(--viju-font-body);
}
label.viju-motion-setting select {
  min-height: 36px;
  padding: 4px 28px 4px 10px;
  border-radius: 10px;
  font: 500 13px/1.2 var(--viju-font-body);
  color: var(--color-text-muted, #c1c8d9);
  background-color: transparent;
  border: 1px solid var(--color-border, #38415b);
}

/* ---------- 7. Движение ---------- */
/* Прыжки, расходящиеся круги и мигающие бейджи отвлекают от глаз и текста. */
.animate-bounce, .animate-ping, .med-nav-new { animation: none; }
/* Пульсация остаётся только у пустых блоков-заглушек загрузки. */
.animate-pulse:not(:empty) { animation: none; }

@keyframes viju-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes viju-sheen {
  from { background-position: 130% 0; }
  to { background-position: -40% 0; }
}
@keyframes viju-wordmark-light {
  from { background-position: 130% 0, 0 0; }
  to { background-position: -30% 0, 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="none"]):not([data-motion="calm"]) .logo-text.viju-wordmark-light {
    animation: viju-wordmark-light var(--motion-signature) var(--ease-out) 1 both;
  }

  /* Карточки хабов поднимаются один раз при появлении в окне. */
  @supports (animation-timeline: view()) {
    html:not([data-motion="none"]):not([data-motion="calm"]) .section-cards-hub__card {
      /* backwards: после появления карточка снова слушается своего hover-подъёма. */
      animation: viju-rise linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }

  /* Золотая грань: свет один раз проходит по рамке карточки при наведении. */
  @media (hover: hover) and (pointer: fine) {
    .section-cards-hub__card { position: relative; }
    .section-cards-hub__card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(115deg, transparent 32%, rgba(241, 217, 160, 0.34) 48%, transparent 62%) no-repeat;
      background-size: 250% 100%;
      background-position: 130% 0;
      opacity: 0;
    }
    html:not([data-motion="none"]) .section-cards-hub__card:hover::after {
      opacity: 1;
      animation: viju-sheen 900ms var(--ease-out) both;
    }
  }
}

/* Переходы между разделами (View Transitions API): старый экран уходит, новый приходит. */
::view-transition-old(root) { animation: 180ms var(--ease-exit) both viju-vt-out; }
::view-transition-new(root) { animation: 320ms var(--ease-enter) both viju-vt-in; }
@keyframes viju-vt-out { to { opacity: 0; } }
@keyframes viju-vt-in { from { opacity: 0; transform: translateY(8px); } }
.app-living-header, .app-desktop-bottom-nav, .mobile-bottom-nav { view-transition-name: none; }

/* ---------- 8. Глаза: ретушь материалов (работает и без WebGL) ---------- */
/* Фиолетовые веки и брови ВИЖУ остаются как на сайте (владелец, 28.09.2026). */
.viju-eyes {
  --viju-lash-ink: #03040d;
  --viju-light-gold: var(--viju-gold-300);
  --viju-light-core: color-mix(in srgb, var(--viju-gold-300) 20%, #ffffff);
}
body.theme-light .viju-eyes {
  --viju-light-gold: var(--viju-gold-600);
  --viju-light-core: var(--viju-gold-600);
}
/* Белок: тёплая слоновая кость, темнее к уголкам. */
.viju-eyes radialGradient[id$="-sclera"] stop:nth-child(1) { stop-color: #e9e2d3; }
.viju-eyes radialGradient[id$="-sclera"] stop:nth-child(2) { stop-color: #cfc6b6; }
.viju-eyes radialGradient[id$="-sclera"] stop:nth-child(3) { stop-color: #8d877f; }
.viju-eyes radialGradient[id$="-sclera"] stop:nth-child(4) { stop-color: #34364a; }
body.theme-light .viju-eyes radialGradient[id$="-sclera"] stop:nth-child(1) { stop-color: #f6f1e7; }
body.theme-light .viju-eyes radialGradient[id$="-sclera"] stop:nth-child(2) { stop-color: #e6ddcf; }
body.theme-light .viju-eyes radialGradient[id$="-sclera"] stop:nth-child(3) { stop-color: #b9ada0; }
body.theme-light .viju-eyes radialGradient[id$="-sclera"] stop:nth-child(4) { stop-color: #6f6479; }
.viju-eyes linearGradient[id$="-sclera-sides"] stop:nth-child(1),
.viju-eyes linearGradient[id$="-sclera-sides"] stop:nth-child(4) { stop-color: #0d1027; stop-opacity: 0.6; }
body.theme-light .viju-eyes linearGradient[id$="-sclera-sides"] stop:nth-child(1),
body.theme-light .viju-eyes linearGradient[id$="-sclera-sides"] stop:nth-child(4) { stop-color: #3a2f4a; }
/* Верхнее веко отбрасывает тень на глазное яблоко. */
.viju-eyes linearGradient[id$="-upper-shadow"] stop:nth-child(1) { stop-color: #02030b; stop-opacity: 0.92; }
.viju-eyes linearGradient[id$="-upper-shadow"] stop:nth-child(2) { stop-color: #060a1c; stop-opacity: 0.38; }
body.theme-light .viju-eyes linearGradient[id$="-upper-shadow"] stop { stop-color: #35213f; }
.viju-eyes__catchlight--soft { opacity: 0; }
.viju-eyes__lid--upper, .viju-eyes__lid--lower, .viju-eyes__lid-roll, .viju-eyes__brow-mass { filter: none; }
.viju-eyes__lid-rim { filter: brightness(1.35) saturate(1.2); }
.viju-eyes__lash-line { stroke-width: 0.9; }
.viju-eyes__brow-hairs { opacity: 0.14; }
body.theme-light .viju-eyes path[fill$="-socket-depth)"] { opacity: 0.18; }

/* WebGL-отрисовка: движок продолжает считать SVG, видимыми остаются брови и звёзды. */
.viju-eyes > canvas.viju-eyes__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.viju-eyes.viju-eyes--gl > .viju-eyes__svg { z-index: 1; }
.viju-eyes.viju-eyes--gl .viju-eyes__portrait-plane > .viju-eyes__eye,
.viju-eyes.viju-eyes--gl .viju-eyes__skin-expression { opacity: 0; }

/* ---------- 9. Заставка загрузки ---------- */
html[data-viju-boot] #viju-preloader { color: var(--viju-gold-300); }
html[data-viju-boot-theme="light"] #viju-preloader { color: var(--viju-gold-700); }
.viju-startup-mark { font-family: var(--viju-font-display); font-weight: 700; font-style: italic; letter-spacing: 0.32em; padding-left: 0.32em; }

/* ---------- 10. Десктоп ---------- */
@media (min-width: 1024px) {
  .app-living-header { padding-top: 4px; }
}

/* ================================================================== */
/* 11. Дизайн-система v1 (аудит 2.0, 28.09.2026)                      */
/*     Одни и те же вещи везде выглядят одинаково. Не трогаем:        */
/*     плашку «Новинка», нижнее меню на компьютере, тарифы, «Семью».  */
/* ================================================================== */
:root, body.theme-dark {
  --ds-text: #f2eee6; --ds-text-2: #b7bdd0; --ds-text-3: #858da8;
  --ds-accent: var(--viju-gold-300); --ds-accent-soft: rgba(228, 191, 108, 0.12);
  --ds-line: rgba(228, 191, 108, 0.16); --ds-line-soft: rgba(242, 238, 230, 0.10);
  --ds-surface: rgba(255, 255, 255, 0.035);
  --ds-moon: #a9b8ec;
  --ds-btn-bg: linear-gradient(180deg, #f1d58f 0%, #d9ab4f 100%); --ds-btn-text: #1a1206;
  --ds-btn-shadow: 0 8px 22px rgba(217, 171, 79, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --ds-btn2-line: rgba(228, 191, 108, 0.45);
  --ds-r-control: 12px; --ds-r-card: 20px;
}
body.theme-light {
  --ds-text: #1e1a2e; --ds-text-2: #4d4860; --ds-text-3: #7a7489;
  --ds-accent: var(--viju-gold-700); --ds-accent-soft: rgba(124, 90, 26, 0.10);
  --ds-line: rgba(124, 90, 26, 0.18); --ds-line-soft: rgba(30, 26, 46, 0.10);
  --ds-surface: rgba(255, 255, 255, 0.62);
  --ds-moon: #5d6ea8;
  --ds-btn-bg: linear-gradient(180deg, #8f6a22 0%, #7c5a1a 100%); --ds-btn-text: #fffaf0;
  --ds-btn-shadow: 0 6px 16px rgba(124, 90, 26, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --ds-btn2-line: rgba(124, 90, 26, 0.38);
}

/* 11.1 Боковые поля основных разделов — прежние 4 px из темы; между карточками — 12 px */
@media (max-width: 767px) {
  html body .section-cards-hub__grid, html body .development-hub { gap: 12px; }
}

/* 11.2 Один радиус карточек — 20 px */
html body .glass-card, html body .section-cards-hub__card, html body .admin-day-summary, html body .referral-invite,
html body .development-hub__diary-launcher, html body .oracle-entry, html body .today-experience__spheres,
html body .matrix-panel, html body .pythagoras-interpretation-card { border-radius: var(--ds-r-card) !important; }

/* 11.3 Заголовки: страница крупнее раздела, раздел крупнее карточки */
html body .viju-reference-result-frame .section-detail-shell__title h1 { font-family: var(--viju-font-display) !important; font-size: 26px !important; line-height: 1.15 !important; letter-spacing: 0 !important; }
html body .viju-reference-pythagoras .pythagoras-interpretations-section h2.heading-page.heading-page,
html body h2.heading-page.heading-page, html body .matrix-section-heading.matrix-section-heading h2 {
  font-family: var(--viju-font-display) !important; font-size: 22px !important; line-height: 1.2 !important; letter-spacing: 0 !important;
}
html body h1.interpretation-title, html body h2.interpretation-title, html body h3.interpretation-title { font-family: var(--viju-font-display) !important; }
html body h1.interpretation-title { font-size: 22px !important; text-transform: lowercase; }
html body h1.interpretation-title::first-letter { text-transform: uppercase; }
@media (min-width: 1024px) {
  html body .viju-reference-result-frame .section-detail-shell__title h1 { font-size: 32px !important; }
  html body h2.heading-page.heading-page, html body .matrix-section-heading.matrix-section-heading h2 { font-size: 28px !important; }
}
/* Подзаголовки внутри карточек — Roboto 500 */
html body .interpretation-content h2, html body .interpretation-content h3,
html body .viju-reference-pythagoras h2.text-lg.font-bold, html body .viju-reference-pythagoras h3.font-semibold:not(.interpretation-title) {
  font-family: var(--viju-font-body) !important; font-style: normal !important; font-weight: 500 !important;
}

/* 11.4 FAQ: тот же шрифт заголовков, страница на всю ширину экрана */
html body h1.text-center.font-serif.font-bold { font-family: var(--viju-font-display) !important; font-size: 28px !important; line-height: 1.2 !important; color: var(--ds-text) !important; }
html body h2.text-xl.font-semibold.border-b { font-family: var(--viju-font-display) !important; font-size: 22px !important; color: var(--ds-accent) !important; border: 0 !important; }
@media (max-width: 767px) {
  html body .max-w-4xl.mx-auto.px-4:has(h1.text-center.font-serif) { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; padding: 8px 16px 48px !important; }
  html body .max-w-4xl.mx-auto.px-4:has(h1.text-center.font-serif) > .glass-card { padding: 20px 16px !important; }
}

/* 11.5 Кнопки: главная, второстепенная, текстовая. Высота главной — 48 px */
html body .viju-button--primary, html body .btn-gold, html body button.bg-\[var\(--color-primary\)\], html body .tarot-pilot-entry__button {
  border-radius: var(--ds-r-control) !important; background: var(--ds-btn-bg) !important; color: var(--ds-btn-text) !important;
  font-family: var(--viju-font-body) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  border: 0 !important; box-shadow: var(--ds-btn-shadow) !important;
}
html body .viju-button--primary, html body .btn-gold, html body button.bg-\[var\(--color-primary\)\] { min-height: 48px; font-size: 16px !important; }
html body .tarot-pilot-entry__button svg { color: currentColor; stroke: currentColor; }
html body .admin-day-summary__discuss, html body .referral-invite__signin, html body .viju-button--secondary {
  min-height: 40px; border-radius: var(--ds-r-control) !important; border: 1px solid var(--ds-btn2-line) !important; background: transparent !important;
  color: var(--ds-accent) !important; font: 600 14px/1 var(--viju-font-body) !important; letter-spacing: 0 !important; opacity: 1 !important;
}
html body .admin-day-summary__discuss svg, html body .referral-invite__signin svg { color: currentColor; stroke: currentColor; }

/* 11.6 «Сегодня»: прежняя раскладка — текст слева, карта справа. */
html body .admin-day-summary__date, html body .admin-day-summary__color, html body .admin-day-summary__color strong { font-size: 12px !important; }

/* «Пригласи друга»: иконка, одна строка смысла и одна кнопка */
html body .today-referral-plaque { display: grid !important; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 14px 16px !important; min-height: 72px; }
html body .today-referral-plaque .referral-invite__offer { grid-column: 1; position: static !important; }
html body .today-referral-plaque .referral-invite__offer strong { display: none !important; }
html body .today-referral-plaque .referral-invite__offer svg { width: 22px; height: 22px; color: var(--ds-accent); }
html body .today-referral-plaque .referral-invite__content { grid-column: 2; position: static !important; text-align: left !important; }
html body .today-referral-plaque .referral-invite__content h3, html body .today-referral-plaque .referral-invite__content h3 span {
  display: block !important; font: 600 15px/1.3 var(--viju-font-body) !important; text-align: left !important; color: var(--ds-text) !important; white-space: nowrap; }
html body .today-referral-plaque .referral-invite__content h3::after { content: 'По бонусу вам обоим'; display: block; font: 400 13px/1.3 var(--viju-font-body); color: var(--ds-text-3); margin-top: 2px; }
html body .today-referral-plaque .referral-invite__actions { grid-column: 3; position: static !important; }
@media (max-width: 359px) { html body .today-referral-plaque .referral-invite__content h3, html body .today-referral-plaque .referral-invite__content h3 span { white-space: normal; } }

/* «Войти для расшифровки»: у кликабельной карточки видно действие */
html body .today-experience__spheres > button[data-viju-action]::after {
  content: attr(data-viju-action); display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; height: 40px; padding: 0 18px;
  border-radius: var(--ds-r-control); border: 1px solid var(--ds-btn2-line); color: var(--ds-accent); font: 600 14px/1 var(--viju-font-body);
}
html body .today-experience__spheres strong { font-size: 24px; }

/* 11.7 Закрытые разделы: один компонент, без карточки в карточке */
html body #tour-analysis-content-prognostics > .glass-card, html body .glass-card:has(> .access-gate), html body .matrix-profile-gate:has(> .access-gate) {
  padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
html body .access-gate { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-card) !important; padding: 28px 20px !important; box-shadow: none !important; }
html body .access-gate__content { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 12px !important; }
html body .access-gate__icon-wrap { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: var(--ds-accent-soft) !important; color: var(--ds-accent) !important; border: 0 !important; }
html body .access-gate__text { text-align: center !important; }
html body .access-gate__section-name { font-family: var(--viju-font-display) !important; font-size: 24px !important; line-height: 1.2 !important; color: var(--ds-text) !important; margin-bottom: 6px !important; }
html body .access-gate__description { font: 400 15px/1.5 var(--viju-font-body) !important; color: var(--ds-text-2) !important; }
html body .access-gate .viju-button--primary { min-width: 220px; }

/* «Диалог» для гостя: пример разговора и один понятный вход */
html body .glass-card.rounded-3xl.p-8:has(> .viju-chat-example) { flex-direction: column !important; justify-content: flex-end !important; gap: 28px; padding: 24px 20px 28px !important; }
.viju-chat-example { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.viju-chat-example small { align-self: center; font: 600 12px/1 var(--viju-font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-text-3); margin-bottom: 4px; }
.viju-chat-example p { max-width: 84%; margin: 0; padding: 12px 14px; border-radius: 16px; font: 400 15px/1.45 var(--viju-font-body); }
.viju-chat-example .viju-chat-example__me { align-self: flex-end; background: var(--ds-accent-soft); color: var(--ds-text); border-bottom-right-radius: 6px; }
.viju-chat-example .viju-chat-example__viju { align-self: flex-start; background: var(--ds-surface); border: 1px solid var(--ds-line-soft); color: var(--ds-text-2); border-bottom-left-radius: 6px; }
html body .glass-card.rounded-3xl.p-8 > .max-w-sm:has(> .btn-gold) { width: 100%; text-align: center; }
html body .glass-card.rounded-3xl.p-8 > .max-w-sm:has(> .btn-gold) > div:first-child { font-family: var(--viju-font-display) !important; font-size: 26px !important; line-height: 1.2 !important; color: var(--ds-text) !important; }

/* 11.8 «Развитие»: карточки как в «О тебе» — надпись, заголовок, описание, «Открыть» */
html body .development-hub__diary-launcher:has(.viju-hub-meta) { min-height: 168px !important; }
html body .development-hub__diary-launcher:has(.viju-hub-meta) .development-hub__launcher-title { visibility: hidden !important; }
.viju-hub-meta { position: absolute; left: 20px; right: 42%; top: 18px; bottom: 18px; display: flex; flex-direction: column; pointer-events: none; text-align: left; }
.viju-hub-meta i { font: 600 12px/1.3 var(--viju-font-body); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-accent); }
.viju-hub-meta strong { margin-top: 8px; font: 700 italic 30px/1.1 var(--viju-font-display); color: var(--ds-text); }
.viju-hub-meta span { margin-top: 8px; font: 400 13px/1.4 var(--viju-font-body); color: var(--ds-text-2); }
.viju-hub-meta b { margin-top: auto; font: 600 13px/1 var(--viju-font-body); color: var(--ds-accent); }
html body .med-launcher__new { left: auto !important; right: 16px !important; top: 14px !important; transform: none !important; }

/* 11.9 Вкладки: переключатель вида — «пилюли», разделы — подчёркивание */
html body .pythagoras-main-panel > .section-tabs {
  display: flex !important; gap: 0 !important; padding: 4px !important; border: 1px solid var(--ds-line) !important; border-radius: 16px !important; background: var(--ds-surface) !important; overflow: hidden !important; }
html body .pythagoras-main-panel > .section-tabs .section-tab { flex: 1 1 0; border-radius: var(--ds-r-control) !important; border: 1px solid transparent !important; min-height: 42px; }
html body .pythagoras-main-panel > .section-tabs .section-tab::after { display: none !important; }
html body .pythagoras-main-panel > .section-tabs .section-tab.active { background: var(--ds-accent-soft) !important; border-color: var(--ds-btn2-line) !important; color: var(--ds-text) !important; }
html body .section-tabs.viju-tabs--more { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }

/* 11.10 Квадрат: смысл цветов сохраняется (золото — сильная сторона, лунный — зона роста) */
html body .pythagoras-insight--gold, html body .pythagoras-tone-gold { --pythagoras-tone: var(--viju-gold-300) !important; --pythagoras-tone-soft: rgba(228, 191, 108, 0.14) !important; --pythagoras-tone-border: rgba(228, 191, 108, 0.34) !important; }
html body .pythagoras-insight--blue, html body .pythagoras-tone-blue { --pythagoras-tone: var(--ds-moon) !important; --pythagoras-tone-soft: rgba(169, 184, 236, 0.12) !important; --pythagoras-tone-border: rgba(169, 184, 236, 0.32) !important; }
html body.theme-light .pythagoras-insight--gold, html body.theme-light .pythagoras-tone-gold { --pythagoras-tone: var(--viju-gold-700) !important; }
html body main .psychomatrix-cell .value.viju-tone-moon { color: var(--ds-moon) !important; -webkit-text-fill-color: var(--ds-moon) !important; }
.viju-legend { display: flex; gap: 16px; justify-content: center; margin: 2px 0 10px; font: 500 12px/1 var(--viju-font-body); color: var(--ds-text-3); }
.viju-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.viju-legend .viju-legend__gold { background: var(--viju-gold-300); }
.viju-legend .viju-legend__moon { background: var(--ds-moon); }
body.theme-light .viju-legend .viju-legend__gold { background: var(--viju-gold-700); }

/* 11.11 Главная: поля одной высоты, подписи на одной линии, тема — тихая кнопка на первом экране */
html body #tour-profile-form .flex.gap-3.items-end { align-items: flex-start !important; }
html body #tour-profile-form .w-32.flex-shrink-0 > div { height: 50px; align-items: stretch; }
html body #tour-profile-form .w-32.flex-shrink-0 > div > button { height: auto !important; }
html body #tour-profile-form label { color: var(--ds-text-2) !important; }
html body #tour-profile-form button.w-full.py-2 { border: 0 !important; background: transparent !important; box-shadow: none !important; height: 36px; color: var(--ds-text-3) !important; }
html body #tour-profile-form button.w-full.py-2 span { font: 500 14px/1 var(--viju-font-body) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body #tour-profile-form button.w-full.py-2 span::before { content: '☀\FE0E  '; color: var(--ds-accent); }
html body.theme-light #tour-profile-form button.w-full.py-2 span::before { content: '☾\FE0E  '; }
html body label.viju-motion-setting select {
  -webkit-appearance: none; appearance: none; min-height: 40px; padding: 0 36px 0 14px; border-radius: var(--ds-r-control); border: 1px solid var(--ds-line); color: var(--ds-text);
  background: var(--ds-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c4933f' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font: 500 14px/1 var(--viju-font-body);
}

/* 11.12 Ошибки: шрифт сайта, в светлой теме — спокойный терракотовый */
html body [class*="border-rose-500"] { font-family: var(--viju-font-body) !important; }
html body.theme-light [class*="border-rose-500"] { background: rgba(176, 92, 56, 0.08) !important; border-color: rgba(160, 80, 50, 0.32) !important; color: #8a3b22 !important; }
html body .viju-await-submit { display: none !important; }

/* 11.13 Астрология: пустое состояние с иллюстрацией раздела */
.viju-empty-art { display: block; width: 112px; height: 112px; margin: 0 auto 8px; object-fit: contain; }
html body .viju-empty-title { font-family: var(--viju-font-display) !important; font-size: 24px !important; line-height: 1.2 !important; color: var(--ds-text) !important; }

/* Первый экран занимает всю высоту окна, включая режим установленного PWA.
   Перебивает прежний inline min-height: 0; подвал остаётся доступен ниже. */
html body .home-layout--initial {
  min-height: 100vh !important;
  min-height: 100dvh !important;
}