/* Тема HeyMira — порт heymira_kotlin ui/theme (Color.kt, Type.kt).
   Единственный источник цветов/шрифтов. Хардкод цветов в css страниц запрещён. */

/* ---------- Шрифты ---------- */
/* woff2 (≈¼ размера ttf) сгенерирован из тех же ttf: fontTools, flavor=woff2. */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant_garamond_regular.woff2") format("woff2"), url("../fonts/cormorant_garamond_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant_garamond_medium.woff2") format("woff2"), url("../fonts/cormorant_garamond_medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant_garamond_semibold.woff2") format("woff2"), url("../fonts/cormorant_garamond_semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant_garamond_bold.woff2") format("woff2"), url("../fonts/cormorant_garamond_bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter_regular.woff2") format("woff2"), url("../fonts/inter_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter_medium.woff2") format("woff2"), url("../fonts/inter_medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter_semibold.woff2") format("woff2"), url("../fonts/inter_semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter_bold.woff2") format("woff2"), url("../fonts/inter_bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lobster"; src: url("../fonts/lobster_regular.woff2") format("woff2"), url("../fonts/lobster_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }

/* Скрытая вкладка (html.mira-hidden ставит core/ui.js): все CSS-анимации стоят. */
.mira-hidden *, .mira-hidden *::before, .mira-hidden *::after { animation-play-state: paused !important; }
/* Открыт оверлей (html.mira-overlay ставит core/ui.js): бабл обучения под ним
   не виден и не анимируется — как в Android, где подсказка скрыта при overlay. */
.mira-overlay .tutorial-guide { visibility: hidden; }
.mira-overlay .tutorial-guide *, .mira-overlay .tutorial-guide *::before, .mira-overlay .tutorial-guide *::after { animation-play-state: paused !important; }

/* ---------- Токены (MiraColors) ---------- */
:root {
  --mira-background: #0A0E27;
  --mira-surface: #161B3D;
  --mira-surface-secondary: #1E2347;

  --mira-gold: #D4A843;
  --mira-gold-light: #F0D68A;
  --mira-gold-dark: #B8860B;

  --mira-purple-glow: #7B5EA7;
  --mira-deep-purple: #1A0A2E;
  --mira-mid-purple: #2D1B4E;

  --mira-text-primary: #F5F0E8;
  --mira-text-secondary: #A0A4B8;

  --mira-error: #CF6679;

  --mira-bubble-mira: #1E1A4E;
  --mira-bubble-user: #1A2040;
  /* GlowBubble.kt: обводки-свечения баблов + их фон */
  --mira-bot-glow: #E8B630;
  --mira-user-glow: #00B4B4;
  --mira-bubble-bg: #0E1228;

  --font-display: "Cormorant Garamond", serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-script: "Lobster", cursive;

  /* Раскладка: мобайл-первый, на десктопе — колонка-карточка по центру */
  --page-max-width: 520px;
  --tabbar-height: 57px; /* 7 + 28 + 3 + 12 + 7 (HeymiraBottomNav) */

  --radius-card: 16px;
  --radius-button: 24px;
  --radius-sheet: 20px;
}

/* ---------- База ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--mira-background);
  color: var(--mira-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* Небо и звёзды рисует js/core/ui.js (initStarfield — порт
   StarBackground.kt: градиент + три туманности в битмапе, 150 звёзд в
   статичных слоях с CSS-мерцанием). Здесь только подложка на время загрузки
   скрипта. */
.starfield { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--mira-background); }

/* ---------- Типографика (Type.kt) ---------- */
.display-large { font-family: var(--font-display); font-weight: 600; font-size: 2.25rem; line-height: 2.75rem; }
.display-medium { font-family: var(--font-display); font-weight: 600; font-size: 1.875rem; line-height: 2.375rem; }
.display-small { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 2rem; }
.headline-large { font-family: var(--font-display); font-weight: 500; font-size: 1.75rem; line-height: 2.25rem; }
.headline-medium { font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; line-height: 1.875rem; }
.headline-small { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.75rem; }
.title-large { font-weight: 600; font-size: 1.125rem; line-height: 1.5rem; }
.title-medium { font-weight: 600; font-size: 1rem; line-height: 1.375rem; }
.title-small { font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; }
.body-large { font-size: 1rem; line-height: 1.5rem; }
.body-medium { font-size: 0.875rem; line-height: 1.25rem; }
.body-small { font-size: 0.75rem; line-height: 1rem; }
.label-large { font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; }
.label-medium { font-weight: 500; font-size: 0.75rem; line-height: 1rem; }
.label-small { font-weight: 500; font-size: 0.6875rem; line-height: 0.875rem; }
.text-secondary { color: var(--mira-text-secondary); }
.text-gold { color: var(--mira-gold); }
.text-error { color: var(--mira-error); }

/* ---------- Страница ---------- */
.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
  min-height: 100dvh;
  padding: 16px 16px calc(var(--tabbar-height) + 24px);
  display: flex; flex-direction: column;
}
.page--no-tabs { padding-bottom: 24px; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px;
  border: none; border-radius: var(--radius-button);
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  cursor: pointer; text-decoration: none;
  transition: filter 0.15s ease, transform 0.05s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-gold {
  background: linear-gradient(135deg, var(--mira-gold-light), var(--mira-gold) 55%, var(--mira-gold-dark));
  color: var(--mira-deep-purple);
  box-shadow: 0 0 24px rgba(212, 168, 67, 0.35);
}
.btn-gold:hover { filter: brightness(1.06); }
.btn-outline {
  background: transparent; color: var(--mira-text-primary);
  border: 1px solid rgba(212, 168, 67, 0.5);
}
.btn-surface { background: var(--mira-surface-secondary); color: var(--mira-text-primary); }
.btn-text { background: transparent; color: var(--mira-text-secondary); min-height: 44px; }
.btn-block { display: flex; width: 100%; }

/* ---------- Общие компоненты core/ui_kit — ОДНА реализация на все страницы ----------
   Классы: .gold-btn (GoldButton.kt), .gold-outline-btn (GoldOutlineButton.kt),
   .dialog.dialog-m3 + .m3-* (AlertDialog M3), .sheet.sheet-bg (ModalBottomSheet
   на Background), .zodiac-avatar (ZodiacAvatar.kt). Локальные копии в css
   страниц не заводить — только отступы вокруг (margin), не вид.

   GoldButton: 54 × радиус 14, во всю ширину, текст Inter Bold 16 / 0.5 цветом
   Background, значок слева 20 + зазор 8. Фон Gold, поверх — полуширинный
   градиент Gold→GoldLight→Gold, который линейно ездит с левой половины на
   правую и обратно за 3 с (endlessPhaseState reverse, LinearEasing); блик —
   отдельный слой с transform (композитор, без перерисовки кнопки). Тень
   elevation 12 Gold@89/255. enabled=false кнопку НЕ притушивает (в Android
   только выключает клик); loading — спиннер 24 / 2.5 цветом Background. */
.gold-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 54px; min-height: 54px; padding: 0 16px; margin: 0;
  border: none; border-radius: 14px;
  background: var(--mira-gold); color: var(--mira-background);
  font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 20px; letter-spacing: 0.5px;
  text-align: center; text-decoration: none;
  box-shadow: 0 6px 12px rgba(212, 168, 67, 0.35);
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
}
.gold-btn::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; z-index: -1;
  background: linear-gradient(90deg, var(--mira-gold), var(--mira-gold-light) 50%, var(--mira-gold));
  animation: gold-shimmer 3s linear infinite alternate; will-change: transform;
}
@keyframes gold-shimmer { from { transform: translateX(0); } to { transform: translateX(100%); } }
.gold-btn:hover { filter: none; }
.gold-btn:disabled { cursor: default; opacity: 1; }
.gold-btn svg, .gold-btn .mi { flex: 0 0 auto; width: 20px; height: 20px; color: var(--mira-background); }
.gold-btn .btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gold-btn.loading, .gold-btn.is-loading { pointer-events: none; }
.gold-btn.loading > *, .gold-btn.is-loading > * { visibility: hidden; }
.gold-btn.loading { color: transparent; }
.gold-btn.loading::after, .gold-btn.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  box-sizing: border-box; border-radius: 50%;
  border: 2.5px solid transparent; border-top-color: var(--mira-background); border-right-color: var(--mira-background); /* GoldButton.kt:103-107 — без дорожки */
  animation: mira-spin 0.8s linear infinite;
}
/* GoldOutlineButton: 54 × радиус 14, обводка 1.5 Gold, фон прозрачный, текст
   Inter SemiBold 16 / 0.5 Gold в одну строку, значки 20 слева / 18 справа,
   поля по бокам 8; enabled=false — обводка и текст 40 %. Размер шрифта
   меняется переменной --gob-size (параметр fontSize в Kotlin). */
.gold-outline-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 54px; min-height: 54px; padding: 0 8px; margin: 0;
  border-radius: 14px; border: 1.5px solid var(--mira-gold);
  background: transparent; color: var(--mira-gold);
  font-family: var(--font-body); font-weight: 600; font-size: var(--gob-size, 16px); line-height: 20px; letter-spacing: 0.5px;
  white-space: nowrap; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
}
.gold-outline-btn:disabled { opacity: 0.4; cursor: default; }
.gold-outline-btn .btn-label { min-width: 0; overflow: hidden; text-overflow: clip; }
.gold-outline-btn .btn-label.ellipsis { text-overflow: ellipsis; }
.gold-outline-btn svg, .gold-outline-btn .mi { flex: 0 0 auto; width: 20px; height: 20px; }
.gold-outline-btn .btn-label + svg, .gold-outline-btn .btn-label + .mi { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .gold-btn::before { animation: none; } }

/* AlertDialog Material 3: радиус 28, поля 24, без обводки; заголовок
   headlineSmall (Cormorant Medium 20/28), фон Surface (во всех AlertDialog
   Kotlin containerColor = MiraColors.Surface), текст 14/20 TextSecondary, кнопки-текст справа. */
.dialog.dialog-m3 { border-radius: 28px; padding: 24px; border-color: transparent; }
.m3-alert-title { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.75rem; color: var(--mira-text-primary); }
/* Там, где в Kotlin заголовку задан SemiBold явно (выход, история звонков, связь-премиум). */
.m3-alert-title.sb { font-weight: 600; }
.m3-alert-body { margin-top: 16px; font-size: 0.875rem; line-height: 1.25rem; color: var(--mira-text-secondary); }
.m3-alert-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.m3-text-btn {
  min-height: 40px; padding: 0 12px; border: none; border-radius: 20px; background: transparent; cursor: pointer;
  color: var(--mira-gold); font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.m3-text-btn.error { color: var(--mira-error); }
.m3-text-btn.muted { color: var(--mira-text-secondary); }
.m3-text-btn:disabled { opacity: 0.5; cursor: default; }

/* ModalBottomSheet(containerColor = Background): без обводки, радиус 24 сверху
   (свой shape — через --sheet-radius), своя ручка 40×4 Gold@0.25. */
.sheet.sheet-bg { background: var(--mira-background); border-color: transparent; border-radius: var(--sheet-radius, 24px) var(--sheet-radius, 24px) 0 0; }
.sheet.sheet-bg::before { width: 40px; height: 4px; background: rgba(212, 168, 67, 0.25); }
/* ModalBottomSheet с ручкой M3 по умолчанию (BottomSheetDefaults.DragHandle):
   32×4, onSurfaceVariant@0.4, поля 22 сверху и снизу; форма по умолчанию —
   радиус 28 (свой shape — через --sheet-radius). Сочетается с .sheet-bg,
   если containerColor = Background. */
.sheet.sheet-m3 { border-color: transparent; border-radius: var(--sheet-radius, 28px) var(--sheet-radius, 28px) 0 0; padding-top: 22px; }
.sheet.sheet-m3::before { width: 32px; height: 4px; border-radius: 2px; background: rgba(160, 164, 184, 0.4); margin: 0 auto 22px; }

/* Кнопки M3 (Button / OutlinedButton / TextButton): 48 во всю ширину, пилюля,
   поля 24, подпись labelLarge (Inter SemiBold 14/20). Button: фон primary
   (Gold), текст onPrimary (DeepPurple); выключенная — onSurface@12 % / @38 %.
   OutlinedButton: обводка 1 цветом outline тёмной схемы (#938F99), текст Gold.
   TextButton: 40, поля 12, текст Gold. */
.m3-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; padding: 0 24px;
  border: none; border-radius: 24px; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 20px; text-decoration: none;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.m3-btn-filled { background: var(--mira-gold); color: var(--mira-deep-purple); }
.m3-btn-filled:disabled { background: rgba(245, 240, 232, 0.12); color: rgba(245, 240, 232, 0.38); cursor: default; }
.m3-btn-outlined { border: 1px solid #938F99; color: var(--mira-gold); }
.m3-btn-outlined:active, .m3-btn-text:active { background: rgba(212, 168, 67, 0.1); }
.m3-btn-outlined:disabled { border-color: rgba(245, 240, 232, 0.12); color: rgba(245, 240, 232, 0.38); cursor: default; }
.m3-btn-text { width: auto; height: 40px; padding: 0 12px; border-radius: 20px; color: var(--mira-gold); }

/* OutlinedTextField M3: радиус 4, фон прозрачный, обводка 1 SurfaceSecondary,
   в фокусе 2 Gold, ошибка — Error; курсор Gold. */
.m3-field {
  width: 100%; min-height: 56px; padding: 16px; margin: 0;
  background: transparent; border: 1px solid var(--mira-surface-secondary); border-radius: 4px;
  color: var(--mira-text-primary); caret-color: var(--mira-gold);
  font-family: var(--font-body); font-size: 15px; line-height: 22px; outline: none;
}
.m3-field:focus { border-color: var(--mira-gold); box-shadow: inset 0 0 0 1px var(--mira-gold); }
.m3-field.is-error { border-color: var(--mira-error); box-shadow: inset 0 0 0 1px var(--mira-error); }
.m3-field::placeholder { color: var(--mira-text-secondary); font-size: 14px; opacity: 1; }

/* ZodiacAvatar: круг --za (по умолчанию 112), кольцо-градиент GoldLight→Gold
   по диагонали, сердцевина MiraBubble 82 % диаметра, знак 0.42 размера цветом
   TextPrimary; без знака — значок Person 45 % (svg внутри). Разметка:
   <span class="zodiac-avatar" style="--za:60px">♈</span>. */
.zodiac-avatar {
  --za: 112px;
  width: var(--za); height: var(--za); flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle closest-side, var(--mira-bubble-mira) 82%, transparent calc(82% + 0.5px)),
    linear-gradient(135deg, var(--mira-gold-light), var(--mira-gold));
  font-size: calc(var(--za) * 0.42); line-height: 1; color: var(--mira-text-primary);
  font-family: var(--font-body); font-weight: 400; overflow: hidden; user-select: none;
}
.zodiac-avatar svg { width: 45%; height: 45%; fill: currentColor; }

/* ---------- Карточки ---------- */
.card {
  background: var(--mira-surface);
  border: 1px solid rgba(123, 94, 167, 0.25);
  border-radius: var(--radius-card);
  padding: 16px;
}
.glow-card {
  background: linear-gradient(160deg, var(--mira-surface), var(--mira-surface-secondary));
  border: 1px solid rgba(212, 168, 67, 0.35);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: 0 0 32px rgba(123, 94, 167, 0.25);
}

/* ---------- Поля ввода ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--mira-text-secondary); }
.input, textarea.input, select.input {
  width: 100%; min-height: 48px; padding: 12px 16px;
  background: var(--mira-surface-secondary);
  border: 1px solid rgba(123, 94, 167, 0.35);
  border-radius: 12px;
  color: var(--mira-text-primary);
  font-family: var(--font-body); font-size: 1rem;
  outline: none;
}
.input:focus { border-color: var(--mira-gold); box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.2); }
.input::placeholder { color: var(--mira-text-secondary); opacity: 0.7; }

/* ---------- Таб-бар (порт core/ui_kit/HeymiraBottomNav.kt) ----------
   Фон Surface, верхняя кромка Gold @24/255 (0.5dp), 6 вкладок равной ширины.
   Вкладка: паддинг 7dp, бокс иконки 28dp (иконка 22dp), зазор 3dp, подпись
   Inter 10sp (выбранная — w600). Цвета: выбранная — иконка GoldLight, подпись
   Gold; остальные — TextSecondary @120/255. Вокруг выбранной иконки — мини-
   орбита со спутником: при появлении спутник делает ОДИН оборот (700 мс,
   FastOutSlowIn) и останавливается. Бейдж — золотая точка 8dp у правого
   верхнего угла иконки. Пульсация (приглашение во Вселенную) — мигает сама
   иконка 0.45↔1 за 900 мс туда-обратно (tween по умолчанию — FastOutSlowIn). */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--mira-surface);
  /* Modifier.border(0.5dp) — рамка со всех сторон, не только сверху, и места
     в раскладке она не занимает (рисуется поверх) — поэтому outline внутрь. */
  outline: 0.5px solid rgba(212, 168, 67, 0.094); outline-offset: -0.5px;
  display: flex; justify-content: center;
}
.tabbar-inner { display: flex; width: 100%; max-width: var(--page-max-width); }
.tab {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 7px 0; border-radius: 12px;
  color: rgba(160, 164, 184, 0.47); text-decoration: none;
  font-family: var(--font-body); font-size: 10px; line-height: 12px; font-weight: 400;
  position: relative; -webkit-tap-highlight-color: transparent; user-select: none;
}
.tab .tab-ico { position: relative; width: 28px; height: 28px; display: block; flex: none; }
.tab .tab-ico svg { position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: block; }
.tab .tab-ico .ico-out, .tab .tab-ico .ico-fill { left: 3px; top: 3px; width: 22px; height: 22px; fill: currentColor; }
.tab .tab-ico .ico-fill, .tab.active .tab-ico .ico-out { display: none; }
.tab.active .tab-ico .ico-fill { display: block; color: var(--mira-gold-light); }
.tab .tab-label {
  margin-top: 3px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tab.active { color: var(--mira-gold); }
.tab.active .tab-label { font-weight: 600; }
/* Орбита: эллипс rx = w/2 = 14, ry = 0.26·h = 7.28 (штрих 1.2dp выступает за
   бокс 28 — Canvas не режет), спутник — точка r=1.6 на 0.93 от rx и от ry,
   парковка справа-снизу (0.42 рад). Геометрию SVG из base.html поправляем
   здесь CSS-свойствами (rx/ry, transform перекрывают атрибуты): группа
   спутника сжата по y в ry/rx = 0.52, точка растянута обратно (1/0.52).
   Прозрачность орбиты = min(3·progress, 1) при FastOutSlowIn 700 мс — это
   ≈ первые 180 мс. Показана только у активной. */
.tab .tab-ico .tab-orbit { display: none; overflow: visible; }
.tab .tab-orbit ellipse { rx: 14px; ry: 7.28px; }
.tab .tab-orbit > g { transform: translate(14px, 14px) scale(1, 0.52); }
/* Точку крутим навстречу спутнику: иначе сжатие группы по y после поворота
   делало бы из неё эллипс, а в Kotlin это ровный круг r=1.6. */
.tab .tab-orbit .sat circle { transform: translate(13.02px, 0) rotate(-24deg) scale(1, 1.923) translate(-13.02px, 0); }
.tab.active .tab-orbit .sat circle { animation: tab-sat-dot 700ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes tab-sat-dot {
  from { transform: translate(13.02px, 0) rotate(336deg) scale(1, 1.923) translate(-13.02px, 0); }
  to { transform: translate(13.02px, 0) rotate(-24deg) scale(1, 1.923) translate(-13.02px, 0); }
}
.tab.active .tab-ico .tab-orbit { display: block; animation: tab-orbit-in 180ms linear both; }
.tab.active .tab-orbit .sat { transform-origin: 0 0; animation: tab-sat-turn 700ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes tab-orbit-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tab-sat-turn { from { transform: rotate(-336deg); } to { transform: rotate(24deg); } }
/* Пульсация иконки — приглашение (не уведомление, поэтому без значка). */
.tab.pulsing:not(.active) .tab-ico .ico-out { color: var(--mira-gold); animation: tab-pulse 900ms cubic-bezier(0.4, 0, 0.2, 1) infinite alternate; }
@keyframes tab-pulse { from { opacity: 0.45; } to { opacity: 1; } }
/* Точка непрочитанного (новый прогноз): 8dp, золотая, обводка цветом Surface,
   смещена на (+5, −3) от правого верхнего угла бокса иконки. Число внутри
   не показываем — как в Android. */
.tab .badge, .tab .tab-dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box;
  background: var(--mira-gold); border: 1px solid var(--mira-surface);
  font-size: 0; line-height: 0; color: transparent; overflow: hidden; padding: 0; margin: 0;
}
.tab .tab-dot { display: none; top: -3px; right: -5px; }
.tab.badged .tab-dot { display: block; }
/* Тот же бейдж, если страница вешает его прямо на вкладку (chat.js setChatBadge). */
.tab > .badge { top: 4px; left: calc(50% + 11px); }
@media (prefers-reduced-motion: reduce) {
  .tab.active .tab-orbit, .tab.active .tab-orbit .sat, .tab.active .tab-orbit .sat circle, .tab.pulsing .tab-ico .ico-out { animation: none; }
}

/* ---------- Модалки: sheet + dialog + snackbar (ui.js) ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10, 14, 39, 0.7);
  opacity: 0; transition: opacity 0.2s ease;
}
.scrim.open { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 101;
  max-width: var(--page-max-width); margin: 0 auto;
  max-height: 88dvh; overflow-y: auto;
  background: var(--mira-surface);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  border: 1px solid rgba(123, 94, 167, 0.35); border-bottom: none;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform 0.25s ease;
}
.sheet.open { transform: translateY(0); }
.sheet::before {
  content: ""; display: block; width: 36px; height: 4px; border-radius: 2px;
  background: rgba(160, 164, 184, 0.4); margin: 0 auto 12px;
}
.dialog {
  position: fixed; left: 50%; top: 50%; z-index: 101;
  transform: translate(-50%, -50%) scale(0.95); opacity: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
  width: min(calc(100vw - 48px), 420px);
  background: var(--mira-surface);
  border: 1px solid rgba(212, 168, 67, 0.35);
  border-radius: var(--radius-card); padding: 20px;
}
.dialog.open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.snackbar {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-height) + 16px); z-index: 120;
  transform: translateX(-50%) translateY(20px); opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  max-width: min(calc(100vw - 32px), var(--page-max-width));
  background: var(--mira-surface-secondary);
  border: 1px solid rgba(123, 94, 167, 0.4);
  border-radius: 12px; padding: 12px 16px;
  font-size: 0.875rem;
}
.snackbar.open { transform: translateX(-50%) translateY(0); opacity: 1; }
.snackbar.error { border-color: var(--mira-error); }

/* ---------- Утилиты ---------- */
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(212, 168, 67, 0.25); border-top-color: var(--mira-gold);
  animation: mira-spin 0.8s linear infinite;
}
@keyframes mira-spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* Лоадер полной перезагрузки (смена языка) — рисует base.html, статусы на новом языке. */
.reload-loader {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: rgba(10, 14, 39, 0.9); transition: opacity 200ms ease-out;
}
.reload-loader.gone { opacity: 0; pointer-events: none; }
.reload-loader-text {
  min-height: 20px; padding: 0 32px; text-align: center;
  font-family: var(--font-body); font-size: 15px; line-height: 20px; color: var(--mira-gold-light);
}

/* Тап по вкладке — отклик сразу (владелец 25.10.2026): вкладка загорается (орбита
   со спутником), текущая страница гаснет со спиннером, пока грузится следующая. */
html.mira-tab-leaving body > main { opacity: 0.35; pointer-events: none; transition: opacity 150ms ease-out; }
html.mira-tab-leaving body::after {
  content: ""; position: fixed; left: 50%; top: 45%; z-index: 120; margin: -14px 0 0 -14px;
  width: 28px; height: 28px; border-radius: 50%; box-sizing: border-box;
  border: 3px solid rgba(212, 168, 67, 0.25); border-top-color: var(--mira-gold);
  animation: mira-spin 0.8s linear infinite;
}
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }
.center { text-align: center; }

/* ---------- Цвет «Завершить» в звонке — как у системного звонка (CallEndRed,
   VoiceCallOverlay.kt:297), не из палитры ошибок ---------- */
:root { --call-end-red: #E53935; }

/* ---------- Жалоба на контент (core/report.js: ReportFlagRow / ReportContentLink / ReportContentSheet) ---------- */
.report-flag-row { display: flex; justify-content: flex-end; align-items: center; margin-top: 4px; }
.report-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 4px; border: none; border-radius: 8px;
  background: transparent; color: var(--mira-text-secondary); opacity: 0.75;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.report-flag:hover { opacity: 1; }
.report-flag svg { width: 16px; height: 16px; }
.report-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 auto;
  padding: 8px 12px; border: none; border-radius: 12px; background: transparent;
  color: var(--mira-text-secondary); font-family: var(--font-body); font-size: 0.8125rem;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.report-link svg { width: 16px; height: 16px; }
/* ReportContentSheet.kt: лист M3 на Background, радиус 20; заголовок Cormorant
   SemiBold 22, подсказка 14 через 6, поле через 14 (min 110), ошибка 12 Error,
   GoldButton через 16, снизу 20. */
.report-sheet { display: flex; flex-direction: column; padding: 8px 0 0; }
.report-sheet-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 28px; color: var(--mira-text-primary); }
.report-sheet-hint { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--mira-text-secondary); }
.report-sheet textarea.m3-field { margin-top: 14px; min-height: 110px; resize: vertical; }
.report-sheet-err { margin: 4px 16px 0; font-size: 12px; line-height: 16px; color: var(--mira-error); }
.report-sheet .gold-btn { margin: 16px 0 20px; }

/* ---------- Контекстное меню «Копировать / Пожаловаться» (core/longpress.js) ---------- */
/* DropdownMenu M3 (ChatScreen.kt:547, containerColor = Background): радиус 4,
   без обводки, тень elevation 3, поля 8 сверху и снизу, ширина 112–280;
   пункт 48, поля 12, labelLarge (Inter SemiBold 14) TextPrimary. Появление —
   масштаб от 0.8 и прозрачность 120 мс, закрытие 75 мс. */
.ctx-menu {
  position: fixed; z-index: 130; min-width: 112px; max-width: 280px; padding: 8px 0;
  background: var(--mira-background); border: none; border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  opacity: 0; transform: scale(0.8); transition: opacity 75ms linear, transform 75ms linear;
}
.ctx-menu.open { opacity: 1; transform: scale(1); transition: opacity 30ms linear, transform 120ms cubic-bezier(0, 0, 0.2, 1); }
.ctx-menu button {
  display: flex; align-items: center; width: 100%; height: 48px; padding: 0 12px; text-align: left;
  background: transparent; border: none; color: var(--mira-text-primary);
  font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ctx-menu button:hover, .ctx-menu button:active { background: rgba(245, 240, 232, 0.08); }
.ctx-scrim { position: fixed; inset: 0; z-index: 129; }

/* ---------- Экран «учётка удалена недавно» (core/blocked.js: RegistrationBlockedScreen) ---------- */
.blocked-screen {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: var(--mira-background);
  display: flex; align-items: center; justify-content: center; padding: 32px;
}
.blocked-inner { display: flex; flex-direction: column; align-items: center; max-width: 420px; width: 100%; text-align: center; }
.blocked-icon {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(212, 168, 67, 0.12); color: var(--mira-gold-light); margin-bottom: 22px;
}
.blocked-title { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--mira-gold); }
.blocked-body { margin-top: 14px; font-size: 15px; line-height: 22px; color: var(--mira-text-secondary); }
.blocked-card {
  width: 100%; margin-top: 20px; padding: 16px 18px; border-radius: 16px;
  background: rgba(22, 27, 61, 0.6); border: 1px solid rgba(212, 168, 67, 0.35);
}
.blocked-available { font-size: 13px; color: var(--mira-text-secondary); }
.blocked-date { margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--mira-gold); }
.blocked-days { margin-top: 4px; font-size: 13px; color: var(--mira-gold-light); }
.blocked-restore { width: 100%; margin-top: 20px; }
.blocked-hint { font-size: 14px; line-height: 20px; color: var(--mira-text-primary); margin-bottom: 12px; }
.blocked-error { margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--mira-error); }
.blocked-support { margin-top: 20px; font-size: 13px; color: var(--mira-text-secondary); }
.blocked-email { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--mira-gold-light); text-decoration: none; }
.blocked-back { margin-top: 36px; max-width: 320px; }

/* Фразы статуса стопкой (core/swap-text.js stackPhrases): видна одна, смена —
   старая гаснет за 90 мс, новая проявляется 220 мс и подрастает из 0.92. */
.phrase-stack { display: grid; }
.phrase-stack > span {
  grid-area: 1 / 1; justify-self: center; text-align: center; opacity: 0; transform: scale(0.92); visibility: hidden;
  transition: opacity 90ms linear, transform 0s linear 90ms, visibility 0s linear 90ms;
}
.phrase-stack > span.on {
  opacity: 1; transform: scale(1); visibility: visible;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1) 90ms, transform 220ms cubic-bezier(0.4, 0, 0.2, 1) 90ms, visibility 0s linear 90ms;
}
@media (prefers-reduced-motion: reduce) {
  .phrase-stack > span, .phrase-stack > span.on { transition: none; transform: none; }
}

/* ---------- Установка на экран «Домой» (core/install.js) ---------- */
.inst-sheet { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 8px 4px; text-align: center; }
.inst-logo { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 6px 24px rgba(123, 94, 167, 0.45); }
.inst-title { margin: 4px 0 0; font-family: var(--font-display, var(--font-body)); font-size: 1.35rem; font-weight: 600; color: var(--mira-text-primary); text-wrap: balance; }
.inst-text { margin: 0; max-width: 34ch; font-size: 0.95rem; line-height: 1.4; color: var(--mira-text-secondary); text-wrap: pretty; }
.inst-steps { list-style: none; counter-reset: inst; margin: 6px 0 4px; padding: 0; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.inst-steps li { counter-increment: inst; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
  background: rgba(123, 94, 167, 0.12); border: 1px solid rgba(123, 94, 167, 0.22); font-size: 0.95rem; line-height: 1.35; color: var(--mira-text-primary); }
.inst-steps li::before { content: counter(inst); flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700; color: #0A0E27; background: var(--mira-gold); }
.inst-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #4DA3FF; }
.inst-sheet .gold-btn { margin-top: 6px; max-width: 360px; }
.inst-sheet .m3-text-btn { color: var(--mira-text-secondary); }

/* Стрелка к кнопке Safari: на iPhone «•••» внизу справа, на iPad «Поделиться» вверху справа */
.inst-pointer { position: fixed; z-index: 200; color: var(--mira-gold); pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)); animation: inst-bob 0.9s ease-in-out infinite; }
.inst-pointer.iphone { right: 18px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.inst-pointer.ipad { right: 70px; top: 8px; transform: rotate(180deg); animation-name: inst-bob-up; }
@keyframes inst-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes inst-bob-up { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .inst-pointer { animation: none; } }

/* Вход по коду на почту — внутри Instagram под кнопкой Apple (core/login.js, 27.10.2026).
   Глобально: кнопка живёт и на приветствии (welcome.css), и в анкете (onboarding.css). */
.btn-email {
  position: relative; justify-content: center; align-items: center; gap: 10px;
  min-height: 52px; border-radius: 16px; font-size: 1rem; font-weight: 600;
  background: transparent; color: var(--mira-text-primary);
  border: 1px solid rgba(212, 168, 67, 0.5);
}
.btn-email svg { color: var(--mira-gold); }
.dialog:has(.email-form) { border-radius: 20px; }
.email-form { gap: 0; }
.email-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.21; color: var(--mira-gold); }
.email-sub { margin: 6px 0 14px; font-size: 14px; line-height: 19px; color: var(--mira-text-secondary); overflow-wrap: anywhere; }
.email-code { text-align: center; font-size: 24px; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }
.email-note { margin-top: 8px; font-size: 13px; line-height: 17px; color: var(--mira-text-secondary); text-align: center; }
.email-form .welcome-error { margin-top: 10px; font-size: 14px; line-height: 17px; color: var(--mira-error); text-align: center; }
.email-form .gold-btn { margin-top: 16px; }
.email-form .gold-btn .spinner { margin-left: 8px; }
.email-links { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 12px; }
.email-link {
  background: none; border: none; padding: 8px; min-height: 40px;
  color: var(--mira-gold); font: inherit; font-size: 14px; cursor: pointer;
}
.email-link:disabled { color: var(--mira-text-secondary); cursor: default; }