#content {
        position: relative;
    }
    #content-wrapper {
        position: relative;
    }

    /* Базовые стили для кнопки меню - 2025-01-27 */
    .header-left .head_menu_btn {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform: translateX(0) scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Анимация кнопки меню при открытии/закрытии через CSS - 2025-01-27 */
    .header-left .head_menu_btn.menu-hidden {
        transform: translateX(-100px) scale(0.1) !important;
        opacity: 0.1 !important;
        visibility: hidden !important;
    }

    /* Анимация кнопки меню для мобильного меню - 2025-01-27 */
    .block-content.menu-open .head_menu_btn,
    .footer.menu-open .head_menu_btn {
        transform: translateX(-100px) scale(0.1) !important;
        opacity: 0.1 !important;
        visibility: hidden !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .block-content:not(.menu-open) .head_menu_btn,
    .footer:not(.menu-open) .head_menu_btn {
        transform: translateX(0) scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Анимация появления иконки закрытия слева направо - 2025-01-27 */
    .block-topmenu_head svg {
        animation: slideInFromLeft 0.5s ease-out;
    }

    @keyframes slideInFromLeft {
        0% {
            transform: translateX(-100px);
            opacity: 0;
        }
        100% {
            transform: translateX(0);
            opacity: 0.7;
        }
    }

    body.iframe-expanded {
        padding-bottom: 90px;
    }
    /* Стили для анимации загрузки */
    .loading-overlay {
        position: fixed;
        top: 100px;
        left: 0;
        width: 100%;
        height: calc(100% - 100px);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        opacity: 0;
        perspective: 1400px;
        background: rgba(0, 0, 0, 0.94); /* затемнение 94% */
        backdrop-filter: blur(6px);       /* блюр заднего фона */
        transition: opacity 0.5s;
        overflow: hidden;
    }

    @media only screen and (max-width: 1024px) {
        .loading-overlay {
            top: 68px;
        }
    }
    .loading-overlay.active {
        display: flex;
        opacity: 1;
    }
    .mosaic-loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        grid-template-rows: repeat(auto-fill, minmax(80px, 1fr));
        column-gap: 16px;
        row-gap: 24px;
        padding: 16px;
        box-sizing: border-box;
    }
    .mosaic-tile {
        background: #ffc400;
        border-radius: 8px;
        opacity: 0.3;
        animation: shimmer 1.5s infinite;
        animation-delay: calc(var(--col) * 0.2s); /* Delay based on column */
    }
    @keyframes shimmer {
        0% { opacity: 0.3; }
        50% { opacity: 1; }
        100% { opacity: 0.3; }
    }
    body.loading * {
        pointer-events: none;
    }
    /* Notifications panel styles — redesigned 2026-04-08 */
    .notifications-panel {
        position: fixed;
        top: 88px;
        right: 0;
        width: 380px;
        max-width: 100vw;
        height: calc(100vh - 88px);
        max-height: calc(100vh - 88px);
        background: linear-gradient(180deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
        border-left: 1px solid rgba(255, 196, 0, 0.25);
        box-shadow: -6px 0 30px rgba(0, 0, 0, 0.7);
        overflow: hidden;
        z-index: 100001;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        border-radius: 16px 0 0 16px;
    }
    .notifications-panel.open {
        transform: translateX(0);
    }
    /* Scrollable content area inside panel */
    .notifications-panel .notif-scroll-area {
        flex: 1;
        overflow-y: auto;
        padding: 0 12px 8px;
    }
    .notifications-panel .notif-scroll-area::-webkit-scrollbar {
        width: 5px;
    }
    .notifications-panel .notif-scroll-area::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.05);
    }
    .notifications-panel .notif-scroll-area::-webkit-scrollbar-thumb {
        background: rgba(255, 196, 0, 0.4);
        border-radius: 4px;
    }
    /* Panel header */
    .notifications-panel .notif-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 16px 14px;
        background: linear-gradient(135deg, rgba(255,196,0,0.15) 0%, rgba(255,196,0,0.05) 100%);
        border-bottom: 1px solid rgba(255, 196, 0, 0.2);
        flex-shrink: 0;
    }
    .notifications-panel .notif-header-title {
        font-weight: 700;
        font-size: 16px;
        color: #ffc400;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    /* Notification items */
    .notification-item {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255,255,255,0.07);
        font-size: 14px;
        color: #e8e8e8;
        background: rgba(255,255,255,0.03);
        border-radius: 10px;
        margin: 6px 0;
        transition: background 0.2s ease, transform 0.15s ease;
        border-left: none;
    }
    .notification-item:hover {
        background: rgba(255, 196, 0, 0.08);
        transform: translateX(-3px);
    }
    .notification-item.unread {
        background: rgba(245, 166, 35, 0.1);
        border-left: 3px solid #ffc400;
        padding-left: 11px;
    }
    .notification-item:last-child {
        border-bottom: none;
    }
    .notification-date {
        font-size: 12px;
        color: rgba(255,255,255,0.45);
        margin-top: 5px;
    }
    .notification-item.empty {
        text-align: center;
        color: rgba(255, 255, 255, 0.4);
        padding: 30px 20px;
        background: transparent;
        border-left: none;
        font-size: 15px;
    }
    /* Pagination bar */
    .notif-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 10px 12px 14px;
        flex-shrink: 0;
        border-top: 1px solid rgba(255,255,255,0.08);
        background: rgba(0,0,0,0.2);
    }
    .notif-page-btn {
        min-width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid rgba(255,196,0,0.3);
        background: rgba(255,255,255,0.05);
        color: #ccc;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0 8px;
    }
    .notif-page-btn:hover {
        background: rgba(255,196,0,0.15);
        border-color: #ffc400;
        color: #ffc400;
    }
    .notif-page-btn.active {
        background: #ffc400;
        border-color: #ffc400;
        color: #111;
    }
    @media (max-width: 1200px) {
        .notifications-panel {
            top: 70px;
            height: calc(100vh - 70px);
            max-height: calc(100vh - 70px);
        }
    }
    @media (max-width: 768px) {
        .notifications-panel {
            top: 70px;
            height: calc(100vh - 70px);
            max-height: calc(100vh - 70px);
            width: 100vw;
            border-radius: 0;
        }
    }
    /* Стили для Swiper */
    .prev.swiper-button-disabled {
        z-index: 11 !important;
    }
    .slider-wrapper .next {
        z-index: 11 !important;
    }

:root {
    --brand-gold: #ffc400;
    --brand-cyan: #00ffcc;
    --overlay-bg: #121212;
    --dot-size: 6px;
}

.loading-overlay {
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    height: calc(100% - 100px);
    background: rgba(0, 0, 0, 0.94); /* затемнение 94% - 2025-01-27 */
    backdrop-filter: blur(6px);       /* блюр заднего фона - 2025-01-27 */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity .5s ease;
    overflow: hidden;
    perspective: 1400px;
}
@media (max-width:1024px){
    .loading-overlay {
        top:68px;
        height:calc(100% - 68px);
    }
}
.loading-overlay.active {
    display:flex;
    opacity:1;
}

.loader-scene {
    position: relative;
    width: 420px;
    height: 420px;
    transform-style: preserve-3d;
    animation: sceneFloat 9s ease-in-out infinite;
    pointer-events:none;
}

@keyframes sceneFloat {
    0%,100% { transform: translateY(0px); }
    50%     { transform: translateY(-22px); }
}

/* Halo */
.loader-halo {
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,196,0,0.30), transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(0,255,204,0.18), transparent 70%);
    filter: blur(24px);
    animation: haloPulse 5s ease-in-out infinite;
    opacity: .85;
}
@keyframes haloPulse {
    0%,100% { transform: scale(0.92); opacity:.65;}
    50% { transform: scale(1.06); opacity:1;}
}

/* ОБЩИЙ КОНТЕЙНЕР С КРУГАМИ */
.rings-stack {
    position:absolute;
    top:50%; left:50%;
    width:100%; height:100%;
    transform: translate(-50%,-50%);
    transform-style: preserve-3d;
    pointer-events:none;
}

/* Отдельное кольцо */
.ringX {
    position:absolute;
    top:50%; left:50%;
    transform-style:preserve-3d;
    animation: spinRingGeneric linear infinite;
    will-change: transform;
}

@keyframes spinRingGeneric {
    0% {
        transform:
            translate(-50%, -50%)
            rotateX(30deg)
            rotateY(0deg)
            rotateZ(0deg);
    }
    100% {
        transform:
            translate(-50%, -50%)
            rotateX(30deg)
            rotateY(360deg)
            rotateZ(360deg);
    }
}

/* Точки */
.ringX .dot {
    position:absolute;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius:50%;
    background:
        radial-gradient(circle at 40% 40%, #ffffff 0%, var(--brand-gold) 55%, var(--brand-cyan) 100%);
    box-shadow: 0 0 6px rgba(255,255,255,.55), 0 0 12px rgba(0,255,204,.55);
    animation: dotBreath 4.2s ease-in-out infinite;
    opacity:.95;
}

@keyframes dotBreath {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.28); }
}

/* Варианты стилей для чётных / нечётных колец */
.ringX.even .dot {
    background:
        radial-gradient(circle at 50% 50%, #ffffff 0%, var(--brand-cyan) 55%, var(--brand-gold) 100%);
    box-shadow: 0 0 5px rgba(0,255,204,.55), 0 0 14px rgba(255,196,0,.55);
    animation-duration: 3.6s;
}
.ringX.altScale {
    animation-name: spinRingAlt;
}
@keyframes spinRingAlt {
    0% {
        transform:
            translate(-50%, -50%)
            rotateX(30deg)
            rotateY(360deg)
            rotateZ(0deg)
            scale(1.0);
    }
    100% {
        transform:
            translate(-50%, -50%)
            rotateX(30deg)
            rotateY(0deg)
            rotateZ(360deg)
            scale(1.0);
    }
}

/* Небольшой общий пулс всей стопки */
.rings-stack::after {
    content:'';
    position:absolute;
    top:50%; left:50%;
    width:86%; height:86%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    box-shadow:0 0 40px rgba(255,196,0,0.22), 0 0 90px rgba(0,255,204,0.20) inset;
    animation: stackPulse 6.5s ease-in-out infinite;
    pointer-events:none;
}
@keyframes stackPulse {
    0%,100% { transform:translate(-50%,-50%) scale(0.96); opacity:.60;}
    50%     { transform:translate(-50%,-50%) scale(1.05); opacity:.95;}
}

/* ЭКВАЛАЙЗЕР В ЦЕНТРЕ (можно отключить) */
.equalizer-ring {
    position:absolute;
    top:50%; left:50%;
    width:260px; height:260px;
    transform: translate(-50%,-50%) rotateX(72deg) rotateZ(12deg);
    transform-style:preserve-3d;
    display:flex;
    justify-content:center;
    align-items:center;
    filter: drop-shadow(0 0 14px rgba(0,255,204,0.40));
    pointer-events:none;
}

.equalizer-ring .bar {
    position:absolute;
    width:4px;
    background: linear-gradient(180deg, var(--brand-cyan) 0%, var(--brand-gold) 80%);
    bottom:50%;
    transform-origin: 50% 100%;
    border-radius:4px;
    animation: barAnim 1.9s ease-in-out infinite;
    opacity:.95;
}

@keyframes barAnim {
    0%,100% { transform: scaleY(.30); }
    40%     { transform: scaleY(1); }
    70%     { transform: scaleY(.55); }
}

.equalizer-core {
    position:absolute;
    width:150px;
    height:150px;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 55%, rgba(255,255,255,0.85) 0%, rgba(255,196,0,0.38) 40%, rgba(0,0,0,0) 70%),
        radial-gradient(circle at 50% 50%, rgba(0,255,204,0.22), transparent 65%);
    box-shadow: 0 0 26px rgba(255,196,0,0.38), inset 0 0 30px rgba(0,255,204,0.30);
    animation: corePulse 4.4s ease-in-out infinite;
}
@keyframes corePulse {
    0%,100% { transform: scale(0.94) rotateZ(0deg); }
    50%     { transform: scale(1.06) rotateZ(10deg); }
}

/* Disable interaction while loading */
body.loading * {
    pointer-events:none !important;
}




#blackhole {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
}

.centerHover {
    width: 255px;
    height: 255px;
    background-color: transparent;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -128px;
    margin-left: -128px;
    z-index: 2;
    cursor: pointer;
    line-height: 255px;
    text-align: center;
    transition: all 500ms;
}

.centerHover.open {
    opacity: 0;
    pointer-events: none;
}

.centerHover:hover span {
    color: #DDD;
}

.centerHover:hover span:before { 
    background-color: #DDD; 
}

.centerHover:hover span:after { 
    background-color: #DDD; 
}

.centerHover span {
    color: #666;
    font-family: serif;
    font-size: 18px;
    position: relative;
    transition: all 500ms;
}

.centerHover span:before {
    content: '';
    display: inline-block;
    height: 1px;
    width: 16px;
    margin-right: 12px;
    margin-bottom: 4px;
    background-color: #666;
    transition: all 500ms;
}

.centerHover span:after {
    content: '';
    display: inline-block;
    height: 1px;
    width: 16px;
    margin-left: 12px;
    margin-bottom: 4px;
    background-color: #666;
    transition: all 500ms;
}

canvas {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: auto;
}

#blackhole {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
}

.centerHover {
    width: 255px;
    height: 255px;
    background-color: transparent;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -128px;
    margin-left: -128px;
    z-index: 2;
    cursor: pointer;
    line-height: 255px;
    text-align: center;
    transition: all 500ms;
}

.centerHover.open {
    opacity: 0;
    pointer-events: none;
}

.centerHover:hover span {
    color: #DDD;
}

.centerHover:hover span:before { 
    background-color: #DDD; 
}

.centerHover:hover span:after { 
    background-color: #DDD; 
}

.centerHover span {
    color: #666;
    font-family: serif;
    font-size: 18px;
    position: relative;
    transition: all 500ms;
}

.centerHover span:before {
    content: '';
    display: inline-block;
    height: 1px;
    width: 16px;
    margin-right: 12px;
    margin-bottom: 4px;
    background-color: #666;
    transition: all 500ms;
}

.centerHover span:after {
    content: '';
    display: inline-block;
    height: 1px;
    width: 16px;
    margin-left: 12px;
    margin-bottom: 4px;
    background-color: #666;
    transition: all 500ms;
}

canvas {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: auto;
} 
/* Fix: prevent worker.css .swiper padding from affecting provider carousel */
.slider-wrapper .swiper { padding: 0; }

/* 2026-04-11: Скрываем стрелки слайдера провайдеров */
.slider-wrapper .prev,
.slider-wrapper .next {
    display: none;
}