/* ═══════════════════════════════════════════════════════════════════════
   lumi.css — оформление LUMI. Подключается ПОСЛЕДНИМ, поверх всех стилей.

   ПАЛИТРА ЗДЕСЬ БОЛЬШЕ НЕ ЖИВЁТ. Все цвета переехали в css/core/tokens.css —
   там теперь единственное место, где задаются значения. Здесь остались
   только правила: какой элемент какой переменной красится.

   Три состояния темы (описаны в tokens.css):
     нет атрибута          — как на телефоне (медиазапрос);
     data-theme="light"    — светлая принудительно;
     data-theme="dark"     — тёмная принудительно.
   ═══════════════════════════════════════════════════════════════════════ */


/* Фон страницы. Специфичность повышена намеренно: в конце index.html есть
   inline-блоки с правилами вида `body.welcome-theme ...`, и обычное `body`
   их не перебивает — страница оставалась тёмной при светлой теме. */
html body,
html body.welcome-theme,
html body.welcome-theme .screen,
html body.welcome-theme #app {
  background: var(--lumi-bg) !important;
  color: var(--lumi-text);
}
html { background: var(--lumi-bg) !important; }

/* ── Шапка с фотографией ───────────────────────────────────────────────
   Подложка обязательна в ОБЕИХ темах: фотография приходит от пользователя,
   и цвет текста на ней нельзя угадать по теме. Без подложки тёмное имя
   пропадает на ночном селфи, а светлое — на снимке у окна. */
.lumi-hero { position: relative; overflow: hidden; }
.lumi-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--lumi-scrim);
}
.lumi-hero > * { position: relative; z-index: 1; }
.lumi-hero__name { color: var(--lumi-text); font-weight: 600; letter-spacing: -.01em; }
/* .lumi-hero__meta — правило ничего не решало: его всегда перебивало другое.
   Проверено на живом сайте: 16 экранов, обе темы. Убрано. */


/* Нет фотографии — половина базы. Показываем не дыру, а приглашение. */
.lumi-hero--empty {
  background:
    radial-gradient(120% 80% at 50% 0%, var(--lumi-bg-sunken) 0%, var(--lumi-bg) 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 40px 24px;
}
.lumi-hero--empty .lumi-hero__hint { color: var(--lumi-text-3); font-size: 14px; max-width: 30ch; }

/* ── Логотип ──────────────────────────────────────────────────────────── */
.lumi-logo {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400; letter-spacing: .34em; text-indent: .34em;
  color: var(--lumi-accent-strong); font-size: 30px; line-height: 1;
}
.lumi-tagline {
  color: var(--lumi-text-2); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; line-height: 1.7; margin-top: 6px;
}

/* ── Кнопка действия ──────────────────────────────────────────────────── */
.lumi-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 17px 22px; border: 0; border-radius: 999px;
  background: var(--lumi-accent-fill); color: var(--lumi-on-accent);
  font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: var(--lumi-shadow);
}
.lumi-cta__count { font-weight: 400; opacity: .72; }

/* ── Круглые иконки разделов ──────────────────────────────────────────── */
.lumi-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 10px; }
.lumi-tile { display: flex; flex-direction: column; align-items: center; gap: 9px;
             background: none; border: 0; cursor: pointer; padding: 0; }
.lumi-tile__ring {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--lumi-border);
  background: var(--lumi-bg-elev);
  display: flex; align-items: center; justify-content: center;
}
.lumi-tile__ring svg { width: 32px; height: 32px; }
/* Phosphor рисует контуры заливкой, а не штрихом — красим fill. */
.lumi-tile__ring svg g { fill: var(--lumi-accent); stroke: none; }

/* Вес иконки под тему: thin на тёмном, light на светлом. На белом фоне
   тонкий контур истончается и теряется, поэтому там берём вес потяжелее. */
.lumi-tile__ring svg .lumi-w-light { display: none; }
:root[data-theme-effective="light"] .lumi-tile__ring svg .lumi-w-thin { display: none; }
:root[data-theme-effective="light"] .lumi-tile__ring svg .lumi-w-light { display: inline; }
.lumi-tile__label {
  color: var(--lumi-text); font-size: 13px; line-height: 1.25;
  text-align: center; width: 100%;
  /* Без этого «Астрология» разрывалось на «Астрологи/я». */
  overflow-wrap: normal; word-break: keep-all; hyphens: none;
}
.lumi-tile__badge {
  position: absolute; margin: -66px 0 0 44px; min-width: 8px; height: 8px;
  border-radius: 999px; background: var(--lumi-accent);
}

/* ── Нижнее меню: линия-разделитель, иначе оно сливается со страницей ── */
.lumi-nav, nav.bottom-nav, .bottom-nav {
  background: var(--lumi-bg-elev);
  border-top: 1px solid var(--lumi-nav-line);
}
.lumi-nav__item { color: var(--lumi-text-3); }
.lumi-nav__item.is-active { color: var(--lumi-accent); }

/* ── Карточки рекомендаций ────────────────────────────────────────────── */
.lumi-card {
  background: var(--lumi-card); border: 1px solid var(--lumi-border-soft);
  border-radius: 16px; box-shadow: var(--lumi-shadow);
}

/* ── Переключатель темы ───────────────────────────────────────────────── */
.lumi-theme { display: flex; gap: 6px; padding: 4px;
              background: var(--lumi-bg-sunken); border-radius: 999px;
              border: 1px solid var(--lumi-border-soft); }
.lumi-theme button {
  flex: 1; padding: 9px 14px; border: 0; border-radius: 999px;
  background: none; color: var(--lumi-text-2); font-size: 13.5px; cursor: pointer;
}
.lumi-theme button[aria-pressed="true"] {
  background: var(--lumi-accent-fill); color: var(--lumi-on-accent); font-weight: 600;
}

/* Кому система просит меньше движения.

   ЗДЕСЬ БЫЛА ГЛАВНАЯ ПОЛОМКА, и она объясняет сразу две жалобы
   владельца — «крутится очень быстро» и «не двигается вовсе».

   Строка была такая:  * { animation-duration: .001ms }
   Это ходовой приём, но он верен только для анимаций, которые
   проигрываются ОДИН раз: они мгновенно доходят до конца и замирают.
   А у бесконечных он не останавливает движение, а разгоняет его
   до тысячи повторов в секунду. Логотип на заставке начинал
   трястись, кружок загрузки — мелькать. Именно это на телефоне
   и выглядело как «очень быстро дёргается окно загрузки».

   Правильно добавить второе: повторять один раз. Тогда бесконечные
   анимации честно останавливаются.

   Ниже — исключения: движение, которое несёт смысл и невелико
   по размаху. Его оставляем, только замедляем. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Кружок загрузки: застывший кружок читается как «всё сломалось» */
  .spinner {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Главный экран LUMI (см. lumi-home.js)
   ═══════════════════════════════════════════════════════════════════════ */

.lumi-hidden { display: none !important; }

.lumi-home { padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 18px; }
.lumi-home__top { display: flex; align-items: flex-start; justify-content: space-between; }

/* Шапка с фотографией. Высота задана в долях экрана, а не в пикселях:
   на невысоких телефонах фото не должно съедать всё до сгиба. */
.lumi-hero {
  /* Круглая, а не прямоугольник со скруглением.

     Пропорция обязана быть РОВНО 1: со старой 92/100 скругление в 50%
     даёт не круг, а овал — разницу видно сразу, и выглядит как ошибка.
     Подрезка по кругу держится на overflow: hidden, он здесь и был. */
  position: relative; border-radius: 50%; overflow: hidden;
  width: 50%; max-width: 186px; aspect-ratio: 1;
  background-size: cover; background-position: center 28%;
  background-color: var(--lumi-bg-sunken);
  display: flex; align-items: flex-end;
}
.lumi-hero__info {
  position: relative; z-index: 1; width: 100%;
  padding: 10px 10px 9px; display: flex; flex-direction: column; gap: 1px;
}
.lumi-hero__name { font-size: 16px; margin: 0; line-height: 1.1; color: var(--lumi-text); }
/* .lumi-hero__meta — правило ничего не решало: его всегда перебивало другое.
   Проверено на живом сайте: 16 экранов, обе темы. Убрано. */

.lumi-hero__city { display: flex; align-items: center; gap: 6px; }
.lumi-pin { width: 12px; height: 12px; flex: 0 0 auto; }
.lumi-pin * { fill: none; stroke: var(--lumi-accent); stroke-width: 1.6px; }

/* Нет фотографии — у половины базы. Вместо дыры показываем приглашение. */
.lumi-hero--empty { aspect-ratio: 1; align-items: center; }
.lumi-hero--empty .lumi-hero__info { align-items: center; text-align: center; }
.lumi-hero--empty::after { background: none; }

.lumi-cta__arrow { width: 20px; height: 20px; flex: 0 0 auto; }
.lumi-cta__arrow * { fill: none; stroke: currentColor; stroke-width: 2px;
                     stroke-linecap: round; stroke-linejoin: round; }

/* Семь плиток в сетке 4+4 оставляли дыру справа во втором ряду.
   Гибкая раскладка с переносом центрирует второй ряд — выглядит намеренно. */
/* Три в ряду вместо четырёх: иконки подробные, на 68 px детали не читались.
   Размер тянется за шириной экрана — от 88 px на самых узких до 120 px. */
.lumi-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px 12px; justify-items: center;
}
.lumi-tile { width: 100%; }
/* Седьмая плитка — «Мультиподсчёт», сводная по всем системам. Стоит одна в
   последнем ряду по центру: это не остаток, а отдельный смысл. */
.lumi-tile:nth-child(7) { grid-column: 2; }
.lumi-tile__ring { transition: transform .15s ease; }
.lumi-tile:active .lumi-tile__ring { transform: scale(.94); }

/* Панель тем (только /test/) не должна перекрывать содержимое: прижимаем
   её к правому краю над меню и делаем компактной. */
#lumi-float {
  left: auto !important; right: 10px !important;
  transform: none !important;
  bottom: calc(64px + env(safe-area-inset-bottom,0px)) !important;
  opacity: .93;
}
#lumi-float:hover { opacity: 1; }

/* Блок совместимости переехал под иконки — даём ему воздух и рамку LUMI. */
.lumi-home .lumi-compat {
  margin: 4px 0 0; background: var(--lumi-card);
  border: 1px solid var(--lumi-border-soft); border-radius: 18px;
  box-shadow: var(--lumi-shadow);
}

/* Панели скрытых вкладок.
   Селектор по идентификатору выбран не от лени: в overrides.css есть правило
   `body.is-admin .ptab-panel.admin-only { display: block !important }` — три
   класса, оно перебивало и одиночный класс, и инлайновый display:none.
   Идентификатор весомее любого набора классов, поэтому спор закончен. */
#ptab-forecast.lumi-panel-off,
#ptab-tests.lumi-panel-off,
#ptab-razbor.lumi-panel-off,
#ptab-environment.lumi-panel-off,
#ptab-photos.lumi-panel-off { display: none !important; }

/* ── Иконки-изображения ────────────────────────────────────────────────
   У готовых иконок есть собственное золотое кольцо и фон, поэтому рамку
   и подложку плитки для них выключаем — иначе получается кольцо в кольце. */
.lumi-tile__ring--img {
  border: 0; background: none; border-radius: 50%; overflow: visible;
  width: clamp(88px, 26vw, 120px); height: clamp(88px, 26vw, 120px);
}
.lumi-tile__ring--img img {
  width: 100%; height: 100%; display: block; object-fit: contain;
}
/* На светлом фоне золото теряется: замерено, контраст падает до 1.9-2.5
   при норме 3.0 для графики. brightness(.74) углубляет золото до бронзы и
   поднимает худший случай до 3.4, сохраняя цвет. На тёмном фоне контраст
   и так 6.8-9.1, там поправка не нужна — только лёгкая тень для объёма. */
:root[data-theme-effective="dark"] .lumi-tile__ring--img img,
:root:not([data-theme-effective]) .lumi-tile__ring--img img {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
:root[data-theme-effective="light"] .lumi-tile__ring--img img {
  filter: brightness(.74) saturate(1.12) drop-shadow(0 2px 7px rgba(90,60,45,.20));
}
/* .lumi-tiles — правило ничего не решало: его всегда перебивало другое.
   Проверено на живом сайте: 16 экранов, обе темы. Убрано. */


/* ── Верхняя панель приложения в палитре LUMI ──────────────────────────
   Панель родная (язык, справка, QR, меню) — мы её только подняли наверх и
   перекрасили. Кнопка активного языка была старым золотом #F3D27A: на
   светлом фоне это давало 1.3:1, надпись почти не читалась. */
.lumi-home__top { display: block; margin: 2px 0 10px; }

.lumi-home .lumi-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0; background: none; border: 0; min-height: 44px;
}
.lumi-home .lumi-topbar .ph-topbar-actions {
  display: flex; align-items: center; gap: 8px;
}

/* Круглые кнопки: справка, QR, меню */
.lumi-home .lumi-topbar .ph-topbar-btn {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--lumi-bg-elev) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  box-shadow: none;
}
.lumi-home .lumi-topbar .ph-topbar-btn svg { width: 20px; height: 20px }
.lumi-home .lumi-topbar .ph-topbar-btn svg * { stroke: currentColor }
.lumi-home .lumi-topbar .ph-topbar-btn:active { transform: scale(.94) }

/* Переключатель языка — единая пилюля, активный в цвете акцента */
.lumi-home .lumi-topbar #phls-ru,
.lumi-home .lumi-topbar #phls-en {
  min-width: 42px; height: 34px; padding: 0 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--lumi-border);
}
/* Неактивный язык — приглушённый; активный красится инлайном (см. выше). */
.lumi-home .lumi-topbar #phls-en { color: var(--lumi-text-2) }
.lumi-home .lumi-topbar #phls-ru[aria-pressed="true"],
.lumi-home .lumi-topbar #phls-ru.active,
.lumi-home .lumi-topbar #phls-en[aria-pressed="true"],
.lumi-home .lumi-topbar #phls-en.active {
  background: var(--lumi-accent-fill) !important;
  border-color: transparent !important;
  color: var(--lumi-on-accent) !important;
}

/* ── Блок «Совместимость» в едином стиле ───────────────────────────────
   Карточка, поля и кнопка были из старого оформления: серые заливки,
   скругление 10 px, кремовая кнопка. Приводим к тем же материалам, что и
   остальной экран. Разметку не трогаем — только внешний вид. */

.lumi-home .lumi-compat {
  padding: 20px 16px 18px;
  border-radius: 28px;
  background: var(--lumi-card);
  border: 1px solid var(--lumi-border-soft);
  box-shadow: var(--lumi-shadow);
  position: relative;
}

/* Заголовок с иконкой вместо эмодзи */
.lumi-home .lumi-compat .qc-title {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px; font-weight: 600; letter-spacing: -.01em;
  color: var(--lumi-text); margin: 0 0 4px;
}
.lumi-home .lumi-compat .qc-subtitle {
  color: var(--lumi-text-3); font-size: 13.5px; margin: 0 0 16px; text-align: center;
}
.lumi-ico { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; display: inline-block;
            vertical-align: -.18em }
/* .lumi-home .lumi-compat .qc-title .lumi-ico — правило ничего не решало: его всегда перебивало другое.
   Проверено на живом сайте: 16 экранов, обе темы. Убрано. */


/* Поля и кнопки-поля — одинаковые: одна высота, одно скругление, одна рамка */
.lumi-home .lumi-compat .atma-input {
  width: 100%; min-height: 48px; padding: 0 18px;
  display: flex; align-items: center; gap: 9px;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  border-radius: 999px !important;
  color: var(--lumi-text) !important;
  font-size: 15px; text-align: left; box-shadow: none !important;
  white-space: nowrap;
}
.lumi-home .lumi-compat input.atma-input::placeholder { color: var(--lumi-text-3); opacity: 1 }
.lumi-home .lumi-compat .atma-input .lumi-ico { color: var(--lumi-accent) }
.lumi-home .lumi-compat .atma-input:focus,
.lumi-home .lumi-compat .atma-input:focus-visible {
  outline: none; border-color: var(--lumi-accent) !important;
}
/* Один столбец. В две колонки поле выходило 138 px, и подпись
   «Дата рождения» туда не влезала — рвалась на две строки. Теперь все
   четыре поля одной ширины и читаются ровным списком. */
.lumi-home .lumi-compat .qc-grid { display: grid; grid-template-columns: 1fr; gap: 10px }
.lumi-home .lumi-compat .form-group { margin: 0 }

/* Главная кнопка — ровно как «Мой профиль» вверху экрана */
.lumi-home .lumi-compat #qc-calc-btn {
  width: 100%; margin-top: 14px; padding: 16px 22px;
  border: 0 !important; border-radius: 999px !important;
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
  font-size: 16px; font-weight: 600;
  box-shadow: var(--lumi-shadow);
}
.lumi-home .lumi-compat #qc-calc-btn:disabled { opacity: .5 }

/* Кнопка сворачивания — такая же круглая, как в верхней панели */
.lumi-home .lumi-compat .qc-collapse-btn {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  color: var(--lumi-text-2) !important;
}
.lumi-home .lumi-compat .qc-collapse-arrow { display: inline-flex; line-height: 0 }

@media (max-width: 360px) {
  .lumi-home .lumi-compat .qc-grid { grid-template-columns: 1fr }
}

/* ── Нижнее меню: иконки владельца ─────────────────────────────────────
   Иконки — сплошные силуэты, поэтому используем их как МАСКУ, а цвет даёт
   background-color. Один файл работает и в тёмной теме, и в светлой, и в
   активном состоянии — перекрашивать ничего не нужно. Родные svg прячем. */
/* Родные иконки бывают вложены глубже прямого потомка — прячем на любой
   глубине, иначе в меню оказываются обе иконки сразу.
   Контейнеры .tab-icon / .tab-logo прятать ОБЯЗАТЕЛЬНО: даже пустые они
   занимают место в кнопке (это flex с justify-content:center), и наша
   иконка съезжала вбок ровно на половину их ширины — у центральной кнопки
   это давало заметный сдвиг влево на 18 px. */
.lumi-nav-icons #tab-bar .tab[data-screen] svg,
.lumi-nav-icons #tab-bar .tab[data-screen] img,
.lumi-nav-icons #tab-bar .tab[data-screen] .tab-icon,
.lumi-nav-icons #tab-bar .tab[data-screen] .tab-logo { display: none !important; }

.lumi-nav-icons #tab-bar .tab[data-screen]::before {
  content: ""; display: block;
  width: 38px; height: 38px; margin: 0 auto;
  background-color: var(--lumi-text-3);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  transition: background-color .15s ease, transform .15s ease;
}
.lumi-nav-icons #tab-bar .tab[data-screen="screen-chat"]::before    { -webkit-mask-image:url("../../img/nav/chat.png?v=6");     mask-image:url("../../img/nav/chat.png?v=6") }
.lumi-nav-icons #tab-bar .tab[data-screen="screen-matches"]::before { -webkit-mask-image:url("../../img/nav/matches.png?v=6");  mask-image:url("../../img/nav/matches.png?v=6") }
.lumi-nav-icons #tab-bar .tab[data-screen="screen-dating"]::before  { -webkit-mask-image:url("../../img/nav/dating.png?v=6");   mask-image:url("../../img/nav/dating.png?v=6") }
.lumi-nav-icons #tab-bar .tab[data-screen="screen-chats"]::before   { -webkit-mask-image:url("../../img/nav/chats.png?v=6");    mask-image:url("../../img/nav/chats.png?v=6") }
.lumi-nav-icons #tab-bar .tab[data-screen="screen-profile"]::before { -webkit-mask-image:url("../../img/nav/profile.png?v=6");  mask-image:url("../../img/nav/profile.png?v=6") }

/* Активный пункт — цветом акцента и чуть крупнее */
.lumi-nav-icons #tab-bar .tab.active::before {
  background-color: var(--lumi-accent) !important;
  transform: scale(1.08);
}
/* Центральная кнопка ленты — крупнее остальных, это главное действие */
/* Центральная кнопка — такая же, как остальные: тот же размер, тот же цвет.
   Постоянная подсветка сбивала: акцент должен означать «вы здесь», а не
   «эта кнопка особенная». Выделяется только активный раздел. */

/* ── Шапка: фото слева, подпись справа ────────────────────────────────
   Подпись ушла с фотографии в свободное место рядом. Побочная выгода:
   текст больше не зависит от того, что на снимке, и подложка под ним
   не нужна вовсе. */
.lumi-home .lumi-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 2px;
}
.lumi-home .lumi-head .lumi-hero {
  /* 120, а не прежние 148: круг рядом с именем «весит» в макете больше
     прямоугольника той же ширины, и при 148 он перетягивал на себя весь
     верх экрана. */
  flex: 0 0 auto; width: 120px; max-width: 120px; margin: 0;
}
/* Затемнения на фото больше нет — текста на нём нет. */
.lumi-home .lumi-head .lumi-hero::after { background: none; }

.lumi-home .lumi-head .lumi-hero__info {
  flex: 1 1 auto; min-width: 0; position: static;
  padding: 0; gap: 4px; align-items: flex-start; text-align: left;
}
.lumi-home .lumi-head .lumi-hero__name {
  font-size: 21px; line-height: 1.15; color: var(--lumi-text);
}
.lumi-home .lumi-head .lumi-hero__meta { font-size: 13.5px; color: var(--lumi-text-2); }
.lumi-home .lumi-head .lumi-pin { width: 14px; height: 14px; }

/* Нет фотографии — подсказка встаёт под именем, а не на пустом квадрате. */
.lumi-home .lumi-head .lumi-hero--empty { aspect-ratio: 1; }
.lumi-home .lumi-head .lumi-hero__hint { font-size: 12.5px; margin-top: 2px; }

@media (max-width: 340px) {
  .lumi-home .lumi-head .lumi-hero { width: 120px }
  .lumi-home .lumi-head .lumi-hero__name { font-size: 18px }
}

/* ── Свёрнутая совместимость = кнопка того же семейства ────────────────
   Развёрнутая — это карточка с формой, ей идёт скругление 28 и заголовок
   с засечками. Но в свёрнутом виде она превращается в полоску и встаёт
   рядом с «Мой профиль» — и тогда разница в высоте, скруглении и шрифте
   читается как небрежность.
   Поэтому свёрнутая берёт ровно ту же геометрию, что кнопка выше, но
   остаётся ВТОРИЧНОЙ: контур вместо заливки. Главное действие на экране
   должно быть одно. */
.lumi-home .lumi-compat.collapsed {
  min-height: 54px; height: 54px;
  padding: 0 16px 0 20px;
  border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--lumi-accent-fill);
  box-shadow: none;
  display: flex; align-items: center;
}
.lumi-home .lumi-compat.collapsed .qc-header-center {
  flex: 1 1 auto; display: flex; align-items: center;
}
.lumi-home .lumi-compat.collapsed .qc-title {
  /* Тот же шрифт и вес, что на «Мой профиль» — Georgia оставляем
     развёрнутому состоянию, где это заголовок раздела. */
  font-family: inherit;
  font-size: 16px; font-weight: 600;
  justify-content: flex-start; gap: 10px; margin: 0;
}
.lumi-home .lumi-compat.collapsed .qc-title .lumi-ico { color: var(--lumi-accent) }
/* .lumi-home .lumi-compat.collapsed .qc-subtitle — правило ничего не решало: его всегда перебивало другое.
   Проверено на живом сайте: 16 экранов, обе темы. Убрано. */


/* Стрелка встаёт в правый край полоски, а не в угол карточки */
.lumi-home .lumi-compat.collapsed .qc-collapse-btn {
  /* Кнопка стоит ПЕРВОЙ в разметке, поэтому margin-left:auto её вправо не
     уводит — нужен order. Меняем только порядок отрисовки, разметку не
     трогаем: обработчик остаётся на своём элементе. */
  order: 2;
  position: static; margin-left: auto;
  width: 32px; height: 32px; flex: 0 0 auto;
  background: transparent !important;
  border-color: var(--lumi-border) !important;
}
.lumi-home .lumi-compat.collapsed .qc-header-center { order: 1 }

/* ── Свёрнутая совместимость: точное выравнивание ──────────────────────
   Содержимое стояло на 6 px выше центра. Причина: у карточки уцелел
   padding-bottom: 12px от правила развёрнутого состояния, а при
   align-items:center это поднимает всё ровно на половину остатка.
   Гасим отступы явно и центрируем подпись по всей ширине: стрелка уходит
   в абсолют, иначе она сдвигала бы текст влево на свою ширину. */
.lumi-home .lumi-compat.collapsed {
  padding: 0 !important;
  position: relative;
}
.lumi-home .lumi-compat.collapsed .qc-header-center {
  flex: 1 1 auto;
  justify-content: center;
  padding: 0 52px;            /* место под стрелку с обеих сторон — симметрия */
}
.lumi-home .lumi-compat.collapsed .qc-title {
  justify-content: center;
  line-height: 1;
}
.lumi-home .lumi-compat.collapsed .qc-collapse-btn {
  position: absolute;
  right: 11px; top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

/* ── Подписи под иконками нижнего меню ─────────────────────────────────
   Иконка уменьшена с 38 до 30 px: полоса меню стоит в общем потоке и
   отнимает высоту у самого экрана, поэтому подпись надо было чем-то
   оплатить. Заодно добавлен отступ под «домашнюю полоску» айфона — без
   него нижний край меню попадает под неё и плохо нажимается. */
.lumi-nav-icons #tab-bar {
  height: auto;
  /* Отступ СНИЗУ здесь не задаём вовсе — ни своим числом, ни через
     сокращённую запись padding. Внизу айфона есть полоска возврата,
     и место под неё отводит само приложение: .app-tabbar и .tab-bar
     ставят min(полоска, 8px). Стоит написать здесь что угодно — своё
     число перебьёт приложение, и получится либо вдвое (меню всплывёт),
     либо ноль (полоска налезет на значки). Оба раза я так и промахнулся. */
  padding-top: 6px;
  padding-left: 0;
  padding-right: 0;
}
/* Воздух под подписями — ВНУТРИ меню, на внутреннем блоке.
   Снаружи у меню место под системную полоску, его трогать нельзя;
   а расстояние между подписью и краем — это уже наше оформление.
   Так две вещи не путаются: система снаружи, вид внутри. */
.lumi-nav-icons #tab-bar .tab-bar-inner {
  /* Высота задана жёстко (44 px в layout-core.css) и была рассчитана
     на одни значки. После того как под ними появились подписи, текст
     упирается в нижний край. Добавляем 4 px именно к высоте: отступ
     внутрь фиксированной высоты не добавляет места, а отнимает. */
  height: 48px;
}
.lumi-nav-icons #tab-bar .tab[data-screen] {
  height: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
}
.lumi-nav-icons #tab-bar .tab[data-screen]::before {
  width: 30px; height: 30px;
}
.lumi-nav-icons #tab-bar .lumi-tab-label {
  display: block;
  font-size: 10px; font-weight: 600; line-height: 1.1;
  letter-spacing: .01em;
  color: var(--lumi-text-3);
  white-space: nowrap;
  transition: color .15s ease;
}
.lumi-nav-icons #tab-bar .tab.active .lumi-tab-label {
  color: var(--lumi-accent);
}


/* #screen-settings — цвета опасного действия перенесены в общую палитру (tokens.css). */

/* :root[data-theme-effective="light"] #screen-se — цвета опасного действия перенесены в общую палитру (tokens.css). */


/* ── Шапка ─────────────────────────────────────────────────────────────
   Заголовок сидел в тёмной плашке во всю ширину — она выглядела как
   недоделанный фон, а не как элемент. Убираем подложку: «назад» отдельной
   строкой, под ней крупный заголовок, как на обычной странице. */
#screen-settings .settings-header {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 0; background: transparent;
}
#screen-settings .screen-title,
#screen-edit-profile .screen-title {
  background: transparent !important;
  padding: 0 !important;
  margin: 4px 0 18px;
  font-size: 23px; font-weight: 700; line-height: 1.15;
  color: var(--lumi-text) !important;
  letter-spacing: -.015em;
  text-align: left;
}
#screen-settings .btn-back,
#screen-edit-profile .btn-back {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 15px 0 10px; margin: 0;
  border-radius: 999px;
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  font-size: 14px; font-weight: 600;
  box-shadow: none !important;
}
#screen-settings .btn-back .lumi-ico,
#screen-edit-profile .btn-back .lumi-ico { width: 15px; height: 15px }
#screen-settings .btn-back:active,
#screen-edit-profile .btn-back:active {
  border-color: var(--lumi-accent-fill) !important;
  color: var(--lumi-text) !important;
}

/* ── Карточки ──────────────────────────────────────────────────────────
   Скругление 28 — ровно как у карточки совместимости на главной. */
#screen-settings .settings-menu,
#screen-edit-profile .card,
#screen-edit-profile #profile-card {
  background: var(--lumi-card) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  border-radius: 28px !important;
  box-shadow: var(--lumi-shadow);
  margin: 0 0 14px;
}
#screen-edit-profile .card { padding: 18px 16px !important }
#screen-settings .settings-menu { padding: 6px 0 !important; overflow: hidden }

#screen-edit-profile .card h3,
#screen-edit-profile .card h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px !important;
  font-size: 17px; font-weight: 700; color: var(--lumi-text);
}
#screen-edit-profile .card h3 .lumi-ico,
#screen-edit-profile .card h4 .lumi-ico { color: var(--lumi-accent) }

/* ── Подписи полей ─────────────────────────────────────────────────────*/
#screen-edit-profile .form-group { margin: 0 0 14px }
#screen-edit-profile .form-group:last-child { margin-bottom: 0 }
#screen-edit-profile label {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px;
  font-size: 13.5px; font-weight: 600;
  color: var(--lumi-text-2);
}
#screen-edit-profile label .lumi-ico { color: var(--lumi-accent) }
#screen-edit-profile .hint,
#screen-edit-profile .form-hint,
#screen-edit-profile small {
  font-size: 12.5px; color: var(--lumi-text-3);
}

/* ── Поля ввода: те же «таблетки», что в карточке совместимости ────────*/
#screen-edit-profile .atma-input,
#screen-edit-profile input[type="text"],
#screen-edit-profile input[type="number"],
#screen-edit-profile input[type="date"],
#screen-edit-profile select {
  width: 100%; min-height: 48px; padding: 0 18px;
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  font-size: 15px; box-shadow: none !important;
}
/* Кнопки-поля (дата, время, рост) — тот же вид, но содержимое в ряд */
#screen-edit-profile button.atma-input {
  display: flex; align-items: center; gap: 9px; text-align: left;
}
#screen-edit-profile button.atma-input .lumi-ico { color: var(--lumi-accent) }
/* Многострочные — «таблетку» не сделать, берём мягкий прямоугольник */
#screen-edit-profile textarea,
#screen-edit-profile textarea.atma-input {
  min-height: 96px; padding: 14px 18px;
  border-radius: 22px !important; line-height: 1.45;
}
#screen-edit-profile .atma-input:focus,
#screen-edit-profile input:focus,
#screen-edit-profile textarea:focus,
#screen-edit-profile select:focus {
  outline: none; border-color: var(--lumi-accent) !important;
}
#screen-edit-profile ::placeholder { color: var(--lumi-text-3); opacity: 1 }

/* ── Кнопки ────────────────────────────────────────────────────────────*/
#screen-edit-profile .atma-button,
#screen-edit-profile .btn {
  min-height: 52px; padding: 0 20px;
  border-radius: 999px !important;
  font-size: 16px; font-weight: 600;
  box-shadow: none !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
#screen-edit-profile .atma-button.full,
#screen-edit-profile .btn.full { width: 100%; display: flex }
#screen-edit-profile #btn-save-profile .lumi-ico,
#screen-edit-profile .btn.primary .lumi-ico { color: var(--lumi-on-accent) }
/* Вторичная — контур вместо заливки: главное действие на экране одно */
#screen-edit-profile .atma-button--secondary,
#screen-edit-profile .btn.outline,
#screen-edit-profile #gallery-add-btn {
  background: transparent !important;
  border: 1.5px solid var(--lumi-accent-fill) !important;
  color: var(--lumi-text) !important;
}

/* ── Чипы «пол» и «кого ищу» ───────────────────────────────────────────
   Выбранный вариант красился старым золотым цветом из прежней палитры —
   переводим на общий акцент, иначе экран выпадает из общего вида. */
#screen-edit-profile .g-pill {
  min-height: 44px; padding: 0 18px;
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  font-size: 14.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
#screen-edit-profile .g-pill .lumi-ico { color: var(--lumi-text-3) }
#screen-edit-profile .g-pill.active {
  background: var(--lumi-accent-soft) !important;
  border-color: var(--lumi-accent) !important;
  color: var(--lumi-accent) !important;
}
#screen-edit-profile .g-pill.active .lumi-ico { color: var(--lumi-accent) }

/* ── Плашка «поля со звёздочкой» ───────────────────────────────────────*/
#screen-edit-profile .dating-required-banner {
  border-radius: 22px !important;
  padding: 13px 16px !important;
  font-size: 13.5px; line-height: 1.45;
  margin: 0 0 14px;
}

/* ── Список настроек ───────────────────────────────────────────────────*/
#screen-settings .settings-item {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 56px;
  padding: 0 18px !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 15.5px; font-weight: 500;
  color: var(--lumi-text) !important;
}
/* Разделители между пунктами. Селектор `* + .settings-item` — не лень:
   между пунктами лежат скрытые .settings-divider, и обычное соседство
   `.settings-item + .settings-item` через них не работает. */
#screen-settings .settings-menu > * + .settings-item,
#screen-settings .settings-menu > * + #theme-picker {
  border-top: 1px solid var(--lumi-border-soft) !important;
}
#screen-settings .settings-divider { display: none }
#screen-settings .settings-icon {
  width: 22px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--lumi-accent);
}
#screen-settings .settings-label { flex: 1 1 auto; text-align: left }
#screen-settings .settings-arrow {
  display: inline-flex; align-items: center;
  color: var(--lumi-text-3); font-size: 0;
}
#screen-settings .settings-arrow .lumi-ico { width: 16px; height: 16px }
#screen-settings .settings-item--danger .settings-label,
#screen-settings .settings-item--danger .settings-icon {
  color: var(--lumi-danger) !important;
}

/* ── Выбор темы ────────────────────────────────────────────────────────
   Было десять плашек, залитых собственным фоном каждой темы: на тёмном
   экране половина светилась белым и разваливала страницу. Оставляем один
   общий вид, а саму тему показывает кружок её цвета. */
#screen-settings #settings-theme-block { min-height: 52px }
#screen-settings #theme-picker {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 9px; padding: 4px 18px 16px !important;
  background: transparent !important;
}
#screen-settings .theme-swatch {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 14px !important;
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  font-size: 14px; font-weight: 600;
  box-shadow: none !important;
}
#screen-settings .theme-swatch::before {
  content: ""; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--sw-ac, var(--lumi-accent));
  border: 2px solid var(--sw-bg, var(--lumi-bg));
  box-shadow: 0 0 0 1px var(--lumi-border);
}
#screen-settings .theme-swatch.is-active {
  border-color: var(--lumi-accent) !important;
  background: var(--lumi-accent-soft) !important;
}
#screen-settings .theme-swatch-name {
  flex: 1 1 auto; text-align: left; color: inherit !important;
}

/* ── Подвал ────────────────────────────────────────────────────────────*/
#screen-settings .settings-footer { padding: 18px 0 6px; text-align: center }
#screen-settings .settings-version { font-size: 12px; color: var(--lumi-text-3) }

/* ── Доводка после первого просмотра ───────────────────────────────────*/

/* Под заголовком оставалась рамка из прежнего оформления. Разделять
   разделы теперь и так есть чем — карточками. */
#screen-settings .screen-title,
#screen-edit-profile .screen-title { border: 0 !important }

/* Звёздочка обязательных полей и плашка про них были золотыми — цвет
   достался от старой палитры и выбивался из общего вида. */
#screen-edit-profile .req-mark,
#screen-edit-profile .req-mark .lumi-ico { color: var(--lumi-accent) !important }
#screen-edit-profile .req-mark .lumi-ico { width: 14px; height: 14px }
#screen-edit-profile .dating-required-banner {
  background: var(--lumi-accent-soft) !important;
  border-color: var(--lumi-accent-fill) !important;
  color: var(--lumi-text-2) !important;
}
#screen-edit-profile .dating-required-banner .lumi-ico { color: var(--lumi-accent) }

/* Переключатель: включённое состояние красим акцентом, а не системным
   синим — иначе на экране появляется третий, чужой цвет. */
#screen-edit-profile .dating-switch-slider {
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
}
#screen-edit-profile .dating-switch input:checked + .dating-switch-slider {
  background: var(--lumi-accent-fill) !important;
  border-color: var(--lumi-accent-fill) !important;
}

/* «Детали профиля» — та же «таблетка», что у остальных строк-переходов */
#screen-edit-profile .prof-details { margin-top: 12px }
#screen-edit-profile .prof-details-summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 18px;
  border-radius: 999px;
  background: var(--lumi-card);
  border: 1px solid var(--lumi-border-soft);
  color: var(--lumi-text);
  font-size: 15px; font-weight: 600;
  list-style: none; cursor: pointer;
}
#screen-edit-profile .prof-details-summary::-webkit-details-marker { display: none }



/* #screen-personal — цвета опасного действия перенесены в общую палитру (tokens.css). */

#screen-personal .settings-header,
#screen-privacy .settings-header,
#screen-help .settings-header,
#screen-about .settings-header {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 0; background: transparent;
}
#screen-personal .screen-title,
#screen-privacy .screen-title,
#screen-help .screen-title,
#screen-about .screen-title,
#screen-personal .screen-title,
#screen-privacy .screen-title,
#screen-help .screen-title,
#screen-about .screen-title {
  background: transparent !important;
  padding: 0 !important;
  margin: 4px 0 18px;
  font-size: 23px; font-weight: 700; line-height: 1.15;
  color: var(--lumi-text) !important;
  letter-spacing: -.015em;
  text-align: left;
}
#screen-personal .btn-back,
#screen-privacy .btn-back,
#screen-help .btn-back,
#screen-about .btn-back,
#screen-personal .btn-back,
#screen-privacy .btn-back,
#screen-help .btn-back,
#screen-about .btn-back {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 15px 0 10px; margin: 0;
  border-radius: 999px;
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  font-size: 14px; font-weight: 600;
  box-shadow: none !important;
}
#screen-personal .btn-back .lumi-ico,
#screen-privacy .btn-back .lumi-ico,
#screen-help .btn-back .lumi-ico,
#screen-about .btn-back .lumi-ico,
#screen-personal .btn-back .lumi-ico,
#screen-privacy .btn-back .lumi-ico,
#screen-help .btn-back .lumi-ico,
#screen-about .btn-back .lumi-ico { width: 15px; height: 15px
}
#screen-personal .btn-back:active,
#screen-privacy .btn-back:active,
#screen-help .btn-back:active,
#screen-about .btn-back:active,
#screen-personal .btn-back:active,
#screen-privacy .btn-back:active,
#screen-help .btn-back:active,
#screen-about .btn-back:active {
  border-color: var(--lumi-accent-fill) !important;
  color: var(--lumi-text) !important;
}
#screen-personal .card,
#screen-privacy .card,
#screen-help .card,
#screen-about .card,
#screen-personal #profile-card,
#screen-privacy #profile-card,
#screen-help #profile-card,
#screen-about #profile-card {
  background: var(--lumi-card) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  border-radius: 28px !important;
  box-shadow: var(--lumi-shadow);
  margin: 0 0 14px;
}
#screen-personal .card,
#screen-privacy .card,
#screen-help .card,
#screen-about .card { padding: 18px 16px !important
}
#screen-personal .card h3,
#screen-privacy .card h3,
#screen-help .card h3,
#screen-about .card h3,
#screen-personal .card h4,
#screen-privacy .card h4,
#screen-help .card h4,
#screen-about .card h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px !important;
  font-size: 17px; font-weight: 700; color: var(--lumi-text);
}
#screen-personal .card h3 .lumi-ico,
#screen-privacy .card h3 .lumi-ico,
#screen-help .card h3 .lumi-ico,
#screen-about .card h3 .lumi-ico,
#screen-personal .card h4 .lumi-ico,
#screen-privacy .card h4 .lumi-ico,
#screen-help .card h4 .lumi-ico,
#screen-about .card h4 .lumi-ico { color: var(--lumi-accent)
}
#screen-personal .form-group,
#screen-privacy .form-group,
#screen-help .form-group,
#screen-about .form-group { margin: 0 0 14px
}
#screen-personal .form-group:last-child,
#screen-privacy .form-group:last-child,
#screen-help .form-group:last-child,
#screen-about .form-group:last-child { margin-bottom: 0
}
#screen-personal label,
#screen-privacy label,
#screen-help label,
#screen-about label {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px;
  font-size: 13.5px; font-weight: 600;
  color: var(--lumi-text-2);
}
#screen-personal label .lumi-ico,
#screen-privacy label .lumi-ico,
#screen-help label .lumi-ico,
#screen-about label .lumi-ico { color: var(--lumi-accent)
}
#screen-personal .hint,
#screen-privacy .hint,
#screen-help .hint,
#screen-about .hint,
#screen-personal .form-hint,
#screen-privacy .form-hint,
#screen-help .form-hint,
#screen-about .form-hint,
#screen-personal small,
#screen-privacy small,
#screen-help small,
#screen-about small {
  font-size: 12.5px; color: var(--lumi-text-3);
}
#screen-personal .atma-input,
#screen-privacy .atma-input,
#screen-help .atma-input,
#screen-about .atma-input,
#screen-personal input[type="text"],
#screen-privacy input[type="text"],
#screen-help input[type="text"],
#screen-about input[type="text"],
#screen-personal input[type="number"],
#screen-privacy input[type="number"],
#screen-help input[type="number"],
#screen-about input[type="number"],
#screen-personal input[type="date"],
#screen-privacy input[type="date"],
#screen-help input[type="date"],
#screen-about input[type="date"],
#screen-personal select,
#screen-privacy select,
#screen-help select,
#screen-about select {
  width: 100%; min-height: 48px; padding: 0 18px;
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  font-size: 15px; box-shadow: none !important;
}
#screen-personal button.atma-input,
#screen-privacy button.atma-input,
#screen-help button.atma-input,
#screen-about button.atma-input {
  display: flex; align-items: center; gap: 9px; text-align: left;
}
#screen-personal button.atma-input .lumi-ico,
#screen-privacy button.atma-input .lumi-ico,
#screen-help button.atma-input .lumi-ico,
#screen-about button.atma-input .lumi-ico { color: var(--lumi-accent)
}
#screen-personal textarea,
#screen-privacy textarea,
#screen-help textarea,
#screen-about textarea,
#screen-personal textarea.atma-input,
#screen-privacy textarea.atma-input,
#screen-help textarea.atma-input,
#screen-about textarea.atma-input {
  min-height: 96px; padding: 14px 18px;
  border-radius: 22px !important; line-height: 1.45;
}
#screen-personal .atma-input:focus,
#screen-privacy .atma-input:focus,
#screen-help .atma-input:focus,
#screen-about .atma-input:focus,
#screen-personal input:focus,
#screen-privacy input:focus,
#screen-help input:focus,
#screen-about input:focus,
#screen-personal textarea:focus,
#screen-privacy textarea:focus,
#screen-help textarea:focus,
#screen-about textarea:focus,
#screen-personal select:focus,
#screen-privacy select:focus,
#screen-help select:focus,
#screen-about select:focus {
  outline: none; border-color: var(--lumi-accent) !important;
}
#screen-personal ::placeholder,
#screen-privacy ::placeholder,
#screen-help ::placeholder,
#screen-about ::placeholder { color: var(--lumi-text-3); opacity: 1
}
#screen-personal .atma-button,
#screen-privacy .atma-button,
#screen-help .atma-button,
#screen-about .atma-button,
#screen-personal .btn,
#screen-privacy .btn,
#screen-help .btn,
#screen-about .btn {
  min-height: 52px; padding: 0 20px;
  border-radius: 999px !important;
  font-size: 16px; font-weight: 600;
  box-shadow: none !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
#screen-personal .atma-button.full,
#screen-privacy .atma-button.full,
#screen-help .atma-button.full,
#screen-about .atma-button.full,
#screen-personal .btn.full,
#screen-privacy .btn.full,
#screen-help .btn.full,
#screen-about .btn.full { width: 100%; display: flex
}
#screen-personal #btn-save-profile .lumi-ico,
#screen-privacy #btn-save-profile .lumi-ico,
#screen-help #btn-save-profile .lumi-ico,
#screen-about #btn-save-profile .lumi-ico,
#screen-personal .btn.primary .lumi-ico,
#screen-privacy .btn.primary .lumi-ico,
#screen-help .btn.primary .lumi-ico,
#screen-about .btn.primary .lumi-ico { color: var(--lumi-on-accent)
}
#screen-personal .atma-button--secondary,
#screen-privacy .atma-button--secondary,
#screen-help .atma-button--secondary,
#screen-about .atma-button--secondary,
#screen-personal .btn.outline,
#screen-privacy .btn.outline,
#screen-help .btn.outline,
#screen-about .btn.outline,
#screen-personal #gallery-add-btn,
#screen-privacy #gallery-add-btn,
#screen-help #gallery-add-btn,
#screen-about #gallery-add-btn {
  background: transparent !important;
  border: 1.5px solid var(--lumi-accent-fill) !important;
  color: var(--lumi-text) !important;
}
#screen-personal .g-pill,
#screen-privacy .g-pill,
#screen-help .g-pill,
#screen-about .g-pill {
  min-height: 44px; padding: 0 18px;
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  font-size: 14.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
#screen-personal .g-pill .lumi-ico,
#screen-privacy .g-pill .lumi-ico,
#screen-help .g-pill .lumi-ico,
#screen-about .g-pill .lumi-ico { color: var(--lumi-text-3)
}
#screen-personal .g-pill.active,
#screen-privacy .g-pill.active,
#screen-help .g-pill.active,
#screen-about .g-pill.active {
  background: var(--lumi-accent-soft) !important;
  border-color: var(--lumi-accent) !important;
  color: var(--lumi-accent) !important;
}
#screen-personal .g-pill.active .lumi-ico,
#screen-privacy .g-pill.active .lumi-ico,
#screen-help .g-pill.active .lumi-ico,
#screen-about .g-pill.active .lumi-ico { color: var(--lumi-accent)
}
#screen-personal .dating-required-banner,
#screen-privacy .dating-required-banner,
#screen-help .dating-required-banner,
#screen-about .dating-required-banner {
  border-radius: 22px !important;
  padding: 13px 16px !important;
  font-size: 13.5px; line-height: 1.45;
  margin: 0 0 14px;
}
#screen-personal .screen-title,
#screen-privacy .screen-title,
#screen-help .screen-title,
#screen-about .screen-title,
#screen-personal .screen-title,
#screen-privacy .screen-title,
#screen-help .screen-title,
#screen-about .screen-title { border: 0 !important
}
#screen-personal .req-mark,
#screen-privacy .req-mark,
#screen-help .req-mark,
#screen-about .req-mark,
#screen-personal .req-mark .lumi-ico,
#screen-privacy .req-mark .lumi-ico,
#screen-help .req-mark .lumi-ico,
#screen-about .req-mark .lumi-ico { color: var(--lumi-accent) !important
}
#screen-personal .req-mark .lumi-ico,
#screen-privacy .req-mark .lumi-ico,
#screen-help .req-mark .lumi-ico,
#screen-about .req-mark .lumi-ico { width: 14px; height: 14px
}
#screen-personal .dating-required-banner,
#screen-privacy .dating-required-banner,
#screen-help .dating-required-banner,
#screen-about .dating-required-banner {
  background: var(--lumi-accent-soft) !important;
  border-color: var(--lumi-accent-fill) !important;
  color: var(--lumi-text-2) !important;
}
#screen-personal .dating-required-banner .lumi-ico,
#screen-privacy .dating-required-banner .lumi-ico,
#screen-help .dating-required-banner .lumi-ico,
#screen-about .dating-required-banner .lumi-ico { color: var(--lumi-accent)
}
#screen-personal .dating-switch-slider,
#screen-privacy .dating-switch-slider,
#screen-help .dating-switch-slider,
#screen-about .dating-switch-slider {
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
}
#screen-personal .dating-switch input:checked + .dating-switch-slider,
#screen-privacy .dating-switch input:checked + .dating-switch-slider,
#screen-help .dating-switch input:checked + .dating-switch-slider,
#screen-about .dating-switch input:checked + .dating-switch-slider {
  background: var(--lumi-accent-fill) !important;
  border-color: var(--lumi-accent-fill) !important;
}
#screen-personal .prof-details,
#screen-privacy .prof-details,
#screen-help .prof-details,
#screen-about .prof-details { margin-top: 12px
}
#screen-personal .prof-details-summary,
#screen-privacy .prof-details-summary,
#screen-help .prof-details-summary,
#screen-about .prof-details-summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 18px;
  border-radius: 999px;
  background: var(--lumi-card);
  border: 1px solid var(--lumi-border-soft);
  color: var(--lumi-text);
  font-size: 15px; font-weight: 600;
  list-style: none; cursor: pointer;
}
#screen-personal .prof-details-summary::-webkit-details-marker,
#screen-privacy .prof-details-summary::-webkit-details-marker,
#screen-help .prof-details-summary::-webkit-details-marker,
#screen-about .prof-details-summary::-webkit-details-marker { display: none
}


/* #screen-personal — цвета опасного действия перенесены в общую палитру (tokens.css). */

/* :root[data-theme-effective="light"] #screen-pe — цвета опасного действия перенесены в общую палитру (tokens.css). */


/* Выбор пола на «Личных данных» — это две крупные плитки, а не строка чипов.
   Форму оставляем, но приводим к общему скруглению и акценту. */
#screen-personal .gender-btn {
  min-height: 92px; border-radius: 24px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  font-size: 15px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
#screen-personal .gender-btn .lumi-ico,
#screen-personal .gender-btn svg { color: var(--lumi-text-3); width: 26px; height: 26px }
#screen-personal .gender-btn.active,
#screen-personal .gender-btn[aria-pressed="true"] {
  background: var(--lumi-accent-soft) !important;
  border-color: var(--lumi-accent) !important;
  color: var(--lumi-accent) !important;
}
#screen-personal .gender-btn.active .lumi-ico,
#screen-personal .gender-btn.active svg { color: var(--lumi-accent) }

/* Показать/скрыть пароль — кружок в поле, а не подпись поверх текста */
#screen-privacy .input-wrapper { position: relative }
#screen-privacy .password-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important; border: 0 !important;
  color: var(--lumi-text-3) !important;
}
#screen-privacy .ui-input { padding-right: 52px }

/* Страница «О приложении» — тот же ритм, что у карточек */
#screen-about .about-title { font-size: 20px; font-weight: 700; margin: 10px 0 4px }
#screen-about .about-subtitle,
#screen-about .about-desc { color: var(--lumi-text-2); line-height: 1.5 }
#screen-about .about-system-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
}
#screen-about .about-system-item + .about-system-item {
  border-top: 1px solid var(--lumi-border-soft);
}
#screen-about .about-system-icon { color: var(--lumi-accent) }

/* Служебные сообщения формы */
#screen-privacy .settings-msg,
#screen-help .settings-msg,
#screen-personal .settings-msg {
  font-size: 13.5px; color: var(--lumi-text-2); margin-top: 10px;
}
#screen-privacy .settings-card-title,
#screen-help .settings-card-title {
  font-size: 17px; font-weight: 700; color: var(--lumi-text); margin: 0 0 14px;
}

/* ── Переключатель: правка после замечания ─────────────────────────────
   Две беды, обе мои.

   1. «Кривизна». Я добавил дорожке рамку 1 px, а у неё box-sizing:
      border-box — рамка съела 2 px высоты изнутри. Ползунок позиционирован
      сверху на 3 px, поэтому снизу осталось 1 px вместо 3: замер показал
      ровно это. Рамку убираем совсем, контур рисуем тенью — она не
      занимает места и геометрию не трогает.

   2. «Сливается с фоном». Включённое состояние красилось в --lumi-accent-fill:
      это бледная заливка кнопок, на белой карточке её почти не видно.
      Берём --lumi-accent — он заметно насыщеннее в обеих темах
      (#B84A45 на светлой, #E8A79C на тёмной). Выключенное состояние тоже
      осветляем до цвета границ, иначе на тёмной теме дорожка сливалась
      с карточкой. */
#screen-edit-profile .dating-switch-slider,
#screen-personal .dating-switch-slider,
#screen-privacy .dating-switch-slider,
#screen-help .dating-switch-slider,
#screen-about .dating-switch-slider,
#screen-settings .dating-switch-slider {
  background: var(--lumi-border) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10) !important;
  transition: background-color .18s ease;
}
#screen-edit-profile .dating-switch input:checked + .dating-switch-slider,
#screen-personal .dating-switch input:checked + .dating-switch-slider,
#screen-privacy .dating-switch input:checked + .dating-switch-slider,
#screen-help .dating-switch input:checked + .dating-switch-slider,
#screen-about .dating-switch input:checked + .dating-switch-slider,
#screen-settings .dating-switch input:checked + .dating-switch-slider {
  background: var(--lumi-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14) !important;
}
/* Кружок белый и с тенью: без тени он терялся на светлой дорожке */
#screen-edit-profile .dating-switch-slider::before,
#screen-personal .dating-switch-slider::before,
#screen-privacy .dating-switch-slider::before,
#screen-help .dating-switch-slider::before,
#screen-about .dating-switch-slider::before,
#screen-settings .dating-switch-slider::before {
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28) !important;
}


/* #screen-matches — цвета опасного действия перенесены в общую палитру (tokens.css). */

/* :root[data-theme-effective="light"] #screen-ma — цвета опасного действия перенесены в общую палитру (tokens.css). */


/* ── Заголовки: убираем тёмную плашку во всю ширину ────────────────────*/
#screen-matches .screen-title,
#screen-chats .screen-title {
  display: flex; align-items: center; gap: 9px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 4px 0 16px;
  font-size: 23px; font-weight: 700; line-height: 1.15;
  color: var(--lumi-text) !important;
  letter-spacing: -.015em;
  text-align: left;
}
#screen-matches .screen-title .lumi-ico,
#screen-chats .screen-title .lumi-ico { color: var(--lumi-accent); width: 21px; height: 21px }

/* ── Лайки: переключатель разделов ─────────────────────────────────────
   Было подчёркивание активного пункта — приём из другого набора.
   Делаем сегментированный переключатель: он читается с одного взгляда
   и повторяет форму остальных кнопок приложения. */
#screen-matches .m-tabs {
  display: flex; gap: 4px; padding: 4px;
  margin: 0 0 16px;
  background: var(--lumi-bg-sunken);
  border: 1px solid var(--lumi-border);
  border-radius: 999px;
}
#screen-matches .m-tab {
  flex: 1 1 0; min-height: 38px; padding: 0 8px;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--lumi-text-2) !important;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
#screen-matches .m-tab.active {
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
}

/* ── Лайки: карточки анкет ─────────────────────────────────────────────*/
#screen-matches .m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
#screen-matches .m-card {
  border-radius: 24px !important;
  overflow: hidden;
  background: var(--lumi-card) !important;
  border: 1px solid var(--lumi-border-soft);
  box-shadow: var(--lumi-shadow);
}
#screen-matches .m-card-photo { background: var(--lumi-bg-sunken) !important }
#screen-matches .m-card-body { padding: 11px 13px 13px }
#screen-matches .m-card-name {
  font-size: 14px; font-weight: 600; color: var(--lumi-text);
}
/* Кнопка расчёта поверх фото — круглая, на затемнении, как остальные */
#screen-matches .m-card-score.calc-btn {
  width: 34px; height: 34px;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20, 15, 22, .62) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #FFFFFF !important;
}
#screen-matches .m-card-score.calc-btn .lumi-ico { width: 17px; height: 17px }

/* ── Чат: список переписок ─────────────────────────────────────────────
   Строки лежали прямо на фоне и разделялись линиями во всю ширину.
   Собираем их в одну карточку — так же, как пункты настроек. */
#screen-chats #chats-list {
  background: var(--lumi-card);
  border: 1px solid var(--lumi-border-soft);
  border-radius: 28px;
  box-shadow: var(--lumi-shadow);
  overflow: hidden;
}
#screen-chats .cl-item {
  display: flex; align-items: center; gap: 13px;
  min-height: 74px; padding: 12px 16px !important;
  border: 0 !important;
  background: transparent !important;
}
#screen-chats .cl-item + .cl-item {
  /* пометка нужна: разделитель перебивается сокращённой записью border
     из другого файла. Снимал её — строки списка съезжали на пиксель. */
  border-top: 1px solid var(--lumi-border-soft) !important;
}
#screen-chats .cl-avatar {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden;
  background: var(--lumi-bg-sunken);
}
#screen-chats .cl-name { font-size: 15.5px; font-weight: 600; color: var(--lumi-text) }
#screen-chats .cl-last { font-size: 13.5px; color: var(--lumi-text-2) }
#screen-chats .cl-time { font-size: 12px; color: var(--lumi-text-3) }

/* ── Чат: сама переписка ───────────────────────────────────────────────*/
#screen-chats .ch-header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px 14px !important;
  background: transparent !important;
  border: 0 !important;
}
#screen-chats .ch-back {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  font-size: 0;
}
#screen-chats .ch-back .lumi-ico { width: 16px; height: 16px }
#screen-chats .ch-input-row {
  display: flex; align-items: center; gap: 9px;
  /* Строка ввода стоит НАД меню, а меню уже отвело место под полоску
     возврата. Добавлять её здесь — считать дважды. */
  padding: 10px 0;
  background: transparent;
}
#screen-chats #chats-input {
  flex: 1 1 auto; min-height: 46px; padding: 0 18px;
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  font-size: 15px;
}
#screen-chats #chats-input:focus { outline: none; border-color: var(--lumi-accent) }

/* ── Кнопка отправки: была фиолетовой — чужой цвет из прежней палитры ──*/
#screen-chats .ch-send,
#screen-chat .chat-send-btn {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lumi-accent-fill) !important;
  border: 0 !important;
  color: var(--lumi-on-accent) !important;
  box-shadow: none !important;
}
#screen-chats .ch-send svg,
#screen-chat .chat-send-btn svg { width: 20px; height: 20px; fill: currentColor }
#screen-chats .ch-send:disabled,
#screen-chat .chat-send-btn:disabled { opacity: .45 }

/* ── Чат AI ────────────────────────────────────────────────────────────*/
#screen-chat .chat-header {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: transparent !important;
  border-bottom: 1px solid var(--lumi-border-soft) !important;
  padding: 0 16px !important;
}
#screen-chat .chat-header-icon { display: inline-flex; color: var(--lumi-accent) }
#screen-chat .chat-header-icon .lumi-ico { width: 20px; height: 20px }
#screen-chat .chat-header-title {
  font-size: 17px; font-weight: 700; color: var(--lumi-text);
}

/* Свои сообщения — заливкой акцента, ответы — карточкой.
   Один угол у каждого пузыря делаем мельче: так видно, с чьей он стороны. */
#screen-chat .chat-bubble {
  border-radius: 20px !important;
  padding: 11px 15px !important;
  font-size: 14.5px; line-height: 1.5;
  border: 0 !important;
}
#screen-chat .chat-bubble.user {
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
  border-bottom-right-radius: 7px !important;
}
#screen-chat .chat-bubble.user b,
#screen-chat .chat-bubble.user strong { color: inherit }
#screen-chat .chat-bubble.assistant {
  background: var(--lumi-card) !important;
  color: var(--lumi-text) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  border-bottom-left-radius: 7px !important;
}

/* Подсказки-вопросы под перепиской */
#screen-chat .chat-quick-btn {
  min-height: 38px; padding: 0 15px;
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  font-size: 13px; font-weight: 500;
}

#screen-chat .chat-input-wrap {
  background: transparent !important;
  border-top: 1px solid var(--lumi-border-soft);
  /* То же самое: строка стоит над меню, полоска уже учтена там. */
  padding: 10px 0 6px !important;
}
#screen-chat #chat-input {
  min-height: 46px; padding: 12px 18px;
  border-radius: 23px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  font-size: 15px; line-height: 1.4;
}
#screen-chat #chat-input:focus { outline: none; border-color: var(--lumi-accent) !important }
#screen-chat #chat-input::placeholder { color: var(--lumi-text-3); opacity: 1 }
#screen-chat .chat-limit-bar {
  font-size: 12px; color: var(--lumi-text-3);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
#screen-chat .chat-limit-bar .lumi-ico { width: 14px; height: 14px }
/* Кнопка «вниз к последнему сообщению» */
#screen-chat .chat-scrolldown {
  width: 40px; height: 40px; border-radius: 50% !important;
  background: var(--lumi-card) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  box-shadow: var(--lumi-shadow) !important;
}

/* ── Сообщения в переписке знакомств ───────────────────────────────────
   Здесь свои классы (.chat-msg.me > .chat-bubble), а не те, что в чате AI,
   поэтому пузырь оставался тёмно-коричневым и в светлой теме выглядел
   чужим. Приводим к тому же виду: своё — заливкой акцента, чужое —
   карточкой; один угол мельче, чтобы видеть, с чьей стороны сообщение. */
#screen-chats .chat-bubble {
  border-radius: 20px !important;
  padding: 10px 14px !important;
  font-size: 14.5px; line-height: 1.45;
  border: 0 !important;
}
#screen-chats .chat-msg.me .chat-bubble {
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
  border-bottom-right-radius: 7px !important;
}
#screen-chats .chat-msg:not(.me) .chat-bubble {
  background: var(--lumi-card) !important;
  color: var(--lumi-text) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  border-bottom-left-radius: 7px !important;
}
#screen-chats .chat-time,
#screen-chats .msg-status { font-size: 11.5px; color: var(--lumi-text-3) }

/* ── Строки ввода в чатах не должны уходить под меню ───────────────────
   В components.css они прибиты к низу значением 44px — столько меню
   занимало до того, как я добавил подписи под иконками. Теперь меню
   выше, и обе строки залезали под него.
   Считаем от настоящей высоты меню: её измеряет lumi-theme.js и кладёт
   в --lumi-nav-h. Запасное значение на случай, если скрипт не успел.
   Отступ снизу у ленты сообщений — чтобы последнее сообщение не
   пряталось за строкой ввода. */
#screen-chats .ch-input-row,
#screen-chat .chat-input-wrap {
  bottom: var(--lumi-nav-h, 57px) !important;
}
/* Отступ под строкой ввода МЕРЯЕТСЯ скриптом (см. publishChatPad).
   Формула «высота меню + запас» была ошибкой: лента заканчивается выше
   меню, и его высота учитывалась дважды — под последним сообщением
   оставалась пустая полоса почти в 120 px. */
#screen-chats .ch-messages {
  padding-bottom: var(--lumi-chats-pad, 40px) !important;
}
#screen-chat .chat-body {
  padding-bottom: var(--lumi-chat-pad, 58px) !important;
}
/* Кнопка «вниз» и подсказки-вопросы висят над строкой ввода — им тоже */
/* Кнопка «вниз к последнему сообщению» висела заметно выше строки ввода.
   Ставим её вплотную над строкой — там, где заканчивается лента.
   Считаем от того же отступа, что и у ленты: они всегда совпадут. */
#screen-chat .chat-scrolldown {
  bottom: calc(var(--lumi-chat-pad, 54px) - 2px) !important;
}
#screen-chat .chat-quick {
  bottom: calc(var(--lumi-nav-h, 57px) + 92px) !important;
}
/* Плавающий переключатель тем — только на /test/ — поднимаем над строкой */
#lumi-float {
  bottom: calc(var(--lumi-nav-h, 57px) + 94px) !important;
}


/* #screen-login — цвета опасного действия перенесены в общую палитру (tokens.css). */

/* :root[data-theme-effective="light"] #screen-lo — цвета опасного действия перенесены в общую палитру (tokens.css). */


/* Заголовок и подпись под логотипом */
#screen-login .hero h1,
#screen-verify .hero h1 {
  font-size: 30px; font-weight: 700; letter-spacing: .16em;
  color: var(--lumi-text);
}
#screen-login .hero p { color: var(--lumi-text-2); font-size: 14px }
/* «Найди свою половину» стояло дважды подряд — под логотипом и отдельной
   строкой ниже. Вторую убираем: повтор читается как недоделка. */
#screen-login .vpn-hint-static { display: none }

/* Карточка формы — то же скругление 28, что у карточек в приложении */
#screen-login .card, #screen-reset-request .card,
#screen-reset-confirm .card, #screen-verify .card {
  border-radius: 28px !important;
  background: var(--lumi-card) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  box-shadow: var(--lumi-shadow);
  padding: 20px 16px !important;
}

/* Подписи полей */
#screen-login label, #screen-reset-request label,
#screen-reset-confirm label, #screen-verify label {
  font-size: 13.5px; font-weight: 600; color: var(--lumi-text-2);
  margin: 0 0 8px; display: block;
}
#screen-login .form-group, #screen-reset-request .form-group,
#screen-reset-confirm .form-group, #screen-verify .form-group { margin: 0 0 14px }

/* Поля — «таблетки» */
#screen-login .atma-input, #screen-reset-request .atma-input,
#screen-reset-confirm .atma-input, #screen-verify .atma-input,
#screen-login input[type="text"], #screen-verify input[type="text"] {
  width: 100%; min-height: 50px; padding: 0 18px;
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  font-size: 15px; box-shadow: none !important;
}
#screen-login .atma-input:focus, #screen-reset-request .atma-input:focus,
#screen-reset-confirm .atma-input:focus, #screen-verify .atma-input:focus {
  outline: none; border-color: var(--lumi-accent) !important;
}
#screen-login ::placeholder, #screen-verify ::placeholder { color: var(--lumi-text-3); opacity: 1 }

/* Показать пароль — кружок внутри поля, а не значок поверх текста */
#screen-login .input-wrapper { position: relative }
#screen-login .input-wrapper .atma-input { padding-right: 52px }
#screen-login .password-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important; border: 0 !important;
  color: var(--lumi-text-3) !important;
}

/* Блок согласий */
#screen-login .pd-consent {
  border-radius: 22px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  padding: 14px !important;
  margin: 4px 0 16px;
}
#screen-login .pd-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; line-height: 1.5; color: var(--lumi-text-2);
}
#screen-login .pd-check + .pd-check { margin-top: 12px }
#screen-login .pd-check input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
  border-radius: 7px !important;
  border: 1.5px solid var(--lumi-accent-fill) !important;
  background: transparent !important;
}
#screen-login .pd-check input[type="checkbox"]:checked {
  background: var(--lumi-accent-fill) !important;
  border-color: var(--lumi-accent-fill) !important;
}
#screen-login .pd-consent-error { color: #E0726E; font-size: 12.5px; margin-top: 10px }

/* Главная кнопка — та же, что «Мой профиль» и «Сохранить» */
#screen-login .atma-button, #screen-reset-request .atma-button,
#screen-reset-confirm .atma-button, #screen-verify .atma-button,
#screen-login .btn.primary, #screen-verify .btn.primary {
  min-height: 54px; padding: 0 22px !important;
  border-radius: 999px !important;
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
  border: 0 !important; box-shadow: none !important;
}
#screen-login .atma-button:disabled,
#screen-verify .atma-button:disabled {
  background: var(--lumi-bg-sunken) !important;
  color: var(--lumi-text-3) !important;
  opacity: 1 !important;
}

/* Ссылки под формой */
#screen-login .auth-link, #screen-reset-request .auth-link,
#screen-reset-confirm .auth-link, #screen-verify .auth-link {
  text-align: center; margin: 14px 0 0; font-size: 14px;
}
#screen-login .auth-link a, #screen-reset-request .auth-link a,
#screen-reset-confirm .auth-link a, #screen-verify .auth-link a,
#screen-login .pd-check a { color: var(--lumi-accent) !important }
#screen-login .pd-age-hint { font-size: 12px; color: var(--lumi-text-3); text-align: center; margin: 12px 0 0 }

/* Предупреждение про VPN */
#screen-login .vpn-warning-banner {
  border-radius: 22px !important;
  background: var(--lumi-accent-soft) !important;
  border: 1px solid var(--lumi-accent-fill) !important;
  color: var(--lumi-text-2) !important;
  padding: 12px 16px !important;
}
#screen-login .vpn-warning-icon .lumi-ico { color: var(--lumi-accent) }


/* #screen-dating — цвета опасного действия перенесены в общую палитру (tokens.css). */

/* :root[data-theme-effective="light"] #screen-da — цвета опасного действия перенесены в общую палитру (tokens.css). */


/* ── Верхняя полоса ────────────────────────────────────────────────────
   Была отдельной тёмной плашкой во всю ширину — как и на других экранах,
   убираем подложку, оставляем сами элементы. */
#screen-dating .d-topbar {
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 6px 14px !important;
}
#screen-dating .d-topbar-stat { color: var(--lumi-text-2); font-size: 13px }
#screen-dating .d-topbar-stat svg { color: var(--lumi-text-3) }

/* «Фильтры» — вторичная кнопка: контур, а не заливка */
#screen-dating .d-filter-pill {
  min-height: 34px; padding: 0 14px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
}
#screen-dating .d-filter-pill svg { color: var(--lumi-accent) }

/* Круглые кнопки справа — как в шапке главной */
#screen-dating .d-topbar-btn {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  font-size: 15px; font-weight: 600;
}
#screen-dating .d-topbar-btn svg { width: 18px; height: 18px }
#screen-dating .d-topbar-bell-dot {
  background: var(--lumi-accent) !important;
  border: 2px solid var(--lumi-bg) !important;
  width: 9px !important; height: 9px !important;
}

/* ── Карточка анкеты ───────────────────────────────────────────────────
   Углы были прямые — единственный такой элемент во всём приложении.
   Скругляем и подрезаем фотографию по форме карточки. */
#screen-dating .d-card {
  border-radius: 34px !important;
  position: relative;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: var(--lumi-shadow);
}
/* Скругление задаём САМИМ элементам, а не полагаемся на обрезку родителем.
   Раньше здесь стояло border-radius: 0 — фотография, картинка и оба
   затемнения были прямоугольными, а форму им давал только overflow:hidden
   у карточки. Браузер обрезает так без сглаживания: край получается рваным,
   и почти чёрный угол снимка проступает тёмной дугой. */
#screen-dating .d-card-photo,
#screen-dating .d-card-photo img {
  border-radius: 34px !important;
}
/* Затемнения тоже прямоугольные — им скругляем те углы, которых они
   касаются, иначе чёрный угол вылезает поверх скруглённого снимка. */
#screen-dating .d-card-photo::before { border-radius: 34px 34px 0 0 !important }
#screen-dating .d-card-photo::after  { border-radius: 0 0 34px 34px !important }

/* Город сверху — на затемнённой таблетке, иначе теряется на светлом фото */
#screen-dating .d-card-top-city {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(20, 15, 22, .55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #FFFFFF; font-size: 12.5px; font-weight: 600;
}
#screen-dating .d-card-top-city svg { color: rgba(255,255,255,.8) }

#screen-dating .d-card-name {
  font-size: 26px; font-weight: 700; color: #FFFFFF;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
/* Метки — «таблетки», как везде */
#screen-dating .d-pill {
  border-radius: 999px !important;
  padding: 5px 12px !important;
  background: rgba(20, 15, 22, .52) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #FFFFFF !important;
  font-size: 12.5px; font-weight: 500;
}

/* ── Кнопки действий ───────────────────────────────────────────────────
   Все круглые и на затемнении, чтобы читались на любой фотографии.
   Заливкой акцента выделена только «нравится» — главное действие здесь
   одно, как и на остальных экранах. */
#screen-dating .d-btn {
  background: rgba(20, 15, 22, .58) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
#screen-dating .d-btn svg { color: currentColor }
#screen-dating .d-btn.like {
  background: var(--lumi-accent-fill) !important;
  border-color: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
}
#screen-dating .d-btn.like svg { fill: currentColor }
/* «Огонь» и «инь-ян» рисуются своей графикой — подложку им не ставим */
#screen-dating .d-btn.fire,
#screen-dating .d-btn.d-btn-yin {
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none;
}
/* Подпись «Синтез» под кругом */
#screen-dating .d-synthesis-btn {
  border-radius: 999px !important;
  background: rgba(20, 15, 22, .58) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16) !important;
  color: #FFFFFF !important;
  font-size: 12px; font-weight: 600;
  padding: 5px 12px !important;
}

/* ── Панель выбора темы (только на /test/) ─────────────────────────────
   Снизу она закрывала кнопки действий на этом экране. Переносим под
   верхнюю полосу справа: там свободно на всех экранах. */
#lumi-float {
  top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  opacity: .92;
}


/* #screen-dating-notifications — цвета опасного действия перенесены в общую палитру (tokens.css). */

/* :root[data-theme-effective="light"] #screen-da — цвета опасного действия перенесены в общую палитру (tokens.css). */


/* ── Шапка: та же, что на настройках ───────────────────────────────────*/
#screen-dating-notifications .screen-title,
#screen-filters .screen-title {
  display: flex; align-items: center; gap: 9px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 4px 0 18px;
  font-size: 23px; font-weight: 700; line-height: 1.15;
  color: var(--lumi-text) !important;
  letter-spacing: -.015em;
  text-align: left;
}
#screen-dating-notifications .screen-title .lumi-ico,
#screen-filters .screen-title .lumi-ico { color: var(--lumi-accent); width: 21px; height: 21px }
#screen-dating-notifications .btn-back,
#screen-filters .btn-back {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 15px 0 10px; margin: 0;
  border-radius: 999px;
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  font-size: 14px; font-weight: 600;
}
#screen-dating-notifications .btn-back .lumi-ico,
#screen-filters .btn-back .lumi-ico { width: 15px; height: 15px }

/* ── Уведомления ───────────────────────────────────────────────────────*/
#screen-dating-notifications .card {
  border-radius: 28px !important;
  background: var(--lumi-card) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  box-shadow: var(--lumi-shadow);
  padding: 4px 16px !important;
}
#screen-dating-notifications .dating-notify-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0 !important;
  border: 0 !important;
}
#screen-dating-notifications .dating-notify-row + .dating-notify-row {
  border-top: 1px solid var(--lumi-border-soft);
}
#screen-dating-notifications .dating-notify-copy { flex: 1 1 auto; min-width: 0 }
#screen-dating-notifications .dating-notify-copy > *:first-child {
  font-size: 15.5px; font-weight: 600; color: var(--lumi-text);
}
#screen-dating-notifications .dating-notify-copy > *:last-child {
  font-size: 13px; color: var(--lumi-text-2); line-height: 1.4; margin-top: 3px;
}

/* Переключатели были сиреневыми — цвет из прежней палитры.
   Правило то же, что на других экранах: рамку не ставим (она сбивает
   ползунок с центра), контур рисуем тенью. */
#screen-dating-notifications .dating-switch-slider {
  background: var(--lumi-border) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10) !important;
  transition: background-color .18s ease;
}
#screen-dating-notifications .dating-switch input:checked + .dating-switch-slider {
  background: var(--lumi-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14) !important;
}
#screen-dating-notifications .dating-switch-slider::before {
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28) !important;
}

/* «Проверить уведомления» — вторичное действие, контурная таблетка */
#screen-dating-notifications #btn-test-push {
  display: flex; width: 100%;
  min-height: 48px; margin-top: 16px;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  font-size: 15px; font-weight: 600;
}

/* ── Фильтры ───────────────────────────────────────────────────────────*/
/* Заголовки групп и разделов были тёмно-коричневыми — на тёмном фоне
   почти не читались. Переводим на общие цвета текста. */
#screen-filters .fs-group-title {
  color: var(--lumi-text-3) !important;
  font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  margin: 22px 0 10px;
}
#screen-filters .fs-group:first-child .fs-group-title { margin-top: 4px }
#screen-filters .fs-section-title {
  color: var(--lumi-text-2) !important;
  font-size: 13.5px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  margin: 0 0 9px;
}
#screen-filters .fs-section { margin-bottom: 16px }

/* Кнопки выбора и метки — «таблетки» в общем стиле */
#screen-filters .fs-gender-btn,
#screen-filters .fs-pill {
  min-height: 42px; padding: 0 16px !important;
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  font-size: 14px; font-weight: 500;
}
#screen-filters .fs-gender-btn.active,
#screen-filters .fs-pill.active,
#screen-filters .fs-gender-btn[aria-pressed="true"],
#screen-filters .fs-pill[aria-pressed="true"] {
  background: var(--lumi-accent-soft) !important;
  border-color: var(--lumi-accent) !important;
  color: var(--lumi-accent) !important;
  font-weight: 600;
}

/* Поля диапазона «От — До»: были прямоугольниками со скруглением 8 */
#screen-filters .fs-picker-btn {
  min-height: 58px; padding: 8px 14px !important;
  border-radius: 20px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
#screen-filters .fs-picker-btn > *:first-child {
  font-size: 11px; color: var(--lumi-text-3); font-weight: 500;
}
#screen-filters .fs-picker-btn > *:last-child { font-size: 15px; font-weight: 600 }
#screen-filters .fs-picker-sep { color: var(--lumi-text-3) }

/* Кнопки внизу: «Применить» — главная, «Сбросить» — вторичная */
#screen-filters #fs-apply,
#screen-filters #fs-reset {
  min-height: 52px; width: 100%;
  border-radius: 999px !important;
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: none !important;
}
#screen-filters #fs-reset {
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  margin-top: 10px;
}

/* ── Затемнение под фотографией анкеты ─────────────────────────────────
   Было одно ровное затемнение до 60% чистого чёрного — имя и метки
   местами терялись на светлых снимках. Делаем плавнее и глубже, и в
   тёплом тоне основного фона, а не в холодном чёрном. */
#screen-dating .d-card-photo::after {
  height: 70% !important;
  background: linear-gradient(to top,
      rgba(14, 10, 16, .96) 0%,
      rgba(14, 10, 16, .88) 14%,
      rgba(14, 10, 16, .66) 32%,
      rgba(14, 10, 16, .38) 54%,
      rgba(14, 10, 16, .16) 76%,
      rgba(14, 10, 16, .04) 90%,
      rgba(14, 10, 16, 0) 100%) !important;
}
/* Верхнее затемнение под строку с городом — мягче, оно только для неё */
#screen-dating .d-card-photo::before {
  background: linear-gradient(to bottom,
      rgba(14, 10, 16, .58) 0%,
      rgba(14, 10, 16, .22) 45%,
      rgba(14, 10, 16, 0) 100%) !important;
}

/* ── Край снимка ───────────────────────────────────────────────────────
   Форма угла ровная — это я проверил на сплошной заливке. «Резкость»
   давало другое: светлая фотография обрывается о тёмный фон встык, и
   граница читается как срез. Кладём поверх тонкую светлую грань — она
   отделяет снимок от фона, и переход перестаёт быть обрывом.
   Грань не перехватывает нажатия: свайп по карточке работает как прежде. */
#screen-dating .d-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  pointer-events: none;
  z-index: 3;
}
:root[data-theme-effective="light"] #screen-dating .d-card::after {
  box-shadow: inset 0 0 0 1px rgba(90, 60, 55, .16);
}

/* ── Высота карточки анкеты ────────────────────────────────────────────
   Между карточкой и меню оставалась пустая полоса в 44 пикселя. Она не
   случайная: у общего контейнера #app-main стоит отступ снизу ровно 44 —
   опять то самое старое число, под прежнюю высоту меню.

   На остальных экранах этот отступ полезен: он даёт воздух последнему
   элементу перед меню. А здесь карточка занимает всю высоту, и отступ
   превращается в пустоту. Поэтому убираем его ТОЛЬКО когда открыты
   «Знакомства», оставляя небольшой зазор, чтобы карточка не липла к меню.

   :has() читается как «контейнер, внутри которого открыт этот экран».
   В браузерах без его поддержки правило просто не применится и всё
   останется как было — ничего не сломается. */
#app-main:has(#screen-dating.active) {
  padding-bottom: 10px !important;
}


/* #screen-partner — цвета опасного действия перенесены в общую палитру (tokens.css). */

/* :root[data-theme-effective="light"] #screen-pa — цвета опасного действия перенесены в общую палитру (tokens.css). */


/* Кнопка «Назад» — как на остальных страницах */
#screen-partner .btn-back,
#screen-compat-detail .btn-back,
#screen-compat .btn-back {
  display: inline-flex; align-items: center; gap: 5px;
  height: 36px; padding: 0 15px 0 10px; margin: 0 0 14px;
  border-radius: 999px;
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  font-size: 14px; font-weight: 600;
}
#screen-partner .btn-back .lumi-ico,
#screen-compat-detail .btn-back .lumi-ico,
#screen-compat .btn-back .lumi-ico { width: 15px; height: 15px }

/* Фотография — то же скругление, что у карточки в «Знакомствах» */
#screen-partner .p-photo-wrap,
#screen-partner .p-photo-wrap img {
  border-radius: 28px !important;
  overflow: hidden;
}

#screen-partner .p-info-line {
  font-size: 15px; line-height: 1.45; color: var(--lumi-text);
}
#screen-partner .p-id { font-size: 12.5px; color: var(--lumi-text-3) }

/* Кнопки «Лайк» и «Написать» — таблетки; главная одна, вторая контуром */
#screen-partner .profile-actions {
  display: flex; gap: 10px; margin: 14px 0 18px;
}
#screen-partner .profile-actions .btn {
  flex: 1 1 0; min-height: 48px;
  border-radius: 999px !important;
  font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: none !important;
}
#screen-partner .profile-actions .btn:not(.primary) {
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
}

/* Заголовок разбора */
#screen-partner .cd-header,
#screen-compat-detail .cd-header {
  font-size: 20px; font-weight: 700; color: var(--lumi-text);
  text-align: center; margin: 4px 0 2px;
}
#screen-partner .cd-subtitle,
#screen-compat-detail .cd-subtitle {
  font-size: 13.5px; color: var(--lumi-text-2); text-align: center; margin: 0 0 16px;
}

/* Карточка с данными партнёра была холодно-серой (34,36,42) — цвет не из
   нашей палитры. Переводим на общий цвет карточек. */
#screen-partner .cd-partner-profile,
#screen-compat-detail .cd-partner-profile {
  border-radius: 28px !important;
  background: var(--lumi-card) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  box-shadow: var(--lumi-shadow);
  padding: 18px 16px !important;
}

/* ── Вкладки систем ────────────────────────────────────────────────────
   Активная была сиреневой (155,125,214) — цвет из прежней палитры.
   Переводим на общий акцент, как переключатель разделов в «Лайках». */
#screen-partner .sys-tabs,
#screen-compat-detail .sys-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 16px;
}
#screen-partner .sys-tab,
#screen-compat-detail .sys-tab {
  min-height: 38px; padding: 0 14px !important;
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  font-size: 13.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
}
#screen-partner .sys-tab .lumi-ico,
#screen-compat-detail .sys-tab .lumi-ico { color: var(--lumi-accent) }
#screen-partner .sys-tab.active,
#screen-compat-detail .sys-tab.active {
  background: var(--lumi-accent-fill) !important;
  border-color: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
}
#screen-partner .sys-tab.active .lumi-ico,
#screen-compat-detail .sys-tab.active .lumi-ico { color: var(--lumi-on-accent) }

/* ── Разделы разбора ───────────────────────────────────────────────────*/
#screen-partner .cd-section,
#screen-compat-detail .cd-section {
  background: var(--lumi-card);
  border: 1px solid var(--lumi-border-soft);
  border-radius: 24px;
  padding: 16px;
  margin: 0 0 14px;
}
#screen-partner .cd-section h3,
#screen-partner .cd-section h4,
#screen-compat-detail .cd-section h3,
#screen-compat-detail .cd-section h4 {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px; font-size: 16.5px; font-weight: 700; color: var(--lumi-text);
}
#screen-partner .cd-section .lumi-ico,
#screen-compat-detail .cd-section .lumi-ico { color: var(--lumi-accent) }

#screen-partner .cd-fin-row,
#screen-compat-detail .cd-fin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0;
}
#screen-partner .cd-fin-row + .cd-fin-row,
#screen-compat-detail .cd-fin-row + .cd-fin-row {
  border-top: 1px solid var(--lumi-border-soft);
}
#screen-partner .cd-fin-label,
#screen-compat-detail .cd-fin-label { color: var(--lumi-text-2); font-size: 13.5px }
#screen-partner .cd-fin-val,
#screen-compat-detail .cd-fin-val { color: var(--lumi-text); font-weight: 600; font-size: 14px }
#screen-partner .cd-fin-hint,
#screen-compat-detail .cd-fin-hint { color: var(--lumi-text-3); font-size: 12.5px }

/* Приглашение купить полный разбор — было в сиреневой заливке */
#screen-partner .cd-fin-cta,
#screen-compat-detail .cd-fin-cta {
  border-radius: 20px !important;
  background: var(--lumi-accent-soft) !important;
  border: 1px solid var(--lumi-accent-fill) !important;
  color: var(--lumi-text) !important;
  padding: 12px 16px !important;
}

/* Полоска совпадения: зелёный оставляем — он означает «хорошо»,
   и менять его на акцент значило бы потерять смысл. */
#screen-partner .cd-sync-bar,
#screen-compat-detail .cd-sync-bar {
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  height: 8px;
}
#screen-partner .cd-sync-fill,
#screen-compat-detail .cd-sync-fill { border-radius: 999px !important }

#screen-partner .cd-verdict-item,
#screen-compat-detail .cd-verdict-item {
  padding: 10px 0; font-size: 14px; line-height: 1.5; color: var(--lumi-text-2);
}
#screen-partner .cd-verdict-item + .cd-verdict-item,
#screen-compat-detail .cd-verdict-item + .cd-verdict-item {
  border-top: 1px solid var(--lumi-border-soft);
}

/* ── Плашки «N систем» в разделе «Где системы сошлись» ─────────────────
   Две беды, обе мои.

   1. Текст съезжал. Когда я менял эмодзи на иконки, галочка получила
      общий размер 18 px — а плашка всего 23 px высотой с отступом 2 px.
      Значок распирал строку и выталкивал цифру вбок. Уменьшаем его и
      выстраиваем содержимое в ряд по центру.

   2. Белый текст на ярком зелёном при кегле 11 не читался — «сплывался»
      с фоном. Сам цвет менять нельзя: зелёный и оранжевый здесь значат
      силу совпадения. Поэтому оставляем фон и делаем текст тёмным —
      на обоих цветах он контрастный.

   Селектор по внешнему виду, а не по классу: у плашки класса нет,
   оформление ей задаётся прямо в разметке. */
#screen-partner .cd-synthesis span[style*="color:#fff"],
#screen-compat-detail .cd-synthesis span[style*="color:#fff"] {
  display: inline-flex !important;
  align-items: center; justify-content: center; gap: 5px;
  padding: 4px 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #16110F !important;
  white-space: nowrap;
}
#screen-partner .cd-synthesis span[style*="color:#fff"] .lumi-ico,
#screen-compat-detail .cd-synthesis span[style*="color:#fff"] .lumi-ico {
  width: 13px !important; height: 13px !important;
}

/* Та же поправка на будущее: иконки, поставленные вместо эмодзи, идут
   размером 18 px. Внутри мелких строк разбора это много. */
#screen-partner .cd-section .lumi-ico,
#screen-compat-detail .cd-section .lumi-ico { width: 15px; height: 15px }
#screen-partner .cd-section h3 .lumi-ico,
#screen-partner .cd-section h4 .lumi-ico,
#screen-compat-detail .cd-section h3 .lumi-ico,
#screen-compat-detail .cd-section h4 .lumi-ico { width: 19px; height: 19px }

/* Подписи систем внутри блока («Астрология», «Матрица судьбы»…).
   Мой прежний селектор ловил и их — у них в разметке тот же радиус, — и
   красил текст в тёмный. На тёмной подложке они переставали читаться.
   Теперь селектор различает: у плашки в разметке задан color:#fff, у
   подписей нет. Сами подписи оформляем как обычные чипы. */
#screen-partner .cd-synthesis span[style*="var(--bar-track)"],
#screen-compat-detail .cd-synthesis span[style*="var(--bar-track)"] {
  display: inline-flex !important;
  align-items: center; gap: 5px;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border);
  color: var(--lumi-text-2) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}
#screen-partner .cd-synthesis span[style*="var(--bar-track)"] .lumi-ico,
#screen-compat-detail .cd-synthesis span[style*="var(--bar-track)"] .lumi-ico {
  width: 13px !important; height: 13px !important; color: var(--lumi-accent);
}

/* ══ Верхний ряд — на одной высоте на всех экранах ═════════════════════
   Образец — «Знакомства»: круглые кнопки там стоят на 10 px от верха.
   Остальные экраны разъехались: «Назад» прибита к нулю, шапка настроек
   на 20, заголовок «Лайков» на 24, панель главной на 36. Приводим к 10. */

/* Кнопка «Назад» одинаковая везде: прижата к верху — опускаем на 10 */
.screen .btn-back {
  top: 10px !important;
  height: 36px;
  padding: 0 15px 0 10px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
  font-size: 14px; font-weight: 600;
  box-shadow: none !important;
}
/* .screen .btn-back .lumi-ico — правило ничего не решало: его всегда перебивало другое.
   Проверено на живом сайте: 16 экранов, обе темы. Убрано. */


/* Экраны, где шапка стоит в общем потоке */
#screen-settings > .scroll-content,
#screen-personal > .scroll-content,
#screen-privacy > .scroll-content,
#screen-help > .scroll-content,
#screen-about > .scroll-content,
#screen-matches > .scroll-content,
#screen-chats > .scroll-content,
#screen-pro > .scroll-content {
  padding-top: 10px !important;
}
#screen-matches .screen-title,
#screen-chats .screen-title,
#screen-pro .screen-title { margin-top: 0 }

/* ══ «Синтез»: успокаиваем звёзды ══════════════════════════════════════
   Жалоба «с телефона крутятся очень быстро» — не про частоту экрана:
   такие анимации идут по времени, а не по кадрам. Причин две.

   1. Движений было ДВА одновременно: вся пара оборачивалась за 6 секунд,
      и каждая звезда при этом качалась вверх-вниз за 3 — то есть дважды
      за оборот. Вместе это читается как суета.
   2. На каждой звезде висело по ДВА свечения-фильтра. Для телефона это
      тяжело: кадры проседают, и движение выглядит дёрганым.

   Замедляем оборот и качание, оставляем по одному свечению и просим
   браузер считать это на видеоядре. */
#screen-dating .star-pair {
  animation-duration: 10s !important;
  will-change: transform;
}
#screen-dating .star-one,
#screen-dating .star-two {
  animation-duration: 5s !important;
  will-change: transform;
}
/* Сдвиг фазы у второй звезды. В исходной задумке он равен ПОЛОВИНЕ
   цикла: тогда одна звезда уходит, пока вторая возвращается, и видно
   именно пару. Когда я замедлил цикл с 3 с до 7, сдвиг остался
   прежним (1.5 с) и превратился из половины в пятую часть — звёзды
   поехали почти в ногу и слились в одно пятно. Держим половину. */
#screen-dating .star-two { animation-delay: -2.5s !important; }
/* #screen-dating .star-two — правило ничего не решало: его всегда перебивало другое.
   Проверено на живом сайте: 16 экранов, обе темы. Убрано. */

#screen-dating .star-one { filter: drop-shadow(0 0 9px #FF4500) !important }
#screen-dating .star-two { filter: drop-shadow(0 0 9px #00BFFF) !important }

/* Своя окраска у каждой звезды: тёплая и холодная — в этом весь смысл
   «синтеза» двух людей. Её сбивало моё же правило
   «#screen-dating .d-btn svg { color: currentcolor }»: оно старше по
   весу, чем «.star-one», и обе звезды становились белыми. Две белые
   звезды с сильным свечением, наложенные друг на друга, читаются как
   одно белое пятно — владелец так и написал: «звезда одна». */
#screen-dating .star-one { color: #FFA07A !important }
#screen-dating .star-two { color: #87CEFA !important }

/* Звёзды при уменьшенном движении.

   Останавливать их нельзя: обе лежат в ОДНОЙ точке и расходятся
   только движением — стоит его выключить, и они совпадают
   попиксельно. На экране остаётся одна неподвижная звезда, что
   владелец и увидел.

   Размах здесь маленький и движение спокойное — оставляем его,
   просто вдвое медленнее обычного. Это осмысленное движение:
   в нём весь смысл «синтеза» двух людей. */
@media (prefers-reduced-motion: reduce) {
  #screen-dating .star-pair {
    animation-duration: 16s !important;
    animation-iteration-count: infinite !important;
  }
  #screen-dating .star-one,
  #screen-dating .star-two {
    animation-duration: 8s !important;
    animation-iteration-count: infinite !important;
  }
  #screen-dating .star-two { animation-delay: -4s !important }
}

/* Доводка верхнего ряда до общей высоты, как на «Знакомствах».

   Здесь у меня была ошибка, из-за которой на профиле у кнопок срезало
   верхние 3 пикселя. Я поднимал полосу отрицательным отступом
   (margin-top: -5px), а блок .lumi-home, внутри которого она лежит, —
   прокручиваемый: у него overflow. Всё, что уходит выше его верхнего
   края, он обрезает и показать не может. Полоса вылезала на 5 пикселей
   вверх, и её верхушка вместе с верхушками кнопок пропадала.

   Правильно не поднимать содержимое поверх края, а опустить сам край:
   отступ снимаем с внешнего блока и задаём ВНУТРИ прокручиваемого.
   Тогда кнопки стоят на 11 — ровно там же, где на «Знакомствах», —
   и обрезать нечего. */
.lumi-home { padding-top: 9px !important }
.lumi-home .lumi-home__top { margin-top: 0 !important }
/* Внешний отступ профиля задан НИЖЕ, в блоке про строку состояния:
   здесь его задавать нельзя — тот блок идёт позже и всё равно победит. */
#screen-dating .d-topbar { padding-top: 10px !important; padding-bottom: 8px !important }

/* Номера шагов на «О приложении» были белыми на светло-розовом кружке —
   контраст 2.0 при норме 4.5, цифры почти не читались. Берём тот же
   тёмный цвет, что на акцентных кнопках. */
#screen-about .about-step-num {
  color: var(--lumi-on-accent) !important;
}

/* ── «О приложении»: цвета были прописаны намертво под тёмное оформление ──
   В светлой теме это вылезло: белый текст оказался на белом фоне (слово
   «Расчёты» пропадало совсем), а пояснения серым #aaa давали контраст 2.3
   при норме 4.5. Переводим на общие цвета текста — они меняются с темой. */
#screen-about .about-tab-info strong { color: var(--lumi-text) !important }
#screen-about .about-tab-info,
#screen-about .about-tab-info span { color: var(--lumi-text-2) !important }

/* Кружок с номером шага. В тёмной теме он светло-розовый — на нём нужен
   тёмный текст; в светлой он глубокого оттенка — там нужен белый.
   Одним цветом обойтись нельзя, поэтому задаём для каждой темы свой. */
#screen-about .about-step-num { color: var(--lumi-on-accent) !important }
:root[data-theme-effective="light"] #screen-about .about-step-num { color: #FFFFFF !important }

/* Ссылки в согласиях на входе: в светлой теме давали 4.4 при норме 4.5 —
   берём более насыщенный оттенок акцента. */
:root[data-theme-effective="light"] #screen-login .pd-check a,
:root[data-theme-effective="light"] #screen-login .auth-link a,
:root[data-theme-effective="light"] #screen-login a { color: var(--lumi-accent-strong) !important }

/* ── Проценты совместимости в светлой теме ─────────────────────────────
   Цвета процентов заданы прямо в разметке и подобраны под тёмный фон:
   жёлтый #eab308, зелёный #22c55e, красный #ef4444, синий #58a6ff.
   На белой карточке они выцветают — замер дал 1.9–2.5 при норме 4.5.

   Сами цвета менять нельзя: они означают уровень совпадения. Поэтому
   в светлой теме берём те же цвета, но глубже — смысл сохраняется,
   а текст читается. В тёмной теме всё остаётся как было. */
:root[data-theme-effective="light"] #screen-partner [style*="#eab308"],
:root[data-theme-effective="light"] #screen-compat-detail [style*="#eab308"] { color: #8A6508 !important }
:root[data-theme-effective="light"] #screen-partner [style*="#22c55e"],
:root[data-theme-effective="light"] #screen-compat-detail [style*="#22c55e"] { color: #15803D !important }
:root[data-theme-effective="light"] #screen-partner [style*="#ef4444"],
:root[data-theme-effective="light"] #screen-compat-detail [style*="#ef4444"] { color: #B91C1C !important }
:root[data-theme-effective="light"] #screen-partner [style*="#58a6ff"],
:root[data-theme-effective="light"] #screen-compat-detail [style*="#58a6ff"] { color: #1D4ED8 !important }

/* ── В настройках только два оформления ────────────────────────────────
   Прячем восемь лишних вариантов. Именно прячем, а не удаляем из
   разметки: вернуть при желании — снять одно это правило. */
#screen-settings #theme-picker .theme-swatch { display: none }
#screen-settings #theme-picker .theme-swatch[data-theme-name="auto"],
#screen-settings #theme-picker .theme-swatch[data-theme-name="dark"],
#screen-settings #theme-picker .theme-swatch[data-theme-name="light"] {
  display: flex;
}
/* Три кнопки в один ряд, а не в две колонки */
#screen-settings #theme-picker { grid-template-columns: 1fr 1fr 1fr }
#screen-settings #theme-picker .theme-swatch { padding: 0 10px !important; font-size: 12.5px }
#screen-settings #theme-picker .theme-swatch-name { text-align: center }
#screen-settings #theme-picker .theme-swatch::before { width: 14px; height: 14px }

/* Три кнопки в ряд: подписи не переносим, галочку выбранного отодвигаем,
   иначе «Тёмная» ломается на две строки. */
#screen-settings #theme-picker .theme-swatch {
  gap: 7px; white-space: nowrap; overflow: hidden;
}
#screen-settings #theme-picker .theme-swatch-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Галочка внутри выбранной темы съедала ширину, и «Тёмная» обрезалась.
   Выбор и так виден по рамке и подложке — галочку убираем. */
#screen-settings #theme-picker .theme-swatch::after { display: none !important }
#screen-settings #theme-picker .theme-swatch { padding: 0 8px !important }

/* ══ Безопасные зоны айфона ════════════════════════════════════════════
   В приложении-иконке (PWA) страница занимает весь экран: сверху её
   перекрывает строка состояния, снизу — полоска возврата. Две беды с
   боевого телефона:

   1. Верхний ряд срезался — отступа под строку состояния не было вовсе.
   2. Нижнее меню стояло слишком высоко: приложение ограничивает нижнюю
      зону восемью пикселями, а я сверху добавил её ПОЛНУЮ высоту (на
      айфоне это ещё около 34). В сумме под меню оставалась пустая полоса.

   Заводим свои переменные: так значения видны в одном месте, и их можно
   подменить при проверке, не имея телефона под рукой. */
:root {
  --lumi-sat: env(safe-area-inset-top, 0px);     /* строка состояния */
  --lumi-sab: env(safe-area-inset-bottom, 0px);  /* полоска возврата */
}

/* ВАЖНО про строку состояния айфона.

   Всё приложение уже опущено под неё: css/core/layout-core.css:45 задаёт
   '#app { padding-top: env(safe-area-inset-top) }'. Я этого не заметил и
   добавил такой же отступ ещё раз каждому экрану — на телефоне сверху
   получалась лишняя пустая полоса высотой с саму строку состояния.
   Владелец подтвердил её на устройстве 2026-09-08.

   Поэтому: всё, что лежит ВНУТРИ #app обычным потоком, никакой поправки
   не требует — просто 10 px. Поправка нужна только тому, что прибито
   к краю ЭКРАНА (position: fixed) и потому отступ #app не чувствует:
   кнопка «Назад» и окно кадрирования. Им --lumi-sat оставляем. */
.screen .btn-back { top: calc(var(--lumi-sat) + 10px) !important }

#screen-settings > .scroll-content,
#screen-personal > .scroll-content,
#screen-privacy > .scroll-content,
#screen-help > .scroll-content,
#screen-about > .scroll-content,
#screen-matches > .scroll-content,
#screen-chats > .scroll-content,
#screen-pro > .scroll-content {
  padding-top: 10px !important;
}
/* Профиль стоит отдельно: свои 9 px он держит ВНУТРИ .lumi-home (выше),
   потому что этот блок прокручиваемый и всё, что окажется выше его края,
   он обрезает. Снаружи поэтому ноль — иначе отступ сложится дважды. */
#screen-profile > .scroll-content { padding-top: 0 !important }
#screen-dating .d-topbar { padding-top: 10px !important }
/* #screen-chat .chat-header — правило ничего не решало: его всегда перебивало другое.
   Проверено на живом сайте: 16 экранов, обе темы. Убрано. */


/* Экраны с прикреплённой кнопкой «Назад»: содержимое должно её обходить */
#screen-edit-profile > .scroll-content,
#screen-report > .scroll-content,
#screen-filters > .scroll-content,
#screen-dating-notifications > .scroll-content,
#screen-partner > .scroll-content,
#screen-compat-detail > .scroll-content,
#screen-compat > .scroll-content {
  /* 58 хватает, чтобы содержимое обошло прибитую кнопку «Назад»:
     кнопка и содержимое отсчитываются от одной и той же верхней
     границы приложения, поэтому поправку сюда добавлять не нужно. */
  padding-top: 58px !important;
}

/* Нижнее меню: полоску возврата обходим, но не отдаём ей всю высоту —
   иначе меню «взлетает». Приложение ограничивает её 8 px, берём 14 —
   этого хватает, чтобы кнопки не попадали под полоску. */
/* Здесь стоял мой отступ 4 + до 18 пикселей под полоску возврата.
   Это была ошибка того же рода, что и сверху: приложение уже отводит
   под полоску до 8 пикселей, а я добавлял ещё до 18. В браузере
   полоска равна нулю и разницы не видно — промах вылезал только
   на телефоне, в PWA, где меню поднималось на 18 пикселей выше.
   Убрано: единственный источник этого отступа — само приложение. */

/* ══ Всплывающие окна ══════════════════════════════════════════════════
   Окна писались в разное время и каждое со своей палитрой: приветствие
   было тёмно-синим (#16213e), окно PRO — золотым, кнопки внутри имели
   скругление 8–14 вместо наших «таблеток». Сводим всё к общему виду.

   Часть окон собирается прямо в коде, с цветами внутри разметки. Там,
   где это переменные (--accent, --card, --border), они уже указывают на
   нашу палитру. Здесь дозадаём недостающие и правим форму. */

:root {
  --bar-track: var(--lumi-bg-sunken);
  --text-heading: var(--lumi-text);
}

/* ── Общая рамка окна ──────────────────────────────────────────────────*/
.push-modal,
.invite-qr-modal,
.modal-sheet,
.modal-content,
.ob-welcome-card,
.pwa-install-sheet {
  background: var(--lumi-card) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  color: var(--lumi-text) !important;
}
.push-modal,
.invite-qr-modal,
.modal-content,
.ob-welcome-card { border-radius: 28px !important }
/* Выдвижные снизу скругляем только сверху — они «выезжают» из края */
.modal-sheet,
.pwa-install-sheet { border-radius: 28px 28px 0 0 !important }

.push-modal-title,
.modal-title,
.pwa-install-title,
.ob-welcome-greeting {
  font-size: 19px; font-weight: 700; color: var(--lumi-text) !important;
}
.push-modal-subtitle,
.pwa-install-subtitle,
.ob-welcome-hint {
  font-size: 13.5px; color: var(--lumi-text-2) !important; line-height: 1.45;
}

/* ── Кнопки во всех окнах ──────────────────────────────────────────────*/
.push-modal .atma-button,
.invite-qr-modal .atma-button,
.modal-sheet .btn,
.modal-content .btn,
.ob-welcome-btn,
.ob-tour-next,
.pwa-btn-primary,
.pwa-btn-secondary {
  min-height: 48px; padding: 0 20px !important;
  border-radius: 999px !important;
  font-size: 15.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: none !important;
}
.push-modal #btn-push-dismiss,
.pwa-btn-secondary,
.ob-tour-skip,
.modal-sheet .btn.secondary,
.modal-content .btn.secondary {
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text-2) !important;
}

/* ── Приветствие после расчёта ─────────────────────────────────────────
   Карточка была тёмно-синей, плитки внутри — ещё темнее синим. Это
   единственное место во всём приложении с холодной палитрой. */
.ob-welcome-card { background: var(--lumi-card) !important }
.ob-welcome-item,
.ob-welcome-grid > * {
  background: var(--lumi-bg-sunken) !important;
  border: 1px solid var(--lumi-border);
  border-radius: 20px !important;
  color: var(--lumi-text) !important;
}
.ob-welcome-item-icon,
.ob-welcome-item .lumi-ico { color: var(--lumi-accent) !important }
.ob-welcome-item-label { color: var(--lumi-text-3) }
.ob-welcome-item-value { color: var(--lumi-text) }
.ob-welcome-greeting { color: var(--lumi-text) !important }
.ob-welcome-hint { color: var(--lumi-text-2) !important }
.ob-welcome-hint strong { color: var(--lumi-accent) !important }
.ob-welcome-btn {
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
  border-radius: 999px !important; min-height: 52px;
}
.ob-welcome-close { color: var(--lumi-text-3) }
.ob-welcome-card { box-shadow: var(--lumi-shadow) }

/* ── Обучение и подсказки ──────────────────────────────────────────────
   Всё это описано в отдельном файле onboarding-v3.css, где цвета вписаны
   прямо числами: тёмно-синие карточки #16213e и #16162a, белый текст,
   серые подписи #aaa. В тёмной теме это ещё как-то жило, в светлой белый
   текст ложился на белую карточку и пропадал совсем. Переводим на нашу
   палитру, чтобы обе темы работали. */
.ob-tour-tooltip {
  background: var(--lumi-card) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  border-radius: 22px !important;
  box-shadow: var(--lumi-shadow) !important;
}
.ob-tour-tooltip h4 { color: var(--lumi-text) !important; font-size: 16px }
.ob-tour-tooltip p { color: var(--lumi-text-2) !important }
.ob-tour-skip {
  color: var(--lumi-text-2) !important;
  border-radius: 999px; padding: 9px 16px;
}
.ob-tour-next {
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
  border-radius: 999px !important; min-height: 42px; padding: 0 18px !important;
}
.ob-tour-arrow { color: var(--lumi-accent) }
.ob-tour-dot { background: var(--lumi-border) !important }
.ob-tour-dot.active { background: var(--lumi-accent) !important }
.ob-tour-spotlight { border-radius: 22px }

/* Подсказка-облачко: была залита акцентом с белым текстом. Наш акцент —
   светлая заливка, белое по ней не читается, поэтому текст тёмный. */
.ob-hint-bubble,
.ob-dating-hint {
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
  border-radius: 18px !important;
  box-shadow: var(--lumi-shadow) !important;
}
.ob-hint-bubble::after,
.ob-dating-hint::before { background: var(--lumi-accent-fill) !important }
.ob-hint-bubble .ob-hint-dismiss,
.ob-dating-hint .ob-dh-dismiss {
  background: rgba(0,0,0,.10) !important;
  color: var(--lumi-on-accent) !important;
  border-radius: 999px !important; padding: 6px 14px !important;
}
.ob-hint-bubble .ob-hint-icon { color: var(--lumi-on-accent) !important }

/* Кнопка «?» и её меню */
.ob-help-fab {
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
  box-shadow: var(--lumi-shadow) !important;
}
.ob-help-menu {
  background: var(--lumi-card) !important;
  border: 1px solid var(--lumi-border-soft) !important;
  border-radius: 20px !important;
  color: var(--lumi-text) !important;
  color-scheme: normal !important;
  box-shadow: var(--lumi-shadow) !important;
}
.ob-help-menu-item { color: var(--lumi-text) !important }
.ob-help-menu-item:active { background: var(--lumi-bg-sunken) !important }
.ob-help-menu-item .ob-hm-icon,
.ob-help-menu-item .lumi-ico { color: var(--lumi-accent) !important }
/* .ph-topbar-help — правило ничего не решало: его всегда перебивало другое.
   Проверено на живом сайте: 16 экранов, обе темы. Убрано. */

.ph-topbar-help:active,
.d-topbar-help:active { background: var(--lumi-border-soft) !important }

/* Список систем в «О приложении» */
.about-tabs-title { color: var(--lumi-text) !important }
.about-tab-item { border-bottom-color: var(--lumi-border-soft) }
.about-tab-icon .lumi-ico { color: var(--lumi-accent) !important }
.about-tab-info strong { color: var(--lumi-text) !important }
.about-tab-info span { color: var(--lumi-text-2) !important }

/* ── Окно установки на телефон ─────────────────────────────────────────*/
.pwa-install-handle { background: var(--lumi-border) !important; border-radius: 999px !important }
.pwa-install-icon .lumi-ico,
.pwa-benefit-icon .lumi-ico,
.pwa-share-icon .lumi-ico { color: var(--lumi-accent) !important }
.pwa-benefit { color: var(--lumi-text-2) }
.pwa-step { color: var(--lumi-text-2) }
.pwa-step-num {
  background: var(--lumi-accent-fill);
  color: var(--lumi-on-accent);
  border-radius: 50%;
}

/* ── Список «Чтобы открыть Знакомства» ─────────────────────────────────
   Собирается в коде, скругления заданы прямо в разметке: 8 у кнопок,
   12 и 14 у карточек. Догоняем до нашего вида по этим самым значениям. */
#dating-reg [style*="border-radius:12px"],
#dating-reg [style*="border-radius:14px"] {
  border-radius: 22px !important;
  background: var(--lumi-card) !important;
  border-color: var(--lumi-border-soft) !important;
}
#dating-reg [style*="border-radius:8px"] {
  border-radius: 999px !important;
  padding: 9px 16px;
  font-weight: 600;
}
#dating-reg [style*="background:var(--accent"],
#dating-reg [style*="background: var(--accent"] {
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
}
#dating-reg [style*="border-radius:99px"] { background: var(--lumi-bg-sunken) !important }
#dating-reg h2 { font-size: 20px; font-weight: 700; color: var(--lumi-text) }

/* ══ Кнопки, оставшиеся от прежнего оформления ═════════════════════════
   Кнопки в приложении собраны тремя разными наборами классов, которые
   писались в разное время: atma-button, btn и ui-btn. Часть экранов я
   уже привёл к общему виду поимённо, но двенадцать кнопок остались с
   прежними скруглением 10 и белой заливкой — среди них главные действия
   «Открыть полный расклад», «Построить разбор», «Включить знакомства».

   Здесь общее правило на все три набора. Именные правила экранов имеют
   больший вес и продолжают действовать поверх, так что уже настроенные
   кнопки не меняются. Высоту трогаем только у кнопок во всю ширину:
   мелкие кнопки-действия должны остаться мелкими. */
.atma-button,
.btn,
.ui-btn {
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 600;
}
.atma-button.full,
.btn.full,
.ui-btn--full {
  min-height: 52px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 16px;
}
.btn.small,
.ui-btn--sm { min-height: 38px; padding: 0 16px !important; font-size: 14px }

/* ── Главное действие: одно правило на всё приложение ──────────────────
   Раньше эта же заливка была расписана шестью правилами: отдельно для
   «Настроек», «Личных данных», «Помощи», фильтров, всплывающих окон.
   Проверено на живых экранах: пять из шести накрываются общим правилом
   полностью, поэтому они убраны. Два имени общим правилом НЕ
   накрываются — .ob-welcome-btn и .pwa-btn-primary, — они собираются
   кодом и своих классов кнопки не имеют. Поэтому перечислены здесь. */
.atma-button.primary,
.btn.primary,
.ui-btn--primary,
.ob-welcome-btn,
.ob-tour-next,
.pwa-btn-primary {
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
  border: 0 !important;
}
.atma-button.primary .lumi-ico,
.btn.primary .lumi-ico,
.ui-btn--primary .lumi-ico { color: var(--lumi-on-accent) }

/* Второстепенное — контур; «Позже» и подобные — просто текст */
.atma-button--secondary,
.btn.outline {
  background: transparent !important;
  border: 1.5px solid var(--lumi-border) !important;
  color: var(--lumi-text) !important;
}
.atma-button--ghost,
.btn.text-btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--lumi-text-2) !important;
}

/* ── Кадрирование фото ─────────────────────────────────────────────────
   Окно на весь экран — скругления ему не нужны, а вот верхняя полоса
   жила своей жизнью: обе кнопки выглядели одинаково, и было непонятно,
   какая из них подтверждает. «Готово» делаем главной. */
.crop-modal { background: var(--lumi-bg) !important }
.crop-header {
  background: var(--lumi-bg);
  border-bottom: 1px solid var(--lumi-border-soft);
  padding: calc(var(--lumi-sat) + 10px) 14px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.crop-title { font-size: 16px; font-weight: 600; color: var(--lumi-text) }
.crop-cancel {
  background: transparent !important; border: 0 !important;
  color: var(--lumi-text-2) !important;
  font-size: 15px; padding: 8px 4px !important;
}
.crop-done {
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
  border: 0 !important; border-radius: 999px;
  font-size: 15px; font-weight: 600;
  min-height: 40px; padding: 0 18px !important;
}
.crop-body { background: var(--lumi-bg) }

/* ── Биоритмы и знаки зодиака ──────────────────────────────────────────
   Значки биоритмов приходили с сервера эмодзи ( ) — их подменяет
   lumi-theme.js. Здесь задаём размер и цвет подставленным иконкам.
   Знакам зодиака дополнительно запрещаем цветное начертание: браузер
   по умолчанию рисует их картинкой. */
.hook-emoji { display: inline-flex; align-items: center; justify-content: center }
.hook-emoji .lumi-ico { width: 18px; height: 18px; color: var(--lumi-accent) }
.ob-welcome-item-icon,
.zodiac-symbol,
.sign-symbol {
  font-variant-emoji: text;
  color: var(--lumi-accent) !important;
  font-size: 22px; line-height: 1;
}

/* Значок перед советом дня — вместо смайла, который слал сервер */
.daily-hook-advice { display: flex; align-items: flex-start; gap: 9px }
.advice-ico { flex: none; margin-top: 1px; color: var(--lumi-accent); display: inline-flex }
.advice-ico .lumi-ico { width: 17px; height: 17px }

/* ══ Синий цвет из прежнего оформления ═════════════════════════════════
   В старых стилях есть переменная --switch-active. По названию она для
   переключателя, но ею покрашено пол-приложения: ярлыки прогноза, знак
   подтверждения, номер дня, отметки прочтения, полоски совместимости.
   Значение у неё — обычный синий #3B82F6, чужой нашей тёплой палитре:
   рядом с розовым золотом он выглядит как случайно попавший элемент.

   Одной заменой переменной обойтись нельзя: где-то ею красят текст, а
   где-то заливают фон. Для текста берём акцент (он читается на карточке
   в обеих темах), для заливки — светлую заливку с тёмным текстом, иначе
   в светлой теме белые буквы легли бы на тёмно-красное. */

/* Текст */
.daily-horo-label,
.daily-num-badge,
.verified-badge,
.chat-limit-pro,
.msg-status.read,
.bio-cycle-val.up,
.pcomp-pct,
.sujai-cell.strong .sujai-cell-level,
.cd-ch-tag.new,
.env-act-pin.is-pinned,
.env-pin-ind { color: var(--lumi-accent) !important }
.verified-badge .lumi-ico,
.verified-badge svg { color: var(--lumi-accent) !important }

/* Заливка — вместе с цветом текста поверх неё */
.ch-send,
.sys-tab.active,
.cl-badge,
.env-item-avatar,
.suggestion-pros,
.sujai-cell.strong {
  background: var(--lumi-accent-fill) !important;
  color: var(--lumi-on-accent) !important;
  border-color: var(--lumi-accent-fill) !important;
}
.ch-send .lumi-ico,
.ch-send svg,
.sys-tab.active .lumi-ico { color: var(--lumi-on-accent) !important }

/* Полоски и ползунки — текста на них нет, хватит акцента */
.pcomp-bar-fill,
.fs-dual-track .fs-track-fill,
.puzzle-slider-thumb.verified,
.sj-leg-strong::before { background: var(--lumi-accent) !important }
.sj-leg-strong::before { border-color: var(--lumi-accent) }

/* Кнопка согласия с cookie — единственная, где синим был залит фон */
.pd-cookie-btn {
  background: var(--lumi-accent-fill);
  color: var(--lumi-on-accent);
  border: 0; border-radius: 999px;
  min-height: 42px; padding: 0 20px; font-weight: 600;
}

/* ── Кнопка «огонь» на знакомствах ─────────────────────────────────────
   Единственный разноцветный значок во всём приложении: пламя залито
   тремя цветами (#FF2A00, #FF8C00, #FFD700). Рядом с ним все остальные
   значки одноцветные, и он выбивается как чужой. Красим в наш акцент —
   действие остаётся заметным, но перестаёт спорить с палитрой. */
#screen-dating .d-btn.fire svg path,
#screen-dating .d-btn.fire svg [fill] { fill: var(--lumi-accent) !important }
#screen-dating .d-btn.fire svg { color: var(--lumi-accent) !important }

/* ══ «Симпатии»: вкладки на виду ═══════════════════════════════════════
   Пролистав список вниз, перейти в другую вкладку было нельзя: полоса
   уезжала за верх экрана. Заголовку уже был прописан position: sticky,
   но он не работал ни секунды, и вот почему.

   Прилипание считается относительно ближайшего ПРОКРУЧИВАЕМОГО предка.
   У .scroll-content и у самого экрана стоит overflow-y: auto — значит
   формально они прокручиваемые, и прилипание привязывается к ним. А на
   деле они не прокручиваются: их высота равна содержимому. Настоящая
   прокрутка живёт выше, в #app-main. Вот заголовок и уезжал вместе со
   списком.

   Убираем у них роль прокручиваемого блока — тогда прилипание доходит
   до #app-main и начинает работать. Защиту от выезда вбок оставляем,
   но переводим с hidden на clip: hidden по правилам языка превращает
   вторую ось в auto (из-за чего всё и вышло), а clip — нет.
   Старые телефоны clip не знают: там правило просто не применится и
   вкладки будут вести себя как раньше — ничего не сломается. */
#screen-matches,
#screen-matches > .scroll-content {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Расстояние от «Симпатий» до вкладок было 40 px: 24 задаёт сам столбец,
   и ещё 16 — собственный отступ заголовка, оставшийся с тех пор, когда
   столбец не считал промежутки сам. Убираем двойной счёт. */
#screen-matches > .scroll-content { gap: 12px !important }
#screen-matches .screen-title {
  position: static !important;
  margin-bottom: 0 !important;
}

/* Подложка под вкладками: держится вверху и закрывает собой карточки,
   которые проходят под ней. Саму «пилюлю» с вкладками не трогаем. */
#screen-matches .lumi-tabs-stick {
  position: sticky; top: 0; z-index: 30;
  background: var(--lumi-bg);
  padding: 8px 0 10px;
}
#screen-matches .lumi-tabs-stick .m-tabs { margin-bottom: 0 !important }

/* Значок города в карточках «Симпатий» — вместо смайла-булавки */
#screen-matches .city-ico {
  display: inline-flex; vertical-align: -1px;
  margin-right: 4px; color: var(--lumi-accent);
}

/* проверка скрипта выкладки — комментарий, на вид не влияет */

/* Кнопка «Больше не предлагать» в окне установки на телефон.
   Третья, самая тихая: главное действие — заливка, «Позже» — контур,
   эта — просто текст. Раньше отказаться навсегда было нельзя вовсе,
   и окно возвращалось до трёх раз в день каждый день. */
.pwa-btn-never {
  min-height: 44px; padding: 0 16px !important;
  border: 0 !important; background: transparent !important;
  color: var(--lumi-text-3) !important;
  font-size: 14px; font-weight: 500;
  border-radius: 999px !important;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
}
.pwa-btn-never:active { background: var(--lumi-bg-sunken) !important }

/* Форма вокруг полей входа — только смысловая обёртка для браузера,
   своих отступов у неё быть не должно. */
.auth-form { margin: 0; }

/* ── Кружок качества аспекта ───────────────────────────────────────────
   Раньше это был цветной смайл (зелёный, красный, жёлтый кружок).
   Смайл приносит собственные цвета: в тёмной теме он светился, в светлой
   спорил с палитрой, а на некоторых устройствах вовсе не отрисовывался.
   Рисуем кружок стилями, цвет берём по свойству data-nature у родителя —
   тогда он живёт в палитре и меняется вместе с темой. */
.astro-accordion .acc-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--lumi-text-3);
  flex: 0 0 auto;
}
.astro-accordion[data-nature="harmonious"] .acc-dot { background: #4E9A6B; }
.astro-accordion[data-nature="challenging"] .acc-dot { background: var(--lumi-danger); }
.astro-accordion[data-nature="neutral"]     .acc-dot { background: #B8892F; }

/* ── Закрытая карточка (лайки и совпадения сверх бесплатной доли) ────
   Сервер закрытые анкеты отдаёт пустыми: ни имени, ни фото, ни номера.
   Размывать нечего — рисуем свою подложку с замком и подписью. */
.m-card--locked { cursor: pointer; position: relative; }
.m-card--locked .m-card-photo--locked {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    var(--lumi-bg-sunken, #efe7e5) 0%,
    var(--lumi-border-soft, #e2d6d3) 60%,
    var(--lumi-bg-elev, #f7f2f1) 100%);
  color: var(--lumi-text-3, #7a6460);
}
.m-card--locked .m-card-name {
  color: var(--lumi-text-3, #7a6460); font-weight: 600;
}
.m-card--locked .m-card-pro {
  margin-top: 3px; font-size: 12px; font-weight: 700;
  color: var(--lumi-accent, #b84a45);
}
.m-card--locked:hover { border-color: var(--lumi-accent, #b84a45) !important; }

/* ── Экран тарифов ───────────────────────────────────────────────────
   Три уровня: бесплатно, PRO, супер-PRO. Зачёркнутая цена — правило
   владельца: его цена плюс 50%. Числа приходят с сервера, здесь
   только вид. */
.tf-overlay {
  position: fixed; inset: 0; z-index: 10000; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(20, 14, 34, .55); overflow-y: auto;
}
.tf-box {
  position: relative; width: 100%; max-width: 980px;
  background: var(--lumi-bg-elev, #fff); color: var(--lumi-text, #2a1d1b);
  border-radius: 24px; padding: 26px 22px 24px;
  box-shadow: 0 20px 60px rgba(20, 14, 34, .3);
  max-height: 92vh; overflow-y: auto;
}
.tf-x {
  position: absolute; top: 12px; right: 16px; border: 0; background: none;
  font-size: 26px; line-height: 1; cursor: pointer; color: inherit; opacity: .6;
}
.tf-title { font-size: 22px; font-weight: 700; }
.tf-sub { margin-top: 6px; font-size: 14px; color: var(--lumi-text-2, #5c4a47); }
.tf-cards {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tf-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--lumi-border-soft, #e2d6d3); border-radius: 20px;
  padding: 18px 16px; background: var(--lumi-bg, #fff);
}
.tf-card--pro { border-color: var(--lumi-accent, #b84a45); }
.tf-card.is-current { background: var(--lumi-bg-sunken, #f7f2f1); }
.tf-name { font-size: 17px; font-weight: 700; }
.tf-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tf-old {
  text-decoration: line-through; opacity: .55; font-size: 15px; font-weight: 400;
}
.tf-now { font-size: 26px; font-weight: 700; color: var(--lumi-accent, #b84a45); }
.tf-per { font-size: 13px; color: var(--lumi-text-3, #7a6460); }
.tf-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.tf-list li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.45; color: var(--lumi-text-2, #5c4a47);
}
.tf-list li .lumi-ico { flex: 0 0 auto; margin-top: 2px; color: var(--lumi-accent, #b84a45); }
.tf-buy {
  margin-top: auto; min-height: 44px; border: 0; border-radius: 999px;
  background: var(--lumi-accent, #b84a45); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.tf-buy:hover { background: var(--lumi-accent-strong, #98342f); }
.tf-buy[disabled] { opacity: .6; cursor: default; }
.tf-cur {
  margin-top: auto; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--lumi-text-3, #7a6460); padding: 12px 0;
}

/* Причина, по которой открылось окно тарифов: слова сервера о том,
   чего человеку не хватило. Спокойная подложка, не тревожная: это
   не ошибка, а предложение. */
.tf-why {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--lumi-accent-fill, rgba(180, 60, 50, .08));
  color: var(--lumi-text, inherit);
  font-size: 14px;
  line-height: 1.45;
}