/* ==========================================================================
   ZASTAVA DayZ PvP — THEME COLORS ONLY
   Только переопределение цветов. Функционал платформы не трогаем.
   ========================================================================== */

/* --- 0. СКРЫТИЕ УКРАИНСКОГО ЯЗЫКА (БЕЗ ФЛИКЕРИНГА) --- */
[data-locale="uk"], [data-locale="ua"],
[data-lang="uk"], [data-lang="ua"],
[value="uk"], [value="ua"],
form[action*="locale"] button[value="uk"],
form[action*="locale"] button[value="ua"],
form[action*="locale"] [value="uk"],
form[action*="locale"] [value="ua"],
.mobile-lang-switcher [data-locale="uk"],
.mobile-lang-switcher [data-locale="ua"],
.mobile-lang-switcher [data-lang="uk"],
.mobile-lang-switcher [data-lang="ua"],
.language-switcher [data-locale="uk"],
.language-switcher [data-locale="ua"],
.language-switcher [data-lang="uk"],
.language-switcher [data-lang="ua"],
.language-switcher li:has([class*="flag-ua"]),
.language-switcher li:has([class*="flag-uk"]),
.language-switcher li:has(img[src*="ua."]),
.language-switcher li:has(img[src*="uk."]),
.language-switcher li:has(img[src*="ukraine"]),
.language-switcher li:has(svg rect[fill="#0057B7"]),
.language-switcher li:has(svg rect[fill="#FFD700"]),
.language-switcher li:has(rect[fill="#0057B7"]),
.language-switcher li:has(rect[fill="#FFD700"]),
.language-switcher ul.dropdown li:nth-child(4),
.language-switcher .dropdown li:nth-child(4),
.language-switcher li:nth-of-type(4),
.mobile-lang-switcher ul.dropdown li:nth-child(4),
.mobile-lang-switcher li:nth-of-type(4),
[class*="flag-icon-ua"], [class*="flag-icon-uk"],
[class*="flag-ua"], [class*="flag-uk"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* --- 1. ФОНОВОЕ ИЗОБРАЖЕНИЕ --- */
body {
    background-color: #04050a !important;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(200, 169, 110, 0.06) 0%, transparent 70%),
        url('https://s3.regru.cloud/shops-attachments/zastava-pvp.ru/meta/images/gemini-generated-image-ee1s7mee1s7mee1s-v1.png') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center center !important;
}

/* --- 2. ПЕРЕМЕННЫЕ — заменяем все системные значения платформы --- */
:root {
    --main-bg-color:     #04050a;
    --header-background: rgba(4, 5, 10, 0.95);
    --main-dark-color:   #c8a96e;
    --main-white-color:  rgba(12, 16, 26, 0.88);
    --accent:            #c8a96e;
    --bg-muted:          rgba(200, 169, 110, 0.10);
    --success-color:     #4cc97a;
    --error-color:       #e63946;
    --muted-heading:     #f0c96a;
    --muted-desc:        #b8c4cc;
    --radius:            8px;
}

/* --- 3. ЦВЕТ ТЕКСТА --- */
body { color: #b8c4cc !important; }

/* ==========================================================================
   NAVBAR — КРАСИВОЕ ОФОРМЛЕНИЕ
   ========================================================================== */

/* Основная полоска снизу навбара — анимированная золотая линия */
.navbar {
    border-bottom: 1px solid rgba(200, 169, 110, 0.18) !important;
    box-shadow:
        0 1px 0 rgba(200, 169, 110, 0.25),
        0 4px 24px rgba(0, 0, 0, 0.55) !important;
    position: relative !important;
}

/* Анимированная линия под навбаром */
.navbar::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0; left: 0 !important;
    width: 100%; height: 1px !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(200, 169, 110, 0.15) 10%,
        rgba(240, 201, 106, 0.85) 40%,
        rgba(255, 220, 120, 1)    50%,
        rgba(240, 201, 106, 0.85) 60%,
        rgba(200, 169, 110, 0.15) 90%,
        transparent 100%
    ) !important;
    animation: z-navbar-glow 4s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes z-navbar-glow {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 1;   }
}

/* Название сайта — красная вертикальная черта + золотой текст с анимациями */
.navbar .navbar-mobile a.navbar-brand, .navbar .navbar-brand, .navbar-brand,
.navbar .navbar__mobile a.navbar__brand, .navbar .navbar__brand, .navbar__brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    padding: 0 28px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    z-index: 1000 !important;
}

@media (min-width: 992px) {
    .navbar .navbar-links, .navbar-links,
    .navbar .navbar__links, .navbar__links {
        flex-grow: 1 !important;
        display: flex !important;
        justify-content: space-between !important;
    }
}

.navbar-brand p, .navbar__brand p {
    font-size: 22px !important;
    color: #f0c96a !important;
    text-transform: uppercase !important;
    letter-spacing: 5px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    display: inline-block !important;
    background: linear-gradient(
        120deg,
        #f0c96a 0%,
        #f0c96a 42%,
        #fffcf0 50%,
        #f0c96a 58%,
        #f0c96a 100%
    ) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: z-logo-shine 5s linear infinite !important;
    text-shadow: 0 0 12px rgba(240, 201, 106, 0.25) !important;
}

@keyframes z-logo-shine {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Красная вертикальная черта (статус-индикатор) с пульсацией радара */
.navbar-brand::before, .navbar__brand::before {
    content: '' !important;
    position: absolute !important;
    left: 8px; top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px;
    border-radius: 2px !important;
    animation: z-radar-pulse 2.2s ease-in-out infinite !important;
}

@keyframes z-radar-pulse {
    0%, 100% {
        height: 50%;
        background: #e63946 !important;
        box-shadow: 0 0 6px rgba(230, 57, 70, 0.5) !important;
    }
    50% {
        height: 75%;
        background: #ff4d5a !important;
        box-shadow: 
            0 0 14px rgba(230, 57, 70, 0.95),
            0 0 22px rgba(230, 57, 70, 0.5) !important;
    }
}

/* Блинкающий курсор терминала в конце названия */
.navbar-brand::after, .navbar__brand::after {
    content: '_' !important;
    position: absolute !important;
    right: 10px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    color: #e63946 !important;
    animation: z-cursor-blink 1.1s step-start infinite !important;
    font-weight: 800 !important;
    text-shadow: 0 0 8px rgba(230, 57, 70, 0.8) !important;
    margin: 0 !important;
    display: inline-block !important;
}

@keyframes z-cursor-blink {
    50% { opacity: 0; }
}

/* Ссылки навигации */
.nav-link, .navbar__nav li a, .navbar__nav a {
    color: #7a8a96 !important;
    letter-spacing: 1.5px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    transition: color 0.2s !important;
}
.nav-link:hover, .navbar__nav li a:hover, .navbar__nav a:hover { color: #f0c96a !important; }
.nav-item:hover {
    color: #f0c96a !important;
    background-color: rgba(200, 169, 110, 0.06) !important;
}

/* Кнопки справа (RU, ПРОФИЛЬ, БАЛАНС, АДМИН) — тактический модульный стиль */
.navbar .auth-btns .auth-btn, 
.navbar .auth-btns .balance-btn, 
.navbar .auth-btns .profile-btn, 
.navbar .auth-btns .admin-btn,
.navbar .navbar__buttons .navbar__btn,
.navbar .navbar__btn,
.navbar [class*="navbar__btn--"],
.auth-btn, .balance-btn, .profile-btn, .admin-btn {
    border: 1px solid rgba(200, 169, 110, 0.12) !important;
    border-radius: 4px !important;
    background: rgba(12, 16, 26, 0.45) !important;
    padding: 6px 14px !important;
    margin-left: 10px !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 1.5px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    color: #c8a96e !important;
    text-transform: uppercase !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

/* Эффект наведения по умолчанию (золотое свечение) */
.navbar .auth-btns .auth-btn:hover,
.navbar .auth-btns .profile-btn:hover,
.navbar .navbar__buttons .navbar__btn:hover,
.navbar .navbar__btn:hover,
.auth-btn:hover, .profile-btn:hover {
    color: #f0c96a !important;
    background: rgba(200, 169, 110, 0.08) !important;
    border-color: rgba(200, 169, 110, 0.4) !important;
    box-shadow: 
        0 0 12px rgba(240, 201, 106, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transform: translateY(-1px) !important;
}

/* Баланс игрока — неоновый зеленый кредит-бокс */
.navbar .auth-btns .balance-btn,
.navbar .auth-btns .auth-btn[href*="balance"],
.navbar [class*="--balance"],
.navbar .navbar__btn[href*="balance"],
.balance-btn, .auth-btn[href*="balance"] {
    color: #4cc97a !important;
    border-color: rgba(76, 201, 122, 0.15) !important;
    background: rgba(76, 201, 122, 0.02) !important;
    text-shadow: 0 0 6px rgba(76, 201, 122, 0.2) !important;
}

.navbar .auth-btns .balance-btn:hover,
.navbar .auth-btns .auth-btn[href*="balance"]:hover,
.navbar [class*="--balance"]:hover,
.navbar .navbar__btn[href*="balance"]:hover,
.balance-btn:hover, .auth-btn[href*="balance"]:hover {
    color: #62d88f !important;
    background: rgba(76, 201, 122, 0.08) !important;
    border-color: rgba(76, 201, 122, 0.45) !important;
    box-shadow: 
        0 0 12px rgba(76, 201, 122, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transform: translateY(-1px) !important;
}

/* Админ-панель — красный статус-бокс */
.navbar .auth-btns .admin-btn,
.navbar .auth-btns .auth-btn[href*="admin"],
.navbar .auth-btns a[href*="admin"].auth-btn,
.navbar [class*="--admin"],
.navbar .navbar__btn[href*="admin"],
.admin-btn, .auth-btn[href*="admin"], a[href*="admin"].auth-btn {
    color: #e63946 !important;
    border-color: rgba(230, 57, 70, 0.2) !important;
    background: rgba(230, 57, 70, 0.02) !important;
    text-shadow: 0 0 6px rgba(230, 57, 70, 0.2) !important;
}

.navbar .auth-btns .admin-btn:hover,
.navbar .auth-btns .auth-btn[href*="admin"]:hover,
.navbar .auth-btns a[href*="admin"].auth-btn:hover,
.navbar [class*="--admin"]:hover,
.navbar .navbar__btn[href*="admin"]:hover,
.admin-btn:hover, .auth-btn[href*="admin"]:hover, a[href*="admin"].auth-btn:hover {
    color: #ff4d5a !important;
    background: rgba(230, 57, 70, 0.08) !important;
    border-color: rgba(230, 57, 70, 0.5) !important;
    box-shadow: 
        0 0 12px rgba(230, 57, 70, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transform: translateY(-1px) !important;
}

/* Языковой переключатель — золотой */
.mobile-lang-switcher {
    color: #c8a96e !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
}

/* ==========================================================================
   ФИКСЫ ЦВЕТОВ (hardcoded в теме платформы)
   ========================================================================== */

/* Мониторинг — заголовок был чёрным */
.monitoring-title { color: #eef2f7 !important; }
.monitoring-title-span { color: #5a6a75 !important; }

/* Модал товара — блок зоны/сервера был чёрным текстом */
.product-modal-inputs-zone-block       { color: #eef2f7 !important; }
.product-modal-inputs-zone-block p     { color: #b8c4cc !important; }

/* Баннер */
.banner-item-link { color: #b8c4cc !important; }
.bunner-title     { color: #f0c96a !important; }

/* ==========================================================================
   PRODUCT CARDS & MODALS — ТАКТИЧЕСКИЙ ДИЗАЙН
   ========================================================================== */

/* Карточки товаров — бронированный кейс с HUD прицелом */
.product-card {
    background-color: rgba(12, 16, 26, 0.75) !important;
    border: 1px solid rgba(200, 169, 110, 0.14) !important;
    box-shadow: 
        inset 0 0 12px rgba(0, 0, 0, 0.85),
        0 6px 20px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backdrop-filter: blur(8px) !important;
    border-radius: 6px !important;
    position: relative !important;
    transform-style: preserve-3d !important;
    transform: perspective(1000px) !important;
}

.product-card:hover {
    border-color: rgba(240, 201, 106, 0.45) !important;
    box-shadow: 
        inset 0 0 8px rgba(240, 201, 106, 0.08),
        0 14px 40px rgba(0, 0, 0, 0.8),
        0 0 25px rgba(240, 201, 106, 0.14) !important;
}

/* Высокотехнологичные угловые скобки (HUD прицел) и лазер на карточке */
.product-card::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 5 !important;
    background:
        /* Top-Left Corner */
        linear-gradient(90deg, #c8a96e 10px, transparent 10px) 0 0,
        linear-gradient(180deg, #c8a96e 10px, transparent 10px) 0 0,
        /* Top-Right Corner */
        linear-gradient(270deg, #c8a96e 10px, transparent 10px) 100% 0,
        linear-gradient(180deg, #c8a96e 10px, transparent 10px) 100% 0,
        /* Bottom-Left Corner */
        linear-gradient(90deg, #c8a96e 10px, transparent 10px) 0 100%,
        linear-gradient(0deg, #c8a96e 10px, transparent 10px) 0 100%,
        /* Bottom-Right Corner */
        linear-gradient(270deg, #c8a96e 10px, transparent 10px) 100% 100%,
        linear-gradient(0deg, #c8a96e 10px, transparent 10px) 100% 100%,
        /* Moving laser line */
        linear-gradient(90deg, transparent, rgba(240, 201, 106, 0.45), transparent) 0 -20px;
    background-repeat: no-repeat !important;
    background-size: 
        2px 10px, 10px 2px,
        2px 10px, 10px 2px,
        2px 10px, 10px 2px,
        2px 10px, 10px 2px,
        100% 3px !important;
    opacity: 0.28 !important;
    transition: opacity 0.3s, filter 0.3s !important;
}

.product-card:hover::after {
    opacity: 1 !important;
    filter: drop-shadow(0 0 4px rgba(240, 201, 106, 0.75)) !important;
    animation: z-card-laser-sweep 2s infinite linear !important;
}

@keyframes z-card-laser-sweep {
    0% {
        background-position: 
            0 0, 0 0,
            100% 0, 100% 0,
            0 100%, 0 100%,
            100% 100%, 100% 100%,
            0 -10px;
    }
    100% {
        background-position: 
            0 0, 0 0,
            100% 0, 100% 0,
            0 100%, 0 100%,
            100% 100%, 100% 100%,
            0 110%;
    }
}

/* Название и цена на карточке */
.product-card-name {
    color: #eef2f7 !important;
    font-size: 13.5px !important;
    letter-spacing: 0.5px !important;
    font-family: 'Outfit', sans-serif !important;
    transition: color 0.2s !important;
}
.product-card:hover .product-card-name {
    color: #f0c96a !important;
}

.product-card-price {
    color: #f0c96a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: 'JetBrains Mono', monospace !important;
}

/* Затемняющий оверлей и кнопка "КУПИТЬ" при наведении */
.product-card-image-container {
    position: relative !important;
    overflow: hidden !important;
}

.product-card::before {
    content: 'КУПИТЬ' !important;
    position: absolute !important;
    top: 37% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.85) !important;
    background-color: #c8a96e !important;
    color: #04050a !important;
    padding: 10px 24px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    opacity: 0 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 10 !important;
    box-shadow: 0 0 20px rgba(200, 169, 110, 0.4) !important;
    pointer-events: none !important;
}

.product-card-image-container::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-color: rgba(4, 5, 10, 0) !important;
    transition: background-color 0.3s ease !important;
    z-index: 9 !important;
    pointer-events: none !important;
}

.product-card:hover::before {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.product-card:hover .product-card-image-container::after {
    background-color: rgba(4, 5, 10, 0.55) !important;
}

.product-card-image-container img {
    transition: transform 0.4s ease !important;
}
.product-card:hover .product-card-image-container img {
    transform: scale(1.06) !important;
}

/* Модальное окно покупки и пополнения — тактический HUD-терминал */
.modal-overlay {
    background-color: rgba(4, 5, 10, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.modal {
    background: linear-gradient(
        170deg,
        rgba(18, 24, 38, 0.98) 0%,
        rgba(10, 14, 22, 0.99) 60%,
        rgba(14, 10, 6, 0.98) 100%
    ) !important;
    border: 1px solid rgba(200, 169, 110, 0.28) !important;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.95),
        0 0 0 1px rgba(200, 169, 110, 0.06),
        0 0 60px rgba(200, 169, 110, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    position: relative !important;
    overflow: clip !important; /* clip = обрезает декор но не скрывает внутреннее содержимое */
    /* ── Широкое окно — контент помещается, картинка по центру ── */
    min-width: 580px !important;
    max-width: 720px !important;
    width: 92vw !important;
}

/* Специально для модального окна товара (product modal) */
.product-modal,
[class*="product-modal"]:not([class*="product-modal-title"]):not([class*="product-modal-image"]):not([class*="product-modal-price"]):not([class*="product-modal-inputs"]):not([class*="product-modal-buttons"]):not([class*="product-modal-divider"]) {
    min-width: 420px !important;
    max-width: 520px !important;
    width: 90vw !important;
}

/* Внутренняя полоса свечения сверху модалки */
.modal > *:first-child::before,
.modal [class*="product-modal-title"]::before,
.modal [class*="modal-title"]::before {
    content: none !important;
}

/* Все 4 угловых скобки через псевдоэлемент-обёртку */
.modal::before, .modal::after {
    content: '' !important;
    position: absolute !important;
    pointer-events: none !important;
    z-index: 50 !important;
}

/* Верхний-левый + нижний-правый */
.modal::before {
    top: 0; left: 0;
    width: 18px !important;
    height: 18px !important;
    border-top: 2px solid #f0c96a !important;
    border-left: 2px solid #f0c96a !important;
    filter: drop-shadow(0 0 6px rgba(240, 201, 106, 0.8)) !important;
}
.modal::after {
    bottom: 0; right: 0;
    width: 18px !important;
    height: 18px !important;
    border-bottom: 2px solid #f0c96a !important;
    border-right: 2px solid #f0c96a !important;
    filter: drop-shadow(0 0 6px rgba(240, 201, 106, 0.8)) !important;
}

/* Верхний-правый + нижний-левый через inline element injected by JS */
.z-modal-corner-tr,
.z-modal-corner-bl {
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    pointer-events: none !important;
    z-index: 50 !important;
}
.z-modal-corner-tr {
    top: 0; right: 0;
    border-top: 2px solid #f0c96a !important;
    border-right: 2px solid #f0c96a !important;
    filter: drop-shadow(0 0 6px rgba(240, 201, 106, 0.8)) !important;
}
.z-modal-corner-bl {
    bottom: 0; left: 0;
    border-bottom: 2px solid #f0c96a !important;
    border-left: 2px solid #f0c96a !important;
    filter: drop-shadow(0 0 6px rgba(240, 201, 106, 0.8)) !important;
}

/* ─── ЗАГОЛОВОК ТОВАРА ─── */
.product-modal-title,
.modal [class*="product-modal-title"],
.modal [class*="modal__title"],
.modal [class*="modal-title"] {
    font-family: 'Outfit', sans-serif !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: transparent !important;
    background: linear-gradient(
        135deg,
        #c8a96e 0%,
        #f0c96a 35%,
        #fffce8 50%,
        #f0c96a 65%,
        #c8a96e 100%
    ) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: z-title-shine 4s linear infinite !important;
    padding: 16px 20px 10px !important;
    position: relative !important;
    display: block !important;
}

.product-modal-title::after,
.modal [class*="modal-title"]::after {
    content: '' !important;
    display: block !important;
    width: 60% !important;
    height: 1px !important;
    margin: 8px auto 0 !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(240, 201, 106, 0.6) 20%,
        rgba(255, 230, 140, 1) 50%,
        rgba(240, 201, 106, 0.6) 80%,
        transparent
    ) !important;
    animation: z-sep-pulse 3s ease-in-out infinite !important;
    position: static !important;
}

@keyframes z-title-shine {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes z-sep-pulse {
    0%, 100% { opacity: 0.4; width: 40%; }
    50%       { opacity: 1;   width: 70%; }
}

/* ─── ОБЛАСТЬ ИЗОБРАЖЕНИЯ ПЕРСОНАЖА ─── */
.product-modal-image,
.modal [class*="product-modal-image"],
.modal [class*="modal-image"],
.modal [class*="product__image"],
.modal [class*="product-image"] {
    position: relative !important;
    /* Градиент-«прожектор» снизу под ногами */
    background:
        radial-gradient(
            ellipse 65% 35% at 50% 100%,
            rgba(200, 169, 110, 0.18) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 80% 70% at 50% 60%,
            rgba(200, 169, 110, 0.05) 0%,
            transparent 80%
        ) !important;
    overflow: hidden !important;
    display: flex !important;
    /* Персонаж прижат к низу — «стоит на полу» */
    align-items: flex-end !important;
    justify-content: center !important;
    /* Высота подстраивается под содержимое, но не меньше 260px */
    min-height: 260px !important;
    height: auto !important;
    padding: 20px 16px 0 !important;
}

/* Скан-линия по изображению персонажа */
.product-modal-image::before,
.modal [class*="product-modal-image"]::before,
.modal [class*="modal-image"]::before {
    content: '' !important;
    position: absolute !important;
    left: 0; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(240, 201, 106, 0.0) 10%,
        rgba(240, 201, 106, 0.7) 40%,
        rgba(255, 230, 140, 1) 50%,
        rgba(240, 201, 106, 0.7) 60%,
        rgba(240, 201, 106, 0.0) 90%,
        transparent 100%
    ) !important;
    animation: z-modal-scan 3s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 10 !important;
    top: 0 !important;
}

@keyframes z-modal-scan {
    0%   { top: 0%;   opacity: 0; }
    10%  { opacity: 0.9; }
    90%  { opacity: 0.9; }
    100% { top: 100%; opacity: 0; }
}

/* Нижнее свечение под персонажем */
.product-modal-image::after,
.modal [class*="product-modal-image"]::after,
.modal [class*="modal-image"]::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0; left: 10%; right: 10% !important;
    height: 50px !important;
    background: radial-gradient(
        ellipse 80% 100% at 50% 100%,
        rgba(200, 169, 110, 0.25) 0%,
        transparent 70%
    ) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Изображение товара — реальный размер, стоит на «полу» */
.product-modal-image img,
.modal [class*="product-modal-image"] img,
.modal [class*="modal-image"] img {
    position: relative !important;
    z-index: 5 !important;
    filter:
        drop-shadow(0 0 20px rgba(200, 169, 110, 0.30))
        drop-shadow(0 8px 28px rgba(0, 0, 0, 0.7)) !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease !important;
    /* ── Картинка в своём реальном размере, не больше 300px по высоте ── */
    height: auto !important;
    max-height: 300px !important;
    width: auto !important;
    max-width: 88% !important;
    object-fit: contain !important;
    display: block !important;
    /* Небольшой отступ снизу — «пол» */
    margin-bottom: 0 !important;
    vertical-align: bottom !important;
}

.modal:hover .product-modal-image img,
.modal:hover [class*="product-modal-image"] img {
    filter:
        drop-shadow(0 0 28px rgba(240, 201, 106, 0.45))
        drop-shadow(0 12px 32px rgba(0, 0, 0, 0.65)) !important;
    transform: translateY(-5px) scale(1.03) !important;
}

/* ─── ТЕКСТ ОПИСАНИЯ ТОВАРА — красивый блок с иконками ─── */
.product-modal-description,
.modal [class*="product-modal-description"],
.modal [class*="modal-description"],
.modal [class*="product-description"],
.modal [class*="modal__description"],
.modal [class*="product__description"] {
    color: #b8c4cc !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.3px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
    display: block !important;
    /* ── Padding-right защищает от обрезания правого края ── */
    padding: 10px 16px 8px 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    border-top: 1px solid rgba(200, 169, 110, 0.10) !important;
    margin-top: 4px !important;
}

/* На случай если платформа обрезает через line-clamp на родителе */
.modal [class*="product-modal-inputs"],
.modal [class*="modal-inputs"],
.modal [class*="modal-body"],
.modal [class*="modal__body"] {
    overflow: visible !important;
    max-height: none !important;
}

.modal p,
.modal [class*="description"] p,
.modal [class*="modal-text"],
.modal span {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    display: inline !important;
    max-height: none !important;
}

/* ─── ДЕКОРАТИВНЫЙ РАЗДЕЛИТЕЛЬ МЕЖДУ ИЗОБРАЖЕНИЕМ И ЦЕНОЙ ─── */
.product-modal-divider,
.modal [class*="divider"],
.modal hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(200, 169, 110, 0.08) 5%,
        rgba(200, 169, 110, 0.35) 30%,
        rgba(240, 201, 106, 0.6) 50%,
        rgba(200, 169, 110, 0.35) 70%,
        rgba(200, 169, 110, 0.08) 95%,
        transparent 100%
    ) !important;
    margin: 4px 0 !important;
    position: relative !important;
}

/* ─── БЛОК ЦЕНЫ — HUD ДИСПЛЕЙ ─── */
.product-modal-price,
.modal [class*="product-modal-price"],
.modal [class*="modal-price"],
.modal [class*="modal__price"] {
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #f0c96a !important;
    letter-spacing: 3px !important;
    text-shadow:
        0 0 10px rgba(240, 201, 106, 0.6),
        0 0 25px rgba(240, 201, 106, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Метка валюты (RUB) — маленькая, матовая */
.product-modal-price [class*="currency"],
.product-modal-price [class*="label"],
.modal [class*="currency-label"] {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    color: rgba(240, 201, 106, 0.55) !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* ─── БЛОК ЗОНЫ/СЕРВЕРА ─── */
.product-modal-inputs-zone-block {
    background: rgba(200, 169, 110, 0.04) !important;
    border: 1px solid rgba(200, 169, 110, 0.12) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    color: #eef2f7 !important;
}
.product-modal-inputs-zone-block p {
    color: rgba(184, 196, 204, 0.85) !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

/* ─── ОБЛАСТЬ КНОПОК — ТАКТИЧЕСКАЯ ПАНЕЛЬ ─── */
.product-modal-buttons,
.modal [class*="modal-buttons"],
.modal [class*="modal__buttons"],
.modal [class*="modal-footer"],
.modal [class*="modal__footer"] {
    display: flex !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-top: 1px solid rgba(200, 169, 110, 0.10) !important;
    background: rgba(4, 5, 10, 0.3) !important;
    position: relative !important;
}

/* Тонкая линия-акцент над кнопками */
.product-modal-buttons::before,
.modal [class*="modal-buttons"]::before,
.modal [class*="modal-footer"]::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 15%; right: 15% !important;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(240, 201, 106, 0.45) 50%,
        transparent
    ) !important;
    pointer-events: none !important;
}

/* Поля ввода в модальных окнах (Сумма, Email, Промокод) */
.modal input, 
.modal textarea, 
.modal .text-input, 
.modal [class*="recharge-panel-input"],
.modal [class*="input-raw"] {
    background: rgba(4, 5, 10, 0.75) !important;
    border: 1px solid rgba(200, 169, 110, 0.2) !important;
    border-radius: 4px !important;
    color: #f0c96a !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.85) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal input:hover, .modal textarea:hover, .modal .text-input:hover,
.modal input:focus, .modal textarea:focus, .modal .text-input:focus {
    border-color: rgba(240, 201, 106, 0.55) !important;
    background: rgba(12, 16, 26, 0.88) !important;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.9),
        0 0 10px rgba(240, 201, 106, 0.2) !important;
    color: #ffffff !important;
    outline: none !important;
}

/* Делаем плейсхолдеры в полях ввода яркими и читаемыми */
.modal input::placeholder, 
.modal textarea::placeholder, 
.modal .text-input::placeholder,
.modal [class*="input-raw"]::placeholder,
.modal [class*="recharge-panel-input"]::placeholder,
.modal [class*="recharge-panel-input-raw"]::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
}

.modal input::-webkit-input-placeholder, 
.modal textarea::-webkit-input-placeholder, 
.modal .text-input::-webkit-input-placeholder,
.modal [class*="input-raw"]::-webkit-input-placeholder,
.modal [class*="recharge-panel-input"]::-webkit-input-placeholder,
.modal [class*="recharge-panel-input-raw"]::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
}

.modal input::-moz-placeholder, 
.modal textarea::-moz-placeholder, 
.modal .text-input::-moz-placeholder,
.modal [class*="input-raw"]::-moz-placeholder,
.modal [class*="recharge-panel-input"]::-moz-placeholder,
.modal [class*="recharge-panel-input-raw"]::-moz-placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
}

/* Делаем подписи полей и заголовки в модальных окнах более контрастными */
.modal label,
.modal [class*="label"],
.modal [class*="title"],
.modal p {
    color: #eef2f7 !important;
    font-weight: 600 !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0.5px !important;
}

.modal .product-modal-inputs p,
.modal .recharge-panel p {
    color: #eef2f7 !important;
}

/* Специфический обход для двухслойных полей ввода пополнения */
.modal [class*="recharge-panel-input"] {
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
}
.modal [class*="recharge-panel-input-raw"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #ffffff !important;
    width: 100% !important;
}

/* Метод оплаты (карточка выбора платежки) */
.modal [class*="payment-method"],
.modal [class*="gateway-item"],
.modal [class*="provider-item"],
.modal [class*="payment-item"] {
    background: rgba(12, 16, 26, 0.5) !important;
    border: 1px solid rgba(200, 169, 110, 0.15) !important;
    border-radius: 6px !important;
    padding: 12px !important;
    transition: all 0.3s ease !important;
}

/* Выбранный метод оплаты */
.modal [class*="active"],
.modal [class*="selected"],
.modal [class*="payment-method"].active,
.modal [class*="payment-method"].selected {
    border-color: #f0c96a !important;
    background: rgba(200, 169, 110, 0.08) !important;
    box-shadow: 
        0 0 15px rgba(240, 201, 106, 0.15),
        inset 0 0 8px rgba(240, 201, 106, 0.05) !important;
}

/* Замена синих баджей бонусов на тактические зеленые */
.modal [class*="bg-blue"], 
.modal [class*="badge-primary"],
.modal [class*="primary"] {
    background: rgba(76, 201, 122, 0.15) !important;
    border: 1px solid rgba(76, 201, 122, 0.4) !important;
    color: #4cc97a !important;
    box-shadow: 0 0 6px rgba(76, 201, 122, 0.2) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}

/* Кнопка "Перейти" (Подтвердить) */
.modal-primary-button {
    background: linear-gradient(135deg, #c8a96e 0%, #a2834b 100%) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 
        0 4px 12px rgba(200, 169, 110, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    padding: 8px 24px !important;
    height: 40px !important;
}

.modal-primary-button:hover {
    background: linear-gradient(135deg, #f0c96a 0%, #c8a96e 100%) !important;
    box-shadow: 
        0 6px 18px rgba(240, 201, 106, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}

.modal-primary-button-text {
    color: #04050a !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

/* Кнопка "Закрыть" */
.modal-close-button {
    border: 1px solid rgba(230, 57, 70, 0.3) !important;
    background: rgba(230, 57, 70, 0.03) !important;
    padding: 6px 18px !important;
    border-radius: 4px !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
}

.modal-close-button:hover {
    background: rgba(230, 57, 70, 0.12) !important;
    border-color: rgba(230, 57, 70, 0.6) !important;
    box-shadow: 0 0 10px rgba(230, 57, 70, 0.2) !important;
}

.modal-close-button-text {
    color: #e63946 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    opacity: 1 !important;
}

/* Общие кнопки (сортировки, добавление в корзину) */
.app-button {
    border-radius: 4px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: all 0.25s ease !important;
}
.app-button--primary {
    background-color: #c8a96e !important;
    color: #04050a !important;
}
.app-button--primary:hover {
    background-color: #f0c96a !important;
    box-shadow: 0 0 15px rgba(240, 201, 106, 0.35) !important;
}

/* ==========================================================================
   GUNSHOT ANIMATIONS
   ========================================================================== */

/* Container for gunshot effects */
.z-shot-container {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 200px;
    height: 60px;
    pointer-events: none !important;
    overflow: visible !important;
    z-index: 1000 !important;
}

/* Muzzle Flash */
.z-muzzle-flash {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(255, 200, 50, 0.95) 0%, rgba(255, 80, 0, 0.5) 45%, rgba(255, 40, 0, 0.2) 65%, transparent 80%) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) scale(0.2) !important;
    animation: z-flash-anim 0.15s ease-out forwards !important;
}

@keyframes z-flash-anim {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.6); opacity: 0.95; }
    100% { transform: translate(-50%, -50%) scale(2.0); opacity: 0; }
}

/* Recoil Shake on Brand Logo */
.z-recoil {
    animation: z-recoil-anim 0.22s cubic-bezier(.36,.07,.19,.97) both !important;
}

@keyframes z-recoil-anim {
    0% { transform: translate(-50%, -50%) scale(1); }
    15% { transform: translate(-53%, -48%) scale(0.96) rotate(-2deg); filter: brightness(1.4); }
    30% { transform: translate(-48%, -52%) scale(1.03) rotate(1.5deg); }
    45% { transform: translate(-51%, -49%) scale(0.98); }
    60% { transform: translate(-49%, -51%) scale(1.01); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* Spark Particles */
.z-spark {
    position: absolute !important;
    width: 3.5px;
    height: 3.5px;
    background-color: #ffc83c !important;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #ff6a00, 0 0 10px #ffaa00 !important;
    opacity: 1;
    pointer-events: none !important;
}

/* ==========================================================================
   MONITORING WIDGET — FUTURISTIC HUD STYLE
   ========================================================================== */

/* Main Card Wrapper */
.monitoring {
    position: relative !important;
    background: rgba(12, 16, 26, 0.8) !important;
    border: 1px solid rgba(200, 169, 110, 0.15) !important;
    border-radius: 4px !important;
    padding: 14px 18px !important;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

.monitoring:hover {
    border-color: rgba(200, 169, 110, 0.3) !important;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.85),
        0 0 20px rgba(200, 169, 110, 0.15) !important;
}

/* Glowing targeting brackets [ ] on corners */
.monitoring::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    /* Crimson Red brackets by default (Offline status) */
    background: 
        linear-gradient(to right, #e63946 8px, transparent 8px) 0 0,
        linear-gradient(to bottom, #e63946 8px, transparent 8px) 0 0,
        linear-gradient(to left, #e63946 8px, transparent 8px) 100% 0,
        linear-gradient(to bottom, #e63946 8px, transparent 8px) 100% 0,
        linear-gradient(to right, #e63946 8px, transparent 8px) 0 100%,
        linear-gradient(to top, #e63946 8px, transparent 8px) 0 100%,
        linear-gradient(to left, #e63946 8px, transparent 8px) 100% 100%,
        linear-gradient(to top, #e63946 8px, transparent 8px) 100% 100% !important;
    background-repeat: no-repeat !important;
    background-size: 8px 8px !important;
    pointer-events: none !important;
    opacity: 0.65 !important;
    filter: drop-shadow(0 0 3px rgba(230, 57, 70, 0.8)) !important;
    transition: all 0.3s ease !important;
    z-index: 5 !important;
}

/* Glowing Neon Emerald brackets when Online */
.monitoring.monitoring--active::before {
    background: 
        linear-gradient(to right, #4cc97a 8px, transparent 8px) 0 0,
        linear-gradient(to bottom, #4cc97a 8px, transparent 8px) 0 0,
        linear-gradient(to left, #4cc97a 8px, transparent 8px) 100% 0,
        linear-gradient(to bottom, #4cc97a 8px, transparent 8px) 100% 0,
        linear-gradient(to right, #4cc97a 8px, transparent 8px) 0 100%,
        linear-gradient(to top, #4cc97a 8px, transparent 8px) 0 100%,
        linear-gradient(to left, #4cc97a 8px, transparent 8px) 100% 100%,
        linear-gradient(to top, #4cc97a 8px, transparent 8px) 100% 100% !important;
    background-repeat: no-repeat !important;
    background-size: 8px 8px !important;
    opacity: 0.8 !important;
    filter: drop-shadow(0 0 4px rgba(76, 201, 122, 0.9)) !important;
}

/* Blinking terminal status dot */
.monitoring-title::before {
    content: '●' !important;
    color: #e63946 !important; /* Red for offline */
    margin-right: 8px !important;
    display: inline-block !important;
    text-shadow: 0 0 8px #e63946 !important;
    animation: z-status-blink 1.2s infinite alternate !important;
    font-size: 11px !important;
    vertical-align: middle !important;
}

.monitoring.monitoring--active .monitoring-title::before {
    color: #4cc97a !important; /* Green for online */
    text-shadow: 0 0 8px #4cc97a !important;
}

@keyframes z-status-blink {
    0% { opacity: 0.35; filter: brightness(0.8); }
    100% { opacity: 1; filter: brightness(1.3); }
}

/* Header & Title Layout */
.monitoring-header {
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
}

.monitoring-title {
    color: #f0c96a !important; /* Rich gold */
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

.monitoring-title-span {
    color: rgba(184, 196, 204, 0.45) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-transform: lowercase !important;
}

/* Progress Track Bar */
.monitoring-progress {
    margin-top: 8px !important;
}

.monitoring-progress-bar {
    height: 18px !important;
    background: rgba(4, 5, 10, 0.72) !important; /* Deep tactical dark track */
    border: 1px solid rgba(200, 169, 110, 0.15) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7) !important;
}

/* Scanning laser sweep across the track */
.monitoring-progress-bar::after {
    content: '' !important;
    position: absolute !important;
    top: 0; bottom: 0;
    width: 35px;
    background: linear-gradient(90deg, transparent, rgba(240, 201, 106, 0.25), transparent) !important;
    animation: z-radar-sweep 4s infinite linear !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

@keyframes z-radar-sweep {
    0% { left: -40px; }
    100% { left: 100%; }
}

/* Segmented LED Progress Fill */
.monitoring-progress-fill {
    background: repeating-linear-gradient(
        90deg,
        #f0c96a,
        #f0c96a 6px,
        transparent 6px,
        transparent 9px
    ) !important; /* Gold LED blocks: 6px fill, 3px gap */
    filter: drop-shadow(0 0 4px rgba(240, 201, 106, 0.75)) !important;
    height: 100% !important;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Slit pattern overlay on the gold fill */
.monitoring-progress-fill::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 5px,
        rgba(4, 5, 10, 0.12) 5px,
        rgba(4, 5, 10, 0.12) 10px
    ) !important;
    animation: z-scanline-pulse 6s linear infinite !important;
}

@keyframes z-scanline-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

/* Text Overlay positioning */
.monitoring-status-overlay {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 4 !important;
}

/* Monospaced outline text for player numbers */
.monitoring-status-text {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-shadow: 
        -1.5px -1.5px 0 #04050a,  
         1.5px -1.5px 0 #04050a,
        -1.5px  1.5px 0 #04050a,
         1.5px  1.5px 0 #04050a,
         0 0 5px #04050a,
         0 1px 3px rgba(0, 0, 0, 0.95) !important; /* Rich outlines */
}

/* ==========================================================================
   TACTICAL SCROLLBAR — ОРУЖЕЙНАЯ ПЛАНКА С ЗОЛОТЫМ БЕГУНКОМ
   ========================================================================== */

/* Для Firefox */
html {
    scrollbar-width: thin !important;
    scrollbar-color: #c8a96e #04050a !important;
}

/* Ширина скроллбара */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

/* Дорожка скроллбара (Track) — глубокий матовый черный */
::-webkit-scrollbar-track {
    background: #04050a !important;
    border-left: 1px solid rgba(200, 169, 110, 0.05) !important;
}

/* Ползунок (Thumb) — золотой матовый тактический блок */
::-webkit-scrollbar-thumb {
    background: #c8a96e !important;
    border-radius: 4px !important;
    border: 2px solid #04050a !important; /* Делает ползунок визуально тоньше и отдаляет от края */
    transition: all 0.3s ease !important;
}

/* Свечение ползунка при наведении */
::-webkit-scrollbar-thumb:hover {
    background: #f0c96a !important;
    box-shadow: 0 0 10px rgba(240, 201, 106, 0.6) !important;
}

/* Активное состояние ползунка (зажатие мыши) */
::-webkit-scrollbar-thumb:active {
    background: #fffcf0 !important;
}