/* Синяя тема по умолчанию (standart) */
        [data-theme="standart"] {
            --border-color: #ca0248;
            --box-shadow: 0 4px 20px rgba(25, 118, 210, 0.5);
            --color-head: #921fbd;
        }

        /* Пользовательская тема */
        [data-theme="custom"] {
            --border-color: var(--border-color, #1976d2);
            --box-shadow: var(--box-shadow, 0 4px 20px rgba(25, 118, 210, 0.5));
            --color-head: var(--color-head, #1976d2);
        }

        /* Стили для модального окна */
        .modal-content {
       
            border-radius: 20px;
            background: linear-gradient(145deg, rgba(42, 42, 60, 0.95), rgba(31, 31, 45, 0.95));
            backdrop-filter: blur(10px);
            overflow: hidden;
            animation: scaleIn 0.4s ease;
        }

        .btn-close {
            filter: invert(1);
            opacity: 0.8;
            transition: opacity 0.3s, transform 0.3s;
        }

        .btn-close:hover {
            opacity: 1;
            transform: rotate(180deg) scale(1.2);
        }

        .theme-text-side {
            padding: 30px;
        }

        /* Стили для селектора тем */
        .theme-selector {
            display: grid;
            grid-template-columns: 1fr;
            gap: 25px;
            padding: 15px;
        }

        .theme-notification {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(145deg, rgba(0, 0, 0, 0.9), rgba(20, 20, 40, 0.9));
            color: #ffffff;
            padding: 15px 30px;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            animation: pop 0.4s ease;
        }
.video-custom2 {
    width: 20%;
    aspect-ratio: 1 / 1; /* место под квадратное видео сразу: оно грузится позже (js/addons/lazy-video.js), блок не прыгает */
    object-fit: cover;
    border-radius: 1rem;
    z-index: 131;
    opacity: 0.9; /* Исправлено: opacity не может быть больше 1, установлено значение 0.9 */
    display: block; /* Делает видео блочным элементом */
    margin: auto; /* Центрирует видео по горизонтали */
}
        .theme-notification.show {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .theme-notification i {
            font-size: 1.3rem;
            color: var(--color-head);
        }

        /* Стили для цветового пикера */
        .color-picker-container {
            /* grid-column: 1 / -1; */
            /* background: linear-gradient(145deg, rgba(50, 50, 70, 0.95), rgba(40, 40, 60, 0.95)); */
            /* padding: 30px; */
            /* border-radius: 16px; */
            /* box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); */
            /* animation: slideIn 0.6s ease; */
        }


 @media screen and (min-width: 1000px) {
      .area{
        width: 100%;
        position: fixed;
        z-index: -1;
      }
  }
        /* Основные стили для navbar */
        .navbar {
    display: flex;
    align-items: center;
    z-index: 104;
    height: 62px;
    position: sticky;
    margin-top: -15px;
    top: 0px;
    white-space: nowrap;
    margin-bottom: 30px;
    justify-content: space-between;
    flex-direction: row;
    padding: 0 10px;
    background-color: rgba(10, 10, 26, 0.95);
    border-color: #050505;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    background-size: cover;
    }

        .nav_devider {
            height: 20px;
            width: 1px;
            background: var(--bottom-line-table);
            opacity: 0.5;
        }

        .navbar_menu_left {
            display: flex;
            align-items: center;
        }

        .header_burger {
            display: none;
            cursor: pointer;
            margin-left: 20px;
        }

        .header_burger span {
            display: block;
            width: 25px;
            height: 3px;
            background: #fff;
            margin: 5px 0;
            transition: all 0.3s;
        }

        .header_burger.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .header_burger.active span:nth-child(2) {
            opacity: 0;
        }

        .header_burger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(7px, -7px);
        }

.nav_header_menu {
    display: none;
    position: fixed;
    top: 61px;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: rgba(10, 10, 26, 0.95);
    padding: 20px;
    z-index: 999;
}
picture {
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}

.text_recommend {
  display: flex;
  justify-content: center;
  font-size: 22px;
  margin: 10px 0;
  text-transform: uppercase;
  font-family: "Unbounded";
  font-weight: 600;
  user-select: none;
}

.requests_rec_block {
  max-height: 451px;
  padding: 0 7px 0 0;
  overflow: hidden;
  overflow-y: scroll;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: pre-line;
}

.requests_rec_block > div {
  display: inline;
  padding: 15px;
  font-size: 12px;
  border-radius: 12px;
}

.requests_rec_block > div:nth-child(odd) {
 background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 40%, transparent), transparent);
}

.requests_rec_block > div:nth-child(even) {
background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 40%, transparent), transparent);
  border: 1px solid  rgb(51 51 51 / 30%);
}

@media (max-width: 767px) {
  .requesrt_left_infochoose {
    display: flex;
    gap: 10px;
    background-color:  rgb(51 51 51 / 30%);
    padding: 10px 0;
    border-radius: 6px;
    align-items: center;
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .requesrt_left_infochoose {
    display: flex;
    background-color:  rgb(51 51 51 / 30%);
    padding: 20px;
    border-radius: 16px;
    align-items: flex-start;
    height: 100%;
    flex-direction: column;
    gap: 10px;
  }
}

.requesrt_left_infochoose span {
  display: flex;
  font-size: 14px;
  font-weight: 400;
  align-items: center;
  gap: 10px;
}

.requesrt_left_infochoose svg {
  width: 14px;
  height: auto;
}

.request_choose_buttons {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}


.nav_header_menu.active {
    display: block;
}
.statistics_container {
  display: flex;
 background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 5%, transparent), transparent);
  border-radius: 16px;
  padding: 15px 20px;
  flex-direction: column;
  color: #bababa;
  position: relative;
  overflow: hidden;
  justify-content: center;
  border: 1px solid rgb(51 51 51 / 30%);
}

.statistics_number {
  font-family: "Unbounded";
  font-size: 19px;
  font-weight: 600;
  color: var(--span);
}

.statistics_icon {
  position: absolute;
  right: 16px;
  transition: all 0.2s ease;
}

.statistics_icon svg {
  width: 40px;
  height: auto;
  fill: var(--border-color);
  opacity: 1;
  transition: all 0.2s ease;
}

.statistics_name {
  color: var(--border-color);
  font-size: 15px;
  opacity: 0.7;
  font-weight: 700;
}

.statistic__premium .statistics_name {
  color: #f6b949;
}

.statistic__premium .statistics_number {
  color: #f6b949;
}

.statistic__premium .statistics_icon svg {
      fill:#f6b949;
}

.statistic__premium {
  outline: 2px solid #f6b949;
  transition: all 0.2s ease;
}

.statistic__premium:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to top left, #f6b949;, transparent);
  opacity: 0.1;
  pointer-events: none;
  transition: all .25s ease;
}

.statistic__premium:hover:before {
  opacity: 1;
}

.pulse_prem {
  animation: pulse-prem 2s infinite;
}

@keyframes pulse-prem {
  0% {
    box-shadow: 0 0 0 0px #f6b949;
  }
  100% {
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
  }
}

.prem_icon {
  position: absolute;
  right: 48px;
  transition: all 0.2s ease;
}

.prem_icon svg {
  width: 20px;
  height: auto;
  fill:  #f6b949;
  opacity: 0;
  transition: all 0.2s ease;
}

.statistic__premium:hover .prem_icon {
  right: 16px;
}

.statistic__premium:hover .prem_icon svg{
  opacity: 1;
}

.statistic__premium:hover .statistics_icon {
  right: 0;
}

.statistic__premium:hover .statistics_icon svg{
  opacity: 0;
}
        .menu_grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .menu_grid li {
            text-align: center;
            padding: 10px;
            background: #1b1329;
            border-radius: 8px;
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
        }

        .menu_grid li a {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
            position: relative;
        }

        .menu_grid li a i {
            font-size: 24px;
            color: var(--border-color);
            margin-bottom: 5px;
            text-shadow: 0 0 5px var(--border-color);
            transition: transform 0.3s, color 0.3s;
        }

        /* Анимация полоски для мобильного меню */
        .menu_grid li a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: #00ffcc;
            transition: width 0.3s ease-in-out;
        }

        .menu_grid li a:hover::after {
            width: 100%;
        }

        /* Анимация и выделение для иконки магазина */
        .menu_grid li a .store-icon {
            animation: pulseStore 1.5s infinite;
            color: #ff9900; /* Выделенный цвет для магазина */
        }

        @keyframes pulseStore {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .menu_grid li a span {
            font-weight: bold;
        }

        .menu_grid li:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px var(--border-color);
        }

        .drpdwn_menu {
            display: flex;
            align-items: center;
            margin-left: 20px;
        }

        .dropdown {
            position: relative;
            margin: 0 10px;
        }

.dropbtn {
    display: flex;
    background: transparent;
    padding: 9px 21px;
    border-radius: 12px;
    gap: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgb(179 121 255 / 5%);
    align-items: center;
    flex-direction: row;
  }
        .dropbtn i {
            font-size: 24px;
            color: var(--border-color);
            margin-bottom: 5px;

            text-shadow: 0 0 5px var(--border-color);
            transition: transform 0.3s, color 0.3s;
        }

        /* Анимация полоски для десктопного меню */
        .dropbtn::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 3px;
            background: #00ffcc;
            transition: width 0.3s ease-in-out;
        }

        .dropbtn:hover::after {
            width: 100%;

        }

        /* Анимация и выделение для иконки магазина в десктопном меню */
        .dropbtn .store-icon {
            animation: pulseStore 1.5s infinite;
            color: #ff9900; /* Выделенный цвет для магазина */
        }

        .dropdown_block {
    display: none; 
    position: absolute;
    border-radius: 12px;
    background: rgb(13 11 16 / 96%);
    /* min-width: 221px; */
    z-index: 1;
        border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 0px;
    }

        .dropdown:hover .dropdown_block {
            display: block;
        }

        .dropdown_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            color: #fff;
            text-decoration: none;
            transition: background 0.3s;
        }
/* Оптимизация производительности */
.area,
body::before,
body::after {
    will-change: transform;
    backface-visibility: hidden;
}

/* Анимация для текста логотипа */
.nav_sitename {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    position: relative;
    /* animation: textShimmer 6s linear infinite; */
    background: linear-gradient(
        90deg,
        var(--text-glow1) 0%,
        var(--text-glow2) 33%,
        var(--text-glow3) 67%,
        var(--text-glow1) 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 
        2px 2px 10px rgba(var(--span-rgb), 0.3),
        -2px -2px 10px rgba(var(--span-rgb), 0.3);
}

.nav_sitename::before,
.nav_sitename::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--text-glow1) 15%,
        var(--text-glow2) 35%,
        var(--text-glow3) 65%,
        var(--text-glow1) 85%,
        transparent 100%
    );
    background-size: 300% 100%;
    animation: lineShimmer 4s linear infinite;
}

.nav_sitename::before {
    top: -4px;
    filter: blur(2px);
}

.nav_sitename::after {
    bottom: -4px;
    filter: blur(2px);
}

@keyframes textShimmer {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 300% 50%;
    }
}

@keyframes lineShimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: -200% 50%;
    }
} 
        .dropdown_item i {
            font-size: 24px;
            color: var(--border-color);
            margin-bottom: 5px;
            text-shadow: 0 0 5px var(--border-color);
        }

        .dropdown_item span {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 2px;
        }

        .dropdown_item p {
            font-size: 12px;
            color: #ccc;
            margin: 0;
            text-align: center;
        }

        .dropdown_item:hover {
 text-shadow: 0 0 5px var(--border-color);
  color: var(--border-color);
        }

        .navbar_usermenu {
            display: flex;
            align-items: center;
        }

        .vaucher-icon, .pay_button, .theme_button, .user__notifications {
            margin-left: 15px;
            cursor: pointer;
            color: #fff;
            font-size: 20px;
            transition: transform 0.3s;
        }

        .pay_button, .theme_button {
            display: flex;
            gap: 10px;
            padding: 0 15px;
            height: 41px;
            border-radius: 8px;
            font-weight: 500;
            justify-content: center;
            font-size: 14px;
            line-height: normal;
            color: var(--text-custom);
            align-items: center;
            cursor: pointer;
            transition: 0.3s;
        }

        .pay_button {
            background: rgb(244 202 128);
            color: #000000;
        }

        .pay_button:hover, .theme_button:hover {
            transform: scale(1.05);
        }

        .theme_button {
            background-image: linear-gradient(181deg, color-mix(in srgb, var(--border-color) 40%, transparent), transparent);
            color: #fff;
        }

        .user__notifications .notification {
            position: relative;
        }

        #main_notifications_badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ff4d4d;
            color: #fff;
            border-radius: 50%;
            padding: 2px 6px;
            font-size: 12px;
            animation: pulse 1.5s infinite;
        }

        .user__avatar {
            margin-left: 15px;
            cursor: pointer;
            position: relative;
        }

        .user__avatar img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid var(--border-color);
            transition: transform 0.3s;
        }

        .user__avatar:hover img {
            transform: scale(1.1);
        }

        .user__menu {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
          background-color: rgba(10, 10, 26, 0.95);
            width: 250px;
            box-shadow: 0 8px 20px rgba(0, 0 0, 0.4);
            z-index: 1000;
            border-radius: 10px;
            overflow: hidden;
            animation: slideIn 0.3s ease-out;
        }

        .user__menu.active {
            display: block;
        }

        .user_profile_wrapper {
            padding: 15px;
            background: #2a2a2a;
            border-bottom: 1px solid #333;
            display: flex;
            align-items: center;
        }

        .user_avatar_img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid var(--border-color);
            margin-right: 15px;
            transition: transform 0.3s;
        }

        .user_info {
            flex-grow: 1;
        }

        .user_login {
            color: #fff;
            font-size: 18px;
            margin: 0;
            font-weight: bold;
        }

        .user_group {
            color: #ccc;
            font-size: 12px;
            margin: 2px 0 0;
        }

        .notification_point {
            position: absolute;
            top: 5px;
            right: 5px;
        }

        .point {
            font-size: 10px;
            color: #ff4d4d;
            animation: pulse 1.5s infinite;
        }

        .user_menu_list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .user_menu_list li {
            padding: 10px 15px;
            transition: background 0.3s;
        }

        .user_menu_list li a {
            display: flex;
            align-items: center;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }

        .user_menu_list li a i {
            margin-right: 10px;
            font-size: 18px;
            color: var(--border-color);
            text-shadow: 0 0 5px var(--border-color);
        }

        .user_menu_list li a:hover {
            color: var(--border-color);
        }

        .user_menu_list li:hover {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
        }

        /* Медиа-запросы для мобильных устройств */
        @media (max-width: 1396px) {
            .drpdwn_menu {
                display: none;
            }
            .header_burger {
                display: block;
            }
    .header-logo {
        display: none!important;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        /* height: 111px; */
        opacity: 1;
        transition: all .3s;
    }
            .navbar_usermenu {
                margin-left: auto;
            }
            .pay_button, .theme_button {
                padding: 5px 8px;
                font-size: 12px;
            }
            .user__menu {
                width: 200px;
            }
            .main2 {
                font-family: "neontubes";
                display: none;
                align-content: center;
                align-items: center;
                justify-content: flex-start;
                margin-right: 10px;
                height: 36px;
                font-size: 30px;
                font-weight: 700;
                text-transform: uppercase;
                user-select: none;
                -webkit-user-select: none;
            }
        }

        /* Анимации */
        @keyframes slideIn {
            from { transform: translateY(-10px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        .color-picker-container h5 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #e0e0e0;
            margin-bottom: 25px;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .color-picker-grid {
            /* display: grid; */
            grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
            gap: 17px;
        }
        .modal-instruction {
            display: flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 1.4rem;
            margin-bottom: 10px;
            font-weight: 500;
            color: #e0e0e0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            animation: fadeIn 0.5s ease;
        }

        .modal-instruction i {
            font-size: 1.2rem;
            color: var(--color-head);
        }
        .color-picker-item {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 10px;
            padding: 15px;
            background: linear-gradient(145deg, #3a3a4a, #2f2f3f);
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .color-picker-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        .color-picker-item i {
            font-size: 1.8rem;
            color: var(--color-head);
            background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .color-picker-item i:hover {
            transform: scale(1.2);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        }

        .color-picker-item label {
            font-size: 1rem;
            font-weight: 600;
            color: #e0e0e0;
            flex: 1;
        }

        .color-picker-item .color-wrapper {
            position: relative;
            width: 100px;
            height: 46px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .color-picker-item .color-wrapper:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        }

        .color-picker-item input[type="color"] {
            width: 100%;
            height: 100%;
            border: none;
            cursor: pointer;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }

        .color-picker-item .color-preview {
            width: 90%;
            height: 98%;
            border-radius: 12px;
            background: #1976d2;
            /* transition: background 0.3s; */
            animation: pulseColor 1.5s infinite;
        }

        .color-picker-item .hex-code {
            font-size: 0.9rem;
            color: #e0e0e0;
            background: rgba(0, 0, 0, 0.5);
            padding: 4px 8px;
            border-radius: 6px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .color-picker-item .color-wrapper:hover .hex-code {
            opacity: 1;
        }

        .color-picker-container .button-group {
            grid-column: 1 / -1;
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 25px;
        }

        .color-picker-container button {
                        background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
                        color: #ffffff;
                        border: none;
                        width:100%;
                        margin-top: 10px;
                        padding: 10px;
                        margin-bottom: 5px;
                        border-radius: 12px;
                        font-size: 1.2rem;
                        font-weight: 700;
                        cursor: pointer;
                        transition: transform 1.3s, box-shadow 0.3s;
                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        }

        .color-picker-container button:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
        }

        .color-picker-container button i {
            margin-right: 10px;
            font-size: 1.4rem;
        }

        .color-picker-container .reset-button {
            background: linear-gradient(90deg, #ff4d4d, #e63939);
            color: #ffffff;
        }

        .color-picker-container .reset-button:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 20px rgba(255, 77, 77, 0.5);
        }

        /* Анимации */
        @keyframes scaleIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes pop {
            from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
            to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.03); }
            100% { transform: scale(1); }
        }

        @keyframes pulseColor {
            0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
        }

.server-links {
    text-align: center; /* Центрируем содержимое ячейки */
}

.link-wrapper {
    display: inline-block; /* Делаем ссылки блочными для центрирования */
    margin: 0 4px; /* Небольшой отступ между ссылками */
}

.link-icon {
    font-size: 16px; /* Размер иконки */
    color: #333; /* Единый цвет для всех иконок */
    transition: color 0.3s; /* Плавное изменение цвета при наведении */
}

.link-icon:hover {
    color: #007bff; /* Цвет при наведении */
}
.theme-wrapper {
    background: var(--background);
    border: none;
    box-shadow: var(--box-shadow);
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(10px);
}
 .blocked_block {
    background-color: rgb(22 26 43 / 52%);
    border-color: #050505;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    max-width: 1200px;
    margin: 2rem auto;
  }
  .block_solution {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    position: relative;
    z-index: 10;
  }
.video-custom {
    width: 20%;
    aspect-ratio: 1 / 1; /* место под квадратное видео сразу: оно грузится позже (js/addons/lazy-video.js), блок не прыгает */
    object-fit: cover;
    border-radius: 1rem;
    z-index: 131;
    opacity: 5.9;
}


.usersframechat{
    position: absolute;
    left: -3px !important;
    width: 57px !important;
    height: 59px !important;
    margin-top: -7px !important;
    border-radius: 0px !important;
}
  .content_wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .block_stats_bans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
  }

.main2 {
font-family: "neontubes";
display: flex;
align-content: center;
align-items: center;
justify-content: flex-start;
margin-right: 10px;
height: 36px;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
user-select: none;
-webkit-user-select: none;
}
.main2 span {display: block;position: relative;-webkit-transform: translateZ(0) translate3D(0, 0, 0);transform: translateZ(0) translate3D(0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: opacity;}
.main2 .webdev {
    color: #ffd9d9;
    text-shadow: 0 0 0 transparent, 0 0 10px var(--border-color), 0 0 20px rgba(255, 0, 0, 0.3), 0 0 30px var(--border-color), 0 0 40px var(--border-color), 0 0 50px var(--border-color);
    animation: blink 4s infinite alternate;
    transition: text-shadow 0.3s ease-in-out;
}

.main2 .webdev:hover {
  text-shadow: 0 0 0 transparent, 0 0 10px var(--border-color), 0 0 20px rgba(255, 0, 0, 0.5), 0 0 30px var(--border-color), 0 0 40px var(--border-color) 0 0 50px var(--border-color);
}

@-webkit-keyframes blink {
    0%, 30% {
        text-shadow: 0 0 0 transparent, 0 0 20px var(--border-color), 0 0 40px var(--border-color);
    }
    100% {
        text-shadow: 0 0 0 transparent, 0 0 10px #ff0000, 0 0 20px rgba(255, 0, 0, 0.5), 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000;
    }
}

@keyframes blink {
    0%, 30% {
        text-shadow: 0 0 0 transparent, 0 0 20px var(--border-color), 0 0 40px var(--border-color);
    }
    100% {
        text-shadow: 0 0 0 transparent, 0 0 10px var(--border-color), 0 0 20px rgba(255, 0, 0, 0.5), 0 0 30px var(--border-color), 0 0 40px var(--border-color), 0 0 50px var(--border-color);
    }
}
.main2 .socod {
font-size: 11vw;
color: #d4eaff;
text-shadow: 0 0 0 transparent, 0 0 10px #2695ff, 0 0 20px rgba(38, 149, 255, 0.5), 0 0 40px #2695ff, 0 0 100px #2695ff, 0 0 200px #2695ff, 0 0 300px #2695ff, 0 0 500px #2695ff;
-webkit-animation: buzz 0.01s infinite alternate;
        animation: buzz 0.01s infinite alternate;
}

@-webkit-keyframes buzz {
    70% {
      opacity: 0.80;
    }
}

@keyframes buzz {
    70% {
      opacity: 0.80;
    }
}
@-webkit-keyframes blink {
    40% {
      opacity: 1;
    }
    42% {
      opacity: 0.8;
    }
    43% {
      opacity: 1;
    }
    45% {
      opacity: 0.2;
    }
    46% {
      opacity: 1;
    }
}
@keyframes blink {
    40% {
      opacity: 1;
    }
    42% {
      opacity: 0.8;
    }
    43% {
      opacity: 1;
    }
    45% {
      opacity: 0.2;
    }
    46% {
      opacity: 1;
    }
}

@media screen and (min-width: 1000px) {
    .main2 {
      font-size: 16px;
    }

    .main2 .socod {
      font-size: 103px;
    }
}


  .stats_info_bans {
    background-color: #252b309e;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .stats_info_bans:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  .text_bans {
    font-size: 2.5rem;
    font-weight: 700;
    color: #60a5fa;
    display: block;
  }
  .info_text_bans, .info_text_bans_r {
    font-size: 1rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-weight: 500;
  }
  .line_info_stats, .line_info_stats_r {
    width: 30px;
    height: 3px;
    background: #60a5fa;
    border-radius: 2px;
  }
  .line_info_stats_r {
    background: #f87171;
  }
  .stats_icon {
    font-size: 1.5rem;
    color: #60a5fa;
  }
  .stats_icon_r {
    color: #f87171;
  }
  .left_blocked {
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }
  .bans_muts {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .active_btn_bans_muts, .btn_bans_muts, .unban_btn {
    flex: 1;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    font-size: 1rem;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .active_btn_bans_muts {
    background: #60a5fa;
  }
  .btn_bans_muts {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
  }
  .btn_bans_muts:hover {
    background: #60a5fa;
    color: white;
  }
  .unban_btn {
    background: #34d399;
  }
  .unban_btn:hover {
    background: #059669;
  }
  .blocked_text {
    font-size: 1.25rem;
    color: #e2e8f0;
    margin-bottom: 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .btns_blocked {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .ban_btn_blocked, .report_btn_blocked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    justify-content: center;
    color: white;
    text-decoration: none;
  }
  .ban_btn_blocked {
    background: #2563eb;
  }
  .ban_btn_blocked:hover {
    background: #1e40af;
  }
  .report_btn_blocked {
    background: #f87171;
  }
  .report_btn_blocked:hover {
    background: #dc2626;
  }
.text_bans3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00ff1f;
    display: block;
}
.text_bans2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ff0000;
    display: block;
}
  .bx {
    font-size: 1.2rem;
  }
  .server_list {
    max-height: 150px;
    overflow-y: auto;
    padding: 0.5rem;
    margin-bottom: 1.5rem;
    scrollbar-width: thin;
    scrollbar-color: #60a5fa rgba(255, 255, 255, 0.1);
  }
  .server_list::-webkit-scrollbar {
    width: 8px;
  }
  .server_list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }
  .server_list::-webkit-scrollbar-thumb {
    background: #60a5fa;
    border-radius: 4px;
  }
  .server_list::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
  }
  .server_item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #e2e8f0!important;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .server_item:hover {
    background: #60a5fa;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  .server_item.active {
    background: #60a5fa;
    color: white;
  }
  .server_icon {
    font-size: 1.2rem;
    color: #94a3b8;
  }
  .server_item:hover .server_icon,
  .server_item.active .server_icon {
    color: white;
  }
  @media (max-width: 1024px) {
    .block_solution {
      flex-direction: column;
    }
    .video-custom {
      display: none;
    }
    .content_wrapper {
      width: 100%;
    }
  }
  @media (max-width: 640px) {
    .block_stats_bans {
      grid-template-columns: 1fr;
    }
    .bans_muts {
      flex-direction: column;
      gap: 0.5rem;
    }
  }
.theme-text-side {
    padding: 2rem;
    background: transparent;
}

.modal-title {
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: 0.5px;
}

.wapper .header-top {
    background: rgb(11 9 19 / 95%);
    border-bottom: 1px solid rgb(34, 33, 39);
    position: relative;
    z-index: 1;
}
/* Градиентная кнопка */
.btn-gradient {
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    color: var(--background);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    transition: transform 0.2s ease;
}

.btn-gradient:hover {
    transform: scale(1.02);
}

@media (max-width: 991.99px) {
    .pagination > li {
        display: inline !important;
    }
.site_logo_neo{
        display: none;
    }
    .footer1_userinfo a {
        display: none;
    }
    .bottom_stats {
        display: none;
    }

    .header-logo {
        display: none
    ;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 111px;
        opacity: 1;
        transition: all .3s;
    }
    .pagination > li.pagination-excess {
        display: none !important;
    }
  
    .site-logo {
        display: none !important;
    }
    .banner-container {

    }
    .wapper .logo {
        display: none;
    }

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

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 6px;
    border: 2px solid var(--border-color);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #333, #222);
}
.order-killer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
    gap: 10px;
    background-color: var(--card-color);
    cursor: pointer;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--border-card-color);
    background-image: none;
    background-size: cover;
    transition: all .3s;
}
.email-section {
    display: flex;
    align-items: center;
}

@media (max-width: 991px) {
    .footer-block-email {
        justify-content: center !important;
        margin-top: 15px;
    }
}

.stats_mini_block {
    /* border: 1px solid rgb(149 39 176 / 75%); */
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 11%, #9c27b08c);
    display: flex;
    align-items: center;
    padding: 9px 22px;
    gap: 12px;
    border-radius: 25px;
    /* background-size: cover; */
}

.stats_icon_img img {
    width: 38px;
    height: 38px;
    background: rgb(33 33 33 / 3%);
    border-radius: 20%;
    object-fit: cover;
    flex-shrink: 0;
}

.right_stats_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.span_number {
    font-weight: bold;
    font-size: 16px;
}
.card-lastoperations {
  padding: 15px;
  border-radius: 20px;
  background: var(--card-color);
  border: 1px solid var(--border-card-color);
}

.name_stats {
    font-size: 14px;
    color: #ccc;
}
#storedesign .card-lastoperations {
  padding: 45px
}
#site_stats .stat i {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
   background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 40%, transparent), transparent);
    font-size: 2.5rem;
    float: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#site_stats .stat i:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#site_stats .stat b {
    color: #e0e7ff;
    font-size: 26px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

#site_stats .stat .info {
    padding-left: 24px;
    font-size: 14px;
    display: grid;
    line-height: 30px;
    text-transform: uppercase;
    color: #a3bffa;
    letter-spacing: 0.5px;
}

.balance-top-menu-block{
    float: right;
    display: flex;
    padding: 22px 0;
    height: 100%;
    margin-right: 10px;
    margin-left: -16px;
}
.balance-top-menu{
    display: flex;
    color: #fdfdfd;
    position: relative;
    border-left: 5px solid #4d86d1;
    background: #3c3b44;
    border-radius: 4px;
}
.plus-ob{
    display: none;
}
.navbar-wrap{
    display: flex;
    justify-content: end;
}
#site_stats hr {
    border-top: 1px solid rgba(54, 53, 60, 0.5);
    margin: 0 -15px;
    background: linear-gradient(to right, transparent, rgba(54, 53, 60, 0.8), transparent);
}
.bottom_stats {
    padding: 13px;
    border-radius: 20px;
    /* border: solid 1px #3d3d4a; */
    /* background: linear-gradient(1deg, #37313142 30%, #0000002b 100%); */
    width: 100%;
    margin-top: 20px;
}

.stats_vnutr {
    display: flex;
    position: relative;
    gap: 10px;
}
.order-killer-item:hover {
    background-color: var(--block-na-card-all);
    transition: all .3s;
}
.footer-block-stats .fotorsoc {
    margin: 0 15px;
    font-size: 30px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-block-stats .fotorsoc:hover {
    color: #ff4d4d;
    transform: scale(1.2);
}

.footer-block-stats .fotorsoc i {
    padding: 8px;
    border-radius: 21%;
    background-color: #ffe6e62b;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-block-stats .fotorsoc:hover i {
    background-color: #ff4d4d;
    color: #fff;
}

.order-killer-left {
    width: 33.3%
}

.order-killer-customer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px
}

.order-killer-customer-avatar a {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
}
.profile-headwb {
    display: flex
;
}
.order-killer-customer-avatar a img {
    height: 45px;
    width: 45px;
    border-radius: 10px
}

.avtar-headwb{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 5px;
    box-shadow: 0px 0px 7px #4d96d1;
    display: flex;
}
.order-killer-customer-login {
    display: flex;
    flex-direction: column
}

.order-killer-customer-login .login {
    color: #fff;
    font-weight: 600;
    font-size: 18px
}

.order-killer-customer-login .title {
    color: #afafaf;
    font-size: 13px
}

.order-killer-customer-weapon img {
    width: 80px
}

.order-killer-center {
    width: 70.3%
}

.order-killer-right {
    width: 33.3%
}

.order-killer-info-header {
    font-size: 14px;
    color: #a3a3a3;
    margin-bottom: 10px
}

.order-killer-info-content {
    display: flex;
    color: #fff;
    gap: 8px
}

.order-killer-info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--block-na-card-all);
    padding: 6px 10px;
    gap: 5px;
    font-size: 13px;
    border-radius: 10px;
    border: 1px dashed #494949
}

.order-killer-info-item img {
    display: none;
}

.order-killer-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.order-killer-victim {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px
}
.ban-class-new {
    width: 155px;
    height: 90px;
    background: var(--GLOBAL, radial-gradient(100% 100% at 50% 0, #474753 0, #373743 100%));
    text-shadow: #000000d4 1px 0 7px;
    border-radius: 20px;
    display: flex;
    color: #ffffff;
    box-shadow: -5px 0px 0px 8px rgb(84 84 97 / 17%);
    margin-right: 17px;
    font-size: 19px;
    font-weight: 600;
    position: absolute;
    bottom: -53px;
    right: -45px;
    align-items: center;
    transform: skewX(348deg);
    justify-content: center;
}

.ban-class-new-success {
    box-shadow: -5px 0px 0px 8px rgb(41 122 47 / 25%);
    background: var(--GLOBAL, radial-gradient(100% 100% at 50% 0, #3ba044 0, #1d6222 100%));
}

.ban-class-new-danger {
    box-shadow: -5px 0px 0px 8px rgb(185 43 44 / 17%);
    background: var(--GLOBAL, radial-gradient(100% 100% at 50% 0, #b42525 0, #881c1f 100%));
}

.order-killer-victim-avatar a img {
    height: 50px;
    width: 50px;
    border-radius: 10px
}

.order-killer-victim-login {
    display: flex;
    flex-direction: column
}

.order-killer-victim-login .login {
    color: #fff;
    font-weight: 600;
    font-size: 18px
}

.order-killer-victim-login .title {
    color: #afafaf;
    font-size: 13px
}

.empty-element.selected {
    background-color: #28a745;
    color: white;
}
.send_comment1:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
.input-field {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.referal_procent {
    background: #48c3882b !important;
    color: #67ce9d !important;
    border: dashed 1px #48c388a6;
}

.bottom-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.league-marker {
    position: absolute;
    bottom: 189px;
    right: 83px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #94949400;
    /* transform: translateX(-50%); */
    transition: transform 0.5s ease, box-shadow 0.3s ease;
}

.league-marker:hover {
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 25px rgba(255, 215, 0, 0.4); /* Усиленное свечение при наведении */
}

.league-marker img {
    width: 50px;
    height: 50px;
    border-radius: 0%;
    object-fit: cover;
}

/* Стили для tooltip */
.league-marker .tooltip {
    visibility: hidden;
    position: absolute;
    background: linear-gradient(135deg, #333, #1a1a1a);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    top: 120%; /* Позиция внизу */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.league-marker .tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%; /* Треугольник сверху */
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #1a1a1a; /* Цвет треугольника */
}

.league-marker:hover .tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(5px); /* Лёгкое смещение вниз при появлении */
}
.site_logo_neo {
    display: inline-block;
}

.send_comment {
    padding: 10px 20px;
    margin: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.send_comment:hover {
    background-color: #0056b3;
}
/* From Uiverse.io by Artahs */
ul {
    list-style: none;
}
.banmutlist_info_names2{
    background: #18161614 !important;
    border: 1px solid #1d2436 !important;
    display: flex;
    padding: 4px;
    gap: 10px;
    border-radius: 7px;
    font-weight: 700;
    margin-bottom: 8px;
    align-items: center;
}
.banmutlist_info_names{
	background:  rgba(255, 255, 255, .02);!important;
  border: 1px solid #2b2c2d !important;
    display: flex;
    padding: 10px;
    gap: 10px;
    border-radius: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    align-items: center;
}
.banmutlist_info_names i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 40%, transparent), transparent);
    border-radius: 10px;
    color: #dbdbdb;
}
.header-logo {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 58px;
    opacity: 1;
    transition: all .3s;
    transform: translate(255px, 0px);
    font-size: 11px;
}

.header-logo:hover {
    opacity: .5;
    transition: all .3s
}

.header-logo img {
    width: auto;
    height: 35px;
    display: block
}
.banmutlist_flex_info_names {
    display: flex;
    flex-direction: column;
    line-height: 16px
}

.banmutlist_flex_info_names i {
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 12px;
    border-radius: 0;
    color: #90b9b3;
    background: #66878200
}

.banmutlist_flex_info_names img {
    display: inline-block;
    width: 16px;
    height: 16px;
    font-size: 12px;
    position: revert;
    border-radius: 50px;
    margin-right: 3px;
    color: #90b9b3;
    background: #66878200
}

.banmutlist_modal_bans{
    padding: 0;
    display: flex;
    margin-left: -14px;
    margin-bottom: 0;
    background: #21253100;
    margin-right: -14px;
}

.banmutlist_btn_unban{
    margin-bottom: 20px;
    display: flex;
}

.banmutlist_button{
    border: 1px solid #00000000;
    color: #19ff6b !important;
    font-weight: 600;
    border-radius: 11px;
    font-size: 11px;
    padding: 14px 20px;
    transition: .2s all;
    cursor: pointer;
    margin-right: 5px;
    position: relative;
    background: #2d2d2d !important;
}

.banmutlist_button:hover {
    color: #fff;
    background: #0c101a00 !important;
    border: 1px solid #1d2436;
}

.banmutlist_button:hover .price_btn {
    color: #fff !important;
}

.example-2 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.example-2 .icon-content {
    margin: 0 10px;
    position: relative;
}

.logotext {
    fill: #00000000;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-dasharray: 90, 310;
    animation: logotext 8s infinite linear;
    font-family: Poppins, arial;
    font-size: 2.1em;
}

.logotext:nth-child(4n+1) {
    stroke: var(--border-color);
    text-shadow: 0 0 12px var(--border-color);
    animation-delay: -5s;
}

.logotext:nth-child(4n+2) {
    stroke: #ffffff;
    text-shadow: 0 0 12px #ffffff;
    animation-delay: -10s;
}

.logotext:nth-child(4n+3) {
    text-shadow: 0 0 12px var(--border-color);
    stroke: var(--border-color);
    animation-delay: -15s;
}

.logotext:nth-child(4n+4) {
    text-shadow: 0 0 12px #ffffff;
    stroke: #ffffff;
    animation-delay: -20s;
}

@-webkit-keyframes logotext {
    100% {
        stroke-dashoffset: -400;
    }
}

.example-2 .icon-content .tooltip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 6px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    transition: all 0.3s ease;
}
.modal .modal-content {
    border-radius: 20px;
    margin-left: auto;
    padding: 5px;
    margin-right: auto;
                 background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 5%, transparent), transparent);

}
.modal .modal-content .modal-header {
    border-bottom: none;
    padding: 5px 12px 26px 20px;
    display: flex;
}
.modal .modal-content .modal-header .close {
    font-size: 20px;
    margin: 0px;
    height: 28px;
    opacity: 1;
    border-radius: 50%;
    width: 28px;
    background: linear-gradient(228deg, #ff4b4b54 10%, #ff4b4b52 100%);
    font-weight: 500;
    transition: .2s all;
    padding: 0;
    color: #ff7e7ea1 !important;
}

.modal .modal-content .modal-header .close:hover {
    opacity: 0.7;
}
.modal .modal-content .modal-header h4 {
    font-weight: 600;
    font-size: 18px;
    color: #ffffff; }
.modal .modal-content .modal-body {
    padding: 0 20px 20px 20px;
}
.modal .modal-content .modal-body h4 {
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
}
.modal .modal-content .modal-body table td {
    vertical-align: middle; }

.modal-backdrop.show {
    opacity: .75; }

.modal-lg2 {
    width: 1200px; }

.example-2 .icon-content:hover .tooltip {
    opacity: 1;
    visibility: visible;
    top: -50px;
}
.example-2 .icon-content a {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #4d4d4d;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
    box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
}
.example-2 .icon-content a:hover {
    color: white;
}
.example-2 .icon-content a .filled {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #000;
    transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
    height: 100%;
}

.example-2 .icon-content a[data-social="discord"] .filled,
.example-2 .icon-content a[data-social="discord"] ~ .tooltip {
    background-color: #7289da;
}

.example-2 .icon-content a[data-social="steam"] .filled,
.example-2 .icon-content a[data-social="steam"] ~ .tooltip {
    background-color: #171d25;
}
.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
    background: linear-gradient(
            45deg,
            #405de6,
            #5b51db,
            #b33ab4,
            #c135b4,
            #e1306c,
            #fd1f1f
    );
}
.example-2 .icon-content a[data-social="youtube"] .filled,
.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
    background-color: #ff0000;
}

.site-logo {
    font-family: 'Dancing Script', cursive;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd, #ff9a9e);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* letter-spacing: 1px; */
    display: inline-block;
    padding: 3px 8px;
    animation: gradientFlow 3s ease infinite;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}
.payment-systems {
    display: flex;
    gap: 10px; /* Расстояние между иконками */
    align-items: center;
}

.payment-icon {
    width: 50px; /* Размер иконки */
    height: auto;
    object-fit: contain;
}
.site-logo:hover {
    transform: scale(1.1);
    text-shadow: 1px 1px 5px rgba(255, 154, 158, 0.5),
    -1px -1px 5px rgba(161, 196, 253, 0.5);
}
/* Telegram Button */
.tg {
    background: linear-gradient(135deg, #0088cc, #00aaff);
}

.tg:hover {
    background: linear-gradient(135deg, #00aaff, #0088cc);
}

/* Discord Button */
.ds {
    background: linear-gradient(135deg, #5865F2, #7289DA);
}

.ds:hover {
    background: linear-gradient(135deg, #7289DA, #5865F2);
}

/* Steam Button */
.st {
    background: linear-gradient(135deg, #171a21, #2a475e);
}

.st:hover {
    background: linear-gradient(135deg, #2a475e, #171a21);
}

/* Icon Styling */
.footer-block-stats i {
    color: #fff;
    transition: color 0.3s ease;
}

.footer-block-stats a:hover i {
    color: #f0f0f0;
}
.wapper > .footer {
    flex: 0 0 auto;
    background-color: #ffffff;
    box-shadow: inset 0 -1px 0 RGB(215, 216, 219);
    padding-top: 18px;
    padding-bottom: 15px;
    margin-top: 10px;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 10%);
}

.wapper > .footer hr {
    border-color: #f3f4f6;
}

.wapper > .footer .copyright #copyright {
    display: inline-block;
    margin-top: 10px;
}

.wapper > .footer .copyright #copyright br {
    display: none;
}

/*.wapper > .footer .copyright a {border-bottom: 1px dashed #ddd;}*/

.wapper > .footer .copyright p {
    height: 40px;
    line-height: 40px;
    padding-right: 10px;
    display: inline-block;
    margin-right: 15px;
}

@media (max-width: 991.99px) {
    .wapper > .footer .copyright p {
        height: 40px;
        line-height: 40px;
        padding-right: 10px;
        font-size: 13px;
        display: inline-block;
        margin-right: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wapper > .footer #copyright {
        width: 100%;
        display: block;
        height: 30px !important;
        line-height: 30px !important;
    }
}

@media (min-width: 992px) {
    .wapper > .footer #copyright {
        font-size: 13px;
    }

    .wapper > .footer .copyright p {
        height: 40px;
        line-height: 40px;
        margin-right: 15px;
    }
}


@media (max-width: 991.99px) {
    .wapper > .footer .banners {
        margin-top: 20px!important;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 0px;
        padding-top: 0px;
    }

    .wapper > .footer .banners img {
        float: left;
    }
}

.wapper > .footer strong {
    font-weight: 500;
    font-size: 17px;
    color: #9f9f9f;
    margin-bottom: 10px;
    display: block;
    background: #f3f4f6;
    border-radius: 5px;
    border: 4px solid #f3f4f6;
}

.wapper > .footer ul {
    /* position: relative; */
    /* display: block; */
    /* list-style: none; */
}

.wapper > .footer ul li {
    margin: 0;
}
.footer1_userinfo {
    display: flex;
    justify-content: space-around;
}

.footer1_userinfo li {
    display: inline;
    list-style-type: none;
}

.footer1_userinfo li:not(:last-child) {
    margin-right: 50px;
}
.logooo {
    display: block;
    margin: 0;
    transition: all 0.3s;
    float: left;
    height: 20px !important;
    width: 227px !important;
    background-size: 100% 100%;
    margin-top: 0px;
    margin-bottom: 13px;
}
.footer-block-stats a {
    font-size: 21px;
    transition: all 0.5s;
    height: 31px;
    width: 39px;
    border-radius: 10%;
    margin: 0 0px;
    margin-right: 4px;
    /* background: #131921; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer1_userinfo a {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--color-w-b);
    opacity: 0.3;
    transition: opacity 0.3s;
    padding: 3px;
}

@media (min-width: 1333px) {
    .footer1_userinfo a {
        padding: 15px;
    }
}

.footer1_userinfo a:hover {
    opacity: 0.9;
}
.wapper > .footer ul li a {
    font-size: 11px;
    color: #111221;
    transition: all 200ms ease 0s;
    background: #2d2d2d;
    border-radius: 5px;
    border: 2px solid #f3f4f6;
    line-height: 24px;
    display: flex;
    justify-content: center;
    margin-block: 6px;
    padding-left: 10px;
    padding-right: 10px;
}

.wapper > .footer .col-lg-5 p {
    margin-bottom: 0;
    font-size: 13px;
    max-width: 340px;
}

.wapper > .footer .col-lg-5 img {
    /*height: 25px;
    margin-bottom: 20px;*/
}
@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-radius: 6px;
}
.card-payments {
       background: rgb(11 9 19)!important;
    border-color: rgb(34, 33, 39);
    box-shadow: 0 2px 12px rgb(0 0 0);
    border-radius: 15px;
    margin-top: 30px;
}

.admin-container {
    max-width: 1401px;
    width: 100%;
    background: rgb(11 9 19 / 95%);
    border: 2px solid rgb(46 40 72);
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 2px 12px rgb(0 0 0), 0 0 30px rgba(46, 40, 72, 0.5);
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.admin-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(96, 80, 155, 0.3), transparent 70%);
    opacity: 0.4;
    z-index: -1;
    transition: opacity 0.5s ease;
}

.admin-container:hover::before {
    opacity: 0.6;
}

.section-title {
    text-align: center;
    font-size: 3.5rem;
    font-family: 'Playfair Display', serif;
    margin-bottom: 40px;
    color: #c7d2fe;
    text-transform: uppercase;
    letter-spacing: 4px;
    position: relative;
    text-shadow: 0 0 20px rgba(199, 210, 254, 0.7);
}

.section-title::after {
    content: '';
    width: 200px;
    height: 6px;
    background: linear-gradient(to right, #7c3aed, #c084fc);
    display: block;
    margin: 20px auto;
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
}

.admin-description {
    margin: 50px 0;
    padding: 30px;
    background: rgba(46, 40, 72, 0.5);
    border: 2px solid rgba(124, 58, 237, 0.4);
    border-radius: 15px;
    text-align: center;
    line-height: 1.9;
    font-size: 1.4rem;
    color: #e0e7ff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
    font-family: 'Roboto', sans-serif;
}

.admin-description::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(199, 210, 254, 0.2);
    border-radius: 20px;
    z-index: -1;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    position: relative;
    z-index: 1;
}

.privilege-card {
 background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 40%, transparent), transparent);
    border: 1px solid #2e2848;
    border-radius: 10px;
    padding: 15px 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.privilege-card:hover {
    transform: translateY(-4px);
   background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 80%, #000000), transparent);
}

.privilege-card a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.privilege-card i {
    font-size: 1.8rem;
    color: #c084fc;
    margin-right: 12px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.privilege-card:hover i {
    transform: scale(1.15);
    color: #e0e7ff;
}

.privilege-text {
    display: flex;
    flex-direction: column;
}

.privilege-text span:first-child {
    font-weight: 600;
    color: #c7d2fe;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    font-family: 'Playfair Display', serif;
}

.privilege-text span:last-child {
    font-size: 0.9rem;
    color: #e0e7ff;
    font-style: italic;
    font-family: 'Roboto', sans-serif;
}


.divider {
    width: 90%;
    height: 3px;
    background: linear-gradient(to right, transparent, #c084fc, transparent);
    margin: 60px auto;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
}

.cta-button {
    display: block;
    width: 300px;
    margin: 40px auto;
    padding: 15px;
    text-align: center;
    background: linear-gradient(90deg, #7c3aed, #c084fc);
    color: #ffffff;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(124, 58, 237, 0.5);
}

.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.8);
}

@media (max-width: 768px) {

    .admin-container {
        padding: 30px;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }

    .admin-description {
        font-size: 1.2rem;
        padding: 20px;
    }

    .cta-button {
        width: 100%;
    }
}
.delete-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}


.mood-icon {
    display: inline-block;
    margin-left: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.mood-icon:hover {
    transform: scale(1.1);
}

.mood-picker {
    background: #1c2526;
    border: 1px solid #2e3b4e;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-wrap: wrap;
    max-width: 200px;
    z-index: 1000;
}

.mood-item {
    display: flex;
    align-items: center;
    padding: 5px;
    margin: 5px;
    color: #c1d0d6;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.2s ease-in-out;
    width: calc(100% - 10px);
}

.mood-item:hover {
    background: #2e3b4e;
}

.mood-item img {
    margin-right: 8px;
}

@media (max-width: 768px) {
    .mood-picker {
        max-width: 150px;
        padding: 8px;
    }

    .mood-item {
        font-size: 14px;
        margin: 3px;
    }

    .mood-item img {
        width: 20px;
        height: 20px;
    }

    .mood-icon img {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 576px) {
    .mood-picker {
        max-width: 120px;
    }

    .mood-item {
        font-size: 12px;
    }

    .mood-item img {
        width: 18px;
        height: 18px;
    }

    .mood-icon img {
        width: 18px;
        height: 18px;
    }
}

/* Контейнер статуса */
.status-container {
    display: flex;
    align-items: center;
    padding: 8px 13px;
 background: linear-gradient(135deg, rgb(41 31 34) 0%, rgb(14 19 32 / 88%) 100%);
    border-radius: 20px;
    margin: 20px auto; /* Отступы сверху и снизу, центрирование */
    /* max-width: 400px; */
    /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.1); */
    /* border: 1px solid rgba(255, 255, 255, 0.15); */
    transition: all 0.4s ease-in-out;
    position: relative;
    overflow: hidden;
}

/* Эффект свечения при наведении */
.status-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #3a3a3a3d 0%, #2a2a2c33 100%);
}

/* Фоновый эффект псевдоэлемента для дополнительного сияния */
.status-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #00000000, rgb(255 255 255 / 11%), transparent);
    transition: 0.7s;
}

.status-container:hover::before {
    left: 100%;
}

/* Текст статуса - placeholder */
#status_text.status-placeholder {
    color: #999;
    font-style: italic;
    font-size: 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

/* Текст статуса - заполненный */
#status_text.status-filled {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(90deg, #f3e7e9 0%, #e3eeff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    animation: textGlow 2s ease-in-out infinite alternate;
}

/* Анимация свечения текста */
@keyframes textGlow {
    0% {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }
    100% {
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
    }
}

/* Иконка редактирования */
.edit-status {
    margin-left: 8px;
    cursor: pointer;
    transition: stroke 0.2s ease;
}

.edit-status:hover svg {
    stroke: #0056b3;
}

/* Форма редактирования */
.status-edit-form {
    align-items: center;
}
/* Специальный стиль для кнопки Ваучер */
.button_voucher {
    background: linear-gradient(135deg, #ffd70052 0%, #ffec805e 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border: 1px solid #ffca00 !important;
    position: relative;
    overflow: hidden;
    padding: 8px 20px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Эффект сияния */
.button_voucher::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    transform: rotate(30deg);
    pointer-events: none;
    transition: all 0.5s;
}
.topic-answers div[id^="answer"] .left-side {
    width: 100%;
    padding: 14px;
    text-align: left;
background-color: #131415;
    border-color: #050505;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    background-size: cover;
}


.forum_bottom_answer a:hover{
    cursor: pointer;
    color: #7f7f7f;
}

.topic-answers div[id^="answer"] .right-side {
    position: relative;
    padding: 15px 15px 15px;
    background-color: rgba(10, 10, 26, 0.95);
    border-color: #050505;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    background-size: cover;
    border-radius: 12px;
    width: 100%;
    border-radius: 0 0 15px 15px;
}

.topic-answers div[id^="answer"] .right-side .likes-area {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    width: auto !important;
    gap: 5px;
}

.forum_closetopic{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    gap: 10px;
}

.topic-answers div[id^="answer"] {
    background: #131821;
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 15px;
}

.topic-answers div[id^="answer"]:last-child {
    margin-bottom: 0;
}


.forum_card_header_title{
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
}
.forum_right_btns{
    display: flex;
    gap: 5px;
}
.topic-answers div[id^="answer"] .left-side img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin: 0;
}
.header_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 18px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.header_btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.header_btn i {
    font-size: 13px;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.topic-answers {
    margin: 0; }
.topic-answers div[id^="answer"] {
    background: #313852;
    -webkit-box-shadow: 0 3px 4px rgba(10, 31, 68, 0.1), 0 0 1px rgba(10, 31, 68, 0.08);
    box-shadow: 0 3px 4px rgba(10, 31, 68, 0), 0 0 1px rgba(10, 31, 68, 0);
    position: relative;
    display: block;
    overflow: hidden;
}
.topic-answers div[id^="answer"]::after {
    display: none; }
.topic-answers div[id^="answer"]:not(:first-child) {
    border-top: 1px solid #1d2848;
}
.topic-answers div[id^="answer"] .left-side {
    width: 100%;
    padding: 14px;
    text-align: left;
        background-color: rgba(10, 10, 26, 0.95);
    -webkit-box-shadow: -1px 0px 26px rgba(10, 31, 68, 0.12);
    box-shadow: -1px 0px 26px rgba(10, 31, 68, 0.12);
}
.topic-answers div[id^="answer"] .left-side img {
    width: 50px;
    height: 50px;
    border-radius: 23%; /* Полностью круглая аватарка */
    margin: 0;
    /* border: 2px solid #ffffff; */ /* Белая рамка */
    box-shadow: 0 2px 5px rgb(12 12 12); /* Мягкая тень */
    object-fit: cover; /* Для корректного отображения изображений */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавная анимация */
}

.topic-answers div[id^="answer"] .left-side img:hover {
    transform: scale(1.1); /* Увеличение при наведении */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Усиленная тень */
}
.usersframe {
    position: absolute;
    left: 7px !important;
    width: 73px !important;
    height: 40px !important;
    margin-top: -5px !important;
    border-radius: 0px !important;
}
.topic-answers div[id^="answer"] .left-side a {
    line-height: 27px;
    font-size: 16px;
    font-weight: 600;
    color: #8a94a6;
    margin-left: 10px; }
.topic-answers div[id^="answer"] .right-side {
    position: relative;
    padding: 17px 17px 35px;
    /* background: #253053; */
    width: 100%;
}
.topic-answers div[id^="answer"] .right-side .likes-area {
    width: calc(100% - 28px); }

.header_btn:hover i {
    opacity: 1;
}
.forum_card_info{
    padding: 20px;
    background: rgb(11 9 19 / 95%);
    border-color: rgb(46 40 72);
    box-shadow: 0 2px 12px rgb(0 0 0);
    border-radius: 15px;
}
.top-users-reiting {
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    margin-right: 8px;
    background: linear-gradient(135deg, #1e3a8a, #3b82f6); /* Dark blue gradient */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bans {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(to bottom, #2a475e 5%, #1f2e3c 95%);
    color: #c7d5e0;
    font-family: "Motiva Sans", Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #3a536b;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.bans:hover {
    background: linear-gradient(to bottom, #3b6b8f 5%, #2a475e 95%);
    color: #ffffff;
    border-color: #5a829f;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    transform: translateY(-1px);
}

.bans:active {
    background: linear-gradient(to bottom, #1f2e3c 5%, #2a475e 95%);
    color: #a1b1c1;
    border-color: #2a475e;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transform: translateY(1px);
}
.top-users-reiting:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.vip-container {
    max-width: 1400px;
    width: 100%;
    background: rgba(20, 15, 10, 0.95);
    border: 2px solid #d4a017;
    border-radius: 15px;
    padding: 60px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 160, 23, 0.5);
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.vip-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(212, 160, 23, 0.3), transparent 70%);
    opacity: 0.4;
    z-index: -1;
    transition: opacity 0.5s ease;
}

.vip-container:hover::before {
    opacity: 0.6;
}
.vip-description {
    margin: 50px 0;
    padding: 30px;
    background: rgba(60, 45, 20, 0.5);
    border: 2px solid rgba(212, 160, 23, 0.4);
    border-radius: 15px;
    text-align: center;
    line-height: 1.9;
    font-size: 1.4rem;
    color: #f4e4bc;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 1;
    font-family: 'Roboto', sans-serif;
}

.vip-description::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(244, 228, 188, 0.2);
    border-radius: 20px;
    z-index: -1;
}
/* Карточка привилегий в стиле Steam */
.privilege-card-steam {
    background: linear-gradient(145deg, #1b2838, #171a21); /* Тёмный фон Steam */
    border: 2px solid #66c0f4; /* Голубой акцент, характерный для Steam */
    border-radius: 12px; /* Скруглённые углы, как в интерфейсе Steam */
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7); /* Тень для глубины */
}

/* Эффект при наведении */
.privilege-card-steam:hover {
    transform: translateY(-10px); /* Лёгкий подъём карточки */
    box-shadow: 0 12px 24px rgba(102, 192, 244, 0.5); /* Голубое свечение */
    background: linear-gradient(145deg, #2a475e, #171a21); /* Более светлый градиент при наведении */
}

/* Псевдоэлемент для эффекта свечения */
.privilege-card-steam::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(102, 192, 244, 0.25), transparent 60%); /* Мягкое голубое свечение */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Свечение при наведении */
.privilege-card-steam:hover::before {
    opacity: 1;
}

/* Стили для ссылки */
.privilege-card-steam a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #c7d5e0; /* Светлый текст, как в Steam */
    font-family: 'Motiva Sans', Arial, sans-serif; /* Шрифт, близкий к Steam */
    font-size: 1.2rem;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

/* Эффект наведения на ссылку */
.privilege-card-steam:hover a {
    color: #ffffff; /* Белый текст при наведении */
}

/* Стили для иконки */
.privilege-card-steam i {
    font-size: 2.5rem;
    color: #66c0f4; /* Голубой цвет иконки */
    margin-right: 15px;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Эффект наведения на иконку */
.privilege-card-steam:hover i {
    transform: scale(1.2); /* Увеличение иконки */
    color: #c7d5e0; /* Более светлый оттенок */
}

/* Текст внутри карточки */
.privilege-card-steam .card-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10px;
}

.privilege-card-steam .card-description {
    font-size: 1rem;
    color: #8f98a0; /* Серый текст для описания */
    line-height: 1.4;
}

.top-users-reiting-meaning {
    background: #172554; /* Darker blue for contrast */
    color: #93c5fd; /* Light blue text */
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    position: relative;
    top: 7px;
    right: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.top-users-comments {
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    margin-right: 8px;
    background: linear-gradient(135deg, #1e40af, #60a5fa); /* Slightly lighter blue gradient */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.top-users-comments:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.Footer_footer__container__nZHwG {
    position: relative;
    z-index: 1;
    top: 0;
    width: 100%;
    /* background: #0c132a; */
    padding-top: 15px;
    padding-bottom: 15px
}

.Footer_right_ul__QUqvx {
    margin-top: 0
}

.Footer_right__OobuW {
    position: relative
}

.Footer_stats__oQR6u {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
    margin-right: 20px;
    margin-left: 20px
}

.Footer_stats_col__FS3BT {
    background: #11182c;
    border-radius: 20px;
    margin-inline:5px;margin-bottom: 10px;
    padding: 5px 0 10px;
    flex: 1 1
}

.Footer_stats_counter__j_2jh {
    color: #00fbf1;
    font-size: 20px;
    font-family: Inter,sans-serif;
    font-weight: 700;
    letter-spacing: -.6px
}

.Footer_stats_name__TNDJ8 {
    color: #686868;
    font-size: clamp(7px,2vw,14px);
    font-family: Inter,sans-serif;
    font-weight: 700;
    letter-spacing: -.42px
}

@media screen and (max-width: 680px) {
    .Footer_stats_col__FS3BT {
        padding:5px 30px;
        width: auto
    }
}

@media screen and (max-width: 400px) {
    .Footer_stats__oQR6u {
        display:block
    }

    .Footer_stats_col__FS3BT {
        margin-left: 40px;
        margin-right: 40px;
        padding-bottom: 10px
    }
}

.Footer_footer__Wd57u {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(270deg, #100c16 40%, #0e0b18);
    padding: 0 40px;
    width: 85%;
    margin: 0 auto;
    border-radius: 30px
}

.Footer_footer__Wd57u:after {
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    content: "";
    width: 20%;
    z-index: -1;
    background: linear-gradient(90deg,hsla(0,0%,100%,0) 11%,#e91e1e);
    border-radius: 36px;
    opacity: .5
}

.Footer_center__888V6 {
    position: relative;
    background-image: none;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 220px;
    width: 350px;
}

.Footer_icon_block__3KLO8 {
    display: flex;
    align-items: center;
    padding-left: 0;
    margin-top: 0
}

.Footer_icons__RGL_d {
    border: 1px solid #313131;
    border-radius: 8px;
    cursor: pointer;
    margin-right: 5px;
    padding: 5px;
    transition: .3s
}

.Footer_icons__RGL_d:hover {
    border: 1px solid #66fcf2
}

.Footer_left_text__28sOO {
    position: relative;
    bottom: -5px;
    color: #626262;
    text-align: right;
    font-size: clamp(7px,2vw,14px);
    font-family: Inter,sans-serif;
    font-weight: 700;
    letter-spacing: -.42px;
    margin-bottom: 5px;
    text-align: left
}

.Footer_icon__rwQnV {
    height: 32px;
    width: 32px
}

.Footer_right_link__TQxkj {
    text-align: left;
    color: #626262;
    font-family: Inter,sans-serif;
    font-weight: 700;
    letter-spacing: -.42px;
    margin-bottom: 5px;
    white-space: nowrap;
    transition: .3s
}

.Footer_right_link__TQxkj:hover {
    color: #ebe9e9
}

.Footer_load__By_7E {
    height: 66px;
    width: 1px
}

.Footer_company__sdZO_ {
    opacity: .7
}

.Footer_social__li___LMJv:not(:last-child) {
    margin-right: 14px
}

.Footer_social__li___LMJv {
    transition: .3s
}

.Footer_social__li___LMJv:hover {
    filter: brightness(1.6)
}

.Footer_links__mini__ycbG3 {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 5px;
    margin-bottom: 8px;
    margin-top: 15px
}

.Footer_footer_for_support__oRONp,.Footer_footer_wonder_link__PPA7I {
    color: #394a69;
    text-align: right;
    font-family: Inter,sans-serif;
    font-size: clamp(7px,2vw,14px);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.57px
}

.Footer_footer_wonder_link__PPA7I {
    margin-top: 20px
}

.Footer_footer_stats__sYPTY {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px
}

.Footer_footer_stats_bottom__be0QQ,.Footer_footer_stats_top__MTmxN {
    display: flex;
    align-items: center;
    gap: 40px
}

.Footer_footer_stat__BRJs7 {
    color: #00fbf1;
    font-family: Inter,sans-serif;
    font-size: clamp(11px,2vw,30px);
    font-style: normal;
    font-weight: 900;
    line-height: normal;
    margin: 0 0 1px
}

.Footer_footer_stat_name__N8HDh {
    margin: 0;
    color: #fbfbfb;
    font-family: Inter;
    font-size: clamp(8px,2vw,16px);
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.Footer_wonderlogo__LmvLa {
    /* width: 80px; */
    /* height: 86px; */
    /* background-image: url(/_next/static/media/wonder__mini__logo.21cf4ac0.svg); */
    /* background-repeat: no-repeat; */
    /* background-size: 100% 100%; */
    /* margin-right: 20px; */
}

.Footer_footer_left_text__erjVT {
    display: flex;
    align-items: end;
    margin-bottom: 20px
}

.Footer_footer_wonder_name__QM_EQ {
    color: #fff;
    font-family: Inter;
    font-size: clamp(10px,2vw,18px);
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: 10px
}

.Footer_right_link__TQxkj {
    color: #7b9ccc;
    font-family: Inter;
    font-size: clamp(7px,2vw,14px);
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.Footer_bottom_social__wRjTW {
    display: none
}

@media screen and (max-width: 1600px) {
    .Footer_footer__Wd57u {
        width:95%
    }
}

@media screen and (max-width: 1450px) {
    .Footer_center__888V6 {
        position:relative;
        transform: translateX(0)
    }
}

@media screen and (max-width: 1200px) {
    .Footer_center__888V6 {
        position:relative;
        transform: translateX(0)
    }

    .Footer_footer__Wd57u {
        padding-bottom: 0;
        padding-top: 0;
        padding-right: 0
    }

    .Footer_center__888V6 {
        bottom: 0
    }

    .Footer_footer__Wd57u:after {
        display: none
    }
}

@media screen and (max-width: 1024px) {
    .Footer_wonderlogo__LmvLa {
        width:60px;
        height: 60px;
        margin-top: 5px
    }

    .Footer_left_text__28sOO {
        margin-right: 5px
    }

    .Footer_footer_stats_bottom__be0QQ {
        gap: 15px
    }

    .Footer_footer_stats__sYPTY {
        top: 0;
    }

    .Footer_footer__Wd57u {
        align-items: normal;
        padding-top: 8px
    }

    .Footer_right__OobuW {
        display: none;
        top: auto
    }

    .Footer_bottom_social__wRjTW {
        display: flex;
        justify-content: space-between
    }

    .Footer_links__mini__ycbG3 {
        display: flex;
        align-items: end;
        flex-direction: row;
        justify-content: flex-end;
        gap: 5px;
        margin-bottom: 8px;
        margin-top: 15px
    }

    .Footer_footer__Wd57u {
        width: 99%;
        padding-left: 15px
    }

    .Footer_footer_stat__BRJs7 {
        font-size: 24px
    }

    .Footer_footer_for_support__oRONp {
        display: none
    }

    .Footer_bottom_social__wRjTW {
        margin-right: 4px;
        margin-left: 4px
    }
}

@media screen and (max-width: 720px) {
    .Footer_center__888V6 {
        display:none
    }

    .Footer_footer__Wd57u {
        width: 100%;
        padding-right: 93px;
        align-items: center;
        padding-bottom: 6px
    }

    .Footer_footer_stat__BRJs7 {
        font-size: clamp(12px,2vw,18px)
    }

    .Footer_wonderlogo__LmvLa {
        margin-top: 0;
        width: 38px;
        height: 40px;
        margin-right: 5px
    }

    .Footer_footer_left_text__erjVT {
        margin-bottom: 5px
    }
}

@media screen and (max-width: 500px) {
    .Footer_svg__mini__diMza {
        width:20px;
        height: 20px
    }

    .Footer_social__li___LMJv:not(:last-child) {
        margin-right: 4px
    }
}

.top-users-comments-meaning {
    background: #172554;
    color: #93c5fd;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    position: relative;
    top: 7px;
    right: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.top-users-likes {
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    margin-right: 8px;
    background: linear-gradient(135deg, #1e3a8a, #93c5fd); /* Distinct blue gradient */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.top-users-likes:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.top-users-likes-meaning {
    background: #172554;
    color: #93c5fd;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    position: relative;
    top: 7px;
    right: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.forum_bottom_answer{
    border-top: 1px dotted #1d2436;
    margin-top: 10px;
    padding-top: 10px;
    color: #7f7f7f;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
}

.forum-info{
    border-radius: 15px;
    background: rgb(19 24 33);
    border: 1px solid #1d2436;
    box-shadow: none;
}

.forum_card_user_header{
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    border-radius: 15px;
    justify-content: space-between;
}
.button_voucher:hover::before {
    top: -70%;
    left: -70%;
}

/* Эффект при наведении */
.button_voucher:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: rgb(230, 230, 230) !important;
}

/* Активное состояние */
.button_voucher:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3) !important;
}
/* Поле ввода */
.status-input {
    width: 250px;
    padding: 6px 10px;
    color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #2f2f2f57;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease;
}

.status-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* Кнопка "Сохранить" */
.status-save-btn {
    padding: 6px 21px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.status-save-btn:hover {
    background: #0056b3;
}

.status-save-btn:active {
    background: #004085;
}

.transition-card {
    position: relative;
    width: 100%;
    /* margin: 20px 0; */
    padding: 60px;
    background: linear-gradient(135deg, rgba(11, 9, 19, 0.95), rgba(46, 40, 72, 0.9));
    border: 2px dashed rgba(46, 40, 72, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    min-height: 220px;
    display: flex;
    margin-bottom: 30px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-link {
    text-decoration: none;
    display: block;
}



.transition-card h3 {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #5fffb9;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 4px;
    background: linear-gradient(90deg, rgb(46 40 72 / 95%), rgb(11 9 19 / 82%));
    padding: 15px 35px;
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    font-family: 'Arial', sans-serif;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
    border: 4px solid rgb(46 40 72);
}

.card-sticker {
    position: absolute;
    width: 65px;
    height: 65px;
    opacity: 0.85;
    transition: transform 0.3s ease, opacity 0.3s ease;
    animation: float 3.5s infinite ease-in-out;
    z-index: 1;
    --rotate: -15deg;
}

.card-link:hover .card-sticker {
    opacity: 1;
}

.card-sticker:hover {
    transform: scale(1.15);
    animation-play-state: paused;
}

.card-sticker img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.6)) brightness(1.2);
    border-radius: 12px;
    padding: 5px;
    transform: rotate(var(--rotate));
}

@keyframes float {
    0% { transform: translateY(0px) rotate(var(--rotate)); }
    50% { transform: translateY(-12px) rotate(calc(var(--rotate) + 5deg)); }
    100% { transform: translateY(0px) rotate(var(--rotate)); }
}

/* Позиционирование наклеек */
.card-sticker:nth-child(1) { left: 15%; top: 10%; --rotate: -12deg; animation-delay: 0s; }
.card-sticker:nth-child(2) { right: 15%; top: 10%; --rotate: 12deg; animation-delay: 0.5s; }
.card-sticker:nth-child(3) { left: 15%; bottom: 10%; --rotate: 15deg; animation-delay: 1s; }
.card-sticker:nth-child(4) { right: 15%; bottom: 10%; --rotate: -15deg; animation-delay: 1.5s; }
.card-sticker:nth-child(5) { left: 25%; top: 25%; --rotate: -18deg; animation-delay: 2s; }
.card-sticker:nth-child(6) { right: 25%; top: 25%; --rotate: 18deg; animation-delay: 2.5s; }
.card-sticker:nth-child(7) { left: 25%; bottom: 25%; --rotate: 20deg; animation-delay: 3s; }
.card-sticker:nth-child(8) { right: 25%; bottom: 25%; --rotate: -20deg; animation-delay: 3.5s; }

.skill {
    font-size: 13px;
    font-weight: bold;
    padding: 8px 9px;
    border-radius: 13px;
    text-align: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 4px 15px rgb(0 0 0 / 0%);
    cursor: pointer;
}

.skill-l {
    background: linear-gradient(135deg, #ffffff87, #f0f0f070);
    color: #333;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}


.skill-m {
    background: linear-gradient(135deg, #ffeb3b54, #fbc02d40);
    color: #fff6f6;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.slider-container {
    position: relative;
    background: rgb(11 9 19 / 95%);
    border-color: rgb(46 40 72);
    box-shadow: 0 2px 12px rgb(0 0 0);
    border-radius: 15px;
    padding: 55px;
    margin-bottom: 30px;
    overflow: hidden;
    text-align: center;
}

.slide {
    display: none;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.slide.active {
    display: block;
    opacity: 1;
}

.slide img {
    width: 110px;
    height: 91px;
    object-fit: cover;
    border-radius: 50%;
    /* border: 3px solid #555; */
    margin-bottom: 20px;
    /* box-shadow: 0 0 12px rgba(255,255,255,0.2); */
}

.title {
    font-size: 22px;
    font-weight: 600;
    color: #e6bfff;
    margin-bottom: 8px;
}

.nickname {
    font-size: 16px;
    color: #999;
}

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.05);
    border: none;
    color: #fff;
    font-size: 28px;
    padding: 5px 12px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
    z-index: 10;
}

.nav-btn:hover {
    background: rgba(255,255,255,0.1);
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}
.skill-h {
    background: linear-gradient(135deg, #ff704361, #f4511e52);
    color: #fff;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}


.skill-p {
    background: linear-gradient(135deg, #f4433699, #d32f2f7a);
    color: #fff;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}


.skill-g {
    background: linear-gradient(135deg, #00000078, #434343b8);
    color: #fff;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}



.place-stats{
background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 40%, transparent), transparent);
    border-radius: 300px;
    display: flex;
    color: #ffffff;
    font-size: 28px;
    font-weight: 600;

    align-items: center;
    /* transform: skewX(348deg); */
    justify-content: center;
}
.place-stats .place-top1{
    font-size: 28px;
    color: #FFC107;
}
.place-stats .place-top2{
    font-size: 28px;
    color: #e5dab9;
}
.place-stats .place-top3{
    font-size: 28px;
    color: #8BC34A;
}
.card-new-quests {
    background: rgb(11 9 19 / 95%);
    border-color: rgb(46 40 72);
    box-shadow: 0 2px 12px rgb(0 0 0);
    height: 160px;
    margin-bottom: 10px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    gap: 10px;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    background-size: cover;
}
/* Основной стиль кнопок */
.delete-btn {
    background: linear-gradient(133deg, var(--purple), var(--card));
    border: none;
    color: white;
    padding: 12px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
/* Общие анимации */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-border {
    0% { box-shadow: 0 0 12px #00ffe5, 0 0 20px rgba(0, 255, 132, 0.4); }
    50% { box-shadow: 0 0 18px #00ffe5, 0 0 28px rgba(0, 255, 132, 0.9); }
    100% { box-shadow: 0 0 12px #00ffe5, 0 0 20px rgba(0, 255, 132, 0.4); }
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Баннер-контейнер */
.banner-container {
    background: rgb(11 9 19 / 95%);
    border: 1px solid rgb(46 40 72);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    animation: fadeInUp 1s ease-out;
}

.banner-container-info h1 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: #00ffc3;
    text-shadow: 0 0 15px #00ffc380;
    font-weight: bold;
}

.progress-bar1 {
    position: relative;
    height: 12px;
    border-radius: 100px;
    background: #121218;
    overflow: hidden;
    margin-bottom: 19px;
    box-shadow: inset 0 0 10px #000, 0 0 10px rgba(0, 255, 132, 0.2);
    border: 1px solid rgba(0, 255, 132, 0.2);
}

.progress-fill {
    position: relative;
    height: 100%;
    width: 0%; /* Управляется через JavaScript */
    background: linear-gradient(90deg, #00ff99, #00c2ff, #0084ff);
    border-radius: 100px;
    transition: width 1s ease-in-out;
    box-shadow: 0 0 12px #00ffe5, 0 0 20px rgba(0, 255, 132, 0.6);
    animation: pulse-border 3s infinite ease-in-out;
}

.progress-fill::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shine 2s infinite linear;
}

.progress-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent 80%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.banner-container-countdown {
    margin-top: 10px;
}

.countdown-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-top: 15px;
}

.countdown-item {
    background: #181c25;
    padding: 20px 25px;
    border-radius: 26px;
    min-width: 100px;
    max-width: 200px;
    margin: 0 auto;
    box-shadow: 0 0 12px #c2c2c255;
    border: 1px solid #2f3545;
    transition: transform 0.3s;
    position: relative;
}

.countdown-item:hover {
    transform: scale(1.07);
}

.countdown-item .number {
    font-size: 2.8rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 10px #00ffc366;
}

.countdown-item .label {
    margin-top: 5px;
    font-size: 0.9rem;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Блок информации о пользователях */
.block-info-users {
    display: grid;
    gap: 15px;
    padding: 20px;
    background: rgb(11 9 19 / 95%);
    border: 1px solid rgb(46 40 72);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    position: relative;
    margin-bottom: 30px;
    justify-items: center;
}

.block-info-users > svg {
    margin-top: 15px;
    height: 60px;
    fill: rgb(205 207 31);
    filter: drop-shadow(0 0 8px rgba(205, 207, 31, 0.5));
}

.block-info-users-type {
    text-align: center;
    color: rgb(205 207 31);
    font-size: 1.25rem;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(205, 207, 31, 0.4);
}

.block-info-users-text {
    text-align: center;
    color: #00c2ff;
    font-size: 0.875rem;
    line-height: 1.4;
}

.block-info-users-button {
    display: flex;
    height: 40px;
    width: 100%;
    max-width: 250px;
    padding: 0 30px;
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(90deg, rgba(85, 85, 85, 0.3), rgba(46, 40, 72, 0.5));
    border: 1px solid rgba(205, 207, 31, 0.2);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.block-info-users-button:hover {
    background: linear-gradient(90deg, rgba(205, 207, 31, 0.2), rgba(0, 194, 255, 0.2));
    border-color: rgb(205 207 31);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(205, 207, 31, 0.5);
}

/* Адаптивность */
@media (max-width: 576px) {
    .banner-container-info h1 {
        font-size: 1.8rem;
    }

    .countdown-item .number {
        font-size: 2.2rem;
    }

    .block-info-users-type {
        font-size: 1rem;
    }

    .block-info-users-text {
        font-size: 0.75rem;
    }

    .block-info-users-button {
        max-width: 200px;
        font-size: 0.875rem;
    }
}
.delete-btn i {
    font-size: 18px;
}
.banner-container {
    background: rgb(11 9 19 / 95%);
    border-color: rgb(46 40 72);
    box-shadow: 0 2px 12px rgb(0 0 0);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.banner-container-info h1 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: #00ffc3;
    text-shadow: 0 0 15px #00ffc380;
    font-weight: bold;
}

.progress-bar1 {
    position: relative;
    height: 12px;
    border-radius: 100px;
    background: #121218;
    overflow: hidden;
    margin-bottom: 19px;
    box-shadow: inset 0 0 10px #000, 0 0 10px rgba(0, 255, 132, 0.2);
    border: 1px solid rgba(0, 255, 132, 0.2);
}

.progress-fill {
    position: relative;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00ff99, #00c2ff, #0084ff);
    border-radius: 100px;
    transition: width 1s ease-in-out;
    box-shadow: 0 0 12px #00ffe5, 0 0 20px rgba(0, 255, 132, 0.6);
    animation: pulse-border 3s infinite ease-in-out;
}

.progress-fill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.2), transparent 80%);
    mix-blend-mode: screen;
    pointer-events: none;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 12px #00ffe5, 0 0 20px rgba(0, 255, 132, 0.4);
    }
    50% {
        box-shadow: 0 0 18px #00ffe5, 0 0 28px rgba(0, 255, 132, 0.9);
    }
    100% {
        box-shadow: 0 0 12px #00ffe5, 0 0 20px rgba(0, 255, 132, 0.4);
    }
}

.banner-container-countdown {
    margin-top: 10px;
}

.countdown-box {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 15px;
    flex-wrap: nowrap;
    overflow-x: visible;
}
.usersframeusers {
    position: absolute;
    left: 2px !important;
    width: 52px !important;
    height: 54px !important;
    margin-top: -7px !important;
    border-radius: 0px !important;
}
.usersframe {
    position: absolute;
    left: 11px !important;
    width: 57px !important;
    height: 64px !important;
    margin-top: -6px !important;
    border-radius: 0px !important;
}
.usersframeonline{
    position: absolute;
    left: 50px !important;
    width: 50px !important;
    height: 46px !important;
    margin-top: 0px !important;
    border-radius: 0px !important;
}

#events .event > a:not(.btn) img {
    height: 40px;
    margin: 15px;
    border-radius: 10% !important;
    margin-right: 10px;
}
.countdown-item {
    background: linear-gradient(135deg, #1e2430 0%, #2a3344 100%); /* Subtle gradient for depth */
    padding: 20px 25px;
    border-radius: 26px;
    min-width: 100px;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(194, 194, 194, 0.2); /* Enhanced shadow */
    border: 1px solid rgba(47, 53, 69, 0.5); /* Softer border */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    position: relative;
    overflow: hidden; /* For inner effects */
    animation: pulse 2s infinite ease-in-out; /* Subtle pulsing animation */
}

/* Pulsing animation for a lively effect */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(194, 194, 194, 0.2);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(194, 194, 194, 0.3);
    }
}

.countdown-item:hover {
    transform: scale(1.1); /* Slightly larger hover scale */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 255, 195, 0.3); /* Glow on hover */
}

/* Animated background effect */
.countdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(0, 255, 195, 0.1),
            transparent
    ); /* Subtle shimmer */
    animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.countdown-item .number {
    font-size: 2.8rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 195, 0.5), 0 0 20px rgba(0, 255, 195, 0.3); /* Enhanced glow */
    transition: color 0.3s ease;
    animation: numberFade 1s infinite alternate; /* Subtle number animation */
}

@keyframes numberFade {
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

.countdown-item:hover .number {
    color: #00ffc3; /* Bright accent on hover */
}

.countdown-item .label {
    margin-top: 5px;
    font-size: 0.9rem;
    color: #c0c0c0; /* Lighter for contrast */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.countdown-item:hover .label {
    color: #ffffff; /* White on hover */
}

/* Mobile adaptation */
@media (max-width: 991.99px) {
    .countdown-box {
        overflow-x: auto;
        padding-bottom: 10px;
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
    }

    .countdown-item {
        scroll-snap-align: center;
        margin-right: 15px;
        animation: pulse 2s infinite ease-in-out; /* Maintain animation */
    }

    .banner-container-info h1 {
        font-size: 1.8rem;
    }

    .countdown-item .number {
        font-size: 2.2rem;
    }
}

@media (max-width: 576px) {
    .countdown-box {
        flex-direction: column;
        gap: 15px;
        padding: 10px;
    }

    .countdown-item {
        width: 80%;
        margin: 0 auto;
        min-width: unset;
        animation: pulse 2s infinite ease-in-out; /* Maintain animation */
    }
}
.delete-btn:hover {
    background: linear-gradient(133deg, var(--card), var(--purple));
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Красная кнопка "Удалить все" */
.delete-btn-all {
    background: linear-gradient(133deg, #ff4c4c, #d60000);
}

.delete-btn-all:hover {
    background: linear-gradient(133deg, #d60000, #ff4c4c);
    transform: scale(1.05);
}

button.custom-btn {
    background: rgba(255, 255, 255, 0.1); /* Полупрозрачный фон */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Лёгкая обводка */
    border-radius: 5px; /* Закругление */
    position: absolute;
    top: 20px;
    right: 30px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.h-top-link, .h-top-link:hover {
    display: none;
    cursor: pointer;
    width: 38px;
    height: 150px;
    text-align: center;
    background-image: url(../img/uptop.png);
    color: #fff;
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 1;
}
button.custom-btn:hover {
    background: rgba(255, 255, 255, 0.2); /* Подсветка при наведении */
}
.text_container_oplata{
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    display: flex;
    justify-content: center;
}
/* Основной стиль кнопки */
.btn-avatar {
    background-color: #343a40;
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

/* Эффект при наведении */
.btn-avatar:hover {
    background-color: #495057;
    transform: translateY(-2px);
}

/* Эффект при нажатии */
.btn-avatar:active {
    background-color: #212529;
    transform: translateY(1px);
}

/* Эффект при фокусе */
.btn-avatar:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
}

/* Иконка Font Awesome в кнопке */
.btn-avatar i {
    margin-right: 8px;
}

.wapper > .footer {
    background: url(../img/bg2.svg) no-repeat center / cover;
    background-color: rgb(1 0 1 / 69%);
    background-blend-mode: overlay;
    border-radius: 5px;
    border: 1px solid rgb(46, 40, 72);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8);
    z-index: 1;
}
.service__description .container-oplata i{
    background: radial-gradient(circle, #232323 0%, #232323 100%);
    text-align: center;
    box-shadow: 0px 10px 10px -8px rgb(0 0 0 / 10%);
    margin-left: 5px;
    padding: 7px;
    margin-right: 10px;
    transition: all 0.4s;
    border-radius: 10px;
    font-size: 26px;
    color: #6749c5;
}

.icon-style {
    font-size: 18px;
    color: #503ca5;
    margin-right: 8px;
}
.name-user span {
    color: #503ca5;
    font-weight: 600;
}
.container-oplata {
    display: -webkit-inline-box;
    margin-bottom: 5px;
    height: 50px;
    width: 100%;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    text-align: initial;
    transition: all 0.2s ease-out;
    cursor: default;
    transform: scale(1);
    display: flex;
    align-items: center;
}
button.custom-btn i {
    color: white;
    font-size: 16px;
}
.noty-block, .bs-callout {
    color: #e0e0e0;
    background: linear-gradient(145deg, #080710, #09070f);
    border-left: 5px solid rgb(108, 151, 212);
    border-radius: 14px;
    padding: 18px 24px;
    font-size: 15px;
    font-weight: 500;
}
.noty-block.error, .noty-block.bs-callout-danger, .bs-callout.error, .bs-callout.bs-callout-danger {
    background-color: #5086ff1a;
    border-radius: 13px;
    font-size: 11px;
    margin-top: 20px;
    display: flex
;
    font-weight: 600;
    border: solid 1px #5086ff;
    height: auto;
    flex-direction: column;
    align-items: center;
}

.user_visit {
    width: 32px;
    height: 32px;
}
.user_visit img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    margin-bottom: 5px;
    margin-right: 5px;
}
.tabs-paymentss {
    background: rgb(11 9 19)!important;
    border-color: rgb(46 40 72);
    display: flex;
    gap: 25px;
    flex-wrap: nowrap;
    border-radius: 15px;
    padding: 0;
    justify-content: space-between;
}
.social-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
    width: 100%;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
}
.social-btn {
    display: flex
;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: #1e1e1e;
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    transition: 0.3s ease-in-out;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    font-weight: bold;
    text-align: center;
    gap: 9px;
}
.social-btn i {
    font-size: 24px;
}
.social-btn:hover {
    transform: scale(1.05);
}
.discord1 {
    background: #5865F2;
}
.discord1:hover {
    background: #4752C4;
}
.telegram1 {
    background: #0088cc;
}
.telegram1:hover {
    background: #0077b5;
}

/******* Middle section CSS Start ******/
/* -------- Landing page ------- */
.game-section .owl-stage {
    margin: 0px -5px;
    display: flex;
    display: -webkit-flex;
}
.game-section .item {
    margin: 0px 7px 40px;
    width: 316px;
    height: 310px;
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    background: #e91414 no-repeat center center / cover;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    cursor: pointer;
}
.game-section .item:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-image: linear-gradient(rgb(0 0 0 / 0%), rgb(10 23 44));
}
.game-section .item-desc {
    padding: 17px 86px;
    color: #fff;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    backdrop-filter: blur(27px);
    font-size: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

.game-section .item-desc:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
}

.game-section .item.active .item-desc {
    transform: none;
    -webkit-transform: none;
}
.game-section .item-desc p {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.game-section .owl-theme.custom-carousel .owl-dots {
    margin-top: -20px;
    position: relative;
    z-index: 5;
}
/******** Middle section CSS End *******/

/***** responsive css Start ******/

@media (min-width: 992px) and (max-width: 1199px) {
    h2 {
        margin-bottom: 32px;
    }
    h3 {
        margin: 0 0 8px;
        font-size: 24px;
        line-height: 32px;
    }

    /* -------- Landing page ------- */
    .game-section {
        padding: 50px 30px;
    }
    .game-section .item {
        margin: 0 12px 60px;
        width: 260px;
        height: 360px;
    }
    .game-section .item.active {
        width: 400px;
    }
}
.mini-okno {
    transform: scale(0);
    min-width: 100%;
    max-width: 100%;
background-color: rgb(11 9 16);
    border-color: #050505;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    border-radius: 15px;
    /* position: absolute; */
    z-index: 500;
    /* top: 49px; */
    /* right: 0px; */
    margin-bottom: 30px;
}
        .mini-okno.show-yes {
            transform: scale(1);
        }
        .glav-mini-modal {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .glav-mini-modal a {
            position: absolute;
            color: var(--color-default);
            white-space: nowrap;
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 18px;
    background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 40%, transparent), transparent);
        }
        .glav-mini-modal a h5 {
            text-shadow: -1px -1px 0 var(--fon), 1px -1px 0 var(--fon), -1px 1px 0 var(--fon), 1px 1px 0 var(--fon);
        }
        .dop-mini-modal {
            display: grid;
            gap: 10px;
            padding: 15px;
       background-color: rgba(10, 10, 26, 0.95);
    border-color: #050505;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    background-size: cover;
    border-radius: 12px;
        }
        .dop-mini-modal div {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .dop-mini-modal div i {
            fill: var(--span-color);
            border-radius: 6px;
background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 40%, transparent), transparent);
            padding: 5px 10px;
            width: 40px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .dop-mini-modal div a {
            width: 100%;
            text-align: center;
            cursor: pointer;
            color: var(--color-dark);
    background-image: linear-gradient(181deg,
 color-mix(in srgb, #3d526766 40%, transparent), transparent);
            padding: 5px 10px;
            border-radius: 6px;
            transition: .5s;
        }
        .dop-mini-modal div a.activ-menu-mini-modal,
        .dop-mini-modal div a:hover {
            color: var(--fon);
           background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 10%, transparent), transparent);
        }
/* Нижнее меню */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    height: 49px;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1000;
    border-top: 1px solid #e0e0e0;
    animation: slideUp 0.5s ease-out forwards;
}

/* Анимация появления меню */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Элементы навигации */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 11px;
    flex: 1;
    padding: 8px;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.1s ease;
    position: relative;
}

/* Иконки */
.nav-item i {
    font-size: 18px;
    margin-bottom: 4px;
    transition: transform 0.2s ease;
}

/* Эффект наведения */
.nav-item:hover i {
    transform: scale(1.2);
}

/* Активное состояние */
.nav-item.active {
    color: #007aff;
}

/* Эффект нажатия */
.nav-item:active {
    transform: scale(0.95);
}

/* Эффект пульсации */
.nav-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.2) 0%, transparent 70%);
    opacity: 0;
    border-radius: 50%;
    transform: scale(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-item.clicked::after {
    opacity: 1;
    transform: scale(1.5);
}

/* Мини-меню */
.mini-menu {
    position: fixed;
    bottom: 54px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
    width: 250px;
    padding: 10px 0;
}

/* Анимация появления мини-меню */
.mini-menu.active {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    visibility: visible;
}

/* Элементы мини-меню */
.mini-menu-content {
    display: flex;
    flex-direction: column;
}

.mini-menu-item {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mini-menu-item:hover {
    background-color: #f0f0f0;
    color: #007aff;
}

.mini-menu-item.active {
    color: #007aff;
    font-weight: 600;
}

/* Анимация появления пунктов мини-меню */
.mini-menu.active .mini-menu-item {
    animation: fadeInUp 0.3s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Задержка для каждого пункта */
.mini-menu-item:nth-child(1) { animation-delay: 0.05s; }
.mini-menu-item:nth-child(2) { animation-delay: 0.1s; }
.mini-menu-item:nth-child(3) { animation-delay: 0.15s; }

/* Темная тема */
@media (prefers-color-scheme: dark) {
    .bottom-nav {
        background-color: #2c2c2e;
        border-top: 1px solid #3a3a3c;
    }
    .nav-item {
        color: var(--border-color);
    }
    .nav-item.active {
        color: #0aff28;
    }
    .nav-item::after {
        background: radial-gradient(circle, rgba(10, 132, 255, 0.3) 0%, transparent 70%);
    }
    .mini-menu {
        background-color: #2c2c2e;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }
    .mini-menu-item {
        color: #ffffff;
    }
    .mini-menu-item:hover {
        background-color: #3a3a3c;
        color: #0a84ff;
    }
    .mini-menu-item.active {
        color: #0a84ff;
    }
}

/* Адаптация для больших экранов */
@media (min-width: 768px) {
    .bottom-nav {
        max-width: 500px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 15px 15px 0 0;
    }
    .mini-menu {
        width: 250px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    h2 {
        margin-bottom: 32px;
    }
    h3 {
        margin: 0 0 8px;
        font-size: 24px;
        line-height: 32px;
    }
    .line-title {
        width: 330px;
    }

    /* -------- Landing page ------- */
    .game-section {
        padding: 50px 30px 40px;
    }
    .game-section .item {
        margin: 0 12px 60px;
        width: 240px;
        height: 330px;
    }
    .game-section .item.active {
        width: 360px;
    }
    .game-section .item-desc {
        transform: translateY(calc(100% - 42px));
        -webkit-transform: translateY(calc(100% - 42px));
    }
}
@media (max-width: 767px) {
    .navbar-wrap {
        /* display: none; */
    }
    .profile-headwb {
        /* display: none
    ; */
    }
}
@media (max-width: 767px) {
    body {
        font-size: 14px;
    }
    h2 {
        margin-bottom: 20px;
    }
    h3 {
        margin: 0 0 8px;
        font-size: 19px;
        line-height: 24px;
    }
    .line-title {
        width: 250px;
    }
}
/* Общий стиль кнопок */
.custom-btn {
    font-weight: 600;
    font-size: 16px;
    border-radius: 50px;
    padding: 12px 24px;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

/* Темные кнопки с плавными эффектами */
.btn-dark {
    background-color: #333;
    color: #fff;
    border: 2px solid #444;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-dark:hover {
    background-color: #444;
    border-color: #555;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Окантовка светлая для кнопок */
.btn-outline-light {
    background-color: transparent;
    color: #fff;
    border: 2px solid #666;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-outline-light:hover {
    background-color: #444;
    color: #fff;
    border-color: #777;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Разделитель */
.divider {
    border: 1px solid #444;
    margin: 20px 0;
    opacity: 0.5;
}

/* Стили для Steam раздела */
.steam-buttons {
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.steam-title {
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
}

/* Сообщение о бонусе */
.bonus-message {
    background-color: #222;
    border-radius: 15px;
    padding: 15px;
}

.bonus-text {
    font-size: 18px;
    color: #03ed76;
    font-weight: 700;
}



.collapsible-menu.user-menu {
    /* background: #1a1a1a; */
    border-radius: 12px;
    padding: 15px;
    /* box-shadow: 0 4px 25px rgba(0, 0, 0, 0.8); */
}
.login_social_register_header{
    display: flex;
    align-items: center;
    margin-bottom: 1.75rem;
    margin-top: 1.75rem;
}

.login_social_register_header p{
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 0;
    color: #a7a4a4;
    font-size: 13px;
}

.login_social_register_line{
    height: 1px;
    flex: 1;
    background-color: #414141;
}
.collapsible-menu.user-menu a {
    display: flex;
    border-radius: 8px;
    transition: background 0.3s ease, transform 0.2s ease;
    color: #e0e0e0;
    text-decoration: none;
}

.collapsible-menu.user-menu a:hover {
    transform: translateX(5px);
}

.collapsible-menu.user-menu img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    box-shadow: var(--box-shadow);
    transition: box-shadow 0.3s ease-in-out;
}

.collapsible-menu.user-menu h3 {
    font-size: 18px;
    margin-left: 12px;
    color: #ffffff;
    font-weight: 600;
}

.collapsible-menu.user-menu p {
    font-size: 14px;
    color: #aaa;
    margin-left: 12px;
}

.point {
    width: 13px;
    height: 13px;
    background: #00ff1d;
    border-radius: 50%;
    box-shadow: 0 0 30px rgb(35 255 0 / 90%);
    position: absolute;
    top: 50px;
    right: 18px;
}

.collapsible-menu.user-menu ul {
    list-style: none;
    padding: 0;
    margin-top: 10px;
}

.collapsible-menu.user-menu ul li {
    position: relative;
    border-radius: 8px;
    transition: background 0.3s ease-in-out;
}



.collapsible-menu.user-menu ul li a {
    color: #e0e0e0;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}


.collapsible-menu.user-menu ul li i {
    margin-right: 10px;
    font-size: 18px;
    transition: color 0.3s ease;
}

.banners-intro {

    margin-bottom: 30px;
    position: relative;
    z-index: 1
}

@media not screen and (min-width: 630px) {
    .banners-intro {
        display: none;
    }
}

.banners-intro__grid {
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media (min-width: 630px) {
    .banners-intro__grid {
        gap:16px
    }
}

@media (min-width: 1470px) {
    .banners-intro__grid {
        flex-direction:row;
    }
}

.banners-intro__main {
    height: 160px
}

@media (min-width: 630px) {
    .banners-intro__main {
        height:424px
    }
}

@media (min-width: 1470px) {
    .banners-intro__main {
        flex-grow:1;
        min-width: 0
    }
}

.banners-intro__secondary {
    display: flex;
    flex-direction: column;
    gap: 10px
}

@media (min-width: 630px) {
    .banners-intro__secondary {
        flex-direction:row;
        gap: 16px
    }
}

@media (min-width: 1470px) {
    .banners-intro__secondary {
        flex-direction:column;
        width: 544px;
        flex: none
    }
}

.banners-intro__secondary-item {
    height: auto;
    min-width: 0
}

@media (min-width: 630px) {
    .banners-intro__secondary-item {
        flex:1 1 0;
        height: auto
    }
}

.banners {
    position: relative;
    width: 100%;
    height: 100%;
}

.banners__wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px
}

@media not screen and (min-width: 630px) {
    .banners__wrapper {
        border-radius:10px
    }
}

.banners__items {
    width: 100%;
    height: 100%;
    display: flex;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0)
}

.banners__item {
    /* width: 100%; */
    /* height: 100%; */
    flex: none;
}

.banners__item .banners-item__btn {
    margin-left: 128px
}

@media not screen and (min-width: 630px) {
    .banners__item .banners-item__btn {
        margin-left:0
    }
}

.banners__controls {
    position: absolute;
    bottom: 42px;
    left: 42px;
    display: flex;
    gap: 10px;
    will-change: transform
}

@media not screen and (min-width: 630px) {
    .banners__controls {
        display:none
    }
}

.banners__control {
    width: 54px;
    height: 54px;
    background: hsla(0,0%,100%,.2);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease
}

.banners__control .svg {
    width: 20px;
    height: 20px
}

@media not all and (hover: none) and (pointer:coarse) {
    .banners__control:hover {
        background-color:hsla(0,0%,100%,.4)
    }
}

@media (hover: none) and (pointer:coarse) {
    .banners__control:active {
        -webkit-tap-highlight-color:transparent;
        background-color: hsla(0,0%,100%,.4)
    }
}

.banners__control_prev .svg {
    transform: scaleX(-1)
}

.banners__dots {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    gap: 30px
}

@media not screen and (min-width: 630px) {
    .banners__dots {
        display:none
    }
}

.banners__dot {
    background-color: hsla(0,0%,100%,.6);
    border-radius: 50%;
    width: 10px;
    height: 10px
}

.banners__dot.active {
    background-color: #fff
}

.banners_one .banners-item__btn {
    margin-left: 0
}

.banners-item {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #1c1743;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100%;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    z-index: 1;
    overflow: hidden
}

@media not screen and (min-width: 630px) {
    .banners-item {
        border-radius:10px
    }
}

.banners-item:after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    pointer-events: none;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100%;
    z-index: -1
}

.banners-item__btn--online {
    background-color: hsla(0,0%,100%,.07);
    color: #7ed321;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    padding: 5px 10px 5px 25px;
    position: relative
}

.banners-item__btn--online:before {
    content: "\25CF";
    position: absolute;
    left: 6px;
    top: 10px;
    width: 16px;
    height: 16px
}

.banners-item__title {
    font-family: Rubik,sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 38px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff
}

.banners-item__text {
    font-family: Rubik,sans-serif;
    line-height: 133%;
    color: hsla(0,0%,100%,.7);
    font-size: 18px;
    flex: none
}

.banners-item__actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.banners-item__timer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    border-radius: 10px;
    background: hsla(0,0%,100%,.1);
    padding: 0 6px;
    font-family: Rubik,sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 137.5%;
    color: hsla(0,0%,100%,.5);
    width: fit-content
}

@media not screen and (min-width: 630px) {
    .banners-item__timer {
        height:42px
    }
}

.banners-item__timer-column {
    width: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 133.33%
}

@media not screen and (min-width: 630px) {
    .banners-item__timer-column {
        font-size:13px;
        width: 38px
    }
}

.banners-item__timer-column span {
    font-size: 14px;
    font-weight: 400;
    line-height: 128.57%;
    font-feature-settings: "liga" off;
    margin-top: -2px
}

@media not screen and (min-width: 630px) {
    .banners-item__timer-column span {
        font-size:12px
    }
}

.banners-item__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 54px;
    padding: 0 24px;
    gap: 6px;
    font-family: Rubik,sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 137.5%;
    letter-spacing: .32px;
    text-transform: uppercase;
    border-radius: 10px;
    transition: .3s ease;
    background-color: #fff;
    color: #8d350d;
    min-width: 128px;
    margin-top: auto
}

.banners-item__btn .svg {
    width: 20px;
    height: 20px
}

@media not screen and (min-width: 630px) {
    .banners-item__btn {
        height:42px;
        font-size: 13px;
        line-height: 19px
    }
}

@media not all and (hover: none) and (pointer:coarse) {
    .banners-item__btn:hover {
        background:hsla(0,0%,100%,.9)
    }
}

@media (hover: none) and (pointer:coarse) {
    .banners-item__btn:active {
        -webkit-tap-highlight-color:transparent;
        background: hsla(0,0%,100%,.9)
    }
}

.banners-item_big {
    padding: 15px;
    gap: 8px
}

@media not screen and (min-width: 820px) {
    .banners-item_big {
        background-position:50%
    }
}

.banners-item_big .banners-item__title {
    font-size: 20px;
    line-height: 117%;
    width: 60%
}

.banners-item_big .banners-item__text,.banners-item_big .banners-item__timer-label {
    width: 50%;
    max-width: 270px
}

.banners-item_big .banners-item__text {
    display: none
}

@media (min-width: 630px) {
    .banners-item_big.banners-item_responsive {
        padding:42px;
        border-radius: 20px
    }
}

@media (min-width: 630px) {
    .banners-item_big.banners-item_responsive .banners-item__title {
        font-size:32px;
        line-height: 119%;
        max-width: 458px
    }
}

@media (min-width: 630px) {
    .banners-item_big.banners-item_responsive .banners-item__text,.banners-item_big.banners-item_responsive .banners-item__timer-label {
        display:block;
        font-size: 16px;
        line-height: 19px
    }
}

@media (min-width: 630px) {
    .banners-item_big.banners-item_responsive .banners-item__btn {
        display:flex
    }
}

.banners-item_mini {
    padding: 12px 15px;
    justify-content: flex-start;
    background-size: auto 100%
}

@media (min-width: 630px) {
    .banners-item_mini {
        gap:6px;
        padding: 24px 28px 28px
    }
}

@media not screen and (min-width: 630px) {
    .banners-item_mini {
        min-height:75px
    }
}

.banners-item_mini:after {
    background-size: auto 100%
}

.banners-item_mini .banners-item__title {
    font-size: 16px;
    text-transform: none;
    letter-spacing: normal;
    line-height: 130%
}

@media (min-width: 630px) {
    .banners-item_mini .banners-item__title {
        font-size:20px;
        line-height: 130%
    }
}

.banners-item_mini .banners-item__text {
    max-width: 300px;
    font-size: 16px;
    line-height: 137%;
}

@media not screen and (min-width: 630px) {
    .banners-item_mini .banners-item__text {
        font-size:12px;
    }
}

.banners-item_code {
    background-color: #beff34;
    background: linear-gradient(101deg,rgba(190,255,52,0),rgba(190,255,52,.5)),rgba(29,157,17,.5)
}

@media not screen and (min-width: 630px) {
    .banners-item_code {
        padding-right:70px
    }
}

@media (min-width: 630px) {
    .banners-item_code:after {
        background-image:none
    }
}

.banners-item_code .banners-item__btn {
    background: hsla(0,0%,100%,.2);
    margin-top: auto;
    color: #fff
}

@media not screen and (min-width: 630px) {
    .banners-item_code .banners-item__btn {
        font-size:0;
        width: 42px;
        min-width: 0;
        gap: 0
    }
}

@media not all and (hover: none) and (pointer:coarse) {
    .banners-item_code .banners-item__btn:hover {
        background:hsla(0,0%,100%,.4)
    }
}

@media (hover: none) and (pointer:coarse) {
    .banners-item_code .banners-item__btn:active {
        -webkit-tap-highlight-color:transparent;
        background: hsla(0,0%,100%,.4)
    }
}

@media not screen and (min-width: 630px) {
    .banners-item_code .banners-item__btn {
        position:absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%)
    }
}

.banners-item_race {
    background-color: #4564ff;
    background: linear-gradient(101deg,rgba(0,149,255,0),rgba(0,255,161,.5)),rgba(69,100,255,.5)
}

@media not screen and (min-width: 630px) {
    .banners-item_race {
        /* padding-right:162px; */
    }
}

@media not screen and (min-width: 350px) {
    .banners-item_race {
        padding-right:10px
    }
}

@media (min-width: 630px) {
    .banners-item_race:after {
        background-image:none;
        background-size: auto 100%
    }
}

@media not screen and (min-width: 700px) {
    .banners-item_race .banners-item__timer {
        display:none
    }
}

@media not screen and (min-width: 630px) {
    .banners-item_race .banners-item__timer {
        display:flex
    }
}

@media not screen and (min-width: 350px) {
    .banners-item_race .banners-item__timer {
        display:none
    }
}

.banners-item_race .banners-item__actions {
    margin-top: auto
}

@media not screen and (min-width: 630px) {
    .banners-item_race .banners-item__actions {
        position:absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px
    }
}

.banners-item_race .banners-item__btn {
    color: #294394
}

@media not screen and (min-width: 630px) {
    .banners-item_race .banners-item__btn {
        display:none
    }
}

.banners-item_welcome {
    background-image: none
}

@media (min-width: 630px) {
    .banners-item_welcome {
        background-image:none
    }
}

.banners-item_gleam {
    background-image: none
}

@media (min-width: 630px) {
    .banners-item_gleam {
        background-image:none
    }
}

.banners-item_bf24 {
    background-position: 0
}
.servers_button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 52px;
    cursor: pointer;
    background: linear-gradient(135deg, #2a3147 0%, #3b4470 100%);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 20px;
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.servers_button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(79, 140, 255, 0.3), transparent);
    transition: all 0.6s ease;
}

.servers_button:hover::before {
    left: 100%;
}

.servers_button:hover {
    transform: translateY(-4px);
    background: linear-gradient(135deg, #3b4470 0%, #4f8cff 100%);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* Card Image */
.card img {
    max-width: 100%;
    border-radius: 12px;
    margin-bottom: 16px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
    transition: var(--transition);
}

.card:hover img {
    transform: scale(1.05);
}

/* Card Content Animation */
.card-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease, opacity 0.6s ease;
}

.card:hover .card-content {
    opacity: 1;
    max-height: 600px;
}

.collapsible-menu.user-menu ul li a:hover i {
    color: #00c4ff !important;
    text-shadow: 0 0 15px rgba(0, 196, 255, 0.8);
}

.collapsible-menu.user-menu ul li a i.fa-shield-alt {
    color: #ff004c !important;
}

.collapsible-menu.user-menu ul li a:hover i.fa-shield-alt {
    text-shadow: 0 0 15px rgba(255, 0, 76, 0.9);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.collapsible-menu.user-menu ul {
    animation: fadeIn 0.5s ease-in-out;
}

.tab-paymentt {
    display: block;
    width: 40%;
    border-right: 1px solid #2e2e2e;
    padding: 24px 24px 20px;
}
.block_head {
    font-size: 22px; /* Чуть крупнее для большей выразительности */
    text-align: center;
    padding: 18px 30px; /* Увеличенные отступы для воздушности */
    font-weight: 700;
    /* margin-bottom: 30px; */
    color: var(--color-head) !important;
    background: linear-gradient(135deg, rgb(41 31 34) 0%, rgb(14 19 32 / 88%) 100%); /* Градиентный фон */
    border-radius: 16px; /* Более мягкие углы */
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Усиленная тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Декоративный элемент - акцентная линия снизу с градиентом */
.block_head::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px; /* Линия чуть шире */
    height: 4px;
    background: var(--border-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}



.block_head:hover::after {
    width: 100px; /* Расширение линии при наведении */
}

/* Текст с улучшенным свечением и эффектом */
.block_head span {
    position: relative;
    z-index: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(77, 171, 247, 0.2); /* Многослойное свечение */
    transition: text-shadow 0.3s ease;
}

.block_head:hover span {
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(77, 171, 247, 0.3); /* Усиленное свечение */
}

/* Дополнительный декоративный эффект - легкое фоновое сияние */
.block_head::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(77, 171, 247, 0.15) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.block_head:hover::before {
    opacity: 1; /* Сияние появляется при наведении */
}



.form-control::placeholder {
    color: #aeaeae;
}

.tab-method {
    width: 60%;
    padding: 24px 24px 24px 0;
}
.case-banner-img {
    width: 100%;
    max-width: 420px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(10, 20, 40, 0.25);
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease, opacity 0.4s ease;
    animation: celestialFloat 6s ease-in-out infinite, pulseBorder 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    --glow-color-1: #60a5fa; /* Blue */
    --glow-color-2: #a855f7; /* Purple */
    --glow-color-3: #ec4899; /* Pink */
    --border-color: var(--glow-color-1); /* Initial color */
}

.case-banner-img:hover {
    transform: translateY(-8px) scale(1.05) rotate(1deg);
    box-shadow: 0 12px 24px rgba(10, 20, 40, 0.5);
    filter: brightness(1.15) saturate(1.2) blur(0.5px);
    opacity: 0.95;
}

.case-banner-img::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: linear-gradient(181deg, 
        color-mix(in srgb, var(--border-color) 10%, transparent) 0%, 
        transparent 50%),
        radial-gradient(circle at center, 
        color-mix(in srgb, var(--border-color) 15%, transparent) 20%, 
        transparent 70%);
    animation: etherealGlow 5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.case-banner-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 10% 90%, rgba(255, 255, 255, 0.3) 3px, transparent 5px),
        radial-gradient(circle at 30% 95%, rgba(255, 255, 255, 0.25) 2px, transparent 4px),
        radial-gradient(circle at 50% 85%, rgba(255, 255, 255, 0.35) 2.5px, transparent 4.5px),
        radial-gradient(circle at 70% 90%, rgba(255, 255, 255, 0.2) 2px, transparent 4px),
        radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.3) 2.5px, transparent 4.5px);
    filter: blur(0px);
    opacity: 0;
    animation: risingSteam 5s linear infinite;
    pointer-events: none;
    z-index: 2; /* Above the image */
}

.case-banner-img > .gold-particles {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(255, 215, 0, 0.8) 2px, transparent 3px),
        radial-gradient(circle at 40% 90%, rgba(255, 215, 0, 0.7) 1.5px, transparent 2.5px),
        radial-gradient(circle at 60% 85%, rgba(255, 215, 0, 0.9) 2px, transparent 3px),
        radial-gradient(circle at 80% 95%, rgba(255, 215, 0, 0.6) 1px, transparent 2px);
    opacity: 0;
    animation: goldParticles 4s linear infinite, sparkle 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1; /* Below steam, above glow */
}

@keyframes celestialFloat {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-10px) translateX(5px) rotate(1.5deg) scale(1.03);
    }
    50% {
        transform: translateY(-15px) translateX(0) rotate(0deg) scale(1.04);
    }
    75% {
        transform: translateY(-10px) translateX(-5px) rotate(-1.5deg) scale(1.03);
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
    }
}

@keyframes etherealGlow {
    0% {
        opacity: 0.5;
        transform: rotate(0deg) scale(1);
        --border-color: var(--glow-color-1);
        background-image: linear-gradient(181deg, 
            color-mix(in srgb, var(--border-color) 10%, transparent) 0%, 
            transparent 50%),
            radial-gradient(circle at center, 
            color-mix(in srgb, var(--border-color) 15%, transparent) 20%, 
            transparent 70%);
    }
    33% {
        opacity: 0.75;
        transform: rotate(8deg) scale(1.1);
        --border-color: var(--glow-color-2);
        background-image: linear-gradient(181deg, 
            color-mix(in srgb, var(--border-color) 12%, transparent) 0%, 
            transparent 60%),
            radial-gradient(circle at center, 
            color-mix(in srgb, var(--border-color) 20%, transparent) 25%, 
            transparent 75%);
    }
    66% {
        opacity: 0.65;
        transform: rotate(-8deg) scale(1.08);
        --border-color: var(--glow-color-3);
        background-image: linear-gradient(181deg, 
            color-mix(in srgb, var(--border-color) 11%, transparent) 0%, 
            transparent 55%),
            radial-gradient(circle at center, 
            color-mix(in srgb, var(--border-color) 18%, transparent) 22%, 
            transparent 72%);
    }
    100% {
        opacity: 0.5;
        transform: rotate(0deg) scale(1);
        --border-color: var(--glow-color-1);
        background-image: linear-gradient(181deg, 
            color-mix(in srgb, var(--border-color) 10%, transparent) 0%, 
            transparent 50%),
            radial-gradient(circle at center, 
            color-mix(in srgb, var(--border-color) 15%, transparent) 20%, 
            transparent 70%);
    }
}

@keyframes risingSteam {
    0% {
        transform: translateY(0);
        opacity: 0.4;
        background-position: 
            10% 90%, 
            30% 95%, 
            50% 85%, 
            70% 90%, 
            90% 80%;
    }
    100% {
        transform: translateY(-150%);
        opacity: 0;
        background-position: 
            10% -60%, 
            30% -55%, 
            50% -65%, 
            70% -60%, 
            90% -70%;
    }
}

@keyframes goldParticles {
    0% {
        transform: translateY(0);
        opacity: 0.6;
        background-position: 
            20% 80%, 
            40% 90%, 
            60% 85%, 
            80% 95%;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
        background-position: 
            20% 0%, 
            40% 10%, 
            60% 5%, 
            80% 15%;
    }
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
    10%, 30% {
        opacity: 0.35;
        transform: scale(1.25);
    }
}

@keyframes pulseBorder {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(10, 20, 40, 0.25), 
                    0 0 8px color-mix(in srgb, var(--border-color) 50%, transparent);
    }
    50% {
        box-shadow: 0 6px 20px rgba(10, 20, 40, 0.3), 
                    0 0 12px color-mix(in srgb, var(--border-color) 70%, transparent);
    }
}
.payment-merchant-body {
    display: flex;
    align-items: center; /* Выровнять иконки и текст по вертикали */
}
.avatar-upload-container {
    background: radial-gradient(circle, #2c2f38 0%, #0b131c 100%);
    border-radius: 12px;
    border: 2px solid #353c47;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
    padding: 30px;
    margin-bottom: 25px;
    backdrop-filter: blur(12px);
}

.avatar-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s;
}
.bonus-message {
   background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 40%, transparent), transparent);
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(10, 20, 40, 0.2);
    color: #9C27B0;
    font-weight: 600;
    font-size: 0.9em;
    border: 1px solid #60a5fa;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: glow 2.5s infinite ease-in-out;
}

.bonus-message:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(10, 20, 40, 0.3);
}

.bonus-text {
    font-family: 'Arial', sans-serif;
    letter-spacing: 0.5px;
    text-shadow: 0 0 4px rgb(0 0 0 / 26%);
}

@keyframes glow {
    0% {
        box-shadow: 0 2px 6px rgba(10, 20, 40, 0.2), 0 0 6px rgba(96, 165, 250, 0.2);
    }
    50% {
        box-shadow: 0 2px 8px rgba(10, 20, 40, 0.25), 0 0 10px rgba(96, 165, 250, 0.4);
    }
    100% {
        box-shadow: 0 2px 6px rgba(10, 20, 40, 0.2), 0 0 6px rgba(96, 165, 250, 0.2);
    }
}
.avatar-preview:hover {
    transform: scale(1.05);
}

.avatar-image {
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease-in-out;
}

.avatar-image:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    opacity: 0.95;
    transform: scale(1.05);
}

.status-message {
    font-size: 16px;
    color: #76ff03;
    margin-top: 12px;
    display: none;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.custom-file-input {
    display: none;
}
awanners-item_race .banners-item__btn {
    color: #294394
}

@media not screen and (min-width: 630px) {
    .banners-item_race .banners-item__btn {
        display:none
    }
}

.banners-item_welcome {
    background-image: none
}

@media (min-width: 630px) {
    .banners-item_welcome {
        background-image:none
    }
}

.banners-item_gleam {
    background-image: none
}

@media (min-width: 630px) {
    .banners-item_gleam {
        background-image:none
    }
}

.banners-item_bf24 {
    background-position: 0
}

.soc-banner-prize {
    border-radius: 20px;
    background-color: #161720;
    padding: 24px 32px 32px;
    overflow: hidden;
    position: relative;
    z-index: 1
}

.soc-banner-prize:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 478px;
    height: 100%;
    background-size: cover;
    background-position: 100%;
    background-repeat: no-repeat;
    background-image: none;
    z-index: 0
}

@media not screen and (min-width: 1100px) {
    .soc-banner-prize:before {
        width:30%;
        background-position: 0;
        opacity: .8
    }
}

.soc-banner-prize__content {
    position: relative;
    z-index: 1
}

.soc-banner-prize__title {
    font-family: TT Firs Neue,sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    color: #fff
}

.soc-banner-prize__text {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    color: #9b9db1;
    max-width: 474px
}

@media not screen and (min-width: 1100px) {
    .soc-banner-prize__text {
        text-shadow:1px 1px 1px #000
    }
}

.soc-banner-prize__btns {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap
}

.soc-banner-prize__action {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    padding: 10px 12px 10px 10px;
    background-color: #07f;
    border-radius: 10px;
    font-family: TT Firs Neue,sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    color: #fff;
    cursor: pointer;
    transition: .3s ease
}

@media not screen and (min-width: 630px) {
    .soc-banner-prize__action {
        width:100%
    }
}

.soc-banner-prize__action b {
    text-transform: lowercase
}

.soc-banner-prize__action b:first-letter {
    text-transform: uppercase
}

.soc-banner-prize__action .svg {
    width: 20px;
    height: 20px;
    color: #fff
}

.soc-banner-prize__action .svg:last-child {
    margin-left: auto;
    transition: .3s ease
}

.soc-banner-prize__action_telegram {
    background-color: #2aabee
}

.soc-banner-prize__action_tiktok {
    background-color: #fe2c55
}

.soc-banner-prize__action_instagram {
    background-color: #833ab4;
    display: none
}

.soc-banner-prize__action_taked {
    pointer-events: none;
    justify-content: center;
    background-color: #272835
}

@media not all and (hover: none) and (pointer:coarse) {
    .soc-banner-prize__action:hover {
        opacity:.9
    }

    .soc-banner-prize__action:hover .svg:last-child {
        transform: translateX(2px)
    }
}

@media (hover: none) and (pointer:coarse) {
    .soc-banner-prize__action:active {
        -webkit-tap-highlight-color:transparent;
        opacity: .9
    }

    .soc-banner-prize__action:active .svg:last-child {
        transform: translateX(2px)
    }
}

.daily-banner-nickname {
    border-radius: 20px;
    overflow: hidden;
    position: relative
}

.daily-banner-nickname__body {
    padding: 24px 32px 32px;
    background-color: #161720;
    display: flex;
    justify-content: space-between;
    gap: 10px
}

@media not screen and (min-width: 1100px) {
    .daily-banner-nickname__body {
        padding-top:100px;
        flex-direction: column
    }
}

.daily-banner-nickname__left {
    width: 474px;
    position: relative;
    z-index: 1;
    flex: none
}

@media not screen and (min-width: 1100px) {
    .daily-banner-nickname__left {
        width:100%
    }
}

.daily-banner-nickname__title {
    margin-bottom: 2px;
    font-family: TT Firs Neue,sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px
}

.daily-banner-nickname__title_small {
    font-size: 18px;
    line-height: 24px
}

.daily-banner-nickname__text {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    color: #9b9db1;
    max-width: 474px
}

.daily-banner-nickname__btn {
    margin-top: 24px
}

.daily-banner-nickname__right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    width: 100%
}

@media not screen and (min-width: 1100px) {
    .daily-banner-nickname__right {
        position:static
    }
}

.daily-banner-nickname__steam {
    position: absolute;
    right: 0;
    top: 0;
    width: 600px;
    height: 102px;
    padding-top: 27px;
    padding-left: 267px;
    z-index: 0
}

.daily-banner-nickname__steam:before {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background-image: none;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    z-index: -1
}

@media not screen and (min-width: 1100px) {
    .daily-banner-nickname__steam {
        right:auto;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        padding: 0
    }

    .daily-banner-nickname__steam:before {
        width: 570px;
        background-position: top -21px right -21px;
        background-size: 600px 102px
    }

    .daily-banner-nickname__steam:after {
        content: "";
        height: 82px;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-image: none;
        background-size: 580px 82px;
        background-repeat: no-repeat;
        background-position: top -1px left -1px;
        z-index: -2
    }
}

.daily-banner-nickname__steam-user {
    display: flex;
    align-items: center;
    gap: 6px
}

@media not screen and (min-width: 1100px) {
    .daily-banner-nickname__steam-user {
        position:absolute;
        top: 6px;
        right: 166px;
        width: 146px
    }
}

.daily-banner-nickname__steam-img {
    width: 24px;
    height: 24px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

.daily-banner-nickname__steam-name {
    display: inline-flex;
    color: #8c8c8d;
    font-feature-settings: "liga" off;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px;
    pointer-events: none;
    user-select: none
}

.daily-banner-nickname__steam-name span {
    max-width: 57px;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.daily-banner-nickname__steps {
    width: 100%;
    max-width: 582px;
    padding-bottom: 2px
}

.daily-banner-nickname__footer {
    display: flex
}

@media not screen and (min-width: 630px) {
    .daily-banner-nickname__footer {
        flex-direction:column-reverse
    }
}

.daily-banner-nickname__discount {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #beff34;
    font-family: TT Firs Neue,sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px;
    width: 160px;
    background-color: rgba(190,255,52,.1);
    position: relative;
    z-index: 1;
    overflow: hidden;
    flex: none
}

@media not screen and (min-width: 630px) {
    .daily-banner-nickname__discount {
        width:100%;
        height: 60px;
        font-size: 30px
    }
}

.daily-banner-nickname__discount:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 160px;
    height: 160px;
    background: radial-gradient(50% 50% at 50% 50%,#beff34 0,rgba(190,255,52,0) 100%);
    z-index: 0;
    opacity: .15;
    pointer-events: none
}

.daily-banner-nickname__discount .svg {
    width: 20px;
    height: 20px
}

.daily-banner-nickname__info {
    padding: 24px 32px;
    background-color: #1c1d27;
    width: 100%
}

.promocode-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 42px;
    position: relative;
    z-index: 1;
    margin-bottom: -30px
}

@media not screen and (min-width: 1100px) {
    .promocode-main {
        margin-bottom:0;
        padding-top: 20px
    }
}

.promocode-main__block {
    max-width: 670px;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    min-height: 84px
}

@media not all and (hover: none) and (pointer:coarse) {
    .promocode-main__block:hover .promocode-main__right {
        background-color:#343541!important;
        color: #fff!important
    }
}

@media (hover: none) and (pointer:coarse) {
    .promocode-main__block:active {
        -webkit-tap-highlight-color:transparent
    }

    .promocode-main__block:active .promocode-main__right {
        background-color: #343541!important;
        color: #fff!important
    }
}

.promocode-main__left {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #beff34;
    font-family: TT Firs Neue,sans-serif;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px;
    width: 120px;
    background-color: rgba(190,255,52,.1);
    position: relative;
    z-index: 1;
    overflow: hidden;
    flex: none
}

@media not screen and (min-width: 630px) {
    .promocode-main__left {
        font-size:24px;
        width: fit-content;
        padding: 0 10px
    }
}

.promocode-main__left:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 160px;
    height: 160px;
    background: radial-gradient(50% 50% at 50% 50%,#beff34 0,rgba(190,255,52,0) 100%);
    z-index: 0;
    opacity: .15;
    pointer-events: none
}

.promocode-main__center {
    padding: 16px 24px;
    background-color: #1c1d27;
    display: flex;
    align-items: center;
    gap: 24px
}

@media not screen and (min-width: 630px) {
    .promocode-main__center {
        flex-direction:column;
        text-align: center;
        gap: 5px;
        padding: 8px 24px;
        justify-content: center
    }
}

.promocode-main__title {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    font-feature-settings: "liga" off;
    color: #9b9db1;
    margin-bottom: 2px
}

.promocode-main__text {
    font-family: TT Firs Neue,sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    color: #fff
}

@media not screen and (min-width: 630px) {
    .promocode-main__text {
        font-size:16px
    }
}

.promocode-main__limit {
    flex: none
}

.promocode-main__right {
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #272835;
    color: #9b9db1;
    transition: .3s ease
}

@media not screen and (min-width: 630px) {
    .promocode-main__right {
        display:none
    }
}

.promocode-main__right .svg {
    width: 20px;
    height: 20px
}





.result-message {
    margin-top: 15px;
    color: #ff1744;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.available-avatars-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    gap: 20px;
    background: linear-gradient(135deg, rgba(11, 9, 19, 0.95), rgba(20, 18, 35, 0.9));
    border: 3px solid rgba(46, 40, 72, 0.8);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(46, 40, 72, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    max-width: 600px;
    margin: 0 auto;
}

.available-avatars-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(70, 60, 110, 0.4);
}

.available-avatars {
    display: grid;
    grid-template-columns: repeat(6, 100px);
    gap: 15px;
    overflow-x: auto;
    padding: 10px 0 20px;
    justify-content: center;
    scrollbar-width: thin;
    scrollbar-color: rgba(70, 60, 110, 0.5) rgba(20, 18, 35, 0.9);
}

.available-avatars::-webkit-scrollbar {
    height: 8px;
}

.available-avatars::-webkit-scrollbar-track {
    background: rgba(20, 18, 35, 0.9);
    border-radius: 10px;
}

.available-avatars::-webkit-scrollbar-thumb {
    background: rgba(70, 60, 110, 0.5);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.available-avatars::-webkit-scrollbar-thumb:hover {
    background: rgba(90, 80, 140, 0.8);
}

.avatar-option {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(145deg, rgba(15, 12, 25, 0.9), rgba(25, 20, 40, 0.85));
    border: 2px solid rgba(46, 40, 72, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 0 8px rgba(46, 40, 72, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.avatar-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(70, 60, 110, 0.25), transparent);
    transition: left 0.5s ease;
    z-index: 0;
}

.avatar-option:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(70, 60, 110, 0.5);
    border-color: rgba(90, 80, 140, 0.9);
}

.avatar-option:hover::before {
    left: 100%;
}

.avatar-option.selected {
    border: 3px solid #f5c87d;
    box-shadow: 0 0 15px rgba(245, 200, 125, 0.6), inset 0 0 10px rgba(245, 200, 125, 0.4);
    background: linear-gradient(145deg, rgba(25, 20, 40, 0.9), rgba(35, 30, 60, 0.85));
}
.payment-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px; /* Отступ между иконкой и текстом */
}

.payment-item {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    color: #d5d3e0;
    /* padding: 15px 25px; */
    width: 100%;
    background: linear-gradient(135deg, rgba(11, 9, 19, 0.95), rgba(20, 18, 35, 0.9));
    border: 3px solid rgba(46, 40, 72, 0.8);
    border-radius: 15px;
    margin-bottom: 12px;
    outline: none;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(46, 40, 72, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.payment-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(70, 60, 110, 0.3), transparent);
    transition: left 0.5s ease;
    z-index: 0;
    border-radius: 15px;
}

.payment-item:hover {
    color: #f5c87d;
    border-color: rgba(90, 80, 140, 0.9);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), inset 0 0 12px rgba(70, 60, 110, 0.4);
}

.payment-item:hover::before {
    left: 100%;
}

.payment-item:last-child {
    margin-bottom: 0;
}

.payment-item.active {
    background: linear-gradient(90deg, rgba(20, 18, 35, 0.95), var(--border-color));
    border: 3px solid rgba(90, 80, 140, 0.9);
    color: #f5c87d;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(90, 80, 140, 0.5);
}

.payment-icon {
    width: 100px;
    height: 45px;
    border-radius: 10px;
    /* background: linear-gradient(145deg, rgba(15, 12, 25, 0.9), rgba(25, 20, 40, 0.85)); */
    /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), inset 0 0 8px rgba(46, 40, 72, 0.3); */
    transition: transform 0.3s ease;
}

.payment-item:hover .payment-icon {
    transform: scale(1.1);
}

.payment-item .payment-merchant-title {
    flex: 1;
    font-weight: 600;
    text-transform: capitalize;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.select-method-body {
    display: flex;
    align-items: center;
    padding: 24px 38px;
    margin-bottom: 20px;
    background: #20232a;
    border-radius: 15px;
}

.select-method-info {
    flex-grow: 1;
    min-width: 0;
    padding-right: 25px;
    white-space: nowrap;
}

.select-method-title {
    color: #6d6d84;
    font-size: 11px;
    line-height: 2;
    overflow: hidden;
    text-transform: uppercase;
    text-overflow: ellipsis;
}

.select-method-value {
    color: #dedfe8;
    font-weight: 800;
    font-size: 19px;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-transform: uppercase;
    text-overflow: ellipsis;
}

.select-method-image {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    width: 70px;
    height: 38px;
}

.select-method-image img {
    flex-shrink: 0;
    max-width: 70px;
    max-height: 38px;
}
.payment-merchant-title {
    display: flex;
    align-items: center;
    gap: 10px; /* Расстояние между иконкой и текстом */
    font-weight: 500;
    flex: 1;
}
.modal-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: var(--block-na-card-icon-all);
    border-radius: 10px;
    color: #dbdbdb;
    border: 1px dashed #5a90e5;
}

button.payment-item:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    background: linear-gradient(135deg, #ff00003d, #ff000038); /* Светлый градиент */
    color: #888888; /* Мягкий серый текст */
    box-shadow: none; /* Убираем тень для отключённой кнопки */
    transform: none; /* Убираем анимации */
    transition: background 0.3s ease, color 0.3s ease; /* Плавные переходы */
}

button.payment-item:disabled .modal-icon {
    color: #bbbbbb; /* Бледный цвет для иконки */
}
/* TELEGRAM BLOCK START */
.telegram_fa_icon {
    transition: transform 0.3s ease;
}

.telegram_fa_icon:hover {
    transform: rotate(360deg);
}

.telegram_block {
    padding: 35px;
    text-align: center;
    color: white;
    background: rgb(24 23 27);
    border-color: rgb(34, 33, 39);
    box-shadow: 0 2px 12px rgb(0 0 0);
    border-radius: 15px;
    margin-bottom: 30px;
}

.telegram_bg {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 60px;
    filter: blur(1px);
    z-index: 0;
}

.telegram_content {
    position: relative;
    z-index: 1;
}

.telegram_head {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.telegram_fa_small {
    font-size: 30px;
}

.telegram_count_box {
    background: rgb(0 166 255 / 0%);
    padding: 14px 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0px 5px 15px rgb(34 33 39 / 61%);
    margin-top: 15px;
    line-height: 1.2;
}

.telegram_users_icon {
    font-size: 24px;
    color: #ffffff;
}

.telegram_participant_text {
    font-size: 18px;
    color: #00a6ff;
    font-weight: normal;
}

.telegram_join {
    background: linear-gradient(135deg, #00a6ff, #007acc);
    color: white;
    padding: 15px 30px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s ease-in-out;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.telegram_join:hover {
    color: white;
    box-shadow: 0px 4px 4px rgba(0, 166, 255, 0.8);
    transform: translateY(-10px);
}

.telegram_fa_button {
    font-size: 24px;
}
.telegram_fa_icon {
    animation: iconGlow 1.5s infinite alternate;
}

@keyframes iconGlow {
    0% { color: #00a6ff; }
    100% { color: #007acca1; }
}

/* TELEGRAM BLOCK END */
.telegram_fa_icon {
    transition: transform 0.3s ease;
}

.telegram_fa_icon:hover {
    transform: rotate(360deg);
}

.forum-user-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background: #1e1e1e; */
    /* border: 1px solid #2c2c2c; */
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    /* max-width: 120px; */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.modal-icon {
    width: 40px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #1e1e1e; */
    border-radius: 46px;
background: var(--border-color);
    border: double 15px var(--color-head);
    /* box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2); */
}

.vertical-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vertical-navigation ul li {
    margin-bottom: 10px;
}

.vertical-navigation ul li a {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #e0e0e0;
    text-decoration: none;
    padding: 6px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease, background 0.4s ease;
    background: #2e2e2e8a;
    z-index: 1;
}

.vertical-navigation ul li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 185, 0, 0.3), rgba(255, 185, 0, 0.3));
    transition: left 0.5s ease;
    z-index: 0;
}

.vertical-navigation ul li a:hover::before {
    left: 0;
}

.vertical-navigation ul li a:hover {
    color: #ffffff;
}

.vertical-navigation ul li a span {
    margin-right: 10px;
    font-size: 18px;
}
.forum-avatar {
    width: 100%;
    height: 100%;
    border-radius: 10%;
    border: 2px solid #3a3a3a;
    object-fit: cover;
    background: #2b2b2b;
}

.forum-user-info {
    margin-top: -29px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.forum-username {
    font-size: 12px;
    font-weight: 600;
    color: #e0e0e0;
    text-decoration: none;
}

.forum-username:hover {
    color: #ffffff;
}

.forum-badge {
    margin-top: 4px;
}

.forum-user-group {
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    background: #292929;
    border-radius: 4px;
    padding: 3px 8px;
    display: inline-block;
    margin-top: 4px;
}



.profile-card2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    /* background: #181818; */ /* Глубокий тёмный фон */
    border: 1px solid #292929;
}

.profile-avatar2 {
    width: 100px;
    height: 100px;
    border-radius: 20%;
    border: 2px solid #3a3a3a;
    background: #2b2b2b;
    object-fit: cover;
}

.profile-name2 {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #e0e0e0; /* Светлый текст */
    text-decoration: none;
}

.profile-group2 {
    margin-top: 6px;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    background: #333; /* По умолчанию тёмный фон, но будет заменён {gp_color} */
}

/* Блок кнопок */
.profile-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* Стили кнопок */
.action-btn {
    display: inline-block;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    transition: background 0.3s, transform 0.2s;
}

.action-btn:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Индивидуальные стили кнопок */
.message-btn {
    background: #4a4a4a;
}

.accept-btn {
    background: #27ae60; /* Зелёная кнопка */
}

.reject-btn {
    background: #c0392b; /* Красная кнопка */
}

.cancel-btn {
    background: #7f8c8d; /* Серо-голубая кнопка */
}
.modal {
    position: fixed;
    top: 0;
    right: 0;
    backdrop-filter: blur(2px);
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;

    overflow: hidden;
    outline: 0;
}

.user-profile-header {
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff0e0;
    text-align: center;
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, rgb(0 0 0 / 90%), rgba(40, 30, 70, 0.85));
    border-color: rgb(46 40 72);
    box-shadow: 0 2px 12px rgb(0 0 0);
    border-radius: 15px;
    border-bottom: 3px solid rgba(180, 170, 200, 0.4);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.user-profile-header:hover {
    transform: translateY(-3px);

}



.user-profile-header:hover::before {
    left: 100%;
}

.popover-content {
    text-align: center;
    width: 270px;
    padding: 18px;
    background: rgba(20, 25, 35, 0.9);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    position: relative;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out;
}
.text_container_oplata{
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    display: flex;
    justify-content: center;
}

.small_achs {
    height: 40px;
    width: 40px;
    margin-right: 15px;
    border: 2px solid #486b91;
    float: left;
}

@media (max-width: 991.99px) {
    .small_achs {
        height: 20px;
        width: 20px;
        margin-right: 15px;
        border: 2px solid #486b91;
    }
}
.small_us_av{
    display: none;
}

#stats .area-label {
    padding: 0;
}

#stats .area-image{
    display: flex;
    justify-content: center;
}
.block_content h3, .block_content h4 {
    color: #4A90E2;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}

.benefits-list {
    list-style-type: none;
    padding-left: 0;
    font-size: 16px;
    color: #037b3b;
}

.benefits-list li {
    margin-bottom: 10px;
}
.first_text_news {
    color: #828282;
    font-weight: 600;
    font-size: 10.5px;
    margin-bottom: -3px
}

.second_text_news {
    font-weight: 600;
    font-size: 11.5px;
    color: #fff;
    padding-left: 1px
}

.short_news {
    color: #7f7f7f;
    line-height: 18px;
    font-size: 11px;
    overflow: hidden;
    max-height: 40px;
    height: 40px;
    width: 300px;
    margin-top: 8px;
    margin-bottom: 22px;
    font-weight: 600;
    text-overflow: ellipsis;
}

.view_news {
    color: #a6adcd;
    gap: 10px;
    display: flex;
    border-radius: 12px;
    width: 60px;
    padding: 6px 12px;
    border: solid 1px #344161;
    font-size: 13px;
    align-items: center
}
.new_news {
    position: absolute;
    z-index: 20;
    background: linear-gradient(34deg,#b86666 0%,#ff8686 55%);
    padding: 1px 9px;
    border-radius: 50px;
    box-shadow: 0 0 20px #fd86862e;
    font-weight: 600;
    text-shadow: #00000096 1px 0 7px;
    font-size: 8.5px;
    color: #fff;
    margin-top: 30px;
    margin-left: 48px
}


.news_delete_news {
    display: flex;
    transition: 0.1s;
    background: #212d47;
    border: solid 1px #212d47;
    padding: 4px 20px;
    font-size: 10px!important;
    color: #5a6a8c!important;
    border-radius: 7px;
    align-items: center;
    justify-content: center
}

.news_delete_news:hover {
    display: flex;
    transition: 0.1s;
    background: #283652;
    border: solid 1px #283652;
    padding: 4px 20px;
    font-size: 10px!important;
    color: #ffffff!important;
    border-radius: 7px;
    align-items: center;
    justify-content: center
}

.news_info {
    display: flex;
    border: double 5px rgb(154 154 154);
    background: rgb(11 9 19 / 1%);
    box-shadow: 0 2px 12px rgb(0 0 0);
    border-radius: 15px;
    width: 180px;
    padding: 14px;
    height: 100%;
    flex-direction: column;
}
.nameHistory {
    line-height: normal;
    font-size: 13px;
    padding: 5px;
    width: auto;
    background: #171a21;
    position: absolute;
    left: 175px;
    top: 40px;
    border-radius: 3px;
    border: 3px solid #171a21;
    box-shadow: 0 0 12px #000000;
    display: none;
}

.nameHistory__item {
    margin-left: 10px;
    padding: 0 12px;
}
.nameHistory__item p {
    padding: 15px 0;
}


.text_info_news {
    color: #5a6a8c;
    font-size: 11px;
    font-weight: 600;
    gap: 7px;
    display: flex;
    align-items: center
}

.text_info_news i {
    color: #fff;
    font-size: 13px;
    font-weight: 100;
    background: linear-gradient(34deg,#c85353 0%,rgb(255 105 105) 55%);
    width: 25px;
    height: 25px;
    display: flex;
    border-radius: 7px;
    align-items: center;
    justify-content: center
}

.text_info_news .bx-time {
    color: #5d6d8e;
    font-size: 13px;
    font-weight: 100;
    background: linear-gradient(213deg,#384665 0%,rgb(51 65 95) 55%);
    width: 25px;
    height: 25px;
    display: flex;
    border-radius: 7px;
    align-items: center;
    justify-content: center
}

.menu_top_push_active {
    display: flex;
    font-weight: 600;
    background: linear-gradient(222deg, #535353 0, #3f3f3f 55%);
    transition: 0.2s;
    cursor: pointer;
    align-items: center;
    margin-right: 5px;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    justify-content: center
}

.flex_info_new {
    display: flex;
    flex-direction: column
}

.flex_new_new {
    display: flex;
    gap: 20px;
    align-items: center

}

.news_block {
    height: 184px;
    display: flex;
       background-color: rgba(10, 10, 26, 0.95);
    border-color: #050505;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    background-size: cover;
    border-radius: 12px;
    border: 1px solid #e3e4e8;
    border-radius: 15px;
    gap: 20px;
    padding: 18px;
    border-radius: 18px;
    margin-bottom: 20px;
    align-items: center;
    justify-content: space-between
}
.news-block-img {/* transform: skewX(354deg); */height: 150px;display: flex;width: 225px;background: #383c4d;border-radius: 16px;flex-direction: column;justify-content: space-between}

.news-block-index {
    height: 100%;
    padding: 16px;
    border-radius: 15px;
    background: #18233a;
    display: flex;
    box-shadow: 0 5px 10px #13151a0a;
    margin-bottom: 30px;
    flex-direction: column
}

.news-block {
    float: right;
    display: flex;
    padding: 3px;
    width: 100%;
    border-radius: 15px 0 0 15px;
    flex-direction: column;
    justify-content: space-between
}

.news-button-bottom i {
    font-size: 15px;
    margin-left: 8px
}

.news-button-bottom {
    cursor: pointer;
    text-align: center;
    display: flex;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 12px 0;
    width: 190px;
    font-weight: 700;
    color: #e6f0ff;
    background: #151e2a;
    border: 2px solid #60a5fa;
    border-radius: 50px;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(10, 20, 40, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.news-button-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgb(255 3 3 / 20%), #d1080800);
    transition: left 0.4s ease;
}

.news-button-bottom:hover {
    transform: translateY(-2px);
    border-color: #8bc2ff;
    box-shadow: 0 4px 12px rgba(10, 20, 40, 0.3);
}

.news-button-bottom:hover::before {
    left: 100%;
}


.news-button-vk {
    cursor: pointer;
    text-align: center;
    display: flex;
    font-size: 13px;
    margin-top: 8px;
    padding: 10px 0;
    width: 100%;
    font-weight: 600;
    background: #252e38;
    color: #ffffff;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    transition: background 0.2s ease, transform 0.2s ease;
    position: relative;
    overflow: hidden;
}

.news-button-vk::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgb(0 141 255 / 29%), transparent);
    transition: left 0.4s ease;
}

.news-button-vk:hover {
    background: #517fa4;
    transform: translateY(-1px);
}

.news-button-vk:hover::before {
    left: 100%;
}
.instruction-list {
    list-style-type: decimal;
    padding-left: 20px;
    font-size: 14px;
    color: #9b9b9b;
}

.instruction-list li {
    margin-bottom: 10px;
}

.block_content .form-group {
    margin-top: 20px;
}

.block_content .input-group-prepend {
    /* background-color: #4A90E2; */
    /* border-color: #4A90E2; */
}

.block_content .form-control {
    border-radius: 5px;
    border-color: #4A90E2;
    box-shadow: none;
}

.color-fix {
    color: #F39C12;
}

.btn-outline-primary {
    color: #fff;
    background-color: #4A90E2;
    border-color: #4A90E2;
}

.btn-outline-primary:hover {
    background-color: #357ABD;
    border-color: #357ABD;
}

.my-button {
    background: radial-gradient(circle, #1a1c26 0%, #050d14 100%);
    color: white;
    border: 2px solid #262836;
    border-radius: 12px;
    padding: 14px 28px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 4px 2px;
    cursor: pointer;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.38);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
}


.my-button:hover {
    background: radial-gradient(circle, #262836 0%, #1a1c26 100%);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.57);
    transform: translateY(-5px);
}

.my-button:hover::before {
    width: 400%;
    height: 400%;
    top: -50%;
    left: -50%;
}

.my-button .button-text {
    position: relative;
    z-index: 1;
}

.my-button:hover .button-text {
    color: #e0f7fa;
}


.my-button i {
    margin-right: 8px;
    font-size: 18px;
}
.service__description .container-oplata i{
    background: radial-gradient(circle, #232323 0%, #232323 100%);
    text-align: center;
    box-shadow: 0px 10px 10px -8px rgb(0 0 0 / 10%);
    margin-left: 5px;
    padding: 7px;
    margin-right: 10px;
    transition: all 0.4s;
    border-radius: 10px;
    font-size: 26px;
    color: #6749c5;
}

.login_social_register_social{
    display: flex;
    width: 100%;
    gap: 15px;
}

.login_social_register_social a{
    display: flex;
    padding: 10px 20px;
    border: 1px solid #454545;
    border-radius: 10px;
    gap: 10px;
    align-items: center;
    width: 100% !important;
    justify-content: center;
    transition: all .3s;
    color: #fff !important;
}

.login_social_register_social a:hover {
    background: #694bca45;
    border: solid 1px #694bca45;
    color: #fff;
    transition: all .3s
}

.login_social_register_header{
    display: flex;
    align-items: center;
    margin-bottom: 1.75rem;
    margin-top: 1.75rem;
}

.login_social_register_header p{
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 0;
    color: #a7a4a4;
    font-size: 13px;
}

.login_social_register_line{
    height: 1px;
    flex: 1;
    background-color: #414141;
}
.container-oplata {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 55px;
    width: 100%;
    border-radius: 12px;
    padding: 0 18px;
    background: linear-gradient(133deg, rgb(32, 31, 39), rgb(58, 57, 65));
    color: #fff;
    font-weight: 600;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.container-oplata::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
    transition: all 0.5s ease-in-out;
    opacity: 0;
}

.container-oplata:hover::before {
    opacity: 1;
    transform: scale(1.2);
}

.container-oplata:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.icon-style {
    font-size: 22px;
    color: #00e816;
    margin-right: 14px;
    transition: color 0.3s ease-in-out;
}

.icon-style1 {
    font-size: 22px;
    color: #ff1e00;
    margin-right: 14px;
    transition: color 0.3s ease-in-out;
}

.container-oplata:hover .icon-style {
    color: #00ff22;
}

.container-oplata:hover .icon-style1 {
    color: #ff3b1e;
}

.name-user span {
    color: #fff;
    font-size: 16px;
    transition: color 0.3s ease-in-out;
}

.container-oplata:hover .name-user span {
    color: #f0f0f0;
}

.popover-content::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 16px;
    height: 16px;
    background: rgba(20, 25, 35, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.popover.show .popover-content {
    opacity: 1;
    transform: translateY(0);
}

.popover-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 153, 255, 0.8);
    margin-bottom: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.popover-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(0, 153, 255, 1);
}

.popover-name {
    color: #fff;
    font-size: 19px;
    text-transform: capitalize;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.logo-zombie {
    width: 32% !important;
    top: 64% !important;
    right: -4% !important;
    transform: translateY(-50%) !important;
}

@media (max-width: 991.99px) {
    .logo-zombie {
        top: 50%;
        transform: translateY(-50%);
        width: 50%;
        right: 0;
    }
}

.popover-link {
    color: #0099ff;
    font-size: 15px;
    text-decoration: none;
    margin-top: 14px;
    display: inline-block;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0, 153, 255, 0.3), rgba(0, 153, 255, 0.1));
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 153, 255, 0.5);
}

.popover-link:hover {
    background: linear-gradient(135deg, rgba(0, 153, 255, 0.5), rgba(0, 153, 255, 0.3));
    color: #4da6ff;
    border: 1px solid rgba(0, 153, 255, 0.8);
}

.inline-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(0, 153, 255, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.inline-avatar:hover {
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(0, 153, 255, 0.9);
}

scrollbar-width: thin;
scrollbar-color: #123370 #0a0f1e;
.friends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 10px;
}



.btn_bans {
    cursor: pointer;
    height: 50px;
    display: flex;
    font-weight: 500;
    border-radius: 11px;
    width: 100%;
    color: #838383;
    align-items: center;
    transition: 0.2s;
    justify-content: center;
    color: #fff;
}

.btn_bans:hover {
    background: linear-gradient(23deg, #FD834D 0%, #CA5C2B 100%);
    box-shadow: 0 10px 40px #e9733f66;
}

.profile-status {
    position: absolute;
    bottom: 4px;
    right: 48px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    border: double 3px #dddddd;
    transition: transform 0.14s ease-in-out, box-shadow 0.11s ease-in-out;
}



/* Общий стиль для кнопок */
.purse_mini,
.promo_mini,
.button_exit_profile,
.button_mini_profile {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    justify-content: flex-start;
    border-radius: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, rgba(11, 9, 19, 0.95), rgba(20, 18, 35, 0.9));
    border: 2px solid rgba(46, 40, 72, 0.8);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(46, 40, 72, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    position: relative;
    color: #d5d3e0;
    overflow: hidden;
}

.purse_mini::before,
.promo_mini::before,
.button_exit_profile::before,
.button_mini_profile::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(70, 60, 110, 0.25), transparent);
    transition: left 0.5s ease;
    z-index: 0;
    border-radius: 15px;
}

/* Иконки слева */
.purse_mini i,
.promo_mini i,
.button_exit_profile i,
.button_mini_profile i {
    font-size: 20px;
    margin-right: 15px;
    transition: color 0.3s ease, transform 0.3s ease;
    z-index: 1;
}

/* Ховер-эффекты */
.purse_mini:hover,
.promo_mini:hover,
.button_exit_profile:hover,
.button_mini_profile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(70, 60, 110, 0.4);
    border-color: rgba(90, 80, 140, 0.9);
    color: #f5c87d;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.purse_mini:hover::before,
.promo_mini:hover::before,
.button_exit_profile:hover::before,
.button_mini_profile:hover::before {
    left: 100%;
}

/* Специфические стили для каждой кнопки */
.purse_mini {
    background: linear-gradient(135deg, rgba(11, 9, 19, 0.95), rgba(20, 18, 35, 0.9));
}

.purse_mini i {
    color: #4a91ff;
}

.purse_mini:hover {
    background: linear-gradient(135deg, rgba(20, 18, 35, 0.95), rgba(40, 35, 70, 0.9));
}

.purse_mini:hover i {
    color: #66a3ff;
    transform: scale(1.2);
}

.promo_mini {
    background: linear-gradient(135deg, rgba(11, 9, 19, 0.95), rgba(20, 18, 35, 0.9));
}

.promo_mini i {
    color: #4a91ff;
}

.promo_mini:hover {
    background: linear-gradient(135deg, rgba(20, 18, 35, 0.95), rgba(40, 35, 70, 0.9));
}

.promo_mini:hover i {
    color: #66a3ff;
    transform: scale(1.2);
}

.button_exit_profile {
    background: linear-gradient(135deg, rgba(11, 9, 19, 0.95), rgba(20, 18, 35, 0.9));
}

.button_exit_profile i {
    color: #ff5a5a;
}

.button_exit_profile:hover {
    background: linear-gradient(135deg, rgba(20, 18, 35, 0.95), rgba(50, 30, 60, 0.9));
}

.button_exit_profile:hover i {
    color: #ff7878;
    transform: scale(1.2);
}

.button_mini_profile {
    background: linear-gradient(135deg, rgba(11, 9, 19, 0.95), rgba(20, 18, 35, 0.9));
}

.button_mini_profile i {
    color: var(--border-color);
}

.button_mini_profile:hover {
    background: linear-gradient(135deg, rgba(20, 18, 35, 0.95), rgba(60, 40, 70, 0.9));
}

.button_mini_profile:hover i {
    color: #ffcc70;
    transform: scale(1.2);
}
.navigation_profile {
    background: transparent;
    display: flex;
    margin-top: -8px;
    height: 40px;
}

/* Аватар */
.img_navigation {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    margin: 3px 8px 2px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Настройки */
.settings_butt {
    font-size: 22px;
    color: #5c6780;
    /* background: linear-gradient(135deg, #6e7a8f, #8b9aa7); */ /* Градиент */
    width: 40px; /* Увеличено для лучшего восприятия */
    height: 40px; /* Увеличено для лучшего восприятия */
    top: -4px;
    position: relative;
    text-align: center;
    line-height: 40px; /* Выравнивание текста по центру */
    border-radius: 50%; /* Закругленные углы */
    transition: transform 0.7s ease-in-out, color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); */ /* Тень для глубины */
}

.settings_butt:hover {
    color: #ffffff;
    transform: rotate(360deg) scale(1.1); /* Эффект увеличения */
}


/* Анимация для онлайн-статуса */
@keyframes pulse-glow {
    0% { transform: scale(1); box-shadow: 0 0 8px rgba(0, 255, 0, 0.8); }
    50% { transform: scale(1.4); box-shadow: 0 0 20px rgba(0, 255, 0, 0.6); }
    100% { transform: scale(1); box-shadow: 0 0 8px rgba(0, 255, 0, 0.8); }
}

.status-online {
    background: radial-gradient(circle, #4CAF50, #2E7D32);
    animation: pulse-glow 2.9s infinite ease-in-out;
}

/* Анимация для оффлайн-статуса */
@keyframes fade-glow {
    0%, 100% { opacity: 0.9; transform: scale(1); box-shadow: 0 0 6px rgba(207, 11, 0, 0.8); }
    50% { opacity: 0.3; transform: scale(1.2); box-shadow: 0 0 15px rgba(207, 11, 0, 0.5); }
}

.status-offline {
    background: radial-gradient(circle, #CF0B00, #7A0000);
    animation: pulse-glow 2.9s infinite ease-in-out;
}


/*monitoring*/
.servers-online-line .progress-bar.bg-danger {
    background-color: rgb(249, 25, 46) !important;
    box-shadow: 0 0px 7px 0 rgb(249, 25, 46);
    background-size: 1rem 1rem;
    border: 0px solid rgb(247, 247, 247);
    border-radius: 0px;
    animation: 1s linear 0s normal none infinite running progress-bar-stripes;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 85%, transparent 85%, transparent);
}
.progress-val {
    position: absolute;
    height: 100%;
    width: 100%;

    text-align: center;
    line-height: 28px !important;
    font-size: 13px;
}
.progress-bar {
    margin: -1px;

    border-radius: 3px 0px 0px 3px;
}
.progress-bar.bg-info {
    background-color: #E1EFFA !important;

    border: 1px solid #CADDED;
}
.progress-bar.bg-success {
    background-color: #E3F5DC !important;
    border: 1px solid #CDE8C3;
}
.progress-bar.bg-warning {
    background-color: rgb(255, 240, 210) !important;
    border: 1px solid rgb(232, 221, 202);
}
.progress-bar.bg-danger {
    background-color: #FCE3E3 !important;
    border: 1px solid #E8CACA;
}

.progress.servers-online-line {
    border-radius: 15px;
}


.servers-online-line .progress-bar.bg-warning,
.servers-online-line .progress-bar.bg-success,
.servers-online-line .progress-bar.bg-info {
    background-size: 500% 500%;
    background-image: linear-gradient(135deg, var(--border-color), #3b3b3b, var(--border-color), #272626);
    animation: dark-flow 6s ease-in-out infinite;
    border-radius: 5px;
    border-color: rgb(72 72 72 / 0%)!important;
    box-shadow: 0 0 15px rgba(0, 31, 63, 0.9);
}

/* Глобальный стиль для прогресс-бара */
.servers-online-line .progress {
    background-color: #0d0d0d; /* Глубокий чёрный фон */
    border-radius: 12px;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
}

/* Анимация глубоких переливов */
@keyframes dark-flow {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 100%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.block-card {
    position: relative;
    overflow: hidden;
    border-radius: 15px; /* Немного больше радиус скругления для плавных углов */
}

.block-card:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    background: linear-gradient(135deg,
    #1e3c72, /* темно-синий */
    #2a5298, /* насыщенный синий */
    #3b7dbf, /* яркий синий */
    #6a92d1, /* светло-синий */
    #9b58d1, /* фиолетовый с оттенком синего */
    #f56d92, /* ярко-розовый */
    #ff914d  /* оранжевый */
    );
    background-size: 400% 400%;
    clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}

.block-card:after {
    animation: gradient-animation 5s ease-in-out infinite;
}
.status-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.online {
    background-color: #00ff7f;
    box-shadow: 0 0 12px #00ff7f, 0 0 24px rgba(0, 255, 127, 0.8);
    animation: online-pulse 1s infinite alternate;
}

.offline {
    background-color: #e00900;
    box-shadow: 0 0 10px #e00900, 0 0 20px rgba(224, 9, 0, 0.8);
    animation: offline-pulse 0.8s infinite alternate;
}

.status-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.6;
    filter: blur(8px);
    z-index: -1;
}

.online::after {
    background-color: rgba(0, 255, 127, 0.4);
}

.offline::after {
    background-color: rgba(224, 9, 0, 0.4);
}

@keyframes online-pulse {
    0% { box-shadow: 0 0 10px rgba(0, 255, 127, 0.6), 0 0 20px rgba(0, 255, 127, 0.8); }
    100% { box-shadow: 0 0 18px rgba(0, 255, 127, 0.9), 0 0 30px rgba(0, 255, 127, 1); }
}

@keyframes offline-pulse {
    0% { box-shadow: 0 0 8px rgba(224, 9, 0, 0.6), 0 0 16px rgba(224, 9, 0, 0.8); }
    100% { box-shadow: 0 0 16px rgba(224, 9, 0, 1), 0 0 26px rgba(224, 9, 0, 1); }
}

.profile-container {
    margin-bottom: 20px;
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #03030300;
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    font-family: Arial, sans-serif;
    text-align: center;
    position: relative;
    /* box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); */
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 9%;
    margin-bottom: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-info {
    margin-top: 10px;
    width: 100%;
}

.profile-info .group-color {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.group-color:hover {
    color: #66bb6a;
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
}

.profile-balance {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    width: 100%;

    border-radius: 10px;
background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 10%, transparent), transparent);
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
}

.profile-balance li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px;
    /* background: rgba(255, 255, 255, 0.08); */
    border-radius: 8px;
    transition: background 0.2s ease;
    cursor: pointer;
    flex: 1;
}

.profile-balance li a {
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

/* Компактный стиль для иконок */
.balance-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e1e1e;
    border-radius: 10px;
    border: double 3px #414141;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
}

.balance-icon i {
    font-size: 17px;
    color: #aeaba7;
}


.user-profile-grid {
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    padding: 15px;
    background-color: rgb(10 10 26);
    border-color: #050505;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
    background-size: cover;
    border-radius: 12px;
    box-sizing: border-box;
}

.user-profile-row {
    display: flex;
    align-items: center;
    border-radius: 25px;
    justify-content: flex-start;
    width: 100%;
    padding: 12px;
  background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 10%, transparent), transparent);

    border-radius: 20px;
    color: #c7d5e0;
    font-family: "Motiva Sans", Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.05);
    transition: all 0.15s ease;
}

.user-profile-row:hover {
    transform: translateY(-3px);
}



.full-width {
    grid-column: span 2;
}

.icon-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    color: #dbdbdb;
    /* border: 2px dashed var(--border-color); */
}

.user-profile-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-left: 30px;
}

.user-profile-row i {
    font-size: 2rem;
    color: #c8c5d0;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
    transition: color 0.4s ease, transform 0.4s ease;
}

.user-profile-row:hover i {
    color: #ffd1a3;
    transform: scale(1.1);
}

.user-profile-row h4 {
    font-size: 1.5rem;
    color: rgb(210, 210, 220);
    margin: 0;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: color 0.4s ease;
}

.user-profile-row:hover h4 {
    color: #fff0e0;
}

.user-profile-value {
    font-size: 1.4rem;
    color: #ffd1a3;
    background: linear-gradient(90deg, #ffd1a3, #ff9e5e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s ease;
}

.user-profile-row:hover .user-profile-value {
    transform: translateX(5px);
}

@media (max-width: 991.99px) {
    .user-profile-grid {


    }
    .user-profile-row {
        flex-direction: column;
        align-items: center;
        padding: 20px;
        border-radius: 20px;
    }

    .icon-box {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .user-profile-content {
        align-items: center;
        margin-left: 0;
        gap: 12px;
    }

    .user-profile-row h4 {
        font-size: 1.3rem;
    }

    .user-profile-value {
        font-size: 1.2rem;
    }
}

@media (max-width: 575.99px) {
    .user-profile-row {
        padding: 15px;
    }

.icon-box {
    width: 30px;
    height: 30px;
    padding-top: 23px;
    padding-right: -4px;
    padding-bottom: 5px;
    padding-left: 12px;
    box-sizing: border-box;
}

    .user-profile-row i {
        font-size: 1.7rem;
    }

    .user-profile-row h4 {
        font-size: 1.2rem;
    }

    .user-profile-value {
        font-size: 1.1rem;
    }
}

@media (max-width: 991.99px) {
    .card-payments {
        padding: 20px;
    }

    .tabs-paymentss {
        flex-direction: column;
        gap: 15px;
    }

    .tab-paymentt, .tab-method {
        width: 100%;
        padding: 15px;
        border-right: none;
    }

    .payment-item {
        font-size: 12px;
        /* padding: 10px 15px; */
    }

    .payment-icon {
        width: 73px;
        height: 40px;
    }

    .select-method-body {
        padding: 20px;
    }

    .checkout-content {
        padding: 20px;
    }

    .refill-sum-enter {
        grid-template-columns: 1fr;
        height: auto;
    }

    .sum-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .block_input_ps input {
        padding-right: 50px;
    }

    details {
        width: 100%;
        margin: 0;
    }
}
.social-item {
    display: flex;
    align-items: center;
    padding: 10px;
margin-bottom: 10px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.social-item:hover {
    background: #3b3b3b;
}

.social-icon {
    font-size: 30px;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.social-link {
    font-weight: bold;
    font-size: 18px;
    transition: color 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    text-decoration: underline;
}

.steam-avatar {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.steam-avatar:hover {
    transform: scale(1.1);
}

.steam-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Telegram */
.social-item.telegram {
    transform: skewX(348deg);
    background: linear-gradient(135deg, #0088cc 0%, #1d2528 100%);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.social-item.telegram::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2196F3 0%, #0088cc 100%);
    transition: left 0.8s ease;
    z-index: 0;
}

.social-item.telegram:hover::before {
    left: 0;
}

.social-icon.telegram, .social-link.telegram {
    position: relative;
    z-index: 1;
    color: #ffffff;
}

.social-link.telegram:hover {
    color: #e0f7fa;
}

/* Discord */
.social-item.discord {
    transform: skewX(348deg);
    background: linear-gradient(135deg, #5865F2 0%, #2C2F33 100%);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.social-item.discord::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #5865F2 0%, #5865F2 100%);
    transition: left 0.8s ease;
    z-index: 0;
}

.social-item.discord:hover::before {
    left: 0;
}

.social-icon.discord, .social-link.discord {
    position: relative;
    z-index: 1;
    color: #ffffff;
}

.social-link.discord:hover {
    color: #c7d4f0;
}

/* Steam */
.social-item.steam {
    transform: skewX(348deg);
    background: linear-gradient(135deg, #7289da8c 0%, #1c1e28 100%);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.social-item.steam::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #7289da6e 0%, #7289da4a 100%);
    transition: left 0.9s ease;
    z-index: 0;
}

.social-item.steam:hover::before {
    left: 0;
}

.social-icon.steam, .social-link.steam {
    position: relative;
    z-index: 1;
    color: #ffffff;
}

.social-link.steam:hover {
    color: #b2b2b2;
}
.card img {
    max-width: 100%;
    border-radius: 15px;
    margin-bottom: 20px;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); */
}

.card-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

.card:hover .card-content {
    opacity: 1;
    max-height: 500px; /* Достаточное значение для отображения содержимого */
}
.cases-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки равной ширины */
    gap: 20px; /* Расстояние между кейсами */
    width: 100%;
    max-width: 700px; /* Ограничиваем общую ширину для аккуратности */
    margin: 0 auto;
    padding: 10px;
}

.case-box {
    position: relative;
    width: 100%;
      background-image: linear-gradient(181deg,
 color-mix(in srgb, var(--border-color) 10%, transparent), transparent);
    /* border: double 3px var(--border-color)!important; */
    /* box-shadow: var(--box-shadow)!important; */
    border-radius: 15px;
    padding: 15px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(46, 40, 72, 0.2); */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    text-align: center;
}

.case-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(70, 60, 110, 0.4);
    border-color: rgba(90, 80, 140, 0.9);
}

.case-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(70, 60, 110, 0.25), transparent);
    transition: left 0.5s ease;
    z-index: 0;
    border-radius: 15px;
}

.case-box:hover::before {
    left: 100%;
}

.case-inner {
    position: relative;
    z-index: 1;
}

.case-title {
    color: #51e101;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 0 5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background: linear-gradient(90deg, #00fe39, #f5f5f5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.case-image {
    width: 130px;
    height: 100px;
    border-radius: 10px;
    /* box-shadow: 0 3px 10px rgb(0 0 0 / 92%); */
    transition: transform 0.3s ease;
}

.case-box:hover .case-image {
    transform: scale(1.05);
}

.case-prize {
    color: #b0adc5;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.case-date {
    color: #b0adc5;
    font-size: 12px;
    font-weight: 400;
    padding: 5px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Адаптивность для меньших экранов */
@media (max-width: 768px) {
    .cases-container {
        grid-template-columns: repeat(2, 1fr); /* 2 в ряд на планшетах */
    }
}

@media (max-width: 480px) {
    .cases-container {
        grid-template-columns: 1fr; /* 1 в ряд на телефонах */
    }
}
.user-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.user-avatar {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-bottom: 20px;
    border: 4px solid #ffb742;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

.user-avatar:hover {
    transform: scale(1.05);
}
.user-info-row {
    background: #1e1e2e;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: background 0.3s ease;
    text-align: center;
    width: 100%;
}

.user-info-row:hover {
    background: #262836;
}

.user-info-row h4 {
    font-size: 1.2rem;
    color: #ffb742;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.user-info-row h4 i {
    margin-right: 10px;
}

.user-info-value {
    font-size: 1.2rem;
    color: #fff;
}

@media (max-width: 991.99px) {
    .user-avatar {
        width: 100px;
        height: 100px;
    }

    .user-info-row {
        padding: 9px;
    }

    .user-info-row h4 {
        font-size: 10px;
    }

    .user-info-value {
        font-size: 11px;
    }
}

.glass-btn {
    position: relative;
    width: 256px;
    height: 70px;
    margin: 20px;
    display: inline-block;
    text-align: center;
    perspective: 1000px; /* Добавляет глубину для эффектов */
}

.glass-btn-1 {
    position: relative;
    width: 150px;
    height: 65px;
    margin: 20px;
    display: inline-block;
    text-align: center;
    perspective: 1000px;
}

.glass-btn a,
.glass-btn-1 a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(11, 9, 19, 0.95), rgba(20, 18, 35, 0.9));
    border: 3px solid rgba(46, 40, 72, 0.8);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(46, 40, 72, 0.2);
    padding: 0 15px;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    color: #d5d3e0;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 14px;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, letter-spacing 0.3s ease, color 0.3s ease;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.glass-btn:hover a,
.glass-btn-1:hover a {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7), inset 0 0 15px rgba(70, 60, 110, 0.4);
    border-color: rgba(90, 80, 140, 0.9);
    letter-spacing: 3px;
    color: #f5c87d;
}

.glass-btn a::before,
.glass-btn-1 a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(70, 60, 110, 0.3), transparent);
    transition: left 0.5s ease;
    z-index: 0;
    border-radius: 12px;
}

.glass-btn:hover a::before,
.glass-btn-1:hover a::before {
    left: 100%;
}

.glass-btn a::after,
.glass-btn-1 a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(70, 60, 110, 0.5);
    border-radius: 12px;
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.glass-btn:hover a::after,
.glass-btn-1:hover a::after {
    width: 100%;
    height: 100%;
}

.glass-btn::before,
.glass-btn-1::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    width: 50px;
    height: 10px;
    background: linear-gradient(90deg, rgba(90, 80, 140, 0.8), rgba(46, 40, 72, 0.6));
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(90, 80, 140, 0.5);
    transition: all 0.3s ease;
    z-index: 0;
}

.glass-btn:hover::before,
.glass-btn-1:hover::before {
    bottom: 0;
    height: 60%;
    width: 85%;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(90, 80, 140, 0.7);
}

.glass-btn::after,
.glass-btn-1::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -5px;
    width: 50px;
    height: 10px;
    background: linear-gradient(90deg, rgba(90, 80, 140, 0.8), rgba(46, 40, 72, 0.6));
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(90, 80, 140, 0.5);
    transition: all 0.3s ease;
    z-index: 0;
}
.werhs {
    background: rgb(19 25 33);
    padding: 7px;
    margin: 0px;
    border-radius: 5px;
}

.nuwes {
    background: #131921;
    padding: 15px 15px;
    border-radius: 11px;
    margin-top: -10px;
}

.welcome {
    float: left;
    font-size: 13px;
    position: relative;
    top: 1px;
    border-radius: 5px;
    padding: 3px;
    padding-left: 20px;
    margin-left: 15px;
    padding-right: 20px;
    background: #131921;
    color: white !important;
}
@media (max-width: 991px) {
    .welcome {
        display: none;
    }
}

.header .container > button i:first-child {
    margin-right: 4px;
    color: rgb(255 255 255);
    transform: translate(0px, 1px);
}

.navbar_first {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  height: 65px;
  width: 100%;
  position: relative;
  background-color: var(--navbar-first-color);
  border-bottom: solid 1px var(--fon);
  align-items: center;
  justify-content: space-between;
}

.navbar_second {
  width: 100%;
  height: 60px;
  z-index: 10000;
  margin-bottom: 30px;
  display: flex;
  background-color: var(--fon);
  /* border: solid 2px var(--navbar-first-color); */
  /* box-shadow: 0 0 10px rgb(0 0 0 / 50%); */
}

.navbar_second .submenu-link {
  font-weight: 600;
  font-size: 8px;
  position: relative;
  text-transform: uppercase;
}


@media(max-width: 1100px) {
  .navbar_second {
    display: none;
  }

  .navbar_first {
    padding-left: 15px;
    box-shadow: 0 0 10px rgb(0 0 0 / 50%);
  }

  .modular-container {
    margin-top: 30px;
  }

  .logotip-project {
    display: none;
  }

  .blocks-navbar.stats-project {
    display: none;
  }

  #search_engine {
    display: none;
  }
}


@media(min-width: 1100px) {

  .navbar_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }

  #button_open {
    display: none;
  }

  .open_menu {
    display: none !important;
  }
}

.navbar_second .submenu-link .active-menu {
  color: var(--span-color);
}

.navbar_second .submenu-link .active-menu svg {
  fill: var(--span-color);
}

.navbar_second .submenu-link:before {
  content: "";
  opacity: 0;
  display: flex;
  position: absolute;
  bottom: -15px;
  height: 2px;
  width: 100%;
  background-color:var(--border-color);
  transition: .5s;
}

.navbar_second .submenu-link:hover:before {
  opacity: 1;
}

.navbar_second .submenu-link .active-menu:before {
  content: "";
  display: flex;
  position: absolute;
  bottom: -15px;
  height: 2px;
  width: 100%;
  background-color: var(--border-color);
}

.navbar_second .submenu-link a svg {
  height: 15px;
  transition: .5s;
  fill: #ffffff80;
}

.navbar_second .submenu-link a:hover {
  color: var(--span-color);
}

.navbar_second .submenu-link a:hover svg {
  fill: var(--border-color);
}

.navbar_second .submenu-link a {
  display: grid;
  gap: 5px;
  cursor: pointer;
  position: relative;
  color: var(--border-color);
  transition: .5s;
  justify-items: center;
}

.navbar_second .submenu-link a {
  width: 90px;
  height: 30px;
}

.navbar_second .submenu-link:hover .submenuggwp {
  transition: .5s ease-in-out;
  opacity: 1;
  transform: scaleY(1);
}

.blocks-navbar .submenu-link {
  position: relative;
}

.container.navbar_flex {
  gap: 30px;
}

.navbar_second .submenu-link-left {
  display: flex;
  gap: 40px;
  flex: 1 1;
  justify-content: flex-end;
}

.navbar_second .submenu-link-right {
  display: flex;
  gap: 35px;
  flex: 1 1;
  justify-content: flex-start;
}

.navbar_second .submenu-link-home {
  display: flex;
  flex-shrink: 0;
}

.navbar_second .submenu-link-home svg {
  height: 30px;
  fill: #fff;
  transition: .5s;
}

.navbar_second .submenu-link-home svg defs stop {
  stop-color: var(--span-color);
  transition: .5s;
}

.navbar_second .submenu-link-home svg g g {
  fill: var(--color-default);
  transition: .5s;
}

.navbar_second .submenu-link-home:hover svg g g {
  fill: var(--span-color);
}

.submenu-secondggwp {
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 9px;
  cursor: help;
}
.usersframeonlinee{
    position: absolute;
    left: 24px !important;
    width: 50px !important;
    height: 46px !important;
    margin-top: 0px !important;
    border-radius: 0px !important;
}
.submenuggwp {
  top: 93px;
  margin-left: -48px;
  position: fixed;
  transform-origin: 0 0;
  transition: .5s ease-in-out;
  opacity: 0;
  z-index: 1;
  transform: scaleY(0);
  background-color: var(--navbar-first-color);
}

@media (min-width: 992px) {
    .wapper .header .collapsible-menu {
        display:none;
    }
}

.area{
  position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  animation: animStar 100s linear infinite;
  box-shadow: 1036px 1770px #fff, 430px 55px #fff, 402px 779px #fff,
  1744px 367px #fff, 599px 831px #fff, 692px 2568px #fff, 1445px 2488px #fff,
  47px 2056px #fff, 175px 1242px #fff, 2258px 1198px #fff, 1885px 883px #fff,
  1925px 1538px #fff, 1441px 308px #fff, 461px 2362px #fff, 2290px 323px #fff,
  2166px 1110px #fff, 637px 1288px #fff, 1637px 1276px #fff, 779px 510px #fff,
  218px 700px #fff, 10px 859px #fff, 1529px 1497px #fff, 884px 1804px #fff,
  2069px 2636px #fff, 1675px 2608px #fff, 2227px 2315px #fff,
  2451px 2013px #fff, 954px 2165px #fff, 321px 1786px #fff, 1991px 2500px #fff,
  1814px 305px #fff, 2312px 1731px #fff, 845px 1275px #fff, 404px 912px #fff,
  816px 998px #fff, 2573px 1085px #fff, 1899px 79px #fff, 472px 445px #fff,
  2120px 210px #fff, 119px 79px #fff, 2065px 215px #fff, 1647px 2427px #fff,
  2586px 780px #fff, 996px 2374px #fff, 2642px 1558px #fff, 1730px 1645px #fff,
  1381px 454px #fff, 2108px 1969px #fff, 1323px 1393px #fff, 696px 1239px #fff,
  284px 549px #fff, 2262px 1729px #fff, 1379px 2145px #fff, 2488px 1324px #fff,
  1808px 2174px #fff, 1476px 1746px #fff, 547px 2371px #fff, 2592px 235px #fff,
  1200px 2465px #fff, 931px 2574px #fff, 502px 166px #fff, 409px 1109px #fff,
  1486px 1279px #fff, 1795px 2565px #fff, 1038px 2408px #fff, 746px 182px #fff,
  1006px 1526px #fff, 2221px 2632px #fff, 456px 982px #fff, 1256px 1057px #fff,
  766px 2530px #fff, 1433px 1909px #fff, 2105px 598px #fff, 1816px 630px #fff,
  395px 2491px #fff, 255px 215px #fff, 2159px 2171px #fff, 78px 602px #fff,
  109px 2489px #fff, 2570px 662px #fff, 2614px 2625px #fff, 2626px 2245px #fff,
  1036px 417px #fff, 2471px 2052px #fff, 97px 2004px #fff, 2251px 1296px #fff,
  2238px 143px #fff, 2351px 2199px #fff, 869px 18px #fff, 657px 227px #fff,
  2246px 2520px #fff, 2207px 349px #fff, 1371px 1200px #fff, 1599px 1852px #fff,
  1772px 1889px #fff, 1480px 54px #fff, 1603px 2187px #fff, 1762px 2174px #fff,
  188px 516px #fff, 760px 285px #fff, 2041px 393px #fff, 1887px 541px #fff,
  1834px 1333px #fff, 437px 623px #fff, 2382px 2197px #fff, 1243px 2396px #fff,
  1768px 2420px #fff, 559px 2570px #fff, 1101px 485px #fff, 365px 420px #fff,
  940px 1276px #fff, 2134px 2066px #fff, 831px 77px #fff, 953px 2257px #fff,
  2219px 327px #fff, 2560px 428px #fff, 1534px 2397px #fff, 2565px 392px #fff,
  1659px 319px #fff, 1389px 2334px #fff, 220px 1252px #fff, 2511px 2358px #fff,
  901px 2610px #fff, 1822px 756px #fff, 2625px 1862px #fff, 2375px 611px #fff,
  67px 408px #fff, 1042px 1862px #fff, 970px 1673px #fff, 2276px 522px #fff,
  553px 226px #fff, 2390px 2569px #fff, 760px 291px #fff, 2070px 2468px #fff,
  289px 10px #fff, 462px 1774px #fff, 623px 549px #fff, 512px 2311px #fff,
  1804px 2417px #fff, 319px 1252px #fff, 329px 2456px #fff, 2041px 1071px #fff,
  313px 2013px #fff, 1900px 2069px #fff, 97px 2171px #fff, 1859px 1490px #fff,
  892px 1730px #fff, 1867px 2211px #fff, 984px 1353px #fff, 2128px 501px #fff,
  1044px 683px #fff, 148px 1441px #fff, 2546px 2509px #fff, 1945px 2457px #fff,
  913px 1482px #fff, 1686px 2351px #fff, 2299px 1895px #fff,
  1707px 1359px #fff, 1065px 1295px #fff, 2626px 1751px #fff, 1800px 1109px #fff,
  1923px 1973px #fff, 1706px 2375px #fff, 14px 695px #fff, 2449px 313px #fff,
  1802px 869px #fff, 570px 9px #fff, 1373px 1500px #fff, 208px 395px #fff,
  724px 844px #fff, 69px 1436px #fff, 1099px 2021px #fff, 1490px 651px #fff,
  11px 410px #fff, 2319px 2109px #fff, 1348px 554px #fff, 2040px 696px #fff,
  1274px 734px #fff, 1865px 1989px #fff, 514px 934px #fff, 2024px 728px #fff,
  1802px 375px #fff, 2037px 799px #fff, 2444px 1050px #fff, 385px 344px #fff,
  392px 795px #fff, 2129px 716px #fff, 2076px 1691px #fff, 45px 2556px #fff,
  1361px 722px #fff, 621px 490px #fff, 960px 442px #fff, 2628px 1669px #fff,
  1018px 1307px #fff, 2104px 1709px #fff, 15px 680px #fff, 820px 1875px #fff,
  907px 767px #fff, 1774px 1912px #fff, 583px 434px #fff, 2150px 2209px #fff,
  895px 171px #fff, 1056px 1251px #fff, 1843px 2529px #fff, 49px 1799px #fff,
  1951px 1799px #fff, 553px 23px #fff, 248px 457px #fff, 266px 2524px #fff,
  1983px 2153px #fff, 1078px 461px #fff, 1228px 2429px #fff, 1256px 288px #fff,
  2307px 1633px #fff, 504px 2513px #fff, 105px 1012px #fff, 1097px 2443px #fff,
  2633px 2072px #fff, 1739px 2092px #fff, 1979px 2295px #fff,
  508px 1606px #fff, 694px 791px #fff, 1698px 2524px #fff, 470px 734px #fff,
  214px 2372px #fff, 816px 333px #fff, 699px 2096px #fff, 22px 281px #fff,
  238px 1324px #fff, 621px 1606px #fff, 2585px 2444px #fff, 1516px 1453px #fff,
  1141px 1339px #fff, 266px 1415px #fff, 562px 2612px #fff, 2586px 583px #fff,
  1831px 916px #fff, 1489px 1911px #fff, 2495px 888px #fff, 1206px 1760px #fff,
  456px 2628px #fff, 2415px 1996px #fff, 2459px 235px #fff, 860px 121px #fff,
  2638px 1345px #fff, 1776px 1729px #fff, 170px 861px #fff, 405px 1409px #fff,
  1760px 1098px #fff, 1679px 1747px #fff, 2395px 836px #fff, 2146px 2068px #fff,
  2173px 119px #fff, 2131px 601px #fff, 1185px 2638px #fff, 2069px 2534px #fff,
  160px 90px #fff, 2229px 2279px #fff, 686px 1244px #fff, 2589px 1984px #fff,
  1935px 2020px #fff, 59px 800px #fff, 272px 1381px #fff, 1054px 228px #fff,
  2077px 2312px #fff, 1404px 146px #fff, 2010px 504px #fff, 2387px 2155px #fff,
  2457px 807px #fff, 348px 2286px #fff, 634px 1318px #fff, 642px 1174px #fff,
  1647px 1592px #fff, 1989px 860px #fff, 2193px 33px #fff, 1983px 2588px #fff,
  158px 1324px #fff, 238px 1957px #fff, 1783px 1074px #fff, 2081px 2261px #fff,
  541px 2053px #fff, 2332px 474px #fff, 1713px 1304px #fff, 1199px 2656px #fff,
  2334px 2218px #fff, 247px 1166px #fff, 1598px 2503px #fff, 613px 1613px #fff,
  1862px 994px #fff, 2618px 2525px #fff, 1075px 694px #fff, 683px 1621px #fff,
  497px 365px #fff, 1247px 2624px #fff, 474px 734px #fff, 191px 2290px #fff,
  2090px 1212px #fff, 534px 2471px #fff, 2053px 1589px #fff, 887px 1671px #fff,
  966px 1989px #fff, 1320px 308px #fff, 2356px 416px #fff, 1383px 2114px #fff,
  1601px 2624px #fff, 1686px 105px #fff, 2068px 1393px #fff, 1311px 2270px #fff,
  1300px 2274px #fff, 948px 478px #fff, 541px 1147px #fff, 613px 978px #fff,
  377px 2138px #fff, 136px 571px #fff, 1706px 1754px #fff, 1299px 1577px #fff,
  2614px 2016px #fff, 1711px 1501px #fff, 93px 1460px #fff, 1581px 1182px #fff,
  1497px 2306px #fff, 410px 1718px #fff, 1169px 1016px #fff, 86px 629px #fff,
  1333px 2605px #fff, 875px 1052px #fff, 534px 2096px #fff, 46px 827px #fff,
  703px 2113px #fff, 218px 885px #fff, 2495px 1715px #fff, 2049px 699px #fff,
  359px 1725px #fff, 585px 1150px #fff, 1995px 1066px #fff, 242px 2332px #fff,
  1681px 1186px #fff, 361px 1661px #fff, 1714px 2041px #fff, 252px 2189px #fff,
  1270px 321px #fff, 1936px 2124px #fff, 2296px 2637px #fff, 844px 1065px #fff,
  300px 605px #fff, 1856px 2274px #fff, 1129px 2477px #fff, 315px 1681px #fff,
  1115px 186px #fff, 1492px 977px #fff, 1702px 19px #fff, 1752px 321px #fff,
  2419px 1526px #fff, 442px 1851px #fff, 2592px 735px #fff, 2497px 1771px #fff,
  621px 728px #fff, 2409px 1439px #fff, 1419px 256px #fff, 323px 207px #fff,
  642px 2149px #fff, 2279px 1240px #fff, 1009px 2394px #fff, 2423px 1323px #fff,
  2496px 760px #fff, 772px 1441px #fff, 142px 973px #fff, 853px 2443px #fff,
  220px 1985px #fff, 2068px 263px #fff, 1089px 408px #fff, 1259px 458px #fff,
  1099px 297px #fff, 1232px 1854px #fff, 718px 621px #fff, 1453px 538px #fff,
  1516px 1232px #fff, 172px 703px #fff, 43px 2633px #fff, 1525px 2211px #fff,
  2149px 1909px #fff, 702px 944px #fff, 1061px 1463px #fff, 671px 1968px #fff,
  1195px 852px #fff, 2538px 2592px #fff, 1743px 1282px #fff, 1302px 1730px #fff,
  1852px 1288px #fff, 2384px 2508px #fff, 388px 474px #fff, 1590px 2284px #fff,
  1715px 2652px #fff, 714px 2624px #fff, 1570px 2226px #fff,
  2314px 2082px #fff, 1738px 352px #fff, 1226px 694px #fff, 2516px 627px #fff,
  510px 2322px #fff, 521px 1460px #fff, 860px 728px #fff, 518px 1992px #fff,
  1657px 183px #fff, 970px 1165px #fff, 255px 1957px #fff, 2380px 2379px #fff,
  1234px 413px #fff, 1666px 2190px #fff, 993px 2554px #fff, 2076px 1363px #fff,
  2038px 1718px #fff, 2640px 259px #fff, 968px 969px #fff, 2276px 2574px #fff,
  680px 2283px #fff, 2032px 642px #fff, 416px 2183px #fff, 373px 2459px #fff,
  1611px 1062px #fff, 578px 1584px #fff, 1891px 812px #fff, 2284px 2612px #fff,
  546px 1255px #fff, 279px 845px #fff, 1997px 1722px #fff, 1907px 464px #fff,
  1022px 79px #fff, 993px 1400px #fff, 1049px 670px #fff, 1909px 1681px #fff,
  2517px 1629px #fff, 1854px 2378px #fff, 1473px 1751px #fff,
  2225px 1855px #fff, 1135px 1343px #fff, 2267px 106px #fff, 2471px 196px #fff,
  2299px 457px #fff, 1846px 883px #fff, 1190px 539px #fff, 1967px 208px #fff,
  1916px 1538px #fff, 734px 2527px #fff, 686px 484px #fff, 2190px 251px #fff,
  1897px 1424px #fff, 1044px 969px #fff, 1436px 2274px #fff, 670px 271px #fff,
  1565px 2157px #fff, 873px 45px #fff, 1723px 1461px #fff, 329px 239px #fff,
  1611px 2085px #fff, 887px 2077px #fff, 924px 1118px #fff, 2138px 1658px #fff,
  998px 1173px #fff, 115px 222px #fff, 807px 1819px #fff, 1812px 1599px #fff,
  2441px 421px #fff, 2218px 2264px #fff, 1103px 1534px #fff, 2288px 1859px #fff,
  2129px 1702px #fff, 1298px 1162px #fff, 2318px 337px #fff, 1356px 2413px #fff,
  2221px 2348px #fff, 2513px 977px #fff, 1834px 180px #fff, 2479px 924px #fff,
  273px 1283px #fff, 1867px 2569px #fff, 2557px 1808px #fff, 328px 907px #fff,
  690px 2271px #fff, 857px 997px #fff, 1548px 1601px #fff, 1109px 429px #fff,
  228px 1795px #fff, 283px 1292px #fff, 2443px 252px #fff, 379px 2401px #fff,
  1392px 1727px #fff, 2058px 1097px #fff, 2300px 430px #fff, 1790px 2538px #fff,
  1026px 359px #fff, 458px 1582px #fff, 635px 1905px #fff, 1967px 33px #fff,
  2652px 2433px #fff, 2319px 973px #fff, 26px 2174px #fff, 917px 2387px #fff,
  2120px 756px #fff, 770px 325px #fff, 1859px 974px #fff, 542px 1798px #fff,
  2359px 159px #fff, 1532px 1822px #fff, 2258px 2407px #fff, 944px 1928px #fff,
  884px 380px #fff, 655px 2287px #fff, 1045px 6px #fff, 847px 1516px #fff,
  1016px 430px #fff, 1232px 412px #fff, 1247px 1893px #fff, 2505px 989px #fff,
  1214px 614px #fff, 2435px 2574px #fff, 2030px 331px #fff, 47px 1836px #fff,
  2124px 772px #fff, 2034px 472px #fff, 1262px 610px #fff, 1062px 1101px #fff,
  321px 1956px #fff, 869px 1060px #fff, 1058px 790px #fff, 1815px 901px #fff,
  1000px 30px #fff, 2167px 719px #fff, 1306px 95px #fff, 2304px 2435px #fff,
  27px 547px #fff, 1030px 1327px #fff, 445px 2586px #fff, 351px 775px #fff,
  210px 1743px #fff, 702px 218px #fff, 2630px 763px #fff, 953px 1599px #fff,
  976px 2116px #fff, 2068px 1090px #fff, 21px 2584px #fff, 2161px 1565px #fff,
  1643px 917px #fff, 2108px 2114px #fff, 2310px 2298px #fff, 958px 928px #fff,
  2399px 1577px #fff, 220px 1303px #fff, 2460px 305px #fff, 438px 2276px #fff,
  126px 1060px #fff, 2590px 1433px #fff, 623px 1248px #fff, 1687px 2525px #fff,
  1270px 1622px #fff, 1512px 1429px #fff, 414px 1719px #fff, 1311px 2343px #fff,
  1466px 1646px #fff, 569px 2650px #fff, 472px 758px #fff, 1299px 2441px #fff,
  1855px 1452px #fff, 367px 1214px #fff, 2318px 872px #fff, 1028px 667px #fff,
  2242px 1758px #fff, 2016px 2586px #fff, 1774px 666px #fff, 353px 207px #fff,
  605px 871px #fff, 1061px 95px #fff, 1408px 1674px #fff, 1864px 2243px #fff,
  313px 1767px #fff, 1935px 1045px #fff, 194px 1633px #fff, 2461px 1094px #fff,
  1412px 133px #fff, 1622px 1267px #fff, 26px 2428px #fff, 47px 1413px #fff,
  2028px 449px #fff, 1050px 2022px #fff, 985px 1461px #fff, 383px 1980px #fff,
  931px 1409px #fff, 518px 1424px #fff, 546px 1377px #fff, 2464px 1425px #fff,
  1923px 1443px #fff, 1548px 1162px #fff, 1228px 1230px #fff, 387px 360px #fff,
  1671px 2612px #fff, 2101px 1798px #fff, 2004px 1617px #fff, 280px 1271px #fff,
  1310px 1589px #fff, 1296px 2181px #fff, 688px 134px #fff, 881px 1855px #fff,
  1215px 707px #fff, 192px 1755px #fff, 91px 1858px #fff, 1306px 695px #fff,
  341px 964px #fff, 2126px 1105px #fff, 2175px 2012px #fff, 1662px 1540px #fff,
  1505px 803px #fff, 243px 135px #fff, 1405px 422px #fff, 1658px 2440px #fff,
  2637px 1476px #fff, 1432px 1935px #fff, 1224px 2354px #fff, 1071px 1795px #fff,
  2577px 2649px #fff, 1137px 1675px #fff, 1199px 1788px #fff, 875px 2537px #fff,
  2453px 903px #fff, 946px 1971px #fff, 791px 1263px #fff, 2372px 2649px #fff,
  2456px 2374px #fff, 919px 1335px #fff, 232px 1568px #fff, 2215px 2541px #fff,
  54px 81px #fff, 1291px 1436px #fff, 2433px 1928px #fff, 1796px 2018px #fff,
  1671px 131px #fff, 1855px 1992px #fff, 1485px 335px #fff, 2366px 794px #fff,
  1790px 969px #fff, 1473px 1521px #fff, 534px 919px #fff, 95px 659px #fff,
  2225px 2133px #fff, 1991px 1295px #fff, 2480px 2213px #fff, 117px 1071px #fff,
  1220px 102px #fff, 324px 1486px #fff, 340px 2420px #fff, 2461px 2447px #fff,
  804px 2461px #fff, 843px 509px #fff, 1150px 49px #fff, 1254px 1361px #fff,
  2594px 235px #fff, 1459px 695px #fff, 1310px 2261px #fff, 1653px 162px #fff,
  1021px 1423px #fff, 622px 258px #fff, 425px 2483px #fff, 2460px 246px #fff,
  505px 2149px #fff, 622px 1721px #fff, 1492px 2318px #fff, 1175px 397px #fff,
  1729px 2549px #fff, 2473px 526px #fff, 1689px 1316px #fff, 703px 974px #fff,
  2626px 1791px #fff, 2507px 911px #fff, 300px 672px #fff, 865px 1167px #fff,
  1759px 904px #fff, 1707px 904px #fff, 316px 2616px #fff, 1211px 231px #fff,
  1477px 692px #fff, 1529px 113px #fff, 1056px 667px #fff, 643px 2468px #fff,
  2405px 489px #fff, 148px 1267px #fff, 784px 1341px #fff, 2201px 413px #fff,
  133px 1364px #fff, 2397px 468px #fff, 1150px 406px #fff, 1432px 1355px #fff,
  1775px 1159px #fff, 2190px 1726px #fff, 1639px 1844px #fff, 928px 1377px #fff,
  876px 2473px #fff, 516px 1877px #fff, 1611px 609px #fff, 1004px 1952px #fff,
  925px 2199px #fff, 1521px 79px #fff;
}

#stars:after {
  content: '';
  position: absolute;
  top: auto;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1036px 1770px #fff, 430px 55px #fff, 402px 779px #fff,
  1744px 367px #fff, 599px 831px #fff, 692px 2568px #fff, 1445px 2488px #fff,
  47px 2056px #fff, 175px 1242px #fff, 2258px 1198px #fff, 1885px 883px #fff,
  1925px 1538px #fff, 1441px 308px #fff, 461px 2362px #fff, 2290px 323px #fff,
  2166px 1110px #fff, 637px 1288px #fff, 1637px 1276px #fff, 779px 510px #fff,
  218px 700px #fff, 10px 859px #fff, 1529px 1497px #fff, 884px 1804px #fff,
  2069px 2636px #fff, 1675px 2608px #fff, 2227px 2315px #fff,
  2451px 2013px #fff, 954px 2165px #fff, 321px 1786px #fff, 1991px 2500px #fff,
  1814px 305px #fff, 2312px 1731px #fff, 845px 1275px #fff, 404px 912px #fff,
  816px 998px #fff, 2573px 1085px #fff, 1899px 79px #fff, 472px 445px #fff,
  2120px 210px #fff, 119px 79px #fff, 2065px 215px #fff, 1647px 2427px #fff,
  2586px 780px #fff, 996px 2374px #fff, 2642px 1558px #fff, 1730px 1645px #fff,
  1381px 454px #fff, 2108px 1969px #fff, 1323px 1393px #fff, 696px 1239px #fff,
  284px 549px #fff, 2262px 1729px #fff, 1379px 2145px #fff, 2488px 1324px #fff,
  1808px 2174px #fff, 1476px 1746px #fff, 547px 2371px #fff, 2592px 235px #fff,
  1200px 2465px #fff, 931px 2574px #fff, 502px 166px #fff, 409px 1109px #fff,
  1486px 1279px #fff, 1795px 2565px #fff, 1038px 2408px #fff, 746px 182px #fff,
  1006px 1526px #fff, 2221px 2632px #fff, 456px 982px #fff, 1256px 1057px #fff,
  766px 2530px #fff, 1433px 1909px #fff, 2105px 598px #fff, 1816px 630px #fff,
  395px 2491px #fff, 255px 215px #fff, 2159px 2171px #fff, 78px 602px #fff,
  109px 2489px #fff, 2570px 662px #fff, 2614px 2625px #fff, 2626px 2245px #fff,
  1036px 417px #fff, 2471px 2052px #fff, 97px 2004px #fff, 2251px 1296px #fff,
  2238px 143px #fff, 2351px 2199px #fff, 869px 18px #fff, 657px 227px #fff,
  2246px 2520px #fff, 2207px 349px #fff, 1371px 1200px #fff, 1599px 1852px #fff,
  1772px 1889px #fff, 1480px 54px #fff, 1603px 2187px #fff, 1762px 2174px #fff,
  188px 516px #fff, 760px 285px #fff, 2041px 393px #fff, 1887px 541px #fff,
  1834px 1333px #fff, 437px 623px #fff, 2382px 2197px #fff, 1243px 2396px #fff,
  1768px 2420px #fff, 559px 2570px #fff, 1101px 485px #fff, 365px 420px #fff,
  940px 1276px #fff, 2134px 2066px #fff, 831px 77px #fff, 953px 2257px #fff,
  2219px 327px #fff, 2560px 428px #fff, 1534px 2397px #fff, 2565px 392px #fff,
  1659px 319px #fff, 1389px 2334px #fff, 220px 1252px #fff, 2511px 2358px #fff,
  901px 2610px #fff, 1822px 756px #fff, 2625px 1862px #fff, 2375px 611px #fff,
  67px 408px #fff, 1042px 1862px #fff, 970px 1673px #fff, 2276px 522px #fff,
  553px 226px #fff, 2390px 2569px #fff, 760px 291px #fff, 2070px 2468px #fff,
  289px 10px #fff, 462px 1774px #fff, 623px 549px #fff, 512px 2311px #fff,
  1804px 2417px #fff, 319px 1252px #fff, 329px 2456px #fff, 2041px 1071px #fff,
  313px 2013px #fff, 1900px 2069px #fff, 97px 2171px #fff, 1859px 1490px #fff,
  892px 1730px #fff, 1867px 2211px #fff, 984px 1353px #fff, 2128px 501px #fff,
  1044px 683px #fff, 148px 1441px #fff, 2546px 2509px #fff, 1945px 2457px #fff,
  913px 1482px #fff, 1686px 2351px #fff, 2299px 1895px #fff,
  1707px 1359px #fff, 1065px 1295px #fff, 2626px 1751px #fff, 1800px 1109px #fff,
  1923px 1973px #fff, 1706px 2375px #fff, 14px 695px #fff, 2449px 313px #fff,
  1802px 869px #fff, 570px 9px #fff, 1373px 1500px #fff, 208px 395px #fff,
  724px 844px #fff, 69px 1436px #fff, 1099px 2021px #fff, 1490px 651px #fff,
  11px 410px #fff, 2319px 2109px #fff, 1348px 554px #fff, 2040px 696px #fff,
  1274px 734px #fff, 1865px 1989px #fff, 514px 934px #fff, 2024px 728px #fff,
  1802px 375px #fff, 2037px 799px #fff, 2444px 1050px #fff, 385px 344px #fff,
  392px 795px #fff, 2129px 716px #fff, 2076px 1691px #fff, 45px 2556px #fff,
  1361px 722px #fff, 621px 490px #fff, 960px 442px #fff, 2628px 1669px #fff,
  1018px 1307px #fff, 2104px 1709px #fff, 15px 680px #fff, 820px 1875px #fff,
  907px 767px #fff, 1774px 1912px #fff, 583px 434px #fff, 2150px 2209px #fff,
  895px 171px #fff, 1056px 1251px #fff, 1843px 2529px #fff, 49px 1799px #fff,
  1951px 1799px #fff, 553px 23px #fff, 248px 457px #fff, 266px 2524px #fff,
  1983px 2153px #fff, 1078px 461px #fff, 1228px 2429px #fff, 1256px 288px #fff,
  2307px 1633px #fff, 504px 2513px #fff, 105px 1012px #fff, 1097px 2443px #fff,
  2633px 2072px #fff, 1739px 2092px #fff, 1979px 2295px #fff,
  508px 1606px #fff, 694px 791px #fff, 1698px 2524px #fff, 470px 734px #fff,
  214px 2372px #fff, 816px 333px #fff, 699px 2096px #fff, 22px 281px #fff,
  238px 1324px #fff, 621px 1606px #fff, 2585px 2444px #fff, 1516px 1453px #fff,
  1141px 1339px #fff, 266px 1415px #fff, 562px 2612px #fff, 2586px 583px #fff,
  1831px 916px #fff, 1489px 1911px #fff, 2495px 888px #fff, 1206px 1760px #fff,
  456px 2628px #fff, 2415px 1996px #fff, 2459px 235px #fff, 860px 121px #fff,
  2638px 1345px #fff, 1776px 1729px #fff, 170px 861px #fff, 405px 1409px #fff,
  1760px 1098px #fff, 1679px 1747px #fff, 2395px 836px #fff, 2146px 2068px #fff,
  2173px 119px #fff, 2131px 601px #fff, 1185px 2638px #fff, 2069px 2534px #fff,
  160px 90px #fff, 2229px 2279px #fff, 686px 1244px #fff, 2589px 1984px #fff,
  1935px 2020px #fff, 59px 800px #fff, 272px 1381px #fff, 1054px 228px #fff,
  2077px 2312px #fff, 1404px 146px #fff, 2010px 504px #fff, 2387px 2155px #fff,
  2457px 807px #fff, 348px 2286px #fff, 634px 1318px #fff, 642px 1174px #fff,
  1647px 1592px #fff, 1989px 860px #fff, 2193px 33px #fff, 1983px 2588px #fff,
  158px 1324px #fff, 238px 1957px #fff, 1783px 1074px #fff, 2081px 2261px #fff,
  541px 2053px #fff, 2332px 474px #fff, 1713px 1304px #fff, 1199px 2656px #fff,
  2334px 2218px #fff, 247px 1166px #fff, 1598px 2503px #fff, 613px 1613px #fff,
  1862px 994px #fff, 2618px 2525px #fff, 1075px 694px #fff, 683px 1621px #fff,
  497px 365px #fff, 1247px 2624px #fff, 474px 734px #fff, 191px 2290px #fff,
  2090px 1212px #fff, 534px 2471px #fff, 2053px 1589px #fff, 887px 1671px #fff,
  966px 1989px #fff, 1320px 308px #fff, 2356px 416px #fff, 1383px 2114px #fff,
  1601px 2624px #fff, 1686px 105px #fff, 2068px 1393px #fff, 1311px 2270px #fff,
  1300px 2274px #fff, 948px 478px #fff, 541px 1147px #fff, 613px 978px #fff,
  377px 2138px #fff, 136px 571px #fff, 1706px 1754px #fff, 1299px 1577px #fff,
  2614px 2016px #fff, 1711px 1501px #fff, 93px 1460px #fff, 1581px 1182px #fff,
  1497px 2306px #fff, 410px 1718px #fff, 1169px 1016px #fff, 86px 629px #fff,
  1333px 2605px #fff, 875px 1052px #fff, 534px 2096px #fff, 46px 827px #fff,
  703px 2113px #fff, 218px 885px #fff, 2495px 1715px #fff, 2049px 699px #fff,
  359px 1725px #fff, 585px 1150px #fff, 1995px 1066px #fff, 242px 2332px #fff,
  1681px 1186px #fff, 361px 1661px #fff, 1714px 2041px #fff, 252px 2189px #fff,
  1270px 321px #fff, 1936px 2124px #fff, 2296px 2637px #fff, 844px 1065px #fff,
  300px 605px #fff, 1856px 2274px #fff, 1129px 2477px #fff, 315px 1681px #fff,
  1115px 186px #fff, 1492px 977px #fff, 1702px 19px #fff, 1752px 321px #fff,
  2419px 1526px #fff, 442px 1851px #fff, 2592px 735px #fff, 2497px 1771px #fff,
  621px 728px #fff, 2409px 1439px #fff, 1419px 256px #fff, 323px 207px #fff,
  642px 2149px #fff, 2279px 1240px #fff, 1009px 2394px #fff, 2423px 1323px #fff,
  2496px 760px #fff, 772px 1441px #fff, 142px 973px #fff, 853px 2443px #fff,
  220px 1985px #fff, 2068px 263px #fff, 1089px 408px #fff, 1259px 458px #fff,
  1099px 297px #fff, 1232px 1854px #fff, 718px 621px #fff, 1453px 538px #fff,
  1516px 1232px #fff, 172px 703px #fff, 43px 2633px #fff, 1525px 2211px #fff,
  2149px 1909px #fff, 702px 944px #fff, 1061px 1463px #fff, 671px 1968px #fff,
  1195px 852px #fff, 2538px 2592px #fff, 1743px 1282px #fff, 1302px 1730px #fff,
  1852px 1288px #fff, 2384px 2508px #fff, 388px 474px #fff, 1590px 2284px #fff,
  1715px 2652px #fff, 714px 2624px #fff, 1570px 2226px #fff,
  2314px 2082px #fff, 1738px 352px #fff, 1226px 694px #fff, 2516px 627px #fff,
  510px 2322px #fff, 521px 1460px #fff, 860px 728px #fff, 518px 1992px #fff,
  1657px 183px #fff, 970px 1165px #fff, 255px 1957px #fff, 2380px 2379px #fff,
  1234px 413px #fff, 1666px 2190px #fff, 993px 2554px #fff, 2076px 1363px #fff,
  2038px 1718px #fff, 2640px 259px #fff, 968px 969px #fff, 2276px 2574px #fff,
  680px 2283px #fff, 2032px 642px #fff, 416px 2183px #fff, 373px 2459px #fff,
  1611px 1062px #fff, 578px 1584px #fff, 1891px 812px #fff, 2284px 2612px #fff,
  546px 1255px #fff, 279px 845px #fff, 1997px 1722px #fff, 1907px 464px #fff,
  1022px 79px #fff, 993px 1400px #fff, 1049px 670px #fff, 1909px 1681px #fff,
  2517px 1629px #fff, 1854px 2378px #fff, 1473px 1751px #fff,
  2225px 1855px #fff, 1135px 1343px #fff, 2267px 106px #fff, 2471px 196px #fff,
  2299px 457px #fff, 1846px 883px #fff, 1190px 539px #fff, 1967px 208px #fff,
  1916px 1538px #fff, 734px 2527px #fff, 686px 484px #fff, 2190px 251px #fff,
  1897px 1424px #fff, 1044px 969px #fff, 1436px 2274px #fff, 670px 271px #fff,
  1565px 2157px #fff, 873px 45px #fff, 1723px 1461px #fff, 329px 239px #fff,
  1611px 2085px #fff, 887px 2077px #fff, 924px 1118px #fff, 2138px 1658px #fff,
  998px 1173px #fff, 115px 222px #fff, 807px 1819px #fff, 1812px 1599px #fff,
  2441px 421px #fff, 2218px 2264px #fff, 1103px 1534px #fff, 2288px 1859px #fff,
  2129px 1702px #fff, 1298px 1162px #fff, 2318px 337px #fff, 1356px 2413px #fff,
  2221px 2348px #fff, 2513px 977px #fff, 1834px 180px #fff, 2479px 924px #fff,
  273px 1283px #fff, 1867px 2569px #fff, 2557px 1808px #fff, 328px 907px #fff,
  690px 2271px #fff, 857px 997px #fff, 1548px 1601px #fff, 1109px 429px #fff,
  228px 1795px #fff, 283px 1292px #fff, 2443px 252px #fff, 379px 2401px #fff,
  1392px 1727px #fff, 2058px 1097px #fff, 2300px 430px #fff, 1790px 2538px #fff,
  1026px 359px #fff, 458px 1582px #fff, 635px 1905px #fff, 1967px 33px #fff,
  2652px 2433px #fff, 2319px 973px #fff, 26px 2174px #fff, 917px 2387px #fff,
  2120px 756px #fff, 770px 325px #fff, 1859px 974px #fff, 542px 1798px #fff,
  2359px 159px #fff, 1532px 1822px #fff, 2258px 2407px #fff, 944px 1928px #fff,
  884px 380px #fff, 655px 2287px #fff, 1045px 6px #fff, 847px 1516px #fff,
  1016px 430px #fff, 1232px 412px #fff, 1247px 1893px #fff, 2505px 989px #fff,
  1214px 614px #fff, 2435px 2574px #fff, 2030px 331px #fff, 47px 1836px #fff,
  2124px 772px #fff, 2034px 472px #fff, 1262px 610px #fff, 1062px 1101px #fff,
  321px 1956px #fff, 869px 1060px #fff, 1058px 790px #fff, 1815px 901px #fff,
  1000px 30px #fff, 2167px 719px #fff, 1306px 95px #fff, 2304px 2435px #fff,
  27px 547px #fff, 1030px 1327px #fff, 445px 2586px #fff, 351px 775px #fff,
  210px 1743px #fff, 702px 218px #fff, 2630px 763px #fff, 953px 1599px #fff,
  976px 2116px #fff, 2068px 1090px #fff, 21px 2584px #fff, 2161px 1565px #fff,
  1643px 917px #fff, 2108px 2114px #fff, 2310px 2298px #fff, 958px 928px #fff,
  2399px 1577px #fff, 220px 1303px #fff, 2460px 305px #fff, 438px 2276px #fff,
  126px 1060px #fff, 2590px 1433px #fff, 623px 1248px #fff, 1687px 2525px #fff,
  1270px 1622px #fff, 1512px 1429px #fff, 414px 1719px #fff, 1311px 2343px #fff,
  1466px 1646px #fff, 569px 2650px #fff, 472px 758px #fff, 1299px 2441px #fff,
  1855px 1452px #fff, 367px 1214px #fff, 2318px 872px #fff, 1028px 667px #fff,
  2242px 1758px #fff, 2016px 2586px #fff, 1774px 666px #fff, 353px 207px #fff,
  605px 871px #fff, 1061px 95px #fff, 1408px 1674px #fff, 1864px 2243px #fff,
  313px 1767px #fff, 1935px 1045px #fff, 194px 1633px #fff, 2461px 1094px #fff,
  1412px 133px #fff, 1622px 1267px #fff, 26px 2428px #fff, 47px 1413px #fff,
  2028px 449px #fff, 1050px 2022px #fff, 985px 1461px #fff, 383px 1980px #fff,
  931px 1409px #fff, 518px 1424px #fff, 546px 1377px #fff, 2464px 1425px #fff,
  1923px 1443px #fff, 1548px 1162px #fff, 1228px 1230px #fff, 387px 360px #fff,
  1671px 2612px #fff, 2101px 1798px #fff, 2004px 1617px #fff, 280px 1271px #fff,
  1310px 1589px #fff, 1296px 2181px #fff, 688px 134px #fff, 881px 1855px #fff,
  1215px 707px #fff, 192px 1755px #fff, 91px 1858px #fff, 1306px 695px #fff,
  341px 964px #fff, 2126px 1105px #fff, 2175px 2012px #fff, 1662px 1540px #fff,
  1505px 803px #fff, 243px 135px #fff, 1405px 422px #fff, 1658px 2440px #fff,
  2637px 1476px #fff, 1432px 1935px #fff, 1224px 2354px #fff, 1071px 1795px #fff,
  2577px 2649px #fff, 1137px 1675px #fff, 1199px 1788px #fff, 875px 2537px #fff,
  2453px 903px #fff, 946px 1971px #fff, 791px 1263px #fff, 2372px 2649px #fff,
  2456px 2374px #fff, 919px 1335px #fff, 232px 1568px #fff, 2215px 2541px #fff,
  54px 81px #fff, 1291px 1436px #fff, 2433px 1928px #fff, 1796px 2018px #fff,
  1671px 131px #fff, 1855px 1992px #fff, 1485px 335px #fff, 2366px 794px #fff,
  1790px 969px #fff, 1473px 1521px #fff, 534px 919px #fff, 95px 659px #fff,
  2225px 2133px #fff, 1991px 1295px #fff, 2480px 2213px #fff, 117px 1071px #fff,
  1220px 102px #fff, 324px 1486px #fff, 340px 2420px #fff, 2461px 2447px #fff,
  804px 2461px #fff, 843px 509px #fff, 1150px 49px #fff, 1254px 1361px #fff,
  2594px 235px #fff, 1459px 695px #fff, 1310px 2261px #fff, 1653px 162px #fff,
  1021px 1423px #fff, 622px 258px #fff, 425px 2483px #fff, 2460px 246px #fff,
  505px 2149px #fff, 622px 1721px #fff, 1492px 2318px #fff, 1175px 397px #fff,
  1729px 2549px #fff, 2473px 526px #fff, 1689px 1316px #fff, 703px 974px #fff,
  2626px 1791px #fff, 2507px 911px #fff, 300px 672px #fff, 865px 1167px #fff,
  1759px 904px #fff, 1707px 904px #fff, 316px 2616px #fff, 1211px 231px #fff,
  1477px 692px #fff, 1529px 113px #fff, 1056px 667px #fff, 643px 2468px #fff,
  2405px 489px #fff, 148px 1267px #fff, 784px 1341px #fff, 2201px 413px #fff,
  133px 1364px #fff, 2397px 468px #fff, 1150px 406px #fff, 1432px 1355px #fff,
  1775px 1159px #fff, 2190px 1726px #fff, 1639px 1844px #fff, 928px 1377px #fff,
  876px 2473px #fff, 516px 1877px #fff, 1611px 609px #fff, 1004px 1952px #fff,
  925px 2199px #fff, 1521px 79px #fff;
}

#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  animation: animStar 150s linear infinite;
  box-shadow: 1925px 425px #fff, 2360px 2211px #fff, 441px 1814px #fff,
  1167px 452px #fff, 756px 2436px #fff, 1891px 2239px #fff, 2588px 2536px #fff,
  160px 1302px #fff, 1388px 1421px #fff, 615px 506px #fff, 562px 148px #fff,
  695px 1568px #fff, 1036px 869px #fff, 1859px 923px #fff, 1443px 1947px #fff,
  2126px 2485px #fff, 1065px 2503px #fff, 1036px 1637px #fff, 734px 1239px #fff,
  1405px 1590px #fff, 375px 1702px #fff, 659px 2641px #fff, 2437px 1489px #fff,
  2396px 1719px #fff, 7px 2255px #fff, 547px 2529px #fff, 804px 582px #fff,
  31px 1611px #fff, 311px 1755px #fff, 723px 457px #fff, 1472px 226px #fff,
  2131px 260px #fff, 1203px 861px #fff, 90px 1939px #fff, 863px 2618px #fff,
  989px 897px #fff, 1498px 635px #fff, 949px 2412px #fff, 1976px 699px #fff,
  359px 2175px #fff, 2568px 198px #fff, 2403px 502px #fff, 10px 518px #fff,
  1881px 929px #fff, 1959px 1610px #fff, 2114px 187px #fff, 359px 2267px #fff,
  91px 1892px #fff, 1473px 1400px #fff, 2588px 170px #fff, 493px 493px #fff,
  1981px 292px #fff, 474px 2507px #fff, 482px 482px #fff, 2521px 1670px #fff,
  2632px 1396px #fff, 1259px 1784px #fff, 2332px 321px #fff, 683px 1295px #fff,
  86px 1964px #fff, 2447px 727px #fff, 1263px 924px #fff, 610px 1529px #fff,
  1494px 1997px #fff, 639px 1250px #fff, 904px 1115px #fff, 1060px 1554px #fff,
  2629px 1983px #fff, 976px 2292px #fff, 279px 396px #fff, 1085px 835px #fff,
  912px 1024px #fff, 2288px 355px #fff, 2211px 679px #fff, 1969px 1517px #fff,
  774px 329px #fff, 1739px 1267px #fff, 835px 873px #fff, 1193px 2041px #fff,
  359px 1238px #fff, 1052px 621px #fff, 1776px 2303px #fff, 1347px 2198px #fff,
  2541px 1271px #fff, 780px 1085px #fff, 110px 606px #fff, 1236px 1965px #fff,
  2110px 2253px #fff, 816px 1596px #fff, 401px 2370px #fff, 2275px 1904px #fff,
  589px 1202px #fff, 2215px 949px #fff, 2112px 1552px #fff, 363px 1429px #fff,
  2233px 613px #fff, 958px 883px #fff, 1598px 13px #fff, 220px 1497px #fff,
  440px 2165px #fff, 571px 2081px #fff, 2108px 676px #fff, 851px 50px #fff,
  1093px 1113px #fff, 2340px 2213px #fff, 1492px 1939px #fff, 529px 174px #fff,
  916px 379px #fff, 611px 867px #fff, 2163px 485px #fff, 462px 2191px #fff,
  1089px 2588px #fff, 1304px 2549px #fff, 429px 101px #fff, 1302px 909px #fff,
  1179px 712px #fff, 1792px 2122px #fff, 1403px 885px #fff, 1864px 2390px #fff,
  1729px 1403px #fff, 1246px 316px #fff, 1960px 2413px #fff, 1521px 2274px #fff,
  2166px 1445px #fff, 1211px 1222px #fff, 1025px 1089px #fff, 535px 957px #fff,
  216px 978px #fff, 1412px 316px #fff, 2359px 1087px #fff, 2492px 1566px #fff,
  1565px 929px #fff, 1654px 1654px #fff, 1823px 77px #fff, 750px 2014px #fff,
  2425px 647px #fff, 1235px 933px #fff, 524px 1792px #fff, 1544px 852px #fff,
  291px 2448px #fff, 476px 1251px #fff, 186px 2339px #fff, 1355px 1788px #fff,
  364px 579px #fff, 1905px 2134px #fff, 2391px 1896px #fff, 391px 2457px #fff,
  2235px 2496px #fff, 1787px 2425px #fff, 1913px 2170px #fff,
  214px 1345px #fff, 1739px 782px #fff, 2379px 774px #fff, 958px 2540px #fff,
  422px 289px #fff, 807px 424px #fff, 658px 711px #fff, 2064px 2094px #fff,
  2077px 89px #fff, 535px 1231px #fff, 1457px 2394px #fff, 2412px 2272px #fff,
  2503px 2435px #fff, 708px 61px #fff, 1094px 1288px #fff, 704px 219px #fff,
  1369px 468px #fff, 2235px 416px #fff, 449px 152px #fff, 2137px 280px #fff,
  2284px 1574px #fff, 2113px 876px #fff, 369px 472px #fff, 617px 1947px #fff,
  1549px 368px #fff, 1263px 923px #fff, 2322px 389px #fff, 1054px 1211px #fff,
  702px 1028px #fff, 2504px 2253px #fff, 994px 242px #fff, 2558px 2036px #fff,
  133px 845px #fff, 1959px 1921px #fff, 1681px 1654px #fff, 1130px 1831px #fff,
  1312px 2628px #fff, 1240px 2342px #fff, 1226px 1689px #fff, 665px 526px #fff,
  1760px 10px #fff, 2616px 2412px #fff, 1425px 1863px #fff, 1278px 49px #fff,
  207px 107px #fff, 2546px 667px #fff, 1431px 2455px #fff, 202px 2219px #fff,
  1311px 2033px #fff, 2217px 1512px #fff;
}

#stars2:after {
  content: '';
  position: absolute;
  top: auto;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: 1925px 425px #fff, 2360px 2211px #fff, 441px 1814px #fff,
  1167px 452px #fff, 756px 2436px #fff, 1891px 2239px #fff, 2588px 2536px #fff,
  160px 1302px #fff, 1388px 1421px #fff, 615px 506px #fff, 562px 148px #fff,
  695px 1568px #fff, 1036px 869px #fff, 1859px 923px #fff, 1443px 1947px #fff,
  2126px 2485px #fff, 1065px 2503px #fff, 1036px 1637px #fff, 734px 1239px #fff,
  1405px 1590px #fff, 375px 1702px #fff, 659px 2641px #fff, 2437px 1489px #fff,
  2396px 1719px #fff, 7px 2255px #fff, 547px 2529px #fff, 804px 582px #fff,
  31px 1611px #fff, 311px 1755px #fff, 723px 457px #fff, 1472px 226px #fff,
  2131px 260px #fff, 1203px 861px #fff, 90px 1939px #fff, 863px 2618px #fff,
  989px 897px #fff, 1498px 635px #fff, 949px 2412px #fff, 1976px 699px #fff,
  359px 2175px #fff, 2568px 198px #fff, 2403px 502px #fff, 10px 518px #fff,
  1881px 929px #fff, 1959px 1610px #fff, 2114px 187px #fff, 359px 2267px #fff,
  91px 1892px #fff, 1473px 1400px #fff, 2588px 170px #fff, 493px 493px #fff,
  1981px 292px #fff, 474px 2507px #fff, 482px 482px #fff, 2521px 1670px #fff,
  2632px 1396px #fff, 1259px 1784px #fff, 2332px 321px #fff, 683px 1295px #fff,
  86px 1964px #fff, 2447px 727px #fff, 1263px 924px #fff, 610px 1529px #fff,
  1494px 1997px #fff, 639px 1250px #fff, 904px 1115px #fff, 1060px 1554px #fff,
  2629px 1983px #fff, 976px 2292px #fff, 279px 396px #fff, 1085px 835px #fff,
  912px 1024px #fff, 2288px 355px #fff, 2211px 679px #fff, 1969px 1517px #fff,
  774px 329px #fff, 1739px 1267px #fff, 835px 873px #fff, 1193px 2041px #fff,
  359px 1238px #fff, 1052px 621px #fff, 1776px 2303px #fff, 1347px 2198px #fff,
  2541px 1271px #fff, 780px 1085px #fff, 110px 606px #fff, 1236px 1965px #fff,
  2110px 2253px #fff, 816px 1596px #fff, 401px 2370px #fff, 2275px 1904px #fff,
  589px 1202px #fff, 2215px 949px #fff, 2112px 1552px #fff, 363px 1429px #fff,
  2233px 613px #fff, 958px 883px #fff, 1598px 13px #fff, 220px 1497px #fff,
  440px 2165px #fff, 571px 2081px #fff, 2108px 676px #fff, 851px 50px #fff,
  1093px 1113px #fff, 2340px 2213px #fff, 1492px 1939px #fff, 529px 174px #fff,
  916px 379px #fff, 611px 867px #fff, 2163px 485px #fff, 462px 2191px #fff,
  1089px 2588px #fff, 1304px 2549px #fff, 429px 101px #fff, 1302px 909px #fff,
  1179px 712px #fff, 1792px 2122px #fff, 1403px 885px #fff, 1864px 2390px #fff,
  1729px 1403px #fff, 1246px 316px #fff, 1960px 2413px #fff, 1521px 2274px #fff,
  2166px 1445px #fff, 1211px 1222px #fff, 1025px 1089px #fff, 535px 957px #fff,
  216px 978px #fff, 1412px 316px #fff, 2359px 1087px #fff, 2492px 1566px #fff,
  1565px 929px #fff, 1654px 1654px #fff, 1823px 77px #fff, 750px 2014px #fff,
  2425px 647px #fff, 1235px 933px #fff, 524px 1792px #fff, 1544px 852px #fff,
  291px 2448px #fff, 476px 1251px #fff, 186px 2339px #fff, 1355px 1788px #fff,
  364px 579px #fff, 1905px 2134px #fff, 2391px 1896px #fff, 391px 2457px #fff,
  2235px 2496px #fff, 1787px 2425px #fff, 1913px 2170px #fff,
  214px 1345px #fff, 1739px 782px #fff, 2379px 774px #fff, 958px 2540px #fff,
  422px 289px #fff, 807px 424px #fff, 658px 711px #fff, 2064px 2094px #fff,
  2077px 89px #fff, 535px 1231px #fff, 1457px 2394px #fff, 2412px 2272px #fff,
  2503px 2435px #fff, 708px 61px #fff, 1094px 1288px #fff, 704px 219px #fff,
  1369px 468px #fff, 2235px 416px #fff, 449px 152px #fff, 2137px 280px #fff,
  2284px 1574px #fff, 2113px 876px #fff, 369px 472px #fff, 617px 1947px #fff,
  1549px 368px #fff, 1263px 923px #fff, 2322px 389px #fff, 1054px 1211px #fff,
  702px 1028px #fff, 2504px 2253px #fff, 994px 242px #fff, 2558px 2036px #fff,
  133px 845px #fff, 1959px 1921px #fff, 1681px 1654px #fff, 1130px 1831px #fff,
  1312px 2628px #fff, 1240px 2342px #fff, 1226px 1689px #fff, 665px 526px #fff,
  1760px 10px #fff, 2616px 2412px #fff, 1425px 1863px #fff, 1278px 49px #fff,
  207px 107px #fff, 2546px 667px #fff, 1431px 2455px #fff, 202px 2219px #fff,
  1311px 2033px #fff, 2217px 1512px #fff;
}

#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  animation: animStar 200s linear infinite;
  box-shadow: 514px 2497px #fff, 1010px 2080px #fff, 1977px 1328px #fff,
  1260px 2431px #fff, 2629px 1331px #fff, 1707px 2610px #fff, 872px 377px #fff,
  1686px 2174px #fff, 2420px 795px #fff, 853px 2527px #fff, 393px 75px #fff,
  1224px 2154px #fff, 633px 2471px #fff, 875px 815px #fff, 1557px 1812px #fff,
  1887px 376px #fff, 1379px 972px #fff, 668px 881px #fff, 2077px 615px #fff,
  509px 1592px #fff, 1557px 1639px #fff, 1165px 2351px #fff, 1138px 2147px #fff,
  1828px 2558px #fff, 2294px 1220px #fff, 1266px 158px #fff, 1021px 1611px #fff,
  1319px 1944px #fff, 2565px 953px #fff, 2589px 1004px #fff, 2417px 1493px #fff,
  2521px 2223px #fff, 611px 263px #fff, 340px 360px #fff, 1000px 723px #fff,
  1625px 2472px #fff, 2461px 589px #fff, 416px 2471px #fff, 942px 593px #fff,
  2056px 927px #fff, 896px 1536px #fff, 1478px 172px #fff, 472px 2380px #fff,
  1989px 1295px #fff, 2255px 638px #fff, 1750px 1682px #fff, 2187px 1413px #fff,
  1572px 315px #fff, 567px 2104px #fff, 1142px 336px #fff, 609px 1248px #fff,
  2017px 2186px #fff, 2584px 79px #fff, 281px 2194px #fff, 1284px 2375px #fff,
  629px 946px #fff, 172px 101px #fff, 1884px 1577px #fff, 1208px 2101px #fff,
  2544px 1013px #fff, 271px 1520px #fff, 2657px 1405px #fff, 1952px 1730px #fff,
  191px 2229px #fff, 27px 2129px #fff, 508px 1811px #fff, 1212px 1001px #fff,
  1979px 1868px #fff, 1066px 207px #fff, 231px 731px #fff, 449px 1816px #fff,
  1592px 1029px #fff, 800px 646px #fff, 907px 2496px #fff, 462px 1998px #fff,
  541px 1514px #fff, 1263px 1862px #fff, 1226px 1514px #fff, 2257px 389px #fff,
  1646px 1703px #fff, 1380px 1592px #fff, 500px 2512px #fff,
  1669px 2234px #fff, 1340px 1750px #fff, 2045px 1924px #fff,
  1577px 1162px #fff, 2616px 851px #fff, 1783px 25px #fff, 38px 2303px #fff,
  21px 2194px #fff, 1357px 1429px #fff, 961px 563px #fff, 1562px 54px #fff,
  657px 2602px #fff, 1723px 573px #fff, 232px 2004px #fff, 1105px 160px #fff,
  662px 2589px #fff, 820px 1170px #fff, 319px 535px #fff;
}

#stars3:after {
  content: '';
  position: absolute;
  top: auto;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: 514px 2497px #fff, 1010px 2080px #fff, 1977px 1328px #fff,
  1260px 2431px #fff, 2629px 1331px #fff, 1707px 2610px #fff, 872px 377px #fff,
  1686px 2174px #fff, 2420px 795px #fff, 853px 2527px #fff, 393px 75px #fff,
  1224px 2154px #fff, 633px 2471px #fff, 875px 815px #fff, 1557px 1812px #fff,
  1887px 376px #fff, 1379px 972px #fff, 668px 881px #fff, 2077px 615px #fff,
  509px 1592px #fff, 1557px 1639px #fff, 1165px 2351px #fff, 1138px 2147px #fff,
  1828px 2558px #fff, 2294px 1220px #fff, 1266px 158px #fff, 1021px 1611px #fff,
  1319px 1944px #fff, 2565px 953px #fff, 2589px 1004px #fff, 2417px 1493px #fff,
  2521px 2223px #fff, 611px 263px #fff, 340px 360px #fff, 1000px 723px #fff,
  1625px 2472px #fff, 2461px 589px #fff, 416px 2471px #fff, 942px 593px #fff,
  2056px 927px #fff, 896px 1536px #fff, 1478px 172px #fff, 472px 2380px #fff,
  1989px 1295px #fff, 2255px 638px #fff, 1750px 1682px #fff, 2187px 1413px #fff,
  1572px 315px #fff, 567px 2104px #fff, 1142px 336px #fff, 609px 1248px #fff,
  2017px 2186px #fff, 2584px 79px #fff, 281px 2194px #fff, 1284px 2375px #fff,
  629px 946px #fff, 172px 101px #fff, 1884px 1577px #fff, 1208px 2101px #fff,
  2544px 1013px #fff, 271px 1520px #fff, 2657px 1405px #fff, 1952px 1730px #fff,
  191px 2229px #fff, 27px 2129px #fff, 508px 1811px #fff, 1212px 1001px #fff,
  1979px 1868px #fff, 1066px 207px #fff, 231px 731px #fff, 449px 1816px #fff,
  1592px 1029px #fff, 800px 646px #fff, 907px 2496px #fff, 462px 1998px #fff,
  541px 1514px #fff, 1263px 1862px #fff, 1226px 1514px #fff, 2257px 389px #fff,
  1646px 1703px #fff, 1380px 1592px #fff, 500px 2512px #fff,
  1669px 2234px #fff, 1340px 1750px #fff, 2045px 1924px #fff,
  1577px 1162px #fff, 2616px 851px #fff, 1783px 25px #fff, 38px 2303px #fff,
  21px 2194px #fff, 1357px 1429px #fff, 961px 563px #fff, 1562px 54px #fff,
  657px 2602px #fff, 1723px 573px #fff, 232px 2004px #fff, 1105px 160px #fff,
  662px 2589px #fff, 820px 1170px #fff, 319px 535px #fff;
}


@keyframes animStar {
  from {
      transform: translateY(0px);
  }
  to {
      transform: translateY(-2000px);
  }
}

canvas#particleCanvas {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    animation: load 0.4s ease-in-out forwards;
    z-index: -1;
}


.page-con-content {
	position:relative;
	top:0;
	width:100%;
	min-height:100%;
	display:inline-block
}

.landing-con-override {
	position: fixed;
	z-index: -1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.wavebar-con-container-master {
	width:100%;
	height:100%;
	position:absolute;
	z-index:1;
	overflow:hidden
}

.wavebar-con-wrap {
	width:100%;
	position:absolute;
	bottom:0;
	transition:all 1s ease-in-out 0s
}
.wavebar-svg-object {
	background:url(/templates/standart/img/wavebar.svg) repeat-x;
	position:absolute;
	top:-198px;
	width:6144px;
	height:198px;
    backdrop-filter: blur(8px);
	animation:11s cubic-bezier(.36,.45,.63,.53) 0s infinite normal none running wavebar-svg-object;
	transform:translate3d(0px,0px,0px)
}

.landing-con-main {
	position:relative;
	overflow:hidden;
	width:100%;
	height:100%;
	min-height:600px;
	max-height:unset;
	background:#090a19
}

#object-particles {
	position:absolute;
	width:100%;
	height:100%;
	background-image:url("");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:50% 50%;
	z-index:1;
	pointer-events:none;
	opacity:.3
}

.particles-js-canvas-el {
	width:100% !important;
}

.content-con-backdrop {
	position:absolute;
	width:100%;
	height:100%;
	background:#090a19
}

.wavebar-svg-object:nth-of-type(2) {
	top:-174px;
	animation:11s cubic-bezier(.4,.2,.2,.2) -.124s infinite normal none running wavebar-svg-object,11s cubic-bezier(0.25, 0.1, 0.14, 1.04) -1.24s infinite normal none running swell;
	opacity:1

}

@keyframes wavebar-svg-object {
	0% {
		margin-left:0;
	}
	100% {
		margin-left:-1600px;
	}
}
     .dc_auth_steam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(180deg, #171a21 0%, #1b1f27 100%);
    border: 1px solid #2a475e;
    border-radius: 6px;
    color: #c7d5e0;
    font-family: 'Motiva Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    margin-top: 12px;
  }

  .dc_auth_steam:hover {
    background: linear-gradient(180deg, #1b1f27 0%, #243050 100%);
    border-color: #5294d5;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(82, 148, 213, 0.3);
    transform: translateY(-2px);
  }

  .dc_auth_steam:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  }

  /* Иконка Steam */
  .dc_auth_steam i {
    font-size: 26px;
    color: #66c0f4;
    transition: color 0.3s ease;
  }

  .dc_auth_steam:hover i {
    color: #ffffff;
  }

.dc_auth_00 {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    #dc_auth_01 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
.dc_auth_02 {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 767px;
    padding: 20px;
}
   .dc_auth_03 {
    background: rgb(15 15 30 / 43%);
    /* backdrop-filter: blur(34px); */
    border-radius: 28px;
    padding: 26px 35px;
    /* box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 100px rgba(255, 215, 0, 0.1); */
    /* border: 1px solid rgba(255, 215, 0, 0.25); */
    animation: dc_auth_04 0.9s ease-out;
}
    @keyframes dc_auth_04 {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
.dc_auth_23 {
      text-align: center;
      margin-top: 30px;
      font-size: 15px;
      color: #a0a0c0;
    }
    .dc_auth_23 a {
      color: #ffd700;
      text-decoration: none;
      font-weight: 600;
    }
    .dc_auth_23 a:hover {
      text-decoration: underline;
    }
    .dc_auth_05 {
      text-align: center;
      margin-bottom: 40px;
    }
    .dc_auth_06 {
      width: 84px;
      height: 84px;
      border-radius: 22px;
      margin: 0 auto 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 38px;
      font-weight: bold;
    }
    .dc_auth_07 h1 {
      font-size: 32px;
      font-weight: 700;
      text-align: center;
      background: linear-gradient(90deg, #ffd700, #fff8b0, #ffd700);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 8px;
    }
    .dc_auth_07 p {
      text-align: center;
      color: #a0a0c0;
      font-size: 16px;
    }
    .dc_auth_08 {
      margin-bottom: 26px;
      position: relative;
    }
    .dc_auth_09 {
      display: block;
      margin-bottom: 10px;
      font-size: 14px;
      color: #b0b0d0;
      font-weight: 500;
    }
    .dc_auth_10 {
      width: 100%;
      padding: 17px 20px;
      background: rgba(25, 25, 45, 0.7);
      border: 1px solid rgba(255, 215, 0, 0.3);
      border-radius: 16px;
      color: #fff;
      font-size: 16px;
      transition: all 0.4s ease;
    }
    .dc_auth_10:focus {
      outline: none;
      border-color: #ffd700;
      background: rgba(30, 30, 55, 0.9);
      box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
    }
    .dc_auth_10::placeholder {
      color: #707090;
    }
    .dc_auth_11 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
      flex-wrap: wrap;
      gap: 16px;
    }
    .dc_auth_12 {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #b0b0c0;
    }
    .dc_auth_12 input[type="checkbox"] {
      margin-right: 10px;
      accent-color: #ffd700;
      transform: scale(1.15);
    }
    .dc_auth_13 {
      color: #ffd700;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: opacity 0.3s;
    }
    .dc_auth_13:hover {
      opacity: 0.85;
    }
    .dc_auth_14 {
      width: 100%;
      padding: 18px;
      background: linear-gradient(90deg, #ffd700, #ffed4e);
      color: #0a0a12;
      font-weight: 700;
      font-size: 17px;
      border: none;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.4s ease;
      box-shadow: 0 10px 30px rgba(255, 215, 0, 0.45);
      position: relative;
      overflow: hidden;
    }
    .dc_auth_14::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
      transition: left 0.7s;
    }
    .dc_auth_14:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(255, 215, 0, 0.5);
    }
    .dc_auth_14:hover::before {
      left: 100%;
    }
    .dc_auth_15 {
      text-align: center;
      margin: 40px 0;
      color: #707090;
      position: relative;
    }
    .dc_auth_15::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.35), transparent);
    }
    .dc_auth_15 span {
      background: rgba(15, 15, 30, 0.85);
      padding: 0 24px;
      font-size: 14px;
    }
    .dc_auth_16 {
      display: flex;
      gap: 16px;
    }
    .dc_auth_17 {
      flex: 1;
      padding: 15px;
      background: rgba(30, 30, 50, 0.6);
      border: 1px solid rgba(255, 215, 0, 0.25);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: #e0e0e0;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.4s;
      font-size: 15px;
    }
    .dc_auth_17:hover {
      background: rgba(255, 215, 0, 0.12);
      border-color: #ffd700;
      transform: translateY(-2px);
    }
    .dc_auth_18 {
      text-align: center;
      margin-top: 40px;
      font-size: 15px;
      color: #a0a0c0;
    }
    .dc_auth_18 a {
      color: #ffd700;
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
    }
.dc_auth_14 {
      width: 100%;
      padding: 18px;
      background: linear-gradient(90deg, #ffd700, #ffed4e);
      color: #0a0a12;
      font-weight: 700;
      font-size: 17px;
      border: none;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.4s ease;
      box-shadow: 0 10px 30px rgba(255, 215, 0, 0.45);
      position: relative;
      overflow: hidden;
    }
    .dc_auth_14::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
      transition: left 0.7s;
    }
    .dc_auth_14:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(255, 215, 0, 0.5);
    }
    .dc_auth_14:hover::before {
      left: 100%;
    }
    .dc_auth_18 a:hover {
      text-decoration: underline;
    }
    .dc_auth_20 {
      display: none;
    }
    .dc_auth_21 {
      display: none;
    }
    @media (max-width: 480px) {
      .dc_auth_02 {
        padding: 15px;
      }
      .dc_auth_03 {
        padding: 48px 32px;
        border-radius: 24px;
      }
      .dc_auth_06 {
        width: 70px;
        height: 70px;
        font-size: 32px;
      }
      .dc_auth_07 h1 {
        font-size: 28px;
      }
    }
    
      .dc_auth_08 {
    position: relative;
    margin-bottom: 32px;
  }

  /* Плавающий лейбл */
  .dc_auth_09 {
    position: absolute;
    left: 56px;
    top: 16px;
    font-size: 16px;
    color: #b0b0d0;
    font-weight: 500;
    pointer-events: none;
    transition: all 0.3s ease;
    transform-origin: left center;
  }

  /* Инпут */
  .dc_auth_10 {
    width: 100%;
    padding: 16px 56px 16px 56px; /* слева и справа место под иконки */
    background: rgba(25, 25, 45, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 16px;
    color: #fff;
    font-size: 16px;
    transition: all 0.4s ease;
  }

  .dc_auth_10:focus {
    outline: none;
    border-color: #ffd700;
    background: rgba(30, 30, 55, 0.8);
    box-shadow: 
      0 0 0 4px rgba(255, 215, 0, 0.15),
      0 0 20px rgba(255, 215, 0, 0.1);
  }

  /* Подъём лейбла при фокусе или заполнении */
  .dc_auth_10:focus ~ .dc_auth_09,
  .dc_auth_10:not(:placeholder-shown) ~ .dc_auth_09 {
    top: -10px;
    left: 24px;
    font-size: 13px;
    color: #ffd700;
    background: rgba(15, 15, 30, 0.95);
    padding: 0 10px;
    border-radius: 4px;
  }

  /* Браузер сам подставил логин и пароль (автозаполнение): до первого клика страница видит поле «пустым»,
     поэтому лейбл оставался внутри и накладывался на текст. Поднимаем его и по :autofill (отдельными правилами —
     браузер, не знающий одно из них, иначе пропустил бы оба), а светлый фон Chrome закрашиваем цветом поля */
  .dc_auth_10:-webkit-autofill ~ .dc_auth_09 {
    top: -10px;
    left: 24px;
    font-size: 13px;
    color: #ffd700;
    background: rgba(15, 15, 30, 0.95);
    padding: 0 10px;
    border-radius: 4px;
  }

  .dc_auth_10:autofill ~ .dc_auth_09 {
    top: -10px;
    left: 24px;
    font-size: 13px;
    color: #ffd700;
    background: rgba(15, 15, 30, 0.95);
    padding: 0 10px;
    border-radius: 4px;
  }

  .dc_auth_10:-webkit-autofill,
  .dc_auth_10:-webkit-autofill:hover {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #17172b inset;
    box-shadow: 0 0 0 1000px #17172b inset;
    transition: background-color 99999s ease-out 0s;
  }

  .dc_auth_10:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #1c1c34 inset, 0 0 0 4px rgba(255, 215, 0, 0.15), 0 0 20px rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 0 1000px #1c1c34 inset, 0 0 0 4px rgba(255, 215, 0, 0.15), 0 0 20px rgba(255, 215, 0, 0.1);
  }

  /* Иконка слева (логин/пароль) */
  .dc_auth_08 .icon-left {
    position: absolute;
    left: 20px;
    top: 16px;
    font-size: 23px;
    color: #a0a0c0;
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: 2;
  }

  /* Красивый стиль при фокусе: подпрыгивание + жёлтый акцент + свечение */
  .dc_auth_10:focus ~ .icon-left {
    color: #ffd700;
    transform: translateY(-5px) scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
  }

  /* Глазок справа */
  .dc_auth_08 .password-toggle {
    position: absolute;
    right: 20px;
    top: 16px;
    font-size: 22px;
    color: #a0a0c0;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
  }

  .dc_auth_08 .password-toggle:hover {
    color: #ffd700;
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.3));
  }

  /* Жёлтый акцент при фокусе на поле пароля */
  .dc_auth_10:focus ~ .password-toggle {
    color: #ffd700;
  }
.sound-control-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 10px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    min-width: 200px;
}

.sound-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.sound-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffd700;
    font-size: 12px;
    cursor: pointer;
    padding: 5px 10px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: 5px;
    transition: all 0.3s;
}

.sound-info:hover {
    background: rgba(255, 215, 0, 0.2);
}

.sound-toggle {
    background: none;
    border: 2px solid #ffd700;
    border-radius: 50%;
    padding: 5px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sound-toggle:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: scale(1.1);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .sound-control-panel {
        top: 10px;
        right: 10px;
        padding: 8px;
        min-width: 160px;
    }
    
    .sound-info {
        font-size: 10px;
        padding: 4px 8px;
    }
    
    .sound-toggle img {
        height: 35px;
        width: 35px;
    }
}