/* css/style.css */

/* ========================================= */
/* ЦВЕТОВЫЕ ПРОФИЛИ ИГРОВЫХ ТЕМ (VARIABLES)  */
/* ========================================= */
:root, .theme-orange {
    --color-brand: #ff4500; /* WoW Midnight */
    --color-brand-glow: rgba(255, 69, 0, 0.6);
    --color-brand-glow-light: rgba(255, 69, 0, 0.4);
    --color-brand-glow-very-light: rgba(255, 69, 0, 0.12);
    --color-brand-dark: #e03d00;
    --color-brand-glow-hex: 255, 69, 0; /* для canvas */
}

.theme-red {
    --color-brand: #dc2626; /* Diablo IV */
    --color-brand-glow: rgba(220, 38, 38, 0.6);
    --color-brand-glow-light: rgba(220, 38, 38, 0.4);
    --color-brand-glow-very-light: rgba(220, 38, 38, 0.12);
    --color-brand-dark: #991b1b;
    --color-brand-glow-hex: 220, 38, 38;
}

.theme-purple {
    --color-brand: #a855f7; /* Path of Exile 2 */
    --color-brand-glow: rgba(168, 85, 247, 0.6);
    --color-brand-glow-light: rgba(168, 85, 247, 0.4);
    --color-brand-glow-very-light: rgba(168, 85, 247, 0.12);
    --color-brand-dark: #7e22ce;
    --color-brand-glow-hex: 168, 85, 247;
}

.theme-gold {
    --color-brand: #fbbf24; /* WoW Classic */
    --color-brand-glow: rgba(251, 191, 36, 0.6);
    --color-brand-glow-light: rgba(251, 191, 36, 0.4);
    --color-brand-glow-very-light: rgba(251, 191, 36, 0.12);
    --color-brand-dark: #d97706;
    --color-brand-glow-hex: 251, 191, 36;
}

/* ========================================= */
/* БАЗОВЫЕ ТЕКСТЫ И СКРОЛЛБАР                 */
/* ========================================= */
.rich-text p { margin-bottom: 0.75rem; }
.rich-text strong { color: white; font-weight: 800; }
.rich-text ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1rem; color: #d1d1d6; }
.rich-text ol { list-style-type: decimal; margin-left: 1.25rem; margin-bottom: 0.75rem; }
.rich-text h1 { font-size: 1.5rem; font-weight: 900; color: var(--color-brand); margin-bottom: 1rem; }
.rich-text h2 { font-size: 1.25rem; font-weight: 800; color: var(--color-brand); margin-bottom: 0.75rem; }
.rich-text h3 { font-weight: 800; color: var(--color-brand); margin-top: 0.5rem; margin-bottom: 0.5rem; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #070709; }
::-webkit-scrollbar-thumb { background: var(--color-brand); border-radius: 10px; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ========================================= */
/* УЛЬТИМАТИВНЫЙ ДИЗАЙН ОБСИДИАНОВОГО СТЕКЛА  */
/* ========================================= */
.obsidian-card {
    background: linear-gradient(135deg, rgba(20, 20, 22, 0.65) 0%, rgba(12, 12, 14, 0.85) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.85), 0 0 50px rgba(var(--color-brand-glow-hex), 0.02) !important;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    position: relative;
    overflow: hidden;
}

.obsidian-card:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: var(--color-brand-glow-light) !important;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95), 0 0 25px var(--color-brand-glow-very-light) !important;
}

/* Металлический отблеск проносится по стеклу при наведении */
.obsidian-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    pointer-events: none;
}

.obsidian-card:hover::after {
    animation: travel-sheen 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.login-btn-glow { box-shadow: 0 0 10px var(--color-brand-glow-very-light); transition: all 0.3s ease-out; }
.login-btn-glow:hover { box-shadow: 0 0 20px var(--color-brand-glow), 0 0 40px var(--color-brand-glow-light); transform: scale(1.02); }

/* ========================================= */
/* ФОНОВЫЕ ТУМАННОСТИ                         */
/* ========================================= */
@keyframes nebula-move { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } 50% { transform: translate(5%, 5%) scale(1.1); opacity: 0.7; } }
@keyframes nebula-move-1 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; } 50% { transform: translate(10%, 5%) scale(1.1); opacity: 0.6; } }
@keyframes pulse-slow { 0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.4; } 50% { transform: scale(1.1) translate(3%, 2%); opacity: 0.6; } }
@keyframes pulse-slower { 0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.3; } 50% { transform: scale(1.15) translate(-3%, -2%); opacity: 0.5; } }

.animate-nebula { animation: nebula-move 15s infinite ease-in-out alternate; }
.animate-nebula-1 { animation: nebula-move-1 20s infinite ease-in-out alternate; }
.animate-pulse-slow { animation: pulse-slow 10s infinite ease-in-out; }
.animate-pulse-slower { animation: pulse-slower 14s infinite ease-in-out; }

/* ========================================= */
/* ШАПКА, ЛОГОТИП И НАВИГАЦИЯ                 */
/* ========================================= */
@keyframes border-glow-slide { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.animated-header-border {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 1.5px;
    background: linear-gradient(90deg, rgba(var(--color-brand-glow-hex),0) 0%, var(--color-brand) 50%, rgba(var(--color-brand-glow-hex),0) 100%);
    background-size: 200% 100%; animation: border-glow-slide 4s infinite linear;
}

@keyframes brand-glow-shift { 0%, 100% { text-shadow: 0 0 10px var(--color-brand-glow-light); color: var(--color-brand); } 50% { text-shadow: 0 0 22px var(--color-brand-glow), 0 0 8px var(--color-brand-glow-light); color: #fff; } }
.animate-brand-text { animation: brand-glow-shift 3s infinite ease-in-out; }

.nav-link-neon { position: relative; transition: all 0.3s ease; opacity: 0.8; }
.nav-link-neon::after {
    content: ''; position: absolute; bottom: -10px; left: 50%; width: 0; height: 1.5px;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); transform: translateX(-50%);
}
.nav-wow-retail::after { background-color: var(--color-brand); box-shadow: 0 0 10px var(--color-brand), 0 0 20px var(--color-brand-glow); }
.nav-accounts::after { background-color: #fbbf24; box-shadow: 0 0 10px #fbbf24, 0 0 20px rgba(251, 191, 36, 0.6); }
.nav-join::after { background-color: #38bdf8; box-shadow: 0 0 10px #38bdf8, 0 0 20px rgba(56, 189, 248, 0.6); }
.nav-sell::after { background-color: #34d399; box-shadow: 0 0 10px #34d399, 0 0 20px rgba(52, 211, 153, 0.6); }
.nav-link-neon:hover::after { width: 100%; }
.nav-link-neon:hover { opacity: 1 !important; filter: brightness(1.2); }

/* ========================================= */
/* АКТИВНЫЕ СОСТОЯНИЯ МЕНЮ                    */
/* ========================================= */
.nav-active-wow { 
    color: var(--color-brand) !important; 
    opacity: 1 !important; 
}
.nav-active-wow::after { 
    content: '' !important; 
    position: absolute !important; 
    bottom: -10px !important; 
    left: 50% !important; 
    width: 100% !important; 
    height: 1.5px !important; 
    border-radius: 9999px !important; 
    background-color: var(--color-brand) !important; 
    box-shadow: 0 0 8px var(--color-brand), 0 0 3px var(--color-brand-glow-light) !important; 
    transform: translateX(-50%) !important; 
}

.nav-active-accounts { 
    color: #fbbf24 !important; 
    opacity: 1 !important; 
}
.nav-active-accounts::after { 
    content: '' !important; 
    position: absolute !important; 
    bottom: -10px !important; 
    left: 50% !important; 
    width: 100% !important; 
    height: 1.5px !important; 
    border-radius: 9999px !important; 
    background-color: #fbbf24 !important; 
    box-shadow: 0 0 8px #fbbf24 !important; 
    transform: translateX(-50%) !important; 
}

.nav-active-guides { 
    color: #a855f7 !important; 
    opacity: 1 !important; 
}
.nav-active-guides::after { 
    content: '' !important; 
    position: absolute !important; 
    bottom: -10px !important; 
    left: 50% !important; 
    width: 100% !important; 
    height: 1.5px !important; 
    background-color: #a855f7 !important; 
    box-shadow: 0 0 8px #a855f7 !important; 
    transform: translateX(-50%) !important; 
}

@keyframes cart-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-12deg) scale(1.15); } 75% { transform: rotate(12deg) scale(1.15); } }
.cart-btn:hover .cart-icon { animation: cart-wiggle 0.5s ease infinite alternate; }
.cursor-blink::after { content: '|'; animation: blink 0.8s infinite; color: var(--color-brand); margin-left: 2px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ========================================= */
/* ЛУПА (МАГАЗИН АККАУНТОВ)                   */
/* ========================================= */
.magnifier-container { position: relative; overflow: hidden; cursor: crosshair; background: #000; border-radius: 20px; }
.magnifier-img { transition: transform 0.2s ease-out; transform-origin: center center; width: 100%; height: 100%; object-fit: contain; }
.magnifier-container:hover .magnifier-img { transform: scale(2.5); }
.thumb-active { border-color: var(--color-brand) !important; opacity: 1 !important; transform: translateY(-2px); }

/* ========================================= */
/* ПОЛЗУНКИ ДЛЯ КАЛЬКУЛЯТОРА                  */
/* ========================================= */
input[type="range"] { -webkit-appearance: none; appearance: none; cursor: pointer; width: 100%; height: 6px; border-radius: 9999px; outline: none; border: 1px solid rgba(255, 255, 255, 0.05); background: #27272a; }
input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 6px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; background-color: var(--color-brand); background-image: radial-gradient(circle, #ffffff 25%, var(--color-brand) 35%); height: 18px; width: 18px; border-radius: 50%; box-shadow: 0 0 10px var(--color-brand-glow), inset 0 0 4px rgba(0, 0, 0, 0.5); transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease; }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); box-shadow: 0 0 20px var(--color-brand), inset 0 0 3px rgba(0, 0, 0, 0.5); }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.35); box-shadow: 0 0 25px var(--color-brand), 0 0 0 6px var(--color-brand-glow-light); }
input[type="range"]::-moz-range-track { background: transparent; height: 6px; }
input[type="range"]::-moz-range-thumb { border: none; background-color: var(--color-brand); background-image: radial-gradient(circle, #ffffff 30%, var(--color-brand) 70%) !important; border: 2px solid #ffffff !important; height: 18px; width: 18px; border-radius: 50%; box-shadow: 0 0 10px var(--color-brand-glow); transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease; }
input[type="range"]::-moz-range-thumb:hover { transform: scale(1.25); box-shadow: 0 0 20px var(--color-brand); }
input[type="range"]::-moz-range-thumb:active { transform: scale(1.35); box-shadow: 0 0 25px var(--color-brand), 0 0 0 6px var(--color-brand-glow-light); }

/* ========================================= */
/* 3D-ФЛИП КАРТОЧКИ (РЕЙДОВЫЙ КАЛЕНДАРЬ)      */
/* ========================================= */
.perspective-1000 { perspective: 1000px; }
.preserve-3d { transform-style: preserve-3d; }
.backface-hidden { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }
.flip-card-inner { transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }

/* ========================================= */
/* АДМИНКА (QUILL И SIDEBAR)                  */
/* ========================================= */
.active-link { background: rgba(255, 69, 0, 0.1); border-left: 4px solid var(--color-brand); color: white !important; }
.ql-toolbar.ql-snow { background: #27272a; border-color: #3f3f46 !important; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.ql-container.ql-snow { background: #18181b; border-color: #3f3f46 !important; color: white; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }

/* ========================================= */
/* ФИРМЕННЫЕ ЦВЕТА БРЕНДА AIBOOST             */
/* ========================================= */
.text-brand { color: var(--color-brand) !important; }
.bg-brand { background-color: var(--color-brand) !important; }
.border-brand { border-color: var(--color-brand) !important; }
.hover\:bg-brand-dark:hover { background-color: var(--color-brand-dark) !important; }

/* ========================================= */
/* ПРЕМИАЛЬНЫЙ СТИЛЬ КНОПОК-ФИЛЬТРОВ          */
/* ========================================= */
.filter-btn {
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background-color: #27272a !important;
    color: #71717a !important;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: inline-block;
}

.filter-btn:hover {
    background-color: #3f3f46 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px var(--color-brand-glow-very-light);
    transform: translateY(-1px);
}

.filter-btn-active {
    background-color: var(--color-brand) !important;
    color: #ffffff !important;
    border-color: var(--color-brand-glow-light) !important;
    box-shadow: 0 10px 15px -3px var(--color-brand-glow-light), 0 4px 6px -4px var(--color-brand-glow-light) !important;
}

/* ========================================= */
/* АНИМАЦИЯ ССЫЛОК В ФУТЕРЕ                   */
/* ========================================= */
.footer-link {
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    color: #a1a1aa !important;
}

.footer-link:hover {
    color: var(--color-brand) !important;
    transform: translateX(6px);
    filter: drop-shadow(0 0 4px var(--color-brand-glow-light));
}

.animated-footer-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--color-brand-glow-hex),0) 0%, var(--color-brand) 50%, rgba(var(--color-brand-glow-hex),0) 100%);
    background-size: 200% 100%;
    animation: border-glow-slide 4s infinite linear;
    z-index: 30;
}

/* Фиолетовая неоновая подсветка для раздела Гайдов в шапке */
.nav-guides::after { 
    background-color: #a855f7; 
    box-shadow: 0 0 10px #a855f7, 0 0 20px rgba(168, 85, 247, 0.6); 
}

.nav-active-guides { 
    color: #a855f7 !important; 
    opacity: 1 !important; 
}

.nav-active-guides::after { 
    content: ''; 
    position: absolute; 
    bottom: -10px; 
    left: 50%; 
    width: 100%; 
    height: 1.5px; 
    background-color: #a855f7; 
    box-shadow: 0 0 8px #a855f7, 0 0 20px rgba(168, 85, 247, 0.6); 
    transform: translateX(-50%) !important; 
}

/* ========================================= */
/* ПРЕМЙАЛЬНЫЙ ПУЛЬТ УПРАВЛЕНИЯ КАТАЛОГОМ    */
/* ========================================= */
.theme-selector-panel {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(24, 24, 27, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: 9999px;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.theme-selector-panel:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}

.theme-sphere {
    width: 20px;
    height: 20px;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

.theme-sphere::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 4px;
    width: 6px;
    height: 3px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    transform: rotate(-15deg);
    pointer-events: none;
}

.theme-sphere:hover {
    transform: scale(1.3) translateY(-1px);
    border-color: #ffffff !important;
    filter: brightness(1.2);
}

.theme-sphere:active {
    transform: scale(0.95);
}

.theme-sphere-orange:hover { box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 69, 0, 0.8); }
.theme-sphere-red:hover { box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(220, 38, 38, 0.8); }
.theme-sphere-purple:hover { box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(168, 85, 247, 0.8); }
.theme-sphere-gold:hover { box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(251, 191, 36, 0.8); }

/* Премиальный стиль аккордеонов в описании услуг */
details.service-tab {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding-bottom: 14px;
    margin-bottom: 14px;
    transition: all 0.3s ease;
}

details.service-tab summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 900;
    color: #ffffff;
    cursor: pointer;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    list-style: none;
}

details.service-tab summary::-webkit-details-marker {
    display: none;
}

details.service-tab[open] {
    border-bottom-color: var(--color-brand-glow-light);
}

details.service-tab summary .tab-arrow {
    transition: transform 0.3s ease;
    font-size: 8px;
}

details.service-tab[open] summary .tab-arrow {
    transform: rotate(180deg);
}

/* ========================================= */
/* АНИМАЦИЯ ПОЯВЛЕНИЯ АЧИВОК (STEAM STYLE)   */
/* ========================================= */
@keyframes slide-in-achievement {
    0% { transform: translateX(120%) scale(0.9); opacity: 0; }
    10% { transform: translateX(0) scale(1); opacity: 1; }
    90% { transform: translateX(0) scale(1); opacity: 1; }
    100% { transform: translateX(120%) scale(0.9); opacity: 0; }
}

.achievement-card {
    animation: slide-in-achievement 6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* ========================================= */
/* ПОДСВЕТКА КНОПОК ИГР ПРИ НАВЕДЕНИИ        */
/* ========================================= */
.group:hover .group-hover\:bg-brand {
    background-color: var(--color-brand) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px var(--color-brand-glow-light) !important;
}

.group:hover .group-hover\:text-white {
    color: #ffffff !important;
}

.hover\:bg-brand:hover {
    background-color: var(--color-brand) !important;
    color: #ffffff !important;
}

.hover\:text-brand:hover {
    color: var(--color-brand) !important;
}

.hover\:border-brand\/40:hover {
    border-color: var(--color-brand-glow-light) !important;
}

/* ========================================= */
/* ФИКС ОБРЕЗАНИЯ ОПИСАНИЙ                   */
/* ========================================= */
.rich-text {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
    max-height: none !important;
}

details.raid-row-tab summary {
    list-style: none !important;
}

details.raid-row-tab summary::-webkit-details-marker {
    display: none !important;
}

/* ========================================= */
/* СТИЛИ ВКЛАДОК РЕЙДОВОГО КАЛЕНДАРЯ         */
/* ========================================= */
.raid-tab-btn {
    padding: 10px 20px;
    border-radius: 14px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background-color: #18181b;
    color: #71717a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.raid-tab-btn:hover {
    background-color: #27272a;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.1);
}

.raid-tab-active {
    background-color: var(--color-brand) !important;
    color: #ffffff !important;
    border-color: var(--color-brand-glow-light) !important;
    box-shadow: 0 0 15px var(--color-brand-glow-very-light) !important;
}

/* ========================================= */
/* 3D TILT И ДИНАМИЧЕСКИЙ БЛИК ДЛЯ КАРТОЧЕК  */
/* ========================================= */
.obsidian-card-3d {
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
    transition: transform 0.15s ease-out, border-color 0.3s ease, box-shadow 0.3s ease !important;
    position: relative;
}

.obsidian-card-3d * {
    transform-style: preserve-3d;
}

.obsidian-card-inner-3d {
    transform: translateZ(25px) !important;
    transition: transform 0.15s ease-out;
}

.card-glare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%) !important;
    mix-blend-mode: overlay;
    z-index: 10;
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.3s ease;
}

.obsidian-card-3d:hover .card-glare {
    opacity: 1;
}

/* ========================================= */
/* FLUID NEON PROGRESS BAR (VIP LOYALTY)     */
/* ========================================= */
.neon-progress-track {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8) !important;
    border-radius: 9999px !important;
    position: relative;
    overflow: visible !important;
}

.neon-progress-bar {
    background: linear-gradient(90deg, var(--color-brand) 0%, #ff8c00 100%) !important;
    box-shadow: 0 0 15px var(--color-brand-glow), 0 0 5px var(--color-brand-glow-light) !important;
    position: relative;
    overflow: hidden;
    border-radius: 9999px !important;
    height: 100%;
    transition: width 1s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.neon-progress-bar::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
    animation: progress-shimmer 2.2s infinite linear;
    pointer-events: none;
}

@keyframes progress-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.neon-progress-tip {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 2px solid var(--color-brand);
    border-radius: 50% !important;
    box-shadow: 0 0 12px #ffffff, 0 0 20px var(--color-brand) !important;
    animation: tip-pulse 1.6s infinite alternate ease-in-out;
    z-index: 10;
    transition: left 1s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

@keyframes tip-pulse {
    0% { transform: translateY(-50%) scale(0.9); box-shadow: 0 0 10px #ffffff, 0 0 12px var(--color-brand); }
    100% { transform: translateY(-50%) scale(1.25); box-shadow: 0 0 15px #ffffff, 0 0 25px var(--color-brand); }
}

/* ========================================= */
/* FUTURISTIC NEON RANGE SLIDERS             */
/* ========================================= */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    width: 100%;
    height: 6px;
    border-radius: 9999px;
    outline: none;
    background: #18181b !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    position: relative;
    transition: border-color 0.3s ease;
}

input[type="range"]:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    height: 6px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -6px;
    height: 18px;
    width: 18px;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    background-image: radial-gradient(circle, #ffffff 30%, var(--color-brand) 70%) !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 10px var(--color-brand-glow), inset 0 0 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.3) !important;
    box-shadow: 0 0 15px #ffffff, 0 0 25px var(--color-brand), 0 0 40px var(--color-brand-glow) !important;
    border-color: var(--color-brand) !important;
}

input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.45) !important;
    box-shadow: 0 0 20px #ffffff, 0 0 35px var(--color-brand), 0 0 50px var(--color-brand) !important;
}

input[type="range"]::-moz-range-track {
    background: transparent;
    height: 6px;
}

input[type="range"]::-moz-range-thumb {
    border: 2px solid #ffffff !important;
    height: 18px;
    width: 18px;
    border-radius: 50% !important;
    box-shadow: 0 0 10px var(--color-brand-glow), 0 0 20px var(--color-brand-glow-light) !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.3) !important;
    box-shadow: 0 0 15px #ffffff, 0 0 25px var(--color-brand), 0 0 40px var(--color-brand-glow) !important;
    border-color: var(--color-brand) !important;
}

input[type="range"]::-moz-range-thumb:active {
    transform: scale(1.45) !important;
    box-shadow: 0 0 20px #ffffff, 0 0 35px var(--color-brand), 0 0 50px var(--color-brand) !important;
}

.level-badge-glow {
    background: rgba(var(--color-brand-glow-hex), 0.12) !important;
    border: 1px solid var(--color-brand-glow-light) !important;
    padding: 3px 12px !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    text-shadow: 0 0 8px var(--color-brand-glow) !important;
    box-shadow: 0 0 15px var(--color-brand-glow-very-light) !important;
    display: inline-block;
    transition: all 0.3s ease;
}

/* ========================================= */
/* ULTRA-PREMIUM INFINITE NEON LASER BORDER   */
/* ========================================= */
.neon-border-card {
    position: relative !important;
    background: #0d0d0f !important;
    border-radius: 2.5rem !important;
    z-index: 1;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease-out !important;
}

.neon-border-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.95), 0 0 35px var(--color-brand-glow-light) !important;
}

.card-neon-orbit {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -2;
}

.card-neon-orbit::before {
    content: '';
    position: absolute;
    top: -50%; 
    left: -50%;
    width: 200%; 
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 35%,
        var(--color-brand) 45%,
        #ff8c00 50%,
        var(--color-brand) 55%,
        transparent 65%
    ) !important;
    animation: orbit-laser 4s infinite linear;
    pointer-events: none;
}

@keyframes orbit-laser {
    100% { transform: rotate(360deg); }
}

.neon-border-card::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: #0d0d0f !important;
    border-radius: calc(2.5rem - 1.5px) !important;
    z-index: -1;
    pointer-events: none;
}

/* ========================================= */
/* HOLOGRAPHIC CYBER CARDS & MAGNIFIER LENS  */
/* ========================================= */
.account-premium-card {
    background: linear-gradient(135deg, rgba(20, 20, 22, 0.7) 0%, rgba(10, 10, 12, 0.9) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    position: relative;
    overflow: hidden;
}

.account-premium-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: var(--color-brand-glow-light) !important;
    box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.9), 0 0 30px var(--color-brand-glow-very-light) !important;
}

.magnifier-container {
    position: relative;
    overflow: hidden;
    cursor: none !important;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
}

.scanner-lens {
    position: absolute;
    width: 130px;
    height: 130px;
    border: 2px solid var(--color-brand) !important;
    border-radius: 50% !important;
    pointer-events: none;
    box-shadow: 0 0 25px var(--color-brand-glow), inset 0 0 15px var(--color-brand-glow-light) !important;
    z-index: 20;
    display: none;
    transform: translate(-50%, -50%);
}

.scanner-lens::before, .scanner-lens::after {
    content: '';
    position: absolute;
    background: var(--color-brand-glow-light) !important;
}

.scanner-lens::before {
    top: 50%; 
    left: 10%; 
    width: 80%; 
    height: 1px;
    transform: translateY(-50%);
}

.scanner-lens::after {
    top: 10%; 
    left: 50%; 
    width: 1px; 
    height: 80%;
    transform: translateX(-50%);
}

.scanner-reticle {
    position: absolute;
    width: 110px;
    height: 110px;
    border: 1px dashed rgba(255, 255, 255, 0.35) !important;
    border-radius: 50% !important;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate-scanner 12s infinite linear;
}

@keyframes rotate-scanner {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ========================================= */
/* ГАЛАКТИЧЕСКАЯ НЕОНОВАЯ КНОПКА ЧАТА (ORB)   */
/* ========================================= */
#chat-btn {
    background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 100%) !important;
    box-shadow: 0 0 15px var(--color-brand-glow), 0 0 30px var(--color-brand-glow-light), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    animation: orb-bounce 3s infinite alternate ease-in-out !important;
    cursor: pointer;
}

#chat-btn::before {
    content: '';
    position: absolute;
    width: 74px;
    height: 74px;
    border: 1.5px dashed var(--color-brand-glow-light) !important;
    border-radius: 50% !important;
    animation: rotate-ring 8s infinite linear !important;
    pointer-events: none;
}

@keyframes orb-bounce {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-6px) scale(1.04); }
}

@keyframes rotate-ring {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.typing-wave {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 6px;
}

.typing-dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-brand) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px var(--color-brand-glow) !important;
    animation: wave-bounce 1.2s infinite ease-in-out !important;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s !important; }
.typing-dot:nth-child(3) { animation-delay: 0.4s !important; }

.chat-message-bounce {
    animation: msg-slide-in 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes msg-slide-in {
    0% { transform: translateY(12px) scale(0.95); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ========================================= */
/* HOLOGRAPHIC CYBER PRELOADER & SPA SHIMMER  */
/* ========================================= */
.hologram-preloader {
    position: fixed !important;
    inset: 0 !important;
    background: #08080a !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    pointer-events: none;
    opacity: 1;
}

.preloader-hidden {
    opacity: 0 !important;
}

.cyber-loader-glyph {
    width: 80px;
    height: 80px;
    position: relative;
    margin-bottom: 24px;
}

.cyber-loader-bolt {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    animation: bolt-shimmer 1.5s infinite alternate ease-in-out !important;
    text-shadow: 0 0 15px var(--color-brand) !important;
}

@keyframes bolt-shimmer {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; filter: brightness(0.8); }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; filter: brightness(1.25); }
}

.page-fade-in {
    animation: fade-in-cinematic 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes fade-in-cinematic {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@media (max-width: 640px) {
    #chat-win {
        width: calc(100vw - 32px) !important;
        right: 16px !important;
        bottom: 80px !important;
    }
}

/* ========================================= */
/* HOLOGRAPHIC RAID BOARDING PASS TICKETS    */
/* ========================================= */
.holographic-raid-ticket {
    background: linear-gradient(135deg, rgba(20, 20, 22, 0.75) 0%, rgba(10, 10, 12, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.holographic-raid-ticket:hover {
    border-color: var(--color-brand-glow-light) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9), 0 0 20px var(--color-brand-glow-very-light) !important;
    background: linear-gradient(135deg, rgba(25, 25, 28, 0.8) 0%, rgba(15, 15, 18, 0.98) 100%) !important;
}

.ticket-stub-separator {
    width: 1px;
    height: 100%;
    border-left: 2px dashed rgba(255, 255, 255, 0.08) !important;
    position: relative;
}

.ticket-stub-separator::before, .ticket-stub-separator::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #08080a !important;
    border-radius: 50% !important;
    left: -9px;
    z-index: 10;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
}
.ticket-stub-separator::before { top: -24px; border: 1px solid rgba(255, 255, 255, 0.05); border-top: none; }
.ticket-stub-separator::after { bottom: -24px; border: 1px solid rgba(255, 255, 255, 0.05); border-bottom: none; }

.led-cell {
    flex: 1;
    height: 6px;
    border-radius: 2px !important;
    transition: all 0.3s ease;
}
.led-cell-booked {
    background-color: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.02) !important;
}
.led-cell-open {
    background-color: var(--color-brand) !important;
    box-shadow: 0 0 8px var(--color-brand-glow-light), 0 0 2px var(--color-brand) !important;
}

.raid-description-slide {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    background: rgba(0, 0, 0, 0.35);
    border-top: 0 solid rgba(255, 255, 255, 0.05);
}
.raid-description-active {
    max-height: 250px !important;
    border-top-width: 1px !important;
}

/* ========================================= */
/* CYBER CONSOLE HUD TERMINAL CHECKOUT       */
/* ========================================= */
.cyber-console-card {
    position: relative !important;
    background: #0d0d0f !important;
    border: 1px solid rgba(255, 69, 0, 0.25) !important;
    box-shadow: 0 0 50px rgba(255, 69, 0, 0.15), inset 0 0 30px rgba(0, 0, 0, 0.85) !important;
    transition: all 0.3s ease-in-out;
}

.cyber-console-card::before, .cyber-console-card::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2.5px solid var(--color-brand) !important;
    pointer-events: none;
    z-index: 10;
}

.cyber-console-card::before {
    top: -1px; 
    left: -1px;
    border-right: none !important;
    border-bottom: none !important;
}

.cyber-console-card::after {
    bottom: -1px; 
    right: -1px;
    border-left: none !important;
    border-top: none !important;
}

/* ========================================= */
/* КНОПКИ ДИНАМИЧЕСКОЙ СТРАНИЧНОЙ ПАГИНАЦИИ   */
/* ========================================= */
.pagination-btn {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 8px 16px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #71717a !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
}
.pagination-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
.pagination-btn:disabled {
    opacity: 0.25 !important;
    cursor: not-allowed !important;
}
.pagination-active {
    background: var(--color-brand) !important;
    color: #ffffff !important;
    border-color: var(--color-brand-glow-light) !important;
    box-shadow: 0 0 15px var(--color-brand-glow-very-light) !important;
}

/* ========================================= */
/* ПРЕМЙАЛЬНЫЙ ПУЛЬТ УПРАВЛЕНИЯ КАТАЛОГОМ    */
/* ========================================= */
.cyber-dashboard-bar {
    background: linear-gradient(135deg, rgba(20, 20, 22, 0.5) 0%, rgba(10, 10, 12, 0.75) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 14px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.cyber-select-capsule {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding: 8px 16px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease;
}
.cyber-select-capsule:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.02);
}
.cyber-select-capsule select {
    background: transparent !important;
    color: #a1a1aa !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    outline: none !important;
    border: none !important;
    cursor: pointer;
}
.cyber-select-capsule select option {
    background-color: #141416 !important;
    color: #ffffff !important;
}

/* ========================================= */
/* ПРЕМИАЛЬНЫЙ КОКПИТ ПЕРВОГО ЭКРАНА (HERO)   */
/* ========================================= */
.cyber-hero-container {
    position: relative !important;
    width: 100% !important;
    height: 650px !important;
    overflow: hidden !important;
    background-color: #070709 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Параллакс-слой */
.parallax-layer {
    position: absolute !important;
    inset: -20px !important;
    width: calc(100% + 40px) !important;
    height: calc(100% + 40px) !important;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    background-size: cover !important;
    background-position: center center !important;
    pointer-events: none !important;
}

/* Насыщенный локальный CSS-градиент */
.hero-bg-layer {
    background-color: #08080a !important;
    background-image: 
        radial-gradient(circle at 75% 30%, rgba(168, 85, 247, 0.55) 0%, transparent 65%),
        radial-gradient(circle at 20% 70%, rgba(255, 69, 0, 0.45) 0%, transparent 65%),
        radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.35) 0%, transparent 55%),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
    background-size: 100% 100%, 100% 100%, 100% 100%, 32px 32px, 32px 32px !important;
    z-index: 1 !important;
}

.hero-fog-layer {
    background: radial-gradient(circle at 60% 50%, rgba(var(--color-brand-glow-hex), 0.15) 0%, rgba(0, 0, 0, 0) 60%),
                radial-gradient(circle at 80% 60%, rgba(56, 189, 248, 0.12) 0%, rgba(0, 0, 0, 0) 50%) !important;
    z-index: 2 !important;
    mix-blend-mode: screen !important;
}

/* Мягкий вертикальный переход вместо круговой маски, оставляющий середину полностью открытой */
.hero-foreground-layer {
    background: linear-gradient(to bottom, rgba(8, 8, 10, 0.4) 0%, transparent 20%, transparent 80%, #08080a 100%) !important;
    z-index: 3 !important;
}

/* Сетка контента */
.cyber-hero-content {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 80rem !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Левая колонка с текстом */
.cyber-hero-text-col {
    max-width: 600px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* Изящная статус-капсула вместо убогого Established */
.cyber-status-bar {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(var(--color-brand-glow-hex), 0.08) !important;
    border: 1px solid rgba(var(--color-brand-glow-hex), 0.25) !important;
    padding: 6px 14px !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 15px rgba(var(--color-brand-glow-hex), 0.12) !important;
    align-self: flex-start !important;
}

.cyber-status-pulse {
    width: 6px !important;
    height: 6px !important;
    background-color: var(--color-brand) !important;
    border-radius: 50% !important;
    display: block !important;
    flex-shrink: 0 !important;
    animation: status-ping 1.6s infinite alternate ease-in-out !important;
}

@keyframes status-ping {
    0% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 0 0 rgba(var(--color-brand-glow-hex), 0.5); }
    100% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px var(--color-brand); }
}

.cyber-status-text {
    color: var(--color-brand) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    text-shadow: 0 0 8px var(--color-brand-glow-light) !important;
}

/* Правая колонка с порталом и мечом */
.cyber-hero-portal-col {
    display: none !important;
    position: relative !important;
    width: 400px !important;
    height: 400px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
}

@media (min-width: 1024px) {
    .cyber-hero-portal-col {
        display: flex !important;
    }
}

/* Свечение ядра портала */
.cyber-portal-glow {
    position: absolute !important;
    width: 300px !important;
    height: 300px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at center, var(--color-brand-glow) 0%, transparent 70%) !important;
    opacity: 0.45 !important;
    animation: portal-pulse 3s infinite alternate ease-in-out !important;
}

@keyframes portal-pulse {
    0% { opacity: 0.35; transform: scale(0.95); }
    100% { opacity: 0.55; transform: scale(1.05); }
}

/* Кольцевой рунический круг портала */
.cyber-portal-ring {
    position: absolute !important;
    width: 280px !important;
    height: 280px !important;
    border: 2px dashed var(--color-brand-glow-light) !important;
    border-radius: 50% !important;
    animation: rotate-portal 16s infinite linear !important;
    box-shadow: 0 0 25px var(--color-brand-glow-very-light), inset 0 0 25px var(--color-brand-glow-very-light) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
}

.cyber-portal-ring::before {
    content: '⚡ 👑 ⚔️ ✦ 👑 ⚡ 👑 ⚔️ ✦ 👑' !important;
    position: absolute !important;
    color: var(--color-brand) !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-shadow: 0 0 8px var(--color-brand-glow) !important;
    letter-spacing: 16px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    animation: rotate-runes 25s infinite linear !important;
}

@keyframes rotate-portal {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotate-runes {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

/* Объемные световые лучи прожекторов */
.cyber-portal-shaft-1, .cyber-portal-shaft-2 {
    position: absolute !important;
    width: 2px !important;
    height: 450px !important;
    background: linear-gradient(to bottom, transparent, var(--color-brand-glow-light), transparent) !important;
    filter: blur(4px) !important;
    opacity: 0.3 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}
.cyber-portal-shaft-1 {
    transform: rotate(35deg) translate(-50px, -20px) !important;
}
.cyber-portal-shaft-2 {
    transform: rotate(-35deg) translate(50px, -20px) !important;
}

/* Парящие искры внутри портала */
.portal-spark {
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px var(--color-brand) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* Живой зацикленный видео-скелет на странице */
.cyber-hero-character {
    position: absolute !important;
    width: 380px !important; /* Идеальный размер скелета */
    height: auto !important;
    bottom: -10px !important;
    z-index: 5 !important;
    pointer-events: none !important;
    mix-blend-mode: screen !important; /* Стирает темный фон видео-ролика на лету! */
    filter: drop-shadow(0 0 25px var(--color-brand-glow-light)) !important;
    animation: character-float 4.5s infinite alternate ease-in-out !important;
}

@keyframes character-float {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-14px) scale(1.03); }
}

/* Парящий 3D-Клинок */
.cyber-sword-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transform: rotate(-15deg) !important;
    animation: sword-hover 4s infinite alternate ease-in-out !important;
    z-index: 4 !important;
}

@keyframes sword-hover {
    0% { transform: rotate(-15deg) translateY(-12px); }
    100% { transform: rotate(-13deg) translateY(12px); }
}

.cyber-blade-glow {
    width: 8px !important;
    height: 280px !important;
    background: linear-gradient(to top, var(--color-brand-dark), #ffffff, var(--color-brand)) !important;
    box-shadow: 0 0 30px var(--color-brand), 0 0 10px #ffffff !important;
    border-radius: 9999px !important;
    position: relative !important;
    z-index: 4 !important;
}

.cyber-guard {
    width: 80px !important;
    height: 12px !important;
    background: #18181b !important;
    border: 1.5px solid var(--color-brand) !important;
    box-shadow: 0 0 15px var(--color-brand-glow) !important;
    border-radius: 4px !important;
    margin-top: -2px !important;
    z-index: 5 !important;
}

.cyber-grip {
    width: 10px !important;
    height: 70px !important;
    background: linear-gradient(180deg, #27272a, #09090b) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 9999px !important;
    margin-top: -2px !important;
    z-index: 4 !important;
}

.cyber-pommel {
    width: 16px !important;
    height: 16px !important;
    background: radial-gradient(circle, #ffffff 20%, var(--color-brand) 60%, #18181b 100%) !important;
    border: 1.5px solid var(--color-brand) !important;
    box-shadow: 0 0 15px var(--color-brand-glow) !important;
    border-radius: 50% !important;
    margin-top: -4px !important;
    z-index: 5 !important;
}
/* ======================================================= */
/* 📱 СРОЧНАЯ МОБИЛЬНАЯ АДАПТАЦИЯ (ДОБАВИТЬ В САМЫЙ КОНЕЦ) */
/* ======================================================= */
@media (max-width: 768px) {
    /* Ровняем первый экран по центру и убираем жесткую высоту */
    .cyber-hero-container {
        height: auto !important;
        padding: 110px 16px 60px 16px !important;
    }
    .cyber-hero-content {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important;
    }
    .cyber-hero-text-col {
        align-items: center !important;
        text-align: center !important;
        max-width: 100% !important;
    }
    .cyber-status-bar {
        align-self: center !important;
    }
    .hero-title-glow {
        font-size: 2.2rem !important; /* Уменьшаем шрифт главного заголовка */
        line-height: 1.15 !important;
        text-align: center !important;
    }
    .cyber-hero-text-col p {
        text-align: center !important;
        font-size: 13px !important;
    }
}

/* Корректировка карточек на маленьких экранах */
@media (max-width: 640px) {
    .obsidian-card {
        border-radius: 1.5rem !important;
    }
    .obsidian-card img {
        height: 120px !important;
    }
}
/* Вытаскиваем всплывающее облако-приглашение поддержки поверх любых карт, футеров и рамок */
#chat-invite-bubble {
    z-index: 999998 !important;
}

/* Оранжевая круглая кнопка чата должна быть еще выше, накладываясь поверх облака */
#chat-btn {
    z-index: 999999 !important;
}
/* ======================================================= */
/* 🛠️ ФИКСЫ НАЛОЖЕНИЙ И БАДЖЕЙ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ        */
/* ======================================================= */

/* Поднимаем калькулятор и любые модальные окна выше шапки */
#calcModal, #cartModal, #cartCheckoutModal, #accountDetailsModal {
    z-index: 2000 !important;
}

/* Сдвигаем бадж корзины чуть ниже, чтобы его не срезало экраном */
#cartCountBadge {
    top: -2px !important;
    right: -2px !important;
}
/* ======================================================= */
/* 🛠️ ФИКС ПРОКРУТКИ И КРЕСТИКА ЗАКРЫТИЯ КАЛЬКУЛЯТОРА      */
/* ======================================================= */
@media (max-width: 768px) {
    /* Разрешаем всей подложке модального окна плавно скроллиться на телефонах */
    #calcModal, #cartModal, #cartCheckoutModal, #accountDetailsModal {
        align-items: flex-start !important; /* Выравниваем по верху, а не по центру */
        overflow-y: auto !important;        /* Включаем вертикальный скролл */
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        display: none;                      /* Базово скрыто, при активации станет flex */
    }
    
    #calcModal.flex, #cartModal.flex, #cartCheckoutModal.flex, #accountDetailsModal.flex {
        display: flex !important;
    }

    /* Делаем внутреннюю карточку калькулятора адаптивной по высоте */
    #calcModal > div, #cartModal > div, #cartCheckoutModal > div, #accountDetailsModal > div {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
    }
}
/* ======================================================= */
/* 🛠️ ИДЕАЛЬНЫЙ МОБИЛЬНЫЙ АДАПТИВ ОКНА ЧАТА               */
/* ======================================================= */
@media (max-width: 768px) {
    #chat-win {
        /* Окно чата займет всю ширину экрана за вычетом аккуратных отступов по 16px */
        width: calc(100vw - 32px) !important; 
        
        /* Растягиваем высоту почти на весь экран смартфона */
        height: calc(100vh - 140px) !important; 
        max-height: none !important;
        
        /* Идеально центрируем окно на дисплее */
        right: 16px !important;
        left: 16px !important;
        bottom: 80px !important;
        
        border-radius: 24px !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }
    
    /* Оптимизируем внутренние отступы сообщений для мобилок */
    #chat-widget-messages {
        padding: 12px !important;
    }
}
/* Полностью скрываем спамящий тикер фейк-покупок на мобильных экранах */
@media (max-width: 768px) {
    #live-ticker {
        display: none !important;
    }
}
/* Фикс наложения шапки на заголовки страниц (сдвигаем контент ниже) */
main {
    padding-top: 110px !important;
}

@media (max-width: 768px) {
    main {
        padding-top: 85px !important; /* Меньший отступ под мобильную шапку */
    }
}
select option {
    background-color: #121214 !important; /* Принудительно делаем фон списка темным */
    color: #ffffff !important;            /* Белый цвет текста */
}

/* ========================================================================= */
/* 🛠️ ПРЕМЙАЛЬНАЯ ВЫДВИЖНАЯ БОКОВАЯ КОРЗИНА (CART SLIDING DRAWER)            */
/* ========================================================================= */
.cart-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2500 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important; /* Центрируем модалку на ПК! */
}

.cart-drawer.drawer-open {
    display: flex !important;
}

.drawer-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    transition: opacity 0.3s ease !important;
    z-index: 5 !important;
}

.drawer-content {
    position: relative !important;
    width: 100% !important;
    max-width: 850px !important;    /* Увеличили ширину на ПК для двух колонок! */
    height: auto !important;        /* Высота подстроится сама под контент на ПК */
    max-height: 85vh !important;    /* Ограничиваем высоту, чтобы не вылезала за экран */
    background: #0d0d0f !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 2.5rem !important; /* Красивые скругленные углы на ПК */
    box-shadow: 0 40px 80px rgba(0,0,0,0.95), 0 0 50px var(--color-brand-glow-very-light) !important;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease !important;
    z-index: 10 !important;
}

.cart-drawer.drawer-open .drawer-content {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* 🔔 УМНОЕ СКРЫТИЕ ЧАТА ПРИ ОТКРЫТОЙ КОРЗИНЕ (чтобы не было наложений и перекрытий) */
#cartDrawer.drawer-open ~ #chat-btn {
    display: none !important;
}
#cartDrawer.drawer-open ~ #chat-invite-bubble {
    display: none !important;
}

/* ======================================================= */
/* 🖥️ ПК-ВЕРСИЯ: ПРИНУДИТЕЛЬНОЕ ВОССТАНОВЛЕНИЕ РАЗМЕРОВ ПК */
/* ======================================================= */
.header-inner-flex {
    padding: 16px 24px !important;
    gap: 16px !important;
}

.logo-text {
    font-size: 18px !important;
    letter-spacing: 1px !important;
}

#all-games-btn-node {
    padding: 8px 12px !important;
    font-size: 10px !important;
}

.btn-neon-signin {
    padding: 10px 16px !important;
    font-size: 10px !important;
}

.nav-link-neon {
    font-size: 12px !important;
}

/* ======================================================= */
/* 📱 СУПЕР-ТОЧНЫЕ МОБИЛЬНЫЕ ПРАВИЛА (<= 768px)            */
/* ======================================================= */
@media (max-width: 768px) {
    /* Фикс наложения шапки на заголовки страниц */
    main {
        padding-top: 85px !important;
    }

    /* 1. Фикс авто-приближения (зума) Safari на iOS при клике на любые инпуты */
    input, textarea, select, 
    #chat-win input, 
    #chat-win textarea, 
    #orderChatInput, 
    #cabinetChatInput,
    #cartGuestEmail,
    #cartCharName,
    #cartContact,
    #cartCouponInput {
        font-size: 16px !important;
    }

    /* 2. Сдвигаем и адаптируем окно чата, чтобы оно не залезало под шапку сайта */
    #chat-win {
        width: calc(100vw - 32px) !important; 
        left: 16px !important;
        right: 16px !important;
        
        top: 80px !important;       
        bottom: 90px !important;    
        height: auto !important;    
        max-height: none !important;
        
        border-radius: 24px !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    /* 3. Шторка корзины на мобильных перестраивается в полный экран (как у Blazing Boost) */
    .cart-drawer {
        justify-content: center !important;
        align-items: center !important;
    }
    .drawer-content {
        max-width: 100% !important; /* На весь экран смартфона */
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important; /* Убираем скругления на весь экран */
        border: none !important;
    }
    .drawer-overlay {
        display: none !important; /* Убираем затемнение на телефонах */
    }
    .drawer-header {
        padding: 12px 16px !important;
        height: 56px !important;
    }
    .drawer-body {
        padding: 16px !important;
    }
    .drawer-footer {
        padding: 16px !important;
    }

    /* Сжатие элементов шапки, чтобы всё идеально умещалось в ширину экрана телефона */
    .header-inner-flex {
        padding: 10px 10px !important; 
        gap: 6px !important;           
    }

    /* Делаем логотип компактнее */
    .logo-text {
        font-size: 13px !important;
        letter-spacing: 0.5px !important;
    }

    /* Уменьшаем кнопку переключения игр */
    #all-games-btn-node {
        padding: 5px 8px !important;
        font-size: 9px !important;
    }

    /* Уменьшаем кнопку входа в личный кабинет */
    .btn-neon-signin {
        padding: 6px 10px !important;
        font-size: 9px !important;
    }

    /* Уменьшаем капсулу авторизованного профиля */
    .cyber-profile-capsule {
        padding: 4px 8px !important;
        gap: 6px !important;
    }
    .cyber-profile-link {
        font-size: 9px !important;
    }
}

/* ======================================================= */
/* 🛠️ ФИКСЫ ШРИФТОВ ДЛЯ ANDROID/CHROME (TEXT INFLATION)     */
/* ======================================================= */
html, body, div, span, p, a, button, select {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

.btn-neon-signin {
    white-space: nowrap !important;
    min-width: max-content !important;
}

/* ======================================================= */
/* 💻 АДАПТИВ ДЛЯ НОУТБУКОВ И СРЕДНИХ ЭКРАНОВ (MACBOOK & LAPTOPS <= 1366px) */
/* ======================================================= */
@media (max-width: 1366px) and (min-width: 769px) {
    /* Сжимаем боковые поля и зазоры между блоками шапки */
    .header-inner-flex {
        padding: 12px 16px !important;
        gap: 10px !important;
    }
    
    /* Слегка ужимаем поисковую строку */
    .cyber-search-wrapper-container {
        width: 140px !important;
    }
    
    /* Сближаем ссылки навигационного меню */
    .cyber-nav-links-wrapper {
        gap: 12px !important;
    }
    
    .nav-link-neon {
        font-size: 11px !important; /* Слегка уменьшаем шрифт меню */
    }

    /* Делаем кнопки компактнее, чтобы всё уместилось */
    #all-games-btn-node {
        padding: 6px 10px !important;
        font-size: 9px !important;
    }

    .btn-neon-signin {
        padding: 8px 12px !important;
        font-size: 9px !important;
    }

    .cyber-profile-capsule {
        padding: 4px 10px !important;
        gap: 8px !important;
    }
}
/* ======================================================= */
/* 🚀 АППАРАТНОЕ УСКОРЕНИЕ АНИМАЦИЙ (HARDWARE ACCELERATION) */
/* ======================================================= */
.cyber-portal-ring, .cyber-portal-glow, .cyber-portal-shaft-1, .cyber-portal-shaft-2, 
.card-neon-orbit::before, .cyber-hero-character, .parallax-layer, .obsidian-card-3d, .neon-border-card {
    will-change: transform, opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* ======================================================= */
/* 🛠️ ФИКС ДЕРГАНИЯ/МЕРЦАНИЯ НИЖНЕЙ ГРАНИЦЫ ШАПКИ НА ПК     */
/* ======================================================= */

/* Выносим шапку на независимый GPU-слой для защиты от сбоев размытия */
#header-container {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    will-change: transform, backdrop-filter !important;
}

/* Округляем высоту линии и запрещаем браузеру реагировать на мышь на границе */
.animated-header-border {
    position: absolute; 
    bottom: -1px; /* Сдвигаем на 1px вниз, чтобы перекрыть стык */
    left: 0; 
    width: 100%; 
    height: 2px !important; /* Целое число пикселей (защита от дёргания) */
    background: linear-gradient(90deg, rgba(var(--color-brand-glow-hex),0) 0%, var(--color-brand) 50%, rgba(var(--color-brand-glow-hex),0) 100%);
    background-size: 200% 100%; 
    animation: border-glow-slide 4s infinite linear;
    pointer-events: none !important; /* УБИРАЕТ ДЁРГАНИЕ: Линия становится прозрачной для курсора */
    z-index: 30;
}
/* ======================================================= */
/* 💎 ЭЛИТНЫЙ ФИКС НАЛОЖЕНИЙ И СЖАТИЯ ШАПКИ (RESPONSIVE HEADER) */
/* ======================================================= */

/* На экранах ноутбуков и планшетов (<= 1280px) скрываем длинный ряд ссылок.
   Пользователь может легко открыть их в 1 клик через меню "Games ⚔️",
   что полностью освобождает пространство шапки и убирает кашу. */
@media (max-width: 1280px) {
    .cyber-nav-links-wrapper {
        display: none !important;
    }
}

/* На экранах ноутбуков поменьше (<= 1024px) плавно скрываем и поиск,
   чтобы критически важные элементы (Профиль, Корзина, Лого) не слипались */
@media (max-width: 1024px) {
    .cyber-search-wrapper-container, 
    #headerSearch {
        display: none !important;
    }
}

/* Ограничиваем максимальную ширину внутренней флекс-шапки */
.header-inner-flex {
    max-width: 1440px !important;
    width: 100% !important;
}

/* ======================================================= */
/* 🛠️ ФИКС НАЛОЖЕНИЯ ЦИФР В КАРТОЧКАХ "HOW IT WORKS"       */
/* ======================================================= */

/* Сдвигаем цифры 1, 2, 3 на задний план и делаем их очень тонкими водяными знаками */
.how-it-works-number {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    font-size: 3.5rem !important; /* Делаем цифру крупнее, но невесомее */
    font-weight: 900 !important;
    color: rgba(255, 255, 255, 0.04) !important; /* Едва заметный стильный блик на фоне */
    z-index: 1 !important; /* Уходит под текст */
    pointer-events: none;
    user-select: none;
    line-height: 1 !important;
}

/* Гарантируем, что заголовки шагов всегда выше фона и имеют отступ справа, чтобы не коснуться цифры */
.how-it-works-title {
    position: relative !important;
    z-index: 10 !important;
    padding-right: 45px !important; /* Безопасная зона */
}
/* ======================================================= */
/* ⚡ ХАЙ-ТЕК МЕТАЛЛИЧЕСКИЙ СВЕТОВОЙ БЛИК НА КНОПКАХ (AAA)    */
/* ======================================================= */
@keyframes button-sweep {
    0% { left: -120%; }
    40% { left: 120%; }
    100% { left: 120%; }
}

.btn-sheen {
    position: relative !important;
    overflow: hidden !important;
}

.btn-sheen::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -120% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: skewX(-25deg) !important;
    animation: button-sweep 5s infinite ease-in-out !important;
    pointer-events: none !important;
    z-index: 10;
}
/* ======================================================= */
/* 💎 ЭЛИТНЫЙ КЛАСС ДЛЯ КНОПКИ ПРИЗЫВА К ПОКУПКЕ (ULTIMATE CTA) */
/* ======================================================= */
.btn-ultimate-cta {
    background: linear-gradient(135deg, var(--color-brand) 0%, #ff8c00 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    box-shadow: 
        0 4px 15px rgba(var(--color-brand-glow-hex), 0.3), 
        0 0 0 1px rgba(255,255,255,0.1) inset,
        inset 0 -4px 8px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.btn-ultimate-cta:hover {
    transform: translateY(-2px) scale(1.02) !important;
    background: linear-gradient(135deg, #ff5500 0%, #ff9e1b 100%) !important;
    box-shadow: 
        0 15px 30px rgba(var(--color-brand-glow-hex), 0.55), 
        0 0 20px var(--color-brand-glow),
        inset 0 -2px 4px rgba(0, 0, 0, 0.15) !important;
}

.btn-ultimate-cta:active {
    transform: translateY(1px) scale(0.98) !important;
}

/* Бегущий блик высокой четкости */
.btn-ultimate-cta::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transform: skewX(-25deg) !important;
    animation: cta-sheen-sweep 4s infinite ease-in-out !important;
}

@keyframes cta-sheen-sweep {
    0% { left: -150%; }
    30% { left: 150%; }
    100% { left: 150%; }
}

/* Стильный неоновый пульсирующий контур для всей карточки покупки */
.glowing-sidebar-card {
    border-color: rgba(var(--color-brand-glow-hex), 0.25) !important;
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 0.95), 
        0 0 40px rgba(var(--color-brand-glow-hex), 0.05) !important;
    animation: card-border-pulse 4s infinite alternate ease-in-out;
}

@keyframes card-border-pulse {
    0% { border-color: rgba(var(--color-brand-glow-hex), 0.15); box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.95), 0 0 30px rgba(var(--color-brand-glow-hex), 0.02); }
    100% { border-color: rgba(var(--color-brand-glow-hex), 0.35); box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.95), 0 0 50px rgba(var(--color-brand-glow-hex), 0.08); }
}
/* ======================================================= */
/* 💎 БЕЗУПРЕЧНЫЕ ГРАНИЦЫ И СТИЛЬ КАРТОЧЕК (CYBER INTERACTIVE) */
/* ======================================================= */
.interactive-cyber-card {
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Базовая обводка возвращена и зафиксирована! */
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    position: relative !important;
}

.interactive-cyber-card:hover {
    transform: translateY(-4px) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: var(--color-brand-glow-light) !important;
    box-shadow: 
        0 20px 40px -15px rgba(0, 0, 0, 0.95), 
        0 0 20px var(--color-brand-glow-very-light) !important;
}

/* ======================================================= */
/* 🛡️ ОЧИЩЕННАЯ И КРАСИВАЯ ШАПКА ХАРАКТЕРИСТИК ТОВАРА        */
/* ======================================================= */
.service-category-badge-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
}

.service-category-label {
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: var(--color-brand) !important;
}

.service-safety-label {
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #4ade80 !important; /* Зеленый контур */
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.service-features-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #71717a !important; /* Умеренно серый цвет */
}

.service-features-strip .feature-item {
    display: flex !important;
    align-items: center !important;
    margin-right: 28px !important; /* Жесткий, гарантированный отступ справа */
    margin-bottom: 8px !important;
}

.service-features-strip .feature-bullet {
    color: var(--color-brand) !important;
    margin-right: 8px !important;
    font-size: 12px !important;
}

/* ======================================================= */
/* 🔥 УЛЬТИМАТИВНАЯ КНОПКА С ФИКСИРОВАННЫМИ РАЗМЕРАМИ       */
/* ======================================================= */
.btn-ultimate-cta {
    display: block !important;
    width: 100% !important;
    padding: 16px 20px !important; /* Внутренние отступы жестко в пикселях */
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    border-radius: 16px !important;
    border: none !important;
}
/* ========================================================================= */
/* 🌌 УЛЬТИМАТИВНАЯ ПАНЕЛЬ НАВИГАЦИИ ПО РАЗДЕЛАМ (BLAZING-STYLE CYBER NAVBAR) */
/* ========================================================================= */
.cyber-category-navbar-container {
    width: 100% !important;
    margin-top: 16px !important;
    padding: 6px 4px 14px 4px !important;
    position: relative !important;
    z-index: 40 !important;
}

.cyber-category-navbar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.cyber-category-node {
    position: relative !important;
    background: rgba(20, 20, 22, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 20px !important;
    padding: 14px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 115px !important;
    height: 95px !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    user-select: none !important;
}

.cyber-category-node:hover {
    /* Физический сдвиг translateY удален во избежание циклической тряски на границе */
    border-color: var(--color-brand-glow-light) !important;
    background: rgba(var(--color-brand-glow-hex), 0.04) !important;
    box-shadow: 
        0 15px 30px -10px rgba(0, 0, 0, 0.95), 
        0 0 20px var(--color-brand-glow-very-light) !important;
}

.cyber-category-node-active {
    background: rgba(var(--color-brand-glow-hex), 0.1) !important;
    border-color: var(--color-brand) !important;
    box-shadow: 
        0 10px 25px -5px rgba(var(--color-brand-glow-hex), 0.3),
        0 0 15px var(--color-brand-glow-very-light) !important;
}

.node-icon-container {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.cyber-category-node:hover .node-icon-container {
    transform: scale(1.12) rotate(3deg) !important;
    background: rgba(var(--color-brand-glow-hex), 0.15) !important;
    border-color: var(--color-brand-glow-light) !important;
}

.cyber-category-node-active .node-icon-container {
    background: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
    box-shadow: 0 0 10px var(--color-brand-glow) !important;
}

.node-text-label {
    font-size: 9px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #71717a !important; /* text-zinc-500 */
    margin-top: 10px !important;
    text-align: center !important;
    transition: color 0.3s ease !important;
}

.cyber-category-node:hover .node-text-label,
.cyber-category-node-active .node-text-label {
    color: #ffffff !important;
}

/* 🏷️ ПУЛЬСИРУЮЩИЕ МИКРО-БАДЖИ НОВОСТЕЙ (HOT/NEW) */
.node-micro-badge {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    padding: 2.5px 6px !important;
    border-radius: 6px !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    z-index: 10 !important;
    animation: node-badge-pulse 1.5s infinite alternate ease-in-out;
}

.badge-hot {
    background: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5) !important;
}

.badge-new {
    background: #06b6d4 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5) !important;
}

@keyframes node-badge-pulse {
    0% { transform: scale(0.95); filter: brightness(0.9); }
    100% { transform: scale(1.05); filter: brightness(1.15); }
}

/* ======================================================= */
/* 🌌 ВЫПАДАЮЩЕЕ МЕНЮ (DROPDOWNS) С ЗАЩИТОЙ ОТ СДВИГОВ      */
/* ======================================================= */
.node-dropdown-menu {
    background: rgba(12, 12, 14, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.9), 
        0 0 30px rgba(var(--color-brand-glow-hex), 0.15) !important;
    backdrop-filter: blur(25px) !important;
    border-radius: 16px !important;
    width: 240px !important;
    padding: 8px !important;
    display: none; /* Скрыто базово */
    flex-direction: column !important;
    gap: 4px !important;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease !important;
}

.node-dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    color: #a1a1aa !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-align: left !important;
    
    /* 🛡️ ЗАЩИТА ОТ ДЕРГАНИЯ: Резервируем 3px под границу изначально */
    border-left: 3px solid transparent !important; 
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.node-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
    
    /* Меняем только цвет границы. Размер бокса остается неизменным, исключая любые сдвиги текста */
    border-left-color: var(--color-brand) !important; 
}

.node-expand-arrow {
    font-size: 7px !important;
    color: #52525b !important;
    margin-top: 4px !important;
    transition: transform 0.2s ease !important;
}
.cyber-category-node:hover .node-expand-arrow {
    color: #ffffff !important;
}
/* ======================================================= */
/* 💻 АДАПТИВНЫЙ РАСКЛАД ДЛЯ ПК (РАБОТА ПО НАВЕДЕНИЮ)       */
/* ======================================================= */
@media (min-width: 1025px) {
    .cyber-category-navbar-container {
        overflow: visible !important; 
    }
    
    .cyber-category-navbar {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    .node-dropdown-menu {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.95) translateY(-8px);
        z-index: 2500 !important;
        pointer-events: none !important;
    }

    /* 🔥 ЭФФЕКТ СИНХРОННОГО НАВЕДЕНИЯ НА ПК */
    .cyber-category-node:hover .node-dropdown-menu {
        display: flex !important;
        opacity: 1 !important;
        transform: translateX(-50%) scale(1) translateY(0) !important;
        pointer-events: auto !important;
    }

    /* 🛡️ НЕВИДИМЫЙ МОСТИК БЕЗОПАСНОСТИ:
       Создает невидимую зону между плиткой и меню, чтобы при движении мышки вниз меню не закрывалось */
    .node-dropdown-menu::before {
        content: '' !important;
        position: absolute !important;
        top: -15px !important;
        left: 0 !important;
        width: 100% !important;
        height: 15px !important;
        background: transparent !important;
    }
}

/* ======================================================= */
/* 📱 АДАПТИВНЫЙ РАСКЛАД ДЛЯ СМАРТФОНОВ (КЛИКИ И ОВЕРЛЕИ)  */
/* ======================================================= */
@media (max-width: 1024px) {
    .cyber-category-navbar-container {
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    .cyber-category-navbar-container::-webkit-scrollbar {
        display: none !important;
    }

    .node-dropdown-menu {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.9) !important;
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
        z-index: 3000 !important;
        box-shadow: 0 0 100px rgba(0,0,0,0.95), 0 0 40px rgba(var(--color-brand-glow-hex), 0.15) !important;
    }

    /* Для тачскринов показываем меню только при клике (через JS-класс .show) */
    .node-dropdown-menu.show {
        display: flex !important;
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }
}
/* ========================================================================= */
/* 📅 НОВЫЙ СУПЕР-КОМПАКТНЫЙ РЕЙДОВЫЙ КАЛЕНДАРЬ (BLAZING GRID STYLE)         */
/* ========================================================================= */

.raid-day-row {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .raid-day-row {
        flex-direction: column !important; /* На телефонах карточка даты встает наверх */
    }
}

/* Карточка даты слева */
.raid-date-card {
    background: rgba(12, 12, 14, 0.9) !important;
    border: 2px solid rgba(var(--color-brand-glow-hex), 0.15) !important;
    border-radius: 20px !important;
    width: 110px !important;
    height: 120px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 10px 25px rgba(0,0,0,0.4) !important;
    text-align: center !important;
}

@media (max-width: 768px) {
    .raid-date-card {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        gap: 20px !important;
        padding: 12px 24px !important;
        justify-content: space-between !important;
    }
}

/* Компактная вертикальная рейд-плитка */
.raid-compact-card {
    background: linear-gradient(135deg, rgba(20, 20, 22, 0.6) 0%, rgba(10, 10, 12, 0.8) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 260px !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    text-align: left !important;
}

.raid-compact-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--color-brand-glow-light) !important;
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.95), 
        0 0 15px var(--color-brand-glow-very-light) !important;
}

/* Микро-баджи сложности на карточках */
.difficulty-badge {
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    display: inline-block !important;
}
.diff-normal { background-color: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; border: 1px solid rgba(34, 197, 94, 0.25); }
.diff-heroic { background-color: rgba(249, 115, 22, 0.15) !important; color: #fb923c !important; border: 1px solid rgba(249, 115, 22, 0.25); }
.diff-mythic { background-color: rgba(168, 85, 247, 0.15) !important; color: #c084fc !important; border: 1px solid rgba(168, 85, 247, 0.25); }

/* Тикающий неоновый таймер на карточке */
.raid-countdown-container {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #71717a !important; /* text-zinc-500 */
}

.raid-countdown {
    color: var(--color-brand) !important;
    text-shadow: 0 0 10px var(--color-brand-glow) !important;
    font-family: monospace !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}
/* Когда добавлен класс .show - меню ГАРАНТИРОВАННО отображается и реагирует на клики */
.node-dropdown-menu.show {
    display: flex !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important; /* ИСПРАВЛЕНО: позволяет выбирать элементы кликом мыши */
}
/* ======================================================= */
/* 💎 АВТО-ОТКРЫТИЕ КАПСУЛ РЕГИОНА И ВАЛЮТЫ В ШАПКЕ НА ПК  */
/* ======================================================= */
@media (min-width: 1025px) {
    /* Капсула открывает своё выпадающее меню при наведении мыши */
    .header-hud-capsule:hover .node-dropdown-menu {
        display: flex !important;
        opacity: 1 !important;
        transform: translateX(-50%) scale(1) translateY(0) !important;
        pointer-events: auto !important;
    }
}
/* ======================================================= */
/* 🎮 ТАКТИЛЬНЫЕ ИНТЕРАКТИВНЫЕ ССЫЛКИ БОКОВОГО МЕНЮ ИГР     */
/* ======================================================= */
.mega-sidebar-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    width: 100% !important;
    
    /* Резервируем ширину под будущий левый неон во избежание сдвига текста */
    border-left: 3px solid transparent !important;
    background: transparent !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform, background, border-color;
}

/* 1. Game Boosting */
.mega-sidebar-link-wow { color: #ffffff !important; }
.mega-sidebar-link-wow:hover { 
    color: var(--color-brand) !important; 
    border-left-color: var(--color-brand) !important; 
    background: rgba(var(--color-brand-glow-hex), 0.05) !important; 
    transform: translateX(6px) !important; 
}

/* 2. Accounts Market */
.mega-sidebar-link-acc { color: #fbbf24 !important; }
.mega-sidebar-link-acc:hover { 
    color: #fbbf24 !important; 
    border-left-color: #fbbf24 !important; 
    background: rgba(251, 191, 36, 0.05) !important; 
    transform: translateX(6px) !important; 
}

/* 3. Strategy Guides */
.mega-sidebar-link-guides { color: #a855f7 !important; }
.mega-sidebar-link-guides:hover { 
    color: #a855f7 !important; 
    border-left-color: #a855f7 !important; 
    background: rgba(168, 85, 247, 0.05) !important; 
    transform: translateX(6px) !important; 
}

/* 4. Become a Booster */
.mega-sidebar-link-join { color: #38bdf8 !important; }
.mega-sidebar-link-join:hover { 
    color: #38bdf8 !important; 
    border-left-color: #38bdf8 !important; 
    background: rgba(56, 189, 248, 0.05) !important; 
    transform: translateX(6px) !important; 
}

/* 5. Sell Your Account */
.mega-sidebar-link-sell { color: #34d399 !important; }
.mega-sidebar-link-sell:hover { 
    color: #34d399 !important; 
    border-left-color: #34d399 !important; 
    background: rgba(52, 211, 153, 0.05) !important; 
    transform: translateX(6px) !important; 
}
/* ======================================================= */
/* 🛡️ ГЛОБАЛЬНЫЙ ФИКС ТРЯСКИ КАРТОЧЕК (ANTI-JITTER PATCH)  */
/* ======================================================= */

/* Применяем авто-масштаб при наведении только к тем картам, у которых НЕТ класса .obsidian-card-3d */
.obsidian-card:not(.obsidian-card-3d):hover {
    transform: scale(1.02) !important;
    border-color: var(--color-brand-glow-light) !important;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95), 0 0 25px var(--color-brand-glow-very-light) !important;
}

.interactive-cyber-card:not(.obsidian-card-3d):hover {
    transform: scale(1.02) !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--color-brand-glow-light) !important;
} 
  /* ГАРАНТИРОВАННЫЙ ОТСТУП ДЛЯ КАРТОЧЕК ПРЕИМУЩЕСТВ ОТ БАННЕРА */
.advantages-section {
    margin-top: 80px !important;
}

@media (max-width: 768px) {
    .advantages-section {
        margin-top: 40px !important;
    }
}