/*
 * Оформление главной «Глубина» — единственный стиль.
 *
 * Лист главной белый, а контейнеры — карточка входа и контейнер
 * модулей — плотная тёмно-синяя заливка #143254 (PANTONE 295 C, образец владельца)
 * без узора. Внутри — белый текст, плитки модулей прозрачные (стекло), иконка —
 * сплошная фишка цвета домена. Прокручиваются только плитки (.hx-panel__body); заголовок и подвал
 * контейнера (вход, внешние ссылки) стоят на месте.
 *
 * Светлые токены текста внутри тёмных плит задаются на .hx-glass, поэтому блоки под
 * сценой (реестр) читаются сами; лист, сфера, заголовок героя и сегмент стадий —
 * светлые, как в базе. Шапка тёмно-синяя на всех страницах — это в site-chrome.css; карточка
 * содержимого внутренних страниц не трогается.
 *
 * Лист грузится последним, после home-redesign.css: при равной специфичности
 * побеждает он.
 */

/* ─────────────────────────── Лист белый, контейнеры тёмно-синие ─────────────────────────── */

/*
 * Лист главной чисто белый: аврора, сетка точек и блик выключены — они подкрашивали
 * поле серо-голубым. Остаются сфера систем (канвас) и пульсирующие кольца вокруг неё.
 */
.body-wrapper--home { background: #fff; }
body.hx-chrome:has(.body-wrapper--home) { --hx-paper: #fff; background: #fff; }
.body-wrapper--home .hx-stage__aurora,
.body-wrapper--home .hx-stage__dots,
.body-wrapper--home .hx-stage__spot { display: none; }
.body-wrapper--home .hx {
    --hx-paper: #fff;
    --hx-dot: rgba(20, 50, 84, .16);
    --hx-r-card: 30px;
    --hx-r-tile: 18px;
    --hx-r-ic: 14px;
}

/* Токены контейнера — глобально: панель модулей открывается и в модальном меню на внутренних страницах. */
.hx, body.hx-chrome {
    --hx-deep: #143254;
    --hx-deep-2: #1F3C62;
    --hx-on: #fff;
    --hx-on-2: rgba(255, 255, 255, .74);
    --hx-on-line: rgba(255, 255, 255, .14);
    --hx-on-fill: rgba(255, 255, 255, .07);
    --hx-on-fill-2: rgba(255, 255, 255, .13);
}

/*
 * Внутри любой тёмно-синей плиты (.hx-glass: карточка входа, контейнер модулей,
 * блоки реестра под сценой) токены текста и линий переопределяются на светлые —
 * пользовательские свойства наследуются, и всё содержимое читается без правок.
 */
.hx-glass {
    --hx-ink: #fff;
    --hx-ink-2: rgba(255, 255, 255, .78);
    --hx-ink-3: rgba(255, 255, 255, .6);
    --hx-line: rgba(255, 255, 255, .12);
    --hx-line-2: rgba(255, 255, 255, .22);
    --hx-sheet: #1F3C62;
    --hx-sheet-2: #1F3C62;
    --hx-surface: #1F3C62;
    --hx-brand: #9CC3FF;
    --hx-brand-2: #BFD8FF;
    --hx-brand-soft: rgba(255, 255, 255, .12);
    --hx-card-glass: rgba(255, 255, 255, .1);
    color: var(--hx-ink);
    background: var(--hx-deep);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 44px -28px rgba(20, 50, 84, .55);
}

/* ─────────────────────────── Контейнеры: живой тёмно-синий фон ─────────────────────────── */

/* Позиционирование не трогаем: карточка гостя абсолютная (центр сферы), контейнеру хватает relative. */
.hx-panel { position: relative; }
.hx-hero__card, .hx-panel {
    isolation: isolate;
    overflow: hidden;
    color: var(--hx-on);
    background: var(--hx-deep);
    border: 1px solid rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 34px 64px -30px rgba(20, 50, 84, .7), 0 12px 24px -16px rgba(20, 50, 84, .45);
}

.hx-hero__card::before, .hx-hero__card::after,
.hx-panel::before, .hx-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
}

/* Заливка плотная, без узора: ни градиента с сеткой, ни точек и потоков (владелец счёл их «фоном-картинкой»). */
.hx-hero__card::before, .hx-panel::before, .hx-hero__card::after, .hx-panel::after { display: none; }

/* Точки трёх цветов и вертикальные потоки со свечением: мерцают и медленно плывут. */
.hx-hero__card::after, .hx-panel::after {
    inset: -60px;
    background-image:
        radial-gradient(circle, #3b82f6 0 2px, transparent 3px),
        radial-gradient(circle, #8b5cf6 0 2px, transparent 3px),
        radial-gradient(circle, rgba(6, 182, 212, .95) 0 3px, rgba(6, 182, 212, .28) 6px, transparent 10px),
        linear-gradient(180deg, transparent 0 42%, rgba(59, 130, 246, .85) 50%, transparent 58% 100%),
        linear-gradient(180deg, transparent 0 42%, rgba(139, 92, 246, .85) 50%, transparent 58% 100%),
        linear-gradient(180deg, transparent 0 42%, rgba(6, 182, 212, .85) 50%, transparent 58% 100%);
    background-size: 210px 170px, 260px 210px, 340px 290px, 2px 180px, 2px 220px, 2px 200px;
    background-position: 30px 40px, 120px 110px, 210px 150px, 12% 0, 46% 30px, 82% 60px;
    background-repeat: repeat, repeat, repeat, repeat-y, repeat-y, repeat-y;
    opacity: .55;
    animation: hx-deep-twinkle 7s ease-in-out infinite alternate, hx-deep-drift 26s ease-in-out infinite alternate;
}

@keyframes hx-deep-twinkle { from { opacity: .45; } to { opacity: 1; } }
@keyframes hx-deep-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-24px, 40px, 0); } }

/* ─────────────────────────── Контейнер модулей: шапка и подвал стоят, плитки прокручиваются ─────────────────────────── */

.hx-stage__panel { max-height: none; overflow: visible; }
/* Контейнер шире (1400px, см. .hx-stage__panel и .hx-menu__dialog), а плитки и отступы — прежние: так внутри помещается больше. */
.hx-panel { display: flex; flex-direction: column; max-height: calc(100vh - 190px); padding: 40px 46px 34px; }
/*
 * У авторизованного контейнер не ограничен высотой экрана: сцена статична, панель растёт
 * по содержимому, а прокручивается вся страница — так все модули видны без внутренней прокрутки.
 */
.hx-scene--modules { height: auto; }
.hx-scene--modules .hx-stage { position: relative; height: auto; min-height: calc(100vh - 64px); padding: 44px 0 64px; overflow: hidden; }
.hx-scene--modules .hx-stage__panel { position: relative; left: auto; top: auto; width: min(1400px, calc(100% - 64px)); margin: 0 auto; transform: none; }
.hx-scene--modules .hx-stage[data-stage="modules"] .hx-stage__panel { transform: none; }
.hx-scene--modules .hx-panel { max-height: none; }
.hx-scene--modules .hx-panel__body { overflow: visible; }
.hx-panel__head, .hx-panel__foot { flex: none; }
.hx-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: 26px; }
/* Поиск по модулям — стекло на синем, растягивается между заголовком и ссылками. */
.hx-search { position: relative; display: flex; flex: 1 1 280px; max-width: 480px; margin-right: auto; } /* первый элемент шапки, прижат влево */
.hx-search .hx-ic { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: rgba(255, 255, 255, .6); pointer-events: none; }
.hx .hx-search input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color var(--hx-d-fast) var(--hx-e-out), background var(--hx-d-fast) var(--hx-e-out), box-shadow var(--hx-d-fast) var(--hx-e-out);
}
.hx .hx-search input::placeholder { color: rgba(255, 255, 255, .6); }
.hx .hx-search input:focus { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.hx .hx-search input::-webkit-search-cancel-button { filter: invert(1); }
.hx-search__empty { grid-column: 1 / -1; margin: 0; padding: 22px 0; text-align: center; font-size: 15px; color: rgba(255, 255, 255, .72); }
/* Внешние ресурсы — ссылки в шапке контейнера: подчёркнуты, со стрелкой «во внешний мир». */
.hx-panel__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; }
.hx .hx-panel__links a { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .9); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px; transition: color var(--hx-d-fast) var(--hx-e-out), text-decoration-color var(--hx-d-fast) var(--hx-e-out); }
.hx .hx-panel__links a:hover { color: #fff; text-decoration-color: #fff; }
.hx-panel__links .hx-ic { width: 13px; height: 13px; }
.hx-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 -12px;
    padding: 2px 12px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.hx-panel__body::-webkit-scrollbar { width: 6px; }
.hx-panel__body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 3px; }
/* «Начать работу» — мягкое свечение и пульсирующее кольцо: только transform/opacity, при reduced-motion остаётся статичное свечение. */
.hx .hx-btn--pulse { position: relative; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 0 30px rgba(255, 255, 255, .42), 0 14px 30px -12px rgba(0, 0, 0, .5); }
.hx .hx-btn--pulse::before { content: ''; position: absolute; inset: -3px; border: 2px solid rgba(255, 255, 255, .75); border-radius: inherit; opacity: 0; pointer-events: none; animation: hx-pulse 2.4s ease-out infinite; }
@keyframes hx-pulse { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.24); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hx .hx-btn--pulse::before { animation: none; } }
.hx-panel__foot { justify-content: flex-end; margin-top: 24px; padding-top: 22px; gap: 18px; } /* «Начать работу» — справа, по просьбе владельца */

/*
 * Плитки — четыре в ряд, одной высоты; стрелка и счётчик прижаты к правому краю
 * абсолютно, чтобы текст занимал всю ширину и не переносился без нужды.
 * Все плитки одной ширины: последний неполный ряд не растягивается (замечание заказчика к «Оптимизации ИС»).
 */
.hx-hero__card { padding: 42px 56px 38px; gap: 22px; }
.hx-mods { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hx-mod { position: relative; gap: 14px; min-height: 104px; padding: 18px 40px 18px 18px; }
.hx-mod__txt { flex: 1 1 auto; min-width: 0; }
.hx-mod__ic { width: 46px; height: 46px; }
.hx-mod__ic svg { width: 22px; height: 22px; }
/* Названия модулей — самое жирное начертание: белый текст на тёмной плитке при 700 выглядит тонко. */
.hx-mod__name { font-size: 15px; font-weight: 800; line-height: 1.25; }
/* Длинные слова («телекоммуникационная») переносятся по слогам внутри плитки, а не вылезают за край на стрелку. */
.hx-mod__name, .hx-mod__sub { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.hx-mod__sub { margin-top: 3px; font-size: 13px; letter-spacing: 0; color: rgba(255, 255, 255, .74); }
.hx-mod__arrow, .hx-mod__count { position: absolute; right: 14px; top: 50%; margin: 0; transform: translateY(-50%); }
/* На широком экране контейнер 1400px вмещает пять плиток прежней ширины. */
@media (min-width: 1464px) { .hx-mods { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Полоса «Настроить» и режим правки порядка — тёмная тема контейнера. */
.hx .hx-panel__customize { min-width: 0; min-height: 0; color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .28); background: transparent; }
.hx .hx-panel__customize:hover, .hx .hx-panel__customize:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .08); }
.hx .hx-panel__customize[aria-pressed="true"] { color: #fff; border-color: #fff; }
.hx-panel__bar-hint, .hx-panel__bar-status { color: rgba(255, 255, 255, .72); }
.hx .hx-panel__bar .hx-btn--sm { height: 34px; padding: 0 14px; font-size: 13px; }
.hx-panel[data-hx-edit] .hx-mod { border-style: dashed; border-color: rgba(255, 255, 255, .45); }
/* Плитки подмодулей, найденных поиском, дорисовываются в конец сетки — без растяжки последней. */
.hx-mods > .hx-mod.hx-mod--found:last-child { grid-column: auto; }
.hx-mod--found .hx-mod__path::before { content: '↳ '; opacity: .7; }
@media (max-width: 1240px) {
    .hx-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hx-mods > .hx-mod:last-child:nth-child(4n + 3) { grid-column: auto; }
}
@media (max-width: 900px) {
    .hx-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx-mods > .hx-mod:last-child:nth-child(3n + 1) { grid-column: auto; }
}
@media (max-width: 520px) { .hx-mods { grid-template-columns: 1fr; } .hx-mods > .hx-mod:last-child { grid-column: auto; } }

/* Декор под открытым контейнером — тише: обрывки сферы и точки не спорят с плитками. */
.hx-stage__canvas, .hx-stage__bg { transition: opacity .6s var(--hx-e-out); }
.hx-stage[data-stage="modules"] .hx-stage__canvas, .hx-stage[data-stage="modules"] .hx-stage__bg { opacity: .55; }

/* Внешние ссылки в подвале — текстовые, легче кнопки «Авторизация». */
.hx .hx-panel__foot .hx-ext a { padding: 4px 2px; background: transparent; border: 0; color: rgba(255, 255, 255, .75); font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color var(--hx-d-fast) var(--hx-e-out), text-decoration-color var(--hx-d-fast) var(--hx-e-out); }
.hx .hx-panel__foot .hx-ext a:hover { background: transparent; border: 0; color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
.hx-panel .hx-req { margin-top: 24px; padding: 20px 24px; gap: 16px; }

/*
 * Типографика — одна шкала (×1.25): подпись 12 → подзаголовок плитки 13 → текст
 * плитки 15 → подпись карточки 20 → «Модули» 28 → заголовок героя ≤ 52.
 * Трекинг заголовка мягкий (−.015em): при чёрном начертании кириллица иначе слипается.
 */
.hx-hero__title { font-size: clamp(2rem, 1rem + 3vw, 3.25rem); letter-spacing: -.015em; }
.hx-panel__title, .hx-hero__lead { color: var(--hx-on); }
.hx-panel__title { font-size: 28px; }
.hx-hero__lead { max-width: 620px; font-size: 20px; font-weight: 400; line-height: 1.4; }
.hx-hero__cta { gap: 14px; }
/* Кнопка — один компонент и в карточке входа, и в подвале контейнера. */
.hx .hx-hero__card .hx-btn, .hx .hx-panel__foot .hx-btn { height: 48px; padding: 0 26px; font-size: 15px; font-weight: 600; }
.hx .hx-hero__card .hx-btn .hx-ic, .hx .hx-panel__foot .hx-btn .hx-ic { width: 17px; height: 17px; }
.hx-panel__foot .hx-label { color: rgba(255, 255, 255, .7); }

.hx-panel__title { font-weight: 800; letter-spacing: -.02em; }

/* ─────────────────────────── Плитки модулей: стекло, цветная иконка ─────────────────────────── */

.hx .hx-mod, .hx .hx-mod:hover { color: var(--hx-on); }
.hx-mod {
    background: var(--hx-on-fill);
    border: 1px solid var(--hx-on-line);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.hx-mod:hover {
    transform: translateY(-2px);
    background: var(--hx-on-fill-2);
    border-color: rgba(255, 255, 255, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 32px -18px rgba(0, 0, 0, .65);
}
.hx-mod:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hx-mod__ic {
    background: var(--hx-dc, #3b82f6);
    border: 0;
    color: #fff;
    box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--hx-dc, #3b82f6) 75%, transparent);
}
.hx-mod__sub, .hx-mod__arrow { color: var(--hx-on-2); }
.hx-mod:hover .hx-mod__arrow { color: #fff; }
.hx-mod__count { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; }

/* Блок запроса роли, подвал контейнера, возврат из подмодулей, фишка домена. */
.hx-panel .hx-req { background: var(--hx-on-fill); border-color: rgba(255, 255, 255, .3); color: #fff; }
.hx-req__chips span { border-color: rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .88); }
.hx-panel__foot { border-top-color: var(--hx-on-line); }
.hx .hx-panel__foot, .hx .hx-panel__foot a { color: #fff; }
.hx .hx-panel__foot a { background: var(--hx-on-fill); border-color: var(--hx-on-line); }
.hx .hx-panel__foot a:hover { background: rgba(255, 255, 255, .2); border-color: #fff; color: #fff; }
.hx .hx-panel__back { background: #fff; border-color: #fff; color: var(--hx-deep); }
.hx .hx-dchip { background: rgba(255, 255, 255, .18); color: #fff; }

/* Кнопки на синих поверхностях: главная — белая, вторая — белый контур. */
.hx .hx-hero__card .hx-btn--solid, .hx .hx-panel .hx-btn--solid { background: #fff; color: var(--hx-deep); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6); }
.hx .hx-hero__card .hx-btn--solid:hover, .hx .hx-panel .hx-btn--solid:hover { background: #EEF3FF; color: var(--hx-deep); filter: none; transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .65); }
.hx .hx-hero__card .hx-btn--ghost, .hx .hx-panel .hx-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.hx .hx-hero__card .hx-btn--ghost:hover, .hx .hx-panel .hx-btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.hx .hx-btn:active { transform: translateY(1px) scale(.985); transition-duration: 60ms; }
.hx-mod:active { transform: translateY(0) scale(.99); transition-duration: 60ms; }

@media (max-width: 860px) {
    .hx-hero__card { padding: 30px 24px 28px; }
    .hx-panel { padding: 28px 22px 26px; max-height: none; }
    .hx-panel__body { overflow: visible; margin: 0; padding: 0; }
    .hx-mods { gap: 12px; }
    .hx-mod { padding: 16px 18px; min-height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
    .hx-hero__card::before, .hx-hero__card::after, .hx-panel::before, .hx-panel::after { animation: none; }
    .hx-mod:hover, .hx .hx-btn:hover, .hx .hx-btn:active, .hx-mod:active { transform: none; }
}

/*
 * Блок «Ещё N модулей после назначения роли»: свёрнут до одной строки (details/summary),
 * раскрывается по нажатию — таблетки модулей и кнопка «Запросить роль» слева под ними.
 */
.hx-panel .hx-req { display: block; padding: 0; gap: 0; }
.hx-req__head { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 22px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #fff; cursor: pointer; list-style: none; border-radius: inherit; }
.hx-req__head::-webkit-details-marker { display: none; }
.hx-req__head:hover { background: rgba(255, 255, 255, .05); }
.hx-req__head:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.hx-req__head .hx-ic { width: 18px; height: 18px; flex: none; color: rgba(255, 255, 255, .75); }
.hx-req__chev { width: 18px; height: 18px; flex: none; margin-left: auto; fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--hx-d-fast, .15s) ease; }
.hx-req[open] .hx-req__chev { transform: rotate(180deg); }
.hx-req__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 2px 22px 20px; }
.hx-req__chips { gap: 8px; }
.hx-req__chips span { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; font-size: 13px; }
.hx .hx-panel .hx-req__action { height: 38px; padding: 0 18px; font-size: 13.5px; }