/*
 * «Новинки EXOTAG» — стили модуля для exoarena.ru.
 *
 * Дизайн-система EXOArena: тёмная поверхность #161920, заголовки Jura,
 * текст Rubik (оба шрифта уже подключает тема через app.css), фирменный
 * градиент циан → синий → фиолетовый, кнопки-«пилюли», глоу вместо теней.
 *
 * Всё скоуплено префиксом .exn-. У темы exo-arena глобальных правил на
 * h2/h3/ul нет, но есть два, которые бьют по чужой вёрстке в светлой теме:
 *   .white--theme p, .white--theme h1…h6 { color:#161920 }  — (0,1,1)
 * Поэтому все цвета текста на p/h заданы селекторами не ниже (0,2,0).
 */

/*
 * Токены объявлены на всех корнях: панель, затемнение и шторка переносятся
 * в document.body и перестают быть потомками .exn-root.
 *
 * Тема окон: .exn-t-dark — всегда тёмная, .exn-t-light — всегда светлая,
 * .exn-t-auto — следует переключателю сайта (body.white--theme).
 */
.exn-root,
.exn-backdrop,
.exn-panel,
.exn-sheet {
    --exn-ink: #161920;
    --exn-surface: #161920;
    --exn-raised: #1E222C;
    --exn-hover: rgba(255, 255, 255, .045);
    --exn-line: rgba(241, 241, 241, .08);
    --exn-text: #FFFFFF;
    --exn-muted: #A0ADCC;
    --exn-faint: #7D88A3;
    --exn-cyan: #05F7F1;
    --exn-accent: #05F7F1;
    --exn-blue: #308DFF;
    --exn-blue-hover: #53A4FF;
    --exn-violet: #722BE3;
    --exn-grad: linear-gradient(90deg, #05F7F1 0%, #308DFF 44%, #722BE3 100%);
    --exn-grad-diag: linear-gradient(135deg, #05F7F1 0%, #308DFF 44%, #722BE3 100%);
    --exn-skeleton: rgba(255, 255, 255, .07);
    --exn-backdrop: rgba(8, 10, 16, .72);
    --exn-glow: 0 0 24px rgba(5, 247, 241, .35);
    --exn-shadow: 0 24px 60px rgba(0, 0, 0, .55);
    --exn-ease: cubic-bezier(.22, 1, .36, 1);
    --exn-display: 'Jura', 'Rubik', -apple-system, 'Segoe UI', Arial, sans-serif;
    --exn-font: 'Rubik', -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* Светлая палитра: бирюза на белом даёт 1.4:1, поэтому акцент — #097687 (5.3:1). */
.exn-t-light,
body.white--theme .exn-t-auto {
    --exn-surface: #FFFFFF;
    --exn-raised: #F5F8FC;
    --exn-hover: #F2F6FB;
    --exn-line: #E1E8F2;
    --exn-text: #161920;
    --exn-muted: #5A6478;
    --exn-faint: #6B7488;
    --exn-accent: #097687;
    --exn-grad: linear-gradient(90deg, #097687 0%, #308DFF 44%, #722BE3 100%);
    --exn-grad-diag: linear-gradient(135deg, #097687 0%, #308DFF 44%, #722BE3 100%);
    --exn-skeleton: #EBF0F6;
    --exn-backdrop: rgba(22, 25, 32, .55);
    --exn-glow: 0 0 22px rgba(48, 141, 255, .28);
    --exn-shadow: 0 24px 60px rgba(22, 25, 32, .22);
}

/* ---------------- триггер (desktop: шторка слева) ---------------- */

.exn-trigger {
    position: fixed;
    left: 0;
    /* Привязка к середине экрана, отступ — сдвиг вверх от центра.
       Центрируем через `translate`, а не `transform`: последний занят hover. */
    top: calc(50% - var(--exn-desktop-offset, 80px));
    translate: 0 -50%;
    z-index: var(--exn-z-trigger, 99990);
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-width: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0 16px 16px 0;
    background: linear-gradient(180deg, #05F7F1 0%, #308DFF 46%, #722BE3 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 10px 28px rgba(48, 141, 255, .35);
    color: #fff;
    font-family: var(--exn-display);
    cursor: pointer;
    opacity: 0;
    transition: opacity 220ms var(--exn-ease), transform 160ms var(--exn-ease), box-shadow 220ms var(--exn-ease);
}

.exn-trigger.is-ready { opacity: 1; }
.exn-trigger[hidden] { display: none; }

.exn-trigger:hover {
    transform: translateX(3px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 0 28px rgba(5, 247, 241, .55);
}

.exn-trigger:focus-visible { outline: 3px solid rgba(5, 247, 241, .6); outline-offset: 3px; }
.exn-trigger:active { transform: scale(.97); transition-duration: 80ms; }

.exn-trigger__desktop {
    display: block;
    padding: 20px 12px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font: 700 15px/1 var(--exn-display);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Белый на светлом верху градиента — тень даёт читаемость. */
    text-shadow: 0 1px 2px rgba(0, 30, 60, .45);
}

.exn-trigger__mobile { display: none; }

/* При открытой панели шторка не нужна, а поверх окон темы — мешает. */
.exn-open .exn-trigger,
.exn-input-focus .exn-trigger,
body:has(.modal.open) .exn-trigger,
body:has(.mobnav.open) .exn-trigger { opacity: 0; pointer-events: none; }

/* ---------------- затемнение ---------------- */

.exn-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--exn-z-backdrop, 100010);
    background: var(--exn-backdrop);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 200ms var(--exn-ease);
}

.exn-backdrop.is-visible { opacity: 1; }
.exn-backdrop[hidden] { display: none; }

/* ---------------- панель ---------------- */

.exn-panel {
    position: fixed;
    left: 24px;
    top: 36px;
    bottom: 36px;
    z-index: var(--exn-z-panel, 100020);
    display: flex;
    flex-direction: column;
    width: 460px;
    max-width: calc(100vw - 32px);
    max-height: 90vh;
    margin: auto 0;
    border: 1px solid var(--exn-line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--exn-surface);
    box-shadow: var(--exn-shadow);
    font-family: var(--exn-font);
    color: var(--exn-text);
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity 240ms var(--exn-ease), transform 240ms var(--exn-ease);
}

.exn-panel.is-visible { opacity: 1; transform: none; }
.exn-panel[hidden] { display: none; }

.exn-panel__head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 0 0 auto;
    padding: 22px 20px 20px;
    background: var(--exn-surface);
}

/* Фирменная линия-градиент под шапкой панели. */
.exn-panel__head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--exn-grad);
}

.exn-panel__titles { flex: 1; min-width: 0; }

.exn-panel .exn-panel__title {
    margin: 0;
    padding: 0;
    font: 700 26px/1.05 var(--exn-display);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--exn-text);
}

.exn-panel .exn-panel__subtitle {
    margin: 8px 0 0;
    font: 400 14px/1.4 var(--exn-font);
    color: var(--exn-muted);
}

.exn-close,
.exn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 16px 0 12px;
    border: 1px solid var(--exn-line);
    border-radius: 1000px;
    background: transparent;
    color: var(--exn-text);
    font: 500 14px/1 var(--exn-font);
    cursor: pointer;
    transition: background 160ms var(--exn-ease), border-color 160ms var(--exn-ease), color 160ms var(--exn-ease);
}

/* margin-left:auto — в подробном материале заголовков нет, и без него
   крестик прилипал бы к «Назад». */
.exn-close { flex: 0 0 44px; margin-left: auto; padding: 0; }
.exn-close:hover,
.exn-back:hover { border-color: var(--exn-accent); color: var(--exn-accent); }
.exn-close:focus-visible,
.exn-back:focus-visible { outline: 3px solid rgba(5, 247, 241, .45); outline-offset: 2px; }
.exn-back[hidden] { display: none; }

.exn-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--exn-line) transparent;
    animation: exn-fade 180ms var(--exn-ease);
}

@keyframes exn-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ---------------- список ---------------- */

.exn-list { display: flex; flex-direction: column; padding: 8px 0 0; }

.exn-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 14px 20px;
    border: 0;
    border-bottom: 1px solid var(--exn-line);
    background: transparent;
    text-align: left;
    text-decoration: none;
    color: inherit;
    font-family: var(--exn-font);
    cursor: pointer;
    transition: background 160ms var(--exn-ease);
}

.exn-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--exn-grad-diag);
    opacity: 0;
    transition: opacity 160ms var(--exn-ease);
}

.exn-card:hover { background: var(--exn-hover); }
.exn-card:hover::before { opacity: 1; }
.exn-card:focus-visible { outline: 3px solid rgba(5, 247, 241, .45); outline-offset: -3px; }
.exn-card:active { transform: scale(.995); }

.exn-card__thumb {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--exn-raised);
}

.exn-card__thumb--empty {
    display: block;
    background: var(--exn-grad-diag);
    opacity: .35;
}

.exn-card__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.exn-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 700 18px/1.15 var(--exn-display);
    color: var(--exn-text);
    overflow-wrap: anywhere;
}

.exn-card__subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font: 400 14px/1.4 var(--exn-font);
    color: var(--exn-muted);
    overflow-wrap: anywhere;
}

.exn-card__date { font: 400 12px/1 var(--exn-font); color: var(--exn-faint); }

.exn-card__icon {
    flex: 0 0 auto;
    align-self: center;
    color: var(--exn-accent);
    transition: transform 160ms var(--exn-ease);
}

.exn-card:hover .exn-card__icon { transform: translateX(2px); }
.exn-card__icon--ext { color: var(--exn-muted); }

.exn-badge {
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 1000px;
    font: 700 11px/1 var(--exn-font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}

.exn-panel .exn-list__end {
    margin: 0;
    padding: 18px 20px 22px;
    text-align: center;
    font: 400 13px/1.4 var(--exn-font);
    color: var(--exn-faint);
}

/* ---------------- загрузка и ошибка ---------------- */

.exn-skeleton { display: flex; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--exn-line); }

.exn-skeleton__thumb {
    flex: 0 0 96px;
    height: 96px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--exn-skeleton) 0%, rgba(255, 255, 255, .12) 40%, var(--exn-skeleton) 80%);
    background-size: 400px 100%;
    animation: exn-shimmer 1.2s linear infinite;
}

.exn-skeleton__lines { display: flex; flex-direction: column; gap: 10px; flex: 1; padding-top: 4px; }
.exn-skeleton__lines i { display: block; height: 14px; border-radius: 1000px; background: var(--exn-skeleton); }
.exn-skeleton__lines i:first-child { height: 18px; }
.exn-skeleton__lines i:last-child { width: 45%; }

@keyframes exn-shimmer {
    from { background-position: -200px 0; }
    to { background-position: 400px 0; }
}

.exn-panel .exn-status,
.exn-sheet .exn-status {
    margin: 0;
    padding: 20px;
    text-align: center;
    font: 400 14px/1.4 var(--exn-font);
    color: var(--exn-muted);
}

.exn-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 32px;
    text-align: center;
}

.exn-error__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 7, 3, .12);
    color: #FF4D4A;
}

.exn-panel .exn-error h3 { margin: 0; font: 700 22px/1.15 var(--exn-display); text-transform: uppercase; color: var(--exn-text); }
.exn-panel .exn-error p { margin: 0; font: 400 15px/1.55 var(--exn-font); color: var(--exn-muted); }

.exn-retry,
.exn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 1000px;
    background: var(--exn-blue);
    color: #fff;
    font: 500 16px/1 var(--exn-font);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 160ms var(--exn-ease), transform 160ms var(--exn-ease), box-shadow 160ms var(--exn-ease);
}

.exn-retry:hover,
.exn-cta:hover { background: var(--exn-blue-hover); box-shadow: 0 0 24px rgba(48, 141, 255, .45); transform: translateY(-1px); }
.exn-retry:active,
.exn-cta:active { background: #2374D9; transform: none; }
.exn-retry:focus-visible,
.exn-cta:focus-visible { outline: 3px solid rgba(5, 247, 241, .5); outline-offset: 2px; }

/* ---------------- подробный материал ---------------- */

.exn-detail { display: flex; flex-direction: column; }
.exn-detail__cover { width: 100%; height: 190px; object-fit: cover; display: block; }
.exn-detail__head { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 0; }
.exn-detail__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.exn-detail__date { font: 400 13px/1 var(--exn-font); color: var(--exn-faint); }

.exn-panel .exn-detail__title {
    margin: 0;
    font: 700 28px/1.05 var(--exn-display);
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--exn-text);
}

.exn-detail__body { padding: 16px 20px 20px; font: 400 15px/1.6 var(--exn-font); color: var(--exn-text); }
.exn-panel .exn-detail__body p { margin: 0 0 12px; color: var(--exn-text); opacity: .88; }
.exn-panel .exn-detail__body h3,
.exn-panel .exn-detail__body h4 { margin: 18px 0 8px; font: 700 18px/1.2 var(--exn-display); text-transform: uppercase; color: var(--exn-text); }
.exn-detail__body ul,
.exn-detail__body ol { margin: 0 0 12px; padding-left: 20px; }
.exn-detail__body li { margin-bottom: 6px; }
.exn-detail__body li::marker { color: var(--exn-accent); }
.exn-detail__body a { color: var(--exn-blue); }
.exn-detail__body a:hover { text-decoration: underline; }
.exn-detail__body blockquote { margin: 0 0 12px; padding: 4px 0 4px 14px; border-left: 3px solid var(--exn-accent); color: var(--exn-muted); }

.exn-detail__cta {
    position: sticky;
    bottom: 0;
    padding: 14px 20px 16px;
    border-top: 1px solid var(--exn-line);
    background: var(--exn-surface);
}

.exn-cta { display: flex; width: 100%; box-sizing: border-box; }

.exn-detail--missing { padding: 40px 20px; text-align: center; color: var(--exn-muted); }

/* ---------------- галерея ---------------- */

.exn-gallery { position: relative; margin: 16px 20px 0; }

.exn-gallery__stage {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: 16px;
    touch-action: pan-x pan-y;
}

.exn-gallery__stage::-webkit-scrollbar { display: none; }
.exn-gallery__stage:focus-visible { outline: 3px solid rgba(5, 247, 241, .5); outline-offset: 2px; }

.exn-gallery__slide {
    position: relative;
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}

.exn-gallery__slide img { display: block; width: 100%; height: 250px; object-fit: cover; }

.exn-gallery__slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(22, 25, 32, .9), rgba(22, 25, 32, 0));
    font: 400 13px/1.4 var(--exn-font);
    color: #fff;
}

.exn-gallery__counter {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: var(--exn-z-gallery, 100030);
    padding: 7px 11px;
    border-radius: 1000px;
    background: rgba(22, 25, 32, .72);
    font: 500 12px/1 var(--exn-font);
    color: #fff;
}

.exn-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--exn-z-gallery, 100030);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(22, 25, 32, .72);
    color: #fff;
    cursor: pointer;
    transition: border-color 160ms var(--exn-ease), color 160ms var(--exn-ease);
}

.exn-gallery__nav:hover { border-color: #05F7F1; color: #05F7F1; }
.exn-gallery__nav:disabled { opacity: .3; cursor: default; }
.exn-gallery__nav:focus-visible { outline: 3px solid rgba(5, 247, 241, .5); outline-offset: 2px; }
.exn-gallery__nav--prev { left: 12px; }
.exn-gallery__nav--next { right: 12px; }

.exn-gallery__dots { display: flex; justify-content: center; gap: 6px; padding: 14px 0 0; }
.exn-gallery__dots span { width: 7px; height: 7px; border-radius: 1000px; background: var(--exn-line); transition: width 160ms var(--exn-ease); }
.exn-gallery__dots span.is-active { width: 22px; background: var(--exn-grad); }

/* ---------------- блокировка прокрутки ---------------- */

html.exn-locked { overflow: hidden; }
html.exn-locked body { position: fixed; width: 100%; overflow: hidden; }

/* ---------------- планшет ---------------- */

@media (max-width: 1024px) {
    .exn-panel { width: 420px; }
}

/* ---------------- мобильные ---------------- */

@media (max-width: 767px) {
    .exn-trigger {
        left: 16px;
        top: auto;
        translate: none;
        bottom: calc(var(--exn-mobile-offset, 28px) + env(safe-area-inset-bottom, 0px));
        width: 80px;
        height: 80px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 0 8px;
        border-radius: 20px;
        background: linear-gradient(140deg, #05F7F1 0%, #308DFF 45%, #722BE3 100%);
    }

    .exn-trigger:hover { transform: none; }
    .exn-trigger__desktop { display: none; }

    .exn-trigger__mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .exn-trigger__mobile span {
        font: 700 12px/14px var(--exn-display);
        letter-spacing: .04em;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 30, 60, .45);
    }

    .exn-panel {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        margin: 0;
        border-width: 1px 0 0;
        border-radius: 20px 20px 0 0;
        transform: translateY(16px);
        transition-duration: 260ms;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .exn-panel.is-visible { transform: none; }
    .exn-panel__head { padding: 18px 16px 16px; }
    .exn-panel .exn-panel__title { font-size: 22px; }

    .exn-card { padding: 12px 16px; gap: 12px; }
    .exn-card__thumb { flex-basis: 84px; width: 84px; height: 84px; }
    .exn-card__title { font-size: 17px; }

    .exn-gallery { margin: 16px 16px 0; }
    .exn-gallery__slide img { height: 220px; }
    /* На тач-устройствах листаем свайпом — стрелки только занимают место. */
    .exn-gallery__nav { display: none; }
}

/* ================================================================
   v2: нижнее меню (только мобильный). Desktop не меняется.
   ================================================================ */

.exn-nav[hidden],
.exn-sheet[hidden] { display: none !important; }

@media (max-width: 767px) {
    /* Плавающая кнопка «Новинки» в v2 становится пунктом меню. */
    .exn-root--v2 .exn-trigger { display: none !important; }

    /* Тёмное по умолчанию, как сам сайт; светлое — по теме сайта или настройке. */
    .exn-nav {
        --exn-nav-bg: rgba(22, 25, 32, .96);
        --exn-nav-ring: #161920;
        --exn-nav-fg: #8C97B3;
        --exn-nav-fg-active: #FFFFFF;
        --exn-nav-line: rgba(241, 241, 241, .08);
        --exn-nav-accent: #05F7F1;
        --exn-nav-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--exn-z-trigger, 99990);
        display: grid !important;
        grid-template-columns: repeat(5, 1fr);
        align-items: end;
        height: calc(62px + env(safe-area-inset-bottom, 0px));
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        margin: 0;
        background: var(--exn-nav-bg);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        box-shadow: var(--exn-nav-shadow);
        font-family: var(--exn-font);
        transition: transform 240ms var(--exn-ease);
        -webkit-tap-highlight-color: transparent;
    }

    /* Верхняя кромка меню — фирменный градиент, тонкой линией. */
    .exn-nav::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 1px;
        background: linear-gradient(90deg, rgba(5, 247, 241, .55) 0%, rgba(48, 141, 255, .55) 44%, rgba(114, 43, 227, .55) 100%);
    }

    .exn-nav.exn-t-light,
    body.white--theme .exn-nav.exn-t-auto {
        --exn-nav-bg: rgba(255, 255, 255, .97);
        --exn-nav-ring: #FFFFFF;
        --exn-nav-fg: #5A6478;
        --exn-nav-fg-active: #161920;
        --exn-nav-line: #E1E8F2;
        --exn-nav-accent: #097687;
        --exn-nav-shadow: 0 -8px 26px rgba(22, 25, 32, .12);
    }

    /* Клавиатура открыта, открыто меню или окно темы — меню уезжает вниз. */
    .exn-input-focus .exn-nav,
    body:has(.mobnav.open) .exn-nav,
    body:has(.modal.open) .exn-nav { transform: translateY(115%); }

    .exn-nav__item {
        position: relative;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        height: 62px;
        min-width: 0;
        margin: 0;
        padding: 0 1px 2px;
        border: 0;
        background: none;
        color: var(--exn-nav-fg) !important;
        text-decoration: none !important;
        font: 500 11px/1 var(--exn-font);
        cursor: pointer;
        transition: color 160ms var(--exn-ease);
    }

    .exn-nav__icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        transition: transform 140ms var(--exn-ease);
    }

    .exn-nav__item:active .exn-nav__icon { transform: scale(.88); }

    .exn-nav__label {
        font-size: clamp(9.5px, 2.65vw, 11px);
        letter-spacing: 0;
        white-space: nowrap;
    }

    /* Текущая страница и открытая шторка — бирюзовый акцент и черта сверху. */
    .exn-nav__item[aria-current="page"],
    .exn-nav__item[aria-expanded="true"] { color: var(--exn-nav-fg-active) !important; font-weight: 600; }

    .exn-nav__item[aria-current="page"] .exn-nav__icon,
    .exn-nav__item[aria-expanded="true"] .exn-nav__icon { color: var(--exn-nav-accent); }

    .exn-nav__item[aria-current="page"]::before,
    .exn-nav__item[aria-expanded="true"]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 24px;
        height: 3px;
        margin-left: -12px;
        border-radius: 0 0 3px 3px;
        background: var(--exn-nav-accent);
        box-shadow: 0 0 10px var(--exn-nav-accent);
    }

    .exn-nav__item:focus-visible { outline: 2px solid var(--exn-nav-accent); outline-offset: -4px; border-radius: 12px; }

    /* Поднятый центральный пункт — круг с фирменным градиентом и неоновым ореолом. */
    .exn-nav__item--center { color: var(--exn-nav-fg-active) !important; font-weight: 600; }
    .exn-nav__item--center::before { content: none !important; }

    .exn-nav__item--center .exn-nav__icon {
        width: 56px;
        height: 56px;
        /* Круг занимает в потоке столько же, сколько обычная иконка (26 px),
           остальное выносится вверх — подписи всех пунктов на одной линии. */
        margin: -30px 0 0;
        border-radius: 50%;
        background: linear-gradient(140deg, #05F7F1 0%, #308DFF 48%, #722BE3 100%);
        color: #fff !important;
        box-shadow: 0 0 0 5px var(--exn-nav-ring), 0 0 22px rgba(48, 141, 255, .55);
    }

    .exn-nav__item--center .exn-nav__svg { width: 27px; height: 27px; filter: drop-shadow(0 1px 1px rgba(0, 30, 60, .35)); }
    .exn-nav__item--center[aria-current="page"] .exn-nav__icon { box-shadow: 0 0 0 5px var(--exn-nav-ring), 0 0 0 7px rgba(5, 247, 241, .55), 0 0 26px rgba(5, 247, 241, .5); }

    /* Счётчик новинок. */
    .exn-nav__badge {
        position: absolute;
        top: -5px;
        right: -9px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #D6127A;
        box-shadow: 0 0 0 2px var(--exn-nav-ring);
        color: #fff;
        font: 700 10px/18px var(--exn-font);
        text-align: center;
        box-sizing: border-box;
    }

    .exn-nav__badge::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: 0 0 0 0 rgba(214, 18, 122, .6);
        animation: exn-ping 1.8s var(--exn-ease) 1.2s 3;
    }

    /* Отступ под меню, чтобы подвал сайта не прятался за ним. */
    body:has(.exn-nav:not([hidden])) { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; }

    /* Круглую кнопку чата на мобильном прячем: чат теперь в пункте «Связаться».
       .multi_button — Envybox: пока он не снят с темы, он тоже не должен
       висеть поверх меню. */
    body:has(.exn-nav:not([hidden])) .b24-widget-button-wrapper,
    body:has(.exn-nav:not([hidden])) .b24-widget-button-shadow,
    body:has(.exn-nav:not([hidden])) .multi_button { display: none !important; }
}

@keyframes exn-ping {
    0% { box-shadow: 0 0 0 0 rgba(214, 18, 122, .6); }
    100% { box-shadow: 0 0 0 9px rgba(214, 18, 122, 0); }
}

/* ---------------- шторка «Связаться» ---------------- */

.exn-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--exn-z-panel, 100020);
    font-family: var(--exn-font);
    color: var(--exn-text);
}

.exn-sheet__scrim {
    position: absolute;
    inset: 0;
    background: var(--exn-backdrop);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 220ms var(--exn-ease);
}

.exn-sheet__card {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 520px;
    max-height: 88vh;
    margin: 0 auto;
    padding: 6px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    border: 1px solid var(--exn-line);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: var(--exn-surface);
    box-shadow: 0 -14px 44px rgba(0, 0, 0, .45);
    transform: translateY(100%);
    transition: transform 280ms var(--exn-ease);
}

.exn-sheet.is-visible .exn-sheet__scrim { opacity: 1; }
.exn-sheet.is-visible .exn-sheet__card { transform: none; }

.exn-sheet__grip { display: block; width: 40px; height: 4px; margin: 4px auto 6px; border-radius: 2px; background: var(--exn-line); }

.exn-sheet__head { display: flex; align-items: flex-start; gap: 12px; padding: 8px 16px 14px 20px; }
.exn-sheet__titles { flex: 1; min-width: 0; }

.exn-sheet .exn-sheet__title {
    margin: 0;
    padding: 0;
    font: 700 24px/1.05 var(--exn-display);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--exn-text);
}

.exn-sheet .exn-sheet__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font: 400 13px/1.3 var(--exn-font);
    color: var(--exn-muted);
}

.exn-sheet__note::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: #17DE00; box-shadow: 0 0 0 3px rgba(23, 222, 0, .18), 0 0 8px rgba(23, 222, 0, .6); }

.exn-sheet__close {
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--exn-line);
    border-radius: 50%;
    background: transparent;
    color: var(--exn-text);
    cursor: pointer;
}

.exn-sheet__close:hover { border-color: var(--exn-accent); color: var(--exn-accent); }
.exn-sheet__close:focus-visible { outline: 3px solid rgba(5, 247, 241, .45); outline-offset: 2px; }

.exn-sheet__list { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }

.exn-sheet__row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 10px 8px;
    border: 0;
    border-radius: 16px;
    background: none;
    color: var(--exn-text) !important;
    text-align: left;
    text-decoration: none !important;
    font-family: var(--exn-font);
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms var(--exn-ease);
}

.exn-sheet__row:hover,
.exn-sheet__row:active { background: var(--exn-hover); }
.exn-sheet__row:focus-visible { outline: 3px solid rgba(5, 247, 241, .45); outline-offset: -3px; }

.exn-sheet__ch {
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    color: #fff;
    font: 800 14px/1 var(--exn-font);
    letter-spacing: -.02em;
}

.exn-sheet__ch--wa { background: #25D366; }
.exn-sheet__ch--tg { background: #2AABEE; }
.exn-sheet__ch--max { background: linear-gradient(135deg, #43C6FF 0%, #6B4BFF 55%, #A93BFF 100%); }
.exn-sheet__ch--phone { background: var(--exn-blue); }
.exn-sheet__ch--form { background: linear-gradient(140deg, #05F7F1 0%, #308DFF 48%, #722BE3 100%); }
.exn-sheet__ch--other { background: #3A4152; }

.exn-sheet__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.exn-sheet__name { font: 500 16px/1.2 var(--exn-font); }
.exn-sheet__hint { font: 400 13px/1.25 var(--exn-font); color: var(--exn-muted); }
.exn-sheet__go { flex: 0 0 auto; color: var(--exn-faint); }

/* Шторка «Центры». */
.exn-sheet__ch--exotag { background: linear-gradient(140deg, #05F7F1 0%, #308DFF 48%, #722BE3 100%); }
.exn-sheet__ch--laserland { background: linear-gradient(150deg, #FF9A33 0%, #FF7800 50%, #E25A00 100%); }

.exn-sheet__metro { display: flex; align-items: center; gap: 6px; min-width: 0; }
.exn-sheet__metro > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exn-sheet__line {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--exn-faint);
    color: #fff;
    font: normal 700 9px/16px var(--exn-font);
    text-align: center;
}

.exn-sheet__row.is-here { background: var(--exn-hover); }
.exn-sheet__here {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 1000px;
    border: 1px solid var(--exn-accent);
    color: var(--exn-accent);
    font: 500 11px/1.2 var(--exn-font);
}

.exn-sheet__sep { height: 1px; margin: 6px 8px; background: var(--exn-line); }

.exn-sheet__skeleton { display: flex; align-items: center; gap: 14px; padding: 10px 8px; }
.exn-sheet__skeleton i { flex: 0 0 48px; height: 48px; border-radius: 16px; background: var(--exn-skeleton); }
.exn-sheet__skeleton b { flex: 0 0 52%; height: 16px; border-radius: 1000px; background: var(--exn-skeleton); }

/* ---------------- уменьшенная анимация ---------------- */

@media (prefers-reduced-motion: reduce) {
    .exn-trigger,
    .exn-backdrop,
    .exn-panel,
    .exn-panel__body,
    .exn-gallery__dots span {
        transition-duration: 120ms !important;
        transition-property: opacity !important;
        animation: none !important;
        transform: none !important;
    }

    .exn-panel.is-visible,
    .exn-trigger:hover,
    .exn-trigger:active { transform: none !important; }

    .exn-skeleton__thumb { animation: none !important; }

    .exn-sheet__card { transition: none !important; }
    .exn-nav__badge::after { animation: none !important; }
}