/* =========================================================
   SOULULAB — MOBILE PATCH
   Все мобильные правки дальше ведём здесь
   ========================================================= */

@media (max-width: 820px) {
    html body .soul-header {
        z-index: 9990 !important;
    }

    html body .soul-header__inner {
        position: relative !important;
        z-index: 9992 !important;
    }

    html body .soul-header__burger {
        position: relative !important;
        z-index: 9994 !important;
        pointer-events: auto !important;
    }

    html body .soul-header__mobile-panel[hidden] {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html body .soul-header__mobile-panel:not([hidden]) {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html body .soul-header__mobile-panel {
        position: fixed !important;
        left: 18px !important;
        right: 18px !important;
        top: 108px !important;
        z-index: 9999 !important;

        max-height: calc(100dvh - 128px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;

        padding: 18px !important;

        border-radius: 28px !important;

        background:
            radial-gradient(
                circle at 50% 38%,
                rgba(180, 52, 255, 0.26) 0%,
                rgba(255, 118, 70, 0.18) 21%,
                rgba(84, 190, 91, 0.16) 38%,
                rgba(83, 167, 255, 0.12) 52%,
                rgba(255, 255, 255, 0.00) 70%
            ),
            radial-gradient(
                circle at 20% 0%,
                rgba(255, 255, 255, 0.96) 0%,
                rgba(255, 255, 255, 0.52) 42%,
                rgba(255, 255, 255, 0.00) 74%
            ),
            linear-gradient(
                145deg,
                rgba(250, 253, 255, 0.88) 0%,
                rgba(236, 248, 255, 0.80) 48%,
                rgba(208, 229, 240, 0.74) 100%
            ) !important;

        border: 1px solid rgba(255, 255, 255, 0.70) !important;

        box-shadow:
            0 28px 70px rgba(34, 42, 52, 0.22),
            0 12px 32px rgba(34, 42, 52, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.88),
            inset 0 -1px 0 rgba(70, 80, 90, 0.10) !important;

        backdrop-filter: blur(24px) saturate(1.14) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.14) !important;

        touch-action: auto !important;
    }

    html body .soul-header__mobile-panel,
    html body .soul-header__mobile-panel * {
        pointer-events: auto !important;
    }

    html body .soul-header__mobile-directions {
        display: grid !important;
        gap: 12px !important;
    }

    html body .soul-header__mobile-directions-toggle {
        width: 100% !important;
        min-height: 58px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;

        padding: 0 18px !important;

        border-radius: 20px !important;

        color: rgba(28, 30, 38, 0.92) !important;
        -webkit-text-fill-color: rgba(28, 30, 38, 0.92) !important;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.90) 0%,
                rgba(246, 251, 253, 0.78) 48%,
                rgba(220, 235, 243, 0.58) 100%
            ) !important;

        border: 1px solid rgba(255, 255, 255, 0.78) !important;

        box-shadow:
            0 10px 22px rgba(34, 42, 52, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.90),
            inset 0 -1px 0 rgba(70, 80, 90, 0.08) !important;

        font-family: inherit !important;
        font-size: 18px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;

        cursor: pointer !important;
    }

    html body .soul-header__mobile-directions-arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        opacity: 0.72 !important;

        transition:
            transform 180ms ease,
            opacity 180ms ease !important;
    }

    html body .soul-header__mobile-directions.is-open .soul-header__mobile-directions-arrow {
        transform: rotate(180deg) !important;
        opacity: 0.92 !important;
    }

    html body .soul-header__mobile-directions-list[hidden] {
        display: none !important;
    }

    html body .soul-header__mobile-directions-list {
        display: grid !important;
        gap: 10px !important;

        animation: soulMobileDirectionsIn 180ms ease both !important;
    }

    @keyframes soulMobileDirectionsIn {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }

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

    html body .soul-header__mobile-direction-card {
        width: 100% !important;
        min-height: 72px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 6px !important;

        box-sizing: border-box !important;
        padding: 14px 18px !important;

        border-radius: 20px !important;

        text-decoration: none !important;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.88) 0%,
                rgba(244, 250, 253, 0.78) 48%,
                rgba(222, 236, 244, 0.58) 100%
            ) !important;

        border: 1px solid rgba(255, 255, 255, 0.72) !important;

        box-shadow:
            0 8px 18px rgba(34, 42, 52, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.86),
            inset 0 -1px 0 rgba(70, 80, 90, 0.07) !important;

        color: rgba(28, 30, 38, 0.92) !important;
    }

    html body .soul-header__mobile-direction-card.is-active {
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.96) 0%,
                rgba(246, 251, 253, 0.86) 48%,
                rgba(218, 235, 244, 0.72) 100%
            ) !important;

        box-shadow:
            0 10px 24px rgba(34, 42, 52, 0.09),
            0 0 16px rgba(110, 180, 220, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.92),
            inset 0 -1px 0 rgba(70, 80, 90, 0.08) !important;
    }

    html body .soul-header__mobile-direction-card.is-disabled {
        opacity: 0.88 !important;
        filter: none !important;
        pointer-events: none !important;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.78) 0%,
                rgba(238, 248, 253, 0.66) 48%,
                rgba(208, 229, 240, 0.48) 100%
            ) !important;
    }

    html body .soul-header__mobile-direction-row {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
    }

    html body .soul-header__mobile-direction-title {
        display: block !important;

        color: rgba(28, 30, 38, 0.92) !important;

        font-size: 18px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
    }

    html body .soul-header__mobile-direction-text {
        display: block !important;

        color: rgba(54, 60, 70, 0.62) !important;

        font-size: 13px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em !important;
    }

    html body .soul-header__mobile-soon {
        position: relative !important;
        z-index: 2 !important;

        flex: 0 0 auto !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 25px !important;
        padding: 0 10px !important;

        border-radius: 999px !important;

        color: rgba(48, 52, 60, 0.70) !important;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.94),
                rgba(229, 236, 240, 0.78)
            ) !important;

        border: 1px solid rgba(255, 255, 255, 0.78) !important;

        box-shadow:
            0 3px 8px rgba(34, 42, 52, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.94),
            inset 0 -1px 0 rgba(70, 80, 90, 0.08) !important;

        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        filter: none !important;
        opacity: 1 !important;
    }

    html body .soul-header__mobile-divider {
        height: 1px !important;
        margin: 18px 0 !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.72),
                rgba(70, 80, 90, 0.10),
                transparent
            ) !important;
    }

    html body .soul-header__mobile-nav {
        display: grid !important;
        gap: 10px !important;
    }

    html body .soul-header__mobile-nav a {
        min-height: 58px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        padding: 0 18px !important;

        border-radius: 20px !important;

        text-decoration: none !important;

        color: rgba(28, 30, 38, 0.88) !important;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.78) 0%,
                rgba(244, 250, 253, 0.62) 48%,
                rgba(222, 236, 244, 0.40) 100%
            ) !important;

        border: 1px solid rgba(255, 255, 255, 0.62) !important;

        box-shadow:
            0 7px 16px rgba(34, 42, 52, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.80),
            inset 0 -1px 0 rgba(70, 80, 90, 0.06) !important;

        font-size: 18px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: -0.018em !important;
    }

    html body .soul-header__mobile-nav a.soul-header__mobile-lab {
        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.84) 0%,
                rgba(244, 228, 255, 0.58) 26%,
                rgba(211, 238, 220, 0.48) 58%,
                rgba(176, 219, 255, 0.58) 100%
            ) !important;

        border-color: rgba(255, 255, 255, 0.72) !important;

        box-shadow:
            0 8px 18px rgba(34, 42, 52, 0.08),
            0 0 18px rgba(160, 92, 255, 0.10),
            0 0 16px rgba(70, 170, 100, 0.08),
            0 0 16px rgba(90, 160, 220, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.86),
            inset 0 -1px 0 rgba(70, 80, 90, 0.07) !important;
    }
}
/* =========================================================
   MOBILE PATCH v2 — overlay blur + stronger lab + disabled directions
   ========================================================= */

@media (max-width: 820px) {

    /* когда мобильное меню открыто — блюрим страницу под ним */
    html body:has(.soul-header__mobile-panel:not([hidden])) main,
    html body:has(.soul-header__mobile-panel:not([hidden])) footer,
    html body:has(.soul-header__mobile-panel:not([hidden])) .soul-page,
    html body:has(.soul-header__mobile-panel:not([hidden])) .gls-page,
    html body:has(.soul-header__mobile-panel:not([hidden])) .gla2-about-page,
    html body:has(.soul-header__mobile-panel:not([hidden])) .soulu-lab-page {
        filter: blur(9px) saturate(0.92) !important;
        transform: translateZ(0) !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    /* мягкая стеклянная вуаль поверх страницы */
    html body .soul-header:has(.soul-header__mobile-panel:not([hidden]))::before {
        content: "" !important;

        position: fixed !important;
        inset: 0 !important;
        z-index: 9991 !important;

        background:
            radial-gradient(
                circle at 50% 28%,
                rgba(255, 255, 255, 0.22),
                rgba(210, 230, 240, 0.16) 36%,
                rgba(255, 255, 255, 0.04) 70%
            ) !important;

        backdrop-filter: blur(7px) saturate(0.96) !important;
        -webkit-backdrop-filter: blur(7px) saturate(0.96) !important;

        pointer-events: auto !important;
    }

    /* шапка и само меню поверх блюра */
    html body .soul-header__inner {
        z-index: 10002 !important;
    }

    html body .soul-header__mobile-panel {
        z-index: 10003 !important;
    }

    html body .soul-header__burger {
        z-index: 10004 !important;
    }

    /* =====================================================
       Лаборатория — насыщеннее, перелив заметнее
       ===================================================== */

    html body .soul-header__mobile-nav a.soul-header__mobile-lab {
        color: rgba(30, 28, 42, 0.94) !important;

        background:
            radial-gradient(
                circle at 18% 18%,
                rgba(178, 68, 255, 0.34) 0%,
                rgba(178, 68, 255, 0.16) 26%,
                rgba(178, 68, 255, 0.00) 54%
            ),
            radial-gradient(
                circle at 72% 26%,
                rgba(62, 176, 255, 0.38) 0%,
                rgba(62, 176, 255, 0.18) 28%,
                rgba(62, 176, 255, 0.00) 58%
            ),
            radial-gradient(
                circle at 58% 78%,
                rgba(72, 210, 116, 0.30) 0%,
                rgba(72, 210, 116, 0.13) 30%,
                rgba(72, 210, 116, 0.00) 62%
            ),
            linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.90) 0%,
                rgba(246, 230, 255, 0.72) 25%,
                rgba(216, 244, 224, 0.62) 56%,
                rgba(178, 222, 255, 0.72) 100%
            ) !important;

        border-color: rgba(255, 255, 255, 0.84) !important;

        box-shadow:
            0 10px 24px rgba(34, 42, 52, 0.10),
            0 0 22px rgba(178, 68, 255, 0.17),
            0 0 20px rgba(62, 176, 255, 0.15),
            0 0 18px rgba(72, 210, 116, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.92),
            inset 0 -1px 0 rgba(70, 80, 90, 0.08) !important;
    }

    /* =====================================================
       Направления — будущие плашки заметнее отличаются
       Скоро остаётся чёткой
       ===================================================== */

    html body .soul-header__mobile-directions-list {
        gap: 12px !important;
    }

    html body .soul-header__mobile-direction-card.is-active {
        opacity: 1 !important;
        filter: none !important;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.98) 0%,
                rgba(248, 252, 255, 0.90) 46%,
                rgba(222, 238, 247, 0.76) 100%
            ) !important;

        border-color: rgba(255, 255, 255, 0.88) !important;

        box-shadow:
            0 12px 26px rgba(34, 42, 52, 0.12),
            0 0 18px rgba(100, 176, 220, 0.13),
            inset 0 1px 0 rgba(255, 255, 255, 0.96),
            inset 0 -1px 0 rgba(70, 80, 90, 0.08) !important;
    }

    html body .soul-header__mobile-direction-card.is-disabled {
        opacity: 1 !important;
        filter: none !important;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.52) 0%,
                rgba(238, 248, 253, 0.40) 48%,
                rgba(208, 229, 240, 0.26) 100%
            ) !important;

        border-color: rgba(255, 255, 255, 0.46) !important;

        box-shadow:
            0 6px 14px rgba(34, 42, 52, 0.035),
            inset 0 1px 0 rgba(255, 255, 255, 0.58),
            inset 0 -1px 0 rgba(70, 80, 90, 0.045) !important;
    }

    /* блюрим/приглушаем только текст будущих направлений, не всю карточку */
    html body .soul-header__mobile-direction-card.is-disabled .soul-header__mobile-direction-title,
    html body .soul-header__mobile-direction-card.is-disabled .soul-header__mobile-direction-text {
        opacity: 0.58 !important;
        filter: blur(0.22px) saturate(0.78) !important;
    }

    html body .soul-header__mobile-direction-card.is-disabled .soul-header__mobile-direction-title {
        color: rgba(34, 38, 46, 0.70) !important;
    }

    html body .soul-header__mobile-direction-card.is-disabled .soul-header__mobile-direction-text {
        color: rgba(54, 60, 70, 0.46) !important;
    }

    /* плашка Скоро — поверх, без блюра, читаемая */
    html body .soul-header__mobile-direction-card.is-disabled .soul-header__mobile-soon {
        position: relative !important;
        z-index: 5 !important;

        opacity: 1 !important;
        filter: none !important;

        color: rgba(44, 48, 56, 0.78) !important;

        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.96),
                rgba(232, 238, 242, 0.86)
            ) !important;

        border: 1px solid rgba(255, 255, 255, 0.88) !important;

        box-shadow:
            0 4px 10px rgba(34, 42, 52, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.96),
            inset 0 -1px 0 rgba(70, 80, 90, 0.08) !important;
    }
}

/* BLOG — mobile submenu */
@media (max-width: 900px) {
    html body .soul-header__mobile-blog {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .soul-header__mobile-blog > summary {
        min-height: 58px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 18px !important;
        border-radius: 20px !important;
        color: rgba(28, 30, 38, 0.88) !important;
        background: linear-gradient(145deg, rgba(255,255,255,.78) 0%, rgba(244,250,253,.62) 48%, rgba(222,236,244,.40) 100%) !important;
        border: 1px solid rgba(255,255,255,.62) !important;
        box-shadow: 0 7px 16px rgba(34,42,52,.06), inset 0 1px 0 rgba(255,255,255,.80), inset 0 -1px 0 rgba(70,80,90,.06) !important;
        font-size: 18px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: -.018em !important;
        list-style: none !important;
        cursor: pointer !important;
    }

    html body .soul-header__mobile-blog > summary::-webkit-details-marker {
        display: none !important;
    }

    html body .soul-header__mobile-blog > summary span {
        font-size: 15px !important;
        opacity: .62 !important;
        transition: transform .2s ease !important;
    }

    html body .soul-header__mobile-blog[open] > summary span {
        transform: rotate(180deg) !important;
    }

    html body .soul-header__mobile-blog-list {
        display: grid !important;
        gap: 6px !important;
        padding: 8px 8px 0 16px !important;
    }

    html body .soul-header__mobile-nav .soul-header__mobile-blog-list a {
        min-height: 46px !important;
        padding: 0 15px !important;
        border-radius: 15px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        opacity: .82 !important;
    }

    html body .soul-header__mobile-nav .soul-header__mobile-blog-list a.is-active {
        opacity: 1 !important;
        box-shadow: 0 7px 16px rgba(34,42,52,.07), inset 0 0 0 1px rgba(111,44,255,.16) !important;
    }
}