@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
   POP · LIGHT AURORA GLASS — премиальный визуальный язык natal-chart (Gen-Z + стекло)
   ────────────────────────────────────────────────────────────────────────────
   Слой ПОВЕРХ cosmos.css. Грузится ПОСЛЕДНИМ → выигрывает каскад.

   НАПРАВЛЕНИЕ (СВЕТЛОЕ — финальное): лёгкая светлая аврора как ПОДЛОЖКА +
   премиальное LIGHT glass поверх. Это реальный топ-приём (Apple Control Center
   на светлых обоях, Family, iOS light glass) — стекло на светлом бывает дороже
   тёмного. Лёгкость = светло, воздушно, бело-пастельно. НЕ тёмный космос и НЕ
   прежний плоский крем.

   ПОЧЕМУ ВЫГЛЯДИТ ДОРОГО (на светлом backdrop-blur читается слабо, опора иная):
     • поверхности = матовое БЕЛОЕ стекло (rgba(255,255,255,.55–.72)) + тонкая
       светлая кромка (1px белый) — даёт «толщину» стекла;
     • «парение» держит МЯГКАЯ ЦВЕТНАЯ тень (тонированная под акцент — лавандовая/
       коралловая, низкая непрозрачность, большой blur), НЕ серая. Это и есть
       «дороговизна» light glass (NN/g surface-separation важнее самого blur);
     • Gen-Z pop — пастельно-сочные акценты (коралл/персик→фиолет/лаванда),
       дозированный неон; CTA — сочная градиентная пилюля (тут можно ярко);
     • текст — графитовые чернила (#2a2340-ish, НЕ #000) для AA на светлом.
     • squircle-радиусы, воздушные отступы, пружинный моушн — токенами.

   Тон (product-philosophy): премиально и тепло, приглашение — не давление.
   Производительность: backdrop-filter ДОРОГ → только на ключевых поверхностях
   (таб-бар, hero, секции-карты). Массовые мелкие элементы (yd-card, num-cell,
   чипы) — ДЕШЁВАЯ имитация стекла (полупрозрачная белая заливка + кромка), без
   блюра. DOM-контракт цел: меняем только вид, классы-состояния (is-active/
   is-ready/is-empty/is-locked/is-generating/is-dominant) сохранены.
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   1. ДИЗАЙН-СИСТЕМА — ТОКЕНЫ (единый источник: палитра · радиус · стекло · моушн)
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── 1.1 ПАЛИТРА (пастельно-сочный pop на светлом) ─────────────────────────
     Акценты чуть глубже неона (для контраста на светлом): коралл/фиолет/синий
     насыщены, чтобы CTA и активный таб «звенели», а текст-на-акценте держал AA. */
  --pop-coral:  #ff5277;   /* чуть глубже для контраста на белом */
  --pop-violet: #6f4ff5;
  --pop-blue:   #2f6dff;
  --pop-cyan:   #16b8cf;   /* приглушён: ярко-cyan «сгорает» на светлом */
  --pop-lime:   #84c91f;   /* приглушён: кислотный lime на белом нечитаем */
  --pop-sun:    #f5a623;   /* тёплый янтарь вместо ярко-жёлтого (AA на белом) */

  /* ГРАФИТОВЫЕ ЧЕРНИЛА — текст на светлом (НЕ #000; AA+ на белом стекле) */
  --ink-900: #221c38;   /* заголовки/доминанта — графит-индиго */
  --ink-700: #3a3357;   /* основной текст */
  --ink-500: #6a6388;   /* вторичный текст (≥4.5:1 на белом стекле) */
  --ink-400: #8b84a6;   /* подписи/хинты (на сплошном белом ≥4.5:1) */

  /* Аврора-градиенты (mesh/aurora — фирменная «дороговизна») */
  --grad-aurora: linear-gradient(135deg, #ff5277 0%, #6f4ff5 52%, #2f6dff 100%);
  --grad-cta:    linear-gradient(135deg, #ff6385 0%, #7b5cff 100%);
  --grad-cool:   linear-gradient(135deg, #5a7bff, #16b8cf);
  --grad-warm:   linear-gradient(135deg, #f5a623, #ff6f93);
  /* gradient-ink на светлом — НАСЫЩЕННЫЙ (бледный на белом исчезает) */
  --grad-ink:    linear-gradient(110deg, #ff5277 0%, #8b4ff0 50%, #2f6dff 100%);

  /* ── 1.2 РАДИУСЫ (squircle-шкала, крупные мягкие формы) ───────────────────── */
  --rad-xs:   12px;   /* чипы, мелкие пилюли */
  --rad-sm:   16px;   /* инпуты, строки */
  --rad-md:   22px;   /* кнопки-пилюли вторичные, карты-года */
  --rad-lg:   28px;   /* карты-секции, ячейки */
  --rad-xl:   36px;   /* hero-блоки, sheet */
  --rad-pill: 999px;

  /* ── 1.3 СТЕКЛО — шкала блюра + кромка + заливка (3 уровня глубины) ─────────
     g1 = лёгкое (мелкие/массовые — БЕЗ blur, имитация),
     g2 = среднее (карты-секции — реальный blur),
     g3 = сильное (таб-бар, hero, модалки — реальный blur, плотнее).            */
  --glass-blur-2: 16px;
  --glass-blur-3: 22px;

  /* заливки стекла (СВЕТЛОЕ матовое белое полупрозрачное) */
  --glass-fill-1: rgba(255, 255, 255, 0.58);   /* имитация (без блюра) */
  --glass-fill-2: rgba(255, 255, 255, 0.62);   /* блюр-карта */
  --glass-fill-3: rgba(255, 255, 255, 0.72);   /* плотное стекло (таб/hero) */

  /* верхняя светлая кромка (inset highlight) — иллюзия толщины стекла.
     На светлом: яркий белый верхний блик + тонкая полупрозрачная белая обводка. */
  --glass-edge:   inset 0 1px 0 rgba(255,255,255,0.9),
                  inset 0 0 0 1px rgba(255,255,255,0.55);
  --glass-edge-strong: inset 0 1.5px 0 rgba(255,255,255,1),
                       inset 0 0 0 1px rgba(255,255,255,0.7);
  --glass-stroke: 1px solid rgba(255,255,255,0.7);

  /* ── 1.4 ТЕНИ + GLOW (на светлом тень ЦВЕТНАЯ-тонированная = «дороговизна») ──
     Серая тень на светлом = дёшево. Тонируем тень под фиолет/коралл, низкая
     непрозрачность + большой blur → мягкое цветное парение. */
  --shadow-1:  0 4px 16px -6px rgba(86, 66, 150, 0.16);
  --shadow-2:  0 12px 32px -12px rgba(86, 66, 150, 0.22),
               0 2px 8px -4px rgba(86, 66, 150, 0.10);
  --shadow-3:  0 22px 50px -18px rgba(86, 66, 150, 0.28),
               0 4px 14px -6px rgba(86, 66, 150, 0.12);
  --glow-violet: 0 10px 34px -10px rgba(111,79,245,0.38);
  --glow-coral:  0 10px 32px -10px rgba(255,82,119,0.34);
  --glow-gold:   0 10px 30px -10px rgba(245,166,35,0.34);
  --glow-cyan:   0 10px 30px -10px rgba(22,184,207,0.32);
  --glow-lime:   0 10px 28px -10px rgba(132,201,31,0.32);

  /* ── 1.4b ПЕРЕОПРЕДЕЛЕНИЕ legacy ink-токенов cosmos.css → ГРАФИТ на светлом.
     Весь старый код ниже ссылается на var(--ink-100/300/500); переводим их
     значения в светлую тему одним местом — без переписывания каждого селектора. */
  --ink-100: #221c38;   /* был «основной текст на тёмном» → теперь графит-индиго */
  --ink-300: #3a3357;   /* вторичный текст */
  --ink-500: #6a6388;   /* подписи/хинты (≥4.5:1 на белом стекле) */
  /* фиолет-акцент cosmos.css был светлым (для тёмного фона) → темнее для светлого */
  --violet-300: #6f4ff5;

  /* ── 1.5 ТИПОШКАЛА (display Unbounded + Inter body; масштаб уже в cosmos) ──── */
  --font-display: 'Unbounded', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ── 1.6 МОУШН (пружина — фирменный отклик; единый ритм) ───────────────────── */
  --spring:   cubic-bezier(.34, 1.56, .64, 1);   /* tap / появление */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --d-tap:   .16s;
  --d-base:  .26s;
}

/* ════════════════════════════════════════════════════════════════════════════
   2. ХОЛСТ — СВЕТЛАЯ аврора-mesh (перекрываем тёмный aura-bg PNG).
   pop.css грузится последним → этот background БЕЗ var(--aura-bg) и c !important
   перебивает тёмный ассет cosmos.css. База #F7F6FB + пастельные пятна
   (персик/лаванда/мята/розовый) у краёв, очень светлый центр → крупный текст
   героя читается, фон воздушный (NN/g: контент важнее декора).
   ТЁМНЫЙ canvas-космос (.cosmos-stars) сам прозрачен (clearRect) — тёмного фона
   не даёт; его светлые звёзды просто почти невидимы на светлом (ок). Тёмное
   давали только PNG (перекрыт) + блобы (приглушаем/перекрашиваем ниже).
   ════════════════════════════════════════════════════════════════════════════ */
body.cosmos {
  background:
    radial-gradient(680px 460px at 6% -6%,   rgba(255,138,170,0.22), transparent 58%), /* персик-розовый ↖ */
    radial-gradient(620px 440px at 100% 4%,  rgba(168,150,255,0.22), transparent 56%), /* лаванда ↗ */
    radial-gradient(640px 520px at 50% 108%, rgba(120,205,210,0.18), transparent 60%), /* мята ↓ */
    radial-gradient(560px 420px at -4% 70%,  rgba(255,196,150,0.16), transparent 58%), /* тёплый персик ← */
    linear-gradient(180deg, #FAF8FE 0%, #F5F3FB 100%)
    !important;
  background-attachment: fixed, fixed, fixed, fixed, scroll;
  color: var(--ink-100);
  font-family: var(--font-body);
}

/* Блобы cosmos.css были тёмными → перекрашиваем в светлые пастельные пятна,
   очень мягко (фон уже несёт mesh; блобы лишь добавляют лёгкое «дыхание»). */
.cosmos-bg { mix-blend-mode: normal !important; }
.cosmos-bg .blob { opacity: .18 !important; filter: blur(60px) !important; }
.cosmos-bg .blob-1 { background: radial-gradient(circle, rgba(255,138,170,.5), transparent 70%) !important; }
.cosmos-bg .blob-2 { background: radial-gradient(circle, rgba(168,150,255,.5), transparent 70%) !important; }
.cosmos-bg .blob-3 { background: radial-gradient(circle, rgba(120,205,210,.5), transparent 70%) !important; }
/* тёмный звёздный canvas на светлом фоне приглушаем (звёзды светлые → почти
   невидимы; чтобы не давал лёгкой мути — снижаем непрозрачность слоя).
   ДЛЯ ЖИВОСТИ светлого фона стоит сменить тинты звёзд на тёмные — это правка
   cosmos.js (одна строка TINTS), вынесена владельцу; см. отчёт. */
.cosmos-stars { opacity: .5 !important; mix-blend-mode: multiply !important; }

/* ── ТИПОГРАФИКА: display Unbounded на заголовки, Inter на текст ───────────────
   Перебиваем системный стек cosmos.css (без него длинный текст падал в serif). */
.display, .pop-display,
.me-name, .power-title,
.rs-hero-title, .rs-sec-title, .num-lines-title, .num-detail-name,
.state-title, .loading-title, .onb-title,
.now-kicker, .deck-label, .sub-title {
  font-family: var(--font-display) !important;
  letter-spacing: -0.03em;
}
body.cosmos, body.cosmos * { font-family: var(--font-body); }
.lede, .hint-text, .reading, .reading p, .reading li,
.power-sub, .now-teaser, .rs-hero-verdict, .rs-lead, .rs-sec-body,
.onb-list li, p, span, li, label, input, select, button, textarea {
  font-family: var(--font-body);
}
.num { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.now-year.num, .num-glyph.num, .num-working-vals.num, .num-detail-glyph.num {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
}

/* gradient-ink на ключевых словах (.accent / .pop-accent) — aurora-clip */
.pop-accent, .accent, .display .accent {
  background: var(--grad-ink) !important;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
}
.pop-kicker, .rs-hero-kicker, .rs-sec-eyebrow { color: var(--pop-violet) !important; }

/* ── МАРКЕР ЗА СЛОВОМ (фирменное выделение-подложка, наклон + прорисовка) ────── */
.mark {
  position: relative; z-index: 0; display: inline-block; padding: 0 .14em;
  color: #fff; font-weight: 800; white-space: nowrap;
}
.mark::before {
  content: ""; position: absolute; z-index: -1;
  left: -.06em; right: -.06em; top: .04em; bottom: .04em;
  background: var(--pop-coral);
  border-radius: .42em .5em .4em .55em;
  transform: rotate(-1.6deg) scaleX(1); transform-origin: left center;
  box-shadow: 0 4px 14px -4px rgba(255,94,126,.6);
}
.mark--violet::before { background: var(--pop-violet); box-shadow: 0 4px 14px -4px rgba(124,92,255,.6); }
.mark--blue::before   { background: var(--pop-blue);   box-shadow: 0 4px 14px -4px rgba(58,123,255,.6); }
.mark--sun::before    { background: var(--pop-sun);    box-shadow: 0 4px 14px -4px rgba(255,197,61,.6); }
.mark--sun, .mark--lime { color: #14210a; }
.mark--lime::before   { background: var(--pop-lime);   box-shadow: 0 4px 14px -4px rgba(198,242,78,.6); }
@keyframes mark-draw { from { transform: rotate(-1.6deg) scaleX(0); } to { transform: rotate(-1.6deg) scaleX(1); } }
.enter .mark::before, .enter-stagger .mark::before, .pop-display .mark::before {
  animation: mark-draw .5s var(--spring) .15s both;
}

/* ════════════════════════════════════════════════════════════════════════════
   3. БАЗОВЫЙ ОРГАНИЗМ — стеклянная карта .glass (реальный blur, парит)
   ════════════════════════════════════════════════════════════════════════════ */
.glass {
  background: var(--glass-fill-2) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-2)) saturate(1.6) !important;
          backdrop-filter: blur(var(--glass-blur-2)) saturate(1.6) !important;
  border: var(--glass-stroke) !important;
  border-radius: var(--rad-lg) !important;
  box-shadow: var(--shadow-2), var(--glass-edge) !important;
}

/* spring-отклик на tap (общий) */
.tap { transition: transform var(--d-tap) var(--spring),
                   box-shadow var(--d-base) var(--ease-out),
                   border-color var(--d-base) var(--ease-out) !important; }
.tap:active { transform: scale(.96); }
@media (hover:hover) {
  .glass.tap:hover, .power-card.tap:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-3), var(--glass-edge-strong), var(--glow-violet) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   4. CTA — aurora градиент-пилюля + неон-glow + пружина (единая на всё)
   ════════════════════════════════════════════════════════════════════════════ */
.cta, .btn-primary {
  background: var(--grad-cta) !important;
  color: #fff !important;
  border-radius: var(--rad-pill) !important;
  font-family: var(--font-body) !important; font-weight: 800 !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 14px 32px -12px rgba(124,92,255,.7), var(--glass-edge) !important;
  transition: transform var(--d-tap) var(--spring), box-shadow var(--d-base), filter .15s !important;
}
.cta.is-pop { background: var(--grad-aurora) !important; }
@media (hover:hover) {
  .cta:hover { transform: translateY(-2px);
    box-shadow: 0 20px 42px -12px rgba(124,92,255,.85), var(--glow-coral), var(--glass-edge-strong) !important; }
}
.cta:active { transform: translateY(0) scale(.98); }
.cta:disabled, .cta[disabled] { filter: grayscale(.4); opacity: .5; box-shadow: none !important; }

/* вторичная — стеклянная пилюля (тёмное стекло + кромка, не белая плашка) */
.cta-ghost {
  background: var(--glass-fill-1) !important; color: var(--ink-100) !important;
  border: var(--glass-stroke) !important; border-radius: var(--rad-pill) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
  box-shadow: var(--shadow-1), var(--glass-edge) !important; font-weight: 600 !important;
}
@media (hover:hover) { .cta-ghost:hover {
  border-color: rgba(196,181,253,.5) !important; box-shadow: var(--shadow-2), var(--glow-violet) !important; } }

.cta:focus-visible, .cta-ghost:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(124,92,255,.55), var(--shadow-2) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   5. БЛОК 1 · ТАБ-БАР — ПАРЯЩАЯ СТЕКЛЯННАЯ ПИЛЮЛЯ (floating glass pill)
   Не плоская полоса до краёв: оторван от низа, скруглён со всех сторон, плотное
   стекло + кромка + тень-парение. Активная вкладка = aurora-пилюля-подсветка
   под иконкой + неоновый цвет (не только цвет: подложка-индикатор = форма).
   safe-area сохранена. blur здесь оправдан (1 элемент, ключевая навигация).
   ════════════════════════════════════════════════════════════════════════════ */
.tabbar {
  left: 12px !important; right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
  padding: 7px 8px !important;
  border-radius: var(--rad-pill) !important;
  background: var(--glass-fill-3) !important;
  border: var(--glass-stroke) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-3)) saturate(1.7) !important;
          backdrop-filter: blur(var(--glass-blur-3)) saturate(1.7) !important;
  box-shadow: var(--shadow-3),
              var(--glass-edge-strong),
              0 0 40px -10px rgba(124,92,255,.35) !important;
}
.tab {
  position: relative; color: var(--ink-500) !important;
  font-family: var(--font-body) !important; font-weight: 700 !important;
  border-radius: var(--rad-pill) !important;
  transition: color var(--d-base) var(--ease-out) !important;
}
/* активный индикатор-пилюля под иконкой+подписью (форма, не только цвет) */
.tab.is-active {
  color: #fff !important;
}
.tab.is-active::before {
  content: ""; position: absolute; inset: 4px;
  border-radius: var(--rad-pill); z-index: -1;
  background: var(--grad-aurora);
  box-shadow: 0 8px 20px -8px rgba(124,92,255,.7), var(--glass-edge);
  animation: tab-pop .32s var(--spring) both;
}
@keyframes tab-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tab .tab-ic { transition: transform var(--d-base) var(--spring); }
.tab.is-active .tab-ic { transform: translateY(-1px) scale(1.04); }
.tab.tap:active { transform: scale(.94); }
.tab:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,.6) !important; border-radius: var(--rad-pill) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   6. БЛОК 2 · ВКЛАДКА «ГОД» — wow-герой на космосе (открытая сцена, не карта)
   Доминанта: ОГРОМНЫЙ год aurora-clip с мягким бликом; кикер тихий; тизер живой;
   CTA — фирменная aurora-пилюля. Под героем — большой дышащий glow.
   ════════════════════════════════════════════════════════════════════════════ */
.home-greeting { color: var(--ink-300) !important; font-family: var(--font-body) !important; }
.now-kicker {
  color: var(--pop-violet) !important; font-family: var(--font-body) !important;
  font-weight: 800 !important; letter-spacing: .14em !important;
}
/* большой герой-glow — мягкий СВЕТЛЫЙ аврора-ореол за числом (light-glow).
   Светлое ядро (белый ореол) приподнимает число над фоном, цветная пастель по
   краям даёт «парение». Без тёмного ядра — на светлом оно бы стало пятном. */
.year-stage .now-glow {
  width: 82vw !important; max-width: 380px !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,.3) 32%, transparent 54%),
    radial-gradient(circle, rgba(255,82,119,.22), rgba(124,92,255,.18) 46%, rgba(58,123,255,.08) 66%, transparent 76%) !important;
  filter: blur(10px);
  animation: hero-breathe 7s var(--ease-out) infinite alternate;
}
@keyframes hero-breathe { from { transform: translateX(-50%) scale(.96); opacity:.85; } to { transform: translateX(-50%) scale(1.06); opacity:1; } }
/* год — aurora gradient-ink, смысловая и визуальная доминанта */
.now-year {
  font-family: var(--font-display) !important; font-weight: 800 !important;
  background: var(--grad-ink) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 8px 24px rgba(124,92,255,.28));
  /* фикс: на 390px display-шрифт переполнял экран (последняя цифра обрезалась).
     Зажимаем размер от ширины вьюпорта — год остаётся доминантой, но влезает. */
  font-size: clamp(64px, 23vw, 104px) !important;
  line-height: .98 !important; letter-spacing: -.04em !important;
  max-width: 100%; text-align: center;
}
.now-teaser { color: var(--ink-300) !important; }
.now-open { font-family: var(--font-body) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   7. БЛОК 3 · СВАЙП-ДЕКА — стеклянные squircle-карты года (имитация стекла)
   МАССОВЫЕ элементы → БЕЗ backdrop-filter (дёшево): полупрозрачная тёмная
   заливка + кромка + тень = «парят», но не грузят GPU. Состояния различимы
   формой+иконкой+цветом (color-not-only, WCAG). Фейд-маска справа = аффорданс.
   ════════════════════════════════════════════════════════════════════════════ */
.deck-wrap { position: relative; }
.deck-label { color: var(--ink-500) !important; }
/* фейд-маска справа — намёк «листай дальше» (аффорданс прокрутки) */
.year-deck {
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
}
.yd-card {
  background: var(--glass-fill-1) !important; color: var(--ink-100) !important;
  border: var(--glass-stroke) !important; border-radius: var(--rad-md) !important;
  font-family: var(--font-display) !important;
  box-shadow: var(--shadow-1), var(--glass-edge) !important;
}
.yd-card .yd-sub { font-family: var(--font-body) !important; color: var(--ink-300) !important; }

/* (a) ГОТОВ — «звезда зажглась»: тёплый золотой glow + золотая точка */
.yd-card.is-ready {
  border-color: rgba(255,197,61,.45) !important;
  box-shadow: var(--shadow-1), var(--glass-edge), 0 0 26px -10px rgba(255,197,61,.55) !important;
}
.yd-card.is-ready::after { background: var(--pop-sun) !important; box-shadow: 0 0 10px rgba(255,197,61,.8) !important; }

/* (b) НЕ СОЗДАН — тихий фиолетовый пунктир (приглашение создать) */
.yd-card.is-empty {
  background: rgba(124,92,255,.06) !important; color: var(--ink-500) !important;
  border-style: dashed !important; border-color: rgba(167,139,250,.42) !important;
  box-shadow: none !important;
}
/* (c) ПО ПОДПИСКЕ — приглушён + замок (форма, не только цвет; замок из cosmos.css) */
.yd-card.is-locked { color: var(--ink-500) !important; opacity: .7 !important; }
/* (d) ГОТОВИТСЯ — фиолетовый пульс, не кликабелен */
.yd-card.is-generating {
  color: var(--violet-300) !important; border-color: rgba(167,139,250,.42) !important;
  box-shadow: var(--shadow-1), var(--glass-edge), 0 0 24px -10px rgba(124,92,255,.55) !important;
}
.yd-card.is-generating::after { background: var(--pop-violet) !important; }
@media (hover:hover) { .yd-card.is-ready:hover, .yd-card.is-empty:hover, .yd-card.is-locked:hover {
  border-color: rgba(196,181,253,.6) !important; transform: translateY(-2px); } }
.yd-card.tap:active { transform: scale(.96); }
.yd-card:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(167,139,250,.6) !important; }

/* заглушка дека (сеть упала) — стеклянная */
.years-empty {
  background: var(--glass-fill-1) !important; border: 1.5px dashed rgba(167,139,250,.35) !important;
  border-radius: var(--rad-lg) !important; box-shadow: var(--shadow-1) !important;
}
.years-empty-t { color: var(--ink-100) !important; }
.years-empty-s { color: var(--ink-500) !important; }

/* ── ПИЛЮЛИ-ТАБЫ / ЧИПЫ (имитация стекла) ──────────────────────────────────── */
.pill-tabs .t {
  background: var(--glass-fill-1) !important; color: var(--ink-300) !important;
  border: var(--glass-stroke) !important; font-family: var(--font-body) !important;
}
.pill-tabs .t.on {
  background: var(--grad-aurora) !important; color: #fff !important;
  border-color: transparent !important; box-shadow: 0 8px 20px -8px rgba(124,92,255,.7) !important;
}
.chip {
  background: var(--glass-fill-1) !important; color: var(--ink-300) !important;
  border: var(--glass-stroke) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font-family: var(--font-body) !important;
}

/* ── СТИКЕР-НАКЛЕЙКА (Gen-Z акцент: сочная заливка + белая вырубка + наклон) ─── */
.sticker {
  font-family: var(--font-display) !important; font-weight: 800;
  box-shadow: 0 0 0 2.5px rgba(255,255,255,.92), 0 6px 18px -6px rgba(0,0,0,.5) !important;
  background: var(--pop-sun); color: #14210a;
}
.sticker--coral  { background: var(--pop-coral)  !important; color:#fff !important; }
.sticker--violet { background: var(--pop-violet) !important; color:#fff !important; }
.sticker--blue   { background: var(--pop-blue)   !important; color:#fff !important; }
.sticker--lime   { background: var(--pop-lime)   !important; color:#14210a !important; }
.sticker--sun    { background: var(--pop-sun)    !important; color:#14210a !important; }

/* ════════════════════════════════════════════════════════════════════════════
   8. РАЗБОР (reading) — стеклянный hero + секции-карты + неон-акценты
   ════════════════════════════════════════════════════════════════════════════ */
.rs-hero {
  background:
    linear-gradient(160deg, rgba(255,197,61,.16), rgba(124,92,255,.18) 55%, rgba(255,94,126,.16)),
    var(--glass-fill-3) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-3)) saturate(1.5) !important;
          backdrop-filter: blur(var(--glass-blur-3)) saturate(1.5) !important;
  border: 1px solid rgba(255,197,61,.3) !important;
  box-shadow: var(--shadow-3), var(--glass-edge-strong), var(--glow-gold) !important;
  border-radius: var(--rad-xl) !important;
}
.rs-hero-title { font-family: var(--font-display) !important; font-weight: 800; letter-spacing: -.03em; }
.rs-hero-verdict { color: var(--ink-300) !important; }

.rs-sec, .num-full-item, .num-cell, .num-detail {
  background: var(--glass-fill-2) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-2)) saturate(1.5) !important;
          backdrop-filter: blur(var(--glass-blur-2)) saturate(1.5) !important;
  border: var(--glass-stroke) !important;
  box-shadow: var(--shadow-2), var(--glass-edge) !important;
  border-radius: var(--rad-lg) !important;
}
.reading strong, .reading em { color: var(--ink-100) !important; }
.reading li::before { color: var(--pop-coral) !important; }
.reading h4 { color: var(--violet-300) !important; font-family: var(--font-body) !important; }

/* инсайт-блок (доказательство точности) — cyan glass-карта */
.rs-insight {
  background: linear-gradient(135deg, rgba(79,214,230,.18), var(--glass-fill-2) 70%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-2)) !important; backdrop-filter: blur(var(--glass-blur-2)) !important;
  border: 1px solid rgba(79,214,230,.4) !important;
  border-left: 4px solid var(--pop-cyan) !important;
  box-shadow: var(--shadow-2), var(--glow-cyan) !important;
}
.rs-insight-ic { color: var(--pop-cyan) !important; }
.rs-insight p { color: var(--ink-100) !important; }

/* шеринг-мостик — aurora glass-карта */
.rs-share {
  background: linear-gradient(160deg, rgba(124,92,255,.2), rgba(255,94,126,.16)), var(--glass-fill-3) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-2)) !important; backdrop-filter: blur(var(--glass-blur-2)) !important;
  border: 1px solid rgba(124,92,255,.32) !important;
  border-radius: var(--rad-xl) !important;
  box-shadow: var(--shadow-3), var(--glow-violet) !important;
}
.rs-share-title { font-family: var(--font-display) !important; font-weight: 800; }
.rs-share .cta { background: var(--grad-aurora) !important; }
.rs-divider span:nth-child(odd) { color: var(--pop-coral) !important; }

/* типы секций — ритм/иерархия */
.rs-sec--insight {
  background: linear-gradient(135deg, rgba(79,214,230,.2), var(--glass-fill-2) 72%) !important;
  border: 1px solid rgba(79,214,230,.42) !important;
  border-left: 5px solid var(--pop-cyan) !important;
  box-shadow: var(--shadow-3), var(--glow-cyan) !important;
}
.rs-sec--insight .rs-sec-body p { color: var(--ink-100) !important; font-weight: 600; font-size: 18px; }
.rs-sec--plain {
  background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 0 !important; border-top: 1px solid rgba(34,28,56,.10) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.rs-sec--plain .rs-orb { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.rs-sec--plain .rs-sec-title { color: var(--ink-300) !important; }
.rs-check li {
  background: rgba(124,92,255,.1) !important;
  border: 1px solid rgba(124,92,255,.22) !important;
}
.rs-check-mk {
  color: #fff !important; background: var(--grad-aurora) !important; border: 0 !important;
  box-shadow: 0 6px 14px -6px rgba(124,92,255,.7) !important;
}
.rs-sec-title { color: var(--ink-100) !important; }
.rs-sec-title .mark { color: #fff !important; }
.rs-sec-title .mark--lime, .rs-sec-title .mark--sun { color: #14210a !important; }

/* ════════════════════════════════════════════════════════════════════════════
   9. БЛОК 4 · ЧИСЛА (Квадрат Пифагора) — стеклянная матрица 3×3
   Массовые ячейки 3×3 → имитация стекла (без блюра), доминантные/пустые
   различимы заливкой+рамкой+весом. Доминант — aurora-подсветка.
   ════════════════════════════════════════════════════════════════════════════ */
.num-cell {
  background: var(--glass-fill-1) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: var(--glass-stroke) !important; border-radius: var(--rad-lg) !important;
  box-shadow: var(--shadow-1), var(--glass-edge) !important;
}
.num-cell.is-empty {
  background: rgba(124,92,255,.05) !important; border-style: dashed !important;
  border-color: rgba(167,139,250,.32) !important; box-shadow: none !important;
}
.num-cell.is-dominant {
  background: linear-gradient(160deg, rgba(124,92,255,.34), rgba(124,92,255,.12)) !important;
  border-color: rgba(196,181,253,.6) !important;
  box-shadow: var(--shadow-1), var(--glass-edge), var(--glow-violet) !important;
}
.num-glyph { color: var(--ink-100) !important; }
.num-cell.is-empty .num-glyph { color: var(--ink-500) !important; }
.num-working {
  background: var(--glass-fill-1) !important; border: var(--glass-stroke) !important;
  border-radius: var(--rad-md) !important; box-shadow: var(--glass-edge) !important;
}
.num-working-vals { color: var(--violet-300) !important; }
.num-detail-glyph { background: var(--grad-aurora) !important; color:#fff !important;
  box-shadow: 0 8px 18px -8px rgba(124,92,255,.7) !important; }
.num-disclaimer {
  background: var(--glass-fill-1) !important; border-left: 3px solid var(--pop-violet) !important;
  color: var(--ink-500) !important; border-radius: var(--rad-sm) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   10. БЛОК 5 · ВКЛАДКА «Я» — glass-строки/карты, тёплый/холодный акцент
   id-strip тихая; «Ещё о себе» — тонкие стеклянные строки-входы с цветным
   корешком-иконкой (warm=золото / cool=cyan); периоды — стеклянные пилюли.
   ════════════════════════════════════════════════════════════════════════════ */
.id-name { color: var(--ink-100) !important; }
.id-meta { color: var(--ink-500) !important; }
.id-edit {
  width: 40px !important; height: 40px !important;
  background: var(--glass-fill-1) !important;
  border: var(--glass-stroke) !important; color: var(--ink-300) !important;
  -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
  box-shadow: var(--glass-edge) !important;
}
@media (hover:hover) { .id-edit:hover { color: var(--pop-violet) !important; border-color: rgba(111,79,245,.45) !important; background: rgba(255,255,255,.85) !important; } }

.sub-title { color: var(--ink-300) !important; font-family: var(--font-display) !important; }

/* вторичные входы — стеклянные строки-карты (не голые строки: премиально парят) */
.entry-row {
  background: var(--glass-fill-1) !important;
  border: var(--glass-stroke) !important; border-radius: var(--rad-md) !important;
  margin-bottom: 10px !important; padding: 14px !important;
  box-shadow: var(--shadow-1), var(--glass-edge) !important;
}
.entry-row:first-of-type { border-top: var(--glass-stroke) !important; }
.entry-row--warm .entry-ic { color: var(--pop-sun) !important;  background: rgba(245,166,35,.14) !important;
  box-shadow: 0 6px 16px -8px rgba(245,166,35,.5); }
.entry-row--cool .entry-ic { color: var(--pop-cyan) !important; background: rgba(22,184,207,.12) !important;
  box-shadow: 0 6px 16px -8px rgba(22,184,207,.5); }
.entry-row--hd .entry-ic { color: var(--pop-violet) !important; background: rgba(111,79,245,.14) !important;
  box-shadow: 0 6px 16px -8px rgba(111,79,245,.5); }
.entry-title { color: var(--ink-100) !important; }
.entry-sub   { color: var(--ink-500) !important; }
.entry-go    { color: var(--ink-500) !important; }
@media (hover:hover) { .entry-row.tap:hover {
  border-color: rgba(111,79,245,.4) !important; transform: translateY(-2px);
  background: rgba(255,255,255,.8) !important;
  box-shadow: var(--shadow-2), var(--glow-violet) !important; }
  .entry-row.tap:hover .entry-go { color: var(--pop-violet) !important; } }
.entry-row.tap:active { transform: scale(.985); }

/* ── Флагман: Мета-портрет — визуально «главнее» остальных карточек ──────── */
.entry-row--flagship {
  background: linear-gradient(135deg, rgba(111,79,245,.10), rgba(22,184,207,.07)) !important;
  border-color: rgba(111,79,245,.32) !important;
  box-shadow: var(--shadow-2), var(--glow-violet) !important;
}
.entry-row--flagship .entry-ic {
  color: #fff !important;
  background: linear-gradient(135deg, var(--pop-violet), var(--pop-cyan)) !important;
  box-shadow: 0 8px 20px -8px rgba(111,79,245,.7) !important;
}
.entry-row--flagship .entry-title { font-weight: 700 !important; }

/* ── Экран «Мета-портрет» ────────────────────────────────────────────────── */
.syn-body { display: block; }
.syn-meta { font-size: 13px; color: var(--ink-500); margin: 2px 0 6px; }
.syn-meta b { color: var(--ink-300); }
.syn-hint, .syn-method { font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }
.syn-hint { margin: 8px 0 4px; }
.syn-method { margin-top: 18px; padding-top: 12px; border-top: var(--glass-stroke); font-style: italic; }

.syn-sec { margin-top: 20px; }
.syn-h2 { font-family: var(--font-display, inherit); font-size: 19px; color: var(--ink-100); margin: 0 0 12px; }
.syn-h2-sub { font-size: 13px; font-weight: 400; color: var(--ink-500); font-family: var(--font-body); }

/* Ядро — стеклянная карта с акцентной левой кромкой */
.syn-core { padding: 15px !important; margin-bottom: 11px !important; border-left: 3px solid var(--pop-violet) !important; }
.syn-core-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.syn-core-label { font-size: 16px; font-weight: 700; color: var(--ink-100); }
.syn-core-meaning { font-size: 13px; color: var(--ink-300); margin: 6px 0 8px; line-height: 1.5; }
.syn-core-say { font-size: 14px; color: var(--ink-100); line-height: 1.6; margin: 0; }

/* Чипы слоёв — «какие языки сошлись» (суть триангуляции) */
.syn-chips { display: inline-flex; gap: 5px; }
.syn-chip { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.syn-chip--astrology   { color: var(--pop-violet); background: rgba(111,79,245,.13); }
.syn-chip--numerology  { color: var(--pop-cyan);   background: rgba(22,184,207,.14); }
.syn-chip--human_design{ color: var(--pop-sun);    background: rgba(245,166,35,.15); }
.syn-chip--psychology  { color: #1a9d6b;           background: rgba(26,157,107,.14); }

/* ── Экран «Большая пятёрка» (тест + результат) ──────────────────────────── */
.bf-scale-legend { display: flex; justify-content: space-between; font-size: 11.5px;
  color: var(--ink-500); margin: 4px 2px 12px; }
.bf-item { padding: 14px !important; margin-bottom: 10px !important; }
.bf-item-text { font-size: 14.5px; color: var(--ink-100); font-weight: 600; margin-bottom: 11px; line-height: 1.4; }
.bf-scale { display: flex; gap: 6px; justify-content: space-between; }
.bf-dot { flex: 1; aspect-ratio: 1; min-width: 0; border-radius: 50%;
  border: var(--glass-stroke); background: var(--glass-fill-1); color: var(--ink-500);
  font-size: 13px; font-weight: 600; font-family: var(--font-body);
  display: flex; align-items: center; justify-content: center; transition: transform .1s, background .15s; }
.bf-dot.is-on { background: linear-gradient(135deg, var(--pop-violet), var(--pop-cyan)) !important;
  color: #fff !important; border-color: transparent !important; transform: scale(1.08);
  box-shadow: 0 6px 16px -8px rgba(111,79,245,.6); }
.bf-dot.tap:active { transform: scale(.9); }
.bf-submit { width: 100%; margin-top: 14px; }

.bf-trait { padding: 15px !important; margin-bottom: 10px !important; }
.bf-trait-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bf-trait-name { font-size: 15.5px; font-weight: 700; color: var(--ink-100); }
.bf-trait-lvl { font-size: 12px; color: var(--ink-500); }
.bf-bar { height: 8px; border-radius: 999px; background: var(--glass-fill-1);
  border: var(--glass-stroke); overflow: hidden; margin: 9px 0; }
.bf-bar-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--pop-cyan), var(--pop-violet)); }
.bf-trait-blurb { font-size: 13px; color: var(--ink-300); line-height: 1.5; margin: 0; }
.bf-outro { padding: 16px !important; margin-top: 14px !important; }
.bf-outro p { font-size: 14px; color: var(--ink-100); line-height: 1.55; margin: 0 0 12px; }
.bf-actions { display: flex; flex-direction: column; gap: 8px; }
.bf-actions .cta { width: 100%; }

/* ── Экран «Сегодня» (дневной хаб) ───────────────────────────────────────── */
.today-card { display: flex; gap: 13px; align-items: flex-start; padding: 15px !important; margin-bottom: 11px !important; }
.today-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  background: var(--glass-fill-1); border: var(--glass-stroke); }
.today-card--violet .today-ic { box-shadow: 0 6px 16px -8px rgba(111,79,245,.5); }
.today-card--cyan .today-ic   { box-shadow: 0 6px 16px -8px rgba(22,184,207,.5); }
.today-card--sun .today-ic    { box-shadow: 0 6px 16px -8px rgba(245,166,35,.5); }
.today-num { font-size: 24px; font-weight: 800; color: var(--pop-cyan);
  font-family: var(--font-display, inherit); }
.today-main { min-width: 0; }
.today-kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-500); }
.today-lead { font-size: 15.5px; font-weight: 700; color: var(--ink-100); margin: 2px 0 5px; line-height: 1.35; }
.today-sub { font-size: 13.5px; color: var(--ink-300); line-height: 1.55; margin: 0; }
.today-card.is-glow { border-color: rgba(22,184,207,.4) !important; box-shadow: var(--shadow-2), 0 10px 30px -12px rgba(22,184,207,.4) !important; }
.today-deep { width: 100%; margin-top: 6px; }
.today-sk { margin-top: 4px; }
.today-sk-row { height: 82px; border-radius: var(--rad-md); margin-bottom: 11px;
  background: linear-gradient(100deg, var(--glass-fill-1) 30%, rgba(255,255,255,.85) 50%, var(--glass-fill-1) 70%);
  background-size: 220% 100%; animation: synShimmer 1.3s infinite; }
.low-fx .today-sk-row { animation: none; }

/* ── Экран «Спросить карту» (диалог) ─────────────────────────────────────── */
.ask-thread { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 14px;
  min-height: 30vh; max-height: 62vh; overflow-y: auto; }
.ask-empty { text-align: center; padding: 18px 6px; }
.ask-empty-t { font-size: 14px; color: var(--ink-300); line-height: 1.55; margin: 0 0 14px; }
.ask-chips { display: flex; flex-direction: column; gap: 8px; }
.ask-chip { text-align: left; font-family: var(--font-body); font-size: 13.5px;
  color: var(--ink-100); background: var(--glass-fill-1); border: var(--glass-stroke);
  border-radius: 14px; padding: 11px 14px; box-shadow: var(--glass-edge); }
.ask-chip.tap:active { transform: scale(.98); }
.ask-msg { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.6; }
.ask-msg p { margin: 0 0 8px; }
.ask-msg p:last-child { margin-bottom: 0; }
.ask-msg--user { align-self: flex-end; color: #fff;
  background: linear-gradient(135deg, var(--pop-violet), var(--pop-cyan));
  border-bottom-right-radius: 5px; }
.ask-msg--bot { align-self: flex-start; color: var(--ink-100);
  background: var(--glass-fill-1); border: var(--glass-stroke);
  border-bottom-left-radius: 5px; box-shadow: var(--glass-edge); }
.ask-typing { display: inline-flex; gap: 5px; align-items: center; }
.ask-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-500);
  opacity: .5; animation: askBlink 1.1s infinite; }
.ask-typing span:nth-child(2) { animation-delay: .18s; }
.ask-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes askBlink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); } }
.low-fx .ask-typing span { animation: none; }
.ask-inputbar { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 0 max(10px, env(safe-area-inset-bottom)); }
.ask-input { flex: 1; resize: none; font-family: var(--font-body); font-size: 15px;
  color: var(--ink-100); background: var(--glass-fill-1); border: var(--glass-stroke);
  border-radius: 18px; padding: 12px 15px; line-height: 1.4; max-height: 120px; }
.ask-input:focus { outline: none; border-color: rgba(111,79,245,.5); }
.ask-send { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--pop-violet), var(--pop-cyan)); border: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -8px rgba(111,79,245,.6); }
.ask-send.tap:active { transform: scale(.92); }
.ask-quota { text-align: center; font-size: 12px; color: var(--ink-500); margin: 6px 0 2px; }
.ask-quota--out { color: var(--ink-300); }
.ask-quota--out b { color: var(--pop-violet); cursor: pointer; }

/* ── Экран «Линия жизни» ─────────────────────────────────────────────────── */
.tl-add { display: flex; gap: 8px; margin-bottom: 16px; }
.tl-year { width: 78px; flex: 0 0 auto; }
.tl-label { flex: 1; min-width: 0; }
.tl-year, .tl-label { font-family: var(--font-body); font-size: 15px; color: var(--ink-100);
  background: var(--glass-fill-1); border: var(--glass-stroke); border-radius: 14px; padding: 11px 13px; }
.tl-year:focus, .tl-label:focus { outline: none; border-color: rgba(111,79,245,.5); }
.tl-add-btn { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; font-size: 26px;
  line-height: 1; color: #fff; border: 0;
  background: linear-gradient(135deg, var(--pop-violet), var(--pop-cyan));
  box-shadow: 0 8px 20px -8px rgba(111,79,245,.6); }
.tl-add-btn.tap:active { transform: scale(.92); }
.tl-empty { text-align: center; color: var(--ink-500); font-size: 14px; padding: 20px 8px; }
.tl-line { position: relative; padding-left: 22px; }
.tl-line::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--pop-violet), var(--pop-cyan)); opacity: .35; border-radius: 2px; }
.tl-item { position: relative; margin-bottom: 12px; }
.tl-dot { position: absolute; left: -22px; top: 16px; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--pop-bg, #fff); box-shadow: 0 0 0 2px currentColor; }
.tl-dot--tense { color: #e0632c; background: #e0632c; }
.tl-dot--soft { color: #1a9d6b; background: #1a9d6b; }
.tl-dot--neutral { color: var(--pop-violet); background: var(--pop-violet); }
.tl-card { padding: 13px 14px !important; }
.tl-card-head { display: flex; align-items: center; justify-content: space-between; }
.tl-year.num, .tl-card .tl-year { font-size: 17px; font-weight: 800; color: var(--pop-violet);
  width: auto; padding: 0; background: none; border: 0; font-family: var(--font-display, inherit); }
.tl-del { width: 26px; height: 26px; border-radius: 50%; border: var(--glass-stroke);
  background: var(--glass-fill-1); color: var(--ink-500); font-size: 17px; line-height: 1; }
.tl-del.tap:active { transform: scale(.9); }
.tl-label { display: block; width: auto; padding: 0; background: none; border: 0;
  font-size: 14.5px; color: var(--ink-100); font-weight: 600; margin: 4px 0 0; }
.tl-theme { font-size: 13px; line-height: 1.5; margin-top: 8px; padding-top: 8px;
  border-top: var(--glass-stroke); color: var(--ink-300); }
.tl-theme--tense { color: #b6491f; }
.tl-theme--soft { color: #157a54; }

/* Напряжения — полюса ↔ */
.syn-tension { padding: 15px !important; margin-bottom: 11px !important; border-left: 3px solid var(--pop-cyan) !important; }
.syn-tension-title { font-size: 15px; font-weight: 700; color: var(--ink-100); }
.syn-poles { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.syn-pole { font-size: 12px; font-weight: 600; color: var(--ink-300); padding: 3px 10px; border-radius: 999px; background: var(--glass-fill-1); border: var(--glass-stroke); }
.syn-pole-vs { color: var(--pop-cyan); font-weight: 700; }
.syn-tension-body { font-size: 14px; color: var(--ink-100); line-height: 1.6; margin: 0; }

/* Зоны роста */
.syn-grow { margin: 0; padding-left: 18px; }
.syn-grow li { font-size: 13.5px; color: var(--ink-300); line-height: 1.55; margin-bottom: 7px; }

/* Скелет загрузки */
.syn-skeleton { margin-top: 16px; }
.syn-sk-row { height: 92px; border-radius: var(--rad-md); margin-bottom: 11px;
  background: linear-gradient(100deg, var(--glass-fill-1) 30%, rgba(255,255,255,.85) 50%, var(--glass-fill-1) 70%);
  background-size: 220% 100%; animation: synShimmer 1.3s infinite; }
@keyframes synShimmer { to { background-position: -220% 0; } }
.low-fx .syn-sk-row { animation: none; }

/* периоды — стеклянные пилюли */
.period-btn {
  background: var(--glass-fill-1) !important; color: var(--ink-300) !important;
  border: var(--glass-stroke) !important; font-family: var(--font-body) !important;
  border-radius: var(--rad-pill) !important; box-shadow: var(--glass-edge) !important;
}
@media (hover:hover) { .period-btn.tap:hover {
  border-color: rgba(111,79,245,.4) !important; color: var(--pop-violet) !important; } }

/* ════════════════════════════════════════════════════════════════════════════
   11. БЛОК 6 · ОБЩИЕ ПОТОКИ — форма / онбординг / загрузка / состояния
   Единый стеклянный язык на ключевых поверхностях (инпуты/кнопки/карты).
   ════════════════════════════════════════════════════════════════════════════ */
.cosmos .form input, .cosmos .form select, .cosmos #time, input, select {
  background: var(--glass-fill-1) !important; color: var(--ink-100) !important;
  border: var(--glass-stroke) !important; border-radius: var(--rad-sm) !important;
  box-shadow: var(--glass-edge) !important;
}
.cosmos .form input::placeholder { color: var(--ink-500) !important; }
.cosmos .form input:focus-visible, .cosmos .form select:focus-visible,
input:focus-visible, select:focus-visible {
  border-color: rgba(111,79,245,.7) !important;
  box-shadow: 0 0 0 3px rgba(111,79,245,.22), var(--glass-edge) !important;
}
label, .cosmos .form label { color: var(--ink-500) !important; }
.topnav {
  background: var(--glass-fill-1) !important; border: var(--glass-stroke) !important;
  color: var(--ink-100) !important; border-radius: var(--rad-pill) !important;
  -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
  box-shadow: var(--glass-edge) !important;
}
.topnav span { color: var(--pop-coral) !important; }
.onb-list li::before { color: var(--pop-sun) !important; }
.onb-foot, .hint-text { color: var(--ink-500) !important; }
.state-card.glass .state-emoji { color: var(--pop-sun) !important; }
/* загрузочный орбит — неон-точка */
.loading-title { color: var(--ink-100) !important; }

/* год силы / num-card (entry-row уже стеклянные выше) — стикер «готово» */
.power-card { position: relative; }
.power-card.is-ready::after {
  content: "готово ✦"; position: absolute; top: -10px; right: 14px;
  font: 800 11px var(--font-display); letter-spacing: -.01em;
  background: var(--pop-lime); color:#1c2b06; padding: 4px 10px; border-radius: var(--rad-pill);
  box-shadow: 0 0 0 2.5px rgba(255,255,255,.95), 0 6px 14px -6px rgba(86,66,150,.4);
  transform: rotate(4deg);
  animation: sticker-pop .5s var(--spring) both;
}
@keyframes sticker-pop { 0%{transform:scale(.5) rotate(4deg);opacity:0;} 60%{transform:scale(1.12) rotate(2deg);} 100%{transform:scale(1) rotate(4deg);opacity:1;} }

/* ════════════════════════════════════════════════════════════════════════════
   12. ПЛАВАЮЩИЕ ПЛАНЕТЫ — атмосфера по краям. На СВЕТЛОМ глянцевые цветные орбы
   читаются (как стеклянные шарики на пастели); чуть приглушаем для воздушности
   и красим орбиты/искры в графит-пастель (белые штрихи на светлом исчезали).
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes pop-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-10px) } }
.cosmos-sky .planet { opacity: .7 !important; }
/* орбиты cosmos.css были белым штрихом (rgba(255,255,255,.10)) → на светлом
   невидимы; красим в очень мягкий лавандовый штрих. */
.cosmos-sky .orbit { border-color: rgba(111,79,245,.10) !important; }
.cosmos-sky .orbit-2 { border-color: rgba(255,82,119,.09) !important; }
/* искры cosmos.css белые → на светлом меняем на пастельно-фиолетовые точки */
.cosmos-sky .spark {
  background: radial-gradient(circle, rgba(111,79,245,.55) 1.5px, transparent 2px) !important;
}
.cosmos-sky .planet-1 { animation: pop-float 6s ease-in-out infinite !important; }
.cosmos-sky .planet-2 { animation: pop-float 8s ease-in-out infinite !important; }
.cosmos-sky .planet-3 { animation: pop-float 7s ease-in-out infinite .6s !important; }

/* ════════════════════════════════════════════════════════════════════════════
   13. ДОСТУПНОСТЬ / REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cosmos-sky .planet-1, .cosmos-sky .planet-2, .cosmos-sky .planet-3,
  .year-stage .now-glow, .tab.is-active::before, .power-card.is-ready::after,
  .yd-card.is-generating::after, .mark::before,
  .wheel-poly, .wheel-metric, .wheel-message {
    animation: none !important;
  }
  .year-stage .now-glow { transform: translateX(-50%) !important; }
  .mark::before { transform: rotate(-1.6deg) scaleX(1) !important; }
  .yd-card.is-generating::after { opacity: 1 !important; }
  .sk-shimmer { animation: none !important; background: rgba(124,92,255,.12) !important; }
  .hd-fold-chev { transition: none !important; }
}

/* ── НИЗКАЯ ГРАФИКА (слабые телефоны): можно отключить блюр глобально, выставив
   на <html>/<body> класс .low-fx (если JS добавит) — fail-soft, контракт цел. */
.low-fx .glass, .low-fx .tabbar, .low-fx .rs-hero, .low-fx .rs-sec,
.low-fx .num-cell, .low-fx .num-detail, .low-fx .rs-share, .low-fx .cta-ghost,
.low-fx .id-edit, .low-fx .topnav, .low-fx .hd-hero, .low-fx input, .low-fx select {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: var(--glass-fill-1) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   11. БЛОК 6 · КОЛЕСО БАЛАНСА (Wheel of Life) — светлое стекло + pop-акценты
   Радар из самооценок сфер, слайдеры 0–10, метрика округлости, тренд.
   Тон бережный: «внимание»=тёплый янтарь (не тревога), «наполнено»=cyan.
   ════════════════════════════════════════════════════════════════════════════ */
/* Резервируем высоту (svg ≈ квадрат) — нет прыжка «загрузка → радар» (CLS). */
.wheel-viz {
  max-width: 320px; min-height: 264px; margin: 4px auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.wheel-svg { width: 100%; height: auto; display: block; overflow: visible; }
.wheel-ring  { fill: none; stroke: rgba(124,92,255,.15); stroke-width: 1; }
/* Внешнее кольцо чуть плотнее — рамка колеса читается на белом стекле. */
.wheel-ring--edge { stroke: rgba(124,92,255,.30); stroke-width: 1.4; }
.wheel-spoke { stroke: rgba(124,92,255,.11); stroke-width: 1; }
.wheel-poly {
  fill: rgba(111,79,245,.20);
  stroke: var(--pop-violet); stroke-width: 2.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 18px rgba(111,79,245,.28));
  /* Живой drag тянется 1:1 (JS обновляет точки без пересборки svg); анимируем
     ТОЛЬКО появление — при открытии/сохранении, не на каждый шаг слайдера. */
  transform-box: fill-box; transform-origin: center;
  animation: wheel-poly-in .55s var(--ease-out) both;
}
@keyframes wheel-poly-in { from { transform: scale(.72); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Вершины: нейтраль — тихая точка; крайние сферы кричат цветом+размером+гало
   (pre-attentive: «где пусто / где полно» видно, не считая по осям). */
.wheel-dot { fill: var(--pop-violet); stroke: #fff; stroke-width: 1.4; }
.wheel-dot.is-attention {              /* ≤3 — тёплый янтарь, зона внимания (не тревога) */
  fill: var(--pop-sun); r: 4.6;
  filter: drop-shadow(0 0 5px rgba(245,166,35,.70));
}
.wheel-dot.is-bright {                  /* ≥8 — наполнено */
  fill: var(--pop-cyan); r: 4.6;
  filter: drop-shadow(0 0 5px rgba(22,184,207,.60));
}

/* Метрика: два стеклянных чипа (округлость · наполненность). Появляются мягко —
   это ответ-payoff, не должен «моргнуть» на месте. */
@keyframes wheel-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wheel-metric  { display: flex; gap: 10px; margin: 0 0 12px; animation: wheel-rise .42s var(--ease-out) both; }
.wheel-message { animation: wheel-rise .42s var(--ease-out) .04s both; }
.wheel-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px; text-align: center;
  background: var(--glass-fill-2); border: var(--glass-stroke);
  border-radius: var(--rad-md); box-shadow: var(--shadow-1), var(--glass-edge);
}
.wheel-chip-num {
  font-size: 26px; line-height: 1; font-weight: 800;
  background: var(--grad-aurora); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--pop-violet);
}
.wheel-chip-lbl { font-size: 12px; color: var(--ink-500); }
.wheel-message {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--glass-fill-1); border: var(--glass-stroke);
  border-left: 3px solid var(--pop-violet);
  border-radius: var(--rad-sm); color: var(--ink-700);
  box-shadow: var(--glass-edge); font-size: 15px; line-height: 1.5;
}

/* Слайдеры сфер — стеклянные строки */
.wheel-sliders { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.wheel-row {
  padding: 12px 14px;
  background: var(--glass-fill-1); border: var(--glass-stroke);
  border-radius: var(--rad-md); box-shadow: var(--shadow-1), var(--glass-edge);
}
.wheel-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wheel-row-name { font-size: 15px; font-weight: 650; color: var(--ink-900); }
.wheel-row-val {
  font-size: 20px; font-weight: 800; min-width: 1.6em; text-align: right;
  color: var(--violet-300);
}
.wheel-row-meaning { margin-top: 2px; font-size: 12.5px; color: var(--ink-400); }

/* range 0–10: aurora-заливка трека + крупный тач-палец.
   height:44 = тач-таргет ≥44pt (§14.D); трек WebKit/Firefox центрирует сам.
   touch-action:pan-y — вертикальный свайп прокручивает список сфер, горизонталь двигает значение. */
.wheel-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 2px 0;
  background: transparent; cursor: pointer;
  touch-action: pan-y;
}
.wheel-slider::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--pop-violet), var(--pop-blue)) no-repeat,
              rgba(124,92,255,.14);
  background-size: 100% 100%;
}
.wheel-slider::-moz-range-track {
  height: 8px; border-radius: 999px; background: rgba(124,92,255,.16);
}
.wheel-slider::-moz-range-progress {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--pop-violet), var(--pop-blue));
}
.wheel-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--pop-violet);
  box-shadow: 0 4px 12px -3px rgba(111,79,245,.55);
}
.wheel-slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--pop-violet);
  box-shadow: 0 4px 12px -3px rgba(111,79,245,.55);
}
.wheel-slider:focus-visible { outline: none; }
.wheel-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pop-violet) 30%, transparent);
}

/* Тренд: как менялась округлость от замера к замеру */
.wheel-history {
  margin-top: 20px; padding: 8px 16px 14px;
  background: var(--glass-fill-1); border: var(--glass-stroke);
  border-radius: var(--rad-lg); box-shadow: var(--shadow-1), var(--glass-edge);
}
.wheel-hist-title { font-size: 17px; margin: 10px 0 6px; color: var(--ink-900); }
.wheel-hist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid rgba(124,92,255,.10);
}
.wheel-hist-date { flex: 1; color: var(--ink-500); font-size: 14px; }
.wheel-hist-round { font-size: 17px; font-weight: 800; color: var(--violet-300); }
.wheel-tr { font-size: 12.5px; font-weight: 700; min-width: 4.2em; text-align: right; }
.wheel-tr.up   { color: var(--pop-lime); }
.wheel-tr.down { color: var(--pop-sun); }
.wheel-tr.flat { color: var(--ink-400); font-weight: 600; }

/* «Что дальше» после сохранения замера — мягкое приглашение вернуться */
.wheel-next {
  margin: 2px 0 14px; padding: 12px 16px;
  background: linear-gradient(135deg, rgba(111,79,245,.10), rgba(47,109,255,.08));
  border: var(--glass-stroke); border-radius: var(--rad-sm);
  color: var(--ink-700); font-size: 14.5px; line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════════
   14. ДИЗАЙН ЧЕЛОВЕКА (Human Design) — бодиграф-линза (subview из «Я»)
   Светлое стекло + фиолетовый акцент HD. HERO-арка: Тип (доминанта) → Стратегия/
   Авторитет (JTBD) → барометр Сигнатура/Не-Я. Глубина — за details по тапу.
   ════════════════════════════════════════════════════════════════════════════ */
.hd-body { display: block; }

/* ── «Дизайн сегодня» — Today-полоса НАД HERO (ведомый дневной слой) ──────── */
/* Слот пуст, пока /today грузится или при сбое — :empty схлопывается, без скачка. */
.hd-today-slot:empty { display: none; }
.hd-today {
  margin: 2px 0 14px; padding: 14px 16px; border-radius: var(--rad-lg);
  background: linear-gradient(150deg, rgba(111,79,245,.10), rgba(47,109,255,.07));
  border: 1px solid rgba(111,79,245,.22); box-shadow: var(--glass-edge);
  animation: hd-today-in .26s var(--ease-out) both;
}
/* Погода дня (без точного времени) — тёплый янтарный акцент, как gated stable-chip */
.hd-today--collective {
  background: linear-gradient(150deg, rgba(245,166,35,.11), rgba(255,255,255,.42));
  border-color: rgba(245,166,35,.28);
}
.hd-today-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 5px;
}
.hd-today-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pop-violet);
}
.hd-today--collective .hd-today-kicker { color: #a86a12; }
.hd-today-date { font-size: 11.5px; font-weight: 700; color: var(--ink-500); }
.hd-today-lead { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.34; color: var(--ink-900); }
.hd-today-sub  { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-500); }
.hd-today-foot { margin: 8px 0 0; font-size: 11.5px; font-style: italic; color: var(--ink-400); }
@keyframes hd-today-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hd-today { animation: none; } }

/* ── HERO: одна доминанта — Тип ── */
.hd-hero {
  margin: 4px 0 14px; padding: 22px 20px 20px;
  background:
    linear-gradient(160deg, rgba(111,79,245,.16), rgba(47,109,255,.12) 60%, rgba(255,94,126,.10)),
    var(--glass-fill-3);
  -webkit-backdrop-filter: blur(var(--glass-blur-3)) saturate(1.5);
          backdrop-filter: blur(var(--glass-blur-3)) saturate(1.5);
  border: 1px solid rgba(111,79,245,.28);
  border-radius: var(--rad-xl);
  box-shadow: var(--shadow-3), var(--glass-edge-strong), 0 0 44px -14px rgba(111,79,245,.5);
}
.hd-kicker {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pop-violet); margin-bottom: 6px;
}
.hd-type {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(27px, 8.2vw, 36px); line-height: 1.05; color: var(--ink-900);
  margin: 0 0 16px;
}
.hd-type--gated { font-size: clamp(22px, 6.4vw, 28px); }

/* Стратегия + Авторитет — пара «как решать/действовать» (главная практика экрана) */
.hd-decide { display: grid; gap: 10px; }
.hd-decide-row {
  display: grid; gap: 3px; padding: 12px 14px;
  background: rgba(255,255,255,.62); border: var(--glass-stroke);
  border-radius: var(--rad-sm); box-shadow: var(--glass-edge);
}
.hd-decide-lbl {
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pop-violet);
}
.hd-decide-val { font-size: 16px; font-weight: 600; line-height: 1.32; color: var(--ink-900); }
.hd-decide-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-500); }

/* P1 «Практика» — как ПРИМЕНЯТЬ Стратегию/Авторитет (инлайн под decide, над барометром) */
.hd-practice {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(111,79,245,.18);
  display: grid; gap: 12px;
}
.hd-practice-title {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pop-violet);
}
.hd-practice-item {
  display: grid; gap: 3px; padding: 12px 14px;
  background: rgba(255,255,255,.5); border: var(--glass-stroke);
  border-radius: var(--rad-sm); box-shadow: var(--glass-edge);
}
.hd-practice-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-400);
}
.hd-practice-head { margin: 2px 0 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink-900); }
.hd-practice-body { margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-700); }
.hd-practice-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-500); }

/* Барометр Сигнатура/Не-Я — тихий, с иконкой (цвет не единственный сигнал) */
.hd-barometer { margin-top: 14px; display: grid; gap: 8px; }
.hd-baro {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: var(--rad-sm); font-size: 13.5px;
}
.hd-baro--good { background: rgba(16,159,110,.12); border: 1px solid rgba(16,159,110,.28); }
.hd-baro--warn { background: rgba(214,158,46,.14); border: 1px solid rgba(214,158,46,.32); }
.hd-baro-ic { flex: none; }
.hd-baro--good .hd-baro-ic { color: #0e8f63; }
.hd-baro--warn .hd-baro-ic { color: #a86a12; }
.hd-baro-lbl { color: var(--ink-500); font-weight: 600; }
.hd-baro-val { font-weight: 800; text-align: right; }
.hd-baro--good .hd-baro-val { color: #0e7c57; }
.hd-baro--warn .hd-baro-val { color: #935c0f; }
.hd-baro-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-500); }

/* Факты ниже сгиба: Профиль, Крест */
.hd-fact {
  margin-bottom: 10px; padding: 15px 16px; border-radius: var(--rad-lg);
}
.hd-fact-lbl {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pop-violet); margin-bottom: 5px;
}
.hd-fact-val { display: block; font-size: 16px; font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.hd-fact-val .num { font-weight: 800; }
.hd-fact-note { margin: 7px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-500); }
.hd-gates-row { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hd-gate {
  display: grid; gap: 2px; justify-items: center; padding: 8px 4px;
  background: rgba(111,79,245,.07); border-radius: var(--rad-xs);
}
.hd-gate-lbl { font-size: 10.5px; color: var(--ink-500); text-align: center; line-height: 1.2; }
.hd-gate-num { font-size: 18px; font-weight: 800; color: var(--violet-300); }

/* Раскрытие «глубже» — details/summary (клавиатура + тач, без hover-зависимости) */
.hd-deep-title, .hd-next-title {
  margin: 18px 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-400);
}
.hd-fold { margin-bottom: 10px; border-radius: var(--rad-lg); overflow: hidden; }
.hd-fold-sum {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 13px 16px;
  font-size: 15px; font-weight: 700; color: var(--ink-900);
}
.hd-fold-sum::-webkit-details-marker { display: none; }
.hd-fold-chev { color: var(--pop-violet); font-size: 18px; transition: transform var(--d-base) var(--ease-out); }
.hd-fold[open] .hd-fold-chev { transform: rotate(180deg); }
.hd-fold-sum:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(124,92,255,.5); border-radius: var(--rad-lg); }
.hd-fold-body { padding: 2px 16px 16px; }
.hd-fold-note { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-500); }
.hd-fold-note b { color: var(--ink-700); font-weight: 700; }

/* Центры: определённые (залиты) vs открытые (контур) */
.hd-centers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hd-center { padding: 10px 12px; border-radius: var(--rad-sm); }
.hd-center.is-defined {
  background: linear-gradient(135deg, rgba(111,79,245,.16), rgba(47,109,255,.10));
  border: 1px solid rgba(111,79,245,.34);
}
.hd-center.is-open {
  background: rgba(255,255,255,.5); border: 1px dashed rgba(111,79,245,.34);
}
.hd-center-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.hd-center-name { font-size: 14px; font-weight: 800; color: var(--ink-900); }
.hd-center-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hd-center.is-defined .hd-center-tag { color: var(--pop-violet); }
.hd-center.is-open .hd-center-tag { color: var(--ink-400); }
.hd-center-mean { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--ink-500); }
/* Виток 2: центры с богатым текстом по состоянию — одна колонка читабельнее для 2-3 фраз */
.hd-centers--rich { grid-template-columns: 1fr; }
.hd-centers--rich .hd-center { padding: 12px 14px; }
.hd-center-kw { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--pop-violet); }
.hd-center.is-open .hd-center-kw { color: var(--ink-400); }
.hd-centers--rich .hd-center-mean { font-size: 13px; line-height: 1.5; color: var(--ink-700); }
/* Агрегат-нота «много открытых центров» — позитивная (дары, не дыры) */
.hd-openmany {
  margin: 0 0 12px; padding: 12px 14px; border-radius: var(--rad-sm);
  font-size: 13px; line-height: 1.55; color: var(--ink-700);
  background: linear-gradient(135deg, rgba(111,79,245,.1), rgba(47,109,255,.07));
  border: 1px solid rgba(111,79,245,.22); border-left: 3px solid var(--pop-violet);
}

/* Каналы — чипы */
.hd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-chip {
  padding: 7px 13px; border-radius: var(--rad-pill); font-size: 14px; font-weight: 800;
  color: var(--violet-300);
  background: linear-gradient(135deg, rgba(111,79,245,.14), rgba(47,109,255,.10));
  border: 1px solid rgba(111,79,245,.3);
}

/* Виток 2: каналы — имя + текст-дар (вместо голого чипа) */
.hd-channels { display: grid; gap: 8px; }
.hd-channel {
  padding: 12px 14px; border-radius: var(--rad-sm);
  background: linear-gradient(135deg, rgba(111,79,245,.1), rgba(47,109,255,.07));
  border: 1px solid rgba(111,79,245,.24);
}
.hd-channel-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hd-channel-name { font-size: 14px; font-weight: 800; color: var(--ink-900); }
.hd-channel-code { font-size: 13px; font-weight: 800; color: var(--pop-violet); flex: none; }
.hd-channel-text { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-700); }

/* Активации — две колонки Личность / Дизайн */
.hd-act { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.hd-act-title {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pop-violet); margin-bottom: 6px;
}
.hd-act-row {
  display: grid; gap: 2px;
  padding: 6px 0; border-top: 1px solid rgba(124,92,255,.1);
}
.hd-act-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hd-act-planet { font-size: 13px; color: var(--ink-700); }
.hd-act-gate { font-size: 14px; font-weight: 800; color: var(--ink-900); }
/* Виток 2b(A): имя архетипа линии — акцент рядом с ворота.линия */
.hd-act-line { font-size: 11px; font-weight: 700; color: var(--pop-violet); letter-spacing: .01em; }
/* Виток 2: тема ворот под planet·gate.line */
.hd-act-theme { font-size: 11.5px; line-height: 1.35; color: var(--ink-500); }
/* Виток 2b(A): кейнот линии — самая тихая строка (не спорит с темой ворот) */
.hd-act-keynote { font-size: 11px; line-height: 1.35; color: var(--ink-400); }

/* Виток 2b(A): легенда 6 архетипов линий (один фолд, не в активациях) */
.hd-line-archs { display: grid; gap: 8px; }
.hd-line-arch {
  padding: 11px 13px; border-radius: var(--rad-sm);
  background: rgba(111,79,245,.06); border: 1px solid rgba(111,79,245,.18);
}
.hd-line-arch-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; }
.hd-line-arch-num {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff; border-radius: 999px;
  background: linear-gradient(135deg, var(--pop-violet), var(--violet-300));
}
.hd-line-arch-name { font-size: 14px; font-weight: 800; color: var(--ink-900); }
.hd-line-arch-kw { font-size: 11.5px; font-weight: 700; color: var(--pop-violet); }
.hd-line-arch-long { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-700); }

/* Виток 2b(B): имя+источник креста воплощения под RU-заголовком */
.hd-cross-en { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--ink-500); }

/* Gated: stable_reference как честный мини-результат + CTA уточнить время */
.hd-stable {
  margin-bottom: 12px; padding: 16px; border-radius: var(--rad-lg);
}
.hd-stable-title { display: block; font-size: 13px; font-weight: 700; color: var(--ink-700); margin-bottom: 10px; }
.hd-stable-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.hd-stable-chip {
  display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--rad-sm);
  background: linear-gradient(135deg, rgba(245,166,35,.14), rgba(255,255,255,.5));
  border: 1px solid rgba(245,166,35,.3);
}
.hd-stable-lbl { font-size: 11px; font-weight: 700; color: var(--ink-500); letter-spacing: .04em; }
.hd-stable-gate { font-size: 15px; font-weight: 800; color: var(--ink-900); }
/* Виток 2: имя+тема 2 устойчивых ворот — обогащает gated-путь */
.hd-stable-name { margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--ink-700); }
.hd-stable-theme { font-size: 11.5px; line-height: 1.35; color: var(--ink-500); }
.hd-gated-msg { color: var(--ink-700); font-size: 15px; line-height: 1.6; }
.hd-gated-msg p { margin: 0 0 10px; }
.hd-gated-msg p:last-child { margin-bottom: 0; }
.hd-time-cta { margin-top: 14px; width: 100%; }

/* Skeleton — намёк на бодиграф (не спиннер) */
.hd-skeleton { display: block; }
.sk-shimmer {
  border-radius: var(--rad-lg); margin-bottom: 12px;
  background: linear-gradient(100deg, rgba(124,92,255,.08) 30%, rgba(124,92,255,.18) 50%, rgba(124,92,255,.08) 70%);
  background-size: 220% 100%; animation: hd-sk 1.3s ease-in-out infinite;
}
.hd-sk-hero { height: 190px; border-radius: var(--rad-xl); }
.hd-sk-row  { height: 62px; }
.hd-sk-fold { height: 52px; }
@keyframes hd-sk { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* P0 «заметить»: attention (где холодно, янтарь) / bright (опора, cyan) — приглашение, не диагноз */
.wheel-focus { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.wheel-focus-line {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--rad-sm);
  background: var(--glass-fill-1); border: var(--glass-stroke);
  box-shadow: var(--glass-edge); color: var(--ink-700);
  font-size: 14.5px; line-height: 1.5;
}
.wheel-focus-line b { color: var(--ink-900); font-weight: 700; }
.wheel-focus-ic { flex: none; font-size: 15px; line-height: 1.55; }
.wheel-focus-att { border-left: 3px solid var(--pop-sun); }
.wheel-focus-att .wheel-focus-ic { color: var(--pop-sun); }
.wheel-focus-brt { border-left: 3px solid var(--pop-cyan); }
.wheel-focus-brt .wheel-focus-ic { color: var(--pop-cyan); }

/* P2 overlay: призрак прошлого замера + легенда */
.wheel-poly-prev {
  fill: rgba(47,109,255,.08); stroke: var(--pop-blue); stroke-width: 1.6;
  stroke-dasharray: 4 3; stroke-linejoin: round; opacity: .55;
}
.wheel-legend {
  margin: -8px 0 14px; text-align: center;
  font-size: 12.5px; color: var(--ink-500);
}

/* P1 focus-picker: выбрать сферу-фокус + заметка на память */
.wheel-commit {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--glass-fill-1); border: var(--glass-stroke);
  border-radius: var(--rad-lg); box-shadow: var(--shadow-1), var(--glass-edge);
}
.wheel-commit-title { font-size: 17px; margin: 0 0 4px; color: var(--ink-900); }
.wheel-commit-hint { font-size: 13px; color: var(--ink-500); margin: 0 0 12px; line-height: 1.45; }
.wheel-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.wheel-chip-pick {
  padding: 8px 13px; border-radius: var(--rad-pill);
  font-size: 13.5px; font-weight: 600; color: var(--ink-700);
  background: var(--glass-fill-2); border: 1px solid rgba(124,92,255,.20);
  cursor: pointer; min-height: 38px;
}
.wheel-chip-pick.is-sel {
  color: #fff; background: var(--grad-cta); border-color: transparent;
  box-shadow: 0 6px 14px -6px rgba(124,92,255,.6);
}
.wheel-note {
  width: 100%; box-sizing: border-box; margin-bottom: 12px;
  padding: 11px 14px; font-size: 14.5px; color: var(--ink-900);
  background: #fff; border: var(--glass-stroke); border-radius: var(--rad-sm);
}
.wheel-note::placeholder { color: var(--ink-400); }
.wheel-note:focus-visible {
  outline: none; border-color: var(--pop-violet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pop-violet) 24%, transparent);
}
.wheel-commit-done { margin: 10px 0 0; font-size: 13.5px; color: var(--pop-cyan); font-weight: 600; }

/* P1: фокус-заметка в строке истории */
.wheel-hist-item { border-top: 1px solid rgba(124,92,255,.10); }
.wheel-hist-item .wheel-hist-row { border-top: 0; }
.wheel-hist-focus { padding: 0 0 8px 2px; font-size: 12.5px; color: var(--ink-500); line-height: 1.4; }

/* P4 синергия: «где сошлось с числами» — линза-приглашение (виток 2) */
.wheel-synergy {
  margin: 0 0 16px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(111,79,245,.09), rgba(22,184,207,.06));
  border: var(--glass-stroke); border-radius: var(--rad-md); box-shadow: var(--glass-edge);
}
.wheel-syn-head { font-size: 13px; font-weight: 700; color: var(--ink-900); margin-bottom: 8px; }
.wheel-syn-line { display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.5; color: var(--ink-700); margin: 7px 0; }
.wheel-syn-ic { flex: none; color: var(--pop-violet); font-size: 14px; line-height: 1.55; }

/* Удаление ошибочного замера — тихая × справа в строке истории */
.wheel-hist-row { position: relative; }
.wheel-hist-del {
  margin-left: 4px; width: 26px; height: 26px; flex: none;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--ink-400); font-size: 18px; line-height: 1; cursor: pointer;
}
.wheel-hist-del:hover, .wheel-hist-del:active { color: var(--pop-coral); background: rgba(255,82,119,.08); }

/* РАЗБОР КОЛЕСА (наставник): intro → «с чего начать» карточки → фокус → замыкание */
.wheel-reading { margin: 0 0 18px; }
.wheel-read-intro {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--glass-fill-1); border: var(--glass-stroke);
  border-left: 3px solid var(--pop-violet); border-radius: var(--rad-sm);
  color: var(--ink-800, var(--ink-700)); font-size: 15px; line-height: 1.55;
  box-shadow: var(--glass-edge);
}
.wheel-read-title { font-size: 18px; margin: 6px 0 10px; color: var(--ink-900); }
.wheel-read-lift {
  margin: 0 0 10px; padding: 14px 16px; border-radius: var(--rad-lg);
  background: var(--glass-fill-2); box-shadow: var(--shadow-1), var(--glass-edge);
}
.wheel-read-lift-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.wheel-read-lift-name { font-size: 15.5px; font-weight: 700; color: var(--ink-900); }
.wheel-read-lift-score {
  flex: none; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; background: var(--pop-sun);
}
.wheel-read-lift p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-700); }
.wheel-read-focus {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0;
  padding: 13px 16px; border-radius: var(--rad-sm);
  background: linear-gradient(135deg, rgba(255,82,119,.08), rgba(111,79,245,.08));
  border: var(--glass-stroke); color: var(--ink-700); font-size: 14.5px; line-height: 1.5;
}
.wheel-read-focus-ic { flex: none; color: var(--pop-coral); font-size: 15px; }
.wheel-read-closing { margin: 6px 2px 0; font-size: 14px; line-height: 1.5; color: var(--ink-500); font-style: italic; }

/* Подписи сфер на радаре — что и где точка (имя + балл), обновляются вживую */
.wheel-label { font-size: 9.5px; fill: var(--ink-500); font-weight: 600; }
.wheel-label-name { fill: var(--ink-700, #3a3357); }
.wheel-label-val { fill: var(--ink-900); font-weight: 800; }
.wheel-label.is-attention .wheel-label-val { fill: var(--pop-sun); }
.wheel-label.is-bright .wheel-label-val { fill: var(--pop-cyan); }

/* Ось важности: toggle «★ важно» на сфере + подсказка */
.wheel-sliders-hint { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--ink-500); }
.wheel-sliders-hint b { color: var(--pop-sun); font-weight: 700; }
.wheel-row-head { gap: 8px; }
.wheel-imp {
  margin-left: auto; padding: 4px 10px; border-radius: var(--rad-pill);
  font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  color: var(--ink-400); background: transparent;
  border: 1px solid rgba(124,92,255,.22); min-height: 30px;
}
.wheel-imp.is-on {
  color: #fff; background: var(--pop-sun); border-color: transparent;
  box-shadow: 0 4px 12px -5px rgba(245,166,35,.6);
}
.wheel-row-val { margin-left: 8px; }