/* SoulMates WebApp — consolidated stylesheet.
   Historical layers are merged in their former load order so the computed cascade stays identical.
   Future edits should be made in this file instead of creating v5/v6 override files. */

/* ==================== BASE (formerly app.css) ==================== */
/*
 * Оформление веб-версии. Мобильное по умолчанию: лента и чат остаются
 * колонкой телефонной ширины даже на большом экране — растянутая на весь
 * монитор карточка со свайпом читается плохо и мышью не листается.
 */

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {

    font-size: var(--text-body);

    -webkit-font-smoothing: antialiased;
}

#app::before {
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;

}

.column {
    width: 100%;

    margin: 0 auto;

}

/*
 * Экран, у которого содержимого меньше высоты окна: вход, регистрация,
 * пустые состояния. На телефоне разницы нет, а на большом мониторе
 * колонка иначе жмётся к верхнему краю, и под ней остаётся поле пустого
 * фона в половину экрана.
 *
 * dvh, а не vh: на мобильных браузерах адресная строка съезжает, и vh
 * считается от высоты без неё — экран получает лишнюю прокрутку.
 */
.screen-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
}

/* --- Типографика --- */

h1 {
    font-size: var(--text-display);
    line-height: 1.15;
    margin: 0 0 var(--gap-tight);
}

h2 {
    font-size: var(--text-title);
    margin: 0 0 var(--gap-tight);
}

.hint {
    font-size: var(--text-hint);
    color: var(--ink-muted);
    margin: 0;
}

.muted {
    color: var(--ink-muted);
}

/* --- Карточка --- */

.card {
    background: var(--surface-white);
    color: var(--on-white);

    box-shadow: var(--shadow-card);

}

/*
 * Внутри белой карточки цвета переворачиваются: без этого кнопки на
 * белом оказывались белыми. В приложении ту же роль играет OnWhiteSurface.
 */
.card .hint,
.card .muted {
    color: var(--on-white-muted);
}

.card-blue {

    color: var(--on-blue);
    border: 1px solid var(--outline);
    border-radius: var(--radius-card);
    padding: var(--gap);
}

/* --- Поля и кнопки --- */

label {
    display: block;
    font-size: var(--text-hint);
    margin-bottom: 6px;
}

input,
textarea,
select {
    width: 100%;
    padding: 12px 14px;
    font: inherit;

}

.field {
    margin-bottom: var(--gap);
}

/*
 * Основная кнопка — тёмно-синяя, а не терракотовая.
 *
 * Правило палитры звучит так: акцент только для действий, требующих
 * внимания, иначе симпатия перестанет выделяться. Кнопка «Войти»
 * такого внимания не требует — она просто главная на экране, и в
 * терракоте кричала. Акцент остаётся за симпатией и мэтчем
 * (.button-accent ниже).
 */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-tight);
    width: 100%;
    padding: 13px 18px;
    font: inherit;
    font-weight: 600;

    cursor: pointer;
}

.button:disabled {
    opacity: 0.6;
    cursor: default;
}

.button-quiet {

    font-weight: 500;

}

.card .button-quiet {
    color: var(--brand-blue-dark);
}

/* --- Сообщения --- */

.error {
    margin: 0 0 var(--gap);
    padding: 10px 12px;
    font-size: var(--text-hint);

    border-radius: var(--radius-control);
}

.notice {
    margin: 0 0 var(--gap);
    padding: 10px 12px;
    font-size: var(--text-hint);

}

/* Снекбар: как в приложении — не перекрывает работу, уходит сам. */
#toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 10;
    display: none;
    transform: translateX(-50%);
    max-width: calc(var(--column) - 2 * var(--gap));
    padding: 12px 16px;
    font-size: var(--text-hint);

    border-radius: var(--radius-control);
    box-shadow: var(--shadow-card);
}

#toast[data-open="true"] {
    display: block;
}

#toast button {
    margin-left: 12px;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--brand-amber);
    background: none;
    border: 0;
    cursor: pointer;
}

/* --- Загрузка --- */

/* «Загружаем…» — всегда ровно по центру окна (решение владельца
   24 сентября 2026). Раньше это был блок высотой 60vh там, куда шла
   отрисовка: под шапкой рабочей области, во всём окне до оболочки,
   в колонке — и надпись каждый раз стояла в другом месте. Закреплена
   поверх всего и не мешает нажатиям: панель навигации под ней работает. */
.loader {
    position: fixed !important;
    inset: 0;
    z-index: 60 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    margin: 0;
    color: var(--ink-muted);
    font-size: 15px;
    pointer-events: none;
}

/* --- Шапка --- */

.topbar {
    display: flex;
    align-items: center;
    gap: var(--gap-tight);

}

.topbar h2 {
    flex: 1;
    margin: 0;

}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 20px;

    border-radius: var(--radius-pill);
    cursor: pointer;
}

/* Векторный шеврон вместо символа «‹»: у типографского знака в
   большинстве шрифтов оптический центр сдвинут в сторону, и кнопка
   назад выглядит нецентрированной, как бы её ни выравнивать. */
.topbar-back-icon { width: 18px; height: 18px; flex: none; transform: rotate(90deg); }
.topbar-back-icon svg { width: 100%; height: 100%; }

/* Виджет капчи центрируем: своей вёрстки у него нет. */
/* Ссылки берут цвет окружающего текста, а не браузерный синий.
   Наследование, а не своя краска: ссылки живут в двух разных местах —
   светлым по голубому в подвале стартовой и тёмным по белому внутри
   карточек, — и один цвет не годится ни для одного из них. Отличает
   ссылку подчёркивание, и этого достаточно. */
a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.captcha {
    display: flex;
    justify-content: center;
    margin-bottom: var(--gap);
}

/* --- Постоянный слой: навигация и содержимое -------------------------
 *
 * Навигация создаётся один раз и не перерисовывается при переходах —
 * меняется только .view. На телефоне она внизу, на большом экране
 * становится узкой колонкой слева: там нижняя панель во всю ширину
 * монитора выглядит нелепо и уводит взгляд от содержимого.
 */

.shell {

    flex-direction: column;

}

/* Полоска состояния учётной записи над содержимым: почта не
   подтверждена, пароль не задан. Не тревожная, а поясняющая — красная
   плашка в начале знакомства говорит «здесь опасно», а это неправда. */
.shell-notice {

    font-size: var(--text-hint);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: center;
    text-align: center;
}

.shell-notice > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

/* Галочка согласия: сам чекбокс не должен растягиваться на строку,
   а текст обязан переноситься рядом с ним, а не под ним. */
.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    line-height: 1.4;
}

.consent input {
    width: auto;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.nav {

    flex: none;
    /* На телефоне навигация внизу, под содержимым — большой палец
       дотягивается только туда. В разметке она идёт первой, чтобы
       программы чтения с экрана называли разделы до содержимого. */

}

.nav-item {

    font: inherit;
    font-size: var(--text-label);

}

.nav-mark {

    font-size: 18px;
}

/* Отметка непрочитанного: цифра на значке раздела. */
.nav-badge {
    position: absolute;

    font-size: 11px;

    border-radius: var(--radius-pill);
}

/* =====================================================================
 * Большие экраны
 *
 * Телефон остаётся главным: приложения для знакомств листают с него.
 * Но окно смартфона посреди двухкилопиксельного монитора — это не
 * «мобильный подход», а недоделка, и разделы, которым ширина полезна,
 * её получают.
 *
 * Лента исключение и остаётся узкой: карточка со свайпом на всю ширину
 * не читается, а фотография 3:4 растянутая до метра превращается
 * в постер.
 * ===================================================================== */

@media (min-width: 900px) {
    .column {
        max-width: 620px;
    }

    /* Навигация остаётся внизу и на большом экране, но не тянется
       во всю ширину монитора: полоса на два километра читается как
       подвал сайта, а не как панель приложения. */
    .nav {
        width: 100%;
        max-width: 620px;

        border-radius: var(--radius-card);
    }

    .landing-mark {
        width: 240px;
    }

    .landing-hero h1 {
        font-size: 52px;
    }

    .landing-lead {
        font-size: 22px;
    }

    .landing-actions {

        justify-content: center;

    }

    /* Три отличия в ряд: на широком экране столбик из карточек
       заставляет прокручивать там, где всё помещается сразу. */
    .landing .landing-points {
        display: grid;
        /* minmax(0, 1fr), а не 1fr: иначе длинный текст растягивает
           свою колонку, и карточки получаются разной ширины.
           auto-fit вместо жёсткой тройки: доводов стало четыре
           (добавилась дружба), и на узком мониторе они сами
           переносятся, а не сжимаются в нечитаемые столбики. */
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--gap);
        align-items: start;
        max-width: 1180px;
        /* Не 100dvh: секция во всю высоту оставляет на мониторе провал
           в треть экрана под содержимым. Приём «один экран — одна
           мысль» рассчитан на телефон, где высота 700-900 px. */
        min-height: auto;
        align-content: center;
    }

    .landing-points .card {
        margin-bottom: 0;
        height: 100%;
    }
}

/* --- Переписка на большом экране --------------------------------------
 *
 * Две панели, а с 1240 px — три: список, разговор и колонка совпадений.
 * Третья и есть отличие: в любом мессенджере справа либо пусто, либо
 * ещё один список, а у нас там то, ради чего эти двое встретились.
 */

.messenger {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);

}

.pane-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(16, 27, 42, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.pane-title {
    margin: 0;

}

.chats-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 8px 8px;
}

.chat-row {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 6px;
    font: inherit;
    color: var(--on-blue);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    cursor: pointer;
}

.chat-row:hover {
    background: rgba(255, 255, 255, 0.1);
}

.chat-row-active {
    background: rgba(255, 255, 255, 0.18);
}

.chat-avatar {
    width: 48px;
    height: 48px;
    flex: none;
    object-fit: cover;
    border-radius: 50%;
}

.chat-avatar-empty {
    background: rgba(255, 255, 255, 0.25);
}

.unread {
    padding: 2px 8px;
    font-size: 12px;
    color: #fff;
    background: var(--brand-accent);
    border-radius: var(--radius-pill);
}

.conversation-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap-wide);
}

.rail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;

    background: rgba(16, 27, 42, 0.18);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.rail-photo {

    object-fit: cover;

}

.rail-photo-empty {
    background: rgba(255, 255, 255, 0.25);
}

/* На телефоне список остаётся простым: карточки, как было. */
@media (max-width: 899px) {
    .chat-row {

        box-shadow: var(--shadow-card);
        border-radius: var(--radius-card);
        margin-bottom: 10px;
        padding: 12px;
    }
}

/* --- Летящий тупик ----------------------------------------------------
 *
 * Живёт в свободных полях по краям колонки и движется ровно настолько,
 * насколько человек двигает курсор или крутит колесо. Слой позади
 * содержимого: пролетая за карточкой, птица скрывается и не спорит
 * с текстом.
 */

.flight {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.flight-bird {
    position: absolute;
    top: 0;
    left: 0;

}

/* Содержимое и навигация — над птицей. */
.view,
.nav {
    position: relative;
    z-index: 1;
}

/* Переключатель птицы: висит в углу, помнит выбор, ничего не заслоняет.
   Выключенное состояние показываем блёклостью, а не другим значком —
   человек должен узнавать в кнопке ту же птицу. */
.flight-toggle {

    top: 14px;
    right: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

/* --- Выбор кадра фотографии ---------------------------------------- */

.focus-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;

}

.focus-sheet {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: 100%;
    padding: 18px;
    background: var(--brand-blue);
    border-radius: var(--radius-card);
}

/* Снимок показывается целиком: рамки лежат поверх него, а не режут его. */
.focus-stage {
    position: relative;
    flex: 1;
    min-height: 240px;
    margin: 14px 0;
    overflow: hidden;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
}
.focus-stage.is-dragging { cursor: grabbing; }

.focus-stage img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.focus-frame,
.focus-circle {
    position: absolute;
    pointer-events: none;
    border: 2px solid #fff;
}

.focus-frame {
    box-shadow: 0 0 0 9999px rgba(16, 27, 42, 0.45);
}

.focus-circle {
    border-radius: 50%;
}

.focus-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* У Safari высота процентной картинки внутри flex-блока с `max-height`
 * могла остаться неопределённой: фотография выглядела как случайно
 * обрезанный кадр, а жест попадал не в ту геометрию. На телефоне сцена
 * получает явную высоту от видимой области, а лист при необходимости
 * прокручивается целиком. */
@media (max-width: 800px) {
    .focus-overlay {
        align-items: center;
        padding:
            max(8px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }

    .focus-sheet {

        max-height: calc(100dvh - 16px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .focus-stage {
        flex: 0 0 auto;
        width: 100%;
        height: clamp(260px, 46dvh, 430px);
        min-height: 0;
    }
}

/* ---------------------------------------------------------------------
 * Рекомендации и мероприятия
 *
 * Оформление повторяет приложение, а не изобретает своё: те же белые
 * карточки на голубом, тот же тёмно-синий у главной кнопки. Акцент
 * здесь не используется вовсе — он оставлен симпатии и мэтчу, и если
 * красить им всё подряд, симпатия перестанет выделяться.
 * ------------------------------------------------------------------ */

/* Переключатель половин раздела. Не вкладки: обе половины работают
   от одного и того же — от списка отмеченных интересов. */
.switch {
    display: flex;

}

.switch-item {
    flex: 1;
    padding: 9px 12px;
    font: inherit;
    font-weight: 600;

    background: transparent;
    border: 0;

    cursor: pointer;
}

.pane-body {

    flex-direction: column;

}

/* Фильтр по датам и выбранные связи. Строка прокручивается вбок,
   а не переносится: перенос менял бы высоту экрана при каждом выборе. */
.chips {
    display: flex;
    flex-wrap: wrap;

}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font: inherit;
    font-size: 14px;

    border: 1px solid var(--outline);

    cursor: pointer;
}

.chip-active {
    color: var(--on-white);
    background: var(--surface-white);
    border-color: transparent;
}

.chip:disabled {
    opacity: 0.5;
    cursor: default;
}

.chip-remove {
    display: inline-grid;
    place-items: center;
    padding: 0;
    font: inherit;
    line-height: 1;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}
.chip-remove .ui-icon { width: 14px; height: 14px; }

.card .chip {
    color: var(--on-white);
    background: var(--mist);
    border-color: var(--outline);
}

.card .chip-active {
    color: var(--on-blue);
    background: var(--brand-blue-dark);
}

/* Состояние события. «Нужно поправить» и «отклонено» — разные вещи:
   первое ждёт действия, второе окончательно. */
.badge {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-pill);

}

/* Подсказка: обложка, название, процент и два действия. */
.tip-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-tight);
    margin-top: var(--gap-tight);
}

.tip {
    display: flex;
    align-items: center;
    gap: var(--gap-tight);
}

.tip-cover {
    flex: 0 0 auto;
    width: 44px;
    height: 62px;
    object-fit: cover;

    background: var(--mist);
}

.tip-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-white-muted);
}

.tip-body { flex: 1 1 auto; min-width: 0; }

.tip-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tip-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.button-small {
    width: auto;
    padding: 8px 14px;
    font-size: 14px;
}

/* Строка со своим действием справа: сохранённое и свои мероприятия. */
.card-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-tight);
}

/* Карточка события. Обложка во всю ширину — как у афиши; у событий
   от людей на её месте заглушка той же высоты, иначе карточка человека
   выходит заметно беднее соседней. */
.event { padding: 0;  }

.event-cover {
    display: block;
    width: 100%;

    object-fit: cover;
    background: var(--mist);
}

.event-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    color: rgba(255, 255, 255, .75);

}

.event-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--gap-wide);
}

.event-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-tight);
}

.event-title { margin: 0; }

.event-reason {
    font-size: 14px;
    color: var(--on-white-muted);
}

.event-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

/* Ссылка на источник — кнопка, а не строка в подвале: у KudaGo это
   условие использования данных, то есть она обязана быть видна.
   Очерченная, а не залитая: «Хочу посетить» остаётся главным действием. */
.event-source {
    width: auto;
    align-self: flex-start;
    margin-top: 2px;
}

/* Партнёрская ссылка Ticketland: кнопка та же, что у обычного
   источника, плюс обязательная строка маркировки под ней — рядом
   с кнопкой, не в подвале карточки (условия партнёрки, AGENTS.md). */
.event-ticketland {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 2px;
}

.event-disclosure {
    font-size: 12px;
    line-height: 1.4;
}

/* Форма события */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-label {
    font-size: 14px;
    font-weight: 600;
}

.switch-row {
    display: flex;
    align-items: center;
    gap: var(--gap-tight);
    padding: 12px 0;
}

.checklist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.checklist-mark {
    display: inline-block;
    width: 18px;
    text-align: center;
    font-weight: 700;
}

/* Всплывающее окно: жалоба и выбор записи каталога. */
.sheet {
    width: min(520px, calc(100vw - 24px));
    padding: 0;
    color: var(--on-white);
    background: var(--surface-white);
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.sheet-body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-tight);
    padding: var(--gap-wide);
    max-height: 80vh;
    overflow-y: auto;
}

.sheet-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-tight);
}

.sheet-actions .button { width: auto; }

.radio {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pane-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-tight);
    width: 100%;
    padding: 11px 12px;
    font: inherit;
    text-align: left;

    border-radius: var(--radius-control);
    cursor: pointer;
}

/* ---------------------------------------------------------------------
 * Безопасность
 * ------------------------------------------------------------------ */

/* Знак «!» на карточке в ленте. Слева, а не справа: справа над лентой
   висит круглая кнопка настроек подбора, и знак попал бы под неё.
   Свайпу он не мешает — нажатие забирает, перетаскивание отдаёт
   родителю. */
.safety-mark {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    padding: 0;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: rgba(10, 24, 48, .55);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(2px);
}

.safety-mark:hover { background: rgba(10, 24, 48, .75); }

/* Подсказка над началом переписки. Набрана как подсказка, а не как
   предупреждение: красная плашка в начале знакомства говорит «здесь
   опасно» — это неправда и отпугивает сильнее, чем помогает. */
.chat-hint {
    margin: 14px 0;
    padding: 11px 13px;

    border-radius: var(--radius-control);
}

/* Отклик на долгое нажатие: без него жест неотличим от «не сработало»,
   и человек решает, что пожаловаться на сообщение нельзя. */
.bubble-theirs { transition: transform .12s ease; }
.bubble-theirs.pressed { transform: scale(.97); }

.safety-list {
    margin: 8px 0 0;
    padding-left: 20px;
}

.safety-list li { margin-bottom: 6px; }

#app::before {

    background-image: linear-gradient(
        180deg,
        rgba(6, 21, 44, 0.60) 0%,
        rgba(8, 29, 57, 0.47) 32%,
        rgba(11, 42, 80, 0.35) 68%,
        rgba(6, 21, 44, 0.56) 100%
    );
}

#app::after {

    top: 0;

}

.landing,
.shell,
.screen-center {
    position: relative;
    z-index: 1;
}

h1,
h2,
h3,
p {
    text-wrap: pretty;
}

h3 {
    margin: 0 0 8px;
    font-size: var(--text-subtitle);
}

.hint,
.muted {
    color: var(--scenic-text-muted);
}

.card,
.card-blue,
.sheet,
.focus-sheet {
    color: var(--scenic-text);
    background: var(--scenic-card);
    border: 1px solid rgba(143, 184, 223, 0.34);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(118%);
    -webkit-backdrop-filter: blur(16px) saturate(118%);
}

.card + .card,
.pane-body > .card,
.pane-body > div > .card {
    margin-top: 12px;
}

.card .hint,
.card .muted,
.event-reason {
    color: var(--scenic-text-muted);
}

.card-blue {
    background: rgba(18, 61, 104, 0.78);
}

input,
textarea,
select {

    border-color: rgba(143, 184, 223, 0.48);

}

input::placeholder,
textarea::placeholder {
    color: rgba(202, 216, 232, 0.66);
}

input:focus,
textarea:focus,
select:focus {
    outline-color: var(--scenic-cyan);

}

.button {

    color: var(--scenic-text);

}

.button:hover:not(:disabled) {
    background: #286dbc;

}

.button-accent {

    border-color: rgba(255, 218, 213, 0.34);
}

.button-small {
    min-height: 38px;
}

.notice {
    color: var(--scenic-text);
    background: rgba(18, 61, 104, 0.72);
    border: 1px solid rgba(143, 184, 223, 0.28);
    backdrop-filter: blur(12px);
}

.error {
    color: #ffdad5;
    background: rgba(90, 37, 48, 0.88);
    border: 1px solid rgba(255, 180, 169, 0.42);
}

.topbar {

    margin-bottom: 12px;
}

.topbar h2 {
    color: var(--scenic-text);
    font-weight: 600;
}

.verification-topbar h2 {
    color: #f8fbff;
    background: linear-gradient(100deg, #ffffff 3%, #72ddff 46%, #7db8ff 72%, #b58cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.icon-button {
    color: var(--scenic-text);
    background: rgba(8, 29, 57, 0.72);
    border: 1px solid rgba(143, 184, 223, 0.34);
    backdrop-filter: blur(12px);
}

.icon-button:hover {
    background: rgba(18, 61, 104, 0.90);
}

.shell-notice {

    border-bottom: 1px solid rgba(143, 184, 223, 0.28);
}

.nav-mark {
    line-height: 20px;
}

.landing section {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 100dvh;
    margin: 0 auto;
    padding: 48px 0;
    scroll-snap-align: start;
}

.landing-hero,
.landing-foot {
    align-items: center;
    text-align: center;
}

.landing-mark {

    height: auto;
    margin-bottom: 12px;
    filter: drop-shadow(0 14px 30px rgba(0, 8, 24, 0.42));
    animation: mark-float 5s ease-in-out infinite;
}

.landing-hero h1 {
    margin-bottom: 6px;

    letter-spacing: -0.035em;
}

.landing-lead {
    margin: 0;
    color: var(--scenic-text-muted);

}

.landing-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(100%, 360px);
    margin-top: 28px;
}

.landing-scroll-hint {
    margin: 28px 0 0;
    color: var(--scenic-text-muted);

}

.landing-points {
    gap: 14px;
}

.landing-links {
    margin: 24px 0 0;
    color: var(--scenic-text-muted);
    font-size: var(--text-label);
    line-height: 1.8;
}

.landing .reveal {
    transition: opacity 500ms ease, transform 500ms ease;
}

.landing.animate .reveal {
    opacity: 0;
    transform: translateY(18px);
}

.landing.animate .reveal-shown {
    opacity: 1;
    transform: none;
}

@keyframes mark-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* Рекомендации и мероприятия получают явный воздух под заголовком. */
.switch {
    gap: 6px;

    border: 1px solid rgba(143, 184, 223, 0.30);
    backdrop-filter: blur(14px);
}

.switch-item {

    color: var(--scenic-text-muted);
}

.switch-item-active {
    color: var(--scenic-text);

    box-shadow: inset 0 0 0 1px rgba(115, 210, 255, 0.26);
}

.chip {
    min-height: 38px;
    padding: 7px 13px;
    color: var(--scenic-text-muted);
    background: rgba(8, 29, 57, 0.78);
    border-color: rgba(143, 184, 223, 0.38);
    backdrop-filter: blur(10px);
}

.chip-active,
.card .chip-active {
    color: var(--scenic-text);
    background: #1f5fab;
    border-color: rgba(115, 210, 255, 0.56);
}

.period-summary {
    margin: -2px 2px 2px;
    color: var(--scenic-text-muted);
    font-size: var(--text-label);
}

.event {
    background: rgba(10, 36, 66, 0.94);
}

.event-cover-empty {
    background: linear-gradient(145deg, rgba(31, 95, 171, 0.92), rgba(6, 21, 44, 0.96));
}

.badge {
    color: var(--scenic-text);
    background: rgba(18, 61, 104, 0.90);
}

.badge-ok {
    color: #d9f8e4;
    background: rgba(31, 107, 58, 0.74);
}

.badge-warn {
    color: #fff0d6;
    background: rgba(110, 75, 29, 0.72);
}

.badge-bad {
    color: #ffdad5;
    background: rgba(90, 37, 48, 0.82);
}

.pane-row {
    color: var(--scenic-text);
    background: rgba(18, 61, 104, 0.72);
    border: 1px solid rgba(143, 184, 223, 0.24);
}

.sheet::backdrop {
    background: rgba(3, 12, 30, 0.76);
    backdrop-filter: blur(5px);
}

.sheet-actions {
    flex-wrap: wrap;
}

.pane-list,
.rail {
    background: rgba(6, 21, 44, 0.58);
    backdrop-filter: blur(14px);
}

.chat-row:hover,
.chat-row-active {
    background: rgba(90, 168, 255, 0.16);
}

.chat-avatar-empty,
.rail-photo-empty {
    background: rgba(143, 184, 223, 0.20);
}

.chat-hint {
    background: rgba(18, 61, 104, 0.60);
    border: 1px solid rgba(143, 184, 223, 0.20);
}

.focus-overlay {
    background: rgba(3, 12, 30, 0.82);
    backdrop-filter: blur(8px);
}

#toast {
    color: var(--scenic-text);
    background: rgba(8, 29, 57, 0.96);
    border: 1px solid rgba(143, 184, 223, 0.34);
}

:where(button, a, input, textarea, select):focus-visible {
    outline: 2px solid var(--scenic-cyan);
    outline-offset: 3px;
}

@media (max-width: 899px) {
    .chat-row {
        color: var(--scenic-text);
        background: var(--scenic-card);
        border: 1px solid rgba(143, 184, 223, 0.28);
    }

    .chat-row .hint {
        color: var(--scenic-text-muted);
    }
}

@media (min-width: 900px) {
    .column,
    .topbar,
    .nav {
        max-width: 680px;
    }

    .column-narrow {
        max-width: var(--column);
    }

    .nav {
        margin: 0 auto 12px;
    }

    /* На широком экране секция во всю высоту оставляет провал.
       Приём «один экран — одна мысль» работает на телефоне, где
       высота 700-900 px и пролистывание естественно. На мониторе
       1400 px по высоте под кнопками остаётся пустое поле в треть
       экрана, и страница выглядит недогруженной, а не просторной.
       Поэтому здесь высота по содержимому, а вертикальные поля
       задаются явно. */
    .landing section {

        scroll-snap-align: none;
    }

    .landing {
        scroll-snap-type: none;
    }

    /* Первый экран остаётся высоким: это первое, что видит человек,
       и знак с кнопками должны стоять по центру, а не жаться к верху. */
    .landing .landing-hero {
        max-width: 900px;

        padding-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== V2 COMPATIBILITY (formerly v2.css) ==================== */
/* SoulMates Web v2 — новая браузерная композиция по утверждённому референсу.
   Этот файл подключается последним и намеренно переопределяет старый mobile-first shell. */

:root {
    --v2-bg: #031126;
    --v2-bg-2: #071b37;
    --v2-panel: rgba(7, 27, 55, .82);
    --v2-panel-strong: rgba(7, 27, 55, .94);
    --v2-panel-soft: rgba(17, 50, 91, .54);
    --v2-line: rgba(112, 184, 255, .22);
    --v2-line-strong: rgba(111, 218, 255, .42);
    --v2-cyan: #62d9ff;
    --v2-blue: #2c8cff;
    --v2-blue-2: #1267df;
    --v2-text: #f8fbff;
    --v2-muted: #a9bbd3;
    --v2-orange: #ff783c;
    --v2-orange-2: #ff4f2b;
    --v2-warm: #ffc262;
    --v2-radius-lg: 26px;
    --v2-radius-md: 18px;
    --v2-radius-sm: 13px;
    --v2-shadow: 0 24px 60px rgba(0, 5, 22, .34);
    --v2-sidebar: 246px;
}

html { background: var(--v2-bg); color-scheme: dark; }
body {
    overflow: hidden;
    color: var(--v2-text);

}
button, a, summary { -webkit-tap-highlight-color: transparent; }

/* Все раскрывающиеся плашки используют свою стрелку. Нативный marker
   браузера на один кадр возвращался квадратом при закрытии details —
   особенно заметно на «Ваши компании» в мобильном Web. */
#app summary {
    list-style: none;
}
#app summary::-webkit-details-marker {
    display: none;
}
#app summary::marker {
    content: "";
    font-size: 0;
}
#app summary:focus {
    outline: none;
}
#app summary:focus-visible {
    outline: 2px solid rgba(119, 207, 255, .72);
    outline-offset: 3px;
    border-radius: 14px;
}

#app {
    min-height: 100dvh;
    background:
        linear-gradient(90deg, rgba(2, 10, 26, .28), rgba(3, 18, 42, .05) 38%, rgba(3, 16, 38, .12)),
        url("/assets/project/background-web-ocean-2026.png") center / cover fixed no-repeat;
}
#app::before {
    z-index: 0;

}

.glass-panel,
.card,
.card-blue,
.sheet,
.focus-sheet {
    color: var(--v2-text);
    background: linear-gradient(180deg, rgba(11, 38, 72, .86), rgba(5, 23, 48, .86));
    border: 1px solid var(--v2-line);
    box-shadow: var(--v2-shadow), inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter: blur(22px) saturate(118%);
    -webkit-backdrop-filter: blur(22px) saturate(118%);
}

/* ---------- Shell / navigation ---------- */
.shell {

    display: grid;
    grid-template-columns: var(--v2-sidebar) minmax(0, 1fr);
    gap: 18px;
    height: 100dvh;
    padding: 18px;
}

.shell-workspace {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.view {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 28px;
    scrollbar-width: thin;
    scrollbar-color: rgba(98, 217, 255, .36) transparent;
}

.nav {
    order: initial;
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 18px 14px 14px;

    border: 1px solid rgba(103, 187, 255, .25);
    border-radius: 27px;
    box-shadow: 0 26px 70px rgba(0, 7, 26, .35), inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter: blur(22px) saturate(122%);
    -webkit-backdrop-filter: blur(22px) saturate(122%);
}

.sidebar-brand {
    display: flex;
    align-items: center;

    width: 100%;

    color: inherit;
    background: none;
    border: 0;

    text-align: left;
}
.sidebar-logo {

    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 8, 28, .32));
}
.sidebar-brand-copy { min-width: 0; display: grid; gap: 1px; }
.sidebar-brand-copy strong {  line-height: 1; letter-spacing: -.035em; }
.sidebar-brand-copy small {
    white-space: normal;
    line-height: 1.15;
}

.nav-primary { display: grid; gap: 7px; }
.nav-secondary {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(127, 190, 244, .12);
}
.nav-item {
    position: relative;
    display: flex;
    align-items: center;

    flex: none;
    width: 100%;

    color: rgba(226, 238, 251, .72);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 15px;
    cursor: pointer;
    transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}
.nav-item:hover {
    transform: translateX(2px);
    color: #fff;
    background: rgba(47, 127, 223, .10);
}
.nav-item-active {
    color: #fff;

    box-shadow: inset 0 0 22px rgba(30, 137, 255, .08);
}
.nav-mark {
    position: relative;
    display: grid;
    place-items: center;

    flex: 0 0 25px;
}
.nav-mark svg {

    fill: none;
    stroke: currentColor;

    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-mark svg .fill { fill: currentColor; stroke: none; }
.nav-title { display: block;   }
.nav-badge {
    top: -7px;
    left: 15px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    line-height: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--v2-orange), var(--v2-orange-2));
    border: 2px solid #0a2548;
}
.nav-item-secondary { color: rgba(219, 232, 247, .62); }
.sidebar-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 9px 4px;

    font-size: 13px;

}
.sidebar-note-dot {
    width: 7px;
    height: 7px;
    flex: none;
    margin-top: 3px;
    border-radius: 50%;
    background: #40d695;
    box-shadow: 0 0 12px rgba(64,214,149,.85);
}

.shell-notice {
    position: relative;
    z-index: 4;
    margin-bottom: 9px;
    padding: 9px 13px;
    border: 1px solid rgba(102, 191, 255, .20);
    border-radius: 14px;
    background: rgba(5, 26, 53, .86);
    color: var(--v2-muted);
    box-shadow: none;
}

/* ---------- Shared typography and controls ---------- */
h1, h2, h3 { color: #fff; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--v2-cyan);
    font-size: 14px;
    font-weight: 680;
    letter-spacing: .02em;
    text-transform: none;
}
.eyebrow::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--v2-cyan);
    box-shadow: 0 0 12px var(--v2-cyan);
}

.button {
    min-height: 44px;
    border-radius: 13px;
    border: 1px solid rgba(82, 176, 255, .28);
    background: linear-gradient(180deg, #247fdc, #1763ba);
    box-shadow: 0 10px 24px rgba(5, 68, 145, .22), inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}
.button:hover:not(:disabled) { filter: brightness(1.09); border-color: rgba(101,216,255,.50); }
.button:active:not(:disabled) { transform: translateY(1px) scale(.995); }
.button-quiet,
.card .button-quiet {
    color: var(--v2-text);

    text-decoration: none;
    box-shadow: none;
}
.button-quiet:hover:not(:disabled) { background: rgba(45, 112, 191, .16); }
input, textarea, select {
    min-height: 46px;

}
input:focus, textarea:focus, select:focus {

    border-color: rgba(98, 217, 255, .72);
    box-shadow: 0 0 0 4px rgba(98,217,255,.07);
}

/* ---------- Search / feed ---------- */
.discover-page {
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 26px 24px 42px;
}
.discover-header { margin-bottom: 18px; }
.discover-heading { max-width: 820px; }
.discover-heading h1 {
    margin: 6px 0 8px;
    font-size: clamp(31px, 3vw, 48px);
    line-height: 1.05;
    letter-spacing: -.045em;
    font-weight: 700;
}
.discover-heading p {
    margin: 0;
    color: var(--v2-muted);
    font-size: 14px;
}
.responsive-copy-mobile { display:none; }
.section-page-header { min-width:0; }
.section-page-header h1 {
    margin:6px 0 8px;
    font-size:clamp(31px,3vw,48px);
    line-height:1.05;
    letter-spacing:-.045em;
}
.section-page-header > p,
.section-page-header .responsive-copy {
    max-width:820px;
    margin:0;
    color:var(--v2-muted);
    font-size:14px;
    line-height:1.5;
}
.chats-page,
.messenger-page {
    width:min(100%,1500px);
    margin:0 auto;
    padding:26px 24px 42px;
}
.chats-page-header { margin-bottom:18px; }
.chats-page > .column { max-width:none; padding:0; }
.messenger-page { display:flex; flex-direction:column; height:100%; min-height:0; }
.messenger-page > .messenger { flex:1; width:100%; min-height:0; padding:0; }
.discover-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto auto auto;
    gap: 9px;
    margin-top: 18px;
    max-width: 1030px;
}
.toolbar-pill,
.toolbar-filter-button {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px;
    color: var(--v2-text);
    background: rgba(5, 28, 60, .68);
    border: 1px solid rgba(100, 174, 238, .22);
    border-radius: 14px;
    backdrop-filter: blur(15px);
}
.toolbar-pill span:not(.toolbar-icon) { display: grid; gap: 1px; }
.toolbar-pill small { color: var(--v2-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.toolbar-pill strong { font-size: 12px; font-weight: 600; white-space: nowrap; }
.toolbar-icon {  font-size: 18px; }
.toolbar-filter-button {
    justify-content: center;
    min-width: 112px;
    cursor: pointer;
    font-weight: 650;
}
.toolbar-filter-button:hover { border-color: rgba(98,217,255,.48); background: rgba(22, 78, 141, .62); }

.discover-layout {
    display: grid;
    grid-template-columns: minmax(560px, 1.65fr) minmax(218px, .58fr) minmax(274px, .72fr);
    gap: 14px;
    align-items: start;
}
.candidate-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(104, 179, 241, .25);
    border-radius: var(--v2-radius-lg);
    background: linear-gradient(180deg, rgba(8, 35, 70, .92), rgba(5, 25, 51, .94));
    box-shadow: var(--v2-shadow), inset 0 1px 0 rgba(255,255,255,.025);
    backdrop-filter: blur(20px);
}
.candidate-safety { position: absolute; z-index: 8; top: 14px; right: 14px; }
.candidate-safety .safety-mark { background: rgba(2,15,33,.52); border-color: rgba(255,255,255,.16); backdrop-filter: blur(12px); }
.candidate-gallery { padding: 12px 12px 0; }
.candidate-media-stage {
    position: relative;

    overflow: hidden;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background: #06172d;
    isolation: isolate;
    touch-action: pan-y;
}
.candidate-media-stage-multi { cursor: pointer; }
.candidate-photo-blur,
.profile-photo-blur {
    position: absolute;
    inset: -30px;
    z-index: -1;
    background-position: center;
    background-size: cover;
    filter: blur(30px) saturate(120%) brightness(.58);
    transform: scale(1.08);
    opacity: .74;
}
.candidate-media-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.02), transparent 65%, rgba(1,10,24,.18));
}
.candidate-main-photo {

    z-index: 1;

    user-select: none;
    -webkit-user-drag: none;
}
.gallery-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    width: 42px;
    height: 42px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background: rgba(4, 20, 42, .48);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: transform .16s ease, background .16s ease;
}
.gallery-arrow:hover { background: rgba(20, 75, 134, .74); }
.gallery-arrow-left { left: 14px; }
.gallery-arrow-right { right: 14px; }
.carousel-arrow-icon { width:22px; height:22px; display:grid; place-items:center; }
.carousel-arrow-icon svg { width:100%; height:100%; }
.gallery-arrow-left .carousel-arrow-icon,
.interest-strip-arrow-left .carousel-arrow-icon { transform:rotate(90deg); }
.gallery-arrow-right .carousel-arrow-icon,
.interest-strip-arrow-right .carousel-arrow-icon { transform:rotate(-90deg); }
.gallery-dots {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(2, 16, 34, .40);
    backdrop-filter: blur(8px);
}
.gallery-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    cursor: pointer;
}
.gallery-dot-active { width: 17px; border-radius: 99px; background: var(--v2-cyan); box-shadow: 0 0 12px rgba(98,217,255,.6); }
.candidate-thumbnails {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(76px, 1fr);
    gap: 8px;
    overflow-x: auto;
    padding: 9px 1px 2px;
    scrollbar-width: none;
}
.candidate-thumbnails::-webkit-scrollbar { display: none; }
.candidate-thumb {
    height: 70px;
    padding: 2px;
    overflow: hidden;
    background: rgba(6, 24, 48, .72);
    border: 1px solid rgba(107, 177, 235, .18);
    border-radius: 11px;
    cursor: pointer;
}
.candidate-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.candidate-thumb-active { border-color: var(--v2-cyan); box-shadow: 0 0 0 1px var(--v2-cyan), 0 0 18px rgba(98,217,255,.18); }
.candidate-info { padding: 14px 18px 18px; }
.candidate-heading-row { display: flex; align-items: flex-start; gap: 12px; }
.candidate-heading-open {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
}
.candidate-heading-open:focus-visible { outline: 2px solid var(--v2-cyan); outline-offset: 3px; }
.candidate-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: clamp(24px, 2vw, 31px);
    line-height: 1.05;
    letter-spacing: -.035em;
}
.verified-badge {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #fff;
    background: #258dff;
    font-size: 12px;
    box-shadow: 0 0 16px rgba(37,141,255,.35);
}
.candidate-meta { margin: 6px 0 0; color: var(--v2-muted); font-size: 12px; }
.candidate-card .candidate-about { margin:12px 0 0; max-width:750px; color:#d8e5f3; font-size:13px; line-height:1.5; }
.candidate-info > div[style*="flex-wrap"] { margin-top: 12px !important; gap: 6px !important; }
.candidate-info > div[style*="flex-wrap"] .hint {
    padding: 5px 9px !important;
    color: #d7e8f8 !important;
    background: rgba(72, 134, 200, .13) !important;
    border: 1px solid rgba(109, 177, 234, .14);
    font-size: 14px;
}
.candidate-interest-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.interest-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(55, 97, 155, .12);
    color: #dbe9f8;
    font-size: 14px;
}
.interest-pill-icon { font-size: 13px; }
.interest-music { color: #ff835f !important; }
.interest-film { color: #b495ff !important; }
.interest-series { color: #a7a1ff !important; }
.interest-game { color: #6ac9ff !important; }
.interest-book { color: #5ce6c1 !important; }
.interest-anime { color: #ff84ca !important; }
.interest-hobby { color: #639cff !important; }
.candidate-no-common { margin: 12px 0 0; color: var(--v2-muted); font-size: 12px; }

.match-panel,
.filters-panel { border-radius: var(--v2-radius-lg); }
.match-panel {
    position: sticky;
    top: 18px;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 16px 18px;
    text-align: center;
}
.match-ring {
    --match: 0;
    position: relative;
    width: 138px;
    height: 138px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #42baff 0%, #48ddff calc(var(--match) * .72%), #ffd26b calc(var(--match) * 1%), rgba(54, 100, 157, .26) 0);
    box-shadow: 0 0 30px rgba(41, 159, 255, .20);
}
.match-ring::before { content:""; position:absolute; inset:9px; border-radius:50%; background:#071d39; border:1px solid rgba(130,196,248,.18); }
.match-ring-core { position: relative; z-index: 1; width: 84px; height: 84px; display:grid; place-items:center; border-radius:50%; background: radial-gradient(circle, rgba(25,95,160,.38), rgba(4,24,52,.74)); }
.match-percent { margin-top: 14px; font-size: 36px; line-height: 1; letter-spacing: -.04em; }
.match-title { margin-top: 6px; color: var(--v2-cyan); font-size: 14px; font-weight: 700; }
.match-caption { margin: 4px 0 0; color: var(--v2-muted); font-size: 14px; }
.match-category-icons { display:flex; gap:7px; margin-top:14px; }
.match-category {
    width: 29px; height: 29px; display:grid; place-items:center;
    border-radius: 50%; background: rgba(43, 91, 149, .24); border: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
}
.match-details { width:100%; display:grid; gap:9px; margin-top:18px; padding-top:17px; border-top:1px solid rgba(118,183,237,.12); }
.match-detail { display:flex; align-items:center; gap:8px; min-width:0; color:#c0d0e2; font-size: 14px; text-align:left; }
.match-detail-icon {  flex:none; text-align:center; }
.match-actions { width:100%; display:grid; gap:8px; margin-top:auto; padding-top:18px; }
.like-button { font-size:14px; }
.like-button span:first-child { font-size:18px; }
.skip-button { min-height: 40px; }

.filters-panel {
    position: sticky;
    top: 18px;
    padding: 20px 17px 16px;
}
.filter-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.filter-head h3 { margin:0; font-size:19px; }
.filter-head p { margin:3px 0 0; color:var(--v2-muted); font-size: 13px; }
.filter-close {    color:#fff; background:rgba(255,255,255,.06); border:1px solid var(--v2-line); border-radius:50%; cursor:pointer; }
.filter-section { padding:16px 0; border-bottom:1px solid rgba(113,180,237,.12); }
.filter-section-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:12px; }
.filter-section-value { color:var(--v2-muted); font-weight:500; }
.filter-select { min-height:42px; padding:8px 11px; font-size:12px; }
.dual-range-wrap { position:relative; height:30px; }
.dual-range-track {
    --left: 0%; --right: 0%;
    position:absolute; top:13px; left:1px; right:1px; height:4px; border-radius:99px;
    background: linear-gradient(90deg, rgba(70,122,180,.35) var(--left), #34baff var(--left), #34baff calc(100% - var(--right)), rgba(70,122,180,.35) calc(100% - var(--right)));
}
.dual-range {
    position:absolute; inset:0; width:100%; height:30px; padding:0; margin:0;
    pointer-events:none; appearance:none; -webkit-appearance:none; background:transparent; border:0; outline:0; box-shadow:none;
}
.dual-range::-webkit-slider-thumb { pointer-events:auto; appearance:none; -webkit-appearance:none; width:17px; height:17px; border-radius:50%; border:2px solid #8be7ff; background:#48c7ff; box-shadow:0 0 0 4px rgba(72,199,255,.08); cursor:pointer; }
.dual-range::-moz-range-thumb { pointer-events:auto; width:15px; height:15px; border-radius:50%; border:2px solid #8be7ff; background:#48c7ff; box-shadow:0 0 0 4px rgba(72,199,255,.08); cursor:pointer; }
.range-ticks { display:flex; justify-content:space-between; margin-top:-1px; color:rgba(179,201,225,.58); font-size:9px; }
.filter-toggle { display:flex; align-items:center; gap:12px; padding:7px 0; margin:0; cursor:pointer; }
.filter-toggle-copy { display:grid; gap:1px; flex:1; }
.filter-toggle-copy strong { color:#eaf4ff; font-size: 14px; font-weight:600; }
.filter-toggle-copy small { color:var(--v2-muted); font-size:9px; line-height:1.3; }
.sm-switch { position:relative; width:36px; height:21px; flex:none; }
.sm-toggle-input { position:absolute; opacity:0; pointer-events:none; }
.sm-switch::before { content:""; position:absolute; inset:0; border-radius:99px; background:rgba(93,139,188,.28); border:1px solid rgba(128,187,237,.20); transition:.16s ease; }
.sm-switch-knob { position:absolute; z-index:1; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#c4d6e7; transition:.16s ease; }
.sm-switch:has(.sm-toggle-input:checked)::before { background:linear-gradient(90deg,#1c74d8,#31c5ff); border-color:rgba(103,220,255,.58); }
.sm-switch:has(.sm-toggle-input:checked) .sm-switch-knob { transform:translateX(15px); background:#fff; }
.filter-apply { margin-top:15px; }
.advanced-filter { margin-top:7px; min-height:38px; font-size: 14px; }

.discover-layout-empty { grid-template-columns:minmax(0,1fr) minmax(290px,.42fr); }
.empty-state { min-height:520px;   align-content:center;     }
.empty-state img { width:110px; }
.empty-state h2 { margin:3px 0 0; font-size:28px; }
.empty-state .button { width:auto; min-width:220px;  }

.match-overlay { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; background:rgba(1,9,22,.72); backdrop-filter:blur(14px); }
.match-modal {  padding:30px; border-radius:28px; text-align:center; }
.match-modal img { width:104px; margin-bottom:12px; }
.match-modal h2 { margin:8px 0; font-size:28px; }
.match-modal p { margin:0 0 20px; color:var(--v2-muted); line-height:1.5; }
.match-modal .button + .button { margin-top:8px; }

/* ---------- Profile ---------- */
.profile-page {
    width:min(100%, 1420px);
    margin:0 auto;
    padding:28px 24px 46px;
}
.profile-page-header { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:18px; }
.profile-page-header h1 { margin:6px 0 7px; font-size:clamp(31px,3.2vw,46px); letter-spacing:-.04em; }
.profile-page-header p { margin:0; color:var(--v2-muted); }
.profile-page-header-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.profile-page-header-actions .button,
.profile-page-header-actions .header-secondary-action { width:auto; min-height:44px; }
.header-secondary-action { min-height:42px; padding:0 15px; color:#dcecff; background:rgba(6,31,63,.64); border:1px solid var(--v2-line); border-radius:12px; font:inherit; font-weight:600; cursor:pointer; }
.profile-editor-layout { display:grid; grid-template-columns:minmax(360px,.72fr) minmax(520px,1.28fr); gap:15px; align-items:start; }
.profile-editor-new { grid-template-columns:minmax(0,860px); justify-content:center; }
.profile-photos-panel,
.profile-form-panel,
.profile-interests-panel { border-radius:var(--v2-radius-lg); }
.profile-photos-panel { padding:19px; }
.profile-form-panel { padding:21px; }
.profile-interests-panel { margin-top:15px; padding:21px; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.panel-heading h2 { margin:5px 0 0; font-size:22px; }
.panel-heading > p { max-width:300px; margin:3px 0 0; color:var(--v2-muted); font-size: 14px; line-height:1.4; text-align:right; }
.profile-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.profile-photo-tile { min-width:0; padding:7px; border:1px solid rgba(100,172,231,.15); border-radius:15px; background:rgba(4,23,48,.56); transition:transform .16s ease, opacity .16s ease, border-color .16s ease; }
.profile-photo-tile[draggable="true"] { cursor:grab; }
.profile-photo-main { border-color:rgba(98,217,255,.46); box-shadow:0 0 0 1px rgba(98,217,255,.12); }
.profile-photo-visual {  height:220px; overflow:hidden; display:grid; place-items:center; border-radius:11px; background:#06172d; isolation:isolate; }
.profile-photo-image { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; }
.main-photo-badge { position:absolute; z-index:3;   padding:5px 8px; border-radius:999px; color:#05213c; background:var(--v2-cyan);  font-weight:760; text-transform:uppercase; letter-spacing:.04em; }
.photo-delete { position:absolute; z-index:3; right:8px; top:8px; display:grid; place-items:center; width:27px; height:27px; padding:0; color:#fff; background:rgba(2,14,31,.66); border:1px solid rgba(255,255,255,.16); border-radius:50%; cursor:pointer; }
.photo-delete .ui-icon { width:15px; height:15px; }
.profile-photo-controls { display:grid; grid-template-columns:36px 1fr 36px; gap:5px; margin-top:7px; }
.photo-control { min-height:31px; padding:0 6px; color:#dbeafa; background:rgba(20,60,105,.40); border:1px solid rgba(112,181,237,.16); border-radius:9px; cursor:pointer; }
.photo-control:disabled { opacity:.28; cursor:default; }
.photo-control-focus { font-size: 13px; }
.photo-status { display:block; margin-top:5px; color:var(--v2-muted); font-size:9px; }
.photo-appeal { width:100%; margin-top:7px; }
.profile-photo-add { min-height:260px; display:grid; place-items:center; align-content:center; gap:6px; color:#dcecff; background:rgba(17,52,91,.28); border:1px dashed rgba(104,192,255,.34); border-radius:15px; cursor:pointer; }
.profile-photo-add span { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(47,139,232,.18); color:var(--v2-cyan); font-size:30px; font-weight:200; }
.profile-photo-add strong { font-size:12px; }
.profile-photo-add small { color:var(--v2-muted); font-size:9px; }
.profile-photo-empty { margin-top:11px; padding:12px; border-radius:12px; color:var(--v2-muted); background:rgba(26,76,126,.18); font-size: 14px; line-height:1.45; }
.section-loading { min-height:240px; display:grid; place-items:center; color:var(--v2-muted); }

.profile-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.profile-field { position:relative; min-width:0; margin:0; }
.profile-field-wide { grid-column:1 / -1; }
.profile-field label { margin:0 0 6px; color:#c8d9ea; font-size: 13px; font-weight:650; text-transform:uppercase; letter-spacing:.06em; }
.profile-field small { display:block; margin-top:5px; color:var(--v2-muted); font-size:9px; }
.profile-field textarea { min-height:110px; resize:vertical; }
.profile-suggestions { position:absolute; z-index:20; top:100%; left:0; right:0; max-height:240px; overflow:auto; margin-top:5px; padding:5px; border:1px solid var(--v2-line); border-radius:12px; background:#071d39; box-shadow:0 18px 40px rgba(0,0,0,.28); }
.suggestion-row { display:block; width:100%; padding:9px 10px; color:#e9f4ff; background:transparent; border:0; border-radius:8px; text-align:left; cursor:pointer; }
.suggestion-row:hover { background:rgba(55,132,217,.16); }
.profile-subsection { margin-top:18px; padding-top:17px; border-top:1px solid rgba(112,181,237,.13); }
.profile-subsection-title { display:flex; justify-content:space-between; gap:18px; margin-bottom:11px; }
.profile-subsection-title h3 { margin:0; font-size:15px; }
.profile-subsection-title p { max-width:380px; margin:0; color:var(--v2-muted); font-size:9px; text-align:right; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.choice-card { display:flex; align-items:center; gap:10px; min-height:60px; margin:0; padding:10px; border:1px solid rgba(112,181,237,.16); border-radius:13px; background:rgba(7,32,65,.40); cursor:pointer; }
.choice-check { position:relative; width:26px; height:26px; display:grid; place-items:center; flex:none; border:1px solid rgba(130,190,239,.27); border-radius:8px; background:rgba(26,72,122,.26); }
.choice-input { position:absolute; opacity:0; }
.choice-check span { opacity:0; color:#071d39; font-size:14px; font-weight:800; }
.choice-card:has(.choice-input:checked) { border-color:rgba(98,217,255,.42); background:linear-gradient(135deg,rgba(36,112,194,.30),rgba(15,66,125,.24)); }
.choice-card:has(.choice-input:checked) .choice-check { background:var(--v2-cyan); border-color:var(--v2-cyan); }
.choice-card:has(.choice-input:checked) .choice-check span { opacity:1; }
.choice-copy { display:grid; gap:2px; }
.choice-copy strong { font-size: 14px; }
.choice-copy small { color:var(--v2-muted); font-size:9px; }
.profile-save-row { display:flex; justify-content:flex-end; margin-top:18px; }
/*
 * «Сохранить изменения» на телефоне прибито над навигацией.
 *
 * Владелец 15 сентября 2026: «в профиле редактирование идёт сразу,
 * поэтому кнопку сохранения — статичной в самом низу над навигацией,
 * чтобы не надо было скролить». Анкета длинная — имя, дата, город,
 * рост, о себе, личное, цель, — и кнопка в конце формы означает
 * прокрутку после каждой правки.
 *
 * `sticky`, а не `fixed`: полоса остаётся частью формы, то есть
 * не накрывает содержимое там, где его и так мало, и не появляется
 * на экране создания анкеты раньше времени.
 */
@media (max-width: 800px) {
    .profile-save-row {
        position: sticky;
        bottom: 0;
        z-index: 4;
        margin: 18px -12px 0;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(6, 21, 44, 0), rgba(6, 21, 44, .92) 28%);
    }
    .profile-verified-warning { margin-bottom: 0; }

    /* Липкость не работает внутри обрезающего предка, а форма закрыта
       `overflow: hidden`. Скругление от снятия не страдает: за края
       формы ничего не выходит. */
    .profile-form-panel {
        /* `!important` вынужденный: обрезку форме задаёт правило
           с той же специфичностью ниже по файлу, а без её снятия
           липкость не работает вовсе. */
        overflow: visible !important;
    }

    /*
     * И второе, без чего липкость всё равно не заводится: страница
     * анкеты сама объявлена прокручиваемой (`overflow-y: auto`), хотя
     * прокрутка живёт уровнем выше, в `.view`. Липкий элемент считает
     * от **ближайшего** прокручиваемого предка — то есть от страницы,
     * которая не прокручивается никогда, — и потому не липнет вовсе.
     */
    .profile-page {
        overflow: visible !important;
    }
}

/* ---------- Полная анкета из ленты и переписки ---------------------
 * Это самостоятельный экран поверх приложения. Раньше он состоял из
 * одной длинной колонки с inline-стилями: фотография занимала узкую
 * полоску слева, а справа на широком экране оставалось пустое поле.
 */
.candidate-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 140;
    overflow: auto;
    background:
        linear-gradient(180deg, rgba(6,21,44,.68), rgba(8,29,57,.80)),
        url("../img/background-aurora-ice-lagoon.png") center / cover fixed;
}

.column.candidate-profile-content {
    display: grid;
    gap: 22px;
    width: min(1120px, calc(100% - 48px));
    max-width: none;
    min-height: 100%;
    padding: 28px 0 46px;
    margin-inline: auto;
}

.candidate-profile-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 22px;
    border: 1px solid rgba(117, 199, 255, .22);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(9, 40, 77, .86), rgba(5, 24, 50, .78));
    box-shadow: 0 20px 55px rgba(0, 8, 28, .24);
}

.candidate-profile-heading { min-width: 0; flex: 1; }
.candidate-profile-heading h1 { margin-bottom: 8px; font-size: clamp(25px, 3vw, 36px); }
.candidate-profile-close { flex: none; padding: 0; }
.candidate-profile-close .ui-icon,
.candidate-profile-close svg { width: 22px; height: 22px; }

.candidate-profile-grid {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    align-items: start;
    gap: 22px;
}

.candidate-profile-photos {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 10px;
}

.candidate-profile-photo {
    flex: 0 0 min(320px, 84vw);
    display: grid;
    gap: 8px;
    scroll-snap-align: start;
}

.candidate-profile-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(126, 207, 255, .23);
    box-shadow: 0 18px 44px rgba(0, 7, 25, .30);
}

.candidate-profile-photo .button { min-height: 48px; }
.candidate-profile-details { display: grid; gap: 14px; min-width: 0; }
.candidate-profile-details > * { width:100%; max-width:none; }

.candidate-common-card,
.candidate-about,
.candidate-interests {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.candidate-common-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 56px;
    padding: 15px 18px;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.candidate-common-chevron {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    transition: transform .18s ease;
}
.candidate-common-toggle[aria-expanded="true"] .candidate-common-chevron { transform: rotate(180deg); }
.candidate-common-chevron svg { display: block; width: 100%; height: 100%; }

.candidate-common-details {
    display: grid;
    gap: 12px;
    padding: 0 18px 18px;
    border-top: 1px solid rgba(124, 198, 255, .14);
}
.candidate-common-details[hidden] { display: none; }
.candidate-common-group { padding-top: 13px; }
.candidate-common-group p { margin: 4px 0 0; }
.candidate-common-group-title { display: flex; align-items: center; gap: 8px; margin: 0; }

.candidate-about,
.candidate-interests { padding: 18px; }
.candidate-about h2,
.candidate-interests h2 { margin: 0 0 14px; font-size: 19px; }
.candidate-about > p { margin: 0; line-height: 1.6; }
.candidate-interest-group + .candidate-interest-group { margin-top: 15px; }
.candidate-interest-group p { margin: 4px 0 0; line-height: 1.5; }

.candidate-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 28px;
}

@media (max-width: 760px) {
    .column.candidate-profile-content { width:calc(100% - 24px); gap:14px; padding:14px 0 96px; }
    .candidate-profile-header { padding: 16px; border-radius: 18px; }
    .candidate-profile-grid { grid-template-columns: 1fr; gap: 14px; }
    .candidate-profile-photos { margin-inline: -2px; }
    .candidate-profile-photo { flex-basis: min(82vw, 330px); }
    .candidate-profile-actions { grid-template-columns: 1fr; padding-bottom: 0; }
}
.profile-save-row .button { width:auto; min-width:210px; }
.onboarding-note { display:flex; align-items:center; gap:14px; max-width:860px; margin:0 auto 14px; padding:13px 16px; border-radius:16px; }
.onboarding-note img { width:46px; }
.onboarding-note strong { font-size:12px; }
.onboarding-note p { margin:3px 0 0; color:var(--v2-muted); font-size: 13px; }

.interest-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.interest-category-card { min-width:0; padding:13px; border:1px solid rgba(112,181,237,.14); border-radius:15px; background:linear-gradient(145deg,rgba(16,55,96,.48),rgba(5,27,55,.46)); }
.interest-category-icon {   display:grid; place-items:center; border-radius:10px; background:rgba(66,131,199,.15); font-size:15px; }
.interest-category-head > div { display:grid; gap:1px; }
.interest-category-head strong { color:#edf7ff; font-size:12px; }
.interest-category-head small { color:var(--v2-muted); font-size:9px; }
.interest-category-names { display:flex; flex-wrap:wrap; gap:5px; min-height:56px; margin-top:11px; align-content:flex-start; }
.interest-category-names span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 7px; border-radius:999px; color:#ccdded; background:rgba(104,161,217,.10); font-size:9px; }
.interest-category-empty { min-height:56px; margin:11px 0 0; color:var(--v2-muted); font-size:9px; }
.interest-edit { width:100%; min-height:33px;  color:#cfeeff; background:rgba(25,89,153,.18); border:1px solid rgba(104,188,255,.20); border-radius:9px; font-size: 13px; cursor:pointer; }

/* ---------- About ---------- */
.about-page { width:min(100%,1320px); margin:0 auto; padding:28px 24px 50px; }
.about-hero {  display:grid; grid-template-columns:1.45fr .55fr; align-items:center; gap:28px; padding:34px; border-radius:30px; overflow:hidden; }
.about-hero h1 { max-width:800px; margin:7px 0 12px; font-size:clamp(34px,4vw,58px); line-height:1.02; letter-spacing:-.05em; }
.about-hero-copy > p { max-width:730px; margin:0; color:#bdd0e3; font-size:15px; line-height:1.55; }
.about-hero-actions { display:flex; align-items:center; gap:9px; margin-top:22px; flex-wrap:wrap; }
.about-hero-actions .button { width:auto; min-width:160px; text-decoration:none; }
.about-mail { background:linear-gradient(180deg,#227ad6,#165baa); }
.donate-note { color:var(--v2-muted); font-size: 13px; max-width:280px; }
.about-hero-mark { display:grid; place-items:center; }
.about-hero-mark img { width:min(100%,220px); filter:drop-shadow(0 18px 40px rgba(12,112,194,.28)); }
.about-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));  margin-top:14px; }
.about-feature {   border-radius:21px; }
.about-feature-icon {   display:grid; place-items:center;     font-size:18px; }
.about-feature p { margin:0; color:var(--v2-muted);   }
.about-money-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.about-list-card {  border-radius:23px; }
.about-list-card-accent { border-color:rgba(98,217,255,.32); background:linear-gradient(155deg,rgba(10,52,96,.92),rgba(5,25,51,.90)); }
.about-list-card h2 { margin:0 0 7px; font-size:22px; }
.about-list-card > p { margin:0; color:var(--v2-muted); font-size: 14px; line-height:1.5; }
.about-list-card ul { display:grid; gap:10px; margin:18px 0; padding:0; list-style:none; }
.about-list-card li { display:flex; gap:9px; color:#dceafa; font-size: 14px; }
.about-list-card li > span:first-child { color:var(--v2-cyan); }
.about-card-footer { padding-top:14px; border-top:1px solid rgba(112,181,237,.12); }
.about-footer { display:flex; justify-content:space-between; gap:20px; padding:20px 4px 0; color:rgba(177,200,225,.58); font-size: 13px; }

/* ---------- Existing pages brought into the same design system ---------- */
.column { max-width:1180px; padding:28px 24px 46px; }
.column-narrow { max-width:1180px; }
.topbar { max-width:1180px; min-height:64px; margin:0 auto; padding:20px 24px 0; }
.topbar h2 { font-size:25px; text-align:left; letter-spacing:-.03em; }
.topbar > span:first-child { display:none; }
.topbar .icon-button { flex:none; }
.card { border-radius:19px; padding:18px; }
.card + .card { margin-top:10px; }
.card-row { border-radius:16px; }

.switch { width:max-content;  margin:2px 0 18px; padding:4px; border-radius:13px; background:rgba(5,27,56,.64); }
.switch-item { min-width:145px; min-height:39px; border-radius:10px; }
.switch-item-active { background:linear-gradient(180deg,rgba(41,120,206,.38),rgba(26,81,151,.33)); }
.pane-body { display:grid; gap:11px; }
.tip { border-radius:15px; }
.tip-cover { border-radius:11px; }
.event { border-radius:20px; overflow:hidden; }
.event-cover { height:210px; }
.chips { gap:6px; }
.chip { border-radius:999px; }

/* Messenger: existing three-pane logic, new visual shell. */
.messenger { height:100%; max-width:1500px; margin:0 auto; padding:20px; gap:12px; }
.messenger-three { grid-template-columns:300px minmax(460px,1fr) 260px; }
.pane-list,
.conversation,
.rail {
    border:1px solid rgba(108,180,240,.20);
    border-radius:22px;
    background:linear-gradient(180deg,rgba(7,29,59,.88),rgba(5,23,48,.88));
    box-shadow:var(--v2-shadow);
    backdrop-filter:blur(18px);
}
.pane-list { padding:12px; }
.pane-title { padding:10px 6px; font-size:18px; }
.rail { padding:15px; }
.rail-photo { border-radius:16px; }

/* Settings and form pages: remove old white-card feeling. */
.field label, .form-label { color:#cbddec; font-size: 13px; text-transform:uppercase; letter-spacing:.05em; }
.notice { border-radius:14px; }
.safety-list { color:#cbdbea; }

/* Landing/auth also inherit the same navy/cyan language without changing flow. */
.landing section { width:min(100% - 36px,680px); }
.landing-mark { width:min(42vw,180px); }
.screen-center .column { max-width:520px; }
.screen-center .card { border-radius:24px; }

/* ---------- Responsive ---------- */
@media (max-width: 1420px) {
    :root { --v2-sidebar: 220px; }
    .discover-page { padding-left:18px; padding-right:18px; }
    .discover-layout { grid-template-columns:minmax(520px,1.55fr) minmax(205px,.56fr) minmax(250px,.68fr); gap:11px; }
    .candidate-media-stage { height:clamp(410px,49vh,560px); }
    .match-panel { padding-left:13px; padding-right:13px; }
    .filters-panel { padding-left:14px; padding-right:14px; }
}

@media (max-width: 1240px) {
    .discover-layout { grid-template-columns:minmax(500px,1fr) 220px; }
    .filters-panel {
        position:fixed;
        z-index:80;
        top:18px;
        right:18px;
        bottom:18px;
        width:min(330px,calc(100vw - 36px));
        overflow:auto;
        transform:translateX(calc(100% + 34px));
        transition:transform .22s ease;
    }
    body.filters-open .filters-panel { transform:none; }
    body.filters-open::after { content:""; position:fixed; z-index:70; inset:0; background:rgba(1,8,20,.54); backdrop-filter:blur(5px); }
    .filter-close { display:grid; place-items:center; }
    .discover-layout-empty { grid-template-columns:1fr; }
    .profile-editor-layout { grid-template-columns:360px minmax(0,1fr); }
    .interest-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .about-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 1040px) {
    :root { --v2-sidebar: 196px; }
    .shell { gap:12px; padding:12px; }
    .sidebar-brand-copy strong { font-size:19px; }
    .sidebar-logo { width:42px; height:42px; }
    .nav { padding:14px 10px 10px; }
    .nav-item { padding:8px 10px; }
    .discover-layout { grid-template-columns:minmax(0,1fr); }
    .match-panel { position:relative; top:auto; min-height:auto; display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center; text-align:left; padding:16px; }
    .match-ring { grid-row:1 / span 5; width:112px; height:112px; }
    .match-ring-core { width:70px; height:70px; }
    .match-ring-core img { width:52px; height:52px; }
    .match-percent { margin:0; font-size:31px; }
    .match-title, .match-caption { margin-top:2px; }
    .match-category-icons { margin-top:8px; }
    .match-details { display:none; }
    .match-actions { grid-column:1 / -1; grid-template-columns:1fr 120px; margin-top:12px; padding-top:12px; }
    .profile-editor-layout { grid-template-columns:1fr; }
    .profile-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .about-hero { grid-template-columns:1fr .35fr; }
}

@media (max-width: 800px) {
    body { overflow:hidden; }
    .shell {
        display:flex;
        flex-direction:column;
        gap:0;
        height:100dvh;
        padding:0;
    }
    .shell-workspace { flex:1; min-height:0; }
    .view { border-radius:0; padding-bottom:78px; }
    .nav {
        position:fixed;
        z-index:90;
        left:8px;
        right:8px;
        bottom:max(8px,env(safe-area-inset-bottom));
        display:flex;
        flex-direction:row;
        width:auto;
        height:64px;
        margin:0;
        padding:5px;
        border-radius:20px;
        background:rgba(5,25,51,.94);
    }
    .sidebar-brand, .nav-secondary { display:none; }
    .nav-primary { width:100%; display:flex; }
    .nav-item { flex:1; min-width:0;  display:grid; place-items:center; align-content:center;  padding:5px 2px; border-radius:15px; }
    .nav-item:hover { transform:none; }
    .nav-badge { top:-5px; left:13px; }
    .shell-notice { margin:8px 8px 0; }

    .discover-page, .profile-page, .about-page { padding:18px 12px 96px; }
    .discover-heading h1, .profile-page-header h1 { font-size:32px; }
    .discover-toolbar {  overflow-x:auto;   scrollbar-width:none; }
    .discover-toolbar::-webkit-scrollbar { display:none; }
    .toolbar-pill, .toolbar-filter-button { flex:none; min-height:48px; }
    .toolbar-pill-wide { min-width:245px; }
    .candidate-gallery { padding:8px 8px 0; }
    .candidate-media-stage { height:min(64dvh,560px); min-height:390px; border-radius:18px; }
    .candidate-thumbnails { grid-auto-columns:82px; }
    .candidate-thumb { height:62px; }
    .candidate-info { padding:13px 14px 16px; }
    .candidate-name { font-size:25px; }
    .match-panel { grid-template-columns:90px 1fr; border-radius:20px; }
    .match-ring { width:88px; height:88px; }
    .match-ring-core { width:57px; height:57px; }
    .match-ring-core img { width:43px; height:43px; }
    .match-category-icons { flex-wrap:wrap; }
    .match-actions { grid-template-columns:1fr 92px; }
    .filters-panel { top:10px; right:10px; bottom:84px; width:min(350px,calc(100vw - 20px)); }
    .profile-page-header { align-items:flex-start; }
    .header-secondary-action { display:none; }
    .profile-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .profile-photo-visual { height:220px; }
    .profile-form-grid, .choice-grid { grid-template-columns:1fr; }
    .profile-field-wide { grid-column:auto; }
    .profile-subsection-title { display:block; }
    .profile-subsection-title p { margin-top:3px; text-align:left; }
    .interest-category-grid { grid-template-columns:1fr; }
    .panel-heading, .panel-heading-row { display:block; }
    .panel-heading > p { margin-top:5px; text-align:left; max-width:none; }
    .about-hero { min-height:auto; grid-template-columns:1fr; padding:24px; }
    .about-hero-mark { display:none; }
    .about-feature-grid, .about-money-grid { grid-template-columns:1fr; }
    .about-footer { display:grid; }
    .column { padding:20px 12px 96px; }
    .topbar { padding:14px 12px 0; }
    .topbar h2 { font-size:21px; }
    .messenger { padding:10px 10px 90px; }
}

@media (max-width: 480px) {
    .discover-heading p { font-size:12px; }
    .candidate-media-stage { min-height:350px; height:54dvh; }
    .gallery-arrow { width:38px; height:38px; }
    .candidate-thumbnails { grid-auto-columns:72px; }
    .match-panel { grid-template-columns:76px 1fr; gap:10px; }
    .match-ring { width:74px; height:74px; }
    .match-ring::before { inset:7px; }
    .match-ring-core { width:46px; height:46px; }
    .match-ring-core img { width:35px; height:35px; }
    .match-percent { font-size:27px; }
    .profile-photo-grid { grid-template-columns:1fr 1fr; }
    .profile-photo-visual { height:190px; }
    .profile-photo-add { min-height:230px; }
}

/* Hubs: recommendations/events and settings */
.hub-page,
.settings-page { width:min(100%,1320px); margin:0 auto; padding:28px 24px 48px; }
.hub-header { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.hub-header h1 { margin:6px 0 7px; font-size:clamp(31px,3.3vw,46px); line-height:1.06; letter-spacing:-.04em; }
.hub-header p { max-width:760px; margin:0; color:var(--v2-muted); font-size:13px; line-height:1.5; }
.hub-page > .switch { margin-bottom:14px; }
.hub-page .pane-body { grid-template-columns:repeat(2,minmax(0,1fr));  }
.hub-page .pane-body > .card,
.hub-page .pane-body > div { margin-top:0; }
.hub-page .pane-body > .event { min-width:0; }
.hub-page .pane-body > h3,
.hub-page .pane-body > div:has(> .chips) { grid-column:1 / -1; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
/* Карточки ряда — одной высоты, иначе под короткой остаётся дыра.
   Два маленьких раздела стоят одной ячейкой, нижний дотягивается до низа ряда. */
.settings-stack { display:flex; flex-direction:column; gap:15px; min-width:0; }
.settings-stack > .settings-group:last-child { flex:1; }
.settings-row { display:block; width:100%; padding:12px 10px; color:inherit; background:transparent; border:0; border-radius:11px; text-align:left; cursor:pointer; }
.settings-row:hover { background:rgba(53,126,207,.12); }
.settings-row > div:first-child { font-size:12px; }
.settings-row .hint { font-size: 13px; }
.settings-row-danger { color:#ff8f83; }
.settings-toggle-row { display:flex; align-items:center; gap:12px; padding:12px 10px; margin:0; border-radius:11px; cursor:pointer; }
.settings-toggle-row:hover { background:rgba(53,126,207,.12); }
.settings-native-toggle { width:18px; height:18px; min-height:18px; accent-color:#42c8ff; }

@media (max-width:800px) {
  .hub-page,.settings-page { padding:18px 12px 96px; }
  .hub-header { align-items:flex-start; }
  .hub-header .header-secondary-action { display:none; }
  .hub-page .pane-body { grid-template-columns:1fr; }
  .hub-page .pane-body > h3,
  .hub-page .pane-body > div:has(> .chips) { grid-column:auto; }
  .settings-grid { grid-template-columns:1fr; }
}

/* Advanced filters */
.advanced-filters-page { width:min(100%,1280px); margin:0 auto; padding:28px 24px 46px; }
.advanced-filter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.advanced-filter-card { padding:20px; border-radius:21px; }
.advanced-filter-title { display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.advanced-filter-title > span {   display:grid; place-items:center; border-radius:10px; color:var(--v2-cyan); background:rgba(42,125,213,.14); border:1px solid rgba(98,217,255,.15); font-size: 13px; font-weight:800; }
.advanced-filter-title h2 { margin:0;  }
.advanced-filter-title p { margin:2px 0 0; color:var(--v2-muted);  }
.advanced-age-head { display:flex; justify-content:space-between; margin-bottom:8px; font-size: 14px; }
.advanced-age-value { color:var(--v2-cyan); }
.advanced-age-range { position:relative; height:34px; margin-bottom:1px; }
.advanced-age-range .dual-range-track { top:15px; }
.filter-form-field { position:relative; display:grid; gap:6px; margin-top:14px; }
.filter-form-field label { margin:0; color:#d6e5f4; font-size: 13px; font-weight:650; text-transform:uppercase; letter-spacing:.055em; }
.filter-form-field small { color:var(--v2-muted); font-size:9px; line-height:1.35; }
.filter-city-field .profile-suggestions { top:100%; }
.clear-city { justify-self:start; padding:0; color:var(--v2-cyan); background:none; border:0; font-size:9px; cursor:pointer; }
.filter-choice-card { display:flex; align-items:center; gap:10px; min-height:64px; margin:8px 0 0; padding:11px; border:1px solid rgba(112,181,237,.15); border-radius:13px; background:rgba(8,32,65,.38); cursor:pointer; }
.filter-choice-check { position:relative; width:27px; height:27px; flex:none; display:grid; place-items:center; border:1px solid rgba(128,188,237,.24); border-radius:8px; background:rgba(26,72,122,.22); }
.filter-choice-check .choice-input { position:absolute; opacity:0; }
.filter-choice-check > span { opacity:0; color:#061b34; font-size:14px; font-weight:900; }
.filter-choice-card:has(.choice-input:checked) { background:linear-gradient(135deg,rgba(36,112,194,.28),rgba(15,66,125,.22)); border-color:rgba(98,217,255,.40); }
.filter-choice-card:has(.choice-input:checked) .filter-choice-check { background:var(--v2-cyan); border-color:var(--v2-cyan); }
.filter-choice-card:has(.choice-input:checked) .filter-choice-check > span { opacity:1; }
.filter-choice-copy { display:grid; gap:2px; }
.filter-choice-copy strong { font-size: 14px; }
.filter-choice-copy small { color:var(--v2-muted); font-size:9px; }
.advanced-info { margin:14px 0 0; padding:12px; color:var(--v2-muted); background:rgba(31,89,147,.12); border-radius:12px; font-size: 13px; line-height:1.45; }
.advanced-save-bar {  bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:12px; padding:12px 14px; border-radius:17px; }
.advanced-save-bar p { margin:0; color:var(--v2-muted); font-size: 13px; }
.advanced-save { width:auto; min-width:210px; }
@media (max-width:800px) {
 .advanced-filters-page { padding:18px 12px 96px; }
 .advanced-filter-grid { grid-template-columns:1fr; }
 .advanced-save-bar { bottom:78px; display:grid; }
 .advanced-save { width:100%; }
}

/* Interests editor (opened from Profile, not a primary tab) */
.interests-editor-page { width:min(100%,1320px); margin:0 auto; padding:28px 24px 48px; }
.interest-search-panel { margin-bottom:12px; padding:20px; border-radius:21px; }
.interest-search-panel h2 { margin-bottom:10px; font-size:18px; }
.interest-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:stretch; }
.interest-editor-card { min-width:0; padding:18px; border-radius:20px; }
.interest-editor-card > div[style*="grid-template-columns"] { grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
.interest-editor-card .button { min-height:38px; }
.interest-editor-card .icon-button { background:rgba(2,15,33,.72) !important; border-color:rgba(255,255,255,.16); }
@media (max-width:900px) {
  .interest-editor-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
  .interests-editor-page { padding:18px 12px 96px; }
  .interest-editor-card > div[style*="grid-template-columns"] { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
@media (max-width:480px) {
  .interest-editor-card > div[style*="grid-template-columns"] { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
.candidate-safety .safety-mark { position:static; width:34px; height:34px; }

/* ==================== V3 VISUAL LAYER (formerly v3.css) ==================== */
/* SoulMates Web v3 — polish pass: centred vector constellations, tactile controls,
   visual hierarchy for text-heavy pages, custom navigation icons and support page. */

:root {
    --v3-cyan: #67ddff;
    --v3-cyan-soft: #bcefff;
    --v3-ice: #eefaff;
    --v3-orange: #dceeff;
    --v3-orange-2: #73d2ff;
    --v3-panel: rgba(5, 24, 50, .84);
    --v3-panel-hi: rgba(11, 43, 82, .88);
    --v3-line: rgba(113, 197, 255, .24);
    --v3-line-hi: rgba(121, 222, 255, .48);
}

/* --- Sidebar brand and navigation. --- */
.sidebar-brand {  gap: 9px; }
.sidebar-logo { width: 39px; height: 39px; }
.sidebar-brand-copy small { font-size: 13px;  }

.nav-item {
    min-height: 51px;
    padding: 9px 11px;
    gap: 11px;
    isolation: isolate;
    overflow: hidden;
}
.nav-item::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0;
    background: radial-gradient(circle at 16% 50%, rgba(79, 193, 255, .18), transparent 46%);
    transition: opacity .18s ease;
}
.nav-item:hover::after,
.nav-item-active::after { opacity: 1; }
.nav-mark {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 10px;
    color: rgba(213, 237, 251, .78);
    background: rgba(39, 104, 174, .08);
    border: 1px solid rgba(112, 196, 255, .08);
    transition: .18s ease;
}
.nav-item:hover .nav-mark,
.nav-item-active .nav-mark {
    color: #f8fdff;
    background: rgba(54, 145, 231, .16);
    border-color: rgba(111, 217, 255, .25);
    box-shadow: 0 0 22px rgba(55, 182, 255, .12), inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-mark svg { width: 20px; height: 20px; stroke-width: 1.65; }
.nav-mark svg .accent,
.ui-icon svg .accent,
.section-visual-icon svg .accent,
.settings-row-icon svg .accent,
.settings-group-icon svg .accent,
.advanced-filter-icon svg .accent { stroke: var(--v3-orange); }
.nav-mark svg .fill,
.ui-icon svg .fill,
.section-visual-icon svg .fill { fill: currentColor; }
.nav-title { font-size: 13px; font-weight: 620; }
.nav-item-support {
    color: #ffe9d7;
    background: linear-gradient(100deg, rgba(255, 120, 60, .08), rgba(255, 85, 42, .03));
    border-color: rgba(255, 135, 70, .11);
}
.nav-item-support:hover,
.nav-item-support.nav-item-active {
    color: #fff;
    border-color: rgba(255, 146, 83, .30);
    background: linear-gradient(100deg, rgba(255, 128, 61, .17), rgba(255, 79, 43, .07));
}
.nav-item-support .nav-mark { color: #ffc6a2; }

/* --- Tactile buttons. --- */
.button,
.header-secondary-action,
.toolbar-filter-button,
.interest-edit,
.photo-control,
.clear-city {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    box-shadow:
        0 10px 28px rgba(0, 9, 31, .20),
        inset 0 1px 0 rgba(255,255,255,.13),
        inset 0 -1px 0 rgba(0,0,0,.16);
    transition: transform .16s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.button::before,
.header-secondary-action::before,
.toolbar-filter-button::before {
    content: "";
    position: absolute;
    top: -80%;
    left: -45%;
    width: 38%;
    height: 250%;
    transform: rotate(18deg) translateX(-150%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transition: transform .48s ease;
    pointer-events: none;
}
.button:hover:not(:disabled)::before,
.header-secondary-action:hover::before,
.toolbar-filter-button:hover::before { transform: rotate(18deg) translateX(430%); }
.button:hover:not(:disabled),
.header-secondary-action:hover,
.toolbar-filter-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08) saturate(1.06);
    box-shadow:
        0 14px 34px rgba(0, 14, 44, .30),
        0 0 22px rgba(60, 181, 255, .09),
        inset 0 1px 0 rgba(255,255,255,.16);
}
.button:active:not(:disabled),
.header-secondary-action:active,
.toolbar-filter-button:active {
    transform: translateY(1px) scale(.992);
    box-shadow: inset 0 2px 7px rgba(0,0,0,.20), 0 4px 12px rgba(0,0,0,.18);
}
.button-quiet,
.card .button-quiet {
    background: linear-gradient(180deg, rgba(38, 91, 151, .18), rgba(13, 47, 90, .20));
    border-color: rgba(117, 193, 250, .18);
}

/* Световой блик предназначен для главного действия. На спокойных
   кнопках его диагональная грань выглядела как сломанный угол. */
.button-quiet::before { display:none; }

/* --- Reusable visual headings / icons. --- */
.sm-icon,
.ui-icon,
.section-visual-icon,
.settings-row-icon,
.settings-group-icon,
.advanced-filter-icon,
.support-tier-icon,
.support-step-icon,
.support-benefit-icon,
.support-notice-icon,
.mini-inline-icon,
.safety-bullet-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    /* Подстраховка, а не оформление: у SVG нет своих width/height,
       и контейнер без размера превращает пиктограмму в 300 точек. */
    width: 22px;
    height: 22px;
}
/* `.sm-icon` есть у всего, что рисует iconEl(): список ниже вёлся
   руками и уже потерял `.empty-state-icon` — знак компаний стал
   чёрным по тёмно-синему. Список оставлен для разметки, которую
   собирают не через iconEl. */
.sm-icon svg,
.ui-icon svg,
.section-visual-icon svg,
.settings-row-icon svg,
.settings-group-icon svg,
.advanced-filter-icon svg,
.support-tier-icon svg,
.support-step-icon svg,
.support-benefit-icon svg,
.support-notice-icon svg,
.mini-inline-icon svg,
.safety-bullet-icon svg {
    width: 100%; height: 100%; fill: none; stroke: currentColor;
    stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}
.section-visual-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 22px;
}
.section-visual-heading.compact { margin-bottom: 15px; }
.section-visual-heading h2,
.section-visual-heading h3 { margin: 0; }
.section-visual-heading p { margin: 4px 0 0; color: var(--v2-muted); font-size: 14px; line-height: 1.45; }
.section-visual-icon {
    width: 52px; height: 52px;
    padding: 13px;
    color: var(--v3-cyan-soft);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(44, 135, 221, .19), rgba(20, 72, 133, .09));
    border: 1px solid rgba(109, 213, 255, .20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0, 8, 31, .15);
}

/* --- Settings: cards that scan visually instead of text walls. --- */
.settings-grid { gap: 15px; }
.settings-group {  border-radius: 23px; }
.settings-group-heading {
    display: flex; align-items: center; gap: 10px;

    margin-bottom: 3px;
    border-bottom: 1px solid rgba(115, 187, 239, .10);
}
.settings-group-icon {

    border-radius: 13px;

    border: 1px solid rgba(98, 217, 255, .13);
}
.settings-group-title {
    margin: 0;

}
.settings-row,
.settings-toggle-row {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 18px;
    align-items: center;
    gap: 11px;

    padding: 9px 9px;
    border-radius: 15px;
    border: 1px solid transparent;
}
.settings-toggle-row { grid-template-columns: 42px minmax(0,1fr) auto; }
.settings-row:hover,
.settings-toggle-row:hover {
    background: linear-gradient(90deg, rgba(54, 139, 226, .12), rgba(35, 91, 160, .05));
    border-color: rgba(106, 197, 255, .10);
}
.settings-row-icon {
    width: 39px; height: 39px; padding: 9px;
    color: #a9dffc;
    border-radius: 12px;
    background: rgba(31, 88, 151, .13);
    border: 1px solid rgba(110, 187, 239, .10);
}
.settings-row-copy { min-width: 0; }
.settings-row-title { color: #eff8ff;  font-weight: 660; }
.settings-row .hint,
.settings-toggle-row .hint { margin-top: 3px; color: rgba(175, 202, 228, .72);   }
.settings-row-arrow { color: rgba(142, 201, 238, .50); font-size: 22px; font-weight: 300; }
.settings-row-danger .settings-row-icon { color: #ff9b91; background: rgba(184, 54, 50, .10); border-color: rgba(255, 118, 107, .12); }
.settings-row-danger .settings-row-title { color: #ffaaa1; }
.settings-row-emphasis {
    background:linear-gradient(90deg,rgba(49,126,205,.14),rgba(27,79,139,.07));
    border-color:rgba(113,198,255,.14);
}
.settings-row-emphasis .settings-row-icon {
    color:#c9efff;
    background:rgba(48,128,207,.18);
    border-color:rgba(116,207,255,.18);
}
.settings-row-emphasis .settings-row-title { color:#fff; }
.settings-row-emphasis .settings-row-arrow { color:rgba(164,219,250,.72); }

/* --- Advanced search filters. --- */
/*
 * Здесь стояло `.advanced-filter-title > span { width:auto; height:auto }`.
 * Правило пережило поколение, когда в этом кружке был не рисунок, а буква,
 * и по специфичности (0,1,1) побеждало `.advanced-filter-icon` (0,1,0).
 * Размер с пиктограммы снимался, `svg { width:100%; height:100% }`
 * считался от auto-контейнера, и браузер брал подставной размер
 * замещаемого элемента — 300x150. На экране это 324 точки вместо 46:
 * сердце во всю карточку, а «Цель знакомства / Можно выбрать оба
 * варианта» сжато в столбик по два слога. Так были сломаны все четыре
 * заголовка настроек поиска.
 */
.advanced-filter-icon {
    width: 46px; height: 46px; padding: 11px;
    color: var(--v3-cyan-soft);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(46, 137, 220, .18), rgba(11, 62, 119, .09));
    border: 1px solid rgba(99, 211, 255, .18);
}
.advanced-filter-title h2 { font-size: 18px; }
.advanced-filter-title p { font-size: 13px; line-height: 1.35; }
.filter-choice-card,
.choice-card {
    border-color: rgba(112, 191, 247, .13);
    background: rgba(23, 67, 116, .12);
}
.filter-choice-card:hover,
.choice-card:hover { background: rgba(36, 102, 174, .17); border-color: rgba(104, 211, 255, .20); }

/* --- About: larger icon-led cards. --- */
.about-hero { min-height: 350px; }
.about-hero-mark { gap: 9px; color: rgba(190, 218, 239, .62); font-size: 13px; }
.about-mark-halo {
    width: 210px; height: 210px; display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(68, 193, 255, .16), rgba(20, 81, 147, .05) 55%, transparent 72%);
    box-shadow: 0 0 70px rgba(45, 171, 246, .10);
}
.about-mark-halo img { width: 150px; }
.about-feature-grid { gap: 15px; }
.about-feature {
    min-height: 245px;
    padding: 23px;
    display: flex;
    flex-direction: column;
}
.about-feature-icon {
    width: 58px; height: 58px; padding: 14px;
    border-radius: 18px;
    color: var(--v3-ice);
    background: linear-gradient(145deg, rgba(86, 182, 255, .34), rgba(38, 116, 199, .20));
    border: 1px solid rgba(140, 226, 255, .38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 22px rgba(4, 30, 66, .28);
}
.about-feature h3 { margin: 28px 0 8px; font-size: 18px; }
.about-feature p { font-size: 14px; line-height: 1.58; }
.about-list-card { padding: 25px; }
.visual-list { display: grid; gap: 9px; margin: 16px 0; padding: 0; list-style: none; }
.visual-list-item {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 11px;
    align-items: center;
    min-height: 60px;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(27, 78, 134, .10);
    border: 1px solid rgba(114, 190, 242, .09);
}
.visual-list-icon {
    width: 40px; height: 40px; padding: 10px;
    color: #9de5ff;
    border-radius: 12px;
    background: rgba(39, 113, 190, .14);
}
.visual-list-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.visual-list-item strong { display: block; color: #eef9ff; font-size: 11.5px; }
.visual-list-item span { display: block; margin-top: 2px; color: rgba(181, 207, 229, .72); font-size: 9.5px; line-height: 1.35; }
.about-principles { margin-top: 15px;   }
.principle-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.principle-grid .visual-list-item { min-height: 90px; }

/* --- Support page. --- */
.support-page { width: min(100%, 1340px); margin: 0 auto; padding: 28px 24px 54px; }
.support-hero {
    min-height: 360px;
    display: grid;
    grid-template-columns: minmax(0,1.4fr) minmax(250px,.6fr);
    align-items: center;
    gap: 30px;
    padding: 36px;
    border-radius: 30px;
    overflow: hidden;
}
.support-hero h1 { max-width: 820px; margin: 8px 0 13px; font-size: clamp(35px,4vw,58px); line-height: 1.02; letter-spacing: -.05em; }
.support-hero-copy > p { max-width: 760px; margin: 0; color: #bfd1e4; font-size: 14px; line-height: 1.58; }
.support-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 21px; }
.support-hero-badges > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; color: #d9edf9; border-radius: 999px; background: rgba(33, 100, 166, .12); border: 1px solid rgba(107, 203, 255, .14); font-size: 9.5px; }
.mini-inline-icon { width: 15px; height: 15px; color: #8de3ff; }
.support-hero-art { display: grid; justify-items: center; gap: 8px; }
.support-mark-orbit {
    width: 220px; height: 220px; display: grid; place-items: center; border-radius: 50%;
    background:
        radial-gradient(circle, rgba(33, 132, 217, .22), transparent 57%),
        conic-gradient(from 220deg, rgba(68, 210, 255, .95), rgba(35, 122, 238, .18) 36%, rgba(255, 178, 93, .78) 78%, rgba(68, 210, 255, .95));
    padding: 7px;
    box-shadow: 0 0 70px rgba(45, 172, 247, .14);
}
.support-mark-orbit::before { content: ""; grid-area: 1/1; width: 100%; height: 100%; border-radius: 50%; background: #08234a; }
.support-mark-orbit img { grid-area: 1/1; position: relative; width: 138px; z-index: 1; }
.support-orbit-caption { color: rgba(192, 221, 240, .66); font-size: 13px; }
.support-tier-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; margin-top: 15px; }
.support-tier { min-height: 260px; padding: 22px; border-radius: 22px; }
.support-tier-icon { width: 50px; height: 50px; padding: 12px; color: #9de8ff; border-radius: 16px; background: rgba(43, 127, 210, .15); border: 1px solid rgba(99, 210, 255, .16); }
.support-tier-amount { margin-top: 26px; color: #fff; font-size: 28px; font-weight: 760; letter-spacing: -.04em; }
.support-tier h3 { margin: 8px 0 7px; font-size: 16px; }
.support-tier p { margin: 0; color: var(--v2-muted); font-size: 10.5px; line-height: 1.5; }
.support-story,
.support-steps,
.support-links { margin-top: 15px; padding: 27px; border-radius: 25px; }
.support-story-heading { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 16px; align-items: start; }
.support-story-icon { width: 62px; height: 62px; padding: 15px; color: #a4e9ff; border-radius: 19px; background: rgba(43, 127, 210, .15); border: 1px solid rgba(99, 210, 255, .16); }
.support-story-heading h2 { margin: 6px 0 8px; font-size: 25px; }
.support-story-heading p { max-width: 880px; margin: 0; color: var(--v2-muted); font-size: 14px; line-height: 1.55; }
.support-benefit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.support-benefit { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 11px; align-items: center; min-height: 72px; padding: 11px; border-radius: 15px; background: rgba(28, 79, 134, .10); border: 1px solid rgba(108, 188, 241, .09); }
.support-benefit-icon { width: 43px; height: 43px; padding: 10px; color: #9de5ff; border-radius: 13px; background: rgba(39, 113, 190, .14); }
.support-benefit strong { color: #eef9ff; font-size: 11.5px; }
.support-benefit p { margin: 3px 0 0; color: var(--v2-muted); font-size: 9.5px; line-height: 1.4; }
.support-step-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.support-step { min-height: 180px; padding: 17px; border-radius: 18px; background: rgba(26, 77, 133, .11); border: 1px solid rgba(109, 192, 245, .10); }
.support-step-head { display: flex; align-items: center; justify-content: space-between; }
.support-step-icon { width: 45px; height: 45px; padding: 10px; color: #9be6ff; border-radius: 14px; background: rgba(40, 118, 199, .15); }
.support-step-number { color: rgba(129, 208, 246, .42); font-size: 19px; font-weight: 800; }
.support-step h3 { margin: 23px 0 7px; font-size: 15px; }
.support-step p { margin: 0; color: var(--v2-muted); font-size: 13px; line-height: 1.48; }
.support-notice { display: grid; grid-template-columns: 49px minmax(0,1fr); gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 16px; color: #ffe7d5; background: rgba(194, 86, 39, .09); border: 1px solid rgba(255, 150, 91, .15); }
.support-notice-icon { width: 45px; height: 45px; padding: 10px; color: #ffbd91; border-radius: 14px; background: rgba(190, 77, 35, .11); }
.support-notice strong { font-size: 11.5px; }
.support-notice p { margin: 3px 0 0; color: rgba(237, 206, 184, .72); font-size: 9.5px; }
.support-link-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.support-link-grid a { min-height: 48px; display: flex; align-items: center; padding: 10px 12px; color: #cceeff; text-decoration: none; border-radius: 13px; background: rgba(31, 88, 151, .10); border: 1px solid rgba(111, 191, 243, .09); font-size: 13px; }
.support-link-grid a:hover { background: rgba(41, 116, 194, .16); border-color: rgba(106, 211, 255, .17); }

/* --- Safety: section cards with visual anchors. --- */
.safety-page { width: min(100%, 1120px); margin: 0 auto; padding: 0 16px 46px; display: grid; gap: 13px; }
.safety-card { padding: 22px; border-radius: 22px; }
.safety-card .section-visual-heading h3 { font-size: 17px; }
.safety-card .section-visual-heading p { max-width: 760px; font-size: 14px; line-height: 1.45; }
.safety-lead { color: #d4e5f3; font-size: 14px; line-height: 1.55; }
.visual-safety-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.visual-safety-list li { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 8px; align-items: start; padding: 10px; border-radius: 13px; background: rgba(25, 74, 128, .10); border: 1px solid rgba(109, 187, 239, .08); color: #d9e9f6; font-size: 14px; line-height: 1.5; }
.safety-bullet-icon { width: 29px; height: 29px; padding: 7px; color: #7ee1ff; border-radius: 10px; background: rgba(41, 119, 197, .13); }
.safety-tail { margin-top: 12px; padding: 11px 12px; border-left: 2px solid rgba(99, 216, 255, .55); border-radius: 0 12px 12px 0; background: rgba(47, 132, 215, .07); font-size: 14px; line-height: 1.5; }

/* Default list cards elsewhere get more breathing room and less 'document' feeling. */
.card ul:not(.visual-list):not(.visual-safety-list) { line-height: 1.55; }
.card > h3:first-child { letter-spacing: -.015em; }

@media (max-width: 1180px) {
    .support-tier-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .support-link-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .principle-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    #app::after { opacity: .40; background-size: 1250px auto; background-position: top -5px center; }
    .support-page { padding: 18px 12px 96px; }
    .support-hero { grid-template-columns: 1fr; min-height: auto; padding: 25px 21px; }
    .support-hero-art { display: none; }
    .support-benefit-grid,
    .support-step-grid,
    .visual-safety-list { grid-template-columns: 1fr; }
    .about-mark-halo { width: 150px; height: 150px; }
    .about-mark-halo img { width: 108px; }
}

@media (max-width: 560px) {
    #app { background-position: center, 55% center; }
    #app::after { height: 44vh; opacity: .30; background-size: 950px auto; }
    .support-tier-grid,
    .support-link-grid { grid-template-columns: 1fr; }
    .support-tier { min-height: auto; }
    .support-story-heading { grid-template-columns: 52px minmax(0,1fr); }
    .support-story-icon { width: 48px; height: 48px; padding: 11px; }
    .settings-row,
    .settings-toggle-row { grid-template-columns: 39px minmax(0,1fr) 16px; min-height: 62px; }
    .settings-toggle-row { grid-template-columns: 39px minmax(0,1fr) auto; }
    .settings-row-icon { width: 36px; height: 36px; }
}

/* Interest/category glyphs use the same vector system instead of font symbols. */
.interest-category-icon,
.interest-pill-icon,
.toolbar-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
}
/* .match-category-svg и .match-detail-icon держат эмодзи-текст, а не
   svg: центрирование текстового узла в grid-контейнере не так надёжно
   на разных WebView, как во flex, и на телефоне значок съезжал влево. */
.match-category-svg,
.match-detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.interest-category-icon svg,
.interest-pill-icon svg,
.match-category-svg svg,
.match-detail-icon svg,
.toolbar-icon svg {
    width: 100%; height: 100%; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.interest-category-icon { width: 36px; height: 36px; padding: 8px; color: #a4e7ff; }
.interest-pill-icon { width: 18px; height: 18px; padding: 2px; }
.match-category-svg { width: 18px; height: 18px; padding: 2px; font-size: 12px; line-height: 1; }
.match-detail-icon { width: 24px; height: 24px; padding: 5px; border-radius: 8px; background: rgba(40,112,188,.13); font-size: 13px; line-height: 1; }
.match-category-svg svg .category-icon-fill,
.match-detail-icon svg .category-icon-fill,
.interest-category-icon svg .category-icon-fill,
.interest-pill-icon svg .category-icon-fill,
.ui-icon svg .category-icon-fill { fill:currentColor; stroke:none; }
.match-category-svg svg .category-icon-cut,
.match-detail-icon svg .category-icon-cut,
.interest-category-icon svg .category-icon-cut,
.interest-pill-icon svg .category-icon-cut,
.ui-icon svg .category-icon-cut { fill:#eef8ff; stroke:none; }
.toolbar-icon { width: 31px; height: 31px; padding: 7px; border-radius: 10px; color: #a9e8ff; background: rgba(46,128,207,.12); }
.toolbar-filter-button .toolbar-icon { width: 24px; height: 24px; padding: 4px; background: transparent; }

/* Photo ordering is deliberately obvious and reliable. */
.profile-photo-tile.is-drag-target { border-color: rgba(104, 224, 255, .58); box-shadow: 0 0 0 2px rgba(79, 194, 255, .10), 0 14px 30px rgba(0,8,28,.22); }
.photo-order-icon { width: 14px; height: 14px; display: inline-grid; place-items: center; color: #86dfff; }
.photo-order-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* v4 functional-audit additions */
.event-owner-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.event-cancel-button{border-color:rgba(255,126,126,.28)!important}
.verification-consent-card{display:grid;gap:12px}
.verification-consent{display:flex;align-items:flex-start;gap:12px;line-height:1.5;color:var(--text-muted,#b6c8e8)}
.verification-consent input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:#55d8ff}

/* Обложки интересов в профиле. Те же пропорции, что у постеров
   в диалоге выбора: человек должен узнавать одно и то же изображение
   на обоих экранах. */
.interest-covers {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;

}

.interest-cover { min-width: 0; }

.interest-cover img,
.interest-cover-empty {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(112, 184, 255, .18);
    background: rgba(10, 38, 74, .55);
}

.interest-cover-empty {
    display: grid;
    place-items: center;
    color: var(--v3-cyan-soft);
}

.interest-cover-empty .ui-icon { width: 26px; height: 26px; }

/* Название в одну строку с многоточием: два ряда подписей ломали бы
   ровный ряд обложек, а полное имя есть во всплывающей подсказке. */
.interest-cover span {
    display: block;
    margin-top: 7px;
    color: var(--v3-cyan-soft);
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .interest-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
}

/* ==================== V4 CURRENT UI (formerly v4.css) ==================== */
/* SoulMates Web — спокойный серебряно-синий слой после сверки с Android. */

:root {
    --ice-white: #f5fbff;
    --ice: #dceeff;
    --ice-blue: #a9dcff;
    --active-blue: #5aa8ff;
    --deep-blue: #071b36;
    --glass: rgba(7, 28, 57, .84);
    --glass-high: rgba(12, 43, 80, .90);
    --soft-line: rgba(184, 224, 255, .24);
}

/* Переключатель летящего тупика всегда живёт в свободном верхнем углу,
   отдельно от нижних панелей и контента. */
.flight-toggle {
    position: absolute !important;
    inset: 10px 12px auto auto !important;
    z-index: 20 !important;
}

/* Рабочая область задаёт кнопке собственный верхний правый угол.
   Контент прокручивается внутри .view, поэтому кнопка остаётся на месте
   и никогда не создаёт пустую строку снизу. */
.shell-workspace { position:relative; }

@media (min-width:1001px) {
    .hub-page,
    .settings-page,
    .profile-page,
    .about-page-current,
    .support-page-current,
    .companies-page,
    .company-chat-page,
    .decoration-page {
        min-height:100%;
        box-sizing:border-box;
    }
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    letter-spacing: .002em;
}

/* Спокойная основа Web: море остаётся читаемым, а контент получает мягкую
   затемняющую вуаль. Картинка и декоративный слой независимы — их можно
   менять без перестройки экранов. */
#app {
    background-color: #031126;
    background-image:
        linear-gradient(180deg, rgba(2, 10, 28, .28) 0%, rgba(2, 16, 43, .16) 46%, rgba(2, 10, 24, .50) 100%),
        url("/assets/project/background-web-ocean-2026.png");
    background-position: center, center;
    background-size: cover, cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

input, textarea, select {
    color: var(--ice-white);
    background: rgba(7, 29, 59, .86);
    border: 1px solid rgba(174, 220, 250, .28);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 14px rgba(0,8,28,.12);
}
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(119,205,255,.55); outline-offset:1px; }
/* Браузер не должен подменять ночное поле жёлтой заливкой автозаполнения. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--ice-white);
    caret-color: var(--ice-white);
    -webkit-box-shadow: 0 0 0 1000px rgba(7, 29, 59, .86) inset;
    box-shadow: 0 0 0 1000px rgba(7, 29, 59, .86) inset;
    transition: background-color 9999s ease-out 0s;
}
.screen-center .card { width:min(100%,470px); padding:clamp(24px,4vw,38px); }
.screen-center form { display:grid; gap:14px; }
.screen-center .field { margin:0; }
.field label.consent { display:flex; align-items:flex-start; gap:10px; line-height:1.4; text-transform:none; letter-spacing:normal; }
.field label.consent span { text-transform:none; letter-spacing:normal; }
.consent input[type="checkbox"] { width:20px; height:20px; min-height:20px; margin:2px 0 0; flex:0 0 20px; accent-color:#65caff; }

h1, h2, h3, strong, .button, .nav-title {
    font-family: inherit;
}

h1, h2, h3 { font-weight: 650; letter-spacing: -.025em; }

#app::before {
    background:
        radial-gradient(ellipse at 52% -4%, rgba(104, 198, 255, .08), transparent 42%),
        radial-gradient(circle at 90% 20%, rgba(112, 152, 255, .07), transparent 24%),
        radial-gradient(ellipse at 50% 83%, rgba(45, 155, 218, .08), transparent 34%),
        linear-gradient(180deg, rgba(1, 9, 24, .08), rgba(2, 15, 35, .24) 60%, rgba(1, 9, 24, .52));
}

#app::after {

    background-image: url('../img/interest-constellation-2026.png');
    background-size: min(1200px, 88vw) auto;
    background-position: center 8%;
    background-repeat: no-repeat;
}

.glass-panel,
.card,
.card-blue {
    border-color: var(--soft-line);
    background: linear-gradient(155deg, rgba(13, 47, 87, .91), rgba(5, 24, 51, .91));
    box-shadow: 0 22px 60px rgba(0, 8, 28, .29), inset 0 1px 0 rgba(255,255,255,.07);
}

.button:not(.button-quiet),
.header-secondary-action,
.toolbar-filter-button {

    text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.button:not(.button-quiet):hover:not(:disabled),
.header-secondary-action:hover,
.toolbar-filter-button:hover {
    filter: brightness(1.04);

}

/* Светлая кнопка сохраняет тёмную надпись во всех состояниях. */
.landing-actions .button:first-child:hover:not(:disabled) {
    color: #06152c !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.button:not(.button-quiet):hover:not(:disabled),
.button:not(.button-quiet):focus-visible:not(:disabled),
.header-secondary-action:hover,
.header-secondary-action:focus-visible,
.toolbar-filter-button:hover {
    color:#06152c !important;
    text-shadow:0 1px 0 rgba(255,255,255,.45);
}

.button:not(.button-quiet):active:not(:disabled),
.header-secondary-action:active,
.toolbar-filter-button:active {
    transform: translateY(2px) scale(.995);
    box-shadow: 0 4px 11px rgba(0, 8, 28, .32), inset 0 2px 4px rgba(53, 102, 148, .20);
}

/*
 * Симпатия, мэтч, отправка сообщения — то, ради чего акцент и держится.
 * Терракота та же, что в приложении (`BrandAccent`, #A9373A); светлая
 * грань сверху и тень в цвет кнопки — тот же объём, что у
 * `SoulMatesDepthButton`: на ночном фоне чёрную тень не видно вовсе.
 */
.button-accent,
.like-button {
    color: #fff !important;
    background: linear-gradient(180deg, var(--brand-accent-top), var(--brand-accent)) !important;
    border-color: rgba(255, 218, 213, .34) !important;
    box-shadow:
        0 14px 30px rgba(107, 24, 27, .30),
        inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
.button-accent:hover:not(:disabled),
.like-button:hover:not(:disabled) {
    background: linear-gradient(180deg, #cf4d50, var(--brand-accent-hover)) !important;
    border-color: rgba(255, 218, 213, .62) !important;
}

.button-quiet {
    color: var(--ice) !important;
    border: 1px solid rgba(176, 217, 249, .18);
    background: rgba(7, 31, 62, .55);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 5px 14px rgba(0,8,28,.16);
}

.button-quiet:hover { color: #fff !important; border-color: rgba(188, 229, 255, .38); background: rgba(20, 67, 115, .62); }

.nav {
    background: linear-gradient(180deg, rgba(5, 25, 52, .94), rgba(4, 19, 42, .91));
    border-color: rgba(166, 218, 255, .20);
}

.sidebar-brand { padding: 8px 10px 20px; overflow:hidden; cursor: default; pointer-events: none; }
.sidebar-brand-copy strong {
    font-size:24px;
    font-weight:700;
    color:#f8fbff;
    background:linear-gradient(100deg,#ffffff 3%,#72ddff 48%,#8bb5ff 76%,#c19aff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
}
.sidebar-brand-copy small { color: rgba(202, 226, 244, .66); }
.sidebar-note { color: rgba(202, 226, 244, .56); line-height: 1.4; }

.nav-item-active {
    background: linear-gradient(100deg, rgba(90, 168, 255, .24), rgba(115, 210, 255, .08));
    border-color: rgba(162, 218, 255, .29);
}

.nav-item-support,
.nav-item-support:hover,
.nav-item-support.nav-item-active {
    color: var(--ice);
    background: rgba(87, 164, 224, .08);
    border-color: rgba(162, 218, 255, .15);
}

.nav-item-support .nav-mark,
.nav-mark svg .accent,
.ui-icon svg .accent,
.section-visual-icon svg .accent,
.settings-row-icon svg .accent,
.settings-group-icon svg .accent,
.advanced-filter-icon svg .accent { color: var(--ice-blue); stroke: var(--ice-blue); }

/* Keep every inline icon readable on the night palette. The SVGs are
   intentionally line-based; without an explicit currentColor stroke the
   browser falls back to black (most visible in the About cards). */
.ui-icon svg,
.about-feature-icon svg,
.section-visual-icon svg,
.support-intro-icon svg,
.commerce-header-icon svg,
.lundir-pack-icon svg,
.settings-row-icon svg,
.settings-group-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ui-icon svg .fill { fill:currentColor; stroke:none; }
.sm-icon svg .fill { fill:currentColor; stroke:none; }
.support-intro-icon svg .fill { fill:currentColor; stroke:none; }

/* Подписка и лундиры: в Web это самостоятельные страницы вместо
   тесного Android-переключателя. Обе держат одну ширину и ритм. */
.commerce-page { width:min(1040px,100%); margin:0 auto; padding:34px 30px 70px; display:grid; gap:18px; }
.commerce-header { display:grid; grid-template-columns:minmax(0,1fr) 78px; align-items:center; gap:24px; padding:28px; border-radius:28px; }
.commerce-header h1 { margin:6px 0 10px; font-size:clamp(32px,4vw,48px); }
.commerce-header p { max-width:760px; margin:0; color:var(--ink-muted); line-height:1.58; }
.commerce-header-icon { width:72px; height:72px; color:var(--ice-blue); padding:16px; border:1px solid rgba(142,211,255,.28); border-radius:24px; background:rgba(61,159,232,.12); }
.commerce-offer { padding:26px; display:grid; justify-items:center; gap:14px; border-radius:28px; }
.slot-comparison { display:flex; justify-content:center; align-items:center; gap:24px; }
.slot-count { width:112px; aspect-ratio:1; display:grid; place-items:center; align-content:center; gap:2px; border:1px solid rgba(156,211,250,.25); border-radius:50%; background:rgba(135,185,225,.1); }
.slot-count strong { font-size:38px; line-height:1; }
.slot-count span { color:var(--ink-muted); }
.slot-count-accent { background:linear-gradient(145deg,rgba(90,176,241,.32),rgba(29,100,177,.22)); border-color:rgba(149,220,255,.55); box-shadow:0 12px 30px rgba(0,15,45,.24),inset 0 1px 0 rgba(255,255,255,.12); }
.slot-arrow { color:var(--ice-blue); font-size:32px; }
.commerce-center,.commerce-until,.commerce-status { margin:0; text-align:center; }
.commerce-main-action { width:min(440px,100%); }
.commerce-status { min-height:1.4em; color:var(--ink-muted); }
.commerce-reading { padding:26px; color:var(--ink); border-radius:28px; }
.commerce-reading h2 { margin:0 0 12px; }
.commerce-reading p { margin:10px 0 0; line-height:1.58; }
.lundir-pack-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.lundir-pack { min-height:220px; padding:22px; display:flex; flex-direction:column; align-items:flex-start; border-radius:24px; }
.lundir-pack-icon { width:52px; height:52px; padding:11px; color:var(--ice-blue); border:1px solid rgba(151,216,255,.3); border-radius:18px; background:rgba(61,159,232,.12); }
.lundir-pack-copy { flex:1; margin:16px 0; }
.lundir-pack-copy h3,.lundir-pack-copy p { margin:0; }
.lundir-pack-copy p { margin-top:5px; color:var(--ink-muted); }
.lundir-pack .button { width:100%; }

/* Подсказка появляется только там, где есть мышь. */
@media (hover:hover) and (pointer:fine) {
    [title] { position: relative; }
    .nav-item:hover .nav-title { color: #fff; }
    .icon-button:hover { border-color: rgba(190, 228, 255, .38); background: rgba(27, 76, 125, .72); }
}

@media (max-width:800px) {
    .commerce-page { padding:18px 12px 96px; }
    .commerce-header { grid-template-columns:minmax(0,1fr) 54px; gap:12px; padding:20px; }
    .commerce-header-icon { width:52px; height:52px; padding:11px; border-radius:17px; }
    .lundir-pack-grid { grid-template-columns:1fr; }
    .lundir-pack { min-height:0; display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:0 14px; }
    .lundir-pack-icon { width:48px; height:48px; grid-row:1; }
    .lundir-pack-copy { margin:0; }
    .lundir-pack .button { grid-column:1 / -1; margin-top:14px; }
}

/* Стартовая прокручивается сама: body у Web-приложения намеренно
   заблокирован, поэтому height:auto обрезала всё ниже видимой области. */
.landing {   overflow-y:auto; overflow-x:hidden; box-sizing:border-box;  }
.landing-brand-mark { width:148px; height:148px; object-fit:contain; margin:0 0 4px; filter:drop-shadow(0 14px 24px rgba(0,8,28,.38)); animation: brand-breathe 5s ease-in-out infinite; }
@keyframes brand-breathe { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-5px) rotate(1deg); } }
.landing-story { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; width:min(1180px,calc(100% - 48px)); min-height:0 !important; margin:0 auto; padding:42px 0; }
.landing-story-copy { min-height:230px; padding:24px; border:1px solid rgba(151,216,255,.3); border-radius:24px; background:linear-gradient(145deg,rgba(28,78,124,.86),rgba(7,30,61,.92)); box-shadow:0 18px 42px rgba(0,8,28,.22),inset 0 1px 0 rgba(255,255,255,.06); }
.landing-story-copy h2 { margin:8px 0 10px; font-size:22px; }
.landing-story-copy p { margin:0; color:var(--ink-muted); line-height:1.58; }
.landing-hero h1 { font-size: clamp(48px, 8vw, 82px); font-weight: 660; }
.landing-lead { max-width: 540px; font-size: clamp(18px, 2vw, 23px); line-height: 1.45; }
.landing-summary { max-width:640px; margin:14px 0 0; color:var(--ink-muted); font-size:15px; line-height:1.58; }
.landing-scroll-hint { font-size: 13px; letter-spacing: .04em; }
.landing-points { grid-auto-rows:1fr; align-items:stretch !important; }
.landing-points .card { display:flex; flex-direction:column; min-height:190px; height:100%; margin:0 !important; box-sizing:border-box; }
.landing-points .card h2 { min-height:2.5em; margin-bottom:10px; }
.landing-points .card .hint { margin-top:0; }
.landing .landing-foot { min-height:0 !important; padding:30px 24px; border:1px solid rgba(151,216,255,.24); border-radius:24px; background:rgba(7,31,63,.76); box-sizing:border-box; }
.landing-foot-copy h2 { margin:7px 0 8px; }
.landing-foot-copy p { margin:0; }
.landing .landing-partners { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; width:min(1180px,calc(100% - 48px)); min-height:0 !important; margin:0 auto; padding:30px; border:1px solid rgba(151,216,255,.3); border-radius:26px; background:linear-gradient(135deg,rgba(25,82,127,.84),rgba(7,31,63,.94)); box-shadow:0 20px 46px rgba(0,8,28,.22); box-sizing:border-box; }
.landing-partners-copy h2 { margin:7px 0 10px; font-size:clamp(23px,3vw,32px); }
.landing-partners-copy p { max-width:760px; margin:0; color:var(--ink-muted); line-height:1.58; }
.landing-partners-actions { display:flex; flex-direction:column; align-items:stretch; gap:12px; min-width:250px; text-align:center; }
.landing-partners-actions > a:not(.button) { color:var(--ice-blue); font-size:14px; text-underline-offset:3px; }
.landing-partners-actions > a:not(.button):hover { color:#fff; }
.landing-site-footer { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:34px 0 8px; border-top:1px solid rgba(188,225,255,.18); color:var(--ink-muted); }
.landing-footer-grid { display:grid; grid-template-columns:minmax(260px,1.4fr) repeat(3,minmax(150px,1fr)); gap:34px; }
.landing-footer-logo { display:inline-flex; align-items:center; gap:11px; color:#fff; text-decoration:none; font-size:22px; }
.landing-footer-logo img { width:42px; height:42px; object-fit:contain; }
.landing-footer-brand p { max-width:360px; margin:16px 0 0; font-size:14px; line-height:1.62; }
.landing-footer-column h3 { margin:4px 0 15px; color:#b7c9df; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.landing-footer-column ul { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.landing-footer-column a { color:var(--ink-muted); font-size:14px; text-decoration:none; }
.landing-footer-column a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.landing-footer-bottom { display:flex; justify-content:space-between; gap:24px; margin-top:30px; padding-top:18px; border-top:1px solid rgba(188,225,255,.12); font-size:12px; }
.landing-footer-bottom p { margin:0; }

@media (min-width: 900px) {
    .landing section { width: 100%; min-height: auto; padding: 0; }
    .landing .landing-hero {  min-height: auto; align-items: flex-start; text-align: left; }
    .landing-brand-mark { width:148px; height:148px; }
    .landing-actions { flex-direction:row; align-items:stretch; width:min(100%,460px); max-width:460px; margin-left:0; }
    .landing-actions .button { flex:1 1 0; min-width:0; }
    .landing-points { grid-area: points; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing .landing-story {  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
    .landing-foot { grid-area:foot; display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:28px; align-items:center; max-width:none !important; text-align:left; }
    .landing-foot .button { margin-top: 0 !important; }
}

@media (max-width:899px) {
    .landing-summary { max-width:560px; text-align:center; }
    .landing-points .card { min-height:0; }
    .landing-points .card h2 { min-height:0; }
    .landing .landing-foot { width:min(100% - 32px,680px); margin:28px auto 0; }
    .landing .landing-partners { grid-template-columns:1fr; width:min(100% - 32px,680px); margin-top:16px; text-align:left; }
    .landing-partners-actions { min-width:0; }
    .landing-site-footer { width:min(100% - 32px,680px); margin-top:32px; }
    .landing-footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (min-width:600px) and (max-width:899px) {
    .landing-points .card { min-height:140px; }
}

@media (max-width:560px) {
    .landing .landing-foot,.landing .landing-partners { padding:24px 20px; }
    .landing-footer-grid { grid-template-columns:1fr; gap:28px; }
    .landing-footer-brand p { max-width:none; }
    .landing-footer-bottom { display:grid; gap:8px; }
}

.button-link {  margin:2px auto 0; padding:4px 8px; color:var(--ice-blue); background:none; border:0; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.button-link:hover { color:#fff; }
.password-field { position:relative; }
.password-field input { width:100%; padding-right:50px; }
.password-toggle { position:absolute;  top:50%; transform:translateY(-50%); display:grid; place-items:center;   color:var(--ice-blue); border:0; border-radius:10px; background:transparent; cursor:pointer; }
.password-toggle:hover { background:rgba(120,190,240,.13); }
.password-toggle .ui-icon { width:20px; height:20px; }

@media (min-width: 1240px) {
    .toolbar-filter-button { display:none; }
    .discover-layout { align-items:stretch; }
    .discover-layout > * { height:100%; }
}

.hub-page { width:min(100%,1320px); overflow:visible; }
.hub-header h1 { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.hub-page .pane-body { align-items:stretch; }
.candidate-media-stage {
    /* The Android card grows only into the space left by the screen.
       Web needs the same cap; a portrait must not push the actions below
       the viewport or be clipped by an oversized 3:4 box. */
    aspect-ratio:auto;
    height:min(560px, max(320px, calc(100dvh - 500px)));
}
.candidate-main-photo {
    display:block;
    position:relative;
    inset:auto;
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:100% !important;
    object-fit:contain !important;
}
.candidate-main-photo-frame {
    position:relative;
    inset:auto;
    z-index:1;
    display:grid;
    place-items:center;
    height:100%;
    max-width:100%;
    aspect-ratio:3/4;
    overflow:hidden;
    border-radius:18px;
}
.candidate-main-photo-frame .candidate-main-photo {
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:cover !important;
}
.candidate-photo-loading {
    position:absolute;
    z-index:7;
    inset:0;
    display:grid;
    place-items:center;
    color:rgba(211,232,247,.82);
    font-size:13px;
    letter-spacing:.01em;
    background:linear-gradient(110deg, rgba(5,24,51,.86), rgba(20,58,89,.62), rgba(5,24,51,.86));
    background-size:200% 100%;
    animation:photo-preparing 1.6s ease-in-out infinite;
    pointer-events:none;
}
@keyframes photo-preparing {
    0%,100% { background-position:100% 0; }
    50% { background-position:0 0; }
}
@media (min-width: 900px) {
    /* Android's card fills the space left by the header and actions. In Web
       the same idea is capped by the viewport so the profile never runs
       underneath the bottom edge of the page. */
    .candidate-media-stage { height:min(560px, max(360px, calc(100dvh - 470px))); }
    .candidate-thumbnails { display:none; }
}

@media (min-width: 801px) {
    .candidate-thumbnails { display:none; }
}

.candidate-photo-blur { filter:blur(30px) saturate(70%) brightness(.56); opacity:.62; }

/* Афиша повторяет Android: три равные быстрые даты и отдельный
   календарь. Длинная подпись «Свой период» больше не ломает симметрию. */
.event-periods {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(48px, .55fr);
    width:100%;
    gap:8px;
}

.event-filter-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width:100%;
    margin-bottom: 14px;
}

.event-filter-panel { grid-column:1 / -1; width:min(700px,100%); margin-bottom:14px; }
.event-filter-panel .event-filter-row { margin-bottom:8px; }
.event-filter-scope {
    width:100%;
    padding:10px 12px;
    border:1px solid rgba(134,210,255,.20);
    border-radius:15px;
    background:rgba(7,34,68,.64);
}
.event-filter-scope .filter-toggle-copy small { font-size:11px; }

.event-filter-row > div:first-child { flex:1 1 auto; min-width:0; margin:0; }

.event-city-control {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border: 1px solid rgba(134, 210, 255, .32);
    border-radius: 15px;
    background: rgba(7, 34, 68, .84);
    color: var(--scenic-text);
    text-align: left;
    cursor: pointer;
}

.event-city-icon { width: 19px; height: 19px; color: var(--ice-blue); flex: 0 0 auto; }
.event-city-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; }
.event-city-control strong { display:block; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.event-city-chevron { flex:0 0 auto !important; font-size:18px; }
.event-city-dialog { width:min(520px,calc(100vw - 24px)); }
.event-city-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }
.event-city-dialog-head h3 { margin:0 0 5px; }
.event-city-dialog-head p { margin:0; }
.event-city-dialog input { width:100%; margin-top:16px; }
.event-city-list { display:grid; gap:7px; max-height:min(58vh,520px); margin-top:14px; overflow:auto; }
.event-city-row { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:1px solid rgba(134,210,255,.18); border-radius:14px; color:var(--scenic-text); background:rgba(6,29,59,.72); text-align:left; cursor:pointer; }
.event-city-row:hover,.event-city-row.is-selected { border-color:var(--ice-blue); background:rgba(25,79,135,.58); }
.event-city-row > span:first-child { display:grid; gap:3px; min-width:0; flex:1; }
.event-city-row small { color:var(--ink-muted); }
.event-city-row em { color:var(--ice-blue); font-size:12px; font-style:normal; white-space:nowrap; }
.event-city-row b { color:var(--ice-blue); }

.filter-city-inline { position: relative; }
.filter-city-inline .profile-suggestions { top: calc(100% + 5px); right: 0; left: 0; z-index: 20; }
.filter-personal { display: grid; gap: 12px; }
.filter-personal > div { display: grid; gap: 7px; }
.filter-personal strong { font-size: 13px; }

@media (max-width: 700px) {
    .event-filter-row { align-items: stretch; flex-direction: column; }
    .event-city-control { align-self:flex-start; }
    .event-filter-scope { width:100%; }
}
.event-periods .chip {
    justify-content:center;
    min-width:0;
    border-radius:15px;
}
.period-calendar-button { padding:7px; color:var(--ice-blue); }
.period-calendar-icon { display:grid; place-items:center; width:20px; height:20px; }
.period-calendar-icon svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }

/* В карточке события действие «убрать» не выглядит вторым CTA: это
   компактный крестик рядом с основным действием. Жалоба тоже читается
   как иконка, но получает название при наведении и для скринридера. */
.event-action-button,
.event-report-button { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; padding:8px; }
.event-action-icon { display:grid; place-items:center; width:19px; height:19px; }
.event-action-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.event-cover-frame { position:relative; }
.event-cover-frame .event-cover { margin:0; }
.event-corner-button { position:absolute; z-index:2; top:12px; color:var(--ice); border-color:rgba(220,242,255,.28); background:rgba(3,20,42,.74); backdrop-filter:blur(9px); }
.event-corner-button:hover { color:#fff; border-color:rgba(209,239,255,.65); background:rgba(13,52,88,.90); }
.event-corner-left { left:12px; }
.event-corner-right { right:12px; }
.event-report-button { color:var(--ice-blue); }
.event-footer { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:auto; padding-top:8px; width:100%; }
.event-footer .event-actions { align-items:center; margin-top:0; }
.event-footer .event-source,
.event-footer .event-ticketland { margin-top:0; }
.event-owner-details { display:grid; gap:6px; }
.event-section { grid-column:1 / -1; padding:20px; border-radius:26px; background:linear-gradient(145deg,rgba(19,59,99,.82),rgba(5,25,53,.9)); border-color:rgba(126,202,247,.28); }
.event-section-heading { display:flex; align-items:center; gap:14px; list-style:none; cursor:pointer; }
.event-section-heading::-webkit-details-marker { display:none; }
.event-section-heading-copy { display:flex; align-items:end; justify-content:space-between; gap:18px; flex:1; min-width:0; }
.event-section-heading h2 { margin:0; font-size:23px; }
.event-section-heading p { max-width:560px; margin:0; color:var(--ink-muted); text-align:right; line-height:1.45; }
.event-section-chevron { display:grid; flex:none; width:32px; height:32px; place-items:center; color:var(--ice-blue); transition:transform .18s ease; }
.event-section[open] .event-section-chevron { transform:rotate(180deg); }
.event-section-content { margin-top:16px; padding-top:14px; border-top:1px solid rgba(139,205,245,.18); }
.event-section-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; }
.event-section-grid > .event { display:flex; flex-direction:column; height:100%; margin:0; background:linear-gradient(155deg,rgba(23,67,111,.88),rgba(7,30,61,.96)); border-color:rgba(136,207,250,.25); }
.event-section-grid > .event .event-body { flex:1; }
.event-section-grid > .button { align-self:end; min-height:52px; }

/* Жалоба — один читаемый сценарий на анкете, фото, сообщении и
   мероприятии. Нативные radio здесь не годятся: глобальный стиль полей
   делает их шириной во всю форму и разрывает подпись с контролом. */
.report-sheet-body { gap:14px; }
.report-sheet-heading { display:flex; align-items:flex-start; gap:12px; }
.report-sheet-heading h3 { margin:1px 0 4px; }
.report-sheet-heading .muted { margin:0; }
.report-sheet-icon { display:grid; place-items:center; width:40px; height:40px; padding:9px; flex:none; color:var(--ice-blue); border:1px solid rgba(163,222,255,.23); border-radius:13px; background:rgba(55,132,205,.18); }
.report-sheet-icon svg,.safety-mark-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.report-sheet-prompt { margin:0; color:var(--ink-muted); font-size:14px; line-height:1.45; }
.report-reasons { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.report-reason { display:grid; grid-template-columns:18px minmax(0,1fr); align-items:center; gap:9px; min-height:54px; margin:0; padding:10px 11px; color:var(--ice); border:1px solid rgba(161,215,249,.16); border-radius:14px; background:rgba(3,23,50,.48); cursor:pointer; transition:background .16s ease,border-color .16s ease,transform .16s ease; }
.report-reason:hover { border-color:rgba(177,228,255,.38); background:rgba(25,76,126,.54); }
.report-reason input { position:absolute; width:1px; height:1px; padding:0; opacity:0; pointer-events:none; }
.report-reason-dot { width:16px; height:16px; box-sizing:border-box; border:2px solid rgba(202,231,250,.56); border-radius:50%; background:rgba(3,16,36,.72); }
.report-reason input:checked + .report-reason-dot { border-color:#eefdff; background:radial-gradient(circle, #dff6ff 0 36%, #55bfff 42% 62%, transparent 68%); box-shadow:0 0 0 3px rgba(86,193,255,.20); }
.report-reason:has(input:checked) { border-color:rgba(119,207,255,.70); background:linear-gradient(115deg, rgba(35,119,196,.56), rgba(9,48,91,.58)); box-shadow:inset 0 1px 0 rgba(255,255,255,.09); }
.report-reason-title { font-size:14px; font-weight:590; line-height:1.25; }
.report-comment-label { margin:2px 0 -7px; color:var(--ice); font-size:12px; font-weight:650; }
.report-comment { min-height:90px; resize:vertical; }
.safety-mark { display:grid; place-items:center; }
.safety-mark-icon { display:grid; place-items:center; width:18px; height:18px; }

@media (max-width: 560px) {
    .report-reasons { grid-template-columns:1fr; }
}

/* Заголовок группы — самостоятельная плашка, а не ещё одна строка
   настройки. Пункты ниже отделены фоном и имеют одинаковый ритм. */
.settings-group { padding:12px; overflow:hidden; }
.settings-group-heading {
    margin:0 0 9px;
    padding:11px 12px;
    border:1px solid rgba(151, 215, 250, .19);
    border-bottom-color:rgba(151, 215, 250, .30);
    border-radius:15px;
    background:linear-gradient(105deg, rgba(55, 133, 209, .27), rgba(15, 51, 94, .50));
}
.settings-group-icon { width:35px; height:35px; padding:8px; color:#d4efff; background:rgba(101, 184, 246, .20); border-color:rgba(183, 231, 255, .23); }
.settings-group-title { color:#d6f1ff; font-size:11px; font-weight:760; letter-spacing:.11em; text-transform:uppercase; }
.settings-row,.settings-toggle-row { margin-top:7px; padding:10px 11px; border-color:rgba(149, 207, 242, .10); background:rgba(3, 22, 48, .36); }
.settings-row-title { font-size:13px; }
.settings-row .hint,.settings-toggle-row .hint { font-size:10.5px; }

@media (max-width: 1040px) {
    .discover-toolbar {
        grid-template-columns:minmax(0,1fr) auto auto auto;
        max-width:100%;
    }
    .toolbar-pill-wide { min-width:0; }
    .toolbar-pill strong { overflow:hidden; text-overflow:ellipsis; }
}

@media (min-width: 1041px) {
    .match-panel, .filters-panel {   box-sizing:border-box; overflow:auto; }
}

/* Компании. */
.companies-page,
.company-chat-page {
    width: min(1100px, calc(100% - 48px));
    margin: 0 auto;
    padding: 34px 0 90px;
}
.company-list { display: grid; gap: 14px; }
.company-list-section { padding:18px; border-radius:22px; }
.company-list-section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    list-style:none;
    cursor:pointer;
}
.company-list-section-heading::-webkit-details-marker { display:none; }
.company-list-section-heading h2 { margin:0; font-size:23px; }
.company-list-section-chevron {
    display:grid;
    place-items:center;
    flex:none;
    width:32px;
    height:32px;
    color:var(--ice-blue);
    transition:transform .18s ease;
}
.company-list-section[open] .company-list-section-chevron { transform:rotate(180deg); }
.company-list-section-body {
    display:grid;
    gap:14px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid rgba(139,205,245,.18);
}
.company-list-section-body > .company-row { margin:0; }
@media (max-width:800px) {
    .company-list-section { padding:16px; }
    .company-list-section-heading h2 { font-size:21px; }
}
.company-loading { padding: 24px; color: var(--ink-muted); text-align: center; }
.company-search-nav {
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 14px;
}
.company-search-nav .button {
    min-height:44px;
    justify-content:flex-start;
}
.company-search-back-icon {
    width:18px;
    height:18px;
    flex:none;
    transform:rotate(90deg);
}
.company-search-back-icon svg {
    width:100%;
    height:100%;
}
.company-row {
    display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 14px; align-items: center;
    width: 100%; padding: 17px; color: inherit; text-align: left; border-radius: 20px; cursor: pointer;
}
.company-row:hover { transform: translateY(-1px); border-color: rgba(180,225,255,.42); }
.company-row-icon { display:grid; place-items:center; width:54px; height:54px; color:var(--ice-blue); border-radius:17px; background:rgba(90,168,255,.13); }
.company-row-icon .ui-icon { width:28px; height:28px; }
.company-row-icon .ui-icon,
.section-visual-icon:has(svg) { color:#bfe8ff; }
.company-row-icon svg,
.section-visual-icon svg { fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.company-row-copy { min-width: 0; display:grid; gap:4px; }
.company-row-copy span,.company-row-copy small { color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.company-unread { min-width:26px; height:26px; display:grid; place-items:center; padding:0 7px; border-radius:99px; color:#06152c; background:var(--ice); font-weight:700; }
.company-request { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:16px; align-items:center; padding:18px; border-radius:22px; }
.company-avatar,.company-candidate-photo { width:72px; height:72px; object-fit:cover; border-radius:22px; background:rgba(90,168,255,.12); }
.company-avatar-empty { display:grid; place-items:center; color:var(--ice-blue); }
/* Заглушка аватара — кружок 72 точки, у карточки кандидата 170x210.
   Размер знака внутри задаём явно: без него он брал подставные 300
   и вылезал из аватара во весь экран. */
.company-avatar-empty .ui-icon { width:32px; height:32px; }
.company-candidate-photo.company-avatar-empty .ui-icon { width:64px; height:64px; }
.company-request-copy p,.company-candidate-copy p { margin:5px 0 0; color:var(--ink-muted); }
.company-request-actions,.company-candidate-actions { display:grid; gap:8px; min-width:170px; }
.empty-state { display:grid; place-items:center; gap:10px; padding:42px; text-align:center; border-radius:24px; }
.empty-state p { max-width:600px; margin:0; color:var(--ink-muted); line-height:1.55; }
.empty-state .button { max-width:300px; margin-top:8px; }
.empty-state-icon { width:52px; height:52px; color:var(--ice-blue); }
.empty-state-mark {
    display:grid;
    width:104px;
    height:60px;
    place-items:center;
    color:var(--ice-blue);
    border:1px solid rgba(145,211,250,.48);
    border-radius:999px;
    background:rgba(15,58,99,.54);
}
.empty-state-mark .empty-state-icon { width:30px; height:30px; }
.empty-state-mark .empty-state-icon svg { width:100%; height:100%; }
.empty-state-mark .empty-state-icon svg .fill { fill:currentColor; stroke:none; }
.empty-state-mark .empty-state-icon svg .cut { fill:#0b315b; stroke:none; }
.section-empty-state {
    width:100%;
    min-height:clamp(300px,46vh,500px);
    align-content:center;
    border:1px solid rgba(145,211,250,.34);
    background:linear-gradient(145deg,rgba(20,65,108,.82),rgba(7,31,63,.92));
}
.section-empty-state h2,
.section-empty-state h3 { margin:2px 0 0; }
.pane-body-empty,
.chats-page-empty-region { display:grid; align-items:center; min-height:clamp(320px,50vh,540px); }
@media (max-width:800px) {
    .hub-page:has(> .pane-body-empty),
    .chats-page:has(> .chats-page-empty-region) {
        display:flex;
        flex-direction:column;
        box-sizing:border-box;
        height:100%;
        min-height:100%;
        padding:18px 12px 60px;
    }
    /* align-items:center здесь центрировало карточку в ОСТАВШЕМСЯ месте,
       а не в постоянной высоте: у «Для вас» над пустотой ещё стоит
       переключатель «Рекомендации / Мероприятия», которого нет у
       «Чатов», и то же самое центрирование в разной по высоте области
       давало разный отступ снизу. Прижимаем карточку к низу: 60px снизу
       (владелец попросил в 1,5 раза больше исходных 40px) общие для
       обоих (padding у родителя выше), и от заголовка над ней это
       больше не зависит. Значение — end, а не flex-end: контейнер
       display:grid, а не flex, и align-items:flex-end в гриде не
       валидное значение — карточка молча оставалась без выравнивания. */
    .hub-page > .pane-body-empty,
    .chats-page > .chats-page-empty-region {
        display:grid;
        flex:1 1 auto;
        align-items:end;
        min-height:0;
        width:100%;
    }
    .hub-page > .pane-body-empty > .section-empty-state,
    .chats-page-empty-region > .section-empty-state {
        min-height:clamp(230px,36dvh,300px);
        padding:24px 20px;
    }
}
.section-empty-state-compact { min-height:260px; margin:14px; }
.feed-few-interests-hint {
    display:grid;

    align-items:center;
    gap:12px;
    width:100%;
    box-sizing:border-box;
    margin:0 0 14px;

    border:1px solid rgba(145,211,250,.34);
    border-radius:20px;
    background:linear-gradient(145deg,rgba(20,65,108,.92),rgba(7,31,63,.96));
}
.feed-few-interests-icon { width:54px; height:44px; }
.feed-few-interests-icon .empty-state-icon { width:26px; height:26px; }
.feed-few-interests-copy { flex:1; min-width:0; }
.feed-few-interests-copy p { margin:2px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.3; }
.feed-few-interests-hint > .button { flex:none; }
.feed-few-interests-close { display:grid; place-items:center; flex:none; width:36px; height:36px; padding:0; border:1px solid rgba(145,211,250,.3); border-radius:50%; background:rgba(9,35,68,.7); color:var(--ink); cursor:pointer; }
.feed-few-interests-close svg { width:18px; height:18px; }
@media (max-width:800px) {
    /* Раньше здесь стоял position:absolute — подсказка ложилась поверх
       шапки или фото анкеты вместо того, чтобы занимать своё место в
       потоке. Теперь она обычный блок над карточкой, как на десктопе;
       высоту фото под неё поджимает правило ниже, у .candidate-media-stage. */
    .feed-few-interests-hint {  gap:7px;  padding:8px 10px; box-shadow:0 14px 35px rgba(0,12,32,.4); }
    .feed-few-interests-icon { width:40px; height:40px; }
    .feed-few-interests-copy p { display:none; }
    .feed-few-interests-hint > .button {   min-height:40px; margin:0; padding:7px 10px; }
    /* .button растягивается на всю ширину (grid-column:1/-1), а значит
       занимает всю вторую строку сетки. Без явного места закрытие
       становится следующим auto-placed элементом и уезжает в первую
       свободную ячейку — низ и левый край, а не верх и правый. */
    .feed-few-interests-close { grid-column:3; grid-row:1; width:32px; height:32px; }
}
.section-empty-state-inline {
    grid-column:1 / -1;
    min-height:clamp(210px,28vh,300px);
    padding:30px;
    border-radius:20px;
}
.section-empty-state-inline .empty-state-mark { width:88px; height:52px; }
.company-empty-compact { min-height:185px; padding:22px; }
.company-empty-compact .empty-state-mark { width:72px; height:44px; }
.company-empty-compact .empty-state-mark .empty-state-icon { width:24px; height:24px; }
@media (max-width:800px) {
    .section-empty-state-inline {
        min-height:240px;
        padding:26px 20px;
    }
    .company-empty-compact h3 { font-size:19px; }
    .company-empty-compact p { font-size:13px; line-height:1.35; }
    .company-empty-compact .button { min-height:44px; margin-top:4px; }
}
.company-search-hero { display:flex; gap:18px; align-items:flex-start; padding:24px; margin:14px 0 18px; border-radius:24px; }
.company-search-hero p { max-width:720px; margin-bottom:0; color:var(--ink-muted); }
.company-search-form { display:grid; gap:22px; padding:24px; border-radius:24px; }
.company-search-form fieldset { padding:0; border:0; }
.company-search-form legend { margin-bottom:10px; font-size:17px; font-weight:650; }
.choice-row { display:flex; flex-wrap:wrap; gap:9px; }
.choice-chip { margin:0; cursor:pointer; }
.choice-chip input { position:absolute; opacity:0; pointer-events:none; }
.choice-chip span { display:block; padding:11px 16px; color:var(--ink-muted); border:1px solid var(--soft-line); border-radius:14px; background:rgba(5,24,51,.6); }
.choice-chip input:checked + span { color:#06152c; background:linear-gradient(145deg,#f7fcff,#b9e0ff); border-color:#fff; box-shadow:0 6px 16px rgba(0,8,28,.25); }
.age-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.company-active-line { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:16px 18px; border-radius:20px; }
.company-candidate { display:grid; grid-template-columns:170px minmax(0,1fr) 190px; gap:20px; align-items:center; padding:20px; border-radius:24px; }
.company-candidate-photo { width:170px; height:210px; border-radius:20px; }
.company-chat-layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; height:calc(100dvh - 130px); min-height:560px; }
.company-members,.company-conversation { border-radius:24px; }
.company-members { display:flex; flex-direction:column; gap:13px; padding:22px; }
.company-member-list { display:flex; flex-wrap:wrap; gap:7px; }
.company-member-list span { padding:7px 10px; border-radius:99px; background:rgba(90,168,255,.11); color:var(--ice); }
.company-members .button:first-of-type { margin-top:auto; }
.company-conversation { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.company-messages { flex:1; display:flex; flex-direction:column; gap:8px; min-height:0; padding:22px; overflow:auto; }
.company-messages::before { content:''; margin-top:auto; }
.company-message { align-self:flex-start; display:grid; gap:4px; max-width:min(72%,560px); padding:11px 14px; border-radius:8px 17px 17px 17px; background:rgba(35,88,142,.62); }
.company-message-mine { align-self:flex-end; border-radius:17px 8px 17px 17px; background:rgba(102,178,230,.22); }
.company-message small { color:rgba(215,234,248,.57); text-align:right; }
.company-compose { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:10px; padding:14px; border-top:1px solid var(--soft-line); background:rgba(4,20,43,.75); }
.danger-action { color:#ffd4d4 !important; }
.button-company { order:-1; }

/* Круглый аватар — отдельный слой, чтобы рамка не смешивалась с фото. */
.chat-avatar,.rail-photo,.company-avatar { border-radius: 50%; }
.match-ring-core img {   object-fit: contain;  }
/* Flex-колонка может сжимать высоту круга, сохраняя его ширину: так
   кольцо превращается в овал на невысоком экране. Кольцо — неделимый
   квадратный элемент, поэтому не отдаёт ни одну из сторон. */
.match-ring { flex:0 0 auto; aspect-ratio:1 / 1; }

.match-details { overflow:auto; padding-right:2px; }

/* Список общих интересов не должен превращаться в маленький второй экран.
   Он растёт вместе с карточкой, а прокручивается общий экран рекомендаций. */
.match-panel,
.match-details,
.candidate-info { overflow:visible; max-height:none; }
.match-panel { height:auto; min-height:0; }
.discover-layout > .match-panel { height:auto; }
.match-detail span:last-child { white-space:normal; overflow:visible; text-overflow:clip; }

.chat-compose-form {

    bottom:0;

}

.landing-money-note {
    margin:18px 0 0;
    color:var(--ink-muted);
    font-size:clamp(12px,1.1vw,14px);
    line-height:1.55;
}
.view { scrollbar-gutter:stable; }
.landing::-webkit-scrollbar-track { background:rgba(2,12,30,.28); }
.landing::-webkit-scrollbar-thumb { background:rgba(151,216,255,.32); border:3px solid transparent; background-clip:padding-box; border-radius:999px; }
.match-actions .like-button { min-height:58px; font-size:16px; font-weight:720; }
.match-actions .like-button span:first-child { font-size:20px; }
.match-actions .skip-button { min-height:44px; font-size:14px; }
/* Текст на терракоте белый — и в покое, и при наведении. Тёмный был
   нужен, пока кнопка была светло-голубой. */
.match-actions .like-button,
.match-actions .like-button:hover:not(:disabled) { color:#fff !important; text-shadow:0 1px 2px rgba(70, 12, 14, .45); }
.profile-avatar-frame { position:relative; display:grid; place-items:center; aspect-ratio:1; border-radius:50%; }
.profile-status-card { margin-bottom:18px; padding:24px 28px; border-radius:24px; }
.profile-status-card .panel-heading { margin-bottom:16px; }
.profile-status-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.profile-status-item { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:13px 14px; border:1px solid rgba(151,216,255,.18); border-radius:16px; background:rgba(4,21,45,.46); }
.profile-status-item > div { display:grid; gap:4px; min-width:0; }
.profile-status-item strong { font-size:14px; }
.profile-status-item span { color:var(--ink-muted); font-size:12px; }
.profile-status-item .status-ok { color:#9ce7be; }
.profile-status-item .status-warn { color:#ffd49b; }
.profile-status-settings { margin-top:14px; }
.profile-avatar-photo { width:78%; height:78%; object-fit:cover; border-radius:50%; }
.profile-avatar-decoration { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.profile-avatar-preview { display:grid; grid-template-columns:minmax(0,1fr) 220px; align-items:center; gap:28px; margin-bottom:18px; padding:24px 28px; border-radius:24px; }
.profile-avatar-preview-copy h2 { margin:5px 0 8px; }
.profile-avatar-preview-copy p { max-width:650px; margin:0 0 16px; color:var(--ink-muted); line-height:1.55; }
.profile-avatar-preview-art { width:190px; justify-self:center; filter:drop-shadow(0 12px 24px rgba(0,0,0,.28)); }
.decoration-header { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:26px 30px; border-radius:26px; }
.decoration-header h1 { margin:5px 0 7px; }
.decoration-header p { margin:0; color:var(--ink-muted); }
.decoration-list { display:grid; gap:10px; width:100%; margin:22px 0 0; }
.decoration-card { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:16px; min-width:0; padding:12px 16px; color:var(--ink); background:linear-gradient(145deg,rgba(25,73,119,.82),rgba(6,29,60,.94)); border:1px solid rgba(126,196,239,.23); border-radius:20px; cursor:pointer; font:inherit; text-align:left; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.decoration-preview { position:relative; display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 35%,#2d5c82,#071b3a 72%); }
.decoration-preview > img:first-child { width:78%; height:78%; object-fit:cover; border-radius:50%; }
.decoration-preview > img:last-child { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.decoration-preview-empty { color:var(--ink-muted); font-size:12px; }
.decoration-card-copy { display:grid; gap:4px; }
.decoration-card-copy strong { font-size:16px; }
.decoration-card-copy small { color:var(--ink-muted); line-height:1.4; }
.decoration-card:hover,.decoration-card:focus-visible,.decoration-card.is-selected { transform:translateY(-3px); border-color:var(--ice-blue); box-shadow:0 12px 28px rgba(41,157,224,.2); outline:none; }
.decoration-card.is-selected { border-width:2px; }
.decoration-header > .button { width:auto; min-width:160px; flex:none; }
.decoration-note { margin-top:18px; text-align:center; }
.motif-card[role="button"] { cursor:pointer; transition:transform .18s ease, border-color .18s ease; }
.motif-card[role="button"]:hover,.motif-card[role="button"]:focus-visible { transform:translateY(-3px); border-color:var(--ice-blue); outline:none; }
@media (max-width:700px) { .profile-avatar-preview { grid-template-columns:1fr; text-align:center; } .profile-avatar-preview-art { order:-1; width:170px; } }
@media (max-width:700px) { .profile-status-card { padding:20px; } .profile-status-list { grid-template-columns:1fr; } .profile-status-item { align-items:flex-start; } }
@media (max-width:650px) { .decoration-header { display:block; padding:22px; } .decoration-header .button { margin-top:16px; } .decoration-card { grid-template-columns:68px minmax(0,1fr); } }
@media (max-width:1050px) { .event-section { padding:16px; } .event-section-heading-copy { display:block; } .event-section-heading p { margin-top:6px; text-align:left; } .event-section-grid { grid-template-columns:1fr; } }
@media (max-width:800px) {
    .event-section:not([open]) .event-section-heading p { margin-bottom:0; }
}
@media (max-width:900px) { .landing-story { grid-template-columns:1fr; width:min(100% - 32px,680px); padding:28px 0; } .landing-story-copy { min-height:0; } }

/* О проекте. */
.about-page-current,.support-page-current { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:34px 0 90px; }
.about-intro { padding:clamp(28px,5vw,58px); border-radius:30px; }
.about-intro h1 { max-width:840px; font-size:clamp(36px,5vw,64px); }
.about-intro > p { max-width:820px; color:var(--ink-muted); font-size:18px; line-height:1.65; }
.about-intro-actions { display:flex; gap:10px; width:min(520px,100%); margin-top:24px; }
.about-section { margin-top:58px; }
.about-section-heading { max-width:820px; margin-bottom:20px; }
.about-section-heading h2 { font-size:clamp(27px,4vw,42px); }
.about-section-heading p { color:var(--ink-muted); line-height:1.6; }
.about-step-grid,.about-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.about-step,.about-feature { border:1px solid rgba(151,216,255,.26); background:linear-gradient(145deg,rgba(27,73,116,.84),rgba(7,29,59,.92)); box-shadow:0 16px 36px rgba(0,8,28,.2),inset 0 1px 0 rgba(255,255,255,.05); }
.about-step { position:relative; min-height:240px; padding:24px; border-radius:24px; }
.about-step-number { position:absolute; top:18px; right:19px; color:rgba(203,233,255,.35); font-size:13px; letter-spacing:.1em; }
.about-step p,.about-feature p,.about-partners p { color:var(--ink-muted); line-height:1.55; }
.about-partners { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:center; gap:32px; padding:32px; border-radius:27px; }
.about-principles { padding:30px; border-radius:27px; }
.about-principles .about-feature { background:linear-gradient(145deg,rgba(28,73,115,.76),rgba(7,28,57,.88)); box-shadow:0 12px 28px rgba(0,8,28,.16); }
.about-footer a { color:var(--ice-blue); }

/* Поддержка. */
.support-intro { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:clamp(28px,5vw,54px); border-radius:30px; }
.support-intro h1 { font-size:clamp(36px,5vw,62px); }
.support-intro p { max-width:760px; color:var(--ink-muted); font-size:18px; line-height:1.6; }
.support-intro-icon { width:90px; height:90px; flex:none; color:var(--ice-blue); }
.support-payment,.support-motifs { margin-top:20px; padding:28px; border-radius:27px; }
.support-payment-form { margin-top:20px; }
.support-email-field { display:grid; gap:8px; max-width:560px; font-weight:650; }
.support-email { width:100%; }
.support-account-note { max-width:720px; margin:9px 0 0; color:var(--ink-muted); font-size:14px; line-height:1.5; }
.support-total { display:inline-flex; margin:18px 0 0 !important; padding:9px 13px; border:1px solid rgba(151,216,255,.24); border-radius:13px; background:rgba(4,22,47,.55); color:var(--ice) !important; font-size:15px !important; font-weight:700; }
.support-amounts { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0 14px; }
.support-amount { min-height:54px; padding:12px; color:var(--ice); border:1px solid var(--soft-line); border-radius:16px; background:rgba(4,22,47,.65); font:inherit; font-weight:650; cursor:pointer; }
.support-amount:hover { border-color:rgba(189,230,255,.48); }
.support-amount-active { color:#06152c; background:linear-gradient(145deg,#fff,#c5e6ff); border-color:#fff; box-shadow:0 8px 22px rgba(0,8,28,.28),inset 0 1px 0 #fff; }
.support-custom-amount { margin-bottom:14px; }
.support-pay { max-width:320px; }
.support-payment-status { min-height:22px; color:var(--ice-blue); }
.support-legal-note { color:var(--ink-muted); font-size:13px; }
.support-legal-note a,.support-links-inline a { color:var(--ice-blue); }
.motif-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:20px; }
.motif-card { min-width:0; margin:0; padding:9px; border:1px solid var(--soft-line); border-radius:18px; background:rgba(4,21,45,.56); }
.motif-card img { width:100%; aspect-ratio:1; object-fit:contain; border-radius:12px; background:rgba(9,37,70,.55); }
.motif-card figcaption { display:flex; gap:7px; align-items:center; padding:10px 3px 3px; font-size:13px; }
.motif-card figcaption span { color:rgba(201,229,248,.48); }
.motif-card figcaption small { margin-left:auto; color:var(--ice-blue); white-space:nowrap; }
.support-rules { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.support-rules p { margin:0; padding:14px; color:var(--ink-muted); border-radius:16px; background:rgba(5,25,52,.62); }
.support-links-inline { display:flex; gap:20px; justify-content:center; padding:24px; }
.decoration-card.is-locked { opacity:.72; }
.decoration-card.is-locked:hover,.decoration-card.is-locked:focus-visible { opacity:1; }

@media (max-width: 800px) {
    .companies-page,.company-chat-page,.about-page-current,.support-page-current { width:auto; padding:18px 12px 104px; }
    .nav-item-events .nav-title { display:none; }
    .company-request,.company-candidate { grid-template-columns:70px minmax(0,1fr); }
    .company-request-actions,.company-candidate-actions { grid-column:1 / -1; grid-template-columns:1fr 1fr; }
    .company-candidate-photo { width:70px; height:90px; }
    .company-chat-layout { display:flex; flex-direction:column; height:calc(100dvh - 116px); min-height:0; }
    .company-members { flex:none; padding:14px; }
    .company-member-list,.company-members .hint { display:none; }
    .company-members .button { margin-top:0 !important; }
    .company-conversation { flex:1; min-height:0; }
    .about-step-grid,.about-feature-grid { grid-template-columns:1fr; }
    .about-partners { grid-template-columns:1fr; padding:24px; }
    .about-intro-actions { flex-direction:column; }
    .support-intro-icon { display:none; }
    .support-amounts { grid-template-columns:1fr 1fr; }
    .motif-strip { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
    .motif-card { flex:0 0 68%; scroll-snap-align:start; }
    .support-rules { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .button,.nav-item,.company-row { transition:none !important; }
}

/* Consent is ordinary prose. Global field-label typography must not turn
   legal acceptance text or its links into all caps. */
.field label.consent,
.field label.consent span,
.field label.consent a,
.field > .hint a {
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Chromium/WebKit autofill must keep the same night field as manual input. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ice-white) !important;
    caret-color: var(--ice-white) !important;
    -webkit-box-shadow: 0 0 0 1000px #071d3b inset !important;
    box-shadow: 0 0 0 1000px #071d3b inset !important;
    border-color: rgba(174, 220, 250, .28) !important;
    background-color: #071d3b !important;
    transition: background-color 99999s ease-out 0s;
}

/* The app's real Lundir pictogram is used everywhere instead of a generic
   pentagonal placeholder. */
.lundir-app-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.commerce-header-icon.lundir-app-icon,
.lundir-pack-icon.lundir-app-icon,
.settings-row-icon.lundir-app-icon,
.settings-group-icon.lundir-app-icon {
    color: inherit;
}

/* Candidate card: the right rail already explains common interests in
   detail, so the area under the photo is reserved for the profile itself. */
.candidate-about-block { margin-top: 12px; }
.candidate-info-facts,
.candidate-personal-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}
.candidate-info-fact,
.candidate-personal-fact {
    min-height: 32px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    color: rgba(235, 247, 255, .94);
    background: rgba(43, 121, 184, .22);
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.25;
}
.candidate-info-fact-icon,
.candidate-info-fact-icon svg,
.candidate-personal-fact-icon,
.candidate-personal-fact-icon svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: inherit;
}
.candidate-about-label {
    display: block;
    margin-bottom: 5px;
    color: rgba(201,229,248,.67);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.candidate-about-block .candidate-about { margin-top: 0; }

/* Chat layout: only messages scroll. Header and composer always remain
   inside the visible conversation pane, as in the company chat. */
.conversation {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}
.chat-message-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 14px 0;
    overscroll-behavior: contain;
}
.chat-compose-form {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    z-index: 4;
}

.main-photo-badge {    cursor: help; }

@media (min-width: 1041px) {
    .discover-header { margin-bottom: 10px; }
    .discover-toolbar { margin-top: 10px; }
    .discover-layout { flex: 1 1 auto; min-height: 0; align-items: stretch; }
    .candidate-card {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .candidate-gallery {
        flex: 1 1 0;
        min-height: 230px;
        display: flex;
        flex-direction: column;
    }
    .candidate-media-stage {
        flex: 1 1 auto;
        height: auto;
        min-height: 210px;
    }
    .candidate-info {
        flex: 0 0 auto;
        max-height: none;
        overflow: visible;
        padding-top: 12px;
        padding-bottom: 14px;
    }
    .match-panel,
    .filters-panel {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
    }
}

/* =====================================================================
 * 2026-09-11 release pass 2: pre-publication UX + thematic puffins.
 * ===================================================================== */

/* The six interest categories use the same puffin illustrations as the app. */
.interest-overview-heading {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}
.interest-puffin-thumb {
    width: 74px;
    height: 74px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 12, 35, .24));
}
.interest-overview-category-icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    padding: 18px;
    color: #aee8ff;
    border: 1px solid rgba(113,190,243,.22);
    border-radius: 20px;
    background: rgba(31,91,146,.34);
}
.interest-overview-category-icon .sm-icon,
.interest-overview-category-icon svg { width: 100%; height: 100%; }
.interest-overview-title h2 { margin: 0 0 3px; font-size: 19px; }
.interest-overview-empty {
    min-height: 112px;

    gap: 4px;
    margin-top: 12px;
    padding: 15px;
    border: 1px dashed rgba(123, 203, 250, .18);
    border-radius: 14px;
    background: rgba(8, 33, 66, .35);
}
.interest-overview-empty p,
.interest-overview-empty small { margin: 0; }
.interest-overview-empty p { color: #eaf7ff; font-size: 14px; font-weight: 650; }
.interest-overview-empty small { color: var(--v2-muted); font-size: 12px; line-height: 1.4; }
.interest-overview-empty-puffin {
    grid-template-columns: minmax(96px,.72fr) minmax(0,1fr);
    align-items:center;
    gap:14px;
}
.interest-overview-empty-puffin .interest-puffin-large {
    width:100%;
    height:150px;
    max-height:none;
    object-fit:contain;
}
.interest-overview-empty-puffin > div { display:grid; gap:5px; }
.interest-overview-covers {

    grid-template-columns: repeat(5, minmax(0, 1fr));

    margin-top: 14px;
}
.interest-overview-cover { min-width: 0; }
.interest-overview-cover > img,
.interest-overview-cover > div { width: 100% !important; }
.interest-overview-cover span {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: #cfe6f8;
    font-size: 11px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.interest-overview-action { width: 100%; margin-top: 14px; }

/* One category is edited at a time. This prevents the search results from
   competing with five unrelated category cards below them. */
.interest-category-workspace {
    display: grid;
    grid-template-columns: minmax(340px, .78fr) minmax(440px, 1.22fr);
    gap: 12px;
    align-items: start;
}
.interest-selected-return { min-width:0; display:grid; gap:10px; align-content:start; }
.interest-selected-return .interest-category-done { width:100%; }
.interest-category-header-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.interest-selected-panel,
.interest-search-panel { min-width: 0; padding: 20px; border-radius: 21px; }
.interest-selected-heading,
.interest-search-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.interest-selected-heading h2,
.interest-search-heading h2 { margin: 3px 0 0; font-size: 20px; }
.interest-search-heading > p { max-width: 250px; margin: 0; color: var(--v2-muted); font-size: 12px; text-align: right; }
.interest-count {
    flex: none;
    padding: 6px 9px;
    border: 1px solid rgba(108, 205, 255, .20);
    border-radius: 999px;
    color: #dff7ff;
    background: rgba(52, 136, 215, .12);
    font-size: 12px;
}
.interest-category-empty-art {
    min-height: 220px;
    display: grid;

    align-items: center;
    gap: 18px;
    padding: 14px;
    border: 1px dashed rgba(123, 203, 250, .16);
    border-radius: 16px;
    background: rgba(6, 29, 60, .35);
}
.interest-puffin-large { width: 100%; max-height: 210px; object-fit: contain; }
.interest-category-empty-art strong { color: #f0fbff; font-size: 17px; }
.interest-category-empty-art p { margin: 5px 0 0; color: var(--v2-muted); font-size: 13px; line-height: 1.45; }
.interest-selected-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}
.interest-selected-tile { position: relative; min-width: 0; }
.interest-selected-cover > img,
.interest-selected-cover > div { width: 100% !important; }
.interest-selected-name {
    margin-top: 6px;
    overflow: hidden;
    color: #d9ebf8;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.interest-selected-tile.is-hidden { opacity: .66; }
.interest-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #fff;
    background: rgba(2, 15, 33, .82);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}
.interest-remove .ui-icon { width:16px; height:16px; }
.interest-restore {
    width: 100%;
    margin-top: 7px;
    padding: 6px 8px;
    color: #cbefff;
    background: rgba(35, 101, 166, .18);
    border: 1px solid rgba(100, 196, 247, .18);
    border-radius: 9px;
    font-size: 11px;
    cursor: pointer;
}
.interest-hidden-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(112, 181, 237, .12); }
.interest-hidden-block > p { margin: 0 0 10px; }

.interest-search-panel > input { width: 100%; max-width: none; }
.interest-search-status { min-height: 20px; margin: 8px 0 0; }
.interest-search-results { display: grid; gap: 7px; margin-top: 8px; }
.interest-result {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 8px 10px 8px 8px;
    color: inherit;
    text-align: left;
    background: rgba(7, 31, 64, .48);
    border: 1px solid rgba(110, 189, 242, .13);
    border-radius: 13px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.interest-result:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(111, 217, 255, .30);
    background: rgba(17, 57, 105, .55);
}
.interest-result:disabled { cursor: default; }
.interest-result-added { border-color: rgba(105, 221, 184, .20); background: rgba(25, 91, 79, .18); }
.interest-result-cover { width: 46px; }
.interest-result-copy { min-width: 0; display: grid; gap: 3px; }
.interest-result-copy strong { overflow: hidden; color: #edf9ff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.interest-result-copy small { color: var(--v2-muted); font-size: 11px; }
/*
 * Цикл целиком — «Гарри Поттер» против «Узника Азкабана».
 *
 * Подписан словом и отделён заголовком: без этого цикл стоит первой
 * строкой среди своих же частей и читается как ещё одна книга. Цвет
 * холодный, а не терракотовый: терракота означает симпатию и мэтч.
 */
.interest-result-series { color: var(--v2-cyan) !important; font-weight: 600; }
.interest-search-group {
    margin: 10px 0 2px;
    color: var(--v2-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.interest-search-group:first-child { margin-top: 2px; }
.interest-search-split {
    height: 0;
    margin: 10px 0 0;
    border: 0;
    border-top: 1px solid rgba(143, 184, 223, .22);
}
.interest-result-state { color: #9fe7ff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.interest-result-added .interest-result-state { color: #91e5c7; }

/* Mobile navigation: five primary destinations are readable. Events stay
   inside “Для вас”; Settings stays reachable from Profile. */
.mobile-discover-switch { display: none; }

/* Several labels used to be 8.5–9 px. On real phones that reads as UI
   decoration rather than information. */
.toolbar-pill small,
.filter-toggle-copy small,
.photo-status,
.profile-photo-add small,
.profile-field small,
.profile-subsection-title p,
.choice-copy small,
.interest-category-head small,
.interest-category-names span,
.interest-category-empty,
.advanced-filter-title p,
.filter-form-field small,
.clear-city,
.filter-choice-copy small { font-size: 11px; line-height: 1.35; }
.main-photo-badge {    font-size: 10px; }

@media (max-width: 980px) {
    .interest-category-workspace { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
    .nav-item-events,
    .nav-item-settings { display: none; }
    .nav-title { font-size: 11px; }
    .nav-mark { width: 24px; height: 24px; }
    .nav-mark svg { width: 21px; height: 21px; }

    .mobile-discover-switch {
        display: flex;
        width: 100%;
        margin: -4px 0 14px;
    }
    .mobile-discover-switch .switch-item { min-width: 0; flex: 1; }

    /* Settings is removed only from the crowded bottom bar; it remains a
       clear action at the top of Profile. */
    .profile-page-header .header-secondary-action { display: inline-flex; }
    .interest-category-header .header-secondary-action { display: inline-flex; }

    .interest-category-header { display: block; }
    .interest-category-header-actions { justify-content: flex-start; margin-top: 13px; }
    .interest-category-header-actions .button,
    .interest-category-header-actions .header-secondary-action { flex: 1; min-width: 140px; }
    .interest-selected-panel,
    .interest-search-panel { padding: 16px; }
    .interest-search-heading { display: block; }
    .interest-search-heading > p { margin-top: 5px; text-align: left; }
    .interest-category-empty-art { grid-template-columns: 112px minmax(0, 1fr); min-height: 170px; }
    .interest-selected-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .interest-overview-covers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .interest-overview-heading { grid-template-columns: 62px minmax(0,1fr); }
    .interest-puffin-thumb { width: 62px; height: 62px; }
    .interest-overview-category-icon { width:62px; height:62px; padding:15px; border-radius:17px; }
    .interest-overview-empty-puffin { grid-template-columns:100px minmax(0,1fr); }
    .interest-overview-empty-puffin .interest-puffin-large { height:126px; }
    .interest-selected-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .interest-category-empty-art { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 10px; }
    .interest-category-empty-art strong { font-size: 15px; }
    .interest-result { grid-template-columns: 46px minmax(0, 1fr); }
    .interest-result-state { grid-column: 2; }
}
.interest-category-empty-puffin span {   line-height: 1.35; }
@media (max-width: 800px) {
    .interest-category-empty-puffin { grid-template-columns: 104px minmax(0, 1fr); }
    .interest-category-empty-puffin img { width: 104px; height: 116px; }
}

/* Keep dark-background placeholders from falling back to black. */
.company-avatar-empty,
.company-avatar-empty .ui-icon,
.interest-cover-empty,
.interest-cover-empty .ui-icon,
.interest-category-icon,
.visual-list-icon,
.nav-mark {
    color: var(--ice-blue);
}
.interest-category-card {

    flex-direction: column;

    overflow: hidden;
}
.interest-category-head {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: center;
    gap: 12px;

}
.interest-category-head-art {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 12, 35, .24));
    animation: subtle-float 5.6s ease-in-out infinite;
}
.interest-covers,
.interest-category-empty-puffin {
    flex: 1 1 auto;
}
.interest-category-empty-puffin {

    background: rgba(6, 29, 60, .35);
}
.interest-category-empty-puffin img {

    justify-self: center;

}
.interest-edit,
.interest-overview-action { margin-top: auto; }
.interest-editor-card {
    min-height: 335px;
    display: flex;
    flex-direction: column;
}
.interest-overview-covers,
.interest-overview-empty { flex: 1 1 auto; }
.interest-overview-empty { display: grid; align-content: center; }

@keyframes subtle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Landing: cleaner desktop composition and no visible page scrollbar. */
.landing {
    width: 100%;
    padding-inline: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.landing::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (min-width: 900px) {
    .landing .landing-hero {

        top: 0;

        padding-right: 8px;
    }
    .landing .landing-story,
    .landing .landing-partners,
    .landing-site-footer { width: 100%; }
    .landing-points .card,
    .landing-story-copy,
    .landing .landing-foot,
    .landing .landing-partners {
        backdrop-filter: blur(8px);
    }
}

/* Gentle motion and a more finished feeling. */
@media (hover:hover) and (pointer:fine) {
    .interest-category-card:hover,
    .interest-editor-card:hover,
    .landing-points .card:hover,
    .landing-story-copy:hover {
        transform: translateY(-3px);
        border-color: rgba(170, 224, 255, .32);
        box-shadow: 0 16px 36px rgba(0, 8, 28, .22);
    }
}

/* Match celebration: small entrance motion and a soft chime after the
   like action, still subtle enough for the web. */
.match-overlay { opacity: 0; transition: opacity .22s ease; }
.match-overlay-shown { opacity: 1; }
.match-modal {
    transform: translateY(10px) scale(.98);
    opacity: 0;
    transition: transform .26s ease, opacity .26s ease;
}
.match-overlay-shown .match-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.match-modal img { animation: brand-breathe 4.8s ease-in-out infinite; }

@media (max-width: 900px) {
    .interest-category-head { grid-template-columns: 54px minmax(0, 1fr); }
    .interest-category-head-art { width: 54px; height: 54px; }
}

/* =====================================================================
 * 2026-09-11 release 5: browser feedback corrections.
 * ===================================================================== */
body:has(.landing) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.landing {

    overscroll-behavior-y: auto !important;
    scrollbar-gutter: auto !important;
}

.button:not(.button-quiet),
.header-secondary-action,
.toolbar-filter-button {
    color: #071a32;
    background: linear-gradient(145deg, #dcecf8 0%, #b9ddf6 48%, #79bce9 100%);
    border: 1px solid rgba(83, 163, 220, .66);
    box-shadow:
        0 10px 24px rgba(0, 8, 28, .34),
        0 2px 0 rgba(33, 88, 137, .44),
        inset 0 1px 0 rgba(255,255,255,.34),
        inset 0 -1px 0 rgba(38, 92, 142, .20);
}
.button:not(.button-quiet):hover:not(:disabled),
.header-secondary-action:hover,
.toolbar-filter-button:hover {
    background: linear-gradient(145deg, #e7f4fd 0%, #c5e5fb 46%, #82c6f2 100%);
    border-color: rgba(101, 187, 239, .80);
    transform: translateY(-1px);
    box-shadow: 0 15px 30px rgba(0, 10, 35, .39), 0 3px 0 rgba(33, 88, 137, .42), inset 0 1px 0 rgba(255,255,255,.38);
}

.interest-category-grid { align-items: stretch; }
.interest-category-card {
    display: grid !important;

    height: 100%;
}
.interest-category-head { margin-bottom: 10px; }
.interest-covers { align-self: start; margin: 8px 0 12px; }
.interest-cover .interest-cover-genres {
    margin-top: 2px;
    color: var(--ink-muted);
    font-size: 11px;
    line-height: 1.25;
}
.interest-category-empty-puffin {
    position: relative;

    grid-template-columns: 1fr !important;
    place-items: center;
    align-content: center;

    overflow: hidden;

    border: 1px dashed rgba(123, 203, 250, .16);
    border-radius: 15px;

    background-position: center 43%;
    background-repeat: no-repeat;
    background-size: auto 142px;
}
.interest-category-empty-puffin span {
    align-self: end;
    margin-top: 144px;

}
.interest-music .interest-category-empty-puffin { background-image: url('../img/puffin-music.png'); }
.interest-film .interest-category-empty-puffin { background-image: url('../img/puffin-film.png'); }
.interest-series .interest-category-empty-puffin { background-image: url('../img/puffin-series-v2.png'); }
.interest-game .interest-category-empty-puffin { background-image: url('../img/puffin-game.png'); }
.interest-book .interest-category-empty-puffin { background-image: url('../img/puffin-book.png'); }
.interest-anime .interest-category-empty-puffin { background-image: url('../img/puffin-anime.png'); }
.interest-edit { margin-top: 10px !important; }

.match-modal { width: min(100%, 470px); overflow: hidden; }
.match-original-video {
    display: block;
    width: min(100%, 360px);
    max-height: 300px;
    margin: 0 auto 12px;
    object-fit: contain;
    border-radius: 20px;
    background: rgba(3, 17, 38, .46);
}
/* =====================================================================
 * 2026-09-11 release 7: layout repair + real sprite match animation.
 * ===================================================================== */

/* Landing: body/browser owns the scroll. The hero must never become a
   sticky layer over the story cards. */
html:has(.landing),
body:has(.landing) {
    min-height: 100%;
    height: auto;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
body:has(.landing) #app {
    min-height: 100dvh;
    height: auto;
}
.landing {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
}

@media (min-width: 900px) {
    .landing {
        display: grid;
        grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr) !important;
        grid-template-rows: repeat(5, max-content);
        grid-template-areas:
            "hero points"
            "story story"
            "foot foot"
            "partners partners"
            "site-footer site-footer";
        width: min(1240px, calc(100% - 64px)) !important;
        margin: 0 auto !important;
        padding: 48px 0 64px !important;
        gap: 24px 42px !important;
        align-items: start;
        align-content: start;
    }
    .landing .landing-hero {
        grid-area: hero;
        position: static !important;
        inset: auto !important;
        align-self: start !important;
        padding: 0 !important;
    }
    .landing .landing-points { grid-area: points; }
    .landing .landing-story { grid-area: story; }
    .landing .landing-foot {
        grid-area: foot;
        width: min(920px, 100%) !important;
        max-width: 920px !important;
        justify-self: center;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 230px !important;
        align-items: center !important;
        gap: 28px !important;
        padding: 26px 28px !important;
        text-align: left !important;
    }
    .landing .landing-foot .button {
        width: 230px !important;
        max-width: 230px !important;
        margin: 0 !important;
        justify-self: end;
    }
    .landing .landing-partners {
        grid-area: partners;
        width: min(1040px, 100%) !important;
        max-width: 1040px !important;
        justify-self: center;
    }
    .landing-site-footer {
        grid-area: site-footer;
        width: min(1040px, 100%) !important;
        max-width: 1040px !important;
        justify-self: center;
    }
}

/* Empty interest category: use the actual thematic PNG directly, not a
   CSS background. This is both more reliable and easier to size evenly. */
.interest-category-card {
    grid-template-rows: auto minmax(190px, 1fr) auto !important;
    min-height: 350px !important;
}
.interest-category-empty-puffin {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 190px !important;
    margin: 8px 0 12px !important;
    padding: 10px 12px !important;
    text-align: center !important;
    background-image: none !important;
    background-color: rgba(6, 29, 60, .34) !important;
}
.interest-category-empty-puffin img {
    display: block !important;
    width: min(150px, 72%) !important;
    height: 150px !important;
    max-width: none !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    filter: drop-shadow(0 12px 20px rgba(0, 12, 35, .24));
    animation: none !important;
}
.interest-category-empty-puffin span {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    color: rgba(214, 234, 248, .80) !important;
    font-size: 12px !important;
}

/* The v2 backdrop could enter a different stacking context and cover the
   fixed filter panel on narrower desktop windows. The page itself remains
   visible; the filter is the only foreground surface. */
body.filters-open::after { display: none !important; }
.interest-anime .interest-category-empty-puffin img,
.interest-hobby .interest-category-empty-puffin img {
    width: min(170px, 82%) !important;
}
@media (max-width: 900px) {
    .interest-category-card { min-height: 330px !important; }
    .interest-category-empty-puffin img { width: 136px !important; height: 136px !important; }
}

/* Real Web match animation. Every bird is a PNG sprite frame; the old
   MP4 is not rendered anywhere. */
.match-sprite-overlay {
    position: fixed;
    z-index: 160;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    opacity: 0;
    background: rgba(1, 8, 21, .78);
    backdrop-filter: blur(16px);
    transition: opacity .22s ease;
}
.match-sprite-overlay.is-open { opacity: 1; }
.match-sprite-card {
    position: relative;
    width: min(94vw, 760px);
    max-height: min(94dvh, 760px);
    overflow: auto;
    padding: 18px 20px 22px;
    border-radius: 30px;
    text-align: center;
}
.match-sprite-close {
    position: absolute;
    z-index: 5;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    color: rgba(232, 247, 255, .88);
    background: rgba(4, 23, 48, .72);
    border: 1px solid rgba(159, 217, 255, .22);
    border-radius: 50%;
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.match-sprite-close .ui-icon { width:20px; height:20px; }
.match-sprite-stage {
    position: relative;
    height: 370px;
    overflow: hidden;
    border-radius: 23px;
    background:
        radial-gradient(circle at 50% 62%, rgba(98, 190, 247, .16), transparent 32%),
        linear-gradient(180deg, rgba(7, 29, 60, .18), rgba(4, 19, 43, .48));
}
.match-sprite-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .6;
    background-image:
        radial-gradient(circle at 16% 22%, rgba(214,241,255,.70) 0 1px, transparent 1.5px),
        radial-gradient(circle at 78% 16%, rgba(214,241,255,.55) 0 1px, transparent 1.5px),
        radial-gradient(circle at 66% 36%, rgba(214,241,255,.45) 0 1px, transparent 1.5px),
        radial-gradient(circle at 31% 43%, rgba(214,241,255,.48) 0 1px, transparent 1.5px);
    background-size: 190px 150px, 230px 170px, 270px 210px, 210px 190px;
    pointer-events: none;
}
.match-sprite-glow {
    position: absolute;
    left: 50%;
    bottom: 30px;
    width: 58%;
    height: 90px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(92, 193, 255, .18), transparent 68%);
    filter: blur(10px);
}
/*
 * Птица ведётся за точку опоры кадра (глаз в полёте, лапы на земле):
 * положение в точках и размер рамки задаёт match-animation.js, поэтому
 * здесь только угол отсчёта. Размер — из настройки `size`, соотношение
 * сторон — как у холста набора v26, иначе `contain` оставит поля.
 */
.match-sprite-bird {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 300px;
    height: 200px;
    object-fit: contain;
    transform-origin: 0 0;
    will-change: transform;
    filter: drop-shadow(0 14px 18px rgba(0, 8, 28, .34));
    pointer-events: none;
}
/*
 * Облачко общей мысли. Стоит ровно между птицами — это развязка:
 * не «их свели», а «они подумали об одном».
 *
 * Три части появляются в обратном порядке — точка, вторая точка,
 * тело, — каждая своей пружиной и из своей точки роста. Так же,
 * как в приложении.
 */
.match-cloud {
    position: absolute;
    z-index: 3;
    left: 50%;
    /* Считаем от низа: облако обязано висеть **над** головами и
       пузырьками смотреть в просвет между птицами. От верха его
       пришлось бы пересчитывать при каждой смене высоты сцены. */
    bottom: 62%;
    width: min(240px, 34%);
    /* Рамка равна самому облаку: части вырезаны одной общей рамкой
       (`tools`-скрипт в истории правок), иначе две трети рамки пустые
       и облако уезжает вверх. */
    aspect-ratio: 620 / 345;
    transform: translateX(-50%);
    pointer-events: none;
}
.match-cloud img,
.match-cloud span {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s ease, transform .34s cubic-bezier(.22,1.2,.36,1);
}
/*
 * Каждая часть растёт из своего места, а не из общего центра: пузырёк
 * поднимается от птиц, тело разворачивается над ними. Общая точка
 * роста заставляла бы пузырьки разлетаться в стороны.
 */
.match-cloud-far { transform-origin: 50% 92%; }
.match-cloud-near { transform-origin: 50% 78%; }
.match-cloud-body { transform-origin: 50% 84%; }
.match-cloud.is-visible .match-cloud-far { opacity: 1; transform: scale(1); transition-delay: 0s; }
.match-cloud.is-visible .match-cloud-near { opacity: 1; transform: scale(1); transition-delay: .09s; }
.match-cloud.is-visible .match-cloud-body { opacity: 1; transform: scale(1); transition-delay: .18s; }
.match-cloud.is-visible .match-cloud-heart,
.match-cloud.is-visible .match-cloud-symbol { opacity: 1; transform: scale(1); transition-delay: .3s; }
/* Сердце и знак дружбы помещаются внутрь тела облака. */
/*
 * Знак ставится в середину **тела** облака, а не рамки: снизу у облака
 * вырез под пузырьки, и середина его внутренней части — 43,3 % высоты
 * (замерено по `cloud-body.webp`: внутренность 19…280 из 345).
 *
 * Отступы в процентах браузер считает **от ширины** блока, даже верхний
 * и нижний. Прежний расчёт брал их от высоты, и оба знака стояли выше
 * середины на пять процентов высоты облака. Здесь всё в долях ширины:
 * высота облака — 345/620 = 0,5565 ширины, середина тела — 0,241
 * ширины от верха. Коробка знака — квадрат 0,30 ширины вокруг этой
 * точки: сверху 0,241 − 0,15 = 9,1 %, снизу 0,5565 − 0,241 − 0,15 =
 * 16,55 %, по бокам (1 − 0,30) / 2 = 35 %.
 */
.match-cloud-heart {
    padding: 9.1% 35% 16.55%;
    transform-origin: 50% 43.3%;
}
/*
 * Знак дружбы — картинка, и отступами его не поставить: у картинки
 * ширина 100 % сама по себе, отступы к ней прибавляются, и коробка
 * выходит больше облака. Поэтому место задано явно — тот же квадрат
 * 0,30 ширины с центром в середине тела: сверху 43,3 % высоты минус
 * половина квадрата (0,15 ширины = 26,95 % высоты) = 16,35 %.
 */
.match-cloud .match-cloud-symbol {
    inset: auto;
    left: 35%;
    top: 16.35%;
    width: 30%;
    height: auto;
    padding: 0;
    transform-origin: 50% 50%;
}
.match-cloud-heart {
    display: grid;
    place-items: center;
    line-height: 1;
}
/* Белое — решение владельца 24 сентября 2026. Размер в долях облака:
   0,57 от коробки — это 17 % ширины облака, около трети высоты его тела,
   столько же, сколько видимая часть знака дружбы. */
.match-cloud-heart svg {
    display: block;
    width: 57%;
    height: auto;
    fill: #ffffff;
    filter: drop-shadow(0 2px 6px rgba(0, 10, 30, .35));
}

.match-sprite-copy {
    max-width: 590px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}
.match-sprite-copy.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.match-sprite-copy h2 { margin: 7px 0 8px; font-size: clamp(24px, 4vw, 34px); }
.match-sprite-copy p { margin: 0 auto 18px; color: var(--v2-muted); line-height: 1.5; }
.match-sprite-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    width: min(100%, 500px);
    margin: 0 auto;
}
.match-sprite-replay {
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.match-sprite-replay.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 620px) {
    .match-sprite-card { padding: 14px 12px 18px; border-radius: 24px; }
    .match-sprite-stage { height: 320px; }
    .match-cloud { width: min(180px, 46%); bottom: 60%; }
    .match-sprite-actions { grid-template-columns: 1fr; }
}

@media (max-width: 800px) {
    /* Android offers exactly two exits after a match: write or continue.
       The desktop close control would create an ambiguous third action. */
    .match-sprite-close { display:none; }
    .match-sprite-actions { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .match-sprite-overlay,
    .match-cloud img,
    .match-cloud span,
    .match-sprite-copy { transition: none !important; }
}

/* Mobile onboarding must fit the browser viewport without side-scrolling. */
.birth-date-fields { display:grid; grid-template-columns:.72fr 1.35fr .9fr; gap:8px; }
.birth-date-fields select { min-width:0; width:100%; }

@media (max-width:800px) {
    html, body, #app, .shell, .shell-workspace, .view { max-width:100vw; }
    .view { overscroll-behavior-x:none; }
    .shell-notice { flex:none; margin:6px 8px 0; padding:7px 9px; border-radius:14px; }
    .shell-notice > div { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; gap:7px; text-align:left; }
    .shell-notice span { min-width:0; font-size:11px; line-height:1.25; overflow-wrap:anywhere; }
    .shell-notice .button { min-height:36px; width:auto; padding:6px 10px; font-size:11px; white-space:nowrap; }
    .discover-page, .profile-page, .settings-page, .hub-page, .column { min-width:0; width:100%; overflow-x:hidden; }
    .discover-layout, .discover-layout-empty, .profile-editor-layout, .profile-editor-new { min-width:0; width:100%; grid-template-columns:minmax(0,1fr) !important; }
    .discover-layout > *, .profile-editor-layout > * { min-width:0; max-width:100%; }
    .filters-panel { max-width:calc(100vw - 20px); overflow-y:auto; }
}

@media (max-width:430px) {
    .birth-date-fields { grid-template-columns:.72fr 1.28fr .9fr; gap:5px; }
    .birth-date-fields select { padding-left:8px; padding-right:5px; font-size:12px; }
    .profile-form-panel { padding:15px; }
    .profile-save-row .button { width:100%; }
}

/* ==================== FINAL VISUAL AUDIT (formerly ui-audit.css) ==================== */
/* SoulMates WebApp — final visual/responsive audit layer, 2026-09-13.
   This file is intentionally last in the cascade. It fixes layout mechanics
   without changing routes, API logic, animations or content. */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body,
#app {
    width: 100%;
    max-width: 100%;
}

body { overflow-x: hidden; }

img,
video,
svg {
    max-width: 100%;
}

button,
input,
textarea,
select {
    max-width: 100%;
    font: inherit;
}

button,
a,
input,
textarea,
select {
    touch-action: manipulation;
}

/* Controls: center both plain text and icon+text combinations consistently. */
.button,
.header-secondary-action,
.toolbar-filter-button,
.switch-item,
.chip,
.support-amount,
.event-action-button,
.ln-primary,
.ln-secondary,
.ln-login {
    min-width: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

.button,
.header-secondary-action,
.toolbar-filter-button,
.support-amount,
.event-action-button {
    white-space: normal;
}

/* Allow grid/flex children to shrink instead of pushing a page sideways. */
.shell-workspace,
.view,
.discover-page,
.profile-page,
.settings-page,
.hub-page,
.about-page-current,
.support-page-current,
.companies-page,
.company-chat-page,
.interests-editor-page,
.advanced-filters-page,
.commerce-page,
.discover-layout > *,
.profile-editor-layout > *,
.profile-form-grid > *,
.settings-grid > *,
.pane-body > *,
.event-section-grid > *,
.company-chat-layout > *,
.company-candidate > *,
.company-request > *,
.about-feature-grid > *,
.about-step-grid > *,
.support-rules > *,
.ln-topbar > *,
.ln-hero > *,
.ln-product-grid > *,
.ln-footer > *,
.card,
.glass-panel,
.choice-copy,
.filter-choice-copy,
.settings-row-copy,
.company-row-copy,
.company-candidate-copy,
.company-request-copy,
.event-body,
.candidate-info,
.profile-field,
.filter-form-field {
    min-width: 0;
}

h1,
h2,
h3,
p,
.hint,
.muted,
.settings-row-title,
.settings-row .hint,
.settings-toggle-row .hint,
.company-row-copy,
.event-title,
.event-reason,
.candidate-about,
.profile-subsection-title,
.choice-copy,
.filter-choice-copy {
    overflow-wrap: break-word;
}

/* Selection surfaces: equal height, no forced min-content overflow. */
.switch {
    max-width: 100%;
}

.switch-item {
    display: inline-flex;
}

.chip {
    justify-content: center;
    line-height: 1.25;
}

.choice-card,
.filter-choice-card {
    min-width: 0;
}

.choice-copy strong,
.choice-copy small,
.filter-choice-copy strong,
.filter-choice-copy small {
    overflow-wrap: anywhere;
}

/* Form controls should look like one system and never clip native text. */
input,
textarea,
select {
    line-height: 1.3;
}

select {
    text-overflow: ellipsis;
}

textarea { resize: vertical; }

.profile-suggestions,
.interest-search-results,
.event-city-dialog,
.sheet,
.focus-sheet {
    max-width: calc(100vw - 24px);
}

.settings-row-title { line-height: 1.3; }

/* Empty photo state had structure but no own layout rules. */
.candidate-gallery-empty {
    padding: 12px;
}

.candidate-empty-photo {
    min-height: clamp(330px, 52vh, 560px);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 24px;
    border-radius: 20px;
    color: var(--v2-muted);
    text-align: center;
    background: rgba(4, 23, 48, .62);
}

.candidate-empty-photo img {
    width: min(132px, 44%);
    aspect-ratio: 1;
    object-fit: contain;
}

/* Keep the application's desktop scrollbar on the browser edge instead of
   floating inside an 18/12px right margin. Content keeps its own page padding. */
@media (min-width: 801px) {
    .shell {
        padding-right: 0;
    }

    .view {
        border-radius: 28px 0 0 28px;
        scrollbar-gutter: auto;
    }
}

@media (max-width: 800px) {

    .view {
        width: 100%;
        max-width: 100vw;
        scrollbar-gutter: auto;
    }

    .switch {
        display: flex;
        width: 100%;
        max-width: 100%;
    }

    .switch-item {
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 8px;
    }

    .hub-header,
    .profile-page-header,
    .panel-heading-row,
    .interest-category-header-actions,
    .event-section-heading {
        min-width: 0;
    }

    .settings-row,
    .settings-toggle-row {
        min-width: 0;
    }

    .company-compose {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .company-compose .button {
        width: auto;
        min-width: 96px;
        padding-inline: 14px;
    }

    .candidate-empty-photo {
        min-height: min(54dvh, 430px);
    }

    .ln-topbar,
    .ln-hero,
    .ln-interests,
    .ln-features,
    .ln-product,
    .ln-cta,
    .ln-partners,
    .ln-footer {
        max-width: 100%;
    }
}

@media (max-width: 520px) {
    .screen-center .column,
    .column {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card,
    .profile-form-panel,
    .profile-photos-panel,
    .profile-interests-panel,
    .interest-search-panel,
    .interest-selected-panel,
    .advanced-filter-card {
        max-width: 100%;
    }

    .birth-date-fields {
        gap: 5px;
    }

    .birth-date-fields select {
        min-width: 0;
        padding-left: 8px;
        padding-right: 6px;
    }

    .nav {
        left: 6px;
        right: 6px;
        bottom: max(6px, env(safe-area-inset-bottom));
    }

    .nav-item {
        min-width: 0;
        padding-inline: 1px;
    }

    .nav-title {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .support-amounts {
        grid-template-columns: 1fr 1fr;
    }

    .support-amount { width: 100%; }

    .choice-row .choice-chip {
        max-width: 100%;
    }

    .choice-chip span {
        overflow-wrap: anywhere;
        text-align: center;
    }

    .ln-topbar {
        gap: 12px;
    }

    .ln-brand {
        min-width: 0;
    }

    .ln-brand-copy {
        min-width: 0;
    }

    .ln-brand-copy strong {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ln-login {
        flex: none;
    }
}

@media (max-width: 380px) {
    .nav-mark { width: 22px; height: 22px; }

    .settings-row,
    .settings-toggle-row {
        padding-left: 9px;
        padding-right: 9px;
    }

    .company-compose .button {
        min-width: 86px;
        padding-inline: 10px;
    }
}

/* =====================================================================
 * FINAL DESIGN SYSTEM AUDIT — 2026-09-13
 * Readability, rhythm and touch-target polish after desktop/mobile render
 * review. This is intentionally the final cascade layer: no v5/v6 files.
 * ===================================================================== */

/* Headings should wrap as deliberate blocks rather than leave orphan words. */
h1,
h2,
h3,
.panel-heading h2,
.profile-page-header h1,
.hub-header h1,
.interest-search-heading h1,
.about-intro h1,
.support-intro h1 {
    text-wrap: balance;
}

p,
.hint,
.muted,
.choice-copy small,
.filter-choice-copy small,
.settings-row .hint,
.settings-toggle-row .hint {
    text-wrap: pretty;
}

/* A 9px legacy scale survived from the early compact web mockups. It is too
   small on both Retina phones and desktop displays. Keep these texts secondary,
   but readable and visually consistent with the 13/15px body scale. */
.toolbar-pill small,
.range-ticks,
.filter-toggle-copy small,
.photo-status,
.profile-photo-add small,
.profile-field small,
.profile-subsection-title p,
.choice-copy small,
.interest-category-head small,
.interest-category-names span,
.interest-category-empty,
.advanced-filter-title p,
.filter-form-field small,
.clear-city,
.filter-choice-copy small {
    font-size: 11.5px;
    line-height: 1.4;
}

.toolbar-pill strong,
.interest-category-head strong,
.onboarding-note strong {
    font-size: 13px;
    line-height: 1.3;
}

/* Settings are a reading-heavy screen: primary rows need to read as actions,
   not as captions. */
.settings-row > div:first-child,
.settings-row-title {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
}
.settings-row .hint,
.settings-toggle-row .hint {
    font-size: 12.5px;
    line-height: 1.45;
}
.settings-row,
.settings-toggle-row {
    min-height: 52px;
}

/* Unified tactile baseline. */
.button:not(.button-quiet),
.header-secondary-action,
.toolbar-filter-button,
.interest-edit,
.pay-button {
    min-height: 46px;
}

input,
select {
    min-height: 46px;
}

textarea {
    min-height: 104px;
}

.password-toggle {
    width: 40px;
    height: 40px;
    right: 7px;
}

.button-link {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 10px;
}

.chip,
.choice-chip {
    min-height: 34px;
}

/* Cards with selectable content should keep their label vertically centred
   even when the secondary line wraps to two rows. */
.choice-card,
.filter-choice-card {
    align-items: center;
    padding-block: 11px;
}
.choice-copy,
.filter-choice-copy {
    align-content: center;
}

/* Long headers are common in Russian; on narrow screens the description moves
   below the title instead of becoming a tiny right-aligned column. */
@media (max-width: 700px) {
    .profile-subsection-title,
    .panel-heading,
    .interest-search-heading {
        align-items: flex-start;
    }

    .profile-subsection-title p,
    .panel-heading > p,
    .interest-search-heading > p {
        max-width: none;
        text-align: left;
    }
}

@media (max-width: 800px) {
    /* 16px also prevents mobile Safari zooming a focused field. */
    input,
    textarea,
    select {
        min-height: 48px;
        font-size: 16px;
    }

    .button:not(.button-quiet),
    .header-secondary-action,
    .toolbar-filter-button {
        min-height: 48px;
    }

    .nav-item {
        min-height: 52px;
    }

    .shell-notice {
        padding: 9px 12px;
        line-height: 1.35;
    }
    .shell-notice span { font-size: 12px; }
    .shell-notice .button {
        min-height: 38px;
        padding: 7px 11px;
        font-size: 12px;
    }

    .settings-row,
    .settings-toggle-row {
        padding-block: 13px;
    }
}

@media (max-width: 380px) {
    /* Keep labels readable; ellipsis handles genuinely long tab names. */
    .nav-title { font-size: 10.5px; }
}

/* =====================================================================
   Final perfection pass — custom selects + living cosmos.
   ===================================================================== */

@keyframes sm-app-constellation-drift {
    from { transform: translate3d(0, 6px, 0) scale(.995); opacity: .11; }
    to { transform: translate3d(0, -8px, 0) scale(1.01); opacity: .18; }
}

@keyframes sm-app-stars-twinkle {
    from { opacity: .24; filter: brightness(.94); }
    50% { opacity: .48; filter: brightness(1.08); }
    to { opacity: .3; filter: brightness(1.02); }
}

@keyframes sm-card-sheen {
    from { transform: translateX(-135%) skewX(-18deg); opacity: 0; }
    14%, 100% { transform: translateX(145%) skewX(-18deg); opacity: .16; }
}

body {
    position: relative;
    background:
        radial-gradient(circle at 50% -8%, rgba(94, 196, 255, .08), transparent 34%),
        linear-gradient(180deg, #07182f 0%, #041224 100%);
}

body::after {

    height: 42vh;

    filter: blur(34px);
    background:
        radial-gradient(ellipse at 20% 50%, rgba(108, 203, 255, .62), transparent 50%),
        radial-gradient(ellipse at 50% 42%, rgba(84, 122, 255, .44), transparent 46%),
        radial-gradient(ellipse at 78% 55%, rgba(111, 233, 213, .48), transparent 48%);

}

.glass-panel,
.card,
.card-blue,
.ln-feature,
.ln-product,
.ln-interests,
.ln-cta,
.ln-partners {
    position: relative;
    overflow: hidden;
}

.glass-panel::before,
.card-blue::before,
.ln-feature::before,
.ln-cta::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 -40%;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    transform: translateX(-135%) skewX(-18deg);
    opacity: 0;
}

@media (hover: hover) {
    .glass-panel:hover::before,
    .card-blue:hover::before,
    .ln-feature:hover::before,
    .ln-cta:hover::before {
        opacity: 1;
        animation: sm-card-sheen 4.8s ease-in-out 1;
    }
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 42px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcefff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: right 14px center;
}

select::-ms-expand { display: none; }

.filter-select,
.profile-select,
.birth-date-fields select,
.create-event-form select {
    background-position: right 12px center;
}

.event-city-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--ice-blue);
}

.event-city-chevron .ui-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.event-city-chevron .ui-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    #app::after,
    .glass-panel::before,
    .card-blue::before,
    .ln-feature::before,
    .ln-cta::before {
        animation: none !important;
    }
}

/* =====================================================================
   PERFECT 3 — static constellation layer and shared headline gradient.
   ===================================================================== */

/* Remove the experimental synthetic twinkling stars/aurora. */
body::before,
body::after {

    animation: none !important;
}

/* The same pale constellation + interest icons used on child-safety. */
#app::after {

    width: 100vw !important;
    height: 100dvh !important;
    left: 0 !important;
    transform: none !important;

    will-change: auto !important;
}

/* Large screen titles repeat the legal-page white → ice blue → violet motif. */
#app h1,
.landing-new .ln-hero h1,
.landing-new .ln-section-heading h2,
.landing-new .ln-product-intro h2,
.landing-new .ln-cta-copy h2,
.landing-new .ln-partners-main h2,
.about-section-heading > h2,
.section-visual-heading > h2,
.interest-overview-title > h2,
.event-section-heading h2,
.company-list-section-heading h2 {
    color: #f8fbff;
    background: linear-gradient(100deg, #ffffff 3%, #72ddff 46%, #7db8ff 72%, #b58cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Candidate names are content, not page titles: keep them plain for clarity. */
[style*="position:fixed"][style*="overflow:auto"] h1 {
    color: var(--on-blue) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Old sheen/twinkle experiments stay disabled. */
.glass-panel::before,
.card-blue::before,
.ln-feature::before,
.ln-cta::before {
    display: none !important;
    animation: none !important;
}

/* =====================================================================
   PERFECT 4 — almost imperceptible star breathing.
   The constellation artwork itself stays completely still. Only a few
   tiny light points change brightness slowly; nothing moves on screen.
   ===================================================================== */

@keyframes sm-perfect-star-breathe {
    0%, 100% { opacity: .035; filter: brightness(.96); }
    48% { opacity: .095; filter: brightness(1.045); }
    68% { opacity: .065; filter: brightness(1.015); }
}

body::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;

    pointer-events: none !important;

    background-repeat: no-repeat !important;

    mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
    body::after {
        animation: none !important;
        opacity: .055 !important;
    }
}

/* Remove synthetic extra star dots. */
body::before,
body::after {
    content: "";

    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background: url("../../assets/project/background-web-ocean-2026.png") center 48% / cover fixed no-repeat;
    mix-blend-mode: screen;
}

@keyframes sm-app-real-star-a {
    0%, 100% { opacity: .08; filter: brightness(.98) saturate(1); }
    42% { opacity: .17; filter: brightness(1.18) saturate(1.02); }
    68% { opacity: .11; filter: brightness(1.05) saturate(1.01); }
}

@keyframes sm-app-real-star-b {
    0%, 100% { opacity: .055; filter: brightness(.97) saturate(1); }
    33% { opacity: .125; filter: brightness(1.12) saturate(1.015); }
    66% { opacity: .082; filter: brightness(1.03) saturate(1.01); }
}

body::before {

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

}

body::after {

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after,
    #app::after {
        animation: none !important;
    }
}

/* FINAL COMBINED 2 — stronger visible star breathing on existing stars only. */
@keyframes sm-app-real-star-a-2 {
    0%, 100% { opacity: .11; filter: brightness(.99) saturate(1); }
    42% { opacity: .26; filter: brightness(1.28) saturate(1.04); }
    68% { opacity: .16; filter: brightness(1.08) saturate(1.02); }
}
@keyframes sm-app-real-star-b-2 {
    0%, 100% { opacity: .08; filter: brightness(.98) saturate(1); }
    35% { opacity: .21; filter: brightness(1.22) saturate(1.03); }
    66% { opacity: .13; filter: brightness(1.07) saturate(1.02); }
}
@media (max-width: 700px) {
    body::before { opacity: .115 !important; }
    body::after { opacity: .09 !important; }
}

/* FIX3 — the animated copies must sit above #app's opaque background.
   The masks expose only small areas around stars already painted in it. */
@keyframes sm-app-star-breathe-visible-a {
    0%, 100% { opacity: .12; filter: brightness(1.02) saturate(1); }
    46% { opacity: .42; filter: brightness(1.65) saturate(1.08); }
}
@keyframes sm-app-star-breathe-visible-b {
    0%, 100% { opacity: .09; filter: brightness(1.01) saturate(1); }
    38% { opacity: .34; filter: brightness(1.52) saturate(1.06); }
}
body::before {
    z-index: 2 !important;
    -webkit-mask-image:
        radial-gradient(circle at 1% 11%, #000 0 4px, transparent 13px),
        radial-gradient(circle at 14% 58%, #000 0 5px, transparent 15px),
        radial-gradient(circle at 46% 11%, #000 0 4px, transparent 13px),
        radial-gradient(circle at 85% 71%, #000 0 4px, transparent 13px) !important;
    mask-image:
        radial-gradient(circle at 1% 11%, #000 0 4px, transparent 13px),
        radial-gradient(circle at 14% 58%, #000 0 5px, transparent 15px),
        radial-gradient(circle at 46% 11%, #000 0 4px, transparent 13px),
        radial-gradient(circle at 85% 71%, #000 0 4px, transparent 13px) !important;

}
body::after {
    z-index: 2 !important;
    -webkit-mask-image:
        radial-gradient(circle at 0% 44%, #000 0 5px, transparent 15px),
        radial-gradient(circle at 11% 8%, #000 0 4px, transparent 14px),
        radial-gradient(circle at 74% 7%, #000 0 5px, transparent 16px) !important;
    mask-image:
        radial-gradient(circle at 0% 44%, #000 0 5px, transparent 15px),
        radial-gradient(circle at 11% 8%, #000 0 4px, transparent 14px),
        radial-gradient(circle at 74% 7%, #000 0 5px, transparent 16px) !important;

}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {

        opacity: .12 !important;
    }
}

/* FIX6 — guaranteed visible twinkle. Earlier `opacity: ... !important`
   declarations prevented keyframes from changing opacity, so only an almost
   invisible brightness shift remained. These two stationary groups animate
   brightness instead and stay deliberately tiny. */
@keyframes sm-app-star-twinkle-a {
    0%, 100% { filter: brightness(.62) drop-shadow(0 0 0 rgba(145, 220, 255, 0)); }
    44% { filter: brightness(1.85) drop-shadow(0 0 3px rgba(145, 220, 255, .78)); }
    62% { filter: brightness(1.08) drop-shadow(0 0 1px rgba(145, 220, 255, .24)); }
}
@keyframes sm-app-star-twinkle-b {
    0%, 100% { filter: brightness(.68) drop-shadow(0 0 0 rgba(190, 229, 255, 0)); }
    36% { filter: brightness(1.7) drop-shadow(0 0 3px rgba(190, 229, 255, .68)); }
    70% { filter: brightness(.92) drop-shadow(0 0 1px rgba(190, 229, 255, .2)); }
}
body::before,
body::after {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-size: auto !important;
}
body::before {
    opacity: .62 !important;
    background-image:
        radial-gradient(circle at 7% 12%, #fff 0 1px, rgba(163,225,255,.7) 1.4px, rgba(120,205,255,.2) 2.5px, transparent 5px),
        radial-gradient(circle at 24% 27%, #fff 0 1.1px, rgba(181,231,255,.68) 1.5px, rgba(120,205,255,.18) 2.8px, transparent 5.5px),
        radial-gradient(circle at 48% 9%, #fff 0 .9px, rgba(170,225,255,.7) 1.4px, rgba(120,205,255,.18) 2.6px, transparent 5px),
        radial-gradient(circle at 72% 22%, #fff 0 1px, rgba(191,232,255,.7) 1.5px, rgba(120,205,255,.18) 2.7px, transparent 5.5px),
        radial-gradient(circle at 91% 14%, #fff 0 1.1px, rgba(170,225,255,.66) 1.6px, rgba(120,205,255,.17) 2.8px, transparent 5.5px) !important;
    animation: sm-app-star-twinkle-a 4.8s ease-in-out infinite !important;
}
body::after {
    opacity: .52 !important;
    background-image:
        radial-gradient(circle at 14% 38%, #fff 0 .9px, rgba(185,232,255,.66) 1.4px, rgba(134,211,255,.17) 2.6px, transparent 5px),
        radial-gradient(circle at 37% 17%, #fff 0 1px, rgba(176,229,255,.7) 1.5px, rgba(134,211,255,.19) 2.7px, transparent 5.5px),
        radial-gradient(circle at 61% 31%, #fff 0 1.1px, rgba(190,234,255,.66) 1.6px, rgba(134,211,255,.17) 2.8px, transparent 5.5px),
        radial-gradient(circle at 83% 8%, #fff 0 .9px, rgba(176,229,255,.7) 1.4px, rgba(134,211,255,.18) 2.6px, transparent 5px) !important;
    animation: sm-app-star-twinkle-b 5.9s ease-in-out infinite 1.3s !important;
}
@media (prefers-reduced-motion: reduce) {
    body::before,
    body::after {
        animation: none !important;
        filter: brightness(1) !important;
    }
}

/* =====================================================================
   FIX7 — search filter alignment + quiet star glow behind content only.
   ===================================================================== */

/* 1) Search page: on medium desktop, keep the filter inside the same layout
   column system instead of a floating detached sheet. This preserves the
   same visual boundaries as the search containers and still allows scrolling. */
@media (min-width: 901px) and (max-width: 1240px) {
    .discover-layout {

        grid-auto-rows: auto;

    }
    .discover-layout > .match-panel {

        min-height: 0;
    }
    .discover-layout-empty > .empty-state {
        grid-column: 1;
        grid-row: 1;
    }
    .discover-layout-empty > .filters-panel {
        grid-column: 2;
        grid-row: 1;

    }
}

/* Narrow desktop / tablet still uses the overlay, but its height and border
   now stay coherent and fully visible. */
@media (max-width: 900px) {
    .filters-panel {
        max-height: calc(100dvh - 36px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }
}

/* 2) Remove all star layers that were sitting above cards/panels. */
body::before,
body::after {
    display: none !important;
}

#app {
    position: relative;
    isolation: isolate;
    z-index: 0;
}

/* Two masked copies of the real sky background. Because the masks expose only
   tiny circles around existing bright stars, the glow happens on the painted
   stars themselves. The glow is under the UI, not on top of it. */
@keyframes sm-real-sky-stars-a {
    0%, 100% { opacity: .11; filter: brightness(.95) saturate(1); }
    35% { opacity: .26; filter: brightness(1.28) saturate(1.04); }
    64% { opacity: .16; filter: brightness(1.08) saturate(1.02); }
}
@keyframes sm-real-sky-stars-b {
    0%, 100% { opacity: .09; filter: brightness(.96) saturate(1); }
    42% { opacity: .22; filter: brightness(1.22) saturate(1.03); }
    71% { opacity: .14; filter: brightness(1.07) saturate(1.02); }
}

#app::before,
.shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../../assets/project/background-web-ocean-2026.png") center 48% / cover fixed no-repeat;
    mix-blend-mode: screen;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.shell {
    position: relative;
    z-index: 1;

}

/* Ensure actual UI surfaces stay above the sky-glow layers. */
#app > *,
.shell > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 700px) {
    #app::after {
        opacity: .12 !important;
        background-size: min(900px, 150vw) auto !important;
        background-position: center 28px !important;
    }
    #app::before { opacity: .13; }
    .shell::before { opacity: .10; }
}

@media (prefers-reduced-motion: reduce) {
    #app::before,
    #app::after,
    .shell::before {
        animation: none !important;
    }
}

/* Restore the mobile/tablet filter backdrop after disabling body::after for stars. */
@media (max-width: 900px) {
    body.filters-open::after {
        display: block !important;
        content: "" !important;
        position: fixed !important;
        z-index: 70 !important;
        inset: 0 !important;
        pointer-events: auto !important;
        background: rgba(1, 8, 20, .54) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
    }
}

/* =====================================================================
   FIX8 — restore filter scrolling and align right rail height with search.
   Also make more real bright stars softly alive.
   ===================================================================== */

/* DESKTOP / WIDE DESKTOP: the right rail must be the same visual height as the
   search card area and scroll internally. */
@media (min-width: 1241px) {
    .discover-layout {
        align-items: stretch !important;
    }
    .discover-layout > .candidate-card,
    .discover-layout > .match-panel,
    .discover-layout > .filters-panel {
        min-height: calc(100dvh - 220px) !important;
    }
    .discover-layout > .match-panel,
    .discover-layout > .filters-panel {
        height: calc(100dvh - 220px) !important;
        max-height: calc(100dvh - 220px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
    .discover-layout > .candidate-card {
        height: calc(100dvh - 220px) !important;
    }
}

/* MEDIUM DESKTOP: keep the filter embedded in the same visual rail and make it
   scroll independently instead of becoming a detached sheet. */
@media (min-width: 901px) and (max-width: 1240px) {
    .discover-layout {
        grid-template-columns: minmax(0, 1fr) 228px !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: stretch !important;
    }
    .discover-layout > .candidate-card {
        grid-column: 1;
        grid-row: 1 / span 2;
        min-height: calc(100dvh - 220px) !important;
        height: calc(100dvh - 220px) !important;
    }
    .discover-layout > .match-panel {
        grid-column: 2;
        grid-row: 1;
        position: sticky !important;
        top: 18px !important;
        align-self: start !important;
        height: auto !important;
        max-height: 210px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
    .discover-layout > .filters-panel {
        grid-column: 2;
        grid-row: 2;
        position: sticky !important;
        top: 246px !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        align-self: stretch !important;
        min-height: 0 !important;
        height: calc(100dvh - 264px) !important;
        max-height: calc(100dvh - 264px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        transform: none !important;
    }
    .discover-layout-empty {
        grid-template-columns: minmax(0, 1fr) 228px !important;
        gap: 14px !important;
        align-items: stretch !important;
    }
    .discover-layout-empty > .empty-state {
        min-height: calc(100dvh - 220px) !important;
        height: calc(100dvh - 220px) !important;
    }
    .discover-layout-empty > .filters-panel {
        position: sticky !important;
        top: 18px !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: calc(100dvh - 220px) !important;
        max-height: calc(100dvh - 220px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        transform: none !important;
    }
    body.filters-open .filters-panel {
        transform: none !important;
    }
    body.filters-open::after {
        display: none !important;
    }
    .filter-close {
        display: none !important;
    }
}
.filters-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(116, 211, 255, .46);
}

/* More bright stars made gently alive: 8 in the first layer, 7 in the second.
   These are still just masked copies of the real sky texture, so no new stars
   appear. */
@keyframes sm-real-sky-stars-a-2 {
    0%, 100% { opacity: .13; filter: brightness(.96) saturate(1); }
    38% { opacity: .31; filter: brightness(1.32) saturate(1.05); }
    67% { opacity: .18; filter: brightness(1.08) saturate(1.02); }
}
@keyframes sm-real-sky-stars-b-2 {
    0%, 100% { opacity: .10; filter: brightness(.97) saturate(1); }
    41% { opacity: .24; filter: brightness(1.22) saturate(1.03); }
    72% { opacity: .15; filter: brightness(1.07) saturate(1.02); }
}

#app::before {
    opacity: .13 !important;
    -webkit-mask-image:
        radial-gradient(circle at 34.8% 4.9%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 64.0% 6.6%, #000 0 4px, transparent 14px),
        radial-gradient(circle at 74.2% 10.6%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 84.8% 9.5%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 94.6% 4.5%, #000 0 6px, transparent 18px),
        radial-gradient(circle at 40.5% 13.7%, #000 0 4px, transparent 14px),
        radial-gradient(circle at 75.3% 22.8%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 99.0% 31.7%, #000 0 5px, transparent 16px);
    mask-image:
        radial-gradient(circle at 34.8% 4.9%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 64.0% 6.6%, #000 0 4px, transparent 14px),
        radial-gradient(circle at 74.2% 10.6%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 84.8% 9.5%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 94.6% 4.5%, #000 0 6px, transparent 18px),
        radial-gradient(circle at 40.5% 13.7%, #000 0 4px, transparent 14px),
        radial-gradient(circle at 75.3% 22.8%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 99.0% 31.7%, #000 0 5px, transparent 16px);
    animation: sm-real-sky-stars-a-2 10.6s ease-in-out infinite !important;
}

.shell::before {
    opacity: .10 !important;
    -webkit-mask-image:
        radial-gradient(circle at 21.4% 2.6%, #000 0 4px, transparent 14px),
        radial-gradient(circle at 51.2% 22.0%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 61.9% 26.5%, #000 0 6px, transparent 18px),
        radial-gradient(circle at 53.0% 37.4%, #000 0 6px, transparent 18px),
        radial-gradient(circle at 62.8% 42.2%, #000 0 6px, transparent 18px),
        radial-gradient(circle at 74.5% 18.0%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 84.8% 18.6%, #000 0 5px, transparent 16px);
    mask-image:
        radial-gradient(circle at 21.4% 2.6%, #000 0 4px, transparent 14px),
        radial-gradient(circle at 51.2% 22.0%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 61.9% 26.5%, #000 0 6px, transparent 18px),
        radial-gradient(circle at 53.0% 37.4%, #000 0 6px, transparent 18px),
        radial-gradient(circle at 62.8% 42.2%, #000 0 6px, transparent 18px),
        radial-gradient(circle at 74.5% 18.0%, #000 0 5px, transparent 16px),
        radial-gradient(circle at 84.8% 18.6%, #000 0 5px, transparent 16px);

}

/* =====================================================================
   FIX9 — guaranteed filter rail sync + clearly visible live stars.
   ===================================================================== */

/* Let JS control the exact filter height on desktop, so the bottom edge always
   matches the main search card visually. */
@media (min-width: 901px) {
    .discover-layout,
    .discover-layout-empty {
        align-items: stretch !important;
    }
    .discover-layout > .candidate-card,
    .discover-layout-empty > .empty-state {
        min-height: calc(100dvh - 220px) !important;
    }
    .discover-layout > .filters-panel,
    .discover-layout-empty > .filters-panel {
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable !important;
    }
}

/* Replace the hard-to-notice background-copy glow with explicit glow halos on
   the already existing bright stars. The halos are placed only on the search
   page and behind its content. */
#app::before,
.shell::before {
    display: none !important;
}

.discover-page {
    position: relative;
    isolation: isolate;
}
.discover-page > * {
    position: relative;
    z-index: 1;
}

@keyframes sm-discover-stars-a {
    0%, 100% { opacity: .24; filter: brightness(.94); }
    37% { opacity: .72; filter: brightness(1.18); }
    65% { opacity: .38; filter: brightness(1.03); }
}
@keyframes sm-discover-stars-b {
    0%, 100% { opacity: .18; filter: brightness(.95); }
    41% { opacity: .56; filter: brightness(1.12); }
    72% { opacity: .30; filter: brightness(1.02); }
}

.discover-page::before,
.discover-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
}

.discover-page::before {
    background-image:
        radial-gradient(circle 18px at 36.2% 5.0%, rgba(201,239,255,.85) 0 1px, rgba(132,213,255,.44) 2px, transparent 10px),
        radial-gradient(circle 14px at 64.2% 6.7%, rgba(201,239,255,.78) 0 1px, rgba(132,213,255,.38) 2px, transparent 8px),
        radial-gradient(circle 18px at 74.5% 10.7%, rgba(201,239,255,.88) 0 1.2px, rgba(132,213,255,.46) 2.4px, transparent 10px),
        radial-gradient(circle 18px at 85.1% 9.7%, rgba(201,239,255,.84) 0 1.2px, rgba(132,213,255,.44) 2.4px, transparent 10px),
        radial-gradient(circle 20px at 95.0% 4.8%, rgba(201,239,255,.9) 0 1.4px, rgba(132,213,255,.5) 2.8px, transparent 11px),
        radial-gradient(circle 15px at 42.3% 14.2%, rgba(201,239,255,.76) 0 1px, rgba(132,213,255,.34) 2px, transparent 8px),
        radial-gradient(circle 18px at 76.0% 23.4%, rgba(201,239,255,.82) 0 1.2px, rgba(132,213,255,.42) 2.4px, transparent 10px),
        radial-gradient(circle 18px at 99.0% 32.0%, rgba(201,239,255,.82) 0 1.2px, rgba(132,213,255,.42) 2.4px, transparent 10px);
    animation: sm-discover-stars-a 10.8s ease-in-out infinite;
}

.discover-page::after {
    background-image:
        radial-gradient(circle 14px at 22.0% 2.8%, rgba(201,239,255,.72) 0 1px, rgba(132,213,255,.3) 2px, transparent 8px),
        radial-gradient(circle 18px at 52.0% 22.2%, rgba(201,239,255,.84) 0 1.2px, rgba(132,213,255,.42) 2.4px, transparent 10px),
        radial-gradient(circle 20px at 62.5% 26.8%, rgba(201,239,255,.9) 0 1.4px, rgba(132,213,255,.5) 2.8px, transparent 11px),
        radial-gradient(circle 20px at 53.4% 37.8%, rgba(201,239,255,.9) 0 1.4px, rgba(132,213,255,.5) 2.8px, transparent 11px),
        radial-gradient(circle 20px at 63.3% 42.5%, rgba(201,239,255,.88) 0 1.4px, rgba(132,213,255,.48) 2.8px, transparent 11px),
        radial-gradient(circle 18px at 75.0% 18.2%, rgba(201,239,255,.84) 0 1.2px, rgba(132,213,255,.42) 2.4px, transparent 10px),
        radial-gradient(circle 18px at 85.3% 18.8%, rgba(201,239,255,.84) 0 1.2px, rgba(132,213,255,.42) 2.4px, transparent 10px);
    animation: sm-discover-stars-b 12.4s ease-in-out infinite 1.7s;
}

@media (prefers-reduced-motion: reduce) {
    .discover-page::before,
    .discover-page::after {
        animation: none !important;
        opacity: .34;
    }
}

/* =====================================================================
   FIX10 — FINAL VERIFIED SEARCH GEOMETRY + ONE STAR SYSTEM.
   This block intentionally wins over FIX3–FIX9.
   ===================================================================== */

/* Search geometry: the layout itself owns the available height. No viewport
   guesses, no sticky offset. The filter top and bottom are therefore aligned
   to the main search card; long content scrolls inside the panel. */
@media (min-width: 1041px) {
    .discover-page {
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        padding-top: 24px !important;
        padding-bottom: 18px !important;
    }
    .discover-header {
        flex: 0 0 auto !important;
    }
    .discover-layout,
    .discover-layout-empty {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
    }
    .discover-layout > .candidate-card,
    .discover-layout-empty > .empty-state {
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
    }
    .discover-layout > .filters-panel,
    .discover-layout-empty > .filters-panel {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        align-self: stretch !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable !important;
    }
    body.filters-open .filters-panel {
        transform: none !important;
    }
    body.filters-open::after {
        display: none !important;
    }
    .filter-close {
        display: none !important;
    }
}

/* 901–1040: two-column compact search; same top/bottom alignment and internal
   filter scrolling. */
@media (min-width: 901px) and (max-width: 1040px) {
    .discover-layout,
    .discover-layout-empty {
        grid-template-columns: minmax(0, 1fr) 250px !important;
        align-items: stretch !important;
        gap: 14px !important;
    }
    .discover-layout > .candidate-card,
    .discover-layout-empty > .empty-state {
        grid-column: 1 !important;
        height: min(720px, calc(100dvh - 210px)) !important;
        min-height: 520px !important;
    }
    .discover-layout > .match-panel {
        display: none !important;
    }
    .discover-layout > .filters-panel,
    .discover-layout-empty > .filters-panel {
        grid-column: 2 !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        height: min(720px, calc(100dvh - 210px)) !important;
        max-height: min(720px, calc(100dvh - 210px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable !important;
    }
    .filter-close { display: none !important; }
    body.filters-open::after { display: none !important; }
}

.filters-panel {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(112, 211, 255, .58) rgba(255,255,255,.045) !important;
}
.filters-panel::-webkit-scrollbar { width: 9px !important; }
.filters-panel::-webkit-scrollbar-track {
    background: rgba(255,255,255,.045) !important;
    border-radius: 999px !important;
}
.filters-panel::-webkit-scrollbar-thumb {
    background: rgba(112, 211, 255, .55) !important;
    border-radius: 999px !important;
    border: 2px solid rgba(4, 22, 46, .72) !important;
}

/* One star system only. Disable every experimental star pseudo-element first. */
body::before,
body::after,
.discover-page::before,
.discover-page::after,
#app::before,
.shell::before,
.shell::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* Keep the pale constellation/icon artwork static. */
#app::after {

    filter: none !important;
}

/* Bright stars: fixed to viewport coordinates matching the real bright points
   in the existing sky. They sit BELOW the shell content, so cards and panels
   cover them rather than the glow being painted on top of the UI. */
@keyframes sm-stars-group-a-final {
    0%, 100% { opacity: .28; filter: brightness(.94); }
    34% { opacity: .86; filter: brightness(1.16); }
    64% { opacity: .42; filter: brightness(1.02); }
}
@keyframes sm-stars-group-b-final {
    0%, 100% { opacity: .20; filter: brightness(.95); }
    42% { opacity: .68; filter: brightness(1.12); }
    73% { opacity: .34; filter: brightness(1.01); }
}
.shell::before,
.shell::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;

    pointer-events: none !important;
    background-repeat: no-repeat !important;
    mix-blend-mode: screen;
}
.shell::before {
    background-image:
        radial-gradient(circle 16px at 34.7% 6.4%, rgba(255,255,255,.96) 0 1.3px, rgba(151,220,255,.64) 2.5px, transparent 9px),
        radial-gradient(circle 14px at 61.5% 8.4%, rgba(255,255,255,.88) 0 1.1px, rgba(151,220,255,.54) 2.2px, transparent 8px),
        radial-gradient(circle 17px at 76.2% 20.8%, rgba(255,255,255,.94) 0 1.3px, rgba(151,220,255,.62) 2.5px, transparent 9px),
        radial-gradient(circle 17px at 85.2% 7.9%, rgba(255,255,255,.94) 0 1.3px, rgba(151,220,255,.62) 2.5px, transparent 9px),
        radial-gradient(circle 19px at 96.0% 4.1%, rgba(255,255,255,.98) 0 1.5px, rgba(151,220,255,.68) 3px, transparent 10px),
        radial-gradient(circle 16px at 92.5% 8.8%, rgba(255,255,255,.92) 0 1.2px, rgba(151,220,255,.58) 2.4px, transparent 9px),
        radial-gradient(circle 16px at 40.5% 15.9%, rgba(255,255,255,.90) 0 1.2px, rgba(151,220,255,.56) 2.4px, transparent 9px),
        radial-gradient(circle 17px at 97.9% 30.2%, rgba(255,255,255,.94) 0 1.3px, rgba(151,220,255,.62) 2.5px, transparent 9px) !important;
    animation: sm-stars-group-a-final 9.7s ease-in-out infinite !important;
}
.shell::after {
    background-image:
        radial-gradient(circle 15px at 64.9% 1.1%, rgba(255,255,255,.88) 0 1.1px, rgba(180,229,255,.50) 2.2px, transparent 8px),
        radial-gradient(circle 16px at 87.8% 21.7%, rgba(255,255,255,.92) 0 1.2px, rgba(180,229,255,.58) 2.4px, transparent 9px),
        radial-gradient(circle 17px at 41.1% 25.6%, rgba(255,255,255,.94) 0 1.3px, rgba(180,229,255,.62) 2.5px, transparent 9px),
        radial-gradient(circle 17px at 50.0% 35.6%, rgba(255,255,255,.92) 0 1.3px, rgba(180,229,255,.60) 2.5px, transparent 9px),
        radial-gradient(circle 17px at 62.5% 39.6%, rgba(255,255,255,.94) 0 1.3px, rgba(180,229,255,.62) 2.5px, transparent 9px),
        radial-gradient(circle 16px at 66.7% 27.3%, rgba(255,255,255,.90) 0 1.2px, rgba(180,229,255,.56) 2.4px, transparent 9px),
        radial-gradient(circle 15px at 75.4% 10.6%, rgba(255,255,255,.90) 0 1.2px, rgba(180,229,255,.54) 2.4px, transparent 8px) !important;
    animation: sm-stars-group-b-final 11.9s ease-in-out infinite 1.4s !important;
}

/* Panels are intentionally more opaque than the scenic background so animated
   star glows do not read through the cards/windows. */
.discover-page .candidate-card,
.discover-page .filters-panel,
.discover-page .match-panel,
.discover-page .empty-state,
.discover-page .toolbar-pill,
.discover-page .toolbar-filter-button {
    background-color: rgba(5, 27, 57, .94) !important;
}

@media (prefers-reduced-motion: reduce) {
    .shell::before,
    .shell::after { animation: none !important; opacity: .42 !important; }
}

/* FIX10 verification adjustment: keep star glow below all shell content but
   above the static background, so open sky shows it reliably. */
.shell::before,
.shell::after {
    z-index: 0 !important;
}
.shell > * {
    position: relative !important;
    z-index: 1 !important;
}

/* FIX10B — slightly stronger, still soft breathing so it is actually visible. */
@keyframes sm-stars-group-a-final {
    0%, 100% { opacity: .18; filter: brightness(.90); }
    36% { opacity: 1; filter: brightness(1.22); }
    66% { opacity: .40; filter: brightness(1.02); }
}
@keyframes sm-stars-group-b-final {
    0%, 100% { opacity: .15; filter: brightness(.92); }
    43% { opacity: .82; filter: brightness(1.16); }
    74% { opacity: .32; filter: brightness(1.01); }
}
.shell::before { animation-duration: 7.8s !important; }
.shell::after { animation-duration: 9.4s !important; }

/* =====================================================================
   FIX11 — exact real-star halos + custom SoulMates dropdowns.
   ===================================================================== */

/* Remove every pseudo-element star experiment. FIX11 uses DOM halos whose
   positions are calculated from actual pixels in the source sky image. */
body::before,
body::after,
#app::before,
.shell::before,
.shell::after,
.discover-page::before,
.discover-page::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* Keep only the static constellation artwork. */
#app::after {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;

    pointer-events: none !important;
    opacity: .15 !important;
    background: url("../img/interest-constellation-2026.png") center 34px / min(1120px, 94vw) auto no-repeat !important;
    animation: none !important;
}
.live-starfield {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

@keyframes sm-real-halo-breathe {
    0%, 100% { opacity: var(--star-min); transform: translate(-50%, -50%) scale(.90); }
    48% { opacity: var(--star-max); transform: translate(-50%, -50%) scale(1.08); }
    72% { opacity: calc((var(--star-min) + var(--star-max)) / 2); transform: translate(-50%, -50%) scale(.98); }
}
.live-star-glow {
    position: fixed;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* Transparent core: the real star pixel underneath remains the centre. */
    background: radial-gradient(circle,
        transparent 0 10%,
        rgba(222, 245, 255, .08) 18%,
        rgba(149, 218, 255, .20) 34%,
        rgba(107, 194, 255, .13) 50%,
        rgba(96, 174, 247, .055) 65%,
        transparent 78%);
    filter: none;
    opacity: var(--star-min);
    animation: sm-real-halo-breathe var(--star-duration) ease-in-out infinite;
    animation-delay: var(--star-delay);
    will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
    .live-star-glow {
        animation: none !important;
        opacity: var(--star-min) !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }
}

/* Custom selects use the same language as city suggestions instead of the
   browser's black native popup. */
.sm-dropdown {
    position: relative;
    width: 100%;
    min-height: 44px;
    padding: 0 !important;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.sm-dropdown-trigger {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    color: #eaf5ff;
    background: rgba(5, 25, 53, .88);
    border: 1px solid rgba(151, 210, 249, .28);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    cursor: pointer;
    text-align: left;
}
.sm-dropdown-trigger:hover,
.sm-dropdown.is-open .sm-dropdown-trigger {
    border-color: rgba(111, 215, 255, .52);
    background: rgba(9, 38, 76, .96);
}
.sm-dropdown-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sm-dropdown-chevron {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: #bfeaff;
    transition: transform .16s ease;
}
.sm-dropdown-chevron svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sm-dropdown.is-open .sm-dropdown-chevron { transform: rotate(180deg); }
.sm-dropdown-menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    gap: 3px;
    max-height: 230px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid rgba(118, 203, 255, .27);
    border-radius: 14px;
    background: rgba(5, 25, 53, .985);
    box-shadow: 0 18px 40px rgba(0, 7, 24, .42), inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(16px);
}
.sm-dropdown-option {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    color: #ddecfb;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.sm-dropdown-option:hover,
.sm-dropdown-option:focus-visible {
    outline: 0;
    background: rgba(47, 126, 207, .18);
}
.sm-dropdown-option.is-selected {
    color: #f7fcff;
    background: rgba(50, 150, 225, .17);
}
.sm-dropdown-check {
    color: #73ddff;
    font-weight: 800;
}

/* Dropdowns are part of the scrolling filter, but their open list must remain
   readable. A little bottom padding avoids the last menu touching the edge. */
.filters-panel { padding-bottom: 18px !important; }

.sm-dropdown.open-up .sm-dropdown-menu { top: auto; bottom: calc(100% + 6px); }

/* FIX12 — starfield is a sibling of .shell, never a grid child. The ID rule
   `#app > *` is intentionally overridden here so the helper stays fixed and
   cannot participate in page layout. */
#app > .live-starfield {

    inset: 0 !important;
    width: auto !important;
    height: auto !important;

    overflow: hidden !important;
    pointer-events: none !important;
}

/* =====================================================================
   FIX13 — flight overlay never participates in shell layout; city modes.
   ===================================================================== */
#app > .flight {

    inset: 0 !important;
    width: auto !important;
    height: auto !important;

    overflow: hidden !important;
    pointer-events: none !important;
}
#app > .shell,
#app > .live-starfield {
    position: relative;
}

.city-mode-control,
.filter-city-other {
    position: relative;
    display: grid;
    gap: 8px;
}
.filter-city-other[style*="display:none"],
.filter-city-other[style*="display: none"] {
    display: none !important;
}
.city-mode-control .profile-suggestions,
.filter-city-field .profile-suggestions {
    z-index: 140;
}
.filter-city-other > input {
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    color: #eaf5ff;
    background: rgba(5, 25, 53, .88);
    border: 1px solid rgba(151, 210, 249, .28);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.filter-city-other > input:focus {
    outline: none;
    border-color: rgba(111, 215, 255, .58);
    box-shadow: 0 0 0 3px rgba(88, 197, 255, .09), inset 0 1px 0 rgba(255,255,255,.035);
}

/* =====================================================================
   FIX14 — 6-frame puffin loop flight.
   ===================================================================== */
.flight-bird-wrap {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center center;
    will-change: transform, opacity;
}
.flight-bird {
    display: block;
    width: 132px;
    height: auto;
    transform-origin: center center;
    will-change: transform;
    filter: drop-shadow(0 6px 14px rgba(5, 15, 34, 0.34));
}
@media (prefers-reduced-motion: reduce) {
    .flight, .flight-bird, .flight-bird-wrap {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   FIX15 — flight bird must be above the sky/star layers but below UI.
   ===================================================================== */
#app::after {
    z-index: 0 !important;
}
#app > .live-starfield {
    position: fixed !important;

}
#app > .flight {
    position: fixed !important;
    z-index: 1 !important;
}
/* Actual interface surfaces stay above the bird. */
.shell > .nav,
.shell > .shell-workspace,
.view,
.nav,
.card,
.sheet,
.filters-panel,
.discover-empty,
.discover-main,
.discover-toolbar,
.discover-topbar,
.profile-card,
.dialog,
dialog,
.modal {
    position: relative;
    z-index: 2;
}

/* =====================================================================
   FIX16 VERIFIED — flight sits between scenery and interface.
   ===================================================================== */
.shell {
    isolation: isolate !important;
}
.shell > .flight {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 1 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.shell > .flight .flight-bird-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
.shell > .nav,
.shell > .shell-workspace {
    position: relative !important;
    z-index: 2 !important;
}
/* Old sibling rule no longer applies: flight is intentionally inside shell. */
#app > .flight {
    display: none !important;
}

/* FIX16 visibility: global img{max-width:100%} collapsed the absolutely
   positioned sprite because its wrapper had zero intrinsic width. */
.shell > .flight .flight-bird-wrap {
    width: 132px !important;
    height: auto !important;
}
.shell > .flight .flight-bird {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: 132px !important;
    max-width: none !important;
    height: auto !important;
}
.flight-puffin-inner {

    will-change: transform;
}

/* Keep UI above the birds. */
.shell > .nav,
.shell > .shell-workspace,
.card,
.filters-panel,
.match-panel,
.candidate-card,
.glass-panel,
.sheet,
dialog,
.modal {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .flight-layer,
    .flight-puffin,
    .flight-puffin-inner {
        animation: none !important;
        transition: none !important;
    }
}
/* Здесь стояло `width: 174px !important; height: auto !important` —
   остаток прежнего набора с одним спрайтом. Оно перебивало рамку 689×440
   ниже по файлу, а общее `img { max-width: 100% }` сжимало кадр до тех же
   174 точек: птица выходила втрое мельче задуманного и прижималась
   к левому краю рамки. flight.js же считал вылет по рамке 689, поэтому
   правая птица рождалась прямо на экране, а не из-за края. */
.flight-puffin-inner {
    display: block;
    image-rendering: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* =====================================================================
   FIX21 — verified dual-puffin animation using 2 distinct 5-frame sets.
   ===================================================================== */
#app > .flight-layer {
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 1 !important;
}
#app > .live-starfield { z-index: 0 !important; }
#app > .shell { position: relative !important; z-index: 2 !important; }

.flight-puffin {
    position: absolute;
    top: 0;
    left: 0;
    /* Холст набора v25 — 1113x646. Рамка подобрана так, чтобы сама
       птица была на экране около 307 точек: «в полтора раза крупнее»,
       как выбрал владелец. Те же числа — в flight.js. */
    width: 689px;
    height: 440px;
    overflow: visible;
    transform-origin: center center;
    will-change: transform, opacity;
    filter: drop-shadow(0 10px 20px rgba(4, 14, 34, 0.24));
}
.flight-puffin-inner {
    position: relative;
    width: 689px;
    height: 440px;
    /* Размер птицы задаёт flight.js (TUNING.size) в transform рамки:
       прежний --flight-gain здесь код не видел, и увеличенная птица
       вылетала уже на экране. */
}
.flight-puffin-frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 689px;
    height: 440px;
    object-fit: contain;
    opacity: 0;

    user-select: none;
    -webkit-user-drag: none;
}
.flight-puffin-frame.is-active {
    z-index: 2;
    opacity: 1;
    /* Новая поза проявляется поверх прежней; прежняя (.is-prev) под ней
       полностью видима, поэтому птица не бледнеет на переходе. Длину
       перелива задаёт flight.js. */
    transition: opacity var(--flight-fade, 0ms) linear;
}
.flight-puffin-frame.is-prev {
    z-index: 1;
    opacity: 1;
}

/* =====================================================================
   FIX24 — restore FIX22 flight feel; approved round orb toggle.
   ===================================================================== */
.flight-toggle {
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease !important;
}
.flight-toggle:hover {
    background: transparent !important;
    transform: scale(1.055);
    filter: brightness(1.07);
}
.flight-toggle:active {
    transform: scale(.97);
}
.flight-toggle img {
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    max-width: none !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    pointer-events: none;
}
.flight-toggle-off img {
    opacity: .46 !important;
    filter: grayscale(.78) saturate(.7) brightness(.84) !important;
}
/*
 * Перелив поз — короткий и управляемый (TUNING.fadeMs в flight.js,
 * ноль даёт смену встык).
 *
 * Прежний перелив шёл 126 мс при шаге кадра около 80: почти всё время
 * на экране висели две позы разом, и обе полупрозрачные — птица
 * бледнела. Теперь новая поза проявляется поверх прежней, а прежняя
 * до конца перелива видна целиком (.is-prev), и перелив короче шага.
 */
.flight-puffin-frame:not(.is-active) {
    transition: none !important;
}

/* =====================================================================
   Нижняя панель на телефоне.

   Это не новое оформление, а восстановление. Правило
   `@media (max-width:800px) .nav { position:fixed; bottom:… }` написано
   давно и верно, но ниже по файлу блок «Keep UI above the birds» задал
   `.shell > .nav { position: relative }` — специфичность (0,2,0) против
   (0,1,0), а медиазапрос специфичности не добавляет. Панель молча
   всплыла наверх экрана, где до неё не достаёт большой палец и где она
   спорит с шапкой. В Android панель внизу, и веб не должен расходиться
   с приложением.

   `!important` здесь вынужденный, и это не небрежность. Обе мешающие
   строки — `.shell > *` и `.shell > .nav` — объявлены через `!important`
   ради слоёв: одна поднимает содержимое над свечением звёзд, вторая над
   птицами. Им нужен только `z-index`, а `position: relative` там лишний:
   `fixed` для стопки слоёв годится ровно так же. Снять `!important`
   у тех двух правил — это правка, которая трогает каждый экран сразу,
   и делать её заодно с починкой панели нельзя. Разбор `app.css`
   по одному экрану записан отдельной задачей.

   z-index здесь тоже свой: у `position:fixed` он обязан быть выше слоя
   птиц, иначе панель уедет под них.
   ===================================================================== */
@media (max-width: 800px) {
    .shell > .nav {
        position: fixed !important;
        z-index: 90 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        min-height: 58px !important;
        margin: 0 !important;
        /* Нижний отступ — под вырез и полоску жеста, иначе подписи
           окажутся под ней на телефонах без кнопок. */
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) !important;
        /* Верхние углы скруглены, нижние нет: полоса прибита к краю
           экрана, и скруглять там нечего — под ней ничего не видно. */
        border-radius: 18px 18px 0 0 !important;
        border-top: 1px solid rgba(120, 180, 232, .16) !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        background: rgba(5, 25, 51, .96) !important;
        flex-direction: row !important;
    }
}

/*
 * Подпись вкладки на телефоне.
 *
 * Было 10.5 px при прозрачности .72 — владелец сказал «очень плохо
 * видно», и это не придирка: на тёмной панели такая надпись читается
 * хуже всего на экране. После возврата отдельной вкладки «Компании»
 * ряд снова состоит из пяти пунктов. Подпись «Для вас» достаточно
 * короткая, поэтому все пять вкладок остаются одного читаемого кегля.
 *
 * Активная вкладка остаётся белой — разница между ней и остальными
 * держится не прозрачностью, а весом и подсветкой значка.
 */
@media (max-width: 800px) {
    .nav-item .nav-title {
        font-size: 11px;
        font-weight: 640;
        color: rgba(233, 243, 255, .88);
    }
    .nav-item-active .nav-title { color: #ffffff; }
    /*
     * Ширина вкладки складывается из трёх вещей, и две из них
     * съедали «Рекомендации»: просвет между вкладками 7 точек
     * и поля самой вкладки. Ряд из пяти
     * и так разделён подсветкой активной, широкий просвет ему не нужен.
     *
     * Вертикальный просвет между значком и подписью тоже свой: общее
     * значение 11 точек рассчитано на боковую панель, а в полосе
     * высотой 58 оно разгоняет вкладку и поджимает подпись.
     */
    .nav-primary { gap: 2px; }
    .nav-item { padding-left: 3px; padding-right: 3px; gap: 2px; }
}

@media (max-width: 800px) {
    .company-search-nav {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .company-search-nav .button {
        width:100%;
        padding-inline:10px;
    }
}

/*
 * Пальцевые цели на телефоне.
 *
 * Замером на 360 точках нашлись фишки отрезков дат (36) и половинки
 * переключателя (39). Apple просит 44, Android 48; в этом же файле
 * `.toolbar-pill` уже поднят до 48, то есть правило в проекте есть —
 * просто дошло не до всех. 44 здесь потолок: панель внизу и так
 * занимает 64, а «Мероприятия» начинаются с двух рядов управления.
 */
@media (max-width: 800px) {
    .switch-item { min-height: 44px; }
    .chip { min-height: 44px; }
}

/*
 * Нижняя граница кегля на телефоне.
 *
 * Замер на 360 точках нашёл 9.5 px в списках «Безопасности» и 10.8 px
 * на суммах поддержки. Это не мелочь оформления: «Безопасность» —
 * ровно та страница, где человек читает, как пожаловаться и что делать
 * с просьбой о деньгах, и читать её он будет с телефона.
 *
 * Правило проекта на этот счёт уже есть, только записано было про
 * Android: «пояснение — 14 кегль, а не 12; на насыщенном голубом
 * мелкий текст теряется, и запаса по контрасту взять неоткуда».
 * Здесь тот же фон и та же причина.
 */
@media (max-width: 800px) {
    .visual-safety-list li { font-size: 14px; line-height: 1.5; }
    .safety-tail { font-size: 14px; line-height: 1.5; }
    .safety-card .section-visual-heading p { font-size: 14px; line-height: 1.45; }
    .support-tier p,
    .support-tier small,
    .support-tier-copy small,
    /* Суммы ступеней «Исландских мотивов»: 10.8 px под картинкой,
       то есть ровно то число, ради которого человек сюда смотрит. */
    .motif-card figcaption small { font-size: 12.5px; }
}

/*
 * Полоса сохранения в настройках поиска.
 *
 * Она задумана липкой (`.advanced-save-bar { position: sticky }`),
 * но у неё есть и класс `.glass-panel`, а тот попал в то же правило
 * «Keep UI above the birds» с `position: relative !important`. Липкость
 * умерла, а сдвиг `bottom` остался — и относительный сдвиг не выводит
 * элемент из потока: полоса просто наехала сверху на последнюю карточку
 * «Цель знакомства», оставив под собой пустоту. Вторую цель нельзя было
 * ни увидеть, ни нажать даже прокруткой до самого низа.
 *
 * Это второй случай за день, когда то правило ломает чужую раскладку
 * (первый — нижняя панель). Разбор `app.css` записан отдельной задачей:
 * снимать `!important` у правил, которые трогают каждый экран, заодно
 * с починкой нельзя.
 */
.advanced-save-bar {
    position: sticky !important;
    z-index: 3 !important;
}

@media (max-width: 800px) {
    /*
     * На телефоне полоса не липкая вовсе — решение владельца
     * 15 сентября 2026: «пускай человек листает и доходит до конца,
     * так увидит всё».
     *
     * Резон верный: фильтров четыре карточки, и кнопка, висящая над
     * ними с самого начала, зовёт нажать раньше, чем человек дочитал.
     * На широком экране всё видно сразу, там липкость остаётся.
     *
     * (До этого здесь стоял `bottom: 0` вместо `80px`: липкий элемент
     * считает отступ от **поля** прокручиваемого предка, а у `.view`
     * снизу свои 78 точек, и восемьдесят складывались с ними в 158 —
     * полоса висела намного выше низа экрана. Оставляю это в записи:
     * если липкость когда-нибудь вернут, грабли те же.)
     */
    .advanced-save-bar {
        position: relative !important;
        bottom: auto !important;
    }
}

/*
 * Выпадающий список не обрезается карточкой.
 *
 * `.advanced-filter-card` закрыт `overflow: hidden`, и открытый список
 * города уезжал под его край — на экране это выглядит как «выбор ушёл
 * куда-то на задний план». Список и так лежит выше по слоям
 * (`z-index: 120`), мешала ему только обрезка.
 *
 * Скругление карточки от этого не страдает: ничего, кроме списка,
 * за её края не выходит.
 */
.advanced-filter-card {
    overflow: visible;
}

/*
 * Карточка с открытым списком поднимается над соседними.
 *
 * Снять обрезку было мало: у всех карточек `z-index: 2` (их поднимает
 * общее правило «интерфейс над птицами»), и открытый список города
 * оставался внутри слоя своей карточки — его закрывала следующая,
 * «Качество выдачи». Собственный `z-index: 120` у списка при этом
 * ни на что не влияет: он считается внутри чужого слоя.
 *
 * `:has()` поддержан во всех нынешних браузерах; на случай, если
 * когда-нибудь окажется иначе, поломка безобидна — вернётся ровно
 * то перекрытие, что было.
 */
.advanced-filter-card:has(.sm-dropdown.is-open) {
    z-index: 50;
}

/*
 * Пальцевые цели на входе и регистрации.
 *
 * «Забыли пароль?» — 36 точек; это нашли прошлым аудитом 15 сентября,
 * записали и не починили. Строка согласия — 36: сама строка широкая,
 * промахнуться трудно, но высота у второй галочки вдвое меньше первой,
 * и ряд выглядит разъехавшимся.
 *
 * `.button-link` — надпись-переход, а не кнопка (решение владельца
 * 9 сентября), поэтому растёт область нажатия, а не кегль.
 */
@media (max-width: 800px) {
    .button-link { min-height: 44px; }
    .consent label,
    label.consent { min-height: 44px; }
}

/*
 * Название интереса в выдаче — две строки на телефоне, а не одна.
 *
 * `white-space: nowrap` с многоточием на 360 точках режет всё подряд:
 * «Гарри Поттер и философский ка…» не отличить от «Гарри Поттер
 * и философский камень. Иллюстрированное издание», а выбирать человеку
 * надо именно между ними. У книг к названию ещё и приписан автор,
 * то есть места нужно больше, чем в любой другой категории.
 *
 * Две строки, а не «сколько получится»: ряд карточек обязан остаться
 * ровным, иначе список читается как случайный набор.
 */
@media (max-width: 800px) {
    .interest-result-copy strong {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        line-height: 1.3;
    }
    .interest-result-copy small { font-size: 12px; }
}

/*
 * Галочки и переключатели не растягиваются.
 *
 * `input, textarea, select { width: 100% }` задумано для полей ввода,
 * но под него попадают и `checkbox` с `radio`. В форме мероприятия
 * галочка «Вход свободный» вышла 244×48 — системный квадрат во всю
 * строку, чёрный и огромный. Своей ширины у неё нет: у замещаемого
 * элемента её задаёт браузер, и `100%` перебивает.
 *
 * `accent-color` здесь же: без него системная галочка красится
 * синим цветом операционной системы, разным на каждом телефоне.
 */
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    /* `input, textarea, select { min-height: 46px }` (и 48 на телефоне)
       написано для полей ввода, но растягивает и галочки: на экране
       подтверждения анкеты галочка согласия выходила 20x48 — высокий
       серый прямоугольник, который владелец и принял за рамку.
       `min-height` перебивает `height`, поэтому его надо снимать явно. */
    min-height: 0;
    min-width: 0;
    flex: none;
    accent-color: var(--scenic-active);
}

/*
 * Окно камеры на телефоне.
 *
 * Поток идёт во всю ширину, то есть на 360 точках занимает 270–480
 * по высоте, и подсказку с позой вместе с кнопкой «Снять» уносило
 * за нижний край: человек листал вниз к себе в кадр, а что показывать —
 * оставалось наверху. Владелец 15 сентября 2026: «либо окошко поменьше
 * сделать либо вынести просто отдельно» — сделано и то и другое.
 */
@media (max-width: 800px) {
    .verification-camera video {
        max-height: 42vh;
        object-fit: cover;
    }
}

/*
 * Тупик на пустой категории не съедает карточку.
 *
 * `grid-template-columns: minmax(120px, 180px) minmax(0, 1fr)` берёт
 * свой максимум всегда, когда место «есть». А на экране интересов
 * карточки стоят по две в ряд, и каждая выходит 298 точек: птица
 * занимала 180, тексту оставалось 71, и «Здесь пока пусто» ломалось
 * по слогам — «действител / ьно».
 *
 * Доля вместо жёсткой ширины: птица всегда меньше трети карточки,
 * не мельче 88 точек и не крупнее прежних 180.
 */
.interest-category-empty-art {
    grid-template-columns: clamp(88px, 30%, 180px) minmax(0, 1fr);
}

/*
 * Круг «летящие тупики» остаётся в правом верхнем углу — там, где
 * владелец его и ожидает. Я один раз перенёс его вниз, чтобы развести
 * со стоящими там же кнопками экрана («Все категории», «Готово»,
 * «Настройки»), и это была неверная починка: переехал круг, а мешал
 * не он, а отсутствие места под него.
 *
 * Место и отводим: у шапки экрана появляется правое поле шириной
 * с круг плюс просвет. Кнопки экрана встают левее, круг стоит на своём
 * месте, и добавленная завтра кнопка тоже не попадёт под него.
 *
 * Показан круг только от 1000 точек — полёт ниже не включается вовсе,
 * поэтому на телефоне поле не нужно.
 */
@media (min-width: 1001px) {
    .hub-header,
    .profile-page-header,
    .discover-heading,
    .settings-page > .hub-header,
    .interest-page-header {
        padding-right: 84px;
    }
}

/*
 * Знак жалобы на свайп-карточке — 44 точки на телефоне.
 *
 * Был 34. Это кнопка, доступ к которой требует Google Play, и жмут её
 * в единственный неприятный момент — когда хочется закрыться от
 * человека прямо там, где его увидели. Промахиваться по ней нельзя.
 */
@media (max-width: 800px) {
    .candidate-safety .safety-mark {
        width: 44px;
        height: 44px;
    }
}

/*
 * Три места, найденные владельцем на телефоне 15 сентября 2026.
 */

/* Крестик у выбора города в афише был 25x32 при `border-radius: 50%` —
   то есть овал. Круг требует равных сторон, а на телефоне ещё и цели
   в 40 точек: закрыть список промахом мимо неприятнее всего. */
.filter-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
}
.filter-close .ui-icon { width:18px; height:18px; }

@media (max-width: 800px) {
    .filter-close {
        width: 40px;
        height: 40px;
    }
}

/* Плашка «Главное» переезжает под фотографию: сверху она закрывала лицо,
   а снизу по центру подписывает снимок, ничего не перекрывая.

   Центрирование задано **здесь же**, а не в правиле тремя тысячами
   строк выше. Так оно и было, и владелец 16 сентября 2026 всё равно
   увидел плашку прижатой вправо: положение блока держалось на двух
   правилах в разных концах файла, и достаточно одному не доехать —
   кэшем, порядком, чем угодно, — как остаётся половина. Блок, задающий
   положение, обязан задавать его целиком. */
.profile-photo-visual {
    /* Плашка позиционируется от этого блока. Если он вдруг окажется
       не позиционированным, она уедет к краю чужого предка — а именно
       это владелец и видел. Утверждаем явно. */
    position: relative !important;
}

.main-photo-badge {
    top: auto;
    /* У самого нижнего края, но капсулой. Вплотную и с прямыми
       нижними углами она превращается в приклеенный ярлык — форма
       перестаёт читаться как плашка. */
    /* Как в Android: небольшой воздух оставляет нижнюю рамку видимой,
       но метка всё ещё однозначно относится к фотографии. */
    bottom: 6px;
    /* Центрируем без transform: левый и правый край прижаты к бокам,
       а `margin: auto` делит остаток поровну. `left: 50%` со сдвигом
       на половину ширины даёт то же самое, но ломается, если сдвиг
       кто-нибудь погасит, — а гасят у нас многое. */
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: max-content;
    max-width: calc(100% - 16px);
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap;
}

/* Подсказка в выборе кадра: два образца вместо описания словами.
   «Где круглое фото» — вопрос владельца, и он справедлив: круг белой
   линией внутри светлой области почти не виден. */
.focus-legend {
    display: grid;
    gap: 6px;
    margin-top: 6px;
}

.focus-key {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid #fff;
}

.focus-key-circle {
    border-color: var(--v2-cyan, #73d2ff);
    border-radius: 50%;
}

/* Круг кадра — голубой, а не белый: белым он сливался с рамкой
   и с самой фотографией. */
.focus-circle {
    border-color: var(--v2-cyan, #73d2ff);
    border-width: 3px;
}

/* Плитка, которую несут пальцем, обязана быть видна: без этого
   долгое нажатие неотличимо от «не сработало». */
.profile-photo-tile.is-dragging {
    opacity: .6;
    transform: scale(.97);
}

.profile-photo-tile.is-drag-target {
    outline: 2px solid var(--v2-cyan, #73d2ff);
    outline-offset: 2px;
}

/*
 * Фильтры поиска на телефоне: кнопка на виду, панель — нижний лист.
 *
 * Владелец 15 сентября 2026: «кнопка спрятана, надо скролить, ошибка раз,
 * а когда открывается — она где-то внизу появляется не во весь экран».
 * Замер на 375 точках подтвердил оба:
 *
 *   * кнопка стояла на `left: 559` — то есть за правым краем, внутри
 *     бокового прокручиваемого ряда фишек. Найти её можно было только
 *     догадавшись пролистать ряд вбок;
 *   * открытая панель оказывалась на `left: 386, top: 1070` при экране
 *     375x812 — целиком снаружи. Задумана она выезжающим листом
 *     (`position: fixed` + `transform`), но `position` у неё `relative`:
 *     это **третий** случай за день, когда правило «интерфейс над
 *     птицами» (`.glass-panel { position: relative !important }`) ломает
 *     чужую раскладку. Первые два — нижняя панель и полоса «Начать
 *     поиск».
 *
 * Разбор `app.css` от этого не отменяется, а становится обязательным:
 * четвёртый случай будет.
 */
@media (max-width: 800px) {
    /* Кнопка выходит из ряда фишек и встаёт над лентой — там же, где
       круглая кнопка настроек подбора в приложении. Круг полёта сюда
       не попадает: он живёт только от 1000 точек. */
    .toolbar-filter-button {
        position: fixed !important;
        top: calc(10px + env(safe-area-inset-top)) !important;
        right: 10px !important;
        z-index: 60 !important;
        min-height: 44px !important;
        padding: 0 14px !important;
        border-radius: 999px !important;

    }

    /* Закрытая панель не висит в потоке: она добавляла к странице
       776 точек пустой прокрутки. */
    .filters-panel {
        display: none !important;
    }

    body.filters-open .filters-panel {

        position: fixed !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        /* Где-то выше по файлу листу задан `max-width` в долях ленты,
           и от него справа оставалась полоска в двадцать точек, сквозь
           которую просвечивала лента. Лист снизу занимает всю ширину. */
        max-width: none !important;
        max-height: 82dvh !important;
        margin: 0 !important;
        transform: none !important;
        /* Выше нижней панели: у неё z-index 90, и при 80 она рисовалась
           поверх листа, закрывая собой «Применить фильтры». Владелец
           видел ровно это — «нельзя сохранить». */
        z-index: 120 !important;
        border-radius: 18px 18px 0 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        /* Под вырез и полоску жеста: иначе последний фильтр упирается
           в самый край. */

    }

    /* Затемнение включено обратно: без него лист читается как часть
       ленты, а нажатие мимо него ничего не закрывает. */
    body.filters-open::after {

        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 110 !important;
        background: rgba(1, 8, 20, .54) !important;
        backdrop-filter: blur(4px);
    }

    .filter-close {
        display: grid !important;
    }
}

/*
 * Лист фильтров: шапка и «Применить» на месте, середина прокручивается.
 *
 * Владелец 15 сентября 2026: «фильтр открывается, но нельзя сохранить,
 * какие-то странные слои, которые двигают задний фон». Причин две, и обе
 * про одно — кнопка была последним элементом общей прокрутки листа:
 *
 *   * доехать до неё можно было только прокруткой, а прокрутка уходила
 *     странице за листом: вместо фильтров ехал фон. Это и есть «странные
 *     слои, которые двигают задний фон»;
 *   * `overscroll-behavior` держит только то, что **само** прокрутилось
 *     до края. Лист, прокрутку которого перехватили, не держит ничего.
 *
 * Поэтому лист стал колонкой: шапка и «Применить» не прокручиваются
 * вовсе, между ними едет `.filter-body`. Что бы ни случилось с высотой
 * экрана, сохранение видно всегда — и это правило, а не починка одного
 * экрана: кнопка, ради которой открыли лист, не прячется в прокрутке.
 *
 * Прокрутка страницы под листом заперта: фону двигаться нечем, и уже
 * поэтому перехватывать нечего.
 */
@media (max-width: 800px) {
    body.filters-open .view {
        overflow: hidden !important;
    }

    body.filters-open .filters-panel {
        display: flex !important;
        flex-direction: column !important;
        /* Прокручивается середина, а не лист целиком. */
        overflow: hidden !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.filters-open .filter-head {
        flex: 0 0 auto !important;

    }

    body.filters-open .filter-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    body.filters-open .filter-apply {
        flex: 0 0 auto !important;
        width: 100% !important;
        margin: 10px 0 calc(14px + env(safe-area-inset-bottom)) !important;
    }

    /* «В отношениях» и «Есть дети» — в два столбца: поля короткие,
       и в колонку они занимали вдвое больше места без всякой пользы. */
    .filters-panel .filter-personal {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

/*
 * Ряд над лентой: два столбца, перенос, и кнопка фильтров в нём же.
 *
 * Владелец 16 сентября 2026, два замечания подряд. Первое: «значения
 * поиска скролятся по горизонтали, а я просил избавиться от этого».
 * Прошлый заход счёл обрезанный чип «18–100» замыслом — ряд и правда
 * был написан прокручиваемым (`overflow-x: auto`), — и это была
 * ошибка: **горизонтальная прокрутка на телефоне не видна, пока в неё
 * не ткнёшь**, поэтому обрезанный край читается как поломка вёрстки.
 *
 * Второе: «кнопка фильтр где-то внизу, в теории её можно наверх
 * засунуть, уменьшив „Подбор“». Так и сделано — кнопка вернулась
 * в ряд, первой строкой рядом с «Подбором», и от закрепления
 * у навигации мы отказались. Заодно исчезает и стопка слоёв, из-за
 * которой она пряталась за карточкой ленты: элемент в потоке
 * не спорит с соседями за порядок отрисовки.
 *
 * Раскладка: строка 1 — «Подбор» и «Фильтры», строка 2 — «Возраст»
 * и «Показываем». Столбцы равные: ряд одинаковых кнопок делится
 * равными долями, а не по ширине надписи, — то же правило, что
 * у отрезков дат в афише.
 */
@media (max-width: 800px) {
    .discover-toolbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .discover-toolbar > .toolbar-pill-wide {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .discover-toolbar > .toolbar-filter-button {
        /* Возврат в поток: выше по файлу лежит прошлая правка того же
           дня, прибивавшая кнопку к верхнему правому углу экрана.
           Снимать её там нельзя заодно — правило трогает и другие
           ширины, — поэтому здесь она гасится явно. */
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .discover-toolbar > .toolbar-pill,
    .discover-toolbar > .toolbar-filter-button {
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 7px 11px !important;
        gap: 8px !important;
    }

    /* Надпись переносится, а не режется многоточием: «По совпадениям
       интересов» иначе превращается в «По совпадени…». */
    .discover-toolbar .toolbar-pill strong {
        white-space: normal !important;
        overflow: visible !important;
        font-size: 11.5px !important;
        line-height: 1.18 !important;
    }

    .discover-toolbar .toolbar-icon {
        flex: none !important;
    }

    /*
     * Кнопка светлая: тёмно-синей она сливалась с фоном, и владелец
     * попросил перекрасить. Заливка та же, что у «Начать поиск».
     * Терракоту сюда брать нельзя: в этом продукте она означает
     * симпатию и мэтч, и открытие фильтров обещало бы событие,
     * которого нет.
     */
    .toolbar-filter-button {
        justify-content: center !important;
        color: #06274a !important;
        background: linear-gradient(180deg, #e2f2ff, #a9d7ff) !important;
        border: 0 !important;
        box-shadow: 0 8px 20px rgba(0, 8, 24, .34) !important;
        font-weight: 700 !important;
    }

    .toolbar-filter-button .toolbar-icon,
    .toolbar-filter-button .sm-icon {
        color: #06274a !important;
    }
}

/*
 * Лист фильтров помещается целиком, а остаток прокрутки тает.
 *
 * Владелец 16 сентября 2026: «фильтр за каким-то слоем в части замены
 * возраста, который не даёт ничего сделать». Это был верхний край
 * прокрутки середины: раздел «Возраст» уезжал под закреплённую шапку
 * и оставался наполовину видимым — ровно та бритвенная обрезка,
 * которую в этом проекте правило запрещает («прокручиваемое
 * содержимое не обрывается, а тает»), только записана она была
 * про Android.
 *
 * Поэтому две вещи сразу: содержимое ужато так, чтобы на обычном
 * телефоне прокрутки не оставалось вовсе, а если она всё же нужна —
 * края середины растворяются, и полуобрезанной строки не бывает
 * ни при каком росте экрана.
 */
@media (max-width: 800px) {
    /* Подзаголовок листа на телефоне не нужен: он повторяет то, что
       написано на самой кнопке, и стоит восемнадцати точек высоты —
       ровно столько не хватало разделу «Возраст». */
    body.filters-open .filter-head p {
        display: none !important;
    }

    body.filters-open .filter-head {
        padding: 12px 0 8px !important;
    }

    body.filters-open .filter-head h3 {
        font-size: 17px !important;
    }

    body.filters-open .filters-panel.has-filter-scroll .filter-body {
        /* Края тают, а не обрываются — но только когда середина и правда
           прокручивается: признак ставит сам экран, замерив её. */
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
    }

    .filters-panel .filter-section {
        padding: 7px 0 !important;
    }

    .filters-panel .filter-section-head {
        margin-bottom: 6px !important;
    }

    /* Пояснения к переключателям на телефоне убраны: «Только анкеты
       после проверки» и «Показывать в конце ленты» повторяют сам
       заголовок, а стоят двух строк в самом тесном месте экрана. */
    .filters-panel .filter-toggles .toggle-row .hint,
    .filters-panel .filter-toggles .toggle-row small,
    .filters-panel .filter-toggles .toggle-row p {
        display: none !important;
    }

    .filters-panel .filter-toggles {
        display: grid !important;
        gap: 6px !important;
    }

    .filters-panel .range-ticks {
        margin-top: 0 !important;
    }
}

/*
 * Фотографию несут пальцем, и мешать этому нечему.
 *
 * Долгое нажатие на картинку браузер по умолчанию понимает как
 * «выделить» или «сохранить изображение», и всплывшее меню перебивает
 * перенос. Отсюда запрет выделения и вызова меню на самой плитке.
 */
.profile-photo-tile {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.profile-photo-tile img {
    -webkit-user-drag: none;
}

/*
 * Пока открыт лист, нижняя панель уходит под него.
 *
 * Замер 16 сентября 2026: у листа z-index 120, у панели 90 — и панель
 * всё равно рисовалась поверх, закрывая собой «Применить фильтры».
 * Числа тут ни при чём: панель и рабочая область — **соседние** слои
 * внутри `.shell`, а `.shell` вдобавок `isolation: isolate`. Что бы
 * ни стояло у листа внутри рабочей области, он остаётся внутри слоя
 * со своим z-index 2, а панель лежит на 90 рядом.
 *
 * Поэтому опускается панель, а не поднимается лист: одно свойство
 * у одного элемента и ровно на время, пока лист открыт. Нажать
 * по панели всё равно нельзя — сверху затемнение.
 *
 * Правило общее и стоит запомнить: **z-index сравнивается только
 * внутри одного слоя.** Поднимать число у вложенного элемента,
 * когда мешает сосед его предка, бесполезно.
 */
@media (max-width: 800px) {
    body.filters-open .shell > .nav {
        z-index: 1 !important;
    }
}

/*
 * Затемнение под листом фильтров.
 *
 * Было `body.filters-open::after`, и это оказалось неверно по самой
 * сути: псевдоэлемент `body` лежит **над всем приложением** (`#app` —
 * своя ступень с `isolation: isolate`), то есть в стопке он спорил
 * не с листом, а со всем экраном разом. Владелец 16 сентября 2026
 * назвал это «какой-то прозрачный фон поверх фильтра, который мешает».
 *
 * Теперь это настоящий элемент рядом с самим листом, внутри
 * `.discover-layout`: накрыть лист он не может никогда — у листа
 * в том же слое номер выше. И по нему можно нажать: касание мимо
 * листа закрывает фильтры. Псевдоэлемент касание просто съедал,
 * и выйти можно было только крестиком.
 *
 * Размытия под затемнением нет намеренно. `backdrop-filter` на слое
 * во весь экран — самая дорогая вещь, которую можно попросить
 * у телефона, и часть отрисовщиков вместо размытия заливает всё
 * сплошным цветом. Ради полупрозрачной подложки это не нужно:
 * чуть более плотное затемнение делает то же самое даром.
 */
.filters-scrim {
    display: none;
}

@media (max-width: 800px) {
    /* Прежнее затемнение выключено совсем, чтобы два слоя не спорили. */
    body.filters-open::after {
        display: none !important;
    }

    body.filters-open .filters-scrim {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        /* На единицу ниже листа и в том же слое, что он. */
        z-index: 119 !important;
        background: rgba(1, 8, 20, .62) !important;
    }
}

/*
 * Симпатия и «Пропустить» — как в приложении.
 *
 * Владелец 16 сентября 2026: «и в web, и в мобильной версии веба
 * почему-то красная кнопка для лайка, а в приложении другая, хотелось
 * бы как в приложении».
 *
 * Так и есть, и виновато устаревшее правило. В вебе симпатия красилась
 * терракотой `#a9373a` по записи «терракота означает симпатию и мэтч»,
 * а в приложении с переделки оформления (ветка `design/cozy-night`)
 * симпатия **синяя**: `SearchScreen.kt` зовёт `SoulMatesDepthCircle`
 * с `containerColor = ScenicActiveBlue` и белым сердцем, а пропуск —
 * тёмный круг с бледно-голубым знаком. Терракоты на этом экране
 * в приложении нет вовсе; `ScenicWarmAccent` только называется тёплым,
 * а на деле это `#DCEEFF`.
 *
 * Цвета не подобраны на глаз, а посчитаны по той же формуле, что
 * в `SoulMatesDepth.kt`: `liftGradient` осветляет верх на 0.16
 * и затемняет низ на 0.18, середина остаётся самим цветом на 52 %.
 * Отсюда #74B6FF / #5AA8FF / #4A8AD1 у симпатии и #314760 / #081E36
 * у пропуска.
 *
 * Объём складывается из тех же четырёх вещей, что в приложении:
 * градиент сверху вниз, светлая грань по верхнему краю, тень
 * **в цвет кнопки** (чёрная на ночном фоне не видна вовсе)
 * и утапливание при нажатии.
 */
.button.like-button,
.match-actions .button.like-button,
.match-actions .button.like-button:hover:not(:disabled) {
    color: #f4f8ff !important;
    text-shadow: 0 1px 2px rgba(2, 17, 39, .48) !important;
}

.button.like-button {
    background: linear-gradient(180deg, #2d72ba 0%, #2364a8 52%, #174f91 100%) !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    border-bottom-color: rgba(0, 0, 0, .26) !important;
    box-shadow:
        0 14px 30px rgba(25, 91, 158, .42),
        inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    transition: transform 80ms ease-out, background 160ms ease-out, box-shadow 160ms ease-out;
}

.button.like-button:hover:not(:disabled) {
    background: linear-gradient(180deg, #3478bd 0%, #286cb2 52%, #1b589d 100%) !important;
    box-shadow:
        0 16px 34px rgba(31, 104, 177, .48),
        inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}

/* Утапливание: в приложении концы градиента меняются местами, свет
   остаётся сверху, а поверхность уходит вниз. Ход вниз короткий (80 мс),
   обратно — длиннее, как и там. */
.button.like-button:active:not(:disabled) {
    transform: scale(.97);
    background: linear-gradient(180deg, #174f91 0%, #1f5997 52%, #245f9f 100%) !important;
    box-shadow:
        0 3px 10px rgba(18, 70, 124, .34),
        inset 0 1px 0 rgba(255, 255, 255, .10) !important;
    transition-duration: 80ms;
}

.skip-button {
    color: #dceeff !important;
    background: linear-gradient(180deg, #314760 0%, rgba(10, 36, 66, .92) 52%, #081e36 100%) !important;
    border: 1px solid rgba(143, 184, 223, .34) !important;
    border-bottom-color: rgba(0, 0, 0, .26) !important;
    box-shadow:
        0 10px 22px rgba(8, 30, 60, .38),
        inset 0 1px 0 rgba(255, 255, 255, .14) !important;
    transition: transform 80ms ease-out, background 160ms ease-out;
}

.skip-button:hover:not(:disabled) {
    background: linear-gradient(180deg, #3b5473 0%, rgba(14, 44, 78, .94) 52%, #0b2542 100%) !important;
    border-color: rgba(143, 184, 223, .52) !important;
}

.skip-button:active:not(:disabled) {
    transform: scale(.97);
    transition-duration: 80ms;
}

/*
 * Красного в вебе больше нет.
 *
 * Владелец 16 сентября 2026: «красную кнопку „Написать“ надо заменить
 * при лайках, у нас красный цвет нигде не задействуется». Так и есть:
 * терракота `#a9373a` держалась в вебе одной записью в правилах, а
 * в приложении с переделки оформления её не осталось — там все главные
 * действия синие (`SoulMatesDepthButton`, `containerColor` по умолчанию
 * `ScenicActiveBlue`).
 *
 * Окно мэтча и отправка в чате — обычные главные действия, поэтому
 * они используют общий светло-голубой градиент с тёмно-синим текстом.
 * Белое содержимое остаётся только у эмоционального действия
 * «Симпатия», где фон специально сделан темнее ради контраста.
 */
.button-accent,
.button-accent:hover:not(:disabled) {
    color: #071a32 !important;
    text-shadow: none !important;
}

.button-accent {
    background: linear-gradient(145deg, #dcecf8 0%, #b9ddf6 48%, #79bce9 100%) !important;
    border: 1px solid rgba(83, 163, 220, .66) !important;
    border-bottom-color: rgba(33, 88, 137, .54) !important;
    box-shadow:
        0 14px 30px rgba(0, 24, 62, .36),
        inset 0 1px 0 rgba(255, 255, 255, .34) !important;
    transition: transform 80ms ease-out, background 160ms ease-out, box-shadow 160ms ease-out;
}

.button-accent:hover:not(:disabled) {
    background: linear-gradient(145deg, #e7f4fd 0%, #c5e5fb 46%, #82c6f2 100%) !important;
    border-color: rgba(101, 187, 239, .80) !important;
    box-shadow:
        0 16px 34px rgba(0, 24, 62, .42),
        inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

.button-accent:active:not(:disabled) {
    transform: scale(.97);
    background: linear-gradient(145deg, #79bce9 0%, #b9ddf6 52%, #dcecf8 100%) !important;
    box-shadow:
        0 3px 10px rgba(0, 24, 62, .28),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    transition-duration: 80ms;
}

/*
 * Знак в кружке совпадения не режется по краям.
 *
 * У самого рисунка стояло `border-radius: 50%`, то есть круглая обрезка
 * по **квадрату картинки**. Логотип шире, чем выше, и `object-fit:
 * contain` растягивает его ровно во всю ширину этого квадрата —
 * значит крайние точки лежат точно на окружности, а всё, что выше
 * или ниже середины (головы тупиков), уходит за неё и срезается.
 *
 * Обрезка тут не нужна вовсе: у `.match-ring-core` свой круглый фон,
 * а у самого знака прозрачный край. Заодно он чуть ужат, чтобы между
 * ним и кромкой круга оставался просвет, а не касание.
 */
.match-ring-core img {
    width: 68% !important;
    height: 68% !important;
    border-radius: 0 !important;
}

/* Подсказка про неточные совпадения в афише: своя строка над лентой,
   а не подпись у каждой карточки. Повторённая двадцать раз, она
   перестала бы читаться. */
.events-loose-hint {
    margin: 0 0 12px;
    padding: 10px 13px;
    border-radius: 14px;
    border: 1px solid rgba(151, 216, 255, .16);
    background: rgba(6, 27, 55, .58);
    line-height: 1.4;
}

/*
 * Поле ввода в переписке.
 *
 * Общее правило `textarea { min-height: 104px }` писалось под «О себе»
 * в анкете, а достаётся и строке сообщения. На телефоне его перебивает
 * `input, textarea, select { min-height: 48px }` из мобильного блока,
 * поэтому там всё выглядело нормально, а в браузере поле стояло
 * в сто четыре точки пустой высоты — владелец 16 сентября 2026 назвал
 * это «в браузере ужасно».
 *
 * Своя высота у строки сообщения, и растёт она по мере набора —
 * это делает `chat.js`, здесь только границы.
 */
.chat-compose-form {
    /* Кнопка прижата к низу и не растягивается вслед за полем. */
    align-items: flex-end;
}

.chat-compose-form textarea {

    max-height: 120px;
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 1.35;
}

/*
 * Фотография собеседника в правой колонке — круг, а не овал.
 *
 * `.rail-photo` стояла в 3:4 со скруглением 50 %, а это по определению
 * эллипс. Круглой её делает не скругление, а квадратная рамка.
 */
.rail-photo {
    width: min(100%, 220px) !important;
    aspect-ratio: 1 !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Рамка поддержки вокруг фотографии собеседника: та же геометрия,
   что в своей анкете, только шириной по колонке. */
.rail-avatar {
    width: min(100%, 220px);
    margin: 0 auto;
}

.rail-avatar .rail-photo {
    width: 78% !important;
    height: 78%;
}

/*
 * Полоса ввода — это край панели переписки, а не карточка на ней.
 *
 * Владелец 16 сентября 2026: «в браузерной ввод сообщения на какой-то
 * подложке, которая не очень смотрится», и «в мобильной слева от ввода
 * вертикальная полоска».
 *
 * Причина одна на оба: у формы стояли `max-width: var(--column)`
 * и `margin: 0 auto`, а фон с верхней чертой нарисованы на ней же.
 * Значит подложка обрывалась по 480 точкам посреди панели — на широком
 * экране это читалось как приклеенная плашка, а на узком её край
 * оказывался вертикальной чертой сбоку.
 *
 * Правильно наоборот: **полоса во всю ширину панели, содержимое —
 * по колонке**. Ширину держит внутренний отступ, поэтому лишняя
 * обёртка в разметке не нужна.
 */
.chat-compose-form {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: max(14px, calc((100% - var(--column)) / 2)) !important;
    padding-right: max(14px, calc((100% - var(--column)) / 2)) !important;
    background: linear-gradient(180deg, rgba(4, 20, 43, .78), rgba(4, 20, 43, .96)) !important;
    /* Черты сверху нет: на телефоне полоса идёт во всю ширину, и линия
       читалась голубой чертой поперёк экрана. Край полосы показывает
       сам градиент — он же не спорит с сообщением, которое под него
       уезжает. */
    border-top: 0 !important;
}

/* Список сообщений выровнен по той же колонке — иначе реплики и поле
   ввода стоят по разным осям, и это видно сразу. */
.chat-message-list {
    padding-left: max(14px, calc((100% - var(--column)) / 2)) !important;
    padding-right: max(14px, calc((100% - var(--column)) / 2)) !important;
}

/* Кружок в списке переписок с рамкой поддержки. Геометрия та же, что
   в анкете: фотография занимает 78 % рамки и сидит в её середине. */
.chat-avatar-frame {
    position: relative;
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
}

.chat-avatar-frame .chat-avatar {
    width: 78%;
    height: 78%;
}

/* Без рамки фотография занимает кружок целиком — иначе у тех, кто
   ничего не покупал, аватар вдруг стал бы мельче соседского. */
.chat-avatar-frame:not(:has(.chat-avatar-decoration)) .chat-avatar {
    width: 100%;
    height: 100%;
}

.chat-avatar-decoration {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/*
 * Время и галочки под сообщением.
 *
 * Галочки — те же знаки, что в приложении (`Icons.Default.Done`
 * и `DoneAll`), а не типографская «✓»: у символа своя ширина и свой
 * наклон, и рядом со временем он читается опечаткой.
 */
.bubble-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0 0;
    font-size: 11px;
    opacity: .72;
}

.bubble-meta-mine {
    justify-content: flex-end;
}

.bubble-tick {
    width: 14px;
    height: 14px;
    flex: none;
}

/*
 * Полоса прокрутки внутри строки сообщения.
 *
 * Владелец 16 сентября 2026 увидел «голубую линию справа от места
 * ввода». Это была не черта и не рамка: содержимое пустого поля
 * на два пикселя выше его коробки (16 кегль × 1.35 плюс отступы),
 * и `overflow-y: auto` честно рисовал полосу прокрутки в два
 * пикселя — прямоугольную, в скруглённом поле, то есть заметную.
 *
 * Лечится с обоих концов: коробка стала на два пикселя выше строки,
 * а полоса скрыта. Прокрутка при этом работает — она нужна, когда
 * текст перерастёт `max-height`.
 */
.chat-compose-form textarea {
    min-height: 48px !important;
    height: 48px;
    scrollbar-width: none;
}

.chat-compose-form textarea::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.chat-compose-form .button {
    min-height: 48px;
    height: 48px;
}

/* Подпись раздела чатов умещается в прежнюю высоту шапки,
 * чтобы не отбирать место у переписки. */
.chats-topbar {
    min-height: 64px;
}

.topbar-heading {
    flex: 1;
    display: grid;
    gap: 1px;
    min-width: 0;
}

.topbar-heading .eyebrow { font-size:14px; line-height:1.2; }

.topbar-heading h2,
.pane-title-section h2 {
    margin: 0;
}

.pane-title-section {
    display: grid;
    gap: 2px;
}

.pane-title-section .eyebrow { font-size:14px; }

@media (max-width:800px) {
    .responsive-copy-desktop { display:none; }
    .responsive-copy-mobile { display:block; }
    .section-page-header h1 { font-size:32px; }
    .section-page-header .eyebrow { font-size:14px; line-height:1.2; }
    .section-page-header .eyebrow::before { width:5px; height:5px; }
    .section-page-header > p,
    .section-page-header .responsive-copy { font-size:13px; }
    .chats-page,
    .messenger-page { width:100%; padding:18px 12px 96px; }
}

/* Форма своего мероприятия: раньше шапка, пояснение, обязательные
 * поля и первое поле слипались в один блок без вертикального ритма. */
.create-event-form {
    display: grid;
    gap: 16px;
}

.create-event-form > .topbar {
    width: 100%;
    padding: 0;
    margin-bottom: 2px;
}

.create-event-form > .hint,
.create-event-form > .muted {
    margin: 0;
    line-height: 1.55;
}

.create-event-form .form-field {
    gap: 8px;
}

.create-event-form .checklist h3,
.event-cover-editor h3 {
    margin-top: 0;
}

.event-cover-editor {
    display: grid;
    gap: 12px;
}

.event-cover-editor > img,
.event-cover-editor-empty {
    width: 100%;
    aspect-ratio: 5 / 2;
    border-radius: 14px;
    background: rgba(10, 35, 67, .66);
}

.event-cover-editor > img {
    display: block;
    object-fit: cover;
}

.event-cover-editor-empty {
    display: grid;
    place-items: center;
    color: var(--v2-muted);
    border: 1px dashed rgba(111, 195, 248, .30);
}

.event-cover-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.event-cover-editor-actions .button {
    width: auto;
}

.event-cover-editor .muted,
.event-city-prompt {
    margin: 0;
}

@media (max-width: 560px) {
    .create-event-form {
        gap: 14px;
    }

    .event-cover-editor-actions {
        display: grid;
    }

    .event-cover-editor-actions .button {
        width: 100%;
    }
}

/* На телефоне все выбранные интересы идут одной лентой, как в Android.
 * Раньше обзор показывал только первые пять, а редактор складывал шесть
 * плиток в сетку без понятного продолжения. */
@media (max-width: 720px) {
    .interest-overview-covers,
    .interest-selected-grid {
        display: flex !important;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 24px 10px 1px;
    }

    .interest-overview-covers::-webkit-scrollbar,
    .interest-selected-grid::-webkit-scrollbar {
        display: none;
    }

    .interest-overview-cover,
    .interest-selected-tile {
        flex: 0 0 min(38vw, 132px);
        scroll-snap-align: start;
    }

}

/* Город своего события выбирается теми же двумя понятными режимами,
 * что и география поиска: свой город либо ввод названия. */
.event-city-field {
    position: relative;
}

.event-city-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.city-mode-button {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 13px 14px;
    color: var(--v2-text);
    background: rgba(7, 29, 58, .56);
    border: 1px solid rgba(127, 198, 243, .18);
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
}

.city-mode-button small {
    overflow: hidden;
    color: var(--v2-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.city-mode-button.is-selected {
    border-color: rgba(103, 210, 255, .72);
    background: rgba(34, 103, 166, .48);
    box-shadow: 0 0 0 2px rgba(86, 194, 246, .09);
}

.city-mode-button:disabled {
    opacity: .55;
    cursor: default;
}

.event-city-other {
    position: relative;
}

.event-city-other > input {
    width: 100%;
}

.event-anchors-card {
    display: grid;
    gap: 12px;
}

.event-anchors-card > h3,
.event-anchors-card > p,
.event-anchors-card > .chips {
    margin: 0;
}

.event-anchors-card > .button {
    justify-self: start;
    width: auto;
}

@media (max-width: 560px) {
    .event-city-modes {
        grid-template-columns: 1fr;
    }

    .event-anchors-card > .button {
        width: 100%;
    }
}

/*
 * Средняя колонка стоит вровень с соседними.
 *
 * Владелец 16 сентября 2026: «колонка с кнопкой симпатии уехала,
 * не на том же уровне, что другие». Так и было, и ровно на 18 точек:
 * у `.match-panel` с давних пор стоит `position: sticky; top: 18px`,
 * а липкий элемент со смещением встаёт на эти 18 точек ниже своей
 * строки — даже когда прилипать не к чему.
 *
 * На широком экране прилипать и правда не к чему: все три колонки
 * ростом с экран и прокручиваются каждая внутри себя. Липкость там
 * не даёт ничего, а смещение видно сразу. На узких ширинах она
 * остаётся: там карточка кандидата длиннее, и панель совпадений
 * должна оставаться на виду, пока её листают.
 */
@media (min-width: 1241px) {
    .discover-layout > .match-panel {
        position: relative !important;
        top: auto !important;
        align-self: stretch !important;
    }
}

/* Поиск должен учитывать не только окно, но и боковое меню. В диапазоне,
 * где три колонки уже не помещаются, совпадение становится компактной
 * полосой под анкетой, а фильтры остаются самостоятельной правой колонкой. */
@media (min-width:1100px) and (max-width:1499px) {
    .discover-page {
        height:100% !important;
        min-height:0 !important;
        display:flex !important;
        flex-direction:column !important;
        padding-top:12px !important;
        padding-bottom:10px !important;
    }
    .discover-header { flex:none !important; margin-bottom:8px !important; }
    .discover-toolbar { margin-top:8px !important; }
    .discover-layout,
    .discover-layout-empty {
        flex:1 1 auto !important;
        min-height:0 !important;
        grid-template-columns:minmax(0,1fr) 270px !important;
        grid-template-rows:minmax(0,1fr) auto !important;
        gap:10px !important;
        align-items:stretch !important;
    }
    .discover-layout > .candidate-card,
    .discover-layout-empty > .empty-state {
        grid-column:1 !important;
        grid-row:1 !important;
        width:100% !important;
        height:100% !important;
        min-height:0 !important;
    }
    .discover-layout > .match-panel {
        grid-column:1 !important;
        grid-row:2 !important;
        position:relative !important;
        top:auto !important;
        display:grid !important;
        grid-template-columns:64px auto minmax(120px,1fr) minmax(210px,auto) !important;
        grid-template-rows:auto auto !important;
        column-gap:12px !important;
        row-gap:2px !important;
        align-items:center !important;
        height:auto !important;
        min-height:92px !important;
        max-height:none !important;
        padding:10px 12px !important;
        overflow:hidden !important;
        text-align:left !important;
    }
    .discover-layout > .match-panel .match-ring {
        grid-column:1 !important;
        grid-row:1 / span 2 !important;
        width:64px !important;
        height:64px !important;
    }
    .discover-layout > .match-panel .match-ring::before { inset:5px !important; }
    .discover-layout > .match-panel .match-ring-core { width:40px !important; height:40px !important; }
    .discover-layout > .match-panel .match-percent { grid-column:2; grid-row:1; margin:0 !important; font-size:27px !important; }
    .discover-layout > .match-panel .match-title { grid-column:2; grid-row:2; margin:0 !important; }
    .discover-layout > .match-panel .match-caption { grid-column:3; grid-row:1; margin:0 !important; }
    .discover-layout > .match-panel .match-category-icons { grid-column:3; grid-row:2; margin:0 !important; }
    .discover-layout > .match-panel .match-details { display:none !important; }
    .discover-layout > .match-panel .match-actions {
        grid-column:4 !important;
        grid-row:1 / span 2 !important;
        width:100% !important;
        min-width:210px !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        margin:0 !important;
        padding:0 !important;
    }
    .discover-layout > .filters-panel,
    .discover-layout-empty > .filters-panel {
        grid-column:2 !important;
        grid-row:1 / span 2 !important;
        position:relative !important;
        inset:auto !important;
        width:auto !important;
        height:100% !important;
        max-height:none !important;
        min-height:0 !important;
        transform:none !important;
        overflow-y:auto !important;
    }
    body.filters-open .filters-panel { transform:none !important; }
    body.filters-open::after { display:none !important; }
    .filter-close { display:none !important; }
}

/* Узкое окно с боковым меню: одна колонка и фильтры в выезжающем листе.
 * Впихивать сюда ещё 270 px фильтров означало бы снова сломать анкету. */
@media (min-width:801px) and (max-width:1099px) {
    .discover-page { padding-top:12px !important; padding-bottom:18px !important; }
    .discover-layout,
    .discover-layout-empty {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        gap:10px !important;
    }
    .discover-layout > .candidate-card,
    .discover-layout-empty > .empty-state {
        grid-column:1 !important;
        grid-row:auto !important;
        width:100% !important;
        height:auto !important;
        min-height:520px !important;
    }
    .discover-layout > .match-panel {
        grid-column:1 !important;
        grid-row:auto !important;
        position:relative !important;
        top:auto !important;
        display:grid !important;
        grid-template-columns:82px minmax(0,1fr) !important;
        column-gap:14px !important;
        align-items:center !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        padding:14px !important;
        overflow:hidden !important;
        text-align:left !important;
    }
    .discover-layout > .match-panel .match-ring { grid-row:1 / span 5; width:82px !important; height:82px !important; }
    .discover-layout > .match-panel .match-ring-core { width:52px !important; height:52px !important; }
    .discover-layout > .match-panel .match-percent { margin:0 !important; font-size:29px !important; }
    .discover-layout > .match-panel .match-title,
    .discover-layout > .match-panel .match-caption { margin-top:2px !important; }
    .discover-layout > .match-panel .match-details { display:none !important; }
    .discover-layout > .match-panel .match-actions {
        grid-column:1 / -1 !important;
        grid-template-columns:1fr 120px !important;
        margin-top:10px !important;
        padding-top:10px !important;
    }
    .discover-layout > .filters-panel,
    .discover-layout-empty > .filters-panel {
        position:fixed !important;
        z-index:80 !important;
        top:12px !important;
        right:12px !important;
        bottom:12px !important;
        left:auto !important;
        width:min(350px,calc(100vw - 24px)) !important;
        height:auto !important;
        max-height:none !important;
        transform:translateX(calc(100% + 28px)) !important;
        overflow-y:auto !important;
    }
    body.filters-open .filters-panel { transform:none !important; }
    body.filters-open::after { display:block !important; }
    .filter-close { display:grid !important; place-items:center; }
}

/* На широком экране вся лента поиска помещается в рабочую область без
 * начального микроскролла: верхняя пустота уменьшается, а высоту колонок
 * по-прежнему распределяет flex-контейнер. */
@media (min-width:1500px) {
    .discover-page { padding-top:12px !important; padding-bottom:18px !important; overflow:visible; }
    .discover-header { margin-bottom:8px !important; }
    .discover-toolbar { margin-top:8px !important; }
}

/* В обзоре интересов видны все выбранные записи: мышью — стрелки или
 * горизонтальная прокрутка, пальцем — обычный свайп. */
.interest-overview-strip {
    position: relative;
    min-width: 0;
    margin-bottom: 8px;
}
.interest-selected-strip { position:relative; min-width:0; }
.interest-overview-covers {
    display:flex !important;
    gap:10px !important;
    min-width:0;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(112,211,255,.45) transparent;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    padding:2px 2px 9px !important;
}
.interest-overview-cover {
    flex:0 0 clamp(104px,22%,132px) !important;
    scroll-snap-align:start;
}
.interest-strip-arrow {
    position:absolute;
    z-index:4;
    top:42%;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    padding:0;
    color:#fff;
    background:rgba(4,20,42,.82);
    border:1px solid rgba(185,225,255,.34);
    border-radius:50%;
    font-size:27px;
    line-height:1;
    cursor:pointer;
    transform:translateY(-50%);
    backdrop-filter:blur(9px);
}
.interest-strip-arrow-left { left:5px; }
.interest-strip-arrow-right { right:5px; }
.interest-strip-arrow[hidden] { display:none !important; }
.interest-strip-arrow:disabled { opacity:.42; cursor:default; }

/* В профиле, как и в редакторе, ни один выбранный интерес не
 * прячется. Лента листается мышью, стрелками или свайпом. */
.profile-interest-strip { position:relative; min-width:0; }
.profile-interest-strip .interest-covers {
    display:flex !important;
    min-width:0;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(112,211,255,.58) rgba(117,190,237,.13);
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    padding:2px 2px 9px;
}
.profile-interest-strip .interest-covers::-webkit-scrollbar { height:6px; }
.profile-interest-strip .interest-covers::-webkit-scrollbar-track {
    border-radius:999px;
    background:rgba(117,190,237,.13);
}
.profile-interest-strip .interest-covers::-webkit-scrollbar-thumb {
    border-radius:999px;
    background:rgba(112,211,255,.58);
}
.profile-interest-strip .interest-cover {
    flex:0 0 calc((100% - 30px) / 4);
    scroll-snap-align:start;
}

/* Правые действия одинаковых шапок стоят на одной вертикали с карточками.
 * Прежне это было сделано только для профиля, хотя тот же шаблон есть в интересах
 * и расширенных фильтрах. */
@media (min-width:801px) {
    .profile-page-header:has(.header-secondary-action),
    .hub-header:has(.header-secondary-action) { padding-right:0 !important; }
}

@media (max-width:720px) {
    .profile-interest-strip .interest-cover { flex-basis:min(38vw,132px); }
    .profile-interest-strip .interest-covers { padding-right:24px; }
    .interest-strip-arrow { width:40px; height:40px; }
}

/* ---------- Плашка незавершённой регистрации (16 сентября 2026) ----------

   Прежняя полоска была 11 px приглушённым цветом в одну строку, и её
   просто не видели. Разбор анкет 16 сентября показал цену: пятеро
   заполнили анкету, выбрали город и интересы — и остались невидимыми
   для всех, ни разу не заметив, что регистрация не дошла до конца.

   Заголовок, обычный кегль, явное «что именно не работает». Красной
   и тревожной не делаем: это не опасность, а незаконченное дело —
   то же правило, что у подсказок безопасности в переписке. */

.shell-notice .notice-card {
    display: grid;
    /* Колонка задаётся явно, и это не лишнее. На узких экранах
       `.shell-notice > div` раскладывает полоску в две колонки
       («текст | кнопка»), а специфичность считается по каждому
       свойству отдельно: своего `grid-template-columns` у карточки
       не было, и чужой шаблон продолжал действовать — заголовок
       ложился в первую колонку, текст во вторую, поверх друг друга. */
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    text-align: left;
}

.shell-notice .notice-card-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.shell-notice .notice-card-text {
    margin: 0;
    color: var(--v2-muted);
    font-size: 13px;
    line-height: 1.45;
}

.shell-notice .notice-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.shell-notice .notice-card-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

/* Поле почты тянется, а не занимает строку целиком: правило
   `input { width: 100% }` рассчитано на формы, а здесь рядом кнопка. */
.shell-notice .notice-card-form input {
    flex: 1 1 200px;
    width: auto;
    min-width: 0;
}

/* 44 точки — общий для веба размер цели нажатия. Медиазапрос для узких
   экранов ужимает кнопки плашки до 36, и на эту кнопку это правило
   распространяться не должно: с неё начинается выход из тупика. */
.shell-notice .notice-card-actions .button,
.shell-notice .notice-card-form .button {
    min-height: 44px;
    width: auto;
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
}

/* Кнопки на закрытом до подтверждения экране: ряд, а не столбик.
   `.empty-state .button { min-width: 220px }` рассчитан на одно
   действие, и двум оно даёт две широкие полосы друг под другом. */
.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 8px;
}

.empty-state-actions .button {
    min-width: 0;
    width: auto;
    margin-top: 0;
    padding: 12px 18px;
}

/* Ссылка, набранная кнопкой, кнопкой и должна выглядеть. Подчёркивание
   у неё бралось от браузера, и гасили его до сих пор поштучно
   (`.about-hero-actions .button`) — то есть каждая новая такая кнопка
   приходила подчёркнутой. Правило общее, чтобы следующая не пришла. */
a.button { text-decoration: none; }

/* Поле для шестизначного кода. Крупно и вразрядку: человек переписывает
   цифры из письма по одной и сверяет глазами, а обычное поле ввода
   для этого неудобно — цифры сливаются, и ошибку видно только после
   отказа. Моноширинный набор держит их на одинаковых местах. */
.code-input {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.32em;
    /* Разрядка добавляет пустоту справа от последней цифры,
       и без компенсации строка выглядит сдвинутой влево. */
    text-indent: 0.32em;
    text-align: center;
    padding: 14px 12px;
}

.code-input::placeholder {
    color: rgba(190, 220, 245, .28);
    font-weight: 500;
}

/* Временные объясняющие плашки. Крестик всегда в правом верхнем углу,
   а не участвует в потоке текста: длинная строка не сдвигает его вниз. */
.dismissible-hint {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    margin: 10px 0;
    padding: 13px 48px 13px 14px;
    color: var(--v2-muted);
    background: linear-gradient(180deg, rgba(15, 55, 98, .82), rgba(7, 31, 62, .88));
    border: 1px solid rgba(122, 197, 255, .22);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    opacity: 1;
    transform: translateY(0);
    transition: opacity .20s ease, transform .20s ease;
}

.dismissible-hint.chat-hint { padding: 13px 48px 13px 14px; }
.dismissible-hint-icon { flex: 0 0 19px; width: 19px; height: 19px; margin-top: 1px; }
.dismissible-hint-icon svg { display: block; width: 100%; height: 100%; }
.dismissible-hint-text { min-width: 0; line-height: 1.48; }
.dismissible-hint-close {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 7px;
    color: rgba(224, 241, 255, .84);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}
.dismissible-hint-close:hover { color: #fff; background: rgba(89, 167, 230, .14); }
.dismissible-hint-close .ui-icon,
.dismissible-hint-close svg { display: block; width: 100%; height: 100%; }
.dismissible-hint-hiding { opacity: 0; transform: translateY(-5px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .dismissible-hint { transition: none; }
}

/*
 * Мобильный поиск повторяет механику Android: одна цельная свайп-карточка,
 * данные и процент лежат на фотографии, а два решения стоят под ней.
 * Все новые элементы по умолчанию скрыты — настольная композиция остаётся
 * зафиксированной и продолжает использовать отдельную колонку совпадений.
 */
.candidate-mobile-filter,
.candidate-mobile-headline,
.candidate-mobile-common,
.candidate-mobile-actions,
.candidate-photo-tap-zone {
    display: none;
}

@media (max-width: 800px) {
    /* Поиск на телефоне — один цельный экран, как карточка в приложении.
       Нижний навбар уже учтён внутри страницы; прежний дополнительный
       padding у `.view` создавал несколько пикселей бесполезной
       вертикальной прокрутки всей анкеты. Прокручиваются только длинные
       тексты внутри раскрытого блока. */
    .view:has(> .discover-page-feed) {
        overflow-y: hidden;
        padding-bottom: 0;
        overscroll-behavior-y: none;
    }

    .discover-page-feed {
        box-sizing: border-box;
        height: 100%;
        min-height: 0;
        padding-top: 8px !important;
        padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
        overflow-y: hidden;
        overflow-x: clip;
    }

    /* Название раздела уже видно в нижней навигации. На поисковом экране
       Android место сверху отдаётся самой анкете и её действиям. */
    .discover-page-feed > .discover-header {
        display: none !important;
    }

    .discover-page-feed > .discover-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .discover-page-feed .candidate-card {
        width: 100% !important;
        height: clamp(480px, calc(100dvh - 198px), 680px) !important;
        min-height: 480px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 24px !important;
        touch-action: pan-y;
        transform-origin: 50% 92%;
        transition: transform .24s cubic-bezier(.2,.75,.25,1), opacity .20s ease;
        will-change: transform, opacity;
    }

    /* Страница не прокручивается (см. .discover-page-feed выше), а
       подсказка «мало интересов» теперь стоит в потоке над карточкой,
       а не поверх фото. Без вычета её высоты здесь карточка обрезалась
       бы снизу той же величиной — вместо просвета под подсказкой. */
    .discover-page-feed:has(> .feed-few-interests-hint) .candidate-card {
        height: clamp(400px, calc(100dvh - 198px - 82px), 600px) !important;
        min-height: 400px !important;
    }

    .discover-page-feed .candidate-card.candidate-card-dragging {
        transition: none !important;
        cursor: grabbing;
    }

    .discover-page-feed .candidate-card.candidate-card-decided {
        pointer-events: none;
    }

    .discover-page-feed .candidate-gallery {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        padding: 0 !important;
    }

    .discover-page-feed .candidate-media-stage {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: 23px 23px 0 0 !important;
        touch-action: pan-y;
    }

    .discover-page-feed .candidate-thumbnails {
        display: none !important;
    }

    .discover-page-feed .candidate-main-photo-frame {
        width: 100% !important;
        max-width: none !important;
        max-height: 100% !important;
        aspect-ratio: auto !important;
        border-radius: 23px 23px 0 0 !important;
    }

    .discover-page-feed .candidate-main-photo {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
    }

    /* Жалоба слева, фильтры справа — как в Android. Обе цели 44 точки. */
    .discover-page-feed .candidate-safety {
        top: 12px !important;
        right: auto !important;
        left: 12px !important;
        z-index: 12 !important;
    }

    .discover-page-feed .candidate-safety .safety-mark,
    .discover-page-feed .candidate-mobile-filter {
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        color: #e9f7ff !important;
        background: rgba(2, 15, 33, .64) !important;
        border: 1px solid rgba(255,255,255,.2) !important;
        border-radius: 50% !important;
        box-shadow: 0 8px 22px rgba(0,8,24,.26) !important;
        backdrop-filter: blur(12px);
    }

    .discover-page-feed .candidate-safety .safety-mark {
        width: 44px !important;
        height: 44px !important;
    }

    .discover-page-feed .candidate-mobile-filter {
        position: absolute !important;
        z-index: 12 !important;
        top: 12px !important;
        right: 12px !important;
        width: 48px !important;
        height: 48px !important;
        cursor: pointer;
    }

    .candidate-mobile-filter-icon,
    .candidate-mobile-filter-icon svg {
        width: 21px;
        height: 21px;
    }

    .discover-page-feed .candidate-mobile-headline {
        position: absolute;
        z-index: 6;
        left: 12px;
        right: 12px;
        bottom: 16px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 10px;
        pointer-events: none;
    }

    .discover-page-feed .candidate-mobile-identity {
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 9px 12px;
        color: #fff;
        background: rgba(2, 15, 33, .72);
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 15px;
        box-shadow: 0 8px 22px rgba(0,8,24,.25);
        backdrop-filter: blur(12px);
        /* Родитель .candidate-mobile-headline глушит клики (pointer-events:
           none) ради стрелок и точек под ним — сама плашка теперь открывает
           анкету, и ей клик нужен обратно. */
        pointer-events: auto;
        cursor: pointer;
    }
    .discover-page-feed .candidate-mobile-identity:focus-visible {
        outline: 2px solid var(--v2-cyan);
        outline-offset: 2px;
    }

    .discover-page-feed .candidate-mobile-identity strong {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        font-size: 19px;
        line-height: 1.12;
        letter-spacing: -.02em;
    }

    .discover-page-feed .candidate-mobile-identity span:last-child {
        overflow: hidden;
        color: #d8e8f7;
        font-size: 12px;
        line-height: 1.25;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .discover-page-feed .candidate-mobile-identity .verified-badge {
        width: 18px;
        height: 18px;
        flex: none;
        font-size: 11px;
    }

    .discover-page-feed .candidate-mobile-percent-wrap {
        position: relative;
        flex: none;
    }

    .discover-page-feed .candidate-mobile-percent {
        flex: none;
        min-width: 72px;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 12px;
        color: #f4f8ff;
        background: rgba(90, 168, 255, .22);
        border: 1px solid rgba(115, 210, 255, .72);
        border-radius: 999px;
        box-shadow: 0 8px 22px rgba(0,8,24,.30);
        font: inherit;
        font-size: 17px;
        font-weight: 750;
        line-height: 1;
        cursor: pointer;
        pointer-events: auto;
        backdrop-filter: blur(10px);
    }

    .candidate-mobile-percent-heart,
    .candidate-mobile-percent-heart svg {
        width: 17px;
        height: 17px;
        color: #73d2ff;
        fill: currentColor;
        stroke: currentColor;
    }

    .candidate-percent-tip {
        position: absolute;
        z-index: 20;
        right: 0;
        bottom: calc(100% + 9px);
        width: min(276px, calc(100vw - 42px));
        padding: 11px 13px;
        color: #e5f1fb;
        background: rgba(6, 21, 44, .97);
        border: 1px solid rgba(143, 184, 223, .54);
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(0, 8, 24, .46);
        font-size: 12px;
        font-weight: 500;
        line-height: 1.42;
        text-align: left;
        pointer-events: auto;
    }

    .candidate-percent-tip[hidden] {
        display: none !important;
    }

    .discover-page-feed .gallery-dots {
        top: 14px !important;
        bottom: auto !important;
    }

    .discover-page-feed .gallery-arrow {
        display: none !important;
    }

    .discover-page-feed .candidate-photo-tap-zone {
        position: absolute;
        z-index: 3;
        top: 70px;
        bottom: 92px;
        display: block;
        width: 34%;
        background: transparent;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    .discover-page-feed .candidate-photo-tap-left { left: 0; }
    .discover-page-feed .candidate-photo-tap-right { right: 0; }

    .discover-page-feed .candidate-photo-tap-zone:focus-visible {
        outline: 2px solid rgba(115,210,255,.78);
        outline-offset: -5px;
        border-radius: 18px;
    }

    .discover-page-feed .candidate-info {
        display: none !important;
    }

    /* У анкеты без фотографии данные не должны исчезать вместе с фото. */
    .discover-page-feed .candidate-gallery-empty + .candidate-info {
        display: block !important;
    }

    .discover-page-feed .candidate-mobile-common {
        flex: 0 0 auto;
        display: block;
        margin: 12px;
        padding: 0;
        overflow: hidden;
        color: #f4f8ff;
        background: rgba(11, 42, 80, .90);
        border: 1px solid rgba(143, 184, 223, .46);
        border-radius: 22px;
        box-shadow: 0 5px 16px rgba(0,8,24,.22);
    }

    .discover-page-feed .candidate-mobile-common-toggle {
        width: 100%;
        display: block;
        color: #e9f5ff;
        padding: 13px 16px 12px;
        font: inherit;
        text-align: left;
        background: transparent;
        border: 0;
        cursor: pointer;
    }

    .candidate-mobile-common-heading {
        min-height: 26px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 700;
    }

    .candidate-mobile-common-heading > span:nth-child(2) {
        min-width: 0;
        flex: 1;
    }

    .candidate-mobile-common-heart,
    .candidate-mobile-common-heart svg {
        width: 20px;
        height: 20px;
        flex: none;
        color: #fff;
        fill: currentColor;
        stroke: currentColor;
    }

    .candidate-mobile-common-why {
        display: block;
        margin: 11px 0 0 30px;
        color: #cad8e8;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.43;
    }

    .candidate-mobile-common-chevron,
    .candidate-mobile-common-chevron svg {
        width: 20px;
        height: 20px;
        flex: none;
        transition: transform .18s ease;
    }

    .candidate-mobile-common.is-open .candidate-mobile-common-chevron {
        transform: rotate(180deg);
    }

    /* Карточка остаётся на месте, а фото плавно уступает место описанию. */
    .candidate-mobile-common-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s cubic-bezier(.2,.75,.25,1);
    }

    .candidate-mobile-common.is-open .candidate-mobile-common-body {
        max-height: min(250px, 32dvh);
    }

    .candidate-mobile-info-pages {
        position: relative;
        padding-bottom: 25px;
        border-top: 1px solid rgba(143, 184, 223, .18);
    }

    .candidate-mobile-info-pager {
        display: flex;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
        cursor: grab;
        -webkit-overflow-scrolling: touch;
    }

    .candidate-mobile-info-pager.is-dragging {
        scroll-snap-type: none;
        cursor: grabbing;
    }

    .candidate-mobile-info-pager::-webkit-scrollbar {
        display: none;
    }

    .candidate-mobile-info-page {
        flex: 0 0 100%;
        width: 100%;
        height: 132px;
        box-sizing: border-box;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        padding: 14px 16px 10px;
        color: #f4f8ff;
    }

    .candidate-mobile-info-page strong {
        display: block;
        color: #eaf6ff;
        font-size: 14px;
        line-height: 1.3;
    }

    .candidate-mobile-info-page p {
        margin: 6px 0 0;
        color: #cad8e8;
        font-size: 13px;
        line-height: 1.42;
    }

    .candidate-mobile-info-about p {
        max-height: 76px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .candidate-mobile-info-feature {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        align-items: center;
        gap: 13px;
    }

    .candidate-mobile-info-icon {
        width: 54px;
        height: 54px;
        display: grid;
        place-items: center;
        color: #9ee5ff;
        background: rgba(39, 118, 181, .25);
        border: 1px solid rgba(126, 202, 244, .22);
        border-radius: 17px;
    }

    .candidate-mobile-info-icon .ui-icon,
    .candidate-mobile-info-icon svg {
        width: 27px;
        height: 27px;
    }

    .candidate-mobile-info-personal > strong {
        margin-bottom: 10px;
    }

    .candidate-mobile-info-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .candidate-mobile-info-fact {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        box-sizing: border-box;
        padding: 6px 11px;
        color: #e7f4ff;
        background: rgba(43, 121, 184, .26);
        border: 0;
        border-radius: 999px;
        font-size: 12px;
        line-height: 1.25;
    }

    .candidate-mobile-info-fact-icon,
    .candidate-mobile-info-fact-icon svg {
        width: 16px;
        height: 16px;
        flex: none;
        color: inherit;
    }

    .candidate-mobile-info-counter {
        position: absolute;
        right: 16px;
        bottom: 7px;
        color: rgba(205, 226, 242, .76);
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        pointer-events: none;
    }

    /* Настольная колонка совпадений на телефоне заменена процентом
       на карточке и двумя круглыми действиями под ней. */
    .discover-page-feed .match-panel {
        display: none !important;
    }

    .discover-page-feed .candidate-mobile-actions {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: clamp(42px, 18vw, 74px);
        min-height: 82px;
        padding: 0 12px 6px;
    }

    .candidate-mobile-action {
        width: 76px;
        display: grid;
        justify-items: center;
        gap: 5px;
        padding: 0;
        color: #dceaf7;
        background: transparent;
        border: 0;
        font: inherit;
        font-size: 12px;
        font-weight: 650;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .candidate-mobile-action-circle {
        width: 68px;
        height: 68px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #dceeff;
        background: linear-gradient(180deg, rgba(23, 61, 101, .98), rgba(10, 36, 66, .98));
        border: 1px solid rgba(143, 184, 223, .72);
        box-shadow: 0 10px 24px rgba(143,184,223,.18), inset 0 1px 0 rgba(255,255,255,.18);
        line-height: 1;
        transition: transform .14s ease, filter .14s ease;
    }

    .candidate-mobile-like .candidate-mobile-action-circle {
        color: #f4f8ff;
        background: linear-gradient(180deg, #2d72ba 0%, #2364a8 52%, #174f91 100%);
        border-color: rgba(166, 213, 251, .78);
        box-shadow: 0 12px 28px rgba(25,91,158,.46), inset 0 1px 0 rgba(255,255,255,.28);
    }

    .candidate-mobile-action-circle .ui-icon,
    .candidate-mobile-action-circle svg {
        width: 31px;
        height: 31px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
    }

    .candidate-mobile-like .candidate-mobile-action-circle .ui-icon,
    .candidate-mobile-like .candidate-mobile-action-circle svg {
        fill: currentColor;
        stroke: currentColor;
    }

    .candidate-mobile-action:active .candidate-mobile-action-circle {
        transform: scale(.92);
        filter: brightness(1.08);
    }

    .discover-page-feed .filters-scrim {
        z-index: 111 !important;
    }
}

@media (max-width: 380px), (max-height: 720px) and (max-width: 800px) {
    .discover-page-feed .candidate-card {
        height: clamp(430px, calc(100dvh - 184px), 560px) !important;
        min-height: 430px !important;
    }

    .discover-page-feed:has(> .feed-few-interests-hint) .candidate-card {
        height: clamp(350px, calc(100dvh - 184px - 82px), 480px) !important;
        min-height: 350px !important;
    }

    .discover-page-feed .candidate-mobile-actions {
        min-height: 74px;
    }

    .candidate-mobile-action-circle {
        width: 60px;
        height: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .discover-page-feed .candidate-card,
    .candidate-mobile-common-chevron,
    .candidate-mobile-common-body,
    .candidate-mobile-action-circle {
        transition: none !important;
    }
}

/* =====================================================================
   Мобильный профиль: просмотр отдельно, редактирование отдельно.

   На широком экране остаётся прежняя рабочая композиция. На телефоне
   профиль повторяет Android: фотография и данные читаются как готовая
   анкета, статус раскрывается по запросу, а поля появляются только после
   отдельного действия «Редактировать анкету».
   ===================================================================== */
.profile-mobile-summary,
.profile-mobile-status,
.profile-mobile-support,
.profile-mobile-actions,
.profile-mobile-editor-head {
    display: none;
}

/* Desktop keeps its established two-column editor. The mobile accordions
   become transparent wrappers there, while the embedded all-category
   editor remains a mobile-only addition. */
@media (min-width: 801px) {
    .profile-editor-accordion { display: contents; }
    .profile-editor-accordion > summary { display: none !important; }
    .profile-editor-accordion > .profile-editor-accordion-body,
    .profile-editor-accordion:not([open]) > .profile-editor-accordion-body { display: contents !important; }
    .profile-editor-accordion-interests { display: none !important; }
}

@media (max-width: 800px) {
    .profile-page-existing {
        width: 100%;
        max-width: 100%;
        padding: 8px 12px calc(156px + env(safe-area-inset-bottom));
        overflow-x: clip;
    }

    .profile-page-existing > .profile-page-header,
    .profile-page-existing > .profile-status-card,
    .profile-page-existing > .profile-avatar-preview,
    .profile-page-existing > .profile-editor-layout {
        display: none !important;
    }

    .profile-mobile-summary {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0 0 14px;
        text-align: center;
    }

    .profile-mobile-avatar {
        width: 138px;
        height: 138px;
        margin: 0 auto 10px;
        background: radial-gradient(circle at 50% 38%, rgba(55,136,210,.36), rgba(4,24,50,.88) 68%);
        box-shadow: 0 12px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(130,198,250,.24);
        filter: drop-shadow(0 9px 18px rgba(0,0,0,.22));
    }

    .profile-mobile-avatar-empty {
        width: 78%;
        height: 78%;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #bfe7ff;
        background: rgba(20,67,111,.56);
    }

    .profile-mobile-avatar-empty .sm-icon,
    .profile-mobile-avatar-empty svg {
        width: 48px;
        height: 48px;
    }

    .profile-mobile-title {
        display: grid;
        justify-items: center;
        gap: 1px;
        margin: 0;
        color: #f6fbff;
        background: linear-gradient(100deg, #ffffff 3%, #72ddff 46%, #7db8ff 72%, #b58cff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: clamp(25px, 7.3vw, 31px);
        line-height: 1.12;
        letter-spacing: -.025em;
    }

    .profile-mobile-title > span:last-child {
        font-size: .68em;
        font-weight: 500;
        letter-spacing: 0;
    }

    .profile-mobile-city {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        color: rgba(223,238,251,.82);
        font-size: 14px;
    }

    .profile-mobile-city .sm-icon,
    .profile-mobile-city svg {
        width: 16px;
        height: 16px;
    }

    .profile-mobile-facts {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px;
        margin-top: 12px;
    }

    .profile-mobile-facts > span {
        min-height: 31px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 11px;
        border: 1px solid rgba(117,180,232,.22);
        border-radius: 999px;
        color: #dcecf9;
        background: rgba(31,72,116,.70);
        font-size: 13px;
        font-weight: 650;
    }

    .profile-mobile-facts > span > .sm-icon,
    .profile-mobile-facts > span > .sm-icon svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

    .profile-mobile-facts > span > span:last-child {
        min-height: 0;
        display: inline;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font: inherit;
    }

    .profile-mobile-about {
        width: 100%;
        margin-top: 14px;
        padding: 15px 17px;
        border-radius: 19px;
        text-align: left;
    }

    .profile-mobile-about p {
        margin: 7px 0 0;
        color: #e4eef8;
        line-height: 1.52;
        white-space: pre-wrap;
    }

    .profile-mobile-status {
        display: block;
        width: 100%;
        margin: 0 0 14px;
        padding: 0;
        border-radius: 20px;
        overflow: hidden;
    }

    .profile-mobile-status-summary {
        min-height: 76px;
        display: grid;
        grid-template-columns: 42px minmax(0,1fr) 24px;
        align-items: center;
        gap: 11px;
        padding: 13px 15px;
        cursor: pointer;
        list-style: none;
        -webkit-tap-highlight-color: transparent;
    }

    .profile-mobile-status-summary::-webkit-details-marker { display: none; }

    .profile-mobile-status-icon {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(119,181,232,.28);
        border-radius: 14px;
        color: #b9dcf5;
        background: rgba(20,66,108,.62);
    }

    .profile-mobile-status-icon.is-visible {
        color: #65dcad;
        background: rgba(35,128,104,.20);
        border-color: rgba(101,220,173,.30);
    }

    .profile-mobile-status-icon .sm-icon,
    .profile-mobile-status-icon svg {
        width: 23px;
        height: 23px;
    }

    .profile-mobile-status-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        text-align: left;
    }

    .profile-mobile-status-copy strong {
        color: #f0f7fd;
        font-size: 15px;
        line-height: 1.28;
    }

    .profile-mobile-status-chevron {
        width: 21px;
        height: 21px;
        color: #cce9fb;
        transition: transform .18s ease;
    }

    .profile-mobile-status[open] .profile-mobile-status-chevron { transform: rotate(180deg); }

    .profile-mobile-status-body {
        padding: 0 15px 15px;
        border-top: 1px solid rgba(126,186,233,.14);
    }

    .profile-mobile-status-body > p {
        margin: 13px 0;
        color: rgba(220,235,248,.78);
        font-size: 14px;
        line-height: 1.48;
    }

    .profile-mobile-status-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 11px 0;
        border-top: 1px solid rgba(126,186,233,.11);
    }

    .profile-mobile-status-item > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .profile-mobile-status-item strong { color: #edf6fd; font-size: 14px; }
    .profile-mobile-status-item span { font-size: 12px; }
    .profile-mobile-status-item .button { flex: 0 0 auto; }

    /* Все три перехода равноправны. Раньше только наведённое «Открыть»
       получало заметную синюю грань, и две соседние кнопки выглядели
       выключенными. */
    .profile-mobile-status-action,
    .profile-mobile-status-action:hover:not(:disabled) {
        color: #f5fbff !important;
        border-color: rgba(151, 211, 250, .62) !important;
        background: linear-gradient(180deg, rgba(39, 103, 166, .92), rgba(13, 53, 98, .94)) !important;
        box-shadow: 0 7px 17px rgba(0, 12, 35, .25), inset 0 1px 0 rgba(255,255,255,.12) !important;
    }

    .profile-mobile-support {
        width: 100%;
        min-height: 74px;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 22px;
        align-items: center;
        gap: 12px;
        margin: 0 0 14px;
        padding: 13px 15px;
        color: #edf7ff;
        font: inherit;
        text-align: left;
        border-radius: 20px;
        cursor: pointer;
        transition: transform .12s ease, border-color .16s ease, background .16s ease;
    }

    .profile-mobile-support:hover {
        border-color: rgba(151, 211, 250, .38);
        background: rgba(15, 53, 94, .90);
    }

    .profile-mobile-support:active { transform: scale(.985); }

    .profile-mobile-support-icon {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        color: #ffb58d;
        border: 1px solid rgba(255,181,141,.24);
        border-radius: 14px;
        background: rgba(166,76,42,.16);
    }

    .profile-mobile-support-icon .sm-icon,
    .profile-mobile-support-icon svg {
        width: 24px;
        height: 24px;
    }

    .profile-mobile-support-copy {
        min-width: 0;
        display: grid;
        gap: 3px;
    }

    .profile-mobile-support-copy strong { font-size: 15px; }
    .profile-mobile-support-copy small {
        color: rgba(211,228,241,.72);
        font-size: 12px;
        line-height: 1.35;
    }

    .profile-mobile-support-chevron {
        color: #b9d9ef;
        font-size: 28px;
        line-height: 1;
        text-align: center;
    }

    .profile-page-existing > .profile-interests-panel {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 16px 14px;
        border-radius: 21px;
    }

    .profile-page-existing > .profile-interests-panel .panel-heading {
        margin-bottom: 13px;
    }

    .profile-page-existing > .profile-interests-panel .panel-heading > p {
        display: none;
    }

    .profile-page-existing > .profile-interests-panel .interest-edit {
        display: none !important;
    }

    .profile-page-existing > .profile-interests-panel .interest-category-card {
        padding-bottom: 14px !important;
    }

    .profile-mobile-actions {
        position: fixed;
        z-index: 82;
        left: 12px;
        right: 12px;
        bottom: calc(66px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: minmax(0,1fr) 54px;
        gap: 9px;
        padding: 9px;
        border: 1px solid rgba(123,185,235,.25);
        border-radius: 19px;
        background: rgba(6,31,61,.95);
        box-shadow: 0 12px 32px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.05);
        backdrop-filter: blur(16px);
    }

    .profile-mobile-edit-button {
        min-width: 0;
        min-height: 50px;
        font-size: 15px;
    }

    .profile-mobile-settings-button {
        width: 54px;
        height: 50px;
        display: grid;
        place-items: center;
        padding: 0;
        color: #d9edfb;
        border: 1px solid rgba(126,188,236,.28);
        border-radius: 15px;
        background: rgba(24,70,113,.72);
        cursor: pointer;
    }

    .profile-mobile-settings-button .sm-icon,
    .profile-mobile-settings-button svg {
        width: 24px;
        height: 24px;
    }

    .profile-page-existing.profile-mobile-editing {
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .profile-page-existing.profile-mobile-editing > .profile-mobile-summary,
    .profile-page-existing.profile-mobile-editing > .profile-mobile-status,
    .profile-page-existing.profile-mobile-editing > .profile-mobile-support,
    .profile-page-existing.profile-mobile-editing > .profile-interests-panel,
    .profile-page-existing.profile-mobile-editing > .profile-mobile-actions {
        display: none !important;
    }

    .profile-page-existing.profile-mobile-editing > .profile-editor-layout {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 13px;
        width: 100%;
    }

    .profile-editor-accordion {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 20px;
    }

    .profile-editor-accordion-summary {
        min-height: 72px;
        display: grid;
        grid-template-columns: 44px minmax(0,1fr) 22px;
        align-items: center;
        gap: 12px;
        padding: 13px 15px;
        list-style: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .profile-editor-accordion-summary::-webkit-details-marker { display: none; }

    .profile-editor-accordion-icon {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        color: #bde8ff;
        border: 1px solid rgba(113,190,243,.24);
        border-radius: 14px;
        background: rgba(26,78,124,.64);
    }

    .profile-editor-accordion-icon .sm-icon,
    .profile-editor-accordion-icon svg { width: 23px; height: 23px; }

    .profile-editor-accordion-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        text-align: left;
    }

    .profile-editor-accordion-copy strong { color:#f4f9fd; font-size:16px; line-height:1.2; }
    .profile-editor-accordion-copy small { color:rgba(211,231,246,.70); font-size:12px; line-height:1.35; }

    .profile-editor-accordion-chevron {
        width: 21px;
        height: 21px;
        color: #cae9fb;
        transition: transform .18s ease;
    }

    .profile-editor-accordion[open] .profile-editor-accordion-chevron { transform:rotate(180deg); }

    .profile-editor-accordion-body {
        padding: 0 10px 10px;
        border-top: 1px solid rgba(121,187,237,.14);
    }

    .profile-editor-accordion-body > .profile-photos-panel,
    .profile-editor-accordion-body > .profile-form-panel,
    .profile-editor-accordion-body > .profile-interests-panel {
        margin: 10px 0 0;
        border-radius: 16px;
    }

    .profile-editor-accordion-interests .profile-interests-panel {
        padding: 10px 0 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .profile-editor-accordion-interests .profile-interests-panel > .panel-heading {
        display: none;
    }

    .profile-editor-accordion-interests .interest-edit {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .profile-editor-accordion-interests .profile-interests-overview {
        padding-top: 10px;
    }

    .profile-editor-accordion-interests .interest-editor-card {
        min-height: 0;
        padding: 14px;
        border-radius: 17px;
    }

    .profile-mobile-editor-head {
        display: grid;
        grid-template-columns: 46px minmax(0,1fr);
        align-items: center;
        gap: 11px;
        width: 100%;
        margin-bottom: 1px;
    }

    .profile-mobile-editor-head > div h1 {
        margin: 3px 0 0;
        font-size: 27px;
        line-height: 1.08;
        letter-spacing: -.025em;
    }

    .profile-mobile-editor-back {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        padding: 0 0 4px;
        color: #eff9ff;
        border: 1px solid rgba(126,188,236,.35);
        border-radius: 50%;
        background: rgba(12,48,83,.82);
        font: 400 36px/1 system-ui, sans-serif;
        cursor: pointer;
    }

    .profile-page-existing.profile-mobile-editing .profile-photos-panel,
    .profile-page-existing.profile-mobile-editing .profile-form-panel {
        margin: 0;
        border-radius: 21px;
    }
}

@media (max-width: 370px) {
    .profile-page-existing { padding-inline: 9px; }
    .profile-mobile-actions { left: 9px; right: 9px; }
    .profile-mobile-edit-button { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .profile-mobile-status-chevron { transition: none; }
}

/* Мобильный Web использует тот же ночной фьорд, что и Android.
   Портретный исходник не растягиваем и не перекрашиваем: поверх лежит
   только та же спокойная вертикальная вуаль для читаемости текста. */
@media (max-width: 800px) {
    #app {
        background-color: #031126;
        background-image:
            linear-gradient(180deg, rgba(3,17,38,.54) 0%, rgba(5,28,56,.42) 32%, rgba(8,40,74,.30) 68%, rgba(3,17,38,.48) 100%),
            url("../img/sm-background-night-fjord.webp");
        background-position: center, center;
        background-size: cover, cover;
        background-repeat: no-repeat;
        background-attachment: scroll, scroll;
    }

    /* На телефоне ленты листаются пальцем. Стрелки дублировали жест и
       закрывали обложки; индикатор прокрутки остаётся видимым. */
    .interest-strip-arrow {
        display: none !important;
    }

    .profile-interest-strip .interest-covers {
        padding-right: 2px !important;
    }

    /* Заполненная категория в профиле только показывает выбор. Пустая
       обязана оставить человеку очевидный вход в добавление. */
    .profile-page-existing > .profile-interests-panel .interest-edit-empty {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Предупреждение перед сохранением проверенной анкеты. Раньше это была
   обычная серая строка вплотную к последней кнопке, поэтому её принимали
   за служебную подпись и не замечали последствий изменения данных. */
.profile-verified-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0 0;
    padding: 14px 15px;
    color: #f5ead0;
    border: 1px solid rgba(244,190,91,.38);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(127,82,20,.28), rgba(78,52,19,.20));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.profile-verified-warning-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    color: #ffd27a;
    border-radius: 12px;
    background: rgba(245,181,67,.14);
}

.profile-verified-warning-icon .sm-icon,
.profile-verified-warning-icon svg {
    width: 21px;
    height: 21px;
}

.profile-verified-warning strong {
    display: block;
    margin: 0 0 4px;
    color: #ffe2a5;
    font-size: 14px;
}

.profile-verified-warning p {
    margin: 0;
    color: rgba(245,234,208,.86);
    font-size: 13px;
    line-height: 1.48;
}

@media (max-width: 800px) {
    .profile-verified-warning {
        margin-top: 18px;
    }
}

.profile-verified-warning .profile-verified-warning-why {
    margin-top: 6px;
    color: rgba(245,234,208,.72);
}

/* Строка у фотографий: фотография уходит на сервер сразу, и плашка над
   «Сохранить» до неё не доходит. Тем же янтарём, но тише — это
   пояснение, а не вопрос. */
.profile-photo-verified-note {
    margin: 0 0 12px;
    padding: 9px 12px;
    color: #f5ead0;
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid rgba(244,190,91,.30);
    border-radius: 12px;
    background: rgba(127,82,20,.20);
}

/* The low-interest notice takes its own row above the desktop search rails. */
@media (min-width: 1241px) {
    .discover-page-feed:has(> .feed-few-interests-hint) .discover-layout > .candidate-card,
    .discover-page-feed:has(> .feed-few-interests-hint) .discover-layout > .match-panel,
    .discover-page-feed:has(> .feed-few-interests-hint) .discover-layout > .filters-panel {
        height: calc(100dvh - 290px) !important;
        min-height: calc(100dvh - 290px) !important;
        max-height: calc(100dvh - 290px) !important;
    }
}

/* The icon is smaller than the shared empty-card badge: keep it inside
   its grid column and do not let the notice push the search rails down. */
.feed-few-interests-hint {
    grid-template-columns:52px minmax(0,1fr) auto 36px;
    min-height:72px;
    margin-bottom:8px;
    padding:8px 12px;
}
.feed-few-interests-hint .feed-few-interests-icon {
    width:52px;
    height:52px;
    box-sizing:border-box;
    border-radius:50%;
}
.feed-few-interests-hint > .button { min-height:44px; padding:8px 16px; }
@media (max-width:800px) {
    .feed-few-interests-hint {
        grid-template-columns:40px minmax(0,1fr) 32px;
        min-height:0;
        margin:0 0 10px;
    }
    .feed-few-interests-hint .feed-few-interests-icon { width:40px; height:40px; }
    .feed-few-interests-hint > .button { grid-column:1 / -1; grid-row:2; }
    .feed-few-interests-hint .feed-few-interests-close { grid-column:3; grid-row:1; }
}

/* With no conversations, a single centered invitation replaces three
   empty messenger rails. Keep its action visible without scrolling. */
.messenger-page > .chats-page-empty-region {
    display:flex;
    flex:1;
    align-items:center;
    justify-content:center;
    min-height:0;
    padding:12px 0 24px;
}
.messenger-page > .chats-page-empty-region > .section-empty-state {
    width:min(100%,440px);
    min-height:280px;
    margin:0;
    padding:24px;
    box-sizing:border-box;
}
.messenger-page > .chats-page-empty-region > .section-empty-state h2 {
    font-size:24px;
    line-height:1.2;
}

/* Recommendations use the same centered, compact empty card as chats. */
@media (min-width:801px) {
    .hub-page:has(> .pane-body-empty) {
        display:flex;
        flex-direction:column;
        box-sizing:border-box;
        height:100%;
    }
    .hub-page > .pane-body-empty {
        display:flex;
        flex:1;
        align-items:center;
        justify-content:center;
        min-height:0;
        width:100%;
    }
    .hub-page > .pane-body-empty > .section-empty-state {
        width:min(100%,440px);
        min-height:280px;
        margin:0;
        padding:24px;
        box-sizing:border-box;
    }
    .hub-page > .pane-body-empty > .section-empty-state h3 {
        font-size:24px;
        line-height:1.2;
    }
}

/* One desktop alignment line for every authenticated workspace screen.
   Individual content widths stay readable; only the outer gutter is shared.
   Landing and auth screens intentionally keep their centered layouts. */
@media (min-width:801px) {
    .view { --workspace-page-width:1500px; --workspace-page-gutter:24px; }
    .discover-page,
    .hub-page,
    .chats-page,
    .messenger-page,
    .companies-page,
    .company-chat-page,
    .profile-page,
    .settings-page,
    .advanced-filters-page,
    .interests-editor-page,
    .about-page-current,
    .support-page-current,
    .commerce-page,
    .view > .topbar,
    .view > .column {
        width:min(100%,var(--workspace-page-width));
        max-width:none;
        margin-inline:auto;
        padding-inline:var(--workspace-page-gutter);
    }
    .companies-page { padding-block:26px 90px; }
    .companies-page > *,
    .company-chat-page > * { max-width:1100px; }
    .profile-page > * { max-width:1420px; }
    .settings-page > *,
    .interests-editor-page > * { max-width:1320px; }
    .advanced-filters-page > * { max-width:1280px; }
    .about-page-current > *,
    .support-page-current > *,
    .view > .column > * { max-width:1180px; }
    /* Без этого карточки «О проекте» и «Поддержки» при ширине окна
       больше 1180 прижимались к левому краю, а шапка стояла по центру
       (26 сентября 2026). Только для этих двух страниц: они обычные
       блоки. В колонках приложения (.view > .column) дети — элементы
       flex, и авто-отступы сжали бы их до ширины содержимого. */
    .about-page-current > *,
    .support-page-current > * { margin-inline:auto; }
    .commerce-page > * { max-width:1040px; }
    .view > .column > .safety-page { margin-inline:0; }
}

/* Final shared geometry for hints and compact actions. */
.chat-send-arrow {
    display:block;
    font-size:27px;
    font-weight:650;
    line-height:1;
    transform:translateY(-1px);
}
.chat-compose-form .button { min-width:58px; padding-inline:15px !important; }
.section-empty-state-inline.company-empty-compact {
    height:auto !important;
    min-height:220px !important;
    padding:24px;
    gap:10px;
    align-self:start;
    align-content:center;
}
.company-list-section-body:has(> .company-empty-compact) { align-items:start; }

/* Афиша: город — такой же по высоте элемент управления, как быстрые
   периоды рядом. Глобальные стили кнопок раньше растягивали его выше. */
.event-city-control { height:44px; min-height:44px; padding-block:0; }

/* Круглая кнопка должна занимать собственную строку и не заходить
   нижним краем на первую карточку. Правило общее для поддержки,
   покупок и остальных commerce-экранов с этой строкой возврата. */
.commerce-back-row { min-height:48px; margin-bottom:12px; }
@media (max-width:800px) {
    .section-empty-state-inline.company-empty-compact {
        height:auto !important;
        min-height:220px !important;
        padding:22px 18px;
        gap:10px;
    }
}

/* Боковая панель: «Поддержать проект» стоит по левому краю, как остальные
   пункты. Общее правило про центрирование подписей (.toolbar-filter-button,
   .switch-item, …) задело и этот пункт, и надпись съехала к центру. */
.nav-item.nav-item-support,
.nav-item.nav-item-support .nav-title {
    justify-content: flex-start;
    text-align: left;
}

/* Лента: «Фильтры» той же высоты, что соседние плашки, и не прыгает
   на пиксель при наведении (translateY(-1px) в .toolbar-filter-button:hover
   на фоне align-items по умолчанию давал ощущение «не по центру»). */
@media (min-width: 801px) {
    .discover-toolbar { align-items: stretch; }
    .discover-toolbar > .toolbar-filter-button {
        align-self: stretch;
        transform: none;
    }
    .discover-toolbar > .toolbar-filter-button:hover { transform: none; }
}

/* Тупик в приветственном окне пробной недели — тот же рисунок, что в Android
   (sm_trial_puffin). Ограничен по высоте: окно с картинкой во весь экран
   перестаёт быть сообщением и становится рекламой. */
.sheet-mascot {
    display: block;
    height: 132px;
    width: auto;
    max-width: 100%;
    margin: 0 auto 12px;
    object-fit: contain;
}

/* Заголовок подстраницы («назад» + название) всегда отделён от содержимого:
   у .topbar нижнего поля не было, и карточки прилипали к нему вплотную
   (на «Защите и помощи» без обёртки .column просвета не давал никто). */
.view > .topbar { padding-bottom: 14px; }

/* Читаемый минимум (24 сентября 2026). Сплошной замер экранов после входа
   на широком окне нашёл пояснения, набранные 11–11,5 px, — ниже нормы
   проекта для текста, который человек читает, а не пробегает глазами.
   Метки заглавными и цифры сюда не входят: там малый кегль — приём. */
.profile-subsection-title > p,
.filter-toggle-copy > small,
.filter-form-field > small {
    font-size: 13px !important;
    line-height: 1.45 !important;
}
.interest-overview-cover > span {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* Вне оболочки приложения прокручивать некому, кроме самой страницы.
   Внутри оболочки body держит overflow:hidden, а прокручивается .view;
   но «Поддержка» без входа, вход, регистрация, «Забыли пароль» и сброс
   пароля рисуются прямо в #app, и hidden у body запрещал прокрутку
   вовсе: «Поддержка» на широком экране обрезалась на первом экране,
   а регистрация на невысоком телефоне (375×600) — на середине формы
   (26 сентября 2026). Лендинг обходил это своим правилом :has(.landing). */
html:not(:has(.shell)),
body:not(:has(.shell)) {
    height: auto;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}