/* ===========================================================================
   «ЛИЧНОСТЬ» → P2 «НЕБЕСНЫЕ ТЕЛА». Стили редизайна.

   ИЗОЛЯЦИЯ — ПРЕФИКС КЛАССОВ .p2-* (плюс корень секции .pers2), а НЕ вложенность
   в .pers2: часть узлов редизайна живёт вне секции — «малая система» шапки висит
   на #persSphere классом .p2-sys. Ни один узел СТАРОГО рендера класса p2-* не несёт:
   во всём app.js строка 'p2-' живёт ровно в одном месте — в гейтованной флагом ветке
   persSkinSphere (плюс её комментарий), которая и вешает .p2-sys. Поэтому ни один селектор старого рендера
   не переопределён и файл можно подключать безусловно: при выключенном ASTROBOT_PERS2
   ни .pers2, ни .p2-sys на страницу не попадают.

   ОГРАНИЧЕНИЯ, ЗАФИКСИРОВАННЫЕ КОНЦЕПТОМ (нарушение = блокер приёмки):
   • НИ ОДНОГО filter: blur() и backdrop-filter — слабые Android LatAm;
     свечение собирается из radial-gradient и одного box-shadow;
   • НИ ОДНОГО обрезания текста: ни -webkit-line-clamp, ни text-overflow —
     «…» на этой вкладке были главной претензией приёмки;
   • prefers-reduced-motion → полная статика.
   =========================================================================== */

.pers2 { position: relative; }

/* Кикер раздела («ТВОИ ТЕЛА» / «ТВОЙ БАЛАНС» / «ОСЬ УЗЛОВ» / «ЧЁРНАЯ ЛУНА»):
   первый экран наконец отвечает на вопрос «где я». Живёт ВНУТРИ #pers-body, а не
   в шапке: шапку перерисовывает не секция, а persSkinSphere/persAttachShrink —
   лезть туда значит трогать код с историей багов «пустая шапка после возврата». */
.p2-kick, .p2-kick2 {
  margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--hint);
}
.p2-kick2 { margin: 18px 0 6px; }

/* ---------- сводка (кадр P2/07) ----------
   Подпись и чипы стоят В ОДНУ СТРОКУ, как в кадре, но БЕЗ фиксированной колонки:
   flex-wrap переносит чипы на свою строку там, где «СИЛА В» длиннее (fr/pt длиннее ru на
   треть). Ради этого и переделано из блочной укладки: три строки сводки съедали 196 px
   первого экрана, и четвёртое тело уходило за 844. */
.p2-sum { margin: 0 0 10px; }
.p2-sum-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 6px; }
.p2-sum-row + .p2-sum-row { margin-top: 8px; }
.p2-sum-lab { margin: 0; flex: none; font-size: 11px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--hint); }
.p2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; flex: 1 1 auto; }
/* ⟨правка основателя 2026-08-09⟩ «не очевидно, что по планетам можно тыкать»:
   чип получает аффорданс кнопки — заливка, яркая рамка и «›» хвостом. Глиф —
   ::after, разметка не тронута; язык тот же, что у живых кнопок приложения. */
.p2-chip {
  appearance: none; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: var(--text); font: inherit; font-size: 14.5px; line-height: 1.2;
  padding: 8px 12px 8px 14px; border-radius: 999px; cursor: pointer;
  box-shadow: inset 0 0 0 0 transparent;
}
.p2-chip::after { content: "›"; margin-left: 7px; color: var(--accent, #b388ff); font-weight: 700; opacity: .85; }
.p2-chip[data-el] { border-color: var(--el-glow); color: var(--text);
  background: color-mix(in srgb, var(--el-glow) 12%, transparent); }
/* color-mix нет в старых WebView → остаётся общий rgba-фон строкой выше: деградация тихая */
.p2-chip:active { transform: scale(.97); }

/* ---------- лента тел: волосяные разделители вместо рамок ----------
   Ноль контейнеров, ноль шевронов «›», ноль «…»: различие несут сами тела
   (свой цвет, размер и фактура у каждой сферы), а не одинаковые прямоугольники. */
.p2-list { display: block; }
.p2-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 14px;
  width: 100%; text-align: left; background: none; border: 0; border-radius: 0;
  /* 12, а не 18: без резюме строка-спутник несёт кикер + заголовок, и лишний воздух
     стоил четвёртого тела на первом экране (390×844) — в fr/pt/it, где заголовок ложится
     в две строки, дороже всего */
  padding: 12px 0; color: inherit; font: inherit; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.p2-row:active { background: rgba(255,255,255,.03); }
.p2-row-tx { display: block; min-width: 0; }
.p2-row-kick {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--el, var(--hint));
  /* перенос, а не обрезка: у длинных локалей кикер обязан жить во второй строке */
  overflow-wrap: anywhere;
}
.p2-row-ttl { display: block; margin-top: 4px; font-size: 19px; line-height: 1.25; font-weight: 800;
  color: var(--text); letter-spacing: -.2px; }
.p2-row-sum { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--hint); }
.p2-row.hero { padding-top: 6px; }
.p2-row.hero .p2-row-ttl { font-size: 24px; line-height: 1.2; }
.p2-row.hero .p2-row-sum { margin-top: 6px; line-height: 1.5; color: rgba(242,238,251,.86); }

/* восьмое тело — не строка-ошибка, а честная пустая орбита.
   ⟨2026-09-11⟩ cursor:default снят вместе с самим дефектом: строка стала настоящей
   <button> и ведёт в лист «чего не хватает» (openPersMissingSheet) — тем же жестом,
   что и её собственный CTA внутри. Курсор/подсветка .p2-row теперь не врут. */
.p2-eighth .p2-row-ttl { color: var(--accent); }
.p2-add.ps-add { margin-top: 10px; }

/* ---------- сферы: серверный PNG (тот же, что в рассылке) ---------- */
.p2-sph { display: block; width: var(--d); height: var(--d); flex: none; position: relative; }
.p2-sph img { display: block; width: 100%; height: 100%; }
/* пустая орбита Асцендента: пунктирное кольцо без тела */
.p2-sph-empty { border-radius: 50%; border: 1px dashed rgba(179,136,255,.45); }

/* ---------- ГРОЗДЬ СТИХИЙ ----------
   Диаметр приходит из JS как --d (∝ √доли: долю кодирует ПЛОЩАДЬ). Здесь только
   материя: радиальный градиент + один box-shadow, пересечения — mix-blend-mode. */
.p2-cluster {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  margin: 4px 0 6px; min-height: 300px; align-items: center; justify-items: center;
}
.p2-el-cell {
  position: relative; width: 100%; min-height: 150px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit;
}
.p2-el-orb {
  display: block; width: var(--d); height: var(--d); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, var(--el) 42%, #150f2c 100%);
  box-shadow: 0 0 26px -4px var(--el-glow);
  mix-blend-mode: screen;
}
/* сдвиг четырёх сфер к центру — гроздь, а не сетка из четырёх иконок */
.p2-el-cell[data-slot="0"] .p2-el-orb { transform: translate(14px, 12px); }
.p2-el-cell[data-slot="1"] .p2-el-orb { transform: translate(-14px, 12px); }
.p2-el-cell[data-slot="2"] .p2-el-orb { transform: translate(14px, -12px); }
.p2-el-cell[data-slot="3"] .p2-el-orb { transform: translate(-14px, -12px); }
/* стихии нет (0 %) — пустое кольцо на её месте, а не отсутствие объекта */
.p2-el-cell.zero .p2-el-orb { background: none; box-shadow: none;
  border: 1px dashed var(--el-glow); mix-blend-mode: normal; }
.p2-el-cell.on .p2-el-orb { box-shadow: 0 0 30px -2px var(--el-glow), 0 0 0 2px var(--el-glow); }
/* подпись — РЯДОМ со сферой, во внешнем углу ячейки: перевод на pt/fr длиннее ru
   на треть и внутрь круга не влезет ни при каком кегле */
.p2-el-lab { position: absolute; display: block; max-width: 96%;
  /* подпись может лечь на светлую сферу — тень (не filter: blur!) держит контраст */
  text-shadow: 0 1px 3px rgba(6,4,16,.92), 0 0 10px rgba(6,4,16,.8); }
.p2-el-cell[data-slot="0"] .p2-el-lab { top: 0; left: 0; text-align: left; }
.p2-el-cell[data-slot="1"] .p2-el-lab { top: 0; right: 0; text-align: right; }
.p2-el-cell[data-slot="2"] .p2-el-lab { bottom: 0; left: 0; text-align: left; }
.p2-el-cell[data-slot="3"] .p2-el-lab { bottom: 0; right: 0; text-align: right; }
.p2-el-nm { display: block; font-size: 11px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--el); }
/* ступень набрана НЕ как ссылка и НЕ синим: статус и навигация не могут выглядеть
   одинаково — иначе человек пытается нажать на слово «ведущая» */
.p2-el-rung { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(242,238,251,.82); }
.p2-el-even { margin: 2px 0 0; text-align: center; font-size: 13.5px; color: var(--text); }
.p2-el-approx { margin: 6px 0 0; text-align: center; font-size: 12.5px; color: var(--hint); }
/* КНОПКА «? Как это посчитано» СПРЯТАНА ⟨FIX_PERS2_1 п.2⟩ — правило .p2-how оставлено
   ради возврата одной строкой; разметку больше никто не печатает. */
.p2-how { display: block; margin: 12px auto 18px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); background: transparent; color: var(--hint);
  font: inherit; font-size: 13px; cursor: pointer; }
.p2-how:active { transform: scale(.97); }
/* На её месте — подсказка о жесте. Набрана как подпись (не как кнопка и не ссылкой):
   тыкать надо в СФЕРУ, и строка не должна собирать тапы на себя. */
.p2-el-tap { margin: 10px 0 20px; text-align: center; font-size: 12.5px; line-height: 1.45;
  color: var(--hint); }
/* та же подпись в «Характере» (правка основателя 2026-08-09): стоит между ведущим
   телом и строками планет — нижний отступ меньше, ряд начинается сразу под ней */
.p2-ch-tap { margin: 2px 0 4px; }

/* разборы стопкой: все четыре сразу, тап по сфере перелетает к нужному */
.p2-el-body { border-top: 1px solid rgba(255,255,255,.06); padding-top: 16px; }
.p2-el-body + .p2-el-body { margin-top: 26px; }
/* подсветка «я тебя сюда привёз»: заголовок вспыхивает цветом своей стихии и гаснет.
   Только тень и цвет — ни рамки, ни фона (контейнеров на этом экране нет). */
.p2-el-hit { animation: p2ElHit 1.4s ease-out 1; }
@keyframes p2ElHit {
  0% { color: var(--el, var(--text)); text-shadow: 0 0 18px var(--el-glow, transparent); }
  70% { color: var(--el, var(--text)); text-shadow: 0 0 10px var(--el-glow, transparent); }
  100% { color: var(--text); text-shadow: none; }
}
.p2-el-h { margin: 0; font-size: 24px; font-weight: 800; color: var(--text); }
.p2-el-h-rung { margin: 2px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--el, var(--hint)); }
/* --el/--el-soft/--el-glow приходят из общего токен-блока styles.css по data-el —
   второго словаря цветов стихий в проекте заводить нельзя (разъедутся на первой правке). */
.p2-el-desc { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--text); }
/* грани стихии — строки с волосяными разделителями вместо карточки в карточке */
.p2-quals { margin-top: 16px; }
/* 38 %, а не 34: в ru самое длинное имя грани («Чувствительность») в 34 % не влезало и
   разрывалось посреди слова — теперь оно ложится целиком; текст справа от этого не
   страдает (проверено на 360/390, а на ≤359 колонки и так расходятся) */
.p2-q { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0,1fr); gap: 12px;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); }
/* длинное слово («Чувствительность») обязано переноситься, а не наезжать на текст
   справа: теперь на экране печатаются грани ВСЕХ четырёх стихий, и столкновение
   встречается на первом же профиле */
.p2-q-l { font-size: 14.5px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.p2-q-t { font-size: 14px; line-height: 1.5; color: var(--hint); }

/* ---------- КАРМА: ось, а не два пункта ---------- */
.p2-k-intro p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.p2-k-intro .p2-kick2 { margin: 20px 0 6px; }
.p2-k-not { color: var(--hint) !important; font-size: 14px !important; }
.p2-k-axis { position: relative; margin: 22px 0 4px; padding-left: 26px; }
/* сама ось — пунктир между узлами */
.p2-k-axis::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 0;
  border-left: 1px dashed rgba(179,136,255,.42); }
.p2-k-stop { position: relative; padding: 0 0 22px; }
.p2-k-dot { position: absolute; left: -26px; top: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff5d8 0%, var(--gold) 45%, #7a5a17 100%);
  box-shadow: 0 0 12px -2px rgba(255,217,138,.7); }
/* приглушённые точки — у запертых остановок: позиция на оси видна всегда */
.p2-k-stop.lock .p2-k-dot { background: radial-gradient(circle at 34% 30%, #cdbcf5 0%, #7c5cd2 55%, #2b2050 100%);
  box-shadow: 0 0 10px -3px rgba(124,92,210,.7); }
.p2-k-tx { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0;
  color: inherit; font: inherit; cursor: pointer; position: relative; }
.p2-k-kick { display: block; padding-right: 34px; font-size: 11px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--hint); overflow-wrap: anywhere; }
.p2-k-ttl { display: block; margin-top: 5px; font-size: 19px; line-height: 1.25; font-weight: 800; color: var(--text); }
.p2-k-stop.lock .p2-k-ttl { color: rgba(242,238,251,.82); }
.p2-k-sum { display: block; margin-top: 7px; font-size: 14.5px; line-height: 1.55; color: var(--hint); }
.p2-k-astra { position: absolute; top: 0; right: 0; }
.p2-k-seg { margin: 12px 0 2px; font-size: 13px; line-height: 1.5; font-style: italic; color: var(--hint); }
.p2-k-upsell { display: block; width: 100%; text-align: left; margin: 6px 0 8px; padding: 16px 15px;
  border-radius: 20px; border: 1px solid rgba(179,136,255,.35);
  background: radial-gradient(120% 100% at 90% -20%, rgba(179,136,255,.20), rgba(34,26,61,0) 62%), var(--card);
  color: inherit; font: inherit; cursor: pointer; }
.p2-k-up-h { display: block; font-size: 17px; font-weight: 800; color: var(--text); }
.p2-k-up-b { display: block; margin: 8px 0 12px; font-size: 13.5px; line-height: 1.45; color: rgba(242,238,251,.85); }

/* ---------- ЛИЛИТ: тексты и тон не тронуты, распускаются только контейнеры ----------
   Разметку рисует прежний renderLilith (вместе с хеджем, шерингом и оговоркой про
   Селену) — здесь снимаются рамки и фоны, чтобы Лилит стала той же материей, что и
   три соседних подтаба. Цвета — её собственные, гранатовая линия остаётся. */
.pers2 .lil-shadow, .pers2 .lil-lock, .pers2 .lil-hook, .pers2 .lil-intro {
  background: none; border: 0; border-radius: 0; padding-left: 14px; padding-right: 0;
}
.pers2 .lil-shadow { border-left: 2px solid var(--lil); margin: 0 0 6px; padding-top: 16px; padding-bottom: 16px; }
.pers2 .lil-hook { border-left: 2px solid var(--lil); }
.pers2 .lil-intro { border-left: 1px solid rgba(255,255,255,.10); }
.pers2 .lil-lock { border-bottom: 1px solid rgba(255,255,255,.06); border-left: 0; padding: 18px 0; }
.pers2 .lil-lock .ll-ico { background: none; box-shadow: none; width: 26px; height: 26px; }
.pers2 .lil-lock.ll-hero::after { display: none; }
/* ⟨FIX_PERS2_1 п.5а⟩ «i» вводного абзаца — В СТРОКЕ надглавки «ЧЁРНАЯ ЛУНА». Класс и
   хит-зона взяты у (i) транзитов (.fc-sec-i, 22 px кружок + 44 px ::before), поэтому
   размер пальца и вид кнопки во всём приложении один. Здесь только посадка: надглавка
   — обычный <p>, а не флекс-шапка секции, поэтому кружок ставится inline-flex рядом
   со словом, а не order:1 за линией-разделителем. */
.pers2 .lil-hook--i .lh-eyebrow { display: flex; align-items: center; gap: 8px; }
.pers2 .lil-i { order: 0; margin: -2px 0; }

/* ---------- ДЕТАЛЬ ГРАНИ ---------- */
.p2-detail { position: relative; }
/* НИ В КОЕМ СЛУЧАЕ НЕ overflow:hidden ПО КАРТОЧКЕ — обрезать сферу обязан край ЭКРАНА,
   а не прямоугольник контейнера на 16 px внутрь (прямое указание прототипа,
   P2/proto.html:170-171): при клипе по карточке диск и ореол получают рубленый
   вертикальный срез, и вместо «сферы краем» видна светлая прямая рамка PNG.
   Приём — ровно тот, что уже возит старая деталь (styles.css:2433 .pers-detail-hero):
   шапка выносится на всю ширину экрана отрицательными полями, и клип по X совпадает
   с краем экрана. overflow-x:clip (не hidden!) — он не делает элемент скролл-контейнером
   и НЕ режет по Y, поэтому вынос сферы вверх (top:-84px) остаётся виден. */
.p2-d-hero { position: relative; min-height: 200px; margin: 0 -16px; padding: 84px 16px 8px;
  /* фоллбэк для WebView < Chrome 90 (clip там отбрасывается): hidden убирает
     горизонтальное переполнение ценой обрезки выноса сферы вверх (overflow-y
     станет auto) — деградация видимая, но безопасная. Современные движки читают
     вторую декларацию и живут по clip. */
  overflow-x: hidden;
  overflow-x: clip; }
/* герой обрезан краем экрана — тело кажется больше экрана, а не иконкой в углу */
.p2-sph-bleed { position: absolute; top: -84px; right: -76px; }
/* резюме грани — лид детали (в списке его несёт только ведущее тело) */
.p2-d-sum { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: rgba(242,238,251,.88); }
.p2-d-ttl { position: relative; margin: 0; font-size: 30px; line-height: 1.12; font-weight: 800;
  letter-spacing: -.4px; color: var(--text); max-width: 74%; }
.p2-d-chip { position: relative; margin-top: 12px; }
/* пары «ключ → значение» до прозы: скелет для тех, кто не читает абзацы */
.p2-kvs { margin: 18px 0 6px; }
.p2-kv { display: grid; grid-template-columns: minmax(84px, 32%) minmax(0,1fr); gap: 12px;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); align-items: baseline; }
.p2-kv-k { font-size: 11px; font-weight: 800; letter-spacing: .10em; text-transform: uppercase;
  color: var(--hint); overflow-wrap: anywhere; }
.p2-kv-v { font-size: 15px; line-height: 1.45; color: var(--text); }
/* проза — вертикальный скролл с ИМЕНАМИ разделов вместо трёх немых точек свайпа */
.p2-prose { margin-top: 20px; }
.p2-prose section + section { margin-top: 20px; }
.p2-prose p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--text); }
.p2-prose-h { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--hint); }
/* хвост: мёртвой нижней половины больше нет */
.p2-tail { margin-top: 22px; }
.p2-tail-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.06);
  padding: 14px 0; color: inherit; font: inherit; cursor: pointer; }
.p2-tail-ttl { display: block; font-size: 15.5px; font-weight: 700; color: var(--text); }
.p2-tail-sub { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--hint); }
.p2-tail-go { font-size: 13.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
/* футер-плеер: следующая грань в одном тапе, возвращаться в список незачем */
.p2-player { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center;
  margin: 26px 0 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.06); }
.p2-pl-up, .p2-pl-go { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
  background: transparent; color: var(--text); font-size: 15px; cursor: pointer; }
.p2-pl-next { background: none; border: 0; padding: 0; text-align: center; color: inherit; font: inherit; cursor: pointer; }
.p2-pl-eyebrow { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--hint); }
.p2-pl-ttl { display: block; margin-top: 3px; font-size: 15.5px; font-weight: 700; color: var(--text); }

/* ---------- «МАЛАЯ СИСТЕМА» В ШАПКЕ ХАРАКТЕРА (кадр P2/01) ----------
   Семь тел на дуге вместо одного общего сиреневого шара: шапка «Характера» обязана
   отвечать на вопрос «что это за раздел» так же, как отвечают кольцо-доли на «Стихиях»
   и два узла на «Карме». Живёт в #persSphere — том же 56-px гнезде шапки, — но ТОЛЬКО
   при классе .p2-sys, который persSkinSphere вешает под килл-свитчом: базовый селектор
   .pers-sphere не тронут ни одной строкой, поэтому при выключенном флаге шапка прежняя.
   Материя — радиальные градиенты (палитра тел из broadcast_image.py, та же, что в
   прототипе) плюс один box-shadow: ни filter:blur, ни backdrop-filter, ни картинок. */
.pers-sphere.p2-sys {
  width: 90px; height: 79px; border-radius: 0;
  background: none; box-shadow: none; animation: none;
}
/* пунктирная орбита: у базового шара она ::before-кольцо вокруг диска — здесь это дуга
   системы, поэтому кольцо переставлено и увеличено (базовое правило не переопределяем
   глобально: селектор с .p2-sys) */
.pers-sphere.p2-sys::before {
  inset: auto; left: 6px; top: 0; width: 76px; height: 76px;
  border-color: rgba(179,136,255,.22); animation: spin 26s linear infinite;
}
.p2-sys-o {
  position: absolute; border-radius: 50%; display: block;
  background: radial-gradient(circle at 34% 28%, var(--hi) 0%, var(--mid) 44%, var(--sh) 100%);
  box-shadow: 0 0 var(--gr, 12px) var(--gs, 1px) var(--au, rgba(255,255,255,.16));
}
.p2-sys-o[data-b="sun"]     { --hi:#fff6dc; --mid:#f0c258; --sh:#8a5613; --au:rgba(240,194,88,.42); --gr:16px; --gs:2px; }
.p2-sys-o[data-b="moon"]    { --hi:#f6f8ff; --mid:#c2cce4; --sh:#585d78; --au:rgba(194,204,228,.30); --gr:12px; }
.p2-sys-o[data-b="mercury"] { --hi:#dad4c6; --mid:#9e988b; --sh:#4b4658; --au:rgba(158,152,139,.26); --gr:9px; }
.p2-sys-o[data-b="venus"]   { --hi:#fbf3de; --mid:#c89a5e; --sh:#543a2e; --au:rgba(200,154,94,.40); --gr:14px; --gs:2px; }
.p2-sys-o[data-b="mars"]    { --hi:#d98a57; --mid:#a8542f; --sh:#4a2115; --au:rgba(168,84,47,.34); --gr:11px; }
.p2-sys-o[data-b="jupiter"] { --hi:#e6cfa6; --mid:#c6884a; --sh:#5a3a22; --au:rgba(198,136,74,.34); --gr:13px; }
.p2-sys-o[data-b="saturn"]  { --hi:#ebdcb0; --mid:#c9a257; --sh:#3e2c17; --au:rgba(201,162,87,.30); --gr:10px; }
/* ведущее тело — крупнее и с более широкой аурой: та же иерархия, что в ленте ниже */
.p2-sys-o.lead { box-shadow: 0 0 20px 3px var(--au, rgba(255,255,255,.2)); }

/* ---- ШАПКА НА ОСТАЛЬНЫХ ТРЁХ ПОДТАБАХ ⟨FIX_PERS2_1 п.1⟩ ----
   Основатель: «вообще не нравится визуализация справа». Там стоял конический
   СЕКТОР-ГРАФИК долей (styles.css:2225, [data-skin="elements"]::after) — диаграмма
   вместо тела и второй пересказ того, что гроздь под ней уже говорит площадью.
   Гасим ::after у ЛЮБОГО подтаба под флагом (селектор с .p2-sys, базовое правило
   старого рендера не тронуто ни одной строкой) и рисуем ту же материю, что на
   «Характере»: орбита + тела-градиенты, разный только СОСТАВ системы. */
.pers-sphere.p2-sys::after { display: none; content: none; }
/* цвет орбиты — от раздела: золото у Кармы, гранат у Лилит (те же оттенки, что несли
   старые скины шапки, — палитра разделов не меняется, меняется только материя) */
.pers-sphere.p2-sys[data-sub="karma"]::before { border-color: rgba(255,217,138,.20); }
.pers-sphere.p2-sys[data-sub="lilith"]::before { border-color: rgba(216,70,110,.20); }
/* СТИХИИ: мини-гроздь. Цвета — те же токены стихий, что у большой грозди (--el/--el-glow
   из styles.css по data-el), второго словаря цветов в проекте быть не должно. */
.p2-sys-o[data-el] {
  background: radial-gradient(circle at 34% 28%, #ffffff 0%, var(--el) 46%, #150f2c 100%);
  box-shadow: 0 0 12px -2px var(--el-glow);
}
/* КАРМА: два узла и отрезок между ними — та же ось, что в секции (.p2-k-axis/.p2-k-dot).
   Северный золотой (куда зовёт), Южный приглушённо-сиреневый (что даётся само). */
.p2-sys-o[data-node="north"] {
  background: radial-gradient(circle at 34% 30%, #fff5d8 0%, var(--gold) 45%, #7a5a17 100%);
  box-shadow: 0 0 14px -2px rgba(255,217,138,.75);
}
.p2-sys-o[data-node="south"] {
  background: radial-gradient(circle at 34% 30%, #cdbcf5 0%, #7c5cd2 55%, #2b2050 100%);
  box-shadow: 0 0 10px -3px rgba(124,92,210,.7);
}
.p2-sys-ax { position: absolute; left: 44px; top: 20px; width: 0; height: 40px;
  border-left: 1px dashed rgba(255,217,138,.38); }
/* ЛИЛИТ: одна чёрная луна — затмённое ядро и тонкая гранатовая корона. Палитра её
   собственная (--lil/--lil-core/--lil-soft), ровно та, что несёт секция ниже. */
.p2-sys-o[data-lil] {
  background:
    radial-gradient(circle at 50% 50%, transparent 53%, var(--lil) 60%, transparent 71%),
    radial-gradient(circle at 38% 34%, #1b0f22 0%, var(--lil-core) 64%, #050309 100%);
  box-shadow: 0 0 12px 2px var(--lil-soft), 0 0 20px 5px rgba(111,29,64,.30);
}

/* ---------- узкий экран ---------- */
@media (max-width: 359px) {
  .p2-row { gap: 10px; }
  .p2-row.hero .p2-row-ttl { font-size: 21px; }
  .p2-row-ttl { font-size: 17.5px; }
  .p2-d-ttl { font-size: 25px; max-width: 78%; }
  .p2-cluster { min-height: 250px; }
  .p2-el-cell { min-height: 124px; }
  .p2-q { grid-template-columns: 1fr; gap: 4px; }
  .p2-kv { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- reduced-motion: вкладка полностью статична ---------- */
@media (prefers-reduced-motion: reduce) {
  .pers2 *, .pers2 *::before, .pers2 *::after { animation: none !important; transition: none !important; }
  .p2-row:active, .p2-chip:active, .p2-how:active { transform: none; }
  /* «Малая система» живёт в ШАПКЕ, а не внутри .pers2 — ни правило выше, ни класс-зеркало
     .p2-rm (его вешает секция в #pers-body) до неё не достают, а собственное правило
     .p2-sys::before перебивает reduce-глушилку styles.css:2364 просто потому, что
     pers2.css подключён позже. Гасим здесь явно. */
  .pers-sphere.p2-sys::before, .pers-sphere.p2-sys .p2-sys-o,
  .pers-sphere.p2-sys .p2-sys-ax { animation: none !important; }
}

/* ---------- планка «Рекомендации» в материи P2 ----------
   Тот же премиум-контракт (paywall('personality_reco'), lock_sub дословно, ✦), но
   волосяная линия вместо карточки: единственный контейнер, оставшийся на «Стихиях». */
.p2-reco { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; margin-top: 6px; padding: 18px 0; background: none; border: 0;
  border-top: 1px solid rgba(255,255,255,.06); color: inherit; font: inherit; cursor: pointer; }
.p2-reco .p2-kick2 { margin: 0 0 4px; }
.p2-reco-ttl { display: block; font-size: 17px; font-weight: 800; color: var(--text); }
.p2-reco-sub { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--hint); }

/* ---------- ЭКРАН РЕКОМЕНДАЦИЙ ⟨FIX_PERS2_1 п.4⟩ ----------
   Одна ось во всю ширину вместо двух колонок с ✓/✕: совет читается строкой, а не
   лесенкой из трёх слов (на 320 и в fr/pt старые колонки ломались первыми).
   Геометрия — та же, что у оси узлов «Кармы» (padding-left:26px, точка на -26px):
   один приём на всё приложение, а не второй словарь осей. */
.p2-rs { position: relative; }
.p2-rs-lead { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: rgba(242,238,251,.9); }
.p2-rs-axis { position: relative; margin: 22px 0 4px; padding-left: 26px; }
.p2-rs-axis::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 0;
  border-left: 1px dashed var(--el-glow, rgba(179,136,255,.42)); }
.p2-rs-grp + .p2-rs-grp { margin-top: 22px; }
.p2-rs-grp .p2-kick2 { margin: 0 0 10px; }
.p2-rs-row { position: relative; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); }
.p2-rs-grp .p2-rs-row:first-of-type { border-top: 0; }
.p2-rs-tx { display: block; font-size: 15px; line-height: 1.55; color: var(--text); }
/* «развивать» — полное тело своей стихии; «уравновесить» — пустая орбита того же
   цвета (приём .p2-sph-empty): противовес, а не «минус». Ни ✓, ни ✕ на экране нет. */
.p2-rs-orb { position: absolute; left: -26px; top: 17px; width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, var(--el, var(--accent)) 45%, #150f2c 100%);
  box-shadow: 0 0 12px -3px var(--el-glow, rgba(179,136,255,.6)); }
.p2-rs-row[data-kind="balance"] .p2-rs-orb { background: none; box-shadow: none;
  border: 1px dashed var(--el-glow, rgba(179,136,255,.6)); }

/* Класс-зеркало prefers-reduced-motion (его ставит pers2.js на корне секции): держит
   статику и там, где системную настройку не видно из CSS-медиазапроса (WebView). */
.p2-rm *, .p2-rm *::before, .p2-rm *::after { animation: none !important; transition: none !important; }