/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Оболочка кабинета. Визуальный язык общий со страницей входа: те же токены
   --ln-* (объявлены на :root в app.css), те же радиусы, те же цели нажатия.
   До 2026-08-24 здесь был дефолтный шаблон Blazor. */

.cab-shell[b-e6f1p9zxb1] {
    /* Кабинет светлый при любой системной теме — как и весь сайт. */
    color-scheme: light;

    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--ln-bg);
    color: var(--ln-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
}

/* ── Верхняя полоса с именем аккаунта ─────────────────────────────────── */

.cab-topbar[b-e6f1p9zxb1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    min-height: 68px;
    background: var(--ln-surface);
    border-bottom: 1px solid var(--ln-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.cab-brand[b-e6f1p9zxb1] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: auto;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ln-accent);
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.cab-brand img[b-e6f1p9zxb1] {
    border-radius: 9px;
}

.cab-brand span span[b-e6f1p9zxb1] {
    font-weight: 400;
    opacity: 0.75;
}

.cab-user[b-e6f1p9zxb1] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.cab-user-mark[b-e6f1p9zxb1] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    font-weight: 800;
}

.cab-user-text[b-e6f1p9zxb1] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cab-user-name[b-e6f1p9zxb1] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ln-text);
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Роль подписью: пациент и родственник видят разные разделы, и понимать,
   под кем ты вошёл, важнее, чем экономить строку. */
.cab-user-role[b-e6f1p9zxb1] {
    font-size: 0.8rem;
    color: #475569;
}

.cab-user form[b-e6f1p9zxb1] {
    margin: 0;
}

.cab-user button[b-e6f1p9zxb1] {
    min-height: 48px;
    padding: 0 0.75rem;
    background: none;
    border: none;
    color: var(--ln-text-2);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--ln-transition);
}

.cab-user button:hover[b-e6f1p9zxb1] {
    color: var(--ln-accent);
}

/* ── Тело: меню слева, содержимое справа ──────────────────────────────── */

.cab-body[b-e6f1p9zxb1] {
    display: flex;
    flex: 1;
    align-items: stretch;
}

.cab-main[b-e6f1p9zxb1] {
    flex: 1;
    min-width: 0;
    padding: 2rem 2.5rem 4rem;
}

/* ── Фокус ────────────────────────────────────────────────────────────── */

.cab-shell a:focus-visible[b-e6f1p9zxb1],
.cab-shell button:focus-visible[b-e6f1p9zxb1] {
    outline: 3px solid var(--ln-accent);
    outline-offset: 3px;
    border-radius: 8px;
}

.skip-link[b-e6f1p9zxb1] {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--ln-radius) 0;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus[b-e6f1p9zxb1] {
    left: 0;
}

/* ── Телефон ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .cab-topbar[b-e6f1p9zxb1] {
        padding: 0.65rem 1rem;
        gap: 0.6rem;
    }

    .cab-brand span:not(:has(span))[b-e6f1p9zxb1] {
        display: none;
    }

    /* Меню уезжает наверх лентой: на узком экране колонка в 260px съедала бы
       две трети ширины. Прятать его за гамбургер нельзя — аудитории с
       нарушенной моторикой лишнее точное касание не нужно (то же решение,
       что в шапке лэндинга). */
    .cab-body[b-e6f1p9zxb1] {
        flex-direction: column;
    }

    .cab-main[b-e6f1p9zxb1] {
        padding: 1.25rem 1rem 3rem;
    }
}

/* ── Служебная плашка Blazor ──────────────────────────────────────────── */

#blazor-error-ui[b-e6f1p9zxb1] {
    color-scheme: light only;
    background: lightyellow;
    color: #1F2937;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-e6f1p9zxb1] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

@media (prefers-reduced-motion: reduce) {
    .cab-shell *[b-e6f1p9zxb1] {
        transition: none !important;
        animation: none !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Синий столбец меню — тот же градиент, что был у сайдбара (#1E3A8A → #0F172A),
   он же PrimaryColor приложения. Пункты повторяют карточки главного экрана:
   заголовок, подпись, кружок заполненности. */

.cab-nav[b-awuxftj6am] {
    flex: 0 0 auto;
    width: 280px;
    padding: 1.25rem 0.85rem;
    background-image: linear-gradient(180deg, #1E3A8A 0%, #0F172A 100%);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.cab-nav-item[b-awuxftj6am] {
    display: block;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    /* Прозрачная рамка держит габарит: у активного пункта она видима, и без
       неё соседние пункты подпрыгивали бы на 4px при переходе. */
    border: 2px solid transparent;
    color: #E2E8F0;
    text-decoration: none;
    /* 56px: цель нажатия крупнее минимума — меню это то, чем пользуются
       на каждом шаге, и промах здесь стоит дороже всего. */
    min-height: 56px;
    transition: background-color var(--ln-transition), border-color var(--ln-transition);
}

.cab-nav-item:hover[b-awuxftj6am] {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.cab-nav-item.is-active[b-awuxftj6am] {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
}

.cab-nav-row[b-awuxftj6am] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cab-nav-title[b-awuxftj6am] {
    display: block;
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.25;
}

/* #CBD5E1 на #1E3A8A — 6.6:1, на тёмном конце градиента ещё выше.
   Подпись обязана читаться: в приложении она объясняет, что внутри раздела. */
.cab-nav-sub[b-awuxftj6am] {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #CBD5E1;
}

.cab-nav-count[b-awuxftj6am] {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: #94A3B8;
}

/* Кружок заполненности: цвет считает MenuCompletion.PercentToColor по той же
   пятиступенчатой градации, что в приложении. Он декоративный (aria-hidden) —
   смысл дублируется числом записей и подсказкой title, поэтому цвет не
   единственный носитель информации. */
.cab-nav-ring[b-awuxftj6am] {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ring, #94A3B8);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

@media (max-width: 860px) {
    /* Лента вместо колонки: пункты в ряд с горизонтальной прокруткой. */
    .cab-nav[b-awuxftj6am] {
        width: auto;
        flex-direction: row;
        overflow-x: auto;
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .cab-nav-item[b-awuxftj6am] {
        flex: 0 0 auto;
        max-width: 220px;
    }

    .cab-nav-sub[b-awuxftj6am],
    .cab-nav-count[b-awuxftj6am] {
        display: none;
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Публичная оболочка сайта: шапка, футер и палитра для всех публичных страниц
   (главная и /privacy).

   Токены объявлены на .public-shell, а не в :root, специально: app.css общий
   с кабинетом врача/пациента, и переопределять там глобальные переменные
   означало бы менять кабинет заодно. Кастомные свойства наследуются вниз по
   DOM независимо от CSS-изоляции, поэтому Home.razor.css и Privacy.razor.css
   их видят, а MainLayout — нет.

   Палитра совпадает с приложением (см. notes/Цветовые схемы для приложения.md):
   PrimaryColor #1E3A8A, BackgroundColor #F8FAFC, SurfaceColor #EFF6FF.
   Раньше фон страницы был тёплый кремовый #FAF6F1 при холодных синих карточках —
   две разные температуры на одной странице.

   Схема только светлая, по решению владельца (2026-08-21). Поддержка системной
   тёмной темы была реализована и убрана: сайт медицинский, показывается врачам
   и пациентам, владелец выбрал один предсказуемый вид. Токены оставлены —
   они по-прежнему держат палитру в одном месте, просто не переопределяются.

   Название медиа-фичи здесь намеренно не пишется словом: иначе grep по
   собранному бандлу находит этот комментарий и создаёт впечатление, что
   правила тёмной темы ещё на месте. */

/* Токены палитры переехали в wwwroot/app.css на :root (2026-08-24).
   Раньше они объявлялись здесь, на .public-shell, специально — чтобы не задеть
   кабинет врача/пациента, который использует тот же app.css. С этапа 1 веб-кабинета
   это перестало быть верным: кабинет обязан выглядеть продолжением страницы входа,
   и палитра ему нужна та же. Держать её в двух местах = гарантированное
   расхождение при первой же правке цвета. */

.public-shell[b-5pcdy99qic] {
    /* Шапка липкая: якорные ссылки должны останавливаться ниже неё.
       Токен локальный: на телефоне он обнуляется ниже в этом же файле. */
    --ln-header-h: 76px;

    /* Страница светлая при любой системной теме. Без этого браузер в тёмной теме
       перекрашивает под себя поля ввода, скроллбары и автозаполнение, и они
       выпадают из светлой страницы. */
    color-scheme: light;

    display: flex;
    flex-direction: column;
    /* dvh, а не vh: на iOS Safari адресная строка меняет высоту vh и страница дёргается. */
    min-height: 100dvh;
    background: var(--ln-bg);
    color: var(--ln-text);
    /* Системный стек: кириллица без внешних запросов к CDN шрифтов. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
}

/* ── Ссылка «к содержимому» для клавиатуры ───────────────────────────── */

.skip-link[b-5pcdy99qic] {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--ln-radius) 0;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus[b-5pcdy99qic] {
    left: 0;
}

/* ── Шапка ────────────────────────────────────────────────────────────── */

.public-header[b-5pcdy99qic] {
    display: flex;
    align-items: center;
    /* Зазор и поля сжимаются вместе с окном: после седьмой ссылки в меню
       («Задать вопросы») фиксированные 2rem/3rem не оставляли ей места, и
       ряд разваливался на два уже на 1280. */
    gap: clamp(1rem, 2vw, 2rem);
    padding: 1rem clamp(1rem, 2.5vw, 3rem);
    min-height: var(--ln-header-h);
    background: var(--ln-header-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ln-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Знак сверху, подпись снизу. Раньше они стояли в строку, и после появления
   седьмой ссылки в меню («Задать вопросы») шапка перестала помещаться в один
   ряд на промежуточных ширинах. Два яруса отдают меню всю освободившуюся
   ширину, а сам логотип становится ниже по строке, но у́же — для шапки это
   выгодный размен. */
.public-logo[b-5pcdy99qic] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    white-space: nowrap;
}

.public-logo-mark[b-5pcdy99qic] {
    width: 40px;
    height: 40px;
    /* Иконка квадратная; скругление повторяет то, как её рисуют мобильные ОС. */
    border-radius: 10px;
    flex: 0 0 auto;
}

.public-logo-text[b-5pcdy99qic] {
    font-weight: 800;
    /* Мельче прежнего: под знаком подпись не обязана спорить с ним по весу,
       а лишние миллиметры ширины шапке нужнее. */
    font-size: 1.05rem;
    line-height: 1.1;
    color: var(--ln-accent);
    letter-spacing: -0.02em;
}

.public-logo-text span[b-5pcdy99qic] {
    font-weight: 400;
    opacity: 0.75;
}

/* Зазор ужат под пунктами меню: при 1.5rem меню переставало помещаться
   в строку уже на 1120px и рвалось на два ряда внутри липкой шапки. */
.public-nav[b-5pcdy99qic] {
    display: flex;
    /* Тот же приём: на широком экране прежние 1.1rem, на промежуточных
       ширинах зазор ужимается, а не переносит ссылки. */
    gap: clamp(0.7rem, 1.1vw, 1.1rem);
    /* Было margin-right:auto — меню занимало ширину по содержимому, а остаток
       уходил в отступ и прижимал кнопку входа вправо. Теперь остаток забирает
       само меню: внутри него последним элементом стоит переключатель языка
       с margin-left:auto, и прижимать вправо нужно ЕГО, а не пустоту.
       Внешне на широком экране ничего не изменилось — кнопка входа стоит там же. */
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
}

/* Переключатель языка внутри меню — к правому краю. На широком экране это
   даёт «справа вверху, перед кнопкой входа»; на телефоне, где меню переносится
   на несколько рядов, — правый край последнего ряда (см. комментарий
   в PublicLayout.razor).

   ::deep обязателен. Переключатель — отдельный компонент, и его корневой <div>
   помечен ЕГО областью изоляции, а не областью этого файла. Без ::deep правило
   компилируется в «.public-nav .lang-switch[b-<scope PublicLayout>]» и не
   находит ничего: переключатель молча оставался прижат к «Авторам» вместо
   правого края. С ::deep область уезжает на .public-nav — элемент этой
   разметки, — а потомок сопоставляется как обычно. */
.public-nav[b-5pcdy99qic]  .lang-switch {
    margin-left: auto;
}

.public-nav a[b-5pcdy99qic] {
    color: var(--ln-text-2);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
    transition: color var(--ln-transition), border-color var(--ln-transition);
}

.public-nav a:hover[b-5pcdy99qic] {
    color: var(--ln-accent);
    border-bottom-color: var(--ln-accent);
}

.public-cta[b-5pcdy99qic] {
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--ln-transition);
}

.public-cta:hover[b-5pcdy99qic] {
    background: var(--ln-btn-bg-hover);
    color: var(--ln-btn-fg);
}

.public-cta:active[b-5pcdy99qic] {
    transform: translateY(1px);
}

/* ── Вошедший пользователь: имя вместо кнопки входа ──────────────────── */

.public-account[b-5pcdy99qic] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

/* Контурная «пилюля» той же геометрии, что .public-cta, но без заливки:
   имя — это переход в кабинет, а не главное действие страницы, и спорить
   с кнопками героя ему незачем. */
.public-account-link[b-5pcdy99qic] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    /* 48px: та же цель нажатия, что у остальных кнопок сайта. */
    min-height: 48px;
    padding: 0.45rem 1.1rem 0.45rem 0.45rem;
    border: 2px solid var(--ln-border-strong);
    border-radius: 999px;
    color: var(--ln-accent);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: border-color var(--ln-transition), background-color var(--ln-transition);
}

.public-account-link:hover[b-5pcdy99qic] {
    border-color: var(--ln-accent);
    background: var(--ln-surface-2);
    color: var(--ln-accent);
}

.public-account-link:active[b-5pcdy99qic] {
    transform: translateY(1px);
}

/* Кружок с инициалом: он же отличает залогиненное состояние от кнопки входа
   на беглый взгляд, не только текстом. */
.public-account-mark[b-5pcdy99qic] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    font-size: 0.95rem;
    font-weight: 800;
}

/* Длинное имя не должно ломать шапку: обрезаем, полное видно в подсказке
   браузера при наведении на ссылку. */
.public-account-name[b-5pcdy99qic] {
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.public-account-logout[b-5pcdy99qic] {
    margin: 0;
}

.public-account-logout button[b-5pcdy99qic] {
    min-height: 48px;
    padding: 0 0.5rem;
    background: none;
    border: none;
    color: var(--ln-text-2);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--ln-transition);
}

.public-account-logout button:hover[b-5pcdy99qic] {
    color: var(--ln-accent);
}

/* Единое видимое кольцо фокуса: у круглых кнопок браузерное по умолчанию
   рисуется прямоугольником и теряется на синем фоне. */
.public-header a:focus-visible[b-5pcdy99qic],
.public-account-logout button:focus-visible[b-5pcdy99qic],
.skip-link:focus-visible[b-5pcdy99qic] {
    outline: 3px solid var(--ln-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

.public-content[b-5pcdy99qic] {
    flex: 1;
}

/* ── Футер ────────────────────────────────────────────────────────────── */

.public-footer[b-5pcdy99qic] {
    background: var(--ln-footer-bg);
    color: var(--ln-footer-text);
    padding: 2.5rem 3rem;
    text-align: center;
}

.public-footer-brand[b-5pcdy99qic] {
    font-weight: 800;
    font-size: 1.1rem;
    color: #FFFFFF;
    margin-bottom: 0.75rem;
}

.public-footer-backing[b-5pcdy99qic] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    max-width: 620px;
    margin: 0 auto 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ln-footer-muted);
}

/* Светлая подложка под тёмно-синий логотип: на тёмном футере он иначе
   не читается, а перекрашивать чужой знак нельзя. */
.public-footer-backing-mark[b-5pcdy99qic] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: #FFFFFF;
}

.public-footer-backing-mark img[b-5pcdy99qic] {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* Свидетельство о регистрации: тот же приглушённый регистр, что у строки
   о поддержке университета выше — это справочная информация, а не действие.
   Номер сделан ссылкой на сам документ: подпись без возможности проверить
   документ стоит немного. */
.public-footer-certificate[b-5pcdy99qic] {
    max-width: 640px;
    margin: 0 auto 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ln-footer-muted);
}

/* #CBD5E1 на #0F172A — 12:1; ссылка обязана отличаться от окружающего
   текста не только цветом, отсюда подчёркивание. */
.public-footer-certificate a[b-5pcdy99qic] {
    color: var(--ln-footer-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: color var(--ln-transition);
}

.public-footer-certificate a:hover[b-5pcdy99qic] {
    color: #FFFFFF;
}

.public-footer-disclaimer[b-5pcdy99qic] {
    max-width: 640px;
    margin: 0 auto 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--ln-footer-muted);
    /* Было uppercase: дисклеймер про самолечение — самый важный текст футера,
       а капслоком сплошной русский текст читается заметно медленнее. */
    letter-spacing: 0.01em;
}

.public-footer-support[b-5pcdy99qic],
/* Ссылок теперь две (согласие и политика), поэтому не строка текста, а гибкий
   ряд: на узком экране они переносятся, а не слипаются. */
.public-footer-links[b-5pcdy99qic] {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    color: var(--ln-footer-text);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.5rem;
}

/* Было #64748B на #0F172A: 3.75:1, ниже порога WCAG AA 4.5:1 для основного
   текста. Хуже того, hover уводил цвет в #334155, то есть делал ссылку темнее
   и без того тёмного фона: 1.72:1, практически нечитаемо. Пары пересчитаны,
   текущие значения 12.02:1 в обычном состоянии и 17.85:1 на hover. */
.public-footer-support a[b-5pcdy99qic],
.public-footer-links a[b-5pcdy99qic] {
    color: var(--ln-footer-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--ln-transition);
}

.public-footer-support a:hover[b-5pcdy99qic],
.public-footer-links a:hover[b-5pcdy99qic] {
    color: #FFFFFF;
}

.public-footer a:focus-visible[b-5pcdy99qic] {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
    border-radius: 4px;
}

.public-footer-copy[b-5pcdy99qic] {
    font-size: 0.85rem;
    color: var(--ln-footer-muted);
    margin: 0;
}

/* ── Планшет и телефон ────────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .public-header[b-5pcdy99qic] {
        padding: 1rem 1.5rem;
        gap: 1.25rem;
    }

    .public-nav[b-5pcdy99qic] {
        gap: 0.8rem;
    }
}

/* Порог переноса навигации. История: 860 → 1100 (пятый пункт «Авторы»)
   → 1200 (шестой пункт «Согласие») → 1400 (восьмой пункт «Публикации»)
   → 1560 (переключатель языка).

   Смысл: выше порога навигация стоит в одну строку рядом с логотипом и кнопкой,
   ниже — получает собственный ряд целиком, а шапка перестаёт быть липкой.
   Без этого меню рвётся на два ряда ВНУТРИ липкой шапки, и та вырастает
   до 123px при потолке 80.

   Замер на 1120px с шестью пунктами: меню требует 649px при доступных 622,
   то есть не хватает 27px. Сокращение «Информация о болезни» до «О болезни»
   эти 27px не отыгрывает, поэтому названия оставлены как есть, а поднят порог.

   Порог считается по сумме того, что обязано уместиться в один ряд:
   отступы(72) + логотип(91) + меню(1000) + переключатель языка(120)
   + кнопка входа(174) + три зазора(96) ≈ 1553. Отсюда 1560.

   Именно переключатель поднял порог с 1400: на 1440px он забирал у меню
   149px из 1045 доступных, меню требует 988 — и рвалось на два ряда внутри
   липкой шапки, поднимая её с 95 до 121px на всю прокрутку. Ниже порога
   шапка не липкая, поэтому лишний ряд уезжает вверх вместе со страницей
   и экрана не занимает. */
@media (max-width: 1560px) {
    /* Шапка больше не липкая, поэтому и отступ для якорей не нужен. */
    .public-shell[b-5pcdy99qic] {
        --ln-header-h: 0px;
    }

    /* Навигация переносится под логотип, а не исчезает.
       Раньше здесь было display:none без замены — на телефоне разделы сайта
       становились недостижимы, а прятать их за гамбургер для аудитории
       с нарушением моторики тем более не вариант. */
    .public-header[b-5pcdy99qic] {
        flex-wrap: wrap;
        padding: 0.9rem 1.25rem;
        row-gap: 0.75rem;
        /* Знак приложения расширил логотип, и при прежнем зазоре 1.25rem кнопка
           переставала помещаться в один ряд с ним: 146 + 174 + 20 > 335 доступных
           на 375px. Зазор и кнопка ужаты так, чтобы ряд держался до ~345px. */
        column-gap: 0.75rem;
        /* Перенесённая навигация делает шапку ~172px. Липкой такая шапка съедала
           бы пятую часть экрана телефона на всём скролле, поэтому здесь она
           обычная и уезжает вверх вместе со страницей. */
        position: static;
    }

    .public-logo[b-5pcdy99qic] {
        margin-right: auto;
        gap: 0.55rem;
    }

    .public-logo-mark[b-5pcdy99qic] {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .public-logo-text[b-5pcdy99qic] {
        font-size: 1.2rem;
    }

    .public-nav[b-5pcdy99qic] {
        order: 3;
        flex-basis: 100%;
        gap: 0.3rem 0.95rem;
    }

    /* Кегль и зазор подобраны так, чтобы пять пунктов укладывались в два ряда,
       а не в три: третий ряд поднимал шапку до 216px и выталкивал основную
       кнопку героя за сгиб. Высота цели нажатия не пострадала, её держит
       вертикальный padding. */
    .public-nav a[b-5pcdy99qic] {
        /* 0.6rem, а не 0.5: при уменьшенном кегле цель нажатия падала до 39px,
           а для аудитории с нарушением моторики держим не меньше 44. */
        padding: 0.6rem 0;
        font-size: 0.86rem;
    }

    .public-cta[b-5pcdy99qic] {
        padding: 0.6rem 1.15rem;
        font-size: 0.9rem;
    }

    /* На 375px в ряду уже логотип и «Выйти»; имя ужимается, но кружок
       с инициалом остаётся — по нему и попадают пальцем. */
    .public-account[b-5pcdy99qic] {
        gap: 0.25rem;
    }

    .public-account-link[b-5pcdy99qic] {
        padding: 0.35rem 0.8rem 0.35rem 0.35rem;
        font-size: 0.9rem;
    }

    .public-account-name[b-5pcdy99qic] {
        max-width: 7ch;
    }

    .public-footer[b-5pcdy99qic] {
        padding: 2rem 1.25rem;
    }

    .public-footer-backing[b-5pcdy99qic] {
        flex-direction: column;
        text-align: center;
        gap: 0.6rem;
    }
}

/* ── Служебная плашка Blazor ──────────────────────────────────────────── */

/* display:none по умолчанию — блок показывает сам Blazor при обрыве circuit.
   Без этого правила он виден всегда: CSS-изоляция не пускает сюда копию
   из MainLayout.razor.css. */
#blazor-error-ui[b-5pcdy99qic] {
    color-scheme: light only;
    background: lightyellow;
    color: #1F2937;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-5pcdy99qic] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Уважение к системной настройке анимации ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .public-shell *[b-5pcdy99qic] {
        transition: none !important;
        animation: none !important;
    }

    .public-cta:active[b-5pcdy99qic],
    .public-account-link:active[b-5pcdy99qic] {
        transform: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-kbvf5rhm0h],
.components-reconnect-repeated-attempt-visible[b-kbvf5rhm0h],
.components-reconnect-failed-visible[b-kbvf5rhm0h],
.components-pause-visible[b-kbvf5rhm0h],
.components-resume-failed-visible[b-kbvf5rhm0h],
.components-rejoining-animation[b-kbvf5rhm0h] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-kbvf5rhm0h],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-kbvf5rhm0h],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-kbvf5rhm0h],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-kbvf5rhm0h],
#components-reconnect-modal.components-reconnect-retrying[b-kbvf5rhm0h],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-kbvf5rhm0h],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-kbvf5rhm0h],
#components-reconnect-modal.components-reconnect-failed[b-kbvf5rhm0h],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-kbvf5rhm0h] {
    display: block;
}


#components-reconnect-modal[b-kbvf5rhm0h] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-kbvf5rhm0h 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-kbvf5rhm0h 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-kbvf5rhm0h 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-kbvf5rhm0h]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-kbvf5rhm0h 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-kbvf5rhm0h {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-kbvf5rhm0h {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-kbvf5rhm0h {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-kbvf5rhm0h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-kbvf5rhm0h] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-kbvf5rhm0h] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-kbvf5rhm0h] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-kbvf5rhm0h] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-kbvf5rhm0h] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-kbvf5rhm0h] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-kbvf5rhm0h 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-kbvf5rhm0h] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-kbvf5rhm0h {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/AccessCodes.razor.rz.scp.css */
/* Страница выдачи кодов доступа врачей. */

.codes-intro[b-skvit9grw5] {
    max-width: 42rem;
    color: #475569;
    line-height: 1.6;
}

.codes-issue[b-skvit9grw5] {
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: #1d4ed8;
    border: none;
    border-radius: 0.4rem;
    cursor: pointer;
}

.codes-issue:hover:not(:disabled)[b-skvit9grw5] { background: #1e40af; }
.codes-issue:disabled[b-skvit9grw5] { background: #94a3b8; cursor: default; }

/* Выданный код — главное на странице, его переписывают или копируют */
.codes-new[b-skvit9grw5] {
    margin: 1.25rem 0;
    padding: 1.25rem;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: 0.6rem;
}

.codes-new-label[b-skvit9grw5] {
    font-size: 0.85rem;
    color: #047857;
    margin-bottom: 0.5rem;
}

.codes-new-value[b-skvit9grw5] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #064e3b;
    user-select: all;          /* один клик выделяет код целиком */
}

.codes-new-hint[b-skvit9grw5] {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: #047857;
    line-height: 1.5;
}

.codes-error[b-skvit9grw5] {
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    color: #991b1b;
    border-radius: 0 0.4rem 0.4rem 0;
}

.codes-table-wrap[b-skvit9grw5] { overflow-x: auto; }

.codes-row-used[b-skvit9grw5] { opacity: 0.6; }

.codes-badge[b-skvit9grw5] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.codes-badge-free[b-skvit9grw5] { background: #dcfce7; color: #166534; }
.codes-badge-used[b-skvit9grw5] { background: #e2e8f0; color: #475569; }

.codes-used-by[b-skvit9grw5] {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: #64748B;
}

.codes-delete[b-skvit9grw5] {
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
    color: #991b1b;
    background: transparent;
    border: 1px solid #fca5a5;
    border-radius: 0.3rem;
    cursor: pointer;
}

.codes-delete:hover:not(:disabled)[b-skvit9grw5] { background: #fef2f2; }
.codes-delete:disabled[b-skvit9grw5] { opacity: 0.5; cursor: default; }

.codes-note[b-skvit9grw5] {
    max-width: 42rem;
    font-size: 0.82rem;
    color: #64748B;
    line-height: 1.5;
}
/* /Components/Pages/Authors.razor.rz.scp.css */
/* Страница «Авторы». Цвета и радиусы — из токенов .public-shell.
   Раскладка не повторяет /disease и /guide: там ленты шагов, тонированные
   колонки и таблицы, здесь строки организаций и сетка персоналий. */

.authors[b-v3mn0iyebr] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

/* ── Заголовок ──────────────────────────────────────────────────────── */

.a-head[b-v3mn0iyebr] {
    padding-bottom: 0.5rem;
}

.a-head h1[b-v3mn0iyebr] {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ln-text);
    margin: 0;
}

/* Три строки-упоминания: поддержка, клиническая база, информационная
   поддержка. Волосяные линейки между ними, без подписей-заголовков: это
   не таблица «параметр — значение», а три равнозначных факта. */
.a-credits[b-v3mn0iyebr] {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ln-border);
}

.a-credits li[b-v3mn0iyebr] {
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--ln-border);
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--ln-text-2);
    max-width: 74ch;
}

.a-credits a[b-v3mn0iyebr] {
    color: var(--ln-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Секции ─────────────────────────────────────────────────────────── */

.a-section[b-v3mn0iyebr] {
    padding-top: 3rem;
}

.a-section h2[b-v3mn0iyebr] {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ln-text);
    margin: 0 0 1.5rem;
}

/* ── Персоналии: две колонки ────────────────────────────────────────── */

.a-people[b-v3mn0iyebr] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem 2.5rem;
    align-items: start;
}

.a-people li[b-v3mn0iyebr] {
    padding-left: 1.25rem;
    border-left: 3px solid var(--ln-accent);
}

.a-people h3[b-v3mn0iyebr] {
    font-size: 1.06rem;
    margin: 0 0 0.35rem;
    color: var(--ln-text);
    line-height: 1.35;
}

.a-people p[b-v3mn0iyebr] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ln-text-2);
}

a:focus-visible[b-v3mn0iyebr] {
    outline: 3px solid var(--ln-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ── Телефон ────────────────────────────────────────────────────────── */

@media (max-width: 780px) {
    .authors[b-v3mn0iyebr] {
        padding: 2rem 1.25rem 3.5rem;
    }

    .a-section[b-v3mn0iyebr] {
        padding-top: 2.25rem;
    }

    .a-people[b-v3mn0iyebr] {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
}
/* /Components/Pages/Consent.razor.rz.scp.css */
/* Страница «Информированное согласие». Цвета и радиусы — из токенов
   .public-shell. Страница короткая и с одним действием, поэтому вся её
   композиция строится вокруг панели скачивания. */

.consent[b-0i6olb5182] {
    max-width: 860px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

/* ── Заголовок ──────────────────────────────────────────────────────── */

.c-head h1[b-0i6olb5182] {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ln-text);
    margin: 0 0 1rem;
}

.c-lead[b-0i6olb5182] {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--ln-text-2);
    max-width: 64ch;
}

/* ── Панель скачивания ──────────────────────────────────────────────── */

.c-download[b-0i6olb5182] {
    margin-top: 2.25rem;
}

.c-download-inner[b-0i6olb5182] {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    padding: 1.6rem 1.75rem;
    background: var(--ln-surface-2);
    border-radius: var(--ln-radius);
}

.c-download-icon[b-0i6olb5182] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--ln-surface);
    color: var(--ln-accent);
}

.c-download-text[b-0i6olb5182] {
    flex: 1 1 auto;
    min-width: 0;
}

.c-download-text h2[b-0i6olb5182] {
    font-size: 1.12rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--ln-text);
    line-height: 1.35;
}

.c-download-text p[b-0i6olb5182] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ln-text-2);
}

.c-download-btn[b-0i6olb5182] {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-height: 48px;
    padding: 0.75rem 1.9rem;
    border-radius: 999px;
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--ln-transition);
}

.c-download-btn:hover[b-0i6olb5182] {
    background: var(--ln-btn-bg-hover);
    color: var(--ln-btn-fg);
}

.c-download-btn:active[b-0i6olb5182] {
    transform: translateY(1px);
}

.c-download-meta[b-0i6olb5182] {
    font-weight: 500;
    font-size: 0.78rem;
    opacity: 0.85;
}

/* ── Как проходит подписание ────────────────────────────────────────── */

.c-section[b-0i6olb5182] {
    padding-top: 3rem;
}

.c-section h2[b-0i6olb5182] {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ln-text);
    margin: 0 0 1.5rem;
}

.c-steps[b-0i6olb5182] {
    list-style: none;
    counter-reset: cstep;
    margin: 0;
    padding: 0;
}

.c-steps li[b-0i6olb5182] {
    counter-increment: cstep;
    position: relative;
    padding-left: 3.4rem;
    padding-bottom: 1.75rem;
}

.c-steps li:last-child[b-0i6olb5182] {
    padding-bottom: 0;
}

.c-steps li[b-0i6olb5182]::before {
    content: counter(cstep);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    font-weight: 800;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.c-steps li:not(:last-child)[b-0i6olb5182]::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 38px;
    bottom: 0;
    width: 2px;
    background: var(--ln-border-strong);
}

.c-steps h3[b-0i6olb5182] {
    font-size: 1.06rem;
    margin: 0 0 0.35rem;
    color: var(--ln-text);
    min-height: 38px;
    display: flex;
    align-items: center;
}

.c-steps p[b-0i6olb5182] {
    margin: 0;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 62ch;
}

.c-note[b-0i6olb5182] {
    margin: 2rem 0 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 64ch;
}

.c-note a[b-0i6olb5182] {
    color: var(--ln-accent);
}

a:focus-visible[b-0i6olb5182] {
    outline: 3px solid var(--ln-accent);
    outline-offset: 3px;
    border-radius: 10px;
}

/* ── Телефон ────────────────────────────────────────────────────────── */

@media (max-width: 780px) {
    .consent[b-0i6olb5182] {
        padding: 2rem 1.25rem 3.5rem;
    }

    .c-download-inner[b-0i6olb5182] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.4rem 1.25rem;
    }

    .c-download-btn[b-0i6olb5182] {
        width: 100%;
    }

    .c-section[b-0i6olb5182] {
        padding-top: 2.25rem;
    }

    .c-steps li[b-0i6olb5182] {
        padding-left: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-download-btn[b-0i6olb5182] {
        transition: none;
    }

    .c-download-btn:active[b-0i6olb5182] {
        transform: none;
    }
}
/* /Components/Pages/Disease.razor.rz.scp.css */
/* Страница «Информация о болезни». Цвета и радиусы — из токенов .public-shell
   (PublicLayout.razor.css), поэтому тёмная тема отдельно не описывается.

   Это длинный читаемый текст, а не лендинг: ширина строки ограничена, блоки
   разделены линейками и тонированными панелями, карточек с тенями нет. */

.disease[b-sv0jerby7o] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

[id][b-sv0jerby7o] {
    scroll-margin-top: calc(var(--ln-header-h) + 1rem);
}

/* ── Заголовок страницы ──────────────────────────────────────────────── */

.d-head[b-sv0jerby7o] {
    padding-bottom: 2.25rem;
    border-bottom: 1px solid var(--ln-border);
}

.d-head h1[b-sv0jerby7o] {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ln-text);
    margin: 0 0 1rem;
    max-width: 20ch;
}

.d-lead[b-sv0jerby7o] {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 68ch;
}

/* ── Общие элементы секций ───────────────────────────────────────────── */

.d-section[b-sv0jerby7o] {
    padding-top: 3rem;
}

.d-section h2[b-sv0jerby7o] {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ln-text);
    margin: 0 0 1.1rem;
}

.d-intro[b-sv0jerby7o] {
    margin: 0 0 1.75rem;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 68ch;
}

.d-note[b-sv0jerby7o] {
    margin: 1.5rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ln-text-2);
    max-width: 68ch;
}

.d-note code[b-sv0jerby7o] {
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 5px;
    background: var(--ln-surface-2);
}

/* ── Коротко о главном: строки с акцентной линейкой ─────────────────── */

.d-key[b-sv0jerby7o] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
}

.d-key li[b-sv0jerby7o] {
    padding-left: 1.4rem;
    border-left: 3px solid var(--ln-accent);
}

.d-key h3[b-sv0jerby7o] {
    font-size: 1.08rem;
    margin: 0 0 0.4rem;
    color: var(--ln-text);
}

.d-key p[b-sv0jerby7o] {
    margin: 0;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 66ch;
}

/* ── С чего начинается: две тонированные колонки ────────────────────── */

.d-two[b-sv0jerby7o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.d-col[b-sv0jerby7o] {
    background: var(--ln-surface-2);
    border-radius: var(--ln-radius);
    padding: 1.6rem 1.65rem;
}

.d-col h3[b-sv0jerby7o] {
    font-size: 1.12rem;
    margin: 0 0 0.6rem;
    color: var(--ln-accent);
}

.d-col p[b-sv0jerby7o] {
    margin: 0 0 0.8rem;
    line-height: 1.6;
    color: var(--ln-text-2);
}

.d-col-note[b-sv0jerby7o] {
    margin: 0 !important;
    padding-top: 0.8rem;
    border-top: 1px solid var(--ln-border);
    font-size: 0.93rem;
}

/* ── Частоты: две колонки списков с числом справа ───────────────────── */

.d-cols-2[b-sv0jerby7o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.d-stack h3[b-sv0jerby7o] {
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
    color: var(--ln-text);
}

.d-rate[b-sv0jerby7o] {
    margin: 0;
    border-top: 1px solid var(--ln-border);
}

.d-rate > div[b-sv0jerby7o] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--ln-border);
}

.d-rate dt[b-sv0jerby7o] {
    color: var(--ln-text-2);
    line-height: 1.45;
    font-size: 0.95rem;
}

.d-rate dd[b-sv0jerby7o] {
    margin: 0;
    flex: 0 0 auto;
    font-weight: 700;
    /* Табличные цифры, чтобы столбец процентов не «плясал». */
    font-variant-numeric: tabular-nums;
    color: var(--ln-accent);
}

/* ── Выноска для семьи ──────────────────────────────────────────────── */

.d-callout[b-sv0jerby7o] {
    margin: 2rem 0 0;
    padding: 1.15rem 1.35rem;
    background: var(--ln-tint-amber);
    border-left: 3px solid #E0A02A;
    border-radius: 0 var(--ln-radius) var(--ln-radius) 0;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 72ch;
}

.d-callout strong[b-sv0jerby7o] {
    color: var(--ln-text);
}

/* ── Факторы: нумерованный список ───────────────────────────────────── */

/* Две колонки: десять факторов в один столбец дают полосу чтения метра на два.
   Сетка заполняется построчно (1-2, 3-4, ...), но у каждого пункта есть номер,
   так что порядок читается однозначно. */
.d-factors[b-sv0jerby7o] {
    list-style: none;
    counter-reset: factor;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem 2.5rem;
    align-items: start;
}

.d-factors li[b-sv0jerby7o] {
    counter-increment: factor;
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 1.1rem;
    align-items: start;
}

.d-factors li[b-sv0jerby7o]::before {
    content: counter(factor);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--ln-border-strong);
    font-weight: 800;
    color: var(--ln-accent);
    font-variant-numeric: tabular-nums;
}

.d-factors h3[b-sv0jerby7o] {
    font-size: 1.08rem;
    margin: 0 0 0.35rem;
    color: var(--ln-text);
    align-self: center;
    min-height: 42px;
    display: flex;
    align-items: center;
}

.d-factors p[b-sv0jerby7o] {
    margin: 0;
    line-height: 1.65;
    color: var(--ln-text-2);
}

/* ── Таблица шкал ───────────────────────────────────────────────────── */

/* Узкий экран прокручивает таблицу, а не всю страницу. */
.d-table-wrap[b-sv0jerby7o] {
    overflow-x: auto;
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius);
}

.d-table[b-sv0jerby7o] {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.d-table th[b-sv0jerby7o],
.d-table td[b-sv0jerby7o] {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
}

.d-table thead th[b-sv0jerby7o] {
    background: var(--ln-surface-2);
    color: var(--ln-text);
    font-weight: 700;
    white-space: nowrap;
}

.d-table tbody th[b-sv0jerby7o] {
    color: var(--ln-accent);
    font-weight: 700;
    white-space: nowrap;
}

.d-table tbody td[b-sv0jerby7o] {
    color: var(--ln-text-2);
}

.d-table tbody tr + tr th[b-sv0jerby7o],
.d-table tbody tr + tr td[b-sv0jerby7o] {
    border-top: 1px solid var(--ln-border);
}

/* ── Что помогает: строки с волосяными линейками ────────────────────── */

.d-help[b-sv0jerby7o] {
    margin: 0;
    border-top: 1px solid var(--ln-border);
}

.d-help > div[b-sv0jerby7o] {
    display: grid;
    grid-template-columns: minmax(210px, 300px) 1fr;
    gap: 0.4rem 2.5rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--ln-border);
}

.d-help dt[b-sv0jerby7o] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ln-accent);
}

.d-help dd[b-sv0jerby7o] {
    margin: 0;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 64ch;
}

/* ── Потребности пациентов: три колонки с верхней линейкой ──────────── */

.d-needs[b-sv0jerby7o] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.d-need[b-sv0jerby7o] {
    padding-top: 1rem;
    border-top: 3px solid var(--ln-accent);
}

.d-need h3[b-sv0jerby7o] {
    font-size: 1.05rem;
    margin: 0 0 0.5rem;
    color: var(--ln-text);
}

.d-need p[b-sv0jerby7o] {
    margin: 0;
    line-height: 1.6;
    color: var(--ln-text-2);
    font-size: 0.95rem;
}

/* ── Границы страницы ───────────────────────────────────────────────── */

.d-final[b-sv0jerby7o] {
    margin-top: 3rem;
    padding: 2rem 2.25rem 2.25rem;
    background: var(--ln-surface-2);
    border-radius: var(--ln-radius);
}

.d-final h2[b-sv0jerby7o] {
    margin-bottom: 0.9rem;
}

.d-final p[b-sv0jerby7o] {
    margin: 0 0 1rem;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 68ch;
}

.d-cta[b-sv0jerby7o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 0.75rem;
    padding: 0.8rem 2rem;
    border-radius: 999px;
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--ln-transition);
}

.d-cta:hover[b-sv0jerby7o] {
    background: var(--ln-btn-bg-hover);
    color: var(--ln-btn-fg);
}

.d-cta:active[b-sv0jerby7o] {
    transform: translateY(1px);
}

a:focus-visible[b-sv0jerby7o] {
    outline: 3px solid var(--ln-accent);
    outline-offset: 3px;
    border-radius: 10px;
}

/* ── Источники ──────────────────────────────────────────────────────── */

.d-sources ul[b-sv0jerby7o] {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.5rem;
    max-width: 72ch;
}

.d-sources li[b-sv0jerby7o] {
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--ln-text-2);
}

/* ── Планшет и телефон ──────────────────────────────────────────────── */

@media (max-width: 860px) {
    .d-needs[b-sv0jerby7o] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 780px) {
    .disease[b-sv0jerby7o] {
        padding: 2rem 1.25rem 3.5rem;
    }

    .d-section[b-sv0jerby7o] {
        padding-top: 2.25rem;
    }

    .d-head h1[b-sv0jerby7o] {
        max-width: none;
    }

    .d-two[b-sv0jerby7o],
    .d-cols-2[b-sv0jerby7o] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .d-factors[b-sv0jerby7o] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .d-help > div[b-sv0jerby7o] {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .d-final[b-sv0jerby7o] {
        padding: 1.6rem 1.35rem 1.75rem;
    }

    .d-cta[b-sv0jerby7o] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .d-cta[b-sv0jerby7o] {
        transition: none;
    }

    .d-cta:active[b-sv0jerby7o] {
        transform: none;
    }
}
/* /Components/Pages/Doctor/CreateInvite.razor.rz.scp.css */
form div[b-lybzch2lnb] {
    margin-bottom: 1rem;
}

form label[b-lybzch2lnb] {
    display: block;
    font-size: 0.9rem;
    color: var(--text-navy-secondary, #1E3A5F);
}

form input[type="text"][b-lybzch2lnb] {
    display: block;
    margin-top: 0.35rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    width: 100%;
    max-width: 360px;
}

form input[type="checkbox"][b-lybzch2lnb] {
    margin-right: 0.5rem;
}

button[type="submit"][b-lybzch2lnb] {
    background: var(--accent-navy, #1E3A8A);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1.6rem;
    font-weight: 700;
    cursor: pointer;
}

.invite-success[b-lybzch2lnb] {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.invite-code[b-lybzch2lnb] {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--accent-navy, #1E3A8A);
}

.invite-error[b-lybzch2lnb] {
    color: #B91C1C;
    font-weight: 600;
}
/* /Components/Pages/Doctor/Patients.razor.rz.scp.css */
.patients-table[b-4lkhmrypv3] {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.patients-table th[b-4lkhmrypv3], .patients-table td[b-4lkhmrypv3] {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #E2E8F0;
}

.patients-table th[b-4lkhmrypv3] {
    color: var(--text-navy-secondary, #1E3A5F);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.patients-table a[b-4lkhmrypv3] {
    color: var(--accent-navy, #1E3A8A);
    font-weight: 600;
    text-decoration: none;
}

.patients-table a:hover[b-4lkhmrypv3] {
    text-decoration: underline;
}
/* /Components/Pages/Guide.razor.rz.scp.css */
/* Страница «Инструкция». Цвета и радиусы — из токенов .public-shell
   (PublicLayout.razor.css).

   Раскладки намеренно не совпадают с /disease: там строки с линейками,
   тонированные колонки и нумерованная сетка, здесь вертикальная лента шагов,
   выноска-ветвление и таблица периодичности. */

.guide[b-z9lj5mu0q6] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

[id][b-z9lj5mu0q6] {
    scroll-margin-top: calc(var(--ln-header-h) + 1rem);
}

/* ── Заголовок и быстрые ссылки ──────────────────────────────────────── */

.g-head[b-z9lj5mu0q6] {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ln-border);
}

.g-head h1[b-z9lj5mu0q6] {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ln-text);
    margin: 0 0 1rem;
    max-width: 20ch;
}

.g-lead[b-z9lj5mu0q6] {
    margin: 0 0 1.5rem;
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 66ch;
}

/* Страница длинная и делится на три чужих друг другу сценария, поэтому
   переходы стоят сразу под заголовком, а не только в общем меню сайта. */
.g-jump[b-z9lj5mu0q6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.g-jump a[b-z9lj5mu0q6] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.55rem 1.15rem;
    border: 1px solid var(--ln-border-strong);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ln-accent);
    text-decoration: none;
    transition: border-color var(--ln-transition), background-color var(--ln-transition);
}

.g-jump a:hover[b-z9lj5mu0q6] {
    border-color: var(--ln-accent);
    background: var(--ln-surface-2);
}

/* ── Секции ─────────────────────────────────────────────────────────── */

.g-section[b-z9lj5mu0q6] {
    padding-top: 3rem;
}

.g-section h2[b-z9lj5mu0q6] {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ln-text);
    margin: 0 0 1.1rem;
}

.g-intro[b-z9lj5mu0q6] {
    margin: 0 0 2rem;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 68ch;
}

.g-note[b-z9lj5mu0q6] {
    margin: 2rem 0 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 68ch;
}

.g-note a[b-z9lj5mu0q6] {
    color: var(--ln-accent);
}

/* ── Лента шагов: вертикальная линия через все кружки ───────────────── */

.g-steps[b-z9lj5mu0q6] {
    list-style: none;
    counter-reset: gstep;
    margin: 0;
    padding: 0;
}

.g-steps li[b-z9lj5mu0q6] {
    counter-increment: gstep;
    position: relative;
    padding-left: 3.6rem;
    padding-bottom: 1.9rem;
}

.g-steps li:last-child[b-z9lj5mu0q6] {
    padding-bottom: 0;
}

.g-steps li[b-z9lj5mu0q6]::before {
    content: counter(gstep);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Линия соединяет кружок со следующим; у последнего шага её нет. */
.g-steps li:not(:last-child)[b-z9lj5mu0q6]::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--ln-border-strong);
}

.g-steps h3[b-z9lj5mu0q6] {
    font-size: 1.08rem;
    margin: 0 0 0.4rem;
    color: var(--ln-text);
    min-height: 40px;
    display: flex;
    align-items: center;
}

.g-steps p[b-z9lj5mu0q6] {
    margin: 0;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 64ch;
}

.g-steps strong[b-z9lj5mu0q6] {
    color: var(--ln-text);
}

/* ── Выноска-ветвление ──────────────────────────────────────────────── */

.g-callout[b-z9lj5mu0q6] {
    margin: 2.25rem 0 0;
    padding: 1.5rem 1.65rem;
    background: var(--ln-surface-2);
    border-radius: var(--ln-radius);
}

.g-callout h3[b-z9lj5mu0q6] {
    font-size: 1.08rem;
    margin: 0 0 0.5rem;
    color: var(--ln-accent);
}

.g-callout p[b-z9lj5mu0q6] {
    margin: 0;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 68ch;
}

/* ── Таблица периодичности ──────────────────────────────────────────── */

.g-table-wrap[b-z9lj5mu0q6] {
    overflow-x: auto;
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius);
}

.g-table[b-z9lj5mu0q6] {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.g-table th[b-z9lj5mu0q6],
.g-table td[b-z9lj5mu0q6] {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
}

.g-table thead th[b-z9lj5mu0q6] {
    background: var(--ln-surface-2);
    color: var(--ln-text);
    font-weight: 700;
    white-space: nowrap;
}

.g-table tbody th[b-z9lj5mu0q6] {
    color: var(--ln-accent);
    font-weight: 700;
}

.g-table tbody td[b-z9lj5mu0q6] {
    color: var(--ln-text-2);
}

.g-table tbody tr + tr th[b-z9lj5mu0q6],
.g-table tbody tr + tr td[b-z9lj5mu0q6] {
    border-top: 1px solid var(--ln-border);
}

/* ── Что получает врач ──────────────────────────────────────────────── */

.g-doctor[b-z9lj5mu0q6] {
    margin: 0;
    border-top: 1px solid var(--ln-border);
}

.g-doctor > div[b-z9lj5mu0q6] {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: 0.4rem 2.5rem;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--ln-border);
}

.g-doctor dt[b-z9lj5mu0q6] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ln-accent);
}

.g-doctor dd[b-z9lj5mu0q6] {
    margin: 0;
    line-height: 1.65;
    color: var(--ln-text-2);
    max-width: 64ch;
}

/* ── Итоговая памятка ───────────────────────────────────────────────── */

.g-final[b-z9lj5mu0q6] {
    margin-top: 3rem;
    padding: 2rem 2.25rem 2.25rem;
    background: var(--ln-surface-2);
    border-radius: var(--ln-radius);
}

.g-final h2[b-z9lj5mu0q6] {
    margin-bottom: 1rem;
}

.g-recap[b-z9lj5mu0q6] {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
    max-width: 68ch;
}

.g-recap li[b-z9lj5mu0q6] {
    position: relative;
    padding-left: 1.6rem;
    line-height: 1.6;
    color: var(--ln-text-2);
}

.g-recap li[b-z9lj5mu0q6]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ln-accent);
}

.g-cta[b-z9lj5mu0q6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.8rem 2rem;
    border-radius: 999px;
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--ln-transition);
}

.g-cta:hover[b-z9lj5mu0q6] {
    background: var(--ln-btn-bg-hover);
    color: var(--ln-btn-fg);
}

.g-cta:active[b-z9lj5mu0q6] {
    transform: translateY(1px);
}

a:focus-visible[b-z9lj5mu0q6] {
    outline: 3px solid var(--ln-accent);
    outline-offset: 3px;
    border-radius: 10px;
}

/* ── Телефон ────────────────────────────────────────────────────────── */

@media (max-width: 780px) {
    .guide[b-z9lj5mu0q6] {
        padding: 2rem 1.25rem 3.5rem;
    }

    .g-section[b-z9lj5mu0q6] {
        padding-top: 2.25rem;
    }

    .g-head h1[b-z9lj5mu0q6] {
        max-width: none;
    }

    .g-steps li[b-z9lj5mu0q6] {
        padding-left: 3.1rem;
    }

    .g-doctor > div[b-z9lj5mu0q6] {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .g-final[b-z9lj5mu0q6] {
        padding: 1.6rem 1.35rem 1.75rem;
    }

    .g-cta[b-z9lj5mu0q6] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .g-cta[b-z9lj5mu0q6],
    .g-jump a[b-z9lj5mu0q6] {
        transition: none;
    }

    .g-cta:active[b-z9lj5mu0q6] {
        transform: none;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Главная страница. Цвета, радиус и длительности приходят из токенов
   .public-shell (см. PublicLayout.razor.css), поэтому тёмная тема здесь
   отдельно не описывается: меняются значения переменных, а не правила.

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

.hero[b-fzp0c7wf9l],
.promo[b-fzp0c7wf9l],
.purpose[b-fzp0c7wf9l],
.how[b-fzp0c7wf9l],
.features[b-fzp0c7wf9l],
.download[b-fzp0c7wf9l],
.roles[b-fzp0c7wf9l] {
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: 2rem;
}

/* Шапка липкая, поэтому якорь должен останавливаться ниже неё.
   Без этого клик по «Возможности» уводил заголовок секции под шапку. */
[id][b-fzp0c7wf9l] {
    scroll-margin-top: calc(var(--ln-header-h) + 1rem);
}

h2[b-fzp0c7wf9l] {
    font-size: clamp(1.6rem, 2.6vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ln-text);
    margin: 0 0 1.75rem;
}

a:focus-visible[b-fzp0c7wf9l] {
    outline: 3px solid var(--ln-accent);
    outline-offset: 3px;
    border-radius: 10px;
}

/* ── Кнопки ───────────────────────────────────────────────────────────── */

.btn-primary[b-fzp0c7wf9l],
.btn-secondary[b-fzp0c7wf9l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    /* 48px: палец, а не курсор. Аудитория теряет точность движений. */
    min-height: 48px;
    padding: 0.8rem 2rem;
    font-weight: 700;
    font-size: 1.02rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--ln-transition), border-color var(--ln-transition),
        color var(--ln-transition);
}

.btn-primary[b-fzp0c7wf9l] {
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    border: 2px solid transparent;
}

.btn-primary:hover[b-fzp0c7wf9l] {
    background: var(--ln-btn-bg-hover);
    color: var(--ln-btn-fg);
}

.btn-secondary[b-fzp0c7wf9l] {
    background: transparent;
    color: var(--ln-accent);
    border: 2px solid var(--ln-border-strong);
}

.btn-secondary:hover[b-fzp0c7wf9l] {
    border-color: var(--ln-accent);
    color: var(--ln-accent);
}

.btn-primary:active[b-fzp0c7wf9l],
.btn-secondary:active[b-fzp0c7wf9l] {
    transform: translateY(1px);
}

/* ── Полоса институциональной поддержки ─────────────────────────────── */

.backing[b-fzp0c7wf9l] {
    border-bottom: 1px solid var(--ln-border);
    background: var(--ln-surface);
}

.backing-inner[b-fzp0c7wf9l] {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.7rem 2rem;
    display: flex;
    align-items: center;
    /* Группа «логотип + фраза» центрируется целиком, а не прижата к левому краю. */
    justify-content: center;
    gap: 0.85rem;
}

.backing-inner img[b-fzp0c7wf9l] {
    flex: 0 0 auto;
    /* Знак должен быть сопоставим со всем блоком поддержки, а не выглядеть
       как пиктограмма рядом с двумя строками официального текста. */
    width: 88px;
    height: 88px;
    object-fit: contain;
}

/* Колонка из двух строк: поддержка и свидетельство. Логотип остаётся слева
   от обеих, а не только от первой. */
.backing-text[b-fzp0c7wf9l] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Без max-width: ограничение в 72ch ломало строку пополам. Ширину задаёт
   контейнер, а строки выравниваются по центру вслед за группой. */
.backing-inner p[b-fzp0c7wf9l] {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ln-text-2);
    text-align: center;
}

/* Мельче основной строки: полоса обязана остаться тонкой (см. комментарий
   у .backing в разметке). Селектор с .backing-inner — чтобы перебить
   .backing-inner p по специфичности, а не восклицательным знаком. */
.backing-inner .backing-certificate[b-fzp0c7wf9l] {
    font-size: 0.86rem;
    line-height: 1.35;
}

/* Номер не переносится: на 375 px «№» оставался на одной строке,
   а цифры уезжали на следующую. */
.backing-certificate-number[b-fzp0c7wf9l] {
    white-space: nowrap;
}


/* ── Герой ────────────────────────────────────────────────────────────── */

.hero[b-fzp0c7wf9l] {
    display: grid;
    grid-template-columns: 1.16fr 0.84fr;
    align-items: center;
    gap: 3rem;
    padding-block: 3.5rem 4rem;
}

.hero-text h1[b-fzp0c7wf9l] {
    /* Заголовок из девяти слов ложится в три строки на десктопе и в четыре
       на телефоне. Уменьшать кегль ради двух строк не стали: важнее, что
       обе кнопки остаются в первом экране (замерено: 1280x800 нижняя кнопка
       на 535px, 375x812 — на 738px). */
    font-size: clamp(1.8rem, 3.2vw, 2.35rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin: 0 0 1.1rem;
    color: var(--ln-text);
    max-width: 30ch;
}

/* Подзаголовок длинный (около 290 знаков), поэтому кегль меньше, а строка
   длиннее, чем в типичном герое: иначе текст уходит в восемь строк и выталкивает
   кнопки за первый экран. 62ch держится в пределах комфортной длины строки. */
.hero-subtitle[b-fzp0c7wf9l] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ln-text-2);
    max-width: 62ch;
    margin: 0 0 1.75rem;
}

.hero-actions[b-fzp0c7wf9l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.hero-art[b-fzp0c7wf9l] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ветка стоит слева и частично уходит за телефон. Фирменный мотив приложения:
   тот же рисунок виден внутри скриншота рядом.

   Фон псевдоэлемента, а не <img>: картинка чисто декоративная, и так её можно
   не грузить там, где она не видна (см. мобильную ветку правил ниже).
   Absolute специально: не участвует в потоке и не увеличивает высоту героя,
   поэтому кнопки остаются в первом экране. */
.hero-art[b-fzp0c7wf9l]::before {
    content: "";
    position: absolute;
    z-index: 0;
    /* left: 0, а не отрицательный вылет: ветка не должна заходить в колонку
       текста. При вылете -16% она перекрывалась с подзаголовком, как только
       тот стал длиннее (замер: текст кончался на 652px, ветка начиналась
       с 629px). Привязка к границе колонки снимает зависимость от длины
       текста, который здесь уже менялся дважды. */
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: min(280px, 62%);
    aspect-ratio: 450 / 900;
    background: url("/images/feature-hero.png") center / contain no-repeat;
    /* Приглушена, чтобы читался скриншот, а не фон за ним. */
    opacity: 0.5;
    pointer-events: none;
}

/* Классы, а не «.hero-art img»: одно правило на оба изображения уже приводило
   к тому, что размеры фона перебивали размеры скриншота. */
.hero-art-phone[b-fzp0c7wf9l] {
    position: relative;
    z-index: 1;
    width: auto;
    /* Ограничение по высоте, а не по ширине: скриншот вертикальный, и без него
       герой перестаёт помещаться в первый экран. */
    max-height: min(56vh, 460px);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 40px rgba(15, 23, 42, 0.18));
}

/* ── Видео о приложении ──────────────────────────────────────────────── */

.promo[b-fzp0c7wf9l] {
    padding-block: 0 4rem;
}

/* aspect-ratio на обёртке держит место до загрузки постера: без него страница
   дёргается, когда кадр приходит. */
.promo-frame[b-fzp0c7wf9l] {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--ln-radius);
    background: #0F172A;
    box-shadow: var(--ln-shadow);
}

.promo-video[b-fzp0c7wf9l] {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Что приложение решает ───────────────────────────────────────────── */

.purpose[b-fzp0c7wf9l] {
    padding-block: 1rem 4rem;
}

.purpose-list[b-fzp0c7wf9l] {
    margin: 0;
    border-top: 1px solid var(--ln-border);
}

.purpose-row[b-fzp0c7wf9l] {
    display: grid;
    /* Колонка подписи шире прежней: названия выросли до «Прогнозирование
       дыхательных нарушений» и «Закрытый канал коммуникации с врачом». */
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 0.5rem 2.5rem;
    padding-block: 1.4rem;
    border-bottom: 1px solid var(--ln-border);
}

.purpose-row dt[b-fzp0c7wf9l] {
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--ln-accent);
}

.purpose-row dd[b-fzp0c7wf9l] {
    margin: 0;
    color: var(--ln-text-2);
    line-height: 1.6;
    max-width: 62ch;
}

/* ── Как это работает ────────────────────────────────────────────────── */

.how[b-fzp0c7wf9l] {
    padding-block: 4rem;
}

.how-intro[b-fzp0c7wf9l] {
    margin: -0.5rem 0 2rem;
    line-height: 1.6;
    color: var(--ln-text-2);
    max-width: 60ch;
}

/* Три параллельных сценария подключения, а не одна лента шагов: сценарии
   не следуют друг за другом, посетитель выбирает подходящий ему один из трёх.
   Верхняя линейка вместо карточки с тенью: карточная семья на этой странице
   уже занята сеткой возможностей. */
.tracks[b-fzp0c7wf9l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}

.track[b-fzp0c7wf9l] {
    padding-top: 1rem;
    border-top: 3px solid var(--ln-accent);
}

.track h3[b-fzp0c7wf9l] {
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0 0 1.1rem;
    color: var(--ln-text);
    /* Заголовки сценариев разной длины (от трёх слов до восьми). Фиксируем
       низ, чтобы нумерация шагов во всех трёх колонках начиналась на одной
       линии, иначе колонки читаются как несвязанные. */
    min-height: 4.05em;
}

.track-steps[b-fzp0c7wf9l] {
    counter-reset: step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.track-steps li[b-fzp0c7wf9l] {
    counter-increment: step;
    position: relative;
    padding-left: 2.1rem;
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--ln-text-2);
}

.track-steps li[b-fzp0c7wf9l]::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.track-steps strong[b-fzp0c7wf9l] {
    color: var(--ln-text);
}

/* Переход к тексту согласия из секции про подключение: согласие упоминается
   в двух сценариях из трёх, логично дать его тут же. */
.how-cta[b-fzp0c7wf9l] {
    margin-top: 2.25rem;
}

/* ── Возможности: бенто ──────────────────────────────────────────────── */

.features[b-fzp0c7wf9l] {
    padding-block: 4rem;
}

.bento[b-fzp0c7wf9l] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.15rem;
    /* Девять пунктов — девять ячеек, пустых мест нет. */
    grid-template-areas:
        "nev nev als  resp"
        "nev nev nut  ecas"
        "com com rag  pas"
        "vid vid vid  vid";
}

.at-nev[b-fzp0c7wf9l] { grid-area: nev; }
.at-als[b-fzp0c7wf9l] { grid-area: als; }
.at-resp[b-fzp0c7wf9l] { grid-area: resp; }
.at-nut[b-fzp0c7wf9l] { grid-area: nut; }
.at-ecas[b-fzp0c7wf9l] { grid-area: ecas; }
.at-com[b-fzp0c7wf9l] { grid-area: com; }
.at-rag[b-fzp0c7wf9l] { grid-area: rag; }
.at-pas[b-fzp0c7wf9l] { grid-area: pas; }
.at-vid[b-fzp0c7wf9l] { grid-area: vid; }

.cell[b-fzp0c7wf9l] {
    background: var(--ln-surface);
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius);
    padding: 1.5rem;
}

/* :not(.cell-shot) обязателен: иначе это правило перебивает .cell-shot по
   специфичности (0,1,1 против 0,1,0) и скриншот телефона схлопывается
   в иконку 44x44. */
.cell img:not(.cell-shot)[b-fzp0c7wf9l] {
    width: 44px;
    height: 44px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 0.9rem;
}

.cell h3[b-fzp0c7wf9l] {
    font-size: 1.02rem;
    margin: 0 0 0.45rem;
    color: var(--ln-text);
    line-height: 1.3;
}

.cell p[b-fzp0c7wf9l] {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--ln-text-2);
}

/* Тонированные ячейки: сетка из девяти одинаково белых карточек читается
   как список, а не как раскладка. */
.cell-tint-mint[b-fzp0c7wf9l] {
    background: var(--ln-tint-mint);
    border-color: transparent;
}

.cell-tint-blue[b-fzp0c7wf9l] {
    background: var(--ln-tint-blue);
    border-color: transparent;
}

/* Ведущая ячейка 2x2 со скриншотом. Телефон намеренно уходит за нижний край:
   вертикальный скриншот целиком в эту высоту не помещается, а кроп по низу
   выглядит как приём, а не как обрезка по ошибке. */
.cell-lead[b-fzp0c7wf9l] {
    grid-area: nev;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
    background: var(--ln-surface-2);
    border-color: transparent;
}

.cell-lead-text h3[b-fzp0c7wf9l] {
    font-size: 1.18rem;
}

/* Два экрана оценки статуса рядом. flex-end, чтобы низ телефонов совпадал:
   картинки чуть разной высоты (1596 и 1586 px). */
.cell-shots[b-fzp0c7wf9l] {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0.7rem;
    margin-top: 1.35rem;
}

.cell-shot[b-fzp0c7wf9l] {
    flex: 0 1 auto;
    width: min(218px, 48%);
    height: auto;
    max-height: none;
    object-fit: contain;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -2px 26px rgba(15, 23, 42, 0.16);
}

/* Ячейка с материалами тянется на всю ширину и читается как примечание,
   а не как ещё одна равноправная возможность. */
.cell-soon[b-fzp0c7wf9l] {
    background: var(--ln-tint-amber);
    border-color: transparent;
}

.cell-soon p[b-fzp0c7wf9l] {
    max-width: 70ch;
}

/* ── Скачивание Android-приложения ───────────────────────────────────── */

.download[b-fzp0c7wf9l] {
    padding-block: 4rem;
}

.download-card[b-fzp0c7wf9l] {
    display: grid;
    /* Колонка значка ФИКСИРОВАННОЙ ширины, а не auto. С auto она тянулась по
       содержимому, и у карточек с разными по размеру картинками (горизонтальный
       значок Android против квадратной иконки приложения) текст начинался
       на разном отступе — в паре карточек, стоящих одна под другой, съехавшие
       заголовки видно сразу. Ширина равна прежнему размеру картинки Android,
       поэтому та карточка выглядит как раньше, а меньшая иконка центрируется
       в колонке (.download-icon уже это делает). */
    grid-template-columns: clamp(10rem, 18vw, 12.5rem) 1fr;
    gap: 2rem;
    align-items: start;
    background: var(--ln-surface);
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius);
    padding: 2rem 2.25rem;
}

/* Вторая карточка (iPhone/iPad) — тем же блоком ниже первой. Отступ задан
   соседним селектором, а не margin-bottom у каждой: карточек может стать
   больше или меньше, а «зазор только МЕЖДУ ними» не придётся править. */
.download-card + .download-card[b-fzp0c7wf9l] {
    margin-top: 1.25rem;
}

.download-icon[b-fzp0c7wf9l] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-icon-image[b-fzp0c7wf9l] {
    display: block;
    /* Во всю колонку: её ширину задаёт сетка карточки. max-width обязателен —
       на телефоне колонка становится 1fr во всю карточку, и без потолка
       значок растянулся бы на всю её ширину. */
    width: 100%;
    max-width: 12.5rem;
    height: auto;
}

/* Квадратная картинка в том же слоте: иконка приложения против горизонтального
   значка Android (750×422). В одинаковой ШИРИНЕ квадрат выходит вдвое выше
   и перевешивает карточку, поэтому ужат — так обе картинки занимают примерно
   равную площадь и карточки читаются как пара.

   Скругление повторяет то, как иконку рисуют iOS и Android: в слоте значка
   она обязана выглядеть иконкой приложения, а не просто картинкой (тот же
   приём, что у .public-logo-mark в шапке). */
.download-icon-image--square[b-fzp0c7wf9l] {
    max-width: 8.5rem;
    border-radius: 22%;
}

.download-text h2[b-fzp0c7wf9l] {
    margin: 0 0 0.6rem;
}

.download-lead[b-fzp0c7wf9l] {
    margin: 0 0 1.4rem;
    max-width: 52ch;
    line-height: 1.6;
    color: var(--ln-text-2);
}

.download-actions[b-fzp0c7wf9l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.download-cta[b-fzp0c7wf9l] {
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.85rem 2.2rem;
    min-height: 58px;
}

.download-play[b-fzp0c7wf9l] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 8.5rem;
    min-height: 74px;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius);
    background: #fff;
    transition: border-color var(--ln-transition), box-shadow var(--ln-transition), transform var(--ln-transition);
}

.download-play:hover[b-fzp0c7wf9l] {
    border-color: var(--ln-accent);
    box-shadow: 0 4px 12px rgb(24 113 192 / 12%);
    transform: translateY(-1px);
}

/* RuStore — приложение на рассмотрении.

   Не ссылка: вести некуда, пока выпуск не одобрен, а неработающая ссылка
   в разделе скачивания раздражает больше, чем её отсутствие. Поэтому блок
   с той же рамкой, что у соседа, но без наведения и без курсора-руки —
   он выглядит как место, которое скоро займут, а не как сломанная кнопка. */
.download-play--pending[b-fzp0c7wf9l] {
    flex-direction: column;
    gap: 0.15rem;
    cursor: default;
    background: var(--ln-surface-muted, #f7f8fa);
    border-style: dashed;
}

.download-play--pending:hover[b-fzp0c7wf9l] {
    /* Гасим наведение, унаследованное от .download-play: подсказывать
       нажатие там, где нажимать нечего, — обманывать пользователя. */
    border-color: var(--ln-border);
    box-shadow: none;
    transform: none;
}

.rustore-mark[b-fzp0c7wf9l] {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: #0d1117;
    line-height: 1.1;
}

.rustore-pending[b-fzp0c7wf9l] {
    font-size: 0.72rem;
    opacity: 0.7;
    text-align: center;
    line-height: 1.15;
}

.download-play-image[b-fzp0c7wf9l] {
    display: block;
    width: 5.75rem;
    height: 4.1rem;
    object-fit: contain;
}

.download-meta[b-fzp0c7wf9l] {
    font-weight: 500;
    font-size: 0.8rem;
    opacity: 0.85;
}

.download-notes[b-fzp0c7wf9l] {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
    max-width: 62ch;
}

.download-notes li[b-fzp0c7wf9l] {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ln-text-2);
}

.download-notes strong[b-fzp0c7wf9l] {
    color: var(--ln-text);
}

.download-notes li[b-fzp0c7wf9l]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ln-accent);
}

/* ── Врачам и пациентам ──────────────────────────────────────────────── */

.roles[b-fzp0c7wf9l] {
    padding-block: 4rem 5rem;
}

.role-grid[b-fzp0c7wf9l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

/* Акцентная линейка слева вместо ещё одной карточки с тенью. */
.role-card[b-fzp0c7wf9l] {
    padding-left: 1.75rem;
    border-left: 3px solid var(--ln-accent);
}

.role-card img[b-fzp0c7wf9l] {
    width: 52px;
    height: 52px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 0.9rem;
}

.role-card h3[b-fzp0c7wf9l] {
    font-size: 1.2rem;
    margin: 0 0 0.5rem;
    color: var(--ln-text);
}

.role-card p[b-fzp0c7wf9l] {
    margin: 0;
    color: var(--ln-text-2);
    line-height: 1.6;
}

/* Три действия в блоке ролей и одно после «Возможностей» — тот же ряд
   кнопок, что в герое: перенос по ширине, одинаковый зазор. На узком экране
   ряд разворачивается в столбец правилом ниже. */
.roles-actions[b-fzp0c7wf9l] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 2.5rem;
}

.section-cta[b-fzp0c7wf9l] {
    display: inline-flex;
    margin-top: 2.5rem;
}

/* ── Планшет ─────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
    .bento[b-fzp0c7wf9l] {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "nev nev"
            "als resp"
            "nut ecas"
            "com com"
            "rag pas"
            "vid vid";
    }

    .cell-lead[b-fzp0c7wf9l] {
        min-height: 340px;
    }
}

/* ── Телефон ─────────────────────────────────────────────────────────── */

@media (max-width: 780px) {
    /* Компактнее, чем на десктопе: фраза длинная, на 375px она занимает
       несколько строк и полоса начинает выдавливать кнопки героя за сгиб. */
    .backing-inner[b-fzp0c7wf9l] {
        padding: 0.6rem 1.25rem;
        gap: 0.65rem;
    }

    .backing-inner img[b-fzp0c7wf9l] {
        width: 72px;
        height: 72px;
    }

    .backing-inner p[b-fzp0c7wf9l] {
        font-size: 0.86rem;
        line-height: 1.4;
    }

    .backing-inner .backing-certificate[b-fzp0c7wf9l] {
        font-size: 0.78rem;
    }

    .hero[b-fzp0c7wf9l],
    .promo[b-fzp0c7wf9l],
    .purpose[b-fzp0c7wf9l],
    .how[b-fzp0c7wf9l],
    .features[b-fzp0c7wf9l],
    .download[b-fzp0c7wf9l],
    .roles[b-fzp0c7wf9l] {
        padding-inline: 1.25rem;
    }

    .hero[b-fzp0c7wf9l] {
        grid-template-columns: 1fr;
        gap: 2rem;
        /* Верхний отступ ужат после появления полосы поддержки: она забрала
           73px, и обе кнопки упирались точно в край экрана. */
        padding-block: 1.6rem 3rem;
    }

    .hero-text h1[b-fzp0c7wf9l],
    .hero-subtitle[b-fzp0c7wf9l] {
        max-width: none;
    }

    .hero-art[b-fzp0c7wf9l] {
        order: 2;
    }

    .hero-art-phone[b-fzp0c7wf9l] {
        max-height: 46vh;
    }

    /* На телефоне ветки нет. Замер на 375px: скриншот занимает 312px из 335
       доступных, ветка целиком уходит под рамку телефона и не видна. Через
       display:none у фонового изображения браузер её ещё и не скачивает,
       то есть мобильный не платит 92 КБ за невидимую картинку. */
    .hero-art[b-fzp0c7wf9l]::before {
        display: none;
    }

    .hero-actions .btn-primary[b-fzp0c7wf9l],
    .hero-actions .btn-secondary[b-fzp0c7wf9l] {
        flex: 1 1 auto;
    }

    .purpose[b-fzp0c7wf9l],
    .how[b-fzp0c7wf9l],
    .features[b-fzp0c7wf9l],
    .download[b-fzp0c7wf9l] {
        padding-block: 2.75rem;
    }

    .roles[b-fzp0c7wf9l] {
        padding-block: 2.75rem 3.5rem;
    }

    .purpose-row[b-fzp0c7wf9l] {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .tracks[b-fzp0c7wf9l] {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* На одной колонке выравнивать низ заголовков незачем. */
    .track h3[b-fzp0c7wf9l] {
        min-height: 0;
    }

    .bento[b-fzp0c7wf9l] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "nev"
            "als"
            "resp"
            "nut"
            "ecas"
            "com"
            "rag"
            "pas"
            "vid";
    }

    .cell-lead[b-fzp0c7wf9l] {
        min-height: 0;
    }

    .cell-shots[b-fzp0c7wf9l] {
        gap: 0.5rem;
    }

    .cell-shot[b-fzp0c7wf9l] {
        width: min(160px, 47%);
    }

    .download-card[b-fzp0c7wf9l] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.75rem 1.35rem;
    }

    /* Колонка значка здесь во всю карточку, поэтому потолок задаём явно:
       10rem — тот же размер, что был у значка Android до появления второй
       карточки, менять его заодно незачем. */
    .download-icon-image[b-fzp0c7wf9l] {
        max-width: 10rem;
    }

    .download-icon-image--square[b-fzp0c7wf9l] {
        max-width: 6.5rem;
    }

    .download-cta[b-fzp0c7wf9l] {
        width: 100%;
    }

    .download-play[b-fzp0c7wf9l] {
        flex: 1 1 100%;
    }

    .role-grid[b-fzp0c7wf9l] {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .section-cta[b-fzp0c7wf9l],
    .how-cta[b-fzp0c7wf9l] {
        width: 100%;
    }

    /* Кнопки блока ролей в столбец: три «пилюли» в ряд на телефоне
       переносятся вразнобой и читаются как случайный набор. */
    .roles-actions[b-fzp0c7wf9l] {
        flex-direction: column;
    }

    .roles-actions .btn-primary[b-fzp0c7wf9l],
    .roles-actions .btn-secondary[b-fzp0c7wf9l] {
        width: 100%;
    }
}

/* ── Уважение к системной настройке анимации ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .btn-primary[b-fzp0c7wf9l],
    .btn-secondary[b-fzp0c7wf9l] {
        transition: none;
    }

    .btn-primary:active[b-fzp0c7wf9l],
    .btn-secondary:active[b-fzp0c7wf9l] {
        transform: none;
    }
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* Политика конфиденциальности — длинный юридический текст.
   Задача стилей одна: читаемость. Ограниченная ширина строки, спокойная
   типографика, без декоративных элементов лендинга.

   Цвета берутся из токенов .public-shell (PublicLayout.razor.css): страница
   делит публичную оболочку с главной, а та поддерживает тёмную тему. С
   захардкоженными светлыми цветами тёмный фон оболочки дал бы тёмный текст
   на тёмном фоне. */

/* Ссылки в тексте политики: глобальный app.css задаёт #006bb7, который на
   тёмном фоне почти не читается. */
.policy a[b-c0gsxxqa2m] {
    color: var(--ln-accent);
}

.policy[b-c0gsxxqa2m] {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
    line-height: 1.7;
    color: var(--ln-text);
}

.policy h1[b-c0gsxxqa2m] {
    font-size: 1.9rem;
    line-height: 1.25;
    margin: 0 0 1.75rem;
}

.policy h2[b-c0gsxxqa2m] {
    font-size: 1.25rem;
    margin: 2.5rem 0 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ln-border);
}

.policy h3[b-c0gsxxqa2m] {
    font-size: 1.05rem;
    margin: 1.5rem 0 0.5rem;
}

.policy p[b-c0gsxxqa2m],
.policy ul[b-c0gsxxqa2m],
.policy ol[b-c0gsxxqa2m] {
    margin: 0 0 1rem;
}

.policy ul[b-c0gsxxqa2m],
.policy ol[b-c0gsxxqa2m] {
    padding-left: 1.35rem;
}

.policy li[b-c0gsxxqa2m] {
    margin-bottom: 0.5rem;
}

/* Реквизиты оператора */
.policy-meta[b-c0gsxxqa2m] {
    display: grid;
    grid-template-columns: minmax(10rem, auto) 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0 0 2rem;
    padding: 1.25rem;
    background: var(--ln-surface-2);
    border-radius: 0.6rem;
}

.policy-meta dt[b-c0gsxxqa2m] {
    font-weight: 600;
    color: var(--ln-text-2);
}

.policy-meta dd[b-c0gsxxqa2m] {
    margin: 0;
}

/* Дисклеймер «не заменяет врача» — самый важный абзац страницы */
.policy-callout[b-c0gsxxqa2m] {
    padding: 1rem 1.25rem;
    background: var(--ln-tint-amber);
    border-left: 3px solid #e0a02a;
    border-radius: 0 0.4rem 0.4rem 0;
}

/* Таблица третьих лиц: на узком экране скроллится сама, страница — нет */
.policy-table-wrap[b-c0gsxxqa2m] {
    overflow-x: auto;
    margin: 0 0 1rem;
}

.policy-table[b-c0gsxxqa2m] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.policy-table th[b-c0gsxxqa2m],
.policy-table td[b-c0gsxxqa2m] {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--ln-border);
    vertical-align: top;
}

.policy-table th[b-c0gsxxqa2m] {
    background: var(--ln-surface-2);
    font-weight: 600;
    white-space: nowrap;
}

.policy-contacts[b-c0gsxxqa2m] {
    font-style: normal;
    padding: 1.25rem;
    background: var(--ln-surface-2);
    border-radius: 0.6rem;
}

@media (max-width: 32rem) {
    .policy-meta[b-c0gsxxqa2m] {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .policy-meta dd[b-c0gsxxqa2m] {
        margin-bottom: 0.6rem;
    }
}
/* /Components/Pages/Publications.razor.rz.scp.css */
/* Страница «Публикации». Карточка устроена как библиографическая запись, а не
   рекламная плитка: авторы, название, издание и ссылка читаются в привычном
   для научного материала порядке. */

.publications[b-ikjwg1nkhb] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 3rem 2rem 5rem;
}

.publications-head[b-ikjwg1nkhb] {
    padding-bottom: 2.25rem;
    border-bottom: 1px solid var(--ln-border);
}

.publications-kicker[b-ikjwg1nkhb] {
    margin: 0 0 0.7rem;
    color: var(--ln-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.publications-head h1[b-ikjwg1nkhb],
.publications-section h2[b-ikjwg1nkhb] {
    color: var(--ln-text);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.publications-head h1[b-ikjwg1nkhb] {
    margin: 0 0 1rem;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.15;
}

.publications-lead[b-ikjwg1nkhb] {
    max-width: 62ch;
    margin: 0;
    color: var(--ln-text-2);
    font-size: 1.12rem;
    line-height: 1.65;
}

.publications-section[b-ikjwg1nkhb] {
    padding-top: 3rem;
}

.publications-section h2[b-ikjwg1nkhb] {
    margin: 0 0 1.25rem;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.publications-list[b-ikjwg1nkhb] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.publication-card[b-ikjwg1nkhb] {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1.75rem;
    padding: 2rem;
    background: var(--ln-surface);
    border: 1px solid var(--ln-border);
    border-radius: var(--ln-radius);
}

.publication-number[b-ikjwg1nkhb] {
    margin: 0;
    color: var(--ln-accent);
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.publication-content[b-ikjwg1nkhb] {
    min-width: 0;
}

.publication-authors[b-ikjwg1nkhb] {
    margin: 0 0 0.8rem;
    color: var(--ln-text-2);
    font-size: 0.96rem;
    line-height: 1.55;
}

.publication-card h3[b-ikjwg1nkhb] {
    max-width: 31ch;
    margin: 0 0 1rem;
    color: var(--ln-text);
    font-size: clamp(1.2rem, 2.3vw, 1.55rem);
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -0.015em;
}

.publication-card cite[b-ikjwg1nkhb] {
    font-style: normal;
}

.publication-source[b-ikjwg1nkhb] {
    margin: 0;
    color: var(--ln-accent);
    font-weight: 700;
    line-height: 1.55;
}

.publication-footer[b-ikjwg1nkhb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.25rem;
    margin-top: 1.75rem;
}

.publication-link[b-ikjwg1nkhb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.65rem 1.1rem;
    background: var(--ln-btn-bg);
    border-radius: 999px;
    color: var(--ln-btn-fg);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--ln-transition), transform var(--ln-transition);
}

.publication-link:hover[b-ikjwg1nkhb] {
    background: var(--ln-btn-bg-hover);
    color: var(--ln-btn-fg);
}

.publication-link:active[b-ikjwg1nkhb] {
    transform: translateY(1px);
}

.publication-link span[b-ikjwg1nkhb] {
    margin-left: 0.45rem;
    font-size: 1.1em;
}

.publication-accessed[b-ikjwg1nkhb] {
    margin: 0;
    color: var(--ln-text-2);
    font-size: 0.88rem;
    line-height: 1.5;
}

a:focus-visible[b-ikjwg1nkhb] {
    outline: 3px solid var(--ln-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (max-width: 780px) {
    .publications[b-ikjwg1nkhb] {
        padding: 2rem 1.25rem 3.5rem;
    }

    .publications-head[b-ikjwg1nkhb] {
        padding-bottom: 1.75rem;
    }

    .publications-section[b-ikjwg1nkhb] {
        padding-top: 2.25rem;
    }

    .publication-card[b-ikjwg1nkhb] {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding: 1.5rem;
    }

    .publication-card h3[b-ikjwg1nkhb] {
        max-width: none;
    }

    .publication-footer[b-ikjwg1nkhb] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.9rem;
    }

    .publication-link[b-ikjwg1nkhb] {
        width: 100%;
    }
}
/* /Components/Pages/Questions.razor.rz.scp.css */
/* Обрамление публичной страницы вопросов: логотип, подпись и центрирование
   на весь экран. Одно действие на экран — человек приходит сюда с вопросом,
   а не изучать сайт. Сама форма живёт в [[RagSearchPanel]] со своими
   стилями: изолированный CSS Blazor не достаёт до чужого компонента. */

.ask[b-rfy8lorpxz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(2rem, 8vh, 5rem) 1rem 4rem;
}

/* Логотип задаёт масштаб странице. Ширина в процентах с потолком: на телефоне
   он не должен съедать высоту, ради которой сюда и пришли. */
.ask-logo[b-rfy8lorpxz] {
    width: min(320px, 70vw);
    height: auto;
    margin-bottom: 0.5rem;
}

.ask-lead[b-rfy8lorpxz] {
    margin: 0 0 1.75rem;
    color: #475569;
    font-size: 1rem;
    text-align: center;
    text-wrap: balance;
}
/* /Components/Shared/LanguageSwitcher.razor.rz.scp.css */
/* Сегментная «пилюля» той же геометрии, что .public-cta и .public-account-link
   в шапке: три элемента в ряду обязаны читаться как один набор, а не как
   три разные кнопки от разных дизайнеров. */
.lang-switch[b-sfuanmbadm] {
    display: inline-flex;
    align-items: center;
    /* Рамка одна на обе половины: внутренняя граница рисуется у второй
       ссылки, поэтому линия между сегментами получается в один пиксель,
       а не в два состыкованных. */
    border: 2px solid var(--ln-border-strong);
    border-radius: 999px;
    overflow: hidden;
    background: var(--ln-surface);
    white-space: nowrap;
    flex: 0 0 auto;
}

.lang-option[b-sfuanmbadm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px — минимальная цель нажатия, принятая на сайте (см. .public-nav a
       в PublicLayout.razor.css): аудитория с нарушением моторики. Здесь
       не 48, потому что у пилюли ещё 2px рамки сверху и снизу. */
    min-height: 44px;
    min-width: 3.5rem;
    padding: 0 0.85rem;
    color: var(--ln-text-2);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--ln-transition), color var(--ln-transition);
}

.lang-option + .lang-option[b-sfuanmbadm] {
    border-left: 2px solid var(--ln-border-strong);
}

.lang-option:hover[b-sfuanmbadm] {
    background: var(--ln-surface-2);
    color: var(--ln-accent);
}

/* Текущий язык — заливкой, а не только цветом текста: разница «активно /
   неактивно» обязана быть видна и при цветовой слепоте, и на выцветшем
   экране телефона на солнце. */
.lang-option.is-active[b-sfuanmbadm] {
    background: var(--ln-btn-bg);
    color: var(--ln-btn-fg);
}

.lang-option.is-active:hover[b-sfuanmbadm] {
    background: var(--ln-btn-bg-hover);
    color: var(--ln-btn-fg);
}

/* Кольцо фокуса внутрь: у сегмента внутри пилюли с overflow:hidden внешнее
   обрезается рамкой и на клавиатуре кнопка выглядит невыбранной. */
.lang-option:focus-visible[b-sfuanmbadm] {
    outline: 3px solid var(--ln-accent);
    outline-offset: -5px;
    border-radius: 999px;
}

/* ── Какой из двух экземпляров показан ────────────────────────────────── */

/* Шапка рисует переключатель дважды — в самой шапке и в конце меню — и прячет
   лишний по ширине окна. Зачем именно так, с замерами, написано в PublicLayout.razor
   у элемента .lang-switch--bar. Порог 1560px общий с остальной шапкой: на нём
   меню переезжает в собственную строку, и именно там появляется место, куда
   переключателю выгоднее встать.

   display:none, а не visibility/opacity: спрятанный экземпляр обязан пропасть
   и из дерева доступности, иначе скринридер объявит два одинаковых
   переключателя языка подряд. */
.lang-switch--menu[b-sfuanmbadm] {
    display: none;
}

/* ── Планшет и телефон ────────────────────────────────────────────────── */

@media (max-width: 1560px) {
    .lang-switch--bar[b-sfuanmbadm] {
        display: none;
    }

    .lang-switch--menu[b-sfuanmbadm] {
        display: inline-flex;
    }

    .lang-option[b-sfuanmbadm] {
        min-width: 2.9rem;
        padding: 0 0.6rem;
        font-size: 0.88rem;
    }
}
/* /Components/Shared/RagSearchPanel.razor.rz.scp.css */
/* Стили панели поиска. Живут здесь, а не на странице: изолированный CSS
   Blazor действует только на разметку своего компонента, и после выноса
   формы в [[RagSearchPanel]] правила из Questions.razor.css перестали до неё
   доставать — поле и кнопки на кабинетной странице остались голыми.

   Аудитория — люди с БАС, у части нарушена точность движений: поле 56 px,
   кнопки 48 px, как на остальном лэндинге. */

.ask-form[b-vtuj6geryi] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* Поле — главный элемент страницы: во всю ширину, крупное, с заметным
   кольцом фокуса. Скругление как у поисковой строки, а не как у полей
   кабинета: здесь это единственное поле, и оно должно читаться как строка
   поиска с первого взгляда. */
.ask-input[b-vtuj6geryi] {
    width: 100%;
    min-height: 56px;
    padding: 0 1.25rem;
    border: 2px solid var(--ln-border-strong, #CBD5E1);
    border-radius: 999px;
    background: var(--ln-surface, #FFFFFF);
    color: inherit;
    font: inherit;
    font-size: 1.0625rem;
}

.ask-input[b-vtuj6geryi]::placeholder {
    color: #94A3B8;
}

.ask-input:focus[b-vtuj6geryi] {
    outline: none;
    border-color: var(--ln-accent, #1E3A8A);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.18);
}

.ask-actions[b-vtuj6geryi] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.ask-btn[b-vtuj6geryi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.75rem;
    border-radius: 999px;
    border: 2px solid transparent;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.ask-btn-primary[b-vtuj6geryi] {
    background: var(--ln-accent, #1E3A8A);
    color: #FFFFFF;
}

.ask-btn-ghost[b-vtuj6geryi] {
    background: var(--ln-surface, #FFFFFF);
    border-color: var(--ln-border-strong, #CBD5E1);
    color: var(--ln-accent, #1E3A8A);
}

.ask-btn:focus-visible[b-vtuj6geryi] {
    outline: 3px solid rgba(30, 58, 138, 0.4);
    outline-offset: 2px;
}

/* Движение только на наведении и нажатии — правило лэндинга; появление
   ничего не анимируем. */
@media (hover: hover) {
    .ask-btn-primary:hover[b-vtuj6geryi] { background: #16306E; }
    .ask-btn-ghost:hover[b-vtuj6geryi] { border-color: var(--ln-accent, #1E3A8A); }
}

.ask-btn:active[b-vtuj6geryi] { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    .ask-btn:active[b-vtuj6geryi] { transform: none; }
}

.ask-note[b-vtuj6geryi] {
    margin: 2rem 0 0;
    color: #475569;
    text-align: center;
}

/* Ответ приходит готовым текстом с абзацами, разделёнными переводами строк.
   pre-line сохраняет их, не превращая текст в моноширинный блок. */
.ask-answer[b-vtuj6geryi] {
    width: 100%;
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--ln-border, #E2E8F0);
    border-radius: var(--ln-radius, 16px);
    background: var(--ln-surface, #FFFFFF);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.ask-answer p[b-vtuj6geryi] {
    margin: 0;
    white-space: pre-line;
    line-height: 1.65;
}

/* Оговорка обязательна: страница отвечает на вопросы о болезни, и человек,
   только что узнавший диагноз, не должен принять справку за назначение. */
.ask-disclaimer[b-vtuj6geryi] {
    width: 100%;
    margin: 1rem 0 0;
    color: #475569;
    font-size: 0.875rem;
}

@media (max-width: 520px) {
    .ask-actions[b-vtuj6geryi] { flex-direction: column; }
    .ask-btn[b-vtuj6geryi] { width: 100%; }
}