:root {
    /* Единая палитра "восход/астрология": ночь-индиго + золото рассвета */
    --color-bg-mid: #16132a;
    --color-bg-deep: #241a34;
    --color-primary-rgb: 240, 184, 74;   /* золото восходящей звезды */
    --color-primary2-rgb: 224, 138, 74;  /* тёплый янтарь */
    --color-accent-rgb: 214, 192, 150;   /* мягкое золото */
    --color-text: #efeafb;

    --color-primary: rgb(var(--color-primary-rgb));
    --color-primary-2: rgb(var(--color-primary2-rgb));
    --color-accent: rgb(var(--color-accent-rgb));

    /* Стекло Apple (Liquid Glass) */
    --glass-bg: rgba(255, 255, 255, 0.09);
    --glass-bg-hover: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.28);
    --glass-highlight: rgba(255, 255, 255, 0.5);

    /* Шрифт Apple: реальный San Francisco на Apple-устройствах, Inter — как фолбэк */
    --font-apple: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
                  'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-heading: var(--font-apple);
    --font-body: var(--font-apple);

    /* Motion */
    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-body);
}

/* Базовый тёмный фон самого нижнего слоя — чтобы при прокрутке/overscroll
   нигде не просвечивал белый (фоновые слои страниц рисуются поверх). Тема-зависимый. */
html {
    background-color: var(--color-bg-deep);
}

body {
    /* базовый вес SF/Inter — обычный, шрифт и так чёткий */
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .logo h1 {
    font-family: var(--font-heading);
    font-weight: 600;              /* SF Semibold — фирменный вес заголовков Apple */
    letter-spacing: -0.02em;       /* лёгкий отрицательный трекинг крупного текста */
}

body {
    background: linear-gradient(135deg, var(--color-bg-mid) 0%, var(--color-bg-deep) 100%);
    color: var(--color-text);
    min-height: 100vh;
    /* учёт «чёлки»/Dynamic Island и скруглений в полноэкранном Telegram (iPhone) */
    padding: max(10px, env(safe-area-inset-top))
             max(10px, env(safe-area-inset-right))
             max(10px, env(safe-area-inset-bottom))
             max(10px, env(safe-area-inset-left));
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* В разделах (full-bleed) центральная колонка шире — меньше пустого места по бокам,
   крупнее схемы (матрица судьбы и т.п.). Экран входа и меню остаются узкими/комфортными. */
body[data-section] .container {
    max-width: 1120px;
}

.page {
    background: rgba(28, 24, 46, 0.55);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 26px;
    padding: 30px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 20px 50px rgba(0, 0, 0, 0.35);
    margin-top: 20px;
}

/* Косметическая анимация входа страницы (js/animations.js навешивает .page-anim-in).
   База .page — opacity:1, поэтому страница НИКОГДА не остаётся невидимой,
   даже если анимация не проиграется (свёрнутая вкладка и т.п.). */
.page-anim-in,
.page-fallback-in {
    animation: fadeIn 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hidden {
    display: none !important;
}

/* Логотип */
.logo {
    text-align: center;
    margin-bottom: 30px;
}

    /* Иконка-шрифт (используется на прочих страницах) */
    .logo i {
        font-size: 48px;
        color: var(--color-primary);
        margin-bottom: 10px;
    }

    /* Логотип бренда (изображение) на экране входа — круглый бейдж */
    .logo__mark {
        display: block;
        margin: 0 auto 14px;
        width: 140px;
        height: 140px;
        object-fit: cover;
        border-radius: 50%;
        border: 1px solid rgba(var(--color-primary-rgb), 0.35);
        box-shadow: 0 6px 26px rgba(var(--color-primary-rgb), 0.4);
        filter: drop-shadow(0 4px 18px rgba(var(--color-primary-rgb), 0.35));
    }

    .logo h1 {
        font-size: 34px;
        font-weight: 700;
        letter-spacing: -0.02em;
        color: #fbf3df;
        margin-bottom: 5px;
        text-shadow:
            0 1px 0 rgba(0, 0, 0, 0.35),
            0 0 26px rgba(var(--color-primary-rgb), 0.45);
    }

    .logo p {
        color: #b7b0cc;
        font-size: 14px;
    }

/* Формы */
.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #b0b0d0;
    font-weight: 500;
}

input, select {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    color: white;
    font-size: 16px;
    transition: border-color .25s var(--ease-standard),
                box-shadow .25s var(--ease-standard),
                background-color .25s var(--ease-standard);
}

    input:focus, select:focus {
        outline: none;
        background: rgba(255, 255, 255, 0.10);
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
    }

/* Сегментированный переключатель «Вход / Регистрация» — стекло Liquid Glass */
.auth-tabs {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    padding: 6px;
    border-radius: 18px;
    margin-bottom: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.auth-tab {
    flex: 1;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #c3bcd6;
    border: 1px solid transparent;
    padding: 12px 16px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 0;
    width: auto;
    transition: background-color .25s var(--ease-standard),
                color .25s var(--ease-standard),
                border-color .25s var(--ease-standard);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: none;
}

.auth-tab::before { display: none; } /* без общего блика: таб прозрачен */

.auth-tab:hover {
    color: #efeafb;
    background: rgba(255, 255, 255, 0.06);
    transform: none;
}

.auth-tab.active {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 6px 16px rgba(0, 0, 0, 0.28);
}

/* Подсказка под полем (для проверки логина) */
.field-hint {
    display: block;
    font-size: 12px;
    color: #8888a8;
    margin-top: 6px;
    line-height: 1.3;
    min-height: 16px;
}

.field-hint.ok { color: #5cffb1; }
.field-hint.bad { color: #ff7878; }

/* Ссылки авторизации: «Забыли пароль?» / «Вернуться ко входу» */
.auth-alt {
    text-align: center;
    margin: 14px 0 0;
}

.auth-link {
    color: #c9b8ff;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: color .2s var(--ease-standard);
}

.auth-link:hover { color: #efeafb; text-decoration: underline; }

/* Пояснение над формой восстановления пароля */
.auth-hint-text {
    font-size: 14px;
    line-height: 1.5;
    color: #b8b3cf;
    margin: 0 0 18px;
    text-align: center;
}

/* Баннер «Подтвердите email» на странице меню */
.verify-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(203, 183, 255, 0.10);
    border: 1px solid rgba(203, 183, 255, 0.30);
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0;
    /* Под донатом, в тех же колонках сетки (2–4). grid-row:-1 кладёт баннер в
       неявную строку под сеткой — она создаётся ТОЛЬКО когда баннер виден,
       поэтому у пользователей с подтверждённым email пустого места нет. */
    grid-column: 2 / -1;
    grid-row: -1;
}
/* Скрытие через атрибут hidden важнее раскладки сетки */
.verify-banner[hidden] { display: none; }

.verify-banner__icon {
    font-size: 20px;
    color: #cbb7ff;
    flex: 0 0 auto;
}

.verify-banner__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.verify-banner__text b { font-size: 14px; color: #efeafb; }
.verify-banner__text span { font-size: 12.5px; line-height: 1.4; color: #b0aac8; }

.verify-banner__btn {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #211334;
    background: #cbb7ff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: none;
    transition: opacity .2s var(--ease-standard);
}

.verify-banner__btn:hover { opacity: .9; transform: none; }
.verify-banner__btn:disabled { opacity: .55; cursor: default; }

@media (max-width: 460px) {
    .verify-banner { flex-wrap: wrap; }
    .verify-banner__btn { width: 100%; }
}

/* Инлайн-ошибки полей */
.field-error {
    display: none;
    color: #ff7878;
    font-size: 13px;
    margin-top: 6px;
    line-height: 1.3;
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error .switch-track {
    border-color: #ff7878;
    box-shadow: 0 0 0 2px rgba(255, 120, 120, 0.15);
}

.form-group.has-error .field-error {
    display: block;
}

/* Чекбокс согласия */
.form-group-checkbox {
    margin-top: 6px;
    margin-bottom: 20px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: #b0b0d0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 0;
}

/* iOS-переключатель: input скрыт, трек+кноб — на <span> (псевдоэлементы на input
   не рендерятся, т.к. это заменяемый элемент). #consent остаётся checkbox — форма читает .checked */
.switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.switch-track {
    flex: 0 0 48px;
    width: 48px;
    height: 29px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    position: relative;
    cursor: pointer;
    transition: background-color .28s var(--ease-standard), border-color .28s var(--ease-standard);
}

.switch-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    transition: left .28s var(--ease-standard);
}

.switch-input:checked + .switch-track {
    background: rgba(var(--color-primary-rgb), 0.92);
    border-color: rgba(var(--color-primary-rgb), 0.92);
}

.switch-input:checked + .switch-track::after {
    left: 21px;
}

.switch-input:focus-visible + .switch-track {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.switch-text { flex: 1 1 auto; }

/* Ссылки на правовые документы внутри текста согласия. Клик по ним не переключает
   чекбокс — всплытие гасится в Registration.bindConsentLinks(). */
.checkbox-label a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.checkbox-label a:hover { filter: brightness(1.15); }

/* Согласия идут группой: сверху обязательные, снизу добровольное (реклама).
   Чуть плотнее по вертикали, чтобы три пункта не растягивали форму. */
.form-group-checkbox { margin-bottom: 14px; }
.form-group-checkbox:last-of-type { margin-bottom: 20px; }
.form-group-checkbox .checkbox-label { align-items: flex-start; }
.form-group-checkbox .switch-track { margin-top: 1px; }
.form-group-checkbox .field-hint { min-height: 0; margin-left: 60px; }

/* ===== Кнопки в стиле Apple Liquid Glass: стекло, полупрозрачность, чёткий контур ===== */
button {
    position: relative;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    color: #fff;
    border: 1px solid var(--glass-border);
    padding: 15px 22px;
    border-radius: 16px;
    font-family: var(--font-body);
    font-size: 17px;                 /* Apple: 17px — базовый размер кнопки/текста в iOS */
    font-weight: 600;                /* SF Semibold */
    letter-spacing: -0.01em;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    overflow: hidden;
    transition: background-color .25s var(--ease-standard),
                box-shadow .25s var(--ease-standard),
                border-color .25s var(--ease-standard);
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        inset 0 -1px 1px rgba(0, 0, 0, 0.22),
        0 10px 30px rgba(0, 0, 0, 0.35);
}

/* верхний зеркальный блик (specular) — фирменный признак Liquid Glass */
button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 46%);
    pointer-events: none;
}

button:hover {
    background: var(--glass-bg-hover);
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow:
        inset 0 1px 0 var(--glass-highlight),
        inset 0 -1px 1px rgba(0, 0, 0, 0.22),
        0 16px 40px rgba(0, 0, 0, 0.45);
}

button:active {
    transform: translateY(1px) scale(0.995);
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
}

/* Главные действия (Войти / Создать аккаунт) — золотистое тонированное стекло */
button[type="submit"] {
    background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.34), rgba(var(--color-primary2-rgb), 0.24));
    border-color: rgba(var(--color-primary-rgb), 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 12px 34px rgba(var(--color-primary-rgb), 0.3);
}

button[type="submit"]:hover {
    background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.46), rgba(var(--color-primary2-rgb), 0.34));
    border-color: rgba(var(--color-primary-rgb), 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 18px 44px rgba(var(--color-primary-rgb), 0.42);
}

/* Шапка меню */
.menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 30px;
}

.menu-title {
    text-align: center;
    margin-bottom: 30px;
    font-size: 22px;
    color: #e5e5f5;
}

/* Информация о пользователе */
.user-info {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 15px;
    border-radius: 18px;
    flex: 1;
    min-width: 0;
}

/* Кнопка выхода — красное стекло (деструктивное действие, стиль Apple) */
.logout-button {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: rgba(255, 92, 102, 0.14);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    color: #ff8a90;
    border: 1px solid rgba(255, 100, 110, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.logout-button:hover {
    background: rgba(255, 92, 102, 0.26);
    border-color: rgba(255, 110, 120, 0.62);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 10px 26px rgba(255, 70, 80, 0.28);
}

.user-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 24px;
}

.user-details h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.user-details p {
    color: #a0a0c0;
    font-size: 14px;
}

/* Категории */
.categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

@media (max-width: 980px) {
    .categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .categories {
        grid-template-columns: 1fr;
    }
}

.category-card {
    background: rgba(255, 255, 255, 0.055);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-radius: 22px;
    padding: 25px;
    text-align: center;
    transition: background-color .3s var(--ease-standard),
                border-color .3s var(--ease-standard),
                box-shadow .3s var(--ease-standard),
                transform .3s var(--ease-standard);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.category-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

    .category-card:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.095);
        border-color: rgba(var(--color-primary-rgb), 0.32);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.10),
            0 14px 32px rgba(0, 0, 0, 0.28);
    }

.category-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    background: rgba(var(--color-primary-rgb), 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--color-primary);
}

.category-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.category-card p {
    color: #a0a0c0;
    font-size: 14px;
    line-height: 1.5;
}

/* ===== Главное меню — крупная раскладка почти во весь экран =====
   Панель меню перестаёт быть маленькой карточкой по центру: она становится
   full-bleed (как разделы), тянется по ширине и высоте, а фон (тёмный градиент /
   светло-фиолетовый img4) виден сквозь прозрачную страницу. */
/* Меню занимает почти всю ширину монитора: контейнер без узкого кэпа и без
   боковых полей — content тянется к краям, ограничиваясь лишь полями страницы. */
body[data-page="menuPage"] .container { max-width: 1600px; padding-left: 0; padding-right: 0; }
#menuPage.page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 40px);
    padding: 22px clamp(14px, 3vw, 40px) 30px;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    margin-top: 0;
}
#menuPage .intro-hero { margin-bottom: 28px; }
/* тексты баннера держим читаемой ширины, даже когда баннер во всю ширину */
#menuPage .intro-lead,
#menuPage .intro-note { max-width: 900px; }
#menuPage .menu-title { font-size: 27px; margin-bottom: 28px; }
/* блок категорий растягивается и центрируется в оставшемся пространстве */
#menuPage .categories { flex: 1 1 auto; align-content: center; gap: 26px; }
#menuPage .category-card { padding: 46px 34px; border-radius: 28px; }
#menuPage .category-icon { width: 96px; height: 96px; font-size: 42px; margin-bottom: 24px; }
#menuPage .category-card h3 { font-size: 25px; margin-bottom: 12px; }
#menuPage .category-card p { font-size: 15.5px; max-width: 340px; margin: 0 auto; }
#menuPage .footer { margin-top: 24px; }
@media (max-width: 640px) {
    #menuPage.page { min-height: calc(100vh - 20px); padding: 16px 10px 20px; }
    #menuPage .category-card { padding: 28px 22px; }
    #menuPage .category-icon { width: 76px; height: 76px; font-size: 34px; }
}

/* Кнопка "Назад" */
.back-button {
    background: rgba(255, 255, 255, 0.06);
    color: #cfcae0;
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 12px 20px;
    border-radius: 15px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-bottom: 30px;
}

    .back-button i {
        margin-right: 8px;
    }

/* Навигация на странице сводного портрета: «Назад к меню» + «Вернуться к разделу» */
.portrait-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 30px;
}
.portrait-nav .back-button { margin-bottom: 0; }
.portrait-return-btn {
    background: rgba(124, 92, 255, 0.16);
    border-color: rgba(124, 92, 255, 0.42);
    color: #d9ceff;
}
.portrait-return-btn:hover { background: rgba(124, 92, 255, 0.26); }

/* Заглушка для контента */
.placeholder-content {
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    margin-top: 30px;
    border: 2px dashed rgba(255, 255, 255, 0.1);
}

.placeholder-icon {
    font-size: 64px;
    color: rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.placeholder-content h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.7);
}

.placeholder-content p {
    color: rgba(255, 255, 255, 0.5);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Дополнительные кнопки в меню */
.menu-extra {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.secondary-button,
.ghost-button {
    background: rgba(255, 255, 255, 0.05);
    color: #cfcfe5;
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    padding: 12px 22px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: auto;
    margin-top: 0;
    transition: background-color 0.25s, border-color 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.secondary-button:hover,
.ghost-button:hover {
    background: rgba(var(--color-primary-rgb), 0.12);
    border-color: rgba(var(--color-primary-rgb), 0.45);
    transform: translateY(-2px);
    box-shadow: none;
}

.ghost-button {
    border-color: rgba(255, 255, 255, 0.1);
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
}

/* ===== Сгруппированный inset-список действий меню (стиль iOS-настроек) ===== */
.menu-list {
    margin-top: 30px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.055);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.menu-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 15px 18px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0;
    box-shadow: none;
    color: #ece8f6;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color .2s var(--ease-standard);
}

.menu-row:first-child { border-top: none; }
.menu-row::before { display: none; }         /* без общего блика — это строка списка */

.menu-row:hover,
.menu-row:active {
    background: rgba(255, 255, 255, 0.07);
    transform: none;
}

.menu-row__icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(var(--color-primary-rgb), 0.16);
    color: var(--color-primary);
    font-size: 15px;
}

.menu-row__label { flex: 1 1 auto; }

.menu-row__chevron {
    color: rgba(255, 255, 255, 0.34);
    font-size: 14px;
}

/* Личный кабинет — результаты */
.results-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.results-toolbar select {
    width: auto;
    min-width: 200px;
    padding: 10px 14px;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.result-card {
    background: rgba(255, 255, 255, 0.045);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 16px 18px;
    transition: background-color 0.25s var(--ease-standard);
}

.result-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

.result-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
    flex-wrap: wrap;
}

.result-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #ffd84d;
    background: rgba(255, 216, 77, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
}

.result-category.psychology { color: #5ca9ff; background: rgba(92,169,255,0.1); }
.result-category.numerology { color: #7c5cff; background: rgba(124,92,255,0.1); }
.result-category.astrology  { color: #ff5c8d; background: rgba(255,92,141,0.1); }

.result-card-head__right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.result-date {
    font-size: 12px;
    color: #8888a8;
}

.result-delete-btn {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 11px;
    border: 1px solid rgba(255, 92, 141, 0.4);
    background: rgba(255, 92, 141, 0.14);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    color: #ff7ba6;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    margin: 0;
}

.result-delete-btn:hover {
    background: rgba(255, 92, 141, 0.85);
    border-color: rgba(255, 92, 141, 0.9);
    color: #fff;
}

.result-card--deleting {
    opacity: 0.5;
    pointer-events: none;
}

.result-type {
    font-size: 15px;
    font-weight: 600;
    color: #e5e5f5;
    margin-bottom: 4px;
}

.result-summary {
    font-size: 13px;
    color: #a0a0c0;
    line-height: 1.5;
}

.results-empty {
    text-align: center;
    padding: 40px 20px;
    color: #8888a8;
}

.results-empty i {
    font-size: 48px;
    opacity: 0.4;
    margin-bottom: 12px;
}
.results-empty--sm { padding: 24px 18px; }
.results-empty--sm i { font-size: 30px; margin-bottom: 8px; }
.results-empty h4 { color: #cfcbe6; font-size: 16px; margin: 6px 0 6px; }
.results-empty p { font-size: 13.5px; line-height: 1.5; max-width: 460px; margin: 0 auto; }

/* ===== «Мои результаты»: плитки разделов ===== */
.results-home { display: flex; flex-direction: column; gap: 14px; }
.results-tile {
    width: 100%; display: flex; align-items: center; gap: 15px; text-align: left; cursor: pointer;
    padding: 18px 18px; border-radius: 18px; color: #eae7f6;
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08);
    transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.results-tile:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); transform: translateY(-1px); }
.results-tile__ic {
    flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
    font-size: 22px; color: #fff;
}
.results-tile__ic--psychology { background: linear-gradient(135deg, #7b5cff, #a879ff); }
.results-tile__ic--numerology { background: linear-gradient(135deg, #ff9d5c, #f0b84a); color:#241a05; }
.results-tile__ic--astrology  { background: linear-gradient(135deg, #4f8dff, #6bd0ff); }
.results-tile__body { flex: 1 1 auto; min-width: 0; }
.results-tile__label { display: block; font-size: 17px; font-weight: 800; }
.results-tile__desc { display: block; font-size: 12.5px; color: #a9a4c6; margin-top: 3px; line-height: 1.45; }
.results-tile__count {
    flex: none; min-width: 30px; height: 26px; padding: 0 10px; border-radius: 13px; display: inline-grid;
    place-items: center; font-size: 13px; font-weight: 800; color: #eae7f6; background: rgba(255,255,255,0.09);
}
.results-tile__chev { color: #6f6a90; font-size: 14px; flex: none; }

/* ===== Просмотр раздела ===== */
.results-back-sections { margin-bottom: 14px; }
.results-section__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.results-section__head .results-tile__ic { width: 46px; height: 46px; font-size: 19px; border-radius: 13px; }
.results-section__title { font-size: 20px; font-weight: 800; color: #efecf9; margin: 0; }
.results-section__sub { font-size: 12.5px; color: #a9a4c6; margin: 3px 0 0; line-height: 1.45; }
.results-subhead {
    font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: #8f8ab0; margin: 18px 0 10px;
}

/* Плашка лимита */
.results-limit {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between;
    padding: 12px 14px; margin-bottom: 14px; border-radius: 13px;
    background: linear-gradient(135deg, rgba(240,184,74,.10), rgba(120,90,220,.10));
    border: 1px solid rgba(240,184,74,.28);
}
.results-limit__txt { font-size: 12.5px; line-height: 1.5; color: #e6e1f4; flex: 1 1 220px; }
.results-limit__txt b { color: #ffd77a; }
.results-limit__txt i { color: #f0b84a; margin-right: 5px; }
.results-limit__btn {
    white-space: nowrap; padding: 9px 15px; border: none; border-radius: 10px; cursor: pointer;
    font-size: 13px; font-weight: 800; color: #241a05; background: linear-gradient(135deg, #ffd77a, #f0b84a);
}
.results-limit__btn:hover { filter: brightness(1.05); }

/* Карточки людей (нумерология/астрология) */
.results-people { display: flex; flex-direction: column; gap: 11px; }
.results-person {
    border-radius: 14px; padding: 14px 15px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.results-person__head { display: flex; align-items: flex-start; gap: 12px; }
.results-person__ava {
    flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; font-size: 18px; color: #fff;
}
.results-person__ava--numerology { background: linear-gradient(135deg, #ff9d5c, #f0b84a); color:#241a05; }
.results-person__ava--astrology  { background: linear-gradient(135deg, #4f8dff, #6bd0ff); }
.results-person__id { flex: 1 1 auto; min-width: 0; }
.results-person__name { font-size: 15.5px; font-weight: 800; color: #ece9f8; }
.results-person__meta { font-size: 12px; color: #b0abcc; margin-top: 2px; }
.results-person__meta i { color: #f0b84a; margin-right: 3px; }
.results-person__summary { font-size: 12.5px; color: #cdc8e4; margin-top: 5px; line-height: 1.45; }
.results-person__place { font-size: 12px; color: #a9a4c6; margin-top: 3px; }
.results-person__place i { color: #6bd0ff; margin-right: 3px; }
.results-person__del {
    flex: none; width: 34px; height: 34px; border-radius: 9px; cursor: pointer; font-size: 14px;
    border: 1px solid rgba(255,120,120,.25); background: rgba(255,90,90,.08); color: #ff8b8b;
    display: grid; place-items: center; line-height: 1; padding: 0;
}
.results-person__del:hover { background: rgba(255,90,90,.16); }
.results-hist { list-style: none; margin: 11px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.07); }
.results-hist li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; color: #d3cfe6; }
.results-hist__dt { color: #8f8ab0; white-space: nowrap; }

/* Группы психологии (коллективы/адресаты) */
.results-group {
    border-radius: 14px; padding: 11px 12px; margin-bottom: 11px;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07);
}
.results-group__head { display: flex; align-items: center; gap: 9px; padding: 2px 3px 10px; }
.results-group__head i { color: #a879ff; font-size: 14px; }
.results-group__title { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 14.5px; color: #efecf9;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results-group__count { flex: none; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px;
    display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #7b5cff, #a879ff); }
.results-group__body { display: flex; flex-direction: column; gap: 8px; }
.results-resp { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px;
    background: rgba(255,255,255,0.03); }
.results-resp__ava { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    font-weight: 800; color: #241a05; background: linear-gradient(135deg, #e6c877, #d0ad55); }
.results-resp__id { min-width: 0; }
.results-resp__name { font-size: 14px; font-weight: 700; color: #ece9f8; }
.results-resp__meta { font-size: 11.5px; color: #a9a4c6; margin-top: 2px; }

/* Свои тесты */
.results-test { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
    padding: 13px 14px; margin-bottom: 9px; border-radius: 13px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.results-test__type { font-size: 14.5px; font-weight: 800; color: #ece9f8; }
.results-test__summary { font-size: 12.5px; color: #b0abcc; margin-top: 3px; line-height: 1.45; }
.results-test__side { display: flex; align-items: center; gap: 10px; flex: none; }
.results-test__date { font-size: 11.5px; color: #8f8ab0; white-space: nowrap; }

/* Сводный портрет */
.portrait-content { display: flex; flex-direction: column; gap: 20px; }

.portrait-section {
    background: rgba(255, 255, 255, 0.045);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 18px 22px;
}

.portrait-section h3 {
    font-size: 17px;
    margin-bottom: 12px;
    color: #e5e5f5;
    display: flex;
    align-items: center;
    gap: 10px;
}

.portrait-section h3 i {
    color: var(--color-primary);
}

.portrait-section p,
.portrait-section li {
    color: #cfcfe5;
    font-size: 14px;
    line-height: 1.6;
}

.portrait-section ul {
    padding-left: 20px;
    margin-top: 6px;
}

.portrait-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.portrait-pill {
    background: rgba(var(--color-primary-rgb), 0.15);
    color: #cfcfe5;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.portrait-empty {
    text-align: center;
    padding: 30px;
    color: #8888a8;
}

/* Категория-заголовок */
/* Заголовок раздела: название по центру страницы, ниже — рамка с описанием.
   На страницах результатов/подписки (тоже .category-header) остаётся аккуратным. */
.category-header {
    margin: 6px 0 22px;
    text-align: center;
}
.category-header h2 {
    font-size: 34px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.category-header h2 i { color: var(--color-primary); }
.category-header p {
    color: #a0a0c0;
    font-size: 15px;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto;
}
@media (max-width: 560px) { .category-header h2 { font-size: 26px; } }

/* Футер */
.footer {
    text-align: center;
    margin-top: 40px;
    color: #666;
    font-size: 14px;
}

/* ===== Фолбэк стекла: если backdrop-filter не поддерживается (старые вебвью
   или «Уменьшение прозрачности»), делаем поверхности плотнее — читаемость важнее ===== */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .page              { background: rgba(26, 22, 44, 0.94); }
    .category-card,
    .user-info,
    .menu-list,
    .result-card,
    .portrait-section  { background: rgba(255, 255, 255, 0.10); }
    button             { background: rgba(58, 52, 82, 0.92); }
    button[type="submit"] { background: rgb(var(--color-primary-rgb)); color: #211803; }
    .auth-tabs         { background: rgba(40, 34, 60, 0.9); }
}

/* Адаптивность */
@media (max-width: 600px) {
    .container {
        padding: 8px;
    }

    /* Внешняя рамка страницы. Внутри ещё psy-wrap/psy-card со своими отступами,
       поэтому на телефоне держим её тонкой — иначе полезная ширина падает до 70%. */
    .page {
        padding: 16px;
    }

    .categories {
        grid-template-columns: 1fr;
    }

    .logo h1 {
        font-size: 24px;
    }
}

/* ===== Приветственный блок (intro hero) ===== */
.intro-hero{position:relative;overflow:hidden;border-radius:26px;padding:26px 26px 20px;margin-bottom:22px;
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 44px rgba(0,0,0,.38);}
/* Стекло-фон вынесен в ::before: Safari не обрезает backdrop-filter по border-radius и даёт
   «протекающие» острые углы. Клипуем сам слой стекла по скруглению (clip-path), а внешнюю
   тень оставляем на .intro-hero, чтобы clip-path её не срезал. */
.intro-hero::before{content:'';position:absolute;inset:0;z-index:0;border-radius:26px;pointer-events:none;
  background:linear-gradient(135deg,rgba(var(--color-primary-rgb),.22),rgba(var(--color-accent-rgb),.10) 55%,rgba(var(--color-primary2-rgb),.16));
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  -webkit-clip-path:inset(0 round 26px);clip-path:inset(0 round 26px);}
.intro-hero__glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;}
.intro-hero__glow--1{width:260px;height:260px;background:var(--color-primary);opacity:.45;top:-90px;right:-40px;}
.intro-hero__glow--2{width:220px;height:220px;background:var(--color-primary-2);opacity:.30;bottom:-110px;left:-30px;}
.intro-hero > *:not(.intro-hero__glow){position:relative;z-index:1;}
.intro-hero__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.intro-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.3px;color:var(--color-accent);text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;}
.intro-toggle{background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);color:#e7e2ff;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;width:auto;margin:0;transition:background .15s ease;}
.intro-toggle:hover{background:rgba(255,255,255,.16);}
.intro-title{font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-0.02em;margin:4px 0 10px;
  background:linear-gradient(90deg,#fff,#d9ccff 60%,#ffc4dd);-webkit-background-clip:text;background-clip:text;color:transparent;}
.intro-quote{font-style:italic;font-size:15.5px;color:#e9e4ff;opacity:.92;margin:0;padding-left:14px;border-left:3px solid rgba(255,92,141,.6);transition:opacity .4s ease;}
.intro-body{margin-top:16px;}
.intro-lead{font-size:15px;line-height:1.6;color:#efeaff;margin:0 0 16px;}
.intro-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;margin-bottom:16px;}
.intro-benefit{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:13px 14px;}
.intro-benefit > i{font-size:18px;color:#a89bff;margin-top:2px;flex:0 0 auto;width:22px;text-align:center;}
.intro-benefit b{display:block;font-size:14.5px;margin-bottom:3px;color:#fff;}
.intro-benefit span{font-size:12.8px;line-height:1.45;color:#cfc9e6;}
.intro-how{background:rgba(0,0,0,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(var(--color-primary-rgb),.25);border-radius:16px;padding:14px 16px;margin-bottom:14px;}
.intro-how__title{font-weight:700;font-size:15px;margin-bottom:8px;color:#e7e2ff;display:flex;align-items:center;gap:8px;}
.intro-how__title i{color:#ffd28a;}
.intro-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:13.8px;line-height:1.5;color:#eceaf6;}
.intro-steps b{color:#fff;}
.intro-note{font-size:12px;color:rgba(255,255,255,.55);line-height:1.5;margin:0;}
.intro-cta{margin-top:14px;text-align:center;font-size:13.5px;font-weight:700;color:#cbbcff;display:flex;align-items:center;justify-content:center;gap:8px;}
.intro-cta i{animation:introBounce 1.6s ease-in-out infinite;}
@keyframes introBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.intro-hero.is-collapsed .intro-body,.intro-hero.is-collapsed .intro-cta{display:none;}
@media(max-width:560px){.intro-title{font-size:24px;}.intro-hero{padding:20px 18px 16px;}}

/* ==========================================================================
   Профиль (левый верхний угол) + панель настроек
   ========================================================================== */
.menu-topbar { display: flex; margin-bottom: 16px; }

.profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 0;
    padding: 7px 14px 7px 7px;
    border-radius: 999px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--glass-border);
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.26);
}
.profile-btn::before { display: none; }

.profile-btn__avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
    color: #fff;
    font-size: 14px;
}
.profile-btn__name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-btn__caret { font-size: 11px; color: rgba(255, 255, 255, 0.45); transition: transform .25s var(--ease-standard); }
.profile-btn[aria-expanded="true"] .profile-btn__caret { transform: rotate(180deg); }

/* Логотип бренда в аватаре профиля (вместо иконки) — заполняет круг, не меняя размер кнопки */
.profile-btn__avatar img, .profile-panel__avatar img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.profile-btn__avatar, .profile-panel__avatar { overflow: hidden; padding: 0; }

.profile-scrim {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.profile-panel {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    z-index: 100;
    width: min(340px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 10px;
    border-radius: 22px;
    background: rgba(22, 18, 36, 0.86);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    opacity: 0;
    pointer-events: none;
    transform-origin: top left;
}
.profile-panel.is-open { opacity: 1; pointer-events: auto; }

.profile-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}
.profile-panel__avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
    color: #fff;
    font-size: 18px;
}
.profile-panel__info { display: flex; flex-direction: column; min-width: 0; }
.profile-panel__name { font-weight: 600; font-size: 16px; color: var(--color-text); }
.profile-panel__email { font-size: 13px; color: #a49dbd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-list { display: flex; flex-direction: column; }

.profile-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 8px 0 2px;
    padding: 13px;
    border-radius: 14px;
    background: rgba(255, 92, 102, 0.14);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid rgba(255, 100, 110, 0.32);
    color: #ff8a90;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.profile-logout::before { display: none; }
.profile-logout:hover { background: rgba(255, 92, 102, 0.24); border-color: rgba(255, 110, 120, 0.5); box-shadow: none; }

/* ==========================================================================
   Выпадающее меню профиля — оформление в стиле Apple (Liquid Glass)
   Скоуп строго .profile-panel, чтобы не задеть строки-списки на других экранах
   (страница подписки использует .settings-group .menu-row с плоским видом).
   ========================================================================== */
.profile-panel {
    padding: 12px;
    border-radius: 26px;
    background: rgba(30, 26, 46, 0.72);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    /* появление «поп» как в iOS/macOS делает GSAP (profile.js) — здесь только оформление */
}

.profile-list { gap: 7px; padding: 2px; }

/* Каждая строка — самостоятельная стеклянная плитка */
.profile-panel .menu-row {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.055);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    padding: 13px 14px;
    transition: background-color .2s var(--ease-standard), border-color .2s var(--ease-standard), transform .15s var(--ease-standard);
}
.profile-panel .menu-row:first-child { border-top: 1px solid rgba(255, 255, 255, 0.10); }
.profile-panel .menu-row:hover,
.profile-panel .menu-row:active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}
.profile-panel .menu-row--static,
.profile-panel .menu-row--static:hover { transform: none; background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.10); }

/* Иконки-плитки как app-icon в iOS: цветной градиент + внутренний блик */
.profile-panel .menu-row__icon {
    width: 32px; height: 32px; border-radius: 10px; flex: 0 0 32px;
    color: #fff; font-size: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.28);
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.95), rgba(var(--color-primary2-rgb), 0.95));
}
.profile-panel #openPortraitBtn     .menu-row__icon { background: linear-gradient(135deg, #5b8cff, #3a63e0); }
.profile-panel #openResultsBtn      .menu-row__icon { background: linear-gradient(135deg, #38d39f, #1fa87c); }
.profile-panel #openPricingBtn      .menu-row__icon { background: linear-gradient(135deg, #ffd76a, #f0a23c); }
.profile-panel #openSubscriptionBtn .menu-row__icon { background: linear-gradient(135deg, #b98cff, #8b5cf0); }
.profile-panel #openPasswordBtn     .menu-row__icon { background: linear-gradient(135deg, #7f8aa3, #545e73); }
.profile-panel .menu-row--static    .menu-row__icon { background: linear-gradient(135deg, #5a5f70, #3c4150); }

.profile-panel .menu-row__chevron { color: rgba(255, 255, 255, 0.4); }

/* Кнопка выхода — стеклянная «красная» плитка в тон */
.profile-logout {
    margin-top: 9px;
    border-radius: 15px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transition: background-color .2s var(--ease-standard), border-color .2s var(--ease-standard), transform .15s var(--ease-standard);
}
.profile-logout:hover { transform: translateY(-1px); }

/* Светлая тема: плитки — на тёмном полупрозрачном, читаемо на белой панели */
html[data-theme="light"] .profile-panel { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); }
html[data-theme="light"] .profile-panel .menu-row { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }
html[data-theme="light"] .profile-panel .menu-row:hover { background: rgba(0, 0, 0, 0.07); border-color: rgba(0, 0, 0, 0.14); }
html[data-theme="light"] .profile-panel .menu-row--static,
html[data-theme="light"] .profile-panel .menu-row--static:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .profile-panel .menu-row__chevron { color: rgba(0, 0, 0, 0.32); }

/* обёртка iOS-переключателя (в строках настроек) */
.switch { display: inline-flex; align-items: center; flex: 0 0 auto; margin: 0; cursor: pointer; }

/* строка-список: ссылка тоже должна выглядеть как строка */
.menu-row { text-decoration: none; }
.menu-row--static { cursor: default; }
.menu-row--static:hover { background: transparent; }
.menu-row__hint { display: block; font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.45); margin-top: 2px; white-space: normal; }

/* ==========================================================================
   Управление подпиской
   ========================================================================== */
.sub-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 18px;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.sub-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.sub-card__row + .sub-card__row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.sub-card__label { color: #b7b0cc; font-size: 14px; }
.sub-card__value { font-weight: 600; color: var(--color-text); }
.sub-plan-badge { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: #cfcbe0; }
.sub-plan-badge.is-pro { background: rgba(var(--color-primary-rgb), 0.18); color: var(--color-primary); }
.sub-plan-badge.is-prime { background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.32), rgba(var(--color-primary2-rgb), 0.24)); color: #ffe6b0; }
.sub-progress { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 8px; }
.sub-progress__bar { height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-2)); border-radius: 999px; }

/* Карточки независимых подписок по разделам (Управление подпиской) */
.subs-list { margin-bottom: 18px; display: grid; gap: 14px; }
.subc {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding: 15px 18px;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.subc--prime {
    border-color: rgba(var(--color-primary-rgb), 0.4);
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.12), rgba(255, 255, 255, 0.04));
}
.subc__head { display: flex; align-items: center; gap: 11px; }
.subc__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
    background: rgba(var(--color-primary-rgb), 0.16); color: var(--color-primary); font-size: 16px; }
.subc--prime .subc__icon { background: linear-gradient(135deg, #ffe6b0, #f0a23c); color: #3a2600; }
.subc__title { font-weight: 700; font-size: 15.5px; color: var(--color-text); }
.subc__term { font-size: 13px; color: #b7b0cc; margin: 10px 0 4px; }
.subc__term b { color: var(--color-text); }
.subc__row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 0 2px; margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.subc__ap-label { font-size: 13.5px; color: #cfcbe0; display: inline-flex; align-items: center; gap: 8px; }
.subc__ap-label i { color: var(--color-primary); }
/* width/box-shadow/backdrop сбрасываем, чтобы глобальный button{} не растягивал кнопку */
.subc__cancel { width: auto; margin: 12px 0 0; padding: 9px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
    background: rgba(217, 79, 79, 0.14); color: #ff9a9a; border: 1px solid rgba(217, 79, 79, 0.32); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.subc__cancel:hover { background: rgba(217, 79, 79, 0.22); }
.sub-empty { text-align: center; padding: 30px 20px; background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.14); border-radius: 16px; margin-bottom: 18px; }
.sub-empty__icon { font-size: 30px; color: rgba(var(--color-primary-rgb), 0.7); margin-bottom: 12px; }
.sub-empty__title { font-weight: 700; font-size: 16px; color: var(--color-text); margin-bottom: 6px; }
.sub-empty__text { font-size: 13.5px; color: #b7b0cc; line-height: 1.5; max-width: 420px; margin: 0 auto; }
html[data-theme="light"] .subc,
html[data-theme="light"] .sub-empty { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.1); }
html[data-theme="light"] .subc__term,
html[data-theme="light"] .sub-empty__text { color: #5c5c6b; }
html[data-theme="light"] .subc__ap-label { color: #444; }

.settings-group {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 18px;
}
.settings-group__title {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    padding: 13px 16px 6px;
}
.settings-group .menu-row { border-top: 1px solid rgba(255, 255, 255, 0.07); }

.sub-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); line-height: 1.5; margin: 12px 16px; display: flex; gap: 8px; }
.sub-note i { color: var(--color-primary); margin-top: 2px; flex: 0 0 auto; }
.sub-phone-input { display: block; width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: #fff; font-size: 14px; }
.sub-phone-input::placeholder { color: rgba(255,255,255,0.35); }
.sub-phone-input:focus { outline: none; border-color: var(--color-primary); }

/* сообщение формы (успех/ошибка) */
.form-message { margin: 12px 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
.form-message.success { background: rgba(80, 220, 150, 0.14); color: #7bf0bb; border: 1px solid rgba(80, 220, 150, 0.28); }
.form-message.error { background: rgba(255, 120, 120, 0.13); color: #ff9a9a; border: 1px solid rgba(255, 120, 120, 0.26); }

/* ==========================================================================
   Светлая тема (переключатель в профиле). Логин/интро остаются тёмными
   (это отдельная кинематографичная сцена поверх космического фото).
   ========================================================================== */
html[data-theme="light"] {
    --color-bg-mid: #eef0f7;
    --color-bg-deep: #e4e7f1;
    --color-text: #1b1b26;
    --glass-bg: rgba(0, 0, 0, 0.045);
    --glass-bg-hover: rgba(0, 0, 0, 0.08);
    --glass-border: rgba(0, 0, 0, 0.14);
    --glass-highlight: rgba(255, 255, 255, 0.75);
}

/* Базовый фон светлой темы — тот же рассветный пейзаж, что встречает при регистрации
   (img/background.webp), с тёплой затемняющей вуалью для читаемости.
   Виден на меню и прочих страницах; в разделах его перекрывает фикс-космос раздела. */
html[data-theme="light"] body {
    background:
        linear-gradient(180deg, rgba(16,12,30,0.52) 0%, rgba(30,20,40,0.6) 48%, rgba(18,14,30,0.78) 100%),
        url('../img/background.webp') center 32%/cover no-repeat fixed;
}
/* На фоне-фото текст меню, лежащий прямо на фоне, делаем светлым (как на экране входа). */
html[data-theme="light"] #menuPage .menu-title { color: #fff; }
html[data-theme="light"] #menuPage .footer { color: rgba(255,255,255,0.72); }
html[data-theme="light"] #menuPage .profile-btn { color: #fff; background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.26); }
html[data-theme="light"] #menuPage .profile-btn__caret { color: rgba(255,255,255,0.6); }

/* Экран входа/регистрации всегда на тёмном фото — форма должна быть светлой в любой теме
   (иначе в светлой теме буквы логина/пароля и подписи чёрные и не видны на фоне). */
html[data-theme="light"] #registrationPage input,
html[data-theme="light"] #registrationPage select,
html[data-theme="light"] #registrationPage textarea {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}
html[data-theme="light"] #registrationPage input::placeholder { color: rgba(255,255,255,0.5) !important; }
html[data-theme="light"] #registrationPage label,
html[data-theme="light"] #registrationPage .switch-text { color: #e7e2f3; }
html[data-theme="light"] #registrationPage .auth-tabs { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
html[data-theme="light"] #registrationPage .auth-tab { color: rgba(255,255,255,0.7); }
html[data-theme="light"] #registrationPage .auth-tab.active { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.28); }
html[data-theme="light"] #registrationPage .footer { color: rgba(255,255,255,0.55); }

html[data-theme="light"] .page:not(.page--intro) {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .category-card,
html[data-theme="light"] .sub-card,
html[data-theme="light"] .settings-group,
html[data-theme="light"] .result-card,
html[data-theme="light"] .portrait-section,
html[data-theme="light"] .user-info { background: rgba(0, 0, 0, 0.035); border-color: rgba(0, 0, 0, 0.08); }

html[data-theme="light"] input,
html[data-theme="light"] select { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.14); color: #1b1b26; }
html[data-theme="light"] input::placeholder { color: #9a9aab; }

html[data-theme="light"] .profile-btn { color: #1b1b26; }
html[data-theme="light"] .profile-panel { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 26px 64px rgba(0, 0, 0, 0.22); }
html[data-theme="light"] .profile-panel__head { border-bottom-color: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .profile-panel__email,
html[data-theme="light"] .menu-row__hint,
html[data-theme="light"] .sub-card__label,
html[data-theme="light"] .category-card p,
html[data-theme="light"] .category-header p,
html[data-theme="light"] .result-summary,
html[data-theme="light"] .result-date,
html[data-theme="light"] label,
html[data-theme="light"] .settings-group__title,
html[data-theme="light"] .sub-note { color: #5c5c6b; }

html[data-theme="light"] .menu-row { color: #1b1b26; border-top-color: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .menu-row:hover { background: rgba(0, 0, 0, 0.045); }
html[data-theme="light"] .menu-row__chevron { color: rgba(0, 0, 0, 0.3); }
html[data-theme="light"] .menu-row__icon { background: rgba(var(--color-primary-rgb), 0.18); }

html[data-theme="light"] .menu-title,
html[data-theme="light"] .category-card h3,
html[data-theme="light"] .category-header h2,
html[data-theme="light"] .result-type,
html[data-theme="light"] .portrait-section h3,
html[data-theme="light"] .user-details h3,
html[data-theme="light"] .sub-card__value,
html[data-theme="light"] .profile-panel__name { color: #1b1b26; }

html[data-theme="light"] button { color: #1b1b26; }
html[data-theme="light"] button[type="submit"] { color: #3a2a00; }
html[data-theme="light"] .auth-tabs { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); }
html[data-theme="light"] .auth-tab { color: #5c5c6b; }
html[data-theme="light"] .auth-tab.active { background: #fff; color: #1b1b26; border-color: rgba(0, 0, 0, 0.1); }
html[data-theme="light"] .back-button { background: rgba(0, 0, 0, 0.05); color: #444; }

html[data-theme="light"] .switch-track { background: rgba(0, 0, 0, 0.18); border-color: rgba(0, 0, 0, 0.14); }
html[data-theme="light"] .footer { color: #9a9aab; }

/* Приветственный блок на светлой теме */
html[data-theme="light"] .intro-hero { border-color: rgba(0, 0, 0, 0.1); }
html[data-theme="light"] .intro-eyebrow { color: #8a5a2a; }
/* Осветляем стекло рамки баннера — сильный белый фрост, чтобы текст читался на ярком фоне */
html[data-theme="light"] .intro-hero::before {
    background: linear-gradient(135deg, rgba(250, 248, 255, 0.88), rgba(247, 244, 253, 0.76) 55%, rgba(252, 250, 255, 0.85));
}
html[data-theme="light"] .intro-benefit { background: rgba(0, 0, 0, 0.045); border-color: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .intro-how { background: rgba(0, 0, 0, 0.05); }

/* Карточки разделов в меню — ярче (матово-белые), чтобы выделялись на фиолетовом фоне */
html[data-theme="light"] #menuPage .category-card {
    background: rgba(255, 255, 255, 0.44);
    border-color: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 26px rgba(90, 40, 140, 0.14);
}
html[data-theme="light"] #menuPage .category-card:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.8);
}
html[data-theme="light"] .intro-title { background: linear-gradient(90deg, #2a2340, #5a4b90 60%, #b0567a); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .intro-lead,
html[data-theme="light"] .intro-benefit b,
html[data-theme="light"] .intro-steps,
html[data-theme="light"] .intro-steps b { color: #26243a; }
html[data-theme="light"] .intro-benefit span,
html[data-theme="light"] .intro-quote,
html[data-theme="light"] .intro-note { color: #4a4860; }
html[data-theme="light"] .intro-how { background: rgba(0, 0, 0, 0.05); }

/* ==========================================================================
   СВЕТЛАЯ ТЕМА ВНУТРИ РАЗДЕЛОВ (Психология / Нумерология / Астрология)
   Разделы рисуют собственный тёмный «космос»-фон и хардкодят светлый текст —
   в светлой теме заменяем фон на светлый, а текст делаем тёмным/читаемым.
   Переменные палитры светлой темы разделов:
     текст          #26243a   |  заголовки  #1b1b26   |  приглушённый #605d76
     поверхность    rgba(0,0,0,.035) + рамка rgba(0,0,0,.08)
     тёплый акцент  #b07a12 (вместо жёлтого #ffd84d, нечитаемого на светлом)
   ========================================================================== */

/* --- Светлые фоны разделов из изображений пользователя ---
   Каждый раздел получает свою картинку; CSS-градиент под ней — фолбэк,
   максимально повторяющий изображение (показывается, пока файл не добавлен).
   Пути относительно css/ → ../img/. Файлы:
     ../img/light-numerology.png  — нежно-синий (нумерология)
     ../img/light-psychology.png  — светло-зелёный (психология)
     ../img/light-base.png        — светло-фиолетовый (базовый/меню)
   Астрология намеренно исключена — остаётся с исходным тёмным космосом в обеих темах. */
html[data-theme="light"] .num-cosmos {
    background:
        url('../img/light-numerology.png') center/cover no-repeat,
        radial-gradient(65% 60% at 20% 22%, #daeef6, transparent 60%),
        radial-gradient(72% 62% at 82% 82%, #a7c4ea, transparent 62%),
        linear-gradient(135deg, #cfe6f2 0%, #aecbe9 55%, #c6d8f1 100%);
}
html[data-theme="light"] .psy-cosmos {
    background:
        url('../img/light-psychology.png') center/cover no-repeat,
        radial-gradient(60% 55% at 55% 16%, #bfe0a0, transparent 62%),
        radial-gradient(64% 60% at 28% 96%, #eef0c2, transparent 60%),
        linear-gradient(160deg, #d9edc6 0%, #c3e0a4 45%, #eef3cb 100%);
}
html[data-theme="light"] .psy-cosmos__art { opacity: 0; }

/* Астрология намеренно НЕ меняет фон/тему — остаётся как в исходном файле (тёмный космос).
   Единственное: глобальное правило светлой темы button{color:#1b1b26} перекрашивало бы её
   кнопки в тёмный на тёмном фоне — возвращаем им исходные (светлые) цвета, чтобы раздел
   выглядел одинаково в обеих темах. */
html[data-theme="light"] body[data-section="astrology"] button { color: #d9d3ea; }
html[data-theme="light"] body[data-section="astrology"] label { color: #d7d1e8; }
html[data-theme="light"] body[data-section="astrology"] .footer { color: rgba(255,255,255,0.5); }
html[data-theme="light"] body[data-section="astrology"] .back-button { background: rgba(255,255,255,0.06); color: #e5e0f2; }
html[data-theme="light"] body[data-section="astrology"] .astro-tab { color: #d7d1e8; }
html[data-theme="light"] body[data-section="astrology"] .astro-tab:hover,
html[data-theme="light"] body[data-section="astrology"] .astro-tab.active { color: #fff; }
html[data-theme="light"] body[data-section="astrology"] .astro-tab--primary,
html[data-theme="light"] body[data-section="astrology"] .astro-tab--primary.active { color: #2a1e05; }
html[data-theme="light"] body[data-section="astrology"] .astro-btn-primary { color: #fff; }
html[data-theme="light"] body[data-section="astrology"] .astro-btn-secondary { color: #e6c877; }
html[data-theme="light"] body[data-section="astrology"] .astro-btn-ghost { color: #d9d3ea; }

/* --- Общий текст разделов --- */
html[data-theme="light"] .numerology-content,
html[data-theme="light"] .psy-wrap,
html[data-theme="light"] #psychologyContent { color: #26243a; }

html[data-theme="light"] .numerology-content h3,
html[data-theme="light"] .numerology-content h4,
html[data-theme="light"] .numerology-content h5,
html[data-theme="light"] .num-hero-text h3,
html[data-theme="light"] .num-meaning-name,
html[data-theme="light"] .num-master h5,
html[data-theme="light"] .number-name,
html[data-theme="light"] .psy-cell-title,
html[data-theme="light"] .fm-arc-title { color: #1b1b26; }

/* Тело текста */
html[data-theme="light"] .num-hero-text p,
html[data-theme="light"] .num-section p,
html[data-theme="light"] .num-meaning p,
html[data-theme="light"] .num-master p,
html[data-theme="light"] .num-list,
html[data-theme="light"] .num-list li,
html[data-theme="light"] .fm-arc-text,
html[data-theme="light"] .fm-teaser-lead,
html[data-theme="light"] .psy-cell-p,
html[data-theme="light"] .fate-matrix-desc { color: #33314a; }

/* Приглушённый текст / подписи */
html[data-theme="light"] .small-muted,
html[data-theme="light"] .num-note,
html[data-theme="light"] .num-section-lead,
html[data-theme="light"] .num-fact-lbl,
html[data-theme="light"] .fate-matrix-subtitle,
html[data-theme="light"] .fm-arc-role,
html[data-theme="light"] .fm-arc-intro,
html[data-theme="light"] .psm-stats,
html[data-theme="light"] .psm-title,
html[data-theme="light"] .num-py-line { color: #605d76; }

/* Тёплый акцент вместо жёлтого (жёлтый нечитаем на светлом) */
html[data-theme="light"] .num-hero-text strong,
html[data-theme="light"] .fm-arc-section-title,
html[data-theme="light"] .psy-cell-subhead,
html[data-theme="light"] .mr-main b,
html[data-theme="light"] .fm-teaser-title,
html[data-theme="light"] .num-fact-num,
html[data-theme="light"] .num-master-num { color: #b07a12; }
html[data-theme="light"] .num-master-num { -webkit-text-fill-color: #b07a12; }

/* --- Поверхности-карточки: со «стеклянно-белых» на «стеклянно-тёмные» --- */
html[data-theme="light"] .numerology-calculator,
html[data-theme="light"] .num-section,
html[data-theme="light"] .num-meaning,
html[data-theme="light"] .num-master,
html[data-theme="light"] .num-fact,
html[data-theme="light"] .number-item,
html[data-theme="light"] .psy-cell,
html[data-theme="light"] .pyth-desc,
html[data-theme="light"] .fate-matrix-desc,
html[data-theme="light"] .fm-arc-block,
html[data-theme="light"] .num-graph-host,
html[data-theme="light"] .psm-box,
html[data-theme="light"] .marriage-result {
    background: rgba(0,0,0,0.035);
    border-color: rgba(0,0,0,0.08);
}

/* Числовые бейджи-кружки (синие/зелёные) остаются как есть — они контрастны и на светлом */

/* --- Кнопка «Раздел для подробной информации» и тизер в светлой теме --- */
html[data-theme="light"] .fm-detail-toggle {
    color: #7a5410;
    border-color: rgba(176,122,18,0.4);
    background: linear-gradient(135deg, rgba(240,184,74,0.2), rgba(92,141,255,0.12));
}
html[data-theme="light"] .fm-free-teaser {
    background: linear-gradient(160deg, rgba(240,184,74,0.12), rgba(92,141,255,0.08));
    border-color: rgba(176,122,18,0.3);
}
html[data-theme="light"] .fm-teaser-lead,
html[data-theme="light"] .fm-teaser-cta { color: #33314a; }
html[data-theme="light"] .fm-teaser-list li { color: #4a4860; }
html[data-theme="light"] .fm-teaser-list li b { color: #7a5410; }

/* Нумерология: перебиваем исходные color:...!important */
html[data-theme="light"] .num-section-lead { color: #605d76 !important; }
html[data-theme="light"] .num-note { color: #33314a !important; background: rgba(124,92,255,0.07); }

/* --- Число имени: светлая тема --- */
html[data-theme="light"] .num-name-method {
    background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.10); color: #33314a;
}
html[data-theme="light"] .num-name-form input {
    background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #20203a;
}
html[data-theme="light"] .num-name-breakdown,
html[data-theme="light"] .num-name-table {
    background: rgba(0,0,0,0.035); border-color: rgba(0,0,0,0.08);
}
html[data-theme="light"] .num-name-cap { color: #605d76; }
html[data-theme="light"] .num-name-cap b,
html[data-theme="light"] .num-name-calc,
html[data-theme="light"] .num-name-chip b,
html[data-theme="light"] .num-name-interp-title { color: #1b1b26; }
html[data-theme="light"] .num-name-interp p,
html[data-theme="light"] .num-name-attr,
html[data-theme="light"] .num-name-how-body p,
html[data-theme="light"] .num-name-steps li,
html[data-theme="light"] .num-name-example { color: #33314a !important; }
html[data-theme="light"] .num-name-table li { color: #4a4860; }
html[data-theme="light"] .num-name-interp-key { color: #b07a12; }
html[data-theme="light"] .num-name-attr-lbl,
html[data-theme="light"] .num-name-table-h { color: #6a4fd0; }
html[data-theme="light"] .num-name-chip i,
html[data-theme="light"] .num-name-table li b,
html[data-theme="light"] .num-name-example b,
html[data-theme="light"] .num-name-zodiac { color: #b07a12; }
html[data-theme="light"] .num-name-note { color: #7a7790 !important; }
html[data-theme="light"] .num-name-interp {
    background: linear-gradient(135deg, rgba(240,184,74,0.14), rgba(124,92,255,0.10));
    border-color: rgba(176,122,18,0.28);
}

/* --- Психология: светлая палитра (зелёные акценты) --- */
html[data-theme="light"] .psy-hero__title {
    background: linear-gradient(90deg, #123f30, #1d9e75);
    -webkit-background-clip: text; background-clip: text;
}
html[data-theme="light"] .psy-card,
html[data-theme="light"] .psy-tile,
html[data-theme="light"] .psy-about { background: rgba(0,0,0,0.035); border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .psy-tile:hover { background: rgba(29,158,117,0.10); border-color: rgba(29,158,117,0.4); }
html[data-theme="light"] .psy-tab { color: #0f6e56; }
html[data-theme="light"] .psy-tab.is-active { color: #fff; }
html[data-theme="light"] .psy-tile__icon,
html[data-theme="light"] .psy-tile__arrow,
html[data-theme="light"] .psy-btn { color: #12836a; }
html[data-theme="light"] .psy-btn--ghost { color: #33314a; border-color: rgba(0,0,0,0.18); }
html[data-theme="light"] .psy-about__icon { color: #0f6e56; }
html[data-theme="light"] .psy-msg--bot .psy-bubble { background: rgba(0,0,0,0.045); border-color: rgba(29,158,117,0.3); }
html[data-theme="light"] .psy-chat__input textarea { background: rgba(0,0,0,0.05); color: #1b1b26; }

/* ==========================================================================
   Приветственная плашка после входа/регистрации (registration.js → playWelcome)
   ========================================================================== */
.welcome-splash {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; padding: 20px;
    opacity: 0; /* видимостью управляет GSAP или классы .is-in/.is-out (фолбэк) */
}
.welcome-splash.is-in { opacity: 1; transition: opacity .4s ease; }
.welcome-splash.is-out { opacity: 0; transition: opacity .45s ease; }
.welcome-splash__inner {
    text-align: center;
    padding: 26px 42px;
    border-radius: 24px;
    background: rgba(28, 24, 46, 0.62);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.welcome-splash__ic {
    display: block; font-size: 32px; margin-bottom: 12px;
    color: var(--color-primary);
    filter: drop-shadow(0 4px 14px rgba(var(--color-primary-rgb), 0.5));
}
.welcome-splash__text { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.welcome-splash__sub { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, 0.75); }
html[data-theme="light"] .welcome-splash__inner { background: rgba(255, 255, 255, 0.85); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22); }
html[data-theme="light"] .welcome-splash__text { color: #1b1b26; }
html[data-theme="light"] .welcome-splash__sub { color: #5c5c6b; }

/* ==========================================================================
   Юридический футер-дисклеймер (index.html) — виден на всех экранах.
   Лежит на фоне body (тёмный в обеих темах), поэтому текст светлый.
   ========================================================================== */
.legal-footer {
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 28px auto 0;
    padding: 20px 20px calc(26px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.legal-footer__center { flex: 1 1 auto; min-width: 0; text-align: center; }
/* боковые зоны футера (соцсети слева / сотрудничество справа) — показываем только на главной */
.legal-footer__side { flex: 0 0 auto; display: none; }
.legal-footer__side--left { align-items: flex-start; }
.legal-footer__side--right { align-items: flex-end; }
body[data-page="menuPage"] .legal-footer { max-width: 1600px; padding-left: clamp(12px, 3vw, 36px); padding-right: clamp(12px, 3vw, 36px); }
body[data-page="menuPage"] .legal-footer__side { display: flex; }
@media (max-width: 720px) {
    .legal-footer { flex-direction: column; align-items: center; gap: 16px; }
    .legal-footer__side--left, .legal-footer__side--right { align-items: center; }
    .menu-socials__links { align-items: center; }
    .menu-coop { align-items: center !important; }
}

/* Пока открыт ЛЮБОЙ полноэкранный вид (натальная карта, лента транзитов,
   календарь-гистограмма, график-прогноз) — прячем юридический футер, иначе он
   просвечивает сквозь полупрозрачное затемнение развёрнутой карты/таблицы. */
body:has(.natal-fs) .legal-footer,
body:has(.tlz-fs) .legal-footer,
body:has(.cyh-fs) .legal-footer,
body:has(.gpz-fs) .legal-footer {
    display: none;
}
.legal-footer__note {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 9px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.legal-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: center;
    align-items: center;
    font-size: 12.5px;
}
.legal-footer__links a {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: color .15s ease;
}
.legal-footer__links a:hover { color: var(--color-primary); text-decoration: underline; }
.legal-footer__sep { color: rgba(255, 255, 255, 0.3); }
.legal-footer__copy {
    margin: 9px 0 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.42);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
@media (max-width: 480px) { .legal-footer__note { font-size: 11.5px; } .legal-footer__links { font-size: 12px; } .legal-footer__copy { font-size: 11px; } }

/* ===== Схема здоровья (Пифагор × У-Син), PRO ===== */
.num-health-section h4 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nh-pro-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: .4px;
    color: #1d1503; background: linear-gradient(135deg, #f0b84a, #d99a1f);
    border-radius: 999px; padding: 3px 10px;
    box-shadow: 0 2px 10px rgba(240, 184, 74, .35);
}
.nh-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.nh-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 12px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: #cfc9e8;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    transition: .18s;
}
.nh-tab:hover { background: rgba(255,255,255,.1); }
.nh-tab.is-active { background: linear-gradient(135deg, rgba(124,92,255,.85), rgba(94,66,214,.85)); color: #fff; border-color: transparent; }
.nh-tab-crown { color: #f0b84a; font-size: 11px; }
.nh-form { display: flex; gap: 10px; flex-wrap: wrap; }
.nh-form input {
    flex: 1 1 130px; min-width: 0; padding: 11px 12px; border-radius: 12px;
    background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14);
    color: #efeaff; font-size: 14px; color-scheme: dark;
}
.nh-form input:focus { outline: none; border-color: rgba(124,92,255,.65); }
.nh-form button {
    flex: 1 1 160px; padding: 11px 16px; border-radius: 12px; border: none; cursor: pointer;
    font-size: 14px; font-weight: 700; color: #1d1503;
    background: linear-gradient(135deg, #f0b84a, #d99a1f);
    box-shadow: 0 4px 16px rgba(240,184,74,.25); transition: .18s;
}
.nh-form button:hover { filter: brightness(1.06); }
.nh-form-hint { font-size: 12px; color: rgba(230,225,245,.55); margin: 8px 0 4px; }
.nh-svg { width: 100%; height: auto; display: block; }
.nh-pentagram { max-width: 420px; margin: 8px auto 0; }
/* Узлы пентаграммы */
.nh-node { cursor: pointer; }
.nh-node-ring { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.4; }
.nh-node-split { stroke: rgba(10,8,20,.55); stroke-width: 1.2; }
.nh-node-glow { filter: drop-shadow(0 0 9px var(--nhc)); }
.nh-node-dim { opacity: .6; }
.nh-node-dim .nh-node-ring { stroke-dasharray: 4 4; }
.nh-node:hover .nh-node-ring { stroke: #fff; stroke-width: 2; }
.nh-node-digit { fill: #fff; font-size: 15px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: rgba(10,8,20,.6); stroke-width: 2.5px; }
.nh-node-cnt { font-size: 9px; font-weight: 600; fill: rgba(255,255,255,.85); }
.nh-node-label { font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: rgba(10,8,20,.65); stroke-width: 3px; }
.nh-center-mark { font-size: 22px; text-anchor: middle; fill: rgba(255,255,255,.5); }
.nh-arrow-gen { fill: none; stroke: #e6c877; stroke-width: 2; opacity: .8; }
.nh-arrow-ctrl { stroke: #8fa0b5; stroke-width: 1.3; stroke-dasharray: 5 5; opacity: .55; }
/* Легенда */
.nh-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; font-size: 12px; color: rgba(230,225,245,.75); }
.nh-leg { display: inline-flex; align-items: center; gap: 6px; }
.nh-leg::before { content: ''; width: 12px; height: 12px; border-radius: 50%; }
.nh-leg-weak::before { background: rgba(124,92,255,.16); border: 1.4px dashed rgba(255,255,255,.4); }
.nh-leg-norm::before { background: rgba(124,92,255,.5); }
.nh-leg-active::before { background: rgba(124,92,255,.9); box-shadow: 0 0 8px rgba(124,92,255,.8); }
/* Карточка органа */
.nh-organ-card { margin-top: 14px; border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); padding: 14px; }
.nh-organ-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nh-organ-el { font-weight: 800; font-size: 15px; color: var(--nhc, #cfc9e8); }
.nh-organ-hint { font-size: 12px; color: rgba(230,225,245,.55); }
.nh-organ-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.06); }
.nh-organ-kind { flex: 0 0 30px; font-size: 11px; font-weight: 700; color: rgba(230,225,245,.6); }
.nh-organ-name { flex: 1 1 150px; font-size: 13.5px; }
.nh-organ-digit { color: #f0b84a; }
.nh-organ-scale { display: inline-flex; gap: 3px; }
.nh-seg { width: 14px; height: 8px; border-radius: 3px; background: rgba(255,255,255,.1); }
.nh-seg.on { background: var(--nhc, #7c5cff); box-shadow: 0 0 5px var(--nhc, #7c5cff); }
.nh-organ-state { font-size: 12px; font-weight: 700; }
.nh-st-weak { color: #e78f8f; }
.nh-st-norm { color: #cfc9e8; }
.nh-st-active { color: #7fe0a8; }
.nh-st-strong { color: #f0b84a; }
/* PRO-блоки */
.nh-pro { margin-top: 16px; display: grid; gap: 14px; }
.nh-block { border-radius: 14px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); padding: 14px; }
.nh-block-muted { opacity: .75; }
.nh-block-title { font-weight: 800; font-size: 14px; color: #cbb8ff; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.nh-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nh-link-item { font-size: 13px; line-height: 1.5; color: rgba(238,234,252,.88); display: block; padding-left: 22px; position: relative; }
.nh-link-item i { position: absolute; left: 0; top: 3px; color: #9f8bd8; width: 14px; text-align: center; }
.nh-link-danger i { color: #e78f8f; }
.nh-link-warn i { color: #f0b84a; }
.nh-pattern { border-left: 3px solid rgba(240,184,74,.6); padding: 8px 0 8px 12px; margin-bottom: 10px; }
.nh-pattern-name { font-weight: 700; font-size: 13.5px; color: #f0cf8e; margin-bottom: 4px; }
.nh-pattern-name i { margin-right: 6px; }
.nh-pattern-why { font-size: 12.5px; color: rgba(230,225,245,.72); margin-bottom: 5px; }
.nh-pattern-rec { font-size: 12.5px; color: rgba(238,234,252,.85); }
.nh-pattern-rec i { color: #7fe0a8; margin-right: 5px; }
.nh-pattern-src { font-size: 11px; color: rgba(230,225,245,.45); }
.nh-pattern-none { font-size: 13px; color: rgba(238,234,252,.8); }
.nh-pattern-none i { color: #7fe0a8; margin-right: 6px; }
/* Бары силы органов */
.nh-bars { display: grid; gap: 7px; }
.nh-bar-row { display: flex; align-items: center; gap: 10px; }
.nh-bar-label { flex: 0 0 46%; font-size: 12px; color: rgba(238,234,252,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-bar-label b { color: #f0b84a; }
.nh-bar-kind { font-style: normal; font-size: 10px; color: rgba(230,225,245,.5); }
.nh-bar-track { flex: 1; height: 9px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.nh-bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--nhc, #7c5cff); min-width: 2px; }
.nh-bar-fill.nh-st-weak { opacity: .25; }
.nh-bar-count { flex: 0 0 18px; font-size: 12px; font-weight: 700; color: rgba(238,234,252,.7); text-align: right; }
/* Сезоны и часы */
.nh-svg-ribbon { max-width: 380px; margin: 0 auto; }
.nh-season-lbl { font-size: 12px; font-weight: 700; fill: rgba(15,10,25,.85); text-anchor: middle; }
.nh-season-marker-lbl { font-size: 10px; fill: #e6c877; text-anchor: middle; }
.nh-season-text { font-size: 13px; line-height: 1.55; color: rgba(238,234,252,.85); margin: 10px 0 0; }
.nh-svg-clock { max-width: 270px; margin: 0 auto; }
.nh-clock-h { font-size: 9px; fill: rgba(230,225,245,.6); text-anchor: middle; }
.nh-clock-center { font-size: 12px; fill: rgba(230,225,245,.55); text-anchor: middle; }
.nh-clock-center-sub { font-size: 10px; }
/* Пирамида (геометрия личности) */
.nh-pyramid { max-width: 400px; margin: 4px auto; }
.nh-edge { cursor: pointer; }
.nh-edge-base { stroke: rgba(255,255,255,.18); stroke-width: 2; stroke-linecap: round; }
.nh-edge-fill { stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(230,200,119,.35)); }
.nh-edge-hit { stroke: transparent; stroke-width: 16; }
.nh-edge:hover .nh-edge-base { stroke: rgba(255,255,255,.45); }
.nh-edge-lbl { font-size: 12px; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: rgba(10,8,20,.7); stroke-width: 3px; }
.nh-edge-aux { stroke: rgba(255,255,255,.09); stroke-width: 1.4; stroke-dasharray: 4 4; }
.nh-geo-text { font-size: 13px; line-height: 1.55; color: rgba(238,234,252,.88); margin: 4px 0 0; }
/* Тизер-замок PRO */
.nh-teaser {
    margin-top: 16px; border-radius: 16px; padding: 18px;
    background: linear-gradient(150deg, rgba(240,184,74,.10), rgba(124,92,255,.08));
    border: 1px solid rgba(240,184,74,.3);
}
.nh-teaser-title { font-weight: 800; font-size: 15px; color: #f0cf8e; display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.nh-teaser-title i { color: #f0b84a; }
.nh-teaser-lead { font-size: 13px; color: rgba(238,234,252,.82); margin: 0 0 10px; }
.nh-teaser-list { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 5px; }
.nh-teaser-list li { font-size: 13px; color: rgba(238,234,252,.85); }
.nh-teaser-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 20px; border-radius: 12px; border: none; cursor: pointer;
    font-size: 14px; font-weight: 800; color: #1d1503;
    background: linear-gradient(135deg, #f0b84a, #d99a1f);
    box-shadow: 0 4px 18px rgba(240,184,74,.35); transition: .18s;
}
.nh-teaser-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
/* Дисклеймер */
.nh-disclaimer {
    margin-top: 16px; font-size: 11.5px; line-height: 1.5; color: rgba(230,225,245,.55);
    border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px;
}
.nh-disclaimer i { margin-right: 5px; color: rgba(230,225,245,.4); }
@media (max-width: 420px) {
    .nh-bar-label { flex-basis: 52%; }
    .nh-tabs { gap: 6px; }
    .nh-tab { padding: 8px 10px; font-size: 12px; }
}

/* ===== Кнопки «Собрать сводный портрет» в разделах ===== */
.num-portrait-cta, .psy-portrait-cta, .astro-portrait-cta {
    border-radius: 16px; padding: 16px 18px;
    background: linear-gradient(150deg, rgba(124,92,255,0.12), rgba(92,141,255,0.08));
    border: 1px solid rgba(124,92,255,0.28); margin: 14px 0;
}
.num-portrait-cta h4, .psy-portrait-cta__title {
    display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; color: #cbb8ff; margin: 0 0 6px;
}
.psy-portrait-cta__text, .astro-portrait-cta__text { font-size: 13px; line-height: 1.5; color: rgba(230,225,245,0.82); margin: 0 0 12px; }
.astro-portrait-cta__text i, .psy-portrait-cta__title i, .num-portrait-cta h4 i { color: #9f8bd8; }
.num-portrait-btn, .psy-portrait-cta__btn, .astro-portrait-cta__btn {
    display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 12px; border: none; cursor: pointer;
    font-size: 14.5px; font-weight: 800; color: #14122a;
    background: linear-gradient(135deg, #b18cff, #7c5cff); color: #fff;
    box-shadow: 0 4px 16px rgba(124,92,255,0.3); transition: .16s;
}
.num-portrait-btn:hover, .psy-portrait-cta__btn:hover, .astro-portrait-cta__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.astro-portrait-cta { margin: 14px auto; max-width: 760px; }

/* =====================================================================
   ДИЗАЙН ГЛАВНОЙ (команда): медиа-карточки разделов, grid-дашборд,
   лента новостей, соцсети, сотрудничество. Перенесено из доработки.
===================================================================== */
/* ===== Живые медиа-фоны карточек разделов =====
   Картинка/видео заполняет всю рамку, поверх — тёмная вуаль для читабельности,
   контент (иконка/заголовок/текст) лежит сверху. При наведении картинка «оживает»
   (ken-burns), а видео (нумерология) запускается скриптом. */
.category-card--media { position: relative; overflow: hidden; isolation: isolate; }
.category-card--media .cc-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0a0714; }
.category-card--media .cc-media img,
.category-card--media .cc-media video {
    width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform;
}
.category-card--media .cc-media img { transform: scale(1.08) translateY(4%); }
.category-card--media .cc-media video { transform: scale(1.02); }

/* вуаль читабельности */
.category-card--media .cc-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        radial-gradient(120% 78% at 50% 52%, rgba(8,6,20,0.28), transparent 72%),
        linear-gradient(180deg, rgba(8,6,20,0.50) 0%, rgba(8,6,20,0.64) 55%, rgba(8,6,20,0.80) 100%);
    transition: background .35s var(--ease-standard);
}
.category-card--media .cc-content {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1 1 auto; width: 100%;
}

/* оживление картинки при наведении/фокусе (для видео — не нужно, у него своё движение) */
@keyframes ccKenBurns {
    from { transform: scale(1.08) translateY(4%); }
    to   { transform: scale(1.22) translateY(-6%); }
}
.category-card--media:hover .cc-media img,
.category-card--media:focus-within .cc-media img {
    animation: ccKenBurns 11s var(--ease-standard) infinite alternate;
}
.category-card--media:hover .cc-scrim,
.category-card--media:focus-within .cc-scrim {
    background:
        radial-gradient(120% 78% at 50% 52%, rgba(8,6,20,0.20), transparent 74%),
        linear-gradient(180deg, rgba(8,6,20,0.42) 0%, rgba(8,6,20,0.56) 55%, rgba(8,6,20,0.74) 100%);
}

/* текст поверх медиа — всегда светлый и с тенью (в обеих темах) */
.category-card--media h3 { color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.72); }
.category-card--media p  { color: #eae7fb !important; text-shadow: 0 1px 8px rgba(0,0,0,0.78); }
.category-card--media .category-icon {
    background: rgba(0,0,0,0.36) !important;
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.20);
    color: #ffd75c !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.42);
}
/* фон-медиа виден насквозь — убираем стеклянную заливку самой карточки */
.category-card--media,
html[data-theme="light"] .category-card--media { background: #0a0714; }

@media (prefers-reduced-motion: reduce) {
    .category-card--media:hover .cc-media img,
    .category-card--media:focus-within .cc-media img { animation: none; }
}

/* ===== «Живые плитки» разделов: вытянутый вниз прямоугольник 3:4 =====
   Ролики карточек вертикальные (9:16 и 1:1), карточка 3:4 — cover заполняет
   всю рамку без тёмных полей (небольшая обрезка по краям допустима).
   pointer-events:none — курсор «не видит» <video>, поэтому Яндекс.Браузер
   не показывает свою всплывающую панель перевода/субтитров над роликом
   (hover-запуск видео привязан к самой карточке в menu.js, ему это не мешает). */
.category-card--media .cc-media video {
    object-fit: cover; transform: none; pointer-events: none;
}
#menuPage .category-card--media {
    height: auto; min-height: 0;
    aspect-ratio: 3 / 4;
}

/* ===== Главное меню — крупная раскладка почти во весь экран =====
   Панель меню перестаёт быть маленькой карточкой по центру: она становится
   full-bleed (как разделы), тянется по ширине и высоте, а фон (тёмный градиент /
   светло-фиолетовый img4) виден сквозь прозрачную страницу. */
/* Меню занимает почти всю ширину монитора: контейнер без узкого кэпа и без
   боковых полей — content тянется к краям, ограничиваясь лишь полями страницы. */
/* ===== Главное меню — «дашборд» по схеме: лента, профиль, описание, разделы, площадки,
   сотрудничество. Прокрутка разрешена (контента больше одного экрана). Нейтральный тёмный
   фон body виден сквозь прозрачную страницу. ===== */
body[data-page="menuPage"] .container { max-width: 1600px; padding-left: 0; padding-right: 0; }
#menuPage.page {
    padding: 18px clamp(12px, 3vw, 36px) 22px;
    background: transparent; border: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; margin-top: 0;
}

/* ===== Фон главной страницы и вкладок профиля (Сводный портрет, Мои результаты,
   Изменение пароля, Настройка уведомлений): звёздное небо во весь экран.
   Файл img/bg-menu.webp отдаётся в исходном разрешении (без пережатия),
   cover + fixed — картинка резкая и не «плывёт» при прокрутке.
   В обеих темах: текст меню уже рассчитан на тёмный фото-фон. ===== */
body[data-page="menuPage"],
body[data-page="portraitPage"],
body[data-page="resultsPage"],
body[data-page="passwordPage"],
body[data-page="notificationsPage"],
body[data-page="pricingPage"],
body[data-page="subscriptionPage"],
body[data-page="mywayPage"],
body[data-page="referralPage"],
body[data-page="communityPage"],
html[data-theme="light"] body[data-page="menuPage"],
html[data-theme="light"] body[data-page="portraitPage"],
html[data-theme="light"] body[data-page="resultsPage"],
html[data-theme="light"] body[data-page="passwordPage"],
html[data-theme="light"] body[data-page="notificationsPage"],
html[data-theme="light"] body[data-page="pricingPage"],
html[data-theme="light"] body[data-page="subscriptionPage"],
html[data-theme="light"] body[data-page="mywayPage"],
html[data-theme="light"] body[data-page="referralPage"],
html[data-theme="light"] body[data-page="communityPage"] {
    background-color: #070910;
    background-image:
        linear-gradient(180deg, rgba(6, 8, 16, 0.08) 0%, rgba(6, 8, 16, 0.36) 100%),
        url('../img/bg-menu.webp?v=2');
    background-position: center top, center top;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
}

/* Сетка: 4 колонки, области — как на схеме пользователя */
.menu-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    grid-template-areas:
        "profile  .       .       ."
        "news     desc    desc    desc"
        ".        psy     num     astro"
        ".        support support support";
    gap: 16px;
    align-items: start;
}
/* .categories — прозрачный контейнер: карточки становятся элементами сетки */
#menuPage .categories { display: contents; }

.menu-news    { grid-area: news; align-self: stretch; }
#menuPage .menu-topbar { grid-area: profile; margin: 0; align-self: start; }
#menuPage .intro-hero  { grid-area: desc; margin: 0; padding: 16px 22px; border-radius: 20px; }
#menuPage .intro-hero__top { margin-bottom: 4px; }
#menuPage .intro-title { font-size: 21px; margin: 2px 0 6px; }
#menuPage .intro-quote { font-size: 13.5px; }
#menuPage .intro-lead  { font-size: 13.5px; line-height: 1.5; margin: 8px 0 0; }
#menuPage .category-card[data-category="psychology"] { grid-area: psy; }
#menuPage .category-card[data-category="numerology"]  { grid-area: num; }
#menuPage .category-card[data-category="astrology"]   { grid-area: astro; }

#menuPage .category-card { min-height: 300px; border-radius: 22px; }
#menuPage .category-card h3 { font-size: 24px; margin-bottom: 8px; }
#menuPage .category-card p { font-size: 14.5px; max-width: 340px; margin: 0 auto; }

/* Стеклянный блок ленты новостей — с тёплым золотым отсветом от чипа-рупора */
.menu-news {
    background:
        radial-gradient(150% 130% at 0% 0%, rgba(240,184,74,0.10), transparent 55%),
        rgba(255,255,255,0.055);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.10); border-radius: 22px; padding: 14px 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    transition: border-color .2s ease;
}
.menu-news:hover { border-color: rgba(var(--color-primary-rgb), 0.30); }
/* Лента новостей всегда раскрыта: шапка — заголовок, а не кнопка (свернуть нельзя) */
.menu-news__head {
    width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    background: none; border: none; padding: 4px 2px; margin: 0;
    color: #fff; text-align: left;
    /* Шапку нельзя сжимать: список (flex:1) тянет высоту, и без flex-shrink:0 шапка
       схлопывается, а золотой значок (38px) обрезается сверху границей .menu-news
       (overflow:hidden). Фиксируем — значок всегда виден целиком. */
    flex: 0 0 auto;
}
.menu-news__label { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
/* Золотой чип с рупором — та же гамма, что заголовок «восход/золото» сайта */
.menu-news__ic {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center; font-size: 15px; color: #2a1a04;
    background: linear-gradient(135deg, #ffe2a4 0%, var(--color-primary) 48%, var(--color-primary-2) 100%);
    box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.35), inset 0 1px 0 rgba(255,255,255,0.55);
    transition: box-shadow .2s ease, transform .2s var(--ease-standard);
}
.menu-news__txt { display: flex; flex-direction: column; gap: 1px; font-weight: 800; font-size: 16px; line-height: 1.15; min-width: 0; }
.menu-news__txt small { font-weight: 500; font-size: 11.5px; color: rgba(238,230,255,0.62); letter-spacing: .2px; }
/* Лента занимает первую колонку от своей строки до низа сетки (клетки под ней пустые —
   Описание и карточки разделов остаются на своих местах). Список внутри листается.
   ВАЖНО: max-height + min-height:0 ограничивают высоту ленты, иначе при большом
   числе новостей она перерастает правую колонку и растягивает строки сетки —
   тогда между hero, карточками и донатом появляются пустоты. С ограничением
   лишний контент листается внутри списка, а строки сетки не раздуваются. */
@media (min-width: 901px) {
    .menu-news {
        grid-area: 2 / 1 / -1 / 2;
        min-height: 0;
        max-height: calc(100vh - 120px);
    }
}
/* Список всегда раскрыт: свернуть ленту нельзя, при переполнении она листается */
.menu-news__list {
    display: flex; flex-direction: column; gap: 12px; padding-right: 4px;
    flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 14px;
}
/* Карточки новостей не сжимаются во flex-колонке — иначе при ограниченной высоте
   ленты они «схлопываются» вместо прокрутки списка. */
.menu-news__list > * { flex-shrink: 0; }
.menu-news__empty { color: #a0a0c0; font-size: 13.5px; text-align: center; padding: 26px 8px; margin: auto 0; }
.news-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; overflow: hidden; }
.news-item__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: rgba(0,0,0,0.2); }
.news-item__body { padding: 11px 13px; }
/* Верхняя строка карточки: слева метка «Реклама/Новость», справа — счётчик просмотров */
.news-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.news-item__badge { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 999px; display: inline-block; }
/* «Глазик» с числом просмотров рекламного блока (тот же показатель, что в отчёте) */
.news-item__views { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
    font-size: 11.5px; font-weight: 600; color: #b7b1cd; font-variant-numeric: tabular-nums; }
.news-item__views svg { width: 14px; height: 14px; display: block; opacity: .85; }
.news-item__views b { font-weight: 700; color: #d8d3ec; }
.news-item__badge--ad { background: rgba(240,184,74,.18); color: #ffd479; border: 1px solid rgba(240,184,74,.35); }
.news-item__badge--post { background: rgba(124,92,255,.18); color: #cdbcff; border: 1px solid rgba(124,92,255,.35); }
.news-item__title { font-weight: 700; font-size: 14.5px; color: #fff; margin: 0 0 5px; }
.news-item__text { font-size: 12.8px; line-height: 1.5; color: #c8c4de; margin: 0; }
.news-item__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12.5px; font-weight: 700; color: #7be3b8; text-decoration: none; }
.news-item__link:hover { text-decoration: underline; }
/* Соцсети — простой список ссылок в футере (без рамок) */
.menu-socials { background: none; border: none; padding: 0; box-shadow: none; }
.menu-socials__links { display: flex; flex-direction: column; gap: 3px; }
.menu-social { display: inline-flex; align-items: center; gap: 9px; padding: 2px 0; text-decoration: none;
    color: #cfcae0; font-size: 13.5px; font-weight: 600; transition: color .15s ease; }
.menu-social:hover { color: #fff; }
.menu-social i { width: 18px; text-align: center; font-size: 15px; }
.menu-social .fa-telegram { color: #2aabee; }
.menu-social .fa-vk { color: #6a94c9; } .menu-social .fa-youtube { color: #ff3d3d; } .menu-social .fa-tiktok { color: #fff; }
/* Сотрудничество — небольшая кнопка в футере, без рамки-контейнера; ссылка по клику */
.menu-coop { background: none; border: none; padding: 0; box-shadow: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.menu-coop__btn { padding: 8px 16px; border: none; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 13px; color: #2a1e05;
    background: linear-gradient(135deg, #ffe9b0, rgb(240,184,74) 45%, rgb(224,138,74)); box-shadow: 0 6px 16px rgba(240,184,74,.28);
    display: inline-flex; align-items: center; gap: 8px; }
.menu-coop__btn:hover { filter: brightness(1.05); }
.menu-coop__link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; text-decoration: none;
    background: rgba(42,171,238,.14); border: 1px solid rgba(42,171,238,.35); color: #8fd4f5; font-weight: 700; font-size: 12.5px; }
.menu-coop__link i { color: #2aabee; }
/* Панель сотрудничества: раскрывается по кнопке (оферта/тарифы + менеджер) */
.menu-coop__panel { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.menu-coop__panel[hidden] { display: none; }
.menu-coop__lead { margin: 0 0 2px; font-size: 12px; color: #b9c6d6; text-align: right; max-width: 240px; }
.menu-coop__msg { margin: 0; font-size: 12px; text-align: right; max-width: 260px; line-height: 1.45; }
.menu-coop__msg[hidden] { display: none; }
.menu-coop__link--offer { background: rgba(240,184,74,.14); border-color: rgba(240,184,74,.4); color: #ffd479; }
.menu-coop__link--offer i { color: #ffd479; }
/* Маркировка рекламного блока в ленте (152-ФЗ): рекламодатель + токен ERID */
.news-item--ad { border-color: rgba(240,184,74,.28); }
.news-item__mark { margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.12);
    display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; line-height: 1.4; color: #9a94ad; }
.news-item__advertiser, .news-item__erid { display: inline-block; }
.news-item__erid { font-variant-numeric: tabular-nums; opacity: .8; }

@media (max-width: 900px) {
    .menu-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "profile profile"
            "news    news"
            "desc    desc"
            "psy     num"
            "astro   astro"
            "support support";
    }
    /* На узких экранах донат во всю ширину — баннер тоже занимает все колонки */
    .verify-banner { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .menu-grid { grid-template-columns: 1fr; grid-template-areas: "profile" "news" "desc" "psy" "num" "astro" "support"; }
    #menuPage .category-card { min-height: 240px; }
}

/* =========================================================
   Уведомления: toast-карточки (правый нижний угол)
   и страница «Настройка уведомлений»
   ========================================================= */

.toast-root {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: min(380px, calc(100vw - 32px));
    pointer-events: none;                 /* клики проходят мимо пустой области */
}

/* Карточка в стиле панели профиля: тёмное стекло, скругление, иконка-плитка */
.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 16px;
    border-radius: 18px;
    background: rgba(26, 22, 40, 0.92);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    color: #ece8f6;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition: opacity .3s var(--ease-standard), transform .3s var(--ease-standard);
}

.app-toast.is-shown {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.app-toast__icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-top: 2px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #b98cff, #8b5cf0);
    color: #fff;
    font-size: 15px;
}

.app-toast__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.app-toast__title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
}

.app-toast__text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(236, 232, 246, 0.78);
}

.app-toast__action {
    align-self: flex-start;
    margin-top: 6px;
    padding: 7px 13px;
    border: none;
    border-radius: 10px;
    background: rgba(var(--color-primary-rgb), 0.22);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s var(--ease-standard);
}

.app-toast__action:hover { background: rgba(var(--color-primary-rgb), 0.34); }

.app-toast__close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.app-toast__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Страница настроек уведомлений: цветные плитки каналов */
.notify-icon--master { background: linear-gradient(135deg, #b98cff, #8b5cf0) !important; color: #fff !important; }
.notify-icon--inapp  { background: linear-gradient(135deg, #38d39f, #1fa87c) !important; color: #fff !important; }
.notify-icon--push   { background: linear-gradient(135deg, #ffd76a, #f0a23c) !important; color: #fff !important; }
.notify-icon--email  { background: linear-gradient(135deg, #5b8cff, #3a63e0) !important; color: #fff !important; }

/* Мастер-тумблер выключен — каналы визуально гаснут и не реагируют */
#notifyChannelsGroup.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.4);
}

/* Иконка пункта «Настройка уведомлений» в панели профиля */
.profile-panel #openNotifyBtn .menu-row__icon { background: linear-gradient(135deg, #ff8ab3, #e05c8a); }

@media (max-width: 560px) {
    .toast-root { right: 10px; bottom: 10px; left: 10px; max-width: none; }
}

/* =========================================================
   Вариант сайта: «Бесплатный, для рекламы» (админка → Вариант сайта).
   App выставляет body[data-site-mode="free"] — прячем всё, что
   связано с подписками: кнопки профиля и золотые коронки.
   ========================================================= */
body[data-site-mode="free"] #openPricingBtn,
body[data-site-mode="free"] #openSubscriptionBtn { display: none !important; }

body[data-site-mode="free"] .astro-tab__crown,
body[data-site-mode="free"] .nh-tab-crown,
body[data-site-mode="free"] .psyb-pro,
body[data-site-mode="free"] .psy-tab .fa-crown,
body[data-site-mode="free"] .pf-teaser-title .fa-crown,
body[data-site-mode="free"] .pf-teaser-btn .fa-crown,
body[data-site-mode="free"] .fm-teaser-title .fa-crown,
body[data-site-mode="free"] .fm-teaser-btn .fa-crown,
body[data-site-mode="free"] .nh-teaser-title .fa-crown,
body[data-site-mode="free"] .nh-teaser-btn .fa-crown { display: none !important; }

/* =========================================================
   Пользователь с активной подпиской: прячем золотые короны
   в тех разделах, к которым у него уже есть доступ.
   App выставляет body[data-acc-<раздел>="1"] по App.hasAccess().
   ========================================================= */
body[data-acc-psychology="1"] .psy-tab .fa-crown,
body[data-acc-psychology="1"] .psy-grid .paid-crown,
body[data-acc-psychology="1"] .psyb-pro { display: none !important; }

body[data-acc-astrology="1"] .astro-tab__crown { display: none !important; }

body[data-acc-numerology="1"] .nh-tab-crown,
body[data-acc-numerology="1"] .nh-teaser-title .fa-crown,
body[data-acc-numerology="1"] .nh-teaser-btn .fa-crown { display: none !important; }

/* Прайм-функции (Сводный портрет, кросс-анализ) */
body[data-acc-prime="1"] .psy-portrait-cta__btn .paid-crown,
body[data-acc-prime="1"] .pf-teaser-title .fa-crown,
body[data-acc-prime="1"] .pf-teaser-btn .fa-crown,
body[data-acc-prime="1"] .fm-teaser-title .fa-crown,
body[data-acc-prime="1"] .fm-teaser-btn .fa-crown { display: none !important; }

/* Кнопка «Отключить подписку» на странице управления подпиской */
.sub-cancel-row .menu-row__icon { background: linear-gradient(135deg, #ff8a8a, #d94f4f); color: #fff; }
#cancelSubNote { margin: 10px 2px 0; }

/* =========================================================
   Платные функции: универсальная золотая коронка и тизер
   «функция в подписке» (используются во всех разделах).
   В бесплатном варианте сайта короны скрываются.
   ========================================================= */
.paid-crown { color: #f0b84a; font-size: 0.72em; vertical-align: super; margin-left: 5px; }
button .paid-crown, h4 .paid-crown, h5 .paid-crown { display: inline-block; }
body[data-site-mode="free"] .paid-crown { display: none !important; }

/* Тизер платной функции: карточка с описанием + кнопка в тарифы */
.sec-teaser {
    margin: 14px 0;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(165deg, rgba(240,184,74,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(240,184,74,0.35);
}
.sec-teaser-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 16px; font-weight: 800; color: #f0b84a; margin-bottom: 9px;
}
.sec-teaser-lead { font-size: 13.5px; line-height: 1.55; opacity: .9; margin: 0 0 10px; }
.sec-teaser-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sec-teaser-list li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.45; }
.sec-teaser-list li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 0; top: 2px; font-size: 11px; color: #f0b84a;
}
.sec-teaser-cta { font-size: 13px; font-weight: 700; margin: 0 0 12px; }
.sec-teaser-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px; border: none; border-radius: 999px; cursor: pointer;
    font-size: 14px; font-weight: 700; color: #2a1e05;
    background: linear-gradient(135deg, #ffe9b0, #f0b84a 60%, #e09b2d);
    box-shadow: 0 10px 24px rgba(240,184,74,0.3);
    transition: filter .18s ease, transform .18s ease;
}
.sec-teaser-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Атрибут hidden должен побеждать display, заданный классами схемы здоровья */
.nh-legend[hidden], .nh-pentagram[hidden], .nh-organ-card[hidden] { display: none !important; }

/* =========================================================
   Функции «в разработке» (бесплатный сайт):
   красный значок-инструменты, полоса доната, модалки поддержки
   ========================================================= */

/* Сброс глобального стиля button (width:100%, стекло, блик) для новых элементов */
.support-strip__btn, .frozen-stub, .df-close, .df-btn, .df-amount, .df-method {
    width: auto; margin-top: 0; overflow: visible;
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
    font-size: 14px; letter-spacing: 0;
}
.support-strip__btn::before, .frozen-stub::before, .df-close::before,
.df-btn::before, .df-amount::before, .df-method::before { display: none; }

/* Значок «в разработке»: отвёртка накрест с гаечным ключом, красный */
.frozen-badge {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: 7px; font-size: 0.82em; color: #ff5a5a;
    filter: drop-shadow(0 1px 4px rgba(255, 90, 90, 0.45));
    vertical-align: baseline;
}
.is-frozen { opacity: 0.92; }

/* Заглушка вместо замороженного графика (нумерология) */
.frozen-stub {
    display: inline-flex; align-items: center; gap: 10px;
    margin: 8px 0; padding: 13px 20px; border-radius: 14px; cursor: pointer;
    background: rgba(255, 90, 90, 0.10); border: 1px dashed rgba(255, 90, 90, 0.5);
    color: #ff9c9c; font-size: 13.5px; font-weight: 700;
    transition: background .18s ease;
}
.frozen-stub:hover { background: rgba(255, 90, 90, 0.18); }
.frozen-stub i { color: #ff5a5a; }

/* --- Полоса доната на главной (только бесплатный сайт) --- */
.support-strip {
    grid-area: support;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 20px; border-radius: 18px;
    background: linear-gradient(165deg, rgba(255, 122, 122, 0.13), rgba(255, 255, 255, 0.045));
    border: 1px solid rgba(255, 122, 122, 0.32);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body[data-site-mode="paid"] .support-strip { display: none; }
.support-strip__text {
    display: flex; align-items: center; gap: 12px;
    font-size: 13.5px; line-height: 1.45; font-weight: 600; color: #f3e9ea;
}
.support-strip__text .fa-heart { color: #ff7a7a; font-size: 17px; flex: 0 0 auto; }
.support-strip__btn {
    flex: 0 0 auto; width: auto; padding: 11px 26px; border: none; border-radius: 999px; cursor: pointer;
    font-size: 14px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, #ff9a76, #ff5a5a 60%, #d94f4f);
    box-shadow: 0 10px 24px rgba(255, 90, 90, 0.32);
    transition: filter .18s ease, transform .18s ease;
}
.support-strip__btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
@media (max-width: 640px) {
    .support-strip { flex-direction: column; text-align: center; }
}
html[data-theme="light"] .support-strip { background: linear-gradient(165deg, rgba(255,122,122,0.16), rgba(255,255,255,0.5)); }

/* --- Модалки DevFeatures (overlay поверх всего) ---
   Окно по центру экрана, высота — по содержимому, но не выше экрана
   (max-height: 100dvh минус небольшие поля). Страница под ним заблокирована
   (df-no-scroll); если контент всё же длиннее экрана, он листается внутри окна
   тонким стилизованным скроллбаром — системной серой полосы нет. */
.df-overlay {
    position: fixed; inset: 0; z-index: 1500; display: none;
    align-items: center; justify-content: center; padding: 14px;
    background: rgba(10, 8, 20, 0.66);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.df-overlay.is-open { display: flex; }
body.df-no-scroll { overflow: hidden; }

.df-modal {
    position: relative; width: min(600px, 100%);
    height: auto; max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px);
    overflow-y: auto; padding: 22px 24px 20px; border-radius: 22px;
    background: rgba(26, 22, 40, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    color: #ece8f6;
    animation: dfModalIn .28s var(--ease-standard);
}
.df-modal::-webkit-scrollbar { width: 8px; }
.df-modal::-webkit-scrollbar-track { background: transparent; }
.df-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18); border-radius: 999px;
    border: 2px solid rgba(26, 22, 40, 0.97); background-clip: padding-box;
}
.df-modal::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.30); background-clip: padding-box; border: 2px solid rgba(26, 22, 40, 0.97); }
.df-modal { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent; }
html[data-theme="light"] .df-modal { scrollbar-color: rgba(0,0,0,0.28) transparent; }
html[data-theme="light"] .df-modal::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22); border-color: rgba(255, 255, 255, 0.97);
}

@keyframes dfModalIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
html[data-theme="light"] .df-modal { background: rgba(255, 255, 255, 0.97); color: #2b2438; border-color: rgba(0,0,0,0.1); }

/* Единый стандарт крестика закрытия: круг 34px, правый верхний угол 14/14 */
.df-close {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; margin: 0; padding: 0; line-height: 1;
    background: rgba(255, 255, 255, 0.08); color: inherit; font-size: 15px;
}
.df-close:hover { background: rgba(255, 255, 255, 0.18); }
html[data-theme="light"] .df-close { background: rgba(0,0,0,0.06); }

.df-frozen-icon {
    width: 64px; height: 64px; margin: 2px auto 14px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; font-size: 27px;
    background: rgba(255, 90, 90, 0.13); color: #ff5a5a;
    border: 1px solid rgba(255, 90, 90, 0.4);
}
.df-frozen-icon--ok { background: rgba(80, 200, 130, 0.13); color: #57d69a; border-color: rgba(80, 200, 130, 0.4); }

.df-title { text-align: center; font-size: 19px; margin: 0 0 10px; }
.df-heart { color: #ff7a7a; margin-right: 4px; }
.df-lead { text-align: center; font-size: 13.5px; line-height: 1.55; opacity: .88; margin: 0 0 12px; }
.df-desc { font-size: 13px; line-height: 1.5; opacity: .75; text-align: center; margin: 0 0 10px; }
.df-hint { font-size: 12.5px; line-height: 1.5; opacity: .68; text-align: center; margin: 10px 0 14px; }

.df-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 13px 22px; border: none; border-radius: 999px; cursor: pointer;
    font-size: 14.5px; font-weight: 800; transition: filter .18s ease, transform .18s ease;
}
.df-btn--primary {
    color: #fff; background: linear-gradient(135deg, #ff9a76, #ff5a5a 60%, #d94f4f);
    box-shadow: 0 10px 24px rgba(255, 90, 90, 0.32);
}
.df-btn--primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.df-btn--primary:disabled { filter: grayscale(.4) brightness(.8); cursor: wait; transform: none; }
.df-btn--ghost { margin-top: 9px; background: none; border: 1px solid rgba(255,255,255,0.22); color: inherit; font-weight: 600; }
.df-btn--ghost:hover { background: rgba(255,255,255,0.07); }
html[data-theme="light"] .df-btn--ghost { border-color: rgba(0,0,0,0.18); }

/* Список голосования */
.df-list { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; }
.df-group-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; opacity: .55; margin: 8px 0 5px; }
.df-group:first-child .df-group-title { margin-top: 0; }
.df-item {
    display: flex; align-items: center; gap: 12px; padding: 7px 12px;
    border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background .15s ease;
}
.df-item:hover { background: rgba(255, 255, 255, 0.09); }
html[data-theme="light"] .df-item { background: rgba(0,0,0,0.035); border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .df-item:hover { background: rgba(0,0,0,0.07); }
.df-check { flex: 0 0 auto; width: 17px; height: 17px; accent-color: #ff5a5a; cursor: pointer; }
.df-item-body { flex: 1 1 auto; min-width: 0; }
.df-item-title { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.df-bar { display: block; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
html[data-theme="light"] .df-bar { background: rgba(0,0,0,0.1); }
.df-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff9a76, #ff5a5a); transition: width .4s ease; }
.df-pct { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: #ff9c9c; min-width: 36px; text-align: right; }

.df-message {
    width: 100%; padding: 11px 13px; border-radius: 12px; resize: vertical;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    color: inherit; font-size: 13px; line-height: 1.5; font-family: var(--font-body);
}
.df-message::placeholder { color: inherit; opacity: .45; }
html[data-theme="light"] .df-message { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); }

/* Экран оплаты: якорные суммы + способ */
.df-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 10px; }
.df-amount {
    padding: 12px 6px; border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14);
    color: inherit; font-size: 14px; font-weight: 800; transition: all .15s ease;
}
.df-amount:hover { background: rgba(255, 255, 255, 0.1); }
.df-amount.is-active {
    background: linear-gradient(135deg, rgba(255, 154, 118, 0.25), rgba(255, 90, 90, 0.25));
    border-color: #ff5a5a; color: #ffb3a6;
}
html[data-theme="light"] .df-amount { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
html[data-theme="light"] .df-amount.is-active { color: #d94f4f; }
.df-custom input {
    width: 100%; padding: 11px 13px; border-radius: 12px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
    color: inherit; font-size: 14px; font-weight: 600;
}
html[data-theme="light"] .df-custom input { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.14); }
.df-custom input.is-invalid { border-color: #ff5a5a; box-shadow: 0 0 0 2px rgba(255, 90, 90, 0.16); }
.df-error {
    margin: 7px 2px 0; font-size: 12.5px; line-height: 1.4; color: #ffb3a6;
}
html[data-theme="light"] .df-error { color: #d94f4f; }
.df-btn--primary:disabled { opacity: .5; cursor: not-allowed; filter: saturate(.6); }

.df-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 14px; }
.df-method {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 11px 8px; border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14);
    color: inherit; transition: all .15s ease;
}
.df-method.is-active { border-color: #57d69a; background: rgba(80, 200, 130, 0.12); }
.df-method-name { font-size: 14px; font-weight: 800; }
.df-method-note { font-size: 11px; opacity: .6; }
html[data-theme="light"] .df-method { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); }
html[data-theme="light"] .df-method.is-active { background: rgba(80,200,130,0.14); border-color: #2fa06c; }

/* Итог после «оплаты»: как распределились голоса */
.df-voted { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.df-voted-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 13px; border-radius: 10px; font-size: 13px;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09);
}
.df-voted-row b { color: #ff9c9c; }
html[data-theme="light"] .df-voted-row { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }

/* ===== Вложенная страница категории: не дублировать рамку =====
   Роутер рендерит #<category>Page.page ВНУТРЬ #categoryContainer, который сам .page.
   Из-за этого стеклянная подложка, рамка и отступы применялись дважды: на мобильном
   это съедало лишние 40px ширины, колонка сжималась до ~180px и плитки тестов
   вылезали за карточку. Внешняя .page остаётся оформленной, внутренняя — прозрачная. */
.page .page,
html[data-theme="light"] .page .page {
    padding: 0;
    margin-top: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* В разделах рамка #categoryContainer прозрачная (её гасят модули категорий),
   поэтому её боковые отступы на телефоне — просто потерянная ширина. */
@media (max-width: 600px) {
    body[data-section] #categoryContainer.page {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ===== Баннер согласия на cookie (раздел 5 Политики использования cookie) ===== */
.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 4000;
    padding: 0 12px max(12px, env(safe-area-inset-bottom));
    transform: translateY(120%);
    opacity: 0;
    transition: transform .28s var(--ease-standard, ease), opacity .28s var(--ease-standard, ease);
    pointer-events: none;
}
.cookie-banner.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }

.cookie-banner__box {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: rgba(18, 26, 30, 0.96);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(127, 227, 184, 0.22);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.cookie-banner__tx { flex: 1 1 320px; min-width: 0; }
.cookie-banner__title { font-weight: 800; color: #f1f7f5; font-size: 15.5px; margin-bottom: 4px; }
.cookie-banner__p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #c3d4cf; }
.cookie-banner__p a { color: #7be3b8; }

.cookie-banner__btns { display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
.cookie-banner__btn {
    font: inherit; font-size: 13.5px; font-weight: 700;
    border-radius: 12px; padding: 11px 18px; cursor: pointer;
    border: 1px solid transparent; white-space: nowrap;
    transition: filter .18s ease, border-color .18s ease, background-color .18s ease;
}
.cookie-banner__btn--ghost {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
    color: #dfe9e6;
}
.cookie-banner__btn--ghost:hover { border-color: rgba(127, 227, 184, 0.5); }
.cookie-banner__btn--main {
    background: linear-gradient(135deg, #2fa877, #1c6f4f);
    color: #eafff5;
}
.cookie-banner__btn--main:hover { filter: brightness(1.08); }

html[data-theme="light"] .cookie-banner__box {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(29, 158, 117, 0.3);
}
html[data-theme="light"] .cookie-banner__title { color: #12201b; }
html[data-theme="light"] .cookie-banner__p { color: #3c4f49; }
html[data-theme="light"] .cookie-banner__btn--ghost { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.14); color: #1c2b26; }

@media (max-width: 600px) {
    .cookie-banner { padding: 0 8px max(8px, env(safe-area-inset-bottom)); }
    .cookie-banner__box { padding: 12px 13px; gap: 10px; border-radius: 16px; }
    .cookie-banner__title { font-size: 14.5px; }
    .cookie-banner__p { font-size: 12.5px; line-height: 1.45; }
    .cookie-banner__btns { width: 100%; gap: 8px; }
    .cookie-banner__btn { flex: 1 1 0; text-align: center; padding: 11px 8px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .cookie-banner { transition: none; }
}

/* ===== Кнопка «показать пароль» (js/password-eye.js) ===== */
.pw-wrap {
    position: relative;
    display: block;
}
/* Освобождаем место под кнопку, чтобы длинный пароль не уходил под неё */
.pw-wrap input {
    padding-right: 48px;
}
/* Селектор с .pw-wrap и явные сбросы — глобальное правило button задаёт
   этим кнопкам margin, стеклянный фон и размытие, их нужно перебить.
   Центрируем через top/bottom, а не translateY: transform у кнопок тоже переопределяется. */
.pw-wrap .pw-eye {
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 6px;
    width: 38px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    transform: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}
.pw-wrap .pw-eye:hover { color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.08); transform: none; }
.pw-wrap .pw-eye:active { transform: none; }
.pw-wrap .pw-eye:focus-visible { outline: 2px solid #4fd6a0; outline-offset: 2px; }
.pw-wrap .pw-eye svg { display: block; }

html[data-theme="light"] .pw-wrap .pw-eye { color: rgba(0, 0, 0, 0.45); }
html[data-theme="light"] .pw-wrap .pw-eye:hover { color: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.05); }