/* =========================================================
   DUSK MODERN DARK UI
   Современный утончённый тёмный стиль витрины
   Вставлять в самый низ кастомного CSS
   ========================================================= */

@import url('https://fonts.cdnfonts.com/css/body-grotesque-fit');

:root {
    --dusk-bg: #050607;
    --dusk-panel: rgba(12, 14, 16, 0.78);
    --dusk-panel-strong: rgba(10, 11, 13, 0.92);
    --dusk-panel-soft: rgba(255, 255, 255, 0.045);

    --dusk-border: rgba(255, 255, 255, 0.10);
    --dusk-border-strong: rgba(255, 255, 255, 0.16);

    --dusk-text: #f4f2ee;
    --dusk-text-soft: rgba(244, 242, 238, 0.72);
    --dusk-text-muted: rgba(244, 242, 238, 0.52);

    --dusk-accent: #e85b2a;
    --dusk-accent-soft: rgba(232, 91, 42, 0.18);
    --dusk-accent-glow: rgba(232, 91, 42, 0.38);

    --dusk-radius-sm: 10px;
    --dusk-radius-md: 14px;
    --dusk-radius-lg: 20px;

    --dusk-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.28);
    --dusk-shadow-md: 0 18px 46px rgba(0, 0, 0, 0.42);
    --dusk-shadow-glow: 0 0 34px rgba(232, 91, 42, 0.20);

    --dusk-blur: blur(16px);
}

/* =========================================================
   ОСНОВА СТРАНИЦЫ
   ========================================================= */

html,
body {
    min-height: 100%;
    background-color: var(--dusk-bg) !important;
    color: var(--dusk-text) !important;
    font-family: 'Body Grotesque Fit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Основной фон */
body {
    background-image:
        radial-gradient(circle at 18% 12%, rgba(232, 91, 42, 0.16), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.07), transparent 26%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.92)),
        url(https://i.imgur.com/ivtv6mw.jpeg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* Мягкая виньетка */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.58) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.48));
    z-index: 1 !important;
}

/* Лёгкая текстура/дымка, без убийства кликов */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.025) 38%, transparent 72%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 5px);
    opacity: 0.28;
    z-index: 1 !important;
}

#app,
.app-wrapper {
    position: relative !important;
    z-index: 2 !important;
    min-height: 100vh !important;
    color: var(--dusk-text) !important;
}

.app-wrapper {
    background: transparent !important;
}

/* Убираем светлые дефолтные панели */
.wrapper,
.grid-wrapper,
.left-column,
.right-column,
.products-container,
.products-types-buttons,
.banners-above-sorting,
.banners-above-monitoring,
.banners-after-monitoring,
main,
section,
footer {
    background: transparent !important;
    color: var(--dusk-text) !important;
}

/* =========================================================
   ВЕРХНЯЯ НАВИГАЦИЯ
   ========================================================= */

.navbar,
.navbar-mobile {
    background: rgba(7, 8, 10, 0.66) !important;
    border: 1px solid var(--dusk-border) !important;
    border-radius: var(--dusk-radius-lg) !important;
    box-shadow: var(--dusk-shadow-sm) !important;
    backdrop-filter: var(--dusk-blur);
    -webkit-backdrop-filter: var(--dusk-blur);
    padding: 10px 14px !important;
    margin-top: 10px !important;
}

.navbar-brand {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    background-image: url('https://i.imgur.com/7t4ke5y.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: rgba(255, 255, 255, 0.035) !important;
    box-shadow: inset 0 0 0 1px var(--dusk-border), 0 8px 22px rgba(0, 0, 0, 0.28) !important;
    text-indent: -9999px !important;
}

.nav-item {
    margin-left: 10px !important;
}

.nav-item a,
.nav-link,
.footer-link a,
.footer a,
.lang-label {
    color: var(--dusk-text) !important;
    text-decoration: none !important;
}

.nav-item a {
    min-height: 40px !important;
    padding: 9px 15px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid var(--dusk-border) !important;
    color: var(--dusk-text-soft) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}

.nav-item a:hover {
    color: #ffffff !important;
    background: rgba(232, 91, 42, 0.15) !important;
    border-color: rgba(232, 91, 42, 0.42) !important;
    box-shadow: 0 0 18px rgba(232, 91, 42, 0.18) !important;
    transform: translateY(-1px) !important;
}

.nav-item a::before {
    width: 18px !important;
    height: 18px !important;
    margin-right: 0 !important;
    opacity: 0.9 !important;
}

/* =========================================================
   ИНФО-БАННЕР СВЕРХУ
   ========================================================= */

.animated.mb-4::before {
    content: "Уважаемые игроки, напоминаем вам, что товары доступны только для 3PP сервера. Для покупки услуг на 1PP - Boosty (boosty.to/dayz_dusk)";
    display: block !important;
    margin: 0 0 18px 0 !important;
    padding: 15px 18px !important;

    color: var(--dusk-text) !important;
    background:
        linear-gradient(135deg, rgba(232, 91, 42, 0.18), rgba(255, 255, 255, 0.045)),
        rgba(8, 9, 11, 0.76) !important;

    border: 1px solid rgba(232, 91, 42, 0.34) !important;
    border-radius: var(--dusk-radius-lg) !important;
    box-shadow: var(--dusk-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    text-align: center !important;
    letter-spacing: 0.01em !important;

    backdrop-filter: var(--dusk-blur);
    -webkit-backdrop-filter: var(--dusk-blur);
}

/* =========================================================
   КАРТОЧКИ ТОВАРОВ
   ========================================================= */

/* Обёртка товара */
[data-pid] {
    perspective: 900px;
}

/* Сама карточка */
.product-card,
.product {
    position: relative !important;
    overflow: hidden !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(9, 10, 12, 0.82) !important;

    border: 1px solid var(--dusk-border) !important;
    border-radius: var(--dusk-radius-lg) !important;
    color: var(--dusk-text) !important;

    box-shadow: var(--dusk-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transform: translateY(0) scale(1) !important;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease !important;
}

/* Тонкая подсветка внутри карточки */
.product-card::before,
.product::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.10), transparent 40%),
        radial-gradient(circle at 50% 100%, rgba(232, 91, 42, 0.12), transparent 44%) !important;
    opacity: 0.85 !important;
    z-index: 0 !important;
}

/* Акцентная линия сверху */
.product-card::after,
.product::after {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    top: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(232, 91, 42, 0.72), transparent) !important;
    opacity: 0.74 !important;
    z-index: 2 !important;
}

/* Ховер карточки */
.product-card:hover,
.product:hover {
    transform: translateY(-5px) scale(1.018) !important;
    border-color: rgba(232, 91, 42, 0.46) !important;
    box-shadow: var(--dusk-shadow-md), var(--dusk-shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    z-index: 5 !important;
}

/* Контейнер изображения */
.product-card-image-container {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.10), transparent 44%),
        radial-gradient(circle at 50% 100%, rgba(232, 91, 42, 0.09), transparent 55%),
        rgba(255, 255, 255, 0.018) !important;
    background-image:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.10), transparent 44%),
        radial-gradient(circle at 50% 100%, rgba(232, 91, 42, 0.09), transparent 55%) !important;
    border-radius: var(--dusk-radius-lg) var(--dusk-radius-lg) 0 0 !important;
    z-index: 1 !important;
}

/* Картинка товара */
.product-card-image-container img {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    object-fit: contain !important;
    filter:
        drop-shadow(0 12px 18px rgba(0, 0, 0, 0.52))
        saturate(1.04)
        contrast(1.03) !important;
    transform: scale(0.96) !important;
    transition: transform 0.25s ease, filter 0.25s ease !important;
}

.product-card:hover .product-card-image-container img {
    transform: scale(1.03) translateY(-2px) !important;
    filter:
        drop-shadow(0 18px 24px rgba(0, 0, 0, 0.62))
        saturate(1.08)
        contrast(1.05) !important;
}

/* Низ карточки */
.product-card-footer {
    position: relative !important;
    z-index: 2 !important;

    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.38)),
        rgba(9, 10, 12, 0.78) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.075) !important;
    color: var(--dusk-text) !important;
    padding: 12px 14px 14px !important;
}

/* Название товара */
.product-card-name {
    color: var(--dusk-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.22 !important;
    letter-spacing: 0.01em !important;
    margin: 0 0 8px 0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Цена */
.product-card-price {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 5px 9px !important;

    color: #ffd2bd !important;
    background: rgba(232, 91, 42, 0.12) !important;
    border: 1px solid rgba(232, 91, 42, 0.24) !important;
    border-radius: 999px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.015em !important;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

/* Лейблы на карточке */
.product-card-labels {
    position: absolute !important;
    z-index: 4 !important;
}

.product-card-label,
.product-label,
.label {
    background: rgba(232, 91, 42, 0.90) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(232, 91, 42, 0.22) !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

/* =========================================================
   КНОПКИ И КАТЕГОРИИ
   ========================================================= */

.btn,
.btn-grafit,
.app-button,
.auth-btn,
.balance-btn,
.profile-btn,
button,
a.button {
    min-height: 40px !important;
    border-radius: 999px !important;
    border: 1px solid var(--dusk-border) !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
        rgba(12, 13, 15, 0.74) !important;

    color: var(--dusk-text) !important;
    box-shadow: var(--dusk-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

    font-family: 'Body Grotesque Fit', system-ui, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;

    cursor: pointer !important;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease !important;
}

.btn:hover,
.btn-grafit:hover,
.app-button:hover,
.auth-btn:hover,
.balance-btn:hover,
.profile-btn:hover,
button:hover,
a.button:hover {
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.28), rgba(232, 91, 42, 0.16)),
        rgba(12, 13, 15, 0.82) !important;

    border-color: rgba(232, 91, 42, 0.46) !important;
    color: #ffffff !important;
    box-shadow: var(--dusk-shadow-sm), 0 0 22px rgba(232, 91, 42, 0.22) !important;
    transform: translateY(-1px) !important;
    animation: none !important;
}

.btn.Active,
.btn-grafit.Active,
.app-button--active,
.active {
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.48), rgba(232, 91, 42, 0.26)),
        rgba(12, 13, 15, 0.88) !important;

    border-color: rgba(232, 91, 42, 0.68) !important;
    color: #ffffff !important;
    box-shadow: 0 0 24px rgba(232, 91, 42, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.btn:active,
.btn-grafit:active,
.app-button:active,
button:active {
    transform: translateY(0) scale(0.985) !important;
}

/* =========================================================
   ПОИСК, ИНПУТЫ, СЕЛЕКТЫ
   ========================================================= */

input,
select,
textarea,
.search-input,
input[type="text"] {
    min-height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid var(--dusk-border) !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
        rgba(7, 8, 10, 0.72) !important;

    color: var(--dusk-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 8px 20px rgba(0, 0, 0, 0.22) !important;

    font-family: 'Body Grotesque Fit', system-ui, sans-serif !important;
    outline: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

input:focus,
select:focus,
textarea:focus,
.search-input:focus,
input[type="text"]:focus {
    border-color: rgba(232, 91, 42, 0.58) !important;
    box-shadow: 0 0 0 4px rgba(232, 91, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

input::placeholder,
textarea::placeholder,
.search-input::placeholder,
input[type="text"]::placeholder {
    color: var(--dusk-text-muted) !important;
    font-style: normal !important;
}

/* =========================================================
   БАННЕРЫ СПРАВА
   ========================================================= */

.banner-elem {
    overflow: hidden !important;
    position: relative !important;

    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(9, 10, 12, 0.82) !important;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(232, 91, 42, 0.18), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)) !important;

    color: var(--dusk-text) !important;
    border: 1px solid var(--dusk-border) !important;
    border-radius: var(--dusk-radius-lg) !important;

    box-shadow: var(--dusk-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: var(--dusk-blur);
    -webkit-backdrop-filter: var(--dusk-blur);
}

.banner-elem::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(90deg, rgba(232, 91, 42, 0.18), transparent 42%) !important;
    opacity: 0.65 !important;
}

.banner-item-link,
.banner-elem a {
    position: relative !important;
    z-index: 2 !important;
    color: var(--dusk-text) !important;
    text-decoration: none !important;
}

.bunner-title {
    color: #ffd2bd !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 8px !important;
}

.banner-content,
.banner-content p {
    color: var(--dusk-text-soft) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

/* =========================================================
   ФУТЕР
   ========================================================= */

.footer {
    margin-top: 28px !important;
    padding: 18px !important;
    background: rgba(7, 8, 10, 0.62) !important;
    border: 1px solid var(--dusk-border) !important;
    border-radius: var(--dusk-radius-lg) !important;
    color: var(--dusk-text-muted) !important;
    box-shadow: var(--dusk-shadow-sm) !important;
    backdrop-filter: var(--dusk-blur);
    -webkit-backdrop-filter: var(--dusk-blur);
}

.footer a {
    color: var(--dusk-text-soft) !important;
}

.footer a:hover {
    color: #ffd2bd !important;
}

/* =========================================================
   МОДАЛЬНЫЕ ОКНА
   ========================================================= */

.ModalCustomBlock_Main,
.modal,
.modal-content {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(8, 9, 11, 0.94) !important;

    color: var(--dusk-text) !important;
    border: 1px solid rgba(232, 91, 42, 0.34) !important;
    border-radius: 22px !important;

    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.62), 0 0 42px rgba(232, 91, 42, 0.16) !important;

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

/* =========================================================
   МЕЛКИЕ ПОЛИРОВКИ
   ========================================================= */

a {
    transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease !important;
}

img {
    user-select: none;
}

::selection {
    background: rgba(232, 91, 42, 0.42);
    color: #ffffff;
}

/* Скроллбар */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(232, 91, 42, 0.58) rgba(255, 255, 255, 0.055);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.045);
}

*::-webkit-scrollbar-thumb {
    background: rgba(232, 91, 42, 0.52);
    border-radius: 999px;
    border: 2px solid rgba(7, 8, 10, 0.9);
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(232, 91, 42, 0.72);
}

/* Убираем старую пульсацию, она делала интерфейс дешевле */
@keyframes glowPulse {
    from {
        box-shadow: 0 0 12px rgba(232, 91, 42, 0.18);
    }
    to {
        box-shadow: 0 0 18px rgba(232, 91, 42, 0.26);
    }
}

/* Плавное появление карточек */
@keyframes duskCardIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.product-card {
    animation: duskCardIn 0.34s ease both !important;
}

/* =========================================================
   АДАПТИВ
   ========================================================= */

@media (max-width: 900px) {
    .navbar,
    .navbar-mobile,
    .footer,
    .banner-elem,
    .animated.mb-4::before {
        border-radius: 16px !important;
    }

    .nav-item {
        margin-left: 6px !important;
    }

    .nav-item a {
        padding: 8px 12px !important;
        min-height: 38px !important;
    }

    .product-card-name {
        font-size: 14px !important;
    }

    .product-card-footer {
        padding: 10px 12px 12px !important;
    }
}

@media (max-width: 560px) {
    body {
        background-attachment: scroll !important;
    }

    .animated.mb-4::before {
        font-size: 13px !important;
        padding: 12px 14px !important;
    }

    .product-card:hover,
    .product:hover {
        transform: translateY(-2px) scale(1.01) !important;
    }

    .btn,
    .btn-grafit,
    .app-button,
    .auth-btn,
    .balance-btn,
    .profile-btn,
    button,
    a.button {
        min-height: 38px !important;
        font-size: 13px !important;
    }
}

/* Уважение к настройкам пользователя: меньше анимаций */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* =========================================================
   DUSK MODERN MODAL + PROFILE BUTTONS FIX
   Пополнение баланса, профиль, кнопки личного кабинета
   Вставлять в самый низ CSS
   ========================================================= */

/* =========================================================
   КНОПКИ БАЛАНСА И ПРОФИЛЯ В ШАПКЕ
   ========================================================= */

.auth-btns {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.balance-btn,
.profile-btn,
.profile-btn.auth,
.auth-btn,
.lang-label.auth-btn {
    position: relative !important;
    overflow: hidden !important;

    min-height: 40px !important;
    padding: 9px 15px !important;

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

    color: rgba(244, 242, 238, 0.88) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
        rgba(9, 10, 12, 0.78) !important;

    border: 1px solid rgba(255, 255, 255, 0.105) !important;
    border-radius: 999px !important;

    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;

    font-size: 14px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;

    cursor: pointer !important;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease !important;
}

.balance-btn::before,
.profile-btn::before,
.profile-btn.auth::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    display: inline-block !important;
    border-radius: 999px !important;
    background: rgba(232, 91, 42, 0.95) !important;
    box-shadow: 0 0 12px rgba(232, 91, 42, 0.72) !important;
    flex: 0 0 auto !important;
}

.balance-btn {
    color: #ffd2bd !important;
    border-color: rgba(232, 91, 42, 0.28) !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.18), rgba(232, 91, 42, 0.07)),
        rgba(9, 10, 12, 0.82) !important;
}

.profile-btn,
.profile-btn.auth {
    color: rgba(244, 242, 238, 0.90) !important;
}

.balance-btn:hover,
.profile-btn:hover,
.profile-btn.auth:hover,
.auth-btn:hover,
.lang-label.auth-btn:hover {
    color: #ffffff !important;
    border-color: rgba(232, 91, 42, 0.48) !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.24), rgba(232, 91, 42, 0.11)),
        rgba(12, 13, 15, 0.88) !important;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.36),
        0 0 24px rgba(232, 91, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

    transform: translateY(-1px) !important;
}

.balance-btn:active,
.profile-btn:active,
.profile-btn.auth:active,
.auth-btn:active {
    transform: translateY(0) scale(0.985) !important;
}

/* =========================================================
   ОБЩИЙ ВИД МОДАЛЬНЫХ ОКОН
   ========================================================= */

.ModalCustomBlock_Main,
.modal,
.modal-content,
.modal-dialog,
[role="dialog"],
[class*="modal"],
[class*="Modal"] {
    color: #f4f2ee !important;
}

/* Главная коробка модалки */
.ModalCustomBlock_Main,
.modal-content,
[role="dialog"],
[class*="modal-content"],
[class*="modal__content"],
[class*="ModalCustomBlock"],
[class*="ModalContent"] {
    overflow: hidden !important;
    position: relative !important;

    max-width: 560px !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(232, 91, 42, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028)),
        rgba(8, 9, 11, 0.96) !important;

    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 24px !important;

    box-shadow:
        0 34px 110px rgba(0, 0, 0, 0.72),
        0 0 48px rgba(232, 91, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.085) !important;

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

    font-family: 'Body Grotesque Fit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Верхняя тонкая линия модалки */
.ModalCustomBlock_Main::before,
.modal-content::before,
[role="dialog"]::before,
[class*="modal-content"]::before,
[class*="ModalCustomBlock"]::before {
    content: "" !important;
    position: absolute !important;
    left: 22px !important;
    right: 22px !important;
    top: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(232, 91, 42, 0.72), transparent) !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
}

/* Подложка затемнения за модалкой */
.modal-backdrop,
[class*="overlay"],
[class*="Overlay"],
[class*="backdrop"],
[class*="Backdrop"] {
    background:
        radial-gradient(circle at center, rgba(232, 91, 42, 0.10), transparent 34%),
        rgba(0, 0, 0, 0.76) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Заголовки внутри модалки */
.ModalCustomBlock_Main h1,
.ModalCustomBlock_Main h2,
.ModalCustomBlock_Main h3,
.modal h1,
.modal h2,
.modal h3,
[role="dialog"] h1,
[role="dialog"] h2,
[role="dialog"] h3,
[class*="modal"] h1,
[class*="modal"] h2,
[class*="modal"] h3 {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 14px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
}

/* Текст внутри модалки */
.ModalCustomBlock_Main p,
.ModalCustomBlock_Main span,
.ModalCustomBlock_Main label,
.modal p,
.modal span,
.modal label,
[role="dialog"] p,
[role="dialog"] span,
[role="dialog"] label,
[class*="modal"] p,
[class*="modal"] span,
[class*="modal"] label {
    color: rgba(244, 242, 238, 0.78) !important;
}

/* Поля ввода в пополнении */
.ModalCustomBlock_Main input,
.ModalCustomBlock_Main select,
.ModalCustomBlock_Main textarea,
.modal input,
.modal select,
.modal textarea,
[role="dialog"] input,
[role="dialog"] select,
[role="dialog"] textarea,
[class*="modal"] input,
[class*="modal"] select,
[class*="modal"] textarea {
    width: 100% !important;
    min-height: 46px !important;

    color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.025)),
        rgba(4, 5, 7, 0.72) !important;

    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 14px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 10px 26px rgba(0, 0, 0, 0.20) !important;

    padding: 0 14px !important;
    outline: none !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease !important;
}

.ModalCustomBlock_Main input:focus,
.ModalCustomBlock_Main select:focus,
.ModalCustomBlock_Main textarea:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus,
[role="dialog"] input:focus,
[role="dialog"] select:focus,
[role="dialog"] textarea:focus,
[class*="modal"] input:focus,
[class*="modal"] select:focus,
[class*="modal"] textarea:focus {
    border-color: rgba(232, 91, 42, 0.58) !important;
    box-shadow:
        0 0 0 4px rgba(232, 91, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;
}

.ModalCustomBlock_Main input::placeholder,
.modal input::placeholder,
[role="dialog"] input::placeholder,
[class*="modal"] input::placeholder {
    color: rgba(244, 242, 238, 0.44) !important;
}

/* Карточки способов оплаты, если они есть */
.ModalCustomBlock_Main [class*="provider"],
.ModalCustomBlock_Main [class*="payment"],
.ModalCustomBlock_Main [class*="Payment"],
.ModalCustomBlock_Main [class*="method"],
.modal [class*="provider"],
.modal [class*="payment"],
.modal [class*="Payment"],
.modal [class*="method"],
[role="dialog"] [class*="provider"],
[role="dialog"] [class*="payment"],
[role="dialog"] [class*="Payment"],
[role="dialog"] [class*="method"] {
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f4f2ee !important;
}

/* Внутренние панели модалки */
.ModalCustomBlock_Main .card,
.ModalCustomBlock_Main .panel,
.ModalCustomBlock_Main .block,
.modal .card,
.modal .panel,
.modal .block,
[role="dialog"] .card,
[role="dialog"] .panel,
[role="dialog"] .block {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.020)),
        rgba(255, 255, 255, 0.035) !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 16px !important;
    color: #f4f2ee !important;
}

/* Кнопки внутри модалки */
.ModalCustomBlock_Main button,
.ModalCustomBlock_Main .btn,
.ModalCustomBlock_Main .app-button,
.modal button,
.modal .btn,
.modal .app-button,
[role="dialog"] button,
[role="dialog"] .btn,
[role="dialog"] .app-button,
[class*="modal"] button,
[class*="modal"] .btn,
[class*="modal"] .app-button {
    min-height: 44px !important;
    padding: 10px 18px !important;

    border-radius: 999px !important;
    border: 1px solid rgba(232, 91, 42, 0.38) !important;

    color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.46), rgba(232, 91, 42, 0.24)),
        rgba(12, 13, 15, 0.92) !important;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.34),
        0 0 22px rgba(232, 91, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;

    font-weight: 750 !important;
    letter-spacing: 0.01em !important;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease !important;
}

.ModalCustomBlock_Main button:hover,
.ModalCustomBlock_Main .btn:hover,
.ModalCustomBlock_Main .app-button:hover,
.modal button:hover,
.modal .btn:hover,
.modal .app-button:hover,
[role="dialog"] button:hover,
[role="dialog"] .btn:hover,
[role="dialog"] .app-button:hover,
[class*="modal"] button:hover,
[class*="modal"] .btn:hover,
[class*="modal"] .app-button:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(232, 91, 42, 0.72) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.42),
        0 0 30px rgba(232, 91, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Вторичные/серые кнопки внутри модалки */
.ModalCustomBlock_Main button[type="button"],
.modal button[type="button"],
[role="dialog"] button[type="button"] {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.030)),
        rgba(12, 13, 15, 0.88) !important;

    border-color: rgba(255, 255, 255, 0.13) !important;
    color: rgba(244, 242, 238, 0.86) !important;
}

/* Кнопка закрытия */
.ModalCustomBlock_Main [class*="close"],
.modal [class*="close"],
[role="dialog"] [class*="close"],
[class*="modal"] [class*="close"] {
    width: 38px !important;
    height: 38px !important;

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

    color: rgba(244, 242, 238, 0.78) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 999px !important;

    box-shadow: none !important;
}

.ModalCustomBlock_Main [class*="close"]:hover,
.modal [class*="close"]:hover,
[role="dialog"] [class*="close"]:hover,
[class*="modal"] [class*="close"]:hover {
    color: #ffffff !important;
    background: rgba(232, 91, 42, 0.18) !important;
    border-color: rgba(232, 91, 42, 0.38) !important;
}

/* =========================================================
   СТРАНИЦА ПРОФИЛЯ / КНОПКИ ПРОФИЛЯ
   Работает по типовым классам и href, даже если точные классы плавают
   ========================================================= */

.profile,
.profile-page,
.profile-wrapper,
.profile-content,
[class*="profile"],
[class*="Profile"] {
    color: #f4f2ee !important;
}

/* Панели профиля */
.profile .card,
.profile-page .card,
.profile-wrapper .card,
.profile-content .card,
[class*="profile"] .card,
[class*="Profile"] .card,
[class*="profile"] [class*="panel"],
[class*="Profile"] [class*="panel"],
[class*="profile"] [class*="block"],
[class*="Profile"] [class*="block"] {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.025)),
        rgba(9, 10, 12, 0.82) !important;

    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 20px !important;

    color: #f4f2ee !important;

    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;

    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Кнопки/ссылки разделов профиля */
.profile a,
.profile button,
.profile-page a,
.profile-page button,
.profile-wrapper a,
.profile-wrapper button,
.profile-content a,
.profile-content button,
[class*="profile"] a,
[class*="profile"] button,
[class*="Profile"] a,
[class*="Profile"] button,
a[href*="/profile"],
a[href*="profile/payments"],
a[href*="profile/purchases"],
a[href*="profile/product-assignments"],
a[href*="profile/transfers"],
a[href*="profile/promocodes"] {
    border-radius: 999px !important;
    color: rgba(244, 242, 238, 0.88) !important;
    text-decoration: none !important;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease !important;
}

/* Именно кнопочный вид */
.profile button,
.profile .btn,
.profile .app-button,
.profile-page button,
.profile-page .btn,
.profile-page .app-button,
.profile-wrapper button,
.profile-wrapper .btn,
.profile-wrapper .app-button,
.profile-content button,
.profile-content .btn,
.profile-content .app-button,
[class*="profile"] button,
[class*="profile"] .btn,
[class*="profile"] .app-button,
[class*="Profile"] button,
[class*="Profile"] .btn,
[class*="Profile"] .app-button,
a[href*="profile/payments"],
a[href*="profile/purchases"],
a[href*="profile/product-assignments"],
a[href*="profile/transfers"],
a[href*="profile/promocodes"] {
    min-height: 42px !important;
    padding: 10px 16px !important;

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

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.030)),
        rgba(12, 13, 15, 0.78) !important;

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

    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Hover профиля */
.profile a:hover,
.profile button:hover,
.profile-page a:hover,
.profile-page button:hover,
.profile-wrapper a:hover,
.profile-wrapper button:hover,
.profile-content a:hover,
.profile-content button:hover,
[class*="profile"] a:hover,
[class*="profile"] button:hover,
[class*="Profile"] a:hover,
[class*="Profile"] button:hover,
a[href*="/profile"]:hover,
a[href*="profile/payments"]:hover,
a[href*="profile/purchases"]:hover,
a[href*="profile/product-assignments"]:hover,
a[href*="profile/transfers"]:hover,
a[href*="profile/promocodes"]:hover {
    color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.24), rgba(232, 91, 42, 0.11)),
        rgba(12, 13, 15, 0.88) !important;

    border-color: rgba(232, 91, 42, 0.44) !important;

    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.34),
        0 0 24px rgba(232, 91, 42, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.085) !important;

    transform: translateY(-1px) !important;
}

/* Активный пункт профиля */
.profile .active,
.profile-page .active,
.profile-wrapper .active,
.profile-content .active,
[class*="profile"] .active,
[class*="Profile"] .active,
.profile .router-link-active,
.profile-page .router-link-active,
[class*="profile"] .router-link-active {
    color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.42), rgba(232, 91, 42, 0.22)),
        rgba(12, 13, 15, 0.94) !important;

    border-color: rgba(232, 91, 42, 0.62) !important;

    box-shadow:
        0 0 28px rgba(232, 91, 42, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* Таблицы/списки в профиле */
.profile table,
.profile-page table,
.profile-wrapper table,
.profile-content table,
[class*="profile"] table,
[class*="Profile"] table {
    color: #f4f2ee !important;
    background: rgba(9, 10, 12, 0.62) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.profile th,
.profile td,
.profile-page th,
.profile-page td,
.profile-wrapper th,
.profile-wrapper td,
.profile-content th,
.profile-content td,
[class*="profile"] th,
[class*="profile"] td,
[class*="Profile"] th,
[class*="Profile"] td {
    color: rgba(244, 242, 238, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.profile th,
.profile-page th,
.profile-wrapper th,
.profile-content th,
[class*="profile"] th,
[class*="Profile"] th {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.045) !important;
}

/* Мобильная поправка */
@media (max-width: 680px) {
    .auth-btns {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .balance-btn,
    .profile-btn,
    .profile-btn.auth,
    .auth-btn,
    .lang-label.auth-btn {
        min-height: 38px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    .ModalCustomBlock_Main,
    .modal-content,
    [role="dialog"],
    [class*="modal-content"],
    [class*="ModalCustomBlock"] {
        max-width: calc(100vw - 24px) !important;
        border-radius: 20px !important;
    }
}

/* =========================================================
   DUSK RECHARGE PANEL FIX
   Точечная правка окна "Пополнение баланса"
   Вставлять в самый низ CSS
   ========================================================= */

/* Главная панель пополнения */
.recharge-panel {
    position: relative !important;
    overflow: hidden !important;

    width: 100% !important;
    max-width: 760px !important;

    padding: 26px !important;

    color: #f4f2ee !important;

    background:
        radial-gradient(circle at 50% 0%, rgba(232, 91, 42, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.080), rgba(255, 255, 255, 0.025)),
        rgba(8, 9, 11, 0.96) !important;

    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 24px !important;

    box-shadow:
        0 34px 110px rgba(0, 0, 0, 0.72),
        0 0 48px rgba(232, 91, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.085) !important;

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

    font-family: 'Body Grotesque Fit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Верхняя тонкая подсветка */
.recharge-panel::before {
    content: "" !important;
    position: absolute !important;
    left: 24px !important;
    right: 24px !important;
    top: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(232, 91, 42, 0.74), transparent) !important;
    opacity: 0.95 !important;
    pointer-events: none !important;
}

/* Мягкое внутреннее свечение */
.recharge-panel::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 0% 100%, rgba(232, 91, 42, 0.10), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.055), transparent 32%) !important;
    opacity: 0.85 !important;
}

/* Чтобы контент был выше декоративных слоёв */
.recharge-panel > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Заголовок "Пополнение баланса" */
.recharge-panel-header {
    margin: 0 0 22px 0 !important;

    color: #ffffff !important;

    font-size: 24px !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.01em !important;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72) !important;
}

/* Секции внутри окна */
.recharge-panel-section {
    margin-bottom: 18px !important;
    padding: 16px !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.026) !important;

    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 18px !important;

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

/* Убираем конфликт с tailwind -mt-4, чтобы секция не прилипала */
.recharge-panel-section.-mt-4 {
    margin-top: 0 !important;
}

/* Заголовки секций */
.recharge-panel-title {
    margin: 0 0 12px 0 !important;

    color: #ffd2bd !important;

    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.015em !important;
}

/* Подписи */
.recharge-panel-label {
    margin-bottom: 7px !important;

    color: rgba(244, 242, 238, 0.72) !important;

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

/* Ряд с суммой/email */
.recharge-panel-amount-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: end !important;
}

/* Обёртка инпута и readonly-поля */
.recharge-panel-input,
.promo-wrapper.recharge-panel-input {
    min-height: 46px !important;
    width: 100% !important;

    display: flex !important;
    align-items: center !important;

    color: #ffffff !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.025)),
        rgba(4, 5, 7, 0.74) !important;

    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 14px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 10px 26px rgba(0, 0, 0, 0.20) !important;

    padding: 0 14px !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease !important;
}

/* Сам input внутри */
.recharge-panel-input-raw {
    width: 100% !important;
    min-height: 44px !important;

    padding: 0 !important;
    margin: 0 !important;

    color: #ffffff !important;
    background: transparent !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    font-family: 'Body Grotesque Fit', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

/* Убираем белые стрелки/дефолтный вид у number input */
.recharge-panel-input-raw::-webkit-outer-spin-button,
.recharge-panel-input-raw::-webkit-inner-spin-button {
    margin: 0 !important;
    -webkit-appearance: none !important;
}

/* Placeholder */
.recharge-panel-input-raw::placeholder {
    color: rgba(244, 242, 238, 0.42) !important;
    font-weight: 600 !important;
}

/* Focus через :focus-within на обёртку */
.recharge-panel-input:focus-within,
.promo-wrapper.recharge-panel-input:focus-within {
    border-color: rgba(232, 91, 42, 0.62) !important;

    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.090), rgba(255, 255, 255, 0.030)),
        rgba(4, 5, 7, 0.82) !important;

    box-shadow:
        0 0 0 4px rgba(232, 91, 42, 0.13),
        0 14px 30px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;
}

/* Readonly "Сумма к зачислению" */
.recharge-panel-input.readonly {
    color: #ffd2bd !important;

    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.16), rgba(232, 91, 42, 0.060)),
        rgba(4, 5, 7, 0.76) !important;

    border-color: rgba(232, 91, 42, 0.30) !important;

    font-size: 16px !important;
    font-weight: 850 !important;

    box-shadow:
        0 0 22px rgba(232, 91, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.060) !important;
}

/* Блок методов оплаты */
.recharge-panel-providers {
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;

    padding: 10px !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
        rgba(4, 5, 7, 0.54) !important;

    border: 1px dashed rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
}

/* Если внутри появятся провайдеры оплаты */
.recharge-panel-providers > * {
    min-height: 40px !important;

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

    padding: 9px 14px !important;

    color: rgba(244, 242, 238, 0.88) !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.025)),
        rgba(12, 13, 15, 0.76) !important;

    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 999px !important;

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease !important;
}

.recharge-panel-providers > *:hover {
    color: #ffffff !important;
    border-color: rgba(232, 91, 42, 0.42) !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.22), rgba(232, 91, 42, 0.095)),
        rgba(12, 13, 15, 0.86) !important;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.30),
        0 0 22px rgba(232, 91, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;

    transform: translateY(-1px) !important;
}

/* Промокод */
.recharge-panel form.flex {
    display: flex !important;
    width: 100% !important;
    gap: 10px !important;
}

/* Блок бонусов */
.recharge-panel-bonuses {
    margin-top: 14px !important;
    color: rgba(244, 242, 238, 0.76) !important;
}

/* Все p/div/span внутри панели - чтобы белые дефолты не лезли */
.recharge-panel p,
.recharge-panel div,
.recharge-panel span,
.recharge-panel label {
    color: inherit;
}

/* Автозаполнение браузера - убираем бело-жёлтую заливку */
.recharge-panel-input-raw:-webkit-autofill,
.recharge-panel-input-raw:-webkit-autofill:hover,
.recharge-panel-input-raw:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    box-shadow: 0 0 0 1000px rgba(4, 5, 7, 0.94) inset !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* Кнопки, если появляются внутри формы пополнения */
.recharge-panel button,
.recharge-panel .btn,
.recharge-panel .app-button {
    min-height: 44px !important;

    padding: 10px 18px !important;

    color: #ffffff !important;

    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.48), rgba(232, 91, 42, 0.24)),
        rgba(12, 13, 15, 0.92) !important;

    border: 1px solid rgba(232, 91, 42, 0.42) !important;
    border-radius: 999px !important;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.34),
        0 0 22px rgba(232, 91, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;

    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease !important;
}

.recharge-panel button:hover,
.recharge-panel .btn:hover,
.recharge-panel .app-button:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(232, 91, 42, 0.72) !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.42),
        0 0 30px rgba(232, 91, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Адаптив */
@media (max-width: 820px) {
    .recharge-panel {
        max-width: calc(100vw - 24px) !important;
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .recharge-panel-amount-row {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    .recharge-panel-header {
        font-size: 21px !important;
    }

    .recharge-panel-section {
        padding: 14px !important;
        border-radius: 16px !important;
    }
}

/* =========================================================
   DUSK RECHARGE PANEL HOTFIX
   Исправляет двойные поля, съехавшие labels и промокод
   Вставлять строго в самый низ CSS
   ========================================================= */

/* Панель не должна раздуваться и ломать сетку */
.recharge-panel {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 620px !important;
    padding: 26px !important;
}

/* Секции ровнее и компактнее */
.recharge-panel-section {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 16px !important;
    margin-bottom: 18px !important;
}

/* Заголовок без лишнего смещения */
.recharge-panel-header {
    margin: 0 0 22px 0 !important;
    text-align: center !important;
}

/* Главная проблема: 3 колонки были слишком узкие.
   Делаем: сумма + к зачислению в первой строке, email на всю ширину ниже. */
.recharge-panel-amount-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
}

/* Третий блок - Email - на всю строку */
.recharge-panel-amount-row > div:nth-child(3) {
    grid-column: 1 / -1 !important;
}

/* Все внутренние блоки не должны вылезать */
.recharge-panel-amount-row > div,
.recharge-panel-section > div,
.recharge-panel form,
.promo-wrapper {
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Подписи фиксируем, чтобы они не прыгали и не дробились как попало */
.recharge-panel-label {
    display: block !important;
    min-height: 18px !important;
    margin: 0 0 7px 0 !important;

    color: rgba(244, 242, 238, 0.76) !important;

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

    white-space: normal !important;
}

/* Обёртка поля - единственная видимая рамка */
.recharge-panel-input,
.promo-wrapper.recharge-panel-input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 46px !important;

    display: flex !important;
    align-items: center !important;

    padding: 0 14px !important;

    color: #ffffff !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.020)),
        rgba(4, 5, 7, 0.78) !important;

    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 14px !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 10px 26px rgba(0, 0, 0, 0.20) !important;

    overflow: hidden !important;
}

/* САМОЕ ВАЖНОЕ:
   Перебиваем общий стиль input[type="text"], input[type="number"], input[type="email"].
   Иначе будет "поле внутри поля". */
.recharge-panel .recharge-panel-input .recharge-panel-input-raw,
.recharge-panel .promo-wrapper.recharge-panel-input .recharge-panel-input-raw,
.recharge-panel input.recharge-panel-input-raw,
.recharge-panel input[type="text"].recharge-panel-input-raw,
.recharge-panel input[type="number"].recharge-panel-input-raw,
.recharge-panel input[type="email"].recharge-panel-input-raw {
    box-sizing: border-box !important;

    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;

    font-family: 'Body Grotesque Fit', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 44px !important;

    appearance: textfield !important;
    -moz-appearance: textfield !important;
}

/* Убираем стрелки number */
.recharge-panel input[type="number"].recharge-panel-input-raw::-webkit-outer-spin-button,
.recharge-panel input[type="number"].recharge-panel-input-raw::-webkit-inner-spin-button {
    margin: 0 !important;
    -webkit-appearance: none !important;
}

/* Placeholder */
.recharge-panel .recharge-panel-input-raw::placeholder {
    color: rgba(244, 242, 238, 0.42) !important;
    font-weight: 650 !important;
}

/* Focus только на внешней рамке */
.recharge-panel-input:focus-within,
.promo-wrapper.recharge-panel-input:focus-within {
    border-color: rgba(232, 91, 42, 0.62) !important;

    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.095), rgba(255, 255, 255, 0.028)),
        rgba(4, 5, 7, 0.84) !important;

    box-shadow:
        0 0 0 4px rgba(232, 91, 42, 0.13),
        0 14px 30px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;
}

/* Readonly "Сумма к зачислению" */
.recharge-panel-input.readonly {
    justify-content: flex-start !important;

    color: #ffd2bd !important;

    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.16), rgba(232, 91, 42, 0.060)),
        rgba(4, 5, 7, 0.78) !important;

    border-color: rgba(232, 91, 42, 0.32) !important;

    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 44px !important;
}

/* Промокод - на всю ширину, без вложенного второго поля */
.recharge-panel-section form.flex,
.recharge-panel-section form {
    display: flex !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 0 !important;
}

.recharge-panel-section .promo-wrapper {
    flex: 1 1 auto !important;
    width: 100% !important;
}

/* Блок метода оплаты */
.recharge-panel-providers {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;

    padding: 10px !important;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0.014)),
        rgba(4, 5, 7, 0.58) !important;

    border: 1px dashed rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
}

/* Автозаполнение браузера */
.recharge-panel input.recharge-panel-input-raw:-webkit-autofill,
.recharge-panel input.recharge-panel-input-raw:-webkit-autofill:hover,
.recharge-panel input.recharge-panel-input-raw:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    box-shadow: 0 0 0 1000px rgba(4, 5, 7, 0.94) inset !important;
    border: 0 !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* Мобильная версия */
@media (max-width: 720px) {
    .recharge-panel {
        max-width: calc(100vw - 24px) !important;
        padding: 20px !important;
    }

    .recharge-panel-amount-row {
        grid-template-columns: 1fr !important;
    }

    .recharge-panel-amount-row > div:nth-child(3) {
        grid-column: auto !important;
    }

    .recharge-panel-header {
        font-size: 21px !important;
    }
}
/* =========================================================
   DUSK RECHARGE FINAL PATCH
   Проценты/бонусы + маскировка undefined в email
   Вставлять в самый низ CSS
   ========================================================= */

/* Проценты, бонусы, комиссии внутри окна пополнения */
.recharge-panel-bonuses,
.recharge-panel-bonuses *,
.recharge-panel [class*="bonus"],
.recharge-panel [class*="Bonus"],
.recharge-panel [class*="percent"],
.recharge-panel [class*="Percent"],
.recharge-panel [class*="commission"],
.recharge-panel [class*="Commission"],
.recharge-panel [class*="fee"],
.recharge-panel [class*="Fee"] {
    color: #ffd2bd !important;
}

/* Если процент выводится отдельной плашкой */
.recharge-panel [class*="percent"],
.recharge-panel [class*="Percent"],
.recharge-panel [class*="bonus-percent"],
.recharge-panel [class*="BonusPercent"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 24px !important;
    padding: 4px 9px !important;

    color: #ffd2bd !important;

    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.22), rgba(232, 91, 42, 0.08)),
        rgba(4, 5, 7, 0.76) !important;

    border: 1px solid rgba(232, 91, 42, 0.34) !important;
    border-radius: 999px !important;

    box-shadow:
        0 0 18px rgba(232, 91, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;

    font-weight: 800 !important;
}

/* Бонусные строки/карточки */
.recharge-panel-bonuses > *,
.recharge-panel [class*="bonus"] > *,
.recharge-panel [class*="Bonus"] > * {
    color: inherit !important;
}

/* Email-поле: готовим обёртку под фейковую подсказку */
.recharge-panel .recharge-panel-input:has(input[type="email"]) {
    position: relative !important;
}

/* Когда email пустой/невалидный и поле не в фокусе - прячем мусорный текст */
.recharge-panel .recharge-panel-input:has(input[type="email"]:invalid:not(:focus)) input[type="email"].recharge-panel-input-raw {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    caret-color: #ffffff !important;
}

/* Фейковая нормальная подсказка вместо undefined */
.recharge-panel .recharge-panel-input:has(input[type="email"]:invalid:not(:focus))::after {
    content: "Введите email" !important;

    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    color: rgba(244, 242, 238, 0.42) !important;

    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1 !important;

    pointer-events: none !important;
}

/* При фокусе показываем реальный ввод */
.recharge-panel .recharge-panel-input:has(input[type="email"]:focus)::after {
    display: none !important;
}

.recharge-panel .recharge-panel-input:has(input[type="email"]:focus) input[type="email"].recharge-panel-input-raw {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* На всякий случай перебиваем placeholder самого email */
.recharge-panel input[type="email"].recharge-panel-input-raw::placeholder {
    color: rgba(244, 242, 238, 0.42) !important;
    opacity: 1 !important;
}

/* =========================================================
   DUSK MODAL READABILITY PATCH
   Финальная полировка кнопок, бонусов и счётчика товара
   ========================================================= */

.modal-footer-buttons {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 10px 0 0 !important;
    padding: 0 16px 16px !important;
}

.modal-footer-buttons .modal-close-button,
.modal-footer-buttons .modal-primary-button {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 116px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 22px !important;

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

    border-radius: 999px !important;
    font-family: 'Body Grotesque Fit', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

.modal-footer-buttons .modal-close-button {
    color: rgba(244, 242, 238, 0.84) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.024)),
        rgba(10, 11, 13, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;
}

.modal-footer-buttons .modal-close-button:hover {
    color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.20), rgba(255, 255, 255, 0.028)),
        rgba(12, 13, 15, 0.92) !important;
    border-color: rgba(232, 91, 42, 0.42) !important;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.40),
        0 0 22px rgba(232, 91, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.085) !important;
}

.modal-footer-buttons .modal-primary-button {
    color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.52), rgba(232, 91, 42, 0.25)),
        rgba(12, 13, 15, 0.94) !important;
    border: 1px solid rgba(232, 91, 42, 0.56) !important;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.40),
        0 0 24px rgba(232, 91, 42, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.modal-footer-buttons .modal-close-button-text,
.modal-footer-buttons .modal-primary-button-text {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;

    display: inline !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    -webkit-text-fill-color: currentColor !important;
}

.recharge-panel .recharge-panel-bonuses {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
    gap: 12px 14px !important;
    align-items: center !important;
    margin-top: 18px !important;
}

.recharge-panel .recharge-panel-bonus-per-summ {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;

    color: #f3ddd1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

.recharge-panel .recharge-panel-bonus,
.recharge-panel .recharge-panel-bonus-per-summ > [class*="bonus"],
.recharge-panel .recharge-panel-bonus-per-summ > [class*="Bonus"] {
    box-sizing: border-box !important;
    min-width: 46px !important;
    min-height: 28px !important;
    padding: 5px 10px !important;

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

    color: #ffd8c5 !important;
    -webkit-text-fill-color: #ffd8c5 !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.28), rgba(232, 91, 42, 0.10)),
        rgba(11, 12, 14, 0.94) !important;
    border: 1px solid rgba(232, 91, 42, 0.42) !important;
    border-radius: 999px !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.26),
        0 0 18px rgba(232, 91, 42, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;

    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.product-modal .amount-control-counter,
.modal .amount-control-counter {
    box-sizing: border-box !important;
    min-height: 66px !important;
    padding: 6px !important;
    gap: 8px !important;

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

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.018)),
        rgba(5, 6, 8, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 16px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 12px 28px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden !important;
}

.product-modal .amount-control-counter-button,
.modal .amount-control-counter-button {
    box-sizing: border-box !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;

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

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.46), rgba(232, 91, 42, 0.22)),
        rgba(12, 13, 15, 0.92) !important;
    border: 1px solid rgba(232, 91, 42, 0.42) !important;
    border-radius: 999px !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;

    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.product-modal .amount-control-count,
.modal .amount-control-count {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #f4f2ee !important;
    -webkit-text-fill-color: #f4f2ee !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.product-modal .amount-control-total,
.modal .amount-control-total {
    box-sizing: border-box !important;
    min-height: 42px !important;
    padding: 9px 14px !important;

    display: flex !important;
    align-items: center !important;
    gap: 7px !important;

    color: #ffd2bd !important;
    -webkit-text-fill-color: #ffd2bd !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.15), rgba(255, 255, 255, 0.020)),
        rgba(5, 6, 8, 0.88) !important;
    border: 1px solid rgba(232, 91, 42, 0.30) !important;
    border-radius: 12px !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.060) !important;

    font-size: 15px !important;
    font-weight: 900 !important;
}

.product-modal .amount-control-total-rub,
.modal .amount-control-total-rub {
    color: rgba(244, 242, 238, 0.58) !important;
    -webkit-text-fill-color: rgba(244, 242, 238, 0.58) !important;
}

@media (max-width: 520px) {
    .modal-footer-buttons {
        padding: 0 14px 14px !important;
    }

    .modal-footer-buttons .modal-close-button,
    .modal-footer-buttons .modal-primary-button {
        min-width: 104px !important;
        padding: 0 18px !important;
    }
}

/* =========================================================
   DUSK PRODUCT VARIANTS SELECT PATCH
   Варианты товара в модалке без белой темы и улёта списка
   ========================================================= */

.modal-content:has(.product-modal),
.product-modal,
.product-modal-inputs,
.product-modal .select-container {
    overflow: visible !important;
}

.product-modal .select-container {
    position: relative !important;
    z-index: 80 !important;
    width: 100% !important;
    min-width: 0 !important;
    isolation: isolate !important;
}

.product-modal .select-display {
    box-sizing: border-box !important;
    min-height: 48px !important;
    width: 100% !important;
    padding: 0 14px !important;

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

    color: #f4f2ee !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.020)),
        rgba(5, 6, 8, 0.90) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.060),
        0 12px 28px rgba(0, 0, 0, 0.28) !important;

    cursor: pointer !important;
}

.product-modal .select-display:hover {
    border-color: rgba(232, 91, 42, 0.44) !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.12), rgba(255, 255, 255, 0.020)),
        rgba(5, 6, 8, 0.92) !important;
}

.product-modal .select-text {
    min-width: 0 !important;
    margin: 0 !important;

    color: #f4f2ee !important;
    -webkit-text-fill-color: #f4f2ee !important;

    font-family: 'Body Grotesque Fit', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.product-modal .select-arrow,
.product-modal .select-arrow path {
    flex: 0 0 auto !important;
    fill: #ffd2bd !important;
}

.product-modal .select-options {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 10040 !important;

    box-sizing: border-box !important;
    width: 100% !important;
    max-height: min(260px, 42vh) !important;
    padding: 6px !important;

    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    color: #f4f2ee !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(232, 91, 42, 0.16), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.024)),
        rgba(7, 8, 10, 0.98) !important;
    border: 1px solid rgba(232, 91, 42, 0.34) !important;
    border-radius: 14px !important;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.56),
        0 0 28px rgba(232, 91, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.080) !important;

    pointer-events: auto !important;
}

.product-modal .select-option {
    box-sizing: border-box !important;
    min-height: 38px !important;
    padding: 9px 11px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;

    color: rgba(244, 242, 238, 0.82) !important;
    -webkit-text-fill-color: rgba(244, 242, 238, 0.82) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;

    font-family: 'Body Grotesque Fit', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    white-space: normal !important;

    cursor: pointer !important;
    pointer-events: auto !important;
}

.product-modal .select-option:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.24), rgba(232, 91, 42, 0.10)),
        rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(232, 91, 42, 0.32) !important;
}

.product-modal .select-option.active {
    color: #ffd2bd !important;
    -webkit-text-fill-color: #ffd2bd !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.32), rgba(232, 91, 42, 0.13)),
        rgba(255, 255, 255, 0.040) !important;
    border-color: rgba(232, 91, 42, 0.46) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.070) !important;
}

.product-modal .select-options::-webkit-scrollbar {
    width: 8px !important;
}

.product-modal .select-options::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.045) !important;
    border-radius: 999px !important;
}

.product-modal .select-options::-webkit-scrollbar-thumb {
    background: rgba(232, 91, 42, 0.46) !important;
    border-radius: 999px !important;
}

@media (max-width: 520px) {
    .product-modal .select-options {
        max-height: 220px !important;
    }
}

/* =========================================================
   DUSK FINAL OVERLAP + PROFILE PATCH
   Список вариантов в потоке и тёмный личный кабинет
   ========================================================= */

.product-modal .select-container {
    display: flex !important;
    flex-direction: column !important;
}

.product-modal .select-options {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;

    width: 100% !important;
    max-height: 210px !important;
    margin-top: 8px !important;

    flex: 0 0 auto !important;
}

.product-modal-inputs:has(.select-options) {
    gap: 12px !important;
}

.product-modal-inputs:has(.select-options) .amount-control {
    margin-top: 0 !important;
}

.profile-info,
.profile-sidebar,
.profile-sidebar__header,
.profile-sidebar__item,
.profile-sidebar__footer,
.profile-page .form,
.profile-wrapper .form,
.profile-content .form,
[class*="profile"] .form,
[class*="Profile"] .form {
    color: #f4f2ee !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.020)),
        rgba(8, 9, 11, 0.76) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.060) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.profile-info {
    padding: 8px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.profile-info__table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
    color: #f4f2ee !important;
}

.profile-info__row,
.profile-info__row--white {
    display: flex !important;
    margin: 0 !important;
    overflow: hidden !important;

    color: #f4f2ee !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
        rgba(5, 6, 8, 0.66) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}

.profile-info__row:hover {
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.13), rgba(255, 255, 255, 0.018)),
        rgba(7, 8, 10, 0.82) !important;
    border-color: rgba(232, 91, 42, 0.30) !important;
}

.profile-info__cell {
    box-sizing: border-box !important;
    min-height: 54px !important;
    padding: 14px 16px !important;
    border: 0 !important;

    color: rgba(244, 242, 238, 0.82) !important;
    background: transparent !important;

    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
}

.profile-info__cell--header {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.035) !important;
    font-weight: 900 !important;
}

.profile-info__cell a {
    color: #ffd2bd !important;
    text-decoration: none !important;
}

.profile-sidebar {
    box-sizing: border-box !important;
    padding: 8px !important;
    border-radius: 18px !important;
}

.profile-sidebar__header {
    min-height: 50px !important;
    margin: 0 0 8px !important;
    padding: 13px 16px !important;
    border-radius: 14px !important;
    color: #ffd2bd !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.profile-sidebar__list {
    display: grid !important;
    gap: 8px !important;
}

.profile-sidebar__item {
    overflow: hidden !important;
    border-radius: 14px !important;
}

.profile-sidebar__link,
.profile-sidebar__footer > .profile-sidebar__link {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;

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

    color: rgba(244, 242, 238, 0.86) !important;
    -webkit-text-fill-color: rgba(244, 242, 238, 0.86) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.022)),
        rgba(10, 11, 13, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.060) !important;

    font-size: 14px !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-decoration: none !important;
}

.profile-sidebar__link:hover,
.profile-sidebar__footer > .profile-sidebar__link:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.26), rgba(232, 91, 42, 0.11)),
        rgba(12, 13, 15, 0.92) !important;
    border-color: rgba(232, 91, 42, 0.42) !important;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.36),
        0 0 22px rgba(232, 91, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.080) !important;
}

.profile-sidebar__link--active,
.profile-sidebar__item .router-link-active,
.profile-sidebar__item .active {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.46), rgba(232, 91, 42, 0.22)),
        rgba(12, 13, 15, 0.96) !important;
    border-color: rgba(232, 91, 42, 0.62) !important;
    box-shadow:
        0 0 26px rgba(232, 91, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.090) !important;
}

.profile-sidebar__footer {
    margin-top: 8px !important;
    padding: 0 !important;
    border: 1px dashed rgba(232, 91, 42, 0.42) !important;
    border-radius: 14px !important;
    background: rgba(5, 6, 8, 0.58) !important;
}

.profile-sidebar__footer > .profile-sidebar__link {
    color: #ffd2bd !important;
    -webkit-text-fill-color: #ffd2bd !important;
    border-color: transparent !important;
}

@media (max-width: 760px) {
    .profile-info__row {
        flex-direction: column !important;
    }

    .profile-info__cell {
        width: 100% !important;
    }
}

/* =========================================================
   DUSK PROFILE CONTENT FINAL PATCH
   Таблицы, формы и поля внутри страниц личного кабинета
   ========================================================= */

.table,
.form,
.empty-box,
.profile-page .table,
.profile-wrapper .table,
.profile-content .table,
[class*="profile"] .table,
[class*="Profile"] .table {
    color: #f4f2ee !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.020)),
        rgba(8, 9, 11, 0.76) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 16px !important;
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.060) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.table {
    width: 100% !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table thead,
.table tbody,
.table tr {
    color: #f4f2ee !important;
    background: transparent !important;
}

.table thead {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.026)),
        rgba(5, 6, 8, 0.72) !important;
}

.table tbody {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.010)),
        rgba(5, 6, 8, 0.46) !important;
}

.table th,
.table td {
    padding: 13px 14px !important;
    color: rgba(244, 242, 238, 0.82) !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

.table th {
    color: #ffd2bd !important;
    -webkit-text-fill-color: #ffd2bd !important;
    background: rgba(255, 255, 255, 0.035) !important;
    font-weight: 900 !important;
}

.table td {
    color: rgba(244, 242, 238, 0.86) !important;
    -webkit-text-fill-color: rgba(244, 242, 238, 0.86) !important;
}

.table tbody tr:hover {
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.13), rgba(255, 255, 255, 0.018)),
        rgba(7, 8, 10, 0.82) !important;
}

.table tbody #empty-row td,
.table #empty-row td,
.empty-title,
.empty-description {
    color: rgba(244, 242, 238, 0.72) !important;
    -webkit-text-fill-color: rgba(244, 242, 238, 0.72) !important;
    text-align: center !important;
}

.form {
    box-sizing: border-box !important;
    padding: 18px !important;
    border-radius: 18px !important;
}

.form label,
.form p,
.form span,
.form div,
.form h1,
.form h2,
.form h3,
.form h4 {
    color: rgba(244, 242, 238, 0.86) !important;
}

.form label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #f3ddd1 !important;
    font-weight: 850 !important;
}

.text-input,
input.text-input,
textarea.text-input,
select.text-input,
.form input,
.form textarea,
.form select,
.promo-wrapper .text-input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 16px !important;

    color: #f4f2ee !important;
    -webkit-text-fill-color: #f4f2ee !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.018)),
        rgba(5, 6, 8, 0.84) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 10px 24px rgba(0, 0, 0, 0.24) !important;

    font-family: 'Body Grotesque Fit', system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.text-input:focus,
input.text-input:focus,
.form input:focus,
.form textarea:focus,
.form select:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(232, 91, 42, 0.58) !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.12), rgba(255, 255, 255, 0.020)),
        rgba(5, 6, 8, 0.88) !important;
    box-shadow:
        0 0 0 4px rgba(232, 91, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.065) !important;
    outline: 0 !important;
}

.text-input::placeholder,
.form input::placeholder,
.form textarea::placeholder {
    color: rgba(244, 242, 238, 0.42) !important;
    -webkit-text-fill-color: rgba(244, 242, 238, 0.42) !important;
    opacity: 1 !important;
}

.text-input.disabled,
.text-input:disabled,
.form input:disabled {
    color: rgba(244, 242, 238, 0.50) !important;
    -webkit-text-fill-color: rgba(244, 242, 238, 0.50) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    cursor: not-allowed !important;
}

input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 10px 0 0 !important;
    accent-color: var(--dusk-accent) !important;
    filter: brightness(0.9) contrast(1.2) !important;
}

.form button,
.form .app-button,
.promo-wrapper .promo-button {
    min-height: 44px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(232, 91, 42, 0.50), rgba(232, 91, 42, 0.24)),
        rgba(12, 13, 15, 0.94) !important;
    border: 1px solid rgba(232, 91, 42, 0.50) !important;
    border-radius: 999px !important;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.34),
        0 0 22px rgba(232, 91, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
    font-weight: 900 !important;
}

.table + div .app-button,
.table + div button,
.table ~ div .app-button,
.table ~ div button {
    color: rgba(244, 242, 238, 0.88) !important;
    -webkit-text-fill-color: rgba(244, 242, 238, 0.88) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.022)),
        rgba(10, 11, 13, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

@media (max-width: 760px) {
    .table {
        display: block !important;
        overflow-x: auto !important;
    }

    .table th,
    .table td {
        white-space: nowrap !important;
    }
}

/* =========================================================
   DUSK PRODUCTS DISCLAIMER
   Предупреждение между поиском и карточками товаров
   ========================================================= */

.product-cards::before {
    content: "Уважаемые игроки, напоминаем вам о том, что все предметы выдаются только на 3PP, на 1PP приобретение услуг только через Boosty, купленные для 3PP предметы на 1PP выданы не будут";

    grid-column: 1 / -1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 2px 0 8px !important;
    padding: 15px 18px !important;

    display: block !important;

    color: #f4f2ee !important;
    background:
        linear-gradient(135deg, rgba(232, 91, 42, 0.18), rgba(255, 255, 255, 0.045)),
        rgba(8, 9, 11, 0.76) !important;
    border: 1px solid rgba(232, 91, 42, 0.34) !important;
    border-radius: var(--dusk-radius-lg) !important;
    box-shadow:
        var(--dusk-shadow-sm),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: var(--dusk-blur) !important;
    -webkit-backdrop-filter: var(--dusk-blur) !important;

    font-family: 'Body Grotesque Fit', system-ui, sans-serif !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
}

@media (max-width: 560px) {
    .product-cards::before {
        padding: 13px 14px !important;
        font-size: 13px !important;
        text-align: left !important;
    }
}