:root,
[data-bs-theme=dark] {
    --bs-body-bg: #40506a;
    --bs-body-bg-rgb: 64, 80, 106;
    --bs-secondary-bg: #36445a;
    --bs-secondary-bg-rgb: 54, 68, 90;
    --bs-tertiary-bg: #2a3950;
    --bs-tertiary-bg-rgb: 42, 57, 80;
    --bs-border-radius: 0;
    --bs-border-color: var(--bs-primary);
    --bs-primary-color-contrast: #2a3950;
}

body {
    background-color: #f4f4f4;
}

a {
    text-decoration: none;
}

.btn {
    font-weight: bold;
}

.page-container::before,
.page-container::after {
    width: 100%;
    height: 205px;
    content: "";
    display: block;
    background-position: center;
    background-position-y: 0;
    background-size: cover;
}

.page-container::before {
    /* Заменили %232a3950 на %23161817 */
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201030%20160%22%3E%3Cpath%20fill%3D%22%23161817%22%20d%3D%22M0%20160%20754%200l276%20160H0Z%22%2F%3E%3C%2Fsvg%3E%0A');
}

.page-container::after {
    /* Заменили %232a3950 на %23161817 */
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201030%20160%22%3E%3Cpath%20fill%3D%22%23161817%22%20d%3D%22m1030%20.002-754%20160L0%20.002h1030Z%22%2F%3E%3C%2Fsvg%3E%0A');
}


h1 {
    position: relative;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 3.5rem;
}

h1::after {
    position: absolute;
    display: table;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 4px;
    bottom: -10px;
    border-radius: 2px;
    background-color: #00ff66;
    content: "";
    clear: both;
}

.header {
    position: relative;
    min-height: 400px;
}

.lime-home .header {
    min-height: 650px;
}

.lime-home .header-title {
    margin-top: 7rem;
}

.header::before {
    position: absolute;
    content: "";
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.header::after {
    position: absolute;
    z-index: 2;
    bottom: 0;
    width: 100%;
    height: 200px;
    content: "";
    display: block;
    background-position: center;
    background-position-y: 0;
    background-size: cover;
}

.navbar { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 1000; }

.navbar .navbar-nav .nav-link.active,
.navbar .dropdown-toggle::after {
    color: #00ff88;
}

.navbar .nav-item {
    margin-right: 0.25rem;
    margin-left: 0.25rem;
}

.navbar .nav-item .nav-link {
    color: #fff;
    text-transform: uppercase;
}

.footer {
    position: relative;
}

.bg-body-tertiary {
    background-color: rgb(22 24 23) !important;
}

.card {
    background-color: rgb(22 24 23) !important;
    border: none !important;
}
.dropdown-item.active {
    color: #00ff66;
    text-decoration: none;
    background-color: transparent !important;
}
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content; 
    min-width: 180px;
    margin: 15px auto 0;

    background: linear-gradient(90deg, #00ff66 0%, #095628 100%);
    color: rgb(0, 0, 0) !important;

    /* ИЗМЕНЕНИЯ ТУТ: */
    font-weight: 600;      /* Было 800. 600 — это Semi-Bold, выглядит аккуратнее */
    font-size: 14px;       /* Можно чуть уменьшить размер букв для изящности */
    letter-spacing: 0.5px; /* Легкий отступ между буквами (как в кнопке сверху) */
    
    padding: 8px 30px; 
    border-radius: 12px;
    text-decoration: none !important;
    transition: 0.3s;
    box-shadow: 0 4px 12px rgba(9, 86, 40, 0.3);
    border: none;
}
.btn-primary:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(0, 255, 102, 0.3);
}
.table {
    background: #262827;
    --bs-table-bg: transparent !important;
    --bs-table-border-color: #fff;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.6rem 1.2rem; /* Увеличили внутренние отступы */
    font-size: 1rem;
    background-color: #2b3035; /* Глубокий темный фон */
    border: 1px solid #495057; /* Тонкая неброская граница */
    border-radius: 50px; /* Полностью круглые края (стиль Modern) */
    transition: all 0.2s ease-in-out;
}

/* Эффект при клике (фокусе) */
.form-control:focus {
    background-color: #32383e;
    border-color: #00ff66 /* Цвет акцента при наборе */
}
.list-group-item.active {
    z-index: 2;
    color: var(--bs-list-group-active-color);
    background-color: #2b3035;
    border-color: #2b3035;
}
.list-group-item {
    position: relative;
    display: block;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
    color: var(--bs-list-group-color);
    text-decoration: none;
    background-color: #495057;
    border: none;
}

.modal-backdrop {
    display: none !important;
}



/* Home page styles */
    .bg-body-tertiary {
    background-color: rgb(22 24 23) !important;
    --bs-bg-opacity: 1; /* Сбрасываем прозрачность переменной */
    backdrop-filter: blur(10px); /* Эффект размытия за блоком */
}
    .text-center {
    background: #262827;
    }
    h1 {
    background: #262827;
    margin-right: 200px;
    margin-left: 200px;
    border-radius: 25px 0px 25px 0px !important;
    }
    .card {
    border: none !important;
    /* Значения: Топ-Лево, Топ-Право, Низ-Право, Низ-Лево */
    border-radius: 0px 25px 25px 0px !important;
    
    /* Дополнительно: скругляем внутренние элементы (картинки, шапку), чтобы они не вылезали за края */
    overflow: hidden;
}
/* Основной контейнер карточки */
.server-card-custom {
    /* background: linear-gradient(145deg, #262827 0%, #26282778 100%); */ /* Убрано для работы background_image */
    border-radius: 0 40px 0 40px !important; /* Те самые углы */
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.server-card-custom:hover {
    transform: translateY(-5px);
    border-color: rgba(120, 255, 197, 0.4) !important;
}
.badge-status.new-server {
    background: #4caf50 !important; /* Насыщенный зеленый из скриншота */
    color: #ffffff !important;
    padding: 6px 16px;
    border-radius: 25px; /* Округлые края как на картинке */
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.3); /* Легкое зеленое свечение */
}

/* Анимация мерцания иконки звезд (по желанию) */
.badge-status.new-server i {
    animation: stars-blink 2s infinite;
}

@keyframes stars-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* Базовый стиль для всех статусов */
.badge-status {
    font-size: 11px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Расстояние между точкой и текстом */
    transition: all 0.3s ease;
}

/* Анимированный ONLINE */
.badge-status.online { 
    background: #198754; 
    color: white; 
    position: relative;
    overflow: hidden;
    /* Мягкое свечение вокруг всей кнопки */
    animation: online-glow 2s infinite ease-in-out;
}

/* Пульсирующая точка перед текстом */
.badge-status.online::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: dot-pulse 2s infinite;
}

/* Анимация свечения фона */
@keyframes online-glow {
    0% { box-shadow: 0 0 5px rgba(25, 135, 84, 0.4); }
    50% { box-shadow: 0 0 15px rgba(25, 135, 84, 0.8); }
    100% { box-shadow: 0 0 5px rgba(25, 135, 84, 0.4); }
}

/* Анимация пульсации точки (эффект радара) */
@keyframes dot-pulse {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
    }
    100% {
        transform: scale(0.9);
        opacity: 1;
    }
}

/* Остальные статусы без анимации */
.badge-status.offline { background: #dc3545; color: white; }
.badge-status.wipe { background: #6f42c1; color: white; }


/* Текстовые блоки */
.server-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
}
.version-tag {
    color: #ffc107;
    border: 1px solid #ffc107;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 12px;
    background: rgba(255, 193, 7, 0.05);
}
.server-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

/* Кастомный прогресс-бар */
.stats-label { font-size: 11px; color: rgba(255,255,255,0.8); font-weight: 700; }
.stats-value { color: #ffc107; font-weight: 800; }

.custom-progress {
    height: 12px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
}
.progress-fill {
    height: 100%;
    background: #ffc107;
    border-radius: 10px;
    box-shadow: 0 0 16px rgba(255, 193, 7, 0.6);
}
.progress-text { font-size: 10px; color: rgba(255,255,255,0.8); }

/* Кнопка "Начать играть" */
.btn-play-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #00ff66 0%, #095628 100%);
    color: #000 !important;
    font-weight: 800;
    padding: 14px;
    border-radius: 14px;
    text-decoration: none !important;
    transition: 0.3s;
    box-shadow: 0 4px 15px #095628;
}
.btn-play-custom:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.address-box {
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    color: #78ffc5;
}
/* Тех. работы - Красный */
.status-work { background: rgba(220, 53, 69, 0.2); color: #dc3545; border: 1px solid #dc3545; }

/* Скоро - Золотистый (как на скрине) */
.status-soon { background: #a38245; color: #fff; border: none; box-shadow: 0 0 10px rgba(163, 130, 69, 0.4); }

/* Вайп - Голубой */
.status-wipe { background: rgba(13, 202, 240, 0.2); color: #0dcaf0; border: 1px solid #0dcaf0; }

/* Общий стиль для иконок в тегах */
.badge-status i { font-size: 12px; }