/* Личная карта — Mini App. Светлый воздушный стиль «Обсерватория». */

@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #5b8def;
}

/* Бумага экрана тоже переезжает между разделами (app.js: setSection) —
   регистрируем, чтобы переход был плавным, а не рывком. */
@property --bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #eef4ff;
}

:root {
  /* Зафиксированная светлая палитра — не следует за Telegram dark/light */
  color-scheme: light;
  --bg: #eef4ff;
  --card: #ffffff;
  --border: #e1e8f5;
  --fg: #1f2d3d;
  --muted: #7a8699;
  --link: #5b8def;
  --destructive: #e06666;
  --low: #5b8def;
  --mid: #f5b544;
  --high: #3fbf7f;
  --energy: #a66bff;
  /* Золото гербов и ночи Сонника; --gold-ink — читаемый вариант на бумаге. */
  --gold: #e9c27a;
  --gold-ink: #b8862b;
  --accent: #5b8def;
  --accent-2: color-mix(in srgb, var(--accent) 62%, #ffffff);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 30%, transparent);
  --radius: 22px;
  --shadow: 0 10px 30px rgba(31, 45, 61, 0.08);
  --shadow-lg: 0 18px 50px rgba(31, 45, 61, 0.14);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-ui: "Manrope", -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-serif: "Fraunces", "Georgia", "Times New Roman", serif;
}

html {
  transition: --accent 0.6s var(--ease), --bg 0.6s var(--ease);
}

/* ============================================================
   НОЧЬ — единственный тёмный раздел (Сонник)
   setSection("dreams") ставит <html data-night="1">: меняются только
   токены, компоненты берут цвета из них. Днём приложение светлое,
   как было; ночь — осознанное исключение (DESIGN.md § Ночь).
   ============================================================ */
:root[data-night="1"] {
  color-scheme: dark;
  --card: rgba(255, 255, 255, 0.06);
  --border: rgba(233, 194, 122, 0.16);
  --fg: #efeaff;
  --muted: #a59dcb;
  --energy: #b892ff;
  --energy-ink: #cdb6ff;
  --gold-ink: #e9c27a;
  --accent-2: color-mix(in srgb, var(--accent) 70%, #ffffff);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
}
:root[data-night="1"] body {
  background:
    radial-gradient(ellipse 90% 55% at 78% -8%, #2a2066 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at -10% 105%, #16275a 0%, transparent 55%),
    var(--bg);
}
/* Звёздная пыль — неподвижная: живёт небо на экране, не фон. */
.night-dust {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity 0.8s var(--ease);
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.85) 0.6px, transparent 1px),
    radial-gradient(circle, rgba(233, 194, 122, 0.7) 0.8px, transparent 1.2px);
  background-size: 31px 37px, 67px 59px;
  background-position: 0 0, 13px 21px;
}
:root[data-night="1"] .night-dust { opacity: 0.5; }
/* Звёздное небо Сонника (сентябрь 2026): неподвижные созвездия пунктиром
   (Ковш и Кассиопея) и одна падающая звезда раз в 17 с — редко, чтобы не
   надоедать. Тапов нет, reduced-motion — без метеора. */
.night-dust::before {
  content: ""; position: absolute; top: 4%; right: -6%; width: min(560px, 120vw); aspect-ratio: 4 / 3; opacity: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'><g fill='none' stroke='%23e6ddff' stroke-opacity='.16' stroke-width='.8' stroke-dasharray='2 4'><path d='M40 70 L92 58 L138 74 L176 96 L236 92 L250 136 L196 142 L176 96'/><path d='M292 212 L322 186 L348 214 L374 190 L392 222'/></g><g fill='%23fff'><circle cx='40' cy='70' r='1.6' opacity='.7'/><circle cx='92' cy='58' r='1.8' opacity='.8'/><circle cx='138' cy='74' r='1.5' opacity='.7'/><circle cx='176' cy='96' r='1.7' opacity='.8'/><circle cx='236' cy='92' r='2' opacity='.85'/><circle cx='250' cy='136' r='1.7' opacity='.75'/><circle cx='196' cy='142' r='1.5' opacity='.7'/><circle cx='292' cy='212' r='1.4' opacity='.6'/><circle cx='322' cy='186' r='1.7' opacity='.75'/><circle cx='348' cy='214' r='1.5' opacity='.7'/><circle cx='374' cy='190' r='1.8' opacity='.8'/><circle cx='392' cy='222' r='1.3' opacity='.6'/></g></svg>") center / contain no-repeat;
  transition: opacity 1.2s var(--ease);
}
:root[data-night="1"] .night-dust::before { opacity: 1; }
.night-dust::after {
  content: ""; position: absolute; top: 12%; left: 70%; width: 120px; height: 1.5px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 244, 220, 0.95));
  transform: rotate(-24deg);
}
:root[data-night="1"] .night-dust::after { animation: night-meteor 17s linear 3s infinite; }
@keyframes night-meteor {
  0% { opacity: 0; transform: translate(0, 0) rotate(154deg) scaleX(0.3); }
  1% { opacity: 1; }
  5% { opacity: 0; transform: translate(-260px, 120px) rotate(154deg) scaleX(1); }
  100% { opacity: 0; transform: translate(-260px, 120px) rotate(154deg); }
}
@media (prefers-reduced-motion: reduce) { :root[data-night="1"] .night-dust::after { animation: none; } }

/* Луна на ночном небе: ночная сторона диска — тёмное на тёмном, и
   виден был один серп. Под диском — пепельный свет и серебряный обод:
   лик Луны читается целиком, светлая часть по-прежнему серп фазы. */
.nx-head-moon, .nx-tome-moon, .nx-moon-disc { position: relative; }
.nx-head-moon::before, .nx-tome-moon::before, .nx-moon-disc::before {
  content: ""; position: absolute; inset: 6.8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 42% 38%, rgba(214, 205, 245, 0.26), rgba(120, 108, 176, 0.16) 62%, rgba(80, 70, 140, 0.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(230, 221, 255, 0.34), 0 0 14px 1px rgba(200, 188, 255, 0.18);
}
.nx-head-moon svg, .nx-tome-moon svg, .nx-moon-disc svg { position: relative; }
:root[data-night="1"] .orb-1 { background: #3b2a8c; opacity: 0.55; }
:root[data-night="1"] .orb-2 { background: #1c3a7a; opacity: 0.45; }
:root[data-night="1"] .orb-3 { opacity: 0.18; }
:root[data-night="1"] .btn.ghost {
  background: rgba(233, 194, 122, 0.08); color: var(--fg);
  border-color: rgba(233, 194, 122, 0.28); box-shadow: none;
}
/* Главная кнопка ночью — золото Луны, а не фиолет на фиолете. */
:root[data-night="1"] .btn.primary {
  color: #140f2c; border-color: transparent;
  background: linear-gradient(135deg, #f1d69c, #d9a955);
  box-shadow: 0 12px 30px -10px rgba(233, 194, 122, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root[data-night="1"] .tab { color: color-mix(in srgb, var(--gold) 55%, transparent); }
:root[data-night="1"] .tab.active { color: var(--gold); }
:root[data-night="1"] .tab::after { background: var(--gold); }
/* Ночью чернила — золото Луны, а не фиолет на фиолете. */
:root[data-night="1"] .tab-fab {
  color: #140f2c;
  background: radial-gradient(circle at 34% 28%, #fff3d6, #e9c27a 55%, #b8862b);
  box-shadow: 0 0 30px 2px rgba(233, 194, 122, 0.45), inset 0 -6px 12px rgba(80, 50, 0, 0.18);
}
:root[data-night="1"] .tab-fab-ring { border-color: rgba(233, 194, 122, 0.5); }
:root[data-night="1"] .tab-send { color: #140f2c; background: rgba(233, 194, 122, 0.12); }
:root[data-night="1"] .tab-send-ink { background: linear-gradient(135deg, #f1d69c, #d9a955); }
:root[data-night="1"] .entry-textarea,
:root[data-night="1"] .entry-seal { background: rgba(255, 255, 255, 0.05); box-shadow: none; }
:root[data-night="1"] .entry-kind-toggle { background: rgba(233, 194, 122, 0.07); border-color: var(--border); box-shadow: none; }
:root[data-night="1"] .entry-kind-toggle button.active { color: #140f2c; background: linear-gradient(135deg, #f1d69c, #d9a955); }

/* --- Веер записей над «+» (views.js: openFan) --- */
.fan-veil {
  position: fixed; inset: 0; z-index: 28; opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 55%, rgba(12, 12, 32, 0.28));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.3s var(--ease);
}
.fan-veil.is-on { opacity: 1; pointer-events: auto; }
.fan-petal {
  position: fixed; z-index: 31; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.4);
  display: grid; justify-items: center; gap: 6px; width: 76px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--fg);
}
.fan-petal.is-on { pointer-events: auto; }
.fan-petal-disc {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  box-shadow: 0 12px 26px -8px var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent);
}
.fan-petal-disc svg { width: 34px; height: 34px; }
.fan-petal:active .fan-petal-disc { transform: scale(0.94); }
.fan-petal-label { padding: 2px 8px; border-radius: 100px; background: color-mix(in srgb, var(--bg) 80%, transparent); }

/* --- Смена неба: сумерки (вход в ночь) и рассвет (выход) ---
   Слой поверх приложения на время смены экрана: ночь опускается сверху
   (`dusk`), день поднимается снизу (`dawn`). Только clip-path и opacity. */
.sky-shift { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.sky-shift.is-night {
  background:
    radial-gradient(ellipse at 72% 12%, #2a2066, transparent 60%),
    #0f0b24;
}
.sky-shift.is-night::after {
  content: ""; position: absolute; inset: 0; opacity: 0.55;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0.7px, transparent 1.1px);
  background-size: 31px 37px;
}
/* Портал: плитка меню растёт на весь экран, герб летит в заголовок. */
.portal-emblem { position: fixed; z-index: 61; pointer-events: none; }
.portal-emblem svg { width: 100%; height: 100%; display: block; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--bg) 88%, #ffffff) 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--bg) 92%, #ffffff) 0%, transparent 55%),
    var(--bg);
}

/* --- Фоновый холст спецэффектов (частицы, отклик, рябь) --- */
.fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.9;
}

/* --- Фон: дрейфующие орбы --- */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.orb {
  position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.42;
  animation: drift 26s var(--ease) infinite;
  transition: background 0.7s var(--ease);
}
.orb-1 { width: 340px; height: 340px; background: color-mix(in srgb, var(--accent) 55%, #ffffff); top: -90px; left: -70px; }
.orb-2 { width: 290px; height: 290px; background: color-mix(in srgb, var(--accent) 32%, #d7c2ff); bottom: -60px; right: -40px; animation-delay: -8s; }
.orb-3 { width: 250px; height: 250px; background: color-mix(in srgb, var(--accent) 40%, #bff0d8); top: 40%; left: 55%; animation-delay: -15s; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, 40px) scale(1.08); }
  66% { transform: translate(-24px, 20px) scale(0.96); }
}

.app { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: 20px 18px 40px; min-height: 100vh; }

/* --- Loader --- */
.loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 70vh; color: var(--muted); }

/* --- Первая загрузка (quill.js: bootPlay, жест `quill`) ---
   Одна SVG-сцена: перо широким кончиком рисует знак (компас / картуш с
   луной, по очереди), по буквам пишет «Живой дневник» и расписывается
   узором под названием. Подписи ниже меняются в такт — это тот же цикл. */
.boot { gap: 0; min-height: calc(100dvh - 180px); text-align: center; }
.boot-stage { display: block; width: min(340px, 100%, calc((100dvh - 170px) * 0.84)); height: auto; overflow: visible;
  filter: drop-shadow(0 0 16px rgba(217, 164, 65, 0.3)); }
/* В заставке край чернил чистый: неровность пера на знаке читалась как рваная линия. */
.boot-stage .qn-dry { filter: none; }
.boot-steps { position: relative; height: 22px; width: 100%; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.boot-steps span { position: absolute; left: 0; right: 0; opacity: 0; animation: boot-phrase 9s var(--ease) 1.6s infinite; }
.boot-steps span:nth-child(2) { animation-delay: 4.6s; }
.boot-steps span:nth-child(3) { animation-delay: 7.6s; }
.boot-slow { margin: 28px 0 0; font-size: 12.5px; color: var(--muted); opacity: 0; animation: boot-late 0.6s var(--ease) 9s forwards; }

@keyframes boot-phrase {
  0% { opacity: 0; transform: translateY(5px); }
  5%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes boot-late { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .boot-steps span { animation: none; }
  .boot-steps span:first-child { opacity: 1; }
  .boot-slow { animation: boot-late 0.01s linear 9s forwards; }
}
/* Загрузка внутри экрана — «перо пишет» (CONCEPT-LOADER.md): прямое
   перо с золотым наконечником выводит фразу раздела, строка тает вверх,
   следующий заход — росчерк. Разметку собирает Quill.writer (quill.js)
   из любого .loader-ring. Первые 0,3 с не видно ничего — быстрые ответы
   не мигают пером. Чернила — --accent раздела, ночью золото Луны. */
.loader-ring { --qw-ink: var(--accent); position: relative; width: min(280px, 100%); color: var(--qw-ink); animation: qw-in 0.35s var(--ease) 0.3s both; }
.qw-stage { position: relative; height: 112px; }
.qw-words { position: absolute; left: 0; top: 56px; width: 100%; height: 40px; overflow: visible; }
.qw-words text { font-family: var(--font-serif); font-style: italic; font-size: 20px; }
.qw-txt { fill: var(--fg); }
.qw-txtwet { fill: var(--qw-ink); filter: url(#qnWet); }
.qw-wordsg { will-change: opacity, transform; }
.qw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qw-pen { position: absolute; left: 0; top: 0; width: 34px; height: 105px; transform-origin: 17px 103px; will-change: transform;
  filter: drop-shadow(4px 8px 8px rgba(80, 50, 10, 0.18)); }
.qw-pen svg { width: 34px; height: 105px; display: block; overflow: visible; }
.qw-nib { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 20%, color-mix(in srgb, currentColor 70%, #fff) 45%, transparent 72%);
  box-shadow: 0 0 12px 3px color-mix(in srgb, currentColor 45%, transparent); }
.qw-shadow { position: absolute; left: 0; top: 0; width: 26px; height: 6px; margin: -3px 0 0 -13px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(60, 40, 10, 0.28), transparent 70%); filter: blur(1px); }
.qw-flour { position: absolute; left: 18px; right: 18px; top: 62px; width: calc(100% - 36px); height: 40px; overflow: visible; opacity: 0; }
/* Росчерк широким пером (quill.js: nib*): контур залит, толщина — от хода. */
.qw-flour .qw-wetink { fill: color-mix(in srgb, currentColor 55%, #fff); }
/* Чернила широкого пера — везде одинаково: неровный край и мокрый блеск. */
.qn-dry { filter: url(#qnRough); }
.qn-wet { filter: url(#qnWet); }
.qw-slow { margin: 4px 0 0; text-align: center; font-size: 12px; color: color-mix(in srgb, var(--fg) 50%, transparent); opacity: 0;
  animation: qw-in 0.6s var(--ease) 9s both; }
@keyframes qw-in { from { opacity: 0; } to { opacity: 1; } }
:root[data-night="1"] .loader-ring { --qw-ink: var(--gold); }
:root[data-night="1"] .qw-shadow { background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .loader-ring { animation: none; } }
/* Пока Летопись грузится, пустые «страницы стопки» не рисуем: они
   ложились пилюлей прямо под загрузку. */
.chronicle-stack:has(> .loader-ring)::before, .chronicle-stack:has(> .loader-ring)::after { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Экраны и переходы --- */
.screen {
  animation: slide-in 0.42s var(--ease) both;
  position: relative;
  z-index: 1;
  min-height: calc(100dvh - 88px);
  /* Прозрачный, не var(--bg) — .leaving в JS не выставляется (mount() сносит
     старый экран синхронно перед вставкой нового, они никогда не наложены),
     так что непрозрачный фон был не нужен и просто гасил дрейфующую ауру
     (.aurora) на каждом экране, а не только на политике. */
  background: transparent;
}
.screen.leaving {
  animation: slide-out 0.28s var(--ease) both;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}
@keyframes slide-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slide-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-18px); } }

h1 { font-family: var(--font-serif); font-size: 30px; font-weight: 500; margin: 6px 0 8px; letter-spacing: -0.5px; }
h2 { font-family: var(--font-serif); font-size: 25px; font-weight: 500; margin: 4px 0 10px; letter-spacing: -0.4px; }
p { line-height: 1.55; color: var(--fg); }

/* Экранная «‹ Назад» больше не показывается: возврат живёт в нижней
   панели (таб «Назад», views.js: goBack()). Кнопки остаются в разметке —
   у каждого экрана свой обработчик возврата, и таб просто кликает по
   [data-back] текущего экрана, не зная его маршрута. Исключение —
   политика и согласие: там таб-бар скрыт (setTabbarVisible(false)),
   поэтому единственный путь назад — экранная кнопка. */
.nav-back {
  display: none;
  background: none; border: none; color: var(--muted); font-size: 16px;
  padding: 6px 0; cursor: pointer; margin-bottom: 6px;
}
[data-screen="policy"]:not(.with-bar) .nav-back,
[data-screen="consent"] .nav-back { display: block; }

/* --- Кнопки: одна семья «бумага и чернила» ---
   Та же материя, что чернильница и пилюля нижней панели. Главная кнопка —
   чернила раздела с бликом сверху; вторичная — бумага, чуть тронутая
   акцентом, без стекла. Расходится только цвет раздела (--accent), форма
   одна: пилюля. */
.btn {
  width: 100%; border: none; border-radius: 100px; padding: 16px 22px;
  font-size: 16px; font-weight: 700; cursor: pointer; letter-spacing: 0.1px;
  transition: transform 0.15s var(--ease), box-shadow 0.25s var(--ease), opacity 0.2s, filter 0.2s;
}
.btn:active { transform: scale(0.965); }
.btn.primary {
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 80%, #0b1530));
  color: #fff;
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn.primary:active { filter: brightness(1.04); }
/* Вторичные кнопки разделов — бумага того же тона. Поверхность повторена
   у секционных кнопок ниже по файлу (.plan-cta, .support-chip,
   .dreams-subnav, .entry-kind-toggle): у каждой свои размеры и активные
   состояния, поэтому объединить их в один селектор нельзя. */
.btn.ghost {
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 6px 18px -12px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn.ghost { color: var(--fg); }
.btn.ghost:active { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 34%, transparent); }

/* Главное действие остаётся залитым — иначе на экране пропадает
   старший. Но кромка и внутренний блик те же, чтобы обе кнопки
   читались как один материал, просто разной плотности. */
.btn.primary {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn[disabled] { opacity: 0.55; pointer-events: none; }
/* Тихая кнопка: уйти или посмотреть. Текст цвета раздела, без подложки —
   рядом с главной кнопкой она не спорит за внимание. */
.btn-quiet {
  display: block; margin: 0 auto; padding: 12px 8px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 14.5px; font-weight: 700; color: color-mix(in srgb, var(--accent) 80%, var(--fg));
}
.btn-quiet:active { opacity: 0.7; }

/* --- Главный экран: карточки-разделы --- */
.home-top { text-align: left; margin-bottom: 2px; }
.home-eyebrow { display: block; font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.home-top h1 { margin: 0; }

.home-hero {
  display: flex; align-items: center; gap: 14px; width: 100%; border: none; text-align: left;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-lg); cursor: pointer; font-family: var(--font-ui);
  margin: 16px 0; transition: transform 0.18s var(--ease);
}
.home-hero:active { transform: scale(0.985); }
.home-hero[hidden],
.home-pair[hidden],
.home-row[hidden],
.home-chat-note[hidden] { display: none !important; }
/* Та же ловушка: display:flex у .tabbar/.tab/.tab-fab иначе перебивает
   атрибут hidden (авторский normal-стиль всегда выигрывает у UA-правила
   [hidden]{display:none}, вне зависимости от специфичности). Нужно и на
   .tab — «Карточка»/«Тесты» переключаются через hidden внутри таб-бара —
   и на .tab-fab, который renderHub() прячет тем же способом. */
.tabbar[hidden],
.tab[hidden],
.tab-gap[hidden],
.tab-fab[hidden] { display: none !important; }
/* Эмблема вместо кольца-счётчика: «12/12» на двузначном счёте вылезал
   за дугу ни при каком разумном кегле на 68px — тот же компас-ромб,
   что уже держит опознавание Хаба (.hub-emblem), просто в размере ряда. */
.home-hero-emblem { flex: 0 0 56px; width: 56px; height: 56px; filter: drop-shadow(0 6px 14px rgba(120, 90, 200, 0.22)); }
.home-hero-emblem svg { width: 100%; height: 100%; }
.home-hero-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-hero-title { font-family: var(--font-serif); font-size: 17px; font-weight: 500; letter-spacing: -0.2px; color: var(--fg); }
.home-hero-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.home-hero-cta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  color: var(--accent); font-size: 12.5px; font-weight: 700;
}

.home-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.home-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  width: 100%; border: none; text-align: left; font-family: var(--font-ui); cursor: pointer;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); transition: transform 0.18s var(--ease);
}
.home-tile:active { transform: scale(0.98); }
.home-chat-note {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  font-size: 13px; line-height: 1.45; color: var(--muted);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.home-badge-soon {
  position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.03em; color: var(--energy); background: color-mix(in srgb, var(--energy) 14%, transparent);
  border-radius: 999px; padding: 3px 9px;
}
.home-badge-soon.night { color: #4d5fb8; background: rgba(77, 95, 184, 0.14); }
.home-tile-icon {
  width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--energy) 14%, #fff); color: var(--energy);
}
.home-tile-icon.night { background: rgba(77, 95, 184, 0.14); color: #4d5fb8; }
.home-tile-title { font-family: var(--font-serif); font-size: 14.5px; font-weight: 500; line-height: 1.25; color: var(--fg); }
.home-tile-sub { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

.home-row {
  display: flex; align-items: center; gap: 14px; width: 100%; border: none; text-align: left;
  font-family: var(--font-ui); cursor: pointer;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 12px; transition: transform 0.18s var(--ease);
}
.home-row:active { transform: scale(0.985); }
.home-row-icon {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--accent-soft);
}
.home-row-icon.guide { color: var(--mid); background: color-mix(in srgb, var(--mid) 16%, transparent); }
.home-row-icon.high { color: var(--high); background: rgba(63, 191, 127, 0.14); }
/* Иконка подписки — в семье остальных плашек: та же плоская подложка,
   а не залитый градиентом кружок. Выделять её больше нечем и незачем. */
.home-row-icon.featured { color: #5a6ed6; background: rgba(91, 141, 239, 0.15); }

/* --- Небо по солнцу и сезоны (today.js: todayTimeSky / todaySeason) --- */
.today-sky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.8s var(--ease);
}
.today-sky[data-tod="dawn"]::before { opacity: 1; background: linear-gradient(180deg, rgba(255, 176, 140, 0.35), rgba(255, 214, 170, 0.18) 55%, transparent); }
.today-sky[data-tod="dusk"]::before { opacity: 1; background: linear-gradient(180deg, rgba(150, 90, 170, 0.32), rgba(255, 150, 110, 0.3) 60%, transparent); }
.today-sky[data-tod="night"]::before { opacity: 1; background: linear-gradient(180deg, rgba(16, 20, 60, 0.62), rgba(36, 40, 100, 0.3) 62%, transparent); }
.today-sky[data-tod="day"] .today-stars circle { opacity: 0.25; }
.today-horizon { position: relative; z-index: 1; width: 100%; max-width: 320px; height: 30px; margin-top: 14px; }
.today-horizon svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.today-horizon path { fill: none; stroke: color-mix(in srgb, var(--fg) 22%, transparent); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.today-horizon path.lit { stroke: #ffb46b; stroke-width: 1.5; }
.today-horizon b { position: absolute; bottom: -16px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--fg) 45%, transparent); }
.today-horizon b:first-of-type { left: 0; }
.today-horizon b:last-of-type { right: 0; }
.today-sun {
  position: absolute; z-index: 1; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff6dd, #ffc56b 60%, #ff9d4b);
  box-shadow: 0 0 18px 6px rgba(255, 190, 110, 0.55);
  animation: sun-rise 1.2s var(--ease) 0.3s both;
}
.today-sky[data-tod="dawn"] .today-sun, .today-sky[data-tod="dusk"] .today-sun {
  background: radial-gradient(circle, #fff1dc, #ff9a6b 60%, #e0604a); box-shadow: 0 0 22px 8px rgba(255, 140, 100, 0.5);
}
@keyframes sun-rise { from { opacity: 0; transform: translateY(18px) scale(0.6); } to { opacity: 1; transform: none; } }
/* Времена года (today.js: todaySeason, частицы — quill.js: Quill.particles).
   Внешний <i> падает, внутренний <b> качается и крутится; у лета блики
   поднимаются. Слой на весь экран обложки, поверх карточек, но без тапов. */
.today-sky.has-season {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sky-top) 55%, var(--season-sky)) 0%, var(--sky-bottom) 74%, var(--bg) 100%);
}
.today-season-glyph { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }
.season-fall { position: absolute; top: -20px; left: -18px; right: -18px; bottom: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.season-fall i { position: absolute; left: var(--x); top: 0; opacity: var(--o); animation: season-drop var(--d) linear var(--dl) infinite; will-change: transform; }
.season-fall i b { display: block; animation: season-sway var(--sd) ease-in-out var(--dl) infinite alternate; }
@keyframes season-drop { from { transform: translateY(-40px); } to { transform: translateY(100vh); } }
@keyframes season-lift { from { transform: translateY(100vh); } to { transform: translateY(-40px); } }
@keyframes season-sway { from { transform: translateX(calc(var(--sw) * -1)) rotate(-30deg) scale(var(--s)); } to { transform: translateX(var(--sw)) rotate(40deg) scale(var(--s)); } }
@keyframes season-flutter {
  0% { transform: translateX(calc(var(--sw) * -1)) rotate(-40deg) rotateX(0deg) scale(var(--s)); }
  50% { transform: translateX(0) rotate(20deg) rotateX(65deg) scale(var(--s)); }
  100% { transform: translateX(var(--sw)) rotate(70deg) rotateX(0deg) scale(var(--s)); }
}
@keyframes season-glint { from { transform: translateX(calc(var(--sw) * -1)) scale(var(--s)); opacity: 0.35; } to { transform: translateX(var(--sw)) scale(var(--s)); opacity: 1; } }
.season-fall.is-winter b { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.95), 0 0 0 0.5px rgba(143, 179, 232, 0.35); }
.season-fall.is-winter i:nth-child(3n) b { filter: blur(1.5px); }
.season-fall.is-spring b { width: 11px; height: 9px; border-radius: 80% 10% 80% 10%; background: linear-gradient(135deg, #ffe1ea, #f49ab8); animation-name: season-flutter; }
.season-fall.is-summer i { animation-name: season-lift; }
.season-fall.is-summer b { width: 5px; height: 5px; border-radius: 50%; background: #ffe3a3; box-shadow: 0 0 10px 4px rgba(245, 181, 68, 0.55); animation-name: season-glint; }
.season-fall.is-autumn b { position: relative; width: 15px; height: 15px; border-radius: 0 85% 0 85%; background: linear-gradient(135deg, #f2b25a, #c96a1c); animation-name: season-flutter; }
.season-fall.is-autumn i:nth-child(3n) b { background: linear-gradient(135deg, #e9a948, #b5541a); }
.season-fall.is-autumn b::after { content: ""; position: absolute; inset: 2px; border-top: 1px solid rgba(255, 240, 210, 0.55); transform: rotate(45deg) translateY(4px); }
/* Зимой на карточке недели лежит снежная шапка. */
.season-winter .today-week { position: relative; }
.season-winter .today-week::before {
  content: ""; position: absolute; left: 14px; right: 30px; top: -5px; height: 12px; border-radius: 12px 12px 6px 6px;
  background: #fff; box-shadow: 0 -1px 0 rgba(143, 179, 232, 0.35), 0 4px 10px rgba(143, 179, 232, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .season-fall { display: none; }
  .today-sun { animation: none; }
}

/* --- Утренний ритуал на обложке (today.js: todayRitual) ---
   Кусочек ночи над дверью в меню: вход в запись сна, пока он не растаял. */
.today-ritual {
  position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px; padding: 13px 14px; border-radius: 20px; cursor: pointer; text-align: left; font-family: var(--font-ui);
  color: #efeaff; border: 1px solid rgba(233, 194, 122, 0.38);
  background: radial-gradient(circle at 12% 50%, rgba(184, 146, 255, 0.4), transparent 52%), linear-gradient(135deg, #1a1440, #0f0b24);
  box-shadow: 0 14px 30px -18px rgba(30, 20, 80, 0.7);
}
.today-ritual::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0.6px, transparent 1px); background-size: 23px 19px; }
.today-ritual svg { flex: none; width: 32px; height: 32px; color: var(--gold); }
.today-ritual-tx { flex: 1; min-width: 0; }
.today-ritual-tx b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 16.5px; }
.today-ritual-tx span { font-size: 11.5px; color: #b5addb; }
.today-ritual-chev { color: var(--gold); font-size: 18px; }
.today-ritual:active { transform: scale(0.985); }

/* --- Знак дня на обложке (today.js: todayDaySignChip, ВК 24.10.2026) ---
   Тихий отголосок: золотое число в круге, без анимаций — сосед писем и утреннего ритуала. */
.today-daysign {
  width: 100%; display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px; padding: 11px 14px; border-radius: 20px; cursor: pointer; text-align: left; font-family: var(--font-ui);
  color: #efeaff; border: 1px solid rgba(233, 194, 122, 0.26);
  background: linear-gradient(135deg, rgba(35, 27, 74, 0.92), rgba(18, 13, 40, 0.92));
  box-shadow: 0 12px 26px -18px rgba(30, 20, 80, 0.6);
}
.today-daysign-n {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-serif); font-size: 16px; color: var(--gold);
  border: 1px solid rgba(233, 194, 122, 0.55); background: radial-gradient(circle at 35% 30%, rgba(233, 194, 122, 0.22), transparent 65%);
}
.today-daysign:active { transform: scale(0.985); }
.today-daysign-wrap { width: 100%; margin: 0 0 12px; }
.today-daysign-wrap .today-daysign { margin-bottom: 0; }
.today-daysign.is-subscription { border-style: solid; background: linear-gradient(135deg, rgba(45, 39, 79, 0.88), rgba(25, 23, 51, 0.9)); }
.today-daysign.is-subscription .today-daysign-n { color: #d4c7ef; border-color: rgba(212, 199, 239, 0.35); }
.today-daysign-chev { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--gold); transition: transform 0.18s var(--ease); }
.today-daysign-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.today-daysign[aria-expanded="true"] .today-daysign-chev { transform: rotate(180deg); }
.today-daysign-wrap.is-open .today-daysign { border-radius: 20px 20px 12px 12px; }
.today-daysign-detail { overflow: hidden; padding: 12px 15px; border: 1px solid rgba(233, 194, 122, 0.2); border-top: 0;
  border-radius: 0 0 18px 18px; color: #e5def5; background: rgba(24, 19, 49, 0.94); font-size: 13px; line-height: 1.55; }
.today-daysign-detail[hidden] { display: none; }
.today-daysign-detail p { margin: 0 0 10px; color: #e5def5; white-space: normal; overflow-wrap: anywhere; }
.today-daysign-detail p:last-child { margin-bottom: 0; }
.today-daysign-action { width: 100%; min-height: 42px; margin-top: 8px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid rgba(233, 194, 122, 0.38); color: var(--gold); background: rgba(233, 194, 122, 0.07); font: 600 12px/1.4 var(--font-ui); }
@media (max-width: 360px) {
  .today-daysign { gap: 9px; padding-inline: 11px; }
  .today-daysign .today-ritual-tx b { font-size: 13px; }
  .today-daysign .today-ritual-tx span { font-size: 11px; }
}

/* --- Меню разделов: «Обсерватория» (home.js) ---
   Порталы с гербами и живыми цифрами; Сонник — ночная плитка посреди
   дня. Один живой жест экрана — созвездие Личной карты рисуется при
   входе (`draw`); ночная плитка тихо мерцает звёздами (единственный цикл). */
.obs-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 2px 0 16px; }
.obs-kicker { margin: 0 0 2px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.obs-h1 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 30px; letter-spacing: -0.6px; line-height: 1.1; }
.obs-month { font-size: 13px; color: var(--muted); padding-bottom: 5px; }
/* «Сегодня» — Луна дня в углу меню: дверь обратно на обложку. */
.obs-today {
  display: inline-flex; align-items: center; gap: 9px; padding: 5px 13px 5px 5px; margin-bottom: 2px;
  border: 1px solid rgba(255, 255, 255, 0.95); border-radius: 100px; cursor: pointer; font-family: var(--font-ui); color: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.62));
  box-shadow: 0 6px 18px rgba(31, 45, 61, 0.08); -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s var(--ease);
}
.obs-today:active { transform: scale(0.96); }
.obs-today[hidden] { display: none; }
.obs-today-moon {
  width: 30px; height: 30px; border-radius: 50%; display: block;
  background: radial-gradient(circle at 50% 50%, #3a2f63 0 58%, #2a2350 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 0 12px rgba(247, 196, 106, 0.45);
}
.obs-today-moon svg { display: block; width: 100%; height: 100%; }
.obs-today-tx { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.obs-today-tx b { font-family: var(--font-serif); font-weight: 500; font-size: 14px; }
.obs-today-tx span { font-size: 11px; color: var(--muted); }

/* Жест `descend`: обложка из меню опускается сверху — небо над
   разделами. Небо съезжает на 40 px и проявляется, бумага поднимается
   навстречу. 560 мс, один раз. */
.today.is-descend { animation: none; }
.today.is-descend .today-sky { animation: sky-descend 0.56s var(--ease) both; }
.today.is-descend .today-body { animation: rise 0.5s var(--ease) 0.14s both; }
@keyframes sky-descend { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .today.is-descend .today-sky, .today.is-descend .today-body { animation: none; }
}

.obs-you {
  width: 100%; display: grid; grid-template-columns: 108px 1fr; gap: 14px; align-items: center; padding: 14px 16px 14px 12px;
  border-radius: 24px; cursor: pointer; text-align: left; font-family: var(--font-ui); color: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--shadow);
  transition: transform 0.16s var(--ease);
}
.obs-you:active { transform: scale(0.985); }
.obs-you-map { position: relative; width: 108px; height: 108px; }
.obs-you-map svg { width: 100%; height: 100%; overflow: visible; }
.obs-you-lines { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: obs-draw 1.4s var(--ease) 0.2s forwards; }
@keyframes obs-draw { to { stroke-dashoffset: 0; } }
.obs-you-core { fill: color-mix(in srgb, var(--accent) 18%, #fff); stroke: var(--accent); stroke-width: 1.2; }
.obs-you-stars circle { fill: var(--accent); }
.obs-you-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 500; font-size: 18px; color: var(--accent); }
.obs-you-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.obs-you-kicker { font-size: 11.5px; color: var(--muted); }
.obs-you-tx b { font-family: var(--font-serif); font-weight: 500; font-size: 18px; line-height: 1.22; color: var(--fg); text-wrap: balance; }
.obs-you-cta { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 2px; }

.obs-continue {
  width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; cursor: pointer;
  border-radius: 18px; text-align: left; font-family: var(--font-ui); color: inherit;
  background: color-mix(in srgb, #f0a93c 11%, rgba(255, 255, 255, 0.6));
  border: 1px solid color-mix(in srgb, #f0a93c 30%, transparent);
}
.obs-continue[hidden] { display: none; }
.obs-continue i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e39a2c; box-shadow: 0 0 0 4px color-mix(in srgb, #e39a2c 22%, transparent); }
.obs-continue-tx { flex: 1; min-width: 0; }
.obs-continue-tx b { display: block; font-size: 13.5px; color: var(--fg); }
.obs-continue-tx span { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs-chev { color: var(--muted); font-size: 17px; }

.obs-portals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.obs-portal {
  position: relative; overflow: hidden; min-height: 150px; padding: 14px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  border-radius: 24px; font-family: var(--font-ui); color: var(--fg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: var(--shadow);
  transition: transform 0.16s var(--ease);
}
.obs-portal:active { transform: scale(0.97); }
.obs-portal.is-wide { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; }
.obs-portal-em { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.obs-portal-em svg { width: 32px; height: 32px; }
.obs-portal-tx { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.obs-portal-tx b { font-family: var(--font-serif); font-weight: 500; font-size: 18px; }
.obs-portal-num { font-size: 12px; color: var(--muted); line-height: 1.35; }
.obs-portal-num em { font-style: normal; font-family: var(--font-serif); font-size: 22px; color: var(--c); margin-right: 2px; font-variant-numeric: tabular-nums; }
.obs-progress { flex-basis: 100%; height: 5px; border-radius: 100px; background: color-mix(in srgb, var(--c) 14%, transparent); overflow: hidden; }
.obs-progress[hidden] { display: none; }
.obs-progress i { display: block; height: 100%; background: var(--c); border-radius: 100px; transform-origin: left; transform: scaleX(0); transition: transform 0.9s var(--ease); }
/* Летопись и Сонник — пара нарядных плиток: том в коже и ночное небо.
   Эмоции и Достижения ниже остаются светлыми — рабочими. */

/* Летопись — том в кожаном переплёте (#2e2413 — чернила страниц летописи). */
.obs-portal.is-tome {
  color: #fbe7c0; border: 0; padding-right: 22px; isolation: isolate;
  background: radial-gradient(120% 70% at 20% 0%, #6b4a22 0, transparent 60%), linear-gradient(165deg, #4a3418, #2e2413 75%);
  box-shadow: 0 18px 34px -16px rgba(60, 36, 10, 0.7);
}
.obs-portal.is-tome::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.35; pointer-events: none;
  background-image: radial-gradient(rgba(255, 230, 190, 0.14) 0.6px, transparent 0.9px), radial-gradient(rgba(0, 0, 0, 0.25) 0.6px, transparent 0.9px);
  background-size: 5px 5px, 7px 7px; background-position: 0 0, 2px 3px;
}
.obs-tool { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.obs-tool-fr { fill: none; stroke: #e9c27a; stroke-width: 0.9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: obs-emboss 1.3s var(--ease) 0.2s forwards; }
.obs-tool-fr.f2 { opacity: 0.5; animation-delay: 0.45s; }
.obs-tool-orn { fill: #e9c27a; opacity: 0; animation: obs-fade 0.6s var(--ease) 1.2s forwards; }
@keyframes obs-emboss { to { stroke-dashoffset: 0; } }
@keyframes obs-fade { to { opacity: 0.9; } }
.obs-pages {
  position: absolute; right: 0; top: 14px; bottom: 14px; width: 9px; z-index: -1; border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(90deg, #f3e3c3 0 1px, #cdb48a 1px 2px); box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.35);
}
.obs-ribbon {
  position: absolute; right: 30px; top: -4px; width: 12px; height: 60px; z-index: 0; transform-origin: top center;
  background: linear-gradient(90deg, #a8352a, #d04c3b 50%, #a8352a);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  animation: obs-ribbon 1.6s var(--ease) 0.3s both;
}
@keyframes obs-ribbon { 0% { transform: rotate(8deg) scaleY(0.4); } 45% { transform: rotate(-5deg) scaleY(1.02); } 75% { transform: rotate(2deg); } 100% { transform: none; } }
.obs-sheen {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 225, 160, 0.28) 50%, transparent 65%);
  animation: obs-sheen 1.4s var(--ease) 1.3s both;
}
@keyframes obs-sheen { to { transform: translateX(120%); } }
.obs-portal.is-tome .obs-portal-em { background: transparent; }
.obs-portal.is-tome .obs-portal-tx b { color: #fbe7c0; }
.obs-portal.is-tome .obs-portal-num { color: #cfb48a; }
.obs-portal.is-tome .obs-portal-num em { font-style: italic; color: #f5c77a; }
.obs-portal.is-tome .obs-lock { color: #cfb48a; }

/* Сонник — настоящее ночное небо: каждый сон месяца — звезда созвездия
   (home.js: homeNightSky). Мерцание фоновых звёзд — единственный цикл меню. */
.obs-portal.is-night {
  --c: #b892ff; color: #efeaff; border: 0; isolation: isolate;
  background: radial-gradient(120% 80% at 85% 0%, #3a2a7a 0, transparent 60%), radial-gradient(90% 60% at 0% 100%, #1b2a5c 0, transparent 70%), linear-gradient(170deg, #1a1442, #0f0b24 70%);
  box-shadow: 0 18px 34px -16px rgba(30, 20, 80, 0.75);
}
.obs-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.obs-star { fill: #fff; animation: obs-twinkle var(--t) ease-in-out var(--dl) infinite alternate; }
@keyframes obs-twinkle { from { opacity: 0.15; } to { opacity: 0.95; } }
.obs-cl-guide { fill: none; stroke: rgba(241, 214, 156, 0.16); stroke-width: 0.6; stroke-dasharray: 2 3; }
.obs-cl { fill: none; stroke: rgba(241, 214, 156, 0.6); stroke-width: 0.8; stroke-dasharray: 1; stroke-dashoffset: 1; animation: obs-emboss 1.4s var(--ease) 0.5s forwards; }
.obs-cs { transform-box: fill-box; transform-origin: center; animation: obs-star-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.25s + var(--i) * 90ms); }
@keyframes obs-star-in { from { opacity: 0; transform: scale(0); } }
.obs-shoot { stroke: url(#obsShootG); stroke-width: 1.4; stroke-linecap: round; opacity: 0; animation: obs-shoot 9s ease-in 3s infinite; }
@keyframes obs-shoot { 0%, 88% { opacity: 0; transform: translate(0, 0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(-70px, 44px); } }
.obs-night-glow { position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(241, 214, 156, 0.35), transparent 65%); pointer-events: none; }
.obs-portal.is-night .obs-portal-em { background: transparent; }
.obs-portal.is-night .obs-portal-num { color: #b5addb; }
.obs-portal.is-night .obs-portal-num em { font-style: italic; color: #f1d69c; }
/* Закрыто тарифом: гравюра с замком, без цифр. */
.obs-lock { display: none; font-size: 11px; font-weight: 700; color: var(--muted); }
.is-locked .obs-lock { display: block; }
.is-locked .obs-portal-num, .is-locked .obs-progress { display: none; }
.obs-portal.is-locked .obs-portal-em { background: transparent; box-shadow: inset 0 0 0 1px currentColor; opacity: 0.55; }
.obs-portal.is-night.is-locked .obs-lock { color: #b5addb; }
.obs-you.is-locked .obs-you-map { opacity: 0.45; filter: grayscale(0.6); }

.obs-rows { margin-top: 14px; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: var(--shadow); }
.obs-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; background: none; border: 0; text-align: left; font-family: var(--font-ui); color: var(--fg); }
.obs-row + .obs-row { border-top: 1px solid var(--border); }
.obs-row svg { flex: none; width: 26px; height: 26px; color: var(--c); }
.obs-row b { flex: 1; font-family: var(--font-serif); font-weight: 500; font-size: 16px; }
.obs-row span { font-size: 12px; color: var(--muted); }
.obs .home-chat-note { margin: 14px 4px 0; }

@media (prefers-reduced-motion: reduce) {
  .obs-you-lines { animation: none; stroke-dashoffset: 0; }
  .obs-star, .obs-shoot, .obs-ribbon, .obs-sheen { animation: none; }
  .obs-tool-fr, .obs-cl { animation: none; stroke-dashoffset: 0; }
  .obs-tool-orn { animation: none; opacity: 0.9; }
  .obs-cs { animation: none; }
}

/* --- Цвет раздела на плитках Главной ---
   Тот же аккорд, в который экран переоденется после тапа (app.js:
   SECTIONS): летопись — золото, сонник — фиолет, эмоция — зелень,
   достижения — роза, поддержка — бирюза, гайд — индиго. Иконка на
   Главной обещает цвет, раздел его выполняет. */
.home-tile-icon.sec-chronicle,
.home-row-icon.sec-chronicle { color: #b8761a; background: rgba(240, 169, 60, 0.16); }
.home-tile-icon.sec-dreams,
.home-row-icon.sec-dreams { color: #8348d8; background: rgba(166, 107, 255, 0.15); }
.home-tile-icon.sec-emotion,
.home-row-icon.sec-emotion { color: #2b9463; background: rgba(63, 191, 127, 0.15); }
.home-tile-icon.sec-achievements,
.home-row-icon.sec-achievements { color: #cf5872; background: rgba(232, 120, 143, 0.16); }
.home-tile-icon.sec-support,
.home-row-icon.sec-support { color: #23899b; background: rgba(63, 178, 196, 0.16); }
.home-tile-icon.sec-guide,
.home-row-icon.sec-guide { color: #5a6ed6; background: rgba(123, 143, 245, 0.16); }
.home-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-row-title { font-family: var(--font-serif); font-size: 15px; font-weight: 500; color: var(--fg); }
.home-row-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.home-row-chev { flex: 0 0 auto; }
/* Подписка — единственный блок Главной, который должен останавливать
   взгляд. Поэтому стекло здесь плотнее соседних карточек: густая
   заливка акцентом, градиентная кромка и медленный отсвет, проходящий
   по поверхности (::after, 9s — вдвое медленнее «+», чтобы два живых
   элемента на экране не соревновались). overflow: hidden режет отсвет
   по скруглению карточки; внешнюю тень он не трогает. */
/* Подписка — не «другая по цвету» карточка, а зеркало: та же белая
   бумага, что у соседей, но поверхность стеклянная и по ней раз в 9
   секунд проходит отражение. Акцентной заливки, цветной каймы и
   цветного свечения здесь больше нет — выделяет материал, а не краска. */
.home-cta {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.74)) padding-box,
    linear-gradient(135deg, #ffffff, #dde5f2 45%, #ffffff) border-box;
  border: 1.5px solid transparent;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    var(--shadow);
}
.home-cta > * { position: relative; z-index: 1; }
/* Блик зеркала: узкая светлая полоса с еле заметной тенью по краям —
   на белом одна лишь белая полоса была бы невидима, отражение читается
   именно по паре «тень → свет → тень». */
.home-cta::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 26%,
    rgba(31, 45, 61, 0.075) 40%,
    rgba(255, 255, 255, 1) 50%,
    rgba(31, 45, 61, 0.055) 60%,
    transparent 74%
  );
  background-size: 250% 100%;
  /* 7s, а не 9: отражение проходило так редко и так бледно, что его
     попросту не замечали. Всё ещё вдвое медленнее «+» — два живых
     элемента на экране не должны соревноваться. */
  animation: cta-glass 7s var(--ease) infinite;
}
@keyframes cta-glass {
  0% { background-position: 130% 0; }
  55%, 100% { background-position: -60% 0; }
}

.sheet-guide-link { margin-top: 16px; }

/* --- Экран «Как это работает» --- */
.guide-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.guide-item {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.guide-item.in { opacity: 1; transform: none; }
.guide-item-head { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.guide-item-icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  color: var(--item-accent, var(--accent)); background: color-mix(in srgb, var(--item-accent, var(--accent)) 14%, #fff);
}
/* Иконки из MINI_ICONS (app.js: icon()) идут без width/height — без этого
   правила «Личная карта» раскрывалась в дефолтные 300×150 и визуально
   исчезала из плитки. HOME_ICONS размер несут сами, лишним не будет. */
.guide-item-icon svg { width: 22px; height: 22px; flex: 0 0 auto; }
.guide-item-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.guide-item-title { font-family: var(--font-serif); font-size: 15px; font-weight: 500; color: var(--fg); }
.guide-item-status { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; border-radius: 999px; padding: 2px 9px; }
.guide-item-status.free { color: var(--high); background: rgba(63, 191, 127, 0.14); }
.guide-item-status.mixed { color: var(--accent); background: var(--accent-soft); }
.guide-item-status.soon { color: #4d5fb8; background: rgba(77, 95, 184, 0.14); }
.guide-item-status.plans { color: var(--mid); background: color-mix(in srgb, var(--mid) 16%, transparent); }
.guide-item-status.moment { color: var(--accent); background: var(--accent-soft); }
.guide-item-status.compass { color: #4d5fb8; background: rgba(77, 95, 184, 0.14); }
.guide-compare.tiers { grid-template-columns: 1fr; }
@media (min-width: 520px) {
  .guide-compare.tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.guide-compare-col.moment .guide-compare-title { color: var(--accent); }
.guide-compare-col.compass .guide-compare-title { color: #4d5fb8; }
.guide-caret { flex: 0 0 auto; transition: transform 0.3s var(--ease); }
.guide-item.open .guide-caret { transform: rotate(90deg); }
.guide-item-body {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s var(--ease), opacity 0.4s var(--ease), margin 0.3s var(--ease);
}
.guide-item.open .guide-item-body { max-height: 880px; opacity: 1; margin-top: 14px; }
.guide-field { margin-top: 10px; }
.guide-field:first-child { margin-top: 0; }
.guide-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 3px; }
.guide-field-text { font-size: 13.5px; line-height: 1.55; color: var(--fg); }

.guide-compare { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guide-compare-col { background: rgba(255, 255, 255, 0.5); border: 1px solid var(--border); border-radius: 16px; padding: 14px; }
.guide-compare-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; color: var(--muted); }
.guide-compare-col.free .guide-compare-title { color: var(--high); }
.guide-compare-col.paid .guide-compare-title { color: var(--accent); }
.guide-compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.guide-compare-list li { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.4; color: var(--fg); }
.gc-check { flex: 0 0 auto; }
.gc-check.free { color: var(--high); }
.gc-check.paid { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .guide-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Хаб --- */
.hub-head { text-align: center; margin-bottom: 18px; }
.hub { padding-bottom: 88px; }

.hub-view { animation: rise 0.4s var(--ease) both; }
.hub-portrait .portrait-body { min-height: 60px; }
/* Личная карточка: эмблема-сфера, под ней одним словом тип темперамента
   (тот же, что человек видел в результате Айзенка), и сразу описание.
   Никаких подписей «Кто ты» между сферой и ответом. */
.portrait-hero-hub {
  flex-direction: column; align-items: center; text-align: center;
  gap: 10px; margin: 4px 0 14px;
}
.portrait-hero-hub .portrait-emblem { flex: 0 0 62px; width: 62px; height: 62px; }
.portrait-hero-hub .portrait-emblem svg { width: 34px; height: 34px; }
.portrait-hero-hub .portrait-essence { font-size: 27px; letter-spacing: -0.4px; }
/* Портрет: тип темперамента по центру, а сам текст — выключкой по
   формату. По центру абзац рвался «ёлочкой» и читался как стихи;
   переносы (hyphens) обязательны, иначе выключка растягивает пробелы
   в дыры на узком экране. */
.hub-portrait .portrait-text {
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
  max-width: 34em;
  margin-inline: auto;
}

.hub-results { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.hub-results-heading {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin-bottom: 2px;
}
.hub-result-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hub-result-row .level-result { flex: 0 0 auto; }

/* Эмблема Хаба — вместо кольца-счётчика тестов (тот жил только в верхнем
   заголовке; на Главной у карточки та же эмблема — .home-hero-emblem). */
.hub-emblem { width: 64px; height: 64px; margin: 0 auto 10px; filter: drop-shadow(0 6px 14px rgba(120, 90, 200, 0.25)); }
.hub-emblem svg { width: 100%; height: 100%; }
.levels { display: flex; flex-direction: column; gap: 12px; }
.level-card {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--radius);
  box-shadow: var(--shadow); cursor: pointer; text-align: left;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease);
  animation: rise 0.5s var(--ease) both;
}
.level-card:active { transform: scale(0.985); }
.level-card.done { box-shadow: 0 10px 26px rgba(63, 191, 127, 0.2); border-color: rgba(63, 191, 127, 0.35); }
.level-card.locked { opacity: 0.5; pointer-events: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.level-icon {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  color: var(--card-accent, var(--accent));
  background: color-mix(in srgb, var(--card-accent, var(--accent)) 12%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent, var(--accent)) 22%, transparent);
}
.level-icon svg { width: 28px; height: 28px; display: block; }
.level-card.done .level-icon {
  color: #fff;
  background: linear-gradient(135deg, var(--card-accent, var(--accent)), color-mix(in srgb, var(--card-accent, var(--accent)) 60%, #ffffff));
}
.level-meta { flex: 1; min-width: 0; }
.level-meta .lvl { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.level-meta .ttl { font-size: 17px; font-weight: 700; margin: 2px 0; }
.level-meta .sub { font-size: 13px; color: var(--muted); }
.level-state { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--muted); }
.level-card.done .level-state { color: var(--high); }
.level-result { font-size: 13px; font-weight: 600; color: var(--accent); }

/* --- «Тропа зеркал» (Хаб → Тесты, app.js: drawMirrorThread) ---
   Тесты — звёзды-медальоны на одной нити, по очереди слева и справа, как
   созвездие на карте. Пройденные налиты цветом своего теста и подписаны
   итогом курсивом; следующее зовёт кольцом (единственный цикл экрана);
   закрытые — пунктирный силуэт. Нить: пройденное — чернила (`draw`),
   впереди — пунктир. Логика прохождения прежняя: те же .level-card. */
.mirrors-head { text-align: center; margin: 4px 0 6px; }
.mirrors-kicker { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.mirrors-count { margin: 4px 0 2px; font-family: var(--font-serif); font-size: 30px; letter-spacing: -0.6px; color: var(--fg); }
.mirrors-count b { font-weight: 500; color: var(--accent); }
.mirrors-sub { margin: 0 auto; max-width: 290px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.levels.is-path { position: relative; gap: 2px; padding: 12px 0 6px; }
.levels-thread { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.levels-thread path { fill: none; stroke-linecap: round; }
.levels-thread-all { stroke: color-mix(in srgb, var(--accent) 30%, transparent); stroke-width: 1.4; stroke-dasharray: 2 6; }
.levels-thread-lit { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.8;
  animation: line-draw-1 1.1s var(--ease) 0.25s forwards; }
@keyframes line-draw-1 { to { stroke-dashoffset: 0; } }
.levels.is-path .level-card {
  position: relative; z-index: 1; background: none; border: 0; box-shadow: none; padding: 12px 4px; gap: 16px;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: inherit; font-family: var(--font-ui);
}
.levels.is-path .level-card.side-r { flex-direction: row-reverse; text-align: right; }
.levels.is-path .level-card.done { box-shadow: none; }
.levels.is-path .level-card.locked { opacity: 0.62; }
.levels.is-path .level-icon {
  flex: 0 0 60px; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff, color-mix(in srgb, var(--card-accent, var(--accent)) 10%, #fff) 70%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--card-accent, var(--accent)) 30%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--card-accent, var(--accent)) 60%, transparent);
}
.levels.is-path .level-card.done .level-icon {
  color: #fff;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--card-accent, var(--accent)) 40%, #fff), var(--card-accent, var(--accent)) 60%, color-mix(in srgb, var(--card-accent, var(--accent)) 70%, #0b1530));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--card-accent, var(--accent)) 14%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--card-accent, var(--accent)) 70%, transparent);
}
.levels.is-path .level-card.locked .level-icon {
  background: transparent; color: color-mix(in srgb, var(--fg) 40%, transparent);
  box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--fg) 25%, transparent); outline-offset: -1.5px;
}
.levels.is-path .level-card.next .level-icon { position: relative; }
.levels.is-path .level-card.next .level-icon::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid color-mix(in srgb, var(--card-accent, var(--accent)) 55%, transparent);
  animation: fab-ring 5.5s var(--ease) infinite;
}
.levels.is-path .level-meta .lvl { font-size: 10px; font-weight: 800; letter-spacing: 0.14em; }
.levels.is-path .level-meta .ttl { font-family: var(--font-serif); font-weight: 500; font-size: 18.5px; letter-spacing: -0.2px; line-height: 1.2; margin: 3px 0 2px; }
.levels.is-path .level-meta .sub { font-size: 12.5px; line-height: 1.4; }
.level-foot { margin-top: 6px; }
.levels.is-path .level-result { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 14.5px; color: var(--card-accent, var(--accent)); }
.levels.is-path .level-state { display: inline-block; font-size: 12px; font-weight: 700; color: var(--card-accent, var(--accent)); }
.levels.is-path .level-card.next .level-state {
  padding: 6px 12px; border-radius: 100px; color: #fff;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--card-accent, var(--accent)) 50%, #fff), var(--card-accent, var(--accent)) 60%);
  box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--card-accent, var(--accent)) 70%, transparent);
}
.levels.is-path .level-state.is-locked { font-weight: 600; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .levels-thread-lit { animation: none; stroke-dashoffset: 0; }
  .levels.is-path .level-card.next .level-icon::after { animation: none; opacity: 0.6; }
}

/* --- Intro --- */
.intro { text-align: center; padding-top: 8px; }
.intro-metaphor {
  width: 150px; height: 150px; margin: 22px auto 10px; color: var(--accent);
  filter: drop-shadow(0 10px 24px var(--accent-glow));
  animation: metaphor-in 0.7s var(--ease) both, float 7s var(--ease) 0.7s infinite;
}
@keyframes metaphor-in { from { opacity: 0; transform: scale(0.6); filter: blur(8px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.intro-question { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 6px 0 14px; letter-spacing: -0.3px; }
.intro-note { color: var(--muted); font-size: 14px; max-width: 340px; margin: 0 auto 26px; }

/* --- Pause (breathing) --- */
.pause { text-align: center; padding-top: 40px; }
.pause p { color: var(--muted); max-width: 340px; margin: 0 auto 26px; }
.breath {
  width: 120px; height: 120px; border-radius: 50%; margin: 20px auto 24px;
  background: radial-gradient(circle, #bcd4ff, #8fb4ff);
  animation: breathe 6s var(--ease) infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(0.8); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }

/* --- Вопросы --- */
.q-head { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.q-head .nav-back { font-size: 22px; margin: 0; flex: 0 0 auto; }
.q-progress { flex: 1; height: 8px; background: rgba(31, 45, 61, 0.08); border-radius: 8px; overflow: hidden; }
.q-progress span {
  position: relative; display: block; height: 100%; width: 0; border-radius: 8px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.55s var(--ease); overflow: hidden;
}
.q-progress span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: translateX(-100%); animation: shimmer 1.8s linear infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.q-count { flex: 0 0 auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.q-body { min-height: 60vh; display: flex; flex-direction: column; }
.q-text { font-family: var(--font-serif); font-size: 25px; font-weight: 500; line-height: 1.32; margin: 10px 0 30px; letter-spacing: -0.3px; }
.options { display: flex; flex-direction: column; gap: 10px; }
.opt {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1.5px solid rgba(225, 232, 245, 0.95);
  color: var(--fg);
  font-size: 15px; cursor: pointer;
  transition: transform 0.16s var(--ease), border-color 0.2s, box-shadow 0.25s, background 0.2s; text-align: left;
}
.opt:active { transform: scale(0.985); }
.opt .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c8d3e6; flex: 0 0 auto; transition: all 0.2s; }
.opt .opt-label { position: relative; z-index: 2; color: var(--fg); }
.opt.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.7));
  box-shadow: 0 10px 26px var(--accent-glow);
}
.opt.selected .dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* Рябь-отклик по касанию опции */
.opt .ripple {
  position: absolute; z-index: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0); opacity: 0.9;
  animation: opt-ripple 0.62s var(--ease) forwards;
}
@keyframes opt-ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* --- Result --- */
.result { text-align: center; padding-top: 10px; }
.result-viz { margin: 6px auto 14px; min-height: 220px; display: grid; place-items: center; }
.result-summary { color: var(--fg); max-width: 380px; margin: 0 auto 16px; font-size: 16px; }
.result-note {
  background: #fff6e6; border: 1px solid #f6e3b8; color: #7a5b16; border-radius: 14px;
  padding: 14px 16px; font-size: 14px; text-align: left; margin: 0 auto 18px; max-width: 400px;
}
.result-actions { margin-top: 8px; }

/* radar / quadrant / gauge / bars */
.viz-svg { width: 260px; height: 220px; overflow: visible; }
.radar-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.radar-axis { stroke: var(--border); stroke-width: 1; }
.radar-shape { fill: rgba(91, 141, 239, 0.22); stroke: var(--accent); stroke-width: 2.5;
  stroke-linejoin: round; }
.radar-label { font-size: 10.5px; fill: var(--muted); }
.radar-dot { fill: var(--accent); }

.quad-axis { stroke: var(--border); stroke-width: 1.5; }
.quad-tile { fill: #f4f8ff; }
.quad-tile.active { fill: rgba(91, 141, 239, 0.16); }
.quad-label { font-size: 10px; fill: var(--muted); }
.quad-dot { fill: var(--accent); filter: drop-shadow(0 3px 6px rgba(91,141,239,0.4)); }

.gauge-track { fill: none; stroke: var(--border); stroke-width: 16; stroke-linecap: round; }
.gauge-fill { fill: none; stroke-width: 16; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease); }
.gauge-val { font-size: 30px; font-weight: 700; fill: var(--fg); }

.bars { width: 300px; display: flex; flex-direction: column; gap: 12px; }
.bar-row { text-align: left; }
.bar-row .bar-name { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.bar-track { height: 12px; background: var(--border); border-radius: 8px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--accent), #8fb4ff); transition: width 0.9s var(--ease); }

/* --- Saved --- */
.saved { text-align: center; padding-top: 60px; }
.saved p { color: var(--muted); max-width: 320px; margin: 0 auto 28px; }
.saved-burst { width: 96px; height: 96px; margin: 0 auto 20px; border-radius: 50%;
  background: radial-gradient(circle, #dff3e8, #bfe6d2); display: grid; place-items: center; animation: pop 0.5s var(--ease) both; }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.saved-burst svg { width: 54px; height: 54px; }
[data-check] { fill: none; stroke: var(--high); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw 0.6s 0.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* --- Card / Созвездие --- */
.card-full { text-align: center; }
.card-motto {
  font-family: var(--font-serif); font-size: 19px; font-weight: 500;
  max-width: 360px; margin: 4px auto 6px; line-height: 1.4;
}

.constellation {
  position: relative; width: 100%; max-width: 340px; margin: 6px auto 2px;
  aspect-ratio: 1 / 1;
}
.const-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.const-core {
  position: absolute; top: 50%; left: 50%;
  width: 96px; height: 96px; border-radius: 50%; border: none; padding: 0;
  font: inherit; -webkit-tap-highlight-color: transparent; cursor: default;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  color: #fff; z-index: 2; line-height: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.28), transparent 62%),
    conic-gradient(from 0deg, #8fb4ff, #d7c2ff, #ffc2d6, #bff0d8, #8fb4ff);
  box-shadow: 0 12px 34px rgba(120, 120, 200, 0.34), inset 0 0 18px rgba(255,255,255,0.25);
  transform: translate(-50%, -50%);
  animation: core-breathe 6s ease-in-out infinite, core-in 0.7s var(--ease) both;
}
.const-core.tappable { cursor: pointer; }
/* Приглашающий пульс-ринг у кликабельного ядра */
.const-core.tappable::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  border: 2px solid color-mix(in srgb, #ffffff 70%, transparent);
  animation: core-invite 2.6s ease-out infinite;
}
@keyframes core-invite {
  0% { opacity: 0.7; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(1.55); }
}
.const-core.tappable:active { filter: brightness(1.08); }
/* Отдельный вращающийся слой-ореол — спин не мешает «дыханию» ядра. */
.const-core::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg,
    transparent, rgba(143,180,255,0.55), transparent 40%,
    rgba(255,194,214,0.5), transparent 70%, rgba(191,240,216,0.5), transparent);
  filter: blur(4px); opacity: 0.85;
  animation: core-spin 18s linear infinite;
}
.const-core b { font-size: 30px; font-weight: 700; line-height: 1; }
.const-core span { font-size: 15px; opacity: 0.85; }
@keyframes core-spin { to { transform: rotate(360deg); } }
@keyframes core-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.055; }
}
@keyframes core-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.09); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Лучи-спицы от ядра к звёздам */
.const-ray {
  stroke-width: 1.1; stroke-linecap: round; opacity: 0;
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: ray-in 0.9s var(--ease) forwards;
}
@keyframes ray-in {
  from { stroke-dashoffset: 200; opacity: 0; }
  to { stroke-dashoffset: 0; opacity: 0.22; }
}

.const-line {
  fill: none; stroke: #a8bfe4; stroke-width: 1; stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0; stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: line-draw 1.8s 0.5s var(--ease) forwards;
}
@keyframes line-draw {
  from { stroke-dashoffset: 620; opacity: 0; }
  60% { opacity: 0.2; }
  to { stroke-dashoffset: 0; opacity: 0.2; }
}

.star { cursor: default; }
/* Внутренняя группа: появление + бесконечный лёгкий дрейф */
.star-inner {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation:
    star-in 0.7s var(--ease) both,
    star-float var(--fdur, 6s) ease-in-out infinite;
}
.star-halo { fill: var(--star, #5b8def); opacity: 0; }
.star-glow { fill: var(--star, #5b8def); opacity: 0.18; }
.star-dot { fill: var(--star, #5b8def); }
.star.pending { opacity: 0.42; }
.star.pending .star-dot { fill: #b6c2d6; }
.star.pending .star-glow { opacity: 0.08; }
.star.done { cursor: pointer; }
.star.done .star-glow { animation: twinkle 3.6s ease-in-out infinite; }
.star.done .star-dot { animation: dot-pulse 3.6s ease-in-out infinite; }
.star.done .star-halo { animation: halo-pulse 3.6s ease-in-out infinite; }
.star.done:hover .star-inner,
.star.done:active .star-inner { transform: scale(1.22); transition: transform 0.2s var(--ease); }
@keyframes star-in {
  0% { opacity: 0; scale: 0.2; }
  70% { opacity: 1; scale: 1.18; }
  100% { opacity: 1; scale: 1; }
}
@keyframes star-float {
  0%, 100% { translate: 0 0; }
  50% { translate: var(--fx, 0) var(--fy, 0); }
}
@keyframes twinkle { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.44; } }
@keyframes dot-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
@keyframes halo-pulse {
  0%, 100% { opacity: 0; transform: scale(0.9); }
  50% { opacity: 0.14; transform: scale(1.5); }
}

.const-hint { color: var(--muted); font-size: 13px; margin: 0 auto 20px; }

/* --- AI-портрет «кто я» (шторка по тапу в ядро) --- */
.portrait-sheet .sheet-card { text-align: left; }
.portrait-hero {
  display: flex; align-items: center; gap: 14px; margin: 2px 0 14px;
}
.portrait-emblem {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--accent);
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.6), transparent 60%),
    color-mix(in srgb, var(--accent) 18%, #ffffff);
  box-shadow: 0 6px 18px -6px var(--accent-glow),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent);
  animation: emblem-glow 3.4s ease-in-out infinite;
}
.portrait-emblem svg { width: 28px; height: 28px; }
@keyframes emblem-glow {
  0%, 100% { box-shadow: 0 6px 18px -6px var(--accent-glow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent); }
  50% { box-shadow: 0 10px 26px -6px var(--accent-glow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
}
.portrait-essence {
  font-family: var(--font-serif); font-size: 21px; font-weight: 500;
  line-height: 1.25; color: var(--fg);
}
.portrait-body { min-height: 96px; }
.portrait-body.loading { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.portrait-text {
  margin: 0; font-family: var(--font-serif);
  font-size: 16.5px; line-height: 1.62; color: var(--fg);
  letter-spacing: 0.1px;
}
.portrait-text.reveal { opacity: 0; transform: translateY(6px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.portrait-text.reveal.in { opacity: 1; transform: none; }
.portrait-note {
  margin: 16px 0 2px; color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
.pt-line {
  display: block; height: 13px; border-radius: 6px;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.4)) 30%,
    color-mix(in srgb, var(--accent) 26%, rgba(255, 255, 255, 0.7)) 50%,
    color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.4)) 70%
  );
  background-size: 220% 100%;
  animation: pt-shimmer 1.5s var(--ease) infinite;
}
.pt-line.short { width: 58%; }
@keyframes pt-shimmer {
  from { background-position: 180% 0; }
  to { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-line { animation: none; }
  .portrait-emblem { animation: none; }
  .portrait-text.reveal { transition: none; opacity: 1; transform: none; }
}

/* --- Шторка инсайта --- */
.insight-sheet { position: fixed; inset: 0; z-index: 60; }
.insight-sheet[hidden] { display: none; }
.sheet-backdrop {
  position: absolute; inset: 0; background: rgba(20, 28, 44, 0.32);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.32s var(--ease);
}
.insight-sheet.open .sheet-backdrop { opacity: 1; }
.sheet-card {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: 520px; margin: 0 auto; padding: 10px 22px calc(30px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  border-radius: 28px 28px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 -18px 50px rgba(31, 45, 61, 0.2);
  transform: translateY(102%); transition: transform 0.42s var(--ease);
  text-align: center;
}
.insight-sheet.open .sheet-card { transform: translateY(0); }
.sheet-grip { width: 44px; height: 5px; border-radius: 5px; background: #d3dbea; margin: 4px auto 14px; }
.sheet-head { display: flex; align-items: center; gap: 14px; text-align: left; margin-bottom: 6px; }
.sheet-icon {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.sheet-icon svg { width: 26px; height: 26px; }
.sheet-title { font-family: var(--font-serif); font-size: 20px; font-weight: 500; }
.sheet-label { font-size: 14px; font-weight: 700; color: var(--accent); margin-top: 1px; }
.sheet-viz { min-height: 200px; display: grid; place-items: center; margin: 6px 0 2px; }
.sheet-summary { color: var(--fg); font-size: 15px; line-height: 1.5; max-width: 400px; margin: 4px auto 6px; }

/* --- Disclaimer --- */
.disclaimer { margin-top: 26px; color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
.disclaimer b { color: var(--fg); }

/* --- Метафоры уровней (простые SVG-иконки) --- */
.metaphor-svg { width: 100%; height: 100%; }

/* ============================================================
   РАЗДЕЛЫ: Компас и Путь (таб-бар, панели, визуализации)
   ============================================================ */

/* Запас под нижней панелью считаем от приподнятого «+», а не от самого
   бара: бар ≈ 68px + полоса iPhone, «+» торчит над ним ещё на 26px, а
   его волны — на 17px сверх того. Прежних 100px хватало только на бар,
   и последний абзац экрана (номер помощи в Настройках, «Уже включено»
   в Подписке) оставался под кругом — долистать его было нельзя. */
.app { padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }
/* На обложке дня нижней панели нет (views.js: syncNavBar), и запас под
   неё превращался бы в пустую полосу под дверью «Личная карта».
   Класс, а не :has(): его понимают не все WebView, в которых живёт
   Mini App (та же оговорка, что у .chronicle-stack-inner.is-chapters). */
.app.no-tabbar { padding-bottom: 26px; }
/* На обложке от панели остаётся только перо — запас ровно под него. */
.app.solo-bar { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

/* --- Нижняя панель: перо без панели ---
   Панели как предмета нет: ни капсулы, ни рамки, ни стеклянных коробок.
   Бумага страницы только густеет к низу, чтобы текст под пальцем не спорил
   с подписями. Главный предмет — чернильница с пером (.tab-fab); «Главная»
   и «Назад» — иконка, подпись и точка у активного пункта.
   На обложке дня панель в режиме .is-solo: видно одно перо, пункты
   спрятаны под ним. Ушёл внутрь — они раскрываются из пера в стороны
   (жест `unfold`, пружина 450 мс; views.js: syncNavBar).
   «+» не в потоке табов: табы центрируются сами через justify-content,
   чернильница — отдельный absolute-слой, всегда ровно по центру. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 22px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 80%, transparent) 45%, var(--bg));
  /* Прозрачный верх градиента не должен съедать тапы по контенту под ним. */
  pointer-events: none;
  animation: slide-in 0.4s var(--ease) both;
}
.tabbar > * { pointer-events: auto; }
/* Пока идёт заставка, панели нет совсем: раньше «Главная» и «+»
   просвечивали под логотипом (setTab/setTabbarVisible срабатывали до
   первого экрана). Класс снимает mount() вместе с #loader. */
body.is-booting .tabbar { display: none !important; }
/* Клавиатура открыта (views.js: initKeyboardGuard) — панель уходит вниз,
   чтобы не лечь поверх строк, которые человек сейчас пишет. */
.kb-open .tabbar { opacity: 0; transform: translateY(110%); pointer-events: none; visibility: hidden;
  transition: opacity 0.2s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s; animation: none; }
.tabbar { transition: opacity 0.25s var(--ease), transform 0.3s var(--ease); }
.kb-open .tabbar > * { pointer-events: none; }
.kb-open .app { padding-bottom: 24px; }
.tab {
  flex: 0 1 96px; min-width: 0; border: none; background: transparent;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px 2px; border-radius: 16px; cursor: pointer;
  color: color-mix(in srgb, var(--fg) 52%, transparent); font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  transition: color 0.25s var(--ease), opacity 0.3s var(--ease), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tab::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  opacity: 0; transform: scale(0); transition: opacity 0.3s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tab:active { transform: scale(0.92); }
.tab .tab-ic { font-size: 18px; line-height: 1; transition: transform 0.3s var(--ease); display: grid; place-items: center; }
.tab .tab-ic svg { width: 23px; height: 23px; display: block; }
.tab .tab-tx { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab.active { color: var(--accent); }
.tab.active::after { opacity: 1; transform: none; }
.tab.active .tab-ic { transform: translateY(-1px) scale(1.06); }

/* --- Монеты панели (сентябрь 2026) ---
   «Главная», «Назад», листалка глав и вкладки Хаба — одна семья с
   чернильницей: бумажная монета с гравированной иконкой в чернилах
   раздела. Раньше «Назад» был серой иконкой без подложки и выпадал из
   панели. Активная монета (Главная в меню) налита чернилами, как «+». */
.tab { --coin: color-mix(in srgb, var(--accent) 9%, var(--card)); color: color-mix(in srgb, var(--fg) 66%, transparent); gap: 4px; padding-top: 0; }
.tab .tab-ic {
  width: 40px; height: 40px; border-radius: 50%;
  color: color-mix(in srgb, var(--accent) 78%, var(--fg));
  background: radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--coin) 30%, #fff) 0, var(--coin) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    0 6px 14px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform 0.3s var(--ease), background 0.4s var(--ease), color 0.3s var(--ease);
}
.tab .tab-ic svg { width: 20px; height: 20px; }
.tab-back .tab-ic svg { width: 19px; height: 19px; }
.tab.active .tab-ic {
  color: #fff;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--accent) 45%, #fff) 0, var(--accent) 52%, color-mix(in srgb, var(--accent) 72%, #0b1530) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 8px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.tab::after { display: none; }
.tab.active { color: color-mix(in srgb, var(--accent) 80%, var(--fg)); }
:root[data-night="1"] .tab { --coin: rgba(233, 194, 122, 0.1); color: color-mix(in srgb, var(--gold) 70%, transparent); }
:root[data-night="1"] .tab .tab-ic {
  color: var(--gold); background: radial-gradient(circle at 34% 26%, rgba(255, 243, 214, 0.16), rgba(233, 194, 122, 0.08) 70%);
  box-shadow: inset 0 0 0 1px rgba(233, 194, 122, 0.28), 0 0 16px -4px rgba(233, 194, 122, 0.25);
}
:root[data-night="1"] .tab.active .tab-ic { color: #140f2c; background: radial-gradient(circle at 34% 28%, #fff3d6, #e9c27a 55%, #b8862b); }

/* Обложка: только перо. Пункты уходят под него (туда же и возвращаются). */
.tabbar.is-solo .tab { opacity: 0; pointer-events: none; }
.tabbar.is-solo [data-tab="home"] { transform: translateX(86px) scale(0.5); }
.tabbar.is-solo .tab-back { transform: translateX(-86px) scale(0.5); }
.tabbar.is-solo .tab-fab { transform: translateX(-50%) translateY(6px) scale(1.1); }
.tabbar:not(.is-solo) .tab { transition-delay: 0.06s; }

/* Коридор под чернильницей: табы не должны лечь под её кольцо. */
.tab-gap { flex: 0 0 clamp(116px, 32vw, 136px); height: 1px; }
.tabbar.has-send .tab-gap { flex: 0 0 clamp(168px, 48vw, 206px); }

/* --- Чернильница: перо в чернилах раздела ---
   Цвет — --accent раздела: синие чернила на Главной, зелёные в Эмоциях,
   золото в Летописи. Блик-мениск сверху, внутри — перо из логотипа
   (quill.js). Живёт одно кольцо раз в 5,5 с — больше на панели ничего
   не движется. Тап — `dip`: перо ныряет, по чернилам расходится круг. */
.tab-fab {
  position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
  width: 66px; height: 66px; padding: 0; border: none; border-radius: 50%; z-index: 2;
  display: block; cursor: pointer; color: #fff;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--accent) 45%, #fff) 0, var(--accent) 48%, color-mix(in srgb, var(--accent) 70%, #0b1530) 100%);
  box-shadow: 0 14px 28px -8px color-mix(in srgb, var(--accent) 65%, transparent),
    inset 0 -6px 12px rgba(0, 0, 0, 0.14), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s var(--ease), opacity 0.2s var(--ease),
    background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tab-fab::before {
  content: ""; position: absolute; left: 14px; top: 9px; width: 24px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.42); transform: rotate(-24deg); filter: blur(1px); pointer-events: none;
}
.tab-fab-quill {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -24px 0 0 -23px;
  overflow: visible; transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tab-fab.is-open .tab-fab-quill { transform: rotate(135deg) scale(0.8); }
.tab-fab.is-dip .tab-fab-quill { animation: fab-dip 0.42s var(--ease); }
@keyframes fab-dip { 40% { transform: translateY(4px) rotate(-8deg); } }
.tab-fab-ring {
  position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  animation: fab-ring 5.5s var(--ease) infinite;
}
@keyframes fab-ring { 0%, 55% { transform: scale(0.9); opacity: 0; } 65% { opacity: 0.9; } 100% { transform: scale(1.35); opacity: 0; } }
.tab-fab-splash { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.tab-fab.is-dip .tab-fab-splash { animation: fab-splash 0.6s var(--ease); }
@keyframes fab-splash { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.9); opacity: 0; } }
.tab-fab:active { transform: translateX(-50%) scale(0.93); filter: brightness(1.05); }
.tabbar.is-solo .tab-fab:active { transform: translateX(-50%) translateY(6px) scale(1.02); }
/* Тариф не открывает быстрый ввод (surface "quicknew") — чернила
   выцветают, кольца нет, тап ведёт на тарифы. */
.tab-fab.locked {
  background: radial-gradient(circle at 34% 28%, #eef1f6, #b8c0cc 60%, #98a1ae); box-shadow: var(--shadow); opacity: 0.7;
}
.tab-fab.locked:active { filter: none; }
.tab-fab.locked .tab-fab-ring { display: none; }

/* «Назад» — такой же пункт, как «Главная», у правого края. */
.tab-back .tab-ic svg { width: 22px; height: 22px; }
/* Погашенный, но занимающий место — см. syncNavBar(). */
.tab-back.is-off { visibility: hidden; pointer-events: none; }

/* --- Пилюля действия: «Дальше», «В дневник», «Отправить» ---
   Та же семья, что чернильница: пока шаг не готов, пилюля — бледная
   бумага; когда ответ выбран, её слева направо заливают чернила. При
   сохранении (setSendTabBusy → .is-busy) пилюля сжимается в каплю.
   Делает ровно то же, что кнопка экрана: таб кликает по [data-compose-save]. */
.tab-send {
  position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; justify-content: center;
  min-width: clamp(160px, 46vw, 196px); height: 52px; padding: 0 26px; border: none; border-radius: 26px;
  cursor: pointer; overflow: hidden; isolation: isolate;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: #fff;
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tab-send[hidden] { display: none !important; }
.tab-send-ink {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; transform-origin: left center;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 80%, #0b1530));
  transition: transform 0.42s var(--ease);
}
.tab-send-label { position: relative; z-index: 1; transition: opacity 0.2s, transform 0.2s; }
.tab-send:active { transform: translateX(-50%) scale(0.96); }
.tab-send[disabled] { pointer-events: none; }
.tab-send[disabled]:not(.is-busy) { color: color-mix(in srgb, var(--accent) 55%, #6b7686); box-shadow: none; }
.tab-send[disabled]:not(.is-busy) .tab-send-ink { transform: scaleX(0); }
/* ВК: во время записи/генерации пилюля исчезает целиком — прежнее
   сжатие в узкую каплю (scaleX) читалось как сломанный полукруг.
   Состояние «что происходит» несёт печать на экране (entry-seal). */
.tab-send.is-busy { visibility: hidden; }

/* --- Листалка глав: «‹ Июнь» и «Август ›» в коридоре посреди панели ---
   Бумажные пилюли той же семьи, парой и по центру. */
.tab-pager {
  position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: clamp(150px, 46vw, 200px);
}
.tab-pager[hidden] { display: none !important; }
.tabbar.has-pager .tab-gap { flex: 0 0 clamp(158px, 48vw, 210px); }
.tab-pager-tab {
  flex: 1 1 0; min-width: 0; padding: 11px 6px; border: none; border-radius: 100px; cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--accent) 78%, var(--fg));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* Та же монета, что у «Главной» и «Назад», только вытянутая. */
  background: radial-gradient(120% 140% at 30% 20%, color-mix(in srgb, color-mix(in srgb, var(--accent) 9%, var(--card)) 30%, #fff) 0, color-mix(in srgb, var(--accent) 9%, var(--card)) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    0 6px 14px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  transition: transform 0.15s var(--ease);
}
.tab-pager-tab[hidden] { display: none !important; }
.tab-pager-tab:active { transform: scale(0.94); }


/* --- Заголовок раздела --- */
.sec-head { text-align: center; margin: 6px 0 18px; }
.sec-head h1 { font-family: var(--font-serif); font-weight: 500; font-size: 27px; margin: 0 0 6px; }
.sec-sub { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.5; }

.loader-ring.center { margin: 40px auto; }

/* --- Голос дня --- */
.voice-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 4%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: var(--radius); padding: 16px; margin-bottom: 18px;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.voice-card.voice-in { opacity: 1; transform: none; }
.voice-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  animation: breathe 4s var(--ease) infinite;
}
.voice-title { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.voice-text { margin: 0; font-size: 15px; line-height: 1.5; }
.voice-q { margin: 8px 0 0; font-family: var(--font-serif); font-style: italic; color: var(--fg); font-size: 15px; line-height: 1.45; }

/* --- Панели --- */
.panels { display: flex; flex-direction: column; gap: 16px; }
.panel-empty { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 6px 0 0; text-align: center; }

/* --- AI-инсайт «спросить» --- */
.insight-block { margin-top: 14px; }
.insight-ask {
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--accent-soft); color: var(--accent);
  border-radius: 14px; padding: 9px 14px; font-family: var(--font-ui);
  font-size: 13.5px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
  transition: transform 0.2s var(--ease);
}
.insight-ask:active { transform: scale(0.96); }
.insight-out { margin-top: 10px; }
.insight-out.insight-text {
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  border-left: 3px solid var(--accent); border-radius: 10px; padding: 12px 14px;
}
.reveal-line { margin: 0; font-size: 14.5px; line-height: 1.55; opacity: 0; transform: translateY(6px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal-line.in { opacity: 1; transform: none; }
.dots { display: inline-flex; gap: 5px; padding: 4px 2px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0.5; animation: dot-bounce 1s var(--ease) infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot-bounce { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-5px); opacity: 1; } }

/* --- Аура недели --- */
.week-aura { margin-bottom: 16px; }
.week-aura-scene {
  position: relative;
  height: 148px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--aura-bg, #EEF4FF);
  display: grid;
  place-items: center;
}
.week-aura-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--aura-glow, #4A90D9) 0%, transparent 70%);
  opacity: 0.45;
  animation: aura-pulse 4.5s var(--ease) infinite;
}
.week-aura-core {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--aura-core, #7EC8E3) 55%, var(--aura-glow, #4A90D9) 100%);
  box-shadow: 0 0 28px color-mix(in srgb, var(--aura-glow, #4A90D9) 55%, transparent);
  z-index: 2;
  animation: aura-float 5s var(--ease) infinite;
}
.week-aura-rays {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background:
    repeating-conic-gradient(from 0deg, var(--aura-glow, #4A90D9) 0deg 8deg, transparent 8deg 24deg);
  mask-image: radial-gradient(circle, #000 20%, transparent 72%);
  animation: aura-spin 28s linear infinite;
}
.week-aura-rays-sharp { opacity: 0.5; animation-duration: 18s; }
.week-aura-rays-jagged { opacity: 0.55; filter: contrast(1.4); animation-duration: 14s; }
.week-aura-rays-dim { opacity: 0.22; animation-duration: 36s; }
.week-aura-caption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.week-aura-caption strong { color: var(--fg); font-size: 14px; }
@keyframes aura-pulse { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.08); opacity: 0.55; } }
@keyframes aura-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes aura-spin { to { transform: rotate(360deg); } }

/* --- График недели --- */
.week-svg { width: 100%; height: auto; display: block; }
.wk-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.wk-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wk-line.energy { stroke: var(--energy); stroke-width: 2; opacity: 0.55; stroke-dasharray: 2 5; }
.wk-dot { fill: #fff; stroke: var(--accent); stroke-width: 2.4; }
.wk-day { fill: var(--muted); font-size: 10px; font-family: var(--font-ui); }
.wk-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wk-stats span { background: var(--bg); border-radius: 10px; padding: 6px 10px; font-size: 12.5px; color: var(--muted); }
.wk-stats b { color: var(--fg); }
.wk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag { font-size: 12px; padding: 4px 10px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* --- Погода --- */
.weather-scene { position: relative; height: 130px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; }
.weather-sky { position: absolute; inset: 0; opacity: 0.9; }
.weather-emoji { position: relative; font-size: 58px; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12)); animation: float-soft 5s var(--ease) infinite; }
@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.weather-clear .weather-sky { background: linear-gradient(160deg, #fff6d8, #ffe6a8); }
.weather-partly .weather-sky { background: linear-gradient(160deg, #eaf2ff, #dbe8ff); }
.weather-rain .weather-sky, .weather-storm .weather-sky { background: linear-gradient(160deg, #d7deea, #b9c4d6); }
.weather-hurricane .weather-sky { background: linear-gradient(160deg, #c3cad8, #9aa6bb); }
.weather-frost .weather-sky { background: linear-gradient(160deg, #e6f1fb, #cfe4f5); }
.weather-fog .weather-sky { background: linear-gradient(160deg, #eef1f5, #dfe4ea); }
.weather-after_rain .weather-sky { background: linear-gradient(160deg, #e3f7ec, #cdeede); }
.weather-label { text-align: center; font-family: var(--font-serif); font-size: 19px; margin-top: 12px; }
.weather-narrative { color: var(--fg); font-size: 14.5px; line-height: 1.55; margin: 10px 0 0; white-space: pre-line; }

/* --- Карта тела --- */
.body-wrap { display: grid; place-items: center; padding: 6px 0; }
.body-svg { width: 130px; height: auto; }
.body-figure [data-z] { fill: color-mix(in srgb, var(--accent) 8%, var(--bg)); stroke: var(--border); stroke-width: 1; transition: fill 0.6s var(--ease); }
.body-figure [data-z].hot { fill-opacity: var(--hot, 0.5); filter: drop-shadow(0 0 6px currentColor); }
.body-legend { display: flex; justify-content: center; gap: 14px; margin-top: 10px; }
.body-legend span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.body-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* --- Портрет: грани --- */
.facet-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.facet-row {
  text-align: left; border: 1px solid var(--border); background: var(--bg);
  border-radius: 14px; padding: 12px 14px; cursor: pointer; position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  font-family: var(--font-ui);
}
.facet-name { font-size: 14.5px; font-weight: 600; color: var(--fg); }
.facet-caret { color: var(--muted); transition: transform 0.3s var(--ease); }
.facet-row.open .facet-caret { transform: rotate(90deg); }
.facet-text { grid-column: 1 / -1; margin: 0; max-height: 0; overflow: hidden; opacity: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; transition: max-height 0.4s var(--ease), opacity 0.4s var(--ease), margin 0.3s var(--ease); }
.facet-row.open .facet-text { max-height: 240px; opacity: 1; margin-top: 10px; }
.facet-diff { margin-top: 14px; background: var(--accent-soft); border-radius: 12px; padding: 12px 14px; }
.diff-title { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.diff-line { font-size: 13.5px; color: var(--fg); line-height: 1.5; }

/* --- Баланс: весы --- */
.scales { position: relative; height: 118px; margin: 4px 0 8px; }
.scale-beam { position: absolute; top: 30px; left: 50%; width: 220px; height: 6px; margin-left: -110px; background: linear-gradient(90deg, var(--high), var(--mid)); border-radius: 4px; transition: transform 1s var(--ease); transform-origin: center; }
.scale-post { position: absolute; left: 50%; top: 6px; width: 4px; height: 78px; margin-left: -2px; background: var(--border); }
.pan { position: absolute; top: 6px; display: flex; flex-direction: column; align-items: center; width: 74px; }
.pan-left { left: -50px; }
.pan-right { right: -50px; }
.pan-emoji { font-size: 22px; }
.pan b { font-size: 18px; font-weight: 700; }
.pan small { font-size: 10.5px; color: var(--muted); }
.scale-base { position: absolute; left: 50%; bottom: 0; width: 70px; height: 8px; margin-left: -35px; background: var(--border); border-radius: 6px; }
.balance-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.bal-col { background: var(--bg); border-radius: 14px; padding: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.bal-title { width: 100%; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.bubble { font-size: 12.5px; padding: 5px 11px; border-radius: 18px; font-weight: 600; }
.bubble.risk { background: color-mix(in srgb, #e06666 16%, #fff); color: #b84a4a; }
.bubble.support { background: color-mix(in srgb, var(--high) 18%, #fff); color: #2c9c68; }
.bubble.faint { opacity: 0.7; font-weight: 500; }

/* --- Путь: hero + созвездия секций --- */
.path-hero {
  display: grid; gap: 14px; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent) 4%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.path-hero-ring {
  position: relative; width: 92px; height: 92px; margin: 0 auto;
}
.path-hero-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.path-hero-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 1px; font-family: var(--font-serif);
}
.path-hero-label b { font-size: 26px; font-weight: 700; }
.path-hero-label span { color: var(--muted); font-size: 16px; }
.path-hero-title {
  font-family: var(--font-serif); font-size: 20px; font-weight: 500;
  text-align: center; margin-bottom: 4px;
}
.path-hero-sub {
  margin: 0; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.5;
}
.path-orbit { margin-top: 4px; }
.path-orbit-svg { width: 100%; height: auto; display: block; }
.path-orbit-node { cursor: default; }
.path-orbit-halo {
  fill: color-mix(in srgb, var(--node-accent, var(--accent)) 16%, transparent);
  stroke: color-mix(in srgb, var(--node-accent, var(--accent)) 30%, transparent);
  stroke-width: 1;
}
.path-orbit-core { fill: var(--node-accent, var(--accent)); opacity: 0.88; }
.path-orbit-glyph {
  font-size: 11px; fill: #fff; font-family: var(--font-ui); pointer-events: none;
}

/* --- Путь: огонь стрика --- */
.flame-card {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, #ff9a3c 14%, var(--card)), var(--card));
  border: 1px solid color-mix(in srgb, #ff9a3c 28%, var(--border));
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.flame { position: relative; width: 46px; height: 56px; flex: 0 0 auto; transform: scale(var(--flame-scale, 1)); transform-origin: bottom center; }
.flame span { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.flame-out { width: 34px; height: 46px; background: radial-gradient(circle at 50% 80%, #ffcf5e, #ff8a3c 70%, transparent); animation: flicker 2.2s var(--ease) infinite; }
.flame-mid { width: 22px; height: 34px; background: radial-gradient(circle at 50% 80%, #ffe9a8, #ff9a3c 75%); animation: flicker 1.6s var(--ease) infinite reverse; }
.flame-core { width: 11px; height: 20px; background: #fff4d6; animation: flicker 1.3s var(--ease) infinite; }
.flame.cold { filter: grayscale(1) brightness(1.1); opacity: 0.5; }
.flame.cold span { animation: none; }
@keyframes flicker { 0%, 100% { transform: translateX(-50%) scaleY(1) rotate(-1deg); } 50% { transform: translateX(-50%) scaleY(1.1) rotate(1.5deg); } }
.flame-meta { flex: 1; }
.flame-days { font-size: 15px; }
.flame-days b { font-size: 26px; font-family: var(--font-serif); color: #ef7a2c; }
.flame-next { font-size: 12.5px; color: var(--muted); margin: 4px 0 8px; }
.flame-track { height: 6px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.flame-track span { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #ff9a3c, #ffcf5e); transition: width 1s var(--ease); }

.ach-sections { display: flex; flex-direction: column; gap: 16px; }
@keyframes star-pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse-soft { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

.ach-panel { --sec-accent: var(--accent); }
.ach-panel-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.ach-panel-badge {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; font-size: 18px;
  color: var(--sec-accent);
  background: color-mix(in srgb, var(--sec-accent) 14%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec-accent) 24%, transparent);
}
.ach-panel-meta { flex: 1; min-width: 0; }
.ach-panel-meta h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.ach-panel-bar {
  height: 5px; background: var(--bg); border-radius: 4px; overflow: hidden;
}
.ach-panel-bar span {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--sec-accent), color-mix(in srgb, var(--sec-accent) 55%, #fff));
  transition: width 0.9s var(--ease);
}
.ach-count { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--sec-accent); }

.ach-field-wrap { padding: 4px 0 0; min-height: 200px; }
.ach-field-svg { width: 100%; height: auto; display: block; }
.ach-field-line {
  fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.28; stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: line-draw 1.4s var(--ease) forwards;
}
.ach-node {
  cursor: pointer; opacity: 0; animation: star-pop 0.55s var(--ease) forwards;
}
.ach-node:active { transform: scale(0.92); }
.ach-node-halo {
  fill: color-mix(in srgb, var(--node-accent, var(--accent)) 14%, transparent);
}
.ach-node-core { fill: var(--node-accent, var(--accent)); opacity: 0.35; }
.ach-node.earned .ach-node-core { opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--node-accent) 50%, transparent)); }
.ach-node.progress .ach-node-core { opacity: 0.72; animation: pulse-soft 2.4s var(--ease) infinite; }
.ach-node.locked { opacity: 0.55; cursor: default; }
.ach-node-glyph {
  font-size: 11px; fill: #fff; font-family: var(--font-ui); pointer-events: none;
}
.ach-node.locked .ach-node-glyph { fill: var(--muted); }

.ach-sheet-card { text-align: left; }
.ach-sheet-body { text-align: left; max-width: none; margin: 8px 0 0; }
.ach-sheet-meta { margin-top: 12px; }
.ach-sheet-date { font-size: 12.5px; color: var(--accent); font-weight: 600; }
.ach-sheet-track {
  height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 8px;
}
.ach-sheet-track span {
  display: block; height: 100%; background: var(--accent); border-radius: 4px;
}

/* --- Подписка --- */
.billing-stack { display: flex; flex-direction: column; gap: 16px; }
.billing-status {
  margin-bottom: 0; align-items: center;
}
.billing-status-emoji {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; font-size: 24px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px -6px var(--accent-glow);
}
.billing-status-title { font-size: 16.5px; font-weight: 700; letter-spacing: -0.1px; }
.billing-status-sub { color: var(--muted); font-size: 13.5px; margin: 3px 0 0; }

/* Карусель тарифов: свайп вбок вместо простыни на весь экран. */
.pricing-wrap { margin: 0 -18px; }
.pricing-grid {
  display: flex; flex-direction: row; gap: 14px;
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x mandatory; scroll-padding-left: 18px;
  padding: 4px 18px 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pricing-grid::-webkit-scrollbar { display: none; }
.pricing-grid.nudge { animation: pricing-nudge 0.9s var(--ease); }
@keyframes pricing-nudge {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-18px); }
  60% { transform: translateX(4px); }
}

.pricing-dots { display: flex; justify-content: center; gap: 6px; margin: 2px 0 4px; }
.pricing-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border);
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), width 0.25s var(--ease);
}
.pricing-dot.active { background: var(--accent); width: 18px; border-radius: 4px; }

.plan-card {
  position: relative; text-align: left; border-radius: 24px;
  display: flex; flex-direction: column;
  flex: 0 0 84%; scroll-snap-align: center; max-width: 320px;
  padding: 20px 20px 18px; background: var(--card);
  border: 1px solid var(--border);
  font-family: var(--font-ui); color: var(--fg);
  box-shadow: 0 1px 0 rgba(31, 45, 61, 0.02);
  transition: transform 0.22s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  opacity: 0; transform: translateY(16px) scale(0.98);
}
.plan-card.card-in {
  animation: plan-card-in 0.62s var(--ease) forwards;
}
@keyframes plan-card-in { to { opacity: 1; transform: none; } }
.plan-card:active { transform: scale(0.982); }

.plan-card.featured {
  border-color: transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 30%, #ffd27a) 55%, var(--accent)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 18px 40px -12px var(--accent-glow), var(--shadow);
}
.plan-card.featured::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 24px; padding: 1.5px;
  background: linear-gradient(115deg, transparent 20%, color-mix(in srgb, var(--accent) 70%, white) 42%, transparent 64%);
  background-size: 250% 250%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: plan-sheen 3.6s ease-in-out 1.1s 1;
  pointer-events: none;
}
@keyframes plan-sheen {
  0% { background-position: 130% 0%; opacity: 0; }
  12% { opacity: 1; }
  55% { background-position: -30% 0%; opacity: 1; }
  100% { background-position: -30% 0%; opacity: 0; }
}

.plan-ribbon {
  position: absolute; top: -11px; left: 20px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: #fff; padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 16px -4px var(--accent-glow);
}

.plan-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.plan-emoji {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 13px; font-size: 18px;
  display: grid; place-items: center;
  background: var(--accent-soft);
}
.plan-card.featured .plan-emoji {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
}
.plan-label { font-size: 17px; font-weight: 700; letter-spacing: -0.1px; }
.plan-blurb {
  margin: 2px 0 14px; font-family: var(--font-serif); font-style: italic;
  color: var(--muted); font-size: 14px; line-height: 1.4;
}

.plan-price { line-height: 1; margin-bottom: 14px; display: flex; align-items: baseline; gap: 4px; }
.plan-price b { font-size: 34px; font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.5px; }
.plan-price span { font-size: 14px; color: var(--muted); }

.plan-check { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.plan-check li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.4; color: var(--fg); }
.plan-check svg {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; color: var(--accent);
}

/* --- «Бесплатная версия» — информационная карточка перед тарифами --- */
.plan-card-free { background: color-mix(in srgb, var(--card) 92%, var(--bg)); }
.plan-check-mixed svg { color: var(--high); }
.plan-check-mixed li.off { color: var(--muted); }
.plan-check-mixed li.off svg { color: var(--muted); }
.plan-static-note {
  margin: auto 0 0; padding: 12px 0 0; text-align: center;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}

/* margin-top: auto — кнопка всегда прижата к низу карточки, на одном уровне
   у всех тарифов, сколько бы пунктов ни было в чек-листе (карточки в ряду
   и так растянуты по высоте до самой высокой — align-items: stretch по
   умолчанию на .pricing-grid). */
.plan-cta {
  width: 100%; margin-top: auto; border-radius: 15px; padding: 13px 16px;
  font-size: 14.5px; font-weight: 700;
  font-family: var(--font-ui); border: none; cursor: pointer;
  transition: transform 0.18s var(--ease), filter 0.2s var(--ease);
}
.plan-cta:active { transform: scale(0.97); }
.plan-cta.primary {
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 26px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* Та же стеклянная поверхность, что у .btn.ghost и табов панели. */
.plan-cta.ghost {
  color: var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.36)),
    color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, rgba(255, 255, 255, 0.8));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 6px 18px -10px var(--accent-glow);
}
.plan-cta.ghost:active { filter: brightness(0.97); }

.billing-note {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); text-align: center;
}
.billing-cta { margin-top: 4px; }

@media (max-width: 360px) {
  .tab .tab-tx { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .plan-card { opacity: 1 !important; transform: none !important; animation: none !important; }
  .plan-card.featured::before { animation: none !important; opacity: 0; }
}

/* --- Бережность к движению --- */
@media (prefers-reduced-motion: reduce) {
  .orb, .breath, .intro-metaphor { animation: none !important; }
  .const-core { animation: core-in 0.4s var(--ease) both !important; }
  .const-core::before { animation: none !important; }
  .const-core.tappable::after { animation: none !important; opacity: 0; }
  .star.done .star-glow,
  .star.done .star-dot,
  .star.done .star-halo { animation: none !important; }
  .star.done .star-glow { opacity: 0.32; }
  .star-inner { animation: star-in 0.5s var(--ease) both !important; }
  .const-ray { animation: none; opacity: 0.2; stroke-dashoffset: 0; }
  .const-line { animation: none; stroke-dashoffset: 0; opacity: 0.2; }
  .q-progress span::after { animation: none; opacity: 0; }
  .screen { animation-duration: 0.001s; }
  .flame span, .voice-icon, .ach-node.progress .ach-node-core,
  .weather-emoji { animation: none !important; }
  .panel-in, .ach-node { animation-duration: 0.001s; opacity: 1; }
  html { transition: none; }
}

/* --- Согласие на обработку данных --- */
.consent-screen { text-align: center; padding-top: 8px; }
.consent-mark {
  font-size: 40px; margin: 8px auto 4px; width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 24px; background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-glow);
}
.consent-body { text-align: left; margin: 10px 0 18px; }
.consent-body p { font-size: 15px; margin: 0 0 12px; }
.consent-body ul { margin: 0 0 12px; padding-left: 18px; }
.consent-body li { font-size: 14.5px; line-height: 1.5; margin-bottom: 7px; color: var(--fg); }
.consent-actions { display: flex; flex-direction: column; gap: 10px; }
.consent-terms { text-align: left; font-size: 13.5px; color: var(--muted); margin: 0 0 14px; } /* ВК */
.consent-note { min-height: 18px; font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* --- Политика конфиденциальности --- */
/* Экран без своей плашки фона — под текстом должна дышать та же дрейфующая
   аура (.aurora), что и на остальном приложении, а не плоский застывший
   цвет. .screen задаёт непрозрачный var(--bg) глобально (нужно для
   слайд-переходов между экранами), поэтому здесь явно снимаем его. */
.policy-screen { padding-bottom: 40px; }
.policy-head { margin-bottom: 10px; }

.policy-title-card,
.policy-sec {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px);
}
.policy-title-card { animation: policy-sec-in 0.5s var(--ease) forwards; }
.policy-title-card h2 { margin-top: 0; }
.policy-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 4px; }
.policy-ver { color: var(--muted); font-size: 13px; margin: 0; opacity: 0.85; }
.policy-loading { color: var(--muted); font-size: 14px; }
.policy-sec.sec-in { animation: policy-sec-in 0.5s var(--ease) forwards; }
@keyframes policy-sec-in { to { opacity: 1; transform: none; } }
.policy-sec h3 {
  font-family: var(--font-serif); font-size: 18px; font-weight: 500;
  margin: 0 0 8px; letter-spacing: -0.2px;
}
.policy-sec p { font-size: 14.5px; line-height: 1.6; margin: 0 0 9px; }
.policy-sec p:last-child { margin-bottom: 0; }
.policy-sec ul { margin: 0 0 9px; padding-left: 18px; }
.policy-sec li { font-size: 14px; line-height: 1.55; margin-bottom: 6px; color: var(--fg); }
.policy-sec li:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .policy-title-card, .policy-sec { opacity: 1; transform: none; animation: none !important; }
}
.policy-link {
  background: none; border: none; color: var(--accent); font: inherit;
  font-size: 13px; cursor: pointer; padding: 6px 0 0; text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Сонник: ночь внутри дня (dreams.js, DESIGN.md § Ночь) ---
   Раздел живёт на ночных токенах (:root[data-night="1"]). Небо месяца —
   единственный цикл экрана: несколько мерцающих точек фона. Жесты:
   `star` (звёзды зажигаются по очереди на входе), `draw` (созвездие
   образа), `flip` (карта сна), поворот кольца линз. */
:root { --energy-ink: color-mix(in srgb, var(--energy) 78%, var(--fg)); }

.nx-screen { position: relative; z-index: 1; }
/* Блоки Сонника — flex/grid, и display перебивал бы атрибут hidden. */
.nx-screen [hidden] { display: none !important; }
.nx-kicker { margin: 0 0 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); }
.nx-h1 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 28px; letter-spacing: -0.5px; line-height: 1.12; color: var(--fg); }
.nx-sub { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.nx-note { margin: 0; padding: 18px 8px; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.nx-lbl { margin: 22px 2px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

.nx-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 2px; }
.nx-head.is-center { justify-content: center; text-align: center; margin-bottom: 18px; }
.nx-head-moon { flex: 0 0 56px; width: 56px; height: 56px; filter: drop-shadow(0 0 16px rgba(233, 194, 122, 0.35)); }
.nx-head-moon svg { width: 100%; height: 100%; display: block; }
.nx-head-tx { min-width: 0; }

/* Небо месяца: во всю ширину, выходит из полей .app. */
.nx-sky { position: relative; margin: 6px -18px 0; }
.nx-sky svg { display: block; width: 100%; height: auto; overflow: visible; }
.nx-trail { fill: none; stroke: rgba(233, 194, 122, 0.22); stroke-width: 1; stroke-dasharray: 2 5; }
.nx-sym { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.nx-sky.is-constellation { padding-bottom: 46px; }
.nx-const-line { stroke: var(--gold); stroke-width: 1.1; stroke-linecap: round; opacity: 0.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: nx-draw 0.9s var(--ease) forwards; }
.nx-sky.is-constellation.has-sym .nx-const-line { opacity: 0.14; }
.nx-const-glyph { width: 100%; height: 100%; display: block; overflow: visible; }
.nx-const-glyph .l line { stroke: var(--gold); stroke-width: 0.9; opacity: 0.55; }
.nx-const-glyph .s circle { fill: #fff6e0; filter: drop-shadow(0 0 2px rgba(233, 194, 122, 0.8)); }
.nx-head-moon.is-const::before, .nx-tome-moon.is-const::before { display: none; }
.nx-head-moon.is-const { filter: drop-shadow(0 0 10px rgba(233, 194, 122, 0.3)); }
.nx-sky.is-constellation .nx-sym { opacity: 0.55; stroke-dasharray: 1; stroke-dashoffset: 1; animation: nx-draw 1.6s var(--ease) 0.6s forwards; }
.nx-sky.is-constellation.has-sym .nx-sym:not(.is-on) { opacity: 0.12; }
.nx-const-name { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--gold); animation: rise 0.6s var(--ease) 1.4s both; }
.nx-const-name span { display: block; font-family: var(--font-ui); font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.nx-sym.is-on { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; animation: nx-draw 0.9s var(--ease) forwards; }
@keyframes nx-draw { to { stroke-dashoffset: 0; } }
.nx-star { cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); animation: nx-star-in 0.46s var(--ease) both; }
@keyframes nx-star-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
.nx-star-ring { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0; transition: opacity 0.3s var(--ease); }
.nx-star.is-sel .nx-star-ring, .nx-star:focus-visible .nx-star-ring { opacity: 1; }
.nx-star-multi { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 0.8; stroke-dasharray: 1.5 2; }
.nx-star-day { font-family: var(--font-ui); font-size: 9px; fill: var(--muted); }
.has-sym .nx-star.is-dim { opacity: 0.28; }
.has-sym .nx-star.is-lit { transform: scale(1.3); }
.nx-tw { animation: nx-tw 7s ease-in-out infinite; }
@keyframes nx-tw { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.85; } }
.nx-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: -2px; font-size: 10.5px; color: var(--muted); }
.nx-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }

/* Выбранная ночь — полоса под небом. */
.nx-strip {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; min-height: 64px;
  border-radius: 20px; background: var(--card); border: 1px solid var(--border);
}
.nx-strip-day { flex: 0 0 34px; text-align: center; font-family: var(--font-serif); font-size: 24px; line-height: 1; color: var(--fg); }
.nx-strip-day small { display: block; margin-top: 3px; font-family: var(--font-ui); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.nx-strip-ic { flex: 0 0 34px; display: grid; place-items: center; color: var(--gold); }
.nx-strip-ic svg { width: 24px; height: 24px; }
.nx-strip-tx { flex: 1; min-width: 0; }
.nx-strip-tx b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 16px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-strip-tx span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.nx-strip-open {
  flex: 0 0 auto; cursor: pointer; font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  padding: 8px 12px; border-radius: 100px; color: var(--gold);
  background: rgba(233, 194, 122, 0.1); border: 1px solid rgba(233, 194, 122, 0.45);
}
.nx-strip-open:active { transform: scale(0.95); }

.nx-syms { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 4px; scrollbar-width: none; }
.nx-syms::-webkit-scrollbar { display: none; }
.nx-sym-chip {
  flex: 0 0 auto; display: grid; justify-items: center; gap: 3px; min-width: 70px; padding: 10px 8px 8px;
  border-radius: 16px; border: 1px solid var(--border); background: var(--card); color: var(--fg);
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.nx-sym-chip svg { width: 22px; height: 22px; color: var(--gold); }
.nx-sym-chip small { font-size: 10px; color: var(--muted); font-weight: 500; }
.nx-sym-chip.is-on { border-color: var(--gold); background: rgba(233, 194, 122, 0.13); }

.nx-nights { border-radius: 20px; background: var(--card); border: 1px solid var(--border); overflow: hidden; }
.nx-night {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
  background: none; border: 0; color: inherit; font-family: var(--font-ui); text-align: left;
}
.nx-night + .nx-night { border-top: 1px solid var(--border); }
.nx-night-day { flex: 0 0 30px; text-align: center; font-family: var(--font-serif); font-size: 19px; line-height: 1; color: var(--fg); }
.nx-night-day small { display: block; margin-top: 2px; font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.nx-night-dot { flex: 0 0 14px; display: grid; place-items: center; }
.nx-night-dot::before { content: ""; width: var(--s, 8px); height: var(--s, 8px); border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.nx-night-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-night-t small { margin-left: 8px; font-size: 11px; font-weight: 500; color: var(--muted); }
.nx-chev { color: var(--muted); font-size: 17px; }

.nx-tomes { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.nx-tome {
  display: grid; justify-items: center; gap: 3px; padding: 12px 4px 10px; cursor: pointer;
  border-radius: 16px; border: 1px solid var(--border); background: var(--card); color: var(--fg);
  font-family: var(--font-ui); font-size: 12px;
}
.nx-tome b { font-weight: 600; line-height: 1.2; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nx-tome.is-const b { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: #f3e7c6; }
.nx-tome small { font-size: 10px; color: var(--muted); }
.nx-tome.is-on { border-color: var(--gold); cursor: default; }
.nx-tome-moon { width: 34px; height: 34px; }
.nx-tome-moon svg { width: 100%; height: 100%; display: block; }

.nx-echo { margin-top: 18px; padding: 4px 16px 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); }
.nx-echo .nx-lbl { margin-top: 12px; }
.nx-echo-text { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--fg); }

.nx-empty { display: grid; justify-items: center; padding: 30px 6px; }
.nx-empty-mark { width: 64px; height: 64px; color: var(--gold); opacity: 0.8; }
.nx-upsell { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 18px 4px; }
.nx-upsell-mark { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); border: 1px solid rgba(233, 194, 122, 0.35); background: radial-gradient(circle, rgba(233, 194, 122, 0.16), transparent 70%); }
.nx-upsell-mark svg { width: 52px; height: 52px; }
.nx-upsell-title { margin: 6px 0 0; font-size: 23px; line-height: 1.2; color: var(--fg); text-wrap: balance; }
.nx-upsell .nx-note { padding: 0 6px 6px; }
.nx-upsell .btn.primary { width: auto; padding: 14px 28px; }

/* Ночь: несколько снов одной даты */
.nx-dreams { display: flex; flex-direction: column; gap: 12px; }
.nx-dream {
  display: flex; gap: 14px; width: 100%; padding: 16px; text-align: left; cursor: pointer;
  border-radius: 20px; background: var(--card); border: 1px solid var(--border); color: inherit; font-family: var(--font-ui);
}
.nx-dream.is-fragment { cursor: default; border-style: dashed; }
.nx-dream-star { flex: 0 0 34px; height: 34px; display: grid; place-items: center; }
.nx-dream-star::before { content: ""; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, var(--c) 60%); box-shadow: 0 0 16px var(--c); }
.nx-dream-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nx-dream-t { font-family: var(--font-serif); font-size: 17px; color: var(--fg); }
.nx-dream-p { font-size: 13px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-dream-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.nx-dream-sym { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--gold); }
.nx-dream-sym svg { width: 13px; height: 13px; }

/* --- Карта сна: аркан с переворотом --- */
.nx-tarot { perspective: 1100px; width: min(236px, 70vw); aspect-ratio: 236 / 342; margin: 8px auto 10px; cursor: pointer; outline: none; }
.nx-tarot:focus-visible .nx-face { box-shadow: 0 0 0 2px var(--gold); }
.nx-tarot-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s var(--ease); }
.nx-tarot.is-flipped .nx-tarot-inner { transform: rotateY(180deg); }
.nx-tarot.is-in .nx-tarot-inner { animation: nx-card-in 0.7s var(--ease) 0.08s backwards; }
@keyframes nx-card-in { from { opacity: 0; transform: rotateY(-80deg) scale(0.92); } to { opacity: 1; transform: none; } }
.nx-face { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.nx-front {
  display: grid; grid-template-rows: auto 1fr auto; padding: 16px 14px; text-align: center; color: #f3e7c6;
  background: radial-gradient(circle at 50% 40%, rgba(184, 146, 255, 0.42), transparent 58%), linear-gradient(170deg, #241b58, #100c2a 72%);
  border: 1px solid rgba(233, 194, 122, 0.55);
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.85), 0 0 44px -12px rgba(184, 146, 255, 0.55);
}
.nx-front::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(233, 194, 122, 0.35); border-radius: 13px; pointer-events: none; }
.nx-front::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.3; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0.6px, transparent 1px); background-size: 19px 23px; }
.nx-front-top { display: grid; gap: 1px; position: relative; z-index: 1; }
.nx-arc-num { font-family: var(--font-serif); font-size: 14px; letter-spacing: 0.3em; color: var(--gold); }
.nx-arc-name { font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #b5addb; }
.nx-medallion { position: relative; width: 66%; aspect-ratio: 1; margin: auto; z-index: 1; }
.nx-medallion-frame { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold); }
.nx-medallion-core { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff3d6, #e9c27a 60%, #b8862b); box-shadow: 0 0 30px 6px rgba(233, 194, 122, 0.45); }
.nx-medallion.is-bare .nx-medallion-core { width: 40%; }
.nx-medal-sym { position: absolute; width: 23%; aspect-ratio: 1; transform: translate(-50%, 0); color: #f3e7c6; }
.nx-medal-sym svg { width: 100%; height: 100%; display: block; }
.nx-front-foot { position: relative; z-index: 1; }
.nx-card-title { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 22px; line-height: 1.1; color: #f7eed7; letter-spacing: -0.3px; }
.nx-card-meta { margin: 5px 0 0; font-size: 10px; letter-spacing: 0.03em; color: #b5addb; line-height: 1.4; }
.nx-back {
  transform: rotateY(180deg); display: grid; align-content: start; gap: 10px; padding: 20px 18px; overflow-y: auto;
  background: #f7f1ff; color: #2a2350; border: 1px solid rgba(233, 194, 122, 0.55);
}
/* Лицо и оборот меняются видимостью на середине поворота (400 мс):
   backface-visibility у слоёв внутри лица (медальон с transform)
   WebKit не наследует, и диск просвечивал сквозь сон. В покое карта
   плоская (.is-flat, dreams.js) — оборот прокручивается пальцем. */
.nx-front { transition: visibility 0s linear 0.4s; }
.nx-back { visibility: hidden; transition: visibility 0s linear 0.4s; }
.nx-tarot.is-flipped .nx-front { visibility: hidden; }
.nx-tarot.is-flipped .nx-back { visibility: visible; }
.nx-tarot.is-flat .nx-tarot-inner { transform: none; transition: none; transform-style: flat; animation: none; }
.nx-tarot.is-flat .nx-front { display: none; }
.nx-tarot.is-flat .nx-back { transform: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.nx-back.has-more {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 46px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 46px), transparent 100%);
}
.nx-back { scrollbar-width: thin; scrollbar-color: rgba(138, 95, 224, 0.35) transparent; }
.nx-back .nx-kicker { color: #8a5fe0; }
.nx-back-text { margin: 0; font-family: var(--font-serif); font-size: 14.5px; line-height: 1.5; color: #2a2350; }
.nx-back-date { margin: 0; font-size: 10.5px; color: #7d74a6; }
/* Луна той ночи — плашка под картой: диск фазы (с пепельным светом,
   см. .nx-moon-disc), смысл фазы, вещая ночь золотом. */
.nx-moonnight { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; margin: 0 0 16px; padding: 14px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); }
.nx-moonnight.is-prophetic { border-color: rgba(233, 194, 122, 0.45); background: linear-gradient(160deg, rgba(233, 194, 122, 0.1), var(--card) 60%); }
.nx-moon-disc { width: 52px; height: 52px; display: block; filter: drop-shadow(0 0 12px rgba(214, 205, 245, 0.25)); }
.nx-moon-disc svg { width: 100%; height: 100%; display: block; }
.nx-moonnight-tx .nx-lbl { margin: 0 0 2px; }
.nx-moonnight-tx b { font-family: var(--font-serif); font-weight: 500; font-size: 17px; color: var(--fg); }
.nx-moonnight-tx p:not(.nx-lbl) { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.nx-moonnight-tx .nx-prophetic { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(233, 194, 122, 0.3); color: #f3e7c6; }
.nx-prophetic i { font-style: normal; color: var(--gold); margin-right: 6px; }
.nx-seal {
  position: absolute; top: 25%; right: 9px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; font-size: 6.5px; line-height: 1.1; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: #2a1d05; background: radial-gradient(circle at 36% 30%, #fff3d6, #e9c27a 58%, #b8862b);
  box-shadow: 0 0 0 2px rgba(233, 194, 122, 0.35), 0 0 18px rgba(233, 194, 122, 0.45); transform: rotate(-12deg);
}
.nx-flip-hint { margin: 0 0 16px; text-align: center; font-size: 11.5px; color: var(--muted); }
.nx-flip-hint b { color: var(--gold); font-weight: 700; }

.nx-seg { display: flex; gap: 4px; padding: 3px; margin-bottom: 16px; border-radius: 100px; background: rgba(233, 194, 122, 0.06); border: 1px solid var(--border); }
.nx-seg button {
  flex: 1; border: 0; background: none; cursor: pointer; padding: 9px 4px; border-radius: 100px;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nx-seg button.active { color: var(--gold); background: rgba(233, 194, 122, 0.14); }
.nx-seg-n { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 100px; font-size: 10px; line-height: 17px; background: var(--gold); color: #140f2c; font-variant-numeric: tabular-nums; }
.nx-layer { display: flex; flex-direction: column; gap: 14px; }
.nx-layer p { margin: 0; }

.nx-keys { display: flex; gap: 10px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.nx-keys::-webkit-scrollbar { display: none; }
.nx-key { flex: 0 0 min(250px, 76vw); scroll-snap-align: start; display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); }
.nx-key-top { display: flex; gap: 10px; align-items: center; }
.nx-key-ic { width: 28px; height: 28px; flex: none; color: var(--gold); }
.nx-key-top b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 18px; color: var(--fg); }
/* Школа ключа — лента цвета школы и слово-ракурс: народная примета
   (янтарь), современный сонник (серебро), Фрейд (роза), Юнг (фиалка). */
.nx-key { --sch: #c9c2e6; position: relative; overflow: hidden; }
.nx-key.sch-folk { --sch: #e9b26a; }
.nx-key.sch-modern { --sch: #bcd3f5; }
.nx-key.sch-freud { --sch: #f29bb8; }
.nx-key.sch-jung { --sch: #b8a4ff; }
.nx-key::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sch); opacity: 0.8; }
.nx-key-ribbon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sch); }
.nx-key-ribbon i { font-style: normal; font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-size: 11px; color: var(--muted); }
.nx-key.sch-freud .nx-key-ic, .nx-key.sch-jung .nx-key-ic, .nx-key.sch-folk .nx-key-ic { color: var(--sch); }
.nx-key-src { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.nx-key-meaning { font-size: 13.5px; line-height: 1.5; color: var(--fg); }
.nx-key-turn { font-family: var(--font-serif); font-style: italic; font-size: 14px; line-height: 1.45; color: var(--gold); }
.nx-key-mine { font-size: 11.5px; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--border); }

/* Кольцо линз: три взгляда на дуге, выбранный под стрелкой. */
.nx-lens { position: relative; height: 104px; overflow: hidden; margin: -4px -18px 2px; }
.nx-lens-needle { position: absolute; left: 50%; top: 2px; width: 1px; height: 13px; background: var(--gold); }
.nx-lens-ring { position: absolute; left: 50%; top: 24px; width: 248px; height: 248px; margin-left: -124px; border-radius: 50%; border: 1px dashed rgba(233, 194, 122, 0.4); transition: transform 0.7s var(--ease); }
.nx-lens-ring::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; border: 1px solid rgba(233, 194, 122, 0.16); }
.nx-lens-lab {
  position: absolute; transform: translate(-50%, -50%); transition: transform 0.7s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
  white-space: nowrap; cursor: pointer; font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 100px; color: var(--muted); background: #17123a; border: 1px solid var(--border);
}
.nx-lens-lab.is-on { color: #140f2c; background: linear-gradient(135deg, #f1d69c, #d9a955); border-color: transparent; }
.nx-lens-lock { margin-right: 4px; color: var(--gold); }
.nx-lens-lab.is-on .nx-lens-lock { color: #140f2c; }
.nx-lens-body { display: flex; flex-direction: column; gap: 14px; }
/* Ракурс взгляда: у каждой школы свой цвет (--lens), свой вопрос и три
   слова-линзы. Цвет ведёт вердикт, образы и послание этого взгляда. */
.nx-layer { --lens: var(--gold); }
.nx-layer.is-jung { --lens: #b8a4ff; }
.nx-layer.is-freud { --lens: #f29bb8; }
.nx-lens-frame { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 20px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--lens) 14%, transparent), transparent 70%); border: 1px solid color-mix(in srgb, var(--lens) 30%, transparent); }
.nx-lens-glyph { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--lens);
  background: color-mix(in srgb, var(--lens) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lens) 40%, transparent); }
.nx-lens-glyph svg { width: 22px; height: 22px; }
.nx-lens-frame b { font-family: var(--font-serif); font-weight: 500; font-size: 17px; color: var(--fg); }
.nx-lens-frame p { margin: 3px 0 0 !important; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.nx-lens-words { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.nx-lens-words i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 100px; color: var(--lens); background: color-mix(in srgb, var(--lens) 12%, transparent); }
.nx-school-verdict { margin: 0; padding: 4px 0 4px 14px; border-left: 2px solid var(--lens); font-family: var(--font-serif); font-size: 18px; line-height: 1.38; color: var(--fg); text-wrap: pretty; }
.nx-school-verdict .lbl { display: block; margin-bottom: 4px; font-family: var(--font-ui); font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lens); }
.nx-school-keys { display: grid; gap: 10px; }
.nx-school-keys .nx-lbl { margin: 0; }
.nx-school-key { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.nx-school-key .nx-key-ic { color: var(--lens); }
.nx-school-key b { font-family: var(--font-serif); font-weight: 500; font-size: 15px; color: var(--fg); }
.nx-school-key .dream-key-meaning { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.nx-layer.is-jung .nx-message, .nx-layer.is-freud .nx-message { border-color: color-mix(in srgb, var(--lens) 35%, transparent); }
.nx-layer.is-jung .nx-message .nx-message-q, .nx-layer.is-freud .nx-message .nx-message-q, .nx-layer.is-jung .dream-echo-q, .nx-layer.is-freud .dream-echo-q { color: var(--lens); }
.nx-lens-closed { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 10px 6px; }
.nx-lens-closed p { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.nx-lens-closed .btn.primary { width: auto; padding: 13px 24px; }
.nx-crescent { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset -9px 3px 0 0 var(--gold); }
.nx-message { padding: 16px; border-radius: 20px; text-align: center; background: var(--card); border: 1px solid var(--border); }
.nx-message .lbl { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.nx-message p { margin-top: 5px !important; font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.4; color: var(--fg); text-wrap: balance; }
.nx-message .nx-message-q { font-family: var(--font-ui); font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--gold); }

.nx-no-interp { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 4px 0; }
.nx-no-interp .nx-note { padding: 0 6px; }
.nx-no-interp .btn.primary { width: auto; padding: 14px 28px; }
.dream-final-loading { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--muted); }
.nx-weave-dots { display: inline-flex; gap: 5px; }
.nx-weave-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: nx-dot 1.2s ease-in-out infinite; }
.nx-weave-dots i:nth-child(2) { animation-delay: 0.15s; }
.nx-weave-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes nx-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Содержимое слоёв — общее с откликом в чате (dreams.js: dreamLayerHtml). */
.dream-layer-empty { font-size: 13.5px; line-height: 1.5; color: var(--muted); text-align: center; padding: 8px 6px; }
.dream-key { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.dream-key-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px !important; }
.dream-key-head .img { font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--fg); }
.dream-key-meaning { font-size: 14.5px; line-height: 1.55; color: var(--fg); }
.dream-key-turn { margin-top: 6px !important; font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--gold-ink); }
.dream-verdict {
  padding: 14px 16px; border-radius: 18px; border-left: 2px solid var(--gold); background: var(--card);
  font-family: var(--font-serif); font-size: 17px; line-height: 1.4; color: var(--fg); text-wrap: balance;
}
.dream-verdict .lbl { display: block; margin-bottom: 4px; font-family: var(--font-ui); font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.dream-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dream-chips span { font-size: 11px; font-weight: 700; color: var(--gold); padding: 3px 10px; border-radius: 100px; border: 1px solid rgba(233, 194, 122, 0.32); }
.dream-deep-text { font-size: 14.5px; line-height: 1.6; color: var(--fg); }
.dream-arcana-why { font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--muted); }
.dream-arc { font-size: 13px; line-height: 1.5; color: var(--muted); }
.dream-echo-line { font-family: var(--font-serif); font-size: 17px; font-style: italic; line-height: 1.45; color: var(--fg); }
.dream-echo-q { font-size: 14px; font-weight: 700; color: var(--gold-ink); line-height: 1.4; padding-top: 14px; border-top: 1px solid var(--border); }
.dream-disclaimer { font-size: 12px; line-height: 1.45; color: var(--muted); }

/* Нить: цитата сна → золотой пунктир → цитата на бумаге Летописи. */
.dream-thread { display: flex; flex-direction: column; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.dream-thread-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px !important; }
.dream-thread-head .kind { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.dream-thread-head .dots { font-size: 10px; letter-spacing: 2px; color: var(--gold); }
.dream-thread .q { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 14px; color: var(--fg); }
.dream-thread .q.dream { font-family: var(--font-serif); font-style: italic; font-size: 14.5px; background: var(--card); border: 1px solid var(--border); }
.dream-thread .q.src { background: #fbf4e8; color: #3a2c14; font-family: var(--font-serif); border: 1px solid #eeddbe; }
.dream-thread .q .when { display: block; margin-bottom: 2px; font-family: var(--font-ui); font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #a8661a; }
.dream-thread-line { display: block; width: 0; height: 30px; margin-left: 50%; border-left: 1.6px dashed var(--gold); transform-origin: top; animation: dream-thread-draw 0.6s var(--ease) 0.1s both; }
@keyframes dream-thread-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.dream-thread .note { margin-top: 8px !important; font-size: 13px; font-style: italic; color: var(--muted); }

/* --- Сон принят: звезда падает на небо, нити плетутся, пока идёт разбор --- */
.nx-weave { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.nx-weave-sky { position: relative; width: 100%; height: 190px; margin: 6px -18px 8px; }
.nx-weave-sky svg { width: 100%; height: 100%; overflow: visible; }
.nx-weave-sky .old { fill: #cfc4ff; opacity: 0.5; }
.nx-weave-sky .wl { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.85; }
.nx-weave-sky .wl.is-on { animation: nx-draw 0.8s var(--ease) forwards; }
.nx-fall { transform-box: fill-box; transform-origin: center; animation: nx-fall 1.1s var(--ease) both; }
@keyframes nx-fall {
  0% { opacity: 0; transform: translate(-110px, 120px) scale(0.2); }
  40% { opacity: 1; transform: translate(-44px, 60px) scale(1.6); }
  100% { opacity: 1; transform: none; }
}
.nx-weave-steps { display: grid; gap: 9px; width: 100%; max-width: 300px; margin-top: 10px; text-align: left; }
.nx-weave-step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); opacity: 0.4; transition: opacity 0.4s var(--ease), color 0.4s var(--ease); }
.nx-weave-step i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-style: normal; font-size: 10px; }
.nx-weave-step.is-on { opacity: 1; color: var(--fg); }
.nx-weave-step.is-done i { background: var(--gold); border-color: var(--gold); color: #140f2c; }
.nx-weave-note { margin: 16px 0 0; font-size: 11.5px; color: var(--muted); max-width: 280px; }
.nx-final-star { width: 96px; height: 96px; margin: 0 auto 8px; display: grid; place-items: center; }
.nx-final-star::before { content: ""; width: var(--s, 40px); height: var(--s, 40px); border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #f1d69c 45%, rgba(233, 194, 122, 0) 72%); box-shadow: 0 0 40px 10px rgba(233, 194, 122, 0.35); }
.nx-final-title { margin: 6px 0 4px; font-family: var(--font-serif); font-weight: 500; font-size: 25px; color: var(--fg); }
.nx-final-sub { margin: 0 0 8px; font-size: 13.5px; color: var(--muted); }
.nx-final-inv { margin: 0 0 24px; font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.5; color: var(--fg); max-width: 300px; }
.nx-final-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 320px; }
.nx-final-actions .btn { width: 100%; }
.nx-final-actions .entry-error { text-align: center; margin: 0; }
.nx-quiet { border: 0; background: none; cursor: pointer; padding: 10px 6px; font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--gold-ink); }

/* Звезда над полем записи сна растёт вместе с текстом. */
.nx-cap-star { width: 64px; height: 64px; margin: -4px auto 6px; display: grid; place-items: center; }
.nx-cap-star::before { content: ""; width: var(--s, 10px); height: var(--s, 10px); border-radius: 50%; background: radial-gradient(circle, #fff6dd, #e9c27a 45%, transparent 70%); box-shadow: 0 0 calc(var(--s, 10px) * 1.4) calc(var(--s, 10px) / 3) rgba(233, 194, 122, 0.45); transition: width 0.4s var(--ease), height 0.4s var(--ease), box-shadow 0.4s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .nx-star, .nx-tw, .nx-fall, .nx-tarot.is-in .nx-tarot-inner, .dream-thread-line, .nx-weave-dots i { animation: none !important; }
  .nx-sym.is-on, .nx-weave-sky .wl.is-on, .nx-const-line { animation: none; stroke-dashoffset: 0; }
  .nx-tarot-inner, .nx-lens-ring, .nx-lens-lab { transition: none; }
}

/* --- Новая запись: хаб выбора + композер (кнопка «+») --- */
.entry-choice-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.entry-kind-toggle {
  display: flex; gap: 6px; margin: 4px 0 18px; border-radius: 100px; padding: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.36)),
    color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 6px 18px -10px var(--accent-glow);
}
/* Та же ловушка, что у .tabbar/.tab (см. их комментарий выше):
   display:flex перебивает атрибут hidden без явного !important. */
.entry-kind-toggle[hidden] { display: none !important; }
.entry-kind-toggle button {
  flex: 1; border: none; background: transparent; color: var(--muted);
  font-family: var(--font-ui); font-size: 13px; font-weight: 700; padding: 9px 4px;
  border-radius: 100px; cursor: pointer; transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.entry-kind-toggle button.active { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.entry-textarea {
  width: 100%; min-height: 180px; margin-top: 4px; padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.7);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.55; color: var(--fg);
  resize: vertical; box-shadow: var(--shadow);
}
.entry-textarea:focus { outline: none; border-color: var(--accent); }
/* Круглая «Записать» в углу поля (views.js: mountFieldSend). Появляется,
   пока курсор в поле и есть текст; нижний отступ поля держит последние
   буквы над кнопкой, а не под ней. */
.field-wrap { position: relative; }
.field-wrap .entry-textarea { display: block; padding-bottom: 58px; scroll-padding-bottom: 58px; }
.field-send {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--accent) 45%, #fff) 0, var(--accent) 55%, color-mix(in srgb, var(--accent) 72%, #0b1530) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.35), 0 8px 18px -8px color-mix(in srgb, var(--accent) 75%, transparent);
  opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.field-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.field-wrap.is-sendable .field-send { opacity: 1; transform: none; pointer-events: auto; }
.field-send:active { transform: scale(0.9); }
.field-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:root[data-night="1"] .field-send { color: #140f2c; background: radial-gradient(circle at 34% 28%, #fff3d6, #e9c27a 55%, #b8862b); }
@media (prefers-reduced-motion: reduce) { .field-send { transition: opacity 0.2s; transform: none; } }
/* «Назад» в левом углу поля — зеркало круглой «Записать». Видна, пока
   открыта клавиатура и нижней панели нет (.kb-open): та же монета, что
   «Назад» в панели. */
.field-back {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: color-mix(in srgb, var(--accent) 78%, var(--fg));
  background: radial-gradient(circle at 34% 26%, #fff 0, color-mix(in srgb, var(--accent) 9%, var(--card)) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  opacity: 0; transform: scale(0.6); pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.field-back svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kb-open .field-back { opacity: 1; transform: none; pointer-events: auto; }
.field-back:active { transform: scale(0.9); }
.field-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:root[data-night="1"] .field-back { color: var(--gold); background: rgba(233, 194, 122, 0.12); box-shadow: inset 0 0 0 1px rgba(233, 194, 122, 0.35); }
@media (prefers-reduced-motion: reduce) { .field-back { transition: opacity 0.2s; transform: none; } }
.entry-count { text-align: right; font-size: 12px; color: var(--muted); margin: 6px 2px 18px; }
.entry-count.over { color: var(--destructive); }
.entry-error { color: var(--destructive); font-size: 13.5px; line-height: 1.5; margin: -8px 2px 14px; }

/* --- Эффект сохранения мысли: печать вместо текста --- */
.entry-seal {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 180px; margin-top: 4px; padding: 18px 20px; border-radius: var(--radius);
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.7); box-shadow: var(--shadow);
}
.entry-seal.on { display: flex; }
/* ВК: «перо пишет» вместо радужного шара — разметку собирает quill.js. */
.entry-seal-quill { width: min(280px, 100%); margin: 0 auto; }
.entry-seal-done {
  display: none; position: relative; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(135deg, var(--high), #8fe0b4);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--high) 45%, transparent);
  place-items: center; color: #fff;
  animation: seal-breathe 3.4s var(--ease) infinite;
}
@keyframes seal-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.entry-seal-check { font-size: 22px; font-weight: 700; }
.entry-seal.ready .entry-seal-quill { display: none; }
.entry-seal.ready .entry-seal-done { display: grid; }
.entry-seal-label { color: var(--muted); font-size: 13px; margin: 0; }

/* --- Карточка-результат мысли --- */
.entry-reveal { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 24px; }
.entry-reveal-emblem {
  position: relative; width: 96px; height: 96px; margin-bottom: 16px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ffe9bd, #e9c27a 52%, #b8862b 88%);
  box-shadow: 0 16px 34px rgba(184, 134, 43, 0.38), inset 0 0 0 6px rgba(255, 255, 255, 0.28),
    inset 0 -10px 18px rgba(120, 78, 10, 0.22);
  animation: seal-breathe 5s var(--ease) infinite;
  display: grid; place-items: center; color: #fff; font-size: 30px; font-weight: 700;
}
.entry-reveal-quill { width: 46px; height: 46px; color: #7a5312; }
.entry-reveal-check { display: none; }
:root[data-night="1"] .entry-reveal-emblem {
  background: radial-gradient(circle at 38% 30%, #fff3d6, #e9c27a 55%, #b8862b 90%);
  box-shadow: 0 0 30px 2px rgba(233, 194, 122, 0.45), inset 0 0 0 6px rgba(255, 255, 255, 0.22);
}
.entry-reveal-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); text-transform: uppercase; margin: 0 0 8px; }
.entry-reveal-title { font-family: var(--font-serif); font-size: 23px; font-weight: 500; line-height: 1.28; letter-spacing: -0.3px; margin: 0 0 12px; max-width: 300px; }
.entry-reveal-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); margin-bottom: 16px; }
/* Заголовок не пришёл за отведённое время — вместо выдуманного «Без
   названия» честная строка (newentry.js: titlePending). Сама запись
   уже сохранена, поэтому тон спокойный, без тревоги. */
.entry-reveal-title[hidden] { display: none !important; }
/* Заголовок, догнавший карточку уже открытой (newentry.js:
   topUpRevealTitle): не мигает и не подпрыгивает — проступает. */
.entry-reveal-title.title-landed { animation: title-land 0.6s var(--ease) both; }
@keyframes title-land {
  from { opacity: 0; transform: translateY(4px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.entry-reveal-pending {
  max-width: 300px; margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.entry-reveal-pending[hidden] { display: none !important; }
.entry-reveal-preview { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 310px; margin: 0; }
.entry-reveal-actions { margin-top: 14px; }
.entry-reveal-note { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.4; margin: 12px 6px 0; }

/* =====================================================================
   Раздел «Летопись» — книжный просмотр записей мыслей.
   Свет Observatory (не тёмная тема, в отличие от Сна) + одна собственная
   краска — тёплое золото var(--mid), уже используемое в системе для
   «энергии/стрика» (DESIGN.md), здесь читается как тиснение переплёта.
   ===================================================================== */
.chronicle-eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mid); margin: 0 0 6px; text-align: center;
}
.chronicle-h1 { text-align: center; margin: 0 0 4px; }
.chronicle-sub { font-size: 13.5px; color: var(--muted); text-align: center; margin: 0 0 22px; }
.chronicle-epigraph {
  position: relative; font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.5;
  color: var(--fg); text-align: center; max-width: 300px; margin: 0 auto 24px; padding: 0 22px;
}
.chronicle-epigraph::before, .chronicle-epigraph::after {
  position: absolute; top: -6px; font-size: 26px; font-family: Georgia, serif; color: color-mix(in srgb, var(--mid) 70%, transparent);
}
.chronicle-epigraph::before { content: "\201C"; left: 0; }
.chronicle-epigraph::after { content: "\201D"; right: 0; }

/* «Раскрытая книга»: список томов лежит на едва заметной стопке
   страниц — две тени-грани позади основной панели, без картинок. */
.chronicle-stack { position: relative; margin-bottom: 18px; }
.chronicle-stack::before, .chronicle-stack::after {
  content: ""; position: absolute; left: 5px; right: 5px; border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow); z-index: 0;
}
.chronicle-stack::before { top: 5px; bottom: -5px; opacity: 0.55; transform: scale(0.99); }
.chronicle-stack::after { top: 9px; bottom: -9px; opacity: 0.3; transform: scale(0.978); }
.chronicle-stack-inner {
  position: relative; z-index: 1; background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}

.chronicle-volume-row {
  position: relative; display: flex; align-items: center; gap: 13px; width: 100%; border: none; text-align: left;
  background: none; font-family: var(--font-ui); cursor: pointer; border-radius: 16px; padding: 13px 12px;
  opacity: 0; transform: translateY(8px); animation: chronicle-page-in 0.5s var(--ease) both;
}
.chronicle-volume-row:active { background: color-mix(in srgb, var(--mid) 8%, transparent); }
.chronicle-volume-row + .chronicle-volume-row { border-top: 1px solid var(--border); }
@keyframes chronicle-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chronicle-roman {
  flex: 0 0 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 15px; font-weight: 600; color: var(--mid);
  background: color-mix(in srgb, var(--mid) 14%, #fff);
}
.chronicle-volume-row.current .chronicle-roman {
  color: #fff; background: linear-gradient(135deg, var(--mid), #ffd27a);
  box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--mid) 60%, transparent);
}
.chronicle-volume-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chronicle-volume-title { font-family: var(--font-serif); font-size: 15.5px; font-weight: 500; color: var(--fg); }
.chronicle-volume-sub { font-size: 12px; color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chronicle-volume-count {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--bg); border-radius: 999px; padding: 3px 9px;
}
/* Ленточка-закладка на текущем томе — «здесь ты сейчас пишешь». */
.chronicle-volume-row.current::before {
  content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--mid), #ffd27a);
}

.chronicle-resume {
  display: flex; align-items: center; gap: 12px; width: 100%; border: none; text-align: left; cursor: pointer;
  font-family: var(--font-ui); background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 14px;
}
.chronicle-resume-icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  color: var(--mid); background: color-mix(in srgb, var(--mid) 14%, #fff);
}
.chronicle-resume-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chronicle-resume-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.chronicle-resume-title { font-family: var(--font-serif); font-size: 14px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chronicle-empty { text-align: center; padding: 40px 10px; }
.chronicle-empty-glyph { color: var(--mid); opacity: 0.6; margin-bottom: 14px; }
.chronicle-empty-text { color: var(--muted); font-size: 13.5px; line-height: 1.55; max-width: 260px; margin: 0 auto; }

/* --- Том: шапка + список дней ---
   Стрелки «раньше / позже» переехали в нижнюю панель (views.js:
   setNavPager): за ними больше не нужно прокручивать страницу вверх. */
.chronicle-month-head { text-align: center; min-width: 0; }

.chronicle-day-list { display: flex; flex-direction: column; gap: 10px; }
.chronicle-day-row {
  position: relative; display: flex; align-items: center; gap: 13px; width: 100%; border: none; text-align: left;
  font-family: var(--font-ui); cursor: pointer; padding: 13px 14px 13px 17px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: var(--shadow); transition: transform 0.18s var(--ease);
}
.chronicle-day-row:active { transform: scale(0.985); }
.chronicle-day-row::before {
  content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px;
  background: var(--mood-c, var(--mid));
}
.chronicle-day-badge { flex: 0 0 40px; text-align: center; }
.chronicle-day-badge .num { display: block; font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--fg); line-height: 1; }
.chronicle-day-badge .wk { display: block; font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.chronicle-day-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chronicle-day-body .t {
  font-family: var(--font-serif); font-size: 14.5px; font-weight: 500; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chronicle-day-body .p { font-size: 12px; color: var(--muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chronicle-day-count {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: var(--bg); border-radius: 999px; padding: 3px 8px;
}
.chronicle-stitch {
  flex: 0 0 18px; width: 18px; height: 10px; color: var(--mid);
}
.chronicle-stitch line { stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }

/* --- День: превью записей --- */
.chronicle-tags-line { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: -8px 0 20px; }
.chronicle-tag {
  font-size: 11px; font-weight: 700; color: var(--mid); background: color-mix(in srgb, var(--mid) 14%, transparent);
  border-radius: 999px; padding: 3px 10px;
}
.chronicle-record-row {
  display: flex; align-items: flex-start; gap: 13px; width: 100%; border: none; text-align: left;
  font-family: var(--font-ui); cursor: pointer; padding: 14px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: var(--shadow); margin-bottom: 10px; transition: transform 0.18s var(--ease);
}
.chronicle-record-row:active { transform: scale(0.985); }
.chronicle-record-time {
  flex: 0 0 46px; font-family: var(--font-serif); font-size: 13px; font-weight: 500; color: var(--mid); padding-top: 1px;
}
.chronicle-record-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chronicle-record-title { font-family: var(--font-serif); font-size: 15px; font-weight: 500; color: var(--fg); }
.chronicle-record-preview { font-size: 12.5px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Запись: страница книги ---
   Лист бумаги с корешком слева и торцом стопки справа, лента-закладка,
   колонтитул и колонцифра. Соседние записи листаются из нижней панели:
   страница переворачивается от корешка (жест `turn`, 560 мс). */
.cx-page {
  position: relative; margin: 4px 0 0; padding: 22px 22px 18px 26px;
  border-radius: 4px 18px 18px 4px; color: #2e2413;
  background:
    linear-gradient(90deg, rgba(150, 110, 40, 0.14), rgba(150, 110, 40, 0) 18px),
    radial-gradient(120% 80% at 100% 0%, rgba(255, 244, 220, 0.9), transparent 60%),
    #fffbf3;
  border: 1px solid #efe2c8;
  box-shadow:
    5px 0 0 -2px #f6ecd8, 5px 0 0 -1px #eadcbf,
    9px 0 0 -4px #f6ecd8, 9px 0 0 -3px #eadcbf,
    0 22px 44px -26px rgba(120, 80, 20, 0.45);
  transform-origin: left center;
}
.cx-ribbon {
  position: absolute; top: -6px; right: 28px; width: 16px; height: 68px;
  background: linear-gradient(180deg, #c9721d, #e39a2c);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  filter: drop-shadow(0 3px 3px rgba(120, 70, 10, 0.25));
}
.cx-running {
  display: flex; justify-content: space-between; gap: 10px; margin: 0 38px 18px 0; padding-bottom: 8px;
  border-bottom: 1px solid #efe2c8; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #b08a4a;
}
.cx-folio { margin-top: 22px; text-align: center; font-family: var(--font-serif); font-size: 13px; color: #b08a4a; letter-spacing: 0.1em; }
.cx-folio:empty { display: none; }
.cx-page .chronicle-entry-body { color: #2e2413; }
.cx-page .chronicle-entry-date { color: #9a7a45; }
.cx-page .chronicle-entry-title { color: #2e2413; }
.cx-page .chronicle-thread { margin-top: 22px; }
.cx-page .chronicle-echo { background: none; border: 0; border-top: 1px solid #efe2c8; border-radius: 0; padding: 12px 0 0; color: #8a6a38; }
.cx-page .chronicle-echo::before { content: "* "; font-style: normal; color: #d08a1c; }
.cx-entry.is-turning { animation: none; }
.cx-entry.is-turning .cx-page.turn-next { animation: cx-turn-next 0.56s var(--ease) both; }
.cx-entry.is-turning .cx-page.turn-prev { transform-origin: right center; animation: cx-turn-prev 0.56s var(--ease) both; }
@keyframes cx-turn-next {
  from { opacity: 0.2; transform: perspective(1200px) rotateY(-70deg); }
  to { opacity: 1; transform: none; }
}
@keyframes cx-turn-prev {
  from { opacity: 0.2; transform: perspective(1200px) rotateY(70deg); }
  to { opacity: 1; transform: none; }
}

/* Полка томов над оглавлением (chronicle.js: chronicleShelf). */
.cx-shelf {
  display: flex; align-items: flex-end; justify-content: center; gap: 4px; min-height: 130px; margin: 0 0 18px; padding: 0 12px 10px;
  border-bottom: 6px solid #d9c3a0; border-radius: 0 0 4px 4px; box-shadow: 0 10px 18px -12px rgba(120, 80, 20, 0.6);
}
.cx-spine {
  position: relative; width: 30px; height: var(--h); padding: 0; border: 0; cursor: pointer; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 28%, rgba(255, 255, 255, 0.2) 50%, transparent 72%, rgba(0, 0, 0, 0.18)), var(--c);
  box-shadow: 0 6px 10px -6px rgba(60, 30, 0, 0.6); transition: transform 0.28s var(--ease);
  /* backwards, а не both: конец анимации не должен держать transform —
     иначе выбранный корешок не выдвинется (.is-selected). */
  animation: spine-in 0.5s var(--ease) backwards;
}
.cx-spine:nth-child(2) { animation-delay: 60ms; } .cx-spine:nth-child(3) { animation-delay: 120ms; } .cx-spine:nth-child(n + 4) { animation-delay: 180ms; }
@keyframes spine-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.cx-spine span { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); writing-mode: vertical-rl; font-size: 9px; font-weight: 800; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.9); }
.cx-spine i { position: absolute; left: 0; right: 0; bottom: 6px; font-style: normal; font-family: var(--font-serif); font-size: 10px; color: rgba(255, 255, 255, 0.85); text-align: center; }
.cx-spine.is-blank { opacity: 0.45; }
.cx-spine.is-current::after { content: ""; position: absolute; top: -8px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #e39a2c; box-shadow: 0 0 8px #e39a2c; }
.cx-spine.is-out { transform: translateY(-14px) rotate(-3deg); }
.cx-spine:focus-visible { outline: 2px solid #c9721d; outline-offset: 2px; }
/* Выбранный том (chronicle.js: chronicleSelectVolume): корешок
   выдвигается из полки и наливается жёлтым, под полкой — его титул. */
.cx-spine { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s var(--ease), background 0.3s var(--ease); }
.cx-spine.is-selected {
  /* Цвет корешка задан на самом элементе (--c), поэтому фон целиком. */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 28%, rgba(255, 255, 255, 0.35) 50%, transparent 72%, rgba(0, 0, 0, 0.12)), #F2B632;
  transform: translateY(-12px);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 10px 22px -6px rgba(242, 182, 50, 0.75);
}
.cx-spine.is-selected span, .cx-spine.is-selected i { color: #5a3a06; }
.cx-shelf:has(.is-selected) .cx-spine:not(.is-selected) { filter: saturate(0.6) brightness(1.03); }
.cx-leafhost { transition: opacity 0.2s var(--ease); }
.cx-leafhost.is-waiting { opacity: 0.45; }
.cx-leafpage { display: grid; gap: 14px; transform-origin: left center; }
.cx-leafpage.turn-next { animation: cx-turn-next 0.5s var(--ease) both; }
.cx-leafpage.turn-prev { transform-origin: right center; animation: cx-turn-prev 0.5s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .cx-leafpage.turn-next, .cx-leafpage.turn-prev { animation: none; } .cx-spine.is-selected { transform: none; } }

/* Нить дня (chronicle.js: chronicleDayThread). */
.cx-daythread { margin: 0 0 16px; }
.cx-daythread-k { margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #b08a4a; text-align: center; }
.cx-daythread-row { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.cx-daythread-row::-webkit-scrollbar { display: none; }
.cx-daythread-row::before { content: ""; position: absolute; left: 14px; right: 14px; top: 16px; border-top: 1.5px dashed #e3a14c; }
.cx-dt-node { position: relative; flex: 0 0 auto; width: 118px; display: grid; justify-items: start; gap: 3px; padding: 0 6px 0 0; border: 0; background: none; cursor: pointer; text-align: left; font-family: var(--font-ui); }
.cx-dt-node i { width: 14px; height: 14px; margin: 5px 0 4px 8px; border-radius: 50%; background: #f0a93c; box-shadow: 0 0 0 4px #fbf4e8, 0 0 10px rgba(240, 169, 60, 0.6); }
.cx-dt-node.is-dream i { background: radial-gradient(circle at 40% 35%, #fff3d6, #b892ff 70%); box-shadow: 0 0 0 4px #fbf4e8, 0 0 12px rgba(184, 146, 255, 0.8); }
.cx-dt-node b { font-family: var(--font-serif); font-weight: 500; font-size: 13px; color: #c9721d; }
.cx-dt-node.is-dream b { color: #8a5fe0; }
.cx-dt-node span { font-size: 12px; line-height: 1.3; color: #3a2c14; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* День: листы одной тетради — время на полях за красной линией. */
.cx-leaves { display: flex; flex-direction: column; gap: 12px; }
.cx-leaf {
  position: relative; width: 100%; display: flex; gap: 14px; padding: 16px 16px 18px 0; text-align: left; cursor: pointer;
  border-radius: 4px 14px 14px 4px; border: 1px solid #efe2c8; color: #2e2413; font-family: var(--font-ui);
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(176, 138, 74, 0.12) 25px 26px),
    #fffbf3;
  box-shadow: 4px 0 0 -2px #f6ecd8, 4px 0 0 -1px #eadcbf, 0 14px 30px -22px rgba(120, 80, 20, 0.5);
  transform: rotate(var(--tilt, 0deg)); transition: transform 0.2s var(--ease);
}
.cx-leaf:active { transform: rotate(0deg) scale(0.985); }
.cx-leaf-time { flex: 0 0 58px; padding-right: 10px; text-align: right; border-right: 1.5px solid rgba(227, 154, 44, 0.45); font-family: var(--font-serif); font-size: 13px; color: #c9721d; }
.cx-leaf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-leaf-title { font-family: var(--font-serif); font-size: 16.5px; color: #2e2413; }
.cx-leaf-preview { font-size: 13px; line-height: 1.5; color: #8a6a38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-leaf-no { position: absolute; right: 12px; bottom: 6px; font-family: var(--font-serif); font-size: 11px; color: #c4a574; }
.cx-leaf .chronicle-stitch { position: absolute; top: 12px; right: 12px; }

@media (prefers-reduced-motion: reduce) {
  .emo-drop, .emo-drop-landed, .emo-bloom-halo::before { animation: none !important; }
  .cx-entry.is-turning .cx-page { animation: none !important; }
  .cx-leaf { transform: none; }
}

.chronicle-entry-date { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; margin: 0 0 6px; }
.chronicle-entry-title { font-family: var(--font-serif); font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.3px; text-align: center; margin: 0 0 6px; }
.chronicle-entry-daytitle { text-align: center; font-size: 13px; font-style: italic; color: var(--muted); margin: 0 0 18px; }
.chronicle-entry-divider {
  height: 2px; width: 64px; margin: 0 auto 22px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--mid), transparent);
}
.chronicle-entry-body {
  font-family: var(--font-ui); font-size: 15.5px; line-height: 1.7; color: var(--fg); white-space: pre-wrap;
}
.chronicle-entry-body::first-letter {
  font-family: var(--font-serif); font-size: 44px; font-weight: 600; float: left; line-height: 0.82;
  padding: 6px 6px 0 0; color: var(--mid);
}
.chronicle-entry-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.chronicle-thread { margin-top: 28px; }
.chronicle-thread-hair { display: block; width: 100%; height: 18px; }
.chronicle-thread-hair line {
  stroke: var(--mid); stroke-width: 1.15; stroke-linecap: round; fill: none;
  stroke-dasharray: 240; stroke-dashoffset: 240;
  animation: chronicle-thread-draw 0.42s var(--ease) 0.18s forwards;
}
.chronicle-thread-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 2px 0 14px; opacity: 0;
  animation: chronicle-thread-rise 0.4s var(--ease) 0.42s forwards;
}
.chronicle-thread-theme { font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--fg); }
.chronicle-thread-status {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap;
}
.chronicle-thread-notes {
  display: flex; flex-direction: column; gap: 14px; opacity: 0;
  animation: chronicle-thread-rise 0.45s var(--ease) 0.7s forwards;
}
.chronicle-thread-more {
  margin-top: 16px; border: 0; background: none; padding: 0; cursor: pointer;
  font: 700 12.5px var(--font-ui); color: color-mix(in srgb, var(--mid) 55%, var(--fg)); letter-spacing: 0.04em;
  opacity: 0; animation: chronicle-thread-rise 0.45s var(--ease) 0.7s forwards;
}
.chronicle-reply {
  position: relative; padding-left: 14px;
  border-left: 1.5px solid color-mix(in srgb, var(--mid) 40%, transparent);
}
.chronicle-reply-time { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.chronicle-reply-text { font-size: 14px; line-height: 1.55; color: var(--fg); white-space: pre-wrap; margin: 0; }
@keyframes chronicle-thread-draw { to { stroke-dashoffset: 0; } }
@keyframes chronicle-thread-rise { to { opacity: 1; } }
.chronicle-echo {
  margin-top: 24px; padding: 14px 16px; border-radius: 16px; font-size: 13px; line-height: 1.5; font-style: italic;
  color: var(--muted); background: color-mix(in srgb, var(--energy) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--energy) 16%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .chronicle-volume-row { animation-duration: 0.001s; opacity: 1; transform: none; }
  .chronicle-thread-hair line { stroke-dashoffset: 0; animation: none; }
  .chronicle-thread-head,
  .chronicle-thread-notes,
  .chronicle-thread-more { opacity: 1; animation: none; }
}


/* ===== Раздел «Достижения» (achievements.js) =====
   Полноэкранный список вместо шторки: свайп вниз в Telegram закрывает
   всё приложение, поэтому bottom sheet тут не используется. */
.ach-screen { padding-bottom: 96px; }
.ach-body { display: flex; flex-direction: column; gap: 20px; }

.ach-summary {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.75); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-lg);
}
.ach-summary-top { display: flex; align-items: center; gap: 16px; }
.ach-count { display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto; }
.ach-count b { font-family: var(--font-serif); font-size: 34px; font-weight: 500; color: var(--accent); line-height: 1; }
.ach-count span { font-size: 12.5px; color: var(--muted); }
.ach-summary-meta { flex: 1; min-width: 0; }
.ach-summary-title { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 8px; }
.ach-streak {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.ach-streak-flame { font-size: 17px; }
.ach-streak-text { font-size: 13px; color: var(--muted); }
.ach-streak-text b { color: var(--fg); }

.ach-progress {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 12%, rgba(255, 255, 255, 0.6));
}
.ach-progress-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.6s var(--ease);
}
.ach-progress-num { font-size: 11.5px; color: var(--muted); margin-top: 5px; }

.ach-section { opacity: 0; transform: translateY(10px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.ach-section.in { opacity: 1; transform: none; }
.ach-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 0 4px 10px;
}
.ach-section-title { font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--fg); }
.ach-section-count { font-size: 12px; font-weight: 700; color: var(--accent); }
/* ===== Полка значков =====
   Медаль вместо строки списка: дуга прогресса → диск в цвете раздела →
   гравюра-глиф из спрайта в index.html. Цвет секции приходит из
   achievements.js как --sa (те же аккорды, что у setSection в app.js). */
.ach-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 4px; }
@media (min-width: 400px) { .ach-grid { grid-template-columns: repeat(4, 1fr); } }

.ach-badge {
  -webkit-appearance: none; appearance: none; background: none; border: 0;
  padding: 6px 2px 0; font-family: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform 0.25s var(--ease);
}
.ach-badge:active { transform: scale(0.93); }
.ach-badge.is-locked { opacity: 0.72; }
.ach-medal { position: relative; width: 74px; height: 74px; }
.ach-medal svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
/* дыхание свечения — только у открытых */
.ach-badge.is-earned .ach-medal::before {
  content: ""; position: absolute; inset: -12%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sa) 42%, transparent), transparent 68%);
  filter: blur(7px); animation: ach-breathe 5.2s var(--ease) infinite;
}
@keyframes ach-breathe {
  0%, 100% { opacity: 0.5; transform: scale(0.97); }
  50% { opacity: 0.95; transform: scale(1.04); }
}
/* редкий блик по металлу */
.ach-gloss { transform-origin: 32px 32px; animation: ach-sweep 7s linear infinite; }
@keyframes ach-sweep {
  0%, 72% { opacity: 0; transform: translateX(-26px); }
  80% { opacity: 0.85; }
  100% { opacity: 0; transform: translateX(26px); }
}
.ach-ring-live { animation: ach-pulse-ring 2.8s var(--ease) infinite; }
@keyframes ach-pulse-ring { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }

.ach-cap {
  max-width: 96px; font-size: 11.5px; line-height: 1.28; font-weight: 600;
  color: var(--fg); text-align: center;
}
.ach-badge.is-locked .ach-cap { color: var(--muted); font-weight: 500; }
.ach-cap small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.ach-badge.is-progress .ach-cap small { color: var(--sa); }

/* ===== Раскрытие значка ===== */
/* Окно значка переносится в <body> (achievements.js: achPortal): внутри
   .screen у него был бы предок с transform, и position: fixed считался
   бы от длинной страницы, а не от экрана — окно открывалось где-то
   внизу, и его приходилось искать прокруткой. */
.ach-open { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 0 18px; }
.ach-open[hidden] { display: none; }
/* Пока окно открыто, фон под ним не едет. */
html.ach-locked, html.ach-locked body { overflow: hidden; }
.ach-open-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(58% 44% at var(--ox, 50%) var(--oy, 50%),
    color-mix(in srgb, var(--sa) 26%, transparent), rgba(20, 16, 26, 0.52) 62%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.ach-open.open .ach-open-scrim { opacity: 1; }
.ach-open-card {
  position: relative; width: 100%; max-width: 360px; padding: 0 24px 26px;
  background: var(--card); border-radius: 28px; box-shadow: var(--shadow-lg);
  text-align: center; overflow: hidden;
  transform-origin: 50% 50%;
}
.ach-open.open .ach-open-card { animation: ach-unfold 0.52s var(--ease) both; }
@keyframes ach-unfold {
  0% { opacity: 0; transform: scale(0.42) translateY(18px); filter: blur(8px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
/* свет из-за медали */
.ach-open-card::before {
  content: ""; position: absolute; left: 50%; top: -120px; width: 320px; height: 320px;
  translate: -50% 0; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--sa) 34%, transparent), transparent 66%);
}
.ach-open-close {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.ach-hero { position: relative; z-index: 2; display: flex; justify-content: center; padding: 34px 0 6px; }
.ach-hero .ach-medal { width: 132px; height: 132px; }
.ach-hero .ach-medal svg { z-index: 2; }
/* два кольца расходятся из-под медали */
.ach-hero .ach-medal::before,
.ach-hero .ach-medal::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 50%; opacity: 0;
  border: 1px solid color-mix(in srgb, var(--sa) 55%, transparent);
  background: none; filter: none; animation: none;
}
.ach-open.open .ach-hero .ach-medal::before { animation: ach-ripple 1.5s var(--ease) 0.18s both; }
.ach-open.open .ach-hero .ach-medal::after { animation: ach-ripple 1.5s var(--ease) 0.42s both; }
@keyframes ach-ripple {
  0% { opacity: 0.75; transform: scale(0.82); }
  100% { opacity: 0; transform: scale(1.85); }
}
.ach-rays {
  position: absolute; inset: -40%; z-index: 0; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 6deg,
    color-mix(in srgb, var(--sa) 26%, transparent) 7deg 9deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 34%, #000 42%, transparent 74%);
  mask: radial-gradient(circle, transparent 34%, #000 42%, transparent 74%);
}
.ach-open.open .ach-rays { animation: ach-turn 26s linear infinite, ach-fade-in 0.9s var(--ease) 0.3s both; }
@keyframes ach-turn { to { rotate: 360deg; } }
@keyframes ach-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ach-open-title {
  position: relative; z-index: 2; margin: 14px 0 0;
  font-family: var(--font-serif); font-size: 23px; font-weight: 500; line-height: 1.22; color: var(--fg);
}
.ach-open-sub { display: block; margin-top: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ach-open-rule { width: 44px; height: 1px; margin: 13px auto; background: linear-gradient(90deg, transparent, var(--sa), transparent); }
.ach-open-desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg); }
.ach-open-whisper { margin: 11px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); font-style: italic; }
.ach-open-date { margin-top: 16px; font-size: 12.5px; font-weight: 600; color: var(--sa); }
.ach-open-track { margin-top: 16px; }
.ach-open-track .ach-progress-fill { background: linear-gradient(90deg, var(--sa), color-mix(in srgb, var(--sa) 40%, #fff)); }
.ach-open-hint { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ach-open-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
/* текст поднимается лесенкой */
.ach-open.open .ach-stg { animation: ach-rise 0.5s var(--ease) both; }
/* нумерация от детей карточки: 1 — «✕», 2 — медаль, дальше текст */
.ach-open.open .ach-stg:nth-child(3) { animation-delay: 0.26s; }
.ach-open.open .ach-stg:nth-child(4) { animation-delay: 0.32s; }
.ach-open.open .ach-stg:nth-child(5) { animation-delay: 0.38s; }
.ach-open.open .ach-stg:nth-child(6) { animation-delay: 0.44s; }
.ach-open.open .ach-stg:nth-child(7) { animation-delay: 0.5s; }
.ach-open.open .ach-stg:nth-child(8) { animation-delay: 0.56s; }
@keyframes ach-rise {
  from { opacity: 0; transform: translateY(9px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

.ach-empty { text-align: center; padding: 28px 10px; }
.ach-empty-text { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 16px; }
.ach-empty .btn.primary { width: auto; padding: 13px 26px; }

@media (prefers-reduced-motion: reduce) {
  .ach-section { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ach-badge.is-earned .ach-medal::before, .ach-gloss, .ach-ring-live,
  .ach-hero .ach-medal::before, .ach-hero .ach-medal::after, .ach-rays,
  .ach-open.open .ach-open-card, .ach-open.open .ach-stg {
    animation: none !important; opacity: 1; transform: none; filter: none;
  }
  .ach-hero .ach-medal::before, .ach-hero .ach-medal::after { opacity: 0; }
}

/* ===== Раздел «Поддержка» (support.js) =====
   Свой бирюзовый аккорд (app.js: SECTIONS.support) — раздел читается как
   отдельная комната, а не как продолжение подписки. */
.support-screen { padding-bottom: 96px; }
.support-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); margin: 4px 0 10px;
}
.support-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.support-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--fg);
  padding: 9px 14px; border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.36)),
    color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.8));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 6px 18px -10px var(--accent-glow);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.support-chip:active { transform: scale(0.96); }
.support-chip.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px -8px var(--accent-glow);
}
.support-chip-emoji { font-size: 14px; }
.support-textarea { min-height: 150px; }
.support-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 14px 0 0; }

.support-done { text-align: center; padding: 26px 8px; opacity: 0; transition: opacity 0.5s var(--ease); }
.support-done.in { opacity: 1; }
.support-done[hidden] { display: none !important; }
.support-done-mark {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 27px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 30px -10px var(--accent-glow);
}
.support-done-num { font-size: 12.5px; font-weight: 700; color: var(--accent); margin: 0 0 8px; }
.support-done-text { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 22px; }
.support-done .btn.ghost { width: auto; padding: 13px 26px; }

/* ===== «Что это значит?» — разбор записи (newentry.js: mountThoughtInsight)
   Живёт и на экране после сохранения мысли, и на странице записи в
   Летописи. Тот же отчёт, что в чате, просто разложен по карточке. ===== */
.insight-block { margin: 22px 0 4px; }
.insight-cta { width: auto; padding: 13px 24px; margin: 0 auto; display: block; }
.insight-loading { padding: 6px 2px; display: flex; flex-direction: column; gap: 11px; }
.insight-loading[hidden] { display: none !important; }
.insight-loading-text { margin: 0 0 2px; font-size: 13px; color: var(--muted); text-align: center; }

.insight-card {
  padding: 20px; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, rgba(255, 255, 255, 0.75));
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.insight-card.in { opacity: 1; transform: none; }
.insight-card[hidden] { display: none !important; }
.insight-key {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; padding: 4px 11px; margin-bottom: 12px;
}
.insight-key[hidden] { display: none !important; }
.insight-analysis {
  margin: 0; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.6; color: var(--fg);
}
.insight-context {
  margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); font-style: italic;
}
.insight-context[hidden] { display: none !important; }
.insight-foot { margin: 16px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; text-align: right; font-style: italic; font-family: var(--font-serif); }
/* «Продолжить» нить: сначала честное объяснение, потом переход в чат. */
.chronicle-thread-go { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--card)); border: 1px dashed color-mix(in srgb, var(--accent) 35%, transparent); }
.chronicle-thread-go[hidden] { display: none; }
.chronicle-thread-go p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--fg); }
.chronicle-thread-go-row { display: flex; gap: 8px; }
.chronicle-thread-go-row .btn { flex: 1; margin: 0; padding: 11px 10px; font-size: 13.5px; }

.entry-reveal-insight { margin-top: 4px; }
.chronicle-entry-insight { margin-top: 26px; }

@media (prefers-reduced-motion: reduce) {
  .insight-card { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tab-fab-ring { animation: none; opacity: 0; }
  .tab-fab.is-dip .tab-fab-quill, .tab-fab.is-dip .tab-fab-splash { animation: none; }
  .dreams-moon.glow { animation: none; }
  /* Форма остаётся, движение — нет. */
  .home-cta::after { animation: none; background-position: 40% 0; }
}

/* ============================================================
   Обложка дня (today.js) — Луна, мысль дня, погода недели.
   Небо во всю ширину: .app держит боковые 18px, поэтому полотно
   выходит из них отрицательными полями, а не своей раскладкой.
   --sky-top/--sky-bottom и --moon-glow ставит JS: тон неба идёт от
   валентности недели, свечение — от цвета самой Луны.
   ============================================================ */
.today { --sky-top: #dfe8fb; --sky-bottom: #eef4ff; --moon-glow: #f7c46a; }

/* Небо — колонка, а не холст с абсолютными координатами: цитата дня
   бывает и в одну строку, и в четыре, и подпись под Луной не должна
   зависеть от того, сколько их сегодня. */
.today-sky {
  position: relative; margin: -20px -18px 0; padding: 20px 18px 28px; min-height: 356px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 74%, var(--bg) 100%);
  transition: background 0.6s var(--ease);
  /* Небо не кончается линией: низ растворяется в бумаге (под ней живут
     пятна .aurora, и плоский --bg читался прямоугольником), а на широком
     окне (Telegram Desktop) так же уходят в воздух и бока. */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 96px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 96px), transparent 100%);
  padding-bottom: 64px; margin-bottom: -40px;
}
@media (min-width: 540px) {
  .today-sky {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 96px), transparent 100%), linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 96px), transparent 100%), linear-gradient(90deg, transparent 0, #000 120px, #000 calc(100% - 120px), transparent 100%);
    mask-composite: intersect;
  }
}
.today-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.today-top {
  position: relative; z-index: 1; width: 100%;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.today-date {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 55%, transparent);
}
.today-hi { font-family: var(--font-serif); font-size: 16px; font-weight: 500; letter-spacing: -0.1px; color: color-mix(in srgb, var(--fg) 88%, transparent); }
/* Сумерки и ночь темнят небо — тёмный привет на нём тонул. Ночью привет
   и дата — тёплый лунный крем с мягкой тенью: видно, но не режет. */
.today-sky[data-tod="dusk"] .today-hi, .today-sky[data-tod="night"] .today-hi {
  color: #FFF1DA; text-shadow: 0 1px 14px rgba(24, 22, 60, 0.45);
}
.today-sky[data-tod="dusk"] .today-date, .today-sky[data-tod="night"] .today-date {
  color: color-mix(in srgb, #FFF1DA 82%, transparent); text-shadow: 0 1px 10px rgba(24, 22, 60, 0.35);
}

.today-moon-wrap {
  position: relative; z-index: 1; margin: 28px auto 0; width: 120px; height: 120px;
  animation: moon-rise 1.1s var(--ease) both;
}
/* Луна дышит, а не висит: медленный подъём-спуск на 3px, 11 секунд на
   цикл. Движется обёртка, а не сам SVG, — рисунок не пересчитывается. */
.today-moon {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 14px 30px color-mix(in srgb, var(--moon-glow) 45%, transparent));
  animation: moon-float 11s ease-in-out infinite;
}
.today-moon svg { display: block; width: 100%; height: 100%; }
@keyframes moon-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes moon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
/* Гало всегда в тон диску: янтарная Луна греет янтарным, серебряная — серебром.
   Свет не мигает, а еле заметно разгорается и стихает — 9 секунд на вдох. */
.today-halo {
  position: absolute; inset: -38px; border-radius: 50%; pointer-events: none;
  /* Именно градиент, а не box-shadow: у растяжки тени жёсткая граница —
     вокруг диска появлялось кольцо, а нужен свет, уходящий в никуда. */
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--moon-glow) 30%, transparent) 30%,
    color-mix(in srgb, var(--moon-glow) 14%, transparent) 48%,
    transparent 70%
  );
  filter: blur(5px);
  transition: background 0.5s var(--ease);
  animation: moon-breathe 9s ease-in-out infinite;
}
@keyframes moon-breathe {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.045); }
}
/* Новолуние: диска почти не видно, и его держит серебро — узкое
   холодное кольцо у самого края (в SVG — data-moon-newring, здесь —
   свет вокруг него). Тон гало переключает JS через --moon-glow. */
.is-new-moon .today-halo {
  background: radial-gradient(
    circle,
    transparent 0 34%,
    rgba(255, 255, 255, 0.5) 40%,
    color-mix(in srgb, var(--moon-glow) 34%, transparent) 46%,
    color-mix(in srgb, var(--moon-glow) 12%, transparent) 60%,
    transparent 74%
  );
  filter: blur(3px);
}
.is-new-moon .today-moon {
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.55))
    drop-shadow(0 12px 26px color-mix(in srgb, var(--moon-glow) 40%, transparent));
}
/* Звёзды подмигивают вразнобой: одна анимация, разный сдвиг фазы. */
.today-stars circle { animation: star-twinkle 5.5s ease-in-out infinite; transform-origin: center; }
.today-stars circle:nth-child(2n) { animation-delay: -1.4s; animation-duration: 7s; }
.today-stars circle:nth-child(3n) { animation-delay: -2.9s; animation-duration: 6.2s; }
.today-stars circle:nth-child(5n) { animation-delay: -4.1s; }
@keyframes star-twinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.28; }
}

.today-caption { position: relative; z-index: 1; margin-top: 22px; text-align: center; }
.today-phase { font-family: var(--font-serif); font-size: 21px; letter-spacing: -0.2px; }
.today-arrow { font-size: 12px; font-style: normal; margin-left: 7px; color: var(--moon-glow); vertical-align: 2px; }
.today-focus { margin-top: 5px; font-size: 12.5px; color: color-mix(in srgb, var(--fg) 62%, transparent); }

/* Цитата растёт вверх от нижней кромки неба: эпиграф вечера бывает
   длиннее строки каталога, и при верхней привязке он упирался бы в
   подпись под Луной. */
.today-quote { position: relative; z-index: 1; margin: 22px 6px 0; text-align: center; }
.today-quote-kick {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 45%, transparent);
}
.today-quote-text {
  margin: 9px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.38;
  color: color-mix(in srgb, var(--fg) 92%, transparent);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.today-leaf .today-quote-text, .today-quote-card .today-quote-text { -webkit-line-clamp: 6; }
.today-quote-src { display: block; margin-top: 9px; font-size: 11.5px; color: color-mix(in srgb, var(--fg) 50%, transparent); }

.today-body { padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }

.today-week { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow); }
.today-week-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.today-week-label { font-size: 12.5px; font-weight: 700; }
.today-week-mood { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.today-week-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mood, var(--accent)); }
/* Что показывать в неделе: мысли, сны, эмоции (today.js: WEEK_KINDS).
   Снятый переключатель не гаснет в ничто — он остаётся читаемым, просто
   без заливки: это выбор, а не запрет. */
.today-week-pick { display: flex; gap: 6px; margin-bottom: 12px; }
.today-week-chip {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 100px;
  padding: 6px 4px; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; color: var(--muted);
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.today-week-chip:active { transform: scale(0.96); }
.today-week-chip.on {
  color: color-mix(in srgb, var(--mood, var(--accent)) 78%, #24313f);
  background: color-mix(in srgb, var(--mood, var(--accent)) 13%, transparent);
  border-color: color-mix(in srgb, var(--mood, var(--accent)) 28%, transparent);
}
.today-week-bars { display: flex; align-items: flex-end; gap: 7px; height: 46px; }
.today-week-bars i {
  flex: 1; border-radius: 6px; opacity: 0.9; min-height: 3px;
  background: linear-gradient(180deg, var(--mood, var(--accent)), color-mix(in srgb, var(--mood, var(--accent)) 35%, #fff));
  transform-origin: bottom; animation: week-bar-in 0.5s var(--ease) both;
}
.today-week-bars i:nth-child(2) { animation-delay: 40ms; }
.today-week-bars i:nth-child(3) { animation-delay: 80ms; }
.today-week-bars i:nth-child(4) { animation-delay: 120ms; }
.today-week-bars i:nth-child(5) { animation-delay: 160ms; }
.today-week-bars i:nth-child(6) { animation-delay: 200ms; }
.today-week-bars i:nth-child(7) { animation-delay: 240ms; }
@keyframes week-bar-in { from { transform: scaleY(0.15); opacity: 0; } to { transform: scaleY(1); opacity: 0.9; } }
/* Пустой день — засечка на линии недели, а не пробел: ряд не рвётся. */
.today-week-bars i.is-empty { background: var(--border); opacity: 1; }
.today-week-days { display: flex; gap: 7px; margin-top: 7px; }
.today-week-days span { flex: 1; text-align: center; font-size: 10px; color: var(--muted); }
.today-week-count { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }
.today-week-empty { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.today-door {
  position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow); text-align: left; font-family: var(--font-ui); cursor: pointer; color: var(--fg);
}
.today-door:active { transform: scale(0.99); }
.today-door-emblem { width: 46px; height: 46px; flex: 0 0 46px; }
.today-door-emblem svg { display: block; width: 100%; height: 100%; }
.today-door-meta { flex: 1; min-width: 0; }
.today-door-title { display: block; font-size: 15px; font-weight: 700; }
.today-door-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.today-door-chev { margin-left: auto; color: var(--muted); flex: none; }
/* Один блик на экран — только у двери; повтор обесценил бы жест. */
.today-door::after {
  content: ""; position: absolute; top: -40%; left: -30%; width: 38px; height: 180%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: today-sheen 7s var(--ease) infinite;
}
@keyframes today-sheen { 0%, 72% { left: -30%; } 92%, 100% { left: 130%; } }

/* --- Обложка «Титульный лист» --- */
.today-leaf-screen .today-quote, .today-dial-screen .today-quote { position: static; left: auto; right: auto; top: auto; }
.today-leaf {
  position: relative; margin-top: 6px; padding: 32px 24px 24px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #fffdf9 0%, #fdf8f0 55%, #f7f1e6 100%);
  border: 1px solid #e6dccb; box-shadow: 0 22px 48px rgba(60, 48, 30, 0.14);
}
.today-leaf::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(120, 98, 62, 0.24); border-radius: 12px; pointer-events: none; }
.today-leaf::after { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(120, 98, 62, 0.12); border-radius: 9px; pointer-events: none; }
.today-leaf-top { text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #8a7550; }
.today-leaf-hi { margin-top: 8px; text-align: center; font-family: var(--font-serif); font-size: 14px; color: #a9906a; }
.today-leaf .today-quote-text { color: #3a2f21; font-size: 22px; }
.today-leaf .today-quote-kick, .today-leaf .today-quote-src { color: #a08a63; }
.today-leaf .today-quote { margin-top: 18px; }
.today-leaf-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(120, 98, 62, 0.2); display: flex; align-items: center; gap: 14px; }
.today-leaf-seal {
  width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; padding: 8px;
  background: radial-gradient(70% 70% at 35% 30%, #fff8ec, #efe0c6);
  box-shadow: inset 0 0 0 1px rgba(120, 98, 62, 0.3), 0 6px 14px rgba(90, 70, 40, 0.16);
}
/* В печати титульного листа диск неподвижен: печать не парит. */
.today-leaf-seal .today-moon { width: 42px; height: 42px; animation: none; }
.today-leaf-meta { flex: 1; min-width: 0; }
.today-leaf-meta b { display: block; font-family: var(--font-serif); font-size: 15.5px; font-weight: 500; color: #3a2f21; }
.today-leaf-meta > span { display: block; margin-top: 3px; font-size: 12px; color: #9c8560; line-height: 1.45; }

/* --- Обложка «Циферблат» ---
   Раньше это было толстое кольцо в 16px с двумя по-разному крашеными
   четвертями — оно читалось как застрявший спиннер загрузки. Теперь
   круг собран как настоящий циферблат: гравированная пластина, тонкие
   деления по часам, волосяная дуга прошедшего дня и Луна в центре
   вместо стрелок. Все слои лежат друг на друге в одном grid-центре. */
.today-dial {
  position: relative; width: 244px; height: 244px; margin: 18px auto 0;
  display: grid; place-items: center;
  animation: dial-in 0.9s var(--ease) both;
}
@keyframes dial-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.today-dial > * { grid-area: 1 / 1; }
/* Пластина: перламутровая бумага с гравированной кромкой. Два внутренних
   света и одна внешняя тень — этого хватает, чтобы круг «утоплен» в
   небо, а не наклеен на него. */
.today-dial-plate {
  width: 100%; height: 100%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(78% 78% at 34% 26%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.34) 58%, transparent 76%),
    radial-gradient(120% 120% at 50% 100%, color-mix(in srgb, var(--mood, var(--accent)) 14%, transparent), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 -14px 30px -18px color-mix(in srgb, var(--mood, var(--accent)) 55%, transparent),
    0 20px 44px -22px rgba(36, 26, 78, 0.4);
}
/* Деления: 60 минутных штрихов по кругу и 12 часовых поверх них —
   часовые не длиннее, а плотнее (кольцо у всех одно), и этого хватает,
   чтобы круг читался как циферблат, а не как пунктир.
   repeating-conic-gradient плюс кольцевая маска: ни одного лишнего узла
   в DOM, и рисунок остаётся резким на любом экране. */
.today-dial-ticks {
  width: 100%; height: 100%; border-radius: 50%; pointer-events: none;
  background:
    repeating-conic-gradient(
      from -0.7deg,
      color-mix(in srgb, var(--fg) 62%, transparent) 0deg 1.4deg,
      transparent 1.4deg 30deg
    ),
    repeating-conic-gradient(
      from -0.25deg,
      color-mix(in srgb, var(--fg) 30%, transparent) 0deg 0.5deg,
      transparent 0.5deg 6deg
    );
  /* Деления идут кольцом внутри дуги дня, а не поверх неё. */
  -webkit-mask: radial-gradient(circle, transparent 0 39.5%, #000 39.5% 43%, transparent 43%);
  mask: radial-gradient(circle, transparent 0 39.5%, #000 39.5% 43%, transparent 43%);
  opacity: 0.5;
}
/* Дуга прошедшего дня — волос, а не обод: она сообщает, но не кричит. */
.today-dial-arc { width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.today-dial-track {
  fill: none; stroke: color-mix(in srgb, var(--fg) 11%, transparent); stroke-width: 0.7;
}
.today-dial-run {
  fill: none; stroke: var(--mood, var(--accent)); stroke-width: 1.5; stroke-linecap: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--mood, var(--accent)) 45%, transparent));
  transition: stroke-dashoffset 1.2s var(--ease);
}
.today-dial .today-moon { width: 104px; height: 104px; }
.today-dial .today-halo { position: absolute; inset: 62px; }
/* Время — гравировка на пластине, под Луной: мелко, разрядкой, в тон. */
.today-dial-clock {
  align-self: end; margin-bottom: 34px;
  font-family: var(--font-serif); font-size: 13px; letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--fg) 46%, transparent);
}
.today-top-flat { position: static; margin-top: 18px; justify-content: center; gap: 8px; flex-wrap: wrap; }
.today-dial-screen .today-caption { position: static; margin-top: 10px; }
.today-quote-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); text-align: left;
}
.today-quote-card .today-quote-text { font-size: 17.5px; }

@media (prefers-reduced-motion: reduce) {
  .today-door::after { display: none; }
  .today-moon, .today-halo, .today-stars circle { animation: none; }
  .today-moon-wrap { animation-duration: 0.001s; }
}

/* ============================================================
   Настройки (settings.js)
   ============================================================ */
.home-tile-icon.sec-settings,
.home-row-icon.sec-settings { color: #6b7890; background: rgba(122, 134, 153, 0.16); }

.set-head { margin-bottom: 4px; }
.set-head h1 { margin: 0; font-family: var(--font-serif); font-size: 28px; font-weight: 500; letter-spacing: -0.5px; }
.set-head p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.set-group { margin-top: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.set-group-title { padding: 15px 16px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.set-covers { display: flex; gap: 10px; padding: 8px 16px 16px; overflow-x: auto; scrollbar-width: none; }
.set-covers::-webkit-scrollbar { display: none; }
.set-cover {
  flex: none; width: 104px; border: none; background: transparent; padding: 0;
  font-family: var(--font-ui); text-align: center; cursor: pointer; color: var(--muted);
}
.set-cover-name { display: block; margin-top: 8px; font-size: 11.5px; font-weight: 700; }
.set-cover-hint { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.35; color: var(--muted); }
.set-cover.is-on { color: var(--fg); }
.set-th {
  position: relative; display: block; height: 132px; border-radius: 14px; overflow: hidden;
  border: 2px solid var(--border); background: var(--bg);
}
.set-cover.is-on .set-th { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.set-th-sky { background: linear-gradient(180deg, #dfe8fb, #eef4ff); }
.set-th-moon {
  position: absolute; left: 50%; top: 24px; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(70% 70% at 35% 30%, #fff6e4, #f7c46a 60%, #e08a2c);
  box-shadow: 0 0 0 6px rgba(247, 196, 106, 0.18);
}
.set-th-l1, .set-th-l2 { position: absolute; left: 16px; right: 16px; height: 5px; border-radius: 3px; background: rgba(43, 58, 82, 0.2); }
.set-th-l1 { bottom: 34px; }
.set-th-l2 { bottom: 22px; left: 30px; right: 30px; }
.set-th-leaf { background: linear-gradient(160deg, #fffdf9, #f7f1e6); display: grid; place-items: center; }
.set-th-leaf::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(120, 98, 62, 0.28); border-radius: 8px; }
.set-th-leaf span { font-family: var(--font-serif); font-size: 11px; letter-spacing: 0.1em; color: #8a7550; }
.set-th-dial { display: grid; place-items: center; }
.set-th-dial i { width: 56px; height: 56px; border-radius: 50%; border: 8px solid var(--accent); opacity: 0.75; }
.set-th-menu { padding: 14px 12px; display: flex; flex-direction: column; gap: 7px; }
.set-th-menu i { display: block; height: 18px; border-radius: 6px; background: #fff; border: 1px solid var(--border); }

.set-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px;
  border-top: 1px solid var(--border); background: transparent; text-align: left; font-family: var(--font-ui);
}
.set-group .set-group-title + .set-row { border-top: none; }
.set-row-btn { border-left: none; border-right: none; border-bottom: none; cursor: pointer; color: var(--fg); }
.set-row-btn:active { background: var(--accent-soft); }
.set-row-meta { flex: 1; min-width: 0; }
.set-row-meta b { display: block; font-size: 13.5px; font-weight: 700; }
.set-row-meta span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.set-row-chev { flex: none; }

.set-seg { display: inline-flex; gap: 3px; flex: none; background: var(--bg); border: 1px solid var(--border); border-radius: 100px; padding: 3px; }
.set-seg button {
  border: none; background: transparent; color: var(--muted); font-family: var(--font-ui);
  font-size: 11.5px; font-weight: 700; padding: 7px 11px; border-radius: 100px; cursor: pointer;
}
.set-seg button.is-on { background: var(--accent-soft); color: var(--fg); }
.set-switch {
  flex: none; width: 44px; height: 26px; border-radius: 100px; border: none; padding: 0; position: relative;
  background: var(--border); cursor: pointer; transition: background 0.25s var(--ease);
}
.set-switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(31, 45, 61, 0.22); transition: left 0.25s var(--ease); }
.set-switch.is-on { background: var(--accent); }
.set-switch.is-on i { left: 21px; }

/* ============================================================
   Летопись как книга: оглавление из мини-титулов, титул главы,
   страница главы (chronicle.js)
   ============================================================ */
/* Полка глав: подложка-панель снимается — каждая глава сама себе лист. */
.chronicle-stack-inner.is-chapters {
  background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  /* Зазор считает и стопку страниц под главой: у толстого месяца она
     уходит вниз на 16px, и при прежних 22px следующая глава садилась
     ей на торец. */
  padding: 0; gap: 32px;
}
.chronicle-stack.is-book::before,
.chronicle-stack.is-book::after { display: none; }
.chronicle-chapter-card {
  /* Стопка страниц под главой — тенями, а не отдельными слоями.
     Раньше это были два ::before/::after с z-index:-1. Отрицательный
     z-index внутри собственного контекста наложения (его создаёт
     transform анимации входа) рисуется НЕ под фоном карточки, а поверх
     него — из-под главы торчали плиты и между ними зияли просветы.
     Тень со сжатием (spread −Npx) всегда лежит за border-box, каждый
     следующий лист чуть уже и темнее — это и есть торец блока бумаги. */
  --pages: 0 0 0 0 transparent;
  position: relative; width: 100%; border: 1px solid #e6dccb; border-radius: 16px; padding: 20px 18px;
  background: linear-gradient(160deg, #fffdf9, #f7f1e6);
  box-shadow: var(--pages), 0 14px 30px rgba(90, 70, 40, 0.13);
  text-align: center; cursor: pointer;
  font-family: var(--font-ui); opacity: 0; transform: translateY(8px);
  animation: chronicle-page-in 0.5s var(--ease) both;
}
.chronicle-chapter-card:active { transform: scale(0.99); }
/* Толщина корешка: чем больше исписанных дней, тем выше стопка. Пара
   «заливка + волосок» на каждый лист — без волоска торец сливается в
   одно пятно и перестаёт читаться как отдельные страницы. */
.chronicle-chapter-card.t2 {
  --pages: 0 5px 0 -2px #faf3e6, 0 6px 0 -2px #e3d7c1;
}
.chronicle-chapter-card.t3 {
  --pages:
    0 5px 0 -2px #faf3e6, 0 6px 0 -2px #e3d7c1,
    0 10px 0 -4px #f4ebda, 0 11px 0 -4px #ded1b9;
}
.chronicle-chapter-card.t4 {
  --pages:
    0 5px 0 -2px #faf3e6, 0 6px 0 -2px #e3d7c1,
    0 10px 0 -4px #f4ebda, 0 11px 0 -4px #ded1b9,
    0 15px 0 -6px #ede2ce, 0 16px 0 -6px #d7c9af;
  box-shadow: var(--pages), 0 20px 38px rgba(90, 70, 40, 0.17);
}
.chronicle-chapter-rule { position: absolute; inset: 8px; border: 1px solid rgba(120, 98, 62, 0.18); border-radius: 10px; pointer-events: none; }
.chronicle-chapter-rom { display: block; font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.2em; color: #a9906a; }
.chronicle-chapter-name { display: block; margin-top: 6px; font-family: var(--font-serif); font-size: 25px; font-weight: 500; letter-spacing: -0.3px; color: #3a2f21; }
.chronicle-chapter-sub { display: block; margin: 7px 12px 0; font-family: var(--font-serif); font-style: italic; font-size: 13px; line-height: 1.45; color: #8a7550; }
.chronicle-chapter-foot { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 11px; color: #a9906a; }
.chronicle-chapter-foot b { color: #7d6743; }
.chronicle-chapter-mood { width: 8px; height: 8px; border-radius: 50%; background: var(--mood-c, var(--mid)); }
/* Текущая глава — та же стопка, только тёплое свечение вместо серой тени. */
.chronicle-chapter-card.is-current { border-color: #e6c489; box-shadow: var(--pages), 0 16px 34px rgba(240, 169, 60, 0.26); }
.chronicle-chapter-badge {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px;
  border-radius: 100px; box-shadow: 0 6px 14px rgba(240, 169, 60, 0.35);
}
.chronicle-chapter-card.is-blank { opacity: 0.6; }
.chronicle-chapter-card.is-blank .chronicle-chapter-name { color: #a9906a; }

/* Титульный лист главы */
.chapter-leaf {
  position: relative; margin-top: 6px; padding: 34px 26px 26px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #fffdf9 0%, #fdf8f0 55%, #f7f1e6 100%);
  border: 1px solid #e6dccb; box-shadow: 0 22px 48px rgba(60, 48, 30, 0.16);
}
.chapter-leaf::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(120, 98, 62, 0.24); border-radius: 12px; pointer-events: none; }
.chapter-leaf::after { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(120, 98, 62, 0.12); border-radius: 9px; pointer-events: none; }
.chapter-top { text-align: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: #8a7550; }
.chapter-rom { margin-top: 8px; text-align: center; font-family: var(--font-serif); font-size: 12.5px; letter-spacing: 0.18em; color: #a9906a; }
.chapter-name { margin: 12px 0 0; text-align: center; font-family: var(--font-serif); font-size: 38px; font-weight: 500; letter-spacing: -0.8px; color: #3a2f21; }
/* Подпись главы стоит под настроением (index.html: chapter-foot →
   chapter-epigraph → chapter-read): сначала «о чём глава», потом «какой
   она была», потом короткий вывод. */
.chapter-epigraph { margin: 16px 8px 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 16.5px; line-height: 1.5; color: #5f5039; }
.chapter-read { margin: 10px 8px 0; text-align: center; font-size: 12.5px; line-height: 1.55; color: #9c8560; }
.chapter-stats { margin-top: 20px; display: flex; text-align: center; }
.chapter-stats div { flex: 1; padding: 0 6px; }
.chapter-stats div + div { border-left: 1px solid rgba(120, 98, 62, 0.18); }
.chapter-stats b { display: block; font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: #3a2f21; }
.chapter-stats span { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #a9906a; }
.chapter-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(120, 98, 62, 0.2); display: flex; align-items: center; gap: 14px; }
.chapter-seal {
  width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-serif); font-size: 15px; letter-spacing: 0.06em; color: #8a7550;
  background: radial-gradient(70% 70% at 35% 30%, #fff8ec, #efe0c6);
  box-shadow: inset 0 0 0 1px rgba(120, 98, 62, 0.3), 0 6px 14px rgba(90, 70, 40, 0.16);
}
.chapter-foot-meta { flex: 1; min-width: 0; }
.chapter-foot-meta b { display: block; font-family: var(--font-serif); font-size: 15.5px; font-weight: 500; color: #3a2f21; }
.chapter-foot-meta span { display: block; margin-top: 3px; font-size: 12px; color: #9c8560; line-height: 1.45; }
.chapter-open { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 9px; }

/* Страница главы: день — абзац с буквицей, а не карточка */
[data-screen="chronicle-month"] .chronicle-day-list { gap: 0; }
[data-screen="chronicle-month"] .chronicle-day-row {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; border-radius: 0; box-shadow: none; align-items: flex-start;
  padding: 18px 2px 18px 4px;
}
[data-screen="chronicle-month"] .chronicle-day-row + .chronicle-day-row { border-top: 1px solid rgba(120, 98, 62, 0.18); }
[data-screen="chronicle-month"] .chronicle-day-row::before { display: none; }
[data-screen="chronicle-month"] .chronicle-day-badge { flex: 0 0 46px; text-align: left; }
[data-screen="chronicle-month"] .chronicle-day-badge .num { font-size: 40px; line-height: 0.9; color: var(--mood-c, var(--accent)); }
[data-screen="chronicle-month"] .chronicle-day-badge .wk { margin-top: 4px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; color: #a9906a; }
[data-screen="chronicle-month"] .chronicle-day-body { gap: 6px; padding-top: 2px; }
[data-screen="chronicle-month"] .chronicle-day-body .t { font-size: 17px; line-height: 1.3; white-space: normal; }
[data-screen="chronicle-month"] .chronicle-day-body .p {
  font-size: 13px; line-height: 1.6; color: #6a5a44; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-screen="chronicle-month"] .chronicle-day-count { background: transparent; border: 1px solid rgba(120, 98, 62, 0.28); color: #8a7550; align-self: flex-start; }
.chronicle-folio { margin: 20px 0 0; text-align: center; font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.1em; color: #a9906a; }

/* ============ Запись эмоции (emotion.js) ============
   Секция emotion уже одета в свой accent/bg (app.js: SECTIONS), поэтому
   ниже — только форма: шкалы, чипы и капля. Цвет капли и чипов приходит
   из каталога (--chip-hex / инлайн-градиент), а не задаётся здесь: одна
   эмоция обязана быть одного цвета в чипе, в капле и в отчёте. */

/* «Акварель чувств»: нить из пяти капель вместо полосы прогресса.
   Пройденные капли налиты палитрой выбранных эмоций, текущая дышит
   кольцом. Над вопросом — полоса неба (--emo-sky), её красит окраска. */
@property --emo-sky { syntax: "<color>"; inherits: true; initial-value: #e9f7f0; }
.emo-screen { --emo-sky: color-mix(in srgb, var(--accent) 16%, var(--bg)); transition: --emo-sky 0.7s var(--ease); }
/* Небо окраски на весь экран (жест `tint`): с шага 2 и до конца записи
   экран стоит под той погодой, которую человек выбрал. */
.emo-skyband {
  position: absolute; left: -18px; right: -18px; top: -20px; bottom: -140px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--emo-sky) 0%, color-mix(in srgb, var(--emo-sky) 55%, transparent) 55%, transparent 100%);
}
.emo-trail { display: flex; align-items: center; gap: 10px; margin: 2px 0 18px; }
.emo-trail i {
  position: relative; width: 11px; height: 13px; flex: none;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  transition: background 0.45s var(--ease), transform 0.45s var(--ease);
}
.emo-trail i + i::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 10px; height: 1px;
  background: color-mix(in srgb, var(--fg) 12%, transparent);
}
.emo-trail i.is-done { background: var(--emo-fill, var(--accent)); }
.emo-trail i.is-now { background: var(--accent); transform: scale(1.25); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.emo-step {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.emo-question {
  font-family: var(--font-serif); font-weight: 500; font-size: 27px;
  letter-spacing: -0.4px; line-height: 1.14; margin: 0 0 6px;
}
.emo-sub { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.emo-body { display: flex; flex-direction: column; gap: 12px; }
.emo-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.emo-next { margin-top: 18px; }
.emo-next:disabled { opacity: 0.45; }
/* «Дальше» уже по центру панели (views.js: has-send-tab) — экранный дубль
   прячем, подсказка под шагом остаётся и объясняет погасшую кнопку. */
.app.has-send-tab .emo-next-dup { display: none; }
.emo-sub-h {
  margin: 6px 0 0; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}

.emo-search {
  width: 100%; border: 1px solid var(--border); background: var(--card);
  border-radius: 14px; padding: 11px 13px; color: var(--fg);
  /* 16px — иначе iOS зумит страницу на фокусе поля */
  font: 400 16px var(--font-ui);
}

/* --- Спектр эмоций: цвет чипа = цвет эмоции в каталоге --- */
.emo-spectrum { display: flex; flex-wrap: wrap; gap: 7px; }
.emo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  border-radius: 13px; padding: 8px 11px; font: 600 13px var(--font-ui);
  cursor: pointer; transition: transform 0.18s var(--ease), background 0.2s var(--ease);
}
.emo-chip .emo-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--chip-hex, var(--muted));
}
.emo-chip.on {
  background: var(--chip-hex, var(--accent)); border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px rgba(31, 45, 61, 0.16);
}
.emo-chip.on .emo-dot { background: #fff; }
.emo-chip.nudge { animation: emo-nudge 0.34s var(--ease); }
@keyframes emo-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.emo-empty { margin: 4px 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* --- Акварель: цвет = эмоции, размер = сила ---
   Не капля-яйцо, а пятно пигмента в воде: край медленно дышит (один
   длинный цикл, 11 с), цвет каждой эмоции лежит своим пятном, свечение —
   цвета первой эмоции (--emo-glow). */
.emo-drop-wrap { display: grid; place-items: center; padding: 14px 0 2px; }
.emo-drop {
  width: 104px; height: 104px; position: relative; flex: none;
  border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
  transform: scale(var(--emo-drop-scale, 1));
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--emo-glow, var(--accent)) 10%, transparent),
    0 18px 40px -8px color-mix(in srgb, var(--emo-glow, var(--accent)) 55%, transparent);
  transition: transform 0.45s var(--ease), background 0.45s var(--ease), box-shadow 0.45s var(--ease);
  animation: emo-bloom 11s ease-in-out infinite;
}
.emo-drop::after {
  content: ""; position: absolute; top: 16%; left: 20%;
  width: 26px; height: 16px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5); filter: blur(4px);
}
.emo-drop.empty {
  background: none !important; box-shadow: none; animation: none;
  border: 2px dashed color-mix(in srgb, var(--muted) 45%, transparent);
}
.emo-drop.empty::after { display: none; }
.emo-drop.is-loading {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 30%, #fff), var(--accent));
  opacity: 0.55;
}
@keyframes emo-bloom {
  0%, 100% { border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; }
  33% { border-radius: 45% 55% 42% 58% / 55% 45% 55% 45%; }
  66% { border-radius: 52% 48% 60% 40% / 42% 58% 48% 52%; }
}
/* Капля краски из чипа летит в акварель (emotion.js: emoInkFly). */
.emo-ink {
  position: fixed; z-index: 50; width: 18px; height: 18px; pointer-events: none;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 4px 10px rgba(31, 45, 61, 0.25);
}
.emo-drop-cap { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

/* --- Чипы шагов «тело» и «источник» --- */
.emo-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.emo-tag {
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  border-radius: 12px; padding: 8px 11px; font: 600 12.5px var(--font-ui); cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.emo-tag.on {
  background: var(--accent-soft); border-color: transparent; color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.emo-textarea {
  width: 100%; border: 1px solid var(--border); background: var(--card);
  border-radius: 16px; padding: 12px 13px; color: var(--fg); resize: vertical;
  font: 400 16px var(--font-ui); line-height: 1.5;
}
.emo-label { display: flex; flex-direction: column; gap: 6px; font: 600 13px var(--font-ui); color: var(--muted); }
.emo-depth { display: flex; flex-direction: column; gap: 12px; }
.emo-depth-toggle { width: 100%; }

.emo-crisis { margin: 18px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; }
.emo-crisis b { color: var(--fg); }

/* --- Загрузка каталога и ошибка: разные экраны, не один спиннер --- */
.emo-loading { display: grid; place-items: center; min-height: 60vh; }
.emo-loading-label { margin: 22px 0 0; font-family: var(--font-serif); font-size: 17px; color: var(--muted); }
.emo-fail-text { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* --- Семь небес недели (отчёт «Что видно») --- */
.rep-skies-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 4px; }
.rep-sky { border: 0; background: none; padding: 0; cursor: pointer; display: grid; gap: 6px; justify-items: center; font-family: var(--font-ui); }
.rep-sky i { width: 100%; height: 86px; border-radius: 16px; display: block; background: linear-gradient(180deg, var(--sky), color-mix(in srgb, var(--sky) 30%, #fff)); box-shadow: inset 0 -10px 18px rgba(255, 255, 255, 0.5); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.rep-sky.is-empty i { background: repeating-linear-gradient(135deg, #eef1f6 0 6px, #e5e9f0 6px 12px); }
.rep-sky.on i { transform: translateY(-4px); box-shadow: 0 10px 20px -8px rgba(31, 45, 61, 0.35), inset 0 0 0 2px var(--accent); }
.rep-sky b { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.rep-sky-cap { margin: 10px 0 0; font-size: 13px; color: var(--fg); min-height: 20px; }

/* --- Силуэт тела: точки = пункты «Где в теле» --- */
.emo-body-fig { display: grid; place-items: center; margin: -2px 0 2px; }
.emo-body-fig svg { width: 150px; height: 250px; overflow: visible; }
.emo-body-line { fill: none; stroke: color-mix(in srgb, var(--fg) 30%, transparent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.emo-body-pt { cursor: pointer; outline: none; }
.emo-body-dot { fill: var(--card); stroke: color-mix(in srgb, var(--fg) 35%, transparent); stroke-width: 1.2; transition: fill 0.3s var(--ease), stroke 0.3s var(--ease); }
.emo-body-pt.is-back .emo-body-dot { stroke-dasharray: 2 2; }
.emo-body-glow { fill: var(--emo-pt, var(--accent)); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.emo-body-pt.on .emo-body-glow { opacity: 0.35; transform: scale(1); }
.emo-body-pt.on .emo-body-dot { fill: var(--emo-pt, var(--accent)); stroke: #fff; }
.emo-body-pt:focus-visible .emo-body-dot { stroke: var(--accent); stroke-width: 2; }

/* --- Сохранение: неделя из семи чаш, капля падает в сегодняшнюю --- */
.emo-seal { display: grid; justify-items: center; gap: 4px; padding: 16px 0 6px; }
.emo-seal[hidden] { display: none; }
.emo-seal .emo-drop { animation: none; }
.emo-week { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }
.emo-week-day { display: grid; justify-items: center; gap: 6px; }
.emo-week-day i {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; position: relative;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  box-shadow: inset 0 2px 5px rgba(31, 45, 61, 0.08);
}
.emo-week-day i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--emo-fill, var(--accent)); transform: scale(0); transition: transform 0.7s var(--ease);
}
.emo-week-day.is-today i { box-shadow: 0 0 0 2px var(--accent), inset 0 2px 5px rgba(31, 45, 61, 0.08); }
.emo-week-day.is-filled i::after { transform: scale(1); }
.emo-week-day b { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.emo-week-day.is-today b { color: var(--accent); }
.emo-seal-steps { display: grid; gap: 8px; margin-top: 20px; width: 100%; max-width: 260px; }
.emo-seal-step { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); opacity: 0.4; transition: opacity 0.4s var(--ease); }
.emo-seal-step i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-style: normal; font-size: 10px; }
.emo-seal-step.is-on { opacity: 1; color: var(--fg); }
.emo-seal-step.is-done i { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- Кризисный экран: без картинок и анимации --- */
.emo-crisis-screen { display: flex; flex-direction: column; gap: 14px; padding-top: 40px; }
.emo-crisis-lead { margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.32; }
.emo-crisis-phone { margin: 0; font-size: 16px; }
.emo-crisis-note { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* --- Результат: одно наблюдение --- */
.emo-reveal { display: grid; place-items: center; text-align: center; padding: 30px 0 8px; }
/* Итог: акварель в ореоле — кольцо цвета первой эмоции расходится один раз. */
.emo-bloom-halo { position: relative; display: grid; place-items: center; width: 150px; height: 150px; }
.emo-bloom-halo::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--emo-glow, var(--accent)) 50%, transparent);
  animation: emo-halo 1.4s var(--ease) 0.2s both;
}
@keyframes emo-halo { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1); opacity: 0.35; } }
.emo-drop-landed { animation: emo-bloom 11s ease-in-out infinite; }
.emo-reveal-eyebrow {
  margin: 22px 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.emo-reveal-title {
  margin: 0 0 6px; font-family: var(--font-serif); font-weight: 500; font-size: 26px;
  letter-spacing: -0.4px; line-height: 1.16;
}
.emo-reveal-meta { margin: 0 0 18px; font-size: 12.5px; color: var(--muted); }
.emo-reveal-observation {
  margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 18.5px; line-height: 1.42;
  max-width: 30ch; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.emo-reveal-pending { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 32ch; }
.emo-reveal-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }

/* Карточка записи — то, что раньше уходило в чат как «Запись сохранена».
   Тихая бумага под каплей: жест остаётся один, факты не спорят с наблюдением. */
.emo-card {
  width: 100%;
  max-width: 340px;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: left;
}
.emo-card[hidden] { display: none !important; }
.emo-card-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.emo-card-row:first-child { border-top: none; padding-top: 0; }
.emo-card-row:last-child { padding-bottom: 0; }
.emo-card-k {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding-top: 1px;
}
.emo-card-v { color: var(--fg); font-size: 13.5px; line-height: 1.45; word-break: break-word; }

@media (prefers-reduced-motion: reduce) {
  .emo-drop, .emo-seal.on .emo-drop { animation: none; }
  .emo-chip.nudge { animation: none; }
}

/* --- Отчёт «Что видно» (emotion.js: renderEmotionReport) --- */
/* --none-c — «не записывал»: отдельный токен, а не выцветший --low.
   Пустой день и плохой день не имеют права быть одного цвета. */
.rep-body {
  display: flex; flex-direction: column; gap: 12px;
  /* --neutral-c — «между», --none-c — «не записывал». Два разных серых:
     ровный день и пропущенный день не имеют права выглядеть одинаково. */
  --neutral-c: #9aa7ba;
  --none-c: #d7dfec;
}
.rep-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
.rep-card-h {
  margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.rep-src { margin: 10px 0 0; font-size: 10.5px; color: var(--muted); opacity: 0.75; }
.rep-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.rep-thin { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.rep-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.rep-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rep-legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }

.rep-weather { display: flex; align-items: center; gap: 13px; }
.rep-weather-emoji { font-size: 32px; flex: none; display: grid; place-items: center; width: 40px; }
.rep-weather-meta { display: flex; flex-direction: column; gap: 3px; }
.rep-weather-label { font-weight: 700; font-size: 15px; }
.rep-weather-text { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.rep-bars { display: flex; flex-direction: column; gap: 8px; }
.rep-bar-row { display: grid; grid-template-columns: minmax(72px, 40%) 1fr auto; align-items: center; gap: 9px; }
.rep-bar-name { font-size: 12.5px; line-height: 1.3; }
.rep-bar-track {
  height: 9px; border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.rep-bar-fill { display: block; height: 100%; border-radius: 5px; }
.rep-bar-num { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.rep-locked-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
/* Мало записей — графики бледные, но на месте (см. REPORT_MIN_ENTRIES). */
.rep-body.is-thin .rep-card svg,
.rep-body.is-thin .rep-bars { opacity: 0.45; }

/* --- Иконки погоды (weather-icons.js: WX_ICONS) ---
   Свои анимированные иконки вместо эмодзи: телеграмовские анимированные
   эмодзи в Mini App не вставить (TGS/Lottie нужен плеер), а системный
   глиф выглядит по-разному на каждой платформе. Пять состояний, чистый
   SVG, ни одной зависимости.
   Цвета — токены: вода на --low, туман на --muted, тепло на --mid.
   Один словарь на три места: шаг окраски, погода недели в отчёте,
   слово дня на обложке. */
.wx { display: block; overflow: visible; }

/* Центр любого поворота и растяжения записан в самой иконке —
   style="transform-origin" на группе (weather-icons.js). Общего правила
   на все элементы здесь нет намеренно: прежнее .wx * { transform-origin:
   center } складывалось с поворотами из разметки, и лучи солнца улетали
   за край картинки. */
.wx-cloud { fill: color-mix(in srgb, var(--low) 62%, #97a5bd); }
.wx-cloud-light { fill: color-mix(in srgb, var(--low) 34%, #b9c4d6); }
.wx-water { fill: var(--low); }
.wx-bolt { fill: var(--mid); }
.wx-flash { fill: #eef4ff; }
.wx-f1, .wx-f2, .wx-f3 { fill: color-mix(in srgb, var(--muted) 72%, transparent); }
.wx-core { fill: var(--mid); transform-box: fill-box; transform-origin: center; }
.wx-ray { stroke: color-mix(in srgb, var(--mid) 86%, #ffffff); fill: none; }
.wx-ice { stroke: color-mix(in srgb, var(--low) 55%, #ffffff); fill: none; }
.wx-glow { opacity: 0; }

/* Капля падает с разгоном и вытягивается на скорости — не парашют.
   Задержки неровные (0.37 и 0.68 цикла), отрицательные — дождь идёт
   с первого кадра, а не «набирается». */
@keyframes wx-rain {
  0% { transform: translateY(-3.5px) scaleY(1); opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translateY(7.5px) scaleY(1.26); opacity: 0; }
}
.wx-drop { animation: wx-rain 2.6s cubic-bezier(0.45, 0.05, 0.85, 0.4) infinite; }
.wx-d2 { animation-delay: -0.96s; }
.wx-d3 { animation-delay: -1.77s; }

/* Молния: удар мгновенный, спад быстрый, второй удар слабее.
   На вспышке светлеет вся туча — одна группа с общей прозрачностью,
   иначе доли облака просвечивают друг сквозь друга. */
@keyframes wx-strike {
  0%, 62% { opacity: 0.42; }
  63% { opacity: 1; }
  67% { opacity: 0.5; }
  70% { opacity: 0.95; }
  75%, 100% { opacity: 0.42; }
}
@keyframes wx-lit {
  0%, 62% { opacity: 0; }
  63% { opacity: 0.5; }
  68% { opacity: 0.1; }
  70% { opacity: 0.34; }
  77%, 100% { opacity: 0; }
}
.wx-bolt { animation: wx-strike 5.2s linear infinite; }
.wx-glow { animation: wx-lit 5.2s linear infinite; }

@keyframes wx-haze {
  0%, 100% { transform: translateX(-2.6px); opacity: 0.5; }
  50% { transform: translateX(2.6px); opacity: 1; }
}
.wx-f1 { animation: wx-haze 6.4s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
.wx-f2 { animation: wx-haze 6.4s cubic-bezier(0.37, 0, 0.63, 1) -1.9s infinite; }
.wx-f3 { animation: wx-haze 6.4s cubic-bezier(0.37, 0, 0.63, 1) -4.1s infinite; }

/* Солнце дышит диском. Лучи вращаются только там, где рисунок
   симметричен и центр совпадает с центром картинки: у «Хорошо» лучи
   растут веером над тучей (wx-rays-still) и на повороте ныряли бы в неё. */
@keyframes wx-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes wx-turn { to { transform: rotate(360deg); } }
.wx-core { animation: wx-pulse 5.6s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
.wx-rays { animation: wx-turn 26s linear infinite; }
.wx-flake { animation: wx-turn 34s linear infinite; }

/* Шаг погоды: пять иконок на дуге, живёт только выбранная — движение
   отвечает на выбор, а не мигает витриной. */
.emo-wx:not(.on) .wx * { animation: none; }

/* Шторм: дуги воронки качаются шире и быстрее тумана — иначе на 34px
   шторм читался бы как тот же туман. */
.wx-vortex path { stroke: color-mix(in srgb, var(--low) 70%, #6b7a8b); }
.wx-vortex .wx-v1 { stroke-width: 3; }
.wx-vortex .wx-v2 { stroke-width: 2.7; }
.wx-vortex .wx-v3 { stroke-width: 2.4; }
.wx-vortex .wx-vtail { stroke-width: 2.2; stroke: color-mix(in srgb, var(--low) 55%, #97a5bd); }
.wx-v1 { animation: wx-sway 2.8s var(--ease) infinite; }
.wx-v2 { animation: wx-sway 2.8s var(--ease) infinite 0.16s; }
.wx-v3 { animation: wx-sway 2.8s var(--ease) infinite 0.32s; }
.wx-vtail { animation: wx-sway 2.8s var(--ease) infinite 0.48s; }
@keyframes wx-sway {
  0%, 100% { transform: translateX(-2.2px); }
  50% { transform: translateX(2.2px); }
}

/* После дождя: дуги прочерчиваются снизу вверх и гаснут вместе.
   pathLength=1 в разметке — чтобы длинная и короткая шли одинаково. */
.wx-bow path { stroke-width: 2.9; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wx-bow1 { stroke: var(--low); animation: wx-draw 5.2s var(--ease) infinite; }
.wx-bow2 { stroke: var(--mid); animation: wx-draw 5.2s var(--ease) infinite 0.22s; }
.wx-bow3 { stroke: var(--high); animation: wx-draw 5.2s var(--ease) infinite 0.44s; }
@keyframes wx-draw {
  0% { stroke-dashoffset: 1; opacity: 0.15; }
  30% { stroke-dashoffset: 0; opacity: 1; }
  72% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0.15; }
}

/* Иконка в строке текста (обложка дня): садится на базовую линию. */
.wx-inline { display: inline-block; vertical-align: -0.28em; margin-right: 2px; }

@media (prefers-reduced-motion: reduce) {
  .wx * { animation: none !important; }
  .wx-bow path { stroke-dashoffset: 0; opacity: 1; }
}

/* --- Конфетти (confetti.js) — жест `confetti`, DESIGN.md § Motion ---
   Холст поверх всего и прозрачен для пальца. */
.confetti-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 400; pointer-events: none;
}

/* --- Шторки карты: «‹ Назад» сверху вместо ручки ---
   Ручка звала потянуть шторку вниз, а этот жест в Telegram сворачивает
   всё приложение. Длинный портрет прокручивается внутри карточки. */
.sheet-card {
  max-height: calc(100vh - 36px - env(safe-area-inset-top, 0px));
  overflow-y: auto; overscroll-behavior: contain;
}
.sheet-back {
  display: block; margin: 2px 0 10px; padding: 8px 2px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600;
  color: var(--accent);
}
.sheet-back:active { opacity: 0.6; }

/* --- Праздник нового значка (achievements.js: achCelebrateUnseen) ---
   Медаль раскрывается (`reveal`), из неё разлетается конфетти. */
.ach-celebrate {
  position: fixed; inset: 0; z-index: 350;
  display: grid; place-items: center; padding: 20px;
  background: rgba(20, 28, 44, 0.34);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.28s var(--ease);
}
.ach-celebrate.open { opacity: 1; }
.ach-celebrate-card {
  width: 100%; max-width: 360px; box-sizing: border-box;
  padding: 26px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px; text-align: center;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 60px -18px rgba(31, 45, 61, 0.45);
  transform: scale(0.86) translateY(12px); opacity: 0;
  transition: transform 0.42s var(--ease), opacity 0.3s var(--ease);
}
.ach-celebrate.open .ach-celebrate-card { transform: none; opacity: 1; }
.ach-celebrate-kicker {
  margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sa, var(--accent));
}
.ach-celebrate-medal {
  width: 132px; height: 132px; margin: 6px auto 10px;
  transform: scale(0.4) rotate(-24deg); opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s, opacity 0.3s var(--ease) 0.08s;
}
.ach-celebrate-medal svg { width: 100%; height: 100%; display: block; }
.ach-celebrate.open .ach-celebrate-medal { transform: none; opacity: 1; }
.ach-celebrate-title {
  margin: 4px 0 8px; font-family: var(--font-serif); font-size: 24px; font-weight: 500;
  line-height: 1.2; color: var(--fg);
}
.ach-celebrate-title .ach-open-sub { display: block; margin-top: 4px; }
.ach-celebrate-desc { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: var(--fg); }
.ach-celebrate-sec { margin: 4px 0 16px; font-size: 12.5px; color: var(--muted); }
.ach-celebrate .btn + .btn { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .ach-celebrate, .ach-celebrate-card, .ach-celebrate-medal { transition: opacity 0.2s linear; transform: none; }
}

.dream-layer-tabs[hidden] { display: none !important; }

/* ============================================================
   Ритуалы (living.js): итоги недели сторис, минута тишины,
   карта сна картинкой. Живут поверх приложения, в <body>.
   ============================================================ */
html.recap-open, html.recap-open body { overflow: hidden; }
.recap, .hush, .share-view {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: #0c0a1e; color: #f2eeff; font-family: var(--font-ui);
}
.recap-close {
  position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 16px; cursor: pointer;
}
.recap-loading { display: grid; justify-items: center; gap: 14px; text-align: center; max-width: 280px; font-family: var(--font-serif); font-size: 18px; }
.recap-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 24px var(--gold); animation: recap-pulse 1.2s ease-in-out infinite; }
@keyframes recap-pulse { 0%, 100% { transform: scale(0.7); opacity: 0.6; } 50% { transform: scale(1); opacity: 1; } }
.recap-bars { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 16px; right: 16px; display: flex; gap: 5px; z-index: 3; }
.recap-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.recap-bars b { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.recap-zone { position: absolute; top: 70px; bottom: 90px; width: 34%; z-index: 1; background: none; border: 0; cursor: pointer; }
.recap-zone.is-prev { left: 0; }
.recap-zone.is-next { right: 0; width: 66%; }
.recap-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 70px 26px 60px; transition: background 0.6s var(--ease); }
.recap-card { position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; text-align: center; max-width: 340px; pointer-events: none; }
.recap-card button { pointer-events: auto; }
.recap-k { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }
.recap-card h2 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 34px; line-height: 1.12; letter-spacing: -0.5px; text-wrap: balance; }
.recap-card p { margin: 0; font-size: 15px; line-height: 1.5; opacity: 0.85; }
.recap-stage.is-weather { background: linear-gradient(180deg, var(--rc), #eef4ff 75%); color: #1f2d3d; }
.recap-skies { display: flex; gap: 6px; margin-top: 10px; }
.recap-skies i { width: 32px; height: 70px; border-radius: 16px; position: relative; box-shadow: inset 0 -8px 14px rgba(255, 255, 255, 0.5); }
.recap-skies b { position: absolute; bottom: -18px; left: 0; right: 0; font-size: 10px; color: #5a6679; }
.recap-stage.is-emotion { background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc) 55%, #fff), #e9f7f0 70%); color: #10281c; }
.recap-bloom { width: 130px; height: 130px; border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rc) 40%, #fff), var(--rc)); box-shadow: 0 20px 50px -10px var(--rc); animation: emo-bloom 11s ease-in-out infinite; }
.recap-stage.is-dream { background: radial-gradient(ellipse at 70% 20%, #2a2066, transparent 60%), #0f0b24; }
.recap-star { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, #f1d69c 40%, rgba(233, 194, 122, 0) 72%); box-shadow: 0 0 60px 16px rgba(233, 194, 122, 0.35); }
.recap-stage.is-page { background: radial-gradient(circle at 50% 110%, #f7e6c8, #fbf4e8 60%); color: #2e2413; }
.recap-leaf { padding: 26px 22px; border-radius: 4px 16px 16px 4px; background: #fffbf3; border: 1px solid #efe2c8; box-shadow: 6px 0 0 -3px #f6ecd8, 10px 0 0 -5px #eadcbf, 0 24px 40px -24px rgba(120, 80, 20, 0.5); display: grid; gap: 10px; }
.recap-leaf span { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #b08a4a; }
.recap-stage.is-question { background: linear-gradient(170deg, #5b6fd8, #2a2066); }
.recap-write { width: auto; padding: 14px 26px; margin-top: 10px; }

.hush { background: radial-gradient(circle at 50% 40%, #16384a, #0b1420 70%); align-content: center; gap: 22px; text-align: center; }
.hush-k { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #9fe6c4; }
.hush-ring {
  width: 200px; height: 200px; border-radius: 50%; display: grid; place-content: center; gap: 2px;
  border: 2px solid rgba(127, 224, 176, 0.75);
  box-shadow: 0 0 60px rgba(127, 224, 176, 0.3), inset 0 0 40px rgba(127, 224, 176, 0.22);
  transform: scale(0.7); transition: transform var(--bd, 4s) cubic-bezier(.45, 0, .55, 1);
}
.hush-ring[data-k="in"], .hush-ring[data-k="hold"] { transform: scale(1.08); }
.hush-ring[data-k="out"] { transform: scale(0.7); }
.hush-ring[data-k="rest"] { transform: scale(0.9); transition-duration: 1.2s; }
.hush-ring span { font-family: var(--font-serif); font-size: 26px; color: #dff8ec; }
.hush-ring small { font-size: 14px; color: #9fe6c4; font-variant-numeric: tabular-nums; min-height: 20px; }
.hush-note { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.55; color: #b9d6cb; }
.hush-go { width: auto; padding: 14px 32px; background: linear-gradient(135deg, #3fbf7f, #8fe0b8); color: #0c2a1c; }

.share-view { align-content: center; gap: 14px; background: rgba(8, 6, 20, 0.94); }
.share-view img { max-width: min(78vw, 360px); max-height: 72vh; border-radius: 18px; box-shadow: 0 30px 60px -20px #000; -webkit-touch-callout: default; }
.share-view p { margin: 0; max-width: 300px; text-align: center; font-size: 13.5px; color: #c9c2ea; }

.nx-share { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--gold); }
.rep-recap, .today-recap {
  width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 13px 14px; cursor: pointer; text-align: left;
  border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-family: var(--font-ui); color: var(--fg);
  background: color-mix(in srgb, var(--accent) 10%, rgba(255, 255, 255, 0.7));
}
.rep-recap[hidden] { display: none; }
.rep-recap b, .today-recap b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 16px; }
.rep-recap > span:nth-child(2), .today-recap .today-ritual-tx { flex: 1; min-width: 0; }
.rep-recap > span:nth-child(2) > span, .today-recap .today-ritual-tx span { font-size: 12px; color: var(--muted); }
.rep-recap-ring { flex: none; display: flex; gap: 3px; }
.rep-recap-ring i { width: 9px; height: 28px; border-radius: 5px; background: linear-gradient(180deg, #5b8def, #f0a93c); }
.rep-recap-ring i:nth-child(2) { background: linear-gradient(180deg, #a66bff, #3fbf7f); height: 34px; }
.rep-recap-ring i:nth-child(3) { background: linear-gradient(180deg, #e8788f, #f5b544); }
.emo-breath-invite {
  width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 13px 14px; cursor: pointer; text-align: left;
  border-radius: 18px; border: 1px solid rgba(47, 157, 176, 0.35); background: rgba(47, 157, 176, 0.08); font-family: var(--font-ui); color: var(--fg);
}
.emo-breath-invite[hidden] { display: none; }
.emo-breath-invite svg { width: 32px; height: 32px; color: #2f9db0; flex: none; }
.emo-breath-invite b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 16px; }
.emo-breath-invite span span { font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .hush-ring { transition: none; }
  .recap-dot, .recap-bloom { animation: none; }
}

/* Медаль-гравюра в раскрытом значке: наклон за пальцем или телефоном
   (achievements.js: achTilt), блик — полоса света по металлу. */
.ach-hero .ach-medal.is-tilt { transform: perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.12s linear; }
.ach-hero .ach-medal.is-tilt svg { filter: drop-shadow(0 14px 22px rgba(31, 45, 61, 0.28)); }
.ach-glare {
  position: absolute; inset: 11%; z-index: 3; border-radius: 50%; pointer-events: none; opacity: 0.9;
  background: linear-gradient(115deg, transparent calc(var(--gx, 50%) - 22%), rgba(255, 255, 255, 0.6) var(--gx, 50%), transparent calc(var(--gx, 50%) + 22%));
  mix-blend-mode: soft-light;
}

/* --- Письмо себе в будущее (living.js: renderLetters) ---
   Бумага Летописи, конверт с сургучом и гербом «ЖД». */
.lt-screen [hidden] { display: none !important; }
.lt-kicker { margin: 0 0 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #c9721d; }
.lt-h1 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 28px; letter-spacing: -0.5px; line-height: 1.12; }
.lt-sub { margin: 6px 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.lt-compose { display: grid; gap: 12px; transition: transform 0.6s var(--ease), opacity 0.6s var(--ease); transform-origin: top center; }
.lt-compose.is-sealing { transform: scaleY(0.35) translateY(-30px); opacity: 0.2; }
.lt-paper {
  width: 100%; min-height: 190px; padding: 18px 18px 18px 22px; border: 1px solid #efe2c8; border-radius: 4px 16px 16px 4px; resize: vertical;
  font: 400 16px/1.7 var(--font-serif); color: #2e2413;
  background: repeating-linear-gradient(180deg, transparent 0 26px, rgba(176, 138, 74, 0.14) 26px 27px), #fffbf3;
  box-shadow: 4px 0 0 -2px #f6ecd8, 4px 0 0 -1px #eadcbf, 0 14px 30px -22px rgba(120, 80, 20, 0.5);
}
.lt-paper:focus { outline: none; border-color: #e3a14c; }
.lt-days { display: flex; flex-wrap: wrap; gap: 6px; }
.lt-days button { border: 1px solid #efe2c8; background: #fffbf3; color: #8a6a38; border-radius: 99px; padding: 7px 12px; font: 700 12.5px var(--font-ui); cursor: pointer; }
.lt-days button.on { background: #c9721d; border-color: #c9721d; color: #fff; }
.lt-sec { margin: 24px 2px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lt-sealed { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.lt-env {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border: 0; padding: 0; border-radius: 8px; overflow: hidden;
  background: #f4e6cc; box-shadow: 0 14px 26px -16px rgba(80, 50, 10, 0.55); font-family: var(--font-ui);
}
.lt-flap { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 58%); background: #ead6b1; transform-origin: top; transition: transform 0.5s var(--ease); }
.lt-wax {
  position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-serif); font-size: 12px; color: #ffd9dc;
  background: radial-gradient(circle at 35% 30%, #e0707a, #9e2a38); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.lt-env small { position: absolute; left: 10px; right: 10px; bottom: 7px; font-size: 10.5px; font-weight: 700; color: #8a6a38; text-align: right; }
.lt-arrived { display: grid; justify-items: center; gap: 10px; margin: 0 0 20px; }
.lt-env.is-ready { max-width: 260px; cursor: pointer; animation: lt-glow 3s ease-in-out infinite; }
@keyframes lt-glow { 0%, 100% { box-shadow: 0 14px 26px -16px rgba(80, 50, 10, 0.55), 0 0 0 0 rgba(224, 112, 122, 0); } 50% { box-shadow: 0 14px 26px -16px rgba(80, 50, 10, 0.55), 0 0 0 8px rgba(224, 112, 122, 0.15); } }
.lt-env.is-broken .lt-wax { transform: scale(1.3) rotate(18deg); opacity: 0; }
.lt-env.is-broken .lt-flap { transform: rotateX(180deg); }
.lt-arrived-cap { margin: 0; font-size: 12.5px; color: #8a6a38; }
.lt-letter {
  width: 100%; padding: 22px 20px 18px 24px; border: 1px solid #efe2c8; border-radius: 4px 16px 16px 4px; color: #2e2413;
  background: repeating-linear-gradient(180deg, transparent 0 26px, rgba(176, 138, 74, 0.12) 26px 27px), #fffbf3;
  box-shadow: 0 20px 40px -24px rgba(120, 80, 20, 0.55); transform-origin: top;
}
.lt-letter-date { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #b08a4a; }
.lt-letter-text { margin: 0; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.7; white-space: pre-wrap; }
.lt-letter-sign { margin: 14px 0 0; text-align: right; font-family: var(--font-serif); font-style: italic; color: #8a6a38; }
.lt-old { padding: 10px 14px; border-radius: 14px; background: #fffbf3; border: 1px solid #efe2c8; margin-bottom: 8px; color: #2e2413; }
.lt-old summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #8a6a38; }
.lt-old p { margin: 8px 0 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.today-letter {
  width: 100%; display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; cursor: pointer; text-align: left;
  border-radius: 18px; border: 1px solid #efe2c8; background: #fffbf3; font-family: var(--font-ui); color: #2e2413;
  box-shadow: 0 12px 26px -18px rgba(120, 80, 20, 0.6);
}
.today-letter b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 16px; }
.today-letter .today-ritual-tx span { font-size: 12px; color: #8a6a38; }
.today-letter-env { position: relative; flex: none; width: 44px; height: 30px; border-radius: 4px; background: #f4e6cc; overflow: hidden; }
.today-letter-env::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 58%); background: #ead6b1; }
.today-letter-env i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e0707a, #9e2a38); }
@media (prefers-reduced-motion: reduce) {
  .lt-env.is-ready { animation: none; }
  .lt-compose, .lt-flap, .lt-wax { transition: none; }
}

/* --- Голос ночи: кнопка под звездой на экране записи сна --- */
.nx-voice {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 11px 14px;
  border-radius: 99px; border: 1px solid rgba(233, 194, 122, 0.4); background: rgba(233, 194, 122, 0.08); color: var(--gold);
  font: 700 13.5px var(--font-ui); cursor: pointer; transition: background 0.3s var(--ease);
}
.nx-voice-mic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #fff3d6, #e9c27a 55%, #b8862b); color: #140f2c; flex: none; }
.nx-voice-mic svg { width: 17px; height: 17px; }
.nx-voice-wave { display: none; gap: 3px; align-items: center; height: 20px; }
.nx-voice-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--gold); transform: scaleY(0.3); animation: nx-wv 0.9s ease-in-out infinite; }
.nx-voice-wave i:nth-child(2) { animation-delay: 0.12s; } .nx-voice-wave i:nth-child(3) { animation-delay: 0.24s; }
.nx-voice-wave i:nth-child(4) { animation-delay: 0.08s; } .nx-voice-wave i:nth-child(5) { animation-delay: 0.2s; }
@keyframes nx-wv { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.nx-voice.is-rec { background: rgba(233, 194, 122, 0.18); }
.nx-voice.is-rec .nx-voice-wave { display: flex; }
.nx-voice.is-rec .nx-voice-mic { box-shadow: 0 0 0 6px rgba(233, 194, 122, 0.18), 0 0 20px rgba(233, 194, 122, 0.5); }
.nx-voice.is-busy { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .nx-voice-wave i { animation: none; transform: scaleY(0.7); } }


/* ============================================================
   «Лунное перо» в записи эмоции (emotion.js)
   ============================================================ */
/* Строка пера: запись пишет себя сама (жест `write`). */
.emo-quill { min-height: 44px; margin: -6px 0 12px; font-family: var(--font-serif); font-style: italic; font-size: 15.5px; line-height: 1.45; color: color-mix(in srgb, var(--fg) 45%, transparent); }
.emo-quill-new { color: var(--fg); animation: emo-quill-in 0.42s var(--ease) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes emo-quill-in { from { opacity: 0; } to { opacity: 1; } }
.emo-quill-wait { color: color-mix(in srgb, var(--fg) 35%, transparent); }
.emo-quill-nib {
  display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; vertical-align: middle;
  background: var(--gold-ink); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--gold) 70%, transparent);
  animation: emo-nib 1.6s ease-in-out infinite;
}
@keyframes emo-nib { 50% { opacity: 0.35; } }

/* Шаг 2: пять погод на дуге рассвет — закат. */
.emo-horizon { position: relative; height: 190px; margin: 8px 0 0; }
.emo-horizon-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.emo-horizon-arc path { fill: none; stroke: color-mix(in srgb, var(--fg) 20%, transparent); stroke-width: 1.2; stroke-dasharray: 3 6; }
.emo-horizon-arc line { stroke: color-mix(in srgb, var(--fg) 12%, transparent); }
.emo-wx {
  position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: var(--shadow); transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s var(--ease);
}
.emo-wx .wx, .emo-wx svg { width: 30px; height: 30px; }
.emo-wx.on { transform: scale(1.28); background: var(--card); box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg); }
.emo-wx:active { transform: scale(0.94); }
.emo-wx.on:active { transform: scale(1.2); }
.emo-wx-label { min-height: 58px; margin: 4px 0 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.35; text-wrap: balance; }
.emo-wx-label small { display: block; margin-bottom: 8px; font-family: var(--font-ui); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* Шаг 3: держи — капля растёт (жест `bloom`). */
.emo-hold { position: relative; height: 300px; display: grid; place-items: center; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.emo-hold:focus-visible .emo-ring:last-of-type { border-color: var(--accent); }
.emo-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.2px dashed color-mix(in srgb, var(--accent) 30%, transparent); transition: border-color 0.3s var(--ease); pointer-events: none; }
.emo-ring.lit { border-style: solid; border-color: var(--accent); }
.emo-hold-ink { display: grid; place-items: center; transform: scale(0.55); will-change: transform; }
.emo-hold-word { min-height: 28px; margin: 0; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 18px; }
.emo-hold-levels { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.emo-hold-levels button { width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; font: 700 13px var(--font-ui); color: var(--muted); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.emo-hold-levels button.on { color: #fff; background: var(--accent); box-shadow: none; }

/* Шаг 4: краска проступает в теле (жест `stain`). */
.emo-body-glow { mix-blend-mode: multiply; filter: blur(2.5px); transition: opacity 0.4s var(--ease), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.emo-body-pt.on .emo-body-glow { opacity: 0.55; transform: scale(1.35); }

/* Сохранение и итог: запись, которую дописало перо. */
.emo-seal-line { margin: 0 0 18px; text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.45; text-wrap: balance; }
.emo-reveal-line { margin: 2px 0 8px; max-width: 32ch; font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.45; text-wrap: balance; }
/* Итог проявляется, как фотография (жест `develop`): акварель, потом
   текст, потом факты, потом одно наблюдение. */
.emo-reveal > * { animation: emo-develop 0.7s var(--ease) both; }
.emo-reveal > :nth-child(2), .emo-reveal > :nth-child(3) { animation-delay: 0.35s; }
.emo-reveal > :nth-child(4), .emo-reveal > :nth-child(5) { animation-delay: 0.5s; }
.emo-reveal > :nth-child(6) { animation-delay: 0.65s; }
.emo-reveal > :nth-child(n+7) { animation-delay: 0.85s; }
@keyframes emo-develop { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  .emo-quill-new, .emo-quill-nib, .emo-reveal > * { animation: none; }
  .emo-wx, .emo-body-glow { transition: none; }
}
.nx-layer.is-jung .nx-lens-lab.is-on, .nx-layer.is-freud .nx-lens-lab.is-on { background: var(--lens); color: #140f2c; }
/* Нить тропы уходит под подписи: ореол бумаги вокруг букв, как у гравюры. */
.levels.is-path .level-meta .lvl, .levels.is-path .level-meta .ttl, .levels.is-path .level-meta .sub, .levels.is-path .level-result {
  text-shadow: 0 0 4px var(--bg), 0 0 8px var(--bg), 0 0 14px var(--bg);
}
/* Эпиграф созвездия бывает в две строки — в потоке, а не поверх легенды. */
.nx-sky.is-constellation { padding-bottom: 0; }
.nx-sky.is-constellation .nx-const-name { position: static; margin: 2px 0 12px; font-size: 16px; line-height: 1.35; text-wrap: balance; }

/* --- «Сводка внутренней погоды» (emotion.js: renderEmotionReportView) ---
   Небо недели во всю ширину, как обложка дня: цвет — средняя окраска
   недели по шкале гроза → рассвет (EMO_SKY), крупная погода, прогноз по
   дням колонками неба и барометр. Шапку «Что видно» заменяет сводка. */
.rep-wx .sec-head { display: none; }
.wx-hero {
  position: relative; margin: -20px -18px 6px; padding: 26px 22px 64px; text-align: center; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--wx-sky) 85%, #fff) 0%, color-mix(in srgb, var(--wx-sky) 45%, var(--bg)) 55%, var(--bg) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent);
  animation: rise 0.5s var(--ease) both;
}
.wx-kicker { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--fg)); }
.wx-icon { display: grid; place-items: center; width: 116px; height: 116px; margin: 10px auto 2px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%); }
.wx-icon svg { width: 92px; height: 92px; }
.wx-emoji { font-size: 64px; }
.wx-label { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 34px; line-height: 1.08; letter-spacing: -0.6px; color: var(--fg); text-wrap: balance; }
.wx-text { margin: 10px auto 0; max-width: 330px; font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--fg) 82%, transparent); text-wrap: pretty; }
.wx-facts { margin: 12px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }
.rep-wx .rep-skies-row { align-items: end; }
.rep-wx .rep-sky i { height: var(--h, 60px); border-radius: 14px 14px 10px 10px; }
.rep-sky-ic { height: 22px; display: grid; place-items: center; }
.rep-sky-ic svg { width: 20px; height: 20px; }
.wx-baro { text-align: center; }
.wx-baro-svg { width: min(240px, 80%); display: block; margin: 4px auto 0; overflow: visible; }
.wx-baro-arcs path { fill: none; stroke-width: 12; stroke-linecap: round; }
.wx-baro-needle { transform-origin: 70px 74px; transform: rotate(-90deg); animation: wx-needle 1.1s cubic-bezier(0.34, 1.4, 0.64, 1) 0.3s forwards; }
.wx-baro-needle path { stroke: var(--fg); stroke-width: 2.2; stroke-linecap: round; }
.wx-baro-needle circle { fill: var(--fg); }
@keyframes wx-needle { to { transform: rotate(var(--a)); } }
.wx-baro-svg text { font-family: var(--font-ui); font-size: 7.5px; font-weight: 700; fill: var(--muted); }
.wx-baro-cap { margin: 8px 0 0; font-size: 13.5px; color: var(--fg); }
.wx-baro-cap b { font-family: var(--font-serif); font-weight: 500; font-size: 22px; }
@media (prefers-reduced-motion: reduce) { .wx-baro-needle { animation: none; transform: rotate(var(--a)); } .wx-hero { animation: none; } }
.rep-wx .rep-body > .rep-recap { margin: -30px 0 14px; position: relative; z-index: 1; }
/* Плитка «Эмоции» с погодой недели: светлое небо сверху, иконка погоды
   вместо капли, погода — курсивом Fraunces в строку, без кричащего кегля. */
.obs-portal.is-weather { background: linear-gradient(180deg, #eaf6ff 0%, #f4fbf7 55%, rgba(255, 255, 255, 0.86) 100%); }
.obs-portal.is-weather .obs-portal-em { background: rgba(255, 255, 255, 0.85); box-shadow: 0 6px 16px -8px rgba(80, 140, 200, 0.45); }
.obs-portal.is-weather .obs-portal-em svg { width: 30px; height: 30px; }
.obs-portal.is-weather .obs-portal-num em { display: block; font-style: italic; font-size: 16px; line-height: 1.2; margin: 2px 0 2px; color: color-mix(in srgb, var(--c) 80%, var(--fg)); }

/* --- Гайд: раскрытая карточка (home.js: renderGuide) ---
   Вместо четырёх одинаковых полей: ведущая фраза Fraunces, «зачем»
   отдельной строкой, шаги цифрами, подписка тихой плашкой и слот
   наглядной презентации (GUIDE_DECKS). */
.guide-lead { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.4; color: var(--fg); text-wrap: pretty; }
.guide-why { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--fg) 80%, transparent); }
.guide-why span, .guide-plan span { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--item-accent, var(--accent)); }
.guide-item-body .guide-field { margin-top: 14px; }
.guide-steps { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: gs; display: grid; gap: 8px; }
.guide-steps li { counter-increment: gs; position: relative; padding-left: 32px; font-size: 13.5px; line-height: 1.5; color: var(--fg); }
.guide-steps li::before {
  content: counter(gs); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--item-accent, var(--accent)) 45%, #fff), var(--item-accent, var(--accent)) 60%);
}
.guide-steps li:not(:last-child)::after { content: ""; position: absolute; left: 10.5px; top: 23px; bottom: -8px; width: 1px; background: color-mix(in srgb, var(--item-accent, var(--accent)) 30%, transparent); }
.guide-lead-sm { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; }
.guide-plan { margin: 14px 0 0; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.5; color: var(--fg); background: color-mix(in srgb, var(--item-accent, var(--accent)) 8%, var(--card)); }
.guide-deck {
  width: 100%; margin-top: 12px; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--item-accent, var(--accent)) 30%, transparent); cursor: pointer; font-family: var(--font-ui); color: var(--fg);
  background: linear-gradient(120deg, color-mix(in srgb, var(--item-accent, var(--accent)) 14%, var(--card)), var(--card));
}
.guide-deck > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.guide-deck b { font-size: 14px; }
.guide-deck small { font-size: 11.5px; color: var(--muted); }
.guide-deck-play { width: 34px; height: 34px; flex: none; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--item-accent, var(--accent)) 45%, #fff), var(--item-accent, var(--accent)) 60%); }
.guide-deck-play::after { content: ""; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.guide-deck.is-soon { cursor: default; opacity: 0.7; border-style: dashed; background: none; }
.guide-deck.is-soon .guide-deck-play { background: color-mix(in srgb, var(--item-accent, var(--accent)) 25%, var(--card)); }
.guide-item.open .guide-item-body { max-height: 1400px; }

/* --- «Лунные тарифы» (views.js: drawPricingCards) ---
   Вместо эмодзи — Луна тарифа: серп у бесплатной версии, растёт с
   каждым тарифом, полнолуние — у самого глубокого, и у него ночное небо
   с золотом (как Сонник). Логика карусели и покупки прежняя. */
.billing-status-moon { background: radial-gradient(circle at 50% 45%, #3a2f63, #1c1740) !important; border-radius: 50% !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 8px 22px -6px rgba(247, 196, 106, 0.55) !important; }
.billing-status-moon svg { width: 44px; height: 44px; display: block; }
.plan-moon { width: 46px !important; height: 46px !important; border-radius: 50% !important; padding: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #2e2658, #16122f) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 6px 16px -6px rgba(60, 50, 120, 0.5); }
.plan-moon svg { width: 40px; height: 40px; display: block; margin: 3px; }
.plan-label { display: flex; flex-direction: column; font-family: var(--font-serif); font-weight: 500; font-size: 20px; letter-spacing: -0.3px; }
.plan-label small { font-family: var(--font-ui); font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.plan-card.tier-1 { background: linear-gradient(180deg, #f5f8ff, var(--card) 45%); }
.plan-card.tier-2:not(.featured) { background: linear-gradient(180deg, #efeaff, var(--card) 50%); }
.plan-card.is-night {
  color: #efeaff; border-color: rgba(233, 194, 122, 0.45);
  background: radial-gradient(circle at 80% 0%, rgba(184, 146, 255, 0.35), transparent 55%), linear-gradient(170deg, #241b58, #100c2a 75%);
  box-shadow: 0 22px 44px -18px rgba(16, 12, 42, 0.8), 0 0 40px -14px rgba(233, 194, 122, 0.5);
}
.plan-card.is-night::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.35;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0.6px, transparent 1px); background-size: 23px 29px;
}
.plan-card.is-night > * { position: relative; z-index: 1; }
.plan-card.is-night .plan-label small, .plan-card.is-night .plan-blurb, .plan-card.is-night .plan-price span { color: #b5addb; }
.plan-card.is-night .plan-price b { color: #f7eed7; }
.plan-card.is-night .plan-check li { color: #efeaff; }
.plan-card.is-night .plan-check svg { color: #e9c27a; }
.plan-card.is-night .plan-cta.primary { color: #140f2c; background: linear-gradient(135deg, #f1d69c, #d9a955); box-shadow: 0 12px 28px -10px rgba(233, 194, 122, 0.6); }
.plan-card.is-night .plan-cta.ghost { color: #f1d69c; background: rgba(233, 194, 122, 0.1); border-color: rgba(233, 194, 122, 0.35); box-shadow: none; }
.plan-card.is-night .plan-ribbon { background: linear-gradient(135deg, #f1d69c, #d9a955); color: #140f2c; }
.plan-price b { font-size: 40px; }

/* --- Карточки меню (сентябрь 2026, разбор со скриншотов) ---
   Личная карта — главная и самая нарядная: «астролябия рассвета»
   (home.js: homeAstrolabe). Эмоции — акварель пигмента, Достижения —
   медальный кабинет с гильоше. Летопись (переплёт) и Сонник (ночь) —
   как были. Одна живая линия на меню — созвездие астролябии (`draw`). */
.obs-you {
  position: relative; overflow: hidden; grid-template-columns: 124px 1fr; gap: 16px; padding: 18px 18px 18px 14px; min-height: 160px;
  background:
    radial-gradient(90% 120% at 12% 50%, rgba(255, 214, 160, 0.55), transparent 60%),
    linear-gradient(135deg, #fff4e8 0%, #f8ecff 50%, #e6eeff 100%);
  border: 1px solid rgba(233, 194, 122, 0.55);
  box-shadow: 0 22px 44px -22px rgba(180, 120, 60, 0.45), 0 6px 18px -10px rgba(91, 141, 239, 0.25);
}
.obs-you-frame { position: absolute; inset: 6px; border: 1px solid rgba(214, 160, 80, 0.35); border-radius: 19px; pointer-events: none; }
.obs-you::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image: radial-gradient(circle, rgba(214, 160, 80, 0.7) 0.6px, transparent 1px); background-size: 21px 25px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.obs-you > *:not(.obs-you-frame) { position: relative; z-index: 1; }
.obs-you-map { width: 124px; height: 124px; }
.obs-you .astro-ring { fill: none; stroke: rgba(196, 140, 60, 0.55); stroke-width: 0.8; stroke-dasharray: 1 3; }
.obs-you .astro-ring.is-inner { stroke-dasharray: none; stroke: rgba(196, 140, 60, 0.3); }
.obs-you .astro-tick { stroke: rgba(196, 140, 60, 0.5); stroke-width: 0.8; stroke-linecap: round; }
.obs-you .astro-const { fill: none; stroke: #c98a2e; stroke-width: 1.1; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: obs-draw 1.6s var(--ease) 0.3s forwards; }
.obs-you .astro-star { fill: #fff; stroke: rgba(196, 140, 60, 0.6); stroke-width: 0.8; }
.obs-you .astro-star.is-lit { fill: #f3c46e; stroke: #fff4dc; stroke-width: 1; filter: drop-shadow(0 0 3px rgba(243, 196, 110, 0.9)); }
.obs-you-num { color: #7a4a12; font-size: 17px; }
.obs-you-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #b9812f; }
.obs-you-tx b { font-size: 21px; line-height: 1.18; letter-spacing: -0.3px; color: #2b2140; }
.obs-you-cta { align-self: flex-start; margin-top: 8px; padding: 7px 13px; border-radius: 100px; font-size: 12.5px; color: #fff;
  background: radial-gradient(circle at 30% 20%, #f7d49a, #d99a45 60%, #b8762b); box-shadow: 0 8px 16px -8px rgba(184, 118, 43, 0.7); }
.obs-you.is-locked .obs-you-cta { background: rgba(185, 129, 47, 0.12); color: #9a6a26; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .obs-you .astro-const { animation: none; stroke-dashoffset: 0; } }

/* Эмоции — акварель: пятна пигмента на бумаге (как «Акварель чувств»). */
.obs-portal[data-home-section="emotions"] {
  background:
    radial-gradient(55% 45% at 18% 22%, rgba(110, 205, 160, 0.42), transparent 70%),
    radial-gradient(50% 42% at 88% 28%, rgba(255, 196, 140, 0.45), transparent 70%),
    radial-gradient(60% 50% at 62% 96%, rgba(130, 170, 255, 0.34), transparent 70%),
    #fbfdfb;
  border: 1px solid rgba(63, 191, 127, 0.28);
}
.obs-portal[data-home-section="emotions"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply;
  background-image: radial-gradient(circle, rgba(120, 140, 120, 0.18) 0.5px, transparent 1px); background-size: 5px 5px;
}
.obs-portal[data-home-section="emotions"] .obs-portal-em { border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 6px 16px -8px rgba(63, 150, 110, 0.5); }
.obs-portal.is-weather { background:
    radial-gradient(55% 45% at 18% 22%, rgba(110, 205, 160, 0.42), transparent 70%),
    radial-gradient(50% 42% at 88% 28%, rgba(255, 196, 140, 0.45), transparent 70%),
    radial-gradient(60% 50% at 62% 96%, rgba(130, 170, 255, 0.34), transparent 70%),
    #fbfdfb; }

/* Достижения — медальный кабинет: гильоше, металлический герб, лента. */
.obs-portal[data-home-section="achievements"] {
  background:
    repeating-radial-gradient(circle at 92% 12%, rgba(224, 102, 127, 0.09) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, #fff7f3, #fde9ee 70%);
  border: 1px solid rgba(224, 102, 127, 0.28);
}
.obs-portal[data-home-section="achievements"] .obs-portal-em {
  border-radius: 50%; color: #7a2c3d;
  background: radial-gradient(circle at 34% 28%, #fff3e6, #f2b7a6 45%, #d9788a 80%, #b5536a);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(217, 120, 138, 0.35), 0 8px 18px -8px rgba(181, 83, 106, 0.6);
}
.obs-portal[data-home-section="achievements"] .obs-progress { height: 7px; background: rgba(224, 102, 127, 0.14); }
.obs-portal[data-home-section="achievements"] .obs-progress i { background: linear-gradient(90deg, #f2b7a6, #d9788a 60%, #b5536a); }
.obs-portal[data-home-section="emotions"] > *, .obs-portal[data-home-section="achievements"] > * { position: relative; z-index: 1; }

/* --- Настройки — «мастерская» (setSection("settings")) ---
   Графитовые чернила и латунь: латунная шестерня в шапке делает один
   оборот на входе (`rise` шапки), группы — листы с латунной кромкой. */
[data-screen="settings"] .set-head { text-align: center; margin: 4px 0 8px; }
.set-emblem { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; color: #8a6a36;
  background: radial-gradient(circle at 34% 28%, #fff7e6, #ecd3a4 55%, #c9a061);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 0 4px rgba(201, 160, 97, 0.4), 0 12px 24px -12px rgba(94, 110, 146, 0.6); }
.set-emblem svg { width: 38px; height: 38px; animation: set-gear 1.1s var(--ease) both; }
@keyframes set-gear { from { transform: rotate(-90deg); opacity: 0.4; } to { transform: none; opacity: 1; } }
.set-kicker { margin: 0 !important; font-size: 10.5px !important; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #a98446 !important; }
[data-screen="settings"] .set-head h1 { font-size: 30px; }
[data-screen="settings"] .set-group { position: relative; background: linear-gradient(180deg, #ffffff, #fafbfd); border-color: rgba(201, 160, 97, 0.28); }
[data-screen="settings"] .set-group::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, rgba(201, 160, 97, 0), rgba(201, 160, 97, 0.7), rgba(201, 160, 97, 0)); }
[data-screen="settings"] .set-group-title { color: #a98446; }
@media (prefers-reduced-motion: reduce) { .set-emblem svg { animation: none; } }

/* --- Лики эмоций (emotion.js: emoFaceSvg) ---
   Один рисунок на весь каталог, выражение — по окраске 1–5, цвет — цвет
   эмоции. На выбор лик моргает и подпрыгивает (часть жеста `ink`), в
   покое неподвижен — цикла нет. Эмодзи шагов «тело» и «из-за чего» —
   одним тоном, пока не выбраны: разнобой системных смайлов не спорит с
   экраном; выбранный оживает в цвете. */
.emo-chip .emo-face { flex: none; width: 20px; height: 20px; color: var(--chip-hex, var(--muted)); display: grid; place-items: center; }
.emo-chip .emo-face svg { width: 20px; height: 20px; display: block; overflow: visible; }
.emo-chip.on .emo-face { color: #fff; animation: emo-face-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.emo-face-eye { transform-box: fill-box; transform-origin: center; }
.emo-chip.on .emo-face-eye { animation: emo-face-blink 0.5s var(--ease) 0.12s; }
@keyframes emo-face-pop { 0% { transform: scale(0.7) rotate(-12deg); } 60% { transform: scale(1.2) rotate(6deg); } 100% { transform: none; } }
@keyframes emo-face-blink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(0.1); } }
.emo-tag-ic { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 7px; border-radius: 50%; font-size: 14px; line-height: 1;
  background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--tag-c, var(--accent)) 28%, #fff)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tag-c, var(--accent)) 30%, transparent);
  transition: transform 0.3s var(--ease); vertical-align: -6px; }
.emo-tag.on .emo-tag-ic { background: #fff; animation: emo-face-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* Тон экрана по тяжести ответа: переход чернил и бумаги — токены
   зарегистрированы @property, меняются плавно (0,6 с). */
:root[data-emo-mood="1"] .emo-drop-wrap, :root[data-emo-mood="2"] .emo-drop-wrap { filter: saturate(1.1); }
@media (prefers-reduced-motion: reduce) { .emo-chip.on .emo-face, .emo-chip.on .emo-face-eye, .emo-tag.on .emo-tag-ic { animation: none; } }
.obs-portal[data-home-section="achievements"] .obs-portal-em, .obs-portal[data-home-section="emotions"] .obs-portal-em { width: 48px; height: 48px; flex: none; align-self: flex-start; aspect-ratio: 1; }

/* Шаги 4–5 — палитра выбранных эмоций (emotion.js: emoPaletteTint):
   акварельные пятна их цветов под содержимым, чипы по очереди в тонах
   пятен, выбранный чип налит чернилами. */
.emo-screen.is-palette { position: relative; isolation: isolate; }
.emo-screen.is-palette::before {
  content: ""; position: absolute; inset: -20px -18px -40px; z-index: -1; pointer-events: none; opacity: 0.9;
  background:
    radial-gradient(52% 32% at 10% 12%, color-mix(in srgb, var(--w1) 48%, transparent), transparent 70%),
    radial-gradient(46% 30% at 94% 34%, color-mix(in srgb, var(--w2) 44%, transparent), transparent 70%),
    radial-gradient(60% 36% at 40% 90%, color-mix(in srgb, var(--w3) 38%, transparent), transparent 72%);
  animation: rise 0.6s var(--ease) both;
}
.emo-screen.is-palette .emo-skyband { opacity: 0.25; }
.emo-screen.is-palette .emo-tag:nth-child(3n+1) { --tag-c: var(--w1); }
.emo-screen.is-palette .emo-tag:nth-child(3n+2) { --tag-c: var(--w2); }
.emo-screen.is-palette .emo-tag:nth-child(3n) { --tag-c: var(--w3); }
.emo-screen.is-palette .emo-tag { border-color: color-mix(in srgb, var(--tag-c) 30%, var(--border)); background: color-mix(in srgb, var(--tag-c) 8%, var(--card)); }
.emo-screen.is-palette .emo-tag.on { background: var(--accent); border-color: transparent; color: #fff; }

/* Солнце зашло на подпись — слова под ним тёплые, с кремовым ореолом
   (today.js: todaySunLight). */
.is-sunlit { color: #8a3a10 !important; text-shadow: 0 0 10px rgba(255, 236, 200, 0.95), 0 0 2px rgba(255, 246, 225, 0.9) !important; transition: color 0.5s var(--ease); }

/* ---------- Меню «Оглавление» (tpl-home-book, home.js) ----------
   При обложке «Титульный лист» меню — оглавление той же книги: одна
   бумага с двойной рамкой, как у .today-leaf; у глав цвет раздела только
   в гравюре и числе. Ночь одна — круглое окно Сонника. Закрытая тарифом
   глава — карандашный эскиз. Жест экрана один: перо подчёркивает
   заголовок и обводит главу часа (flourish). Цикла нет. */
.bk-page {
  position: relative; margin-top: 4px; padding: 24px 18px 16px; border-radius: 20px;
  background: radial-gradient(120% 60% at 50% 0%, #fffdf9 0%, #fdf8f0 55%, #f7f1e6 100%);
  border: 1px solid #e6dccb; box-shadow: 0 22px 48px rgba(60, 48, 30, 0.14);
}
.bk-page::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(120, 98, 62, 0.22); border-radius: 13px; pointer-events: none; }
.bk-page::after { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(120, 98, 62, 0.1); border-radius: 10px; pointer-events: none; }
.bk-page > * { position: relative; z-index: 1; }
.bk-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bk-head { min-width: 0; }
.bk-kicker { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #8a7550; }
.bk-h1 { margin: 4px 0 0; font-family: var(--font-serif); font-weight: 500; font-size: 32px; line-height: 1.05; letter-spacing: -0.6px; color: #2b2218; }
.bk-flourish { display: block; width: 176px; max-width: 100%; height: 24px; margin-top: -1px; overflow: visible; }
.bk-top .obs-today { flex: none; margin-top: 2px; }

.bk-you {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; margin-top: 14px;
  padding: 10px 14px 10px 8px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(201, 160, 90, 0.35); text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: transform 0.16s var(--ease);
}
.bk-you:active { transform: scale(0.98); }
.bk-astro { position: relative; width: 92px; height: 92px; }
.bk-astro svg { width: 100%; height: 100%; overflow: visible; }
.bk-you .astro-ring { fill: none; stroke: rgba(196, 140, 60, 0.55); stroke-width: 0.8; stroke-dasharray: 1 3; }
.bk-you .astro-ring.is-inner { stroke-dasharray: none; stroke: rgba(196, 140, 60, 0.3); }
.bk-you .astro-tick { stroke: rgba(196, 140, 60, 0.5); stroke-width: 0.8; stroke-linecap: round; }
.bk-you .astro-const { fill: none; stroke: #c98a2e; stroke-width: 1.1; stroke-linejoin: round; }
.bk-you .astro-star { fill: #fff; stroke: rgba(196, 140, 60, 0.6); stroke-width: 0.8; }
.bk-you .astro-star.is-lit { fill: #f3c46e; stroke: #fff4dc; stroke-width: 1; }
.bk-you-tx { display: flex; flex-direction: column; min-width: 0; }
.bk-you-kicker { font-size: 9.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #b9812f; }
.bk-you-tx b { margin: 3px 0 6px; font-family: var(--font-serif); font-weight: 500; font-size: 19px; line-height: 1.18; letter-spacing: -0.2px; color: #2b2218; }
.bk-you-cta { font-size: 12.5px; font-weight: 700; color: #8a5a14; }
.bk-you.is-locked .bk-astro { filter: url(#qnGraphite) grayscale(1); opacity: 0.6; }
.bk-you.is-locked .bk-you-kicker, .bk-you.is-locked .bk-you-cta { color: #98a1b1; }

.bk-mark { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 8px 4px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.bk-mark[hidden] { display: none; }
.bk-ribbon { flex: none; width: 13px; height: 21px; margin-top: -12px; fill: #e39a2e; }
.bk-mark-tx { flex: 1; min-width: 0; display: flex; gap: 6px; font-size: 12.5px; line-height: 1.35; color: #6b5a40; }
.bk-mark-tx b { flex: none; font-weight: 700; color: #2b2218; }
.bk-mark-tx span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bk-sep { display: block; width: 100%; height: 16px; margin-top: 6px; }
.bk-label { margin: 8px 2px 2px; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #a08a63; }

.bk-ch {
  display: grid; grid-template-columns: 46px auto minmax(14px, 1fr) auto; gap: 0 10px; align-items: start; width: 100%;
  padding: 9px 2px; border: 0; border-radius: 14px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: background 0.2s, transform 0.16s var(--ease);
}
.bk-ch:active { background: rgba(255, 255, 255, 0.72); transform: scale(0.985); }
.bk-vig { grid-column: 1; grid-row: 1 / 3; width: 46px; height: 46px; display: grid; place-items: center; color: var(--c); }
.bk-vig svg { width: 40px; height: 40px; }
.bk-vig.is-night { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2a2160, #120d2e 70%); color: #f3d28a; box-shadow: inset 0 0 0 1px rgba(243, 210, 138, 0.3); }
.bk-vig.is-night svg { width: 32px; height: 32px; }
.bk-nm { grid-column: 2; grid-row: 1; margin-top: 5px; font-family: var(--font-serif); font-size: 20px; line-height: 1.1; color: #2b2218; }
.bk-dots { grid-column: 3; grid-row: 1; margin-top: 21px; height: 0; border-bottom: 1.6px dotted rgba(160, 138, 99, 0.45); }
.bk-num, .bk-lock { grid-column: 4; grid-row: 1; }
.bk-num {
  position: relative; margin-top: 5px; padding: 0 2px; font-family: var(--font-serif); font-style: italic; font-size: 20px; line-height: 1.1;
  color: var(--c); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bk-num svg { position: absolute; left: -14px; top: -9px; width: calc(100% + 28px); height: calc(100% + 18px); overflow: visible; pointer-events: none; }
.bk-sub, .bk-now { grid-column: 2 / 5; grid-row: 2; margin-top: 1px; font-size: 12px; line-height: 1.35; color: #9c8560; }
.bk-now { display: none; color: var(--c); font-weight: 600; }
.bk-ch.is-now .bk-sub { display: none; }
.bk-ch.is-now .bk-now { display: block; }
.bk-lock { display: none; margin-top: 9px; font-size: 12px; font-weight: 700; color: #98a1b1; white-space: nowrap; }
.bk-ch.is-locked .bk-num { display: none; }
.bk-ch.is-locked .bk-lock { display: block; }
.bk-ch.is-locked .bk-vig { color: #98a1b1; filter: url(#qnGraphite); }
.bk-ch.is-locked .bk-vig.is-night { background: none; box-shadow: inset 0 0 0 1px rgba(152, 161, 177, 0.5); }
.bk-ch.is-locked .bk-nm { color: #7d8799; }
/* Погода недели вместо капли (home.js: paintHomeLive) — иконка своего цвета. */
.bk-vig svg:not([viewBox="0 0 48 48"]) { width: 34px; height: 34px; }

.bk-margin { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(120, 98, 62, 0.18); }
.bk-mg { display: grid; grid-template-columns: repeat(2, max-content); justify-content: space-between; gap: 0 10px; }
.bk-mg button {
  display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 2px; border: 0; background: none;
  font: italic 14.5px/1.2 var(--font-serif); color: #4a3d2a; text-align: left; white-space: nowrap; cursor: pointer;
}
.bk-mg button:active { opacity: 0.6; }
.bk-mg svg { width: 19px; height: 19px; flex: none; color: var(--c); }
.bk .home-chat-note { margin-top: 14px; }


/* ===================================================================================================
   ВК (п.6 владельца, 18.10.2026): плитки Обсерватории оживают так же, как «Летопись».
   Летопись: тиснение прорисовывается → закладка качается → блик по коже (один раз на входе).
   Тот же язык для остальных: один жест на входе, без бесконечных циклов (кроме звёзд Сонника,
   они уже были). reduced-motion — всё статично.
   =================================================================================================== */

/* Личная карта — созвездие: звёзды загораются по очереди, ядро вспыхивает, по карточке идёт блик. */
.obs-you { position: relative; overflow: hidden; isolation: isolate; }
.obs-you-stars circle { transform-box: fill-box; transform-origin: center; animation: obs-star-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.obs-you-stars circle:nth-child(1) { animation-delay: 0.55s; }
.obs-you-stars circle:nth-child(2) { animation-delay: 0.65s; }
.obs-you-stars circle:nth-child(3) { animation-delay: 0.75s; }
.obs-you-stars circle:nth-child(4) { animation-delay: 0.85s; }
.obs-you-stars circle:nth-child(5) { animation-delay: 0.95s; }
.obs-you-stars circle:nth-child(6) { animation-delay: 1.05s; }
.obs-you-stars circle:nth-child(7) { animation-delay: 1.15s; }
.obs-you-core { transform-box: fill-box; transform-origin: center; animation: obs-core-flare 1.2s var(--ease) 1.25s both; }
@keyframes obs-core-flare {
  0% { transform: scale(0.6); filter: drop-shadow(0 0 0 transparent); }
  45% { transform: scale(1.18); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 70%, transparent)); }
  100% { transform: none; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 35%, transparent)); }
}
.obs-you-num { animation: obs-num-rise 0.7s var(--ease) 1.4s both; }
@keyframes obs-num-rise { from { opacity: 0; transform: translateY(6px) scale(0.85); } }
.obs-you-tx > * { animation: obs-num-rise 0.6s var(--ease) both; }
.obs-you-tx > :nth-child(1) { animation-delay: 0.15s; }
.obs-you-tx > :nth-child(2) { animation-delay: 0.3s; }
.obs-you-tx > :nth-child(3) { animation-delay: 0.6s; }
.obs-you-sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 190, 0.55) 50%, transparent 65%);
  animation: obs-sheen 1.5s var(--ease) 1.6s both;
}

/* Сонник — луна-герб всплывает из темноты, свечение раскрывается один раз. */
.obs-portal.is-night .obs-portal-em { animation: obs-moon-rise 1.1s var(--ease) 0.2s both; }
@keyframes obs-moon-rise { from { opacity: 0; transform: translateY(10px) rotate(-18deg); filter: blur(2px); } }
.obs-night-glow { animation: obs-glow-open 1.8s var(--ease) 0.4s both; }
@keyframes obs-glow-open { 0% { opacity: 0; transform: scale(0.4); } 60% { opacity: 1; transform: scale(1.25); } 100% { transform: none; } }

/* Эмоции — акварель проступает: пятна пигмента растекаются по мокрой бумаге, капля падает в центр герба. */
.obs-portal[data-home-section="emotions"] > .obs-ink { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.obs-ink i { position: absolute; border-radius: 50%; filter: blur(10px); opacity: 0; animation: obs-bloom 1.6s var(--ease) both; }
.obs-ink i:nth-child(1) { left: -12%; top: -6%; width: 70%; height: 60%; background: rgba(110, 205, 160, 0.55); animation-delay: 0.15s; }
.obs-ink i:nth-child(2) { right: -14%; top: 4%; width: 62%; height: 55%; background: rgba(255, 196, 140, 0.55); animation-delay: 0.4s; }
.obs-ink i:nth-child(3) { left: 30%; bottom: -18%; width: 75%; height: 58%; background: rgba(130, 170, 255, 0.45); animation-delay: 0.65s; }
@keyframes obs-bloom { 0% { opacity: 0; transform: scale(0.25); } 55% { opacity: 1; } 100% { opacity: 0.55; transform: scale(1); } }
.obs-ink b { position: absolute; left: 38px; top: 0; width: 8px; height: 11px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #4fbf8d; opacity: 0; animation: obs-drop 0.9s cubic-bezier(0.5, 0, 0.75, 0) 0.9s both; }
@keyframes obs-drop { 0% { opacity: 0; transform: translateY(-10px); } 20% { opacity: 1; } 80% { opacity: 1; transform: translateY(26px) scale(1); } 100% { opacity: 0; transform: translateY(28px) scale(2.4, 0.3); } }
.obs-portal[data-home-section="emotions"] .obs-portal-em { animation: obs-em-splash 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s both; }
@keyframes obs-em-splash { 0% { transform: scale(1); } 35% { transform: scale(0.88); } 70% { transform: scale(1.1); } 100% { transform: none; } }
.obs-portal[data-home-section="emotions"] .obs-portal-em svg { animation: obs-weather-sway 2.4s var(--ease) 1.8s both; }
@keyframes obs-weather-sway { 0% { transform: none; } 30% { transform: translateX(3px) rotate(4deg); } 65% { transform: translateX(-2px) rotate(-3deg); } 100% { transform: none; } }
.obs-portal[data-home-section="emotions"] .obs-portal-num em { animation: obs-num-rise 0.8s var(--ease) 1.1s both; }

/* Достижения — медаль качается на ленте, от неё расходятся волны гильоше, по металлу блик, вспыхивают искры;
   полоса прогресса наливается после. */
.obs-portal[data-home-section="achievements"] > .obs-medal-fx { position: absolute; left: 15px; top: 15px; width: 48px; height: 48px; z-index: 0; pointer-events: none; }
.obs-medal-fx i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(217, 120, 138, 0.55); opacity: 0;
  animation: obs-ripple 1.6s var(--ease) both; }
.obs-medal-fx i.r1 { animation-delay: 0.85s; }
.obs-medal-fx i.r2 { animation-delay: 1.15s; }
@keyframes obs-ripple { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.obs-medal-fx s { position: absolute; width: 9px; height: 9px; opacity: 0; text-decoration: none;
  background: #f6c46a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: obs-spark 0.9s var(--ease) both; }
.obs-medal-fx s.k1 { left: 50px; top: -2px; animation-delay: 1.25s; }
.obs-medal-fx s.k2 { left: 56px; top: 30px; width: 6px; height: 6px; animation-delay: 1.45s; }
.obs-medal-fx s.k3 { left: -4px; top: 44px; width: 7px; height: 7px; animation-delay: 1.6s; }
@keyframes obs-spark { 0% { opacity: 0; transform: scale(0) rotate(0); } 50% { opacity: 1; transform: scale(1.25) rotate(45deg); } 100% { opacity: 0; transform: scale(0.6) rotate(90deg); } }
.obs-portal[data-home-section="achievements"] .obs-portal-em { position: relative; overflow: hidden; transform-origin: 50% -30%;
  animation: obs-medal-swing 1.5s var(--ease) 0.2s both; }
@keyframes obs-medal-swing { 0% { opacity: 0; transform: rotate(-28deg) translateY(-6px); } 35% { opacity: 1; transform: rotate(14deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(3deg); } 100% { transform: none; } }
.obs-portal[data-home-section="achievements"] .obs-portal-em::after { content: ""; position: absolute; inset: 0; border-radius: 50%; transform: translateX(-130%);
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%); animation: obs-sheen 1s var(--ease) 1.5s both; }
.obs-portal[data-home-section="achievements"] .obs-progress i { transition-duration: 1.3s; transition-delay: 0.9s; }
.obs-portal[data-home-section="achievements"] .obs-portal-num em { display: inline-block; animation: obs-num-rise 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both; }

@media (prefers-reduced-motion: reduce) {
  .obs-you-stars circle, .obs-you-core, .obs-you-num, .obs-you-tx > *, .obs-you-sheen,
  .obs-portal.is-night .obs-portal-em, .obs-night-glow,
  .obs-ink i, .obs-ink b, .obs-portal[data-home-section="emotions"] .obs-portal-em,
  .obs-portal[data-home-section="emotions"] .obs-portal-em svg, .obs-portal[data-home-section="emotions"] .obs-portal-num em,
  .obs-medal-fx i, .obs-medal-fx s, .obs-portal[data-home-section="achievements"] .obs-portal-em,
  .obs-portal[data-home-section="achievements"] .obs-portal-em::after,
  .obs-portal[data-home-section="achievements"] .obs-portal-num em { animation: none !important; }
  .obs-ink i { opacity: 0.55; }
  .obs-you-sheen, .obs-ink b, .obs-medal-fx { display: none; }
}

/* ===================================================================================================
   ВК (18.10.2026) — Личная карта + итоги Компаса (reports.js)
   1) Карточка Личной карты в меню: компактная (вход в карту + полка «День · Неделя · Месяц»).
      Причина прошлой поломки: правило `.obs-you > *:not(.obs-you-frame) { position: relative }`
      перебивало `position: absolute` у блика, и блик вставал в сетку отдельной ячейкой — карточка
      разъезжалась на пол-экрана. Слои карточки теперь объявлены с той же приставкой (`.obs-you > …`).
   2) Краткий итог под Луной на обложке (.today-digest).
   3) Вкладка «Итоги» в «Твоей неделе» (.today-week-mode, .today-reps).
   4) Экран «Итоги» (.rp-*), карточка итога недели в сторис (.recap-stage.is-report).
   =================================================================================================== */

/* --- 1. Личная карта --- */
.obs-you {
  display: block; grid-template-columns: none; min-height: 0; padding: 14px 14px 12px;
  cursor: default; border-radius: 26px;
}
.obs-you > .obs-you-sheen { position: absolute; inset: 0; z-index: 2; }
.obs-you > .obs-you-frame { position: absolute; }
.obs-you-main {
  width: 100%; display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: center;
  padding: 2px 4px 2px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-ui); color: inherit; transition: transform 0.16s var(--ease);
}
.obs-you-main:active { transform: scale(0.985); }
.obs-you .obs-you-map { width: 78px; height: 78px; }
.obs-you .obs-you-num { font-size: 15px; }
.obs-you-tx { gap: 2px; }
.obs-you .obs-you-tx b { font-size: 19.5px; line-height: 1.16; }
.obs-you .obs-you-cta { margin-top: 7px; padding: 6px 12px; font-size: 12px; }
.obs-you.is-locked .obs-you-main .obs-you-map { opacity: 0.45; filter: grayscale(0.6); }

/* Полка итогов — под чертой из золотых точек, три плитки одного ряда. */
.rp-shelf { position: relative; z-index: 1; margin-top: 12px; padding-top: 11px; }
.rp-shelf[hidden] { display: none; }
.rp-shelf::before {
  content: ""; position: absolute; top: 0; left: 6px; right: 6px; height: 1px;
  background-image: radial-gradient(circle, rgba(201, 138, 46, 0.55) 0.8px, transparent 1.2px); background-size: 7px 1px;
}
.rp-shelf-cap {
  display: block; margin: 0 4px 8px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: #b9812f;
}
.rp-shelf-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.rp-tile {
  position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 9px 8px 9px 9px;
  border-radius: 15px; cursor: pointer; text-align: left; font-family: var(--font-ui); color: #2b2140;
  background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(233, 194, 122, 0.4);
  box-shadow: 0 6px 14px -10px rgba(180, 120, 60, 0.45);
  transition: transform 0.15s var(--ease), background 0.2s var(--ease);
  animation: rp-tile-in 0.5s var(--ease) both; animation-delay: calc(0.35s + var(--i, 0) * 0.08s);
}
@keyframes rp-tile-in { from { opacity: 0; transform: translateY(6px); } }
.rp-tile:active { transform: scale(0.96); }
.rp-tile-ic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8ea, #f6e3c0); color: #c98a2e; }
.rp-tile-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rp-tile-ic svg circle { fill: currentColor; stroke: none; }
.rp-tile-ic svg circle[r="4.2"] { fill: none; stroke: currentColor; }
.rp-tile-tx { display: flex; flex-direction: column; min-width: 0; }
.rp-tile-tx b { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.rp-tile-tx span { font-size: 10.5px; line-height: 1.25; color: #8a7f9e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-tile.is-ready { background: linear-gradient(150deg, #fff9ee, #fdebd0); border-color: rgba(214, 160, 80, 0.6); }
.rp-tile.is-ready .rp-tile-ic { background: radial-gradient(circle at 35% 30%, #f7d49a, #d99a45 70%); color: #fff; }
.rp-tile.is-ready .rp-tile-tx span { color: #a2702a; }
.rp-tile.is-build .rp-tile-tx span { color: var(--accent); }
.rp-tile-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%;
  background: #e39a2c; box-shadow: 0 0 0 3px rgba(227, 154, 44, 0.18); }
.rp-tile.is-pending .rp-tile-dot { animation: recap-pulse 1.2s ease-in-out infinite; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Оглавление («Титульный лист»): полка в тон бумаги книги. */
.rp-shelf.is-book { margin: 4px 0 6px; }
.rp-shelf.is-book .rp-tile { background: rgba(255, 252, 244, 0.8); border-color: rgba(176, 138, 74, 0.35); box-shadow: none; }

/* --- 2. Краткий итог под Луной --- */
.today-digest {
  position: relative; z-index: 1; width: calc(100% - 12px); max-width: 380px; margin: 16px auto 0;
  display: grid; gap: 5px; padding: 13px 16px 12px; text-align: left; cursor: pointer;
  border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.75); font-family: var(--font-ui); color: var(--fg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 30px -18px rgba(31, 45, 61, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.15s var(--ease);
}
.today-digest:active { transform: scale(0.985); }
.today-digest-k { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: color-mix(in srgb, var(--fg) 52%, transparent); }
.today-digest-ic { display: grid; place-items: center; width: 18px; height: 18px; color: var(--gold-ink); }
.today-digest-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.today-digest-ic svg circle { fill: currentColor; stroke: none; }
.today-digest-ic svg circle[r="4.2"] { fill: none; stroke: currentColor; }
.today-digest-tx { font-family: var(--font-serif); font-size: 16px; line-height: 1.36; letter-spacing: -0.1px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.today-digest-q { font-size: 12.5px; font-style: italic; color: color-mix(in srgb, var(--fg) 62%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-digest-more { font-size: 12px; font-weight: 700; color: var(--gold-ink); }

/* --- Сезонный срез (квартал) на обложке (today.js: todayQuarterChip, ВК 24.10.2026) ---
   Сосед краткого итога под Луной, но тише: золотая рамка вместо белой, меньше текста. */
.today-quarter {
  position: relative; z-index: 1; width: calc(100% - 12px); max-width: 380px; margin: 10px auto 0;
  display: flex; align-items: center; gap: 11px; padding: 11px 14px; text-align: left; cursor: pointer;
  border-radius: 18px; border: 1px solid rgba(233, 194, 122, 0.5); font-family: var(--font-ui); color: var(--fg);
  background: linear-gradient(160deg, rgba(255, 250, 240, 0.6), rgba(255, 250, 240, 0.3));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 12px 26px -18px rgba(80, 60, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.15s var(--ease);
}
.today-quarter:active { transform: scale(0.985); }
.today-quarter[disabled] { cursor: default; }
.today-quarter-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; color: var(--gold-ink); }
.today-quarter-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.today-quarter-ic i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7;
  animation: today-quarter-pulse 1.2s ease-in-out infinite; }
.today-quarter-ic i + i { margin-left: 4px; animation-delay: 0.2s; }
.today-quarter-ic i + i + i { animation-delay: 0.4s; }
@keyframes today-quarter-pulse { 50% { opacity: 0.25; transform: translateY(-2px); } }
.today-quarter-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.today-quarter-tx b { font-family: var(--font-serif); font-weight: 500; font-size: 15px; letter-spacing: -0.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-quarter-tx span { font-size: 12px; color: color-mix(in srgb, var(--fg) 62%, transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.today-quarter .obs-chev { color: var(--gold-ink); }
/* С итогом под Луной небо длиннее: растворяем только самый низ, иначе цитата уходит в туман. */
.today-sky:has(.today-digest) { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 44px), transparent 100%); }
.today-body > .today-digest { width: 100%; max-width: none; margin: 0; background: var(--card); border-color: var(--border); box-shadow: var(--shadow); }

/* --- 3. «Твоя неделя» → «Итоги» --- */
.today-week-top { gap: 8px; }
.today-week-mode { display: inline-flex; padding: 2px; margin-right: auto; border-radius: 100px;
  background: color-mix(in srgb, var(--fg) 6%, transparent); }
.today-week-mode button { border: 0; background: none; padding: 4px 10px; border-radius: 100px; cursor: pointer;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; color: var(--muted); transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.today-week-mode button.on { background: var(--card); color: var(--fg); box-shadow: 0 2px 8px -3px rgba(31, 45, 61, 0.25); }
.today-reps { display: none; }
.today-week.is-reports .today-reps { display: grid; gap: 8px; }
.today-week.is-reports .today-week-pick, .today-week.is-reports .today-week-bars, .today-week.is-reports .today-week-days,
.today-week.is-reports .today-week-count, .today-week.is-reports .today-week-empty { display: none !important; }
.today-rep {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%;
  padding: 10px 10px 10px 8px; border-radius: 16px; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 70%, transparent);
  text-align: left; cursor: pointer; font-family: var(--font-ui); color: var(--fg); transition: transform 0.15s var(--ease);
}
.today-rep:active { transform: scale(0.985); }
.today-rep-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--gold-ink);
  background: radial-gradient(circle at 35% 30%, #fffaf0, #f6e6c8); }
.today-rep-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.today-rep-ic svg circle { fill: currentColor; stroke: none; }
.today-rep-ic svg circle[r="4.2"] { fill: none; stroke: currentColor; }
.today-rep.is-ready .today-rep-ic { color: #fff; background: radial-gradient(circle at 35% 30%, #f7d49a, #d99a45 70%); }
.today-rep-main { display: grid; gap: 2px; min-width: 0; }
.today-rep-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.today-rep-top b { font-size: 13px; }
.today-rep-top span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.today-rep.is-build .today-rep-top span { color: var(--accent); font-weight: 600; }
.today-rep-tx { font-size: 12.5px; line-height: 1.4; color: color-mix(in srgb, var(--fg) 78%, transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.today-rep-prev { font-size: 10.5px; color: var(--muted); }
.today-rep .obs-chev { color: var(--muted); }

/* --- 4. Экран «Итоги» --- */
.rp-screen { padding-bottom: 120px; }
.rp-head { margin: 4px 2px 16px; }
.rp-kicker { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #b9812f; }
.rp-h1 { margin: 4px 0 6px; font-family: var(--font-serif); font-weight: 500; font-size: 38px; letter-spacing: -0.8px; color: #2b2140; }
.rp-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 34ch; }
.rp-seg { position: sticky; top: 8px; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
  border-radius: 100px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(233, 194, 122, 0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 24px -18px rgba(180, 120, 60, 0.6); }
.rp-seg-b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px;
  border: 0; border-radius: 100px; background: none; cursor: pointer; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: #8a7f9e;
  transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.rp-seg-ic { display: grid; place-items: center; width: 16px; height: 16px; }
.rp-seg-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.rp-seg-ic svg circle { fill: currentColor; stroke: none; }
.rp-seg-ic svg circle[r="4.2"] { fill: none; stroke: currentColor; }
.rp-seg-b.on { color: #fff; background: radial-gradient(circle at 30% 20%, #f7d49a, #d99a45 60%, #b8762b); box-shadow: 0 8px 16px -8px rgba(184, 118, 43, 0.7); }
.rp-seg-b.is-ready:not(.on)::after, .rp-seg-b.is-pending:not(.on)::after { content: ""; position: absolute; top: 7px; right: 14%; width: 6px; height: 6px; border-radius: 50%; background: #e39a2c; }
.rp-seg-b.is-pending:not(.on)::after { background: var(--accent); animation: recap-pulse 1.2s ease-in-out infinite; }

.rp-paper {
  position: relative; margin-top: 14px; padding: 22px 20px 20px; border-radius: 26px; color: #2b2140; overflow: hidden;
  background: radial-gradient(120% 60% at 0% 0%, rgba(255, 214, 160, 0.35), transparent 60%), linear-gradient(170deg, #fffaf2 0%, #fbf3ff 60%, #f1f4ff 100%);
  border: 1px solid rgba(233, 194, 122, 0.55); box-shadow: 0 24px 50px -28px rgba(180, 120, 60, 0.5), 0 6px 18px -12px rgba(91, 141, 239, 0.25);
}
.rp-paper::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(214, 160, 80, 0.3); border-radius: 20px; pointer-events: none; }
.rp-paper.is-week { background: radial-gradient(120% 60% at 100% 0%, rgba(184, 146, 255, 0.22), transparent 60%), linear-gradient(170deg, #fffaf2 0%, #f6f1ff 60%, #eef2ff 100%); }
.rp-paper.is-month { background: radial-gradient(120% 60% at 50% 0%, rgba(91, 141, 239, 0.2), transparent 60%), linear-gradient(170deg, #fbf8ff 0%, #f1f4ff 70%); }
.rp-paper > * { position: relative; }
.rp-loading { display: grid; place-items: center; min-height: 160px; }
.rp-paper-k { margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #b9812f; }
.rp-paper-h { margin: 3px 0 0; font-family: var(--font-serif); font-weight: 500; font-size: 28px; letter-spacing: -0.4px; }
.rp-emo { margin: 8px 0 0; font-size: 13px; color: #6f6585; }
.rp-brief { margin: 16px 0 4px; padding: 2px 0 2px 14px; border-left: 2px solid #e2b062;
  font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.42; color: #3a2d52; }
.rp-layer { margin-top: 18px; }
.rp-layer h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase; color: #a2702a; }
.rp-layer h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(214, 160, 80, 0.45), transparent); }
.rp-layer p { margin: 0 0 10px; font-size: 15px; line-height: 1.62; color: #2f2840; text-wrap: pretty; }
.rp-layer p:last-child { margin-bottom: 0; }
.rp-layer b { font-weight: 700; color: #1f1733; background: linear-gradient(transparent 62%, rgba(246, 205, 130, 0.55) 62%); }
.rp-layer.is-advice p { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.52; }
.rp-layer.is-dreams { padding: 14px 15px; border-radius: 18px; background: linear-gradient(160deg, #2a2066, #17123a); }
.rp-layer.is-dreams h3 { color: #f1d69c; }
.rp-layer.is-dreams h3::after { background: linear-gradient(90deg, rgba(241, 214, 156, 0.45), transparent); }
.rp-layer.is-dreams p { color: #ece6ff; }
.rp-q { margin-top: 20px; padding: 16px; border-radius: 20px; text-align: center;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, #fff), color-mix(in srgb, var(--accent) 5%, #fff));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.rp-q p { margin: 0 0 12px; font-family: var(--font-serif); font-size: 18px; line-height: 1.38; color: #24305a; text-wrap: balance; }
.rp-answer { width: auto; padding: 12px 22px; font-size: 14.5px; }
.rp-build { margin-top: 16px; }
.rp-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; color: #7a6a4a; background: rgba(246, 205, 130, 0.22); }
.rp-note + .rp-build { margin: 0 0 16px; }
.rp-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 4px 6px; text-align: center; }
.rp-empty-ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; color: #c98a2e;
  background: radial-gradient(circle at 35% 30%, #fffaf0, #f6e3c0); box-shadow: 0 0 0 8px rgba(246, 205, 130, 0.18), 0 0 40px rgba(246, 205, 130, 0.5); }
.rp-empty-ic svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.rp-empty-ic svg circle { fill: currentColor; stroke: none; }
.rp-empty-ic svg circle[r="4.2"] { fill: none; stroke: currentColor; }
.rp-empty h2 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 24px; }
.rp-empty h2 span { color: #a2702a; font-size: 18px; }
.rp-empty p { margin: 0; font-size: 14px; line-height: 1.5; color: #6f6585; max-width: 30ch; }
.rp-empty .rp-need { font-size: 12.5px; color: var(--muted); }
.rp-empty .rp-build { width: auto; padding: 14px 24px; }
.rp-pending { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px; border-radius: 18px; text-align: left;
  background: color-mix(in srgb, var(--accent) 8%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); }
.rp-pending p { margin: 0; display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); }
.rp-pending b { font-size: 14px; color: var(--fg); }
.rp-orbit { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  animation: rp-spin 3.2s linear infinite; }
.rp-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.rp-orbit i:nth-child(1) { top: -4px; left: 14px; }
.rp-orbit i:nth-child(2) { bottom: 2px; left: 1px; background: #e39a2c; }
.rp-orbit i:nth-child(3) { bottom: 2px; right: 1px; background: #b892ff; }
@keyframes rp-spin { to { transform: rotate(360deg); } }
.rp-arch { margin-top: 26px; }
.rp-arch[hidden] { display: none; }
.rp-arch-h { margin: 0 4px 10px; font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.rp-arch-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; margin-bottom: 8px;
  padding: 12px 14px 12px 12px; border-radius: 18px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow);
  text-align: left; cursor: pointer; font-family: var(--font-ui); color: var(--fg); }
.rp-arch-row:active { transform: scale(0.985); }
.rp-arch-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--gold-ink); background: radial-gradient(circle at 35% 30%, #fffaf0, #f6e6c8); }
.rp-arch-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.rp-arch-ic svg circle { fill: currentColor; stroke: none; }
.rp-arch-ic svg circle[r="4.2"] { fill: none; stroke: currentColor; }
.rp-arch-tx { display: grid; gap: 3px; min-width: 0; }
.rp-arch-tx b { font-size: 13.5px; }
.rp-arch-tx span { font-size: 12.5px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Сторис: итог недели — сумерки с золотом. */
.recap-stage.is-report { color: #f6f1ff; background: radial-gradient(ellipse at 50% 0%, rgba(241, 214, 156, 0.35), transparent 55%), linear-gradient(175deg, #3a2f7a, #17123a 75%); }
.recap-compass { width: 64px; height: 64px; border-radius: 50%; background:
  radial-gradient(circle, #fff 0 10%, transparent 11%), conic-gradient(from 0deg, transparent 0 40deg, rgba(241, 214, 156, 0.9) 45deg, transparent 50deg 130deg, rgba(241, 214, 156, 0.9) 135deg, transparent 140deg 220deg, rgba(241, 214, 156, 0.9) 225deg, transparent 230deg 310deg, rgba(241, 214, 156, 0.9) 315deg, transparent 320deg),
  radial-gradient(circle, rgba(241, 214, 156, 0.35), rgba(241, 214, 156, 0) 70%);
  box-shadow: 0 0 50px 10px rgba(241, 214, 156, 0.25); animation: rp-spin 24s linear infinite; }
.recap-card .recap-report { font-family: var(--font-serif); font-size: 21px; line-height: 1.42; opacity: 1; text-wrap: balance; }
.recap-card .recap-report-q { font-size: 14px; font-style: italic; opacity: 0.75; }

@media (prefers-reduced-motion: reduce) {
  .rp-tile, .rp-orbit, .recap-compass { animation: none !important; }
}
.obs-you:active { transform: none; }
.recap-stage.is-report p { color: inherit; }

/* ВК (18.10.2026): подписка за голоса (views.js: drawVkSubscription) */
.vkp-status.is-active { border-color: rgba(214, 160, 80, 0.55); background: linear-gradient(160deg, #fffaf0, #fdf0da); }
.vkp-actions { display: grid; gap: 10px; }
.vkp-plan {
  position: relative; padding: 18px 18px 16px; border-radius: 24px; background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow); display: grid; gap: 8px;
}
.vkp-plan.is-best { border-color: rgba(214, 160, 80, 0.6);
  background: radial-gradient(120% 70% at 0% 0%, rgba(255, 214, 160, 0.35), transparent 60%), linear-gradient(160deg, #fffaf2, #f6f1ff); }
.vkp-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vkp-plan-top b { font-family: var(--font-serif); font-weight: 500; font-size: 20px; }
.vkp-trial { flex: none; padding: 4px 9px; border-radius: 100px; font-size: 11px; font-weight: 700; color: #8a5a14; background: rgba(246, 205, 130, 0.4); }
.vkp-plan-sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.vkp-price { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 4px; }
.vkp-price b { font-family: var(--font-serif); font-weight: 500; font-size: 28px; color: #2b2140; }
.vkp-price span { font-size: 13px; color: var(--muted); }
.vkp-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); text-align: center; }

/* ===================== ВК: правки владельца 19.10.2026 ===================== */

/* Номер телефона доверия не рвётся на «8-» и «800…». */
.nowrap { white-space: nowrap; }

/* --- Пройденный тест на вводном экране: итог и «Сбросить результат» --- */
.intro-done {
  display: inline-flex; flex-direction: column; gap: 2px; margin: -10px auto 20px; padding: 10px 18px;
  border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.intro-done-k { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.intro-done b { font-family: var(--font-serif); font-size: 19px; font-weight: 600; color: color-mix(in srgb, var(--accent) 70%, var(--fg)); }
.intro-reset, .hub-reset { margin-top: 10px; font-size: 14px; font-weight: 600; padding: 12px 20px; color: var(--muted); }
.hub-reset { margin: 22px auto 0; display: block; width: auto; min-width: 220px; }
.intro-reset.is-armed, .hub-reset.is-armed { color: var(--destructive); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--destructive) 55%, transparent); }

/* --- Итог теста: витрина сверху --- */
.result { padding-top: 4px; }
.result-hero {
  position: relative; margin: 0 auto 18px; max-width: 420px; padding: 18px 14px 18px; border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 22px 46px -24px color-mix(in srgb, var(--accent) 75%, transparent);
  animation: result-rise 0.6s var(--ease) both;
}
.result-hero::before {
  content: ""; position: absolute; left: 50%; top: 92px; width: 210px; height: 210px; margin-left: -105px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 68%);
  filter: blur(6px); pointer-events: none; animation: result-glow 3.6s var(--ease) infinite alternate;
}
.result-hero > * { position: relative; }
@keyframes result-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes result-glow { from { opacity: 0.55; transform: scale(0.94); } to { opacity: 1; transform: scale(1.06); } }
.result-kicker {
  margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 72%, var(--fg));
}
.result-hero .result-viz { margin: 0 auto 6px; min-height: 236px; }
.result-hero .viz-svg { width: 300px; height: 250px; }
.result.is-gauge .result-hero .viz-svg { height: 200px; }
.result-hero h2 {
  margin: 4px 0 0; font-family: var(--font-serif); font-size: 34px; line-height: 1.08; font-weight: 600; letter-spacing: -0.6px;
  background: linear-gradient(180deg, var(--fg), color-mix(in srgb, var(--accent) 75%, var(--fg)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.result-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 0; }
.result-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 100px; font-size: 13px; color: var(--fg);
  background: color-mix(in srgb, var(--card) 90%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
  animation: result-rise 0.5s var(--ease) both; animation-delay: 0.35s;
}
.result-chip b { font-weight: 800; color: color-mix(in srgb, var(--accent) 80%, var(--fg)); }
.result-chip.is-lead { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -10px var(--accent); }
.result-chip.is-lead b { color: #fff; }
.result-summary { font-size: 16.5px; line-height: 1.5; margin-bottom: 10px; }
.result-lens {
  max-width: 380px; margin: 0 auto 16px; font-size: 13px; line-height: 1.45; color: var(--muted);
}
.result-lens span {
  display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 100px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 75%, var(--fg));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.result-trail { margin: 4px auto 16px; }
.result-trail-dots { display: flex; justify-content: center; gap: 5px; }
.result-trail-dots i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 30%, transparent); }
.result-trail-dots i.is-done { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.result-trail-dots i.is-now { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); transform: scale(1.15); }
.result-trail p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.result-trail b { color: var(--fg); }
.result-actions { display: grid; gap: 10px; }
.result-next-k {
  display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 100px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 255, 255, 0.22); vertical-align: 2px;
}
/* Крупнее подписи осей и точки на витрине. */
.result-hero .radar-label, .result-hero .quad-label { font-size: 11.5px; font-weight: 600; }
.result-hero .radar-shape { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke-width: 3; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--accent) 45%, transparent)); }
.result-hero .quad-tile { fill: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.result-hero .quad-dot { r: 11; filter: drop-shadow(0 0 10px var(--accent)); }
.result-hero .gauge-val { font-size: 38px; font-weight: 800; }
.result-hero .bars { width: min(320px, 100%); }
.result-hero .bar-track { height: 14px; }

/* --- Оглавление (обложка «Титульный лист»): главы без подписей под названием --- */
.bk-ch { align-items: center; padding: 8px 2px; }
.bk-ch .bk-sub, .bk-ch .bk-now, .bk-ch.is-now .bk-now { display: none; }
.bk-ch .bk-vig { grid-row: 1; }
.bk-ch .bk-nm, .bk-ch .bk-num { margin-top: 0; }
.bk-ch .bk-dots { margin-top: 0; align-self: center; transform: translateY(7px); }

/* --- «На полях»: ссылки стали кнопками — плитка, значок в кружке, стрелка --- */
.bk-mg { grid-template-columns: 1fr 1fr; justify-content: stretch; gap: 8px; margin-top: 6px; }
.bk-mg button {
  position: relative; min-height: 52px; padding: 8px 22px 8px 8px; gap: 9px; border-radius: 14px; white-space: normal;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(160, 138, 99, 0.28), 0 4px 12px -8px rgba(90, 60, 20, 0.45);
  font: 600 13.5px/1.2 var(--font-ui); color: #3b2f1f;
  transition: transform 0.15s var(--ease), background 0.2s, box-shadow 0.2s;
}
.bk-mg button::after {
  content: "›"; position: absolute; right: 9px; top: 50%; transform: translateY(-52%);
  font: 400 18px/1 var(--font-ui); color: #b29c76;
}
.bk-mg button:active { opacity: 1; transform: scale(0.97); background: rgba(255, 255, 255, 0.9); box-shadow: inset 0 0 0 1.5px var(--c); }
.bk-mg svg {
  width: 32px; height: 32px; padding: 6px; border-radius: 50%; box-sizing: border-box;
  background: color-mix(in srgb, var(--c) 14%, #fff);
}

/* --- Полка томов Летописи: подпись корешка не выходит за книгу --- */
.cx-spine { width: 32px; }
.cx-spine span { top: 9px; max-height: calc(100% - 34px); overflow: hidden; line-height: 1; white-space: nowrap; }
.cx-shelf { min-height: 146px; }
/* Выбран том: список глав и «Ты остановился здесь» прячутся (chronicle.js: chronicleSelectVolume) —
   [hidden] перебивался display у карточек. «Открыть главу» — отдельной строкой с воздухом. */
.chronicle-stack-inner[hidden], .chronicle-resume[hidden], .cx-leafhost[hidden] { display: none !important; }
.cx-leafpage { gap: 18px; padding-bottom: 28px; }
.cx-leafpage .chapter-open { margin-top: 0; }

/* --- Презентация раздела внутри приложения (home.js: guideOpenDeck) --- */
.deck-overlay {
  position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: var(--bg, #eef4ff);
  opacity: 0; transform: translateY(24px); transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
}
.deck-overlay.is-in { opacity: 1; transform: none; }
.deck-overlay.is-out { opacity: 0; transform: translateY(24px); }
.deck-bar {
  flex: none; display: flex; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 1px 0 var(--border);
}
.deck-close {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 0; border-radius: 100px; cursor: pointer;
  font: 700 14px/1 var(--font-ui); color: var(--fg); background: color-mix(in srgb, var(--accent) 12%, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.deck-close span { font-size: 20px; line-height: 0.6; }
.deck-frame { flex: 1; width: 100%; border: 0; background: #fff; opacity: 0; transition: opacity 0.3s; }
.deck-overlay.is-ready .deck-frame { opacity: 1; }
.deck-loading { position: absolute; inset: 60px 0 0; display: grid; place-items: center; pointer-events: none; }
.deck-overlay.is-ready .deck-loading { display: none; }
html.deck-open, html.deck-open body { overflow: hidden; }
html.deck-open .tabbar { visibility: hidden; }
.intro-done[hidden], .result-chips[hidden], .result-lens[hidden], .result-trail[hidden], .intro-reset[hidden], .hub-reset[hidden], [data-result-card][hidden] { display: none !important; }
.viz-svg.viz-radar { width: min(360px, 100%); height: auto; aspect-ratio: 392 / 248; }
.result-hero .viz-svg.viz-radar { width: 100%; max-width: 380px; height: auto; }
.result-hero .radar-label { font-size: 11px; }
.result.is-radar .result-hero .result-viz { min-height: 0; }
.result-hero h2.is-long { font-size: 26px; letter-spacing: -0.3px; overflow-wrap: anywhere; }
.result-hero .radar-grid, .result-hero .radar-axis { stroke: color-mix(in srgb, var(--accent) 24%, transparent); }
.result-hero .quad-axis { stroke: color-mix(in srgb, var(--accent) 28%, transparent); }
.result-hero .gauge-track { stroke: color-mix(in srgb, var(--accent) 14%, var(--border)); }
.result.is-bars .result-hero .result-viz { min-height: 0; padding: 22px 4px 12px; }
.result-hero .bar-fill { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.result-hero .bar-row .bar-name { font-weight: 600; color: var(--fg); }

/* --- Обложка (19.10.2026): «Главная» слева от пера вместо двери «Обсерватория» и плашки итогов --- */
.today-door[hidden], .today-recap { display: none !important; }
.tabbar.is-solo [data-tab="home"] { opacity: 1; pointer-events: auto; transform: none; }
.tabbar.is-solo [data-tab="home"] .tab-ic { animation: solo-home-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; }
@keyframes solo-home-in { from { transform: translateX(60px) scale(0.4); opacity: 0; } }
.app.solo-bar { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .tabbar.is-solo [data-tab="home"] .tab-ic { animation: none; } }

/* --- Меню (19.10.2026): нарядная плитка «Эмоции» — заря настроений --- */
.obs-portal[data-home-section="emotions"] {
  background:
    radial-gradient(60% 55% at 85% 8%, rgba(255, 214, 160, 0.75), transparent 70%),
    radial-gradient(55% 50% at 10% 15%, rgba(120, 214, 170, 0.6), transparent 70%),
    radial-gradient(70% 60% at 50% 110%, rgba(150, 165, 255, 0.45), transparent 70%),
    linear-gradient(165deg, #f2fff8 0%, #fff6ea 55%, #f1efff 100%);
  border: 1px solid rgba(63, 191, 127, 0.35);
  box-shadow: 0 18px 34px -20px rgba(47, 165, 110, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.obs-portal[data-home-section="emotions"] > .obs-rainbow {
  position: absolute; right: -14px; top: 8px; width: 118px; height: 68px; z-index: 0; pointer-events: none; overflow: visible; opacity: 0.85;
}
.obs-rainbow .rb { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: obs-rb-draw 1.4s var(--ease) both; }
.obs-rainbow .r1 { stroke: rgba(240, 160, 110, 0.75); animation-delay: 0.5s; }
.obs-rainbow .r2 { stroke: rgba(120, 205, 155, 0.75); animation-delay: 0.7s; }
.obs-rainbow .r3 { stroke: rgba(140, 160, 245, 0.7); animation-delay: 0.9s; }
@keyframes obs-rb-draw { to { stroke-dashoffset: 0; } }
.obs-portal[data-home-section="emotions"] > .obs-drops { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.obs-drops i {
  position: absolute; bottom: -10px; width: 7px; height: 7px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(110, 200, 160, 0.8)); box-shadow: 0 0 6px rgba(110, 200, 160, 0.6);
  animation: obs-drop-up 2.6s var(--ease) both;
}
.obs-drops i:nth-child(1) { left: 22%; animation-delay: 1.2s; }
.obs-drops i:nth-child(2) { left: 48%; width: 5px; height: 5px; animation-delay: 1.5s; background: radial-gradient(circle at 35% 30%, #fff, rgba(245, 180, 120, 0.85)); box-shadow: 0 0 6px rgba(245, 180, 120, 0.6); }
.obs-drops i:nth-child(3) { left: 70%; animation-delay: 1.8s; background: radial-gradient(circle at 35% 30%, #fff, rgba(150, 165, 245, 0.85)); box-shadow: 0 0 6px rgba(150, 165, 245, 0.6); }
.obs-drops i:nth-child(4) { left: 86%; width: 4px; height: 4px; animation-delay: 2.1s; }
@keyframes obs-drop-up { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px) scale(1.1); } }
.obs-portal[data-home-section="emotions"] .obs-portal-em {
  background: radial-gradient(circle at 35% 30%, #fff, #f3fff9 70%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px rgba(120, 205, 155, 0.35), 0 10px 20px -8px rgba(47, 165, 110, 0.6);
}
.obs-portal[data-home-section="emotions"] .obs-portal-tx b { color: #1f5a3e; }
.obs-portal[data-home-section="emotions"] .obs-portal-num em { color: #2a9563; font-style: italic; }
.obs-portal.is-weather[data-home-section="emotions"] { background:
    radial-gradient(60% 55% at 85% 8%, rgba(255, 214, 160, 0.75), transparent 70%),
    radial-gradient(55% 50% at 10% 15%, rgba(120, 214, 170, 0.6), transparent 70%),
    radial-gradient(70% 60% at 50% 110%, rgba(150, 165, 255, 0.45), transparent 70%),
    linear-gradient(165deg, #f2fff8 0%, #fff6ea 55%, #f1efff 100%); }

/* --- Оглавление: виньетки глав по очереди «подмигивают» (home.js: homeTilesPulse) --- */
.bk-ch.is-wink .bk-vig svg { animation: bk-wink 1.1s cubic-bezier(0.34, 1.56, 0.64, 1); }
.bk-ch[data-home-section="achievements"].is-wink .bk-vig svg { transform-origin: 50% 10%; animation: bk-swing 1.4s var(--ease); }
.bk-ch[data-home-section="emotions"].is-wink .bk-vig svg { animation: obs-weather-sway 1.6s var(--ease); }
.bk-ch.is-wink .bk-num { animation: bk-num-glow 1.2s var(--ease); }
@keyframes bk-wink { 0% { transform: none; } 30% { transform: rotate(-10deg) scale(1.15); } 60% { transform: rotate(6deg) scale(0.96); } 100% { transform: none; } }
@keyframes bk-swing { 0% { transform: none; } 25% { transform: rotate(14deg); } 50% { transform: rotate(-9deg); } 75% { transform: rotate(4deg); } 100% { transform: none; } }
@keyframes bk-num-glow { 40% { text-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); transform: scale(1.12); } }
.bk-ch[data-home-section="emotions"] .bk-vig { border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(120, 214, 170, 0.35), transparent 60%), radial-gradient(circle at 75% 70%, rgba(255, 200, 150, 0.4), transparent 60%); }
@media (prefers-reduced-motion: reduce) {
  .obs-rainbow .rb { animation: none; stroke-dashoffset: 0; }
  .obs-drops { display: none; }
  .bk-ch.is-wink .bk-vig svg, .bk-ch.is-wink .bk-num { animation: none; }
}
.app-build { display: inline-block; margin-top: 10px; font-size: 11px; letter-spacing: 0.04em; opacity: 0.6; }

/* --- Обложка (19.10.2026): часы рассвета и заката под цитатой --- */
.today-horizon b i { font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: color-mix(in srgb, var(--fg) 70%, transparent); margin-left: 3px; }
.today-horizon.is-night path.lit { display: none; }
.today-horizon.is-night b:last-of-type i { color: #e39a5a; }

/* --- Итоги (19.10.2026): вкладки «Итоги · Архив», архив — лента с фильтром --- */
.rp-views { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 12px; padding: 4px; border-radius: 100px;
  background: color-mix(in srgb, var(--card) 80%, transparent); box-shadow: inset 0 0 0 1px rgba(214, 160, 80, 0.28); }
.rp-views[hidden], .rp-read[hidden] { display: none !important; }
.rp-views button { border: 0; border-radius: 100px; padding: 10px 8px; background: none; cursor: pointer;
  font: 700 14px/1 var(--font-ui); color: var(--muted); transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.rp-views button.on { color: #5a3a06; background: linear-gradient(180deg, #fff9ec, #f6e3bd); box-shadow: 0 6px 14px -8px rgba(184, 118, 43, 0.6), inset 0 0 0 1px rgba(214, 160, 80, 0.45); }
.rp-views button i { font-style: normal; display: inline-block; min-width: 20px; margin-left: 4px; padding: 2px 6px; border-radius: 100px; font-size: 11px;
  background: rgba(214, 160, 80, 0.18); color: #9a6a26; }
.rp-arch { margin-top: 0; }
.rp-arch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 2px 14px; }
.rp-arch-chip { border: 0; border-radius: 100px; padding: 7px 12px; cursor: pointer; font: 600 13px/1 var(--font-ui); color: var(--fg);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.rp-arch-chip i { font-style: normal; color: var(--muted); font-weight: 700; margin-left: 2px; }
.rp-arch-chip.on { color: #fff; background: radial-gradient(circle at 30% 20%, #f7d49a, #d99a45 60%, #b8762b); box-shadow: 0 8px 16px -8px rgba(184, 118, 43, 0.7); }
.rp-arch-chip.on i { color: rgba(255, 255, 255, 0.8); }
.rp-arch-list { position: relative; padding-left: 18px; }
.rp-arch-list::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(214, 160, 80, 0.55), rgba(184, 146, 255, 0.35), rgba(91, 141, 239, 0.2)); }
.rp-arch-row { position: relative; grid-template-columns: 34px minmax(0, 1fr) auto; margin-bottom: 10px; animation: obs-num-rise 0.45s var(--ease) both; }
.rp-arch-row::before { content: ""; position: absolute; left: -17px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: #f3c46e; box-shadow: 0 0 0 3px var(--bg, #eef4ff); }
.rp-arch-row.is-week::before { background: #b892ff; }
.rp-arch-row.is-month::before { background: #5b8def; }
.rp-arch-row.is-week .rp-arch-ic { color: #7a55d6; background: radial-gradient(circle at 35% 30%, #fbf8ff, #e6dcff); }
.rp-arch-row.is-month .rp-arch-ic { color: #3f6fd6; background: radial-gradient(circle at 35% 30%, #f6f9ff, #dbe6ff); }
.rp-arch-ic { width: 34px; height: 34px; }
.rp-arch-k { font-size: 10px !important; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #b9812f !important; -webkit-line-clamp: 1 !important; }
.rp-arch-row.is-week .rp-arch-k { color: #7a55d6 !important; }
.rp-arch-row.is-month .rp-arch-k { color: #3f6fd6 !important; }
.rp-arch-tx b { font-family: var(--font-serif); font-weight: 500; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .rp-arch-row { animation: none; } }

/* --- Эмоции (19.10.2026): живое лицо вместо погоды — настроения сменяют друг друга --- */
.has-faces { position: relative; overflow: visible; }
.mood-faces { position: relative; display: block; width: 40px; height: 40px; }
.bk-vig .mood-faces { width: 38px; height: 38px; }
.mood-face { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0;
  filter: drop-shadow(0 4px 6px rgba(60, 40, 20, 0.18));
  animation: mood-cycle 12.5s cubic-bezier(0.34, 1.4, 0.64, 1) infinite; animation-delay: calc(var(--i) * 2.5s); }
@keyframes mood-cycle {
  0% { opacity: 0; transform: scale(0.55) rotate(-14deg); }
  4% { opacity: 1; transform: scale(1.1) rotate(4deg); }
  7% { transform: scale(1) rotate(0); }
  17% { opacity: 1; transform: scale(1); }
  20% { opacity: 0; transform: scale(0.7) rotate(10deg); }
  100% { opacity: 0; }
}
.mood-feat { transform-box: view-box; transform-origin: 50% 50%; }
.mood-face .mood-feat { animation: mood-blink 12.5s ease-in-out infinite; animation-delay: calc(var(--i) * 2.5s); }
@keyframes mood-blink { 0%, 11% { transform: none; } 12% { transform: scaleY(0.9) translateY(1px); } 13%, 100% { transform: none; } }
.obs-portal[data-home-section="emotions"] .obs-portal-em.has-faces svg { animation: none; }
.obs-portal[data-home-section="emotions"] .obs-portal-em.has-faces .mood-face { animation: mood-cycle 12.5s cubic-bezier(0.34, 1.4, 0.64, 1) infinite; animation-delay: calc(var(--i) * 2.5s); }
.bk-ch[data-home-section="emotions"].is-wink .bk-vig .mood-face { animation: mood-cycle 12.5s cubic-bezier(0.34, 1.4, 0.64, 1) infinite; animation-delay: calc(var(--i) * 2.5s); }
@media (prefers-reduced-motion: reduce) { .mood-face { animation: none !important; } .mood-face:first-child { opacity: 1; } }

/* --- Личная карта (19.10.2026): астролябия живее --- */
.astro-spin { transform-box: view-box; transform-origin: 50% 50%; animation: astro-spin 60s linear infinite; }
@keyframes astro-spin { to { transform: rotate(360deg); } }
.astro-glow { transform-box: view-box; transform-origin: 50% 50%; animation: astro-breathe 4.5s ease-in-out infinite; }
@keyframes astro-breathe { 0%, 100% { opacity: 0.7; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } }
.astro-star.is-lit { transform-box: fill-box; transform-origin: center; animation: astro-twinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 0.45s + 1.6s); }
@keyframes astro-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(1.55); opacity: 1; filter: drop-shadow(0 0 5px rgba(243, 196, 110, 1)); } 60% { transform: scale(0.85); opacity: 0.75; } }
.obs-you-num, .bk-you .obs-you-num { animation: obs-num-rise 0.7s var(--ease) 1.4s both, astro-num-glow 4.5s ease-in-out 2.2s infinite; }
@keyframes astro-num-glow { 0%, 100% { text-shadow: none; } 50% { text-shadow: 0 0 10px rgba(255, 220, 150, 0.95); } }
@media (prefers-reduced-motion: reduce) { .astro-spin, .astro-glow, .astro-star.is-lit, .obs-you-num { animation: none !important; } }

/* ============================================================
   ВК (20.10.2026, владелец) — обложка дня, вторая редакция.
   Небо во всю ширину окна (на компьютере бока больше не светлые
   полосы), дата/привет в две строки, дуга-«экватор» со светилом,
   сезонные частицы на всю ширину, зимой — морозное приложение.
   ============================================================ */
.today-sky {
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 18px); padding-right: calc(50vw - 50% + 18px);
}
@media (min-width: 540px) {
  .today-sky {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 96px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 96px), transparent 100%);
  }
}
.today-sky .today-stars { opacity: 0; transition: opacity 0.8s var(--ease); }
.today-sky[data-tod="night"] .today-stars, .today-sky[data-tod="dusk"] .today-stars { opacity: 1; }

.today-sky .today-top { align-items: flex-start; padding-top: 2px; }
.today-sky .today-date { text-transform: none; letter-spacing: 0; font-weight: 400; }
.today-sky .today-date b { display: block; font-family: var(--font-serif); font-size: 23px; font-weight: 500; line-height: 1.1; letter-spacing: -0.3px; color: inherit; }
.today-sky .today-date span { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; }
.today-sky .today-date { color: color-mix(in srgb, var(--fg) 86%, transparent); }
.today-sky .today-hi { text-align: right; max-width: 58%; }
.today-sky .today-hi span { display: block; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; }
.today-sky .today-hi b { display: block; margin-top: 4px; font-family: var(--font-serif); font-size: 23px; font-weight: 500; line-height: 1.1; letter-spacing: -0.3px; overflow-wrap: anywhere; }

/* Дуга: 400×160 в координатах SVG, основание — y=152 (95%). */
.today-orbit {
  position: relative; z-index: 1; flex: none;
  width: min(540px, calc(100vw - 36px)); aspect-ratio: 400 / 160; margin-top: 40px;
}
.today-orbit-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.today-orbit-arc path { fill: none; vector-effect: non-scaling-stroke; }
.today-orbit-arc .track { stroke: color-mix(in srgb, var(--fg) 26%, transparent); stroke-width: 1; stroke-dasharray: 2 6; }
.today-orbit-arc .lit { stroke: #f2b45e; stroke-width: 1.6; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(255, 196, 120, 0.7)); }
.today-sky.is-moon .today-orbit-arc .lit { stroke: #dfe6ff; filter: drop-shadow(0 0 4px rgba(210, 222, 255, 0.85)); }
.today-orbit-arc .ground { stroke: color-mix(in srgb, var(--fg) 14%, transparent); stroke-width: 1; }
.today-sky[data-tod="night"] .today-orbit-arc .track, .today-sky[data-tod="dusk"] .today-orbit-arc .track { stroke: rgba(255, 255, 255, 0.4); }
.today-sky[data-tod="night"] .today-orbit-arc .ground { stroke: rgba(255, 255, 255, 0.22); }

.today-orb { position: absolute; width: 0; height: 0; z-index: 2; animation: orb-rise 1.3s var(--ease) 0.15s both; }
@keyframes orb-rise { from { opacity: 0; transform: translateY(26px) scale(0.85); } to { opacity: 1; transform: none; } }
.today-orb .today-moon-wrap { position: absolute; left: 0; top: 0; width: 88px; height: 88px; margin: -44px 0 0 -44px; animation: none; }
.today-orb .today-halo { inset: -30px; }
.today-orb .today-sun {
  position: absolute; left: 0; top: 0; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fffdf0 0, #ffe7a1 28%, #ffc463 62%, #ff9f45 100%);
  box-shadow: 0 0 0 6px rgba(255, 214, 140, 0.18), 0 0 46px 16px rgba(255, 190, 100, 0.42), 0 0 120px 40px rgba(255, 214, 150, 0.28);
  animation: sun-pulse 7s ease-in-out infinite;
}
.today-orb .today-sun i {
  position: absolute; inset: -26px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 130, 0.42) 0 4deg, transparent 4deg 22.5deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 46%, #000 50%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 0 46%, #000 50%, transparent 72%);
  animation: sun-spin 60s linear infinite;
}
.today-sky[data-tod="dawn"] .today-orb .today-sun, .today-sky[data-tod="dusk"] .today-orb .today-sun {
  background: radial-gradient(circle at 38% 34%, #fff4e6 0, #ffc79a 34%, #ff8f62 72%, #e2603f 100%);
  box-shadow: 0 0 0 6px rgba(255, 170, 130, 0.18), 0 0 46px 16px rgba(255, 140, 100, 0.42), 0 0 120px 40px rgba(255, 170, 130, 0.26);
}
@keyframes sun-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes sun-spin { to { transform: rotate(360deg); } }
.today-sky.is-sun .today-orb .today-moon-wrap { display: none; }
.today-sky.is-moon .today-orb .today-sun { display: none; }

.today-orbit-end {
  position: absolute; top: calc(95% + 9px); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 48%, transparent); white-space: nowrap;
}
.today-orbit-end b { margin-left: 4px; color: #d48a2c; letter-spacing: 0.04em; }
.today-orbit-end.is-l { left: 0; }
.today-orbit-end.is-r { right: 0; }
.today-sky[data-tod="night"] .today-orbit-end, .today-sky[data-tod="dusk"] .today-orbit-end { color: rgba(255, 241, 218, 0.62); }
.today-sky[data-tod="night"] .today-orbit-end b { color: #ffd89a; }

.today-sky .today-caption { margin-top: 30px; }

/* ВК (23.10.2026, владелец): сигналы под светилом — строки-кнопки: иконка, короткий текст, стрелка. */
.today-signals { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; max-width: 340px; margin-left: auto; margin-right: auto; }
.today-signal {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 14px; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: color-mix(in srgb, var(--fg) 82%, transparent);
  font-family: var(--font-ui); font-size: 13px; line-height: 1.35;
  transition: background 0.2s var(--ease);
}
.today-signal:active { background: color-mix(in srgb, var(--fg) 14%, transparent); }
.today-signal-ico { flex: none; font-size: 15px; }
.today-signal-tx { flex: 1 1 auto; }
.today-signal-chev { flex: none; opacity: 0.5; }
.today-signal.is-reflection {
  align-items: flex-start; padding: 12px 14px; cursor: default;
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, transparent), color-mix(in srgb, var(--fg) 5%, transparent));
}
.today-signal.is-reflection:active { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 10%, transparent), color-mix(in srgb, var(--fg) 5%, transparent)); }
.today-signal.is-reflection .today-signal-ico { margin-top: 1px; }
.today-signal.is-reflection .today-signal-tx { white-space: normal; overflow-wrap: anywhere; }
.today-sky[data-tod="night"] .today-signal, .today-sky[data-tod="dusk"] .today-signal {
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 246, 232, 0.92);
}
.today-sky[data-tod="night"] .today-signal:active, .today-sky[data-tod="dusk"] .today-signal:active {
  background: rgba(255, 255, 255, 0.2);
}

/* Чек-ин «Как прошла ночь»: лунная стеклянная карточка с ясным выбором. */
.today-night { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; margin: 16px auto 0; box-sizing: border-box; }
/* ВК (24.10.2026, владелец): карточка ночи всегда ночная — глубокий индиго
   с золотой каймой, лунным свечением и звёздным полем, даже под дневным небом. */
.today-night-form {
  position: relative; overflow: hidden; padding: 16px; border: 1px solid rgba(233, 194, 122, 0.28);
  border-radius: 22px; text-align: left; color: rgba(255, 246, 232, 0.94);
  background: linear-gradient(155deg, #2b2358 0%, #3c2f74 55%, #52408a 100%);
  box-shadow: 0 18px 40px -24px rgba(16, 11, 40, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-family: var(--font-ui); font-size: 13px; line-height: 1.35;
}
.today-night-form::before {
  content: ""; position: absolute; width: 190px; height: 190px; right: -95px; top: -115px; pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle, rgba(240, 214, 150, 0.22), transparent 70%);
}
.today-night-form::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 68%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 32% 84%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 56% 12%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 40%, rgba(255, 246, 220, 0.8), transparent 60%);
}
.today-night-ai { position: relative; margin: -6px 0 12px; color: rgba(233, 194, 122, 0.85); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; }
.today-night-kicker { position: relative; margin-bottom: 4px; color: color-mix(in srgb, var(--gold) 80%, var(--fg)); font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.today-night-title { position: relative; font-family: var(--font-serif); font-size: 21px; font-weight: 500; line-height: 1.2; }
.today-night-sub { position: relative; margin: 5px 0 13px; color: color-mix(in srgb, currentColor 65%, transparent); font-size: 11.5px; line-height: 1.4; }
.today-night-scale { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.today-night-q {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 78px;
  padding: 8px 3px; border: 1px solid transparent; border-radius: 14px; cursor: pointer;
  background: rgba(255, 255, 255, 0.09); color: rgba(255, 246, 232, 0.85);
  font-family: var(--font-ui); font-size: 10.5px; line-height: 1.15; -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.today-night-q-ico { font-size: 21px; line-height: 1; filter: saturate(0.85) drop-shadow(0 1px 4px rgba(10, 6, 30, 0.5)); }
.today-night-q-word { font-weight: 700; }
.today-night-q-hint { max-width: 100%; color: color-mix(in srgb, currentColor 62%, transparent); font-size: 9px; line-height: 1.25; text-align: center; }
.today-night-q.on {
  border-color: rgba(233, 194, 122, 0.6); color: #211738;
  background: linear-gradient(180deg, #f6e3b6, #ddb361); box-shadow: 0 6px 15px -9px rgba(124, 83, 20, 0.8);
  transform: translateY(-2px);
}
.today-night-q.on .today-night-q-hint { color: color-mix(in srgb, #211738 68%, transparent); }
.today-night-q:active { transform: scale(0.96); }
.today-night-q:focus-visible, .today-night-save:focus-visible, .today-night-note:focus-visible, .today-night-input input:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.today-night-details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 9px; }
.today-night-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 10.5px; font-weight: 650; color: color-mix(in srgb, currentColor 66%, transparent); }
.today-night-input {
  display: flex; align-items: center; min-height: 42px; padding: 0 10px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px; background: rgba(255, 255, 255, 0.08);
}
.today-night-input input { width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; color: #fff6e8; font: 600 15px var(--font-ui); }
.today-night-input small { flex: none; margin-left: 4px; font-size: 10px; font-weight: 500; opacity: 0.65; }
.today-night-note {
  width: 100%; min-height: 42px; box-sizing: border-box; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
  background: rgba(255, 255, 255, 0.08); color: inherit; outline: none; font-family: var(--font-ui); font-size: 12px;
}
.today-night-note::placeholder, .today-night-input input::placeholder { color: color-mix(in srgb, currentColor 45%, transparent); }
.today-night-error { margin-top: 8px; color: #ffd0bd; font-size: 11.5px; }
.today-night-error[hidden] { display: none !important; }
.today-night-save {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin-top: 11px; padding: 10px 14px;
  border: 0; border-radius: 13px; cursor: pointer; color: #2a2140; background: linear-gradient(135deg, #f2d69b, #ddb361);
  box-shadow: 0 10px 20px -12px rgba(20, 12, 44, 0.9); font: 700 12.5px var(--font-ui); -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.today-night-save:active { transform: scale(0.985); }
/* ВК (25.10.2026, владелец): сохранённая ночь — маленькая лунная пилюля
   с одной фразой, без второй большой карточки под основной формой. */
.today-night-done {
  position: relative; overflow: hidden; display: flex; align-items: center; align-self: center; gap: 8px;
  width: max-content; max-width: 100%; box-sizing: border-box; padding: 8px 13px;
  border: 1px solid rgba(233, 194, 122, 0.25); border-radius: 999px; text-align: left;
  background: linear-gradient(150deg, rgba(43, 35, 88, 0.94), rgba(76, 59, 128, 0.94));
  color: rgba(255, 246, 232, 0.95); font-family: var(--font-ui); font-size: 12px; line-height: 1.25;
  box-shadow: 0 10px 24px -20px rgba(16, 11, 40, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: todayNightIn 0.35s var(--ease) both;
}
@keyframes todayNightIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.today-night-ico { flex: none; font-size: 18px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(240, 214, 150, 0.35)); }
.today-night-tx { min-width: 0; white-space: nowrap; }
.today-night-wait { opacity: 0.7; }
.today-night-crisis {
  padding: 10px 12px; border-radius: 14px; text-align: left;
  background: linear-gradient(180deg, rgba(217, 169, 85, 0.25), rgba(217, 169, 85, 0.12));
  color: inherit; font-family: var(--font-ui); font-size: 12px; line-height: 1.4;
}

/* ВК (24.10.2026, владелец): приветствие новичка — бумажная карточка с золотой кнопкой. */
.today-rookie { margin-top: 14px; max-width: 340px; margin-left: auto; margin-right: auto; }
.today-rookie-card {
  padding: 14px; border-radius: 16px; text-align: left;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: color-mix(in srgb, var(--fg) 82%, transparent);
  font-family: var(--font-ui); font-size: 13px; line-height: 1.4;
}
.today-sky[data-tod="night"] .today-rookie-card, .today-sky[data-tod="dusk"] .today-rookie-card {
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 246, 232, 0.92);
}
.today-rookie-title { font-weight: 600; margin-bottom: 6px; }
.today-rookie-body { opacity: 0.85; margin-bottom: 12px; }
.today-rookie-go {
  display: block; width: 100%; padding: 11px 12px; border: 0; border-radius: 13px; cursor: pointer;
  background: linear-gradient(180deg, #f1d69c, #d9a955); color: #140f2c;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  transition: filter 0.2s var(--ease);
}
.today-rookie-go:active { filter: brightness(1.08); }
.today-phase-moon { display: inline-block; width: 19px; height: 19px; margin-right: 8px; vertical-align: -2px; }
.today-phase-moon svg { display: block; width: 100%; height: 100%; }
.today-sky.is-moon .today-phase-moon { display: none; }
.today-sky[data-tod="night"] .today-phase, .today-sky[data-tod="dusk"] .today-phase { color: #fff4e2; text-shadow: 0 1px 14px rgba(24, 22, 60, 0.45); }
.today-sky[data-tod="night"] .today-focus, .today-sky[data-tod="dusk"] .today-focus { color: rgba(255, 241, 218, 0.72); }
.today-sky[data-tod="night"] .today-quote-kick { color: rgba(255, 241, 218, 0.55); }
.today-sky[data-tod="night"] .today-quote-text { color: rgba(255, 246, 232, 0.94); }
.today-sky[data-tod="night"] .today-quote-src { color: rgba(255, 241, 218, 0.6); }
.today-sky[data-tod="night"]::before { background: linear-gradient(180deg, rgba(14, 18, 58, 0.9), rgba(30, 34, 96, 0.76) 60%, rgba(44, 50, 118, 0.6) 100%); }
.today-sky[data-tod="dusk"]::before { background: linear-gradient(180deg, rgba(70, 50, 130, 0.62), rgba(180, 100, 120, 0.42) 60%, rgba(255, 150, 110, 0.3) 100%); }
.today-sky { padding-bottom: 104px; margin-bottom: -76px; }
.today-sky .today-quote { max-width: 520px; }
@media (prefers-reduced-motion: reduce) {
  .today-orb, .today-orb .today-sun, .today-orb .today-sun i { animation: none; }
}

/* Частицы обложки — отдельный слой видимого экрана. Лист уходит на 80 px
   за нижнюю границу монитора и только там начинает новый цикл. */
body > .today-season-particles {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; bottom: auto;
  overflow: hidden; perspective: 600px; pointer-events: none;
}
body > .today-season-particles i { animation-name: today-season-drop; }
body > .today-season-particles.is-summer i { animation-name: today-season-lift; }
@keyframes today-season-drop {
  from { transform: translateY(-60px); }
  to { transform: translateY(calc(100dvh + 80px)); }
}
@keyframes today-season-lift {
  from { transform: translateY(calc(100dvh + 60px)); }
  to { transform: translateY(-80px); }
}
.season-fall i.is-far b { filter: blur(1.4px); }
.season-fall i.is-near { z-index: 1; }
.season-fall.is-autumn b, .season-fall.is-autumn i:nth-child(3n) b { width: 22px; height: 22px; border-radius: 0; background: none; filter: drop-shadow(0 3px 3px rgba(120, 60, 10, 0.18)); }
.season-fall.is-autumn i.is-far b { filter: blur(1.3px); }
.season-fall.is-autumn b::after { display: none; }
.season-fall.is-autumn b svg, .season-fall.is-winter b svg { display: block; width: 100%; height: 100%; }
.season-fall.is-autumn b { animation-name: leaf-tumble; }
@keyframes leaf-tumble {
  0% { transform: translateX(calc(var(--sw) * -1)) rotate(-50deg) rotateX(0deg) rotateY(0deg) scale(var(--s)); }
  35% { transform: translateX(calc(var(--sw) * -0.2)) rotate(10deg) rotateX(var(--rx)) rotateY(25deg) scale(var(--s)); }
  70% { transform: translateX(calc(var(--sw) * 0.6)) rotate(45deg) rotateX(0deg) rotateY(-30deg) scale(var(--s)); }
  100% { transform: translateX(var(--sw)) rotate(80deg) rotateX(calc(var(--rx) * -0.6)) rotateY(0deg) scale(var(--s)); }
}
.season-fall.is-winter b:has(svg) { width: 15px; height: 15px; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 1px rgba(110, 150, 210, 0.6)); animation-name: flake-spin; }
@keyframes flake-spin { from { transform: translateX(calc(var(--sw) * -1)) rotate(0deg) scale(var(--s)); } to { transform: translateX(var(--sw)) rotate(180deg) scale(var(--s)); } }

/* ВК (25.10.2026, владелец): четыре спокойных сезонных пейзажа.
   Векторный рисунок статичен и остаётся при выключенной анимации; центр
   почти пуст, по краям — ветви, травы, холмы и снег. Сезон ставит quill.js. */
.season-landscape {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.52;
  background-position: center; background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.62) 52%, #000 100%);
  mask-image: radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.62) 52%, #000 100%);
}
:root[data-season="spring"] .season-landscape { background-image: url("./assets/season-spring.svg"); }
:root[data-season="summer"] .season-landscape { background-image: url("./assets/season-summer.svg"); }
:root[data-season="autumn"] .season-landscape { background-image: url("./assets/season-autumn.svg"); }
:root[data-season="winter"] .season-landscape { background-image: url("./assets/season-winter.svg"); }
:root[data-night="1"] .season-landscape { opacity: 0.12; }

:root[data-season="spring"]:not([data-night="1"]) body {
  background: radial-gradient(1000px 560px at 95% -5%, #fff1ed 0%, transparent 58%),
    radial-gradient(900px 620px at -10% 15%, #f3f8ef 0%, transparent 62%), linear-gradient(180deg, #edf5ec, #f8f6ef 72%, #eef4ff);
}
:root[data-season="summer"]:not([data-night="1"]) body {
  background: radial-gradient(1000px 580px at 92% -5%, #fff3cf 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 30%, #edf4df 0%, transparent 58%), linear-gradient(180deg, #f7f5e7, #fff9ec 72%, #eef4ff);
}
:root[data-season="autumn"]:not([data-night="1"]) body {
  background: radial-gradient(1000px 580px at 5% -5%, #fff0d9 0%, transparent 60%),
    radial-gradient(900px 620px at 100% 20%, #f6e8dc 0%, transparent 58%), linear-gradient(180deg, #f8efe4, #fbf7ef 72%, #eef4ff);
}
:root[data-season="winter"]:not([data-night="1"]) body {
  background: radial-gradient(1200px 600px at 10% -10%, #ffffff 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #e8f1fd 0%, transparent 55%), linear-gradient(180deg, #eaf2fc, #f6f9fe 60%, #eef4fb);
}
:root[data-season="spring"] .orb-1 { background: #cde5d3; }
:root[data-season="spring"] .orb-2 { background: #f2d3dc; }
:root[data-season="spring"] .orb-3 { background: #e7edc4; }
:root[data-season="summer"] .orb-1 { background: #f3df9d; }
:root[data-season="summer"] .orb-2 { background: #d9e5bd; }
:root[data-season="summer"] .orb-3 { background: #ffe5b4; }
:root[data-season="autumn"] .orb-1 { background: #ecd0a7; }
:root[data-season="autumn"] .orb-2 { background: #e8c2aa; }
:root[data-season="autumn"] .orb-3 { background: #efe0bd; }

:root[data-season="spring"] .today-sky.has-season,
:root[data-season="summer"] .today-sky.has-season,
:root[data-season="autumn"] .today-sky.has-season,
:root[data-season="winter"] .today-sky.has-season {
  background-position: center; background-repeat: no-repeat; background-size: 100% 100%;
}
:root[data-season="spring"] .today-sky.has-season {
  background-image: url("./assets/season-spring.svg"), linear-gradient(180deg, #e2efdf 0%, #f4f4ec 72%, var(--bg) 100%);
}
:root[data-season="summer"] .today-sky.has-season {
  background-image: url("./assets/season-summer.svg"), linear-gradient(180deg, #f7edc9 0%, #f8f5e7 72%, var(--bg) 100%);
}
:root[data-season="autumn"] .today-sky.has-season {
  background-image: url("./assets/season-autumn.svg"), linear-gradient(180deg, #f2dfc5 0%, #f8f0e5 72%, var(--bg) 100%);
}
:root[data-season="winter"] .today-sky.has-season {
  background-image: url("./assets/season-winter.svg"), linear-gradient(180deg, #c9dcf3 0%, #e4eefa 72%, var(--bg) 100%);
}

/* Пользовательское «без движения»: короткий финальный кадр вместо циклов.
   Задержки сохраняем, чтобы служебные состояния не появлялись раньше времени. */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important; scroll-behavior: auto !important;
}
:root[data-motion="off"] .today-season-particles, :root[data-motion="off"] .season-fall { display: none !important; }
:root[data-motion="off"] .aurora::after { animation: none !important; }
:root[data-motion="off"] .fx { opacity: 0.45; }

/* Зима: дополнительный морозный свет, орбы и сугроб под небом. */
:root[data-season="winter"] .orb-1 { background: #cfe0f7; }
:root[data-season="winter"] .orb-2 { background: #dfe6fb; }
:root[data-season="winter"] .orb-3 { background: #e6f3fb; }
:root[data-season="winter"] .aurora::after {
  content: ""; position: absolute; inset: -40px 0 0; pointer-events: none; opacity: 0.85;
  background-image:
    radial-gradient(circle, #fff 0 1.4px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(200, 220, 245, 0.9) 0 0.9px, transparent 1.4px);
  background-size: 140px 160px, 90px 110px, 60px 70px;
  background-position: 0 0, 40px 30px, 20px 50px;
  animation: snow-bg 26s linear infinite;
  filter: drop-shadow(0 0 1px rgba(150, 180, 220, 0.6));
}
@keyframes snow-bg { to { background-position: 40px 160px, 10px 140px, 50px 120px; } }
.today-drift { position: absolute; left: 0; right: 0; bottom: 56px; width: 100%; height: 40px; z-index: 1; pointer-events: none; filter: drop-shadow(0 -2px 6px rgba(143, 179, 232, 0.35)); }
.season-winter .today-sky { background: linear-gradient(180deg, #c9dcf3 0%, #e4eefa 60%, var(--bg) 100%); }
.season-winter .today-sky[data-tod="night"]::before { background: linear-gradient(180deg, rgba(18, 30, 74, 0.9), rgba(40, 62, 120, 0.74) 60%, rgba(70, 100, 160, 0.56) 100%); }
@media (prefers-reduced-motion: reduce) { :root[data-season="winter"] .aurora::after { animation: none; } }

/* «Твоя неделя» — информативная */
.today-week-range { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.today-week.is-rich .today-week-pick { gap: 6px; }
.today-week.is-rich .today-week-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1;
  background: color-mix(in srgb, var(--fg) 4%, transparent); border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  color: color-mix(in srgb, var(--fg) 55%, transparent);
}
.today-week.is-rich .today-week-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--kind); opacity: 0.4; }
.today-week.is-rich .today-week-chip b { font-weight: 800; color: inherit; }
.today-week.is-rich .today-week-chip.on {
  background: color-mix(in srgb, var(--kind) 13%, #fff); border-color: color-mix(in srgb, var(--kind) 45%, transparent);
  color: color-mix(in srgb, var(--kind) 70%, #2b2140); box-shadow: none;
}
.today-week.is-rich .today-week-chip.on i { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--kind) 22%, transparent); }
.today-week.is-rich .today-week-bars { height: 78px; gap: 8px; align-items: stretch; }
.today-week.is-rich .today-week-bars i {
  flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  height: auto; background: none; border-radius: 0; animation: none; opacity: 1;
}
.today-week.is-rich .today-week-bars i > span {
  display: flex; flex-direction: column-reverse; border-radius: 8px; overflow: hidden; min-height: 4px;
  background: color-mix(in srgb, var(--fg) 7%, transparent); transform-origin: bottom; animation: bar-grow 0.7s var(--ease) both;
}
.today-week.is-rich .today-week-bars i > span s { display: block; text-decoration: none; min-height: 3px; }
.today-week.is-rich .today-week-bars i > span s + s { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85); }
.today-week.is-rich .today-week-bars i.is-future > span { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--fg) 9%, transparent) 0 3px, transparent 3px 6px); }
.today-week.is-rich .today-week-bars i.is-today > span { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.today-week.is-rich .today-week-bars em { font-style: normal; font-size: 10.5px; font-weight: 800; text-align: center; margin-bottom: 3px; color: color-mix(in srgb, var(--fg) 62%, transparent); }
.today-week.is-rich .today-week-days span.is-today { color: var(--accent); font-weight: 800; }
.today-week.is-rich .today-week-count { font-size: 12px; color: var(--muted); }
.today-week.is-rich .today-week-count b { color: var(--fg); font-weight: 800; }
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.today-week.is-rich .today-week-bars i:nth-child(2) > span { animation-delay: 50ms; }
.today-week.is-rich .today-week-bars i:nth-child(3) > span { animation-delay: 100ms; }
.today-week.is-rich .today-week-bars i:nth-child(4) > span { animation-delay: 150ms; }
.today-week.is-rich .today-week-bars i:nth-child(5) > span { animation-delay: 200ms; }
.today-week.is-rich .today-week-bars i:nth-child(6) > span { animation-delay: 250ms; }
.today-week.is-rich .today-week-bars i:nth-child(7) > span { animation-delay: 300ms; }
.today-week.is-reports .today-week-range { display: none; }

/* ВК (20.10.2026, владелец) — Главная: светило по центру и свет на карточках (home.js: homeLuminary). */
/* Свет шире viewport остаётся декорацией: clip не создаёт scroll-контейнер и не растягивает body. */
.obs { position: relative; overflow: clip; --lum: 255, 196, 112; --lum-soft: rgba(255, 214, 150, 0.5); }
.obs[data-light="moon"] { --lum: 186, 204, 255; --lum-soft: rgba(196, 210, 255, 0.55); }
.obs-top-center { justify-content: center; margin: 0 0 10px; position: relative; z-index: 2; }
.obs-luminary {
  flex-direction: column; gap: 6px; padding: 4px 18px 6px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.obs-luminary .obs-today-tx { align-items: center; text-align: center; }
.obs-luminary .obs-today-tx b { font-size: 16px; }
.obs-luminary .obs-today-tx span { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.obs-lum-orb { position: relative; width: 64px; height: 64px; display: block; animation: lum-float 9s ease-in-out infinite; }
.obs-lum-orb .obs-today-moon { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 18px rgba(var(--lum), 0.55)); }
.obs-lum-halo { position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--lum), 0.42) 0, rgba(var(--lum), 0.16) 40%, transparent 68%); animation: moon-breathe 8s ease-in-out infinite; }
.obs-lum-sun {
  position: absolute; inset: 5px; border-radius: 50%; display: none;
  background: radial-gradient(circle at 38% 34%, #fffdf0 0, #ffe7a1 28%, #ffc463 62%, #ff9f45 100%);
  box-shadow: 0 0 30px 10px rgba(255, 190, 100, 0.45);
}
.obs-lum-sun i { position: absolute; inset: -20px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 206, 120, 0.5) 0 4deg, transparent 4deg 20deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 46%, #000 52%, transparent 72%); mask-image: radial-gradient(circle, transparent 0 46%, #000 52%, transparent 72%);
  animation: sun-spin 50s linear infinite; }
.obs[data-light="sun"] .obs-lum-sun { display: block; }
.obs[data-light="sun"] .obs-lum-orb .obs-today-moon { display: none; }
@keyframes lum-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Свет: конус от светила вниз по карточкам — мягкие лучи медленно ходят, слой поверх карточек без тапов. */
.obs-beam { position: absolute; z-index: 3; left: 50%; top: 30px; width: min(140vw, 900px); height: 900px; transform: translateX(-50%); pointer-events: none; mix-blend-mode: soft-light; }
.obs-beam::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 50% 0, rgba(var(--lum), 0.9), rgba(var(--lum), 0.35) 45%, transparent 75%); }
.obs-beam i { position: absolute; inset: 0; background: repeating-conic-gradient(from 160deg at 50% 0, rgba(var(--lum), 0.55) 0 3deg, transparent 3deg 9deg, rgba(var(--lum), 0.25) 9deg 11deg, transparent 11deg 16deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0, #000 0, transparent 80%); mask-image: radial-gradient(ellipse 60% 70% at 50% 0, #000 0, transparent 80%);
  animation: beam-sway 14s ease-in-out infinite alternate; transform-origin: 50% 0; }
.obs[data-light="moon"] .obs-beam { mix-blend-mode: screen; opacity: 0.55; }
@keyframes beam-sway { from { transform: rotate(-4deg); opacity: 0.7; } to { transform: rotate(4deg); opacity: 1; } }
/* Блик сверху у карточек — со стороны светила. */
.obs .obs-you, .obs .obs-portal, .obs .obs-rows, .obs .obs-continue { box-shadow: 0 -10px 28px -14px rgba(var(--lum), 0.85), var(--shadow, 0 10px 30px -18px rgba(31, 45, 61, 0.3)); }
@media (prefers-reduced-motion: reduce) { .obs-beam i, .obs-lum-orb, .obs-lum-halo, .obs-lum-sun i { animation: none; } }

/* Строки меню — без подписей справа (владелец). */
.obs-row > span { display: none; }
.obs-row[hidden] { display: none !important; }
/* Небо над светилом во всю ширину: днём тёплое утро, ночью — синяя ночь со звёздами; уходит в бумагу экрана. */
.obs-band { position: absolute; z-index: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); top: -20px; height: 330px; pointer-events: none;
  background: linear-gradient(180deg, #ffe4c4 0%, #fff0dc 45%, transparent 100%); }
.obs-band i { position: absolute; inset: 0; opacity: 0; }
.obs[data-light="moon"] .obs-band { background: linear-gradient(180deg, #1d2352 0%, #2c3470 38%, rgba(70, 80, 150, 0.45) 70%, transparent 100%); }
.obs[data-light="moon"] .obs-band i { opacity: 1;
  background-image: radial-gradient(1.3px 1.3px at 10% 20%, #fff 50%, transparent 55%), radial-gradient(1px 1px at 22% 48%, #fff 50%, transparent 55%),
    radial-gradient(1.6px 1.6px at 35% 12%, #fff 50%, transparent 55%), radial-gradient(1px 1px at 64% 30%, #fff 50%, transparent 55%),
    radial-gradient(1.4px 1.4px at 78% 14%, #fff 50%, transparent 55%), radial-gradient(1px 1px at 88% 42%, #fff 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 54% 8%, #ffe9c2 50%, transparent 55%), radial-gradient(1px 1px at 6% 52%, #fff 50%, transparent 55%),
    radial-gradient(1px 1px at 95% 24%, #fff 50%, transparent 55%), radial-gradient(1.3px 1.3px at 44% 40%, #fff 50%, transparent 55%);
  animation: star-twinkle 5s ease-in-out infinite; }
.obs[data-light="moon"] .obs-luminary .obs-today-tx b { color: #fff4e2; }
.obs[data-light="moon"] .obs-luminary .obs-today-tx span { color: rgba(255, 241, 218, 0.7); }
.obs[data-light="sun"] .obs-luminary .obs-today-tx span { color: #b9772a; }
.obs > .obs-top, .obs > .obs-you, .obs > .obs-continue, .obs > .obs-portals, .obs > .obs-rows, .obs > .disclaimer { position: relative; z-index: 1; }
.obs-lum-orb { width: 76px; height: 76px; }
.obs[data-light="moon"] .obs-beam { mix-blend-mode: normal; opacity: 1; }
.obs[data-light="moon"] .obs-beam::before { background: radial-gradient(ellipse 46% 55% at 50% 0, rgba(214, 224, 255, 0.5), rgba(200, 214, 255, 0.16) 50%, transparent 76%); }
.obs[data-light="moon"] .obs-beam i { opacity: 0.5; mix-blend-mode: screen; }
.obs[data-light="moon"] .obs-you, .obs[data-light="moon"] .obs-portal, .obs[data-light="moon"] .obs-rows, .obs[data-light="moon"] .obs-continue {
  box-shadow: 0 -12px 30px -12px rgba(170, 190, 255, 0.95), 0 0 0 1px rgba(210, 220, 255, 0.5), var(--shadow, 0 10px 30px -18px rgba(31, 45, 61, 0.3)); }
.obs-top-center { margin-top: 10px; }
.obs-beam { top: 48px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); }
.obs[data-light="moon"] .obs-beam i { opacity: 0.38; }

/* ВК (20.10.2026, владелец) — плитки Главной. */
/* Летопись: текст и герб внутри тиснёной рамки, линии больше не режут слова. */
.obs-portal.is-tome { padding: 22px 30px 22px 22px; }
.obs-portal.is-tome .obs-portal-em { margin: -2px 0 0 -2px; }

/* Эмоции: лицо крупнее, подпись настроения под ним сменяется вместе с лицом. */
.obs-portal[data-home-section="emotions"] .obs-portal-em.has-faces { width: 58px; height: 58px; background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.55), 0 10px 22px -10px rgba(63, 150, 110, 0.55); }
.has-faces .mood-faces { width: 46px; height: 46px; }
.mood-face { filter: drop-shadow(0 5px 7px rgba(60, 40, 20, 0.22)); }
.mood-names { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); width: 120px; height: 16px; pointer-events: none; }
.mood-names em { position: absolute; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  color: #2c7d58; opacity: 0; animation: mood-cycle 12.5s cubic-bezier(0.34, 1.4, 0.64, 1) infinite; animation-delay: calc(var(--i) * 2.5s); }
.obs-portal[data-home-section="emotions"] .obs-portal-em.has-faces { margin-bottom: 18px; }
.bk-vig .mood-names { display: none; }
@media (prefers-reduced-motion: reduce) { .mood-names em { animation: none; } .mood-names em:first-child { opacity: 1; } }

/* ВК (20.10.2026, утро): плитка Достижений — снова прежняя (медаль-эмблема, полоса), по просьбе владельца. */

/* Сонник: светящаяся туманность и падающая звезда, число снов — золотом. */
.obs-portal.is-night::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.8;
  background: radial-gradient(60% 40% at 30% 20%, rgba(150, 120, 255, 0.28), transparent 70%), radial-gradient(50% 35% at 80% 75%, rgba(255, 170, 210, 0.16), transparent 70%);
  animation: nebula 12s ease-in-out infinite alternate; }
@keyframes nebula { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6px, 4px) scale(1.06); } }
.obs-portal.is-night .obs-portal-num em { font-size: 24px; text-shadow: 0 0 12px rgba(241, 214, 156, 0.6); }

/* ВК (20.10.2026, владелец) — Минута тишины: цветок дыхания, кольцо фазы, круги, пылинки, тон по фазе. */
.hush { transition: background 1.6s ease; overflow: hidden; }
.hush[data-k="in"] { background: radial-gradient(circle at 50% 40%, #1b4d5e, #0b1622 72%); }
.hush[data-k="hold"] { background: radial-gradient(circle at 50% 40%, #3b3a52, #0f1424 72%); }
.hush[data-k="out"] { background: radial-gradient(circle at 50% 40%, #142a46, #090f1c 72%); }
.hush[data-k="rest"] { background: radial-gradient(circle at 50% 40%, #1d4a46, #0b1620 72%); }
.hush > *:not(.recap-close):not(.hush-motes) { position: relative; z-index: 1; }
.hush > .recap-close { z-index: 3; }
.hush .hush-motes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hush-motes i { position: absolute; left: var(--x); bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #c8f4e0;
  box-shadow: 0 0 8px 2px rgba(160, 240, 200, 0.5); opacity: 0; transform: scale(var(--s)); animation: mote-rise var(--d) linear var(--dl) infinite; }
@keyframes mote-rise { 0% { transform: translateY(0) scale(var(--s)); opacity: 0; } 15% { opacity: 0.7; } 85% { opacity: 0.5; } 100% { transform: translateY(-105vh) translateX(20px) scale(var(--s)); opacity: 0; } }
.hush .hush-ring { position: relative; width: 240px; height: 240px; border: 0; box-shadow: none; transform: none; display: grid; place-items: center; justify-self: center; }
.hush-petals { position: absolute; inset: 0; --r: 12px; transition: transform var(--bd, 4s) cubic-bezier(.45, 0, .55, 1); }
.hush-petals i { position: absolute; left: 50%; top: 50%; width: 108px; height: 108px; margin: -54px 0 0 -54px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(150, 240, 200, 0.55), rgba(70, 190, 170, 0.28) 60%, rgba(60, 160, 200, 0.12));
  mix-blend-mode: screen; box-shadow: 0 0 30px rgba(120, 230, 190, 0.25);
  transform: rotate(var(--a)) translateX(var(--r)) scale(var(--ps, 0.62)); transition: transform var(--bd, 4s) cubic-bezier(.45, 0, .55, 1), background 1.2s ease; }
.hush-ring[data-k="in"] .hush-petals i, .hush-ring[data-k="hold"] .hush-petals i { --r: 46px; --ps: 1; }
.hush-ring[data-k="hold"] .hush-petals { transform: rotate(30deg); }
.hush-ring[data-k="hold"] .hush-petals i { background: radial-gradient(circle, rgba(255, 226, 150, 0.5), rgba(220, 170, 110, 0.24) 60%, rgba(200, 150, 220, 0.1)); }
.hush-ring[data-k="out"] .hush-petals i { --r: 4px; --ps: 0.5; }
.hush-ring[data-k="out"] .hush-petals { transform: rotate(60deg); }
.hush-ring[data-k="rest"] .hush-petals i { --r: 22px; --ps: 0.75; }
.hush-prog { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; }
.hush-prog circle { fill: none; stroke: rgba(160, 240, 210, 0.14); stroke-width: 1.5; }
.hush-prog circle.run { stroke: rgba(170, 245, 215, 0.85); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(150, 240, 200, 0.8)); }
.hush-ring[data-k="hold"] .hush-prog circle.run { stroke: #ffd98f; filter: drop-shadow(0 0 4px rgba(255, 210, 140, 0.8)); }
.hush-core { position: relative; z-index: 2; display: grid; place-items: center; gap: 2px; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(10, 30, 40, 0.55), rgba(10, 30, 40, 0) 70%); }
.hush-core span { font-family: var(--font-serif); font-size: 26px; color: #effcf5; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); }
.hush-core small { font-size: 15px; color: #a9f0cf; font-variant-numeric: tabular-nums; min-height: 20px; }
.hush-rounds { display: flex; justify-content: center; gap: 8px; margin: 0; }
.hush-rounds i { width: 7px; height: 7px; border-radius: 50%; background: rgba(170, 240, 210, 0.22); transition: background 0.6s, transform 0.6s; }
.hush-rounds i.on { background: #9fe6c4; }
.hush-rounds i.now { background: #effcf5; transform: scale(1.35); box-shadow: 0 0 8px rgba(200, 255, 230, 0.8); }
.hush .hush-go { background: linear-gradient(135deg, #3fbf9a, #9fe6c4); color: #0b2a22; box-shadow: 0 10px 30px -10px rgba(110, 220, 180, 0.7); }
@media (prefers-reduced-motion: reduce) { .hush-motes i { animation: none; } .hush-petals, .hush-petals i { transition: none; } }

/* ВК (20.10.2026, владелец) — итог теста: витрина дороже. Двойная золотая рамка, мерцающая пыль, квадрант с
   именами типов, ведущие грани шкалами, текст — в карточке с кавычкой. */
.result.is-premium .result-hero {
  padding: 26px 18px 22px; border-radius: 30px;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--res-acc, var(--accent)) 30%, transparent), transparent 70%),
    radial-gradient(80% 50% at 100% 100%, rgba(255, 214, 150, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78));
  box-shadow: 0 0 0 1px rgba(214, 170, 92, 0.4), 0 0 0 5px rgba(255, 255, 255, 0.7), 0 0 0 6px rgba(214, 170, 92, 0.22),
    0 30px 60px -28px color-mix(in srgb, var(--res-acc, var(--accent)) 80%, transparent);
}
.result.is-premium .result-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0.6;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #e7c27a 50%, transparent 55%), radial-gradient(1px 1px at 84% 12%, #e7c27a 50%, transparent 55%),
    radial-gradient(1.4px 1.4px at 92% 58%, #e7c27a 50%, transparent 55%), radial-gradient(1px 1px at 6% 66%, #e7c27a 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 30% 92%, #e7c27a 50%, transparent 55%), radial-gradient(1px 1px at 70% 88%, #e7c27a 50%, transparent 55%);
  animation: star-twinkle 4.5s ease-in-out infinite;
}
.result.is-premium .result-kicker { display: inline-flex; align-items: center; gap: 8px; color: #b0833b; }
.result.is-premium .result-kicker::before, .result.is-premium .result-kicker::after { content: ""; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, #d6aa5c); }
.result.is-premium .result-kicker::after { transform: scaleX(-1); }
.result.is-premium .result-hero h2 { font-size: 40px; letter-spacing: -0.8px;
  background: linear-gradient(180deg, #2a2140 10%, color-mix(in srgb, var(--res-acc, var(--accent)) 85%, #2a2140) 70%, #b0833b);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.result.is-premium .result-hero h2.is-long { font-size: 30px; }
.result-chips.is-meters { display: grid; gap: 10px; max-width: 300px; margin: 16px auto 0; }
.result-meter { display: grid; gap: 5px; text-align: left; }
.rm-top { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--fg) 75%, transparent); }
.rm-top b { font-weight: 800; color: color-mix(in srgb, var(--res-acc, var(--accent)) 85%, var(--fg)); }
.rm-bar { height: 7px; border-radius: 10px; background: color-mix(in srgb, var(--res-acc, var(--accent)) 12%, #fff); overflow: hidden; box-shadow: inset 0 1px 2px rgba(31, 45, 61, 0.1); }
.rm-bar i { display: block; height: 100%; width: var(--p); border-radius: inherit; transform-origin: left; animation: rm-grow 1.1s var(--ease) 0.4s both;
  background: linear-gradient(90deg, color-mix(in srgb, var(--res-acc, var(--accent)) 60%, #fff), var(--res-acc, var(--accent))); }
.result-meter.is-lead .rm-bar i { box-shadow: 0 0 10px color-mix(in srgb, var(--res-acc, var(--accent)) 60%, transparent); }
@keyframes rm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.result.is-premium .result-summary { position: relative; max-width: 420px; padding: 18px 20px 16px 44px; border-radius: 20px; text-align: left;
  background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px rgba(214, 170, 92, 0.28); font-family: var(--font-serif); font-size: 17px; line-height: 1.5; }
.result.is-premium .result-summary::before { content: "“"; position: absolute; left: 14px; top: 4px; font-family: var(--font-serif); font-size: 44px; line-height: 1; color: #d6aa5c; }
.result.is-premium .result-summary:empty { display: none; }
.result.is-loading .result-summary { display: none; }
.result.is-premium .result-actions .btn.primary { background: linear-gradient(135deg, color-mix(in srgb, var(--res-acc, var(--accent)) 85%, #fff), var(--res-acc, var(--accent)));
  box-shadow: 0 14px 30px -14px var(--res-acc, var(--accent)); }

/* Квадрант */
.viz-quad .quad-tile { fill: rgba(255, 255, 255, 0.65); stroke: rgba(214, 170, 92, 0.35); stroke-width: 1; }
.viz-quad .quad-cell { fill: rgba(240, 244, 252, 0.6); transition: fill 0.6s; }
.viz-quad .quad-cell.is-on { stroke: color-mix(in srgb, var(--res-acc, var(--accent)) 55%, transparent); stroke-width: 1.2; }
.viz-quad .quad-name { font-family: var(--font-serif); font-size: 11px; fill: color-mix(in srgb, var(--fg) 40%, transparent); }
.viz-quad .quad-name.is-on { fill: color-mix(in srgb, var(--res-acc, var(--accent)) 85%, var(--fg)); font-weight: 600; font-size: 12px; }
.viz-quad .quad-axis { stroke: rgba(150, 160, 190, 0.35); stroke-dasharray: 2 4; }
.viz-quad .quad-guide { stroke: color-mix(in srgb, var(--res-acc, var(--accent)) 60%, transparent); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity 0.6s 1s; }
.viz-quad.is-set .quad-guide { opacity: 1; }
.viz-quad .quad-dot { filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--res-acc, var(--accent)) 70%, transparent)); }
.viz-quad .quad-ring { fill: none; stroke: var(--res-acc, var(--accent)); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: quad-ping 2.6s ease-out 1.2s infinite; }
.viz-quad .quad-ring.r2 { animation-delay: 2.5s; }
@keyframes quad-ping { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }

/* Загрузка итога — сцены */
.result.is-loading .result-hero h2 { font-size: 22px; }
.result-hero h2.ph-in { animation: ph-in 0.5s var(--ease); }
@keyframes ph-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rl { position: relative; width: 170px; height: 170px; margin: 0 auto; color: var(--res-acc, var(--accent)); }
.rl-const svg { width: 100%; height: 100%; overflow: visible; }
.rl-const path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rl-draw 2.4s var(--ease) infinite; opacity: 0.7; }
.rl-const circle { fill: #fff; stroke: currentColor; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: rl-star 2.4s var(--ease) infinite; }
.rl-const circle:nth-of-type(2) { animation-delay: 0.3s; } .rl-const circle:nth-of-type(3) { animation-delay: 0.6s; }
.rl-const circle:nth-of-type(4) { animation-delay: 0.9s; fill: #ffe2a0; } .rl-const circle:nth-of-type(5) { animation-delay: 1.2s; } .rl-const circle:nth-of-type(6) { animation-delay: 1.5s; }
@keyframes rl-draw { 0% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes rl-star { 0%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1.4); opacity: 1; } }
.rl-mirror i { position: absolute; inset: 35%; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; animation: rl-ripple 2.4s ease-out infinite; }
.rl-mirror i:nth-child(2) { animation-delay: 0.8s; } .rl-mirror i:nth-child(3) { animation-delay: 1.6s; }
.rl-mirror b { position: absolute; inset: 34%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, currentColor 40%, #fff) 50%, currentColor);
  box-shadow: 0 0 30px color-mix(in srgb, currentColor 50%, transparent); animation: rl-breathe 2.4s ease-in-out infinite; }
@keyframes rl-ripple { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes rl-breathe { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1.06); } }
.rl-compass .rl-dial { position: absolute; inset: 12%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(176, 131, 59, 0.55) 0 1deg, transparent 1deg 15deg), radial-gradient(circle, #fffaf0 0 56%, #f3e2bf 57%, #fff 70%);
  box-shadow: 0 0 0 2px #d6aa5c, 0 10px 24px -10px rgba(120, 80, 20, 0.5); }
.rl-compass .rl-needle { position: absolute; left: 50%; top: 22%; bottom: 22%; width: 12px; margin-left: -6px;
  background: linear-gradient(180deg, var(--res-acc, #c0392b) 0 50%, #3d3552 50% 100%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: rl-seek 2.6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
.rl-compass .rl-pin { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #d6aa5c; box-shadow: 0 0 0 2px #fff; }
@keyframes rl-seek { 0% { transform: rotate(-120deg); } 45% { transform: rotate(40deg); } 70% { transform: rotate(10deg); } 100% { transform: rotate(-120deg); } }
@media (prefers-reduced-motion: reduce) { .rl *, .rl-const path, .rl-const circle { animation: none !important; } .rl-const path { stroke-dashoffset: 0; } }

/* Прогресс теста — золотая точка на конце шкалы */
.q-progress { height: 6px; overflow: visible; }
.q-progress span { overflow: visible; }
.q-progress span::before { content: ""; position: absolute; right: -5px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2.5px var(--accent), 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
.q-progress span[style*="width: 0%"]::before { opacity: 0; }
.result-chips.is-meters { width: min(300px, 100%); justify-items: stretch; justify-content: stretch; grid-template-columns: 1fr; }
.result-meter { width: 100%; }
.viz-quad .quad-name { font-size: 10.5px; }
.viz-quad .quad-name.is-on { font-size: 11.5px; }

/* ВК (20.10.2026, владелец) — грани-аккордеон (app.js: facetCards). */
.facet-heading { display: flex; align-items: center; gap: 10px; margin: 26px 0 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #b0833b; }
.facet-heading i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(214, 170, 92, 0.6), transparent); }
.facet-deck { display: grid; gap: 10px; text-align: left; }
.facet { position: relative; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.7));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fa) 22%, rgba(214, 170, 92, 0.25)), 0 14px 30px -22px color-mix(in srgb, var(--fa) 70%, transparent);
  transition: box-shadow 0.4s var(--ease), transform 0.3s var(--ease); }
.facet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--fa), color-mix(in srgb, var(--fa) 30%, #f3d9a0)); }
.facet.open { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fa) 45%, transparent), 0 22px 44px -22px color-mix(in srgb, var(--fa) 85%, transparent); }
.facet-head { width: 100%; display: grid; grid-template-columns: 24px 40px 1fr auto 14px; align-items: center; gap: 10px; padding: 13px 14px 13px 16px;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--fg); }
.facet-num { font-family: var(--font-serif); font-size: 13px; color: #b0833b; text-align: center; }
.facet-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--fa);
  background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--fa) 18%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fa) 25%, transparent); }
.facet-ic svg { width: 22px; height: 22px; }
.facet-meta { min-width: 0; display: grid; gap: 1px; }
.facet-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.facet-meta b { font-family: var(--font-serif); font-weight: 500; font-size: 17px; line-height: 1.2; }
.facet-res { max-width: 120px; padding: 5px 10px; border-radius: 100px; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2;
  color: color-mix(in srgb, var(--fa) 85%, #2a2140); background: color-mix(in srgb, var(--fa) 13%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fa) 28%, transparent); }
.facet-chev { width: 9px; height: 9px; border-right: 2px solid color-mix(in srgb, var(--fg) 40%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--fg) 40%, transparent);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.35s var(--ease); }
.facet.open .facet-chev { transform: rotate(225deg) translate(-2px, -2px); }
.facet-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.facet.open .facet-body { grid-template-rows: 1fr; }
.facet-in { overflow: hidden; min-height: 0; padding: 0 18px 0 20px; }
.facet.open .facet-in { padding-bottom: 16px; }
.facet-sum { margin: 2px 0 12px; font-family: var(--font-serif); font-size: 16px; line-height: 1.5; color: var(--fg); }
.facet-meters { margin: 0 0 12px; width: 100%; }
.facet-lens, .facet-def { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--fg) 70%, transparent); }
.facet-lens span, .facet-def span { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--fa) 75%, #2a2140); }
.facet-def { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--fa) 7%, #fff); }
.facet-again { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--fa) 85%, #2a2140); cursor: pointer; }
.facet .rm-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--fa) 55%, #fff), var(--fa)); }
.facet .rm-top b { color: color-mix(in srgb, var(--fa) 85%, var(--fg)); }
@media (prefers-reduced-motion: reduce) { .facet-body, .facet-chev { transition: none; } }

/* Портрет в Личной карте: текст по левому краю, буквица золотом, лист с тонкой рамкой. */
.hub-portrait .portrait-body { position: relative; padding: 20px 20px 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 252, 245, 0.92), rgba(255, 255, 255, 0.75));
  box-shadow: inset 0 0 0 1px rgba(214, 170, 92, 0.32), 0 0 0 4px rgba(255, 255, 255, 0.6), 0 18px 40px -26px rgba(120, 90, 40, 0.5); }
.hub-portrait .portrait-text { text-align: left; text-align-last: auto; hyphens: manual; -webkit-hyphens: manual; font-size: 17px; line-height: 1.6; }
.hub-portrait .portrait-text::first-letter { float: left; margin: 4px 8px 0 0; font-size: 46px; line-height: 0.85; color: #b0833b; font-family: var(--font-serif); }
.portrait-hero-hub .portrait-essence { font-size: 34px; background: linear-gradient(180deg, #2a2140, #6a4fb0 70%, #b0833b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hub-results { margin-top: 6px; }

/* «Твоя карта» — ночная астролябия: тёмное небо во всю ширину, золотые орбиты, ядро с типом темперамента. */
.card-full { position: relative; color: #f3ecff; }
.card-full::before { content: ""; position: absolute; z-index: -1; top: -20px; bottom: -160px; left: calc(50% - 50vw); right: calc(50% - 50vw); pointer-events: none;
  background: radial-gradient(60% 40% at 50% 30%, rgba(120, 100, 220, 0.45), transparent 70%), radial-gradient(40% 30% at 85% 80%, rgba(255, 180, 140, 0.16), transparent 70%),
    linear-gradient(180deg, #151236, #1f1a4a 50%, #121030); }
.card-full::after { content: ""; position: absolute; z-index: -1; top: -20px; bottom: -160px; left: calc(50% - 50vw); right: calc(50% - 50vw); pointer-events: none; opacity: 0.9;
  background-image: radial-gradient(1.2px 1.2px, #fff 50%, transparent 55%), radial-gradient(1.6px 1.6px, #ffe6b0 50%, transparent 55%);
  background-size: 83px 71px, 157px 139px; background-position: 13px 9px, 60px 40px; animation: star-twinkle 6s ease-in-out infinite; }
.card-full h2 { color: #fff4e2; font-size: 30px; }
.card-full .card-motto { color: #e9d7b0; font-style: italic; }
.card-full .const-hint { color: rgba(233, 225, 255, 0.7); }
.card-full .disclaimer { color: rgba(233, 225, 255, 0.55); }
.card-full .btn.ghost { background: rgba(255, 255, 255, 0.08); color: #f3ecff; border-color: rgba(255, 255, 255, 0.2); }
.const-orbit { fill: none; stroke: rgba(231, 194, 122, 0.45); stroke-width: 0.8; stroke-dasharray: 1 5; transform-origin: 160px 160px; animation: core-spin 120s linear infinite; }
.const-orbit.o2 { stroke: rgba(231, 194, 122, 0.25); stroke-dasharray: none; animation: none; }
.const-orbit.o3 { stroke: rgba(231, 194, 122, 0.3); stroke-dasharray: 0.6 9; animation-direction: reverse; animation-duration: 200s; stroke-width: 2.2; }
.card-full .const-line { stroke: #e7c27a; stroke-width: 1.1; filter: drop-shadow(0 0 3px rgba(231, 194, 122, 0.7)); }
.card-full .const-core { width: 112px; height: 112px; flex-direction: column; gap: 4px; color: #4a2f08;
  background: radial-gradient(circle at 36% 30%, #fffaf0 0, #ffe6a8 30%, #e2ac52 70%, #b07a2a 100%);
  box-shadow: 0 0 0 2px rgba(255, 240, 200, 0.6), 0 0 40px 10px rgba(231, 194, 122, 0.45), 0 0 90px 30px rgba(140, 110, 240, 0.35); }
.card-full .const-core::before { background: conic-gradient(from 0deg, transparent, rgba(255, 220, 150, 0.7), transparent 30%, rgba(190, 160, 255, 0.6), transparent 65%, rgba(255, 220, 150, 0.7), transparent); }
.card-full .const-core b { display: block; width: 26px; height: 26px; font-size: 0; }
.card-full .const-core b svg { width: 100%; height: 100%; fill: #8a5a14; filter: drop-shadow(0 1px 0 rgba(255, 245, 210, 0.9)); }
.card-full .const-core span { font-family: var(--font-serif); font-size: 14px; font-weight: 600; opacity: 1; max-width: 96px; line-height: 1.1; }
.card-full .facet-heading { color: #e7c27a; }
.card-full .facet { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(231, 194, 122, 0.28), 0 18px 40px -26px rgba(0, 0, 0, 0.6); color: #f3ecff; }
.card-full .facet-head { color: #f3ecff; }
.card-full .facet-k { color: rgba(233, 225, 255, 0.6); }
.card-full .facet-num { color: #e7c27a; }
.card-full .facet-ic { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.3), color-mix(in srgb, var(--fa) 35%, transparent)); color: #fff; }
.card-full .facet-res { color: #fff; background: color-mix(in srgb, var(--fa) 45%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.card-full .facet-chev { border-color: rgba(255, 255, 255, 0.55); }
.card-full .facet-sum { color: #f6f0ff; }
.card-full .facet-lens, .card-full .facet-def, .card-full .rm-top { color: rgba(233, 225, 255, 0.75); }
.card-full .facet-lens span, .card-full .facet-def span, .card-full .facet-again { color: #e7c27a; }
.card-full .facet-def { background: rgba(255, 255, 255, 0.06); }
.card-full .rm-bar { background: rgba(255, 255, 255, 0.12); box-shadow: none; }
.card-full .rm-top b { color: #ffe0a0; }
.card-facets { margin: 4px 0 18px; }
@media (max-width: 440px) {
  .facet-head { grid-template-columns: 18px 36px 1fr auto 12px; gap: 8px; padding: 12px 12px 12px 14px; }
  .facet-ic { width: 36px; height: 36px; }
  .facet-res { max-width: 104px; font-size: 11px; padding: 4px 8px; overflow-wrap: anywhere; }
}

/* ВК (20.10.2026, владелец) — перо на кнопке записи (views.js: FAB_FEATHER). */
.tab-fab-quill { width: 54px; height: 54px; margin: -27px 0 0 -27px; filter: drop-shadow(0 3px 4px rgba(10, 20, 60, 0.35)); }
.tab-fab-quill .fq-cut { fill: color-mix(in srgb, var(--accent) 80%, #1b2a5c); }
.tab-fab-quill .fq-barbs path { stroke: color-mix(in srgb, var(--accent) 45%, #fff); stroke-width: 0.9; opacity: 0.85; }
.tab-fab-quill .fq-rachis { stroke: #ecc679; stroke-width: 2.4; }
.tab-fab-quill .fq-ink { fill: color-mix(in srgb, var(--accent) 50%, #0b1530); }
.tab-fab-quill .fq-feather { transform-origin: 26px 100px; animation: fq-sway 6s ease-in-out infinite; }
@keyframes fq-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-4deg); } }
.tab-fab.is-open .tab-fab-quill .fq-feather { animation: none; }
@media (prefers-reduced-motion: reduce) { .tab-fab-quill .fq-feather { animation: none; } }

/* ВК (20.10.2026, владелец) — фон веера записей: ночь поднимается от пера, звёзды, золотая дуга. */
.fan-veil { backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: radial-gradient(130% 75% at var(--fx, 50%) 100%, rgba(22, 18, 58, 0.86) 0, rgba(30, 26, 80, 0.66) 45%, rgba(40, 36, 100, 0.44) 75%, rgba(40, 36, 100, 0.32) 100%); }
.fan-veil > span { position: absolute; pointer-events: none; }
.fan-stars { inset: 0; opacity: 0; transition: opacity 0.6s var(--ease) 0.1s;
  background-image: radial-gradient(1.3px 1.3px, #fff 50%, transparent 55%), radial-gradient(1.8px 1.8px, #ffe2a8 50%, transparent 55%);
  background-size: 67px 59px, 131px 117px; background-position: 9px 13px, 50px 30px;
  -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 85%); mask-image: linear-gradient(0deg, #000 30%, transparent 85%); }
.fan-veil.is-on .fan-stars { opacity: 0.85; animation: star-twinkle 4s ease-in-out infinite; }
.fan-arc { left: var(--fx, 50%); top: var(--fy, 90%); width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  border: 1px solid rgba(233, 194, 122, 0.55); box-shadow: 0 0 30px rgba(233, 194, 122, 0.25), inset 0 0 40px rgba(233, 194, 122, 0.12);
  -webkit-mask-image: linear-gradient(180deg, #000 0 46%, transparent 50%); mask-image: linear-gradient(180deg, #000 0 46%, transparent 50%);
  transform: scale(0.4); opacity: 0; transition: transform 0.5s cubic-bezier(.22, .61, .36, 1), opacity 0.4s; }
.fan-arc::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 1px dashed rgba(233, 194, 122, 0.3); }
.fan-veil.is-on .fan-arc { transform: scale(1); opacity: 1; }
.fan-glow { left: var(--fx, 50%); top: var(--fy, 90%); width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 170, 255, 0.45), transparent 65%); opacity: 0; transition: opacity 0.5s; }
.fan-veil.is-on .fan-glow { opacity: 1; animation: moon-breathe 5s ease-in-out infinite; }
.fan-petal { color: #fff4e2; }
.fan-petal-label { background: rgba(20, 16, 50, 0.55); color: #fff4e2; box-shadow: inset 0 0 0 1px rgba(233, 194, 122, 0.35); padding: 3px 10px; }
.fan-petal-disc { box-shadow: 0 14px 30px -8px var(--c), 0 0 0 4px rgba(255, 255, 255, 0.18), 0 0 0 5px color-mix(in srgb, var(--c) 45%, transparent), 0 0 26px color-mix(in srgb, var(--c) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .fan-veil.is-on .fan-stars, .fan-veil.is-on .fan-glow { animation: none; } }

/* ВК (20.10.2026, владелец) — созвездие месяца — фигура: линии фигуры ярче, линии образов не путают рисунок. */
.nx-sky.is-constellation .nx-sym:not(.is-on) { opacity: 0 !important; animation: none; }
.nx-sky.is-constellation .nx-const-line { stroke: #e7c27a; stroke-width: 1.4; opacity: 0.85; filter: drop-shadow(0 0 3px rgba(231, 194, 122, 0.75)); }
.nx-sky.is-constellation.has-sym .nx-const-line { opacity: 0.25; }

/* ВК (20.10.2026, владелец) — медальон карты сна: гравюра ключевого образа (dreams.js: DREAM_GLYPHS). */
.nx-medallion.has-glyph .nx-medallion-core { width: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #fff8e4 0, #f1d391 40%, #d9a54b 78%, #a8731f 100%);
  box-shadow: 0 0 0 2px rgba(255, 240, 200, 0.55), 0 0 0 6px rgba(233, 194, 122, 0.18), 0 0 34px 8px rgba(233, 194, 122, 0.45), inset 0 -4px 8px rgba(110, 60, 10, 0.35); }
.nx-glyph { width: 66%; height: 66%; color: #6b420c; filter: drop-shadow(0 1px 0 rgba(255, 246, 220, 0.85)); }
.nx-glyph g { stroke-dasharray: 220; stroke-dashoffset: 220; animation: nx-glyph-draw 2.2s var(--ease) 0.4s forwards; }
@keyframes nx-glyph-draw { to { stroke-dashoffset: 0; } }
.nx-card-key { margin: 4px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: #e7c27a; }
@media (prefers-reduced-motion: reduce) { .nx-glyph g { animation: none; stroke-dashoffset: 0; } }
:root:has(#app .card-full) .tabbar { background: linear-gradient(180deg, transparent, rgba(18, 16, 48, 0.82) 45%, #121030); }
:root:has(#app .card-full) .tabbar .tab-tx { color: rgba(243, 236, 255, 0.8); }
:root:has(#app .card-full) body { background: #121030; }

/* ВК (20.10.2026, утро) — «Стена почёта» в Достижениях (achievements.js: achWall): трудные значки — грамоты. */
.ach-wall { margin: 14px 0 6px; }
.ach-wall-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #a5793a; }
.ach-wall-head i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(190, 150, 90, 0.5), transparent); }
.ach-wall-head b { font-size: 11px; letter-spacing: 0.04em; text-transform: none; color: var(--muted); font-weight: 700; }
.ach-wall-row { display: flex; gap: 12px; overflow-x: auto; padding: 14px 4px 10px; margin: 0 -4px; scrollbar-width: none;
  background: linear-gradient(180deg, transparent 0 8px, rgba(180, 150, 110, 0.07) 8px); border-radius: 14px; }
.ach-wall-row::-webkit-scrollbar { display: none; }
.ach-cert { position: relative; flex: 0 0 104px; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(var(--tilt)); transform-origin: 50% -8px;
  transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1); font-family: var(--font-ui); text-align: center; }
.ach-cert:active { transform: rotate(0deg) scale(0.97); }
.ach-cert.is-got { animation: cert-swing 6s ease-in-out infinite; }
@keyframes cert-swing { 0%, 100% { transform: rotate(var(--tilt)); } 50% { transform: rotate(calc(var(--tilt) * -0.6)); } }
.ach-cert-nail { position: absolute; left: 50%; top: -10px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #fff3d6, #b88a3e 60%, #6e4b17); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.ach-cert-nail::before, .ach-cert-nail::after { content: ""; position: absolute; top: 4px; width: 28px; height: 1px; background: rgba(120, 90, 50, 0.55); }
.ach-cert-nail::before { right: 2px; transform-origin: right; transform: rotate(-24deg); }
.ach-cert-nail::after { left: 2px; transform-origin: left; transform: rotate(24deg); }
.ach-cert-frame { display: block; padding: 5px; border-radius: 4px; margin-top: 4px;
  background: linear-gradient(135deg, #e9c983, #b58739 40%, #f1d69c 60%, #9b6d27);
  box-shadow: 0 8px 16px -8px rgba(90, 60, 20, 0.55), inset 0 0 0 1px rgba(255, 245, 220, 0.6); }
.ach-cert-paper { position: relative; display: grid; justify-items: center; gap: 3px; min-height: 120px; padding: 10px 7px 26px; border-radius: 2px;
  background: radial-gradient(120% 80% at 50% 0%, #fffaf0, #f6ead0 70%, #ecdcb8); box-shadow: inset 0 0 0 1px rgba(181, 135, 57, 0.35), inset 0 0 0 3px #fbf3e2, inset 0 0 0 4px rgba(181, 135, 57, 0.25); }
.ach-cert-k { font-size: 8.5px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #a5793a; }
.ach-cert-t { font-family: var(--font-serif); font-weight: 500; font-size: 13px; line-height: 1.15; color: #3b2a14; }
.ach-cert-s { font-size: 9.5px; line-height: 1.25; color: #8a6a3a; }
.ach-cert-seal { position: absolute; left: 50%; bottom: 6px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--sa) 50%, #fff), var(--sa) 55%, color-mix(in srgb, var(--sa) 60%, #3a0a12));
  box-shadow: 0 1px 3px rgba(80, 20, 30, 0.4); }
.ach-cert-seal::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: rgba(255, 245, 230, 0.9); }
.ach-cert.is-empty { cursor: default; animation: none; opacity: 0.55; filter: grayscale(0.7); }
.ach-cert.is-empty .ach-cert-frame { background: repeating-linear-gradient(135deg, #d8cbb4 0 4px, #cbbd9f 4px 8px); }
.ach-cert.is-empty .ach-cert-t { color: #8a7a62; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .ach-cert.is-got { animation: none; } }

/* ВК (20.10.2026, утро, владелец) */
/* Обложка: линий горизонта и дуги нет; солнце и Луна идут от угла экрана до угла, часы — в углах. */
.today-orbit-arc { display: none; }
.today-orbit { width: 100vw; aspect-ratio: auto; height: clamp(150px, 34vw, 240px); }
.today-orbit-end.is-l { left: 16px; }
.today-orbit-end.is-r { right: 16px; }
/* Перо не переворачивается при открытии веера — только чуть уменьшается. */
.tab-fab.is-open .tab-fab-quill { transform: scale(0.9); }
/* Главная: свет от Луны/солнца — за карточками, а не поверх них. */
.obs-beam { z-index: 0; }
/* Эмоции: круг с лицом — под радугой, подпись настроения под кругом. */
.obs-portal[data-home-section="emotions"] { min-height: 200px; }
.obs-portal[data-home-section="emotions"] .obs-portal-em.has-faces { position: absolute; right: 16px; top: 34px; margin: 0; width: 58px; height: 58px; z-index: 1; }
.obs-portal[data-home-section="emotions"] .obs-portal-tx { margin-top: auto; padding-top: 104px; }
.obs-portal[data-home-section="emotions"] .mood-names { width: 100px; top: calc(100% + 5px); }
.obs-portal[data-home-section="emotions"] .mood-names em { font-size: 10px; }
.obs-moon { filter: drop-shadow(0 0 6px rgba(246, 220, 156, 0.7)); transform-box: fill-box; transform-origin: center; animation: lum-float 8s ease-in-out infinite; }
.obs-moon-glow { animation: moon-breathe 7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.obs-cloud { fill: rgba(220, 214, 255, 0.22); animation: cloud-drift 14s ease-in-out infinite alternate; }
@keyframes cloud-drift { from { transform: translateX(-4px); } to { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .obs-moon, .obs-moon-glow, .obs-cloud { animation: none; } }
.obs-portal[data-home-section="emotions"] { min-height: 0; }
.obs-portal[data-home-section="emotions"] .obs-portal-em.has-faces { top: 26px; }
.obs-portal[data-home-section="emotions"] .obs-portal-tx { padding-top: 90px; }
/* Полоса Достижений — прежней толщины, сколько бы ни вырос ряд плиток. */
.obs-portal[data-home-section="achievements"] .obs-progress { flex: 0 0 24px; height: 24px; }

/* ===================================================================================================
   ВК (20.10.2026, день, владелец) — плитки Главной: Сонник, Эмоции, Достижения.
   =================================================================================================== */

/* Сонник: без искр вокруг месяца; месяц с облаком ниже и целиком; редкие падающие звёзды (home.js: homeNightSky). */
.obs-night-glow { display: none; }
.obs-meteor { opacity: 0; animation: obs-meteor var(--d) cubic-bezier(0.3, 0, 0.6, 1) var(--dl) infinite; }
@keyframes obs-meteor {
  0% { opacity: 0; transform: translateX(0); }
  1.5% { opacity: 1; }
  7% { opacity: 0.9; }
  10% { opacity: 0; transform: translateX(78px); }
  100% { opacity: 0; transform: translateX(78px); }
}
.obs-moon { filter: drop-shadow(0 0 8px rgba(246, 220, 156, 0.65)); }
.obs-cloud { fill: rgba(226, 220, 255, 0.26); }
@media (prefers-reduced-motion: reduce) { .obs-meteor { animation: none; opacity: 0; } }

/* Эмоции: спокойная композиция — лицо в стеклянном круге слева сверху, рядом пилюля с названием настроения;
   внизу заголовок и «погода» одной аккуратной строкой. Фон — живое сияние: пятна цвета медленно плывут. */
.obs-portal[data-home-section="emotions"] {
  min-height: 0; isolation: isolate;
  background: linear-gradient(160deg, #f4fff9 0%, #fffaf2 50%, #f5f3ff 100%);
  border: 1px solid rgba(63, 191, 127, 0.22);
  box-shadow: 0 18px 34px -22px rgba(47, 165, 110, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.obs-portal[data-home-section="emotions"]::after { opacity: 0.18; }
.obs-portal[data-home-section="emotions"] > .obs-rainbow,
.obs-portal[data-home-section="emotions"] > .obs-drops,
.obs-portal[data-home-section="emotions"] > .obs-ink { display: none; }
.obs-portal[data-home-section="emotions"] > .obs-aura { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.obs-aura i { position: absolute; border-radius: 50%; filter: blur(22px); opacity: 0.75; will-change: transform; }
.obs-aura i:nth-child(1) { left: -18%; top: -22%; width: 75%; height: 70%; background: rgba(112, 214, 168, 0.75); animation: aura-a 16s ease-in-out infinite alternate; }
.obs-aura i:nth-child(2) { right: -22%; top: -10%; width: 70%; height: 62%; background: rgba(255, 200, 150, 0.75); animation: aura-b 19s ease-in-out infinite alternate; }
.obs-aura i:nth-child(3) { left: 18%; bottom: -30%; width: 80%; height: 66%; background: rgba(150, 165, 255, 0.55); animation: aura-c 22s ease-in-out infinite alternate; }
.obs-aura i:nth-child(4) { left: 40%; top: 30%; width: 40%; height: 38%; background: rgba(255, 170, 200, 0.35); animation: aura-d 25s ease-in-out infinite alternate; }
@keyframes aura-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(28%, 22%) scale(1.15); } }
@keyframes aura-b { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-30%, 26%) scale(0.9); } }
@keyframes aura-c { from { transform: translate(0, 0) scale(1); } to { transform: translate(-18%, -24%) scale(1.12); } }
@keyframes aura-d { from { transform: translate(0, 0) scale(0.9); } to { transform: translate(-60%, -30%) scale(1.2); } }

.obs-portal[data-home-section="emotions"] .obs-portal-em.has-faces {
  position: relative; right: auto; top: auto; margin: 0; width: 56px; height: 56px; z-index: 1; align-self: flex-start; animation: none;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.7));
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4), 0 10px 22px -10px rgba(63, 150, 110, 0.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.obs-portal[data-home-section="emotions"] .obs-portal-em.has-faces::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.85); animation: emo-halo 4.5s ease-in-out infinite;
}
@keyframes emo-halo { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.12); opacity: 0.2; } }
.obs-portal[data-home-section="emotions"] .has-faces .mood-faces { width: 44px; height: 44px; }
/* Подпись настроения — пилюля справа от круга. */
.obs-portal[data-home-section="emotions"] .mood-names { left: calc(100% + 10px); top: 50%; transform: translateY(-50%); width: 120px; height: 24px; }
.obs-portal[data-home-section="emotions"] .mood-names em {
  left: 0; right: auto; top: 0; padding: 4px 10px; border-radius: 100px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: #2c7d58;
  background: rgba(255, 255, 255, 0.72); box-shadow: 0 4px 10px -6px rgba(47, 120, 90, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.obs-portal[data-home-section="emotions"] .obs-portal-tx { margin-top: auto; padding-top: 0; }
.obs-portal[data-home-section="emotions"] .obs-portal-tx b { color: #1f4d39; }
.obs-portal[data-home-section="emotions"] .obs-portal-num { color: #5b7a6c; }
.obs-portal[data-home-section="emotions"] .obs-portal-num em {
  display: block; margin: 1px 0 2px; font-size: 17px; line-height: 1.2; font-style: italic; color: #2a8a5c; text-wrap: balance; animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .obs-aura i, .obs-portal[data-home-section="emotions"] .obs-portal-em.has-faces::before { animation: none; }
}

/* Достижения: розетка гильоше медленно вращается двумя слоями навстречу (муар), блик проходит по плитке,
   вспыхивают искры (home.js: homeGuilloche). */
.obs-portal[data-home-section="achievements"] {
  isolation: isolate;
  background: radial-gradient(70% 60% at 100% 0%, rgba(255, 214, 200, 0.6), transparent 70%), linear-gradient(160deg, #fff8f4, #fde8ee 75%);
}
.obs-portal[data-home-section="achievements"] > .ach-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ach-gl { position: absolute; right: -96px; top: -104px; width: 280px; height: 280px; fill: none; stroke: rgba(214, 98, 124, 0.26); stroke-width: 0.55; }
.ach-gl circle { stroke: rgba(214, 98, 124, 0.35); }
.ach-gl g { transform-box: fill-box; transform-origin: center; }
.ach-gl-a { animation: ach-spin 80s linear infinite; }
.ach-gl-b { stroke: rgba(230, 150, 110, 0.3); animation: ach-spin 120s linear infinite reverse; }
@keyframes ach-spin { to { transform: rotate(360deg); } }
.ach-sheen { position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75) 50%, transparent);
  animation: ach-sheen 7s ease-in-out 2s infinite; }
@keyframes ach-sheen { 0% { opacity: 0; transform: translateX(-120%) skewX(-12deg); } 8% { opacity: 1; } 28% { opacity: 1; transform: translateX(320%) skewX(-12deg); } 30%, 100% { opacity: 0; transform: translateX(320%) skewX(-12deg); } }
.ach-glints i { position: absolute; width: 8px; height: 8px; opacity: 0;
  background: #f2b26a; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: ach-glint 5s ease-in-out infinite; }
.ach-glints i:nth-child(1) { right: 22%; top: 18%; animation-delay: 0.6s; }
.ach-glints i:nth-child(2) { right: 8%; top: 46%; width: 6px; height: 6px; animation-delay: 1.8s; background: #e48aa0; }
.ach-glints i:nth-child(3) { right: 38%; top: 8%; width: 5px; height: 5px; animation-delay: 3.1s; }
.ach-glints i:nth-child(4) { right: 14%; top: 70%; width: 6px; height: 6px; animation-delay: 4.2s; background: #e48aa0; }
.ach-glints i:nth-child(5) { right: 52%; top: 30%; width: 4px; height: 4px; animation-delay: 2.5s; }
@keyframes ach-glint { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0); } 15% { opacity: 1; transform: scale(1.2) rotate(45deg); } 30% { opacity: 0; transform: scale(0.5) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .ach-gl g, .ach-glints i { animation: none; } .ach-sheen, .ach-glints { display: none; } }
/* Пилюля настроения сменяется мягко, без поворота. */
.obs-portal[data-home-section="emotions"] .mood-names em { animation-name: mood-pill; animation-timing-function: ease-in-out; }
@keyframes mood-pill { 0% { opacity: 0; transform: translateX(-6px); } 4% { opacity: 1; transform: none; } 17% { opacity: 1; transform: none; } 20% { opacity: 0; transform: translateX(4px); } 100% { opacity: 0; } }
/* Кружево гаснет к тексту: читается число и полоса. */
.ach-gl { -webkit-mask-image: radial-gradient(circle at 62% 38%, #000 30%, transparent 62%); mask-image: radial-gradient(circle at 62% 38%, #000 30%, transparent 62%); }

/* ===== ВК (20.10.2026, день, 2-й заход): цифр на плитках нет — вместо них живые детали ===== */
.obs-portal .obs-portal-num:empty { display: none; }

/* Летопись: золотой росчерк пера под заголовком пишется, держится и тает; по коже кружится золотая пыль. */
.chr-ink { display: block; width: 120px; height: 16px; margin-top: 4px; overflow: visible; }
.chr-ink path { fill: none; stroke: #e9c27a; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 3px rgba(233, 194, 122, 0.55)); animation: chr-write 9s ease-in-out 1.2s infinite; }
.chr-ink circle { fill: #f5d08a; opacity: 0; animation: chr-dot 9s ease-in-out 1.2s infinite; }
@keyframes chr-write { 0% { stroke-dashoffset: 1; opacity: 1; } 28% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes chr-dot { 0%, 27% { opacity: 0; transform: scale(0); } 31% { opacity: 1; transform: scale(1.4); } 35%, 78% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
.chr-ink circle { transform-box: fill-box; transform-origin: center; }
.obs-portal.is-tome > .obs-dust { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.obs-dust i { position: absolute; bottom: 10%; width: 3px; height: 3px; border-radius: 50%; background: #f5d08a; opacity: 0;
  box-shadow: 0 0 6px 1px rgba(245, 208, 138, 0.7); animation: dust-rise 9s ease-in-out infinite; }
.obs-dust i:nth-child(1) { left: 18%; animation-delay: 0s; }
.obs-dust i:nth-child(2) { left: 42%; animation-delay: 1.6s; width: 2px; height: 2px; }
.obs-dust i:nth-child(3) { left: 63%; animation-delay: 3.1s; }
.obs-dust i:nth-child(4) { left: 78%; animation-delay: 4.7s; width: 2px; height: 2px; }
.obs-dust i:nth-child(5) { left: 30%; animation-delay: 6.2s; width: 2px; height: 2px; }
.obs-dust i:nth-child(6) { left: 55%; animation-delay: 7.6s; }
@keyframes dust-rise { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 0.9; } 50% { transform: translate(10px, -60px); } 85% { opacity: 0.5; } 100% { opacity: 0; transform: translate(-6px, -120px); } }

/* Сонник: три звезды-искры мягко вспыхивают по очереди, второе облачко плывёт навстречу первому. */
.obs-spark { transform-box: fill-box; transform-origin: center; opacity: 0; filter: drop-shadow(0 0 3px rgba(255, 240, 200, 0.9));
  animation: obs-spark-tw 7s ease-in-out var(--dl) infinite; }
@keyframes obs-spark-tw { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0); } 12% { opacity: 1; transform: scale(1) rotate(45deg); } 26% { opacity: 0; transform: scale(0.4) rotate(90deg); } }
.obs-cloud-2 { fill: rgba(226, 220, 255, 0.14); animation-duration: 18s; animation-direction: alternate-reverse; }

/* Эмоции: стеклянные пузырьки настроений тихо поднимаются и покачиваются. */
.obs-portal[data-home-section="emotions"] > .emo-bubbles { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.emo-bubbles i { position: absolute; bottom: -16px; width: 12px; height: 12px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.15) 55%, var(--b, rgba(110, 200, 160, 0.45)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); animation: emo-bubble 10s ease-in-out infinite; }
.emo-bubbles i:nth-child(1) { left: 58%; animation-delay: 0s; }
.emo-bubbles i:nth-child(2) { left: 74%; width: 8px; height: 8px; --b: rgba(245, 180, 120, 0.5); animation-delay: 2s; }
.emo-bubbles i:nth-child(3) { left: 86%; width: 14px; height: 14px; --b: rgba(150, 165, 245, 0.5); animation-delay: 4s; }
.emo-bubbles i:nth-child(4) { left: 66%; width: 7px; height: 7px; --b: rgba(255, 160, 190, 0.5); animation-delay: 6s; }
.emo-bubbles i:nth-child(5) { left: 92%; width: 9px; height: 9px; animation-delay: 8s; }
@keyframes emo-bubble { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 12% { opacity: 1; } 35% { transform: translate(-8px, -60px) scale(1); }
  65% { transform: translate(6px, -120px) scale(1); opacity: 0.85; } 100% { opacity: 0; transform: translate(-4px, -180px) scale(1.1); } }

/* Достижения: медаль после входа тихо покачивается на ленте, по металлу время от времени пробегает блик. */
.obs-portal[data-home-section="achievements"] .obs-portal-em { animation: obs-medal-swing 1.5s var(--ease) 0.2s both, ach-medal-sway 6s ease-in-out 2s infinite; }
@keyframes ach-medal-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } }
.obs-portal[data-home-section="achievements"] .obs-portal-em::after { animation: ach-medal-shine 6s ease-in-out 1.5s infinite; }
@keyframes ach-medal-shine { 0% { transform: translateX(-130%); } 20%, 100% { transform: translateX(130%); } }

@media (prefers-reduced-motion: reduce) {
  .chr-ink path, .chr-ink circle, .obs-dust i, .obs-spark, .emo-bubbles i,
  .obs-portal[data-home-section="achievements"] .obs-portal-em, .obs-portal[data-home-section="achievements"] .obs-portal-em::after { animation: none !important; }
  .chr-ink path { stroke-dashoffset: 0; } .chr-ink circle { opacity: 1; }
  .obs-dust, .emo-bubbles { display: none; }
}

/* ===== ВК (20.10.2026, день, 3-й заход): указатель перехода — стрелка в стеклянном кружке (вариант A).
   Шкала Достижений на плитке меню снята. ===== */
.obs-portal[data-home-section="achievements"] .obs-progress { display: none !important; }
.obs-portal { --go: #c4566e; --go-bg: rgba(255, 255, 255, 0.75); --go-ln: rgba(196, 86, 110, 0.25); }
.obs-portal.is-tome { --go: #f1cd86; --go-bg: rgba(241, 205, 134, 0.12); --go-ln: rgba(241, 205, 134, 0.45); }
.obs-portal.is-night { --go: #f1d69c; --go-bg: rgba(255, 255, 255, 0.1); --go-ln: rgba(241, 214, 156, 0.4); }
.obs-portal[data-home-section="emotions"] { --go: #2a8a5c; --go-bg: rgba(255, 255, 255, 0.72); --go-ln: rgba(42, 138, 92, 0.25); }
.obs-portal > .obs-go {
  position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--go); pointer-events: none;
  background: var(--go-bg); box-shadow: inset 0 0 0 1px var(--go-ln), 0 6px 14px -8px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.obs-portal.is-tome > .obs-go { right: 28px; bottom: 24px; }
.obs-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  animation: obs-go-nod 4s ease-in-out infinite; }
@keyframes obs-go-nod { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(3px); } 90% { transform: translateX(-1px); } }
.obs-portal:active > .obs-go { transform: scale(0.92); }
.obs-portal .obs-portal-tx { padding-right: 38px; }
.obs-portal[data-home-section="emotions"] .obs-portal-num em { font-size: 16px; }
.obs-portal.is-locked > .obs-go { display: none; }
@media (prefers-reduced-motion: reduce) { .obs-go svg { animation: none; } }

/* ===== ВК (25.10.2026): живые детали главной без выхода за плитки ===== */
/* Летопись: строка печатается в фиксированной двухстрочной области. На узком
   экране фраза переносится по пробелу, а не обрезается и не наезжает на стрелку. */
.chr-type {
  display: block; width: 100%; max-width: 118px; height: 30px; margin-top: 4px;
  overflow: hidden; white-space: normal; overflow-wrap: break-word;
  font-family: var(--font-serif); font-size: 11px; font-style: italic; line-height: 14px;
  color: #eed3a4;
}
.chr-type::after {
  content: ""; display: inline-block; width: 1px; height: 11px; margin-left: 2px;
  vertical-align: -1px; background: #f5d08a; animation: chr-caret 1s steps(1) infinite;
}
@keyframes chr-caret { 50% { opacity: 0; } }
:root[data-motion="off"] .chr-type::after { animation: none; opacity: 0.65; }

/* Эмоции: подписи живут в плитке, а не справа от круга. JS переносит их из
   эмблемы сюда; все пять длинных слов используют всю безопасную ширину. */
.obs-portal[data-home-section="emotions"] { min-height: 184px; }
.obs-portal[data-home-section="emotions"] > .mood-names {
  position: absolute; left: 14px; right: 14px; top: 94px; z-index: 2;
  width: auto; height: 30px; transform: none; pointer-events: none;
}
.obs-portal[data-home-section="emotions"] > .mood-names em {
  left: 0; right: 0; top: 0; width: 100%; padding: 4px 6px; border-radius: 12px;
  white-space: normal; overflow-wrap: break-word; text-align: center; line-height: 1.2;
  font-size: 10px; letter-spacing: 0.02em;
}
.obs-portal[data-home-section="emotions"] .obs-portal-tx { padding-top: 124px; }

/* Достижения: герб неподвижен и стоит ровно в центре круглого гильоше.
   Центр эмблемы — (38,38) от плитки; у SVG 168px центр совпадает при -46px. */
.obs-portal[data-home-section="achievements"] .obs-portal-em {
  display: grid; place-items: center; transform: none; transform-origin: center;
  animation: none !important;
}
.obs-portal[data-home-section="achievements"] .obs-portal-em::after { display: none; }
.obs-portal[data-home-section="achievements"] .ach-gl {
  left: -46px; right: auto; top: -46px; width: 168px; height: 168px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 68%);
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 68%);
}

/* Полка Летописи: полный месяц наверху, толщина корешка зависит от названия.
   Своя горизонтальная прокрутка не растягивает документ даже на 320px. */
.cx-shelf {
  justify-content: flex-start; gap: 5px; min-height: 166px; padding: 20px 12px 12px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: rgba(176, 138, 74, 0.35) transparent;
}
.cx-spine-slot {
  position: relative; flex: 0 0 var(--w); width: var(--w); height: var(--h);
  transform: rotate(var(--tilt, 0deg)); transform-origin: 50% 100%;
}
.cx-spine-slot:first-child { margin-left: auto; }
.cx-spine-slot:last-child { margin-right: auto; }
.cx-spine-slot .cx-spine { width: 100%; height: 100%; }
.cx-spine span {
  left: 5px; right: 5px; top: 10px; transform: none; writing-mode: horizontal-tb;
  max-height: none; overflow: visible; white-space: nowrap; text-align: center;
  font-size: 8.5px; line-height: 1.2; letter-spacing: 0.04em;
}
@media (prefers-reduced-motion: reduce) {
  .chr-type::after { animation: none; opacity: 0.65; }
  .cx-spine-slot { transform: none; }
}

/* ===== ВК (25.10.2026, владелец): четыре равные плитки и заметный возврат на обложку ===== */
.obs-portals { grid-auto-rows: 184px; }
.obs-portals > .obs-portal { height: 100%; min-height: 0; }
/* В равной по высоте плитке заголовок и погода закреплены снизу и не обрезаются. */
.obs-portal[data-home-section="emotions"] .obs-portal-tx {
  position: absolute; left: 14px; right: 14px; bottom: 14px; margin: 0; padding: 0 38px 0 0;
}

/* Подпись прямо называет действие, а спокойное кольцо показывает область нажатия. */
.obs-lum-orb::after {
  content: ""; position: absolute; inset: -8px; z-index: 2; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(var(--lum), 0.82);
  box-shadow: 0 0 0 4px rgba(var(--lum), 0.13), 0 0 22px rgba(var(--lum), 0.34);
  animation: obs-home-invite 3.2s ease-in-out infinite;
}
@keyframes obs-home-invite {
  0%, 100% { opacity: 0.55; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.04); }
}
.obs-today[data-home-today]:hover,
.obs-today[data-home-today]:focus-visible {
  border-color: rgba(201, 138, 46, 0.58);
  box-shadow: 0 0 0 3px rgba(233, 194, 122, 0.2), 0 8px 24px rgba(31, 45, 61, 0.13);
  outline: none;
}
.bk .obs-today[data-home-today] {
  border-color: rgba(176, 131, 59, 0.5);
  box-shadow: 0 0 0 3px rgba(233, 194, 122, 0.18), 0 6px 18px rgba(31, 45, 61, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .obs-lum-orb::after { animation: none; opacity: 0.85; transform: none; }
}

/* ===== ВК (25.10.2026, владелец): Эмоции и Достижения — одна сетка на две плитки =====
   Герб — круг 52px в левом верхнем углу; заголовок на той же высоте, что у Летописи и Сонника;
   под ним живая курсивная строка (настроение / «Знаки твоего пути»); внизу слева — подпись в две строки
   (погода недели / последний знак), справа — стрелка. Всё внутри плитки, ничего не наезжает. */
.obs-portals > .obs-portal:is([data-home-section="emotions"], [data-home-section="achievements"]) { display: block; padding: 0; }
.obs-portal:is([data-home-section="emotions"], [data-home-section="achievements"]) > .obs-portal-em,
.obs-portal[data-home-section="emotions"] > .obs-portal-em.has-faces {
  position: absolute; left: 14px; top: 14px; right: auto; z-index: 2; margin: 0;
  width: 52px; height: 52px; border-radius: 50%; align-self: auto;
}
.obs-portal[data-home-section="emotions"] > .obs-portal-em.has-faces {
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72));
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5), 0 10px 22px -10px rgba(63, 150, 110, 0.5);
}
.obs-portal[data-home-section="emotions"] .has-faces .mood-faces { width: 42px; height: 42px; }
.obs-portal[data-home-section="achievements"] > .obs-portal-em {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8), 0 0 0 5px rgba(217, 120, 138, 0.3), 0 10px 22px -10px rgba(181, 83, 106, 0.6);
}
.obs-portal[data-home-section="achievements"] > .obs-portal-em svg { width: 34px; height: 34px; }
.obs-portal[data-home-section="achievements"] > .obs-medal-fx { left: 14px; top: 14px; width: 52px; height: 52px; }
.obs-portal[data-home-section="achievements"] .ach-gl { left: -44px; top: -44px; width: 168px; height: 168px; }

/* Текстовый столбец: заголовок сверху (top 80px — как у тома Летописи), подпись прижата к низу. */
.obs-portal:is([data-home-section="emotions"], [data-home-section="achievements"]) > .obs-portal-tx {
  position: absolute; left: 14px; right: 14px; top: 78px; bottom: 14px; z-index: 2;
  display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0;
}
.obs-portal:is([data-home-section="emotions"], [data-home-section="achievements"]) .obs-portal-tx b {
  display: block; font-size: min(18px, 5.4vw); line-height: 1.25; white-space: nowrap; letter-spacing: 0;
}
.obs-portal[data-home-section="achievements"] .obs-portal-tx b { color: #4a1f2b; }

/* Живая строка под заголовком — один размер и один курсив на обеих плитках. */
.obs-portal-line,
.obs-portal[data-home-section="emotions"] .obs-portal-tx > .mood-names {
  display: block; position: relative; left: auto; right: auto; top: auto; transform: none;
  width: 100%; height: 18px; margin-top: 3px; overflow: hidden;
  font-family: var(--font-serif); font-style: italic; font-size: min(13px, 3.7vw); line-height: 18px; white-space: nowrap;
}
.obs-portal-line { color: #b5536a; }
.obs-portal[data-home-section="emotions"] .obs-portal-tx > .mood-names em {
  position: absolute; left: 0; right: auto; top: 0; width: auto; padding: 0 0 0 12px; margin: 0;
  background: none; box-shadow: none; border-radius: 0; white-space: nowrap; text-align: left;
  font: inherit; letter-spacing: 0; color: var(--ink, #2c7d58);
}
.obs-portal[data-home-section="emotions"] .obs-portal-tx > .mood-names em::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--dot, #5DC495); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

/* Подпись внизу: до двух строк, не заходит под стрелку. */
.obs-portal:is([data-home-section="emotions"], [data-home-section="achievements"]) .obs-portal-num {
  margin-top: auto; padding-right: 40px; min-height: 0;
  font-family: var(--font-ui); font-size: 11.5px; line-height: 14px; font-weight: 600;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.obs-portal:is([data-home-section="emotions"], [data-home-section="achievements"]) .obs-portal-num:empty { display: none; }
.obs-portal:is([data-home-section="emotions"], [data-home-section="achievements"]) .obs-portal-num em {
  display: inline; margin: 0; font: inherit; font-style: normal; animation: none; text-wrap: pretty;
}
.obs-portal[data-home-section="emotions"] .obs-portal-num em { color: #3f7a60; }
.obs-portal[data-home-section="emotions"] .obs-portal-num em::first-letter { text-transform: uppercase; }
.obs-portal[data-home-section="emotions"] .obs-portal-num { display: block; max-height: 28px; }
.obs-portal[data-home-section="emotions"] .obs-portal-num em { display: block; }
.obs-portal[data-home-section="achievements"] .obs-portal-num em { color: #9a4a5c; }
.obs-portal:is([data-home-section="emotions"], [data-home-section="achievements"]) > .obs-go { right: 14px; bottom: 14px; }

/* ===== ВК (25.10.2026, владелец): времена года v2 — видно с первого взгляда =====
   Три слоя на всём приложении (и на заставке): ветка сезона в правом верхнем углу,
   пейзаж внизу, медленно падающие частицы (снег, лепестки, пыльца, листья).
   Сезон ставит quill.js (data-season), проверить заранее — ?season=winter|spring|summer|autumn. */
:root[data-season="winter"] { --s-top: url("./assets/season-winter-top.svg"); --s-ground: url("./assets/season-winter-ground.svg"); --s-fall: url("./assets/season-winter-fall.svg"); }
:root[data-season="spring"] { --s-top: url("./assets/season-spring-top.svg"); --s-ground: url("./assets/season-spring-ground.svg"); --s-fall: url("./assets/season-spring-fall.svg"); }
:root[data-season="summer"] { --s-top: url("./assets/season-summer-top.svg"); --s-ground: url("./assets/season-summer-ground.svg"); --s-fall: url("./assets/season-summer-fall.svg"); }
:root[data-season="autumn"] { --s-top: url("./assets/season-autumn-top.svg"); --s-ground: url("./assets/season-autumn-ground.svg"); --s-fall: url("./assets/season-autumn-fall.svg"); }
:root[data-season] .season-landscape {
  opacity: 1; -webkit-mask-image: none; mask-image: none;
  background-image: var(--s-top), var(--s-ground);
  background-repeat: no-repeat, no-repeat;
  background-size: min(100%, 520px) auto, max(100%, 390px) auto;
  background-position: right top, center bottom;
}
@media (min-width: 700px) {
  :root[data-season] .season-landscape { background-size: 520px auto, auto 320px; background-repeat: no-repeat, repeat-x; }
}
:root[data-season][data-night="1"] .season-landscape { opacity: 0.6; filter: saturate(0.75); }
/* На Главной ветка живёт в небе над светилом (.obs-band::after) — на фоне остаётся только пейзаж. */
:root[data-season] body:has(.obs) .season-landscape { background-image: none, var(--s-ground); }

/* Частицы сезона: два слоя одной плитки с разной скоростью — ощущение глубины без JS. */
:root[data-season] .aurora::after {
  content: ""; position: absolute; inset: -240px 0 0; pointer-events: none; opacity: 0.85; filter: none;
  background-image: var(--s-fall), var(--s-fall);
  background-size: 200px 240px, 140px 168px; background-position: 0 0, 70px 90px;
  animation: season-fall-bg 38s linear infinite;
}
:root[data-season="summer"] .aurora::after { animation-name: season-rise-bg; animation-duration: 46s; opacity: 0.75; }
:root[data-season="spring"] .aurora::after, :root[data-season="autumn"] .aurora::after { animation-duration: 44s; }
@keyframes season-fall-bg { to { background-position: 60px 240px, 110px 258px; } }
@keyframes season-rise-bg { to { background-position: -30px -240px, 40px -78px; } }
@media (prefers-reduced-motion: reduce) { :root[data-season] .aurora::after { animation: none; } }

/* ----- Главная: небо над светилом — во всю ширину, без жёстких краёв, в цветах сезона ----- */
/* Раньше .obs { overflow: clip } обрезал небо и лучи по краю колонки — получался прямоугольник.
   Теперь обрезает только сам слой лучей, а небо ровно в ширину экрана и не даёт прокрутки вбок. */
.obs { overflow: visible; }
.obs-beam { left: calc(50% - 50vw); width: 100vw; transform: none; overflow: hidden; }
.obs-beam i { left: -20vw; right: -20vw; }
.obs-beam::before { background: radial-gradient(ellipse 70% 60% at 50% 0, rgba(var(--lum), 0.9), rgba(var(--lum), 0.35) 45%, transparent 75%); }
.obs[data-light="moon"] .obs-beam::before { background: radial-gradient(ellipse 64% 55% at 50% 0, rgba(214, 224, 255, 0.5), rgba(200, 214, 255, 0.16) 50%, transparent 76%); }

.obs-band {
  top: -90px; height: 470px; overflow: hidden;
  --b1: #ffe4c4; --b2: #fff0dc;
  background: linear-gradient(180deg, var(--b1) 0%, var(--b1) 18%, var(--b2) 48%,
    color-mix(in srgb, var(--b2) 55%, transparent) 68%, color-mix(in srgb, var(--b2) 18%, transparent) 84%, transparent 100%);
}
.obs[data-light="moon"] .obs-band {
  --b1: #1d2352; --b2: #333c7c;
  background: linear-gradient(180deg, var(--b1) 0%, var(--b1) 16%, var(--b2) 44%,
    color-mix(in srgb, var(--b2) 62%, transparent) 62%, color-mix(in srgb, var(--b2) 26%, transparent) 78%,
    color-mix(in srgb, var(--b2) 8%, transparent) 90%, transparent 100%);
}
.obs-band i { -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 80%); mask-image: linear-gradient(180deg, #000 45%, transparent 80%); }
/* Ветка сезона в небе и частицы, которые тают к карточкам. */
.obs-band::after {
  content: ""; position: absolute; right: 0; top: 90px; width: min(78%, 400px); aspect-ratio: 390 / 320;
  background: var(--s-top, none) right top / 100% auto no-repeat; opacity: 0.95;
}
.obs-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--s-fall, none), var(--s-fall, none);
  background-size: 200px 240px, 140px 168px; background-position: 0 0, 70px 90px;
  -webkit-mask-image: linear-gradient(180deg, transparent 12%, #000 30%, #000 60%, transparent 92%);
  mask-image: linear-gradient(180deg, transparent 12%, #000 30%, #000 60%, transparent 92%);
  animation: season-fall-bg 34s linear infinite; opacity: 0.9;
}
.obs[data-light="moon"] .obs-band::before { opacity: 0.7; }
.obs[data-light="moon"] .obs-band::after { opacity: 0.8; filter: brightness(0.85) saturate(0.85) drop-shadow(0 0 10px rgba(255, 255, 255, 0.12)); }
:root[data-season="summer"] .obs-band::before { animation-name: season-rise-bg; }
:root[data-season="summer"] .obs[data-light="moon"] .obs-band::before { filter: brightness(1.3) drop-shadow(0 0 4px rgba(255, 220, 120, 0.9)); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .obs-band::before { animation: none; } }

/* Цвета неба по сезонам: днём — светлое утро сезона, ночью — своя ночь. */
:root[data-season="winter"] .obs-band { --b1: #d5e4f8; --b2: #ecf3fd; }
:root[data-season="spring"] .obs-band { --b1: #fbdbe5; --b2: #eef6e8; }
:root[data-season="summer"] .obs-band { --b1: #ffe2a6; --b2: #fff3d4; }
:root[data-season="autumn"] .obs-band { --b1: #f7cfa3; --b2: #fbe8d4; }
:root[data-season="winter"] .obs[data-light="moon"] .obs-band { --b1: #14254d; --b2: #2d4a82; }
:root[data-season="spring"] .obs[data-light="moon"] .obs-band { --b1: #231f4f; --b2: #4b3f80; }
:root[data-season="summer"] .obs[data-light="moon"] .obs-band { --b1: #102544; --b2: #1f4a6e; }
:root[data-season="autumn"] .obs[data-light="moon"] .obs-band { --b1: #261a36; --b2: #533352; }
:root[data-season="spring"] .obs[data-light="sun"] .obs-luminary .obs-today-tx span { color: #b45c7c; }
:root[data-season="winter"] .obs[data-light="sun"] .obs-luminary .obs-today-tx span { color: #4f73a6; }
:root[data-season="summer"] .obs[data-light="sun"] .obs-luminary .obs-today-tx span { color: #b9772a; }
:root[data-season="autumn"] .obs[data-light="sun"] .obs-luminary .obs-today-tx span { color: #b0602a; }
:root[data-season="autumn"] .aurora::after { opacity: 0.6; }
/* Реже частиц: крупная плитка — спокойный редкий снегопад/листопад, а не конфетти. */
:root[data-season] .aurora::after, .obs-band::before { background-size: 330px 400px, 230px 280px; background-position: 0 0, 120px 160px; }
:root[data-season] .aurora::after { opacity: 0.6; }
@keyframes season-fall-bg { to { background-position: 90px 400px, 170px 440px; } }
@keyframes season-rise-bg { to { background-position: -50px -400px, 70px -120px; } }

/* ===== ВК (25.10.2026, владелец): читаемость поверх сезонной темы =====
   Яркая тема — только на Главной и заставке. На экранах с текстом между фоном и содержимым ложится
   «бумага» цвета раздела (--bg: светлая днём, тёмная в Соннике): сверху и снизу она чуть прозрачнее,
   чтобы ветка и пейзаж угадывались, а за строками — плотная. Появляется и уходит плавно. */
.app::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 70%, transparent) 0,
    color-mix(in srgb, var(--bg) 90%, transparent) 150px,
    color-mix(in srgb, var(--bg) 93%, transparent) 55%,
    color-mix(in srgb, var(--bg) 84%, transparent) 82%,
    color-mix(in srgb, var(--bg) 66%, transparent) 100%);
  opacity: 1; transition: opacity 0.6s ease;
}
body.is-booting .app::before, body:has(.obs) .app::before { opacity: 0; }
/* Частицы на экранах с текстом — реже и тише, ветка — меньше, чтобы не спорить с заголовком. */
:root[data-season] body:not(.is-booting):not(:has(.obs)) .aurora::after { opacity: 0.22; }
:root[data-season] body:not(.is-booting):not(:has(.obs)) .season-landscape { background-size: min(62%, 320px) auto, max(100%, 390px) auto; }
.aurora::after, .season-landscape { transition: opacity 0.6s ease; }
/* Обложка дня — тоже «главная»: тема яркая, бумаги нет. Частицы обложки живут в небе и тают
   к нижней части экрана, где лежит «Твоя неделя», — не падают поверх цифр. */
body:has(.today) .app::before { opacity: 0; }
body > .today-season-particles {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 42%, transparent 60%);
  mask-image: linear-gradient(180deg, #000 0, #000 42%, transparent 60%);
}

/* ===== Компактная главная и короткая лента архива =====
   На главной сразу видны два дополнительных действия; остальные не удалены,
   а раскрываются по запросу. Архив подгружает следующие шесть итогов кнопкой. */
.obs-rows:not(.is-expanded) > .home-extra,
.bk-mg:not(.is-expanded) > .home-extra { display: none; }
.obs-row.obs-more > span { display: block; }
.obs-more-dots { flex: 0 0 26px; width: 26px; color: var(--muted); font-size: 14px; line-height: 1; letter-spacing: 2px; text-align: center; }
.obs-more-chevron { flex: none; color: var(--muted); font-size: 20px; line-height: 1; transition: transform 0.2s ease; }
.obs-rows.is-expanded .obs-more-chevron { transform: rotate(180deg); }
.bk-more { grid-column: 1 / -1; justify-content: center; color: var(--muted) !important; }
.bk-more > span[aria-hidden="true"] { font-size: 14px; line-height: 1; letter-spacing: 2px; }
.rp-arch-more { display: block; margin: 14px auto 0; }
.rp-arch-more[hidden] { display: none; }

/* ===== ВК (28.10.2026, владелец): живой фон — акварельный пейзаж сезона и ночь Сонника =====
   Слой .lbg ставит living-bg.js внутрь .aurora и включает <html class="lbg-on">. Картинка —
   assets/bg/<тема>.webp; поверх — ветка, туман, блики воды, свет, искра по золотой нити
   и частицы на canvas. Прежний фон (орбы, векторный пейзаж, CSS-частицы, частицы обложки)
   при этом гаснет — иначе два листопада и два пейзажа друг на друге. */
.lbg { position: absolute; inset: 0; overflow: hidden; --px: 0; --py: 0; transition: opacity 0.9s var(--ease); }
body.is-booting .lbg { opacity: 0.42; } /* на заставке пейзаж тихо проступает за пером, потом раскрывается целиком */
.lbg-theme { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; background: var(--paper); }
.lbg-theme.on { opacity: 1; }
.lbg-fill { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(28px) saturate(0.9); opacity: 0; }
.lbg-theme.is-wide .lbg-fill { opacity: 0.85; }
.lbg-art { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: lbg-breathe 38s ease-in-out infinite alternate; }
.lbg-art > * { position: absolute; inset: 0; }
.lbg-base, .lbg-branch {
  background-size: 100% 100%;
  translate: calc(var(--px) * -5px) calc(var(--py) * -4px); transition: translate 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lbg-theme.is-wide .lbg-art { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
/* Ветка — копия картинки под маской правого верхнего угла, качается от угла. */
.lbg-branch {
  transform-origin: 100% 0;
  -webkit-mask-image: radial-gradient(ellipse 58% 34% at 100% 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 34% at 100% 0%, #000 55%, transparent 100%);
  animation: lbg-sway 7s ease-in-out infinite;
}
@keyframes lbg-breathe { from { scale: 1.02; } to { scale: 1.07; } }
@keyframes lbg-sway { 0%, 100% { transform: rotate(0deg) skewX(0deg); } 35% { transform: rotate(1.1deg) skewX(0.4deg); } 70% { transform: rotate(-0.5deg) skewX(-0.2deg); } }
/* Вода: бегущие блики только по нижней полосе. */
.lbg-art > .lbg-water {
  top: 83%; mix-blend-mode: screen; opacity: var(--water, 0.5);
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(255, 255, 255, 0.55) 6px, transparent 7px 13px);
  background-size: 100% 26px; filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%), linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%), linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  mask-composite: intersect;
  animation: lbg-ripple 6s linear infinite;
}
.lbg-water::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7) 50%, transparent) no-repeat; background-size: 40% 100%; animation: lbg-glide 9s ease-in-out infinite; }
@keyframes lbg-ripple { to { background-position: 0 26px; } }
@keyframes lbg-glide { from { background-position: -60% 0; } to { background-position: 160% 0; } }
/* Туман над водой и холмами. */
.lbg-mist { translate: calc(var(--px) * -14px) 0; transition: translate 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lbg-mist i { position: absolute; border-radius: 50%; filter: blur(18px); background: radial-gradient(closest-side, var(--mist), transparent); opacity: var(--mist-a, 0.7); }
.lbg-mist i:nth-child(1) { left: -30%; top: 72%; width: 90%; height: 12%; animation: lbg-drift 46s ease-in-out infinite alternate; }
.lbg-mist i:nth-child(2) { left: 30%; top: 77%; width: 100%; height: 10%; animation: lbg-drift 58s ease-in-out infinite alternate-reverse; }
.lbg-mist i:nth-child(3) { left: -10%; top: 82%; width: 80%; height: 8%; animation: lbg-drift 38s ease-in-out infinite alternate; }
.lbg-mist i:nth-child(4) { left: 40%; top: 40%; width: 80%; height: 22%; opacity: calc(var(--mist-a, 0.7) * 0.35); animation: lbg-drift 70s ease-in-out infinite alternate-reverse; }
@keyframes lbg-drift { from { transform: translateX(-12%); } to { transform: translateX(14%); } }
/* Свет: весной — розоватый у ветки, летом — солнце, осенью — тёплая дымка у воды, ночью — луна. */
.lbg-light { mix-blend-mode: screen; }
.lbg-light::before {
  content: ""; position: absolute; left: var(--lx, 85%); top: var(--ly, 5%); width: var(--lr, 90%); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, var(--light), transparent);
  animation: lbg-pulse 9s ease-in-out infinite;
}
@keyframes lbg-pulse { 0%, 100% { opacity: 0.55; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
.lbg-rays {
  mix-blend-mode: screen; opacity: 0.3; filter: blur(6px);
  background: repeating-conic-gradient(from 200deg at 105% -5%, rgba(255, 236, 190, 0) 0deg 4deg, rgba(255, 236, 190, 0.55) 5deg 6deg, rgba(255, 236, 190, 0) 8deg 13deg);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 100% 0, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 120% 90% at 100% 0, #000 10%, transparent 75%);
  animation: lbg-rays 14s ease-in-out infinite;
}
@keyframes lbg-rays { 0%, 100% { opacity: 0.25; transform: rotate(-1.5deg); } 50% { opacity: 0.7; transform: rotate(1.5deg); } }
.lbg-line { width: 100%; height: 100%; overflow: visible; }
.lbg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* «Без движения» и reduced motion: картинка стоит, искра спрятана скриптом, частиц нет. */
:root[data-motion="off"] .lbg *, :root[data-motion="off"] .lbg *::before, :root[data-motion="off"] .lbg *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .lbg *, .lbg *::before, .lbg *::after { animation: none !important; } }

/* Прежний фон уступает место пейзажу. */
:root.lbg-on .aurora .orb,
:root.lbg-on .season-landscape,
:root.lbg-on .night-dust,
:root.lbg-on body > .today-season-particles { display: none !important; }
:root.lbg-on .aurora::after { content: none !important; }
/* Небо обложки и Главной больше не рисует свой пейзаж и плотную заливку — сквозь него виден живой фон.
   Солнце, луна, подписи и вечерний/ночной полупрозрачный тон неба остаются. */
:root.lbg-on .today-sky, :root.lbg-on .today-sky.has-season { background: transparent !important; }
:root.lbg-on .today-drift { display: none; }
:root.lbg-on .obs[data-light="sun"] .obs-band { background: transparent; }
:root.lbg-on .obs-band::before, :root.lbg-on .obs-band::after { content: none; }
/* Бумага под текстом — легче прежней: центр картинки и так спокойный, по краям угадываются ветка и пейзаж. */
:root.lbg-on .app::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 30%, transparent) 0,
    color-mix(in srgb, var(--bg) 58%, transparent) 160px,
    color-mix(in srgb, var(--bg) 62%, transparent) 55%,
    color-mix(in srgb, var(--bg) 40%, transparent) 82%,
    color-mix(in srgb, var(--bg) 12%, transparent) 100%);
}
:root.lbg-on[data-night="1"] .app::before {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 25%, transparent) 0,
    color-mix(in srgb, var(--bg) 50%, transparent) 160px,
    color-mix(in srgb, var(--bg) 55%, transparent) 55%,
    color-mix(in srgb, var(--bg) 30%, transparent) 85%,
    transparent 100%);
}
:root.lbg-on[data-night="1"] body { background: #0e1420; }

/* ===== ВК (28.10.2026, владелец): Луна на Главной светит мягким жёлтым =====
   Ночью ореол, кольцо и лучи — тёплые (как янтарный свет лампы), а не холодные сиреневые;
   свет приглушён, чтобы не спорить с темой. Ореол медленно «дышит», диск чуть светится. */
.obs[data-light="moon"] { --lum: 255, 221, 150; --lum-soft: rgba(255, 224, 160, 0.45); }
.obs[data-light="moon"] .obs-lum-halo {
  inset: -30px;
  background: radial-gradient(circle, rgba(255, 220, 140, 0.34) 0, rgba(255, 210, 130, 0.13) 42%, transparent 68%);
  animation: moon-glow 6.5s ease-in-out infinite;
}
@keyframes moon-glow {
  0%, 100% { opacity: 0.6; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.06); }
}
.obs[data-light="moon"] .obs-lum-orb .obs-today-moon {
  filter: drop-shadow(0 0 10px rgba(255, 214, 130, 0.45)) drop-shadow(0 4px 14px rgba(255, 196, 110, 0.25));
  animation: moon-disc-glow 6.5s ease-in-out infinite;
}
@keyframes moon-disc-glow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 214, 130, 0.35)) drop-shadow(0 4px 14px rgba(255, 196, 110, 0.18)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 214, 130, 0.55)) drop-shadow(0 4px 18px rgba(255, 196, 110, 0.3)); }
}
.obs[data-light="moon"] .obs-lum-orb::after {
  border-color: rgba(255, 221, 150, 0.5);
  box-shadow: 0 0 0 4px rgba(255, 221, 150, 0.08), 0 0 18px rgba(255, 214, 130, 0.22);
}
/* Лучи по карточкам — едва заметные, тёплые. */
.obs[data-light="moon"] .obs-beam { opacity: 0.6; }
.obs[data-light="moon"] .obs-beam::before { background: radial-gradient(ellipse 56% 52% at 50% 0, rgba(255, 222, 156, 0.32), rgba(255, 214, 140, 0.1) 50%, transparent 76%); }
.obs[data-light="moon"] .obs-beam i { opacity: 0.22; }
@media (prefers-reduced-motion: reduce) {
  .obs[data-light="moon"] .obs-lum-halo, .obs[data-light="moon"] .obs-lum-orb .obs-today-moon { animation: none; }
}

/* ===== ВК (28.10.2026, владелец): лучи светила на Главной — слабые и рассеянные =====
   Полосы больше не режут карточки: размыты до мягкого веера и почти прозрачны; общее сияние
   от светила тише. Днём и ночью одинаково спокойно. */
.obs-beam i { filter: blur(14px); opacity: 0.32; animation-duration: 22s; }
.obs-beam::before { background: radial-gradient(ellipse 52% 50% at 50% 0, rgba(var(--lum), 0.42), rgba(var(--lum), 0.12) 48%, transparent 74%); }
.obs[data-light="sun"] .obs-beam { opacity: 0.75; }
.obs[data-light="moon"] .obs-beam { opacity: 0.5; }
.obs[data-light="moon"] .obs-beam i { opacity: 0.14; }
.obs[data-light="moon"] .obs-beam::before { background: radial-gradient(ellipse 52% 48% at 50% 0, rgba(255, 222, 156, 0.24), rgba(255, 214, 140, 0.07) 50%, transparent 74%); }

/* Карточка «Мой путь с Марком» (mark-card.js) — над «Продолжить» на главной. Зелёный Марка + золото дневника. */
.mk-card { position: relative; z-index: 2; margin-top: 12px; padding: 16px; border-radius: 20px; font-family: var(--font-ui); color: var(--fg);
  background: color-mix(in srgb, #ffffff 82%, transparent); border: 1px solid color-mix(in srgb, #23463b 22%, transparent);
  box-shadow: 0 10px 30px -18px rgba(31, 45, 61, 0.35); }
.mk-card.is-loading { opacity: .7; }
.mk-head { display: flex; align-items: center; gap: 12px; }
.mk-badge { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 18px var(--font-serif);
  color: #f3e7cf; background: #23463b; box-shadow: 0 0 0 3px color-mix(in srgb, #e9c27a 45%, transparent); }
.mk-head-tx { display: flex; flex-direction: column; min-width: 0; }
.mk-head-tx b { font: 600 17px var(--font-serif); }
.mk-head-tx span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.mk-test { position: absolute; top: 12px; right: 14px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.mk-card.is-locked { background: linear-gradient(160deg, color-mix(in srgb, #23463b 8%, #fff), color-mix(in srgb, #e9c27a 14%, #fff)); }
.mk-card.is-locked { cursor: pointer; padding-right: 64px; -webkit-tap-highlight-color: transparent; }
.mk-card.is-locked:active { transform: scale(0.99); }
.mk-card.is-locked > .mk-btn { margin-right: -48px; width: calc(100% + 48px); }
/* Висячий замок: шнурок от верхнего края карточки, точка подвеса сверху. Появляется качнувшись (obs-medal-swing,
   как медаль Достижений), потом иногда покачивается и замирает. Тап — короткий рывок. */
.mk-lock { position: absolute; top: -1px; right: 14px; width: 40px; height: 64px; transform-origin: 50% 0;
  animation: mk-lock-in 1.5s var(--ease, cubic-bezier(.2,.8,.2,1)) 0.2s both, mk-lock-sway 7s ease-in-out 2s infinite; }
.mk-lock svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgba(35, 70, 59, 0.28)); }
.mk-lock-cord { stroke: #b8862b; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.mk-lock-shackle { stroke: #b8862b; stroke-width: 3.4; fill: none; stroke-linecap: round; }
.mk-lock-body { fill: #23463b; stroke: #e9c27a; stroke-width: 1.4; }
.mk-lock-hole { fill: #e9c27a; stroke: #e9c27a; stroke-width: 2; stroke-linecap: round; }
.mk-lock-glint { stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.6; stroke-linecap: round; }
.mk-lock.is-tap { animation: mk-lock-tap 0.55s ease-out both; }
@keyframes mk-lock-in { 0% { opacity: 0; transform: rotate(-28deg) translateY(-6px); } 35% { opacity: 1; transform: rotate(14deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(3deg); } 100% { transform: none; } }
@keyframes mk-lock-sway { 0%, 58%, 100% { transform: rotate(0); } 66% { transform: rotate(9deg); } 74% { transform: rotate(-7deg); } 82% { transform: rotate(4deg); } 90% { transform: rotate(-2deg); } }
@keyframes mk-lock-tap { 0% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 55% { transform: rotate(10deg); } 80% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .mk-lock, .mk-lock.is-tap { animation: none; } }
.mk-teaser { margin: 12px 0 12px 2px; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.mk-empty { margin: 12px 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.mk-topic { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.mk-topic-title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mk-topic-title b { font-size: 15px; }
.mk-sphere { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.mk-picture { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; }
.mk-step { margin-top: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #23463b 7%, transparent); }
.mk-step.is-due { background: color-mix(in srgb, #f0a93c 14%, transparent); }
.mk-step-label { font-size: 11px; font-weight: 700; color: #23463b; }
.mk-step p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; }
.mk-review { margin-top: 8px; }
.mk-q { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip { padding: 7px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, #23463b 30%, transparent); background: #fff; font: 600 12.5px var(--font-ui); color: #23463b; cursor: pointer; }
.mk-chip:disabled { opacity: .5; }
.mk-link { margin-top: 6px; padding: 0; border: 0; background: none; font: 600 12.5px var(--font-ui); color: #23463b; text-decoration: underline; cursor: pointer; }
.mk-refl { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.mk-refl-row { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; text-align: left; font: 13.5px var(--font-ui); color: inherit; cursor: pointer; line-height: 1.4; }
.mk-portrait { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.mk-portrait p { margin: 4px 0 0; font: italic 14px var(--font-serif); line-height: 1.45; }
.mk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.mk-btn { min-height: 42px; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, #23463b 28%, transparent); background: #fff;
  font: 700 13.5px var(--font-ui); color: #23463b; cursor: pointer; }
.mk-btn.primary { background: #23463b; color: #f6efe0; border-color: #23463b; }
.mk-card > .mk-btn { width: 100%; margin-top: 12px; }
.mk-card.is-locked > .mk-btn { margin-top: 0; }